:root{
  --bg:#0b1220;
  --card:rgba(18,27,51,.8);
  --soft:#1a2544;
  --text:#e6ecff;
  --muted:#9aa8c7;
  --accent:#7cc0ff;
  --danger:#ff8aa1;
  --radius:16px;
  --ring:0 0 0 2px rgba(124,192,255,.35);
  --transition:0.2s ease-in-out;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(circle at 10% 20%,#1a2a55 0%,#0b1220 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

input,select,button,.btn{
  font:inherit;
  color:var(--text);
  background:#0f1730;
  border:1px solid #1d2a52;
  border-radius:12px;
  padding:12px 14px;
  transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
    a{color:var(--accent); text-decoration:none}
    .container{max-width:900px; margin:0 auto; padding:40px 20px; padding-bottom:40px;}
    header{display:flex; align-items:center; gap:12px; margin:6px 0 18px}
    .logo{width:40px; height:40px; border-radius:12px; background:
      radial-gradient(120% 120% at 30% 30%, #7cc0ff 0%, #5aa6ff 45%, #3656ff 100%);
      box-shadow: 0 8px 30px rgba(124,192,255,.25); flex:0 0 40px}
    h1{font-size:1.25rem; margin:0}
    h2{font-size:1.25rem; margin:0}
    .tag{font-size:.75rem; color:var(--muted)}
      .card{
        background:rgba(255,255,255,.03);
        border:1px solid rgba(255,255,255,.08);
        border-radius:var(--radius);
        padding:16px;
        box-shadow:0 10px 30px rgba(0,0,0,.25);
        backdrop-filter:blur(12px);
        transition:box-shadow var(--transition),transform var(--transition);
      }
      .card:hover{box-shadow:0 12px 40px rgba(0,0,0,.45);transform:translateY(-2px);}
    .stack{display:flex; flex-direction:column; gap:10px}
    .row{display:flex; gap:10px; flex-wrap:wrap}
    label{font-size:.8rem; color:var(--muted)}
    input:focus, select:focus{outline:none; box-shadow:var(--ring); border-color:#294782; background:#0f1a3a}
    button, .btn{background:#1a2a55; cursor:pointer; transition:background var(--transition),transform var(--transition)}
    button:hover,.btn:hover{background:#213368;transform:translateY(-1px)}
    button:active,.btn:active{transform:translateY(0)}
    .btn-ghost{background:transparent; border-color:#253360}
    .btn-accent{background:#2a447a; border-color:#31549a}
    .btn-danger{background:#53263a; border-color:#7a2a46}
    .pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#101a34; border:1px solid #24325c; color:#bcd0ff; font-size:.8rem}
    .muted{color:var(--muted)}
    .result{border-radius:14px; border:1px dashed #2a3b70; padding:12px}
    table{width:100%; border-collapse:collapse; font-size:.95rem}
    th, td{text-align:left; padding:8px 10px}
    thead th{color:#cdd8ff; font-weight:600}
      tbody tr{border-top:1px solid rgba(255,255,255,.06)}
      tbody tr:hover{background:rgba(255,255,255,.04)}
    footer{position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; padding:10px}
  .toast{
    position:fixed; left:50%; transform:translateX(-50%); bottom:76px; background:#0e1831; border:1px solid #24325c;
    padding:10px 14px; border-radius:12px; font-size:.9rem; box-shadow:0 8px 20px rgba(255, 255, 255, 0.4)
  }

  .menu{position:relative;}
  .menu h1{cursor:pointer;}
  .dropdown{position:absolute; top:100%; left:0; background:#0f1730; border:1px solid #24325c; border-radius:12px; padding:6px 0; box-shadow:0 8px 20px rgba(0,0,0,.4); display:flex; flex-direction:column; min-width:180px; z-index:10;}
  .dropdown a{padding:8px 16px; color:var(--text); text-decoration:none;}
  .dropdown a:hover{background:#213368;}
  .hidden{display:none;}

  select::-webkit-scrollbar {
    display: none;
  }
    @media (min-width:720px){ h1{font-size:1.35rem} }