*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .4s ease,color .4s ease}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit}a{color:inherit;text-decoration:none}:root{--font-display: "Fraunces", Georgia, serif;--font-body: "Outfit", system-ui, sans-serif}:root{--bg: #0b0b10;--bg-elev: #14141c;--bg-elev-2: #1d1d28;--surface: rgba(255, 255, 255, .03);--surface-hover: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #f0f0f5;--text-dim: #a0a0b2;--text-faint: #6a6a7c;--shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);--shadow-sm: 0 4px 16px -4px rgba(0, 0, 0, .5)}@media (prefers-color-scheme: light){:root{--bg: #f6f6f9;--bg-elev: #ffffff;--bg-elev-2: #fdfdff;--surface: rgba(0, 0, 0, .02);--surface-hover: rgba(0, 0, 0, .04);--border: rgba(0, 0, 0, .08);--border-strong: rgba(0, 0, 0, .14);--text: #14141c;--text-dim: #555567;--text-faint: #8a8a9c;--shadow: 0 20px 60px -24px rgba(20, 20, 40, .25);--shadow-sm: 0 4px 16px -6px rgba(20, 20, 40, .18)}}body.force-dark{--bg: #0b0b10;--bg-elev: #14141c;--bg-elev-2: #1d1d28;--surface: rgba(255, 255, 255, .03);--surface-hover: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #f0f0f5;--text-dim: #a0a0b2;--text-faint: #6a6a7c;--shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);--shadow-sm: 0 4px 16px -4px rgba(0, 0, 0, .5)}body.force-light{--bg: #f6f6f9;--bg-elev: #ffffff;--bg-elev-2: #fdfdff;--surface: rgba(0, 0, 0, .02);--surface-hover: rgba(0, 0, 0, .04);--border: rgba(0, 0, 0, .08);--border-strong: rgba(0, 0, 0, .14);--text: #14141c;--text-dim: #555567;--text-faint: #8a8a9c;--shadow: 0 20px 60px -24px rgba(20, 20, 40, .25);--shadow-sm: 0 4px 16px -6px rgba(20, 20, 40, .18)}:root,:root[data-accent=cosmic]{--accent: #7c6af7;--accent-2: #9d8dff;--accent-soft: rgba(124, 106, 247, .14);--accent-glow: rgba(124, 106, 247, .4);--accent-text: #ffffff}:root[data-accent=ocean]{--accent: #00bfff;--accent-2: #4dd2ff;--accent-soft: rgba(0, 191, 255, .14);--accent-glow: rgba(0, 191, 255, .4);--accent-text: #00131c}:root[data-accent=forest]{--accent: #00c896;--accent-2: #3fe0b5;--accent-soft: rgba(0, 200, 150, .14);--accent-glow: rgba(0, 200, 150, .4);--accent-text: #00140d}:root[data-accent=flame]{--accent: #ff4444;--accent-2: #ff7070;--accent-soft: rgba(255, 68, 68, .14);--accent-glow: rgba(255, 68, 68, .4);--accent-text: #ffffff}:root[data-accent=solar]{--accent: #ffb800;--accent-2: #ffcb44;--accent-soft: rgba(255, 184, 0, .14);--accent-glow: rgba(255, 184, 0, .4);--accent-text: #1c1400}:root[data-accent=bloom]{--accent: #ff6b9d;--accent-2: #ff93b8;--accent-soft: rgba(255, 107, 157, .14);--accent-glow: rgba(255, 107, 157, .4);--accent-text: #1c000c}:root[data-accent=mono]{--accent: #ffffff;--accent-2: #d8d8e0;--accent-soft: rgba(255, 255, 255, .12);--accent-glow: rgba(255, 255, 255, .3);--accent-text: #0b0b10}:root[data-accent=arcade]{--accent: #39ff14;--accent-2: #74ff5c;--accent-soft: rgba(57, 255, 20, .14);--accent-glow: rgba(57, 255, 20, .4);--accent-text: #001400}body.force-light :root[data-accent=mono],:root[data-accent=mono] body.force-light{--accent: #14141c;--accent-text: #ffffff}.ft-container{width:100%;max-width:460px;margin:0 auto;padding:0 20px}.ft-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow)}.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 20px;border-radius:14px;background:var(--accent);color:var(--accent-text);font-weight:700;font-size:16px;letter-spacing:.01em;transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;box-shadow:0 8px 24px -8px var(--accent-glow)}.ft-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px var(--accent-glow)}.ft-btn:active{transform:translateY(0)}.ft-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.ft-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:15px;transition:background .2s ease,border-color .2s ease}.ft-btn-ghost:hover{background:var(--surface-hover);border-color:var(--border-strong)}.ft-input{width:100%;padding:14px 16px;border-radius:13px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:16px;transition:border-color .2s ease,background .2s ease}.ft-input::placeholder{color:var(--text-faint)}.ft-input:focus{outline:none;border-color:var(--accent);background:var(--bg-elev-2)}.ft-label{display:block;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:7px;letter-spacing:.01em}.ft-spinner{width:18px;height:18px;border:2px solid var(--accent-text);border-top-color:transparent;border-radius:50%;animation:ft-spin .7s linear infinite}@keyframes ft-spin{to{transform:rotate(360deg)}}.ft-spinner-lg{width:38px;height:38px;border:3px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:ft-spin .7s linear infinite}.ft-banner{padding:12px 14px;border-radius:12px;font-size:14px;font-weight:500;line-height:1.4}.ft-banner-error{background:#ff44441f;border:1px solid rgba(255,68,68,.3);color:#f88}.ft-banner-info{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent)}@keyframes ft-fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.ft-fade-up{animation:ft-fade-up .5s ease both}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}