:root{
  --bg:#11151c; --panel:#1a2029; --panel2:#222a35; --line:#2c3643;
  --txt:#e6ebf2; --dim:#8b97a7; --accent:#5aa9e6; --good:#4caf72;
  --bad:#e0556b; --warn:#e0b34c; --gold:#caa84a;
  --ctrl-h:40px; --radius:8px; --radius-sm:6px; --radius-pill:999px;
  --gap:10px; --pad-x:20px;
  --ring:0 0 0 2px rgba(90,169,230,.55);
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --card-w:176px;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b97a7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--txt);overflow-x:hidden;max-width:100%}
a{color:var(--accent)}
button{font:inherit;touch-action:manipulation}
:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--accent)}

/* ---- header ---- */
header{padding:16px var(--pad-x);border-bottom:1px solid var(--line);
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;background:var(--panel)}
.title h1{margin:0 0 4px;font-size:19px}
.sub{margin:0;color:var(--dim);max-width:760px;font-size:13px}
.sub em{color:var(--txt);font-style:normal;font-weight:600}
.stats{display:flex;gap:10px;margin-left:auto}
.stat{text-align:center;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 14px;min-width:66px}
.stat b{display:block;font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}

/* ---- control toolbar (consistent fields) ---- */
.toolbar{position:sticky;top:0;z-index:6;background:var(--bg);border-bottom:1px solid var(--line)}
.controls{display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap;
  padding:10px var(--pad-x)}
.controls:first-child{padding-bottom:0}
.tagbar{padding-top:10px}

.field-input,select{height:var(--ctrl-h);padding:0 12px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--panel);color:var(--txt);
  font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.field-input::placeholder{color:var(--dim)}
.grow{flex:1 1 240px;min-width:0}
select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:var(--chevron);background-repeat:no-repeat;background-position:right 11px center}
.field{display:inline-flex;align-items:center;gap:7px;color:var(--dim);font-size:13px;white-space:nowrap}
.chk{display:inline-flex;gap:7px;align-items:center;cursor:pointer;color:var(--dim);
  font-size:13px;height:var(--ctrl-h)}
.chk input{width:17px;height:17px;accent-color:var(--accent)}
.taglabel{color:var(--dim);font-size:13px;white-space:nowrap}

/* ---- tag combobox ---- */
.combo{position:relative;display:flex}
.combo .field-input{width:100%}
.combo-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);
  max-height:300px;overflow-y:auto;box-shadow:var(--shadow)}
.combo-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;
  min-height:44px;padding:8px 14px;cursor:pointer;font-size:14px}
.combo-opt + .combo-opt{border-top:1px solid var(--line)}
.combo-opt.active,.combo-opt:hover{background:var(--accent);color:#06121d}
.combo-opt .cnt{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.combo-opt.active .cnt,.combo-opt:hover .cnt{color:rgba(6,18,29,.7)}
.combo-empty{padding:14px;color:var(--dim);font-size:13px}
.tagchips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 100%}
.tagchip{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#06121d;
  border-radius:var(--radius-pill);padding:3px 6px 3px 11px;font-size:12px;font-weight:600}
.tagchip .x{cursor:pointer;font-weight:800;font-size:15px;line-height:1;
  display:grid;place-items:center;width:18px;height:18px}

/* ---- layout ---- */
main{display:flex;gap:0;align-items:flex-start}
.types{flex:1;padding:14px var(--pad-x);min-width:0}
.deck{width:300px;flex:none;position:sticky;top:var(--toolbar-h,116px);align-self:flex-start;
  max-height:calc(100vh - var(--toolbar-h,116px));overflow:auto;border-left:1px solid var(--line);
  padding:16px;background:var(--panel)}

/* ---- type rows ---- */
.type{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;
  background:var(--panel);min-width:0;overflow:hidden}
.type.covered{border-color:var(--good)}
.type-head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
  user-select:none;min-height:48px}
