/* Fonts are served from this site (no requests to Google) */
@import url('/fonts/fonts.css');

:root{
  --void-1:#06070d;
  --panel:var(--panel);
  --panel-2:rgba(var(--fg-rgb),0.03);
  --line:rgba(var(--fg-rgb),0.08);
  --line-bright:rgba(var(--fg-rgb),0.16);
  --gold:#f5c451;
  --gold-bright:#ffe08a;
  --gold-dim:#a9863a;
  --ember:#ff6b4a;
  --ember-dim:#c44a32;
  --mint:#5fe3b3;
  --mint-dim:#2f8f6e;
  --ice:#7fb4ff;
  --ink:#e9e8f0;
  --ink-dim:#8d8fa3;
  --ink-faint:#5a5c70;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}

body{
  font-family:'Space Grotesk', 'Segoe UI', sans-serif;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, #1b1438 0%, transparent 60%),
    radial-gradient(ellipse 700px 600px at 110% 10%, #0f2436 0%, transparent 55%),
    radial-gradient(ellipse 1000px 800px at 50% 120%, #2a0f1c 0%, transparent 55%),
    var(--void-1);
  background-attachment:fixed;
  color:var(--ink);
  margin:0;
  padding:0 16px 80px;
  min-height:100vh;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,0.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 10% 65%, rgba(255,255,255,0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 50% 15%, rgba(255,255,255,0.4) 50%, transparent 50%);
  background-size:600px 600px;
  pointer-events:none;
  opacity:0.6;
  z-index:0;
}

.container{max-width:1180px; margin:auto; position:relative; z-index:1;}

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  margin:0 -16px 28px;
  padding:12px 16px;
  background:rgba(6,7,13,0.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{max-width:1180px; margin:auto; display:flex; align-items:center; gap:14px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:-0.01em; margin-inline-end:auto;}
.brand .logo{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(150deg, var(--gold-bright), var(--gold) 55%, var(--gold-dim));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:0.75rem; color:#1a1305;
  box-shadow:0 0 16px rgba(245,196,81,0.35);
}
.brand small{display:block; font-family:var(--mono); font-weight:400; font-size:0.62rem; color:var(--mint); letter-spacing:0.18em; text-transform:uppercase;}
.nav{display:flex; align-items:center; gap:6px;}
.nav a{
  text-decoration:none;
  font-size:0.9rem;
  color:var(--ink-dim);
  padding:9px 14px;
  border-radius:10px;
  transition:color 0.2s, background 0.2s;
  white-space:nowrap;
}
.nav a:hover{color:var(--ink); background:rgba(var(--fg-rgb),0.05);}
.nav a.active{color:var(--ink); background:rgba(var(--fg-rgb),0.07);}
.nav a.cta{font-weight:600; color:#1a1305; background:linear-gradient(120deg, var(--gold-bright), var(--gold)); box-shadow:0 4px 14px rgba(245,196,81,0.25);}
.nav a.cta.alt{color:#072218; background:linear-gradient(120deg, var(--mint), var(--mint-dim)); box-shadow:0 4px 14px rgba(95,227,179,0.22);}
.nav a.cta:hover{filter:brightness(1.08);}
.nav a.cta.active{outline:2px solid rgba(255,255,255,0.35); outline-offset:2px;}
.nav-group{position:relative;}
.nav-drop{
  all:unset; box-sizing:border-box; cursor:pointer;
  font-size:0.9rem; color:var(--ink-dim); padding:9px 14px; border-radius:10px; white-space:nowrap;
  transition:color 0.2s, background 0.2s;
}
.nav-drop:hover, .nav-group.open .nav-drop{color:var(--ink); background:rgba(var(--fg-rgb),0.05);}
.nav-drop.active{color:var(--ink); background:rgba(var(--fg-rgb),0.07);}
.nav-drop:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.nav-drop .caret{font-size:0.7rem; opacity:0.7; display:inline-block; transition:transform 0.2s;}
.nav-group.open .caret{transform:rotate(180deg);}
.nav-menu{
  display:none; position:absolute; top:calc(100% + 8px); inset-inline-start:0; z-index:60;
  min-width:210px; padding:6px;
  background:#10131f; border:1px solid var(--line-bright); border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.5);
  animation:tileIn 0.18s ease both;
}
.nav-group.open .nav-menu{display:flex; flex-direction:column;}
.nav .nav-menu a{display:block; padding:10px 12px; border-radius:9px;}
.nav .nav-menu a.active{color:var(--gold); background:rgba(245,196,81,0.08);}

/* ===== PAGE HEAD ===== */
.page-head{text-align:center; padding:18px 0 26px;}
.eyebrow{
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--mint); margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
h1{
  font-size:clamp(2rem, 5vw, 3.2rem);
  font-weight:700;
  margin:0 0 12px;
  letter-spacing:-0.02em;
  line-height:1.08;
  background:linear-gradient(120deg, var(--gold-bright) 0%, var(--gold) 45%, var(--ember) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.subtitle{color:var(--ink-dim); font-size:1.02rem; max-width:620px; margin:0 auto; line-height:1.6;}

/* ===== CARDS ===== */
.card{
  background:var(--panel);
  backdrop-filter:blur(20px);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  margin:0 0 22px;
  position:relative;
  overflow:hidden;
}
.card::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);}
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.shown{opacity:1; transform:none;}

.section-label{display:flex; align-items:baseline; gap:14px; margin:0 0 8px; flex-wrap:wrap;}
.section-label .idx{font-family:var(--mono); font-size:0.8rem; color:var(--ink-faint); border:1px solid var(--line-bright); border-radius:6px; padding:3px 9px;}
.section-label h2{font-size:1.35rem; font-weight:600; margin:0;}
.section-intro{color:var(--ink-dim); font-size:0.92rem; line-height:1.6; margin:0 0 22px; max-width:780px;}

/* ===== KPI STRIP ===== */
.kpi-strip{display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:22px;}
.kpi-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  animation:rise 0.5s ease both;
}
.kpi-card .k{font-family:var(--mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-faint);}
.kpi-card .v{font-family:var(--mono); font-size:1.5rem; font-weight:700; margin-top:8px; color:var(--gold); line-height:1.1;}
.kpi-card .s{font-size:0.75rem; color:var(--ink-dim); margin-top:4px;}
.kpi-card.accent .v{color:var(--mint);}
.jp-meter{height:5px; border-radius:3px; background:rgba(var(--fg-rgb),0.07); overflow:hidden; margin-top:8px;}
.jp-meter div{height:100%; width:0; border-radius:3px; transition:width 1.2s cubic-bezier(.2,.8,.2,1);}
@keyframes rise{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}

/* ===== BUTTONS & PILLS ===== */
.btn{
  font-family:'Space Grotesk', sans-serif;
  padding:13px 26px;
  background:linear-gradient(120deg, var(--mint), var(--mint-dim));
  border:none; border-radius:12px;
  color:#072218; font-size:1rem; font-weight:600;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow:0 6px 18px rgba(95,227,179,0.22);
  text-decoration:none; display:inline-block;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(95,227,179,0.3);}
.btn:active{transform:translateY(0);}
.btn.secondary{background:transparent; border:1px solid var(--line-bright); color:var(--ink); box-shadow:none;}
.btn.secondary:hover{border-color:var(--gold-dim);}
.btn.small{padding:8px 14px; font-size:0.85rem; border-radius:10px;}
.btn.gold{background:linear-gradient(120deg, var(--gold-bright), var(--gold)); color:#1a1305; box-shadow:0 6px 18px rgba(245,196,81,0.22);}

.pills{display:flex; flex-wrap:wrap; gap:6px;}
.pill{
  font-family:var(--mono); font-size:0.78rem;
  background:transparent; border:1px solid var(--line-bright); color:var(--ink-dim);
  padding:8px 14px; border-radius:30px; cursor:pointer; transition:all 0.2s;
}
.pill:hover{border-color:var(--gold-dim); color:var(--ink);}
.pill.active{background:var(--gold); border-color:var(--gold); color:#1a1305;}
.control-row{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end; margin-bottom:22px;}
.control-group{display:flex; flex-direction:column; gap:8px;}
.control-group > span{font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint);}

/* ===== BALLS ===== */
.ball{
  width:52px; height:52px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1.05rem; font-weight:700; color:#1a1305;
  flex-shrink:0;
}
.ball.main{background:linear-gradient(150deg, var(--gold-bright), var(--gold) 55%, var(--gold-dim)); box-shadow:0 4px 14px rgba(245,196,81,0.25), inset 0 2px 4px rgba(255,255,255,0.5);}
.ball.star{background:linear-gradient(150deg, #ff9b80, var(--ember) 55%, var(--ember-dim)); color:#2a0a02; box-shadow:0 4px 14px rgba(255,107,74,0.25), inset 0 2px 4px rgba(255,255,255,0.4);}
.ball.sm{width:40px; height:40px; font-size:0.9rem;}
.ball.xs{width:30px; height:30px; font-size:0.75rem;}
.ball.miss{filter:saturate(0.2) brightness(0.55);}
.ball.pop{animation:pop 0.5s cubic-bezier(.2,.9,.3,1.4) both;}
@keyframes pop{0%{transform:scale(0) rotate(-90deg); opacity:0;}100%{transform:none; opacity:1;}}
.balls{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.balls .sep{width:8px;}

/* ===== LAST DRAW ===== */
.last-draw{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; border-color:rgba(245,196,81,0.25);}
.last-draw-meta{flex:1; min-width:220px;}
.last-draw-meta .tag{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--gold-dim); margin-bottom:6px;}
.last-draw-meta h3{font-size:1.3rem; margin:0 0 8px; font-weight:600;}
.last-draw-meta .jackpot{font-family:var(--mono); color:var(--mint); font-size:0.95rem;}
.last-draw-meta .next-draw{font-family:var(--mono); color:var(--ink-faint); font-size:0.8rem; margin-top:6px;}
.last-draw.fresh{animation:freshDraw 2.4s ease-out;}
@keyframes freshDraw{0%{box-shadow:0 0 0 0 rgba(95,227,179,0.7);}100%{box-shadow:0 0 0 24px rgba(95,227,179,0);}}

/* ===== FREQUENCY RINGS ===== */
.ring-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:12px;}
.ntile{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px 10px; border-radius:14px;
  background:var(--panel-2); border:1px solid var(--line);
  transition:transform 0.2s, border-color 0.2s, background 0.2s;
  animation:tileIn 0.45s ease both;
}
@keyframes tileIn{from{opacity:0; transform:translateY(8px) scale(0.96);}to{opacity:1; transform:none;}}
.ntile:hover, .ntile:focus-visible{transform:translateY(-3px); border-color:var(--line-bright); background:rgba(var(--fg-rgb),0.05);}
.ntile.selected{border-color:var(--gold); background:rgba(245,196,81,0.08);}
.ring{position:relative; width:64px; height:64px;}
.ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.ring circle{fill:none; stroke-width:6;}
.ring .track{stroke:rgba(var(--fg-rgb),0.07);}
.ring .fill{stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1);}
.ring .val{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:1.2rem;}
.ntile .count{font-family:var(--mono); font-size:0.8rem; line-height:1.2;}
.ntile .pct{font-family:var(--mono); font-size:0.7rem; color:var(--ink-dim);}
.tier-hot .fill{stroke:var(--gold);}
.tier-hot .val{color:var(--gold-bright);}
.tier-mid .fill{stroke:var(--mint);}
.tier-cold .fill{stroke:var(--ice);}
.tier-cold .val{color:#b9d4ff;}
.tier-star.tier-hot .fill{stroke:var(--ember);}
.tier-star.tier-hot .val{color:#ffb4a1;}
.legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0 0; font-size:0.8rem; color:var(--ink-dim);}
.legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle;}

.explorer{margin-top:22px; border:1px solid var(--line-bright); border-radius:16px; padding:22px; background:rgba(var(--fg-rgb),0.025); animation:tileIn 0.35s ease both;}
.explorer-head{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.explorer-head h3{margin:0; font-size:1.15rem;}
.explorer-head .close{margin-inline-start:auto;}
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px;}
.kpi{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:14px;}
.kpi .k{font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint);}
.kpi .v{font-family:var(--mono); font-size:1.25rem; font-weight:700; margin-top:6px;}
.kpi .s{font-size:0.78rem; color:var(--ink-dim); margin-top:3px;}
.year-bars{display:flex; align-items:flex-end; gap:4px; height:70px; margin-top:8px;}
.year-bars div{flex:1; background:linear-gradient(180deg, var(--gold), var(--gold-dim)); border-radius:3px 3px 0 0; min-height:2px;}
.year-labels{display:flex; gap:4px; font-family:var(--mono); font-size:0.6rem; color:var(--ink-faint);}
.year-labels span{flex:1; text-align:center;}
.sub-title{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint); margin:20px 0 8px;}

/* ===== CHARTS ===== */
.dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.dash-grid .card{margin:0;}
.chart-wrap{position:relative; height:260px; margin-top:6px;}
.chart-title{font-size:1rem; font-weight:600; margin:0 0 4px;}
.chart-sub{font-size:0.8rem; color:var(--ink-faint); margin:0 0 12px;}
.stat-list{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.stat-row{display:flex; align-items:center; font-size:0.9rem;}
.stat-row .n{font-family:var(--mono); font-weight:700; color:var(--gold); width:30px;}
.stat-row .bar-wrap{flex:1; height:6px; background:rgba(var(--fg-rgb),0.06); border-radius:3px; margin:0 10px; overflow:hidden;}
.stat-row .bar{height:100%; background:linear-gradient(90deg, var(--gold-dim), var(--gold)); border-radius:3px; width:0; transition:width 1s ease;}
.stat-row .v{font-family:var(--mono); color:var(--ink-dim); font-size:0.75rem; text-align:end; min-width:100px;}

/* ===== GENERATOR ===== */
.gen-list{display:grid; gap:14px; margin-top:6px;}
.gen-empty{color:var(--ink-dim); font-size:0.92rem; padding:26px; border:1px dashed var(--line-bright); border-radius:14px; text-align:center;}
.ticket{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; animation:tileIn 0.4s ease both;
}
.ticket .score{display:flex; flex-direction:column; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; border:2px solid var(--mint); font-family:var(--mono); flex-shrink:0;}
.ticket .score b{font-size:1.1rem;}
.ticket .score small{font-size:0.55rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.08em;}
.ticket .info{flex:1; min-width:200px;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.chip{font-family:var(--mono); font-size:0.7rem; padding:4px 9px; border-radius:20px; border:1px solid var(--line-bright); color:var(--ink-dim);}
.chip.good{border-color:rgba(95,227,179,0.4); color:var(--mint);}
.chip.warn{border-color:rgba(255,107,74,0.4); color:#ff9b80;}
.ticket .add.added{background:transparent; border:1px solid var(--mint); color:var(--mint); box-shadow:none;}
.note{font-size:0.82rem; color:var(--ink-faint); line-height:1.6; border-top:1px solid var(--line); padding-top:14px; margin-top:22px;}

.split{display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:22px; align-items:start;}
.split .card{margin:0;}
.sticky{position:sticky; top:84px;}

/* ===== MY TICKETS ===== */
.my-empty{color:var(--ink-dim); font-size:0.92rem; padding:18px; border:1px dashed var(--line-bright); border-radius:14px; text-align:center; line-height:1.6;}
.my-list{display:grid; gap:12px;}
.my-item{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 16px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line); animation:tileIn 0.35s ease both;}
.my-item .when{font-family:var(--mono); font-size:0.72rem; color:var(--ink-dim); width:100%; display:flex; justify-content:space-between; gap:10px;}
.my-item .when b{color:var(--ink); font-size:0.8rem;}
.my-item .status{flex:1; min-width:140px; font-family:var(--mono); font-size:0.8rem;}
.status.win{color:var(--mint);}
.status.lose{color:var(--ink-dim);}
.status.wait{color:var(--gold);}
.my-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.icon-btn{all:unset; cursor:pointer; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-bright); color:var(--ink-dim);}
.icon-btn:hover{border-color:var(--ember); color:var(--ember);}
.count-badge{font-family:var(--mono); font-size:0.75rem; color:#1a1305; background:var(--gold); border-radius:20px; padding:2px 9px; margin-left:4px;}

/* ===== CHECK ===== */
.input-label{font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint); margin-bottom:10px;}
.input-group{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px;}
.input-group input{
  width:58px; padding:13px 0; text-align:center;
  border-radius:10px; border:1px solid var(--line-bright);
  background:rgba(var(--fg-rgb),0.04); color:var(--ink);
  font-family:var(--mono); font-size:1.05rem; font-weight:700;
  -moz-appearance:textfield; transition:border-color 0.2s;
}
.input-group input:focus{outline:none; border-color:var(--gold);}
.input-group input::placeholder{font-size:0.72rem; font-weight:400; color:var(--ink-faint);}
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.result{font-size:1.05rem; font-weight:600; font-family:var(--mono); margin:0 0 14px;}
.green{color:var(--mint);}
.red{color:var(--ember);}
.tier-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:0.82rem; margin-top:10px;}
.tier-table th, .tier-table td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:start;}
.tier-table th{color:var(--ink-faint); font-weight:500; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em;}
.tier-table td.num, .tier-table th.num{text-align:end;}
.tier-table td:nth-child(2){white-space:nowrap;}

footer{text-align:center; color:var(--ink-faint); font-size:0.8rem; margin-top:50px; font-family:var(--mono); line-height:1.8;}

/* ===== DASHBOARD / PAIRS (moved from the old one-page dashboard) ===== */
.draw-summary{flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; padding-top:18px; border-top:1px solid var(--line);}
.pairs{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);}
.pairs h3{margin:0 0 6px; font-size:1.1rem;}
.pairs .section-intro{margin-bottom:16px;}
.pair-filter .pill{min-width:40px; text-align:center;}
.pair-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin-top:16px;}
.pair{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 14px;
  padding:12px 14px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line);
  animation:tileIn 0.35s ease both;
}
.pair .balls{grid-row:span 3; gap:4px; flex-wrap:nowrap;}
.pair .cnt{font-family:var(--mono); font-weight:700; font-size:1.05rem;}
.pair .cnt small{font-weight:400; font-size:0.7rem; color:var(--ink-dim); margin-inline-start:4px;}
.pair .meta{font-family:var(--mono); font-size:0.68rem; color:var(--ink-dim);}
.pair .bar{height:4px; border-radius:2px; background:rgba(var(--fg-rgb),0.06); overflow:hidden; grid-column:2;}
.pair .bar div{height:100%; background:linear-gradient(90deg, var(--ember-dim), var(--ember)); width:0; transition:width 0.8s ease;}
.pair.rank1{border-color:rgba(255,107,74,0.45);}
.pair-more{margin-top:14px; margin-inline-end:8px;}
.pair-select{
  font-family:var(--mono); font-size:0.85rem;
  background:rgba(var(--fg-rgb),0.04); color:var(--ink);
  border:1px solid var(--line-bright); border-radius:30px;
  padding:8px 34px 8px 14px; min-width:120px; cursor:pointer;
}
.pair-select:focus{outline:none; border-color:var(--gold);}
.pair-select option{background:#10131f; color:var(--ink);}
.combo-summary{margin-top:16px; font-family:var(--mono); font-size:0.8rem; color:var(--ink-dim);}
.combo-list{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));}
.pair.combo .balls{grid-row:span 3;}
.pair.combo .meta{line-height:1.5;}
.pair.main-pair .bar div{background:linear-gradient(90deg, var(--gold-dim), var(--gold));}
.pair.main-pair.rank1{border-color:rgba(245,196,81,0.45);}
.chip.cold{border-color:rgba(127,180,255,0.45); color:var(--ice);}
.ball-stats{flex-basis:100%; display:grid; grid-template-columns:repeat(7, 1fr); gap:10px;}
.bstat{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
  padding:14px 8px 12px; border-radius:14px;
  background:var(--panel-2); border:1px solid var(--line);
  animation:tileIn 0.45s ease both;
}
.bstat:nth-child(2){animation-delay:50ms}.bstat:nth-child(3){animation-delay:100ms}.bstat:nth-child(4){animation-delay:150ms}
.bstat:nth-child(5){animation-delay:200ms}.bstat:nth-child(6){animation-delay:250ms}.bstat:nth-child(7){animation-delay:300ms}
.bstat .ball{margin-bottom:6px;}
.bstat-num{font-family:var(--mono); font-weight:700; font-size:1.05rem;}
.bstat-pct{font-family:var(--mono); font-size:0.68rem; color:var(--ink-dim);}
.bstat-gap{font-size:0.74rem; color:var(--ink); margin-top:4px; line-height:1.35;}
.bstat-gap.long{color:var(--gold);}
.bstat-gap.warm{color:var(--mint);}
.bstat-date{font-family:var(--mono); font-size:0.62rem; color:var(--ink-faint);}
.bstat-tier{margin-top:6px; font-family:var(--mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.1em; padding:2px 8px; border-radius:20px; border:1px solid var(--line-bright); color:var(--ink-dim);}
.t-hot{border-color:rgba(245,196,81,0.35);}
.t-hot .bstat-tier{border-color:rgba(245,196,81,0.5); color:var(--gold);}
.t-cold .bstat-tier{border-color:rgba(127,180,255,0.5); color:var(--ice);}
@media (max-width:900px){ .ball-stats{grid-template-columns:repeat(4, 1fr);} }
@media (max-width:600px){ .ball-stats{grid-template-columns:repeat(2, 1fr);} }

#numberPairs > .pairs{margin-top:0; padding-top:0; border-top:0;}


/* ===== DASHBOARD: AT A GLANCE + TOOLS ===== */
.hl-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.hl-grid .card, .tool-grid .card{margin:0;}
.hl-wide{grid-column:span 2;}
.hl-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px;}
.hl-head h3{margin:0; font-size:1rem;}
.hl-head a{font-size:0.8rem; color:var(--mint); text-decoration:none; white-space:nowrap;}
.hl-head a:hover{text-decoration:underline;}
.hl-balls{display:flex; gap:10px; flex-wrap:wrap;}
.hl-ball{display:flex; flex-direction:column; align-items:center; gap:5px;}
.hl-ball small{font-family:var(--mono); font-size:0.68rem; color:var(--ink-dim); unicode-bidi:plaintext;}
.hl-combo{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.hl-combo > span{font-family:var(--mono); font-size:0.82rem; color:var(--ink-dim);}
.hl-sub{font-size:0.85rem; font-weight:600; margin:16px 0 10px;}
.hl-row{display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1px solid var(--line);}
.hl-row:last-child{border-bottom:none;}
.hl-date{font-family:var(--mono); font-size:0.75rem; color:var(--ink-dim); min-width:120px;}
.tool-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.tool{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--ink); transition:transform 0.2s, border-color 0.2s;}
.tool:hover{transform:translateY(-3px); border-color:var(--gold-dim);}
.tool h3{margin:0; font-size:1.1rem;}
.tool p{margin:0; color:var(--ink-dim); font-size:0.9rem; line-height:1.55; flex:1;}
.tool-icon{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(245,196,81,0.12); color:var(--gold); font-size:1.1rem;}
.tool-go{font-size:0.85rem; color:var(--mint); font-weight:600;}
@media (max-width:900px){ .hl-grid, .tool-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .hl-grid, .tool-grid{grid-template-columns:1fr;} .hl-wide{grid-column:auto;} .hl-date{min-width:0;} .hl-row{flex-wrap:wrap; gap:6px;} }

