/**
 * Dashboard responsive overrides
 */

/* Mobile menu — icon only (no blue CTA chrome); 3 bars animate to X when drawer opens */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 201;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none !important;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease, opacity 0.2s ease;
}
.mobile-menu-btn-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 22px;
  height: 16px;
  position: relative;
}
.mobile-menu-btn-line {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}
.dashboard-layout.sidebar-open .mobile-menu-btn .mobile-menu-btn-line:nth-child(1) {
  transform: translateY(7.25px) rotate(45deg);
}
.dashboard-layout.sidebar-open .mobile-menu-btn .mobile-menu-btn-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.dashboard-layout.sidebar-open .mobile-menu-btn .mobile-menu-btn-line:nth-child(3) {
  transform: translateY(-7.25px) rotate(-45deg);
}
.mobile-menu-btn:hover {
  color: #ffffff;
  background: transparent !important;
  box-shadow: none !important;
}
.mobile-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) !important;
  border-radius: 4px;
}
.mobile-menu-btn:active {
  opacity: 0.85;
}

/* Mobile header bar (wrapper for burger) — hidden by default, shown in @media 480px */
.dashboard-mobile-header {
  display: none;
}

/* Backdrop overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
}
@media (max-width: 1024px) {
  /* Tablet: 12-col → single column, left/right full width */
  .dashboard-columns {
    grid-template-columns: 1fr;
    gap: var(--dash-gap);
  }
  .dashboard-left {
    grid-column: 1 / -1;
  }
  .dashboard-right {
    grid-column: 1 / -1;
    max-height: none;
    position: relative;
  }
  .dashboard-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    align-items: stretch; /* one row height = tallest card; all cards match */
  }
  /* Same fixed band as Markets .view-tab @ max-width 1024 (min-height 44px) */
  .dashboard-kpi-card {
    box-sizing: border-box;
    padding: 5px 6px;
    height: var(--dash-kpi-mobile-height, 44px);
    min-height: var(--dash-kpi-mobile-height, 44px);
    max-height: var(--dash-kpi-mobile-height, 44px);
    align-self: stretch;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .dashboard-kpi-card .kpi-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
  }
  .dashboard-kpi-card .kpi-value {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
  }
  .movers-root {
    gap: var(--dash-gap);
  }
  .movers-section-card {
    padding: var(--dash-pad-sm) var(--dash-pad) var(--dash-pad);
  }
  .live-prices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dash-gap-sm);
  }
  .live-price-card {
    padding: 12px 14px;
  }
  .live-price-card-chart {
    height: 28px;
  }
  .connections-wrap {
    margin-bottom: 0;
  }
  .connections-card {
    padding: var(--dash-pad) var(--dash-pad);
  }
  .connections-header {
    margin-bottom: var(--dash-gap-sm);
  }
  .connections-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dash-gap-sm);
  }
  .connection-card {
    padding: 14px 16px;
    gap: 10px;
  }
  .connection-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .connection-initial {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    gap: 14px;
  }
  /* Collapsed rail: no logo — give nav more vertical room */
  body.dashboard-page {
    --dash-sidebar-logo-chrome: 12px;
    --dash-sidebar-footer-chrome: 220px;
  }
  .dashboard-sidebar {
    width: 56px;
    min-width: 56px;
    padding: 0;
  }
  .dashboard-sidebar-logo {
    display: none;
  }
  .dashboard-nav a span:not(.nav-icon),
  .dashboard-sidebar-user span:not(.nav-icon),
  .dashboard-sidebar-footer a span:not(.nav-icon) {
    display: none;
  }
  .dashboard-nav a {
    justify-content: center;
    padding: 12px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .dashboard-nav a:hover {
    transform: none; /* keep icon centered when collapsed */
  }
  .dashboard-sidebar-footer a {
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }
  .dashboard-main {
    margin-left: 56px;
    padding: var(--dash-pad) var(--dash-pad-sm) 32px;
  }
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--dash-gap);
  }
  .dashboard-title {
    font-size: 24px;
  }
  /* KPI: same as ≤1024 (Markets tab sizing); inherits tablet KPI rules */
  .dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: none;
    align-items: stretch;
  }
  .live-price-card {
    padding: 12px 14px;
  }
  .movers-root {
    gap: var(--dash-gap);
  }
  .movers-section-card {
    padding: var(--dash-pad-sm) var(--dash-pad-sm) var(--dash-pad-sm);
  }
  .movers-section-title {
    font-size: 11px;
  }
  .live-prices-grid {
    gap: var(--dash-gap-sm);
  }
  .live-price-card-symbol {
    font-size: 12px;
  }
  .live-price-card-price {
    font-size: 13px;
  }
  .live-price-card-change {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .live-price-card-chart {
    height: 24px;
  }
  .connections-card {
    padding: 14px 16px;
  }
  .connections-header {
    margin-bottom: 10px;
  }
  .connections-grid {
    gap: 10px;
  }
  .connection-card {
    padding: 12px 14px;
    gap: 8px;
  }
  .connection-card-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
  }
  .connection-initial {
    font-size: 12px;
  }
  .connection-card-name {
    font-size: 13px;
  }
  .connection-card-status {
    font-size: 11px;
  }
  .live-signal-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .live-signal-left {
    width: 100%;
  }
}

