:root {
  color-scheme: light;
  --bg: #edf3f7;
  --surface: #fbfdff;
  --panel: #ffffff;
  --panel-2: #f7fafc;
  --panel-3: #eef6fb;
  --line: #d7e1ea;
  --line-soft: rgba(60, 78, 98, 0.14);
  --text: #111c2b;
  --muted: #5d6f84;
  --faint: #8a9aad;
  --green: #00a884;
  --red: #e64b5d;
  --yellow: #b58100;
  --blue: #2f80ed;
  --purple: #7c5cff;
  --body-gradient-a: rgba(47, 128, 237, 0.12);
  --body-gradient-b: #fbfdff;
  --body-gradient-c: #e8eef3;
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-bg-strong: linear-gradient(180deg, #ffffff, #f7fbff);
  --hero-bg:
    linear-gradient(90deg, rgba(47, 128, 237, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.9));
  --select-bg: linear-gradient(180deg, #ffffff, #f8fbff);
  --chart-bg: #f7f9fc;
  --chart-bg-rgb: 247, 249, 252;
  --chart-bg-alpha: 0.78;
  --chart-photo: url("/assets/chart-bg-white.png");
  --chart-grid: #dbe3ec;
  --chart-text: #182433;
  --chart-muted: #718196;
  --chart-hover: rgba(24, 36, 51, 0.58);
  --chart-hover-label-bg: rgba(23, 32, 44, 0.96);
  --chart-hover-label-text: #ffffff;
  --shadow: 0 18px 46px rgba(45, 62, 82, 0.1);
  --shadow-soft: 0 8px 22px rgba(45, 62, 82, 0.07);
  --radius: 8px;
}

body[data-theme="graphite"] {
  color-scheme: dark;
  --bg: #151a21;
  --surface: #1e252e;
  --panel: #202832;
  --panel-2: #252e39;
  --panel-3: #2b3541;
  --line: #394655;
  --line-soft: rgba(221, 231, 241, 0.12);
  --text: #eef4fb;
  --muted: #a8b7c8;
  --faint: #7d8a99;
  --green: #2dd4a8;
  --red: #ff6376;
  --yellow: #f3bd4e;
  --blue: #6aa8ff;
  --purple: #a894ff;
  --body-gradient-a: rgba(106, 168, 255, 0.14);
  --body-gradient-b: #202832;
  --body-gradient-c: #11161d;
  --card-bg: rgba(32, 40, 50, 0.94);
  --card-bg-strong: linear-gradient(180deg, #26303c, #1d252f);
  --hero-bg:
    linear-gradient(90deg, rgba(106, 168, 255, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(38, 48, 60, 0.98), rgba(27, 34, 43, 0.94));
  --select-bg: linear-gradient(180deg, #2a3441, #202832);
  --chart-bg: #171d25;
  --chart-bg-rgb: 23, 29, 37;
  --chart-bg-alpha: 0.72;
  --chart-photo: url("/assets/chart-bg-graphite.png");
  --chart-grid: #2e3947;
  --chart-text: #e8f0fa;
  --chart-muted: #93a3b5;
  --chart-hover: rgba(232, 240, 250, 0.72);
  --chart-hover-label-bg: rgba(7, 12, 18, 0.96);
  --chart-hover-label-text: #f7fbff;
  --graphite-accent-surface: linear-gradient(180deg, rgba(47, 128, 237, 0.24), rgba(47, 128, 237, 0.13));
  --graphite-accent-surface-strong: linear-gradient(180deg, rgba(47, 128, 237, 0.34), rgba(47, 128, 237, 0.18));
  --graphite-accent-border: rgba(106, 168, 255, 0.38);
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.22);
}

body[data-theme="sky"] {
  --bg: #dff3ff;
  --surface: #f0fbff;
  --panel: #eaf8ff;
  --panel-2: #dff3ff;
  --panel-3: #cdeeff;
  --line: #abd9f2;
  --line-soft: rgba(31, 155, 223, 0.22);
  --text: #0b2738;
  --muted: #426e88;
  --faint: #6e9db7;
  --green: #00a884;
  --red: #df5b71;
  --yellow: #b78a12;
  --blue: #1f9bdf;
  --purple: #6386ff;
  --body-gradient-a: rgba(31, 155, 223, 0.26);
  --body-gradient-b: #f2fbff;
  --body-gradient-c: #cceeff;
  --card-bg: rgba(234, 248, 255, 0.96);
  --card-bg-strong: linear-gradient(180deg, #f8fdff, #dff3ff);
  --hero-bg:
    linear-gradient(90deg, rgba(31, 155, 223, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(244, 252, 255, 0.98), rgba(210, 240, 255, 0.96));
  --select-bg: linear-gradient(180deg, #f8fdff, #dff3ff);
  --chart-bg: #ebf8ff;
  --chart-bg-rgb: 235, 248, 255;
  --chart-bg-alpha: 0.68;
  --chart-photo: url("/assets/chart-bg-sky.png");
  --chart-grid: #b9ddf0;
  --chart-text: #153047;
  --chart-muted: #66869b;
  --chart-hover: rgba(16, 76, 116, 0.62);
  --chart-hover-label-bg: rgba(13, 66, 108, 0.96);
  --chart-hover-label-text: #ffffff;
}

body[data-theme="rose"] {
  --bg: #fff0f6;
  --surface: #fffafd;
  --panel: #ffffff;
  --panel-2: #fff4f8;
  --panel-3: #ffe9f2;
  --line: #efd1dd;
  --line-soft: rgba(202, 89, 130, 0.15);
  --text: #2d1622;
  --muted: #7f5869;
  --faint: #aa8797;
  --green: #009f83;
  --red: #dc4f76;
  --yellow: #b98517;
  --blue: #4f8de8;
  --purple: #c06bda;
  --body-gradient-a: rgba(220, 79, 118, 0.14);
  --body-gradient-b: #fffafd;
  --body-gradient-c: #ffe9f2;
  --card-bg: rgba(255, 255, 255, 0.94);
  --card-bg-strong: linear-gradient(180deg, #ffffff, #fff4f8);
  --hero-bg:
    linear-gradient(90deg, rgba(220, 79, 118, 0.09), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 248, 0.95));
  --select-bg: linear-gradient(180deg, #ffffff, #fff5f9);
  --chart-bg: #fff9fc;
  --chart-bg-rgb: 255, 249, 252;
  --chart-bg-alpha: 0.68;
  --chart-photo: url("/assets/chart-bg-rose.png");
  --chart-grid: #ecd2dd;
  --chart-text: #2d1622;
  --chart-muted: #8b6878;
  --chart-hover: rgba(124, 47, 84, 0.62);
  --chart-hover-label-bg: rgba(105, 39, 72, 0.96);
  --chart-hover-label-text: #fff8fb;
}

body[data-theme="gold"] {
  color-scheme: dark;
  --bg: #2a1a07;
  --surface: #4a2f0c;
  --panel: #5b3a10;
  --panel-2: #7a541b;
  --panel-3: #a87822;
  --line: rgba(250, 204, 91, 0.48);
  --line-soft: rgba(250, 204, 91, 0.22);
  --text: #fff4d4;
  --muted: #e9c979;
  --faint: #c59b46;
  --green: #23c79a;
  --red: #ff6b5f;
  --yellow: #f7c948;
  --blue: #f0b939;
  --purple: #d6a23c;
  --body-gradient-a: rgba(250, 204, 91, 0.34);
  --body-gradient-b: #100906;
  --body-gradient-c: #4b2f08;
  --card-bg: rgba(95, 61, 16, 0.96);
  --card-bg-strong:
    linear-gradient(135deg, rgba(255, 220, 112, 0.2), transparent 38%),
    linear-gradient(180deg, #8b621d, #3a2409);
  --hero-bg:
    linear-gradient(90deg, rgba(250, 204, 91, 0.26), transparent 42%),
    linear-gradient(180deg, #8b621d, #2d1b06);
  --select-bg: linear-gradient(180deg, #8b621d, #4b2f08);
  --chart-bg: #1b1207;
  --chart-bg-rgb: 27, 18, 7;
  --chart-bg-alpha: 0.7;
  --chart-photo: url("/assets/chart-bg-gold-dragon-fast.jpg");
  --chart-grid: rgba(250, 204, 91, 0.2);
  --chart-text: #fff4d4;
  --chart-muted: #d7b766;
  --chart-hover: rgba(255, 232, 151, 0.78);
  --chart-hover-label-bg: rgba(51, 28, 4, 0.96);
  --chart-hover-label-text: #fff2c2;
  --shadow: 0 18px 46px rgba(20, 10, 0, 0.42);
  --shadow-soft: 0 8px 22px rgba(20, 10, 0, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, var(--body-gradient-a), transparent 34%),
    linear-gradient(180deg, var(--body-gradient-b) 0%, var(--bg) 58%, var(--body-gradient-c) 100%);
  color: var(--text);
  font-family: "Inter", "Manrope", "SF Pro Display", "SF Pro Text", "Segoe UI", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13.5px;
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "cv04" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.fireworksLayer {
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: none;
  overflow: hidden;
}

.fireworksLayer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.82), transparent 20%),
    radial-gradient(circle at 24% 38%, rgba(255, 204, 77, 0.36), transparent 26%),
    radial-gradient(circle at 76% 42%, rgba(47, 128, 237, 0.34), transparent 28%),
    rgba(255, 255, 255, 0.14);
}

.fireworksLayer.flash::before {
  animation: screenFlash 720ms ease-out forwards;
}

.firework {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.firework::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  box-shadow: 0 0 42px rgba(255, 255, 255, 0.7);
  animation: haloBurst var(--halo-duration, 1200ms) ease-out forwards;
}

.spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--spark-size, 10px);
  height: var(--spark-size, 10px);
  border-radius: 999px;
  background: hsl(var(--hue), 96%, 58%);
  box-shadow:
    0 0 16px hsl(var(--hue), 96%, 58%),
    0 0 32px hsl(var(--hue), 96%, 66%);
  animation: sparkBurst var(--duration, 1500ms) cubic-bezier(.08,.72,.18,1) forwards;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
}

@keyframes screenFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes haloBurst {
  0% {
    opacity: 0.95;
    transform: scale(0.12);
  }
  100% {
    opacity: 0;
    transform: scale(18);
  }
}

@keyframes sparkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(0.4);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0.08);
  }
}

button,
input,
select {
  font: inherit;
}

.app {
  width: min(1600px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 0 20px;
}

.topbar,
.controls,
.layout {
  display: flex;
  gap: 10px;
}

.topbar {
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}

.topbar > div:first-child {
  display: grid;
  align-content: center;
  min-height: 88px;
  padding: 15px 18px 16px;
  border: 1px solid rgba(214, 226, 238, 0.88);
  background: var(--hero-bg);
  border-radius: var(--radius);
  flex: 1;
  box-shadow: var(--shadow-soft), 0 1px 0 rgba(255,255,255,0.9) inset;
  position: relative;
  overflow: hidden;
}

.topbar > div:first-child::before {
  content: "";
  position: absolute;
  inset: 13px auto 13px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--blue), rgba(0, 168, 132, 0.85));
}

.eyebrow {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 860;
  line-height: 1.1;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  margin-top: 4px;
  font-size: 29px;
  line-height: 1.02;
  font-weight: 860;
  color: var(--text);
}

.subtitle {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 560;
}

.priceBox {
  min-width: 286px;
  padding: 14px 17px;
  border: 1px solid rgba(47, 128, 237, 0.28);
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.08), transparent 42%),
    var(--card-bg-strong);
  border-radius: var(--radius);
  text-align: right;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  display: grid;
  align-content: center;
}

.symbolBox,
.languageBox,
.themeBox {
  min-width: 162px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: grid;
  align-content: center;
}

.languageBox {
  min-width: 190px;
}

.themeBox {
  min-width: 154px;
}

.symbolBox label,
.languageBox label,
.themeBox label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 880;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.symbolBox select,
.languageBox select,
.themeBox select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--select-bg);
  color: var(--text);
  padding: 0 34px 0 12px;
  outline: none;
  text-align: center;
  font-size: 14.5px;
  font-weight: 840;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}

