:root{--color-primary: #7C3AED;--color-primary-light: #a78bfa;--color-primary-dark: #5b21b6;--color-surface: #1a1a2e;--color-surface-raised: #16213e;--color-surface-overlay: #0f3460;--color-bg: #0f0f0f;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-success: #22c55e;--color-warning: #f59e0b;--color-danger: #ef4444;--color-border: rgba(255,255,255,.1);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--shadow: 0 4px 24px rgba(0,0,0,.4);--transition: .2s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100dvh;overscroll-behavior:none;-webkit-font-smoothing:antialiased}#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius-md);border:none;cursor:pointer;font-size:1rem;font-weight:600;transition:opacity var(--transition)}.btn:active{opacity:.8}.btn-primary{background:var(--color-primary);color:#fff}.btn-secondary{background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border)}.btn-danger{background:var(--color-danger);color:#fff}.btn-ghost{background:transparent;color:var(--color-primary-light)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-full{width:100%}.input{width:100%;padding:12px 16px;background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;outline:none;transition:border-color var(--transition)}.input:focus{border-color:var(--color-primary)}.input::placeholder{color:var(--color-text-muted)}.label{display:block;font-size:.85rem;color:var(--color-text-muted);margin-bottom:6px}.form-field{margin-bottom:16px}.card{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:16px}.offline-badge{position:fixed;top:0;left:50%;transform:translate(-50%);background:var(--color-warning);color:#000;padding:6px 20px;border-radius:0 0 12px 12px;font-size:.8rem;font-weight:700;z-index:9999}.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;background:var(--color-primary);color:#fff;font-size:1.6rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px #7c3aed80;z-index:100;transition:transform var(--transition),box-shadow var(--transition)}.fab:active{transform:scale(.93)}.btn-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:btn-spin .6s linear infinite;flex-shrink:0;display:inline-block}@keyframes btn-spin{to{transform:rotate(360deg)}}body.landing-page #app{max-width:none;display:block}