:root {
--bg: #0b0b0c;
--fg: #f2f2f3;
--muted: #9aa0a6;
--primary: #22c55e;
--secondary: #303134;
--danger: #ef4444;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif; }
.container { padding: 16px; max-width: 720px; margin: 0 auto; }
.header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.btn { appearance: none; border: none; border-radius: 14px; padding: 14px 16px; font-weight: 600; background: var(--secondary); color: var(--fg); }
.btn:hover { filter: brightness(1.05); }
.btn-primary { background: var(--primary); color: #041307; }
.btn-secondary { background: var(--secondary); }
.btn-text { background: transparent; color: var(--fg); padding: 8px; }
.qr-box { width: 100%; aspect-ratio: 3/4; max-height: 70vh; border-radius: 18px; overflow: hidden; background: #111; }
.muted { color: var(--muted); font-size: 0.95rem; }
.hidden { display: none; }
.card { background: #151516; border: 1px solid #242427; border-radius: 14px; padding: 12px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.break { word-break: break-all; }
.countdown { font-size: 1.2rem; font-weight: 700; }
	.input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #242427; background: #151516; color: var(--fg); margin: 8px 0 12px; }