/* =====================================================================
   NekoMod Admin — elegant, mobile-first shared theme
   Loaded AFTER each page's inline <style>, so it refines the existing UI
   without touching any PHP logic.  Works from 320px phones to 4K screens.
   ===================================================================== */

:root {
    --ui-bg: #070d16;
    --ui-bg-2: #0b1522;
    --ui-panel: rgba(16, 29, 45, .82);
    --ui-panel-solid: #101d2d;
    --ui-panel-soft: rgba(22, 38, 58, .60);
    --ui-border: rgba(120, 170, 200, .16);
    --ui-border-strong: rgba(0, 234, 255, .28);
    --ui-text: #e9f4fb;
    --ui-muted: #9bb0c3;
    --ui-accent: #00eaff;
    --ui-accent-2: #7b6bff;
    --ui-green: #35d39a;
    --ui-red: #ff6b7d;
    --ui-amber: #ffc35a;
    --ui-radius: 18px;
    --ui-radius-sm: 12px;
    --ui-shadow: 0 18px 46px rgba(0, 0, 0, .38);
    --ui-glow: 0 0 0 1px rgba(0, 234, 255, .16), 0 10px 34px rgba(0, 234, 255, .09);
    --ui-font: 'Exo 2', 'Rajdhani', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--ui-font) !important;
    background:
        radial-gradient(1100px 620px at 8% -12%, rgba(0, 234, 255, .10), transparent 60%),
        radial-gradient(900px 560px at 100% 0%, rgba(123, 107, 255, .12), transparent 62%),
        linear-gradient(180deg, var(--ui-bg-2) 0%, var(--ui-bg) 100%) !important;
    background-attachment: fixed !important;
    color: var(--ui-text) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    letter-spacing: .01em;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
