/* ============================================================
   Turbo Python — Studio (v5)
   Script editor (left) · live output panel (right). Light + dark.
   ============================================================ */
:root {
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f3f7; --surface-3:#e8ebf1;
  --border:#e8eaf0; --border-strong:#d8dce6;
  --text:#0b1220; --text-soft:#515c70; --text-mute:#98a0b3;
  --primary:#5b5bf0; --primary-600:#4a47e0; --primary-soft:#eeeffe;
  --accent:#10b3d4; --grad:linear-gradient(135deg,#5b5bf0,#10b3d4);
  --success:#15a05a; --danger:#e0443b; --warn:#cf8709; --ring:rgba(91,91,240,.30);
  --shadow-xs:0 1px 2px rgba(15,23,42,.05); --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow-md:0 10px 30px rgba(15,23,42,.10); --shadow-lg:0 24px 70px rgba(8,12,28,.45);
  --radius:14px; --radius-sm:10px; --ease:cubic-bezier(.16,.84,.44,1);
  --mono:"Geist Mono","SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
[data-theme="dark"] {
  --bg:#0a0d15; --surface:#121826; --surface-2:#19202f; --surface-3:#222b3d;
  --border:#222a3a; --border-strong:#2d3850;
  --text:#e9eefb; --text-soft:#a6b1c7; --text-mute:#6a7693;
  --primary:#8181ff; --primary-600:#7676ff; --primary-soft:#1d2140;
  --accent:#2bd4f2; --grad:linear-gradient(135deg,#8181ff,#2bd4f2);
  --success:#2bbd72; --danger:#ff6258; --warn:#efa83a; --ring:rgba(129,129,255,.40);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --shadow-md:0 12px 34px rgba(0,0,0,.6); --shadow-lg:0 28px 80px rgba(0,0,0,.7);
}
* { box-sizing:border-box; }
html, body { height:100%; }
/* theme switch fades everywhere by default; components with their own transition
   (buttons, tabs, etc.) already include these properties and take over from here.
   CodeMirror is excluded — a transition on its syntax-highlight spans would make
   typing feel laggy, re-coloring every token on every keystroke. */
*, *::before, *::after { transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.CodeMirror, .CodeMirror * { transition:none; }
body { margin:0; font-family:var(--sans); color:var(--text); background:var(--bg); display:flex; flex-direction:column; overflow:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:var(--ring); }

/* ---------- Top bar ---------- */
.topbar { height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:color-mix(in srgb,var(--surface) 82%,transparent); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--border); z-index:30; }
.brand { display:flex; flex-direction:column; gap:2px; line-height:1.16; }
.brand-name { font-weight:600; font-size:15px; letter-spacing:-.03em; color:var(--text); text-decoration:none; }
.brand-name .max { color:var(--text-mute); font-weight:450; margin-left:5px; letter-spacing:-.02em; }
.brand-name:hover { opacity:.85; }
.kernel-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--text-mute); }
.kernel-status .dot { width:7px; height:7px; border-radius:50%; background:var(--text-mute); position:relative; }
.kernel-status.loading { color:var(--warn); } .kernel-status.loading .dot { background:var(--warn); }
.kernel-status.loading .dot::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--warn); opacity:.4; animation:ring 1.1s var(--ease) infinite; }
@keyframes ring { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.7);opacity:0} }
.kernel-status.ready { color:var(--success); } .kernel-status.ready .dot { background:var(--success); }
.kernel-status.busy { color:var(--accent); } .kernel-status.busy .dot { background:var(--accent); animation:pulse .8s infinite; }
.kernel-status.failed { color:var(--danger); cursor:pointer; } .kernel-status.failed .dot { background:var(--danger); }
.kernel-status.failed:hover { text-decoration:underline; }
.CodeMirror-placeholder { color:var(--text-mute) !important; font-style:normal; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.topbar-actions { display:flex; align-items:center; gap:7px; }
.tb-sep { width:1px; height:22px; background:var(--border); margin:0 3px; }

/* ---------- Buttons ---------- */
.btn { font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-soft); cursor:pointer; transition:background .15s var(--ease),border-color .15s,color .15s,transform .06s,box-shadow .15s; }
.btn:hover { background:var(--surface-2); color:var(--text); }
.btn:active { transform:translateY(1px) scale(.99); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-ghost:hover { background:var(--surface-2); }
.btn-primary { background:var(--primary); border-color:transparent; color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--primary-600); color:#fff; box-shadow:var(--shadow-md); }
.btn-primary.running .run-ico { animation:spin .85s linear infinite; transform-origin:center; }
@keyframes spin { to { transform:rotate(360deg); } }
.btn kbd { font-size:10px; font-weight:700; background:rgba(255,255,255,.2); padding:1px 5px; border-radius:5px; }
.cmd-trigger { color:var(--text-mute); }
.cmd-trigger .kbd-combo { font-size:10px; font-weight:700; color:var(--text-mute); background:var(--surface-2); border:1px solid var(--border); padding:2px 6px; border-radius:6px; }
.icon-btn { width:32px; height:32px; display:grid; place-items:center; border:none; background:transparent; color:var(--text-mute); font-size:16px; border-radius:9px; cursor:pointer; transition:background .15s,color .15s,transform .06s; }
.icon-btn:hover { background:var(--surface-2); color:var(--text); }
.icon-btn:active { transform:scale(.92); }
.theme-toggle { position:relative; overflow:hidden; }
.theme-toggle svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(0deg) scale(1); opacity:1; transition:transform .3s var(--ease), opacity .2s ease; }
.theme-toggle .ico-moon { opacity:0; transform:translate(-50%,-50%) rotate(-90deg) scale(.5); }
[data-theme="dark"] .theme-toggle .ico-sun { opacity:0; transform:translate(-50%,-50%) rotate(90deg) scale(.5); }
[data-theme="dark"] .theme-toggle .ico-moon { opacity:1; transform:translate(-50%,-50%) rotate(0deg) scale(1); }

