/* ============================================================================
   mobile.css — RESPONSIVE & CONDITIONAL LAYER
   All @media / @supports blocks extracted from style.css (document order
   preserved for the cascade). MUST be linked immediately AFTER style.css.
   ============================================================================ */

@media (max-width: 1020px) {
  .lp-hero {
    min-height: 650px;
  }

  .lp-hero h1 {
    font-size: 68px;
  }

  .lp-strip,
  .lp-feature-grid,
  .lp-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-section__head,
  .lp-news {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .lp-nav,
  .lp-strip,
  .lp-section,
  .lp-final,
  .lp-hero__content {
    width: min(100% - 24px, 1160px);
  }

  .lp-nav {
    top: 8px;
    min-height: 58px;
  }

  .lp-brand span:last-child {
    display: none;
  }

  .lp-nav__links {
    display: none;
  }

  .lp-hero {
    min-height: 610px;
    margin-top: -78px;
  }

  .lp-hero__shade {
    background:
      linear-gradient(90deg, rgba(5, 6, 7, 0.97) 0%, rgba(5, 6, 7, 0.72) 100%),
      linear-gradient(0deg, #050607 0%, rgba(5, 6, 7, 0.12) 44%, rgba(5, 6, 7, 0.68) 100%);
  }

  .lp-hero__content {
    padding: 145px 0 58px;
  }

  .lp-hero h1 {
    font-size: 52px;
    line-height: 1;
  }

  .lp-hero__lead {
    font-size: 17px;
  }

  .lp-button {
    width: 100%;
  }

  .lp-button--nav {
    width: auto;
  }

  .lp-strip,
  .lp-feature-grid,
  .lp-flow {
    grid-template-columns: 1fr;
  }

  .lp-strip {
    margin-top: -18px;
  }

  .lp-strip span {
    min-height: 56px;
  }

  .lp-section {
    padding-top: 68px;
  }

  .lp-section h2,
  .lp-news h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .lp-feature {
    min-height: 220px;
  }

  .lp-news {
    gap: 28px;
  }

  .lp-final {
    flex-direction: column;
    align-items: stretch;
    margin-top: 70px;
  }

  .lp-final p {
    font-size: 22px;
  }
}

@media (max-width: 720px) {
  .modal-window--admin {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .modal-grid--admin {
    grid-template-areas:
      "load"
      "system"
      "modules"
      "details"
      "users";
    grid-template-columns: 1fr;
  }

  .admin-panel--users {
    max-height: none;
  }

  .admin-users {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .admin-users-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-user {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-actions {
    width: 100%;
    justify-content: stretch;
  }

  .admin-actions .pill-btn {
    width: 100%;
  }

  .admin-ws-modules,
  .admin-ws-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .topbar-right {
    width: 100%;
    justify-content: space-between;
    margin-right: 0;
  }
  .topbar-limits {
    width: 100%;
    justify-content: space-between;
  }
  .modal-window {
    width: 100%;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 640px) {
  body { overflow: auto; }
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .title-block { width: 100%; }
  .topbar-right {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .topbar-limits {
    width: 100%;
    justify-content: space-between;
  }
  .topbar-buttons {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .volatility-widget {
    width: 100%;
    min-width: 0;
  }
  .volatility-popover {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 24px));
  }
  .volatility-popover__drivers {
    grid-template-columns: 1fr;
  }
  .grid-menu {
    display: none;
  }
  .topbar-buttons .pill-btn { flex: 1 1 52px; }
  .topbar-auth {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 8px;
  }
  .auth-user {
    width: 100%;
    justify-content: space-between;
  }
  .daily-log-grid {
    grid-template-columns: 1fr;
  }
  .daily-log-summary__group {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
  .risk-templates__form {
    grid-template-columns: 1fr;
  }
  .risk-templates__row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .main {
    padding: 10px;
    flex: 0 0 auto;
  }
  .gridwrap {
    padding: 8px;
    flex: 0 0 auto;
    height: auto;
    overflow: visible;
  }
  .grid {
    height: auto;
    grid-template-rows: unset;
    grid-auto-rows: minmax(280px, auto);
  }
  .grid.grid--mobile {
    grid-template-columns: 1fr !important;
  }
  .cell {
    min-height: 280px;
  }
  .status {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .modal-window {
    max-height: calc(100vh - 32px);
    overflow: hidden;
  }
  .modal-body {
    overflow-y: auto;
  }
  .modal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  body.screener-page .topbar {
    gap: 10px;
    padding: 10px 12px;
    flex-wrap: nowrap;
    align-items: center;
  }
  body.screener-page .topbar-right {
    width: auto;
    margin-right: 0;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Цитата под названием съедает 250-400px — на узких ширинах прячем. */
  body.screener-page #appTagline {
    display: none;
  }

  /* После сокрытия цитаты в title-block остаётся только название —
     центрируем его по высоте, чтобы оно не висело у верхнего края. */
  body.screener-page .title-block {
    justify-content: center;
  }

  /* Компактный виджет волатильности: только цветная точка-статус
     (тональность всё ещё передаётся через data-tone → currentColor).
     Заголовок/описание/спарклайн скрыты — полную картину показывает
     попапа по клику. */
  body.screener-page .volatility-widget {
    min-width: 36px;
    width: 36px;
  }
  /* Neutral icon-button shell (matches the other topbar pills) so it reads as
     a status control, not a glowing "record" button. Tone comes through the
     small LED dot only. */
  body.screener-page .volatility-widget__button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--bg-panel-soft) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
  }
  body.screener-page .volatility-widget.is-open .volatility-widget__button {
    border-color: currentColor !important;
  }
  body.screener-page .volatility-widget__summary,
  body.screener-page .volatility-sparkline {
    display: none;
  }
  /* Status LED: crisp dot with a tight tonal halo (no wide blur). */
  body.screener-page .volatility-widget__status {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04), 0 0 6px 1px currentColor;
  }

  /* В компактной версии виджет — 36px, поэтому якорить попап к его
     левому/правому краю некрасиво. Центрируем по экрану через fixed. */
  body.screener-page .volatility-popover {
    position: fixed;
    top: var(--topbar-menu-top, 60px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(6px);
    width: min(460px, calc(100vw - 24px));
    max-height: calc(100vh - var(--topbar-menu-top, 60px) - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.screener-page .volatility-widget.is-open .volatility-popover {
    transform: translateX(-50%) translateY(0);
  }

  /* Селектор режима — триггер сужаем (label с ellipsis), но раскрытое
     меню оставляем нормальной ширины, чтобы названия режимов читались. */
  body.screener-page .mode-select-trigger {
    min-width: 0;
    max-width: 170px;
  }
  body.screener-page .mode-select-trigger__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Меню селектора режима — ширина 280px задана глобально для скринера
     (см. base-правило ниже по файлу), здесь дополнительно гарантируем
     перенос длинных слов без горизонтального скролла. */
  body.screener-page .mode-select-menu {
    overflow-x: hidden;
  }
  body.screener-page .mode-select-option {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  /* Auth-пилюля → кружок с шевроном справа.
     !important нужен потому, что ниже по файлу (line ~19347) есть
     base-правило `body.screener-page .auth-user { padding: ... !important }`
     с равной специфичностью. */
  body.screener-page .auth-user {
    padding: 0 18px 0 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 999px !important;
    gap: 0;
    min-height: 0;
    cursor: pointer;
  }
  body.screener-page .auth-user::after {
    /* Перебиваем display:none из base — на компактной пилюле стрелка нужна.
       Геометрию (top/transform/border) наследуем из base-правила
       (line ~4660) и общего открытого состояния (line ~8447) —
       те же значения уже выверены для широкой пилюли. */
    display: block;
    right: 14px;
    width: 6px;
    height: 6px;
  }
  body.screener-page .auth-meta {
    display: none;
  }
  body.screener-page .auth-avatar,
  body.screener-page .auth-avatar-fallback {
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(130, 180, 240, 0.3);
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  /* Relax the desktop fixed-height app shell so the page scrolls on mobile.
     Layout/topbar/cell sizing for ≤640 lives in the consolidated screener
     block below ("MOBILE OPTIMISATION — SCREENER PAGE"). */
  body.screener-page {
    overflow: auto;
  }

  body.screener-page .main {
    min-height: auto;
  }

  body.screener-page .gridwrap {
    min-height: auto;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .screener-page .topbar-menu__details[open] .topbar-menu__panel {
    position: fixed;
    top: var(--topbar-menu-top, 60px);
    left: 12px;
    right: auto;
    width: min(260px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100vh - var(--topbar-menu-top, 60px) - 12px);
    overflow-y: auto;
    /* Компактная упаковка для мобильной версии */
    padding: 6px;
    gap: 4px;
    min-width: 0;
    border-radius: 12px;
  }

  /* User-card — уменьшаем паддинги, аватар и шрифты */
  .screener-page .topbar-menu__user-card {
    padding: 7px 9px;
    gap: 8px;
    border-radius: 9px;
  }
  .screener-page .topbar-menu__user-pic {
    width: 30px;
    height: 30px;
  }
  .screener-page .topbar-menu__user-name {
    font-size: 12px;
  }
  .screener-page .topbar-menu__user-tier {
    font-size: 10px;
  }

  /* Action-кнопки (Отображение / Уведомления) — ниже и компактнее */
  .screener-page .topbar-menu__actions {
    gap: 4px;
  }
  .screener-page .topbar-menu__icon-btn {
    padding: 8px 4px 6px;
    gap: 4px;
    border-radius: 9px;
  }
  .screener-page .topbar-menu__icon-btn svg {
    width: 16px;
    height: 16px;
  }
  .screener-page .topbar-menu__icon-btn-label {
    font-size: 8px;
  }

  /* Nav-ссылки — компактные строки */
  .screener-page .topbar-menu__nav-link {
    padding: 8px 9px;
    gap: 9px;
    border-radius: 9px;
  }
  .screener-page .topbar-menu__nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .screener-page .topbar-menu__nav-icon svg {
    width: 15px;
    height: 15px;
  }
  .screener-page .topbar-menu__nav-title {
    font-size: 12px;
  }
  .screener-page .topbar-menu__nav-sub {
    font-size: 10px;
  }
  .screener-page .topbar-menu__nav-arrow {
    width: 12px;
    height: 12px;
  }

  /* Кнопка «Выйти из аккаунта» — компактнее */
  .screener-page .topbar-menu__logout {
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 9px;
    margin-top: 2px;
  }
  .screener-page .topbar-menu__logout-icon {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 721px) {
  .trade-diary-page .topbar {
    min-height: 64px;
  }

  .trade-diary-page .topbar-row--limits {
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
  }

  .trade-diary-page .topbar-row--limits > .topbar-limits {
    pointer-events: auto;
    margin: 0;
  }
}

@media (max-width: 1180px) {
  /* Лимиты не переносятся */
  .trade-diary-page .topbar-limits {
    flex-wrap: nowrap;
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  /* Запрещаем перенос строк из глобального max-width:900px правила */
  .trade-diary-page .topbar {
    flex-wrap: nowrap;
    align-items: center;
  }

  .trade-diary-page .recording-widget {
    display: none !important;
  }

  .trade-diary-page .app-sub {
    display: none;
  }

  .trade-diary-page .app-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(140, 170, 220, 0.7);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .trade-diary-page .auth-avatar {
    width: 28px;
    height: 28px;
  }

  .trade-diary-page .topbar-auth #logoutBtn {
    display: none !important;
  }

  .trade-diary-page .auth-name {
    font-size: 11px;
  }

  .trade-diary-page .auth-tier-badge {
    font-size: 9px;
  }
}

@media (min-width: 721px) {
  /* Details-элемент поверх auth-pill; toggle скрыт — открывается через JS */
  .trade-diary-page .topbar-menu {
    display: flex;
    position: absolute;
    right: 14px;
    top: 0;
    width: 0;
    height: 100%;
    overflow: visible;
    z-index: 10;
    margin-left: 0;
  }

  .trade-diary-page .topbar-menu__toggle {
    display: none !important;
  }

  /* Панель: fixed под topbar-ом у правого края */
  .trade-diary-page .topbar-menu__details[open] .topbar-menu__panel {
    position: fixed;
    top: var(--topbar-menu-top, 60px);
    right: 14px;
    left: auto;
  }

  /* Auth-pill кликабелен — через JS открывает details */
  .trade-diary-page .topbar-auth .auth-user {
    cursor: pointer;
  }

  /* «Выйти» из auth скрыт — выход через панель меню */
  .trade-diary-page .topbar-auth #logoutBtn {
    display: none !important;
  }

  /* Позиционирование панели на десктопе */
  .trade-diary-page .topbar-menu__details[open] .topbar-menu__panel {
    position: fixed;
    top: var(--topbar-menu-top, 60px);
    right: 14px;
    left: auto;
  }
}

@media (min-width: 721px) {
  /* Title заполняет левую часть */
  .trade-diary-page .title-block {
    flex: 1;
    min-width: 0;
  }

  /* Лимиты — flex внутри центрирующего оверлея */
  .trade-diary-page .topbar-limits {
    position: static;
    transform: none;
    margin: 0;
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }

  /* Цитаты обрезаются если не влезают */
  .trade-diary-page .app-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
  }
}

@media (max-width: 640px) {
  .trade-diary-page #whoopPulseWidget,
  .trade-diary-page .indicator-toggle--whoop,
  .trade-diary-page .wizard-whoop-prompt {
    display: none;
  }
  .trade-diary-page .topbar {
    gap: 12px;
  }
  .trade-diary-page .topbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .trade-diary-page .topbar-row--primary {
    justify-content: space-between;
    align-items: flex-start;
  }
  .trade-diary-page .topbar-row--limits {
    flex-direction: column;
    align-items: stretch;
  }
  .trade-diary-page .topbar-row--actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .trade-diary-page .title-block {
    flex: 1 1 auto;
  }
  .trade-diary-page .work-timer-widget {
    min-width: 112px;
    justify-content: flex-end;
  }
  .trade-diary-page .topbar-menu {
    display: flex;
    margin-left: 0;
  }
  .trade-diary-page .topbar-limits {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .trade-diary-page .topbar-right {
    display: none;
  }
  .trade-diary-page .topbar-auth {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .trade-row-details__pulse-bar {
    animation: pulse-bar-glow 2s ease-in-out infinite;
  }
}

@media (max-width: 920px) {
  .trade-row-details__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "chart"
      "details";
  }

  .trade-chart {
    min-height: 240px;
  }

  .trade-row-details__field--wide {
    grid-column: 1 / -1;
  }
}

@media print {
  @page {
    size: A4;
    margin: 8mm;
  }

  body {
    background: #fff !important;
    color: #0f172a;
  }

  .topbar,
  .diary-layout,
  .modal,
  .status,
  .column-context-menu {
    display: none !important;
  }

  .trade-print {
    display: block !important;
    padding: 0;
  }

  .trade-print__sheet {
    width: 100%;
    margin: 0;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 8px;
  }

  .trade-print__sheet::before {
    display: none;
  }

  .trade-print__sheet--notes {
    page-break-before: always;
    min-height: 100%;
    padding-top: 4mm;
    gap: 12px;
  }

  .trade-print__header {
    padding-bottom: 6px;
  }

  .trade-print__header h1 {
    font-size: 16px;
  }

  .trade-print__meta {
    font-size: 10px;
  }

  .trade-print__chart {
    min-height: 140px;
  }

  .trade-print__summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    font-size: 10px;
  }

  .trade-print__summary-card {
    padding: 5px 6px;
    box-shadow: none;
    border-color: rgba(148, 163, 184, 0.35);
  }

  .trade-print__summary-grid span {
    font-size: 8px;
  }

  .trade-print__section-title {
    font-size: 11px;
    margin: 0;
  }

  .trade-print__section-divider {
    gap: 4px;
    margin: 6px 0 8px;
  }

  .trade-print__section-line {
    background: rgba(148, 163, 184, 0.6);
  }

  .trade-print__notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }

  .trade-print__note {
    min-height: 48px;
    padding: 0;
    gap: 3px;
  }

  .trade-print__note-label {
    font-size: 8px;
  }

  .trade-print__note-line {
    min-height: 38px;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 7px,
      rgba(148, 163, 184, 0.5) 8px
    );
  }

  .trade-print__note-underline {
    font-size: 8px;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 900px) {
  .trade-diary-page .topbar {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px;
  }

  .trade-diary-page .title-block {
    flex: 1 1 100%;
  }

  .trade-diary-page .topbar-limits {
    order: 3;
    width: 100%;
    margin: 4px 0 0;
    padding-bottom: 4px;
    overflow-x: auto;
  }

  .trade-diary-page .work-timer-widget {
    order: 2;
  }

  .trade-diary-page .topbar-menu {
    order: 2;
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .trade-diary-page .topbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px;
    padding: 0 14px;
  }

  .trade-diary-page .title-block {
    flex: 0 1 auto !important;
    min-width: 0;
  }

  .trade-diary-page .topbar-limits {
    order: 0 !important;
    width: max-content !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
  }

  .trade-diary-page .work-timer-widget {
    order: 0 !important;
  }

  .trade-diary-page .topbar-menu {
    order: 0 !important;
  }

  /* Auth-pill прижимаем вправо */
  .trade-diary-page .topbar-auth {
    margin-left: auto;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-menu__details[open] .topbar-menu__panel,
  .topbar-menu__details[open] .topbar-menu__panel > *,
  .topbar-menu__details[open] .topbar-menu__panel::before {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  /* Перестраиваем шапку в колонку из компактных строк */
  .trade-diary-page .topbar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    background: linear-gradient(180deg, rgba(14, 20, 42, 0.98) 0%, rgba(10, 15, 30, 0.96) 100%);
    border-bottom: 1px solid rgba(103, 137, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  /* Каждая topbar-row становится настоящей строкой */
  .trade-diary-page .topbar-row {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Строка 1: заголовок слева, таймер по центру, меню+аватар справа */
  .trade-diary-page .topbar-row--primary {
    position: relative;
    gap: 8px;
    padding: 8px 14px;
    min-height: 48px;
  }

  .trade-diary-page .title-block {
    flex: 1 1 auto;
    min-width: 0;
  }

  .trade-diary-page .recording-widget {
    display: none !important;
  }

  /* Убираем цитату — экономим место */
  .trade-diary-page .app-sub {
    display: none;
  }

  /* Название мелкое и мутное — таймер главный акцент */
  .trade-diary-page .app-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(120, 150, 210, 0.55);
  }

  /* Таймер выносим выше — по центру primary-ряда (48px высота) */
  .trade-diary-page .topbar-limits .work-timer-widget {
    position: absolute;
    left: 50%;
    top: 24px;
    padding: 3px 10px;
    gap: 0;
    transform: translate(-50%, -50%);
    flex-shrink: 0;
    min-width: 70px;
    z-index: 5;
  }

  .trade-diary-page .topbar-limits .work-timer-widget__time {
    font-size: 11px;
    min-width: 48px;
    line-height: 1.1;
  }

  .trade-diary-page .topbar-limits .work-timer-widget__pause {
    font-size: 10px;
    line-height: 1;
  }

  /* Меню: прозрачный триггер поверх аватара */
  .trade-diary-page .topbar-menu {
    position: absolute;
    top: 0;
    right: 16px;
    height: 48px;
    display: flex;
    align-items: center;
    z-index: 10;
  }

  .trade-diary-page .topbar-menu__toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    gap: 0;
  }

  .trade-diary-page .topbar-menu__toggle:hover,
  .trade-diary-page .topbar-menu__details[open] .topbar-menu__toggle {
    background: transparent !important;
    transform: none;
  }

  /* Скрываем иконку и лейбл — только нативная стрелка видна */
  .trade-diary-page .topbar-menu__icon,
  .trade-diary-page .topbar-menu__label {
    display: none;
  }

  /* Позиционирование панели на мобильной версии */
  .trade-diary-page .topbar-menu__details[open] .topbar-menu__panel {
    position: fixed;
    top: 48px;
    right: 16px;
    left: auto;
    /* Компактная упаковка как в скринере */
    width: min(260px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 6px;
    gap: 4px;
    min-width: 0;
    border-radius: 12px;
  }

  /* User-card — уменьшаем паддинги, аватар и шрифты */
  .trade-diary-page .topbar-menu__user-card {
    padding: 7px 9px;
    gap: 8px;
    border-radius: 9px;
  }
  .trade-diary-page .topbar-menu__user-pic {
    width: 30px;
    height: 30px;
  }
  .trade-diary-page .topbar-menu__user-name {
    font-size: 12px;
  }
  .trade-diary-page .topbar-menu__user-tier {
    font-size: 10px;
  }

  /* Action-кнопки — ниже и компактнее */
  .trade-diary-page .topbar-menu__actions {
    gap: 4px;
  }
  .trade-diary-page .topbar-menu__icon-btn {
    padding: 8px 4px 6px;
    gap: 4px;
    border-radius: 9px;
  }
  .trade-diary-page .topbar-menu__icon-btn svg {
    width: 16px;
    height: 16px;
  }
  .trade-diary-page .topbar-menu__icon-btn-label {
    font-size: 8px;
  }

  /* Nav-ссылки — компактные строки */
  .trade-diary-page .topbar-menu__nav-link {
    padding: 8px 9px;
    gap: 9px;
    border-radius: 9px;
  }
  .trade-diary-page .topbar-menu__nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .trade-diary-page .topbar-menu__nav-icon svg {
    width: 15px;
    height: 15px;
  }
  .trade-diary-page .topbar-menu__nav-title {
    font-size: 12px;
  }
  .trade-diary-page .topbar-menu__nav-sub {
    font-size: 10px;
  }
  .trade-diary-page .topbar-menu__nav-arrow {
    width: 12px;
    height: 12px;
  }

  /* Кнопка «Выйти из аккаунта» — компактнее */
  .trade-diary-page .topbar-menu__logout {
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 9px;
    margin-top: 2px;
  }
  .trade-diary-page .topbar-menu__logout-icon {
    width: 15px;
    height: 15px;
  }

  /* Строка 2: лимиты */
  .trade-diary-page .topbar-row--limits {
    border-top: 1px solid rgba(103, 137, 255, 0.1);
    padding: 8px 14px 10px;
    overflow: hidden;
  }

  .trade-diary-page .topbar-limits {
    order: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    justify-content: center;
    scrollbar-width: none;
  }

  .trade-diary-page .topbar-limits::-webkit-scrollbar {
    display: none;
  }

  .trade-diary-page .daily-limit-card {
    padding: 5px 10px;
    min-width: 62px;
    flex-shrink: 0;
    border-radius: 9px;
    gap: 1px;
  }

  .trade-diary-page .daily-limit-card__label {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
  }

  .trade-diary-page .daily-limit-card__value {
    font-size: 12px;
    font-weight: 600;
  }

  /* Строка 3: вырываем из потока, кладём поверх строки 1 справа */
  .trade-diary-page .topbar-row--actions {
    position: absolute;
    top: 0;
    right: 16px;
    height: 48px; /* высота строки 1 */
    width: auto;
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    pointer-events: none;
  }

  .trade-diary-page .topbar-right {
    display: none;
  }

  .trade-diary-page .topbar-auth {
    pointer-events: auto;
    width: auto;
    justify-content: flex-end;
  }

  /* Аватар-кружок кликабелен, открывает меню как в комп версии */
  .trade-diary-page .auth-user {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    gap: 0;
    pointer-events: auto;
    cursor: pointer;
  }

  .trade-diary-page .auth-meta,
  .trade-diary-page #logoutBtn {
    display: none;
  }

  .trade-diary-page .auth-avatar {
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(130, 180, 240, 0.3);
    flex-shrink: 0;
  }

  /* Строка 1: отступ справа под аватар */
  .trade-diary-page .topbar-row--primary {
    padding-right: calc(34px + 14px + 16px);
  }
}

@media (max-width: 720px) {
  .diary-layout {
    padding: 12px;
    gap: 10px;
  }

  .diary-tabs {
    gap: 8px;
  }

  .diary-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 12px;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 12px 0;
  }

  .panel-body {
    padding: 10px 12px 14px;
  }

  .quick-range-row {
    margin: 10px 0 2px;
    padding: 0 12px;
  }

  .quick-range {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }

  .quick-range::-webkit-scrollbar {
    display: none;
  }

  .quick-range__btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .table-wrap {
    margin: 0;
  }

  .trade-table {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .trade-table tbody {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .trade-table tbody tr {
    width: 100%;
  }

  .trade-table thead {
    display: none;
  }

  .trade-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "symbol pnl_pct"
      "entry_reason exit_reason"
      "qty risk_reward"
      "pnl pnl";
    gap: 0;
    border-radius: 0;
    background: rgba(9, 14, 26, 0.95);
    border: 1px solid rgba(103, 137, 255, 0.2);
    border-left: 3px solid rgba(96, 165, 250, 0.62);
    box-shadow: none;
    overflow: hidden;
    padding: 0;
  }

  .trade-table tbody tr.trade-row--pnl-positive {
    border-color: rgba(103, 137, 255, 0.2);
    border-left-color: rgba(53, 201, 146, 0.78);
  }

  .trade-table tbody tr.trade-row--pnl-negative {
    border-color: rgba(103, 137, 255, 0.2);
    border-left-color: rgba(224, 82, 95, 0.78);
  }

  .trade-table tbody tr.trade-row.is-expanded {
    background: rgba(9, 14, 26, 0.95);
  }

  @media (hover: hover) and (pointer: fine) {
    .trade-table tbody tr:not(.table-empty-row):not(.trade-row-details):hover {
      border-color: rgba(103, 150, 255, 0.6);
      box-shadow: 0 14px 32px rgba(3, 7, 18, 0.55);
    }
  }

  @media (hover: none) {
    .trade-table tbody tr:not(.table-empty-row):not(.trade-row-details):hover {
      background: rgba(9, 14, 26, 0.95);
      border-color: rgba(103, 137, 255, 0.25);
      box-shadow: none;
    }
  }

  .trade-table tbody tr.table-empty-row {
    background: transparent;
    box-shadow: none;
    border: 1px dashed rgba(103, 137, 255, 0.4);
  }

  .trade-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    padding: 0;
    border-right: none;
    border-bottom: none;
    min-width: 0;
  }

  .trade-table td::before {
    content: attr(data-label);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(197, 209, 255, 0.7);
    text-align: left;
  }

  .trade-table tbody tr.table-empty-row td {
    justify-content: center;
    text-align: center;
  }

  .trade-table tbody tr.table-empty-row td::before {
    display: none;
  }

  .trade-table td:last-child {
    border-bottom: none;
  }

  .trade-table td[data-column="symbol"] {
    grid-area: symbol;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    min-width: 0;
    padding: 9px 8px 9px 10px;
    border-bottom: 1px solid rgba(103, 137, 255, 0.12);
  }

  .trade-table td[data-column="symbol"] .trade-row-cell {
    width: 100%;
    min-width: 0;
    padding-right: 0;
  }

  .trade-table td[data-column="entry_reason"] .chip,
  .trade-table td[data-column="exit_reason"] .chip {
    flex-wrap: wrap;
  }
  
  /* Override JS-applied inline widths so the grid can distribute space freely */
  .trade-table td[data-column] {
    width: auto !important;
    min-width: 0 !important;
  }

  /* Hide fields not needed in mobile view — use !important to override JS inline display */
  .trade-table td[data-column="side"],
  .trade-table td[data-column="date"],
  .trade-table td[data-column="connection"],
  .trade-table td[data-column="entry_price"],
  .trade-table td[data-column="exit_price"] {
    display: none !important;
  }

  .trade-row-toggle {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    font-size: 13px;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    transform: none;
  }

  .trade-row-toggle:hover {
    transform: none;
    background: transparent;
  }

  .trade-table tbody tr.trade-row--pnl-positive .trade-row-toggle,
  .trade-table tbody tr.trade-row--pnl-negative .trade-row-toggle {
    box-shadow: none;
  }

  .trade-row-toggle__symbol {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .trade-row-toggle__meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 0;
    text-transform: uppercase;
    letter-spacing: 0;
    color: rgba(197, 209, 255, 0.75);
  }

  .trade-row-toggle__meta::after {
    content: "›";
    font-size: 14px;
    opacity: 0.8;
    transition: transform 0.2s ease;
  }

  .trade-row.is-expanded .trade-row-toggle__meta::after {
    transform: rotate(90deg);
  }

  .trade-table tbody tr.trade-row-details {
    display: none;
    margin-top: -14px; /* отменяет flex gap tbody */
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .trade-table tbody tr.trade-row-details.is-expanded {
    display: block;
  }

  /* Карточка при раскрытии теряет нижние скругления и нижнюю границу */
  .trade-table tbody tr.trade-row.is-expanded {
    border-bottom-right-radius: 0;
    border-bottom: none;
  }

  .trade-row-details td {
    padding: 0;
    border: none;
  }

  .trade-row-details td::before {
    display: none;
  }

  .trade-table td[data-column="pnl"] {
    grid-area: pnl;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 0;
    background: rgba(9, 14, 26, 0.6);
    border-top: 1px solid rgba(103, 137, 255, 0.12);
  }

  .trade-table td[data-column="pnl_pct"] {
    position: static;
    grid-area: pnl_pct;
    align-items: flex-end;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 10px 9px 8px;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(103, 137, 255, 0.12);
  }

  .trade-table td[data-column="qty"] {
    grid-area: qty;
    justify-content: center;
    min-height: 42px;
    padding: 8px 8px 8px 10px;
    border-radius: 0;
    background: transparent;
    border-right: 1px solid rgba(103, 137, 255, 0.08);
    font-size: 13px;
    font-weight: 700;
  }

  .trade-table td[data-column="risk_reward"] {
    grid-area: risk_reward;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    min-height: 42px;
    padding: 8px 10px 8px 8px;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
  }

  .trade-table td[data-column="entry_reason"] {
    grid-area: entry_reason;
    min-height: 44px;
    padding: 8px 8px 8px 10px;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(103, 137, 255, 0.08);
    border-right: 1px solid rgba(103, 137, 255, 0.08);
  }

  .trade-table td[data-column="exit_reason"] {
    grid-area: exit_reason;
    min-height: 44px;
    padding: 8px 10px 8px 8px;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(103, 137, 255, 0.08);
  }

  .trade-table td[data-column="symbol"]::before,
  .trade-table td[data-column="pnl"]::before,
  .trade-table td[data-column="pnl_pct"]::before {
    display: none;
  }

  .trade-row-details__content {
    width: 100%;
    padding: 0;
  }

  /* Переопределяем body.trade-diary-page специфичность */
  body.trade-diary-page .trade-row-details.is-expanded .trade-row-details__content,
  .trade-row-details.is-expanded .trade-row-details__content {
    padding: 0;
    margin-top: 0;
    border-radius: 0 0 12px 0;
    max-height: 1600px;
    background: rgba(9, 14, 26, 0.95);
    border: 1px solid rgba(103, 137, 255, 0.2);
    border-top: none;
    border-left: 1px solid rgba(103, 137, 255, 0.2);
  }
  
  /* Hide "Сделки в рамках позиции" (Trades within position) on mobile */
  .trade-row-details__fills {
    display: none;
  }

  .trade-row-details__section--pulse,
  .trade-row-details__section--summary {
    display: none;
  }

  .trade-row-details__layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "chart"
      "details";
    gap: 0;
  }

  .trade-row-details__grid {
    gap: 12px;
    font-size: 12px;
  }

  .trade-row-details__item {
    gap: 4px;
  }

  .trade-row-details__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(197, 209, 255, 0.7);
  }
  
  .trade-row-details__value {
    font-size: 13px;
    font-weight: 500;
  }

  .trade-row-details__section {
    padding: 12px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .trade-row-details__section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: normal;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .trade-row-details__section-body {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .trade-row-details__section--tags .trade-row-details__section-body {
    grid-template-columns: 1fr;
  }

  .trade-chart {
    min-height: 280px;
    height: min(60vh, 400px);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 2px solid rgba(103, 137, 255, 0.35);
  }

  .trade-table .trade-chart__lw-container table {
    display: table;
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }

  .trade-table .trade-chart__lw-container tbody {
    display: table-row-group;
  }

  .trade-table .trade-chart__lw-container tr {
    display: table-row;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .trade-table .trade-chart__lw-container td {
    display: table-cell;
    padding: 0;
    border: 0;
    min-width: 0;
    text-align: initial;
    vertical-align: middle;
  }

  .trade-table .trade-chart__lw-container td::before {
    display: none;
    content: none;
  }

  .trade-row-details__notes {
    margin-top: 10px;
    padding: 10px;
    gap: 10px;
  }

  .trade-row-details__notes-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .trade-row-details__field textarea {
    min-height: 80px;
  }

  .trade-row-details__meta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .trade-row-details__meta-actions .trade-row-details__notes-status {
    margin-left: 0;
  }

  .trade-row-details__save {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .topbar-menu__toggle {
    padding: 6px 10px;
  }

  .topbar-menu__label {
    display: none;
  }

  .topbar-menu__icon span {
    width: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-diary-section].diary-section-enter {
    animation: none;
  }
}

@media (max-width: 1200px) {
  .analytics-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .analytics-system-trades__days {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  }
}

@media (max-width: 900px) {
  .analytics-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .analytics-system-trades__summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  }
}

@media (max-width: 720px) {
  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .analytics-widget {
    padding: 12px;
  }

  .analytics-widget__controls .btn-icon {
    width: 32px;
    height: 32px;
  }

  .analytics-widget__resize-handle {
    width: 28px;
    height: 28px;
    right: 6px;
    bottom: 6px;
  }

  .analytics-widget[data-widget-type="system-trades"] {
    padding: 12px;
    border-radius: 18px;
  }

  .analytics-widget[data-widget-type="system-trades"] .analytics-widget__header {
    align-items: flex-start;
  }

  .analytics-widget[data-widget-type="system-trades"] .analytics-widget__title {
    font-size: 16px;
  }

  .analytics-widget[data-widget-type="system-trades"] .analytics-widget__controls {
    gap: 6px;
  }

  .analytics-widget[data-widget-type="system-trades"] .analytics-widget__controls .btn-icon {
    width: 30px;
    height: 30px;
  }

  .analytics-widget[data-widget-type="system-trades"] .analytics-widget__body {
    overflow: auto;
  }

  .analytics-system-trades__summary-grid,
  .analytics-system-trades__days {
    grid-template-columns: 1fr;
  }

  .analytics-system-trades__summary-card {
    min-height: 66px;
  }

  .analytics-system-trades__day-card {
    grid-template-columns: minmax(38px, 1fr) 36px minmax(31px, auto);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --warning-text: #fbbf24;
  }
}

@media (max-width: 960px) {
  .workday-summary__overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .custom-alerts__layout {
    grid-template-columns: 1fr;
  }

  .custom-alert-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .trade-diary-page .modal {
    z-index: 240;
    align-items: flex-end;
  }

  .trade-diary-page .modal-window,
  .trade-diary-page .modal-window-wide,
  .trade-diary-page .modal-window--daily-log,
  .trade-diary-page .modal-window--workday-summary,
  .trade-diary-page .modal-window--custom-alert,
  .trade-diary-page .modal-window--break-reminder {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 8px);
    margin: 0;
    border-radius: 18px 18px 0 0;
    padding: 12px;
  }

  .trade-diary-page .modal-body,
  .trade-diary-page .modal-window--workday-summary .modal-body,
  .trade-diary-page .modal-window--daily-log .modal-body {
    max-height: calc(100dvh - 128px);
    padding-top: 6px;
  }

  .trade-diary-page .modal-header {
    align-items: flex-start;
    gap: 8px;
  }

  .trade-diary-page .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .trade-diary-page .modal-footer .btn,
  .trade-diary-page .modal-footer button {
    width: 100%;
  }

  .trade-diary-page .modal-section {
    padding: 12px;
    gap: 10px;
  }

  .trade-diary-page .modal-section__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .trade-diary-page .modal-section__grid,
  .trade-diary-page .modal-section__grid--compact,
  .trade-diary-page .modal-section__grid--inline {
    grid-template-columns: 1fr;
    display: grid;
  }

  .trade-diary-page .modal-grid-visual .modal-section {
    min-width: 0;
    flex-basis: 100%;
  }

  .trade-diary-page .custom-alert {
    min-height: auto;
    padding: 24px 16px;
  }

  .trade-diary-page .custom-alert__title {
    font-size: 24px;
  }

  .trade-diary-page .custom-alert__reason,
  .trade-diary-page .custom-alert__leave {
    font-size: 14px;
  }

  .trade-diary-page .workday-summary__header,
  .trade-diary-page .workday-summary__header-actions,
  .trade-diary-page .workday-summary__section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .trade-diary-page .workday-summary__section,
  .trade-diary-page .workday-summary__section--overview,
  .trade-diary-page .custom-alerts__panel {
    padding: 14px;
  }

  .trade-diary-page .workday-summary__kpis {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ai-coach__section--primary {
    grid-column: span 1;
  }
}

@media (max-width: 960px) {
  .recording-widget {
    position: static;
  }

  .recording-widget__menu,
  .recording-widget__fallback {
    left: auto;
    right: 0;
  }
}

@media (max-width: 768px) {
  .trade-diary-page .modal-window--recording-player {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 8px);
    border-radius: 18px 18px 0 0;
    margin: 0;
  }

  .rp-video {
    max-height: 50vh;
  }
}

@media (max-width: 768px) {
  .journal-week-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1320px) {
  .trade-share {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "header"
      "sidebar"
      "charts";
    min-height: auto;
    align-items: stretch;
    padding: 12px 14px;
    gap: 10px;
  }

  .trade-share__sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: start;
  }

  .trade-share__pnl-card {
    grid-column: 1 / -1;
  }

  .trade-share__right-col {
    align-self: stretch;
  }

  .trade-share__description-card {
    flex: 1;
  }

  .trade-share__charts {
    padding-bottom: 24px;
  }

  .trade-share__chart-grid {
    height: 82vh;
    min-height: 620px;
  }
}

@media (max-width: 768px) {
  .trade-share-page--mobile {
    overflow-x: hidden;
  }

  .trade-share {
    width: 100%;
    padding: 7px;
    gap: 7px;
  }

  .trade-share__header {
    padding: 9px 11px;
    border-radius: 7px;
    gap: 9px;
  }

  .trade-share__brand-info {
    display: none;
  }

  .trade-share__symbol {
    font-size: 16px;
  }

  .trade-share__exchange-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .trade-share__sidebar {
    grid-template-columns: 1fr;
  }

  .trade-share__summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trade-share__tags {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .trade-share__pnl-value {
    font-size: 22px;
  }

  .trade-share__chart-grid {
    height: min(58vh, 460px);
    min-height: 300px;
  }

  .trade-share-page--mobile .trade-share__mobile-timeframes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 5px;
  }

  .trade-share-page--mobile .trade-share__tf-button {
    border: 1px solid var(--ts-border-ctrl);
    background: var(--ts-bg-control);
    color: var(--ts-muted);
    border-radius: 5px;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .trade-share-page--mobile .trade-share__tf-button.is-active {
    background: rgba(75, 159, 234, 0.12);
    color: var(--ts-text);
    border-color: rgba(75, 159, 234, 0.45);
    box-shadow: 0 0 0 1px rgba(75, 159, 234, 0.2) inset;
  }

  .trade-share-page--mobile .trade-share__chart-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .trade-share-page--mobile .week-analysis-chart-cell {
    display: none;
  }

  .trade-share-page--mobile[data-mobile-timeframe="1m"] .week-analysis-chart-cell--1m,
  .trade-share-page--mobile[data-mobile-timeframe="5m"] .week-analysis-chart-cell--5m,
  .trade-share-page--mobile[data-mobile-timeframe="15m"] .week-analysis-chart-cell--15m {
    display: flex;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .trade-share-page--mobile .week-analysis-chart__header {
    top: 5px;
    left: 5px;
    right: 5px;
    padding: 3px 7px;
  }

  .trade-share-page--mobile .week-analysis-chart__ticker {
    font-size: 12px;
  }

  /* Description card is relocated below the chart on mobile (see trade_share.js). */
  .trade-share-page--mobile .trade-share > .trade-share__description-card {
    margin-top: 2px;
  }
}

@media (max-width: 640px) {
  .metascalp-link-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .metascalp-link-row__binding {
    grid-template-columns: 1fr;
  }

  .metascalp-link-row__other-wrap {
    width: 100%;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .metascalp-priority-menu {
    position: static;
    max-width: 100%;
    min-width: 0;
  }

  .metascalp-link-row__binding-field input {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .modal-window--screener-chart {
    width: 98vw;
    max-width: 98vw;
    height: 96vh;
    max-height: 96vh;
  }
}

@media (max-width: 1200px) {
  .week-analysis-drawer {
    width: 100vw;
  }
  
  .week-analysis-drawer__charts {
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .week-analysis-drawer__trades {
    flex: 0 1 20%;
    width: 20%;
    max-width: 20%;
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .week-analysis-drawer__body {
    flex-direction: column;
  }
  
  .week-analysis-drawer__charts {
    flex: 1 1 auto;
  }
  
  .week-analysis-drawer__trades {
    flex: 0 0 200px;
    max-width: none;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }
  
  .week-analysis-chart-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .week-analysis-chart-cell--15m,
  .week-analysis-chart-cell--4h,
  .week-analysis-chart-cell--1m {
    grid-column: 1 / 2;
  }
  
  .week-analysis-chart-cell--15m {
    grid-row: 1 / 2;
  }
  
  .week-analysis-chart-cell--4h {
    grid-row: 2 / 3;
  }
  
  .week-analysis-chart-cell--1m {
    grid-row: 3 / 4;
  }
  
  .week-analysis-indicators-panel {
    right: 1rem;
    width: calc(100% - 2rem);
    max-width: 400px;
  }
}

@media (max-width: 600px) {
  .modal-window--alerts {
    width: 100%;
    max-width: calc(100% - 20px);
  }

  .alerts-section {
    padding: 14px;
  }

  .alert-add-form__fields {
    flex-direction: column;
  }

  .alert-add-form__fields .control {
    min-width: 0;
    width: 100%;
  }

  .alerts-sound-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .alerts-section__head {
    flex-direction: column;
    gap: 10px;
  }

  .alerts-sound-panel {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .alerts-sound-controls .select {
    flex: 1;
    min-width: 0;
  }

  .alerts-empty__title {
    font-size: 17px;
  }

  .alerts-empty__sub {
    font-size: 13px;
  }

  .alerts-bots-grid {
    grid-template-columns: 1fr;
  }

  .alerts-bot-delivery__controls {
    flex-direction: column;
  }

  /* Alert card — mobile layout */
  .alert-card {
    grid-template-columns: 26px 1fr auto;
    row-gap: 8px;
  }

  /* Bot select drops to its own full-width row */
  .alert-card > .alert-bot-select {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  /* Actions stay on the first row, third column */
  .alert-card > .alert-card__actions {
    grid-column: 3;
    grid-row: 1;
  }

  /* Edit panel shifts to third row */
  .alert-card__edit-panel {
    grid-row: 3;
  }

  /* Edit fields wrap to single column */
  .alert-card__edit-row {
    flex-direction: column;
  }

  .alert-edit-field {
    width: 100%;
  }

  .alert-edit-field input,
  .alert-edit-field select {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 980px) {
  .landing-hero,
  .landing-section__header,
  .landing-workflow {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    padding-top: 56px;
  }

  .landing-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-feature-card--wide {
    grid-column: span 1;
  }

  .landing-risk {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .landing-nav,
  .landing-hero,
  .landing-section,
  .landing-workflow,
  .landing-risk {
    width: min(100% - 24px, 1180px);
  }

  .landing-nav {
    border-radius: 24px;
    flex-wrap: wrap;
  }

  .landing-nav__links {
    display: none;
  }

  .landing-login--nav {
    margin-left: auto;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 36px;
  }

  .landing-hero h1 {
    font-size: clamp(42px, 15vw, 64px);
  }

  .landing-hero p,
  .landing-risk p {
    font-size: 16px;
  }

  .landing-terminal-card {
    border-radius: 26px;
  }

  .landing-signal-grid,
  .landing-feature-grid {
    grid-template-columns: 1fr;
  }

  .landing-feature-card {
    min-height: auto;
  }

  .landing-flow div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.lp-page .lp-nav {
    animation: lpFadeDown 520ms ease both;
  }

  body.lp-page .lp-hero__image {
    animation: lpHeroDrift 18s ease-in-out infinite;
    will-change: transform;
  }

  body.lp-page .lp-hero__content > * {
    opacity: 0;
    animation: lpFadeUp 620ms ease both;
  }

  body.lp-page .lp-eyebrow {
    animation-delay: 90ms;
  }

  body.lp-page .lp-hero h1 {
    animation-delay: 180ms;
  }

  body.lp-page .lp-hero__lead {
    animation-delay: 270ms;
  }

  body.lp-page .lp-hero__actions {
    animation-delay: 360ms;
  }

  body.lp-page .lp-hero__microcopy {
    animation-delay: 450ms;
  }

  body.lp-page .lp-button--primary::after {
    animation: lpSweep 3.8s ease-in-out 1.1s infinite;
  }

  body.lp-page .lp-hero__microcopy span::before,
  body.lp-page .lp-strip span::before {
    animation: lpPulse 1.9s ease-in-out infinite;
  }

  body.lp-page .lp-strip span::after {
    animation: lpSweep 4.6s ease-in-out infinite;
  }

  body.lp-page .lp-strip span:nth-child(2)::after {
    animation-delay: 400ms;
  }

  body.lp-page .lp-strip span:nth-child(3)::after {
    animation-delay: 800ms;
  }

  body.lp-page .lp-strip span:nth-child(4)::after {
    animation-delay: 1200ms;
  }

  body.lp-page .lp-strip span:nth-child(5)::after {
    animation-delay: 1600ms;
  }

  body.lp-page .lp-news__visual::after {
    animation: lpScanDown 5.2s ease-in-out infinite;
  }
}

@media (max-width: 900px) {
  body.screener-page {
    --volume-shelf-effective-width: min(var(--volume-shelf-width), calc(100vw - 28px));
  }

  body.screener-page.is-volume-shelf-open .main {
    padding-right: var(--volume-shelf-main-right);
  }

  body.screener-page.is-volume-shelf-open .volume-shelf-toggle {
    transform: translateX(calc((var(--volume-shelf-effective-width) + var(--volume-shelf-join-overlap)) * -1));
  }
}

@media (max-width: 640px) {

  /* ── 1. TOPBAR: compact 2-row layout ──────────────────────────────── */

  body.screener-page .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px !important;
  }

  /* Row 1: brand centered (tagline is hidden on mobile) with thin divider below */
  body.screener-page .title-block {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid rgba(120, 150, 190, 0.09) !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
  }

  /* Row 2: horizontal controls */
  body.screener-page .topbar-right {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 5px !important;
    padding-top: 7px !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }

  /* Compact volatility widget stays in the controls row as a 36px status dot
     (full compact styling lives in the ≤1180 block above). Pin it so it does
     not stretch the nowrap row; sits right after the mode selector. The
     auto right-margin (moved off .mode-picker) splits the row into a left
     cluster [auth · mode · volatility] and a right cluster [actions].
     The mode selector grows to absorb the slack (see below), so the widget
     no longer needs an auto right-margin. */
  body.screener-page .topbar-right .volatility-widget {
    order: 2;
    flex: 0 0 auto !important;
  }

  /* Auth avatar: compact circle, first in row */
  body.screener-page .topbar-auth {
    order: -1;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
  }

  body.screener-page .auth-meta {
    display: none !important;
  }

  body.screener-page .auth-user::after {
    display: none !important;
  }

  body.screener-page .auth-user {
    width: auto !important;
    padding: 3px !important;
    gap: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    min-height: 36px !important;
    min-width: 36px !important;
  }

  /* Auth dropdown: open to the right on mobile */
  body.screener-page .auth-user .auth-user-menu {
    right: auto !important;
    left: 0 !important;
  }

  /* Mode picker grows to fill the slack between the avatar and the action
     icons — no dead space in the middle of the row. */
  body.screener-page .mode-picker {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    order: 1;
  }

  body.screener-page .mode-row {
    width: 100% !important;
  }

  body.screener-page .mode-control-group {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }

  body.screener-page .mode-select-shell {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: none !important;
  }

  /* Dropdown menu: readable fixed width, independent of the compact trigger */
  body.screener-page .mode-select-menu {
    width: 260px !important;
    min-width: 200px !important;
    max-width: calc(100vw - 24px) !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Mode trigger label: single line with ellipsis, fills the widened shell */
  body.screener-page .mode-select-trigger {
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: none !important;
  }

  body.screener-page .mode-select-trigger__label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    min-width: 0 !important;
  }

  /* Tagline: truncate on mobile */
  body.screener-page .app-sub {
    display: none !important;
  }

  /* Icon buttons: compact row */
  body.screener-page .topbar-buttons {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: auto !important;
    justify-content: flex-end !important;
    order: 3;
  }

  body.screener-page #headerCollapseBtn {
    order: 4;
  }

  /* Touch targets */
  body.screener-page .topbar .icon-btn,
  body.screener-page .topbar .pill-btn,
  body.screener-page .mode-add-btn {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* ── 1b. COLLAPSED HEADER on mobile ───────────────────────────────── */

  /* The compact topbar rules above force `max-height: none !important`, which
     beats the non-!important desktop collapse rule — so on mobile hiding the
     header never actually collapsed it. Re-assert the collapse here so the
     topbar folds away and the grid slides up into the freed space (the topbar
     is in normal flow, so collapsing its height pulls .main up). */
  body.screener-page.screener-header-collapsed .topbar {
    min-height: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-12px) !important;
    pointer-events: none !important;
    border-bottom-color: transparent !important;
  }

  /* Keep the floating "show header" button visible and tappable: mobile has no
     hover, so reveal its chrome + chevron unconditionally instead of on :hover. */
  body.screener-page.screener-header-collapsed .header-restore {
    background: var(--screener-bg-control) !important;
    border: 1px solid rgba(130, 180, 240, 0.30) !important;
    color: rgba(240, 247, 255, 0.95) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34) !important;
  }

  body.screener-page.screener-header-collapsed .header-restore > * {
    opacity: 1 !important;
  }

  /* ── 2. GRID: more viewport height, shorter cells ─────────────────── */

  body.screener-page .main {
    padding: 6px !important;
  }

  body.screener-page .gridwrap {
    padding: 6px !important;
  }

  body.screener-page .cell {
    min-height: 220px !important;
  }

  body.screener-page .grid {
    grid-auto-rows: minmax(220px, auto) !important;
  }

  /* ── 3. VOLUME SHELF → bottom sheet ──────────────────────────────── */

  /* Suppress desktop gap-line pseudo-element */
  body.screener-page .volume-shelf-panel::before,
  body.screener-page.is-volume-shelf-open .volume-shelf-panel::before {
    display: none !important;
  }

  /* Drag-handle pill via ::after */
  body.screener-page .volume-shelf-panel::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(120, 150, 190, 0.28);
    pointer-events: none;
    z-index: 2;
  }

  /* Bottom-sheet geometry */
  body.screener-page .volume-shelf-panel {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 68vh !important;
    max-height: 84vh !important;
    min-height: 180px !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(120, 150, 190, 0.22) !important;
    transform: translateY(calc(100% + 20px)) !important;
    padding-top: 24px !important;
    z-index: 98 !important;
  }

  /* Slide up when open */
  body.screener-page.is-volume-shelf-open .volume-shelf-panel {
    transform: translateY(0) !important;
  }

  /* The shelf is a bottom-sheet overlay on mobile, so opening it must NOT
     reflow the chart area. The desktop open-state rules shrink .main/.gridwrap
     to clear a side panel — combined with `.main { transition: padding }` that
     animates the chart's right edge outward. Pin the geometry to the closed
     state (6px padding, normal height, full radius) so opening is a no-op. */
  body.screener-page.is-volume-shelf-open .main {
    padding-right: 6px !important;
    padding-bottom: 6px !important;
  }

  body.screener-page.is-volume-shelf-open .gridwrap {
    padding-right: 6px !important;
    height: auto !important;
    min-height: auto !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }

  /* Dim overlay behind sheet */
  body.screener-page.is-volume-shelf-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 97;
    pointer-events: auto;
  }

  /* Toggle: round FAB at bottom-right, z-index above overlay */
  body.screener-page .volume-shelf-toggle {
    bottom: 22px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    z-index: 99 !important;
    transform: translateX(0) !important;
  }

  body.screener-page .volume-shelf-toggle::before {
    border-radius: 50% !important;
    border: 1px solid rgba(104, 130, 166, 0.30) !important;
  }

  /* Keep toggle visible when shelf open (shows close icon) */
  body.screener-page.is-volume-shelf-open .volume-shelf-toggle {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Hide the floating volume-shelf FAB while a modal is open — it otherwise
     overlaps bottom-sheet modals (e.g. the "Готово" button in Настройки) */
  body.screener-page.is-modal-open .volume-shelf-toggle {
    display: none !important;
  }

  /* Desktop resize handle: hide on mobile */
  body.screener-page .volume-shelf-resize {
    display: none !important;
  }

  /* The bottom-sheet has a fixed height, so the list must scroll on its own —
     otherwise the lower depth/radar rows are clipped and unreachable. */
  body.screener-page .volume-shelf-list {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS Safari auto-zooms the viewport when focusing a field with
     font-size < 16px. Bump the shelf filter inputs to 16px and give them a
     comfortable touch height. */
  body.screener-page .volume-shelf-filters input,
  body.screener-page .volume-shelf-filters select {
    font-size: 16px !important;
    min-height: 34px !important;
  }

  /* ── 4. MODALS: bottom-sheet style ───────────────────────────────── */

  /* Regular modals: anchor to bottom (settings modal opts out — see #modal-display) */
  .modal:not(.modal--screener-chart):not(#modal-admin):not(#modal-modes):not(#modal-display) {
    align-items: flex-end !important;
  }

  .modal:not(.modal--screener-chart):not(#modal-admin):not(#modal-modes):not(#modal-display) .modal-window {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    max-height: 90vh !important;
    padding-top: 22px !important;
  }

  /* Drag handle indicator on bottom-sheet modals */
  .modal:not(.modal--screener-chart):not(#modal-admin):not(#modal-modes):not(#modal-display) .modal-window::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(120, 150, 190, 0.20);
    pointer-events: none;
  }

  /* Full-screen: Modes, Admin, Screener chart — above topbar (z-index 120) */
  .modal--screener-chart,
  #modal-admin,
  #modal-modes {
    z-index: 130 !important;
  }

  #modal-modes .modal-window,
  #modal-admin .modal-window,
  .modal--screener-chart .modal-window--screener-chart {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Screener chart: 3 charts stacked vertically */
  .screener-chart-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
  }

  .screener-chart-cell--15m,
  .screener-chart-cell--4h,
  .screener-chart-cell--1m {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Modal body: ensure scrollability */
  .modal-body {
    overflow-y: auto !important;
  }

  /* ── 5. ALERT CARDS: compact mobile layout ──────────────────────── */

  /* Row 1: [icon] [body grows] [actions]
     Inside body/meta: badges row, then bot-select full-width row */
  .alert-card {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Body: basis 0 so it shares row 1 with icon and actions */
  .alert-card__body {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .alert-card__actions {
    flex: 0 0 auto;
    align-self: center !important;
  }

  /* Meta: wrap so bot-select goes to its own line */
  .alert-card__meta {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }

  /* Bot-select: full-width line inside meta */
  .alert-bot-select {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* ── 6. STATUS: lift above FAB ────────────────────────────────────── */

  body.screener-page .status {
    bottom: 80px !important;
    left: 12px !important;
    right: auto !important;
  }

}

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    body.screener-page .volume-shelf-toggle {
      bottom: calc(22px + env(safe-area-inset-bottom)) !important;
    }

    body.screener-page .volume-shelf-panel {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .modal:not(.modal--screener-chart):not(#modal-admin):not(#modal-modes):not(#modal-display) .modal-window {
      padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    body.screener-page .status {
      bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }
}

@media (max-width: 1180px) {
  .mentorship-grid,
  .mentorship-review-workspace,
  .mentorship-review-actions,
  .mentorship-settings,
  .mentorship-homework-layout {
    grid-template-columns: 1fr;
  }

  .mentor-analytics-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mentor-analytics-toolbar__periods,
  .mentor-analytics-toolbar__actions {
    justify-content: flex-start;
  }

  .mentor-analytics-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mentorship-charts {
    grid-template-columns: 1fr;
  }

  .mentorship-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mentorship-charts--analysis-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(240px, auto));
    min-height: 0;
  }

  .mentorship-charts--analysis-grid [data-review-chart="15m"],
  .mentorship-charts--analysis-grid [data-review-chart="4h"],
  .mentorship-charts--analysis-grid [data-review-chart="1m"] {
    grid-column: 1 / 2;
  }

  .mentorship-charts--analysis-grid [data-review-chart="15m"] {
    grid-row: 1 / 2;
  }

  .mentorship-charts--analysis-grid [data-review-chart="4h"] {
    grid-row: 2 / 3;
  }

  .mentorship-charts--analysis-grid [data-review-chart="1m"] {
    grid-row: 3 / 4;
  }

  .mentorship-trade-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .mentorship-stats-grid,
  .mentorship-overview {
    grid-template-columns: 1fr;
  }

  .mentor-analytics-grid {
    grid-template-columns: 1fr;
  }

  .mentor-analytics-grid .analytics-widget {
    grid-column: 1 / -1 !important;
  }

  .mentor-attention-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mentor-analytics-kpi-strip,
  .mentor-correlation-grid,
  .mentor-system-summary {
    grid-template-columns: 1fr;
  }

  .mentor-metric-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mentor-metric-row__track {
    grid-column: 1 / -1;
  }

  .mentor-analytics-trade-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mentor-analytics-trade-row span:nth-child(3),
  .mentor-analytics-trade-row mark {
    justify-self: start;
  }

  .mentorship-student-tabs {
    gap: 8px;
  }

  .mentorship-chart__toolbar {
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  /* Centered dialog with a FIXED height so switching tabs never changes the
     modal size (#modal-display opts out of the global bottom-sheet rule).
     Brand + tab bar on top, scrollable panel, sticky footer. */
  .modal-window--display {
    flex-direction: column;
    width: calc(100vw - 24px);
    max-width: 460px;
    height: 86vh;
    max-height: 86vh;
    border-radius: 16px;
    padding: 6px 0 0;
  }

  .dpc-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 12px 10px;
    gap: 10px;
  }

  /* Brand row carries the close button on the right; the standalone close bar
     in the main area is removed so we don't waste a whole row on it. */
  .dpc-sidebar__brand {
    padding: 0 0 10px;
    margin-bottom: 0;
    justify-content: flex-start;
  }

  /* Let the panel scroll instead of forcing the sheet taller than the viewport */
  .modal-window--display .dpc-main {
    min-height: 0;
  }

  .modal-window--display .dpc-main__bar {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 12px 0;
    z-index: 3;
  }

  .dpc-close {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }

  /* Tab bar: equal-width, horizontally scrollable if it ever overflows */
  .dpc-nav {
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dpc-nav::-webkit-scrollbar {
    display: none;
  }
  .dpc-nav-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    padding: 8px 4px;
  }
  .dpc-nav-item span {
    white-space: nowrap;
  }

  /* Panels: tighter side padding, scroll within the fixed-height dialog */
  .dpc-panel {
    padding: 16px 16px 0;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  /* Larger touch targets on rows and controls */
  .dpc-row,
  .dpc-row--pair {
    padding: 14px 0;
  }
  .dpc-row--slider {
    padding: 14px 0;
  }
  .dpc-row__label {
    font-size: 14px;
  }
  .dpc-select {
    font-size: 16px; /* ≥16px avoids iOS focus-zoom */
    padding: 8px 12px;
  }

  /* Bigger toggle switch for thumbs */
  .dpc-switch__track {
    width: 46px;
    height: 28px;
    border-radius: 14px;
  }
  .dpc-switch__track::after {
    width: 22px;
    height: 22px;
  }
  .dpc-switch input:checked + .dpc-switch__track::after {
    transform: translateX(18px);
  }

  /* Taller slider thumb hit area */
  .dpc-slider {
    height: 6px;
  }

  /* Number/text inputs inside the indicator editor: avoid iOS zoom */
  .dpc-panel--indicators .indicator-editor__grid input[type="number"],
  .dpc-panel--indicators .indicator-editor__grid input[type="text"] {
    font-size: 16px;
  }

  /* Sticky, full-width primary action */
  .dpc-footer {
    padding: 12px 16px;
    justify-content: stretch;
    background: #131720;
  }
  .dpc-apply-btn {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    border-radius: 10px;
  }
}