:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-card: #1c2128;
    --border: #30363d;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --green: #3fb950;
    --green-bg: rgba(63,185,80,0.15);
    --red: #f85149;
    --red-bg: rgba(248,81,73,0.15);
    --blue: #58a6ff;
    --yellow: #d29922;
    --purple: #bc8cff;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { overflow-x: hidden; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
  }

  /* ---- App Layout (sidebar + main) ---- */
  .app-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }
  .main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ---- Left Sidebar ---- */
  .sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease, opacity 0.15s ease;
  }
  .sidebar.collapsed {
    width: 0;
    border-right: none;
    opacity: 0;
    pointer-events: none;
  }
  .sidebar-top {
    display: flex;
    align-items: center;
    padding: 12px 12px 8px;
    flex-shrink: 0;
  }
  .sidebar-collapse-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .sidebar-collapse-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
  }

  /* Collapsed strip — thin bar visible when sidebar is hidden */
  .sidebar-collapsed-strip {
    width: 48px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
  }
  .sidebar.collapsed ~ .sidebar-collapsed-strip,
  .sidebar.collapsed + .sidebar-collapsed-strip {
    display: flex;
  }
  .sidebar-expand-strip-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .sidebar-expand-strip-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
  }

  /* Collapsed sidebar — account icons */
  .collapsed-account-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    width: 100%;
  }
  .collapsed-account-icon {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform 0.1s, filter 0.1s;
    flex-shrink: 0;
  }
  .collapsed-account-icon:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
  .collapsed-account-icon.trading-enabled {
    background: var(--green);
  }
  .collapsed-account-icon.trading-disabled {
    background: var(--text-muted);
  }
  .collapsed-account-icon.trading-halted {
    background: var(--red);
  }
  .collapsed-account-icon.selected::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--blue);
  }

  /* ---- Sidebar Menu ---- */
  .sidebar-menu {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .sidebar-menu-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .sidebar-menu-item.active .sidebar-menu-header {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
  }
  .sidebar-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 0;
  }
  .sidebar-menu-header:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
  }
  .sidebar-menu-header svg {
    flex-shrink: 0;
  }
  a.sidebar-menu-item .sidebar-menu-header {
    border-top: 1px solid var(--border);
  }
  .sidebar-add-account {
    padding: 4px 8px 8px;
  }

  .sidebar-accounts {
    overflow-y: auto;
    min-height: 0;
    padding: 4px 8px 4px 16px;
  }
  .sidebar-accounts::-webkit-scrollbar { width: 6px; }
  .sidebar-accounts::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
  .sidebar-account-item {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.1s;
    margin-bottom: 2px;
  }
  .sidebar-account-item:hover {
    background: rgba(255,255,255,0.05);
  }
  .sidebar-account-item.active {
    background: rgba(255,255,255,0.08);
  }
  .sidebar-account-item .account-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }
  .sidebar-account-item .account-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
  }
  .account-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .account-type-badge.paper {
    background: rgba(210,153,34,0.15);
    color: var(--yellow);
  }
  .account-type-badge.live {
    background: var(--green-bg);
    color: var(--green);
  }
  .account-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .account-status-dot.active-dot { background: var(--green); }
  .account-status-dot.inactive-dot { background: var(--text-muted); }
  .account-status-dot.halted-dot { background: var(--red); }

  .account-indicator {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
  }

  /* ---- Sidebar Add Account ---- */
  .sidebar-add-account {
    padding: 4px 8px 8px;
    flex-shrink: 0;
  }
  .add-account-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .add-account-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    border-color: var(--text-muted);
  }

  /* ---- Validate Connection Button ---- */
  .validate-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .validate-btn:hover {
    background: rgba(46, 204, 113, 0.1);
    color: var(--green);
    border-color: var(--green);
  }
  .validate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ---- Delete Account Button ---- */
  .delete-account-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .delete-account-btn:hover {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red);
  }

  /* ---- Top Nav ---- */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar h1 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
  }
  .topbar .status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
  }
  .status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2s infinite;
  }
  .status-dot.disconnected { background: var(--red); animation: none; }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* ---- Portfolio Cap Banner ---- */
  .portfolio-cap-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(248, 81, 73, 0.18);
    border-bottom: 2px solid var(--red);
    color: var(--red);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .portfolio-cap-icon {
    font-size: 22px;
    flex-shrink: 0;
  }

  /* ---- Portfolio Bar ---- */
  .portfolio-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
  }
  .metric-card {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .metric-card .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .metric-card .value {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .metric-card .sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
  }
  .positive { color: var(--green); }
  .negative { color: var(--red); }
  .neutral  { color: var(--text-secondary); }

  /* ---- Main Grid (2-column layout, single row) ---- */
  .main-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 320px);
    grid-template-rows: 1fr;
    gap: 16px;
    padding: 16px 24px;
    flex: 1;
    min-height: 0;
    max-width: 100%;
  }

  /* ---- Cards ---- */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
  }
  .card-header .badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    text-transform: none;
  }
  .badge-open { background: var(--green-bg); color: var(--green); }
  .badge-none { background: rgba(139,148,158,0.15); color: var(--text-secondary); }

  .card-body { padding: 16px; }

  /* ---- Chart Column (merged market+prices card + BTC chart) ---- */
  .chart-col {
    grid-row: 1 / -1;
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }

  /* ---- Merged Market + Contract Prices Card ---- */
  .merged-market-card {
    flex-shrink: 0;
  }
  .current-market-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
    gap: 16px;
  }
  .current-market-inner:hover {
    border-color: var(--blue);
    background: rgba(88,166,255,0.06);
  }
  .current-market-question {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .current-market-prices {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }
  .current-market-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .current-market-price .price-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .current-market-price.yes-price .price-label { color: var(--green); }
  .current-market-price.no-price .price-label { color: var(--red); }
  .current-market-price .price-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .current-market-expiry {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
  }
  /* ---- Contract Price Chart (inside merged card) ---- */
  .contract-price-chart-area {
    width: 100%;
    height: 160px;
    border-top: 1px solid var(--border);
  }
  .contract-price-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 12px;
  }

  /* ---- Chart ---- */
  .chart-area {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #chart-container {
    width: 100%;
    flex: 1;
    min-height: 0;
  }
  .chart-controls {
    display: flex;
    gap: 4px;
    padding: 0 16px 12px;
  }
  .chart-controls button {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .chart-controls button.active,
  .chart-controls button:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
  }

  /* ---- Middle Column (Position + Contracts) ---- */
  .middle-col {
    grid-row: 1 / -1;
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
  }
  .middle-col::-webkit-scrollbar { width: 6px; }
  .middle-col::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  /* ---- Activity Column (full-height right pane) ---- */
  .activity-col {
    grid-row: 1 / -1;
    grid-column: 3 / 4;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Position Card */
  .position-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
  }
  .position-row .key { color: var(--text-secondary); }
  .position-row .val { font-weight: 500; font-variant-numeric: tabular-nums; }
  .no-position {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
  }

  /* ---- Trade Log (used on Results page) ---- */
  .trade-log-area {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .trade-table-wrapper {
    flex: 1;
    overflow: auto;
    min-height: 0;
  }
  .trade-table-wrapper::-webkit-scrollbar { width: 6px; }
  .trade-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
  table.trades {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  table.trades th {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border);
  }
  table.trades td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
  }
  table.trades tr:hover { background: rgba(255,255,255,0.03); }

  .reason-toggle {
    cursor: pointer;
    color: var(--blue);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
  }
  .reason-toggle:hover { text-decoration: underline; }
  .reason-detail {
    display: none;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
  }
  .reason-detail.open { display: block; }

  /* ---- Unsuitable Markets (inline, always visible) ---- */
  .unsuitable-inline {
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(210,153,34,0.08);
    border-left: 2px solid var(--yellow, #d29922);
    border-radius: 0 4px 4px 0;
    font-size: 11px;
    line-height: 1.5;
  }
  .unsuitable-inline-item {
    padding: 1px 0;
    color: var(--text-secondary);
  }
  .unsuitable-x {
    color: var(--red, #f85149);
    font-weight: 700;
    margin-right: 4px;
  }
  .unsuitable-reason-tag {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(210,153,34,0.18);
    color: var(--yellow, #d29922);
    font-size: 10px;
    font-weight: 600;
  }

  /* ---- Skipped Markets in expanded details ---- */
  .skipped-markets-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  .skipped-markets-header {
    font-weight: 600;
    font-size: 11px;
    color: var(--yellow, #d29922);
    margin-bottom: 4px;
  }
  .skipped-market-item {
    padding: 2px 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
  }
  .skipped-market-x {
    color: var(--red, #f85149);
    font-weight: 700;
    flex-shrink: 0;
  }
  .skipped-market-question {
    color: var(--text-primary);
    font-size: 11px;
  }
  .skipped-market-reason {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(210,153,34,0.18);
    color: var(--yellow, #d29922);
    font-size: 10px;
    font-weight: 600;
  }

  /* ---- Activity Collapse/Expand ---- */
  .activity-collapsed-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 8px;
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .activity-col {
    position: relative;
  }
  .activity-col > .card {
    transition: opacity 0.2s ease;
  }
  .main-grid.activity-collapsed .activity-col > .card {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .main-grid.activity-collapsed .activity-collapsed-strip {
    display: flex;
  }
  .collapsed-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
  }
  .collapse-btn, .expand-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .collapse-btn:hover, .expand-btn:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
  }

  /* ---- Activity Feed (full-height pane) ---- */
  .activity-feed {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
  .activity-feed::-webkit-scrollbar { width: 6px; }
  .activity-feed::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
  .activity-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
  }
  .activity-item .time {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 2px;
  }
  .activity-item .action-text {
    font-weight: 500;
  }
  .activity-item .detail {
    color: var(--text-secondary);
    margin-top: 2px;
  }

  /* ---- Series Toggles ---- */
  .series-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .toggle-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
  }
  .toggle-label input[type="checkbox"] {
    display: none;
  }
  .toggle-slider {
    position: relative;
    width: 28px;
    height: 14px;
    background: var(--border);
    border-radius: 7px;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
  }
  .toggle-label input:checked + .toggle-slider {
    background: var(--green-bg);
  }
  .toggle-label input:checked + .toggle-slider::after {
    transform: translateX(14px);
    background: var(--green);
  }

  /* ---- Trading Toggle Button ---- */
  .trading-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--green);
    border-radius: 8px;
    background: var(--green-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .trading-toggle:hover {
    filter: brightness(1.15);
  }
  .trading-toggle.enabled {
    border-color: var(--green);
    background: var(--green-bg);
  }
  .trading-toggle.disabled {
    border-color: var(--red);
    background: var(--red-bg);
  }
  .trading-toggle.capped {
    cursor: not-allowed;
    opacity: 0.7;
  }
  .trading-toggle.capped:hover {
    filter: none;
  }
  .trading-toggle-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    transition: background 0.2s ease;
  }
  .trading-toggle.disabled .trading-toggle-indicator {
    background: var(--red);
  }
  .trading-toggle-text {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .trading-toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
    transition: color 0.2s ease;
  }
  .trading-toggle.disabled .trading-toggle-label {
    color: var(--red);
  }
  .trading-toggle-sub {
    font-size: 11px;
    color: var(--text-muted);
  }

  /* ---- Active Positions Pane ---- */
  .active-positions-pane {
    border: 2px solid var(--green);
    border-radius: 8px;
    background: rgba(63,185,80,0.08);
    box-shadow: 0 0 12px rgba(63,185,80,0.15);
    flex-shrink: 0;
    animation: position-glow 2s ease-in-out infinite alternate;
  }
  @keyframes position-glow {
    from { box-shadow: 0 0 8px rgba(63,185,80,0.1); }
    to { box-shadow: 0 0 18px rgba(63,185,80,0.3); }
  }
  .active-positions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(63,185,80,0.2);
  }
  .active-positions-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--green);
  }
  .active-positions-body {
    padding: 10px 14px;
  }
  .active-pos-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
  }
  .active-pos-row .key {
    color: var(--text-secondary);
  }
  .active-pos-row .val {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .active-pos-detail + .active-pos-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(63,185,80,0.2);
  }

  /* ---- Strategy toggles card ---- */
  .strategy-toggles-card {
    flex: none;
    display: flex;
    flex-direction: column;
  }
  .strategy-toggles-body {
    padding: 8px 16px 12px;
  }
  .strategy-toggle-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .strategy-toggle-row:last-child {
    border-bottom: none;
  }
  .strategy-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }
  .strategy-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .strategy-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .strategy-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
  }
  .strategy-sizing-control {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .strategy-sizing-input {
    width: 52px;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    text-align: right;
  }
  .strategy-sizing-unit {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 12px;
  }
  .strategy-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .strategy-late-hour {
    background: rgba(210,153,34,0.15);
    color: var(--yellow);
  }
  .strategy-lp {
    background: rgba(163,113,247,0.15);
    color: #a371f7;
  }
  .strategy-market-aligned {
    background: rgba(63,185,80,0.15);
    color: var(--green);
  }
  .strategy-favorite {
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
  }
  .strategy-hedge {
    background: rgba(248,113,113,0.15);
    color: #f87171;
  }
  .strategy-bearish-no {
    background: rgba(248,81,73,0.15);
    color: var(--red);
  }
  .strategy-momentum {
    background: rgba(234,179,8,0.15);
    color: #eab308;
  }
  .strategy-simple-life {
    background: rgba(168,85,247,0.15);
    color: #a855f7;
  }
  .strategy-straddle {
    background: rgba(251,146,60,0.15);
    color: #fb923c;
  }
  .strategy-estop-flip {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
  }
  .strategy-market-maker {
    background: rgba(14,165,233,0.15);
    color: #0ea5e9;
  }
  .strategy-mm_eth { background: rgba(98, 126, 234, 0.15); color: #627eea; }
  .strategy-mm_sol { background: rgba(220, 31, 255, 0.15); color: #dc1fff; }
  .strategy-mm_xrp { background: rgba(0, 170, 228, 0.15); color: #00aae4; }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* ---- Changelog card ---- */
  .changelog-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .changelog-feed {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
  .changelog-feed::-webkit-scrollbar { width: 6px; }
  .changelog-feed::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
  .changelog-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .changelog-item:last-child { border-bottom: none; }
  .changelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  .changelog-hash {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    background: rgba(88,166,255,0.1);
    padding: 1px 6px;
    border-radius: 4px;
  }
  .changelog-date {
    font-size: 11px;
    color: var(--text-muted);
  }
  .changelog-message {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
  }
  .badge-bullish { background: var(--green-bg); color: var(--green); }
  .badge-bearish { background: var(--red-bg); color: var(--red); }
  .badge-neutral { background: rgba(210,153,34,0.15); color: var(--yellow); }

  /* ---- Nav Link (topbar) ---- */
  .nav-link {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
  }
  .nav-link:hover,
  .nav-link.active {
    color: var(--text-primary);
  }

  /* ---- Mobile Bottom Tab Bar (hidden on desktop) ---- */
  .mobile-tab-bar {
    display: none;
  }

  /* ---- BTC Price ticker ---- */
  .btc-price-display {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ---- Mobile Account Nav (hidden on desktop) ---- */
  .mobile-account-nav {
    display: none;
  }

  /* ---- Responsive ---- */

  /* Mobile collapse toggles (hidden on desktop) */
  .mobile-collapse-toggle {
    display: none;
  }

  /* Tablet: 2-column layout */
  @media (max-width: 1200px) {
    .main-grid {
      grid-template-columns: 1fr minmax(0, 300px);
      height: auto;
    }
    .main-grid.activity-collapsed {
      grid-template-columns: 1fr minmax(0, 300px);
    }
    .activity-col {
      grid-row: auto;
      grid-column: 1 / -1;
      max-height: 400px;
    }
    /* Hide collapse UI on tablet where activity stacks below */
    .collapse-btn { display: none; }
    .activity-collapsed-strip { display: none !important; }
    .main-grid.activity-collapsed .activity-col > .card {
      opacity: 1;
      pointer-events: auto;
    }
    .middle-col {
      grid-row: 1 / 3;
      grid-column: 2 / 3;
    }
  }

  /* Mobile: single column, reordered layout */
  @media (max-width: 900px) {
    /* Prevent page-level horizontal scroll — inner panes scroll independently */
    .main-content {
      overflow-x: hidden;
      max-width: 100vw;
    }

    /* Hide sidebar completely on mobile — replaced by mobile-account-nav */
    .sidebar,
    .sidebar-collapsed-strip {
      display: none !important;
    }

    /* Mobile account nav — sticky header */
    .mobile-account-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
      padding: 10px 16px;
      order: -110;
    }
    .mobile-nav-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }
    .mobile-account-selector {
      position: relative;
    }
    .mobile-account-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 12px;
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
    }
    .mobile-account-btn:active {
      background: rgba(255,255,255,0.06);
    }
    .mobile-account-chevron {
      font-size: 10px;
      color: var(--text-muted);
      transition: transform 0.2s;
    }
    .mobile-account-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      min-width: 240px;
      max-width: 90vw;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      z-index: 60;
      overflow: hidden;
    }
    .mobile-account-dropdown.open {
      display: block;
    }
    .mobile-dropdown-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text-primary);
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }
    .mobile-dropdown-item:last-child {
      border-bottom: none;
    }
    .mobile-dropdown-item:active,
    .mobile-dropdown-item.active {
      background: rgba(255,255,255,0.06);
    }
    .mobile-dropdown-name {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-dropdown-add {
      color: var(--text-secondary);
      font-size: 12px;
      justify-content: center;
    }

    /* Dissolve grid containers — children flow in main-content flex column */
    .main-grid {
      display: contents;
    }
    .middle-col {
      display: contents;
    }
    .chart-col {
      display: contents;
    }

    /* Current market card on mobile */
    .current-market-card {
      order: -65;
      margin: 8px 16px 0;
    }
    .current-market-inner {
      padding: 8px 12px;
      gap: 10px;
    }
    .current-market-question {
      font-size: 12px;
    }
    .current-market-price .price-value {
      font-size: 15px;
    }

    /* Chart on mobile: visible, non-interactive, fixed height, collapsible */
    .chart-area {
      display: flex !important;
      order: -60;
      margin: 8px 16px 0;
      flex: none;
      height: auto;
    }
    #chart-container {
      height: 300px;
      flex: none;
      pointer-events: none;
    }
    .chart-area.mobile-section-collapsed #chart-container {
      display: none;
    }
    .chart-area.mobile-section-collapsed .chart-controls {
      display: none;
    }

    /* Reorder layout: trading toggle at top, trade history at bottom */
    .topbar { order: -100; }
    .portfolio-cap-banner { order: -90; }
    #trading-toggle-btn { order: -80; margin: 12px 16px 0; width: auto; }
    .active-positions-pane { order: -72; margin: 8px 16px 0; }
    .portfolio-bar { order: -70; }
    .strategy-toggles-card { order: 5; margin: 8px 16px 0; flex: none; }
    .activity-col {
      order: 30;
      margin: 8px 16px 16px;
      max-height: none;
      flex: none;
    }
    .activity-col > .card {
      max-height: 350px;
    }

    /* Topbar: compact for mobile */
    .topbar {
      padding: 10px 16px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .topbar h1 { font-size: 16px; }
    .topbar .status { flex-wrap: wrap; justify-content: flex-end; }

    /* Portfolio bar: compact */
    .portfolio-bar {
      padding: 12px 16px;
      gap: 10px;
    }
    .metric-card { padding: 10px 12px; }
    .metric-card .value { font-size: 18px; }

    /* Hide desktop activity collapse UI */
    .collapse-btn { display: none; }
    .activity-collapsed-strip { display: none !important; }
    .main-grid.activity-collapsed .activity-col > .card {
      opacity: 1;
      pointer-events: auto;
    }

    /* Show mobile collapse toggles */
    .mobile-collapse-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px;
      font-size: 14px;
      transition: transform 0.3s ease;
      width: 24px;
      height: 24px;
    }
    .mobile-collapse-toggle:hover {
      color: var(--text-primary);
    }

    /* Collapsed state: hide content, rotate chevron */
    .mobile-section-collapsed .mobile-collapse-toggle {
      transform: rotate(-90deg);
    }
    .mobile-section-collapsed .activity-feed {
      display: none;
    }
    .activity-col.mobile-section-collapsed > .card {
      max-height: none;
    }

    /* Make card headers tappable on mobile for collapsible sections */
    .chart-area > .card-header,
    .activity-col .card-header {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    /* Mobile Bottom Tab Bar */
    .mobile-tab-bar {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border);
      padding: 8px 16px;
      padding-bottom: max(8px, env(safe-area-inset-bottom));
      gap: 8px;
    }
    .mobile-tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 12px;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
    }
    .mobile-tab:hover,
    .mobile-tab:active {
      background: rgba(255,255,255,0.05);
      color: var(--text-secondary);
    }
    .mobile-tab.active {
      background: rgba(88,166,255,0.15);
      color: var(--blue);
    }
    .mobile-tab svg {
      flex-shrink: 0;
    }

    /* Add bottom padding to main content for tab bar */
    .main-content {
      padding-bottom: 80px;
    }
  }

  /* ---- Mobile More Page (iOS-style full screen) ---- */
  .mobile-more-page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: var(--bg-primary);
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(80px, calc(60px + env(safe-area-inset-bottom)));
  }
  .mobile-more-page.open {
    display: flex;
  }
  .mobile-more-header {
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--border);
  }
  .mobile-more-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .mobile-more-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
  }
  .mobile-more-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
  }
  .mobile-more-item:active {
    background: rgba(255,255,255,0.05);
  }
  .mobile-more-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 8px;
    flex-shrink: 0;
    color: var(--blue);
  }
  .mobile-more-label {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
  }
  .mobile-more-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
  }

  /* ---- Paper Trading Badge & Reset Button ---- */
  .paper-trading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .badge-paper {
    background: rgba(210,153,34,0.2);
    color: var(--yellow);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
  }
  .reset-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .reset-btn:hover {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red);
  }

  /* ---- Confirmation Modal ---- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .modal-header {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
  }
  .modal-body {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
  }
  .modal-body ul {
    margin: 8px 0 8px 20px;
    padding: 0;
  }
  .modal-body li {
    margin: 4px 0;
  }
  .modal-footer {
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border);
  }
  .modal-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.15s;
  }
  .modal-btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .modal-btn-cancel:hover {
    background: var(--border);
    color: var(--text-primary);
  }
  .modal-btn-danger {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
  }
  .modal-btn-danger:hover {
    background: #e04040;
    border-color: #e04040;
  }
  .modal-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .modal-btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
  }
  .modal-btn-primary:hover {
    background: #4090ee;
    border-color: #4090ee;
  }
  .modal-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ---- Form elements for modals ---- */
  .form-group {
    margin-bottom: 14px;
  }
  .form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
  }
  .form-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
  }
  .form-input:focus {
    border-color: var(--blue);
  }
  .form-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
  }
  .form-error {
    font-size: 12px;
    color: var(--red);
    padding: 8px;
    background: var(--red-bg);
    border-radius: 4px;
    margin-top: 8px;
  }
  .type-selector {
    display: flex;
    gap: 8px;
  }
  .type-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
  }
  .type-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
  }
  .type-btn.active {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(88,166,255,0.1);
  }

  /* ---- Trade Tab Toggles ---- */
  .trade-tab-toggles {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 2px;
  }
  .trade-tab {
    padding: 3px 10px;
    font-size: 11px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .trade-tab:hover {
    color: var(--text-primary);
  }
  .trade-tab.active {
    background: var(--blue);
    color: #fff;
  }