:root { --bg:#f8fafc; --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --card:#ffffff;
  --accent:#dc2626; --accent2:#059669; --accent3:#2563eb; --accent4:#7c3aed; }
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans',Ubuntu,sans-serif;background:var(--bg);color:var(--text);}
.container{max-width:1160px;margin:0 auto;padding:20px}
header{background:#fff;border-bottom:1px solid var(--line)}
footer{background:#fff;border-top:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo{font-weight:800}
.logo em{color:var(--accent);font-style:normal}
.hero{padding:28px 0}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1.1fr .9fr}
@media (max-width: 880px){.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--accent);color:#fff;text-decoration:none;border:none;cursor:pointer}
.badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:9999px;background:#fee2e2}
h1,h2,h3{margin:0 0 10px}
.section{margin:10px 0}
.input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
small.muted{color:var(--muted)}
.kv{height:220px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#0f172a)}
.table{width:100%;border-collapse:collapse}
.table td,.table th{padding:8px;border:1px solid var(--line);text-align:left}
.footer-cols{display:grid;gap:16px}
@media (min-width:820px){.footer-cols{grid-template-columns:2fr 1fr 1fr}}
.theme-2 .btn{background:var(--accent2)}
.theme-3 .btn{background:var(--accent3)}
.theme-4 .btn{background:var(--accent4)}