/* ---------- Studio split ---------- */
.studio { flex:1 1 auto; min-height:0; display:flex; }
.editor-pane { flex:0 0 46%; min-width:0; display:flex; flex-direction:column; background:var(--surface); }
.output-pane { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--border); }

/* Sidebar: file browser */
.sidebar { flex:0 0 232px; min-width:0; display:flex; flex-direction:column; background:var(--surface-2); border-right:1px solid var(--border); transition:flex-basis .18s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); overflow:hidden; }
.sidebar.collapsed { flex-basis:0; border-right:none; }
.sb-head { display:flex; align-items:center; justify-content:space-between; height:42px; padding:0 8px 0 14px; border-bottom:1px solid var(--border); flex:0 0 auto; }
.sb-title { font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--text-soft); }
.sb-actions { display:flex; gap:2px; }
.sb-icon { width:28px; height:28px; font-size:14px; }
.sb-body { flex:1; min-height:0; overflow-y:auto; padding:10px 8px 14px; }

.sb-drop { display:flex; flex-direction:column; align-items:center; gap:5px; width:calc(100% - 4px); margin:2px 2px 10px; padding:16px 10px 13px; border:1.5px dashed color-mix(in srgb,var(--primary) 45%,var(--border-strong)); border-radius:12px; background:color-mix(in srgb,var(--primary-soft) 55%,transparent); color:var(--primary); font-family:var(--sans); cursor:pointer; text-align:center; transition:background .15s,border-color .15s,transform .08s,box-shadow .15s; }
.sb-drop:hover { background:var(--primary-soft); border-color:var(--primary); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.sb-drop:active { transform:translateY(0); }
.sb-drop svg { opacity:.9; }
.sbd-title { font-size:12.5px; font-weight:600; }
.sbd-sub { font-size:10.5px; color:var(--text-mute); line-height:1.5; }

.sb-sec { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-mute); padding:8px 8px 6px; display:flex; align-items:center; gap:6px; }
.sb-count { font-weight:600; color:var(--text-mute); background:var(--surface-3); border-radius:999px; padding:0 7px; font-size:10px; }
.sb-count:empty { display:none; }
.sb-list { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:1px; }
.sb-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:12.5px; color:var(--text-soft); border:1px solid transparent; transition:background .1s,color .1s; }
.sb-item:hover { background:var(--surface); color:var(--text); }
.sb-item.active { background:var(--surface); color:var(--text); font-weight:600; border-color:var(--border); box-shadow:var(--shadow-xs); }
.sb-item.active .sb-name { color:var(--primary); }
.sb-item.sb-data { cursor:default; }
.sb-badge { flex:0 0 auto; min-width:30px; text-align:center; font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.04em; padding:2.5px 4px; border-radius:5px; color:#fff; }
.sb-badge.py { background:var(--primary); }
.sb-badge.data { background:var(--success); }
.sb-badge.img { background:var(--warn); }
.sb-badge.txt { background:var(--text-mute); }
.sb-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); font-size:11.5px; }
.sb-size { flex:0 0 auto; font-size:10px; color:var(--text-mute); }
.sb-del { flex:0 0 auto; width:18px; height:18px; display:grid; place-items:center; border:none; background:transparent; color:var(--text-mute); font-size:13px; border-radius:5px; cursor:pointer; opacity:0; transition:opacity .1s,color .1s,background .1s; }
.sb-item:hover .sb-del { opacity:1; }
.sb-del:hover { color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }
.sb-none { padding:4px 8px 6px; font-size:11px; color:var(--text-mute); font-style:italic; }
.sb-hint { margin:10px 8px 0; font-size:10.5px; line-height:1.55; color:var(--text-mute); }
.sb-hint code { font-family:var(--mono); font-size:9.5px; background:var(--surface); border:1px solid var(--border); padding:1px 4px; border-radius:4px; color:var(--primary); }

