/* voucher.rrte — assets/style.css */
:root{
  --bg:#0f172a; --card:#0b1220; --text:#e2e8f0; --muted:#cbd5e1; --border:#1f2a44;
  --primary:#1e66f5; --primary-hover:#1b57d0; --secondary:#64748b; --secondary-hover:#4b5563;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px; line-height:1.45;
}

.container{max-width:1100px; margin:0 auto; padding:16px}
.topbar{border-bottom:1px solid var(--border); background:#0c1324; position:sticky; top:0; z-index:10}
.topbar__inner{display:flex; align-items:center; gap:16px}
.brand img{height:48px}
.logo-fallback{display:inline-flex; align-items:center; justify-content:center; width:120px; height:48px; background:#12203a; color:#fff; font-weight:700; border-radius:8px}
.titles h1{margin:0; font-size:24px; letter-spacing:1px}
.titles h2{margin:2px 0 0; font-size:14px; color:var(--muted); font-weight:500}

.layout{display:grid; grid-template-columns: 1fr 320px; gap:16px; margin-top:16px}
@media (max-width:980px){ .layout{grid-template-columns: 1fr;} .sidebar{order:2} }

.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px}
.card__header{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:14px}
.muted{color:var(--muted)}

.dots{display:flex; gap:8px; list-style:none; padding:0; margin:0}
.dots li{width:28px; height:28px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; font-size:14px; color:var(--muted); background:#0c162a}
.dots li.active{background:var(--primary); border-color:var(--primary); color:#fff}

.step{display:none}
.step.active{display:block}
.fieldset{border:1px solid var(--border); border-radius:10px; padding:12px; margin:12px 0}
.fieldset legend{padding:0 8px; color:var(--muted)}

.lbl{display:block; margin:8px 0 6px}
.input, select, textarea{
  width:100%; background:#0c162a; border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:10px 12px; outline:none;
}
.input:focus, select:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 2px rgba(30,102,245,.15)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.col-span-2{grid-column: span 2}
.col-span-3{grid-column: span 3}
@media (max-width:980px){ .grid-2,.grid-3{grid-template-columns:1fr} .col-span-2,.col-span-3{grid-column:auto} }

.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  background:#0c162a; color:var(--text); border:1px solid var(--border);
  padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none;
}
.pill:hover{border-color:var(--secondary)}
.pill.active{background:var(--primary); border-color:var(--primary); color:#fff}

.actions{display:flex; justify-content:space-between; gap:12px; margin-top:14px}
.btn{border:1px solid transparent; padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:600}
.btn.primary{background:var(--primary); color:#fff}
.btn.primary:hover{background:var(--primary-hover)}
.btn.secondary{background:#1b243b; color:#fff; border-color:var(--secondary)}
.btn.secondary:hover{background:var(--secondary-hover)}

.hidden{display:none !important}

.accordion details{border-bottom:1px solid var(--border); padding:8px 0}
.accordion summary{cursor:pointer; list-style:none; font-weight:600}
.accordion ul{margin:8px 0 0 16px}
.accordion li{margin:4px 0}

.summary{background:#0c162a; border:1px dashed var(--border); border-radius:10px; padding:12px; white-space:pre-wrap}

.footer{border-top:1px solid var(--border); margin-top:16px; padding:16px 0; color:var(--muted); text-align:center}
.footer a{color:var(--text)}