/* ============================================================
   Holocron — design system
   Intent: quiet surfaces, one accent, type does the work.
   Contrast targets: body text >= 7:1, secondary >= 4.5:1,
   interactive borders >= 3:1 (WCAG 2.2 AA / AAA body).
   ============================================================ */

:root{
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --fs-xs:11.5px; --fs-sm:13px; --fs-md:14.5px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:30px;
  --ff: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --ff-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 180ms;

  /* Aspect hues — kept consistent across themes */
  --a-vigilance:#2f7fd4; --a-command:#2e9e6b; --a-aggression:#d04a3f;
  --a-cunning:#d8a218;   --a-villainy:#7d5fd0; --a-heroism:#c9922b; --a-neutral:#8b95a3;
}

/* ---------- Dark (default) ---------- */
[data-theme="dark"]{
  --bg:#0d1117; --bg-2:#121922; --surface:#161e28; --surface-2:#1c2632;
  --line:#2a3644; --line-strong:#3b4a5c;
  --tx:#eaf0f7;          /* 15.8:1 on --bg */
  --tx-2:#a8b6c6;        /* 7.6:1  */
  --tx-3:#7e8d9f;        /* 4.8:1  */
  --accent:#58a6ff; --accent-tx:#07121f; --accent-soft:#12283f;
  --ok:#3fb950; --warn:#e3b341; --bad:#f85149;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.7);
  --overlay: rgba(4,7,11,.72);
  color-scheme: dark;
}
/* ---------- Light ---------- */
[data-theme="light"]{
  --bg:#f6f8fa; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f0f3f7;
  --line:#d8dfe7; --line-strong:#b6c1cd;
  --tx:#111820;          /* 16.4:1 */
  --tx-2:#4a5663;        /* 7.9:1  */
  --tx-3:#6b7785;        /* 4.9:1  */
  --accent:#0a5fd0; --accent-tx:#ffffff; --accent-soft:#e3edfc;
  --ok:#1a7f37; --warn:#9a6700; --bad:#c62f27;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 26px -14px rgba(16,24,40,.28);
  --overlay: rgba(23,30,38,.5);
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:var(--fs-md)/1.55 var(--ff);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.015em; line-height:1.25}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit; color:inherit}
img{display:block; max-width:100%}
[hidden]{display:none !important}
::selection{background:var(--accent-soft); color:var(--tx)}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}

/* Scrollbars */
*{scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:var(--r-full); border:3px solid transparent; background-clip:content-box}

/* ============================ BOOT ============================ */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:9000}
.boot-inner{text-align:center;color:var(--tx-2)}
.spinner{width:30px;height:30px;margin:0 auto var(--sp-4);border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ AUTH ============================ */
.auth-gate{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:var(--sp-5);
  background:
    radial-gradient(1100px 520px at 12% -12%, var(--accent-soft), transparent 62%),
    var(--bg);}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow)}
.auth-brand{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-5);color:var(--accent)}
.auth-brand h1{font-size:var(--fs-xl);color:var(--tx)}
.auth-brand p{font-size:var(--fs-sm);color:var(--tx-3)}
.auth-error{color:var(--bad);font-size:var(--fs-sm);margin:var(--sp-2) 0 0}
.auth-foot{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--tx-3);text-align:center;line-height:1.6}

.seg{display:flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--r-md);margin-bottom:var(--sp-4)}
.seg-btn{flex:1;padding:8px;border:0;border-radius:calc(var(--r-md) - 3px);background:transparent;color:var(--tx-2);
  font-size:var(--fs-sm);font-weight:560;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur)}
.seg-btn.is-active{background:var(--surface);color:var(--tx);box-shadow:var(--shadow)}
[data-theme="light"] .seg-btn.is-active{box-shadow:0 1px 2px rgba(16,24,40,.1)}

