*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ══ TOKENS ══ */
:root {
  --cream:#f2f7ef; --ink:#060f00; --ink-soft:#1a2e10; --ink-muted:#507040;
  --accent:#3ea800; --accent-light:#62d100; --accent-faint:#dff5cc; --line:#bde0a0;
  --nav-bg:rgba(242,247,239,0.96); --nav-border:rgba(62,168,0,0.18);
  --bar-bg:#d6eec8; --bar-border:rgba(62,168,0,0.22);
  --banner-bg:#060f00; --banner-line:rgba(62,168,0,0.18);
  --banner-text:#e8f5de; --banner-sub:rgba(232,245,222,0.5);
  --section-alt:#ffffff; --card-bg:#f2f7ef;
  --table-head-bg:#dff5cc; --table-head-txt:#1a2e10;
  --table-grand-bg:#dff5cc; --table-grand-txt:#060f00;
  --hover-glow:rgba(62,168,0,0.09); --grid-color:rgba(62,168,0,0.055);
  --splash-bg:#060f00; --splash-grid:rgba(62,168,0,0.08); --splash-orb:rgba(62,168,0,0.18);
  --splash-txt:#e8f5de; --splash-sub:rgba(232,245,222,0.35); --splash-for:rgba(232,245,222,0.45);
  --splash-line:rgba(62,168,0,0.4); --page-bg:#f8fdf6;
  /* panel ui (dark panel on left/right) */
  --panel-ink:rgba(255,255,255,0.85); --panel-ink-muted:rgba(255,255,255,0.38);
  --panel-input-bg:rgba(255,255,255,0.07); --panel-input-border:rgba(255,255,255,0.12);
  --panel-sep:rgba(255,255,255,0.08); --panel-hover:rgba(255,255,255,0.06);
  --sidebar-w:210px; --rpanel-w:272px;
  --font-title:'Funnel Display','Inter',sans-serif;
  --font-body:'Open Sans',sans-serif;
  --font-mono:'Space Mono',monospace;
  /* ── ANALOG COLOR PALETTE — 7 swatches per theme ── */
  --sw1:#060f00; --sw2:#1a3a08; --sw3:#2d6614; --sw4:#3ea800;
  --sw5:#62d100; --sw6:#a8e870; --sw7:#dff5cc;
}
[data-theme="green-dark"]{
  --cream:#0a1a04;--ink:#e8f5de;--ink-soft:#b8d8a0;--ink-muted:#6a9a50;
  --accent:#3ea800;--accent-light:#62d100;--accent-faint:#1a3a08;--line:#1e4010;
  --nav-bg:rgba(10,26,4,0.96);--nav-border:rgba(62,168,0,0.22);
  --bar-bg:#020801;--bar-border:rgba(62,168,0,0.28);
  --banner-bg:#050e02;--banner-line:rgba(62,168,0,0.15);
  --banner-text:#e8f5de;--banner-sub:rgba(232,245,222,0.5);
  --section-alt:#0f2408;--card-bg:#0a1a04;
  --table-head-bg:#1a3a08;--table-head-txt:#b8d8a0;
  --table-grand-bg:#1a3a08;--table-grand-txt:#b8d8a0;
  --hover-glow:rgba(62,168,0,0.1);--grid-color:rgba(62,168,0,0.06);
  --splash-bg:#050e02;--splash-grid:rgba(62,168,0,0.07);--splash-orb:rgba(62,168,0,0.15);
  --splash-txt:#e8f5de;--splash-sub:rgba(232,245,222,0.3);--splash-for:rgba(232,245,222,0.4);
  --splash-line:rgba(62,168,0,0.35);--page-bg:#0d2008;
  --sw1:#e8f5de;--sw2:#a8e870;--sw3:#62d100;--sw4:#3ea800;
  --sw5:#1e5c08;--sw6:#0f2e04;--sw7:#060f00;
}
[data-theme="blue"]{
  --cream:#eff1f7;--ink:#00040f;--ink-soft:#0d1a3a;--ink-muted:#4060a0;
  --accent:#0046eb;--accent-light:#3a72ff;--accent-faint:#d0dcf8;--line:#b8c8f0;
  --nav-bg:rgba(239,241,247,0.96);--nav-border:rgba(0,70,235,0.18);
  --bar-bg:#c8d4f5;--bar-border:rgba(0,70,235,0.25);
  --banner-bg:#00040f;--banner-line:rgba(0,70,235,0.18);
  --banner-text:#dde8ff;--banner-sub:rgba(221,232,255,0.5);
  --section-alt:#ffffff;--card-bg:#eff1f7;
  --table-head-bg:#d0dcf8;--table-head-txt:#0d1a3a;
  --table-grand-bg:#d0dcf8;--table-grand-txt:#0d1a3a;
  --hover-glow:rgba(0,70,235,0.07);--grid-color:rgba(0,70,235,0.05);
  --splash-bg:#00040f;--splash-grid:rgba(0,70,235,0.07);--splash-orb:rgba(0,70,235,0.15);
  --splash-txt:#dde8ff;--splash-sub:rgba(221,232,255,0.3);--splash-for:rgba(221,232,255,0.4);
  --splash-line:rgba(0,70,235,0.4);--page-bg:#f5f7fe;
  --sw1:#00040f;--sw2:#001880;--sw3:#002ecc;--sw4:#0046eb;
  --sw5:#3a72ff;--sw6:#90b0ff;--sw7:#d0dcf8;
}
[data-theme="blue-dark"]{
  --cream:#020710;--ink:#dde8ff;--ink-soft:#99b0e0;--ink-muted:#5570b0;
  --accent:#3a72ff;--accent-light:#6699ff;--accent-faint:#0a183a;--line:#0e2050;
  --nav-bg:rgba(2,7,16,0.96);--nav-border:rgba(58,114,255,0.22);
  --bar-bg:#000204;--bar-border:rgba(58,114,255,0.3);
  --banner-bg:#010408;--banner-line:rgba(58,114,255,0.15);
  --banner-text:#dde8ff;--banner-sub:rgba(221,232,255,0.5);
  --section-alt:#060e20;--card-bg:#020710;
  --table-head-bg:#0a183a;--table-head-txt:#99b0e0;
  --table-grand-bg:#0a183a;--table-grand-txt:#99b0e0;
  --hover-glow:rgba(58,114,255,0.08);--grid-color:rgba(58,114,255,0.05);
  --splash-bg:#010408;--splash-grid:rgba(58,114,255,0.07);--splash-orb:rgba(58,114,255,0.14);
  --splash-txt:#dde8ff;--splash-sub:rgba(221,232,255,0.28);--splash-for:rgba(221,232,255,0.38);
  --splash-line:rgba(58,114,255,0.38);--page-bg:#060d22;
  --sw1:#dde8ff;--sw2:#90b0ff;--sw3:#6699ff;--sw4:#3a72ff;
  --sw5:#0e2050;--sw6:#060e20;--sw7:#020710;
}
[data-theme="gold"]{
  --cream:#F7F4EF;--ink:#0D0D0D;--ink-soft:#3A3A3A;--ink-muted:#888;
  --accent:#B8963E;--accent-light:#D4AF6A;--accent-faint:#F0E8D0;--line:#E2DDD4;
  --nav-bg:rgba(247,244,239,0.96);--nav-border:rgba(184,150,62,0.18);
  --bar-bg:#e8dfc8;--bar-border:rgba(184,150,62,0.3);
  --banner-bg:#0D0D0D;--banner-line:rgba(184,150,62,0.18);
  --banner-text:#F5EDD8;--banner-sub:rgba(245,237,216,0.5);
  --section-alt:#ffffff;--card-bg:#F7F4EF;
  --table-head-bg:#F0E8D0;--table-head-txt:#3A3A3A;
  --table-grand-bg:#F0E8D0;--table-grand-txt:#3A3A3A;
  --hover-glow:rgba(184,150,62,0.08);--grid-color:rgba(184,150,62,0.06);
  --splash-bg:#0D0D0D;--splash-grid:rgba(184,150,62,0.07);--splash-orb:rgba(184,150,62,0.15);
  --splash-txt:#F5EDD8;--splash-sub:rgba(245,237,216,0.3);--splash-for:rgba(245,237,216,0.42);
  --splash-line:rgba(184,150,62,0.4);--page-bg:#fdfaf4;
  --sw1:#0D0D0D;--sw2:#5c4010;--sw3:#8a6828;--sw4:#B8963E;
  --sw5:#D4AF6A;--sw6:#e8d4a0;--sw7:#F0E8D0;
}
[data-theme="gold-dark"]{
  --cream:#100d06;--ink:#f5eddc;--ink-soft:#d4b882;--ink-muted:#8a7040;
  --accent:#D4AF6A;--accent-light:#e8cc90;--accent-faint:#2a2010;--line:#3a2e18;
  --nav-bg:rgba(16,13,6,0.96);--nav-border:rgba(212,175,106,0.22);
  --bar-bg:#040200;--bar-border:rgba(212,175,106,0.28);
  --banner-bg:#080602;--banner-line:rgba(212,175,106,0.15);
  --banner-text:#f5eddc;--banner-sub:rgba(245,237,220,0.5);
  --section-alt:#1a1508;--card-bg:#100d06;
  --table-head-bg:#2a2010;--table-head-txt:#d4b882;
  --table-grand-bg:#2a2010;--table-grand-txt:#d4b882;
  --hover-glow:rgba(212,175,106,0.08);--grid-color:rgba(212,175,106,0.05);
  --splash-bg:#080602;--splash-grid:rgba(212,175,106,0.07);--splash-orb:rgba(212,175,106,0.14);
  --splash-txt:#f5eddc;--splash-sub:rgba(245,237,220,0.28);--splash-for:rgba(245,237,220,0.38);
  --splash-line:rgba(212,175,106,0.38);--page-bg:#1c1708;
  --sw1:#f5eddc;--sw2:#e8cc90;--sw3:#D4AF6A;--sw4:#B8963E;
  --sw5:#3a2e18;--sw6:#1a1508;--sw7:#100d06;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);overflow-x:hidden;cursor:none;margin:0;transition:background-color .4s,color .4s}
@media(max-width:900px){body{cursor:auto}}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}

