:root{
  --bg:#0a0b0e; --panel:#14161c; --panel2:#1b1e26; --border:#2c313c;
  --text:#e4e8ee; --muted:#8b93a3; --accent:#9db4c9; --accent2:#5b7fa3;
  --pass:#3ecf8e; --warn:#e8b93e; --fail:#e05b5b;
  font-size:15px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  position:relative;
}
body::before{
  content:""; position:fixed; top:-10vh; right:-15vw; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background-image:url("logo.png"); background-repeat:no-repeat; background-size:contain;
  opacity:.05; pointer-events:none; z-index:0; filter:grayscale(30%);
}
/* ---- Top bar ---- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:20px;
  padding:10px 24px; background:#12141c;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
  isolation:isolate;
}
.topbar-brand{margin-right:auto; display:flex; align-items:center; gap:12px;}
.brand-logo{width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(157,180,201,.35));}
.brand-title{font-size:1.05rem; font-weight:700; letter-spacing:.03em; color:var(--accent);}
.brand-title-sub{font-weight:400; color:var(--muted); font-size:.75rem; letter-spacing:.08em; margin-left:8px;}
.brand-sub{font-size:.7rem; color:var(--muted);}
.topbar-picker{display:flex; gap:10px;}
.field.compact{margin-bottom:0; min-width:160px;}
.field.compact label{margin-bottom:2px;}
.topbar-score{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:4px 14px;
  min-width:70px;
}
.topbar-score-num{font-size:1.15rem; font-weight:800; color:var(--pass); line-height:1.1;}
.topbar-score-label{font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.topbar-score{box-shadow:0 0 16px -4px rgba(157,180,201,.35);}

/* ---- Auth gate: everything else is hidden until logged in ---- */
body:not(.authed) .app-content{display:none !important;}
body.authed .auth-gate{display:none;}

