/* =====================================================================
   compact.css — density overrides for narrow phones. Loaded LAST so it
   wins over same-specificity rules in the other sheets.
   ≤359px CSS width = 720p Android (DPR 2.25 → 320px), small iPhones,
   or phones with enlarged display zoom. Everything steps down ~8–12%.
   ===================================================================== */
@media (max-width: 359px) {
  :root { --pad: 12px; --topbar-h: 46px; --tabbar-h: 50px; --r: 12px; --r-lg: 16px; --r-xl: 20px; }
  body { font-size: 13.5px; }

  /* top bar */
  .brand-logo { width: 28px; height: 28px; border-radius: 9px; }
  .brand-text b { font-size: 15px; }
  .brand-text small { display: none; }
  .topbar-title { font-size: 14px; }
  .icon-btn { width: 32px; height: 32px; }
  .tb-avatar { width: 28px; height: 28px; font-size: 12px; }

  /* buttons / inputs */
  .btn { height: 40px; padding: 0 14px; font-size: 13.5px; }
  .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
  .btn-lg { height: 44px; font-size: 14px; }
  .inp { height: 42px; }

  /* home */
  .carousel { aspect-ratio: 2 / 1; margin-bottom: 10px; }
  .carousel .slide-cap b { font-size: 14px; }
  .carousel .slide-cap span { font-size: 11px; }
  .marquee { height: 32px; margin-bottom: 10px; }
  .marquee .mq-in span { font-size: 12px; }
  .func-grid { gap: 6px; }
  .func-btn { padding: 8px 2px 7px; gap: 5px; }
  .func-ic { width: 36px; height: 36px; border-radius: 11px; }
  .func-ic svg { width: 19px; height: 19px; }
  .func-btn span { font-size: 10.5px; white-space: normal; line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .stat-strip { gap: 6px; margin-bottom: 10px; }
  .stat-strip .st { padding: 7px 8px; border-radius: 10px; }
  .stat-strip .st b { font-size: 14px; }
  .stat-strip .st span { font-size: 10px; }
  .sec-title { margin: 14px 0 8px; }
  .sec-title h2 { font-size: 15px; }
  .sec-title h2::before { height: 14px; }

  /* cards */
  .card { padding: 12px; margin-bottom: 10px; }
  .mt-grid, .vd-grid, .rel-grid { gap: 8px; }
  .mt-bot { padding: 30px 8px 8px; }
  .mt-name { font-size: 13px; }
  .mt-meta, .mt-rate { font-size: 10.5px; }
  .badge-live { height: 18px; font-size: 9.5px; padding: 0 6px 0 5px; }
  .verified { width: 18px; height: 18px; }
  .verified svg { width: 11px; height: 11px; }
  .vip-tag { height: 17px; font-size: 9.5px; padding: 0 6px; }
  .vd-title { font-size: 12px; min-height: 38px; }
  .rv-card { padding: 10px 12px; }
  .rv-body { font-size: 13px; }
  .info-row { padding: 11px 12px; gap: 8px; }
  .info-row .ir-lbl { width: 64px; font-size: 12px; }
  .info-row .ir-val { font-size: 13px; }
  .stars i { width: 12px; height: 12px; }

  /* mine / vip / records */
  .profile-card { padding: 14px 12px; }
  .profile-top .p-name { font-size: 16px; }
  .balance-box b { font-size: 24px; }
  .stat3 .st b { font-size: 18px; }
  .list-row { padding: 10px 12px; }
  .lr-lbl { font-size: 13.5px; }
  .vip-card { width: 84%; padding: 16px 14px; }
  .vip-card .vc-name { font-size: 17px; }
  .vip-card .vc-price { font-size: 26px; }
  .rec-item { padding: 9px 10px; }

  /* tab bar / FAB */
  .tab { font-size: 10px; }
  .tab-ic, .tab-ic svg { width: 20px; height: 20px; }
  .cs-fab { width: 44px; height: 44px; right: 12px; }
  .cs-ic { width: 21px; height: 21px; }
}

/* Very short viewports (landscape phones): keep chrome slim */
@media (max-height: 480px) {
  :root { --topbar-h: 44px; --tabbar-h: 46px; }
  .tab-tx { display: none; }
}