:root{
      --bg:#0b0f14;
      --text:#e6edf3;
      --muted:#9aa4af;
      --tile:#121a26;
      --tile-border:#253044;
      --good:#22c55e;
      --good-border:#1a8f43;
      --btn:#1f2a3a;
      --btn-border:#334155;
      --btn-hover:#243247;
      --danger:#f97316;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      min-height:100vh;
      display:grid;
      place-items:center;
      background:radial-gradient(1200px 800px at 20% 10%, #111b2b 0%, var(--bg) 55%);
      color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    }
    .wrap{
      width:min(520px, 92vw);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      padding:26px 22px 22px;
      box-shadow:0 18px 60px rgba(0,0,0,.45);
    }
    h1{ margin:0 0 6px; font-size:18px; letter-spacing:.6px; font-weight:700; }
    p{ margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.4; }
    .row{
      display:grid;
      grid-template-columns:repeat(6, 1fr);
      gap:10px;
      margin:16px 0 18px;
    }
    .tile{
      height:62px;
      border-radius:14px;
      background:var(--tile);
      border:1px solid var(--tile-border);
      display:grid;
      place-items:center;
      font-size:26px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(230,237,243,.9);
      user-select:none;
    }
    .tile.good{
      background:rgba(34,197,94,.18);
      border-color:var(--good-border);
      color:var(--good);
      box-shadow:0 0 0 1px rgba(34,197,94,.12) inset, 0 0 24px rgba(34,197,94,.10);
    }
    .controls{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .btn{
      height:48px;
      border-radius:14px;
      border:1px solid var(--btn-border);
      background:var(--btn);
      color:var(--text);
      font-weight:700;
      letter-spacing:.2px;
      cursor:pointer;
      transition:transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    }
    .btn:hover{ background:var(--btn-hover); border-color:#3b4a63; }
    .btn:active{ transform:translateY(1px); }
    .btn[disabled]{ opacity:.6; cursor:not-allowed; }
    .autobox{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:12px;
    }
    .count{
      font-variant-numeric:tabular-nums;
      color:var(--text);
      font-weight:700;
    }
    .status{
      margin-top:12px;
      font-size:12px;
      color:var(--muted);
      display:flex;
      justify-content:space-between;
      gap:10px;
    }
    .status .hit{ color:var(--good); font-weight:800; }
    code{
      background:rgba(255,255,255,.06);
      padding:2px 6px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      color:#cbd5e1;
    }