/* ===== PHONE MENU (hamburger + drawer) ===== */
.menu-btn{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:38px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line-bright);
}
.menu-btn span{display:block; height:2px; border-radius:2px; background:var(--ink);}
.menu-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.drawer{position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none;}
.drawer.open{visibility:visible; pointer-events:auto;}
.drawer-backdrop{position:absolute; inset:0; background:rgba(3,4,8,0.6); backdrop-filter:blur(3px); opacity:0; transition:opacity 0.25s ease;}
.drawer.open .drawer-backdrop{opacity:1;}
.drawer-panel{
  position:absolute; top:0; bottom:0; inset-inline-end:0;
  width:min(84vw, 330px);
  display:flex; flex-direction:column; gap:4px;
  padding:16px 14px calc(20px + env(safe-area-inset-bottom));
  background:#0d1019; border-inline-start:1px solid var(--line-bright);
  box-shadow:-20px 0 50px rgba(0,0,0,0.5);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform 0.3s cubic-bezier(.2,.8,.2,1);
}
html[dir="rtl"] .drawer-panel{transform:translateX(-100%); box-shadow:20px 0 50px rgba(0,0,0,0.5);}
.drawer.open .drawer-panel{transform:none;}
.drawer-top{display:flex; align-items:center; justify-content:space-between; padding:4px 6px 14px; border-bottom:1px solid var(--line); margin-bottom:8px;}
.drawer-title{font-family:var(--mono); font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--ink-faint);}
.drawer-close{all:unset; cursor:pointer; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-bright); color:var(--ink-dim);}
.drawer-close:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.drawer-link{
  display:flex; align-items:center; gap:12px;
  min-height:48px; padding:0 12px; border-radius:12px;
  color:var(--ink); text-decoration:none; font-size:1rem;
  transition:background 0.15s;
}
.drawer-link:hover, .drawer-link:focus-visible{background:rgba(var(--fg-rgb),0.05); outline:none;}
.drawer-link.active{background:rgba(245,196,81,0.1); color:var(--gold);}
.drawer-icon{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(var(--fg-rgb),0.05); color:var(--ink-dim); font-size:0.9rem; flex-shrink:0;}
.drawer-link.active .drawer-icon{background:rgba(245,196,81,0.15); color:var(--gold);}
.drawer-label{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); padding:14px 12px 4px;}
.drawer-ctas{display:grid; gap:10px; margin-top:auto; padding-top:18px;}
.drawer-ctas .btn{text-align:center; padding:14px; font-size:1rem;}
.drawer-ctas .btn.current{outline:2px solid rgba(255,255,255,0.35); outline-offset:2px;}
html.drawer-open, html.drawer-open body{overflow:hidden;}

