:root {
  --ink-0: #0C1F26;
  --ink-1: #0F2830;
  --ink-2: #173B47;
  --line: rgba(233, 228, 214, 0.08);
  --bone: #E9E4D6;
  --mute: #8BA3A8;
  --faint: #5A777D;
  --amber: #F0B83A;
  --up: #3FCF9A;
  --down: #FF6A5C;

  /* Neutral washes and glass surfaces: every hover, track and panel reads from these, so the
     light palette below only has to restate them once. */
  --wash: rgba(233, 228, 214, 0.06);
  --wash-soft: rgba(233, 228, 214, 0.035);
  --wash-strong: rgba(233, 228, 214, 0.1);
  --track: rgba(233, 228, 214, 0.07);
  --edge: rgba(233, 228, 214, 0.22);
  --glass: rgba(15, 40, 48, 0.9);
  --glass-solid: rgba(15, 40, 48, 0.94);
  --veil: rgba(12, 31, 38, 0.85);
  --amber-wash: rgba(240, 184, 58, 0.1);
  --amber-edge: rgba(240, 184, 58, 0.45);
  --amber-line: rgba(240, 184, 58, 0.22);

  /* Chart colours, read by app.js through getComputedStyle. */
  --c-text: #8BA3A8;
  --c-grid: rgba(233, 228, 214, 0.045);
  --c-cross: rgba(240, 184, 58, 0.55);
  --c-label: #173B47;
  --c-up-vol: rgba(63, 207, 154, 0.26);
  --c-down-vol: rgba(255, 106, 92, 0.26);
  --c-up-wave: rgba(63, 207, 154, 0.5);
  --c-down-wave: rgba(255, 106, 92, 0.5);
  --c-band: rgba(139, 163, 168, 0.5);
  --c-band-mid: rgba(139, 163, 168, 0.32);
  --c-grey: rgba(139, 163, 168, 0.5);
  --c-grey-text: rgba(139, 163, 168, 0.7);
  --c-wave: rgba(240, 184, 58, 0.75);
  --c-corner: rgba(240, 184, 58, 0.55);
  --c-zero: rgba(233, 228, 214, 0.2);
  --c-pane-line: rgba(233, 228, 214, 0.55);
  --c-overheat: rgba(255, 106, 92, 0.45);
  --c-chip-text: #0C1F26;
  --ln-near: #5AB0FF;
  --ln-entry: #E36BFF;
  --ln-exit: #B7F34A;
  --ln-band: #6FE3F5;
  --ln-trail: #F5A3C7;
  --ln-far: #FF8A3D;
  --ln-turn: #F0B83A;

  --display: 'Bricolage Grotesque', 'IBM Plex Sans KR', system-ui, sans-serif;
  --text: 'IBM Plex Sans', 'IBM Plex Sans KR', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rail-w: 320px;
}

/* Dark is the dashboard's own look and the default. A light palette is kept here, switched on by
   hand with setTheme('light') in the console (app.js), not by the system setting. */
