:root {
  color-scheme: dark;
  --bg: #07111f;
  --surface: #101b2d;
  --surface-soft: #15233a;
  --wash-blue: #102947;
  --wash-green: #0f2c26;
  --wash-amber: #34280e;
  --wash-rose: #35151b;
  --text: #ecf4ff;
  --muted: #9fb0c7;
  --border: #29405e;
  --excellent: #35d08c;
  --excellent-soft: rgba(29, 120, 86, 0.25);
  --good: #6aa4ff;
  --good-soft: rgba(58, 113, 192, 0.24);
  --steady: #7ec7ff;
  --steady-soft: rgba(70, 151, 211, 0.22);
  --medium: #f0b84f;
  --medium-soft: rgba(158, 113, 30, 0.23);
  --bad: #ff6b73;
  --bad-soft: rgba(185, 65, 75, 0.22);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 14% 8%, rgba(53, 208, 140, 0.16), transparent 30%),
    radial-gradient(circle at 86% 2%, rgba(106, 164, 255, 0.18), transparent 34%),
    radial-gradient(circle at 78% 74%, rgba(240, 184, 79, 0.11), transparent 32%),
    linear-gradient(180deg, #07111f 0%, #0b1627 42%, #09131f 100%);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="search"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

button {
  padding: 10px 14px;
  cursor: pointer;
}

button:hover,
select:hover,
input:hover {
  border-color: color-mix(in srgb, var(--good) 45%, var(--border));
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary-button {
  background: var(--good);
  border-color: var(--good);
  color: #ffffff;
}

.app-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 22px;
}

.hero,
.summary-strip,
.dashboard-layout,
.toolbar,
.filters,
.score-filter,
.inspector-head,
.order-box,
.alert-panel,
.approval-panel {
  display: flex;
  gap: 14px;
}

.broker-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 0.8fr) minmax(420px, 1.5fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(80, 132, 184, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(233, 246, 255, 0.92), rgba(245, 253, 247, 0.88) 48%, rgba(255, 249, 236, 0.86)),
    var(--surface-soft);
  box-shadow: 0 14px 34px rgba(73, 102, 132, 0.09);
}

.mofid-copy h2 {
  margin-bottom: 6px;
}

.mofid-copy p {
  max-width: 420px;
}

.broker-warning {
  display: block;
  margin-top: 6px;
  color: var(--bad);
  line-height: 1.9;
}

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

.broker-form button {
  min-height: 44px;
  padding: 10px 12px;
}

.sync-form small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

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

.easytrader-sync button {
  min-height: 40px;
  color: var(--steady);
  background: rgba(237, 246, 255, 0.86);
  border-color: color-mix(in srgb, var(--steady) 28%, var(--border));
}

.easytrader-sync button:last-child {
  color: var(--excellent);
  background: rgba(236, 253, 245, 0.82);
  border-color: color-mix(in srgb, var(--excellent) 25%, var(--border));
}

.mofid-profile {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 8px;
}

.mofid-profile div {
  display: grid;
  gap: 3px;
  min-height: 50px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
}

.mofid-profile .decision-flow {
  grid-column: span 2;
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(236, 253, 245, 0.78);
}

body .mofid-profile .decision-flow {
  grid-column: span 2;
  min-height: 58px;
  align-content: center;
  border-color: rgba(53, 208, 140, 0.34);
  background:
    radial-gradient(circle at 12% 16%, rgba(53, 208, 140, 0.20), transparent 42%),
    linear-gradient(145deg, rgba(15, 66, 52, 0.78), rgba(9, 20, 34, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

body .mofid-profile .decision-flow span {
  color: #8fe6bd;
  font-size: 10px;
  font-weight: 700;
}

body .mofid-profile .decision-flow strong {
  color: #f6fffb;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
  white-space: normal;
}

.mofid-profile span {
  color: var(--muted);
  font-size: 11px;
}

.mofid-profile strong {
  font-size: 13px;
  font-weight: 500;
}

.broker-form input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.view-tabs button {
  background: var(--surface-soft);
}

.view-tabs .is-active {
  color: #fff;
  background: var(--good);
  border-color: var(--good);
}

.hero {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hero-copy {
  display: grid;
  gap: 6px;
}

.eyebrow,
.kind-pill {
  width: max-content;
  color: var(--excellent);
  background: var(--excellent-soft);
  border: 1px solid color-mix(in srgb, var(--excellent) 25%, var(--border));
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 27px;
  font-weight: 500;
}

h2 {
  font-size: 18px;
  font-weight: 500;
}

h3 {
  font-size: 15px;
  font-weight: 500;
}

p,
small,
.toolbar p,
.hero-copy p,
.approval-panel p {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  margin-bottom: 14px;
}

.summary-card,
.market-pulse,
.board,
.inspector,
.alert-panel,
.approval-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.summary-card {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--steady) 16%, var(--border));
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.80), var(--wash-blue));
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.07);
}

