:root { --bg:#070a1a; --panel:#0f1228; --line:#ffffff14; --text:#f3f4ff; --muted:#8b90b5; --yellow:#ffd23f; --green:#3ddc84; --blue:#4da3ff; --violet:#a855f7; --red:#ff5d73; }
* { box-sizing:border-box; margin:0; padding:0; }
body { color:var(--text); font-family:Poppins, sans-serif; padding-bottom:96px; min-height:100vh;
  background:radial-gradient(520px 380px at 50% -120px, #7c3aed38, transparent 70%) no-repeat, var(--bg); }
a { color:inherit; }
svg { display:block; }
.wrap { max-width:1000px; margin:0 auto; padding:0 16px; }

/* header */
header { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; padding:16px 0 14px; }
.ib { width:40px; height:40px; display:grid; place-items:center; border:0; background:none; color:var(--text); cursor:pointer; text-decoration:none; }
.ib svg { width:26px; height:26px; }
.title { text-align:center; text-decoration:none; }
h1 { font-size:clamp(19px, 5.6vw, 27px); font-weight:800; letter-spacing:.5px; line-height:1.1; white-space:nowrap; }
h1 span { background:linear-gradient(90deg, #ff4fa3, #a855f7 55%, #4f8bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.title small { display:block; margin-top:3px; font-size:12px; color:var(--muted); letter-spacing:.3px; }
.title small b { color:var(--yellow); font-weight:400; }
.spin svg { transition:transform .6s; } .spin.go svg { transform:rotate(360deg); }

/* date bar */
.datebar { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.dico { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; background:#a855f72b; color:#c98bff; }
.dico svg { width:22px; height:22px; }
.datebar b { display:block; font-size:14px; font-weight:600; }
.datebar small { font-size:12px; color:var(--muted); }
.live { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--green); white-space:nowrap; }
.live i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity:.3; } }

/* filter tabs */
.tabs { display:flex; margin-top:12px; padding:5px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.tabs button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 4px; border:0; border-radius:12px; background:none;
  font:500 12.5px Poppins; color:#c9cce6; cursor:pointer; position:relative; }
.tabs button:first-child { flex:0 0 auto; padding:9px 18px; }
.tabs button + button::before { content:""; position:absolute; left:0; top:25%; bottom:25%; width:1px; background:var(--line); }
.tabs button.on::before, .tabs button.on + button::before { display:none; }
.tabs svg { width:17px; height:17px; flex:none; }
.tabs button:nth-child(2) svg { color:var(--green); } .tabs button:nth-child(3) svg { color:var(--yellow); } .tabs button:nth-child(4) svg { color:var(--blue); }
.tabs button.on { color:#fff; background:linear-gradient(135deg, #c77dff, #8b2cf5); box-shadow:0 6px 18px #9333ea66; }
.tabs button.on svg { color:#fff; }

/* result cards */
.grid { display:grid; gap:12px; margin-top:14px; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); }
.card { padding:14px 14px 12px; border-radius:18px; border:1.5px solid var(--cb);
  background:radial-gradient(90% 120% at 100% 0%, var(--ca), transparent 70%), linear-gradient(125deg, var(--cd), var(--ce) 70%), #0a0d22;
  box-shadow:0 0 22px var(--cg), inset 0 1px 0 #ffffff14; }
.top { display:flex; gap:12px; }
.ico { width:48px; height:48px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--cc), var(--ca)); border:1px solid var(--cb); box-shadow:inset 0 1px 0 #ffffff26; }
.ico svg { width:30px; height:30px; }
.info { flex:1; min-width:0; }
.row { display:flex; align-items:center; gap:8px; }
.nm { flex:1; min-width:0; font-size:14.5px; font-weight:600; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st { flex:none; display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; font-size:11.5px; font-weight:500; }
.st i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }
.st svg { width:13px; height:13px; }
.done .st { color:var(--green); background:#3ddc841a; border:1px solid #3ddc8430; }
.half .st { color:var(--blue); background:#4da3ff1a; border:1px solid #4da3ff30; }
.wait .st, .off .st { color:var(--muted); background:#ffffff0d; border:1px solid var(--line); }
.num { margin-top:4px; font-family:"Share Tech Mono", monospace; font-size:36px; letter-spacing:2.5px; line-height:1.15; white-space:nowrap; }
.num span { color:var(--yellow); }
.num .x { font-style:normal; color:#ffffff33; }
.off .num { font-family:Poppins, sans-serif; font-size:20px; letter-spacing:.3px; color:var(--muted); padding:8px 0 5px; }
.bot { display:flex; align-items:center; gap:12px; margin-top:10px; padding-top:10px; border-top:1px dashed #ffffff1f; }
.tm small { display:block; font-size:10px; font-weight:600; letter-spacing:.6px; color:var(--c); }
.tm b { font-size:12.5px; font-weight:500; }
.vl { width:1px; align-self:stretch; background:var(--line); }
.btns { margin-left:auto; display:flex; gap:7px; }
.btns a { display:flex; align-items:center; gap:5px; padding:7px 13px; border-radius:999px; color:#fff; text-decoration:none; font-size:12.5px; font-weight:500;
  border:1px solid #ffffff26; box-shadow:inset 0 1px 0 #ffffff26; }
.btns a:first-child { background:var(--b1); } .btns a:last-child { background:var(--b2); }
.btns svg { width:13px; height:13px; }
.empty { grid-column:1/-1; padding:30px 10px; text-align:center; color:var(--muted); font-size:14px; }
.skel { height:150px; border-radius:18px; background:linear-gradient(90deg, #11152e, #181d3d, #11152e); background-size:200% 100%; animation:sk 1.2s infinite; }
@keyframes sk { to { background-position:-200% 0; } }

/* section heading */
.sec { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 2px 10px; }
.sec h2 { font-size:17px; font-weight:700; }
.sec p { font-size:12px; color:var(--muted); }
.note { margin-top:12px; padding:10px 12px; border-radius:12px; background:#ffd23f12; border:1px solid #ffd23f33; color:#ffe9a6; font-size:12px; line-height:1.5; }

/* chart page */
.picker { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.picker select, .seg a { font:500 13px Poppins; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.picker select { flex:1; min-width:180px; }
.seg { display:flex; padding:4px; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.seg a { border:0; text-decoration:none; padding:7px 16px; border-radius:10px; background:none; color:#c9cce6; }
.seg a.on { color:#fff; background:linear-gradient(135deg, #c77dff, #8b2cf5); }
.latest { margin-top:12px; text-align:center; padding:14px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.latest small { color:var(--muted); font-size:12px; }
.latest .num { font-size:34px; margin-top:2px; }
.tablewrap { margin-top:12px; overflow-x:auto; border-radius:14px; border:1px solid var(--line); background:var(--panel); }
table.chart { width:100%; border-collapse:collapse; font-family:"Share Tech Mono", monospace; text-align:center; }
.chart th { position:sticky; top:0; background:#1a1f45; font:600 12px Poppins; color:#c9cce6; padding:9px 4px; }
.chart td { border-top:1px solid var(--line); border-left:1px solid var(--line); padding:6px 3px; font-size:20px; letter-spacing:1px; }
.chart td.wk { font:500 10.5px/1.35 Poppins; color:var(--muted); white-space:nowrap; letter-spacing:0; padding:6px 8px; border-left:0; }
.chart td.red { color:var(--red); }
.chart td.na { color:#ffffff30; }
.chart .pn { display:flex; align-items:center; justify-content:center; gap:4px; }
.chart .pn .v { display:flex; flex-direction:column; font-size:12px; line-height:1.05; color:#c9cce6; }
.chart .pn b { font-weight:400; font-size:20px; }
.chart.panel td { padding:6px 2px; }
.jump { position:fixed; right:16px; bottom:96px; z-index:6; border:0; border-radius:999px; padding:10px 14px; font:600 12px Poppins; color:#fff;
  background:linear-gradient(135deg, #c77dff, #8b2cf5); box-shadow:0 6px 18px #9333ea66; cursor:pointer; }

/* guessing */
.gcard { border-radius:18px; padding:14px; border:1.5px solid var(--cb); background:linear-gradient(125deg, var(--cd), var(--ce) 70%), #0a0d22; box-shadow:0 0 18px var(--cg); }
.gcard .row { margin-bottom:10px; }
.tag { flex:none; padding:3px 9px; border-radius:999px; font-size:11px; background:#ffffff12; border:1px solid var(--line); color:#c9cce6; }
.tag.admin { color:var(--yellow); border-color:#ffd23f44; background:#ffd23f14; }
.gl { display:grid; grid-template-columns:88px 1fr; gap:7px 10px; align-items:baseline; }
.gl small { font-size:11px; font-weight:600; letter-spacing:.6px; color:var(--c); }
.gl b { font-family:"Share Tech Mono", monospace; font-weight:400; font-size:21px; letter-spacing:1.5px; word-break:break-word; }

/* admin */
.box { padding:14px; border-radius:16px; background:var(--panel); border:1px solid var(--line); margin-top:12px; }
.box h3 { font-size:14px; margin-bottom:10px; }
.field { display:grid; gap:6px; margin-bottom:10px; }
.field label { font-size:11.5px; color:var(--muted); }
input[type=text], input[type=password] { width:100%; font:500 15px "Share Tech Mono", monospace; color:var(--text); background:#0a0d22; border:1px solid #ffffff22; border-radius:10px; padding:10px 11px; }
input:focus { outline:2px solid #a855f7; border-color:transparent; }
.arow { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.btn { border:0; border-radius:12px; padding:11px 18px; font:600 14px Poppins; color:#fff; cursor:pointer; background:linear-gradient(135deg, #c77dff, #8b2cf5); }
.btn.ghost { background:#ffffff10; border:1px solid var(--line); }
.msg { margin-top:10px; font-size:13px; } .msg.ok { color:var(--green); } .msg.err { color:var(--red); }
.savebar { position:sticky; bottom:84px; display:flex; gap:10px; align-items:center; margin-top:14px; padding:10px; border-radius:14px; background:#0d1026f2; border:1px solid var(--line); backdrop-filter:blur(8px); }

footer { max-width:700px; margin:0 auto; padding:26px 16px 20px; text-align:center; font-size:11.5px; line-height:1.6; color:var(--muted); }

/* bottom nav */
.bn { position:fixed; left:0; right:0; bottom:0; z-index:5; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; max-width:560px; margin:0 auto;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; border:1px solid var(--line); border-bottom:0;
  background:#0d1026f2; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.bn a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 0; border-radius:14px; color:var(--muted); text-decoration:none; font-size:11px; }
.bn svg { width:23px; height:23px; }
.bn a.on { color:#fff; background:#7c3aed40; }

@media (max-width:480px) {
  .grid { grid-template-columns:1fr; }
  .num { font-size:clamp(30px, 9.4vw, 36px); }
  .tabs button { font-size:12px; gap:5px; }
  .tabs button:first-child { padding:9px 12px; }
  .chart td { font-size:17px; }
  .chart .pn b { font-size:16px; } .chart .pn .v { font-size:10.5px; }
  .arow { grid-template-columns:1fr; }
}

/* intro + lucky number */
.intro { margin-bottom:12px; padding:12px 14px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.intro h2 { font-size:16px; font-weight:700; margin-bottom:4px; }
.intro p { font-size:12.5px; line-height:1.6; color:#c9cce6; }
.intro b { color:var(--yellow); font-weight:600; }
.lucky { margin-bottom:12px; border-radius:16px; overflow:hidden; border:1px solid #ffd23f55; background:linear-gradient(135deg, #2a1f05, #1a1430); }
.lucky h2 { padding:9px 12px; text-align:center; font-size:14.5px; font-weight:700; color:#1a1300; background:linear-gradient(90deg, #ffd23f, #ffb800); }
.lk { display:grid; grid-template-columns:1fr 1fr; }
.lk div { padding:10px; text-align:center; }
.lk div + div { border-left:1px dashed #ffd23f40; }
.lk small { display:block; font-size:12px; color:#ffb4c0; font-weight:600; }
.lk b { display:block; margin-top:2px; font-family:"Share Tech Mono", monospace; font-weight:400; font-size:24px; letter-spacing:1.5px; color:#fff; }

/* live update */
.liveup { border-radius:16px; overflow:hidden; border:1px solid #ff5d7355; background:var(--panel); }
.lh { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:linear-gradient(90deg, #7a1430, #3b0f4f); }
.lh h2 { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; letter-spacing:1px; }
.lh h2 i { width:9px; height:9px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 10px #ff4d6d; animation:pulse 1.2s infinite; }
.mini { border:1px solid #ffffff30; border-radius:999px; padding:5px 12px; font:600 11.5px Poppins; color:#fff; background:#ffffff18; cursor:pointer; }
.lrow { display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); }
.lrow:first-child { border-top:0; }
.ln { font-size:14px; font-weight:600; letter-spacing:.3px; }
.lr { grid-row:span 2; font-family:"Share Tech Mono", monospace; font-size:24px; letter-spacing:1.5px; color:var(--yellow); }
.lr.ld { font-family:Poppins, sans-serif; font-size:14px; letter-spacing:0; color:#c9cce6; animation:pulse 1.4s infinite; }
.lrow small { font-size:11px; color:var(--muted); }
.lempty { padding:14px; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.6; }

/* last-result fallback on cards */
.lastlbl { display:inline-block; margin-top:3px; padding:2px 8px; border-radius:999px; font-size:10.5px; color:#d6d9f5; background:#ffffff12; border:1px solid var(--line); }
.card.old .num { opacity:.85; }

/* chart link lists */
.clists { display:grid; gap:12px; margin-top:18px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.clist { border-radius:16px; overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.clist h2 { padding:10px 14px; font-size:14.5px; font-weight:700; background:linear-gradient(90deg, #7c3aed66, #db277744); }
.clist a { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-top:1px solid var(--line); text-decoration:none;
  font-size:13.5px; font-weight:500; color:var(--text); border-left:3px solid var(--c); }
.clist a span { color:var(--muted); font-size:18px; }
.clist a:hover { background:#ffffff08; }

/* SEO / info content and policy pages */
.content { margin-top:18px; display:grid; gap:12px; }
.content section, .page { padding:14px 16px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.content h2, .page h2 { font-size:16px; font-weight:700; margin-bottom:8px; color:#fff; }
.page h1 { font-size:22px; margin-bottom:10px; }
.page h3 { font-size:14.5px; margin:14px 0 6px; }
.content p, .content li, .page p, .page li { font-size:13px; line-height:1.7; color:#c9cce6; }
.content p + p, .page p + p { margin-top:8px; }
.content ul, .page ul { padding-left:18px; display:grid; gap:4px; }
.content b, .page b { color:#fff; font-weight:600; }
.content a, .page a { color:var(--yellow); }
table.timing { width:100%; border-collapse:collapse; font-size:12.5px; text-align:left; }
.timing th { background:#1a1f45; padding:8px 10px; font-weight:600; color:#c9cce6; }
.timing td { padding:8px 10px; border-top:1px solid var(--line); color:#dfe2ff; }
.faq details { border-top:1px solid var(--line); padding:10px 0; }
.faq details:first-of-type { border-top:0; }
.faq summary { cursor:pointer; font-size:13.5px; font-weight:600; color:#fff; }
.faq details p { margin-top:6px; }

/* footer links + refresh button */
.flinks { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; margin-bottom:12px; }
.flinks a { padding:4px 10px; border-radius:999px; text-decoration:none; font-size:12px; color:#c9cce6; background:#ffffff0a; border:1px solid var(--line); }
footer p + p { margin-top:6px; }
footer .copy { color:#6f74a0; }
.fab { position:fixed; right:16px; bottom:96px; z-index:6; display:flex; align-items:center; gap:6px; border:0; border-radius:999px; padding:10px 15px;
  font:600 13px Poppins; color:#fff; cursor:pointer; background:linear-gradient(135deg, #ff4fa3, #8b2cf5); box-shadow:0 6px 20px #9333ea80; }
.fab svg { width:16px; height:16px; transition:transform .6s; }
.fab.go svg { transform:rotate(360deg); }
.intro h1.h1s { font-size:16px; font-weight:700; line-height:1.3; margin-bottom:4px; }
.lk.one { grid-template-columns:1fr; }
.kw { margin-top:14px; padding:12px; text-align:center; font-size:11.5px; line-height:1.8; color:var(--muted); border-radius:14px; border:1px dashed #ffffff1f; }
.tm b { white-space:nowrap; }
@media (max-width:400px) {
  .bot { gap:9px; }
  .tm b { font-size:12px; }
  .btns { gap:5px; }
  .btns a { padding:6px 10px; font-size:12px; }
}
.ib.logo img { width:38px; height:38px; border-radius:10px; display:block; }