:root[data-theme="light"] {
  --ink-0: #F4F1E9;
  --ink-1: #FFFFFF;
  --ink-2: #E7E1D2;
  --line: rgba(20, 50, 60, 0.14);
  --bone: #15303A;
  --mute: #4E6B74;
  --faint: #7F959C;
  --amber: #9C6F12;
  --up: #0C9A70;
  --down: #CE3D31;

  --wash: rgba(20, 50, 60, 0.06);
  --wash-soft: rgba(20, 50, 60, 0.035);
  --wash-strong: rgba(20, 50, 60, 0.08);
  --track: rgba(20, 50, 60, 0.09);
  --edge: rgba(20, 50, 60, 0.2);
  --glass: rgba(255, 255, 255, 0.92);
  --glass-solid: rgba(255, 255, 255, 0.96);
  --veil: rgba(244, 241, 233, 0.9);
  --amber-wash: rgba(156, 111, 18, 0.12);
  --amber-edge: rgba(156, 111, 18, 0.5);
  --amber-line: rgba(156, 111, 18, 0.28);

  --c-text: #55727B;
  --c-grid: rgba(20, 50, 60, 0.07);
  --c-cross: rgba(156, 111, 18, 0.55);
  --c-label: #15303A;
  --c-up-vol: rgba(12, 154, 112, 0.22);
  --c-down-vol: rgba(206, 61, 49, 0.22);
  --c-up-wave: rgba(12, 154, 112, 0.45);
  --c-down-wave: rgba(206, 61, 49, 0.45);
  --c-band: rgba(78, 107, 116, 0.42);
  --c-band-mid: rgba(78, 107, 116, 0.26);
  --c-grey: rgba(110, 135, 143, 0.65);
  --c-grey-text: rgba(90, 115, 123, 0.9);
  --c-wave: rgba(156, 111, 18, 0.9);
  --c-corner: rgba(156, 111, 18, 0.6);
  --c-zero: rgba(20, 50, 60, 0.18);
  --c-pane-line: rgba(20, 50, 60, 0.45);
  --c-overheat: rgba(206, 61, 49, 0.45);
  /* The price-line chips turn dark in this palette, so their text flips with them. */
  --c-chip-text: #FFFFFF;
  --ln-near: #1C74C8;
  --ln-entry: #9B34BC;
  --ln-exit: #4F8A0B;
  --ln-band: #0A8BA3;
  --ln-trail: #B84B80;
  --ln-far: #C2560F;
  --ln-turn: #9C6F12;
  --pill-text: #FFFFFF; /* the amber pill goes dark on a light page */
  color-scheme: light;
}
/* Panels lift off a light page with a shadow instead of a glow. */
:root[data-theme="light"] .rail { box-shadow: 1px 0 0 var(--line); }
:root[data-theme="light"] :is(.analysis, .tg, .prob) { box-shadow: 0 14px 34px -18px rgba(20, 50, 60, 0.35); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--bone);
  font: 14px/1.45 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

/* ───────── Rail ───────── */

.rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ink-1);
  border-right: 1px solid var(--line);
}

.rail-head { padding: 22px 18px 10px; }

.rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Market tabs: the same sliding pill as the timeframe toggle, one row up. --tabs is how many
   there are, --at which one is open, so adding a market needs no new rule here. */
.rail-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tabs, 2), 1fr);
  margin-bottom: 14px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-1);
}
.rail-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--tabs, 2));
  border-radius: 999px;
  background: var(--wash-strong);
  transform: translateX(calc(var(--at, 0) * 100%));
  transition: transform 0.45s var(--ease-out);
}
.rail-tabs button {
  position: relative;
  z-index: 1;
  padding: 7px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--mute);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s;
}
.rail-tabs button:hover { color: var(--bone); }
.rail-tabs button[aria-selected="true"] { color: var(--bone); }

h1 {
  margin: 0;
  font: 600 1.06rem/1.2 var(--text);
  letter-spacing: -0.01em;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mute);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.icon-btn:hover { color: var(--bone); background: var(--wash); }
.icon-btn.spinning svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.rail-sub {
  margin: 4px 0 14px;
  color: var(--mute);
  font-size: 0.78rem;
}
.rail-sub span { color: var(--faint); }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-0);
  color: var(--faint);
  transition: border-color 0.2s;
}
.search:focus-within { border-color: var(--amber-edge); color: var(--mute); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--bone);
  font: inherit;
}
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.search-clear:hover { color: var(--bone); background: var(--wash); }
/* The hint and the clear button share the slot: whichever fits the moment. */
.search:has(.search-clear:not([hidden])) kbd { display: none; }

.search kbd {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 500 0.7rem/1.4 var(--text);
  color: var(--faint);
}

.list {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 8px 18px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-2) transparent;
}

.indicator {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 58px;
  border-radius: 10px;
  background: var(--ink-2);
  box-shadow: inset 3px 0 0 var(--amber);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s var(--ease-out), height 0.3s var(--ease-out), opacity 0.25s;
}

.row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  grid-template-areas:
    "rank name  price"
    "rank meter pct";
  column-gap: 8px;
  row-gap: 6px;
  width: 100%;
  padding: 10px 12px 11px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}
.row:hover { background: var(--wash-soft); }
.row[aria-current="true"],
.row[aria-current="true"]:hover { background: none; }
.row:focus-visible { outline-offset: -2px; }

