:root{
  --bg:#090a0f; --card:#0f1016; --muted:#9aa3af; --text:#e5e7eb;
  --red:#ef4444; --red2:#b91c1c; --border:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:var(--bg);font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}

/* Fixed, non-moving background (no drifting!) */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1200px 600px at 10% -10%, #ef444410, transparent 50%),
   radial-gradient(800px 500px at 100% 110%, #b91c1c10, transparent 50%),
   repeating-linear-gradient(45deg, #ef444418 0 2px, transparent 2px 60px),
   repeating-linear-gradient(-45deg, #ef444418 0 2px, transparent 2px 60px),
   #090a0f;
  background-blend-mode: screen, screen, normal, normal, normal;
}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);backdrop-filter:blur(10px);background:#0b0c12c0;position:sticky;top:0}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,var(--red),var(--red2));box-shadow:0 10px 25px #0008}
h1{margin:0;font-size:20px}
.sub{margin:0;color:var(--muted);font-size:12px}
.wrap{max-width:1000px;margin:28px auto;padding:0 16px;display:grid;gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 10px 30px #0007}
.card.soft{background:#0c0d12;border-color:#141826}
.hint{color:var(--muted);margin-top:4px}
.tiny{font-size:12px}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pill{background:linear-gradient(145deg,#1a1c25,#10131a);border:1px solid #252a38;color:var(--text);padding:10px 14px;border-radius:999px;cursor:pointer}
.pill:hover{border-color:#2e364a}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:8px}
.field input,.field select{background:#0c0d12;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:12px;outline:none}
.toggles{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.actions{display:flex;gap:10px;margin:10px 0}
button{background:linear-gradient(145deg,var(--red),var(--red2));border:none;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;box-shadow:0 8px 18px #0006,inset 0 1px 0 #fff1}
button.ghost{background:#0c0d12;border:1px solid var(--border);box-shadow:none;color:var(--text)}
.tabs{display:flex;gap:8px;margin:8px 0}
.tab{background:#0c0d12;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
.tab.active{background:#141723}
.code{background:#0a0b10;border:1px solid var(--border);border-radius:12px;padding:12px;max-height:340px;overflow:auto}
.hidden{display:none}
.bullets{margin:0 0 0 18px}
.foot{max-width:1000px;margin:10px auto 30px;padding:0 16px;color:var(--muted)}
/* Pro panel */
.card.pro h2{display:flex;align-items:center;gap:8px}
.ruleList .list{list-style:none;padding:0;margin:8px 0 0}
.ruleList .list li{padding:8px 10px;border:1px dashed #283142;border-radius:10px;margin:6px 0;background:#0d0f15}
/* Toggle switch */
.switch{display:flex;align-items:center;gap:10px}
.switch .label{color:var(--muted);font-size:13px}
.switch input{display:none}
.switch .slider{position:relative;width:46px;height:26px;background:#1a1e2a;border-radius:999px;border:1px solid #2a3142;display:inline-block;cursor:pointer}
.switch .slider::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s ease}
.switch input:checked + .slider{background:linear-gradient(145deg,var(--red),var(--red2))}
.switch input:checked + .slider::after{transform:translateX(20px)}
@media (max-width:800px){.grid{grid-template-columns:1fr}}