:root {
  --v4-bg: #f6f7f8;
  --v4-surface: rgba(243, 244, 246, .88);
  --v4-surface-strong: #f3f4f5;
  --v4-line: rgba(81, 97, 110, .2);
  --v4-line-strong: rgba(68, 80, 91, .42);
  --v4-text: #222630;
  --v4-muted: #405070;
  --v4-blue: #29498a;
  --v4-cyan: #31ac95;
  --v4-amber: #775922;
  --v4-red: #6c1f23;
  --v4-radius: 18px;
  --v4-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

.ui-v4 {
  color: var(--v4-text);
  background:
    radial-gradient(circle at 12% -8%, rgba(111, 131, 148, .18), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(126, 160, 154, .1), transparent 26rem),
    var(--v4-bg);
}

.ui-v4 .shell {
  width: min(1600px, calc(100% - 28px));
  margin: 14px auto 34px;
}

.ui-v4 header {
  position: sticky;
  top: 10px;
  z-index: 40;
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius);
  background: rgba(244, 246, 247, .88);
  box-shadow: var(--v4-shadow);
  backdrop-filter: blur(18px);
}

.ui-v4 header .brand h1 { letter-spacing: -.02em; }
.ui-v4 header .brand em {
  color: var(--v4-cyan);
  background: rgba(94, 127, 121, .1);
  border: 1px solid rgba(94, 127, 121, .24);
  border-radius: 999px;
  padding: 3px 8px;
}

.ui-v4 .main-nav {
  position: sticky;
  top: 102px;
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 18px;
  padding: 7px;
  border: 1px solid var(--v4-line);
  border-radius: 16px;
  background: rgba(244, 246, 247, .9);
  backdrop-filter: blur(16px);
}

.ui-v4 .main-nav button {
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  color: var(--v4-muted);
  background: transparent;
  box-shadow: none;
}

.ui-v4 .main-nav button:hover { color: var(--v4-text); background: rgba(76, 90, 103, .08); }
.ui-v4 .main-nav button.active {
  color: #23232f;
  background: linear-gradient(135deg, rgba(91, 108, 124, .3), rgba(124, 159, 153, .18));
  box-shadow: inset 0 0 0 1px rgba(65, 79, 88, .32);
}

.ui-v4 main { padding: 0; }
.ui-v4 .page { animation: v4-page-in .22s ease-out; }
@keyframes v4-page-in { from { opacity: .45; transform: translateY(4px); } }

.ui-v4 .page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 136px;
  margin-bottom: 14px;
  padding: 24px 28px;
  border: 1px solid var(--v4-line-strong);
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(234, 237, 239, .36), rgba(242, 244, 246, .9) 50%, rgba(240, 244, 243, .22)),
    var(--v4-surface-strong);
  box-shadow: var(--v4-shadow);
}

.ui-v4 .page-hero.compact { min-height: 112px; }
.ui-v4 .page-hero.nested { min-height: 88px; margin-top: 12px; border-radius: 16px; box-shadow: none; }
.ui-v4 .page-hero h2 { margin: 5px 0 7px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.035em; }
.ui-v4 .page-hero p { max-width: 900px; margin: 0; color: #414857; line-height: 1.65; }
.ui-v4 .eyebrow { color: var(--v4-cyan); letter-spacing: .08em; }

.ui-v4 .subnav,
.ui-v4 .arbitrage-hub-tabs,
.ui-v4 .settings-filter-bar,
.ui-v4 .calendar-scope-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 0 0 14px;
  padding: 6px;
  border: 1px solid var(--v4-line);
  border-radius: 14px;
  background: rgba(243, 245, 247, .82);
}

.ui-v4 .subnav button,
.ui-v4 .arbitrage-hub-tabs button,
.ui-v4 .settings-filter-bar button,
.ui-v4 .calendar-scope-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  border-color: transparent;
  border-radius: 10px;
  color: var(--v4-muted);
  background: transparent;
  box-shadow: none;
}

.ui-v4 .subnav button.active,
.ui-v4 .arbitrage-hub-tabs button.active,
.ui-v4 .settings-filter-bar button.active,
.ui-v4 .calendar-scope-tabs button.active {
  color: #25252d;
  border-color: rgba(76, 90, 103, .25);
  background: rgba(76, 90, 103, .16);
}

.ui-v4 article,
.ui-v4 .table-wrap,
.ui-v4 .toolbar,
.ui-v4 .chart-panel,
.ui-v4 .calendar-module,
.ui-v4 .report-search-panel {
  border-color: var(--v4-line);
}

.ui-v4 .dashboard-panel,
.ui-v4 .trading-panel,
.ui-v4 .account-manage,
.ui-v4 .account-history-panel,
.ui-v4 .account-activity,
.ui-v4 .ai-token-board,
.ui-v4 .source-health,
.ui-v4 .settings-grid > .card {
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius);
  background: var(--v4-surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.ui-v4 .dashboard-kpis,
.ui-v4 .account-kpis,
.ui-v4 .intelligence-kpis,
.ui-v4 .trading-live-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
}

.ui-v4 .dashboard-kpis article,
.ui-v4 .account-kpis article,
.ui-v4 .intelligence-kpis article,
.ui-v4 .trading-live-summary > div {
  min-height: 105px;
  padding: 17px;
  border: 1px solid var(--v4-line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(240, 242, 244, .88), rgba(243, 245, 246, .78));
}

.ui-v4 .trading-live-summary { margin: 14px 0; }
.ui-v4 .trading-live-summary > div { min-height: 88px; }
.ui-v4 .trading-live-summary span { display: block; margin-bottom: 10px; color: var(--v4-muted); }
.ui-v4 .trading-live-summary b { font-size: 24px; color: var(--v4-amber); }

.ui-v4 .trading-grid { gap: 12px; }
.ui-v4 .trading-panel { padding: 20px; }
.ui-v4 .trading-panel-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(81, 97, 110, .13);
}
.ui-v4 .step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(76, 90, 103, .45);
  border-radius: 10px;
  color: #2b3039;
  background: rgba(76, 90, 103, .14);
}

.ui-v4 .trading-risk,
.ui-v4 .trading-workspace-note {
  border-radius: 14px;
  border-color: rgba(88, 80, 65, .24);
  background: rgba(243, 241, 239, .2);
}