.rank {
  grid-area: rank;
  padding-top: 1px;
  color: var(--faint);
  font-size: 0.74rem;
  transition: color 0.3s;
}
.row[aria-current="true"] .rank { color: var(--amber); }

.name {
  grid-area: name;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.name small {
  margin-left: 3px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 400;
}

.row .price { grid-area: price; text-align: right; }

.meter {
  grid-area: meter;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.bar i {
  display: block;
  width: calc(var(--share, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--faint);
  transform-origin: left center;
  transition: background-color 0.3s;
}
.row[aria-current="true"] .bar i { background: var(--amber); }
.vol { min-width: 3.4em; color: var(--mute); font-size: 0.72rem; }
.row .pct { grid-area: pct; text-align: right; font-size: 0.78rem; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--mute); }

.empty {
  margin: 0;
  padding: 0 26px 24px;
  color: var(--mute);
  font-size: 0.82rem;
}

/* Load sequence: the one orchestrated moment */
.list.intro .row {
  animation: row-in 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i) * 22ms + 80ms);
}
.list.intro .bar i {
  animation: bar-in 1s var(--ease-out) both;
  animation-delay: calc(var(--i) * 22ms + 240ms);
}
.list.intro .indicator { animation: fade-in 0.4s 0.3s both; }
@keyframes row-in { from { opacity: 0; transform: translateX(-12px); } }
@keyframes bar-in { from { transform: scaleX(0); } }
@keyframes fade-in { from { opacity: 0; } }

.list.skeleton::after {
  content: "";
  display: block;
  height: 560px;
  margin: 0 4px;
  border-radius: 10px;
  background: repeating-linear-gradient(to bottom, var(--wash-soft) 0 46px, transparent 46px 58px);
  animation: breathe 1.4s ease-in-out infinite alternate;
}
@keyframes breathe { to { opacity: 0.4; } }

/* ───────── Stage ───────── */

.stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ident status"
    "quote quote"
    "stats stats"
    "tools tools";
  align-items: end;
  column-gap: 24px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line);
}

.ident {
  grid-area: ident;
  display: flex;
  align-items: baseline;
  gap: 8px;
  align-self: center;
}
.base {
  font: 700 1.2rem/1.2 var(--display);
  letter-spacing: -0.01em;
}
.quote-asset { color: var(--mute); font-size: 0.82rem; }

.status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  color: var(--mute);
  font-size: 0.76rem;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}
.status[data-state="open"] .dot { background: var(--up); animation: pulse 2.4s ease-out infinite; }
.status[data-state="retry"] .dot { background: var(--amber); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 207, 154, 0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(63, 207, 154, 0); }
}

.quote {
  grid-area: quote;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 16px;
}
.quote .price {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  font-variation-settings: "wdth" 78, "opsz" 96;
  line-height: 1;
  letter-spacing: -0.025em;
}
.quote .pct {
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  font-variation-settings: "wdth" 85;
}
.price.tick-up { animation: tick-up 0.9s ease-out; }
.price.tick-down { animation: tick-down 0.9s ease-out; }
@keyframes tick-up { from { color: var(--up); } }
@keyframes tick-down { from { color: var(--down); } }

.ident.swap, .quote.swap { animation: swap-in 0.55s var(--ease-out); }
@keyframes swap-in { from { opacity: 0; transform: translateY(10px); } }

.stats {
  grid-area: stats;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
}
.stats div { min-width: 0; }
.stats dt { color: var(--faint); font-size: 0.72rem; }
.stats dd { margin: 2px 0 0; font-size: 0.86rem; font-weight: 500; }

