/* ============================================================
   APUESTA — panel de seguimiento y análisis de apuestas
   ============================================================ */

/* El atributo [hidden] debe ganar siempre, incluso frente a estilos
   inline (display:flex en la pantalla de acceso) o clases con la misma
   especificidad (.app-shell fija display:grid en #app). */
[hidden]{ display:none !important; }

:root{
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#EEF1F6;
  --surface-3:#E4E9F0;
  --border:#DCE2EA;
  --border-soft:#E8ECF2;
  --text:#151C26;
  --text-dim:#5B6B7C;
  --text-faint:#8B98A9;
  --accent:#2F5FE0;
  --accent-ink:#FFFFFF;
  --accent-soft:#E7EDFC;
  --win:#1E9D5B;
  --win-soft:#E4F6EC;
  --loss:#D3453B;
  --loss-soft:#FBE7E5;
  --pending:#C07F17;
  --pending-soft:#FAF0DD;
  --void:#6B7684;
  --void-soft:#EBEDF1;
  --shadow-sm:0 1px 2px rgba(20,30,45,.06);
  --shadow-md:0 6px 20px -6px rgba(20,30,45,.16);
  --shadow-lg:0 20px 48px -12px rgba(20,30,45,.28);
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui:'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  --sidebar-w:236px;
  --sidebar-w-collapsed:76px;
  --topbar-h:64px;
  --bottomnav-h:64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0E14;
    --surface:#121822;
    --surface-2:#181F2A;
    --surface-3:#212A38;
    --border:#242E3C;
    --border-soft:#1B2330;
    --text:#EBEFF4;
    --text-dim:#95A3B5;
    --text-faint:#5E6C7E;
    --accent:#6C93F5;
    --accent-ink:#0A0E14;
    --accent-soft:#1B2740;
    --win:#3ECB82;
    --win-soft:#132B21;
    --loss:#F17469;
    --loss-soft:#331D1D;
    --pending:#E3AC4E;
    --pending-soft:#33280F;
    --void:#8592A3;
    --void-soft:#1D232C;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 6px 24px -6px rgba(0,0,0,.5);
    --shadow-lg:0 24px 56px -16px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0E14;
  --surface:#121822;
  --surface-2:#181F2A;
  --surface-3:#212A38;
  --border:#242E3C;
  --border-soft:#1B2330;
  --text:#EBEFF4;
  --text-dim:#95A3B5;
  --text-faint:#5E6C7E;
  --accent:#6C93F5;
  --accent-ink:#0A0E14;
  --accent-soft:#1B2740;
  --win:#3ECB82;
  --win-soft:#132B21;
  --loss:#F17469;
  --loss-soft:#331D1D;
  --pending:#E3AC4E;
  --pending-soft:#33280F;
  --void:#8592A3;
  --void-soft:#1D232C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 24px -6px rgba(0,0,0,.5);
  --shadow-lg:0 24px 56px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--accent-soft); color:var(--accent)}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
button, input, select, textarea{ color:inherit; }
input, select, textarea{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:9px 11px;
  font-size:14px;
  color:var(--text);
  font-family:var(--font-ui);
  width:100%;
}
input.mono, select.mono{font-family:var(--font-mono)}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:-1px;
  border-color:var(--accent);
}
label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:5px; font-weight:600; letter-spacing:.01em}
.field{margin-bottom:14px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field-row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media (max-width:520px){ .field-row3{grid-template-columns:1fr 1fr} }

/* ---------- layout shell ---------- */
.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px 22px 10px;
}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(155deg, var(--accent), #8B5CF6 130%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px;
  flex:none;
}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em}
.brand-tag{font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:1px}

.nav-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); padding:14px 12px 6px}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px;
  border-radius:var(--radius-s);
  color:var(--text-dim);
  cursor:pointer;
  font-size:13.8px;
  font-weight:600;
  border:none;
  background:none;
  text-align:left;
  width:100%;
}
.nav-item svg{flex:none; width:18px; height:18px}
.nav-item:hover{background:var(--surface-2); color:var(--text)}
.nav-item.active{background:var(--accent-soft); color:var(--accent)}
.nav-badge{
  margin-left:auto; font-size:10.5px; font-weight:700;
  background:var(--surface-3); color:var(--text-dim);
  border-radius:999px; padding:1px 7px; font-family:var(--font-mono);
}
.nav-item.active .nav-badge{background:var(--accent); color:var(--accent-ink)}

