/* ============================================================
   RESPONSIVE LAYER – loads AFTER style.css (and admin.css)
   Targets: iPhone SE/mini/Pro/Pro Max, Android phones, iPad,
            iPad Pro, laptops, ultra-wide. Portrait + landscape.
   Breakpoints: 1200 / 1024 / 900 / 768 / 640 / 480 / 380
   ============================================================ */

/* ── 0. Root cause of the sideways overflow ──────────────────────────────────
   body is a flex column. Flex children default to min-width:auto, so a wide
   (nowrap) table forced #wrapper to ~700px even on a 390px phone. */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-padding-top: calc(var(--header-h) + var(--nav-h) + 12px);
    -webkit-tap-highlight-color: transparent;
}
body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}
#wrapper { width: 100%; min-width: 0; min-height: 100vh; min-height: 100dvh; }
#main-content { min-width: 0; }

/* Everything inside a grid/flex row may shrink */
.layout-main > *, .layout-full, .card, .sidebar, .sidebar-widget,
.profile-info, .live-feed, .page-header, .stat-grid > *,
.footer-grid > *, [style*="display:grid"] > *, [style*="display: grid"] > * { min-width: 0; }

img, video, canvas, svg, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
pre, .code-block, .api-code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
pre code { white-space: pre; }
table { max-width: 100%; }
.card, .sidebar-widget { overflow-wrap: anywhere; }

/* Notch / Dynamic Island / home-indicator safe areas */
.header-inner, .nav-inner, .footer-inner, #main-content {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}
#site-footer { padding-bottom: env(safe-area-inset-bottom); }
#back-to-top {
    right:  max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
}

/* Scroll containers for tables: smooth, no page-level bounce */
.archive-table-wrap, .lf-table-wrap, .a-tw, .table-wrap, .table-responsive {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Never let long domains / URLs / IPs push the layout */
.cell-domain, .lf-domain, .profile-username, .page-title, .card-title,
.mirror-summary, .breadcrumb, .form-hint { overflow-wrap: anywhere; }

/* ── 1. Large screens ───────────────────────────────────────────────────── */
@media (min-width: 1600px) {
    #main-content, .header-inner, .nav-inner, .footer-inner { max-width: 1440px; }
}

/* ── 2. Laptop / small desktop ──────────────────────────────────────────── */
@media (max-width: 1200px) {
    .header-search input { width: 200px; }
    #nav-menu > li > a { padding: 6px 8px; font-size: 0.8rem; }
}

/* ── 3. Tablet landscape / iPad ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .layout-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .sidebar { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .header-stats { gap: 10px; }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* ── 4. Tablet portrait ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Inline 2-/3-column layouts used on several pages collapse to 1 column */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }

    /* my-settings: 200px side tabs + form */
    [style*="grid-template-columns:200px 1fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }

    /* compare: 1fr auto 1fr */
    [style*="grid-template-columns:1fr auto 1fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; text-align: center; }
}

/* Buttons inside the menu (Register etc.): link colour must not override button text colour */
#nav-menu > li > a.btn-primary, #nav-menu > li > a.btn-primary:hover { color: #04120b; font-weight: 700; }
[data-theme="light"] #nav-menu > li > a.btn-primary,
[data-theme="light"] #nav-menu > li > a.btn-primary:hover { color: #fff; }
#nav-menu > li > a.btn-ghost { color: var(--text); }

/* Mobile menu search row: hidden on desktop */
#nav-menu > li.nav-search { display: none; }

/* ── 4b. Hamburger menu from 900px down (logged-in menu is wider than 768) ── */
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    #nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
        background: var(--bg-surface2);
        border-top: 1px solid var(--border);
        position: absolute;
        left: 0; right: 0;
        z-index: 200;
    }
    #nav-menu.open { display: flex; }
    .dropdown-menu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        background: var(--bg-surface3);
        border-radius: var(--radius);
        display: none;
    }
    .nav-dropdown.open .dropdown-menu { display: block; }
    .header-stats { display: none; }
    .header-controls { margin-left: auto; }
    .header-search { display: none; }
    #nav-menu > li.nav-search { display: block; padding: 4px 4px 8px; }
    .nav-search form { display: flex; gap: 8px; }
    .nav-search input {
        flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
        background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
        color: var(--text); font: inherit; font-size: 16px;
    }
    .nav-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    .nav-search button {
        min-width: 48px; min-height: 44px; border: 0; border-radius: var(--radius);
        background: var(--accent); color: #04120b; cursor: pointer; font-size: 1rem;
    }
    [data-theme="light"] .nav-search button { color: #fff; }

    /* Hamburger: big, easy touch target */
    .nav-toggle {
        min-width: 44px; min-height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        margin-right: 0;
    }

    /* The mobile menu.
       BUG FIX: #main-nav is position:sticky = it IS the containing block, so
       top must be 100% (before: header+nav height => menu floated far below). */
    #main-nav { overflow: visible; }
    .nav-inner { position: relative; }
    #nav-menu {
        top: 100%;
        left: 0; right: 0;
        max-height: calc(100vh - var(--header-h) - var(--nav-h) - 8px);
        max-height: calc(100dvh - var(--header-h) - var(--nav-h) - 8px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 8px max(10px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
        gap: 2px;
        align-items: stretch;
    }
    #nav-menu > li { width: 100%; }
    #nav-menu > li > a {
        padding: 12px 14px;
        min-height: 44px;
        font-size: 0.95rem;
        border-radius: var(--radius);
    }
    #nav-menu > li > a .fa-chevron-down { margin-left: auto; transition: transform var(--transition); }
    .nav-dropdown.open > a .fa-chevron-down { transform: rotate(180deg); }
    .dropdown-menu { margin: 2px 0 4px 14px; padding: 4px 0; min-width: 0; width: auto; }
    .dropdown-menu a { padding: 11px 14px; min-height: 44px; display: flex; align-items: center; gap: 8px; }
    #nav-menu .nav-user, #nav-menu li[style*="margin-left"] { margin-left: 0 !important; }
    #nav-menu .btn { width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; }

}

