/* ------- Base ------- */
:root{
    --bg:#0b1220;          /* page bg */
    --panel:#111a2b;
    --muted:#9fb0c6;
    --text:#e6eef8;
    --brand:#60a5fa;       /* blue-400 */
    --brand-700:#1d4ed8;
    --line:#1f2a40;
    --good:#22c55e;
    --bad:#ef4444;
    --chip:#0f1627;
    --chip-text:#c7d3e6;
    --card:#0e1729;
    --shadow:0 4px 24px rgba(0,0,0,.25);
    --radius:16px;
    --radius-sm:10px;
    --container:1100px;
    --gap:16px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:linear-gradient(180deg, var(--bg), #0c1424 30%, #0e1626);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  
  .container{max-width:var(--container); margin-inline:auto; padding:24px}
  
  /* ------- Topbar ------- */
  .topbar{position:sticky; top:0; backdrop-filter:saturate(1.2) blur(8px);
    background:rgba(8,13,24,.75); border-bottom:1px solid var(--line); z-index:40}
  .topbar__inner{display:flex; align-items:center; gap:20px; padding-block:14px}
  .brand{font-weight:700; letter-spacing:.2px}
  .nav{display:flex; gap:12px}
  .nav__link{
    color:var(--muted); text-decoration:none; font-weight:500; padding:8px 10px;
    border-radius:10px
  }
  .nav__link:hover{color:var(--text); background:var(--chip)}
  .nav__link--active{color:var(--text); background:var(--chip)}
  
  /* ------- Page head ------- */
  .page-head{margin:28px 0 18px}
  .page-head h1{font-size:32px; line-height:1.15; margin:0 0 6px}
  .muted{color:var(--muted)}
  
  /* ------- Layout helpers ------- */
  .grid{display:grid; gap:var(--gap)}
  .grid.lg{grid-template-columns:1.3fr .7fr}
  @media (max-width: 960px){ .grid.lg{grid-template-columns:1fr} }
  
  /* ------- Cards ------- */
  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .card__head{
    padding:16px 18px; font-weight:600; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(96,165,250,.1), transparent)
  }
  .card__body{padding:18px}
  
  /* ------- Controls ------- */
  .input, input[type="text"]{
    width:100%; background:#0b1323; border:1px solid var(--line);
    color:var(--text); border-radius:10px; padding:10px 12px; outline:none
  }
  .input::placeholder{color:#7f91ab}
  
  .btn{
    appearance:none; border:1px solid var(--brand);
    background:linear-gradient(180deg, rgba(96,165,250,.25), rgba(96,165,250,.15));
    color:white; font-weight:600; padding:10px 14px; border-radius:12px;
    cursor:pointer; transition:.15s transform ease, .15s background ease
  }
  .btn:hover{transform:translateY(-1px); background:linear-gradient(180deg, rgba(96,165,250,.35), rgba(96,165,250,.2))}
  .btn.secondary{border-color:var(--line); background:#0f1729; color:var(--text)}
  .btn.ghost{border-color:transparent; background:transparent; color:var(--text)}
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:999px; background:var(--chip); color:var(--chip-text);
    font-weight:600; border:1px solid var(--line)
  }
  
  /* ------- Lists / rows ------- */
  .row{display:flex; justify-content:space-between; align-items:center; gap:12px}
  .kv{display:grid; grid-template-columns:160px 1fr; gap:8px 16px}
  .kv .k{color:var(--muted)}
  .kv .v{font-weight:600}
  
  /* ------- Tables ------- */
  .table{
    width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; border:1px solid var(--line)
  }
  .table th, .table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line)}
  .table th{color:var(--muted); font-weight:600; background:#0f192c}
  .table tr:hover td{background:#0e1729}
  
  /* ------- Chips / tags ------- */
  .tag{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--line);
    color:var(--muted); background:#0c1527}
  
  /* ------- Skeleton ------- */
  .skeleton{padding:18px}
  .skeleton__line{height:14px; background:#0f1a2d; border-radius:8px; margin-bottom:10px}
  .skeleton__line.is-short{width:50%}
  
  /* ------- Footer ------- */
  .footer{border-top:1px solid var(--line); margin-top:28px; color:var(--muted); padding:18px 0}