.summary-card span {
  color: var(--muted);
}

.summary-card strong {
  font-size: 26px;
  font-weight: 500;
}

.summary-card.decision {
  border-color: color-mix(in srgb, var(--excellent) 28%, var(--border));
  background: linear-gradient(135deg, var(--wash-green), rgba(255, 255, 255, 0.88));
}

.summary-card:nth-child(2) {
  border-color: color-mix(in srgb, var(--steady) 26%, var(--border));
  background: linear-gradient(135deg, var(--wash-blue), rgba(255, 255, 255, 0.88));
}

.summary-card:nth-child(3) {
  border-color: color-mix(in srgb, var(--medium) 24%, var(--border));
  background: linear-gradient(135deg, var(--wash-amber), rgba(255, 255, 255, 0.88));
}

.summary-card:nth-child(4) {
  border-color: color-mix(in srgb, var(--bad) 18%, var(--border));
  background: linear-gradient(135deg, var(--wash-rose), rgba(255, 255, 255, 0.90));
}

.market-pulse {
  padding: 14px;
  margin-bottom: 14px;
  border-color: color-mix(in srgb, var(--good) 18%, var(--border));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94)),
    var(--surface);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(132px, 1fr));
  gap: 8px;
}

.crypto-grid {
  margin-top: 8px;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
}

.pulse-card {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(21, 32, 43, 0.05);
}