.auth-gate{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  position:relative; z-index:2;
}
.auth-box{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:28px 26px; box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.auth-logo{width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 10px; filter:drop-shadow(0 0 10px rgba(157,180,201,.35));}
.auth-tabs{display:flex; gap:6px; margin-bottom:18px; background:var(--panel2); border-radius:8px; padding:4px;}
.auth-tab{
  flex:1; padding:8px; border-radius:6px; border:none; background:transparent; color:var(--muted);
  font-size:.85rem; font-weight:600; cursor:pointer;
}
.auth-tab.active{background:var(--accent2); color:#fff;}
.auth-error{
  background:rgba(224,91,91,.12); border:1px solid rgba(224,91,91,.4); color:var(--fail);
  border-radius:6px; padding:8px 10px; font-size:.8rem; margin-bottom:12px;
}
.auth-submit{
  width:100%; padding:10px; border-radius:8px; border:none; background:var(--accent2); color:#fff;
  font-weight:700; font-size:.9rem; cursor:pointer; margin-top:4px;
}
.auth-submit:hover{filter:brightness(1.1);}
.auth-submit:disabled{opacity:.6; cursor:default;}

.topbar-account{display:flex; align-items:center; gap:10px;}
.topbar-account-email{font-size:.75rem; color:var(--muted); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar-logout-btn{
  background:var(--panel2); border:1px solid var(--border); color:var(--muted); border-radius:6px;
  padding:6px 10px; font-size:.72rem; cursor:pointer;
}
.topbar-logout-btn:hover{border-color:var(--fail); color:var(--fail);}

/* ---- App shell: sidenav + content + rightbar ---- */
.shell{
  display:grid; grid-template-columns:200px minmax(0,1fr) 260px; gap:20px;
  max-width:1560px; margin:0 auto; padding:20px 24px 40px; position:relative; z-index:1; align-items:start;
}
.sidenav{
  position:sticky; top:76px; display:flex; flex-direction:column; gap:3px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px;
  max-height:calc(100vh - 96px); overflow-y:auto;
  z-index:1; isolation:isolate;
}
.sidenav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; border:none;
  background:transparent; color:var(--muted); cursor:pointer; font-size:.82rem; text-align:left; width:100%;
}
.sidenav-item:hover{background:var(--panel2); color:var(--text);}
.sidenav-item.active{background:linear-gradient(90deg, rgba(157,180,201,.18), transparent); color:var(--accent); font-weight:600; box-shadow:inset 2px 0 0 var(--accent2);}
.sidenav-icon{width:32px; height:32px; object-fit:contain; flex-shrink:0; filter:brightness(1.35) contrast(1.1) drop-shadow(0 0 2px rgba(255,255,255,.15));}
.sidenav-divider{font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:12px 10px 4px;}
.sidenav-spacer{flex:1;}
.sidenav-emblem{display:flex; justify-content:center; padding:10px 0 4px; opacity:.5;}
.sidenav-emblem img{width:44px; height:44px; object-fit:contain;}

.content{min-width:0;}
.rightbar{display:flex; flex-direction:column; gap:16px; position:sticky; top:76px; z-index:1; isolation:isolate;}
.rb-card h2{margin-bottom:10px;}
.rb-action{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 8px;
  background:var(--panel2); border:1px solid var(--border); border-radius:8px; color:var(--text);
  cursor:pointer; margin-bottom:8px; font-size:.8rem;
}
.rb-action:hover{border-color:var(--accent2);}
.rb-action-icon{font-size:1.1rem; width:24px; height:24px; object-fit:contain; flex-shrink:0;}
.rb-action-title{display:block; font-weight:600;}
.rb-action-sub{display:block; font-size:.68rem; color:var(--muted); font-weight:400;}
.rb-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:10px;}
.rb-stat{background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:8px 4px; text-align:center;}
.rb-stat-num{font-size:1.1rem; font-weight:800; color:var(--accent);}
.rb-stat-label{font-size:.62rem; color:var(--muted); text-transform:uppercase;}
.rb-view-btn{
  width:100%; padding:8px; border-radius:8px; border:1px solid var(--accent2); background:transparent;
  color:var(--accent2); font-weight:600; font-size:.8rem; cursor:pointer;
}
.rb-view-btn:hover{background:var(--accent2); color:#fff;}

.page-section{display:none;}
.page-section.active{display:block;}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:16px; margin-bottom:16px;
}
.card h2{margin:0 0 12px; font-size:1rem; color:var(--accent2); text-transform:uppercase; letter-spacing:.05em;}
.card h3{margin:16px 0 8px; font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}

.field{margin-bottom:10px;}
.field label{display:block; font-size:.75rem; color:var(--muted); margin-bottom:4px;}
select, input[type=text], input[type=number]{
  width:100%; padding:7px 8px; background:var(--panel2); border:1px solid var(--border);
  color:var(--text); border-radius:6px; font-size:.9rem;
}
select:focus, input:focus{outline:1px solid var(--accent2);}

.stat-line{display:flex; justify-content:space-between; padding:3px 0; font-size:.85rem; border-bottom:1px dashed var(--border);}
.stat-line span:first-child{color:var(--muted);}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}

.badge{padding:2px 8px; border-radius:20px; font-size:.72rem; font-weight:600;}
.badge.PASS{background:rgba(62,207,142,.15); color:var(--pass);}
.badge.WARNING{background:rgba(232,185,62,.15); color:var(--warn);}
.badge.CHECK{background:rgba(232,185,62,.15); color:var(--warn);}
.badge.FAIL{background:rgba(224,91,91,.15); color:var(--fail);}
.badge.dash{background:rgba(154,162,177,.15); color:var(--muted);}

.checkrow{display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:.85rem; border-bottom:1px dashed var(--border);}

.tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.tab-btn{
  background:var(--panel2); border:1px solid var(--border); color:var(--muted);
  padding:7px 14px; border-radius:20px; cursor:pointer; font-size:.82rem;
}
.tab-btn.active{background:var(--accent2); color:#fff; border-color:var(--accent2);}
.toggle-btn{
  background:var(--panel2); border:1px solid var(--border); color:var(--muted);
  padding:5px 14px; border-radius:20px; cursor:pointer; font-size:.8rem;
}
.toggle-btn.active{background:var(--accent2); color:#fff; border-color:var(--accent2);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

table{border-collapse:collapse; width:100%; font-size:.8rem;}
thead th{
  position:sticky; top:0; background:var(--panel2); text-align:left; padding:6px 8px;
  border-bottom:1px solid var(--border); color:var(--muted); font-weight:600; white-space:nowrap;
}
tbody td{padding:5px 8px; border-bottom:1px solid #20232e; white-space:nowrap;}
tbody tr:hover{background:#1b1f2b;}
.table-wrap{overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:8px;}

.pri-Essential{color:var(--pass); font-weight:600;}
.pri-High{color:#8fd6ff;}
.pri-Medium{color:var(--warn);}
.pri-Low{color:var(--muted);}
.pri-Optional{color:#5a6070;}

.legal-Yes{color:var(--pass);}
.legal-No{color:var(--fail);}

.searchbar{margin-bottom:10px;}

.curve-wrap{display:flex; align-items:flex-end; gap:6px; height:110px; padding:8px 4px 0;}
.curve-bar{flex:1; background:var(--accent2); border-radius:3px 3px 0 0; position:relative; min-height:2px;}
.curve-bar span{position:absolute; top:-18px; left:0; right:0; text-align:center; font-size:.7rem; color:var(--muted);}
.curve-labels{display:flex; gap:6px; padding:4px 4px 0;}
.curve-labels div{flex:1; text-align:center; font-size:.7rem; color:var(--muted);}

.pill{display:inline-block; padding:1px 7px; border-radius:10px; background:var(--panel2); font-size:.72rem; margin:1px 2px 1px 0; border:1px solid var(--border);}

footer{padding:20px 24px; color:var(--muted); font-size:.75rem; border-top:1px solid var(--border); margin-top:20px;}
a{color:var(--accent2);}

/* ---- Deck Workspace ---- */
.dw-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;}
.dw-eyebrow{font-size:.7rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase;}
.dw-title{font-size:1.1rem; font-weight:700; margin-top:2px;}
.dw-subtitle{font-size:.78rem; color:var(--muted); margin-top:2px;}
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--muted);
  padding:5px 12px; border-radius:6px; cursor:pointer; font-size:.78rem; white-space:nowrap;
}
.btn-ghost:hover{color:var(--fail); border-color:var(--fail);}

.dw-addbar{position:relative; margin-bottom:16px;}
.dw-addbar #dwSearchResults{position:absolute; z-index:5; width:100%; max-height:260px; display:none; background:var(--panel2); border:1px solid var(--border);}
.dw-addbar.active #dwSearchResults{display:block;}
.dw-result-row{display:flex; justify-content:space-between; padding:6px 10px; font-size:.8rem; cursor:pointer; border-bottom:1px solid var(--border);}
.dw-result-row:hover{background:#232838;}
.dw-result-row .dw-result-meta{color:var(--muted); font-size:.72rem;}

.dw-section{margin-bottom:18px;}
.dw-section-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid var(--border);
}
.pillcount{
  background:var(--panel2); border:1px solid var(--border); border-radius:6px;
  padding:1px 8px; font-size:.72rem; color:var(--text); font-weight:600;
}
.pillcount.ok{color:var(--pass); border-color:rgba(62,207,142,.4);}
.pillcount.bad{color:var(--fail); border-color:rgba(224,91,91,.4);}

.dw-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px;}

/* ---- Big card tiles: the card IS the tile — real art, overlaid text, attached control bar ---- */
.big-card{
  display:flex; flex-direction:column; background:var(--panel2); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; position:relative;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.big-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 0 1px var(--accent2);
  border-color:var(--accent2);
}
.card-domain-strip{height:5px; flex-shrink:0;}
.card-art-wrap{
  position:relative; width:100%; aspect-ratio:5/7; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff;
}
.card-art-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
.card-cost-badge, .card-might-badge{
  position:absolute; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(10,11,14,.78); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:800; font-size:.85rem;
  box-shadow:0 2px 6px rgba(0,0,0,.5); z-index:1;
}
.card-cost-badge{top:6px; left:6px;}
.card-might-badge{bottom:6px; right:6px;}
.card-name-scrim{
  position:absolute; left:0; right:0; bottom:0; padding:22px 8px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.94), rgba(0,0,0,.65) 55%, transparent);
}
.card-name-text{color:#fff; font-weight:700; font-size:.82rem; line-height:1.2; text-shadow:0 1px 3px #000;}
.card-sub-text{color:#c9cfda; font-size:.68rem; text-shadow:0 1px 2px #000;}
.card-remove{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; z-index:2;
  background:rgba(10,11,14,.78); border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer;
  font-size:.75rem; display:flex; align-items:center; justify-content:center;
}
.card-remove:hover{background:var(--fail); border-color:var(--fail);}
.card-controls{
  display:flex; align-items:center; justify-content:center; gap:12px; padding:8px;
  background:var(--panel2); border-top:1px solid var(--border);
}
.card-controls button{
  width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--panel);
  color:var(--text); cursor:pointer; font-size:.9rem; line-height:1; padding:0;
}
.card-controls button:hover{border-color:var(--accent2); color:var(--accent2);}
.card-qty{font-size:.85rem; font-weight:800; color:var(--accent2); min-width:26px; text-align:center;}
.card-replaced-badge{
  position:absolute; top:6px; left:40px; z-index:2; background:rgba(232,185,62,.85); border:1px solid rgba(255,255,255,.3);
  color:#1a1400; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.card-replaced-badge:hover{filter:brightness(1.15);}
.card-missing-badge{
  position:absolute; bottom:6px; left:6px; z-index:1;
  background:rgba(224,91,91,.9); color:#fff; font-size:.62rem; font-weight:700;
  padding:3px 7px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.card-suggest-footer{padding:8px; background:var(--panel2); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px;}
.card-add-btn{
  padding:6px; border-radius:6px; border:1px solid var(--accent2); background:transparent;
  color:var(--accent2); font-size:.72rem; font-weight:700; cursor:pointer;
}
.card-add-btn:hover{background:var(--accent2); color:#fff;}
.card-add-btn:disabled{border-color:var(--border); color:var(--muted); cursor:default; background:transparent;}
.card-priority{font-size:.65rem; text-transform:uppercase; letter-spacing:.04em;}
.dw-tile-owned{box-shadow:0 3px 10px rgba(0,0,0,.35), inset 0 0 0 2px rgba(62,207,142,.5);}
.dw-tile-owned .card-qty{color:var(--pass);}
.repl-banner{
  background:rgba(232,185,62,.1); border:1px solid rgba(232,185,62,.4); border-radius:8px;
  padding:10px; margin:8px 0 14px; font-size:.8rem;
}
.repl-reason{color:var(--muted); font-size:.72rem; margin:4px 0 8px;}
.repl-revert-btn{
  width:100%; padding:7px; border-radius:6px; border:1px solid var(--warn); background:transparent;
  color:var(--warn); font-size:.75rem; font-weight:600; cursor:pointer;
}
.repl-revert-btn:hover{background:var(--warn); color:#1a1400;}
.dw-empty{color:var(--muted); font-size:.8rem; padding:10px 0;}
.dw-data-notice{
  margin-top:6px; padding:7px 10px; border-radius:6px; font-size:.75rem;
  background:rgba(232,185,62,.1); border:1px solid rgba(232,185,62,.35); color:var(--warn);
}
.dw-tile-owned{box-shadow:inset 0 0 0 1px rgba(62,207,142,.35);}
.dw-tile-owned .dw-qty{color:var(--pass);}

.collection-toolbar{display:flex; gap:14px; align-items:center; margin-bottom:8px; flex-wrap:wrap;}
.collection-toolbar input[type=text]{flex:1; min-width:200px;}
.collection-toolbar select{width:auto; min-width:130px;}
.owned-only-toggle{display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); white-space:nowrap;}
.owned-only-toggle input{width:auto;}

/* ---- Collapsible detail cards ---- */
.details-card{padding:0; overflow:hidden;}
.details-card summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-size:.85rem; font-weight:600;
  color:var(--accent2); display:flex; align-items:center; gap:8px;
}
.details-card summary::-webkit-details-marker{display:none;}
.details-card summary::before{content:"▸"; color:var(--muted); transition:transform .15s;}
.details-card[open] summary::before{transform:rotate(90deg);}
.muted-inline{color:var(--muted); font-weight:400; text-transform:none; font-size:.8rem;}
.details-body{padding:0 16px 16px;}
.field-row{display:flex; gap:14px; flex-wrap:wrap;}
.field-row .field{flex:1; min-width:160px;}

/* ---- Deck Snapshot dashboard ---- */
.snap-context{
  display:flex; gap:18px; flex-wrap:wrap; font-size:.78rem; color:var(--muted);
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.snap-context b{color:var(--text); font-weight:600;}
.snap-grid{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.snap-ring-wrap{flex-shrink:0; position:relative;}
.snap-ring-wrap::before{
  content:""; position:absolute; inset:-22px;
  background-image:url("logo.png"); background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.16; z-index:0;
}
.snap-ring-wrap .snap-ring{position:relative; z-index:1;}
.snap-ring{
  width:88px; height:88px; border-radius:50%;
  background:conic-gradient(var(--ring-color,var(--pass)) calc(var(--pct,0)*1%), var(--panel2) 0);
  display:flex; align-items:center; justify-content:center;
}
.snap-ring-inner{
  width:70px; height:70px; border-radius:50%; background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.snap-ring-num{font-size:1.3rem; font-weight:800;}
.snap-ring-label{font-size:.62rem; color:var(--muted); text-transform:uppercase;}
.snap-bar-item{flex:1; min-width:140px;}
.snap-bar-head{display:flex; justify-content:space-between; font-size:.75rem; color:var(--muted); margin-bottom:5px;}
.snap-bar-head span:last-child{color:var(--text); font-weight:600;}
.snap-bar-track{height:8px; border-radius:5px; background:var(--panel2); overflow:hidden;}
.snap-bar-fill{height:100%; border-radius:5px; background:var(--accent2); transition:width .2s;}
.snap-legal{position:relative;}
.legal-chip{
  border:1px solid var(--border); border-radius:20px; padding:8px 16px; font-size:.8rem; font-weight:700;
  cursor:pointer; background:var(--panel2); color:var(--pass);
}
.legal-chip.hasIssues{color:var(--fail); border-color:rgba(224,91,91,.4);}
.legal-list{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:10; list-style:none;
  margin:0; padding:8px; background:var(--panel2); border:1px solid var(--border); border-radius:8px;
  min-width:220px; font-size:.78rem;
}
.legal-list.open{display:block;}
.legal-list li{padding:4px 6px; color:var(--fail);}
.legal-list li.ok{color:var(--pass);}

/* ---- Suggested cards view toggle ---- */
.rec-header{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px;}
.rec-header h2{margin:0;}
.view-toggle{display:flex; gap:6px;}
.view-toggle .tab-btn{padding:5px 12px;}
/* ---- Card preview modal ---- */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:50;
  align-items:center; justify-content:center;
}
.modal-backdrop.open{display:flex;}
.modal-box{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:20px; max-width:520px; width:90%; max-height:85vh; overflow:auto;
  display:flex; gap:16px;
}
.modal-box img{width:180px; border-radius:8px; flex-shrink:0; box-shadow:0 4px 20px rgba(0,0,0,.4);}
.modal-art-fallback{
  width:180px; height:250px; border-radius:8px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:2.5rem; color:#fff;
}
.modal-info h3{margin:0 0 2px; font-size:1.15rem;}
.modal-info .modal-sub{color:var(--muted); font-size:.85rem; margin-bottom:10px;}
.modal-info .stat-line{border-bottom:1px dashed var(--border);}
.modal-close{position:absolute; top:10px; right:14px; background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer;}
.modal-box{position:relative;}
.dw-thumb{width:28px; height:39px; border-radius:3px; object-fit:cover; vertical-align:middle; margin-right:6px; cursor:pointer;}

/* ---- Best Decks From Collection ---- */
.best-decks-box{max-width:640px; display:block;}
.rb-action-highlight{border-color:var(--accent2); background:linear-gradient(90deg, rgba(91,127,163,.18), var(--panel2));}
.best-deck-item{
  border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:12px; background:var(--panel2);
}
.best-deck-card{display:flex; gap:12px; align-items:flex-start;}
.best-deck-rank{
  font-size:1.3rem; font-weight:800; color:var(--accent); min-width:34px; text-align:center;
}
.best-deck-info{flex:1; min-width:0;}
.best-deck-title{font-weight:700; font-size:.95rem;}
.best-deck-sub{color:var(--muted); font-size:.75rem; margin-bottom:6px;}
.best-deck-stats{display:flex; gap:14px; flex-wrap:wrap; font-size:.72rem; color:var(--muted);}
.best-deck-stats span:first-child{color:var(--pass); font-weight:700;}
.best-deck-bar-track{height:6px; border-radius:4px; background:var(--panel); margin:10px 0; overflow:hidden;}
.best-deck-bar-fill{height:100%; background:linear-gradient(90deg, var(--accent2), var(--pass)); border-radius:4px;}
.best-deck-item .rb-view-btn{width:100%;}

/* ---- Mobile bottom tab bar + "More" sheet (phone-native navigation, not a squeezed sidebar) ---- */
.mobile-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#12141c; border-top:1px solid var(--border);
  padding:6px max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom));
  justify-content:space-around; align-items:stretch;
}
.tabbar-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:var(--muted); font-size:.62rem; padding:5px 2px; cursor:pointer;
  border-radius:8px;
}
.tabbar-item.active{color:var(--accent);}
.tabbar-icon{width:22px; height:22px; object-fit:contain; filter:brightness(1.35) contrast(1.1);}
.tabbar-icon-glyph{font-size:1.2rem; line-height:1; filter:none;}
.tabbar-item.active .tabbar-icon{filter:brightness(1.6) contrast(1.15) drop-shadow(0 0 3px rgba(157,180,201,.6));}

.sheet-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:45;
}
.sheet-backdrop.open{display:block;}
.mobile-more-sheet{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:46;
  background:var(--panel); border:1px solid var(--border); border-bottom:none;
  border-radius:16px 16px 0 0; padding:10px 12px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .2s ease;
}
.mobile-more-sheet.open{display:block; transform:translateY(0);}
.sheet-handle{width:36px; height:4px; border-radius:2px; background:var(--border); margin:2px auto 10px;}
.sheet-item{
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 8px; background:none;
  border:none; border-bottom:1px solid var(--border); color:var(--text); font-size:.9rem; cursor:pointer; text-align:left;
}
.sheet-item:last-child{border-bottom:none;}
.sheet-icon{width:26px; height:26px; object-fit:contain; filter:brightness(1.35) contrast(1.1);}