.field{display:block;margin-bottom:var(--sp-3)}
.field>span{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--tx-2);margin-bottom:5px;letter-spacing:.02em;text-transform:uppercase}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:9px 11px;background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);transition:border-color var(--dur),box-shadow var(--dur)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder{color:var(--tx-3)}
.check{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-sm);color:var(--tx-2);margin:var(--sp-3) 0;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--accent);width:15px;height:15px;flex:none}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--tx);font-size:var(--fs-sm);font-weight:560;
  cursor:pointer;white-space:nowrap;transition:transform 90ms var(--ease),background var(--dur),border-color var(--dur),opacity var(--dur)}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:var(--accent-tx);border-color:transparent}
.btn-primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--tx-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--tx)}
.btn-danger{color:var(--bad);border-color:var(--line-strong)}
.btn-danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.btn-sm{padding:5px 10px;font-size:var(--fs-xs)}
.btn-block{width:100%;margin-top:var(--sp-2)}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;color:var(--tx-2);cursor:pointer;transition:background var(--dur),color var(--dur)}
.icon-btn:hover{background:var(--surface-2);color:var(--tx)}

/* ============================ TOPBAR ============================ */
.topbar{position:sticky;top:0;z-index:600;display:flex;align-items:center;gap:var(--sp-4);
  height:56px;padding:0 var(--sp-4);background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:680;letter-spacing:-.02em;color:var(--tx)}
.brand:hover{text-decoration:none}
.brand svg{color:var(--accent)}
.nav{display:flex;gap:2px;margin-left:var(--sp-3)}
.nav a{padding:6px 12px;border-radius:var(--r-sm);color:var(--tx-2);font-size:var(--fs-sm);font-weight:560;
  position:relative;transition:color var(--dur),background var(--dur)}
.nav a:hover{color:var(--tx);background:var(--surface-2);text-decoration:none}
.nav a.is-active{color:var(--tx);background:var(--surface-2)}
.nav a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:-11px;height:2px;background:var(--accent);border-radius:2px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.sync-pill{font-size:var(--fs-xs);padding:3px 9px;border-radius:var(--r-full);background:var(--surface-2);
  color:var(--tx-3);border:1px solid var(--line);font-weight:560}
.sync-pill.is-live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.sync-pill.is-busy{color:var(--accent)}
[data-theme="dark"] .ico-sun,[data-theme="light"] .ico-moon{display:none}
.only-mobile{display:none}

.menu-wrap{position:relative}
.avatar-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--tx);font-size:var(--fs-sm);font-weight:680;cursor:pointer;text-transform:uppercase}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:5px;z-index:700;
  animation:pop 140ms var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.menu-head{padding:9px 11px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-head strong{display:block;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis}
.menu-head span{font-size:var(--fs-xs);color:var(--tx-3)}
.menu-item{display:block;width:100%;text-align:left;padding:8px 11px;border:0;background:transparent;
  border-radius:var(--r-xs);font-size:var(--fs-sm);cursor:pointer;color:var(--tx-2)}
.menu-item:hover{background:var(--surface-2);color:var(--tx)}
.menu-item.danger{color:var(--bad)}

/* ============================ LAYOUT ============================ */
main{max-width:1500px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7)}
.page-head{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.page-head .sub{color:var(--tx-3);font-size:var(--fs-sm);margin-top:3px}
.page-head .spacer{flex:1}
.row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
.card h3{margin-bottom:var(--sp-3)}
.muted{color:var(--tx-3)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.num{font-family:var(--ff-num);font-variant-numeric:tabular-nums}
.divider{height:1px;background:var(--line);margin:var(--sp-4) 0}
.empty{text-align:center;padding:var(--sp-7) var(--sp-4);color:var(--tx-3);border:1px dashed var(--line-strong);border-radius:var(--r-md)}
.empty h3{color:var(--tx-2);margin-bottom:6px}

/* ============================ DECK LIST ============================ */
.deck-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.deck-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  cursor:pointer;transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur);position:relative}
.deck-tile:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.deck-tile .art{height:110px;background:var(--surface-2);position:relative;overflow:hidden;display:flex}
.deck-tile .art img{width:50%;height:100%;object-fit:cover;object-position:center 26%}
.deck-tile .art .none{margin:auto;color:var(--tx-3);font-size:var(--fs-xs)}
.deck-tile .body{padding:var(--sp-3)}
.deck-tile h4{margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-meta{display:flex;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--tx-3);margin-top:6px;flex-wrap:wrap}
.tile-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity var(--dur)}
.deck-tile:hover .tile-actions,.deck-tile:focus-within .tile-actions{opacity:1}
.tile-actions .icon-btn{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;background:var(--surface-2);color:var(--tx-2);border:1px solid var(--line)}
.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.badge.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent)}

