*{margin:0;padding:0;box-sizing:border-box;}
/* Green BETA badge — shown platform-wide while in beta */
.beta-badge{display:inline-flex;align-items:center;gap:2px;background:rgba(22,179,87,.12);color:#2fd575;border:1px solid rgba(22,179,87,.35);font-family:var(--font-ui,inherit);font-size:9px;font-weight:700;letter-spacing:1px;line-height:1;padding:3px 8px;border-radius:100px;text-transform:uppercase;vertical-align:middle;white-space:nowrap;user-select:none;}
:root{
  *{margin:0;padding:0;box-sizing:border-box;}
  --bg:#111009;
  --surface:#1c1a14;
  --surface2:#141210;
  --surface3:#242018;
  --border:#2e2a22;
  --border-b:#3a3530;
  --text:#e8e4d8;
  --text-dim:#8a8278;
  --text-bright:#f5f0e5;
  --gold:#b8870a;--gold2:#d4a017;--gold-light:#f0c040;--gold-dark:#7a5c05;
  --gold-grad:linear-gradient(135deg,#7a5c05 0%,#d4a017 35%,#f5d060 55%,#d4a017 75%,#7a5c05 100%);
  --accent:#5b7cf6;--accent-dim:rgba(91,124,246,.14);
  --ct:#2563b8;--cm:#16803a;--cn:#6d28d9;--cmeth:#0891b2;--cc:#c2620a;--cu:#7c6b00;--cr:#c0392b;
  --font-ui:'Space Grotesk',sans-serif;
  --font:'JetBrains Mono',monospace;
  --nw:26px;--nh:11px;--noff:16px;--bh:44px;--brad:5px;--pbh:56px;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:12px;}

.gold-text{background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── TOP NAV ── */
.nav{height:50px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:0;flex-shrink:0;z-index:200;}

/* ── FULLSCREEN BUTTON ── */
.fs-btn{margin-left:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid var(--border-b);background:var(--surface2);color:var(--text-dim);cursor:pointer;transition:color .15s,border-color .15s,background .15s,box-shadow .15s;}
.fs-btn:hover{color:var(--text);border-color:var(--border-b);background:var(--surface3);}
.fs-btn:active{transform:scale(.93);}

/* ── FULLSCREEN MODE ENHANCEMENTS ── */
:fullscreen .sbar{display:none;}
:fullscreen .nav{
  background:rgba(17,16,9,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 24px rgba(0,0,0,.5);
  border-bottom:1px solid rgba(255,255,255,.06);
}
:fullscreen .canvas{
  background-image:
    radial-gradient(circle at 20% 30%,rgba(201,162,39,.08) 0,transparent 55%),
    radial-gradient(circle at 80% 70%,rgba(184,135,10,.06) 0,transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(100,80,0,.03) 0,transparent 70%),
    linear-gradient(rgba(200,196,188,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,196,188,.05) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,22px 22px,22px 22px;
}
:fullscreen .palette{
  border-right:1px solid rgba(201,162,39,.1);
  background:rgba(21,19,13,.97);
}
:fullscreen .f2-cell{
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
:fullscreen .f2-cell.active{
  box-shadow:0 0 0 1px rgba(201,162,39,.35),0 4px 20px rgba(201,162,39,.08);
}

/* Webkit prefix */
:-webkit-full-screen .sbar{display:none;}
:-webkit-full-screen .nav{background:rgba(17,16,9,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 24px rgba(0,0,0,.5);border-bottom:1px solid rgba(255,255,255,.06);}
:-webkit-full-screen .canvas{background-image:linear-gradient(rgba(200,196,188,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,196,188,.04) 1px,transparent 1px);background-size:22px 22px,22px 22px;}
:-webkit-full-screen .palette{border-right:1px solid rgba(255,255,255,.06);background:rgba(21,19,13,.97);}

/* Moz prefix */
:-moz-full-screen .sbar{display:none;}
:-moz-full-screen .nav{background:rgba(17,16,9,.96);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 24px rgba(0,0,0,.5);border-bottom:1px solid rgba(255,255,255,.06);}
.logo-link{display:flex;align-items:center;flex-shrink:0;}
.logo-img{height:40px;width:40px;object-fit:contain;margin-right:10px;border-radius:6px;transition:filter .2s;}
.logo-text{font-size:14px;font-weight:700;letter-spacing:.2em;margin-right:28px;text-transform:uppercase;white-space:nowrap;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--font-ui);}
.tabs{display:flex;gap:6px;flex:1;}
.tab{padding:5px 16px;background:transparent;border:1px solid transparent;color:var(--text-dim);font-family:var(--font-ui);font-size:11px;font-weight:600;cursor:pointer;border-radius:4px;letter-spacing:.06em;transition:all .15s;}
.tab:hover{color:var(--text);background:var(--surface2);border-color:var(--border);}
.tab.active{background:var(--surface3);border:1px solid var(--border-b);border-bottom:2px solid var(--accent);color:var(--text-bright);}
.nav-right{display:flex;gap:8px;margin-left:auto;align-items:center;}
.nbtn{padding:6px 14px;border-radius:4px;font-family:var(--font-ui);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.05em;transition:all .12s;white-space:nowrap;background:transparent;}
.nbtn-ghost{border:1.5px solid var(--border-b);color:var(--text-dim);background:transparent;}
.nbtn-ghost:hover{color:var(--text);background:var(--surface2);}
.nbtn-accent{background:var(--accent);color:#fff;border:none;box-shadow:0 2px 8px rgba(91,124,246,.25);}
.nbtn-accent:hover{box-shadow:0 2px 14px rgba(91,124,246,.4);opacity:.92;}
.nbtn-run{background:var(--accent);color:#fff;border:none;box-shadow:0 2px 8px rgba(91,124,246,.25);}
.nbtn-run:hover{box-shadow:0 2px 14px rgba(91,124,246,.4);opacity:.92;}
.nbtn-transform{background:transparent;border:1.5px solid var(--border-b);}
.nbtn-transform span{color:var(--text-dim);background:none;-webkit-text-fill-color:currentColor;}
.nbtn-transform:hover{background:var(--surface2);border-color:var(--border-b);}

/* ── MAIN ── */
.main{display:flex;flex:1;overflow:hidden;}

/* ── PALETTE ── */
.palette{width:260px;min-width:180px;max-width:380px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;position:relative;}
.palette.drag-over-delete{box-shadow:inset 0 0 0 2px var(--cr);background:rgba(192,57,43,.06);}
.palette-hdr{padding:8px 12px 6px;font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;}
.palette-hdr-gold{color:var(--text-dim);font-weight:800;}
.palette-search{background:var(--surface2);border:1px solid var(--border-b);border-radius:5px;padding:5px 9px;font-family:var(--font-ui);font-size:10px;color:var(--text);outline:none;margin:6px 8px;width:calc(100% - 16px);box-sizing:border-box;}
.palette-search::placeholder{color:var(--text-dim);}
.palette-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,124,246,.15);background:var(--surface3);}
.palette-scroll{overflow-y:auto;flex:1;padding:2px 0 8px;}
.palette-scroll::-webkit-scrollbar{width:3px;}
.palette-scroll::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:2px;}
.f1-palette.drag-over-delete{box-shadow:inset 0 0 0 2px var(--cr);background:rgba(192,57,43,.06);}
.cat-label{padding:8px 10px 3px;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);}
.pal-empty{padding:28px 16px;text-align:center;font-size:11px;line-height:1.7;color:var(--text-dim);}
.pal-empty-sub{display:block;margin-top:8px;font-size:9px;opacity:.7;line-height:1.7;}
/* ── PALETTE BLOCK CARDS ── */
.pb{margin:3px 8px;padding:0 10px;height:36px;border-radius:7px;cursor:grab;display:flex;align-items:center;gap:9px;position:relative;user-select:none;transition:filter .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 7px rgba(0,0,0,.26),0 1px 2px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);}
.pb::after{display:none;}
.pb:hover{filter:brightness(1.14);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.1);}
.pb:active{cursor:grabbing;transform:scale(.97);}
.pb-grip{display:none;}
.pb-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
.pb-info{flex:1;display:flex;flex-direction:column;gap:1px;overflow:hidden;}
.pb-label{font-size:10px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.pb-sub{font-size:7px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pb-cls-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;opacity:.9;box-shadow:0 0 4px currentColor;align-self:flex-start;margin-top:2px;}

/* ── PROTOTYPE CONTROLS ── */
.prototyping-controls{display:flex;gap:10px;flex-wrap:nowrap;align-items:center;}

/* Arrow navigation widget */
.proto-arrow-nav{display:flex;align-items:center;gap:2px;border:1px solid var(--border-b);border-radius:6px;background:var(--surface2);padding:1px 3px;}
.proto-arrow-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:20px;line-height:1;padding:1px 5px;border-radius:4px;transition:color .1s,background .1s;font-family:var(--font-ui);}
.proto-arrow-btn:hover{color:var(--text);background:var(--surface3);}
.proto-arrow-name{font-size:10px;font-weight:700;color:var(--text);min-width:72px;max-width:120px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;}

/* Scissors split tool */
.scissors-tool{cursor:grab;font-size:14px;padding:3px 7px;border-radius:5px;border:1px solid var(--border-b);color:var(--text-dim);background:var(--surface2);user-select:none;transition:color .12s,border-color .12s,background .12s;flex-shrink:0;}
.scissors-tool:hover{color:var(--cr);border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.06);}
.scissors-tool:active{cursor:grabbing;}
.indent-tool{cursor:pointer;font-size:14px;padding:3px 7px;border-radius:5px;border:1px solid var(--border-b);color:var(--text-dim);background:var(--surface2);font-family:var(--font-ui);transition:color .12s,border-color .12s,background .12s;flex-shrink:0;}
.indent-tool:hover{color:var(--text);border-color:var(--border-b);background:var(--surface3);}
.indent-tool:active{opacity:.75;}

/* Split drop indicator */
.f2-split-ind{height:3px;background:var(--cr);margin:3px 0;border-radius:2px;pointer-events:none;position:relative;box-shadow:0 0 8px rgba(192,57,43,.5);}
.f2-split-ind::before{content:'✂';position:absolute;left:calc(50% - 8px);top:50%;transform:translateY(-50%);font-size:12px;color:var(--cr);background:var(--bg);padding:0 3px;line-height:1;}

/* Transform picker radio indicator */
.proto-radio{font-size:14px;color:var(--text-dim);flex-shrink:0;line-height:1;transition:color .1s;}
.proto-radio.selected{color:var(--accent);}
.proto-item.tx-selected{border-color:var(--accent);background:var(--accent-dim);}

/* ── PROTO SWITCHER MODAL ── */
.proto-modal-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;}
.proto-modal{background:var(--surface);border:1px solid var(--border-b);border-radius:12px;width:440px;max-height:540px;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.65);}
.proto-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.proto-modal-title{font-size:13px;font-weight:700;color:var(--text-bright);}
.proto-modal-x{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:4px;}
.proto-modal-x:hover{color:var(--text);background:var(--surface2);}
.proto-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;}
.proto-list::-webkit-scrollbar{width:3px;}
.proto-list::-webkit-scrollbar-thumb{background:var(--border-b);}
.proto-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;transition:border-color .12s,background .12s;position:relative;}
.proto-item:hover{border-color:var(--border-b);background:var(--surface3);}
.proto-item.active{border-color:var(--accent);background:var(--accent-dim);}
.proto-item-name{font-size:12px;font-weight:700;color:var(--text-bright);flex:1;}
.proto-item-meta{font-size:9px;color:var(--text-dim);white-space:nowrap;}
.proto-item-del{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;line-height:1;padding:4px 6px;border-radius:4px;transition:color .1s,background .1s;flex-shrink:0;}
.proto-item-del:hover{color:var(--cr);background:rgba(192,57,43,.08);}
.proto-modal-ftr{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}