/* ── CURSOR ── */
.cursor{position:fixed;width:10px;height:10px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s}
.cursor-ring{position:fixed;width:36px;height:36px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .18s;opacity:.5}
@media(max-width:900px){.cursor,.cursor-ring{display:none}}

/* ── SPLASH ── */
#splash{position:fixed;inset:0;z-index:10000;background:var(--splash-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);cursor:pointer}
#splash.hidden{opacity:0;transform:scale(1.04);pointer-events:none}
.sp-grid{position:absolute;inset:0;background-image:linear-gradient(var(--splash-grid) 1px,transparent 1px),linear-gradient(90deg,var(--splash-grid) 1px,transparent 1px);background-size:70px 70px;animation:gridDrift 30s linear infinite}
@keyframes gridDrift{from{background-position:0 0}to{background-position:60px 60px}}
.sp-orb{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,var(--splash-orb) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(60px);animation:orbPulse 4s ease-in-out infinite}
@keyframes orbPulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.sp-inner{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 20px}
.sp-eye{font-family:var(--font-mono);font-size:10px;letter-spacing:.35em;color:var(--accent);text-transform:uppercase;opacity:0;animation:fadeUp .6s ease forwards .3s}
.sp-logo{font-family:var(--font-title);font-size:clamp(36px,7vw,80px);font-weight:700;color:var(--splash-txt);line-height:1;letter-spacing:-.03em;opacity:0;animation:fadeUp .7s ease forwards .5s}
.sp-logo span{color:var(--accent)}
.sp-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--splash-sub);text-transform:uppercase;opacity:0;animation:fadeUp .6s ease forwards .8s}
.sp-div{width:48px;height:1px;background:var(--splash-line);opacity:0;animation:fadeUp .5s ease forwards 1s}
.sp-for{font-family:var(--font-body);font-size:14px;color:var(--splash-for);font-weight:300;font-style:italic;opacity:0;animation:fadeUp .6s ease forwards 1.1s}
.sp-for strong{color:var(--splash-txt);font-style:normal;font-weight:500}
.sp-hint{font-family:var(--font-mono);font-size:10px;letter-spacing:.25em;color:var(--accent);text-transform:uppercase;opacity:0;animation:spPulse 2s ease-in-out infinite 1.5s}
@keyframes spPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── LAYOUT ── */
#app{display:flex;height:100vh;overflow:hidden}

