:root{
  --sidebar:#f7f7f8;--canvas:#fff;--surface:#fff;--surface-2:#f4f4f5;--surface-3:#ececed;
  --ink:#111214;--muted:#62656c;--faint:#8c8f96;--line:rgba(0,0,0,.095);--line-soft:rgba(0,0,0,.055);
  --hover:rgba(0,0,0,.055);--pressed:#111214;--inverse:#fff;--composer:#f4f4f5;--user:#f1f1f2;
  --code:#f6f6f7;--code-head:#ededee;--quote:#f6f6f7;--accent:#262626;--accent-soft:rgba(0,0,0,.075);
  --danger:#666;--shadow:0 22px 70px rgba(0,0,0,.16);--sidebar-width:260px;--content-width:790px;
  --ease:cubic-bezier(.2,.82,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--fast:150ms;--medium:240ms;
}
html[data-theme="dark"]{
  --sidebar:#0f0f10;--canvas:#171717;--surface:#202021;--surface-2:#262627;--surface-3:#2c2c2e;
  --ink:#f3f3f4;--muted:#b3b5b9;--faint:#7e8187;--line:rgba(255,255,255,.105);--line-soft:rgba(255,255,255,.06);
  --hover:rgba(255,255,255,.07);--pressed:#f3f3f3;--inverse:#111;--composer:#242425;--user:#242425;
  --code:#0f1012;--code-head:#17181b;--quote:#1d1e20;--accent:#e8e8e8;--accent-soft:rgba(255,255,255,.09);
  --shadow:0 24px 80px rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--canvas)}
body{margin:0;overflow:hidden;background:var(--canvas);color:var(--ink);font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit;color:inherit}button{border:0}button,label{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px}
.app-shell{height:100%;display:flex;background:var(--canvas);overflow:hidden}

/* Sidebar */
.sidebar{width:var(--sidebar-width);flex:0 0 var(--sidebar-width);height:100%;padding:8px;background:var(--sidebar);display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--line-soft);position:relative;z-index:40;transition:transform var(--medium) var(--ease-out),background var(--medium),border-color var(--medium)}
.sidebar-top{height:42px;display:flex;align-items:center;justify-content:space-between}
.brand-button,.nav-action,.workspace-link,.account-row{background:transparent;border-radius:10px;cursor:pointer;transition:background var(--fast),transform var(--fast) var(--ease-out),color var(--fast)}
.brand-button:hover,.nav-action:hover,.workspace-link:hover,.account-row:hover{background:var(--hover)}
.brand-button:active,.nav-action:active,.workspace-link:active,.account-row:active{transform:scale(.985)}
.brand-button{display:flex;align-items:center;gap:9px;padding:6px 8px;font-weight:650}.brand-mark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--pressed);color:var(--inverse);font-size:15px;box-shadow:0 5px 18px rgba(0,0,0,.08)}.brand-label{font-size:14px}
.icon-button{width:36px;height:36px;border-radius:10px;background:transparent;display:grid;place-items:center;cursor:pointer;transition:background var(--fast),transform var(--fast) var(--ease-out),opacity var(--fast);font-size:19px}.icon-button:hover{background:var(--hover)}.icon-button:active{transform:scale(.92)}.sidebar-close{display:none}
.nav-action{height:40px;width:100%;display:flex;align-items:center;gap:10px;padding:0 10px;text-align:left}.nav-icon{width:18px;text-align:center;font-size:18px}.nav-action span:nth-child(2){flex:1}.shortcut{color:var(--faint);font-size:11px}
.workspace-nav{display:flex;flex-direction:column;gap:2px;margin:1px 0 2px}.workspace-link{width:100%;height:38px;padding:0 10px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--muted)}.workspace-link.active{background:var(--hover);color:var(--ink)}.workspace-icon{width:18px;text-align:center;font-size:17px}.new-badge{margin-left:auto;font-size:9px;letter-spacing:.04em;padding:2px 5px;border:1px solid var(--line);border-radius:999px;color:var(--faint)}
.sidebar-search-wrap{height:36px;margin:4px 0 3px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:10px;color:var(--faint);border:1px solid transparent;transition:background var(--fast),border-color var(--fast),box-shadow var(--fast)}.sidebar-search-wrap:focus-within{background:var(--surface);border-color:var(--line);box-shadow:0 4px 20px rgba(0,0,0,.04)}.search-glyph{font-size:17px}.sidebar-search-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:13px}.sidebar-search-wrap input::placeholder{color:var(--faint)}
.history-label{padding:8px 10px 3px;color:var(--faint);font-size:12px}.chat-history{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}.chat-history:hover{scrollbar-color:var(--line) transparent}
.history-item{height:38px;border-radius:10px;padding:0 34px 0 10px;display:flex;align-items:center;position:relative;cursor:pointer;white-space:nowrap;transition:background var(--fast),transform var(--fast) var(--ease-out)}.history-item:hover,.history-item.active{background:var(--hover)}.history-item:active{transform:scale(.99)}.history-item-title{overflow:hidden;text-overflow:ellipsis;font-size:13px}.history-more{position:absolute;right:5px;top:5px;width:28px;height:28px;display:none;place-items:center;border-radius:8px;background:transparent;cursor:pointer;color:var(--muted)}.history-item:hover .history-more,.history-item.active .history-more{display:grid}.history-more:hover{background:var(--hover)}
.sidebar-bottom{padding-top:6px;border-top:1px solid var(--line-soft)}.account-row{width:100%;padding:7px 8px;display:flex;align-items:center;gap:9px;text-align:left}.avatar{width:30px;height:30px;border-radius:50%;background:var(--pressed);color:var(--inverse);display:grid;place-items:center;font-size:10px;font-weight:700}.account-copy{display:flex;flex-direction:column;min-width:0;flex:1}.account-copy strong{font-size:13px}.account-copy small{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.more-icon{color:var(--muted);font-size:14px}

/* Main */
.main-pane{flex:1;min-width:0;height:100%;position:relative;display:flex;flex-direction:column;background:var(--canvas);transition:background var(--medium),filter var(--medium)}
.topbar{height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:relative;z-index:25;background:linear-gradient(to bottom,var(--canvas) 72%,transparent);transition:background var(--medium)}.topbar-left,.topbar-right{display:flex;align-items:center;gap:6px}.mobile-menu{display:none}.section-title-wrap{display:flex;align-items:baseline;gap:9px}.section-title{font-size:16px;font-weight:650;letter-spacing:-.15px}.section-subtitle{font-size:12px;color:var(--faint)}.topbar-action{height:36px;padding:0 11px;border-radius:10px;background:transparent;display:flex;align-items:center;gap:7px;cursor:pointer;transition:background var(--fast),transform var(--fast)}.topbar-action:hover{background:var(--hover)}.topbar-action:active{transform:scale(.96)}.topbar-action span:first-child{font-size:18px}
.conversation-scroller{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-behavior:smooth}.conversation{width:min(100% - 32px,var(--content-width));min-height:100%;margin:0 auto;position:relative;transition:width var(--medium) var(--ease-out)}
.welcome{min-height:calc(100vh - 225px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:70px 0 54px;animation:fadeUp .38s var(--ease-out) both}.welcome.hidden{display:none}.welcome-mark{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--surface),var(--surface-2));border:1px solid var(--line);font-size:22px;margin-bottom:18px;box-shadow:0 12px 35px rgba(0,0,0,.08);animation:floatMark 5s ease-in-out infinite}.welcome h1{font-size:29px;line-height:1.15;letter-spacing:-.65px;margin:0;font-weight:650}.welcome-copy{margin:9px 0 27px;color:var(--faint);font-size:13px}.suggestion-grid{width:min(100%,660px);display:grid;grid-template-columns:1fr 1fr;gap:8px}.suggestion{min-height:78px;padding:14px;border:1px solid var(--line);border-radius:16px;background:transparent;display:flex;gap:11px;align-items:flex-start;text-align:left;cursor:pointer;transition:background var(--fast),transform var(--medium) var(--ease-out),border-color var(--fast),box-shadow var(--medium)}.suggestion:hover{background:var(--hover);border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.055)}.suggestion:active{transform:translateY(0) scale(.99)}.suggestion-icon{width:25px;height:25px;display:grid;place-items:center;flex:none;color:var(--muted)}.suggestion span:last-child{display:flex;flex-direction:column;gap:3px}.suggestion strong{font-size:13px}.suggestion small{font-size:12px;color:var(--faint)}

/* Messages */
.messages{padding:24px 0 6px}.message{width:100%;display:flex;margin:0 0 30px;animation:fadeUp .28s var(--ease-out) both}.message.user{justify-content:flex-end}.message.assistant{justify-content:flex-start}.message-inner{max-width:100%;min-width:0}.message.user .message-inner{max-width:79%}.user-bubble{background:var(--user);padding:10px 15px;border-radius:18px;white-space:pre-wrap;word-break:break-word;line-height:1.52;transition:background var(--medium)}.user-attachments{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;margin-bottom:7px}.user-attachments img{width:120px;height:90px;border-radius:12px;object-fit:cover;border:1px solid var(--line);transition:transform var(--medium) var(--ease-out)}.user-attachments img:hover{transform:scale(1.02)}
.assistant-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;width:100%}.assistant-avatar{width:32px;height:32px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:grid;place-items:center;margin-top:1px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.provider-logo{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;position:relative}.provider-logo.mini{width:25px;height:25px;border-radius:8px}.provider-logo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s var(--ease-out)}.provider-logo:hover img{transform:scale(1.06)}.provider-logo.fallback::after{content:attr(data-fallback);font-weight:750;font-size:9px;color:#111}.assistant-avatar .provider-logo{width:100%;height:100%;border:0;border-radius:0}
.assistant-content{min-width:0;font-size:15px;line-height:1.65;word-break:break-word}.assistant-content p{margin:0 0 12px}.assistant-content p:last-child{margin-bottom:0}.assistant-content h1,.assistant-content h2,.assistant-content h3{margin:22px 0 10px;line-height:1.25;letter-spacing:-.2px}.assistant-content h1{font-size:22px}.assistant-content h2{font-size:19px}.assistant-content h3{font-size:16px}.assistant-content ul,.assistant-content ol{margin:8px 0 14px;padding-left:23px}.assistant-content li{margin:4px 0}.assistant-content strong{font-weight:680}.assistant-content a{color:inherit;text-decoration:underline;text-underline-offset:3px}.assistant-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--code);border:1px solid var(--line-soft);border-radius:5px;padding:1px 5px}.assistant-content blockquote{margin:12px 0;padding:11px 14px 11px 15px;background:var(--quote);border-left:3px solid var(--muted);border-radius:0 10px 10px 0;color:var(--muted);animation:fadeIn .2s ease both}.assistant-content blockquote p{margin:0}.assistant-content hr{border:0;border-top:1px solid var(--line);margin:18px 0}.assistant-content table{border-collapse:separate;border-spacing:0;width:100%;margin:14px 0;border:1px solid var(--line);border-radius:11px;overflow:hidden}.assistant-content th,.assistant-content td{padding:9px 11px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);text-align:left}.assistant-content th{background:var(--surface-2);font-size:12px}.assistant-content tr:last-child td{border-bottom:0}.assistant-content th:last-child,.assistant-content td:last-child{border-right:0}
.thinking-line{display:flex;align-items:center;gap:9px;color:var(--muted);height:32px;animation:fadeIn .2s ease both}.thinking-orb{width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 20%,transparent);animation:thinkingPulse 1.65s ease-in-out infinite}.streaming-cursor{display:inline-block;width:7px;height:17px;vertical-align:-3px;margin-left:2px;background:currentColor;border-radius:1px;animation:blink .8s steps(1) infinite}.error-card{padding:11px 13px;border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--surface));border-radius:11px;color:var(--danger)}
.message-actions{height:28px;display:flex;align-items:center;gap:2px;margin-top:7px;opacity:0;transform:translateY(-2px);transition:opacity var(--fast),transform var(--fast)}.message.assistant:hover .message-actions{opacity:1;transform:none}.message-action{width:28px;height:28px;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:background var(--fast),color var(--fast),transform var(--fast)}.message-action:hover{background:var(--hover);color:var(--ink)}.message-action:active{transform:scale(.9)}

/* Code */
.code-block{margin:14px 0 16px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--code);box-shadow:0 5px 25px rgba(0,0,0,.035);animation:codeIn .24s var(--ease-out) both}.code-block.streaming-code{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),0 8px 28px rgba(0,0,0,.04)}.code-head{height:42px;padding:0 8px 0 12px;background:var(--code-head);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-soft)}.code-head-left{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11.5px;text-transform:lowercase}.code-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);opacity:.65}.streaming-code .code-dot{background:var(--accent);opacity:1;animation:codePulse 1s ease-in-out infinite}.code-head-actions{display:flex;align-items:center;gap:3px}.code-copy,.code-preview{height:30px;padding:0 9px;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background var(--fast),color var(--fast),transform var(--fast)}.code-copy:hover,.code-preview:hover{background:var(--hover);color:var(--ink)}.code-copy:active,.code-preview:active{transform:scale(.96)}.code-preview{color:var(--accent)}.code-block pre{margin:0;padding:14px 15px 16px;overflow:auto;max-height:560px;scrollbar-width:thin}.code-block pre code{display:block;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:12.5px;line-height:1.62;white-space:pre;tab-size:2}.code-live-mark{font-size:9px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--accent);border-radius:999px;padding:1px 6px;margin-left:2px}

