/* styles.css — SmartSlip shell. Blunt, dark, mobile-first. No framework. */
:root {
  --bg: #0f1216;
  --card: #171c23;
  --line: #262e38;
  --txt: #e6e9ee;
  --dim: #93a1b1;
  --edge: #2ecc71;
  --marginal: #e1a93a;
  --accent: #3d8bfd;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 1rem;
  max-width: 820px;
  margin-inline: auto;
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--txt);
}
header h1 { margin: 0; font-size: 1.6rem; letter-spacing: 0.5px; }
header .tag { margin: 0.2rem 0 1rem; color: var(--dim); }
h2 { font-size: 1.05rem; margin: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
summary { cursor: pointer; font-weight: 600; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0;
}
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--dim); }
input, select {
  background: #0d1015;
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.5rem;
  font-size: 0.95rem;
}
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
button {
  background: #222b36;
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: 0.5; cursor: default; }
button.link { background: none; border: none; color: var(--accent); padding: 0 0.3rem; }
.note, .status { color: var(--dim); font-size: 0.82rem; }
.status { margin: 0.2rem 0 1rem; }
footer { color: var(--dim); font-size: 0.78rem; margin-top: 1.5rem; }

.rowhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.thr { flex-direction: row; align-items: center; gap: 0.4rem; white-space: nowrap; }
.thr input { width: 110px; }

#value { margin-top: 0.7rem; }
.row {
  display: grid;
  grid-template-columns: 2.4rem 3.6rem 1fr auto;
  gap: 0.4rem 0.7rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}
.row .rank { color: var(--dim); }
.row .ev { font-weight: 700; }
.row.edge .ev { color: var(--edge); }
.row.marginal .ev { color: var(--marginal); }
.row .sel { grid-column: 3; }
.row .book { grid-column: 3; color: var(--dim); font-size: 0.85rem; }
.row .fair { grid-column: 4; grid-row: 1; color: var(--dim); font-size: 0.85rem; }
.row .tag { grid-column: 4; grid-row: 2; color: var(--dim); font-size: 0.72rem; text-transform: uppercase; }
.row .badge {
  grid-column: 4; grid-row: 3;
  color: var(--marginal); border: 1px solid var(--marginal);
  border-radius: 4px; padding: 0 0.3rem; font-size: 0.7rem; justify-self: end;
}
.empty { color: var(--dim); font-style: italic; }
.badge.unv { color: var(--dim); border-color: var(--dim); }

.mrow { display: flex; justify-content: space-between; padding: 0.35rem 0; border-top: 1px solid var(--line); }
#manualList { margin-top: 0.6rem; }

button.link.log { color: var(--edge); grid-column: 5; }
button.link.danger { color: #e0564b; }

/* ledger */
.lactions { display: flex; gap: 0.5rem; align-items: center; }
.import { color: var(--accent); cursor: pointer; font-size: 0.9rem; }
.lrow { padding: 0.55rem 0; border-top: 1px solid var(--line); }
.lrow.won { border-left: 3px solid var(--edge); padding-left: 0.5rem; }
.lrow.lost { border-left: 3px solid #e0564b; padding-left: 0.5rem; }
.lrow.void { border-left: 3px solid var(--dim); padding-left: 0.5rem; opacity: 0.7; }
.lsel { font-weight: 600; margin-right: 0.5rem; }
.lbook, .lclv { color: var(--dim); font-size: 0.85rem; margin-right: 0.6rem; }
.lctrl { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.3rem; }
.llim { color: var(--marginal); font-size: 0.82rem; margin: 0.3rem 0 0; }

/* stats */
.stat { display: flex; justify-content: space-between; padding: 0.3rem 0; border-top: 1px solid var(--line); }
.stat .k { color: var(--dim); }
.buckets { margin-top: 0.7rem; }
.bhead { color: var(--dim); font-size: 0.82rem; margin-bottom: 0.3rem; }
.brow { display: flex; justify-content: space-between; padding: 0.25rem 0; border-top: 1px dashed var(--line); }
.warn { color: var(--marginal); font-size: 0.85rem; margin-top: 0.6rem; }
.verdict { margin-top: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 6px; font-size: 0.88rem; }
.verdict.pos { color: var(--edge); border: 1px solid var(--edge); }
.verdict.warn { color: var(--marginal); border: 1px solid var(--marginal); }
#backtest { margin-top: 0.5rem; }

/* promo */
.promoverdict { font-weight: 700; padding: 0.5rem 0; }
.promoverdict.pos { color: var(--edge); }
.promoverdict.neg { color: #e0564b; }
.why { color: var(--dim); font-size: 0.85rem; margin: 0.2rem 0 0; }
.unval { color: var(--marginal); font-size: 0.72rem; border: 1px solid var(--marginal); border-radius: 4px; padding: 0.1rem 0.4rem; white-space: nowrap; }

/* simplified main view */
.pickrow { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin: 0.6rem 0; }
.pickrow label { flex: 1 1 200px; }
.pickrow button { white-space: nowrap; }
details.card > summary { font-size: 1.05rem; padding: 0.2rem 0; }
details.card h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; color: var(--dim); }

#predictions { margin-top: 0.7rem; }
.match { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.mhead .teams { font-weight: 600; font-size: 1rem; }
.mhead .when { color: var(--dim); font-size: 0.78rem; white-space: nowrap; }
.markets { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; margin-top: 0.45rem; }
.mk { font-size: 0.85rem; padding: 0.15rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--txt); }
.mk.sub { color: var(--dim); }
.mk.lean { border-color: var(--accent); color: #fff; background: rgba(61,139,253,0.18); font-weight: 600; }
.prow.pred {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.7rem;
  align-items: baseline;
}
.pred .pmatch { font-weight: 600; }
.pred .pxg { grid-column: 2; grid-row: 1; color: var(--dim); font-size: 0.82rem; text-align: right; }
.pred .p1x2 { grid-column: 1; font-size: 0.88rem; }
.pred .pou { grid-column: 2; color: var(--dim); font-size: 0.82rem; text-align: right; }
.pred .plean { grid-column: 2; grid-row: 1; }
.prow { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.pctrl { display: flex; gap: 0.5rem; flex-wrap: wrap; }
#promoLog { margin-top: 0.5rem; }