/* ── LEFT SIDEBAR ── */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--banner-bg);border-right:1px solid var(--banner-line);display:flex;flex-direction:column;z-index:50;overflow-x:hidden;overflow-y:auto}
@media(max-width:900px){.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .3s}.sidebar.mob-open{transform:translateX(0)}}
.sb-head{padding:12px 14px 10px;border-bottom:1px solid var(--banner-line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sb-logo{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.sb-music-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;padding:3px 5px;border-radius:5px;transition:background .2s}
.sb-music-btn:hover{background:rgba(255,255,255,.07)}
.sb-music-ico{display:flex;align-items:flex-end;gap:2px;width:16px;height:13px}
.sb-music-ico .b{width:2.5px;background:var(--accent);border-radius:1px;opacity:.4;height:4px}
.sb-music-ico.playing .b{opacity:1}
.sb-music-ico.playing .b1{animation:mBar .9s ease-in-out infinite}
.sb-music-ico.playing .b2{animation:mBar .9s ease-in-out infinite .18s}
.sb-music-ico.playing .b3{animation:mBar .9s ease-in-out infinite .36s}
.sb-music-ico.playing .b4{animation:mBar .9s ease-in-out infinite .54s}
@keyframes mBar{0%,100%{height:3px}50%{height:12px}}
.sdiv{width:100%;height:1px;background:var(--banner-line);flex-shrink:0}
.sb-lbl{font-family:var(--font-mono);font-size:7px;letter-spacing:.22em;color:rgba(255,255,255,.28);text-transform:uppercase;padding:9px 14px 4px;display:block}
.sb-btn{display:flex;align-items:center;gap:9px;padding:8px 14px;cursor:pointer;color:rgba(255,255,255,.38);transition:all .18s;border-left:2px solid transparent;background:transparent;border-right:none;border-top:none;border-bottom:none;width:100%;text-align:left;font-family:var(--font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase}
.sb-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;flex-shrink:0}
.sb-btn:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.75)}
.sb-btn.active{background:rgba(255,255,255,.06);border-left-color:var(--accent);color:var(--accent)}
.sb-btn.danger{color:rgba(229,85,85,.5)}
.sb-btn.danger:hover{background:rgba(229,85,85,.07);color:rgba(229,85,85,.9);border-left-color:rgba(229,85,85,.4)}
.sb-export{background:var(--accent);color:#fff!important;border-left:none!important;margin:8px 12px;width:calc(100% - 24px);border-radius:6px;justify-content:center;font-size:9px;padding:9px 10px}
.sb-export:hover{background:var(--accent-light)!important}
.sb-spacer{flex:1;min-height:0}

/* ── SIDEBAR TYPO SECTION ── */
.sb-typo-wrap{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;min-height:130px}
.sb-typo-list{overflow-y:auto;padding:4px 10px 8px;display:flex;flex-direction:column;gap:4px;max-height:230px}
.sb-typo-list::-webkit-scrollbar{width:2px}
.sb-typo-list::-webkit-scrollbar-thumb{background:var(--accent);border-radius:1px}
.sb-tp-card{display:flex;flex-direction:column;gap:2px;padding:7px 9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;cursor:pointer;transition:all .18s;text-align:left;width:100%;flex-shrink:0}
.sb-tp-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.sb-tp-card.on{border-color:var(--accent);background:rgba(62,168,0,.08)}
.sb-tp-name{font-family:var(--font-mono);font-size:6px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;line-height:1}
.sb-tp-h{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);line-height:1.3}
.sb-tp-b{font-size:8px;color:rgba(255,255,255,.35);line-height:1}

/* ── SIDEBAR GRADIENTS SECTION ── */
.sb-grad-wrap{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.sb-grad-list{padding:4px 10px 8px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.sb-grad-swatch{height:38px;border-radius:6px;cursor:pointer;border:1.5px solid rgba(255,255,255,.08);transition:transform .15s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.sb-grad-swatch:hover{transform:scale(1.05);border-color:rgba(255,255,255,.3)}
.sb-grad-swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.sb-grad-swatch-lbl{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:5.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}
.sb-grad-none{background:rgba(255,255,255,.04);border:1.5px dashed rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:7px;color:rgba(255,255,255,.3);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:6px;height:38px;transition:all .18s}
.sb-grad-none:hover{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.6)}

/* ── GRADIENT CUSTOM EDITOR ── */
.grad-editor{padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:7px;margin:0 10px 8px;display:flex;flex-direction:column;gap:8px}
.grad-editor-preview{height:44px;border-radius:6px;border:1px solid rgba(255,255,255,.1);transition:background .2s}
.grad-row{display:flex;align-items:center;gap:6px}
.grad-lbl{font-family:var(--font-mono);font-size:6.5px;letter-spacing:.14em;color:rgba(255,255,255,.4);text-transform:uppercase;min-width:28px}
.grad-color-btn{width:24px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.2);cursor:pointer;padding:2px;background:rgba(255,255,255,.05);flex-shrink:0}
.grad-hex{flex:1;padding:4px 7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;font-family:var(--font-mono);font-size:8px;color:rgba(255,255,255,.8);outline:none}
.grad-hex:focus{border-color:var(--accent)}
.grad-opacity-row{display:flex;align-items:center;gap:5px}
.grad-opacity-slider{flex:1;accent-color:var(--accent)}
.grad-opacity-val{font-family:var(--font-mono);font-size:7px;color:rgba(255,255,255,.5);min-width:22px;text-align:right}
.grad-type-row{display:flex;gap:3px}
.grad-type-btn{flex:1;padding:4px 2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:4px;cursor:pointer;font-family:var(--font-mono);font-size:7px;color:rgba(255,255,255,.45);text-align:center;transition:all .15s;letter-spacing:.06em}
.grad-type-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.grad-dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.grad-dir-btn{padding:5px 2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:4px;cursor:pointer;font-size:10px;text-align:center;transition:all .15s;color:rgba(255,255,255,.4)}
.grad-dir-btn.on{background:rgba(255,255,255,.12);border-color:var(--accent);color:var(--accent)}
.grad-apply-btn{width:100%;padding:6px;background:var(--accent);color:#fff;border:none;border-radius:5px;font-family:var(--font-mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.grad-apply-btn:hover{background:var(--accent-light)}
.sb-dots-row{display:flex;gap:6px;flex-wrap:wrap;padding:6px 14px 12px}
.sb-dot{width:15px;height:15px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.15);transition:transform .18s,box-shadow .18s}
.sb-dot:hover{transform:scale(1.3)}
.sb-dot.active{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--accent)}