.pulse-card.up {
  border-color: color-mix(in srgb, var(--excellent) 34%, var(--border));
  background: linear-gradient(180deg, #effaf4, #ffffff);
}

.pulse-card.down {
  border-color: color-mix(in srgb, var(--bad) 34%, var(--border));
  background: linear-gradient(180deg, #fff2ef, #ffffff);
}

.pulse-card.flat {
  border-color: color-mix(in srgb, var(--medium) 34%, var(--border));
  background: linear-gradient(180deg, #fff9e8, #ffffff);
}

.pulse-card.steady-up {
  border-color: color-mix(in srgb, var(--steady) 32%, var(--border));
  background: linear-gradient(180deg, #eef7ff, #ffffff);
}

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

.pulse-card strong {
  direction: ltr;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
}

.pulse-card span,
.pulse-card small {
  color: var(--muted);
}

.pulse-change {
  width: max-content;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
}

.pulse-change.up,
.pulse-forecast.up {
  color: var(--excellent);
  background: var(--excellent-soft);
}

.pulse-change.down,
.pulse-forecast.down {
  color: var(--bad);
  background: var(--bad-soft);
}

.pulse-change.flat,
.pulse-forecast.flat {
  color: var(--medium);
  background: var(--medium-soft);
}

.pulse-change.steady-up,
.pulse-forecast.steady-up {
  color: var(--steady);
  background: var(--steady-soft);
}

.pulse-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}

.pulse-mini span {
  display: grid;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pulse-mini b,
.pulse-forecast b {
  margin-left: 5px;
  color: var(--muted);
  font-weight: 500;
}

.pulse-forecast {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pulse-change.flat {
  color: var(--muted);
  background: #edf1ef;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 420px;
  align-items: start;
}

.board,
.inspector {
  padding: 16px;
}

.toolbar {
  align-items: center;
  justify-content: space-between;
}

.filters {
  align-items: center;
  flex-wrap: wrap;
}

select,
input[type="search"] {
  min-height: 42px;
  padding: 9px 11px;
}

.score-filter {
  align-items: center;
  margin: 14px 0;
  color: var(--muted);
}

.watchlist-note {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--medium) 24%, var(--border));
  background: var(--medium-soft);
}

.watchlist-note strong {
  font-weight: 500;
}

.watchlist-note span {
  color: var(--muted);
}

.add-symbol-form {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.portfolio-import-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.portfolio-import-form label,
.portfolio-import-form small {
  color: var(--muted);
}

.portfolio-import-form textarea {
  resize: vertical;
  min-height: 92px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
}

.portfolio-import-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.add-symbol-form label {
  color: var(--muted);
  font-size: 12px;
}

.add-symbol-form div {
  display: flex;
  gap: 8px;
}

.add-symbol-form input {
  flex: 1;
  min-width: 110px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.add-symbol-form small {
  color: var(--muted);
}

.score-filter input {
  flex: 1;
}

.score-filter strong {
  min-width: 44px;
  direction: ltr;
  color: var(--text);
}

.signal-list {
  display: grid;
  gap: 10px;
}

.signal-card {
  width: 100%;
  display: grid;
  grid-template-columns: 66px 104px minmax(190px, 1fr) minmax(150px, 0.65fr) 118px 116px 126px;
  align-items: center;
  gap: 12px;
  text-align: right;
  min-height: 96px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.rank-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  justify-self: start;
  min-width: 58px;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  text-align: right;
}

.rank-chip strong {
  direction: ltr;
  font-size: 13px;
  font-weight: 600;
}

.rank-chip span {
  direction: ltr;
  font-size: 11px;
  font-weight: 500;
}

.rank-chip.up {
  color: var(--excellent);
  border-color: color-mix(in srgb, var(--excellent) 28%, var(--border));
  background: var(--excellent-soft);
}

.rank-chip.down {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 28%, var(--border));
  background: var(--bad-soft);
}

.rank-chip.same {
  color: var(--steady);
  border-color: color-mix(in srgb, var(--steady) 24%, var(--border));
  background: var(--steady-soft);
}

.rank-chip.new {
  color: var(--medium);
  border-color: color-mix(in srgb, var(--medium) 24%, var(--border));
  background: var(--medium-soft);
}

.signal-card[aria-pressed="true"] {
  border-color: var(--good);
  background: linear-gradient(90deg, var(--good-soft), var(--surface));
}

.symbol-block {
  display: grid;
  gap: 3px;
}

.symbol {
  font-size: 22px;
  font-weight: 500;
}

.subtext {
  color: var(--muted);
  font-size: 12px;
}

.main-reason {
  display: grid;
  gap: 6px;
}

.main-reason strong {
  font-weight: 500;
}

.rank-reason {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.catalyst-box {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.catalyst-box span {
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}

.catalyst-box strong {
  font-size: 11px;
  font-weight: 500;
}

.catalyst-box small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.catalyst-box.green {
  color: var(--excellent);
  border-color: color-mix(in srgb, var(--excellent) 28%, var(--border));
  background: var(--excellent-soft);
}

.catalyst-box.blue {
  color: var(--steady);
  border-color: color-mix(in srgb, var(--steady) 28%, var(--border));
  background: var(--steady-soft);
}

.catalyst-box.yellow {
  color: var(--medium);
  border-color: color-mix(in srgb, var(--medium) 28%, var(--border));
  background: var(--medium-soft);
}

.catalyst-box.red {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 28%, var(--border));
  background: var(--bad-soft);
}

.status-pill {
  display: inline-flex;
  justify-content: center;
  width: max-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
}

.BUY_WATCH {
  color: var(--excellent);
  background: var(--excellent-soft);
  border-color: color-mix(in srgb, var(--excellent) 30%, var(--border));
}

.WATCH {
  color: var(--good);
  background: var(--good-soft);
  border-color: color-mix(in srgb, var(--good) 30%, var(--border));
}

.EXIT_WATCH {
  color: var(--medium);
  background: var(--medium-soft);
  border-color: color-mix(in srgb, var(--medium) 30%, var(--border));
}

.PLANNED_EXIT {
  color: var(--good);
  background: var(--good-soft);
  border-color: color-mix(in srgb, var(--good) 30%, var(--border));
}

.TRIM_WATCH {
  color: var(--medium);
  background: var(--medium-soft);
  border-color: color-mix(in srgb, var(--medium) 30%, var(--border));
}

.SELL_WATCH {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 30%, var(--border));
}

.HOLD {
  color: var(--good);
  background: var(--good-soft);
  border-color: color-mix(in srgb, var(--good) 30%, var(--border));
}

.AVOID {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 30%, var(--border));
}

.score-stack {
  display: grid;
  gap: 6px;
  direction: ltr;
  text-align: left;
}

.analysis-mini {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--steady) 22%, var(--border));
  border-radius: 8px;
  background: linear-gradient(135deg, var(--steady-soft), rgba(255, 255, 255, 0.72));
  color: var(--muted);
  font-size: 11px;
}

body .analysis-mini {
  min-width: 116px;
  padding: 8px 9px;
  border-color: rgba(126, 199, 255, 0.36);
  background:
    radial-gradient(circle at 12% 10%, rgba(126, 199, 255, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(20, 39, 62, 0.96), rgba(9, 19, 32, 0.96));
  color: #d7e4f4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.analysis-mini span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

body .analysis-mini span {
  align-items: center;
  color: #b8c8dc;
  font-size: 11px;
  line-height: 1.45;
}

.analysis-mini b {
  color: var(--text);
  font-weight: 600;
}

body .analysis-mini b {
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.score-value {
  font-size: 20px;
  font-weight: 500;
}

.meter {
  height: 8px;
  border-radius: 999px;
  background: #edf1ef;
  overflow: hidden;
}

.meter span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--meter-color, var(--good));
}

.quality-chip {
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  border: 1px solid transparent;
}

.quality-excellent {
  color: var(--excellent);
  background: var(--excellent-soft);
  border-color: color-mix(in srgb, var(--excellent) 25%, var(--border));
}

.quality-good {
  color: var(--good);
  background: var(--good-soft);
  border-color: color-mix(in srgb, var(--good) 25%, var(--border));
}

.quality-medium {
  color: var(--medium);
  background: var(--medium-soft);
  border-color: color-mix(in srgb, var(--medium) 25%, var(--border));
}

.quality-bad {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 25%, var(--border));
}

.quality-neutral {
  color: var(--muted);
  background: var(--surface-soft);
  border-color: var(--border);
}

.numbers {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  direction: ltr;
  text-align: left;
}

.inspector {
  position: sticky;
  top: 14px;
}

.empty-state {
  padding: 44px 10px;
  text-align: center;
  color: var(--muted);
}

.inspector-head {
  align-items: flex-start;
  justify-content: space-between;
}

.inspector-head h2 {
  margin-top: 8px;
  font-size: 30px;
}

.decision-box {
  margin: 16px 0;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.decision-box strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.score-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.score-guide span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.dot.excellent { background: var(--excellent); }
.dot.good { background: var(--good); }
.dot.medium { background: var(--medium); }
.dot.bad { background: var(--bad); }

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.analysis-panel {
  display: grid;
  gap: 9px;
  margin: 14px 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--steady) 22%, var(--border));
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(239, 247, 255, 0.68), rgba(255, 255, 255, 0.90));
}

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