.symbolBox option,
.languageBox option,
.themeBox option {
  color: var(--text);
  background: var(--panel);
}

.symbolBox select:focus,
.languageBox select:focus,
.themeBox select:focus {
  border-color: rgba(47, 128, 237, 0.56);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.1);
}

.priceBox .label,
.priceBox span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.priceBox strong {
  display: block;
  margin: 2px 0 3px;
  font-size: 40px;
  line-height: 1;
  font-weight: 880;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.controls {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), 0 1px 0 rgba(255,255,255,0.84) inset;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(6, 74px);
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-3);
}

.segmented button {
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 820;
  text-align: center;
}

.segmented button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(47, 128, 237, 0.15), inset 0 0 0 1px rgba(47, 128, 237, 0.18);
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}

.layout {
  align-items: stretch;
}

.chartShell {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.chartShell::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: min(624px, calc(100vh - 248px));
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(rgba(var(--chart-bg-rgb), 0.1), rgba(var(--chart-bg-rgb), 0.1)),
    var(--chart-photo),
    var(--chart-bg);
  background-size: cover;
  background-position: center;
}

.chartTools {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.layerTools {
  min-height: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px 9px;
}

.layerTools label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.layerTools input {
  accent-color: var(--blue);
}

.chartTools button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 820;
  text-align: center;
}

.chartTools button:hover {
  color: var(--text);
  border-color: rgba(47, 128, 237, 0.42);
}

canvas {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(624px, calc(100vh - 248px));
  cursor: grab;
  touch-action: none;
  user-select: none;
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(var(--chart-bg-rgb), var(--chart-bg-alpha)), rgba(var(--chart-bg-rgb), var(--chart-bg-alpha)));
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,0.75);
}

.metrics span,
.chartShell,
.panel,
.layerTools label,
.chartTools button,
.positionActions button:last-child,
.trackedPlanPanel,
.researchPanel,
.researchStatus,
.globalBacktest,
.rollingOos,
.hfLearning,
.orderFlowPanel,
.orderFlowItem,
.tradePlanPanel,
.planCard,
.levelItem,
.fibForm,
.positionForm,
.positionAdvice,
.tradePlanBox,
.tradeTier,
.tradeSignalItem,
.strictProfile,
.historyEdge {
  border-color: var(--line);
  background-color: var(--card-bg);
}

.chartShell,
.panel,
.trackedPlanPanel,
.researchPanel,
.orderFlowPanel,
.tradePlanPanel {
  background: var(--card-bg-strong);
}

.layerTools label,
.chartTools button,
.metrics span,
.researchStatus,
.orderFlowItem,
.trackedGrid div,
.tradeTier,
.tradeSignalItem,
.positionAdvice {
  background: var(--panel-2);
}