/* Drag & drop overlay */
.drop-overlay { position:fixed; inset:0; z-index:80; background:rgba(8,12,28,.55); display:grid; place-items:center; backdrop-filter:blur(2px); pointer-events:none; }
.drop-overlay[hidden] { display:none; }
.do-card { background:var(--surface); border:2px dashed var(--primary); border-radius:18px; padding:28px 36px; text-align:center; }
.do-title { font-size:16px; font-weight:700; margin-bottom:6px; }
.do-sub { font-size:12.5px; color:var(--text-soft); }
.do-sub code { font-family:var(--mono); background:var(--surface-2); border:1px solid var(--border); padding:1px 5px; border-radius:5px; }

.divider { flex:0 0 auto; width:8px; cursor:col-resize; background:var(--surface-2); border-left:1px solid var(--border); border-right:1px solid var(--border); display:grid; place-items:center; transition:background .25s var(--ease); z-index:5; }
.divider:hover, .divider.dragging { background:var(--primary-soft); }
.divider .grip { width:3px; height:42px; border-radius:99px; background:var(--border-strong); transition:background .12s,height .12s; }
.divider:hover .grip, .divider.dragging .grip { background:var(--primary); height:64px; }

/* Editor pane */
/* Current-file switching lives in the sidebar; this header just labels the active file. */
.ep-head { display:flex; align-items:center; gap:2px; height:42px; padding:0 8px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.ep-head .icon-btn { align-self:center; flex:0 0 auto; }
.tabs { display:flex; align-items:center; flex:1; min-width:0; height:100%; padding:0 4px; }
.cur-file { display:flex; align-items:baseline; gap:9px; min-width:0; }
.cur-name { font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cur-count { flex:0 0 auto; font-size:10.5px; font-weight:600; color:var(--text-mute); }

.ep-toolbar { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--surface); border-bottom:1px solid var(--border); }
.ep-toolbar .spacer { flex:1; }
.run-time { font-family:var(--mono); font-size:11.5px; color:var(--text-mute); }

.editor-host { flex:1; min-height:0; overflow:hidden; background:var(--surface); }
.CodeMirror { height:100% !important; background:var(--surface) !important; font-family:var(--mono); font-size:13.5px; line-height:1.6; color:var(--text); }
.CodeMirror-gutters { background:var(--surface) !important; border-right:1px solid var(--border) !important; }
.CodeMirror-linenumber { color:var(--text-mute); }
.CodeMirror.cm-readonly { background:color-mix(in srgb, var(--surface-2) 45%, var(--surface)) !important; }
.CodeMirror.cm-readonly .CodeMirror-gutters { background:color-mix(in srgb, var(--surface-2) 45%, var(--surface)) !important; }
.CodeMirror.cm-readonly .CodeMirror-cursor { display:none; }
.CodeMirror.cm-readonly .CodeMirror-lines { cursor:not-allowed; }
.CodeMirror-cursor { border-left-color:var(--text) !important; }
/* wrap long lines so the editor never scrolls / slides sideways */
.CodeMirror-line, .CodeMirror-line-like { word-break:break-word; }
.editor-host .CodeMirror-hscrollbar { display:none !important; }

/* Output pane */
.op-tabs { display:flex; align-items:center; gap:2px; padding:7px 10px 0; background:var(--surface-2); border-bottom:1px solid var(--border); }
.op-tabs .spacer { flex:1; }
.op-summary { font-family:var(--mono); font-size:11px; color:var(--text-mute); padding-right:6px; padding-bottom:6px; }
.otab { font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--text-mute); padding:9px 14px; border:none; background:transparent; cursor:pointer; border-radius:8px 8px 0 0; border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:7px; transition:color .15s,border-color .15s,background .15s; }
.otab:hover { color:var(--text-soft); background:var(--surface); }
.otab.active { color:var(--primary); border-bottom-color:var(--primary); background:var(--surface); }
.otab.flash { color:var(--primary); animation:tabFlash 1.3s var(--ease); }
@keyframes tabFlash { 0%,100%{background:transparent} 30%,55%{background:var(--primary-soft)} }
.badge { background:var(--primary); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; min-width:16px; text-align:center; }

