/* ============================================================
   HOVERTRON — page components (home / leaderboards / rankings)
   builds on styles.css tokens
   ============================================================ */

/* scanline toggle */
body.no-scan::after { display: none; }
body { opacity: 0; transition: opacity .4s ease; }
body.ready { opacity: 1; }

/* ---------- brand wordmark in nav uses a logo mark + text ---------- */
.brand .word { background: linear-gradient(90deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-logo { height: 23px; width: auto; display: block; }
.footer-logo { height: 19px; width: auto; display: block; opacity: .92; }
.hero-logo { width: min(100%, 560px); height: auto; display: block; margin: 4px 0 0; filter: drop-shadow(0 4px 24px rgba(0,0,0,.5)) drop-shadow(0 0 18px color-mix(in oklab, var(--accent) 14%, transparent)); }
@media (max-width: 940px) { .hero-logo { width: min(100%, 480px); } }

/* ============================================================
   THEME SWITCHER
   ============================================================ */
.theme-wrap { position: relative; margin-left: 8px; }
#themeBtn {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--text-dim);
  cursor: pointer; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition: color .15s, border-color .15s;
}
#themeBtn:hover { color: var(--accent); border-color: var(--accent); }
#themeBtn svg { width: 18px; height: 18px; }
.theme-pop {
  position: absolute; right: 0; top: 48px; width: 232px; padding: 16px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: 0 24px 60px rgba(0,0,0,.6); opacity: 0; transform: translateY(-6px);
  pointer-events: none; transition: opacity .16s, transform .16s; z-index: 200;
}
.theme-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.theme-pop h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.theme-pop .grp + .grp { margin-top: 16px; }
#accentSwatches { display: flex; gap: 8px; }
.sw { width: 34px; height: 34px; border: 2px solid transparent; background: var(--sw); cursor: pointer;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow: 0 0 12px var(--sw); transition: transform .12s; }
.sw:hover { transform: scale(1.08); }
.sw.on { border-color: var(--text); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--text-dim); }
.toggle-row + .toggle-row { border-top: 1px solid var(--line); }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; background: var(--panel-3); border: 1px solid var(--line-2); transition: background .15s; pointer-events: none;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: var(--text-faint); transition: transform .15s, background .15s; }
.switch input:checked + span { background: color-mix(in oklab, var(--accent) 30%, var(--panel-3)); }
.switch input:checked + span::after { transform: translateX(18px); background: var(--accent); }

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero { position: relative; padding: 60px 0 40px; overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(color-mix(in oklab, var(--accent) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 16%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(120% 80% at 50% 8%, #000 4%, transparent 64%);
  transform: perspective(720px) rotateX(60deg) scale(1.5); transform-origin: top; opacity: .22;
}
.hero-inner { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 940px) { .hero-inner { grid-template-columns: 1fr; gap: 28px; } }

.hero-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero h1 {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(58px, 9vw, 132px); line-height: .84; letter-spacing: .005em; margin: 0;
}
.hero h1 .l2 { color: transparent; -webkit-text-stroke: 1.5px var(--accent); text-stroke: 1.5px var(--accent); filter: drop-shadow(0 0 18px color-mix(in oklab, var(--accent) 50%, transparent)); }
.hero .lede { margin: 24px 0 32px; font-size: 18px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
/* quiet inline link — demotes the third action out of button soup */
.hero-quiet { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; transition: color .15s, gap .15s; }
.hero-quiet:hover { color: var(--accent); gap: 11px; }
.hero-quiet::after { content: '\2192'; }

/* trailer */
.trailer { position: relative; border: 1px solid var(--line-2);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px var(--line) inset; background: #000; aspect-ratio: 16/9; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-label { position: absolute; top: 14px; left: 16px; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.trailer-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* marquee strip under hero */
.marquee { border-block: 1px solid var(--line); background: var(--bg-1); overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 40px; padding: 13px 20px; animation: slide 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 40px; }
.marquee span::after { content: '◆'; color: var(--accent); font-size: 9px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head h2 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4vw, 46px); line-height: .95; margin: 8px 0 0; letter-spacing: .01em; }
.sec-link { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.sec-link:hover { gap: 12px; }

/* ============================================================
   HOME — content grid (fastest + side rail)
   ============================================================ */
.home-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 940px) { .home-cols { grid-template-columns: 1fr; } }

.fast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px) { .fast-grid { grid-template-columns: 1fr; } }
.fast-card { display: grid; gap: 9px; padding: 16px 18px; background: linear-gradient(180deg, var(--panel), var(--bg-1)); border: 1px solid var(--line); position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: border-color .15s, transform .14s; }
.fast-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.fast-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%); }
.fc-zone { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.fc-zone .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.fc-name { font-weight: 600; font-size: 17px; }
.fc-time { font-size: 26px; }
.fc-holder { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fc-holder .ava { width: 22px; height: 22px; }

/* side rail mini leaderboard */
.rail { background: linear-gradient(180deg, var(--panel), var(--bg-1)); border: 1px solid var(--line); padding: 6px 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.mini-row { display: grid; grid-template-columns: 26px 30px 1fr auto; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); transition: background .14s; }
.mini-row:last-child { border-bottom: 0; }
.mini-row:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.mini-rank { font-family: var(--cond); font-weight: 800; font-size: 20px; color: var(--text-faint); }
.mini-row:nth-child(1) .mini-rank { color: var(--amber); }
.mini-pts { font-size: 14px; color: var(--text-dim); }
.rail-foot { padding: 14px 18px; }

/* ============================================================
   ZONE TILES
   ============================================================ */
.zone-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 940px) { .zone-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .zone-grid { grid-template-columns: 1fr; } }
.zone-tile { position: relative; overflow: hidden; padding: 22px 18px 18px; min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--zc) 18%, var(--bg-1)), var(--bg-1)); border: 1px solid var(--line); transition: transform .16s, border-color .16s;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.zone-tile:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--zc) 60%, transparent); }
.zt-grid { position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(color-mix(in oklab, var(--zc) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--zc) 30%, transparent) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 75%); }
.zone-tile > * { position: relative; z-index: 1; }
.zt-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--zc); align-self: flex-start; padding: 3px 8px; border: 1px solid color-mix(in oklab, var(--zc) 45%, transparent); margin-bottom: auto; }
.zt-name { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; }
.zt-meta { font-size: 12px; color: var(--text-dim); }
.zt-meta b { color: var(--text); font-family: var(--mono); }