/* ── RESIZE HANDLE ── */
.resizer{width:4px;background:var(--border);cursor:col-resize;flex-shrink:0;transition:background .15s;position:relative;z-index:10;}
.resizer:hover,.resizer.active{background:var(--border-b);}

/* ── CANVAS ── */
.canvas-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.canvas-bar{height:38px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0;}
.canvas-bar-label{font-size:9px;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;}
.bar-sep{width:1px;height:14px;background:var(--border);margin:0 4px;}
.block-count{font-size:9px;color:var(--text-dim);background:var(--surface2);padding:2px 7px;border-radius:10px;border:1px solid var(--border);}
.canvas{flex:1;min-height:0;position:relative;overflow-y:auto;background-color:var(--bg);background-image:linear-gradient(rgba(200,196,188,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,196,188,.04) 1px,transparent 1px);background-size:22px 22px,22px 22px;cursor:default;}
.canvas-inner{position:absolute;top:0;left:0;width:100%;height:auto;min-height:0;}
.canvas-inner.canvas-cell-list{position:relative;top:auto;left:auto;width:100%;}
.canvas-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:var(--text-dim);}
.canvas-hint-icon{font-size:40px;margin-bottom:10px;opacity:.18;}
.canvas-hint-txt{font-size:11px;opacity:.3;line-height:1.8;}

/* ── CANVAS BLOCKS (legacy free-canvas, still used for positioning) ── */
.cb{position:absolute;user-select:none;z-index:10;}
.cb.dragging{z-index:900;opacity:.9;}
.cb-body{height:var(--bh);border-radius:var(--brad);padding:0 12px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;min-width:164px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08);cursor:grab;transition:box-shadow .1s;}
.cb-body:hover{box-shadow:0 3px 16px rgba(0,0,0,.22),0 0 0 1.5px rgba(0,0,0,.12);}
.cb-body:active{cursor:grabbing;}
.cb-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.cb-del{width:16px;height:16px;border-radius:50%;background:transparent;border:none;color:rgba(255,255,255,.5);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:color .1s;flex-shrink:0;}
.cb-del:hover{color:rgba(255,255,255,.95);}
.cb-params{display:flex;gap:4px;flex-wrap:nowrap;}
.cb-input{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);border-radius:3px;padding:2px 5px;font-family:var(--font);font-size:10px;color:#fff;width:52px;outline:none;}
.cb-input.wide{width:76px;}
.cb-input::placeholder{color:rgba(255,255,255,.5);}
.cb-input:focus{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.28);}