.sidebar-foot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border-soft);
}
.bankroll-chip{
  background:var(--surface-2); border-radius:var(--radius-m);
  padding:12px 13px; display:flex; flex-direction:column; gap:2px;
}
.bankroll-chip .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint)}
.bankroll-chip .v{font-family:var(--font-mono); font-size:19px; font-weight:600}
.theme-row{display:flex; gap:6px; margin-top:10px}
.theme-btn{
  flex:1; padding:7px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-dim); cursor:pointer; font-size:12px;
}
.theme-btn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20;
  height:var(--topbar-h);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  gap:16px;
}
.topbar h1{font-size:21px}
.topbar-actions{display:flex; align-items:center; gap:10px}
.content{ padding:26px 28px 100px; flex:1; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:10px; border:1px solid transparent;
  font-weight:700; font-size:13.5px; cursor:pointer;
  transition:transform .06s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-secondary{background:var(--surface-2); color:var(--text); border-color:var(--border)}
.btn-ghost{background:transparent; color:var(--text-dim)}
.btn-ghost:hover{background:var(--surface-2); color:var(--text)}
.btn-danger{background:var(--loss-soft); color:var(--loss)}
.btn-win{background:var(--win); color:#fff}
.btn-loss{background:var(--loss); color:#fff}
.btn-void{background:var(--void); color:#fff}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:8px}
.btn-block{width:100%}
.btn-icon{padding:9px; border-radius:9px}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.fab{
  position:fixed; right:26px; bottom:26px; z-index:40;
  width:58px; height:58px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); border:none; cursor:pointer; font-size:26px;
  display:none;
}

/* ---------- cards / grid ---------- */
.card{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius-m); padding:18px;
  box-shadow:var(--shadow-sm);
}
.card-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.card-title h3{font-size:15px; font-weight:700; font-family:var(--font-ui)}
.card-title .sub{font-size:12px; color:var(--text-faint)}

.grid-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
@media (max-width:1000px){ .grid-kpi{grid-template-columns:repeat(2,1fr)} }
.kpi{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-m);
  padding:16px 17px; position:relative; overflow:hidden;
}
.kpi .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:700}
.kpi .v{font-family:var(--font-mono); font-size:26px; font-weight:600; margin-top:6px; letter-spacing:-.01em}
.kpi .d{font-size:12px; margin-top:5px; color:var(--text-dim)}
.kpi .d.pos{color:var(--win)} .kpi .d.neg{color:var(--loss)}
.kpi.accent{ box-shadow:inset 3px 0 0 var(--accent) }

.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:16px}
@media (max-width:980px){ .grid-2{grid-template-columns:1fr} }
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }
.stack{display:flex; flex-direction:column; gap:16px}

/* ---------- badges / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em;
}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge-pendiente{background:var(--pending-soft); color:var(--pending)}
.badge-ganada{background:var(--win-soft); color:var(--win)}
.badge-perdida{background:var(--loss-soft); color:var(--loss)}
.badge-anulada{background:var(--void-soft); color:var(--void)}
.tag{
  font-size:11.5px; font-weight:600; color:var(--text-dim);
  background:var(--surface-2); border-radius:6px; padding:3px 8px;
}

/* ---------- bet cards ---------- */
.bet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.bet-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-m);
  padding:15px 16px; display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--shadow-sm); cursor:pointer; position:relative;
}
.bet-card:hover{border-color:var(--accent)}
.bet-card-head{display:flex; align-items:center; justify-content:space-between}
.bet-card-house{font-size:12.5px; color:var(--text-dim); font-weight:600}
.bet-card-title{font-size:14.5px; font-weight:700}
.bet-card-sub{font-size:12.5px; color:var(--text-dim)}
.bet-card-row{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-dim)}
.bet-card-metrics{display:flex; gap:14px; padding-top:8px; border-top:1px solid var(--border-soft)}
.bet-card-metrics div{display:flex; flex-direction:column; gap:2px}
.bet-card-metrics .k{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint)}
.bet-card-metrics .v{font-family:var(--font-mono); font-weight:700; font-size:14.5px}
.bet-card-potential{font-family:var(--font-mono); font-weight:700; color:var(--win)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border-soft); border-radius:var(--radius-m)}
table{width:100%; border-collapse:collapse; min-width:640px}
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-faint); padding:10px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--border); white-space:nowrap; font-weight:700;
}
td{padding:11px 14px; border-bottom:1px solid var(--border-soft); font-size:13.3px; white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
.pos{color:var(--win); font-weight:700} .neg{color:var(--loss); font-weight:700}

/* ---------- filters ---------- */
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.chip{
  padding:6px 13px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer;
}
.chip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.search-input{position:relative; flex:1; min-width:160px}
.search-input input{padding-left:32px}
.search-input svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-faint)}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,14,20,.5); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; z-index:100;
  padding:5vh 16px; overflow-y:auto;
}
.modal-backdrop[hidden]{display:none}
.modal{
  background:var(--surface); border-radius:var(--radius-l); width:100%; max-width:560px;
  box-shadow:var(--shadow-lg); border:1px solid var(--border-soft);
  max-height:90vh; display:flex; flex-direction:column;
}
.modal.modal-lg{max-width:760px}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; border-bottom:1px solid var(--border-soft)}
.modal-head h2{font-size:18px}
.modal-body{padding:20px 22px; overflow-y:auto}
.modal-foot{padding:16px 22px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:10px}
.close-x{background:none; border:none; color:var(--text-faint); font-size:20px; cursor:pointer; line-height:1; padding:4px}