/* ---- Small viewports: page height = content only (no gap below content) ---- */
@media (max-width: 768px) {
  html {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background-color: var(--dash-bg);
  }
  body.dashboard-page {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    /* Zero out base.html's safe-area body padding — dashboard-main handles its own */
    padding: 0 !important;
    background-color: var(--dash-bg);
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 0 0;
    background-attachment: scroll;
    background-repeat: repeat;
  }
  .dashboard-page .container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    /* Kill base.html's 70px padding-bottom — not needed; dashboard-main owns its spacing */
    padding: 0 !important;
  }
  /* Decorative pseudo-elements use position:absolute + overflow:visible on mobile,
     which extends the body scroll area invisibly. Hide them to prevent ghost whitespace. */
  body.dashboard-page .container::before,
  .dashboard-main::before,
  .dashboard-main::after {
    display: none !important;
  }
  .dashboard-layout {
    flex: none !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
  }
  .dashboard-main {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .dashboard-content,
  .dashboard-main .mk-dashboard-content {
    overflow: visible !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .dashboard-columns {
    overflow: visible;
    height: auto !important;
    min-height: 0 !important;
    align-items: start;
  }
  .dashboard-left {
    overflow: visible;
    gap: 12px;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }
  .dashboard-right {
    overflow: visible;
    max-height: none;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }
  .live-signals-list-wrapper {
    overflow: visible;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .live-signals-card {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  /* ---- Mobile header bar (blur full width, scroll hide like landing) ---- */
  .dashboard-mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    align-items: center;
    padding-left: 12px;
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 201;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .dashboard-mobile-header.header-hidden {
    transform: translateY(-100%);
  }
  .dashboard-mobile-header .mobile-menu-btn {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    background: transparent;
    box-shadow: none;
  }
  .dashboard-mobile-header .mobile-menu-btn:hover {
    background: transparent !important;
    color: #ffffff;
  }
  .dashboard-mobile-header .mobile-menu-btn:focus-visible {
    background: transparent !important;
  }
  .dashboard-mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1;
  }
  .dashboard-mobile-header-logo img {
    height: 24px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }
  .sidebar-open .dashboard-mobile-header {
    display: flex;
  }

  /* Content starts below the fixed header so title is not covered */
  .dashboard-main {
    padding-top: 56px;
  }
  /* Do not change padding when sidebar opens — avoids layout jump/glitch; sidebar overlays on top */

  /* ---- Sidebar: hidden, overlay when open ---- */
  .mobile-menu-btn {
    display: flex;
  }
  .dashboard-sidebar {
    transform: translateX(-100%);
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 260;
    width: min(280px, 86vw);
    min-width: min(280px, 86vw);
    max-width: 300px;
  }
  .dashboard-sidebar-logo span,
  .dashboard-nav a span:not(.nav-icon),
  .dashboard-sidebar-user span:not(.nav-icon),
  .dashboard-sidebar-footer a span:not(.nav-icon) {
    display: inline;
  }
  .dashboard-nav a {
    justify-content: flex-start;
    padding: 8px 14px;
    font-size: 13px;
    gap: 10px;
  }
  .dashboard-nav a svg,
  .dashboard-nav a .nav-icon,
  .dashboard-nav a img.nav-icon {
    width: 18px;
    height: 18px;
  }
  .dashboard-sidebar-footer a {
    justify-content: flex-start;
    padding: 8px 0;
    font-size: 13px;
  }
  .dashboard-sidebar-footer a .nav-icon,
  .dashboard-sidebar-footer a img.nav-icon {
    width: 18px;
    height: 18px;
  }
  .dashboard-sidebar-user {
    padding: 8px 0 6px;
    font-size: 13px;
  }
  .dashboard-sidebar-user .nav-icon,
  .dashboard-sidebar-user img.nav-icon {
    width: 18px;
    height: 18px;
  }
  .dashboard-sidebar-footer .sidebar-theme-toggle {
    justify-content: flex-start;
    padding: 8px 0;
    font-size: 13px;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 0;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-footer .sidebar-theme-toggle {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    margin-top: 4px;
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-user {
    padding: 6px 0;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    box-sizing: border-box;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-user .nav-icon,
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-user img.nav-icon {
    width: 20px;
    height: 20px;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-footer a {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-footer a .nav-icon,
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-footer a img.nav-icon {
    width: 20px;
    height: 20px;
  }
  /* Drawer: single screen, no inner scroll — logo + flex nav + footer */
  .sidebar-open .dashboard-sidebar {
    transform: translateX(0);
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    box-sizing: border-box;
  }
  .sidebar-open .dashboard-sidebar .dashboard-nav {
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: auto;
    padding: 6px 12px 8px;
    gap: 3px;
    justify-content: stretch;
  }
  /* Equal vertical slices so extra space fills between logo and footer (mobile drawer only) */
  .sidebar-open .dashboard-sidebar:not(.dashboard-sidebar--admin) .dashboard-nav a {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    gap: 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .sidebar-open .dashboard-sidebar:not(.dashboard-sidebar--admin) .dashboard-nav a svg,
  .sidebar-open .dashboard-sidebar:not(.dashboard-sidebar--admin) .dashboard-nav a .nav-icon,
  .sidebar-open .dashboard-sidebar:not(.dashboard-sidebar--admin) .dashboard-nav a img.nav-icon {
    width: 22px;
    height: 22px;
  }
  .sidebar-open .dashboard-sidebar:not(.dashboard-sidebar--admin) .dashboard-nav a.active::before {
    height: 60%;
    max-height: 28px;
    min-height: 22px;
  }
  .dashboard-sidebar .dashboard-nav {
    padding-top: 12px;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-logo {
    flex-shrink: 0;
    padding: 10px 14px 12px;
    font-size: 16px;
    justify-content: center;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-logo img,
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-logo img.dashboard-logo-img {
    height: 28px;
    max-width: none;
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-footer {
    margin-top: auto;
    flex-shrink: 0;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom, 0px));
  }
  .sidebar-open .dashboard-sidebar .dashboard-sidebar-footer::before {
    left: 12px;
    right: 12px;
  }

  /* Admin/support: more links — same no-scroll; rows grow to fill; larger than before */
  .sidebar-open .dashboard-sidebar--admin {
    padding-top: max(6px, env(safe-area-inset-top, 0px));
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-logo {
    padding: 8px 12px 8px;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-logo img,
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-logo img.dashboard-logo-img {
    height: 26px;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-nav {
    padding: 4px 10px 6px;
    gap: 2px;
    overflow: hidden !important;
    max-height: none !important;
    justify-content: stretch;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-nav a {
    flex: 1 1 0;
    min-height: 36px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-nav a svg,
  .sidebar-open .dashboard-sidebar--admin .dashboard-nav a .nav-icon,
  .sidebar-open .dashboard-sidebar--admin .dashboard-nav a img.nav-icon {
    width: 20px;
    height: 20px;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-nav a.active::before {
    box-shadow: none;
    height: 55%;
    max-height: 26px;
    min-height: 18px;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-footer {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-user {
    padding: 6px 0;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    box-sizing: border-box;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-user .nav-icon,
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-user img.nav-icon {
    width: 20px;
    height: 20px;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-footer a {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
  }
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-footer a .nav-icon,
  .sidebar-open .dashboard-sidebar--admin .dashboard-sidebar-footer a img.nav-icon {
    width: 20px;
    height: 20px;
  }
  .sidebar-open .dashboard-sidebar--admin .sidebar-theme-toggle {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 0;
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
  }

  @media (max-width: 480px) and (max-height: 600px) {
    .sidebar-open .dashboard-sidebar--admin .dashboard-nav a {
      min-height: 32px;
      font-size: 13px;
      padding: 0 10px;
    }
    .sidebar-open .dashboard-sidebar--admin .dashboard-nav a svg,
    .sidebar-open .dashboard-sidebar--admin .dashboard-nav a .nav-icon,
    .sidebar-open .dashboard-sidebar--admin .dashboard-nav a img.nav-icon {
      width: 18px;
      height: 18px;
    }
  }

  .sidebar-backdrop {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 250;
    transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.48s ease-out;
  }
  .sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .dashboard-layout.sidebar-open {
    overflow: hidden;
  }
  .sidebar-open .dashboard-sidebar {
    z-index: 260;
  }
  /* Same position as in navbar (12px left, centered in 56px header) so only icon toggles ☰ ↔ ✕ */
  .sidebar-open .mobile-menu-btn {
    display: flex;
    position: fixed;
    z-index: 270;
    top: 6px;
    left: 12px;
  }

  /* ---- Dashboard header/title/welcome (all dashboard pages) ---- */
  .dashboard-page .dashboard-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 14px;
    padding-left: 12px;
    padding-top: 0;
  }
  .dashboard-page .dashboard-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 3px 0 0 0;
  }
  .dashboard-page .dashboard-welcome {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--dash-text-muted);
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
  .dashboard-page .dashboard-welcome .welcome-typed {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
  .dashboard-page .dashboard-welcome .welcome-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* ---- Header: Hamburger neben Titel (top padding so fixed bar does not cover title) ---- */
  .dashboard-main {
    margin-left: 0;
    padding: 80px 12px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    overflow: visible;
    background: transparent;
  }
  .dashboard-header {
    margin-bottom: 12px;
    padding-left: 12px;
    gap: 3px;
  }
  .dashboard-title {
    font-size: 18px;
  }
  .dashboard-welcome {
    font-size: 12px;
  }

  /* ---- KPI: one row × four cards on all mobile widths ---- */
  .dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 0;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
    align-items: stretch;
  }
  .dashboard-content {
    gap: 10px;
  }
  /* Match Markets .view-tab @ max-width 480: min-height 44px, padding 12px 8px → same outer band */
  .dashboard-kpi-card {
    box-sizing: border-box;
    min-width: 0;
    max-width: none;
    height: var(--dash-kpi-mobile-height, 44px);
    min-height: var(--dash-kpi-mobile-height, 44px);
    max-height: var(--dash-kpi-mobile-height, 44px);
    align-self: stretch;
    overflow: hidden;
    padding: 4px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0;
    scroll-snap-align: none;
  }
  .dashboard-kpi-card .kpi-value {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
  }
  .dashboard-kpi-card .kpi-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 1px;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
  }
  .dashboard-kpi-card .kpi-accent-line {
    margin-top: 4px;
  }

  /* ---- Top Gainers / Top Losers (separate sections) ---- */
  .movers-root {
    gap: var(--dash-gap);
  }
  .movers-section-card {
    padding: 10px 12px 10px;
  }
  .movers-section-title {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .live-prices-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .live-price-card {
    height: 110px;
  }
  .live-price-card-info {
    padding: 6px 8px 2px;
    gap: 4px;
  }
  .live-price-card-symbol {
    font-size: 13px;
  }
  .live-price-card-price {
    font-size: 13px;
  }
  .live-price-card-change {
    font-size: 11px;
  }

  /* ---- Connections: kompakt ---- */
  .dashboard-right .connections-wrap,
  .dashboard-right .connections-wrap .connections-card {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  .dashboard-right .connections-footer {
    display: none !important;
  }
  .connections-card {
    padding: 10px 12px;
  }
  .connections-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .connection-card {
    padding: 10px 12px;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .connection-card-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
  }
  .connection-initial {
    font-size: 11px;
  }
  .connection-card-name {
    font-size: 12px;
  }
  .connection-card-status {
    font-size: 10px;
  }

  /* Connections footer + button: full width, touch-friendly on mobile */
  .connections-footer {
    margin-top: 10px;
    padding-top: 10px;
  }
  .connections-footer-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    border-radius: 10px;
  }
  .connections-footer-tip {
    max-width: 100%;
  }

  /* ---- Mover labels: kompakt ---- */
  .mover-label {
    font-size: 9px;
    padding: 2px 0 1px;
  }
  .mover-label.mover-losers {
    padding-top: 6px;
  }

  /* ---- Latest Signals: kompakt, safe-area ---- */
  .live-signal-card {
    padding: 10px 12px;
  }
  .live-signal-left .signal-coin {
    font-size: 14px;
  }
  .live-signals-card {
    padding: 10px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .dashboard-section-title {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .dashboard-main {
    padding: 72px 6px 20px;
  }
  .dashboard-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
  }
  /* Markets .view-tab @ max-width 360: min-height 40px */
  .dashboard-kpi-card {
    box-sizing: border-box;
    height: var(--dash-kpi-mobile-height-xs, 40px);
    min-height: var(--dash-kpi-mobile-height-xs, 40px);
    max-height: var(--dash-kpi-mobile-height-xs, 40px);
    align-self: stretch;
    overflow: hidden;
    padding: 3px 2px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .dashboard-kpi-card .kpi-value {
    font-size: 10px;
    line-height: 1.05;
  }
  .dashboard-kpi-card .kpi-label {
    display: block;
    font-size: 6px;
    margin-bottom: 1px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-btn-line {
    transition: none;
  }
}

@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .dashboard-sidebar,
  .sidebar-backdrop {
    transition: none !important;
  }
}