.analysis-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.analysis-head span {
  color: var(--muted);
  font-size: 12px;
}

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

.analysis-card {
  display: grid;
  gap: 5px;
  min-height: 74px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.analysis-card > span,
.analysis-card small {
  color: var(--muted);
  font-size: 11px;
}

.analysis-card strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
}

.analysis-card.quality-excellent { background: var(--excellent-soft); }
.analysis-card.quality-good { background: var(--good-soft); }
.analysis-card.quality-medium { background: var(--medium-soft); }
.analysis-card.quality-bad { background: var(--bad-soft); }

.ai-panel {
  border-color: color-mix(in srgb, var(--good) 24%, var(--border));
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.72), rgba(239, 247, 255, 0.62));
}

.memory-panel {
  border-color: color-mix(in srgb, var(--steady) 24%, var(--border));
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.70), rgba(239, 247, 255, 0.62));
}

.strategy-panel {
  border-color: color-mix(in srgb, var(--excellent) 24%, var(--border));
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.68), rgba(239, 247, 255, 0.54));
}

.ai-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface-soft);
  font-size: 11px;
}

.ai-badge.used {
  border-color: color-mix(in srgb, var(--excellent) 34%, var(--border));
  background: var(--excellent-soft);
  color: var(--excellent);
}

.ai-badge.standby {
  border-color: color-mix(in srgb, var(--steady) 34%, var(--border));
  background: var(--steady-soft);
  color: var(--steady);
}