/* ── F2 CELL-BASED NOTEBOOK CANVAS ── */
.canvas-cell-list{display:flex;flex-direction:column;gap:12px;padding:12px 16px 40px;}
.f2-cell{background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.f2-cell.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(91,124,246,.2);}
.f2-cell-hdr{display:flex;align-items:center;gap:6px;padding:3px 8px;background:var(--surface2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;}
.f2-cell-num{font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;}
.f2-cell-active-dot{color:var(--accent);font-size:10px;line-height:1;}
.f2-run-btn{padding:3px 9px;background:var(--accent);border:none;border-radius:3px;color:#fff;font-family:var(--font-ui);font-size:9px;font-weight:700;cursor:pointer;letter-spacing:.05em;transition:opacity .1s;margin-left:auto;}
.f2-run-btn:hover{opacity:.85;}
.f2-run-btn:disabled{opacity:.45;cursor:default;}
.f2-cell-del{width:18px;height:18px;border-radius:50%;background:transparent;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:color .1s;}
.f2-cell-del:hover{color:var(--cr);}
/* Puzzle nub dimensions */
:root{--pnw:16px;--pnh:4px;--pnoff:10px;}

.f2-cell-blocks{padding:4px 8px 4px;display:flex;flex-direction:column;gap:0;min-height:30px;}
.f2-cell-blocks-empty{font-size:9px;color:var(--text-dim);padding:8px;opacity:.55;font-style:italic;text-align:center;border:1px dashed rgba(255,255,255,.1);border-radius:4px;pointer-events:none;}

/* Flat puzzle-piece block */
.f2-flat-block{
  display:flex;align-items:center;gap:8px;
  padding:0 10px;height:32px;
  border-radius:4px 4px 0 0;
  border-left:3px solid #555;
  background:var(--blk-bg,rgba(255,255,255,.08));
  font-size:10px;font-weight:600;
  cursor:default;position:relative;
  margin-bottom:var(--pnh);
  user-select:none;transition:filter .1s;
}
.f2-flat-block:hover{filter:brightness(1.12);}

/* No pseudo-element connectors — real DOM connectors used instead */
.f2-flat-block::after{display:none;}
.f2-flat-block+.f2-flat-block::before{display:none;}
.f2-block-wrapper.f2-indented{margin-left:32px;position:relative;}
.f2-block-wrapper.f2-indented::before{content:'↳';position:absolute;left:-22px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:14px;font-weight:900;pointer-events:none;line-height:1;}
.f2-block-wrapper.f2-indented2{margin-left:64px;position:relative;}
.f2-block-wrapper.f2-indented2::before{content:'↳↳';position:absolute;left:-46px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:11px;letter-spacing:-2px;font-weight:900;pointer-events:none;line-height:1;}
.f2-fb-space.f2-double-indent{color:var(--text-dim);}
.f2-connector-spacer:hover{background:rgba(255,255,255,.05);}

/* Last block: no connector below */
.f2-flat-block:last-child{border-radius:4px;margin-bottom:0;}
.f2-flat-block:last-child::after{display:none;}
.f2-fb-icon{font-size:17px;flex-shrink:0;width:22px;text-align:center;color:#fff;line-height:1;}
.f2-fb-label{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);flex-shrink:0;font-size:12.5px;font-weight:600;letter-spacing:.1px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;}
.f2-fb-params{display:flex;gap:6px;flex-wrap:nowrap;flex:1;align-items:center;}
.f2-fb-input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:4px 8px;font-family:var(--font);font-size:11px;color:#fff;outline:none;min-width:46px;height:22px;box-sizing:border-box;}
.f2-fb-input::placeholder{color:rgba(255,255,255,.4);}
.f2-fb-input:focus{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.2);}
.f2-fb-del{width:20px;height:20px;border-radius:50%;background:transparent;border:none;color:rgba(255,255,255,.35);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:color .1s;flex-shrink:0;}
.f2-fb-del:hover{color:rgba(255,255,255,.9);}
.f2-fb-sel{width:20px;height:20px;border-radius:50%;background:transparent;border:none;color:rgba(255,255,255,.25);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:color .1s;flex-shrink:0;}
.f2-fb-sel:hover{color:rgba(255,255,255,.7);}
.f2-fb-sel.active{color:var(--accent);font-size:11px;}
.f2-flat-block.f2-selected{box-shadow:0 0 0 1px rgba(91,124,246,.5),inset 0 0 12px rgba(91,124,246,.06);border-left-color:var(--accent) !important;}
.f2-fb-space{width:20px;height:20px;border-radius:50%;background:transparent;border:none;color:rgba(255,255,255,.3);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:color .1s;flex-shrink:0;}
.f2-fb-space:hover{color:rgba(255,255,255,.6);}
.f2-fb-space.active{color:var(--accent);}
.f2-cell-output{padding:8px 10px;border-top:1px solid var(--border);background:var(--surface2);font-family:var(--font);font-size:10px;line-height:1.7;color:var(--text);}
.f2-cell-output.ok{border-left:3px solid var(--cm);}
.f2-cell-output.err{border-left:3px solid var(--cr);}
.f2-out-stdout{color:#16803a;white-space:pre-wrap;word-break:break-all;}
.f2-out-stderr{color:#c0392b;white-space:pre-wrap;}
.f2-out-time{font-size:8px;color:var(--text-dim);margin-top:3px;}

/* ── F2 SUGGEST SECTION (in palette, above search) ── */
#f2-suggest-section{padding:8px 10px;background:var(--surface2);}
.f2-suggest-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.f2-suggest-title{font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
.f2-suggest-dismiss{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;line-height:1;padding:0;}
.f2-suggest-dismiss:hover{color:var(--text);}
.f2-sug-chip{display:flex;align-items:center;gap:9px;padding:0 10px;height:36px;border-radius:7px;border-left:3px solid transparent;cursor:grab;user-select:none;font-weight:600;margin-bottom:4px;transition:filter .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 7px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07);}
.f2-sug-chip:active{cursor:grabbing;}
.f2-sug-chip:hover{filter:brightness(1.14);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.34);}
.f2-sug-chip-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
.f2-sug-chip-info{flex:1;display:flex;flex-direction:column;gap:1px;overflow:hidden;}
.f2-sug-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:10px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.f2-sug-chip-desc{font-size:8.5px;line-height:1.15;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.f2-sug-chip-cat{font-size:7px;opacity:.7;flex-shrink:0;text-transform:uppercase;letter-spacing:.08em;color:#fff;}
.f2-sug-chip-doc{flex-shrink:0;text-decoration:none;font-size:13px;line-height:1;opacity:.62;cursor:pointer;transition:opacity .12s,transform .12s;}
.f2-sug-chip-doc:hover{opacity:1;transform:scale(1.18);}
.f2-sug-chip{height:auto;min-height:36px;padding-top:5px;padding-bottom:5px;}

/* Palette block: docs button + readable description sub-line */
.pb-doc{flex-shrink:0;text-decoration:none;font-size:13px;line-height:1;opacity:.55;cursor:pointer;transition:opacity .12s,transform .12s;align-self:center;background:none;border:none;padding:0;color:inherit;font-family:inherit;}
.pb-doc:hover{opacity:1;transform:scale(1.18);}
.pb{height:auto;min-height:36px;padding-top:5px;padding-bottom:5px;}
.pb-sub{font-size:8.5px;color:rgba(255,255,255,.62);text-transform:none;letter-spacing:0;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Block-library extensions in the palette ── */
.ext-divider{margin-top:14px;color:var(--text-dim);border-top:1px solid rgba(255,255,255,.08);padding-top:10px;}
.ext-pack-hdr{display:flex;align-items:center;gap:7px;margin:4px 8px;padding:6px 9px;border-radius:7px;background:rgba(255,255,255,.04);border-left:3px solid #3a4658;cursor:pointer;user-select:none;transition:background .12s;}
.ext-pack-hdr:hover{background:rgba(255,255,255,.08);}
.ext-pack-caret{font-size:9px;width:10px;color:var(--text-dim);}
.ext-pack-icon{font-size:13px;}
.ext-pack-name{flex:1;font-size:11px;font-weight:700;color:var(--text);}
.ext-pack-count{font-size:8px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.ext-pack-rm{font-size:10px;color:var(--text-dim);padding:0 3px;border-radius:3px;}
.ext-pack-rm:hover{color:#e06a5a;background:rgba(224,106,90,.12);}
.ext-sub-label{font-size:7.5px;opacity:.7;margin-top:6px;}
.ext-more{font-size:8.5px;color:var(--text-dim);font-style:italic;margin:4px 12px 8px;}
.pb-ext .pb-icon{font-style:italic;opacity:.85;}

/* ── Nested block containers ── */
.f2-block-wrapper{position:relative;user-select:none;-webkit-user-select:none;cursor:grab;}
.f2-block-wrapper:active{cursor:grabbing;}
/* ── Sideways-U syntax bracket ────────────────────────── */
.f2-block-children{
  position:relative;
  margin-left:16px;
  padding-left:14px;
  padding-top:3px;
  padding-bottom:10px;
  margin-bottom:4px;
}
/* Left vertical bar of the U */
.f2-block-children::before{
  content:'';
  position:absolute;
  left:0;top:0;
  bottom:10px;
  width:2px;
  background:var(--bracket-color,rgba(255,255,255,.12));
  border-radius:2px 2px 0 0;
}
/* Bottom horizontal closing bar of the U */
.f2-block-children::after{
  content:'';
  position:absolute;
  left:0;bottom:4px;
  width:18px;height:2px;
  background:var(--bracket-color,rgba(255,255,255,.12));
  border-radius:0 2px 2px 0;
}

/* Container block header — no nub, slightly darker to signal it opens a scope */
.f2-flat-block.has-children{
  border-radius:4px 4px 0 0;
  margin-bottom:0;
  border-bottom:2px solid var(--bracket-color,rgba(255,255,255,.08));
}
.f2-flat-block.has-children::after{display:none;} /* no puzzle nub */
.f2-fb-chevron{font-size:8px;color:rgba(255,255,255,.4);flex-shrink:0;cursor:pointer;margin-right:2px;user-select:none;}
.f2-fb-chevron:hover{color:rgba(255,255,255,.8);}
.f2-fb-drag-handle{font-size:16px;color:rgba(255,255,255,.2);flex-shrink:0;cursor:grab;user-select:none;margin-right:4px;line-height:1;}
.f2-fb-drag-handle:hover{color:rgba(255,255,255,.55);}

/* Drag-and-drop states */
.f2-block-wrapper.f2-dragging-fade{opacity:.35;}
.f2-cell-blocks.drag-over{background:var(--accent-dim);outline:2px dashed rgba(91,124,246,.35);outline-offset:-2px;}
.f2-drop-ind{height:3px;border-radius:2px;background:var(--accent);margin:2px 0;box-shadow:0 0 8px rgba(91,124,246,.4);pointer-events:none;}

/* Dynamic block label override */
.f2-flat-block[data-dynamic] .f2-fb-label{
  font-style:italic;
  color:rgba(255,255,255,.7);
  font-size:9px;
}

/* RUN CONTAINER */
.run-cont{position:absolute;z-index:5;}
.run-frame{border:1px solid var(--border-b);border-radius:8px;background:var(--surface2);min-width:200px;min-height:70px;box-shadow:0 2px 12px rgba(0,0,0,.2);}
.run-hdr{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--surface3);border-radius:6px 6px 0 0;border-bottom:1px solid var(--border);}
.run-hdr-title{font-size:10px;font-weight:700;letter-spacing:.1em;flex:1;color:var(--text-dim);}
.run-exec-btn{padding:4px 10px;background:var(--accent);border:none;border-radius:3px;color:#fff;font-family:var(--font-ui);font-size:10px;font-weight:700;cursor:pointer;letter-spacing:.06em;transition:opacity .1s;box-shadow:0 1px 6px rgba(91,124,246,.3);}
.run-exec-btn:hover{opacity:.88;}
.run-body{padding:8px 10px;min-height:46px;position:relative;}
.run-body-hint{font-size:9px;color:rgba(184,135,10,.5);font-style:italic;text-align:center;padding:10px 0;}
.run-del{width:18px;height:18px;border-radius:50%;background:transparent;border:none;color:rgba(184,135,10,.5);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:color .1s;}
.run-del:hover{color:var(--gold);}
.run-cont.run-drag-over .run-frame{border-color:var(--accent);box-shadow:0 0 24px rgba(91,124,246,.25),inset 0 0 16px rgba(91,124,246,.06);}

/* ── SNAP INDICATOR ── */
.snap-line{position:absolute;height:2px;background:var(--accent);pointer-events:none;z-index:999;border-radius:1px;box-shadow:0 0 8px var(--accent);display:none;}

/* ── OUTPUT PANEL ── */
.out{width:270px;min-width:140px;max-width:500px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
.out-hdr{padding:9px 12px;font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;}
.out-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim);flex-shrink:0;}
.out-dot.run{background:var(--accent);animation:pulse 1s infinite;}
.out-dot.ok{background:var(--cm);}
.out-dot.err{background:var(--cr);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
.out-clear{margin-left:auto;background:transparent;border:none;color:var(--text-dim);font-family:var(--font-ui);font-size:9px;cursor:pointer;padding:1px 4px;border-radius:2px;}
.out-clear:hover{color:var(--text);}
.out-scroll{flex:1;overflow-y:auto;padding:10px;font-size:10px;font-family:var(--font);color:var(--text);line-height:1.7;}
.out-scroll::-webkit-scrollbar{width:3px;}
.out-scroll::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:2px;}
.out-entry{margin-bottom:10px;padding:7px 9px;border-radius:4px;border-left:2px solid var(--border);background:var(--surface2);}
.out-entry.ok{border-color:var(--cm);}
.out-entry.err{border-color:var(--cr);}
.out-entry-lbl{font-size:8px;color:var(--text-dim);margin-bottom:3px;text-transform:uppercase;letter-spacing:.1em;}
.out-stdout{color:#16803a;white-space:pre-wrap;word-break:break-all;}
.out-stderr{color:#c0392b;white-space:pre-wrap;}
.out-result{color:var(--text-dim);font-style:italic;}
.out-time{font-size:8px;color:var(--text-dim);margin-top:3px;}
.out-empty{color:var(--text-dim);font-size:10px;text-align:center;margin-top:28px;opacity:.4;line-height:1.8;}
.out-resizer{width:4px;background:var(--border);cursor:col-resize;flex-shrink:0;transition:background .15s;}
.out-resizer:hover{background:var(--border-b);}

/* ── TRANSFORM MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(30,25,10,.55);display:flex;align-items:center;justify-content:center;z-index:500;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s;}
.overlay.open{opacity:1;pointer-events:all;}
.modal{width:660px;max-width:92vw;max-height:82vh;background:var(--surface);border:1px solid var(--border-b);border-radius:8px;display:flex;flex-direction:column;transform:translateY(18px);transition:transform .2s;box-shadow:0 28px 80px rgba(0,0,0,.4);}
.overlay.open .modal{transform:translateY(0);}
.modal-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.modal-title{font-size:12px;font-weight:700;letter-spacing:.06em;flex:1;color:var(--text-bright);}
.modal-tag{font-size:9px;background:var(--accent-dim);border:1px solid rgba(91,124,246,.3);color:var(--accent);padding:2px 8px;border-radius:10px;letter-spacing:.08em;}
.modal-x{background:transparent;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:2px;line-height:1;transition:color .1s;}
.modal-x:hover{color:var(--text);}
.modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column;padding:14px 18px;gap:10px;}
.code-pre{flex:1;background:#1a1916;border:1px solid var(--border);border-radius:6px;padding:14px;overflow:auto;font-size:11px;font-family:var(--font);line-height:1.65;min-height:180px;white-space:pre;color:#e0ddd5;}
.code-pre::-webkit-scrollbar{width:4px;height:4px;}
.code-pre::-webkit-scrollbar-thumb{background:#333;}
.kw{color:#bd93f9;}.fn{color:#50fa7b;}.st{color:#f1fa8c;}.nm{color:#ff79c6;}.cm{color:#526070;font-style:italic;}.im{color:#ff79c6;}.op{color:#8be9fd;}.cn{color:#7ec8e3;}
.modal-ftr{padding:10px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}

/* ── STATUS BAR ── */
.sbar{height:22px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:14px;font-size:9px;color:var(--text-dim);flex-shrink:0;}
.sdot{width:5px;height:5px;border-radius:50%;background:var(--cm);}

#drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.88;display:none;border-radius:5px 5px 0 0;padding:8px 14px;font-size:11px;font-weight:600;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.25);}

/* ══════════════════════════════════════
   F3 SCRIPT EDITOR
══════════════════════════════════════ */
#f3-view{display:none;flex:1;flex-direction:column;overflow:hidden;background:var(--bg);}
#f3-view.active{display:flex;}
#nav-f3-right{display:none;gap:14px;margin-left:auto;align-items:center;}
#nav-f3-right.active{display:flex;}
.f3-toolbar{height:50px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0;}
.f3-toolbar .nbtn{padding:5px 14px;font-size:11px;}
.f3-sep{width:1px;height:16px;background:var(--border);margin:0 2px;}
.f3-kernel-status{font-size:9px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:10px;border:1px solid;display:flex;align-items:center;gap:5px;}
.f3-kernel-status.ready{color:var(--cm);background:rgba(22,128,58,.08);border-color:rgba(22,128,58,.3);}
.f3-kernel-status.running{color:var(--cc);background:rgba(194,98,10,.08);border-color:rgba(194,98,10,.3);}
.f3-kernel-status.error{color:var(--cr);background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.3);}
/* F3 body: notebook + helper panel side by side */
.f3-body{display:flex;flex:1;overflow:hidden;}
.f3-notebook-area{flex:1;overflow-y:auto;padding:24px 28px;}
.f3-notebook-area::-webkit-scrollbar{width:5px;}
.f3-notebook-area::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:3px;}
/* F3 Helper Panel */
.f3-helper-panel{width:340px;min-width:200px;max-width:580px;border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;position:relative;}
.f3-helper-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface2);}
.f3-helper-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
.f3-helper-ctrl{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:3px;transition:color .1s;line-height:1;}
.f3-helper-ctrl:hover{color:var(--text);}
.f3-helper-resize-handle{width:4px;position:absolute;left:0;top:0;bottom:0;cursor:col-resize;z-index:10;background:transparent;transition:background .15s;}
.f3-helper-resize-handle:hover,.f3-helper-resize-handle.active{background:var(--border-b);}
.f3-helper-body{flex:1;overflow-y:auto;padding:8px;}
.f3-helper-body::-webkit-scrollbar{width:3px;}
.f3-helper-body::-webkit-scrollbar-thumb{background:var(--border-b);}
.f3-hfn{border:1px solid var(--border);border-radius:7px;margin-bottom:8px;overflow:hidden;background:var(--surface2);}
.f3-hfn-hdr{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;user-select:none;transition:background .12s;}
.f3-hfn-hdr:hover{background:var(--surface3);}
.f3-hfn-name{font-size:11px;font-weight:700;color:var(--text-bright);flex:1;}
.f3-hfn-cat{font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;}
.f3-hfn-chevron{font-size:9px;color:var(--text-dim);transition:transform .15s;flex-shrink:0;}
.f3-hfn.open .f3-hfn-chevron{transform:rotate(90deg);}
.f3-hfn-code{display:none;border-top:1px solid var(--border);}
.f3-hfn.open .f3-hfn-code{display:block;}
.f3-hfn-pre{font-family:var(--font);font-size:10px;line-height:1.65;color:var(--text);padding:10px 12px;overflow-x:auto;white-space:pre;margin:0;background:var(--surface);}
/* F1 Palette in Browse tab */
.f1-pal-scroll{overflow-y:auto;flex:1;max-height:calc(100vh - 200px);}
.f1-pal-scroll::-webkit-scrollbar{width:3px;}
.f1-pal-scroll::-webkit-scrollbar-thumb{background:var(--border-b);}
.f1-pal-cat-label{font-size:8px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);padding:10px 4px 3px;}
.f1-pal-cat-dropdown{background:var(--surface2);border:1px solid var(--border-b);border-radius:4px;padding:4px 6px;font-family:var(--font-ui);font-size:10px;color:var(--text);outline:none;width:100%;margin-bottom:4px;}
/* F1 Code Modal */
.f1-code-overlay{display:none;position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.7);align-items:center;justify-content:center;}
.f1-code-overlay.open{display:flex;}
.f1-code-modal{background:var(--surface);border:1px solid var(--border-b);border-radius:10px;width:720px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.6);}
.f1-code-modal-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.f1-code-modal-title{font-size:15px;font-weight:700;color:var(--text-bright);font-family:var(--font);}
.f1-code-modal-body{flex:1;overflow:auto;padding:0;}
.f1-code-modal-ftr{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;}
.f3-nb-header{margin-bottom:20px;}
.f3-nb-title{font-size:22px;font-weight:700;color:var(--text-bright);outline:none;padding:4px 6px;border-radius:4px;border:1px solid transparent;transition:border .15s;}
.f3-nb-title:focus{border-color:rgba(91,124,246,.4);background:rgba(91,124,246,.04);}
.f3-nb-meta{font-size:9px;color:var(--text-dim);margin-top:4px;letter-spacing:.08em;text-transform:uppercase;}
.f3-empty{text-align:center;padding:80px 40px;color:var(--text-dim);}
.f3-empty-icon{font-size:48px;margin-bottom:16px;opacity:.25;}
.f3-empty-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px;}
.f3-empty-text{font-size:11px;line-height:1.8;margin-bottom:24px;max-width:400px;margin-left:auto;margin-right:auto;}
.f3-cell{margin-bottom:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;transition:border .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.f3-cell:hover{border-color:var(--border-b);box-shadow:0 4px 16px rgba(0,0,0,.1);}
.f3-cell.f3-executing{border-color:var(--accent);box-shadow:0 4px 20px rgba(91,124,246,.15);}
.f3-cell-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--surface2);border-bottom:1px solid var(--border);}
.f3-cell-label{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--text-dim);}
.f3-cell-actions{display:flex;gap:6px;}
.f3-cell-btn{background:transparent;border:1px solid var(--border);padding:3px 10px;cursor:pointer;border-radius:4px;font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.05em;transition:all .12s;color:var(--text-dim);}
.f3-cell-btn:hover{background:var(--surface3);border-color:var(--border-b);color:var(--text);}
.f3-cell .CodeMirror{height:auto;min-height:240px;font-size:12px;font-family:'JetBrains Mono',monospace;line-height:1.6;background:#1a1916;border-radius:0;}
.f3-cell .CodeMirror-scroll{padding:12px 0;}
.f3-cell .CodeMirror-gutters{background:#141210;border-right:1px solid #2a2620;}
.f3-cell .CodeMirror-linenumber{color:#5a5650;}
.f3-output{border-top:1px solid var(--border);background:var(--surface2);}
.f3-output.hidden{display:none;}
.f3-output-label{padding:6px 14px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);}
.f3-output-content{padding:12px 16px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.7;max-height:320px;overflow-y:auto;color:var(--text);}
.f3-out-stdout{color:var(--cm);white-space:pre-wrap;word-break:break-all;}
.f3-out-stderr{color:var(--cr);white-space:pre-wrap;}
.f3-out-result{color:var(--text-dim);font-style:italic;}
.f3-out-timing{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:9px;color:var(--text-dim);}
/* ── Visualization outputs ─────────────────────────── */
.f3-out-image{margin-top:10px;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.f3-out-image-label{font-size:8px;font-weight:700;color:var(--text-dim);letter-spacing:.06em;
  padding:5px 10px;background:var(--surface2);border-bottom:1px solid var(--border);}
.f3-out-image img{display:block;max-width:100%;border-radius:0 0 4px 4px;}
.f3-img-dl{display:block;width:100%;background:var(--surface2);border:none;border-top:1px solid var(--border);
  color:var(--text-dim);font-size:9px;padding:5px;cursor:pointer;text-align:center;font-family:var(--font-ui);}
.f3-img-dl:hover{background:var(--surface3);color:var(--text);}
.f3-out-df{overflow:hidden;}
.f3-out-df .mp-df{border-collapse:collapse;font-size:10px;font-family:var(--font-mono);
  color:var(--text);width:100%;}
.mp-df th{background:var(--surface3);color:var(--text-dim);padding:4px 8px;
  border:1px solid var(--border);font-weight:600;text-align:left;}
.mp-df td{padding:3px 8px;border:1px solid var(--border);color:var(--text);}
.mp-df tr:nth-child(even) td{background:rgba(255,255,255,.02);}
.mp-df tr:hover td{background:rgba(108,99,255,.08);}
.f3-spin{width:10px;height:10px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:f3spin .6s linear infinite;display:inline-block;margin-right:5px;}
@keyframes f3spin{to{transform:rotate(360deg);}}
.f3-toast{position:fixed;bottom:20px;right:20px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;padding:12px 16px;min-width:280px;transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000;font-size:11px;}
.f3-toast.show{transform:translateY(0);opacity:1;}
.f3-toast.success{border-color:rgba(22,128,58,.3);background:rgba(22,128,58,.04);}
.f3-toast.error{border-color:rgba(192,57,43,.3);background:rgba(192,57,43,.04);}
.f3-toast-title{font-weight:700;color:var(--text);margin-bottom:2px;}
.f3-toast-msg{color:var(--text-dim);}
.f3-cell-editor{position:relative;}
.f3-resize-handle{height:6px;background:var(--surface2);border-top:1px solid var(--border);cursor:ns-resize;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0;}
.f3-resize-handle:hover,.f3-resize-handle.dragging{background:var(--surface3);border-top-color:var(--border-b);}
.f3-resize-handle::after{content:'';width:32px;height:2px;border-radius:2px;background:var(--border-b);}
.f3-resize-handle:hover::after,.f3-resize-handle.dragging::after{background:var(--text-dim);}
.f3-loading{position:fixed;inset:0;background:rgba(240,237,232,.96);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s;}
.f3-loading.show{opacity:1;pointer-events:all;}
.f3-loading-ring{width:44px;height:44px;border:3px solid rgba(91,124,246,.2);border-top-color:var(--accent);border-radius:50%;animation:f3spin .7s linear infinite;}
.f3-loading-txt{margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
.f3-kbd-hint{font-size:9px;color:var(--text-dim);padding:4px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;letter-spacing:.06em;white-space:nowrap;}
.f3-kbd{display:inline-block;padding:1px 5px;background:var(--surface);border:1px solid var(--border-b);border-radius:3px;font-size:9px;font-weight:700;color:var(--text-dim);}

/* ══════════════════════════════════════
   F1 LIBRARY
══════════════════════════════════════ */
#f1-view{display:none;flex:1;flex-direction:row;overflow:hidden;background:var(--bg);}
#f1-view.active{display:flex;}
#nav-f1-right{display:none;gap:14px;margin-left:auto;align-items:center;}
#nav-f1-right.active{display:flex;}
.f1-palette{width:200px;min-width:150px;max-width:280px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
.f1-pal-hdr{padding:10px 12px 8px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;}
.f1-pal-hdr-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--font-ui);}
.f1-pal-search{background:var(--surface2);border:1px solid var(--border-b);border-radius:3px;padding:5px 8px;font-family:var(--font);font-size:10px;color:var(--text);outline:none;margin:6px 10px;width:calc(100% - 20px);}
.f1-pal-search::placeholder{color:var(--text-dim);}
.f1-pal-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,124,246,.12);}
.f1-pal-cats{display:flex;flex-wrap:wrap;gap:3px;padding:0 8px 6px;border-bottom:1px solid var(--border);overflow-x:auto;}
.f1-pal-cats::-webkit-scrollbar{display:none;}
.f1-pal-cat-btn{padding:3px 8px;font-size:9px;font-weight:700;cursor:pointer;border-radius:3px;border:1px solid transparent;color:var(--text-dim);background:transparent;font-family:var(--font-ui);transition:all .12s;white-space:nowrap;}
.f1-pal-cat-btn:hover{background:var(--surface2);border-color:var(--border);color:var(--text);}
.f1-pal-cat-btn.active{background:var(--accent-dim);border-color:rgba(91,124,246,.35);color:var(--accent);}
.f1-pal-scroll{flex:1;overflow-y:auto;padding:6px 8px;}
.f1-pal-scroll::-webkit-scrollbar{width:3px;}
.f1-pal-scroll::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:2px;}
.f1-pal-cat-label{padding:7px 4px 3px;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-family:var(--font-ui);}
.f1-rblock{margin-bottom:4px;padding:8px 10px;border-radius:5px;cursor:grab;border:1px solid var(--border);background:var(--surface);transition:all .12s;position:relative;overflow:hidden;border-left:3px solid var(--f1-blk-col,#888);user-select:none;-webkit-user-select:none;-webkit-user-drag:element;}
.f1-rblock:hover{border-color:var(--border-b);box-shadow:0 2px 8px rgba(0,0,0,.1);transform:translateX(2px);}
.f1-rblock:active{cursor:grabbing;}
.f1-rblock-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.f1-rblock-icon{width:18px;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.f1-rblock-name{font-size:10px;font-weight:700;color:var(--text-bright);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none;-webkit-user-select:none;}
.f1-rblock-cat{font-size:7px;font-weight:700;padding:1px 5px;border-radius:2px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--f1-blk-col,#888);user-select:none;-webkit-user-select:none;}
.f1-rblock-desc{font-size:9px;color:var(--text-dim);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;user-select:none;-webkit-user-select:none;}
.f1-pal-add-btn{margin-left:auto;flex-shrink:0;background:var(--accent-dim);border:1px solid rgba(91,124,246,.3);border-radius:4px;color:var(--accent);font-size:11px;font-weight:700;line-height:1;padding:2px 8px;cursor:pointer;transition:all .12s;letter-spacing:.03em;}
.f1-pal-add-btn:hover{background:rgba(91,124,246,.22);border-color:var(--accent);transform:scale(1.05);}
.f1-pal-add-btn:active{transform:scale(.97);}
.f1-resizer{width:4px;background:var(--border);cursor:col-resize;flex-shrink:0;transition:background .15s;}
.f1-resizer:hover,.f1-resizer.active{background:var(--border-b);}
.f1-ws-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.f1-ws-bar{height:42px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;}
.f1-ws-bar-label{font-size:10px;color:var(--text-dim);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.f1-ws-count{font-size:9px;color:var(--text-dim);background:var(--surface2);padding:2px 8px;border-radius:10px;border:1px solid var(--border);}
.f1-ws-hint{font-size:7px;color:var(--text-dim);opacity:.55;}
.f1-ws-actions{margin-left:auto;display:flex;gap:6px;}
.f1-ws-body{flex:1;overflow-y:auto;padding:20px 24px;background-color:var(--bg);background-image:linear-gradient(rgba(200,196,188,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,196,188,.04) 1px,transparent 1px);background-size:22px 22px,22px 22px;}
.f1-ws-body::-webkit-scrollbar{width:5px;}
.f1-ws-body::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:3px;}
.f1-ws-body.f1-ws-drop-active{outline:2px dashed rgba(91,124,246,.5);outline-offset:-4px;background-color:rgba(91,124,246,.03);}
.f1-ws-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;pointer-events:none;}
.f1-ws-empty-icon{font-size:40px;opacity:.14;margin-bottom:12px;}
.f1-ws-empty-txt{font-size:11px;color:var(--text-dim);opacity:.32;text-align:center;line-height:1.9;}
.f1-wb{border-radius:7px;border:1px solid var(--border);background:var(--surface);overflow:hidden;transition:border .15s,box-shadow .15s;border-left:4px solid var(--f1-wb-col,#888);cursor:grab;-webkit-user-drag:element;user-select:none;-webkit-user-select:none;}
.f1-wb:hover{border-color:var(--border-b);box-shadow:0 3px 14px rgba(0,0,0,.1);}
.f1-wb:active{cursor:grabbing;}
.f1-wb.f1-wb-dragging{opacity:.35;}
.f1-wb.f1-wb-selected{border-color:var(--f1-wb-col,#c9a227);box-shadow:0 0 0 2px color-mix(in srgb,var(--f1-wb-col,#c9a227) 25%,transparent);}
.f1-wb-header{display:flex;align-items:center;padding:9px 11px;gap:8px;background:transparent;}
.f1-wb-grip{font-size:12px;color:var(--border-b);cursor:grab;user-select:none;flex-shrink:0;padding:0 2px;}
.f1-wb-grip:active{cursor:grabbing;}
.f1-wb-icon{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.f1-wb-name{font-size:11px;font-weight:700;color:var(--text-bright);flex:1;}
.f1-wb-cat-pill{font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;white-space:nowrap;color:var(--f1-wb-col,#888);border:1px solid var(--f1-wb-col,#888)44;font-family:var(--font-ui);}
.f1-wb-btns{display:flex;gap:4px;}
.f1-wb-btn{background:transparent;border:1px solid var(--border);border-radius:3px;width:22px;height:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-dim);transition:all .1s;}
.f1-wb-btn:hover{border-color:var(--border-b);color:var(--text);}
.f1-wb-btn.del:hover{border-color:var(--cr);color:var(--cr);}
.f1-wb-body{padding:0 11px 9px 11px;}
.f1-wb-desc{font-size:9px;color:var(--text-dim);line-height:1.5;margin-bottom:6px;}
.f1-wb-tags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px;}
.f1-wb-tag{font-size:8px;padding:1px 5px;border-radius:2px;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);}
.f1-wb-footer{display:flex;align-items:center;gap:8px;font-size:8px;color:var(--text-dim);padding-top:6px;border-top:1px solid var(--border);}
.f1-wb-usage-bar{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.f1-wb-usage-fill{height:100%;border-radius:2px;}
.f1-wb-deps{display:flex;gap:3px;flex-wrap:wrap;}
.f1-wb-dep{font-size:7px;padding:1px 4px;border-radius:2px;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);}
.f1-wb-connector{display:flex;align-items:center;justify-content:center;height:22px;position:relative;}
.f1-wb-connector::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.12));transform:translateX(-50%);}
.f1-wb-connector::after{content:'';font-size:7px;color:var(--text-dim);opacity:.5;position:relative;z-index:1;background:var(--bg);padding:0 4px;}
.f1-reco-panel{width:280px;min-width:180px;max-width:380px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
.f1-rp-header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.f1-rp-header-title{font-family:var(--font-ui);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.f1-rp-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:6px;}
.f1-rp-body.f1-hidden{display:none;}
.f1-rp-section{flex:1;overflow-y:auto;padding:12px;}
/* Keep tab CSS for other uses */
.f1-rp-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.f1-rp-tab{flex:1;padding:10px 0;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:transparent;border:none;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .12s;font-family:var(--font-ui);}
.f1-rp-tab:hover{color:var(--text);}
.f1-rp-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.f1-rp-section::-webkit-scrollbar{width:3px;}
.f1-rp-section::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:2px;}
.f1-rp-section.f1-hidden{display:none;}
/* Right code panel scrollbars */
#f1-code-panel pre::-webkit-scrollbar,#f1-code-panel div::-webkit-scrollbar{width:3px;}
#f1-code-panel pre::-webkit-scrollbar-thumb,#f1-code-panel div::-webkit-scrollbar-thumb{background:var(--border-b);border-radius:2px;}
#f1-cp-content{flex-direction:column;}
/* Make palette search margin correct inside browse body */
#f1-rp-browse .palette-search{margin:0;width:100%;}
.f1-rp-field{margin-bottom:10px;}
.f1-rp-label{display:block;font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px;}
.f1-rp-input,.f1-rp-textarea,.f1-rp-select{width:100%;background:var(--surface2);border:1px solid var(--border-b);border-radius:4px;padding:6px 9px;font-family:var(--font);font-size:10px;color:var(--text);outline:none;transition:border .12s;box-sizing:border-box;}
.f1-rp-textarea{resize:vertical;min-height:58px;line-height:1.5;}
.f1-rp-input:focus,.f1-rp-textarea:focus,.f1-rp-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,124,246,.12);}
.f1-rp-input::placeholder,.f1-rp-textarea::placeholder{color:var(--text-dim);}
.f1-rp-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a7570'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}
.f1-rp-tags-wrap{display:flex;flex-wrap:wrap;gap:4px;background:var(--surface2);border:1px solid var(--border-b);border-radius:4px;padding:5px 7px;min-height:36px;cursor:text;transition:border .12s;}
.f1-rp-tags-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(91,124,246,.12);}
.f1-tag{display:inline-flex;align-items:center;gap:3px;background:var(--accent-dim);border:1px solid rgba(91,124,246,.3);border-radius:3px;padding:2px 6px;font-size:9px;font-weight:700;color:var(--accent);white-space:nowrap;}
.f1-tag-del{cursor:pointer;opacity:.6;font-size:11px;line-height:1;}
.f1-tag-del:hover{opacity:1;}
.f1-tag-field{border:none;outline:none;background:transparent;font-family:var(--font-ui);font-size:10px;color:var(--text);min-width:50px;flex:1;}
.f1-rp-get-btn{width:100%;padding:9px;border-radius:4px;font-family:var(--font-ui);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.06em;background:var(--accent);color:#fff;border:none;box-shadow:0 2px 10px rgba(91,124,246,.3);transition:all .15s;margin-top:8px;}
.f1-rp-get-btn:hover{opacity:.9;box-shadow:0 2px 18px rgba(91,124,246,.45);}
.f1-rp-divider{height:1px;background:var(--border);margin:10px 0;}
.f1-rp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
.f1-rp-stat{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:7px 6px;text-align:center;}
.f1-rp-stat-val{font-size:14px;font-weight:700;color:var(--accent);}
.f1-rp-stat-lbl{font-size:7px;color:var(--text-dim);margin-top:1px;letter-spacing:.05em;text-transform:uppercase;}
.f1-reco-card{margin-bottom:8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:border .15s;}
.f1-reco-card:hover{border-color:var(--border-b);}
.f1-reco-card-hdr{display:flex;align-items:center;gap:7px;padding:8px 11px;border-bottom:1px solid var(--border);background:var(--surface3);}
.f1-reco-rank{width:18px;height:18px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0;}
.f1-reco-name{font-size:10px;font-weight:700;color:var(--text-bright);flex:1;}
.f1-reco-score{font-size:11px;font-weight:800;color:var(--accent);}
.f1-reco-body{padding:7px 11px;}
.f1-reco-rbar{height:2px;background:var(--border);border-radius:1px;margin:4px 0;overflow:hidden;}
.f1-reco-rbar-fill{height:100%;border-radius:1px;}
.f1-reco-reasoning{font-size:9px;color:var(--text-dim);line-height:1.4;margin-bottom:5px;}
.f1-reco-chips{display:flex;gap:4px;flex-wrap:wrap;}
.f1-reco-chip{font-size:7px;padding:1px 5px;border-radius:2px;border:1px solid var(--border);color:var(--text-dim);background:var(--surface);}
.f1-reco-chip.ok{color:var(--cm);border-color:rgba(22,128,58,.3);background:rgba(22,128,58,.06);}
.f1-reco-chip.warn{color:var(--cc);border-color:rgba(194,98,10,.3);background:rgba(194,98,10,.06);}
.f1-reco-add-btn{display:block;width:calc(100% - 22px);margin:0 11px 9px;padding:5px;font-family:var(--font-ui);font-size:9px;font-weight:700;cursor:pointer;border-radius:3px;border:1.5px solid rgba(91,124,246,.3);background:transparent;color:var(--accent);transition:all .12s;}
.f1-reco-add-btn:hover{background:var(--accent-dim);border-color:var(--accent);}
.f1-reco-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim);flex-shrink:0;transition:background .3s;}
.f1-reco-dot.running{background:var(--accent);animation:pulse 1s infinite;}
.f1-reco-dot.done{background:var(--cm);}
.f1-detail-overlay{position:fixed;inset:0;background:rgba(30,25,10,.55);display:flex;align-items:center;justify-content:center;z-index:500;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s;}
.f1-detail-overlay.open{opacity:1;pointer-events:all;}
.f1-detail-modal{width:600px;max-width:92vw;max-height:82vh;background:var(--surface);border:1px solid var(--border-b);border-radius:8px;display:flex;flex-direction:column;transform:translateY(18px);transition:transform .2s;box-shadow:0 28px 80px rgba(0,0,0,.4);overflow:hidden;}
.f1-detail-overlay.open .f1-detail-modal{transform:translateY(0);}
.f1-detail-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.f1-detail-title{font-size:13px;font-weight:800;flex:1;color:var(--text-bright);}
.f1-detail-body{flex:1;overflow-y:auto;padding:18px;}
.f1-detail-sect-label{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;}
.f1-detail-section{margin-bottom:14px;}
.f1-detail-desc{font-size:11px;color:var(--text);line-height:1.6;}
.f1-detail-chips{display:flex;flex-wrap:wrap;gap:5px;}
.f1-detail-chip{font-size:9px;padding:3px 8px;border-radius:3px;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);}
.f1-detail-chip.cat{background:var(--accent-dim);border-color:rgba(91,124,246,.3);color:var(--accent);}
.f1-detail-ftr{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}
.f1-tx-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px;}
.f1-tx-opt{background:var(--surface2);border:1.5px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;transition:all .15s;text-align:center;}
.f1-tx-opt:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(91,124,246,.12);}
.f1-tx-opt-icon{font-size:26px;margin-bottom:8px;}
.f1-tx-opt-title{font-size:12px;font-weight:700;margin-bottom:5px;color:var(--text-bright);}
.f1-tx-opt-desc{font-size:9px;color:var(--text-dim);line-height:1.5;}
.f1-tx-progress{padding:16px 18px;display:none;}
.f1-tx-prog-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px;}
.f1-tx-prog-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .4s;}
.f1-tx-prog-label{font-size:10px;color:var(--text-dim);text-align:center;}

