/* Optional modern design preview. Enabled only when body has .design-modern. */
:root{
    --modern-bg:#f3f4f2;
    --modern-surface:#ffffff;
    --modern-surface-2:#f8faf9;
    --modern-text:#111827;
    --modern-muted:#7b8190;
    --modern-border:#e7e9ee;
    --modern-accent:#13777d;
    --modern-accent-2:#0f6b70;
    --modern-accent-soft:#e8f4f3;
    --modern-ok:#178245;
    --modern-danger:#b42318;
    --modern-danger-soft:#fff1f0;
    --modern-shadow:0 10px 30px rgba(15,23,42,.06);
    --modern-radius:18px;
}
.designToggleForm{margin:0;display:inline-flex;align-items:center}
.topDesignToggle{
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.10);
    color:#fff;
    border-radius:14px;
    min-height:42px;
    padding:0 14px;
    font:inherit;
    font-weight:850;
    cursor:pointer;
    white-space:nowrap;
}
.topDesignToggle:hover{background:rgba(255,255,255,.16)}
.design-modern{
    background:var(--modern-bg);
    color:var(--modern-text);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size:16px;
    line-height:1.45;
}
.design-modern .app{min-height:100vh;padding-bottom:96px;background:var(--modern-bg)}
.design-modern .top{
    position:sticky;
    top:0;
    z-index:30;
    height:72px;
    padding:0 30px;
    background:rgba(243,244,242,.92);
    color:var(--modern-text);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(231,233,238,.85);
    box-shadow:none;
}
.design-modern .top b{font-size:20px;letter-spacing:-.03em;color:#152033}
.design-modern .top small{color:var(--modern-muted);font-weight:650}
.design-modern .topRight{gap:10px}
.design-modern .top .linkbtn{
    color:var(--modern-danger);
    background:var(--modern-danger-soft);
    border:1px solid #ffd0cc;
    border-radius:12px;
    min-height:42px;
    padding:0 14px;
    font-weight:850;
}
.design-modern .topAdminButton,
.design-modern .topDesignToggle{
    min-height:42px;
    border-radius:14px;
    padding:0 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    text-decoration:none;
    border:1px solid var(--modern-border);
    background:var(--modern-surface);
    color:var(--modern-accent);
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.design-modern .topAdminButton{background:linear-gradient(135deg,#23b36b,var(--modern-accent));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(19,119,125,.22)}
.design-modern .topDesignToggle:hover,
.design-modern .topAdminButton:hover{transform:translateY(-1px)}
.design-modern main{max-width:1520px;width:100%;margin:0 auto;padding:30px}
.design-modern .admin,
.design-modern .total,
.design-modern .sheet,
.design-modern .departmentPage{padding:0}
.design-modern .admin h1,
.design-modern .total h1,
.design-modern .departmentTop h1{
    font-size:42px;
    line-height:1.05;
    margin:0 0 18px;
    letter-spacing:-.06em;
    color:#0f172a;
    font-weight:950;
}
.design-modern .adminTabs{
    display:flex;
    gap:8px;
    margin:0 0 18px;
    padding:8px;
    background:var(--modern-surface);
    border:1px solid var(--modern-border);
    border-radius:20px;
    box-shadow:var(--modern-shadow);
    overflow:auto;
}
.design-modern .adminTabs a{
    min-height:44px;
    padding:9px 15px;
    border-radius:14px;
    border:1px solid transparent;
    background:transparent;
    color:#3f4654;
    font-weight:850;
    white-space:nowrap;
}
.design-modern .adminTabs a:hover{background:var(--modern-surface-2);border-color:var(--modern-border)}
.design-modern .adminTabs a.active{background:var(--modern-accent-soft);color:var(--modern-accent);border-color:#d2e9e6}
.design-modern .panel,
.design-modern .adminDetails,
.design-modern .adminrow,
.design-modern .adminEditRow,
.design-modern .sortItem,
.design-modern .card,
.design-modern .totalItem,
.design-modern .empty,
.design-modern .departmentTop,
.design-modern .compactList details{
    background:var(--modern-surface)!important;
    border:1px solid var(--modern-border)!important;
    border-radius:var(--modern-radius)!important;
    box-shadow:var(--modern-shadow)!important;
}
.design-modern .panel{padding:20px;margin-bottom:18px}
.design-modern .panel h2,
.design-modern .admin h2,
.design-modern .admin h3{
    letter-spacing:-.035em;
    color:#101828;
}
.design-modern input,
.design-modern textarea,
.design-modern select,
.design-modern .panel input,
.design-modern .panel select,
.design-modern .adminEditRow input,
.design-modern .adminEditRow select,
.design-modern .departmentSearch,
.design-modern .comment{
    border:1px solid var(--modern-border)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:var(--modern-text)!important;
    box-shadow:none!important;
}
.design-modern input:focus,
.design-modern textarea:focus,
.design-modern select:focus,
.design-modern .departmentSearch:focus,
.design-modern .comment:focus{
    outline:none;
    border-color:#9cc9c8!important;
    box-shadow:0 0 0 3px rgba(19,119,125,.08)!important;
}
.design-modern .primary,
.design-modern .smallPrimary{
    background:var(--modern-accent)!important;
    border:1px solid var(--modern-accent)!important;
    color:#fff!important;
    border-radius:14px!important;
    font-weight:900!important;
    box-shadow:none!important;
}
.design-modern .primary:hover,
.design-modern .smallPrimary:hover{background:var(--modern-accent-2)!important;border-color:var(--modern-accent-2)!important;transform:translateY(-1px)}
.design-modern .danger,
.design-modern .iconDanger{
    background:var(--modern-danger-soft)!important;
    color:var(--modern-danger)!important;
    border:1px solid #ffd0cc!important;
    border-radius:14px!important;
}
.design-modern .linkbtn.dangerText,
.design-modern .dangerText{color:var(--modern-danger)!important}
.design-modern .adminDetails summary,
.design-modern .compactList details summary{
    border-radius:18px;
    padding:14px 16px!important;
    min-height:58px;
}
.design-modern .detailsBody{padding:16px!important;border-top:1px solid var(--modern-border)!important;background:var(--modern-surface-2)!important;border-radius:0 0 18px 18px!important}
.design-modern .detailsDanger{padding:0 16px 16px!important;background:var(--modern-surface-2)!important}
.design-modern .bottom{
    height:76px;
    background:#fff;
    border:1px solid var(--modern-border);
    box-shadow:0 -10px 30px rgba(15,23,42,.08);
    border-radius:22px 22px 0 0;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    max-width:min(1100px, calc(100vw - 24px));
    overflow:hidden;
}
.design-modern .bottom a{
    color:var(--modern-accent);
    border-right:1px solid var(--modern-border);
    font-weight:850;
    background:#fff;
}
.design-modern .bottom a:hover{background:var(--modern-accent-soft)}
.design-modern .departmentTop{
    position:sticky;
    top:72px;
    z-index:18;
    margin:0 0 12px!important;
    padding:18px!important;
    border-top:0!important;
}
.design-modern .departmentTopControls{grid-template-columns:minmax(0,1fr) auto auto!important;gap:10px!important}
.design-modern .markedFilterBtn,
.design-modern .clearInlineBtn.departmentActionBtn{
    min-height:48px;
    border-radius:14px;
    border:1px solid var(--modern-border);
    background:#fff;
    color:var(--modern-accent);
    font-weight:900;
    padding:0 16px;
}
.design-modern .markedFilterBtn.active{background:var(--modern-accent)!important;color:#fff!important;border-color:var(--modern-accent)!important}
.design-modern .category{
    background:linear-gradient(135deg,#fff7d8,#ffe17a)!important;
    border:1px solid #ead16a!important;
    color:#111827!important;
    border-radius:0!important;
}
.design-modern .row{
    background:#fff!important;
    border-color:var(--modern-border)!important;
}
.design-modern .row:hover,
.design-modern .card:hover{background:#fbfdfd!important}
.design-modern .toast{background:#e8f4f3;border-color:#c9e5e2;color:#0f6b70;border-radius:16px;box-shadow:var(--modern-shadow)}
@media(min-width:1100px){
    .design-modern .bottom{
        position:fixed;
        top:72px;
        bottom:0;
        left:0;
        right:auto;
        transform:none;
        width:250px;
        height:auto;
        max-width:none;
        border-radius:0;
        border-top:0;
        border-left:0;
        display:flex;
        flex-direction:column;
        padding:18px;
        gap:6px;
        background:#fff;
    }
    .design-modern .bottom a{
        flex:0 0 auto;
        min-height:44px;
        border:1px solid transparent;
        border-radius:14px;
        justify-content:flex-start;
        padding:0 12px;
    }
    .design-modern .bottom a:hover{border-color:var(--modern-border)}
    .design-modern .top{padding-left:280px}
    .design-modern main{padding-left:280px}
    .design-modern .app{padding-bottom:0}
}
@media(max-width:720px){
    .topDesignToggle{min-height:40px;padding:0 11px;font-size:14px}
    .design-modern .top{height:auto;min-height:66px;padding:10px 14px;align-items:flex-start;flex-direction:column;gap:8px}
    .design-modern .topRight{width:100%;justify-content:flex-start;flex-wrap:wrap}
    .design-modern main{padding:14px 12px 96px}
    .design-modern .admin h1,
    .design-modern .total h1,
    .design-modern .departmentTop h1{font-size:30px;margin-bottom:12px}
    .design-modern .adminTabs{margin-left:0;margin-right:0;border-radius:18px}
    .design-modern .adminTabs a{min-width:120px}
    .design-modern .panel{padding:14px}
    .design-modern .departmentTop{top:0;position:relative;padding:14px!important}
    .design-modern .departmentTopControls{grid-template-columns:1fr 1fr!important;gap:8px!important}
        .design-modern .bottom{height:72px;max-width:100%;border-radius:18px 18px 0 0}
}

/* Fix: keep classic bottom navigation in modern preview and make update action icon-only. */
.design-modern .topUpdateIconButton,
.topUpdateIconButton{
    width:46px!important;
    min-width:46px!important;
    padding:0!important;
    font-size:22px!important;
    line-height:1!important;
}

/* Bottom menu must stay at the bottom exactly like the classic design. */
.design-modern .app{
    padding-bottom:82px!important;
}
.design-modern .bottom{
    position:fixed!important;
    top:auto!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    height:70px!important;
    padding:0!important;
    gap:0!important;
    display:flex!important;
    flex-direction:row!important;
    z-index:10!important;
    background:#22272b!important;
    border-top:1px solid #454b50!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
}
.design-modern .bottom a{
    flex:1 1 0!important;
    min-height:0!important;
    height:70px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-right:1px solid #3b4147!important;
    border-radius:0!important;
    background:transparent!important;
    color:#9fe0ae!important;
    text-decoration:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:16px!important;
    font-weight:500!important;
}
.design-modern .bottom a:hover{
    background:#2a3035!important;
    color:#bff0c9!important;
}
@media(min-width:900px){
    .design-modern .bottom{
        left:50%!important;
        right:auto!important;
        transform:translateX(-50%)!important;
        max-width:1100px!important;
        width:100%!important;
        border-radius:16px 16px 0 0!important;
    }
}
@media(min-width:1100px){
    .design-modern .top{
        padding-left:30px!important;
    }
    .design-modern main{
        padding-left:30px!important;
    }
}
@media(max-width:720px){
    .design-modern .bottom{
        height:70px!important;
        max-width:none!important;
        width:auto!important;
        border-radius:0!important;
    }
    .design-modern .bottom a{
        height:70px!important;
        font-size:15px!important;
    }
}

/* Fix: checkbox visuals in modern preview should stay clean and close to the uploaded classic style. */
.design-modern .bigcheck{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:100%!important;
    min-height:62px!important;
}
.design-modern .bigcheck input{
    display:none!important;
}
.design-modern .bigcheck span{
    width:46px!important;
    height:46px!important;
    border:5px solid #7a7a7a!important;
    border-radius:10px!important;
    background:#fff!important;
    display:block!important;
    position:relative!important;
    box-shadow:none!important;
}
.design-modern .bigcheck input:checked + span{
    background:#777!important;
    border-color:#777!important;
}
.design-modern .bigcheck input:checked + span:after{
    content:'✓'!important;
    position:absolute!important;
    left:6px!important;
    top:-10px!important;
    color:#fff!important;
    font-size:50px!important;
    font-weight:900!important;
    line-height:1!important;
}
.design-modern .buy span{
    border-color:#2b7a3d!important;
}
.design-modern .buy input:checked + span{
    background:#2b7a3d!important;
    border-color:#2b7a3d!important;
}
@media(max-width:640px){
    .design-modern .bigcheck span{
        width:50px!important;
        height:50px!important;
    }
}

/* Modern palette v3: apply uploaded-style colors to the whole purchase UI. */
.design-modern{
    --modern-bg:#f3f4f2;
    --modern-surface:#ffffff;
    --modern-surface-2:#f8faf9;
    --modern-text:#111827;
    --modern-muted:#7b8190;
    --modern-border:#e7e9ee;
    --modern-border-strong:#d9dde5;
    --modern-accent:#13777d;
    --modern-accent-2:#0f6b70;
    --modern-accent-soft:#e8f4f3;
    --modern-ok:#13777d;
    --modern-ok-soft:#e8f4f3;
    --modern-danger:#b42318;
    --modern-danger-soft:#fff1f0;
    --modern-warning:#b7791f;
    --modern-shadow:0 10px 30px rgba(15,23,42,.06);
}

.design-modern body,
body.design-modern,
.design-modern .app,
.design-modern main{
    background:var(--modern-bg)!important;
    color:var(--modern-text)!important;
}

/* Top bar and actions */
.design-modern .top{
    background:rgba(243,244,242,.94)!important;
    border-bottom:1px solid rgba(231,233,238,.9)!important;
    color:var(--modern-text)!important;
}
.design-modern .top b{color:#152033!important;}
.design-modern .top small{color:var(--modern-muted)!important;}
.design-modern .topAdminButton,
.design-modern .topDesignToggle,
.design-modern .topUpdateIconButton{
    background:#fff!important;
    color:var(--modern-accent)!important;
    border:1px solid var(--modern-border)!important;
    box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
}
.design-modern .topAdminButton[href="/admin"],
.design-modern .topAdminButton.adminButton,
.design-modern a.topAdminButton:not(.topUpdateIconButton){
    background:var(--modern-accent)!important;
    color:#fff!important;
    border-color:var(--modern-accent)!important;
}
.design-modern .top .linkbtn{
    color:var(--modern-danger)!important;
    background:var(--modern-danger-soft)!important;
    border:1px solid #ffd0cc!important;
}

/* Primary green pieces -> teal modern palette */
.design-modern .primary,
.design-modern .smallPrimary,
.design-modern .adminTabs a.active,
.design-modern .storeTotalTabs a.active,
.design-modern .storeTopLinks .storeOpenButton,
.design-modern .totalModeBtn.active,
.design-modern .markedFilterBtn.active,
.design-modern .actionBtn.active,
.design-modern .filterBtn.active,
.design-modern button[type="submit"].primary,
.design-modern .btn.primary{
    background:var(--modern-accent)!important;
    color:#fff!important;
    border-color:var(--modern-accent)!important;
}
.design-modern .primary:hover,
.design-modern .smallPrimary:hover,
.design-modern .adminTabs a.active:hover,
.design-modern .storeTotalTabs a.active:hover,
.design-modern .storeTopLinks .storeOpenButton:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
}
.design-modern a,
.design-modern .adminTabs a,
.design-modern .storeTotalTabs a,
.design-modern .storeTopLinks .linkbtn,
.design-modern .totalModeBtn,
.design-modern .markedFilterBtn{
    color:var(--modern-accent)!important;
}

/* Cards, panels and rows */
.design-modern .panel,
.design-modern .adminDetails,
.design-modern .adminrow,
.design-modern .adminEditRow,
.design-modern .sortItem,
.design-modern .card,
.design-modern .totalItem,
.design-modern .empty,
.design-modern .departmentTop,
.design-modern .compactList details,
.design-modern .storeProductItem,
.design-modern .storeSectionDetails,
.design-modern .storeTotalSectionTitle,
.design-modern .row{
    background:var(--modern-surface)!important;
    border:1px solid var(--modern-border)!important;
    box-shadow:var(--modern-shadow)!important;
}
.design-modern .row{
    border-left:0!important;
    border-right:0!important;
    border-bottom:1px solid var(--modern-border)!important;
    box-shadow:none!important;
}
.design-modern .row:hover,
.design-modern .card:hover,
.design-modern .totalItem:hover,
.design-modern .storeProductItem:hover{
    background:#fbfdfd!important;
}

/* Section/category headers: remove old yellow palette. */
.design-modern .category,
.design-modern .storeTotalSectionTitle,
.design-modern .storeProductsArea h3,
.design-modern .storeTotalSectionTitle,
.design-modern .storeSectionTitle{
    background:var(--modern-accent-soft)!important;
    border:1px solid #c9e5e2!important;
    color:var(--modern-accent)!important;
    border-radius:16px!important;
    box-shadow:none!important;
}
.design-modern .category{
    padding:14px 22px!important;
    margin:12px 0 8px!important;
    font-weight:950!important;
    letter-spacing:-.025em!important;
}

/* Checked/bought state: no old green blocks, use soft teal. */
.design-modern .boughtInDepartment,
.design-modern .card.done,
.design-modern .totalItem.done summary,
.design-modern .row.done,
.design-modern .done{
    background:var(--modern-ok-soft)!important;
}
.design-modern .boughtInDepartment .name,
.design-modern .card.done .cardTitle,
.design-modern .totalItem.done .totalItemName{
    color:var(--modern-accent-2)!important;
    text-decoration:line-through!important;
}
.design-modern .buyerCommentInline,
.design-modern .boughtInDepartment .buyerCommentInline{
    color:var(--modern-accent-2)!important;
}

/* Checkbox style from the uploaded design direction: soft card + teal active. */
.design-modern .bigcheck span{
    width:48px!important;
    height:48px!important;
    border:4px solid var(--modern-accent)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:none!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background:var(--modern-accent)!important;
    border-color:var(--modern-accent)!important;
}
.design-modern .bigcheck input:checked + span:after,
.design-modern .totalItem.done .compactBuyCheck span:after{
    content:'✓'!important;
    color:#fff!important;
    font-size:48px!important;
    font-weight:950!important;
    left:7px!important;
    top:-9px!important;
}
.design-modern input[type="checkbox"],
.design-modern .storeProductSelect,
.design-modern .multiSelectProduct,
.design-modern .clearPurchaseOption input,
.design-modern .deptCheck input,
.design-modern .userActiveCheck input{
    accent-color:var(--modern-accent)!important;
}

/* Inputs */
.design-modern input,
.design-modern textarea,
.design-modern select,
.design-modern .comment,
.design-modern .departmentSearch{
    background:#fff!important;
    border:1px solid var(--modern-border)!important;
    color:var(--modern-text)!important;
    border-radius:14px!important;
}
.design-modern input:focus,
.design-modern textarea:focus,
.design-modern select:focus,
.design-modern .comment:focus,
.design-modern .departmentSearch:focus{
    border-color:#9cc9c8!important;
    box-shadow:0 0 0 3px rgba(19,119,125,.08)!important;
}

/* Delete/danger stays red but modern, not old flat. */
.design-modern .danger,
.design-modern .iconDanger,
.design-modern .userDeleteButton,
.design-modern .clearEverythingBtn,
.design-modern .departmentActionBtn.danger,
.design-modern .dangerText{
    color:var(--modern-danger)!important;
}
.design-modern .danger,
.design-modern .iconDanger,
.design-modern .userDeleteButton,
.design-modern .departmentActionBtn.danger{
    background:var(--modern-danger-soft)!important;
    border:1px solid #ffd0cc!important;
}

/* Bottom navigation remains at bottom, but uses modern palette. */
.design-modern .bottom{
    background:rgba(255,255,255,.96)!important;
    border-top:1px solid var(--modern-border)!important;
    box-shadow:0 -10px 30px rgba(15,23,42,.08)!important;
}
.design-modern .bottom a{
    background:transparent!important;
    color:var(--modern-accent)!important;
    border-right:1px solid var(--modern-border)!important;
    font-weight:850!important;
}
.design-modern .bottom a:hover{
    background:var(--modern-accent-soft)!important;
    color:var(--modern-accent-2)!important;
}

@media(max-width:640px){
    .design-modern .category{
        padding:13px 16px!important;
        border-radius:14px!important;
    }
    .design-modern .bigcheck span{
        width:50px!important;
        height:50px!important;
    }
}

/* Modern palette v4: requested polish after visual test. */
/* Bottom navigation must be dark, readable and clearly above light cards. */
.design-modern .bottom{
    background:#1f262b!important;
    border-top:1px solid #3b454d!important;
    box-shadow:0 -16px 36px rgba(15,23,42,.24)!important;
}
.design-modern .bottom a{
    background:transparent!important;
    color:#d7f5f2!important;
    border-right:1px solid rgba(255,255,255,.10)!important;
    font-weight:850!important;
}
.design-modern .bottom a:hover,
.design-modern .bottom a:focus{
    background:#273138!important;
    color:#ffffff!important;
}
.design-modern .bottom a:last-child{border-right:0!important;}

/* User/activity badges: remove old green, use teal modern palette. */
.design-modern .badge.active,
.design-modern .activeBadge,
.design-modern .statusBadge.active,
.design-modern .userStatusBadge.active,
.design-modern .isActiveBadge,
.design-modern .activeLabel,
.design-modern .adminrow .active,
.design-modern .adminDetails .active,
.design-modern .userRow .active,
.design-modern .pill.active,
.design-modern span[class*="active"],
.design-modern span[class*="Active"]{
    background:var(--modern-accent-soft)!important;
    color:var(--modern-accent)!important;
    border:1px solid #c9e5e2!important;
    box-shadow:none!important;
}

/* Keep checkboxes teal, not bright green, including native inputs in admin rows. */
.design-modern input[type="checkbox"]{
    accent-color:var(--modern-accent)!important;
}

/* Header update action: icon-only and in the same teal palette as the rest of modern UI. */
.design-modern .topUpdateIconButton,
.design-modern a.topUpdateIconButton,
.design-modern button.topUpdateIconButton{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    padding:0!important;
    background:var(--modern-accent)!important;
    color:#fff!important;
    border:1px solid var(--modern-accent)!important;
    border-radius:14px!important;
    box-shadow:0 8px 18px rgba(19,119,125,.18)!important;
}
.design-modern .topUpdateIconButton:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
}

/* Make admin button coherent with the update icon. */
.design-modern a.topAdminButton:not(.topUpdateIconButton){
    background:var(--modern-accent)!important;
    color:#fff!important;
    border-color:var(--modern-accent)!important;
}

/* A bit more contrast for light admin rows under the dark bottom nav. */
.design-modern .adminrow,
.design-modern .adminDetails,
.design-modern .panel{
    box-shadow:0 8px 28px rgba(15,23,42,.07)!important;
}

/* Modern palette v5: B2B-like selected rows, clean circular checkmarks and stronger section headers. */
.design-modern{
    --modern-accent:#13777d;
    --modern-accent-2:#0f6b70;
    --modern-accent-soft:#e7f4f3;
    --modern-selected:#e3f1f0;
    --modern-section:#123b42;
    --modern-section-2:#0f6b70;
    --modern-dark-bottom:#1f262b;
}

/* Store/total section headers must not look like bought rows. */
.design-modern .storeTotalPage .storeTotalSectionTitle,
.design-modern .compactTotalPage .storeTotalSectionTitle,
.design-modern .total .storeTotalSectionTitle{
    background:linear-gradient(135deg,var(--modern-section),var(--modern-section-2))!important;
    color:#ffffff!important;
    border:0!important;
    border-radius:16px!important;
    padding:13px 18px!important;
    margin:14px 0 9px!important;
    font-size:19px!important;
    line-height:1.2!important;
    font-weight:950!important;
    letter-spacing:-.02em!important;
    box-shadow:0 8px 24px rgba(15,59,66,.18)!important;
}
.design-modern .storeTotalPage .storeTotalSectionTitle:before,
.design-modern .compactTotalPage .storeTotalSectionTitle:before,
.design-modern .total .storeTotalSectionTitle:before{
    content:'◆';
    opacity:.9;
    margin-right:9px;
    font-size:15px;
}

/* Department page section headers: modern light teal, separated from selected rows. */
.design-modern .departmentPage .category,
.design-modern .sheet .category{
    background:#f0fbfa!important;
    color:var(--modern-accent-2)!important;
    border:1px solid #c9e5e2!important;
    border-radius:16px!important;
    padding:13px 18px!important;
    margin:12px 0 8px!important;
    font-weight:950!important;
    box-shadow:0 5px 16px rgba(15,23,42,.04)!important;
}
.design-modern .departmentPage .category:before,
.design-modern .sheet .category:before{
    content:'◆';
    margin-right:9px;
    color:var(--modern-accent)!important;
}

/* B2B-like row selection: soft teal row background everywhere. */
.design-modern .row.boughtInDepartment,
.design-modern .row.done,
.design-modern .card.done,
.design-modern .totalItem.done summary,
.design-modern .storeProductItem.is-selected,
.design-modern .storeProductItem.selected,
.design-modern .adminrow.is-selected,
.design-modern .adminrow.selected,
.design-modern tr.selected,
.design-modern tr.is-selected,
.design-modern .selectedRow,
.design-modern .isSelected{
    background:var(--modern-selected)!important;
    opacity:1!important;
}
.design-modern .totalItem.done,
.design-modern .card.done{
    opacity:1!important;
}
.design-modern .row.boughtInDepartment .name,
.design-modern .row.done .name,
.design-modern .card.done .cardTitle,
.design-modern .totalItem.done .totalItemName,
.design-modern .totalItem.done .productTitleText{
    color:#51636a!important;
    text-decoration:line-through!important;
    text-decoration-thickness:2px!important;
    text-decoration-color:rgba(81,99,106,.55)!important;
}
.design-modern .quantityInline,
.design-modern .buyerCommentInline,
.design-modern .boughtInDepartment .buyerCommentInline,
.design-modern .totalItem.done .quantityInline,
.design-modern .totalItem.done .buyerCommentInline{
    color:var(--modern-accent-2)!important;
}

/* Circular checkmarks like the uploaded B2B UI. */
.design-modern .bigcheck{
    min-height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}
.design-modern .bigcheck input{display:none!important;}
.design-modern .bigcheck span,
.design-modern .compactBuyCheck span{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border:2px solid #dfe5ea!important;
    border-radius:50%!important;
    background:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .compactBuyCheck input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background:var(--modern-accent)!important;
    border-color:var(--modern-accent)!important;
    box-shadow:none!important;
}
.design-modern .bigcheck input:checked + span:after,
.design-modern .buy input:checked + span:after,
.design-modern .compactBuyCheck input:checked + span:after,
.design-modern .totalItem.done .compactBuyCheck span:after{
    content:'✓'!important;
    position:static!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:950!important;
    transform:none!important;
}
.design-modern .buy span,
.design-modern .compactBuyCheck span{
    border-color:#dfe5ea!important;
}
.design-modern .buy input:checked + span,
.design-modern .compactBuyCheck input:checked + span{
    background:var(--modern-accent)!important;
    border-color:var(--modern-accent)!important;
}

/* Native checkboxes in admin/settings also use teal and softer shape where the browser supports it. */
.design-modern input[type="checkbox"]{
    accent-color:var(--modern-accent)!important;
}
.design-modern .adminrow input[type="checkbox"],
.design-modern .panel input[type="checkbox"],
.design-modern .settings-page input[type="checkbox"],
.design-modern .clearPurchaseOption input[type="checkbox"],
.design-modern .deptCheck input[type="checkbox"],
.design-modern .userActiveCheck input[type="checkbox"],
.design-modern .storeProductSelect,
.design-modern .multiSelectProduct{
    accent-color:var(--modern-accent)!important;
}

/* Active/status badges: keep inside the new teal palette. */
.design-modern .badge.active,
.design-modern .activeBadge,
.design-modern .statusBadge.active,
.design-modern .userStatusBadge.active,
.design-modern .isActiveBadge,
.design-modern .activeLabel,
.design-modern .pill.active,
.design-modern span[class*="active"],
.design-modern span[class*="Active"]{
    background:var(--modern-accent-soft)!important;
    color:var(--modern-accent)!important;
    border:1px solid #c9e5e2!important;
    box-shadow:none!important;
}

/* Header update action: icon only, same palette. */
.design-modern .topUpdateIconButton,
.design-modern a.topUpdateIconButton,
.design-modern button.topUpdateIconButton{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    padding:0!important;
    background:var(--modern-accent)!important;
    color:#fff!important;
    border:1px solid var(--modern-accent)!important;
    border-radius:14px!important;
    box-shadow:0 8px 18px rgba(19,119,125,.18)!important;
}
.design-modern .topUpdateIconButton:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
}

/* Keep the bottom nav dark and readable over light cards. */
.design-modern .bottom{
    background:var(--modern-dark-bottom)!important;
    border-top:1px solid #3b454d!important;
    box-shadow:0 -16px 36px rgba(15,23,42,.24)!important;
}
.design-modern .bottom a{
    background:transparent!important;
    color:#d7f5f2!important;
    border-right:1px solid rgba(255,255,255,.10)!important;
    font-weight:850!important;
}
.design-modern .bottom a:hover,
.design-modern .bottom a:focus{
    background:#273138!important;
    color:#ffffff!important;
}

@media(max-width:640px){
    .design-modern .storeTotalPage .storeTotalSectionTitle,
    .design-modern .compactTotalPage .storeTotalSectionTitle,
    .design-modern .total .storeTotalSectionTitle,
    .design-modern .departmentPage .category,
    .design-modern .sheet .category{
        border-radius:14px!important;
        padding:12px 14px!important;
        font-size:18px!important;
    }
    .design-modern .bigcheck span,
    .design-modern .compactBuyCheck span{
        width:34px!important;
        height:34px!important;
        min-width:34px!important;
    }
}

/* Modern palette v6: all section headers, top icons and unified checkmarks. */
.design-modern{
    --modern-section:#123b42;
    --modern-section-2:#0f6b70;
    --modern-section-text:#ffffff;
    --modern-check:#13777d;
    --modern-check-border:#dfe5ea;
    --modern-selected:#e3f1f0;
}

/* Department subcategory names must be as visible as section names in Total. */
.design-modern .departmentPage .category,
.design-modern .sheet .category,
.design-modern .category{
    background:linear-gradient(135deg,var(--modern-section),var(--modern-section-2))!important;
    color:var(--modern-section-text)!important;
    border:0!important;
    border-radius:16px!important;
    padding:13px 18px!important;
    margin:14px 0 9px!important;
    font-size:19px!important;
    line-height:1.2!important;
    font-weight:950!important;
    letter-spacing:-.02em!important;
    box-shadow:0 8px 24px rgba(15,59,66,.18)!important;
}
.design-modern .departmentPage .category:before,
.design-modern .sheet .category:before,
.design-modern .category:before{
    content:'◆'!important;
    opacity:.9!important;
    margin-right:9px!important;
    font-size:15px!important;
    color:#fff!important;
}

/* Header action buttons: icon-only in modern design. */
.design-modern .topRight{
    align-items:center!important;
}
.design-modern .topDesignToggle,
.design-modern .topAdminButton,
.design-modern .top .linkbtn{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border-radius:14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
    line-height:1!important;
    text-indent:0!important;
    overflow:hidden!important;
    box-shadow:0 8px 18px rgba(19,119,125,.13)!important;
    transform:none!important;
}
.design-modern .topDesignToggle::before{
    content:'◐';
    font-size:22px;
    line-height:1;
}
.design-modern .topUpdateIconButton::before{
    content:'⇪';
    font-size:22px;
    line-height:1;
}
.design-modern .topUpdateIconButton{
    font-size:0!important;
}
.design-modern .topAdminButton[href="/admin"]::before{
    content:'⚙';
    font-size:21px;
    line-height:1;
}
.design-modern .top .linkbtn::before{
    content:'⎋';
    font-size:23px;
    line-height:1;
}
.design-modern .topDesignToggle,
.design-modern .topUpdateIconButton,
.design-modern a.topUpdateIconButton,
.design-modern button.topUpdateIconButton,
.design-modern .topAdminButton[href="/admin"]{
    background:var(--modern-accent)!important;
    color:#fff!important;
    border:1px solid var(--modern-accent)!important;
}
.design-modern .top .linkbtn{
    background:var(--modern-danger-soft)!important;
    color:var(--modern-danger)!important;
    border:1px solid #ffd0cc!important;
}
.design-modern .topDesignToggle:hover,
.design-modern .topUpdateIconButton:hover,
.design-modern a.topUpdateIconButton:hover,
.design-modern button.topUpdateIconButton:hover,
.design-modern .topAdminButton[href="/admin"]:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
    color:#fff!important;
    transform:none!important;
    box-shadow:0 8px 18px rgba(19,119,125,.18)!important;
}
.design-modern .top .linkbtn:hover{
    background:#ffe8e5!important;
    color:var(--modern-danger)!important;
    border-color:#ffc5bf!important;
    transform:none!important;
}

/* Unified B2B-like checkmarks for the whole site in modern design. */
.design-modern input[type="checkbox"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background:#fff!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    vertical-align:middle!important;
    margin:0 8px 0 0!important;
    cursor:pointer!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern input[type="checkbox"]:checked{
    background:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
}
.design-modern input[type="checkbox"]:checked::after{
    content:'✓'!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:950!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-54%)!important;
}
.design-modern input[type="checkbox"]:focus{
    outline:none!important;
    box-shadow:0 0 0 3px rgba(19,119,125,.10)!important;
}
.design-modern input[type="checkbox"]:disabled{
    opacity:.55!important;
    cursor:not-allowed!important;
}

/* Do not show the real input in custom large checkbox components; keep their custom circles. */
.design-modern .bigcheck input[type="checkbox"],
.design-modern .compactBuyCheck input[type="checkbox"]{
    display:none!important;
}
.design-modern .bigcheck span,
.design-modern .compactBuyCheck span{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .compactBuyCheck input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
}
.design-modern .bigcheck input:checked + span:after,
.design-modern .buy input:checked + span:after,
.design-modern .compactBuyCheck input:checked + span:after,
.design-modern .totalItem.done .compactBuyCheck span:after{
    content:'✓'!important;
    position:static!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:950!important;
    transform:none!important;
}

/* Selected rows use one soft teal color across departments, total, stores and admin tables. */
.design-modern .row.boughtInDepartment,
.design-modern .row.done,
.design-modern .card.done,
.design-modern .totalItem.done summary,
.design-modern .storeProductItem.is-selected,
.design-modern .storeProductItem.selected,
.design-modern .adminrow.is-selected,
.design-modern .adminrow.selected,
.design-modern tr.selected,
.design-modern tr.is-selected,
.design-modern .selectedRow,
.design-modern .isSelected{
    background:var(--modern-selected)!important;
}

@media(max-width:640px){
    .design-modern .departmentPage .category,
    .design-modern .sheet .category,
    .design-modern .category{
        border-radius:14px!important;
        padding:12px 14px!important;
        font-size:18px!important;
    }
    .design-modern .topDesignToggle,
    .design-modern .topAdminButton,
    .design-modern .top .linkbtn{
        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;
        height:42px!important;
        min-height:42px!important;
        border-radius:13px!important;
    }
    .design-modern input[type="checkbox"],
    .design-modern .bigcheck span,
    .design-modern .compactBuyCheck span{
        width:34px!important;
        height:34px!important;
        min-width:34px!important;
    }
}

/* Modern palette v7: final unification for admin/settings/buttons/checkmarks. */
.design-modern{
    --modern-accent:#13777d;
    --modern-accent-2:#0f6b70;
    --modern-accent-soft:#e7f4f3;
    --modern-selected:#e3f1f0;
    --modern-check:#13777d;
    --modern-check-border:#dfe5ea;
    --modern-danger:#b42318;
    --modern-danger-soft:#fff1f0;
}

/* Header icons: update keeps its original ⇪ text, the rest are icon-only and never show truncated labels. */
.design-modern .topRight{gap:10px!important;align-items:center!important;}
.design-modern .topDesignToggle,
.design-modern .topAdminButton,
.design-modern .top .linkbtn{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border-radius:14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    box-shadow:0 8px 18px rgba(19,119,125,.13)!important;
    transform:none!important;
}
.design-modern .topDesignToggle,
.design-modern .topAdminButton:not(.topUpdateIconButton),
.design-modern .top .linkbtn{font-size:0!important;color:transparent!important;}
.design-modern .topDesignToggle::before{content:'◐';font-size:22px;color:#fff;line-height:1;}
.design-modern .topAdminButton:not(.topUpdateIconButton)::before{content:'⚙';font-size:21px;color:#fff;line-height:1;}
.design-modern .top .linkbtn::before{content:'↻';font-size:23px;color:var(--modern-danger);line-height:1;}
.design-modern .topUpdateIconButton,
.design-modern a.topUpdateIconButton{
    font-size:23px!important;
    text-indent:0!important;
    color:#fff!important;
    background:var(--modern-accent)!important;
    border:1px solid var(--modern-accent)!important;
}
.design-modern .topUpdateIconButton::before{content:none!important;}
.design-modern .topDesignToggle,
.design-modern .topAdminButton:not(.topUpdateIconButton){
    background:var(--modern-accent)!important;
    border:1px solid var(--modern-accent)!important;
}
.design-modern .topDesignToggle:hover,
.design-modern .topAdminButton:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
    color:#fff!important;
    transform:none!important;
}
.design-modern .top .linkbtn{
    background:var(--modern-danger-soft)!important;
    border:1px solid #ffd0cc!important;
}
.design-modern .top .linkbtn:hover{background:#ffe8e5!important;border-color:#ffc5bf!important;}

/* Hide the update item from admin tab bars if an older template still contains it; update is available from the top ⇪ icon. */
.design-modern .adminTabs a[href="/admin/update"]{display:none!important;}
.design-modern .adminTabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
@media(max-width:760px){.design-modern .adminTabs{display:flex!important;overflow:auto!important;}}

/* Unified circular checkmarks everywhere: departments, totals, admin settings, update form. */
.design-modern input[type="checkbox"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background:#fff!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    vertical-align:middle!important;
    margin:0 10px 0 0!important;
    cursor:pointer!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern input[type="checkbox"]:checked{
    background:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
}
.design-modern input[type="checkbox"]:checked::after{
    content:'✓'!important;
    color:#fff!important;
    font-size:19px!important;
    line-height:1!important;
    font-weight:950!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-55%)!important;
}
.design-modern input[type="checkbox"]:focus{outline:none!important;box-shadow:0 0 0 3px rgba(19,119,125,.10)!important;}
.design-modern input[type="checkbox"]:disabled{opacity:.55!important;cursor:not-allowed!important;}
.design-modern .bigcheck input[type="checkbox"],
.design-modern .compactBuyCheck input[type="checkbox"]{display:none!important;}
.design-modern .bigcheck span,
.design-modern .compactBuyCheck span{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .compactBuyCheck input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
}
.design-modern .bigcheck input:checked + span:after,
.design-modern .buy input:checked + span:after,
.design-modern .compactBuyCheck input:checked + span:after,
.design-modern .totalItem.done .compactBuyCheck span:after{
    content:'✓'!important;
    position:static!important;
    color:#fff!important;
    font-size:19px!important;
    line-height:1!important;
    font-weight:950!important;
    transform:none!important;
}
.design-modern .updateConfirmBox input[type="checkbox"]{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex:0 0 30px!important;
    margin-top:2px!important;
}

/* Department action buttons should be icon-only and match the rest of the modern UI. */
.design-modern .departmentTopControls{align-items:center!important;}
.design-modern .markedFilterBtn,
.design-modern .clearInlineBtn.departmentActionBtn,
.design-modern .departmentActionBtn{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    padding:0!important;
    border-radius:16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    box-shadow:none!important;
}
.design-modern .markedFilterBtn{
    background:var(--modern-accent-soft)!important;
    color:var(--modern-accent)!important;
    border:1px solid #c9e5e2!important;
}
.design-modern .markedFilterBtn::before{content:'✓';font-size:24px;font-weight:950;line-height:1;color:var(--modern-accent);}
.design-modern .markedFilterBtn.active{background:var(--modern-accent)!important;border-color:var(--modern-accent)!important;}
.design-modern .markedFilterBtn.active::before{color:#fff;}
.design-modern .clearInlineBtn.departmentActionBtn,
.design-modern .departmentActionBtn.danger{
    background:var(--modern-danger-soft)!important;
    color:var(--modern-danger)!important;
    border:1px solid #ffd0cc!important;
}
.design-modern .clearInlineBtn.departmentActionBtn::before,
.design-modern .departmentActionBtn.danger::before{content:'×';font-size:28px;font-weight:950;line-height:1;color:var(--modern-danger);}
.design-modern .clearInlineBtn.departmentActionBtn:hover,
.design-modern .departmentActionBtn.danger:hover{background:#ffe8e5!important;border-color:#ffc5bf!important;}

/* Status badges and active labels stay in teal palette, never the old green. */
.design-modern .badge.active,
.design-modern .activeBadge,
.design-modern .statusBadge.active,
.design-modern .userStatusBadge.active,
.design-modern .isActiveBadge,
.design-modern .activeLabel,
.design-modern .pill.active,
.design-modern span[class*="active"],
.design-modern span[class*="Active"]{
    background:var(--modern-accent-soft)!important;
    color:var(--modern-accent)!important;
    border:1px solid #c9e5e2!important;
    box-shadow:none!important;
}

@media(max-width:640px){
    .design-modern .topDesignToggle,
    .design-modern .topAdminButton,
    .design-modern .top .linkbtn{width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;}
    .design-modern .markedFilterBtn,
    .design-modern .clearInlineBtn.departmentActionBtn,
    .design-modern .departmentActionBtn{width:50px!important;min-width:50px!important;max-width:50px!important;height:50px!important;min-height:50px!important;}
    .design-modern input[type="checkbox"],
    .design-modern .bigcheck span,
    .design-modern .compactBuyCheck span{width:32px!important;height:32px!important;min-width:32px!important;}
}

/* Modern UI v26: compact header, uniform native checkmarks, compact admin tabs and icon action buttons. */
.design-modern .top{
    height:60px!important;
    min-height:60px!important;
    padding:8px 16px!important;
}
.design-modern .top b{font-size:18px!important;}
.design-modern .top small{font-size:14px!important;}
.design-modern .topRight{gap:8px!important;align-items:center!important;flex-wrap:nowrap!important;}
.design-modern .designToggleForm{height:44px!important;}
.design-modern .topDesignToggle,
.design-modern .topAdminButton,
.design-modern .topUpdateIconButton,
.design-modern .topAdminIconButton,
.design-modern .top .linkbtn.topLogoutIconButton{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    border-radius:14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:20px!important;
    font-weight:900!important;
    line-height:1!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-indent:0!important;
}
.design-modern .topDesignToggle,
.design-modern .topAdminIconButton,
.design-modern .topUpdateIconButton{
    background:var(--modern-accent)!important;
    color:#fff!important;
    border:1px solid var(--modern-accent)!important;
    box-shadow:0 8px 18px rgba(19,119,125,.16)!important;
}
.design-modern .topDesignToggle:hover,
.design-modern .topAdminIconButton:hover,
.design-modern .topUpdateIconButton:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
    transform:translateY(-1px)!important;
}
.design-modern .top .linkbtn.topLogoutIconButton{
    background:var(--modern-danger-soft)!important;
    color:var(--modern-danger)!important;
    border:1px solid #ffd0cc!important;
}
.design-modern .top .linkbtn.topLogoutIconButton:hover{
    background:#ffe8e5!important;
    transform:translateY(-1px)!important;
}
.design-modern main{padding-top:22px!important;}
.design-modern .departmentTop{top:60px!important;}
@media(max-width:720px){
    .design-modern .top{height:auto!important;min-height:58px!important;flex-direction:row!important;align-items:center!important;gap:8px!important;}
    .design-modern .topRight{margin-left:auto!important;width:auto!important;justify-content:flex-end!important;gap:6px!important;}
    .design-modern .topDesignToggle,
    .design-modern .topAdminButton,
    .design-modern .topUpdateIconButton,
    .design-modern .topAdminIconButton,
    .design-modern .top .linkbtn.topLogoutIconButton{
        width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;border-radius:12px!important;font-size:18px!important;
    }
    .design-modern .top b{font-size:17px!important;}
    .design-modern .top small{font-size:12px!important;}
}

/* Compact admin tabs: no huge navigation blocks. */
.design-modern .adminTabs{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:8px!important;
    padding:8px!important;
    margin:0 0 18px!important;
    border-radius:18px!important;
}
.design-modern .adminTabs a{
    min-height:38px!important;
    min-width:0!important;
    flex:0 1 auto!important;
    padding:8px 14px!important;
    border-radius:12px!important;
    font-size:15px!important;
    line-height:1.1!important;
}
.design-modern .adminTabs a.active{
    box-shadow:none!important;
}
@media(max-width:760px){
    .design-modern .adminTabs{justify-content:flex-start!important;overflow:auto!important;flex-wrap:nowrap!important;}
    .design-modern .adminTabs a{font-size:14px!important;min-width:max-content!important;}
}

/* One checkbox style everywhere in modern design. Native inputs become round teal checkmarks. */
.design-modern input[type="checkbox"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border:2px solid #dfe5ea!important;
    border-radius:50%!important;
    background:#fff!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    margin:0 10px 0 0!important;
    vertical-align:middle!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
    cursor:pointer!important;
}
.design-modern input[type="checkbox"]:checked{
    background:var(--modern-accent)!important;
    border-color:var(--modern-accent)!important;
    box-shadow:none!important;
}
.design-modern input[type="checkbox"]:checked:after{
    content:'✓'!important;
    color:#fff!important;
    font-size:20px!important;
    font-weight:950!important;
    line-height:1!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-53%)!important;
}
.design-modern input[type="checkbox"]:focus{
    outline:none!important;
    box-shadow:0 0 0 4px rgba(19,119,125,.10)!important;
}
/* Hidden checkbox inputs inside custom bigcheck remain hidden; their visual span carries the same round style. */
.design-modern .bigcheck input[type="checkbox"]{
    display:none!important;
}
.design-modern .bigcheck span,
.design-modern .compactBuyCheck span{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border:2px solid #dfe5ea!important;
    border-radius:50%!important;
    background:#fff!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .compactBuyCheck input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background:var(--modern-accent)!important;
    border-color:var(--modern-accent)!important;
    box-shadow:none!important;
}
.design-modern .bigcheck input:checked + span:after,
.design-modern .buy input:checked + span:after,
.design-modern .compactBuyCheck input:checked + span:after,
.design-modern .totalItem.done .compactBuyCheck span:after{
    content:'✓'!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-53%)!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:950!important;
}
/* Labels/cards with checkboxes should align neatly. */
.design-modern .clearPurchaseOption,
.design-modern .deptCheck,
.design-modern .userActiveCheck,
.design-modern .panel label,
.design-modern .adminEditRow label{
    align-items:center!important;
}
.design-modern .userActiveCheck input[type="checkbox"],
.design-modern .deptCheck input[type="checkbox"],
.design-modern .clearPurchaseOption input[type="checkbox"]{
    margin-right:12px!important;
}

/* Department action buttons: compact icon-only buttons in same palette, no emoji text visual noise. */
.design-modern .markedFilterBtn,
.design-modern .departmentActionBtn.clearInlineBtn{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    border-radius:14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
    line-height:1!important;
    overflow:hidden!important;
}
.design-modern .markedFilterBtn:before{
    content:'✓'!important;
    font-size:22px!important;
    font-weight:950!important;
    color:var(--modern-accent)!important;
}
.design-modern .markedFilterBtn.active,
.design-modern .markedFilterBtn.is-active{
    background:var(--modern-accent)!important;
    border-color:var(--modern-accent)!important;
}
.design-modern .markedFilterBtn.active:before,
.design-modern .markedFilterBtn.is-active:before{
    color:#fff!important;
}
.design-modern .departmentActionBtn.clearInlineBtn:before{
    content:'×'!important;
    font-size:26px!important;
    font-weight:950!important;
    color:var(--modern-danger)!important;
}
.design-modern .departmentActionBtn.clearInlineBtn:hover{
    background:#ffe8e5!important;
}
.design-modern .departmentTopControls{
    grid-template-columns:1fr auto auto!important;
}
@media(max-width:640px){
    .design-modern .departmentTopControls{
        grid-template-columns:1fr 52px 52px!important;
    }
}

/* Modern UI v30: compact admin navigation and reliable B2B-style checkmarks everywhere. */
.design-modern{
    --modern-check:#13777d;
    --modern-check-border:#dfe5ea;
    --modern-check-bg:#fff;
    --modern-check-focus:rgba(19,119,125,.12);
}

/* Top buttons: use the real icon text from layout, do not duplicate it with pseudo-elements. */
.design-modern .topDesignToggle::before,
.design-modern .topAdminButton::before,
.design-modern .top .linkbtn::before,
.design-modern .topUpdateIconButton::before,
.design-modern .topAdminIconButton::before,
.design-modern .topLogoutIconButton::before{
    content:none!important;
    display:none!important;
}
.design-modern .topRight{gap:8px!important;align-items:center!important;flex-wrap:nowrap!important;}
.design-modern .topDesignToggle,
.design-modern .topAdminButton,
.design-modern .topUpdateIconButton,
.design-modern .topAdminIconButton,
.design-modern .top .linkbtn,
.design-modern .top .linkbtn.topLogoutIconButton{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    border-radius:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:900!important;
    text-indent:0!important;
    overflow:hidden!important;
    color:#fff!important;
}
.design-modern .topDesignToggle,
.design-modern .topUpdateIconButton,
.design-modern .topAdminIconButton,
.design-modern .topAdminButton[href="/admin"]{
    background:var(--modern-accent)!important;
    border:1px solid var(--modern-accent)!important;
    box-shadow:0 8px 18px rgba(19,119,125,.14)!important;
}
.design-modern .topDesignToggle:hover,
.design-modern .topUpdateIconButton:hover,
.design-modern .topAdminIconButton:hover,
.design-modern .topAdminButton[href="/admin"]:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
    transform:none!important;
}
.design-modern .top .linkbtn.topLogoutIconButton,
.design-modern .top .linkbtn{
    background:var(--modern-danger-soft)!important;
    color:var(--modern-danger)!important;
    border:1px solid #ffd0cc!important;
    box-shadow:0 8px 18px rgba(180,35,24,.08)!important;
}
.design-modern .top .linkbtn.topLogoutIconButton:hover,
.design-modern .top .linkbtn:hover{
    background:#ffe8e5!important;
    border-color:#ffc5bf!important;
    transform:none!important;
}

/* Admin top tabs: compact horizontal pills, never huge half-screen blocks. */
.design-modern .adminTabs{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:10px!important;
    margin:0 0 18px!important;
    border-radius:18px!important;
    width:100%!important;
    min-height:0!important;
}
.design-modern .adminTabs a{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:118px!important;
    max-width:220px!important;
    min-height:40px!important;
    height:auto!important;
    padding:9px 14px!important;
    margin:0!important;
    border-radius:12px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:15px!important;
    line-height:1.15!important;
    font-weight:900!important;
    white-space:nowrap!important;
}
.design-modern .adminTabs a[href="/admin/update"]{display:none!important;}
.design-modern .adminTabs a.active{
    background:var(--modern-accent)!important;
    color:#fff!important;
    border-color:var(--modern-accent)!important;
    box-shadow:none!important;
}
@media(max-width:760px){
    .design-modern .adminTabs{
        flex-wrap:nowrap!important;
        overflow-x:auto!important;
        justify-content:flex-start!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .design-modern .adminTabs a{min-width:max-content!important;font-size:14px!important;}
}

/* Reliable native checkbox rendering: use background SVG instead of pseudo-elements on input. */
.design-modern input[type="checkbox"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    flex:0 0 32px!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background-color:var(--modern-check-bg)!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 20px!important;
    display:inline-block!important;
    vertical-align:middle!important;
    margin:0 10px 0 0!important;
    padding:0!important;
    cursor:pointer!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern input[type="checkbox"]::before,
.design-modern input[type="checkbox"]::after{
    content:none!important;
    display:none!important;
}
.design-modern input[type="checkbox"]:checked{
    background-color:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")!important;
    box-shadow:none!important;
}
.design-modern input[type="checkbox"]:focus{
    outline:none!important;
    box-shadow:0 0 0 4px var(--modern-check-focus)!important;
}
.design-modern input[type="checkbox"]:disabled{opacity:.55!important;cursor:not-allowed!important;}

/* Custom checkbox components must use the exact same visual checkmark. */
.design-modern .bigcheck input[type="checkbox"],
.design-modern .compactBuyCheck input[type="checkbox"]{
    display:none!important;
}
.design-modern .bigcheck span,
.design-modern .compactBuyCheck span{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background-color:var(--modern-check-bg)!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern .bigcheck span::before,
.design-modern .bigcheck span::after,
.design-modern .compactBuyCheck span::before,
.design-modern .compactBuyCheck span::after{
    content:none!important;
    display:none!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .compactBuyCheck input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background-color:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")!important;
    box-shadow:none!important;
}

/* Checkbox labels/cards in Settings, Users and Update: aligned and compact. */
.design-modern .clearPurchaseOption,
.design-modern .deptCheck,
.design-modern .userActiveCheck,
.design-modern .updateConfirmBox,
.design-modern .panel label,
.design-modern .adminEditRow label{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
}
.design-modern .clearPurchaseOption input[type="checkbox"],
.design-modern .deptCheck input[type="checkbox"],
.design-modern .userActiveCheck input[type="checkbox"],
.design-modern .updateConfirmBox input[type="checkbox"]{
    margin:0 10px 0 0!important;
}
.design-modern .updateConfirmBox input[type="checkbox"]{
    width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px!important;
}

@media(max-width:640px){
    .design-modern .topDesignToggle,
    .design-modern .topAdminButton,
    .design-modern .topUpdateIconButton,
    .design-modern .topAdminIconButton,
    .design-modern .top .linkbtn,
    .design-modern .top .linkbtn.topLogoutIconButton{
        width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;border-radius:12px!important;font-size:18px!important;
    }
    .design-modern input[type="checkbox"],
    .design-modern .bigcheck span,
    .design-modern .compactBuyCheck span{
        width:32px!important;height:32px!important;min-width:32px!important;flex-basis:32px!important;
    }
}


/* Modern UI v31: final compact header + reliable round checkmarks in Users/Settings/Update. */
.design-modern{
    --modern-check:#13777d;
    --modern-check-border:#dfe5ea;
    --modern-check-focus:rgba(19,119,125,.12);
}

/* Top bar: show real icons from layout, no duplicated/hidden pseudo icons. */
.design-modern .topRight{
    gap:8px!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
}
.design-modern .topDesignToggle,
.design-modern .topAdminButton,
.design-modern .topUpdateIconButton,
.design-modern .topAdminIconButton,
.design-modern .top .linkbtn,
.design-modern .top .linkbtn.topLogoutIconButton{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0!important;
    border-radius:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:900!important;
    text-indent:0!important;
    overflow:hidden!important;
}
.design-modern .topDesignToggle::before,
.design-modern .topAdminButton::before,
.design-modern .top .linkbtn::before,
.design-modern .topUpdateIconButton::before,
.design-modern .topAdminIconButton::before,
.design-modern .topLogoutIconButton::before{
    content:none!important;
    display:none!important;
}
.design-modern .topDesignToggle,
.design-modern .topUpdateIconButton,
.design-modern .topAdminIconButton,
.design-modern .topAdminButton[href="/admin"]{
    background:var(--modern-accent)!important;
    border:1px solid var(--modern-accent)!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(19,119,125,.14)!important;
}
.design-modern .topDesignToggle:hover,
.design-modern .topUpdateIconButton:hover,
.design-modern .topAdminIconButton:hover,
.design-modern .topAdminButton[href="/admin"]:hover{
    background:var(--modern-accent-2)!important;
    border-color:var(--modern-accent-2)!important;
    color:#fff!important;
    transform:none!important;
}
.design-modern .top .linkbtn.topLogoutIconButton,
.design-modern .top .linkbtn{
    background:var(--modern-danger-soft)!important;
    color:var(--modern-danger)!important;
    border:1px solid #ffd0cc!important;
    box-shadow:0 8px 18px rgba(180,35,24,.08)!important;
}
.design-modern .top .linkbtn.topLogoutIconButton:hover,
.design-modern .top .linkbtn:hover{
    background:#ffe8e5!important;
    border-color:#ffc5bf!important;
    color:var(--modern-danger)!important;
    transform:none!important;
}

/* Admin tabs: compact pills only; no full-height vertical blocks. */
.design-modern .adminTabs{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:10px!important;
    margin:0 0 18px!important;
    border-radius:18px!important;
    width:100%!important;
    min-height:0!important;
}
.design-modern .adminTabs a{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:118px!important;
    max-width:220px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 14px!important;
    margin:0!important;
    border-radius:12px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:15px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
}
.design-modern .adminTabs a[href="/admin/update"]{display:none!important;}
.design-modern .adminTabs a.active{
    background:var(--modern-accent)!important;
    color:#fff!important;
    border-color:var(--modern-accent)!important;
    box-shadow:none!important;
}

/* Native checkboxes: force square/circle dimensions despite old min-height rules from forms. */
.design-modern input[type="checkbox"],
.design-modern .panel input[type="checkbox"],
.design-modern .adminEditRow input[type="checkbox"],
.design-modern .userFormGrid input[type="checkbox"],
.design-modern .userEditBody input[type="checkbox"],
.design-modern .departmentAccessBox input[type="checkbox"],
.design-modern .updateConfirmBox input[type="checkbox"],
.design-modern .quickUserActiveCheckbox,
.design-modern .deptCheck input,
.design-modern .userActiveCheck input,
.design-modern .smallCheck input{
    -webkit-appearance:none!important;
    appearance:none!important;
    box-sizing:border-box!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
    flex:0 0 32px!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    margin:0!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background-color:#fff!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 20px!important;
    display:inline-block!important;
    vertical-align:middle!important;
    cursor:pointer!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern input[type="checkbox"]::before,
.design-modern input[type="checkbox"]::after{
    content:none!important;
    display:none!important;
}
.design-modern input[type="checkbox"]:checked,
.design-modern .panel input[type="checkbox"]:checked,
.design-modern .adminEditRow input[type="checkbox"]:checked,
.design-modern .userFormGrid input[type="checkbox"]:checked,
.design-modern .userEditBody input[type="checkbox"]:checked,
.design-modern .departmentAccessBox input[type="checkbox"]:checked,
.design-modern .updateConfirmBox input[type="checkbox"]:checked,
.design-modern .quickUserActiveCheckbox:checked,
.design-modern .deptCheck input:checked,
.design-modern .userActiveCheck input:checked,
.design-modern .smallCheck input:checked{
    background-color:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")!important;
    box-shadow:none!important;
}
.design-modern input[type="checkbox"]:focus{
    outline:none!important;
    box-shadow:0 0 0 4px var(--modern-check-focus)!important;
}

/* Labels around native checkboxes: align like Total, do not stretch the checkbox. */
.design-modern .clearPurchaseOption,
.design-modern .deptCheck,
.design-modern .userActiveCheck,
.design-modern .smallCheck,
.design-modern .updateConfirmBox,
.design-modern .panel label,
.design-modern .departmentAccessBox label{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
}
.design-modern .updateConfirmBox input[type="checkbox"]{
    margin:0 10px 0 0!important;
}

/* Custom Total/department checkbox spans use the same SVG and dimensions as native checkboxes. */
.design-modern .bigcheck input[type="checkbox"],
.design-modern .compactBuyCheck input[type="checkbox"]{
    display:none!important;
}
.design-modern .bigcheck span,
.design-modern .compactBuyCheck span{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
    flex:0 0 32px!important;
    border:2px solid var(--modern-check-border)!important;
    border-radius:50%!important;
    background-color:#fff!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:20px 20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02)!important;
}
.design-modern .bigcheck span::before,
.design-modern .bigcheck span::after,
.design-modern .compactBuyCheck span::before,
.design-modern .compactBuyCheck span::after{
    content:none!important;
    display:none!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .compactBuyCheck input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background-color:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")!important;
    box-shadow:none!important;
}

@media(max-width:640px){
    .design-modern .adminTabs{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
    .design-modern .adminTabs a{min-width:max-content!important;font-size:14px!important;}
    .design-modern .topDesignToggle,
    .design-modern .topAdminButton,
    .design-modern .topUpdateIconButton,
    .design-modern .topAdminIconButton,
    .design-modern .top .linkbtn,
    .design-modern .top .linkbtn.topLogoutIconButton{
        width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;border-radius:12px!important;font-size:18px!important;
    }
    .design-modern input[type="checkbox"],
    .design-modern .bigcheck span,
    .design-modern .compactBuyCheck span{
        width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important;flex-basis:32px!important;
    }
}


/* Modern UI v42: B2B-like compact admin tabs and final unified checkmarks. */
.design-modern{
    --modern-check:#13777d;
    --modern-check-bg:#ffffff;
    --modern-check-border:#dfe6ec;
    --modern-check-soft:#e6f5f3;
    --modern-check-card:#e9f7f5;
}

/* Top header icons: one icon only, no duplicated glyphs or hidden text. */
.design-modern .topDesignToggle,
.design-modern .topUpdateIconButton,
.design-modern .topAdminIconButton,
.design-modern .topLogoutIconButton{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border-radius:14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
    line-height:1!important;
    overflow:hidden!important;
}
.design-modern .topDesignToggle::before{content:'◐';font-size:20px!important;font-weight:900!important;color:#fff!important;line-height:1!important;}
.design-modern .topUpdateIconButton::before{content:'⇪';font-size:20px!important;font-weight:900!important;color:#fff!important;line-height:1!important;}
.design-modern .topAdminIconButton::before{content:'⚙';font-size:19px!important;font-weight:900!important;color:#fff!important;line-height:1!important;}
.design-modern .topLogoutIconButton::before{content:'↻';font-size:20px!important;font-weight:900!important;color:var(--modern-danger)!important;line-height:1!important;}
.design-modern .topDesignToggle,
.design-modern .topUpdateIconButton,
.design-modern .topAdminIconButton{
    background:var(--modern-accent)!important;
    color:#fff!important;
    border-color:var(--modern-accent)!important;
    box-shadow:0 10px 24px rgba(19,119,125,.18)!important;
}
.design-modern .topDesignToggle:hover,
.design-modern .topUpdateIconButton:hover,
.design-modern .topAdminIconButton:hover{
    background:#0f6b70!important;
    border-color:#0f6b70!important;
    transform:translateY(-1px);
}
.design-modern .topLogoutIconButton{
    background:var(--modern-danger-soft)!important;
    border-color:#ffd0cc!important;
    box-shadow:none!important;
}

/* Compact B2B-like admin section navigation. */
.design-modern .adminTabs{
    max-width:none!important;
    width:100%!important;
    margin:14px 0 18px!important;
    padding:8px!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    border:1px solid var(--modern-border)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(15,23,42,.045)!important;
}
.design-modern .adminTabs a{
    flex:0 0 auto!important;
    min-width:0!important;
    width:auto!important;
    min-height:42px!important;
    height:42px!important;
    padding:0 18px!important;
    margin:0!important;
    border-radius:14px!important;
    border:1px solid transparent!important;
    background:transparent!important;
    color:var(--modern-accent)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:15px!important;
    font-weight:850!important;
    line-height:1!important;
    box-shadow:none!important;
    text-decoration:none!important;
}
.design-modern .adminTabs a:hover{
    background:var(--modern-accent-soft)!important;
    color:var(--modern-accent)!important;
    border-color:#c9e5e2!important;
}
.design-modern .adminTabs a.active{
    background:var(--modern-accent)!important;
    color:#fff!important;
    border-color:var(--modern-accent)!important;
    box-shadow:0 8px 18px rgba(19,119,125,.14)!important;
}
.design-modern .adminTabs a[href="/admin/update"]{display:none!important;}
@media(max-width:760px){
    .design-modern .adminTabs{
        flex-wrap:nowrap!important;
        overflow-x:auto!important;
        scrollbar-width:none!important;
        padding:6px!important;
        border-radius:16px!important;
    }
    .design-modern .adminTabs::-webkit-scrollbar{display:none!important;}
    .design-modern .adminTabs a{
        height:40px!important;
        min-height:40px!important;
        padding:0 14px!important;
        font-size:14px!important;
        white-space:nowrap!important;
    }
}

/* Final checkbox system: the same round B2B-like checkmark everywhere. */
.design-modern input[type="checkbox"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    box-sizing:border-box!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex:0 0 34px!important;
    margin:0 12px 0 0!important;
    border-radius:999px!important;
    border:2px solid var(--modern-check-border)!important;
    background-color:var(--modern-check-bg)!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:18px 18px!important;
    display:inline-block!important;
    vertical-align:middle!important;
    cursor:pointer!important;
    box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
    transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
.design-modern input[type="checkbox"]::before,
.design-modern input[type="checkbox"]::after{display:none!important;content:none!important;}
.design-modern input[type="checkbox"]:checked{
    background-color:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.3 4.3L19.5 6.7'/%3E%3C/svg%3E")!important;
}
.design-modern input[type="checkbox"]:focus{outline:none!important;box-shadow:0 0 0 4px rgba(19,119,125,.12)!important;}
.design-modern input[type="checkbox"]:hover{border-color:#b8d7d5!important;}

/* Custom large check labels used in departments/totals: same circle, no text glyph duplication. */
.design-modern .bigcheck input[type="checkbox"],
.design-modern .compactBuyCheck input[type="checkbox"]{
    display:none!important;
}
.design-modern .bigcheck,
.design-modern .compactBuyCheck{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:0!important;
}
.design-modern .bigcheck span,
.design-modern .compactBuyCheck span,
.design-modern .buy span{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:999px!important;
    border:2px solid var(--modern-check-border)!important;
    background:#fff!important;
    box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
    position:relative!important;
    display:inline-block!important;
    box-sizing:border-box!important;
}
.design-modern .bigcheck span::before,
.design-modern .bigcheck span::after,
.design-modern .compactBuyCheck span::before,
.design-modern .compactBuyCheck span::after,
.design-modern .buy span::before,
.design-modern .buy span::after{
    content:none!important;
    display:none!important;
}
.design-modern .bigcheck input:checked + span,
.design-modern .compactBuyCheck input:checked + span,
.design-modern .buy input:checked + span,
.design-modern .totalItem.done .compactBuyCheck span{
    background-color:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.3 4.3L19.5 6.7'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:18px 18px!important;
}

/* B2B-like selected cards in settings/users/update: selected must be obvious. */
.design-modern .panel label:has(input[type="checkbox"]:checked),
.design-modern .adminEditRow label:has(input[type="checkbox"]:checked),
.design-modern .settings-page label:has(input[type="checkbox"]:checked),
.design-modern .clearPurchaseOption:has(input[type="checkbox"]:checked),
.design-modern .deptCheck:has(input[type="checkbox"]:checked),
.design-modern .userActiveCheck:has(input[type="checkbox"]:checked),
.design-modern .updateConfirmBox:has(input[type="checkbox"]:checked),
.design-modern label.userActiveCheck:has(input[type="checkbox"]:checked),
.design-modern label.deptCheck:has(input[type="checkbox"]:checked){
    background:var(--modern-check-card)!important;
    border-color:var(--modern-check)!important;
    box-shadow:0 10px 22px rgba(19,119,125,.08)!important;
}
.design-modern .userActiveCheck,
.design-modern .deptCheck,
.design-modern .clearPurchaseOption,
.design-modern .updateConfirmBox,
.design-modern .settings-page label:has(input[type="checkbox"]),
.design-modern .panel label:has(input[type="checkbox"]){
    border-radius:18px!important;
    transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
.design-modern .userActiveCheck input[type="checkbox"],
.design-modern .deptCheck input[type="checkbox"],
.design-modern .clearPurchaseOption input[type="checkbox"],
.design-modern .updateConfirmBox input[type="checkbox"]{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    margin-right:12px!important;
}
.design-modern .updateConfirmBox{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
}
.design-modern .updateConfirmBox input[type="checkbox"]{align-self:center!important;}

/* Department action buttons in modern design: icon-only, calm and consistent. */
.design-modern .markedFilterBtn,
.design-modern .clearDeptBtn,
.design-modern .departmentActionBtn{
    min-width:46px!important;
    width:46px!important;
    height:46px!important;
    padding:0!important;
    font-size:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:14px!important;
}
.design-modern .markedFilterBtn::before{content:'✓';font-size:22px!important;font-weight:900!important;line-height:1!important;}
.design-modern .clearDeptBtn::before{content:'×';font-size:24px!important;font-weight:900!important;line-height:1!important;}
.design-modern .markedFilterBtn{background:var(--modern-accent-soft)!important;color:var(--modern-accent)!important;border-color:#c9e5e2!important;}
.design-modern .markedFilterBtn.active{background:var(--modern-accent)!important;color:#fff!important;border-color:var(--modern-accent)!important;}
.design-modern .clearDeptBtn{background:var(--modern-danger-soft)!important;color:var(--modern-danger)!important;border-color:#ffd0cc!important;}

/* Store edit section titles same as total section titles. */
.design-modern .storeSectionTitle,
.design-modern .storeSectionDetails > summary,
.design-modern .storeDepartmentTitle{
    background:linear-gradient(135deg,#0b4b50,#13777d)!important;
    color:#fff!important;
    border:0!important;
    border-radius:16px!important;
    box-shadow:0 10px 22px rgba(19,119,125,.12)!important;
}


/* FINAL mobile/header/actions polish v60 */
.design-modern .topRight{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
}
.design-modern .topRight form{margin:0!important;display:inline-flex!important;}
.design-modern .topDesignToggle,
.design-modern .topAdminButton,
.design-modern .top .linkbtn.topLogoutIconButton{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border-radius:14px!important;
    font-size:0!important;
    line-height:0!important;
    overflow:hidden!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
}
.design-modern .topDesignToggle::before,
.design-modern .topUpdateIconButton::before,
.design-modern .topAdminIconButton::before,
.design-modern .topLogoutIconButton::before{
    content:''!important;
    display:block!important;
    width:22px!important;
    height:22px!important;
    background:currentColor!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:22px 22px!important;
    mask-size:22px 22px!important;
}
.design-modern .topDesignToggle::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20V2Zm0 2v16a8 8 0 0 1 0-16Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20V2Zm0 2v16a8 8 0 0 1 0-16Z'/%3E%3C/svg%3E")!important;
}
.design-modern .topUpdateIconButton::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 5.5 9.5l1.4 1.4L11 6.8V16h2V6.8l4.1 4.1 1.4-1.4L12 3Zm-7 15v3h14v-3h-2v1H7v-1H5Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 5.5 9.5l1.4 1.4L11 6.8V16h2V6.8l4.1 4.1 1.4-1.4L12 3Zm-7 15v3h14v-3h-2v1H7v-1H5Z'/%3E%3C/svg%3E")!important;
}
.design-modern .topAdminIconButton::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a7.7 7.7 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A7.7 7.7 0 0 0 7 6L4.6 5l-2 3.5 2 1.5c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2 1.5 2 3.5 2.4-1a7.7 7.7 0 0 0 2.6 1.5L10 22h4l.4-2.5A7.7 7.7 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a7.7 7.7 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A7.7 7.7 0 0 0 7 6L4.6 5l-2 3.5 2 1.5c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2 1.5 2 3.5 2.4-1a7.7 7.7 0 0 0 2.6 1.5L10 22h4l.4-2.5A7.7 7.7 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E")!important;
}
.design-modern .topLogoutIconButton::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.3 5.3A8 8 0 1 1 4 11h2.1a6 6 0 1 0 1.6-4.1L10 9.2H3.8V3l2.5 2.3Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.3 5.3A8 8 0 1 1 4 11h2.1a6 6 0 1 0 1.6-4.1L10 9.2H3.8V3l2.5 2.3Z'/%3E%3C/svg%3E")!important;
}
.design-modern .topAdminButton::after,
.design-modern .topDesignToggle::after,
.design-modern .topLogoutIconButton::after{content:none!important;display:none!important;}
.design-modern .topAdminButton:hover,
.design-modern .topDesignToggle:hover,
.design-modern .top .linkbtn.topLogoutIconButton:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 10px 20px rgba(19,119,125,.15)!important;
}
.design-modern .top .linkbtn.topLogoutIconButton:hover{box-shadow:0 10px 20px rgba(180,35,24,.10)!important;}

/* Mobile: sticky and compact department header/search. */
@media(max-width:720px){
    .design-modern .top{
        position:sticky!important;
        top:0!important;
        z-index:70!important;
        min-height:58px!important;
        height:auto!important;
        padding:10px 14px!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:8px!important;
    }
    .design-modern .top b{font-size:18px!important;}
    .design-modern .top small{font-size:13px!important;}
    .design-modern .topRight{width:auto!important;justify-content:flex-end!important;gap:6px!important;}
    .design-modern .topDesignToggle,
    .design-modern .topAdminButton,
    .design-modern .top .linkbtn.topLogoutIconButton{
        width:42px!important;
        min-width:42px!important;
        height:42px!important;
        min-height:42px!important;
        border-radius:13px!important;
    }
    .design-modern .departmentTop{
        position:sticky!important;
        top:62px!important;
        z-index:50!important;
        padding:12px!important;
        margin:0 0 10px!important;
        border-radius:20px!important;
    }
    .design-modern .departmentTop h1{
        font-size:28px!important;
        line-height:1.05!important;
        margin:0 0 10px!important;
        letter-spacing:-.05em!important;
    }
    .design-modern .departmentTopControls{
        display:grid!important;
        grid-template-columns:1fr auto auto!important;
        gap:8px!important;
        align-items:center!important;
    }
    .design-modern .departmentSearch{
        height:46px!important;
        min-height:46px!important;
        font-size:17px!important;
        border-radius:16px!important;
        padding:0 14px!important;
    }
    .design-modern .markedFilterBtn,
    .design-modern .clearDeptBtn,
    .design-modern .departmentActionBtn{
        height:46px!important;
        min-height:46px!important;
        border-radius:16px!important;
    }
}

/* Return readable label for marked button in departments, keep delete as icon. */
.design-modern .markedFilterBtn{
    width:auto!important;
    min-width:142px!important;
    padding:0 15px!important;
    font-size:0!important;
    gap:8px!important;
}
.design-modern .markedFilterBtn::before{
    content:'✓'!important;
    font-size:20px!important;
    font-weight:950!important;
    line-height:1!important;
}
.design-modern .markedFilterBtn::after{
    content:'Отмеченные'!important;
    display:inline!important;
    font-size:16px!important;
    font-weight:900!important;
    line-height:1!important;
}
.design-modern .markedFilterBtn.active::after{content:'Все позиции'!important;}
.design-modern .clearDeptBtn,
.design-modern .clearInlineBtn.departmentActionBtn{
    width:48px!important;
    min-width:48px!important;
    padding:0!important;
    font-size:0!important;
}
.design-modern .clearDeptBtn::before,
.design-modern .clearInlineBtn.departmentActionBtn::before{
    content:'×'!important;
    font-size:26px!important;
    font-weight:950!important;
    line-height:1!important;
}
@media(max-width:520px){
    .design-modern .markedFilterBtn{min-width:132px!important;padding:0 12px!important;}
    .design-modern .markedFilterBtn::after{font-size:15px!important;}
    .design-modern .clearDeptBtn,
    .design-modern .clearInlineBtn.departmentActionBtn{width:46px!important;min-width:46px!important;}
}

/* Update page info box in modern design: no old green block, no broken monospace layout. */
.design-modern .updateInfoBox{
    background:var(--modern-surface-2)!important;
    border:1px solid var(--modern-border)!important;
    border-radius:18px!important;
    padding:16px 18px!important;
    color:var(--modern-text)!important;
    box-shadow:none!important;
}
.design-modern .updateInfoBox b{font-weight:900!important;color:#101828!important;}
.design-modern .updateInfoBox ul{margin:10px 0 0!important;padding-left:20px!important;display:block!important;}
.design-modern .updateInfoBox li{margin:6px 0!important;line-height:1.4!important;}
.design-modern .updateInfoBox code,
.design-modern .updateCodeBlock,
.design-modern .updateOutputBox pre{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important;
}
.design-modern .updateInfoBox code{
    background:#fff!important;
    border:1px solid var(--modern-border)!important;
    color:var(--modern-accent)!important;
    border-radius:8px!important;
    padding:1px 5px!important;
}

/* Admin tabs: compact, B2B-like and never half-screen tall. */
.design-modern .adminTabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    min-height:58px!important;
    max-height:72px!important;
}
.design-modern .adminTabs::-webkit-scrollbar{display:none!important;}
.design-modern .adminTabs a{
    flex:0 0 auto!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 18px!important;
    font-size:15px!important;
    line-height:1!important;
}

/* Ensure B2B-like selected cards are clearly visible and checkmarks do not duplicate. */
.design-modern .updateConfirmBox input[type="checkbox"]::before,
.design-modern .updateConfirmBox input[type="checkbox"]::after,
.design-modern .userActiveCheck input[type="checkbox"]::before,
.design-modern .userActiveCheck input[type="checkbox"]::after,
.design-modern .deptCheck input[type="checkbox"]::before,
.design-modern .deptCheck input[type="checkbox"]::after{
    content:none!important;
    display:none!important;
}
.design-modern .updateConfirmBox input[type="checkbox"]:checked,
.design-modern .userActiveCheck input[type="checkbox"]:checked,
.design-modern .deptCheck input[type="checkbox"]:checked{
    background-color:var(--modern-check)!important;
    border-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.3 4.3L19.5 6.7'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:18px 18px!important;
}

/* Modern UI v73: restore readable top icons and B2B-like total default selection cards. */
.design-modern .topIconOnly::before,
.design-modern .topIconOnly::after,
.design-modern .topDesignToggle::before,
.design-modern .topDesignToggle::after,
.design-modern .topUpdateIconButton::before,
.design-modern .topUpdateIconButton::after,
.design-modern .topAdminIconButton::before,
.design-modern .topAdminIconButton::after,
.design-modern .topLogoutIconButton::before,
.design-modern .topLogoutIconButton::after{
    content:none!important;
    display:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    background-image:none!important;
}
.design-modern .topSymbolButton,
.design-modern .top .topSymbolButton,
.design-modern .top a.topSymbolButton,
.design-modern .top button.topSymbolButton{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:1!important;
    text-decoration:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    overflow:hidden!important;
    letter-spacing:0!important;
}
.design-modern .topUpdateIconButton.topSymbolButton{font-size:25px!important;}
.design-modern .topAdminIconButton.topSymbolButton{font-size:22px!important;}
.design-modern .topLogoutIconButton.topSymbolButton{font-size:25px!important;color:#b42318!important;}
@media(max-width:720px){
    .design-modern .topSymbolButton,
    .design-modern .top .topSymbolButton,
    .design-modern .top a.topSymbolButton,
    .design-modern .top button.topSymbolButton{
        font-size:22px!important;
    }
    .design-modern .topRight{gap:7px!important;}
}

/* Default Total tab in settings: radio cards instead of dropdown. */
.design-modern .settingsChoiceGrid,
.design-modern .totalDefaultCards{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
    gap:12px!important;
    margin:14px 0 6px!important;
}
.design-modern .settingsChoiceCard{
    min-height:86px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    padding:16px 18px!important;
    border:1px solid var(--modern-border)!important;
    border-radius:18px!important;
    background:#fff!important;
    cursor:pointer!important;
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
    color:var(--modern-text)!important;
}
.design-modern .settingsChoiceCard:hover{
    border-color:rgba(18,126,130,.35)!important;
    box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
    transform:translateY(-1px)!important;
}
.design-modern .settingsChoiceCard.is-selected,
.design-modern .settingsChoiceCard:has(input:checked){
    background:#e5f6f2!important;
    border-color:var(--modern-accent)!important;
    box-shadow:inset 0 0 0 1px rgba(18,126,130,.08)!important;
}
.design-modern .settingsChoiceCard input[type="radio"]{
    position:absolute!important;
    opacity:0!important;
    pointer-events:none!important;
    width:1px!important;
    height:1px!important;
}
.design-modern .settingsChoiceMark{
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    border-radius:999px!important;
    border:2px solid var(--modern-border-strong,#dde6ea)!important;
    background:#fff!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
}
.design-modern .settingsChoiceCard.is-selected .settingsChoiceMark,
.design-modern .settingsChoiceCard:has(input:checked) .settingsChoiceMark{
    background:var(--modern-check,var(--modern-accent))!important;
    border-color:var(--modern-check,var(--modern-accent))!important;
    color:#fff!important;
}
.design-modern .settingsChoiceCard.is-selected .settingsChoiceMark::before,
.design-modern .settingsChoiceCard:has(input:checked) .settingsChoiceMark::before{
    content:'✓'!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:1!important;
    font-weight:950!important;
    transform:translateY(-1px)!important;
}
.design-modern .settingsChoiceText{display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important;}
.design-modern .settingsChoiceText strong{font-size:17px!important;font-weight:950!important;color:#101828!important;line-height:1.1!important;}
.design-modern .settingsChoiceText small{font-size:13px!important;font-weight:750!important;color:var(--modern-muted)!important;line-height:1.25!important;}
@media(max-width:640px){
    .design-modern .settingsChoiceGrid,
    .design-modern .totalDefaultCards{grid-template-columns:1fr!important;gap:10px!important;}
    .design-modern .settingsChoiceCard{min-height:74px!important;padding:13px 14px!important;border-radius:16px!important;}
    .design-modern .settingsChoiceMark{width:30px!important;height:30px!important;flex-basis:30px!important;}
    .design-modern .settingsChoiceText strong{font-size:16px!important;}
}

/* Keep admin tabs compact after previous overrides. */
.design-modern .adminTabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:8px!important;
    min-height:56px!important;
    max-height:64px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
}
.design-modern .adminTabs::-webkit-scrollbar{display:none!important;}
.design-modern .adminTabs a{
    flex:0 0 auto!important;
    height:40px!important;
    min-height:40px!important;
    min-width:auto!important;
    padding:0 17px!important;
    border-radius:14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:15px!important;
    line-height:1!important;
    white-space:nowrap!important;
}
@media(max-width:720px){
    .design-modern .adminTabs{margin:0!important;border-radius:18px!important;}
    .design-modern .adminTabs a{height:38px!important;min-height:38px!important;font-size:14px!important;padding:0 14px!important;}
}


/* Final minimal top logout icon fix: restore visible icon without changing page layout/colors. */
.design-modern .top .linkbtn.topLogoutIconButton{
    font-size:0!important;
    color:transparent!important;
}
.design-modern .top .linkbtn.topLogoutIconButton::before{
    content:'↻'!important;
    display:block!important;
    font-size:22px!important;
    font-weight:900!important;
    line-height:1!important;
    color:var(--modern-danger,#c0392b)!important;
}
@media(max-width:640px){
    .design-modern .top .linkbtn.topLogoutIconButton::before{font-size:21px!important;}
}


/* === FINAL: clean B2B-like top SVG icon buttons, no emoji/pseudo duplicates === */
.design-modern .topRight{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
}
.design-modern .topRight form{
    display:inline-flex!important;
    align-items:center!important;
    margin:0!important;
    padding:0!important;
}
.design-modern .topIconOnly,
.design-modern .topDesignToggle,
.design-modern .topAdminButton,
.design-modern .top .linkbtn.topLogoutIconButton{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    max-width:52px!important;
    max-height:52px!important;
    padding:0!important;
    border-radius:16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    text-indent:0!important;
    font-size:0!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-decoration:none!important;
}
.design-modern .topIconOnly::before,
.design-modern .topDesignToggle::before,
.design-modern .topAdminButton::before,
.design-modern .top .linkbtn.topLogoutIconButton::before,
.design-modern .top .linkbtn::before{
    content:none!important;
    display:none!important;
}
.design-modern .topSvgIcon{
    width:23px!important;
    height:23px!important;
    display:block!important;
    flex:0 0 23px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2.25!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}
.design-modern .topDesignToggle,
.design-modern .topAdminButton{
    background:#0f7f86!important;
    color:#fff!important;
    border:1px solid #0f7f86!important;
    box-shadow:0 12px 28px rgba(15,127,134,.20)!important;
}
.design-modern .topDesignToggle:hover,
.design-modern .topAdminButton:hover{
    background:#0b7076!important;
    border-color:#0b7076!important;
    color:#fff!important;
    transform:translateY(-1px);
}
.design-modern .top .linkbtn.topLogoutIconButton{
    background:#fff7f6!important;
    color:#c83224!important;
    border:1px solid #ffc9c1!important;
    box-shadow:0 12px 28px rgba(200,50,36,.11)!important;
}
.design-modern .top .linkbtn.topLogoutIconButton:hover{
    background:#ffecea!important;
    border-color:#ffb7ad!important;
    color:#b52b20!important;
    transform:translateY(-1px);
}
@media (max-width:640px){
    .design-modern .topRight{gap:8px!important;}
    .design-modern .topIconOnly,
    .design-modern .topDesignToggle,
    .design-modern .topAdminButton,
    .design-modern .top .linkbtn.topLogoutIconButton{
        width:50px!important;
        height:50px!important;
        min-width:50px!important;
        min-height:50px!important;
        max-width:50px!important;
        max-height:50px!important;
        border-radius:15px!important;
    }
    .design-modern .topSvgIcon{
        width:22px!important;
        height:22px!important;
        flex-basis:22px!important;
    }
}

/* Modern UI v32: compact users form and settings-style square checkmarks for users/products. */
.design-modern .adminUsersPage .userFormGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 180px 170px!important;
    gap:12px!important;
    align-items:center!important;
    width:100%!important;
}
.design-modern .adminUsersPage .userFormGrid > input[name="name"],
.design-modern .adminUsersPage .userFormGrid > input[name="pin"]{
    min-height:56px!important;
    margin:0!important;
}
.design-modern .adminUsersPage .userActiveCheck{
    min-height:56px!important;
    margin:0!important;
    padding:9px 14px!important;
    border:1px solid var(--modern-border)!important;
    border-radius:16px!important;
    background:#fff!important;
    justify-content:flex-start!important;
    white-space:nowrap!important;
    font-weight:900!important;
    color:var(--modern-text)!important;
}
.design-modern .adminUsersPage .roleChoiceGrid,
.design-modern .adminUsersPage .roleChoiceGridEdit{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
}
.design-modern .adminUsersPage .roleChoiceCard{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:54px!important;
    padding:9px 12px!important;
    margin:0!important;
    border:1px solid var(--modern-border)!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:none!important;
    cursor:pointer!important;
    transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
.design-modern .adminUsersPage .roleChoiceCard input[type="radio"]{
    position:absolute!important;
    opacity:0!important;
    width:1px!important;
    height:1px!important;
    pointer-events:none!important;
}
.design-modern .adminUsersPage .roleChoiceText{
    display:block!important;
    min-width:0!important;
    color:var(--modern-text)!important;
    font-weight:900!important;
    line-height:1.15!important;
}
.design-modern .adminUsersPage .roleChoiceText b{
    display:block!important;
    font-size:15px!important;
    line-height:1.15!important;
}
.design-modern .adminUsersPage .roleChoiceText small{
    display:none!important;
}
.design-modern .adminUsersPage .departmentAccessBox{
    padding:12px!important;
    border-radius:16px!important;
    background:var(--modern-soft)!important;
    border:1px solid var(--modern-border)!important;
    margin:0!important;
}
.design-modern .adminUsersPage .deptAccessGrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:10px!important;
}
.design-modern .adminUsersPage .deptCheck{
    min-height:54px!important;
    padding:9px 12px!important;
    margin:0!important;
    border:1px solid var(--modern-border)!important;
    border-radius:16px!important;
    background:#fff!important;
    font-weight:900!important;
    color:var(--modern-text)!important;
}
.design-modern .adminProductsPage .multiSelectWrap{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    cursor:pointer!important;
}
.design-modern .adminProductsPage .multiSelectProduct,
.design-modern .adminProductsPage .productCompactItem .smallCheck input[type="checkbox"],
.design-modern .adminUsersPage .deptCheck input[type="checkbox"],
.design-modern .adminUsersPage .userActiveCheck input[type="checkbox"],
.design-modern .adminUsersPage .roleChoiceCard input[type="radio"] + .roleChoiceMark{
    -webkit-appearance:none!important;
    appearance:none!important;
    box-sizing:border-box!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    flex:0 0 34px!important;
    padding:0!important;
    margin:0!important;
    border:3px solid var(--modern-check-border)!important;
    border-radius:10px!important;
    background-color:#fff!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:24px 24px!important;
    box-shadow:none!important;
    cursor:pointer!important;
}
.design-modern .adminProductsPage .multiSelectProduct::before,
.design-modern .adminProductsPage .multiSelectProduct::after,
.design-modern .adminProductsPage .productCompactItem .smallCheck input[type="checkbox"]::before,
.design-modern .adminProductsPage .productCompactItem .smallCheck input[type="checkbox"]::after,
.design-modern .adminUsersPage .deptCheck input[type="checkbox"]::before,
.design-modern .adminUsersPage .deptCheck input[type="checkbox"]::after,
.design-modern .adminUsersPage .userActiveCheck input[type="checkbox"]::before,
.design-modern .adminUsersPage .userActiveCheck input[type="checkbox"]::after{
    content:none!important;
    display:none!important;
}
.design-modern .adminProductsPage .multiSelectProduct:checked,
.design-modern .adminProductsPage .productCompactItem .smallCheck input[type="checkbox"]:checked,
.design-modern .adminUsersPage .deptCheck input[type="checkbox"]:checked,
.design-modern .adminUsersPage .userActiveCheck input[type="checkbox"]:checked,
.design-modern .adminUsersPage .roleChoiceCard input[type="radio"]:checked + .roleChoiceMark{
    border-color:var(--modern-check)!important;
    background-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M14 27 L23 36 L39 17' fill='none' stroke='white' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
.design-modern .adminUsersPage .roleChoiceCard:has(input[type="radio"]:checked),
.design-modern .adminUsersPage .deptCheck:has(input[type="checkbox"]:checked),
.design-modern .adminUsersPage .userActiveCheck:has(input[type="checkbox"]:checked),
.design-modern .adminProductsPage .productCompactItem:has(.multiSelectProduct:checked),
.design-modern .adminProductsPage .productCompactItem.selectedForMove,
.design-modern .adminProductsPage .productCompactItem .smallCheck:has(input[type="checkbox"]:checked){
    background:var(--modern-check-card)!important;
    border-color:var(--modern-check)!important;
    box-shadow:0 10px 22px rgba(19,119,125,.08)!important;
}
.design-modern .adminProductsPage .productCompactItem:has(.multiSelectProduct:checked) summary,
.design-modern .adminProductsPage .productCompactItem.selectedForMove summary{
    background:var(--modern-check-card)!important;
}
.design-modern .adminProductsPage .productCompactItem .smallCheck{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:54px!important;
    padding:9px 12px!important;
    margin:0!important;
    border:1px solid var(--modern-border)!important;
    border-radius:16px!important;
    background:#fff!important;
    font-weight:900!important;
    transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
@media (max-width:900px){
    .design-modern .adminUsersPage .userFormGrid{
        grid-template-columns:1fr!important;
    }
    .design-modern .adminUsersPage .roleChoiceGrid,
    .design-modern .adminUsersPage .roleChoiceGridEdit,
    .design-modern .adminUsersPage .deptAccessGrid{
        grid-template-columns:1fr!important;
    }
    .design-modern .adminUsersPage .deptCheck,
    .design-modern .adminUsersPage .userActiveCheck,
    .design-modern .adminUsersPage .roleChoiceCard{
        min-height:52px!important;
        padding:8px 10px!important;
    }
}

/* Modern UI v33: restore role descriptions and compact cleanup options. */
.design-modern .adminUsersPage .roleChoiceText small{
    display:block!important;
    margin-top:3px!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:700!important;
    color:var(--modern-muted)!important;
}
.design-modern .adminUsersPage .roleChoiceCard{
    min-height:64px!important;
    padding:9px 12px!important;
    align-items:center!important;
}
.design-modern .adminUsersPage .roleChoiceText b{
    font-size:15px!important;
    line-height:1.12!important;
}
.design-modern .cleanupWhatOptions.settingsOptionsList{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:8px!important;
}
.design-modern .cleanupWhatOptions .settingsCheck{
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    padding:8px 12px!important;
    gap:10px!important;
    border:1px solid var(--modern-border)!important;
    border-radius:16px!important;
    background:#fff!important;
    font-size:15px!important;
    line-height:1.15!important;
    font-weight:900!important;
    color:var(--modern-text)!important;
}
.design-modern .cleanupWhatOptions .settingsCheck input[type="checkbox"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    box-sizing:border-box!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    flex:0 0 34px!important;
    padding:0!important;
    margin:0!important;
    border:3px solid var(--modern-check-border)!important;
    border-radius:10px!important;
    background-color:#fff!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:24px 24px!important;
    box-shadow:none!important;
    cursor:pointer!important;
}
.design-modern .cleanupWhatOptions .settingsCheck input[type="checkbox"]::before,
.design-modern .cleanupWhatOptions .settingsCheck input[type="checkbox"]::after{
    content:none!important;
    display:none!important;
}
.design-modern .cleanupWhatOptions .settingsCheck input[type="checkbox"]:checked{
    border-color:var(--modern-check)!important;
    background-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M14 27 L23 36 L39 17' fill='none' stroke='white' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
.design-modern .cleanupWhatOptions .settingsCheck:has(input[type="checkbox"]:checked){
    background:var(--modern-check-card)!important;
    border-color:var(--modern-check)!important;
    box-shadow:0 10px 22px rgba(19,119,125,.08)!important;
}
@media (max-width:900px){
    .design-modern .cleanupWhatOptions.settingsOptionsList{
        grid-template-columns:1fr!important;
    }
    .design-modern .adminUsersPage .roleChoiceCard{
        min-height:62px!important;
    }
}

/* v44: products admin list/details polish */
.design-modern .adminProductsPage .sortableList.productsSortable{
    display:grid!important;
    gap:10px!important;
    margin-bottom:22px!important;
}
.design-modern .adminProductsPage .productCompactItem.sortItem,
.design-modern .adminProductsPage details.productCompactItem{
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid var(--modern-border)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(15,23,42,.055)!important;
}
.design-modern .adminProductsPage .productCompactItem summary{
    display:grid!important;
    grid-template-columns:44px 50px minmax(0,1fr) 22px!important;
    gap:10px!important;
    align-items:center!important;
    min-height:68px!important;
    padding:8px 14px!important;
    list-style:none!important;
    cursor:pointer!important;
    background:#fff!important;
    outline:none!important;
}
.design-modern .adminProductsPage .productCompactItem summary::-webkit-details-marker{display:none!important;}
.design-modern .adminProductsPage .productCompactItem summary::after{
    content:'▾'!important;
    grid-column:4!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    color:#697586!important;
    font-size:18px!important;
    line-height:1!important;
}
.design-modern .adminProductsPage .productCompactItem[open] summary::after{transform:rotate(180deg)!important;}
.design-modern .adminProductsPage .productCompactItem summary:focus,
.design-modern .adminProductsPage .productCompactItem summary:focus-visible{
    outline:none!important;
    box-shadow:inset 0 0 0 2px rgba(19,119,125,.18)!important;
}
.design-modern .adminProductsPage .productCompactItem .dragHandle{
    width:38px!important;
    height:38px!important;
    min-height:38px!important;
    border-radius:12px!important;
    background:#eef4f5!important;
    color:#697586!important;
    font-size:21px!important;
    align-self:center!important;
}
.design-modern .adminProductsPage .multiSelectWrap{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    align-self:center!important;
}
.design-modern .adminProductsPage .multiSelectProduct{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    flex:0 0 38px!important;
    border-radius:10px!important;
    border-width:4px!important;
    background-size:28px 28px!important;
}
.design-modern .adminProductsPage .compactProductName{
    min-width:0!important;
    font-size:19px!important;
    font-weight:900!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#111827!important;
}
.design-modern .adminProductsPage .productCompactItem[open]{
    border-color:#cfdbe5!important;
    box-shadow:0 10px 26px rgba(15,23,42,.075)!important;
}
.design-modern .adminProductsPage .productCompactItem[open] summary{
    border-bottom:1px solid var(--modern-border)!important;
}
.design-modern .adminProductsPage .productCompactItem .detailsBody,
.design-modern .adminProductsPage .productCompactItem .adminEditRow.detailsBody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    max-width:100%!important;
    padding:16px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:#f8fbfb!important;
    box-shadow:none!important;
}
.design-modern .adminProductsPage .productCompactItem .detailsBody textarea.productNameInput{
    min-height:86px!important;
    height:auto!important;
    resize:vertical!important;
    font-size:18px!important;
    line-height:1.35!important;
    margin:0!important;
}
.design-modern .adminProductsPage .productCompactItem .detailsBody input,
.design-modern .adminProductsPage .productCompactItem .detailsBody select{
    min-height:54px!important;
    margin:0!important;
    font-size:18px!important;
}
.design-modern .adminProductsPage .productCompactItem .smallCheck{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-height:58px!important;
    padding:9px 12px!important;
    margin:0!important;
    border-radius:16px!important;
    border:1px solid var(--modern-border)!important;
    background:#fff!important;
    font-weight:900!important;
}
.design-modern .adminProductsPage .productCompactItem .smallCheck input[type="checkbox"]{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    flex:0 0 38px!important;
    border-radius:10px!important;
    border-width:4px!important;
    background-size:28px 28px!important;
}
.design-modern .adminProductsPage .productCompactItem .smallPrimary{
    width:100%!important;
    max-width:260px!important;
    min-height:54px!important;
    margin:0!important;
}
.design-modern .adminProductsPage .productCompactItem .detailsDanger{
    display:flex!important;
    gap:18px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    padding:0 16px 16px!important;
    background:#f8fbfb!important;
    border-radius:0 0 18px 18px!important;
}
.design-modern .adminProductsPage .productCompactItem .detailsDanger form,
.design-modern .adminProductsPage .productCompactItem .detailsDanger button{
    margin:0!important;
}
@media(min-width:900px){
    .design-modern .adminProductsPage .productCompactItem .detailsBody,
    .design-modern .adminProductsPage .productCompactItem .adminEditRow.detailsBody{
        grid-template-columns:minmax(260px,1.25fr) 150px 190px 260px minmax(210px,.8fr)!important;
        align-items:start!important;
    }
    .design-modern .adminProductsPage .productCompactItem .smallPrimary{grid-column:1 / span 1!important;}
}
@media(max-width:700px){
    .design-modern .adminProductsPage .productCompactItem summary{
        grid-template-columns:40px 48px minmax(0,1fr) 20px!important;
        min-height:64px!important;
        padding:7px 10px!important;
    }
    .design-modern .adminProductsPage .compactProductName{font-size:18px!important;}
}

/* v45: users spacing + sections page polish */
.design-modern .adminUsersPage .departmentAccessBox{
    margin-top:18px!important;
    clear:both!important;
}
.design-modern .adminUsersPage .roleChoiceGrid,
.design-modern .adminUsersPage .roleChoiceGridEdit{
    margin-bottom:2px!important;
}

.design-modern .adminSectionsPage .sectionCreatePanel{
    display:grid!important;
    gap:16px!important;
    padding:22px!important;
}
.design-modern .adminSectionsPage .sectionCreatePanel h2{margin-bottom:0!important;}
.design-modern .adminSectionsPage .sectionCreateGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 240px!important;
    gap:12px!important;
    align-items:stretch!important;
}
.design-modern .adminSectionsPage .sectionCreateGrid input,
.design-modern .adminSectionsPage .sectionCreateGrid button{
    margin:0!important;
    min-height:58px!important;
}
.design-modern .adminSectionsPage .sectionDepartmentBox{
    display:grid!important;
    gap:10px!important;
    padding:14px!important;
    border:1px solid var(--modern-border)!important;
    border-radius:18px!important;
    background:var(--modern-soft)!important;
}
.design-modern .adminSectionsPage .departmentChoiceGrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
}
.design-modern .adminSectionsPage .departmentChoiceCard{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:54px!important;
    padding:9px 12px!important;
    border:1px solid var(--modern-border)!important;
    border-radius:16px!important;
    background:#fff!important;
    cursor:pointer!important;
    font-weight:900!important;
    color:var(--modern-text)!important;
    box-shadow:none!important;
}
.design-modern .adminSectionsPage .departmentChoiceCard input[type="radio"]{
    position:absolute!important;
    opacity:0!important;
    width:1px!important;
    height:1px!important;
    pointer-events:none!important;
}
.design-modern .adminSectionsPage .departmentChoiceMark{
    box-sizing:border-box!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex:0 0 34px!important;
    border:3px solid var(--modern-check-border)!important;
    border-radius:10px!important;
    background:#fff!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:24px 24px!important;
}
.design-modern .adminSectionsPage .departmentChoiceCard:has(input[type="radio"]:checked){
    background:var(--modern-check-card)!important;
    border-color:var(--modern-check)!important;
    box-shadow:0 10px 22px rgba(19,119,125,.08)!important;
}
.design-modern .adminSectionsPage .departmentChoiceCard input[type="radio"]:checked + .departmentChoiceMark{
    border-color:var(--modern-check)!important;
    background-color:var(--modern-check)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M14 27 L23 36 L39 17' fill='none' stroke='white' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
.design-modern .adminSectionsPage .sectionItem.sortItem{
    grid-template-columns:54px minmax(0,1fr) auto!important;
    align-items:center!important;
    padding:14px!important;
    gap:12px!important;
    border-radius:18px!important;
}
.design-modern .adminSectionsPage .sectionEditForm{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 180px auto!important;
    gap:12px!important;
    align-items:center!important;
    width:100%!important;
}
.design-modern .adminSectionsPage .sectionEditForm input,
.design-modern .adminSectionsPage .sectionEditForm button{
    margin:0!important;
    min-height:56px!important;
}
.design-modern .adminSectionsPage .sectionEditForm .saveState{
    min-width:96px!important;
    color:var(--modern-muted)!important;
    font-size:14px!important;
}
.design-modern .adminSectionsPage .sectionItem > form:not(.sectionEditForm){
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    margin:0!important;
}
.design-modern .adminSectionsPage .sectionItem .dangerText{
    margin:0!important;
    min-height:44px!important;
    white-space:nowrap!important;
}
@media(max-width:900px){
    .design-modern .adminSectionsPage .sectionCreateGrid,
    .design-modern .adminSectionsPage .departmentChoiceGrid,
    .design-modern .adminSectionsPage .sectionEditForm,
    .design-modern .adminSectionsPage .sectionItem.sortItem{
        grid-template-columns:1fr!important;
    }
    .design-modern .adminSectionsPage .sectionItem .dragHandle{width:100%!important;}
}

/* v46: compact add-section form */
.design-modern .adminSectionsPage .sectionCreatePanel{
    gap:12px!important;
    padding:16px!important;
}
.design-modern .adminSectionsPage .sectionCreatePanel h2{
    font-size:28px!important;
    line-height:1.15!important;
    margin:0!important;
}
.design-modern .adminSectionsPage .sectionCreateGrid{
    grid-template-columns:minmax(0,1fr) 190px!important;
    gap:10px!important;
    align-items:center!important;
}
.design-modern .adminSectionsPage .sectionCreateGrid input{
    height:48px!important;
    min-height:48px!important;
    padding:9px 14px!important;
    font-size:18px!important;
    border-radius:14px!important;
}
.design-modern .adminSectionsPage .sectionCreateGrid button{
    height:48px!important;
    min-height:48px!important;
    padding:9px 14px!important;
    font-size:18px!important;
    line-height:1.1!important;
    border-radius:14px!important;
    white-space:nowrap!important;
}
.design-modern .adminSectionsPage .sectionDepartmentBox{
    gap:8px!important;
    padding:12px!important;
    border-radius:16px!important;
}
.design-modern .adminSectionsPage .departmentChoiceGrid{
    gap:8px!important;
}
.design-modern .adminSectionsPage .departmentChoiceCard{
    min-height:46px!important;
    padding:7px 10px!important;
    gap:8px!important;
    border-radius:14px!important;
    font-size:18px!important;
}
.design-modern .adminSectionsPage .departmentChoiceMark{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    flex-basis:30px!important;
    border-radius:9px!important;
    background-size:22px 22px!important;
}
@media(max-width:900px){
    .design-modern .adminSectionsPage .sectionCreateGrid{
        grid-template-columns:1fr!important;
    }
    .design-modern .adminSectionsPage .sectionCreateGrid button{
        width:100%!important;
    }
}

/* v47: role-based access visibility + shorter section add button */
.design-modern .adminUsersPage .departmentAccessBox[hidden],
.design-modern .adminUsersPage .departmentAccessBox.isHiddenByRole{
    display:none!important;
}
.design-modern .adminSectionsPage .sectionCreateGrid{
    grid-template-columns:minmax(0,1fr) 132px!important;
}
.design-modern .adminSectionsPage .sectionCreateGrid button{
    width:132px!important;
    justify-self:start!important;
}
@media(max-width:900px){
    .design-modern .adminSectionsPage .sectionCreateGrid button{
        width:100%!important;
    }
}