.admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

.admin-overlay.open {
    opacity: 1;
    pointer-events: all
}

/* ── Hide ALL scrollbars inside admin panel (scroll still works) ── */
.admin-overlay *,
.admin-overlay {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.admin-overlay *::-webkit-scrollbar,
.admin-overlay::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}



/* ── Lock page scroll when admin is open ── */
html:has(#adminPanel.open),
body.admin-is-open {
    overflow: hidden !important;
    height: 100% !important;
}

.admin-sidebar {

    width: 230px;
    flex-shrink: 0;
    background: #080808;
    border-right: 1px solid rgba(201, 168, 76, .14);
    display: flex;
    flex-direction: column;
    height: 100%
}

.admin-sidebar-logo {
    padding: 26px 20px 18px;
    border-bottom: 1px solid rgba(201, 168, 76, .1)
}

.asl-brand {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: .2em;
    color: var(--white)
}

.asl-brand span {
    color: var(--gold)
}

.asl-role {
    font-size: .55rem;
    letter-spacing: .22em;
    color: var(--grey);
    margin-top: 3px
}

.admin-nav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.admin-nav::-webkit-scrollbar {
    display: none
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: .6rem;
    letter-spacing: .13em;
    color: var(--grey);
    cursor: pointer;
    transition: all .2s;
    border-left: 2px solid transparent
}

.admin-nav-item svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    flex-shrink: 0
}

.admin-nav-item:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .03)
}

.admin-nav-item.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(201, 168, 76, .06)
}

.admin-nav-sep {
    height: 1px;
    background: rgba(255, 255, 255, .05);
    margin: 8px 20px
}

.admin-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(201, 168, 76, .1)
}

.admin-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px
}

.admin-avatar {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    color: var(--black);
    flex-shrink: 0
}

.admin-uname {
    font-size: .68rem;
    color: var(--white);
    letter-spacing: .05em
}

.admin-urole {
    font-size: .56rem;
    color: var(--grey);
    letter-spacing: .08em;
    margin-top: 2px
}

.admin-logout-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--grey);
    padding: 6px 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: .52rem;
    letter-spacing: .12em;
    cursor: pointer;
    width: 100%;
    transition: all .2s
}

.admin-logout-btn:hover {
    border-color: rgba(201, 168, 76, .3);
    color: var(--gold)
}

.admin-main {
    flex: 1;
    background: #0c0c0c;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.admin-main::-webkit-scrollbar {
    display: none
}

.admin-nav {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.admin-nav::-webkit-scrollbar {
    display: none
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    flex-shrink: 0
}

.admin-page-title {
    font-family: 'Orbitron', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--white)
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px
}

.admin-time {
    font-family: 'Orbitron', sans-serif;
    font-size: .62rem;
    color: var(--grey);
    letter-spacing: .1em
}

.admin-content {
    padding: 40px 32px 26px;
    flex: 1
}

.admin-panel {
    display: none;
    scroll-margin-top: 70px
}

.admin-panel.active {
    display: block
}

.admin-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--white);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    scroll-margin-top: 80px
}

.admin-section-title svg {
    width: 14px;
    height: 14px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px
}

.admin-stat-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 18px;
    position: relative;
    overflow: hidden
}

.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad)
}

.admin-stat-card[data-color="gold"] {
    --grad: linear-gradient(90deg, var(--gold), var(--gold2))
}