/* Aspect dots */
.aspects{display:inline-flex;gap:3px;align-items:center}
.adot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.adot[data-a="Vigilance"]{background:var(--a-vigilance)} .adot[data-a="Command"]{background:var(--a-command)}
.adot[data-a="Aggression"]{background:var(--a-aggression)} .adot[data-a="Cunning"]{background:var(--a-cunning)}
.adot[data-a="Villainy"]{background:var(--a-villainy)} .adot[data-a="Heroism"]{background:var(--a-heroism)}
.adot[data-a="Neutral"]{background:var(--a-neutral)}

/* ============================ BUILDER ============================ */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-4);align-items:start}
.pane{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.pane-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-bottom:1px solid var(--line);flex-wrap:wrap}
.pane-body{padding:var(--sp-3)}
.sticky-side{position:sticky;top:72px;max-height:calc(100vh - 92px);overflow:auto}

.deck-title-input{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.02em;background:transparent;border:1px solid transparent;
  border-radius:var(--r-sm);padding:3px 7px;width:100%;max-width:440px;transition:border-color var(--dur),background var(--dur)}
.deck-title-input:hover{border-color:var(--line)}
.deck-title-input:focus{background:var(--bg-2);border-color:var(--accent)}

/* identity strip */
.identity{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.slot{border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--sp-2);text-align:center;
  cursor:pointer;background:var(--bg-2);transition:border-color var(--dur),background var(--dur)}
.slot:hover{border-color:var(--accent);background:var(--accent-soft)}
.slot .lbl{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--tx-3);font-weight:650}
.slot img{border-radius:var(--r-xs);margin:6px auto 4px;width:100%}
.slot .nm{font-size:var(--fs-xs);color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot.filled{border-style:solid;border-color:var(--line)}

/* filter bar */
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.filters input[type=search]{min-width:180px;flex:1}
.chip{padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--line-strong);background:var(--surface);
  font-size:var(--fs-xs);font-weight:560;color:var(--tx-2);cursor:pointer;user-select:none;
  transition:background var(--dur),color var(--dur),border-color var(--dur),transform 90ms var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--tx)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--accent);border-color:transparent;color:var(--accent-tx)}
.chip[data-aspect].on{color:#fff}
.chip[data-aspect="Vigilance"].on{background:var(--a-vigilance)} .chip[data-aspect="Command"].on{background:var(--a-command)}
.chip[data-aspect="Aggression"].on{background:var(--a-aggression)} .chip[data-aspect="Cunning"].on{background:var(--a-cunning)}
.chip[data-aspect="Villainy"].on{background:var(--a-villainy)} .chip[data-aspect="Heroism"].on{background:var(--a-heroism)}
.chip[data-aspect="Neutral"].on{background:var(--a-neutral)}

/* card results */
.results{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(128px,1fr));padding:var(--sp-3)}
.results.dense{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.cardlet{position:relative;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--surface-2);
  aspect-ratio:5/7;transition:transform 140ms var(--ease),box-shadow 140ms var(--ease)}
.cardlet.leader,.cardlet.base{aspect-ratio:7/5}
.cardlet:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);z-index:2}
.cardlet img{width:100%;height:100%;object-fit:cover;background:var(--surface-2)}
.cardlet .fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:6px;font-size:10px;line-height:1.25;color:var(--tx-2);background:var(--surface-2)}
.cardlet.unowned img{filter:grayscale(.85) brightness(.72)}
.cardlet .count{position:absolute;left:5px;bottom:5px;padding:1px 7px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);
  font-size:11px;font-weight:700;font-family:var(--ff-num);border:1px solid var(--line)}