/* ===== DRAW SUMMARY LABELS WITH POP-UP ===== */
.chip-hint{flex-basis:100%; font-size:0.75rem; color:var(--ink-faint); margin-bottom:2px;}
.chip-btn{
  font:inherit; font-family:var(--mono); font-size:0.7rem;
  background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.chip-btn:hover{border-color:var(--gold-dim); color:var(--ink);}
.chip-btn.open{background:rgba(245,196,81,0.12); border-color:var(--gold); color:var(--gold);}
.chip-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.chip-i{
  width:14px; height:14px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:700; font-style:italic;
  border:1px solid currentColor; opacity:0.7;
}
.chip-pop{
  position:absolute; z-index:80;
  padding:14px 16px; border-radius:14px;
  background:var(--pop); border:1px solid var(--gold-dim);
  box-shadow:0 18px 40px rgba(0,0,0,0.55);
  animation:tileIn 0.18s ease both;
}
.chip-pop::before{
  content:""; position:absolute; top:-7px; left:calc(var(--arrow-x, 50%) - 7px);
  width:12px; height:12px; transform:rotate(45deg);
  background:var(--pop); border-left:1px solid var(--gold-dim); border-top:1px solid var(--gold-dim);
}
.chip-pop-title{font-family:var(--mono); font-size:0.75rem; color:var(--gold); margin-bottom:6px;}
.chip-pop-text{font-size:0.9rem; line-height:1.55; color:var(--ink);}
#lastDrawBalls .ball{transition:opacity 0.2s, transform 0.2s, box-shadow 0.2s;}
#lastDrawBalls .ball.dimmed{opacity:0.25;}
#lastDrawBalls .ball.lit{transform:translateY(-4px) scale(1.06); box-shadow:0 0 0 3px rgba(95,227,179,0.7), 0 8px 22px rgba(95,227,179,0.35);}

/* ===== POLISH ===== */
/* soft glow behind every page title */
.page-head{position:relative; isolation:isolate;}
.page-head::before{
  content:""; position:absolute; z-index:-1; left:50%; top:-10px; width:min(620px, 90%); height:220px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(245,196,81,0.13), rgba(245,196,81,0) 70%);
  pointer-events:none;
}
.pair .cnt small{white-space:nowrap;}
.pair-list{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}
.card{transition:border-color 0.25s;}
.hl:hover, .dash-grid .card:hover{border-color:var(--line-bright);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

@media (max-width:600px){
  .brand-long{display:none;}
  /* all 7 balls of the latest draw on one row */
  .last-draw .balls{gap:5px; flex-wrap:nowrap;}
  .last-draw .balls .ball{width:38px; height:38px; font-size:0.85rem;}
  .last-draw .balls .sep{width:4px;}
  /* per-ball cards become a swipeable strip instead of a tall stack */
  .ball-stats{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:0 -16px; padding:2px 16px 8px; scrollbar-width:none;}
  .ball-stats::-webkit-scrollbar{display:none;}
  .ball-stats .bstat{flex:0 0 44%; scroll-snap-align:start;}
  .page-head{padding-top:6px;}
  h1{font-size:2rem;}
}

/* ===== LOCK BUTTON + IDLE WARNING ===== */
.lock-btn{
  all:unset; box-sizing:border-box; cursor:pointer;
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-bright); color:var(--ink-dim);
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.lock-btn:hover{color:var(--gold); border-color:var(--gold-dim); background:rgba(245,196,81,0.08);}
.lock-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.idle-toast{
  position:fixed; z-index:120; left:50%; bottom:max(20px, env(safe-area-inset-bottom));
  transform:translate(-50%, 140%); opacity:0;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  width:min(92vw, 460px); padding:14px 16px; border-radius:16px;
  background:var(--pop); border:1px solid var(--gold-dim); box-shadow:0 18px 40px rgba(0,0,0,0.55);
  color:var(--ink); font-size:0.92rem;
  transition:transform 0.3s ease, opacity 0.3s ease; pointer-events:none;
}
.idle-toast.show{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
.idle-text{flex:1; min-width:180px;}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switch{position:relative;}
.lang-btn{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  padding:8px 11px; border-radius:10px;
  border:1px solid var(--line-bright); color:var(--ink-dim);
  font-family:var(--mono); font-size:0.78rem;
  transition:color 0.2s, border-color 0.2s;
}
.lang-btn:hover, .lang-switch.open .lang-btn{color:var(--ink); border-color:var(--gold-dim);}
.lang-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.lang-menu{
  display:none; position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60;
  list-style:none; margin:0; padding:6px; min-width:170px;
  background:#10131f; border:1px solid var(--line-bright); border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.5);
  animation:tileIn 0.18s ease both;
}
.lang-switch.open .lang-menu{display:block;}
.lang-menu button{
  all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%;
  padding:9px 12px; border-radius:9px; font-size:0.92rem; color:var(--ink-dim);
}
.lang-menu button:hover, .lang-menu button:focus-visible{background:rgba(var(--fg-rgb),0.06); color:var(--ink);}
.lang-menu button.on{color:var(--gold); background:rgba(245,196,81,0.08);}

/* Avoid a flash of English text before the chosen language loads */
html:not(.i18n-ready) body{opacity:0;}
body{transition:opacity 0.2s ease;}

/* Scripts that need their own font, and no letter-spacing (it breaks Arabic joining) */
html[lang="ar"] body, html[lang="fa-AF"] body{font-family:'Vazirmatn', 'Space Grotesk', 'Segoe UI', sans-serif;}
html[lang="hi"] body{font-family:'Noto Sans Devanagari', 'Space Grotesk', 'Segoe UI', sans-serif;}
html[lang="ru"] body{font-family:'Manrope', 'Space Grotesk', 'Segoe UI', sans-serif;}
html[lang="ar"] *, html[lang="fa-AF"] *, html[lang="hi"] *{letter-spacing:0 !important;}
/* The code font has no Arabic/Devanagari/Cyrillic letters: let those letters fall back to the page font, keep digits monospaced */
html[lang="ar"], html[lang="fa-AF"]{--mono:'JetBrains Mono', 'Vazirmatn', sans-serif;}
html[lang="hi"]{--mono:'JetBrains Mono', 'Noto Sans Devanagari', sans-serif;}
html[lang="ru"]{--mono:'JetBrains Mono', 'Manrope', sans-serif;}
html[lang="ar"] .eyebrow, html[lang="fa-AF"] .eyebrow, html[lang="hi"] .eyebrow{font-size:0.85rem;}
/* Values like 9.5% · 35=/50 must keep their order in right-to-left text */
html[dir="rtl"] .bstat-pct, html[dir="rtl"] .pair .cnt small{direction:ltr;}
html[dir="rtl"] .eyebrow, html[dir="rtl"] .section-label .idx, html[dir="rtl"] .kpi-card .k{text-transform:none;}
/* Numbers with × or % keep their order in right-to-left languages */
html[dir="rtl"] .bstat-num, html[dir="rtl"] .bstat-pct, html[dir="rtl"] .ntile .count, html[dir="rtl"] .ntile .pct, html[dir="rtl"] .res .big, html[dir="rtl"] .pair .cnt{unicode-bidi:isolate;}
html[dir="rtl"] .bstat-num, html[dir="rtl"] .ntile .count, html[dir="rtl"] .ntile .pct{direction:ltr;}
#kCountdown{font-size:1.25rem;}
/* Lottery numbers always read left to right */
.balls, .ball, .pick-grid, .year-bars, .year-labels{direction:ltr;}

/* ===== RESPONSIVE ===== */
@media (max-width:1000px){
  .kpi-strip{grid-template-columns:repeat(3, 1fr);}
  .split{grid-template-columns:1fr;}
  .sticky{position:static;}
}
@media (max-width:1024px){
  .dash-grid{grid-template-columns:1fr;}
  .site-header .bar{flex-wrap:nowrap; gap:8px;}
  .brand{min-width:0; font-size:0.95rem;}
  .brand > span:last-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .nav{display:none !important;}
  .menu-btn{display:flex; order:4;}
  .lang-switch{order:3;}
  .lock-btn{order:2; width:38px;}
  .nav > a, .nav > .nav-group{grid-column:span 3; text-align:center; font-size:0.82rem;}
  .nav > a{padding:9px 4px;}
  .nav-drop{display:block; width:100%; text-align:center; padding:9px 4px; font-size:0.82rem;}
  /* On phones the menu opens under the whole nav row, so it never sticks out of the screen */
  .nav{position:relative;}
  .nav-group{position:static;}
  .nav-menu{left:0; right:0; width:auto; text-align:start;}
}
@media (max-width:600px){
  .card{padding:20px 16px;}
  .kpi-strip{grid-template-columns:repeat(2, 1fr); gap:10px;}
  .kpi-card{padding:14px;}
  .kpi-card .v{font-size:1.25rem;}
  .ball{width:44px; height:44px; font-size:0.95rem;}
  .balls{gap:6px;}
  .ball.sm{width:32px; height:32px; font-size:0.8rem;}
  .ring-grid{grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)); gap:8px;}
  .ring{width:54px; height:54px;}
  .ring .val{font-size:1.05rem;}
  .ntile{padding:10px 4px 8px;}
  .input-group input{width:52px;}
  .stat-row .v{min-width:86px;}
  .ticket{padding:14px;}
  .brand small{display:none;}
  .eyebrow{letter-spacing:0.14em; font-size:0.7rem;}
  .nav a{font-size:0.78rem;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
}

/* ===== MY TICKETS: nav link, badge, notices ===== */
.nav a.tk-link{display:inline-flex; align-items:center; gap:6px;}
.tk-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:10px; font-family:var(--mono); font-size:0.68rem; font-weight:700;
  background:rgba(245,196,81,0.18); color:var(--gold); border:1px solid var(--gold-dim);
}
.tk-badge[hidden]{display:none;}
.tk-badge.new{background:var(--mint); color:#072218; border-color:var(--mint); animation:tkPulse 1.8s ease-in-out infinite;}
@keyframes tkPulse{0%,100%{box-shadow:0 0 0 0 rgba(95,227,179,0.5);} 50%{box-shadow:0 0 0 6px rgba(95,227,179,0);}}
.drawer-link .tk-badge{margin-inline-start:auto;}
.menu-btn{position:relative;}
.tk-toast{
  position:fixed; z-index:130; left:50%; top:76px; transform:translate(-50%, -16px); opacity:0; pointer-events:none;
  width:min(94vw, 520px); display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:16px; background:var(--pop); border:1px solid var(--gold-dim);
  box-shadow:0 18px 40px rgba(0,0,0,0.55); color:var(--ink); font-size:0.92rem; line-height:1.55;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.tk-toast.win{border-color:var(--mint);}
.tk-toast.show{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
.tk-toast-in{flex:1;}
.tk-toast a{color:var(--gold); font-weight:600; white-space:nowrap; margin-inline-start:6px;}
.tk-toast.win a{color:var(--mint);}
.tk-toast-x{all:unset; cursor:pointer; color:var(--ink-dim); padding:0 4px; font-size:0.9rem;}
.tk-open-card .tk-next{font-family:var(--mono); font-size:0.9rem; padding:14px 16px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); margin-bottom:14px; line-height:1.6;}
.tk-open-card .tk-next b{color:var(--gold);}
/* With My Tickets in the header the full nav needs more room: tablets and small laptops use the menu button */
@media (max-width:960px){
  .site-header .bar{flex-wrap:nowrap; gap:8px;}
  .brand{min-width:0;}
  .nav{display:none !important;}
  .menu-btn{display:flex; order:4;}
  .lang-switch{order:3;}
  .lock-btn{order:2; width:38px;}
}

/* =====================================================================
   PHONE (≤780px): true black, clear type, one card rhythm, bottom tab bar
   ===================================================================== */
.tabbar{display:none;}
@media (max-width:1024px){
  :root{
    --void-1:#000;
    --panel:var(--panel);
    --panel-2:var(--panel-2);
    --line:rgba(var(--fg-rgb),0.09);
    --line-bright:rgba(var(--fg-rgb),0.18);
    --ink:#f5f5f7;
    --ink-dim:#b7b9c6;
    --ink-faint:#8b8d9d;
  }
  html{background:var(--bg); -webkit-text-size-adjust:100%;}
  body{
    background:var(--bg); font-size:16px; line-height:1.55;
    padding:0 16px calc(96px + env(safe-area-inset-bottom));
  }
  body::before{display:none;}

  /* header: solid black, one tidy row, 44px controls */
  .site-header{
    background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none;
    margin:0 -16px 20px; padding:8px 16px; padding-top:max(8px, env(safe-area-inset-top));
    border-bottom:1px solid var(--line);
  }
  .brand{font-size:1rem;}
  .brand .logo{width:34px; height:34px; box-shadow:none;}
  .brand small{display:none;}
  .lang-btn, .lock-btn, .menu-btn{min-height:42px; min-width:42px; border-radius:12px;}

  /* page heads */
  .page-head{margin-bottom:20px; text-align:start;}
  .page-head h1{font-size:1.75rem; line-height:1.2; letter-spacing:-0.01em; margin:8px 0 10px;}
  .subtitle{font-size:0.98rem; line-height:1.7; color:var(--ink-dim);}
  .eyebrow{font-size:0.74rem; letter-spacing:0.08em;}

  /* cards: one surface, one radius, one rhythm */
  .card, .lab-card, .tk-group{
    background:var(--panel); border:1px solid var(--line); border-radius:18px;
    box-shadow:none; padding:18px 16px; margin-bottom:14px;
  }
  .tk-group{padding:0;}
  .section-label{gap:10px; margin-bottom:12px;}
  .section-label h2{font-size:1.15rem; line-height:1.35;}
  .section-label .idx{font-size:0.72rem; padding:3px 8px;}
  .section-intro{font-size:0.95rem; line-height:1.7; color:var(--ink-dim); margin-bottom:16px;}
  .sub-title{font-size:0.76rem; letter-spacing:0.06em; color:var(--ink-faint);}

  /* KPI tiles */
  .kpi-strip{grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
  .kpi-card, .kpi{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:none;}
  .kpi-card .k, .kpi .k{font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-faint);}
  .kpi-card .v{font-size:1.4rem;}
  .kpi-card .s, .kpi .s{font-size:0.8rem; color:var(--ink-dim);}

  /* readable small print everywhere */
  .chip{font-size:0.76rem; padding:6px 11px;}
  .tier-table{font-size:0.86rem;}
  .tier-table th{font-size:0.72rem; letter-spacing:0.04em;}
  .note, .md-hint, .progress-text, .tk-check{font-size:0.85rem; line-height:1.65;}

  /* touch targets */
  .btn{min-height:48px; padding:12px 20px; border-radius:14px; font-size:1rem;}
  .btn.small{min-height:42px; padding:9px 16px; font-size:0.9rem;}
  .pills{gap:8px;}
  .pill{min-height:40px; padding:8px 14px; font-size:0.9rem;}
  .icon-btn{min-width:40px; min-height:40px;}
  input, select, textarea{font-size:16px !important;}   /* iOS would zoom on anything smaller */

  /* toasts sit above the tab bar */
  .idle-toast{bottom:calc(88px + env(safe-area-inset-bottom));}

  /* ---------- bottom tab bar ---------- */
  .tabbar{
    display:flex; position:fixed; z-index:90; left:0; right:0; bottom:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:var(--glass); border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .tab{
    flex:1 1 0; min-width:0; min-height:56px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    text-decoration:none; color:var(--ink-faint); border-radius:14px;
    -webkit-tap-highlight-color:transparent;
    transition:color 0.2s, background 0.2s;
  }
  .tab-ic{position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:30px; border-radius:15px; transition:background 0.2s;}
  .tab-tx{font-size:0.7rem; font-weight:600; max-width:100%; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .tab.on{color:var(--gold);}
  .tab.on .tab-ic{background:rgba(245,196,81,0.14);}
  .tab.tab-gen .tab-ic{background:linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#1a1305;}
  .tab.tab-gen.on .tab-ic{box-shadow:0 0 0 3px rgba(245,196,81,0.3);}
  .chip-btn{min-height:36px;}
  #checkBtn, #genBtn, #runBtn, .tk-open-card > .btn{width:100%; justify-content:center; text-align:center;}
  .tab .tk-badge{position:absolute; top:-4px; inset-inline-end:-2px; min-width:18px; height:18px; font-size:0.62rem; padding:0 5px; background:var(--gold); color:#1a1305; border:2px solid var(--bg);}
  .tab .tk-badge.new{background:var(--mint); border-color:var(--bg);}
}
@media (max-width:380px){
  .tab-tx{font-size:0.64rem;}
  .page-head h1{font-size:1.55rem;}
}

/* ===== ACCOUNT MENU, PLAN BADGE ===== */
.acct{position:relative;}
.acct-btn{all:unset; cursor:pointer; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;}
.acct-ava, .tab-ava{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  font-size:0.8rem; font-weight:700; color:#1a1305; letter-spacing:0.02em;
  background:linear-gradient(140deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
}
.acct-btn:focus-visible .acct-ava{outline:2px solid var(--gold); outline-offset:2px;}
.acct-menu{
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; z-index:80; min-width:250px;
  background:var(--panel); border:1px solid var(--line-bright); border-radius:16px; padding:8px;
  box-shadow:0 24px 50px rgba(0,0,0,0.6); display:none;
}
.acct.open .acct-menu{display:block; animation:tileIn 0.18s ease both;}
.acct-head{display:grid; gap:2px; padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.acct-head b{font-size:0.98rem;}
.acct-head span{font-size:0.8rem; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis;}
.acct-head .plan-badge{justify-self:start; margin-top:6px;}
.acct-menu a, .acct-menu button{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border-radius:10px; font-size:0.92rem; color:var(--ink);
}
.acct-menu a:hover, .acct-menu button:hover, .acct-menu a:focus-visible, .acct-menu button:focus-visible{background:rgba(var(--fg-rgb),0.06);}
.plan-badge{display:inline-flex; align-items:center; font-family:var(--mono); font-size:0.7rem; padding:3px 9px; border-radius:20px; color:var(--mint); border:1px solid rgba(95,227,179,0.4); background:rgba(95,227,179,0.08); white-space:nowrap;}
.plan-badge.off{color:var(--ember); border-color:rgba(255,107,74,0.4); background:rgba(255,107,74,0.08);}
.tab-ava{width:28px; height:28px; font-size:0.7rem;}
.tab-ic[hidden]{display:none !important;}
.tab.on .tab-ic.tab-ava{background:linear-gradient(140deg, var(--gold-bright), var(--gold)); box-shadow:0 0 0 3px rgba(245,196,81,0.3);}
.tk-toast.err{border-color:var(--ember);}
.auto-note{flex-basis:100%; font-size:0.82rem; color:var(--ink-dim); line-height:1.6;}
.auto-note a{color:var(--gold);}
.drawer-ctas button.btn{cursor:pointer; font:inherit;}
@media (max-width:1024px){
  .lock-btn{display:none;}     /* on phones "Lock" lives in the account menu */
  .acct-menu{position:fixed; top:62px; inset-inline-end:12px; inset-inline-start:12px; min-width:0;}
}

/* =====================================================================
   BLACK THEME EVERYWHERE + APP SHELL
   ≥1200px: full sidebar · 781–1199px: icon rail · ≤780px: phone tab bar
   ===================================================================== */
:root{
  --void-1:#000; --panel:var(--panel); --panel-2:#141418;
  --line:rgba(var(--fg-rgb),0.08); --line-bright:rgba(var(--fg-rgb),0.16);
  --ink:#f3f3f6; --ink-dim:#b3b5c3; --ink-faint:#878999;
  --side-w:264px;
}
html, body{background:var(--bg);}
body{background:var(--bg); background-attachment:scroll;}
body::before{display:none;}
.card, .kpi-card{background:var(--panel); box-shadow:none;}
.top-info{display:none;}
.sidebar{display:none;}

@media (min-width:1025px){
  body.has-shell{padding:0 28px 60px; padding-inline-start:calc(var(--side-w) + 28px);}
  body.has-shell .container{max-width:1480px;}
  body.has-shell .site-header{
    margin:0 -28px 26px; padding:12px 28px; background:var(--glass);
    border-bottom:1px solid var(--line);
  }
  body.has-shell .site-header .bar{max-width:1480px;}
  body.has-shell .site-header .brand,
  body.has-shell .site-header .nav,
  body.has-shell .site-header .menu-btn{display:none !important;}
  body.has-shell .top-info{display:grid; gap:1px; margin-inline-end:auto; min-width:0;}
  body.has-shell .top-info b{font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  body.has-shell .top-info span{font-size:0.8rem; color:var(--ink-faint);}
  body.has-shell .page-head{text-align:start; padding:4px 0 24px;}
  body.has-shell .page-head .subtitle{margin-inline:0; max-width:760px;}
  body.has-shell .lock-btn{display:flex;}

  .sidebar{
    display:flex; flex-direction:column; gap:6px;
    position:fixed; z-index:60; top:0; bottom:0; inset-inline-start:0; width:var(--side-w);
    padding:18px 14px 14px; background:var(--side-bg); border-inline-end:1px solid var(--line);
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  }
  .side-brand{display:flex; align-items:center; gap:11px; padding:4px 8px 14px; text-decoration:none; color:var(--ink); font-weight:700; font-size:1.02rem; line-height:1.15;}
  .side-brand .logo{width:36px; height:36px; flex:0 0 36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.78rem; color:#1a1305; background:linear-gradient(150deg, var(--gold-bright), var(--gold) 55%, var(--gold-dim));}
  .side-brand small{display:block; font-weight:500; font-size:0.74rem; color:var(--ink-faint); letter-spacing:0.04em;}
  .side-cta{
    display:flex; align-items:center; justify-content:center; gap:9px; margin:2px 4px 10px; padding:12px 14px; border-radius:14px;
    text-decoration:none; font-weight:700; color:#1a1305; background:linear-gradient(120deg, var(--gold-bright), var(--gold));
    box-shadow:0 8px 24px -10px rgba(245,196,81,0.55); transition:filter 0.2s, transform 0.2s;
  }
  .side-cta:hover{filter:brightness(1.06); transform:translateY(-1px);}
  .side-cta.on{outline:2px solid rgba(255,255,255,0.35); outline-offset:2px;}
  .side-nav{display:flex; flex-direction:column; gap:2px;}
  .side-label{font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); padding:14px 12px 6px;}
  .side-link{
    position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px;
    color:var(--ink-dim); text-decoration:none; font-size:0.93rem; font-weight:500; transition:background 0.15s, color 0.15s;
  }
  .side-link:hover{background:rgba(var(--fg-rgb),0.05); color:var(--ink);}
  .side-link.on{background:rgba(245,196,81,0.12); color:var(--gold);}
  .side-link.on::before{content:""; position:absolute; inset-inline-start:-14px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--gold);}
  .side-link .ic{flex:0 0 20px;}
  .side-link .tk-badge{margin-inline-start:auto;}
  .side-plan{
    margin-top:auto; display:grid; gap:6px; padding:14px; border-radius:14px; text-decoration:none; color:var(--ink);
    background:linear-gradient(160deg, rgba(245,196,81,0.12), rgba(245,196,81,0.03)); border:1px solid rgba(245,196,81,0.25);
  }
  .side-plan-top{display:flex; align-items:center; gap:8px; color:var(--gold);}
  .side-plan-top b{color:var(--ink); font-size:0.92rem;}
  .side-plan-sub{font-size:0.8rem; color:var(--ink-dim);}
  .side-meter{display:block; height:5px; border-radius:3px; background:rgba(var(--fg-rgb),0.08); overflow:hidden;}
  .side-meter i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--gold-dim), var(--gold));}
  .side-user{display:flex; align-items:center; gap:10px; padding:12px 6px 2px; border-top:1px solid var(--line); margin-top:10px;}
  .side-ava{flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; font-weight:700; font-size:0.85rem; color:#1a1305; background:linear-gradient(140deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim));}
  .side-who{display:grid; min-width:0; flex:1;}
  .side-who b{font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .side-who small{font-size:0.75rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .side-out{all:unset; cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--ink-faint);}
  .side-out:hover{background:rgba(var(--fg-rgb),0.06); color:var(--ink);}
}

/* Tablet / iPad: the sidebar becomes an icon rail */
@media (min-width:1025px) and (max-width:1199px){
  :root{--side-w:78px;}
  .sidebar{padding:16px 10px; align-items:stretch;}
  .sidebar .side-tx, .side-label{display:none !important;}
  .side-brand{justify-content:center; padding:4px 0 12px;}
  .side-cta{padding:12px 0; margin:2px 0 10px;}
  .side-link{justify-content:center; padding:12px 0;}
  .side-link.on::before{inset-inline-start:-10px;}
  .side-nav{gap:4px;}
  .side-nav .side-label + .side-link{margin-top:10px;}
  .side-link .tk-badge{position:absolute; top:4px; inset-inline-end:6px; min-width:17px; height:17px; font-size:0.6rem; padding:0 4px;}
  .side-plan{padding:12px 0; justify-items:center;}
  .side-plan-top{justify-content:center;}
  .side-user{justify-content:center; padding:12px 0 0;}
  body.has-shell .top-info span{display:none;}
  .hl-grid, .tool-grid{grid-template-columns:1fr 1fr;}
  .kpi-strip{grid-template-columns:repeat(3, 1fr);}
}

/* Wide screens use the room */
@media (min-width:1500px){
  .kpi-strip{grid-template-columns:repeat(6, 1fr);}
  .hl-grid{grid-template-columns:repeat(3, 1fr);}
  body.has-shell .split{grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);}
}

/* Personal strip on the dashboard */
.me-strip{display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:14px; align-items:center; padding:18px 20px; margin-bottom:22px; border-radius:18px;
  background:linear-gradient(120deg, rgba(245,196,81,0.10), rgba(95,227,179,0.05) 60%, transparent), var(--panel); border:1px solid rgba(245,196,81,0.22);}
.me-strip h2{margin:0; font-size:1.2rem;}
.me-strip .me-sub{color:var(--ink-dim); font-size:0.88rem; margin-top:3px;}
.me-strip .me-cell{display:grid; gap:3px; padding-inline-start:14px; border-inline-start:1px solid var(--line);}
.me-strip .me-cell small{font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint);}
.me-strip .me-cell b{font-size:1.05rem;}
.me-strip .me-btns{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
@media (max-width:1199px){ .me-strip{grid-template-columns:1fr 1fr;} .me-strip .me-btns{grid-column:1 / -1; justify-content:flex-start;} }
@media (max-width:600px){ .me-strip{grid-template-columns:1fr; padding:16px;} .me-strip .me-cell{padding-inline-start:0; border:0; padding-top:10px; border-top:1px solid var(--line);} }
@media (min-width:1025px){ body.has-shell .page-head .eyebrow{justify-content:flex-start;} }

/* =====================================================================
   DESIGN SYSTEM v2 — dark & light themes, modern controls, motion
   The theme is set on <html data-theme="dark|light"> before the page paints.
   ===================================================================== */
:root{
  --bg:#000; --void-1:#000; --panel:#0d0d10; --panel-2:#16161b; --panel-3:#1d1d24; --side-bg:#060608;
  --pop:rgba(16,16,22,0.94); --field:#050507; --glass:rgba(0,0,0,0.78); --fg-rgb:255,255,255;
  --shadow:0 24px 60px -24px rgba(0,0,0,0.85); --ring:0 0 0 3px rgba(245,196,81,0.18);
  --aurora-1:rgba(245,196,81,0.11); --aurora-2:rgba(95,227,179,0.07); --aurora-3:rgba(127,180,255,0.08);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23999aa8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f3f3f7; --void-1:#f3f3f7; --panel:#ffffff; --panel-2:#f3f3f7; --panel-3:#e9e9ef; --side-bg:#fbfbfd;
  --pop:rgba(255,255,255,0.97); --field:#ffffff; --glass:rgba(255,255,255,0.84); --fg-rgb:12,12,24;
  --line:rgba(12,12,24,0.09); --line-bright:rgba(12,12,24,0.17);
  --ink:#15151c; --ink-dim:#4a4c5d; --ink-faint:#7b7d8e;
  --gold:#b8860b; --gold-bright:#f0c548; --gold-dim:#a07508;
  --mint:#0c9468; --mint-dim:#097553; --ember:#dd4a29; --ember-dim:#b5391d; --ice:#2a66cf;
  --shadow:0 20px 50px -26px rgba(20,20,45,0.28); --ring:0 0 0 3px rgba(184,134,11,0.18);
  --aurora-1:rgba(240,197,72,0.20); --aurora-2:rgba(12,148,104,0.10); --aurora-3:rgba(42,102,207,0.10);
  color-scheme:light;
}
html{background:var(--bg) !important;}
body{background:transparent !important; color:var(--ink);}
html[data-theme="light"] .card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .kpi{box-shadow:0 1px 2px rgba(20,20,45,0.04), 0 8px 24px -16px rgba(20,20,45,0.18);}

/* moving aurora behind everything */
body::after{
  content:""; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 32% at 18% 12%, var(--aurora-1), transparent 70%),
    radial-gradient(34% 30% at 86% 18%, var(--aurora-3), transparent 70%),
    radial-gradient(44% 38% at 58% 98%, var(--aurora-2), transparent 70%);
  filter:blur(24px);
  animation:aurora 28s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);}
  50%{transform:translate3d(3%,-2%,0) rotate(6deg) scale(1.06);}
  100%{transform:translate3d(-3%,2%,0) rotate(-5deg) scale(1.02);}
}

/* page entrance: the blocks of a page rise in one after another */
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.container > *{animation:rise 0.6s cubic-bezier(.2,.8,.2,1) both;}
.container > *:nth-child(2){animation-delay:0.05s;} .container > *:nth-child(3){animation-delay:0.1s;}
.container > *:nth-child(4){animation-delay:0.15s;} .container > *:nth-child(5){animation-delay:0.2s;}
.container > *:nth-child(6){animation-delay:0.25s;} .container > *:nth-child(n+7){animation-delay:0.3s;}

/* cards respond to the pointer */
.card, .kpi-card, .kpi, .f-card, .price, .step, .tk-group, .md-test, .res{transition:border-color 0.25s, box-shadow 0.25s, transform 0.25s;}
.card:hover, .tk-group:hover{border-color:var(--line-bright);}
.kpi-card:hover, .kpi:hover, .f-card:hover, .step:hover, .md-test:hover, .res:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-bright);}

/* buttons: light sweep on gold, press feedback */
.btn{position:relative; overflow:hidden; transition:transform 0.2s, box-shadow 0.25s, filter 0.2s, border-color 0.2s, background 0.2s;}
.btn.gold::after, .side-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform 0.8s ease;
}
.side-cta{position:relative; overflow:hidden;}
.btn.gold:hover::after, .side-cta:hover::after{transform:translateX(130%);}
.btn:active{transform:scale(0.98);}
.btn.gold:hover{box-shadow:0 12px 30px -8px rgba(245,196,81,0.55);}