.type-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:480px){ .type-pick{grid-template-columns:1fr} }
.type-card{
  border:1.5px solid var(--border); border-radius:var(--radius-m); padding:16px;
  cursor:pointer; text-align:left; background:var(--surface-2);
}
.type-card:hover{border-color:var(--accent)}
.type-card .ti{font-size:22px}
.type-card .tn{font-weight:700; margin-top:8px; font-size:14.5px}
.type-card .td{font-size:12px; color:var(--text-dim); margin-top:3px}

/* ---------- selections builder (combinadas) ---------- */
.sel-row{display:grid; grid-template-columns:1fr 90px 30px; gap:8px; margin-bottom:8px; align-items:center}
.sel-remove{background:var(--loss-soft); color:var(--loss); border:none; border-radius:7px; height:36px; cursor:pointer}
.combo-total{
  background:var(--accent-soft); color:var(--accent); border-radius:var(--radius-s);
  padding:10px 14px; display:flex; justify-content:space-between; font-weight:700; margin-top:6px;
}

/* ---------- empty state ---------- */
.empty{
  text-align:center; padding:50px 20px; color:var(--text-faint);
}
.empty .ico{font-size:34px; margin-bottom:10px}
.empty h4{color:var(--text-dim); margin-bottom:4px}

/* ---------- insights ---------- */
.insight{
  display:flex; gap:12px; padding:13px 14px; border-radius:var(--radius-m);
  background:var(--surface-2); border:1px solid var(--border-soft); align-items:flex-start;
}
.insight .ico{font-size:17px; flex:none}
.insight p{font-size:13.3px; color:var(--text)}
.insight .disclaimer{font-size:11px; color:var(--text-faint); margin-top:3px}

