
:root{
  --bg1:#0B2C59; --bg2:#123D7B; --card:#0e3b72; --ink:#EAF2FF; --muted:#B9CEF8;
  --glass: rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
     background:linear-gradient(140deg,var(--bg1),var(--bg2)); color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:20px}
header{position:sticky;top:0;background:#0b2c59cc;border-bottom:1px solid #ffffff22;backdrop-filter:blur(10px);padding:14px 20px;z-index:10}
h1{margin:0;font-size:22px}
.sub{opacity:.8;font-size:13px;margin-top:4px}
.grid{display:grid;gap:12px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid #ffffff22;border-radius:14px;padding:14px}
.kpi .label{font-size:12px;opacity:.75}
.kpi .value{font-weight:800;font-size:22px;margin-top:6px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.input{background:#0b2c59;border:1px solid #ffffff22;color:var(--ink);border-radius:10px;padding:10px 12px;min-width:200px}
.select{background:#0b2c59;border:1px solid #ffffff22;color:var(--ink);border-radius:10px;padding:10px 12px}
.btn{background:#1956B3;border:none;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}
.table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border:1px solid #ffffff22;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-top:1px solid #ffffff22;text-align:left}
.table thead th{background:#10396f}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;border:1px solid #ffffff26}
.badge.easy{background:#0d5; color:#002a11}
.badge.mod{background:#ffdd66; color:#614b00}
.badge.hard{background:#ffb266; color:#5c2b00}
.badge.night{background:#ff7780; color:#3a0006}
.muted{opacity:.8}
.tabbar{display:flex;gap:8px}
.tab{border:1px solid #ffffff22;background:#0b2c59;padding:8px 12px;border-radius:10px;cursor:pointer}
.tab.active{background:#1956B3}
.chatbox{min-height:140px;border:1px solid #ffffff22;border-radius:12px;padding:10px;background:#0b2c59}
.bubble{padding:8px;border-radius:10px;margin:6px 0;max-width:90%}
.bubble.user{background:#123d7b}
.bubble.ai{background:#0e3b72}
.footer{opacity:.7;font-size:12px;margin-top:6px}
.small{font-size:12px}