.ai-badge.failed {
  border-color: color-mix(in srgb, var(--bad) 34%, var(--border));
  background: var(--bad-soft);
  color: var(--bad);
}

.ai-badge.off {
  border-color: color-mix(in srgb, var(--medium) 34%, var(--border));
  background: var(--medium-soft);
  color: var(--medium);
}

.strategy-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface-soft);
  font-size: 11px;
}

.strategy-badge.excellent {
  border-color: color-mix(in srgb, var(--excellent) 38%, var(--border));
  background: var(--excellent-soft);
  color: var(--excellent);
}

.strategy-badge.good {
  border-color: color-mix(in srgb, var(--good) 38%, var(--border));
  background: var(--good-soft);
  color: var(--good);
}

.strategy-badge.medium {
  border-color: color-mix(in srgb, var(--medium) 38%, var(--border));
  background: var(--medium-soft);
  color: var(--medium);
}

.strategy-badge.bad {
  border-color: color-mix(in srgb, var(--bad) 38%, var(--border));
  background: var(--bad-soft);
  color: var(--bad);
}

.ai-decision-box,
.memory-box,
.strategy-box {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.ai-decision-box p,
.memory-box p,
.strategy-box p {
  margin: 0;
}

.ai-kpis,
.memory-kpis,
.strategy-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.memory-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-kpis span,
.memory-kpis span,
.strategy-kpis span,
.memory-record {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.72);
}

.ai-kpis b,
.memory-kpis b,
.strategy-kpis b {
  color: var(--text);
  font-weight: 700;
}

.strategy-kpis small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.strategy-flow {
  display: grid;
  gap: 6px;
}

.strategy-flow p {
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--excellent) 16%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--excellent-soft) 64%, var(--surface));
}

.strategy-flow strong {
  display: inline-block;
  min-width: 70px;
  color: var(--text);
}

.strategy-empty {
  color: var(--muted);
}

.ai-kpis .positive { color: var(--excellent); }
.ai-kpis .negative { color: var(--bad); }

.ai-list {
  display: grid;
  gap: 4px;
}

.ai-list strong {
  color: var(--text);
  font-weight: 600;
}

.ai-list ul {
  margin: 0;
  padding-inline-start: 18px;
}

.ai-list.risk {
  color: var(--bad);
}

.memory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memory-alerts {
  display: grid;
  gap: 6px;
}

.memory-alert {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(10, 20, 34, 0.68);
}

.memory-alert b {
  color: var(--text);
  font-size: 12px;
}

.memory-alert small {
  color: var(--muted);
}

.memory-alert.bad {
  border-color: color-mix(in srgb, var(--bad) 42%, var(--border));
  background: linear-gradient(145deg, rgba(185, 65, 75, 0.26), rgba(12, 21, 34, 0.88));
}

.memory-alert.medium {
  border-color: color-mix(in srgb, var(--medium) 42%, var(--border));
  background: linear-gradient(145deg, rgba(158, 113, 30, 0.24), rgba(12, 21, 34, 0.88));
}

.memory-alert.good {
  border-color: color-mix(in srgb, var(--excellent) 42%, var(--border));
  background: linear-gradient(145deg, rgba(29, 120, 86, 0.24), rgba(12, 21, 34, 0.88));
}

.memory-record {
  display: grid;
  min-width: 145px;
  color: var(--muted);
}

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

.memory-record em {
  display: inline-flex;
  margin-inline-start: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--good) 34%, var(--border));
  color: var(--good);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
}

.memory-record.open {
  border-color: color-mix(in srgb, var(--good) 26%, var(--border));
  background: color-mix(in srgb, var(--good-soft) 36%, var(--surface));
}

.memory-record.win {
  border-color: color-mix(in srgb, var(--excellent) 34%, var(--border));
  background: var(--excellent-soft);
}

.memory-record.loss {
  border-color: color-mix(in srgb, var(--bad) 34%, var(--border));
  background: var(--bad-soft);
}

.memory-record.weak {
  border-color: color-mix(in srgb, var(--medium) 34%, var(--border));
  background: var(--medium-soft);
}

