/* Dedicated mobile UI layer. Loaded after desktop styles. */
@media (max-width: 820px) {
  :root {
    --m-gap: 12px;
    --m-radius: 16px;
    --m-top: 64px;
    --m-bottom: 72px;
  }
  html, body { width: 100%; min-width: 0 !important; overflow-x: hidden !important; }
  body { background: #061116; padding: 0 0 calc(var(--m-bottom) + env(safe-area-inset-bottom)) !important; }
  body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 50% -10%,rgba(22,211,203,.13),transparent 36%); z-index:-1; }

  /* Compact mobile header */
  .navbar { position:fixed !important; top:0; left:0; right:0; z-index:1000; height:calc(var(--m-top) + env(safe-area-inset-top)) !important; min-height:0 !important; padding:env(safe-area-inset-top) 12px 0 !important; background:rgba(3,15,20,.96) !important; border-bottom:1px solid rgba(37,221,211,.22); backdrop-filter:blur(16px); }
  .nav-inner { height:var(--m-top) !important; min-height:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; }
  .logo { flex:1 1 auto; min-width:0; gap:8px !important; }
  .logo svg { width:30px !important; height:30px !important; flex:0 0 30px; }
  .logo span { display:block; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px !important; font-weight:800; }
  .logo small, .nav-promo { display:none !important; }
  .nav-right { display:flex !important; align-items:center; gap:6px !important; margin:0 !important; }
  .nav-right .btn { min-height:36px !important; height:36px; padding:0 10px !important; border-radius:10px !important; font-size:12px !important; }
  .nav-right .btn-tg { width:36px !important; min-width:36px; padding:0 !important; }
  .nav-right #userName, .nav-right .user-name { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Original nav becomes app-like fixed bottom navigation */
  .nav-menu { position:fixed !important; left:0; right:0; bottom:0; z-index:1100; height:calc(var(--m-bottom) + env(safe-area-inset-bottom)); padding:7px 8px env(safe-area-inset-bottom) !important; background:rgba(3,15,20,.98) !important; border-top:1px solid rgba(37,221,211,.22); display:flex !important; align-items:stretch; gap:4px !important; overflow-x:auto !important; overflow-y:hidden; scrollbar-width:none; box-shadow:0 -10px 28px rgba(0,0,0,.35); }
  .nav-menu::-webkit-scrollbar { display:none; }
  .nav-link { flex:1 0 64px !important; min-width:64px; max-width:96px; height:58px !important; min-height:58px !important; padding:7px 5px !important; border:0 !important; border-radius:12px !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#78939b !important; font-size:10px !important; line-height:1.1; text-align:center; background:transparent !important; white-space:nowrap; }
  .nav-link::before { content:"•"; display:block; font-size:19px; line-height:14px; color:currentColor; }
  .nav-link.active { color:#33e5dc !important; background:rgba(24,214,204,.12) !important; box-shadow:inset 0 0 0 1px rgba(41,226,216,.18); }

  /* Page canvas */
  .main, .page-main, .bin-wrap, main.wrap, .wrap { width:100% !important; max-width:none !important; margin:0 !important; padding:calc(var(--m-top) + env(safe-area-inset-top) + 12px) var(--m-gap) 16px !important; min-height:100dvh; }
  .global-notice-bar, .top-announcement, .announcement-bar { position:relative !important; top:auto !important; width:100% !important; max-width:none !important; height:34px !important; margin:0 0 10px !important; border-radius:10px; overflow:hidden !important; background:rgba(16,45,48,.72) !important; border:1px solid rgba(50,229,219,.18) !important; }
  .global-notice-track, .top-announcement-text, .announcement-text { min-height:32px; line-height:32px !important; font-size:14px !important; font-weight:700 !important; color:#fff !important; text-shadow:0 0 8px rgba(255,255,255,.3); }

  /* Homepage */
  .intro { height:auto !important; min-height:0 !important; margin:0 0 12px !important; padding:18px 14px !important; border-radius:var(--m-radius) !important; background:linear-gradient(145deg,rgba(10,43,48,.86),rgba(4,20,26,.95)) !important; overflow:visible !important; }
  .intro h1 { margin:0 0 7px !important; font-size:27px !important; line-height:1.15 !important; }
  .intro > p { margin:0 !important; font-size:13px !important; line-height:1.55; }
  .intro-tags { margin-top:12px !important; display:grid !important; grid-template-columns:1fr !important; gap:7px !important; }
  .tag { justify-content:flex-start !important; min-height:38px; border-radius:10px !important; }
  .workspace { display:flex !important; flex-direction:column !important; gap:12px !important; }
  .panel { width:100% !important; min-width:0 !important; border-radius:var(--m-radius) !important; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.2); }
  .panel-detect { order:1; }
  .panel-task { order:2; }
  .panel-stats { order:3; }
  .panel-header { min-height:50px !important; padding:11px 12px !important; align-items:center !important; }
  .panel-header h2 { font-size:15px !important; }
  .panel-actions { width:100% !important; display:grid !important; grid-template-columns:1fr 44px 44px !important; gap:7px !important; margin-top:8px; }
  .panel-actions .gate-select { grid-column:auto !important; min-width:0 !important; }
  .panel-body { padding:12px !important; }
  textarea { min-height:220px !important; border-radius:12px !important; font-size:14px !important; line-height:1.6 !important; }
  .panel-footer { padding:12px !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .submit-info { width:100% !important; }
  .btn-start { width:100% !important; min-height:50px !important; border-radius:12px !important; font-size:16px !important; }
  .task-circle { transform:scale(.82); margin:-10px auto; }
  .task-info, .task-data, .result-stats, .records-summary { grid-template-columns:1fr 1fr !important; gap:8px !important; }

  /* Generic page cards */
  .page-header { margin:0 0 12px !important; padding:16px 14px !important; border-radius:var(--m-radius) !important; }
  .page-header h1 { font-size:23px !important; line-height:1.2; }
  .card, .page-card, .panel, .lookup-card, .generator-card, .invite-card { border-radius:var(--m-radius) !important; }
  .price-grid, .generator-grid, .lookup-grid, .invite-grid, .auth-layout, .register-layout { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }

  /* Recharge */
  .recharge-shell { padding-left:var(--m-gap) !important; padding-right:var(--m-gap) !important; }
  .new-user-tip { margin-bottom:12px !important; padding:13px !important; border-radius:14px !important; display:grid !important; grid-template-columns:42px 1fr !important; }
  .new-user-tip .btn { grid-column:1/-1; width:100%; margin-top:4px; }
  .price-grid { grid-template-columns:1fr !important; }
  .price-card { min-height:0 !important; padding:20px 14px 14px !important; border-radius:16px !important; }
  .price-amount { font-size:34px !important; }
  .price-card .btn { min-height:46px; border-radius:11px !important; }
  .popular-tag { top:8px !important; left:50% !important; right:auto !important; transform:translateX(-50%); }
  .recharge-selection, .recharge-confirm { position:sticky; bottom:calc(var(--m-bottom) + 8px); z-index:30; border-radius:16px !important; box-shadow:0 12px 36px rgba(0,0,0,.45); }

  /* Tables become readable cards/scrolling surfaces */
  .table-wrap, .records-table, .history-table, .lookup-results { width:100% !important; overflow:auto !important; border-radius:14px; -webkit-overflow-scrolling:touch; }
  table { min-width:680px; font-size:12px !important; }
  th, td { padding:10px 9px !important; white-space:nowrap; }

  /* Forms and generators */
  .form-row, .form-grid, .generator-options, .bin-form-grid { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  input, select, textarea { width:100% !important; max-width:100% !important; min-height:46px; border-radius:11px !important; font-size:16px !important; }
  button, .btn { min-height:44px; }
  .generator-grid > *, .lookup-grid > * { min-width:0; }
  .brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .brand-card { min-height:84px; padding:11px !important; }
  .result-area, .generator-result { min-height:250px !important; }

  /* Auth */
  .auth-page { min-height:100dvh; }
  .auth-layout, .register-layout { padding-top:calc(var(--m-top) + env(safe-area-inset-top) + 16px) !important; }
  .auth-side, .register-side { display:none !important; }
  .auth-card, .login-card, .register-card { width:100% !important; max-width:none !important; margin:0 !important; padding:22px 16px !important; border-radius:20px !important; }

  /* Modals as bottom sheets */
  .modal-overlay { align-items:flex-end !important; padding:0 !important; }
  .modal-box, .upgrade-modal-content { width:100% !important; max-width:none !important; max-height:90dvh !important; margin:0 !important; border-radius:22px 22px 0 0 !important; overflow:auto !important; padding-bottom:env(safe-area-inset-bottom); }
  .modal-header { position:sticky; top:0; z-index:4; backdrop-filter:blur(16px); }

  /* Hide decorative-only desktop extras */
  .desktop-only, .auth-decoration, .register-decoration { display:none !important; }
}

@media (max-width: 390px) {
  :root { --m-gap:9px; }
  .logo span { max-width:40vw; font-size:14px !important; }
  .nav-right .btn { padding:0 8px !important; }
  .nav-link { min-width:60px !important; font-size:9px !important; }
  .intro h1 { font-size:24px !important; }
  .brand-grid { grid-template-columns:1fr !important; }
  .task-info, .task-data, .result-stats, .records-summary { grid-template-columns:1fr !important; }
}