.op-body { flex:1; min-height:0; position:relative; }
.op-content { display:none; position:absolute; inset:0; overflow:auto; background:var(--surface); }
.op-content.active { display:block; }
.op-empty { color:var(--text-mute); font-size:13px; padding:40px 24px; text-align:center; line-height:1.7; }
.op-empty[hidden] { display:none; }
.op-empty-ico { font-size:30px; margin-bottom:10px; opacity:.85; }
.op-empty code { font-family:var(--mono); font-size:11px; background:var(--surface-2); border:1px solid var(--border); padding:1px 5px; border-radius:5px; color:var(--primary); }
.op-empty.onb { max-width:400px; margin:0 auto; text-align:left; padding-top:52px; }
.onb-title { font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.02em; margin-bottom:16px; text-align:center; }
.onb-steps { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:11px; }
.onb-steps li { display:flex; align-items:flex-start; gap:11px; font-size:13px; color:var(--text-soft); line-height:1.5; }
.onb-steps b { color:var(--text); font-weight:600; }
.onb-n { flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%; background:var(--primary-soft); display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--primary); }
.onb-hint { text-align:center; font-size:11.5px; color:var(--text-mute); border-top:1px solid var(--border); padding-top:14px; }
.onb kbd { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--border-strong); border-bottom-width:2px; padding:2px 6px; border-radius:5px; }

.op-stream { margin:0; padding:14px 16px; font-family:var(--mono); font-size:12.5px; line-height:1.62; color:var(--text); white-space:pre; }
.op-stream .c-err { color:var(--danger); } .op-stream .c-sys { color:var(--text-mute); } .op-stream .c-ok { color:var(--success); }

.plots-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; padding:16px; align-content:start; }
.plots-grid[hidden] { display:none; }
.plot-card { background:var(--surface); border:1px solid var(--border-strong); border-radius:13px; overflow:hidden; box-shadow:var(--shadow-xs); transition:box-shadow .15s linear,border-color .15s linear,background-color .25s var(--ease); display:flex; flex-direction:column; animation:cardIn .2s var(--ease) both; }
@keyframes cardIn { from{opacity:0} to{opacity:1} }
.plot-card:hover { box-shadow:var(--shadow-sm); border-color:color-mix(in srgb,var(--primary) 28%,var(--border-strong)); }
.plot-thumb { position:relative; cursor:zoom-in; background:#fff; }
.plot-thumb img { display:block; width:100%; height:auto; }
.plot-thumb::after { content:"⤢ Open"; position:absolute; top:10px; right:10px; font-size:11px; font-weight:600; color:#fff; background:rgba(8,12,28,.74); padding:4px 10px; border-radius:999px; opacity:0; transition:opacity .15s; }
.plot-thumb:hover::after { opacity:1; }
.plot-foot { display:flex; align-items:center; gap:8px; padding:9px 12px; border-top:1px solid var(--border); }
.plot-foot .pf-name { flex:1; font-size:12px; font-weight:600; color:var(--text-soft); }
.plot-foot .pf-btn { font-size:11.5px; font-weight:600; color:var(--primary); background:var(--primary-soft); border:none; padding:5px 10px; border-radius:7px; cursor:pointer; }
.plot-foot .pf-btn:hover { background:color-mix(in srgb,var(--primary-soft) 70%,var(--primary) 18%); }

.files-list { padding:16px; display:flex; flex-direction:column; gap:9px; }
.files-list[hidden] { display:none; }
.file-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--border-strong); border-radius:11px; background:var(--surface); }
.file-row .fr-name { flex:1; font-family:var(--mono); font-size:13px; }
.file-row .fr-size { font-size:11px; color:var(--text-mute); }
.file-row .fr-dl { font-size:11.5px; font-weight:600; color:var(--primary); background:var(--primary-soft); border:none; padding:6px 12px; border-radius:8px; cursor:pointer; }
.file-row .fr-dl:hover { background:color-mix(in srgb,var(--primary-soft) 70%,var(--primary) 18%); }