/* F1 Library Jump Button Styles */
.f1-pal-jump{
  display:flex;
  gap:4px;
  padding:4px 8px;
  background:var(--surface2);
  border-radius:4px;
  margin:4px 8px;
}
.f1-pal-jump-btn{
  background:transparent;
  border:1px solid transparent;
  color:var(--text-dim);
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:700;
  cursor:pointer;
  border-radius:3px;
  padding:3px 8px;
  transition:all .12s;
  white-space:nowrap;
}
.f1-pal-jump-btn:hover{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text);
}
.f1-pal-jump-btn:active{
  transform:scale(0.95);
}

/* ════════════════════════════════════════
   F0 TEMPLATE LIBRARY
═════════════════════════════════════════

/* ══════════════════════════════════════
   F0 TEMPLATE LIBRARY
══════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   F0 — TEMPLATE LIBRARY STYLES
   Append to ML.css or link as a separate stylesheet.
═══════════════════════════════════════════════════════ */

/* ── View shell ── */
#f0-view {
  display: none;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
  background: var(--bg);
}
#f0-view.active { display: flex; }

/* ── Nav right for F0 ── */
#nav-f0-right {
  display: none;
  gap: 14px;
  margin-left: auto;
  align-items: center;
}
#nav-f0-right.active { display: flex; }