body[data-theme="graphite"] .planCard,
body[data-theme="graphite"] .tradePlanBox,
body[data-theme="graphite"] .strictProfile,
body[data-theme="graphite"] .historyEdge,
body[data-theme="graphite"] .globalBacktest,
body[data-theme="graphite"] .rollingOos,
body[data-theme="graphite"] .hfLearning {
  background: linear-gradient(180deg, rgba(42, 52, 65, 0.96), rgba(31, 39, 49, 0.96));
}

body[data-theme="graphite"] .topbar > div:first-child,
body[data-theme="graphite"] .symbolBox,
body[data-theme="graphite"] .languageBox,
body[data-theme="graphite"] .themeBox,
body[data-theme="graphite"] .priceBox,
body[data-theme="graphite"] .controls,
body[data-theme="graphite"] .chartShell,
body[data-theme="graphite"] .panel {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="graphite"] .symbolBox select,
body[data-theme="graphite"] .languageBox select,
body[data-theme="graphite"] .themeBox select,
body[data-theme="graphite"] input {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="sky"] .planCard,
body[data-theme="sky"] .tradePlanBox,
body[data-theme="sky"] .strictProfile,
body[data-theme="sky"] .historyEdge {
  background: linear-gradient(180deg, #ffffff, #f0fbff);
}

body[data-theme="rose"] .planCard,
body[data-theme="rose"] .tradePlanBox,
body[data-theme="rose"] .strictProfile,
body[data-theme="rose"] .historyEdge {
  background: linear-gradient(180deg, #ffffff, #fff5f9);
}

canvas.dragging {
  cursor: grabbing;
}

canvas.price-axis-hover,
canvas.scaling {
  cursor: ns-resize;
}

.panel {
  width: 462px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  padding: 11px;
  overflow: auto;
  max-height: calc(100vh - 156px);
  box-shadow: var(--shadow);
}

.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 0 1px;
}

.panelHeader h2 {
  font-size: 15.5px;
  font-weight: 880;
  color: var(--text);
  letter-spacing: 0;
}

.panelHeader span {
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.levelsHeader {
  margin-top: 16px;
}

.planList,
.levelList,
.structureAdvicePanel {
  display: grid;
  gap: 8px;
}

.structureAdviceHeader {
  margin-top: 14px;
}

.structureAdvicePanel {
  margin-bottom: 12px;
}

.structureCard {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.structureCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--blue);
}

.structureCard.buy::before {
  background: var(--green);
}

.structureCard.sell::before {
  background: var(--red);
}

.structureCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.structureCardTop b {
  color: var(--text);
  font-size: 13px;
  font-weight: 880;
}

.structureCardTop span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 780;
}

.structureMetrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.structureMetrics div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(248, 251, 255, 0.78);
}

.structureMetrics div:last-child {
  grid-column: 1 / -1;
}

.structureMetrics span {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 780;
  text-transform: uppercase;
}

.structureMetrics b {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.structureBasis {
  display: grid;
  gap: 5px;
}

.structureBasis p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.structureBasis b {
  color: var(--text);
}

.structureEmpty {
  text-align: left;
}

body[data-theme="graphite"] .structureMetrics div,
body[data-theme="gold"] .structureMetrics div {
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="sky"] .structureMetrics div {
  background: rgba(219, 239, 255, 0.72);
}

body[data-theme="rose"] .structureMetrics div {
  background: rgba(255, 239, 247, 0.78);
}

.positionForm {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.fibForm {
  display: grid;
  gap: 9px;
  margin-bottom: 15px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.fibRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fibForm label span {
  display: block;
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 760;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fibForm input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdff;
  color: var(--text);
  padding: 0 9px;
  outline: none;
  text-align: center;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.fibForm input:focus {
  border-color: rgba(124, 92, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.1);
}

.positionRow {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 8px;
}

.positionForm label span {
  display: block;
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 760;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.positionForm select,
.positionForm input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdff;
  color: var(--text);
  padding: 0 9px;
  outline: none;
  text-align: center;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.positionForm select:focus,
.positionForm input:focus {
  border-color: rgba(47, 128, 237, 0.65);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.1);
}

.positionActions {
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 8px;
}

.positionActions button {
  height: 34px;
  border: 1px solid rgba(47, 128, 237, 0.3);
  border-radius: 6px;
  background: #2f80ed;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  text-align: center;
}

.positionActions button:last-child {
  background: #ffffff;
  color: var(--muted);
  border-color: var(--line);
}

.positionAdvice {
  margin-bottom: 15px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.trackedPlanPanel {
  margin-bottom: 15px;
  padding: 11px;
  border: 1px solid rgba(47, 128, 237, 0.2);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: var(--shadow-soft);
}

.trackedPlanPanel.empty {
  color: var(--muted);
  text-align: center;
  font-weight: 650;
  border-left-color: var(--line);
}

.trackedPlanPanel.profit {
  border-left-color: var(--green);
}

.trackedPlanPanel.danger {
  border-left-color: var(--red);
}

.trackedPlanPanel.near,
.trackedPlanPanel.active {
  border-left-color: var(--yellow);
}

.trackedTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.trackedTop strong {
  display: block;
  font-size: 13.5px;
  font-weight: 840;
}

.trackedTop span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.ghostButton,
.trackPlanButton {
  height: 30px;
  border: 1px solid rgba(47, 128, 237, 0.28);
  border-radius: 6px;
  background: #ffffff;
  color: var(--blue);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
}

.ghostButton {
  padding: 0 10px;
  flex: 0 0 auto;
}

.trackedGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.trackedGrid div {
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  text-align: center;
}

.trackedGrid span,
.trackedAction span {
  display: block;
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.trackedGrid b {
  font-size: 12.5px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.trackedAction {
  padding: 8px;
  border: 1px solid rgba(47, 128, 237, 0.16);
  border-radius: 6px;
  background: rgba(47, 128, 237, 0.06);
  color: var(--text);
  line-height: 1.45;
}

.trackedAction b {
  font-size: 12px;
  font-weight: 740;
}

.trackedTargets {
  margin-top: 8px;
  margin-bottom: 0;
}

.researchPanel {
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid rgba(47, 128, 237, 0.2);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.08), transparent 46%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: var(--shadow-soft);
}

.researchTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.researchTop strong {
  font-size: 13.5px;
  font-weight: 850;
}

.researchTop span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 820;
}

.researchStatus {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.74);
  text-align: left;
}

.researchStatus b {
  font-size: 12px;
  font-weight: 850;
}

.researchStatus span,
.researchStatus small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
}

.globalBacktest {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
}

.globalBacktestHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.globalBacktestHead b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.globalBacktestHead span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
}

.globalBacktestRows {
  display: grid;
  gap: 5px;
}

.globalBacktestRow {
  display: grid;
  grid-template-columns: 44px 54px 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.globalBacktestRow span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
}

.globalBacktestRow b {
  font-size: 12px;
  font-weight: 900;
}

.globalBacktestRow em,
.globalBacktestRow small {
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 680;
  line-height: 1.3;
}

.globalBacktestRow small {
  grid-column: 3;
}

.globalBacktestRow.good b {
  color: var(--green);
}

.globalBacktestRow.watch b {
  color: var(--blue);
}

.globalBacktestRow.weak b {
  color: var(--red);
}

.rollingOos {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(47, 128, 237, 0.12);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(0, 168, 132, 0.07), rgba(47, 128, 237, 0.04)),
    #fff;
}

.rollingOosHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.rollingOosHead b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.rollingOosHead span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
  text-align: right;
}

.rollingOosRows {
  display: grid;
  gap: 5px;
}