.admin-stat-card[data-color="green"] {
    --grad: linear-gradient(90deg, #00dc50, #00a83c)
}

.admin-stat-card[data-color="blue"] {
    --grad: linear-gradient(90deg, #4fa3e0, #2276b5)
}

.admin-stat-card[data-color="red"] {
    --grad: linear-gradient(90deg, #ff6b6b, #cc4444)
}

.asc-label {
    font-size: .56rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 7px
}

.asc-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    color: var(--white);
    line-height: 1
}

.asc-sub {
    font-size: .62rem;
    color: var(--grey);
    margin-top: 4px;
    letter-spacing: .05em
}

.asc-icon {
    position: absolute;
    right: 14px;
    top: 14px;
    opacity: .08
}

.asc-icon svg {
    width: 34px;
    height: 34px;
    stroke: var(--white);
    fill: none;
    stroke-width: 1.5
}

.admin-chart {
    background: #111;
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 18px;
    margin-bottom: 22px
}

.admin-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 110px;
    margin-top: 14px
}

.admin-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.admin-bar {
    width: 100%;
    background: linear-gradient(to top, var(--gold), var(--gold2));
    opacity: .65;
    min-height: 4px;
    transition: opacity .2s
}

.admin-bar:hover {
    opacity: 1
}

.admin-bar-label {
    font-size: .52rem;
    color: var(--grey);
    letter-spacing: .08em
}

.admin-activity-list {
    background: #111;
    border: 1px solid rgba(255, 255, 255, .06)
}

.admin-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.admin-activity-item:last-child {
    border-bottom: none
}

.admin-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px
}

.dot-green {
    background: #00dc50
}

.dot-gold {
    background: var(--gold)
}

.dot-red {
    background: #ff6b6b
}

.dot-grey {
    background: var(--grey)
}

.admin-activity-text {
    font-size: .74rem;
    color: rgba(255, 255, 255, .72);
    line-height: 1.5;
    flex: 1
}

.admin-activity-text strong {
    color: var(--white)
}

.admin-activity-time {
    font-family: 'Orbitron', sans-serif;
    font-size: .52rem;
    color: var(--grey);
    letter-spacing: .07em;
    white-space: nowrap
}

.admin-table-wrap {
    background: #111;
    border: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
    margin-bottom: 22px
}

.admin-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.admin-table-title {
    font-family: 'Orbitron', sans-serif;
    font-size: .62rem;
    letter-spacing: .15em;
    color: var(--white)
}

.admin-search {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--white);
    padding: 7px 12px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .85rem;
    outline: none;
    width: 190px
}

.admin-search:focus {
    border-color: rgba(201, 168, 76, .3)
}

.admin-search::placeholder {
    color: rgba(255, 255, 255, .2)
}

table.admin-table {
    width: 100%;
    border-collapse: collapse
}

.admin-table th {
    font-family: 'Orbitron', sans-serif;
    font-size: .52rem;
    letter-spacing: .15em;
    color: var(--grey);
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    white-space: nowrap
}

.admin-table td {
    font-size: .76rem;
    color: rgba(255, 255, 255, .78);
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .03);
    vertical-align: middle
}

.admin-table tr:last-child td {
    border-bottom: none
}

.admin-table tr:hover td {
    background: rgba(255, 255, 255, .02)
}

.pill {
    display: inline-block;
    padding: 2px 9px;
    font-family: 'Orbitron', sans-serif;
    font-size: .5rem;
    letter-spacing: .1em;
    clip-path: polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0 100%)
}

.pill-green {
    background: rgba(0, 220, 80, .12);
    color: #00dc50;
    border: 1px solid rgba(0, 220, 80, .22)
}

.pill-gold {
    background: rgba(201, 168, 76, .12);
    color: var(--gold);
    border: 1px solid rgba(201, 168, 76, .22)
}

.pill-grey {
    background: rgba(255, 255, 255, .05);
    color: var(--grey);
    border: 1px solid rgba(255, 255, 255, .1)
}

.pill-red {
    background: rgba(255, 107, 107, .12);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, .22)
}

.admin-action-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--grey);
    padding: 4px 9px;
    font-family: 'Orbitron', sans-serif;
    font-size: .5rem;
    letter-spacing: .1em;
    cursor: pointer;
    transition: all .2s
}

.admin-action-btn:hover {
    border-color: var(--gold);
    color: var(--gold)
}

.admin-action-btn.danger:hover {
    border-color: #ff6b6b;
    color: #ff6b6b
}

.admin-action-btn.approve {
    border-color: rgba(0, 220, 80, .35);
    color: #00dc50;
    background: rgba(0, 220, 80, .06)
}

.admin-action-btn.approve:hover {
    border-color: #00dc50;
    color: #fff;
    background: rgba(0, 220, 80, .18);
    box-shadow: 0 0 10px rgba(0, 220, 80, .25)
}

