.utility-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 7px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.utility-button:hover { background: var(--panel2); }
.utility-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.calendar-input { cursor: pointer; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9fa9' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 2v6m10-6v6M3 11h18'/%3E%3C/svg%3E"); background-size: 17px; background-position: right 12px center; background-repeat: no-repeat; }
.calendar-input:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.trade-calendar { width: min(360px, calc(100vw - 28px)); padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 80px #0007; }
.trade-calendar::backdrop { background: #080e1359; backdrop-filter: blur(3px); }
.calendar-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 17px; }
.calendar-heading strong { flex: 1; text-align: center; font-size: 15px; font-weight: 600; }
.calendar-heading button { width: 30px; height: 30px; border-radius: 6px; font-size: 23px; }
.calendar-heading button:hover, .calendar-actions button:hover { background: var(--panel2); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekdays { color: var(--muted); text-align: center; font-size: 10px; margin-bottom: 9px; }
.calendar-day { min-height: 41px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; font-size: 13px; border: 1px solid transparent; }
.calendar-day:hover { background: var(--panel2); }
.calendar-day.today { border-color: var(--line); }
.calendar-day.selected { background: var(--green); color: #172513; font-weight: 650; }
.calendar-day:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.calendar-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.calendar-dot.profit { background: #2cad68; }
.calendar-dot.loss { background: #ed5967; }
.calendar-dot.neutral { background: #93a4ad; }
.calendar-day.selected .calendar-dot { box-shadow: 0 0 0 1px #ffffffb3; }
.calendar-legend { display: flex; justify-content: center; gap: 13px; margin-top: 17px; font-size: 10px; color: var(--muted); }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-status { margin: 11px 0 !important; text-align: center; font-size: 10px !important; color: var(--muted); }
.calendar-actions { display: flex; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--line); }
.calendar-actions button { color: var(--green); font-size: 12px; border-radius: 5px; padding: 5px 9px; }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6f8;
  --panel: #ffffff;
  --panel2: #eaf0f3;
  --line: #d3dde3;
  --text: #20313c;
  --muted: #536774;
  --green: #287344;
  --red: #b83347;
  --amber: #8c5d15;
}
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] .sidebar { background: #e7eef2; }
[data-theme="light"] .topbar { background: #f3f6f8f5; }
[data-theme="light"] .nav-item, [data-theme="light"] .text-action, [data-theme="light"] .search-button { color: #476170; }
[data-theme="light"] .nav-item:hover, [data-theme="light"] .chart-actions button { background: #dce7ec; color: #243e4e; }
[data-theme="light"] .nav-item.active { background: #d2e8d8; color: #205b35; }
[data-theme="light"] .nav-item b { background: #c2dcc9; }
[data-theme="light"] .brand-icon, [data-theme="light"] .button { background: #287344; color: white; }
[data-theme="light"] .button.subtle { background: #e6eef2; color: #29434f; }
[data-theme="light"] .sidebar-toggle, [data-theme="light"] .stocks-button { color: #29434f; border-color: #b7c9d2; }
[data-theme="light"] input, [data-theme="light"] select { background-color: #f7fafb; color: #20313c; border-color: #bacbd3; }
[data-theme="light"] th { background: #edf3f6; color: #445d6a; }
[data-theme="light"] td { color: #293d49; }
[data-theme="light"] .index-card { background: #fff; }
[data-theme="light"] .index-card.selected { border-color: #619976; }
[data-theme="light"] .screen-card:hover { background: #edf5f0; }
[data-theme="light"] .contract-box { background: #edf5f0; border-color: #b5cdbc; }
[data-theme="light"] .contract-pending, [data-theme="light"] .tag, [data-theme="light"] .mode-badge { background: #e7eff2; color: #3d5864; }
[data-theme="light"] .direction, [data-theme="light"] .tag.accepted { background: #dcefe1; color: #23623b; }
[data-theme="light"] .direction.short, [data-theme="light"] .tag.rejected { background: #f8e5e9; color: #a1273a; }
[data-theme="light"] .intervals button.active { background: #dcebe1; color: #205b35; }
[data-theme="light"] .mtf-table td:first-child { color: #314751; }
[data-theme="light"] .mtf-state { background: #e8eef5; color: #52667c; }
[data-theme="light"] .trend-1, [data-theme="light"] .trend-2 { background: #dcefe2; color: #17623a; }
[data-theme="light"] .trend-3 { background: #dfedf8; color: #135d8f; }
[data-theme="light"] .trend--1, [data-theme="light"] .trend--2 { background: #f8e0e5; color: #a12b42; }
[data-theme="light"] .trend--3 { background: #fae9d2; color: #8f5516; }
[data-theme="light"] .clock-block #clock { color: #20313c; }
[data-theme="light"] dialog { background: #fff; }
[data-theme="light"] .error-box { background: #fae8eb; border-color: #ddadb7; color: #8e293c; }
[data-theme="light"] .notice { background: #edf3e5; color: #3e5935; }
[data-theme="light"] #toast { background: #edf7f1fa; color: #203d2c; border-color: #87b29a; }
[data-theme="light"] #toast strong, [data-theme="light"] #toast .toast-icon { color: #23623b; }
[data-theme="light"] .calendar-day.selected { background: #287344; color: white; }
[data-theme="light"] .signed-out { background: radial-gradient(ellipse at 17% 23%, #cae6dc, transparent 52%), radial-gradient(ellipse at 84% 72%, #d8e6f4, transparent 52%), #f3f6f8; }
[data-theme="light"] .login.panel { background: #ffffffdc; border-color: #bed1c7; box-shadow: 0 24px 90px #2946381a; }
[data-theme="light"] .login-brand, [data-theme="light"] .transition-brand { color: #203d31; }
[data-theme="light"] .login-brand span, [data-theme="light"] .transition-brand span { color: #506f60; }
[data-theme="light"] .brand-by, [data-theme="light"] .brand-tagline { color: #557367 !important; }
[data-theme="light"] .login p { color: #50675c; }
[data-theme="light"] .login input { background: #f7faf8; border-color: #b4cabd; }
[data-theme="light"] .auth-transition { background: radial-gradient(ellipse at 50% 43%, #d0e5d9, transparent 55%), #f3f6f8; }
[data-theme="light"] .auth-transition p { color: #50675c; }
@media (max-width: 680px) {
  .utility-button { width: 30px; height: 30px; padding: 5px; }
  .utility-button svg { width: 17px; height: 17px; }
}

[data-theme="light"] .analytics-chart polyline { stroke: var(--green); }
@media (max-width: 680px) {
  .topbar { height: auto; min-height: 74px; flex-wrap: wrap; padding: 10px 12px; row-gap: 8px; }
  .topbar .top-actions { width: 100%; justify-content: flex-end; gap: 7px; }
}

.broker-status{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);white-space:nowrap;border:1px solid var(--line);border-radius:20px;padding:7px 10px}
.broker-dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.broker-status[data-connected="true"] .broker-dot{background:var(--green)}
.broker-account{padding:14px 0;margin-bottom:12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.broker-account[hidden]{display:none}
.broker-account-label,.broker-account-id{display:block;font-size:11px;color:var(--muted);line-height:1.6}
.broker-account strong{display:block;font-size:13px;font-weight:500;color:var(--text);margin:5px 0}
@media(max-width:680px){.broker-status{font-size:10px;padding:5px 7px}.topbar .top-actions{flex-wrap:wrap}}

/* Shared page-header controls keep the dashboard content unobstructed. */
.page-heading{gap:16px;flex-wrap:wrap}.page-heading>div:first-child{min-width:0}
.page-heading .heading-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-left:auto}
.heading-trading{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;color:var(--text);padding-right:12px;border-right:1px solid var(--line)}
.heading-trading .readiness-button{width:30px;height:30px;padding:6px;margin-left:2px}.heading-trading .readiness-button svg{width:17px;height:17px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.trading-mode-switch{width:46px;height:26px;border-radius:16px;border:1px solid var(--line);background:var(--panel);padding:3px;display:flex;align-items:center;transition:background .18s}
.trading-mode-switch span{width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .18s}
.trading-mode-switch[aria-checked="true"]{background:#8c2838;border-color:#d95268}.trading-mode-switch[aria-checked="true"] span{transform:translateX(18px);background:#fff}
.trading-mode-switch:disabled{opacity:.55;cursor:wait}.trading-mode-switch:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:680px){.page-heading .heading-actions{width:100%;margin-left:0;justify-content:flex-start;gap:10px}.heading-trading{font-size:11px;gap:7px;padding-right:10px}.page-heading .heading-actions #refresh{font-size:12px;padding:7px 9px}.page-heading .heading-actions .mode-badge{font-size:10px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.trading-mode-switch,.trading-mode-switch span{transition:none}}

/* Keep the clock and global actions visible without a separate scroll container. */
.topbar{position:sticky;top:0;z-index:40;background:var(--bg)}

.signal-times{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:10px;color:var(--muted);font-size:11px}
.signal-times>span{display:flex;align-items:center;gap:6px}.signal-times small{font-size:10px}.signal-times time{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}.signal-times .signal-timezone{margin-left:auto}
.contract-unavailable{margin-top:12px;padding:10px 0;color:var(--muted);font-size:12px}.contract-unavailable strong{font-size:12px;font-weight:500}.contract-unavailable small{display:block;font-size:11px;line-height:1.6;margin-top:4px;overflow-wrap:anywhere}

.signals-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}#orders-ledger-data>.pagination{padding:0 16px}#stock-pagination .pagination{margin:12px 0}

.screen-trend{display:inline-block;max-width:100%;padding:4px 8px;margin-top:12px;border-radius:5px;font-size:12px;line-height:1.4;font-weight:500;text-align:left}.screen-trend.trend-none,.screen-trend.trend-0{color:var(--muted);background:transparent}