/* ---------- Data list ---------- */
.data-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; }
.data-list li { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-soft); padding:9px 11px; border-radius:9px; background:var(--surface-2); }
.data-list li .fi-name { flex:1; font-family:var(--mono); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-list li .fi-del { font-size:15px; color:var(--text-mute); cursor:pointer; }
.data-list li .fi-del:hover { color:var(--danger); }
.data-list .empty, .data-list li.empty { background:transparent; color:var(--text-mute); font-size:12px; }
.fi-size { font-size:10.5px; color:var(--text-mute); }

/* ---------- Command palette ---------- */
.cmdk { position:fixed; inset:0; z-index:95; background:rgba(8,12,28,.42); display:flex; justify-content:center; align-items:flex-start; padding-top:13vh; backdrop-filter:blur(3px); animation:fade .12s ease; }
.cmdk[hidden] { display:none; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.cmdk-card { width:560px; max-width:92vw; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; animation:popIn .16s var(--ease); }
@keyframes popIn { from{opacity:0;transform:translateY(-10px) scale(.98)} to{opacity:1;transform:none} }
.cmdk-input-wrap { display:flex; align-items:center; gap:11px; padding:15px 17px; border-bottom:1px solid var(--border); }
.cmdk-search { color:var(--text-mute); flex:0 0 auto; }
.cmdk-input-wrap input { flex:1; border:none; outline:none; background:transparent; font-family:var(--sans); font-size:15px; color:var(--text); }
.cmdk-input-wrap kbd { font-size:10px; font-weight:700; color:var(--text-mute); background:var(--surface-2); border:1px solid var(--border); padding:2px 7px; border-radius:6px; }
.cmdk-list { list-style:none; margin:0; padding:8px; max-height:52vh; overflow-y:auto; }
.cmdk-item { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; cursor:pointer; }
.cmdk-item .ck-ico { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; background:var(--surface-2); font-size:15px; }
.cmdk-item .ck-name { flex:1; font-size:13.5px; font-weight:600; color:var(--text); }
.cmdk-item .ck-hint { font-size:11px; color:var(--text-mute); font-family:var(--mono); }
.cmdk-item.sel { background:var(--primary-soft); } .cmdk-item.sel .ck-ico { background:var(--primary); color:#fff; }
.cmdk-empty { padding:26px; text-align:center; color:var(--text-mute); font-size:13px; }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:90; background:rgba(6,9,20,.93); display:flex; flex-direction:column; animation:fade .15s ease; }
.lightbox[hidden] { display:none; }
.lb-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; color:#dbe3f0; flex:0 0 auto; }
.lb-title { font-size:13px; font-weight:600; color:#c2cde0; font-family:var(--mono); }
.lb-tools { display:flex; align-items:center; gap:6px; }
.lb-btn { width:36px; height:36px; display:grid; place-items:center; border:none; border-radius:9px; background:rgba(255,255,255,.08); color:#e2e8f0; font-size:18px; font-family:var(--sans); cursor:pointer; transition:background .12s,transform .06s; }
.lb-btn:hover { background:rgba(255,255,255,.2); } .lb-btn:active { transform:scale(.9); }
#lbFit { font-size:12.5px; font-weight:600; letter-spacing:-.01em; }
.lb-count, .lb-zoom { font-size:12px; color:#c2cde0; min-width:48px; text-align:center; font-variant-numeric:tabular-nums; }
.lb-sep { width:1px; height:22px; background:rgba(255,255,255,.18); margin:0 4px; }
.lb-stage { flex:1; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:grab; }
.lb-stage.panning { cursor:grabbing; }
.lb-img { max-width:94%; max-height:94%; background:#fff; border-radius:8px; box-shadow:var(--shadow-lg); transform-origin:center center; transition:transform .08s ease-out; user-select:none; }

/* ---------- Modal ---------- */
.modal { position:fixed; inset:0; background:rgba(8,12,28,.5); display:grid; place-items:center; z-index:92; backdrop-filter:blur(3px); animation:fade .12s ease; }
.modal[hidden] { display:none; }
.modal-card { width:480px; max-width:92vw; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); padding:24px; animation:popIn .16s var(--ease); }
.modal-head { display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { margin:0; font-size:16px; }
.modal-sub { font-size:12.5px; color:var(--text-soft); margin:8px 0 16px; line-height:1.55; }
.modal-sub code { font-family:var(--mono); font-size:11px; background:var(--surface-2); border:1px solid var(--border); padding:1px 5px; border-radius:5px; color:var(--primary); }
.modal-row { display:flex; gap:8px; }
.modal-row input { flex:1; font-family:var(--mono); font-size:13px; padding:10px 13px; border:1px solid var(--border-strong); border-radius:10px; outline:none; background:var(--surface); color:var(--text); }
.modal-row input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
.pkg-log { margin:14px 0 0; max-height:170px; overflow:auto; font-family:var(--mono); font-size:11.5px; color:var(--text-soft); background:var(--surface-2); border-radius:10px; padding:11px 13px; white-space:pre-wrap; }
.pkg-log:empty { display:none; }
.pkg-quick { margin-top:15px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:12px; color:var(--text-mute); }
.chip { font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-soft); cursor:pointer; transition:all .12s; }
.chip:hover { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }

/* ---------- Toast ---------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--surface); font-size:13px; font-weight:600; padding:12px 19px; border-radius:12px; box-shadow:var(--shadow-md); z-index:99; animation:toastIn .22s var(--ease); }
.toast[hidden] { display:none; }
.toast.err { background:var(--danger); color:#fff; } .toast.ok { background:var(--success); color:#fff; }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background:var(--text-mute); }

/* ---------- Mobile view switch (hidden on desktop) ---------- */
.mobile-switch { display:none; }

/* ---------- Shared-link read-only banner ---------- */
.share-banner { display:flex; align-items:center; gap:10px; padding:6px 16px; background:var(--primary-soft); color:var(--primary); font-size:12.5px; border-bottom:1px solid var(--border); }
.share-banner[hidden] { display:none; }
.sb-msg { font-weight:600; }
.sb-expiry { color:var(--text-mute); flex:1; }
.sb-cta-wrap { flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:8px; }
.sb-cta-hint { font-size:11px; color:var(--text-mute); }

.share-status { flex:0 0 auto; font-size:11px; font-weight:600; color:var(--primary); background:var(--primary-soft); border:none; padding:3px 9px; border-radius:999px; cursor:pointer; }
.share-status[hidden] { display:none; }
.share-status.changed { color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent); }

/* controls that don't make sense while viewing someone else's shared link */
.share-view #sbDrop, .share-view #sbNewFile, .share-view #btnNewFile, .share-view #btnOpenScript, .share-view .sb-del { display:none; }

/* ---------- Mobile ---------- */
@media (max-width:760px) {
  .topbar { padding:0 10px; gap:6px; }
  .kernel-status .label { display:none; }
  .cmd-trigger span { display:none; }
  .tb-sep { display:none; }
  /* keep every action reachable: scroll the toolbar horizontally */
  .topbar-actions { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; gap:5px; padding-bottom:2px; }
  .topbar-actions::-webkit-scrollbar { display:none; }
  .btn { padding:8px 11px; flex:0 0 auto; }
  .icon-btn { flex:0 0 auto; }

  /* segmented Editor / Output toggle */
  .mobile-switch { display:flex; gap:6px; padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--border); }
  .mobile-switch button { flex:1; padding:11px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-soft); font-family:var(--sans); font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .mobile-switch button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
  .m-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
  .m-dot[hidden] { display:none; }

  /* stack, show only the active view full-screen */
  .studio { flex-direction:column; }
  .divider { display:none; }
  .sidebar { display:none; }
  .editor-pane, .output-pane { flex:1 1 auto; width:100%; }
  .output-pane { border-left:none; }
  .studio[data-mobile-view="editor"] .output-pane { display:none; }
  .studio[data-mobile-view="output"] .editor-pane { display:none; }

  /* roomier touch targets / readable output */
  .CodeMirror { font-size:14px; }
  .op-stream { font-size:13px; }
  .plots-grid { grid-template-columns:1fr; gap:14px; padding:14px; }
  .modal-card { border-radius:16px; padding:20px; }
  .lb-btn { width:40px; height:40px; }
  .toast { left:12px; right:12px; transform:none; text-align:center; }
  @keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }