/* 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);
  }
}

/* A compact, consistent type scale for Chart controls and information panels. */
#app{font-family:var(--font);font-size:14px;line-height:1.5}
#app button,#app input,#app select,#app textarea,
#hSheet button,#hSheet a,.acctDrop a,.acctDrop button,
.wlrow .b,.wlrow .d,.wlrow .p,.wlrow .c,
.tradebar .tb .tb-l,.tradebar .tb .tb-p,.tradebar .tunda{
  font-family:var(--font);
}
#symBtn .sy{font-size:14px;font-weight:600;letter-spacing:0}
#symBtn .sub,#app .tf-row button,#app .hbtn,
#wlAdd,.wlrow .d,.wlrow .c,#lgd .tfl,#lgd .ohlc,#lgd .ind,
#lgdHide .lgd-action,.ic-cat span,.ic-foot,#stSub,.st-desc,
#hSheet .hbtn::after{
  font-size:12px;line-height:1.5;letter-spacing:0;
}
#app .tf-row button,#app .hbtn{font-weight:600}
.wlrow .b,.wlrow .p,.ic-nm b,.ic-cat,#lgd .nm,
.st-row label,#stTitle,.acctDrop a,.acctDrop button{
  font-size:14px;line-height:1.5;letter-spacing:0;
}
.wlrow .b,.wlrow .p,.ic-nm b,#lgd .nm,#stTitle{font-weight:600}
.wlrow .d,.ic-nm i{font-size:12px;line-height:1.5}
.wlrow .p,.wlrow .c,#lgd .ohlc,.tradebar .tb .tb-p{
  font-variant-numeric:tabular-nums;
}
.tradebar .tb .tb-l,.tradebar .tb .tb-p,.tradebar .tunda{
  font-size:12px;line-height:1.3;letter-spacing:0;font-weight:600;
}
#arenaPil{font-family:var(--font);font-size:12px;line-height:1.5;letter-spacing:0;font-weight:600}
@media(max-width:640px){
  #app .tf-row button{padding-left:8px;padding-right:8px}
  .tradebar .tb{flex-direction:column;gap:1px;min-height:38px;padding:3px 5px}
  .tradebar .tb .tb-p{font-size:12px}
  .tradebar .tunda{min-height:38px;padding-left:6px;padding-right:6px;font-size:12px}
  #arenaPil{font-size:12px;max-width:88px;white-space:nowrap}
  .tradebar{align-items:stretch}
}