/* ==========================================================================
   CryptoLab — дизайн система
   Оформление: като Hyperliquid (плътна търговска мрежа, ляво графика,
   дясно панели, тъмен фон, числа в колони).
   Визия: iOS 26 „Liquid Glass" — прозрачни слоеве с размиване, светъл ръб
   отгоре, едри непрекъснати ъгли, плаващи капсули.
   Палитрата НЕ е на Hyperliquid: там е мента върху зелено-черно, тук е
   индиго/циан върху синьо-черно.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- основа --- */
  --bg:        #08090F;
  --bg-2:      #0B0D15;
  --ink:       #0B0D15;          /* плътен фон за изскачащи слоеве */

  /* --- стъкло --- */
  --glass-1:   rgba(255, 255, 255, .045);
  --glass-2:   rgba(255, 255, 255, .075);
  --glass-3:   rgba(255, 255, 255, .11);
  --border:    rgba(255, 255, 255, .085);
  --border-2:  rgba(255, 255, 255, .16);
  --rim:       rgba(255, 255, 255, .10);   /* горен светъл ръб */
  --blur:      saturate(180%) blur(22px);

  /* --- текст --- */
  --text:      #F3F4F8;
  --text-2:    #C3C7D6;
  --muted:     #868DA6;
  --faint:     #5B6178;

  /* --- цветове (iOS системни, тъмен режим) --- */
  --accent:    #7E7BFF;          /* индиго */
  --accent-2:  #34D2F0;          /* циан */
  --accent-dim:rgba(126, 123, 255, .16);
  --up:        #30D158;
  --down:      #FF453A;
  --warn:      #FF9F0A;
  --up-dim:    rgba(48, 209, 88, .14);
  --down-dim:  rgba(255, 69, 58, .14);
  --warn-dim:  rgba(255, 159, 10, .14);

  /* --- форма --- */
  --r-sm:  10px;
  --r:     14px;
  --r-lg:  20px;
  --r-xl:  26px;
  --radius: var(--r);

  --shadow:    0 10px 34px rgba(0, 0, 0, .45);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .55);

  /* Числата са със системния шрифт и еднаква ширина на цифрите —
     така колоните се подравняват, без да изглеждат като терминал. */
  --mono: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --code: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

/* Светлинният слой отдолу — стъклото трябва да размива нещо, за да е стъкло.
   Слоевете седят направо във фона на body и са закачени за екрана
   (background-attachment: fixed), за да не се движат при скрол. */
html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  color: var(--text);
  font: 14px/1.55 var(--font);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(58% 46% at 10% -10%, rgba(126, 123, 255, .52), rgba(126, 123, 255, 0) 62%),
    radial-gradient(50% 44% at 96% -4%,  rgba(52, 210, 240, .34),  rgba(52, 210, 240, 0)  60%),
    radial-gradient(56% 50% at 84% 104%, rgba(126, 123, 255, .34), rgba(126, 123, 255, 0) 64%),
    radial-gradient(48% 44% at -6% 96%,  rgba(48, 209, 88, .18),   rgba(48, 209, 88, 0)   64%),
    radial-gradient(130% 96% at 50% 34%, rgba(8, 9, 15, 0), rgba(8, 9, 15, .58) 76%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

::selection { background: rgba(126, 123, 255, .32); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .10); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); background-clip: padding-box; }

/* Общата стъклена рецепта. */
.glass, .panel, .card, .stat, .src-card, .plan, .toast,
.user-drop, .auth-card, .market-head, .rail-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 var(--rim),
    inset 0 -1px 0 rgba(0, 0, 0, .30),
    var(--shadow);
}

/* Истинският iOS ъгъл е суперелипса, не окръжност. */
@supports (corner-shape: squircle) {
  .panel, .card, .stat, .btn, .input, .src-card, .plan,
  .toast, .user-drop, .auth-card, .market-head, .rail-card,
  .tabs, .tab, .subtabs, .badge, .pill { corner-shape: squircle; }
}

/* ==========================================================================
   Горна лента — плаваща стъклена капсула
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  height: 62px; padding: 0 22px;
  background: rgba(10, 12, 19, .62);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .04), 0 8px 30px rgba(0, 0, 0, .35);
}

.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 640; font-size: 16px; letter-spacing: -.02em;
  white-space: nowrap;
}
.brand .logo {
  width: 28px; height: 28px; display: block; border-radius: 9px;
  /* Сянката пада от самата плочка на знака, не от квадрат под него. */
  filter: drop-shadow(0 4px 12px rgba(126, 123, 255, .40));
}

/* Дребно падащо меню вътре в заглавие. Стои като клас, а не като вграден
   стил, за да може мобилният слой изобщо да го достигне. */
.input.compact { padding: 5px 26px 5px 10px; font-size: 12.5px; }

/* Обвивката поема мястото, което досега заемаха самите табове. */
.tabs-wrap { min-width: 0; margin-right: auto; }