/* ============================================================
   FINAL CTA band
   ============================================================ */
.cta-band { position: relative; overflow: hidden; padding: 64px 0; text-align: center; border-block: 1px solid var(--line-2); background: linear-gradient(180deg, var(--panel), var(--bg-1)); }
.cta-band h2 { font-family: var(--brand); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5.5vw, 64px); line-height: .92; margin: 0 0 14px; letter-spacing: .01em; }
.cta-band .lede { margin: 0 auto 28px; text-align: center; }
.cta-band .hero-cta { justify-content: center; }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(700px 300px at 50% 120%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%); }
.cta-band .wrap { position: relative; z-index: 1; }

/* ============================================================
   TABLE: shared grid columns + extra cells
   ============================================================ */
.idx { font-family: var(--mono); font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.idx.top { color: var(--amber); font-weight: 700; }
.num-cell { font-size: 14px; color: var(--text-dim); text-align: right; }
.num-cell .slash { color: var(--text-faint); margin: 0 3px; }
.t-main { } .time .ms { color: var(--text-faint); font-weight: 500; }
.empty { padding: 60px 20px; text-align: center; color: var(--text-faint); font-size: 15px; }

/* sort arrows */
.board-head .sortable::after { content: attr(data-arrow); font-size: 9px; margin-left: 6px; color: var(--accent); }

/* leaderboards grid */
.lb .board-head, .lb .lrow { grid-template-columns: 40px minmax(160px, 1.7fr) 1.05fr 0.9fr 1.2fr 0.9fr 0.7fr; }
.lb .num-cell, .lb .board-head .c-pr { text-align: right; }

/* toolbar */
.toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.search-box { position: relative; flex: 1 1 260px; max-width: 340px; }
.search-box input { width: 100%; font-family: var(--font); font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--line-2); padding: 11px 14px 11px 38px;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.search-box input::placeholder { color: var(--text-faint); }
.search-box input:focus { outline: none; border-color: var(--accent); }
.search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); }
.toolbar-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.res-count { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-left: auto; }
.res-count b { color: var(--accent); font-family: var(--mono); }

/* ============================================================
   RANKINGS PAGE
   ============================================================ */