/* Image generation */
.image-progress{margin:3px 0 8px;max-width:720px;animation:fadeUp .3s var(--ease-out) both}.image-progress-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:11px}.image-progress-copy>div{display:flex;flex-direction:column;gap:2px}.image-progress-copy strong{font-size:14px;font-weight:610}.image-progress-copy small{font-size:12px;color:var(--faint)}.image-progress-percent{font-size:11px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--surface));padding:4px 8px;border-radius:999px;min-width:46px;text-align:center;transition:all .3s var(--ease-out)}
.gen-shell{position:relative;aspect-ratio:1.65/1;min-height:280px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#05070a;box-shadow:0 20px 55px rgba(0,0,0,.18);isolation:isolate;transition:transform .3s var(--ease-out),box-shadow .3s}.gen-shell:hover{transform:translateY(-1px);box-shadow:0 24px 65px rgba(0,0,0,.22)}.gen-shell::before{content:"";position:absolute;inset:-45%;z-index:0;background:radial-gradient(circle at 45% 48%,rgba(255,255,255,.09),transparent 33%),conic-gradient(from 180deg at 50% 50%,transparent 0 41%,rgba(255,255,255,.035) 49%,transparent 57% 100%);animation:genAura 8s linear infinite}.gen-shell::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.035) 50%,transparent 65%);transform:translateX(-120%);animation:scanGlow 3.8s ease-in-out infinite}.gen-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;outline:0}.gen-topline{position:absolute;z-index:4;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.72);font-size:10px;letter-spacing:.055em;text-transform:uppercase;pointer-events:none}.gen-stage-name{display:flex;align-items:center;gap:7px}.gen-stage-name::before{content:"";width:6px;height:6px;border-radius:50%;background:#e6e6e6;box-shadow:0 0 14px #e6e6e6;animation:codePulse 1.2s ease-in-out infinite}.gen-time{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.42)}
.gen-center{position:absolute;z-index:5;inset:0;display:grid;place-items:center;pointer-events:none}.gen-center-card{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;opacity:.92;transition:opacity .35s,transform .45s var(--ease-out)}.gen-loader{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.11);border-top-color:#e6e6e6;box-shadow:0 0 24px rgba(255,255,255,.10);animation:spin 1.1s linear infinite}.gen-center-card strong{font-size:12px;color:rgba(255,255,255,.86)}.gen-center-card small{font-size:10.5px;color:rgba(255,255,255,.42)}
.game-invite{position:absolute;z-index:7;left:50%;bottom:18px;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--ease-out);display:flex;align-items:center;gap:8px}.gen-shell.game-ready .game-invite{opacity:1;transform:translate(-50%,0);pointer-events:auto}.game-invite button{height:36px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(14px);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:11.5px;transition:background .2s,transform .2s var(--ease-out),box-shadow .2s}.game-invite button:hover{background:rgba(255,255,255,.17);transform:translateY(-1px);box-shadow:0 10px 25px rgba(0,0,0,.2)}.game-invite button:active{transform:scale(.97)}
.snake-hud{position:absolute;z-index:8;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease-out)}.gen-shell.playing .snake-hud{opacity:1;transform:none}.snake-chip{height:28px;padding:0 9px;border-radius:999px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.74);backdrop-filter:blur(12px);font-size:10px;display:flex;align-items:center;gap:6px}.snake-score{color:#fff;font-variant-numeric:tabular-nums}.gen-shell.playing .gen-center-card,.gen-shell.playing .game-invite{opacity:0;transform:translateY(8px);pointer-events:none}.gen-shell.playing::after{animation:none;opacity:.18}.image-progress-note{color:var(--faint);font-size:10.5px;margin-top:8px}.image-progress-note b{color:var(--muted);font-weight:550}
.image-result-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:11px 0}.image-result{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);aspect-ratio:1/1;animation:imageReveal .6s var(--ease-out) both}.image-result.landscape{aspect-ratio:1.5/1}.image-result.portrait{aspect-ratio:2/3;max-width:520px}.image-result img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .55s var(--ease-out)}.image-result:hover img{transform:scale(1.015)}.image-result-actions{position:absolute;top:9px;right:9px;display:flex;gap:5px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}.image-result:hover .image-result-actions{opacity:1;transform:none}.image-result-actions button,.image-result-actions a{width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px)}.image-meta{color:var(--faint);font-size:10.5px;margin-top:6px}

/* Composer */
.composer-zone{flex:none;width:min(calc(100% - 32px),var(--content-width));margin:0 auto;padding:0 0 11px;position:relative;z-index:24;background:linear-gradient(to top,var(--canvas) 76%,transparent);transition:width var(--medium) var(--ease-out),background var(--medium)}.attachment-strip{display:flex;gap:7px;flex-wrap:wrap;padding:0 8px 7px}.attachment-chip{width:58px;height:58px;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface);animation:popIn .2s var(--ease-out) both}.attachment-chip img{width:100%;height:100%;object-fit:cover}.attachment-remove{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;transition:transform .15s}.attachment-remove:hover{transform:scale(1.08)}
.composer{min-height:106px;background:var(--composer);border:1px solid var(--line-soft);border-radius:26px;padding:12px 12px 10px;box-shadow:0 6px 28px rgba(0,0,0,.08);transition:border-color var(--fast),box-shadow var(--medium),transform var(--medium) var(--ease-out),background var(--medium)}.composer:focus-within{border-color:var(--line);box-shadow:0 10px 38px rgba(0,0,0,.12);transform:translateY(-1px)}.composer textarea{width:100%;min-height:36px;max-height:180px;resize:none;overflow-y:auto;border:0;outline:0;background:transparent;padding:1px 4px 9px;font-size:16px;line-height:1.45}.composer textarea::placeholder{color:var(--faint)}.composer-toolbar{min-height:38px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.composer-tools-left,.composer-tools-right{display:flex;align-items:center;gap:5px}.tool-button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:22px;transition:background var(--fast),transform var(--fast)}.tool-button:hover{background:var(--hover)}.tool-button:active{transform:scale(.92)}.compact-tool{height:36px;padding:0 10px;border-radius:18px;background:transparent;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:default}.spark{font-size:12px}.composer-model-trigger{height:36px;max-width:270px;padding:0 8px 0 5px;border-radius:18px;background:transparent;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--muted);transition:background var(--fast),color var(--fast),transform var(--fast)}.composer-model-trigger:hover{background:var(--hover);color:var(--ink)}.composer-model-trigger:active{transform:scale(.98)}.composer-model-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:580}.chevron{font-size:13px;color:var(--faint)}.send-button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--pressed);color:var(--inverse);cursor:pointer;transition:transform var(--fast) var(--ease-out),opacity var(--fast),box-shadow var(--fast)}.send-button:disabled{opacity:.25;cursor:default}.send-button:not(:disabled):hover{transform:scale(1.055);box-shadow:0 5px 18px rgba(0,0,0,.12)}.send-button:not(:disabled):active{transform:scale(.9)}.send-icon{font-size:20px;line-height:1}.stop-square{width:10px;height:10px;border-radius:2px;background:currentColor;display:none}.send-button.generating .send-icon{display:none}.send-button.generating .stop-square{display:block}.composer-note{text-align:center;color:var(--faint);font-size:10.5px;padding-top:7px}

/* Model dialog */
.dialog-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.58);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.dialog-backdrop.open{opacity:1;visibility:visible}.model-dialog{position:fixed;z-index:75;left:50%;top:50%;width:min(590px,calc(100vw - 28px));height:min(720px,calc(100vh - 30px));transform:translate(-50%,-47%) scale(.975);opacity:0;visibility:hidden;background:var(--surface);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);transition:opacity .2s,transform .28s var(--ease-out),visibility .2s}.model-dialog.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}.model-dialog-head{padding:18px 18px 12px;display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--faint);margin-bottom:3px}.model-dialog h2{margin:0;font-size:20px;letter-spacing:-.3px}.model-search{height:42px;margin:0 16px 10px;padding:0 11px;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:8px;color:var(--faint);transition:border-color var(--fast),box-shadow var(--fast)}.model-search:focus-within{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 0 0 3px var(--accent-soft)}.model-search input{flex:1;min-width:0;background:transparent;border:0;outline:0}.provider-tabs{display:flex;gap:5px;padding:0 16px 11px;overflow:auto;scrollbar-width:none}.provider-tabs::-webkit-scrollbar{display:none}.provider-tab{height:30px;padding:0 10px;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background var(--fast),color var(--fast),transform var(--fast)}.provider-tab:hover{background:var(--hover);color:var(--ink)}.provider-tab:active{transform:scale(.96)}.provider-tab.active{background:var(--pressed);color:var(--inverse)}.model-list{flex:1;min-height:0;overflow:auto;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);scrollbar-width:thin}.model-row{min-height:64px;padding:9px 15px;display:flex;align-items:center;gap:11px;cursor:pointer;border-bottom:1px solid var(--line-soft);transition:background var(--fast),transform var(--fast)}.model-row:hover,.model-row.selected{background:var(--hover)}.model-row:active{transform:scale(.995)}.model-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}.model-name{font-size:13.5px;font-weight:630;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-desc{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-badges{display:flex;align-items:center;gap:6px}.model-badge{height:22px;padding:0 7px;border:1px solid var(--line);border-radius:999px;color:var(--faint);font-size:9.5px;display:flex;align-items:center}.availability-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s,box-shadow .2s}.availability-dot.yes{background:#8a8a8a;box-shadow:0 0 0 3px rgba(128,128,128,.08)}.availability-dot.no{background:#777}.model-check{width:18px;text-align:center;font-size:16px}.model-dialog-foot{min-height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;color:var(--faint);font-size:12px}.text-button{background:transparent;color:var(--muted);cursor:pointer;padding:7px 8px;border-radius:8px;transition:background var(--fast),color var(--fast)}.text-button:hover{background:var(--hover);color:var(--ink)}

/* Preview panel */
.preview-panel{width:0;flex:0 0 0;height:100%;overflow:hidden;background:var(--surface);border-left:0 solid var(--line);display:flex;flex-direction:column;position:relative;z-index:35;opacity:0;transform:translateX(16px);transition:width .36s var(--ease-out),flex-basis .36s var(--ease-out),opacity .24s,transform .36s var(--ease-out),border-width .2s;box-shadow:-12px 0 40px rgba(0,0,0,0)}.app-shell.preview-open .preview-panel{width:clamp(420px,40vw,680px);flex-basis:clamp(420px,40vw,680px);opacity:1;transform:none;border-left-width:1px;box-shadow:-12px 0 40px rgba(0,0,0,.06)}.preview-head{height:58px;flex:none;padding:0 12px 0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-soft)}.preview-title-wrap{min-width:0;display:flex;flex-direction:column;gap:1px}.preview-kicker{font-size:8.5px;letter-spacing:.11em;color:var(--faint)}.preview-title-wrap strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-actions{display:flex;align-items:center;gap:3px}.preview-action{width:34px;height:34px;border-radius:9px;background:transparent;cursor:pointer;color:var(--muted);font-size:17px;transition:background var(--fast),color var(--fast),transform var(--fast)}.preview-action:hover{background:var(--hover);color:var(--ink)}.preview-action:active{transform:scale(.92)}.preview-urlbar{height:38px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line-soft);font-size:10.5px;color:var(--faint);background:var(--surface-2)}.preview-dot{width:7px;height:7px;border-radius:50%;background:#8a8a8a;box-shadow:0 0 0 3px rgba(128,128,128,.09)}.preview-stage{flex:1;min-height:0;position:relative;background:#fff}.preview-stage iframe{width:100%;height:100%;border:0;background:#fff;display:block;opacity:0;transition:opacity .25s}.preview-stage.has-preview iframe{opacity:1}.preview-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:30px;color:#666;transition:opacity .2s}.preview-empty>span{width:46px;height:46px;border-radius:14px;background:#f0f0f1;display:grid;place-items:center;font-size:20px;color:#222}.preview-empty strong{font-size:13px;color:#242424}.preview-empty small{max-width:260px;font-size:11px;line-height:1.5}.preview-stage.has-preview .preview-empty{opacity:0;pointer-events:none}

/* Popovers/viewer */
.settings-popover{position:fixed;z-index:80;width:240px;padding:6px;opacity:0;visibility:hidden;transform:translateY(7px) scale(.975);transform-origin:bottom left;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);transition:opacity .16s,transform .2s var(--ease-out),visibility .16s}.settings-popover.open{opacity:1;visibility:visible;transform:none}.settings-title{padding:8px 9px 5px;color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.settings-popover button{width:100%;min-height:42px;padding:7px 9px;border-radius:9px;background:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left;transition:background var(--fast)}.settings-popover button:hover{background:var(--hover)}.settings-popover small{color:var(--faint)}.settings-divider{height:1px;background:var(--line-soft);margin:5px 3px}.settings-meta{display:flex;justify-content:space-between;padding:8px 9px;color:var(--faint);font-size:11px}.settings-meta strong{color:var(--muted)}
.toast-stack{position:fixed;z-index:120;left:50%;bottom:145px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;pointer-events:none}.toast{padding:8px 12px;border-radius:10px;background:var(--pressed);color:var(--inverse);font-size:12px;box-shadow:0 8px 25px rgba(0,0,0,.14);animation:toastIn .22s var(--ease-out) both}.toast.out{animation:toastOut .18s ease both}
.image-viewer{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);opacity:0;visibility:hidden;display:grid;place-items:center;padding:40px;transition:opacity .2s,visibility .2s}.image-viewer.open{opacity:1;visibility:visible}.image-viewer img{max-width:min(1200px,95vw);max-height:90vh;border-radius:13px;object-fit:contain;transform:scale(.96);filter:blur(6px);transition:transform .35s var(--ease-out),filter .35s}.image-viewer.open img{transform:scale(1);filter:blur(0)}.viewer-close{position:fixed;right:16px;top:16px;background:rgba(255,255,255,.11);color:#fff}.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.58);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes imageReveal{from{opacity:0;filter:blur(10px);transform:scale(1.02)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes blink{0%,48%{opacity:.55}49%,100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes thinkingPulse{0%,100%{transform:scale(.72);opacity:.45;box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 15%,transparent)}50%{transform:scale(1);opacity:1;box-shadow:0 0 0 7px color-mix(in srgb,var(--ink) 0%,transparent)}}
@keyframes codePulse{0%,100%{opacity:.45;transform:scale(.84)}50%{opacity:1;transform:scale(1)}}
@keyframes codeIn{from{opacity:0;transform:translateY(3px) scale(.995)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(5px) scale(.98)}}
@keyframes floatMark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes genAura{to{transform:rotate(360deg)}}
@keyframes scanGlow{0%,15%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

@media(max-width:1180px){
  .app-shell.preview-open .preview-panel{position:fixed;right:0;top:0;bottom:0;width:min(640px,78vw);z-index:60;flex-basis:auto;box-shadow:-30px 0 90px rgba(0,0,0,.3)}
}
@media(max-width:900px){
  :root{--content-width:720px}.sidebar{position:fixed;left:0;top:0;transform:translateX(-102%);box-shadow:25px 0 80px rgba(0,0,0,.22)}.sidebar.open{transform:none}.sidebar-close,.mobile-menu{display:grid}.sidebar-backdrop{display:block;visibility:hidden}.sidebar-backdrop.open{visibility:visible;opacity:1}.section-subtitle{display:none}.app-shell.preview-open .preview-panel{width:min(720px,94vw)}
}
@media(max-width:620px){
  .topbar{height:52px;padding:0 7px}.topbar-action-label{display:none}.conversation{width:min(100% - 22px,var(--content-width))}.welcome{min-height:calc(100vh - 205px);padding-top:45px}.welcome h1{font-size:24px}.welcome-copy{text-align:center}.suggestion-grid{grid-template-columns:1fr}.suggestion:nth-child(n+3){display:none}.message{margin-bottom:24px}.message.user .message-inner{max-width:89%}.assistant-row{grid-template-columns:27px minmax(0,1fr);gap:9px}.assistant-avatar{width:27px;height:27px;border-radius:8px}.assistant-content{font-size:14.5px}.composer-zone{width:calc(100% - 18px)}.composer{min-height:100px;border-radius:23px}.compact-tool{display:none}.composer-model-trigger{max-width:190px}.model-dialog{width:calc(100vw - 16px);height:min(760px,calc(100vh - 16px));border-radius:16px}.model-badge{display:none}.image-viewer{padding:20px}.gen-shell{aspect-ratio:1.15/1;min-height:300px}.app-shell.preview-open .preview-panel{width:100vw}.preview-head{padding-left:11px}.code-head{padding-left:10px}.code-preview,.code-copy{padding:0 7px}.code-preview span.label,.code-copy span.label{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* Neyro Studio v5 additions — keep the v3 visual language, add project workflow */
.composer-model-trigger{height:38px;padding:0 10px 0 6px;border-radius:19px;min-width:142px;justify-content:flex-start}.composer-model-name{font-size:12.8px}.composer-tools-right{margin-left:auto}
.toast.model{background:#fff;color:#202124;padding:11px 18px;min-width:150px;text-align:center;border-radius:13px;font-size:13px;font-weight:650;box-shadow:0 12px 42px rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.08)}

.file-attachment{width:auto;min-width:178px;max-width:290px;height:60px;display:flex;align-items:center;gap:9px;padding:6px 30px 6px 7px;overflow:visible}.file-attachment>img{width:46px;height:46px;border-radius:9px;flex:none}.attachment-file-icon{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-soft);font-size:9px;font-weight:750;letter-spacing:.03em;color:var(--muted);flex:none}.attachment-file-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.attachment-file-copy strong{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-file-copy small{font-size:10px;color:var(--faint)}.file-attachment.uploading{opacity:.72}.file-attachment.error{border-color:rgba(210,75,75,.45)}
.user-file-list{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 7px;justify-content:flex-end}.user-file-card{max-width:280px;min-width:155px;height:50px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:5px 9px 5px 6px;display:flex;align-items:center;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,.03)}.user-file-card img{width:38px;height:38px;border-radius:8px;object-fit:cover}.user-file-icon{width:38px;height:38px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-size:8px;font-weight:750;color:var(--muted)}.user-file-card>span:last-child{display:flex;min-width:0;flex-direction:column}.user-file-card strong{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-file-card small{font-size:9px;color:var(--faint)}

.creation-process{margin:0 0 14px;border:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface-2) 72%,transparent);border-radius:14px;overflow:hidden;transition:border-color .2s,background .2s}.creation-process[open]{border-color:var(--line)}.creation-process summary{height:42px;padding:0 12px;display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--muted);font-size:12px;font-weight:620}.creation-process summary::-webkit-details-marker{display:none}.process-summary-icon{width:21px;height:21px;border-radius:7px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:10px}.process-summary-chevron{margin-left:auto;color:var(--faint);transition:transform .2s}.creation-process[open] .process-summary-chevron{transform:rotate(180deg)}.process-list{padding:1px 11px 10px}.process-step{min-height:34px;display:grid;grid-template-columns:18px minmax(0,1fr) 18px;gap:7px;align-items:center;position:relative;color:var(--faint)}.process-step:not(:last-child):after{content:"";position:absolute;width:1px;background:var(--line);left:8.5px;top:25px;bottom:-9px}.process-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--line);background:var(--surface);justify-self:center;position:relative;z-index:1}.process-step.done .process-dot{background:#888;border-color:#888}.process-step.active .process-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft);animation:processPulse 1.4s ease-in-out infinite}.process-step.error .process-dot{background:#777;border-color:#777}.process-copy{display:flex;flex-direction:column;gap:1px}.process-copy strong{font-size:11.5px;font-weight:580;color:var(--muted)}.process-step.active .process-copy strong,.process-step.done .process-copy strong{color:var(--ink)}.process-copy small{font-size:9.7px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.process-check{font-size:11px;color:#888;text-align:center}.process-spinner{width:12px;height:12px;border:1.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;justify-self:center}@keyframes processPulse{50%{box-shadow:0 0 0 7px transparent}}@keyframes spin{to{transform:rotate(360deg)}}

.project-card{margin:15px 0 4px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.04);animation:messageIn .28s var(--ease-out) both}.project-card-head{min-height:68px;padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px}.project-card-title{display:flex;align-items:center;gap:10px;min-width:0}.project-card-icon{width:36px;height:36px;border-radius:11px;background:var(--pressed);color:var(--inverse);display:grid;place-items:center;font-size:15px;flex:none}.project-card-title>span:last-child{display:flex;flex-direction:column;min-width:0;gap:2px}.project-card-title strong{font-size:12.5px}.project-card-title small{font-size:10px;color:var(--faint)}.project-card-actions{display:flex;gap:5px}.project-card-actions button{height:31px;padding:0 10px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line-soft);font-size:10.5px;cursor:pointer;transition:background .15s,transform .15s}.project-card-actions button:first-child{background:var(--pressed);color:var(--inverse);border-color:transparent}.project-card-actions button:hover{transform:translateY(-1px)}.project-file-chips{border-top:1px solid var(--line-soft);padding:9px 12px;display:flex;flex-wrap:wrap;gap:5px;background:var(--surface-2)}.project-file-chips span{height:24px;padding:0 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);display:flex;align-items:center;font-size:9.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

