:root{--bg:#f5f7f9;--ink:#182b36;--muted:#7b8992;--line:#e7edf0;--green:#17664f;--lime:#d8f293}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:32px;letter-spacing:-1.1px;font-weight:600}h2{font-size:29px;letter-spacing:-1px;font-weight:600}h3{font-size:16px;font-weight:600}.muted{color:var(--muted)}.small,small{font-size:12px}.brand{display:flex;align-items:center;gap:10px;font-size:29px;font-weight:650;letter-spacing:-1px}.brandmark{background:var(--green);color:var(--lime);display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:30px}.eyebrow{color:var(--muted);font-size:10px;letter-spacing:1.8px;font-weight:650;margin-bottom:9px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:8px;padding:11px 17px;font-weight:550;border:1px solid transparent}.primary{background:var(--green);color:white}.primary:hover{background:#124e3d}.secondary{background:white;color:var(--ink);border-color:var(--line)}.secondary:hover{background:#f4f7f8}.text-button{border:0;background:none;color:var(--muted);padding:5px}.text-button:hover{color:var(--green)}aside{width:222px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;padding:34px 22px;display:flex;flex-direction:column}.nav-label{margin:54px 12px 13px;font-size:10px;letter-spacing:1.5px;color:#a0aab1}.nav{display:flex;gap:13px;align-items:center;width:100%;background:none;border:0;text-align:left;color:#75838d;padding:13px 15px;margin:4px 0;border-radius:8px;font-size:18px}.nav span{font-size:13px}.nav.active{background:#edf5ef;color:var(--green);font-weight:600}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:24px;display:flex;align-items:center;gap:10px;font-size:11px}.sidebar-bottom small{display:block;font-size:10px;color:var(--muted)}.avatar{background:#e8edf1;display:grid;place-items:center;border-radius:50%;width:32px;height:32px}main{margin-left:222px}header{height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;color:var(--muted);font-size:12px;background:#fff}.status-dot{display:inline-block;width:7px;height:7px;background:#6e9f85;border-radius:50%;margin-right:9px}.content{max-width:1560px;margin:auto;padding:38px 42px}.page-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-title .muted{margin-top:7px}.notice{font-size:11px;color:#798583;margin:0 0 24px;border-left:2px solid #b6c9be;padding-left:10px}.metrics{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:16px;margin-bottom:26px}.metric{background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px}.metric p{font-size:12px;color:var(--muted);margin-bottom:17px}.metric small{display:block;color:var(--muted);margin-top:13px;font-size:10px}.metric.hero{background:var(--green);color:white;border-color:var(--green)}.hero p,.hero small{color:#b6d4c8}.hero p span{float:right;color:var(--lime)}.hero h2{color:#e8f7c8}.panel{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:10px}.panel-heading .muted{font-size:11px}.badge{background:#f2f5f6;font-size:10px;border-radius:5px;padding:4px 9px;color:var(--muted)}.grid{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(240px,1fr);gap:24px}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:500;color:var(--muted);background:#fafbfc}td,th{padding:14px 18px;border-bottom:1px solid #f0f3f5}td{font-size:12px}td strong{font-weight:550}td small{display:block;color:var(--muted);font-size:10px}.table-scroll{overflow:auto}.empty{text-align:center;padding:38px 20px 46px;color:var(--muted)}.empty h3{color:var(--ink);margin:13px 0 7px}.empty p{font-size:12px;margin-bottom:20px}.empty-icon{display:inline-grid;place-items:center;font-size:26px;background:#eef5f0;color:var(--green);width:54px;height:54px;border-radius:16px}.allocation{padding-bottom:24px}.allocation>p{padding:0 24px}.allocation-row{padding:0 24px;margin-bottom:21px}.allocation-label{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:8px}.allocation-label span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}progress{width:100%;height:7px;display:block;border:0;border-radius:8px;overflow:hidden;background:#edf2ef}progress::-webkit-progress-bar{background:#edf2ef}progress::-webkit-progress-value{background:#45856e}progress::-moz-progress-bar{background:#45856e}.positive{color:#258567}.negative{color:#bc5350}.activity{display:flex;align-items:center;gap:13px;padding:15px 24px;border-top:1px solid #f0f3f5}.activity-icon{background:#edf5f0;border-radius:10px;width:35px;height:35px;display:grid;place-items:center;color:var(--green)}.activity-info{flex:1;font-size:12px}.activity-info small{display:block;color:var(--muted);font-size:10px}.activity-amount{font-size:13px}.pill{font-size:10px;padding:4px 8px;border-radius:5px;background:#edf5f0;color:var(--green)}footer{color:#a0aab1;display:flex;gap:20px;font-size:11px;margin-top:32px}footer span:last-child{margin-left:auto}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 80% 20%,#e3eedf,transparent 60%),#f5f7f9;padding:24px}.login-card{width:430px;max-width:100%;background:white;padding:42px;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 80px #18392b08}.login-card .brand{margin-bottom:45px}.login-card h1{font-size:32px;line-height:1.25;margin-bottom:16px}.login-card form{margin-top:27px}.login-card button{width:100%;justify-content:space-between}.login-card .small{margin-top:25px}label{display:block;font-size:12px;color:#5b6b75;margin-bottom:18px}input,select{display:block;width:100%;border:1px solid #dfe6e9;border-radius:7px;background:white;color:var(--ink);padding:10px 12px;margin-top:6px;min-width:0}input:focus,select:focus{outline:2px solid #b4caba;outline-offset:1px}dialog{border:1px solid var(--line);border-radius:16px;padding:28px;width:540px;max-width:calc(100% - 30px);color:var(--ink);box-shadow:0 30px 100px #0002}dialog::backdrop{background:#172f3a66;backdrop-filter:blur(3px)}dialog .panel-heading{padding:0 0 24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.full{width:100%;margin-top:16px}#trade-error,#login-error,#price-error{color:#b44545;font-size:12px;margin-top:10px}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.import-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.import-panel{padding:32px}.import-panel h3{margin:18px 0 12px}.import-panel p{margin-bottom:22px}.import-panel form{margin-top:25px}hr{border:0;border-top:1px solid var(--line);margin:28px 0}#toast{position:fixed;bottom:24px;right:24px;background:#183e30;color:white;padding:14px 22px;border-radius:9px;box-shadow:0 8px 25px #0002;max-width:85%;z-index:5}@media(min-width:1500px){.metrics{gap:22px}.metric h2{font-size:34px}}@media(max-width:1150px){aside{width:190px;padding:30px 16px}main{margin-left:190px}.content{padding:28px}.metrics{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.allocation{display:block}.import-grid{grid-template-columns:1fr}}@media(max-width:700px){aside{position:static;width:100%;padding:16px 20px;border-right:0;border-bottom:1px solid var(--line);display:block}.brand{font-size:24px}.brandmark{width:30px;height:30px;font-size:25px}.nav-label,.sidebar-bottom{display:none}nav{display:flex;margin-top:14px}.nav{padding:8px;gap:6px;justify-content:center;font-size:14px}.nav span{font-size:11px}main{margin-left:0}header{height:49px;padding:0 20px}.content{padding:26px 16px}.page-title{align-items:flex-start;gap:10px}h1{font-size:25px}.page-title .primary{font-size:11px;padding:10px;white-space:nowrap;margin-top:25px}.page-title .muted{font-size:11px}.metric{padding:18px 15px}.metric h2{font-size:24px}.metric p{font-size:11px}.metric small{font-size:9px}.metrics{gap:10px}.panel-heading{padding:19px}.notice{font-size:10px}footer span:last-child{display:none}.form-grid{gap:0 12px}.login-card{padding:30px}.import-panel{padding:24px}}

/* charts + motion */
.chart-wrap{position:relative;height:260px;padding:6px 20px 18px}.chart-wrap .empty{position:absolute;inset:0;display:grid;place-items:center}
.donut-wrap{position:relative;max-width:190px;margin:4px auto 22px}.donut-wrap canvas{display:block}
#donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}#donut-center small{color:var(--muted)}#donut-center strong{font-size:17px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:baseline}
.metric h2,.holdings td,.activity-amount{font-variant-numeric:tabular-nums}
.metric{transition:transform .25s ease,box-shadow .25s ease}.metric:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(24,43,54,.35)}
.metric.hero{background:linear-gradient(135deg,#17664f,#0f4a39);color:#fff}.metric.hero p,.metric.hero small{color:rgba(255,255,255,.72)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.metric,.panel,#holdings tr,#transactions tr,.activity,.allocation-row{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.metric:nth-child(2){animation-delay:.05s}.metric:nth-child(3){animation-delay:.1s}.metric:nth-child(4){animation-delay:.15s}
#holdings tr:nth-child(2),#transactions tr:nth-child(2),.activity:nth-child(2),.allocation-row:nth-child(2){animation-delay:.06s}
#holdings tr:nth-child(3),#transactions tr:nth-child(3),.activity:nth-child(3),.allocation-row:nth-child(3){animation-delay:.12s}
#holdings tr:nth-child(n+4),#transactions tr:nth-child(n+4),.activity:nth-child(n+4),.allocation-row:nth-child(n+4){animation-delay:.18s}
tbody tr{transition:background .15s}tbody tr:hover{background:#f6faf8}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.dot.c0{background:#17664f}.dot.c1{background:#3f9c7a}.dot.c2{background:#8ccf9c}.dot.c3{background:#d8f293}.dot.c4{background:#5b7c8d}.dot.c5{background:#a9bcc6}.dot.c6{background:#e0a458}.dot.c7{background:#c96f5b}

.portfolio-controls{padding:0 16px 20px}.portfolio-controls select{width:100%;max-width:220px}.portfolio-controls .text-button{display:block;margin-top:8px;text-align:left}.user-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}#account-dialog{max-height:85vh;overflow:auto}#register-form{margin-top:20px}#password-form .primary{margin-top:16px}

/* Folio mark: an orbit of light around a stable monogram. */
.brandmark{position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;background:#124c3d;box-shadow:0 2px 9px #17664f20}
.brandmark::before{content:"";position:absolute;inset:-45%;z-index:-2;background:conic-gradient(from 0deg,transparent 0deg,#3f9c7a 75deg,#d8f293 115deg,#f5ffd8 125deg,#3f9c7a 145deg,transparent 190deg,transparent 270deg,#8ccf9c 320deg,transparent 360deg);animation:folio-orbit 7s linear infinite;will-change:transform}
.brandmark::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(145deg,#24775d,#124c3d 75%);z-index:-1}
.brandmark>span{display:block;line-height:1;transform:translateY(-1px);text-shadow:0 0 12px #d8f29324;animation:folio-glow 7s ease-in-out infinite}
.brand:hover .brandmark::before{animation-duration:3s}
@keyframes folio-orbit{to{transform:rotate(360deg)}}
@keyframes folio-glow{0%,100%{text-shadow:0 0 4px #d8f29310}50%{text-shadow:0 0 12px #d8f29370}}
@media(prefers-reduced-motion:reduce){.brandmark::before,.brandmark>span{animation:none;will-change:auto}}

/* Glass surfaces retain a readable fallback without backdrop filtering. */
:root{--bg:#edf3f1;--line:rgba(124,157,146,.20)}
body{background:radial-gradient(ellipse at 12% 8%,#d8eadd 0,transparent 43%),radial-gradient(ellipse at 92% 35%,#dde8f0 0,transparent 48%),linear-gradient(145deg,#f4f7f4,#e8f0ed);background-attachment:fixed}
aside,header{background:rgba(250,253,251,.82);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);border-color:rgba(255,255,255,.8)}
aside{box-shadow:6px 0 35px #244a3810}
header{box-shadow:0 4px 24px #244a3806}
.panel,.metric,.login-card,dialog{background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.92);box-shadow:0 8px 30px #244a3809,inset 0 1px 0 #ffffffc9;backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.metric.hero{background:linear-gradient(130deg,rgba(32,111,84,.94),rgba(18,78,61,.94));border-color:#ffffff50;box-shadow:0 10px 30px #17664f26,inset 0 1px 0 #ffffff35}
.login{background:radial-gradient(ellipse at 18% 75%,#cfe5de99,transparent 52%),radial-gradient(ellipse at 80% 20%,#d8eac7bb,transparent 55%)}
.login-card{box-shadow:0 24px 80px #18392b12,inset 0 1px 0 white}
.brandmark{box-shadow:0 4px 14px #17664f28,inset 0 1px 0 #ffffff70}
.brandmark::after{background:radial-gradient(ellipse at 20% 0%,#ffffff40,transparent 65%),linear-gradient(145deg,#2b8067ed,#124c3df5);box-shadow:inset 0 1px 0 #ffffff50}
.primary{background:linear-gradient(145deg,#287d62,#17664f);border-color:#ffffff30;box-shadow:inset 0 1px 0 #ffffff25,0 3px 10px #17664f14}
.primary:hover{background:linear-gradient(145deg,#226d56,#124e3d)}
.secondary{background:#ffffffa6;border-color:#ffffffdf;box-shadow:0 2px 7px #244a3807}
.secondary:hover{background:#ffffffed}
.nav.active{background:#e1eee5b8;box-shadow:inset 0 1px 0 #ffffffaa}
th{background:rgba(236,243,239,.65)}
td,th{border-bottom-color:rgba(139,164,151,.13)}
input,select{background:rgba(255,255,255,.85);border-color:rgba(123,153,140,.27)}
.badge,.avatar,.empty-icon,.activity-icon{background:#e4eee7c9}
dialog::backdrop{background:#17372e40;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#toast{background:#183e30ed;border:1px solid #ffffff40;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.portfolio-controls{padding:0 0 20px}
@media(prefers-reduced-transparency:reduce){aside,header,.panel,.metric,.login-card,dialog{background:#f9fcfa;backdrop-filter:none;-webkit-backdrop-filter:none}.metric.hero{background:#17664f}input,select,.secondary{background:white}}

#scalable-dialog{width:740px;max-height:90vh;overflow:auto}.broker-intro{display:flex;align-items:center;gap:18px;margin-bottom:20px}.broker-intro p{margin-top:6px}.broker-icon{flex-shrink:0;display:grid;place-items:center;width:56px;height:56px;background:#17664f12;border:1px solid #ffffffc9;border-radius:17px;color:var(--green);font-size:28px}.broker-explanation{line-height:1.7}.broker-help{margin:20px 0;color:#53695d;font-size:12px}.broker-help summary{cursor:pointer;font-weight:600}.broker-help p{padding:12px 0;line-height:1.7}.broker-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.broker-status{color:var(--green);font-size:13px;margin:18px 0;overflow-wrap:anywhere}.broker-auth{background:#e8f2e9aa;border:1px solid white;border-radius:12px;padding:20px;margin:20px 0}.broker-auth strong{display:block;font-size:25px;letter-spacing:3px;margin:10px 0}.broker-auth .small{margin-top:14px}#scalable-preview .panel-heading{padding:20px 0 12px}#scalable-sync-form{border-top:1px solid var(--line);padding-top:20px}#scalable-sync-form .small{margin-bottom:18px}#scalable-blocker{background:#fff0e8b8;color:#8f4024;border:1px solid #e6bca9;border-radius:8px;padding:12px;margin:16px 0;font-size:13px}#scalable-warnings{padding-left:20px;max-height:150px;overflow:auto}#scalable-warnings li{margin:7px 0}#scalable-preview-extra{margin-top:12px}#scalable-preview td{white-space:normal}

.cash-metrics{margin-top:-4px}.cash-metrics h2{font-size:26px}.cash-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0 24px 24px}.cash-breakdown dt{font-size:11px;color:var(--muted);margin-bottom:6px}.cash-breakdown dd{margin:0;font-size:16px;font-weight:550}.cash-panel>p{padding:0 24px 24px}.transaction-filter{margin:0 auto 0 16px;font-size:10px}.transaction-filter select{margin-top:2px;padding:6px 10px;font-size:12px}#scalable-cash-summary{margin-bottom:12px}@media(max-width:900px){.cash-breakdown{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.cash-metrics h2{font-size:22px}.transaction-filter{margin-left:0}.transaction-filter select{max-width:130px}#transactions-view .panel-heading{flex-wrap:wrap}}

.local-key-panel{background:#edf5ef90;border:1px solid #ffffffde;border-radius:12px;padding:18px;margin-top:22px}.local-key-panel>p{margin-top:8px}.local-sync-steps{padding-left:22px;color:#53695d;font-size:13px;line-height:1.75}.local-sync-steps li{padding:8px 0}.local-sync-steps a:not(.secondary){color:var(--green);text-decoration:underline}.local-sync-steps p{margin-top:10px}.local-sync-steps pre{background:#183e30;color:#e8f5e9;overflow:auto;padding:16px;border-radius:9px;font-size:12px}.local-sync-steps code{overflow-wrap:anywhere}#scalable-key-value{font-family:monospace}#scalable-price-details{margin-top:20px;font-size:12px}#scalable-price-details summary{cursor:pointer;font-weight:600}#scalable-key-status{overflow-wrap:anywhere}

.savings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:0 24px 24px}.savings-card{padding:18px;background:#eaf3ec99;border:1px solid #fff;border-radius:12px}.savings-card h2{margin:8px 0}.savings-card p{color:var(--green)}.savings-card small{display:block;color:var(--muted);margin-top:10px}#scalable-savings-preview{margin:18px 0}#scalable-import-reason{margin-bottom:12px;max-width:100%}#scalable-preview>.broker-toolbar{position:sticky;bottom:-28px;background:#f5faf7f5;padding:16px 0;margin-bottom:0;z-index:1;border-top:1px solid var(--line)}

.positions-mode{display:flex;flex-direction:column}.positions-mode .metrics{order:0}.positions-mode .grid{order:1}.positions-mode #savings-panel{order:2}#add:disabled,.price-btn:disabled{cursor:not-allowed}

.mobile-sync-panel{padding:18px;border:1px solid var(--line);border-radius:16px;margin:18px 0}.mobile-sync-panel>button{margin:0 8px 12px 0}.mobile-sync-panel details{margin-top:14px}.mobile-sync-panel input{width:100%;box-sizing:border-box}.local-sync-alternative{margin:20px 0}.local-sync-alternative>summary{cursor:pointer;color:var(--muted)}#scalable-login{padding:16px;border-radius:12px;background:rgba(92,187,149,.08);margin:16px 0}#scalable-login-code{font-size:1.15rem;letter-spacing:.08em}#scalable-login-link{display:inline-block}#scalable-status{overflow-wrap:anywhere}