.rk .board-head, .rk .lrow { grid-template-columns: 44px minmax(150px, 1.5fr) minmax(160px, 1.3fr) 0.7fr 0.6fr 0.6fr 0.6fr; }
.medal-cell { text-align: center; }
.m { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; font-family: var(--mono); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
.m-g { background: color-mix(in oklab, var(--amber) 22%, transparent); color: var(--amber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--amber) 40%, transparent); }
.m-s { background: rgba(190,205,225,.14); color: #cfd9ea; box-shadow: inset 0 0 0 1px rgba(190,205,225,.3); }
.m-b { background: color-mix(in oklab, #d08442 22%, transparent); color: #e0996a; box-shadow: inset 0 0 0 1px rgba(208,132,66,.4); }
.m:empty::before, .m { } /* zero stays visible but muted */
.medal-cell .m { opacity: 1; }
.rrow .medal-cell .m { }
.pts-cell { display: flex; align-items: center; gap: 12px; }
.pts-bar { flex: 1; height: 7px; background: var(--panel-3); overflow: hidden; min-width: 60px;
  clip-path: polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); }
.pts-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-deep), var(--accent)); box-shadow: 0 0 10px var(--accent); }
.pts-val { font-size: 14px; color: var(--text); min-width: 52px; text-align: right; }

/* mute zero medals so the colored ones pop */
.medal-cell .m { transition: opacity .15s; }

/* ---------- PODIUM ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; margin-bottom: 40px; }
@media (max-width: 720px) { .podium { grid-template-columns: 1fr; } }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px 22px; text-align: center;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-1)); border: 1px solid var(--line-2); transition: transform .16s, border-color .16s;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.pod:hover { transform: translateY(-4px); }
.pod-1 { border-color: color-mix(in oklab, var(--amber) 55%, transparent); box-shadow: 0 0 40px color-mix(in oklab, var(--amber) 18%, transparent); padding-top: 34px; }
.pod-1 { background: linear-gradient(180deg, color-mix(in oklab, var(--amber) 14%, var(--panel-2)), var(--bg-1)); }
.pod-rank { font-family: var(--cond); font-weight: 800; font-size: 40px; line-height: 1; color: var(--text-faint); }
.pod-1 .pod-rank { color: var(--amber); font-size: 52px; text-shadow: 0 0 22px color-mix(in oklab, var(--amber) 50%, transparent); }
.pod-2 .pod-rank { color: #cfd9ea; }
.pod-3 .pod-rank { color: #e0996a; }
.pod-ava { width: 66px; height: 66px; border: 1px solid var(--line-2);
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); object-fit: cover; background: var(--panel-3); }
.pod-1 .pod-ava { width: 82px; height: 82px; border-color: color-mix(in oklab, var(--amber) 60%, transparent); }
.pod-name { font-family: var(--cond); font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .02em; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-pts { font-size: 13px; color: var(--text-dim); }
.pod-pts b { font-family: var(--mono); color: var(--text); font-size: 16px; }
.pod-medals { display: flex; gap: 6px; margin-top: 2px; }
.pod-base { display: none; }

/* avatar empty fallback */
.ava-empty { display: inline-block; background: linear-gradient(135deg, var(--panel-3), var(--panel-2)); }

/* page hero (sub pages) */
.page-hero { padding: 48px 0 30px; position: relative; }
.page-hero .lede { margin-top: 16px; }

/* responsive: collapse some columns on small screens */
@media (max-width: 760px) {
  .lb .board-head, .lb .lrow { grid-template-columns: 30px minmax(120px,1.6fr) 1fr 1fr; }
  .lb .c-board, .lb .c-pl, .lb .lrow > .vpill, .lb .lrow .num-cell, .lb .board-head .c-board, .lb .board-head .c-pr { display: none; }
  .lb .lrow > span:nth-child(4) { display: none; }
  .rk .board-head, .rk .lrow { grid-template-columns: 34px minmax(110px,1.4fr) 1fr 0.6fr; }
  .rk .medal-cell, .rk .board-head .c-m { display: none; }
}

/* ============================================================
   CUSTOM LEVELS
   ============================================================ */
