:root { color-scheme: dark; }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: radial-gradient(circle at top, #1a2336 0%, #101624 35%, #080d17 100%);
      color: #e9eefc;
      min-height: 100vh;
    }
    .shell {
      max-width: 1280px;
      margin: 0 auto;
      padding: 2rem;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 1rem;
      border-bottom: 1px solid #2b3752;
      padding-bottom: 1rem;
    }
    h1 {
      margin: 0;
      font-size: 1.75rem;
      letter-spacing: 0.02em;
      color: #f5f8ff;
    }
    .subtitle {
      color: #8f9dbb;
      margin-top: 0.35rem;
      font-size: 0.95rem;
    }
    .count {
      color: #8fd8ff;
      font-size: 0.88rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .list {
      display: grid;
      gap: 0.8rem;
    }
    .market-card {
      background: linear-gradient(180deg, #121a2b 0%, #101726 100%);
      border: 1px solid #27344e;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    .market-card[open] { border-color: #3a5ea8; }
    .market-card.is-pinned {
      border-color: #8a6b1f;
      background: linear-gradient(180deg, #201909 0%, #171205 100%);
    }
    .market-card.is-pinned[open] { border-color: #b88d2f; }
    .market-card summary {
      list-style: none;
      cursor: pointer;
      padding: 0.95rem 1rem;
    }
    .market-card summary::-webkit-details-marker { display: none; }
    .summary-grid {
      display: grid;
      grid-template-columns: 1.6fr 2.6fr 1.8fr repeat(5, minmax(90px, 1fr)) 1.1fr auto;
      gap: 0.75rem;
      align-items: center;
    }
    .summary-analytics {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(8, minmax(110px, 1fr));
      gap: 0.5rem;
      padding-top: 0.2rem;
      border-top: 1px solid #243653;
    }
    .field {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
    }
    .label {
      color: #7f90b2;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .value {
      color: #e9eefc;
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500;
    }
    .field-ticker .value,
    .field-game-time .value {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      line-height: 1.3;
    }
    .field-title .value { white-space: normal; line-height: 1.3; }
    .side { font-weight: 700; letter-spacing: 0.03em; }
    .side.yes { color: #52d1c0; }
    .side.no { color: #f495c0; }
    .placeholder { color: #697a9f; }
    .quote { color: #bfe8ff; font-variant-numeric: tabular-nums; }
    .pane {
      min-height: 96px;
      border-top: 1px solid #223049;
      background: #0b1221;
      padding: 0.85rem 1rem 1rem;
    }
    .pane-toolbar {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 0.75rem;
    }
    .chart-mode-toggle {
      display: inline-flex;
      border: 1px solid #2f4369;
      border-radius: 6px;
      overflow: hidden;
      background: #151f35;
    }
    .chart-mode {
      border: 0;
      background: transparent;
      color: #c6d5f5;
      padding: 0.35rem 0.65rem;
      font-size: 0.78rem;
      cursor: pointer;
      min-width: 32px;
    }
    .chart-mode + .chart-mode {
      border-left: 1px solid #2f4369;
    }
    .chart-mode.is-active {
      background: #2a4f93;
      color: #eef4ff;
      font-weight: 600;
    }
    .chart-mode:hover {
      background: #223d70;
    }
    .chart-mode.is-active:hover {
      background: #2e569e;
    }
    .chart-mode:disabled {
      cursor: progress;
      opacity: 0.7;
    }
    .pin-market {
      border: 1px solid #3d4e72;
      background: #16223a;
      color: #7f90b2;
      border-radius: 8px;
      height: 34px;
      width: 34px;
      font-size: 1rem;
      cursor: pointer;
      justify-self: end;
      align-self: center;
      line-height: 1;
    }
    .pin-market:hover {
      background: #223558;
      color: #c5d6ff;
    }
    .pin-market.is-active {
      border-color: #b88d2f;
      background: #4b3a11;
      color: #ffd76e;
      box-shadow: 0 0 0 1px rgba(255, 215, 110, 0.25) inset;
    }
    .refresh-chart {
      background: #224a93;
      border: 1px solid #3763b4;
      color: #dbe8ff;
      border-radius: 6px;
      padding: 0.35rem 0.65rem;
      font-size: 0.78rem;
      cursor: pointer;
    }
    .refresh-chart:hover { background: #2b58aa; }
    .refresh-chart:disabled {
      cursor: progress;
      opacity: 0.7;
    }
    .chart-status {
      color: #8097c4;
      font-size: 0.78rem;
    }
    .chart-metrics-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.65rem;
    }
    .volume-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      border: 1px solid #2f4369;
      border-radius: 999px;
      background: #121c31;
      color: #9fb1d5;
      font-size: 0.75rem;
      padding: 0.22rem 0.55rem;
    }
    .volume-value {
      color: #eaf0ff;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .volume-yes { color: #7adfca; }
    .volume-no { color: #f4a2c8; }
    .volume-total { color: #9fd2ff; }
    .risk-yes { color: #7adfca; }
    .risk-no { color: #f4a2c8; }
    .risk-total { color: #9fd2ff; }
    .pane-layer-stack {
      position: relative;
      min-height: 480px;
    }
    .chart-pane-layer,
    .orders-pane-layer {
      width: 100%;
    }
    .chart-pane-layer {
      visibility: visible;
    }
    .orders-pane-layer {
      visibility: hidden;
      position: absolute;
      inset: 0;
      display: flex;
      align-items: stretch;
    }
    .pane.orders-mode .chart-pane-layer {
      visibility: hidden;
    }
    .pane.orders-mode .orders-pane-layer {
      visibility: visible;
    }
    .orders-pane-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0.75rem;
      width: 100%;
    }
    .orders-pane-left,
    .orders-pane-right {
      min-height: 480px;
      border: 1px solid #223049;
      border-radius: 8px;
      background: #0a1120;
      overflow: hidden;
    }
    .orders-pane-right {
      background: repeating-linear-gradient(
        -45deg,
        rgba(42, 60, 96, 0.08),
        rgba(42, 60, 96, 0.08) 12px,
        rgba(17, 27, 45, 0.08) 12px,
        rgba(17, 27, 45, 0.08) 24px
      );
      overflow-y: auto;
    }
    .orders-list-shell {
      padding: 0.8rem;
      display: grid;
      gap: 0.65rem;
    }
    .orders-list-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;
      border-bottom: 1px solid #20304d;
      padding-bottom: 0.45rem;
    }
    .orders-list-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      width: 100%;
    }
    .orders-new-button {
      border: 1px solid #3763b4;
      border-radius: 6px;
      background: #17376c;
      color: #dce6ff;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0.28rem 0.58rem;
      cursor: pointer;
    }
    .orders-new-button:hover { background: #204689; }
    .orders-list-title {
      font-weight: 700;
      color: #dce6ff;
      letter-spacing: 0.02em;
    }
    .orders-list-summary {
      display: inline-flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      font-size: 0.75rem;
      color: #98a8ca;
    }
    .orders-filled-total,
    .orders-avg-price {
      border: 1px solid #2c3f64;
      border-radius: 999px;
      padding: 0.18rem 0.5rem;
      background: #0f1a31;
    }
    .orders-list-status {
      font-size: 0.78rem;
      color: #8ca0c8;
    }
    .orders-rows {
      display: grid;
      gap: 0.45rem;
    }
    .order-row {
      border: 1px solid #243552;
      border-radius: 8px;
      background: #0d172d;
      padding: 0.55rem;
      display: grid;
      gap: 0.4rem;
    }
    .order-row.status-resting { border-color: #2f7ec8; }
    .order-row.status-canceled { border-color: #8a5fba; }
    .order-row.status-executed { border-color: #2f9f7b; }
    .order-row-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.76rem;
    }
    .order-pill {
      display: inline-block;
      border-radius: 999px;
      padding: 0.14rem 0.45rem;
      border: 1px solid #334f7b;
      background: #12223f;
      color: #d2deff;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 700;
      font-size: 0.66rem;
    }
    .order-pill.side-yes { border-color: #2f9f7b; color: #7ee0be; }
    .order-pill.side-no { border-color: #b75b95; color: #f0a8cf; }
    .order-pill.status-resting { background: rgba(47, 126, 200, 0.2); }
    .order-pill.status-canceled { background: rgba(138, 95, 186, 0.2); }
    .order-pill.status-executed { background: rgba(47, 159, 123, 0.2); }
    .order-row-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.35rem 0.6rem;
      font-size: 0.73rem;
      color: #9bb0d8;
    }
    .order-row-grid strong { color: #e2ebff; font-weight: 700; }
    .order-row-actions {
      margin-top: 0.5rem;
      display: flex;
      justify-content: flex-end;
      gap: 0.4rem;
    }
    .order-cancel-button {
      border: 1px solid #8f3f5d;
      border-radius: 6px;
      background: #4b1f32;
      color: #ffd7e3;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0.25rem 0.5rem;
      cursor: pointer;
    }
    .order-cancel-button:hover {
      background: #652740;
    }
    .order-edit-button {
      border: 1px solid #3c5f93;
      border-radius: 6px;
      background: #1b345a;
      color: #d7e7ff;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0.25rem 0.5rem;
      cursor: pointer;
    }
    .order-edit-button:hover {
      background: #264a7d;
    }
    .order-entry-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(2, 8, 18, 0.75);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 50;
      padding: 1rem;
    }
    .order-entry-modal-backdrop[hidden] {
      display: none;
    }
    .order-entry-modal {
      width: min(420px, 100%);
      background: #0f1a31;
      border: 1px solid #2f4369;
      border-radius: 10px;
      padding: 0.9rem;
      display: grid;
      gap: 0.65rem;
      position: relative;
    }
    .order-entry-modal h3 { margin: 0; font-size: 1rem; }
    .order-entry-modal label {
      display: grid;
      gap: 0.25rem;
      font-size: 0.78rem;
      color: #9fb1d5;
    }
    .order-entry-modal select,
    .order-entry-modal input {
      width: 100%;
      border: 1px solid #2f4369;
      border-radius: 6px;
      background: #0b1326;
      color: #e9eefc;
      padding: 0.4rem 0.5rem;
    }
    .order-entry-submit {
      border: 1px solid #2f7ec8;
      border-radius: 6px;
      background: #1f4f88;
      color: #e9f2ff;
      font-weight: 700;
      padding: 0.45rem 0.6rem;
      cursor: pointer;
    }
    .order-entry-close {
      position: absolute;
      top: 0.35rem;
      right: 0.45rem;
      border: 0;
      background: transparent;
      color: #9fb1d5;
      font-size: 1.2rem;
      cursor: pointer;
      line-height: 1;
    }
    .order-cancel-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(2, 8, 18, 0.75);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 55;
      padding: 1rem;
    }
    .order-cancel-modal-backdrop[hidden] {
      display: none;
    }
    .order-cancel-modal {
      width: min(420px, 100%);
      background: #0f1a31;
      border: 1px solid #8f3f5d;
      border-radius: 10px;
      padding: 0.9rem;
      display: grid;
      gap: 0.65rem;
      position: relative;
    }
    .order-cancel-modal h3 { margin: 0; font-size: 1rem; }
    .order-cancel-copy { margin: 0; color: #b8c8e8; font-size: 0.82rem; }
    .order-cancel-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }
    .order-cancel-keep,
    .order-cancel-confirm {
      border-radius: 6px;
      padding: 0.4rem 0.6rem;
      cursor: pointer;
      font-weight: 700;
    }
    .order-cancel-keep {
      border: 1px solid #2f4369;
      background: #17284a;
      color: #d0ddfb;
    }
    .order-cancel-confirm {
      border: 1px solid #8f3f5d;
      background: #4b1f32;
      color: #ffd7e3;
    }
    .order-cancel-close {
      position: absolute;
      top: 0.35rem;
      right: 0.45rem;
      border: 0;
      background: transparent;
      color: #9fb1d5;
      font-size: 1.2rem;
      cursor: pointer;
      line-height: 1;
    }
    .order-edit-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(2, 8, 18, 0.75);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 56;
      padding: 1rem;
    }
    .order-edit-modal-backdrop[hidden] {
      display: none;
    }
    .order-edit-modal {
      width: min(420px, 100%);
      background: #0f1a31;
      border: 1px solid #3c5f93;
      border-radius: 10px;
      padding: 0.9rem;
      display: grid;
      gap: 0.65rem;
      position: relative;
    }
    .order-edit-modal h3 { margin: 0; font-size: 1rem; }
    .order-edit-copy { margin: 0; color: #b8c8e8; font-size: 0.82rem; }
    .order-edit-modal label {
      display: grid;
      gap: 0.25rem;
      font-size: 0.78rem;
      color: #9fb1d5;
    }
    .order-edit-modal input {
      width: 100%;
      border: 1px solid #2f4369;
      border-radius: 6px;
      background: #0b1326;
      color: #e9eefc;
      padding: 0.4rem 0.5rem;
    }
    .order-edit-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }
    .order-edit-keep,
    .order-edit-submit {
      border-radius: 6px;
      padding: 0.4rem 0.6rem;
      cursor: pointer;
      font-weight: 700;
    }
    .order-edit-keep {
      border: 1px solid #2f4369;
      background: #17284a;
      color: #d0ddfb;
    }
    .order-edit-submit {
      border: 1px solid #3c5f93;
      background: #1b345a;
      color: #e9f2ff;
    }
    .order-edit-close {
      position: absolute;
      top: 0.35rem;
      right: 0.45rem;
      border: 0;
      background: transparent;
      color: #9fb1d5;
      font-size: 1.2rem;
      cursor: pointer;
      line-height: 1;
    }
    .chart-root,
    .orderbook-chart-root {
      min-height: 480px;
    }
    .empty {
      border: 1px dashed #334260;
      border-radius: 10px;
      padding: 2rem;
      color: #8f9dbb;
      text-align: center;
    }
    @media (max-width: 1120px) {
      .summary-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
      .summary-analytics { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
      .pin-market { justify-self: start; }
      .field-ticker,
      .field-title { grid-column: 1 / -1; }
    }
    @media (max-width: 768px) {
      .summary-analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .value { font-size: 0.8rem; }
      .volume-pill { font-size: 0.65rem; }
      .pane-toolbar { flex-wrap: wrap; }
      .chart-mode-toggle {
        overflow: visible;
        min-height: 32px;
      }
      .refresh-chart {
        flex: 1;
        min-height: 32px;
      }
      .chart-status {
        width: 100%;
      }
      .pane-layer-stack {
        min-height: 320px;
      }
      .orders-pane-layer {
        position: static;
        inset: auto;
        display: none;
      }
      .pane.orders-mode .chart-pane-layer {
        display: none;
      }
      .pane.orders-mode .orders-pane-layer {
        display: block;
      }
      .orders-pane-split {
        grid-template-columns: 1fr;
      }
      .order-entry-modal {
        width: 100%;
        max-width: none;
      }
      .orders-pane-left,
      .orders-pane-right,
      .orderbook-chart-root {
        min-height: 320px;
      }
    }