.type-head:hover{background:var(--panel2)}
.caret{color:var(--dim);transition:transform .2s ease;font-size:11px;flex:none}
.type.open .caret{transform:rotate(90deg)}
.type-name{font-weight:600;font-size:15px}
.type-count{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.badge{margin-left:auto;font-size:11px;padding:4px 10px;border-radius:var(--radius-pill);
  border:1px solid var(--line);white-space:nowrap;color:var(--accent);border-color:var(--accent)}
.filler-mini{display:flex;align-items:center;gap:8px;margin-left:auto;
  background:var(--panel2);border-radius:var(--radius-sm);padding:4px 8px}
.filler-mini img{height:28px;border-radius:3px}
.filler-mini span{font-size:12px}
.filler-mini .rm{cursor:pointer;color:var(--bad);font-weight:700;
  display:grid;place-items:center;width:24px;height:24px}
.head-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hide-type{border:1px solid var(--line);background:transparent;color:var(--dim);
  border-radius:var(--radius-pill);font-size:11px;padding:4px 10px;cursor:pointer;
  white-space:nowrap;transition:color .15s,border-color .15s}
.hide-type:hover{color:var(--bad);border-color:var(--bad)}
.hiddenbar .tagchip{background:var(--panel2);color:var(--dim);border:1px solid var(--line)}
.hiddenbar .tagchip .x{color:var(--bad)}

/* ---- carousel ---- */
.carousel{border-top:1px solid var(--line)}
.car-head{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 0}
.car-count{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.car-nav{display:flex;gap:6px}
.car-btn{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:border-color .15s,background .15s}
.car-btn:hover{border-color:var(--accent);background:var(--panel)}
.car-btn:active{transform:scale(.94)}
.car-btn[disabled]{opacity:.35;cursor:default}

.car-clip{overflow:hidden}
.cands{display:flex;gap:10px;width:max-content;padding:10px 12px 14px;
  touch-action:pan-y;will-change:transform;transition:transform .3s ease;cursor:grab}
.cands:active{cursor:grabbing}
.card{flex:0 0 var(--card-w);width:var(--card-w);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--panel2);display:flex;flex-direction:column}
.card.conflict{opacity:.5}
.card.picked{border-color:var(--good)}
.card img{width:100%;display:block;cursor:zoom-in;aspect-ratio:488/680;object-fit:cover;
  background:#0c0f14}
.card-body{padding:8px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-name{font-weight:600;font-size:13px;line-height:1.3}
.card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.price{color:var(--good);font-variant-numeric:tabular-nums}
.ctypes{font-size:10.5px;color:var(--dim);line-height:1.6}
.ctypes .t{display:inline-block;padding:1px 6px;border-radius:4px;background:#2b333f;margin:1px}
.ctypes .t.clash{background:#4a2630;color:var(--bad)}
.add{margin-top:auto;min-height:38px;border:0;border-radius:var(--radius-sm);padding:8px;
  font-size:13px;font-weight:600;cursor:pointer;background:var(--accent);color:#06121d;
  transition:filter .15s}
.add:hover{filter:brightness(1.08)}
.add:disabled{background:#333b46;color:var(--dim);cursor:not-allowed}
.add.remove{background:var(--bad);color:#1a0709}
.clash-note{font-size:10.5px;color:var(--bad)}

/* ---- oracle tag chips on cards ---- */
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:10px;line-height:1.5;padding:1px 6px;border-radius:4px;background:#2a3340;
  color:#9fb4c9;cursor:pointer;border:1px solid transparent}
.tag:hover{border-color:var(--accent)}
.tag.active{background:var(--accent);color:#06121d;border-color:var(--accent)}

/* ---- mana pips ---- */
.mc{display:inline-flex;gap:2px;vertical-align:middle}
.pip{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  font-size:10px;font-weight:700;color:#1a1206;background:#beb9b0}
.pip.W{background:#f8f4e3}.pip.U{background:#9fd3f0}.pip.B{background:#b0a6a0;color:#fff}
.pip.R{background:#f0a18c}.pip.G{background:#9bd6a6}.pip.C,.pip.N{background:#c9c4bd}

/* ---- deck sidebar ---- */
.deck h2{margin:0 0 4px;font-size:15px}
.deck .hint{color:var(--dim);font-size:12px;margin:0 0 12px}
.deck-actions{display:flex;gap:8px;margin-bottom:12px}
.deck-actions button{flex:1;min-height:40px;border:1px solid var(--line);background:var(--panel2);
  color:var(--txt);border-radius:var(--radius-sm);padding:8px;font-size:13px;cursor:pointer;
  transition:border-color .15s}
.deck-actions button:hover{border-color:var(--accent)}
.deck-list{display:flex;flex-direction:column;gap:6px}
.deck-row{display:flex;align-items:center;gap:9px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 8px}
.deck-row img{height:36px;border-radius:3px;cursor:zoom-in}
.deck-row .n{flex:1;min-width:0}
.deck-row .n b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-row .n small{color:var(--dim);font-size:10.5px}
.deck-row .rm{cursor:pointer;color:var(--bad);font-weight:700;font-size:18px;
  display:grid;place-items:center;width:32px;height:32px;flex:none}
.deck-empty{color:var(--dim);font-size:13px;text-align:center;padding:24px 0}

/* ---- lightbox ---- */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;
  z-index:50;cursor:zoom-out;padding:20px}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:12px}
.hidden{display:none}

/* ---- responsive ---- */
@media (max-width:760px){
  :root{--card-w:150px;--pad-x:14px}
  main{flex-direction:column}
  .deck{width:100%;position:static;max-height:none;border-left:0;border-top:1px solid var(--line)}
  .stats{margin-left:0;width:100%}
  .stat{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}