/* ── light (default) ── */
:root {
  --bg: #ffffff; --panel: #f6f8fa; --line: #d0d7de; --text: #1f2328;
  --muted: #656d76; --green: #1a7f37; --red: #cf222e; --blue: #0969da;
  --gold: #9a6700; --accent: #0969da; --hover: #f6f8fa; --detailbg: #fbfcfd;
}
/* ── dark ── */
body.dark {
  --bg: #0d1117; --panel: #161b22; --line: #21262d; --text: #c9d1d9;
  --muted: #8b949e; --green: #27d17f; --red: #ff5b63; --blue: #58a6ff;
  --gold: #f4c430; --accent: #58a6ff; --hover: #12171f; --detailbg: #0b0f14;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; }
/* title + domain are clickable (→ waveradar.us) but styled as plain text, not a link */
.brand-link { display: block; text-decoration: none; color: inherit; cursor: pointer; line-height: 1.15; }
.brand-link h1 { display: inline; }
.brand-domain { display: block; font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: .02em; }
.brand-link:hover .brand-domain { color: var(--accent); }
h1 { margin: 0; font-size: 18px; font-weight: 600; }
.tag { font-size: 11px; color: var(--muted); font-weight: 400; }
.head-right { display: flex; gap: 8px; align-items: center; }
.head-right input {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; font-size: 13px; min-width: 220px;
}
.theme-btn {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 14px;
}
.tabs { display: flex; gap: 6px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.tabs button {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.tabs button:hover { background: var(--hover); color: var(--text); }
.tabs button.active { background: var(--panel); color: var(--text); border-color: var(--line); font-weight: 600; }
.count { color: var(--muted); margin-left: auto; font-size: 12px; }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; background: var(--bg); text-align: right;
  color: var(--muted); font-weight: 500; font-size: 11px;
  padding: 6px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
thead tr.head th { top: 0; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; user-select: none; }
thead tr.head th:hover { color: var(--text); }
thead tr.head th.sorted::after { content: " ▾"; color: var(--accent); }
thead tr.head th.asc::after { content: " ▴"; color: var(--accent); }
thead tr.filters th { top: 27px; padding: 4px 6px; }
thead th.l { text-align: left; }
thead tr.filters input {
  width: 100%; min-width: 48px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font-size: 11px;
}
tbody td { padding: 7px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody td.sym { text-align: left; font-weight: 600; }
tbody td.name { text-align: left; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
tbody td.tf { text-align: left; color: var(--muted); }
tr.setup:hover { background: var(--hover); }
.pill { padding: 1px 7px; border-radius: 10px; font-size: 11px; }
.support { color: var(--green); } .resistance { color: var(--red); }
.pill.support { background: color-mix(in srgb, var(--green) 16%, transparent); }
.pill.resistance { background: color-mix(in srgb, var(--red) 16%, transparent); }
.status { color: var(--muted); font-size: 11px; }
.draw-btn {
  background: var(--panel); color: var(--accent); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 12px;
}
.draw-btn:hover { border-color: var(--accent); }
.draw-btn.open { background: var(--accent); color: var(--bg); }
/* white-space:normal — the panel inherits tbody td's nowrap, which keeps the long
   legend note on one line and pushes the page wider than the screen (esp. landscape),
   making the browser zoom out and leave a big empty strip. min-width:0 lets the chart
   column shrink instead of overflowing the grid. */
tr.detail > td { padding: 0; background: var(--detailbg); white-space: normal; }
.panel { padding: 12px 16px; display: grid; grid-template-columns: 1fr 230px; gap: 14px; }
.panel > div { min-width: 0; }
.chart { width: 100%; height: 440px; min-width: 0; position: relative; }
/* faint "waveradar.us" watermark centered over the candles (non-interactive) */
.chart::after {
  content: "waveradar.us"; position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(22px, 5.5vw, 60px); font-weight: 800; letter-spacing: 2px;
  color: var(--text); opacity: .05; pointer-events: none; user-select: none;
}
/* symbol · name label in the chart's top-left corner */
.chart-wrap { position: relative; }
.chart-label { position: absolute; top: 6px; left: 10px; z-index: 3; font-size: 12px; font-weight: 600;
  color: var(--text); pointer-events: none; padding: 1px 7px; border-radius: 5px;
  background: color-mix(in srgb, var(--bg) 66%, transparent); }
.toolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.toolbar button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px;
}
.toolbar button:hover { border-color: var(--accent); }
.toolbar button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.toolbar .sep { color: var(--muted); margin: 0 2px; }
.legend h4 { margin: 2px 0 8px; font-size: 12px; color: var(--muted); font-weight: 500; }
.legend .lv { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.legend .lv b { font-weight: 600; }
.legend .oabc { font-size: 11px; color: var(--muted); margin: 6px 0; line-height: 1.7; }
.legend .oabc b { color: var(--text); }
.legend .note { color: var(--muted); font-size: 11px; margin-top: 10px; line-height: 1.5; }
.legend .warn { color: var(--red); font-size: 12px; margin-top: 8px; }
.loading { color: var(--muted); padding: 40px; text-align: center; white-space: normal; }
/* these full-width cells hold long text; override tbody td's white-space:nowrap so it
   wraps instead of forcing the table wider than a phone screen (which zooms the page out) */
.reg-prompt { text-align: center; padding: 30px 16px; white-space: normal; max-width: 560px; margin: 0 auto; }
.reg-prompt .rp-q { font-size: 15px; line-height: 1.5; margin-bottom: 16px; word-break: break-word; }
.reg-prompt .rp-reg { display: inline-block; background: var(--accent); color: #fff; border: none;
  padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.reg-prompt .rp-reg:hover { filter: brightness(1.08); }
.reg-prompt .rp-hint { color: var(--muted); font-size: 12px; margin-top: 12px; }

/* ── auth: header identity + sign-in/out button ── */
.auth-user { color: var(--muted); font-size: 12px; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── auth modal (login / register) ── */
.modal-overlay { position: fixed; inset: 0; z-index: 100; padding: 16px;
  background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; }
.modal-overlay[hidden] { display: none; }
.modal-card { position: relative; width: 100%; max-width: 360px; background: var(--bg);
  color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 22px 18px; box-shadow: 0 14px 44px rgba(0, 0, 0, .28); }
.modal-x { position: absolute; top: 9px; right: 12px; background: none; border: none;
  color: var(--muted); font-size: 15px; cursor: pointer; }
.modal-card h2 { margin: 0 0 14px; font-size: 18px; }
.af-row { display: block; margin-bottom: 12px; }
.af-row[hidden] { display: none; }   /* the class's display:block otherwise overrides the UA [hidden] rule */
.af-row span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.af-row input { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 9px 10px; font-size: 14px; }
.af-row input:focus { outline: none; border-color: var(--accent); }
.af-error { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red);
  border-radius: 7px; padding: 8px 10px; font-size: 12px; margin-bottom: 10px; }
.af-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.af-hint b { color: var(--text); }
#afCode { letter-spacing: 6px; font-size: 18px; text-align: center; font-weight: 600; }
.af-submit { width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-submit:hover { filter: brightness(1.08); }
.af-submit:disabled { opacity: .6; cursor: default; }
.af-switch { text-align: center; margin-top: 14px; font-size: 12px; color: var(--muted); }
.af-switch a { color: var(--accent); text-decoration: none; margin-left: 4px; }
/* Google sign-in button + "or" divider */
.google-btn { display: flex; justify-content: center; min-height: 40px; }
.af-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--muted); font-size: 11px; }
.af-or::before, .af-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── static content pages (Disclaimer, EL Rules, Admin); main thead hidden ── */
body.view-static #tbl > thead { display: none; }
.disc-cell { padding: 0 !important; text-align: left; border-bottom: none !important; }
.disclaimer { max-width: 820px; margin: 8px auto 40px; padding: 8px 20px; text-align: left; white-space: normal; }
.disclaimer section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.disclaimer section:last-child { border-bottom: none; }
.disclaimer h3 { margin: 0 0 8px; font-size: 13px; color: var(--accent); font-weight: 600; }
.disclaimer p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--text); }
/* EL Rules page */
.rules { max-width: 860px; margin: 8px auto 48px; padding: 8px 20px; text-align: left; white-space: normal; }
.rules section { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.rules section:last-child { border-bottom: none; }
.rules h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--text); }
.rules h4 { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.rules p { margin: 6px 0; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.rules ul { margin: 6px 0; padding-left: 20px; }
.rules li { font-size: 13.5px; line-height: 1.7; margin: 3px 0; color: var(--text); }
.rules b { font-weight: 600; }
/* Admin panel */
.admin { max-width: 960px; margin: 8px auto 48px; padding: 8px 20px; text-align: left; white-space: normal; }
.admin h3 { margin: 4px 0 14px; font-size: 16px; font-weight: 700; }
.admin-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.admin-stats .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; min-width: 96px; text-align: center; }
.admin-stats .stat b { display: block; font-size: 20px; font-weight: 700; }
.admin-stats .stat span { font-size: 11px; color: var(--muted); }
.admin-tablewrap { overflow-x: auto; }
.admin-users { width: 100%; border-collapse: collapse; }
.admin-users th { text-align: right; font-size: 11px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-users th.l, .admin-users td.l { text-align: left; }
.admin-users td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.admin-users .amuted { color: var(--muted); font-size: 12px; }
.admin-users .badge { font-size: 10px; background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.admin-users select.atier { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font-size: 12px; }
.admin-users .adel { background: none; border: 1px solid var(--line); color: var(--red); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.admin-users .adel:hover { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.admin-msg { margin-top: 12px; font-size: 13px; color: var(--muted); min-height: 18px; }
/* per-user pages: Draw (自选作图), Watchlist, Feedback */
.userpage { max-width: 900px; margin: 8px auto 48px; padding: 8px 20px; text-align: left; white-space: normal; }
.userpage h3 { margin: 4px 0 16px; font-size: 17px; font-weight: 700; }
.userpage h4 { margin: 16px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.amuted { color: var(--muted); font-size: 12px; }
.login-prompt { text-align: center; padding: 30px 16px; }
.login-prompt p { font-size: 14px; margin-bottom: 16px; color: var(--text); }
.rp-reg.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); margin-left: 8px; }
.draw-input { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.draw-input input { flex: 1; min-width: 200px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 14px; }
.draw-input select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 8px; font-size: 13px; }
#drawChart .panel { padding: 12px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.chip:hover { border-color: var(--accent); }
.wl-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.wl-btn:hover { border-color: var(--accent); }
.wl-btn.on { color: var(--gold); border-color: var(--gold); }
.save-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
td.actions { white-space: nowrap; }
.row-wl { padding: 3px 7px; margin-left: 4px; font-size: 14px; line-height: 1; }
.fb-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.fb-form select { align-self: flex-start; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; }
.fb-form textarea { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; font-size: 14px; resize: vertical; }
/* watchlist status pills + per-status notify checkboxes */
.pill.st-signal { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.pill.st-watching { color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, transparent); }
.pill.st-ongoing { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pill.st-invalid { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.pill.st-none { color: var(--muted); }
.notify-cell { text-align: left !important; }
.notify-opt { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.notify-opt input { margin: 0; cursor: pointer; }

/* the name tucked under the ticker in the symbol cell — only shown on mobile (where the
   separate name column is hidden); on desktop the name has its own column. */
.sub-name { display: none; }

/* ── mobile (phones / narrow) ── */
@media (max-width: 720px) {
  header { padding: 10px 12px; }
  h1 { font-size: 16px; }
  .tag { display: none; }
  .head-right { width: 100%; }
  .head-right input { flex: 1; min-width: 0; }
  .tabs { padding: 8px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs button { flex: 0 0 auto; }
  thead tr.filters { display: none; }               /* per-column filters hidden on phones */
  thead tr.head th { top: 0; }
  /* keep only the essentials on setup rows: symbol, tf, level, dist%, Draw.
     Scope to tr.setup so the detail row's colspan cell (the chart) is NOT hidden. */
  thead th:nth-child(1), tr.setup td:nth-child(1),      /* # */
  thead th:nth-child(3), tr.setup td:nth-child(3),      /* name */
  thead th:nth-child(5), tr.setup td:nth-child(5),      /* last */
  thead th:nth-child(7), tr.setup td:nth-child(7),      /* side */
  thead th:nth-child(9), tr.setup td:nth-child(9) {     /* status */
    display: none;
  }
  .row-wl { display: none; }        /* mobile: the ☆ lives under the open chart (panel), not in rows */
  tbody td, thead th { padding: 11px 9px; font-size: 13.5px; }    /* larger, easier to tap/read */
  tbody td.sym { font-size: 15px; font-weight: 600; line-height: 1.25; }
  .sub-name { display: block; font-size: 12px; font-weight: 400; color: var(--muted);
    margin-top: 2px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panel { grid-template-columns: 1fr; gap: 10px; padding: 8px; }  /* stack chart + legend */
  .chart { height: 82vh; min-height: 520px; }                     /* bigger chart on mobile */
  .toolbar { gap: 4px; }
  .toolbar button { padding: 6px 10px; font-size: 13px; }
}