/* ═══════════════════════════════════════════════════════════════
   DARKNET WEB PANEL — RESPONSIVE
   Breakpoints: 480 → 640 → 768 → 900 → 1024 → 1280 → 1440 → 2560+
   Mobile-first with iOS safe area & dvh support
   ═══════════════════════════════════════════════════════════════ */

/* ─── iOS Safe Area Custom Properties ─── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ─── Global touch baseline ─── */
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* ─── Prevent iOS font size bump on orientation change ─── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─── Global touch baseline — must be outside any media query ─── */
/* pp.html uses these universally; scoping them to classes misses dynamic elements */
* { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea, a, [role="button"] { touch-action: manipulation; }

/* ─── Momentum scrolling on all scroll containers ─── */
.tab-body, .sb-list, #amWrap, #msgList, .bulk-list, .modal, .adm-subtabs, .tabs {
  -webkit-overflow-scrolling: touch;
}
/* scroll-behavior smooth only where it doesn't fight programmatic scrollTop=0 */
.sb-list, #amWrap, .modal { scroll-behavior: smooth; }

/* ─── Overscroll containment — prevents page bounce on iOS ─── */
.tab-body, #amWrap, #msgList { overscroll-behavior-y: contain; }

/* ─── Image rendering on high-DPI ─── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .cat-svg, .ov-mini-cat { image-rendering: -webkit-optimize-contrast; }
}

/* ─── Dynamic viewport height (iOS Safari fix) ─── */
@supports (height: 100dvh) {
  #setup  { height: 100dvh; }
  #panel  { height: 100dvh; }
}

/* ─── Sidebar Mobile Overlay Backdrop ─── */
#sbOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 39;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

/* ─── Global table overflow fix (all screen sizes) ─── */
.tbl-wrap,
.adm-user-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl-wrap table   { min-width: 380px; }
.adm-table        { min-width: 520px; }

