:root{--color-primary-start: #F72585;--color-primary-end: #9333EA;--gradient-primary: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end));--gradient-primary-h: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end));--color-bg: #F8F5FD;--color-surface: #FFFFFF;--color-border: #F0F0F2;--color-border-input: #E5E7EB;--color-text-primary: #1A1A1A;--color-text-secondary: #6B7280;--color-text-muted: #9CA3AF;--color-text-placeholder:#D1D5DB;--color-text-inverse: #FFFFFF;--color-text-accent: var(--color-primary-start);--color-nav-bg: #FFFFFF;--color-nav-border: #F0F0F2;--color-nav-item-text: #6B7280;--color-nav-item-icon: #9CA3AF;--color-nav-active-bg: rgba(236, 72, 153, .08);--color-nav-active-text: #EC4899;--color-nav-active-icon: #EC4899;--color-tint-pink: rgba(236, 72, 153, .12);--color-tint-purple: rgba(147, 51, 234, .12);--color-tint-orange: rgba(249, 115, 22, .12);--color-tint-amber: rgba(234, 179, 8, .12);--color-tint-green: rgba(22, 163, 74, .1);--color-tint-blue: rgba(59, 130, 246, .1);--color-tint-red: rgba(239, 68, 68, .1);--color-icon-pink: #EC4899;--color-icon-purple: #9333EA;--color-icon-orange: #F97316;--color-icon-amber: #EAB308;--color-success: #16A34A;--color-success-bg: rgba(22, 163, 74, .1);--color-success-border: rgba(22, 163, 74, .2);--color-processing: #3B82F6;--color-processing-bg: rgba(59, 130, 246, .1);--color-processing-border: rgba(59, 130, 246, .2);--color-error: #EF4444;--color-error-bg: rgba(239, 68, 68, .1);--color-error-border: rgba(239, 68, 68, .2);--color-warning: #EAB308;--color-warning-bg: rgba(234, 179, 8, .1);--color-warning-border: rgba(234, 179, 8, .2);--color-draft: #6B7280;--color-draft-bg: rgba(107, 114, 128, .1);--color-toggle-active: var(--color-primary-start);--color-toggle-inactive: #D1D5DB;--color-upgrade-start: #FFF1F8;--color-upgrade-end: #F5E8FF;--color-promo-start: #FF2D78;--color-promo-end: #9333EA;--font-body: "Plus Jakarta Sans", sans-serif;--font-display: "Plus Jakarta Sans", sans-serif;--font-mono: "JetBrains Mono", monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 6px;--radius: 8px;--radius-md: 10px;--radius-input: 8px;--radius-card: 16px;--radius-pill: 999px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 0 0 1px var(--color-border);--shadow-card-hover: 0 4px 16px rgba(0, 0, 0, .08), 0 0 0 1px var(--color-border-input);--shadow-btn: 0 4px 12px rgba(247, 37, 133, .3);--shadow-modal: 0 20px 60px rgba(0, 0, 0, .15);--shadow-sidebar: 2px 0 8px rgba(0, 0, 0, .04);--transition: .15s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--sidebar-width: 220px;--topbar-height: 64px;--content-px: 32px;--stat-icon-size: 48px;--stat-icon-radius: 12px;--nav-item-px: 16px;--nav-item-py: 10px;--card-px: 24px;--card-py: 20px;--btn-height: 40px;--btn-height-sm: 32px;--input-height: 44px;--badge-px: 12px;--badge-py: 4px;--platform-chip-size: 32px;--step-badge-size: 28px;--avatar-size: 36px;--toggle-width: 44px;--toggle-height: 24px;--bg: var(--color-bg);--surface: var(--color-surface);--card: var(--color-surface);--card-hover: #F9FAFB;--border: var(--color-border);--border-light: var(--color-border-input);--accent: var(--color-primary-start);--accent-dim: #E01070;--accent-glow: rgba(247, 37, 133, .15);--accent-subtle:var(--color-nav-active-bg);--text-1: var(--color-text-primary);--text-2: var(--color-text-secondary);--text-3: var(--color-text-muted);--text-4: var(--color-text-placeholder);--error: var(--color-error);--error-bg: var(--color-error-bg);--success: var(--color-success);--success-bg: var(--color-success-bg);--warning: var(--color-warning);--warning-bg: var(--color-warning-bg);--radius-lg: var(--radius-card);--radius-xl: var(--radius-pill);--rail-height: var(--topbar-height);--input-width: 360px;--shadow-accent:var(--shadow-btn)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;font-size:16px}body{min-height:100%;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-y:auto}#root{min-height:100%}h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--color-text-primary)}p{line-height:1.6}a{color:var(--color-text-accent);text-decoration:none}a:hover{text-decoration:underline}code,.mono{font-family:var(--font-mono);font-size:.875em}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border-input);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}::selection{background:#f7258526;color:var(--color-text-primary)}:focus-visible{outline:2px solid var(--color-primary-start);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-5);height:var(--btn-height);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all var(--transition);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--gradient-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-btn)}.btn-primary:hover{filter:brightness(1.06)}.btn-ghost{background:transparent;color:var(--color-text-primary);border:1.5px solid var(--color-border-input)}.btn-ghost:hover{background:#00000008;border-color:var(--color-text-muted)}.btn-sm{height:var(--btn-height-sm);padding:0 var(--space-4);font-size:13px}.btn-icon{width:var(--btn-height-sm);height:var(--btn-height-sm);padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--color-text-muted);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}.btn-icon:hover{background:var(--color-border);color:var(--color-text-primary)}.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);z-index:9999;pointer-events:none}.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);font-size:14px;color:var(--color-text-primary);box-shadow:var(--shadow-card);pointer-events:all;animation:slideIn .2s ease forwards;max-width:360px}.toast.success{border-color:var(--color-success)}.toast.error{border-color:var(--color-error)}@keyframes slideIn{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-8);max-width:440px;width:100%;box-shadow:var(--shadow-modal);animation:modalIn .2s ease forwards}@keyframes modalIn{0%{transform:scale(.96) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.badge{display:inline-flex;align-items:center;gap:4px;padding:var(--badge-py) var(--badge-px);border-radius:var(--radius-pill);font-size:12px;font-weight:500}.badge-free{background:var(--color-draft-bg);color:var(--color-draft);border:1px solid rgba(107,114,128,.2)}.badge-starter{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.badge-pro{background:var(--color-nav-active-bg);color:var(--color-nav-active-text);border:1px solid rgba(236,72,153,.2)}.badge-business{background:var(--color-warning-bg);color:var(--color-warning);border:1px solid var(--color-warning-border)}.badge-completed{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.badge-processing{background:var(--color-processing-bg);color:var(--color-processing);border:1px solid var(--color-processing-border)}.badge-failed{background:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border)}.badge-draft{background:var(--color-draft-bg);color:var(--color-draft);border:1px solid rgba(107,114,128,.2)}