.studio-tabs{height:39px;display:flex;align-items:flex-end;gap:4px;padding:0 10px;border-bottom:1px solid var(--line-soft);flex:none}.studio-tab{height:32px;padding:0 10px;border-radius:8px 8px 0 0;color:var(--muted);font-size:11px;cursor:pointer;position:relative}.studio-tab:hover{background:var(--hover)}.studio-tab.active{color:var(--ink);font-weight:620}.studio-tab.active:after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}.studio-view{display:none;flex:1;min-height:0;flex-direction:column}.studio-view.active{display:flex}.studio-view .preview-stage{flex:1;min-height:0}.project-workspace{flex:1;min-height:0;display:grid;grid-template-columns:165px minmax(0,1fr);background:var(--surface)}.project-file-tree{border-right:1px solid var(--line-soft);padding:8px;overflow:auto}.project-tree-item{width:100%;min-height:34px;border-radius:8px;display:flex;align-items:center;gap:7px;padding:5px 7px;color:var(--muted);cursor:pointer;text-align:left;transition:background .15s,color .15s}.project-tree-item:hover,.project-tree-item.active{background:var(--hover);color:var(--ink)}.tree-file-icon{width:27px;height:23px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:7px;font-weight:750;color:var(--faint);flex:none}.project-tree-item span:last-child{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-tree-empty{font-size:10px;color:var(--faint);padding:9px}.project-editor-wrap{min-width:0;display:flex;flex-direction:column}.project-editor-head{height:38px;border-bottom:1px solid var(--line-soft);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.project-editor-head strong{font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-editor-head span{font-size:9px;color:var(--faint)}#projectEditor{flex:1;min-height:0;width:100%;resize:none;border:0;outline:0;background:var(--surface);color:var(--ink);padding:14px;font:11.5px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}

.drop-overlay{position:fixed;z-index:150;inset:0;background:rgba(8,10,14,.6);backdrop-filter:blur(9px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;pointer-events:none}.drop-overlay.open{opacity:1;visibility:visible}.drop-card{width:min(470px,calc(100vw - 40px));min-height:220px;border:1px dashed rgba(255,255,255,.35);border-radius:24px;background:rgba(28,29,32,.9);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:30px;transform:scale(.96);transition:transform .22s var(--ease-out)}.drop-overlay.open .drop-card{transform:scale(1)}.drop-plus{width:50px;height:50px;border-radius:16px;background:#fff;color:#151515;display:grid;place-items:center;font-size:27px;margin-bottom:5px}.drop-card strong{font-size:17px}.drop-card small{max-width:350px;color:#aaa;line-height:1.45}

.history-menu{position:fixed;z-index:130;width:190px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-3px) scale(.98);transition:opacity .14s,transform .18s var(--ease-out),visibility .14s}.history-menu.open{opacity:1;visibility:visible;transform:none}.history-menu button{width:100%;height:36px;border-radius:8px;padding:0 9px;display:flex;align-items:center;gap:9px;text-align:left;color:var(--ink);cursor:pointer;font-size:11.5px}.history-menu button:hover{background:var(--hover)}.history-menu button.danger{color:#999}

.auth-screen{position:fixed;z-index:170;inset:0;background:var(--canvas);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.auth-screen.open{opacity:1;visibility:visible}.auth-shell{width:min(420px,calc(100vw - 28px));position:relative}.auth-close{position:fixed;right:22px;top:18px;width:38px;height:38px;border-radius:50%;font-size:23px;color:var(--muted);cursor:pointer}.auth-close:hover{background:var(--hover)}.auth-brand{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:24px}.auth-brand .brand-mark{width:32px;height:32px;border-radius:10px;background:var(--ink);color:var(--canvas);display:grid;place-items:center}.auth-card{text-align:center}.auth-card h1{font-size:27px;margin:0 0 7px;letter-spacing:-.5px}.auth-card>p{margin:0 0 22px;color:var(--muted);font-size:13px}.auth-field{display:block;margin-bottom:10px}.auth-field input{width:100%;height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 13px;outline:0;font-size:14px}.auth-field input:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 3px var(--accent-soft)}#authNameWrap{display:none}.auth-error{min-height:18px;color:#999;font-size:11px;text-align:left;margin:1px 3px 7px}.auth-submit{height:47px;width:100%;border-radius:12px;background:var(--ink);color:var(--canvas);font-weight:650;cursor:pointer}.auth-submit:disabled{opacity:.55}.auth-switch{margin-top:17px;color:var(--muted);font-size:12px}.auth-switch button{color:var(--ink);font-weight:650;cursor:pointer;margin-left:4px}

@media(max-width:760px){.project-card-head{align-items:flex-start;flex-direction:column}.project-card-actions{width:100%}.project-card-actions button{flex:1}.project-workspace{grid-template-columns:120px minmax(0,1fr)}.file-attachment{min-width:150px;max-width:240px}.creation-process{margin-right:2px}.toast.model{min-width:135px}.composer-model-trigger{min-width:0}}

/* Neyro Studio v7 — base monochrome studio workflow */
:root{
  --accent:#262626;--accent-soft:rgba(0,0,0,.075);--danger:#5f5f5f;--preview-width:620px;
}
html[data-theme="dark"]{
  --sidebar:#0d0d0d;--canvas:#151515;--surface:#1c1c1c;--surface-2:#222;--surface-3:#292929;
  --ink:#f5f5f5;--muted:#b8b8b8;--faint:#777;--line:rgba(255,255,255,.11);--line-soft:rgba(255,255,255,.065);
  --hover:rgba(255,255,255,.07);--pressed:#f4f4f4;--inverse:#111;--composer:#212121;--user:#232323;
  --code:#101010;--code-head:#181818;--quote:#1b1b1b;--accent:#e8e8e8;--accent-soft:rgba(255,255,255,.09);--danger:#aaa;
}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:color-mix(in srgb,var(--ink) 48%,transparent)}
.provider-logo img{filter:grayscale(1) saturate(0) contrast(1.05);transition:filter .2s,transform .25s var(--ease-out)}
.provider-logo:hover img{filter:grayscale(1) saturate(0) contrast(1.12)}
.availability-dot.yes,.availability-dot.no{background:var(--faint);box-shadow:none}
.error-card{border-color:var(--line);background:var(--surface-2);color:var(--ink)}
.code-preview,.code-live-mark,.image-progress-percent{color:var(--ink)}
.code-block.streaming-code{border-color:var(--line);box-shadow:0 0 0 1px var(--line-soft),0 8px 28px rgba(0,0,0,.08)}
.streaming-code .code-dot{background:var(--ink)}
.code-live-mark{border-color:var(--line)}

/* Project generation: show workflow, never raw generated source in the chat */
.workspace-run{width:min(100%,680px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),var(--surface));overflow:hidden;box-shadow:0 12px 42px rgba(0,0,0,.08);animation:workspaceIn .32s var(--ease-out) both}
.workspace-run-head{min-height:72px;padding:15px 16px 12px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center}
.workspace-run-orb{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;font-size:14px;position:relative;overflow:hidden}
.workspace-run:not(.done) .workspace-run-orb::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid transparent;border-top-color:var(--ink);animation:spin 1.15s linear infinite;opacity:.65}
.workspace-run-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.workspace-run-copy strong{font-size:13.5px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-run-copy small{font-size:10.8px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace-run-time{font:10.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--faint);font-variant-numeric:tabular-nums}
.workspace-progress{height:2px;margin:0 16px;background:var(--surface-3);overflow:hidden;border-radius:999px}.workspace-progress span{display:block;height:100%;background:var(--ink);border-radius:inherit;transition:width .5s var(--ease-out);position:relative}.workspace-run:not(.done) .workspace-progress span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(128,128,128,.32),transparent);animation:workspaceSweep 1.7s ease-in-out infinite}
.workspace-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:11px 16px 9px;border-bottom:1px solid var(--line-soft)}.workspace-phase{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:9.5px;white-space:nowrap}.workspace-phase i{width:7px;height:7px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);flex:none}.workspace-phase.done{color:var(--muted)}.workspace-phase.done i{background:var(--muted);border-color:var(--muted)}.workspace-phase.active{color:var(--ink);font-weight:600}.workspace-phase.active i{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 9%,transparent);animation:workspaceDot 1.35s ease-in-out infinite}
.workspace-files{padding:8px 10px 7px}.workspace-file{height:37px;padding:0 8px;display:grid;grid-template-columns:23px minmax(0,1fr) auto;align-items:center;gap:7px;border-radius:10px;color:var(--muted);transition:background .2s,color .2s}.workspace-file.active{background:var(--surface-2);color:var(--ink)}.workspace-file-mark{width:20px;height:20px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:9px;color:var(--faint)}.workspace-file.active .workspace-file-mark i{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:workspaceDot 1.1s ease-in-out infinite}.workspace-file-name{font:10.8px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-file-state{font-size:9.5px;color:var(--faint)}
.workspace-foot{height:36px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line-soft);color:var(--faint);font-size:9.8px}.workspace-foot span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-foot span:last-child{font-variant-numeric:tabular-nums}
@keyframes workspaceIn{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
@keyframes workspaceSweep{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
@keyframes workspaceDot{50%{opacity:.4;transform:scale(.82)}}

/* Cleaner final project card */
.project-card{border-radius:16px;background:var(--surface);box-shadow:none}.project-card-icon{background:var(--ink);color:var(--canvas)}.project-card-actions button{border-color:var(--line);background:var(--surface-2);color:var(--ink)}.project-card-actions button:first-child{background:var(--ink);color:var(--canvas);border-color:var(--ink)}.project-file-chips{display:none!important}

/* Monochrome generation canvas */
.gen-shell{background:#090909;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.gen-shell::before{background:radial-gradient(circle at 45% 48%,rgba(255,255,255,.09),transparent 34%),conic-gradient(from 180deg at 50% 50%,transparent 0 41%,rgba(255,255,255,.035) 49%,transparent 57% 100%)}
.gen-stage-name::before{background:#e6e6e6;box-shadow:0 0 13px rgba(255,255,255,.45)}
.image-progress-percent{border-color:var(--line);background:var(--surface-2)}

/* Preview: resizable panel + responsive device presets */
.preview-resizer{width:0;flex:0 0 0;height:100%;position:relative;z-index:66;cursor:col-resize;opacity:0;pointer-events:none;transition:width .22s,opacity .22s}
.preview-resizer::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:52px;border-radius:999px;background:var(--line);transform:translate(-50%,-50%);transition:background .15s,height .2s}
.preview-resizer:hover::after,.resizing-preview .preview-resizer::after{background:var(--muted);height:72px}
.app-shell.preview-open .preview-resizer{width:8px;flex-basis:8px;opacity:1;pointer-events:auto}
.preview-panel{transition:width .34s var(--ease-out),flex-basis .34s var(--ease-out),opacity .22s,transform .34s var(--ease-out),border-width .2s}
.app-shell.preview-open .preview-panel{width:var(--preview-width);flex-basis:var(--preview-width)}
.app-shell.preview-maximized .preview-panel{width:min(86vw,1180px);flex-basis:min(86vw,1180px)}
.resizing-preview,.resizing-preview *{cursor:col-resize!important;user-select:none!important}.resizing-preview iframe{pointer-events:none!important}
.preview-urlbar{height:44px;justify-content:space-between;padding:0 10px 0 14px;background:var(--surface-2);gap:10px}.preview-url-copy{min-width:0;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-dot{background:var(--muted);box-shadow:none}
.preview-device-switch{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.device-button{height:25px;min-width:30px;padding:0 7px;border-radius:6px;background:transparent;color:var(--faint);font-size:10px;cursor:pointer;transition:background .15s,color .15s,transform .15s}.device-button:hover{color:var(--ink);background:var(--hover)}.device-button.active{background:var(--ink);color:var(--canvas)}.device-button:active{transform:scale(.94)}
.preview-stage{display:grid;place-items:center;padding:0;background:#e8e8e8;overflow:auto;transition:background .2s}.preview-stage iframe{background:#fff;box-shadow:none;transition:width .3s var(--ease-out),height .3s var(--ease-out),opacity .22s,border-radius .2s,box-shadow .2s}
.preview-stage[data-device="fit"] iframe{width:100%;height:100%;border-radius:0}
.preview-stage[data-device="desktop"]{padding:20px}.preview-stage[data-device="desktop"] iframe{width:min(100%,1440px);height:calc(100% - 0px);border-radius:10px;box-shadow:0 16px 44px rgba(0,0,0,.15)}
.preview-stage[data-device="tablet"]{padding:20px}.preview-stage[data-device="tablet"] iframe{width:min(768px,calc(100% - 0px));height:min(1024px,calc(100% - 0px));min-height:520px;border-radius:16px;box-shadow:0 16px 44px rgba(0,0,0,.15)}
.preview-stage[data-device="mobile"]{padding:20px}.preview-stage[data-device="mobile"] iframe{width:min(390px,calc(100% - 0px));height:min(844px,calc(100% - 0px));min-height:520px;border-radius:24px;box-shadow:0 16px 44px rgba(0,0,0,.18)}
html[data-theme="dark"] .preview-stage{background:#0f0f0f}

/* Model picker stays close to the v3 visual language, only monochrome */
.model-dialog{background:var(--surface);border-color:var(--line)}.provider-tab.active{background:var(--ink);color:var(--canvas)}.model-row.selected{background:var(--surface-2)}.model-badge{color:var(--muted)}
.toast.model{background:var(--ink);color:var(--canvas);border-color:var(--line);min-width:174px;padding:12px 20px;border-radius:14px}
.composer-model-trigger{border:1px solid transparent}.composer-model-trigger:hover{border-color:var(--line)}

/* Strict grayscale for remaining UI states */
.history-menu button.danger,.auth-error{color:var(--ink)}
.drop-overlay{background:rgba(0,0,0,.72)}.drop-card{background:rgba(24,24,24,.96)}

@media(max-width:1180px){
  .app-shell.preview-open .preview-resizer{display:none}
  .app-shell.preview-open .preview-panel{width:min(var(--preview-width),88vw);flex-basis:auto}
}
@media(max-width:900px){.preview-device-switch .device-button[data-device="desktop"]{display:none}.app-shell.preview-open .preview-panel{width:min(94vw,760px)}}
@media(max-width:620px){.workspace-phases{grid-template-columns:1fr 1fr}.workspace-run-head{grid-template-columns:32px minmax(0,1fr)}.workspace-run-time{display:none}.workspace-file-state{display:none}.preview-device-switch .device-button[data-device="tablet"]{display:none}.preview-stage[data-device="mobile"],.preview-stage[data-device="tablet"],.preview-stage[data-device="desktop"]{padding:10px}.app-shell.preview-open .preview-panel{width:100vw}}
.gen-loader{border-top-color:#ededed;box-shadow:0 0 24px rgba(255,255,255,.10)}
.process-step.done .process-dot,.process-step.error .process-dot{background:var(--muted);border-color:var(--muted)}.process-check{color:var(--muted)}
.workspace-error{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1.45}

/* Neyro Studio v7 — polished project workflow */
:root{
  --danger:#e5484d;
  --share:#d8b86b;
}
html[data-theme="dark"]{--danger:#ff6369;--share:#d8b86b}

/* Keep real provider artwork in color. */
.provider-logo img,.provider-logo:hover img{
  filter:none!important;
  opacity:1;
}
.provider-logo img{object-fit:contain}

/* Stable assistant layout: project cards never overflow the chat column. */
.assistant-body{min-width:0;width:100%;max-width:100%}
.assistant-content{max-width:100%;overflow:visible}
.project-card,.workspace-run{width:100%;max-width:100%;min-width:0}
.project-card-head{flex-wrap:wrap;overflow:hidden}
.project-card-title{flex:1 1 250px;max-width:100%;overflow:hidden}
.project-card-title>span:last-child{max-width:100%}
.project-card-title small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.project-card-actions{flex:0 0 auto;gap:8px;margin-left:auto}
.project-card-actions button{min-width:48px}

/* Project activity: no DOM-flash, no blinking dots, readable live narration. */
.workspace-run{box-shadow:0 10px 34px rgba(0,0,0,.07)}
.workspace-run-head{min-height:74px}
.workspace-run-orb{overflow:visible}
.workspace-run:not(.done) .workspace-run-orb::after{display:none!important;animation:none!important}
.workspace-agent-mark{height:18px;width:20px;display:flex;align-items:center;justify-content:center;gap:2.5px}
.workspace-agent-mark i{display:block;width:2.5px;border-radius:99px;background:var(--ink);height:7px;transform-origin:center;animation:agentBars 1.35s var(--ease) infinite}
.workspace-agent-mark i:nth-child(2){height:13px;animation-delay:-.24s}
.workspace-agent-mark i:nth-child(3){height:9px;animation-delay:-.48s}
.workspace-done-mark{font-size:15px;font-weight:700}
@keyframes agentBars{0%,100%{transform:scaleY(.72) translateY(0)}50%{transform:scaleY(1.15) translateY(-1px)}}
.workspace-phase.active i,.workspace-file.active .workspace-file-mark i{animation:none!important;box-shadow:none!important;opacity:1!important;transform:none!important}
.workspace-phase.active i{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent)!important}
.workspace-progress span::after{opacity:.72}
.workspace-live{margin:0 10px;padding:12px 12px 11px;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start;background:color-mix(in srgb,var(--surface-2) 55%,transparent);border-radius:10px 10px 0 0}
.workspace-live-label{height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:9.5px;font-weight:650;letter-spacing:.02em;background:var(--surface)}
.workspace-live p{margin:1px 0 0;color:var(--muted);font-size:11.2px;line-height:1.48;min-width:0}
.workspace-files{padding:8px 10px 7px;display:flex;flex-direction:column;gap:4px}
.workspace-files.empty{display:none}
.workspace-file{height:38px}

/* File list spacing inside Studio. */
.project-workspace{grid-template-columns:178px minmax(0,1fr)}
.project-file-tree{padding:10px;display:flex;flex-direction:column;gap:7px}
.project-tree-item{min-height:40px;padding:7px 8px;border:1px solid transparent;border-radius:9px}
.project-tree-item:hover{border-color:var(--line-soft)}
.project-tree-item.active{border-color:var(--line);background:var(--surface-2)}
.tree-file-icon{width:29px;height:25px}

/* Preview device controls: proper line icons, desktop is the default mode. */
.preview-device-switch{gap:4px;padding:4px}
.device-button{width:34px;min-width:34px;height:29px;padding:0;display:grid;place-items:center}
.device-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.device-button[data-device="desktop"] svg{width:18px;height:18px}
.device-button.active{box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.preview-stage[data-device="desktop"]{padding:18px}
.preview-stage[data-device="desktop"] iframe{width:min(100%,1440px);height:100%;min-height:560px;border-radius:10px}

/* Chat history menu: restrained color is used only for actions where it improves meaning. */
.history-menu{padding:6px;display:flex;flex-direction:column;gap:5px}
.history-menu button{height:38px;gap:10px;padding:0 10px;transition:background .15s,color .15s,transform .15s}
.history-menu button:active{transform:scale(.985)}
.history-menu button.share{color:var(--share)}
.history-menu button.share:hover{background:color-mix(in srgb,var(--share) 10%,transparent)}
.history-menu button.danger,.history-menu button.danger:hover{color:var(--danger)}
.history-menu button.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.history-menu-icon{width:18px;text-align:center;font-size:15px;font-weight:650}
.auth-error{color:var(--danger)!important}

/* Slightly roomier Studio tabs and panel controls. */
.studio-tabs{gap:7px;padding:0 12px}
.studio-tab{padding:0 12px}
.preview-actions{gap:3px}
.preview-action{transition:background .15s,transform .15s,color .15s}
.preview-action:active{transform:scale(.9)}

@media(max-width:760px){
  .project-card-head{gap:10px}
  .project-card-actions{width:100%;margin-left:0;gap:7px}
  .project-workspace{grid-template-columns:132px minmax(0,1fr)}
  .project-file-tree{padding:8px;gap:6px}
  .project-tree-item{min-height:38px}
  .workspace-live{grid-template-columns:1fr;gap:6px}
  .workspace-live-label{width:58px}
}

/* Neyro Studio v8 — brand, polished light theme, live model build feed */
:root{
  --file-active:#ffffff;
  --file-active-border:rgba(0,0,0,.12);
  --file-hover:#f7f7f8;
  --studio-shadow:0 18px 55px rgba(0,0,0,.09);
}
html[data-theme="light"]{
  --sidebar:#f3f3f4;
  --canvas:#fafafa;
  --surface:#ffffff;
  --surface-2:#f3f3f4;
  --surface-3:#e9e9eb;
  --ink:#151516;
  --muted:#5e6065;
  --faint:#8a8d93;
  --line:rgba(0,0,0,.105);
  --line-soft:rgba(0,0,0,.058);
  --hover:rgba(0,0,0,.047);
  --composer:#f1f1f2;
  --user:#eeeeef;
  --code:#f6f6f7;
  --code-head:#ececee;
  --quote:#f3f3f4;
  --file-active:#ffffff;
  --file-active-border:rgba(0,0,0,.13);
  --file-hover:#f8f8f9;
  --shadow:0 24px 68px rgba(0,0,0,.13);
  --studio-shadow:0 18px 55px rgba(0,0,0,.08);
}
html[data-theme="dark"]{
  --file-active:#303031;
  --file-active-border:rgba(255,255,255,.13);
  --file-hover:#272728;
  --studio-shadow:0 22px 70px rgba(0,0,0,.30);
}

/* Use the supplied Neyro symbol as the product identity. */
.neyro-brand-mark,
.brand-avatar,
.neyro-project-icon{
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.neyro-brand-mark img,
.brand-avatar img,
.neyro-project-icon img,
.welcome-mark img,
.preview-empty-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
}
.neyro-brand-mark{padding:1px}
.neyro-brand-mark img{filter:drop-shadow(0 2px 5px rgba(0,0,0,.16))}
.brand-avatar{padding:3px;border:1px solid var(--line);border-radius:10px}
.brand-avatar img{border-radius:7px}
.welcome-mark{padding:9px;overflow:hidden}
.welcome-mark img{filter:drop-shadow(0 5px 10px rgba(0,0,0,.14));transform:scale(1.05)}
.neyro-project-icon{padding:5px!important;border:1px solid var(--line)!important}
.preview-empty-logo{width:42px;height:42px;padding:6px;border-radius:13px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;margin-bottom:2px}
.auth-brand .neyro-brand-mark{padding:3px!important;border:1px solid var(--line);background:var(--surface)!important}

/* Provider logos stay in their original brand colours. */
.provider-logo img,
.provider-logo:hover img{
  filter:none!important;
  opacity:1!important;
}
.provider-logo img{transform:none!important}

/* Cleaner image-mode welcome: no chat/code-specific styling leaks. */
.welcome-mark[data-section="image"]{border-radius:17px}
.welcome-mark[data-section="image"] img{transform:scale(1.08)}

/* Project file navigator: selected files remain readable in both themes. */
.project-workspace{background:var(--surface)}
.project-file-tree{
  background:var(--surface-2);
  padding:12px;
  gap:8px;
}
.project-tree-item{
  min-height:39px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  position:relative;
  gap:9px;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.project-tree-item:hover{
  background:var(--file-hover);
  color:var(--ink);
  border-color:var(--line-soft);
}
.project-tree-item.active{
  background:var(--file-active)!important;
  color:var(--ink)!important;
  border-color:var(--file-active-border)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.07);
}
.project-tree-item.active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:9px;
  bottom:9px;
  width:2px;
  border-radius:999px;
  background:var(--ink);
  opacity:.72;
}
.project-tree-item:active{transform:scale(.985)}
.tree-file-icon{
  width:29px;
  height:25px;
  background:var(--surface);
  border-color:var(--line);
}
.project-tree-item.active .tree-file-icon{background:var(--surface-2);color:var(--ink)}
.project-editor-wrap{background:var(--surface)}
.project-editor-head{background:var(--surface);padding:0 13px}
#projectEditor{background:var(--surface);padding:16px 18px}

/* Refined light theme surfaces — less stark, more consistent with the dark UI. */
html[data-theme="light"] .sidebar{box-shadow:inset -1px 0 0 rgba(0,0,0,.025)}
html[data-theme="light"] .topbar{background:linear-gradient(to bottom,rgba(250,250,250,.98) 72%,rgba(250,250,250,0))}
html[data-theme="light"] .composer{border-color:rgba(0,0,0,.10);box-shadow:0 12px 36px rgba(0,0,0,.075)}
html[data-theme="light"] .model-dialog,
html[data-theme="light"] .settings-popover,
html[data-theme="light"] .history-menu{box-shadow:0 22px 65px rgba(0,0,0,.13)}
html[data-theme="light"] .workspace-run,
html[data-theme="light"] .project-card{box-shadow:0 12px 38px rgba(0,0,0,.055)}
html[data-theme="light"] .suggestion{background:rgba(255,255,255,.42)}
html[data-theme="light"] .suggestion:hover{background:#fff;border-color:rgba(0,0,0,.07)}
html[data-theme="light"] .preview-panel{box-shadow:-18px 0 55px rgba(0,0,0,.08)}
html[data-theme="light"] .preview-stage{background:#e7e7e9}

/* Live project preparation: calm, continuous animation with text from the model. */
.workspace-run{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.workspace-run-glow{
  position:absolute;
  z-index:-1;
  left:-30%;
  top:-80px;
  width:55%;
  height:180px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--ink) 8%,transparent),transparent 68%);
  opacity:.42;
  pointer-events:none;
  animation:workspaceGlowDrift 7.5s var(--ease) infinite alternate;
}
.workspace-run:not(.done) .workspace-progress span::after{
  content:"";
  position:absolute;
  inset:0;
  width:38%;
  left:-42%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--canvas) 72%,transparent),transparent);
  opacity:.36;
  animation:workspaceScan 3.8s linear infinite;
}
.workspace-progress{overflow:hidden}
.workspace-progress span{position:relative;overflow:hidden}
.workspace-action-log{
  margin:10px 10px 0;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-2) 66%,transparent);
  overflow:hidden;
}
.workspace-action-head{
  height:34px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line-soft);
  color:var(--muted);
  font-size:10px;
  font-weight:650;
  letter-spacing:.01em;
}
.workspace-action-pulse{width:20px;height:16px;display:flex;align-items:center;justify-content:center;gap:2px}
.workspace-action-pulse i{width:2px;height:5px;border-radius:99px;background:var(--muted);animation:workspaceActionBars 1.45s ease-in-out infinite}
.workspace-action-pulse i:nth-child(2){height:11px;animation-delay:-.22s}
.workspace-action-pulse i:nth-child(3){height:7px;animation-delay:-.44s}
.workspace-run.done .workspace-action-pulse i{animation:none;opacity:.45}
.workspace-action-lines{padding:7px 10px 8px;display:flex;flex-direction:column;gap:2px}
.workspace-action-line{
  min-height:31px;
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  align-items:start;
  gap:8px;
  padding:6px 7px;
  border-radius:9px;
  color:var(--faint);
  font-size:10.7px;
  line-height:1.45;
  animation:workspaceStatusIn .28s var(--ease-out) both;
}
.workspace-action-line.active{
  color:var(--ink);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
}
.workspace-action-line.done{color:var(--muted)}
.workspace-action-dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--line);margin-top:4px;background:var(--surface)}
.workspace-action-line.done .workspace-action-dot{background:var(--faint);border-color:var(--faint);opacity:.55}
.workspace-action-line.active .workspace-action-dot{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 8%,transparent);animation:workspaceSoftPulse 1.8s ease-in-out infinite}
.workspace-files{padding-top:10px}

