:root{
      --bg:#0b1220;
      --panel:#0f1a33;
      --panel2:#0c1730;
      --text:#e8eefc;
      --muted:#b8c4e6;
      --line:rgba(232,238,252,.14);
      --good:#2fbf71;
      --warn:#f5b301;
      --bad:#ff4d4d;
      --info:#4da3ff;
      --shadow: 0 18px 60px rgba(0,0,0,.35);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 20% 10%, rgba(77,163,255,.18), transparent 60%),
                  radial-gradient(1100px 900px at 90% 20%, rgba(47,191,113,.12), transparent 55%),
                  radial-gradient(900px 700px at 50% 100%, rgba(245,179,1,.10), transparent 55%),
                  var(--bg);
      color:var(--text);
    }

    a{color:inherit}

    .wrap{max-width:1100px;margin:0 auto;padding:28px 18px 60px}

    .topbar{
      display:flex;gap:14px;align-items:center;justify-content:space-between;
      padding:18px 18px;background:rgba(15,26,51,.72);
      border:1px solid var(--line);border-radius:var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }

    .brand{display:flex;gap:12px;align-items:center}
    .logo{
      width:44px;height:44px;border-radius:14px;
      background: linear-gradient(135deg, rgba(77,163,255,.95), rgba(47,191,113,.85));
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
      display:flex;align-items:center;justify-content:center;
      font-weight:800;letter-spacing:.2px;
    }

    .titleblock{line-height:1.15}
    .titleblock h1{margin:0;font-size:18px}
    .titleblock p{margin:4px 0 0;color:var(--muted);font-size:13px}

    .pillrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:9px 11px;border-radius:999px;
      background:rgba(232,238,252,.06);
      border:1px solid var(--line);
      font-size:12px;color:var(--muted);
      user-select:none;
    }

    .tabs{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
    .tabbtn{
      appearance:none;border:1px solid var(--line);
      background:rgba(15,26,51,.55);color:var(--text);
      padding:10px 12px;border-radius:999px;cursor:pointer;
      font-weight:650;font-size:13px;
      transition: transform .06s ease, background .15s ease;
    }
    .tabbtn:active{transform: translateY(1px)}
    .tabbtn[aria-selected="true"]{background:rgba(77,163,255,.18);border-color:rgba(77,163,255,.35)}

    .grid{margin-top:16px;display:grid;grid-template-columns: 1.35fr .65fr;gap:16px}
    @media (max-width: 900px){
      .grid{grid-template-columns:1fr}
      .pillrow{justify-content:flex-start}
    }

    .card{
      background:rgba(15,26,51,.68);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .cardhead{padding:16px 16px 0}
    .cardhead h2{margin:0;font-size:16px}
    .cardhead p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

    .cardbody{padding:16px}

    .notice{
      border:1px solid rgba(232,238,252,.16);
      background:rgba(12,23,48,.65);
      padding:12px 12px;border-radius:14px;
      color:var(--muted);font-size:12.5px;line-height:1.45
    }

    .notice strong{color:var(--text)}

    .progress{margin-top:14px}
    .progressbar{
      height:10px;border-radius:999px;
      background:rgba(232,238,252,.08);
      border:1px solid var(--line);
      overflow:hidden
    }
    .progressbar > div{height:100%;width:0%;background:rgba(77,163,255,.70)}
    .progressmeta{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:12px}

    .qcard{
      margin-top:14px;padding:14px;border-radius:16px;
      border:1px solid rgba(232,238,252,.14);
      background:rgba(12,23,48,.55);
    }

    .qtitle{font-weight:750;font-size:15px;line-height:1.35}
    .qhelp{margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.45}

    .choices{display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:10px;margin-top:12px}
    @media (max-width: 520px){
      .choices{grid-template-columns:1fr}
    }

    .choice{
      appearance:none;border:1px solid rgba(232,238,252,.16);
      background:rgba(232,238,252,.06);
      color:var(--text);
      padding:12px;border-radius:14px;cursor:pointer;
      text-align:left;
      transition: background .15s ease, border-color .15s ease, transform .06s ease;
      min-height:46px;
    }

    .choice:hover{background:rgba(232,238,252,.09)}
    .choice:active{transform:translateY(1px)}

    .choice small{display:block;color:var(--muted);margin-top:3px;line-height:1.25}

    .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:flex-start}

    .field{
      flex:1 1 200px;
      border:1px solid rgba(232,238,252,.16);
      background:rgba(232,238,252,.06);
      border-radius:14px;
      padding:10px 10px;
    }

    label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
    input, select, textarea{
      width:100%;background:transparent;border:0;outline:none;
      color:var(--text);font-size:14px
    }

    textarea{min-height:72px;resize:vertical}

    .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}

    .btn{
      appearance:none;border:1px solid rgba(232,238,252,.16);
      background:rgba(232,238,252,.06);
      color:var(--text);
      padding:10px 12px;border-radius:14px;cursor:pointer;
      font-weight:700;font-size:13px;
      transition: transform .06s ease, background .15s ease;
    }
    .btn:hover{background:rgba(232,238,252,.09)}
    .btn:active{transform:translateY(1px)}

    .btn.primary{background:rgba(77,163,255,.18);border-color:rgba(77,163,255,.35)}
    .btn.danger{background:rgba(255,77,77,.14);border-color:rgba(255,77,77,.35)}

    .badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 10px;border-radius:999px;
      border:1px solid rgba(232,238,252,.16);
      background:rgba(232,238,252,.06);
      font-size:12px;font-weight:750
    }

    .badge.good{background:rgba(47,191,113,.12);border-color:rgba(47,191,113,.28)}
    .badge.warn{background:rgba(245,179,1,.12);border-color:rgba(245,179,1,.28)}
    .badge.bad{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.28)}

    .result{
      margin-top:14px;padding:14px;border-radius:16px;
      border:1px solid rgba(232,238,252,.16);
      background:rgba(12,23,48,.55);
    }

    .result h3{margin:0;font-size:15px}
    .result p{margin:8px 0 0;color:var(--muted);line-height:1.45;font-size:13px}

    .hr{height:1px;background:var(--line);margin:14px 0}

    .kvs{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:10px;margin-top:12px}
    @media (max-width: 520px){.kvs{grid-template-columns:1fr}}

    .kv{
      padding:10px;border-radius:14px;border:1px solid rgba(232,238,252,.14);
      background:rgba(232,238,252,.05);
    }
    .kv div:first-child{color:var(--muted);font-size:12px}
    .kv div:last-child{font-weight:750;margin-top:4px}

    table{width:100%;border-collapse:separate;border-spacing:0}
    th,td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top}
    th{color:var(--muted);font-size:12px;text-align:left;font-weight:800}
    td{font-size:13px}
    tr:hover td{background:rgba(232,238,252,.03)}

    .status{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 9px;border-radius:999px;
      border:1px solid rgba(232,238,252,.16);
      background:rgba(232,238,252,.05);
      font-size:12px;font-weight:800
    }

    .dot{width:8px;height:8px;border-radius:999px;background:rgba(232,238,252,.35)}
    .dot.good{background:var(--good)}
    .dot.warn{background:var(--warn)}
    .dot.bad{background:var(--bad)}

    .footer{margin-top:20px;color:rgba(232,238,252,.55);font-size:12px;line-height:1.45}

    .sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

    .hidden{display:none !important}

    .toast{
      position:fixed;left:16px;bottom:16px;max-width:520px;
      background:rgba(15,26,51,.92);
      border:1px solid rgba(232,238,252,.16);
      border-radius:16px;
      padding:12px 12px;
      box-shadow: var(--shadow);
      color:var(--text);
      display:none;
      z-index:9999;
      backdrop-filter: blur(10px);
    }
    .toast p{margin:0;color:var(--muted);font-size:13px;line-height:1.35}
    .toast strong{color:var(--text)}

    .kbd{
      display:inline-flex;align-items:center;justify-content:center;
      min-width:22px;height:22px;padding:0 7px;
      border-radius:8px;
      border:1px solid rgba(232,238,252,.18);
      background:rgba(232,238,252,.06);
      font-size:12px;color:var(--muted);
      margin-left:6px
    }

    .split{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}

    .tiny{font-size:12px;color:var(--muted);line-height:1.45}

    .checkgrid{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:10px;margin-top:10px}
    @media (max-width: 520px){.checkgrid{grid-template-columns:1fr}}

    .chk{
      border:1px solid rgba(232,238,252,.16);
      background:rgba(232,238,252,.06);
      border-radius:14px;
      padding:10px;
      display:flex;gap:10px;align-items:flex-start;
      cursor:pointer;
      user-select:none;
    }

    .chk input{width:auto;margin-top:2px}

    .panelhint{margin-top:10px}

    .warnline{border-left:4px solid rgba(245,179,1,.55);padding-left:10px}
    .badline{border-left:4px solid rgba(255,77,77,.65);padding-left:10px}