:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f7f5;
  --panel: #ffffff;
  --panel2: #eaf2ee;
  --panel3: #dfece6;
  --line: #bfd2c9;
  --text: #12251f;
  --muted: #5d756b;
  --green: #087f5b;
  --accent: #087f5b;
  --red: #c92a43;
  --gold: #9a6700;
  --side: #e7f0ec;
  --shadow: 0 18px 42px rgba(31, 64, 52, .14);
}

body,
header,
.side,
.panel,
.card,
input,
select,
button {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.theme-toggle {
  position: fixed;
  z-index: 10050;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  min-width: 104px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  font: 700 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% -10%, rgba(8, 127, 91, .08), transparent 28rem),
    var(--bg);
  color: var(--text);
}

:root[data-theme="light"] #auth {
  background: linear-gradient(145deg, #ffffff, #edf5f1);
  border-color: var(--line);
}

:root[data-theme="light"] header,
:root[data-theme="light"] .side {
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border-color: var(--line);
}

:root[data-theme="light"] .side {
  background: #f7faf8;
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .market-overview,
:root[data-theme="light"] .mobile-content-switch,
:root[data-theme="light"] .mobile-bottom-nav,
:root[data-theme="light"] .trade-chart-col > *,
:root[data-theme="light"] .trade-book-col > *,
:root[data-theme="light"] .trade-order-col > * {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme="light"] .metric,
:root[data-theme="light"] .order-summary,
:root[data-theme="light"] .book-status-item,
:root[data-theme="light"] .depth-ratio-meta,
:root[data-theme="light"] .type-toggle,
:root[data-theme="light"] .margin-mode,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .confirm-item {
  background: var(--panel2);
  border-color: var(--line);
}

:root[data-theme="light"] .notice,
:root[data-theme="light"] .gate,
:root[data-theme="light"] .tree-node,
:root[data-theme="light"] .check,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .mobile-head {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="light"] .chart {
  background: linear-gradient(180deg, rgba(8, 127, 91, .08), transparent);
}

:root[data-theme="light"] .overlay {
  background: rgba(15, 35, 28, .38);
}

:root[data-theme="light"] .terminal-tabs,
:root[data-theme="light"] .chart-tools,
:root[data-theme="light"] .trade-book-col h3,
:root[data-theme="light"] .trade-book-col .book-head {
  background: rgba(223, 236, 230, .72);
}

:root[data-theme="light"] .market-panel,
:root[data-theme="light"] .market-search,
:root[data-theme="light"] .market-trigger,
:root[data-theme="light"] .top-balance,
:root[data-theme="light"] input,
:root[data-theme="light"] select {
  background: var(--panel2) !important;
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="light"] .market-panel {
  background: var(--panel) !important;
  box-shadow: var(--shadow);
}

:root[data-theme="light"] .market-backdrop,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .order-sheet-backdrop {
  background: rgba(15, 35, 28, .38);
}

:root[data-theme="light"] .modal .box {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

:root[data-theme="light"] .quick-guide-steps,
:root[data-theme="light"] .order-step,
:root[data-theme="light"] .ob-row .total {
  color: var(--muted);
}

:root[data-theme="light"] .quick-guide {
  background: #edf4ff;
  border-color: #b8cdf2;
}

:root[data-theme="light"] .quick-guide-title {
  color: #285a9f;
}

@media (max-width: 900px), (pointer: coarse) {
  :root[data-theme="light"] #appHead,
  :root[data-theme="light"] .market-overview,
  :root[data-theme="light"] .mobile-content-switch,
  :root[data-theme="light"] .trade-chart-col .chart-tools {
    background: #ffffff;
  }

  :root[data-theme="light"] .mobile-header-icon,
  :root[data-theme="light"] .mobile-menu-button {
    color: #687078;
  }

  :root[data-theme="light"] .trade-order-col {
    background: #ffffff;
    box-shadow: 0 -22px 65px rgba(31, 48, 43, .2);
  }

  :root[data-theme="dark"] .mobile-order-launcher .buy,
  :root[data-theme="dark"] .mobile-order-submit.buy {
    background: #0aa892;
  }

  :root[data-theme="dark"] .mobile-order-launcher .sell,
  :root[data-theme="dark"] .mobile-order-submit.sell {
    background: #dd5848;
  }
}

:root[data-theme="light"] .order-step i {
  background: #dce8f8;
  color: #285a9f;
}

:root[data-theme="light"] .nav button:hover,
:root[data-theme="light"] .ob-row:hover {
  background: rgba(8, 127, 91, .08);
}

:root[data-theme="light"] .nav button.active,
:root[data-theme="light"] .market-row.selected {
  background: rgba(8, 127, 91, .12);
  border-color: rgba(8, 127, 91, .28);
}

:root[data-theme="light"] .danger-zone {
  background: linear-gradient(145deg, #fff7f7, #fce8ea);
}

:root[data-theme="light"] .login-wrap {
  background: radial-gradient(circle at top, #e7f0ec, var(--bg));
}

:root[data-theme="light"] .top-balance-label,
:root[data-theme="light"] .top-balance-krw,
:root[data-theme="light"] .card .hint,
:root[data-theme="light"] .nav-group {
  color: var(--muted);
}

:root[data-theme="light"] .nav a.active,
:root[data-theme="light"] .nav button.active {
  color: var(--green);
}

:root[data-theme="light"] .buy,
:root[data-theme="light"] #auth button,
:root[data-theme="light"] button.primary {
  color: #ffffff;
}

:root[data-theme="light"] .brand-mark {
  color: #ffffff;
  background: var(--accent);
}

@media (max-width: 560px) {
  .theme-toggle {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px);
    min-width: 104px;
    min-height: 44px;
  }

  .market-panel {
    width: min(100%, 100vw);
  }

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

  .cards,
  .form-row,
  .permission-grid,
  .admin-grid,
  .confirm-grid {
    grid-template-columns: 1fr !important;
  }

  button,
  .market-trigger,
  .market-close,
  .nav a,
  .nav button {
    min-height: 44px;
  }

  .main {
    padding-right: 12px;
    padding-left: 12px;
  }

  .panel,
  .card {
    min-width: 0;
  }

  .table-wrap,
  .panel {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
  }

  .toast {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 380px) {
  .top-balances,
  .metrics,
  .summary-strip {
    grid-template-columns: 1fr;
  }

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

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