.memory-record.invalid {
  border-color: color-mix(in srgb, var(--info) 34%, var(--border));
  background: color-mix(in srgb, var(--info-soft) 68%, var(--surface));
}

.memory-empty {
  color: var(--muted);
}

.fact-card {
  display: grid;
  gap: 7px;
  min-height: 90px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.fact-card.quality-excellent { background: var(--excellent-soft); }
.fact-card.quality-good { background: var(--good-soft); }
.fact-card.quality-medium { background: var(--medium-soft); }
.fact-card.quality-bad { background: var(--bad-soft); }
.fact-card.quality-neutral { background: var(--surface-soft); }

.fact-label {
  color: var(--muted);
  font-size: 12px;
}

.fact-value {
  direction: ltr;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
}

.fact-help {
  color: var(--muted);
  font-size: 11px;
}

.horizon-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
}

.horizon-box div {
  display: grid;
  gap: 5px;
  padding: 11px;
  border-radius: 8px;
  background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--good) 25%, var(--border));
}

.horizon-box span {
  color: var(--muted);
  font-size: 12px;
}

.horizon-box strong {
  font-weight: 500;
}

.reason-block {
  margin-top: 14px;
  font-size: 13px;
}

.reason-block h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.reason-block ul {
  display: grid;
  gap: 6px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.reason-block li {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--excellent-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.7;
  border: 1px solid color-mix(in srgb, var(--excellent) 14%, transparent);
}

.reason-block.risk li {
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 14%, transparent);
}

.order-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.order-preview div {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--steady) 22%, var(--border));
  border-radius: 8px;
  background: var(--steady-soft);
}

.order-preview span {
  color: var(--muted);
  font-size: 11px;
}

.order-preview strong {
  font-size: 14px;
  font-weight: 600;
}

.order-preview small {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--medium) 20%, var(--border));
  border-radius: 8px;
  background: var(--medium-soft);
  color: var(--text);
  line-height: 1.8;
}

.order-box {
  margin-top: 18px;
  flex-wrap: wrap;
}

.approval-panel {
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 15px;
}

.alert-panel {
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--steady) 26%, var(--border));
  background: linear-gradient(90deg, var(--steady-soft), var(--surface));
}

.alert-panel h2,
.approval-panel h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.alert-panel p,
.approval-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.alert-list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
}

.alert-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: right;
}

.alert-chip strong {
  grid-row: span 2;
  align-self: center;
  font-size: 15px;
  font-weight: 600;
}

.alert-chip span {
  font-size: 12px;
  font-weight: 600;
}

.alert-chip small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-chip.good {
  border-color: color-mix(in srgb, var(--excellent) 28%, var(--border));
  background: var(--excellent-soft);
}

.alert-chip.medium {
  border-color: color-mix(in srgb, var(--medium) 28%, var(--border));
  background: var(--medium-soft);
}

.alert-chip.bad {
  border-color: color-mix(in srgb, var(--bad) 28%, var(--border));
  background: var(--bad-soft);
}

.approved-list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
}

.approved-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 11px;
  background: var(--surface);
  color: var(--text);
}