/* Сегментен контрол в стил iOS. */
.tabs {
  display: flex; align-items: center; gap: 3px;
  min-width: 0; max-width: 100%; overflow-x: auto; margin-right: auto;
  padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  background: none; border: 0; color: var(--muted);
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  font: 500 13.5px/1 var(--font); letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .18s cubic-bezier(.32, .72, 0, 1),
              background .18s cubic-bezier(.32, .72, 0, 1),
              transform .18s cubic-bezier(.32, .72, 0, 1);
}
.tab:hover { color: var(--text-2); }
.tab:active { transform: scale(.96); }
.tab.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 10px rgba(0, 0, 0, .35);
}

.status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dot.on  { background: var(--up);   box-shadow: 0 0 0 3px rgba(48, 209, 88, .18); }
.dot.off { background: var(--warn); box-shadow: 0 0 0 3px rgba(255, 159, 10, .18); }

/* ==========================================================================
   Лента за риск
   ========================================================================== */
.risk-banner {
  padding: 9px 22px; font-size: 12.5px; color: var(--muted);
  background: rgba(126, 123, 255, .07);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.risk-banner.live {
  background: rgba(255, 69, 58, .13); color: #FFC4BF;
  border-bottom-color: rgba(255, 69, 58, .32);
}
.risk-banner strong { color: var(--text); font-weight: 600; }
.risk-banner.live strong { color: #fff; }

/* ==========================================================================
   Оформление
   ========================================================================== */
main { max-width: 1640px; margin: 0 auto; padding: 20px 22px 72px; }
.view { display: none; }
.view.active { display: block; animation: rise .32s cubic-bezier(.32, .72, 0, 1); }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 26px 0 12px;
}
.section-head:first-child { margin-top: 0; }
.section-head h2 {
  font-size: 12px; font-weight: 600; margin: 0;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

.panel { border-radius: var(--r-lg); padding: 16px; }
.panel.scroll { max-height: 560px; overflow-y: auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }

/* ==========================================================================
   Контроли
   ========================================================================== */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar.sub { margin-top: -4px; font-size: 12.5px; color: var(--muted); }
.toolbar.sub label { display: flex; align-items: center; gap: 7px; }
.spacer { flex: 1; }

.input {
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 8px 12px;
  font: 13.5px/1.35 var(--font); letter-spacing: -.01em;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.input:hover { background: rgba(255, 255, 255, .07); }
.input:focus {
  border-color: rgba(126, 123, 255, .65);
  background: rgba(126, 123, 255, .08);
  box-shadow: 0 0 0 4px rgba(126, 123, 255, .16);
}
.input.tiny { width: 78px; padding: 6px 9px; }
.input.wide { min-width: 320px; flex: 1; max-width: 460px; }
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23868DA6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px;
}
select.input option, select.input optgroup { background: var(--ink); color: var(--text); }
input[type=number] { -moz-appearance: textfield; }

.btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 8px 16px; cursor: pointer;
  font: 500 13.5px/1.35 var(--font); letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 2px 8px rgba(0, 0, 0, .28);
  transition: transform .16s cubic-bezier(.32, .72, 0, 1),
              background .16s, border-color .16s, opacity .16s, box-shadow .16s;
}
.btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); }
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }

.btn.primary {
  background: linear-gradient(180deg, #8F8CFF, #6A67F5);
  border-color: rgba(255, 255, 255, .18);
  color: #fff; font-weight: 560;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 6px 18px rgba(106, 103, 245, .38);
}
.btn.primary:hover { background: linear-gradient(180deg, #9C99FF, #7673FF); }

.btn.danger {
  background: rgba(255, 69, 58, .12);
  border-color: rgba(255, 69, 58, .34); color: #FF8078;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn.danger:hover { background: rgba(255, 69, 58, .2); }

.btn.ghost {
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.btn.ghost:hover { background: rgba(255, 255, 255, .08); }
.btn.wide { width: 100%; padding: 12px; font-size: 14.5px; border-radius: 13px; }

/* Превключвател в стил iOS вместо квадратче за отметка. */
.chk { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.chk input[type=checkbox],
.card .row input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; margin: 0;
  width: 42px; height: 25px; border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .26s cubic-bezier(.32, .72, 0, 1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.chk input[type=checkbox]::after,
.card .row input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.chk input[type=checkbox]:checked,
.card .row input[type=checkbox]:checked {
  background: linear-gradient(180deg, #3BDE64, #28BC4C);
  border-color: rgba(255, 255, 255, .2);
}
.chk input[type=checkbox]:checked::after,
.card .row input[type=checkbox]:checked::after { transform: translateX(17px); }
.chk input[type=checkbox]:focus-visible,
.card .row input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* ==========================================================================
   Мрежа с активи
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; }
.card {
  border-radius: var(--r-lg); padding: 16px;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1), border-color .22s, box-shadow .22s;
}
.grid .card { cursor: pointer; }
.grid .card:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 40px rgba(0, 0, 0, .5);
}
.grid .card:active { transform: translateY(-1px) scale(.99); }

.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-sym { font-weight: 620; font-size: 15px; letter-spacing: -.02em; }
.card-price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 550; }
.card-changes { display: flex; gap: 14px; margin-top: 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.card-changes span { color: var(--faint); }
.card-changes b { font-weight: 560; }
.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; font-size: 11.5px; color: var(--muted); }
.spark { width: 100%; height: 40px; margin-top: 9px; display: block; }

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); font-size: 12.5px; }

/* ==========================================================================
   Значки
   ========================================================================== */
.badge {
  padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.badge.long  { background: var(--up-dim);   color: var(--up);   border-color: rgba(48, 209, 88, .28); }
.badge.short { background: var(--down-dim); color: var(--down); border-color: rgba(255, 69, 58, .28); }
.badge.flat  { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: var(--border); }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 520;
  background: rgba(255, 255, 255, .07); color: var(--muted);
  border: 1px solid var(--border);
}
.pill.ok   { background: var(--up-dim);   color: var(--up);   border-color: rgba(48, 209, 88, .26); }
.pill.bad  { background: var(--down-dim); color: var(--down); border-color: rgba(255, 69, 58, .26); }
.pill.warn { background: var(--warn-dim); color: var(--warn); border-color: rgba(255, 159, 10, .26); }

/* ==========================================================================
   Търговски изглед — заглавна лента с числа, като на Hyperliquid
   ========================================================================== */
.market-head {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: var(--r-lg); margin-bottom: 14px;
}
.market-sym {
  display: flex; align-items: center; gap: 12px;
  padding-right: 24px; border-right: 1px solid var(--border);
}
.market-sym .name { font-size: 21px; font-weight: 640; letter-spacing: -.03em; }
.market-stat { display: flex; flex-direction: column; gap: 3px; min-width: 84px; }
.market-stat .lbl {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); font-weight: 560;
}
.market-stat .val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 550; letter-spacing: -.01em;
}
.market-stat .val.big { font-size: 19px; font-weight: 620; }