.custom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 940px) { .custom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .custom-grid { grid-template-columns: 1fr; } }
.clevel { background: linear-gradient(180deg, var(--panel), var(--bg-1)); border: 1px solid var(--line); display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: border-color .15s, transform .15s; }
.clevel:hover { border-color: var(--line-2); transform: translateY(-3px); }
.cl-shot { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, var(--panel-2) 0 12px, var(--panel) 12px 24px); }
.cl-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; background: #07060f; }
.clevel:hover .cl-shot img { transform: scale(1.05); }
.cl-shot.noimg { background: repeating-linear-gradient(45deg, var(--panel-2) 0 12px, var(--panel) 12px 24px); }
.cl-shot.noimg img { display: none; }
.cl-time { position: absolute; right: 10px; bottom: 10px; font-size: 16px; padding: 4px 9px; background: rgba(7,6,15,.82); border: 1px solid var(--line-2); backdrop-filter: blur(4px);
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.cl-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cl-name { font-family: var(--cond); font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.cl-date { font-family: var(--mono); font-size: 11px; color: var(--text-faint); flex: none; }
.cl-author { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); align-self: flex-start; }
.cl-author .ava { width: 22px; height: 22px; }
.cl-author:hover { color: var(--accent); }
.cl-rating { display: flex; align-items: center; gap: 8px; }
.stars { letter-spacing: 2px; font-size: 14px; }
.star { color: var(--panel-3); }
.star.on { color: var(--amber); text-shadow: 0 0 8px color-mix(in oklab, var(--amber) 50%, transparent); }
.rcount { font-size: 12px; color: var(--text-faint); }
.cl-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-faint); letter-spacing: .04em; margin-top: auto; }
.cl-meta b { color: var(--text); font-family: var(--mono); }
.cl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.cl-actions .btn { font-size: 11px; padding: 10px 12px; justify-content: center; }
.cl-copy.done { color: var(--lime); border-color: var(--lime); }

.sortbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.sortbar .filter-label { min-width: auto; }

/* ============================================================
   LEVEL EDITOR
   ============================================================ */
.ed-shell { display: grid; grid-template-columns: 232px 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .ed-shell { grid-template-columns: 1fr; } }
.ed-panel { background: linear-gradient(180deg, var(--panel), var(--bg-1)); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.ed-side { display: flex; flex-direction: column; }
.ed-grp { padding: 16px; border-bottom: 1px solid var(--line); }
.ed-grp:last-child { border-bottom: 0; }
.ed-grp h4 { margin: 0 0 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-dim);
  background: var(--bg-1); border: 1px solid var(--line); cursor: pointer; text-align: left;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); transition: all .13s; }
.tool:hover { color: var(--text); border-color: var(--line-2); }
.tool.on { color: #06121a; background: var(--accent); border-color: transparent; box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 40%, transparent); }
.tool svg { width: 15px; height: 15px; flex: none; }
.tool.wide { grid-column: 1 / -1; }

.swatch-list { display: flex; flex-direction: column; gap: 6px; }
.cswatch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-1); border: 1px solid var(--line); cursor: pointer; font-size: 12.5px; color: var(--text-dim); font-weight: 600; letter-spacing: .04em;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); transition: all .13s; }
.cswatch:hover { color: var(--text); border-color: var(--line-2); }
.cswatch.on { border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.cswatch .sw-chip { width: 18px; height: 18px; flex: none; border: 1px solid rgba(255,255,255,.18); }
.cswatch .sw-chip.empty { background-image: repeating-linear-gradient(45deg, #2a2350 0 5px, #1a1538 5px 10px); }

.ed-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.ed-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-dim); }
.ed-row .val { font-family: var(--mono); color: var(--accent); }
.ed-actions { display: flex; flex-direction: column; gap: 8px; }
.ed-actions .btn { justify-content: center; font-size: 12px; padding: 11px; }

/* canvas stage */
.ed-stage-wrap { display: flex; flex-direction: column; gap: 12px; }
.ed-toolbar2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
.ed-toolbar2 .seg { display: flex; gap: 6px; }
.ed-stage { position: relative; background:
    linear-gradient(180deg, #0a0a14, #060610);
  border: 1px solid var(--line-2); overflow: auto; padding: 24px; display: grid; place-items: center; min-height: 440px; }
#edCanvas { image-rendering: pixelated; background: #05050c; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px rgba(0,0,0,.5); cursor: crosshair; touch-action: none; }
.ed-readout { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.ed-readout b { color: var(--text-dim); }
.ed-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); letter-spacing: .04em; }
.ed-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ed-legend i { width: 11px; height: 11px; display: inline-block; }