:root{--bg:#f5f6f8;--card:#fff;--text:#1c1f26;--muted:#6b7280;--accent:#2563eb;--ok:#15803d;--bad:#b91c1c;--warn:#b45309;--line:#e5e7eb}
@media (prefers-color-scheme:dark){:root{--bg:#111318;--card:#1b1e26;--text:#e8eaf0;--muted:#9aa3b2;--accent:#60a5fa;--ok:#4ade80;--bad:#f87171;--warn:#fbbf24;--line:#2b303b}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:640px;margin:0 auto;padding:16px}
h1{font-size:1.5rem;margin:8px 0 4px}
h2{font-size:1.1rem;margin:20px 0 8px}
p.sub{color:var(--muted);margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0}
.pkg{display:flex;align-items:center;gap:12px;cursor:pointer}
.pkg input{width:20px;height:20px;flex:none}
.pkg .name{font-weight:600}
.pkg .price{margin-left:auto;font-weight:700}
.pkg small{color:var(--muted);display:block}
.pkg.out{opacity:.5;cursor:not-allowed}
label.f{display:block;margin:12px 0 4px;font-weight:600}
input[type=text],input[type=password],select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
textarea{min-height:120px;font-family:ui-monospace,monospace}
button,.btn{display:inline-block;width:100%;padding:13px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
button.sec{background:transparent;color:var(--text);border:1px solid var(--line)}
button.bad{background:var(--bad)}
button.ok{background:var(--ok)}
.row{display:flex;gap:8px}
.row>*{flex:1}
.msg{padding:12px;border-radius:10px;margin:10px 0;border:1px solid var(--line)}
.msg.err{color:var(--bad);border-color:var(--bad)}
.msg.good{color:var(--ok);border-color:var(--ok)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.85rem;font-weight:700;border:1px solid var(--line)}
.badge.pending{color:var(--warn)}.badge.claimed{color:var(--accent)}.badge.approved{color:var(--ok)}.badge.rejected{color:var(--bad)}
.code{font:700 1.8rem ui-monospace,monospace;letter-spacing:.08em;text-align:center;padding:16px;border:2px dashed var(--accent);border-radius:12px;margin:12px 0;user-select:all;word-break:break-all}
.muted{color:var(--muted)}
.meta{font-size:.9rem;color:var(--muted)}
.stock{display:flex;gap:8px;flex-wrap:wrap}
.stock span{flex:1;min-width:90px;text-align:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.stock b{display:block;font-size:1.3rem}

/* WIFI-THEME */
:root{--bg:#06101f;--card:#0c1a2e;--text:#e8f3ff;--muted:#8ba3c0;--accent:#3ee0ff;--line:#1a2d4a;--ok:#5eead4}
body{background:radial-gradient(120% 60% at 50% -10%,#0d2a4a 0%,var(--bg) 60%) fixed,var(--bg)}
h1.brand{display:flex;align-items:center;gap:10px;font-size:1.7rem;letter-spacing:-.02em;margin:10px 0 4px}
h1.brand svg{width:34px;height:34px;flex:none;filter:drop-shadow(0 0 6px rgba(62,224,255,.55))}
.pill{display:inline-block;margin:0 0 14px;padding:3px 12px;border:1px solid var(--line);border-radius:99px;font-size:.85rem;color:var(--accent);background:rgba(62,224,255,.07)}
.pkg{position:relative;padding:16px 14px;transition:border-color .15s,box-shadow .15s,background .15s}
.pkg::before{content:"";width:34px;height:34px;flex:none;background-position:center;background-size:contain;background-repeat:no-repeat;order:-1}
.pkg:nth-of-type(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8.5 16a5.5 5.5 0 0 1 7 0' opacity='1'/%3E%3Cpath d='M5 12.5a10.5 10.5 0 0 1 14 0' opacity='0.22'/%3E%3Cpath d='M2 9a15 15 0 0 1 20 0' opacity='0.22'/%3E%3Ccircle cx='12' cy='19.6' r='1.6' fill='%233ee0ff' stroke='none'/%3E%3C/svg%3E")}
.pkg:nth-of-type(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8.5 16a5.5 5.5 0 0 1 7 0' opacity='1'/%3E%3Cpath d='M5 12.5a10.5 10.5 0 0 1 14 0' opacity='1'/%3E%3Cpath d='M2 9a15 15 0 0 1 20 0' opacity='0.22'/%3E%3Ccircle cx='12' cy='19.6' r='1.6' fill='%233ee0ff' stroke='none'/%3E%3C/svg%3E")}
.pkg:nth-of-type(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8.5 16a5.5 5.5 0 0 1 7 0' opacity='1'/%3E%3Cpath d='M5 12.5a10.5 10.5 0 0 1 14 0' opacity='1'/%3E%3Cpath d='M2 9a15 15 0 0 1 20 0' opacity='1'/%3E%3Ccircle cx='12' cy='19.6' r='1.6' fill='%233ee0ff' stroke='none'/%3E%3C/svg%3E")}
.pkg input{accent-color:var(--accent);order:3}
.pkg>span:nth-of-type(1){order:1}
.pkg .price{order:2;color:var(--accent);font-size:1.05rem}
.pkg:has(input:checked){border-color:var(--accent);background:linear-gradient(135deg,rgba(62,224,255,.14),var(--card) 70%);box-shadow:0 0 0 1px var(--accent),0 0 22px rgba(62,224,255,.22)}
.pkg.out::before{filter:grayscale(1)}
input[type=text]:focus,input[type=password]:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,224,255,.2)}
button,.btn{background:linear-gradient(90deg,#22d3ee,#38bdf8);color:#04121f}
button.sec{background:transparent;color:var(--text)}
button.bad{background:var(--bad);color:#fff}
button.ok{background:var(--ok);color:#04121f}
.code{border-color:var(--accent);color:var(--accent);text-shadow:0 0 12px rgba(62,224,255,.5)}