/* pills */
.pill{transition:transform 0.18s, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;}
.pill:hover{transform:translateY(-1px); border-color:var(--gold-dim); color:var(--ink);}
.pill.active{background:linear-gradient(120deg, var(--gold-bright), var(--gold)); border-color:transparent; color:#1a1305; box-shadow:0 6px 16px -6px rgba(245,196,81,0.55);}

/* fields and selects: one modern look everywhere */
select, .in, input[type=number], input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], textarea{
  font:inherit; color:var(--ink); background-color:var(--field); border:1px solid var(--line-bright); border-radius:12px;
  transition:border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:10px 38px 10px 14px; background-image:var(--chev); background-repeat:no-repeat; background-position:right 14px center;
}
html[dir="rtl"] select{padding:10px 14px 10px 38px; background-position:left 14px center;}
select:hover, input:hover{border-color:rgba(var(--fg-rgb),0.28);}
select:focus, input:focus, textarea:focus, .in:focus{outline:none; border-color:var(--gold-dim); box-shadow:var(--ring);}
option{background:var(--panel); color:var(--ink);}

/* switches: smooth track with a glowing knob */
.switch span{background:rgba(var(--fg-rgb),0.14) !important; box-shadow:inset 0 0 0 1px var(--line); transition:background 0.25s, box-shadow 0.25s;}
.switch span::after{box-shadow:0 2px 6px rgba(0,0,0,0.35); transition:transform 0.28s cubic-bezier(.3,1.4,.5,1) !important;}
.switch input:checked + span{background:linear-gradient(120deg, var(--mint), var(--mint-dim)) !important; box-shadow:0 0 0 4px rgba(95,227,179,0.15);}

