:root {
  color-scheme: dark;
  --bg: #050b09;
  --surface: rgba(13, 27, 23, .78);
  --surface-solid: #0d1b17;
  --line: rgba(142, 181, 165, .15);
  --line-strong: rgba(142, 181, 165, .26);
  --text: #f2fbf7;
  --muted: #80978e;
  --green: #3ee6ab;
  --green-soft: rgba(62, 230, 171, .1);
  --red: #ff7180;
  --red-soft: rgba(255, 113, 128, .1);
  --amber: #f6c963;
  --blue: #79bcff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% -5%, rgba(47, 183, 133, .2), transparent 33rem),
    radial-gradient(circle at 100% 25%, rgba(32, 102, 81, .13), transparent 30rem),
    linear-gradient(155deg, #07110e 0%, var(--bg) 55%, #050806 100%);
  color: var(--text);
  font: 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums;
}
body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .17;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

main { position: relative; }
.operator-shell { width: min(1440px, calc(100% - 42px)); margin: auto; padding: 28px 0; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(23px, 2.3vw, 31px); line-height: 1.15; letter-spacing: -.045em; }
h2 { font-size: 17px; letter-spacing: -.015em; }
header, .panel-head, .header-state, .controls, footer, .brand-lockup, .viewer-head-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-lockup { justify-content: flex-start; }
.brand-mark, .viewer-brand {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(62, 230, 171, .35);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(62, 230, 171, .16), rgba(62, 230, 171, .03));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(13, 120, 82, .12);
  color: var(--green);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.08em;
}
.eyebrow {
  margin-bottom: 4px;
  color: var(--green);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.header-state { color: var(--muted); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.018);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
}
.pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; box-shadow: 0 0 8px currentColor; }
.pill.live { border-color: rgba(62,230,171,.35); background: var(--green-soft); color: var(--green); }
.pill.danger { border-color: rgba(255,113,128,.38); background: var(--red-soft); color: var(--red); }

.warning {
  position: relative;
  margin: 22px 0 12px;
  padding: 13px 17px 13px 43px;
  overflow: hidden;
  border: 1px solid rgba(246, 201, 99, .24);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(246, 201, 99, .1), rgba(246, 201, 99, .025));
  color: var(--amber);
  font-size: 12px;
  font-weight: 750;
}
.warning::before { position: absolute; left: 18px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 15px currentColor; content: ""; transform: translateY(-50%); }
.warning.live { border-color: rgba(255,113,128,.36); background: linear-gradient(90deg, rgba(255,113,128,.12), rgba(255,113,128,.02)); color: #ff9ba5; }

.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.metrics article, .panel, .viewer-summary article, .viewer-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(17, 37, 31, .88), rgba(9, 20, 16, .82));
  box-shadow: inset 0 1px rgba(255,255,255,.025), var(--shadow);
  backdrop-filter: blur(18px);
}
.metrics article { min-height: 118px; padding: 19px; border-radius: 15px; transition: border-color .2s ease, transform .2s ease; }
.metrics article:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.metrics article::after { position: absolute; right: -28px; bottom: -42px; width: 95px; height: 95px; border-radius: 50%; background: rgba(62,230,171,.035); content: ""; }
.metrics span, .metrics small { display: block; color: var(--muted); }
.metrics span { font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.metrics small { font-size: 11px; }
.metrics strong { display: block; margin: 8px 0 3px; font-size: clamp(21px, 2vw, 27px); letter-spacing: -.035em; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }

.grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-bottom: 10px; }
.top-grid { grid-template-columns: 1fr 1fr; }
.panel { min-width: 0; padding: 20px; border-radius: 16px; }
.panel-head { margin-bottom: 18px; }
.panel-head > span { color: var(--muted); font-size: 10px; }
.risk-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.risk-lines div { min-height: 68px; padding: 12px 14px; border: 1px solid rgba(142,181,165,.1); border-radius: 11px; background: rgba(2,9,7,.28); }
.risk-lines div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.risk-lines span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.risk-lines strong { font-size: 13px; font-weight: 720; }

