/* Mobile V4 - one clean mobile layout. Desktop is untouched. */
@media (max-width: 820px) {
  :root { --m4-top:56px; --m4-bottom:64px; --m4-pad:12px; }
  * { box-sizing:border-box; }
  html, body { width:100%; overflow-x:hidden; }
  body.mobile-v4 {
    margin:0 !important;
    background:#061116 !important;
    padding-bottom:calc(var(--m4-bottom) + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-v4::before { opacity:.18 !important; }

  /* Header: brand + account only */
  body.mobile-v4 .navbar {
    position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:2500 !important;
    height:calc(var(--m4-top) + env(safe-area-inset-top)) !important;
    padding:env(safe-area-inset-top) 10px 0 !important;
    background:#061116 !important; border-bottom:1px solid rgba(37,214,204,.22) !important;
    box-shadow:none !important;
  }
  body.mobile-v4 .nav-inner { height:var(--m4-top) !important; min-height:0 !important; padding:0 !important; gap:8px !important; }
  body.mobile-v4 .logo { min-width:0 !important; gap:8px !important; }
  body.mobile-v4 .logo svg { width:25px !important; height:25px !important; flex:0 0 25px !important; }
  body.mobile-v4 .logo span { font-size:15px !important; line-height:1.1 !important; max-width:52vw !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  body.mobile-v4 .logo small { display:none !important; }
  body.mobile-v4 .nav-menu,
  body.mobile-v4 .nav-promo,
  body.mobile-v4 .btn-tg,
  body.mobile-v4 .secondary-action { display:none !important; }
  body.mobile-v4 .nav-right { margin-left:auto !important; gap:6px !important; flex:0 0 auto !important; }
  body.mobile-v4 .nav-right .btn { min-height:34px !important; height:34px !important; padding:0 10px !important; font-size:12px !important; border-radius:9px !important; }

  /* Page canvas */
  body.mobile-v4 .main,
  body.mobile-v4 .page-main,
  body.mobile-v4 main.wrap,
  body.mobile-v4 .wrap,
  body.mobile-v4 .bin-wrap {
    width:100% !important; max-width:none !important;
    padding:calc(var(--m4-top) + env(safe-area-inset-top) + 10px) var(--m4-pad) 16px !important;
    margin:0 !important;
  }

  /* One simple announcement line below the fixed header */
  body.mobile-v4 .global-notice-bar,
  body.mobile-v4 .top-announcement,
  body.mobile-v4 .announcement-bar {
    position:relative !important; inset:auto !important;
    width:100% !important; height:32px !important; min-height:32px !important;
    margin:0 0 10px !important; padding:0 !important;
    border:1px solid rgba(45,220,210,.22) !important; border-radius:9px !important;
    overflow:hidden !important; background:#0a1b21 !important;
  }
  body.mobile-v4 .global-notice-track,
  body.mobile-v4 .top-announcement-text,
  body.mobile-v4 .announcement-text {
    display:inline-block !important; white-space:nowrap !important;
    line-height:30px !important; font-size:14px !important; font-weight:700 !important;
    color:#fff !important; text-shadow:none !important;
  }

  /* Hide desktop hero/analytics clutter on phone */
  body.mobile-v4 .intro { display:none !important; }
  body.mobile-v4 .mecha-analytics,
  body.mobile-v4 .mecha-metrics,
  body.mobile-v4 .analytics-card,
  body.mobile-v4 .decorative-chart,
  body.mobile-v4 .radar-visual,
  body.mobile-v4 .holo-platform { display:none !important; }

  /* All pages: one clean column */
  body.mobile-v4 .workspace,
  body.mobile-v4 .page-grid,
  body.mobile-v4 .price-grid,
  body.mobile-v4 .generator-grid,
  body.mobile-v4 .lookup-grid,
  body.mobile-v4 .invite-grid,
  body.mobile-v4 .auth-layout,
  body.mobile-v4 .content-grid {
    display:flex !important; flex-direction:column !important; gap:10px !important;
    width:100% !important; grid-template-columns:none !important;
  }
  body.mobile-v4 .workspace > *,
  body.mobile-v4 .page-grid > *,
  body.mobile-v4 .generator-grid > *,
  body.mobile-v4 .lookup-grid > * { width:100% !important; min-width:0 !important; }

  body.mobile-v4 .panel,
  body.mobile-v4 .card,
  body.mobile-v4 .page-card,
  body.mobile-v4 .lookup-card,
  body.mobile-v4 .generator-card,
  body.mobile-v4 .invite-card,
  body.mobile-v4 .auth-card {
    margin:0 !important; border-radius:12px !important;
    border:1px solid rgba(39,211,201,.2) !important;
    box-shadow:none !important; background:#08171d !important;
  }
  body.mobile-v4 .panel-header,
  body.mobile-v4 .card-header {
    min-height:44px !important; height:auto !important; padding:10px 11px !important;
    display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important;
  }
  body.mobile-v4 .panel-header h2,
  body.mobile-v4 .card-header h2 { font-size:14px !important; margin:0 !important; }
  body.mobile-v4 .panel-body,
  body.mobile-v4 .card-body { padding:10px !important; }
  body.mobile-v4 .panel-footer,
  body.mobile-v4 .card-footer { padding:10px !important; }

  /* Detection page */
  body.mobile-v4 .panel-detect { order:1 !important; }
  body.mobile-v4 .panel-task { order:2 !important; }
  body.mobile-v4 .panel-detect .panel-header { align-items:stretch !important; }
  body.mobile-v4 .panel-detect .panel-header h2 { width:100% !important; }
  body.mobile-v4 .panel-actions {
    width:100% !important; margin:0 !important;
    display:grid !important; grid-template-columns:minmax(0,1fr) 62px 62px !important; gap:6px !important;
  }
  body.mobile-v4 .panel-actions .gate-select { width:100% !important; min-width:0 !important; }
  body.mobile-v4 .panel-actions .btn { width:100% !important; padding:0 6px !important; font-size:11px !important; }
  body.mobile-v4 textarea,
  body.mobile-v4 .textarea { width:100% !important; min-height:180px !important; max-height:46vh !important; font-size:14px !important; line-height:1.5 !important; border-radius:10px !important; }
  body.mobile-v4 .panel-detect .panel-footer { display:flex !important; flex-direction:column !important; gap:10px !important; }
  body.mobile-v4 .stats-box { width:100% !important; min-height:54px !important; display:grid !important; grid-template-columns:1fr 1fr !important; }
  body.mobile-v4 .stat-divider { display:none !important; }
  body.mobile-v4 .stat-item { justify-content:center !important; padding:8px !important; }
  body.mobile-v4 .stat-label { font-size:11px !important; }
  body.mobile-v4 .stat-value { font-size:17px !important; }
  body.mobile-v4 .submit-info { width:100% !important; display:grid !important; grid-template-columns:1fr 1.45fr !important; align-items:center !important; gap:8px !important; }
  body.mobile-v4 .max-tip { font-size:11px !important; line-height:1.35 !important; margin:0 !important; }
  body.mobile-v4 .btn-start { width:100% !important; min-height:48px !important; font-size:16px !important; }

  /* Task card: compact and readable */
  body.mobile-v4 .panel-task .tip { display:none !important; }
  body.mobile-v4 .current-task-card {
    display:grid !important; grid-template-columns:92px minmax(0,1fr) !important;
    gap:10px !important; align-items:center !important; padding:10px !important;
  }
  body.mobile-v4 .task-circle { width:88px !important; height:88px !important; margin:0 !important; transform:none !important; }
  body.mobile-v4 .circle-percent { font-size:19px !important; }
  body.mobile-v4 .circle-label { font-size:10px !important; }
  body.mobile-v4 .task-info { min-width:0 !important; text-align:left !important; }
  body.mobile-v4 .task-name { font-size:14px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  body.mobile-v4 .task-time { font-size:11px !important; }
  body.mobile-v4 .task-data { grid-column:1 / -1 !important; width:100% !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:6px !important; }
  body.mobile-v4 .data-item { min-width:0 !important; padding:8px 4px !important; }
  body.mobile-v4 .data-label { font-size:10px !important; }
  body.mobile-v4 .data-value { font-size:15px !important; }
  body.mobile-v4 .task-bar { grid-column:1 / -1 !important; width:100% !important; }
  body.mobile-v4 .current-history-wrap { margin-top:8px !important; }
  body.mobile-v4 .current-history-head { font-size:12px !important; }
  body.mobile-v4 .history-inline-note { display:none !important; }

  /* Forms and cards */
  body.mobile-v4 input,
  body.mobile-v4 select,
  body.mobile-v4 button,
  body.mobile-v4 .btn { min-height:44px !important; border-radius:10px !important; }
  body.mobile-v4 input,
  body.mobile-v4 select { width:100% !important; font-size:14px !important; }
  body.mobile-v4 .form-row,
  body.mobile-v4 .form-grid,
  body.mobile-v4 .generator-options,
  body.mobile-v4 .bin-form-grid { display:flex !important; flex-direction:column !important; gap:8px !important; }
  body.mobile-v4 .brand-grid { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  body.mobile-v4 .brand-card { min-height:74px !important; padding:9px !important; }
  body.mobile-v4 .price-grid { display:flex !important; flex-direction:column !important; }
  body.mobile-v4 .price-card { width:100% !important; padding:16px 12px !important; }
  body.mobile-v4 .page-header { padding:10px !important; margin:0 0 10px !important; }
  body.mobile-v4 .page-header h1 { font-size:20px !important; }
  body.mobile-v4 .page-header p { font-size:12px !important; }

  /* Tables */
  body.mobile-v4 .table-wrap,
  body.mobile-v4 .records-table,
  body.mobile-v4 .history-table-wrap,
  body.mobile-v4 .lookup-results { width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  body.mobile-v4 table { min-width:680px !important; font-size:12px !important; }

  /* Login/register: remove left decoration */
  body.mobile-v4 .auth-visual,
  body.mobile-v4 .auth-left,
  body.mobile-v4 .register-visual { display:none !important; }
  body.mobile-v4 .auth-card { width:100% !important; max-width:none !important; padding:18px 14px !important; }

  /* Bottom nav */
  .mobile-bottom-nav-v4 {
    position:fixed; left:0; right:0; bottom:0; z-index:3000;
    height:calc(var(--m4-bottom) + env(safe-area-inset-bottom));
    padding:5px 5px env(safe-area-inset-bottom);
    display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
    background:#061116; border-top:1px solid rgba(45,220,210,.22);
    box-shadow:0 -5px 18px rgba(0,0,0,.32);
  }
  .mobile-bottom-nav-v4 a,
  .mobile-bottom-nav-v4 button {
    min-width:0 !important; min-height:54px !important; border:0 !important;
    background:transparent !important; color:#80969b !important; text-decoration:none !important;
    display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:3px !important; padding:4px 1px !important; border-radius:10px !important;
    font-size:10px !important; line-height:1 !important;
  }
  .mobile-bottom-nav-v4 svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .mobile-bottom-nav-v4 .active { color:#25ddd2 !important; background:rgba(37,221,210,.1) !important; }

  .mobile-more-sheet-v4 { position:fixed; inset:0; z-index:3100; display:none; align-items:flex-end; background:rgba(0,0,0,.62); }
  .mobile-more-sheet-v4.open { display:flex; }
  .mobile-more-card-v4 { width:100%; padding:10px 12px calc(15px + env(safe-area-inset-bottom)); background:#09181e; border-radius:18px 18px 0 0; border-top:1px solid rgba(45,220,210,.25); }
  .mobile-more-handle-v4 { width:38px; height:4px; border-radius:4px; background:#416069; margin:0 auto 11px; }
  .mobile-more-grid-v4 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .mobile-more-grid-v4 a { min-height:66px; color:#d6e9eb; text-decoration:none; border:1px solid rgba(45,220,210,.17); border-radius:11px; background:#0b2027; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:12px; }
  .mobile-more-grid-v4 svg { width:22px; height:22px; stroke:#2bded3; fill:none; stroke-width:1.8; }

  body.mobile-v4 .modal-overlay { z-index:3200 !important; padding:0 !important; align-items:flex-end !important; }
  body.mobile-v4 .modal-box,
  body.mobile-v4 .recharge-modal { width:100% !important; max-width:none !important; max-height:88vh !important; border-radius:18px 18px 0 0 !important; margin:0 !important; }
}

@media (max-width:390px) {
  :root { --m4-pad:9px; }
  body.mobile-v4 .logo span { max-width:46vw !important; font-size:14px !important; }
  body.mobile-v4 .brand-grid { grid-template-columns:1fr 1fr !important; }
  .mobile-more-grid-v4 { grid-template-columns:repeat(2,1fr); }
}


/* Mobile V4.1: announcement gets its own row; detection controls no longer overlap. */
@media (max-width: 820px) {
  :root { --m4-notice:36px; }

  body.mobile-v4 .site-announcement {
    display:flex !important;
    position:fixed !important;
    top:calc(var(--m4-top) + env(safe-area-inset-top)) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:var(--m4-notice) !important;
    min-height:var(--m4-notice) !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2450 !important;
    overflow:hidden !important;
    border-radius:0 !important;
    background:#08171d !important;
    border-top:0 !important;
    border-bottom:1px solid rgba(45,220,210,.24) !important;
    box-shadow:0 4px 10px rgba(0,0,0,.2) !important;
  }
  body.mobile-v4 .site-announcement-track {
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    display:flex !important;
    align-items:center !important;
  }
  body.mobile-v4 .site-announcement-track span {
    display:inline-block !important;
    min-width:100% !important;
    padding-left:100% !important;
    line-height:var(--m4-notice) !important;
    font-size:15px !important;
    font-weight:700 !important;
    color:#fff !important;
    text-shadow:0 0 6px rgba(255,255,255,.45) !important;
  }

  body.mobile-v4 .main,
  body.mobile-v4 .page-main,
  body.mobile-v4 main.wrap,
  body.mobile-v4 .wrap,
  body.mobile-v4 .bin-wrap {
    padding-top:calc(var(--m4-top) + var(--m4-notice) + env(safe-area-inset-top) + 10px) !important;
  }

  body.mobile-v4 .panel-detect .panel-header {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    overflow:visible !important;
  }
  body.mobile-v4 .panel-detect .panel-header h2 {
    width:100% !important;
    min-width:0 !important;
  }
  body.mobile-v4 .panel-actions {
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    overflow:visible !important;
  }
  body.mobile-v4 .panel-actions .gate-select {
    grid-column:1 / -1 !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 38px 0 12px !important;
    line-height:normal !important;
    font-size:14px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    background-position:right 12px center !important;
  }
  body.mobile-v4 .panel-actions .btn {
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }
}