.ui-v4 .unified-venue-credentials {
  margin-top: 14px;
  padding: 8px;
  border: 1px solid var(--v4-line);
  border-radius: 13px;
  background: rgba(246, 247, 248, .36);
}
.ui-v4 .unified-venue-credentials summary { padding: 8px; color: #252932; cursor: pointer; }
.ui-v4 .funding-account-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ui-v4 .funding-account-card { border-radius: 13px; background: rgba(242, 244, 245, .72); }

.ui-v4 input,
.ui-v4 select,
.ui-v4 textarea {
  border-color: rgba(81, 97, 110, .26);
  border-radius: 10px;
  background: rgba(245, 247, 248, .72);
}
.ui-v4 input:focus,
.ui-v4 select:focus,
.ui-v4 textarea:focus { border-color: var(--v4-blue); box-shadow: 0 0 0 3px rgba(76, 90, 103, .12); }

.ui-v4 button { border-radius: 10px; }
.ui-v4 button:not(.ghost):not(.text-button) {
  background: linear-gradient(135deg, #345eb1, #355eb1);
  box-shadow: 0 7px 18px rgba(128, 147, 161, .18);
}
.ui-v4 button.trade-start { background: linear-gradient(135deg, #32b392, #e3eae9); }
.ui-v4 button.danger:not(.ghost) { background: linear-gradient(135deg, #982b34, #a73e4c); }

.ui-v4 table { border-collapse: separate; border-spacing: 0; }
.ui-v4 th { position: sticky; top: 0; z-index: 2; color: #373d48; background: #f2f3f5; }
.ui-v4 tbody tr:hover { background: rgba(76, 90, 103, .06); }
.ui-v4 td, .ui-v4 th { border-bottom-color: rgba(81, 97, 110, .12); }

.ui-v4 .news-card,
.ui-v4 .report-card,
.ui-v4 .calendar-card,
.ui-v4 .account-card,
.ui-v4 .etf-card,
.ui-v4 .clbz-card {
  border-color: var(--v4-line);
  border-radius: 15px;
  background: rgba(243, 244, 246, .82);
}

.ui-v4 .settings-grid { gap: 12px; }
.ui-v4 .settings-grid > .card { padding: 20px; }
.ui-v4 .settings-filtered { display: none; }
.ui-v4 progress { overflow: hidden; height: 8px; border-radius: 99px; }
.ui-v4 progress::-webkit-progress-value { background: linear-gradient(90deg, var(--v4-blue), var(--v4-cyan)); }

@media(max-width:700px) {
  .ui-v4 .shell { width: min(100% - 14px, 1600px); margin-top: 7px; }
  .ui-v4 header { position: relative; top: 0; padding: 14px; }
  .ui-v4 header .header-actions .summary { display: none; }
  .ui-v4 .main-nav { top: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; }
  .ui-v4 .main-nav button { padding: 8px 4px; font-size: 12px; }
  .ui-v4 .page-hero { min-height: 0; padding: 19px; align-items: flex-start; flex-direction: column; }
  .ui-v4 .page-hero h2 { font-size: 27px; }
  .ui-v4 .dashboard-layout,
  .ui-v4 .trading-grid,
  .ui-v4 .account-history-charts,
  .ui-v4 .report-search-grid { grid-template-columns: 1fr; }
  .ui-v4 .dashboard-kpis,
  .ui-v4 .account-kpis,
  .ui-v4 .intelligence-kpis,
  .ui-v4 .trading-live-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-v4 .trading-panel { padding: 15px; }
  .ui-v4 .trading-secret-fields,
  .ui-v4 .trading-fields.two,
  .ui-v4 .funding-account-grid { grid-template-columns: 1fr; }
  .ui-v4 .toolbar { align-items: stretch; }
}

/* v4.1 workspace refactor: the SVG trading concept is the visual source of truth. */
.ui-v4 .workspace-page {
  --workbench-panel: linear-gradient(145deg, rgba(242, 244, 246, .98), rgba(245, 246, 247, .98));
  display: none;
  gap: 14px;
}
.ui-v4 .workspace-page.active { display: grid; }

.ui-v4 .main-nav {
  gap: 9px;
  padding: 8px;
  background: rgba(245, 247, 248, .96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(56, 56, 56, .015);
}
.ui-v4 .main-nav button { position: relative; overflow: hidden; border: 1px solid transparent; }
.ui-v4 .main-nav button:not(.active) {
  color: #5a6b8b;
  border-color: rgba(117, 137, 153, .12);
  background: linear-gradient(180deg, rgba(243, 244, 246, .72), rgba(244, 246, 247, .72));
}
.ui-v4 .main-nav button:not(.active):hover {
  color: #252932;
  border-color: rgba(89, 107, 121, .25);
  background: linear-gradient(180deg, rgba(240, 242, 244, .82), rgba(243, 245, 246, .82));
}
.ui-v4 .main-nav button.active {
  color: #292929;
  border-color: rgba(62, 75, 84, .62);
  background: linear-gradient(135deg, #355eb1 0%, #355eb1 58%, #355eb0 100%);
  box-shadow: 0 8px 22px rgba(124, 143, 159, .3), inset 0 1px rgba(56, 56, 56, .28), inset 0 -1px rgba(0, 0, 0, .22);
  transform: translateY(-1px);
}
.ui-v4 .main-nav button.active::before {
  content: "";
  position: absolute;
  inset: 0 14% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 56, 56, .92), transparent);
}
.ui-v4 .main-nav .nav-icon { opacity: .72; }
.ui-v4 .main-nav button.active .nav-icon { opacity: 1; filter: drop-shadow(0 0 7px rgba(56, 56, 56, .45)); }

.ui-v4 .workspace-page > .page-hero,
.ui-v4 .settings-grid > .page-hero {
  min-height: 112px;
  margin: 0;
  padding: 22px 28px;
  border-color: rgba(117, 137, 153, .66);
  border-radius: 20px;
  background: linear-gradient(128deg, rgba(240, 242, 244, .95), rgba(244, 245, 247, .98) 60%, rgba(242, 245, 245, .45));
  box-shadow: 0 18px 42px rgba(0,0,0,.18), inset 0 1px rgba(56, 56, 56, .025);
}
.ui-v4 .workspace-page > .page-hero h2,
.ui-v4 .settings-grid > .page-hero h2 { font-size: clamp(26px, 2.4vw, 36px); }
.ui-v4 .workspace-page > .page-hero p,
.ui-v4 .settings-grid > .page-hero p { max-width: 1040px; }

.ui-v4 .dashboard-kpis,
.ui-v4 .account-kpis,
.ui-v4 .intelligence-kpis { gap: 9px; }
.ui-v4 .aster-capacity-card {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(250px, 1.15fr) minmax(360px, 2fr) auto;
  align-items: center;
  gap: 18px;
  margin: 10px 0;
  padding: 13px 16px;
  border: 1px solid rgba(118, 139, 154, .45);
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(242, 244, 245, .98), rgba(244, 246, 247, .96));
  box-shadow: inset 3px 0 #616d85;
}
.ui-v4 .aster-capacity-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-v4 .aster-capacity-title small,.ui-v4 .aster-capacity-title b { display: block; }
.ui-v4 .aster-capacity-title small { color: #576787; font-size: 9px; }
.ui-v4 .aster-capacity-title b { margin-top: 2px; color: #24292d; font-size: 14px; letter-spacing: .04em; }
.ui-v4 .aster-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: linear-gradient(145deg,#5c401a,#b37332); color: #f7f6f5; font-weight: 900; }
.ui-v4 .aster-capacity-primary { min-width: 0; }
.ui-v4 .aster-capacity-primary span { display: block; color: #505f7c; font-size: 9px; }
.ui-v4 .aster-capacity-primary span b { color: #745121; }
.ui-v4 .aster-capacity-primary strong { display: block; overflow: hidden; margin-top: 3px; color: #24242d; font: 800 19px/1.2 Consolas,"Microsoft YaHei UI",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ui-v4 .aster-capacity-levels { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ui-v4 .aster-capacity-levels::-webkit-scrollbar { display: none; }
.ui-v4 .aster-capacity-levels > span { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 7px; border: 1px solid rgba(132, 151, 164, .37); border-radius: 7px; background: rgba(245, 247, 248, .72); color: #5a6987; font-size: 8.5px; }
.ui-v4 .aster-capacity-levels b { color: #373d4a; }
.ui-v4 .aster-capacity-levels em { color: #23272f; font-style: normal; font-family: Consolas,"Microsoft YaHei UI",sans-serif; }
.ui-v4 .aster-capacity-levels .target { border-color: rgba(107, 95, 79, .5); background: rgba(242, 240, 238, .36); }
.ui-v4 .aster-capacity-levels .target b,.ui-v4 .aster-capacity-levels .target em { color: #593f19; }
.ui-v4 .aster-capacity-meta { display: grid; justify-items: end; gap: 1px; min-width: 92px; }
.ui-v4 .aster-capacity-meta span { color: #495263; font-size: 9px; font-weight: 800; }
.ui-v4 .aster-capacity-meta small { color: #5f6c86; font-size: 8px; }
.ui-v4 .aster-capacity-alert-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: #45536e; font-size: 8.5px; cursor: pointer; }
.ui-v4 .aster-capacity-alert-toggle input { width: 13px; height: 13px; margin: 0; accent-color: #32b382; }
.ui-v4 .aster-capacity-alert-toggle i { font-style: normal; white-space: nowrap; }
.ui-v4 .aster-capacity-meta a { margin-top: 3px; color: #24417a; font-size: 8.5px; text-decoration: none; }
.ui-v4 .aster-capacity-card.status-live { box-shadow: inset 3px 0 #32b382; }
.ui-v4 .aster-capacity-card.status-live .aster-capacity-meta span { color: #299365; }
.ui-v4 .aster-capacity-card.status-cached { box-shadow: inset 3px 0 #8b6a27; }
.ui-v4 .aster-capacity-card.status-cached .aster-capacity-meta span { color: #7c6123; }
.ui-v4 .aster-capacity-card.status-stale { box-shadow: inset 3px 0 #782226; }
.ui-v4 .aster-capacity-card.status-stale .aster-capacity-meta span { color: #58191c; }
.ui-v4 .dashboard-kpis article,
.ui-v4 .account-kpis article,
.ui-v4 .intelligence-kpis article {
  min-height: 88px;
  padding: 14px 16px;
  border-color: rgba(127, 145, 160, .45);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(243, 244, 246, .96), rgba(245, 246, 247, .96));
  box-shadow: none;
}
.ui-v4 .dashboard-kpis article > b,
.ui-v4 .account-kpis article > b,
.ui-v4 .intelligence-kpis article > b { font-size: 22px; }
.ui-v4 .dashboard-layout { grid-template-columns: 1fr; gap: 12px; }
.ui-v4 .dashboard-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ui-v4 .dashboard-panel,
.ui-v4 .account-manage,
.ui-v4 .account-history-panel,
.ui-v4 .account-activity,
.ui-v4 .ai-token-board,
.ui-v4 .source-health,
.ui-v4 .settings-grid > .card,
.ui-v4 .spread-card,
.ui-v4 .etf-workbench,
.ui-v4 .clbz-workbench,
.ui-v4 .calendar-module,
.ui-v4 .report-search-panel,
.ui-v4 .table-wrap,
.ui-v4 .toolbar,
.ui-v4 .chart-panel {
  border-color: rgba(127, 145, 160, .46);
  border-radius: 17px;
  background: var(--workbench-panel);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.ui-v4 .subnav,
.ui-v4 .arbitrage-hub-tabs,
.ui-v4 .settings-filter-bar,
.ui-v4 .calendar-scope-tabs {
  margin: 0;
  border-color: rgba(127, 145, 160, .36);
  background: rgba(245, 246, 248, .92);
}
.ui-v4 .subnav button.active,
.ui-v4 .arbitrage-hub-tabs button.active,
.ui-v4 .settings-filter-bar button.active,
.ui-v4 .calendar-scope-tabs button.active {
  border-color: rgba(73, 88, 99, .5);
  background: linear-gradient(135deg, rgba(130, 147, 163, .66), rgba(116, 138, 153, .5));
  box-shadow: inset 0 1px rgba(56, 56, 56, .12), 0 5px 14px rgba(230, 233, 236, .16);
}

.ui-v4 #market > .subpage.active,
.ui-v4 #intelligence > .subpage.active,
.ui-v4 #fundingMarket > .subpage.active { display: grid; gap: 12px; }
.ui-v4 .row-hint { display: block; margin-top: 2px; color: #5b6b8b; font: 8px/1.3 "Microsoft YaHei UI", sans-serif; }
.ui-v4 .funding-history-panel {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding: 20px;
  border: 1px solid rgba(79, 90, 108, .48);
  border-radius: 17px;
  background: radial-gradient(circle at 94% 0, rgba(100, 119, 135, .12), transparent 30%), linear-gradient(145deg, rgba(243, 244, 246, .98), rgba(245, 246, 248, .98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
}
.ui-v4 .funding-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ui-v4 .funding-history-head h3 { margin: 3px 0; font-size: 20px; }
.ui-v4 .funding-history-head p { margin: 0; color: #4e5e7e; font-size: 10px; }
.ui-v4 .funding-history-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ui-v4 .funding-history-card { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 8px; padding: 12px; border: 1px solid #e4e6ea; border-radius: 11px; background: rgba(245, 246, 247, .8); }
.ui-v4 .funding-history-card header,.ui-v4 .funding-history-card div { min-width: 0; }
.ui-v4 .funding-history-card header b,.ui-v4 .funding-history-card header small,.ui-v4 .funding-history-card div span,.ui-v4 .funding-history-card div b,.ui-v4 .funding-history-card div small { display: block; }
.ui-v4 .funding-history-card header b { color: #24272e; font-size: 13px; }
.ui-v4 .funding-history-card header small,.ui-v4 .funding-history-card div span,.ui-v4 .funding-history-card div small { overflow: hidden; color: #5b6b8b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ui-v4 .funding-history-card div b { margin: 3px 0; color: #25845a; font: 800 11px Consolas, monospace; }
.ui-v4 .funding-history-card.state-empty div b,.ui-v4 .funding-history-card.state-error div b { color: #5e6c87; }
.ui-v4 .funding-history-card.state-error { border-color: rgba(164, 132, 134, .58); }
.ui-v4 .funding-history-loading,.ui-v4 .funding-history-error { grid-column: 1 / -1; padding: 18px; border: 1px solid #e4e6ea; border-radius: 11px; color: #455574; background: rgba(245, 246, 247, .8); }
.ui-v4 .funding-history-error { border-color: rgba(164, 132, 134, .58); color: #4b1517; }
.ui-v4 .funding-history-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.ui-v4 .funding-history-tabs button { padding: 8px 11px; font-size: 9px; }
.ui-v4 .funding-history-tabs button.active { border-color: #335bac; background: #e9ebee; color: #23272e; }
.ui-v4 .funding-history-list { display: grid; gap: 7px; }
.ui-v4 .funding-history-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-v4 .funding-history-list-head small { color: #5b6b8a; font-size: 8.5px; }
.ui-v4 .funding-history-list .table-wrap { max-height: 340px; border-top: 1px solid #e5e7eb; border-radius: 10px; }
.ui-v4 .funding-history-list table { min-width: 560px; }
.ui-v4 .settings-grid { grid-template-columns: 1fr; gap: 12px; }
.ui-v4 .settings-grid > * { grid-column: 1 !important; }
.ui-v4 .settings-grid > .card { padding: 20px 22px; }
.ui-v4 .advanced-settings,
.ui-v4 .strategy-editor,
.ui-v4 .trading-execution-details,
.ui-v4 .trading-live-details,
.ui-v4 .trading-credential-drawer {
  border: 1px solid rgba(127, 145, 160, .4);
  border-radius: 12px;
  background: rgba(245, 247, 248, .58);
}
.ui-v4 .advanced-settings > summary,
.ui-v4 .strategy-editor > summary,
.ui-v4 .trading-execution-details > summary,
.ui-v4 .trading-live-details > summary,
.ui-v4 .trading-credential-drawer > summary {
  list-style: none;
  cursor: pointer;
}
.ui-v4 .advanced-settings > summary::-webkit-details-marker,
.ui-v4 .strategy-editor > summary::-webkit-details-marker,
.ui-v4 .trading-execution-details > summary::-webkit-details-marker,
.ui-v4 .trading-live-details > summary::-webkit-details-marker,
.ui-v4 .trading-credential-drawer > summary::-webkit-details-marker { display: none; }

/* Trading page: same three-step, single-column composition as the approved SVG. */
.ui-v4 .trading-design-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0;
}
.ui-v4 .trading-design-workbench > .trading-panel { grid-column: 1; }
.ui-v4 .trading-panel {
  padding: 22px 26px;
  border-color: rgba(117, 137, 153, .7);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(242, 244, 245, .99), rgba(245, 246, 247, .99));
  box-shadow: 0 18px 42px rgba(0,0,0,.2);
}
.ui-v4 .trading-panel-head { margin: 0; padding: 0; border: 0; }
.ui-v4 .trading-panel-head h3 { font-size: 20px; }
.ui-v4 .trading-credentials {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(430px, .78fr);
  align-items: center;
  min-height: 92px;
  gap: 20px;
  padding-block: 18px;
}
.ui-v4 .trading-credential-drawer { min-width: 0; }
.ui-v4 .trading-credential-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 10px 14px;
}
.ui-v4 .trading-credential-drawer > summary div,
.ui-v4 .trading-credential-drawer > summary b,
.ui-v4 .trading-credential-drawer > summary small { display: block; }
.ui-v4 .trading-credential-drawer > summary b { color: #23272f; font-size: 14px; }
.ui-v4 .trading-credential-drawer > summary small { margin-top: 4px; color: #5b6b8a; font-size: 9px; }
.ui-v4 .trading-credential-drawer > summary > span { color: #3c424f; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ui-v4 .trading-credential-drawer[open] { grid-column: 1 / -1; margin-top: 2px; }
.ui-v4 .trading-credential-body { display: grid; gap: 12px; padding: 14px; border-top: 1px solid rgba(127, 145, 160, .3); }
.ui-v4 .funding-account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-v4 .trading-credential-drawer:not([open]) > .trading-credential-body,
.ui-v4 .trading-execution-details:not([open]) > .trading-execution-body,
.ui-v4 .trading-live-details:not([open]) > .trading-live-detail-body,
.ui-v4 .strategy-editor:not([open]) > .strategy-editor-body { display: none; }

.ui-v4 .trading-order {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(560px, 1.3fr);
  align-items: end;
  gap: 14px 24px;
}
.ui-v4 .trading-order > .trading-panel-head { align-self: center; }
.ui-v4 .trading-order > .strategy-toolbar { margin: 0; }
.ui-v4 .strategy-toolbar { grid-template-columns: minmax(300px, 1fr) auto; }
.ui-v4 .strategy-toolbar select { min-height: 44px; }
.ui-v4 .trading-leg-summary,
.ui-v4 .strategy-preview,
.ui-v4 .trading-quick-controls,
.ui-v4 .trading-execution-details,
.ui-v4 .risk-check,
.ui-v4 .trading-order > .trading-button-row,
.ui-v4 .trading-order > .strategy-editor { grid-column: 1 / -1; }
.ui-v4 .trading-leg-summary { display: grid; gap: 7px; }
.ui-v4 .trading-leg-summary-head,
.ui-v4 .trading-leg-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr .82fr .92fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.ui-v4 .trading-leg-summary-head { color: #576787; font-size: 9px; }
.ui-v4 .trading-leg-summary-row {
  min-height: 58px;
  border: 1px solid rgba(127, 145, 160, .42);
  border-radius: 11px;
  color: #43516e;
  background: rgba(245, 247, 248, .68);
}
.ui-v4 .trading-leg-summary-row b,
.ui-v4 .trading-leg-summary-row strong { color: #222730; font-size: 13px; }
.ui-v4 .trading-leg-summary-row strong { font-family: Consolas, Menlo, monospace; }
.ui-v4 .trading-leg-summary-row em {
  justify-self: start;
  min-width: 58px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}
.ui-v4 .trading-leg-summary-row em.buy { color: #288f67; background: rgba(233, 239, 237, .28); }
.ui-v4 .trading-leg-summary-row em.sell { color: #55181c; background: rgba(164, 132, 135, .3); }

.ui-v4 .strategy-preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 2px 0 0;
  padding: 0;
  border-radius: 13px;
  overflow: hidden;
}
.ui-v4 .strategy-preview > div {
  min-height: 78px;
  padding: 15px 18px;
  border: 0;
  border-right: 1px solid rgba(127, 145, 160, .3);
  border-radius: 0;
  background: rgba(243, 245, 247, .9);
}
.ui-v4 .strategy-preview > div:last-of-type { border-right: 0; }
.ui-v4 .strategy-preview > small {
  grid-column: 1 / -1;
  padding: 8px 16px;
  border-top: 1px solid rgba(127, 145, 160, .24);
  background: rgba(245, 246, 248, .82);
}
.ui-v4 .strategy-preview b { font-size: 21px; }

.ui-v4 .trading-quick-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr .7fr 1fr;
  align-items: end;
  gap: 12px;
}
.ui-v4 .trading-quick-controls label { display: grid; gap: 6px; color: #4f5e7d; font-size: 9px; }
.ui-v4 .trading-quick-controls input,
.ui-v4 .trading-quick-controls select,
.ui-v4 .trading-primary-action { min-height: 46px; }
.ui-v4 .trading-primary-action {
  width: 100%;
  border-color: #355eb0 !important;
  color: #292929 !important;
  background: linear-gradient(135deg, #355eb1, #355eb1) !important;
  box-shadow: 0 10px 24px rgba(116, 136, 152, .26) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}
.ui-v4 .trading-execution-details > summary,
.ui-v4 .trading-live-details > summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  color: #2b303a;
  font-size: 11px;
}
.ui-v4 .trading-execution-details > summary small,
.ui-v4 .trading-live-details > summary small { color: #5e6c88; }
.ui-v4 .trading-execution-body,
.ui-v4 .trading-live-detail-body { display: grid; gap: 10px; padding: 0 14px 14px; }
.ui-v4 .trading-execution-body > label { display: grid; gap: 5px; color: #505f7d; font-size: 9px; }
.ui-v4 .trading-order > .trading-button-row { justify-content: flex-end; }
.ui-v4 .trading-order > .strategy-editor { margin: 0; }
.ui-v4 .trading-order > .trading-option:empty,
.ui-v4 .trading-order > .trading-fields.two:empty { display: none; }
.ui-v4 .trading-risk,
.ui-v4 .trading-workspace-note {
  margin: 0;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 12px;
}
.ui-v4 .trading-workspace-note { border-color: rgba(116, 153, 140, .22); background: rgba(240, 244, 243, .16); }

.ui-v4 .trading-live { display: grid; gap: 12px; }
.ui-v4 .trading-status-message { margin: 0; padding: 9px 13px; }
.ui-v4 .trading-live-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.ui-v4 .trading-live-summary > div {
  min-height: 86px;
  padding: 15px 17px;
  border-radius: 12px;
  background: rgba(245, 247, 248, .68);
}
.ui-v4 .trading-market-cards { margin: 0; }
.ui-v4 .trading-market-card { min-height: 68px; }
.ui-v4 .trading-progress { margin: 0; }
.ui-v4 .trading-live-details { margin-top: 0; }

/* Account monitoring workbench */
.ui-v4 .account-monitor-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 5px;
  margin-bottom: 16px;
  padding: 5px;
  border: 1px solid rgba(124, 143, 158, .35);
  border-radius: 14px;
  background: rgba(246, 247, 248, .82);
  box-shadow: inset 0 1px 0 rgba(56, 56, 56, .03), 0 12px 32px rgba(0, 0, 0, .18);
}
.ui-v4 .account-monitor-tabs button {
  min-height: 43px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #506080;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
}
.ui-v4 .account-monitor-tabs button:hover { color: #23282f; background: rgba(230, 234, 236, .18); }
.ui-v4 .account-monitor-tabs button.active {
  border-color: rgba(79, 95, 107, .58);
  color: #292929;
  background: linear-gradient(135deg, rgba(130, 148, 162, .92), rgba(123, 147, 157, .78));
  box-shadow: 0 8px 20px rgba(132, 151, 164, .27), inset 0 1px 0 rgba(56, 56, 56, .18);
}
.ui-v4 .account-monitor-panel { display: grid; gap: 14px; }
.ui-v4 .account-monitor-panel.hidden { display: none; }
.ui-v4 .position-monitor-hero { margin: 0; }
.ui-v4 .position-monitor-rule-card,
.ui-v4 .position-monitor-credentials,
.ui-v4 .position-monitor-list-panel {
  padding: 20px;
  border: 1px solid rgba(132, 150, 164, .36);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(243, 245, 246, .94), rgba(245, 246, 247, .96));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(56, 56, 56, .025);
}
.ui-v4 .position-monitor-rule-card .card-title,
.ui-v4 .position-monitor-credentials .card-title,
.ui-v4 .position-monitor-list-panel .card-title { margin-bottom: 16px; }
.ui-v4 .position-monitor-rule-card .card-title p,
.ui-v4 .position-monitor-credentials .card-title p,
.ui-v4 .position-monitor-list-panel .card-title p { margin: 4px 0 0; color: #5a6986; font-size: 11px; }
.ui-v4 .position-monitor-enable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(103, 139, 129, .28);
  border-radius: 10px;
  color: #154033;
  background: rgba(233, 239, 237, .12);
  font-size: 11px;
  font-weight: 750;
}
.ui-v4 .position-monitor-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ui-v4 .position-monitor-rules label { display: grid; gap: 6px; color: #51607d; font-size: 10px; font-weight: 750; }
.ui-v4 .position-monitor-rules input,
.ui-v4 .position-monitor-rules select { width: 100%; min-height: 42px; }
.ui-v4 .position-monitor-route { margin-top: 14px; }
.ui-v4 .position-monitor-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.ui-v4 .position-monitor-actions button { min-height: 39px; }
.ui-v4 .position-credential-status { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.ui-v4 .credential-chip {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(116, 152, 141, .28);
  border-radius: 11px;
  color: #237459;
  background: rgba(236, 241, 239, .13);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}
.ui-v4 .credential-chip b { color: #124030; font-size: 11px; }
.ui-v4 .credential-chip.muted { border-color: rgba(117, 138, 153, .24); color: #5e6c87; background: rgba(236, 239, 241, .12); }
.ui-v4 .credential-chip.muted b { color: #4a566e; }
.ui-v4 .credential-chip.error { border-color: rgba(86, 64, 64, .4); color: #4f1616; background: rgba(237, 231, 232, .14); }
.ui-v4 .credential-chip.error b { color: #401212; }
.ui-v4 .position-monitor-grid { display: grid; gap: 12px; }
.ui-v4 .position-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-v4 .position-category-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 13px; border: 1px solid #ccd5e3; border-radius: 9px; color: #3f4a5e; background: #fff; font-size: 12px; font-weight: 700; }
.ui-v4 .position-category-tabs button.active { border-color: #426da8; color: #244f91; background: #eaf1fc; }
.ui-v4 .position-category-tabs span { min-width: 19px; padding: 2px 5px; border-radius: 999px; background: #e2e8f2; color: #324d70; font-size: 10px; text-align: center; }
.ui-v4 .position-category-help { margin: 0; color: #49566b; font-size: 11px; }
.ui-v4 .position-category-common-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.ui-v4 .position-category-common-actions button { min-height: 32px; padding: 5px 11px; font-size: 11px; }
.ui-v4 .funding-advice-panel { padding: 16px 20px; }
.ui-v4 .funding-advice-panel .card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ui-v4 .funding-advice-panel .card-title button { flex: 0 0 auto; min-height: 32px; }
.ui-v4 .funding-advice-result { padding: 12px 14px; border: 1px solid #d9e2ee; border-radius: 10px; background: #f7f9fc; color: #26354c; }
.ui-v4 .funding-advice-result.action { border-color: #bfd2ef; background: #eef4ff; }
.ui-v4 .funding-advice-result.hold { border-color: #cbded3; background: #f0f8f3; }
.ui-v4 .funding-advice-result strong { display: block; font-size: 16px; line-height: 1.45; }
.ui-v4 .funding-advice-result.action strong { color: #245699; }
.ui-v4 .funding-advice-result.hold strong { color: #236449; }
.ui-v4 .funding-advice-result p { margin: 7px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.ui-v4 .funding-advice-result p b { color: #435774; margin-right: 5px; }
.ui-v4 .funding-advice-result .funding-advice-warning { padding: 8px 10px; border-radius: 7px; background: #fff2df; color: #814000; font-weight: 700; }
.ui-v4 .funding-advice-result small { display: block; margin-top: 9px; color: #617089; line-height: 1.5; }
.ui-v4 .dashboard-ai-overview { padding: 17px; border: 1px solid #d8e0eb; border-radius: 12px; background: #fff; }
.ui-v4 .dashboard-ai-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.ui-v4 .dashboard-ai-head h2 { margin: 0; font-size: 17px; color: #24334a; }
.ui-v4 .dashboard-ai-head p { margin: 3px 0 0; color: #607089; font-size: 12px; }
.ui-v4 .dashboard-ai-head small { color: #718098; white-space: nowrap; }
.ui-v4 .dashboard-ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ui-v4 button.dashboard-ai-card:not(.ghost):not(.text-button) { display: grid; align-content: start; gap: 5px; min-width: 0; min-height: 93px; padding: 12px; border: 1px solid #dce4ef; border-radius: 9px; background: #f8fafd; box-shadow: none; color: #26354a; text-align: left; }
.ui-v4 button.dashboard-ai-card:not(.ghost):not(.text-button):hover, .ui-v4 button.dashboard-ai-card:not(.ghost):not(.text-button):focus-visible { border-color: #6e99cf; background: #eef4ff; }
.ui-v4 .dashboard-ai-card span { color: #65748d; font-size: 11px; }
.ui-v4 .dashboard-ai-card strong { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ui-v4 .dashboard-ai-card small { color: #3c68a2; font-size: 11px; }
@media (max-width: 900px) { .ui-v4 .dashboard-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ui-v4 .funding-advice-panel { padding: 13px; }
  .ui-v4 .funding-advice-panel .card-title { align-items: flex-start; }
  .ui-v4 .funding-advice-result { padding: 11px; }
  .ui-v4 .dashboard-ai-overview { padding: 13px; }
  .ui-v4 .dashboard-ai-head { align-items: start; }
  .ui-v4 .dashboard-ai-head small { white-space: normal; text-align: right; }
  .ui-v4 .dashboard-ai-grid { grid-template-columns: minmax(0, 1fr); }
  .ui-v4 .dashboard-ai-card { min-height: 0; }
}
.ui-v4 .position-category-picker { display: inline-flex; align-items: center; gap: 7px; color: #42516a; font-size: 11px; font-weight: 700; }
.ui-v4 .position-category-picker select { min-height: 34px; border: 1px solid #cbd5e2; border-radius: 7px; background: #fff; color: #1f2f46; font-size: 11px; }
.ui-v4 .position-funding-summary { display: grid; gap: 3px; margin: 0; padding: 10px 15px; border-top: 1px solid #e0e6ee; color: #2c4f79; background: #f5f8fc; font-size: 11px; font-weight: 700; }
.ui-v4 .position-funding-summary small { color: #51617a; font-size: 10px; font-weight: 400; }
.ui-v4 .position-spread-card-hint { margin: 0; padding: 10px 15px; color: #4c5970; font-size: 11px; }
.ui-v4 .position-spread-settings { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; margin: 10px 0 14px; }
.ui-v4 .position-spread-settings label, .ui-v4 .position-spread-pair-form label { display: grid; gap: 5px; color: #34435a; font-size: 11px; font-weight: 700; }
.ui-v4 .position-spread-settings input { width: min(280px, 70vw); }
.ui-v4 .position-spread-pair-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ui-v4 .position-spread-pair-form :is(input, select), .ui-v4 .position-spread-settings input { min-height: 36px; border: 1px solid #cbd5e2; border-radius: 7px; padding: 6px 9px; background: #fff; color: #263448; }
.ui-v4 .position-spread-pair-form button { align-self: end; min-height: 36px; }
.ui-v4 .position-spread-pairs { display: grid; gap: 9px; margin-top: 16px; }
.ui-v4 .position-spread-pair { padding: 12px; border: 1px solid #d8e0eb; border-radius: 9px; background: #f8fafd; }
.ui-v4 .position-spread-pair-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ui-v4 .position-spread-pair-head > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-v4 .position-spread-pair > small { display: block; margin-top: 4px; color: #53617a; overflow-wrap: anywhere; }
.ui-v4 .position-spread-pair-values { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.ui-v4 .position-spread-pair-values span { color: #53617a; font-size: 11px; }
.ui-v4 .position-spread-pair-values b { margin-left: 4px; color: #243e68; }
.ui-v4 .position-spread-history { display: grid; gap: 5px; margin-top: 6px; }
.ui-v4 .position-spread-history > div { display: flex; gap: 12px; flex-wrap: wrap; padding: 5px 0; border-top: 1px solid #e2e8f1; color: #465770; font-size: 10px; }
.ui-v4 .spread-volatility-card { display: flex; align-items: end; flex-wrap: wrap; gap: 10px 15px; padding: 10px 0 13px; border-bottom: 1px solid #dce4ed; }
.ui-v4 .spread-volatility-card > div { flex: 1 1 260px; }
.ui-v4 .spread-volatility-card strong { color: #2a3e5b; font-size: 13px; }
.ui-v4 .spread-volatility-card p { margin: 2px 0 0; color: #53617a; font-size: 11px; }
.ui-v4 .spread-volatility-card label { display: grid; gap: 4px; color: #42526b; font-size: 10px; font-weight: 700; }
.ui-v4 .spread-volatility-card input { width: 130px; min-height: 35px; border: 1px solid #cbd5e2; border-radius: 7px; padding: 5px 8px; background: #fff; color: #263448; }
.ui-v4 .spread-volatility-card #spreadVolatilityStats { flex: 1 1 100%; color: #385577; font-size: 11px; }
.ui-v4 .spread-volatility-card button { position: static; min-height: 35px; margin: 0; }
@media (max-width: 700px) {
  .ui-v4 .position-category-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-v4 .position-category-tabs button { justify-content: center; padding: 7px 5px; font-size: 10px; }
  .ui-v4 .position-spread-pair-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-v4 .position-spread-pair-form > label:first-child, .ui-v4 .position-spread-pair-form > button { grid-column: 1 / -1; }
  .ui-v4 .position-spread-pair-head { align-items: start; flex-direction: column; }
}
.ui-v4 .position-monitor-card {
  overflow: hidden;
  border: 1px solid rgba(132, 150, 164, .34);
  border-radius: 14px;
  background: rgba(246, 247, 248, .68);
}
.ui-v4 .position-monitor-card.status-qualifying { border-color: rgba(99, 89, 73, .55); box-shadow: inset 3px 0 0 #7f5e24; }
.ui-v4 .position-monitor-card.status-alerted,
.ui-v4 .position-monitor-card.status-ready_no_route { border-color: rgba(90, 66, 68, .58); box-shadow: inset 3px 0 0 #752128; }
.ui-v4 .position-monitor-card.status-stale { border-color: rgba(97, 115, 130, .3); opacity: .82; }
.ui-v4 .position-monitor-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  border-bottom: 1px solid rgba(229, 233, 236, .28);
  background: linear-gradient(90deg, rgba(238, 241, 243, .32), transparent);
}
.ui-v4 .position-monitor-card-head span { color: #586a8d; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.ui-v4 .position-monitor-card-head h3 { margin: 4px 0 0; color: #24292e; font-size: 16px; }
.ui-v4 .position-monitor-card-head em { margin-left: 7px; padding: 3px 7px; border-radius: 6px; font-size: 9px; font-style: normal; }
.ui-v4 .position-monitor-card-head em.long { color: #288d68; background: rgba(132, 164, 154, .16); }
.ui-v4 .position-monitor-card-head em.short { color: #501816; background: rgba(158, 124, 127, .16); }
.ui-v4 .position-status { padding: 6px 9px; border: 1px solid rgba(93, 112, 125, .25); border-radius: 8px; color: #2a2f38; background: rgba(230, 234, 236, .14); font-size: 9px; white-space: nowrap; }
.ui-v4 .position-monitor-metrics,
.ui-v4 .position-monitor-books,
.ui-v4 .position-monitor-rule-state { display: grid; gap: 1px; border-bottom: 1px solid rgba(229, 233, 236, .22); background: rgba(132, 150, 164, .18); }
.ui-v4 .position-monitor-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-v4 .position-monitor-books,
.ui-v4 .position-monitor-rule-state { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-v4 .position-monitor-metrics > div,
.ui-v4 .position-monitor-books > div,
.ui-v4 .position-monitor-rule-state > div { display: grid; gap: 5px; min-width: 0; padding: 13px 16px; background: rgba(246, 247, 248, .83); }
.ui-v4 .position-monitor-metrics span,
.ui-v4 .position-monitor-books span,
.ui-v4 .position-monitor-rule-state span { color: #5d6b89; font-size: 9px; }
.ui-v4 .position-monitor-metrics b,
.ui-v4 .position-monitor-books b,
.ui-v4 .position-monitor-rule-state b { overflow: hidden; color: #23262e; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ui-v4 .position-monitor-books small { overflow: hidden; color: #596b8c; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.ui-v4 .position-monitor-card .positive { color: #2ea17b; }
.ui-v4 .position-monitor-card .negative { color: #611b1c; }
.ui-v4 .position-monitor-warning { padding: 10px 16px; color: #5d1a1c; background: rgba(237, 230, 231, .12); font-size: 9px; }
.ui-v4 .position-monitor-empty { padding: 32px 20px; border: 1px dashed rgba(127, 147, 160, .35); border-radius: 12px; color: #5a6987; text-align: center; }
.ui-v4 .position-monitor-empty h3 { margin: 0 0 6px; color: #23272e; font-size: 14px; }
.ui-v4 .position-monitor-empty p { margin: 0; font-size: 10px; }
.ui-v4 .position-monitor-empty.error { border-color: rgba(86, 64, 64, .35); color: #4a1516; }

.ui-v4 .user-badge { padding: 7px 10px; border: 1px solid rgba(105, 128, 143, .3); border-radius: 999px; color: #2c313b; background: rgba(237, 240, 242, .35); font-size: 10px; white-space: nowrap; }
.ui-v4 .private-webhook-card .secret-input-row { grid-template-columns: minmax(260px, 1fr) auto auto auto; }
.ui-v4 .admin-user-card > button { margin-bottom: 14px; }
.ui-v4 .admin-user-list { display: grid; gap: 8px; margin-top: 16px; }
.ui-v4 .admin-user-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid rgba(132, 151, 164, .28); border-radius: 10px; background: rgba(245, 246, 247, .66); }
.ui-v4 .admin-user-row > div:first-child { display: grid; gap: 4px; }
.ui-v4 .admin-user-row b { color: #24272d; }
.ui-v4 .admin-user-row span { color: #506287; font-size: 10px; }
.ui-v4 .admin-user-row > div:last-child { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ui-v4 .logout-dialog { width: min(620px, calc(100vw - 32px)); border: 1px solid rgba(112, 135, 150, .45); border-radius: 16px; color: #23272e; background: #f5f6f7; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.ui-v4 .logout-dialog::backdrop { background: rgba(248, 249, 250, .75); backdrop-filter: blur(4px); }
.ui-v4 .logout-dialog form { padding: 8px; }
.ui-v4 .logout-options { display: grid; gap: 9px; margin-top: 18px; }
.ui-v4 .logout-options button { display: grid; gap: 5px; width: 100%; padding: 14px 16px; text-align: left; }
.ui-v4 .logout-options span { font-size: 10px; font-weight: 400; opacity: .78; }

@media(max-width:1000px) {
  .ui-v4 .aster-capacity-card { grid-template-columns: minmax(170px,.8fr) minmax(220px,1fr) minmax(0,1.8fr); }
  .ui-v4 .aster-capacity-meta { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; }
  .ui-v4 .funding-history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-v4 .trading-credentials,
  .ui-v4 .trading-order { grid-template-columns: 1fr; }
  .ui-v4 .trading-credential-drawer,
  .ui-v4 .trading-order > * { grid-column: 1; }
  .ui-v4 .trading-quick-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-v4 .trading-live-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-v4 .dashboard-side { grid-template-columns: 1fr; }
  .ui-v4 .position-monitor-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-v4 .position-credential-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-v4 .position-monitor-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width:700px) {
  .ui-v4 .aster-capacity-card { grid-template-columns: 1fr auto; gap: 10px; padding: 12px; }
  .ui-v4 .aster-capacity-primary { text-align: right; }
  .ui-v4 .aster-capacity-primary strong { font-size: 16px; }
  .ui-v4 .aster-capacity-levels { grid-column: 1 / -1; }
  .ui-v4 .aster-capacity-meta { grid-column: 1 / -1; justify-content: flex-start; }
  .ui-v4 .funding-history-panel { padding: 15px; }
  .ui-v4 .funding-history-head,.ui-v4 .funding-history-list-head { align-items: stretch; flex-direction: column; }
  .ui-v4 .funding-history-stats { grid-template-columns: 1fr; }
  .ui-v4 .funding-history-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-v4 .funding-history-card header { grid-column: 1 / -1; }
  .ui-v4 .main-nav { gap: 5px; }
  .ui-v4 .main-nav button { min-width: 70px; }
  .ui-v4 .workspace-page > .page-hero,
  .ui-v4 .settings-grid > .page-hero { padding: 18px; }
  .ui-v4 .trading-panel { padding: 16px; }
  .ui-v4 .strategy-toolbar { grid-template-columns: 1fr; }
  .ui-v4 .trading-leg-summary { overflow-x: auto; }
  .ui-v4 .trading-leg-summary-head,
  .ui-v4 .trading-leg-summary-row { min-width: 720px; }
  .ui-v4 .trading-quick-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-v4 .trading-primary-action { grid-column: 1 / -1; }
  .ui-v4 .strategy-preview { grid-template-columns: 1fr; }
  .ui-v4 .strategy-preview > div { border-right: 0; border-bottom: 1px solid rgba(127, 145, 160, .3); }
  .ui-v4 .strategy-preview > small { grid-column: 1; }
  .ui-v4 .trading-live-summary { grid-template-columns: 1fr 1fr; }
  .ui-v4 .account-monitor-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ui-v4 .account-monitor-tabs button { min-width: 0; padding: 0 8px; font-size: 11px; }
  .ui-v4 .position-monitor-rules,
  .ui-v4 .position-credential-status,
  .ui-v4 .position-monitor-metrics,
  .ui-v4 .position-monitor-books,
  .ui-v4 .position-monitor-rule-state { grid-template-columns: 1fr; }
  .ui-v4 .position-monitor-card-head { align-items: flex-start; }
  .ui-v4 .private-webhook-card .secret-input-row { grid-template-columns: 1fr 1fr; }
  .ui-v4 .private-webhook-card .secret-input-row input { grid-column: 1 / -1; }
  .ui-v4 .admin-user-row { align-items: flex-start; flex-direction: column; }
}