#mbti-app{min-height:100vh}:root{--color-primary: #6366f1;--color-primary-light: #818cf8;--color-primary-dark: #4f46e5;--color-primary-50: #eef2ff;--color-primary-100: #e0e7ff;--color-nt: #8b5cf6;--color-nf: #10b981;--color-sj: #0ea5e9;--color-sp: #f59e0b;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-bg: #f8fafc;--color-bg-card: #ffffff;--color-bg-elevated: #ffffff;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-tertiary: #94a3b8;--color-border: #e2e8f0;--color-divider: #f1f5f9;--cf-dominant: #3b82f6;--cf-auxiliary: #22c55e;--cf-tertiary: #eab308;--cf-inferior: #f97316;--cf-opposing: #a855f7;--cf-critical: #ec4899;--cf-deceiving: #06b6d4;--cf-demonic: #64748b;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--shadow-glow: 0 0 20px rgba(99, 102, 241, .3);--font-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", monospace;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}img{max-width:100%;display:block}a{color:var(--color-primary);text-decoration:none}button{font-family:inherit;cursor:pointer}.container{max-width:480px;margin:0 auto;padding:0 var(--space-md)}.page-container{min-height:100vh;padding-bottom:var(--space-3xl)}.fade-enter-active,.fade-leave-active{transition:opacity var(--transition-normal)}.fade-enter-from,.fade-leave-to{opacity:0}.slide-up-enter-active,.slide-up-leave-active{transition:all var(--transition-slow)}.slide-up-enter-from{opacity:0;transform:translateY(20px)}.slide-up-leave-to{opacity:0;transform:translateY(-20px)}.glass{background:#fffc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5)}.gradient-bg{background:linear-gradient(135deg,#667eea,#764ba2)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}