/* ════════════════════════════════════════
   TOKENS
════════════════════════════════════════ */
:root {
  --ink:    #080808;
  --ink2:   #101010;
  --ink3:   #181818;
  --ink4:   #202020;
  --ink5:   #2a2a2a;
  --paper:  #f4f1ea;
  --paper2: #ede9e0;
  --white:  #ffffff;
  --mag:    #e5007d;
  --mag-lo: rgba(229,0,125,0.15);
  --mag-hi: rgba(229,0,125,0.4);
  --border: rgba(255,255,255,0.07);
  --ease:   cubic-bezier(0.16,1,0.3,1);
  --nav-h:  52px;
  --panel-w: 288px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:13px;}
body{font-family:'DM Mono',monospace;background:var(--ink);color:var(--white);overflow-x:hidden;}
::selection{background:var(--mag);color:#fff;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--ink5);}
::-webkit-scrollbar-thumb:hover{background:var(--mag);}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:rgba(8,8,8,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1.5px solid var(--mag-hi);
  display:flex;align-items:center;
}
.nav-logo{
  font-family:'Roboto Flex',sans-serif;
  font-size:17px;letter-spacing:0.14em;
  padding:0 24px;border-right:1px solid var(--border);
  height:100%;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.nav-logo .tag{
  background:var(--mag);color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.2em;padding:2px 8px;text-transform:uppercase;
}
.nav-links{display:flex;gap:0;list-style:none;padding:0 8px;}
.nav-links a{
  display:flex;align-items:center;height:var(--nav-h);
  padding:0 16px;
  color:rgba(255,255,255,0.35);
  text-decoration:none;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  transition:color 0.15s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:1.5px;
  background:var(--mag);transform:scaleX(0);transition:transform 0.2s var(--ease);
}
.nav-links a:hover{color:rgba(255,255,255,0.7);}
.nav-links a.active{color:#fff;}
.nav-links a.active::after{transform:scaleX(1);}
.nav-spacer{flex:1;}
.nav-version{
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(255,255,255,0.2);padding:0 20px;
  border-left:1px solid var(--border);height:100%;display:flex;align-items:center;
}

/* ════════════════════════════════════════
   SHARED SECTION SHELL
════════════════════════════════════════ */
.section{
  padding:88px 64px;
  border-bottom:1.5px solid var(--border);
  position:relative;
}
.section.light{background:var(--paper);color:var(--ink);}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--mag);margin-bottom:36px;
}
.eyebrow::before{content:'';display:block;width:24px;height:1.5px;background:var(--mag);}
.sec-title{
  font-family:'Roboto Flex',sans-serif;
  font-size:clamp(40px,5.5vw,72px);
  line-height:.93;letter-spacing:.02em;margin-bottom:14px;
}
.sec-lead{
  font-size:11px;line-height:1.85;
  color:rgba(255,255,255,0.4);
  max-width:500px;margin-bottom:56px;
}
.section.light .sec-lead{color:rgba(0,0,0,0.45);}

/* corner marks */
.cm{position:absolute;width:14px;height:14px;
    border-color:currentColor;border-style:solid;border-width:0;}
.cm.tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;}
.cm.tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;}
.cm.bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;}
.cm.br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
#hero{
  margin-top:var(--nav-h);
  min-height:calc(100vh - var(--nav-h));
  display:grid;grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr auto;
  position:relative;overflow:hidden;
}
#hero-canvas{position:absolute;inset:0;pointer-events:none;z-index:0;}

.p-panel{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:56px 44px;
  border-right:1px solid rgba(255,255,255,0.04);
  overflow:hidden;cursor:pointer;
  transition:background .4s;
}
.p-panel:last-child{border-right:none;}
.p-panel::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;
}
.p-engage::before{background:radial-gradient(circle at 50% 60%,rgba(255,107,53,.18),transparent 70%);}
.p-inspire::before{background:radial-gradient(circle at 50% 60%,rgba(139,92,246,.18),transparent 70%);}
.p-energize::before{background:radial-gradient(circle at 50% 60%,rgba(229,0,125,.2),transparent 70%);}
.p-panel:hover::before{opacity:1;}
.p-canvas{position:absolute;top:0;left:0;right:0;height:55%;pointer-events:none;}
.p-num{
  font-family:'Roboto Flex',sans-serif;font-size:100px;line-height:1;
  color:rgba(255,255,255,.04);position:absolute;top:16px;left:32px;
  pointer-events:none;transition:color .4s;
}
.p-panel:hover .p-num{color:rgba(255,255,255,.07);}
.p-word{font-family:'Roboto Flex',sans-serif;font-size:46px;line-height:1;letter-spacing:.03em;margin-bottom:12px;}
.p-line{width:28px;height:1.5px;background:var(--mag);margin-bottom:12px;transition:width .4s var(--ease);}
.p-panel:hover .p-line{width:56px;}
.p-desc{font-size:11px;line-height:1.8;color:rgba(255,255,255,.38);max-width:200px;transition:color .3s;}
.p-panel:hover .p-desc{color:rgba(255,255,255,.6);}
.p-dot{
  width:7px;height:7px;border-radius:50%;background:var(--mag);
  position:absolute;bottom:48px;right:36px;transition:transform .4s var(--ease);
}
.p-panel:hover .p-dot{transform:scale(2.5);}

.hero-bar{
  grid-column:1/-1;z-index:1;
  background:rgba(229,0,125,.06);
  border-top:1px solid rgba(229,0,125,.18);
  padding:14px 44px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.2);
}
.pulse-row{display:flex;align-items:center;gap:7px;color:var(--mag);}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--mag);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.55);}}

