:root{
  --bg:#0a0f1c;--panel:#0e1426;--border:#1a2240;--card:#0c1327;
  --muted:#9fb0d1;--txt:#e8f0ff;--accent:#4f8cff;--accent2:#6dd6ff;--ok:#22c55e;--warn:#f59e0b;--err:#ef4444
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  background:radial-gradient(1200px 800px at 20% -10%, #0f1c38 0%, transparent 60%), linear-gradient(180deg,#0a0f1c,#0b1022 65%, #0a0f1c 100%);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:#cfe0ff;text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1200px;margin:22px auto;padding:0 16px}

/* Header */
header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(10,17,35,.7); backdrop-filter: blur(8px)
}
.brand{display:flex;align-items:center;gap:10px}
img.logo{height:28px;background:#fff;border-radius:10px;padding:4px}
.appname{font-weight:900;letter-spacing:.2px}
.comp{opacity:.9;font-weight:600}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:6px 10px;border-radius:8px;border:1px solid transparent}
nav a:hover{background:rgba(255,255,255,.06)}
nav a.active{border-color:#2b3b69;background:linear-gradient(180deg,#182246,#101735);}

/* Header clock */
.now{
  margin-left:12px;
  font-weight:800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing:.5px;
}

/* Layout helpers */
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width: 980px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* Cards */
.card{
  background:linear-gradient(180deg,var(--card),#0b1126);
  border:1px solid var(--border); border-radius:16px;
  padding:16px; box-shadow:0 20px 40px rgba(0,0,0,.25)
}
.section-title{margin:0 0 10px 0;font-size:18px;color:#d7e4ff;letter-spacing:.2px}

/* Inputs / Buttons */
input,select{
  width:100%; background:#0f1834;color:var(--txt);
  border:1px solid #1b2445; border-radius:12px; padding:12px;
  outline:none; transition:.2s border-color,.2s box-shadow
}
input:focus,select:focus{border-color:#3850a4; box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.btn{
  display:inline-block;
  border:none;border-radius:12px;padding:10px 16px;font-weight:800;cursor:pointer;text-align:center;
  color:#fff;background:linear-gradient(180deg,#5a93ff,#3c73f0); box-shadow:0 8px 18px rgba(63,97,216,.35)
}
.btn.secondary{background:linear-gradient(180deg,#3a4a70,#2a3457)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:#cfe0ff}
.btn:active{transform:translateY(1px)}

/* Lists */
.list{display:flex;flex-direction:column;gap:8px}
.row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid #232c50; border-radius:10px;
  background:#0e1428; transition:.12s transform,.12s border-color,.12s background
}
.row:hover{transform:translateY(-1px);border-color:#2d3a6f}
.row.selected{background:rgba(79,140,255,.18); border-color:#4f8cff}

/* Flags (global) */
img.flag{
  height:18px;
  vertical-align:-3px;
  border:1px solid #2a2f43;
  border-radius:3px;
  background:#0b0d12;
}
img.flagL{
  height:28px;
  vertical-align:-6px;
  border:1px solid #2a2f43;
  border-radius:6px;
  background:#0b0d12;
}

/* Chips & misc */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#0f1736}
.kbd{font-family:ui-monospace,Consolas,monospace;border:1px solid #334; padding:2px 6px;border-radius:6px;background:#151a2c}
.muted{color:var(--muted)} .soft{opacity:.78}
.title{font-size:26px;font-weight:900;margin:0}
.subtitle{margin:0;color:var(--muted)}

/* Footer */
footer{max-width:1200px;margin:24px auto 40px auto;padding:0 16px;text-align:center;font-size:13px;color:#6c7aa0}