:root{color-scheme:dark;--bg:#0b1020;--card:#151c30;--card2:#1d2740;--text:#f8fafc;--muted:#9ca3af;--accent:#7c3aed;--border:rgba(255,255,255,.09)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#0b1020,#101827 55%,#0b1020);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;min-height:100vh}
.app{max-width:760px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 34px)}
header{display:flex;align-items:center;gap:14px;margin-bottom:18px}.logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:22px;background:linear-gradient(135deg,#7c3aed,#2563eb);box-shadow:0 12px 30px rgba(124,58,237,.3)}
h1,h2,h3,p{margin-top:0}header h1{margin-bottom:2px}header p{margin:0;color:var(--muted)}
nav{display:flex;gap:8px;margin-bottom:18px;position:sticky;top:8px;z-index:10}.nav,.segmented button{border:1px solid var(--border);background:#111827;color:var(--muted);padding:11px 14px;border-radius:14px;font-weight:700}.nav.active,.segmented button.active{background:var(--accent);color:#fff}.tab{display:none}.tab.active{display:block}
.card{background:rgba(21,28,48,.94);border:1px solid var(--border);border-radius:24px;padding:18px;margin:14px 0;box-shadow:0 12px 30px rgba(0,0,0,.18);backdrop-filter:blur(14px)}
.row{display:flex;align-items:center;gap:10px}.space{justify-content:space-between}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.badge{font-size:12px;padding:8px 10px;border-radius:999px;background:#24314f;color:#dbeafe;white-space:nowrap}.badge.ok{background:#123c2d;color:#b7f7d7}.badge.off{background:#46252a;color:#ffd3d8}.badge.purple{background:#35205f;color:#e9ddff}
.muted{color:var(--muted);line-height:1.45}.primary,.secondary{width:100%;margin-top:12px;padding:14px;border:0;border-radius:15px;color:#fff;font-size:16px;font-weight:800}.primary{background:linear-gradient(135deg,#7c3aed,#2563eb)}.primary:disabled{opacity:.45}.secondary{background:#26314b;border:1px solid var(--border)}.hidden{display:none}.status{margin-top:12px;font-weight:700;line-height:1.4}.latest{margin-top:14px;padding:14px;border-radius:18px;background:var(--card2);display:none}
.segmented{display:flex;gap:8px}.segmented button{flex:1}.balls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.ball{width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#293653,#172033);border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;font-size:18px;font-weight:900}.euro .ball{background:linear-gradient(145deg,#4c1d95,#312e81)}
.preview{margin-top:14px;padding:15px;border-radius:18px;background:var(--card2);border:1px solid var(--border)}.tipitem{padding:14px 0;border-bottom:1px solid var(--border)}.tipitem:last-child{border-bottom:0}.tiptop{display:flex;justify-content:space-between;gap:10px}.hit{font-weight:800;color:#c4b5fd}.statsgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.statsgrid div{padding:14px;border-radius:18px;background:var(--card2);border:1px solid var(--border)}.statsgrid span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.statsgrid strong{font-size:21px}
@media(max-width:430px){.statsgrid{grid-template-columns:1fr}.ball{width:45px;height:45px}}

.hexlegend{margin-top:15px;padding:14px;border-radius:18px;background:var(--card2);border:1px solid var(--border)}
.hexgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.hexgrid span{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px;border-radius:14px;background:#111827;border:1px solid var(--border)}
.hexgrid strong{font-size:22px;color:#c4b5fd}.hexgrid small{margin-top:3px;color:var(--muted);font-size:11px}.hexexample{margin:12px 0 0}
.chartcard{margin-top:18px;padding:14px;border-radius:20px;background:var(--card2);border:1px solid var(--border)}
#trendChart{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
.chartlegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:12px}
.chartlegend span{display:flex;align-items:center;gap:6px}
.chartlegend i{display:inline-block;width:10px;height:10px;border-radius:50%}
.modeldot{background:#a78bfa}.randomdot{background:#64748b}
@media(max-width:430px){.hexgrid{grid-template-columns:repeat(3,1fr)}}

.logo img,.brand-icon img{
  width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;
}