:root{
  --bg:#09111f; --card:#121b2a; --card2:#172235; --text:#f4f7fb; --muted:#9aa8ba;
  --border:#334761; --green:#20d779; --red:#ff4757; --blue:#2e8cf3; --purple:#6754d9;
  --orange:#e4872e; --input:#1d2a3d; --shadow:0 10px 30px rgba(0,0,0,.28);
}
:root.light{
  --bg:#e9eff6; --card:#ffffff; --card2:#f5f8fc; --text:#101722; --muted:#4d5a6b;
  --border:#91a3b8; --input:#ffffff; --shadow:0 8px 24px rgba(21,41,67,.13);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px}
body{padding-bottom:78px}
button,input{font:inherit}
button{cursor:pointer}
#appShell{max-width:1500px;margin:0 auto;padding:10px 12px 0}
.card{background:var(--card);border:1.5px solid var(--border);border-radius:17px;box-shadow:var(--shadow)}
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(130px,.7fr) minmax(150px,.75fr);gap:12px;align-items:center;padding:12px 16px;margin-bottom:12px}
.brand{font-size:clamp(22px,3vw,31px);font-weight:800;color:var(--green);line-height:1.05}
.tagline{font-size:clamp(13px,1.7vw,16px);font-weight:700;letter-spacing:.03em;margin-top:5px;color:var(--muted)}
.headerMetric{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.headerMetric span{font-size:14px;color:var(--muted);font-weight:800}.headerMetric strong{font-size:clamp(18px,2.3vw,24px)}
.connectionBadge{justify-self:end;text-align:center;font-weight:900;font-size:clamp(14px,1.8vw,17px);padding:10px 12px;border-radius:12px;border:1px solid var(--border);min-width:150px}.connectionBadge.on{color:var(--green)}.connectionBadge.off{color:var(--red)}
.page{display:none}.page.active{display:block}
.pageHeading{text-align:center;margin:14px 0 12px}.pageHeading h1{font-size:clamp(24px,4vw,34px);margin:0}.pageHeading p{color:var(--muted);font-size:16px;margin:5px 0 0}
h2{font-size:clamp(20px,2.7vw,26px);margin:14px 0 10px}
.summaryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.metric{min-height:112px;padding:14px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:7px}.metric span{font-size:16px;color:var(--muted);font-weight:800}.metric strong{font-size:clamp(23px,3.5vw,32px)}.metric.positive strong{color:var(--green)}.metric.negative strong{color:var(--red)}
.toolRow{display:flex;gap:10px;padding:11px;margin:12px 0}.toolRow.flush{padding:0;margin:0}.toolRow input{flex:1;min-width:0}
input{width:100%;min-height:48px;border:1.5px solid var(--border);border-radius:12px;background:var(--input);color:var(--text);padding:10px 12px;font-size:18px;outline:none}input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,140,243,.15)}
.btn{border:1.5px solid #315b82;border-radius:12px;background:#173a63;color:#fff;padding:11px 15px;min-height:46px;font-weight:850;font-size:15px;letter-spacing:.01em}.btn:hover{filter:brightness(1.08)}.btn.green{background:#137343;border-color:#20a861}.btn.red{background:#8d2632;border-color:#d84655}.btn.purple{background:#4d409d;border-color:#7364d9}.btn.orange{background:#7e481c;border-color:#c46b25}.btn.wide{width:100%;margin:10px 0}
.stack{display:flex;flex-direction:column;gap:9px}.positionCard,.favoriteCard,.orderCard,.timeCard{padding:13px 14px}.positionCard{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(220px,1.2fr) auto;gap:13px;align-items:center}.tickerTitle{font-size:24px;font-weight:900}.subline,.muted{color:var(--muted);font-size:15px;line-height:1.5}.positionNumbers{text-align:right;font-size:17px;line-height:1.55}.positionNumbers strong{font-size:22px}.gain{color:var(--green)}.loss{color:var(--red)}
.hitButton{min-width:76px}
.emptyState{padding:30px;text-align:center;color:var(--muted);font-size:17px}
.tradePanel,.settingsCard{max-width:860px;margin:0 auto 14px;padding:16px;display:flex;flex-direction:column;gap:12px}.quoteDisplay{text-align:center;color:var(--green);font-size:clamp(28px,5vw,42px);font-weight:900;padding:22px 8px}.twoButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.infoText,.safetyNotice,.statusBox{font-size:16px;line-height:1.5;padding:11px 12px;border-radius:11px;background:var(--card2);border:1px solid var(--border)}.safetyNotice{color:var(--muted)}
.watchGrid{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:10px}.watchCard{padding:11px;display:flex;flex-direction:column;gap:8px}.watchChooser{display:grid;grid-template-columns:1fr auto;gap:7px}.watchSymbol{text-align:center;font-weight:900;font-size:24px}.watchPrice{text-align:center;color:var(--green);font-weight:900;font-size:25px}.miniChart{width:100%;height:135px;background:linear-gradient(180deg,rgba(46,140,243,.08),transparent);border-radius:10px}.highLowLine{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;border-top:1px solid var(--border);padding-top:8px;font-size:16px}.highLowLine strong{font-size:17px}.highLowLine .valueTime{justify-self:end;text-align:right;font-weight:800}.highLowLine.high{color:var(--green)}.highLowLine.low{color:var(--red)}
.timeCard{display:grid;grid-template-columns:minmax(100px,.55fr) minmax(240px,1fr) minmax(240px,1fr);gap:10px;align-items:center}.timeSymbol{font-size:23px;font-weight:900}.timeBlock{text-align:center;padding:8px;border-left:1px solid var(--border)}.timeBlock .label{font-size:15px;font-weight:900}.timeBlock .amountTime{font-size:18px;font-weight:900;margin:5px 0}.timeBlock .period{font-size:15px;color:var(--muted)}
.rangeGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:10px 0}.rangeGrid .btn{padding:8px 4px;min-height:42px}.rangeGrid .btn.selected{outline:3px solid rgba(32,215,121,.35);border-color:var(--green)}.compCard{padding:14px}.compCard h2{text-align:center;margin:4px 0 8px}.compCard canvas{width:100%;height:auto;min-height:260px;background:var(--card2);border-radius:12px}.compSummary{text-align:center;font-size:17px;line-height:1.55;padding:10px}
.orderCard{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}.orderCard>div:nth-child(2){text-align:center}.orderCard>div:nth-child(3){text-align:right}.orderSide{font-size:20px;font-weight:900}.orderStatus{font-size:18px;font-weight:900}
.favoriteCard{display:grid;grid-template-columns:minmax(150px,1fr) auto auto auto;gap:8px;align-items:center}.favoritePrice{font-size:18px;color:var(--muted)}
.restoreLabel{display:flex;align-items:center;justify-content:center}.restoreLabel input{display:none}
.bottomNav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(8,15,27,.97);border-top:1px solid #27364c;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}.bottomNav button{flex:0 0 auto;min-width:102px;min-height:48px;border-radius:11px;border:1px solid #34455e;background:#111b2a;color:#d9e2ee;font-weight:850;font-size:14px}.bottomNav button.active{background:#24558c;border-color:#3a82c9;color:#fff}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}.modal.hidden{display:none}.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.68)}.modalCard{position:relative;width:min(520px,96vw);padding:18px}.modalCard h2{margin-top:0}.modalActions{display:grid;gap:8px;margin-top:14px}.modalBody{font-size:16px;line-height:1.5}.toast{position:fixed;z-index:120;left:50%;bottom:88px;transform:translate(-50%,20px);background:#172235;color:#fff;border:1px solid #49617d;border-radius:12px;padding:11px 16px;opacity:0;pointer-events:none;transition:.2s;max-width:min(620px,92vw);font-size:16px}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.watchGrid{grid-template-columns:repeat(2,minmax(230px,1fr))}.rangeGrid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px){body{padding-bottom:76px}#appShell{padding:6px 7px 0}.topbar{grid-template-columns:1.45fr .8fr .8fr;padding:9px 10px;gap:7px}.brand{font-size:20px}.tagline{font-size:12px}.headerMetric span{font-size:12px}.headerMetric strong{font-size:17px}.connectionBadge{min-width:0;padding:8px 6px;font-size:12px}.summaryGrid{grid-template-columns:repeat(2,1fr);gap:7px}.metric{min-height:92px;padding:9px}.metric span{font-size:15px}.metric strong{font-size:22px}.toolRow{flex-wrap:wrap}.toolRow input{flex:1 1 180px}.toolRow .btn{flex:1 1 120px}.positionCard{grid-template-columns:1fr auto;gap:8px}.positionNumbers{text-align:left;grid-column:1/2}.hitButton{grid-column:2;grid-row:1/3;height:100%}.watchGrid{grid-template-columns:1fr}.miniChart{height:150px}.timeCard{grid-template-columns:1fr 1fr}.timeSymbol{grid-column:1/-1;text-align:center;border-bottom:1px solid var(--border);padding-bottom:7px}.timeBlock{border-left:0}.orderCard{grid-template-columns:1fr 1fr}.orderCard>div:nth-child(3){grid-column:1/-1;text-align:left}.favoriteCard{grid-template-columns:1fr 1fr}.favoriteCard .btn{width:100%}.rangeGrid{grid-template-columns:repeat(5,1fr)}.twoButtons{grid-template-columns:1fr}.pageHeading p{font-size:15px}}
@media(max-width:430px){.summaryGrid{grid-template-columns:1fr 1fr}.topbar{grid-template-columns:1.35fr .8fr}.connectionBadge{grid-column:1/-1;justify-self:stretch}.watchCard,.positionCard,.favoriteCard,.orderCard,.timeCard{border-radius:13px}.rangeGrid{grid-template-columns:repeat(5,1fr)}.timeCard{grid-template-columns:1fr}.timeBlock{border-top:1px solid var(--border)}.bottomNav button{min-width:94px;font-size:13px}}