/* ════════════════════════════════════════
   GEN CARD SHELL
════════════════════════════════════════ */
.gen-card{
  background:var(--ink2);
  border:1.5px solid var(--border);
  position:relative;overflow:hidden;
}
.gen-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.gen-card-title{
  font-family:'Roboto Flex',sans-serif;font-size:20px;letter-spacing:.05em;
  display:flex;align-items:center;gap:10px;
}
.gtag{
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  padding:3px 8px;border:1.5px solid var(--mag);color:var(--mag);
}
.gen-body{padding:24px;}

/* ════════════════════════════════════════
   SHARED FORM CONTROLS
════════════════════════════════════════ */
.ctrl-label{
  display:block;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  margin-bottom:8px;
}
.section.light .ctrl-label{color:rgba(0,0,0,.55);}
.seg{display:flex;gap:4px;flex-wrap:wrap;}
.seg-btn{
  padding:8px 14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.78);font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .12s;
}
.seg-btn:hover{border-color:rgba(255,255,255,.55);color:#fff;}
.seg-btn.active{border-color:var(--mag);color:#fff;background:rgba(229,0,125,.15);}

.sl-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.sl-row:last-child{margin-bottom:0;}
.sl-label{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.72);
  width:82px;flex-shrink:0;text-transform:uppercase;}
.sl-wrap{flex:1;}
input[type="range"]{
  -webkit-appearance:none;width:100%;height:4px;
  background:rgba(255,255,255,.28);outline:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--mag);cursor:pointer;border:2px solid var(--ink2);
}
input[type="range"]:focus::-webkit-slider-thumb{background:#fff;}
.sl-val{font-size:11px;color:rgba(255,255,255,.8);width:42px;text-align:right;flex-shrink:0;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:all .15s;border:1.5px solid;
  white-space:nowrap;gap:6px;
}
.btn-primary{background:var(--mag);border-color:var(--mag);color:#fff;}
.btn-primary:hover{background:#c8006d;border-color:#c8006d;}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.5);}
.btn-ghost:hover{border-color:#fff;color:#fff;}
.btn-sm{padding:6px 13px;font-size:11px;}

/* ════════════════════════════════════════
   PALETTE BRIDGE STRIP
════════════════════════════════════════ */
.palette-strip{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:0;
}
.ps-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.25);margin-right:4px;white-space:nowrap;}
.ps-swatch{
  width:22px;height:22px;cursor:pointer;flex-shrink:0;
  border:2px solid transparent;transition:border-color .12s,transform .12s;
  position:relative;
}
.ps-swatch:hover{border-color:rgba(255,255,255,.5);transform:scale(1.2);}
.ps-swatch.active{border-color:#fff;}
.ps-swatch[title]:hover::after{
  content:attr(title);
  position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:var(--ink3);color:#fff;font-size:11px;letter-spacing:.1em;
  padding:3px 7px;white-space:nowrap;pointer-events:none;z-index:10;
}

/* ════════════════════════════════════════
   COLOR GENERATOR SECTION
════════════════════════════════════════ */
#color-section{background:var(--ink);}
.color-gen-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;}
.color-controls{display:flex;flex-direction:column;gap:16px;}
.color-input-row{display:flex;gap:10px;align-items:center;}
#colorPicker{
  width:48px;height:48px;border:1px solid rgba(255,255,255,.15);
  background:transparent;cursor:pointer;padding:3px;flex-shrink:0;
}
#colorHex{
  flex:1;background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.1);color:#fff;
  font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.1em;
  padding:10px 14px;text-transform:uppercase;outline:none;transition:border-color .2s;
}
#colorHex:focus{border-color:var(--mag);}
.harm-row{display:flex;gap:3px;}
.harm-btn{
  flex:1;padding:8px 6px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.35);font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:all .12s;
}
.harm-btn:hover,.harm-btn.active{border-color:var(--mag);color:#fff;background:rgba(229,0,125,.08);}

.compat-block{padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);}
.compat-bar-track{height:3px;background:rgba(255,255,255,.08);position:relative;overflow:hidden;margin:7px 0 5px;}
.compat-bar-fill{height:100%;background:var(--mag);transition:width .5s var(--ease),background .3s;width:100%;}
.compat-score{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.05em;}

.palette-out{display:flex;flex-direction:column;gap:14px;}
.swatch-row{display:flex;gap:3px;height:80px;}
.p-swatch{
  flex:1;position:relative;cursor:pointer;
  transition:flex .25s var(--ease);overflow:hidden;
}
.p-swatch:hover{flex:1.8;}
.p-swatch-inner{
  position:absolute;inset:0;display:flex;
  flex-direction:column;justify-content:flex-end;padding:7px;
}
.p-swatch-hex{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transition:opacity .15s;font-weight:500;}
.p-swatch:hover .p-swatch-hex{opacity:1;}
.p-swatch-name{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;}

.preview-card{
  border:1.5px solid rgba(255,255,255,.08);
  overflow:hidden;position:relative;
  min-height:280px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:24px;
  transition:background .35s;
}
.preview-card .cm{color:rgba(229,0,125,.4);}
.pc-bar{position:absolute;top:0;left:0;right:0;height:3px;}
.pc-kc{
  position:absolute;top:18px;right:18px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--mag);
  font-family:'Roboto Flex',sans-serif;font-size:11px;
  letter-spacing:.1em;color:var(--mag);
}
.pc-tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;color:var(--mag);}
.pc-tag::before{content:'';display:block;width:12px;height:1px;background:currentColor;}
.pc-headline{font-family:'Roboto Flex',sans-serif;font-size:54px;line-height:1;
  letter-spacing:.02em;margin-bottom:8px;}