.rollingFlow,
.rollingCandidate,
.rollingReview,
.rollingFlowModel {
  display: grid;
  grid-template-columns: 78px 54px 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 7px;
  border: 1px solid rgba(47, 128, 237, 0.14);
  border-radius: 6px;
  background: rgba(247, 251, 255, 0.95);
}

.rollingCandidate {
  grid-template-columns: 82px 72px 1fr;
  border-color: rgba(0, 168, 132, 0.16);
  background: rgba(245, 253, 250, 0.95);
}

.rollingReview {
  grid-template-columns: 82px 72px 1fr;
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(255, 251, 235, 0.88);
}

.rollingFlowModel {
  grid-template-columns: 82px 72px 1fr;
  border-color: rgba(47, 128, 237, 0.16);
  background: rgba(247, 251, 255, 0.92);
}

.rollingFlow span,
.rollingFlow em,
.rollingCandidate span,
.rollingCandidate em,
.rollingReview span,
.rollingReview em,
.rollingFlowModel span,
.rollingFlowModel em {
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 720;
}

.rollingFlow b,
.rollingCandidate b,
.rollingReview b,
.rollingFlowModel b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.rollingCandidate b {
  color: var(--green);
}

.rollingReview b {
  color: #b45309;
}

.rollingFlowModel b {
  color: var(--blue);
}

.rollingFlow.ready b {
  color: var(--green);
}

.rollingFlow.warming b {
  color: var(--blue);
}

.rollingFlow.thin b {
  color: var(--red);
}

.rollingOosRow {
  display: grid;
  grid-template-columns: 74px 54px 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
}

.rollingOosRow span {
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 850;
}

.rollingOosRow b {
  font-size: 12px;
  font-weight: 900;
}

.rollingOosRow em,
.rollingOosRow small {
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 680;
  line-height: 1.3;
}

.rollingOosRow small {
  grid-column: 3;
}

.rollingOosRow.good b {
  color: var(--green);
}

.rollingOosRow.watch b {
  color: var(--blue);
}

.rollingOosRow.weak b {
  color: var(--red);
}

.hfLearning {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.07), rgba(47, 128, 237, 0.04)),
    #fff;
}

.hfLearningHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.hfLearningHead b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.hfLearningHead span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
  text-align: right;
}

.hfLearningGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.hfLearningItem,
.hfLearningLoss {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
}

.hfLearningItem span,
.hfLearningLoss span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.hfLearningItem b,
.hfLearningLoss b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hfLearningItem em,
.hfLearningLoss em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hfLearningLoss {
  display: grid;
  grid-template-columns: 72px 1fr 112px;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  border-color: rgba(239, 68, 68, 0.14);
  background: rgba(255, 247, 247, 0.86);
}

.hfLearningLoss span,
.hfLearningLoss b,
.hfLearningLoss em {
  display: block;
}

.strategyTag {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(47, 128, 237, 0.2);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(47, 128, 237, 0.08);
  font-size: 10.5px;
  font-weight: 820;
}

.orderFlowPanel {
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid rgba(0, 168, 132, 0.18);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(0, 168, 132, 0.07), transparent 48%),
    linear-gradient(180deg, #ffffff, #f7fbfa);
  box-shadow: var(--shadow-soft);
}

.orderFlowTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.orderFlowTop strong {
  font-size: 13.5px;
  font-weight: 860;
}

.orderFlowTop span {
  color: var(--green);
  font-size: 10.5px;
  font-weight: 820;
  text-align: right;
}

.orderFlowGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.orderFlowItem {
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  text-align: center;
}

.orderFlowItem span,
.orderFlowItem em {
  display: block;
  color: var(--faint);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 780;
  text-transform: uppercase;
}

.orderFlowItem b {
  display: block;
  margin: 3px 0;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 860;
  font-variant-numeric: tabular-nums;
}

.orderFlowPanel p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.38;
  text-align: center;
}

.orderFlowPanel small {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font-size: 9.8px;
  line-height: 1.35;
  text-align: center;
}

.tradePlanPanel {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid rgba(47, 128, 237, 0.18);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.07), rgba(255, 255, 255, 0.2)),
    #ffffff;
  box-shadow: var(--shadow-soft);
}

.tradePlanPanel.actionable {
  border-left-color: var(--green);
}

.tradePlanPanel.defense {
  border-left-color: var(--yellow);
}

.tradePlanPanelTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.tradePlanPanelTop strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 880;
}

.tradePlanPanelTop span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.tradePlanPanelTop b {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.watchLevelGrid {
  display: grid;
  gap: 6px;
}

.watchLevelGrid div {
  padding: 8px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  background: rgba(255, 251, 235, 0.85);
}

.watchLevelGrid span,
.watchLevelGrid em {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 720;
}

.watchLevelGrid b {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 880;
  font-variant-numeric: tabular-nums;
}

.positionAdvice.long {
  border-left: 3px solid var(--green);
}

.positionAdvice.short {
  border-left: 3px solid var(--red);
}

.adviceTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.livePriceLine {
  margin-bottom: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.profit {
  color: var(--green);
}

.loss {
  color: var(--red);
}

.adviceGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.adviceGrid div,
.orderGrid div {
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  text-align: center;
}

.adviceGrid span,
.orderGrid span {
  display: block;
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adviceGrid b,
.orderGrid b {
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.positionAdvice p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.42;
}

.planCard,
.levelItem,
.empty {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.planCard {
  padding: 11px;
  position: relative;
  overflow: hidden;
}

.guestLocked {
  position: relative;
  min-height: 96px;
  overflow: hidden;
  border-radius: var(--radius);
}

.guestLocked > * {
  filter: blur(8px);
  opacity: 0.42;
  user-select: none;
  pointer-events: none;
}

.guestLocked::after {
  content: attr(data-lock-text);
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(23, 34, 52, 0.16);
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(238, 243, 249, 0.68)),
    rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(14px);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-theme="graphite"] .guestLocked::after {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(18, 24, 34, 0.84), rgba(42, 50, 62, 0.74)),
    rgba(16, 20, 28, 0.72);
  color: #f4f7fb;
}

body[data-theme="gold"] .guestLocked::after {
  border-color: rgba(111, 68, 14, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 242, 188, 0.82), rgba(196, 142, 44, 0.64)),
    rgba(255, 238, 176, 0.62);
  color: #3e2500;
}

.android-app .guestLocked {
  min-height: 132px;
}

.android-app .guestLocked > * {
  filter: blur(10px);
  opacity: 0.32;
}

.android-app .guestLocked::after {
  font-size: 16px;
  min-height: 132px;
}

.planCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--blue);
}

.planCard.buy::before {
  background: var(--green);
}

.planCard.sell::before {
  background: var(--red);
}