a { color: var(--ui-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { line-height: 1.25; letter-spacing: -.01em; }
small { color: var(--ui-muted); }
p { overflow-wrap: anywhere; }
code, pre, .key-display, .bulk-result-key { overflow-wrap: anywhere; }

::selection { background: rgba(0, 234, 255, .28); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
::-webkit-scrollbar-thumb { background: rgba(0, 234, 255, .26); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 234, 255, .5); }

/* ------------------------------------------------------------------ *
   Header / navigation
 * ------------------------------------------------------------------ */
.header {
    background: rgba(8, 16, 27, .82) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .30) !important;
    padding: .55rem 0 !important;
    z-index: 1200 !important;
}
.header-content {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: .35rem 1.25rem !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1rem;
    flex-wrap: wrap;
}
.logo { gap: .65rem !important; }
.logo-icon {
    border-radius: 12px !important;
    background: linear-gradient(140deg, rgba(0, 234, 255, .20), rgba(123, 107, 255, .25)) !important;
    border: 1px solid var(--ui-border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 20px rgba(0, 234, 255, .12);
}
.logo-text {
    font-size: clamp(1rem, 2.6vw, 1.35rem) !important;
    letter-spacing: .16em !important;
    background: linear-gradient(100deg, #ffffff 20%, var(--ui-accent) 62%, var(--ui-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
}
/* The legacy "ADMIN" tag inherits the transparent gradient text fill — fix it. */
.logo-text::after {
    position: absolute !important;
    top: 50% !important;
    left: 100% !important;
    right: auto !important;
    margin: 0 0 0 .55rem !important;
    transform: translateY(-50%) !important;
    -webkit-text-fill-color: var(--ui-amber) !important;
    color: var(--ui-amber) !important;
    background: rgba(255, 195, 90, .12) !important;
    border: 1px solid rgba(255, 195, 90, .32) !important;
    border-radius: 99px !important;
    padding: .15rem .5rem !important;
    font-size: .58rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    white-space: nowrap;
    display: inline-block !important;
}
@media (max-width: 480px) { .logo-text::after { display: none !important; } }

.user-panel {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem !important;
    flex-wrap: wrap;
}
.user-badge {
    background: var(--ui-panel-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 14px !important;
    padding: .35rem .8rem !important;
}
.user-balance {
    background: linear-gradient(120deg, rgba(53, 211, 154, .16), rgba(0, 234, 255, .10)) !important;
    border: 1px solid rgba(53, 211, 154, .30) !important;
    border-radius: 12px !important;
    padding: .45rem .8rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.ui-db-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .30rem .6rem;
    border-radius: 99px;
    border: 1px solid rgba(53, 211, 154, .32);
    background: rgba(53, 211, 154, .10);
    color: var(--ui-green);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ui-db-badge::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.ui-db-badge.mysql { color: #7fb6ff; border-color: rgba(127, 182, 255, .32); background: rgba(127, 182, 255, .10); }

/* ------------------------------------------------------------------ *
   Layout
 * ------------------------------------------------------------------ */
/* The legacy fade-in animations can leave content invisible on slow
   devices / reduced-motion setups. Content must always be visible. */
.container, .login-wrapper, .login-container, .stat-card, .dashboard-card,
.page-header, .welcome-section, .modal-content { animation: none !important; }

.container {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: clamp(1rem, 3vw, 2rem) clamp(.85rem, 2.6vw, 1.6rem) 3rem !important;
}

.page-header, .welcome-section, .section-header, .card-header, .chart-header, .table-header {
    border-bottom: 1px solid var(--ui-border);
}
.page-header, .welcome-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 2.4vw, 1.6rem) !important;
    margin-bottom: 1.4rem !important;
    background: linear-gradient(135deg, rgba(0, 234, 255, .075), rgba(123, 107, 255, .055)) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow);
}
.page-title, .welcome-title {
    font-size: clamp(1.25rem, 4.2vw, 2rem) !important;
    font-weight: 800 !important;
    background: linear-gradient(100deg, #fff, var(--ui-accent) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 !important;
    overflow-wrap: anywhere;
}
.welcome-subtitle { color: var(--ui-muted) !important; font-size: .88rem !important; margin-top: .35rem; }
.page-header-buttons { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ *
   Panels / cards
 * ------------------------------------------------------------------ */
.stat-card, .dashboard-card, .key-card, .game-card, .chart-card, .price-card,
.edit-section, .filters-bar, .table-container, .logs-container, .info-grid,
.bulk-preview-box, .no-data, .no-keys, .no-games, .modal-content, .login-card,
.game-description, .game-features, .game-footer, .bal-box, .duration-option {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}
.stat-card, .key-card, .game-card, .dashboard-card, .chart-card, .edit-section, .filters-bar, .table-container, .logs-container {
    padding: clamp(1rem, 2.3vw, 1.5rem) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.stat-card:hover, .key-card:hover, .game-card:hover, .dashboard-card:hover {
    transform: translateY(-3px);
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-glow) !important;
}
.stat-icon {
    border-radius: 14px !important;
    background: linear-gradient(140deg, rgba(0, 234, 255, .16), rgba(123, 107, 255, .14)) !important;
    border: 1px solid var(--ui-border-strong) !important;
    width: 46px !important; height: 46px !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem !important;
    flex: 0 0 auto;
}
.stat-label {
    color: var(--ui-muted) !important;
    font-size: .69rem !important;
    letter-spacing: .12em !important;
    font-weight: 600;
}
.stat-value { font-size: clamp(1.15rem, 3.2vw, 1.6rem) !important; font-weight: 700; overflow-wrap: anywhere; }
.stat-value.highlight, .highlight { color: var(--ui-accent) !important; }

.stats-grid, .dashboard-grid, .key-info-grid, .game-meta, .pricing-grid,
.chart-container, .charts-container, .info-grid, .edit-grid {
    gap: clamp(.7rem, 2vw, 1.15rem) !important;
}
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
.dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important; }
.charts-container { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }

.section-header, .card-header, .chart-header, .table-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: .7rem; flex-wrap: wrap;
    padding-bottom: .8rem; margin-bottom: 1rem;
}
.section-title, .card-title, .chart-title, .table-title, .key-title, .game-title {
    color: #f2fbff !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 2.6vw, 1.2rem) !important;
    overflow-wrap: anywhere;
}
.section-icon, .card-icon {
    border-radius: 12px;
    background: rgba(0, 234, 255, .10);
    border: 1px solid var(--ui-border-strong);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ *
   Buttons
 * ------------------------------------------------------------------ */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-xs,
.back-btn, .logout-btn, .login-btn, .copy-btn-sm, .modal-close {
    font-family: var(--ui-font) !important;
    font-weight: 650 !important;
    letter-spacing: .02em;
    border-radius: var(--ui-radius-sm) !important;
    min-height: 42px;
    padding: .6rem 1.05rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    border: 1px solid var(--ui-border) !important;
    text-decoration: none !important;
    white-space: normal;
    line-height: 1.25;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover,
.btn-warning:hover, .btn-xs:hover, .back-btn:hover, .logout-btn:hover, .login-btn:hover {
    transform: translateY(-2px);
    text-decoration: none !important;
}
.btn:active, .btn-primary:active, .login-btn:active { transform: translateY(0); }
.btn:focus-visible, .login-btn:focus-visible, .form-input:focus-visible, .filter-input:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}
.btn-primary, .login-btn {
    color: #04121b !important;
    background: linear-gradient(120deg, #00eaff, #6fd8ff 55%, #9a8cff) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow: 0 8px 24px rgba(0, 234, 255, .22) !important;
}
.btn-primary:hover, .login-btn:hover { box-shadow: 0 12px 30px rgba(0, 234, 255, .36) !important; }
.btn-secondary, .back-btn, .copy-btn-sm {
    color: var(--ui-text) !important;
    background: rgba(255, 255, 255, .045) !important;
    border-color: var(--ui-border) !important;
}
.btn-secondary:hover, .back-btn:hover, .copy-btn-sm:hover { background: rgba(0, 234, 255, .10) !important; border-color: var(--ui-border-strong) !important; }
.btn-danger, .logout-btn {
    color: #ffdbe1 !important;
    background: linear-gradient(120deg, rgba(255, 107, 125, .18), rgba(255, 107, 125, .08)) !important;
    border-color: rgba(255, 107, 125, .32) !important;
}
.btn-warning {
    color: #ffe7bb !important;
    background: linear-gradient(120deg, rgba(255, 195, 90, .18), rgba(255, 195, 90, .07)) !important;
    border-color: rgba(255, 195, 90, .32) !important;
}
.btn-xs { font-size: .75rem !important; padding: .35rem .65rem !important; min-height: 34px; }
.quick-actions, .action-buttons, .game-actions, .key-actions, .user-actions, .filter-buttons, .page-header-buttons {
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.btn-block, .card-actions-single .btn, .quick-actions .btn { flex: 1 1 auto; }

/* ------------------------------------------------------------------ *
   Forms & filters
 * ------------------------------------------------------------------ */
.form-input, .form-select, .filter-input, .filter-select,
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="email"], input[type="search"],
input[type="datetime-local"], textarea, select {
    width: 100%;
    max-width: 100%;
    background: rgba(6, 14, 24, .72) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    padding: .68rem .85rem !important;
    font-family: var(--ui-font) !important;
    font-size: .92rem !important;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    outline: none;
}
input[type="file"] { max-width: 100%; font-size: .85rem; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--ui-accent); flex: 0 0 auto; }
.form-input:focus, .form-select:focus, .filter-input:focus, .filter-select:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 234, 255, .14) !important;
    background: rgba(8, 20, 33, .9) !important;
}
::placeholder { color: #7690a5 !important; opacity: 1; }
select option { background: #101d2d !important; color: var(--ui-text) !important; }
textarea.form-input { min-height: 88px; resize: vertical; }

.form-label, .filter-label {
    color: #bcd8e6 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .10em;
    text-transform: uppercase;
    margin-bottom: .45rem !important;
}
.form-group { margin-bottom: 1rem; }
.form-row, .edit-grid, .filter-group, .filter-group * { min-width: 0; }
.form-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important; gap: .9rem !important; }
.filters-bar { margin-bottom: 1.4rem !important; }
.filters-bar form, .filter-grid, .filters-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)) !important;
    gap: .8rem 1rem !important;
    align-items: end;
}
.checkbox-label, .checkbox-group { color: var(--ui-text) !important; }
.duration-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)) !important; }
.duration-option { cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.duration-option:hover { border-color: var(--ui-border-strong) !important; transform: translateY(-2px); }

/* ------------------------------------------------------------------ *
   Alerts & badges
 * ------------------------------------------------------------------ */
.alert {
    border-radius: var(--ui-radius-sm) !important;
    border: 1px solid var(--ui-border) !important;
    border-left: 3px solid var(--ui-accent) !important;
    background: rgba(0, 234, 255, .07) !important;
    color: var(--ui-text) !important;
    padding: .8rem 1rem !important;
    margin-bottom: 1rem !important;
    font-size: .88rem !important;
    overflow-wrap: anywhere;
}
.alert-success { border-left-color: var(--ui-green) !important; background: rgba(53, 211, 154, .09) !important; }
.alert-error, .alert-danger { border-left-color: var(--ui-red) !important; background: rgba(255, 107, 125, .09) !important; }
.alert-warning, .warning-note, .balance-warning { border-left-color: var(--ui-amber) !important; background: rgba(255, 195, 90, .09) !important; }
.status-badge, .badge, .action-badge, .active-badge, .inactive-badge {
    border-radius: 99px !important;
    padding: .25rem .6rem !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    border: 1px solid var(--ui-border) !important;
}

/* ------------------------------------------------------------------ *
   Tables — desktop polish + automatic mobile cards
 * ------------------------------------------------------------------ */
.table-container, .logs-container { padding: clamp(.7rem, 2vw, 1.3rem) !important; overflow-x: auto; }
table { border-collapse: separate !important; border-spacing: 0; width: 100%; font-size: .86rem; }
thead th {
    color: #bcd8e6 !important;
    font-size: .68rem !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700 !important;
    white-space: nowrap;
    background: rgba(0, 234, 255, .055) !important;
    border-bottom: 1px solid var(--ui-border-strong) !important;
    padding: .7rem .7rem !important;
}
tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
    padding: .7rem !important;
    color: var(--ui-text) !important;
    vertical-align: middle;
    overflow-wrap: anywhere;
}
tbody tr { transition: background .2s ease; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }
tbody tr:hover { background: rgba(0, 234, 255, .055); }
.no-data, .no-keys, .no-games { text-align: center; padding: 2rem 1rem !important; color: var(--ui-muted) !important; }