.cardlet .own{position:absolute;right:5px;bottom:5px;padding:1px 6px;border-radius:var(--r-full);font-size:10px;font-weight:650;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--tx-3)}
.cardlet .own.short{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.cardlet .pen{position:absolute;top:5px;right:5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;background:var(--bad);color:#fff}
.cardlet .qa{position:absolute;inset:auto 0 0 0;display:flex;opacity:0;transition:opacity var(--dur)}
.cardlet:hover .qa{opacity:1}
.qa button{flex:1;border:0;padding:6px 0;font-size:12px;font-weight:700;cursor:pointer;
  background:color-mix(in srgb,var(--bg) 84%,transparent);color:var(--tx);backdrop-filter:blur(8px)}
.qa button:hover{background:var(--accent);color:var(--accent-tx)}

/* deck list rows */
.grouphead{display:flex;align-items:baseline;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-1);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3);font-weight:680}
.grouphead .ct{margin-left:auto;font-family:var(--ff-num)}
.deckrow{display:flex;align-items:center;gap:var(--sp-2);padding:5px 7px;border-radius:var(--r-xs);cursor:pointer;
  transition:background var(--dur)}
.deckrow:hover{background:var(--surface-2)}
.deckrow .qty{font-family:var(--ff-num);font-size:var(--fs-xs);font-weight:700;color:var(--tx-2);min-width:20px}
.deckrow .cost{width:19px;height:19px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none;
  background:var(--surface-2);font-size:11px;font-weight:700;font-family:var(--ff-num);border:1px solid var(--line)}
.deckrow .nm{flex:1;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deckrow.missing .nm{color:var(--warn)}
.deckrow .stepper{display:flex;gap:2px;opacity:0;transition:opacity var(--dur)}
.deckrow:hover .stepper,.deckrow:focus-within .stepper{opacity:1}
.stepper button{width:20px;height:20px;border-radius:var(--r-xs);border:1px solid var(--line-strong);
  background:var(--surface);cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center;color:var(--tx-2)}
.stepper button:hover{background:var(--accent);color:var(--accent-tx);border-color:transparent}

/* curve chart */
.curve{display:flex;align-items:flex-end;gap:5px;height:104px;padding-top:var(--sp-2)}
.curve .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.curve .fill{width:100%;background:var(--accent);border-radius:4px 4px 2px 2px;min-height:2px;
  transition:height 420ms var(--ease);position:relative}
.curve .fill span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10px;
  font-family:var(--ff-num);color:var(--tx-2)}
.curve .lb{font-size:10px;color:var(--tx-3);font-family:var(--ff-num)}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:var(--sp-2)}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 9px}
.stat .v{font-size:var(--fs-lg);font-weight:680;font-family:var(--ff-num);line-height:1.15}
.stat .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3);font-weight:650}

.meter{height:7px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden;display:flex}
.meter i{display:block;height:100%}

/* validation list */
.vlist{display:flex;flex-direction:column;gap:6px}
.vitem{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.45}
.vitem .dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none}
.vitem.err .dot{background:var(--bad)} .vitem.warn .dot{background:var(--warn)} .vitem.ok .dot{background:var(--ok)}
.vitem.err{color:var(--tx)} .vitem.warn{color:var(--tx-2)} .vitem.ok{color:var(--tx-3)}

/* suggestions */
.sugg{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.sugg:last-child{border-bottom:0}
.sugg img{width:62px;border-radius:var(--r-xs);flex:none}
.sugg .why{font-size:var(--fs-sm);color:var(--tx-2);line-height:1.5}
.sugg .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;padding:0 var(--sp-3)}
.tab{padding:9px 13px;border:0;background:transparent;color:var(--tx-3);font-size:var(--fs-sm);font-weight:580;
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--dur),border-color var(--dur)}
.tab:hover{color:var(--tx-2)}
.tab.is-active{color:var(--tx);border-bottom-color:var(--accent)}