@keyframes workspaceGlowDrift{from{transform:translate3d(0,0,0) scale(.92)}to{transform:translate3d(95%,18px,0) scale(1.08)}}
@keyframes workspaceScan{to{left:125%}}
@keyframes workspaceActionBars{0%,100%{transform:scaleY(.72);opacity:.48}50%{transform:scaleY(1.18);opacity:1}}
@keyframes workspaceStatusIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes workspaceSoftPulse{50%{box-shadow:0 0 0 6px transparent}}

@media (prefers-reduced-motion: reduce){
  .workspace-run-glow,.workspace-progress span::after,.workspace-action-pulse i,.workspace-action-line.active .workspace-action-dot{animation:none!important}
}


/* v11 — resumable project builds */
.workspace-error{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 13px}
.workspace-error>span{min-width:0;flex:1}
.workspace-resume{appearance:none;border:1px solid var(--line-strong,var(--line));background:var(--ink);color:var(--canvas);border-radius:10px;padding:8px 12px;font:600 11px/1.1 inherit;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ease-out),opacity .16s ease,background .16s ease}
.workspace-resume:hover{transform:translateY(-1px);opacity:.92}
.workspace-resume:active{transform:translateY(0) scale(.985)}
html[data-theme="dark"] .workspace-resume{background:#f2f2f2;color:#111;border-color:#f2f2f2}
html[data-theme="light"] .workspace-resume{background:#111;color:#fff;border-color:#111}
@media(max-width:620px){.workspace-error{align-items:stretch}.workspace-resume{width:100%;padding:10px 12px}}


/* v13 — project edit flow */
.workspace-run.editing{position:relative;isolation:isolate}
.workspace-run.editing .workspace-run-glow{opacity:.9;background:radial-gradient(circle at 22% 15%,color-mix(in srgb,var(--ink) 8%,transparent),transparent 48%),radial-gradient(circle at 78% 84%,color-mix(in srgb,var(--ink) 5%,transparent),transparent 46%)}
.workspace-edit-flow{margin:10px 16px 4px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--surface-2) 88%,transparent);display:grid;grid-template-columns:auto minmax(32px,1fr) auto minmax(32px,1fr) auto;align-items:center;gap:8px;overflow:hidden}
.edit-flow-node{display:flex;align-items:center;gap:7px;min-width:0;color:var(--faint);font-size:10.5px;white-space:nowrap}
.edit-flow-node i{width:21px;height:21px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;font:9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--surface);font-style:normal;flex:0 0 auto}
.edit-flow-node b{font-weight:560;overflow:hidden;text-overflow:ellipsis}
.edit-flow-node.active{color:var(--ink)}
.edit-flow-node.active i{border-color:color-mix(in srgb,var(--ink) 35%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 5%,transparent);animation:editNodePulse 1.8s ease-in-out infinite}
.edit-flow-node.done{color:var(--muted)}
.edit-flow-line{height:1px;background:var(--line);position:relative;overflow:hidden}
.workspace-run.editing:not(.done) .edit-flow-line i{position:absolute;inset:0 auto 0 -35%;width:35%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 46%,transparent),transparent);animation:editFlowSweep 1.65s ease-in-out infinite}
.workspace-run.editing .workspace-action-log{margin-top:9px}
.workspace-run.editing .workspace-action-head{letter-spacing:.01em}
.workspace-run.editing .workspace-file.active{position:relative;overflow:hidden}
.workspace-run.editing .workspace-file.active::after{content:"";position:absolute;inset:0 auto 0 -28%;width:28%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 5%,transparent),transparent);animation:editFileSweep 1.5s ease-in-out infinite;pointer-events:none}
@keyframes editNodePulse{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.045);opacity:1}}
@keyframes editFlowSweep{0%{left:-38%}100%{left:112%}}
@keyframes editFileSweep{0%{left:-30%}100%{left:115%}}
@media(max-width:700px){.workspace-edit-flow{grid-template-columns:1fr;gap:6px}.edit-flow-line{display:none}.edit-flow-node{white-space:normal}}
@media(prefers-reduced-motion:reduce){.edit-flow-node.active i,.workspace-run.editing:not(.done) .edit-flow-line i,.workspace-run.editing .workspace-file.active::after{animation:none!important}}