.trade-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .trade-grid { grid-template-columns: 1fr; } }
.trade-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.rail-card { border-radius: var(--r-lg); padding: 16px; }
.rail-card h3 {
  margin: 0 0 12px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.rail-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 13px;
}
.rail-row:last-child { border-bottom: 0; }
.rail-row .k { color: var(--muted); }
.rail-row .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 520; }

/* ==========================================================================
   Графики
   ========================================================================== */
.chart-panel { position: relative; padding: 10px; border-radius: var(--r-lg); overflow: hidden; }
.chart-panel canvas { width: 100%; height: 440px; display: block; }
.chart-panel.small { margin-top: 14px; }
.chart-panel.small canvas { height: 140px; }

/* --- легендата под графиката ---
   Без нея всяка линия е загадка, а начинаещият не пита — просто спира да
   гледа. Затова е винаги видима, не в подсказка при посочване. */
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 10px 4px 2px; font-size: 12px; color: var(--muted);
}
.chart-legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend .sw { display: inline-block; flex: none; }
.chart-legend .sw.line { width: 16px; height: 0; border-top: 2px dashed currentColor; }
.chart-legend .sw.line.entry  { color: #C9CCDA; }
.chart-legend .sw.line.stop   { color: var(--down); }
.chart-legend .sw.line.target { color: var(--up); }
.chart-legend .sw.vol {
  width: 10px; height: 11px; border-radius: 2px;
  background: color-mix(in srgb, var(--up) 34%, transparent);
}
.chart-legend .sw.tri {
  width: 0; height: 0; border-left: 5px solid transparent;
  border-right: 5px solid transparent; border-bottom: 9px solid currentColor;
}
.chart-legend .sw.tri.ok  { color: var(--up); }
.chart-legend .sw.tri.bad { color: var(--down); }

/* --- прочитът с думи --- */
.read-panel { margin-top: 14px; padding: 18px 20px; }
.read-title {
  margin: 0 0 14px; font-size: 14px; font-weight: 700;
  letter-spacing: .02em; color: var(--text);
}
.read-row {
  padding: 11px 0 12px; border-top: 1px solid var(--line);
  border-left: 2px solid transparent; padding-left: 12px; margin-left: -12px;
}
.read-row:first-of-type { border-top: 0; padding-top: 2px; }
.read-row.ok  { border-left-color: color-mix(in srgb, var(--up) 60%, transparent); }
.read-row.bad { border-left-color: color-mix(in srgb, var(--down) 60%, transparent); }
.read-k { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.read-label { font-weight: 640; font-size: 13px; color: var(--text); }
.read-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--muted);
}
.read-row.ok  .read-value { color: var(--up); }
.read-row.bad .read-value { color: var(--down); }
.read-text { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.read-foot {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.65; color: var(--faint);
}

/* --- планът в дясната лента --- */
.plan-verdict {
  font-weight: 800; font-size: 20px; letter-spacing: .04em;
  margin-bottom: 10px; color: var(--muted);
}
.plan-verdict.ok  { color: var(--up); }
.plan-verdict.bad { color: var(--down); }
#chartPlan .rail-row .v.up   { color: var(--up); }
#chartPlan .rail-row .v.down { color: var(--down); }
.crosshair-info {
  position: absolute; top: 16px; left: 18px; z-index: 3;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; line-height: 1.65; color: var(--text-2);
  pointer-events: none;
  background: rgba(11, 13, 21, .72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.crosshair-info:empty { display: none; }

/* ==========================================================================
   Таблици
   ========================================================================== */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-weight: 560; color: var(--faint);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  position: sticky; top: 0; background: rgba(10, 12, 19, .55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
td {
  padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .045);
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.8px;
}
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .14s; }
tbody tr:hover td { background: rgba(255, 255, 255, .04); }
td.txt { font-family: var(--font); }

/* ==========================================================================
   Показатели
   ========================================================================== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { border-radius: var(--r-lg); padding: 15px 17px; }
.stat-label { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 560; }
.stat-value {
  font-size: 24px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  margin-top: 6px; font-weight: 620; letter-spacing: -.03em;
}
.stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* ==========================================================================
   Пояснения
   ========================================================================== */
.callout {
  position: relative;
  background: rgba(126, 123, 255, .07);
  border: 1px solid rgba(126, 123, 255, .16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 14px 17px 14px 19px; border-radius: var(--r);
  margin-bottom: 16px; font-size: 13px; color: var(--text-2); line-height: 1.65;
}
.callout::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--accent);
}
.callout.warn { background: rgba(255, 159, 10, .07); border-color: rgba(255, 159, 10, .18); }
.callout.warn::before { background: var(--warn); }
.callout.bad  { background: rgba(255, 69, 58, .07); border-color: rgba(255, 69, 58, .18); }
.callout.bad::before { background: var(--down); }
.callout strong { color: var(--text); font-weight: 600; }
.callout em { color: var(--accent); font-style: normal; font-weight: 560; }

.verdict {
  padding: 13px 16px; border-radius: var(--r); margin: 14px 0;
  font-size: 13.5px; border: 1px solid transparent;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.verdict.good { background: var(--up-dim);   color: #93E7AC; border-color: rgba(48, 209, 88, .22); }
.verdict.mid  { background: var(--warn-dim); color: #FFD08A; border-color: rgba(255, 159, 10, .22); }
.verdict.bad  { background: var(--down-dim); color: #FFA9A2; border-color: rgba(255, 69, 58, .22); }

.empty, .loading { color: var(--muted); font-size: 13px; padding: 30px; text-align: center; }
/* Обяснението защо е празно — по-тихо от самото „няма нищо", но четимо. */
/* Ред под прага: показан, за да се вижда колко е далеч, но видимо по-тих. */
tbody tr.dim td { opacity: .62; }
.panel .hint {
  margin: 10px 2px 2px; font-size: 12px; line-height: 1.55;
  color: var(--muted); opacity: .8;
}
.empty .hint {
  margin: 8px auto 0; max-width: 62ch; font-size: 12px; line-height: 1.55;
  color: var(--muted-2, var(--muted)); opacity: .82;
}
.loading::after {
  content: ""; display: inline-block; vertical-align: -2px; margin-left: 9px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .16); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bar { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ==========================================================================
   Подтабове — сегментен контрол
   ========================================================================== */
.subtabs {
  display: inline-flex; gap: 3px; margin-bottom: 18px; padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  background: none; border: 0; color: var(--muted);
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  font: 500 13px/1 var(--font); white-space: nowrap;
  transition: color .18s, background .18s, transform .18s cubic-bezier(.32, .72, 0, 1);
}
.subtab:hover { color: var(--text-2); }
.subtab:active { transform: scale(.96); }
.subtab.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 10px rgba(0, 0, 0, .3);
}
.subview { display: none; }
.subview.active { display: block; animation: rise .3s cubic-bezier(.32, .72, 0, 1); }

/* ==========================================================================
   Дребни елементи
   ========================================================================== */
.flags { display: flex; flex-wrap: wrap; gap: 5px; }
.flag {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--warn-dim); color: var(--warn); white-space: nowrap;
  border: 1px solid rgba(255, 159, 10, .22);
}
.flag.clear { background: var(--up-dim); color: var(--up); border-color: rgba(48, 209, 88, .22); }

.src-card { border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 12px; }
.src-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.src-head b { font-size: 14.5px; letter-spacing: -.02em; }

code {
  font-family: var(--code); font-size: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 6px; color: var(--text-2);
}

/* ==========================================================================
   Известие
   ========================================================================== */
.toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(90px) scale(.94);
  padding: 13px 22px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; z-index: 200; max-width: 82vw;
  opacity: 0; pointer-events: none;
  transition: opacity .3s cubic-bezier(.32, .72, 0, 1),
              transform .38s cubic-bezier(.32, .72, 0, 1);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast.err { border-color: rgba(255, 69, 58, .4); color: #FFA9A2; }
.toast.ok  { border-color: rgba(48, 209, 88, .4); color: #93E7AC; }

/* ==========================================================================
   Останало
   ========================================================================== */
.kill-banner {
  background: rgba(255, 69, 58, .13);
  border: 1px solid rgba(255, 69, 58, .32);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 14px 18px; border-radius: var(--r); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.imp-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; font-size: 12px; }
.imp-row .name { width: 134px; font-family: var(--mono); color: var(--muted); }
.imp-row .bar { flex: 1; margin: 0; }
.imp-row .val {
  width: 56px; text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; color: var(--muted);
}

/* Долна лента със състояние — като лентата „Online" на Hyperliquid. */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 7px 22px; font-size: 11.5px; color: var(--faint);
  background: rgba(10, 12, 19, .62);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--border);
}
.statusbar a { color: var(--faint); text-decoration: none; }
.statusbar a:hover { color: var(--text-2); }
.statusbar .live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px; border-radius: 999px;
  background: var(--up-dim); color: var(--up);
  border: 1px solid rgba(48, 209, 88, .24); font-weight: 550;
}
.statusbar .live.off {
  background: var(--warn-dim); color: var(--warn);
  border-color: rgba(255, 159, 10, .24);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 860px) {
  .topbar { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .tabs { order: 3; width: 100%; flex: none; }
  main { padding: 16px 14px 76px; }
  .market-sym { border-right: 0; padding-right: 0; }
}

/* Връзка, оформена като бутон — без подчертаване и с центрирано съдържание. */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
a.btn.wide { display: flex; }
.topnav .brand .logo { width: 26px; height: 26px; font-size: 12px; }

/* ==========================================================================
   Меню за езика — глобус, като на борсовите платформи
   ========================================================================== */
.lang-menu { position: relative; }
.lang-menu.floating { position: fixed; top: 20px; right: 22px; z-index: 80; }

.lang-btn {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border); color: var(--text-2);
  border-radius: 999px; padding: 6px 13px 6px 11px; cursor: pointer;
  font: 560 12px/1 var(--font); letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .16s, color .16s, transform .16s cubic-bezier(.32, .72, 0, 1);
}
.lang-btn:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.lang-btn:active { transform: scale(.95); }
.lang-btn svg { flex: none; opacity: .85; }

.lang-drop {
  position: absolute; right: 0; top: 42px; min-width: 168px;
  padding: 7px; border-radius: var(--r); display: none; z-index: 200;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--rim), var(--shadow-lg);
}
.lang-drop.open { display: block; animation: rise .22s cubic-bezier(.32, .72, 0, 1); }
.lang-drop button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; gap: 10px;
  padding: 9px 12px; border-radius: 9px; font: 13px var(--font);
  color: var(--text); background: none; border: 0; cursor: pointer;
  transition: background .14s;
}
.lang-drop button:hover { background: rgba(255, 255, 255, .08); }
.lang-drop button.current { color: var(--accent); font-weight: 560; }
.lang-drop button.current::after { content: "✓"; font-size: 12px; }
@supports (corner-shape: squircle) {
  .lang-btn, .lang-drop { corner-shape: squircle; }
}

/* Бележката от езиковия модел стои под своя сигнал, не в отделна колона. */
.ai-row td {
  background: rgba(126, 123, 255, .05);
  color: var(--text-2); font-size: 12.5px; line-height: 1.6;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ai-row .pill { margin-right: 8px; vertical-align: 1px; }

/* Звездичка за следене — в първата колона на списъка с пазари. */
.star {
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-size: 15px; line-height: 1; color: var(--faint);
  transition: color .16s, transform .16s cubic-bezier(.32, .72, 0, 1);
}
.star:hover { color: var(--text-2); transform: scale(1.15); }
.star.on { color: var(--warn); }

/* Прагът на рентабилност е предупреждение, не неутрално число. */
.stat-value.warn-text { color: var(--warn); }

/* ==========================================================================
   Обяснения (?) и диалози
   ========================================================================== */

/* Малкото (?) стои до думата, а не вместо нея: който знае термина, изобщо
   не го забелязва; който не знае, го намира точно там, където се е запитал. */
.qmark {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; padding: 0; margin-left: 5px;
  vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, .06); color: var(--muted);
  font: 600 10.5px/1 var(--font); cursor: pointer;
  transition: color .15s, background .15s, transform .15s;
}
.qmark:hover { color: var(--text); background: rgba(255, 255, 255, .14); }
.qmark:active { transform: scale(.9); }

.infopop {
  position: fixed; z-index: 200;
  padding: 13px 15px; border-radius: var(--r);
  background: rgba(18, 20, 30, .92);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--rim);
  opacity: 0; transform: translateY(-4px) scale(.98);
  transition: opacity .16s cubic-bezier(.32, .72, 0, 1),
              transform .16s cubic-bezier(.32, .72, 0, 1);
}
.infopop.show { opacity: 1; transform: none; }
.infopop-title { font-weight: 620; font-size: 13px; margin-bottom: 5px; }
.infopop-body { font-size: 12.5px; line-height: 1.6; color: var(--text-2); }