@media (max-width: 1120px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .inspector {
    position: static;
  }

  .summary-strip {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .pulse-grid {
    grid-template-columns: repeat(4, minmax(132px, 1fr));
  }

  .crypto-grid {
    grid-template-columns: repeat(3, minmax(132px, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 12px;
  }

  .hero,
  .toolbar,
  .broker-panel,
  .alert-panel,
  .approval-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .broker-panel,
  .broker-form {
    grid-template-columns: 1fr;
  }

  .summary-strip {
    grid-template-columns: 1fr;
  }

  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pulse-grid {
    grid-template-columns: 1fr;
  }

  .signal-card {
    grid-template-columns: 1fr;
  }

  .filters {
    display: grid;
  }

  .add-symbol-form div {
    flex-direction: column;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .order-preview {
    grid-template-columns: 1fr 1fr;
  }

  .strategy-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 70%);
}

.broker-panel,
.summary-card,
.pulse-section,
.inspector,
.board,
.toolbar,
.alert-panel,
.approval-panel,
.order-preview,
.reason-block,
.horizon-box,
.analysis-panel,
.mofid-profile div,
.signal-card,
.detail-empty {
  background: linear-gradient(145deg, rgba(16, 27, 45, 0.92), rgba(13, 24, 40, 0.84));
  border-color: rgba(126, 199, 255, 0.20);
  box-shadow: var(--shadow);
}

.broker-panel,
.pulse-section,
.board,
.inspector {
  backdrop-filter: blur(14px);
}

.hero h1,
.section-head h2,
.board-title h2,
.inspector h2,
.mofid-copy h2 {
  color: var(--text);
}

.subtext,
.mofid-copy p,
.broker-form small,
.sync-form small,
.section-head p,
.board-title span,
.detail-empty,
.fact-help {
  color: var(--muted);
}

button,
select,
input,
textarea {
  background: rgba(13, 24, 40, 0.92);
  border-color: rgba(126, 199, 255, 0.24);
  color: var(--text);
}

button:hover,
select:hover,
input:hover,
textarea:hover {
  border-color: rgba(126, 199, 255, 0.58);
}

.primary-button,
.view-button.is-active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: rgba(126, 199, 255, 0.54);
  color: #ffffff;
}

.easytrader-sync button,
.easytrader-sync button:last-child {
  background: rgba(16, 37, 60, 0.86);
}

.pulse-card,
.fact-card,
.analysis-card,
.ai-kpis span,
.memory-kpis span,
.strategy-kpis span,
.memory-record,
.approved-chip,
.rank-chip,
.status-pill,
.quality-chip {
  background-color: rgba(10, 20, 34, 0.68);
}

.pulse-card.forecast-up,
.signal-card[aria-pressed="true"],
.quality-excellent,
.fact-card.quality-excellent,
.analysis-card.quality-excellent,
.alert-chip.good,
.memory-record.win {
  background: linear-gradient(145deg, rgba(29, 120, 86, 0.30), rgba(15, 34, 48, 0.86));
  border-color: rgba(53, 208, 140, 0.38);
}

.pulse-card.forecast-down,
.quality-bad,
.fact-card.quality-bad,
.analysis-card.quality-bad,
.alert-chip.bad,
.memory-record.loss {
  background: linear-gradient(145deg, rgba(185, 65, 75, 0.28), rgba(22, 25, 38, 0.88));
  border-color: rgba(255, 107, 115, 0.34);
}

.pulse-card.forecast-flat,
.quality-medium,
.fact-card.quality-medium,
.analysis-card.quality-medium,
.alert-chip.medium,
.memory-record.weak {
  background: linear-gradient(145deg, rgba(158, 113, 30, 0.24), rgba(22, 25, 38, 0.88));
  border-color: rgba(240, 184, 79, 0.34);
}

.quality-good,
.fact-card.quality-good,
.analysis-card.quality-good,
.fact-card.quality-neutral,
.analysis-card.quality-neutral {
  background: linear-gradient(145deg, rgba(58, 113, 192, 0.24), rgba(15, 28, 48, 0.86));
  border-color: rgba(106, 164, 255, 0.32);
}

.analysis-panel.ai-panel,
.analysis-panel.memory-panel,
.analysis-panel.strategy-panel {
  background: linear-gradient(145deg, rgba(14, 38, 47, 0.78), rgba(13, 24, 40, 0.86));
}

.reason-block li,
.reason-block.risk li,
.catalyst-box,
.strategy-flow p,
.order-box div,
.horizon-box div,
.score-guide,
.watchlist-note {
  background: rgba(9, 18, 31, 0.72);
  border-color: rgba(126, 199, 255, 0.18);
  color: var(--text);
}

.reason-block.risk li {
  color: #ffc4c8;
}

.meter {
  background: rgba(255, 255, 255, 0.08);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #07111f;
}

::-webkit-scrollbar-thumb {
  border: 3px solid #07111f;
  border-radius: 999px;
  background: #29405e;
}

body .summary-card,
body .summary-card.decision,
body .summary-card:nth-child(2),
body .summary-card:nth-child(3),
body .summary-card:nth-child(4) {
  position: relative;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 12%, rgba(126, 199, 255, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(17, 31, 52, 0.96), rgba(10, 20, 34, 0.94)) !important;
  border-color: rgba(126, 199, 255, 0.28);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body .summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--steady);
  opacity: 0.9;
}

body .summary-card.decision::before {
  background: var(--excellent);
}

body .summary-card:nth-child(2)::before {
  background: var(--good);
}

body .summary-card:nth-child(3)::before {
  background: var(--medium);
}

body .summary-card:nth-child(4)::before {
  background: var(--bad);
}

body .summary-card span,
body .summary-card small {
  color: #b8c9df;
}

body .summary-card strong {
  color: #ffffff;
}

body .pulse-section,
body .market-pulse {
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(53, 208, 140, 0.13), transparent 35%),
    linear-gradient(145deg, rgba(16, 27, 45, 0.94), rgba(11, 22, 39, 0.91)) !important;
  border-color: rgba(126, 199, 255, 0.26);
}

