:root{--bg:#0b1020;--card:#151b33;--tx:#e8ecff;--mut:#8f9ac0;--ac:#4ade80;--ac2:#38bdf8;--bd:#263056;--red:#f87171}
[data-theme=light]{--bg:#f4f6fb;--card:#fff;--tx:#141a33;--mut:#5b6486;--bd:#dfe3f0}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--tx);line-height:1.5}
canvas#bg{position:fixed;inset:0;z-index:-1;width:100%;height:100%}
.wrap{max-width:1100px;margin:auto;padding:16px}
nav{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px}
.logo{font-weight:800;font-size:1.2rem;background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;color:transparent}
.card{background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--bd);border-radius:16px;padding:18px;backdrop-filter:blur(8px)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
button,.btn{background:linear-gradient(90deg,var(--ac),var(--ac2));color:#06101f;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
button.sec{background:transparent;color:var(--tx);border:1px solid var(--bd)}button.red{background:var(--red)}
input,select{width:100%;padding:10px;margin:4px 0;border-radius:10px;border:1px solid var(--bd);background:var(--bg);color:var(--tx)}
h1{font-size:clamp(1.8rem,6vw,3.2rem);margin:.3em 0}.mut{color:var(--mut)}.big{font-size:2rem;font-weight:800}
.hero{padding:60px 0 30px;text-align:center}.price{font-size:2.4rem;font-weight:800}.tag{background:var(--ac);color:#06101f;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:700}
.tabs{display:flex;gap:8px;margin-bottom:10px}.tabs .on{outline:2px solid var(--ac)}
table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{padding:8px;border-bottom:1px solid var(--bd);text-align:left}
.in{color:var(--ac)}.out{color:var(--red)}.scroll{overflow-x:auto}