.pc-sub{font-size:13px;opacity:.55;letter-spacing:.07em;}

.css-box{
  background:rgba(0,0,0,.3);border:1px solid var(--border);
  padding:14px 16px;font-size:12px;line-height:1.9;
  color:rgba(255,255,255,.6);font-family:'DM Mono',monospace;
  letter-spacing:.04em;position:relative;
}
.copy-btn{
  position:absolute;top:10px;right:10px;
  padding:4px 12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.35);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;cursor:pointer;transition:all .15s;
}
.copy-btn:hover{border-color:var(--mag);color:#fff;}
.copy-btn.ok{border-color:#00a878;color:#00a878;}

.push-palette-btn{
  width:100%;padding:10px;text-align:center;
  background:rgba(229,0,125,.08);
  border:1.5px solid rgba(229,0,125,.25);
  color:var(--mag);font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.push-palette-btn:hover{background:rgba(229,0,125,.15);border-color:var(--mag);}

/* ════════════════════════════════════════
   TYPE PLAYGROUND SECTION
════════════════════════════════════════ */
#type-section{
  padding:0;border-bottom:1.5px solid var(--border);
}
.type-section-header{
  padding:56px 64px 40px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:flex-end;justify-content:space-between;
}
.type-section-header-left{}
.type-section-actions{display:flex;gap:8px;padding-bottom:2px;}

/* The playground tool itself */
#type-tool{
  display:grid;grid-template-columns:var(--panel-w) 1fr 180px;
  height:calc(100vh - var(--nav-h));
  position:sticky;top:var(--nav-h);
  background:var(--ink);
}

/* Tool topbar */
#type-tb{
  grid-column:1/-1;grid-row:1;
  height:40px;
  background:var(--ink2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:0;
  overflow:hidden;flex-shrink:0;
}
/* redefine grid with topbar */
#type-tool{
  display:grid;
  grid-template-columns:var(--panel-w) 1fr 180px;
  grid-template-rows:40px 1fr;
  height:calc(100vh - var(--nav-h));
  position:sticky;top:var(--nav-h);
  background:var(--ink);
}
#type-tb{grid-column:1/-1;grid-row:1;}
#type-panel{
  grid-column:1;grid-row:2;
  background:var(--ink2);
  border-right:1px solid var(--border);
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
}
#type-canvas-area{
  grid-column:2;grid-row:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--ink);position:relative;overflow:hidden;
}
#type-canvas-area::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;
}
#type-rpanel{
  grid-column:3;grid-row:2;
  background:var(--ink2);
  border-left:1px solid var(--border);
  overflow-y:auto;
}

/* Palette sync strip inside type tool */
#palette-sync-strip{
  grid-column:1/-1;
  /* inside the topbar */
  display:none;
  align-items:center;
  padding:0 12px;gap:8px;
  border-left:1px solid var(--border);
  height:100%;flex:1;overflow-x:auto;
}
#palette-sync-strip.visible{display:flex;}

