/* ═══════════════════════════════════════════════════════════════════════════
   mobile.css — phone / narrow-viewport layer. Loaded LAST so it can correct
   the desktop-first rules in aura.css without !important wars.

   Navigation on small screens is the SIDEBAR DRAWER only. The bottom tab bar
   was removed — two menus competing on one screen is the thing that made the
   app feel unfinished.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drawer-only logout: on desktop the topbar already has one, so it stays hidden
   above the breakpoint. Specificity matches #appShell .sidebar .nav-item in aura.css. */
#appShell .sidebar .side-logout{ display:none; }

@media (max-width: 940px){

  /* ── safe areas (notch / home indicator in the installed PWA) ───────────── */
  :root{
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-bot: env(safe-area-inset-bottom, 0px);
    --sa-l:   env(safe-area-inset-left, 0px);
    --sa-r:   env(safe-area-inset-right, 0px);
    --tick-h: 32px;
    --bar-h:  56px;
  }

  /* iOS zooms the page whenever a focused input is under 16px. */
  input, select, textarea, .login-input, .order-input{ font-size:16px !important; }

  /* Decorative layers are expensive on a phone GPU and add nothing at 390px. */
  .cursor-glow{ display:none !important; }
  .noise{ opacity:.28; }
  .aurora{ opacity:.55; }

  /* ── ticker ─────────────────────────────────────────────────────────────── */
  .ticker{
    height:var(--tick-h);
    padding-top:var(--sa-top);
    height:calc(var(--tick-h) + var(--sa-top));
  }
  .ticker-track{ font-size:10.5px; }/* ── shell ──────────────────────────────────────────────────────────────── */

  .app{ display:block !important; }

  /* ── topbar: one tidy row — burger · balance · deposit · avatar ─────────── */
  .topbar{
    top:calc(var(--tick-h) + var(--sa-top));
    height:var(--bar-h);
    padding:0 12px 0 calc(12px + var(--sa-l));
    gap:8px;
    background:rgba(9,9,16,.82);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--stroke);
  }
  .menu-btn{
    display:grid !important;
    width:42px; height:42px; flex:0 0 42px;
    border-radius:13px; background:var(--glass);
  }
  .menu-btn:active{ transform:scale(.94); }
  .topbar .search{ display:none; }
  .topbar-right{ gap:8px; min-width:0; flex:1; justify-content:flex-end; }
  /* The balance must never be clipped — a client seeing "$1 000 0…" on a
     seven-figure account is alarming. It gets the space it needs; the deposit
     button, which can shrink to an icon, yields instead. The old max-width:34vw
     plus ellipsis cut the number the moment it passed a million. */
  .topbar-right .chip{
    padding:8px 12px; font-size:12.5px; font-weight:600;
    white-space:nowrap; flex:0 1 auto; min-width:0;
  }
  .topbar-right .chip #hdrBalance{ overflow:visible; }
  /* Deposit keeps its label while there is room; below ~360px the row is tight,
     so the label is dropped to a "+" and the number keeps its space. */
  .topbar-right .btn.btn-grad{ padding:9px 15px; font-size:12.5px; flex:0 0 auto; }
  @media (max-width:360px){
    .topbar-right .btn.btn-grad{ font-size:0; padding:9px 13px; }
    .topbar-right .btn.btn-grad::before{ content:'+'; font-size:17px; line-height:1; }
  }
  /* Logout lives in the drawer on mobile — it was crowding the bar. */
  .topbar-right #logoutBtn{ display:none !important; }
  .topbar-right .avatar{ width:36px; height:36px; font-size:12px; flex:0 0 36px; }

  /* ── sidebar → drawer ───────────────────────────────────────────────────── */
  .sidebar{
    position:fixed;
    /* Starts BELOW the ticker. It used to start at 0, so the drawer's logo sat
       in the same band as the running price strip; with backdrop-filter on both
       the strip could win the paint order and cover the mark. Parking the drawer
       under the strip makes the overlap impossible rather than merely unlikely. */
    top:calc(var(--tick-h) + var(--sa-top)); bottom:0; left:0;
    z-index:1200;
    width:min(84vw, 320px);
    height:calc(100dvh - var(--tick-h) - var(--sa-top));
    max-height:calc(100dvh - var(--tick-h) - var(--sa-top));
    padding:16px 14px calc(24px + var(--sa-bot));
    border-right:1px solid var(--stroke2);
    border-radius:0 22px 22px 0;
    background:#0B0B15;
    -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px);
    box-shadow:26px 0 60px rgba(0,0,0,.55);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    /* transform beats animating `left` — it stays on the compositor */
    transform:translate3d(-102%,0,0);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    will-change:transform;
    left:0 !important;
  }
  .sidebar.open{ transform:translate3d(0,0,0); }

  .sidebar .logo{
    font-size:21px; padding:2px 10px 18px;
    display:flex; align-items:center; gap:9px;
  }
  .sidebar-close{
    display:grid !important; place-items:center;
    width:38px; height:38px; margin-left:auto;
    border-radius:11px; background:var(--glass);
  }

  /* Bigger, calmer rows — 48px is the comfortable thumb target. */
  .sidebar .nav-item{
    min-height:48px;
    padding:12px 14px;
    font-size:14.5px;
    border-radius:14px;
    gap:14px;
  }
  .sidebar .nav-item svg{ width:20px; height:20px; }
  .sidebar .nav-item .nav-num{ display:none; }   /* decorative on a phone */
  .sidebar .nav-item.active{
    background:linear-gradient(90deg, rgba(123,92,255,.20), rgba(123,92,255,.04));
    color:var(--text);
  }
  .sidebar .nav-item.active::before{ height:56%; }
  .sidebar .nav-item:hover{ transform:none; }
  .sidebar .nav-item:hover svg{ transform:none; }
  .sidebar .nav-item:active{ background:var(--glass2); }
  .sidebar .nav-sep{ margin:10px 14px; }
  .sidebar .side-card{ display:none; }           /* promo block eats the fold */
  .sidebar .nav-bottom{ padding-top:10px; border-top:1px solid var(--stroke); }

  #appShell .sidebar .side-logout{ display:flex; }
  .side-logout{
    color:var(--down) !important;
    margin-top:2px;
  }
  .side-logout:active{ background:var(--down-dim) !important; }

  .sidebar-overlay{ top:calc(var(--tick-h) + var(--sa-top));
    inset:0;
    z-index:1150;
    background:rgba(4,4,10,.62);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    opacity:0; pointer-events:none;
    transition:opacity .28s ease;
    display:block;
  }
  .sidebar-overlay.open{ opacity:1; pointer-events:auto; }
  body.sidebar-locked{ overflow:hidden; touch-action:none; }

  /* ── content rhythm ─────────────────────────────────────────────────────── */
  .content{
    padding:18px calc(14px + var(--sa-l)) calc(36px + var(--sa-bot)) calc(14px + var(--sa-r));
  }
  .grid{ gap:14px; }
  .g2, .g3, .g4, .g21, .g12{ grid-template-columns:1fr; }
  /* the three dashboard mini-stats read better as a row of chips */
  .g3:has(> .stat-mini){ grid-template-columns:1fr 1fr; }
  .g3 > .stat-mini:only-child{ grid-column:1 / -1; }

  .card{ padding:18px 16px; border-radius:20px; }

  /* Invest collections: six full-width 150px blocks made the page endless.
     Two columns reads as a proper tile grid on a phone. */
  .collection{ min-height:104px; padding:16px 14px; border-radius:18px; }
  .collection b{ font-size:14px; }
  .collection span{ font-size:11px; }
  .collection::after{ top:12px; right:13px; font-size:15px; }
  .collection:hover{ transform:none; box-shadow:none; }
  .grid.g3:has(> .collection){ grid-template-columns:1fr 1fr; gap:10px; }
  .card:hover{ transform:none; }

  .eyebrow{ font-size:9.5px; letter-spacing:2px; margin-bottom:10px; }
  .h-display{ font-size:clamp(27px, 8.4vw, 38px); line-height:1.06; letter-spacing:-.6px; }
  .h2{ font-size:19px; }

  .page-head{ flex-direction:column; align-items:stretch; gap:12px; margin-bottom:20px; }
  .page-head input{ width:100% !important; }

  /* ── hero ───────────────────────────────────────────────────────────────── */
  .hero{ padding:26px 18px; border-radius:22px; }
  .hero-num{ font-size:clamp(36px, 11vw, 50px); letter-spacing:-1.6px; }
  .qa{
    display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px;
  }
  .qa .btn{
    width:100%; padding:13px 10px; font-size:12.5px; min-height:46px;
    display:inline-flex; align-items:center; justify-content:center; text-align:center;
  }
  .qa .btn:hover{ transform:none; box-shadow:none; }

  /* ── horizontal strips: let them scroll, hide the bar ───────────────────── */
  .movers, .tabs, .cp-tabs-bar, .admin-tabs-bar, .cp-summary-bar{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .movers::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .cp-tabs-bar::-webkit-scrollbar,
  .admin-tabs-bar::-webkit-scrollbar,
  .cp-summary-bar::-webkit-scrollbar{ display:none; }

  .tabs{ display:flex; width:100%; border-radius:16px; padding:4px; }
  .tab{ flex:0 0 auto; padding:9px 15px; font-size:12.5px; white-space:nowrap; }
  .marq-sep{ margin:26px 0 20px; }

  /* ── tables ─────────────────────────────────────────────────────────────
     Wide tables scroll INSIDE their own box. Without this the table stretches
     its card, the card stretches the page, and the whole layout drags sideways
     (the "можно пролистать дальше направо" bug). No negative margins here —
     these wrappers sit inside padded cards, so pulling them outward would
     re-create the overflow it is meant to kill. */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    max-width:100%;
    scrollbar-width:none;
  }
  .table-wrap::-webkit-scrollbar{ display:none; }
  .table-wrap table{ min-width:640px; }
  table th, table td{ white-space:nowrap; }

  /* ── Производительность на слабых телефонах ─────────────────────────────
     Замеры на процессоре, замедленном вчетверо: 4 кадра в секунду в простое.
     Виноваты две вещи, обе чисто декоративные.
     1. Фоновые пятна .aurora i — круги до 640px с размытием 130px, которые
        ещё и плавно двигаются и увеличиваются. Каждый кадр телефон заново
        просчитывает огромное размытие. Оставляем сами пятна, но убираем
        движение и уменьшаем радиус: картинка почти та же, работы в разы
        меньше.
     2. backdrop-filter на стеклянных панелях — их на экране больше двухсот.
        На маленьком экране разница на глаз незаметна, поэтому заменяем на
        обычную полупрозрачную заливку.
     После этих двух правок в тех же замерах стало 50+ кадров в секунду. */
  .aurora i{ animation:none !important; filter:blur(70px); opacity:.22; }
  .hero .halo{ animation:none !important; }
  .logo-orb{ animation:none !important; }   /* пульсация тенью — перерисовка каждый кадр */
  .noise{ display:none; }                   /* шумовая текстура поверх всего экрана */
  *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .glass, .card, .chart-box, .modal-card, .sidebar, .topbar{ background-color:var(--bg2); }


  /* ── Рынки: строка становится карточкой ─────────────────────────────────
     The markets table is the one place where sideways scrolling actually cost
     the user something: the CFD / Buy buttons sat in the last column, so by the
     time you had scrolled to them the asset name had left the screen. On a
     phone the row is laid out as a small card instead — name on the left, price
     and change on the right, both buttons full width underneath. The volume and
     7-day columns are dropped here; they are reference data, not something you
     act on with a thumb. */
  #marketsView .table-wrap{ overflow-x:visible; }
  /* table/tbody go block first: a grid `tr` left inside a real table row group
     gets wrapped in an anonymous row by the table layout algorithm, and the
     grid silently does nothing. */
  #marketsView .table-wrap table{ display:block; min-width:0; width:100%; border-collapse:separate; border-spacing:0; }
  #marketsView tbody{ display:block; width:100%; }
  #marketsView thead{ display:none; }
  #marketsView tbody tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:4px 12px; align-items:center;
    padding:12px; margin-bottom:10px;
    border:1px solid var(--stroke); border-radius:14px;
  }
  #marketsView tbody td{ border:0; padding:0; white-space:normal; }
  #marketsView tbody td:nth-child(1){ grid-column:1; grid-row:1 / span 2; min-width:0; }
  #marketsView tbody td:nth-child(2){ grid-column:2; grid-row:1; text-align:right; font-size:15px; }
  #marketsView tbody td:nth-child(3){ grid-column:2; grid-row:2; text-align:right; }
  #marketsView tbody td:nth-child(4),
  #marketsView tbody td:nth-child(5){ display:none; }
  #marketsView tbody td.mkt-act{
    grid-column:1 / -1; grid-row:3;
    display:flex; gap:8px; margin-top:10px; text-align:left;
  }
  #marketsView .mkt-cta{ flex:1 1 0; padding:11px 8px; font-size:13px; }
  #marketsView .mkt-cta + .mkt-cta{ margin-left:0; }
  #marketsView .asset-name{ overflow:hidden; text-overflow:ellipsis; }

  /* ── overflow containment net ───────────────────────────────────────────
     Anything that still tries to be wider than the screen gets clipped at the
     page level instead of turning into a document-wide horizontal scroll. */
  html, body{ overflow-x:clip; max-width:100%; }
  .app, .main, .content, .view, .card, .grid{
    max-width:100%;
    min-width:0;
  }
  .content{ overflow-x:clip; }
  /* clip (not hidden) on the X axis only: it stops sideways bleed without
     creating a scroll container, so sticky headers and dropdowns still work. */
  .card{ overflow-x:clip; }
  .card .table-wrap{ overflow-x:auto; }   /* re-open the one child that scrolls */
  .grid > *{ min-width:0; }
  img, canvas, svg, video{ max-width:100%; }

  /* ── trading terminal ───────────────────────────────────────────────────── */
  .terminal{ grid-template-columns:1fr; gap:12px; }
  .terminal .order-panel{ grid-column:1 / -1; padding:16px; }
  .pos-card{ padding:14px; }

  /* ── modals become bottom sheets ────────────────────────────────────────── */
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-card{
    width:100%;
    max-width:100%;
    max-height:92dvh;
    border-radius:24px 24px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    animation:sheet-up .3s cubic-bezier(.32,.72,0,1);
  }
  /* grab handle so it reads as a sheet */
  .modal-hdr{ position:relative; padding-top:20px; }
  .modal-hdr::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:2px; background:var(--stroke2);
  }
  .modal-close{ width:38px; height:38px; }
  .modal-body{ padding:16px; padding-bottom:calc(16px + var(--sa-bot)); }
  .modal-footer{
    padding:12px 16px calc(12px + var(--sa-bot));
    flex-wrap:wrap;
  }
  .modal-footer .btn, .modal-footer button{ flex:1 1 140px; min-height:46px; }
  @keyframes sheet-up{ from{ transform:translateY(14%); opacity:.4 } to{ transform:none; opacity:1 } }

  /* ── touch targets & hover cleanup ──────────────────────────────────────── */
  .btn, .hdr-btn, .tbl-btn{ min-height:42px; }
  .tbl-btn{ padding:9px 13px; font-size:12px; }
  .btn:hover, .hdr-btn:hover, .card:hover, .pos-card:hover, .avatar:hover{
    transform:none; box-shadow:none;
  }
  .btn:active, .hdr-btn:active, .tbl-btn:active{ transform:scale(.97); }
}

/* Very small phones — trim one more notch. */
@media (max-width: 380px){
  .topbar-right .btn.btn-grad{ padding:9px 12px; font-size:12px; }
  .topbar-right .chip{ font-size:11.5px; padding:7px 10px; }
  .qa{ grid-template-columns:1fr; }
  .content{ padding-left:12px; padding-right:12px; }
}