.controls { justify-content: flex-start; margin-top: 16px; }
button {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(22, 43, 36, .78);
  color: var(--text);
  padding: 10px 16px;
  font: inherit;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, filter .15s ease;
}
button:hover { border-color: rgba(255,255,255,.28); filter: brightness(1.12); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.start { border-color: rgba(62,230,171,.45); background: var(--green-soft); color: var(--green); }
button.danger { border-color: rgba(255,113,128,.42); background: var(--red-soft); color: var(--red); }
button:disabled { opacity: .35; cursor: not-allowed; filter: none; transform: none; }
.logout { min-height: 28px; padding: 5px 11px; border-radius: 999px; background: transparent; color: var(--muted); font-size: 10px; }
.control-note { margin-top: 11px; color: var(--muted); font-size: 10px; }

.empty { display: grid; min-height: 132px; place-items: center; border: 1px dashed rgba(142,181,165,.18); border-radius: 12px; background: rgba(2,8,6,.16); color: var(--muted); font-size: 11px; }
.pair-pnl { padding: 5px 0 21px; text-align: center; }
.pair-pnl strong { display: block; font-size: 38px; letter-spacing: -.04em; }
.pair-pnl span { color: var(--muted); font-size: 11px; }
.pair-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.leg { position: relative; padding: 13px 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(2,9,7,.28); }
.leg::before { position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--green); content: ""; }
.leg.short::before { background: var(--red); }
.leg span { font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.leg.long span { color: var(--green); }
.leg.short span { color: var(--red); }
.leg strong, .leg small { display: block; }
.leg strong { margin: 3px 0; font-size: 18px; }
.leg small { color: var(--muted); font-size: 10px; }

.table-wrap { overflow: auto; border: 1px solid rgba(142,181,165,.09); border-radius: 11px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 11px 10px; border-bottom: 1px solid rgba(142,181,165,.08); text-align: right; }
th { background: rgba(2,9,7,.32); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
th:nth-child(2), td:nth-child(2), th:first-child, td:first-child { text-align: left; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(255,255,255,.018); }
tbody tr:last-child td { border-bottom: 0; }
.long-text { color: var(--green); }
.short-text { color: var(--red); }

.signal-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2,9,7,.27); }
.signal-card > strong { display: inline-flex; margin-bottom: 10px; padding: 4px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 10px; }
.signal-card p { padding: 3px 0; }
.signal-card small { display: block; margin-top: 8px; color: var(--muted); }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.rules p { padding: 9px 10px; border: 1px solid rgba(142,181,165,.09); border-radius: 8px; background: rgba(2,9,7,.19); }

.alerts { display: grid; gap: 7px; }
.alert { padding: 10px 12px; border: 1px solid rgba(121,188,255,.12); border-left: 2px solid var(--blue); border-radius: 8px; background: rgba(2,9,7,.3); }
.alert.ERROR, .alert.CRITICAL { border-left-color: var(--red); }
.alert.WARNING { border-left-color: var(--amber); }
.alert small { display: block; color: var(--muted); font-size: 9px; }

