/* Premium Theme */
:root{
  --bg: #0b1220;
  --surface: #0f172a;
  --box: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #10b981;
  --accent: #6366f1;
  --ring: rgba(99,102,241,.35);
  --shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  --radius: 16px;
  --space: 14px;
  --maxw: 1200px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.15), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(16,185,129,.12), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.container, .wrap, .content, main, .main{
  width:100%; max-width: var(--maxw); margin:0 auto; padding: calc(var(--space)*1.5) var(--space); box-sizing:border-box;
}
header, footer{ background: rgba(15,23,42,.7); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.06) }
footer{ border-top:1px solid rgba(255,255,255,.06); border-bottom:none }
h1{ font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height:1.2 }
h2{ font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height:1.25 }
h3{ font-size: clamp(18px, 2vw, 26px); font-weight: 600; line-height:1.3 }
a{ color: var(--accent); text-decoration: none }
a:hover{ text-decoration: underline }
.box, [class*="box"], .card, [class*="Card"], .panel, [class*="panel"], .widget, [class*="widget"], .tile, [class*="tile"], .module, [class*="module"], .container-box, [class*="Container"], .convert-box, [class*="convert"]{
  background: var(--box) !important; border-radius: var(--radius); box-shadow: var(--shadow); padding: calc(var(--space)*1.25);
}
button, .btn, input[type=submit], input[type=button]{
  appearance:none; border:none; outline:none; background: linear-gradient(180deg, var(--accent), #4f46e5);
  color:#fff; padding:12px 16px; border-radius:12px; font-weight:600; cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease; box-shadow: 0 8px 20px rgba(99,102,241,.35);
}
button:hover, .btn:hover, input[type=submit]:hover, input[type=button]:hover{ transform: translateY(-1px) }
button:focus-visible, .btn:focus-visible{ box-shadow: 0 0 0 4px var(--ring) }
input[type=text], input[type=number], input[type=email], select, textarea{
  width:100%; background:#0f172a; color:var(--text); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; box-sizing:border-box;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:#4f46e5; box-shadow:0 0 0 4px var(--ring) }
table{ width:100%; border-collapse: collapse; background: var(--surface); border-radius:12px; overflow:hidden }
th, td{ padding:12px 14px; text-align:left }
thead th{ background: rgba(255,255,255,.04); font-weight:600 }
tbody tr{ border-bottom:1px solid rgba(255,255,255,.06) }
tbody tr:hover{ background: rgba(255,255,255,.03) }
img.flag{ border-radius:999px }
@media (max-width: 640px){
  .container, .wrap, .content, main, .main{ padding:16px }
  .grid, [class*="grid"]{ display:grid; grid-template-columns:1fr !important; gap:14px }
  .row, [class*="row"], .columns, [class*="columns"]{ display:block !important }
  nav ul{ display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none }
}