body .pulse-section h2,
body .market-pulse h2,
body .pulse-section p,
body .market-pulse p {
  color: var(--text);
}

/* Dark pulse cards: keep market and crypto cards aligned with the app theme. */
body .pulse-grid {
  gap: 10px;
}

body .pulse-card {
  position: relative;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(126, 199, 255, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(15, 29, 49, 0.96), rgba(8, 18, 32, 0.94)) !important;
  border-color: rgba(126, 199, 255, 0.25);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

body .pulse-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  opacity: 0.9;
  background: rgba(126, 199, 255, 0.72);
}

body .pulse-card.up {
  background:
    radial-gradient(circle at 14% 10%, rgba(53, 208, 140, 0.20), transparent 42%),
    linear-gradient(145deg, rgba(16, 58, 47, 0.88), rgba(8, 20, 32, 0.95)) !important;
  border-color: rgba(53, 208, 140, 0.34);
}
body .pulse-card.up::before { background: var(--excellent); }

body .pulse-card.down {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 107, 115, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(67, 29, 38, 0.88), rgba(11, 18, 31, 0.95)) !important;
  border-color: rgba(255, 107, 115, 0.32);
}
body .pulse-card.down::before { background: var(--bad); }

body .pulse-card.flat {
  background:
    radial-gradient(circle at 14% 10%, rgba(240, 184, 79, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(62, 47, 22, 0.84), rgba(12, 19, 30, 0.95)) !important;
  border-color: rgba(240, 184, 79, 0.30);
}
body .pulse-card.flat::before { background: var(--medium); }

body .pulse-card.steady-up {
  background:
    radial-gradient(circle at 14% 10%, rgba(106, 164, 255, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(19, 45, 77, 0.88), rgba(8, 18, 32, 0.95)) !important;
  border-color: rgba(106, 164, 255, 0.34);
}
body .pulse-card.steady-up::before { background: var(--steady); }

body .pulse-topline span {
  color: #d7e4f4;
  font-weight: 600;
}

body .pulse-card strong {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

body .pulse-card span,
body .pulse-card small,
body .pulse-mini span {
  color: #aebfd4;
}

body .pulse-mini b,
body .pulse-forecast b {
  color: #8fa3bb;
}

body .pulse-change,
body .pulse-forecast {
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.06);
}

body .pulse-change.up,
body .pulse-forecast.up {
  color: #5ee6a2;
  background: rgba(53, 208, 140, 0.14);
}

body .pulse-change.down,
body .pulse-forecast.down {
  color: #ff9ca3;
  background: rgba(255, 107, 115, 0.13);
}

body .pulse-change.flat,
body .pulse-forecast.flat {
  color: #f6cc75;
  background: rgba(240, 184, 79, 0.13);
}

body .pulse-change.steady-up,
body .pulse-forecast.steady-up {
  color: #9ec5ff;
  background: rgba(106, 164, 255, 0.13);
}


/* Server deployment mode: brokerage UI intentionally disabled. */
.server-mode-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--medium) 28%, var(--border));
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240, 184, 79, 0.10), rgba(16, 27, 45, 0.92));
}

.server-mode-panel > div {
  display: grid;
  gap: 4px;
}

.server-mode-panel strong {
  font-size: 14px;
}

.server-mode-panel span {
  color: var(--muted);
  line-height: 1.8;
}

.server-mode-badge {
  flex: 0 0 auto;
  direction: ltr;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--medium) 35%, var(--border));
  color: var(--medium) !important;
  background: var(--medium-soft);
  font-size: 11px;
  font-weight: 700;
}

.order-box {
  grid-template-columns: 1fr;
}

@media (max-width: 720px) {
  .server-mode-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}