/* v23 — polished dual theme + reliable iOS/iPadOS PWA theme control */
:root{--v23-red:#e32636;--v23-red-soft:rgba(227,38,54,.16);--v23-green:#16c991;--v23-radius:15px}

/* Header: segmented theme control with live sync directly underneath. */
.header-actions{display:grid!important;justify-items:end!important;align-content:center!important;gap:5px!important;margin-right:max(12px,env(safe-area-inset-right))!important;min-width:142px!important}
.theme-segment{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid #293a50;border-radius:12px;background:#101b2a;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.theme-segment button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:58px;padding:6px 8px;border:0;border-radius:9px;background:transparent;color:#8292a8;cursor:pointer;font-weight:800}
.theme-segment button span{font-size:13px;line-height:1}.theme-segment button small{font-size:10px;letter-spacing:.01em;color:inherit!important}
.theme-segment button.active{background:#1d2a3d;color:#f4f8fc;box-shadow:0 2px 7px rgba(0,0,0,.18)}
.sync{display:flex!important;align-items:center!important;justify-content:flex-end!important;min-height:18px!important;margin:0!important;padding:0 4px!important;border:0!important;background:transparent!important;color:#8191a5!important;font-size:10px!important;font-weight:700!important;white-space:nowrap!important}
.sync i{width:7px!important;height:7px!important;margin-right:7px!important;background:var(--v23-green)!important;box-shadow:0 0 0 4px rgba(22,201,145,.12)!important;animation:v23Pulse 1.55s ease-out infinite}
.sync i.checking{background:#f2b84b!important;box-shadow:0 0 0 4px rgba(242,184,75,.12)!important}
.sync i.partial{background:#f2b84b!important;box-shadow:0 0 0 4px rgba(242,184,75,.12)!important}
.sync i.error{background:#e95d6d!important;box-shadow:0 0 0 4px rgba(233,93,109,.12)!important;animation:none}
@keyframes v23Pulse{0%{box-shadow:0 0 0 0 rgba(22,201,145,.34)}70%{box-shadow:0 0 0 7px rgba(22,201,145,0)}100%{box-shadow:0 0 0 0 rgba(22,201,145,0)}}

/* More premium dashboard rhythm, without changing any data logic. */
.panel,.stock-card,.catalog-toolbar,.catalog-list{border-radius:var(--v23-radius)!important}
.market-sessions{gap:14px!important;margin-bottom:22px!important}
.market-sessions>div{position:relative;min-width:220px!important;padding:15px 16px!important;border-radius:15px!important}
.session-card-head{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.session-card-head b{margin:0!important;font-size:.9rem}.session-card-head .market-flag{width:30px;height:22px}
.market-sessions>p{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.market-sessions>p .ghost{margin-left:auto!important}
.index-strip{gap:14px!important}
.index-card{position:relative!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) minmax(90px,150px)!important;align-items:center!important;gap:11px!important;padding:16px!important;overflow:hidden}
.index-card .index-flag{align-self:start;padding-top:1px}.index-card .index-flag .market-flag{width:34px;height:25px}
.index-card .index-copy{min-width:0}.index-card .index-copy h3{margin-top:0!important}.index-card>svg{width:100%!important;max-width:150px!important;height:54px!important}

/* Detail chart always uses approved red accent. */
#historyChart polyline{stroke:var(--v23-red)!important;stroke-width:3!important;filter:drop-shadow(0 3px 5px rgba(227,38,54,.13))}
#historyChart .history-area{fill:url(#historyFill)!important}

/* Dark theme — mockup-inspired navy cards and clean contrast. */
html[data-theme="dark"] body{background:radial-gradient(circle at 72% -8%,#10243b 0,transparent 30%),#070d15!important;color:#edf4fa}
html[data-theme="dark"] header{background:rgba(7,14,24,.94)!important;border-color:#1e2c3d!important}
html[data-theme="dark"] aside,html[data-theme="dark"] #sidebar{background:#09121e!important;border-color:#1d2b3c!important}
html[data-theme="dark"] .panel,html[data-theme="dark"] .stock-card,html[data-theme="dark"] .catalog-toolbar,html[data-theme="dark"] .catalog-list{background:linear-gradient(145deg,#101b2a,#0d1623)!important;border-color:#223247!important;box-shadow:0 9px 24px rgba(0,0,0,.13)!important}
html[data-theme="dark"] .market-sessions>div{background:linear-gradient(145deg,#101d2d,#0c1724)!important;border-color:#24364a!important}
html[data-theme="dark"] .stock-row:hover,html[data-theme="dark"] .stock-row.selected,html[data-theme="dark"] .catalog-row:hover{background:#152439!important}
html[data-theme="dark"] .theme-segment{background:#0c1623;border-color:#2a3b50}html[data-theme="dark"] .theme-segment button.active{background:#243348;color:#fff}

/* Light theme — soft blue-gray, high contrast, no glare. */
html[data-theme="light"]{background:#eef3f7!important;color-scheme:light}
html[data-theme="light"] body{background:linear-gradient(180deg,#eef3f7 0,#f3f6f9 47%,#edf2f6 100%)!important;color:#122438!important}
html[data-theme="light"] header{background:rgba(245,248,251,.95)!important;border-color:#d6e0e8!important;box-shadow:0 1px 0 rgba(255,255,255,.82)!important}
html[data-theme="light"] .brand{color:#11283b!important;border-color:#d7e0e8!important}
html[data-theme="light"] .ticker b{color:#263d52!important}html[data-theme="light"] .ticker .status,html[data-theme="light"] .ticker em{color:#6b7f91!important}
html[data-theme="light"] aside,html[data-theme="light"] #sidebar{background:#e7eef4!important;border-color:#d2dce5!important;color:#1a3044!important}
html[data-theme="light"] aside nav button{color:#587083!important}html[data-theme="light"] aside nav button:hover{background:#dde7ef!important;color:#173044!important}html[data-theme="light"] aside nav button.active{background:#f7fafc!important;color:#113045!important;box-shadow:inset 3px 0 #20b88a,0 4px 15px rgba(55,79,99,.05)!important}
html[data-theme="light"] .panel,html[data-theme="light"] .stock-card,html[data-theme="light"] .catalog-toolbar,html[data-theme="light"] .catalog-list{background:#f9fbfc!important;border-color:#d5dfe7!important;box-shadow:0 8px 22px rgba(45,69,91,.055)!important}
html[data-theme="light"] .market-sessions>div{background:#f4f8fa!important;border-color:#d5dfe7!important;color:#183147!important}
html[data-theme="light"] .page-head h1,html[data-theme="light"] .panel h2,html[data-theme="light"] .stock-row b,html[data-theme="light"] .catalog-company b,html[data-theme="light"] .catalog-company span,html[data-theme="light"] .detail-head h1,html[data-theme="light"] .detail-price b{color:#132b3f!important}
html[data-theme="light"] .page-head p,html[data-theme="light"] .list-head p,html[data-theme="light"] .stock small,html[data-theme="light"] .price small,html[data-theme="light"] .catalog-company small,html[data-theme="light"] .catalog-status,html[data-theme="light"] .index-time{color:#64798c!important}
html[data-theme="light"] .stock-row{border-color:#dde5ec!important}html[data-theme="light"] .stock-row:hover,html[data-theme="light"] .stock-row.selected,html[data-theme="light"] .catalog-row:hover{background:#edf4f8!important}
html[data-theme="light"] .catalog-company:after{color:#08786f!important;font-weight:800!important}
html[data-theme="light"] .theme-segment{background:#e5ecf2;border-color:#cbd7e0;box-shadow:inset 0 1px rgba(255,255,255,.9)}
html[data-theme="light"] .theme-segment button{color:#65798b}html[data-theme="light"] .theme-segment button.active{background:#fff;color:#173247;box-shadow:0 2px 7px rgba(49,72,92,.11)}
html[data-theme="light"] .sync{color:#5f7688!important}
html[data-theme="light"] .ghost{background:#f7fafc!important;color:#29475a!important;border-color:#cbd8e1!important}
html[data-theme="light"] .bottom-nav{background:rgba(240,245,249,.96)!important;border-color:#d2dce5!important}
html[data-theme="light"] .bottom-nav button{color:#697e90!important}html[data-theme="light"] .bottom-nav button.active{color:#078865!important;background:#e2ecef!important}
html[data-theme="light"] .mobile-menu{color:#1d394e!important}
html[data-theme="light"] .stat,html[data-theme="light"] .month{background:#f6f9fb!important;border-color:#d7e1e9!important}
html[data-theme="light"] .ranges{background:#e8eef3!important;border-color:#d1dbe3!important}html[data-theme="light"] .ranges button{color:#5f7386!important}html[data-theme="light"] .ranges button.active{background:var(--v23-red)!important;color:#fff!important}

/* PWA/iPhone/iPad: theme controls are never hidden and respect safe areas. */
@media(max-width:900px){
  .app{grid-template-rows:64px 1fr!important}
  header{height:64px!important;grid-template-columns:42px minmax(0,1fr) 126px!important;min-width:0!important;padding-right:max(2px,env(safe-area-inset-right))!important}
  .mobile-menu{display:block!important;padding-left:max(12px,env(safe-area-inset-left))!important}
  .brand{min-width:0!important;padding:0 5px!important;gap:6px!important;overflow:hidden}.brand>img{width:30px!important;height:30px!important;flex:none}.brand>div{font-size:.76rem!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand>div small{display:none!important}
  .header-actions{display:grid!important;visibility:visible!important;opacity:1!important;min-width:122px!important;margin-right:2px!important;gap:2px!important;overflow:visible!important;position:relative!important;z-index:30!important}
  .theme-segment{display:grid!important;visibility:visible!important;width:120px!important;grid-template-columns:1fr 1fr!important;padding:2px!important;border-radius:10px!important}
  .theme-segment button{display:flex!important;visibility:visible!important;min-width:0!important;padding:5px 5px!important;border-radius:8px!important}.theme-segment button small{display:inline!important;font-size:9px!important}
  .sync{display:flex!important;visibility:visible!important;width:120px!important;justify-content:center!important;font-size:9px!important;padding:0!important}.sync i{flex:none!important;width:6px!important;height:6px!important;margin-right:5px!important}
  aside,#sidebar{top:64px!important}
  .index-card{grid-template-columns:40px minmax(0,1fr) 110px!important}.index-card>svg{max-width:110px!important}
}
@media(max-width:540px){
  header{grid-template-columns:38px minmax(0,1fr) 112px!important}
  .brand>img{width:28px!important;height:28px!important}.brand>div{font-size:.7rem!important;letter-spacing:.035em!important}.brand>div span{margin-left:2px!important}
  .header-actions{min-width:108px!important;width:108px!important}.theme-segment,.sync{width:108px!important}.theme-segment button{gap:3px!important;padding:5px 3px!important}.theme-segment button span{font-size:11px!important}.theme-segment button small{font-size:8.5px!important}
  .sync{font-size:8.5px!important}
  .market-sessions>div{min-width:calc(50% - 7px)!important;padding:12px!important}.session-card-head{gap:7px}.session-card-head b{font-size:.78rem}.session-card-head .market-flag{width:25px;height:18px}.market-sessions small{font-size:10px!important}.market-sessions .session-badge{font-size:9px!important}
  .index-strip{grid-template-columns:1fr!important}.index-card{grid-template-columns:38px minmax(0,1fr) 95px!important;padding:13px!important}.index-card>svg{max-width:95px!important}
}
@media(max-width:390px){
  header{grid-template-columns:34px minmax(0,1fr) 104px!important}.brand>img{width:25px!important;height:25px!important}.brand>div{font-size:.64rem!important}.header-actions,.theme-segment,.sync{width:102px!important;min-width:102px!important}.theme-segment button small{font-size:8px!important}
}

@media (display-mode: standalone){
  body{padding-top:env(safe-area-inset-top)}
  header{top:0!important}
  .bottom-nav{padding-bottom:calc(7px + env(safe-area-inset-bottom))!important}
}
html.pwa-standalone body{padding-top:env(safe-area-inset-top)}
/* Support the v22 session-title markup while preserving the v23 layout. */
.session-title{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}.session-title b{margin:0!important;font-size:.9rem}.session-title .market-flag{width:30px;height:22px}
@media(max-width:540px){.session-title{gap:6px}.session-title b{font-size:.78rem}.session-title .market-flag{width:25px;height:18px}}