@media (max-width: 700px) {
  #landingPage.landing-pro {
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding-bottom: 26px !important;
  }

  .landing-nav {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .landing-nav-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 76px 1fr 1fr !important;
    gap: 8px !important;
  }

  .landing-login-btn,
  .landing-get-btn,
  #openAccessBtn,
  #openAccessBtnHero {
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 20 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #accessBox,
  #adminLoginBox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 1000000 !important;
    width: calc(100vw - 28px) !important;
    max-width: 360px !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto !important;
  }

  #accessBox.hidden,
  #adminLoginBox.hidden {
    display: none !important;
  }

  #accessCode,
  #accessBtn,
  #closeAccessBtn,
  #adminLoginBtn,
  #closeAdminLoginBtn {
    min-height: 46px !important;
    font-size: 16px !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  #mainApp:not(.locked):not(.hidden) {
    display: flex !important;
  }

  .broker-mobile-close {
    display: grid !important;
  }

  .hidden,
  [aria-hidden="true"],
  #menuStatsBtn.hidden,
  #menuRiskSettingsBtn.hidden,
  #menuBrokerAccountsBtn.hidden,
  #livePageBtn.hidden,
  #liveAutoSection.hidden,
  #brokerConnectionStatus.hidden,
  #liveActiveOrders.hidden,
  #liveAutoSymbolStatus.hidden,
  body:not([data-user-role="admin"]) #menuStatsBtn,
  body:not([data-user-role="admin"]) #menuRiskSettingsBtn,
  body:not([data-user-role="admin"]) #menuBrokerAccountsBtn,
  body:not([data-user-role="admin"]) #livePageBtn,
  body:not([data-user-role="admin"]) #liveAutoSection,
  body:not([data-user-role="admin"]) #brokerConnectionStatus,
  body:not([data-user-role="admin"]) #liveActiveOrders,
  body:not([data-user-role="admin"]) #liveAutoSymbolStatus {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    position: relative !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 38px !important;
    padding: 0 58px 0 0 !important;
    margin: 0 0 6px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    position: absolute !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: auto !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .topbar .status {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  .topbar .status::after {
    content: "LIVE" !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    grid-template-columns: 36px minmax(0, 1fr) 96px !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .mobile-live-status {
    display: grid !important;
    visibility: visible !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    place-items: center !important;
    width: 92px !important;
    height: 28px !important;
    border: 1px solid rgba(0, 230, 118, 0.42) !important;
    border-radius: 999px !important;
    background: rgba(0, 78, 50, 0.24) !important;
    color: #00e676 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-notify-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 38px !important;
    gap: 8px !important;
    padding: 0 58px 0 0 !important;
    margin: 0 0 6px !important;
    overflow: visible !important;
  }

  .mobile-notify-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .top-header .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 36px !important;
    height: 36px !important;
  }

  .top-header .brand-left {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .app-logo-wave {
    flex: 0 0 auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: auto !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .topbar .status {
    width: auto !important;
    min-width: 0 !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 5px !important;
    border-width: 1px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
  }

  .topbar .status::after {
    content: "● LIVE" !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 38px !important;
    padding: 0 58px 0 0 !important;
    margin: 0 0 6px !important;
  }

  .mobile-notify-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: auto !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .topbar .status {
    width: 42px !important;
    min-width: 42px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  .topbar .status::after {
    content: "LIVE" !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    min-height: 56px !important;
    gap: 10px !important;
  }

  .top-header .menu-toggle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 13px !important;
  }

  .top-header .brand-left {
    font-size: clamp(23px, 6.4vw, 30px) !important;
    gap: 9px !important;
    font-weight: 950 !important;
    letter-spacing: -0.8px !important;
  }

  .app-logo-wave {
    font-size: 36px !important;
  }

  .mobile-notify-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 24px !important;
    z-index: auto !important;
  }

  .topbar .status {
    width: 48px !important;
    min-width: 48px !important;
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 999px !important;
  }

  .topbar .status::after {
    content: "LIVE" !important;
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 700px) {
  :root {
    --phone-bg: #030912;
    --phone-card: rgba(7, 16, 28, 0.92);
    --phone-line: rgba(47, 128, 237, 0.32);
    --phone-blue: #2f80ed;
    --phone-green: #00e676;
    --phone-red: #ff3347;
    --phone-yellow: #ffb020;
    --phone-muted: #8fa0b7;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 15% 0%, rgba(47, 128, 237, 0.16), transparent 28%),
      radial-gradient(circle at 88% 12%, rgba(0, 230, 118, 0.08), transparent 24%),
      linear-gradient(180deg, #020813 0%, #02060d 100%) !important;
  }

  body.fit-mode #mainApp.app:not(.locked) {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: max(10px, env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  .divider,
  .topbar .controls,
  .top-header .header,
  .top-header .header-actions,
  .mobile-domain-pill {
    display: none !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .top-header .menu-toggle,
  .mobile-notify-btn {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border: 1px solid rgba(100, 132, 170, 0.28) !important;
    border-radius: 14px !important;
    background: rgba(8, 18, 31, 0.88) !important;
    color: #f6f8fb !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.32) !important;
  }

  .mobile-notify-btn {
    position: relative !important;
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  .mobile-notify-btn b {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--phone-red);
    color: #fff;
    font-size: 10px;
    line-height: 1;
  }

  .top-header .brand-left {
    gap: 10px !important;
    justify-content: flex-start !important;
    color: #f8fafc !important;
    font-size: clamp(23px, 7vw, 31px) !important;
    font-weight: 950 !important;
    letter-spacing: -1px !important;
  }

  .app-logo-wave {
    display: inline-block !important;
    visibility: visible !important;
    color: var(--phone-blue) !important;
    font-size: 42px !important;
    filter: drop-shadow(0 0 16px rgba(47, 128, 237, 0.38));
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    position: absolute !important;
    top: max(15px, env(safe-area-inset-top)) !important;
    right: 78px !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .topbar .status {
    min-height: 45px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(0, 230, 118, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(0, 78, 50, 0.28) !important;
    color: var(--phone-green) !important;
    font-size: 0 !important;
    font-weight: 950 !important;
    box-shadow: 0 0 22px rgba(0, 230, 118, 0.12) !important;
  }

  .topbar .status::after {
    content: "● LIVE" !important;
    display: block !important;
    color: var(--phone-green) !important;
    font-size: 15px !important;
    letter-spacing: 0.4px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid {
    order: 4 !important;
    gap: 14px !important;
  }

  .dashboard-grid > .signals-panel {
    order: 1 !important;
  }

  .dashboard-grid > .chart-panel {
    order: 3 !important;
  }

  .dashboard-grid > .main-trade-panel {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .signals-panel .content-grid {
    gap: 14px !important;
  }

  body.fit-mode .signals-panel .symbol-card {
    height: 206px !important;
    padding: 16px 18px 0 !important;
    border: 1px solid var(--phone-line) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 88% 18%, rgba(47, 128, 237, 0.15), transparent 34%),
      linear-gradient(145deg, rgba(8, 18, 31, 0.96), rgba(3, 10, 18, 0.98)) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.035) !important;
    transition: transform 180ms ease, border-color 180ms ease !important;
  }

  body.fit-mode .signals-panel .symbol-card:active {
    transform: scale(0.985);
  }

  .symbol-card .card-title {
    font-size: 29px !important;
    font-weight: 950 !important;
  }

  .symbol-card .symbol-icon {
    height: 27px !important;
    max-width: 76px !important;
  }

  .symbol-card .signal-shell {
    top: 58px !important;
    left: 18px !important;
    width: 29% !important;
  }

  .symbol-card .signal-box {
    height: 47px !important;
    border-radius: 999px !important;
  }

  .symbol-card .signal-text {
    font-size: clamp(22px, 6.6vw, 30px) !important;
    letter-spacing: -0.5px !important;
  }

  .symbol-card .metric-label {
    left: 45% !important;
    width: 24% !important;
    color: #edf3fb !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  #eurusd-buy-label,
  #gold-buy-label {
    top: 53px !important;
  }

  #eurusd-buy-label::before,
  #gold-buy-label::before {
    content: "15m Trend";
    display: block;
    margin-bottom: 6px;
    color: #c9d3e1;
    font-size: 13px;
    font-weight: 650;
  }

  #eurusd-sell-label,
  #gold-sell-label {
    left: 72% !important;
    top: 53px !important;
    width: 22% !important;
  }

  #eurusd-sell-label::before,
  #gold-sell-label::before {
    content: "Bias Strength";
    display: block;
    margin-bottom: 6px;
    color: #c9d3e1;
    font-size: 13px;
    font-weight: 650;
  }

  .symbol-card .metric-label.conf-label {
    display: none !important;
  }

  .symbol-card .bar-wrap {
    left: 72% !important;
    top: 103px !important;
    width: 17% !important;
    height: 11px !important;
  }

  #eurusd-buy-label + .bar-wrap,
  #gold-buy-label + .bar-wrap,
  #eurusd-sell-label + .bar-wrap,
  #gold-sell-label + .bar-wrap {
    top: 103px !important;
  }

  #eurusd-buy-label + .bar-wrap,
  #gold-buy-label + .bar-wrap {
    display: none !important;
  }

  .symbol-card .bar-wrap.conf-wrap {
    display: none !important;
  }

  .symbol-card .glow-bar {
    height: 11px !important;
    background: #152232 !important;
  }

  .symbol-card .tags-row {
    min-height: 58px !important;
    padding: 10px 18px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.13) !important;
  }

  .symbol-card .glow-tag {
    flex: 1 1 0 !important;
    height: auto !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: #edf3fb !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  .chart-section .chart-controls {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 12px 18px 8px !important;
    border: 1px solid var(--phone-line) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(145deg, rgba(8, 18, 31, 0.96), rgba(3, 10, 18, 0.98)) !important;
  }

  .chart-controls .chart-symbols button {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: #f7fafc !important;
    background: transparent !important;
    border: 0 !important;
  }

  .chart-controls .chart-timeframes button {
    height: 35px !important;
    min-width: 70px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 29, 48, 0.88) !important;
  }

  body.fit-mode .chart-panel .chart-box {
    height: 430px !important;
    min-height: 430px !important;
    border: 1px solid var(--phone-line) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: #030b15 !important;
  }

  body.fit-mode .chart-box #chartContainer {
    height: 430px !important;
    min-height: 430px !important;
  }

  .chart-overlay-header {
    top: 13px !important;
    left: 18px !important;
  }

  #chartOverlayTitle {
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  #chartOverlayOhlc {
    font-size: 10px !important;
  }

  .mobile-timeframe-row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    padding: 10px 16px 14px !important;
    border: 1px solid var(--phone-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: linear-gradient(145deg, rgba(8, 18, 31, 0.96), rgba(3, 10, 18, 0.98)) !important;
  }

  .mobile-timeframe-row button {
    min-height: 45px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 11px !important;
    background: rgba(9, 20, 34, 0.9) !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  .mobile-timeframe-row button:active {
    border-color: rgba(0, 230, 118, 0.62) !important;
    color: var(--phone-green) !important;
  }

  .mobile-open-trade-card {
    display: block !important;
    margin-top: 14px !important;
    padding: 16px 18px 18px !important;
    border: 1px solid rgba(0, 230, 118, 0.52) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 92% 0%, rgba(0, 230, 118, 0.12), transparent 31%),
      linear-gradient(145deg, rgba(8, 18, 31, 0.96), rgba(3, 10, 18, 0.98)) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32) !important;
  }

  .mobile-open-trade-head,
  .mobile-trade-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-open-trade-head strong {
    color: #ecf4ff;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0.2px;
  }

  #mobileTradeLiveBadge {
    color: var(--phone-green);
    font-size: 13px;
    font-weight: 950;
  }

  #mobileTradeLiveBadge::before {
    content: "● ";
  }

  .mobile-trade-empty {
    margin-top: 12px;
    color: var(--phone-muted);
    font-size: 13px;
    font-weight: 750;
  }

  .mobile-trade-body {
    margin-top: 14px;
  }

  .mobile-trade-main strong {
    color: #f8fafc;
    font-size: 16px;
  }

  .mobile-trade-side {
    display: inline-flex;
    margin-left: 8px;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--phone-green);
    font-size: 11px;
    font-weight: 950;
  }

  .mobile-trade-side.sell {
    color: var(--phone-red);
  }

  #mobileTradePnl {
    color: #f8fafc;
    font-size: 16px;
  }

  #mobileTradePnl.positive {
    color: var(--phone-green);
  }

  #mobileTradePnl.negative {
    color: var(--phone-red);
  }

  .mobile-trade-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-top: 15px;
  }

  .mobile-trade-grid span {
    min-width: 0;
    color: #9fb0c8;
    font-size: 11px;
  }

  .mobile-trade-grid b {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #eef4fd;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-trade-protection {
    margin-top: 10px;
    color: #9effc0;
    font-size: 12px;
    font-weight: 850;
  }

  .mobile-trade-progress {
    margin: 31px 5px 18px;
  }

  .mobile-trade-line {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--phone-red), var(--phone-yellow), var(--phone-green));
  }

  .mobile-trade-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--green-from, 0%);
    width: max(0%, calc(var(--green-to, 0%) - var(--green-from, 0%)));
    border-radius: 999px;
    background: rgba(0, 230, 118, 0.95);
    box-shadow: 0 0 14px rgba(0, 230, 118, 0.4);
  }

  .mobile-trade-line .marker {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border: 2px solid #07101d;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  }

  .mobile-trade-line .marker b {
    position: absolute;
    top: 19px;
    left: 50%;
    transform: translateX(-50%);
    color: #dfe7f2;
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
  }

  .mobile-trade-line .sl { left: var(--sl-pos); background: var(--phone-red); }
  .mobile-trade-line .entry { left: var(--entry-pos); width: 11px; height: 11px; background: #cbd5e1; }
  .mobile-trade-line .tp1 { left: var(--tp1-pos); background: var(--phone-yellow); }
  .mobile-trade-line .tp2 { left: var(--tp2-pos); background: var(--phone-green); }
  .mobile-trade-line .protected { left: var(--protected-pos); top: -12px; width: 12px; height: 12px; background: #7dd3fc; }
  .mobile-trade-line .live {
    left: var(--live-pos);
    z-index: 5;
    width: 16px;
    height: 16px;
    border-color: #f8fafc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 0 18px rgba(255, 255, 255, 0.38);
  }

  .mobile-trade-line .live b {
    top: -25px;
    color: #f8fafc;
    font-size: 11px;
  }

  .mobile-open-trade-card.tp1-hit .mobile-trade-line .tp1 {
    box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.16), 0 0 18px rgba(0, 230, 118, 0.45);
    background: var(--phone-green);
  }

  .main-trade-panel .main-trade-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .main-trade-card > :not(.main-smc-panel):not(.news-impact-panel) {
    display: none !important;
  }

  .main-smc-panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(191, 90, 242, 0.68) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(191, 90, 242, 0.18), transparent 30%),
      linear-gradient(145deg, rgba(8, 18, 31, 0.96), rgba(3, 10, 18, 0.98)) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32) !important;
  }

  .smc-header {
    margin-bottom: 14px !important;
    color: #d98cff !important;
    font-size: 20px !important;
    font-weight: 950 !important;
  }

  .main-smc-panel > .smc-row {
    display: none !important;
  }

  .smc-intel-grid,
  .smc-intel-grid.smc-intel-levels {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .smc-intel-grid.smc-intel-levels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .smc-intel-grid > div,
  .smc-intel-levels > div {
    min-width: 0 !important;
    padding: 12px !important;
    border-right: 1px solid rgba(148, 163, 184, 0.13) !important;
    background: rgba(9, 18, 31, 0.62) !important;
  }

  .smc-intel-grid > div:last-child,
  .smc-intel-levels > div:last-child {
    border-right: 0 !important;
  }

  .smc-intel-grid span,
  .smc-intel-section > span,
  .smc-intel-progress span {
    color: #aeb9ca !important;
    font-size: 12px !important;
  }

  .smc-intel-grid strong {
    display: block !important;
    margin-top: 5px !important;
    overflow-wrap: anywhere !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .smc-intel-section {
    margin: 14px 0 !important;
    padding: 0 !important;
  }

  #main-smc-waiting-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px 12px !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
  }

  #main-smc-waiting-list li {
    display: flex !important;
    gap: 7px !important;
    align-items: flex-start !important;
    color: #e8eef7 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  #main-smc-waiting-list li b {
    color: var(--phone-red) !important;
  }

  #main-smc-waiting-list li.complete b {
    color: var(--phone-green) !important;
  }

  #main-smc-waiting-list li.info b {
    color: var(--phone-yellow) !important;
  }

  .smc-intel-progress {
    margin-top: 14px !important;
  }

  .smc-intel-progress > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
  }

  #main-smc-progress-label {
    color: #f8fafc !important;
  }

  .smc-progress-track {
    height: 11px !important;
    margin-top: 7px !important;
    border-radius: 999px !important;
    background: #152232 !important;
  }

  .smc-progress-track i {
    background: linear-gradient(90deg, var(--phone-yellow), var(--phone-green)) !important;
    transition: width 260ms ease !important;
  }

  .news-impact-panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .news-impact-card {
    padding: 14px 16px !important;
    border: 1px solid rgba(255, 51, 71, 0.52) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(8, 18, 31, 0.96), rgba(3, 10, 18, 0.98)) !important;
  }

  .news-impact-header {
    margin-bottom: 10px !important;
  }

  .news-impact-updated,
  .news-impact-details,
  .news-impact-score,
  .news-impact-decision,
  .news-impact-trading-window,
  .news-impact-upcoming {
    display: none !important;
  }

  .news-impact-content {
    display: grid !important;
    grid-template-columns: 1.15fr 0.7fr 0.9fr 1fr !important;
    gap: 8px !important;
  }

  .news-impact-event,
  .news-impact-item {
    min-width: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 10px !important;
    background: rgba(9, 18, 31, 0.62) !important;
  }

  .news-impact-event strong,
  .news-impact-item strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .news-impact-event b,
  .news-impact-event small,
  .news-impact-event em,
  .news-impact-item em {
    font-size: 10px !important;
  }

  .history-section {
    order: 4 !important;
  }

  .mobile-bottom-nav {
    position: fixed !important;
    z-index: 900 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(47, 128, 237, 0.22) !important;
    background: rgba(2, 8, 15, 0.94) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .mobile-bottom-nav button {
    display: grid !important;
    place-items: center !important;
    gap: 3px !important;
    border: 0 !important;
    background: transparent !important;
    color: #8392a8 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
  }

  .mobile-bottom-nav span {
    display: grid !important;
    place-items: center !important;
    width: 29px !important;
    height: 29px !important;
    font-size: 23px !important;
  }

  .mobile-bottom-nav button.active {
    color: var(--phone-green) !important;
  }

  .mobile-bottom-nav button.active span {
    border-radius: 999px !important;
    background: rgba(0, 230, 118, 0.1) !important;
    box-shadow: 0 0 18px rgba(0, 230, 118, 0.16) !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) {
    padding: max(8px, env(safe-area-inset-top)) 8px 10px !important;
    gap: 7px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    min-height: 46px !important;
    gap: 8px !important;
  }

  .top-header .menu-toggle,
  .mobile-notify-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .mobile-notify-btn {
    font-size: 18px !important;
  }

  .mobile-notify-btn b {
    top: 3px !important;
    right: 3px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }

  .top-header .brand-left {
    gap: 7px !important;
    font-size: clamp(17px, 5vw, 21px) !important;
    letter-spacing: -0.5px !important;
  }

  .app-logo-wave {
    font-size: 25px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    top: max(9px, env(safe-area-inset-top)) !important;
    right: auto !important;
    left: 16px !important;
    z-index: 20 !important;
  }

  .topbar .status {
    min-height: 22px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
  }

  .topbar .status::after {
    font-size: 10px !important;
    letter-spacing: 0.2px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid {
    gap: 8px !important;
  }

  .signals-panel .content-grid {
    gap: 8px !important;
  }

  body.fit-mode .signals-panel .symbol-card {
    height: 148px !important;
    padding: 10px 12px 0 !important;
    border-radius: 14px !important;
  }

  .symbol-card .card-title {
    font-size: 18px !important;
  }

  .symbol-card .symbol-icon {
    height: 18px !important;
    max-width: 48px !important;
  }

  .symbol-card .signal-shell {
    top: 40px !important;
    left: 12px !important;
    width: 50% !important;
  }

  .symbol-card .signal-box {
    height: 57px !important;
    border-radius: 13px !important;
  }

  .symbol-card .signal-text {
    font-size: clamp(26px, 7vw, 34px) !important;
  }

  .symbol-card .metric-label {
    left: 57% !important;
    width: 34% !important;
    font-size: 11px !important;
  }

  #eurusd-buy-label,
  #gold-buy-label {
    top: 31px !important;
  }

  #eurusd-buy-label::before,
  #gold-buy-label::before {
    margin-bottom: 3px !important;
    font-size: 11px !important;
  }

  #eurusd-sell-label,
  #gold-sell-label {
    left: 57% !important;
    top: 63px !important;
    width: 36% !important;
  }

  #eurusd-sell-label::before,
  #gold-sell-label::before {
    content: "" !important;
    display: none !important;
  }

  .symbol-card .bar-wrap {
    left: 57% !important;
    top: 82px !important;
    width: 34% !important;
    height: 8px !important;
  }

  #eurusd-sell-label + .bar-wrap,
  #gold-sell-label + .bar-wrap {
    top: 84px !important;
  }

  .symbol-card .glow-bar {
    height: 8px !important;
  }

  .symbol-card .tags-row {
    min-height: 32px !important;
    padding: 4px 12px !important;
  }

  .symbol-card .glow-tag {
    font-size: 8px !important;
  }

  .chart-section .chart-controls {
    min-height: 44px !important;
    padding: 7px 9px 5px !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .chart-controls .chart-symbols button,
  .chart-controls .chart-timeframes button {
    height: 29px !important;
    min-width: 0 !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  body.fit-mode .chart-panel .chart-box {
    height: 270px !important;
    min-height: 270px !important;
  }

  body.fit-mode .chart-box #chartContainer {
    height: 270px !important;
    min-height: 270px !important;
  }

  .mobile-timeframe-row {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 7px !important;
    padding: 7px 9px 9px !important;
    border-radius: 0 0 14px 14px !important;
  }

  .mobile-timeframe-row button {
    min-height: 33px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  .mobile-open-trade-card,
  .main-smc-panel,
  .news-impact-card {
    border-radius: 14px !important;
  }

  .mobile-open-trade-card {
    margin-top: 8px !important;
    padding: 10px 12px 12px !important;
  }

  .main-smc-panel {
    padding: 11px 12px !important;
  }

  .news-impact-card {
    padding: 10px 12px !important;
  }

  .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) {
    padding: max(5px, env(safe-area-inset-top)) 6px 8px !important;
    gap: 5px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    min-height: 34px !important;
    gap: 6px !important;
  }

  .top-header .menu-toggle,
  .mobile-notify-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }

  .top-header .brand-left {
    gap: 5px !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  .app-logo-wave {
    font-size: 20px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    top: max(5px, env(safe-area-inset-top)) !important;
    left: 10px !important;
  }

  .topbar .status {
    min-height: 18px !important;
    padding: 0 6px !important;
  }

  .topbar .status::after {
    font-size: 8px !important;
  }

  .mobile-notify-btn {
    font-size: 14px !important;
  }

  .mobile-notify-btn b {
    min-width: 14px !important;
    height: 14px !important;
    font-size: 8px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid,
  .signals-panel .content-grid {
    gap: 6px !important;
  }

  body.fit-mode .signals-panel .symbol-card {
    height: 100px !important;
    padding: 7px 9px 0 !important;
    border-radius: 12px !important;
  }

  .symbol-card .card-header {
    min-height: 18px !important;
  }

  .symbol-card .title-wrap {
    gap: 5px !important;
  }

  .symbol-card .card-title {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .symbol-card .symbol-icon {
    height: 15px !important;
    max-width: 38px !important;
  }

  .symbol-card .signal-shell {
    top: 29px !important;
    left: 9px !important;
    width: 45% !important;
  }

  .symbol-card .signal-box {
    height: 41px !important;
    border-radius: 11px !important;
  }

  .symbol-card .signal-text {
    font-size: clamp(21px, 5.8vw, 27px) !important;
    line-height: 1 !important;
  }

  .symbol-card .metric-label {
    left: 54% !important;
    width: 42% !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  #eurusd-buy-label,
  #gold-buy-label {
    top: 28px !important;
  }

  #eurusd-buy-label::before,
  #gold-buy-label::before {
    content: "15m" !important;
    display: inline !important;
    margin: 0 5px 0 0 !important;
    font-size: 9px !important;
  }

  #eurusd-sell-label,
  #gold-sell-label {
    top: 45px !important;
    left: 54% !important;
    width: 42% !important;
  }

  #eurusd-sell-label::before,
  #gold-sell-label::before,
  .symbol-card .metric-label.conf-label,
  .symbol-card .signal-freshness-note {
    display: none !important;
  }

  .symbol-card .bar-wrap,
  #eurusd-sell-label + .bar-wrap,
  #gold-sell-label + .bar-wrap {
    top: 62px !important;
    left: 54% !important;
    width: 40% !important;
    height: 6px !important;
  }

  .symbol-card .glow-bar {
    height: 6px !important;
  }

  .symbol-card .tags-row {
    min-height: 23px !important;
    padding: 2px 8px !important;
    gap: 3px !important;
  }

  .symbol-card .glow-tag {
    height: 18px !important;
    font-size: 6.8px !important;
    line-height: 1 !important;
    padding: 0 2px !important;
  }

  .chart-section .chart-controls {
    min-height: 34px !important;
    padding: 4px 6px 3px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .chart-controls .chart-symbols,
  .chart-controls .chart-timeframes {
    gap: 4px !important;
  }

  .chart-controls .chart-symbols button,
  .chart-controls .chart-timeframes button {
    height: 25px !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  body.fit-mode .chart-panel .chart-box {
    height: 220px !important;
    min-height: 220px !important;
  }

  body.fit-mode .chart-box #chartContainer {
    height: 220px !important;
    min-height: 220px !important;
  }

  .chart-overlay-header {
    top: 9px !important;
    left: 11px !important;
  }

  #chartOverlayTitle {
    font-size: 13px !important;
  }

  #chartOverlayOhlc {
    margin-top: 3px !important;
    font-size: 7.5px !important;
  }

  .mobile-timeframe-row {
    gap: 5px !important;
    padding: 5px 6px 6px !important;
    border-radius: 0 0 12px 12px !important;
  }

  .mobile-timeframe-row button {
    min-height: 27px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  .mobile-open-trade-card {
    margin-top: 6px !important;
    padding: 8px 9px 9px !important;
  }

  .mobile-open-trade-head strong,
  .smc-header {
    font-size: 14px !important;
  }

  .mobile-trade-grid {
    gap: 4px !important;
    margin-top: 8px !important;
  }

  .mobile-trade-grid span {
    font-size: 9px !important;
  }

  .mobile-trade-grid b {
    font-size: 10px !important;
  }

  .mobile-trade-progress {
    margin: 24px 3px 13px !important;
  }

  .main-smc-panel {
    padding: 9px !important;
  }

  .smc-intel-grid > div,
  .smc-intel-levels > div {
    padding: 7px !important;
  }

  .smc-intel-grid span,
  .smc-intel-section > span,
  .smc-intel-progress span {
    font-size: 10px !important;
  }

  .smc-intel-grid strong {
    font-size: 11px !important;
  }

  #main-smc-waiting-list {
    gap: 4px 7px !important;
  }

  #main-smc-waiting-list li {
    font-size: 10px !important;
  }

  .news-impact-card {
    padding: 8px !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode .signals-panel .symbol-card {
    height: 126px !important;
    padding: 10px 12px 0 !important;
  }

  .symbol-card .card-title {
    font-size: 18px !important;
  }

  .symbol-card .symbol-icon {
    height: 18px !important;
    max-width: 48px !important;
  }

  .symbol-card .signal-shell {
    top: 38px !important;
    left: 12px !important;
    width: 46% !important;
  }

  .symbol-card .signal-box {
    height: 45px !important;
    border-radius: 999px !important;
  }

  .symbol-card .signal-text {
    font-size: clamp(22px, 6vw, 29px) !important;
  }

  .symbol-card .metric-label {
    left: 56% !important;
    width: 38% !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #eurusd-buy-label,
  #gold-buy-label {
    top: 33px !important;
  }

  #eurusd-sell-label,
  #gold-sell-label {
    top: 33px !important;
    left: 78% !important;
    width: 18% !important;
  }

  #eurusd-buy-label::before,
  #gold-buy-label::before,
  #eurusd-sell-label::before,
  #gold-sell-label::before {
    content: attr(data-mobile-title) !important;
    display: block !important;
    margin: 0 0 6px !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  #eurusd-buy-label::after,
  #gold-buy-label::after,
  #eurusd-sell-label::after,
  #gold-sell-label::after {
    content: attr(data-mobile-value) !important;
    display: block !important;
    color: var(--phone-green) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .symbol-card.mobile-bearish #eurusd-buy-label::after,
  .symbol-card.mobile-bearish #gold-buy-label::after {
    color: var(--phone-red) !important;
  }

  #eurusd-sell-label::after,
  #gold-sell-label::after {
    color: #f8fafc !important;
    font-size: 15px !important;
  }

  .symbol-card .bar-wrap,
  #eurusd-sell-label + .bar-wrap,
  #gold-sell-label + .bar-wrap {
    top: 72px !important;
    left: 78% !important;
    width: 17% !important;
    height: 7px !important;
  }

  .symbol-card .glow-bar {
    height: 7px !important;
  }

  .symbol-card .tags-row {
    min-height: 35px !important;
    padding: 4px 12px !important;
  }

  .symbol-card .glow-tag {
    height: 25px !important;
    font-size: 8px !important;
    border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
  }

  .symbol-card .glow-tag:last-child {
    border-right: 0 !important;
  }

  body.fit-mode .chart-panel .chart-box {
    height: 260px !important;
    min-height: 260px !important;
  }

  body.fit-mode .chart-box #chartContainer {
    height: 260px !important;
    min-height: 260px !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) {
    padding: 10px 8px 58px !important;
    gap: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    min-height: 52px !important;
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  .top-header .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .top-header .menu-toggle::before {
    font-size: 18px !important;
  }

  .top-header .brand-left {
    justify-content: flex-start !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    letter-spacing: -0.4px !important;
  }

  .app-logo-wave {
    font-size: 24px !important;
  }

  .top-header .voice-toggle {
    height: 36px !important;
    min-width: 88px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
  }

  .top-header .voice-toggle::after {
    content: "Voice";
    font-size: 10px !important;
  }

  .top-header #langSelect {
    width: 47px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    margin-bottom: 8px !important;
  }

  .topbar .status {
    min-height: 27px !important;
    padding: 0 11px !important;
  }

  .topbar .status::after {
    font-size: 11px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid {
    gap: 8px !important;
  }

  .signals-panel .content-grid {
    gap: 8px !important;
  }

  body.fit-mode .signals-panel .symbol-card {
    height: 148px !important;
    padding: 10px 12px 0 !important;
    border-radius: 16px !important;
  }

  .symbol-card .card-header {
    min-height: 21px !important;
  }

  .symbol-card .title-wrap {
    gap: 7px !important;
  }

  .symbol-card .card-title {
    font-size: 16px !important;
    letter-spacing: -0.2px !important;
  }

  .symbol-card .symbol-icon {
    height: 18px !important;
    max-width: 42px !important;
  }

  .symbol-card .signal-shell {
    top: 39px !important;
    left: 12px !important;
    width: calc(54% - 16px) !important;
  }

  .symbol-card .signal-box {
    height: 55px !important;
    border-radius: 14px !important;
  }

  .symbol-card .signal-text {
    font-size: clamp(25px, 7.6vw, 33px) !important;
    letter-spacing: -0.8px !important;
  }

  .symbol-card .metric-label {
    left: 56% !important;
    width: calc(44% - 12px) !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #eurusd-buy-label,
  #gold-buy-label {
    top: 29px !important;
  }

  #eurusd-sell-label,
  #gold-sell-label {
    top: 54px !important;
  }

  .symbol-card .metric-label.conf-label {
    top: 79px !important;
  }

  .symbol-card .bar-wrap {
    left: 56% !important;
    width: calc(44% - 12px) !important;
    height: 7px !important;
  }

  #eurusd-buy-label + .bar-wrap,
  #gold-buy-label + .bar-wrap {
    top: 42px !important;
  }

  #eurusd-sell-label + .bar-wrap,
  #gold-sell-label + .bar-wrap {
    top: 67px !important;
  }

  .symbol-card .bar-wrap.conf-wrap {
    top: 92px !important;
  }

  .symbol-card .glow-bar {
    height: 7px !important;
  }

  .symbol-card .signal-freshness-note {
    top: 98px !important;
    left: 12px !important;
    width: calc(54% - 16px) !important;
    font-size: 8px !important;
  }

  .symbol-card .tags-row {
    min-height: 34px !important;
    gap: 6px !important;
    padding: 5px 12px !important;
  }

  .symbol-card .glow-tag {
    height: 23px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
  }

  .chart-section .chart-controls {
    min-height: 36px !important;
    padding: 6px 7px 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .chart-controls .chart-symbols,
  .chart-controls .chart-timeframes {
    gap: 4px !important;
  }

  .chart-controls button {
    height: 25px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 8.5px !important;
  }

  body.fit-mode .chart-panel .chart-box {
    height: 216px !important;
    min-height: 216px !important;
    border-radius: 0 0 16px 16px !important;
  }

  body.fit-mode .chart-box #chartContainer {
    height: 216px !important;
    min-height: 216px !important;
  }

  .chart-overlay-header {
    top: 7px !important;
    left: 9px !important;
  }

  #chartOverlayTitle {
    font-size: 15px !important;
  }

  #chartOverlayOhlc {
    margin-top: 5px !important;
    font-size: 8.5px !important;
  }

  .news-impact-panel {
    display: none !important;
  }

  .history-section,
  body.fit-mode .history-section {
    margin-top: 8px !important;
    padding: 8px 8px 6px !important;
    border-radius: 16px !important;
  }

  .history-header h2 {
    margin-bottom: 5px !important;
    font-size: 15px !important;
  }

  .history-table th,
  .history-table td {
    padding: 5px 1px !important;
    font-size: clamp(7.5px, 2.25vw, 9px) !important;
  }

  .history-table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  .history-time {
    max-width: 42px !important;
    white-space: nowrap !important;
  }

  .history-table th:first-child,
  .history-table td:first-child {
    width: 42px !important;
  }

  .history-table th:nth-child(2),
  .history-table td:nth-child(2) {
    width: 54px !important;
  }

  .history-table th:nth-child(5),
  .history-table td:nth-child(5) {
    width: 72px !important;
  }

  .history-table .history-badge,
  .history-table .badge {
    padding: 3px 4px !important;
    font-size: 7.5px !important;
  }

  .mobile-domain-pill {
    height: 34px !important;
    min-width: 158px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 38px !important;
    gap: 8px !important;
    padding: 0 58px 0 0 !important;
    margin: 0 0 6px !important;
    overflow: visible !important;
  }

  .mobile-notify-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .top-header .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 36px !important;
    height: 36px !important;
  }

  .top-header .brand-left {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .app-logo-wave {
    flex: 0 0 auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: auto !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .topbar .status {
    width: 42px !important;
    min-width: 40px !important;
    height: 20px !important;
    min-height: 10px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 200px !important;
  }

  .topbar .status::after {
    content: "LIVE" !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .top-header {
    grid-template-columns: 36px minmax(0, 1fr) 96px !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .mobile-live-status {
    display: grid !important;
    visibility: visible !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    place-items: center !important;
    width: 92px !important;
    height: 28px !important;
    border: 1px solid rgba(0, 230, 118, 0.42) !important;
    border-radius: 999px !important;
    background: rgba(0, 78, 50, 0.24) !important;
    color: #00e676 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .topbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-notify-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Final phone P/L row. Keep this as the single source for the mobile performance cards. */
@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .performance-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 64px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 9px !important;
    padding: 7px 8px !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 2px 5px !important;
    gap: 2px !important;
    border-right: 1px solid rgba(148, 163, 184, 0.16) !important;
    overflow: hidden !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-card:last-child {
    border-right: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-monthly {
    display: none !important;
    visibility: hidden !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-floating {
    display: grid !important;
    visibility: visible !important;
  }

  body.hide-floating-pnl.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-floating {
    display: grid !important;
    visibility: visible !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-floating .performance-copy span {
    font-size: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-floating .performance-copy span::after {
    content: "LIVE P/L" !important;
    font-size: 8px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip .performance-icon,
  body.fit-mode #mainApp.app:not(.locked) > .performance-strip .performance-sparkline {
    display: none !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip .performance-copy {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip .performance-copy span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip .performance-copy strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.55px !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-trades {
    align-items: center !important;
    text-align: center !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-trades .performance-copy {
    text-align: center !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-trades .performance-copy span {
    font-size: 6.5px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .performance-strip > .performance-trades .performance-copy strong {
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }
}

/* Final phone pair cards. Keep this as the single source for EURUSD/XAUUSD card sizing. */
@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) .signals-panel .content-grid {
    gap: 8px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .signals-panel .symbol-card {
    min-height: 104px !important;
    height: 104px !important;
    padding: 8px 12px 5px !important;
    border-radius: 14px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .card-header {
    min-height: 22px !important;
    margin: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .card-title {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .symbol-icon {
    width: 28px !important;
    height: 20px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .signal-shell {
    left: 12px !important;
    top: 36px !important;
    width: 56% !important;
    height: 44px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .signal-box {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .signal-text {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .metric-label {
    display: none !important;
    visibility: hidden !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .metric-label::before {
    content: "" !important;
    display: none !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .bar-wrap {
    display: block !important;
    visibility: visible !important;
    left: 69% !important;
    width: 28% !important;
    height: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .bar-wrap::before {
    content: attr(data-mobile-info) !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    width: 40% !important;
    overflow: hidden !important;
    color: #f8fafc !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .glow-bar {
    display: block !important;
    width: 58% !important;
    height: 6px !important;
    margin-left: 42% !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, 0.13) !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .tags-row {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .symbol-card .glow-tag {
    height: 21px !important;
    font-size: 7.5px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) #eurusd-buy-label,
  body.fit-mode #mainApp.app:not(.locked) #gold-buy-label {
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }

  body.fit-mode #mainApp.app:not(.locked) #eurusd-buy-label + .bar-wrap,
  body.fit-mode #mainApp.app:not(.locked) #gold-buy-label + .bar-wrap {
    top: 36px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) #eurusd-sell-label,
  body.fit-mode #mainApp.app:not(.locked) #gold-sell-label {
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }

  body.fit-mode #mainApp.app:not(.locked) #eurusd-sell-label + .bar-wrap,
  body.fit-mode #mainApp.app:not(.locked) #gold-sell-label + .bar-wrap {
    top: 53px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) #eurusd-conf-label,
  body.fit-mode #mainApp.app:not(.locked) #gold-conf-label {
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }

  body.fit-mode #mainApp.app:not(.locked) #eurusd-conf-label + .bar-wrap,
  body.fit-mode #mainApp.app:not(.locked) #gold-conf-label + .bar-wrap {
    top: 70px !important;
  }
}

/* Final phone landing/header cleanup. */
@media (max-width: 700px) {
  #landingPage.landing-pro {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #landingPage.landing-pro .landing-nav {
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 28px 8px 14px !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  #landingPage.landing-pro .landing-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: clamp(24px, 8vw, 32px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  #landingPage.landing-pro .landing-logo .logo-wave {
    flex: 0 0 auto !important;
  }

  #landingPage.landing-pro .landing-nav-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #landingPage.landing-pro #landingLang {
    width: 40px !important;
    min-width: 40px !important;
    height: 36px !important;
    font-size: 12px !important;
  }

  #landingPage.landing-pro .landing-login-btn {
    width: 60px !important;
    min-width: 60px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }

  #landingPage.landing-pro #openAccessBtn {
    display: none !important;
  }

  #landingPage.landing-pro .hero-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 54px 18px 32px !important;
  }

  #landingPage.landing-pro .hero-left {
    width: 100% !important;
    max-width: none !important;
  }

  #landingPage.landing-pro .hero-pill,
  #landingPage.landing-pro .hero-actions,
  #landingPage.landing-pro .hero-left p,
  #landingPage.landing-pro .hero-badges {
    width: 100% !important;
    max-width: none !important;
  }

  #landingPage.landing-pro .hero-left h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(58px, 17vw, 76px) !important;
  }
}

/* Final phone order: Open Trade -> SMC Plan -> Recent Signal History. */
@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) .chart-section > .main-smc-panel {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .chart-section > .history-section {
    width: 100% !important;
    margin-top: 8px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid > .main-trade-panel {
    order: 2 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid > .chart-panel {
    order: 3 !important;
  }
}

/* Final phone chart cleanup. */
@media (max-width: 700px) {
  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid > .main-trade-panel,
  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid > .main-trade-panel .main-trade-card,
  body.fit-mode #mainApp.app:not(.locked) .chart-panel,
  body.fit-mode #mainApp.app:not(.locked) .chart-wrap,
  body.fit-mode #mainApp.app:not(.locked) .chart-section {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) > .dashboard-grid > .chart-panel {
    margin-top: -22px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .main-trade-panel .main-smc-panel {
    margin: 0 0 2px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .chart-section > .main-smc-panel {
    margin: 0 0 2px !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .chart-section .chart-controls {
    margin-top: 0 !important;
  }

  body.fit-mode #mainApp.app:not(.locked) #chartContainer a[href*="tradingview.com"],
  body.fit-mode #mainApp.app:not(.locked) #chartContainer #tv-attr-logo,
  body.fit-mode #mainApp.app:not(.locked) #chartContainer .tv-attr-logo,
  body.fit-mode #mainApp.app:not(.locked) #chartContainer [id*="tv-attr"],
  body.fit-mode #mainApp.app:not(.locked) #chartContainer [class*="tv-attr"],
  body.fit-mode #mainApp.app:not(.locked) #chartContainer iframe,
  body.fit-mode #mainApp.app:not(.locked) #chartContainer .tv-lightweight-charts a,
  body.fit-mode #mainApp.app:not(.locked) #chartContainer [class*="logo"],
  body.fit-mode #mainApp.app:not(.locked) #chartContainer [class*="watermark"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.fit-mode #mainApp.app:not(.locked) .trade-level-preview,
  body.fit-mode #mainApp.app:not(.locked) .trade-level-preview.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}