/* tb elements */
.tb-sep{width:1px;height:100%;background:var(--border);flex-shrink:0;}
.tb-item{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;height:100%;
  border-right:1px solid var(--border);
  flex-shrink:0;
}
.tb-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.28);white-space:nowrap;}
.tb-select{
  background:var(--ink3);border:1px solid rgba(255,255,255,.1);color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.07em;
  padding:4px 7px;cursor:pointer;outline:none;height:26px;
}
.tb-select:focus{border-color:var(--mag);}
.tb-btn{
  height:26px;padding:0 12px;
  background:var(--ink4);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.5);font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:all .12s;white-space:nowrap;
}
.tb-btn:hover{border-color:var(--mag);color:#fff;}
.tb-btn.mag{background:var(--mag);border-color:var(--mag);color:#fff;}
.tb-btn.mag:hover{background:#c8006d;}
.tb-toggle{display:flex;height:26px;border:1px solid rgba(255,255,255,.09);overflow:hidden;}
.tb-toggle button{
  padding:0 10px;background:transparent;border:none;
  color:rgba(255,255,255,.3);font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .12s;
  border-right:1px solid rgba(255,255,255,.07);
}
.tb-toggle button:last-child{border-right:none;}
.tb-toggle button.active{background:var(--mag);color:#fff;}
.tb-toggle button:hover:not(.active){color:#fff;background:rgba(255,255,255,.05);}
.tb-spacer{flex:1;}

/* ── Panel mode tabs (BG / Layers) ── */
#panel-mode-tabs{
  display:flex;flex-shrink:0;border-bottom:1px solid var(--border);
}
.panel-mode-tab{
  flex:1;height:40px;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;background:transparent;border:none;color:rgba(255,255,255,.5);
  border-bottom:2px solid transparent;transition:all .12s;
}
.panel-mode-tab:hover{color:rgba(255,255,255,.85);}
.panel-mode-tab.active{color:#fff;border-bottom-color:rgba(255,255,255,.5);}
.panel-mode-tab.active.mode-layers{border-bottom-color:var(--mag);}
.l-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* ── Layer stack ── */
#layer-stack{
  flex-shrink:0;border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.18);
}
.layer-row{
  display:flex;align-items:center;gap:0;
  height:52px;border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:background .1s;position:relative;
}
.layer-row:last-child{border-bottom:none;}
.layer-row:hover{background:rgba(255,255,255,.03);}
.layer-row.active-layer{background:rgba(255,255,255,.055);}
.layer-row.active-layer::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
}
.layer-row[data-lid="l1"].active-layer::before{background:#e5007d;}
.layer-row[data-lid="l2"].active-layer::before{background:#4a9fff;}
.layer-row[data-lid="l3"].active-layer::before{background:#00c896;}
.layer-row[data-lid="l4"].active-layer::before{background:#d4af37;}
.layer-row[data-lid="l5"].active-layer::before{background:#9b59b6;}
.layer-row[data-lid="l6"].active-layer::before{background:#e67e22;}

/* Type badge (T / IMG) */
.layer-type-badge{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);flex-shrink:0;
  padding:1px 3px;border:1px solid rgba(255,255,255,.2);border-radius:2px;
}
/* Delete button */
.layer-del-btn{
  width:26px;height:100%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;font-size:13px;
  color:rgba(255,255,255,.35);transition:all .1s;
}
.layer-del-btn:hover{color:rgba(229,0,125,1);background:rgba(229,0,125,.08);}
/* Add-layer picker */
.layer-add-picker{
  display:none;gap:0;border-top:1px solid rgba(255,255,255,.06);
}
.layer-add-picker.open{display:flex;}
.lap-btn{
  flex:1;padding:8px 6px;background:none;border:none;color:rgba(255,255,255,.75);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:background .12s,color .12s;
  border-right:1px solid rgba(255,255,255,.05);
}
.lap-btn:last-child{border-right:none;}
.lap-btn:hover{background:rgba(255,255,255,.06);color:#fff;}
/* Image upload area */
.img-upload-area{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:18px 12px;
  border:1.5px dashed rgba(255,255,255,.22);border-radius:3px;
  cursor:pointer;transition:border-color .15s,background .15s;
  text-align:center;
}
.img-upload-area:hover{border-color:rgba(229,0,125,.35);background:rgba(229,0,125,.03);}
.img-upload-area .iua-icon{font-size:20px;opacity:.7;}
.img-upload-area .iua-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);}
.img-upload-area .iua-hint{font-size:11px;color:rgba(255,255,255,.4);}
.img-thumb{
  width:100%;aspect-ratio:16/9;object-fit:contain;background:rgba(0,0,0,.4);
  border-radius:3px;border:1px solid rgba(255,255,255,.2);
}
/* Canvas drag cursor */
#typeCanvas{cursor:default;}
#typeCanvas.drag-hover{cursor:grab;}
#typeCanvas.dragging{cursor:grabbing;}

/* Eye toggle — dedicated click zone */
.layer-eye{
  width:36px;height:100%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;font-size:15px;
  transition:opacity .12s;z-index:2;
}
.layer-eye:hover{background:rgba(255,255,255,.05);}
.layer-row.layer-hidden .layer-eye{opacity:.28;}
.layer-row.layer-hidden .layer-body{opacity:.3;}

/* Layer body — click to edit */
.layer-body{
  flex:1;min-width:0;padding:0 6px 0 2px;
  display:flex;flex-direction:column;gap:2px;pointer-events:none;
}
.layer-body-top{
  display:flex;align-items:center;gap:6px;
}
.layer-name-badge{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);flex-shrink:0;
}
.layer-text-preview{
  font-size:11px;color:rgba(255,255,255,.88);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.layer-body-meta{
  display:flex;align-items:center;gap:6px;
}
.layer-font-badge{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.layer-op-bar{
  height:2px;flex:1;background:rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
.layer-op-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--mag);opacity:.6;transition:width .15s;
}

/* Solo button */
.layer-solo{
  width:28px;height:100%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;font-size:11px;
  color:rgba(255,255,255,.4);transition:all .1s;letter-spacing:.06em;
}
.layer-solo:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.06);}
.layer-solo.soloed{color:var(--mag);}

/* Layer reorder buttons */
.layer-move-btns{display:flex;flex-direction:column;width:20px;height:100%;flex-shrink:0;}
.layer-move-btn{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:rgba(255,255,255,.4);transition:all .1s;}
.layer-move-btn:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.06);}

/* Add/clear strip */
#layer-stack-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 8px;border-top:1px solid rgba(255,255,255,.04);
}
.lsf-btn{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  background:none;border:none;color:rgba(255,255,255,.55);
  cursor:pointer;padding:5px 8px;font-family:'DM Mono',monospace;
  transition:color .12s;
}
.lsf-btn:hover{color:rgba(255,255,255,.7);}
.lsf-btn.mag:hover{color:var(--mag);}
.lsf-count{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* Old layer-tab kept for compat */
#layer-tabs{display:none;}
.layer-tab{display:none;}

#panel-body{flex:1;overflow-y:auto;overflow-x:hidden;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* Control groups */
.cg{padding:14px 16px;border-bottom:1px solid var(--border);}
.cg-title{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;
}
.align-btns{display:flex;gap:4px;}
.align-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.75);font-family:'DM Mono',monospace;font-size:11px;
  padding:4px 9px;cursor:pointer;letter-spacing:.06em;
  transition:background .12s,color .12s;
}
.align-btn:hover{background:rgba(255,255,255,.18);color:#fff;}
.align-btn.on{background:rgba(229,0,125,.2);border-color:var(--mag);color:rgba(229,0,125,1);}
.cg-mini-btn{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:none;color:var(--mag);cursor:pointer;
  font-family:'DM Mono',monospace;padding:0;
}
.cg-mini-btn:hover{color:#fff;}
textarea.ti{
  width:100%;padding:9px 10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);color:#fff;
  font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.04em;
  resize:vertical;min-height:52px;max-height:100px;outline:none;
  transition:border-color .15s;
}
textarea.ti:focus{border-color:var(--mag);}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.chip{
  padding:4px 8px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.7);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;
  cursor:pointer;transition:all .1s;text-transform:uppercase;
}
.chip:hover{border-color:var(--mag);color:#fff;}

.color-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.cdot{
  width:20px;height:20px;cursor:pointer;
  border:2px solid transparent;transition:border-color .12s;flex-shrink:0;
}
.cdot.active{border-color:#fff;}
.cdot:hover{border-color:rgba(255,255,255,.5);}
.cust-color{
  width:20px;height:20px;cursor:pointer;
  border:1px solid rgba(255,255,255,.15);background:transparent;padding:2px;
}

/* Palette color row in layers */
.palette-colors{
  display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;
  padding:8px;
  background:rgba(229,0,125,.04);
  border:1px solid rgba(229,0,125,.12);
}
.palette-colors .ps-label{
  width:100%;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(229,0,125,.9);margin-bottom:4px;
}

.dist-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.dist-btn{
  padding:10px 6px;text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.78);font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .1s;line-height:1.5;
}
.dist-btn .di{display:block;font-size:18px;margin-bottom:2px;opacity:.8;}
.dist-btn:hover{border-color:rgba(255,255,255,.55);color:#fff;}
.dist-btn.active{border-color:var(--mag);color:#fff;background:rgba(229,0,125,.15);}
.dist-btn.active .di{opacity:1;}

/* ── Variable Type axis controls ── */
.var-badge{
  background:rgba(229,0,125,.18);color:var(--mag);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;
  padding:2px 6px;margin-left:6px;text-transform:uppercase;vertical-align:middle;border-radius:2px;
}
.var-axis-block{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05);}
.var-axis-block:last-of-type{border-bottom:none;margin-bottom:0;}
.var-row{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:4px;margin-bottom:4px;}
.var-range-row{display:grid;grid-template-columns:24px 1fr 28px 24px 1fr 28px;align-items:center;gap:3px;margin-bottom:4px;}
.var-ease-row{display:grid;grid-template-columns:24px 1fr 28px 1fr;align-items:center;gap:3px;}
.var-row-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mag);}
.var-mini-label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.var-sel{
  background:var(--ink3);border:1px solid rgba(255,255,255,.22);color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.04em;
  padding:5px 6px;cursor:pointer;outline:none;height:30px;
}
.var-sel:focus{border-color:var(--mag);}
.var-ease-sel{
  background:var(--ink3);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);
  font-family:'DM Mono',monospace;font-size:11px;padding:4px 5px;cursor:pointer;outline:none;height:26px;
}
.var-ease-sel:focus{border-color:var(--mag);}
.var-mini-sl{width:100%;height:4px;accent-color:var(--mag);cursor:pointer;}
.var-mini-val{font-size:11px;color:rgba(255,255,255,.72);text-align:right;white-space:nowrap;}
.var-static-row{display:grid;grid-template-columns:48px 1fr 28px auto;align-items:center;gap:4px;margin-bottom:2px;}
.var-anim-btn{background:none;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.35);border-radius:3px;padding:2px 6px;font-size:11px;cursor:pointer;transition:all .15s;line-height:1.4;white-space:nowrap;}
.var-anim-btn:hover{border-color:var(--mag);color:var(--mag);}
.var-anim-btn.active{background:rgba(229,0,125,.15);border-color:var(--mag);color:var(--mag);}
.var-anim-settings{padding:4px 0 2px 8px;border-left:2px solid rgba(229,0,125,.25);margin-left:3px;margin-top:2px;}
.var-section-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin:10px 0 4px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.06);}
.var-section-sub{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(229,0,125,.45);margin:6px 0 2px;}

