:root{--color-bg: #fafafa;--color-surface: #ffffff;--color-text: #1a1a1a;--color-text-secondary: #555555;--color-text-muted: #888888;--color-text-hint: #aaaaaa;--color-border: #d5d5d5;--color-border-strong: #1a1a1a;--color-border-accent: #666666;--color-error: #555555;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "SF Mono", "Fira Code", "Consolas", monospace;--transition-fast: .15s ease;--transition-normal: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.5;min-height:100dvh}#root{min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:40px 16px 60px}.page{width:100%;max-width:480px;border:2px solid var(--color-border-strong);background:var(--color-surface)}.page-header{border-bottom:2px solid var(--color-border-strong);padding:20px 24px;text-align:center}.page-header h1{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}.page-header .subtitle{font-size:10px;color:var(--color-text-muted);letter-spacing:.05em;margin-top:4px}.page-body{padding:28px 24px}.page-footer{border-top:1px dashed var(--color-border);padding:14px 24px;text-align:center;font-size:10px;color:var(--color-text-hint);letter-spacing:.03em;line-height:1.6}.info-row{border:1px solid var(--color-border);padding:12px 16px}.info-row .label{font-size:10px;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}.info-row .value{font-size:14px;color:var(--color-text);font-weight:500}.status-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-text-secondary);letter-spacing:.04em}.status-badge .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--color-border-accent)}.status-badge .dot.pulse{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.input-field{width:100%;border:1.5px solid var(--color-border);padding:14px 16px;font-size:15px;font-family:var(--font-sans);letter-spacing:.05em;color:var(--color-text);background:var(--color-surface);outline:none;transition:border-color var(--transition-fast)}.input-field:focus{border-color:var(--color-border-strong)}.input-field::placeholder{color:var(--color-text-hint)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:2px solid var(--color-border-strong);padding:14px 16px;font-size:13px;font-weight:600;font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text);background:transparent;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.btn:hover{background:var(--color-text);color:var(--color-surface)}.btn:active{transition:background 80ms ease}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:disabled:hover{background:transparent;color:var(--color-text)}.btn-small{width:auto;padding:6px 14px;font-size:11px;border-width:1.5px}.highlight-card{border:2px solid var(--color-border-strong);padding:18px 20px;text-align:center}.highlight-card .label{font-size:10px;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.highlight-card .large-text{font-size:24px;font-weight:600;color:var(--color-text);letter-spacing:.04em}.highlight-card .code-text{font-size:40px;font-weight:700;color:var(--color-text);letter-spacing:.15em;font-family:var(--font-mono)}.timer{text-align:center}.timer .time{font-size:32px;font-weight:300;color:var(--color-text-muted);letter-spacing:.06em;font-family:var(--font-mono)}.timer .label{font-size:10px;color:var(--color-text-hint);letter-spacing:.05em;text-transform:uppercase;margin-top:2px}.error-state{text-align:center;padding:16px 0}.error-state .icon{width:44px;height:44px;border:2px solid var(--color-border-accent);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}.error-state .icon svg{width:20px;height:20px;stroke:var(--color-border-accent);fill:none;stroke-width:1.5}.error-state h2{font-size:15px;font-weight:600;color:var(--color-text);letter-spacing:.04em;margin-bottom:8px}.error-state p{font-size:13px;color:var(--color-text-secondary);letter-spacing:.03em;line-height:1.6}.checkmark-circle{width:44px;height:44px;border:2px solid var(--color-border-strong);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}.checkmark-circle svg{width:22px;height:22px;stroke:var(--color-border-strong);fill:none;stroke-width:2}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:16px}.spinner{width:32px;height:32px;border:2px solid var(--color-border);border-top-color:var(--color-border-strong);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{font-size:13px;color:var(--color-text-secondary);letter-spacing:.04em}.flex-col{display:flex;flex-direction:column;gap:16px}.flex-col-sm{display:flex;flex-direction:column;gap:10px}.error-text{font-size:12px;color:var(--color-text-secondary);letter-spacing:.03em;text-align:center}.hint-text{font-size:11px;color:var(--color-text-hint);letter-spacing:.04em;text-align:center;line-height:1.7}