/* language picker: a glass card with all languages */
.lang-btn{font-family:inherit !important; font-size:0.82rem !important; gap:8px !important; background:var(--panel); min-height:40px;}
.lang-menu{
  display:grid !important; grid-template-columns:1fr 1fr; gap:4px; min-width:300px !important; padding:8px !important;
  background:var(--pop) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:18px !important; box-shadow:var(--shadow) !important;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(0.97); transform-origin:top;
  transition:opacity 0.18s, transform 0.22s cubic-bezier(.2,.9,.3,1.2), visibility 0.18s; animation:none !important;
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:none;}
.lang-menu li{list-style:none;}
.lang-menu button{display:flex !important; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px !important; border-radius:11px !important; font-size:0.9rem !important;}
.lang-menu button .lc{font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em; padding:2px 6px; border-radius:6px; color:var(--ink-faint); border:1px solid var(--line);}
.lang-menu button.on{background:linear-gradient(120deg, rgba(245,196,81,0.18), rgba(245,196,81,0.06)) !important; color:var(--ink) !important;}
.lang-menu button.on .lc{color:#1a1305; background:var(--gold); border-color:transparent;}

/* theme toggle (sun / moon) */
.theme-btn{
  all:unset; box-sizing:border-box; cursor:pointer; width:40px; height:40px; border-radius:12px; flex:0 0 40px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-dim);
  border:1px solid var(--line-bright); background:var(--panel); transition:color 0.2s, border-color 0.2s, transform 0.3s;
}
.theme-btn:hover{color:var(--gold); border-color:var(--gold-dim);}
.theme-btn:active{transform:rotate(25deg) scale(0.94);}
.theme-btn .sun{display:none;} .theme-btn .moon{display:block;}
html[data-theme="light"] .theme-btn .sun{display:block;} html[data-theme="light"] .theme-btn .moon{display:none;}
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{transition:background-color 0.35s, color 0.35s, border-color 0.35s !important;}

html[data-theme="light"] .sidebar{box-shadow:1px 0 0 var(--line);}
html[data-theme="light"] .side-link.on{background:rgba(184,134,11,0.12);}

@media (prefers-reduced-motion:reduce){
  body::after, .container > *{animation:none !important;}
}
.top-tools{display:flex; align-items:center; gap:8px;}
.top-tools .lang-btn span{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* ===== Announcement from the admin ===== */
.announce{position:relative; z-index:2; display:flex; align-items:center; gap:12px; max-width:1480px; margin:-10px auto 18px; padding:12px 16px; border-radius:14px; font-size:0.93rem; line-height:1.55;
  background:linear-gradient(120deg, rgba(127,180,255,0.16), rgba(127,180,255,0.05)); border:1px solid rgba(127,180,255,0.4); animation:rise .5s ease both;}
.announce.success{background:linear-gradient(120deg, rgba(95,227,179,0.16), rgba(95,227,179,0.05)); border-color:rgba(95,227,179,0.45);}
.announce.warning{background:linear-gradient(120deg, rgba(245,196,81,0.2), rgba(245,196,81,0.06)); border-color:rgba(245,196,81,0.5);}
.announce .an-dot{flex:0 0 10px; height:10px; border-radius:50%; background:var(--ice); box-shadow:0 0 0 4px rgba(127,180,255,0.2); animation:pulse 2s infinite;}
.announce.success .an-dot{background:var(--mint); box-shadow:0 0 0 4px rgba(95,227,179,0.2);}
.announce.warning .an-dot{background:var(--gold); box-shadow:0 0 0 4px rgba(245,196,81,0.2);}
.announce .an-tx{flex:1;}
.announce button{all:unset; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--ink-dim);}
.announce button:hover{background:rgba(var(--fg-rgb),0.08); color:var(--ink);}

/* Right-to-left languages: Latin-only fields (email, username, password) still type left-to-right,
   but sit on the right like the rest of the page. Code boxes keep their centred digits. */
html[dir="rtl"] input[dir="ltr"]:not(.code-in){text-align:right;}
html[dir="rtl"] input[dir="ltr"]:not(.code-in)::placeholder{text-align:right;}

/* Scrollbars stay hidden everywhere (page, menu, admin); scrolling with wheel, touch and keys still works */
html, body, *{scrollbar-width:none; -ms-overflow-style:none;}
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar{display:none; width:0; height:0;}

/* =====================================================================
   DESIGN v3 — depth and motion for the platform
   Cards tilt toward the pointer with a soft spotlight, balls are lit spheres,
   buttons press in like real keys, and blocks flip in as they scroll into view.
   Pointer effects run only with a mouse; everything calms down for reduced motion.
   ===================================================================== */
:root{
  --card-grad:linear-gradient(180deg, rgba(var(--fg-rgb),0.035), rgba(var(--fg-rgb),0) 42%);
  --card-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px -22px rgba(0,0,0,0.9);
  --glow-gold:0 0 0 1px rgba(245,196,81,0.35), 0 22px 50px -20px rgba(245,196,81,0.35);
}
html[data-theme="light"]{
  --card-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(20,20,45,0.05), 0 16px 34px -20px rgba(20,20,45,0.25);
  --glow-gold:0 0 0 1px rgba(184,134,11,0.35), 0 20px 44px -22px rgba(184,134,11,0.4);
}

/* ---------- cards ---------- */
.card, .kpi-card, .tk-group{
  background-image:var(--card-grad); box-shadow:var(--card-shadow) !important;
  border-radius:20px;
}
.kpi{background-image:var(--card-grad);}
.fx-tilt{transform-style:preserve-3d; will-change:transform;
  transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, border-color 0.3s !important;}
.fx-tilt.fx-on{transition:transform 0.08s linear, box-shadow 0.35s, border-color 0.3s !important;
  border-color:rgba(245,196,81,0.28) !important; box-shadow:var(--glow-gold) !important;}
/* entrance animations must not hold the transform, or the tilt could not move the card */
.fx-tilt{animation-fill-mode:backwards !important;}
/* spotlight that follows the pointer */
.fx-tilt > .fx-spot{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0; transition:opacity 0.35s;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(245,196,81,0.12), transparent 45%);
}
.fx-tilt.fx-on > .fx-spot{opacity:1;}
html[data-theme="light"] .fx-tilt > .fx-spot{background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(184,134,11,0.10), transparent 45%);}

/* blocks flip in as they scroll into view */
html.fx .fx-wait{opacity:0; transform:perspective(1000px) rotateX(10deg) translateY(26px) scale(0.98); transform-origin:50% 0;}
html.fx .fx-wait.fx-in{opacity:1; transform:none; transition:opacity 0.7s ease, transform 0.8s cubic-bezier(.2,.8,.2,1);}

/* ---------- KPI cards: glowing corner + accent bar ---------- */
.kpi-card{position:relative; overflow:hidden;}
.kpi-card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; height:3px; width:42%; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--gold), transparent); opacity:0.75; transition:width 0.5s cubic-bezier(.2,.8,.2,1);
}
html[dir="rtl"] .kpi-card::before{background:linear-gradient(270deg, var(--gold), transparent);}
.kpi-card.accent::before{background:linear-gradient(90deg, var(--mint), transparent);}
html[dir="rtl"] .kpi-card.accent::before{background:linear-gradient(270deg, var(--mint), transparent);}
.kpi-card:hover::before, .kpi-card.fx-on::before{width:100%;}
.kpi-card::after{
  content:""; position:absolute; width:120px; height:120px; inset-inline-end:-40px; bottom:-50px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(245,196,81,0.16), transparent 70%); transition:transform 0.6s;
}
.kpi-card.accent::after{background:radial-gradient(circle, rgba(95,227,179,0.16), transparent 70%);}
.kpi-card:hover::after{transform:scale(1.5);}
.kpi-card .v{text-shadow:0 0 22px rgba(245,196,81,0.25);}
.kpi-card.accent .v{text-shadow:0 0 22px rgba(95,227,179,0.25);}

/* ---------- balls: lit 3D spheres ---------- */
.ball{position:relative; transition:transform 0.35s cubic-bezier(.3,1.6,.5,1), box-shadow 0.3s;}
.ball.main{
  background:radial-gradient(circle at 32% 26%, #fff6d2 0%, #ffe08a 16%, #f5c451 46%, #c9952c 78%, #8a6418 100%);
  box-shadow:0 8px 16px -6px rgba(245,196,81,0.55), inset -4px -6px 10px rgba(110,70,0,0.35), inset 3px 4px 6px rgba(255,255,255,0.35);
}
.ball.star{
  background:radial-gradient(circle at 32% 26%, #ffe0d6 0%, #ff9b80 18%, #ff6b4a 50%, #c94326 80%, #8e2a14 100%);
  box-shadow:0 8px 16px -6px rgba(255,107,74,0.55), inset -4px -6px 10px rgba(110,20,0,0.35), inset 3px 4px 6px rgba(255,255,255,0.3);
}
.ball.main::after, .ball.star::after{ /* glossy highlight */
  content:""; position:absolute; top:9%; left:20%; width:38%; height:26%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%); transform:rotate(-20deg);
}
.ball:hover{transform:translateY(-4px) rotate(-8deg) scale(1.08);}
.ball.miss::after{opacity:0.3;}

/* ---------- buttons: pressable 3D keys + ripple ---------- */
.btn{border-radius:14px; letter-spacing:0.01em;}
.btn:not(.secondary):not(.gold){box-shadow:0 4px 0 var(--mint-dim), 0 12px 24px -10px rgba(95,227,179,0.55);}
.btn.gold{box-shadow:0 4px 0 #a9792a, 0 12px 26px -10px rgba(245,196,81,0.6) !important;}
.btn:not(.secondary):hover{transform:translateY(-2px); filter:brightness(1.05);}
.btn:not(.secondary):not(.gold):active{transform:translateY(3px); box-shadow:0 1px 0 var(--mint-dim), 0 4px 10px -6px rgba(95,227,179,0.5);}
.btn.gold:active{transform:translateY(3px); box-shadow:0 1px 0 #a9792a, 0 4px 10px -6px rgba(245,196,81,0.5) !important;}
.btn.secondary{background:rgba(var(--fg-rgb),0.03);}
.btn.secondary:hover{transform:translateY(-2px); background:rgba(var(--fg-rgb),0.06);}
.fx-ripple{position:absolute; border-radius:50%; pointer-events:none; transform:scale(0); opacity:0.35;
  background:currentColor; animation:fxRipple 0.65s ease-out forwards;}
@keyframes fxRipple{to{transform:scale(1); opacity:0;}}
.pill, .side-link, .tab, .chip-btn{position:relative; overflow:hidden;}

/* ---------- section titles: glowing dot + gradient bar ---------- */
.section-label h2{display:flex; align-items:center; gap:12px;}
.section-label h2::before{
  content:""; flex:0 0 10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 55%, var(--gold-dim));
  box-shadow:0 0 0 4px rgba(245,196,81,0.14), 0 0 16px rgba(245,196,81,0.5);
}
.section-label h2::after{content:""; width:64px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--gold), transparent);}
html[dir="rtl"] .section-label h2::after{background:linear-gradient(270deg, var(--gold), transparent);}

