:root{
  --bg:#0b0f14; --panel:#141b24; --panel2:#1b2530; --line:#27323f;
  --txt:#e7eef5; --muted:#8294a6; --green:#16c784; --green-dk:#0a7d34;
  --amber:#ffb020; --red:#ff5470; --accent:#4da3ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -200px,#16202b,#0b0f14 60%);
  color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45; min-height:100vh;
}
h1,h2{margin:0}
.muted{color:var(--muted);font-weight:400;font-size:.7em}
.hidden{display:none!important}

/* Header */
.hdr{padding:18px clamp(12px,4vw,40px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;background:rgba(11,15,20,.85);backdrop-filter:blur(10px)}
.hdr-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:30px;filter:drop-shadow(0 0 12px var(--amber))}
.brand h1{font-size:clamp(18px,3vw,24px);letter-spacing:-.5px}
.tag{margin:0;color:var(--muted);font-size:13px}
.books{display:flex;gap:8px;flex-wrap:wrap}
.book-chip{display:flex;flex-direction:column;line-height:1.1;padding:6px 12px;border-radius:10px;
  font-weight:700;font-size:13px;color:#fff;border:1px solid rgba(255,255,255,.12)}
.book-chip small{font-weight:500;opacity:.85;font-size:10px}

.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;min-width:96px;flex:1 1 auto;text-align:center}
.stat .n{display:block;font-size:22px;font-weight:800}
.stat .l{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.stat.surebet .n{color:var(--green)}
.conn{margin-top:10px;font-size:12px;color:var(--muted)}
.conn.ok::before{content:"● ";color:var(--green)}
.conn.bad::before{content:"● ";color:var(--red)}

/* Sample-mode banner + badges (έντιμο: ΔΕΝ είναι live) */
.sample-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,#3a2a07,#241a05);border:1px solid var(--amber);
  border-radius:14px;padding:12px 16px;margin-bottom:24px;
  box-shadow:0 0 24px rgba(255,176,32,.14)}
.sb-badge{background:var(--amber);color:#241a05;font-weight:900;font-size:12px;
  letter-spacing:.5px;padding:4px 10px;border-radius:8px;white-space:nowrap}
.sb-text{color:#ffe2a8;font-size:13px;font-weight:600;flex:1 1 240px;line-height:1.4}
.sb-check{color:var(--amber);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* «ΔΕΙΓΜΑ» tag πάνω σε κάθε sample κάρτα/γραμμή */
.sample-tag{position:absolute;top:10px;right:10px;background:var(--amber);color:#241a05;
  font-weight:900;font-size:10px;letter-spacing:.5px;padding:3px 8px;border-radius:7px;z-index:2}
.card.is-sample,.opp.is-sample{position:relative;border-color:var(--amber)}
.card.is-sample{box-shadow:0 0 24px rgba(255,176,32,.16)}
.opp.is-sample .opp-head{padding-right:78px}

/* Sections */
main{padding:clamp(14px,4vw,40px);max-width:1200px;margin:0 auto}
.section{margin-bottom:34px}
.section h2{font-size:18px;margin-bottom:14px}
.empty{color:var(--muted);background:var(--panel);border:1px dashed var(--line);
  border-radius:12px;padding:18px;text-align:center}

/* Surebet cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{background:linear-gradient(180deg,#0f2a1e,#10171f);border:1px solid var(--green);
  border-radius:16px;padding:16px;box-shadow:0 0 24px rgba(22,199,132,.18)}
.card .profit{font-size:34px;font-weight:900;color:var(--green);line-height:1}
.card .match{font-weight:700;margin:6px 0 2px}
.card .mkt{color:var(--accent);font-size:13px;margin-bottom:10px}
.split{width:100%;border-collapse:collapse;font-size:13px}
.split th,.split td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.split th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase}
.split td.num{text-align:right;font-variant-numeric:tabular-nums}
.split .bk{font-weight:700}
.guar{margin-top:10px;font-size:13px;color:var(--green)}
.fresh{margin-top:6px;font-size:11px;color:var(--muted)}

/* Opportunity grid */
.grid{display:flex;flex-direction:column;gap:12px}
.opp{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.opp.is-sure{border-color:var(--green)}
.opp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;background:var(--panel2);flex-wrap:wrap}
.opp-head .left .m{font-weight:700}
.opp-head .left .meta{font-size:12px;color:var(--muted)}
.opp-head .left .mkt{font-size:12px;color:var(--accent)}
.score{background:#0b0f14;border:1px solid var(--line);border-radius:8px;padding:2px 8px;
  font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.margin-badge{text-align:right;white-space:nowrap}
.margin-badge .pct{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.margin-badge.sure .pct{color:var(--green)}
.margin-badge .dist{font-size:11px;color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center;
  font-variant-numeric:tabular-nums}
.tbl th{color:var(--muted);font-weight:600;font-size:11px}
.tbl td.out{text-align:left;color:var(--txt);font-weight:600}
.tbl td.best{background:rgba(22,199,132,.16);color:var(--green);font-weight:800;border-radius:4px}
.tbl td.na{color:#46566a}

footer{border-top:1px solid var(--line);padding:18px clamp(12px,4vw,40px);margin-top:20px}
.disclaimer{color:var(--muted);font-size:12px;max-width:900px;margin:0 auto;text-align:center}

@media(max-width:520px){
  .stat{min-width:72px;padding:8px}
  .stat .n{font-size:18px}
  .card .profit{font-size:28px}
}