/* Schelă provizorie — doar cât să fie citibilă structura. Nu e design final. */
:root{
  --bg:#fbfbfc; --card:#fff; --ink:#16181d; --ink2:#4a5160; --muted:#7b8393;
  --line:#e3e6ec; --accent:#9a6b12; --accent-bg:#fdf6e6;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1115;--card:#171a20;--ink:#e8eaee;--ink2:#c0c5cf;--muted:#8b93a1;
        --line:#252932;--accent:#e0b155;--accent-bg:#251f10;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header,main,footer{max-width:760px;margin:0 auto;padding:0 20px}
header{padding-top:22px;padding-bottom:18px;border-bottom:1px solid var(--line);
  margin-bottom:32px;font-size:.9rem;color:var(--muted)}
header a{color:var(--ink2);text-decoration:none;font-weight:500}
header a:hover{color:var(--accent)}
h1{font-size:1.75rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 24px}
h2{font-size:1.05rem;letter-spacing:-.01em;margin:36px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
a{color:var(--accent)}
p{margin:0 0 1em}

ol.balls{list-style:none;display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:0 0 28px}
ol.balls li{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-bg);color:var(--accent);border:1px solid var(--line);
  font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums}

table{border-collapse:collapse;width:100%;font-size:.92rem;margin-bottom:14px}
th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
td:first-child{font-weight:500}

dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:0;margin:0;
  border-top:1px solid var(--line)}
dt{padding:9px 12px 9px 0;color:var(--muted);font-size:.9rem;border-bottom:1px solid var(--line)}
dd{padding:9px 0;margin:0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}

ul{padding-left:18px}
li{margin-bottom:4px}

nav.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem}

footer{margin-top:56px;padding-top:18px;padding-bottom:48px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.82rem}
@media(max-width:560px){dl{grid-template-columns:1fr}dt{border-bottom:none;padding-bottom:0}}

ul.years{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
ul.years li{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;border:1px solid var(--line);border-radius:3px;padding:7px 10px;
  font-variant-numeric:tabular-nums}
ul.years li span{color:var(--muted);font-size:.78rem}

/* Al saselea disc de la Joker e numarul Joker, nu unul din cele cinci: alta urna,
   1-20. Marginea punctata si semnul + il separa vizual, ca sa nu fie citit gresit. */
ol.balls li.j{background:transparent;color:var(--ink2);border-style:dashed;
  position:relative;margin-left:14px}
ol.balls li.j::before{content:"+";position:absolute;left:-17px;
  color:var(--muted);font-weight:400}

td.nums{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Tabele late (cel de 1-49 are opt coloane): sa se plimbe ele, nu pagina. */
.scroll{overflow-x:auto}
.scroll table{min-width:520px}

/* Bara din tabelul cu suma celor 6 numere: latimea e proportia fata de
   intervalul cel mai populat, calculata la generare. */
td.barcell{width:34%;padding-right:0}
span.bar{display:block;height:9px;border-radius:2px;background:var(--accent);opacity:.7}

/* Generator */
.grid49{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
  margin-bottom:16px}
.numbtn{font:inherit;font-variant-numeric:tabular-nums;padding:9px 0;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink2)}
.numbtn:hover{border-color:var(--accent);color:var(--accent)}
.numbtn.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);
  font-weight:600}
.numbtn:focus-visible,.controls button:focus-visible,.lnk:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

p.picked{font-size:.92rem;color:var(--muted)}
p.picked strong{color:var(--ink);font-variant-numeric:tabular-nums}
.lnk{font:inherit;font-size:.85rem;background:none;border:none;padding:0 0 0 8px;
  color:var(--accent);text-decoration:underline;cursor:pointer}

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;
  font-size:.9rem}
.ctl-lbl{color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.controls label{display:inline-flex;align-items:center;gap:5px}
.controls button{font:inherit;font-size:.88rem;padding:6px 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink2)}
.controls button:hover{border-color:var(--accent);color:var(--accent)}
.controls input[type=number]{font:inherit;width:64px;padding:6px 8px;
  border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink)}
button.primary{font:inherit;padding:10px 18px;cursor:pointer;border-radius:3px;
  border:1px solid var(--accent);background:var(--accent);color:var(--bg);font-weight:600}
button.primary:hover{opacity:.9}

.tickets{display:grid;gap:8px;margin-bottom:8px}
.ticket{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:3px;padding:8px 12px}
.tno{color:var(--muted);font-size:.78rem;min-width:20px;font-variant-numeric:tabular-nums}
ol.balls.sm{margin:0;gap:7px}
ol.balls.sm li{width:38px;height:38px;font-size:.95rem}
p.note{border-left:2px solid var(--accent);padding-left:12px;color:var(--ink2);
  font-size:.92rem}

.ctl-unit{color:var(--muted);font-size:.88rem}
.controls select{font:inherit;font-size:.88rem;padding:6px 8px;
  border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink)}
.controls select:focus-visible,.controls input:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}
p.note{margin-bottom:16px}