.blend-seg{display:flex;gap:2px;flex-wrap:wrap;}
.bg-opts-col{display:flex;flex-direction:column;gap:3px;}
.bg-opt{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.82);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;transition:all .1s;
}
.bg-opt:hover,.bg-opt.active{border-color:var(--mag);color:#fff;}
.bg-opt .sw{width:14px;height:14px;flex-shrink:0;}

.icon-btn{
  width:24px;height:24px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.65);
  cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;
  transition:all .1s;flex-shrink:0;
}
.icon-btn:hover{border-color:var(--mag);color:#fff;}
.icon-btn.active{background:rgba(229,0,125,.12);border-color:var(--mag);color:var(--mag);}

/* Canvas stage */
#stage{position:relative;z-index:1;box-shadow:0 0 0 1px rgba(229,0,125,.18),0 20px 60px rgba(0,0,0,.6);}
#typeCanvas{display:block;}
#safeZoneBtn.on{background:rgba(80,220,130,.15);border-color:rgba(80,220,130,.6);color:rgba(80,220,130,.95);}
#canvas-info-bar{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;margin-top:10px;
}
.c-info{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.18);padding:0 10px;}

/* ════════════════════════════════════════
   TEMPLATE DRAWER
════════════════════════════════════════ */
#tpl-drawer{
  position:absolute;
  top:40px; /* sits flush under the toolbar */
  left:var(--panel-w);
  right:180px;
  z-index:50;
  background:var(--ink2);
  border-bottom:1.5px solid var(--mag-hi);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  transform:translateY(-100%) translateY(-40px);
  opacity:0;
  pointer-events:none;
  transition:transform .32s var(--ease), opacity .22s ease;
  overflow:hidden;
}
#tpl-drawer.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:all;
}
.tpl-drawer-inner{
  padding:16px 20px 20px;
}
.tpl-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.tpl-drawer-title{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
  display:flex;align-items:center;gap:10px;
}
.tpl-drawer-title::before{
  content:'';display:block;width:16px;height:1.5px;background:var(--mag);
}
.tpl-close{
  background:none;border:none;color:rgba(255,255,255,.3);
  font-size:14px;cursor:pointer;padding:2px 6px;
  transition:color .15s;font-family:'DM Mono',monospace;
}
.tpl-close:hover{color:var(--mag);}
.tpl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:8px;
  padding-top:12px;
}
.tpl-card{
  cursor:pointer;
  border:1.5px solid rgba(255,255,255,.07);
  overflow:hidden;
  transition:border-color .15s, transform .15s var(--ease);
  position:relative;
}
.tpl-card:hover{
  border-color:var(--mag);
  transform:translateY(-2px);
}
.tpl-card.active-tpl{
  border-color:var(--mag);
  box-shadow:0 0 0 1px var(--mag);
}
/* The mini canvas preview */
.tpl-preview{
  height:120px;
  position:relative;overflow:hidden;
  background:#1a1a1a;
  pointer-events:none;
}
/* Shimmer while thumb loads */
.tpl-preview::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);
  background-size:200% 100%;
  animation:tpl-shimmer 1.4s infinite;
  pointer-events:none;
}
@keyframes tpl-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.tpl-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
  opacity:0;transition:opacity .3s ease;
  z-index:1; /* above shimmer ::after */
}
.tpl-thumb.loaded{opacity:1;}
.tpl-meta{
  padding:7px 9px 8px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
.tpl-name{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);display:block;margin-bottom:2px;
}
.tpl-desc{
  font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.28);
}
.tpl-cat{
  display:inline-block;margin-top:4px;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  padding:2px 6px;border:1px solid rgba(229,0,125,.3);color:var(--mag);
}
/* Eye layer */
.gaze-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
}
.gaze-btn{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);padding:7px 4px;cursor:pointer;font-size:14px;
  transition:all .12s;text-align:center;
}
.gaze-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.gaze-btn.active{background:rgba(229,0,125,.15);border-color:var(--mag);color:var(--mag);}