/* ── RIGHT PANEL — always visible, fixed width ── */
.rpanel{width:var(--rpanel-w);flex-shrink:0;background:var(--banner-bg);border-left:1px solid var(--banner-line);display:flex;flex-direction:column;overflow:hidden;z-index:40}
@media(max-width:900px){.rpanel{position:fixed;right:0;top:0;bottom:0;z-index:200;transform:translateX(100%);transition:transform .3s}.rpanel.mob-open{transform:translateX(0)}}
.rp-head{padding:12px 14px 10px;border-bottom:1px solid var(--banner-line);flex-shrink:0}
.rp-sub{font-family:var(--font-mono);font-size:7px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:2px}
.rp-title{font-family:var(--font-title);font-size:15px;font-weight:600;color:var(--banner-text)}
.rp-body{flex:1;overflow-y:auto;padding:14px}
.rp-body::-webkit-scrollbar{width:2px}
.rp-body::-webkit-scrollbar-thumb{background:var(--accent)}

/* panel form elements */
.f-lbl{font-family:var(--font-mono);font-size:7px;letter-spacing:.18em;color:var(--panel-ink-muted);text-transform:uppercase;margin-bottom:5px;display:block}
.f-inp{width:100%;padding:7px 10px;background:var(--panel-input-bg);border:1px solid var(--panel-input-border);border-radius:6px;font-family:var(--font-mono);font-size:10px;color:var(--panel-ink);outline:none;transition:border-color .2s}
.f-inp:focus{border-color:var(--accent)}
.f-inp[type=number]{-moz-appearance:textfield}
.f-inp[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.f-sel{width:100%;padding:7px 10px;background:var(--panel-input-bg);border:1px solid var(--panel-input-border);border-radius:6px;font-family:var(--font-mono);font-size:10px;color:var(--panel-ink);outline:none;appearance:none;cursor:pointer;transition:border-color .2s}
.f-sel:focus{border-color:var(--accent)}
.f-sel option{background:#0a1a04}
.f-g2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.f-sep{height:1px;background:var(--panel-sep);margin:10px 0}
.f-btn{width:100%;padding:8px 12px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .2s;margin-top:4px}
.f-btn:hover{background:var(--accent-light)}
.f-btn.sec{background:var(--panel-input-bg);color:var(--panel-ink-muted);border:1px solid var(--panel-input-border)}
.f-btn.sec:hover{background:var(--panel-hover);color:var(--panel-ink)}
.f-sec{margin-bottom:12px}
.tog-row{display:flex;gap:3px}
.tog-btn{flex:1;padding:6px 2px;background:var(--panel-input-bg);border:1px solid var(--panel-input-border);border-radius:5px;cursor:pointer;font-size:11px;transition:all .2s;color:var(--panel-ink-muted);text-align:center}
.tog-btn:hover,.tog-btn.on{background:var(--accent-faint);border-color:var(--accent);color:var(--accent)}
.tog-btn-txt{flex:1;padding:5px 2px;background:var(--panel-input-bg);border:1px solid var(--panel-input-border);border-radius:5px;cursor:pointer;font-size:8px;transition:all .2s;color:var(--panel-ink-muted);font-family:var(--font-mono);text-align:center}
.tog-btn-txt.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.color-row{display:flex;align-items:center;gap:6px}
.c-inp{width:28px;height:28px;border:1px solid var(--panel-input-border);border-radius:5px;cursor:pointer;padding:2px;background:var(--panel-input-bg)}
.c-hex{flex:1}
.swatches{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.sw{width:19px;height:19px;border-radius:4px;cursor:pointer;border:1px solid rgba(255,255,255,.12);transition:transform .15s}
.sw:hover{transform:scale(1.2)}
.sl-row{display:flex;align-items:center;gap:6px}
.sl-row input[type=range]{flex:1;accent-color:var(--accent)}
.sl-val{font-family:var(--font-mono);font-size:9px;color:var(--panel-ink-muted);min-width:30px;text-align:right}
.col-item{display:flex;align-items:center;gap:7px;padding:5px 8px;background:var(--panel-input-bg);border:1px solid var(--panel-sep);border-radius:5px;margin-bottom:3px}
.col-lbl{font-family:var(--font-mono);font-size:8px;color:var(--panel-ink-muted);flex:1}
.col-tog{width:10px;height:10px;border-radius:50%;background:var(--accent);cursor:pointer;transition:background .2s;flex-shrink:0}
.col-tog.off{background:rgba(255,255,255,.18)}
.pg-prev{width:100%;aspect-ratio:1/1.414;border:1px solid var(--panel-sep);border-radius:6px;background:var(--panel-input-bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:8px;color:var(--panel-ink-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.pg-prev.ls{aspect-ratio:1.414/1}

/* ── SELECTION EDIT BOX — always visible ── */
.sel-box{background:rgba(255,255,255,.03);border:1px solid var(--accent);border-radius:7px;padding:10px;margin-bottom:12px}
.sel-box-lbl{font-family:var(--font-mono);font-size:7px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:5px}
.sel-box-lbl-left{display:flex;align-items:center;gap:5px}
.sel-box-lbl .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:selDot 1.5s ease-in-out infinite}
.sel-edit-btn{padding:3px 10px;border-radius:100px;font-family:var(--font-mono);font-size:6.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:1px solid var(--accent);background:transparent;color:var(--accent);transition:all .18s;flex-shrink:0}
.sel-edit-btn:hover{background:var(--accent);color:#fff}
.sel-edit-btn.apply{background:var(--accent);color:#fff}
.sel-edit-btn.apply:hover{opacity:.85}
.sel-locked #selContent{opacity:.35;pointer-events:none;user-select:none}
@keyframes selDot{0%,100%{opacity:.4}50%{opacity:1}}
.sel-hint{font-family:var(--font-mono);font-size:8px;color:var(--panel-ink-muted);text-align:center;padding:8px 0;letter-spacing:.05em}

/* Textarea for selected text editing */
.sel-text-area{
  width:100%;
  min-height:64px;
  max-height:120px;
  padding:8px 10px;
  background:var(--panel-input-bg);
  border:1px solid var(--panel-input-border);
  border-radius:4px;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--panel-ink);
  resize:vertical;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.sel-text-area:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(62,168,0,.1);
}
.sel-text-area::placeholder{
  color:var(--panel-ink-muted);
}

/* ── TYPO PRESETS ── */
.tp-card{display:flex;flex-direction:column;gap:3px;padding:8px 10px;background:var(--panel-input-bg);border:1px solid var(--panel-sep);border-radius:6px;cursor:pointer;transition:all .2s;margin-bottom:4px;text-align:left;align-items:flex-start;width:100%}
.tp-card:hover{background:var(--panel-hover);border-color:rgba(255,255,255,.2)}
.tp-card.on{border-color:var(--accent);background:rgba(255,255,255,.06)}
.tp-name{font-family:var(--font-mono);font-size:7px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.tp-h{font-size:13px;font-weight:600;color:var(--panel-ink);line-height:1.2;text-align:left}
.tp-b{font-size:9px;color:var(--panel-ink-muted);margin-top:1px;text-align:left}

/* ── CANVAS ── */
.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--cream);min-width:0}
.ctbar{height:50px;flex-shrink:0;background:var(--bar-bg,var(--nav-bg));backdrop-filter:blur(16px);border-bottom:2px solid var(--bar-border,var(--nav-border));box-shadow:0 2px 12px rgba(0,0,0,.13);display:flex;align-items:center;padding:0 16px;gap:10px;font-family:var(--font-mono);font-size:9px;color:var(--ink-muted);letter-spacing:.12em;transition:background .4s,border-color .4s}
.ct-logo{font-weight:700;color:var(--ink);letter-spacing:.16em;white-space:nowrap;font-family:var(--font-title);font-size:13px}
.ct-logo span{color:var(--accent)}
.ctsep{width:1px;height:18px;background:var(--line);flex-shrink:0}
.ctactions{display:flex;gap:6px;align-items:center;margin-left:auto}
.ctbtn{padding:5px 11px;border-radius:100px;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-muted);transition:all .2s;white-space:nowrap}
.ctbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-faint)}
.ctbtn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.ctbtn.pri:hover{background:var(--accent-light)}
.ctbtn.mob{display:none}
@media(max-width:900px){.ctbtn.mob{display:flex;align-items:center}.hide-mob{display:none}}
.cscroll{flex:1;overflow:auto;padding:40px 60px;display:flex;flex-direction:column;align-items:center;gap:0;background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);background-size:32px 32px}
/* Zoom wrapper — scaled by JS via CSS var */
.pages-zoom-wrap{display:flex;flex-direction:column;align-items:center;gap:0;transform-origin:top center;transition:transform .25s cubic-bezier(.4,0,.2,1)}
/* Page group: bar + page stacked */
.pdf-page-group{display:flex;flex-direction:column;align-items:center;margin-bottom:44px}
.pdf-page-bar{width:794px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin-bottom:10px}
.pdf-page-lbl{font-family:var(--font-mono);font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);opacity:.6}
.pdf-add-page{padding:4px 12px;border-radius:100px;font-family:var(--font-mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-muted);transition:all .2s}
.pdf-add-page:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-faint)}
.pdf-del-page{padding:4px 10px;border-radius:100px;font-family:var(--font-mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(229,85,85,.3);background:transparent;color:rgba(229,85,85,.5);transition:all .2s}
.pdf-del-page:hover{border-color:rgba(229,85,85,.8);color:rgba(229,85,85,.9);background:rgba(229,85,85,.06)}
/* Zoom control bar at bottom right of ctbar */
.zoom-bar{display:flex;align-items:center;gap:6px;margin-right:4px}
.zoom-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--ink-muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:var(--font-mono);line-height:1}
.zoom-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-faint)}
.zoom-lbl{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;color:var(--ink-muted);min-width:36px;text-align:center}

