:root {
  --bg: #0d1117; --panel: #161b22; --border: #262d38; --text: #d7dde6;
  --muted: #8b96a5; --red: #f0524d; --green: #2ebd85; --accent: #f7b32b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
  /* dvh so the mobile URL bar doesn't clip the bottom of the layout */
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
}
a { color: var(--accent); text-decoration: none; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
header h1 { font-size: 16px; font-weight: 600; }
header .price { font-size: 15px; font-weight: 600; }
header .price.up { color: var(--green); } header .price.dn { color: var(--red); }
header .spacer { margin-left: auto; }
header .role { color: var(--muted); font-size: 12.5px; }
#conn { width: 9px; height: 9px; border-radius: 50%; background: #666; }
#conn.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
#conn.off { background: var(--red); }

button, .btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 5px 10px; font-size: 12.5px; cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--accent); }
.tfbtn.on { color: var(--accent); border-color: var(--accent); }
.symgroup { display: flex; gap: 4px; }
.symbtn { font-weight: 600; }
.symbtn.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
input, select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font-size: 13px; outline: none;
}

main { flex: 1 1 auto; display: flex; min-height: 0; }

/* ---------- chart ---------- */
#chartPane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#chartCtl {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap;
}
#chart { flex: 1; min-height: 0; position: relative; }
#legend {
  position: absolute; top: 8px; left: 10px; z-index: 5;
  background: rgba(13,17,23,.75); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 9px; font-size: 11.5px; color: var(--muted);
}
#legend b.r { color: var(--red); } #legend b.s { color: var(--green); }

/* event dots placed at exact price/time (overlay above the canvas) */
#evtLayer { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.evt { position: absolute; pointer-events: auto; cursor: help; --sz: 8px; --c: #888; }

/* liquidations = circle (red long / green short) */
.evt.liq {
  width: var(--sz); height: var(--sz); background: var(--c);
  border-radius: 50%; border: 1px solid rgba(13,17,23,.85);
  transform: translate(-50%, -50%);
}
/* pivots = yellow diamond */
.evt.piv {
  width: var(--sz); height: var(--sz); background: var(--accent);
  border: 1px solid rgba(13,17,23,.85);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* RSI = triangle (green up for low, red down for high) */
.evt.rsi { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.evt.rsi.low  { border-bottom: 10px solid var(--green); transform: translate(-50%, -60%); }
.evt.rsi.high { border-top: 10px solid var(--red);      transform: translate(-50%, -40%); }

/* ---------- side feed ---------- */
#feedPane {
  flex: 0 0 320px; display: flex; flex-direction: column;
  border-left: 1px solid var(--border); background: var(--panel); min-height: 0;
}
.feedHead {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.feedHead .tab { color: var(--muted); cursor: pointer; }
.feedHead .tab.on { color: var(--accent); }
/* collapse control — mobile only (see media query below) */
.feedToggle {
  display: none; margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
#feed { flex: 1; overflow-y: auto; }
.item {
  padding: 7px 12px; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent; font-size: 12.5px; cursor: pointer;
}
.item:hover { background: #1d2430; }
.item.long { border-left-color: var(--red); }
.item.short { border-left-color: var(--green); }
.item.low { border-left-color: var(--green); }
.item.high { border-left-color: var(--red); }
.item .top { display: flex; justify-content: space-between; }
.item .time { color: var(--muted); font-size: 11.5px; }
.item .sub { color: var(--muted); font-size: 11.5px; }
.empty { padding: 14px 12px; color: var(--muted); font-size: 12.5px; }
@keyframes flash { from { background: #2c3a52; } to { background: transparent; } }
.item.new { animation: flash 2.5s ease-out; }

/* ---------- login ---------- */
/* min() so the form keeps a margin even on a 320px-wide phone */
.login-wrap { margin: auto; width: min(320px, 100% - 32px); text-align: center; }
.login-wrap h1 { font-size: 20px; margin-bottom: 6px; }
.login-wrap p { color: var(--muted); margin-bottom: 18px; font-size: 13px; }
.login-wrap form { display: flex; flex-direction: column; gap: 10px; }
.login-wrap input { padding: 10px; text-align: center; }
.login-wrap button { padding: 10px; font-size: 14px; }
.login-wrap .err { color: var(--red); font-size: 13px; min-height: 18px; }

/* ---------- admin ---------- */
.admin-wrap { flex: 1; overflow-y: auto; padding: 20px; max-width: 900px; margin: 0 auto; width: 100%; }
.tableWrap { overflow-x: auto; }
.admin-wrap h2 { font-size: 16px; margin: 18px 0 10px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
.tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; }
.tag.R { background: rgba(240,82,77,.15); color: var(--red); }
.tag.S { background: rgba(46,189,133,.15); color: var(--green); }
.del { color: var(--red); cursor: pointer; background: none; border: none; }

/* =========================== responsive ===================================
   Desktop keeps the chart + 320px side feed. Narrow screens stack them, and
   the feed collapses so the chart keeps the full height by default.        */

/* tablets / small laptops: just give the feed less room */
@media (max-width: 900px) {
  #feedPane { flex-basis: 250px; }
  header { gap: 10px; }
}

@media (max-width: 640px) {
  /* --- header: one compact row, timeframes scroll on a row of their own --- */
  header { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  header h1 { display: none; }
  header .role { display: none; }
  header .price { font-size: 14px; }
  .btn, button { padding: 5px 8px; font-size: 12px; }
  /* symbol chips + timeframe strip share the second row; the strip scrolls */
  .symgroup { order: 10; flex: 0 0 auto; }
  .tfgroup {
    order: 11; flex: 1 1 0; min-width: 0; display: flex; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tfgroup::-webkit-scrollbar { display: none; }
  .tfbtn { flex: 0 0 auto; }

  /* --- chart above, feed below --- */
  main { flex-direction: column; }
  #chartPane { flex: 1 1 auto; min-height: 0; }
  #chart { min-height: 200px; }
  #chartCtl {
    flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding: 7px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #chartCtl::-webkit-scrollbar { display: none; }
  #chartCtl label { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }
  #chartCtl .role { display: none; }
  #legend { display: none; }

  #feedPane {
    flex: 0 0 42vh; border-left: none; border-top: 1px solid var(--border);
  }
  .feedToggle { display: inline-block; }
  body.feed-collapsed #feedPane { flex: 0 0 auto; }
  body.feed-collapsed #feed { display: none; }

  /* --- admin --- */
  .admin-wrap { padding: 12px; }
  .card { padding: 12px; }
  .row { gap: 8px; }
  .row label { flex: 1 1 100%; }
  .row label input, .row label select { width: 100%; }
  table { min-width: 480px; }
}

/* Touch devices: dots are decorative there — `title` tooltips never show and
   catching pointer events would block panning the chart with a finger. */
@media (hover: none) {
  .evt { pointer-events: none; }
}