:root {
            --a7m: 'Inter', system-ui, -apple-system, sans-serif;
            --b8n: 'JetBrains Mono', monospace;
            --c9o: 6px;
            --d0p: 14px;
            --e1q: 24px;
            --f2r: #0f172a;
            --g3s: #475569;
            --h4t: #2563eb;
            --i5u: #10b981;
            --j6v: #f59e0b;
            --k7w: #e2e8f0;
            --l8x: #ffffff;
            --m9y: #f8fafc;
            --n0z: 0 4px 20px rgba(0,0,0,0.04);
            --o1a: 440px;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:var(--a7m); background:var(--m9y); min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; color:var(--f2r); }
        .dp { text-align:center; margin-bottom:1.4rem; }
        .db { display:inline-flex; align-items:center; gap:0.5rem; background:var(--l8x); padding:0.3rem 1.2rem; border-radius:20px; font-size:0.68rem; font-weight:500; color:var(--g3s); font-family:var(--b8n); box-shadow:0 1px 3px rgba(0,0,0,0.03); width:auto; }
        .db .dbd { width:5px; height:5px; border-radius:50%; background:var(--i5u); animation:blk 2s infinite; }
        @keyframes blk { 0%,100%{opacity:1} 50%{opacity:0.3} }
        .card { max-width:var(--o1a); width:100%; background:var(--l8x); border-radius:var(--e1q); padding:28px 24px 24px; box-shadow:var(--n0z); border:1px solid var(--k7w); display:flex; flex-direction:column; align-items:stretch; }
        .logo-wrap { display:flex; justify-content:center; margin-bottom:12px; }
        .logo-sq { width:64px; height:64px; background:#dbeafe; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--h4t); }
        .brand { text-align:center; margin-bottom:4px; }
        .brand .bn { font-size:1.4rem; font-weight:700; color:var(--f2r); letter-spacing:-0.3px; }
        .brand .bs { font-size:0.65rem; color:var(--g3s); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; margin-top:2px; }
        .dc { font-size:0.88rem; color:var(--g3s); line-height:1.5; margin-bottom:1.5rem; text-align:left; }
        .vb { display:flex;align-items:center;gap:14px;border:2px solid var(--k7w);border-radius:var(--d0p);padding:14px 18px;cursor:pointer;background:var(--l8x);transition:0.15s;width:100%; }
        .vb:hover { border-color:var(--h4t);background:#f8faff;box-shadow:0 6px 16px rgba(37,99,235,0.06);transform:translateY(-1px); }
        .vb.ld { pointer-events:none;border-color:var(--j6v);background:#fffbeb; }
        .vb.dn { pointer-events:none;border-color:var(--i5u);background:#f0fdf4; }
        .ck { width:34px;height:34px;border:2px solid #cbd5e1;border-radius:var(--c9o);background:var(--l8x);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:border-color 0.2s,background 0.2s; }
        .vb:hover .ck { border-color:var(--h4t); }
        .vb.ld .ck { border-color:var(--j6v);background:#fef9c3; }
        .vb.dn .ck { background:var(--h4t);border-color:var(--h4t); }
        .ck .tk { display:none;width:14px;height:8px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg); }
        .vb.dn .ck .tk { display:block;animation:tkp 0.2s; }
        @keyframes tkp { 0%{transform:rotate(-45deg) scale(0)} 100%{transform:rotate(-45deg) scale(1)} }
        .ck .sp { display:none;width:16px;height:16px;border:2.5px solid #fde68a;border-top-color:var(--j6v);border-radius:50%;animation:spn 0.7s linear infinite;position:absolute; }
        .vb.ld .ck .sp { display:block; }
        @keyframes spn { to{transform:rotate(360deg)} }
        .msg { flex:1;text-align:left; }
        .ml { font-size:1rem;font-weight:600;display:block;white-space:nowrap; }
        .vb.dn .ml { color:#065f46; }
        .mh { font-size:0.65rem;color:var(--g3s);margin-top:4px;display:block;line-height:1.3; }
        .vb.dn .mh { color:var(--i5u); }
        .sw { overflow:hidden;max-height:0;transition:max-height 0.45s ease,opacity 0.3s,margin-top 0.2s;margin-top:0;opacity:0;width:100%; }
        .sw.op { max-height:600px;margin-top:20px;opacity:1; }
        .sc { background:var(--l8x);border-radius:var(--d0p);padding:20px 20px 16px;border:1px solid var(--k7w); }
        .sh { font-size:1rem;font-weight:700;color:var(--f2r);margin-bottom:16px;text-align:left; }
        .sl { display:flex;flex-direction:column;gap:14px;margin-bottom:20px; }
        .sr { display:flex;align-items:flex-start;gap:10px;font-size:0.92rem;color:var(--f2r);line-height:1.5; }
        .sn { width:26px;height:26px;background:#f1f5f9;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--h4t);flex-shrink:0;margin-top:2px; }
        .st { display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
        .ky { background:#f3f4f6; border:1px solid #d1d5db; border-radius:4px; padding:2px 8px; font-family:var(--b8n); font-size:0.85rem; font-weight:600; display:inline-flex; align-items:center; height:24px; line-height:24px; white-space:nowrap; color:#000; }
        .bw { text-align:right; }
        .btn { background:transparent; color:var(--f2r); border:1.5px solid #cbd5e1; border-radius:20px; padding:8px 24px; font-size:0.85rem; font-weight:600; cursor:pointer; display:inline-block; transition:0.2s; }
        .btn:hover { background:#f1f5f9; border-color:#a0aec0; }
        .ft { display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--k7w);font-size:0.7rem;width:100%; }
        .ft .fy { color:var(--g3s);font-family:var(--b8n); }
        .ft .fl { display:flex;gap:16px; }
        .ft .fl a { color:var(--g3s);text-decoration:none;font-weight:500; }
        .ft .fl a:hover { color:var(--h4t); }
        .hf { position:absolute;opacity:0;pointer-events:none;width:0;height:0; }