:root{--bg: #f6fff4;--bg-gradient-top: #f0fff6;--card: #ffffff;--muted: #6b7280;--text: #000000;--accent-1: #141cb8;--accent-2: #fbbf24;--glass: rgba(255,255,255,.7);--radius: 16px;--shadow: 0 6px 16px rgba(16,24,40,.25);--ui-gap: 14px;--mono: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--text-color: #05202b;--big-number-bg: linear-gradient(90deg, rgba(20,184,166,.12), rgba(251,191,36,.06));--goal-card-bg: linear-gradient(180deg, rgba(20,184,166,.06), rgba(251,191,36,.02));--canvas-bg: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2));--share-card-bg: linear-gradient(180deg,#ffffff,#fffaf0);--advanced-bg: linear-gradient(180deg,#ffffff,#f8fff9);--goal-pill-bg: #ffffff;--goal-pill-text: #0f172a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--mono);background:linear-gradient(180deg,var(--bg-gradient-top) 0%,var(--bg) 100%);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:18px}body.dark{--bg: #0b0f14;--bg-gradient-top: #10151c;--card: #1a1f26;--muted: #a0a4aa;--text: #a0a4aa;--accent-1: #60a5fa;--accent-2: #fbbf24;--glass: rgba(26,31,38,.7);--shadow: 0 6px 16px rgba(0,0,0,.5);--text-color: #e5e7eb;--big-number-bg: linear-gradient(90deg, rgba(96,165,250,.12), rgba(251,191,36,.06));--goal-card-bg: linear-gradient(180deg, rgba(96,165,250,.06), rgba(251,191,36,.02));--canvas-bg: linear-gradient(180deg, rgba(26,31,38,.6), rgba(26,31,38,.2));--share-card-bg: linear-gradient(180deg,#1a1f26,#2a2f3a);--advanced-bg: linear-gradient(180deg,#1a1f26,#202631);--goal-pill-bg: #2a2f3a;--goal-pill-text: #e5e7eb}header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.brand{display:flex;gap:10px;align-items:center}.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent-1),#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:var(--shadow)}.title{font-size:15px;font-weight:700}.tag{font-size:12px;color:var(--muted)}.container{width:100%;max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:16px}.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.hero{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width:900px){.hero{grid-template-columns:1fr 420px}}.calc{display:flex;flex-direction:column;gap:10px}.big-number{background:var(--big-number-bg);border-radius:12px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.big-number,.slider-row{flex-wrap:wrap}.big-number .label{font-size:20px;color:var(--text);font-weight:800}.big-number .value.main-fv{font-size:46px;font-weight:800;color:var(--accent-1)}.big-number .value.secondary{font-size:30px;font-weight:800;color:var(--muted)}.sub-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.sliders{display:flex;flex-direction:column;gap:14px}.slider-row{display:flex;align-items:center;gap:12px;justify-content:space-between}.slider-label{min-width:110px;font-weight:600;color:var(--text)}input[type=range]{width:100%;accent-color:var(--accent-1)}.tiny{font-size:12px;color:var(--muted)}.right{display:flex;flex-direction:column;gap:12px}.goal-card{border-radius:12px;padding:14px;background:var(--goal-card-bg);display:flex;flex-direction:column;gap:8px;align-items:flex-start}.goal-title{font-weight:700}.goal-equivalents{display:flex;gap:10px;flex-wrap:wrap}.goal-pill{background:var(--goal-pill-bg);border-radius:999px;padding:6px 10px;font-size:13px;box-shadow:var(--shadow);color:var(--goal-pill-text)}.goal-pill.custom-goal{border:1px dashed var(--muted);background:transparent;color:var(--muted)}canvas{width:100%!important;height:220px!important;border-radius:10px;background:var(--canvas-bg)}.row{display:flex;gap:12px;align-items:center}.muted{color:var(--muted);font-size:13px}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{background:linear-gradient(90deg,var(--accent-1),#06b6d4);color:#fff;padding:8px 12px;border-radius:10px;border:0;font-weight:700;cursor:pointer;box-shadow:0 6px 18px #06b6d41f}.btn.ghost{background:transparent;border:1px solid rgba(8,10,12,.06);color:var(--muted)}.share-card{margin-top:8px;border-radius:12px;padding:12px;background:var(--share-card-bg);width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.advanced{margin-top:8px;padding:12px;border-radius:12px;background:var(--advanced-bg);font-size:13px;color:var(--text-color)}.toggle{display:inline-flex;align-items:center;gap:6px;background:#e9fdf6;padding:6px 8px;border-radius:999px;font-weight:700;color:var(--accent-1)}footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}small{font-size:12px;color:var(--muted)}.num-animate{transition:all .45s cubic-bezier(.2,.9,.2,1)}.overflow-menu,.dropdown{position:relative;display:inline-block}.popover,.dropdown-menu{position:absolute;right:0;top:100%;margin-top:4px;display:flex;flex-direction:column;background:transparent;border:1px solid var(--popover-border, #ccc);border-radius:4px;box-shadow:0 4px 12px #0000001a;z-index:1000;min-width:140px}.popover .btn.ghost,.dropdown-menu .btn.ghost{background:transparent;border:none;color:var(--muted);text-align:left;white-space:nowrap}.popover,.dropdown-menu .btn.ghost:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.popover,.dropdown-menu .btn.ghost:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}@media (min-width: 601px){.overflow-menu{display:none}}@media (max-width: 600px){.big-number{display:grid!important;grid-template-columns:1fr 1fr;align-items:center;gap:8px}.fv-block{grid-row:1 / span 2;align-self:center;text-align:center}.invested-block{grid-column:2;grid-row:1;text-align:right}.gained-block{grid-column:2;grid-row:2;text-align:right}.desktop-actions{display:none}.popover,.dropdown-menu{position:fixed;top:60px;left:0;right:0;width:100%;background:var(--card);border:1px solid var(--popover-border, #ccc);box-shadow:var(--shadow);border-radius:5;z-index:1000}.popover .btn.ghost,.dropdown-menu .btn.ghost{display:block;width:100%;padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.05);background:transparent;color:var(--text-color);text-align:center}.popover .btn.ghost:last-child,.dropdown-menu .btn.ghost:last-child{border-bottom:none}}
