:root{
  --bg:#0b1220;
  --card:#0b1a33;
  --muted:#9aa7bd;
  --text:#e7edf6;
  --primary:#1d4ed8;
  --primary-2:#2563eb;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 16px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% 10%, #0f234a 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.kiosk{ min-height:100%; display:flex; flex-direction:column; }

.topbar{
  padding:14px 22px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(2,6,23,.86), rgba(2,6,23,.55));
}
.brand.corporate{ display:flex; align-items:center; gap:18px; }
.brand-banner{ height:56px; }
.product-name{ font-weight:700; font-size:18px; }
.product-sub{ font-size:12px; color:var(--muted); }

.stage{ flex:1; display:grid; grid-template-columns:1fr auto; gap:18px; padding:22px; }
.card{
  max-width:920px; margin:0 auto; width:100%;
  background: linear-gradient(180deg, rgba(11,26,51,.92), rgba(2,6,23,.72));
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.stepper{ display:flex; gap:10px; padding:14px; }
.step{ flex:1; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:14px; font-size:13px; }
.step.active{ background: rgba(29,78,216,.12); }
.step.done{ background: rgba(34,197,94,.08); }

.content{
  padding:22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.actions{
  padding: 0 22px 22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content: center;
}

.btn{ border:0; border-radius:14px; padding:12px 16px; font-weight:600; cursor:pointer; min-width:160px; }
.btn.primary{ background: linear-gradient(180deg, var(--primary-2), var(--primary)); color:#fff; }
.btn.secondary{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.18); }

.ticket{
  max-width:360px; margin:10px auto 0; padding:14px 12px;
  background:#fff; color:#000; border:1px dashed #000; border-radius:6px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ticket-line{ font-size:12px; margin:4px 0; }
.ticket-hr{ height:1px; background:#000; margin:8px 0; }
.ticket-small{ font-size:11px; text-align:center; }

.footer{ text-align:center; font-size:12px; color:var(--muted); padding:10px; }

@media print{
  .topbar,.footer,.demo-panel,.stepper,.actions{ display:none !important; }
  .card{ box-shadow:none !important; background:#fff !important; }
}

.icon-big{
  width:84px;
  height:84px;
  display:block;
  margin: 6px 0 14px;
  opacity:.95;
}
.icon-inline{
  width:16px;
  height:16px;
  vertical-align: -3px;
  margin-right:8px;
  opacity:.9;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
}