/* Neyro Studio v14 — three workspaces + Google logo crop */
.provider-logo.google{background:#fff;overflow:hidden}
.provider-logo.google img,
.provider-logo.google:hover img{
  width:165%!important;
  height:165%!important;
  max-width:none!important;
  object-fit:cover!important;
  transform:scale(1.02)!important;
  transform-origin:center!important;
}
.workspace-link{min-height:38px}
.workspace-link .workspace-icon{width:20px;display:inline-grid;place-items:center;flex:none}
.welcome-mark[data-section="studio"]{box-shadow:0 10px 34px rgba(0,0,0,.08)}


/* Neyro Studio v15 — strict workspace separation, handoff cards, smoother streaming */
.provider-logo.google{background:#fff!important;overflow:hidden!important}
.provider-logo.google img,
.provider-logo.google:hover img{
  position:absolute!important;
  left:50%!important;top:50%!important;
  width:100%!important;height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  transform:translate(-50%,-50%) scale(2.72)!important;
  transform-origin:center!important;
}
.provider-logo.google.mini img,
.provider-logo.google.mini:hover img{transform:translate(-50%,-50%) scale(2.78)!important}
.assistant-avatar .provider-logo.google img,
.assistant-avatar .provider-logo.google:hover img{transform:translate(-50%,-50%) scale(2.72)!important}

.workspace-handoff{
  width:min(100%,620px);min-height:78px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,transparent),var(--surface));
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.055);animation:handoffIn .28s var(--ease-out) both;
}
.handoff-mark{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);display:grid;place-items:center;font-size:17px;color:var(--ink)}
.handoff-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.handoff-copy strong{font-size:13px;line-height:1.25}.handoff-copy small{font-size:10.5px;line-height:1.42;color:var(--muted)}
.handoff-button{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--ink);color:var(--canvas);font-size:10.5px;font-weight:620;cursor:pointer;white-space:nowrap;transition:transform .16s var(--ease-out),opacity .16s,background .16s}
.handoff-button:hover{transform:translateY(-1px)}.handoff-button:active{transform:scale(.97)}
@keyframes handoffIn{from{opacity:0;transform:translateY(6px) scale(.995)}to{opacity:1;transform:none}}

.assistant-content.is-streaming{will-change:contents}
.assistant-content.is-streaming p:last-of-type,.assistant-content.is-streaming li:last-child{animation:streamTextIn .16s ease-out both}
.streaming-cursor{display:inline-block;width:5px;height:16px;margin-left:2px;vertical-align:-2px;border-radius:999px;background:currentColor;opacity:.72;animation:streamCursor 1.05s ease-in-out infinite}
@keyframes streamTextIn{from{opacity:.72;transform:translateY(1px)}to{opacity:1;transform:none}}
@keyframes streamCursor{0%,100%{opacity:.25;transform:scaleY(.7)}50%{opacity:.9;transform:scaleY(1)}}

/* Make workspaces visually unambiguous. */
.workspace-link{position:relative}
.workspace-link.active::before{content:"";position:absolute;left:5px;top:50%;width:2px;height:16px;border-radius:99px;background:var(--ink);transform:translateY(-50%)}

@media(max-width:680px){.workspace-handoff{grid-template-columns:34px minmax(0,1fr)}.handoff-button{grid-column:1/-1;width:100%}}
@media(prefers-reduced-motion:reduce){.workspace-handoff,.assistant-content.is-streaming p:last-of-type,.assistant-content.is-streaming li:last-child,.streaming-cursor{animation:none!important}}