.admin-add-coupon-form {
    background: #111;
    border: 1px solid rgba(201, 168, 76, .18);
    padding: 18px;
    margin-bottom: 20px
}

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end
}

.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.admin-form-label {
    font-family: 'Orbitron', sans-serif;
    font-size: .56rem;
    letter-spacing: .13em;
    color: var(--grey)
}

.admin-form-input {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--white);
    padding: 9px 12px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box
}

.admin-form-input:focus {
    border-color: var(--gold)
}

/* Fix select/option dropdown readability in dark admin UI */
select.admin-form-input,
select.auth-input {
    background: #111;
    color: var(--white);
    cursor: pointer
}

select.admin-form-input option,
select.auth-input option {
    background: #1a1a1a;
    color: #ffffff
}

.admin-add-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--black);
    border: none;
    padding: 9px 18px;
    font-family: 'Orbitron', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    cursor: pointer;
    white-space: nowrap;
    clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0 100%);
    transition: transform .2s
}

.admin-add-btn:hover {
    transform: scale(1.03)
}

.admin-coupon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px
}

.admin-coupon-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 16px
}

.admin-coupon-code {
    font-family: 'Orbitron', sans-serif;
    font-size: .95rem;
    color: var(--gold);
    letter-spacing: .16em;
    margin-bottom: 7px
}

.admin-coupon-meta {
    font-size: .66rem;
    color: var(--grey);
    letter-spacing: .05em;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.admin-coupon-actions {
    display: flex;
    gap: 7px;
    margin-top: 11px
}

.admin-manage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.admin-manage-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 16px
}

.pm-card {
    border-left: 2px solid var(--gold);
    transition: border-color .2s
}

.pm-card:hover {
    border-color: var(--gold2)
}

.pm-qr-preview {
    transition: all .3s ease
}

.pm-qr-preview img {
    border-radius: 4px;
    transition: transform .2s
}

.pm-qr-preview img:hover {
    transform: scale(1.05)
}

/* ── Mobile Admin Toggle Button ── */
.admin-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9300;
    width: 40px;
    height: 40px;
    background: rgba(12, 12, 12, .95);
    border: 1px solid rgba(201, 168, 76, .3);
    color: var(--gold);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    backdrop-filter: blur(10px)
}

.admin-mobile-toggle svg {
    width: 20px;
    height: 20px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2
}

/* ── Mobile Exit Button (fixed bottom-right) ── */
.admin-mobile-exit {
    display: none;
    position: fixed;
    bottom: 14px;
    right: 14px;
    z-index: 9300;
    background: rgba(12, 12, 12, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--grey);
    padding: 8px 16px;
    font-family: 'Orbitron', sans-serif;
    font-size: .5rem;
    letter-spacing: .12em;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all .2s
}

.admin-mobile-exit:hover {
    border-color: rgba(201, 168, 76, .3);
    color: var(--gold)
}

/* ── Tablet (≤ 900px) ── */
@media(max-width:900px) {
    .admin-stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .admin-sidebar {
        width: 200px
    }

    .admin-coupon-grid,
    .admin-manage-grid {
        grid-template-columns: 1fr
    }

    .admin-form-row {
        grid-template-columns: 1fr 1fr
    }

    .admin-content {
        padding: 24px 18px 20px
    }
}