.ui-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ *
   Modals
 * ------------------------------------------------------------------ */
.modal {
    padding: 1rem !important;
    background: rgba(3, 8, 14, .76) !important;
    z-index: 2000 !important;
}
.modal-content {
    width: 100% !important;
    max-width: 560px !important;
    max-height: min(90vh, 900px) !important;
    overflow-y: auto !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important;
}
.modal-header, .modal-footer {
    padding: 1rem 1.25rem !important;
    border-color: var(--ui-border) !important;
    display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap;
}
.modal-body { padding: 1.25rem !important; }
.modal-title { font-size: 1.1rem !important; color: #f3fbff !important; }
.modal-close { min-height: 34px; padding: .3rem .55rem !important; font-size: 1.25rem !important; }
.modal-footer { justify-content: flex-end; }

/* ------------------------------------------------------------------ *
   Login page
 * ------------------------------------------------------------------ */
.login-wrapper, .login-container { padding: 1.25rem !important; }
.login-card {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2rem) !important;
}
.login-header { text-align: center; margin-bottom: 1.3rem; }
.login-header h2 {
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
    background: linear-gradient(100deg, #fff, var(--ui-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.login-header p { color: var(--ui-muted) !important; font-size: .85rem; }
.login-btn { width: 100%; font-size: .95rem !important; }
.default-accounts {
    border-radius: var(--ui-radius-sm) !important;
    border: 1px solid var(--ui-border) !important;
    background: rgba(255, 195, 90, .06) !important;
    padding: .9rem 1rem !important;
    font-size: .82rem !important;
    margin-top: 1.2rem;
}
.login-footer { color: var(--ui-muted); font-size: .76rem; text-align: center; margin-top: 1.2rem; }

/* ------------------------------------------------------------------ *
   Footer
 * ------------------------------------------------------------------ */
.footer {
    border-top: 1px solid var(--ui-border) !important;
    color: var(--ui-muted) !important;
    font-size: .78rem !important;
    padding: 1.5rem 1rem 2rem !important;
    text-align: center;
}
.footer-info { color: var(--ui-accent) !important; }

/* ------------------------------------------------------------------ *
   Responsive — the "too big on mobile" fix
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .header-content { gap: .55rem .8rem; }
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
}

@media (max-width: 768px) {
    body { font-size: 14px !important; }
    .container, .table-container, .logs-container, .filters-bar, .edit-section,
    .key-card, .game-card, .chart-card, .stat-card {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }
    .header { padding: .4rem 0 !important; }
    .header-content { padding: .3rem .85rem !important; }
    .logo-text { letter-spacing: .08em !important; }
    .user-panel { gap: .4rem !important; }
    .user-panel > * { font-size: .76rem !important; }
    .user-badge { padding: .25rem .55rem !important; }
    .username { font-size: .78rem !important; }
    .user-type { font-size: .6rem !important; }
    .back-btn, .logout-btn { padding: .4rem .6rem !important; min-height: 36px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stat-card { gap: .65rem !important; }
    .stat-icon { width: 38px !important; height: 38px !important; font-size: 1.05rem !important; }
    .stat-label { font-size: .6rem !important; letter-spacing: .07em !important; }
    .stat-value { font-size: 1.05rem !important; }
    .page-header, .welcome-section { padding: .9rem 1rem !important; gap: .7rem; }
    .page-title, .welcome-title { font-size: 1.25rem !important; }
    .welcome-subtitle { font-size: .78rem !important; }
    .form-row, .edit-grid, .filters-bar form, .chart-container, .charts-container {
        grid-template-columns: 1fr !important;
    }
    .filter-group { flex: 1 1 100% !important; min-width: 0 !important; }
    .form-input, .form-select, .filter-input, .filter-select,
    input[type="text"], input[type="password"], input[type="number"],
    input[type="date"], input[type="email"], textarea, select {
        font-size: 16px !important;   /* stops iOS Safari auto-zoom */
        padding: .7rem .8rem !important;
    }
    .btn, .login-btn, .back-btn, .logout-btn { padding: .55rem .8rem !important; font-size: .8rem !important; }
    .quick-actions .btn, .action-buttons .btn, .game-actions .btn, .key-actions .btn { flex: 1 1 42%; }
    .modal { padding: .5rem !important; align-items: flex-end !important; }
    .modal-content { max-height: 92vh !important; border-radius: 18px 18px 0 0 !important; }
    .duration-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Data tables become stacked cards — no more horizontal zooming. */
    table.ui-mobile-cards,
    table.ui-mobile-cards tbody,
    table.ui-mobile-cards tr,
    table.ui-mobile-cards td { display: block !important; width: 100% !important; min-width: 0 !important; }
    table.ui-mobile-cards thead { display: none !important; }
    table.ui-mobile-cards { border: 0 !important; background: transparent !important; }
    table.ui-mobile-cards tbody { display: grid; gap: .8rem; }
    table.ui-mobile-cards tr {
        background: var(--ui-panel-soft) !important;
        border: 1px solid var(--ui-border) !important;
        border-radius: var(--ui-radius-sm) !important;
        padding: .55rem .85rem !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    }
    table.ui-mobile-cards td {
        border: 0 !important;
        border-bottom: 1px dashed rgba(255, 255, 255, .07) !important;
        padding: .5rem 0 !important;
        font-size: .82rem !important;
        text-align: left !important;
    }
    table.ui-mobile-cards tr td:last-child { border-bottom: 0 !important; }
    table.ui-mobile-cards td:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        color: #8fb4c9 !important;
        font-size: .62rem !important;
        font-weight: 700 !important;
        letter-spacing: .09em;
        text-transform: uppercase;
        margin-bottom: .18rem;
        white-space: normal;
    }
    table.ui-mobile-cards td:empty { display: none !important; }
    .table-container, .logs-container { padding: .55rem !important; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stat-card { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }
    .stat-info { min-width: 0; }
    .logo-icon { transform: scale(.9); }
    .user-panel { justify-content: flex-start; }
    .page-header, .welcome-section { align-items: flex-start !important; }
    .page-header-buttons { width: 100%; }
    .page-header-buttons .btn { flex: 1 1 100%; }
    .quick-actions .btn, .action-buttons .btn, .game-actions .btn, .key-actions .btn { flex: 1 1 100%; }
    .duration-options { grid-template-columns: 1fr 1fr !important; }
    .key-info-grid, .game-meta, .pricing-grid, .info-grid { grid-template-columns: 1fr !important; }
    .modal-content { border-radius: 14px 14px 0 0 !important; }
}

@media (max-width: 360px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .logo-text { font-size: .9rem !important; }
}

/* Landscape phones: keep the UI compact */
@media (max-height: 560px) and (orientation: landscape) {
    .header { position: static !important; }
    .container { padding-top: .8rem !important; }
    .modal-content { max-height: 82vh !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .header, .btn, .logout-btn, .back-btn, .footer, .filters-bar { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}