/* ─────────────────────────────────────────
   LEFT SIDEBAR — FILTERS
───────────────────────────────────────── */
.f0-sidebar {
  width: 210px;
  min-width: 160px;
  max-width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.f0-sidebar-hdr {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.f0-sidebar-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-ui);
}
.f0-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 20px;
}
.f0-sidebar-body::-webkit-scrollbar { width: 3px; }
.f0-sidebar-body::-webkit-scrollbar-thumb { background: var(--border-b); border-radius: 2px; }

/* Search input */
.f0-search-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border-b);
  border-radius: 3px;
  padding: 5px 8px;
  font-family: var(--font);
  font-size: 10px;
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.f0-search-input::placeholder { color: var(--text-dim); }
.f0-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,124,246,.12); }

/* Filter sections */
.f0-filter-section { margin-bottom: 12px; }
.f0-filter-label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* Pills */
.f0-pill-group { display: flex; flex-wrap: wrap; gap: 4px; }
.f0-pill {
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid transparent;
  color: var(--text-dim);
  background: transparent;
  font-family: var(--font-ui);
  transition: all .12s;
  white-space: nowrap;
}
.f0-pill:hover { background: var(--surface2); border-color: var(--border); color: var(--text); }
.f0-pill.active { background: var(--accent-dim); border-color: rgba(91,124,246,.35); color: var(--accent); }