.autoPanel{padding:16px;margin-bottom:16px}.autoPanel>label{display:flex;align-items:center;gap:10px;margin:14px 0}.autoPanel input[type=checkbox]{appearance:auto;width:24px;height:24px;flex:none;accent-color:#40cfa0}.autoPanel .toolRow>label{flex:1;min-width:150px}.autoPanel input{max-width:100%}.autoPanel p{overflow-wrap:anywhere}.autoPanel #autoHistory{white-space:pre-wrap;font-size:14px}

.bottomNav{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));overflow-x:hidden;gap:3px}.bottomNav button{min-width:0;width:100%;padding:4px 1px;font-size:clamp(7px,1.7vw,14px);overflow-wrap:anywhere}

.spsLogo{width:52px;height:52px;object-fit:contain;border-radius:12px;flex-shrink:0}.presetGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.presetGrid button{min-width:0;padding:10px 3px;overflow-wrap:anywhere}button[aria-pressed="true"]{border:2px solid #45ec9a}input[type="checkbox"]{appearance:auto;width:22px;height:22px;min-height:22px;accent-color:#20cf83;vertical-align:middle}@media(max-width:420px){.spsLogo{width:36px;height:36px}}

.stockActions{display:flex;flex-direction:column;gap:6px}.stockActions .btn{min-height:38px;padding:8px;font-size:12px}#stockAutoDialog{background:var(--bg,#09111f);color:var(--text,#eef5ff);border:1px solid #49617d;border-radius:14px;width:min(640px,94vw);max-height:90vh;padding:8px}#stockAutoDialog::backdrop{background:#000a}#stockAutoDialog .autoPanel{margin:0}.fundingToggle{width:100%;min-height:48px}button[aria-checked="true"]{border-color:#ffae55}button[aria-checked="false"]{border-color:#20cf83}

.brandIcon{width:44px;height:44px;object-fit:contain;flex:none}#spsLoading{position:fixed;inset:0;z-index:9999;background:#071018;display:flex;align-items:center;justify-content:center;flex-direction:column;color:white}#spsLoading img{max-width:90vw;max-height:80vh;object-fit:contain}#spsLoading[hidden]{display:none}

/* Two navigation rows, with readable labels in both themes. */
.bottomNav{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(46px,auto));background:var(--card);border-color:var(--border);gap:5px}
.bottomNav button{font-size:clamp(11px,2.9vw,15px);padding:7px 3px;line-height:1.2;overflow-wrap:normal;background:var(--card2);color:var(--text);border-color:var(--border)}
body{padding-bottom:calc(124px + env(safe-area-inset-bottom))}.toast{bottom:136px}
:root.light{--green:#086b38;--red:#b51c32;--blue:#175fad;--purple:#57409c}
button.statusBox{color:var(--text)}button:disabled{cursor:default;opacity:.8}
dialog{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;width:min(740px,94vw);max-height:90vh;overflow:auto;padding:18px}dialog::backdrop{background:#000a}
dialog a{color:var(--blue)}select{font:inherit;background:var(--input);color:var(--text);max-width:100%;border:1px solid var(--border)}
.legalText{white-space:pre-wrap;line-height:1.6;font-size:16px}.legalText+ p{font-weight:700}
:root.light .avePanel{background:#eaf3f8;color:#142338;border-color:#738c9c}:root.light .aveTitle,:root.light #aveSummary{color:#075943}:root.light .aveTitle span{color:#41566b}

/* Keep backup and restore adjacent on phone screens too. */
.backupButtons{grid-template-columns:repeat(2,minmax(0,1fr))}.backupButtons>.btn{min-width:0;white-space:normal;line-height:1.3;padding:11px 6px}

/* Eastern market clock: bold, theme-aware, with room for phone wrapping. */
.easternClock{color:var(--text);font-size:17px;font-weight:800;line-height:1.4;text-align:left;font-variant-numeric:tabular-nums;padding:6px 0;overflow-wrap:anywhere}
.homeTimeRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;margin:8px 0}
.homeTimeRow h2{color:var(--text);font-size:17px;font-weight:800;line-height:1.4;text-align:right;margin:0;overflow-wrap:anywhere}

.watchActions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.watchActions .btn{flex:1 1 140px;font-weight:800;white-space:normal}#watchingStatus{color:var(--text);font-weight:700}.settingsCard>#themeButton{display:block;width:100%;margin-bottom:10px}

.watchOwned{text-align:right;border:1px solid var(--border);border-radius:5px;padding:5px;margin-left:auto;width:max-content}.timeCard{grid-template-columns:1fr 1.5fr 1fr 1.5fr}.timeAverage{grid-column:1/-1;padding:10px;border-top:1px solid var(--border)}@media(max-width:700px){.timeCard{grid-template-columns:1fr}.timeSymbol{text-align:left}.timeBlock{text-align:left}}