/* ── 5. Phones & small tablets: navigation + core components ────────────── */
@media (max-width: 768px) {
    :root { --header-h: 60px; --nav-h: 48px; }

    .header-inner { gap: 10px; }
    .header-controls { margin-left: auto; gap: 8px; }
    .logo-icon { font-size: 1.35rem; }
    .logo-text { font-size: 1.05rem; }
    .logo-sub { display: none; }

    /* Search moves from the header into the menu strip: use the full row */
    .header-search { display: none; }

    /* Page header */
    .page-header { margin-bottom: 18px; padding-bottom: 12px; }
    .page-title { font-size: 1.35rem; flex-wrap: wrap; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    #main-content { padding-top: 14px; padding-bottom: 20px; }

    /* Cards */
    .card { padding: 16px; border-radius: 10px; margin-bottom: 16px; }
    .card-header { flex-wrap: wrap; gap: 8px; }

    /* Stats: 2 columns */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
    .stat-card { padding: 12px 10px; }
    .stat-num { font-size: 1.5rem; }
    .stat-label { font-size: 0.64rem; letter-spacing: 0.6px; }
    .stat-card:hover { transform: none; }

    /* Tables: compact + scroll inside their wrapper */
    table.archive-table { font-size: 0.78rem; }
    .archive-table th, .archive-table td { padding: 8px 9px; }
    .cell-domain { max-width: 170px; }

    /* Hide low-value columns of the 9-column archive / feed table (OS, Server).
       Browsers without :has() simply scroll horizontally instead. */
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) th:nth-child(6),
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) td:nth-child(6),
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) th:nth-child(7),
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) td:nth-child(7) { display: none; }

    .lf-table-wrap { max-height: 360px; }
    .lf-tabs { overflow-x: auto; flex-wrap: nowrap; padding: 8px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .lf-tabs::-webkit-scrollbar { display: none; }
    .lf-tabs > * { flex-shrink: 0; }
    .live-feed-header { padding-left: 12px; padding-right: 12px; }

    /* Pagination: wrap + big targets */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 6px; }
    .pagination a, .pagination span { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

    /* Profile */
    .profile-header { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
    .profile-info { width: 100%; }
    .profile-username { font-size: 1.35rem; justify-content: center; }
    .profile-meta, .profile-badges { justify-content: center; }
    .profile-stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
    .activity-graph { -webkit-overflow-scrolling: touch; }

    /* Footer */
    .footer-inner { padding-top: 28px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    .footer-col a { min-height: 32px; }

    /* Mirror page */
    .mirror-iframe { height: 70vh; height: 70dvh; min-height: 360px; max-height: 750px; }
    .mirror-frame-wrap { border-radius: 8px; }

    /* Buttons rows wrap instead of overflowing */
    .btn-row, .card-actions, .mirror-actions, .form-actions { flex-wrap: wrap; gap: 8px; }
}

/* ── 6. Phones (portrait) ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* iOS Safari zooms the whole page when an input is < 16px. Prevent it. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select, textarea,
    .form-control, .tr-search { font-size: 16px !important; }
    .form-control, select.form-control { min-height: 44px; }
    textarea.form-control { min-height: 110px; }

    /* Touch targets */
    .btn { min-height: 44px; padding: 10px 16px; justify-content: center; }
    .btn-sm { min-height: 38px; padding: 8px 12px; }
    .btn-lg { padding: 13px 20px; }
    #theme-toggle, .notif-btn { min-width: 40px; min-height: 40px; }

    /* Forms: stack action buttons full width */
    .form-actions .btn, form > .btn, .card form > .btn[type="submit"] { width: 100%; }
    .form-group { margin-bottom: 16px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    .form-check, .checkbox-row { gap: 10px; align-items: flex-start; }

    /* Auth pages (login / register / forgot / 2fa) */
    .auth-card, .auth-box, .login-card, .form-narrow { max-width: 100%; margin-left: 0; margin-right: 0; padding: 18px; }

    /* Stats: 3rd odd card spans full width so no orphan hole */
    .stat-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* Sidebar widgets one per row */
    .sidebar { grid-template-columns: minmax(0, 1fr); }

    /* Tables: hide Flags column too, keep time / notifier / domain / status / mirror */
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) th:nth-child(4),
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) td:nth-child(4) { display: none; }
    .archive-table th, .archive-table td { padding: 8px 6px; }
    .archive-table th:first-child, .archive-table td:first-child { padding-left: 12px; }
    .archive-table th:last-child, .archive-table td:last-child { padding-right: 12px; }
    table.archive-table { font-size: 0.74rem; }
    .archive-table th { font-size: 0.66rem; letter-spacing: 0.2px; }
    .cell-domain { max-width: 118px; font-size: 0.74rem; }
    .mirror-link { padding: 5px 8px; font-size: 0.72rem; }
    /* mirror link: icon only on phones */
    .archive-table .mirror-link { gap: 0; }
    /* Flags column too (9-col archive/feed tables): H/M/R/star stay visible on the detail page */
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) th:nth-child(3),
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) td:nth-child(3) { display: none; }

    /* Live feed list variant */
    .live-feed-item { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }

    /* Language picker opens upward and stays on screen */
    .tr-wrap { display: block; }
    .tr-menu { right: auto; left: 0; width: min(300px, calc(100vw - 32px)); }
    .tr-item { padding: 10px; }

    /* Tables inside cards bleed to the card edge for more room */
    .card > .archive-table-wrap { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; width: calc(100% + 32px); max-width: none; }

    /* Breadcrumb scrolls instead of wrapping to 4 lines */
    .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .breadcrumb::-webkit-scrollbar { display: none; }

    /* Search page / filter bars */
    .filter-bar, .filters, .search-filters { flex-direction: column; align-items: stretch; }
    .filter-bar > *, .filters > *, .search-filters > * { width: 100%; }

    /* Announcement banner */
    #site-announcement { font-size: 0.82rem; padding: 10px 40px 10px 12px !important; text-align: left !important; justify-content: flex-start !important; }

    /* Code / API docs */
    [style*="min-width:300px"], [style*="min-width:200px"] { min-width: 0 !important; }
    [style*="width:280px"] { width: auto !important; max-width: 100%; }
}

