:root{--brand:#2563eb;--accent:#14b8a6;--ink:#172033;--soft:#f6f8fb}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#f7f9fc;letter-spacing:0}
.text-brand{color:var(--brand)!important}
.btn{border-radius:8px;font-weight:700}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.hero{background:linear-gradient(135deg,#eef6ff 0%,#ffffff 46%,#edfdf8 100%);min-height:calc(100vh - 74px);display:flex;align-items:center;padding:48px 0}
.hero h1{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;font-weight:900;max-width:920px}
.hero p{font-size:1.15rem;max-width:680px;color:#526071}
.section{padding:64px 0}
.feature-card,.template-card,.form-shell,.success-panel,.admin-panel{background:#fff;border:1px solid #e7edf5;border-radius:8px;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.feature-card{padding:22px;height:100%}
.feature-card i{color:var(--brand);font-size:1.45rem}
.template-card{padding:14px;cursor:pointer;transition:.18s}
.template-card:hover,.template-card.active{border-color:var(--brand);box-shadow:0 12px 28px rgba(37,99,235,.12)}
.template-mini{height:118px;border-radius:8px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;color:#111827;overflow:hidden}
.template-mini .dot{width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid currentColor}
.form-shell{padding:24px}
.step-title{font-size:1.05rem;font-weight:800;margin:0}
.form-control,.form-select{border-radius:8px;min-height:46px}
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.live-preview{position:sticky;top:92px}
.preview-phone{max-width:430px;margin:auto}
.copyable{cursor:pointer}
.qr-img{width:230px;max-width:100%;border-radius:8px;border:1px solid #e5e7eb}
.sticker-preview{width:100%;max-width:560px;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.quick-actions{position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid #e5e7eb;padding:10px}
.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 74px)}
.admin-side{background:#111827;color:#fff;padding:20px}
.admin-side a{display:block;color:#cbd5e1;text-decoration:none;padding:10px 0}
.admin-side a:hover{color:#fff}
@media (max-width:991px){.hero{min-height:auto}.admin-layout{display:block}.admin-side{display:flex;gap:14px;overflow:auto}.live-preview{position:static}.color-row{grid-template-columns:1fr}}