/* The controls get their own rows: the view buttons first, then the 진입 and 청산 groups. */
.tools {
  grid-area: tools;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.analyze {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-1);
  color: var(--bone);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.analyze:hover { border-color: var(--amber-edge); }
.analyze[aria-pressed="true"] {
  border-color: var(--amber);
  background: var(--amber-wash);
  color: var(--amber);
}
.analyze.ghost[aria-pressed="false"] { color: var(--mute); }
.analyze.ghost[aria-pressed="true"] {
  border-color: var(--edge);
  background: var(--wash);
  color: var(--bone);
}
.analyze.busy svg { animation: pulse-icon 0.9s ease-in-out infinite alternate; }
@keyframes pulse-icon { to { opacity: 0.3; } }

.tf {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-1);
}
.tf-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--amber);
  transition: transform 0.45s var(--ease-out);
}
.tf[data-pos="1"] .tf-thumb { transform: translateX(100%); }
.tf button {
  position: relative;
  z-index: 1;
  min-width: 56px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  transition: color 0.3s;
}
.tf button:hover { color: var(--bone); }
.tf button[aria-checked="true"] { color: var(--pill-text, var(--ink-0)); }

.tools > * { order: 0; }
.tools-break { display: none; }  /* the second row it used to make is now the 설정 sheet */
.tools > .pick { order: 2; }
.pick {
  --accent: #E36BFF;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-1);
}
.pick-slider { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pick-label { color: var(--faint); font-size: 0.76rem; }
.pick output { min-width: 34px; color: var(--accent); font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pick input[type="range"] {
  --fill: 26.7%;
  width: 90px;
  height: 18px;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pick input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--ink-2) var(--fill));
}
.pick input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ink-2); }
.pick input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.pick input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid var(--ink-0);
  border-radius: 50%;
  background: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.pick input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--ink-0); border-radius: 50%; background: var(--accent); }
.pick-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--mute);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.pick-check:hover { color: var(--bone); background: var(--ink-2); }
.pick-check input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pick-check:has(input:disabled) { opacity: 0.4; cursor: default; background: none; }
.pick-check input:disabled { cursor: default; }
.pick input[type="range"]:disabled { opacity: 0.35; cursor: default; }

/* ───────── Chart ───────── */

.chart-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.chart {
  position: absolute;
  inset: 10px 6px 6px 18px;
  transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
.chart-wrap.loading .chart { opacity: 0.25; filter: saturate(0); }
.tags {
  position: absolute;
  inset: 10px 6px 6px 18px;
  z-index: 1;
  width: calc(100% - 24px);
  height: calc(100% - 16px);
  overflow: visible;
  pointer-events: none;
}
.chart-wrap.loading .tags { opacity: 0.25; }
.tags line { stroke-width: 1; stroke-opacity: 0.75; }
.tags rect { fill: var(--veil); stroke-width: 1; }
.tags text { font: 600 11px var(--text); text-anchor: middle; dominant-baseline: middle; }

.progress {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
.progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: sweep 1.1s ease-in-out infinite;
}
.chart-wrap.loading .progress { opacity: 1; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

.legend {
  position: absolute;
  top: 16px;
  left: 30px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  max-width: calc(100% - 210px); /* the odds badge sits top right */
  color: var(--faint);
  font-size: 0.76rem;
  pointer-events: none;
}
.legend b { color: var(--bone); font-weight: 500; }
.legend b.up { color: var(--up); }
.legend b.down { color: var(--down); }
.legend b.conf { color: var(--amber); }
.legend .lg-levels { display: flex; flex-wrap: wrap; gap: 4px 14px; flex-basis: 100%; }
.legend .lg-src { color: var(--mute); }
.legend .sw { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 0; }
.legend .lg-time { color: var(--mute); }

.notice {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  background: var(--veil);
}
.notice-title { margin: 0; font-weight: 600; font-size: 1rem; }
.notice-body { margin: 0 0 10px; max-width: 46ch; color: var(--mute); white-space: pre-line; }
.notice button {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink-0);
  font-weight: 600;
  cursor: pointer;
}

/* ───────── Strategy analysis ───────── */

.chart-wrap.analyzing .legend { max-width: calc(100% - 470px); }

.analysis {
  position: absolute;
  top: 14px;
  right: 84px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: calc(100% - 70px);
  padding: 14px 14px 10px;
  border: 1px solid var(--amber-line);
  border-radius: 14px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  animation: panel-in 0.45s var(--ease-out);
  transform-origin: top right;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }

.an-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.an-head .icon-btn { width: 26px; height: 26px; margin: -4px -6px 0 0; }
.an-title { margin: 0; font-weight: 600; font-size: 0.92rem; }
.an-sub { margin: 1px 0 0; color: var(--faint); font-size: 0.74rem; }
.an-note { margin: 3px 0 0; color: var(--mute); font-size: 0.72rem; }

.an-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 12px 0 10px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.an-scope button {
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--mute);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.an-scope button:hover { color: var(--bone); }
.an-scope button[aria-pressed="true"] { background: var(--ink-2); color: var(--bone); }

.an-strats { display: grid; gap: 10px; margin-bottom: 12px; }
.an-strat-name { margin: 0 0 4px; font-size: 0.8rem; font-weight: 500; }
.an-strat dl {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0 14px;
  margin: 0;
}
.an-strat dt { color: var(--faint); font-size: 0.68rem; }
.an-strat dd { margin: 1px 0 0; font-size: 0.82rem; font-weight: 500; }

.an-side {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
}
.an-side.short { background: rgba(255, 106, 92, 0.16); color: var(--down); }
.an-side.long { background: rgba(63, 207, 154, 0.16); color: var(--up); }
.an-side.swing { background: rgba(240, 184, 58, 0.16); color: var(--amber); }
.an-side.wave { background: rgba(139, 163, 168, 0.18); color: var(--mute); }
.an-side.zig { background: rgba(240, 184, 58, 0.16); color: var(--amber); }
.an-side.pivot { background: rgba(240, 184, 58, 0.22); color: var(--amber); }

.an-states { display: grid; gap: 6px; margin: 0 0 10px; }
.an-state {
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--wash-soft);
  color: var(--mute);
  font-size: 0.78rem;
  line-height: 1.5;
}
.an-state.live {
  background: rgba(240, 184, 58, 0.12);
  color: var(--bone);
  box-shadow: inset 2px 0 0 var(--amber);
}

