/* Member chart: compact surfaces; canvas geometry and market colours stay in chart.css. */
html[data-theme="light"] {
  --accent:#176b46; --accent-soft:#e4f2e9;
  --page:#f7faf8; --surface:#fff; --panel:#fff; --panel-2:#edf5f0;
  --hair:#e0ebe4; --hair-2:#c9ddd0;
  --ink:#18382a; --ink-2:#536d60; --muted:#6e8176;
}
#app>header {border-bottom:1px solid var(--hair);gap:6px}
#app .brand b {color:var(--accent)}
#symBtn {border:1px solid var(--hair);border-radius:10px;min-height:38px}
#app .hbtn {min-height:36px;border-radius:9px}
#app .tf-row button {min-height:34px;border-radius:8px;font-weight:700}
#app .tf-row button.on {box-shadow:inset 0 0 0 1px var(--accent)}
html[data-theme="light"] #tfRow button.on {background:var(--accent);color:#fff;box-shadow:none}
#rail .tool {border-radius:9px}
#rail .tool.on {box-shadow:inset 0 0 0 1px var(--accent)}
#symDrop,#tfBox {border-radius:14px}
html[data-theme="light"] #symDrop,
html[data-theme="light"] #tfBox,
html[data-theme="light"] #indBox,
html[data-theme="light"] #alatBox {box-shadow:0 12px 40px #163d261a}
.wlrow {min-height:48px;align-content:center;padding-top:9px;padding-bottom:9px}
.wlrow .b,.wlrow .p {font-size:13px}
.wlrow .d,.wlrow .c {font-size:11px}
.wlrow.on {background:var(--accent-soft)}
.ic-row {min-height:46px}
.ic-nm b {font-size:14px}
.ic-nm i {font-size:12px}
.ic-head button,.ic-cat {min-height:36px}
#app button:focus-visible,#app summary:focus-visible,
.ic-row:focus-visible,.ic-cat:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:980px) and (min-height:431px) {
  #rail .tool {width:38px;height:38px}
  #railFav {overscroll-behavior:contain}
}
@media (max-width:640px) {
  #app>header {gap:3px}
  #app>header .hbtn {min-width:36px;padding-left:8px;padding-right:8px}
  #app>header .hbtn svg {width:18px;height:18px}
  #symBtn {padding:5px 7px;gap:4px}
  #symBtn .sy {font-size:14px}
  #app .tf-row button {padding-left:8px;padding-right:8px}
  #indQ {font-size:16px;min-width:0}
  .ic-head button {min-width:38px;min-height:40px}
  .ic-fav {width:34px;height:34px}
  #hSheet .hbtn {border:1px solid var(--hair);border-radius:12px;background:var(--panel)}
  #hSheet .hbtn::after {font-size:14px}
  .acctDrop a,.acctDrop button {min-height:44px;font-size:14px}
}

/* Float mobile trading controls clear of the drawing rail and member dock. */
@media (max-width:640px) {
  #app {
    grid-template-rows:52px minmax(0,1fr);
    grid-template-areas:"hdr hdr hdr" "rail main side";
  }
  .tradebar {
    position:absolute;
    left:54px;
    right:8px;
    bottom:8px;
    z-index:55;
    gap:5px;
    padding:5px;
    background:color-mix(in srgb,var(--page) 92%,transparent);
    border:1px solid var(--hair-2);
    border-radius:13px;
    box-shadow:0 8px 24px rgba(0,0,0,.32);
    backdrop-filter:blur(8px);
  }
}