:root{--bg:#f5f7f8;--surface:#fff;--surface-soft:#f8fbfa;--surface-2:#eef7f4;--ink:#121918;--muted:#687875;--line:#d8e2df;--line-strong:#c2d2ce;--accent:#0b9b8c;--accent-strong:#04776c;--coral:#ee684d;--amber:#f5b942;--blue:#315fd1;--danger:#b42318;--success:#12735f;--shadow:0 24px 70px rgba(23,37,35,.13);--shadow-soft:0 12px 32px rgba(23,37,35,.08)}*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;min-width:320px}body{margin:0;overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.app-shell{background:linear-gradient(180deg,#0b9b8c29 0,#f5f7f800 320px),linear-gradient(112deg,rgba(238,104,77,.1),transparent 36%),var(--bg);min-height:100vh;overflow-x:hidden;padding:clamp(14px,2.2vw,28px);width:100%}.topbar,.workspace{margin:0 auto;max-width:1440px;min-width:0;width:100%}.topbar{gap:16px;justify-content:space-between;padding:8px 0 20px}.brand,.topbar{align-items:center;display:flex}.brand{gap:12px;min-width:0}.brand-mark{background:#e3f8f1;border:1px solid rgba(11,155,140,.28);border-radius:8px;box-shadow:var(--shadow-soft);display:grid;flex:0 0 auto;height:44px;place-items:center;width:44px}.brand-mark,.eyebrow{color:var(--accent-strong)}.eyebrow{font-size:12px;font-weight:800;letter-spacing:0;margin:0 0 4px;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(24px,2.4vw,34px);line-height:1.15}h1,h2{margin-bottom:0}h2{font-size:20px;line-height:1.2}.endpoint-pill{align-items:center;background:#ffffffd1;border:1px solid rgba(194,210,206,.9);border-radius:8px;box-shadow:var(--shadow-soft);color:var(--muted);display:flex;font-size:13px;gap:10px;max-width:100%;min-width:0;padding:10px 12px}.endpoint-pill strong{color:var(--ink);font-weight:700;min-width:0;overflow-wrap:anywhere;word-break:break-word}.workspace{align-items:start;display:grid;gap:clamp(16px,1.8vw,24px);grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr)}.creator-panel,.result-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff0;border:1px solid rgba(194,210,206,.82);border-radius:8px;box-shadow:var(--shadow);max-width:100%;min-width:0;width:100%}.creator-panel{overflow:hidden;padding:clamp(16px,1.8vw,22px);position:sticky;top:18px}.creator-panel:before{background:linear-gradient(90deg,transparent,var(--accent),transparent);content:"";height:3px;left:-35%;opacity:0;position:absolute;top:0;width:35%}.creator-panel.is-generating{border-color:#0b9b8c6b}.creator-panel.is-generating:before{animation:loading-sweep 1.2s linear infinite;opacity:1}.result-panel{min-height:calc(100vh - 112px);padding:clamp(16px,1.8vw,22px)}.action-row,.field-topline,.image-card-footer,.panel-heading,.settings-title,.template-heading{align-items:center;display:flex;gap:12px;justify-content:space-between}.panel-heading{align-items:flex-start;margin-bottom:18px}.icon-button,.image-card-footer button,.reference-thumb button,.secondary-button{background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);display:inline-grid;flex:0 0 auto;place-items:center;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease}.icon-button,.secondary-button{height:42px;width:42px}.icon-button:hover,.image-card-footer button:hover,.reference-thumb button:hover,.secondary-button:hover{background:#f3fbf8;border-color:#0f9f8f8c;color:var(--accent-strong);transform:translateY(-1px)}.field{display:grid;gap:8px;margin-bottom:15px;min-width:0}.field-label{align-items:center;color:var(--ink);display:flex;font-size:14px;font-weight:800;gap:7px;min-width:0}.prompt-input,.select-field select,.text-input{background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);display:block;max-width:100%;min-width:0;outline:none;transition:border-color .15s ease,box-shadow .15s ease;width:100%}.select-field select,.text-input{min-height:46px;padding:0 12px}.select-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23121918' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:18px 18px;line-height:1.2;padding-right:44px}.prompt-input{line-height:1.6;min-height:156px;padding:13px 14px;resize:vertical}.prompt-input:focus,.select-field select:focus,.text-input:focus{border-color:#0f9f8fb3;box-shadow:0 0 0 3px #0f9f8f21}.prompt-input::-moz-placeholder,.text-input::-moz-placeholder{color:#7c8a87}.prompt-input::placeholder,.text-input::placeholder{color:#7c8a87}.save-key-option{align-items:center;color:var(--ink);display:flex;font-size:13px;font-weight:800;gap:8px}.save-key-option input{accent-color:var(--accent);height:16px;margin:0;width:16px}.counter,.save-key-option small{color:var(--muted);font-weight:700}.counter{flex:0 0 auto;font-size:13px}.counter.warn{color:var(--coral)}.reference-zone{display:grid;gap:10px;margin:17px 0 16px;min-width:0}.template-selector{margin-top:-3px}.template-select-button{background:linear-gradient(135deg,#0b9b8c17,#ffffffe0),var(--surface);border:1px solid #cfe1dc;border-radius:8px;display:grid;gap:5px;padding:12px 13px;text-align:left;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;width:100%}.template-select-button:hover{border-color:#0b9b8c94;box-shadow:var(--shadow-soft);transform:translateY(-1px)}.template-select-button span{align-items:center;color:var(--accent-strong);display:flex;font-size:13px;font-weight:900;gap:7px}.template-select-button strong{color:var(--ink);font-size:16px}.template-select-button small{color:var(--muted);font-size:13px}.text-button{background:transparent;border:0;color:var(--accent-strong);font-size:13px;font-weight:800}.upload-box{background:linear-gradient(180deg,#ffffffb8,#e8f9f4e6),#f2fbf8;border:1px dashed rgba(11,155,140,.5);border-radius:8px;color:var(--accent-strong);display:grid;gap:4px;min-height:106px;min-width:0;padding:16px;place-items:center;text-align:center;transition:border-color .15s ease,background .15s ease;width:100%}.upload-box:hover{background:#eaf8f4;border-color:var(--accent)}.upload-box span{color:var(--ink);font-weight:800}.upload-box small{color:var(--muted)}.hidden-input{display:none}.reference-grid{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.reference-thumb{aspect-ratio:1;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;margin:0;overflow:hidden;position:relative}.reference-thumb img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.reference-thumb button{height:26px;position:absolute;right:5px;top:5px;width:26px}.settings-block{background:var(--surface-soft);border:1px solid #dce7e4;border-radius:8px;display:grid;gap:14px;min-width:0;padding:14px}.settings-title{color:var(--ink);font-weight:900;justify-content:flex-start}.control-grid{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}.select-field{display:grid;gap:7px;min-width:0}.range-field span,.select-field span{color:var(--muted);font-size:13px;font-weight:800}.ratio-group{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.ratio-button{background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);display:grid;gap:3px;min-height:58px;min-width:0;padding:8px;text-align:left;transition:border-color .15s ease,background .15s ease,color .15s ease}.ratio-button strong{font-size:14px}.ratio-button span{color:var(--muted);font-size:12px}.ratio-button.active{background:#e7f8f3;border-color:#0f9f8fb3;color:var(--accent-strong)}.ratio-button:hover{border-color:#0b9b8c8c}.range-field{display:grid;gap:8px}.range-field input{accent-color:var(--accent)}.action-row{margin-top:13px}.primary-button{align-items:center;background:linear-gradient(135deg,var(--accent),#32b6a2);border:0;border-radius:8px;box-shadow:0 12px 24px #0f9f8f3d;color:#fff;display:inline-flex;flex:1 1 auto;font-weight:900;gap:8px;justify-content:center;min-height:48px;min-width:0;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.primary-button:hover:not(:disabled){box-shadow:0 16px 30px #0f9f8f4d;transform:translateY(-1px)}.primary-button:disabled{opacity:.58}.spin{animation:spin 1s linear infinite}.panel-loader{align-items:center;background:#eefaf6;border:1px solid rgba(11,155,140,.2);border-radius:8px;color:var(--accent-strong);display:grid;font-size:13px;font-weight:800;gap:8px 10px;grid-template-columns:auto 1fr;margin-top:10px;padding:9px 10px}.panel-loader i{background:#0b9b8c24;border-radius:999px;grid-column:1/-1;height:4px;overflow:hidden;position:relative}.panel-loader i:after{animation:loading-track 1.1s ease-in-out infinite;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:inherit;bottom:0;content:"";left:-35%;position:absolute;top:0;width:35%}.message{border-radius:8px;font-size:14px;line-height:1.5;margin:12px 0 0;padding:10px 12px}.message.error{background:#fff2f0;border:1px solid rgba(180,35,24,.22);color:var(--danger)}.message.success{background:#eefaf6;border:1px solid rgba(18,115,95,.22);color:var(--success)}.model-chip{background:#edf3ff;border:1px solid rgba(59,110,212,.25);border-radius:8px;color:var(--blue);font-size:13px;font-weight:900;padding:8px 10px}.image-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.generation-feed{display:grid;gap:18px}.generation-turn{display:grid;gap:12px}.user-message{background:#eaf8f4;border:1px solid rgba(11,155,140,.22);border-radius:8px;justify-self:end;padding:12px 14px;width:min(620px,88%)}.assistant-message-head span,.user-message span{color:var(--accent-strong);font-size:12px;font-weight:900;text-transform:uppercase}.user-message p{color:var(--ink);line-height:1.6;margin:5px 0 6px;white-space:pre-wrap}.assistant-message-head small,.user-message small{color:var(--muted);font-size:12px;font-weight:800}.assistant-message{background:var(--surface-soft);border:1px solid #dce7e4;border-radius:8px;justify-self:start;padding:14px;width:min(100%,900px)}.assistant-message-head{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}.result-loading-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.result-skeleton{animation:skeleton-shimmer 1.25s ease-in-out infinite;background:linear-gradient(110deg,transparent,hsla(0,0%,100%,.78) 45%,transparent 70%),linear-gradient(180deg,#eef9f5,#f8fbfa);background-position:-240px 0,0 0;background-size:240px 100%,100% 100%;border:1px solid rgba(11,155,140,.18);border-radius:8px;color:var(--accent-strong);display:grid;font-size:13px;font-weight:900;gap:10px;min-height:220px;overflow:hidden;place-items:center}.image-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow-soft);overflow:hidden}.image-card img{aspect-ratio:1;background:var(--surface-2);display:block;-o-object-fit:contain;object-fit:contain;width:100%}.image-card-footer{color:var(--muted);font-size:13px;font-weight:800;padding:10px}.image-card-footer button{height:34px;width:34px}.empty-state{background:linear-gradient(180deg,#fffffff0 0,#f0f7f4fa),var(--surface);border:1px solid #dce7e4;border-radius:8px;display:grid;min-height:180px;padding:28px;place-items:center;text-align:center}.empty-state h3{font-size:19px;margin:0 0 8px}.empty-state p{color:var(--muted);line-height:1.7;margin-bottom:0;width:min(560px,100%)}.sample-frame{aspect-ratio:4/3;background:linear-gradient(180deg,#bfe2e7,#f8d77c 56%,#f47d5f);border:1px solid rgba(25,32,31,.1);border-radius:8px;box-shadow:0 18px 44px #1a2b2729;overflow:hidden;position:relative;width:min(380px,100%)}.sample-sun{background:#fff1a8;border-radius:50%;height:54px;position:absolute;right:38px;top:28px;width:54px}.sample-mountain{border-radius:8px;bottom:-12px;height:58%;position:absolute;transform:rotate(45deg);width:78%}.sample-mountain.first{background:#286e70;left:-20%}.sample-mountain.second{background:#164c55;right:-24%}.sample-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff47;border:1px solid hsla(0,0%,100%,.62);border-radius:8px;position:absolute}.sample-card.small{height:42px;left:28px;top:34px;width:58px}.sample-card.large{bottom:38px;height:64px;right:52px;width:96px}.template-strip{margin-top:20px}.template-grid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}.template-card{background:var(--surface);border:1px solid #dce7e4;border-radius:8px;display:grid;gap:8px;min-height:126px;min-width:0;padding:13px;text-align:left;transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease}.template-card:hover{background:#f4fbf8;border-color:#0f9f8f94;box-shadow:var(--shadow-soft);transform:translateY(-1px)}.template-card strong{color:var(--ink);font-size:15px}.template-card span{color:var(--muted);display:-webkit-box;font-size:13px;line-height:1.55;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4}.template-modal-backdrop{background:#12191857;display:grid;inset:0;padding:20px;place-items:center;position:fixed;z-index:20}.template-modal{background:var(--surface);border:1px solid rgba(194,210,206,.9);border-radius:8px;box-shadow:0 28px 90px #12191842;max-height:min(760px,calc(100vh - 40px));overflow:hidden;padding:18px;width:min(760px,100%)}.template-modal-heading{align-items:flex-start;display:flex;gap:12px;justify-content:space-between;margin-bottom:14px}.template-modal .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(100vh - 180px);overflow:auto;padding-right:4px}@keyframes spin{to{transform:rotate(1turn)}}@keyframes loading-sweep{to{left:100%}}@keyframes loading-track{0%{left:-35%}55%,to{left:100%}}@keyframes skeleton-shimmer{to{background-position:120% 0,0 0}}@media(max-width:1080px){.workspace{grid-template-columns:1fr}.creator-panel{position:static}.result-panel{min-height:auto}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){body,html{width:100%}.app-shell{padding:12px}.topbar{align-items:flex-start;flex-direction:column;gap:12px;padding:6px 2px 14px}.brand{gap:10px}.brand-mark{height:40px;width:40px}.panel-heading{align-items:flex-start;flex-direction:row}.field-topline{align-items:center;min-width:0}.endpoint-pill{align-items:flex-start;flex-direction:column;gap:5px;padding:10px;width:100%}h1{font-size:24px}.creator-panel,.result-panel{box-shadow:0 14px 38px #1725231a;padding:14px}.workspace{gap:14px}.prompt-input{min-height:132px}.control-grid,.ratio-group{grid-template-columns:repeat(2,minmax(0,1fr))}.image-grid,.result-loading-grid,.template-grid{grid-template-columns:1fr}.user-message{width:94%}.assistant-message{padding:12px}.result-skeleton{min-height:190px}.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.empty-state{min-height:150px;padding:20px 14px}.template-card{min-height:112px}.template-modal-backdrop{align-items:end;padding:10px}.template-modal{max-height:min(82vh,720px);padding:14px}.template-modal .template-grid{grid-template-columns:1fr;max-height:calc(82vh - 92px)}}@media(max-width:420px){.app-shell{padding:10px}.creator-panel,.result-panel{padding:12px}.select-field select,.text-input{min-height:44px}.control-grid,.ratio-group{gap:8px}.upload-box{min-height:96px}.primary-button{min-height:46px}.save-key-option{align-items:flex-start;flex-wrap:wrap}}