.an-trades {
  flex: 1;
  min-height: 0;
  margin: 0 -6px;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-2) transparent;
}
.an-trade {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}
.an-trade:hover { background: var(--wash); }
.an-trade:disabled { cursor: default; opacity: 0.55; }
.an-trade:disabled:hover { background: none; }
.an-trade time { color: var(--mute); }
.an-trade .an-kind { color: var(--faint); }
.an-trade .an-r { font-weight: 600; }

.an-rules {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 0.74rem;
}
.an-rules summary { cursor: pointer; color: var(--faint); }
.an-rules summary:hover { color: var(--bone); }
.an-rules ul { margin: 4px 0 8px; padding-left: 16px; line-height: 1.55; }
.an-rule-title { margin: 8px 0 0; color: var(--bone); }

/* ───────── Small screens ─────────
   The rail cannot sit beside the chart on a phone, so it becomes a drawer over it: the chart keeps
   the whole screen and the list slides in from the left when the ☰ button (or a swipe) asks for it.
   Everything that was a floating panel becomes a bottom sheet. */

.rail-btn { display: none; }
.rail-veil { display: none; }
/* 메뉴 and 설정 hold the view buttons and the sliders in both layouts; only the timeframe differs,
   keeping its segmented pill on a wide screen and turning into a dropdown on a phone. */
.tf-btn { display: none; }
.tf-menu { width: 150px; }
.tf-btn .caret { margin-left: 2px; color: var(--faint); }
.tool-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 190px;
  padding: 8px;
  border: 1px solid var(--amber-line);
  border-radius: 14px;
  background: var(--glass-solid);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  animation: panel-in 0.3s var(--ease-out);
  transform-origin: top left;
}
.tool-menu .analyze { width: 100%; justify-content: flex-start; }
/* The sliders need room, so their sheet is wider and each group wraps inside it. */
.tool-settings { width: min(96vw, 430px); max-height: 60vh; overflow-y: auto; gap: 8px; }
/* One row per item: the slider gives up width so the row never wraps. */
.tool-settings .pick {
  width: 100%;
  gap: 4px;
  padding: 0 6px 0 8px;
}
.tool-settings .pick-slider { flex: 1 1 auto; min-width: 0; gap: 6px; }
.tool-settings .pick-slider input[type="range"] { min-width: 54px; }
.tool-settings .pick-label { flex: 0 0 auto; }
/* In the sheet each item is: switch · slider · value. The display sub-options stay on the desktop
   toolbar, where there is room for them. */