.tpl-save-btn{
  background:none;border:1px solid var(--mag);color:var(--mag);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  padding:4px 10px;cursor:pointer;font-family:'DM Mono',monospace;
  transition:background .15s, color .15s;
}
.tpl-save-btn:hover{background:var(--mag);color:#fff;}
.tpl-tabs-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:0 12px;
}
.tpl-tabs{display:flex;gap:2px;padding:8px 0 0;margin-bottom:0;}
.tpl-action-btn{
  background:none;border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.55);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-family:'DM Mono',monospace;cursor:pointer;
  padding:4px 10px 5px;margin-bottom:4px;
  transition:border-color .15s, color .15s, background .15s;
}
.tpl-action-btn:hover{border-color:var(--mag);color:#fff;background:rgba(229,0,125,.1);}
.tpl-tab{
  background:none;border:none;color:rgba(255,255,255,.35);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-family:'DM Mono',monospace;cursor:pointer;
  padding:4px 10px 6px;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.tpl-tab.active{color:#fff;border-bottom-color:var(--mag);}
.tpl-tab:hover:not(.active){color:rgba(255,255,255,.7);}
.tpl-section-label{
  grid-column:1/-1;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.2);padding:6px 0 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:2px;
}
.tpl-user-delete{
  position:absolute;top:4px;right:4px;
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);border:none;color:rgba(255,255,255,.35);
  font-size:11px;cursor:pointer;z-index:2;
  transition:color .12s, background .12s;
  opacity:0;
}
.tpl-card:hover .tpl-user-delete{opacity:1;}
.tpl-user-delete:hover{color:var(--mag);background:rgba(0,0,0,.9);}

/* ════════════════════════════════════════
   VECTOR + TEXTURE SECTIONS
════════════════════════════════════════ */
#vector-section{background:var(--ink3);}
#texture-section{background:var(--ink2);}
.two-gen-grid{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start;}
.vector-stage{
  aspect-ratio:1;background:var(--ink);
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
#vectorSvg{width:68%;height:68%;}
.texture-stage{
  aspect-ratio:16/9;border:1.5px solid var(--border);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
#textureCanvas{position:absolute;inset:0;width:100%;height:100%;}
.tex-overlay{
  position:relative;z-index:1;text-align:center;pointer-events:none;
}
.tex-overlay .big{font-family:'Roboto Flex',sans-serif;font-size:clamp(28px,3.5vw,48px);
  letter-spacing:.05em;opacity:.55;}
.tex-overlay .sm{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.25;margin-top:4px;}

/* ════════════════════════════════════════
   GRADIENT COLOR PICKER
════════════════════════════════════════ */
.grad-color-section{
  margin-top:10px;display:flex;flex-direction:column;gap:7px;
}
.grad-slots{
  display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap;
}
.grad-slot{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:44px;padding:4px;border:1.5px solid rgba(255,255,255,.08);
  cursor:pointer;transition:border-color .12s;
}
.grad-slot:hover{border-color:rgba(255,255,255,.22);}
.grad-slot.active{border-color:var(--mag);}
.grad-slot-swatch{
  width:100%;aspect-ratio:1;
  border:1px solid rgba(255,255,255,.12);
}
.grad-slot-label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
}
.mesh-only{display:none;}

/* Palette row */
.grad-palette-row{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:5px 0;
  border-top:1px solid rgba(255,255,255,.05);
}
.grad-pal-label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.2);margin-right:2px;flex-shrink:0;
}
.grad-pal-dot{
  width:18px;height:18px;cursor:pointer;flex-shrink:0;
  border:1.5px solid transparent;transition:border-color .1s,transform .1s;
}
.grad-pal-dot:hover{border-color:rgba(255,255,255,.5);transform:scale(1.15);}
.grad-pal-dot.applied{border-color:#fff;}

/* Custom hex row */
.grad-custom-row{
  display:flex;align-items:center;gap:6px;
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:6px;
}
.grad-hex-input{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:#fff;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.04em;
  padding:4px 7px;outline:none;transition:border-color .15s;
  text-transform:uppercase;
}
.grad-hex-input:focus{border-color:var(--mag);}
.grad-pick-btn{
  width:26px;height:26px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;transition:border-color .1s;flex-shrink:0;padding:0;
}
.grad-pick-btn:hover{border-color:var(--mag);}

/* Live preview strip */
.grad-preview-strip{
  height:12px;transition:background .2s;
  border:1px solid rgba(255,255,255,.06);
}

/* ════════════════════════════════════════
   OKLCH SHADE PANEL
════════════════════════════════════════ */
#oklch-panel{
  display:none;
  border:1px solid rgba(229,0,125,.22);
  background:rgba(0,0,0,.3);
  margin-top:8px;
  animation:shadeIn .2s var(--ease) both;
}
@keyframes shadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.oklch-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 8px;border-bottom:1px solid rgba(255,255,255,.06);
}
.oklch-title{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);display:flex;align-items:center;gap:10px;
}
.oklch-source-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px 3px 6px;
  border:1px solid rgba(255,255,255,.1);
  font-size:11px;letter-spacing:.06em;
}
.oklch-source-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.oklch-actions{display:flex;gap:5px;}
.oklch-x{
  background:none;border:none;color:rgba(255,255,255,.2);
  font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;
  padding:2px 6px;transition:color .12s;
}
.oklch-x:hover{color:#fff;}

/* Shade strip */
.oklch-shades{
  display:flex;height:72px;
  overflow:hidden;
}
.oklch-shade{
  flex:1;position:relative;cursor:pointer;
  transition:flex .2s var(--ease);
}
.oklch-shade:hover{flex:2.2;}
.oklch-shade-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:5px 5px 4px;opacity:0;transition:opacity .12s;
  gap:1px;pointer-events:none;
}
.oklch-shade:hover .oklch-shade-inner{opacity:1;}
.oklch-shade-step{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-family:'DM Mono',monospace;
}
.oklch-shade-hex{
  font-size:11px;letter-spacing:.04em;font-family:'DM Mono',monospace;
}
.oklch-shade-val{
  font-size:11px;letter-spacing:.04em;font-family:'DM Mono',monospace;opacity:.7;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Detail row */
.oklch-detail{
  display:flex;gap:0;border-top:1px solid rgba(255,255,255,.05);
  flex-wrap:wrap;
}
.oklch-stat{
  flex:1;min-width:80px;padding:9px 12px;border-right:1px solid rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:3px;
}
.oklch-stat:last-child{border-right:none;}
.oklch-stat-val{
  font-family:'Roboto Flex',sans-serif;font-size:17px;letter-spacing:.04em;color:#fff;
  line-height:1;
}
.oklch-stat-key{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
}

/* Copy row */
.oklch-copy-row{
  display:flex;gap:4px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.05);
  flex-wrap:wrap;
}
.oklch-copy-btn{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.4);cursor:pointer;transition:all .1s;
}
.oklch-copy-btn:hover{border-color:var(--mag);color:#fff;}
.oklch-copy-btn.copied{border-color:#00a878;color:#00a878;}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer{
  padding:28px 64px;border-top:1.5px solid var(--mag);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.22);
}