/* ---------- page title: slow shine + floating 3D balls ---------- */
.page-head h1{background-size:220% 100%; animation:titleShine 9s ease-in-out infinite;}
@keyframes titleShine{0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;}}
.fx-orbs{position:absolute; inset-inline-end:2%; top:4px; width:190px; height:150px; pointer-events:none; z-index:-1;}
.fx-orbs i{position:absolute; border-radius:50%; animation:orbFloat 7s ease-in-out infinite;}
.fx-orbs i::after{content:""; position:absolute; top:10%; left:20%; width:36%; height:24%; border-radius:50%; background:radial-gradient(ellipse, rgba(255,255,255,0.8), transparent 70%); transform:rotate(-20deg);}
.fx-orbs i:nth-child(1){width:64px; height:64px; right:20px; top:6px;
  background:radial-gradient(circle at 32% 26%, #fff6d2, #ffe08a 16%, #f5c451 48%, #8a6418);
  box-shadow:0 20px 30px -12px rgba(245,196,81,0.55);}
.fx-orbs i:nth-child(2){width:38px; height:38px; right:110px; top:62px; animation-delay:-2.5s;
  background:radial-gradient(circle at 32% 26%, #ffe0d6, #ff9b80 18%, #ff6b4a 52%, #8e2a14);
  box-shadow:0 16px 24px -10px rgba(255,107,74,0.55);}
.fx-orbs i:nth-child(3){width:24px; height:24px; right:58px; top:100px; animation-delay:-4.5s; opacity:0.85;
  background:radial-gradient(circle at 32% 26%, #e6fff5, #8ff0cc 18%, #5fe3b3 52%, #1d6b50);
  box-shadow:0 12px 20px -8px rgba(95,227,179,0.5);}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg);} 50%{transform:translate3d(-6px,-14px,0) rotate(12deg);}}
@media (max-width:900px){ .fx-orbs{transform:scale(0.7); opacity:0.75;} }
@media (max-width:600px){ .fx-orbs{display:none;} }

/* ---------- tool cards: 3D icon tiles ---------- */
.tool-icon{
  width:50px; height:50px; border-radius:16px; font-size:1.3rem; color:#1a1305;
  background:linear-gradient(145deg, var(--gold-bright), var(--gold) 55%, var(--gold-dim));
  box-shadow:0 4px 0 #8a6418, 0 14px 24px -10px rgba(245,196,81,0.6), inset 0 2px 3px rgba(255,255,255,0.45);
  transition:transform 0.45s cubic-bezier(.3,1.5,.5,1);
}
.tool:hover .tool-icon{transform:translateY(-4px) rotate(-10deg) scale(1.06);}
.tool-go{display:inline-flex; align-items:center; gap:6px; transition:gap 0.25s;}
.tool:hover .tool-go{gap:12px;}

/* ---------- sidebar: lively links ---------- */
@media (min-width:1025px){
  .side-link{transition:background 0.2s, color 0.2s, transform 0.25s cubic-bezier(.2,.8,.2,1);}
  .side-link:hover{transform:translateX(3px);}
  html[dir="rtl"] .side-link:hover{transform:translateX(-3px);}
  .side-link .ic{transition:transform 0.35s cubic-bezier(.3,1.6,.5,1);}
  .side-link:hover .ic{transform:scale(1.18) rotate(-6deg);}
  .side-link.on{background:linear-gradient(90deg, rgba(245,196,81,0.2), rgba(245,196,81,0.04)); box-shadow:inset 0 0 0 1px rgba(245,196,81,0.22);}
  html[dir="rtl"] .side-link.on{background:linear-gradient(270deg, rgba(245,196,81,0.2), rgba(245,196,81,0.04));}
  .side-link.on::before{box-shadow:0 0 12px var(--gold);}
}

/* ---------- phone tab bar: the chosen tab springs up ---------- */
.tab.on .tab-ic{animation:tabPop 0.5s cubic-bezier(.3,1.6,.5,1);}
@keyframes tabPop{0%{transform:scale(0.7) translateY(6px);} 100%{transform:none;}}