.tool-settings .pick-check:not(.pick-main) { display: none; }
.tool-settings .pick-main { flex: 0 0 auto; }

@media (max-width: 760px) {
  /* The rail leaves the flow, so the stage is the only child and takes the whole screen. */
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: min(86vw, 340px);
    padding-left: env(safe-area-inset-left);
    border-right: 1px solid var(--line);
    box-shadow: 24px 0 48px -24px rgba(0, 0, 0, 0.7);
    transform: translateX(-102%);
    transition: transform 0.38s var(--ease-out);
  }
  body.rail-open .rail { transform: none; }
  .rail-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(4, 14, 18, 0.55);
    opacity: 0;
    transition: opacity 0.3s;
  }
  body.rail-open .rail-veil { opacity: 1; }
  .rail-head { padding: max(16px, env(safe-area-inset-top)) 16px 8px; }
  .list { padding-inline: 6px; }
  .row { padding: 12px 12px 13px 10px; }     /* a thumb needs more than a cursor */
  .search kbd { display: none; }
  /* Safari zooms the page whenever a focused field is under 16px, which threw the layout off every
     time the search was tapped. Pinch zoom is left alone. */
  .search input, .tg input { font-size: 16px; }

  .rail-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 2px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--ink-1);
    color: var(--mute);
    cursor: pointer;
  }
  body.rail-open .rail-btn { color: var(--amber); border-color: var(--amber-edge); }

  .ticket {
    padding: 10px 14px 8px;
    padding-right: max(14px, env(safe-area-inset-right));
    column-gap: 12px;
  }
  .ident { align-self: center; }
  .base { font-size: 1.05rem; }
  .quote-asset { font-size: 0.74rem; }
  .price { font-size: 1.9rem; }
  .quote { gap: 8px; margin: 2px 0 0; }
  /* Stats and controls stop wrapping and scroll sideways instead, so the chart keeps its height. */
  .stats, .tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .stats::-webkit-scrollbar, .tools::-webkit-scrollbar { display: none; }
  .stats { gap: 16px; margin-top: 8px; padding-bottom: 2px; }
  .stats div { flex: 0 0 auto; }
  .stats dt { font-size: 0.68rem; }
  .stats dd { font-size: 0.8rem; }
  .tools { gap: 7px; margin-top: 10px; padding-bottom: 2px; }
  .tools > * { flex: 0 0 auto; }
  .tools-break { display: none; }
  .analyze { height: 34px; }
  /* Fixed running order across the row: 확률 측정 · 봉 · 메뉴 · 설정 · 알림. */
  .tf { display: none; }
  .tf-btn { display: inline-flex; }
  #measure { order: -4; }
  #tf-btn { order: -3; }
  #menu-btn { order: -2; }
  #set-btn { order: -1; }
  /* The menu hangs under its button, inside the header. */
  .tools { position: static; }
  .tool-menu { left: 14px; right: auto; width: min(64vw, 210px); }
  .tool-settings { width: min(94vw, 420px); }  /* one line per item needs the room */

  .chart-wrap { height: auto; min-height: 0; }
  .chart { inset: 6px 2px 4px 4px; }
  .tags { inset: 6px 2px 4px 4px; width: calc(100% - 6px); height: calc(100% - 10px); }
  .legend {
    top: 8px;
    left: 12px;
    max-width: calc(100% - 96px);
    max-height: 4.6em;
    overflow: hidden;
    font-size: 0.68rem;
    gap: 2px 10px;
  }
  .chart-wrap.analyzing .legend { max-width: calc(100% - 96px); }
  .prob { top: 6px; right: 6px; padding: 5px 8px; }
  .find-btn { margin-right: 8px; padding: 0 8px; }
  .find-btn span { display: none; }
  .find { left: 10px; right: 10px; width: auto; }
  .chart-wrap.analyzing .prob { top: 6px; bottom: auto; }

  /* Panels become sheets along the bottom edge. */
  .analysis, .tg {
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 68%;
    transform-origin: bottom center;
  }
  .notice { padding: 18px; }
}