/* AI Rank */
.f0-rank-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border-b);
  border-radius: 3px;
  padding: 6px 8px;
  font-family: var(--font);
  font-size: 10px;
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 52px;
  line-height: 1.5;
  box-sizing: border-box;
}
.f0-rank-textarea::placeholder { color: var(--text-dim); }
.f0-rank-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,124,246,.12); }
.f0-rank-btn {
  margin-top: 6px;
  width: 100%;
  padding: 7px 0;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .07em;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(91,124,246,.3);
  transition: all .15s;
}
.f0-rank-btn:hover:not(:disabled) { background-position: right; box-shadow: 0 2px 14px rgba(184,135,10,.5); }
.f0-rank-btn:disabled { opacity: .5; cursor: default; }

.f0-sidebar-divider { height: 1px; background: var(--border); margin: 10px 0; }

/* Sidebar stats */
.f0-sidebar-stats {
  display: flex;
  gap: 4px;
  padding: 0;
}
.f0-stat {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 4px;
  text-align: center;
}
.f0-stat-val {
  font-size: 13px;
  font-weight: 700;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.f0-stat-lbl {
  font-size: 7px;
  color: var(--text-dim);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ─────────────────────────────────────────
   CENTER — GRID
───────────────────────────────────────── */
.f0-grid-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.f0-grid-bar {
  height: 38px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  flex-shrink: 0;
}
.f0-grid-bar-label {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.f0-grid-area {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 25% 35%, rgba(201,162,39,.05) 0, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(184,135,10,.04) 0, transparent 45%),
    linear-gradient(rgba(200,196,188,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,196,188,.055) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px;
}
.f0-grid-area::-webkit-scrollbar { width: 5px; }
.f0-grid-area::-webkit-scrollbar-thumb { background: var(--border-b); border-radius: 3px; }

.f0-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.f0-empty-grid {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
}

/* ── Template Card ── */
.f0-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 11px 13px;
  cursor: pointer;
  transition: border .13s, box-shadow .13s, transform .1s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}
.f0-card:hover {
  border-color: var(--border-b);
  box-shadow: 0 3px 14px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.f0-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(91,124,246,.18), 0 4px 18px rgba(0,0,0,.12);
  background: linear-gradient(135deg, var(--accent-dim), var(--surface));
}
.f0-card-top {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  flex-wrap: wrap;
}
.f0-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-bright);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f0-diff-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.f0-score-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent-dim);
  border: 1px solid rgba(91,124,246,.35);
  color: var(--accent);
  flex-shrink: 0;
}
.f0-browse-more-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.f0-browse-more-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10px;
  font-family: var(--font);
  padding: 6px 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.f0-browse-more-btn:hover { border-color: var(--gold); color: var(--gold); }
.f0-browse-less-btn { opacity: .6; }
.f0-browse-less-btn:hover { opacity: 1; }
.f0-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.f0-cat-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.f0-fw-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
}
.f0-card-desc {
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
}
.f0-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.f0-card-usage {
  font-size: 8px;
  color: var(--text-dim);
  white-space: nowrap;
}
.f0-card-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.f0-tag {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   RIGHT — DETAIL PANEL
───────────────────────────────────────── */
.f0-detail-panel {
  width: 290px;
  min-width: 220px;
  max-width: 380px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.f0-detail-hdr-bar {
  height: 38px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.f0-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.f0-detail-content {
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding: 14px 14px 10px;
  gap: 10px;
}
.f0-detail-content::-webkit-scrollbar { width: 3px; }
.f0-detail-content::-webkit-scrollbar-thumb { background: var(--border-b); border-radius: 2px; }
.f0-detail-hdr { display: flex; flex-direction: column; gap: 5px; }
.f0-detail-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1.3;
}
.f0-detail-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.f0-detail-desc {
  font-size: 10px;
  color: var(--text);
  line-height: 1.6;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.f0-detail-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.f0-detail-meta-item {
  font-size: 8px;
  color: var(--text-dim);
  padding: 1px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.f0-detail-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px; }
.f0-detail-code-wrap {
  background: #1a1916;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.f0-detail-code-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background: var(--surface3);
  border-bottom: 1px solid var(--border);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
}
.f0-detail-code {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  line-height: 1.65;
  color: #e0ddd5;
  white-space: pre;
  margin: 0;
  background: transparent;
}
.f0-detail-code::-webkit-scrollbar { width: 3px; height: 3px; }
.f0-detail-code::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.f0-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding-top: 4px;
  flex-shrink: 0;
}
.f0-action-btn {
  padding: 7px 10px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .05em;
  transition: all .12s;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-dim);
}
.f0-action-btn:hover {
  background: var(--surface2);
  border-color: var(--border-b);
  color: var(--text);
}
.f0-action-primary {
  grid-column: 1 / -1;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(91,124,246,.3);
}
.f0-action-primary:hover {
  opacity: .9;
  box-shadow: 0 2px 14px rgba(91,124,246,.45);
}

/* ─────────────────────────────────────────
   CODE MODAL (full-screen)
───────────────────────────────────────── */
.f0-code-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,25,10,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.f0-code-overlay.open { opacity: 1; pointer-events: all; }
.f0-code-modal {
  width: 760px;
  max-width: 94vw;
  height: 82vh;
  background: var(--surface);
  border: 1px solid var(--border-b);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(.98);
  transition: transform .2s;
  box-shadow: 0 32px 90px rgba(0,0,0,.4);
  overflow: hidden;
}
.f0-code-overlay.open .f0-code-modal { transform: translateY(0) scale(1); }
.f0-code-modal-hdr {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--surface2);
}
.f0-code-modal-title {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
  color: var(--text-bright);
}
.f0-code-modal-meta {
  display: flex;
  gap: 7px;
  align-items: center;
}
.f0-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color .1s;
}
.f0-modal-close:hover { color: var(--text); }
.f0-code-modal-body {
  flex: 1;
  overflow: auto;
  padding: 0;
  min-height: 0;
}
.f0-code-modal-body::-webkit-scrollbar { width: 5px; height: 5px; }
.f0-code-modal-body::-webkit-scrollbar-thumb { background: #3a3530; border-radius: 3px; }
.f0-code-modal-pre {
  padding: 18px 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #e8e4d8;
  white-space: pre;
  margin: 0;
  background: #141210;
  min-height: 100%;
}
.f0-code-modal-ftr {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.f0-code-modal-ftr-info {
  font-size: 9px;
  color: var(--text-dim);
  flex: 1;
}

/* F1 Function Code Popup */
.f1-func-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.f1-func-popup.open {
  visibility: visible;
  opacity: 1;
}

.f1-func-popup-content {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 80vw;
  max-height: 80vh;
  width: 500px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}

.f1-func-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.f1-func-popup-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.f1-func-popup-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-dim);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f1-func-popup-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.f1-func-popup-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.f1-func-popup-code {
  background: var(--surface);
  border-radius: 4px;
  padding: 12px;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 0;
  border: 1px solid rgba(180,135,10,0.2);
}
/* F1 Popup Styles */
#f1-popup-backdrop{
  position:fixed;
  top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  z-index:1000;
  display:none;
}
#f1-popup-backdrop.hidden{display:none;}
#f1-popup-backdrop.visible{display:block;}