/* Verificator de bilete */
p.sublbl{font-size:.88rem;color:var(--muted);margin:14px 0 8px}
.grid49.small{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
.grid49.small .numbtn{padding:7px 0;font-size:.9rem}
ol.balls li.hit{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.ticket.wide{flex-wrap:wrap}
.ticket .res{font-size:.9rem;flex:1 1 210px}
.ticket .lnk.rm{margin-left:auto;font-size:1.1rem;text-decoration:none;line-height:1}
.verdict{font-weight:600}
.verdict.win{color:var(--accent)}
.verdict.miss{color:var(--muted);font-weight:500}
.sub{color:var(--muted);font-size:.85rem}
p.sub{margin-top:14px}

/* --- verificator in pagina zilei --- */
details.check{border:1px solid var(--line);border-radius:8px;background:var(--card);margin:1.2rem 0;padding:0}
details.check>summary{cursor:pointer;padding:.7rem .9rem;font-weight:600;color:var(--accent);list-style:none}
details.check>summary::-webkit-details-marker{display:none}
details.check>summary::before{content:"B8";display:inline-block;margin-right:.5rem;transition:transform .15s}
details.check[open]>summary::before{transform:rotate(90deg)}
details.check>summary:hover{background:var(--accent-bg)}
details.check .checkbody{padding:0 .9rem .9rem}
details.check .vout{margin-top:.6rem}
p.note.verlink{margin-top:1rem;padding:.7rem .9rem;border-left:3px solid var(--accent);background:var(--accent-bg);border-radius:0 6px 6px 0}

/* --- bioritm --- */
.bio{display:grid;grid-template-columns:7.5rem 1fr 4rem;gap:.4rem .7rem;align-items:center;
  padding:.45rem 0;border-bottom:1px solid var(--line)}
.bio:last-child{border-bottom:0}
.bio-n{font-weight:600}
.bio-track{position:relative;height:10px;border-radius:5px;background:var(--accent-bg);
  display:flex;justify-content:center;overflow:hidden}
.bio-track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.bio-fill{height:100%;position:absolute;top:0}
.bio-fill.poz{left:50%;background:var(--accent)}
.bio-fill.neg{right:50%;background:var(--muted)}
.bio-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.bio-v.poz{color:var(--accent)}
.bio-v.neg{color:var(--muted)}
.bio-s{grid-column:2/4;font-size:.85rem;color:var(--ink2);margin-top:-.2rem}
.bio.total{border-top:2px solid var(--line);border-bottom:0;margin-top:.4rem;padding-top:.7rem}
.bio.total .bio-n{font-size:1.05rem}

.drawcards{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin:.8rem 0}
.drawcard{border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem;background:var(--card);
  display:grid;gap:.15rem}
.drawcard.poz{border-left:3px solid var(--accent)}
.drawcard.neg{border-left:3px solid var(--muted)}
.dc-zi{font-weight:600;text-transform:capitalize}
.dc-data{color:var(--ink2);font-size:.9rem}
.dc-val{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.drawcard.poz .dc-val{color:var(--accent)}
.drawcard.neg .dc-val{color:var(--muted)}
.dc-sub{font-size:.8rem;color:var(--muted)}

td.poz{color:var(--accent)}
td.neg{color:var(--muted)}
#cal td{font-variant-numeric:tabular-nums;text-align:right}
#cal td:first-child{text-align:left;white-space:nowrap}
tr.zi-extragere td{background:var(--accent-bg);font-weight:600}
p.formula{font-size:1.1rem;padding:.7rem .9rem;background:var(--accent-bg);border-radius:6px;
  font-variant-numeric:tabular-nums}
.controls input[type=date]{font:inherit;padding:7px 9px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);color:var(--ink)}

/* --- numere norocoase + zodii --- */
h3{font-size:.95rem;margin:26px 0 10px;color:var(--ink2)}
p.lead{font-size:1.05rem;color:var(--ink2);margin-bottom:26px}
.controls input[type=text]{font:inherit;padding:7px 9px;min-width:14rem;
  border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
tr.aici td{background:var(--accent-bg)}
tr.aici td:first-child{font-weight:700}
#prov td:last-child,#prov th:last-child{font-variant-numeric:normal;color:var(--ink2)}
#numere{margin-bottom:20px}

/* --- statistici pe perioada --- */
/* display:flex din .controls ar castiga altfel peste atributul hidden. */
[hidden]{display:none!important}
.perioada button[aria-pressed=true],.controls button[aria-pressed=true]{
  background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600}
p.ctx{position:sticky;top:0;z-index:1;margin:0 0 8px;padding:8px 0;background:var(--bg);
  border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.heat{display:grid;gap:4px;margin-bottom:10px}
.hc{font:inherit;display:grid;place-items:center;gap:0;padding:6px 0;border:1px solid var(--line);
  border-radius:3px;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;min-width:0}
button.hc{cursor:pointer}
.hc b{font-size:.95rem}
.hc span{font-size:.68rem;color:var(--ink2)}
.hc.hi{color:var(--bg)}
.hc.hi span{color:var(--bg);opacity:.85}
.hc.on{outline:2px solid var(--ink);outline-offset:1px}
button.hc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
p.legend{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
p.legend .grad{flex:1 1 80px;height:8px;border-radius:4px;min-width:60px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,var(--card)),var(--accent))}
th button.th{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;
  border:none;padding:0;cursor:pointer;text-align:left}
th button.th:hover{color:var(--accent)}
th[aria-sort=descending] button.th::after{content:" ↓"}
th[aria-sort=ascending] button.th::after{content:" ↑"}
.doua{display:grid;gap:0 24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
details.toate summary{cursor:pointer;color:var(--accent);font-size:.88rem;margin-bottom:8px}
.controls select{min-width:0}
@media(max-width:560px){.hc b{font-size:.85rem}.hc span{font-size:.62rem}}