/* Wallet / billing */
.wallet-pill{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:650;transition:background var(--fast),transform var(--fast),border-color var(--fast),box-shadow var(--fast)}
.wallet-pill:hover{background:var(--surface-2);box-shadow:0 6px 22px rgba(0,0,0,.06)}.wallet-pill:active{transform:scale(.97)}.wallet-dot{font-size:8px;color:#38a169}.wallet-unit{font-size:11px;color:var(--faint);font-weight:500}
.wallet-backdrop{position:fixed;inset:0;z-index:118;background:rgba(0,0,0,.44);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.wallet-backdrop.open{opacity:1;visibility:visible}
.wallet-modal{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-47%) scale(.98);width:min(900px,calc(100vw - 28px));max-height:min(820px,calc(100vh - 32px));overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .2s,transform .26s var(--ease-out),visibility .2s;display:flex;flex-direction:column}.wallet-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.wallet-head{padding:18px 20px 12px;display:flex;align-items:flex-start;justify-content:space-between}.wallet-head h2{font-size:22px;letter-spacing:-.35px;margin:2px 0 0}.eyebrow{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.wallet-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px 14px}.wallet-balance-card,.wallet-economy-card{border:1px solid var(--line);border-radius:16px;padding:15px;background:linear-gradient(145deg,var(--surface),var(--surface-2));display:flex;flex-direction:column;gap:3px}.wallet-summary small{font-size:11px;color:var(--faint)}.wallet-summary strong{font-size:22px;letter-spacing:-.35px}.wallet-summary span{font-size:11px;color:var(--muted)}
.wallet-tabs{display:flex;gap:4px;padding:0 20px 10px;border-bottom:1px solid var(--line-soft)}.wallet-tab{height:34px;padding:0 12px;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:background var(--fast),color var(--fast)}.wallet-tab:hover{background:var(--hover)}.wallet-tab.active{background:var(--ink);color:var(--inverse)}
.wallet-view{display:none;overflow:auto;padding:18px 20px 22px;min-height:300px}.wallet-view.active{display:block;animation:fadeUp .22s var(--ease-out) both}.topup-copy{display:flex;flex-direction:column;gap:3px;margin-bottom:13px}.topup-copy strong,.pricing-toolbar strong{font-size:15px}.topup-copy span,.pricing-toolbar span{color:var(--faint);font-size:11px}
.topup-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.topup-presets button{min-height:74px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:12px;cursor:pointer;transition:transform var(--fast),background var(--fast),border-color var(--fast)}.topup-presets button:hover{transform:translateY(-2px);background:var(--hover)}.topup-presets strong{font-size:18px}.topup-presets span{font-size:11px;color:var(--faint)}
.topup-custom{margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.topup-custom label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}.topup-custom input,.calculator-grid input,.calculator-grid select{height:42px;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:0 12px;outline:0}.topup-custom button{height:42px;padding:0 20px;border-radius:11px;background:var(--ink);color:var(--inverse);font-weight:650;cursor:pointer}.wallet-note{font-size:10.5px;color:var(--faint);margin:12px 2px 0;line-height:1.5}
.pricing-toolbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.pricing-toolbar>div{display:flex;flex-direction:column;gap:2px}.pricing-x2{border:1px solid var(--line);border-radius:999px;padding:5px 9px!important;color:var(--ink)!important;background:var(--surface-2)}.pricing-list{display:flex;flex-direction:column;gap:5px}.pricing-row{display:grid;grid-template-columns:minmax(170px,1.4fr) .7fr .7fr .8fr;gap:10px;align-items:center;min-height:48px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:11px}.pricing-row:hover{background:var(--surface-2)}.pricing-model{display:flex;align-items:center;gap:9px;min-width:0}.pricing-model-copy{display:flex;flex-direction:column;min-width:0}.pricing-model-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pricing-model-copy span{font-size:10px;color:var(--faint)}.pricing-cell{display:flex;flex-direction:column}.pricing-cell small{font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}.pricing-cell strong{font-size:11.5px}.pricing-sell strong{font-size:13px}
.calculator-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:9px}.calculator-grid label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}.calculator-result{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.calculator-result>div{border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px}.calculator-result small{font-size:10px;color:var(--faint)}.calculator-result strong{font-size:18px}
.wallet-history{display:flex;flex-direction:column;gap:6px}.wallet-history-empty{padding:36px;text-align:center;color:var(--faint)}.wallet-history-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:12px}.wallet-history-copy{display:flex;flex-direction:column;gap:2px}.wallet-history-copy strong{font-size:12px}.wallet-history-copy span{font-size:10px;color:var(--faint)}.wallet-history-points{font-weight:700}.wallet-history-points.plus{color:#2f855a}.wallet-history-points.minus{color:var(--ink)}
.message-cost{margin-top:6px;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
@media(max-width:760px){.wallet-unit{display:none}.wallet-summary{grid-template-columns:1fr}.topup-presets{grid-template-columns:1fr 1fr}.calculator-grid,.calculator-result{grid-template-columns:1fr}.pricing-row{grid-template-columns:1.4fr .8fr}.pricing-row .pricing-cell:nth-child(2),.pricing-row .pricing-cell:nth-child(3){display:none}.wallet-modal{max-height:calc(100vh - 16px);width:calc(100vw - 16px)}.wallet-head,.wallet-summary,.wallet-tabs,.wallet-view{padding-left:13px;padding-right:13px}.wallet-tabs{overflow-x:auto}.topbar-action-label{display:none}}

/* ===== Neyro Studio v17 — premium workspace, versions, inspector, runtime, deploy ===== */
:root{--v17-radius:16px;--v17-soft:color-mix(in srgb,var(--surface) 92%,var(--canvas));--v17-line:color-mix(in srgb,var(--line) 78%,transparent)}
body{letter-spacing:-.006em}.main-pane{background:radial-gradient(circle at 48% -18%,color-mix(in srgb,var(--surface-3) 72%,transparent),transparent 36%),var(--canvas)}
.sidebar{border-right-color:var(--v17-line)}.topbar{backdrop-filter:blur(16px) saturate(1.05);background:color-mix(in srgb,var(--canvas) 88%,transparent)}
.composer{box-shadow:0 18px 52px rgba(0,0,0,.14);border-color:color-mix(in srgb,var(--line) 84%,transparent)}
html[data-theme="light"] .composer{box-shadow:0 20px 54px rgba(15,18,24,.09)}

/* Provider logos: preserve real colors and make Gemini fill its square cleanly. */
.provider-logo img,.provider-logo:hover img{filter:none!important}
.provider-logo.google{background:#fff!important;overflow:hidden!important}
.provider-logo.google img,.provider-logo.google:hover img{position:absolute!important;left:50%!important;top:50%!important;width:145%!important;height:145%!important;max-width:none!important;object-fit:cover!important;object-position:center!important;transform:translate(-50%,-50%) scale(1.62)!important}
.provider-logo.google.mini img,.provider-logo.google.mini:hover img{width:150%!important;height:150%!important;transform:translate(-50%,-50%) scale(1.72)!important}
.provider-logo.neyro{background:var(--surface-2)}.provider-logo.neyro img{object-fit:cover!important;transform:scale(1.08)!important}

/* Recent projects */
.recent-projects{width:min(760px,100%);margin:22px auto 0}.recent-projects[hidden]{display:none}.recent-projects-head{display:flex;justify-content:space-between;align-items:end;margin:0 2px 9px}.recent-projects-head strong{font-size:12px}.recent-projects-head small{font-size:10px;color:var(--faint)}.recent-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.recent-project-card{min-width:0;padding:9px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left;cursor:pointer;transition:transform .2s var(--ease-out),background .2s,border-color .2s,box-shadow .2s}.recent-project-card:hover{transform:translateY(-2px);background:var(--surface-2);box-shadow:0 10px 30px rgba(0,0,0,.065)}.recent-project-card>span:nth-child(2){display:flex;flex-direction:column;min-width:0;gap:3px}.recent-project-card strong{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-project-card small{font-size:9.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-project-card i{font-style:normal;color:var(--faint)}.recent-project-thumb{width:44px;height:34px;border-radius:9px;background:linear-gradient(145deg,var(--surface-3),var(--surface));display:grid;place-items:center;border:1px solid var(--line-soft);overflow:hidden}.recent-project-thumb img{width:23px;height:23px;object-fit:contain}

/* Preview tooling */
.preview-action.deploy-action{width:auto;padding:0 10px;font-size:10px;font-weight:650}.preview-toolbar-extra{display:flex;align-items:center;gap:5px;margin-left:auto}.preview-tool-button{height:29px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);font-size:10px;display:flex;align-items:center;gap:5px;cursor:pointer;transition:background .16s,color .16s,transform .16s}.preview-tool-button:hover,.preview-tool-button.active{background:var(--ink);color:var(--inverse)}.preview-tool-button:active{transform:scale(.97)}.preview-urlbar{gap:8px;flex-wrap:wrap}.studio-tabs{gap:3px;overflow-x:auto}.console-badge{min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:#c63b34;color:#fff;font-size:8px;display:inline-grid;place-items:center;margin-left:4px}.console-badge[hidden]{display:none}
.element-inspector{margin:8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);padding:10px;display:grid;grid-template-columns:minmax(150px,.8fr) minmax(200px,1.4fr) auto auto;gap:8px;align-items:center;box-shadow:0 12px 32px rgba(0,0,0,.08);animation:fadeUp .2s var(--ease-out) both}.element-inspector[hidden]{display:none}.element-inspector-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.element-inspector-meta strong{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element-inspector-meta small{font-size:9px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element-inspector textarea{resize:none;min-height:44px;max-height:70px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--canvas);color:var(--ink);font:11px/1.35 inherit;outline:none}.element-inspector textarea:focus{border-color:color-mix(in srgb,var(--ink) 45%,var(--line))}.element-inspector button{height:36px;padding:0 11px;border-radius:10px;background:var(--ink);color:var(--inverse);font-size:10px;font-weight:650;cursor:pointer}.element-inspector button.ghost{width:34px;padding:0;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

/* Console */
#studioConsoleView,#studioVersionsView{min-height:0;overflow:hidden}.console-toolbar,.versions-head{min-height:58px;padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}.console-toolbar>div,.versions-head>div{display:flex;flex-direction:column;gap:2px;margin-right:auto}.console-toolbar strong,.versions-head strong{font-size:12px}.console-toolbar small,.versions-head small{font-size:9.5px;color:var(--faint)}.console-toolbar button,.versions-head button{height:31px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:9.5px;cursor:pointer}.console-toolbar button.primary{background:var(--ink);color:var(--inverse)}.console-toolbar button:disabled{opacity:.35;cursor:not-allowed}.autofix-toggle{height:31px;padding:0 8px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--muted);cursor:pointer}.autofix-toggle input{display:none}.autofix-toggle span{width:24px;height:14px;border-radius:99px;background:var(--surface-3);position:relative;transition:.18s}.autofix-toggle span::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;left:2px;top:2px;background:var(--faint);transition:.18s}.autofix-toggle input:checked+span{background:var(--ink)}.autofix-toggle input:checked+span::after{left:12px;background:var(--inverse)}.console-list{height:calc(100% - 58px);overflow:auto;padding:9px;display:flex;flex-direction:column;gap:5px;background:var(--canvas)}.console-row{min-height:35px;border:1px solid var(--line-soft);border-radius:9px;background:var(--surface);display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;padding:7px 9px;align-items:start}.console-row.error{border-color:color-mix(in srgb,#d94c45 40%,var(--line));background:color-mix(in srgb,#d94c45 5%,var(--surface))}.console-row.warn{border-color:color-mix(in srgb,#d19a3b 36%,var(--line))}.console-level{font:8.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--faint)}.console-row.error .console-level{color:#d94c45}.console-row pre{margin:0;white-space:pre-wrap;word-break:break-word;font:10px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink)}.console-row time{font-size:8.5px;color:var(--faint)}.console-empty{height:100%;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;color:var(--muted)}.console-empty span{width:34px;height:34px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center}.console-empty strong{font-size:12px}.console-empty small{max-width:340px;font-size:9.5px;color:var(--faint);line-height:1.45}

/* Versions */
.versions-layout{height:calc(100% - 58px);display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0}.versions-list{border-right:1px solid var(--line);overflow:auto;padding:8px;display:flex;flex-direction:column;gap:5px}.version-item{min-height:58px;padding:8px;border:1px solid transparent;border-radius:11px;background:transparent;text-align:left;display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;cursor:pointer;color:var(--ink)}.version-item:hover{background:var(--surface-2)}.version-item.active{background:var(--surface-2);border-color:var(--line)}.version-index{width:32px;height:32px;border-radius:9px;background:var(--surface-3);display:grid;place-items:center;font:9px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.version-item>span:last-child{display:flex;flex-direction:column;min-width:0;gap:2px}.version-item strong{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.version-item small{font-size:8.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.version-detail{overflow:auto;padding:13px}.version-detail-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}.version-detail-head>div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}.version-detail-head span{grid-row:1/3;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.version-detail-head strong{font-size:12px}.version-detail-head small{font-size:9px;color:var(--faint)}.version-detail-head button{height:32px;padding:0 10px;border-radius:9px;background:var(--ink);color:var(--inverse);font-size:9.5px;cursor:pointer}.version-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.version-stats span{border:1px solid var(--line);border-radius:10px;padding:9px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px;font-size:8.5px;color:var(--faint)}.version-stats b{font-size:16px;color:var(--ink)}.version-changes{display:flex;flex-direction:column;gap:4px}.version-changes>div:not(.version-same){display:grid;grid-template-columns:18px 1fr;gap:6px;padding:7px;border-radius:8px;background:var(--surface-2);font-size:9.5px}.version-changes code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.version-same,.version-empty{padding:30px;text-align:center;color:var(--faint);font-size:10px}

/* Deploy */
.deploy-backdrop{position:fixed;inset:0;z-index:138;background:rgba(0,0,0,.48);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.2s}.deploy-backdrop.open{opacity:1;visibility:visible}.deploy-modal{position:fixed;z-index:140;left:50%;top:50%;width:min(560px,calc(100vw - 24px));transform:translate(-50%,-46%) scale(.985);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.28);padding:14px;opacity:0;visibility:hidden;transition:opacity .2s,transform .25s var(--ease-out),visibility .2s}.deploy-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.deploy-head{display:flex;justify-content:space-between;align-items:start;padding:2px 3px 11px}.deploy-head small{font-size:8.5px;letter-spacing:.12em;color:var(--faint)}.deploy-head h2{font-size:18px;margin:2px 0 0}.deploy-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);margin-top:7px}.deploy-card.muted{grid-template-columns:1fr auto}.deploy-icon{width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}.deploy-icon img{width:28px;height:28px;object-fit:contain}.deploy-card>div{display:flex;flex-direction:column;gap:3px}.deploy-card strong{font-size:11.5px}.deploy-card small{font-size:9px;line-height:1.4;color:var(--faint)}.deploy-card button,.deploy-result button{height:32px;padding:0 10px;border-radius:9px;background:var(--ink);color:var(--inverse);font-size:9.5px;cursor:pointer}.deploy-result{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:13px}.deploy-result>small{font-size:9px;color:var(--faint)}.deploy-result>div{display:grid;grid-template-columns:1fr auto auto;gap:6px;margin-top:5px}.deploy-result input{height:34px;border:1px solid var(--line);border-radius:9px;background:var(--canvas);color:var(--ink);padding:0 9px;font:9.5px ui-monospace,SFMono-Regular,Consolas,monospace}

/* Project file readability */
.project-file-tree{gap:7px!important;padding:9px!important}.project-tree-item{min-height:42px!important;border:1px solid transparent!important;border-radius:10px!important;background:var(--surface)!important}.project-tree-item:hover{background:var(--surface-2)!important;border-color:var(--line-soft)!important}.project-tree-item.active{background:var(--ink)!important;color:var(--inverse)!important;border-color:var(--ink)!important}.project-tree-item.active .tree-file-icon{background:color-mix(in srgb,var(--inverse) 16%,transparent)!important;color:var(--inverse)!important;border-color:transparent!important}
html[data-theme="light"] .project-tree-item{background:#fff!important}html[data-theme="light"] .project-tree-item:hover{background:#f4f4f3!important}html[data-theme="light"] .project-tree-item.active{background:#171717!important;color:#fff!important}

@media(max-width:900px){.recent-projects-grid{grid-template-columns:1fr}.preview-toolbar-extra span{display:none}.element-inspector{grid-template-columns:1fr auto}.element-inspector-meta,.element-inspector textarea{grid-column:1/-1}.versions-layout{grid-template-columns:1fr}.versions-list{max-height:210px;border-right:0;border-bottom:1px solid var(--line)}.console-toolbar{flex-wrap:wrap}.autofix-toggle{margin-left:auto}.deploy-card{grid-template-columns:38px minmax(0,1fr)}.deploy-card button{grid-column:1/-1;width:100%}}
@media(prefers-reduced-motion:reduce){.recent-project-card,.deploy-modal,.element-inspector{transition:none!important;animation:none!important}}
.recent-project-thumb{position:relative}.recent-project-thumb iframe{position:absolute;left:0;top:0;width:320px;height:240px;border:0;transform:scale(.138);transform-origin:0 0;pointer-events:none;background:#fff}.recent-project-thumb:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 65%,transparent);border-radius:inherit;pointer-events:none}
.project-card-head{align-items:flex-start}.project-card-actions{flex-wrap:wrap;justify-content:flex-end;max-width:330px}.project-card-actions button{white-space:nowrap}
@media(max-width:720px){.project-card-head{flex-direction:column}.project-card-actions{width:100%;max-width:none;justify-content:flex-start}.project-card-actions button{flex:1}}

/* v18 — calmer status, multi-select inspector, compare, quick design */
.composer-meta-row{min-height:24px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative}.composer-meta-row .composer-note{padding-top:7px}.service-status{position:absolute;right:4px;top:5px;height:20px;padding:0 8px 0 7px;border:1px solid var(--line-soft);border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);display:flex;align-items:center;gap:6px;color:var(--faint);font-size:9.5px;white-space:nowrap;transition:opacity .2s,background .2s,color .2s,border-color .2s,transform .2s var(--ease-out)}.service-status i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}.service-status.busy,.service-status.saving{color:var(--muted)}.service-status.busy i,.service-status.saving i{animation:servicePulse 1.25s ease-in-out infinite}.service-status.reconnect{color:#b98a32;border-color:color-mix(in srgb,#b98a32 35%,var(--line));background:color-mix(in srgb,#b98a32 8%,var(--surface))}.service-status.reconnect i{animation:servicePulse .75s ease-in-out infinite}.service-status.error{color:#c34b45;border-color:color-mix(in srgb,#c34b45 32%,var(--line));background:color-mix(in srgb,#c34b45 7%,var(--surface))}.service-status.ready{opacity:.72}@keyframes servicePulse{0%,100%{opacity:.3;transform:scale(.78)}50%{opacity:1;transform:scale(1.1)}}

.element-inspector{display:block!important;margin:8px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 96%,transparent);padding:10px;box-shadow:0 14px 36px rgba(0,0,0,.1);animation:fadeUp .2s var(--ease-out) both}.element-inspector[hidden]{display:none!important}.element-inspector-main{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(220px,1.2fr) auto;gap:8px;align-items:center}.element-inspector-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.element-inspector-meta strong{font-size:11px}.element-inspector-meta small{font-size:9px;color:var(--faint);line-height:1.35}.selected-elements-list{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;min-height:0}.selected-elements-list:empty{display:none}.selected-element-chip{max-width:220px;height:28px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:0 7px;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);transition:background .15s,border-color .15s,transform .15s}.selected-element-chip:hover{background:var(--hover);border-color:color-mix(in srgb,var(--ink) 18%,var(--line));transform:translateY(-1px)}.selected-element-chip span{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}.selected-element-chip code{font:9.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selected-element-chip b{font-size:12px;font-weight:500;margin-left:auto}.element-inspector textarea{resize:none;min-height:46px;max-height:80px;border:1px solid var(--line);border-radius:11px;padding:8px 10px;background:var(--canvas);color:var(--ink);font:11px/1.4 inherit;outline:none}.element-inspector-actions{display:flex;gap:6px;align-items:center}.element-inspector-actions button{height:38px;padding:0 11px;border-radius:10px;background:var(--ink);color:var(--inverse);font-size:10px;font-weight:650;cursor:pointer}.element-inspector-actions button.ghost{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.design-mode{grid-column:1/-1;margin-top:9px;border-top:1px solid var(--line-soft);padding-top:8px}.design-mode summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px;color:var(--muted)}.design-mode summary::-webkit-details-marker{display:none}.design-mode summary span{font-size:10.5px;font-weight:650;color:var(--ink)}.design-mode summary small{font-size:9px;color:var(--faint)}.design-controls{padding-top:9px;display:grid;grid-template-columns:repeat(4,minmax(82px,1fr)) auto auto;gap:7px;align-items:end}.design-controls label{display:flex;flex-direction:column;gap:4px}.design-controls label span{font-size:8.5px;color:var(--faint)}.design-controls input[type="number"]{height:34px;width:100%;border:1px solid var(--line);border-radius:9px;background:var(--canvas);padding:0 8px;outline:none}.design-color input[type="color"]{height:34px;width:100%;border:1px solid var(--line);border-radius:9px;background:var(--canvas);padding:3px}.design-check{align-self:center!important;flex-direction:row!important;align-items:center;gap:6px!important;padding-top:13px}.design-check input{accent-color:var(--ink)}.design-controls>button{height:34px;padding:0 11px;border-radius:9px;background:var(--ink);color:var(--inverse);cursor:pointer;font-size:9.5px;font-weight:650}



@media(max-width:900px){.service-status{display:none}.element-inspector-main{grid-template-columns:1fr}.element-inspector-actions{justify-content:flex-end}.design-controls{grid-template-columns:1fr 1fr}.compare-grid{grid-template-columns:1fr}.compare-side:first-child{display:none}}
@media(prefers-reduced-motion:reduce){.service-status i,.selected-element-chip{animation:none!important;transition:none!important}}
.mode-guide{display:flex;align-items:center;justify-content:center;gap:9px;margin:-13px 0 20px;color:var(--faint);font-size:10px}.mode-guide span{display:flex;align-items:center;gap:5px}.mode-guide b{width:18px;height:18px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface);color:var(--muted);font:650 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.mode-guide i{font-style:normal;opacity:.45}@media(max-width:620px){.mode-guide{gap:5px;font-size:9px;flex-wrap:wrap}.mode-guide i{display:none}}

/* Neyro Studio v20 — polished web-search controls and source discovery */
.web-search-toggle{position:relative;height:38px;padding:0 13px 0 9px;border:1px solid color-mix(in srgb,var(--ink) 9%,var(--line));border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 95%,transparent),color-mix(in srgb,var(--surface-2) 92%,transparent));color:var(--ink);display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.08);transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}.web-search-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.web-search-toggle::before{content:'';width:22px;height:22px;border-radius:8px;position:absolute;left:8px;top:7px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.22) 34%,transparent 35%),linear-gradient(180deg,color-mix(in srgb,var(--ink) 10%,transparent),transparent);border:1px solid color-mix(in srgb,var(--ink) 10%,var(--line));pointer-events:none}.web-search-toggle svg,.web-search-toggle span{position:relative;z-index:1}.web-search-toggle svg{margin-left:4px}.web-search-toggle span{font-size:11px;font-weight:620;letter-spacing:-.01em}.web-search-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}.web-search-toggle:active{transform:scale(.985)}.web-search-toggle.active,.web-search-toggle[data-mode="on"]{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,var(--ink) 3%),color-mix(in srgb,var(--surface-2) 90%,var(--ink) 4%));border-color:color-mix(in srgb,var(--ink) 32%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),0 10px 22px rgba(0,0,0,.14)}.web-search-toggle[data-mode="off"]{opacity:.74;filter:saturate(.75)}.web-search-toggle[data-mode="auto"]::after,.web-search-toggle[data-mode="on"]::after{content:'';position:absolute;right:9px;top:9px;width:7px;height:7px;border-radius:999px;background:#3fda7a;box-shadow:0 0 0 4px color-mix(in srgb,#3fda7a 18%,transparent);animation:webModePulse 1.6s ease-in-out infinite}.web-search-toggle[data-mode="off"]::after{content:'';position:absolute;right:11px;top:11px;width:6px;height:6px;border-radius:999px;background:var(--faint)}
.web-search-card{margin:0 0 12px;border:1px solid color-mix(in srgb,var(--ink) 10%,var(--line));border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,transparent),color-mix(in srgb,var(--surface-2) 92%,transparent));padding:12px;box-shadow:0 12px 32px rgba(0,0,0,.08);overflow:hidden;animation:fadeUp .22s var(--ease-out) both}.web-search-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}.web-search-head strong{display:block;font-size:12px;line-height:1.25}.web-search-head small{display:block;font-size:10px;color:var(--faint);margin-top:2px;line-height:1.35}.web-search-orb{width:30px;height:30px;border-radius:10px;border:1px solid color-mix(in srgb,var(--ink) 12%,var(--line));display:grid;place-items:center;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.web-search-orb i{width:13px;height:13px;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:webSpin 1s linear infinite;opacity:.9}.web-search-badge{height:22px;padding:0 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 10%,var(--line));background:var(--surface);font-size:9px;font-weight:700;color:var(--muted);display:flex;align-items:center;text-transform:uppercase;letter-spacing:.08em}.web-search-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.web-search-step{min-width:0;padding:8px;border-radius:11px;background:var(--surface);border:1px solid var(--line-soft);display:flex;align-items:center;gap:6px;color:var(--faint)}.web-search-step span{width:8px;height:8px;border-radius:999px;background:var(--line)}.web-search-step b{font-size:9px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.web-search-step.active{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 18%,var(--line));background:color-mix(in srgb,var(--surface) 92%,var(--ink) 2%)}.web-search-step.active span{background:var(--ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 7%,transparent);animation:webDotPulse 1.15s ease-in-out infinite}.web-search-skeletons{display:grid;gap:7px;margin-top:11px}.web-search-skeleton{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;padding:9px;border-radius:12px;background:var(--surface);border:1px solid var(--line-soft);animation:webResultLift 1.8s ease-in-out infinite}.web-search-skeleton>span{width:34px;height:34px;border-radius:10px;background:linear-gradient(90deg,var(--surface-3),var(--surface),var(--surface-3));background-size:200% 100%;animation:webShimmer 1.1s linear infinite}.web-search-skeleton div{display:grid;gap:6px}.web-search-skeleton i{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--surface-3),var(--surface),var(--surface-3));background-size:200% 100%;animation:webShimmer 1.1s linear infinite}.web-search-skeleton i:last-child{width:72%}
.web-sources{margin-top:12px;border:1px solid color-mix(in srgb,var(--ink) 9%,var(--line));border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,transparent),color-mix(in srgb,var(--surface-2) 94%,transparent));overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.06)}.web-sources summary{padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;color:var(--muted)}.web-sources summary::-webkit-details-marker{display:none}.web-sources-summary{display:flex;align-items:center;gap:10px;min-width:0}.web-sources-summary div{display:flex;flex-direction:column;gap:2px;min-width:0}.web-sources-summary strong{font-size:12px;color:var(--ink);line-height:1.2}.web-sources-summary small{font-size:10px;color:var(--faint);line-height:1.35}.web-sources-meta{display:flex;align-items:center;gap:8px}.web-sources-meta small{min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line-soft);display:grid;place-items:center;font-size:10px;color:var(--muted)}.web-sources-chevron{font-size:14px;color:var(--faint);transition:transform .18s var(--ease-out)}.web-sources[open] .web-sources-chevron{transform:rotate(180deg)}.web-source-globe{width:28px;height:28px;border:1px solid color-mix(in srgb,var(--ink) 10%,var(--line));border-radius:9px;display:grid;place-items:center;background:var(--surface);color:var(--ink)}.web-source-list{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}.web-source-item{display:grid;grid-template-columns:24px 32px minmax(0,1fr) auto;gap:10px;align-items:center;text-decoration:none!important;color:inherit;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line-soft);transition:background .16s,transform .16s,border-color .16s,box-shadow .16s;animation:fadeUp .24s var(--ease-out) both}.web-source-item:hover{background:var(--hover);transform:translateY(-1px);border-color:color-mix(in srgb,var(--ink) 18%,var(--line));box-shadow:0 10px 24px rgba(0,0,0,.07)}.web-source-index{width:24px;height:24px;border-radius:7px;background:var(--surface-2);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--muted)}.web-source-favicon{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:linear-gradient(180deg,var(--surface),var(--surface-2));font-size:12px;font-weight:700;color:var(--ink)}.web-source-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.web-source-copy strong{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.web-source-copy small{font-size:9.5px;color:var(--faint);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.web-source-copy em{font-style:normal;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.web-source-item b{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
@keyframes webSpin{to{transform:rotate(360deg)}}@keyframes webShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes webResultLift{0%,100%{transform:none}50%{transform:translateY(-1px)}}@keyframes webDotPulse{0%,100%{transform:scale(.84);opacity:.55}50%{transform:scale(1.05);opacity:1}}@keyframes webModePulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}

.model-health-summary{display:flex;flex-direction:column;gap:1px}.model-health-summary small{font-size:9px;color:var(--faint)}.model-health{height:22px;padding:0 7px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--faint)}.model-health i{width:6px;height:6px;border-radius:50%;background:var(--faint)}.model-health.yes{color:#27934f;border-color:color-mix(in srgb,#27934f 30%,var(--line));background:color-mix(in srgb,#27934f 8%,transparent)}.model-health.yes i{background:#2fa75b;box-shadow:0 0 0 3px rgba(47,167,91,.11)}.model-health.no{color:#c94444;border-color:color-mix(in srgb,#c94444 30%,var(--line));background:color-mix(in srgb,#c94444 8%,transparent)}.model-health.no i{background:#d64c4c}.model-health.unknown i{background:#8c8f96}.model-row:has(.model-health.no){opacity:.72}.model-row:has(.model-health.no):hover{opacity:1}

.preview-editor-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--surface);overflow:hidden}.preview-editor-layout:has(.element-inspector:not([hidden])){grid-template-columns:minmax(0,1fr) 310px}.preview-editor-layout>.preview-stage{min-width:0;min-height:0}.preview-editor-layout>.element-inspector{min-width:0;min-height:0;height:100%;overflow:auto;border:0;border-left:1px solid var(--line);border-radius:0;margin:0;background:var(--surface);padding:10px;box-shadow:none;animation:inspectorSlide .2s var(--ease-out) both;scrollbar-width:thin}.preview-editor-layout>.element-inspector[hidden]{display:none!important}.inspector-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:5px 3px 11px;border-bottom:1px solid var(--line-soft);margin-bottom:9px}.inspector-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}.inspector-head strong{font-size:12px;line-height:1.25}.inspector-head small{font-size:9.5px;color:var(--faint);line-height:1.4}.ghost-icon{width:28px!important;height:28px!important;padding:0!important;border:1px solid var(--line)!important;border-radius:8px!important;background:var(--surface-2)!important;color:var(--muted)!important;font-size:16px!important;flex:none}.selected-elements-list{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.selected-element-chip{max-width:100%;min-width:0;height:auto!important;min-height:30px!important;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--surface-2)!important;padding:6px 8px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px!important;color:var(--muted)!important}.selected-element-chip span{font-size:9px!important;text-transform:none!important;color:var(--ink)!important;font-weight:650}.selected-element-chip small{font-size:9px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-element-chip b{font-weight:500;color:var(--faint)}
.inspector-card{display:block;border:1px solid var(--line-soft);border-radius:12px;background:var(--surface-2);margin:0 0 8px;overflow:hidden;padding:0}.inspector-card>summary,.inspector-card-title{min-height:40px;padding:9px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;list-style:none;cursor:pointer}.inspector-card>summary::-webkit-details-marker{display:none}.inspector-card>summary span,.inspector-card-title span{font-size:10.5px;font-weight:680;color:var(--ink)}.inspector-card>summary small,.inspector-card-title small{font-size:8.8px;color:var(--faint);text-align:right;line-height:1.35;max-width:155px}.direct-edit-card,.image-edit-card{padding-bottom:10px}.inspector-field{padding:0 10px 8px;display:flex;flex-direction:column;gap:4px}.inspector-field>span{font-size:8.5px;color:var(--faint)}.inspector-field input,.inspector-field textarea,.brand-controls input,.brand-controls select{width:100%;border:1px solid var(--line);background:var(--canvas);border-radius:9px;outline:none;color:var(--ink)}.inspector-field textarea{min-height:60px;max-height:120px;padding:8px 9px;resize:vertical;font-size:10.5px;line-height:1.45}.inspector-field input{height:34px;padding:0 8px}.inspector-field input:focus,.inspector-field textarea:focus,.brand-controls input:focus,.brand-controls select:focus{border-color:color-mix(in srgb,var(--ink) 38%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 5%,transparent)}.inspector-field textarea:disabled{opacity:.5;cursor:not-allowed}.inspector-action-row{padding:0 10px;display:flex;flex-wrap:wrap;gap:5px}.inspector-action-row button,.element-inspector-actions button,.image-edit-actions button,.brand-controls button{height:32px!important;border-radius:8px!important;padding:0 9px!important;font-size:9.5px!important;font-weight:650!important;cursor:pointer}.inspector-action-row .primary,.element-inspector-actions button,.image-edit-actions .primary,.brand-controls button{background:var(--ink)!important;color:var(--inverse)!important}.inspector-action-row .soft{background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--line)!important}.image-edit-actions{padding:0 10px;display:flex;flex-direction:column;gap:7px}.image-edit-actions .grow{padding:0}.element-inspector-actions{padding:0 10px 10px}.ai-edit-card textarea{width:calc(100% - 20px);margin:0 10px 8px;min-height:68px;background:var(--canvas);font-size:10px}.design-mode{border-top:1px solid var(--line-soft)!important;margin:0 0 8px!important;padding:0!important}.design-mode summary{padding:9px 10px!important}.design-controls{padding:0 10px 10px!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.design-controls>button{grid-column:1/-1}.design-check{padding-top:0!important;align-self:end!important}.media-upload{margin:0 10px 9px;height:34px;border:1px dashed var(--line);border-radius:9px;display:grid;place-items:center;background:var(--surface);cursor:pointer;color:var(--muted);font-size:9.5px}.media-upload:hover{background:var(--hover)}.project-media-grid{padding:0 10px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.project-media-item{padding:0!important;height:auto!important;aspect-ratio:1!important;border:1px solid var(--line)!important;border-radius:9px!important;overflow:hidden;position:relative;background:var(--canvas)!important}.project-media-item img{width:100%;height:100%;object-fit:cover}.project-media-item span{position:absolute;left:4px;right:4px;bottom:4px;background:rgba(0,0,0,.62);color:#fff;font-size:7px;padding:2px 4px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-empty{grid-column:1/-1;padding:8px;font-size:9px;color:var(--faint);line-height:1.45}.block-library{padding:0 10px 10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.block-library button{height:34px!important;border-radius:9px!important;background:var(--surface)!important;color:var(--muted)!important;border:1px solid var(--line)!important;font-size:9.5px!important}.block-library button:hover{background:var(--hover)!important;color:var(--ink)!important}.brand-controls{padding:0 10px 10px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.brand-controls label{display:flex;flex-direction:column;gap:4px}.brand-controls label span{font-size:8.5px;color:var(--faint)}.brand-controls input,.brand-controls select{height:34px;padding:0 7px;font-size:9.5px}.brand-controls input[type="color"]{padding:3px}.brand-controls button{grid-column:1/-1}.element-history{padding:0 10px 10px;display:flex;flex-direction:column;gap:5px}.element-history-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:7px;align-items:center;padding:6px;border-radius:8px;background:var(--surface)}.element-history-row>span{width:23px;height:23px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;font-size:9px;color:var(--muted)}.element-history-row div{display:flex;flex-direction:column;min-width:0}.element-history-row strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element-history-row small{font-size:8px;color:var(--faint)}.element-history-empty{padding:8px;color:var(--faint);font-size:9px}.preview-tool-button:disabled{opacity:.35;cursor:not-allowed}.preview-tool-button:disabled:hover{background:var(--surface);color:var(--muted)}

.workspace-run-copy strong,.workspace-run-copy small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}.workspace-action-line span:last-child{overflow-wrap:anywhere}.assistant-body,.assistant-content,.workspace-run,.project-card{min-width:0;max-width:100%}.assistant-content{overflow-wrap:anywhere}.workspace-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card-head{min-width:0}.project-card-title{min-width:0}.project-card-title>span:last-child{min-width:0}.project-card-title strong,.project-card-title small{white-space:normal!important;overflow-wrap:anywhere}
.public-calculator{grid-template-columns:1fr 1fr!important}.wallet-economy-card strong{font-size:16px}.pricing-toolbar{align-items:center}.pricing-x2{display:none!important}

html[data-theme="light"] .preview-editor-layout>.element-inspector{background:#fbfbfc}.preview-editor-layout>.element-inspector{scrollbar-color:var(--line) transparent}.preview-stage iframe [data-neyro-inline-edit="1"]{outline:2px solid #d8b86b!important}
@keyframes inspectorSlide{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

@media(max-width:1180px){.preview-editor-layout:has(.element-inspector:not([hidden])){grid-template-columns:minmax(0,1fr) 280px}.preview-toolbar-extra .preview-tool-button span{display:none}.web-search-toggle{padding:0 10px;min-width:38px}.web-search-toggle span{display:none}.web-search-toggle::before{left:7px}.web-search-toggle svg{margin-left:2px}}
@media(max-width:900px){.preview-editor-layout:has(.element-inspector:not([hidden])){grid-template-columns:1fr}.preview-editor-layout>.element-inspector{position:absolute;z-index:16;right:8px;top:58px;bottom:8px;width:min(330px,calc(100% - 16px));height:auto;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.28)}.public-calculator{grid-template-columns:1fr!important}.model-health{font-size:0;width:22px;padding:0;justify-content:center}.web-search-steps{grid-template-columns:1fr}.web-source-item{grid-template-columns:24px 28px minmax(0,1fr)}.web-source-item b{display:none}}
.project-media-grid.drop-ready{outline:2px dashed color-mix(in srgb,var(--ink) 45%,var(--line));outline-offset:-4px;border-radius:11px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.model-row.unavailable{cursor:not-allowed;opacity:.56}.model-row.unavailable:hover{opacity:.7;background:var(--surface-2)}.model-row.unavailable .model-name{text-decoration:none;color:var(--muted)}

/* v20.1 hotfix: prevent stale/default SVG sizing in internet control */
.web-search-toggle{box-sizing:border-box;flex:none;max-height:38px;overflow:hidden}
.web-search-toggle svg{display:block;flex:none;width:15px!important;height:15px!important;max-width:15px!important;max-height:15px!important;fill:none!important;stroke:currentColor!important}
.web-search-toggle svg circle,.web-search-toggle svg path{fill:none!important;stroke:currentColor!important}

/* Neyro Studio v21 — polished search + visual builder */
.web-search-toggle{padding-right:13px!important;min-width:auto!important;overflow:visible!important}
.web-search-toggle::after{display:none!important;content:none!important;animation:none!important}
.web-search-toggle::before{opacity:.72}
.web-search-toggle[data-mode="on"],.web-search-toggle[data-mode="auto"]{box-shadow:0 6px 18px rgba(0,0,0,.08)!important}
.web-search-toggle[data-mode="on"]::before,.web-search-toggle[data-mode="auto"]::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,#39d77a 26%,transparent),0 0 0 3px color-mix(in srgb,#39d77a 7%,transparent)}
.web-search-toggle[data-mode="off"]{opacity:.62}

.web-source-favicon{position:relative;overflow:hidden}
.web-source-favicon img{position:absolute;inset:5px;width:22px;height:22px;object-fit:contain;border-radius:5px;background:#fff}
.web-source-favicon i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.web-source-item:nth-child(2){animation-delay:.025s}.web-source-item:nth-child(3){animation-delay:.05s}.web-source-item:nth-child(4){animation-delay:.075s}.web-source-item:nth-child(5){animation-delay:.1s}.web-source-item:nth-child(6){animation-delay:.125s}.web-source-item:nth-child(7){animation-delay:.15s}.web-source-item:nth-child(8){animation-delay:.175s}
.web-source-list{max-height:min(620px,65vh);overflow:auto;scrollbar-width:thin}

.edit-mode-button{font-weight:700!important;letter-spacing:-.01em}
.edit-mode-button.active{background:var(--ink)!important;color:var(--inverse)!important;border-color:var(--ink)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent)!important}
.preview-toolbar-extra{flex-wrap:wrap}

.design-mode{overflow:hidden}
.builder-section{padding:10px;border-top:1px solid var(--line-soft)}
.builder-section:first-of-type{border-top:0}
.builder-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.builder-section-head strong{font-size:10px;line-height:1.2;color:var(--ink)}
.builder-section-head small{font-size:8.5px;line-height:1.3;color:var(--faint);text-align:right}
.design-controls{display:grid!important;padding:0!important;margin:0!important;gap:7px!important}
.design-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.design-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.design-controls label{min-width:0}
.design-controls label>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.design-controls select,.design-controls input[type="number"]{height:32px;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--canvas);color:var(--ink);padding:0 7px;font-size:9px;outline:none}
.design-controls select:focus,.design-controls input[type="number"]:focus{border-color:color-mix(in srgb,var(--ink) 36%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 5%,transparent)}
.design-color input[type="color"]{height:32px!important;border-radius:8px!important}
.design-check{align-self:end!important;min-height:32px!important;padding:0 4px!important;display:flex!important;align-items:center!important;gap:6px!important;background:var(--surface);border:1px solid var(--line-soft);border-radius:8px}
.design-check span{font-size:8.5px!important;white-space:normal!important}
.builder-footer{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:10px;border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface) 94%,var(--surface-2))}
.builder-footer button{height:34px;border-radius:9px;background:var(--ink);color:var(--inverse);padding:0 12px;font-size:9.5px;font-weight:700;cursor:pointer;flex:none}
.builder-footer small{font-size:8.5px;color:var(--faint);line-height:1.35;text-align:right}

@media(max-width:1180px){.design-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}.design-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}.web-search-toggle span{display:none}.web-search-toggle{width:38px!important;padding:0!important;justify-content:center}.web-search-toggle::before{left:7px!important}.web-search-toggle svg{margin-left:0!important}}
@media(max-width:900px){.builder-section-head{flex-direction:column}.builder-section-head small{text-align:left}.design-grid-4,.design-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:1181px){.preview-editor-layout:has(.element-inspector:not([hidden])){grid-template-columns:minmax(0,1fr) 360px}}
@media(min-width:901px) and (max-width:1180px){.preview-editor-layout:has(.element-inspector:not([hidden])){grid-template-columns:minmax(0,1fr) 320px}}