/* ════════════════════════════════════════
   TOAST + REVEAL
════════════════════════════════════════ */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--mag);color:#fff;padding:7px 18px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transition:all .22s var(--ease);pointer-events:none;z-index:999;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}

@media(max-width:900px){
  .color-gen-grid,.two-gen-grid{grid-template-columns:1fr;}
  #type-tool{grid-template-columns:1fr;grid-template-rows:40px auto 1fr;height:auto;position:relative;}
  #type-panel{max-height:320px;}
  #type-rpanel{display:none;}
  .section{padding:56px 24px;}
  #nav .nav-links{display:none;}
  footer{flex-direction:column;gap:10px;text-align:center;}
  .type-section-header{padding:40px 24px 28px;flex-direction:column;gap:14px;align-items:flex-start;}
}

/* ════════════════════════════════════════
   EXPORT MODAL
════════════════════════════════════════ */
#export-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
#export-overlay.open{opacity:1;pointer-events:all;}
#export-panel{
  width:100%;max-width:860px;
  background:var(--ink2);
  border:1.5px solid var(--mag-hi);
  border-bottom:none;
  transform:translateY(40px);transition:transform .32s var(--ease);
  max-height:90vh;overflow-y:auto;overflow-x:hidden;
}
#export-overlay.open #export-panel{transform:translateY(0);}

