:root{--color-bg-deep: #060a1b;--color-bg-primary: #0a0e27;--color-bg-card: #111636;--color-bg-card-hover: #161d48;--color-bg-elevated: #1a2055;--color-bg-input: #0d1130;--color-gold: #f5c542;--color-gold-dim: #c9a033;--color-gold-bright: #ffe066;--color-gold-glow: rgba(245, 197, 66, .3);--color-text-primary: #e8e6f0;--color-text-secondary: #9a97b0;--color-text-muted: #6b6880;--color-text-white: #ffffff;--color-accent-blue: #4a9eff;--color-accent-green: #3ddc84;--color-accent-red: #ff4d6a;--color-accent-purple: #9d6aff;--color-accent-orange: #ff9f43;--color-accent-cyan: #00d2d3;--color-success: var(--color-accent-green);--color-danger: var(--color-accent-red);--color-warning: var(--color-accent-orange);--color-info: var(--color-accent-blue);--color-tier-1: var(--color-accent-green);--color-tier-2: var(--color-accent-blue);--color-tier-3: var(--color-accent-purple);--color-tier-4: var(--color-gold);--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--border-subtle: 1px solid rgba(245, 197, 66, .1);--border-card: 1px solid rgba(245, 197, 66, .15);--border-focus: 2px solid var(--color-gold);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px var(--color-gold-glow);--shadow-card: 0 4px 16px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(245, 197, 66, .05);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--z-base: 1;--z-dropdown: 10;--z-sticky: 20;--z-overlay: 30;--z-modal: 40;--z-toast: 50;--z-tooltip: 60;--z-particles: 0;--sidebar-width: 260px;--header-height: 56px;--content-max-width: 1200px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--color-bg-deep);color:var(--color-text-primary);line-height:1.6;overflow:hidden;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-gold);text-decoration:none}a:hover{color:var(--color-gold-bright)}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background:var(--color-bg-input);border:var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-gold);box-shadow:0 0 0 3px var(--color-gold-glow)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-bg-deep)}::-webkit-scrollbar-thumb{background:#f5c54233;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#f5c54266}#app{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"sidebar header" "sidebar main";height:100vh;height:100dvh;width:100vw;overflow:hidden;align-items:stretch;justify-content:stretch}.header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);background:var(--color-bg-primary);border-bottom:var(--border-subtle);z-index:var(--z-sticky)}.sidebar{grid-area:sidebar;background:var(--color-bg-primary);border-right:var(--border-subtle);display:flex;flex-direction:column;overflow-y:auto;z-index:var(--z-sticky);min-height:0}.main-content{grid-area:main;overflow-y:auto;overflow-x:hidden;padding:var(--space-6);position:relative;-webkit-overflow-scrolling:touch;min-height:0;max-height:100%;scroll-behavior:smooth}#particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-particles)}.chart-container{position:relative;width:100%;height:200px;max-height:200px}.chart-container canvas{position:absolute;inset:0;width:100%!important;height:100%!important}.card{background:var(--color-bg-card);border:var(--border-card);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-card);transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#f5c54240}.card-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.card-header h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text-white)}.card-header .icon{font-size:var(--text-2xl)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-sm);transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;user-select:none}.btn-gold{background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dim));color:#0a0e27;box-shadow:0 2px 8px #f5c5424d}.btn-gold:hover{background:linear-gradient(135deg,var(--color-gold-bright),var(--color-gold));box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-gold:active{transform:translateY(0)}.btn-gold:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.btn-outline{border:1px solid rgba(245,197,66,.3);color:var(--color-gold);background:transparent}.btn-outline:hover{background:#f5c54214;border-color:var(--color-gold)}.btn-ghost{color:var(--color-text-secondary);background:transparent}.btn-ghost:hover{color:var(--color-text-primary);background:#ffffff0d}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#f35}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.click-button{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--color-gold-bright),var(--color-gold),var(--color-gold-dim));color:#0a0e27;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;box-shadow:0 8px 32px #f5c54266,inset 0 -4px 8px #0003,inset 0 4px 8px #ffffff4d;transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast) var(--ease-out);cursor:pointer;user-select:none;position:relative;overflow:hidden}.click-button:hover{transform:scale(1.05);box-shadow:0 12px 48px #f5c54280,inset 0 -4px 8px #0003,inset 0 4px 8px #ffffff4d}.click-button:active{transform:scale(.95);box-shadow:0 4px 16px #f5c5424d}.click-button:after{content:"";position:absolute;top:50%;left:50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);border-radius:50%;pointer-events:none}.click-button.ripple:after{animation:ripple-effect .4s ease-out}@keyframes ripple-effect{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}.sidebar-brand{padding:var(--space-4) var(--space-4);display:flex;align-items:center;gap:var(--space-3);border-bottom:var(--border-subtle)}.sidebar-brand h1{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;background:linear-gradient(135deg,var(--color-gold-bright),var(--color-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-stats{padding:var(--space-3) var(--space-4);border-bottom:var(--border-subtle)}.sidebar-stats .stat-row{display:flex;justify-content:space-between;padding:var(--space-1) 0}.sidebar-stats .stat-label{color:var(--color-text-muted);font-size:var(--text-sm)}.sidebar-stats .stat-value{color:var(--color-gold);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600}.nav-items{padding:var(--space-2);flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;transition:all var(--duration-fast) var(--ease-out);cursor:pointer;position:relative}.nav-item:hover{background:#f5c5420d;color:var(--color-text-primary)}.nav-item.active{background:#f5c5421a;color:var(--color-gold)}.nav-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--color-gold);border-radius:0 2px 2px 0}.nav-item .icon{font-size:var(--text-lg);width:24px;text-align:center}.nav-item .badge{margin-left:auto;background:var(--color-gold);color:#0a0e27;font-size:var(--text-xs);font-weight:700;padding:1px 6px;border-radius:var(--radius-full);min-width:20px;text-align:center}.nav-item.locked{opacity:.3;pointer-events:none}.panel{display:none}.panel.active{display:block;animation:fadeIn var(--duration-normal) var(--ease-out);padding-bottom:var(--space-8)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.panel-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-text-white);margin-bottom:var(--space-6);display:flex;align-items:center;gap:var(--space-3)}.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}.panel-grid .card-full{grid-column:1 / -1}.dashboard-click-area{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--space-6)}.dashboard-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);margin-bottom:var(--space-4)}.progress-bar{height:8px;background:#ffffff0d;border-radius:4px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-gold-dim),var(--color-gold-bright));border-radius:4px;transition:width var(--duration-slow) var(--ease-out);position:relative}.progress-bar-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.tooltip{position:absolute;background:var(--color-bg-elevated);border:var(--border-card);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);max-width:320px;font-size:var(--text-sm);color:var(--color-text-primary);box-shadow:var(--shadow-lg);z-index:var(--z-tooltip);pointer-events:none;animation:tooltipIn var(--duration-fast) var(--ease-out)}@keyframes tooltipIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tooltip .tooltip-title{font-weight:600;color:var(--color-gold);margin-bottom:var(--space-1)}.toast-container{position:fixed;top:var(--space-4);right:var(--space-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none}.toast{background:var(--color-bg-elevated);border:var(--border-card);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-lg);animation:slideInRight var(--duration-normal) var(--ease-out);display:flex;align-items:center;gap:var(--space-3);pointer-events:auto;min-width:280px;max-width:420px}.toast.achievement{border-color:var(--color-gold);background:linear-gradient(135deg,rgba(245,197,66,.15),var(--color-bg-elevated))}.toast.exit{animation:slideOutRight var(--duration-normal) var(--ease-in) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.modal-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;animation:fadeIn var(--duration-fast) var(--ease-out)}.modal{background:var(--color-bg-card);border:1px solid rgba(245,197,66,.2);border-radius:var(--radius-lg);padding:var(--space-8);max-width:560px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 24px 64px #00000080;animation:modalIn var(--duration-normal) var(--ease-spring)}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--color-gold);margin-bottom:var(--space-4)}.floating-text{position:fixed;font-family:var(--font-mono);font-weight:700;color:var(--color-gold-bright);pointer-events:none;z-index:var(--z-toast);animation:floatUp .8s var(--ease-out) forwards;text-shadow:0 0 8px var(--color-gold-glow)}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(.8)}}.edu-box{background:#4a9eff14;border:1px solid rgba(74,158,255,.2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6}.edu-box:before{content:"📚 "}.advisor-dialog{background:linear-gradient(135deg,rgba(245,197,66,.08),var(--color-bg-card));border:1px solid rgba(245,197,66,.2);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;gap:var(--space-4);animation:slideIn var(--duration-normal) var(--ease-out)}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.advisor-avatar{font-size:2.5rem;flex-shrink:0}.advisor-name{font-family:var(--font-display);font-weight:600;color:var(--color-gold);font-size:var(--text-sm)}.advisor-text{color:var(--color-text-primary);font-size:var(--text-sm);line-height:1.7;margin-top:var(--space-1)}.tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;background:#f5c5421a;color:var(--color-gold);border:1px solid rgba(245,197,66,.2)}.tag-green{background:#3ddc841a;color:var(--color-accent-green);border-color:#3ddc8433}.tag-blue{background:#4a9eff1a;color:var(--color-accent-blue);border-color:#4a9eff33}.tag-red{background:#ff4d6a1a;color:var(--color-accent-red);border-color:#ff4d6a33}.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-4)}.settings-rows{display:flex;flex-direction:column;gap:4px}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03)}.settings-row:last-child{border-bottom:none}.settings-label{font-size:var(--text-sm);color:var(--color-text-muted)}.settings-value{font-size:var(--text-sm);font-family:var(--font-mono);color:var(--color-text-secondary);font-weight:600}.settings-select{width:100%;padding:10px 12px;font-size:var(--text-base);background:var(--color-bg-input);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--color-gold);cursor:pointer}.settings-select:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--color-gold-glow)}@media(max-width:900px){:root{--sidebar-width: 0px;--header-height: 52px}#app{grid-template-columns:1fr;grid-template-rows:var(--header-height) 1fr auto;grid-template-areas:"header" "main" "sidebar"}.sidebar{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:none;border-top:var(--border-subtle);padding:var(--space-1);-webkit-overflow-scrolling:touch;scrollbar-width:none}.sidebar::-webkit-scrollbar{display:none}.sidebar-brand,.sidebar-stats{display:none}.nav-items{flex-direction:row;gap:0;padding:0;width:max-content}.nav-item{flex-direction:column;gap:2px;font-size:var(--text-xs);padding:var(--space-1) var(--space-2);min-width:56px;text-align:center;white-space:nowrap}.nav-item span:not(.icon):not(.badge){max-width:60px;overflow:hidden;text-overflow:ellipsis;font-size:.65rem}.nav-item.active:before{display:none}.nav-item .badge{display:none}.header{padding:0 var(--space-3);gap:8px}.header>div:first-child{gap:10px}.click-button{width:140px;height:140px;font-size:var(--text-xl)}.panel-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.panel-grid .card-full{grid-column:1 / -1}.dashboard-stats-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.settings-grid{grid-template-columns:1fr}.main-content{padding:var(--space-3)}.advisor-dialog{flex-direction:column;gap:var(--space-3);text-align:center}.advisor-avatar{font-size:2rem}.panel-title{font-size:var(--text-xl);margin-bottom:var(--space-4)}}@media(max-width:480px){.click-button{width:110px;height:110px;font-size:var(--text-lg)}.panel-grid,.dashboard-stats-grid{grid-template-columns:1fr;gap:var(--space-3)}.card{padding:var(--space-3)}.card-header h3{font-size:var(--text-base)}.header>div:last-child{display:none}.main-content{padding:var(--space-2)}.panel-title{font-size:var(--text-lg);margin-bottom:var(--space-3)}.nav-item{min-width:48px;padding:2px 4px}.nav-item span:not(.icon):not(.badge){display:none}.advisor-dialog{padding:var(--space-3)}.edu-box{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}.btn{min-height:40px}.btn-sm{min-height:32px}.toast-container{left:var(--space-2);right:var(--space-2);top:var(--space-2)}.toast{min-width:auto;max-width:100%}}@media(min-width:1400px){.panel-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.dashboard-stats-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.settings-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}@media(hover:none)and (pointer:coarse){.card:hover{transform:none;box-shadow:var(--shadow-card);border-color:#f5c54226}.btn:active{transform:scale(.97)}.nav-item:hover{background:transparent}.nav-item.active{background:#f5c5421a}}#panel-uncle .card{transition:border-color var(--duration-normal) ease}#uncle-loan-amount{background:var(--color-bg-input);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--color-gold)}#uncle-loan-amount:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--color-gold-glow)}.invest-amount-input{background:var(--color-bg-input);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--color-gold)}.invest-amount-input:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--color-gold-glow)}