#f1-popup{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:90%;max-width:500px;
  height:80%;max-height:600px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  z-index:1001;
  display:none;
  overflow:hidden;
}
#f1-popup.hidden{display:none;}
#f1-popup.visible{display:block;animation:fadeIn 0.3s ease-out;}

@keyframes fadeIn{
  from{opacity:0;transform:translate(-50%,-48%) scale(0.95);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}}

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════════ */
.adm-panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface2);}
.adm-panel-title{font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--text);letter-spacing:.07em;}
.adm-close-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;line-height:1;padding:2px 6px;border-radius:3px;transition:color .15s;}
.adm-close-btn:hover{color:var(--cr);}
.adm-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface2);}
.adm-tab{flex:1;padding:9px 4px;font-family:var(--font-ui);font-size:9px;font-weight:600;letter-spacing:.05em;color:var(--text-dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s;}
.adm-tab:hover{color:var(--text);}
.adm-tab-active{color:var(--gold)!important;border-bottom-color:var(--gold)!important;}
.adm-panes{flex:1;overflow-y:auto;overflow-x:hidden;}
.adm-pane{padding:16px 18px;}

/* Section header */
.adm-section-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.adm-section-hdr>span:first-child{font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--text);letter-spacing:.05em;}
.adm-hint{font-family:var(--font-ui);font-size:8px;color:var(--text-dim);}
.adm-count{display:inline-flex;align-items:center;justify-content:center;background:var(--surface3);border:1px solid var(--border);border-radius:10px;font-family:var(--font-ui);font-size:8px;font-weight:700;color:var(--text-dim);padding:0 6px;height:16px;margin-left:5px;}
.adm-empty{font-family:var(--font-ui);font-size:9px;color:var(--text-dim);opacity:.5;text-align:center;padding:20px 0;}

/* User rows */
.adm-user-list{display:flex;flex-direction:column;gap:6px;}
.adm-user-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;}
.adm-user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:10px;font-weight:700;color:#fff;flex-shrink:0;position:relative;}
.adm-online-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--surface2);}
.adm-online-dot.online{background:#2ecc71;}
.adm-online-dot.offline{background:#555;}
.adm-user-info{flex:1;min-width:0;}
.adm-user-name{font-family:var(--font-ui);font-size:10px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-user-sub{font-family:var(--font-ui);font-size:8px;color:var(--text-dim);margin-top:1px;}
.adm-you{font-size:8px;font-weight:400;color:var(--text-dim);}
.adm-user-role-col{flex-shrink:0;}
.adm-role-badge{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-ui);font-size:8px;font-weight:700;padding:2px 7px;border-radius:3px;border:1px solid;letter-spacing:.04em;}
.adm-select{background:var(--surface3);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--font-ui);font-size:8px;font-weight:700;padding:3px 6px;cursor:pointer;outline:none;}
.adm-select:focus{border-color:var(--gold);}

/* Mini button */
.adm-mini-btn{font-family:var(--font-ui);font-size:9px;font-weight:600;padding:4px 10px;border-radius:3px;border:1px solid var(--border);background:var(--surface3);color:var(--text-dim);cursor:pointer;transition:all .15s;white-space:nowrap;}
.adm-mini-btn:hover{border-color:var(--border-b);color:var(--text);background:var(--surface2);}
.adm-mini-btn.adm-accent{border-color:rgba(91,124,246,.3);color:var(--accent);background:var(--accent-dim);}
.adm-mini-btn.adm-accent:hover{background:rgba(91,124,246,.22);}
.adm-icon-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:11px;padding:2px 5px;border-radius:3px;line-height:1;transition:color .15s,background .15s;flex-shrink:0;}
.adm-icon-btn:hover{background:var(--surface3);color:var(--text);}
.adm-icon-btn.adm-danger:hover{color:var(--cr);}
.adm-mini-avatar{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-family:var(--font-ui);font-size:7px;font-weight:700;color:#fff;flex-shrink:0;}

/* Prototype assignment table */
.adm-proto-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:4px;}
.adm-proto-table{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:9px;}
.adm-th{padding:6px 8px;font-weight:700;color:var(--text-dim);letter-spacing:.05em;border-bottom:1px solid var(--border);background:var(--surface2);white-space:nowrap;}
.adm-th-user{text-align:left;min-width:120px;}
.adm-th-proto{text-align:center;min-width:40px;}
.adm-td{padding:7px 8px;border-bottom:1px solid var(--border-b);}
.adm-td-user{display:flex;align-items:center;gap:6px;}
.adm-td-name{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}
.adm-td-check{text-align:center;}
.adm-cb{accent-color:var(--gold);cursor:pointer;width:14px;height:14px;}
.adm-proto-row:hover .adm-td{background:rgba(201,162,39,.04);}

/* Folder / Project tree */
.adm-folder-node{margin-bottom:1px;}
.adm-folder-row,.adm-project-row{display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;border-radius:4px;transition:background .12s;}
.adm-folder-row:hover{background:var(--surface2);}
.adm-project-row{background:var(--surface2);margin-bottom:2px;border:1px solid var(--border);border-radius:4px;}
.adm-project-row:hover{border-color:rgba(201,162,39,.3);background:rgba(201,162,39,.04);}
.adm-folder-children{margin-left:14px;border-left:1px solid var(--border-b);padding-left:4px;margin-top:2px;}
.adm-arrow{color:var(--text-dim);font-size:9px;width:10px;flex-shrink:0;}
.adm-folder-icon{font-size:13px;}
.adm-folder-name,.adm-project-name{flex:1;font-family:var(--font-ui);font-size:10px;font-weight:600;color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-row-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s;}
.adm-folder-row:hover .adm-row-actions,
.adm-project-row:hover .adm-row-actions{opacity:1;}
.adm-project-meta{display:flex;align-items:center;gap:6px;margin-left:auto;}
.adm-worker-dots{display:flex;gap:2px;}
.adm-vis-badge{font-family:var(--font-ui);font-size:7px;font-weight:700;padding:2px 5px;border-radius:2px;}
.adm-vis-badge.pub{background:rgba(46,204,113,.1);color:#2ecc71;border:1px solid rgba(46,204,113,.3);}
.adm-vis-badge.prv{background:rgba(127,140,141,.08);color:#7f8c8d;border:1px solid rgba(127,140,141,.3);}
.adm-proj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.adm-project-node.active .adm-project-row{border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.07);}

/* Project detail (expanded) */
.adm-project-detail{padding:10px 12px;background:var(--surface3);border:1px solid var(--border);border-top:none;border-radius:0 0 4px 4px;margin-bottom:4px;}
.adm-detail-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.adm-detail-label{font-family:var(--font-ui);font-size:8px;font-weight:700;color:var(--text-dim);letter-spacing:.05em;flex-shrink:0;min-width:70px;}
.adm-detail-section{margin-top:8px;}
.adm-assign-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.adm-assign-name{flex:1;font-family:var(--font-ui);font-size:9px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-proto-input{width:80px!important;}
.adm-input{background:var(--surface2);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--font-ui);font-size:9px;padding:5px 8px;outline:none;transition:border-color .15s;width:100%;}
.adm-input:focus{border-color:var(--gold);}
.adm-input-sm{font-size:9px;padding:4px 7px;}
.adm-color-input{height:30px;border:1px solid var(--border);background:var(--surface2);border-radius:3px;cursor:pointer;padding:2px;}

/* Roles */
.adm-new-role-form{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:14px;margin-bottom:14px;}
.adm-perm-section-label{font-family:var(--font-ui);font-size:8px;font-weight:700;color:var(--text-dim);letter-spacing:.05em;margin-bottom:6px;}
.adm-perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.adm-perm-label{display:flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:8px;color:var(--text-dim);cursor:pointer;padding:3px 4px;border-radius:2px;transition:background .1s;}
.adm-perm-label:hover{background:var(--surface3);color:var(--text);}
.adm-perm-cb{accent-color:var(--gold);cursor:pointer;width:11px;height:11px;flex-shrink:0;}
.adm-roles-list{display:flex;flex-direction:column;gap:8px;}
.adm-role-card{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:10px 12px;}
.adm-role-card-hdr{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.adm-role-chip{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-ui);font-size:9px;font-weight:700;padding:3px 9px;border-radius:3px;border:1px solid;letter-spacing:.04em;}
.adm-role-level-badge{font-family:var(--font-ui);font-size:7px;font-weight:700;color:var(--text-dim);background:var(--surface3);padding:2px 6px;border-radius:10px;border:1px solid var(--border);}
.adm-builtin-tag{font-family:var(--font-ui);font-size:7px;color:var(--text-dim);opacity:.5;margin-left:auto;}
.adm-custom-tag{font-family:var(--font-ui);font-size:7px;color:var(--gold);margin-left:auto;}
.adm-role-perms{font-family:var(--font-ui);font-size:8px;color:var(--text-dim);line-height:1.6;}

/* ══════════════════════════════════════════════════════════════
   FOLDER PANEL
══════════════════════════════════════════════════════════════ */
.fl-panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface2);}
.fl-panel-title{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--text);}
.fl-panel-actions{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface2);}
.fl-panel-body{flex:1;overflow-y:auto;padding:8px 6px;}
.fl-folder-node{margin-bottom:1px;}
.fl-folder-row{display:flex;align-items:center;gap:5px;padding:5px 8px;cursor:pointer;border-radius:3px;transition:background .1s;font-family:var(--font-ui);font-size:9px;color:var(--text);}
.fl-folder-row:hover{background:var(--surface2);}
.fl-project-node{margin-bottom:1px;}
.fl-project-row{display:flex;align-items:center;gap:5px;padding:5px 8px;cursor:pointer;border-radius:3px;transition:background .1s;font-family:var(--font-ui);font-size:9px;}
.fl-project-row:hover{background:var(--surface2);}
.fl-project-node.fl-active .fl-project-row{background:rgba(201,162,39,.08);color:var(--gold);}
.fl-proj-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.fl-name{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fl-meta{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;}
.fl-workers{font-family:var(--font-ui);font-size:7px;color:#2ecc71;font-weight:700;}
.fl-vis{font-size:9px;}
.fl-vis.pub{opacity:.7;}
.fl-vis.prv{opacity:.5;}
.fl-arrow{width:10px;font-size:8px;color:var(--text-dim);flex-shrink:0;}

/* ── LIVE COLLABORATION ── */
.collab-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:8px;font-weight:700;color:#fff;cursor:default;flex-shrink:0;position:relative;transition:transform .15s;}
.collab-avatar:hover{transform:scale(1.15);}
.collab-tab-badge{position:absolute;bottom:-2px;right:-3px;background:var(--surface);border:1px solid var(--border);border-radius:2px;font-size:6px;font-weight:700;color:var(--text-dim);padding:0 2px;line-height:10px;}
.collab-btn-live{background:rgba(46,204,113,.08)!important;border-color:rgba(46,204,113,.4)!important;color:#2ecc71!important;}
.collab-btn-live:hover{background:rgba(46,204,113,.14)!important;box-shadow:0 0 10px rgba(46,204,113,.2)!important;}
.collab-dot-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2ecc71;margin-right:5px;animation:collab-blink 1.6s ease-in-out infinite;}
@keyframes collab-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}
@keyframes collab-blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.collab-cursor{display:inline-block;width:0;height:1.25em;position:relative;border-left:2.5px solid currentColor;z-index:30;}
.collab-cursor-lbl{position:absolute;top:-15px;left:-1.5px;font-family:var(--font-ui);font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px 3px 3px 0;white-space:nowrap;line-height:14px;pointer-events:none;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);}

