/* Range Option Selling — styles. Loaded globally by Dash from /assets, so every rule is scoped
   under .ros-app. Shared node tokens: panels rgba(0,0,0,0.6), chips rgba(255,255,255,0.06),
   radius 10px, text #e8e8e8, muted #9fb3c8, headings #cfefff, accent #f0a030. */

.ros-app { color: #e8e8e8; font-size: 13px; display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 6vh); }
.ros-app * { box-sizing: border-box; }
.ros-top { display: flex; align-items: center; gap: 14px; padding-right: 200px; min-height: 36px; }
.ros-title { color: #cfefff; font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.ros-title i { color: #f0a030; margin-right: 4px; }
.ros-srow { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ros-status { color: #9fb3c8; font-size: .72rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
              max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ros-ibtn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #9fb3c8; border-radius: 8px;
            width: 30px; height: 28px; cursor: pointer; }
.ros-ibtn:hover { color: #f0a030; border-color: #f0a030; }
.ros-prog { display: inline-block; width: 90px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.ros-prog > span { display: block; height: 100%; background: #f0a030; }
.ros-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(240,160,48,0.3); border-top-color: #f0a030;
            animation: ros-rot .8s linear infinite; display: inline-block; }
@keyframes ros-rot { to { transform: rotate(360deg); } }

.ros-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; background: rgba(255,255,255,0.05);
           border-radius: 10px; padding: 8px 12px; }
.ros-k { color: #9fb3c8; font-size: .66rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.ros-ctrl.w-sec { width: 230px; }
.ros-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ros-pills label { margin: 0; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
                   border-radius: 14px; padding: 3px 11px; font-size: .76rem; color: #e8e8e8; user-select: none; }
.ros-pills label:has(input:checked) { border-color: #f0a030; color: #f0a030; background: rgba(240,160,48,0.08); }
.ros-pills input { display: none; }
.ros-in { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #e8e8e8;
          height: 30px; padding: 0 10px; font-size: .8rem; width: 140px; outline: none; }
.ros-in:focus { border-color: #f0a030; }
.ros-app .Select-control { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important;
                           border-radius: 8px !important; min-height: 30px; }
.ros-app .Select-value-label, .ros-app .Select-input > input { color: #e8e8e8 !important; font-size: .8rem; }
.ros-app .Select-placeholder { line-height: 28px !important; color: #9fb3c8; font-size: .8rem; }
.ros-app .Select--multi .Select-value { background: rgba(240,160,48,0.12); border-color: rgba(240,160,48,0.45);
                                        color: #f5d6a3; border-radius: 10px; font-size: .72rem; }
.ros-app .Select-menu-outer { background: #141a21 !important; border: 1px solid rgba(255,255,255,0.15) !important; z-index: 10050; }
.ros-app .VirtualizedSelectOption { color: #e8e8e8; font-size: .8rem; }
.ros-app .VirtualizedSelectFocusedOption { background: rgba(240,160,48,0.15); }

.ros-main { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; }
.ros-left { flex: 0 0 min(46%, 820px); min-width: 0; display: flex; flex-direction: column; background: rgba(0,0,0,0.35);
            border-radius: 10px; padding: 8px 10px; overflow: hidden; }
.ros-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: rgba(0,0,0,0.35);
             border-radius: 10px; padding: 8px 10px; overflow-y: auto; }
.ros-right.ros-hide { display: none; }
/* chart row: the chart + the (optional) explanation panel of a clicked line */
.ros-headrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ros-hint { margin-left: auto; }
.ros-hint i { color: #f0a030; margin-right: 3px; }
.ros-chartrow { flex: 1 1 auto; min-height: 320px; display: flex; gap: 8px; }
.ros-chart-wrap { flex: 1 1 auto; min-width: 0; min-height: 320px; border-radius: 10px; overflow: hidden; position: relative; }
.ros-chart-wrap > div, .ros-chart-wrap .js-plotly-plot { height: 100% !important; }
.ros-info { flex: 0 0 340px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
            padding: 8px 10px; overflow-y: auto; font-size: .76rem; color: #cfd9e3; }
.ros-info.ros-hide { display: none; }
.ros-info-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 4px; }
.ros-info h6 { color: #cfefff; font-size: .78rem; margin: 10px 0 3px; font-weight: 600; }
.ros-info p { margin: 0 0 5px; line-height: 1.45; }
.ros-info .ros-fine { color: #9fb3c8; font-size: .7rem; }
.ros-note { background: rgba(240,160,48,0.08); border-left: 2px solid #f0a030; border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; }
.ros-kvrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ros-kv { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 2px 8px; }
.ros-kk { color: #9fb3c8; margin-right: 5px; font-size: .68rem; }
.ros-kvv { font-family: Consolas, monospace; color: #e8e8e8; }
.ros-formula { font-family: Consolas, monospace; font-size: .7rem; color: #f5d6a3; background: rgba(0,0,0,0.3);
               border-radius: 6px; padding: 3px 6px; margin: 2px 0; }
.ros-itable { width: 100%; border-collapse: collapse; margin: 4px 0 6px; font-family: Consolas, monospace; font-size: .7rem; }
.ros-itable th { color: #9fb3c8; font-weight: 500; text-align: right; padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ros-itable td { text-align: right; padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ros-itable th:first-child, .ros-itable td:first-child { text-align: left; color: #cfefff; }

/* the controls: labels with a hover explanation + a plain-language summary line */
.ros-q { margin-left: 5px; color: #6f8599; font-size: .7rem; cursor: help; }
.ros-ctrl:hover .ros-q { color: #f0a030; }
.ros-explain { color: #cfd9e3; font-size: .78rem; padding: 0 4px; line-height: 1.4; }
.ros-explain b { color: #f0a030; font-weight: 600; }

/* left panel: full table, or collapsed to a thin list of tickers */
.ros-tablewrap { min-height: 0; flex: 1 1 auto; }
.ros-left.collapsed { flex: 0 0 96px; padding: 8px 6px; }
.ros-left.collapsed .ros-full-only { display: none; }
.ros-left:not(.collapsed) .ros-col-only { display: none; }
.ros-left .ros-hrow { flex-wrap: nowrap; align-items: center; }
.ros-rail-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 4px; }
.ros-rail { display: flex; flex-direction: column; gap: 2px; }
.ros-rail label { display: flex !important; justify-content: space-between; align-items: baseline; margin: 0; cursor: pointer;
                  padding: 4px 7px; border-radius: 8px; font-family: Consolas, monospace; font-size: .76rem; color: #cfd9e3;
                  border: 1px solid transparent; }
.ros-rail label:hover { background: rgba(255,255,255,0.06); }
.ros-rail input { display: none; }
.ros-rail label > span { display: flex; justify-content: space-between; width: 100%; gap: 4px; }
.ros-rail-sc { color: #6f8599; font-size: .64rem; }
.ros-rail label.ros-on, .ros-rail label:has(input:checked) { background: rgba(240,160,48,0.2); border-color: #f0a030;
                  color: #ffd79a; font-weight: 700; }
.ros-rail label:has(input:checked) .ros-rail-sc { color: #f0a030; }
.ros-hrow { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 6px; flex-wrap: wrap; }
.ros-h { color: #cfefff; font-weight: 600; font-size: .9rem; }
.ros-sub { color: #9fb3c8; font-size: .72rem; }
.ros-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.ros-tk { color: #cfefff; font-size: 1.15rem; font-weight: 700; }
.ros-nm { font-size: .85rem; }
.ros-px { font-family: Consolas, monospace; font-size: .95rem; color: #f2f7fb; }
.ros-chg { font-family: Consolas, monospace; font-size: .8rem; }
.ros-chg.pos { color: #5fcf8f; }
.ros-chg.neg { color: #e06a6a; }
.ros-chip { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 2px 9px; font-size: .72rem; color: #cfd9e3; }

.ros-notes { margin-top: 8px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 6px 10px; }
.ros-notes summary { color: #9fb3c8; font-size: .76rem; cursor: pointer; }
.ros-notes-b { max-height: 34vh; overflow-y: auto; font-size: .76rem; color: #cfd9e3; }
.ros-notes-b h5 { color: #cfefff; font-size: .8rem; margin: 10px 0 3px; }
.ros-notes-b p { margin: 0 0 4px; line-height: 1.45; }

.ros-evgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px; }
.ros-evcard { background: rgba(255,255,255,0.03); border-radius: 10px; padding: 6px 8px; }
.ros-evp { color: #cfd9e3; font-size: .76rem; line-height: 1.45; margin: 4px 2px; }
.ros-evp.mono { font-family: Consolas, monospace; font-size: .7rem; color: #9fb3c8; }

@media (max-width: 900px) {
  .ros-main { flex-direction: column; }
  .ros-left { flex: 0 0 auto; max-height: 55vh; }
  .ros-left.collapsed { flex: 0 0 auto; max-height: 64px; }
  .ros-left.collapsed .ros-rail { flex-direction: row; overflow-x: auto; }
  .ros-chartrow { flex-direction: column; }
  .ros-info { flex: 0 0 auto; max-height: 45vh; }
  .ros-top { padding-right: 150px; }
}

/* ---- universe chip, prices switch (today's candle / last close), the bell ---------------------------------- */
.ros-unictl .pfp-chip { min-height: 36px; padding: 3px 10px 3px 9px; }
.ros-asof { display: flex; align-items: center; gap: 8px; }
.ros-asof.ros-hide { display: none; }
.ros-asof .ros-k { margin: 0; white-space: nowrap; }
.ros-status { max-width: 420px; }
.ros-live { color: #f0a030; }
.ros-chip.live { color: #f5d6a3; background: rgba(240,160,48,0.14); border: 1px solid rgba(240,160,48,0.45); }
.ros-chip.live i { color: #f0a030; }
.ros-wbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; cursor: pointer;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #cfd9e3; font-size: .74rem;
            white-space: nowrap; }
.ros-wbtn:hover { border-color: #f0a030; color: #f5d6a3; }
.ros-wbtn.on { border-color: rgba(95,207,143,0.7); color: #a9e6b0; background: rgba(95,207,143,0.10); }
.ros-wbtn.on i { color: #5fcf8f; }

/* ---- what changed in the top N since the previous session -------------------------------------------------- */
.ros-new { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 6px 9px 7px; margin-bottom: 6px; }
.ros-new-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ros-new-h .ros-k { margin: 0; }
.ros-new-h .ros-pills label { padding: 1px 9px; font-size: .72rem; }
.ros-new-b { margin-top: 5px; max-height: 92px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ros-nrow { display: flex; align-items: flex-start; gap: 8px; }
.ros-nlab { flex: 0 0 74px; font-size: .72rem; font-weight: 600; padding-top: 3px; white-space: nowrap; }
.ros-nlab.in { color: #5fcf8f; }
.ros-nlab.out { color: #e08a8a; }
.ros-nchips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.ros-nchip { display: inline-flex; align-items: baseline; gap: 6px; border-radius: 12px; padding: 2px 9px; cursor: pointer;
             font-family: Consolas, monospace; font-size: .74rem; color: #e8e8e8; background: rgba(255,255,255,0.05);
             border: 1px solid rgba(255,255,255,0.12); }
.ros-nchip.in { border-color: rgba(95,207,143,0.55); background: rgba(95,207,143,0.08); }
.ros-nchip.out { border-color: rgba(224,106,106,0.5); background: rgba(224,106,106,0.07); }
.ros-nchip:hover { border-color: #f0a030; color: #ffd79a; }
.ros-nchip-r { color: #9fb3c8; font-size: .64rem; }
.ros-rail-new { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #5fcf8f; margin-left: 4px;
                vertical-align: middle; }

/* ---- Schedule panel: when today's list is made (ros_clock.py runs the times chosen here) -------------------- */
.ros-sched { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column;
             gap: 6px; }
.ros-sched.ros-hide { display: none; }
.ros-sched-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ros-sched-row .ros-k { margin: 0; white-space: nowrap; }
.ros-sched-dd { flex: 1 1 360px; min-width: 300px; max-width: 760px; }
.ros-sched-note { color: #cfd9e3; font-size: .76rem; line-height: 1.5; }
.ros-warn { color: #ffb4ac; }
.ros-good { color: #a9e6b0; }
.ros-wbtn.warn { border-color: rgba(240,160,48,0.75); color: #f5d6a3; background: rgba(240,160,48,0.14); }
#mb_root .rosm-times label { min-height: 44px; flex: 1 1 28%; font-size: .84rem; white-space: nowrap; }

/* ---- phone view (ros_mobile.py, inside the mobile shell: every rule under #mb_root .rosm) -------------------- */
#mb_root .rosm { padding: 4px 14px calc(28px + env(safe-area-inset-bottom)); }
#mb_root .rosm-hero { padding: 12px 12px 10px; }
#mb_root .rosm-hero-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#mb_root .rosm-setup { color: var(--mb-head); font-weight: 650; font-size: .95rem; line-height: 1.3; }
#mb_root .rosm-when { color: var(--mb-muted); font-size: .8rem; margin-top: 4px; }
#mb_root .rosm-when i { color: var(--mb-acc); }
#mb_root .rosm-ib { flex: 0 0 44px; width: 44px; height: 44px; margin: -6px -6px 0 0; border-radius: 50%; background: var(--mb-chip);
                    border: 1px solid var(--mb-line); color: var(--mb-muted); }
#mb_root .rosm-ib:active { color: var(--mb-acc); border-color: var(--mb-acc); }
#mb_root .rosm-tabs { margin: 0 0 10px; flex-wrap: nowrap; gap: 6px; }
#mb_root .rosm-tabs label { min-height: 44px; font-size: .86rem; padding: 0 6px; white-space: nowrap; }
#mb_root .rosm-lists { min-height: 120px; margin-bottom: 14px; }
#mb_root .rosm-list { display: none; flex-direction: column; gap: 8px; }
#mb_root .rosm-lists.t-new .rosm-list[data-l="new"], #mb_root .rosm-lists.t-out .rosm-list[data-l="out"],
#mb_root .rosm-lists.t-top .rosm-list[data-l="top"] { display: flex; }
#mb_root .rosm-row { border-radius: 14px; background: var(--mb-panel); border: 1px solid var(--mb-line); overflow: hidden; }
#mb_root .rosm-row.in { border-left: 3px solid var(--mb-good); }
#mb_root .rosm-row.out { border-left: 3px solid var(--mb-bad); }
#mb_root .rosm-row > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 8px 10px;
                               cursor: pointer; }
#mb_root .rosm-row > summary::-webkit-details-marker { display: none; }
#mb_root .rosm-row[open] > summary { background: rgba(255,255,255,.04); }
#mb_root .rosm-rk { flex: 0 0 46px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#mb_root .rosm-rk b { color: var(--mb-head); font-size: 1rem; font-variant-numeric: tabular-nums; }
#mb_root .rosm-rk span { color: var(--mb-muted); font-size: .66rem; white-space: nowrap; }
#mb_root .rosm-mid { flex: 1 1 auto; min-width: 0; }
#mb_root .rosm-nm { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
#mb_root .rosm-nm b { color: #fff; font-size: 1rem; }
#mb_root .rosm-nm span { color: var(--mb-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mb_root .rosm-ln { color: var(--mb-text); font-size: .76rem; margin-top: 2px; white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; }
#mb_root .rosm-px { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
                    font-variant-numeric: tabular-nums; }
#mb_root .rosm-px b { font-weight: 600; font-size: .9rem; }
#mb_root .rosm-px span { font-size: .72rem; }
#mb_root .rosm-px .pos { color: var(--mb-good); }
#mb_root .rosm-px .neg { color: var(--mb-bad); }
#mb_root .rosm-sc { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                    color: var(--mb-acc); font-weight: 700; font-size: .9rem; border: 1px solid rgba(240,160,48,.55);
                    background: rgba(240,160,48,.08); font-variant-numeric: tabular-nums; }
#mb_root .rosm-det { padding: 4px 10px 12px; border-top: 1px solid var(--mb-line); }
#mb_root .rosm-kv { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
#mb_root .rosm-kv .ros-kv { background: var(--mb-chip); border-radius: 10px; padding: 3px 9px; font-size: .78rem; }
#mb_root .rosm-kv .ros-kk { color: var(--mb-muted); margin-right: 5px; font-size: .7rem; }
#mb_root .rosm-h6 { color: var(--mb-head); font-size: .82rem; font-weight: 650; margin: 10px 0 3px; }
#mb_root .rosm-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
#mb_root .rosm-tbl th { color: var(--mb-muted); font-weight: 500; font-size: .72rem; text-align: right; padding: 4px 6px;
                        border-bottom: 1px solid var(--mb-line); }
#mb_root .rosm-tbl td { text-align: right; padding: 6px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
#mb_root .rosm-tbl th:first-child, #mb_root .rosm-tbl td:first-child { text-align: left; color: var(--mb-head); }
#mb_root .rosm-note { color: var(--mb-muted); font-size: .8rem; padding: 8px 0 2px; }
#mb_root .rosm-cbtn { width: 100%; min-height: 44px; margin-top: 10px; border-radius: 12px; background: var(--mb-chip);
                      border: 1px solid var(--mb-line); color: var(--mb-head); font-size: .84rem; display: flex; align-items: center;
                      justify-content: center; gap: 8px; }
#mb_root .rosm-cbtn i { color: var(--mb-acc); }
#mb_root .rosm-chart { margin-top: 8px; border-radius: 10px; overflow: hidden; }
#mb_root .rosm-chart:empty { display: none; }
#mb_root .rosm-set > summary { list-style: none; cursor: pointer; color: var(--mb-head); font-weight: 650; min-height: 28px;
                               display: flex; align-items: center; gap: 8px; }
#mb_root .rosm-set > summary::-webkit-details-marker { display: none; }
#mb_root .rosm-set > summary i { color: var(--mb-acc); }
#mb_root .rosm-k { color: var(--mb-muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin: 12px 0 6px; }
#mb_root .rosm-set .mb-pills label { min-height: 44px; }
#mb_root .rosm-set .mb-sub { margin-top: 10px; }
#mb_root .rosm-foot { color: #7f93a8; font-size: .72rem; line-height: 1.45; padding: 2px 4px 0; }
/* the notifications switch (components/push.box; assets/master/ms_push.js sets data-ms-push-state) */
#mb_root .rosm .ms-push-status { font-size: .86rem; margin-top: 8px; color: var(--mb-text); }
#mb_root .rosm .ms-push-btns { flex-direction: column; gap: 0; margin-top: 2px; }
#mb_root .rosm .ms-push .ms-push-on, #mb_root .rosm .ms-push .ms-push-off,
#mb_root .rosm .ms-push .ms-push-test { display: none; color: var(--mb-head); background: var(--mb-chip);
                                        border-color: var(--mb-line); font-weight: 500; }
#mb_root .rosm .ms-push[data-ms-push-state="on"] .ms-push-status { color: #a9e6b0; }
#mb_root .rosm .ms-push[data-ms-push-state="blocked"] .ms-push-status,
#mb_root .rosm .ms-push[data-ms-push-state="server"] .ms-push-status { color: #ffb4ac; }
#mb_root .rosm .ms-push[data-ms-push-state="off"] .ms-push-on { display: flex; color: #1b1205; background: var(--mb-acc);
                                                               border-color: var(--mb-acc); font-weight: 650; }
#mb_root .rosm .ms-push[data-ms-push-state="on"] .ms-push-off,
#mb_root .rosm .ms-push[data-ms-push-state="on"] .ms-push-test { display: flex; }