/* ---------- pills: depth when chosen ---------- */
.pill.active{box-shadow:0 3px 0 #a9792a, 0 8px 18px -8px rgba(245,196,81,0.6);}

@media (prefers-reduced-motion:reduce){
  .page-head h1, .fx-orbs i, .tab.on .tab-ic{animation:none !important;}
  html.fx .fx-wait{opacity:1; transform:none;}
  .fx-tilt{transform:none !important;}
}

/* =====================================================================
   REAL LOTTERY BALLS
   Built like the physical ones: a glossy coloured shell lit from the top left,
   a darker rim where it turns away from the light, a soft floor shadow, the
   number printed on a white disc, and a sharp window reflection on top.
   ===================================================================== */
.ball{
  isolation:isolate; overflow:visible;
  font-weight:800; letter-spacing:-0.02em;
  text-shadow:none;
}
.ball.main{
  color:#2a1d02;
  background:
    radial-gradient(circle at 50% 108%, rgba(255,214,120,0.55), transparent 42%),            /* light bouncing back from below */
    radial-gradient(circle at 34% 28%, #fff3c2 0%, #ffd866 22%, #f2b51e 52%, #c98a0c 76%, #7a4f03 100%);
  box-shadow:
    inset -5px -7px 12px rgba(90,55,0,0.45),
    inset 4px 5px 8px rgba(255,255,255,0.35),
    0 10px 14px -8px rgba(0,0,0,0.75),
    0 4px 18px -6px rgba(245,180,40,0.45);
}
.ball.star{
  color:#3a0b02;
  background:
    radial-gradient(circle at 50% 108%, rgba(255,150,120,0.5), transparent 42%),
    radial-gradient(circle at 34% 28%, #ffd9cc 0%, #ff8a66 22%, #f2542e 52%, #c23514 76%, #6e1503 100%);
  box-shadow:
    inset -5px -7px 12px rgba(90,15,0,0.45),
    inset 4px 5px 8px rgba(255,255,255,0.3),
    0 10px 14px -8px rgba(0,0,0,0.75),
    0 4px 18px -6px rgba(255,90,50,0.45);
}
/* the printed white disc behind the number */
.ball.main::before, .ball.star::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; width:60%; height:60%; border-radius:50%;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle at 40% 35%, #ffffff 0%, #f7f4ec 60%, #e2dccd 100%);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}
/* window reflection: one bright, sharp highlight plus a soft glow */
.ball.main::after, .ball.star::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:7%; left:17%; width:34%; height:22%; border-radius:50%; transform:rotate(-28deg);
  background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 35%, rgba(255,255,255,0) 72%);
  filter:blur(0.3px);
}
.ball.xs::before{width:64%; height:64%;}
.ball.xs::after{top:6%; left:16%; width:32%; height:20%;}
/* a ball that did not hit stays a real ball, just unlit */
.ball.miss{filter:grayscale(0.85) brightness(0.55) contrast(0.9);}
.ball.miss::after{opacity:0.35;}
/* hover: the ball rolls a little, like it was nudged */
.ball{transition:transform 0.45s cubic-bezier(.3,1.5,.5,1), box-shadow 0.3s, filter 0.3s;}
.ball:hover{transform:translateY(-3px) rotate(-14deg) scale(1.06);}
html[data-theme="light"] .ball.main, html[data-theme="light"] .ball.star{
  box-shadow:inset -5px -7px 12px rgba(90,40,0,0.35), inset 4px 5px 8px rgba(255,255,255,0.4), 0 10px 14px -9px rgba(40,30,10,0.55);
}

/* floating balls beside page titles use the same shell */
.fx-orbs i:nth-child(1){background:radial-gradient(circle at 34% 28%, #fff3c2 0%, #ffd866 22%, #f2b51e 52%, #c98a0c 76%, #7a4f03 100%);
  box-shadow:inset -6px -9px 16px rgba(90,55,0,0.45), 0 22px 26px -14px rgba(0,0,0,0.8);}
.fx-orbs i:nth-child(2){background:radial-gradient(circle at 34% 28%, #ffd9cc 0%, #ff8a66 22%, #f2542e 52%, #c23514 76%, #6e1503 100%);
  box-shadow:inset -4px -6px 10px rgba(90,15,0,0.45), 0 16px 20px -12px rgba(0,0,0,0.8);}
.fx-orbs i:nth-child(3){background:radial-gradient(circle at 34% 28%, #e8fff6 0%, #8ff0cc 22%, #2fc58f 55%, #137454 80%, #0a3f2d 100%);
  box-shadow:inset -3px -4px 7px rgba(0,50,30,0.45), 0 12px 16px -10px rgba(0,0,0,0.8);}
.fx-orbs i::after{z-index:1; top:8%; left:18%; width:32%; height:20%; transform:rotate(-28deg);
  background:radial-gradient(ellipse, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);}

/* =====================================================================
   v4 — compact one-column language menu, foldable sidebar, Create-ticket button
   ===================================================================== */
/* language menu: one tidy column, small type */
.lang-menu{grid-template-columns:1fr !important; min-width:190px !important; max-height:min(420px, 70vh); overflow-y:auto; padding:6px !important; gap:2px !important; border-radius:14px !important;}
.lang-menu button{padding:7px 10px !important; font-size:0.84rem !important; border-radius:9px !important; min-height:0 !important;}
.lang-menu button .lc{font-size:0.6rem; padding:1px 5px;}

@media (min-width:1025px){
  .side-top{display:flex; align-items:center; gap:6px;}
  .side-top .side-brand{flex:1; min-width:0;}
  .side-fold{all:unset; box-sizing:border-box; cursor:pointer; flex:0 0 34px; width:34px; height:34px; margin-bottom:12px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; color:var(--ink-faint); border:1px solid transparent; transition:color .2s, background .2s, border-color .2s, transform .35s;}
  .side-fold:hover{color:var(--ink); background:rgba(var(--fg-rgb),0.06); border-color:var(--line);}
  html[dir="rtl"] .side-fold svg{transform:scaleX(-1);}

  /* Create ticket: a 3D gold key with an icon puck, a subtitle and a slow shine */
  .side-cta{
    position:relative; overflow:hidden; display:flex; align-items:center; justify-content:flex-start; gap:11px;
    margin:4px 2px 14px; padding:10px 12px 10px 10px; border-radius:16px; text-align:start;
    color:#1a1305; background:linear-gradient(135deg, #ffe9a6 0%, #f8cf5c 38%, #e9ab2b 100%);
    box-shadow:0 4px 0 #a9792a, 0 16px 30px -12px rgba(245,196,81,0.65), inset 0 1px 0 rgba(255,255,255,0.65);
    transition:transform .2s, box-shadow .2s, filter .2s;
  }
  html[dir="rtl"] .side-cta{padding:10px 10px 10px 12px;}
  .side-cta:hover{transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 6px 0 #a9792a, 0 22px 36px -12px rgba(245,196,81,0.7), inset 0 1px 0 rgba(255,255,255,0.65);}
  .side-cta:active{transform:translateY(3px); box-shadow:0 1px 0 #a9792a, 0 6px 14px -8px rgba(245,196,81,0.6);}
  .side-cta.on{outline:none; box-shadow:0 4px 0 #a9792a, 0 0 0 3px rgba(245,196,81,0.3), 0 16px 30px -12px rgba(245,196,81,0.65);}
  .side-cta .cta-ic{flex:0 0 38px; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    color:#ffe08a; background:radial-gradient(circle at 35% 30%, #3a2c0c, #17120a 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 10px -4px rgba(0,0,0,0.6);
    transition:transform .5s cubic-bezier(.3,1.6,.5,1);}
  .side-cta:hover .cta-ic{transform:rotate(-14deg) scale(1.06);}
  .side-cta .cta-ic svg{animation:ctaTwinkle 3.2s ease-in-out infinite;}
  @keyframes ctaTwinkle{0%,100%{transform:scale(1);} 50%{transform:scale(1.14); filter:drop-shadow(0 0 6px rgba(255,224,138,0.9));}}
  .side-cta .cta-tx{display:grid; flex:1; min-width:0; line-height:1.2;}
  .side-cta .cta-tx b{font-size:0.98rem; font-weight:800;}
  .side-cta .cta-tx small{font-size:0.72rem; font-weight:600; opacity:0.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .side-cta .cta-go{font-size:1.4rem; font-weight:700; opacity:0.6; transition:transform .25s;}
  html[dir="rtl"] .side-cta .cta-go{transform:scaleX(-1);}
  .side-cta:hover .cta-go{transform:translateX(3px);}
  html[dir="rtl"] .side-cta:hover .cta-go{transform:scaleX(-1) translateX(3px);}
  .side-cta::after{animation:ctaShine 5s ease-in-out infinite; transition:none !important;}
  @keyframes ctaShine{0%,70%{transform:translateX(-130%);} 100%{transform:translateX(130%);}}
}

/* Folded sidebar (desktop): icons only, same look as the tablet rail */
@media (min-width:1200px){
  html.side-mini{--side-w:82px;}
  html.side-anim .sidebar, html.side-anim body.has-shell{transition:width .35s cubic-bezier(.2,.8,.2,1), padding .35s cubic-bezier(.2,.8,.2,1);}
  html.side-mini .sidebar{padding:16px 12px; align-items:stretch;}
  html.side-mini .sidebar .side-tx, html.side-mini .side-label{display:none !important;}
  html.side-mini .side-top{flex-direction:column; gap:4px;}
  html.side-mini .side-brand{justify-content:center; padding:4px 0 6px;}
  html.side-mini .side-fold{margin:0 auto 8px;}
  html.side-mini .side-fold svg{transform:scaleX(-1);}
  html.side-mini[dir="rtl"] .side-fold svg{transform:none;}
  html.side-mini .side-cta{justify-content:center; padding:8px 0; margin:2px 0 12px;}
  html.side-mini .side-link{justify-content:center; padding:12px 0;}
  html.side-mini .side-link.on::before{inset-inline-start:-12px;}
  html.side-mini .side-nav{gap:4px;}
  html.side-mini .side-nav .side-label + .side-link{margin-top:10px;}
  html.side-mini .side-link .tk-badge{position:absolute; top:4px; inset-inline-end:8px; min-width:17px; height:17px; font-size:0.6rem; padding:0 4px;}
  html.side-mini .side-plan{padding:12px 0; justify-items:center;}
  html.side-mini .side-plan-top{justify-content:center;}
  html.side-mini .side-user{justify-content:center; padding:12px 0 0;}
  html.side-mini .side-link:hover, html[dir="rtl"].side-mini .side-link:hover{transform:none;}
}
/* tablet rail: always folded, so no fold button there */
@media (min-width:1025px) and (max-width:1199px){
  .side-fold{display:none;}
  .side-top{justify-content:center;}
  .side-cta{justify-content:center; padding:8px 0 !important; margin:2px 0 12px;}
}
@media (prefers-reduced-motion:reduce){ .side-cta .cta-ic svg, .side-cta::after{animation:none !important;} }
/* sidebar items keep their height; the sidebar scrolls instead of squashing them */
.sidebar > *{flex-shrink:0;}
/* every language row follows the page direction, so the list lines up; each name still renders in its own script */
.lang-menu button{direction:inherit !important; unicode-bidi:isolate;}

/* ===== Sign in with Google ===== */
.g-wrap{margin-top:16px;}
.g-or{display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:0.82rem; margin-bottom:14px;}
.g-or::before, .g-or::after{content:""; flex:1; height:1px; background:var(--line-bright);}
.g-btn{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:52px; border-radius:14px; text-decoration:none;
  font-weight:600; font-size:1rem; color:#1f1f1f; background:#fff; border:1px solid #dadce0;
  box-shadow:0 3px 0 #c4c7cc, 0 10px 24px -14px rgba(0,0,0,0.6); transition:transform .15s, box-shadow .15s, background .2s;}
.g-btn:hover{transform:translateY(-1px); background:#f8f9fa; box-shadow:0 4px 0 #c4c7cc, 0 14px 28px -14px rgba(0,0,0,0.6);}
.g-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #c4c7cc;}
.g-btn svg{flex:0 0 20px;}

/* ===== Phone: centred, tidy platform pages ===== */
@media (max-width:1024px){
  .page-head, body.has-shell .page-head{text-align:center;}
  .page-head .eyebrow, body.has-shell .page-head .eyebrow{justify-content:center;}
  .page-head .subtitle, body.has-shell .page-head .subtitle{margin-inline:auto;}
  .section-label{justify-content:center; text-align:center;}
  .balls, .hl-balls, .chips, .pv-row{justify-content:center;}
  .hl-head{flex-wrap:wrap;}
  .hl-combo{justify-content:center;}
  .card{padding:20px 16px; border-radius:18px;}
  .kpi-card{padding:14px;}
  .kpi-card .v{font-size:1.3rem;}
  .tool{align-items:center; text-align:center;}
  .me-strip{text-align:center;}
  .me-strip .me-btns{justify-content:center;}
  .fx-orbs{display:none;}
}

/* Legal links, disclaimer and help line in every footer */
.legal-links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; margin-bottom:10px; font-size:0.85rem;}
.legal-links a{color:var(--ink-dim); text-decoration:none;}
.legal-links a:hover{color:var(--gold); text-decoration:underline;}
.help-line{display:inline-block; margin-top:6px; color:var(--ink-dim); font-weight:600;}
/* Consent checkboxes (order, register) */
.consents{display:grid; gap:9px; margin:14px 0 4px; text-align:start;}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:0.84rem; line-height:1.5; color:var(--ink-dim); cursor:pointer;}
.consent input{flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--gold); cursor:pointer;}
.consent a{color:var(--gold);}
.consent.bad{color:var(--red, #ff6b6b);}

/* =====================================================================
   LIGHT THEME v2 — stronger contrast, so every text reads clearly on white
   ===================================================================== */
html[data-theme="light"]{
  --bg:#f4f4f8; --void-1:#f4f4f8; --panel:#ffffff; --panel-2:#f2f2f7; --panel-3:#e7e7ef;
  --line:rgba(12,12,24,0.11); --line-bright:rgba(12,12,24,0.2);
  --ink:#111118; --ink-dim:#383a4a; --ink-faint:#5c5e70;
  --gold:#9a6c00; --gold-bright:#e2a91f; --gold-dim:#7d5700;
  --mint:#087454; --mint-dim:#065c43; --ember:#c63d1e; --ember-dim:#a3301a; --ice:#1f57b8;
}
html[data-theme="light"] .tier-hot .val{color:var(--gold);}
html[data-theme="light"] .tier-cold .val{color:var(--ice);}
html[data-theme="light"] .tier-star.tier-hot .val{color:var(--ember);}
html[data-theme="light"] .chip.warn{color:var(--ember);}
/* gold gradient headline words keep a dark end so they stay readable */
html[data-theme="light"] h1 em, html[data-theme="light"] h2 em{background:linear-gradient(110deg, #c8901a, #8a5c00) !important; -webkit-background-clip:text !important; background-clip:text !important;}
/* gold buttons keep their bright look; only the text colour on them is dark */
html[data-theme="light"] .btn.gold, html[data-theme="light"] .pill.active, html[data-theme="light"] .side-cta, html[data-theme="light"] .nav a.cta{background:linear-gradient(120deg, #f6d36b, #e2a91f);}
html[data-theme="light"] .card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .kpi, html[data-theme="light"] .tk-group{border-color:rgba(12,12,24,0.1);}

/* ---------- (i) info buttons, popover, "read more", ball tips ---------- */
.info-btn{
  all:unset; box-sizing:border-box; cursor:pointer; position:absolute; top:12px; inset-inline-end:12px; z-index:5;
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:700 italic 0.8rem/1 Georgia, 'Times New Roman', serif; color:var(--ink-dim);
  background:var(--panel-2); border:1px solid var(--line-bright);
  box-shadow:0 2px 6px -2px rgba(0,0,0,0.25); transition:transform .2s, color .2s, background .2s, border-color .2s;
}
.info-btn:hover, .info-btn[aria-expanded="true"]{color:#1a1305; background:linear-gradient(140deg, var(--gold-bright), var(--gold)); border-color:transparent; transform:scale(1.1);}
.info-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
/* keep headings clear of the button */
[data-info] > .section-label, [data-info] > .hl-head, [data-info] > h3:first-child, [data-info] > .k, [data-info] > .chart-title{padding-inline-end:30px;}
.kpi-card .info-btn, .kpi .info-btn{top:8px; inset-inline-end:8px; width:20px; height:20px; font-size:0.7rem;}

.info-pop{
  position:fixed; z-index:1000; width:min(360px, calc(100vw - 24px)); max-height:min(70vh, 520px); overflow:auto;
  padding:18px 18px 16px; border-radius:18px; background:var(--pop); color:var(--ink);
  border:1px solid var(--line-bright); box-shadow:0 30px 70px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,196,81,0.12);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transform:translateY(6px) scale(0.98); pointer-events:none; transition:opacity .18s, transform .18s;
}
.info-pop.open{opacity:1; transform:none; pointer-events:auto;}
.info-pop.sheet{left:0 !important; right:0; bottom:0; top:auto !important; width:100%; max-height:75vh; border-radius:22px 22px 0 0; padding:20px 20px calc(22px + env(safe-area-inset-bottom)); transform:translateY(100%);}
.info-pop.sheet.open{transform:none;}
.info-pop.sheet::before{content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--line-bright); margin:-8px auto 14px;}
.info-h{display:flex; align-items:center; gap:10px; margin:0 26px 10px 0; font-size:1rem;}
html[dir="rtl"] .info-h{margin:0 0 10px 26px;}
.info-ic{flex:0 0 26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 italic 0.85rem Georgia, serif; color:#1a1305; background:linear-gradient(140deg, var(--gold-bright), var(--gold));}
.info-b{font-size:0.9rem; line-height:1.7; color:var(--ink-dim);}
.info-b p{margin:0 0 8px;}
.info-b ul{margin:4px 0 8px; padding-inline-start:18px;}
.info-b li{margin:3px 0;}
.info-b b{color:var(--ink);}
.info-x{all:unset; cursor:pointer; position:absolute; top:12px; inset-inline-end:12px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:0.85rem;}
.info-x:hover{background:rgba(var(--fg-rgb),0.07); color:var(--ink);}

.clamp:not(.open){display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.clamp{margin-bottom:6px !important;}
.more-btn{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:5px; margin:0 0 18px; padding:5px 12px; border-radius:999px;
  font-size:0.8rem; font-weight:600; color:var(--gold); background:rgba(245,196,81,0.09); border:1px solid rgba(245,196,81,0.22); transition:background .2s;}
.more-btn:hover{background:rgba(245,196,81,0.16);}
.more-btn svg{transition:transform .25s;}
.more-btn.on svg{transform:rotate(180deg);}
html[data-theme="light"] .more-btn{background:rgba(154,108,0,0.08); border-color:rgba(154,108,0,0.25);}

.ball-tip{position:fixed; z-index:1001; pointer-events:none; padding:7px 11px; border-radius:10px; font-size:0.8rem; font-weight:600; white-space:nowrap;
  color:var(--ink); background:var(--pop); border:1px solid var(--line-bright); box-shadow:0 12px 30px -10px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s;}
.ball-tip.show{opacity:1; transform:none;}
.ball.hit{box-shadow:0 0 0 3px rgba(95,227,179,0.7), 0 6px 14px -6px rgba(95,227,179,0.7);}
html[data-theme="light"] .ball.hit{box-shadow:0 0 0 3px rgba(8,116,84,0.55);}
/* generator hints read as a quiet side note, not as a wall of text */
.gen-help{padding:9px 13px; border-radius:12px; background:rgba(var(--fg-rgb),0.035); border-inline-start:3px solid var(--gold-dim); font-size:0.84rem !important;}
.gen-help:empty{display:none;}
html[data-theme="light"] .pv-badge{color:#fff;}
html[data-theme="light"] .pv-badge::before{background:#fff;}

/* =====================================================================
   DESIGN v4 — colour, depth and calm
   An aurora of slow colour behind every page, glass cards that let it glow
   through, one accent colour per card, and a slimmer header.
   ===================================================================== */
:root{
  --aur-base:radial-gradient(120% 90% at 50% -10%, #12142a 0%, #07080f 55%, #05060b 100%);
  --aur-1:rgba(245,196,81,0.34); --aur-2:rgba(124,92,255,0.34); --aur-3:rgba(32,201,151,0.26); --aur-4:rgba(255,92,138,0.20);
  --aur-op:0.75;
  --glass:rgba(14,15,24,0.66); --glass-2:rgba(22,23,34,0.7); --glass-line:rgba(255,255,255,0.08);
  --violet:#a78bfa; --rose:#fb7185; --sky:#60a5fa;
}
html[data-theme="light"]{
  --aur-base:linear-gradient(160deg, #f7f1ff 0%, #eef3ff 40%, #fff6ea 100%);
  --aur-1:rgba(255,196,112,0.55); --aur-2:rgba(167,139,250,0.45); --aur-3:rgba(110,231,183,0.45); --aur-4:rgba(125,185,255,0.45);
  --aur-op:0.85;
  --bg:#f3f2fb; --glass:rgba(255,255,255,0.72); --glass-2:rgba(255,255,255,0.86); --glass-line:rgba(70,60,140,0.12);
  --violet:#6d43d9; --rose:#c2185b; --sky:#1f63c9;
}
.aurora{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--aur-base);}
.aurora i{position:absolute; width:48vmax; height:48vmax; border-radius:50%; filter:blur(80px); opacity:var(--aur-op); will-change:transform;
  animation:aurDrift 28s ease-in-out infinite alternate;}
.aurora i:nth-child(1){background:var(--aur-1); top:-18vmax; inset-inline-start:-10vmax;}
.aurora i:nth-child(2){background:var(--aur-2); top:12vh; inset-inline-end:-16vmax; animation-duration:34s; animation-delay:-8s;}
.aurora i:nth-child(3){background:var(--aur-3); bottom:-22vmax; inset-inline-start:18vw; animation-duration:40s; animation-delay:-14s;}
.aurora i:nth-child(4){background:var(--aur-4); top:48vh; inset-inline-start:-12vmax; width:34vmax; height:34vmax; animation-duration:46s; animation-delay:-20s;}
.aurora::after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(var(--fg-rgb),0.06) 1px, transparent 1.2px); background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 75%); mask-image:linear-gradient(180deg, #000, transparent 75%);}
@keyframes aurDrift{0%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(5vmax,3vmax,0) scale(1.12);} 100%{transform:translate3d(-3vmax,6vmax,0) scale(0.95);}}
@media (prefers-reduced-motion: reduce){ .aurora i{animation:none;} }
body.has-shell::before{display:none !important;}

/* glass surfaces: the aurora glows through softly */
.card, .kpi-card, .tk-group, .me-strip{
  background-color:var(--glass) !important; border:1px solid var(--glass-line) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
}
.kpi, .panel-2, .ball-stats > *, .hl-row{background-color:var(--glass-2);}
.sidebar{background:var(--glass) !important; -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border-inline-end:1px solid var(--glass-line) !important;}
.site-header{background:transparent !important; border-bottom:0 !important; box-shadow:none !important;}
html[data-theme="light"] .card, html[data-theme="light"] .kpi-card, html[data-theme="light"] .tk-group{box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 40px -24px rgba(60,40,140,0.35) !important;}

/* one accent colour per card: a glowing top edge, a soft corner light, the value in that colour */
.kpi-card, .card.hl{--acc:var(--gold); position:relative; overflow:hidden;}
.kpi-card::after, .card.hl::after{content:""; position:absolute; inset:0 0 auto; height:3px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--acc) 30%, var(--acc) 70%, transparent); opacity:0.9;}
.kpi-card::before, .card.hl::before{content:""; position:absolute; width:160px; height:160px; top:-70px; inset-inline-end:-50px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--acc) 30%, transparent), transparent); }
.kpi-strip .kpi-card:nth-child(1){--acc:var(--gold);}
.kpi-strip .kpi-card:nth-child(2){--acc:var(--mint);}
.kpi-strip .kpi-card:nth-child(3){--acc:var(--sky);}
.kpi-strip .kpi-card:nth-child(4){--acc:var(--violet);}
.kpi-strip .kpi-card:nth-child(5){--acc:var(--ember);}
.kpi-strip .kpi-card:nth-child(6){--acc:var(--rose);}
.kpi-strip .kpi-card .v{color:var(--acc) !important;}
.hl-grid .card.hl:nth-child(6n+1){--acc:var(--ember);}
.hl-grid .card.hl:nth-child(6n+2){--acc:var(--sky);}
.hl-grid .card.hl:nth-child(6n+3){--acc:var(--violet);}
.hl-grid .card.hl:nth-child(6n+4){--acc:var(--rose);}
.hl-grid .card.hl:nth-child(6n+5){--acc:var(--mint);}
.hl-grid .card.hl:nth-child(6n+6){--acc:var(--gold);}
.kpi-card > *, .card.hl > *{position:relative; z-index:1;}
.kpi-card > .info-btn, .card.hl > .info-btn{position:absolute; z-index:5;}

/* header: page title on one side, profile · language · theme · lock · next draw on the other */
.top-title{margin:0; font-size:clamp(1.25rem, 2vw, 1.7rem); font-weight:800; letter-spacing:-0.02em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(110deg, var(--ink) 30%, var(--gold) 120%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.next-chip{display:none;}
@media (min-width:1025px){ body.has-shell .top-info{display:block;} }
@media (min-width:1025px){ body.has-shell .next-chip{display:flex; align-items:center; gap:9px; padding:6px 12px 6px 10px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); white-space:nowrap;} }
.nc-tx{display:grid; line-height:1.15;}
.nc-date{font-size:0.7rem; color:var(--ink-faint);}
.nc-cd{font-family:var(--mono); font-size:0.86rem; color:var(--ink); font-variant-numeric:tabular-nums;}
.live-wifi{display:flex; color:var(--mint);}
.live-wifi path, .live-wifi circle{opacity:0.22; animation:wifiFill 2.4s ease-in-out infinite;}
.live-wifi .w0{animation-delay:0s;} .live-wifi .w1{animation-delay:.3s;} .live-wifi .w2{animation-delay:.6s;} .live-wifi .w3{animation-delay:.9s;}
@keyframes wifiFill{0%,10%{opacity:0.22;} 30%,75%{opacity:1;} 100%{opacity:0.22;}}
@media (prefers-reduced-motion: reduce){ .live-wifi path, .live-wifi circle{animation:none; opacity:1;} }
@media (max-width:1100px){ body.has-shell .nc-date{display:none;} }

/* the in-page heading block: on wide screens the title lives in the top bar, so it goes;
   the eyebrow and the long subtitle are gone everywhere (the sales site already explains everything) */
.page-head .eyebrow, .page-head .subtitle, .hero .subtitle, .hero .eyebrow{display:none !important;}
@media (min-width:1025px){ body.has-shell .page-head, body.has-shell .container > .hero{display:none !important;} }
.page-head{padding:8px 0 16px;}
.page-head h1{font-size:clamp(1.5rem, 6vw, 2rem); margin:0;}
body.has-shell .container{padding-top:6px;}

/* dashboard v4: compact highlight cards, 4 across on wide screens */
.me-strip{grid-template-columns:1fr 1fr auto !important; padding:14px 18px !important; margin-bottom:18px !important;}
.me-strip .me-cell:first-child{border-inline-start:0; padding-inline-start:0;}
@media (max-width:1199px){ .me-strip{grid-template-columns:1fr 1fr !important;} }
@media (max-width:600px){ .me-strip{grid-template-columns:1fr !important;} .me-strip .me-cell:first-child{border-top:0; padding-top:0;} }
@media (min-width:1200px){ body.has-shell .hl-grid{grid-template-columns:repeat(4, minmax(0, 1fr));} }
.hl-grid{gap:14px !important;}
.card.hl{padding:16px 16px 14px !important;}
.card.hl .hl-head{margin-bottom:10px;}
.card.hl .hl-head h3{font-size:0.95rem;}
#hlRecent{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px 14px;}
#hlRecent .hl-row{padding:7px 10px; border-radius:12px; border:0;}
.pat-row{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line);}
.pat-row:last-child{border-bottom:0;}
.pat-l{font-size:0.84rem; color:var(--ink);}
.pat-v{display:flex; align-items:center; gap:8px; justify-content:flex-end;}
.pat-v b{display:none;}
.pat-v i{display:block; height:6px; width:calc(var(--w) * 0.9); max-width:100px; border-radius:3px; background:linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, transparent));}
.pat-v em{font-style:normal; font-family:var(--mono); font-size:0.8rem; color:var(--acc); min-width:34px; text-align:end;}
.hl-combo{padding:4px 0;}
.hl-sub{margin-top:8px !important;}
/* v4 tuning */
.kpi-card::before, .card.hl::before{width:120px; height:120px; top:-60px; inset-inline-end:-40px; background:radial-gradient(closest-side, color-mix(in srgb, var(--acc) 18%, transparent), transparent);}
.kpi-strip{grid-template-columns:repeat(auto-fit, minmax(165px, 1fr)) !important;}
@media (min-width:1200px){ body.has-shell .hl-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} }
@media (min-width:1700px){ body.has-shell .hl-grid{grid-template-columns:repeat(4, minmax(0, 1fr));} body.has-shell .hl-grid .hl-wide{grid-column:span 2;} }
.hl-grid .hl-wide{grid-column:1 / -1;}
#hlRecent{grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));}
#hlRecent .hl-row{flex-wrap:nowrap;}
#hlRecent .hl-date{min-width:110px; font-size:0.8rem;}
.more-btn{display:flex; width:max-content;}
/* generator v4: options sit in one tidy panel, the main button spans the card */
#genMode, #genCount, #genSpread{flex-wrap:wrap;}
.split > .card[data-info="gen"] .control-row{background:var(--glass-2); border:1px solid var(--glass-line); border-radius:16px; padding:12px 14px; margin-bottom:10px !important; gap:12px 22px;}
.split > .card[data-info="gen"] .control-row + .control-row{margin-top:0 !important;}
#genBtn{width:100%; min-height:54px; font-size:1.05rem; justify-content:center; margin-top:4px;
  background:linear-gradient(120deg, #ffe08a, var(--gold-bright) 40%, var(--gold)); box-shadow:0 14px 30px -14px rgba(245,196,81,0.9), inset 0 1px 0 rgba(255,255,255,0.6);}
#genBtn:hover{filter:brightness(1.05); transform:translateY(-1px);}
.gen-help{margin:0 0 8px !important;}
.gen-help + .more-btn{margin-top:-2px;}
.kpi-card::before, .card.hl::before{display:none;}
.kpi-card, .card.hl{background-image:linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, transparent), transparent 55%) !important;}
.kpi-strip{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;}
@media (min-width:1500px){ .kpi-strip{grid-template-columns:repeat(6, minmax(0, 1fr)) !important;} }
@media (max-width:600px){ .kpi-strip{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} }
.hl-balls{display:grid !important; grid-template-columns:repeat(auto-fit, minmax(46px, 1fr)); gap:8px 4px !important;}
.hl-ball{min-width:0 !important; text-align:center;}
.hl-ball small{font-size:0.66rem !important; line-height:1.25; display:block; overflow-wrap:anywhere;}
/* header tools, read from the outer edge inward: profile · language · theme · lock · next draw */
@media (min-width:1025px){
  body.has-shell .site-header .top-info{order:0;}
  body.has-shell .site-header .next-chip{order:1;}
  body.has-shell .site-header .lock-btn{order:2;}
  body.has-shell .site-header .theme-btn{order:3;}
  body.has-shell .site-header .lang-switch{order:4;}
  body.has-shell .site-header .acct{order:5;}
}
/* uploaded PNG logo replaces the gold "Z" */
.logo.has-img{background:none !important; box-shadow:none !important; padding:0 !important; overflow:hidden;}
.logo.has-img img{width:100%; height:100%; object-fit:contain; display:block;}

/* =====================================================================
   TABLET (iPad, 701–1024px): the phone's navigation (top bar + bottom tab bar),
   but with room to breathe — wider margins, two or three columns, a floating tab bar.
   ===================================================================== */
@media (min-width:701px) and (max-width:1024px){
  body{padding:0 32px calc(110px + env(safe-area-inset-bottom)) !important;}
  .container{max-width:920px; margin:0 auto;}
  .site-header .bar{max-width:920px;}
  .kpi-strip{grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:14px;}
  .hl-grid, .tool-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
  .hl-grid .hl-wide{grid-column:1 / -1;}
  .split{grid-template-columns:1fr !important;}
  .card{padding:24px 24px;}
  .page-head h1{font-size:2.1rem;}
  .ball{width:48px; height:48px;}
  /* floating, rounded tab bar centred at the bottom */
  .tabbar{left:50% !important; right:auto !important; bottom:16px !important; transform:translateX(-50%); width:min(600px, calc(100% - 48px));
    border-radius:24px !important; border:1px solid var(--glass-line) !important; padding:8px !important;
    background:var(--glass) !important; -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
    box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);}
  .tabbar .tab-tx{font-size:0.78rem;}
}
/* profile picture in place of the initials */
.ava-img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;}
.has-img{padding:0 !important; overflow:hidden;}

/* header v5: every tool is the same white/glass card; live signal on its own; round language flag */
.flag{display:inline-block; width:22px; height:22px; border-radius:50%; overflow:hidden; flex:0 0 22px; box-shadow:0 0 0 1px rgba(0,0,0,0.12) inset, 0 1px 3px rgba(0,0,0,0.2); vertical-align:middle;}
.flag svg{width:100%; height:100%; display:block;}
.lang-menu .flag{width:24px; height:24px; flex-basis:24px; margin-inline-end:10px;}
.lang-menu button{display:flex !important; align-items:center; gap:0 !important;}
.lang-menu .lc{display:none !important;}
.lang-btn .flag{margin-inline-end:2px;}
.site-header .lang-btn.flag-btn{width:40px !important; height:40px !important; min-height:40px !important; padding:0 !important; border-radius:50% !important; justify-content:center !important; display:flex !important; align-items:center;}
.site-header .lang-btn.flag-btn .flag{width:28px; height:28px; flex-basis:28px; margin:0;}
.site-header .lock-btn, .site-header .theme-btn, .site-header .live-chip{width:40px !important; height:40px !important; border-radius:12px !important;
  background:var(--panel) !important; border:1px solid var(--line-bright) !important; color:var(--ink-dim);}
html[data-theme="light"] .site-header .lock-btn, html[data-theme="light"] .site-header .theme-btn, html[data-theme="light"] .site-header .live-chip,
html[data-theme="light"] .site-header .lang-btn.flag-btn{background:#fff !important;}
.live-chip{display:none;}
@media (min-width:1025px){
  body.has-shell .site-header .live-chip{display:flex; align-items:center; justify-content:center; order:2;}
  body.has-shell .site-header .next-chip{order:1;}
  body.has-shell .site-header .lock-btn{order:3;}
  body.has-shell .site-header .theme-btn{order:4;}
  body.has-shell .site-header .lang-switch{order:5;}
  body.has-shell .site-header .acct{order:6;}
  body.has-shell .site-header .next-chip{background:var(--panel); border-color:var(--line-bright);}
  html[data-theme="light"] body.has-shell .site-header .next-chip{background:#fff;}
}
.flag img{width:100%; height:100%; object-fit:cover; display:block;}