*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#root{flex-direction:column;min-height:100dvh;display:flex}:root{--brand:#6f1def;--brand-dark:#5a10d4;--bg:#f5f5f5;--card-bg:#fff;--text:#1a1a1a;--text-muted:#666;--radius:12px;--shadow:0 2px 12px #00000014}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px}.app{flex-direction:column;min-height:100dvh;display:flex}.app-header{background:var(--brand);color:#fff;text-align:center;padding:1rem}.app-header h1{font-size:1.4rem;font-weight:700}.app-main{flex-direction:column;flex:1;gap:1rem;width:100%;max-width:600px;margin:0 auto;padding:1.25rem 1rem;display:flex}.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:.75rem;padding:1.5rem;display:flex}.input-label{color:var(--text);font-size:.95rem;font-weight:600}.staff-input{text-align:center;letter-spacing:.5rem;border:2px solid #ddd;border-radius:8px;outline:none;width:100%;padding:.75rem 1rem;font-size:3rem;font-weight:700;transition:border-color .2s}.staff-input:focus{border-color:var(--brand)}.field{flex-direction:column;gap:.4rem;display:flex}.name-input{text-align:center;border:2px solid #ddd;border-radius:8px;outline:none;width:100%;padding:.65rem 1rem;font-size:1.5rem;font-weight:600;transition:border-color .2s}.name-input:focus{border-color:var(--brand)}.hint{color:var(--text-muted);font-size:.82rem}.btn-generate{background:var(--brand);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;padding:.85rem;font-size:1rem;font-weight:600;transition:background .2s}.btn-generate:hover:not(:disabled){background:var(--brand-dark)}.btn-generate:disabled{opacity:.6;cursor:not-allowed}.error{color:#d32f2f;text-align:center;font-size:.9rem}.qr-card{align-items:center}.qr-title{color:var(--text);font-size:1.1rem;font-weight:700}.staff-info{color:var(--brand);text-align:center;font-size:1.1rem;font-weight:600}.qr-box{flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:270px;display:flex}.qr-placeholder{color:var(--text-muted);text-align:center;font-size:.9rem;line-height:1.6}.countdown{color:var(--text-muted);margin:0;font-size:.85rem}.modal-backdrop{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal{border-radius:var(--radius);text-align:center;background:#fff;flex-direction:column;gap:1rem;width:100%;max-width:360px;padding:1.75rem 1.5rem;display:flex}.modal-title{color:#d32f2f;margin:0;font-size:1.2rem;font-weight:700}.modal-body{color:var(--text);margin:0;font-size:1rem;line-height:1.6}