/* ── PAGE BACKGROUND COLOR CONTROL ── */
.pg-bg-ctrl{display:flex;align-items:center;gap:5px}
.pg-bg-lbl{font-family:var(--font-mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.pg-bg-inp{width:26px;height:26px;border:1px solid var(--line);border-radius:5px;cursor:pointer;padding:2px;background:transparent}

/* ── RULERS ── */
.canvas-with-ruler{display:flex;flex:1;overflow:hidden;min-height:0}
.ruler-h{height:22px;flex-shrink:0;background:#f0f3ee;border-bottom:1px solid rgba(60,80,50,.15);position:relative;overflow:hidden;
  background-image:
    linear-gradient(rgba(40,60,30,.55) 0,rgba(40,60,30,.55) 1px,transparent 1px 100%),
    linear-gradient(rgba(40,60,30,.25) 0,rgba(40,60,30,.25) 1px,transparent 1px 100%),
    linear-gradient(rgba(40,60,30,.1) 0,rgba(40,60,30,.1) 1px,transparent 1px 100%);
  background-size:100px 65%,50px 38%,10px 22%;
  background-position:22px bottom,22px bottom,22px bottom;
  background-repeat:repeat-x}
.ruler-v{width:22px;flex-shrink:0;background:#f0f3ee;border-right:1px solid rgba(60,80,50,.15);position:relative;overflow:hidden;
  background-image:
    linear-gradient(to bottom,rgba(40,60,30,.55) 0,rgba(40,60,30,.55) 1px,transparent 1px 100%),
    linear-gradient(to bottom,rgba(40,60,30,.25) 0,rgba(40,60,30,.25) 1px,transparent 1px 100%),
    linear-gradient(to bottom,rgba(40,60,30,.1) 0,rgba(40,60,30,.1) 1px,transparent 1px 100%);
  background-size:65% 100px,38% 50px,22% 10px;
  background-position:right 22px,right 22px,right 22px;
  background-repeat:repeat-y}
.ruler-corner{width:22px;height:22px;flex-shrink:0;background:#e6ebe2;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:5px;color:#3a5028;border-bottom:1px solid rgba(60,80,50,.15);border-right:1px solid rgba(60,80,50,.15)}
.ruler-num-h{position:absolute;font-family:var(--font-mono);font-size:5.5px;color:#2a4020;opacity:.8;bottom:3px;transform:translateX(-50%);white-space:nowrap;pointer-events:none;letter-spacing:0}
.ruler-num-v{position:absolute;font-family:var(--font-mono);font-size:5px;color:#2a4020;opacity:.8;right:1px;white-space:nowrap;pointer-events:none;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);line-height:1}
@media(max-width:900px){.ruler-h,.ruler-v,.ruler-corner{display:none!important}.canvas-with-ruler{display:contents}}

/* ── COLUMN EDITOR PANEL ── */
.col-editor-panel{position:fixed;z-index:8000;background:var(--banner-bg);border:1px solid var(--accent);border-radius:12px;padding:14px 14px 12px;min-width:210px;box-shadow:0 10px 40px rgba(0,0,0,.45);display:none}
.col-editor-title{font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:12px;padding-right:20px}
.col-editor-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.col-editor-row label{font-family:var(--font-mono);font-size:7px;color:var(--panel-ink-muted);text-transform:uppercase;letter-spacing:.1em;min-width:62px}
.col-editor-inp{width:58px;padding:5px 7px;background:var(--panel-input-bg);border:1px solid var(--panel-input-border);border-radius:5px;font-family:var(--font-mono);font-size:9px;color:var(--panel-ink);outline:none;transition:border-color .2s}
.col-editor-inp:focus{border-color:var(--accent)}
.col-editor-unit{font-family:var(--font-mono);font-size:8px;color:var(--panel-ink-muted)}
.col-align-btns{display:flex;gap:3px}
.col-align-btns button{width:27px;height:27px;border-radius:5px;border:1px solid var(--panel-input-border);background:var(--panel-input-bg);color:var(--panel-ink-muted);cursor:pointer;font-size:11px;transition:all .15s;display:flex;align-items:center;justify-content:center}
.col-align-btns button:hover{border-color:var(--accent);color:var(--accent)}
.col-align-btns button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.col-editor-close{position:absolute;top:9px;right:9px;background:transparent;border:none;color:var(--panel-ink-muted);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:3px;transition:color .2s}
.col-editor-close:hover{color:var(--panel-ink)}
.col-selected{background:rgba(62,168,0,.07)!important;outline:1.5px solid rgba(62,168,0,.35)!important;outline-offset:-1px}

/* ── PDF PAGE ── */
.pdf-page{
  background:var(--page-bg);
  border:none;
  border-radius:4px;
  position:relative;
  width:794px;
  min-width:794px;
  height:1123px;
  min-height:1123px;
  flex-shrink:0;
  overflow:hidden;
  transition:background-color .4s, box-shadow .2s, outline .15s;
  transform-origin:top center;
  box-shadow:0 4px 32px rgba(0,0,0,.18);
  outline:2.5px solid transparent;
  cursor:default;
}
/* Active page — clicked/focused page gets accent outline */
.pdf-page.active-page{
  outline:2.5px solid var(--accent);
  box-shadow:0 4px 32px rgba(0,0,0,.22), 0 0 0 4px var(--accent-faint);
}
/* Drag-over page drop zone */
.pdf-page.drag-over-page{
  outline:2.5px dashed var(--accent)!important;
  background:color-mix(in srgb, var(--page-bg) 92%, var(--accent) 8%)!important;
}
/* Page label shows active state */
.pdf-page-bar.active-bar .pdf-page-lbl{
  color:var(--accent);
  opacity:1;
  font-weight:700;
}
.pdf-inner{
  padding:40px;
  height:100%;
  overflow:hidden;
  position:relative;
}

/* ── TEXT color follows theme ── */
/* The .tbc uses --ink so it adapts automatically */
.tbc{outline:none;min-height:22px;word-wrap:break-word;color:var(--ink)}
.tbc:empty::before{content:'Haz clic para editar...';color:var(--ink-muted);font-style:italic;pointer-events:none}
/* table contenteditable cells */
.tbc-cell{outline:none;word-break:break-word;color:var(--ink-soft)}
.tbc-cell:empty::before{content:'Escribe o pega texto...';color:var(--ink-muted);font-style:italic;pointer-events:none;font-size:11px}

/* ── BLOCKS ── */
.pdf-block{position:relative;margin-bottom:14px;border:1.5px solid transparent;border-radius:4px;transition:border-color .18s;cursor:pointer}
.pdf-block:hover{border-color:var(--accent);border-style:dashed}
.pdf-block.sel{border-color:var(--accent);border-style:solid;box-shadow:0 0 0 3px rgba(62,168,0,.08)}
/* Hide text cursor when block is selected but not actively editing */
.pdf-block.sel .tbc:not(:focus){caret-color:transparent;user-select:none;-webkit-user-select:none}
.pdf-block.sel .tbc:not(:focus)::selection{background:transparent}
.bact{position:absolute;top:-13px;right:0;display:none;gap:3px;background:var(--accent);border-radius:100px;padding:2px 7px;z-index:10}
.pdf-block:hover .bact,.pdf-block.sel .bact{display:flex}
/* Selected block indicator badge */
.blk-sel-badge{position:absolute;top:-13px;left:6px;display:none;align-items:center;gap:4px;background:var(--banner-bg);border:1px solid var(--accent);border-radius:100px;padding:2px 8px;z-index:10;font-family:var(--font-mono);font-size:7px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;pointer-events:none}
.blk-sel-badge .sel-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:selDot 1.2s ease-in-out infinite}
.pdf-block.sel .blk-sel-badge{display:flex}
.bab{background:transparent;border:none;color:#fff;cursor:pointer;font-size:11px;padding:1px 4px;border-radius:3px;transition:background .15s;font-family:var(--font-mono)}
.bab:hover{background:rgba(255,255,255,.25)}
.pdf-block:hover .bdrag{opacity:.5}

/* ══ TABLE ══ */
.qt-wrap{overflow:hidden;width:100%;border-radius:10px;border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.qt{width:100%;border-collapse:collapse;min-width:280px;table-layout:auto;border:none}
.qt thead tr{background:var(--accent)}
.qt thead th{font-family:var(--font-mono);font-size:8px;letter-spacing:.16em;color:#fff;text-transform:uppercase;padding:12px 14px;text-align:left;font-weight:600;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.2);position:relative}
.qt thead th.cr{text-align:right}
/* column delete button on header */
.th-del{position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,0);border:none;cursor:pointer;font-size:9px;color:rgba(255,255,255,0);transition:all .2s;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.qt thead th:hover .th-del{background:rgba(255,255,255,.2);color:rgba(255,255,255,.9)}
.qt thead th:hover .th-del:hover{background:rgba(255,255,255,.35);color:#fff}
.qt tbody tr{border-bottom:1px solid var(--line);background:var(--section-alt);transition:background .18s}
.qt tbody tr:hover{background:var(--hover-glow)}
.qt tbody tr:last-child{border-bottom:none}
.qt tbody td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;font-family:var(--font-body);font-size:13px;color:var(--ink-soft)}
.qt tbody td.td-name{font-family:var(--font-title);font-size:14px;font-weight:500;color:var(--ink)}
.qt tbody td.td-num{font-family:var(--font-mono);font-size:12px;text-align:right;vertical-align:middle}
/* CRITICAL FIX: table inputs must not block events */
.qt tbody td input{background:transparent;border:none;outline:none;font-family:inherit;font-size:inherit;color:inherit;width:100%;padding:0;line-height:inherit;display:block}
.qt tbody td input[type=number]{text-align:right;-moz-appearance:textfield}
.qt tbody td input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.qt tbody td textarea{width:100%;background:transparent;border:none;outline:none;font-family:inherit;font-size:inherit;color:inherit;resize:vertical;padding:0;line-height:1.5;min-height:38px;display:block}
/* tfoot */
.qt tfoot{border-top:2px solid var(--accent)}
.qt tfoot .tr-sub td{background:var(--accent-faint);padding:10px 14px;font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.qt tfoot .tr-igv td{background:var(--accent-faint);padding:10px 14px;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);border-bottom:1px solid var(--line)}
.qt tfoot .tr-grand td{background:var(--accent);padding:13px 14px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:#fff;border-bottom:none}
.qt-continuation-header{background:var(--accent);border-radius:6px 6px 0 0;overflow:hidden}
.qt-continuation-header th{font-family:var(--font-mono);font-size:7px;letter-spacing:.16em;color:rgba(255,255,255,.8);text-transform:uppercase;padding:7px 14px;text-align:left;font-weight:400;white-space:nowrap}
.imgc{text-align:center;vertical-align:middle!important}
.imgc label{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px dashed var(--line);border-radius:4px;font-size:13px;transition:border-color .2s}
.imgc label:hover{border-color:var(--accent)}
.imgc img{max-width:48px;max-height:42px;object-fit:contain;border-radius:3px}
.tctrl{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tcbtn{padding:4px 10px;border-radius:100px;font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:1px solid var(--line);background:var(--card-bg);color:var(--ink-muted);transition:all .2s}
.tcbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-faint)}
/* Table split continuation note */
.tbl-continues{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 14px;background:var(--accent-faint);border-top:2px dashed var(--accent);font-family:var(--font-mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-radius:0 0 8px 8px}
.tbl-continues-right{display:flex;align-items:center;gap:5px;opacity:.8}
.tbl-continues-ico{font-size:11px}

/* tbl-part-badge — hidden by default, show on block hover */
.tbl-part-badge{display:flex;align-items:center;justify-content:space-between;padding:5px 12px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:7px;letter-spacing:.15em;text-transform:uppercase;border-radius:7px 7px 0 0;margin-bottom:-2px;position:relative;z-index:1;
  opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;pointer-events:none}
.pdf-block:hover .tbl-part-badge,
.pdf-block.sel .tbl-part-badge{opacity:1;transform:translateY(0);pointer-events:auto}
.tbl-part-id{opacity:.7;font-size:6.5px}

/* ── GRADIENT ACCORDION ── */
.sb-grad-wrap{display:flex;flex-direction:column}
.sb-grad-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:6px 2px;user-select:none;border-radius:5px;transition:background .15s}
.sb-grad-toggle:hover{background:var(--accent-faint)}
.sb-grad-toggle-lbl{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.sb-grad-toggle-ico{font-size:11px;color:var(--ink-muted);transition:transform .22s}
.sb-grad-toggle-ico.open{transform:rotate(180deg)}
.sb-grad-body{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.sb-grad-body.open{max-height:900px}

/* ── PRINT / PDF EXPORT ── */
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  html,body{margin:0!important;padding:0!important}
  .sidebar,.rpanel,.ctbar,.zoom-bar,#toast,#splash,#emodal,#splitModal,#mobOverlay,
  .pdf-page-bar,.bact,.bdrag,.tctrl,.th-del,.blk-sel-badge,.tbl-part-badge,.tbl-continues,
  .ruler-h,.ruler-v,.ruler-corner,.canvas-with-ruler>.ruler-v,
  .empty{display:none!important}
  .canvas-area,.cscroll,#app{display:block!important;overflow:visible!important;height:auto!important;padding:0!important;background:transparent!important}
  .canvas-with-ruler{display:block!important}
  .pages-zoom-wrap{transform:none!important;display:block!important}
  .pdf-page-group{margin-bottom:0!important;display:block!important;break-after:page}
  .pdf-page-group:last-child{break-after:auto}
  .pdf-page{box-shadow:none!important;border:none!important;outline:none!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow:visible!important;
    page-break-after:always;break-after:page}
  .pdf-page:last-child{page-break-after:auto;break-after:auto}
  .pdf-inner{height:auto!important;overflow:visible!important}
  .pdf-block{border:none!important;outline:none!important}
  @page{size:A4;margin:0}
}

/* Split modal */
#splitModal{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
#splitModal.open{opacity:1;pointer-events:all}
.split-box{background:var(--banner-bg);border:1px solid var(--banner-line);border-radius:16px;padding:26px;width:min(440px,90vw);display:flex;flex-direction:column;gap:14px;position:relative}
.split-title{font-family:var(--font-title);font-size:18px;font-weight:600;color:var(--banner-text)}
.split-sub{font-family:var(--font-mono);font-size:7px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.split-rows-list{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto;padding-right:4px}
.split-row-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:7px;cursor:pointer;transition:all .18s;font-family:var(--font-mono);font-size:8px;color:var(--banner-text)}
.split-row-item:hover{background:rgba(255,255,255,.09);border-color:var(--accent)}
.split-row-item.selected{background:rgba(255,255,255,.12);border-color:var(--accent);box-shadow:0 0 0 2px rgba(62,168,0,.18)}
.split-row-num{min-width:22px;text-align:center;opacity:.45;font-size:7px}
.split-row-preview{flex:1;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-family:var(--font-body)}
.split-row-count{font-size:6.5px;opacity:.4;white-space:nowrap}
.split-actions{display:flex;gap:8px;margin-top:4px}
.split-btn{flex:1;padding:11px;border-radius:8px;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:1px solid var(--banner-line);background:rgba(255,255,255,.04);color:var(--banner-text);transition:all .2s}
.split-btn:hover{background:rgba(255,255,255,.08);border-color:var(--accent)}
.split-btn.acc{background:var(--accent);color:#fff;border-color:var(--accent)}
.split-btn.acc:hover{background:var(--accent-light)}
.split-divider-preview{height:3px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) 50%,transparent 50%);background-size:8px 100%;margin:4px 0;opacity:.5}

/* ── DRAG & DROP BLOCKS ── */
.pdf-block.dragging{opacity:.35;border-style:dashed!important;border-color:var(--accent)!important;background:var(--accent-faint)!important;cursor:grabbing}
.pdf-block.drag-over-top{border-top:3px solid var(--accent)!important;margin-top:-1px}
.pdf-block.drag-over-bottom{border-bottom:3px solid var(--accent)!important;margin-bottom:-1px}
.bdrag{position:absolute;left:-22px;top:50%;transform:translateY(-50%);cursor:grab;opacity:0;color:var(--ink-muted);font-size:16px;transition:opacity .2s;user-select:none;-webkit-user-select:none}

/* ── EMPTY ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;text-align:center;gap:12px;opacity:.45;pointer-events:none}
.empty-ico{font-size:40px}
.empty-ttl{font-family:var(--font-title);font-size:17px;color:var(--ink)}
.empty-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted)}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(70px);z-index:9990;background:var(--ink);color:var(--cream);font-family:var(--font-mono);font-size:8px;letter-spacing:.15em;text-transform:uppercase;padding:9px 18px;border-radius:100px;border:1px solid var(--accent);opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── MODAL ── */
#emodal{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
#emodal.open{opacity:1;pointer-events:all}
.mbox{background:var(--banner-bg);border:1px solid var(--banner-line);border-radius:16px;padding:28px;max-width:420px;width:90%;display:flex;flex-direction:column;gap:14px;position:relative}
.mttl{font-family:var(--font-title);font-size:20px;font-weight:600;color:var(--banner-text)}
.msub{font-family:var(--font-mono);font-size:7px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.mbtns{display:flex;gap:10px;flex-wrap:wrap}
.mbtn{flex:1;min-width:110px;padding:13px 10px;border-radius:8px;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:1px solid var(--banner-line);background:rgba(255,255,255,.04);color:var(--banner-text);transition:all .2s;text-align:center}
.mbtn:hover{background:rgba(255,255,255,.08);border-color:var(--accent)}
.mbtn.acc{background:var(--accent);color:#fff;border-color:var(--accent)}
.mbtn.acc:hover{background:var(--accent-light)}
.mclose{position:absolute;top:12px;right:12px;background:transparent;border:none;color:var(--banner-sub);cursor:pointer;font-size:15px;padding:4px 8px;border-radius:4px;transition:color .2s}
.mclose:hover{color:var(--banner-text)}
#mobOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199}
@media(max-width:900px){#mobOverlay.on{display:block}}