/* ── Mobile (≤ 768px) ── */
@media(max-width:768px) {

    /* ── Admin overlay: true full-screen ── */
    .admin-overlay {
        width: 100vw;
        height: 100dvh;
        overflow: hidden
    }

    .admin-overlay.open {
        display: flex;
        flex-direction: column
    }

    /* ── Hide scrollbars everywhere in admin ── */
    .admin-main,
    .admin-nav,
    .admin-content,
    .admin-activity-list,
    .admin-table-wrap,
    .admin-coupon-grid {
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .admin-main::-webkit-scrollbar,
    .admin-nav::-webkit-scrollbar,
    .admin-content::-webkit-scrollbar,
    .admin-activity-list::-webkit-scrollbar,
    .admin-table-wrap::-webkit-scrollbar,
    .admin-coupon-grid::-webkit-scrollbar {
        display: none
    }

    /* ── Hide main page scrollbar when admin is open ── */
    body.admin-open {
        overflow: hidden
    }

    /* ── Show mobile toggle + exit ONLY when admin is open ── */
    .admin-mobile-toggle,
    .admin-mobile-exit {
        display: none
    }

    body.admin-is-open .admin-mobile-toggle {
        display: flex
    }

    body.admin-is-open .admin-mobile-exit {
        display: block
    }

    /* ── Mobile exit button — properly styled ── */
    .admin-mobile-exit {
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 9300;
        background: linear-gradient(135deg, rgba(20,20,20,.98), rgba(12,12,12,.98));
        border: 1px solid rgba(201, 168, 76, .35);
        color: var(--gold);
        padding: 10px 20px;
        font-family: 'Orbitron', sans-serif;
        font-size: .52rem;
        letter-spacing: .14em;
        cursor: pointer;
        backdrop-filter: blur(12px);
        border-radius: 2px;
        box-shadow: 0 4px 20px rgba(0,0,0,.5);
        transition: all .2s
    }

    body.admin-is-open .admin-mobile-exit:hover {
        background: rgba(201, 168, 76, .12);
        border-color: var(--gold);
        box-shadow: 0 4px 24px rgba(201,168,76,.15)
    }

    /* ── Sidebar: full-height off-canvas drawer ── */
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80vw;
        max-width: 280px;
        z-index: 9250;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: none;
        overflow-y: auto;
        scrollbar-width: none
    }

    .admin-sidebar::-webkit-scrollbar {
        display: none
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 40px rgba(0, 0, 0, .7)
    }

    /* ── Sidebar backdrop ── */
    .admin-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .6);
        z-index: 9240;
        opacity: 0;
        transition: opacity .3s;
        backdrop-filter: blur(2px)
    }

    .admin-sidebar-backdrop.show {
        display: block;
        opacity: 1
    }

    /* ── Sidebar internals ── */
    .admin-sidebar-footer {
        padding: 12px 16px
    }

    .admin-user-chip {
        margin-bottom: 8px
    }

    .admin-avatar {
        width: 28px;
        height: 28px;
        font-size: .58rem
    }

    .admin-uname {
        font-size: .62rem
    }

    .admin-urole {
        font-size: .52rem
    }

    .admin-logout-btn {
        font-size: .5rem;
        padding: 6px 8px
    }

    .admin-nav-item {
        padding: 12px 16px;
        font-size: .58rem;
        gap: 10px
    }

    .admin-nav-item svg {
        width: 15px;
        height: 15px
    }

    .admin-sidebar-logo {
        padding: 22px 16px 14px
    }

    .asl-brand {
        font-size: 1.1rem
    }

    .asl-role {
        font-size: .52rem
    }

    /* ── Main area: full width, full height ── */
    .admin-main {
        width: 100vw;
        min-width: 0;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden
    }

    /* ── Topbar ── */
    .admin-topbar {
        padding: 12px 14px 12px 58px;
        position: sticky;
        top: 0;
        background: #0c0c0c;
        z-index: 10
    }

    .admin-page-title {
        font-size: .68rem;
        letter-spacing: .1em
    }

    .admin-time {
        font-size: .52rem
    }

    /* ── Content: full width, bottom pad for exit btn ── */
    .admin-content {
        padding: 14px 10px 90px;
        width: 100%;
        box-sizing: border-box
    }

    /* ── Stats grid: single column ── */
    .admin-stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 14px
    }

    .admin-stat-card {
        padding: 14px 12px
    }

    .asc-label {
        font-size: .5rem;
        letter-spacing: .12em;
        margin-bottom: 4px
    }

    .asc-value {
        font-size: 1.8rem
    }

    .asc-sub {
        font-size: .54rem;
        margin-top: 2px
    }

    .asc-icon {
        right: 10px;
        top: 10px
    }

    .asc-icon svg {
        width: 26px;
        height: 26px
    }

    /* ── Chart ── */
    .admin-chart {
        padding: 12px;
        margin-bottom: 14px
    }

    .admin-chart-bars {
        height: 80px;
        gap: 4px;
        margin-top: 10px
    }

    .admin-bar-label {
        font-size: .44rem
    }

    /* ── Section titles ── */
    .admin-section-title {
        font-size: .58rem;
        letter-spacing: .12em;
        margin-bottom: 10px
    }

    .admin-section-title svg {
        width: 12px;
        height: 12px
    }

    /* ── Tables: single column scrollable ── */
    .admin-table-wrap {
        margin-bottom: 14px;
        overflow-x: auto;
        border-radius: 4px
    }

    .admin-table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px
    }

    .admin-search {
        width: 100%;
        font-size: .82rem
    }

    table.admin-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

    table.admin-table::-webkit-scrollbar {
        display: none
    }

    .admin-table th {
        font-size: .48rem;
        padding: 8px 10px;
        white-space: nowrap
    }

    .admin-table td {
        font-size: .68rem;
        padding: 8px 10px;
        white-space: nowrap
    }

    /* ── Forms: single column ── */
    .admin-form-row,
    .admin-form-row > * {
        grid-template-columns: 1fr !important;
        width: 100%
    }

    .admin-add-coupon-form {
        padding: 12px;
        margin-bottom: 14px
    }

    .admin-form-label {
        font-size: .52rem
    }

    .admin-form-input {
        padding: 9px 10px;
        font-size: .84rem;
        width: 100%;
        box-sizing: border-box
    }

    .admin-add-btn {
        font-size: .56rem;
        padding: 10px 14px;
        width: 100%;
        text-align: center;
        margin-top: 6px
    }

    /* ── Coupon / manage grids: single column ── */
    .admin-coupon-grid,
    .admin-manage-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .admin-coupon-card {
        padding: 14px
    }

    .admin-coupon-code {
        font-size: .85rem
    }

    .admin-coupon-meta {
        font-size: .6rem
    }

    .admin-coupon-actions {
        margin-top: 10px
    }

    /* ── All inline grids → single column ── */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important
    }

    /* ── Activity list ── */
    .admin-activity-item {
        padding: 10px 12px;
        gap: 8px
    }

    .admin-activity-text {
        font-size: .68rem
    }

    .admin-activity-time {
        font-size: .48rem
    }

    /* ── Action buttons ── */
    .admin-action-btn {
        font-size: .48rem;
        padding: 4px 8px
    }

    /* ── Pills ── */
    .pill {
        font-size: .46rem;
        padding: 2px 7px
    }

    /* ── Role badge ── */
    #adminRoleBadge {
        font-size: .48rem !important;
        padding: 2px 7px !important;
        margin-left: 4px !important
    }

    /* ── Settings ── */
    .admin-table-wrap[style*="padding"] {
        padding: 12px !important
    }
}

