:root{--bg:#ffffff;--fg:#0f172a;--muted:#475569;--card:#ffffff;--border:#e2e8f0}
:root[data-theme="dark"]{--bg:#0b1220;--fg:#e5e7eb;--muted:#cbd5e1;--card:#0f172a;--border:#1f2937}
html,body{background:var(--bg);color:var(--fg);}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:.75rem;border:1px solid var(--border);background:#f8fafc;color:#0f172a;font-weight:600}
.btn:hover{transform:translateY(-1px);}
.drawer{position:fixed;top:0;right:-420px;width:360px;max-width:90vw;height:100vh;background:var(--card);border-left:1px solid var(--border);transition:right .25s ease;z-index:50;padding:1rem;overflow:auto}
.drawer.open{right:0}
.drawer header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.stepper{display:flex;gap:.5rem}
.stepper .step{flex:1;height:6px;background:var(--border);border-radius:9999px;overflow:hidden}
.stepper .step[data-active="true"]{background:linear-gradient(90deg,#22c55e,#06b6d4)}
img{max-width:100%;height:auto}