/* ── 7. Small phones: iPhone SE / mini, Galaxy S ────────────────────────── */
@media (max-width: 480px) {
    html { font-size: 14px; }
    :root { --header-h: 56px; --nav-h: 46px; }

    .header-inner, .nav-inner, .footer-inner, #main-content {
        padding-left:  max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .logo { gap: 8px; min-width: 0; }
    .logo-text { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .card { padding: 14px; }
    .card > .archive-table-wrap { margin-left: -14px; margin-right: -14px; width: calc(100% + 28px); }
    .page-title { font-size: 1.2rem; gap: 8px; }
    .stat-num { font-size: 1.35rem; }

    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
    .footer-col a { font-size: 0.8rem; }

    .profile-avatar { width: 76px; height: 76px; }
    .pstat { padding: 10px 6px; }
    .pstat-num { font-size: 1.15rem; }

    .tr-list { grid-template-columns: 1fr; }
    .mirror-iframe { min-height: 320px; }
}

/* ── 8. Very small (iPhone SE 1st gen, Galaxy Fold closed) ──────────────── */
@media (max-width: 380px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .stat-grid { gap: 8px; }
    .stat-label { font-size: 0.6rem; letter-spacing: 0.3px; }
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) th:nth-child(2),
    .archive-table:has(thead th:nth-child(9)):not(:has(thead th:nth-child(10))) td:nth-child(2) { display: none; }
    .cell-domain { max-width: 120px; }
}

/* ── 9. Landscape phones (short viewport) ───────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --header-h: 50px; --nav-h: 42px; }
    #site-header, #main-nav { position: static; }          /* save vertical space */
    #nav-menu { max-height: 70vh; }
    .mirror-iframe { height: 85vh; min-height: 260px; }
    .lf-table-wrap { max-height: 260px; }
}

/* ── 10. Touch devices: no hover-only behaviour ─────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .stat-card:hover, .a-stat:hover { transform: none; box-shadow: none; }
    .archive-table tbody tr:hover { background: transparent; }
    a, button, .btn, [role="button"] { touch-action: manipulation; }
    [data-tooltip]::after, [data-tooltip]::before { display: none !important; }  /* tooltips cannot be hovered */
    .archive-table th { cursor: default; }
}