.planCard.wait {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.planCard.wait::before {
  background: #a7b4c3;
}

.planCard.armed {
  border-color: rgba(47, 128, 237, 0.28);
}

.planCard.armed::before {
  background: var(--blue);
}

.planCard.executable {
  border-color: rgba(0, 168, 132, 0.36);
  box-shadow: 0 10px 26px rgba(0, 168, 132, 0.12);
}

.planCard.executable.sell {
  border-color: rgba(230, 75, 93, 0.34);
  box-shadow: 0 10px 26px rgba(230, 75, 93, 0.12);
}

.planTop {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.badge {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf4ff;
  color: var(--blue);
  font-weight: 800;
  font-size: 12px;
}

.planTop strong {
  display: block;
  font-size: 14.5px;
  font-weight: 880;
  letter-spacing: 0;
}

.planTop small {
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 720;
}

.score {
  justify-self: end;
  min-width: 58px;
  padding: 4px 6px;
  border-radius: 999px;
  background: #eef3f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 860;
  text-align: center;
}

.probability-medium .score {
  background: rgba(181, 129, 0, 0.1);
  color: var(--yellow);
}

.probability-high .score {
  background: rgba(47, 128, 237, 0.1);
  color: var(--blue);
}

.probability-ultra .score {
  background: rgba(0, 168, 132, 0.12);
  color: var(--green);
}

.orderGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.targets {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.targets > strong {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 820;
  text-transform: uppercase;
}

.targets > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.targets span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(181, 129, 0, 0.24);
  border-radius: 6px;
  color: var(--yellow);
  background: rgba(181, 129, 0, 0.07);
  font-variant-numeric: tabular-nums;
}

.targets span em {
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.targets span b {
  color: var(--text);
  font-size: 12px;
  font-weight: 880;
}

.targets span small {
  color: var(--yellow);
  font-size: 10.5px;
  font-weight: 780;
}

.decisionStrip {
  margin: 4px 0 8px;
  padding: 7px 8px;
  border-radius: 6px;
  background: #f3f6fa;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 780;
  text-align: center;
}

.historyEdge {
  display: grid;
  gap: 3px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  text-align: center;
}

.historyEdge span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.historyEdge b {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.historyEdge.strong {
  border-color: rgba(0, 168, 132, 0.28);
  background: rgba(0, 168, 132, 0.06);
}

.historyEdge.ok {
  border-color: rgba(47, 128, 237, 0.24);
  background: rgba(47, 128, 237, 0.05);
}

.historyEdge.weak,
.historyEdge.pending {
  border-color: rgba(181, 129, 0, 0.24);
  background: rgba(181, 129, 0, 0.05);
}

.tradePlanBox {
  display: grid;
  gap: 8px;
  margin: 9px 0;
  padding: 10px;
  border: 1px solid rgba(47, 128, 237, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.06), rgba(0, 168, 132, 0.04)),
    #ffffff;
}

.tradePlanHead,
.tradeTierTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tradePlanHead strong,
.tradeTierTop strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 900;
}

.tradePlanHead span,
.tradeTierTop span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 760;
  text-align: right;
}

.tradePlanHead b {
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.tradePlanMeta,
.tradeSignalGrid,
.tradeTierGrid {
  display: grid;
  gap: 6px;
}

.tradePlanMeta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tradePlanMeta span {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(247, 251, 255, 0.92);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
  text-align: center;
}

.tradeSignalGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tradeSignalItem {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.tradeSignalItem span,
.tradeSignalItem em,
.tradeTierGrid span {
  display: block;
  overflow: hidden;
  color: var(--faint);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tradeSignalItem b {
  display: block;
  margin: 2px 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.tradeSignalItem.positive b {
  color: var(--green);
}

.tradeSignalItem.negative b {
  color: var(--red);
}

.tradeTierList {
  display: grid;
  gap: 7px;
}

.tradeTier {
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
}

.tradeTierGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 7px;
}

.tradeTierGrid div {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  text-align: center;
}

.tradeTierGrid b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tierBasisList {
  margin: 7px 0 0;
  padding: 7px 8px;
  border: 1px solid rgba(47, 128, 237, 0.12);
  border-radius: 6px;
  background: rgba(47, 128, 237, 0.055);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 680;
  line-height: 1.45;
  text-align: left;
}

.tierBasisList p {
  margin: 0;
}

.tierBasisList p + p {
  margin-top: 5px;
}

.tierBasisList b {
  color: var(--ink);
  font-weight: 850;
}

.tradeReasoning {
  padding: 8px;
  border: 1px solid rgba(47, 128, 237, 0.1);
  border-radius: 6px;
  background: rgba(247, 251, 255, 0.88);
}

.tradeReasoning p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.38;
}

.tradeReasoning p:last-child {
  margin-bottom: 0;
}

.strictProfile {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid rgba(137, 149, 166, 0.24);
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.strictProfileTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.strictProfileTop span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.strictProfileTop b {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 860;
}

.strictMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.strictMetrics span {
  padding: 5px 6px;
  border-radius: 5px;
  background: #eef3f8;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 820;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.strictProfile p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

.strictProfile.passed {
  border-color: rgba(0, 168, 132, 0.32);
  background: rgba(0, 168, 132, 0.055);
}

.strictProfile.passed .strictProfileTop b {
  color: var(--green);
}

.strictProfile.defense,
.strictProfile.blocked {
  border-color: rgba(181, 129, 0, 0.28);
  background: rgba(181, 129, 0, 0.055);
}

.strictProfile.defense .strictProfileTop b,
.strictProfile.blocked .strictProfileTop b {
  color: #9b6400;
}

.planCard.armed .decisionStrip {
  background: rgba(47, 128, 237, 0.08);
  color: var(--blue);
}

.planCard.executable .decisionStrip {
  background: rgba(0, 168, 132, 0.09);
  color: var(--green);
}

.planCard.executable.sell .decisionStrip {
  background: rgba(230, 75, 93, 0.08);
  color: var(--red);
}

.planCard p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.42;
}

.planCard .judgement {
  color: var(--text);
  font-weight: 700;
}

.trackPlanButton {
  width: 100%;
  margin-top: 9px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.trackPlanButton:disabled {
  cursor: not-allowed;
  color: #8ca0b4;
  border-color: #d8e1eb;
  background: #f4f7fa;
  box-shadow: none;
}

.planCard.tracked {
  border-color: rgba(47, 128, 237, 0.42);
  box-shadow: 0 8px 22px rgba(47, 128, 237, 0.12);
}

.planCard.tracked .trackPlanButton {
  background: #2f80ed;
  color: #ffffff;
}

.planCard p b {
  color: var(--text);
}

.reason {
  color: #4e6277;
}

.warning {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(181, 129, 0, 0.25);
  border-radius: 6px;
  color: var(--yellow);
  background: rgba(181, 129, 0, 0.07);
  font-size: 11.5px;
  text-align: center;
}

.empty {
  padding: 12px;
  color: var(--muted);
  text-align: center;
  font-weight: 650;
}

.launchEmpty {
  display: grid;
  gap: 7px;
  text-align: left;
  border-style: dashed;
}

.launchEmpty b {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}

.launchEmpty span {
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 800;
}

.launchEmpty em,
.launchEmpty small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  font-style: normal;
}

.levelItem {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 10px;
  padding: 10px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.levelItem span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  text-align: right;
}

.levelItem.support b {
  color: var(--green);
}

.levelItem.resistance b {
  color: var(--red);
}

html[dir="rtl"] .priceBox {
  text-align: left;
}

html[dir="rtl"] .levelItem span {
  text-align: left;
}

@media (max-width: 1060px) {
  .controls,
  .layout {
    flex-direction: column;
  }

  .chartShell {
    order: 1;
  }

  .app {
    width: min(100vw - 14px, 1600px);
    padding-top: 7px;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    margin-bottom: 6px;
  }

  .topbar > div:first-child {
    display: none;
  }

  .panel {
    order: 2;
    width: 100%;
    max-height: none;
  }

  .metrics {
    justify-content: flex-start;
  }

  .segmented {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
  }

  .symbolBox,
  .languageBox,
  .themeBox {
    min-width: 0;
    width: auto;
    padding: 7px 8px;
  }

  .symbolBox label,
  .languageBox label,
  .themeBox label {
    margin-bottom: 5px;
    font-size: 11px;
  }

  .symbolBox select,
  .languageBox select,
  .themeBox select {
    height: 36px;
    font-size: 13px;
  }

  .priceBox {
    grid-column: 1 / -1;
    min-width: 0;
    width: auto;
    min-height: 58px;
    padding: 8px 10px;
    text-align: left;
  }

  .priceBox strong {
    margin: 0;
    font-size: 28px;
  }

  .controls {
    gap: 6px;
    margin-bottom: 6px;
    padding: 6px;
  }

  .segmented button {
    height: 28px;
    font-size: 11.5px;
  }

  .metrics {
    gap: 4px;
  }

  .metrics span {
    min-height: 25px;
    padding: 4px 7px;
    font-size: 10.5px;
  }

  .chartShell {
    padding: 6px;
  }

  .chartTools {
    height: auto;
    min-height: 24px;
    padding: 0 0 4px;
    font-size: 11px;
  }

  .chartTools button {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
  }

  .layerTools {
    min-height: 0;
    gap: 4px;
    padding: 0 0 5px;
  }

  .layerTools label {
    height: 24px;
    padding: 0 7px;
    font-size: 11px;
  }

  canvas {
    height: min(620px, calc(100vh - 216px));
    min-height: 420px;
  }

}

@media (max-width: 640px) {
  .app {
    width: min(100vw - 16px, 1600px);
    padding-top: 8px;
  }

  h1 {
    font-size: 22px;
  }

  .segmented {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
  }

  .segmented button {
    height: 25px;
    font-size: 10.8px;
  }

  .priceBox strong {
    font-size: 25px;
  }

  canvas {
    height: min(560px, calc(100vh - 240px));
    min-height: 360px;
  }

  .orderGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fibRow,
  .positionRow,
  .positionActions {
    grid-template-columns: 1fr;
  }
}

body[data-theme="graphite"] .panel,
body[data-theme="graphite"] .panel .planCard,
body[data-theme="graphite"] .panel .levelItem,
body[data-theme="graphite"] .panel .fibForm,
body[data-theme="graphite"] .panel .positionForm,
body[data-theme="graphite"] .panel .positionAdvice,
body[data-theme="graphite"] .panel .trackedPlanPanel,
body[data-theme="graphite"] .panel .researchPanel,
body[data-theme="graphite"] .panel .researchStatus,
body[data-theme="graphite"] .panel .globalBacktest,
body[data-theme="graphite"] .panel .rollingOos,
body[data-theme="graphite"] .panel .hfLearning,
body[data-theme="graphite"] .panel .orderFlowPanel,
body[data-theme="graphite"] .panel .orderFlowItem,
body[data-theme="graphite"] .panel .tradePlanPanel,
body[data-theme="graphite"] .panel .tradePlanBox,
body[data-theme="graphite"] .panel .tradeTier,
body[data-theme="graphite"] .panel .tradeSignalItem,
body[data-theme="graphite"] .panel .tradeReasoning,
body[data-theme="graphite"] .panel .strictProfile,
body[data-theme="graphite"] .panel .historyEdge,
body[data-theme="graphite"] .panel .trackedGrid div,
body[data-theme="graphite"] .panel .strictMetrics span,
body[data-theme="graphite"] .panel .trackPlanButton,
body[data-theme="graphite"] .panel .ghostButton,
body[data-theme="graphite"] .panel .positionActions button:last-child {
  border-color: var(--graphite-accent-border);
  background: var(--graphite-accent-surface);
  color: var(--text);
}

body[data-theme="graphite"] .panel,
body[data-theme="graphite"] .panel .trackedPlanPanel,
body[data-theme="graphite"] .panel .researchPanel,
body[data-theme="graphite"] .panel .orderFlowPanel,
body[data-theme="graphite"] .panel .tradePlanPanel {
  background: linear-gradient(180deg, #252e39, #1d252f);
}

body[data-theme="graphite"] .panel .planCard,
body[data-theme="graphite"] .panel .tradePlanBox,
body[data-theme="graphite"] .panel .strictProfile,
body[data-theme="graphite"] .panel .historyEdge {
  background:
    linear-gradient(90deg, rgba(106, 168, 255, 0.08), transparent 38%),
    linear-gradient(180deg, #27313d, #202832);
}

body[data-theme="graphite"] .panel input,
body[data-theme="graphite"] .panel select,
body[data-theme="graphite"] .panel .trackPlanButton:disabled {
  border-color: var(--graphite-accent-border);
  background: rgba(47, 128, 237, 0.11);
  color: var(--text);
}

body[data-theme="graphite"] .panel .trackedGrid div,
body[data-theme="graphite"] .panel .strictMetrics span,
body[data-theme="graphite"] .panel .tradePlanMeta span,
body[data-theme="graphite"] .panel .tradeTierGrid div,
body[data-theme="graphite"] .panel .tradeSignalItem,
body[data-theme="graphite"] .panel .orderGrid div,
body[data-theme="graphite"] .panel .targets span,
body[data-theme="graphite"] .panel .decisionStrip,
body[data-theme="graphite"] .panel .tierBasisList,
body[data-theme="graphite"] .panel .strategyTag {
  border-color: var(--graphite-accent-border);
  background: var(--graphite-accent-surface-strong);
}

body[data-theme="graphite"] .panel .positionActions button,
body[data-theme="graphite"] .panel .trackPlanButton:not(:disabled),
body[data-theme="graphite"] .panel .ghostButton {
  border-color: var(--graphite-accent-border);
  background: var(--graphite-accent-surface-strong);
  color: #f4f9ff;
}

body[data-theme="graphite"] .panel .trackedGrid div span,
body[data-theme="graphite"] .panel .strictMetrics span,
body[data-theme="graphite"] .panel .tradePlanMeta span,
body[data-theme="graphite"] .panel .tradeTierGrid div span,
body[data-theme="graphite"] .panel .tradeSignalItem span,
body[data-theme="graphite"] .panel .orderGrid div span,
body[data-theme="graphite"] .panel .targets span,
body[data-theme="graphite"] .panel .decisionStrip,
body[data-theme="graphite"] .panel .tierBasisList,
body[data-theme="graphite"] .panel .strategyTag {
  color: #dcecff;
}

body[data-theme="graphite"] .panel .reason,
body[data-theme="graphite"] .panel p,
body[data-theme="graphite"] .panel small,
body[data-theme="graphite"] .panel em,
body[data-theme="graphite"] .panel span {
  color: var(--muted);
}

body[data-theme="graphite"] .panel b,
body[data-theme="graphite"] .panel strong,
body[data-theme="graphite"] .panel h2,
body[data-theme="graphite"] .panel .planCard p b {
  color: var(--text);
}

body[data-theme="sky"] .topbar > div:first-child,
body[data-theme="sky"] .symbolBox,
body[data-theme="sky"] .languageBox,
body[data-theme="sky"] .themeBox,
body[data-theme="sky"] .priceBox,
body[data-theme="sky"] .controls,
body[data-theme="sky"] .chartShell,
body[data-theme="sky"] .panel,
body[data-theme="sky"] .panel .planCard,
body[data-theme="sky"] .panel .levelItem,
body[data-theme="sky"] .panel .fibForm,
body[data-theme="sky"] .panel .positionForm,
body[data-theme="sky"] .panel .positionAdvice,
body[data-theme="sky"] .panel .trackedPlanPanel,
body[data-theme="sky"] .panel .researchPanel,
body[data-theme="sky"] .panel .researchStatus,
body[data-theme="sky"] .panel .orderFlowPanel,
body[data-theme="sky"] .panel .orderFlowItem,
body[data-theme="sky"] .panel .tradePlanPanel,
body[data-theme="sky"] .panel .tradePlanBox,
body[data-theme="sky"] .panel .tradeTier,
body[data-theme="sky"] .panel .tradeSignalItem,
body[data-theme="sky"] .panel .tradeReasoning,
body[data-theme="sky"] .panel .strictProfile,
body[data-theme="sky"] .panel .historyEdge {
  border-color: var(--line);
  background: var(--card-bg-strong);
}

body[data-theme="sky"] .panel .researchStatus,
body[data-theme="sky"] .panel .orderFlowItem,
body[data-theme="sky"] .panel .trackedGrid div,
body[data-theme="sky"] .panel .strictMetrics span,
body[data-theme="sky"] .layerTools label,
body[data-theme="sky"] .chartTools button,
body[data-theme="sky"] .metrics span {
  background: var(--panel-2);
}

body[data-theme="sky"] .segmented,
body[data-theme="sky"] canvas {
  background:
    linear-gradient(rgba(var(--chart-bg-rgb), var(--chart-bg-alpha)), rgba(var(--chart-bg-rgb), var(--chart-bg-alpha)));
}

body[data-theme="gold"] .topbar > div:first-child,
body[data-theme="gold"] .symbolBox,
body[data-theme="gold"] .languageBox,
body[data-theme="gold"] .themeBox,
body[data-theme="gold"] .priceBox,
body[data-theme="gold"] .controls,
body[data-theme="gold"] .chartShell,
body[data-theme="gold"] .panel,
body[data-theme="gold"] .panel .planCard,
body[data-theme="gold"] .panel .levelItem,
body[data-theme="gold"] .panel .fibForm,
body[data-theme="gold"] .panel .positionForm,
body[data-theme="gold"] .panel .positionAdvice,
body[data-theme="gold"] .panel .trackedPlanPanel,
body[data-theme="gold"] .panel .researchPanel,
body[data-theme="gold"] .panel .researchStatus,
body[data-theme="gold"] .panel .orderFlowPanel,
body[data-theme="gold"] .panel .orderFlowItem,
body[data-theme="gold"] .panel .tradePlanPanel,
body[data-theme="gold"] .panel .tradePlanBox,
body[data-theme="gold"] .panel .tradeTier,
body[data-theme="gold"] .panel .tradeSignalItem,
body[data-theme="gold"] .panel .tradeReasoning,
body[data-theme="gold"] .panel .strictProfile,
body[data-theme="gold"] .panel .historyEdge {
  border-color: var(--line);
  background: var(--card-bg-strong);
  color: var(--text);
}

body[data-theme="gold"] .panel .researchStatus,
body[data-theme="gold"] .panel .orderFlowItem,
body[data-theme="gold"] .panel .trackedGrid div,
body[data-theme="gold"] .panel .strictMetrics span,
body[data-theme="gold"] .panel .tradePlanMeta span,
body[data-theme="gold"] .panel .tradeTierGrid div,
body[data-theme="gold"] .panel .orderGrid div,
body[data-theme="gold"] .panel .targets span,
body[data-theme="gold"] .layerTools label,
body[data-theme="gold"] .chartTools button,
body[data-theme="gold"] .metrics span,
body[data-theme="gold"] .segmented {
  border-color: rgba(250, 204, 91, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 221, 118, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(153, 105, 30, 0.96), rgba(86, 54, 13, 0.96));
  color: var(--text);
}

body[data-theme="gold"] .segmented button.active,
body[data-theme="gold"] .panel .trackPlanButton:not(:disabled),
body[data-theme="gold"] .panel .ghostButton,
body[data-theme="gold"] .panel .positionActions button {
  border-color: rgba(255, 225, 132, 0.64);
  background: linear-gradient(180deg, #ffd66b, #b67b18 62%, #6d4308);
  color: #201304;
  box-shadow: 0 10px 24px rgba(207, 151, 36, 0.28);
}

body[data-theme="gold"] canvas {
  background:
    linear-gradient(rgba(var(--chart-bg-rgb), var(--chart-bg-alpha)), rgba(var(--chart-bg-rgb), var(--chart-bg-alpha)));
}

body[data-theme="graphite"] .chartShell::before {
  opacity: 0.42;
}

body[data-theme="sky"] .chartShell::before {
  opacity: 0.68;
}

body[data-theme="rose"] .chartShell::before {
  opacity: 0.72;
}

body[data-theme="gold"] .chartShell::before {
  opacity: 0.9;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 214, 107, 0.24), transparent 42%),
    var(--chart-photo),
    var(--chart-bg);
  background-size: cover, auto min(72%, 520px), cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

body[data-theme="gold"] .panel,
body[data-theme="gold"] .chartShell {
  background:
    linear-gradient(135deg, rgba(250, 204, 91, 0.18), transparent 36%),
    linear-gradient(180deg, #6e4712, #261706);
}

body[data-theme="gold"] .panel .planCard,
body[data-theme="gold"] .panel .tradePlanBox,
body[data-theme="gold"] .panel .strictProfile,
body[data-theme="gold"] .panel .historyEdge,
body[data-theme="gold"] .panel .watchLevelGrid div {
  border-color: rgba(250, 204, 91, 0.5);
  background:
    linear-gradient(135deg, rgba(255, 222, 128, 0.18), transparent 44%),
    linear-gradient(180deg, #7a4f14 0%, #4a2d08 58%, #241404 100%);
  color: #fff4d4;
}

body[data-theme="gold"] .panel .planCard.wait,
body[data-theme="gold"] .panel .planCard.armed,
body[data-theme="gold"] .panel .planCard.executable {
  background:
    linear-gradient(135deg, rgba(255, 229, 151, 0.16), transparent 46%),
    linear-gradient(180deg, #6c4510 0%, #3d2507 62%, #1f1204 100%);
  box-shadow: inset 0 1px 0 rgba(255, 232, 168, 0.2), 0 10px 24px rgba(22, 11, 2, 0.28);
}

body[data-theme="gold"] .panel .planCard.wait::before {
  background: linear-gradient(180deg, #f6d878, #a66a13);
}

body[data-theme="gold"] .panel .planCard small,
body[data-theme="gold"] .panel .planCard p,
body[data-theme="gold"] .panel .planCard .reason {
  color: #e8ca7b;
}

body[data-theme="gold"] .panel .planCard p b,
body[data-theme="gold"] .panel .planCard strong,
body[data-theme="gold"] .panel .watchLevelGrid b {
  color: #fff2c2;
}

body[data-theme="gold"] .panel .watchLevelGrid span,
body[data-theme="gold"] .panel .watchLevelGrid em {
  color: #e8ca7b;
}

body[data-theme="gold"] .topbar > div:first-child::before {
  background: linear-gradient(180deg, #fff0a8, #d19a24 56%, #7d4c08);
}

body[data-theme="gold"] .symbolBox select,
body[data-theme="gold"] .languageBox select,
body[data-theme="gold"] .themeBox select,
body[data-theme="gold"] input,
body[data-theme="gold"] .panel select {
  border-color: rgba(250, 204, 91, 0.5);
  background: linear-gradient(180deg, #7d5618, #3b2508);
  color: var(--text);
}

body[data-theme="gold"] .badge,
body[data-theme="gold"] .score,
body[data-theme="gold"] .strategyTag,
body[data-theme="gold"] .targets span,
body[data-theme="gold"] .decisionStrip {
  border-color: rgba(250, 204, 91, 0.44);
  background: linear-gradient(180deg, rgba(255, 220, 112, 0.26), rgba(128, 82, 18, 0.82));
  color: #fff2c2;
}

body[data-theme="gold"] h1,
body[data-theme="gold"] h2,
body[data-theme="gold"] strong,
body[data-theme="gold"] b {
  color: #fff4d4;
}

body[data-theme="gold"] {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 214, 107, 0.28), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(183, 123, 24, 0.24), transparent 32%),
    linear-gradient(180deg, #100906 0%, #2a1a07 48%, #4b2f08 100%);
}

/* Responsive hardening: make the trading terminal usable on desktop, tablet, and phones. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.app,
.topbar,
.controls,
.layout,
.chartShell,
.panel,
.planCard,
.tradePlanBox,
.tradeTier,
.tradeSignalItem,
.strictProfile,
.historyEdge,
.positionForm,
.fibForm,
.trackedPlanPanel,
.researchPanel,
.orderFlowPanel,
.tradePlanPanel {
  min-width: 0;
}

h1,
h2,
.subtitle,
.panelHeader,
.reason,
.tradeReasoning,
.tierBasisList,
.strategyTag,
.planCard p,
.planCard small,
.trackedGrid div,
.strictMetrics span,
.tradePlanMeta span,
.tradeTierGrid div,
.orderGrid div,
.targets span,
.decisionStrip,
.levelItem,
.positionAdvice,
.researchStatus,
.orderFlowItem {
  overflow-wrap: anywhere;
}

select,
input,
button {
  max-width: 100%;
}

.topbar {
  min-width: 0;
}

.priceBox strong {
  word-break: break-word;
}

@media (max-width: 1280px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(138px, 0.48fr)) minmax(220px, 0.75fr);
    align-items: stretch;
  }

  .topbar > div:first-child,
  .symbolBox,
  .languageBox,
  .themeBox,
  .priceBox {
    min-width: 0;
  }

  .priceBox {
    min-width: 0;
  }
}

@media (max-width: 1060px) {
  .app {
    width: min(100% - 14px, 1600px);
  }

  .topbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topbar > div:first-child {
    display: grid;
    grid-column: 1 / -1;
    min-height: auto;
  }

  .priceBox {
    grid-column: 1 / -1;
    text-align: left;
  }

  html[dir="rtl"] .priceBox {
    text-align: right;
  }

  .controls {
    align-items: stretch;
  }

  .segmented {
    grid-template-columns: repeat(6, minmax(42px, 1fr));
  }

  .metrics {
    justify-content: flex-start;
  }

  .chartShell::before {
    height: clamp(420px, 58vh, 660px);
  }

  canvas {
    height: clamp(420px, 58vh, 660px);
    min-height: 0;
  }
}

@media (max-width: 780px) {
  body {
    font-size: 13px;
  }

  .app {
    width: min(100% - 12px, 1600px);
    padding: 6px 0 14px;
  }

  .topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .topbar > div:first-child,
  .priceBox {
    grid-column: 1 / -1;
  }

  .topbar > div:first-child {
    padding: 10px 12px;
  }

  h1 {
    font-size: clamp(21px, 6vw, 27px);
    line-height: 1.12;
  }

  .subtitle {
    font-size: 12px;
  }

  .symbolBox,
  .languageBox,
  .themeBox,
  .priceBox {
    padding: 7px;
  }

  .symbolBox label,
  .languageBox label,
  .themeBox label {
    font-size: 12px;
    line-height: 1.2;
  }

  .symbolBox select,
  .languageBox select,
  .themeBox select {
    height: 36px;
    padding-inline: 8px 28px;
    font-size: 13px;
  }

  .priceBox strong {
    font-size: clamp(24px, 8vw, 34px);
  }

  .controls {
    gap: 7px;
  }

  .segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .segmented button {
    height: 32px;
    font-size: 12px;
  }

  .metrics span {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    min-width: 0;
    text-align: center;
  }

  .chartTools,
  .layerTools {
    flex-wrap: wrap;
  }

  .chartTools {
    justify-content: flex-start;
  }

  .chartTools button,
  .layerTools label {
    flex: 1 1 auto;
    min-width: min(142px, 100%);
  }

  .chartShell {
    padding: 6px;
  }

  .chartShell::before {
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: clamp(360px, 62vh, 620px);
  }

  canvas {
    height: clamp(360px, 62vh, 620px);
  }

  .panel {
    padding: 9px;
  }

  .panelHeader {
    align-items: flex-start;
    gap: 8px;
  }

  .tradeTierGrid,
  .trackedGrid,
  .strictMetrics,
  .watchLevelGrid,
  .orderGrid,
  .tradePlanMeta,
  .tradeSignalGrid {
    grid-template-columns: 1fr;
  }

  .globalBacktestRow,
  .rollingFlow,
  .rollingCandidate,
  .rollingReview,
  .rollingFlowModel {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .globalBacktestRow small {
    grid-column: auto;
  }

  .tradePlanHead,
  .tradeTierTop,
  .trackedTop,
  .researchTop,
  .globalBacktestHead,
  .rollingOosHead,
  .strictProfileTop {
    align-items: flex-start;
    flex-direction: column;
  }

  .tradePlanHead span,
  .tradeTierTop span,
  .rollingOosHead span {
    text-align: left;
  }

  html[dir="rtl"] .tradePlanHead span,
  html[dir="rtl"] .tradeTierTop span,
  html[dir="rtl"] .rollingOosHead span {
    text-align: right;
  }

  .targets {
    display: grid;
    grid-template-columns: 1fr;
  }

  .targets > div {
    grid-template-columns: 1fr;
  }

  .tradeSignalItem span,
  .tradeSignalItem em,
  .tradeTierGrid span,
  .tradeTierGrid b {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .levelItem {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .levelItem span,
  html[dir="rtl"] .levelItem span {
    text-align: left;
  }

  html[dir="rtl"] .levelItem span {
    text-align: right;
  }
}

@media (max-width: 480px) {
  .app {
    width: calc(100% - (var(--safe-page-x, 8px) * 2));
    padding-top: 4px;
  }

  .topbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .topbar > div:first-child,
  .priceBox {
    grid-column: 1 / -1;
  }

  .symbolBox {
    grid-column: 1 / 2;
  }

  .languageBox {
    grid-column: 2 / 3;
  }

  .themeBox {
    grid-column: 1 / -1;
  }

  .topbar > div:first-child {
    min-height: 72px;
  }

  .eyebrow {
    font-size: 10px;
  }

  h1 {
    font-size: 24px;
  }

  .subtitle {
    margin-top: 4px;
    font-size: 11.5px;
  }

  .symbolBox label,
  .languageBox label,
  .themeBox label {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .symbolBox select,
  .languageBox select,
  .themeBox select {
    height: var(--mobile-control-h, 34px);
    font-size: 12.5px;
  }

  .priceBox {
    text-align: left;
    min-height: 54px;
  }

  .priceBox strong {
    font-size: 22px;
  }

  .controls,
  .layout {
    gap: 6px;
  }

  .segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .segmented button {
    height: 30px;
    min-width: 0;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .metrics span {
    flex-basis: 100%;
  }

  .chartTools button,
  .layerTools label {
    min-width: 0;
  }

  .chartTools {
    display: grid;
    grid-template-columns: 1fr;
  }

  .layerTools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layerTools label,
  .chartTools button {
    width: 100%;
    height: 28px;
    padding-inline: 6px;
    font-size: 10.8px;
  }

  .chartShell::before {
    height: clamp(300px, 58vh, 540px);
  }

  canvas {
    height: clamp(300px, 58vh, 540px);
  }

  .panelHeader {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fibRow,
  .positionRow,
  .positionActions,
  .tradePlanActions {
    grid-template-columns: 1fr;
  }

  .positionActions button,
  .trackPlanButton,
  .ghostButton {
    width: 100%;
  }
}