/* ===================== RESPONSIVE BREAKPOINTS ===================== */

/* Tablet / small laptop: slim icon+label sidebar stays, rightbar reflows BELOW content (never hidden) */
@media (max-width:1200px){
  .shell{grid-template-columns:170px minmax(0,1fr);}
  .sidenav{grid-row:1 / span 2;}
  .rightbar{grid-column:2; grid-row:2; position:static; flex-direction:row; flex-wrap:wrap;}
  .rightbar .rb-card{flex:1; min-width:260px; margin:0;}
}

/* Mobile: left sidebar replaced by bottom tab bar; single column; rightbar flows inline */
@media (max-width:820px){
  .shell{
    grid-template-columns:1fr; grid-template-rows:auto auto;
    padding:12px 12px calc(78px + env(safe-area-inset-bottom));
    gap:16px;
  }
  .sidenav{display:none;}
  .rightbar{grid-column:1; grid-row:2; flex-direction:column;}
  .rightbar .rb-card{min-width:0;}
  .mobile-tabbar{display:flex;}

  .topbar{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    grid-template-areas:"brand brand" "picker picker" "account score";
    gap:8px 10px; padding:10px 12px;
  }
  .topbar-brand{grid-area:brand; margin-right:0;}
  .topbar-picker{grid-area:picker; display:flex; gap:8px; width:auto;}
  .field.compact{min-width:0; flex:1;}
  .topbar-account{grid-area:account; justify-content:flex-start;}
  .topbar-account-email{max-width:none; flex:1;}
  .topbar-score{grid-area:score; margin-left:0;}

  .dw-grid{grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px;}
  .snap-grid{gap:14px;}
  .snap-bar-item{min-width:110px;}
  .rec-header{flex-direction:column; align-items:flex-start;}

  /* larger touch targets */
  .card-controls button{width:32px; height:32px; font-size:1.05rem;}
  .card-remove, .card-replaced-badge{width:28px; height:28px; font-size:.85rem;}
  .legal-chip{padding:10px 16px;}
  .toggle-btn, .tab-btn{padding:8px 14px;}
}

/* Very small phones */
@media (max-width:400px){
  :root{font-size:14px;}
  .dw-grid{grid-template-columns:repeat(auto-fill, minmax(135px,1fr));}
  .snap-ring{width:76px; height:76px;}
  .snap-ring-inner{width:60px; height:60px;}
  .field-row{gap:10px;}
}