/* ---------- calendar ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-dow{font-size:10.5px; text-transform:uppercase; color:var(--text-faint); text-align:center; padding-bottom:4px; font-weight:700}
.cal-cell{
  aspect-ratio:1; border-radius:9px; padding:6px; background:var(--surface-2); border:1px solid transparent;
  display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; font-size:11px;
}
.cal-cell.empty-cell{background:transparent; cursor:default}
.cal-cell.has-bets{border-color:var(--border)}
.cal-cell.pos{background:var(--win-soft)}
.cal-cell.neg{background:var(--loss-soft)}
.cal-cell .d{font-weight:700; color:var(--text-dim)}
.cal-cell .p{font-family:var(--font-mono); font-weight:700; font-size:11px}

/* ---------- calc ---------- */
.calc-tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.calc-result{
  background:var(--surface-2); border-radius:var(--radius-m); padding:16px; margin-top:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.calc-result .item{display:flex; flex-direction:column}
.calc-result .item .k{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em}
.calc-result .item .v{font-family:var(--font-mono); font-size:18px; font-weight:700; margin-top:3px}
.arb-yes{background:var(--win-soft); color:var(--win); padding:12px 14px; border-radius:var(--radius-s); font-weight:700}
.arb-no{background:var(--void-soft); color:var(--void); padding:12px 14px; border-radius:var(--radius-s); font-weight:700}
.note-box{
  font-size:11.5px; color:var(--text-faint); background:var(--surface-2); border-radius:var(--radius-s);
  padding:10px 12px; margin-top:12px; border-left:3px solid var(--pending);
}

/* ---------- config lists ---------- */
.tag-editor{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.tag-editor .tag-item{
  display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:4px 6px 4px 12px; font-size:12.5px; font-weight:600;
}
.tag-item button{background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:14px; padding:2px 4px}
.add-tag-row{display:flex; gap:8px}
.add-tag-row input{flex:1}

.range-editor-row{display:grid; grid-template-columns:1fr 1fr 30px; gap:8px; margin-bottom:8px; align-items:center}

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:11px 20px; border-radius:999px;
  font-size:13px; font-weight:600; z-index:200; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}

.demo-banner{
  background:var(--pending-soft); color:var(--pending); border-radius:var(--radius-m);
  padding:11px 16px; display:flex; align-items:center; justify-content:space-between;
  font-size:12.8px; font-weight:600; margin-bottom:18px; gap:12px; flex-wrap:wrap;
}

.chart-box{position:relative; height:280px}
.chart-box.sm{height:200px}

/* Gráficos SVG dibujados a mano (sin librerías externas): el contenedor no
   fuerza una altura fija — el propio SVG trae su alto exacto según su
   contenido, así nunca queda espacio en blanco de sobra debajo. */
.svg-val{font-family:var(--font-mono); font-size:11px; font-weight:700}
.svg-cat{font-family:var(--font-ui); font-size:10.5px; fill:var(--text-dim)}
.svg-axis{font-family:var(--font-mono); font-size:10px; fill:var(--text-faint)}

.section{display:none}
.section.active{display:block}

.streak-row{display:flex; gap:14px; flex-wrap:wrap}
.streak-pill{
  flex:1; min-width:130px; background:var(--surface-2); border-radius:var(--radius-m); padding:14px;
  text-align:center;
}
.streak-pill .v{font-size:24px; font-weight:700; font-family:var(--font-mono)}
.streak-pill .k{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:3px}

.house-perf-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft)}
.house-perf-row:last-child{border-bottom:none}
.house-perf-row .name{font-weight:700; font-size:13.5px; width:110px; flex:none}
.house-perf-row .bar-track{flex:1; height:8px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.house-perf-row .bar-fill{height:100%; border-radius:99px}
.house-perf-row .stat{width:110px; text-align:right; font-family:var(--font-mono); font-size:12.5px; flex:none}

/* ---------- bottom nav (mobile) ---------- */
.bottom-nav{
  display:none; position:fixed; bottom:0; left:0; right:0; height:var(--bottomnav-h);
  background:var(--surface); border-top:1px solid var(--border); z-index:50;
  align-items:center; justify-content:space-around; padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav button{
  background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--text-faint); font-size:9.5px; font-weight:700; padding:6px 8px; cursor:pointer;
}
.bottom-nav button svg{width:20px; height:20px}
.bottom-nav button.active{color:var(--accent)}
.bottom-nav button.more-btn{color:var(--text-dim)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .bottom-nav{display:flex}
  .content{padding:18px 16px 90px}
  .topbar{padding:0 16px}
  .fab{display:flex; align-items:center; justify-content:center}
  body{padding-bottom:var(--bottomnav-h)}
}
@media (max-width:600px){
  .grid-kpi{grid-template-columns:1fr 1fr; gap:10px}
  .kpi .v{font-size:21px}
  .modal-body{padding:16px}
  .field-row{grid-template-columns:1fr 1fr}
  .content{padding:14px 12px 90px}
}

.more-sheet{
  position:fixed; inset:auto 0 0 0; background:var(--surface); border-top:1px solid var(--border);
  border-radius:20px 20px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  z-index:110; box-shadow:var(--shadow-lg);
}
.more-sheet[hidden]{display:none}
.more-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.more-grid button{
  display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--surface-2);
  border:1px solid var(--border-soft); border-radius:var(--radius-m); padding:14px 8px; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--text-dim);
}
.more-grid button svg{width:20px; height:20px}

.hint{font-size:11.5px; color:var(--text-faint); margin-top:4px}
.divider{height:1px; background:var(--border-soft); margin:18px 0}
.scroll-x{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px}

.ad-placeholder{
  border:1.5px dashed var(--border); border-radius:var(--radius-m);
  padding:22px; text-align:center; color:var(--text-faint); font-size:12px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}