/* ── Small phone (≤ 480px) ── */
@media(max-width:480px) {
    .admin-topbar {
        padding: 10px 12px 10px 54px
    }

    .admin-page-title {
        font-size: .6rem;
        letter-spacing: .1em
    }

    .admin-time {
        font-size: .5rem
    }

    .admin-content {
        padding: 12px 8px 80px
    }

    .admin-stats-grid {
        gap: 6px
    }

    .admin-stat-card {
        padding: 10px 8px
    }

    .asc-value {
        font-size: 1.4rem
    }

    .asc-label {
        font-size: .42rem
    }

    .asc-sub {
        font-size: .46rem
    }

    .admin-section-title {
        font-size: .52rem
    }

    .admin-chart-bars {
        height: 60px
    }

    .admin-bar-label {
        font-size: .4rem
    }

    body.admin-is-open .admin-mobile-toggle {
        width: 36px;
        height: 36px;
        top: 10px;
        left: 10px
    }

    body.admin-is-open .admin-mobile-toggle svg {
        width: 18px;
        height: 18px
    }

    body.admin-is-open .admin-mobile-exit {
        padding: 7px 12px;
        font-size: .45rem;
        bottom: 10px;
        right: 10px
    }
}

/* ── NAV adjustment for banner ──────────────────────────────────────────────── */
nav {
    top: 0
}

.page {
    padding-top: 72px
}