* { margin: 0; padding: 0; box-sizing: border-box; }

:root { --bg: #0C0E11; --text: #c8c6c1; }
[data-theme="light"] { --bg: #f4e9da; --text: #3d2b22; }

body {
  font-family: 'DM Mono', monospace;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 12px 10px;
}

.container {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.orderbook-container {
  flex: 1;
  min-width: 280px;
}

.form-container {
  width: 200px;
  flex-shrink: 0;
}

h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 2px;
  color: #e8e6e1;
}

.subtitle {
  text-align: center;
  font-size: 0.65rem;
  color: #8a8a8e;
  margin-bottom: 10px;
}

/* --- Orderbook table --- */
.asks-section .book-section-label { color: #fb923c; }
.bids-section .book-section-label { color: #4ade80; }
[data-theme="light"] .asks-section .book-section-label { color: #c4580a; }
[data-theme="light"] .bids-section .book-section-label { color: #16863a; }

.book-section-label {
  font-family: 'Instrument Serif', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0em;
  padding: 8px 10px 5px;
  color: #c8c6c1;
}

.book-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 5px 10px;
  font-size: 0.65rem;
  color: #8a8a8e;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.book-header .right { text-align: right; }

.book-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 7px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.book-row:hover { background: #2a2a2e; }
.book-row .right { text-align: right; }

.book-row .depth-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0.25;
  pointer-events: none;
  transition: width 0.3s ease;
}

.asks-section .book-row { color: #fb923c; }
.asks-section .depth-bar { background: #fb923c; }
.bids-section .book-row { color: #4ade80; }
.bids-section .depth-bar { background: #4ade80; }

.book-row .col-total { color: #555555; }

/* --- User order highlight --- */
.book-row.user-order {
  border: 2px solid;
  border-radius: 8px;
  animation: userOrderPulse 2s ease-in-out infinite;
  padding-left: 14px;
}

.asks-section .book-row.user-order {
  border-color: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.4);
}

.bids-section .book-row.user-order {
  border-color: #4ade80;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
}

@keyframes userOrderPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.user-order-spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
  margin-right: 6px;
}

/* --- Order form --- */
.order-form {
  background: #1e1e22;
  border: 1px solid #2a2a2e;
  border-radius: 8px;
  padding: 12px;
  position: sticky;
  top: 20px;
}

.form-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #e8e6e1;
}

.side-toggle {
  display: flex;
  margin-bottom: 8px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid #2a2a2e;
}
.side-toggle button {
  flex: 1;
  padding: 6px;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #191919;
  color: #8a8a8e;
  transition: all 0.15s;
}
.side-toggle button.active-buy {
  background: #1a3d2a;
  color: #4ade80;
}
.side-toggle button.active-sell {
  background: #3d2315;
  color: #fb923c;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.form-group label {
  font-size: 10px;
  color: #8a8a8e;
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-group input {
  width: 100%;
  background: #191919;
  border: 1px solid #2a2a2e;
  border-radius: 6px;
  padding: 7px 8px;
  color: #e8e6e1;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.form-group input:focus { border-color: #6b9ebb; }

.submit-btn {
  width: 100%;
  padding: 9px 8px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.submit-btn.buy  { background: #162b1e; border: 1px solid #2d5e3a; color: #4ade80; }
.submit-btn.buy:hover  { background: #1e3d28; border-color: #4ade80; }
.submit-btn.sell { background: #2d1a0e; border: 1px solid #5e3320; color: #fb923c; }
.submit-btn.sell:hover { background: #3d2415; border-color: #fb923c; }

/* --- Book highlights --- */
.book-row.will-fill { background: rgba(107,158,187,0.14); }
[data-theme="light"] .book-row.will-fill { background: rgba(74,122,154,0.1); }

.order-marker {
  height: 2px; margin: 0 10px;
  border-radius: 1px;
  animation: markerPulse 1.5s ease-in-out infinite;
}
.order-marker.buy  { background: #4ade80; opacity: 0.6; }
.order-marker.sell { background: #fb923c; opacity: 0.6; }
[data-theme="light"] .order-marker.buy  { background: #16863a; }
[data-theme="light"] .order-marker.sell { background: #c4580a; }

@keyframes markerPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.2; }
}

/* --- Order preview --- */
.order-preview {
  font-size: 0.7rem;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  min-height: 0;
  line-height: 1.4;
  transition: background 0.15s;
}
.order-preview:empty { display: none; }
.order-preview.instant { background: rgba(74,222,128,0.08); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.order-preview.waiting { background: rgba(251,146,60,0.08); color: #fb923c; border: 1px solid rgba(251,146,60,0.15); }
.order-preview.partial { background: rgba(107,158,187,0.08); color: #6b9ebb; border: 1px solid rgba(107,158,187,0.2); }
[data-theme="light"] .order-preview.instant { background: #d4edd6; color: #16863a; border-color: #8acd8a; }
[data-theme="light"] .order-preview.waiting { background: #f0ddd0; color: #c4580a; border-color: #d4a080; }
[data-theme="light"] .order-preview.partial { background: #dce8f0; color: #3a6a8a; border-color: #8ab0c8; }

/* --- Toast notification --- */
.toast-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}
.toast-overlay.visible { display: flex; }

.toast-box {
  background: #1e1e22;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 380px;
  text-align: center;
  animation: popIn 0.3s ease;
}

.toast-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.toast-title {
  font-size: 16px;
  font-weight: 700;
  color: #e8e6e1;
  margin-bottom: 8px;
}

.toast-body {
  font-size: 13px;
  color: #8a8a8e;
  line-height: 1.5;
  margin-bottom: 16px;
}
.toast-body strong { color: #e8e6e1; }

.toast-dismiss {
  background: #2a2a2e;
  border: 1px solid #2a2a2e;
  border-radius: 6px;
  padding: 8px 24px;
  color: #c8c6c1;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.toast-dismiss:hover { background: #3a3a3e; }

.toast-resting {
  font-size: 12px;
  color: #555555;
  margin-top: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes popIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Capture mode (widget-specific) ── */
html.capture .form-container { display: none; }

/* ── Light mode overrides ── */
[data-theme="light"] h1 { color: #1e1410; }
[data-theme="light"] .subtitle { color: #6b5a4e; }
[data-theme="light"] .book-section-label { color: #3d2b22; }
[data-theme="light"] .book-header { color: #8a7060; }
[data-theme="light"] .book-row:hover { background: #ead4ba; }
[data-theme="light"] .asks-section .book-row { color: #c4580a; }
[data-theme="light"] .bids-section .book-row { color: #16863a; }
[data-theme="light"] .book-row .col-total { color: #a89080; }
[data-theme="light"] .asks-section .depth-bar { background: #c4580a; }
[data-theme="light"] .bids-section .depth-bar { background: #16863a; }
[data-theme="light"] .order-form { background: #ede3d6; border-color: #d4c4b0; }
[data-theme="light"] .form-title { color: #1e1410; }
[data-theme="light"] .form-group label { color: #6b5a4e; }
[data-theme="light"] .form-group input { background: #f4e9da; border-color: #d4c4b0; color: #1e1410; }
[data-theme="light"] .form-group input:focus { border-color: #4a7a9a; }
[data-theme="light"] .side-toggle { border-color: #d4c4b0; }
[data-theme="light"] .side-toggle button { background: #f4e9da; color: #6b5a4e; }
[data-theme="light"] .side-toggle button.active-buy { background: #d4edd6; color: #16863a; }
[data-theme="light"] .side-toggle button.active-sell { background: #f0ddd0; color: #c4580a; }
[data-theme="light"] .spread-indicator { border-color: #d4c4b0; color: #8a7060; }
[data-theme="light"] .spread-indicator .spread-value { color: #1e1410; }
[data-theme="light"] .toast-overlay { background: rgba(0,0,0,0.3); }
[data-theme="light"] .toast-box { background: #ede3d6; border-color: #d4c4b0; }
[data-theme="light"] .toast-title { color: #1e1410; }
[data-theme="light"] .toast-body { color: #6b5a4e; }
[data-theme="light"] .toast-body strong { color: #1e1410; }
[data-theme="light"] .toast-resting { color: #8a7060; }
[data-theme="light"] .toast-dismiss { background: #d4c4b0; border-color: #d4c4b0; color: #3d2b22; }
[data-theme="light"] .toast-dismiss:hover { background: #c4b4a0; }
[data-theme="light"] .tooltip-box { background: #ede3d6; border-color: #d4c4b0; color: #3d2b22; }
[data-theme="light"] .tooltip-box .th { color: #1e1410; }
[data-theme="light"] .submit-btn.buy  { background: #d4edd6; border-color: #8acd8a; color: #16863a; }
[data-theme="light"] .submit-btn.buy:hover  { background: #c0e0c4; border-color: #16863a; }
[data-theme="light"] .submit-btn.sell { background: #f0ddd0; border-color: #d4a080; color: #c4580a; }
[data-theme="light"] .submit-btn.sell:hover { background: #e4cfc0; border-color: #c4580a; }

/* ── Tooltip ── */
.tooltip-box {
  position: fixed; z-index: 9999;
  background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 8px;
  padding: 10px 14px; max-width: 240px;
  font-family: system-ui, sans-serif; font-size: 0.72rem;
  color: #c8c6c1; line-height: 1.5;
  pointer-events: none; opacity: 0; transition: opacity 0.12s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.tooltip-box.visible { opacity: 1; }
.tooltip-box .th { color: #e8e6e1; font-weight: 600; }

/* ── Spread indicator ── */
.spread-indicator {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 5px 10px;
  font-family: 'DM Mono', monospace; font-size: 12px; color: #8a8a8e;
  border-top: 1px solid #2a2a2e; border-bottom: 1px solid #2a2a2e;
  cursor: default;
}
.spread-indicator .spread-value { color: #e8e6e1; font-weight: 500; }
.spread-indicator .spread-pct { font-size: 11px; color: #555555; }