/* ── Multiplayer mouse pointers (all tabs) ── */
.collab-ptr{position:absolute;top:0;left:0;display:flex;align-items:flex-start;gap:1px;will-change:transform;transition:transform .07s linear,opacity .3s ease;pointer-events:none;}
.collab-ptr svg{flex-shrink:0;}
.collab-ptr-lbl{margin-top:11px;color:#fff;font-family:var(--font-ui);font-size:10px;font-weight:700;padding:2px 7px;border-radius:9px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.45);}
.collab-ptr-drag svg{transform:scale(1.18);}

/* Templates disabled by the owner (collaboration restriction) */
body.collab-templates-off #tab-f0{opacity:.4;pointer-events:none;position:relative;}
body.collab-templates-off #tab-f0::after{content:' 🔒';font-size:9px;}
.collab-ptr-drag .collab-ptr-lbl::after{content:' · dragging';opacity:.9;font-weight:600;}

/* ── Feature Restrictions Panel ─────────────────────────────────────────── */
.adm-feature-list{display:flex;flex-direction:column;gap:6px;}
.adm-feat-row{background:var(--surface2);border:1px solid var(--border);border-radius:5px;overflow:hidden;}
.adm-feat-header{display:flex;align-items:center;gap:7px;padding:7px 10px;cursor:pointer;transition:background .1s;user-select:none;}
.adm-feat-header:hover{background:var(--surface3);}
.adm-feat-name{font-family:var(--font-ui);font-size:9px;font-weight:600;color:var(--text);flex:1;}
.adm-feat-badges{display:flex;gap:3px;flex-wrap:wrap;}
.adm-feat-arrow{font-size:8px;color:var(--text-dim);flex-shrink:0;transition:transform .15s;}
.adm-feat-body{padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);}
.adm-feat-section{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.adm-feat-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.adm-feat-label{font-family:var(--font-ui);font-size:8px;font-weight:700;color:var(--text-dim);letter-spacing:.05em;margin-bottom:5px;}
.adm-feat-btns{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:5px;}
.adm-feat-hint{font-family:var(--font-ui);font-size:8px;color:var(--text-muted);margin-bottom:3px;}
.adm-badge-off{font-family:var(--font-ui);font-size:7px;font-weight:700;padding:1px 5px;border-radius:2px;background:rgba(231,76,60,.12);color:#e74c3c;border:1px solid rgba(231,76,60,.3);white-space:nowrap;}

/* ── Activity Tab ───────────────────────────────────────────────────────── */
.adm-activity-list{display:flex;flex-direction:column;gap:5px;}
.adm-activity-row{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;transition:opacity .15s;}
.adm-activity-offline{opacity:.45;}
.adm-activity-info{flex:1;min-width:0;}
.adm-activity-name{font-family:var(--font-ui);font-size:9px;font-weight:600;color:var(--text);display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:2px;}
.adm-activity-detail{font-family:var(--font-ui);font-size:8px;color:var(--text-dim);}

/* ── No-access projects in folder panel ─────────────────────────────────── */
.fl-project-node.fl-no-access .fl-project-row{cursor:default;opacity:.5;}
.fl-project-node.fl-no-access .fl-project-row:hover{background:transparent;}

/* ── User-owned template card delete button & badge ─────────────────────── */
.f0-card-delete-btn{position:absolute;top:6px;right:6px;background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.3);color:#e74c3c;border-radius:3px;font-size:9px;line-height:1;padding:2px 5px;cursor:pointer;opacity:0;transition:opacity .15s;}
.f0-card:hover .f0-card-delete-btn{opacity:1;}
.f0-card{position:relative;}
.f0-owned-badge{font-family:var(--font-ui);font-size:7px;font-weight:700;padding:1px 5px;border-radius:2px;background:rgba(212,175,55,.12);color:var(--gold);border:1px solid rgba(212,175,55,.3);white-space:nowrap;}

/* ── F1 palette owned function delete button ─────────────────────────────── */
.f1-pal-del-btn{background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.25);color:#e74c3c;border-radius:3px;font-size:8px;line-height:1;padding:1px 4px;cursor:pointer;opacity:0;transition:opacity .15s;margin-left:3px;flex-shrink:0;}
.f1-rblock:hover .f1-pal-del-btn{opacity:1;}

/* ── Submissions Admin Tab ───────────────────────────────────────────────── */
.adm-sub-section-label{font-family:var(--font-ui);font-size:8px;font-weight:700;color:var(--text-dim);letter-spacing:.07em;margin:8px 0 5px;text-transform:uppercase;}
.adm-sub-card{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:10px 12px;margin-bottom:8px;}
.adm-sub-header{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;}
.adm-sub-title{font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--text);}
.adm-sub-meta{font-family:var(--font-ui);font-size:8px;color:var(--text-dim);}
.adm-sub-code{font-family:var(--font-mono);font-size:8px;color:var(--text-dim);background:var(--surface3);border:1px solid var(--border);border-radius:3px;padding:6px 8px;overflow:hidden;max-height:80px;margin:5px 0;white-space:pre;}
.adm-sub-actions{display:flex;gap:6px;margin-top:7px;}
.adm-mini-btn.adm-danger{background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.3);color:#e74c3c;}
.adm-mini-btn.adm-danger:hover{background:rgba(231,76,60,.2);}

/* ── Remix button on template/function cards ─────────────────────────────── */
.f0-card-remix-btn{position:absolute;top:6px;right:32px;background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.3);color:#6c63ff;border-radius:3px;font-size:9px;line-height:1;padding:2px 5px;cursor:pointer;opacity:0;transition:opacity .15s;}
.f0-card:hover .f0-card-remix-btn{opacity:1;}
.f1-pal-remix-btn{background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);color:#6c63ff;border-radius:3px;font-size:8px;line-height:1;padding:1px 4px;cursor:pointer;opacity:0;transition:opacity .15s;margin-left:3px;flex-shrink:0;}
.f1-rblock:hover .f1-pal-remix-btn{opacity:1;}

/* ── Cursor glow: F1 pipeline workspace, F2 canvas, F3 cells ── */
.f1-ws-body { position: relative; }
.f3-cell    { position: relative; }

.f1-ws-body::before,
.canvas::before,
.f3-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    520px circle at var(--glow-x, -9999px) var(--glow-y, -9999px),
    rgba(91,124,246,.08),
    transparent 65%
  );
  opacity: 0;
  transition: opacity .5s ease;
}
.f3-cell::before {
  background: radial-gradient(
    360px circle at var(--glow-x, -9999px) var(--glow-y, -9999px),
    rgba(91,124,246,.12),
    transparent 65%
  );
}
.f1-ws-body.glow-active::before,
.canvas.glow-active::before,
.f3-cell.glow-active::before { opacity: 1; }

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — Mobile & Tablet
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .nav {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 8px;
  }

  .tabs {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
  }

  .tab {
    flex: 1;
    min-width: 60px;
    font-size: 11px;
    padding: 6px 8px;
  }

  .nav-right {
    flex-wrap: wrap;
    gap: 4px;
  }

  .nbtn {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  #nav-global-tools {
    margin-left: 8px !important;
    padding-left: 8px !important;
    border-left: 1px solid var(--border-b);
  }

  .prototyping-controls {
    gap: 4px;
  }

  .proto-arrow-name {
    font-size: 10px;
  }

  /* Hide less critical buttons on small screens */
  .nbtn:nth-child(n+3) {
    display: none;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }

  .nav {
    padding: 10px 12px;
  }

  .tab {
    font-size: 10px;
    padding: 4px 6px;
    min-width: 50px;
  }

  .tabs {
    gap: 2px;
  }

  .nbtn {
    font-size: 9px !important;
    padding: 3px 6px !important;
  }

  /* Mobile: Show notice about desktop optimization */
  .mobile-notice {
    display: block;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: var(--surface2);
    border: 1px solid var(--gold);
    padding: 12px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-dim);
    z-index: 999;
  }
}

/* ── BLOCK HOVER TOOLTIP ── */
#f2-tip{position:fixed;display:none;z-index:9999;pointer-events:none;max-width:260px;padding:8px 11px;background:#18191f;border:1px solid rgba(255,255,255,.13);border-radius:7px;box-shadow:0 4px 20px rgba(0,0,0,.6);font-family:var(--font-ui,sans-serif);font-size:12px;line-height:1.45;color:#e8e8ee;}
.f2tip-name{font-weight:700;font-size:11px;letter-spacing:.04em;color:#c9a227;margin-bottom:4px;}
.f2tip-desc{color:#ccc;font-size:11.5px;}
.f2tip-params{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;}
.f2tip-param{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:2px 7px;font-size:10px;color:#aaa;font-family:var(--font,monospace);}

/* ── NEXT-BLOCK ADVISOR (Pylance-style inline hint) ── */
.f2-next-hint{display:flex;align-items:center;gap:6px;padding:5px 10px 7px;flex-wrap:wrap;}
.f2nh-label{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:rgba(201,168,76,.5);flex-shrink:0;white-space:nowrap;}
.f2nh-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 6px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font-family:var(--font-ui,sans-serif);font-size:10.5px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;}
.f2nh-chip:hover{background:rgba(201,162,39,.18);border-color:rgba(201,162,39,.55);color:rgba(255,255,255,.9);}
.f2nh-icon{font-size:12px;line-height:1;}