.balance-panel { margin-bottom: 10px; }
.chart { min-height: 280px; padding: 4px 2px 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: rgba(142,181,165,.11); stroke-width: 1; stroke-dasharray: 3 6; }
.chart-grid text, .chart-labels text { fill: var(--muted); font-size: 10px; }
.chart-area { fill: url(#balanceGlow); }
.chart-area.viewer { fill: url(#viewerBalanceGlow); }
.chart-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(62,230,171,.28)); }
.chart-dots circle { fill: var(--surface-solid); stroke: var(--green); stroke-width: 3; }
footer { padding: 16px 5px; color: #63776f; font-size: 9px; }

.operation-dialog {
  width: min(410px, calc(100% - 30px));
  padding: 0;
  border: 1px solid rgba(142,181,165,.23);
  border-radius: 20px;
  background: #0b1814;
  color: var(--text);
  box-shadow: 0 32px 100px rgba(0,0,0,.6);
}
.operation-dialog::backdrop { background: rgba(1,6,4,.76); backdrop-filter: blur(8px); }
.operation-dialog form { padding: 27px; }
.dialog-icon { display: grid; width: 42px; height: 42px; margin-bottom: 21px; place-items: center; border: 1px solid rgba(62,230,171,.3); border-radius: 13px; background: var(--green-soft); color: var(--green); font-size: 20px; font-weight: 900; }
.dialog-hint { min-height: 42px; margin: 9px 0 20px; color: var(--muted); font-size: 11px; }
.operation-dialog input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: 0;
  background: rgba(2,9,7,.5);
  color: var(--text);
  padding: 13px 14px;
  font: inherit;
}
.operation-dialog input:focus { border-color: rgba(62,230,171,.55); box-shadow: 0 0 0 3px rgba(62,230,171,.08); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.login-body { display: grid; min-height: 100vh; place-items: center; }
.login-body::after { position: fixed; width: 360px; height: 360px; border: 1px solid rgba(62,230,171,.1); border-radius: 50%; content: ""; box-shadow: 0 0 100px rgba(62,230,171,.06), inset 0 0 100px rgba(62,230,171,.025); }
.login-shell { z-index: 1; width: min(350px, calc(100% - 42px)); padding: 0; }
.u-mark { margin: 0 0 50px; color: var(--green); font-size: 92px; font-weight: 920; line-height: .9; letter-spacing: -.105em; text-align: center; text-shadow: 0 0 40px rgba(62,230,171,.22); transform: translateX(-.05em); }
.login-form { display: grid; grid-template-columns: 1fr 52px; gap: 12px; }
.login-field { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line-strong); transition: border-color .18s ease; }
.login-field:focus-within { border-color: var(--green); }
.login-field span { width: 17px; color: #60786e; font-size: 13px; text-align: center; }
.login-field input { width: 100%; appearance: none; border: 0; outline: 0; background: transparent; color: var(--text); padding: 13px 3px; font: inherit; font-size: 17px; letter-spacing: .03em; }
.login-submit { grid-column: 2; width: 52px; height: 52px; margin-top: 6px; padding: 0; border-color: rgba(62,230,171,.4); border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 22px; }
.login-error { grid-column: 1 / -1; min-height: 24px; color: var(--red); font-size: 11px; text-align: center; }

.viewer-shell { width: min(1040px, calc(100% - 42px)); margin: auto; padding: 32px 0; }
.viewer-header { margin-bottom: 26px; }
.viewer-brand { width: 50px; height: 50px; }
.viewer-head-right { color: var(--muted); font-size: 9px; }
.viewer-summary { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.viewer-summary article { min-height: 142px; padding: 23px; border-radius: 17px; }
.viewer-summary span, .viewer-summary small { display: block; color: var(--muted); }
.viewer-summary span { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.viewer-summary strong { display: block; margin: 13px 0 2px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }
.viewer-summary small { font-size: 10px; }
.viewer-balance::after { position: absolute; right: -55px; top: -75px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, rgba(62,230,171,.16), transparent 68%); content: ""; }
.viewer-panel { padding: 23px; border-radius: 17px; margin-bottom: 10px; }

@media (max-width: 980px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics article:last-child { grid-column: 1 / -1; }
  .grid, .top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .operator-shell, .viewer-shell { width: min(100% - 20px, 1440px); padding-top: 14px; }
  header { align-items: flex-start; }
  .header-state { max-width: 190px; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
  .viewer-summary { grid-template-columns: 1fr 1fr; }
  .viewer-summary .viewer-balance { grid-column: 1 / -1; }
  .viewer-head-right span { display: none; }
  .rules { grid-template-columns: 1fr; }
  .chart { min-height: 200px; }
}
@media (max-width: 460px) {
  h1 { max-width: 185px; font-size: 20px; }
  .eyebrow { letter-spacing: .11em; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics article { min-height: 105px; padding: 15px; }
  .metrics strong { font-size: 19px; }
  .panel, .viewer-panel { padding: 15px; }
  .risk-lines { grid-template-columns: 1fr; }
  .risk-lines div:last-child:nth-child(odd) { grid-column: auto; }
  .controls { flex-wrap: wrap; gap: 7px; }
  .pair-legs { grid-template-columns: 1fr; }
  .viewer-summary { grid-template-columns: 1fr; }
  .viewer-summary .viewer-balance { grid-column: auto; }
  .viewer-summary article { min-height: 116px; }
  .login-shell { width: min(300px, calc(100% - 42px)); }
}