/* ── 11. Respect reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   CODE BLOCKS (CLI / API docs / My API) – one calm block, not one box per line
   The global `code` pill style (bg + border + padding) was also hitting
   <pre><code>, so every line got its own box.
   ============================================================ */
pre {
    display: block;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--bg-surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.65;
    tab-size: 4;
    color: var(--text);
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
pre code, pre .mono {
    display: inline;
    background: none !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0 !important;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: inherit;
}
/* inline <code> inside text: keep the pill, but let it wrap on narrow screens */
:not(pre) > code { overflow-wrap: anywhere; white-space: normal; }
[data-theme="light"] pre { background: #eef1f6; border-color: var(--border); }

@media (max-width: 640px) {
    pre { padding: 12px; font-size: 0.74rem; line-height: 1.6; border-radius: 8px;
          white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
    /* tidy "docs" cards: parameter lists and headings never overflow */
    .card h3, .card h2 { overflow-wrap: anywhere; }
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
body.adm { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
.adm-main { min-width: 0; }                       /* flex child: allow tables to scroll */
.adm-content { min-width: 0; }
.adm-top { gap: .6rem; min-width: 0; }
.adm-top h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.a-card { max-width: 100%; }
.a-card > header { min-width: 0; }
.a-tw { max-width: 100%; }
.a-t .clip { max-width: min(340px, 40vw); }
.a-kv dd { min-width: 0; }

@media (max-width: 1100px) {
    .a-filters .a-in { width: 200px; }
    .adm-top { padding: 0 1rem; }
}

@media (max-width: 820px) {
    .adm-side { width: min(290px, 85vw); padding-bottom: env(safe-area-inset-bottom); box-shadow: none; }
    .adm-nav { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .adm-nav a { padding: .7rem .8rem; min-height: 44px; }

    /* dark backdrop while the drawer is open (clicking it closes it – see admin.js) */
    body.nav-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 55; }
    body.nav-open { overflow: hidden; }

    .adm-top {
        padding: 0 max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
        overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .adm-top::-webkit-scrollbar { display: none; }
    .adm-top > * { flex-shrink: 0; }
    .adm-top h1 { flex-shrink: 1; max-width: 40vw; }
    .adm-top .a-b { display: none; }                  /* user pill: not needed on phones */
    .adm-burger { min-width: 40px; min-height: 40px; justify-content: center; }
    .adm-content { padding: .85rem max(.75rem, env(safe-area-inset-right)) 1.5rem max(.75rem, env(safe-area-inset-left)); }
    .adm-foot { padding: .9rem .85rem calc(.9rem + env(safe-area-inset-bottom)); }

    .a-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .a-stat b { font-size: 1.3rem; }

    /* inline 2-/3-column forms and the blog editor */
    .adm-content [style*="grid-template-columns:1fr 1fr"],
    .adm-content [style*="grid-template-columns:minmax(0,2fr)"],
    .adm-content [style*="grid-template-columns:repeat(auto-fit,minmax(320px"] { grid-template-columns: minmax(0, 1fr) !important; }

    .a-filters { padding: .7rem .85rem; }
    .a-filters .a-in, .a-filters .a-sel, .a-filters .a-btn { width: 100%; justify-content: center; }
    .a-bulk { padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom)); }
    .a-bulk .a-sel, .a-bulk .a-in { width: 100%; min-width: 0; }
    .a-bulk .a-btn { flex: 1; justify-content: center; }
    .a-card > header { padding: .75rem .85rem; }
    .a-body { padding: .85rem; }
    .a-t th, .a-t td { padding: .55rem .65rem; }
    .a-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .a-tabs::-webkit-scrollbar { display: none; }
    .a-tabs button { flex-shrink: 0; }
    .a-pager { justify-content: center; }
    .a-pager .sp { display: none; }
    .a-kv { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .a-kv dd { margin-bottom: .5rem; }
}

@media (max-width: 640px) {
    .a-in, .a-sel, .a-ta, .a-fi { font-size: 16px; min-height: 42px; }  /* stop iOS auto-zoom */
    .a-btn { min-height: 40px; }
    .a-btn.sm { min-height: 36px; }
    .a-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a-stats > .a-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .a-sw { gap: .7rem; }
    .adm-top .a-btn:not(.adm-burger):not(#admTheme) span { display: none; }
}

@media (max-width: 400px) {
    .adm-top h1 { font-size: .95rem; max-width: 34vw; }
    .a-stats { gap: .5rem; }
}

@media (hover: none) and (pointer: coarse) {
    .a-t tbody tr:hover { background: transparent; }
    .a-btn:hover { border-color: var(--border-light); color: var(--text); }
    .a-btn.pri:hover { color: #04120b; }
}