/* ════════════════════════════════════════════════════════════════
   ULTRAWIDE / 4K  (≥ 2560px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {
  .sb          { width: 320px; }
  .tb          { height: 68px; padding: 0 40px; gap: 14px; }
  .tb-logo     { font-size: 18px; }
  .tab-body    { padding: 36px 40px; }
  .stat-grid   { grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 36px; }
  .sv          { font-size: 68px; }
  .sc          { padding: 28px 24px; border-radius: 26px; }
  .adm-overview-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .adm-stat-num { font-size: 56px; }
  .setup-card  { max-width: 560px; padding: 52px 56px 48px; }
  .sw, .nuke-card { max-width: 780px; }
  .msg-txt, .am-txt { font-size: 15px; }
  .ov-banner   { padding: 32px 36px; }
  .ov-title    { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════
   LARGE SCREENS  (≥ 1440px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .stat-grid         { grid-template-columns: repeat(4, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(4, 1fr); }
  .setup-card        { max-width: 520px; }
}

/* ════════════════════════════════════════════════════════════════
   MEDIUM DESKTOP  (1280px – 1439px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1439px) {
  .stat-grid         { grid-template-columns: repeat(4, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════════
   SMALL DESKTOP / LAPTOP  (1024px – 1279px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .stat-grid         { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .sv                { font-size: 46px; }
  .adm-stat-num      { font-size: 40px; }
}

/* ════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE  (≤ 1023px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .stat-grid         { grid-template-columns: repeat(2, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid         { grid-template-columns: 1fr; }
  .det-hero          { flex-direction: column; text-align: center; gap: 16px; }
  .batt-hero         { text-align: center; }
  .det-actions       { flex-wrap: wrap; }
  .sb                { width: 240px; }
  .adm-section-row   { grid-template-columns: 1fr; }
  .adm-modal-grid    { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   TABLET PORTRAIT  (≤ 900px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .stat-grid         { grid-template-columns: repeat(2, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .sb                { width: 220px; }
  .sv                { font-size: 42px; }
  .adm-stat-num      { font-size: 38px; }
  .tbl-wrap table    { min-width: 420px; }
  .adm-section-row   { grid-template-columns: 1fr; }
  .adm-modal-grid    { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   SMALL TABLET  (≤ 768px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tb            { gap: 7px; padding: 0 12px; }
  .tb-logo       { font-size: 13px; letter-spacing: 0.3px; }
  .tb-pills      { gap: 3px; }
  .pill          { font-size: 9px; padding: 3px 8px; }
  #liveClock     { display: none; }

  .det-hero      { padding: 20px; }
  .dh-icon       { width: 64px; height: 64px; font-size: 32px; border-radius: 18px; }
  .dh-name       { font-size: 18px; }
  .batt-num      { font-size: 44px; }

  .sim-row       { grid-template-columns: 1fr; }
  .sim-tog       { flex-direction: column; }

  .sc            { padding: 18px 16px; }
  .sv            { font-size: 38px; }

  .adm-half      { padding: 12px; }
  .adm-stat-num  { font-size: 34px; }
  .adm-subtabs   { flex-wrap: wrap; }

  .note-card,
  .pin-card      { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  (≤ 640px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* — iOS input zoom prevention (any input < 16px triggers zoom) — */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input:not([type]),
  textarea,
  select { font-size: 16px !important; }

  /* — Setup Screen — */
  .setup-card    { padding: 28px 22px; border-radius: 20px; }
  .setup-h       { font-size: 26px; }
  .cat-svg       { width: 130px; height: 130px; }
  .cat-stage     { height: 158px; margin-bottom: 20px; }

  /* — Stat Grid — */
  .stat-grid     { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .sv            { font-size: 36px; }
  .sl            { font-size: 9px; }

  /* — Tabs — */
  .tabs          { padding: 0 8px; gap: 1px; overflow-x: auto; scroll-behavior: smooth; }
  .tab           { padding: 12px 9px; font-size: 8.5px; letter-spacing: 0.2px; white-space: nowrap; flex-shrink: 0; }
  .tab-body      { padding: 14px; }

  /* — Topbar — */
  .tb            { gap: 5px; padding: 0 10px; }
  .tb-btn        { display: none; }
  /* Show profile badge (icon only) + logout button */
  #userBadge     { display: flex !important; max-width: 34px !important; padding: 0 7px !important; overflow: hidden !important; }
  #userBadge > span:last-child { display: none !important; }
  .tb-btn:nth-of-type(2) { display: flex; }  /* logout ⏻ */
  .tb-pills      { display: none; }
  .tb-dots       { display: none; }
  #liveClock     { display: none; }

  /* — Sidebar Drawer — */
  .sb {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100% !important;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    box-shadow: 6px 0 50px rgba(0,0,0,.85), 6px 0 24px rgba(255,45,120,.15);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }
  /* Sidebar only appears when user explicitly opens it (NOT collapsed).
     ui.js adds sb-collapsed on panel open so sidebar is hidden by default —
     matching pp.html's model where content is accessible immediately. */
  #panel.open:not(.sb-collapsed) .sb  { transform: translateX(0); }
  /* Hide sidebar: panel collapsed (toggled off by ☰) */
  #panel.sb-collapsed .sb             { transform: translateX(-100%) !important; }
  /* Sidebar overlay backdrop — only when sidebar explicitly open */
  #panel.open:not(.sb-collapsed) #sbOverlay { display: block; }

  /* Main content top padding when sidebar open prevents content shift */
  .main { position: relative; }

  /* — Modals — */
  .overlay       { padding: 12px; align-items: flex-end; }
  .modal {
    padding: 24px;
    border-radius: 20px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--safe-bottom);
  }

  /* — Overview Banner — */
  .ov-banner     { flex-direction: column; text-align: center; padding: 18px 16px; gap: 12px; }
  .ov-mini-cat   { width: 62px; height: 62px; }
  .ov-title      { font-size: 15px; margin-bottom: 6px; }
  .ov-stats      { justify-content: center; gap: 10px; }
  .ov-s          { font-size: 11px; }

  /* — Device Detail — */
  .det-hero      { padding: 18px; gap: 12px; }
  .dh-icon       { width: 58px; height: 58px; font-size: 28px; border-radius: 16px; }
  .dh-name       { font-size: 16px; margin-bottom: 8px; }
  .batt-num      { font-size: 38px; letter-spacing: -2px; }
  .batt-label    { font-size: 8px; }
  .batt-bar      { width: 60px; margin: 0 auto; margin-top: 8px; }
  .pin-digits    { font-size: 22px; letter-spacing: 5px; }
  .pin-actions   { flex-wrap: wrap; gap: 5px; }

  /* — Sim Row — */
  .sim-row       { grid-template-columns: 1fr; }
  .sim-tog       { flex-direction: column; }
  .sim-card      { padding: 14px; }
  .sim-ph        { font-size: 17px; }

  /* — Device Actions — */
  .det-actions   { flex-wrap: wrap; gap: 7px; }
  .da            { padding: 11px 10px; font-size: 12px; min-width: calc(50% - 3.5px); }

  /* — Tab body: bottom nav is 60px fixed — must pad so content isn't hidden behind it — */
  .tab-body      { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }

  /* — Messages — */
  .msg-top       { flex-direction: column; align-items: flex-start; gap: 10px; }
  .msg-bar       { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sbox          { min-width: 0; width: 100%; flex-basis: 100%; order: -1; }
  .simbar        { flex-direction: column; gap: 10px; padding: 12px; }
  .ms-div        { display: none; }
  .msg-dn        { font-size: 13px; }
  .msg-cnt       { font-size: 10px; }
  /* Ensure message bubbles are always visible (animation:none can freeze opacity:0 states) */
  .msg-bub       { opacity: 1 !important; display: block !important; }
  /* core.js sets #msgList height via inline style; override so tab-body handles scroll */
  #msgList       { display: flex !important; flex-direction: column !important; height: auto !important; max-height: none !important; overflow-y: visible !important; min-height: 0 !important; }

  /* — All Messages — */
  #amWrap        { height: calc(100vh - 310px) !important; height: calc(100dvh - 310px) !important; }
  .am-card       { flex-direction: column; gap: 8px; }
  .am-left       { min-width: unset; max-width: unset; display: flex; align-items: center; gap: 10px; }
  .am-cn         { font-size: 12px; }
  .am-id, .am-name, .am-num, .am-note { display: inline; }
  .am-dt         { margin-left: 0; }

  /* — Send SMS — */
  .sw            { max-width: 100%; }
  .sc2           { padding: 20px; }
  .sc2-t         { font-size: 17px; }
  .sc2-s         { font-size: 11px; margin-bottom: 16px; }
  .sinp, .sarea  { font-size: 16px; /* prevent iOS zoom */ }
  .fi            { font-size: 16px; /* prevent iOS zoom */ }
  .otp-note-inp  { font-size: 16px; }

  /* — Nuke Panel — */
  .nuke-card     { padding: 20px; max-width: 100%; }
  .nuke-inp      { font-size: 16px; }
  .nuke-area     { font-size: 16px; }

  /* — Toast — */
  .toast {
    white-space: normal;
    text-align: center;
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    bottom: calc(20px + var(--safe-bottom));
    transform: translateY(20px);
    border-radius: 16px;
    font-size: 12px;
    padding: 11px 20px;
  }
  .toast.show { transform: translateY(0); }

  /* — OTP Bar — */
  #otpBar {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 0;
    padding: 8px 14px;
    gap: 8px;
  }
  #otpBar.show   { height: auto !important; min-height: 52px; }
  .otp-num       { font-size: 22px; letter-spacing: 4px; order: 1; }
  .otp-lbl       { order: 0; }
  .otp-src       { width: 100%; order: 3; font-size: 9px; }
  .otp-cpbtn     { order: 2; padding: 6px 14px; font-size: 10px; }
  .otp-x         { order: 4; flex-shrink: 0; }

  /* — Admin Panel — */
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .adm-subtabs   { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-subtab    { flex-shrink: 0; padding: 8px 10px; font-size: 8.5px; }
  .adm-stat-num  { font-size: 30px; }
  .adm-stat-card { padding: 14px; border-radius: 14px; }
  .adm-search-bar { flex-wrap: wrap; }
  .adm-settings-row { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* — Tables — */
  .tbl-wrap table   { min-width: 420px; }
  .adm-table        { min-width: 560px; }
  .tbl-wrap th, .tbl-wrap td { padding: 9px 12px; }
  .adm-table th, .adm-table td { padding: 9px 10px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════
   TINY PHONES  (≤ 480px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stat-grid     { grid-template-columns: 1fr 1fr; gap: 7px; }
  .sv            { font-size: 30px; }
  .sl            { font-size: 8.5px; }
  .sc            { padding: 14px 12px; border-radius: 16px; }

  .setup-card    { padding: 22px 16px; }
  .setup-h       { font-size: 22px; }
  .cat-svg       { width: 118px; height: 118px; }
  .cat-stage     { height: 144px; }

  .tab           { padding: 11px 7px; font-size: 8px; letter-spacing: 0; }
  .tabs          { gap: 0; padding: 0 6px; }

  .da            { padding: 10px 8px; font-size: 11px; }

  .adm-subtab    { font-size: 8px; padding: 7px 6px; }
  .adm-overview-grid { gap: 6px; }
  .adm-stat-num  { font-size: 26px; letter-spacing: -1px; }
  .adm-stat-lbl  { font-size: 8.5px; }

  .pin-digits    { font-size: 18px; letter-spacing: 3px; }
  .batt-num      { font-size: 32px; }
  .dh-name       { font-size: 15px; }
  .dh-icon       { width: 52px; height: 52px; font-size: 26px; }
  .dh-badges     { justify-content: center; }

  .nuke-card     { padding: 16px; }
  .otp-num       { font-size: 20px; letter-spacing: 3px; }

  .tb-logo       { font-size: 11px; letter-spacing: 0; }
}

/* ════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE  (short viewport, ≤ 430px tall)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 896px) and (max-height: 430px) and (orientation: landscape) {
  .tb            { height: 44px; }
  .tabs          { overflow-x: auto; }

  #setup         { padding: 12px; }
  .cat-stage     { height: 110px; margin-bottom: 10px; }
  .cat-svg       { width: 90px; height: 90px; }
  .setup-h       { font-size: 20px; }
  .setup-sub     { margin-bottom: 12px; font-size: 11px; }
  .setup-card    { padding: 20px 18px; }
  .cta           { padding: 13px; }

  .stat-grid     { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sv            { font-size: 28px; }
  .tab-body      { padding: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   HIGH-DPI / RETINA
   ════════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  ::-webkit-scrollbar { width: 2px; }
}

/* ════════════════════════════════════════════════════════════════
   TOUCH DEVICES — performance optimizations
   ════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Kill expensive repaints */
  .adm-stat-card::before            { box-shadow: none !important; }
  .adm-stat-card:hover              { transform: none !important; }
  .tb-gl                            { animation: none !important; -webkit-background-clip: text; }
  .gold-grad                        { animation: none !important; }
  .adm-toggle input:checked + .adm-toggle-slider { box-shadow: none; }
  .adm-act-btn:hover                { box-shadow: none; }
  .adm-btn-primary:hover            { box-shadow: none; }
  .overlay                          { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #apBtn                            { display: none; }
  #otpBar                           { box-shadow: none; }
  .sc:hover                         { transform: none; }
  .ic:hover                         { transform: none; }
  .da:hover                         { transform: none; }

  /* Minimum tap target sizes (WCAG 2.5.5 — 44×44px) */
  .tab                              { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .tb-btn                           { min-height: 36px; min-width: 36px; }
  .mbtn, .mfb                       { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
  .da                               { min-height: 44px; }
  .sbf                              { min-height: 36px; }
  .sfbtn                            { min-height: 44px; }
  .stb                              { min-height: 44px; }
  .adm-subtab                       { min-height: 36px; }
  .adm-btn, .adm-act-btn            { min-height: 36px; }
  .dev-item                         { min-height: 52px; }

  /* Bigger delete buttons for touch */
  .msg-del-btn, .am-del-btn         { width: 34px; height: 34px; border-radius: 8px; }

  /* Always show delete buttons on touch (no hover) */
  .msg-bub .msg-del-btn             { background: rgba(255,69,96,.07); border-color: rgba(255,69,96,.18); color: rgba(255,69,96,.55); }
  .am-card .am-del-btn              { background: rgba(255,69,96,.07); border-color: rgba(255,69,96,.18); color: rgba(255,69,96,.55); }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:      0.01ms !important;
  }
  .cat-wrap    { animation: none; }
  .ov-mini-cat { animation: none; }
  #sakuraCanvas { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   ALL-SCREEN COMPATIBILITY v2
   Covers: laptop · tablet · phone · tiny · landscape · 4K
   ════════════════════════════════════════════════════════════════ */

/* ─── Base (all sizes): new multi-send elements ─── */
.sms-mode-tog { gap: 8px; }
.smode-btn    { min-height: 42px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#sMultiInp    { resize: vertical; }
.multi-hint   { line-height: 1.6; }

/* ─── Prevent horizontal overflow without touching scroll containers ─── */
/* NOTE: Never put overflow-x:hidden on .pane or .tab-body — breaks iOS Safari touch scroll */
.sw, .nuke-card, .sc2, .msg-top, .msg-bar { max-width: 100%; box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════════
   WIDE LAPTOP / LARGE DESKTOP  (≥ 1600px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .sw, .nuke-card { max-width: 700px; }
  .tab-body       { padding: 28px 36px; }
  .stat-grid      { gap: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   LAPTOP  (1024px – 1599px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1599px) {
  .sw, .nuke-card { max-width: 640px; }
  .tab-body       { padding: 22px 26px; }
}

/* ════════════════════════════════════════════════════════════════
   TABLET  (641px – 1023px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1023px) {
  /* Topbar: condensed, no decorative dots, hide PING */
  .tb          { gap: 7px; padding: 0 14px; }
  .tb-dots     { display: none; }
  .tb-logo     { font-size: 13px; }
  .pill        { font-size: 9px; padding: 3px 8px; }
  #apBtn       { display: none; }

  /* SIM toggle always horizontal on tablet */
  .sim-tog     { flex-direction: row !important; }

  /* Send SMS form full-width */
  .sw          { max-width: 100%; }
  .sc2         { padding: 22px 24px; }

  /* Nuke max-width */
  .nuke-card   { max-width: 100%; }

  /* Tabs condensed */
  .tab         { padding: 14px 11px; font-size: 10px; }
  .tab-body    { padding: 18px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   PHONE — additions on top of existing ≤ 640px rules
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* — Topbar: also show BULK alongside user badge + logout — */
  #bulkPanelBtn { display: flex !important; padding: 0 8px !important; font-size: 9px !important; height: 30px !important; }

  /* — SIM toggle: keep side-by-side even on phone — */
  .sim-tog     { flex-direction: row !important; gap: 8px; }
  .sim-col     { flex: 1; min-width: 0; }
  .sntxt       { font-size: 11px; }
  .cpb         { font-size: 9px; padding: 3px 8px; }

  /* — Send form full width — */
  .sw          { max-width: 100% !important; padding: 0 !important; }
  .sc2         { border-radius: 16px; padding: 18px 16px; }
  .sc2-t       { font-size: 17px; }
  .sc2-s       { margin-bottom: 16px; }
  .ddisp       { padding: 10px 12px; gap: 10px; }

  /* — Multi Send — */
  .sms-mode-tog { margin: 10px 0 12px; gap: 6px; }
  .smode-btn    { padding: 11px 6px; font-size: 11px; }
  .multi-hint   { font-size: 10px; padding: 7px 10px; }
  #sMultiInp    { height: 115px; font-size: 16px !important; }
  #sMultiCount  { font-size: 10px; margin-bottom: 8px; }
  #sMultiBtn    { font-size: 13px; }

  /* — Nuke: compact — */
  .nuke-card    { max-width: 100%; padding: 18px 16px; border-radius: 18px; }
  .nuke-stat-box { padding: 12px; }

  /* — Modal: respects safe area — */
  .overlay      { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)); }

  /* — Stat cards: prevent text overflow — */
  .sc           { word-break: break-word; min-width: 0; }
  .sv           { line-height: 1; }

  /* — All messages height: match content area — */
  #amWrap       { height: calc(100dvh - 305px) !important; height: calc(100vh - 305px) !important; }

  /* — Tabs: force scroll, no wrap — */
  .tabs         { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .tab          { scroll-snap-align: start; }
}

/* ════════════════════════════════════════════════════════════════
   VERY SMALL PHONES  (≤ 380px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .tab          { padding: 10px 5px; font-size: 7.5px; letter-spacing: 0; }
  .tb-logo      { font-size: 10px; letter-spacing: 0; }
  .sc2-t        { font-size: 15px; }
  .sv           { font-size: 26px; }
  .smode-btn    { font-size: 10px; padding: 9px 4px; }
  .multi-hint   { font-size: 9px; padding: 6px 8px; }
  #sMultiInp    { height: 100px; }
  .setup-h      { font-size: 20px; }
  .cat-svg      { width: 110px; height: 110px; }
  .cat-stage    { height: 136px; }
  .da           { padding: 9px 7px; font-size: 10.5px; }
  .pin-digits   { font-size: 16px; letter-spacing: 2px; }
  .nuke-card    { padding: 14px 12px; }
}

/* ════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE  (height ≤ 500px, landscape)
   ════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .tb           { height: 44px; }
  .tab-body     { padding: 8px 12px !important; padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important; }
  .modal        { max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
  .overlay      { align-items: center; }
  .setup-card   { padding: 16px 20px; overflow-y: auto; max-height: 94vh; }
  .cat-stage    { height: 96px; margin-bottom: 10px; }
  .cat-svg      { width: 78px; height: 78px; }
  .setup-h      { font-size: 20px; }
  .stat-grid    { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .nuke-stat-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #amWrap       { height: calc(100dvh - 200px) !important; height: calc(100vh - 200px) !important; }
}

/* ════════════════════════════════════════════════════════════════
   iPAD / LARGE TABLET  (768px – 1024px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .sw          { max-width: 560px; }
  .nuke-card   { max-width: 560px; }
  .stat-grid   { grid-template-columns: repeat(4, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════════
   NUKE PANE — buttons always reachable on all screen sizes
   Buttons are now OUTSIDE .nuke-card (HTML restructured) so they
   are never clipped by overflow:hidden on the card.
   ════════════════════════════════════════════════════════════════ */
#pane-nuke { overflow: visible; }

/* Stats box — capped height so it scrolls internally */
#nukeStats {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Button wrapper shared styles — card margin-bottom:16px already provides gap */
#nukeBtns {
  display: flex;
  gap: 10px;
  max-width: 600px;
  width: 100%;
}

@media (max-width: 640px) {
  /* Nuke pane: card scrolls, #nukeBtns always visible below */
  #pane-nuke.active {
    display: flex !important;
    flex-direction: column;
  }
  .nuke-card {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0 !important;
  }
  #nukeBtns {
    flex-shrink: 0;
    padding: 10px 0 4px;
    margin-top: 0;
  }
  #nukeStats { max-height: 200px; }
  .nuke-log  { max-height: 110px !important; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE INTERACTION & SCROLL FIXES
   Breakpoint matches responsive.css sidebar drawer (≤768px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─ Reliable tap: reinforce on action elements (global rules above
       cover *, but class-specific rules win specificity wars) ─ */
  #nukeFireBtn, #nukeStopBtn,
  .sbtn, .stb, .nuke-sim-btn, .nuke-fire-btn, .nuke-stop-btn,
  .sfbtn, .mbtn, .mfb, .da, .adm-btn, .adm-act-btn,
  .bn-item, .tab, .dev-item, .smode-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* ─ Ensure tab-body scroll is fast and reliable ─ */
  .tab-body {
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-behavior: auto !important; /* prevent fight with switchTab scrollTop=0 */
  }

  /* ─ Ensure entire panel fills viewport correctly ─ */
  #panel { height: 100vh; height: 100dvh; }
  .body  { height: 100%; }
  .main  { height: 100%; }
}

/* ─ Compact form sizes only on truly small phones (≤640px) ─ */
@media (max-width: 640px) {

  /* ─ Minimum 48 × 48 tap targets for critical buttons ─ */
  #nukeFireBtn, #nukeStopBtn { min-height: 52px; font-size: 14px !important; }
  .sbtn        { min-height: 52px; }
  .nuke-sim-btn { min-height: 44px; }

  /* ─ Send form: compact textarea so Send button stays on-screen ─ */
  .sarea  { height: 80px  !important; min-height: 80px !important; resize: none; }
  #sMultiInp { height: 100px !important; }

  /* ─ OTP note box: collapse to single row on mobile ─ */
  .otp-note-disp { display: none !important; }
  .otp-note-lbl  { font-size: 10px; margin-bottom: 4px; }
  .otp-note-box  { padding: 10px 12px; }

  /* ─ Nuke stats font size: shrink big counters on tiny phones ─ */
  #nukeSent, #nukeFail { font-size: 32px !important; }
}

@media (max-width: 380px) {
  /* Smallest phones: extra compact nuke form */
  .nuke-card { padding: 14px 14px 12px !important; }
  .nuke-fire-btn, .nuke-stop-btn { font-size: 13px !important; padding: 14px !important; }
  .sbtn { font-size: 13px !important; padding: 14px !important; }
}

/* ════════════════════════════════════════════════════════════════
   PRINT — hide everything except content
   ════════════════════════════════════════════════════════════════ */
@media print {
  .tb, .sb, .tabs, .bottom-nav, #otpBar, #sakuraCanvas, #scanLines { display: none !important; }
  .body  { display: block !important; }
  .main  { overflow: visible !important; }
  .pane.active { display: block !important; }
  .tab-body { overflow: visible !important; padding: 0 !important; }
}