/* table */
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--tx-3);
  font-weight:650;padding:7px 9px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 9px;border-bottom:1px solid var(--line);color:var(--tx-2)}
.tbl tr:hover td{background:var(--surface-2)}
.tbl td.r,.tbl th.r{text-align:right;font-family:var(--ff-num)}

/* history timeline */
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-item{position:relative;padding-bottom:var(--sp-4)}
.tl-item::before{content:"";position:absolute;left:-19px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong)}
.tl-item.add::before{border-color:var(--ok)} .tl-item.rem::before{border-color:var(--bad)}
.tl-time{font-size:var(--fs-xs);color:var(--tx-3);font-family:var(--ff-num)}
.tl-body{font-size:var(--fs-sm);color:var(--tx-2);margin-top:2px}
.ins{color:var(--ok)} .del{color:var(--bad)}

/* draw sim */
.hand{display:flex;gap:var(--sp-2);flex-wrap:wrap;min-height:150px}
.hand .cardlet{width:104px;flex:none}
.hand .cardlet:hover{transform:translateY(-8px) scale(1.04)}

/* ============================ MODAL ============================ */
.modal-root{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--sp-4);
  background:var(--overlay);backdrop-filter:blur(3px);animation:fade 140ms var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  width:min(960px,100%);max-height:90vh;display:flex;flex-direction:column;animation:rise 180ms var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal.sm{width:min(460px,100%)}
.modal-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--line)}
.modal-head h3{flex:1}
.modal-body{padding:var(--sp-4);overflow:auto}
.modal-foot{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);display:flex;gap:var(--sp-2);justify-content:flex-end}

.cardpeek{position:fixed;z-index:1500;pointer-events:none;filter:drop-shadow(0 18px 36px rgba(0,0,0,.55))}
.cardpeek img{width:280px;border-radius:10px}

/* ============================ TOASTS ============================ */
.toasts{position:fixed;bottom:var(--sp-4);right:var(--sp-4);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:10px 14px;font-size:var(--fs-sm);box-shadow:var(--shadow);max-width:340px;
  animation:slidein 200ms var(--ease)}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* progress */
.prog{height:6px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);transition:width 220ms var(--ease)}

/* settings rows */
.setrow{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow .txt{flex:1;min-width:0}
.setrow .txt strong{display:block;font-size:var(--fs-sm);font-weight:600}
.setrow .txt span{font-size:var(--fs-xs);color:var(--tx-3);line-height:1.5;display:block;margin-top:2px}
.switch{position:relative;width:40px;height:23px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--line-strong);border-radius:var(--r-full);cursor:pointer;transition:background var(--dur)}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;
  transition:transform var(--dur) var(--ease)}
.switch input:checked + i{background:var(--accent)}
.switch input:checked + i::after{transform:translateX(17px)}
.switch input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1100px){
  .builder{grid-template-columns:1fr}
  .sticky-side{position:static;max-height:none}
}
@media (max-width:720px){
  main{padding:var(--sp-4) var(--sp-3) var(--sp-7)}
  .only-mobile{display:grid}
  .nav{position:fixed;inset:56px 0 auto 0;flex-direction:column;background:var(--surface);
    border-bottom:1px solid var(--line);padding:var(--sp-2);gap:2px;display:none;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a.is-active::after{display:none}
  .brand span{display:none}
  .results{grid-template-columns:repeat(auto-fill,minmax(102px,1fr))}
  h1{font-size:24px}
  .cardpeek{display:none !important}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* card detail layout */
.card-detail{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:20px}
.card-detail > div:first-child img{border-radius:10px}
@media (max-width:640px){ .card-detail{grid-template-columns:1fr} .card-detail > div:first-child{max-width:220px;margin:0 auto} }

/* print / export surface */
.export-sheet{background:#fff;color:#111;padding:24px;width:1200px}