:root {
    --brand: #afcdaf;
    --brand-strong: #4f7c55;
    --brand-deep: #18351e;
    --ink: #172019;
    --muted: #687366;
    --line: #dfe7d9;
    --paper: #ffffff;
    --surface: #f4f7f1;
    --surface-strong: #eaf1e5;
    --danger: #b42318;
    --warning: #9a6700;
    --shadow: 0 22px 60px rgba(22, 35, 24, 0.12);
    --soft-shadow: 0 12px 32px rgba(22, 35, 24, 0.08);
}

/* Professional admin design system */
.admin-body {
    --admin-radius: 14px;
    --admin-border: #e2e9de;
    --admin-shadow: 0 8px 28px rgba(25, 52, 31, .07);
    background: #f3f6f1;
}

.admin-body .admin-shell { grid-template-columns: 252px minmax(0, 1fr); }
.admin-body .sidebar {
    width: 252px;
    padding: 0 14px 22px;
    border-right: 0;
    background: linear-gradient(180deg, #122719 0%, #193820 100%);
    box-shadow: 8px 0 30px rgba(18, 39, 25, .12);
}
.admin-body .sidebar-brand {
    display:flex; align-items:center; justify-content:center;
    min-height:92px; margin:0 -14px 18px; padding:18px;
    border-bottom:1px solid rgba(255,255,255,.1); background:#0d1f13;
}
.admin-body .sidebar-brand img { max-width:174px; filter:brightness(0) invert(1); }
.admin-body .sidebar-nav { gap:5px; }
.admin-body .nav-group-title {
    margin:22px 12px 7px; color:rgba(229,240,226,.52);
    font-size:10px; font-weight:850; letter-spacing:.11em;
}
.admin-body .nav-link {
    min-height:44px; padding:9px 11px; border:1px solid transparent;
    border-radius:10px; color:rgba(244,249,242,.76); font-size:13px;
    transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.admin-body .nav-link:hover { color:#fff; background:rgba(255,255,255,.08); transform:translateX(2px); }
.admin-body .nav-link.active {
    color:#17331d; border-color:rgba(255,255,255,.5);
    background:linear-gradient(135deg,#dcebd7,#b9d3b3); box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.admin-body .nav-icon {
    display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px;
    border-radius:8px; color:inherit; background:rgba(255,255,255,.1); font-size:10px; font-weight:900;
}
.admin-body .nav-link.active .nav-icon { background:rgba(255,255,255,.55); }

.admin-body .workspace { min-width:0; }
.mobile-menu-button { display:none; }
.mobile-nav-backdrop[hidden] { display:none !important; }
.admin-body .topbar {
    position:sticky; top:0; z-index:20; min-height:78px; padding:14px 28px;
    border-bottom:1px solid rgba(218,228,214,.9); background:rgba(255,255,255,.9);
    box-shadow:0 4px 20px rgba(24,53,30,.04); backdrop-filter:blur(14px);
}
.admin-body .topbar h1 { margin-top:3px; font-size:22px; letter-spacing:-.02em; }
.admin-body .breadcrumb { font-size:11px; }
.admin-body .profile-chip {
    min-height:48px; padding:6px 10px 6px 7px; border:1px solid var(--admin-border);
    border-radius:12px; background:#f8faf7;
}
.admin-body .profile-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#dcebd7; color:#315c38; }

.admin-body .admin-main { width:min(100%,1500px); margin:0 auto; padding:28px; }
.admin-body .page-title-row { gap:20px; margin-bottom:20px; }
.admin-body .page-title-row h2 { margin:0; font-size:clamp(24px,2.3vw,32px); letter-spacing:-.035em; }
.admin-body .page-subtitle { max-width:720px; margin:7px 0 0; font-size:13px; }
.admin-body .eyebrow { margin-bottom:6px; letter-spacing:.08em; }

.admin-body .metric-grid { gap:18px; margin-bottom:22px; }
.admin-body .metric-card,
.admin-body .surface-panel {
    border:1px solid var(--admin-border); border-radius:var(--admin-radius);
    background:#fff; box-shadow:var(--admin-shadow);
}
.admin-body .metric-card { position:relative; overflow:hidden; min-height:110px; padding:20px; }
.admin-body .metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#84aa7e; }
.admin-body .metric-card strong { color:#17331d; font-size:30px; letter-spacing:-.04em; }

.admin-body .toolbar { gap:12px; margin-bottom:18px; padding:16px; border-bottom:1px solid #edf1ea; }
.admin-body input,
.admin-body select,
.admin-body textarea {
    min-height:42px; border-color:#dce4d8; border-radius:10px; padding-left:12px;
    background:#fbfcfa; box-shadow:inset 0 1px 1px rgba(20,45,25,.02); font-size:13px;
}
.admin-body input:hover,
.admin-body select:hover,
.admin-body textarea:hover { border-color:#bdcdb9; }
.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus { border-color:#6f9a70; box-shadow:0 0 0 3px rgba(111,154,112,.15); background:#fff; }
.admin-body .field-group label { margin-bottom:7px; color:#354438; font-size:12px; font-weight:800; }

.admin-body .primary-button,
.admin-body .secondary-button,
.admin-body .login-button {
    min-height:42px; border-radius:10px; padding:9px 16px; font-size:13px; font-weight:850;
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.admin-body .primary-button { border-color:#315f39; color:#fff; background:linear-gradient(135deg,#4e7c55,#315f39); box-shadow:0 6px 14px rgba(49,95,57,.2); }
.admin-body .primary-button:hover { transform:translateY(-1px); background:linear-gradient(135deg,#416f49,#274f2f); box-shadow:0 8px 18px rgba(49,95,57,.25); }
.admin-body .secondary-button { border-color:#d8e1d4; color:#425045; background:#fff; }
.admin-body .secondary-button:hover { transform:translateY(-1px); border-color:#b8cab4; background:#f7faf5; }

.admin-body .data-table { width:100%; min-width:780px; border-collapse:separate; border-spacing:0; }
.admin-body .data-table th { height:44px; padding:10px 14px; color:#5d695f; background:#f4f7f2; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.admin-body .data-table td { height:54px; padding:11px 14px; border-bottom:1px solid #edf1eb; font-size:12px; }
.admin-body .data-table tbody tr { transition:background .15s ease; }
.admin-body .data-table tbody tr:hover { background:#f8fbf6; }
.admin-body .table-action { min-height:30px; border-radius:8px; padding:5px 10px; font-size:11px; font-weight:800; }
.admin-body .status-badge { border-radius:999px; padding:5px 9px; font-size:10px; font-weight:850; }
.admin-body .empty-state { margin:18px; border:1px dashed #cad6c6; border-radius:12px; padding:34px; background:#fafcf9; }
.admin-body .pagination-row { min-height:62px; padding:12px 16px; border-top:1px solid #edf1ea; }

.admin-body .modal { width:min(960px,calc(100% - 40px)); max-width:960px; max-height:calc(100vh - 40px); border:0; border-radius:18px; padding:0; box-shadow:0 28px 80px rgba(10,28,15,.28); }
.admin-body #appUserModal,
.admin-body #websiteUserModal { width:min(1080px,calc(100% - 40px)); max-width:1080px; }
.admin-body .modal::backdrop { background:rgba(15,28,18,.58); backdrop-filter:blur(3px); }
.admin-body .modal form { padding:0 22px 20px; }
.admin-body .modal-header { position:sticky; top:0; z-index:2; margin:0 -22px 20px; padding:18px 22px; border-bottom:1px solid #e7ece4; background:rgba(255,255,255,.96); }
.admin-body .modal-header h2 { font-size:20px; letter-spacing:-.02em; }
.admin-body .modal-actions { position:sticky; bottom:-20px; margin:20px -22px -20px; padding:15px 22px; border-top:1px solid #e7ece4; background:rgba(255,255,255,.97); }
.admin-body .icon-button { border-radius:9px; background:#f3f6f1; }
.admin-body .form-message:not(:empty) { margin-top:12px; padding:10px 12px; border-radius:9px; background:#fff5f3; }

/* Reports */
.admin-body .report-download-card { width:100%; max-width:none; overflow:visible; }
.admin-body .report-preview-panel { width:100%; min-width:0; margin-top:12px; padding:14px; overflow:visible; }
.admin-body .report-preview-panel .toolbar { display:flex; justify-content:space-between; gap:12px; margin:0 0 12px; padding:0 0 12px; }
.admin-body .report-preview-panel .toolbar input { width:min(440px,100%); }
.admin-body .report-preview-panel .table-scroll { display:block; width:100%; max-width:100%; overflow-x:auto; overflow-y:visible; overscroll-behavior-inline:contain; scrollbar-width:auto; scrollbar-color:#78917a #edf2ea; -webkit-overflow-scrolling:touch; }
.admin-body .report-preview-panel .data-table { width:max-content; min-width:100%; }
.admin-body .report-preview-panel .data-table th,.admin-body .report-preview-panel .data-table td { min-width:140px; max-width:320px; white-space:nowrap; }
.admin-body .report-preview-panel .data-table th:first-child,.admin-body .report-preview-panel .data-table td:first-child { min-width:100px; }
.admin-body .report-preview-panel .table-scroll::-webkit-scrollbar { height:14px; }
.admin-body .report-preview-panel .table-scroll::-webkit-scrollbar-track { background:#edf2ea; border-radius:999px; }
.admin-body .report-preview-panel .table-scroll::-webkit-scrollbar-thumb { border:3px solid #edf2ea; border-radius:999px; background:#78917a; }

@media (min-width:981px) {
    html { background:var(--surface); }
    html { max-width:100%; overflow-x:hidden; }
    body.admin-body { width:100%; max-width:none; min-width:0; height:100vh; min-height:100vh; overflow:hidden; }
    /* Match the visual density users preferred at 80% browser zoom while the
       browser remains at 100%. The expanded logical canvas preserves the same
       table, modal and grid proportions instead of shrinking only typography. */
    body.admin-body { --admin-desktop-scale:.8; }
    .admin-body .admin-shell {
        width:100%;
        max-width:100%;
        height:125vh;
        min-height:0;
        overflow:hidden;
        zoom:var(--admin-desktop-scale);
    }
    .admin-body .sidebar {
        position:relative;
        top:auto;
        height:125vh;
        min-height:0;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .admin-body .workspace {
        width:100%;
        max-width:100%;
        height:125vh;
        min-height:0;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .admin-body .admin-main {
        width:100%;
        max-width:none;
        margin:0;
        padding:28px;
    }
    .admin-body .surface-panel,
    .admin-body .toolbar { max-width:100%; min-width:0; }
    .admin-body .api-log-toolbar { grid-template-columns:minmax(0,1fr) 170px 150px auto; }
}
.admin-body .report-card-header { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #e8eee5; background:linear-gradient(135deg,#f8fbf6,#fff); }
.admin-body .report-card-icon { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#54815b,#315f39); box-shadow:0 8px 18px rgba(49,95,57,.2); font-size:11px; font-weight:900; letter-spacing:.05em; }
.admin-body .report-card-header h3 { margin:0; font-size:17px; letter-spacing:-.02em; }
.admin-body .report-card-header p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.admin-body .report-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:16px 14px; padding:18px; }
.admin-body .report-type-field { grid-column:span 2; }
.admin-body .report-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; padding-top:2px; border-top:1px solid #edf1ea; padding-top:14px; }
.admin-body .report-actions .report-download-button { width:auto; min-width:150px; }
.admin-body .report-field { min-width:0; }
.admin-body .report-field label { display:block; margin:0 0 7px; color:#39473b; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; }
.admin-body .report-field input,
.admin-body .report-field select { height:46px; margin:0; }
.admin-body .report-field select[multiple] { height:112px; padding:7px; }
.admin-body .report-field small { display:block; margin-top:5px; color:#718073; font-size:11px; }
.admin-body .multi-select-native { display:none; }
.admin-body .multi-select { position:relative; }
.admin-body .multi-select-toggle { width:100%; height:46px; padding:0 38px 0 13px; border:1px solid #d8e0d9; border-radius:8px; background:#fff; color:#26352a; text-align:left; cursor:pointer; position:relative; }
.admin-body .multi-select-toggle::after { content:""; position:absolute; right:14px; top:17px; width:8px; height:8px; border-right:2px solid #66736a; border-bottom:2px solid #66736a; transform:rotate(45deg); }
.admin-body .multi-select.open .multi-select-toggle::after { top:21px; transform:rotate(225deg); }
.admin-body .multi-select-menu { display:none; position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:100%; min-width:0; max-width:100%; padding:10px; border:1px solid #d5ddd6; border-radius:10px; background:#fff; box-shadow:0 12px 30px rgba(31,48,35,.16); }
.admin-body .multi-select.open .multi-select-menu { display:block; }
.admin-body .multi-select-search { width:100%; height:38px!important; margin:0 0 7px!important; }
.admin-body .multi-select-actions { display:flex; gap:7px; margin-bottom:7px; }
.admin-body .multi-select-actions button { border:0; background:#edf4ee; color:#31543a; border-radius:6px; padding:5px 9px; font-size:11px; font-weight:750; cursor:pointer; }
.admin-body .multi-select-options { max-height:220px; overflow:auto; min-width:0; }
.admin-body .multi-select-option { display:flex!important; align-items:center; gap:8px; margin:0!important; padding:7px 5px; text-transform:none!important; letter-spacing:0!important; font-size:13px!important; font-weight:600!important; cursor:pointer; }
.admin-body .multi-select-option:hover { background:#f3f7f3; }
.admin-body .multi-select-option input { width:16px; height:16px!important; margin:0!important; }
.admin-body .multi-select-option span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-body .report-download-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:164px; height:46px; white-space:nowrap; }
.admin-body .download-icon { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.16); font-size:16px; line-height:1; }
.admin-body .report-note { margin:0 18px 14px; padding:8px 11px; border:1px solid #e2eadf; border-radius:9px; color:#667067; background:#f8faf7; font-size:11px; line-height:1.4; }
.admin-body .report-message:not(:empty) { margin:0 22px 20px; }
.admin-body .api-log-toolbar { grid-template-columns:minmax(260px,1fr) 170px 150px auto; }
.admin-body .api-category { display:inline-flex; padding:5px 9px; border-radius:999px; background:#edf2ea; font-size:10px; font-weight:850; }
.admin-body .api-category.kyc { color:#315f39; background:#e4f0e1; }.admin-body .api-category.otp { color:#775917; background:#fff2cf; }.admin-body .api-category.payment { color:#315a82; background:#e4eff9; }
.admin-body .api-log-modal { width:min(1120px,calc(100% - 40px)); max-width:1120px; }
.admin-body .api-log-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.admin-body .api-log-summary div { min-width:0; padding:11px; border:1px solid #e2e9de; border-radius:10px; background:#f8faf7; }.admin-body .api-log-summary .wide { grid-column:1/-1; }.admin-body .api-log-summary span,.admin-body .api-log-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.admin-body .api-log-summary span { margin-bottom:4px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.admin-body .api-payload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.admin-body .api-payload-grid section { min-width:0; overflow:hidden; border:1px solid #e1e8de; border-radius:12px; }.admin-body .api-payload-grid h3 { margin:0; padding:11px 13px; border-bottom:1px solid #e1e8de; background:#f6f9f4; font-size:12px; }.admin-body .api-payload-grid pre { min-height:260px; max-height:420px; margin:0; padding:14px; overflow:auto; color:#d8ead5; background:#132218; font:11px/1.6 Consolas,monospace; white-space:pre-wrap; word-break:break-word; }

/* Professional dialogs */
.admin-body .modal { overflow:hidden; }
.admin-body .modal form { max-height:calc(100vh - 40px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#b7c8b3 transparent; }
.admin-body .modal .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
.admin-body .modal .field-group { min-width:0; }
.admin-body .modal .field-group.full-span { grid-column:1/-1; }
.admin-body .modal .field-group label { display:flex; align-items:center; min-height:18px; margin-bottom:6px; }
.admin-body .modal input,
.admin-body .modal select,
.admin-body .modal textarea { min-width:0; background:#fff; }
.admin-body .modal input[readonly],
.admin-body .modal input:disabled,
.admin-body .modal select:disabled,
.admin-body .modal textarea:disabled { color:#637065; border-color:#e1e7de; background:#f3f6f1; cursor:not-allowed; opacity:1; }
.admin-body .modal .checkbox-field {
    align-self:center; justify-self:start; width:max-content; min-width:0; min-height:42px;
    padding:0 4px; border:0; border-radius:0; background:transparent;
    color:#354438; font-size:12px; font-weight:800;
}
.admin-body .modal .checkbox-field input[type="checkbox"] {
    flex:0 0 19px; width:19px; height:19px; min-height:19px; margin:0 7px 0 0;
    border-radius:5px; accent-color:#4f7c55; cursor:pointer;
}
.admin-body .modal .checkbox-field input[type="checkbox"]:disabled { cursor:not-allowed; opacity:.62; }
.admin-body .modal .surface-panel { border-radius:12px; box-shadow:none; }
.admin-body .modal .audit-log-panel { margin-top:18px; overflow:hidden; }
.admin-body .modal .audit-log-header { padding:13px 15px; border-bottom:1px solid #e7ece4; background:#f7faf5; }
.admin-body .modal .audit-log-list { max-height:220px; overflow-y:auto; }
.admin-body .modal .icon-button { display:grid; place-items:center; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; color:#566258; font-size:15px; }
.admin-body .modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.admin-body .modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.admin-body .modal .icon-button:hover { color:#243d29; background:#e7eee4; }
.admin-body .batch-audit-list { max-height:55vh; margin:16px 0; padding:0 4px; overflow:auto; }
.admin-body .batch-audit-list .audit-log-item { grid-template-columns:110px minmax(0,1fr); }
.admin-body .batch-audit-list small { display:block; margin-top:5px; color:var(--muted); overflow-wrap:anywhere; }
.admin-body .coupon-batch-table th { font-size:11px; letter-spacing:.055em; white-space:nowrap; }
.admin-body .coupon-batch-table td { font-size:13px; line-height:1.45; }
.admin-body .coupon-batch-table td:first-child { min-width:230px; max-width:330px; overflow-wrap:anywhere; }
.admin-body .coupon-batch-table .action-cell { min-width:210px; }
.admin-body .coupon-action-group { display:flex; align-items:center; gap:7px; }
.admin-body .coupon-action-group .table-action { min-height:32px; margin:0; padding:6px 10px; font-size:12px; white-space:nowrap; }
.admin-body .coupon-action-group .audit-action { border-color:#cbd9c7; color:#31543a; background:#f5f9f3; }
.admin-body .coupon-action-group .audit-action:hover { border-color:#7fa27b; background:#eaf3e7; }
.admin-body .batch-audit-modal { width:min(760px,calc(100% - 32px)); max-width:760px; padding:0 24px 20px; color:#213026; background:#fbfcfa; }
.admin-body .batch-audit-modal .modal-header { margin:0 -24px; padding:20px 24px 16px; background:#fff; }
.admin-body .batch-audit-modal .modal-header .eyebrow { margin:0 0 3px; font-size:10px; }
.admin-body .batch-audit-modal .modal-header h2 { margin:0; font-size:21px; }
.admin-body .batch-audit-intro { margin:15px 0 4px; color:#687568; font-size:13px; line-height:1.5; }
.admin-body .batch-audit-modal .modal-actions { bottom:-20px; margin:18px -24px -20px; padding:14px 24px; background:#fff; }
.admin-body .batch-audit-list { gap:12px; margin-top:12px; padding:2px 5px 2px 18px; }
.admin-body .batch-audit-list .audit-log-item { position:relative; grid-template-columns:112px minmax(0,1fr); gap:18px; padding:15px 16px; border-color:#dfe8dc; border-radius:12px; box-shadow:0 4px 14px rgba(28,55,34,.045); }
.admin-body .batch-audit-list .audit-log-item::before { content:""; position:absolute; left:-14px; top:20px; width:9px; height:9px; border:3px solid #fff; border-radius:50%; background:#6f9870; box-shadow:0 0 0 1px #aac1a7; }
.admin-body .batch-audit-list .audit-log-item.inactive-event::before { background:#c45c51; box-shadow:0 0 0 1px #dfa9a3; }
.admin-body .batch-audit-list .audit-log-meta { align-content:flex-start; justify-content:flex-start; gap:5px; }
.admin-body .batch-audit-list .audit-log-meta strong { width:100%; color:#345b3a; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.admin-body .batch-audit-list .audit-log-meta span { font-size:11px; }
.admin-body .batch-audit-list .audit-log-copy { display:block; min-width:0; }
.admin-body .batch-audit-list .audit-log-copy > strong { display:block; margin-bottom:5px; color:#1c2c21; font-size:14px; letter-spacing:-.01em; }
.admin-body .batch-audit-list .audit-log-copy span { display:block; color:#536158; font-size:12px; }
.admin-body .batch-audit-list small { font-size:11px; line-height:1.45; }
.admin-body .agent-identity { display:grid; gap:2px; min-width:145px; }
.admin-body .agent-identity strong { color:#24382a; font-size:12px; font-weight:750; line-height:1.35; }
.admin-body .agent-identity span { color:#738075; font-size:11px; font-weight:650; }
.admin-body #appUserLogPanel .audit-log-list { max-height:360px; padding:12px 12px 12px 26px; background:#fbfcfa; }
.admin-body #appUserLogPanel .app-user-log-entry { position:relative; grid-template-columns:112px minmax(0,1fr); gap:18px; padding:14px 16px; border-color:#dfe8dc; border-radius:12px; box-shadow:0 4px 14px rgba(28,55,34,.045); }
.admin-body #appUserLogPanel .app-user-log-entry::before { content:""; position:absolute; left:-15px; top:19px; width:9px; height:9px; border:3px solid #fff; border-radius:50%; background:#6f9870; box-shadow:0 0 0 1px #aac1a7; }
.admin-body #appUserLogPanel .audit-log-meta { align-content:flex-start; justify-content:flex-start; gap:5px; }
.admin-body #appUserLogPanel .audit-log-meta strong { width:100%; color:#345b3a; font-size:10px; text-transform:uppercase; letter-spacing:.045em; }
.admin-body #appUserLogPanel .audit-log-copy { display:block; min-width:0; }
.admin-body #appUserLogPanel .audit-log-copy > strong { display:block; margin-bottom:5px; color:#1c2c21; font-size:13px; }
.admin-body #appUserLogPanel .audit-log-copy span { display:block; color:#536158; font-size:12px; overflow-wrap:anywhere; }
.admin-body #appUserLogPanel .audit-log-copy small { display:block; margin-top:6px; color:#738075; font-size:11px; }
.admin-body .bank-details-section { margin-top:4px; overflow:hidden; border:1px solid #dfe8dc; border-radius:13px; background:#f8faf7; }
.admin-body .bank-details-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border-bottom:1px solid #e3eae0; background:#f2f7f0; }
.admin-body .bank-details-heading .eyebrow { display:block; margin:0 0 3px; color:#6e7e70; font-size:9px; }
.admin-body .bank-details-heading h3 { margin:0; color:#24372a; font-size:14px; letter-spacing:-.01em; }
.admin-body .read-only-badge { padding:5px 9px; border-radius:999px; color:#45634a; background:#dfeadbcf; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.admin-body .scope-summary { display:inline; line-height:1.55; }
.admin-body .scope-more-button { margin-left:4px; padding:3px 7px; border:1px solid #b9cdb5; border-radius:999px; color:#31543a; background:#eff6ed; font-size:10px; font-weight:800; white-space:nowrap; cursor:pointer; }
.admin-body .scope-more-button:hover { border-color:#71916e; background:#e3efdf; }
.admin-body .cms-scope-list-modal { width:min(680px,calc(100% - 32px)); max-width:680px; }
.admin-body .cms-scope-list-form { display:flex; flex-direction:column; max-height:calc(100vh - 40px); }
.admin-body .cms-scope-list-modal .modal-header { flex:0 0 auto; margin-bottom:0; }
.admin-body .cms-scope-list-modal .modal-header .eyebrow { margin:0 0 4px; font-size:9px; }
.admin-body .cms-scope-list-summary { flex:0 0 auto; width:max-content; margin:16px 0 4px; padding:6px 10px; border-radius:999px; color:#46634b; background:#e7f0e4; font-size:11px; font-weight:800; }
.admin-body .cms-scope-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:52vh; margin:14px -4px 4px 0; padding:0 8px 4px 0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#a9bda5 #edf2ea; }
.admin-body .cms-scope-list span { display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; padding:9px 11px; border:1px solid #dce6d9; border-radius:10px; color:#344b39; background:#f7faf5; box-shadow:0 2px 8px rgba(30,55,35,.035); }
.admin-body .cms-scope-list span b { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border-radius:50%; color:#fff; background:#5d835f; font-size:10px; }
.admin-body .cms-scope-list span em { min-width:0; font-size:12px; font-style:normal; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
.admin-body .cms-scope-list-modal .modal-actions { flex:0 0 auto; margin-top:16px; }
@media (max-width:640px) {
    .admin-body .cms-scope-list { grid-template-columns:1fr; max-height:58vh; }
    .admin-body .cms-scope-list-modal { width:calc(100% - 20px); }
}
.admin-body .bank-details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:15px; }
.admin-body .bank-details-grid input[readonly] { font-family:"Inter","Segoe UI",Arial,sans-serif; letter-spacing:.02em; }

@media (max-width:640px) {
    .admin-body .coupon-action-group { flex-direction:column; align-items:stretch; }
    .admin-body .batch-audit-modal { padding-right:16px; padding-left:16px; }
    .admin-body .batch-audit-modal .modal-header { margin-right:-16px; margin-left:-16px; padding-right:16px; padding-left:16px; }
    .admin-body .batch-audit-list .audit-log-item { grid-template-columns:1fr; gap:9px; }
    .admin-body .batch-audit-modal .modal-actions { margin-right:-16px; margin-left:-16px; padding-right:16px; padding-left:16px; }
    .admin-body #appUserLogPanel .app-user-log-entry { grid-template-columns:1fr; gap:8px; }
    .admin-body .bank-details-grid { grid-template-columns:1fr; }
}

@media (max-width: 980px) {
    .admin-body .admin-shell { grid-template-columns:1fr; }
    .admin-body .sidebar { position:fixed; inset:0 auto 0 0; z-index:100; width:min(300px,86vw); height:100dvh; padding-bottom:20px; overflow-y:auto; transform:translateX(-105%); transition:transform .24s ease; box-shadow:18px 0 50px rgba(8,24,13,.28); }
    .admin-body.mobile-menu-open { overflow:hidden; }
    .admin-body.mobile-menu-open .sidebar { transform:translateX(0); }
    .admin-body .mobile-nav-backdrop { position:fixed; inset:0; z-index:90; background:rgba(10,24,14,.55); backdrop-filter:blur(2px); }
    .admin-body .sidebar-brand { min-height:78px; margin-bottom:10px; }
    .admin-body .sidebar-nav { display:flex; }
    .admin-body .topbar { position:sticky; padding:12px 16px; flex-direction:row; align-items:center; }
    .admin-body .topbar > div:first-of-type { min-width:0; flex:1; }
    .admin-body .mobile-menu-button { display:grid; flex:0 0 42px; width:42px; height:42px; min-height:42px; place-content:center; gap:4px; padding:0; border:1px solid #dce5d8; border-radius:10px; background:#fff; }
    .admin-body .mobile-menu-button span { display:block; width:19px; height:2px; border-radius:2px; background:#294e30; }
    .admin-body .admin-main { padding:20px; }
    .admin-body .report-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-body .report-type-field { grid-column:1/-1; }
    .admin-body .report-download-button { width:100%; }
    .admin-body .report-actions .report-download-button { flex:1; width:auto; }
    .admin-body .api-log-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-body .api-log-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
    .admin-body .admin-main { padding:16px 12px; }
    .admin-body .metric-grid { grid-template-columns:1fr; }
    .admin-body .page-title-row { align-items:stretch; }
    .admin-body .page-title-row > button { width:100%; }
    .admin-body .modal form { padding-inline:16px; }
    .admin-body .modal-header { margin-inline:-16px; padding-inline:16px; }
    .admin-body .modal-actions { margin-inline:-16px; padding-inline:16px; }
    .admin-body .report-card-header { align-items:flex-start; padding:17px; }
    .admin-body .report-controls { grid-template-columns:1fr; padding:17px; }
    .admin-body .report-type-field { grid-column:auto; }
    .admin-body .report-actions { grid-column:auto; flex-direction:column; }
    .admin-body .report-actions button { width:100%; }
    .admin-body .report-note,
    .admin-body .report-message:not(:empty) { margin-inline:17px; }
    .admin-body .modal .form-grid { grid-template-columns:1fr; }
    .admin-body .modal .field-group.full-span { grid-column:auto; }
    .admin-body .api-log-toolbar,
    .admin-body .api-log-summary,
    .admin-body .api-payload-grid { grid-template-columns:1fr; }
    .admin-body .modal,
    .admin-body #appUserModal,
    .admin-body #websiteUserModal { width:calc(100% - 12px); max-width:none; max-height:calc(100dvh - 12px); margin:6px auto; border-radius:14px; }
    .admin-body .modal form { max-height:calc(100dvh - 12px); padding:0 14px 16px; }
    .admin-body .modal-header { top:0; margin:0 -14px 16px; padding:14px; }
    .admin-body .modal-header h2 { font-size:18px; }
    .admin-body .modal-actions { bottom:-16px; flex-direction:column-reverse; gap:9px; margin:18px -14px -16px; padding:12px 14px; }
    .admin-body .modal-actions button { width:100%; }
    .admin-body .modal .checkbox-field { align-self:start; }
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: var(--surface);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

input,
select,
textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 11px;
    color: var(--ink);
    background: #fffdf8;
    font-size: 13px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 4px rgba(175, 205, 175, 0.46);
    background: #ffffff;
}

textarea {
    min-height: 76px;
    padding-top: 10px;
    resize: vertical;
}

.eyebrow {
    margin: 0 0 7px;
    color: var(--brand-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.login-body {
    background:
        linear-gradient(120deg, rgba(175, 205, 175, 0.18) 0 1px, transparent 1px 100%),
        linear-gradient(135deg, #f6f8f1 0%, #eef4ea 45%, #ffffff 100%);
    background-size: 34px 34px, auto;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 430px);
    align-items: center;
    gap: 64px;
    width: min(1180px, calc(100% - 56px));
    margin: 0 auto;
    padding: 56px 0;
}

.refined-login {
    position: relative;
}

.refined-login::before {
    content: "";
    position: fixed;
    inset: 16px;
    border: 1px solid rgba(79, 124, 85, 0.14);
    border-radius: 8px;
    pointer-events: none;
}

.brand-panel {
    position: relative;
    display: grid;
    align-content: center;
    gap: 30px;
    min-height: 620px;
    border-radius: 8px;
    padding: 56px;
    background: #050705;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(175, 205, 175, 0.11) 0 1px, transparent 1px 100%),
        linear-gradient(0deg, rgba(175, 205, 175, 0.08) 0 1px, transparent 1px 100%);
    background-size: 42px 42px;
    opacity: 0.34;
}

.brand-panel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: var(--brand);
}

.brand-logo-large {
    position: relative;
    z-index: 1;
    width: min(340px, 86%);
    height: auto;
    padding: 0;
    border-radius: 8px;
    background: #050705;
    border: 0;
}

.brand-content,
.brand-highlights {
    position: relative;
    z-index: 1;
}

.brand-content .eyebrow {
    color: var(--brand);
}

.brand-panel h1 {
    max-width: 640px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 5.6vw, 72px);
    line-height: 0.98;
    letter-spacing: 0;
    font-weight: 800;
}

.brand-copy,
.panel-copy,
.page-subtitle {
    color: var(--muted);
    line-height: 1.65;
}

.panel-copy {
    margin: 10px 0 0;
    font-size: 14px;
}

.brand-copy {
    max-width: 560px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
}

.brand-highlights {
    display: grid;
    gap: 12px;
    max-width: 440px;
}

.brand-highlights span {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    font-weight: 650;
}

.brand-highlights span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 5px rgba(175, 205, 175, 0.14);
}

.login-panel {
    width: 100%;
    border: 1px solid rgba(223, 231, 217, 0.9);
    border-radius: 8px;
    padding: 38px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.login-logo {
    width: 156px;
    height: auto;
    margin-bottom: 28px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #050705;
}

.panel-heading {
    margin-bottom: 26px;
}

.panel-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 800;
}

.field-group {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

label {
    font-size: 13px;
    font-weight: 700;
}

.field-error,
.form-message {
    min-height: 18px;
    color: var(--danger);
    font-size: 13px;
    line-height: 1.4;
}

.login-button,
.primary-button,
.secondary-button,
.link-button,
.icon-button {
    border-radius: 8px;
    font-weight: 750;
}

.login-button,
.primary-button {
    border: 0;
    background: var(--brand);
    color: var(--brand-deep);
    box-shadow: 0 12px 24px rgba(79, 124, 85, 0.16);
}

.login-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    font-size: 14px;
}

.primary-button,
.secondary-button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.login-button:hover,
.primary-button:hover {
    background: #9fc29f;
}

.secondary-button {
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
}

.secondary-button:hover {
    border-color: var(--brand);
    background: #f7fbf4;
}

.link-button {
    border: 0;
    background: transparent;
    color: var(--brand-strong);
}

.icon-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background: #ffffff;
}

.button-loader {
    display: none;
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(24, 53, 30, 0.22);
    border-top-color: var(--brand-deep);
    border-radius: 50%;
    animation: spin 850ms linear infinite;
}

.login-button.loading .button-label {
    visibility: hidden;
}

.login-button.loading .button-loader {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.compact-shell {
    grid-template-columns: minmax(320px, 460px);
    justify-content: center;
}

.admin-body {
    background:
        linear-gradient(90deg, rgba(175, 205, 175, 0.18), transparent 42%),
        var(--surface);
}

.admin-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 14px 12px;
    border-right: 1px solid var(--line);
    background: #ffffff;
    overflow: hidden;
}

.sidebar-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #050705;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(12, 18, 13, 0.14);
}

.sidebar-brand img {
    width: 134px;
    height: auto;
    display: block;
}

.sidebar-nav {
    display: grid;
    gap: 2px;
}

/* Keep every permitted menu reachable on shorter desktop screens. */
.admin-body .sidebar { overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }
.admin-body .sidebar::-webkit-scrollbar { width:6px; }
.admin-body .sidebar::-webkit-scrollbar-track { background:transparent; }
.admin-body .sidebar::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(255,255,255,.22); }
.admin-body .sidebar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.36); }
.admin-body .sidebar-nav { min-height:min-content; padding-bottom:24px; }

.nav-group-title {
    margin: 12px 8px 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.nav-link {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    border-radius: 8px;
    padding: 0 9px;
    color: var(--ink);
    font-size: 13px;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(175, 205, 175, 0.34);
    color: var(--brand-deep);
}

.nav-link.disabled {
    color: #9aa39a;
    cursor: default;
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #eef4ea;
    color: var(--brand-strong);
    font-size: 11px;
    font-weight: 850;
}

.workspace {
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 74px;
    padding: 15px 26px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(14px);
}

.topbar h1 {
    margin: 4px 0 0;
    font-size: 24px;
    line-height: 1.1;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.breadcrumb span::after {
    content: "/";
    margin-left: 8px;
    color: #a6afa2;
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px;
    background: #ffffff;
}

.profile-chip small {
    display: block;
    color: var(--muted);
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--brand);
    color: var(--brand-deep);
    font-weight: 850;
}

.admin-main {
    width: min(1240px, calc(100% - 38px));
    margin: 0 auto;
    padding: 22px 0 44px;
}

.page-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.page-title-row h2 {
    margin: 0;
    font-size: 23px;
    line-height: 1.16;
}

.page-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.metric-card,
.surface-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(22, 35, 24, 0.06);
}

.metric-card {
    padding: 18px;
}

.metric-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.metric-card strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 200px 170px;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px;
}

.product-command-panel {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px;
}

.product-command-panel > div {
    min-height: 52px;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8fbf5;
}

.command-label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.product-command-panel strong {
    color: var(--ink);
    font-size: 13px;
}

.tab-shell {
    overflow: hidden;
}

.tab-list {
    display: flex;
    gap: 6px;
    padding: 9px 12px 0;
    border-bottom: 1px solid var(--line);
}

.tab-button {
    min-height: 34px;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 0 11px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.tab-button.active,
.tab-button:hover {
    color: var(--brand-deep);
    border-bottom-color: var(--brand);
}

.product-toolbar {
    grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(132px, 172px));
    margin: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    background: #ffffff;
}

.identifier-preview {
    margin: 12px 0 0;
    min-height: 36px;
    border: 1px dashed rgba(79, 124, 85, 0.36);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--brand-deep);
    background: rgba(175, 205, 175, 0.16);
    font-size: 12px;
    font-weight: 750;
}

.identifier-preview:empty {
    display: none;
}

.product-table td:first-child {
    max-width: 360px;
}

.grid-panel {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 12px;
    line-height: 1.45;
    vertical-align: middle;
}

.data-table th:last-child,
.data-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 190px;
    background: #ffffff;
    box-shadow: -10px 0 18px rgba(24, 32, 27, 0.05);
}

.data-table th:last-child {
    background: #f8fbf5;
    z-index: 3;
}

.data-table th {
    color: var(--muted);
    background: #f8fbf5;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.data-table td {
    color: #263027;
    font-weight: 500;
}

.data-table td:first-child {
    color: var(--ink);
    font-weight: 750;
}

.data-table tbody tr:hover {
    background: #fbfdf8;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.status-badge.active {
    background: rgba(175, 205, 175, 0.5);
    color: #244d2a;
}

.status-badge.inactive {
    background: #f4dedb;
    color: #9a2f24;
}

.status-badge.neutral {
    background: #eef4ea;
    color: var(--brand-deep);
}

.action-cell {
    white-space: nowrap;
}

.action-cell .table-action + .table-action {
    margin-left: 6px;
}

.table-action {
    min-height: 27px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px;
    background: #ffffff;
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.table-action:hover {
    border-color: var(--brand);
    background: #f7fbf4;
}

.table-action.update,
.table-action.activate {
    border-color: rgba(175, 205, 175, 0.72);
    background: rgba(175, 205, 175, 0.34);
    color: var(--brand-deep);
}

.table-action.deactivate {
    border-color: #efc7c2;
    background: #fff5f3;
    color: #9a2f24;
}

.table-action.delete {
    border-color: #efc7c2;
    color: #9a2f24;
}

.table-action.delete:hover {
    border-color: #e8a8a0;
    background: #fff5f3;
}

.banner-toolbar {
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, 180px));
}

.website-user-toolbar {
    grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(150px, 180px));
}

.form-message.success-message {
    color: #176b3a;
    background: #eef9f2;
    border: 1px solid #b9e2c8;
}

.app-user-management-toolbar {
    align-items: end;
}

.app-user-management-toolbar > input,
.app-user-management-toolbar > select,
.app-user-management-toolbar .compact-filter-field input {
    width: 100%;
    min-width: 0;
}

.app-user-management-toolbar .compact-filter-field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.app-user-management-toolbar .compact-filter-field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.app-user-management-toolbar .compact-checkbox,
.app-user-management-toolbar #clearAppUserFiltersButton {
    min-height: 42px;
    margin: 0;
}

.app-user-management-toolbar #clearAppUserFiltersButton {
    width: 100%;
}

.report-toolbar {
    grid-template-columns: minmax(360px, 1fr) repeat(2, minmax(150px, 190px));
    align-items: start;
    width: min(100%, 1040px);
}

.report-toolbar .primary-button {
    grid-column: 1;
}

.reports-panel {
    width: min(100%, 1120px);
}

.website-user-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.website-user-form-grid input,
.website-user-form-grid select,
.website-user-form-grid textarea {
    min-width: 0;
}

.full-span {
    grid-column: 1 / -1;
}

.field-help {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.audit-log-panel {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    background: #fbfdf8;
}

.audit-log-header {
    display: grid;
    gap: 4px;
}

.audit-log-header strong {
    font-size: 13px;
}

.audit-log-header span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.audit-log-list {
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.audit-log-item {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 12px;
    background: #ffffff;
}

.audit-log-meta,
.audit-log-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.audit-log-meta {
    align-items: center;
    justify-content: space-between;
}

.audit-log-meta strong {
    color: var(--ink);
    font-size: 12px;
}

.audit-log-meta span,
.audit-log-copy span,
.audit-log-empty {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.audit-log-empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.table-media {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.table-image-preview,
.table-image-preview-button {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    text-decoration: none;
}

.table-image-preview-button {
    padding: 0;
    background: transparent;
}

.media-thumb {
    width: 76px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
    background: #f8fbf5;
}

.media-link {
    color: var(--brand-strong);
    text-decoration: none;
    word-break: break-all;
}

.media-link:hover {
    text-decoration: underline;
}

.media-preview {
    display: grid;
    gap: 10px;
    margin: 12px 0;
    border: 1px dashed rgba(79, 124, 85, 0.36);
    border-radius: 8px;
    padding: 12px;
    background: rgba(175, 205, 175, 0.1);
}

.media-preview.empty {
    color: var(--muted);
    font-size: 12px;
}

.preview-label {
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.preview-image {
    width: 100%;
    max-width: 320px;
    border-radius: 8px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: #ffffff;
}

.table-video-preview {
    position: relative;
    display: inline-flex;
    width: 92px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #050705;
    text-decoration: none;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(5, 7, 5, 0.72);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 20px;
}

.preview-fallback {
    color: var(--muted);
    font-size: 12px;
}

.video-frame-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #050705;
}

.video-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
}

.table-action.reset {
    color: var(--muted);
}

.coupon-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 8px;
    padding: 0 9px;
    background: #eef4ea;
    color: var(--brand-deep);
    font-size: 12px;
    font-weight: 800;
}

.generation-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 8px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 850;
}

.generation-badge.completed {
    background: rgba(175, 205, 175, 0.46);
    color: #244d2a;
}

.generation-badge.running {
    background: #eef4ea;
    color: var(--brand-deep);
}

.generation-badge.pending {
    background: #fff7db;
    color: #8a5d00;
}

.generation-badge.failed {
    background: #f4dedb;
    color: #9a2f24;
}

.coupon-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(190px, 260px) 150px 92px;
}

.coupon-status-panel {
    padding: 14px;
}

.coupon-status-search {
    display: grid;
    grid-template-columns: minmax(240px, 420px) 140px;
    align-items: end;
    gap: 10px;
    max-width: 590px;
}

.coupon-status-search .field-group {
    margin-bottom: 0;
}

.coupon-status-card {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.coupon-status-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    background: #050705;
    color: #ffffff;
}

.coupon-status-heading span {
    color: var(--brand);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.coupon-status-heading strong {
    font-size: 15px;
    letter-spacing: 0;
}

.coupon-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.coupon-status-grid div {
    min-height: 72px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 11px 12px;
}

.coupon-status-grid dt {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.coupon-status-grid dd {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.empty-state {
    display: none;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 11px 12px;
    font-size: 12px;
}

.modal {
    width: min(590px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0;
    box-shadow: var(--shadow);
    overflow: auto;
}

.modal::backdrop {
    background: rgba(24, 32, 27, 0.45);
}

.modal form {
    padding: 20px;
}

.modal-header,
.modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.modal-header {
    margin-bottom: 16px;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
}

.modal-actions {
    justify-content: flex-end;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    font-size: 13px;
    font-weight: 750;
}

.checkbox-field input {
    width: 18px;
    min-height: 18px;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
    margin: 20px 0;
}

.permission-grid .checkbox-field {
    padding: 16px;
    border: 1px solid var(--border-color, #dfe5d8);
    border-radius: 10px;
    background: #fbfcf8;
}
.permission-panel { padding:22px; overflow:visible; }
.permission-user-picker { display:grid; grid-template-columns:minmax(240px,1fr) minmax(320px,1.5fr); gap:16px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#f8fbf5; }
.permission-field { min-width:0; }
.permission-field label { display:block; margin-bottom:7px; color:var(--ink); font-size:12px; font-weight:800; }
.permission-field input,
.permission-field select { display:block; width:100%; min-width:0; height:44px; margin:0; }
.selected-permission-user { display:flex; align-items:center; gap:12px; min-width:0; margin-top:16px; padding:14px 16px; border:1px solid #dce6d8; border-radius:12px; background:#fff; }
.permission-avatar { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; color:#fff; background:#789970; font-weight:850; }
.selected-permission-user div { min-width:0; flex:1; }
.selected-permission-user strong,
.selected-permission-user small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-permission-user small { margin-top:3px; color:var(--muted); }
.permission-role { flex:0 0 auto; padding:6px 10px; border-radius:999px; color:#496344; background:#e8f1e4; font-size:11px; font-weight:850; }
.permission-legend { display:flex; flex-wrap:wrap; gap:16px; margin:18px 2px 0; color:var(--muted); font-size:12px; font-weight:750; }
.permission-legend span { display:inline-flex; align-items:center; gap:6px; }
.permission-legend i { width:9px; height:9px; border-radius:50%; background:#c5cbc2; }
.permission-legend i.read { background:#dfaa49; }
.permission-legend i.write { background:#6b9664; }
.permission-grid { display:block; column-count:2; column-gap:18px; margin-top:18px; }
.permission-group { display:inline-block; width:100%; min-width:0; margin:0 0 18px; overflow:hidden; break-inside:avoid; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(22,35,24,.05); vertical-align:top; }
.permission-group > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border-bottom:1px solid var(--line); background:#f8faf6; }
.permission-group h3 { margin:0; font-size:14px; }
.permission-group header span { color:var(--muted); font-size:11px; font-weight:750; }
.permission-access-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,190px); align-items:center; gap:14px; min-width:0; min-height:58px; padding:9px 15px; border-bottom:1px solid #edf0ea; }
.permission-access-row:last-child { border-bottom:0; }
.permission-access-row label { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:720; white-space:nowrap; }
.permission-access-row select { width:100%; min-width:0; height:40px; margin:0; padding:7px 30px 7px 11px; border-width:1px; font-size:12px; font-weight:700; transition:border-color .16s ease,background .16s ease,color .16s ease; }
.permission-access-row select.access-none { color:#667068; border-color:#dfe4dd; background:#f8faf7; }
.permission-access-row select.access-read { color:#765614; border-color:#ead39f; background:#fff9e9; }
.permission-access-row select.access-write { color:#285b31; border-color:#b8d4b5; background:#eff8ed; }
.permission-footer { position:sticky; z-index:8; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:18px; margin:2px -22px -22px; padding:14px 22px; border-top:1px solid var(--line); border-radius:0 0 14px 14px; background:rgba(255,255,255,.96); box-shadow:0 -8px 22px rgba(31,48,35,.07); backdrop-filter:blur(8px); }
.permission-footer .form-message { flex:1; margin:0; }
.permission-empty { grid-column:1/-1; padding:34px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); text-align:center; }
.access-read-only .table-action:not([data-action="view"]):not([data-action="download"]),
.access-read-only .page-title-row > .primary-button,
.access-read-only dialog button[type="submit"] { display:none !important; }
.coupon-download { display:block; margin-top:7px; white-space:nowrap; color:#315f39; border-color:#b8cab4; background:#f5faf3; }
.coupon-download:disabled { color:#8c958d; opacity:.6; cursor:not-allowed; }
.modal-actions button[hidden] { display:none !important; }
.access-loading .sidebar-nav .nav-link[data-menu-key] { display:none !important; }
.access-loading [data-dashboard-resources],
.access-loading [data-dashboard-superadmin] { display:none !important; }
[data-dashboard-resources][hidden],
[data-dashboard-superadmin][hidden] { display:none !important; }
.sidebar-nav .nav-link[hidden],
.sidebar-nav .nav-group-title[hidden] { display:none !important; }

/* Shared modern loading modal for all admin navigation and API activity. */
.admin-loader {
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(22,31,24,.28);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
}
.admin-loader.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
.admin-loader-card {
    display:flex;
    align-items:center;
    gap:18px;
    width:min(100%,330px);
    padding:20px 22px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:0 24px 70px rgba(18,45,26,.22);
    transform:translateY(8px) scale(.98);
    transition:transform .2s ease;
}
.admin-loader.is-visible .admin-loader-card { transform:translateY(0) scale(1); }
.admin-loader-mark { position:relative; flex:0 0 54px; width:54px; height:54px; }
.admin-loader-mark::before,
.admin-loader-mark::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:3px solid #e3ede0;
}
.admin-loader-mark::after {
    border-color:#477a43 transparent #9bc35d transparent;
    animation:admin-loader-spin .9s linear infinite;
}
.admin-loader-mark span {
    position:absolute;
    top:25px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#477a43;
    animation:admin-loader-pulse 1s ease-in-out infinite;
}
.admin-loader-mark span:nth-child(1) { left:17px; animation-delay:-.2s; }
.admin-loader-mark span:nth-child(2) { left:25px; animation-delay:-.1s; }
.admin-loader-mark span:nth-child(3) { left:33px; }
.admin-loader-copy { display:grid; gap:4px; min-width:0; }
.admin-loader-copy strong { color:#243c29; font-size:16px; letter-spacing:.01em; }
.admin-loader-copy span { color:#738077; font-size:12px; line-height:1.45; }
@keyframes admin-loader-spin { to { transform:rotate(360deg); } }
@keyframes admin-loader-pulse { 0%,100% { opacity:.35; transform:scale(.7); } 50% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
    .admin-loader, .admin-loader-card { transition:none; }
    .admin-loader-mark::after { animation-duration:1.8s; }
    .admin-loader-mark span { animation:none; }
}

@media (max-width: 620px) {
    .permission-panel { padding:14px; }
    .permission-user-picker { padding:14px; }
    .selected-permission-user { align-items:flex-start; flex-wrap:wrap; }
    .permission-role { margin-left:54px; }
    .permission-access-row { grid-template-columns:1fr; gap:7px; }
    .permission-access-row label { white-space:normal; }
    .permission-footer { align-items:stretch; flex-direction:column; margin:18px -14px -14px; padding:14px; }
    .permission-footer .primary-button { width:100%; }
    .permission-grid { column-count:1; }
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .topbar,
    .page-title-row,
    .topbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .metric-grid,
    .toolbar,
    .form-grid,
    .product-command-panel {
        grid-template-columns: 1fr;
    }

    .product-toolbar {
        grid-template-columns: 1fr;
    }

    .banner-toolbar {
        grid-template-columns: 1fr;
    }

    .app-user-management-toolbar {
        grid-template-columns: 1fr;
    }

    .permission-grid,
    .permission-user-picker,
    .permission-group:last-child > div { grid-template-columns:1fr; }

    .permission-group:last-child .permission-access-row:nth-child(odd) { border-right:0; }

    .coupon-status-search,
    .coupon-status-grid {
        grid-template-columns: 1fr;
    }

    .tab-list {
        overflow-x: auto;
    }

    .grid-panel {
        overflow-x: auto;
    }

    .table-media {
        grid-template-columns: 1fr;
    }

    .data-table {
        min-width: 1120px;
    }

    .login-shell {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 560px);
        gap: 32px;
    }

    .brand-panel {
        min-height: auto;
        padding: 34px;
    }

    .brand-panel::after {
        font-size: 72px;
    }

    .brand-logo-large {
        width: min(280px, 88%);
    }

    .brand-panel h1 {
        font-size: 48px;
    }

    .login-panel {
        padding: 28px;
    }
}

/* Final mobile navigation refinements */
@media (max-width: 980px) {
    .admin-body .sidebar { position:fixed; inset:0 auto 0 0; z-index:100; display:block; width:min(280px,84vw); height:100dvh; padding:0 12px 20px; overflow-x:hidden; overflow-y:auto; transform:translate3d(-105%,0,0); transition:transform .24s ease; }
    .admin-body.mobile-menu-open .sidebar { transform:translate3d(0,0,0); }
    .admin-body .sidebar-nav { display:flex; flex-direction:column; align-items:stretch; width:100%; gap:4px; }
    .admin-body .nav-group-title { width:auto; margin:18px 10px 6px; }
    .admin-body .nav-link { display:grid; grid-template-columns:30px minmax(0,1fr); width:100%; min-height:44px; padding:7px 10px; white-space:normal; }
    .admin-body .nav-link > span:last-child { min-width:0; overflow-wrap:anywhere; }
    .admin-body .topbar { min-height:66px; gap:10px; }
    .admin-body .topbar .breadcrumb { display:none; }
    .admin-body .topbar h1 { margin:0; font-size:19px; }
    .admin-body .topbar-actions { flex:0 0 auto; gap:7px; }
    .admin-body .profile-chip { min-height:42px; padding:4px 7px 4px 5px; }
    .admin-body .profile-avatar { width:30px; height:30px; }
    .admin-body .profile-chip strong { font-size:11px; }
    .admin-body .profile-chip small { font-size:9px; }
    .admin-body #logoutButton { min-height:38px; padding:7px 10px; }
}
@media (max-width:480px) {
    .admin-body .topbar { padding:10px 11px; }
    .admin-body .topbar-actions { margin-left:auto; }
    .admin-body .profile-chip > div { display:none; }
    .admin-body #logoutButton { padding-inline:9px; font-size:10px; }
    .admin-body .mobile-menu-button { flex-basis:40px; width:40px; height:40px; min-height:40px; }
}