/* ───────── Unified search ─────────
   One box for every tab: the rail searches the market you are in, this one searches them all and
   switches tabs for you. It sits in the title row, just left of the connection chip. */

.find-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-right: 10px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-1);
  color: var(--mute);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.find-btn:hover { color: var(--bone); border-color: var(--amber-edge); }
.find-btn[aria-expanded="true"] { color: var(--amber); border-color: var(--amber-edge); }

.find {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 14;
  width: min(92vw, 380px);
  padding: 12px;
  border: 1px solid var(--amber-line);
  border-radius: 14px;
  background: var(--glass-solid);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  animation: panel-in 0.3s var(--ease-out);
  transform-origin: top right;
}
.find-input { height: 36px; }
.find-note { margin: 10px 2px 0; color: var(--faint); font-size: 0.76rem; }
.find-list {
  margin: 8px 0 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  list-style: none;
}
.find-row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.find-row:hover { background: var(--wash); }
.find-where {
  padding: 2px 0;
  border-radius: 6px;
  background: var(--wash);
  color: var(--mute);
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
}
.find-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.find-name small { margin-left: 4px; color: var(--faint); font-size: 0.72rem; font-weight: 400; }
.find-price { font-size: 0.82rem; text-align: right; }
.find-price span { display: block; font-size: 0.72rem; }

/* ───────── Up / down odds ─────────
   Sits over the price axis, top right; steps aside when the analysis panel opens. */

.prob {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  cursor: help;
}
.chart-wrap.analyzing .prob { top: auto; bottom: 12px; }
.prob-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--faint);
}
.prob-row b { font-size: 0.92rem; font-weight: 600; }
.prob-row.up b { color: var(--up); }
.prob-row.down b { color: var(--down); }
.prob-arrow { font-size: 0.6rem; }
.prob-row.up .prob-arrow { color: var(--up); }
.prob-row.down .prob-arrow { color: var(--down); }
/* The likelier side is the loud one. */
.prob[data-lean="up"] .prob-row.down, .prob[data-lean="down"] .prob-row.up { opacity: 0.5; }

.tags .tag.pct text {
  font: 600 10px var(--text);
  text-anchor: end;
  paint-order: stroke;          /* a dark halo keeps the small % legible over the dotted lines */
  stroke: var(--veil);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ───────── Telegram alerts ───────── */

.tg {
  position: absolute;
  top: 14px;
  right: 84px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 320px;
  padding: 14px;
  border: 1px solid var(--amber-line);
  border-radius: 14px;
  background: var(--glass-solid);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  animation: panel-in 0.45s var(--ease-out);
  transform-origin: top right;
}
.tg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tg-title { margin: 0; font-family: var(--display); font-size: 0.98rem; font-weight: 600; }
.tg-sub { margin: 4px 0 0; color: var(--mute); font-size: 0.76rem; line-height: 1.4; }
.tg-field { display: flex; flex-direction: column; gap: 6px; }
.tg-field > span:first-child { color: var(--faint); font-size: 0.74rem; }
.tg-row { display: flex; align-items: center; gap: 6px; }
.tg-row input { flex: 1; min-width: 0; }
.tg input[type="password"], .tg input[type="text"] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-0);
  color: var(--bone);
  font: inherit;
  font-size: 0.82rem;
}
.tg input::placeholder { color: var(--faint); }
.tg input:focus-visible { border-color: var(--amber); outline: none; }
.tg-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-2);
  color: var(--bone);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tg-btn:hover { border-color: var(--amber-edge); }
.tg-btn:disabled { opacity: 0.45; cursor: default; }
.tg .pick-check { --accent: var(--amber); }
.tg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tg-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bone);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.tg-switch input { width: 15px; height: 15px; margin: 0; accent-color: var(--amber); cursor: pointer; }
.tg-status { margin: 0; color: var(--mute); font-size: 0.76rem; line-height: 1.45; }
.tg-status.bad { color: var(--down); }
.tg-status.good { color: var(--up); }
.tg-note { margin: 0; color: var(--faint); font-size: 0.72rem; line-height: 1.4; }

@media (max-width: 1100px) and (min-width: 761px) {
  .tg { right: 10px; left: 10px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}