/* Собствен диалог вместо браузърния confirm(): текстът му е в страницата,
   значи се превежда, и не заключва цялото приложение. */
.modal-back {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(4, 5, 9, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .16s ease;
}
.modal-back.show { opacity: 1; }
.modal {
  width: min(420px, 100%);
  padding: 22px 22px 18px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)), var(--ink);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--rim);
  transform: scale(.96); transition: transform .18s cubic-bezier(.32, .72, 0, 1);
}
.modal-back.show .modal { transform: none; }
.modal-title { font-size: 16px; font-weight: 640; letter-spacing: -.02em; }
.modal-text { margin: 9px 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.modal-buttons { display: flex; gap: 9px; justify-content: flex-end; }
@supports (corner-shape: squircle) { .modal, .infopop { corner-shape: squircle; } }

/* ==========================================================================
   „Днес" — картите за действие
   ========================================================================== */
.today-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 4px 0 14px;
}
.today-title {
  margin: 0; font-size: 26px; font-weight: 680; letter-spacing: -.03em;
}
.today-sub { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
.today-actions { display: flex; gap: 9px; align-items: center; }
.today-actions b { color: var(--text); font-weight: 620; }

.tcards { display: grid; gap: 14px; }
@media (min-width: 1180px) { .tcards { grid-template-columns: 1fr 1fr; } }

.tcard {
  padding: 18px 20px 15px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--rim), var(--shadow);
}
.tcard.ok  { border-color: rgba(48, 209, 88, .22); }
.tcard.bad { border-color: rgba(255, 69, 58, .22); }
.tcard.waiting { opacity: .78; }
@supports (corner-shape: squircle) { .tcard { corner-shape: squircle; } }

.tcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.tcard-name b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.tcard-name .muted { margin-left: 8px; font-size: 13px; }

.tcard-verdict { text-align: right; }
.verdict-word {
  display: block; font-size: 19px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted);
}
.tcard-verdict.ok  .verdict-word { color: var(--up); }
.tcard-verdict.bad .verdict-word { color: var(--down); }
.verdict-strength { font-size: 11.5px; color: var(--muted); }
.dots { letter-spacing: 1px; margin-right: 3px; }

/* Планът: четири числа, всяко с етикет на човешки език. */
.tcard-plan {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.plan-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; background: rgba(12, 14, 22, .55);
}
.plan-label { font-size: 11.5px; color: var(--muted); }
.plan-value { font: 600 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.plan-value small { margin-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.plan-item.bad-side  .plan-value { color: #FFB3AD; }
.plan-item.good-side .plan-value { color: #8CE8A6; }

/* Изходът в пари — това е числото, което хората всъщност разбират. */
.tcard-outcome {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin: 12px 0 10px;
}
.outcome {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
}
.outcome b { font: 600 15px/1.2 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.outcome.bad  { background: var(--down-dim); border-color: rgba(255, 69, 58, .2); }
.outcome.bad b  { color: #FFB3AD; }
.outcome.good { background: var(--up-dim); border-color: rgba(48, 209, 88, .2); }
.outcome.good b { color: #8CE8A6; }

.tcard-why { margin: 4px 0 12px; }
.tcard-why p {
  margin: 0 0 6px; padding-left: 15px; position: relative;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.tcard-why p::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.tcard-why .why-good::before { background: var(--up); }
.tcard-why .why-warn::before { background: var(--warn); }
.tcard-why .why-warn { color: var(--muted); }

.tcard-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tcard-venue { margin-left: auto; font-size: 11.5px; }

/* Поле в диалог */
.modal-field { position: relative; display: flex; align-items: center; }
.modal-field .input { width: 100%; padding-right: 34px; font-size: 16px; }
.modal-suffix { position: absolute; right: 13px; color: var(--muted); font-size: 13px; }
.modal-hint { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

/* Чакащите монети: присъстват, но не заемат мястото на действията. */
.waiting-box {
  border: 1px solid var(--border); border-radius: var(--r);
  background: rgba(255, 255, 255, .03);
}
.waiting-box > summary {
  padding: 12px 16px; cursor: pointer; font-size: 13px; color: var(--text-2);
  list-style: none;
}
.waiting-box > summary::-webkit-details-marker { display: none; }
.waiting-box > summary::before {
  content: "›"; display: inline-block; margin-right: 9px;
  transition: transform .18s cubic-bezier(.32, .72, 0, 1); color: var(--muted);
}
.waiting-box[open] > summary::before { transform: rotate(90deg); }
.waiting-list { padding: 0 16px 8px; }
.waitrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.waitrow b { min-width: 96px; font-size: 13px; }
.waitrow-why { flex: 1; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.btn.small { padding: 5px 11px; font-size: 12px; }
.outcome span { display: block; }

/* Инструкция, която се изпълнява с ръце, се чете като списък, не като абзац. */
.modal-steps {
  margin: 4px 0 18px; padding-left: 22px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-2);
}
.modal-steps li { margin-bottom: 10px; }
.modal-steps li::marker { color: var(--accent); font-weight: 640; }

/* ==========================================================================
   Живи цени
   ========================================================================== */

/* Светят ЦИФРИТЕ, не квадрат около тях: цветът скача мигновено и се връща
   плавно към собствения цвят на числото, какъвто и да е той. Затова е
   преход, а не анимация — анимацията би трябвало да знае предварително към
   кой цвят се връща, а той е различен в таблица, в карта и в заглавие. */
[data-live-price] { transition: color .65s cubic-bezier(.32, .72, 0, 1); }
[data-live-price].tick-up,
[data-live-price].tick-down { transition: none; }
[data-live-price].tick-up   { color: var(--up); }
[data-live-price].tick-down { color: var(--down); }

.live-status { gap: 7px; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--faint);
  transition: background .2s, box-shadow .2s;
}
.live-status.live .live-dot {
  background: var(--up); box-shadow: 0 0 0 3px rgba(48, 209, 88, .18);
  animation: live-pulse 2.4s ease-in-out infinite;
}
.live-status.connecting .live-dot { background: var(--accent-2); }
.live-status.polling .live-dot { background: var(--warn); }
.live-status.off { display: none; }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(48, 209, 88, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(48, 209, 88, .05); }
}

/* Живият ред в картата: цената сега и дали планът още важи. */
.tcard-live {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
  font-size: 12.5px;
}
.tcard-live b { font: 600 15px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.live-verdict { margin-left: auto; font-size: 12px; color: var(--muted); }
.live-verdict.good { color: var(--up); }
.live-verdict.warn { color: var(--warn); }
.live-verdict.bad  { color: var(--down); }

/* Горната лента се пренаселва: табовете са по-важни от думите до точката.
   Под 1500px остава само точката, а обяснението е в подсказката ѝ. */
@media (max-width: 1500px) {
  .live-status #liveText { display: none; }
  .live-status { padding: 6px 10px; }
}

.modal-select {
  width: auto; min-width: 92px; margin-left: 8px;
  font-size: 15px; padding-right: 30px;
}
.live-approx { font-size: 12px; color: var(--muted); }

/* Лентата за пробния период: видима, но не крещяща — освен в последния ден. */
.trial-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 22px; font-size: 13px; color: var(--text-2);
  background: rgba(126, 123, 255, .10);
  border-bottom: 1px solid rgba(126, 123, 255, .22);
}
.trial-bar b { color: var(--text); font-weight: 600; }
.trial-bar.soon { background: rgba(255, 159, 10, .10); border-bottom-color: rgba(255, 159, 10, .26); }
.trial-bar.over { background: rgba(255, 69, 58, .09); border-bottom-color: rgba(255, 69, 58, .24); }

/* ==========================================================================
   Телефон
   ==========================================================================
   Правилата тук стоят НАКРАЯ нарочно: така не спорят по специфичност с
   нищо по-горе и се чете на едно място какво точно се променя на малък
   екран. Три решения носят почти цялата разлика:

     1. Горната лента се свива до един ред плюс табовете. При три реда
        първият екран на телефона беше на една четвърт зает от лента,
        която не казва нищо.
     2. Полетата стават 16 пиксела. Под шестнайсет iOS увеличава цялата
        страница при докосване на поле и после не я връща — изглежда като
        счупен сайт, а е настройка на браузъра.
     3. Таблицата с пазарите крие второстепенните колони, вместо да се
        плъзга настрани. Хоризонтално плъзгане вътре във вертикално
        плъзгане е най-мразеният жест на телефона.
   ========================================================================== */

@media (max-width: 720px) {
  /* Прочитът е текст и се чете добре и на тесен екран — само диша по-малко.
     Легендата се пренася на редове, вместо да се плъзга настрани. */
  .read-panel { padding: 15px 15px 17px; }
  .read-text { font-size: 14px; }
  .chart-legend { gap: 5px 14px; font-size: 12px; }


  /* ---------- горна лента ---------- */
  .topbar {
    height: auto; padding: 8px 12px; gap: 8px;
    flex-wrap: wrap; row-gap: 8px;
  }
  .brand span:not(.logo) { font-size: 15px; }
  .brand .logo { width: 26px; height: 26px; }

  /* Статусът и езикът се свиват до знак: думите им се повтарят другаде. */
  #status span:not(.dot) { display: none; }
  #status { padding: 7px 9px; }
  .live-status #liveText { display: none; }
  .live-status { padding: 7px 9px; }
  .lang-btn #langCode { display: none; }
  .user-btn .pill { display: none; }
  .user-btn #userLabel {
    display: inline-block; max-width: 9ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Табовете заемат целия втори ред и се плъзгат с пръст. */
  .tabs {
    order: 5; width: 100%; margin: 0;
    padding: 3px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .tab {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 15px; font-size: 14px; scroll-snap-align: start;
  }
  .subtab {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 14px; font-size: 13.5px;
  }
  .subtabs { overflow-x: auto; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  /* Звездичката за следене: остава дребна на вид, но с мишена за пръст. */
  .star { position: relative; }
  .star::after { content: ""; position: absolute; inset: -12px; }
  .lang-btn { min-height: 40px; padding: 0 13px; }
  .user-btn { min-height: 40px; }
  /* Въпросчето остава малко — то е знак до дума, не бутон. Затова получава
     невидима мишена около себе си, вместо да порасне и да разбие текста. */
  .qmark { position: relative; }
  .qmark::after {
    content: ""; position: absolute; inset: -11px; border-radius: 50%;
  }
  /* Избледняване вдясно: единственият знак, че има още табове встрани. */
  .tabs-wrap { position: relative; width: 100%; order: 5; }
  .tabs-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    pointer-events: none; border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, rgba(10, 12, 19, 0), rgba(10, 12, 19, .75));
  }
  .tabs-wrap .tabs { width: 100%; margin: 0; }

  .risk-banner { padding: 8px 14px; font-size: 12px; }
  .trial-bar { padding: 10px 14px; font-size: 12.5px; gap: 10px; }

  /* ---------- основно поле ---------- */
  main { padding: 14px 12px 84px; }
  h1, .today-title { font-size: 25px; }
  .today-head { gap: 12px; }
  .today-sub { font-size: 14px; }
  .today-actions { width: 100%; }
  .today-actions .btn { flex: 1; justify-content: center; }
  .section-head { flex-wrap: wrap; gap: 6px; }
  .section-head h2 { font-size: 12px; }

  /* ---------- полета и бутони: пръст, не курсор ---------- */
  .input, select.input, input.input, textarea {
    font-size: 16px;          /* под 16 iOS увеличава страницата */
    min-height: 44px;
  }
  .input.tiny { min-height: 40px; width: 92px; }
  /* По-специфичният селектор иначе задържа 12.5 пиксела и iOS увеличава. */
  .input.compact { font-size: 16px; padding: 8px 30px 8px 12px; }
  .btn { min-height: 44px; padding: 11px 16px; font-size: 14px; }
  .btn.small { min-height: 36px; }
  .toolbar { gap: 8px; }
  .toolbar > .input, .toolbar > select { flex: 1 1 46%; min-width: 0; }
  .toolbar > .btn { flex: 1 1 100%; }
  .qmark { width: 20px; height: 20px; font-size: 12px; }

  /* ---------- картите „Днес" ---------- */
  .tcards { grid-template-columns: 1fr; }
  .tcard { padding: 16px 15px 14px; }
  .tcard-plan { grid-template-columns: 1fr 1fr; }
  .plan-item { padding: 10px 11px; }
  .plan-value { font-size: 15px; }
  .plan-label { font-size: 11px; }
  /* Изходът от сделката е най-важното число — на телефон стои на цял ред. */
  .tcard-outcome { grid-template-columns: 1fr; gap: 7px; }
  .outcome {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    padding: 9px 12px;
  }
  .outcome b { font-size: 16px; }
  .tcard-live { gap: 6px; }
  .live-verdict { margin-left: 0; width: 100%; }
  .tcard-foot .btn { flex: 1 1 auto; }
  .tcard-venue { width: 100%; margin-left: 0; text-align: right; }

  /* ---------- таблици ---------- */
  table { font-size: 13px; }
  th, td { padding: 9px 8px; }

  /* Панелът с таблица се плъзга сам, вместо да бута цялата страница.
     Това е предпазната мрежа: колоните по-долу се крият, за да не се стига
     дотук, но ако някоя таблица порасне, страницата остава здрава. */
  .panel { overflow-x: auto; }

  /* Скенерът: махат се колоните, които се четат от съседните. */
  #scanResult table th:nth-child(2), #scanResult table td:nth-child(2),
  #scanResult table th:nth-child(3), #scanResult table td:nth-child(3) {
    display: none;
  }
  #scanResult table td { white-space: nowrap; }

  /* Пазарите: остават звезда, символ, цена и промяна. Останалото е за
     голям екран — на телефон само пречи. */
  #marketsPanel th:nth-child(2), #marketsPanel td:nth-child(2),   /* номер */
  #marketsPanel th:nth-child(4), #marketsPanel td:nth-child(4),   /* площадка */
  #marketsPanel th:nth-child(8), #marketsPanel td:nth-child(8),   /* ливъридж */
  #marketsPanel th:nth-child(9), #marketsPanel td:nth-child(9),   /* funding */
  #marketsPanel th:nth-child(10), #marketsPanel td:nth-child(10) { /* интерес */
    display: none;
  }
  #marketsPanel td { white-space: nowrap; }

  /* ---------- графика ---------- */
  .market-head { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; }
  .market-sym .name { font-size: 18px; }
  .market-stat .val.big { font-size: 20px; }
  .market-head .spacer { display: none; }
  /* Графиката се гледа с пръст: по-ниска, за да се вижда и рамката под нея. */
  .chart-panel canvas { height: 300px; }
  .chart-panel.small canvas { height: 110px; }

  /* ---------- долна лента ---------- */
  .statusbar {
    gap: 8px; padding: 7px 12px; font-size: 10.5px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .statusbar::-webkit-scrollbar { display: none; }
  /* Режимът е за собственика, не за посетителя — на телефон отпада. */
  .statusbar #barMode { display: none; }
  /* Три от четирите връзки повтарят това, което пише в подвала на правните
     страници. На телефон остава най-важната. */
  .statusbar a:not([href="/risk"]) { display: none; }
  .statusbar a, .statusbar .live { white-space: nowrap; }

  /* ---------- диалози и подсказки ---------- */
  .modal { width: 100%; padding: 20px 18px 16px; }
  .modal-buttons { flex-direction: column-reverse; }
  .modal-buttons .btn { width: 100%; }
  .infopop { max-width: calc(100vw - 24px); }

  /* ---------- планове и правни страници ---------- */
  .plan-cards { grid-template-columns: 1fr; }
  .trial-band { padding: 16px 18px; }
  .trial-band .btn { width: 100%; justify-content: center; }
  .period-switch { width: 100%; }
  .period-switch button { flex: 1; padding: 10px 8px; font-size: 12px; }
  .topnav { padding: 8px 12px; gap: 10px; overflow-x: auto; }
  .page { padding: 20px 14px 60px; }
}

/* Съвсем тесни телефони: 320–360 пиксела. */
@media (max-width: 380px) {
  .tcard-plan { grid-template-columns: 1fr; }
  .plan-item { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .today-title { font-size: 22px; }
  .brand span:not(.logo) { display: none; }
}