:root {
  --bg0: #090a0f; --bg1: #0d0f14; --bg2: #12151c; --bg3: #131722; --bg4: #1a1f2c;
  --line1: #1f2430; --line2: #2a3245;
  --hi: #f3f4f6; --med: #9ca3af; --lo: #5a6478;
  --buy: #10b981; --sell: #ef4444; --info: #38bdf8; --warn: #f59e0b;
}
html, body { height: 100%; background: var(--bg0); overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
[x-cloak] { display: none !important; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Numbers always monospaced and aligned. */
.num { font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }

.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; }

.field { width: 100%; height: 44px; border-radius: 10px; background: var(--bg4); border: 1px solid var(--line2); padding: 0 12px; color: var(--hi); outline: none; font-family: ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
.field:focus { border-color: var(--info); }
.field::placeholder { color: var(--lo); }
.field.err { border-color: var(--sell); }
.lbl { display: block; font-size: 11px; color: var(--med); margin-bottom: 4px; }

.seg { display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--bg4); border: 1px solid var(--line1); }
.seg-btn { flex: 1; min-height: 38px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--med); transition: background .15s, color .15s; }
.seg-btn[aria-pressed="true"] { background: var(--bg0); color: var(--hi); }

.btn { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: filter .15s; }
.btn:active:not(:disabled) { filter: brightness(.9); }
.btn-buy { background: var(--buy); color: #04110c; }
.btn-sell { background: var(--sell); color: #fff; }
.btn-info { background: var(--info); color: #04121a; }
.btn-ghost { background: var(--bg4); color: var(--hi); border: 1px solid var(--line2); }

.card { background: var(--bg3); border: 1px solid var(--line1); border-radius: 14px; }
.chip { height: 32px; padding: 0 10px; border-radius: 8px; background: var(--bg4); border: 1px solid var(--line1); font-size: 12px; color: var(--med); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--line2); font-size: 11px; color: var(--med); }
.shadow-sheet { box-shadow: 0 -8px 40px rgba(0, 0, 0, .7); }

.skeleton { background: linear-gradient(90deg, var(--bg3), var(--bg4), var(--bg3)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.toast-in { animation: toast-in .18s ease-out; }
.modal-in { animation: modal-in .18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .toast-in, .modal-in, .skeleton { animation: none; } }

/* Draggable price levels (positioned by chart.js). */
.lvl-layer { position: absolute; pointer-events: none; overflow: hidden; z-index: 5; }
.lvl { position: absolute; left: 0; right: 0; top: 0; height: 0; will-change: transform; }
.lvl-line { position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed var(--c); opacity: .85; }
.lvl-pill { position: absolute; right: 6px; top: -13px; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; background: var(--bg3); border: 1px solid var(--c); pointer-events: auto; touch-action: none; cursor: ns-resize; white-space: nowrap; user-select: none; -webkit-user-select: none; font: 600 11px/1 ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
.lvl-pill::after { content: ""; position: absolute; inset: -9px -6px; }
.lvl[data-drag="0"] .lvl-pill { cursor: default; }
.lvl-tag { color: var(--c); }
.lvl-price { color: var(--hi); }
.lvl.is-drag .lvl-pill { background: var(--c); }
.lvl.is-drag .lvl-tag, .lvl.is-drag .lvl-price { color: #04110c; }

input[type="range"] { accent-color: var(--info); width: 100%; height: 28px; }
input[type="checkbox"] { accent-color: var(--info); width: 18px; height: 18px; }