.exp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--border);
  background:rgba(229,0,125,.05);position:sticky;top:0;z-index:2;
  backdrop-filter:blur(8px);
}
.exp-title{
  font-family:'Roboto Flex',sans-serif;font-size:22px;letter-spacing:.06em;
  display:flex;align-items:center;gap:12px;
}
.exp-title .gtag{font-size:11px;letter-spacing:.18em;}
.exp-x{
  background:none;border:none;color:rgba(255,255,255,.35);
  font-size:16px;cursor:pointer;padding:4px 8px;
  font-family:'DM Mono',monospace;transition:color .15s;
}
.exp-x:hover{color:var(--mag);}

/* Platform presets */
.exp-platforms{
  padding:16px 24px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
}
.exp-plat-label{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin-bottom:10px;
}
.plat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:5px;
}
.plat-btn{
  padding:9px 7px;text-align:center;
  background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.07);
  cursor:pointer;transition:all .12s;
}
.plat-btn:hover{border-color:rgba(255,255,255,.2);}
.plat-btn.active{border-color:var(--mag);background:rgba(229,0,125,.08);}
.plat-icon{font-size:15px;display:block;margin-bottom:4px;opacity:.7;}
.plat-name{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);display:block;}
.plat-dim{font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.28);display:block;margin-top:2px;}
.plat-btn.active .plat-name{color:#fff;}
.plat-btn.active .plat-icon{opacity:1;}
.plat-group-label{
  grid-column:1/-1;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.38);padding:10px 2px 3px;
  border-top:1px solid rgba(255,255,255,.06);
}
.plat-group-label:first-child{border-top:none;padding-top:2px;}

/* Tabs */
.exp-tabs{
  display:flex;border-bottom:1px solid var(--border);
}
.exp-tab{
  flex:1;padding:11px 16px;text-align:center;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;color:rgba(255,255,255,.3);
  border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;
  transition:all .15s;font-family:'DM Mono',monospace;
}
.exp-tab:hover{color:rgba(255,255,255,.7);}
.exp-tab.active{color:#fff;border-bottom-color:var(--mag);}

/* Tab panes */
.exp-pane{display:none;padding:20px 24px 28px;}
.exp-pane.active{display:block;}
.exp-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-bottom:16px;
}
.exp-field{display:flex;flex-direction:column;gap:7px;}
.exp-field-label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
}
.exp-segs{display:flex;gap:3px;flex-wrap:wrap;}
.exp-seg{
  padding:6px 12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .1s;
}
.exp-seg:hover{border-color:rgba(255,255,255,.2);color:#fff;}
.exp-seg.active{border-color:var(--mag);color:#fff;background:rgba(229,0,125,.08);}

.exp-quality-row{
  display:flex;align-items:center;gap:10px;margin-top:4px;
}
.exp-quality-row .sl-wrap{flex:1;}
.exp-quality-row .sl-val{
  font-size:11px;color:rgba(255,255,255,.5);width:34px;text-align:right;
  flex-shrink:0;
}

/* Output summary */
.exp-summary{
  display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;
  padding:12px 14px;
  background:rgba(229,0,125,.04);
  border:1px solid rgba(229,0,125,.12);
}
.exp-stat{display:flex;flex-direction:column;gap:2px;}
.exp-stat-val{
  font-family:'Roboto Flex',sans-serif;font-size:20px;
  letter-spacing:.04em;color:#fff;line-height:1;
}
.exp-stat-key{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.exp-stat-sep{
  width:1px;background:rgba(255,255,255,.08);
  align-self:stretch;margin:0 4px;
}

/* Big export buttons */
.exp-actions{display:flex;gap:8px;margin-top:18px;}
.exp-btn{
  flex:1;padding:13px 20px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;border:1.5px solid;
  transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.exp-btn-primary{background:var(--mag);border-color:var(--mag);color:#fff;}
.exp-btn-primary:hover{background:#c8006d;border-color:#c8006d;}
.exp-btn-ghost{background:transparent;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.5);}
.exp-btn-ghost:hover{border-color:#fff;color:#fff;}
.exp-btn:disabled{opacity:.35;cursor:not-allowed;}

/* Video progress */
#rec-progress{
  margin-top:14px;display:none;flex-direction:column;gap:6px;
}
#rec-progress.visible{display:flex;}
.rec-bar-track{height:3px;background:rgba(255,255,255,.08);overflow:hidden;}
.rec-bar-fill{
  height:100%;background:var(--mag);width:0%;
  transition:width .1s linear;
}
.rec-label{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.4);display:flex;align-items:center;gap:8px;
}
.rec-dot{
  width:6px;height:6px;border-radius:50%;background:#f44;
  animation:pulse 1s infinite;
}
.exp-note{
  margin-top:10px;padding:10px 12px;
  background:rgba(255,255,255,.025);border:1px solid var(--border);
  font-size:11px;line-height:1.7;color:rgba(255,255,255,.35);
  letter-spacing:.04em;
}
.exp-note strong{color:rgba(255,255,255,.6);}

/* ════════════════════════════════════════
   PHYSICS PANEL
════════════════════════════════════════ */
.phys-toggle-btn{
  width:100%;padding:7px 12px;border-radius:4px;cursor:pointer;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;transition:all .15s;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);
}
.phys-toggle-btn:hover{border-color:var(--mag);color:var(--mag);}
.phys-toggle-btn.active{
  background:rgba(229,0,125,.12);border-color:var(--mag);color:var(--mag);
}
.phys-props{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);}
.phys-kick-row{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px;
}
.phys-kick-btn{
  padding:5px 8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:3px;color:rgba(255,255,255,.5);font-size:11px;cursor:pointer;
  letter-spacing:.05em;transition:all .12s;
}
.phys-kick-btn:hover{border-color:var(--mag);color:var(--mag);background:rgba(229,0,125,.08);}