:root{
  --bg:#0b1220;
  --surface:#0f1730;
  --ink:#e6edff;
  --muted:#9fb0dc;
  --border:#1f2a44;
  --brand:#4a7dff;
  --brand-2:#7b9dff;
  --footer:#0a1326;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--ink)}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}

/* Topbar */
.topbar{border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0e1830 0%,#0c152b 100%);position:sticky;top:0;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.topbar-inner{display:flex;align-items:center;gap:14px;padding:12px 0;}
.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:radial-gradient(75% 75% at 30% 30%,var(--brand-2),var(--brand));box-shadow:0 4px 14px rgba(74,125,255,.5) inset}
.brand-badge svg{width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.site-title{font-weight:800;letter-spacing:.3px;font-size:18px}
.site-sub{color:var(--muted);font-size:13px;margin-left:auto}

/* Banner */
.banner{border-bottom:1px solid var(--border);background:
 radial-gradient(60% 100% at 10% 0%, rgba(74,125,255,.20) 0%, rgba(74,125,255,0) 60%),
 radial-gradient(70% 120% at 100% 0%, rgba(123,157,255,.18) 0%, rgba(123,157,255,0) 60%),
 linear-gradient(180deg,#0b1220 0%,#0c1530 100%)}
.banner-inner{display:grid;grid-template-columns:1fr;gap:12px;padding:26px 0;}
.banner h1{margin:0;font-size:28px;letter-spacing:.4px}
.banner p{margin:2px 0 0;color:var(--muted)}
.badges{display:flex;gap:10px;margin-top:10px}
.badge{padding:.35rem .6rem;border-radius:999px;background:#162650;color:#cfe0ff;border:1px solid #23335c;font-weight:700;font-size:12px}

/* Footer */
.footer{margin-top:40px;border-top:1px solid var(--border);background:var(--footer);color:#cdd9ff}
.footer-inner{padding:24px 0;display:grid;grid-template-columns:1fr;gap:10px}
.footer small{color:#aab7e7}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.copy{opacity:.95}

/* Utility */
.main{padding:18px 0 40px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 10px 28px rgba(0,0,0,.25)}


/* === Minimal mobile-friendly adjustments (added automatically) === */
@media (max-width: 768px) {
  /* Layout wrappers */
  .container, .wrapper, .content, .main, .panel, .card, .section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Two-column -> stacked */
  .row, .grid, .columns, .cols, .flex {
    display: block !important;
  }
  [class*="col-"], .left, .right, .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Forms */
  form, .form, .form-group, .field, .input-group {
    width: 100% !important;
  }
  input, select, textarea, button {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  label { display:block; margin-bottom:6px; }
  /* Media */
  img, video, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Tables (scroll if needed) */
  .table-responsive { width:100%; overflow-x:auto; }
  table { width:100%; border-collapse: collapse; }
  /* Spacing */
  .mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
  .mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}
  .mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}
  .mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}
  /* Buttons block on small screens */
  .btn, .button {
    display: inline-block;
    width: 100% !important;
    text-align: center;
  }
  /* Headers/footers */
  header, footer { padding: 12px !important; }
  nav ul { display:block !important }
  nav li { display:block !important; margin: 6px 0 !important; }
}