/* ==========================================================
   Existing global application styles
   ========================================================== */
/* ==================================================================
   COMBINED CSS FILE
   (Removed all dark-mode references and preserved only light-mode styling)
   ==================================================================*/

/* ------------------------------------------------------------------
   1. CUSTOM CARD & MODE VARIABLES (originally contained dark-mode)
   Cleaned up to remove dark-mode references.
-------------------------------------------------------------------*/
:root { 
    --bg-light: #d5e8d4;
    --card-bg-light: #fff;
    --text-light: #333;
    --shadow-light: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

body {
    background: #ffff;
    color: var(--text-light);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.custom-card {
    display: flex;
    align-items: center;
    background: var(--bg-light);
    border-radius: 10px;
    padding: 15px;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease-in-out, background 0.3s, color 0.3s;
}


.custom-card .icon {
    width: 50px;
    height: 50px;
    background: var(--card-bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    box-shadow: var(--shadow-light);
}

.custom-card .icon img {
    width: 30px;
    height: 30px;
}

/* Make top text bold, subtext normal in cards */
.custom-card .content h6 {
    font-size: 14px;
    font-weight: bold;
    color: #2e2e2e;
    margin-bottom: 2px;
}

.custom-card .content p {
    font-size: 16px;
    font-weight: normal;
    color: #2e2e2e;
    margin: 0;
}

/* Responsive Adjustments for Custom Card */
@media (max-width: 768px) {
    .custom-card {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }
    
    .custom-card .icon {
        margin-bottom: 5px;
    }
}

/* ------------------------------------------------------------------
   2. GENERAL STYLES & COMPONENTS
-------------------------------------------------------------------*/

/* CONTAINER & CHAT */
.container {
    max-width: 600px;
    margin-top: 50px;
}

#metadataContainer .metadata-field {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.metadata-key, .metadata-value {
    flex: 1;
}

.chat-body {
    height: 400px;
    overflow-y: auto;
    background-color: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.user-message {
    background-color: #dcf8c6 !important;
    color: black;
    text-align: right;
}

.bot-message {
    background-color: #ece5dd !important;
    color: black;
}

.loading {
    color: gray;
    text-align: center;
}

/* LAYOUT OVERVIEW */
.layout-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* SIDEBAR */
.sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 250px;
    min-width: 250px;
    background-color: #E8F3E8;
    height: 100vh;
    overflow-y: auto;
    transition: width 0.3s ease, transform 0.3s ease;
    z-index: 999;
}

.sidebar.collapsed {
    width: 80px;
    min-width: 80px;
}

/* Off-canvas for mobile */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
    }
    .sidebar.show {
        transform: translateX(0);
    }
}

/* SIDEBAR HEADER */
.sidebar-header {
    padding: 1rem;
    margin-bottom: 1rem;
}

.sidebar-header h2 {
    color: #064f03;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    transition: opacity 0.3s;
}

.sidebar.collapsed .sidebar-header h2 {
text-align: center;
    opacity: 1!important;
}
/* SIDEBAR NAVIGATION LINKS */
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    color: #064f03;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s;
}

.nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    width: 4px;
    background-color: transparent;
    border-radius: 4px;
    transition: height 0.3s, background-color 0.3s;
}

.nav-link.active::before {
    height: 100%;
    background-color: #064f03;
}

.nav-link.active {
    background-color: #cbe2cb;
    font-weight: 600;
}

.nav-link i {
    margin-right: 0.75rem;
    font-size: 1.2rem;
}

.sidebar .nav-link:hover {
    text-decoration: none;
    background-color: #d8e7d8;
}

/* Hide text label when sidebar is collapsed */
.sidebar.collapsed .nav-link span {
    display: none;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
}
.sidebar.collapsed .nav-link i {
    margin-right: 0;
}
.user-avatar-img {
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.navbar i {
  border-radius: 50%;
  padding: 0.3rem;
  color: #064f03;
  font-size: 1.2rem;
}

a {
    color: #064f03;
}

.top-nav {
    position: sticky;
    top: 0;
    z-index: 998;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.toggle-sidebar-btn {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    color: #064f03;
    margin-right: 1rem;
    cursor: pointer;
}

.brand-title {
    color: #6c757d;
    font-weight: 600;
    margin: 0;
    font-size: 1.1rem;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-icons i {
    font-size: 1.2rem;
    cursor: pointer;
    color: #7c7c7c;
}

.user-avatar {
    width: 35px;
    height: 35px;
    background-color: #f7dbdb;
    border-radius: 50%;
    cursor: pointer;
}

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding: 1rem;
}

.card h5 {
    margin-bottom: 1rem;
    color: #064f03;
}

.nav-link:focus, .nav-link:hover {
    color: #064f03;
}

.navbar-expand-lg {
    color: #6c757d;
    font-weight: 600;
    font-size: 1.1rem;
}

.main-content {
    padding: 15px;
}

.user-dropdown {
    min-width: 250px;
    margin-top: 1.9rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #fff;
}

.user-dropdown.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.dropdown-item {
    transition: background-color 0.2s ease;
}

/* Additional Responsive Media Queries */
@media (max-width: 1200px) {
    .container {
        max-width: 90%;
    }
}

@media (max-width: 992px) {
    .layout-wrapper {
        flex-direction: column;
    }
  
    .main-content {
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .top-nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-icons {
        margin-top: 10px;
    }
    .card,
    .custom-card {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .brand-title {
        font-size: 1rem;
    }
    .toggle-sidebar-btn {
        font-size: 1rem;
    }
    .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    .user-avatar {
        width: 35px;
        height: 35px;
    }
}



   /* Hide all text and links within the translate gadget */
    #google_translate_element .goog-te-gadget {
        font-size: 0 !important;
    }

    /* Restore font size for the language select dropdown */
    #google_translate_element .goog-te-gadget select {
        font-size: 14px !important;
    }

    /* Alternatively, you can also hide the specific "Powered by" span and logo link */
    #google_translate_element .goog-te-gadget span,
    #google_translate_element .goog-te-gadget a {
        display: none !important;
    }

      

/* ==========================================================
   Partner portal components
   ========================================================== */
:root { --brand:#02542d; --brand-dark:#013a1f; --accent:#9cfccb; --ink:#183026; --muted:#66756e; --line:#dbe5df; --surface:#fff; --wash:#f4f8f5; --danger:#a22b2b; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--wash); font-family:Inter,system-ui,sans-serif; }
button,select,input { font:inherit; }
.portal-shell { min-height:100vh; }
.portal-header { display:flex; align-items:center; gap:24px; padding:18px clamp(18px,4vw,64px); color:white; background:linear-gradient(135deg,var(--brand-dark),var(--brand)); }
.portal-brand { font-weight:800; letter-spacing:-.02em; margin-right:auto; }
.portal-nav { display:flex; gap:6px; }
.portal-nav button { color:#d8eee2; border:0; background:transparent; padding:10px 14px; border-radius:9px; cursor:pointer; }
.portal-nav button.active,.portal-nav button:hover { color:white; background:rgba(255,255,255,.14); }
.profile-chip { font-size:.82rem; color:#eaf6ef; }
.portal-main { width:min(1180px,calc(100% - 32px)); margin:32px auto 56px; }
.page-heading { display:flex; gap:16px; align-items:end; justify-content:space-between; margin-bottom:22px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.65rem,3vw,2.25rem); margin-bottom:6px; }
.muted { color:var(--muted); }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.primary-btn,.secondary-btn { border-radius:9px; padding:10px 14px; font-weight:700; cursor:pointer; }
.primary-btn { border:1px solid var(--brand); color:white; background:var(--brand); }
.secondary-btn { border:1px solid var(--line); color:var(--brand); background:white; }
.primary-btn:focus-visible,.secondary-btn:focus-visible,.portal-nav button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.widget-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.widget { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 8px 30px rgba(18,63,39,.05); }
.widget-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:12px; }
.widget h3 { margin:0; font-size:1rem; }
.client-count { color:var(--muted); font-size:.76rem; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:14px; padding-top:16px; }
.metric strong { display:block; font-size:1.35rem; color:var(--brand); }
.metric span { color:var(--muted); font-size:.75rem; text-transform:capitalize; }
.table-wrap { overflow:auto; background:white; border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; min-width:700px; }
th,td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
th { font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
tr[data-client] { cursor:pointer; }
tr[data-client]:hover { background:#f1f8f3; }
.tier { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-size:.78rem; font-weight:700; }
.tier::before { content:'◆'; font-size:.55rem; }
.tier-hot { color:#962b20; background:#fff0ec; }.tier-warm { color:#806100; background:#fff8d8; }.tier-cold { color:#315c78; background:#edf7fd; }
.portal-shell .detail-panel { margin-top:20px; background:white; border:1px solid var(--line); border-radius:14px; padding:20px; }
.detail-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.tier-tabs { display:flex; gap:8px; margin:18px 0 12px; }
.tier-tabs button { border:1px solid var(--line); background:white; border-radius:999px; padding:8px 12px; cursor:pointer; }
.tier-tabs button.active { color:white; background:var(--brand); border-color:var(--brand); }
.lead-list { display:grid; gap:8px; }
.lead-row { display:grid; grid-template-columns:1fr 1fr auto auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; }
.ui-state { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; color:var(--muted); }
.ui-state i { font-size:1.8rem; color:var(--brand); }.ui-state p { margin:0; }
[hidden] { display:none!important; }
@media(max-width:760px){ .portal-header{align-items:flex-start;flex-wrap:wrap}.portal-brand{width:100%}.profile-chip{display:none}.portal-main{margin-top:22px}.page-heading{align-items:start;flex-direction:column}.widget-list{grid-template-columns:1fr}.lead-row{grid-template-columns:1fr auto}.lead-row .lead-phone{grid-column:1/-1}.detail-head{flex-direction:column} }


/* ==========================================================
   Template: add_category.html (page-add-category)
   ========================================================== */

    /* ============================================================================
       CSS VARIABLES - Theme Tokens
       ============================================================================ */
    body.page-add-category{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #02542D;
        --error: #ef4444;

        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* ============================================================================
       PAGE CONTAINER
       ============================================================================ */
    body.page-add-category .adc-container{
        margin: 0 auto;
        padding: .875rem .875rem 2.5rem;
        color: var(--text-700);
    }

    /* ============================================================================
       PAGE HEADER CARD (matches category.html style)
       ============================================================================ */
    body.page-add-category .adc-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 1rem;
    }

    body.page-add-category .adc-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
        border-radius: var(--radius-xl);
    }

    body.page-add-category .adc-header-text{
        flex: 1;
        min-width: 240px;
        position: relative;
        z-index: 1;
    }

    body.page-add-category .adc-page-title{
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0 0 .25rem 0;
        color: var(--primary-green);
        letter-spacing: -.01em;
    }

    body.page-add-category .adc-page-subtitle{
        font-size: .8rem;
        color: var(--text-500);
        margin: 0;
        font-weight: 500;
        display: block;
    }

    body.page-add-category .adc-back-btn{
        height: 2.25rem;
        padding: 0 .9rem;
        border-radius: var(--radius-md);
        background: var(--surface-white);
        border: 1.5px solid var(--primary-green);
        color: var(--primary-green);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: var(--transition-fast);
        font-size: .75rem;
        font-weight: 700;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        box-shadow: none;
    }

    body.page-add-category .adc-back-btn:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
        transform: none;
    }

    /* ============================================================================
       CONTENT GRID
       ============================================================================ */
    body.page-add-category .adc-content-grid{
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 1rem;
        align-items: start;
    }

    /* ============================================================================
       SECTION CARD (shared)
       ============================================================================ */
    body.page-add-category .adc-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    body.page-add-category .adc-card-header{
        padding: .875rem 1.25rem;
        background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
        border-bottom: 1px solid var(--border-200);
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    body.page-add-category .adc-card-header-icon{
        width: 2rem;
        height: 2rem;
        background: var(--primary-green-light);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-green);
        font-size: .85rem;
        flex-shrink: 0;
    }

    body.page-add-category .adc-card-header-title{
        font-size: .9rem;
        font-weight: 700;
        color: var(--text-900);
        margin: 0;
        flex: 1;
    }

    body.page-add-category .adc-card-header-badge{
        background: var(--primary-green);
        color: white;
        font-size: .7rem;
        font-weight: 700;
        padding: .2rem .6rem;
        border-radius: 1rem;
        display: none;
    }

    body.page-add-category .adc-card-header-badge.show{
        display: inline-block;
    }

    body.page-add-category .adc-card-body{
        padding: 1.25rem;
    }

    /* ============================================================================
       FORM ELEMENTS
       ============================================================================ */
    body.page-add-category .adc-form-group{
        margin-bottom: 1.25rem;
    }

    body.page-add-category .adc-form-group:last-child{
        margin-bottom: 0;
    }

    /* Name · Level order · Parent category share one line; Description sits below. The hints
       under each control have different line counts, so align the row on the control itself
       rather than letting the tallest hint push its neighbours' inputs down. */
    body.page-add-category .adc-form-row{
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.6fr);
        gap: 1rem;
        align-items: start;
    }

    body.page-add-category .adc-form-row > .adc-form-group,
    body.page-add-category .adc-form-row > .adc-form-group:last-child{
        margin-bottom: 1.25rem;
    }

    /* Level order is a single small number — don't let it stretch across its track. */
    body.page-add-category .adc-form-row #categoryOrder{
        max-width: 9rem;
    }

    @media (max-width: 1080px) {
        body.page-add-category .adc-form-row{
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }
        body.page-add-category .adc-form-row > .adc-form-group:first-child{
            grid-column: 1 / -1;
        }
    }

    body.page-add-category .adc-label{
        font-size: .8rem;
        font-weight: 700;
        color: var(--text-700);
        margin-bottom: .45rem;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    body.page-add-category .adc-label i{
        color: var(--primary-green);
        font-size: .78rem;
    }

    body.page-add-category .adc-required{
        color: var(--error);
        font-weight: 700;
        margin-left: .1rem;
    }

    body.page-add-category .adc-input,
body.page-add-category .adc-select,
body.page-add-category .adc-textarea{
        width: 100%;
        padding: .7rem 1rem;
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-md);
        font-size: .85rem;
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 500;
        transition: var(--transition-fast);
        box-sizing: border-box;
    }

    body.page-add-category .adc-input:focus,
body.page-add-category .adc-select:focus,
body.page-add-category .adc-textarea:focus{
        outline: none;
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-add-category .adc-input::placeholder,
body.page-add-category .adc-textarea::placeholder{
        color: var(--text-500);
        font-weight: 400;
    }

    body.page-add-category .adc-textarea{
        min-height: 90px;
        resize: vertical;
        line-height: 1.6;
    }

    body.page-add-category .adc-input[type="number"]{
        font-weight: 700;
        font-size: .9rem;
        text-align: center;
    }

    body.page-add-category .adc-input[type="number"]::-webkit-inner-spin-button,
body.page-add-category .adc-input[type="number"]::-webkit-outer-spin-button{
        -webkit-appearance: none;
        margin: 0;
    }

    body.page-add-category .adc-input[type="number"]{
        -moz-appearance: textfield;
    }

    body.page-add-category .adc-input.has-error,
body.page-add-category .adc-textarea.has-error,
body.page-add-category .adc-select.has-error{
        border-color: var(--error);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    body.page-add-category .adc-hint{
        font-size: .74rem;
        color: var(--text-500);
        margin-top: .4rem;
        display: flex;
        align-items: center;
        gap: .35rem;
        font-weight: 500;
    }

    body.page-add-category .adc-hint i{
        font-size: .7rem;
        color: var(--primary-green);
        flex-shrink: 0;
    }

    body.page-add-category .adc-hint strong{
        color: var(--text-700);
        font-weight: 700;
    }

    body.page-add-category .adc-error-text{
        color: var(--error);
        font-size: .74rem;
        margin-top: .4rem;
        display: none;
        align-items: center;
        gap: .35rem;
        font-weight: 600;
    }

    body.page-add-category .adc-error-text.show{
        display: flex;
    }

    /* ============================================================================
       TAG INPUT (Sub-categories)
       ============================================================================ */
    body.page-add-category .adc-tag-wrapper{
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-md);
        padding: .5rem .625rem;
        background: var(--surface-white);
        min-height: 52px;
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        cursor: text;
        transition: var(--transition-fast);
        position: relative;
    }

    body.page-add-category .adc-tag-wrapper:focus-within{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-add-category .adc-tag-wrapper.has-error{
        border-color: var(--error);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    body.page-add-category .adc-tag{
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .35rem .65rem;
        background: var(--primary-green-light);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, 0.18);
        border-radius: var(--radius-sm);
        font-size: .78rem;
        font-weight: 700;
        animation: add-category--tagPop .25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        white-space: nowrap;
    }

    @keyframes add-category--tagPop {
        0%   { transform: scale(0); opacity: 0; }
        60%  { transform: scale(1.08); }
        100% { transform: scale(1); opacity: 1; }
    }

    body.page-add-category .adc-tag-remove{
        cursor: pointer;
        font-size: .7rem;
        color: var(--text-500);
        padding: 0 .15rem;
        border-radius: 3px;
        transition: var(--transition-fast);
        display: flex;
        align-items: center;
    }

    body.page-add-category .adc-tag-remove:hover{
        color: var(--error);
        background: rgba(239, 68, 68, 0.12);
    }

    body.page-add-category .adc-tag-input{
        flex: 1;
        min-width: 130px;
        border: none;
        outline: none;
        font-size: .83rem;
        padding: .35rem .4rem;
        background: transparent;
        color: var(--text-700);
        font-weight: 500;
    }

    body.page-add-category .adc-tag-count-pill{
        display: none;
        background: var(--primary-green);
        color: white;
        font-size: .7rem;
        font-weight: 700;
        padding: .2rem .55rem;
        border-radius: 1rem;
        align-items: center;
        gap: .3rem;
        margin-left: auto;
        align-self: center;
        flex-shrink: 0;
    }

    body.page-add-category .adc-tag-count-pill.show{
        display: inline-flex;
    }

    body.page-add-category .adc-toggle-row{
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: 1rem;
    }

    body.page-add-category .adc-toggle-btn{
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .78rem;
        font-weight: 700;
        padding: .55rem .85rem;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-add-category .adc-toggle-btn.active{
        background: var(--primary-green);
        border-color: var(--primary-green);
        color: white;
    }

    body.page-add-category .adc-parent-map{
        display: none;
        flex-direction: column;
        gap: .75rem;
    }

    body.page-add-category .adc-parent-map.show{
        display: flex;
    }

    body.page-add-category .adc-parent-row{
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-gray-50);
        padding: .75rem;
    }

    body.page-add-category .adc-parent-row-title{
        margin: 0 0 .5rem;
        font-size: .78rem;
        font-weight: 800;
        color: var(--text-900);
    }

    body.page-add-category .adc-parent-row .adc-tag-wrapper{
        background: var(--surface-white);
    }

    body.page-add-category .adc-file-input{
        display: none;
    }

    /* ============================================================================
       BULK JSON SECTION (commented out)
       ============================================================================ */
    /*
    .adc-bulk-textarea {
        min-height: 160px;
        font-family: Consolas, "Courier New", monospace;
        font-size: .78rem;
        line-height: 1.55;
        white-space: pre;
        background: var(--surface-gray-50);
    }

    .adc-bulk-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: .75rem;
    }
    */

    /* ============================================================================
       SIDEBAR INFO CARDS
       ============================================================================ */
    body.page-add-category .adc-info-block{
        border-radius: var(--radius-md);
        padding: .875rem 1rem;
        margin-bottom: .875rem;
    }

    body.page-add-category .adc-info-block:last-child{
        margin-bottom: 0;
    }

    body.page-add-category .adc-info-block.tips{
        background: var(--primary-green-ghost);
        border: 1px solid var(--primary-green-light);
    }

    body.page-add-category .adc-info-block.format{
        background: var(--surface-gray-50);
        border: 1px solid var(--border-200);
    }

    body.page-add-category .adc-info-block-title{
        font-size: .8rem;
        font-weight: 700;
        color: var(--text-900);
        margin: 0 0 .5rem 0;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    body.page-add-category .adc-info-block-title i{
        color: var(--primary-green);
        font-size: .8rem;
    }

    body.page-add-category .adc-info-list{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.page-add-category .adc-info-list li{
        font-size: .775rem;
        color: var(--text-500);
        font-weight: 500;
        padding: .25rem 0;
        display: flex;
        align-items: flex-start;
        gap: .45rem;
        line-height: 1.45;
    }

    body.page-add-category .adc-info-list li i{
        color: var(--primary-green);
        font-size: .72rem;
        margin-top: .18rem;
        flex-shrink: 0;
    }

    body.page-add-category .adc-code-sample{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-sm);
        padding: .5rem .75rem;
        margin-top: .5rem;
        font-family: Consolas, "Courier New", monospace;
        font-size: .72rem;
        color: var(--text-700);
        line-height: 1.5;
        overflow-x: auto;
        white-space: pre;
    }

    /* ============================================================================
       ACTIONS FOOTER
       ============================================================================ */
    body.page-add-category .adc-actions{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem;
        margin-top: 1rem;
        box-shadow: var(--shadow-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    body.page-add-category .adc-actions-left{
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-add-category .adc-mode-badge{
        padding: .3rem .75rem;
        border-radius: var(--radius-sm);
        font-size: .75rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: .35rem;
    }

    body.page-add-category .adc-mode-badge.add{
        background: var(--primary-green-light);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, 0.15);
    }

    body.page-add-category .adc-mode-badge.edit{
        background: #fef3c7;
        color: #b45309;
        border: 1px solid #fde68a;
    }

    body.page-add-category .adc-actions-right{
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    /* ============================================================================
       BUTTONS
       ============================================================================ */
    body.page-add-category .adc-btn{
        padding: .65rem 1.35rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: .83rem;
        cursor: pointer;
        transition: var(--transition-fast);
        border: none;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        text-decoration: none;
        white-space: nowrap;
    }

    body.page-add-category .adc-btn-primary{
        background: var(--gradient-primary);
        color: white;
        box-shadow: var(--shadow-sm);
    }

    body.page-add-category .adc-btn-primary:hover:not(:disabled){
        background: var(--primary-green-dark);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        color: white;
    }

    body.page-add-category .adc-btn-secondary{
        background: transparent;
        color: var(--text-700);
        border: 1.5px solid var(--border-200);
    }

    body.page-add-category .adc-btn-secondary:hover{
        background: var(--surface-gray-50);
        color: var(--text-900);
        border-color: var(--primary-green);
        color: var(--primary-green);
    }

    body.page-add-category .adc-btn-outline{
        background: transparent;
        color: var(--primary-green);
        border: 1.5px solid var(--primary-green);
    }

    body.page-add-category .adc-btn-outline:hover:not(:disabled){
        background: var(--primary-green);
        color: white;
    }

    body.page-add-category .adc-btn:disabled{
        opacity: .55;
        cursor: not-allowed;
    }

    body.page-add-category .adc-btn.loading .btn-spinner{
        display: inline-block !important;
    }

    body.page-add-category .adc-btn.loading .btn-text{
        display: none;
    }

    body.page-add-category .btn-spinner{
        display: none !important;
        width: 15px;
        height: 15px;
        border: 2px solid rgba(255, 255, 255, .35);
        border-top-color: white;
        border-radius: 50%;
        animation: add-category--spin .7s linear infinite;
        flex-shrink: 0;
    }

    body.page-add-category .adc-btn-outline .btn-spinner{
        border-color: rgba(2, 84, 45, .25);
        border-top-color: var(--primary-green);
    }

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

    /* ============================================================================
       TOAST
       ============================================================================ */
    body.page-add-category .adc-toast{
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 10000;
        padding: .875rem 1.25rem;
        border-radius: var(--radius-lg);
        font-size: .83rem;
        font-weight: 600;
        color: white;
        display: flex;
        align-items: center;
        gap: .65rem;
        opacity: 0;
        transform: translateX(420px);
        transition: all .38s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        pointer-events: none;
        box-shadow: var(--shadow-lg);
        min-width: 280px;
        max-width: 380px;
    }

    body.page-add-category .adc-toast.show{
        opacity: 1;
        transform: translateX(0);
        pointer-events: all;
    }

    body.page-add-category .adc-toast.success{
        background: var(--gradient-primary);
    }

    body.page-add-category .adc-toast.error{
        background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
    }

    body.page-add-category .adc-toast i{
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* ============================================================================
       RESPONSIVE
       ============================================================================ */
    @media (max-width: 960px) {
        body.page-add-category .adc-content-grid{
            grid-template-columns: 1fr;
        }
        body.page-add-category .adc-sidebar{
            order: -1;
        }
        body.page-add-category .adc-sidebar .adc-card:not(:first-child){
            display: none;
        }
    }

    @media (max-width: 640px) {
        body.page-add-category .adc-container{
            padding: .625rem .625rem 2rem;
        }
        body.page-add-category .adc-form-row{
            grid-template-columns: 1fr;
            gap: 0;
        }
        body.page-add-category .adc-actions{
            flex-direction: column;
            align-items: stretch;
        }
        body.page-add-category .adc-actions-right{
            flex-direction: column;
        }
        body.page-add-category .adc-btn{
            width: 100%;
            justify-content: center;
        }
        body.page-add-category .adc-toast{
            right: .75rem;
            left: .75rem;
            min-width: auto;
            max-width: none;
        }
        body.page-add-category .adc-page-title{
            font-size: 1.2rem;
        }
    }


/* ==========================================================
   Template: add_packages.html (page-add-packages)
   ========================================================== */

    /* ===== Base Variables ===== */
    body.page-add-packages{
        --animate-duration: 0.3s;
        --slide-panel-width: 400px;
    }

    /* ===== Compact Header ===== */
    body.page-add-packages .dashboard-header{
        text-align: center;
        margin-bottom: 1.625rem;
    }

    body.page-add-packages .header-title{
        font-size: 1.625rem;
        font-weight: var(--font-weight-extrabold);
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.4rem;
    }

    body.page-add-packages .header-subtitle{
        font-size: 0.8125rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
    }

    /* ===== Billing Toggle - Compact ===== */
    body.page-add-packages .billing-toggle-wrapper{
        text-align: center;
        margin-bottom: 2rem;
    }

    body.page-add-packages .billing-toggle{
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--surface-primary);
        border: 2px solid var(--ink-200);
        border-radius: 0.625rem;
        padding: 0.2rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    body.page-add-packages .billing-option{
        padding: 0.4rem 1rem;
        border-radius: 0.625rem;
        font-size: 0.75rem;
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all 0.3s;
        color: var(--ink-600);
        position: relative;
    }

    body.page-add-packages .billing-option.active{
        background: var(--brand-primary);
        color: white;
        box-shadow: 0 2px 6px rgba(2, 84, 45, 0.35);
    }

    body.page-add-packages .billing-option .save-badge{
        display: inline-block;
        background: rgba(34, 197, 94, 0.2);
        color: #059669;
        padding: 0.1rem 0.4rem;
        border-radius: 0.4rem;
        font-size: 0.6rem;
        margin-left: 0.3rem;
        font-weight: var(--font-weight-bold);
    }

    body.page-add-packages .billing-option.active .save-badge{
        background: rgba(255, 255, 255, 0.3);
        color: white;
    }

    /* ===== DYNAMIC Packages Grid ===== */
    body.page-add-packages .packages-grid{
        display: grid;
        gap: 1.5rem;
        margin-bottom: 1.625rem;
        justify-content: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        align-items: start;
        justify-items: center;
    }

    /* Dynamic grid columns based on data-count attribute */
    body.page-add-packages .packages-grid[data-count="1"]{
        grid-template-columns: 1fr;
    }

    body.page-add-packages .packages-grid[data-count="2"]{
        grid-template-columns: repeat(2, 1fr);
        max-width: 1100px;
        justify-items: center;
        gap: 2rem;
    }

    body.page-add-packages .packages-grid[data-count="3"]{
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        justify-items: center;
        gap: 2rem;
    }

    body.page-add-packages .packages-grid[data-count="4"],
body.page-add-packages .packages-grid[data-count="5"],
body.page-add-packages .packages-grid[data-count="6"],
body.page-add-packages .packages-grid[data-count="7"],
body.page-add-packages .packages-grid[data-count="8"]{
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        max-width: 1200px;
    }

    /* ===== Package Card - Equal Size with Scale Transform ===== */
    body.page-add-packages .package-card{
        background: var(--surface-primary);
        border: 2px solid var(--ink-200);
        border-radius: 0.875rem;
        padding: 1.25rem 1rem;
        position: relative;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 280px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        width: 80%;
        max-width: 760px;
        margin: 0 auto;
    }

    body.page-add-packages .package-card:hover{
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        border-color: var(--brand-primary);
        z-index: 10;
    }

    body.page-add-packages .package-card.selected{
        border-color: var(--brand-primary);
        border-width: 3px;
        box-shadow: 0 6px 22px rgba(2,84,45,0.08);
        transform: translateY(-6px);
    }

    body.page-add-packages .package-card.free-trial{
        border-color: #f59e0b;
    }

    body.page-add-packages .package-card.free-trial:hover{
        border-color: #d97706;
    }

    body.page-add-packages .package-card.free-trial .popular-badge{
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    body.page-add-packages .package-card.most-popular{
        border-color: var(--brand-primary);
        border-width: 2px;
    }

    /* ===== Popular Badge - Compact ===== */
    body.page-add-packages .popular-badge{
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--brand-primary);
        color: white;
        padding: 0.25rem 0.875rem;
        border-radius: 0.875rem;
        font-size: 0.625rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        box-shadow: 0 2px 6px rgba(2, 84, 45, 0.3);
        white-space: nowrap;
    }

    /* ===== Card Header - Compact ===== */
    body.page-add-packages .package-header{
        text-align: center;
        margin-bottom: 1rem;
        padding-bottom: 0.875rem;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-add-packages .package-name{
        font-size: 1.125rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin-bottom: 0.4rem;
    }

    body.page-add-packages .package-description{
        font-size: 0.75rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    /* ===== Pricing - Compact ===== */
    body.page-add-packages .package-pricing{
        text-align: center;
        margin-bottom: 1.25rem;
    }

    body.page-add-packages .package-currency{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-700);
        vertical-align: top;
    }

    body.page-add-packages .package-price{
        font-size: 1.9rem;
        font-weight: var(--font-weight-extrabold);
        color: var(--ink-900);
        line-height: 1;
    }

    body.page-add-packages .package-card.free-trial .package-price{
        font-size: 1.875rem;
    }

    body.page-add-packages .package-period{
        font-size: 0.75rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin-top: 0.25rem;
    }

    /* ===== Features List - Compact ===== */
    body.page-add-packages .package-features{
        flex: 1;
        margin-bottom: 1.25rem;
    }

    body.page-add-packages .feature-item{
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.625rem;
        font-size: 0.75rem;
        color: var(--ink-700);
        line-height: 1.5;
    }

    body.page-add-packages .feature-item i{
        color: var(--brand-primary);
        font-size: 0.875rem;
        margin-top: 0.125rem;
        flex-shrink: 0;
    }

    body.page-add-packages .package-card.free-trial .feature-item i{
        color: #f59e0b;
    }

    /* ===== Action Button - Compact ===== */
    body.page-add-packages .btn-get-started{
        width: 100%;
        padding: 0.6rem 1rem;
        border-radius: 0.625rem;
        font-weight: var(--font-weight-bold);
        font-size: 0.8125rem;
        border: none;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        background: linear-gradient(135deg, rgba(2,84,45,0.06), rgba(2,84,45,0.02));
        color: var(--brand-primary);
        border: 2px solid rgba(2,84,45,0.12);
    }

    body.page-add-packages .package-card.most-popular .btn-get-started,
body.page-add-packages .package-card.selected .btn-get-started{
        background: var(--brand-primary);
        color: white;
    }

    body.page-add-packages .package-card.free-trial .btn-get-started{
        background: #f59e0b;
        color: white;
        border-color: #f59e0b;
    }

    body.page-add-packages .btn-get-started:hover{
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(2, 84, 45, 0.12);
    }

    body.page-add-packages .package-card.free-trial .btn-get-started:hover{
        background: #d97706;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }

    body.page-add-packages .package-card.unavailable{
        opacity: 0.72;
        cursor: not-allowed;
        border-style: dashed;
    }

    body.page-add-packages .package-card.unavailable:hover{
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    body.page-add-packages .btn-get-started:disabled{
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* ===== Slide-Out Subscription Panel ===== */
    body.page-add-packages .subscription-overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px);
    }

    body.page-add-packages .subscription-overlay.active{
        opacity: 1;
        visibility: visible;
    }

    body.page-add-packages .subscription-panel{
        position: fixed;
        top: 0;
        right: 0;
        width: var(--slide-panel-width);
        height: 100%;
        background: var(--surface-primary);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.page-add-packages .subscription-panel.active{
        transform: translateX(0);
    }

    /* ===== Panel Header ===== */
    body.page-add-packages .panel-header{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: white;
        padding: 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }

    body.page-add-packages .panel-title{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-add-packages .panel-close{
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        width: 1.625rem;
        height: 1.625rem;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-size: 1rem;
    }

    body.page-add-packages .panel-close:hover{
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

    /* ===== Panel Content ===== */
    body.page-add-packages .panel-content{
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem;
    }

    /* ===== Selected Package Display ===== */
    body.page-add-packages .selected-package-display{
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.08), rgba(2, 84, 45, 0.04));
        border: 2px solid rgba(2, 84, 45, 0.2);
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1.25rem;
    }

    body.page-add-packages .selected-package-name{
        font-size: 0.9375rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-add-packages .selected-package-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    body.page-add-packages .detail-box{
        background: white;
        border: 1px solid var(--ink-200);
        border-radius: 0.4rem;
        padding: 0.625rem;
        text-align: center;
    }

    body.page-add-packages .detail-label{
        font-size: 0.6rem;
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.2rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-add-packages .detail-value{
        font-size: 0.875rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
    }

    body.page-add-packages .selected-price-stack{
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        align-items: center;
    }

    body.page-add-packages .selected-price-original{
        color: var(--ink-500);
        font-size: 0.75rem;
        text-decoration: line-through;
        font-weight: var(--font-weight-medium);
    }

    body.page-add-packages .selected-price-final{
        color: var(--brand-primary);
        font-size: 0.9375rem;
        font-weight: var(--font-weight-bold);
    }

    body.page-add-packages .selected-price-note{
        color: #059669;
        font-size: 0.6875rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-add-packages .detail-box.full-width{
        grid-column: 1 / -1;
    }

    /* ===== Form Styling ===== */
    body.page-add-packages .form-group{
        margin-bottom: 1rem;
    }

    body.page-add-packages .form-label{
        display: block;
        font-weight: var(--font-weight-semibold);
        color: var(--brand-primary);
        margin-bottom: 0.4rem;
        font-size: 0.75rem;
        letter-spacing: 0.025em;
    }

    body.page-add-packages .form-control{
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 2px solid var(--ink-200);
        border-radius: 0.5rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-size: 0.75rem;
        transition: all 0.2s;
        outline: none;
        box-sizing: border-box;
    }

    body.page-add-packages .form-control:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-add-packages .form-control:disabled{
        background: var(--ink-100);
        color: var(--ink-500);
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* ===== Promo Code Section ===== */
    body.page-add-packages .promo-section{
        background: rgba(59, 130, 246, 0.05);
        border: 1px dashed rgba(59, 130, 246, 0.3);
        border-radius: 0.625rem;
        padding: 0.875rem;
        margin-bottom: 1rem;
    }

    body.page-add-packages .promo-code-wrapper{
        display: flex;
        gap: 0.4rem;
    }

    body.page-add-packages .btn-validate{
        padding: 0.625rem 0.875rem;
        background: var(--brand-primary);
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    body.page-add-packages .btn-validate:hover:not(:disabled){
        background: #023d22;
        transform: translateY(-1px);
    }

    body.page-add-packages .btn-validate:disabled{
        opacity: 0.6;
        cursor: not-allowed;
    }

    body.page-add-packages .btn-clear-promo{
        padding: 0.5rem 0.875rem;
        background: var(--ink-200);
        color: var(--ink-700);
        border: none;
        border-radius: 0.5rem;
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.6875rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    body.page-add-packages .btn-clear-promo:hover{
        background: var(--ink-300);
    }

    /* ===== Price Display ===== */
    body.page-add-packages .price-summary{
        background: white;
        border: 2px solid var(--ink-200);
        border-radius: 0.625rem;
        padding: 0.875rem;
        margin-bottom: 1rem;
        display: none;
    }

    body.page-add-packages .price-summary.active{
        display: block;
        animation: add-packages--slideDown 0.3s ease;
    }

    @keyframes add-packages--slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-add-packages .price-summary-title{
        font-size: 0.625rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.625rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-add-packages .price-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
    }

    body.page-add-packages .price-label{
        color: var(--ink-600);
        font-weight: var(--font-weight-medium);
    }

    body.page-add-packages .price-value{
        color: var(--brand-primary);
        font-weight: var(--font-weight-bold);
    }

    body.page-add-packages .price-row.final{
        padding-top: 0.625rem;
        border-top: 2px solid var(--ink-200);
        margin-top: 0.4rem;
        margin-bottom: 0;
    }

    body.page-add-packages .price-row.final .price-label{
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        font-size: 0.9375rem;
    }

    body.page-add-packages .price-row.final .price-value{
        font-size: 1.25rem;
    }

    body.page-add-packages .discount-badge{
        display: inline-flex;
        align-items: center;
        padding: 0.1875rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.7rem;
        font-weight: var(--font-weight-bold);
        background: rgba(34, 197, 94, 0.15);
        color: #059669;
        border: 1px solid rgba(34, 197, 94, 0.3);
        margin-left: 0.375rem;
    }

    /* ===== Toggle Switch ===== */
    body.page-add-packages .toggle-container{
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 1rem;
        background: rgba(2, 84, 45, 0.05);
        border: 1px solid rgba(2, 84, 45, 0.15);
        border-radius: 0.75rem;
        margin-bottom: 1.25rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    body.page-add-packages .toggle-container:hover{
        background: rgba(2, 84, 45, 0.08);
        border-color: rgba(2, 84, 45, 0.28);
    }

    body.page-add-packages .toggle-switch{
        position: relative;
        display: inline-block;
        width: 3rem;
        height: 1.5rem;
        flex-shrink: 0;
    }

    body.page-add-packages .toggle-switch input{
        opacity: 0;
        width: 0;
        height: 0;
    }

    body.page-add-packages .toggle-copy{
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
        flex: 1;
    }

    body.page-add-packages .toggle-slider{
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--ink-300);
        transition: 0.3s;
        border-radius: 1.5rem;
        border: 2px solid var(--ink-200);
    }

    body.page-add-packages .toggle-slider:before{
        position: absolute;
        content: "";
        height: 1rem;
        width: 1rem;
        left: 0.1875rem;
        bottom: 0.1875rem;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

    body.page-add-packages .toggle-switch input:checked+.toggle-slider{
        background-color: var(--brand-primary);
        border-color: var(--brand-primary);
    }

    body.page-add-packages .toggle-switch input:checked+.toggle-slider:before{
        transform: translateX(1.5rem);
    }

    body.page-add-packages .toggle-label{
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: var(--font-weight-semibold);
        color: var(--brand-primary);
        font-size: 0.875rem;
        line-height: 1.25;
    }

    body.page-add-packages .toggle-label i{
        font-size: 0.95rem;
        line-height: 1;
    }

    body.page-add-packages .toggle-description{
        font-size: 0.75rem;
        color: var(--ink-500);
        font-weight: normal;
        margin-top: 0.25rem;
    }

    /* ===== Subscription Panel: Dark Mode ===== */
    html[data-theme="dark"] body.page-add-packages .subscription-panel{
        color-scheme: dark;
        background: #081710;
        color: #e5eee9;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
    }

    html[data-theme="dark"] body.page-add-packages .panel-header{
        background: linear-gradient(135deg, #064e2b, #03351e);
        border-bottom: 1px solid rgba(134, 239, 172, 0.12);
    }

    html[data-theme="dark"] body.page-add-packages .selected-package-display{
        background: rgba(16, 185, 129, 0.035);
        border-color: rgba(16, 185, 129, 0.16);
    }

    html[data-theme="dark"] body.page-add-packages .selected-package-name,
html[data-theme="dark"] body.page-add-packages .detail-value,
html[data-theme="dark"] body.page-add-packages .selected-price-final,
html[data-theme="dark"] body.page-add-packages .form-label,
html[data-theme="dark"] body.page-add-packages .toggle-label,
html[data-theme="dark"] body.page-add-packages .price-value,
html[data-theme="dark"] body.page-add-packages .price-row.final .price-label{
        color: #f1f7f4;
    }

    html[data-theme="dark"] body.page-add-packages .detail-box,
html[data-theme="dark"] body.page-add-packages .price-summary{
        background: #0d1b15;
        border-color: #293b33;
    }

    html[data-theme="dark"] body.page-add-packages .detail-label,
html[data-theme="dark"] body.page-add-packages .selected-price-original,
html[data-theme="dark"] body.page-add-packages .price-summary-title,
html[data-theme="dark"] body.page-add-packages .price-label,
html[data-theme="dark"] body.page-add-packages .toggle-description{
        color: #9cafa5;
    }

    html[data-theme="dark"] body.page-add-packages .form-control{
        background: #0b1712;
        border-color: #2a3b33;
        color: #eef6f1;
        caret-color: #86efac;
    }

    html[data-theme="dark"] body.page-add-packages .form-control::placeholder{
        color: #82958b;
        opacity: 1;
    }

    html[data-theme="dark"] body.page-add-packages .form-control:focus{
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
    }

    html[data-theme="dark"] body.page-add-packages .form-control:disabled{
        background: #111f19;
        color: #9cafa5;
        opacity: 1;
    }

    html[data-theme="dark"] body.page-add-packages .promo-section{
        background: rgba(59, 130, 246, 0.045);
        border-color: rgba(96, 165, 250, 0.32);
    }

    html[data-theme="dark"] body.page-add-packages .toggle-container{
        background: rgba(16, 185, 129, 0.025);
        border-color: rgba(16, 185, 129, 0.10);
    }

    html[data-theme="dark"] body.page-add-packages .toggle-container:hover{
        background: rgba(16, 185, 129, 0.06);
        border-color: rgba(16, 185, 129, 0.2);
    }

    html[data-theme="dark"] body.page-add-packages .toggle-slider{
        background: #34443d;
        border-color: #53655d;
    }

    html[data-theme="dark"] body.page-add-packages .price-summary-title,
html[data-theme="dark"] body.page-add-packages .price-row.final{
        border-color: #293b33;
    }

    /* ===== Submit Button ===== */
    body.page-add-packages .btn-subscribe{
        width: 100%;
        padding: 1rem 1.5rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: white;
        border: none;
        border-radius: 0.75rem;
        font-weight: var(--font-weight-bold);
        font-size: 0.9375rem;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 12px rgba(2, 84, 45, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    body.page-add-packages .btn-subscribe:hover:not(:disabled){
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(2, 84, 45, 0.35);
    }

    body.page-add-packages .btn-subscribe:disabled{
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    /* ===== Alert Messages ===== */
    body.page-add-packages .alert{
        padding: 1rem;
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        font-weight: var(--font-weight-medium);
        border: 1px solid;
        font-size: 0.875rem;
        animation: add-packages--slideIn 0.3s ease;
    }

    @keyframes add-packages--slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-add-packages .alert-success{
        background: rgba(34, 197, 94, 0.1);
        color: #059669;
        border-color: #34d399;
    }

    body.page-add-packages .alert-danger{
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
        border-color: #f87171;
    }

    body.page-add-packages .alert-warning{
        background: rgba(245, 158, 11, 0.12);
        color: #b45309;
        border-color: rgba(245, 158, 11, 0.32);
    }

    body.page-add-packages .alert-info{
        background: rgba(59, 130, 246, 0.1);
        color: #1d4ed8;
        border-color: rgba(59, 130, 246, 0.24);
    }

    body.page-add-packages #checkout-page-message[hidden]{
        display: none !important;
    }

    body.page-add-packages #checkout-page-message{
        max-width: 960px;
        margin: 0 auto 1.25rem;
    }

    /* ===== Toast ===== */
    body.page-add-packages .toast{
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        color: var(--ink-700);
        padding: 0.875rem 1.25rem;
        border-radius: 0.75rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        z-index: 1001;
        transform: translateX(calc(100% + 2rem));
        transition: transform 0.3s ease;
        font-weight: var(--font-weight-semibold);
        font-size: 0.875rem;
        min-width: 280px;
        max-width: 360px;
    }

    body.page-add-packages .toast.show{
        transform: translateX(0);
    }

    body.page-add-packages .toast.success{
        border-left: 4px solid #22c55e;
    }

    body.page-add-packages .toast.error{
        border-left: 4px solid #ef4444;
    }

    body.page-add-packages .toast.warning{
        border-left: 4px solid #f59e0b;
    }

    body.page-add-packages .toast.info{
        border-left: 4px solid #3b82f6;
    }

    /* ===== Loading Skeleton ===== */
    body.page-add-packages .skeleton{
        background: linear-gradient(90deg, var(--ink-200) 25%, var(--ink-100) 50%, var(--ink-200) 75%);
        background-size: 200% 100%;
        animation: add-packages--shimmer 1.5s infinite;
        border-radius: 0.875rem;
        height: 280px;
        width: 80%;
        margin: 0 auto;
    }

    @keyframes add-packages--shimmer {
        0% {
            background-position: -200px 0;
        }

        100% {
            background-position: 200px 0;
        }
    }

    /* ===== Responsive Design ===== */
    @media (max-width: 1400px) {
        body.page-add-packages .packages-grid{
            width: 85%;
        }

        body.page-add-packages .packages-grid[data-count="4"],
body.page-add-packages .packages-grid[data-count="5"],
body.page-add-packages .packages-grid[data-count="6"],
body.page-add-packages .packages-grid[data-count="7"],
body.page-add-packages .packages-grid[data-count="8"]{
            grid-template-columns: repeat(2, 1fr);
        }

        body.page-add-packages .packages-grid[data-count="3"]{
            grid-template-columns: repeat(2, 1fr);
        }

        body.page-add-packages .package-card{
            min-height: 300px;
            width: 90%;
            max-width: 720px;
        }
    }

    @media (max-width: 1024px) {
        body.page-add-packages{
            --slide-panel-width: 420px;
        }

        body.page-add-packages .packages-grid{
            width: 90%;
        }

        body.page-add-packages .packages-grid[data-count="3"],
body.page-add-packages .packages-grid[data-count="4"],
body.page-add-packages .packages-grid[data-count="5"],
body.page-add-packages .packages-grid[data-count="6"],
body.page-add-packages .packages-grid[data-count="7"],
body.page-add-packages .packages-grid[data-count="8"]{
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        body.page-add-packages{
            --slide-panel-width: 100%;
        }

        body.page-add-packages .dashboard-container{
            padding: 1rem 0.75rem;
        }

        body.page-add-packages .header-title{
            font-size: 1.75rem;
        }

        body.page-add-packages .packages-grid{
            width: 95%;
        }

        body.page-add-packages .packages-grid[data-count="1"],
body.page-add-packages .packages-grid[data-count="2"],
body.page-add-packages .packages-grid[data-count="3"],
body.page-add-packages .packages-grid[data-count="4"],
body.page-add-packages .packages-grid[data-count="5"],
body.page-add-packages .packages-grid[data-count="6"],
body.page-add-packages .packages-grid[data-count="7"],
body.page-add-packages .packages-grid[data-count="8"]{
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        body.page-add-packages .package-card{
            min-height: auto;
        }

        body.page-add-packages .package-card:hover{
            transform: scale(1.02);
        }

        body.page-add-packages .subscription-panel{
            width: 100%;
        }

        body.page-add-packages .panel-content{
            padding: 1.25rem;
        }

        body.page-add-packages .selected-package-grid{
            grid-template-columns: 1fr;
        }

        body.page-add-packages .detail-box.full-width{
            grid-column: 1;
        }
    }

    @media (max-width: 480px) {
        body.page-add-packages .dashboard-container{
            padding: 0.75rem 0.5rem;
        }

        body.page-add-packages .header-title{
            font-size: 1.5rem;
        }

        body.page-add-packages .packages-grid{
            width: 100%;
        }

        body.page-add-packages .package-card{
            padding: 1.25rem 1rem;
        }

        body.page-add-packages .package-price{
            font-size: 2.25rem;
        }

        body.page-add-packages .panel-header{
            padding: 1.25rem;
        }

        body.page-add-packages .panel-content{
            padding: 1rem;
        }
    }

    /* ===== Payment Redirect Overlay ===== */
    body.page-add-packages .payment-redirect-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
        animation: add-packages--fadeIn 0.25s ease;
    }

    @keyframes add-packages--fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    body.page-add-packages .payment-redirect-card{
        background: var(--surface-primary);
        border-radius: 1.25rem;
        padding: 2rem 2.25rem;
        max-width: 420px;
        width: calc(100% - 2rem);
        text-align: center;
        box-shadow: 0 20px 60px rgba(0,0,0,0.35);
        animation: add-packages--scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }

    @keyframes add-packages--scaleIn {
        from { transform: scale(0.85); opacity: 0; }
        to   { transform: scale(1);    opacity: 1; }
    }

    body.page-add-packages .payment-redirect-icon{
        width: 3.5rem;
        height: 3.5rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
        color: white;
        font-size: 1.5rem;
    }

    body.page-add-packages .payment-redirect-title{
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--ink-800);
        margin-bottom: 0.5rem;
    }

    body.page-add-packages .payment-redirect-sub{
        font-size: 0.8125rem;
        color: var(--ink-500);
        margin-bottom: 1.25rem;
        line-height: 1.5;
    }

    body.page-add-packages .payment-redirect-details{
        background: rgba(2,84,45,0.06);
        border: 1px solid rgba(2,84,45,0.15);
        border-radius: 0.75rem;
        padding: 0.875rem 1rem;
        margin-bottom: 1.25rem;
        text-align: left;
    }

    body.page-add-packages .payment-redirect-details .dr{
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        padding: 0.25rem 0;
        color: var(--ink-700);
    }

    body.page-add-packages .payment-redirect-details .dr strong{
        color: var(--brand-primary);
    }

    body.page-add-packages .payment-redirect-note{
        font-size: 0.6875rem;
        color: #1d4ed8;
        background: rgba(59,130,246,0.08);
        border: 1px solid rgba(59,130,246,0.2);
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        margin-bottom: 1.25rem;
        line-height: 1.5;
        text-align: left;
    }

    body.page-add-packages .payment-redirect-spinner{
        width: 1.75rem;
        height: 1.75rem;
        border: 3px solid rgba(2,84,45,0.2);
        border-top-color: var(--brand-primary);
        border-radius: 50%;
        animation: add-packages--spin 0.8s linear infinite;
        margin: 0 auto 0.75rem;
    }

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

    body.page-add-packages .payment-redirect-btn{
        width: 100%;
        padding: 0.875rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: white;
        border: none;
        border-radius: 0.75rem;
        font-weight: 700;
        font-size: 0.9375rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: opacity 0.2s;
    }

    body.page-add-packages .payment-redirect-btn:hover{ opacity: 0.9; }

    body.page-add-packages .payment-redirect-cancel{
        margin-top: 0.75rem;
        font-size: 0.75rem;
        color: var(--ink-400);
        cursor: pointer;
        text-decoration: underline;
        background: none;
        border: none;
        font-family: inherit;
    }

    body.page-add-packages .payment-redirect-cancel:hover{ color: var(--ink-600); }


/* ==========================================================
   Template: add_service_category.html (page-add-service-category)
   ========================================================== */

    /* ============================================================================
       CSS VARIABLES - Theme Tokens
       ============================================================================ */
    body.page-add-service-category{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #22c55e;
        --error: #ef4444;

        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* ============================================================================
       PAGE CONTAINER
       ============================================================================ */
    body.page-add-service-category .adc-container{
        margin: 0 auto;
        padding: .75rem;
        color: var(--text-700);
    }

    /* ============================================================================
       PAGE HEADER CARD
       ============================================================================ */
    body.page-add-service-category .adc-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1rem;
    }

    body.page-add-service-category .adc-header-card::before{
        content:"";
        position:absolute;
        inset:0;
        background:transparent;
        pointer-events:none;
        border-radius:var(--radius-xl);
    }

    body.page-add-service-category .adc-header-text{
        flex: 1;
        min-width: 240px;
        position: relative;
        z-index: 1;
    }

    body.page-add-service-category .adc-page-title{
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0 0 .25rem 0;
        color: var(--primary-green);
        letter-spacing: -.01em;
    }

    body.page-add-service-category .adc-page-subtitle{
        font-size: .8rem;
        color: var(--text-500);
        margin: 0;
        font-weight: 500;
        display: block;
    }

    body.page-add-service-category .adc-back-btn{
        height: 2.25rem;
        padding: 0 .9rem;
        border-radius: var(--radius-md);
        background: var(--surface-white);
        border: 1.5px solid var(--primary-green);
        color: var(--primary-green);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: var(--transition-fast);
        font-size: .75rem;
        font-weight: 700;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        box-shadow: none;
    }

    body.page-add-service-category .adc-back-btn:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
        text-decoration: none;
        transform: none;
    }

    /* ============================================================================
       CONTENT GRID
       ============================================================================ */
    body.page-add-service-category .adc-content-grid{
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: .75rem;
        align-items: start;
    }

    body.page-add-service-category .adc-main,
body.page-add-service-category .adc-sidebar{
        display: flex;
        flex-direction: column;
        gap: .65rem;
    }

    /* ============================================================================
       SECTION CARD (shared)
       ============================================================================ */
    body.page-add-service-category .adc-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: .8rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
        overflow: hidden;
        transition: box-shadow .18s ease, border-color .18s ease;
    }

    body.page-add-service-category .adc-card:hover{
        box-shadow: 0 4px 14px rgba(2, 84, 45, .08);
        border-color: rgba(2, 84, 45, .12);
    }

    body.page-add-service-category .adc-card-header{
        padding: .52rem .78rem;
        background: var(--surface-gray-50);
        border-bottom: 1px solid var(--border-200);
        display: flex;
        align-items: center;
        gap: .48rem;
    }

    body.page-add-service-category .adc-card-header-icon{
        width: 19px;
        height: 19px;
        background: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark));
        border-radius: .3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: .63rem;
        flex-shrink: 0;
    }

    body.page-add-service-category .adc-card-header-title{
        font-size: .67rem;
        font-weight: 700;
        color: var(--text-500);
        margin: 0;
        flex: 1;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    body.page-add-service-category .adc-card-header-badge{
        background: rgba(2, 84, 45, .08);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, .14);
        font-size: .63rem;
        font-weight: 700;
        padding: .15rem .5rem;
        border-radius: 999px;
        display: none;
    }

    body.page-add-service-category .adc-card-header-badge.show{
        display: inline-flex;
        align-items: center;
    }

    body.page-add-service-category .adc-card-body{
        padding: .78rem;
    }

    /* ============================================================================
       FORM ELEMENTS
       ============================================================================ */
    body.page-add-service-category .adc-form-group{
        margin-bottom: 1.25rem;
    }

    body.page-add-service-category .adc-form-group:last-child{
        margin-bottom: 0;
    }

    /* Name · Level order · Parent category share one line; Description sits below. The hints
       under each control have different line counts, so align the row on the control itself
       rather than letting the tallest hint push its neighbours' inputs down. */
    body.page-add-service-category .adc-form-row{
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.6fr);
        gap: .75rem;
        align-items: start;
    }

    body.page-add-service-category .adc-form-row > .adc-form-group,
    body.page-add-service-category .adc-form-row > .adc-form-group:last-child{
        margin-bottom: 1.25rem;
    }

    /* Level order is a single small number — don't let it stretch across its track. */
    body.page-add-service-category .adc-form-row #categoryOrder{
        max-width: 9rem;
    }

    @media (max-width: 1080px) {
        body.page-add-service-category .adc-form-row{
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }
        body.page-add-service-category .adc-form-row > .adc-form-group:first-child{
            grid-column: 1 / -1;
        }
    }

    body.page-add-service-category .adc-label{
        font-size: .67rem;
        font-weight: 700;
        color: var(--text-500);
        margin-bottom: .45rem;
        display: flex;
        align-items: center;
        gap: .4rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    body.page-add-service-category .adc-label i{
        color: var(--primary-green);
        font-size: .72rem;
    }

    body.page-add-service-category .adc-required{
        color: var(--error);
        font-weight: 700;
        margin-left: .1rem;
    }

    body.page-add-service-category .adc-input,
body.page-add-service-category .adc-select,
body.page-add-service-category .adc-textarea{
        width: 100%;
        padding: .72rem .85rem;
        border: 1.5px solid var(--border-200);
        border-radius: .5rem;
        font-size: .8rem;
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 500;
        transition: all .18s ease;
        box-sizing: border-box;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02);
    }

    body.page-add-service-category .adc-input:focus,
body.page-add-service-category .adc-select:focus,
body.page-add-service-category .adc-textarea:focus{
        outline: none;
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-add-service-category .adc-input::placeholder,
body.page-add-service-category .adc-textarea::placeholder{
        color: var(--text-500);
        font-weight: 400;
    }

    body.page-add-service-category .adc-textarea{
        min-height: 96px;
        resize: vertical;
        line-height: 1.6;
    }

    body.page-add-service-category .adc-input[type="number"]{
        font-weight: 700;
        font-size: .85rem;
        text-align: center;
    }

    body.page-add-service-category .adc-input[type="number"]::-webkit-inner-spin-button,
body.page-add-service-category .adc-input[type="number"]::-webkit-outer-spin-button{
        -webkit-appearance: none;
        margin: 0;
    }

    body.page-add-service-category .adc-input[type="number"]{
        -moz-appearance: textfield;
    }

    body.page-add-service-category .adc-input.has-error,
body.page-add-service-category .adc-textarea.has-error{
        border-color: var(--error);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    body.page-add-service-category .adc-hint{
        font-size: .72rem;
        color: var(--text-500);
        margin-top: .4rem;
        display: flex;
        align-items: flex-start;
        gap: .35rem;
        font-weight: 500;
        line-height: 1.45;
    }

    body.page-add-service-category .adc-hint i{
        font-size: .7rem;
        color: var(--primary-green);
        flex-shrink: 0;
    }

    body.page-add-service-category .adc-hint strong{
        color: var(--text-700);
        font-weight: 700;
    }

    body.page-add-service-category .adc-error-text{
        color: var(--error);
        font-size: .72rem;
        margin-top: .4rem;
        display: none;
        align-items: center;
        gap: .35rem;
        font-weight: 600;
    }

    body.page-add-service-category .adc-error-text.show{
        display: flex;
    }

    /* ============================================================================
       TAG INPUT (Sub-categories)
       ============================================================================ */
    body.page-add-service-category .adc-tag-wrapper{
        border: 1.5px solid var(--border-200);
        border-radius: .5rem;
        padding: .42rem .52rem;
        background: var(--surface-white);
        min-height: 50px;
        display: flex;
        flex-wrap: wrap;
        gap: .32rem;
        cursor: text;
        transition: all .18s ease;
        position: relative;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02);
    }

    body.page-add-service-category .adc-tag-wrapper:focus-within{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-add-service-category .adc-tag-wrapper.has-error{
        border-color: var(--error);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    body.page-add-service-category .adc-tag{
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .16rem .5rem;
        background: rgba(2, 84, 45, .08);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, .12);
        border-radius: 999px;
        font-size: .68rem;
        font-weight: 600;
        animation: add-service-category--tagPop .25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        white-space: nowrap;
    }

    @keyframes add-service-category--tagPop {
        0%   { transform: scale(0); opacity: 0; }
        60%  { transform: scale(1.08); }
        100% { transform: scale(1); opacity: 1; }
    }

    body.page-add-service-category .adc-tag-remove{
        cursor: pointer;
        font-size: .62rem;
        color: var(--text-500);
        padding: 0 .08rem;
        border-radius: 3px;
        transition: all .18s ease;
        display: flex;
        align-items: center;
    }

    body.page-add-service-category .adc-tag-remove:hover{
        color: var(--error);
        background: rgba(239, 68, 68, 0.12);
    }

    body.page-add-service-category .adc-tag-input{
        flex: 1;
        min-width: 130px;
        border: none;
        outline: none;
        font-size: .78rem;
        padding: .3rem .35rem;
        background: transparent;
        color: var(--text-700);
        font-weight: 500;
    }

    body.page-add-service-category .adc-tag-count-pill{
        display: none;
        background: rgba(2, 84, 45, .1);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, .18);
        font-size: .67rem;
        font-weight: 700;
        padding: .18rem .5rem;
        border-radius: 999px;
        align-items: center;
        gap: .3rem;
        margin-left: auto;
        align-self: center;
        flex-shrink: 0;
    }

    body.page-add-service-category .adc-tag-count-pill.show{
        display: inline-flex;
    }

    body.page-add-service-category .adc-file-input{
        display: none;
    }

    body.page-add-service-category .adc-bulk-actions{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .65rem;
        margin-top: .75rem;
    }

    /* ============================================================================
       BULK JSON SECTION (commented out)
       ============================================================================ */
    /*
    .adc-bulk-textarea {
        min-height: 160px;
        font-family: Consolas, "Courier New", monospace;
        font-size: .78rem;
        line-height: 1.55;
        white-space: pre;
        background: var(--surface-gray-50);
    }

    .adc-bulk-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: .75rem;
    }
    */

    /* ============================================================================
       SIDEBAR INFO CARDS
       ============================================================================ */
    body.page-add-service-category .adc-info-block{
        border-radius: .45rem;
        padding: .6rem .7rem;
        margin-bottom: .55rem;
    }

    body.page-add-service-category .adc-info-block:last-child{
        margin-bottom: 0;
    }

    body.page-add-service-category .adc-info-block.tips{
        background: rgba(2, 84, 45, .03);
        border: 1px solid rgba(2, 84, 45, .07);
    }

    body.page-add-service-category .adc-info-block.format{
        background: var(--surface-gray-50);
        border: 1px solid var(--border-200);
    }

    body.page-add-service-category .adc-info-block-title{
        font-size: .72rem;
        font-weight: 700;
        color: var(--text-900);
        margin: 0 0 .4rem 0;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    body.page-add-service-category .adc-info-block-title i{
        color: var(--primary-green);
        font-size: .8rem;
    }

    body.page-add-service-category .adc-info-list{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.page-add-service-category .adc-info-list li{
        font-size: .72rem;
        color: var(--text-500);
        font-weight: 500;
        padding: .18rem 0;
        display: flex;
        align-items: flex-start;
        gap: .45rem;
        line-height: 1.45;
    }

    body.page-add-service-category .adc-info-list li i{
        color: var(--primary-green);
        font-size: .72rem;
        margin-top: .18rem;
        flex-shrink: 0;
    }

    body.page-add-service-category .adc-code-sample{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-sm);
        padding: .5rem .75rem;
        margin-top: .5rem;
        font-family: Consolas, "Courier New", monospace;
        font-size: .72rem;
        color: var(--text-700);
        line-height: 1.5;
        overflow-x: auto;
        white-space: pre;
    }

    /* ============================================================================
       ACTIONS FOOTER
       ============================================================================ */
    body.page-add-service-category .adc-actions{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: .8rem;
        padding: .78rem;
        margin-top: .75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    body.page-add-service-category .adc-actions-left{
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-add-service-category .adc-mode-badge{
        padding: .2rem .55rem;
        border-radius: 999px;
        font-size: .67rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
    }

    body.page-add-service-category .adc-mode-badge.add{
        background: var(--primary-green-light);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, 0.15);
    }

    body.page-add-service-category .adc-mode-badge.edit{
        background: #fef3c7;
        color: #b45309;
        border: 1px solid #fde68a;
    }

    body.page-add-service-category .adc-actions-right{
        display: flex;
        align-items: center;
        gap: .45rem;
    }

    body.page-add-service-category .adc-footer-note{
        font-size: .68rem;
        color: var(--text-500);
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: .35rem;
        line-height: 1.4;
    }

    body.page-add-service-category .adc-footer-note i{
        color: var(--primary-green);
        font-size: .74rem;
        flex-shrink: 0;
    }

    /* ============================================================================
       BUTTONS
       ============================================================================ */
    body.page-add-service-category .adc-btn{
        padding: .42rem .82rem;
        border-radius: .5rem;
        font-weight: 600;
        font-size: .73rem;
        line-height: 1;
        cursor: pointer;
        transition: all .18s ease;
        border: 1.5px solid var(--border-200);
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        text-decoration: none;
        white-space: nowrap;
        background: var(--surface-white);
        color: var(--text-500);
    }

    body.page-add-service-category .adc-btn i{
        font-size: .8rem;
    }

    body.page-add-service-category .adc-btn:hover{
        background: var(--surface-gray-100);
        color: var(--text-900);
        border-color: var(--surface-gray-200);
        text-decoration: none;
    }

    body.page-add-service-category .adc-btn-primary{
        background: var(--gradient-primary);
        color: white;
        border-color: transparent;
    }

    body.page-add-service-category .adc-btn-primary:hover:not(:disabled){
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(2, 84, 45, .3);
        background: var(--gradient-primary);
        color: white;
    }

    body.page-add-service-category .adc-btn-secondary{
        color: var(--text-700);
    }

    body.page-add-service-category .adc-btn-secondary:hover{
        color: var(--primary-green);
        border-color: rgba(2, 84, 45, .25);
        background: rgba(2, 84, 45, .05);
    }

    body.page-add-service-category .adc-btn-outline{
        background: transparent;
        color: var(--primary-green);
        border: 1.5px solid var(--primary-green);
    }

    body.page-add-service-category .adc-btn-outline:hover:not(:disabled){
        background: var(--primary-green);
        color: white;
    }

    body.page-add-service-category .adc-btn-icon{
        width: 2.15rem;
        height: 2.15rem;
        padding: 0;
        justify-content: center;
    }

    body.page-add-service-category .adc-btn:disabled{
        opacity: .55;
        cursor: not-allowed;
    }

    body.page-add-service-category .btn-text{
        display: inline-flex;
        align-items: center;
        gap: .45rem;
    }

    body.page-add-service-category .adc-btn.loading .btn-spinner{
        display: inline-block !important;
    }

    body.page-add-service-category .adc-btn.loading .btn-text{
        display: none;
    }

    body.page-add-service-category .btn-spinner{
        display: none !important;
        width: 15px;
        height: 15px;
        border: 2px solid rgba(255, 255, 255, .35);
        border-top-color: white;
        border-radius: 50%;
        animation: add-service-category--spin .7s linear infinite;
        flex-shrink: 0;
    }

    body.page-add-service-category .adc-btn-outline .btn-spinner{
        border-color: rgba(2, 84, 45, .25);
        border-top-color: var(--primary-green);
    }

    @keyframes add-service-category--spin {
        to { transform: rotate(360deg); }
    }

    /* ============================================================================
       TOAST
       ============================================================================ */
    body.page-add-service-category .adc-toast{
        position: fixed;
        top: 1.25rem;
        right: 1.25rem;
        z-index: 10000;
        padding: .6rem 1rem;
        border-radius: .5rem;
        font-size: .78rem;
        font-weight: 600;
        color: white;
        display: flex;
        align-items: center;
        gap: .5rem;
        opacity: 0;
        transform: translateX(.75rem);
        transition: all .3s ease;
        pointer-events: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
        min-width: 180px;
        max-width: 320px;
    }

    body.page-add-service-category .adc-toast.show{
        opacity: 1;
        transform: translateX(0);
        pointer-events: all;
    }

    body.page-add-service-category .adc-toast.success{
        background: linear-gradient(90deg, var(--primary-green), var(--primary-green-dark));
    }

    body.page-add-service-category .adc-toast.error{
        background: linear-gradient(90deg, #ef4444, #b91c1c);
    }

    body.page-add-service-category .adc-toast i{
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* ============================================================================
       RESPONSIVE
       ============================================================================ */
    @media (max-width: 960px) {
        body.page-add-service-category .adc-content-grid{
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 860px) {
        body.page-add-service-category .adc-header-card{
            grid-template-columns: auto 1fr;
        }

        body.page-add-service-category .adc-header-actions{
            grid-column: 1 / -1;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        body.page-add-service-category .adc-header-type{
            text-align: left;
        }
    }

    @media (max-width: 640px) {
        body.page-add-service-category .adc-container{
            padding: .5rem;
        }
        body.page-add-service-category .adc-form-row{
            grid-template-columns: 1fr;
            gap: 0;
        }
        body.page-add-service-category .adc-header-card{
            grid-template-columns: 1fr;
        }
        body.page-add-service-category .adc-header-visual{
            flex-direction: row;
            align-items: center;
        }
        body.page-add-service-category .adc-header-actions{
            grid-column: auto;
            justify-content: flex-start;
        }
        body.page-add-service-category .adc-actions{
            flex-direction: column;
            align-items: stretch;
        }
        body.page-add-service-category .adc-actions-right{
            flex-direction: column;
        }
        body.page-add-service-category .adc-btn{
            width: 100%;
            justify-content: center;
        }
        body.page-add-service-category .adc-toast{
            right: .75rem;
            left: .75rem;
            min-width: auto;
            max-width: none;
        }
        body.page-add-service-category .adc-page-title{
            font-size: 1.04rem;
        }
    }


/* ==========================================================
   Template: admin_dashboard.html (page-admin-dashboard)
   ========================================================== */

        body.page-admin-dashboard{ background-color: #f8f9fa; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        body.page-admin-dashboard .dashboard-container{ max-width: 1400px; margin: 0 auto; padding: 30px 15px; }
        body.page-admin-dashboard .cursor-pointer{ cursor: pointer; }
        body.page-admin-dashboard .group-detail-row > td{ padding: 0 !important; border-bottom: 0; }
        body.page-admin-dashboard .detail-wrapper{ display: none; background-color: #f8f9fa; border-top: 1px dashed #dee2e6; }
        
        /* Custom Pagination Styling */
        body.page-admin-dashboard .pagination-btn{
            border: 1px solid #dee2e6; background: #fff; padding: 6px 12px;
            margin: 0 2px; border-radius: 4px; cursor: pointer; color: #0d6efd;
            transition: all 0.2s;
        }
        body.page-admin-dashboard .pagination-btn:hover:not(:disabled){ background: #e9ecef; }
        body.page-admin-dashboard .pagination-btn.active{ background: #198754; color: white; border-color: #198754; }
        body.page-admin-dashboard .pagination-btn:disabled{ color: #6c757d; cursor: not-allowed; background: #f8f9fa; }
        
        body.page-admin-dashboard .transition-rotate{ transition: transform 0.3s ease; }
        body.page-admin-dashboard .rotate-180{ transform: rotate(180deg); }

        /* Polished, centered table system for this standalone admin page */
        body.page-admin-dashboard .dashboard-container h2,
body.page-admin-dashboard .modal-title{
            text-align: center;
        }

        body.page-admin-dashboard .modal-title{
            width: 100%;
        }

        body.page-admin-dashboard .dashboard-container > .d-flex.justify-content-between.align-items-end.mb-4{
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            gap: 1rem;
            align-items: end !important;
        }

        body.page-admin-dashboard .dashboard-container > .d-flex.justify-content-between.align-items-end.mb-4 > div:first-child{
            grid-column: 2;
            justify-self: center;
            text-align: center;
        }

        body.page-admin-dashboard .dashboard-container > .d-flex.justify-content-between.align-items-end.mb-4 > div:last-child{
            grid-column: 3;
            justify-self: end;
        }

        body.page-admin-dashboard .table-responsive{
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
        }

        body.page-admin-dashboard table.table{
            margin-bottom: 0;
        }

        body.page-admin-dashboard table.table thead th{
            background: #02542D !important;
            color: #fff !important;
            border: 0 !important;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .045em;
            text-transform: uppercase;
            text-align: center !important;
            vertical-align: middle;
            white-space: nowrap;
        }

        body.page-admin-dashboard table.table tbody td{
            text-align: center !important;
            vertical-align: middle;
            border-color: #eef2f7;
            color: #4b5563;
            font-weight: 400;
        }

        body.page-admin-dashboard table.table tbody tr:hover{
            background: rgba(2, 84, 45, .04);
        }

        body.page-admin-dashboard table.table :is(.text-start, .text-end, .text-center){
            text-align: center !important;
        }

        @media (max-width: 768px) {
            body.page-admin-dashboard .dashboard-container > .d-flex.justify-content-between.align-items-end.mb-4{
                grid-template-columns: 1fr;
            }

            body.page-admin-dashboard .dashboard-container > .d-flex.justify-content-between.align-items-end.mb-4 > div:first-child,
body.page-admin-dashboard .dashboard-container > .d-flex.justify-content-between.align-items-end.mb-4 > div:last-child{
                grid-column: 1;
                justify-self: center;
            }
        }
    

/* ==========================================================
   Template: appointment.html (page-appointment)
   ========================================================== */

    /* ==== Dashboard UI Variables (uses base.html CSS variables) ==== */
    body.page-appointment .apt-container{
        margin: 0 auto;
        padding: .875rem;
    }

    /* ==== Header Card ==== */
    body.page-appointment .apt-header-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }

    body.page-appointment .apt-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
    }

    body.page-appointment .apt-header-main{
        flex: 1;
        min-width: 200px;
        position: relative;
        z-index: 1;
    }

    body.page-appointment .apt-title{
        font-size: 1.25rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        letter-spacing: -0.01em;
        margin: 0 0 .25rem 0;
    }

    body.page-appointment .apt-subtitle{
        font-size: .8rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin: 0;
    }

    body.page-appointment .apt-header-actions{
        display: flex;
        gap: .5rem;
        position: relative;
        z-index: 1;
    }

    /* ==== Stats Grid ==== */
    body.page-appointment .apt-stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: .875rem;
        margin-bottom: 1rem;
    }

    body.page-appointment .apt-stat-card{
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: 1rem;
        border-radius: .875rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        box-shadow: var(--shadow-sm);
        transition: all .2s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    body.page-appointment .apt-stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-appointment .apt-stat-card.active{
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: white;
        border-color: transparent;
    }

    body.page-appointment .apt-stat-card.active .apt-stat-icon{
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    body.page-appointment .apt-stat-card.active .apt-stat-label{
        color: rgba(255, 255, 255, 0.8);
    }

    body.page-appointment .apt-stat-card.active .apt-stat-value{
        color: white;
    }

    body.page-appointment .apt-stat-icon{
        width: 2.75rem;
        height: 2.75rem;
        border-radius: .625rem;
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-appointment .apt-stat-content{
        flex: 1;
        min-width: 0;
    }

    body.page-appointment .apt-stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink-500);
        font-weight: var(--font-weight-semibold);
        margin-bottom: .125rem;
    }

    body.page-appointment .apt-stat-value{
        font-size: 1.35rem;
        font-weight: var(--font-weight-extrabold);
        color: var(--brand-primary);
        line-height: 1.1;
    }

    /* ==== Main Grid ==== */
    body.page-appointment .apt-main-grid{
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 1rem;
    }

    /* ==== Card Base ==== */
    body.page-appointment .apt-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.page-appointment .apt-card-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .875rem 1rem;
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: white;
        font-weight: var(--font-weight-bold);
        font-size: .875rem;
    }

    body.page-appointment .apt-card-header i{
        font-size: 1rem;
        opacity: .9;
    }

    body.page-appointment .apt-card-body{
        flex: 1;
        padding: 0;
        overflow: hidden;
    }

    /* ==== Calendar Styling ==== */
    body.page-appointment .apt-calendar-card{
        min-height: 500px;
    }

    body.page-appointment .apt-calendar-card .apt-card-body{
        padding: .75rem;
    }

    body.page-appointment #calendar{
        height: 100%;
    }

    /* FullCalendar Overrides */
    body.page-appointment .fc{
        font-family: inherit;
    }

    body.page-appointment .fc .fc-toolbar-title{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
    }

    body.page-appointment .fc .fc-button{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        color: var(--ink-700);
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        padding: .375rem .625rem;
        border-radius: .5rem;
        transition: all .15s ease;
    }

    body.page-appointment .fc .fc-button:hover{
        background: var(--ink-100);
        border-color: var(--ink-300);
    }

    body.page-appointment .fc .fc-button-primary:not(:disabled).fc-button-active,
body.page-appointment .fc .fc-button-primary:not(:disabled):active{
        background: var(--brand-primary);
        border-color: var(--brand-primary);
        color: white;
    }

    body.page-appointment .fc .fc-daygrid-day-number{
        font-size: .75rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-medium);
    }

    body.page-appointment .fc .fc-col-header-cell-cushion{
        font-size: .7rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        color: var(--ink-500);
    }

    body.page-appointment .fc .fc-daygrid-day.fc-day-today{
        background: rgba(2, 84, 45, 0.08);
    }

    body.page-appointment .fc .fc-event{
        border: none;
        border-radius: .375rem;
        font-size: .7rem;
        font-weight: var(--font-weight-semibold);
        padding: .125rem .375rem;
        color: #ebf2ef;
    }

    body.page-appointment .fc .fc-more-link{
        font-size: .65rem;
        color: var(--brand-primary);
        font-weight: var(--font-weight-bold);
    }

    body.page-appointment .fc .fc-daygrid-event{
        padding: .1rem .375rem;
    }

    body.page-appointment .fc .fc-event-main,
body.page-appointment .fc .fc-event-main-frame,
body.page-appointment .fc .fc-event-title,
body.page-appointment .fc .fc-event-time{
        color: inherit;
        line-height: 1.2;
    }

    body.page-appointment .fc .fc-popover{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .75rem;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }

    body.page-appointment .fc .fc-popover-header{
        background: var(--ink-50);
        border-bottom: 1px solid var(--ink-200);
        color: var(--ink-700);
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        padding: .5rem .75rem;
    }

    body.page-appointment .fc .fc-popover-body{
        background: var(--surface-primary);
        padding: .35rem;
    }

    body.page-appointment .fc .fc-popover .fc-event{
        margin: .2rem 0;
    }

    /* ==== Sidebar Card ==== */
    body.page-appointment .apt-sidebar-card{
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 220px);
    }

    /* ==== Filters ==== */
    body.page-appointment .apt-filters{
        display: flex;
        gap: .5rem;
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--ink-200);
        background: var(--ink-50);
    }

    body.page-appointment .apt-search-wrap{
        flex: 1;
        position: relative;
    }

    body.page-appointment .apt-search-input{
        width: 100%;
        padding: .5rem .75rem .5rem 2rem;
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        background: var(--surface-primary);
        font-size: .75rem;
        color: var(--ink-700);
        transition: all .15s ease;
    }

    body.page-appointment .apt-search-input:focus{
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-appointment .apt-search-icon{
        position: absolute;
        left: .625rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        font-size: .75rem;
        pointer-events: none;
    }

    /* ==== Custom Dropdown ==== */
    body.page-appointment .apt-dropdown{
        position: relative;
        min-width: 140px;
    }

    body.page-appointment .apt-dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .375rem;
        padding: .5rem .75rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        cursor: pointer;
        transition: all .15s ease;
        width: 100%;
    }

    body.page-appointment .apt-dropdown-trigger:hover,
body.page-appointment .apt-dropdown-trigger.active{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.1);
    }

    body.page-appointment .apt-dropdown-arrow{
        color: var(--brand-primary);
        font-size: .75rem;
        transition: transform .2s ease;
    }

    body.page-appointment .apt-dropdown-trigger.active .apt-dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-appointment .apt-dropdown-menu{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: .25rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        box-shadow: var(--shadow-lg);
        z-index: 100;
        display: none;
        overflow: hidden;
        padding: .25rem;
    }

    body.page-appointment .apt-dropdown-menu.show{
        display: block;
    }

    body.page-appointment .apt-dropdown-option{
        display: block;
        width: 100%;
        padding: .55rem .75rem;
        background: none;
        border: none;
        text-align: left;
        font-size: .75rem;
        color: var(--ink-700);
        border-radius: .45rem;
        cursor: pointer;
        transition: all .15s ease;
    }

    body.page-appointment .apt-dropdown-option:hover{
        background: var(--ink-50);
    }

    body.page-appointment .apt-dropdown-option.selected{
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
    }

    body.page-appointment .hidden-select{
        display: none !important;
    }

    /* ==== Appointments List ==== */
    body.page-appointment .apt-list{
        flex: 1;
        overflow-y: auto;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.page-appointment .apt-list::-webkit-scrollbar{
        width: 5px;
    }

    body.page-appointment .apt-list::-webkit-scrollbar-track{
        background: var(--ink-100);
    }

    body.page-appointment .apt-list::-webkit-scrollbar-thumb{
        background: var(--brand-primary);
        border-radius: 3px;
    }

    body.page-appointment .apt-list-item{
        display: grid;
        grid-template-columns: 3.5rem 1fr auto;
        gap: .75rem;
        padding: .875rem 1rem;
        border-bottom: 1px solid var(--ink-100);
        transition: all .15s ease;
        cursor: pointer;
    }

    body.page-appointment .apt-list-item:hover{
        background: var(--ink-50);
    }

    body.page-appointment .apt-list-item:last-child{
        border-bottom: none;
    }

    body.page-appointment .apt-time{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .5rem;
        background: rgba(2, 84, 45, 0.1);
        border-radius: .5rem;
        min-width: 3.5rem;
    }

    body.page-appointment .apt-time-start{
        font-size: .75rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
    }

    body.page-appointment .apt-time-end{
        font-size: .6rem;
        color: var(--ink-500);
        margin-top: .125rem;
    }

    body.page-appointment .apt-info{
        flex: 1;
        min-width: 0;
    }

    body.page-appointment .apt-info-title{
        font-size: .8rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin-bottom: .25rem;
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
    }

    body.page-appointment .apt-badge{
        display: inline-flex;
        align-items: center;
        padding: .125rem .5rem;
        border-radius: 1rem;
        font-size: .6rem;
        font-weight: var(--font-weight-bold);
        color: white;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    body.page-appointment .apt-customer{
        font-size: .7rem;
        color: var(--ink-500);
    }

    body.page-appointment .apt-customer-name{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
    }

    body.page-appointment .apt-desc{
        font-size: .65rem;
        color: var(--ink-400);
        margin-top: .25rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.page-appointment .apt-actions{
        display: flex;
        gap: .375rem;
        align-items: center;
    }

    body.page-appointment .apt-action-btn{
        width: 1.75rem;
        height: 1.75rem;
        border-radius: .375rem;
        border: 1px solid var(--ink-200);
        background: var(--surface-primary);
        color: var(--ink-600);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        cursor: pointer;
        transition: all .15s ease;
    }

    body.page-appointment .apt-action-btn:hover{
        background: var(--brand-primary);
        border-color: var(--brand-primary);
        color: white;
    }

    /* ==== Empty State ==== */
    body.page-appointment .apt-empty{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        text-align: center;
        color: var(--ink-500);
    }

    body.page-appointment .apt-empty-icon{
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(2, 84, 45, 0.08);
        color: var(--brand-primary);
        font-size: 1.25rem;
        margin-bottom: .75rem;
    }

    body.page-appointment .apt-empty-title{
        font-size: .9rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-700);
        margin-bottom: .25rem;
    }

    body.page-appointment .apt-empty-desc{
        font-size: .75rem;
        color: var(--ink-500);
    }

    /* ==== Buttons ==== */
    body.page-appointment .apt-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .375rem;
        padding: .5rem 1rem;
        border-radius: .5rem;
        font-size: .8rem;
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all .15s ease;
        border: none;
    }

    body.page-appointment .apt-btn-primary{
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: white;
    }

    body.page-appointment .apt-btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(2, 84, 45, 0.25);
    }

    body.page-appointment .apt-header-actions .apt-btn-primary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1.5px solid var(--brand-primary);
        box-shadow: none;
    }

    body.page-appointment .apt-header-actions .apt-btn-primary:hover{
        background: var(--brand-primary);
        color: var(--surface-primary);
        transform: none;
        box-shadow: none;
    }

    body.page-appointment .apt-btn-secondary{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        color: var(--ink-700);
    }

    body.page-appointment .apt-btn-secondary:hover{
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }

    body.page-appointment .apt-btn-danger{
        background: #ef4444;
        color: white;
    }

    body.page-appointment .apt-btn-danger:hover{
        background: #dc2626;
    }

    body.page-appointment .apt-btn-outline{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        color: var(--ink-700);
    }

    body.page-appointment .apt-btn-outline:hover{
        background: var(--ink-50);
    }

    /* ==== Modal Styling ==== */
    body.page-appointment .modal-content{
        border-radius: .875rem;
        border: 1px solid var(--ink-200);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }

    body.page-appointment .modal-header{
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: white;
        padding: 1rem 1.25rem;
        border-bottom: none;
    }

    body.page-appointment .modal-title{
        font-weight: var(--font-weight-bold);
        font-size: 1rem;
        margin: 0;
    }

    body.page-appointment .btn-close-white{
        filter: invert(1) grayscale(100%) brightness(200%);
        opacity: .9;
    }

    body.page-appointment .btn-close-white:hover{
        opacity: 1;
    }

    body.page-appointment .modal-body{
        padding: 1.25rem;
        background: var(--surface-primary);
    }

    body.page-appointment .modal-body .form-label{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
        margin-bottom: .375rem;
        font-size: .75rem;
    }

    body.page-appointment .modal-body .form-control,
body.page-appointment .modal-body .form-select{
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        padding: .5rem .75rem;
        font-size: .8rem;
        transition: all .15s ease;
        background: var(--surface-primary);
        color: var(--ink-700);
    }

    body.page-appointment .modal-body .form-control:focus,
body.page-appointment .modal-body .form-select:focus{
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-appointment .modal-body .form-control[readonly]{
        background: var(--ink-50);
        color: var(--ink-500);
    }

    body.page-appointment .modal-footer{
        padding: .875rem 1.25rem;
        background: var(--ink-50);
        border-top: 1px solid var(--ink-200);
        display: flex;
        gap: .5rem;
        justify-content: space-between;
    }

    /* ==== Spinner ==== */
    body.page-appointment .spinner{
        display: inline-block;
        width: .875rem;
        height: .875rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: appointment--spin 0.8s ease-in-out infinite;
    }

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

    /* ==== Toast ==== */
    body.page-appointment .apt-toast{
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 9999;
        min-width: 220px;
        max-width: 320px;
        padding: .75rem 1rem;
        border-radius: .625rem;
        font-size: .8rem;
        font-weight: var(--font-weight-semibold);
        line-height: 1.35;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        transform: translateY(-1rem);
        transition: all .3s ease;
        pointer-events: none;
        border: 1px solid var(--ink-200);
        border-left: 4px solid var(--brand-primary);
        backdrop-filter: blur(12px);
    }

    body.page-appointment .apt-toast.show{
        opacity: 1;
        transform: translateY(0);
    }

    body.page-appointment .apt-toast.success{
        background: linear-gradient(90deg, rgba(34, 197, 94, 0.12), rgba(2, 84, 45, 0.08));
        color: var(--ink-800);
        border-color: rgba(2, 84, 45, 0.18);
    }

    body.page-appointment .apt-toast.error{
        background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(185, 28, 28, 0.08));
        color: var(--ink-800);
        border-color: rgba(220, 38, 38, 0.18);
    }

    /* ==== Animations ==== */
    @keyframes appointment--fadeIn {
        from { opacity: 0; transform: translateY(.5rem); }
        to { opacity: 1; transform: translateY(0); }
    }

    body.page-appointment .fade-in{
        animation: appointment--fadeIn .3s ease-out;
    }

    /* ==== Responsive ==== */
    @media (max-width: 1199px) {
        body.page-appointment .apt-main-grid{
            grid-template-columns: 1fr 340px;
        }
    }

    @media (max-width: 991px) {
        body.page-appointment .apt-main-grid{
            grid-template-columns: 1fr;
        }

        body.page-appointment .apt-calendar-card{
            order: 2;
            min-height: 400px;
        }

        body.page-appointment .apt-sidebar-card{
            order: 1;
            max-height: 450px;
        }

        body.page-appointment .apt-header-card{
            flex-direction: column;
            align-items: stretch;
        }

        body.page-appointment .apt-header-actions{
            width: 100%;
        }

        body.page-appointment .apt-header-actions .apt-btn{
            flex: 1;
        }
    }

    @media (max-width: 767px) {
        body.page-appointment .apt-container{
            padding: .5rem;
        }

        body.page-appointment .apt-stats-grid{
            grid-template-columns: 1fr 1fr;
        }

        body.page-appointment .apt-stat-card{
            padding: .75rem;
        }

        body.page-appointment .apt-stat-icon{
            width: 2.25rem;
            height: 2.25rem;
            font-size: .9rem;
        }

        body.page-appointment .apt-stat-value{
            font-size: 1.1rem;
        }

        body.page-appointment .apt-title{
            font-size: 1.25rem;
        }

        body.page-appointment .apt-filters{
            flex-direction: column;
        }

        body.page-appointment .apt-dropdown{
            width: 100%;
        }

        body.page-appointment .apt-list-item{
            grid-template-columns: 3rem 1fr auto;
            gap: .5rem;
            padding: .75rem;
        }

        body.page-appointment .apt-time{
            min-width: 3rem;
            padding: .375rem;
        }

        body.page-appointment .apt-time-start{
            font-size: .7rem;
        }
    }

    @media (max-width: 575px) {
        body.page-appointment .apt-stats-grid{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .5rem;
        }

        body.page-appointment .apt-stat-card{
            width: 100%;
            min-width: 0;
            min-height: 94px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            padding: .75rem .4rem;
            text-align: center;
            border-radius: .8rem;
        }

        body.page-appointment .apt-stat-content{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        body.page-appointment .apt-stat-icon{
            width: 34px;
            height: 34px;
            border-radius: 9px;
            font-size: .9rem;
        }

        body.page-appointment .apt-stat-label{
            margin-bottom: .1rem;
            font-size: .55rem;
            line-height: 1.25;
            text-align: center;
        }

        body.page-appointment .apt-stat-value{
            width: 100%;
            font-size: 1.2rem;
            text-align: center;
        }

        body.page-appointment .apt-header-actions{
            flex-direction: column;
        }

        body.page-appointment .modal-footer{
            flex-direction: column;
        }

        body.page-appointment .modal-footer .apt-btn{
            width: 100%;
        }
    }

    /* ==== Dark Mode ==== */
    html[data-theme="dark"] body.page-appointment{
        color-scheme: dark;
    }

    html[data-theme="dark"] body.page-appointment{
        background:
            radial-gradient(circle at top left, rgba(8, 73, 40, 0.16), transparent 28%),
            radial-gradient(circle at top right, rgba(8, 73, 40, 0.08), transparent 24%),
            linear-gradient(180deg, #07100c 0%, #090f0c 100%);
        color: var(--wb-text, #edf5ef);
    }

    html[data-theme="dark"] body.page-appointment .apt-container{
        background: transparent;
    }

    html[data-theme="dark"] body.page-appointment .apt-header-card,
html[data-theme="dark"] body.page-appointment .apt-stat-card,
html[data-theme="dark"] body.page-appointment .apt-card,
html[data-theme="dark"] body.page-appointment .modal-content{
        background: linear-gradient(180deg, rgba(16, 24, 20, 0.98) 0%, rgba(12, 18, 15, 0.98) 100%);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 22px 56px rgba(0, 0, 0, 0.44);
    }

    html[data-theme="dark"] body.page-appointment .apt-header-card::before{
        background: linear-gradient(90deg, rgba(8, 73, 40, 0.16), transparent 68%);
    }

    html[data-theme="dark"] body.page-appointment .apt-title,
html[data-theme="dark"] body.page-appointment .apt-stat-value,
html[data-theme="dark"] body.page-appointment .apt-empty-title,
html[data-theme="dark"] body.page-appointment .modal-title,
html[data-theme="dark"] body.page-appointment .fc .fc-toolbar-title{
        color: var(--wb-text, #edf5ef);
    }

    html[data-theme="dark"] body.page-appointment .apt-subtitle,
html[data-theme="dark"] body.page-appointment .apt-stat-label,
html[data-theme="dark"] body.page-appointment .apt-time-end,
html[data-theme="dark"] body.page-appointment .apt-customer,
html[data-theme="dark"] body.page-appointment .apt-desc,
html[data-theme="dark"] body.page-appointment .apt-empty,
html[data-theme="dark"] body.page-appointment .apt-empty-desc,
html[data-theme="dark"] body.page-appointment .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] body.page-appointment .modal-body .form-label{
        color: var(--wb-text-muted, #9eaea5);
    }

    html[data-theme="dark"] body.page-appointment .apt-stat-card.active{
        background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
        border-color: rgba(8, 73, 40, 0.6);
        color: #fff;
        box-shadow: 0 18px 34px rgba(8, 73, 40, 0.2);
    }

    html[data-theme="dark"] body.page-appointment .apt-stat-card.active .apt-stat-label,
html[data-theme="dark"] body.page-appointment .apt-stat-card.active .apt-stat-value{
        color: #fff;
    }

    html[data-theme="dark"] body.page-appointment .apt-stat-icon{
        background: rgba(8, 73, 40, 0.18);
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-appointment .apt-card-header{
        background: linear-gradient(135deg, rgba(8, 73, 40, 0.95) 0%, rgba(12, 98, 55, 0.92) 100%);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-appointment .apt-card-header i,
html[data-theme="dark"] body.page-appointment .apt-empty-icon,
html[data-theme="dark"] body.page-appointment .apt-search-icon,
html[data-theme="dark"] body.page-appointment .apt-dropdown-arrow{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-appointment .apt-filters{
        background: rgba(255, 255, 255, 0.02);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-appointment .apt-search-input,
html[data-theme="dark"] body.page-appointment .apt-dropdown-trigger,
html[data-theme="dark"] body.page-appointment .apt-dropdown-menu,
html[data-theme="dark"] body.page-appointment .apt-dropdown-option{
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--wb-text, #edf5ef);
    }

    html[data-theme="dark"] body.page-appointment .apt-dropdown-menu{
        background: linear-gradient(180deg, rgba(14, 20, 17, 0.99) 0%, rgba(12, 18, 15, 0.99) 100%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.48);
    }

    html[data-theme="dark"] body.page-appointment .apt-dropdown-option{
        background: transparent;
    }

    html[data-theme="dark"] body.page-appointment .apt-search-input::placeholder{
        color: var(--wb-text-soft, #72837a);
    }

    html[data-theme="dark"] body.page-appointment .apt-search-input:focus,
html[data-theme="dark"] body.page-appointment .apt-dropdown-trigger:hover,
html[data-theme="dark"] body.page-appointment .apt-dropdown-trigger.active{
        border-color: rgba(8, 73, 40, 0.48);
        box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.16);
    }

    html[data-theme="dark"] body.page-appointment .apt-dropdown-option:hover,
html[data-theme="dark"] body.page-appointment .apt-dropdown-option.selected{
        background: rgba(8, 73, 40, 0.22);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-appointment .apt-list::-webkit-scrollbar-track{
        background: rgba(255, 255, 255, 0.04);
    }

    html[data-theme="dark"] body.page-appointment .apt-list::-webkit-scrollbar-thumb{
        background: rgba(8, 73, 40, 0.72);
    }

    html[data-theme="dark"] body.page-appointment .apt-list-item{
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] body.page-appointment .apt-list-item:hover{
        background: rgba(8, 73, 40, 0.08);
    }

    html[data-theme="dark"] body.page-appointment .apt-time{
        background: rgba(8, 73, 40, 0.12);
    }

    html[data-theme="dark"] body.page-appointment .apt-time-start,
html[data-theme="dark"] body.page-appointment .apt-customer-name{
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-appointment .apt-action-btn{
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--wb-text, #edf5ef);
    }

    html[data-theme="dark"] body.page-appointment .apt-action-btn:hover{
        background: rgba(8, 73, 40, 0.14);
        border-color: rgba(8, 73, 40, 0.38);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-appointment .apt-empty-icon{
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(8, 73, 40, 0.14);
        color: #d9fbe5;
        font-size: 1.25rem;
        margin: 0 auto .75rem;
        box-shadow: inset 0 0 0 1px rgba(8, 73, 40, 0.18);
    }

    html[data-theme="dark"] body.page-appointment .apt-btn-secondary,
html[data-theme="dark"] body.page-appointment .apt-btn-outline{
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--wb-text, #edf5ef);
    }

    html[data-theme="dark"] body.page-appointment .apt-btn-secondary:hover,
html[data-theme="dark"] body.page-appointment .apt-btn-outline:hover{
        background: rgba(8, 73, 40, 0.12);
        border-color: rgba(8, 73, 40, 0.35);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-appointment .apt-btn-primary{
        background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
        color: #eff9f2;
        box-shadow: 0 14px 30px rgba(8, 73, 40, 0.22);
    }

    html[data-theme="dark"] body.page-appointment .apt-btn-primary:hover{
        box-shadow: 0 18px 34px rgba(8, 73, 40, 0.3);
    }

    html[data-theme="dark"] body.page-appointment .modal-header{
        background: linear-gradient(135deg, rgba(8, 73, 40, 0.96) 0%, rgba(12, 98, 55, 0.94) 100%);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-appointment .btn-close-white{
        filter: invert(1) grayscale(100%) brightness(180%);
    }

    html[data-theme="dark"] body.page-appointment .modal-body{
        background: rgba(12, 18, 15, 0.98);
    }

    html[data-theme="dark"] body.page-appointment .modal-footer{
        background: rgba(255, 255, 255, 0.02);
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-appointment .modal-body .form-control,
html[data-theme="dark"] body.page-appointment .modal-body .form-select{
        background: rgba(255, 255, 255, 0.03);
        color: var(--wb-text, #edf5ef);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-appointment .modal-body .form-control::placeholder{
        color: var(--wb-text-soft, #72837a);
    }

    html[data-theme="dark"] body.page-appointment .modal-body .form-control:focus,
html[data-theme="dark"] body.page-appointment .modal-body .form-select:focus{
        box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.16);
        border-color: rgba(8, 73, 40, 0.48);
    }

    html[data-theme="dark"] body.page-appointment .modal-body .form-control[readonly]{
        background: rgba(255, 255, 255, 0.04);
        color: var(--wb-text-muted, #9eaea5);
    }

    html[data-theme="dark"] body.page-appointment #appointmentServiceInfo,
html[data-theme="dark"] body.page-appointment #editAppointmentServiceInfo{
        background: rgba(8, 73, 40, 0.14) !important;
        color: #d9fbe5 !important;
        border-color: rgba(8, 73, 40, 0.24) !important;
    }

    html[data-theme="dark"] body.page-appointment #appointmentServiceInfo *,
html[data-theme="dark"] body.page-appointment #editAppointmentServiceInfo *{
        color: inherit !important;
    }

    html[data-theme="dark"] body.page-appointment .fc,
html[data-theme="dark"] body.page-appointment .fc .fc-view-harness,
html[data-theme="dark"] body.page-appointment .fc .fc-scrollgrid,
html[data-theme="dark"] body.page-appointment .fc .fc-scrollgrid-section,
html[data-theme="dark"] body.page-appointment .fc .fc-scrollgrid-section > td,
html[data-theme="dark"] body.page-appointment .fc .fc-scrollgrid-section > th,
html[data-theme="dark"] body.page-appointment .fc .fc-daygrid-day-frame,
html[data-theme="dark"] body.page-appointment .fc .fc-daygrid-day,
html[data-theme="dark"] body.page-appointment .fc .fc-daygrid-body,
html[data-theme="dark"] body.page-appointment .fc .fc-col-header,
html[data-theme="dark"] body.page-appointment .fc .fc-col-header-cell{
        background: transparent !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-daygrid-day-number{
        color: #d2ddd6;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-col-header-cell-cushion{
        color: #d9efe0;
        font-weight: var(--font-weight-bold);
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-daygrid-day.fc-day-today{
        background: rgba(8, 73, 40, 0.16) !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-button{
        background: rgba(255, 255, 255, 0.03) !important;
        color: var(--wb-text, #edf5ef) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-button:hover{
        background: rgba(8, 73, 40, 0.14) !important;
        border-color: rgba(8, 73, 40, 0.32) !important;
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-button-primary:not(:disabled).fc-button-active,
html[data-theme="dark"] body.page-appointment .fc .fc-button-primary:not(:disabled):active{
        background: linear-gradient(135deg, #0c6237 0%, #084928 100%) !important;
        border-color: transparent !important;
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-event{
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-more-link{
        color: #d9fbe5 !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-popover{
        background: rgba(12, 18, 15, 0.98) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5) !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-popover-header{
        background: linear-gradient(135deg, rgba(8, 73, 40, 0.96) 0%, rgba(12, 98, 55, 0.94) 100%) !important;
        color: #eff9f2 !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-popover-body{
        background: rgba(12, 18, 15, 0.98) !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-popover .fc-event,
html[data-theme="dark"] body.page-appointment .fc .fc-popover .fc-event-main,
html[data-theme="dark"] body.page-appointment .fc .fc-popover .fc-event-main-frame,
html[data-theme="dark"] body.page-appointment .fc .fc-popover .fc-event-title,
html[data-theme="dark"] body.page-appointment .fc .fc-popover .fc-event-time{
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] body.page-appointment .fc .fc-popover .fc-popover-close{
        color: #d9fbe5 !important;
    }

    html[data-theme="dark"] body.page-appointment .apt-toast{
        background: rgba(15, 23, 19, 0.98);
        color: var(--wb-text, #edf5ef);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-left-color: rgba(8, 73, 40, 0.9);
    }

    html[data-theme="dark"] body.page-appointment .apt-toast.success{
        background: linear-gradient(90deg, rgba(8, 73, 40, 0.96), rgba(12, 98, 55, 0.94));
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-appointment .apt-toast.error{
        background: linear-gradient(90deg, rgba(185, 28, 28, 0.96), rgba(127, 29, 29, 0.94));
        color: #fff1f2;
    }


/* ==========================================================
   Template: appointments/appointment_tracker.html (page-appointments-appointment-tracker)
   ========================================================== */

    body.page-appointments-appointment-tracker .appointment-card{
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 16px;
        padding: 12px;
        background-color: #f9f9f9;
    }
    body.page-appointments-appointment-tracker .appointment-header{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    body.page-appointments-appointment-tracker .appointment-title{
        font-size: 15px;
        font-weight: bold;
    }
    body.page-appointments-appointment-tracker .appointment-status{
        padding: 2px 6px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: bold;
    }
    body.page-appointments-appointment-tracker .status-scheduled{
        background-color: #e3f2fd;
        color: #0d47a1;
    }
    body.page-appointments-appointment-tracker .status-in-progress{
        background-color: #e8f5e9;
        color: #1b5e20;
    }
    body.page-appointments-appointment-tracker .status-completed{
        background-color: #f5f5f5;
        color: #616161;
    }
    body.page-appointments-appointment-tracker .appointment-details{
        margin-bottom: 12px;
    }
    body.page-appointments-appointment-tracker .appointment-details p{
        margin: 4px 0;
    }
    body.page-appointments-appointment-tracker .chat-history{
        border-top: 1px solid #eee;
        padding-top: 8px;
    }
    body.page-appointments-appointment-tracker .chat-message{
        padding: 6px;
        margin-bottom: 6px;
        border-radius: 4px;
    }
    body.page-appointments-appointment-tracker .user-message{
        background-color: #e3f2fd;
        margin-right: 20%;
    }
    body.page-appointments-appointment-tracker .bot-message{
        background-color: #f1f8e9;
        margin-left: 20%;
    }
    body.page-appointments-appointment-tracker .intent-tag{
        display: inline-block;
        background-color: #ffecb3;
        color: #ff6f00;
        padding: 2px 5px;
        border-radius: 8px;
        font-size: 10px;
        margin-left: 4px;
    }
    body.page-appointments-appointment-tracker .filter-section{
        margin-bottom: 16px;
        padding: 12px;
        background-color: #f5f5f5;
        border-radius: 4px;
    }


/* ==========================================================
   Template: appointments/dashboard.html (page-appointments-dashboard)
   ========================================================== */

    /* ===========================
     1. GLOBAL VARIABLES & CONTAINER WIDTHS
     =========================== */
    body.page-appointments-dashboard{
        --primary: #02542D;
        --primary-light: #E6F4EA;
        --row-hover: #F5F5F5;
        --text: #111827;
        --muted: #6B7280;
        --radius: 1rem;
        --transition: .3s ease;
        --per-page: 8;
    }

    @keyframes appointments-dashboard--fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-appointments-dashboard{
        font-family: "Inter", sans-serif;
        background: #FAFAFA;
        color: var(--text);
        margin: 0;
        padding: 0;
    }

    /* ===========================
     2. STAT CARDS (Original)
     =========================== */
    body.page-appointments-dashboard .dashboard-container{
        padding: 16px;
        width: 100%;
        margin: 1.5rem auto;
        padding: 0 .875rem;
        animation: appointments-dashboard--fadeInUp var(--transition);
    }

    body.page-appointments-dashboard .stats-container,
body.page-appointments-dashboard .row.g-4.mb-5{
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 24px;
    }

    body.page-appointments-dashboard .stat-card{
        background: #FFF;
        border-radius: var(--radius);
        border: 2px solid transparent;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        padding: 1.25rem;
        transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        animation: appointments-dashboard--fadeInUp var(--transition);
        cursor: pointer;
        flex: 1;
        min-width: 170px;
    }

    body.page-appointments-dashboard .stat-card:hover,
body.page-appointments-dashboard .stat-card.active{
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: var(--primary);
    }

    body.page-appointments-dashboard .icon-circle-dark{
        width: 42px;
        height: 42px;
        background: var(--primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
    }

    body.page-appointments-dashboard .stat-text{
        margin-left: .875rem;
    }

    body.page-appointments-dashboard .stat-label{
        font-size: .75rem;
        text-transform: uppercase;
        color: var(--muted);
    }

    body.page-appointments-dashboard .stat-value{
        font-size: 1.3rem;
        font-weight: 700;
        color: #343a40;
    }

    /* ===========================
     3. SEARCH & SORT CONTROLS
     =========================== */
    body.page-appointments-dashboard .controls,
body.page-appointments-dashboard .links-container,
body.page-appointments-dashboard .row.align-items-center.g-3.mb-4{
        display: flex;
        flex-wrap: wrap;
        gap: .875rem;
        margin-bottom: .875rem;
    }

    body.page-appointments-dashboard .links-container{
        gap: 12px;
        margin-bottom: 24px;
    }

    body.page-appointments-dashboard .link-card{
        background-color: #f5f5f5;
        border-radius: var(--radius);
        padding: 12px;
        flex: 1;
        min-width: 170px;
        text-align: center;
        transition: background-color var(--transition);
    }

    body.page-appointments-dashboard .link-card:hover{
        background-color: #e0e0e0;
    }

    body.page-appointments-dashboard .link-card a{
        text-decoration: none;
        color: #333;
        font-weight: bold;
        display: block;
    }

    body.page-appointments-dashboard .search{
        position: relative;
        flex: 1 1 200px;
        max-width: 280px;
        animation: appointments-dashboard--fadeInUp var(--transition);
    }

    body.page-appointments-dashboard .search input{
        width: 100%;
        padding: .5rem calc(.875rem + 1.3em) .5rem 2.2rem;
        border: 1px solid var(--primary-light);
        border-radius: 7px;
        background: var(--primary-light);
        font-size: .85rem;
        color: var(--text);
        transition: border-color var(--transition), box-shadow var(--transition);
    }

    body.page-appointments-dashboard .search .bi-search{
        position: absolute;
        left: .875rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        color: var(--muted);
        transition: color var(--transition);
    }

    body.page-appointments-dashboard .search:focus-within .bi-search{
        color: var(--primary);
    }

    body.page-appointments-dashboard .sort{
        display: inline-flex;
        align-items: center;
        background: #FFF;
        border: 2px solid var(--primary);
        border-radius: 7px;
        padding: .4rem .625rem;
        color: var(--primary);
        transition: background var(--transition), color var(--transition), box-shadow var(--transition);
        cursor: pointer;
    }

    body.page-appointments-dashboard .sort:hover,
body.page-appointments-dashboard .sort:focus-within{
        background: var(--primary);
        color: #FFF;
        box-shadow: 0 2px 6px rgba(2, 84, 45, 0.2);
    }

    body.page-appointments-dashboard .sort i{
        margin-right: .5rem;
        font-size: 1.2rem;
    }

    body.page-appointments-dashboard .sort select{
        border: none;
        background: transparent;
        font-size: .95rem;
        color: currentColor;
        outline: none;
        cursor: pointer;
    }

    /* ===========================
     4. TABLE & APPOINTMENTS
     =========================== */
    body.page-appointments-dashboard .table-responsive,
body.page-appointments-dashboard .recent-appointments{
        overflow-x: auto;
        animation: appointments-dashboard--fadeInUp var(--transition);
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    body.page-appointments-dashboard .custom-customer-table{
        width: 100%;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        border-collapse: collapse;
    }

    body.page-appointments-dashboard .custom-customer-table thead{
        background: var(--primary);
    }

    body.page-appointments-dashboard .custom-customer-table th,
body.page-appointments-dashboard .custom-customer-table td{
        padding: .75rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #F1F1F1;
    }

    body.page-appointments-dashboard .custom-customer-table th{
        color: #fff;
        font-weight: 600;
        font-size: .72rem;
        letter-spacing: .045em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
        border-bottom: none;
    }

    body.page-appointments-dashboard .custom-customer-table tbody tr:hover{
        background: rgba(2,84,45,.04);
    }

    body.page-appointments-dashboard .custom-customer-table tbody tr{
        border-bottom: 1px solid #f1f1f1;
    }

    body.page-appointments-dashboard .custom-customer-table{
        font-size: .8125rem;
    }

    body.page-appointments-dashboard .custom-customer-table td a{
        color: var(--primary);
        text-decoration: none;
    }

    body.page-appointments-dashboard .appointment-row{
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    body.page-appointments-dashboard .appointment-row:last-child{
        border-bottom: none;
    }

    body.page-appointments-dashboard .appointment-cell{
        flex: 1;
        padding: 5px 10px;
    }

    body.page-appointments-dashboard .status-badge{
        display: inline-block;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 12px;
    }

    body.page-appointments-dashboard .status-scheduled{
        background-color: #e3f2fd;
        color: #0d47a1;
    }

    body.page-appointments-dashboard .status-in-progress{
        background-color: #e8f5e9;
        color: #1b5e20;
    }

    body.page-appointments-dashboard .status-completed{
        background-color: #f5f5f5;
        color: #616161;
    }

    /* ===========================
     5. PAGINATION FOOTER
     =========================== */
    body.page-appointments-dashboard .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        margin-top: .5rem;
        font-size: .9rem;
        color: var(--text);
    }

    body.page-appointments-dashboard .pagination span{
        margin: 0 .25rem;
        padding: .4rem .75rem;
        border-radius: 6px;
        transition: background var(--transition), color var(--transition), transform var(--transition);
        cursor: pointer;
    }

    body.page-appointments-dashboard .pagination .active{
        background: var(--primary);
        color: #FFF;
        cursor: default;
    }

    body.page-appointments-dashboard .pagination span:hover:not(.active):not(.disabled){
        background: var(--primary);
        color: #FFF;
        transform: translateY(-2px);
    }

    body.page-appointments-dashboard .pagination .disabled{
        color: #CCC;
        cursor: default;
    }

    /* ===========================
     6. EXTRA-SMALL (≤576px) “CARD” TABLE LAYOUT
     =========================== */
    @media (max-width: 576px) {

        body.page-appointments-dashboard .controls,
body.page-appointments-dashboard .links-container,
body.page-appointments-dashboard .search,
body.page-appointments-dashboard .sort{
            flex: 1 1 100%;
            max-width: 100%;
            flex-direction: column;
        }

        body.page-appointments-dashboard .custom-customer-table thead{
            display: none;
        }

        body.page-appointments-dashboard .custom-customer-table,
body.page-appointments-dashboard .custom-customer-table tbody,
body.page-appointments-dashboard .custom-customer-table tr,
body.page-appointments-dashboard .custom-customer-table td{
            display: block;
            width: 100%;
        }

        body.page-appointments-dashboard .custom-customer-table tr{
            margin-bottom: 1.5rem;
            background: #FFF;
            border-radius: var(--radius);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            padding-bottom: .75rem;
        }

        body.page-appointments-dashboard .custom-customer-table td{
            padding: .75rem 1rem;
            text-align: right;
            position: relative;
            border: none;
            border-bottom: 1px solid #EEE;
        }

        body.page-appointments-dashboard .custom-customer-table td::before{
            content: attr(data-label);
            position: absolute;
            left: 1rem;
            top: .75rem;
            font-weight: 500;
            text-transform: uppercase;
            color: var(--muted);
        }

        body.page-appointments-dashboard .table-footer{
            flex-direction: column;
            gap: .5rem;
        }
    }

    /* ===========================
     7. LARGE SCREEN PADDING ADJUSTMENTS
     =========================== */
    @media (min-width: 1200px) {
        body.page-appointments-dashboard .dashboard-container{
            padding: 0;
        }
    }


/* ==========================================================
   Template: base.html (global)
   ========================================================== */

        .placeholder {
    background-color: none!important;
  
}
        /* Ensure custom dropdown placeholders show muted text and no background.
           This is a safe, specific override for dropdowns using the custom UI. */
        .custom-dropdown .dropdown-trigger .selected-text.placeholder,
        .bp-main .custom-dropdown .dropdown-trigger .selected-text.placeholder,
        .dropdown-trigger .selected-text.placeholder {
            color: var(--ink-400) !important;
            background: transparent !important;
            background-color: transparent !important;
            box-shadow: none !important;
        }

        .table-empty-state-row:hover {
            transform: none !important;
            box-shadow: none !important;
            cursor: default !important;
            background: inherit !important;
        }

        .table-empty-state-cell {
            padding: 0 !important;
            text-align: center !important;
            vertical-align: middle !important;
        }

        .table-empty-state-content {
            min-height: 260px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 48px 16px;
            box-sizing: border-box;
        }

        .table-empty-state-content.compact {
            min-height: auto;
            padding: 24px 16px;
        }

        .table-empty-state-icon {
            display: block;
            font-size: 3rem;
            line-height: 1;
            margin-bottom: 16px;
            color: var(--brand-primary);
        }

        .table-empty-state-title {
            margin: 0 0 8px;
            font-size: 1.25rem;
            font-weight: var(--font-weight-semibold);
            color: var(--ink-700);
        }

        .table-empty-state-desc {
            margin: 0;
            color: var(--ink-500);
        }

        .delegated-banner {
            display: none;
            align-items: center;
            gap: .75rem;
            padding: .7rem 1rem;
            color: #533800;
            background: #fff4cc;
            border-bottom: 1px solid #e6c85c;
            font-size: .82rem;
            font-weight: 600;
        }
        .delegated-banner.show { display: flex; }
        .delegated-banner .btn { margin-left: auto; min-height: 38px; }

        :root {
            /* Brand Colors */
            --brand-primary: #02542D;
            --brand-secondary: #013a1f;
            --brand-tertiary: #0b4426;
            --brand-quaternary: #064f2a;
            --brand-light: #0e5a36;
            --brand-accent: #9CFCCB;
            --brand-accent-vibrant: #7CF5A3;
            --active-indicator: #C6F68C;

            /* Neutrals */
            --ink-900: #0f172a;
            --ink-800: #1e293b;
            --ink-700: #334155;
            --ink-600: #475569;
            --ink-500: #64748b;
            --ink-400: #94a3b8;
            --ink-300: #cbd5e1;
            --ink-200: #e2e8f0;
            --ink-100: #f1f5f9;
            --ink-50: #f8fafc;

            /* Surfaces */
            --surface-primary: #fff;
            --surface-secondary: #f8fafc;
            --surface-tertiary: #f1f5f9;

            /* Safe Areas */
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
            --safe-right: env(safe-area-inset-right, 0px);

            /* Sidebar */
            --sidebar-bg: linear-gradient(145deg, var(--brand-secondary) 0%, var(--brand-primary) 35%, var(--brand-tertiary) 100%);
            --sidebar-text: rgba(255, 255, 255, .95);
            --sidebar-text-muted: rgba(255, 255, 255, .72);
            --sidebar-text-soft: rgba(255, 255, 255, .5);
            --sidebar-divider: rgba(255, 255, 255, .08);
            --sidebar-hover-bg: rgba(255, 255, 255, .10);
            --sidebar-hover-border: rgba(255, 255, 255, .18);
            --sidebar-hover-shadow: rgba(0, 0, 0, .25);
            --sidebar-active-bg: rgba(255, 255, 255, .15);
            --sidebar-active-border: rgba(255, 255, 255, .22);
            --sidebar-active-shadow: rgba(0, 0, 0, .28);

            /* Typography */
            --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            --font-weight-extrabold: 800;

            /* Dimensions - Scaled for 1700x956 at 100% zoom */
            --sidebar-width-expanded: 240px;
            --sidebar-width-collapsed: 64px;

            /* Motion */
            --easing: cubic-bezier(.4, 0, .2, 1);
            --fast: .18s var(--easing);
            --base: .28s var(--easing);
            --slow: .38s var(--easing);
        }

        /* Base */
        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%;
            margin: 0;
            font-family: var(--font-family-primary);
            font-weight: var(--font-weight-medium);
            color: var(--ink-700);
            background: var(--surface-secondary);
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        @supports(-webkit-touch-callout:none) {

            html,
            body {
                height: -webkit-fill-available
            }
        }

        @media (max-width:768px) {

            html,
            body {
                height: auto;
                min-height: 100dvh;
                overflow: auto
            }
        }

        /* Skip link for a11y */
        .skip-link {
            position: absolute;
            left: -9999px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        .skip-link:focus {
            position: fixed;
            left: 16px;
            top: 12px;
            width: auto;
            height: auto;
            padding: .5rem .75rem;
            z-index: 2000;
            background: #fff;
            color: var(--brand-primary);
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
        }

        .layout-wrapper {
            display: flex;
            height: 100%;
            min-height: 100dvh;
            padding-top: var(--safe-top);
            padding-bottom: var(--safe-bottom);
        }

        /* Sidebar */
        #sidebar.sidebar {
            position: relative;
            width: var(--sidebar-width-expanded);
            min-width: var(--sidebar-width-expanded);
            height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
            background: var(--sidebar-bg);
            color: var(--sidebar-text);
            display: flex;
            flex-direction: column;
            padding-left: max(0px, var(--safe-left));
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1000;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 4px 0 24px -2px rgba(0, 0, 0, .12), 8px 0 40px -4px rgba(0, 0, 0, .08);
            transition: width var(--base), min-width var(--base), transform var(--base), border-radius var(--base);
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, .2) transparent;
            will-change: width, min-width, transform;
        }

        #sidebar.sidebar::-webkit-scrollbar {
            width: 6px
        }

        #sidebar.sidebar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .15);
            border-radius: 3px
        }

        #sidebar.sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, .25)
        }

        /* Collapsed (desktop) */
        .sidebar.collapsed {
            width: var(--sidebar-width-collapsed) !important;
            min-width: var(--sidebar-width-collapsed) !important
        }

        .sidebar-header {
            padding: 1rem .875rem .625rem .875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid var(--sidebar-divider);
            margin-bottom: .375rem;
            transition: all var(--base);
        }

        .sidebar-header h2 {
            margin: 0;
            font-size: 0.95rem;
            font-weight: var(--font-weight-extrabold);
            color: var(--sidebar-text);
            letter-spacing: -.02em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all var(--base);
        }

        .menu-label {
            font-size: .6rem;
            font-weight: var(--font-weight-bold);
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--sidebar-text-soft);
            padding: .75rem 1rem .375rem;
            margin-top: .2rem;
            transition: opacity var(--base);
        }

        .nav.flex-column {
            width: 100%;
            padding: 0 .625rem;
            gap: .2rem
        }

        .nav-item {
            position: relative
        }

        .nav-link {
            position: relative;
            display: flex;
            align-items: center;
            gap: .7rem;
            color: var(--sidebar-text-muted);
            background: transparent;
            border: 1px solid transparent;
            border-radius: 10px;
            padding: .7rem .875rem;
            margin: 0;
            font-weight: var(--font-weight-semibold);
            font-size: .8125rem;
            text-decoration: none;
            overflow: hidden;
            transition: background var(--fast), color var(--fast), border-color var(--fast),
                        box-shadow var(--fast), transform var(--fast);
            -webkit-tap-highlight-color: transparent;
            text-rendering: optimizeLegibility;
        }

        .nav-link i {
            font-size: 0.95rem;
            min-width: 18px;
            text-align: center;
            color: inherit;
            transition: transform var(--fast);
            flex-shrink: 0;
        }

        .nav-link span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: opacity var(--base);
        }

        /* ── Hover ── */
        @media (hover:hover) and (pointer:fine) {
            .nav-link:hover {
                color: var(--sidebar-text) !important;
                background: var(--sidebar-hover-bg) !important;
                border-color: var(--sidebar-hover-border) !important;
                box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 4px 12px var(--sidebar-hover-shadow) !important;
                transform: translateX(2px);
            }
            .nav-link:hover i { transform: scale(1.08); }
        }

        /* ── Press feedback ── */
        .nav-link:active {
            transform: translateX(1px) scale(.98);
            box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 2px 6px rgba(0,0,0,.16) !important;
        }

        /* ── Active / current page ── */
        .nav-link.active {
            color: var(--sidebar-text) !important;
            background: var(--sidebar-active-bg) !important;
            border-color: var(--sidebar-active-border) !important;
            border-left: 4px solid #f4f7f6 !important;
            padding-left: calc(.875rem - 3px) !important;
            box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 4px 14px var(--sidebar-active-shadow) !important;
            transform: none;
        }
        .nav-link.active i { transform: none; }

        .menu-badge {
            margin-left: auto;
            background: var(--surface-primary);
            color: var(--brand-primary);
            font-weight: var(--font-weight-extrabold);
            font-size: .6rem;
            line-height: 1;
            padding: .2rem .4rem;
            border-radius: 999px;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 1px 3px rgba(0, 0, 0, .15);
            transition: all var(--base)
        }

        .sidebar hr {
            border: none;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--sidebar-divider) 25%, var(--sidebar-divider) 75%, transparent 100%);
            margin: 1rem .875rem;
            opacity: .85;
        }

        /* Collapsed styles */
        .sidebar.collapsed .sidebar-header {
            justify-content: center;
            padding-left: .5rem;
            padding-right: .5rem
        }

        .sidebar.collapsed .sidebar-header h2 {
            font-size: 1rem;
            text-align: center
        }

        .sidebar.collapsed .menu-label {
            opacity: 0;
            padding-left: .5rem;
            padding-right: .5rem;
            text-align: center
        }

        .sidebar.collapsed .nav.flex-column {
            padding: 0 .5rem
        }

        .sidebar.collapsed .nav-link {
            justify-content: center;
            padding: .875rem .5rem;
            gap: 0;
        }

        .sidebar.collapsed .nav-link span,
        .sidebar.collapsed .menu-badge {
            opacity: 0;
            width: 0;
            overflow: hidden
        }

        /* Main column */
        .flex-fill {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: hidden;
            padding-right: max(0px, var(--safe-right));
            margin-left: 0;
            transition: margin-left var(--base)
        }

        /* Top Navbar */
        .navbar {
            position: sticky;
            top: 0;
            z-index: 998;
            background: rgba(255, 255, 255, .96);
            backdrop-filter: blur(18px) saturate(180%);
            -webkit-backdrop-filter: blur(18px) saturate(180%);
            border-bottom: 1px solid var(--ink-200);
            color: var(--ink-600);
            font-weight: var(--font-weight-semibold);
            font-size: 0.9rem;
            padding-top: calc(.4rem + var(--safe-top));
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            transition: box-shadow var(--base), border-color var(--base);
        }

        .navbar.is-scrolled {
            border-color: rgba(2, 84, 45, .12);
            box-shadow: 0 6px 22px rgba(2, 84, 45, .08), 0 1px 2px rgba(0, 0, 0, .06);
        }

        .navbar .container-fluid {
            gap: .625rem;
            min-width: 0
        }

        #toggleSidebarBtn {
            position: relative;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--brand-primary);
            border: 1px solid transparent;
            background: rgba(2, 84, 45, .04);
            padding: .4rem;
            border-radius: 12px;
            overflow: hidden;
            transition: transform var(--fast), background var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast)
        }

        #toggleSidebarBtn::after {
            content: "";
            position: absolute;
            inset: 8px;
            border-radius: 999px;
            background: currentColor;
            opacity: 0;
            transform: scale(.65);
            transition: opacity var(--fast), transform var(--fast);
        }

        #toggleSidebarBtn .sidebar-toggle-icon {
            position: relative;
            z-index: 1;
            line-height: 1;
            transition: opacity var(--fast), transform var(--fast);
        }

        #toggleSidebarBtn:hover {
            background: rgba(2, 84, 45, .08);
            border-color: rgba(2, 84, 45, .12);
            transform: scale(1.05)
        }

        #toggleSidebarBtn:hover::after {
            opacity: .08;
            transform: scale(1);
        }

        #toggleSidebarBtn.is-collapsed {
            background: rgba(2, 84, 45, .08);
            border-color: rgba(2, 84, 45, .14);
        }

        #toggleSidebarBtn.is-drawer-open {
            color: #fff;
            background: var(--brand-primary);
            border-color: var(--brand-primary);
            box-shadow: 0 8px 22px rgba(2, 84, 45, .18);
        }

        #toggleSidebarBtn.is-drawer-open:hover {
            background: var(--brand-secondary);
            border-color: var(--brand-secondary);
        }

        #toggleSidebarBtn.is-icon-swapping .sidebar-toggle-icon {
            opacity: .55;
            transform: scale(.72) rotate(-8deg);
        }

        .navbar .ms-auto {
            display: flex;
            align-items: center;
            gap: .625rem;
            flex-wrap: wrap;
            min-width: 0
        }

        /* Content Area */
        .content-area {
            flex: 1;
            overflow: auto;
            padding: 1.25rem 1rem;
            background: var(--surface-secondary);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, .15) transparent;
            animation: contentFade .28s var(--easing);
        }

        .content-area::-webkit-scrollbar {
            width: 8px
        }

        .content-area::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, .15);
            border-radius: 4px
        }

        .content-area::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, .25)
        }

        @keyframes contentFade {
            from {
                opacity: 0;
                transform: translateY(4px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        /* Buttons */
        .btn-outline-success {
            border: 1px solid var(--brand-primary);
            color: var(--brand-primary);
            background: transparent;
            border-radius: 8px;
            font-weight: var(--font-weight-semibold);
            transition: transform var(--fast), box-shadow var(--fast), color var(--fast), background var(--fast), border-color var(--fast)
        }

        @media(hover:hover) {
            .btn-outline-success:hover {
                background: var(--brand-primary);
                color: #fff !important;
                border-color: var(--brand-primary);
                transform: translateY(-2px) scale(1.02);
                box-shadow: 0 10px 30px rgba(2, 84, 45, .16), 0 4px 12px rgba(2, 84, 45, .10)
            }
        }

        /* User dropdown — immune to page-level .dropdown-menu overrides */
        .dropdown-menu.user-dropdown {
            display: none;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
            position: fixed !important;
            left: auto !important;
            z-index: 99999 !important;
            background: var(--surface-primary) !important;
            border-radius: 14px !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .10), 0 4px 16px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04) !important;
            min-width: 240px !important;
            overflow: hidden !important;
            border: none !important;
            padding: 0 !important;
            transition: none !important;
            text-align: left !important;
        }
        .dropdown-menu.user-dropdown.show {
            display: block !important;
        }
        .dropdown-menu.user-dropdown .user-dropdown-item {
            display: block !important;
            text-align: left !important;
            padding: .875rem 1rem !important;
        }
        .dropdown-menu.user-dropdown .user-dropdown-label {
            display: block !important;
            text-align: left !important;
        }
        .dropdown-menu.user-dropdown .user-value {
            display: block !important;
            text-align: left !important;
        }
        .dropdown-menu.user-dropdown .user-dropdown-footer {
            text-align: center !important;
        }

        .user-dropdown-item {
            padding: .875rem 1rem;
            border-bottom: 1px solid var(--ink-100);
            background: transparent;
            transition: background var(--fast)
        }

        .user-dropdown-item:last-child {
            border-bottom: none
        }

        .user-dropdown-item:hover {
            background: var(--surface-tertiary)
        }

        .user-dropdown-label {
            font-size: .65rem;
            font-weight: var(--font-weight-bold);
            color: var(--brand-primary);
            text-transform: uppercase;
            letter-spacing: .05em;
            margin-bottom: .2rem
        }

        .user-value {
            font-size: .875rem;
            font-weight: var(--font-weight-medium);
            color: var(--ink-700)
        }

        .user-dropdown-footer {
            padding: .875rem 1rem;
            background: var(--surface-tertiary);
            text-align: center
        }

        .user-dropdown .btn {
            background: var(--brand-primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: .625rem 1.25rem;
            font-weight: var(--font-weight-semibold);
            transition: transform var(--fast), background var(--fast)
        }

        .user-dropdown .btn:hover {
            background: var(--brand-secondary);
            transform: translateY(-1px)
        }

        /* User avatar */
        .user-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            color: #fff;
            overflow: hidden;
            flex-shrink: 0;
        }

        .user-avatar i {
            font-size: 0.95rem
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        /* Scroll progress (top bar) */
        #scrollProgress {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background: linear-gradient(90deg, rgba(2, 84, 45, .15), rgba(2, 84, 45, .15));
            overflow: hidden;
        }

        #scrollProgress::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: var(--scroll-progress, 0%);
            background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
            transition: width var(--fast);
        }

        /* Notifications */
        .notification-dropdown .btn {
            position: relative;
            color: var(--brand-primary);
            background: transparent;
            border: none;
            padding: .5rem;
            border-radius: 10px;
            transition: background var(--fast), transform var(--fast);
        }

        .notification-dropdown .btn:hover {
            background: rgba(2, 84, 45, .08);
            transform: scale(1.05);
        }

        .notification-dropdown .btn:active {
            transform: scale(.95);
        }

        #notification-count {
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: .6rem;
            font-weight: var(--font-weight-bold);
            min-width: 17px;
            height: 17px;
            line-height: 1;
            display: none;
            align-items: center;
            justify-content: center;
            background: #dc3545;
            color: #fff;
            border-radius: 50%;
            padding: 0 .2rem;
            box-shadow: 0 0 0 2px var(--surface-primary), 0 2px 8px rgba(220, 53, 69, .4);
            animation: notificationPulse 2s ease-in-out infinite;
        }

        #notification-count.show {
            display: flex
        }

        @keyframes notificationPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 2px var(--surface-primary), 0 2px 8px rgba(220, 53, 69, .4);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 0 2px var(--surface-primary), 0 3px 12px rgba(220, 53, 69, .6);
            }
        }

        .notification-dropdown .dropdown-menu {
            border: none;
            padding: 0;
            min-width: 290px;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .1), 0 4px 16px rgba(0, 0, 0, .08);
            background: var(--surface-primary)
        }

        .notification-card-header {
            background: var(--brand-primary);
            color: #fff;
            padding: .875rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: var(--font-weight-semibold)
        }

        .mark-all-btn {
            background: transparent;
            border: none;
            color: #fff;
            font-size: .75rem;
            padding: .2rem .4rem;
            border-radius: 5px;
            transition: background var(--fast)
        }

        .mark-all-btn:hover {
            background: rgba(255, 255, 255, .1)
        }

        .notification-list {
            max-height: 270px;
            overflow-y: auto
        }

        .notification-item {
            padding: .875rem 1rem;
            border-bottom: 1px solid var(--ink-100);
            display: flex;
            justify-content: space-between;
            gap: .625rem;
            cursor: pointer;
            transition: background var(--fast), border-left var(--fast);
            background: transparent
        }

        .notification-item:last-child {
            border-bottom: none
        }

        .notification-item.unseen {
            background: rgba(2, 84, 45, .05);
            border-left: 3px solid var(--brand-primary)
        }

        .notification-item:hover {
            background: rgba(2, 84, 45, .08)
        }

        .notification-item .title {
            font-weight: var(--font-weight-semibold);
            color: var(--brand-primary);
            font-size: .8125rem
        }

        .notification-item .phone {
            font-size: .75rem;
            font-weight: var(--font-weight-semibold);
            color: var(--ink-700, var(--ink-600));
            display: flex;
            align-items: center;
            gap: .3rem;
            margin: .15rem 0
        }

        .notification-item .message {
            font-size: .75rem;
            color: var(--ink-600);
            line-height: 1.4
        }

        .notification-item .time {
            font-size: .65rem;
            color: var(--ink-500);
            white-space: nowrap
        }

        /* Google Translate - Custom Dropdown */
        #google_translate_element .goog-te-gadget-icon,
        iframe.skiptranslate,
        .VIpgJd-ZVi9od-aZ2wEeP,
        #goog-gt-tt {
            display: none !important
        }

        #google_translate_element .goog-te-gadget {
            display: none !important;
        }

        /* Hide Google Translate banner/frame and prevent it from shifting layout */
        .goog-te-banner-frame.skiptranslate,
        .goog-te-balloon-frame.skiptranslate,
        iframe.goog-te-banner-frame {
            display: none !important;
            height: 0 !important;
            visibility: hidden !important;
        }

        /* Force no top offset even if Google injects inline styles */
        html.googified, html, body {
            margin-top: 0 !important;
            padding-top: 0 !important;
            top: 0 !important;
        }

        /* Hide original Google Translate select */
        #google_translate_element select.goog-te-combo {
            display: none !important;
        }

        /* Custom Language Dropdown */
        .language-dropdown {
            position: relative;
            min-width: 140px;
        }

        .language-dropdown-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 6px 10px;
            background: var(--surface-primary);
            border: 1px solid var(--ink-200);
            border-radius: 8px;
            color: var(--brand-primary);
            font-weight: var(--font-weight-semibold);
            font-size: .75rem;
            cursor: pointer;
            transition: var(--fast);
            outline: none;
            width: 100%;
        }

        .language-dropdown-trigger:hover {
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 2px rgba(2, 84, 45, .12);
        }

        .language-dropdown-trigger:focus {
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 3px rgba(2, 84, 45, .12);
        }

        .language-dropdown-trigger.active {
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 2px rgba(2, 84, 45, .12);
            background: rgba(2, 84, 45, .05);
        }

        .language-dropdown-icon {
            font-size: .875rem;
            color: var(--brand-primary);
        }

        .language-dropdown-arrow {
            transition: var(--fast);
            color: var(--brand-primary);
            font-size: .75rem;
        }

        .language-dropdown-trigger.active .language-dropdown-arrow {
            transform: rotate(180deg);
        }

        .language-dropdown-menu {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            background: var(--surface-primary);
            border: 1px solid var(--ink-200);
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .1), 0 4px 16px rgba(0, 0, 0, .08);
            z-index: 1000;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: var(--fast);
            min-width: 155px;
        }

        .language-dropdown-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .language-dropdown-option {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            color: var(--ink-700);
            font-size: .75rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--fast);
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }

        .language-dropdown-option:hover {
            background: rgba(2, 84, 45, .08);
            color: var(--brand-primary);
        }

        .language-dropdown-option.selected {
            background: rgba(2, 84, 45, .1);
            color: var(--brand-primary);
            font-weight: var(--font-weight-bold);
        }

        .language-dropdown-option:focus {
            outline: 2px solid var(--brand-primary);
            outline-offset: -2px;
            background: rgba(2, 84, 45, .08);
        }

        /* Mobile overlay */
        #sidebarOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .4);
            backdrop-filter: blur(4px);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--base), visibility var(--base);
        }

        #sidebarOverlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* Accessibility & motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important
            }
        }

        .nav-link:focus-visible {
            outline: 2px solid var(--active-indicator);
            outline-offset: 2px;
            border-radius: 12px
        }

        body.app-shell #sidebar.sidebar .nav-link,
        body.app-shell #sidebar.sidebar .nav-link:visited {
            color: var(--sidebar-text-muted) !important;
        }

        body.app-shell #sidebar.sidebar .nav-link:focus {
            color: var(--sidebar-text-muted) !important;
            background: transparent !important;
            border-color: transparent !important;
            outline: none;
            box-shadow: none !important;
        }

        body.app-shell #sidebar.sidebar .nav-link:hover,
        body.app-shell #sidebar.sidebar .nav-link:active,
        body.app-shell #sidebar.sidebar .nav-link:focus-visible {
            color: var(--sidebar-text) !important;
            background: var(--sidebar-hover-bg) !important;
            border-color: var(--sidebar-hover-border) !important;
            outline: none;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 4px 12px var(--sidebar-hover-shadow) !important;
        }

        body.app-shell #sidebar.sidebar .nav-link.active,
        body.app-shell #sidebar.sidebar .nav-link.active:focus,
        body.app-shell #sidebar.sidebar .nav-link.active:hover,
        body.app-shell #sidebar.sidebar .nav-link.active:active,
        body.app-shell #sidebar.sidebar .nav-link.active:focus-visible {
            color: var(--sidebar-text) !important;
            background: var(--sidebar-active-bg) !important;
            border-color: var(--sidebar-active-border) !important;
            border-left: 4px solid #f4f7f6 !important;
            outline: none;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 4px 14px var(--sidebar-active-shadow) !important;
        }

        /* Responsive */
        @media (min-width:993px) {
            .flex-fill {
                margin-left: 0
            }
        }

        @media (max-width:992px) {
            #sidebar.sidebar {
                position: fixed;
                left: 0;
                top: 0;
                width: min(90vw, 320px);
                min-width: 280px;
                max-width: 90vw;
                transform: translateX(-100%);
                border-radius: 0 20px 20px 0;
                z-index: 1001;
            }

            /* Force navbar to stay fixed on mobile and adjust content spacing */
            .navbar {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                width: 100%;
            }

            /* Content offset below fixed navbar */
            .content-area {
                margin-top: var(--topbar-height, 64px);
            }

            #sidebar.sidebar.show {
                transform: translateX(0);
                box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 16px 0 40px -4px rgba(0, 0, 0, .15), 32px 0 64px -8px rgba(0, 0, 0, .1);
            }

            .sidebar.collapsed {
                width: min(90vw, 320px) !important;
                min-width: 280px !important
            }

            .sidebar.collapsed .sidebar-header h2 {
                opacity: 1;
                width: auto;
                font-size: 1.125rem
            }

            .sidebar.collapsed .menu-label {
                opacity: 1;
                text-align: left;
                padding: 1rem 1.25rem .5rem
            }

            .sidebar.collapsed .nav.flex-column {
                padding: 0 .75rem
            }

            .sidebar.collapsed .nav-link {
                justify-content: flex-start;
                padding: .875rem 1rem;
                gap: .875rem
            }

            .sidebar.collapsed .nav-link span,
            .sidebar.collapsed .menu-badge {
                opacity: 1;
                width: auto
            }
        }

        @media (max-width:480px) {
            .nav-link {
                padding: .75rem .875rem;
                gap: .625rem;
                font-size: .9375rem
            }

            .nav-link i {
                min-width: 18px;
                font-size: 1rem
            }

            .navbar {
                font-size: .9375rem
            }

            .navbar .ms-auto {
                gap: .5rem
            }

            .content-area {
                padding: 1rem .875rem
            }

            .sidebar-header {
                padding: 1rem .875rem .625rem
            }

            .menu-label {
                padding: .875rem 1rem .375rem
            }
        }

        @media (max-width:360px) {
            .nav-link {
                padding: .6875rem .75rem;
                gap: .5rem
            }

            .nav-link i {
                min-width: 16px
            }

            .navbar {
                font-size: .9375rem
            }
        }

        /* HiDPI */
        @media (-webkit-min-device-pixel-ratio:2),
        (min-resolution:192dpi) {
            .user-avatar {
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges
            }
        }

        /* ═══════════════════════════════════════════════════════
           GLOBAL TABLE SYSTEM — matches brand theme across all pages
           ═══════════════════════════════════════════════════════ */

        /* Responsive scroll wrapper */
        .wb-table-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: .875rem;
            border: 1px solid var(--ink-200);
            background: var(--surface-primary);
            box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
        }

        /* Global floating table container — applies to all pages using .table-container */
        .content-area .table-container {
            background: var(--surface-primary);
            border: 1px solid var(--ink-200);
            border-radius: .875rem;
            box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
            overflow: hidden;
        }

        /* Base table reset for all tables inside content-area */
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) {
            width: 100%;
            border-collapse: collapse;
            font-size: .8125rem;
            color: var(--ink-700);
            line-height: 1.5;
            margin: 0;
        }

        /* thead */
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) thead tr {
            background: none;
        }
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) thead th {
            background: var(--surface-primary);
            color: var(--brand-primary);
            font-family: var(--font-family-primary);
            font-weight: var(--font-weight-bold);
            font-size: .72rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            text-align: center;
            padding: .75rem 1rem;
            white-space: nowrap;
            border: none;
            border-bottom: 2px solid var(--ink-200);
            vertical-align: middle;
            position: sticky;
            top: 0;
            /* z-index: 2; */
        }
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) thead th:first-child {
            border-radius: .75rem 0 0 0;
        }
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) thead th:last-child {
            border-radius: 0 .75rem 0 0;
        }

        /* tbody rows */
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr {
            border-bottom: 1px solid var(--ink-100);
            transition: background var(--fast), box-shadow var(--fast);
        }
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr:last-child {
            border-bottom: none;
        }
        @media (hover:hover) {
            .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr:hover {
                background: rgba(2, 84, 45, .04);
                box-shadow: inset 3px 0 0 var(--brand-primary);
            }
        }
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody td {
            padding: .75rem 1rem;
            vertical-align: middle;
            color: #4b5563;
            border: none;
            font-size: .8125rem;
            font-weight: 400;
            white-space: normal;
            word-break: break-word;
            line-height: 1.45;
        }

        /* Stripe on even rows for .table-striped */
        .content-area table.table-striped:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr:nth-child(even) {
            background: var(--surface-secondary);
        }

        /* Override Bootstrap table-bordered: use subtle inner borders */
        .content-area table.table-bordered:not([class*="fc-"]):not(.dataTable):not(.dt-table) td,
        .content-area table.table-bordered:not([class*="fc-"]):not(.dataTable):not(.dt-table) th {
            border: none;
            border-right: 1px solid var(--ink-100);
        }
        .content-area table.table-bordered:not([class*="fc-"]):not(.dataTable):not(.dt-table) td:last-child,
        .content-area table.table-bordered:not([class*="fc-"]):not(.dataTable):not(.dt-table) th:last-child {
            border-right: none;
        }

        /* tfoot */
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tfoot tr {
            background: var(--surface-tertiary);
            border-top: 2px solid var(--ink-200);
        }
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tfoot td,
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tfoot th {
            padding: .625rem 1rem;
            font-weight: var(--font-weight-semibold);
            color: var(--ink-700);
            border: none;
            font-size: .8125rem;
        }

        /* ── Table section title (centered heading above a table) ── */
        .table-section-title {
            text-align: center !important;
            font-family: var(--font-family-primary);
            font-weight: var(--font-weight-semibold);
            font-size: 1rem;
            color: var(--ink-800);
            letter-spacing: .01em;
            margin-bottom: .75rem;
            padding-bottom: .5rem;
            border-bottom: 2px solid var(--brand-primary);
            display: block;
        }

        /* ── Column alignment helpers (add class to th AND td) ── */
        .content-area table th.col-right,
        .content-area table td.col-right  { text-align: right !important; }
        .content-area table th.col-center,
        .content-area table td.col-center { text-align: center !important; }
        /* action columns: centered, buttons don't wrap */
        .content-area table th.col-action,
        .content-area table td.col-action {
            text-align: center !important;
            white-space: nowrap;
        }
        /* number / price columns: right-aligned, no wrap */
        .content-area table th.col-num,
        .content-area table td.col-num {
            text-align: right !important;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        /* Bootstrap badge colors — keep as-is, just ensure vertical alignment */
        .content-area table td .badge {
            vertical-align: middle;
            white-space: nowrap;
        }

        /* Action buttons in table cells — no wrap so they sit inline */
        .content-area table td .btn,
        .content-area table td button {
            white-space: nowrap;
        }
        /* Group of action buttons — gap between them */
        .content-area table td .btn + .btn,
        .content-area table td button + button {
            margin-left: .25rem;
        }

        /* Empty state cell (colspan rows) */
        .content-area table td.table-empty-state-cell,
        .content-area table td[colspan]:only-child {
            text-align: center !important;
            color: var(--ink-500);
            font-size: .875rem;
            white-space: normal !important;
        }

        /* agent-table override — picks up global styles cleanly */
        .agent-table {
            border-collapse: collapse;
            width: 100%;
        }
        .agent-table thead th {
            background: var(--surface-primary) !important;
            color: var(--brand-primary) !important;
            border: none !important;
            border-bottom: 2px solid var(--ink-200) !important;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            text-align: center !important;
            padding: .75rem 1rem;
            white-space: nowrap;
            vertical-align: middle;
        }
        .agent-table tbody tr {
            border-bottom: 1px solid var(--ink-100);
            transition: background var(--fast);
        }
        .agent-table tbody tr:last-child { border-bottom: none; }
        .agent-table tbody tr:hover { background: rgba(2,84,45,.04); }
        .agent-table tbody td {
            border: none;
            padding: .75rem 1rem;
            vertical-align: middle;
            font-size: .8125rem;
            font-weight: 400;
            color: var(--ink-600);
            white-space: normal;
            word-break: break-word;
        }

        /* Table polish: centered titles and consistently aligned table content */
        .content-area caption,
        .content-area .table-section-title,
        .content-area .table-title,
        .content-area .variant-table-caption {
            width: 100%;
            text-align: center !important;
            justify-content: center !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .content-area .table-subtitle,
        .content-area .variant-table-note {
            display: block;
            width: 100%;
            text-align: center !important;
        }

        .content-area .simple-page-header {
            justify-content: center !important;
            text-align: center !important;
        }

        .content-area .simple-page-title,
        .content-area .simple-page-subtitle {
            text-align: center !important;
        }

        .content-area .table-header {
            text-align: center !important;
        }

        .content-area .table-header-row {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            align-items: center !important;
            gap: .75rem !important;
            text-align: center !important;
        }

        .content-area .table-header-row > :not(.table-actions):first-child {
            grid-column: 2;
            justify-self: center;
            text-align: center !important;
        }

        .content-area .table-header-row > .table-actions {
            grid-column: 3;
            justify-self: end;
        }

        .content-area .table-header > .table-title {
            text-align: center !important;
            justify-content: center !important;
        }

        .content-area :is(.wb-table-wrap, .table-responsive, .table-wrapper, .table-scroll-wrapper) {
            border-radius: .875rem;
        }

        .content-area :is(.table-container, .data-table, .table-card, .variant-table-shell) {
            border-radius: .875rem;
        }

        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) thead th {
            background: var(--surface-primary) !important;
            color: var(--brand-primary, #02542D) !important;
            font-weight: 700 !important;
            letter-spacing: .06em !important;
            border-bottom: 2px solid var(--ink-200) !important;
            text-align: center !important;
            vertical-align: middle !important;
        }

        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody td,
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tfoot td,
        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tfoot th {
            font-weight: 400 !important;
            color: #4b5563 !important;
            text-align: center !important;
            vertical-align: middle !important;
        }

        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) :is(.col-num, .col-right, .col-center, .col-action, .text-start, .text-end, .text-center) {
            text-align: center !important;
        }

        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) :is(.col-num, .numeric-value, .total-price, .statement-money, .summary-total-cell) {
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) td :is(.customer-cell, .customer-info, .status-cell, .action-cell) {
            justify-content: center !important;
            margin-left: auto;
            margin-right: auto;
        }

        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) td :is(input, select) {
            text-align: center;
        }

        .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr:hover {
            transform: none !important;
        }

        .table-text-truncate-20 {
            display: inline-block;
            max-width: 20ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
            cursor: help;
        }

        /* Mobile card-style tables */
        @media (max-width: 640px) {
            /* Height caps on the scroll wrapper (e.g. .page-dashboard's 280px) are sized
               for compact table rows. Once rows stack as cards each row is ~285px, so the
               cap becomes a keyhole showing less than one card. Let the page scroll instead
               of nesting a tiny scroll region — only where cards actually stack. */
            .content-area :is(.wb-table-wrap, .table-responsive, .table-wrapper, .table-scroll-wrapper):has(table.mobile-stack:not([class*="fc-"])) {
                max-height: none;
                overflow-y: visible;
            }

            /* The global `table { min-width: 700px }` (line ~474) keeps the table box
               700px wide even once rows stack as cards, forcing horizontal scrolling
               on mobile. Reset it only for tables that opted into card stacking. */
            .content-area table.mobile-stack:not([class*="fc-"]) {
                min-width: 0;
                width: 100%;
                display: block;
            }
            .content-area table.mobile-stack:not([class*="fc-"]) tbody {
                display: block;
                width: 100%;
            }

            /* Tables that have data-label attrs on td → stack as cards */
            .content-area table.mobile-stack:not([class*="fc-"]) thead {
                display: none;
            }
            .content-area table.mobile-stack:not([class*="fc-"]) tbody tr {
                display: block;
                border: 1px solid var(--ink-200);
                border-radius: .625rem;
                margin-bottom: .75rem;
                padding: .5rem 0;
                box-shadow: 0 1px 3px rgb(0 0 0 / .06);
            }
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: .5rem;
                padding: .375rem .875rem;
                border-bottom: 1px solid var(--ink-50);
                font-size: .8rem;
                text-align: right !important;
            }
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td:last-child {
                border-bottom: none;
            }

            /* Desktop ellipsis tricks like `td:first-child { max-width: 0 }` rely on
               table layout. Once the cell is a flex block, max-width:0 collapses it to
               its content — the customer name disappears, leaving only the avatar. */
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td {
                max-width: none;
                width: auto;
            }

            /* A cell whose value merely repeats another cell in the same card (e.g.
               Contact when the customer has no name and it falls back to the phone)
               is noise once stacked. Desktop keeps the column for alignment. */
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td[data-duplicate-of] {
                display: none;
            }

            /* Full-width cells (empty states, "No orders found", loading rows) are not
               label/value pairs — they should read as centred messages, not be pushed
               right by the card layout or given an empty ::before label. */
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td[colspan] {
                justify-content: center;
                text-align: center !important;
            }
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td[colspan]::before {
                content: none;
            }

            /* The centred-cell rule (~line 6873) sets margin:auto + justify-content:center
               on these wrappers. Auto margins absorb all free space in a flex row, so the
               content collapses. Cards align values right. Selector is deliberately built
               to out-specify that rule, which uses !important. */
            .content-area table.mobile-stack:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody td :is(.customer-cell, .customer-info, .status-cell, .action-cell) {
                justify-content: flex-end !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                min-width: 0;
            }

            /* Action buttons are centred in their desktop column (e.g.
               `.customer-chat-btn { margin: 0 auto }`). In a card the auto margins
               strand the button mid-row while every other value sits flush right. */
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td > :is(.btn, button, a.btn) {
                margin-left: 0;
                margin-right: 0;
            }
            .content-area table.mobile-stack:not([class*="fc-"]) tbody td::before {
                content: attr(data-label);
                font-weight: var(--font-weight-semibold);
                font-size: .7rem;
                text-transform: uppercase;
                letter-spacing: .04em;
                color: var(--ink-500);
                min-width: 110px;
                flex-shrink: 0;
                padding-top: 2px;
                text-align: left !important;
            }

            .content-area .table-header-row {
                grid-template-columns: 1fr;
            }

            .content-area .table-header-row > :not(.table-actions):first-child,
            .content-area .table-header-row > .table-actions {
                grid-column: 1;
                justify-self: center;
            }
        }

        /* ── Generic page section wrapper used in simple pages ── */
        .page-section {
            background: var(--surface-primary);
            border: 1px solid var(--ink-200);
            border-radius: .875rem;
            padding: 1.25rem;
            margin-bottom: 1.25rem;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / .07);
        }
        .page-section-title {
            font-size: 1rem;
            font-weight: var(--font-weight-bold);
            color: var(--ink-800);
            margin: 0 0 1rem;
            padding-bottom: .625rem;
            border-bottom: 1px solid var(--ink-100);
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .page-section-title i {
            color: var(--brand-primary);
        }

        /* ── Simple page header (for pages like list_orders, live_human_agent) ── */
        .simple-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .75rem;
            margin-bottom: 1.25rem;
        }
        .simple-page-title {
            font-size: 1.375rem;
            font-weight: var(--font-weight-bold);
            color: var(--ink-800);
            margin: 0;
            letter-spacing: -.01em;
        }
        .simple-page-subtitle {
            font-size: .78rem;
            color: var(--ink-500);
            margin: .2rem 0 0;
            font-weight: var(--font-weight-medium);
        }

        /* ── Content page wrapper (for simple pages using container) ── */
        .content-page-wrap {
            padding: 1rem;
        }
        @media (max-width: 768px) {
            .content-page-wrap {
                padding: .875rem .75rem;
            }
        }

        /* ═══════════════════════════════════════════════════════
           GLOBAL PAGINATION SYSTEM — consistent across all pages
           ═══════════════════════════════════════════════════════ */

        /* Table footer bar */
        .content-area .table-footer {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: .875rem 1.25rem !important;
            background: var(--surface-secondary) !important;
            border-top: 1px solid var(--ink-200) !important;
            font-size: .8125rem !important;
            color: var(--ink-500) !important;
            font-weight: var(--font-weight-medium) !important;
            flex-wrap: wrap !important;
            gap: .75rem !important;
        }

        /* Pagination container */
        .content-area .pagination,
        .content-area .cat-pagination,
        .content-area [id*="paginat"] {
            display: flex !important;
            align-items: center !important;
            gap: .375rem !important;
            flex-wrap: wrap !important;
        }

        /* Every pagination button — shared base */
        .content-area .pagination-btn,
        .content-area .cat-pagination-btn {
            min-width: 2.25rem !important;
            height: 2.25rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 .5rem !important;
            border: 1px solid var(--ink-200) !important;
            border-radius: .5rem !important;
            background: var(--surface-primary) !important;
            color: var(--ink-700) !important;
            font-family: var(--font-family-primary) !important;
            font-weight: var(--font-weight-semibold) !important;
            font-size: .8125rem !important;
            cursor: pointer !important;
            transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast) !important;
            text-decoration: none !important;
            line-height: 1 !important;
            user-select: none !important;
        }

        /* Hover */
        .content-area .pagination-btn:hover:not(.disabled):not(:disabled),
        .content-area .cat-pagination-btn:hover:not(.disabled):not(:disabled) {
            background: var(--brand-primary) !important;
            color: #fff !important;
            border-color: var(--brand-primary) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 3px 10px rgba(2,84,45,.2) !important;
        }

        /* Active / current page */
        .content-area .pagination-btn.active,
        .content-area .cat-pagination-btn.active {
            background: var(--brand-primary) !important;
            color: #fff !important;
            border-color: var(--brand-primary) !important;
            box-shadow: 0 2px 8px rgba(2,84,45,.25) !important;
            cursor: default !important;
        }

        /* Disabled */
        .content-area .pagination-btn.disabled,
        .content-area .pagination-btn:disabled,
        .content-area .cat-pagination-btn.disabled,
        .content-area .cat-pagination-btn:disabled {
            background: var(--surface-tertiary) !important;
            color: var(--ink-400) !important;
            border-color: var(--ink-200) !important;
            cursor: not-allowed !important;
            opacity: .55 !important;
            transform: none !important;
            box-shadow: none !important;
        }

        /* Ellipsis dots */
        .content-area .pagination-btn.disabled:not([data-page]),
        .content-area .pagination span.disabled {
            border: none !important;
            background: transparent !important;
            color: var(--ink-400) !important;
            opacity: 1 !important;
            cursor: default !important;
        }

        @media (max-width: 640px) {
            .content-area .table-footer {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
            }
            .content-area .pagination-btn,
            .content-area .cat-pagination-btn {
                min-width: 2rem !important;
                height: 2rem !important;
                font-size: .75rem !important;
            }
        }
    

/* ==========================================================
   Template: campaigns.html (page-campaigns)
   ========================================================== */

    /* ==== Dashboard UI token set (mirrors customer.html) ==== */
    body.page-campaigns{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;

        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);

        --primary: var(--primary-green);
        --white: #ffffff;
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* ==== Page wrapper ==== */
    body.page-campaigns .dashboard-container{
        margin: 0 auto;
        padding: .875rem .875rem 2.5rem;
        color: var(--text-700);
    }

    /* ==== Unified header card ==== */
    body.page-campaigns .campaigns-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
    }

    body.page-campaigns .campaigns-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
        border-radius: var(--radius-xl);
    }

    body.page-campaigns .campaigns-header-main{
        flex: 1 1 300px;
        min-width: 240px;
    }

    body.page-campaigns #pageTitle{
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0 0 .25rem 0;
        color: var(--primary-green);
        letter-spacing: -.01em;
    }

    body.page-campaigns .page-subtitle{
        font-size: .8rem;
        color: var(--text-500);
        font-weight: 500;
        margin: 0;
    }

    /* ==== Skeleton Loader ==== */
    body.page-campaigns .skeleton{
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: campaigns--shimmer 1.5s infinite;
        border-radius: .375rem;
        height: 1rem;
        width: 100%;
    }

    body.page-campaigns .skeleton.small{ width: 60%; }
    body.page-campaigns .skeleton.medium{ width: 80%; }

    @keyframes campaigns--shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    body.page-campaigns .skeleton-row{
        cursor: default !important;
        pointer-events: none;
    }

    body.page-campaigns .skeleton-row:hover{
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    /* ==== KPI Stat Cards ==== */
    body.page-campaigns .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 10px 0 16px;
    }

    body.page-campaigns .stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        text-decoration: none;
        color: inherit;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    body.page-campaigns .stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green-light);
    }

    body.page-campaigns .stat-card.active{
        background: var(--primary);
        color: var(--white);
        transform: translateY(-2px);
        box-shadow: var(--hover-shadow);
        border-color: var(--primary);
    }

    body.page-campaigns .stat-card.active .stat-icon{
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    body.page-campaigns .stat-card.active .stat-label{
        color: rgba(255, 255, 255, 0.8);
    }

    body.page-campaigns .stat-card.active .stat-value{
        color: var(--white);
    }

    body.page-campaigns .stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-campaigns .stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-campaigns .stat-value{
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ==== Controls bar ==== */
    body.page-campaigns .controls-section{
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        flex-shrink: 0;
        min-width: 280px;
    }

    body.page-campaigns .controls-grid{
        display: flex;
        gap: 6px;
        align-items: center;
    }

    body.page-campaigns .search-container{
        position: relative;
        flex: 1;
        min-width: 160px;
    }

    body.page-campaigns .search-icon{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .875rem;
        color: var(--text-500);
        pointer-events: none;
    }

    body.page-campaigns .search-input{
        width: 100%;
        padding: 6px 10px 6px 32px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .75rem;
        transition: var(--transition-fast);
        outline: none;
    }

    body.page-campaigns .search-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    /* ==== Buttons ==== */
    body.page-campaigns .campaigns-header-card .btn-create{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1.5px solid var(--primary-green);
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
        white-space: nowrap;
        box-shadow: none;
    }

    body.page-campaigns .campaigns-header-card .btn-create:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        transform: none;
        box-shadow: none;
    }

    body.page-campaigns .btn{
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.4rem 0.75rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 0.7rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: var(--transition-fast);
        font-family: inherit;
    }

    body.page-campaigns .btn-primary{
        background: var(--gradient-primary);
        color: var(--white);
        box-shadow: var(--shadow-sm);
    }

    body.page-campaigns .btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        color: var(--white);
    }

    body.page-campaigns .btn-secondary{
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-xs);
    }

    body.page-campaigns .btn-secondary:hover{
        background: var(--primary-green-light);
        transform: translateY(-1px);
        color: var(--primary-green);
        border-color: var(--primary-green-light);
    }

    body.page-campaigns .btn-danger{
        background: var(--primary);
        color: white;
        border: 1px solid var(--primary);
    }

    body.page-campaigns .btn-danger:hover{
        background: #01402A;
        color: white;
                border: 1px solid var(--primary);

    }

    body.page-campaigns .table-icon-btn{
        width: 2rem;
        height: 2rem;
        padding: 0;
        justify-content: center;
    }

    /* ==== Data table shell ==== */
    body.page-campaigns .table-container{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    body.page-campaigns .table-scroll-wrapper{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-campaigns .table-scroll-wrapper::-webkit-scrollbar{
        height: 8px;
    }

    body.page-campaigns .table-scroll-wrapper::-webkit-scrollbar-track{
        background: var(--surface-gray-100);
        border-radius: 0.375rem;
    }

    body.page-campaigns .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: var(--primary-green);
        border-radius: 0.375rem;
    }

    body.page-campaigns .custom-table{
        width: 100%;
        border-collapse: collapse;
        font-size: .875rem;
    }

    body.page-campaigns .custom-table thead th{
        background: var(--primary-green-dark);
        color: #fff;
        border: none;
        font-weight: 600;
        font-size: .72rem;
        letter-spacing: .045em;
        padding: .75rem 1rem;
        text-align: center;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
        text-transform: uppercase;
    }

    body.page-campaigns .custom-table thead th:hover{
        background: var(--primary-green);
    }

    body.page-campaigns .sortable{
        cursor: pointer;
        user-select: none;
        margin-left: .5rem;
        opacity: .8;
        transition: var(--transition-fast);
    }

    body.page-campaigns .sortable:hover{
        opacity: 1;
        transform: scale(1.05);
    }

    body.page-campaigns .custom-table tbody tr{
        transition: var(--transition-fast);
        border-bottom: 1px solid var(--border-200);
    }

    body.page-campaigns .custom-table tbody tr:nth-child(even){
        background: var(--surface-gray-50);
    }

    body.page-campaigns .custom-table tbody tr:hover:not(.skeleton-row){
        background: var(--primary-green-ghost);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
    }

    body.page-campaigns .custom-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        text-align: center;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-campaigns .custom-table td:first-child{
        text-align: center;
        font-weight: 400;
        color: inherit;
    }

    body.page-campaigns .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
    }

    body.page-campaigns .pagination{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-campaigns .pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-campaigns .pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-campaigns .pagination-btn.active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-campaigns .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
    }

    /* ==== Customer Info Styles ==== */
    body.page-campaigns .customer-info{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        min-width: 200px;
        width: 100%;
    }

    body.page-campaigns .customer-avatar{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: var(--gradient-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        flex-shrink: 0;
        font-size: 0.875rem;
    }

    body.page-campaigns .customer-details{
        flex: 1;
        text-align: left;
        min-width: 150px;
    }

    body.page-campaigns .customer-name{
        font-weight: 600;
        color: var(--primary-green);
        margin-bottom: 0.125rem;
        font-size: 0.875rem;
        white-space: normal;
        line-height: 1.2;
    }

    body.page-campaigns .customer-contact{
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.75rem;
        color: var(--text-500);
        white-space: normal;
        line-height: 1.2;
    }

    body.page-campaigns .customer-contact-item{
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        direction: ltr;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    body.page-campaigns .customer-contact-item i{
        width: 0.875rem;
        flex-shrink: 0;
        color: var(--primary-green);
        text-align: center;
    }

    body.page-campaigns .potential-value{
        display: inline-block;
        min-width: 3.25rem;
        color: var(--primary-green);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    body.page-campaigns .potential-value.pending{
        color: var(--text-500);
        font-weight: 600;
    }

    /* ==== Status Badges ==== */
    body.page-campaigns .status-badge{
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    body.page-campaigns .status-success{
        background: var(--success);
        color: white;
    }

    body.page-campaigns .status-warning{
        background: var(--warning);
        color: white;
    }

    body.page-campaigns .status-info{
        background: var(--primary-green);
        color: white;
    }

    body.page-campaigns .status-error{
        background: var(--error);
        color: white;
    }

    body.page-campaigns .keyword-stack{
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    body.page-campaigns .keyword-chip{
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.2;
        border: 1px solid rgba(2, 84, 45, 0.12);
        max-width: 100%;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    body.page-campaigns .keyword-chip-text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        display: inline-block;
    }

    body.page-campaigns .keyword-chip-more{
        background: var(--surface-gray-100);
        color: var(--text-700);
        border-color: var(--border-200);
    }

    body.page-campaigns .keyword-table-cell{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem;
        min-width: 0;
        max-width: 100%;
    }

    body.page-campaigns .keyword-table-stack{
        gap: 0.4rem;
    }

    body.page-campaigns .keyword-empty{
        color: var(--text-500);
        font-size: 0.8125rem;
    }

    /* ==== Modal Styles ==== */
    body.page-campaigns .modal{
        padding: 0 !important;
    }

    body.page-campaigns .modal.show .modal-dialog{
        display: flex;
        flex-direction: column;
    }

    body.page-campaigns .modal-dialog{
        margin: 1rem auto;
        max-height: calc(100vh - 2rem);
        height: auto;
    }

    body.page-campaigns .modal-dialog.modal-lg{
        max-width: 800px;
    }

    body.page-campaigns .modal-dialog.modal-xl{
        max-width: 900px;
    }

    body.page-campaigns .modal-content{
        border-radius: var(--radius-xl);
        border: none;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
        height: auto;
        overflow: hidden;
    }

    /* Modal-specific form section shadow (user requested) */
    body.page-campaigns .modal-content .form-section{
        box-shadow: 0px 1px 20px 10px rgb(0 0 0 / .08);
    }

    body.page-campaigns .modal-header{
        background: var(--gradient-primary);
        color: var(--white);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: none;
        padding: 1rem 1.25rem;
        flex-shrink: 0;
        position: relative;
        z-index: 10;
    }

    body.page-campaigns .modal-header::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent-emerald), var(--accent-mint), var(--accent-emerald));
    }

    body.page-campaigns .modal-header .modal-title{
        font-size: 1.125rem;
        font-weight: 700;
        color: #fff !important;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.page-campaigns .modal-header .modal-title i,
body.page-campaigns #campaignModal .modal-title,
body.page-campaigns #campaignModal .modal-title i{
        color: #fff !important;
    }

    body.page-campaigns .modal-subtitle{
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.85);
        margin: 0.25rem 0 0 0;
        font-weight: 400;
        line-height: 1.4;
    }

    body.page-campaigns .modal-header .btn-close{
        filter: brightness(0) invert(1);
        opacity: 0.8;
        transition: var(--transition-fast);
    }

    body.page-campaigns .modal-header .btn-close:hover{
        opacity: 1;
        transform: scale(1.1);
    }

    /* Critical: Modal body scroll */
    body.page-campaigns .modal-body{
        padding: 1rem;
        overflow-y: auto !important;
        overflow-x: hidden;
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - 180px);
        background: var(--surface-gray-50);
    }

    body.page-campaigns .modal-body::-webkit-scrollbar{
        width: 8px;
    }

    body.page-campaigns .modal-body::-webkit-scrollbar-track{
        background: var(--surface-gray-200);
        border-radius: 4px;
    }

    body.page-campaigns .modal-body::-webkit-scrollbar-thumb{
        background: var(--primary-green);
        border-radius: 4px;
    }

    body.page-campaigns .modal-body::-webkit-scrollbar-thumb:hover{
        background: var(--primary-green-dark);
    }

    body.page-campaigns .modal-footer{
        padding: 1rem 1.25rem;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        z-index: 10;
    }

    body.page-campaigns .modal-footer .btn{
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    /* Form inside modal */
    body.page-campaigns #campaignForm{
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: calc(100vh - 2rem - 70px);
        overflow: hidden;
    }

    body.page-campaigns #campaignForm .modal-body{
        flex: 1;
        overflow-y: auto;
    }

    /* Form styling inside modal */
    body.page-campaigns .modal .form-label{
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-700);
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    body.page-campaigns .modal .form-label .required{
        color: var(--error);
    }

    body.page-campaigns .modal .form-control{
        border: 1px solid var(--border-200);
        border-radius: var(--radius-sm);
        padding: 0.4rem 0.625rem;
        font-size: 0.8125rem;
        transition: var(--transition-fast);
        background: var(--surface-white);
    }

    body.page-campaigns .modal .form-control:hover{
        border-color: var(--primary-green-light);
    }

    body.page-campaigns .modal .form-control:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        outline: none;
    }

    body.page-campaigns .modal .form-control::placeholder{
        color: var(--text-500);
        font-size: 0.75rem;
    }

    body.page-campaigns .modal .form-text{
        font-size: 0.625rem;
        color: var(--text-500);
        margin-top: 0.125rem;
    }

    body.page-campaigns .modal textarea.form-control{
        min-height: 60px;
        resize: vertical;
    }

    body.page-campaigns .modal .form-check{
        padding-left: 1.5rem;
    }

    body.page-campaigns .modal .form-check-input{
        width: 1rem;
        height: 1rem;
        margin-top: 0.125rem;
        border: 2px solid var(--border-200);
        transition: var(--transition-fast);
    }

    body.page-campaigns .modal .form-check-input:checked{
        background-color: var(--primary-green);
        border-color: var(--primary-green);
    }

    body.page-campaigns .modal .form-check-input:focus{
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-campaigns .modal .form-check-label{
        font-size: 0.875rem;
        color: var(--text-700);
        cursor: pointer;
    }

    /* Form sections */
    body.page-campaigns .form-section{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        box-shadow: var(--shadow-xs);
    }

    body.page-campaigns .form-section:last-child{
        margin-bottom: 0;
    }

    body.page-campaigns .form-section-title{
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--primary-green);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding-bottom: 0.375rem;
        border-bottom: 1px solid var(--border-200);
    }

    body.page-campaigns .form-section-title i{
        font-size: 0.875rem;
    }

    body.page-campaigns .form-section-title .required{
        color: var(--error);
        font-weight: 400;
    }

    /* Two column layout for form fields */
    body.page-campaigns .form-row{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    @media (max-width: 576px) {
        body.page-campaigns .form-row{
            grid-template-columns: 1fr;
        }
    }

    /* Toggle switches */
    body.page-campaigns .toggle-group{
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.5rem;
        background: var(--surface-gray-50);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
    }

    body.page-campaigns .toggle-item{
        flex: 1;
        min-width: 140px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.625rem;
        background: var(--surface-white);
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-200);
        transition: var(--transition-fast);
    }

    body.page-campaigns .toggle-item:hover{
        border-color: var(--primary-green-light);
    }

    body.page-campaigns .toggle-item .form-check{
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.page-campaigns .toggle-item .form-check-input{
        margin: 0;
        width: 2rem;
        height: 1rem;
    }

    body.page-campaigns .toggle-item .form-check-label{
        font-size: 0.75rem;
        line-height: 1.2;
    }

    body.page-campaigns .toggle-item .form-check-label strong{
        display: block;
        font-size: 0.75rem;
    }

    body.page-campaigns .toggle-item .form-check-label small{
        font-size: 0.625rem;
        color: var(--text-500);
    }

    /* ==== Custom Dropdown ==== */
    body.page-campaigns .custom-dropdown{ position: relative; width: 100%; z-index: 50; }
    body.page-campaigns .custom-dropdown.open{ z-index: 100; }
    body.page-campaigns .custom-dropdown .dropdown-trigger{
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        width: 100%; padding: 0.4rem 0.625rem;
        background: var(--surface-white); border: 1px solid var(--border-200); border-radius: var(--radius-sm);
        color: var(--text-700); font-weight: 500; font-size: 0.8125rem; font-family: inherit;
        cursor: pointer; transition: var(--transition-fast); outline: none;
    }
    body.page-campaigns .custom-dropdown .dropdown-trigger:hover{ border-color: var(--primary-green); }
    body.page-campaigns .custom-dropdown .dropdown-trigger:focus,
body.page-campaigns .custom-dropdown .dropdown-trigger.active{
        border-color: var(--primary-green); box-shadow: 0 0 0 3px var(--primary-green-light);
    }
    body.page-campaigns .custom-dropdown .dropdown-trigger .selected-text{ flex: 1; text-align: left; }
    body.page-campaigns .custom-dropdown .dropdown-trigger .selected-text.placeholder{ color: var(--text-500); }
    body.page-campaigns .custom-dropdown .dropdown-arrow{ transition: transform .2s ease; color: var(--primary-green); font-size: 0.7rem; }
    body.page-campaigns .custom-dropdown .dropdown-trigger.active .dropdown-arrow{ transform: rotate(180deg); }
    body.page-campaigns .custom-dropdown .dropdown-menu{
        position: absolute; top: calc(100% + 4px); left: 0; right: 0;
        background: var(--surface-white); border: 1px solid var(--border-200); border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg); z-index: 1000; overflow: hidden;
        opacity: 0; visibility: hidden; transition: all .2s ease;
    }
    body.page-campaigns .custom-dropdown .dropdown-menu.show{ opacity: 1; visibility: visible; overflow-y: auto; }
    body.page-campaigns .custom-dropdown .dropdown-option{
        display: flex; align-items: center; padding: 0.5rem 0.75rem;
        color: var(--text-700); font-size: 0.875rem; font-weight: 500; font-family: inherit;
        cursor: pointer; transition: var(--transition-fast); border: none; background: none; width: 100%; text-align: left;
    }
    body.page-campaigns .custom-dropdown .dropdown-option:hover{ background: var(--primary-green-light); color: var(--primary-green); }
    body.page-campaigns .custom-dropdown .dropdown-option.selected{ background: var(--primary-green-light); color: var(--primary-green); font-weight: 600; }
    body.page-campaigns select.hidden-select,
body.page-campaigns .form-select.hidden-select{ display: none; }

    /* ==== Question Management Styles ==== */
    body.page-campaigns .questions-container{
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        padding: 0.5rem;
        background: var(--surface-gray-50);
        max-height: 200px;
        overflow-y: auto;
    }

    body.page-campaigns .questions-container::-webkit-scrollbar{
        width: 5px;
    }

    body.page-campaigns .questions-container::-webkit-scrollbar-track{
        background: var(--surface-gray-100);
        border-radius: 3px;
    }

    body.page-campaigns .questions-container::-webkit-scrollbar-thumb{
        background: var(--primary-green);
        border-radius: 3px;
    }

    body.page-campaigns .questions-container:empty::before{
        content: "No questions added yet. Click \"Add Question\" below.";
        display: block;
        text-align: center;
        padding: 1rem;
        color: var(--text-500);
        font-size: 0.75rem;
        font-style: italic;
    }

    body.page-campaigns .question-item{
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0.625rem;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        transition: var(--transition-fast);
        position: relative;
    }

    body.page-campaigns .question-item:hover{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
    }

    body.page-campaigns .question-item:last-child{
        margin-bottom: 0;
    }

    body.page-campaigns .question-number{
        min-width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--gradient-primary);
        color: white;
        border-radius: 50%;
        font-weight: 700;
        font-size: 0.625rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }

    body.page-campaigns .question-inputs-wrapper{
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    body.page-campaigns .question-input,
body.page-campaigns .expected-response-input{
        width: 100%;
        border: 1px solid var(--border-200);
        background: var(--surface-white);
        outline: none;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
        border-radius: var(--radius-sm);
        transition: var(--transition-fast);
    }

    body.page-campaigns .question-input{
        font-weight: 500;
    }

    body.page-campaigns .expected-response-input{
        font-size: 0.6875rem;
        color: var(--text-500);
        background: var(--surface-gray-50);
    }

    body.page-campaigns .question-input:focus,
body.page-campaigns .expected-response-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        background: var(--surface-white);
    }

    body.page-campaigns .question-input::placeholder{
        color: var(--text-500);
        font-weight: 400;
    }

    body.page-campaigns .expected-response-input::placeholder{
        color: var(--text-500);
        font-style: italic;
    }

    body.page-campaigns .remove-question{
        color: var(--text-500);
        cursor: pointer;
        padding: 0.25rem;
        border-radius: var(--radius-sm);
        transition: var(--transition-fast);
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    body.page-campaigns .remove-question:hover{
        background: rgba(239, 68, 68, 0.1);
        color: var(--error);
    }

    body.page-campaigns .add-question{
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px dashed var(--border-200);
        background: var(--surface-gray-50);
        color: var(--primary-green);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: var(--transition-fast);
        font-weight: 600;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        margin-top: 0.5rem;
    }

    body.page-campaigns .add-question:hover{
        border-color: var(--primary-green);
        background: var(--primary-green-light);
    }

    body.page-campaigns .add-question i{
        font-size: 0.875rem;
    }

    /* ==== Lead Generation Section ==== */
    body.page-campaigns .lead-section{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        padding: 0.75rem;
        margin-top: 0;
    }

    body.page-campaigns .lead-section-title{
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--primary-green);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding-bottom: 0.375rem;
        border-bottom: 1px solid var(--border-200);
    }

    body.page-campaigns .lead-section-title i{
        font-size: 0.875rem;
    }

    body.page-campaigns .section-title{
        font-weight: 700;
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
        color: var(--text-700);
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    body.page-campaigns .section-title i{
        color: var(--primary-green);
    }

    body.page-campaigns .section-subtitle{
        font-weight: 500;
        font-size: 0.6875rem;
        margin-bottom: 0.375rem;
        color: var(--text-500);
    }

    /* ==== Question List Display ==== */
    body.page-campaigns .question-list{
        background: var(--surface-gray-50);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        padding: 0.75rem;
        margin: 0.5rem 0;
        max-height: 200px;
        overflow-y: auto;
    }

    body.page-campaigns .question-display-item{
        padding: 0.5rem;
        border-bottom: 1px solid var(--border-200);
        font-size: 0.875rem;
    }

    body.page-campaigns .question-display-item:last-child{
        border-bottom: none;
    }

    /* ==== Empty state ==== */
    body.page-campaigns .custom-table td.empty-state{
        padding: 0;
        text-align: center;
        color: var(--text-500);
    }

    body.page-campaigns .empty-state-content{
        min-height: 260px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 48px 16px;
        color: var(--text-500);
        width: 100%;
        box-sizing: border-box;
    }

    body.page-campaigns .empty-state-content i{
        font-size: 3rem;
        color: var(--primary-green);
        margin-bottom: 16px;
        display: block;
    }

    body.page-campaigns .empty-state-content h3{
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-700);
        margin-bottom: 8px;
    }

    body.page-campaigns .empty-state-content p{
        color: var(--text-500);
        margin: 0;
    }

    /* ==== Mobile responsive ==== */
    @media (max-width: 768px) {
        body.page-campaigns .dashboard-container{ padding: 0.75rem; }
        body.page-campaigns .controls-section{ min-width: unset; width: 100%; }
        body.page-campaigns .controls-grid{ flex-direction: column; gap: 12px; }
        body.page-campaigns .search-container{ min-width: unset; }
        body.page-campaigns .custom-table{ font-size: .8125rem; }
        body.page-campaigns .custom-table td,
body.page-campaigns .custom-table th{ padding: 10px 8px; }
        body.page-campaigns .customer-info{ min-width: 180px; }
        body.page-campaigns .customer-avatar{ width: 2rem; height: 2rem; font-size: 0.75rem; }

        /* Modal responsive */
        body.page-campaigns .modal-dialog{
            margin: 0.5rem;
            max-height: calc(100vh - 1rem);
        }
        body.page-campaigns .modal-dialog.modal-xl,
body.page-campaigns .modal-dialog.modal-lg{
            max-width: calc(100% - 1rem);
        }
        body.page-campaigns .modal-body{
            padding: 1rem;
        }
        body.page-campaigns .modal-footer{
            padding: 0.75rem 1rem;
            flex-wrap: wrap;
        }
        body.page-campaigns .form-row{
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
        body.page-campaigns .toggle-group{
            flex-direction: column;
            gap: 0.5rem;
        }
    }

    /* Phone: mobile-optimized design */
    @media (max-width: 576px) {
        body.page-campaigns .dashboard-container{ padding: 0.5rem; }

        body.page-campaigns .campaigns-header-card{
            padding: .75rem;
            gap: .75rem;
            margin-bottom: 0.75rem;
        }
        body.page-campaigns .campaigns-header-main{ min-width: unset; }
        body.page-campaigns #pageTitle{ font-size: 1.125rem; margin-bottom: .25rem; }
        body.page-campaigns .page-subtitle{ font-size: .7rem; }

        body.page-campaigns .controls-section{
            padding: 0;
            width: 100%;
            border-radius: 0;
        }
        body.page-campaigns .controls-grid{
            gap: .5rem;
            flex-direction: row;
        }
        body.page-campaigns .search-container{
            flex: 1;
            min-width: 0;
        }
        body.page-campaigns .search-input{
            font-size: .8125rem;
            padding: .5rem .5rem .5rem 2rem;
            border-radius: .5rem;
            height: 36px;
        }
        body.page-campaigns .search-icon{
            left: .5rem;
            font-size: .875rem;
        }

        /* Stat cards - icon + number only */
        body.page-campaigns .stats-grid{
            margin: .5rem 0 .75rem;
            gap: .5rem;
            grid-template-columns: repeat(2, 1fr);
            justify-items: center;
        }
        body.page-campaigns .stat-card{
            padding: .75rem .5rem;
            gap: .5rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        body.page-campaigns .stat-card .stat-label{
            font-size: .55rem;
            text-align: center;
            margin-bottom: 0;
        }
        body.page-campaigns .stat-card .stat-value{
            font-size: 1.25rem;
            font-weight: 800;
        }
        body.page-campaigns .stat-card .stat-icon{
            width: 32px;
            height: 32px;
            font-size: .95rem;
            border-radius: 8px;
        }

        /* Table optimization */
        body.page-campaigns .table-container{
            border-radius: .75rem;
            margin-bottom: 1rem;
        }
        body.page-campaigns .custom-table{
            font-size: .75rem;
            min-width: 600px;
        }
        body.page-campaigns .custom-table thead th{
            padding: .75rem .5rem;
            font-size: .7rem;
        }
        body.page-campaigns .custom-table td{
            padding: .75rem .5rem;
            font-size: .75rem;
        }

        body.page-campaigns .keyword-table-cell{ min-width: 0; max-width: 100%; }

        /* Table footer */
        body.page-campaigns .table-footer{
            padding: .75rem;
            font-size: .7rem;
            flex-direction: column;
            gap: .75rem;
            align-items: stretch;
        }
        body.page-campaigns #infoBox{ text-align: center; }
        body.page-campaigns .pagination{ justify-content: center; }
        body.page-campaigns .pagination-btn{
            min-width: 2rem;
            padding: .35rem .5rem;
            font-size: .75rem;
        }

        body.page-campaigns .btn-create{
            padding: 6px 10px;
            font-size: .75rem;
        }

        /* Modal mobile */
        body.page-campaigns .modal-dialog{
            margin: 0.25rem;
            max-height: calc(100vh - 0.5rem);
        }
        body.page-campaigns .modal-header{
            padding: 0.875rem 1rem;
        }
        body.page-campaigns .modal-header .modal-title{
            font-size: 1rem;
        }
        body.page-campaigns .modal-subtitle{
            font-size: 0.6875rem;
        }
        body.page-campaigns .modal-body{
            padding: 0.875rem;
        }
        body.page-campaigns .modal-footer{
            padding: 0.625rem 0.875rem;
            gap: 0.5rem;
        }
        body.page-campaigns .modal-footer .btn{
            padding: 0.4rem 0.75rem;
            font-size: 0.75rem;
        }
        body.page-campaigns .questions-container{
            max-height: 200px;
        }
        body.page-campaigns .question-item{
            padding: 0.5rem;
            gap: 0.5rem;
        }
        body.page-campaigns .question-number{
            min-width: 1.5rem;
            height: 1.5rem;
            font-size: 0.625rem;
        }
        body.page-campaigns .question-input,
body.page-campaigns .expected-response-input{
            font-size: 0.75rem;
            padding: 0.4rem 0.625rem;
        }
        body.page-campaigns .add-question{
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
        }
        body.page-campaigns .lead-section{
            padding: 0.75rem;
        }
        body.page-campaigns .lead-section-title{
            font-size: 0.8125rem;
        }
    }

    /* ==== A11y focus ==== */
    body.page-campaigns .stat-card:focus,
body.page-campaigns .search-input:focus,
body.page-campaigns .dropdown-trigger:focus,
body.page-campaigns .dropdown-option:focus,
body.page-campaigns .pagination-btn:focus,
body.page-campaigns .btn:focus{
        outline: 2px solid var(--primary-green);
        outline-offset: 2px;
    }

    body.page-campaigns .fade-in{
        animation: campaigns--fadeIn .4s ease-out;
    }

    @keyframes campaigns--fadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }


/* ==========================================================
   Template: category.html (page-category)
   ========================================================== */

    body.page-category #mainContent.content-area{
        background: var(--surface-white);
        display: flex;
        flex-direction: column;
    }

    /* ============================================================================
       CSS VARIABLES - Theme Tokens
       ============================================================================ */
    body.page-category{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #22c55e;
        --error: #ef4444;

        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* ============================================================================
       PAGE CONTAINER
       ============================================================================ */
    body.page-category .cat-container{
        margin: 0 auto;
        width: 100%;
        min-width: 0;
        flex: 1;
        min-height: 100%;
        color: var(--text-700);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* ============================================================================
       UNIFIED HEADER CARD
       ============================================================================ */
    body.page-category .cat-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
    }

    body.page-category .cat-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
        border-radius: var(--radius-xl);
    }

    body.page-category .cat-header-main{
        flex: 1 1 300px;
        min-width: 240px;
        position: relative;
        z-index: 1;
    }

    body.page-category .cat-page-title{
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0 0 .25rem 0;
        color: var(--primary-green);
        letter-spacing: -.01em;
    }

    body.page-category .cat-page-subtitle{
        font-size: .8rem;
        color: var(--text-500);
        font-weight: 500;
        margin: 0;
    }

    /* ============================================================================
       CONTROLS SECTION
       ============================================================================ */
    body.page-category .cat-controls-section{
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        position: relative;
        z-index: 1;
        flex: 1 1 420px;
    }

    body.page-category .cat-controls-grid{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .6rem;
        align-items: center;
        width: 100%;
    }

    /* Search */
    body.page-category .cat-search-container{
        position: relative;
        flex: 1 1 240px;
        min-width: 180px;
    }

    body.page-category .cat-search-icon{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .875rem;
        color: var(--text-500);
        pointer-events: none;
    }

    body.page-category .cat-search-input{
        width: 100%;
        height: 38px;
        padding: 0 10px 0 32px;
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .8125rem;
        transition: var(--transition-fast);
        outline: none;
    }

    body.page-category .cat-search-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    /* Sort Dropdown */
    body.page-category .cat-sort-container{
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }

    body.page-category .cat-sort-label{
        font-size: .75rem;
        color: var(--text-500);
        font-weight: 600;
        white-space: nowrap;
    }

    body.page-category .cat-dropdown{
        position: relative;
        width: 140px;
        max-width: 100%;
    }

    body.page-category .cat-dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0 12px;
        height: 38px;
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-lg);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
        outline: none;
        width: 100%;
    }

    body.page-category .cat-dropdown-trigger:hover{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-category .cat-dropdown-trigger:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-category .cat-dropdown-trigger.active{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        background: var(--primary-green-ghost);
    }

    body.page-category .cat-dropdown-arrow{
        transition: var(--transition-fast);
        color: var(--primary-green);
        font-size: .875rem;
    }

    body.page-category .cat-dropdown-trigger.active .cat-dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-category .cat-dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--transition-fast);
    }

    body.page-category .cat-dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    body.page-category .cat-dropdown-option{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--text-700);
        font-size: .8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-category .cat-dropdown-option:hover{
        background: var(--primary-green-light);
        color: var(--primary-green-dark);
    }

    body.page-category .cat-dropdown-option.selected{
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-weight: 600;
    }

    /* Add Button */
    body.page-category .cat-add-btn{
        padding: 0 18px;
        height: 38px;
        background: var(--gradient-primary);
        color: var(--surface-white);
        border: none;
        border-radius: var(--radius-lg);
        font-size: .8125rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 7px;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: var(--shadow-sm);
        letter-spacing: .01em;
    }

    body.page-category .cat-add-btn:hover{
        background: linear-gradient(135deg, var(--primary-green-dark) 0%, #011f15 100%);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        color: var(--surface-white);
        text-decoration: none;
    }

    body.page-category .cat-add-btn:active{
        transform: translateY(0);
        box-shadow: var(--shadow-sm);
    }

    body.page-category .cat-header-card .cat-add-btn{
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1.5px solid var(--primary-green);
        box-shadow: none;
    }

    body.page-category .cat-header-card .cat-add-btn:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        transform: none;
        box-shadow: none;
    }

    /* ============================================================================
       KPI STATS GRID
       ============================================================================ */
    body.page-category .cat-stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 10px 0 16px;
    }

    body.page-category .cat-stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        position: relative;
        overflow: hidden;
        cursor: default;
    }

    body.page-category .cat-stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green-light);
    }

    body.page-category .cat-stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-category .cat-stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-category .cat-stat-value{
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ============================================================================
       GRID LAYOUT & CARDS
       ============================================================================ */
    body.page-category .cat-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /* ── Card shell ── */
    body.page-category .cat-card{
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
        transition: var(--transition);
        cursor: pointer;
        position: relative;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
    }
    body.page-category .cat-card:hover{
        border-color: var(--primary-green);
        transform: translateY(-3px);
        box-shadow: var(--hover-shadow);
    }

    /* ── Card top band: icon + title + order badge + action buttons ── */
    body.page-category .cat-card-header{
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: 1rem 1rem .75rem;
        background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
        border-bottom: 1px solid var(--border-200);
        position: relative;
    }

    body.page-category .cat-card-icon-box{
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
        transition: var(--transition-fast);
    }
    body.page-category .cat-card:hover .cat-card-icon-box{
        background: var(--primary-green);
        color: var(--surface-white);
    }

    body.page-category .cat-card-header-text{
        flex: 1;
        min-width: 0;
    }

    body.page-category .cat-card-title{
        font-size: .95rem;
        font-weight: 800;
        color: var(--text-900);
        margin: 0 0 .25rem 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    body.page-category .cat-card-level{
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        font-size: .65rem;
        padding: .15rem .45rem;
        background: var(--primary-green-light);
        color: var(--primary-green);
        border-radius: 99px;
        font-weight: 700;
        border: 1px solid transparent;
    }
    body.page-category .cat-card-level i{ font-size: .6rem; }

    /* 3 action buttons — top-right of header, revealed on hover */
    body.page-category .cat-card-actions{
        position: absolute;
        top: .65rem;
        right: .65rem;
        display: flex;
        gap: .3rem;
        opacity: 0;
        transform: translateY(-4px);
        transition: var(--transition-fast);
        pointer-events: none;
    }
    body.page-category .cat-card:hover .cat-card-actions{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    body.page-category .cat-card-action{
        width: 1.75rem;
        height: 1.75rem;
        border-radius: var(--radius-sm);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        color: var(--text-700);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .7rem;
        cursor: pointer;
        transition: var(--transition-fast);
        box-shadow: var(--shadow-sm);
    }
    body.page-category .cat-card-action:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
        transform: scale(1.08);
    }
    body.page-category .cat-card-action.delete:hover{
        background: var(--error);
        border-color: var(--error);
    }
    body.page-category .cat-card-action.add:hover{
        background: var(--primary-green);
        border-color: var(--primary-green);
        color: var(--surface-white);
    }

    /* ── Card body: sub-category chips ── */
    body.page-category .cat-card-body{
        padding: .75rem 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    body.page-category .cat-card-chips-label{
        font-size: .65rem;
        font-weight: 700;
        color: var(--text-500);
        text-transform: uppercase;
        letter-spacing: .05em;
        display: flex;
        align-items: center;
        gap: .3rem;
    }
    body.page-category .cat-card-chips-label i{ color: var(--primary-green); }

    body.page-category .cat-card-subcategories{
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
        min-height: 1.6rem;
    }

    body.page-category .cat-subcategory-chip{
        padding: .2rem .55rem;
        background: var(--primary-green-ghost);
        border: 1px solid var(--primary-green-light);
        border-radius: 99px;
        font-size: .7rem;
        color: var(--primary-green);
        font-weight: 600;
        white-space: nowrap;
        transition: var(--transition-fast);
    }
    body.page-category .cat-subcategory-chip:hover{
        background: var(--primary-green-light);
    }
    body.page-category .cat-subcategory-chip.chip-more{
        background: var(--surface-gray-100);
        border-color: var(--border-200);
        color: var(--text-500);
    }

    /* empty chips state */
    body.page-category .cat-card-no-subs{
        font-size: .75rem;
        color: var(--text-500);
        font-style: italic;
    }

    /* ── Card footer: count + view button ── */
    body.page-category .cat-card-footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .6rem 1rem;
        border-top: 1px solid var(--border-200);
        background: var(--surface-gray-50);
    }

    body.page-category .cat-card-count{
        font-size: .72rem;
        color: var(--text-500);
        display: flex;
        align-items: center;
        gap: .3rem;
        font-weight: 600;
    }
    body.page-category .cat-card-count i{ color: var(--primary-green); font-size: .78rem; }

    /* ============================================================================
       CATEGORY FLOW
       ============================================================================ */
    body.page-category .cat-flow-shell{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        margin-bottom: 1rem;
        overflow: hidden;
    }

    body.page-category .cat-flow-levels{
        display: flex;
        gap: .65rem;
        padding: .85rem;
        overflow-x: auto;
        border-bottom: 1px solid var(--border-200);
        background: var(--surface-gray-50);
    }

    body.page-category .cat-flow-level{
        min-width: 190px;
        padding: .7rem .8rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        display: flex;
        align-items: center;
        gap: .6rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-category .cat-flow-level:hover{
        border-color: var(--primary-green);
        box-shadow: var(--shadow-sm);
    }

    body.page-category .cat-flow-level-icon{
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--surface-white);
        background: var(--primary-green);
    }

    body.page-category .cat-flow-level-copy{ flex: 1; min-width: 0; }
    body.page-category .cat-flow-level-name{
        color: var(--text-900);
        font-size: .78rem;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.page-category .cat-flow-level-order{
        color: var(--text-500);
        font-size: .65rem;
        font-weight: 600;
        margin-top: .1rem;
    }
    body.page-category .cat-flow-level-actions{ display: flex; gap: .25rem; }
    body.page-category .cat-flow-level-action{
        width: 25px;
        height: 25px;
        border: 1px solid var(--border-200);
        border-radius: 6px;
        background: var(--surface-white);
        color: var(--text-500);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .65rem;
        cursor: pointer;
    }
    body.page-category .cat-flow-level-action:hover{ color: var(--surface-white); background: var(--primary-green); }
    body.page-category .cat-flow-level-action.delete:hover{ background: var(--error); border-color: var(--error); }

    body.page-category .cat-flow-canvas{
        padding: 1.25rem;
        overflow: auto;
        min-height: 230px;
    }

    body.page-category .cat-flow-title{
        display: flex;
        align-items: center;
        gap: .45rem;
        margin-bottom: 1rem;
        color: var(--primary-green);
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .045em;
    }

    body.page-category .cat-flow-forest{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .7rem;
        min-width: max-content;
    }

    body.page-category .cat-flow-branch{
        display: flex;
        align-items: center;
        position: relative;
    }

    body.page-category .cat-flow-node{
        width: 180px;
        min-height: 58px;
        padding: .6rem .7rem;
        border: 1.5px solid var(--border-200);
        border-left: 4px solid var(--primary-green);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-category .cat-flow-node:hover{
        border-color: var(--primary-green);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    body.page-category .cat-flow-node-level{
        color: var(--text-500);
        font-size: .6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    body.page-category .cat-flow-node-value{
        margin-top: .2rem;
        color: var(--text-900);
        font-size: .82rem;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

    body.page-category .cat-flow-children{
        display: flex;
        flex-direction: column;
        gap: .55rem;
        margin-left: 42px;
        padding-left: 26px;
        border-left: 2px solid #b9d2c5;
        position: relative;
    }

    body.page-category .cat-flow-children::before{
        content: "";
        position: absolute;
        width: 42px;
        height: 2px;
        left: -42px;
        top: 50%;
        background: #b9d2c5;
    }

    body.page-category .cat-flow-children > .cat-flow-branch::before{
        content: "";
        position: absolute;
        width: 26px;
        height: 2px;
        left: -26px;
        top: 50%;
        background: #b9d2c5;
    }

    body.page-category .cat-flow-leaf{
        margin-left: .45rem;
        color: var(--success);
        font-size: .8rem;
    }

    body.page-category .cat-flow-empty-level{
        color: var(--text-500);
        font-size: .75rem;
        font-style: italic;
        padding: .75rem 0;
    }

    body.page-category .cat-view-btn{
        padding: .3rem .7rem;
        background: var(--primary-green);
        color: var(--surface-white);
        border: none;
        border-radius: var(--radius-sm);
        font-size: .7rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }
    body.page-category .cat-view-btn:hover{
        background: var(--primary-green-dark);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    /* ============================================================================
       CATEGORY DETAIL MODAL
       ============================================================================ */
    body.page-category .cat-modal-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(4px);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }
    body.page-category .cat-modal-overlay.show{ opacity: 1; visibility: visible; }

    body.page-category .cat-modal{
        background: var(--surface-white);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        max-width: 660px;
        width: 100%;
        max-height: 88vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transform: scale(.92) translateY(24px);
        transition: var(--transition);
        z-index: 9999;
    }
    body.page-category .cat-modal-overlay.show .cat-modal{ transform: scale(1) translateY(0); }

    /* ── HEADER ─────────────────────────────────────────────── */
    body.page-category .cat-modal-header{
        padding: 1.1rem 1.25rem 1rem 1.5rem;
        border-bottom: 1px solid var(--border-200);
        background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
        display: flex;
        align-items: center;
        gap: .75rem;
        flex-shrink: 0;
    }

    /* icon box */
    body.page-category .cat-modal-icon{
        width: 46px; height: 46px;
        border-radius: 12px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }

    /* name + pills column */
    body.page-category .cat-modal-title-text{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    body.page-category .cat-modal-title-text h2{
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0;
        color: var(--text-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* inline name edit */
    body.page-category .cat-modal-name-input{
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-900);
        border: 2px solid var(--primary-green);
        border-radius: var(--radius-md);
        padding: .2rem .6rem;
        outline: none;
        width: 100%;
        background: var(--surface-white);
        box-shadow: 0 0 0 3px var(--primary-green-light);
        display: none;
    }

    /* pill row */
    body.page-category .cat-modal-title-meta{
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-wrap: wrap;
    }
    body.page-category .cat-modal-meta-pill{
        display: inline-flex; align-items: center; gap: .25rem;
        font-size: .69rem; font-weight: 700;
        padding: .2rem .55rem;
        border-radius: 99px;
        border: 1px solid var(--border-200);
        background: var(--surface-gray-100);
        color: var(--text-700);
    }
    body.page-category .cat-modal-meta-pill i{ color: var(--primary-green); font-size: .72rem; }
    body.page-category .cat-modal-meta-pill.status-active{ background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
    body.page-category .cat-modal-meta-pill.status-active i{ color:#15803d; }
    body.page-category .cat-modal-meta-pill.status-inactive{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
    body.page-category .cat-modal-meta-pill.status-inactive i{ color:#b91c1c; }

    /* header right-side icon buttons: edit, delete, close */
    body.page-category .cat-modal-hdr-actions{
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-shrink: 0;
        margin-left: auto;
    }
    body.page-category .cat-hdr-btn{
        width: 2.1rem; height: 2.1rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-200);
        background: var(--surface-white);
        color: var(--text-700);
        display: flex; align-items: center; justify-content: center;
        font-size: .82rem;
        cursor: pointer;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-category .cat-hdr-btn:hover{ border-color: var(--primary-green); color: var(--primary-green); background: var(--primary-green-light); }
    body.page-category .cat-hdr-btn.edit-active{ background: var(--primary-green); color: var(--surface-white); border-color: var(--primary-green); }
    body.page-category .cat-hdr-btn.delete-btn:hover{ background: var(--error); color: var(--surface-white); border-color: var(--error); }
    body.page-category .cat-hdr-btn.close-btn:hover{ background: var(--error); color: var(--surface-white); border-color: var(--error); }

    /* ── BODY ───────────────────────────────────────────────── */
    body.page-category .cat-modal-body{
        padding: 1.25rem 1.5rem;
        overflow-y: auto;
        flex: 1;
    }
    body.page-category .cat-modal-body::-webkit-scrollbar{ width: 6px; }
    body.page-category .cat-modal-body::-webkit-scrollbar-track{ background: var(--surface-gray-100); border-radius: 99px; }
    body.page-category .cat-modal-body::-webkit-scrollbar-thumb{ background: var(--primary-green); border-radius: 99px; }

    body.page-category .cat-detail-label{
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: .7rem;
        display: flex;
        align-items: center;
        gap: .4rem;
    }
    body.page-category .cat-detail-label i{ color: var(--primary-green); }

    /* sub-cat grid */
    body.page-category .cat-subcategories-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: .6rem;
    }
    body.page-category .cat-subcategory-item{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        padding: .45rem .65rem;
        display: flex;
        align-items: center;
        gap: .35rem;
        transition: var(--transition-fast);
        cursor: default;
    }
    body.page-category .cat-subcategory-item:hover{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
        box-shadow: var(--shadow-sm);
    }
    body.page-category .cat-subcategory-name{
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-900);
        margin: 0;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.page-category .cat-subcategory-inline-edit{
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-900);
        border: 1.5px solid var(--primary-green);
        border-radius: var(--radius-sm);
        padding: .1rem .3rem;
        outline: none;
        background: var(--surface-white);
        flex: 1;
        min-width: 0;
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }
    body.page-category .cat-sub-item-actions{
        display: flex;
        gap: .2rem;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity .15s;
    }
    body.page-category .cat-subcategory-item:hover .cat-sub-item-actions{ opacity: 1; }
    body.page-category .cat-sub-action-btn{
        width: 1.45rem; height: 1.45rem;
        border: none;
        border-radius: 4px;
        display: flex; align-items: center; justify-content: center;
        font-size: .65rem;
        cursor: pointer;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-category .cat-sub-action-btn.edit-btn{ background: var(--primary-green-light); color: var(--primary-green); }
    body.page-category .cat-sub-action-btn.edit-btn:hover{ background: var(--primary-green); color: #fff; }
    body.page-category .cat-sub-action-btn.delete-btn{ background: #fee2e2; color: #b91c1c; }
    body.page-category .cat-sub-action-btn.delete-btn:hover{ background: var(--error); color: #fff; }
    body.page-category .cat-sub-action-btn.save-btn{ background: var(--primary-green-light); color: var(--primary-green); }
    body.page-category .cat-sub-action-btn.save-btn:hover{ background: var(--primary-green); color: #fff; }
    body.page-category .cat-sub-action-btn.cancel-btn{ background: var(--surface-gray-100); color: var(--text-500); }
    body.page-category .cat-sub-action-btn.cancel-btn:hover{ background: var(--surface-gray-200); color: var(--text-700); }

    /* empty */
    body.page-category .cat-subcategories-empty{ text-align:center; padding:2rem 1rem; color: var(--text-500); }
    body.page-category .cat-subcategories-empty i{ font-size:2rem; color: var(--primary-green-light); margin-bottom:.5rem; display:block; }
    body.page-category .cat-subcategories-empty p{ font-size:.82rem; margin:0; }

    /* ── FOOTER ─────────────────────────────────────────────── */
    body.page-category .cat-modal-footer{
        border-top: 1px solid var(--border-200);
        background: var(--surface-white);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }
    /* row 1: add sub-cat input */
    body.page-category .cat-modal-footer-input{
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .8rem 1.5rem;
        border-bottom: 1px solid var(--border-200);
        background: var(--surface-gray-50);
    }
    body.page-category .cat-modal-footer-input-label{
        font-size: .68rem;
        font-weight: 700;
        color: var(--text-500);
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
        flex-shrink: 0;
    }
    body.page-category .cat-modal-footer-input-label i{ color: var(--primary-green); margin-right:.2rem; }
    body.page-category .cat-subcategory-input-row{
        display: flex;
        gap: .5rem;
        align-items: center;
        flex: 1;
    }
    body.page-category .cat-subcategory-input{
        flex: 1;
        min-width: 0;
        padding: .55rem .75rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        font-size: .82rem;
        color: var(--text-700);
        background: var(--surface-white);
        transition: var(--transition-fast);
        outline: none;
    }
    body.page-category .cat-subcategory-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }
    body.page-category .cat-subcategory-add-btn{
        border: none;
        background: var(--primary-green);
        color: #fff;
        border-radius: var(--radius-md);
        padding: .55rem .85rem;
        font-size: .78rem;
        font-weight: 700;
        display: inline-flex; align-items: center; gap: .35rem;
        cursor: pointer;
        transition: var(--transition-fast);
        white-space: nowrap;
        flex-shrink: 0;
    }
    body.page-category .cat-subcategory-add-btn:hover{ background: var(--primary-green-dark); }

    /* row 2: save button bar */
    body.page-category .cat-modal-footer-actions{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .7rem 1.5rem;
        gap: .5rem;
    }
    body.page-category .cat-footer-hint{
        font-size: .72rem;
        color: var(--text-500);
        font-weight: 600;
    }
    body.page-category .cat-footer-hint i{ color: var(--primary-green); margin-right:.2rem; }

    /* save button */
    body.page-category .cat-modal-save-btn{
        display: inline-flex; align-items: center; gap: .4rem;
        padding: .55rem 1.2rem;
        border: none;
        border-radius: var(--radius-md);
        background: var(--primary-green);
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-category .cat-modal-save-btn:hover:not(:disabled){ background: var(--primary-green-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    body.page-category .cat-modal-save-btn:disabled{ opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

    /* ============================================================================
       PAGINATION SECTION
       ============================================================================ */
    body.page-category .cat-pagination-wrapper{
        display: block;
        width: 100%;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-top: .75rem;
        margin-bottom: .5rem;
        flex-shrink: 0;
    }

    @media (min-width: 769px) {
        body.page-category .cat-pagination-wrapper{
            position: relative;
            bottom: auto;
            z-index: auto;
        }
    }

    body.page-category #categoryGrid{
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* overflow: auto; */
        padding-bottom: .5rem;
    }

    body.page-category #categoryGrid > *{
        flex: 0 0 auto;
        min-height: 0;
    }

    body.page-category .cat-pagination-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
    }

    body.page-category .cat-pagination-info{
        flex: 0 1 auto;
        font-weight: 600;
    }

    body.page-category .cat-pagination{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-left: auto;
    }

    body.page-category .cat-pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-category .cat-pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-category .cat-pagination-btn.active{
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
    }

    body.page-category .cat-pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
        opacity: .6;
    }

    body.page-category .cat-pagination-ellipsis{
        padding: 0 .5rem;
        color: var(--text-500);
    }

    /* ============================================================================
       EMPTY & LOADING STATES
       ============================================================================ */
    body.page-category .cat-empty{
        text-align: center;
        padding: 4rem 2rem 3.5rem;
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    body.page-category .cat-empty::before{
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(2,84,45,0.055) 0%, transparent 70%);
        pointer-events: none;
    }

    body.page-category .cat-empty-icon-wrap{
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(2, 84, 45, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
    }

    body.page-category .cat-empty i{
        font-size: 2rem;
        color: var(--primary-green);
        margin: 0;
        display: block;
    }

    body.page-category .cat-empty h3{
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--text-700);
        margin: 0 0 .5rem 0;
    }

    body.page-category .cat-empty p{
        font-size: .875rem;
        color: var(--text-500);
        margin: 0 0 1.5rem 0;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Loading Skeleton */
    /* ── Skeleton ── */
    body.page-category .cat-skeleton{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 1rem;
    }
    body.page-category .cat-skeleton-card{
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }
    /* header band */
    body.page-category .cat-skeleton-header{
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--border-200);
        background: var(--primary-green-ghost);
    }
    body.page-category .cat-skeleton-icon{
        width: 42px; height: 42px;
        border-radius: 12px;
        flex-shrink: 0;
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: category--shimmer 1.5s infinite;
    }
    body.page-category .cat-skeleton-header-text{ flex: 1; display: flex; flex-direction: column; gap: .4rem; }
    /* body */
    body.page-category .cat-skeleton-body{
        padding: .75rem 1rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }
    body.page-category .cat-skeleton-chips{
        display: flex; gap: .35rem; flex-wrap: wrap;
    }
    body.page-category .cat-skeleton-chip{
        height: 1.3rem; width: 4rem;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: category--shimmer 1.5s infinite;
    }
    /* footer */
    body.page-category .cat-skeleton-footer{
        padding: .55rem 1rem;
        border-top: 1px solid var(--border-200);
        background: var(--surface-gray-50);
        display: flex; justify-content: space-between; align-items: center;
    }
    body.page-category .cat-skeleton-line{
        height: .85rem;
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: category--shimmer 1.5s infinite;
        border-radius: var(--radius-sm);
    }

    @keyframes category--shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* Toast */
    body.page-category .cat-toast{
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 10000;
        padding: 1rem 1.5rem;
        border-radius: var(--radius-lg);
        font-size: .85rem;
        font-weight: 600;
        color: var(--surface-white);
        display: flex;
        align-items: center;
        gap: .75rem;
        opacity: 0;
        transform: translateX(400px);
        transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        pointer-events: none;
        box-shadow: var(--shadow-lg);
        min-width: 320px;
    }

    body.page-category .cat-toast.show{
        opacity: 1;
        transform: translateX(0);
        pointer-events: all;
    }

    body.page-category .cat-toast.success{
        background: linear-gradient(135deg, var(--success) 0%, #16a34a 100%);
    }

    body.page-category .cat-toast.error{
        background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
    }

    body.page-category .cat-toast i{
        font-size: 1.25rem;
    }

    /* ============================================================================
       RESPONSIVE
       ============================================================================ */
    @media (max-width: 768px) {
        body.page-category .cat-container{
            padding: .625rem;
        }

        body.page-category .cat-header-card{
            padding: .875rem;
            gap: .8rem;
            border-radius: 14px;
        }

        body.page-category .cat-header-main{
            flex-basis: 100%;
            min-width: 0;
        }

        body.page-category .cat-controls-section{
            width: 100%;
            min-width: unset;
        }

        body.page-category .cat-controls-grid{
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: .5rem;
        }

        body.page-category .cat-search-container{
            grid-column: 1 / -1;
            min-width: unset;
        }

        body.page-category .cat-sort-container{
            width: 100%;
            min-width: 0;
        }

        body.page-category .cat-dropdown{
            min-width: 0;
            width: 100%;
        }

        body.page-category .cat-header-card .cat-add-btn{
            width: 100%;
            justify-content: center;
            padding-inline: .75rem;
        }

        body.page-category .cat-stats-grid{
            gap: .5rem;
            margin: .65rem 0 .85rem;
        }

        body.page-category .cat-stat-card{
            min-width: 0;
            padding: .75rem;
            gap: .7rem;
            border-radius: 14px;
        }

        body.page-category .cat-stat-icon{
            width: 32px;
            height: 32px;
            font-size: .95rem;
        }

        body.page-category .cat-stat-value{
            font-size: 1.125rem;
        }

        body.page-category .cat-grid{
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: .75rem;
        }
        body.page-category .cat-skeleton{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }

        body.page-category .cat-pagination-footer{
            flex-direction: column;
            gap: .75rem;
            align-items: stretch;
        }

        body.page-category .cat-pagination-info{
            text-align: center;
        }

        body.page-category .cat-pagination{
            justify-content: center;
            margin-left: 0;
        }

        body.page-category .cat-modal{ max-width: 100%; margin: 0; border-radius: var(--radius-lg); }
        body.page-category .cat-modal-header{ padding: .9rem 1rem; }
        body.page-category .cat-modal-icon{ width: 40px; height: 40px; font-size: 1.2rem; }
        body.page-category .cat-modal-title-text h2{ font-size: 1rem; }
        body.page-category .cat-modal-body{ padding: 1rem; }
        body.page-category .cat-modal-footer-input{ padding: .65rem 1rem; }
        body.page-category .cat-modal-footer-input-label{ display: none; }
        body.page-category .cat-modal-footer-actions{ padding: .6rem 1rem; }
        body.page-category .cat-subcategories-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

        body.page-category .cat-toast{
            right: 1rem;
            left: 1rem;
            min-width: auto;
        }
    }

    @media (max-width: 576px) {
        body.page-category .cat-page-title{ font-size: 1.05rem; margin-bottom: .2rem; }
        body.page-category .cat-page-subtitle{ font-size: .7rem; line-height: 1.45; }
        body.page-category .cat-sort-label{ display: none; }
        body.page-category .cat-search-input,
body.page-category .cat-dropdown-trigger,
body.page-category .cat-add-btn{ height: 40px; }
        body.page-category .cat-stats-grid{
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .5rem;
        }
        body.page-category .cat-stat-card{
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            padding: .7rem .3rem;
            text-align: center;
        }
        body.page-category .cat-stat-card > div:last-child{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .15rem;
            width: 100%;
            min-width: 0;
        }
        body.page-category .cat-stat-label{
            margin: 0;
            font-size: .52rem;
            line-height: 1.25;
            text-align: center;
        }
        body.page-category .cat-stat-value{
            width: 100%;
            flex-shrink: 0;
            font-size: 1.15rem;
            line-height: 1.15;
            text-align: center;
        }
        body.page-category .cat-pagination-btn{ min-width: 2rem; padding: .35rem .5rem; font-size: .75rem; }
        body.page-category .cat-pagination{ overflow-x: auto; padding-bottom: .15rem; }
        body.page-category .cat-subcategories-grid{ grid-template-columns: 1fr; }
        body.page-category .cat-grid{ grid-template-columns: 1fr; gap: .65rem; }
        body.page-category .cat-skeleton{ grid-template-columns: 1fr; gap: .65rem; }
        body.page-category .cat-card-title{ font-size: .88rem; }
    }

    body.page-category .cat-category-layout{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    body.page-category .cat-main-category-card{
        width: 100%;
        min-height: 210px;
        border-color: rgba(2, 84, 45, .35);
    }
    body.page-category .cat-main-category-card .cat-card-header{
        background: linear-gradient(135deg, var(--primary-green-light), var(--surface-white));
    }
    body.page-category .cat-main-category-card .cat-card-title{ font-size: 1.05rem; }
    body.page-category .cat-main-category-card .cat-card-body{ min-height: 90px; }
    body.page-category .cat-subcategory-levels{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: .75rem;
    }
    body.page-category .cat-subcategory-levels .cat-card{ min-height: 245px; }

    @media (max-width: 768px) {
        body.page-category .cat-subcategory-levels{ grid-template-columns: 1fr; }
        body.page-category .cat-main-category-card,
body.page-category .cat-subcategory-levels .cat-card{ min-height: 0; }
    }

    @media (max-width: 1100px) {
        body.page-category .cat-header-card{ padding: 1rem; }
        body.page-category .cat-header-main,
body.page-category .cat-controls-section{ flex-basis: 100%; }
        body.page-category .cat-controls-grid{ justify-content: stretch; }
        body.page-category .cat-search-container{ flex: 1 1 100%; }
        body.page-category .cat-sort-container{ flex: 1 1 220px; }
        body.page-category .cat-dropdown{ width: 100%; }
        body.page-category .cat-add-btn{
            flex: 1 1 180px;
            justify-content: center;
        }
        body.page-category .cat-stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* ============================================================================
       DRILLDOWN COLUMN VIEW (C1 → C1.1 → C1.1.1 …)
       ============================================================================ */
    body.page-category .cat-drill-shell{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        padding: .8rem;
        margin-bottom: .5rem;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }
    body.page-category .cat-drill-breadcrumb{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .35rem .5rem;
        margin-bottom: .85rem;
        font-size: .75rem;
        color: var(--text-500);
        font-weight: 600;
    }
    body.page-category .cat-drill-crumb{
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem .55rem;
        border-radius: 99px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        border: 1px solid transparent;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-category .cat-drill-crumb:hover{ border-color: var(--primary-green); }
    body.page-category .cat-drill-crumb.root{ background: var(--surface-gray-100); color: var(--text-700); }
    body.page-category .cat-drill-crumb-sep{ color: var(--text-500); }

    body.page-category .cat-drill-columns{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, 255px);
        gap: .65rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        padding: .1rem;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
    }
    body.page-category .cat-drill-columns::-webkit-scrollbar{ display: none; }
    body.page-category .cat-drill-scrollbar{
        position: relative;
        height: 14px;
        margin: .7rem .1rem 0;
        background: var(--surface-gray-100);
        border: 1px solid var(--border-200);
        border-radius: 99px;
        cursor: pointer;
    }
    body.page-category .cat-drill-scrollbar-thumb{
        position: absolute;
        inset: 2px auto 2px 2px;
        width: 56px;
        background: var(--primary-green);
        border-radius: 99px;
        cursor: grab;
        touch-action: none;
        transition: background .15s ease;
    }
    body.page-category .cat-drill-scrollbar-thumb:hover{
        background: var(--primary-green-dark);
    }
    body.page-category .cat-drill-scrollbar-thumb:active{ cursor: grabbing; }

    body.page-category .cat-drill-col{
        scroll-snap-align: start;
        position: relative;
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        height: 100%;
        max-height: none;
        transition: var(--transition-fast);
    }
    body.page-category .cat-drill-col:hover{ border-color: var(--primary-green-light); }
    body.page-category .cat-drill-col.is-active{ border-color: var(--primary-green); box-shadow: var(--shadow-md); }
    body.page-category .cat-drill-col.is-empty{ border-style: dashed; background: var(--surface-gray-50); }

    body.page-category .cat-drill-col-head{
        display: flex;
        align-items: center;
        gap: .55rem;
        min-height: 52px;
        padding: .45rem .55rem;
        border-bottom: 1px solid var(--border-200);
        background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
    }
    body.page-category .cat-drill-col-icon{
        width: 28px; height: 28px;
        border-radius: 9px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        display: flex; align-items: center; justify-content: center;
        font-size: .9rem;
        flex-shrink: 0;
    }
    body.page-category .cat-drill-col-head-text{ flex: 1; min-width: 0; }
    body.page-category .cat-drill-col-path{
        font-size: .6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--primary-green);
        margin: 0;
    }
    body.page-category .cat-drill-col-title{
        font-size: .82rem;
        font-weight: 800;
        color: var(--text-900);
        line-height: 1.25;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin: .1rem 0 0;
    }
    body.page-category .cat-drill-col-actions{
        display: flex;
        gap: .25rem;
        flex-shrink: 0;
    }
    body.page-category .cat-drill-col-action{
        width: 1.5rem; height: 1.5rem;
        border-radius: 6px;
        border: 1px solid var(--border-200);
        background: var(--surface-white);
        color: var(--text-700);
        display: flex; align-items: center; justify-content: center;
        font-size: .68rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-category .cat-drill-col-action:hover{ background: var(--primary-green); color: #fff; border-color: var(--primary-green); }

    body.page-category .cat-drill-col-body{
        flex: 1;
        padding: .45rem .8rem .45rem .45rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: .35rem;
        min-height: 0;
        scrollbar-width: none;
    }
    body.page-category .cat-drill-col-body::-webkit-scrollbar{ display: none; }
    body.page-category .cat-drill-vscroll{
        position: absolute;
        top: 59px;
        right: 3px;
        bottom: 36px;
        width: 9px;
        background: var(--surface-gray-100);
        border: 1px solid var(--border-200);
        border-radius: 99px;
        cursor: pointer;
        z-index: 3;
    }
    body.page-category .cat-drill-vscroll-thumb{
        position: absolute;
        inset: 2px 2px auto;
        min-height: 30px;
        background: var(--primary-green);
        border-radius: 99px;
        cursor: grab;
        touch-action: none;
    }
    body.page-category .cat-drill-vscroll-thumb:hover{ background: var(--primary-green-dark); }
    body.page-category .cat-drill-vscroll-thumb:active{ cursor: grabbing; }

    body.page-category .cat-drill-item{
        display: flex;
        align-items: center;
        gap: .4rem;
        min-height: 36px;
        padding: .35rem .45rem .35rem .55rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .8rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition-fast);
        text-align: left;
        width: 100%;
        outline: none;
    }
    body.page-category .cat-drill-item:hover{ border-color: var(--primary-green); background: var(--primary-green-ghost); }
    body.page-category .cat-drill-item:focus-visible{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }
    body.page-category .cat-drill-item.is-selected{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        box-shadow: var(--shadow-sm);
    }
    body.page-category .cat-drill-item.is-selected .cat-drill-item-chev{ color: rgba(255,255,255,.85); }
    body.page-category .cat-drill-item.is-leaf{ cursor: default; }
    body.page-category .cat-drill-item-label{
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Parent attribution shown while a mapped column lists values from every parent at once
       (WZ-179). Muted and shrink-last so it never crowds out the value itself. */
    body.page-category .cat-drill-item-parent{
        flex: 0 1 auto;
        min-width: 0;
        max-width: 46%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: .1rem .4rem;
        border-radius: 99px;
        background: var(--surface-gray-100);
        color: var(--text-500);
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .01em;
    }
    body.page-category .cat-drill-item.is-selected .cat-drill-item-parent{
        background: rgba(255, 255, 255, .18);
        color: rgba(255, 255, 255, .92);
    }

    body.page-category .cat-drill-item-tools{
        display: inline-flex;
        gap: .2rem;
        opacity: .72;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-category .cat-drill-item:hover .cat-drill-item-tools,
body.page-category .cat-drill-item:focus-within .cat-drill-item-tools{ opacity: 1; }
    body.page-category .cat-drill-item-tool{
        width: 1.55rem; height: 1.55rem;
        border-radius: 5px;
        border: none;
        display: flex; align-items: center; justify-content: center;
        font-size: .65rem;
        cursor: pointer;
        transition: var(--transition-fast);
        background: rgba(255,255,255,.18);
        color: var(--text-700);
    }
    body.page-category .cat-drill-item:not(.is-selected) .cat-drill-item-tool{ background: var(--surface-gray-100); }
    body.page-category .cat-drill-item-tool.edit:hover{ background: var(--primary-green); color: #fff; }
    body.page-category .cat-drill-item-tool.delete:hover{ background: var(--error); color: #fff; }
    body.page-category .cat-drill-item.is-selected .cat-drill-item-tool{ color: #fff; }
    body.page-category .cat-drill-item.is-selected .cat-drill-item-tool:hover{ background: rgba(0,0,0,.25); }

    body.page-category .cat-drill-item-edit-input{
        flex: 1;
        min-width: 0;
        padding: .25rem .45rem;
        border: 1.5px solid var(--primary-green);
        border-radius: 5px;
        font-size: .8rem;
        font-weight: 600;
        background: var(--surface-white);
        color: var(--text-900);
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-category .cat-drill-add-row{
        display: flex;
        gap: .35rem;
        align-items: center;
        padding: .45rem .5rem;
        margin-bottom: .35rem;
        border: 1.5px dashed var(--primary-green);
        background: var(--primary-green-ghost);
        border-radius: var(--radius-md);
    }
    body.page-category .cat-drill-add-input{
        flex: 1;
        min-width: 0;
        padding: .3rem .5rem;
        border: 1px solid var(--border-200);
        border-radius: 5px;
        font-size: .8rem;
        font-weight: 500;
        background: var(--surface-white);
        outline: none;
    }
    body.page-category .cat-drill-add-input:focus{ border-color: var(--primary-green); box-shadow: 0 0 0 2px var(--primary-green-light); }
    body.page-category .cat-drill-add-btn{
        border: none;
        background: var(--primary-green);
        color: #fff;
        border-radius: 5px;
        padding: .3rem .55rem;
        font-size: .7rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex; align-items: center; gap: .25rem;
    }
    body.page-category .cat-drill-add-btn.cancel{ background: var(--surface-gray-200); color: var(--text-700); }
    body.page-category .cat-drill-add-btn:hover:not(.cancel){ background: var(--primary-green-dark); }
    body.page-category .cat-drill-col-action.is-active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }
    body.page-category .cat-drill-item-chev{
        font-size: .85rem;
        color: var(--primary-green);
        flex-shrink: 0;
    }
    body.page-category .cat-drill-item-leaf-dot{
        width: .45rem; height: .45rem;
        border-radius: 50%;
        background: var(--primary-green-light);
        flex-shrink: 0;
    }
    body.page-category .cat-drill-col.is-empty .cat-drill-col-body{
        align-items: center;
        justify-content: center;
        color: var(--text-500);
        font-size: .78rem;
        font-style: italic;
        text-align: center;
        padding: 1.25rem .75rem;
    }
    body.page-category .cat-drill-empty-illustration{
        font-size: 1.6rem;
        color: var(--primary-green-light);
        margin-bottom: .35rem;
    }

    body.page-category .cat-drill-col-foot{
        min-height: 32px;
        padding: .3rem .55rem;
        border-top: 1px solid var(--border-200);
        background: var(--surface-gray-50);
        font-size: .65rem;
        color: var(--text-500);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .35rem;
    }
    body.page-category .cat-drill-col-foot button{
        border: none;
        background: transparent;
        color: var(--primary-green);
        font-weight: 700;
        cursor: pointer;
        font-size: .68rem;
        display: inline-flex;
        align-items: center;
        gap: .2rem;
    }
    body.page-category .cat-drill-col-foot button:hover{ text-decoration: underline; }

    @media (max-width: 768px) {
        body.page-category .cat-drill-columns{
            grid-auto-columns: minmax(220px, min(82vw, 300px));
            gap: .65rem;
        }
        body.page-category .cat-drill-shell{ padding: .75rem; }
        body.page-category .cat-drill-col{
            min-height: 210px;
            height: 210px;
            max-height: 210px;
        }
        body.page-category .cat-drill-col-foot{
            flex-wrap: wrap;
            align-items: flex-start;
        }
        body.page-category .cat-drill-col-foot button{
            width: 100%;
            justify-content: flex-end;
        }
    }

    @media (max-width: 576px) {
        body.page-category .cat-controls-grid,
body.page-category .cat-sort-container,
body.page-category .cat-drill-add-row{
            flex-direction: column;
            align-items: stretch;
        }
        body.page-category .cat-search-container,
body.page-category .cat-sort-container,
body.page-category .cat-dropdown,
body.page-category .cat-add-btn,
body.page-category .cat-sort-label{
            width: 100%;
        }
        body.page-category .cat-sort-label{
            display: block;
            margin-bottom: .15rem;
        }
        body.page-category .cat-stats-grid{ grid-template-columns: 1fr; }
        body.page-category .cat-drill-shell{ padding: .65rem; }
        body.page-category .cat-drill-columns{ grid-auto-columns: minmax(100%, 100%); }
        body.page-category .cat-drill-scrollbar{ display: none; }
        body.page-category .cat-pagination-wrapper{ margin-top: 1rem; }
        body.page-category #categoryGrid{
            display: block;
            overflow: visible;
        }
        body.page-category #categoryGrid > *{
            flex: none;
        }
    }


/* ==========================================================
   Template: chat.html (page-chat)
   ========================================================== */

    /* ============================================================================
   WAZZIBOT CHAT - UNIFIED PROFESSIONAL THEME
   Modern, Clean Interface with Customer.html Consistency
============================================================================ */

    body.page-chat{
        /* ==== Color System (matches customer.html) ==== */
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;
        --text-400: #94a3b8;

        --border-200: #e5e7eb;
        --border-100: #f3f4f6;

        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;

        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);

        /* Legacy mappings */
        --primary: var(--primary-green);
        --primary-light: var(--primary-green-light);
        --primary-dark: var(--primary-green-dark);
        --text: var(--text-700);
        --text-secondary: var(--text-500);
        --text-muted: var(--text-400);
        --bg-page: var(--surface-gray-50);
        --bg-card: var(--surface-white);
        --border: var(--border-200);
        --border-light: var(--border-100);
        --border-dark: var(--surface-gray-200);

        /* Layout */
        --sidebar-width: 320px;
        --header-height: 64px;
        --font: "Poppins", sans-serif;
        --gap: 1.25rem;
        --gap-sm: 0.75rem;
        --gap-xs: 0.5rem;

        --vh: 1vh;
    }

    @supports (-webkit-touch-callout: none) {

        body.page-chat .chat-container,
body.page-chat .chat-sidebar,
body.page-chat .chat-main{
            height: calc(var(--vh, 1vh) * 100);
        }
    }

    body.page-chat .chat-container,
    body.page-chat .chat-container *,
    body.page-chat .chat-container *::before,
    body.page-chat .chat-container *::after{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body.page-chat .sr-only{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    html body.page-chat,
body.page-chat{
        height: 100%;
        overflow: hidden !important;
    }

    body.page-chat .chat-container{
        font-family: var(--font);
        background: var(--bg-page);
        color: var(--text);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 14px;
    }

    /* ===== Utility Classes ===== */
    body.page-chat .chat-container .hidden{
        display: none !important;
    }

    body.page-chat .chat-container .active{
        background: var(--primary) !important;
        color: white !important;
        border-color: var(--primary) !important;
    }

    body.page-chat .chat-container .disabled{
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    body.page-chat .chat-container .recording{
        color: var(--error) !important;
        animation: chat--pulse 1s infinite;
    }

    @keyframes chat--pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

    /* ===== Custom Scrollbar ===== */
    body.page-chat ::-webkit-scrollbar{
        width: 6px;
        height: 6px;
    }

    body.page-chat ::-webkit-scrollbar-track{
        background: var(--border-light);
        border-radius: 3px;
    }

    body.page-chat ::-webkit-scrollbar-thumb{
        background: var(--border-200);
        border-radius: 3px;
        transition: background var(--transition-fast);
    }

    body.page-chat ::-webkit-scrollbar-thumb:hover{
        background: var(--primary);
    }

    /* ===== Skeleton Loading ===== */
    @keyframes chat--shimmer {
        0% {
            background-position: -1000px 0;
        }

        100% {
            background-position: 1000px 0;
        }
    }

    body.page-chat .skeleton{
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 1000px 100%;
        animation: chat--shimmer 2s infinite linear;
        border-radius: var(--radius-md);
    }

    body.page-chat .skeleton-contact{
        padding: 0.875rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-bottom: 1px solid var(--border-light);
        margin: 0 0.5rem;
    }

    body.page-chat .skeleton-avatar{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    body.page-chat .skeleton-contact-info{
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    body.page-chat .skeleton-line{
        height: 12px;
        border-radius: 6px;
    }

    body.page-chat .skeleton-line.title{
        width: 65%;
        height: 14px;
    }

    body.page-chat .skeleton-line.subtitle{
        width: 85%;
    }

    body.page-chat .skeleton-message{
        max-width: 70%;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-xl);
        margin-bottom: 0.5rem;
    }

    body.page-chat .skeleton-message.left{
        align-self: flex-start;
    }

    body.page-chat .skeleton-message.right{
        align-self: flex-end;
    }

    body.page-chat .skeleton-message-content{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    body.page-chat .skeleton-message-line{
        height: 14px;
        border-radius: 7px;
    }

    body.page-chat .skeleton-message-line:first-child{
        width: 100%;
    }

    body.page-chat .skeleton-message-line:last-child{
        width: 45%;
    }

    /* ===== Bot ON Confirm Popup ===== */
    body.page-chat .bot-confirm-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
    }
    body.page-chat .bot-confirm-overlay.hidden{ display: none; }
    body.page-chat .bot-confirm-dialog{
        background: var(--surface-white);
        border-radius: var(--radius-xl);
        padding: 2rem 2rem 1.75rem;
        max-width: 420px;
        width: 90%;
        text-align: center;
        box-shadow: 0 25px 60px rgba(0,0,0,.25);
        animation: chat--popIn .2s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes chat--popIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    body.page-chat .bot-confirm-icon{
        width: 56px; height: 56px;
        border-radius: 50%;
        background: #fef3c7;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.6rem;
        margin: 0 auto .75rem;
    }
    body.page-chat .bot-confirm-dialog h3{ margin: 0 0 .5rem; color: var(--text-900); font-size: 1.15rem; font-weight: 700; }
    body.page-chat .bot-confirm-dialog p{ color: var(--text-500); margin: 0 0 1.5rem; font-size: .875rem; line-height: 1.5; }
    body.page-chat .bot-confirm-actions{ display: flex; gap: .75rem; justify-content: center; }
    body.page-chat .bot-confirm-cancel{
        padding: .6rem 1.25rem; border: 2px solid var(--border-200);
        border-radius: var(--radius-md); background: var(--surface-white);
        cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--text-700);
        transition: var(--transition-fast);
    }
    body.page-chat .bot-confirm-cancel:hover{ background: var(--surface-gray-100); }
    body.page-chat .bot-confirm-ok{
        padding: .6rem 1.25rem; background: var(--primary-green);
        color: white; border: none; border-radius: var(--radius-md);
        cursor: pointer; font-weight: 600; font-size: .875rem;
        transition: var(--transition-fast);
    }
    body.page-chat .bot-confirm-ok:hover{ background: var(--primary-green-dark); }

    /* ===== 24h Follow-up Template Popup ===== */
    body.page-chat .agent-template-overlay{
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(3px);
    }
    body.page-chat .agent-template-overlay.hidden{ display: none; }
    body.page-chat .agent-template-dialog{
        width: min(520px, 100%);
        max-height: min(720px, calc(100vh - 2rem));
        overflow-y: auto;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        box-shadow: 0 25px 60px rgba(0,0,0,.25);
        padding: 1.25rem;
        animation: chat--popIn .2s cubic-bezier(.34,1.56,.64,1);
    }
    body.page-chat .agent-template-header{
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: .85rem;
        align-items: center;
        margin-bottom: 1rem;
    }
    body.page-chat .agent-template-icon{
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.05rem;
    }
    body.page-chat .agent-template-header h3{
        margin: 0;
        color: var(--text-900);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.25;
    }
    body.page-chat .agent-template-header p{
        margin: .2rem 0 0;
        color: var(--text-500);
        font-size: .78rem;
        line-height: 1.4;
    }
    body.page-chat .agent-template-choice-list{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
        margin-bottom: 1rem;
    }
    body.page-chat .agent-template-choice{
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .55rem;
        padding: .7rem .8rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .84rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-chat .agent-template-choice i{
        width: 1rem;
        color: var(--primary-green);
        flex-shrink: 0;
    }
    body.page-chat .agent-template-choice:hover,
    body.page-chat .agent-template-choice.selected{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
        color: var(--text-900);
    }
    body.page-chat .agent-template-readonly-grid{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: .85rem;
    }
    body.page-chat .agent-template-readonly-grid label,
    body.page-chat .agent-template-free-text{
        display: flex;
        flex-direction: column;
        gap: .35rem;
        color: var(--text-700);
        font-size: .76rem;
        font-weight: 600;
    }
    body.page-chat .agent-template-readonly-grid input,
    body.page-chat .agent-template-free-text textarea{
        width: 100%;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-gray-50);
        color: var(--text-900);
        font: inherit;
        font-size: .86rem;
        line-height: 1.45;
    }
    body.page-chat .agent-template-readonly-grid input{
        height: 40px;
        padding: 0 .7rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.page-chat .agent-template-free-text textarea{
        min-height: 106px;
        max-height: 220px;
        padding: .7rem;
        resize: vertical;
    }
    body.page-chat .agent-template-free-text textarea:focus{
        outline: none;
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
        background: var(--surface-white);
    }
    body.page-chat .agent-template-error{
        margin-top: .65rem;
        color: var(--error);
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.4;
    }
    body.page-chat .agent-template-error.hidden{ display: none; }
    body.page-chat .agent-template-actions{
        display: flex;
        justify-content: flex-end;
        gap: .65rem;
        margin-top: 1rem;
    }
    body.page-chat .agent-template-cancel,
    body.page-chat .agent-template-send{
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        padding: .6rem 1rem;
        border-radius: var(--radius-md);
        font-size: .84rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-chat .agent-template-cancel{
        border: 1px solid var(--border-200);
        background: var(--surface-white);
        color: var(--text-700);
    }
    body.page-chat .agent-template-cancel:hover{ background: var(--surface-gray-100); }
    body.page-chat .agent-template-send{
        border: 1px solid var(--primary-green);
        background: var(--primary-green);
        color: #fff;
    }
    body.page-chat .agent-template-send:hover{ background: var(--primary-green-dark); }

    /* ===== Loading Overlay ===== */
    body.page-chat .loading-overlay{
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, .95);
        backdrop-filter: blur(8px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        flex-direction: column;
        gap: 1rem;
    }

    body.page-chat .loading-overlay.show{
        display: flex;
    }

    body.page-chat .loading-text{
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.9375rem;
    }

    /* ===== Main Layout ===== */
    body.page-chat .layout-wrapper,
body.page-chat .flex-fill{
        min-height: 0;
        overflow: hidden;
    }

    body.page-chat .content-area{
        flex: 1 1 auto;
        height: 0;
        min-height: 0;
        overflow: hidden !important;
        padding: 0 !important;
    }

    body.page-chat .chat-container{
        display: flex;
        height: 100%;
        min-height: 0;
        background: var(--bg-page);
        gap: 1rem;
        padding: 0.875rem;
        max-height: 100%;
        overflow: hidden;
    }

    /* ===== Sidebar ===== */
    body.page-chat .chat-container .chat-sidebar{
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        background: var(--bg-card);
        border-radius: var(--radius-xl);
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border);
        overflow: hidden;
        height: 100%;
        min-height: 0;
    }

    body.page-chat .chat-container .chat-sidebar .sidebar-header{
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
        background: var(--surface-white);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--header-height);
        flex-shrink: 0;
    }

    body.page-chat .chat-container .chat-sidebar .sidebar-header::before{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(2, 84, 45, 0.06);
        pointer-events: none;
    }

    body.page-chat .chat-sidebar .sidebar-title{
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary-green);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        letter-spacing: -0.01em;
        position: relative;
    }

    body.page-chat .chat-sidebar .sidebar-title i{
        color: var(--primary-green);
        font-size: 1.05rem;
    }

    body.page-chat .new-chat-btn{
        background: var(--gradient-primary);
        color: #fff;
        border: none;
        border-radius: var(--radius-lg);
        padding: 0 0.875rem;
        font-size: 0.8125rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 34px;
        box-shadow: 0 2px 8px rgba(2, 84, 45, 0.25);
        letter-spacing: 0.01em;
        flex-shrink: 0;
        position: relative;
    }

    body.page-chat .new-chat-btn:hover{
        background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(2, 84, 45, 0.35);
        color: #fff;
    }

    body.page-chat .new-chat-btn:active{
        transform: translateY(0);
        box-shadow: 0 1px 4px rgba(2, 84, 45, 0.2);
    }

    /* ===== Filter Tabs ===== */
    body.page-chat .chat-container .chat-filters{
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border);
        background: var(--surface-gray-50);
        flex-shrink: 0;
    }

    body.page-chat .chat-container .filter-tabs{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    body.page-chat .chat-container .filter-tab{
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        position: relative;
        height: 38px;
    }

    body.page-chat .filter-tab:hover{
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
        border-color: var(--primary);
    }

    body.page-chat .filter-tab.active{
        background: var(--gradient-primary);
        color: white;
        border-color: var(--primary);
        box-shadow: var(--shadow-md);
    }

    body.page-chat .status-indicator{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--error);
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

    body.page-chat .status-indicator.online{
        background: var(--success);
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    body.page-chat .filter-badge{
        background: rgba(255, 255, 255, 0.25);
        color: inherit;
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
        border-radius: 10px;
        font-weight: 700;
        min-width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    body.page-chat .filter-tab.active .filter-badge{
        background: rgba(255, 255, 255, 0.3);
    }

    /* ===== Search ===== */
    body.page-chat .chat-container .search-container{
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }

    body.page-chat .chat-container .search-wrapper{
        position: relative;
        display: flex;
        align-items: center;
        background: var(--surface-gray-50);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 0.625rem 0.875rem;
        transition: var(--transition-fast);
        height: 40px;
    }

    body.page-chat .chat-container .search-wrapper:focus-within{
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-green-light);
        background: var(--bg-card);
    }

    body.page-chat .chat-container .search-wrapper i{
        color: var(--text-muted);
        margin-right: 0.625rem;
        font-size: 0.875rem;
    }

    body.page-chat .chat-container .search-input{
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.8125rem;
        color: var(--text);
        font-family: var(--font);
        font-weight: 500;
    }

    body.page-chat .search-input::placeholder{
        color: var(--text-muted);
        font-weight: 400;
    }

    /* ===== Contact List ===== */
    body.page-chat .chat-container .contact-list-container{
        flex: 1;
        overflow: hidden;
        position: relative;
        min-height: 0;
    }

    body.page-chat .chat-container .contact-list{
        height: 100%;
        overflow-y: auto;
        padding: 0.5rem 0;
        overscroll-behavior: contain;
    }

    body.page-chat .chat-container .contact-item{
        padding: 0.875rem 1rem;
        cursor: pointer;
        transition: var(--transition-fast);
        border-bottom: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
        margin: 0 0.5rem 0.25rem;
        border-radius: var(--radius-md);
    }

    body.page-chat .chat-container .contact-item:hover{
        background: var(--primary-green-ghost);
        transform: translateX(2px);
        border-bottom-color: transparent;
    }

    body.page-chat .chat-container .contact-item.active{
        background: var(--gradient-primary);
        color: white;
        border-bottom-color: transparent;
        box-shadow: var(--shadow-md);
        transform: translateX(2px);
    }

    body.page-chat .contact-item.active .contact-name,
body.page-chat .contact-item.active .contact-preview,
body.page-chat .contact-item.active .contact-time,
body.page-chat .contact-item.active .contact-assigned{
        color: rgba(255, 255, 255, 0.95);
    }

    body.page-chat .chat-container .contact-avatar{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.875rem;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm);
        text-transform: uppercase;
    }

    body.page-chat .contact-item.active .contact-avatar{
        background: rgba(255, 255, 255, 0.2);
        color: white;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    body.page-chat .chat-container .contact-info{
        flex: 1;
        min-width: 0;
    }

    body.page-chat .chat-container .contact-name{
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-900);
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    body.page-chat .chat-container .contact-preview{
        font-size: 0.75rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    body.page-chat .chat-container .contact-assigned{
        font-size: 0.6875rem;
        color: var(--primary);
        margin-top: 0.125rem;
        font-weight: 600;
    }

    body.page-chat .contact-meta{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.375rem;
        flex-shrink: 0;
    }

    body.page-chat .contact-time{
        font-size: 0.6875rem;
        color: var(--text-muted);
        font-weight: 600;
        white-space: nowrap;
    }

    body.page-chat .contact-status{
        padding: 0.125rem 0.5rem;
        border-radius: 12px;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border: 1px solid transparent;
        line-height: 1.4;
    }

    body.page-chat .contact-status.online{
        background: rgba(34, 197, 94, 0.1);
        color: var(--success);
        border-color: rgba(34, 197, 94, 0.2);
    }

    body.page-chat .contact-status.offline{
        background: rgba(107, 114, 128, 0.1);
        color: var(--text-400);
        border-color: rgba(107, 114, 128, 0.15);
    }

    body.page-chat .contact-item.active .contact-status.online,
body.page-chat .contact-item.active .contact-status.offline{
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border-color: rgba(255, 255, 255, 0.3);
    }

    /* ===== Loading & Empty States ===== */
    body.page-chat .loading-state,
body.page-chat .empty-state{
        padding: 2rem 1rem;
        text-align: center;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    body.page-chat .loading-state.hidden,
body.page-chat .empty-state.hidden{
        display: none;
    }

    body.page-chat .empty-state i{
        font-size: 2.5rem;
        opacity: 0.4;
        color: var(--primary);
    }

    body.page-chat .empty-state div:first-of-type{
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-700);
    }

    body.page-chat .contacts-error p{
        margin: 0;
        max-width: 220px;
        color: var(--text-secondary);
        font-size: 0.75rem;
        line-height: 1.5;
    }

    body.page-chat .contacts-retry-btn{
        min-height: 38px;
        padding: 0.5rem 1rem;
        border: 1px solid var(--primary-green);
        border-radius: var(--radius-lg);
        background: var(--primary-green);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font: 600 0.75rem var(--font);
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-chat .contacts-retry-btn:hover{
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: translateY(-1px);
    }

    /* ===== Main Chat Area ===== */
    body.page-chat .chat-container .chat-main{
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--bg-card);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border);
        overflow: hidden;
        height: 100%;
        min-height: 0;
        min-width: 0;
    }

    body.page-chat .chat-container .chat-header{
        height: var(--header-height);
        padding: 0 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        background: var(--bg-card);
        background-image: linear-gradient(to right, var(--primary-green-ghost), transparent 60%);
        border-top: 3px solid var(--primary-green);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        gap: 1rem;
    }

    body.page-chat .chat-container .chat-contact-info{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.page-chat .chat-container .chat-avatar{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.875rem;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm);
        text-transform: uppercase;
    }

    body.page-chat .chat-container .chat-contact-details{
        flex: 1;
        min-width: 0;
    }

    body.page-chat .chat-container .chat-contact-name{
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-900);
        margin-bottom: 0.125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    body.page-chat .chat-container .chat-contact-status{
        font-size: 0.75rem;
        color: var(--text-secondary);
        line-height: 1.3;
    }

    body.page-chat .chat-container .chat-actions{
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Conversation actions and composer are invalid before a row is selected. */
    body.page-chat:not(.chat-has-selection) .chat-container #chatHeaderActions,
    body.page-chat:not(.chat-has-selection) .chat-container .message-composer{
        display: none !important;
    }

    body.page-chat .chat-container .chat-control-btn{
        padding: 0 1rem;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        color: var(--text-700);
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition-fast);
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 90px;
        font-family: var(--font);
        white-space: nowrap;
        box-shadow: var(--shadow-xs);
    }

    body.page-chat .chat-container .chat-control-btn:hover{
        background: var(--primary-green-ghost);
        border-color: var(--primary-green);
        color: var(--primary-green);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    body.page-chat .chat-container .chat-control-btn.active{
        background: var(--gradient-primary);
        color: white;
        border-color: var(--primary-green);
        box-shadow: var(--shadow-md);
    }

    body.page-chat .chat-container .chat-control-btn.disabled{
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

    body.page-chat .chat-container .action-btn{
        width: 36px;
        height: 36px;
        border: 1.5px solid transparent;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-fast);
        font-size: 0.9rem;
    }

    body.page-chat .chat-container .action-btn:hover{
        background: var(--primary-green-ghost);
        color: var(--primary-green);
        border-color: var(--primary-green-light);
        transform: translateY(-1px);
        box-shadow: var(--shadow-xs);
    }

    /* ===== Chat Messages Area ===== */
    body.page-chat .chat-container .chat-messages-container{
        flex: 1;
        overflow: hidden;
        position: relative;
        background: var(--surface-gray-50);
        background-image:
            radial-gradient(circle at 25px 25px, rgba(2, 84, 45, 0.015) 2px, transparent 2px),
            radial-gradient(circle at 75px 75px, rgba(2, 84, 45, 0.01) 2px, transparent 2px);
        background-size: 100px 100px;
        min-height: 0;
    }

    body.page-chat .chat-container .chat-messages{
        height: 100%;
        overflow-y: auto;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        scroll-behavior: smooth;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.page-chat .chat-messages.hidden{
        display: none;
    }

    /* ===== Welcome Screen ===== */
    body.page-chat .chat-container .welcome-screen{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
        color: var(--text-secondary);
        gap: 1rem;
    }

    body.page-chat .welcome-screen.hidden{
        display: none;
    }

    body.page-chat .chat-container .welcome-icon{
        font-size: 4rem;
        color: var(--primary);
        opacity: 0.25;
        margin-bottom: 0.5rem;
    }

    body.page-chat .welcome-title{
        font-size: 1.375rem;
        font-weight: 700;
        color: var(--text-900);
        margin-bottom: 0.25rem;
        letter-spacing: -0.01em;
    }

    body.page-chat .welcome-subtitle{
        font-size: 0.9375rem;
        color: var(--text-secondary);
        max-width: 380px;
        line-height: 1.6;
    }

    /* ===== Date Separator ===== */
    body.page-chat .date-separator{
        align-self: center;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 0.25rem 0.75rem;
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--text-500);
        margin: 0.5rem 0;
        box-shadow: var(--shadow-sm);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* ===== Messages ===== */
    body.page-chat .chat-container .message{
        max-width: 75%;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-xl);
        position: relative;
        word-wrap: break-word;
        line-height: 1.5;
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
        animation: chat--messageSlide 0.3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--shadow-sm);
        border: 1px solid transparent;
    }

    /* User messages (incoming) - LEFT */
    body.page-chat .chat-container .message.incoming{
        align-self: flex-start;
        background: var(--bg-card);
        color: var(--text-900);
        border-color: var(--border);
        border-bottom-left-radius: 4px;
    }

    /* Bot messages (outgoing) - RIGHT */
    body.page-chat .chat-container .message.outgoing{
        align-self: flex-end;
        background: var(--gradient-primary);
        color: white;
        border-color: var(--primary-dark);
        border-bottom-right-radius: 4px;
    }

    body.page-chat .message.hidden{
        display: none;
    }

    @keyframes chat--messageSlide {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-chat .chat-container .message-content{
        margin-bottom: 0.25rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    body.page-chat .chat-container .message-content a{
        color: inherit;
        text-decoration: underline;
        opacity: 0.9;
        word-break: break-all;
    }

    body.page-chat .message-content a:hover{
        opacity: 1;
    }

    body.page-chat .message-meta{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        font-size: 0.6875rem;
        opacity: 0.75;
        margin-top: 0.25rem;
    }

    body.page-chat .message-time{
        font-weight: 600;
    }

    body.page-chat .message-status{
        display: flex;
        align-items: center;
    }

    body.page-chat .message-status.sent{
        color: currentColor;
    }

    body.page-chat .message-status.delivered{
        color: currentColor;
    }

    body.page-chat .message-status.read{
        color: var(--success);
    }

    /* ===== Load Earlier Button ===== */
    body.page-chat .load-earlier-btn{
        align-self: center;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--primary);
        cursor: pointer;
        margin: 0.5rem 0;
        transition: var(--transition-fast);
        box-shadow: var(--shadow-sm);
        font-family: var(--font);
    }

    body.page-chat .load-earlier-btn:hover{
        background: var(--primary-green-ghost);
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    body.page-chat .load-earlier-btn.hidden{
        display: none;
    }

    /* ===== Message Composer ===== */
    body.page-chat .message-composer{
        padding: 0.875rem 1.25rem;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        background-image: linear-gradient(to top, var(--primary-green-ghost), transparent);
        display: flex;
        align-items: flex-end;
        gap: 0.625rem;
        flex-shrink: 0;
    }

    body.page-chat .composer-stack{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    body.page-chat .media-composer-panel{
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        box-shadow: var(--shadow-sm);
        padding: 0.625rem 0.75rem;
    }

    body.page-chat .recording-state,
    body.page-chat .media-preview{
        display: flex;
        align-items: center;
        gap: 0.625rem;
        min-width: 0;
    }

    body.page-chat .recording-dot{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--error);
        flex-shrink: 0;
        animation: chat--pulse 1s infinite;
    }

    body.page-chat .media-preview-icon{
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--primary);
        background: var(--primary-green-ghost);
    }

    body.page-chat .media-preview-details{
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
        gap: 0.125rem;
        color: var(--text-900);
        font-size: 0.8125rem;
    }

    body.page-chat .media-preview-details strong{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-chat .media-preview-details > span:not(.media-upload-error){
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    body.page-chat .audio-preview{
        width: min(360px, 100%);
        height: 34px;
        margin-top: 0.25rem;
    }

    body.page-chat .image-preview{
        width: min(180px, 100%);
        max-height: 120px;
        object-fit: cover;
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        margin-top: 0.25rem;
        align-self: flex-start;
    }

    body.page-chat .media-action-btn{
        min-height: 32px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-gray-50);
        color: var(--text-700);
        padding: 0.375rem 0.625rem;
        cursor: pointer;
        font: 600 0.75rem var(--font);
        flex-shrink: 0;
    }

    body.page-chat .media-action-btn:hover{
        border-color: var(--primary);
        color: var(--primary);
    }

    body.page-chat .media-stop-btn{
        border-color: var(--error);
        color: var(--error);
    }

    body.page-chat .media-upload-error{
        color: var(--error);
        font-size: 0.75rem;
        line-height: 1.35;
    }

    body.page-chat .composer-container{
        flex: 1;
        background: var(--surface-gray-50);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-xl);
        padding: 0.5rem 0.875rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: var(--transition-fast);
        min-height: 44px;
    }

    body.page-chat .composer-container:focus-within{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
        background: var(--bg-card);
    }

    body.page-chat .message-input{
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.875rem;
        color: var(--text-900);
        resize: none;
        max-height: 100px;
        min-height: 22px;
        line-height: 1.5;
        font-family: var(--font);
        font-weight: 500;
    }

    body.page-chat .message-input::placeholder{
        color: var(--text-muted);
        font-weight: 400;
    }

    body.page-chat .composer-actions{
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    body.page-chat .composer-btn{
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-fast);
        font-size: 0.875rem;
    }

    body.page-chat .composer-btn:hover{
        background: var(--border-200);
        color: var(--primary);
        transform: scale(1.1);
    }

    body.page-chat .send-btn{
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-fast);
        flex-shrink: 0;
        box-shadow: var(--shadow-md);
        font-size: 0.9375rem;
    }

    body.page-chat .send-btn:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    body.page-chat .send-btn:active{
        transform: translateY(0);
    }

    body.page-chat .send-btn:disabled{
        opacity: 0.55;
        cursor: wait;
        transform: none;
    }

    body.page-chat .message-audio{
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: min(280px, 65vw);
    }

    body.page-chat .message-audio audio{
        width: 100%;
        height: 36px;
    }

    body.page-chat .message-audio a{
        align-self: flex-end;
        color: inherit;
        font-size: 0.6875rem;
    }

    body.page-chat .message-image-link{
        display: block;
        max-width: min(320px, 70vw);
        color: inherit;
        text-decoration: none;
    }

    body.page-chat .message-image{
        display: block;
        width: 100%;
        max-height: 360px;
        object-fit: contain;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.14);
    }

    body.page-chat .message-document{
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.14);
        color: inherit;
        text-decoration: none;
        max-width: 320px;
    }

    body.page-chat .message-document i{
        font-size: 1.25rem;
    }

    body.page-chat .message-document span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ===== Notifications ===== */
    body.page-chat .new-message-indicator{
        position: fixed;
        bottom: 120px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 24px;
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: var(--transition);
        box-shadow: var(--shadow-xl);
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.page-chat .new-message-indicator.show{
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(-10px);
    }

    /* ===== Menu Dropdown ===== */
    body.page-chat .chat-menu{
        position: absolute;
        top: calc(var(--header-height) + 0.5rem);
        right: 1.25rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        min-width: 200px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: var(--transition-fast);
        z-index: 1000;
    }

    body.page-chat .chat-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    body.page-chat .menu-item{
        width: 100%;
        padding: 0.75rem 1rem;
        border: none;
        background: transparent;
        color: var(--text-700);
        font-size: 0.875rem;
        text-align: left;
        cursor: pointer;
        transition: var(--transition-fast);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-family: var(--font);
        font-weight: 500;
    }

    body.page-chat .menu-item:hover{
        background: var(--primary-green-ghost);
    }

    body.page-chat .menu-item i{
        width: 18px;
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    /* ===== Toast Notifications ===== */
    body.page-chat .toast{
        position: fixed;
        top: 1.25rem;
        right: 1.25rem;
        z-index: 9999;
        padding: 0.875rem 1.125rem;
        border-radius: var(--radius-lg);
        color: white;
        font-weight: 600;
        font-size: 0.875rem;
        font-family: var(--font);
        box-shadow: var(--shadow-xl);
        transform: translateX(120%);
        transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
        max-width: 360px;
        border: 1px solid transparent;
    }

    body.page-chat .toast.show{
        transform: translateX(0);
    }

    body.page-chat .toast-success{
        background: var(--success);
        border-color: rgba(34, 197, 94, 0.3);
    }

    body.page-chat .toast-error{
        background: var(--error);
        border-color: rgba(239, 68, 68, 0.3);
    }

    body.page-chat .toast-content{
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ===== Upload Status ===== */
    body.page-chat .upload-status{
        position: fixed;
        bottom: 1.25rem;
        right: 1.25rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        padding: 0.75rem 1rem;
        box-shadow: var(--shadow-lg);
        display: none;
        align-items: center;
        gap: 0.75rem;
        z-index: 1000;
        max-width: 280px;
        color: var(--text-700);
        font-size: 0.875rem;
        font-weight: 500;
    }

    body.page-chat .upload-status.show{
        display: flex;
    }

    body.page-chat .upload-status.success{
        border-color: var(--success);
        color: var(--success);
    }

    body.page-chat .upload-status.error{
        border-color: var(--error);
        color: var(--error);
    }

    /* ===== Hidden Elements ===== */
    body.page-chat .top-bar,
body.page-chat #phoneBar{
        display: none !important;
    }

    /* ===== Mobile Overlay ===== */
    body.page-chat .mobile-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 1400;
    }

    body.page-chat .mobile-overlay.show{
        opacity: 1;
        visibility: visible;
    }

    /* ===== Responsive Design ===== */
    @media (max-width: 1200px) {
        body.page-chat .chat-container{
            gap: 0.75rem;
            padding: 0.75rem;
        }

        body.page-chat .chat-sidebar{
            width: 280px;
            min-width: 280px;
        }
    }

    @media (max-width: 992px) {
        body.page-chat{
            --sidebar-width: 260px;
        }

        body.page-chat .chat-sidebar{
            width: 260px;
            min-width: 260px;
        }

        body.page-chat .chat-sidebar .sidebar-title{
            font-size: 1rem;
        }

        body.page-chat .chat-control-btn{
            min-width: 70px;
            font-size: 0.7rem;
            padding: 0.4rem 0.75rem;
        }
    }

    @media (max-width: 768px) {
        /* ── Chat fills remaining space below the navbar ── */
        body.page-chat .agent-template-dialog{
            max-height: calc(100vh - 1rem);
            padding: 1rem;
        }

        body.page-chat .agent-template-choice-list,
        body.page-chat .agent-template-readonly-grid{
            grid-template-columns: 1fr;
        }

        body.page-chat .agent-template-actions{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        body.page-chat .agent-template-cancel,
        body.page-chat .agent-template-send{
            width: 100%;
            padding-inline: .7rem;
        }

        body.page-chat .content-area{
            height: 0;
            min-height: 0;
            margin-top: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
        }

        body.page-chat .chat-container{
            flex-direction: column;
            gap: 0;
            padding: 0;
            height: 100%;
            max-height: 100%;
        }

        body.page-chat .chat-sidebar{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            min-width: auto;
            height: 100%;
            min-height: 0;
            z-index: 1500;
            transform: translateX(-100%);
            transition: transform var(--transition);
            border-radius: 0;
            padding-top: env(safe-area-inset-top, 0px);
        }

        body.page-chat .chat-sidebar.show{
            transform: translateX(0);
        }

        body.page-chat .chat-main{
            height: 100%;
            min-height: 0;
            border-radius: 0;
        }

        body.page-chat .message{
            max-width: 85%;
        }

        /* Header: keep single row, tighter spacing */
        body.page-chat .chat-header{
            padding: 0 0.75rem;
            gap: 0.5rem;
        }

        body.page-chat .chat-contact-info{
            flex: 1 1 0;
            min-width: 0;
        }

        /* CRITICAL FIX: prevent wrapping, scroll instead */
        body.page-chat .chat-actions{
            flex-wrap: nowrap;
            flex-shrink: 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            max-width: 55vw;
        }

        body.page-chat .chat-actions::-webkit-scrollbar{
            display: none;
        }

        body.page-chat .chat-control-btn{
            min-width: 64px;
            font-size: 0.6875rem;
            padding: 0 0.625rem;
            height: 32px;
            flex-shrink: 0;
        }

        body.page-chat #openSidebarBtn{
            display: flex !important;
        }
    }

    @media (max-width: 480px) {
        body.page-chat{
            font-size: 13px;
        }

        body.page-chat .chat-sidebar .sidebar-title{
            font-size: 0.9375rem;
        }

        body.page-chat .contact-item{
            padding: 0.75rem 0.875rem;
        }

        body.page-chat .contact-avatar,
body.page-chat .chat-avatar{
            width: 36px;
            height: 36px;
            font-size: 0.75rem;
        }

        /* 2-row header: row1 = hamburger+contact, row2 = action buttons */
        body.page-chat .chat-header{
            flex-wrap: wrap;
            height: auto;
            min-height: var(--header-height);
            padding: 0.5rem 0.75rem 0;
            align-items: center;
            row-gap: 0;
        }

        body.page-chat #openSidebarBtn{
            flex-shrink: 0;
        }

        body.page-chat .chat-contact-info{
            flex: 1;
            min-width: 0;
        }

        body.page-chat .chat-contact-name{
            font-size: 0.8125rem;
        }

        body.page-chat .chat-contact-status{
            font-size: 0.625rem;
        }

        /* Action bar drops to its own full-width row */
        body.page-chat .chat-actions{
            width: calc(100% + 1.5rem);
            margin-left: -0.75rem;
            max-width: none;
            flex-wrap: nowrap;
            overflow-x: auto;
            justify-content: flex-start;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem 0.4rem;
            border-top: 1px solid var(--border);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        body.page-chat .chat-actions::-webkit-scrollbar{
            display: none;
        }

        body.page-chat .chat-control-btn{
            min-width: 58px;
            height: 28px;
            font-size: 0.6rem;
            padding: 0 0.5rem;
            flex-shrink: 0;
        }

        body.page-chat .action-btn{
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }

        body.page-chat .message{
            max-width: 90%;
            font-size: 0.8125rem;
            padding: 0.5rem 0.75rem;
        }

        body.page-chat .chat-messages{
            padding: 0.875rem 0.75rem;
        }

        body.page-chat .message-composer{
            padding: 0.625rem 0.75rem;
            padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
        }

        body.page-chat .media-composer-panel{
            padding: 0.5rem;
        }

        body.page-chat .recording-state,
        body.page-chat .media-preview{
            flex-wrap: wrap;
        }

        body.page-chat .media-preview-details{
            min-width: calc(100% - 52px);
        }

        body.page-chat .composer-container{
            padding: 0.375rem 0.75rem;
            min-height: 40px;
        }

        body.page-chat .send-btn{
            width: 40px;
            height: 40px;
        }

        /* Welcome screen: scale down for small screens */
        body.page-chat .welcome-icon{
            font-size: 2.5rem;
        }

        body.page-chat .welcome-title{
            font-size: 1.125rem;
        }

        body.page-chat .welcome-subtitle{
            font-size: 0.8125rem;
            max-width: 100%;
        }
    }

    /* Extra small phones (iPhone SE, Galaxy A) */
    @media (max-width: 360px) {
        body.page-chat .chat-header{
            padding: 0.5rem 0.625rem 0;
        }

        body.page-chat .chat-actions{
            width: calc(100% + 1.25rem);
            margin-left: -0.625rem;
            padding: 0.375rem 0.625rem 0.375rem;
        }

        body.page-chat .chat-control-btn{
            min-width: 50px;
            font-size: 0.5625rem;
        }

        body.page-chat .contact-item{
            padding: 0.625rem 0.75rem;
        }
    }

    /* ===== Animation Classes ===== */
    body.page-chat .animate-in{
        animation: chat--slideInUp 0.3s cubic-bezier(.4, 0, .2, 1);
    }

    @keyframes chat--slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-chat .fade-in{
        animation: chat--fadeIn 0.2s ease;
    }

    @keyframes chat--fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* ===== Focus States for Accessibility ===== */
    body.page-chat .chat-control-btn:focus,
body.page-chat .action-btn:focus,
body.page-chat .filter-tab:focus,
body.page-chat .menu-item:focus,
body.page-chat .send-btn:focus,
body.page-chat .composer-btn:focus,
body.page-chat .new-chat-btn:focus,
body.page-chat .load-earlier-btn:focus{
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    body.page-chat .search-input:focus{
        outline: none;
    }

    /* ===== Dark Mode ===== */
    html[data-theme="dark"] body.page-chat{
        color-scheme: dark;
        --primary-green: #084928;
        --primary-green-dark: #06341c;
        --primary-green-light: rgba(8, 73, 40, 0.2);
        --primary-green-ghost: rgba(8, 73, 40, 0.12);
        --surface-white: #101814;
        --surface-gray-50: #0c1210;
        --surface-gray-100: #101916;
        --surface-gray-200: #1b2721;
        --text-900: #eef6f1;
        --text-700: #cad7cf;
        --text-500: #96a59d;
        --text-400: #73837a;
        --border-200: #22322b;
        --border-100: #18231d;
        --success: #34d399;
        --warning: #fbbf24;
        --error: #f87171;
        --shadow-xs: 0 1px 2px rgb(0 0 0 / .35);
        --shadow-sm: 0 1px 3px rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .35);
        --shadow-md: 0 12px 24px rgb(0 0 0 / .38);
        --shadow-lg: 0 20px 40px rgb(0 0 0 / .45);
        --shadow-xl: 0 28px 56px rgb(0 0 0 / .55);
        --gradient-primary: linear-gradient(135deg, #0c6237 0%, #084928 100%);
        --bg-page: #07100c;
        --bg-card: #0e1512;
        --border: var(--border-200);
        --border-light: var(--border-100);
        --border-dark: #2a3a33;
    }

    html[data-theme="dark"] body.page-chat{
        background:
            radial-gradient(circle at top left, rgba(8, 73, 40, 0.16), transparent 30%),
            radial-gradient(circle at top right, rgba(8, 73, 40, 0.08), transparent 24%),
            linear-gradient(180deg, #07100c 0%, #090f0c 100%);
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-chat .chat-container{
        background: transparent;
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-sidebar,
html[data-theme="dark"] body.page-chat .chat-container .chat-main{
        background: linear-gradient(180deg, rgba(16, 24, 20, 0.98), rgba(10, 16, 13, 0.98));
        border-color: rgba(255, 255, 255, 0.07);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-sidebar .sidebar-header{
        background: rgba(255, 255, 255, 0.015);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-sidebar .sidebar-header::before{
        background: linear-gradient(90deg, rgba(8, 73, 40, 0.16), transparent 70%);
    }

    html[data-theme="dark"] body.page-chat .chat-sidebar .sidebar-title,
html[data-theme="dark"] body.page-chat .chat-sidebar .sidebar-title i{
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-filters,
html[data-theme="dark"] body.page-chat .chat-container .search-container{
        background: transparent;
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] body.page-chat .chat-container .filter-tab{
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--text-700);
        box-shadow: none;
    }

    html[data-theme="dark"] body.page-chat .chat-container .filter-tab:hover{
        background: rgba(8, 73, 40, 0.16);
        border-color: rgba(8, 73, 40, 0.45);
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-chat .chat-container .filter-tab.active{
        background: var(--gradient-primary);
        color: #fff;
        border-color: rgba(8, 73, 40, 0.75);
        box-shadow: 0 10px 24px rgba(8, 73, 40, 0.25);
    }

    html[data-theme="dark"] body.page-chat .filter-badge{
        background: rgba(255, 255, 255, 0.12);
    }

    html[data-theme="dark"] body.page-chat .chat-container .search-wrapper,
html[data-theme="dark"] body.page-chat .composer-container{
        background: rgba(255, 255, 255, 0.035);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-chat .media-composer-panel,
    html[data-theme="dark"] body.page-chat .media-action-btn{
        background: rgba(255, 255, 255, 0.035);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-chat .chat-container .search-wrapper:focus-within,
html[data-theme="dark"] body.page-chat .composer-container:focus-within{
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(8, 73, 40, 0.55);
        box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.18);
    }

    html[data-theme="dark"] body.page-chat .chat-container .search-wrapper i,
html[data-theme="dark"] body.page-chat .chat-container .action-btn,
html[data-theme="dark"] body.page-chat .composer-btn,
html[data-theme="dark"] body.page-chat .menu-item i{
        color: var(--text-400);
    }

    html[data-theme="dark"] body.page-chat .chat-container .search-input,
html[data-theme="dark"] body.page-chat .message-input{
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-chat .search-input::placeholder,
html[data-theme="dark"] body.page-chat .message-input::placeholder{
        color: var(--text-400);
    }

    html[data-theme="dark"] body.page-chat .chat-container .contact-item{
        border-bottom-color: rgba(255, 255, 255, 0.04);
    }

    html[data-theme="dark"] body.page-chat .chat-container .contact-item:hover{
        background: rgba(8, 73, 40, 0.12);
    }

    html[data-theme="dark"] body.page-chat .chat-container .contact-name,
html[data-theme="dark"] body.page-chat .chat-container .chat-contact-name,
html[data-theme="dark"] body.page-chat .welcome-title,
html[data-theme="dark"] body.page-chat .bot-confirm-dialog h3{
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-chat .chat-container .contact-preview,
html[data-theme="dark"] body.page-chat .chat-container .contact-time,
html[data-theme="dark"] body.page-chat .chat-container .chat-contact-status,
html[data-theme="dark"] body.page-chat .welcome-subtitle,
html[data-theme="dark"] body.page-chat .loading-text,
html[data-theme="dark"] body.page-chat .menu-item{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-chat .chat-container .contact-assigned{
        color: #7ee0b0;
    }

    html[data-theme="dark"] body.page-chat .chat-container .contact-avatar,
html[data-theme="dark"] body.page-chat .chat-container .chat-avatar{
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }

    html[data-theme="dark"] body.page-chat .chat-container .contact-item.active .contact-name,
html[data-theme="dark"] body.page-chat .chat-container .contact-item.active .contact-preview,
html[data-theme="dark"] body.page-chat .chat-container .contact-item.active .contact-time,
html[data-theme="dark"] body.page-chat .chat-container .contact-item.active .contact-assigned{
        color: rgba(255, 255, 255, 0.95);
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-header{
        background-color: rgba(13, 19, 16, 0.96);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
        border-bottom-color: rgba(255, 255, 255, 0.06);
        border-top-color: var(--primary-green);
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-control-btn,
html[data-theme="dark"] body.page-chat .chat-container .action-btn{
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-control-btn:hover,
html[data-theme="dark"] body.page-chat .chat-container .action-btn:hover,
html[data-theme="dark"] body.page-chat .composer-btn:hover,
html[data-theme="dark"] body.page-chat .menu-item:hover{
        background: rgba(8, 73, 40, 0.16);
        color: var(--text-900);
        border-color: rgba(8, 73, 40, 0.42);
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-control-btn.active{
        color: #fff;
    }

    html[data-theme="dark"] body.page-chat .chat-container .chat-messages-container{
        background:
            radial-gradient(circle at 20% 20%, rgba(8, 73, 40, 0.10) 0, transparent 24%),
            radial-gradient(circle at 80% 0%, rgba(8, 73, 40, 0.06) 0, transparent 20%),
            linear-gradient(180deg, #0a120f 0%, #0c1310 100%);
    }

    html[data-theme="dark"] body.page-chat .chat-container .welcome-screen{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-chat .chat-container .welcome-icon{
        color: var(--primary-green);
        opacity: 0.85;
    }

    html[data-theme="dark"] body.page-chat .date-separator,
html[data-theme="dark"] body.page-chat .load-earlier-btn{
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-chat .load-earlier-btn:hover{
        background: rgba(8, 73, 40, 0.16);
        border-color: rgba(8, 73, 40, 0.42);
    }

    html[data-theme="dark"] body.page-chat .chat-container .message.incoming{
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-900);
        border-color: rgba(255, 255, 255, 0.07);
    }

    html[data-theme="dark"] body.page-chat .chat-container .message.outgoing{
        background: linear-gradient(135deg, rgba(10, 88, 49, 0.98), rgba(8, 73, 40, 0.98));
        color: #f7fbf9;
        border-color: rgba(8, 73, 40, 0.72);
    }

    html[data-theme="dark"] body.page-chat .message-meta{
        opacity: 0.85;
    }

    html[data-theme="dark"] body.page-chat .message-status.read{
        color: #34d399;
    }

    html[data-theme="dark"] body.page-chat .chat-menu{
        background: #0f1713;
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-chat .menu-item i{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-chat .menu-item:hover i{
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-chat .loading-overlay{
        background: rgba(5, 9, 7, 0.94);
    }

    html[data-theme="dark"] body.page-chat .skeleton{
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.05) 75%);
        background-size: 1000px 100%;
    }

    html[data-theme="dark"] body.page-chat .bot-confirm-dialog{
        background: #0f1713;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
    }

    html[data-theme="dark"] body.page-chat .agent-template-dialog{
        background: #0f1713;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
    }

    html[data-theme="dark"] body.page-chat .agent-template-icon{
        background: rgba(8, 73, 40, 0.18);
        color: #bbf7d0;
    }

    html[data-theme="dark"] body.page-chat .agent-template-choice,
    html[data-theme="dark"] body.page-chat .agent-template-readonly-grid input,
    html[data-theme="dark"] body.page-chat .agent-template-free-text textarea,
    html[data-theme="dark"] body.page-chat .agent-template-cancel{
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-chat .agent-template-choice:hover,
    html[data-theme="dark"] body.page-chat .agent-template-choice.selected,
    html[data-theme="dark"] body.page-chat .agent-template-free-text textarea:focus{
        background: rgba(8, 73, 40, 0.16);
        border-color: rgba(8, 73, 40, 0.55);
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-chat .bot-confirm-icon{
        background: rgba(8, 73, 40, 0.18);
        color: #bbf7d0;
    }

    html[data-theme="dark"] body.page-chat .bot-confirm-dialog p,
    html[data-theme="dark"] body.page-chat .agent-template-header p{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-chat .bot-confirm-cancel{
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-700);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-chat .bot-confirm-cancel:hover{
        background: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] body.page-chat .upload-status{
        background: #0f1713;
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-chat .toast{
        background: #0f1713;
        color: var(--text-700);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-chat .toast-success{
        background: rgba(34, 197, 94, 0.18);
        color: #dcfce7;
        border-color: rgba(34, 197, 94, 0.25);
    }

    html[data-theme="dark"] body.page-chat .toast-error{
        background: rgba(239, 68, 68, 0.18);
        color: #fee2e2;
        border-color: rgba(239, 68, 68, 0.25);
    }

    html[data-theme="dark"] body.page-chat .empty-state i{
        color: var(--primary-green);
        opacity: 0.8;
    }

    html[data-theme="dark"] body.page-chat .empty-state div:first-of-type{
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-chat .loading-state,
html[data-theme="dark"] body.page-chat .empty-state{
        color: var(--text-500);
    }


/* ==========================================================
   Template: create_human_agent.html (page-create-human-agent)
   ========================================================== */

    body.page-create-human-agent .agent-layout,
body.page-create-human-agent .agent-layout *{
        --primary: var(--brand-primary);
        --primary-light: var(--brand-primary);
        --primary-dark: var(--brand-secondary);
        --secondary: #4ade80;
        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;
        --accent: var(--ink-200);
        --text: var(--ink-800);
        --text-secondary: var(--ink-600);
        --text-muted: var(--ink-400);
        --bg-page: var(--surface-secondary);
        --bg-card: var(--surface-primary);
        --border: var(--ink-200);
        --border-light: var(--surface-secondary);
        --radius: .5rem;
        --radius-lg: .875rem;
        --shadow: var(--shadow-sm);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --gap: 1rem;
        --gap-sm: .75rem;
        --gap-xs: .375rem;
        --transition: var(--fast);
        --sidebar-width: 270px;
        accent-color: var(--brand-primary);
    }

    body.page-create-human-agent .progress-container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--ink-200);
        z-index: 1000;
        overflow: hidden;
    }

    body.page-create-human-agent .progress-bar-custom{
        height: 100%;
        width: 0;
        background: var(--brand-primary);
        transition: width .35s var(--easing);
    }

    body.page-create-human-agent .agent-layout{
        display: grid;
        grid-template-columns: minmax(260px, 280px) minmax(0, 1fr);
        gap: 1rem;
        padding: .875rem;
        min-height: calc(100vh - 50px);
        margin: 0 auto;
    }

    body.page-create-human-agent .agent-sidebar{
        width: 100%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 247, 0.94) 100%);
        border: 1px solid rgba(2, 84, 45, 0.12);
        border-radius: 1.05rem;
        box-shadow: 0 18px 34px -32px rgba(15, 23, 42, 0.55);
        overflow: hidden;
        height: fit-content;
        position: sticky;
        top: .875rem;
        align-self: flex-start;
    }

    body.page-create-human-agent .agent-sidebar-header{
        padding: 1rem 1rem .95rem;
        position: relative;
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.12), rgba(2, 84, 45, 0.03));
        border-bottom: 1px solid rgba(2, 84, 45, 0.1);
    }

    body.page-create-human-agent .agent-sidebar-header::before{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.08), transparent 70%);
        pointer-events: none;
    }

    body.page-create-human-agent .agent-sidebar-title{
        margin: 0;
        display: flex;
        align-items: center;
        gap: .65rem;
        position: relative;
        z-index: 1;
        font-size: .92rem;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--ink-800);
    }

    body.page-create-human-agent .agent-sidebar-title i{
        width: 1.95rem;
        height: 1.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .7rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: #fff;
        font-size: .88rem;
        box-shadow: 0 10px 18px -14px rgba(2, 84, 45, 0.85);
        flex-shrink: 0;
    }

    body.page-create-human-agent .agent-sidebar-subtitle{
        position: relative;
        z-index: 1;
        margin: .5rem 0 0;
        font-size: .72rem;
        line-height: 1.5;
        color: var(--ink-500);
    }

    body.page-create-human-agent .agent-steps{
        list-style: none;
        padding: .35rem 0;
        margin: 0;
    }

    body.page-create-human-agent .step-item{
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .85rem 1rem;
        font-size: .78rem;
        font-weight: 600;
        color: var(--ink-600);
        background: transparent;
        border-left: 3px solid transparent;
        transition: var(--fast);
    }

    body.page-create-human-agent .step-item::before{
        content: attr(data-step);
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 999px;
        background: var(--ink-100);
        color: var(--ink-500);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .68rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    body.page-create-human-agent .step-item i{
        width: 1.7rem;
        height: 1.7rem;
        border-radius: .65rem;
        background: rgba(2, 84, 45, 0.05);
        color: var(--brand-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .78rem;
        flex-shrink: 0;
    }

    body.page-create-human-agent .step-item.active{
        border-left-color: var(--brand-primary);
        background: rgba(2, 84, 45, 0.07);
        color: var(--brand-primary);
    }

    body.page-create-human-agent .step-item.active::before{
        background: var(--brand-primary);
        color: #fff;
    }

    body.page-create-human-agent .step-label{
        display: block;
        line-height: 1.35;
    }

    body.page-create-human-agent .sidebar-actions{
        padding: 1rem;
        border-top: 1px solid rgba(2, 84, 45, 0.08);
        background: rgba(248, 250, 252, 0.85);
    }

    body.page-create-human-agent .btn-save-main{
        width: 100%;
        min-height: 44px;
        border: none;
        border-radius: .85rem;
        padding: .7rem 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        box-shadow: 0 16px 28px -24px rgba(2, 84, 45, 0.75);
        cursor: pointer;
        transition: var(--fast);
    }

    body.page-create-human-agent .btn-save-main:hover{
        transform: translateY(-1px);
        box-shadow: 0 20px 32px -24px rgba(2, 84, 45, 0.88);
    }

    body.page-create-human-agent .sidebar-note-block{
        padding: 0 1rem 1rem;
    }

    body.page-create-human-agent .sidebar-note-title{
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--ink-500);
        font-weight: 700;
        margin-bottom: .7rem;
    }

    body.page-create-human-agent .sidebar-note-list{
        display: grid;
        gap: .55rem;
    }

    body.page-create-human-agent .sidebar-note-item{
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .72rem .8rem;
        border-radius: .82rem;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(2, 84, 45, 0.08);
        font-size: .73rem;
        color: var(--ink-600);
    }

    body.page-create-human-agent .sidebar-note-item i{
        color: var(--brand-primary);
        font-size: .8rem;
    }

    body.page-create-human-agent .agent-main{
        min-width: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 251, 0.95) 100%);
        border: 1px solid rgba(2, 84, 45, 0.11);
        border-radius: 1.05rem;
        padding: 1rem;
        box-shadow: 0 18px 36px -34px rgba(15, 23, 42, 0.42);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.page-create-human-agent .agent-main::-webkit-scrollbar{
        width: 6px;
    }

    body.page-create-human-agent .agent-main::-webkit-scrollbar-track{
        background: var(--surface-secondary);
        border-radius: .375rem;
    }

    body.page-create-human-agent .agent-main::-webkit-scrollbar-thumb{
        background: var(--ink-300);
        border-radius: .375rem;
    }

    body.page-create-human-agent .agent-main::-webkit-scrollbar-thumb:hover{
        background: var(--brand-primary);
    }

    body.page-create-human-agent .main-header{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .9rem;
        padding: .78rem .95rem;
        margin-bottom: .9rem;
        position: sticky;
        top: 0;
        z-index: 25;
        border: 1px solid rgba(2, 84, 45, 0.1);
        border-radius: .95rem;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 24px -28px rgba(15, 23, 42, 0.28);
        backdrop-filter: blur(12px);
    }

    body.page-create-human-agent .mh-left{
        display: flex;
        align-items: center;
        gap: .75rem;
        min-width: 0;
    }

    body.page-create-human-agent .mh-icon{
        width: 2.55rem;
        height: 2.55rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .85rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: #fff;
        font-size: .95rem;
        box-shadow: 0 14px 24px -20px rgba(2, 84, 45, 0.9);
        flex-shrink: 0;
    }

    body.page-create-human-agent .main-title{
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--ink-800);
    }

    body.page-create-human-agent .mh-section-copy{
        margin-top: .22rem;
        font-size: .73rem;
        line-height: 1.5;
        color: var(--ink-500);
    }

    body.page-create-human-agent .main-header-actions{
        display: flex;
        align-items: center;
        gap: .55rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    body.page-create-human-agent .main-step-indicator{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .35rem .7rem;
        border-radius: 999px;
        background: rgba(2, 84, 45, 0.08);
        border: 1px solid rgba(2, 84, 45, 0.12);
        color: var(--brand-primary);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .02em;
        white-space: nowrap;
    }

    body.page-create-human-agent .btn{
        min-height: 42px;
        border-radius: .8rem;
        padding: .65rem 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .42rem;
        border: 1px solid transparent;
        background: #fff;
        color: var(--ink-700);
        font-size: .78rem;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        transition: var(--fast);
    }

    body.page-create-human-agent .btn:hover{
        text-decoration: none;
    }

    body.page-create-human-agent .btn-secondary,
body.page-create-human-agent .btn-ghost{
        border-color: rgba(2, 84, 45, 0.12);
        background: #fff;
        color: var(--ink-700);
    }

    body.page-create-human-agent .btn-secondary:hover,
body.page-create-human-agent .btn-ghost:hover{
        border-color: var(--brand-primary);
        background: rgba(2, 84, 45, 0.05);
        color: var(--brand-primary);
    }

    body.page-create-human-agent .btn-primary{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: #fff;
        border: none;
        box-shadow: 0 16px 28px -24px rgba(2, 84, 45, 0.75);
    }

    body.page-create-human-agent .btn-primary:hover{
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 20px 32px -24px rgba(2, 84, 45, 0.88);
    }

    body.page-create-human-agent .btn-mh-save,
body.page-create-human-agent .btn-icon{
        width: 2.55rem;
        height: 2.55rem;
        padding: 0;
        border-radius: .85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .88rem;
        flex-shrink: 0;
    }

    body.page-create-human-agent .btn-mh-save{
        border: none;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: #fff;
        box-shadow: 0 16px 28px -24px rgba(2, 84, 45, 0.75);
    }

    body.page-create-human-agent .btn-mh-save:hover{
        transform: translateY(-1px);
        box-shadow: 0 20px 32px -24px rgba(2, 84, 45, 0.88);
    }

    body.page-create-human-agent .btn[disabled],
body.page-create-human-agent .btn-save-main[disabled],
body.page-create-human-agent .btn-mh-save[disabled]{
        opacity: .7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    body.page-create-human-agent .tab-card{
        display: none;
    }

    body.page-create-human-agent .tab-card.active{
        display: block;
        animation: create-human-agent--fadeIn .28s ease-out;
    }

    @keyframes create-human-agent--fadeIn {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-create-human-agent .helper-card{
        display: flex;
        align-items: flex-start;
        gap: .8rem;
        padding: .95rem 1rem;
        margin-bottom: 1rem;
        border: 1px solid rgba(2, 84, 45, 0.1);
        border-radius: .95rem;
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.06), rgba(255, 255, 255, 0.95));
        color: var(--ink-600);
        font-size: .78rem;
        line-height: 1.55;
        box-shadow: 0 10px 24px -28px rgba(15, 23, 42, 0.32);
    }

    body.page-create-human-agent .helper-card i{
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .75rem;
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        font-size: .9rem;
        flex-shrink: 0;
    }

    body.page-create-human-agent .section-stack{
        display: grid;
        gap: 1rem;
    }

    body.page-create-human-agent .section-panel{
        border: 1px solid rgba(2, 84, 45, 0.11);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 14px 30px -34px rgba(15, 23, 42, 0.42);
        overflow: hidden;
    }

    body.page-create-human-agent .section-panel-header{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin: 0;
        padding: .85rem 1rem;
        background: rgba(2, 84, 45, 0.04);
        border-bottom: 1px solid rgba(2, 84, 45, 0.08);
    }

    body.page-create-human-agent .section-panel-header > div{
        flex: 1;
        min-width: 0;
    }

    body.page-create-human-agent .section-panel-title{
        margin: 0;
        display: flex;
        align-items: center;
        gap: .45rem;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .02em;
        color: var(--ink-700);
        text-transform: uppercase;
    }

    body.page-create-human-agent .section-panel-title::before{
        content: "";
        width: .72rem;
        height: .72rem;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        box-shadow: 0 0 0 4px rgba(2, 84, 45, 0.08);
        flex-shrink: 0;
    }

    body.page-create-human-agent .section-panel-subtitle{
        margin: .35rem 0 0;
        font-size: .74rem;
        line-height: 1.55;
        color: var(--ink-500);
    }

    body.page-create-human-agent .section-badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .35rem .7rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid rgba(2, 84, 45, 0.12);
        color: var(--brand-primary);
        font-size: .67rem;
        font-weight: 700;
        white-space: nowrap;
    }

    body.page-create-human-agent .section-panel-body{
        padding: .95rem;
    }

    body.page-create-human-agent .section-grid{
        display: grid;
        gap: 1rem;
    }

    body.page-create-human-agent .section-grid--split{
        grid-template-columns: minmax(0, 1.85fr) minmax(240px, .85fr);
        align-items: start;
    }

    body.page-create-human-agent .form-grid{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .95rem;
    }

    body.page-create-human-agent .field-group{
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    body.page-create-human-agent .field-group.full-span{
        grid-column: 1 / -1;
    }

    body.page-create-human-agent .field-label{
        display: flex;
        align-items: center;
        gap: .45rem;
        margin-bottom: .45rem;
        font-size: .76rem;
        font-weight: 700;
        color: var(--ink-700);
    }

    body.page-create-human-agent .field-label i{
        color: var(--brand-primary);
        font-size: .82rem;
    }

    body.page-create-human-agent .field-help{
        margin: 0 0 .5rem;
        font-size: .7rem;
        line-height: 1.45;
        color: var(--ink-500);
    }

    body.page-create-human-agent .field-control{
        width: 100%;
        min-height: 44px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: .85rem;
        padding: .72rem .9rem;
        background: #fff;
        color: var(--ink-800);
        font-size: .83rem;
        transition: var(--fast);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.72);
    }

    body.page-create-human-agent .field-control::placeholder{
        color: #9ca3af;
    }

    body.page-create-human-agent .field-control:focus{
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
    }

    body.page-create-human-agent .field-control.is-invalid{
        border-color: var(--error);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    }

    body.page-create-human-agent .field-error{
        min-height: 1rem;
        margin-top: .4rem;
        font-size: .7rem;
        color: var(--error);
    }

    body.page-create-human-agent .info-card{
        border: 1px solid rgba(2, 84, 45, 0.1);
        border-radius: .95rem;
        padding: 1rem;
        background: linear-gradient(180deg, rgba(246, 250, 247, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        display: grid;
        gap: .85rem;
    }

    body.page-create-human-agent .info-card-header{
        display: flex;
        align-items: center;
        gap: .7rem;
    }

    body.page-create-human-agent .info-card-icon{
        width: 2.2rem;
        height: 2.2rem;
        border-radius: .8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(2, 84, 45, 0.08);
        color: var(--brand-primary);
        font-size: .95rem;
        flex-shrink: 0;
    }

    body.page-create-human-agent .info-card-title{
        margin: 0;
        font-size: .85rem;
        font-weight: 800;
        color: var(--ink-800);
    }

    body.page-create-human-agent .info-card-copy,
body.page-create-human-agent .info-card-list{
        margin: 0;
        font-size: .74rem;
        line-height: 1.6;
        color: var(--ink-600);
    }

    body.page-create-human-agent .info-card-list{
        display: grid;
        gap: .45rem;
    }

    body.page-create-human-agent .info-card-item{
        display: flex;
        align-items: flex-start;
        gap: .45rem;
    }

    body.page-create-human-agent .info-card-item i{
        color: var(--brand-primary);
        margin-top: .15rem;
        flex-shrink: 0;
    }

    body.page-create-human-agent .security-meter{
        height: .5rem;
        border-radius: 999px;
        background: var(--surface-secondary);
        overflow: hidden;
    }

    body.page-create-human-agent .security-meter-bar{
        display: block;
        height: 100%;
        width: 0;
        border-radius: inherit;
        background: #d1d5db;
        transition: width .2s ease, background-color .2s ease;
    }

    body.page-create-human-agent .security-strength{
        font-size: .72rem;
        color: var(--ink-500);
        font-weight: 600;
    }

    body.page-create-human-agent .form-actions{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: .75rem;
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid rgba(2, 84, 45, 0.08);
        flex-wrap: wrap;
    }

    body.page-create-human-agent .form-actions-copy{
        font-size: .73rem;
        line-height: 1.5;
        color: var(--ink-500);
        max-width: 520px;
    }

    body.page-create-human-agent .form-actions-buttons{
        display: flex;
        align-items: center;
        gap: .6rem;
        flex-wrap: wrap;
        margin-left: auto;
    }

    body.page-create-human-agent .agent-toast{
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10050;
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        max-width: min(420px, calc(100vw - 32px));
        padding: .85rem 1rem;
        border-radius: .95rem;
        color: #fff;
        box-shadow: 0 20px 40px -22px rgba(15, 23, 42, 0.45);
        transform: translateX(120%);
        opacity: 0;
        transition: transform .25s ease, opacity .25s ease;
        font-size: .78rem;
        font-weight: 700;
    }

    body.page-create-human-agent .agent-toast.show{
        transform: translateX(0);
        opacity: 1;
    }

    body.page-create-human-agent .agent-toast.success{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    }

    body.page-create-human-agent .agent-toast.error{
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    body.page-create-human-agent .agent-toast i{
        font-size: .95rem;
        flex-shrink: 0;
    }

    @media (max-width: 1100px) {
        body.page-create-human-agent .section-grid--split{
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 991px) {
        body.page-create-human-agent .agent-layout{
            grid-template-columns: 1fr;
            padding: .75rem;
            gap: .75rem;
        }

        body.page-create-human-agent .agent-sidebar{
            display: none;
        }

        body.page-create-human-agent .agent-main{
            max-height: none;
            padding: .85rem;
        }

        body.page-create-human-agent .main-header{
            position: static;
        }

        body.page-create-human-agent .main-header,
body.page-create-human-agent .main-header-actions,
body.page-create-human-agent .section-panel-header,
body.page-create-human-agent .form-actions{
            grid-template-columns: 1fr;
            flex-direction: column;
            align-items: stretch;
        }

        body.page-create-human-agent .main-header-actions{
            justify-content: flex-start;
        }

        body.page-create-human-agent .main-step-indicator{
            width: fit-content;
        }
    }

    @media (max-width: 767px) {
        body.page-create-human-agent .agent-layout{
            padding: .5rem;
        }

        body.page-create-human-agent .form-grid{
            grid-template-columns: 1fr;
        }

        body.page-create-human-agent .field-group.full-span{
            grid-column: auto;
        }

        body.page-create-human-agent .helper-card,
body.page-create-human-agent .section-panel-body,
body.page-create-human-agent .info-card{
            padding: .85rem;
        }

        body.page-create-human-agent .section-panel-header{
            padding: .75rem .85rem;
        }

        body.page-create-human-agent .main-header{
            padding: .72rem .8rem;
        }

        body.page-create-human-agent .main-title{
            font-size: .92rem;
        }

        body.page-create-human-agent .form-actions-buttons,
body.page-create-human-agent .form-actions-buttons .btn{
            width: 100%;
        }

        body.page-create-human-agent .form-actions-buttons{
            flex-direction: column;
            align-items: stretch;
        }
    }


/* ==========================================================
   Template: customer.html (page-customer)
   ========================================================== */

    /* ==== Dashboard UI token set (mirrors dashboard.html) ==== */
    body.page-customer{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;

        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);

        /* Additional variables for special styling */
        --primary: var(--primary-green);
        --white: #ffffff;
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* ==== Page wrapper ==== */
    body.page-customer .dashboard-container{
        margin: 0 auto;
        padding: .875rem .875rem 2.5rem;
        color: var(--text-700);
    }

    /* ==== Unified header card (matches products header-controls-wrapper) ==== */
    body.page-customer .customers-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }

    body.page-customer .customers-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
        border-radius: var(--radius-xl);
    }

    body.page-customer .customers-header-main{
        flex: 1 1 300px;
        min-width: 240px;
    }

    body.page-customer #pageTitle{
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0 0 .25rem 0;
        color: var(--primary-green);
        letter-spacing: -.01em;
    }

    body.page-customer .page-subtitle{
        font-size: .8rem;
        color: var(--text-500);
        font-weight: 500;
        margin: 0;
    }

    body.page-customer .controls-section{
        background: transparent; /* sit inside header card */
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: 320px;
    }

    body.page-customer .controls-section .search-input,
body.page-customer .controls-section .dropdown-trigger{
        background: var(--surface-white);
    }

    /* ==== Skeleton Loader ==== */
    body.page-customer .skeleton{
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: customer--shimmer 1.5s infinite;
        border-radius: .375rem;
        height: 1rem;
        width: 100%;
    }

    body.page-customer .skeleton.small{
        width: 60%;
    }

    body.page-customer .skeleton.medium{
        width: 80%;
    }

    @keyframes customer--shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    body.page-customer .skeleton-row{
        cursor: default !important;
        pointer-events: none;
    }

    body.page-customer .skeleton-row:hover{
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    /* ==== KPI cards (your 3 stat cards, styled like dashboard KPIs) ==== */
    body.page-customer .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 10px 0 16px;
    }

    body.page-customer .stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        text-decoration: none;
        color: inherit;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    body.page-customer .stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green-light);
    }

    /* Special styling for the first stat card (Total Customers) */
    body.page-customer .stat-card.active{
        background: var(--primary);
        color: var(--white);
        transform: translateY(-2px);
        box-shadow: var(--hover-shadow);
        border-color: var(--primary);
    }

    body.page-customer .stat-card.active .stat-icon{
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    body.page-customer .stat-card.active .stat-label{
        color: rgba(255, 255, 255, 0.8);
    }

    body.page-customer .stat-card.active .stat-value{
        color: var(--white);
    }

    body.page-customer .stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-customer .stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-customer .stat-value{
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ==== Controls bar - now inline with header ==== */
    body.page-customer .controls-section{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        padding: 6px 10px;
        flex-shrink: 0;
        flex: 0 1 auto;
        min-width: 640px;
        max-width: 100%;
    }

    body.page-customer .controls-grid{
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
    }

    body.page-customer .search-container{
        position: relative;
        flex: 1 1 220px;
        min-width: 190px;
    }

    body.page-customer .search-icon{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .875rem;
        color: var(--text-500);
        pointer-events: none;
    }

    body.page-customer .search-input{
        width: 100%;
        padding: 6px 10px 6px 32px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .75rem;
        transition: var(--transition-fast);
        outline: none;
    }

    body.page-customer .search-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    /* ==== Custom Dropdown Styling ==== */
    body.page-customer .sort-container{
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        z-index: 100;
    }

    body.page-customer .custom-dropdown{
        position: relative;
        width: 140px;
        z-index: 100;
    }

    body.page-customer .custom-dropdown-sort{
        width: 136px;
    }

    body.page-customer .custom-dropdown-activity{
        width: 184px;
    }

    body.page-customer .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 8px 12px;
        min-height: 40px;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
        outline: none;
        width: 100%;
    }

    body.page-customer .dropdown-text{
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }

    body.page-customer .dropdown-trigger:hover{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-customer .dropdown-trigger:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-customer .dropdown-trigger.active{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        background: var(--primary-green-ghost);
    }

    body.page-customer .dropdown-arrow{
        transition: var(--transition-fast);
        color: var(--primary-green);
        font-size: .875rem;
        flex-shrink: 0;
    }

    body.page-customer .dropdown-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-customer .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--transition-fast);
    }

    body.page-customer .custom-dropdown .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    body.page-customer .dropdown-option{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--text-700);
        font-size: .8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-customer .dropdown-option:hover{
        background: var(--primary-green-light);
        color: var(--primary-green-dark);
    }

    body.page-customer .dropdown-option.selected{
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-weight: 600;
    }

    body.page-customer .dropdown-option:focus{
        outline: 2px solid var(--primary-green);
        outline-offset: -2px;
        background: var(--primary-green-light);
    }

    body.page-customer .sort-icon{
        color: var(--primary-green);
        font-size: .875rem;
        flex-shrink: 0;
    }

    /* Hide original select */
    body.page-customer #sortSelect,
body.page-customer #activitySelect{
        display: none;
    }

    /* ==== Data table shell ==== */
    body.page-customer .table-container{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    /* Horizontal scroll for narrow screens */
    body.page-customer .table-scroll-wrapper{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-customer .table-scroll-wrapper::-webkit-scrollbar{
        height: 8px;
    }

    body.page-customer .table-scroll-wrapper::-webkit-scrollbar-track{
        background: var(--surface-gray-100);
        border-radius: 0.375rem;
    }

    body.page-customer .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: var(--primary-green);
        border-radius: 0.375rem;
    }

    body.page-customer .custom-table{
        width: 100%;
        border-collapse: collapse;
        font-size: .875rem;
    }

    body.page-customer .custom-table thead th{
        background: var(--primary-green-dark);
        color: #fff;
        border: none;
        font-weight: 600;
        font-size: .72rem;
        padding: .75rem 1rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .045em;
        white-space: nowrap;
        vertical-align: middle;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    body.page-customer .custom-table thead th:hover{
        background: var(--primary-green);
    }

    body.page-customer .sortable{
        cursor: pointer;
        user-select: none;
        margin-left: .5rem;
        opacity: .8;
        transition: var(--transition-fast);
    }

    body.page-customer .sortable:hover{
        opacity: 1;
        transform: scale(1.05);
    }

    body.page-customer .custom-table tbody tr{
        transition: var(--transition-fast);
        border-bottom: 1px solid var(--border-200);
    }

    body.page-customer .custom-table tbody tr:nth-child(even){
        background: var(--surface-gray-50);
    }

    body.page-customer .custom-table tbody tr:hover:not(.skeleton-row){
        background: var(--primary-green-ghost);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
    }

    body.page-customer .custom-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        text-align: left;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-customer .custom-table td:first-child{
        font-weight: 400;
        color: inherit;
    }

    body.page-customer .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
    }

    body.page-customer .pagination{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-customer .pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-customer .pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-customer .pagination-btn.active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-customer .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
    }

    /* ==== Mobile responsive ==== */
    @media (max-width: 768px) {
        body.page-customer .dashboard-container{ padding: 0.75rem; }
        body.page-customer .controls-section{ min-width: unset; width: 100%; }
        body.page-customer .controls-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        body.page-customer .search-container{
            grid-column: 1 / -1;
            min-width: 0;
        }
        body.page-customer .sort-container{
            min-width: 0;
            width: 100%;
        }
        body.page-customer .custom-dropdown{ width: 100%; }
        body.page-customer .customer-import-open-btn{
            grid-column: 1 / -1;
            width: 100%;
        }
        body.page-customer .custom-table{ font-size: .8125rem; }
        body.page-customer .custom-table td,
body.page-customer .custom-table th{ padding: 10px 8px; }
    }

    /* Phone: mobile-optimized design */
    @media (max-width: 576px) {
        body.page-customer .dashboard-container{ padding: 0.5rem; }
        
        /* Compact header */
        body.page-customer .customers-header-card{ 
            padding: .75rem; 
            gap: .75rem; 
            margin-bottom: 0.75rem;
        }
        body.page-customer .customers-header-main{ min-width: unset; }
        body.page-customer #pageTitle{ font-size: 1.125rem; margin-bottom: .25rem; }
        body.page-customer .page-subtitle{ font-size: .7rem; }
        
        /* Search and controls inline */
        body.page-customer .controls-section{ 
            padding: .5rem;
            width: 100%;
            border-radius: .75rem;
        }
        body.page-customer .controls-grid{ 
            gap: .5rem;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        body.page-customer .search-container{
            grid-column: 1 / -1;
            min-width: 0;
            width: 100%;
        }
        body.page-customer .search-input{ 
            font-size: .8125rem; 
            padding: .5rem .5rem .5rem 2rem;
            border-radius: .5rem;
            height: 36px;
        }
        body.page-customer .search-icon{ 
            left: .5rem; 
            font-size: .875rem; 
        }
        body.page-customer .sort-container{
            gap: 4px;
            min-width: 0;
            width: 100%;
        }
        body.page-customer .sort-icon{
            display: none;
        }
        body.page-customer .custom-dropdown-sort{
            width: 100%;
        }
        body.page-customer .custom-dropdown-activity{
            width: 100%;
        }
        body.page-customer .dropdown-trigger{ 
            padding: .5rem .5rem; 
            font-size: .75rem;
            height: 36px;
            border-radius: .5rem;
            gap: 4px;
        }
        body.page-customer .dropdown-trigger .dropdown-text{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.page-customer .dropdown-arrow{
            font-size: .75rem;
        }
        body.page-customer .custom-dropdown .dropdown-menu{
            width: 100%;
        }
        body.page-customer .dropdown-option{
            font-size: .75rem;
            padding: .5rem .75rem;
        }
        body.page-customer .customer-import-open-btn{
            grid-column: 1 / -1;
            width: 100%;
            min-height: 38px;
            padding: 0 .75rem;
            font-size: .75rem;
        }
        
        /* Stat cards - icon + number only */
        body.page-customer .stats-grid{
            margin: .5rem 0 .75rem;
            gap: .5rem;
            grid-template-columns: repeat(3, 1fr);
            justify-items: center;
        }
        body.page-customer .stat-card{ 
            padding: .75rem .5rem;
            gap: .5rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        body.page-customer .stat-card > div:last-child{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        body.page-customer .stat-card .stat-label{ 
            font-size: .55rem; 
            text-align: center;
            margin-bottom: 0;
        }
        body.page-customer .stat-card .stat-value{ 
            font-size: 1.25rem;
            font-weight: 800;
            width: 100%;
            line-height: 1.2;
            text-align: center;
        }
        body.page-customer .stat-card .stat-icon{ 
            width: 32px; 
            height: 32px; 
            font-size: .95rem;
            border-radius: 8px;
        }
        
        /* Table optimization */
        body.page-customer .table-container{ 
            border-radius: .75rem;
            margin-bottom: 1rem;
        }
        body.page-customer .custom-table{ 
            font-size: .75rem;
        }
        body.page-customer .custom-table thead th{ 
            padding: .75rem .5rem;
            font-size: .7rem;
        }
        body.page-customer .custom-table td{ 
            padding: .75rem .5rem;
            font-size: .75rem;
        }
        body.page-customer .custom-table td:first-child{
            font-size: .8125rem;
        }

        body.page-customer .custom-table th:last-child,
body.page-customer .custom-table td:last-child{
            width: 58px;
            min-width: 58px;
            padding-left: .35rem;
            padding-right: .35rem;
            text-align: center;
            white-space: nowrap;
            word-break: normal;
        }
        
        /* Customer badge smaller */
        body.page-customer .customer-badge{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            padding: 2px 6px;
            font-size: .625rem;
            line-height: 1.2;
            white-space: nowrap;
            word-break: keep-all;
            writing-mode: horizontal-tb;
        }
        
        /* Table footer */
        body.page-customer .table-footer{
            padding: .75rem;
            font-size: .7rem;
            flex-direction: column;
            gap: .75rem;
            align-items: stretch;
        }
        body.page-customer #infoBox{ text-align: center; }
        body.page-customer .pagination{ justify-content: center; }
        body.page-customer .pagination-btn{
            min-width: 2rem;
            padding: .35rem .5rem;
            font-size: .75rem;
        }
    }

    /* ==== A11y focus ==== */
    body.page-customer .stat-card:focus,
body.page-customer .search-input:focus,
body.page-customer .dropdown-trigger:focus,
body.page-customer .dropdown-option:focus,
body.page-customer .customer-import-open-btn:focus,
body.page-customer .pagination-btn:focus{
        outline: 2px solid var(--primary-green);
        outline-offset: 2px;
    }

    body.page-customer .fade-in{
        animation: customer--fadeIn .4s ease-out;
    }

    @keyframes customer--fadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* Empty state styling */
    body.page-customer .empty-state{
        text-align: center;
        padding: 48px 16px;
        color: var(--text-500);
    }

    body.page-customer .empty-state i{
        font-size: 3rem;
        color: var(--primary-green);
        margin-bottom: 16px;
        display: block;
    }

    body.page-customer .empty-state h3{
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-700);
        margin-bottom: 8px;
    }

    body.page-customer .empty-state p{
        color: var(--text-500);
        margin: 0;
    }

    /* Badge styling for customer type - Updated to use green theme */
    body.page-customer .customer-badge{
        display: inline-block;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    body.page-customer .customer-badge.new{
        background: var(--accent-emerald);
        color: white;
    }

    body.page-customer .customer-badge.repeated{
        background: var(--primary-green);
        color: white;
    }

    /* ==== Bulk customer/purchase CSV import ==== */
    body.page-customer .customer-import-progress{
        position: fixed;
        inset: 0 0 auto;
        height: 3px;
        overflow: hidden;
        background: var(--surface-gray-200);
        z-index: 1400;
    }

    body.page-customer .customer-import-progress[hidden]{
        display: none;
    }

    body.page-customer .customer-import-progress .progress-bar-custom{
        width: 36%;
        height: 100%;
        background: var(--primary-green);
        transform: translateX(-110%);
    }

    body.page-customer .customer-import-progress.active .progress-bar-custom{
        animation: customer-import--progress 1.1s ease-in-out infinite;
    }

    @keyframes customer-import--progress {
        0% { transform: translateX(-110%); }
        60% { transform: translateX(180%); }
        100% { transform: translateX(290%); }
    }

    body.page-customer .customer-import-open-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        margin-top: 0;
        min-height: 40px;
        padding: 0 .85rem;
        border: 1px solid var(--primary-green);
        border-radius: var(--radius-lg);
        background: var(--primary-green);
        color: #fff;
        line-height: 1;
        font-family: inherit;
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
        flex: 0 0 auto;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-customer .customer-import-open-btn:hover{
        background: var(--primary-green-dark);
        border-color: var(--primary-green-dark);
        transform: translateY(-1px);
    }

    body.page-customer.customer-import-open{
        overflow: hidden;
    }

    body.page-customer .customer-import-modal[hidden]{
        display: none;
    }

    body.page-customer .customer-import-modal{
        position: fixed;
        inset: 0;
        z-index: 1300;
        display: grid;
        place-items: center;
        padding: 1rem;
    }

    body.page-customer .customer-import-backdrop{
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, .58);
        backdrop-filter: blur(3px);
    }

    body.page-customer .customer-import-dialog{
        position: relative;
        width: min(660px, 100%);
        max-height: min(760px, calc(100vh - 2rem));
        overflow-y: auto;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
        color: var(--text-700);
    }

    body.page-customer .customer-import-dialog-header{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.25rem 1rem;
        border-bottom: 1px solid var(--border-200);
    }

    body.page-customer .customer-import-eyebrow{
        display: block;
        margin-bottom: .25rem;
        color: var(--primary-green);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    body.page-customer .customer-import-dialog h3{
        margin: 0;
        color: var(--text-900);
        font-size: 1.15rem;
        font-weight: 800;
    }

    body.page-customer .customer-import-dialog-header p,
    body.page-customer .customer-import-template-row p{
        margin: .3rem 0 0;
        color: var(--text-500);
        font-size: .78rem;
        line-height: 1.45;
    }

    body.page-customer .customer-import-close{
        display: grid;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid var(--border-200);
        border-radius: 50%;
        background: var(--surface-gray-50);
        color: var(--text-500);
        cursor: pointer;
    }

    body.page-customer .customer-import-template-row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: 1rem 1.25rem;
        padding: .85rem 1rem;
        border: 1px solid rgba(2, 84, 45, .18);
        border-radius: var(--radius-lg);
        background: var(--primary-green-ghost);
    }

    body.page-customer .customer-import-template-row strong{
        color: var(--text-900);
        font-size: .82rem;
    }

    body.page-customer .customer-import-template-btn,
    body.page-customer .customer-import-submit,
    body.page-customer .customer-import-cancel{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        min-height: 38px;
        padding: .55rem .8rem;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: .76rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }

    body.page-customer .customer-import-template-btn{
        border: 1px solid var(--primary-green);
        background: var(--surface-white);
        color: var(--primary-green);
    }

    body.page-customer .customer-import-form{
        padding: 0 1.25rem 1.25rem;
    }

    body.page-customer .customer-import-dropzone{
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: 1.1rem;
        border: 1.5px dashed #94a3b8;
        border-radius: var(--radius-lg);
        background: var(--surface-gray-50);
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-customer .customer-import-dropzone:hover,
    body.page-customer .customer-import-dropzone:focus-within{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
    }

    body.page-customer .customer-import-dropzone > i{
        color: var(--primary-green);
        font-size: 1.7rem;
    }

    body.page-customer .customer-import-dropzone-copy{
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
        gap: .15rem;
    }

    body.page-customer .customer-import-dropzone-copy strong{
        color: var(--text-900);
        font-size: .82rem;
    }

    body.page-customer .customer-import-dropzone-copy small,
    body.page-customer .customer-import-file span{
        color: var(--text-500);
        font-size: .72rem;
    }

    body.page-customer .customer-import-browse{
        color: var(--primary-green);
        font-size: .76rem;
        font-weight: 800;
    }

    body.page-customer .customer-import-file{
        display: flex;
        align-items: center;
        gap: .7rem;
        margin-top: .65rem;
        padding: .7rem .8rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-gray-50);
    }

    body.page-customer .customer-import-file[hidden]{
        display: none;
    }

    body.page-customer .customer-import-file > i{
        color: var(--primary-green);
        font-size: 1.25rem;
    }

    body.page-customer .customer-import-file > div{
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
    }

    body.page-customer .customer-import-file strong{
        overflow: hidden;
        color: var(--text-900);
        font-size: .78rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-customer .customer-import-file button{
        border: 0;
        background: transparent;
        color: var(--error);
        cursor: pointer;
    }

    body.page-customer .customer-import-inline-error{
        margin: .55rem 0 0;
        color: var(--error);
        font-size: .74rem;
        font-weight: 600;
    }

    body.page-customer .customer-import-result{
        margin-top: .8rem;
        padding: .85rem;
        border: 1px solid;
        border-radius: var(--radius-lg);
    }

    body.page-customer .customer-import-result[hidden]{
        display: none;
    }

    body.page-customer .customer-import-success{
        border-color: rgba(34, 197, 94, .3);
        background: rgba(34, 197, 94, .08);
    }

    body.page-customer .customer-import-errors{
        border-color: rgba(239, 68, 68, .28);
        background: rgba(239, 68, 68, .07);
    }

    body.page-customer .customer-import-result-heading{
        display: flex;
        align-items: flex-start;
        gap: .6rem;
    }

    body.page-customer .customer-import-result-heading > i{
        margin-top: .1rem;
        color: var(--success);
    }

    body.page-customer .customer-import-errors .customer-import-result-heading > i{
        color: var(--error);
    }

    body.page-customer .customer-import-result-heading > div{
        display: flex;
        flex-direction: column;
        gap: .12rem;
    }

    body.page-customer .customer-import-result-heading strong{
        color: var(--text-900);
        font-size: .8rem;
    }

    body.page-customer .customer-import-result-heading span{
        color: var(--text-500);
        font-size: .72rem;
    }

    body.page-customer .customer-import-counts{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        margin-top: .7rem;
    }

    body.page-customer .customer-import-counts > div{
        display: flex;
        flex-direction: column;
        padding: .65rem;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, .68);
        text-align: center;
    }

    body.page-customer .customer-import-counts strong{
        color: var(--primary-green);
        font-size: 1.2rem;
    }

    body.page-customer .customer-import-counts span{
        color: var(--text-500);
        font-size: .66rem;
        font-weight: 700;
    }

    body.page-customer .customer-import-errors ul{
        max-height: 190px;
        overflow-y: auto;
        margin: .7rem 0 0;
        padding: 0;
        list-style: none;
    }

    body.page-customer .customer-import-errors li{
        display: grid;
        grid-template-columns: minmax(70px, auto) 1fr;
        gap: .55rem;
        padding: .45rem .15rem;
        border-top: 1px solid rgba(239, 68, 68, .16);
        color: var(--text-700);
        font-size: .74rem;
        line-height: 1.35;
    }

    body.page-customer .customer-import-errors li strong{
        color: var(--error);
    }

    body.page-customer .customer-import-actions{
        display: flex;
        justify-content: flex-end;
        gap: .55rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-200);
    }

    body.page-customer .customer-import-cancel{
        border: 1px solid var(--border-200);
        background: var(--surface-white);
        color: var(--text-700);
    }

    body.page-customer .customer-import-submit{
        border: 1px solid var(--primary-green);
        background: var(--primary-green);
        color: #fff;
    }

    body.page-customer .customer-import-submit:disabled,
    body.page-customer .customer-import-close:disabled,
    body.page-customer [data-close-customer-import]:disabled{
        opacity: .55;
        cursor: wait;
    }

    @media (max-width: 640px) {
        body.page-customer .customer-import-modal{ padding: .5rem; }
        body.page-customer .customer-import-dialog{ max-height: calc(100vh - 1rem); }
        body.page-customer .customer-import-dialog-header,
        body.page-customer .customer-import-form{ padding-left: .9rem; padding-right: .9rem; }
        body.page-customer .customer-import-template-row{
            align-items: stretch;
            flex-direction: column;
            margin-left: .9rem;
            margin-right: .9rem;
        }
        body.page-customer .customer-import-counts{ grid-template-columns: 1fr; }
        body.page-customer .customer-import-actions{ flex-direction: column-reverse; }
        body.page-customer .customer-import-actions button{ width: 100%; }
    }

    /* ==== Dark Mode ==== */
    html[data-theme="dark"] body.page-customer{
        color-scheme: dark;
        --primary-green: #084928;
        --primary-green-dark: #06341c;
        --primary-green-light: rgba(8, 73, 40, 0.2);
        --primary-green-ghost: rgba(8, 73, 40, 0.12);
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;
        --surface-white: #101814;
        --surface-gray-50: #0c1210;
        --surface-gray-100: #101916;
        --surface-gray-200: #1b2721;
        --text-900: #eef6f1;
        --text-700: #cad7cf;
        --text-500: #96a59d;
        --border-200: #22322b;
        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;
        --shadow-xs: 0 1px 2px rgb(0 0 0 / .35);
        --shadow-sm: 0 1px 3px rgb(0 0 0 / .42), 0 1px 2px rgb(0 0 0 / .24);
        --shadow-md: 0 12px 28px rgb(0 0 0 / .36);
        --shadow-lg: 0 22px 44px rgb(0 0 0 / .42);
        --hover-shadow: 0 18px 34px -24px rgba(8, 73, 40, 0.78);
        --white: #101814;
    }

    html[data-theme="dark"] body.page-customer{
        background:
            radial-gradient(circle at top left, rgba(8, 73, 40, 0.16), transparent 28%),
            radial-gradient(circle at top right, rgba(8, 73, 40, 0.08), transparent 24%),
            linear-gradient(180deg, #07100c 0%, #090f0c 100%);
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-customer .dashboard-container{
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-customer .customers-header-card,
html[data-theme="dark"] body.page-customer .controls-section,
html[data-theme="dark"] body.page-customer .table-container,
html[data-theme="dark"] body.page-customer .stat-card{
        background: linear-gradient(180deg, rgba(16, 24, 20, 0.98), rgba(12, 18, 15, 0.98));
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    }

    html[data-theme="dark"] body.page-customer .customer-import-dialog,
    html[data-theme="dark"] body.page-customer .customer-import-template-btn,
    html[data-theme="dark"] body.page-customer .customer-import-cancel,
    html[data-theme="dark"] body.page-customer .customer-import-close{
        background: #101814;
        border-color: rgba(255, 255, 255, .1);
    }

    html[data-theme="dark"] body.page-customer .customer-import-dropzone,
    html[data-theme="dark"] body.page-customer .customer-import-file,
    html[data-theme="dark"] body.page-customer .customer-import-counts > div{
        background: rgba(255, 255, 255, .035);
        border-color: rgba(255, 255, 255, .1);
    }

    html[data-theme="dark"] body.page-customer .customers-header-card::before{
        background: linear-gradient(90deg, rgba(8, 73, 40, 0.14), transparent 72%);
    }

    html[data-theme="dark"] body.page-customer #pageTitle,
html[data-theme="dark"] body.page-customer .stat-value{
        color: #eef6f1;
    }

    html[data-theme="dark"] body.page-customer .page-subtitle,
html[data-theme="dark"] body.page-customer .stat-label,
html[data-theme="dark"] body.page-customer .table-footer,
html[data-theme="dark"] body.page-customer .empty-state,
html[data-theme="dark"] body.page-customer .empty-state p,
html[data-theme="dark"] body.page-customer .empty-state h3{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-customer .stat-card.active{
        background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
        color: #fff;
        border-color: rgba(8, 73, 40, 0.6);
        box-shadow: 0 18px 34px rgba(8, 73, 40, 0.22);
    }

    html[data-theme="dark"] body.page-customer .stat-card.active .stat-icon{
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    html[data-theme="dark"] body.page-customer .stat-card.active .stat-label,
html[data-theme="dark"] body.page-customer .stat-card.active .stat-value{
        color: #fff;
    }

    html[data-theme="dark"] body.page-customer .stat-icon{
        background: rgba(8, 73, 40, 0.16);
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-customer .search-icon,
html[data-theme="dark"] body.page-customer .sort-icon,
html[data-theme="dark"] body.page-customer .dropdown-arrow,
html[data-theme="dark"] body.page-customer .empty-state i{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-customer .search-input,
html[data-theme="dark"] body.page-customer .dropdown-trigger,
html[data-theme="dark"] body.page-customer .custom-dropdown .dropdown-menu,
html[data-theme="dark"] body.page-customer .dropdown-option{
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-700);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-customer .search-input::placeholder{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-customer .search-input:focus,
html[data-theme="dark"] body.page-customer .dropdown-trigger:hover,
html[data-theme="dark"] body.page-customer .dropdown-trigger:focus,
html[data-theme="dark"] body.page-customer .dropdown-trigger.active{
        border-color: rgba(8, 73, 40, 0.5);
        box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.16);
        background: rgba(255, 255, 255, 0.045);
    }

    html[data-theme="dark"] body.page-customer .dropdown-option:hover,
html[data-theme="dark"] body.page-customer .dropdown-option.selected,
html[data-theme="dark"] body.page-customer .dropdown-option:focus{
        background: rgba(8, 73, 40, 0.16);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-customer .custom-table thead th{
        background: rgba(13, 19, 16, 0.98);
        color: #c9f5d4;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-customer .custom-table tbody tr{
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] body.page-customer .custom-table tbody tr:nth-child(even){
        background: rgba(255, 255, 255, 0.03);
    }

    html[data-theme="dark"] body.page-customer .custom-table tbody tr:hover:not(.skeleton-row){
        background: rgba(8, 73, 40, 0.08);
        box-shadow: inset 3px 0 0 #084928;
    }

    html[data-theme="dark"] body.page-customer .custom-table td{
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-customer .custom-table td:first-child{
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-customer .table-footer{
        background: rgba(13, 19, 16, 0.98);
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-customer .table-scroll-wrapper::-webkit-scrollbar-track{
        background: rgba(255, 255, 255, 0.04);
    }

    html[data-theme="dark"] body.page-customer .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: rgba(8, 73, 40, 0.7);
    }

    html[data-theme="dark"] body.page-customer .pagination-btn{
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-700);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-customer .pagination-btn:hover:not(.disabled),
html[data-theme="dark"] body.page-customer .pagination-btn.active{
        background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
        color: #eff9f2;
        border-color: transparent;
    }

    html[data-theme="dark"] body.page-customer .pagination-btn.disabled{
        background: rgba(255, 255, 255, 0.02);
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-customer .customer-badge.new{
        background: rgba(34, 197, 94, 0.18);
        color: #bbf7d0;
    }

    html[data-theme="dark"] body.page-customer .customer-badge.repeated{
        background: rgba(8, 73, 40, 0.95);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-customer .empty-state i{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-customer .empty-state h3{
        color: #eef6f1;
    }

    html[data-theme="dark"] body.page-customer .empty-state p{
        color: var(--text-500);
    }


/* ==========================================================
   Template: customer_info.html (page-customer-info)
   ========================================================== */

    /* ============================================================
       Customer Info Page — v2 Redesign
       Aesthetic: hero card + stats row + 2-col grid, pd-card style
    ============================================================ */

    /* ---- Container ---- */
    body.page-customer-info .ci-container{
       
        padding: .875rem;
  
    }

    /* ---- Hero Card ---- */
    body.page-customer-info .ci-hero{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .9rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
        margin-bottom: 1rem;
        overflow: hidden;
        position: relative;
    }

    body.page-customer-info .ci-hero-top{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 1.15rem;
        flex-wrap: wrap;
    }

    /* ---- Avatar + Identity ---- */
    body.page-customer-info .ci-hero-identity{
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    body.page-customer-info .ci-avatar{
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: white;
        box-shadow: var(--shadow-md);
        flex-shrink: 0;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    body.page-customer-info .ci-avatar:hover{
        transform: scale(1.06);
        box-shadow: 0 6px 18px rgba(2, 84, 45, 0.28);
    }

    body.page-customer-info .ci-hero-identity h2{
        font-size: 1.2rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0 0 .2rem 0;
        line-height: 1.25;
    }

    body.page-customer-info .ci-hero-identity p{
        font-size: .8rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin: 0 0 .35rem 0;
    }

    body.page-customer-info #emailRow a{
        font-size: .78rem;
        color: var(--brand-primary);
        text-decoration: none;
        font-weight: var(--font-weight-medium);
    }

    body.page-customer-info #emailRow a:hover{
        text-decoration: underline;
    }

    /* ---- Hero Actions ---- */
    body.page-customer-info .ci-hero-actions{
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    body.page-customer-info .ci-btn-primary{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .375rem;
        padding: .42rem .82rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .73rem;
        line-height: 1;
        text-decoration: none;
        border: 1.5px solid transparent;
        cursor: pointer;
        transition: all .18s ease;
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: white;
        white-space: nowrap;
    }

    body.page-customer-info .ci-btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(2, 84, 45, .3);
        color: white;
        text-decoration: none;
    }

    body.page-customer-info .ci-btn-outline{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .375rem;
        padding: .42rem .82rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .73rem;
        line-height: 1;
        text-decoration: none;
        border: 1.5px solid var(--ink-200);
        cursor: pointer;
        transition: all .18s ease;
        background: var(--surface-primary);
        color: var(--ink-600);
    }

    body.page-customer-info .ci-btn-outline:hover{
        background: var(--ink-100);
        color: var(--ink-800);
        border-color: var(--ink-300);
        text-decoration: none;
    }

    body.page-customer-info .ci-btn-back:hover{
        color: var(--brand-primary);
        border-color: rgba(2, 84, 45, .25);
        background: rgba(2, 84, 45, .05);
    }

    body.page-customer-info .ci-btn-icon{
        width: 2.15rem;
        height: 2.15rem;
        padding: 0;
        flex-shrink: 0;
    }

    body.page-customer-info .ci-btn-primary i,
body.page-customer-info .ci-btn-outline i,
body.page-customer-info .ci-btn-secondary i{
        font-size: .8rem;
    }

    /* ---- Stats Chips Row ---- */
    body.page-customer-info .ci-stats-row{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border-top: 1px solid var(--ink-100);
    }

    body.page-customer-info .ci-stat-chip{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .875rem .5rem;
        text-align: center;
        border-right: 1px solid var(--ink-100);
        transition: background .15s ease;
        gap: .2rem;
    }

    body.page-customer-info .ci-stat-chip:last-child{
        border-right: none;
    }

    body.page-customer-info .ci-stat-chip:hover{
        background: rgba(2, 84, 45, 0.04);
    }

    body.page-customer-info .ci-stat-icon{
        font-size: 1.1rem;
        color: var(--brand-primary);
        margin-bottom: .1rem;
    }

    body.page-customer-info .ci-stat-value{
        font-size: 1.05rem;
        font-weight: var(--font-weight-extrabold);
        color: var(--ink-800);
        line-height: 1.2;
    }

    body.page-customer-info .ci-stat-label{
        font-size: .63rem;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink-400);
    }

    /* ---- Badge ---- */
    body.page-customer-info .ci-badge{
        display: inline-flex;
        align-items: center;
        padding: .25rem .625rem;
        border-radius: 1rem;
        font-size: .65rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    body.page-customer-info .ci-badge-considering{
        background: rgba(100, 116, 139, 0.15);
        color: #64748b;
        border: 1px solid rgba(100, 116, 139, 0.3);
    }

    body.page-customer-info .ci-badge-won{
        background: rgba(2, 84, 45, 0.12);
        color: var(--brand-primary);
        border: 1px solid rgba(2, 84, 45, 0.3);
    }

    body.page-customer-info .ci-badge-lost{
        background: rgba(239, 68, 68, 0.12);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    /* ---- Content Grid ---- */
    body.page-customer-info .ci-content-grid{
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 1rem;
        align-items: start;
    }

    body.page-customer-info .ci-col-main{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    body.page-customer-info .ci-col-side{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* ---- Card Component ---- */
    body.page-customer-info .ci-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .8rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
        overflow: hidden;
        transition: box-shadow .18s ease, border-color .18s ease;
    }

    body.page-customer-info .ci-card:hover{
        box-shadow: 0 4px 14px rgba(2, 84, 45, .08);
        border-color: rgba(2, 84, 45, .12);
    }

    body.page-customer-info .ci-card-sticky{
        position: sticky;
        top: .875rem;
    }

    body.page-customer-info .ci-card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding: .52rem .78rem;
        border-bottom: 1px solid var(--ink-100);
        background: var(--ink-50, #f9fafb);
    }

    body.page-customer-info .ci-card-title{
        display: flex;
        align-items: center;
        gap: .48rem;
        font-size: .67rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-600);
        text-transform: uppercase;
        letter-spacing: .06em;
        margin: 0;
    }

    body.page-customer-info .ci-card-title-icon{
        width: 19px;
        height: 19px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        border-radius: .3rem;
        color: #fff;
        font-size: .63rem;
    }

    body.page-customer-info .ci-card-title-icon i{
        font-size: .63rem;
        color: inherit;
    }

    body.page-customer-info .ci-card-body{
        padding: .78rem;
    }

    /* ---- Info Grid (2-col) ---- */
    body.page-customer-info .ci-info-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }

    body.page-customer-info .ci-info-item{
        background: var(--ink-50);
        padding: .75rem .875rem;
        border-radius: .5rem;
        border: 1px solid var(--ink-100);
        transition: background .15s ease, border-color .15s ease;
    }

    body.page-customer-info .ci-info-item:hover{
        background: rgba(2, 84, 45, 0.05);
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-customer-info .ci-info-label{
        font-weight: var(--font-weight-semibold);
        font-size: .63rem;
        color: var(--brand-primary);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .3rem;
    }

    body.page-customer-info .ci-info-value{
        font-size: .855rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-medium);
        line-height: 1.45;
    }

    /* ---- Section Titles ---- */
    body.page-customer-info .ci-section{
        margin-bottom: .7rem;
    }

    body.page-customer-info .ci-section:last-child{
        margin-bottom: 0;
    }

    body.page-customer-info .ci-section-title{
        font-weight: var(--font-weight-semibold);
        font-size: .7rem;
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .35rem;
        display: flex;
        align-items: center;
        gap: .35rem;
    }

    body.page-customer-info .ci-section-title i{
        color: var(--brand-primary);
        font-size: .8rem;
    }

    /* ---- Chips ---- */
    body.page-customer-info .ci-chips{
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
    }

    body.page-customer-info .ci-chip{
        display: inline-flex;
        align-items: center;
        padding: .35rem .7rem;
        font-size: .74rem;
        font-weight: var(--font-weight-semibold);
        background: rgba(2, 84, 45, 0.08);
        color: var(--brand-primary);
        border-radius: 2rem;
        border: 1px solid rgba(2, 84, 45, 0.18);
        transition: background .12s ease, color .12s ease, border-color .12s ease;
        cursor: default;
    }

    body.page-customer-info .ci-chip:hover{
        background: var(--brand-primary);
        color: white;
        border-color: var(--brand-primary);
    }

    body.page-customer-info .ci-chip.ci-chip-clickable{
        cursor: pointer;
    }

    /* ---- Address Cards ---- */
    body.page-customer-info .ci-address-grid{
        display: flex;
        flex-direction: column;
        gap: .625rem;
    }

    body.page-customer-info .ci-address-card{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .625rem;
        padding: .75rem .875rem;
        background: var(--ink-50);
        border-radius: .5rem;
        border: 1px solid var(--ink-100);
        transition: background .15s ease, border-color .15s ease;
    }

    body.page-customer-info .ci-address-card:hover{
        background: rgba(2, 84, 45, 0.05);
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-customer-info .ci-address-text{
        font-size: .8rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-medium);
        flex: 1;
        line-height: 1.4;
    }

    body.page-customer-info .ci-address-actions{
        display: flex;
        gap: .35rem;
        flex-shrink: 0;
    }

    body.page-customer-info .ci-btn-icon-sm{
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border-radius: .375rem;
        border: none;
        cursor: pointer;
        transition: all .13s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .73rem;
        flex-shrink: 0;
    }

    body.page-customer-info .ci-btn-icon-sm.copy{ background: var(--brand-primary); color: white; }
    body.page-customer-info .ci-btn-icon-sm.copy:hover{ background: var(--brand-secondary); }
    body.page-customer-info .ci-btn-icon-sm.edit{ background: #f59e0b; color: white; }
    body.page-customer-info .ci-btn-icon-sm.edit:hover{ background: #d97706; }
    body.page-customer-info .ci-btn-icon-sm.del{ background: #ef4444; color: white; }
    body.page-customer-info .ci-btn-icon-sm.del:hover{ background: #b91c1c; }

    /* ---- Secondary Button (card actions) ---- */
    body.page-customer-info .ci-btn-secondary{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        padding: .42rem .82rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .73rem;
        line-height: 1;
        text-decoration: none;
        border: 1.5px solid var(--ink-200);
        cursor: pointer;
        transition: all .18s ease;
        background: var(--surface-primary);
        color: var(--ink-600);
        white-space: nowrap;
    }

    body.page-customer-info .ci-btn-secondary:hover{
        background: var(--ink-100);
        color: var(--ink-800);
        border-color: var(--ink-300);
    }

    /* ---- Empty State ---- */
    body.page-customer-info .ci-empty{
        text-align: center;
        padding: 1.25rem 1rem;
        background: var(--ink-50);
        border-radius: .5rem;
        border: 2px dashed var(--ink-200);
        width: 100%;
    }

    body.page-customer-info .ci-empty-icon{
        font-size: 1.75rem;
        color: var(--ink-300);
        margin-bottom: .4rem;
    }

    body.page-customer-info .ci-empty-text{
        font-size: .78rem;
        color: var(--ink-400);
        font-weight: var(--font-weight-medium);
    }

    /* Keep no-data profiles compact enough to scan without zooming out. */
    body.page-customer-info .ci-chips .ci-empty,
    body.page-customer-info .ci-address-grid .ci-empty{
        min-height: 2.35rem;
        padding: .45rem .65rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
    }

    body.page-customer-info .ci-chips .ci-empty-icon,
    body.page-customer-info .ci-address-grid .ci-empty-icon{
        margin: 0;
        font-size: 1.05rem;
        line-height: 1;
    }

    body.page-customer-info .ci-chips .ci-empty-text,
    body.page-customer-info .ci-address-grid .ci-empty-text{
        font-size: .72rem;
        line-height: 1.2;
    }

    /* ---- Skeleton ---- */
    body.page-customer-info .ci-skeleton{
        background: linear-gradient(90deg, var(--ink-200) 25%, var(--ink-100) 50%, var(--ink-200) 75%);
        background-size: 200% 100%;
        animation: customer-info--ci-shimmer 1.5s infinite;
        border-radius: .375rem;
        display: inline-block;
    }

    body.page-customer-info .ci-skeleton.ci-skeleton-sm{ width: 55%; height: 1rem; }
    body.page-customer-info .ci-skeleton.ci-skeleton-md{ width: 75%; height: 1rem; }
    body.page-customer-info .ci-skeleton.ci-skeleton-lg{ width: 90%; height: 1rem; }

    @keyframes customer-info--ci-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ---- Toast ---- */
    body.page-customer-info .ci-toast{
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 9999;
        min-width: 220px;
        max-width: 320px;
        padding: .7rem 1rem;
        border-radius: .625rem;
        font-size: .8rem;
        font-weight: var(--font-weight-semibold);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        transform: translateX(1rem);
        transition: opacity .28s ease, transform .28s ease;
        pointer-events: none;
    }

    body.page-customer-info .ci-toast.show{ opacity: 1; transform: translateX(0); }
    body.page-customer-info .ci-toast.success{ background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary)); color: white; }
    body.page-customer-info .ci-toast.error{ background: linear-gradient(90deg, #ef4444, #b91c1c); color: white; }
    body.page-customer-info .ci-toast.warning{ background: linear-gradient(90deg, #f59e0b, #d97706); color: white; }
    body.page-customer-info .ci-toast.info{ background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); color: white; }

    /* ---- Entrance animation ---- */
    @keyframes customer-info--ci-fadeIn {
        from { opacity: 0; transform: translateY(.5rem); }
        to   { opacity: 1; transform: translateY(0); }
    }

    body.page-customer-info .ci-animate{ animation: customer-info--ci-fadeIn .38s ease-out both; }
    body.page-customer-info .ci-animate-delay-1{ animation-delay: .08s; }
    body.page-customer-info .ci-animate-delay-2{ animation-delay: .16s; }
    body.page-customer-info .ci-animate-delay-3{ animation-delay: .24s; }

    /* ---- Address Modal ---- */
    body.page-customer-info .ci-modal-backdrop{
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 8000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        backdrop-filter: blur(3px);
        animation: customer-info--ci-fadeIn .2s ease;
    }

    body.page-customer-info .ci-modal{
        background: var(--surface-primary);
        border-radius: .875rem;
        padding: 1.5rem;
        width: 100%;
        max-width: 420px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    }

    body.page-customer-info .ci-modal-title{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0 0 1rem 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-customer-info .ci-modal-title i{ color: var(--brand-primary); }

    body.page-customer-info .ci-modal-input{
        width: 100%;
        padding: .625rem .875rem;
        border: 1.5px solid var(--ink-200);
        border-radius: .5rem;
        font-size: .875rem;
        color: var(--ink-700);
        background: var(--surface-primary);
        margin-bottom: 1rem;
        box-sizing: border-box;
        transition: border-color .15s;
        outline: none;
        resize: vertical;
        min-height: 80px;
        font-family: inherit;
    }

    body.page-customer-info .ci-modal-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-customer-info .ci-modal-actions{
        display: flex;
        justify-content: flex-end;
        gap: .5rem;
    }

    /* ---- Responsive ---- */
    @media (max-width: 1100px) {
        body.page-customer-info .ci-content-grid{
            grid-template-columns: 1fr 300px;
        }
    }

    @media (max-width: 900px) {
        body.page-customer-info .ci-content-grid{
            grid-template-columns: 1fr;
        }

        body.page-customer-info .ci-card-sticky{
            position: relative;
            top: 0;
        }
    }

    @media (max-width: 700px) {
        body.page-customer-info .ci-stats-row{
            grid-template-columns: repeat(2, 1fr);
        }

        body.page-customer-info .ci-stat-chip:nth-child(2){
            border-right: none;
        }

        body.page-customer-info .ci-stat-chip:nth-child(3){
            border-top: 1px solid var(--ink-100);
        }

        body.page-customer-info .ci-stat-chip:nth-child(4){
            border-top: 1px solid var(--ink-100);
        }
    }

    @media (max-width: 576px) {
        body.page-customer-info .ci-container{ padding: .5rem; }

        body.page-customer-info .ci-hero-top{
            flex-direction: row;
            align-items: flex-start;
            flex-wrap: nowrap;
            gap: .5rem;
            padding: .875rem;
        }

        body.page-customer-info .ci-hero-identity{
            flex: 1 1 auto;
            min-width: 0;
            gap: .625rem;
        }

        body.page-customer-info .ci-avatar{
            width: 54px;
            height: 54px;
            font-size: 1.45rem;
        }

        body.page-customer-info .ci-hero-identity h2,
body.page-customer-info .ci-hero-identity p{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        body.page-customer-info .ci-hero-actions{
            width: auto;
            flex: 0 0 auto;
            flex-wrap: nowrap;
            justify-content: flex-end;
            gap: .35rem;
            padding-top: .1rem;
        }

        body.page-customer-info .ci-hero-actions .ci-btn-icon{
            width: 2rem;
            height: 2rem;
        }

        body.page-customer-info .ci-info-grid{
            grid-template-columns: 1fr;
        }

    }

    @media (max-width: 420px) {
        body.page-customer-info .ci-stats-row{
            grid-template-columns: repeat(2, 1fr);
        }
    }


/* ==========================================================
   Template: dashboard.html (page-dashboard)
   ========================================================== */

    /* Dashboard-specific styles using base.html color scheme */
    body.page-dashboard .dashboard-container{
        /* max-width: 1400px; */
        margin: 0 auto;
        padding: .875rem;
    }

    /* Header Styles */
    body.page-dashboard .dashboard-header{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    body.page-dashboard .dashboard-header::before{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(2, 84, 45, 0.08);
        pointer-events: none;
    }

    body.page-dashboard .header-content{
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    body.page-dashboard .header-title{
        font-size: 1.5rem;
        font-weight: var(--font-weight-extrabold);
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.02em;
        margin-bottom: 0.2rem;
    }

    body.page-dashboard .header-subtitle{
        font-size: 0.75rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
    }

    body.page-dashboard .header-stats{
        display: flex;
        gap: .875rem;
    }

    body.page-dashboard .header-stat{
        text-align: center;
        padding: 0.625rem .875rem;
        background: rgba(2, 84, 45, 0.15);
        border-radius: 0.625rem;
        border: 1px solid var(--ink-200);
        min-width: 4.25rem;
    }

    body.page-dashboard .header-stat-number{
        font-size: 1.05rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        display: block;
        line-height: 1.2;
    }

    body.page-dashboard .header-stat-label{
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ink-500);
        font-weight: var(--font-weight-semibold);
        margin-top: 0.1rem;
    }

    /* Section Styles */
    body.page-dashboard .kpi-section{
        margin-bottom: 1rem;
    }

    body.page-dashboard .section-title{
        font-size: .95rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin-bottom: 0.625rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-dashboard .section-icon{
        width: 1.25rem;
        height: 1.25rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: var(--surface-primary);
        border-radius: 0.4rem;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* KPI Grid */
    body.page-dashboard .kpi-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: .875rem;
        margin-bottom: 1rem;
    }

    body.page-dashboard .kpi-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        transition: var(--base);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: block;
        min-height: 120px;
    }

    body.page-dashboard .kpi-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(2, 84, 45, 0.08);
        opacity: 0;
        transition: var(--base);
        pointer-events: none;
    }

    body.page-dashboard .kpi-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        text-decoration: none;
        /* color: inherit; */
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-dashboard .kpi-card:hover::before{
        opacity: 1;
    }

    body.page-dashboard .kpi-card-primary{
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: var(--surface-primary);
        border: none;
    }

    body.page-dashboard .kpi-card-primary .kpi-label,
body.page-dashboard .kpi-card-primary .kpi-value,
body.page-dashboard .kpi-card-primary .kpi-change,
body.page-dashboard .kpi-card-primary .kpi-change i{
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    html[data-theme="dark"] body.page-dashboard .kpi-card-primary .kpi-label,
html[data-theme="dark"] body.page-dashboard .kpi-card-primary .kpi-value,
html[data-theme="dark"] body.page-dashboard .kpi-card-primary .kpi-change,
html[data-theme="dark"] body.page-dashboard .kpi-card-primary .kpi-change i{
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.page-dashboard .kpi-card-primary:hover,
body.page-dashboard .kpi-card-primary:hover .kpi-label,
body.page-dashboard .kpi-card-primary:hover .kpi-value,
body.page-dashboard .kpi-card-primary:hover .kpi-change,
body.page-dashboard .kpi-card-primary:hover .kpi-change i,
body.page-dashboard .kpi-card-primary:hover .kpi-icon{
        color: #fff !important;
        -webkit-text-fill-color: #fff;
    }

    body.page-dashboard .kpi-card-primary:hover .kpi-icon{
        background: rgba(255, 255, 255, 0.24);
    }

    body.page-dashboard .kpi-header{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.625rem;
        position: relative;
        z-index: 1;
    }

    body.page-dashboard .kpi-icon{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.625rem;
        background: rgba(2, 84, 45, 0.15);
        color: var(--brand-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    body.page-dashboard .kpi-card-primary .kpi-icon{
        background: rgba(255, 255, 255, 0.2);
        color: var(--surface-primary);
    }

    body.page-dashboard .kpi-content{
        position: relative;
        z-index: 1;
        flex: 1;
    }

    body.page-dashboard .kpi-label{
        font-size: 0.65rem;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.8;
        margin-bottom: 0.4rem;
    }

    body.page-dashboard .kpi-value{
        font-size: 1.6rem;
        font-weight: var(--font-weight-extrabold);
        line-height: 1;
        margin-bottom: 0.4rem;
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent-vibrant) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    body.page-dashboard .kpi-card-primary .kpi-value{
        color: var(--surface-primary);
        background: none;
        -webkit-text-fill-color: var(--surface-primary);
    }

    body.page-dashboard .kpi-change{
        font-size: 0.65rem;
        font-weight: var(--font-weight-semibold);
        display: flex;
        align-items: center;
        gap: 0.2rem;
        margin-bottom: 0.4rem;
    }

    body.page-dashboard .kpi-change-positive{
        color: #22c55e;
    }

    body.page-dashboard .kpi-trend{
        width: 100%;
        height: 0.3rem;
        margin-top: 0.625rem;
        background: rgba(34, 197, 94, 0.2);
        border-radius: 0.3rem;
        overflow: hidden;
    }

    body.page-dashboard .kpi-trend-bar{
        height: 100%;
        background: rgba(34, 197, 94, 1);
        border-radius: 0.3rem;
        transition: width 1s ease-out;
    }

    body.page-dashboard .kpi-card-primary .kpi-trend{
        background: rgba(255, 255, 255, 0.2);
    }

    body.page-dashboard .kpi-card-primary .kpi-trend-bar{
        background: var(--surface-primary);
    }

    /* Stats Overview */
    body.page-dashboard .stats-overview{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: .875rem;
        margin-bottom: 1rem;
    }

    body.page-dashboard .stats-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.625rem;
        padding: .875rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        text-align: center;
        transition: var(--base);
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: block;
    }

    body.page-dashboard .stats-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        text-decoration: none;
        color: inherit;
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-dashboard .stats-number{
        font-size: 1.25rem;
        font-weight: var(--font-weight-extrabold);
        color: var(--brand-primary);
        display: block;
        margin-bottom: 0.25rem;
    }

    body.page-dashboard .stats-label{
        color: var(--ink-500);
        font-size: 0.65rem;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    body.page-dashboard .stats-trend{
        margin-top: 0.2rem;
        font-size: 0.55rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-dashboard .stats-trend-positive{
        color: #22c55e;
    }

    /* Main Grid */
    body.page-dashboard .main-grid{
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    body.page-dashboard .chart-container{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        position: relative;
        overflow: hidden;
    }

    body.page-dashboard .chart-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .875rem;
        position: relative;
        z-index: 1;
    }

    body.page-dashboard .chart-title{
        font-size: .95rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
    }

    body.page-dashboard .chart-subtitle{
        color: var(--ink-500);
        font-size: 0.65rem;
        margin-top: 0.1rem;
        font-weight: var(--font-weight-medium);
    }

    body.page-dashboard .chart-controls{
        display: flex;
        gap: 0.4rem;
        align-items: center;
    }

    body.page-dashboard .chart-wrapper{
        position: relative;
        height: 240px;
    }

    body.page-dashboard .no-data-message{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 240px;
        color: var(--ink-500);
        font-size: 0.75rem;
        background: var(--surface-secondary);
        border-radius: 0.625rem;
        border: 1px dashed var(--ink-300);
    }

    /* Activity Feed */
    body.page-dashboard .activity-feed{
        max-height: 300px;
        overflow-y: auto;
        padding-right: 0.2rem;
    }

    body.page-dashboard .activity-feed::-webkit-scrollbar{
        width: 3px;
    }

    body.page-dashboard .activity-feed::-webkit-scrollbar-track{
        background: var(--surface-tertiary);
        border-radius: 0.3rem;
    }

    body.page-dashboard .activity-feed::-webkit-scrollbar-thumb{
        background: var(--brand-accent-vibrant);
        border-radius: 0.3rem;
    }

    body.page-dashboard .activity-item{
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.625rem;
        border-radius: 0.625rem;
        margin-bottom: 0.4rem;
        transition: var(--base);
        border: 1px solid var(--ink-200);
        background: var(--surface-secondary);
    }

    body.page-dashboard .activity-item:hover{
        background: rgba(2, 84, 45, 0.15);
        transform: translateX(2px);
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-dashboard .activity-icon{
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 0.4rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: var(--surface-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    body.page-dashboard .activity-content{
        flex: 1;
        min-width: 0;
    }

    body.page-dashboard .activity-title{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
        margin-bottom: 0.1rem;
        font-size: 0.7rem;
    }

    body.page-dashboard .activity-description{
        color: var(--ink-500);
        font-size: 0.6rem;
        margin-bottom: 0.1rem;
    }

    body.page-dashboard .activity-time{
        color: var(--ink-400);
        font-size: 0.6rem;
        font-weight: var(--font-weight-medium);
    }

    /* Tables */
    body.page-dashboard .tables-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    body.page-dashboard .data-table{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        overflow: hidden;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        padding: 1rem;
    }

    body.page-dashboard .table-header{
        padding: 0 0 .875rem;
        background: transparent;
        border-bottom: none;
    }

    body.page-dashboard .data-table .table-header.chart-header{
        align-items: flex-start;
        gap: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--ink-100);
    }

    body.page-dashboard .dashboard-table-meta{
        flex: 1;
        min-width: 0;
        text-align: left;
    }

    body.page-dashboard .dashboard-table-meta .chart-title,
body.page-dashboard .dashboard-table-meta .chart-subtitle{
        text-align: left;
    }

    body.page-dashboard .dashboard-table-meta .chart-title{
        margin: 0;
        line-height: 1.2;
    }

    body.page-dashboard .dashboard-table-meta .chart-subtitle{
        margin-top: 0.25rem;
        line-height: 1.4;
    }

    body.page-dashboard .table-actions{
        display: flex;
        gap: 0.625rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    body.page-dashboard .table-actions .btn{
        min-width: 96px;
        justify-content: center;
    }

    body.page-dashboard .table-actions .btn.btn-icon{
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        padding: 0;
    }

    body.page-dashboard .search-container{
        position: relative;
        margin: 0 0 1rem;
    }

    body.page-dashboard .search-input{
        width: 100%;
        height: 2.25rem;
        padding: 0.5rem .875rem 0.5rem 2rem;
        border: 1px solid var(--ink-200);
        border-radius: 0.75rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-size: 0.75rem;
        transition: var(--base);
        outline: none;
    }

    body.page-dashboard .search-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.15);
        background: var(--surface-primary);
    }

    body.page-dashboard .search-icon{
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        font-size: 0.8rem;
    }

    body.page-dashboard .table-wrapper{
        overflow-x: auto;
        max-height: 320px;
        margin: 0 -1rem -1rem;
        padding: 0 1rem 1rem;
    }

    body.page-dashboard table{
        width: 100%;
        border-collapse: collapse;
    }

    body.page-dashboard th,
body.page-dashboard td{
        padding: 0.5rem .875rem;
        text-align: left;
        border-bottom: 1px solid var(--ink-200);
        font-size: 0.7rem;
    }

    body.page-dashboard th{
        background: var(--surface-secondary);
        font-weight: var(--font-weight-semibold);
        color: var(--brand-primary);
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    body.page-dashboard td{
        color: var(--ink-700);
        font-weight: var(--font-weight-medium);
    }

    body.page-dashboard .dashboard-orders-table th:nth-child(1),
body.page-dashboard .dashboard-orders-table td:nth-child(1){
        width: 72px;
        white-space: nowrap;
    }

    body.page-dashboard .dashboard-orders-table th:nth-child(4),
body.page-dashboard .dashboard-orders-table td:nth-child(4),
body.page-dashboard .dashboard-orders-table th:nth-child(5),
body.page-dashboard .dashboard-orders-table td:nth-child(5){
        text-align: center;
    }

    body.page-dashboard .dashboard-customers-table th:nth-child(1){ width: 30%; }
    body.page-dashboard .dashboard-customers-table th:nth-child(2){ width: 17%; }
    body.page-dashboard .dashboard-customers-table th:nth-child(3){ width: 14%; }
    body.page-dashboard .dashboard-customers-table th:nth-child(4){ width: 24%; }
    body.page-dashboard .dashboard-customers-table th:nth-child(5){ width: 8%; text-align: center; }
    body.page-dashboard .dashboard-customers-table th:nth-child(6){ width: 7%; text-align: center; }

    body.page-dashboard .dashboard-customers-table td:nth-child(2){
        color: var(--ink-600);
        white-space: nowrap;
    }

    body.page-dashboard .dashboard-customers-table td:nth-child(3){
        color: var(--ink-500);
    }

    body.page-dashboard .dashboard-customers-table td:nth-child(4){
        color: var(--ink-600);
        white-space: normal;
    }

    body.page-dashboard .dashboard-customers-table td:nth-child(5),
body.page-dashboard .dashboard-customers-table td:nth-child(6){
        text-align: center;
        vertical-align: middle;
    }

    body.page-dashboard tbody tr{
        transition: var(--fast);
        cursor: pointer;
    }

    body.page-dashboard tbody tr:hover{
        background: rgba(2, 84, 45, 0.08);
    }

    /* Status Badges */
    body.page-dashboard .status-badge{
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.4rem;
        border-radius: 0.625rem;
        font-size: 0.55rem;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    body.page-dashboard .status-success{
    background: rgba(6, 79, 3, 0.2);
    color: #064f03;
    border: 1px solid rgba(59, 130, 246, 0.3);
    }

    body.page-dashboard .status-warning{
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    body.page-dashboard .status-error{
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    body.page-dashboard .status-info{
         background: rgba(6, 79, 3, 0.2);
    color: #064f03;
    border: 1px solid rgba(6, 79, 3, 0.2);
    }

    /* Buttons */
    body.page-dashboard .btn{
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.875rem;
        border-radius: 0.5rem;
        font-weight: var(--font-weight-semibold);
        font-size: 0.75rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: var(--base);
        font-family: var(--font-family-primary);
    }

    body.page-dashboard .btn-primary{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: var(--surface-primary);
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }

    body.page-dashboard .btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        color: var(--surface-primary);
        text-decoration: none;
    }

    body.page-dashboard .btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1px solid var(--ink-200);
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    body.page-dashboard .btn-secondary:hover{
        background: rgba(2, 84, 45, 1);
        transform: translateY(-1px);
        color: white;
        text-decoration: none;
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-dashboard .btn-icon{
        width: 2rem;
        height: 2rem;
        padding: 0;
        justify-content: center;
    }

    /* Custom Dropdown */
    body.page-dashboard .custom-dropdown{
        position: relative;
        min-width: 120px;
        z-index: 50;
    }
    body.page-dashboard .custom-dropdown.open{ z-index: 100; }
    body.page-dashboard .custom-dropdown .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 0.5rem 0.875rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
        font-size: 0.75rem;
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: var(--base);
        outline: none;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }
    body.page-dashboard .custom-dropdown .dropdown-trigger:hover{
        background: rgba(2, 84, 45, 0.08);
        border-color: var(--brand-primary);
    }
    body.page-dashboard .custom-dropdown .dropdown-trigger:focus,
body.page-dashboard .custom-dropdown .dropdown-trigger.active{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
    }
    body.page-dashboard .custom-dropdown .dropdown-trigger .selected-text{ flex: 1; text-align: left; }
    body.page-dashboard .custom-dropdown .dropdown-arrow{
        transition: transform .2s ease;
        color: var(--brand-primary);
        font-size: 0.65rem;
    }
    body.page-dashboard .custom-dropdown .dropdown-trigger.active .dropdown-arrow{ transform: rotate(180deg); }
    body.page-dashboard .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        z-index: 1000;
        overflow: hidden;

        opacity: 0;
        visibility: hidden;
        transition: all .2s ease;
    }
    body.page-dashboard .custom-dropdown .dropdown-menu.show{

        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }
    body.page-dashboard .custom-dropdown .dropdown-option{
        display: flex;
        align-items: center;
        padding: 0.5rem 0.875rem;
        color: var(--ink-700);
        font-size: 0.75rem;
        font-weight: var(--font-weight-medium);
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: all .15s ease;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }
    body.page-dashboard .custom-dropdown .dropdown-option:hover{
        background: rgba(2, 84, 45, 0.08);
        color: var(--brand-primary);
    }
    body.page-dashboard .custom-dropdown .dropdown-option.selected{
        background: rgba(2, 84, 45, 0.12);
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
    }
    body.page-dashboard select.hidden-select{ display: none; }

    /* Toast Notifications */
    body.page-dashboard .toast{
        position: fixed;
        top: 1rem;
        right: 1rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        color: var(--ink-700);
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        z-index: 1000;
        transform: translateX(calc(100% + 1rem));
        transition: var(--base);
        font-weight: var(--font-weight-semibold);
        font-size: 0.8125rem;
        min-width: 280px;
        max-width: 320px;
    }

    body.page-dashboard .toast-show{
        transform: translateX(0);
    }

    body.page-dashboard .toast-success{
        border-left: 4px solid #22c55e;
    }

    body.page-dashboard .toast-error{
        border-left: 4px solid #ef4444;
    }

    body.page-dashboard .toast-warning{
        border-left: 4px solid #f59e0b;
    }

    body.page-dashboard .toast-info{
        border-left: 4px solid #3b82f6;
    }

    /* Loading States */
    body.page-dashboard .skeleton{
        background: linear-gradient(90deg,
                var(--ink-200) 25%,
                var(--ink-100) 50%,
                var(--ink-200) 75%);
        background-size: 200% 100%;
        animation: dashboard--shimmer 1.5s infinite;
        border-radius: 0.5rem;
    }

    body.page-dashboard .loading-text{
        height: 1rem;
        width: 6.25rem;
        border-radius: 0.375rem;
    }

    body.page-dashboard .loading-number{
        height: 1.5rem;
        width: 3.75rem;
        border-radius: 0.375rem;
    }

    body.page-dashboard .waiting-badge{
        position: absolute;
        top: -0.5rem;
        right: -0.5rem;
        background: #ef4444;
        color: white;
        border-radius: 50%;
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
        font-weight: var(--font-weight-bold);
        animation: dashboard--pulse 2s infinite;
    }

    body.page-dashboard .waiting-badge-hidden{
        display: none;
    }

    /* Animations */
    @keyframes dashboard--slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes dashboard--pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.8;
        }
    }

    @keyframes dashboard--shimmer {
        0% {
            background-position: -200px 0;
        }

        100% {
            background-position: 200px 0;
        }
    }

    body.page-dashboard .animate-slide-up{
        animation: dashboard--slideUp 0.5s ease-out forwards;
    }

    body.page-dashboard .animate-pulse{
        animation: dashboard--pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* Responsive Design */
    @media (max-width: 1200px) {
        body.page-dashboard .main-grid{
            grid-template-columns: 1fr;
        }

        body.page-dashboard .tables-grid{
            grid-template-columns: 1fr;
        }
        
        body.page-dashboard .kpi-grid{
            grid-template-columns: repeat(2, 1fr);
        }
        
        body.page-dashboard .stats-overview{
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        body.page-dashboard .dashboard-container{
            padding: 0.75rem;
        }

        body.page-dashboard .header-content{
            flex-direction: column;
            gap: 0.75rem;
            align-items: flex-start;
        }

        body.page-dashboard .header-title{
            font-size: 1.5rem;
        }
        
        body.page-dashboard .header-stats{
            width: 100%;
            justify-content: space-between;
        }
        
        body.page-dashboard .header-stat{
            flex: 1;
            min-width: auto;
            padding: 0.5rem 0.75rem;
        }
        
        body.page-dashboard .header-stat-number{
            font-size: 1rem;
        }
        
        body.page-dashboard .header-stat-label{
            font-size: 0.5625rem;
        }

        body.page-dashboard .kpi-grid{
            /* grid-template-columns: 1fr; */
            gap: 0.75rem;
        }
        
        body.page-dashboard .stats-overview{
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        body.page-dashboard .main-grid{
            gap: 1rem;
        }

        body.page-dashboard .chart-container,
body.page-dashboard .data-table{
            padding: 1rem;
        }

        body.page-dashboard .table-header.chart-header{
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
        }

        body.page-dashboard .table-actions{
            justify-content: flex-start;
        }

        body.page-dashboard .table-wrapper{
            max-height: 280px;
        }
        
        body.page-dashboard .section-title{
            font-size: 1rem;
        }
        
        body.page-dashboard .kpi-card{
            min-height: 120px;
            padding: 1rem;
        }
        
        body.page-dashboard .kpi-icon{
            width: 2.5rem;
            height: 2.5rem;
            font-size: 1rem;
        }
        
        body.page-dashboard .kpi-value{
            font-size: 1.5rem;
        }
        
        body.page-dashboard .kpi-label{
            font-size: 0.6875rem;
        }
        
        body.page-dashboard .chart-wrapper{
            height: 220px;
        }
        
        body.page-dashboard .no-data-message{
            height: 220px;
            font-size: 0.8125rem;
        }
    }
    
    @media (max-width: 480px) {
        body.page-dashboard .dashboard-container{
            padding: 0.5rem;
        }
        
        body.page-dashboard .header-title{
            font-size: 1.25rem;
        }
        
        body.page-dashboard .header-subtitle{
            font-size: 0.8125rem;
        }
        
        body.page-dashboard .stats-overview{
            grid-template-columns: 1fr;
        }
        
        body.page-dashboard .table-actions{
            flex-direction: column;
            width: 100%;
        }
        
        body.page-dashboard .table-actions .btn{
            width: 100%;
            justify-content: center;
        }

        body.page-dashboard .data-table .table-header.chart-header{
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;
        }

        body.page-dashboard .data-table .dashboard-table-meta{
            flex: 1 1 auto;
            min-width: 0;
        }

        body.page-dashboard .data-table .table-actions{
            width: auto;
            flex: 0 0 auto;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-end;
            gap: 0.375rem;
        }

        body.page-dashboard .data-table .table-actions .btn.btn-icon{
            width: 2rem;
            min-width: 2rem;
            height: 2rem;
            flex: 0 0 2rem;
        }
        
        body.page-dashboard .search-container{
            margin: 0.5rem 0.75rem;
        }

        body.page-dashboard .table-wrapper{
            padding: 0 0.75rem 0.75rem;
        }
        
        body.page-dashboard .chart-controls{
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 0.375rem;
            align-items: center;
            justify-content: flex-end;
            flex-shrink: 0;
        }

        body.page-dashboard .chart-controls .custom-dropdown{
            min-width: 100px;
            width: 100px;
        }

        body.page-dashboard .chart-controls .dropdown-trigger{
            min-height: 2rem;
            padding: 0.4rem 0.625rem;
        }

        body.page-dashboard .chart-controls .btn-icon{
            width: 2rem;
            min-width: 2rem;
            height: 2rem;
            flex: 0 0 2rem;
        }
        
        body.page-dashboard .chart-select{
            width: auto;
        }
    }
    
    /* Narrow phones: at 375px the 768px-tier sizing leaves only ~80px for the KPI
       label (160px card - 32px padding - 40px icon), so 5 of 8 labels wrapped to two
       lines and "No Orders" wrapped at 1.5rem. That ragged wrapping was also what made
       card heights uneven (140/156/180) — sizing the type to fit lets rows level out
       on their own, so no forced heights are needed. */
    @media (max-width: 480px) {
        body.page-dashboard .kpi-grid{
            gap: 0.625rem;
        }

        body.page-dashboard .kpi-card{
            padding: 0.75rem;
            min-height: 0;
        }

        body.page-dashboard .kpi-icon{
            width: 2rem;
            height: 2rem;
            font-size: 0.85rem;
            border-radius: 0.5rem;
        }

        body.page-dashboard .kpi-label{
            font-size: 0.625rem;
            letter-spacing: 0.03em;
            margin-bottom: 0.3rem;
        }

        body.page-dashboard .kpi-value{
            font-size: 1.25rem;
            margin-bottom: 0.3rem;
            /* No overflow-wrap:anywhere here — it breaks single words like
               "Enterprise" mid-token. Normal wrapping only breaks at spaces. */
        }

        body.page-dashboard .kpi-change{
            font-size: 0.6875rem;
            line-height: 1.25;
        }

        /* A 300px scroll box nested inside a page that already scrolls is awkward on
           a phone — two scroll surfaces competing under one thumb. Let the feed run
           full length and the page do the scrolling. */
        body.page-dashboard .activity-feed{
            max-height: none;
            overflow-y: visible;
            padding-right: 0;
        }
    }

    @media (min-width: 1400px) {
        body.page-dashboard .dashboard-container{
            /* max-width: 1800px; */
        }
        
        body.page-dashboard .kpi-grid{
            grid-template-columns: repeat(4, 1fr);
        }
        
        body.page-dashboard .stats-overview{
            grid-template-columns: repeat(4, 1fr);
        }
    }

    body.page-dashboard .customer-initials{
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: var(--font-weight-bold);
        flex-shrink: 0;
    }

    body.page-dashboard .customer-info{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
        flex-wrap: nowrap;
    }

    body.page-dashboard .customer-details{
        min-width: 0;
        display: flex;
        align-items: center;
        flex: 1;
        overflow: hidden;
    }

    body.page-dashboard .customer-details .customer-name{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
        font-size: 0.8125rem;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-dashboard .customer-details .customer-email{
        font-size: 0.7rem;
        color: var(--ink-500);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: none;
    }

    body.page-dashboard .dashboard-customers-table td{
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        white-space: nowrap;
    }

    body.page-dashboard .dashboard-customers-table td:first-child{
        min-width: 0;
        max-width: 0;
    }

    body.page-dashboard .dashboard-customers-table .status-badge{
        min-width: 2.35rem;
        justify-content: center;
    }

    body.page-dashboard .session-package-list,
    body.page-dashboard .session-package-balance{
        display: grid;
        gap: .25rem;
    }

    body.page-dashboard .session-package-list{
        min-width: 10rem;
        max-width: 16rem;
    }

    body.page-dashboard .session-package-name{
        overflow: hidden;
        color: var(--ink-700);
        font-size: .76rem;
        font-weight: var(--font-weight-semibold);
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-dashboard .session-package-meta{
        display: flex;
        align-items: center;
        gap: .35rem;
        flex-wrap: wrap;
    }

    body.page-dashboard .session-package-count,
    body.page-dashboard .session-package-empty{
        color: var(--ink-500);
        font-size: .68rem;
        font-weight: var(--font-weight-semibold);
        line-height: 1.3;
        white-space: nowrap;
    }

    body.page-dashboard .customer-chat-btn{
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.75rem;
        margin: 0 auto;
    }

    body.page-dashboard .activity-empty{
        text-align: center;
        padding: 2.5rem;
        color: var(--ink-500);
    }

    body.page-dashboard .activity-empty-title{
        font-size: 0.875rem;
    }

    body.page-dashboard .activity-empty-subtitle{
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    /* High-priority blocker modal */
    body.page-dashboard .blocker-modal-backdrop{
        position: fixed;
        inset: 0;
        background: rgba(2,6,23,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 30000;
        backdrop-filter: blur(4px);
        padding: 20px;
    }

    body.page-dashboard .blocker-modal{
        background: var(--surface, #ffffff);
        border-radius: 12px;
        width: min(720px, 95%);
        max-width: 720px;
        padding: 20px 20px 18px 20px;
        box-shadow: 0 10px 40px rgba(2,6,23,0.18);
        border-left: 6px solid var(--primary, #02542D);
        color: var(--text-900, #0f172a);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    body.page-dashboard .blocker-modal .header{
        display: flex;
        gap: 12px;
        align-items: start;
    }

    body.page-dashboard .blocker-modal .icon{
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background: rgba(2,84,45,0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary, #02542D);
        font-size: 20px;
        flex: 0 0 44px;
    }

    body.page-dashboard .blocker-modal h3{
        margin: 0;
        font-size: 1.125rem;
        color: var(--primary, #02542D);
        line-height: 1.1;
    }

    body.page-dashboard .blocker-modal .body{
        margin: 4px 0 8px 0;
        color: var(--text-700, #475569);
        font-size: 0.95rem;
        max-height: 44vh;
        overflow: auto;
        white-space: pre-wrap;
    }

    body.page-dashboard .blocker-modal .actions{
        display:flex;
        justify-content:flex-end;
        gap:12px;
        margin-top: 6px;
    }

    body.page-dashboard .blocker-modal .btn-ack{
        background: var(--primary, #02542D);
        color: #fff;
        border: none;
        padding: 10px 14px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 150ms ease;
    }

    body.page-dashboard .blocker-modal .btn-ack:hover{
        filter: brightness(0.96);
        transform: translateY(-1px);
    }

    /* Dashboard Alert Banners */
    body.page-dashboard .dashboard-alert{
        border-radius: 0.875rem;
        padding: 0.875rem 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        font-size: 0.8125rem;
        font-weight: 600;
    }
    body.page-dashboard .dashboard-alert.warning{
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.24);
        color: #b45309;
    }
    body.page-dashboard .dashboard-alert.error{
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.24);
        color: #b91c1c;
    }
    body.page-dashboard .dashboard-alert a{
        color: inherit;
        font-weight: 700;
        text-decoration: underline;
    }



    body.page-dashboard .search-hidden{
        display: none !important;
    }

    body.page-dashboard .dashboard-deferred-section{
        position: relative;
    }

    body.page-dashboard .dashboard-deferred-section.is-deferred{
        opacity: 0.72;
    }

    body.page-dashboard .dashboard-deferred-section.is-ready{
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    body.page-dashboard .table-loading{
        text-align: center;
        padding: 2rem;
        color: var(--ink-500);
        font-size: 0.875rem;
    }

    body.page-dashboard .table-skeleton{
        height: 1rem;
        width: 150px;
        margin: 0 auto;
    }

    body.page-dashboard .activity-skeleton{
        height: 3rem;
        margin-bottom: 0.5rem;
        border-radius: 0.75rem;
    }

    body.page-dashboard .chart-select{
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        background: var(--surface-primary);
    }

    body.page-dashboard .chart-section-bottom{
        margin-top: 1.25rem;
    }

    body.page-dashboard .kpi-icon-relative{
        position: relative;
    }


/* ==========================================================
   Template: email_verification.html (page-email-verification)
   ========================================================== */

        body.page-email-verification{
            --primary-dark: #1a4b3a;
            --primary-main: #1a4b3a;
            --accent: #1e6b4f;
            --primary-bg: #f0f7f4;
            --success: #10b981;
            --success-dark: #059669;
            --error: #ef4444;
            --error-dark: #dc2626;
            --warning: #f59e0b;
            --info: #3b82f6;
            --text-primary: #1a1a1a;
            --text-secondary: #6b7280;
            --border-light: #e5e7eb;
            --shadow-xl: 0 16px 20px -5px rgba(0,0,0,.1);
            --radius-xl: 19px;
            --radius-md: 10px;
        }
        body.page-email-verification *{ box-sizing: border-box; margin: 0; padding: 0; }
        body.page-email-verification{
            font-family: "Inter", sans-serif;
            background: radial-gradient(48rem 48rem at -10% -20%, rgba(26,75,58,.08), transparent 60%),
                        radial-gradient(48rem 48rem at 110% 120%, rgba(30,107,79,.08), transparent 60%),
                        linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 45%, var(--primary-bg) 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }
        body.page-email-verification .card{
            background: #fff;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            padding: 2.8rem 2.4rem;
            max-width: 480px;
            width: 100%;
            text-align: center;
            animation: email-verification--slideUp .5s ease-out;
        }
        body.page-email-verification .icon-circle{
            width: 72px;
            height: 72px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin: 0 auto 1.4rem;
            font-size: 2rem;
        }
        body.page-email-verification .icon-circle.success{ background: rgba(16,185,129,.12); color: var(--success-dark); }
        body.page-email-verification .icon-circle.error{ background: rgba(239,68,68,.1);   color: var(--error-dark); }
        body.page-email-verification .icon-circle.warning{ background: rgba(245,158,11,.1);  color: var(--warning); }
        body.page-email-verification .icon-circle.info{ background: rgba(26,75,58,.1);    color: var(--primary-main); }
        body.page-email-verification h1{
            font-family: "Poppins", sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: .5rem;
        }
        body.page-email-verification p{
            color: var(--text-secondary);
            font-size: .88rem;
            line-height: 1.6;
            margin-bottom: 1.6rem;
        }
        body.page-email-verification .btn{
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .78rem 1.6rem;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: .85rem;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        body.page-email-verification .btn-primary{
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
            color: #fff;
            box-shadow: 0 8px 20px rgba(26,75,58,.3);
        }
        body.page-email-verification .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,75,58,.4); }
        body.page-email-verification .btn-outline{
            background: #fff;
            color: var(--primary-main);
            border: 1.5px solid var(--border-light);
            margin-left: .5rem;
        }
        body.page-email-verification .btn-outline:hover{ border-color: var(--primary-main); }
        body.page-email-verification .actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
        body.page-email-verification .divider{
            border: none;
            border-top: 1.5px solid var(--border-light);
            margin: 1.6rem 0 1.2rem;
        }
        body.page-email-verification .footer-link{
            font-size: .78rem;
            color: var(--text-secondary);
        }
        body.page-email-verification .footer-link a{
            color: var(--primary-main);
            font-weight: 600;
            text-decoration: none;
        }
        body.page-email-verification .footer-link a:hover{ text-decoration: underline; }
        @keyframes email-verification--slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    

/* ==========================================================
   Template: faqs.html (page-faqs)
   ========================================================== */

  /* ==== Dashboard UI token set (mirrors campaigns page) ==== */
  body.page-faqs{
    --primary-green: #02542D;
    --primary-green-dark: #01402A;
    --primary-green-light: #02542d15;
    --primary-green-ghost: #02542d08;
    --accent-emerald: #10b981;
    --accent-mint: #6ee7b7;

    --surface-white: #ffffff;
    --surface-gray-50: #f8fafc;
    --surface-gray-100: #f1f5f9;
    --surface-gray-200: #e2e8f0;

    --text-900: #0f172a;
    --text-700: #334155;
    --text-500: #64748b;

    --border-200: #e5e7eb;

    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;

    --transition: all .3s cubic-bezier(.4, 0, .2, 1);
    --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

    --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);

    --primary: var(--primary-green);
    --white: #ffffff;
    --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  }

  /* ==== Page wrapper ==== */
  body.page-faqs .dashboard-container{
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    color: var(--text-700);
  }

  /* ==== Unified header card ==== */
  body.page-faqs .customers-header-card{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    padding: 1rem 1.25rem .9rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
  }

  body.page-faqs .customers-header-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary-green-ghost);
    pointer-events: none;
    border-radius: var(--radius-xl);
  }

  body.page-faqs .customers-header-main{
    flex: 1 1 320px;
    min-width: 240px;
  }

  body.page-faqs #pageTitle{
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 .2rem 0;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.01em;
    flex-shrink: 0;
  }

  body.page-faqs .page-subtitle{
    font-size: .75rem;
    color: var(--text-500);
    font-weight: 600;
    margin: 0;
    letter-spacing: .02em;
  }

  /* ==== Controls bar ==== */
  body.page-faqs .controls-section{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 8px 12px;
    flex-shrink: 0;
    min-width: 310px;
  }

  body.page-faqs .controls-grid{
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* ==== Buttons ==== */
  body.page-faqs .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.7rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
  }

  body.page-faqs .btn-primary{
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: var(--shadow-sm);
    width: 100%;
    text-align: center;
    align-items: center;
  }

  body.page-faqs .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--white);
    text-decoration: none;
  }

  body.page-faqs .btn-secondary{
    background: var(--surface-white);
    color: var(--primary-green);
    border: 1px solid var(--border-200);
    box-shadow: var(--shadow-xs);
  }

  body.page-faqs .btn-secondary:hover{
    background: var(--primary-green-light);
    transform: translateY(-1px);
    color: var(--primary-green);
    text-decoration: none;
    border-color: var(--primary-green-light);
  }

  body.page-faqs .btn-danger{
    background: var(--error);
    color: var(--white);
    border: 1px solid var(--error);
    box-shadow: var(--shadow-xs);
  }

  body.page-faqs .btn-danger:hover:not(:disabled){
    background: #dc2626;
    color: var(--white);
    transform: translateY(-1px);
    text-decoration: none;
  }

  body.page-faqs .btn:disabled{
    cursor: not-allowed;
    opacity: .52;
    transform: none;
    box-shadow: none;
  }

  body.page-faqs .btn-outline-success{
    background: var(--surface-white);
    color: var(--primary-green);
    border: 1px solid var(--primary-green);
    box-shadow: var(--shadow-xs);
    width: 100%;
  }

  body.page-faqs .btn-outline-success:hover{
    background: var(--primary-green);
    color: var(--white);
    transform: translateY(-1px);
    text-decoration: none;
  }

  body.page-faqs .btn.btn-loading{
    position: relative;
    pointer-events: none;
    cursor: wait;
    opacity: .78;
  }

  body.page-faqs .btn .btn-spinner{
    display: none;
  }

  body.page-faqs .btn.btn-loading .btn-spinner{
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
  }

  body.page-faqs .btn.btn-loading .btn-text{
    visibility: hidden;
  }

  body.page-faqs .faq-delete-modal-backdrop{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(15 23 42 / .45);
  }

  body.page-faqs .faq-delete-dialog{
    width: min(100%, 25rem);
    padding: 1.5rem;
    border: 1px solid var(--border-200);
    border-radius: var(--radius-lg);
    background: var(--surface-white);
    color: var(--text-900);
    box-shadow: 0 24px 60px rgb(15 23 42 / .25);
    text-align: center;
  }

  body.page-faqs .faq-delete-dialog-title{
    margin: 0 0 1rem;
    color: var(--text-900);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
  }

  body.page-faqs .faq-delete-dialog-actions{
    display: flex;
    justify-content: center;
    gap: .75rem;
  }

  body.page-faqs .faq-delete-dialog-actions .btn{
    width: auto;
    min-width: 6.5rem;
    justify-content: center;
  }

  /* ==== Data table shell ==== */
  body.page-faqs .table-container{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  body.page-faqs .table-header{
    padding: .6rem .875rem;
    background: var(--surface-gray-50);
    border-bottom: 1px solid var(--border-200);
  }

  body.page-faqs .table-header-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
  }

  body.page-faqs .table-actions{
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
  }

  body.page-faqs .table-actions .btn{
    min-height: 2rem;
    justify-content: center;
    white-space: nowrap;
  }

  body.page-faqs .table-title{
    font-size: .95rem;
    font-weight: 700;
    color: var(--primary-green);
    margin: 0;
  }

  body.page-faqs .table-subtitle{
    color: var(--text-500);
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0;
  }

  body.page-faqs .custom-table{
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
  }

  body.page-faqs .table-wrapper{
    overflow-x: auto;
    max-width: 100%;
  }

  body.page-faqs .custom-table thead th{
    background: var(--primary-green-dark);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    padding: .75rem 1rem;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  body.page-faqs .custom-table thead th:hover{
    background: var(--primary-green);
  }

  body.page-faqs .custom-table .faq-select-column{
    width: 7.5rem;
    text-align: center;
  }

  body.page-faqs .faq-selection-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 0;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
  }

  body.page-faqs .faq-select-checkbox{
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--primary-green);
  }

  body.page-faqs .custom-table tbody tr{
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--border-200);
  }

  body.page-faqs .custom-table tbody tr:nth-child(even){
    background: var(--surface-gray-50);
  }

  body.page-faqs .custom-table tbody tr.is-selected{
    background: var(--primary-green-light);
    box-shadow: inset 3px 0 0 var(--primary-green);
  }

  body.page-faqs .custom-table tbody tr:hover{
    background: var(--primary-green-ghost);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  body.page-faqs .custom-table tbody tr.is-selected:hover{
    background: var(--primary-green-light);
    box-shadow: inset 3px 0 0 var(--primary-green), var(--shadow-sm);
  }

  body.page-faqs .custom-table td{
    padding: .75rem 1rem;
    color: #4b5563;
    border: none;
    vertical-align: middle;
    font-weight: 400;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
  }

  body.page-faqs .custom-table td.faq-select-cell{
    width: 7.5rem;
    text-align: center;
    white-space: nowrap;
  }

  body.page-faqs .table-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-white);
    border-top: 1px solid var(--border-200);
    font-size: .8125rem;
    color: var(--text-500);
  }

  /* Status Badges */
  body.page-faqs .status-badge{
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  body.page-faqs .status-success{
    background: var(--success);
    color: white;
  }

  body.page-faqs .status-warning{
    background: var(--warning);
    color: white;
  }

  /* ==== Form container ==== */
  body.page-faqs #faq-form-container{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: none;
    transition: var(--transition);
  }

  body.page-faqs #faq-form-container.show{
    display: block;
  }

  body.page-faqs #faq-form-container h2{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 1.25rem;
  }

  body.page-faqs .form-label{
    font-weight: 600;
    color: var(--text-700);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
  }

  body.page-faqs .form-control,
body.page-faqs .form-select{
    border: 1.5px solid var(--border-200);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: var(--transition-fast);
  }

  body.page-faqs .form-control:focus,
body.page-faqs .form-select:focus{
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--primary-green-light);
    outline: none;
  }

  body.page-faqs .form-check-input{
    width: 2.5rem;
    height: 1.25rem;
    cursor: pointer;
    border: 1.5px solid var(--border-200);
  }

  body.page-faqs .form-check-input:checked{
    background-color: var(--primary-green);
    border-color: var(--primary-green);
  }

  body.page-faqs .form-check-input:focus{
    box-shadow: 0 0 0 3px var(--primary-green-light);
  }

  /* Empty state styling */
  body.page-faqs .empty-state{
    text-align: center;
    padding: 48px 16px;
    color: var(--text-500);
  }

  body.page-faqs .empty-state i{
    font-size: 3rem;
    color: var(--primary-green);
    margin-bottom: 16px;
    display: block;
  }

  body.page-faqs .empty-state h3{
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-700);
    margin-bottom: 8px;
  }

  body.page-faqs .empty-state p{
    color: var(--text-500);
    margin: 0;
  }

  /* Pagination buttons */
  body.page-faqs .table-footer button{
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border-200);
    border-radius: var(--radius-md);
    background: var(--surface-white);
    color: var(--primary-green);
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 600;
    font-size: 0.8125rem;
  }

  body.page-faqs .table-footer button:hover:not(:disabled){
    background: var(--primary-green-light);
    border-color: var(--primary-green);
    transform: translateY(-1px);
  }

  body.page-faqs .table-footer button:disabled{
    color: var(--text-500);
    border-color: var(--border-200);
    cursor: not-allowed;
    opacity: 0.5;
  }

  body.page-faqs .table-footer button.active{
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
  }

  /* Loading States */
  body.page-faqs .skeleton{
    background: linear-gradient(90deg, var(--surface-gray-200) 25%, var(--surface-gray-100) 50%, var(--surface-gray-200) 75%);
    background-size: 200% 100%;
    animation: faqs--shimmer 1.5s infinite;
    border-radius: var(--radius-md);
  }

  @keyframes faqs--shimmer {
    0% {
      background-position: -200px 0;
    }

    100% {
      background-position: 200px 0;
    }
  }

  body.page-faqs .fade-in{
    animation: faqs--fadeIn .4s ease-out;
  }

  @keyframes faqs--fadeIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  /* ==== Mobile responsive ==== */
  @media (max-width: 768px) {
    body.page-faqs .dashboard-container{
      padding: 0.75rem;
    }

    body.page-faqs .customers-header-card{
      padding: .75rem;
      gap: .75rem;
    }

    body.page-faqs #pageTitle{
      font-size: 1.25rem;
    }

    body.page-faqs .page-subtitle{
      font-size: .72rem;
    }

    body.page-faqs .controls-section{
      min-width: unset;
      width: 100%;
    }

    body.page-faqs .controls-grid{
      flex-direction: column;
    }

    body.page-faqs .controls-grid .btn{
      width: 100%;
    }

    body.page-faqs .table-container{
      overflow-x: auto;
    }

    body.page-faqs .custom-table{
      min-width: 700px;
    }

    body.page-faqs .custom-table th,
body.page-faqs .custom-table td{
      padding: 8px 6px;
      font-size: 0.8125rem;
    }

    body.page-faqs .table-footer{
      padding: 8px;
      flex-direction: column;
      gap: 8px;
      text-align: center;
    }

    body.page-faqs .table-actions,
body.page-faqs .table-actions .btn{
      width: 100%;
    }
  }

  @media (max-width: 576px) {
    body.page-faqs .dashboard-container{
      padding: 0.5rem;
    }

    body.page-faqs .customers-header-card{
      padding: .6rem;
    }

    body.page-faqs #pageTitle{
      font-size: 1.125rem;
    }

    body.page-faqs .controls-section{
      padding: .5rem .6rem;
    }

    body.page-faqs .custom-table{
      min-width: 650px;
    }

    body.page-faqs .btn{
      padding: 0.375rem 0.625rem;
      font-size: 0.75rem;
    }
  }


/* ==========================================================
   Template: forgot_password.html (page-forgot-password)
   ========================================================== */

        /* Root Variables - Professional Design System */
        body.page-forgot-password{
            --primary-dark: #1a4b3a;
            --primary-main: #1a4b3a;
            --primary-light: #2d7a5f;
            --primary-bg: #f0f7f4;
            --accent: #1e6b4f;
            --surface: #ffffff;
            --surface-elevated: #fafbfa;
            --text-primary: #1a1a1a;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-light: #e5e7eb;
            --border-focus: #3b82f6;
            --success: #1a4b3a;
            --error: #dc2626;
            --warning: #d97706;
            --info: #2563eb;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --radius-sm: 10px;
            --radius-md: 13px;
            --radius-lg: 19px;
            --radius-xl: 25px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* Base Styles */
        body.page-forgot-password *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body.page-forgot-password{
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 100%);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            position: relative;
            overflow-x: hidden;
        }

        body.page-forgot-password::before{
            content: "";
            position: fixed;
            inset: 0;
            background:
                radial-gradient(circle at 20% 50%, rgba(45, 122, 95, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(30, 107, 79, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(45, 122, 95, 0.06) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }

        /* State Classes for JavaScript */
        body.page-forgot-password .loading-overlay{
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.95);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
        }

        body.page-forgot-password .loading-overlay.show{
            display: flex;
        }

        body.page-forgot-password .loading-spinner{
            width: 50px;
            height: 50px;
            border: 3px solid var(--border-light);
            border-top: 3px solid var(--primary-main);
            border-radius: 50%;
            animation: forgot-password--spin 1s linear infinite;
        }

        body.page-forgot-password .network-status{
            position: fixed;
            top: 1.5rem;
            right: 1.5rem;
            padding: 0.75rem 1.25rem;
            border-radius: var(--radius-md);
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 1000;
            transform: translateY(-100px);
            transition: var(--transition);
            box-shadow: var(--shadow-md);
        }

        body.page-forgot-password .network-status.online{
            background: rgba(5, 150, 105, 0.9);
            color: white;
        }

        body.page-forgot-password .network-status.offline{
            background: rgba(220, 38, 38, 0.9);
            color: white;
            transform: translateY(0);
        }

        body.page-forgot-password .network-status.hidden{
            transform: translateY(-100px);
        }

        /* Layout Container - Optimized for 1700x956 */
        body.page-forgot-password .main-container{
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            max-width: 1000px;
            background: var(--surface);
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-xl);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: forgot-password--slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        /* Hero Section - Scaled for 1700x956 */
        body.page-forgot-password .hero-section{
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-main) 50%, var(--primary-light) 100%);
            color: white;
            padding: 2.2rem 1.8rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        body.page-forgot-password .hero-section::before,
body.page-forgot-password .hero-section::after{
            content: "";
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: forgot-password--float 6s ease-in-out infinite;
        }

        body.page-forgot-password .hero-section::before{
            width: 160px;
            height: 160px;
            top: -40px;
            right: -40px;
            animation-delay: 0s;
        }

        body.page-forgot-password .hero-section::after{
            width: 120px;
            height: 120px;
            bottom: -24px;
            left: -24px;
            animation-delay: 3s;
        }

        body.page-forgot-password .hero-content{
            position: relative;
            z-index: 2;
        }

        body.page-forgot-password .hero-title{
            font-family: "Poppins", sans-serif;
            font-size: 2.6rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: forgot-password--fadeInUp 0.8s 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
        }

        body.page-forgot-password .hero-subtitle{
            font-size: 1rem;
            opacity: 0.95;
            margin-bottom: 1.5rem;
            animation: forgot-password--fadeInUp 0.8s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
            font-weight: 500;
        }

        body.page-forgot-password .hero-features{
            list-style: none;
            animation: forgot-password--fadeInUp 0.8s 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        body.page-forgot-password .hero-features li{
            display: flex;
            align-items: center;
            margin-bottom: 0.55rem;
            font-size: 0.78rem;
            opacity: 0;
            transform: translateX(-20px);
            animation: forgot-password--slideInLeft 0.6s ease-out forwards;
            font-weight: 500;
        }

        body.page-forgot-password .hero-features li:nth-child(1){
            animation-delay: 0.8s;
        }

        body.page-forgot-password .hero-features li:nth-child(2){
            animation-delay: 1.0s;
        }

        body.page-forgot-password .hero-features li:nth-child(3){
            animation-delay: 1.2s;
        }

        body.page-forgot-password .hero-features li:nth-child(4){
            animation-delay: 1.4s;
        }

        body.page-forgot-password .hero-features i{
            margin-right: 0.55rem;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
            animation: forgot-password--pulse 2s infinite;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
        }

        /* Form Section - Scaled for 1700x956 */
        body.page-forgot-password .form-section{
            padding: 2.2rem 1.8rem;
            background: var(--surface);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        body.page-forgot-password .form-header{
            text-align: center;
            margin-bottom: 1.8rem;
            animation: forgot-password--fadeInUp 0.8s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        body.page-forgot-password .form-title{
            font-family: "Poppins", sans-serif;
            font-size: 1.7rem;
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 0.38rem;
            position: relative;
        }

        body.page-forgot-password .form-subtitle{
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 400;
            margin-bottom: 0.38rem;
        }

        body.page-forgot-password .form-description{
            color: var(--text-muted);
            font-size: 0.7rem;
        }

        body.page-forgot-password .form-divider{
            width: 48px;
            height: 2.5px;
            background: linear-gradient(90deg, var(--primary-main), var(--primary-light));
            margin: 0.75rem auto 0;
            border-radius: var(--radius-sm);
            animation: forgot-password--scaleX 0.8s ease-out 1.5s both;
        }

        body.page-forgot-password .forgot-form{
            animation: forgot-password--fadeInUp 0.8s 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        body.page-forgot-password .form-group{
            margin-bottom: 1.1rem;
            position: relative;
            transform: translateY(20px);
            opacity: 0;
            animation: forgot-password--slideInUp 0.6s ease-out forwards;
        }

        body.page-forgot-password .form-group:nth-child(2){
            animation-delay: 0.1s;
        }

        body.page-forgot-password .form-label{
            display: block;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.55rem;
            font-size: 0.72rem;
            letter-spacing: 0.025em;
            transition: var(--transition);
        }

        /* Input Styling */
        body.page-forgot-password .input-wrapper{
            position: relative;
        }

        body.page-forgot-password .input-icon{
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-main);
            font-size: 0.96rem;
            z-index: 2;
            transition: var(--transition);
            opacity: 0.8;
            pointer-events: none;
        }

        body.page-forgot-password .form-control{
            width: 100%;
            padding: 0.78rem 1rem 0.78rem 2.6rem;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-md);
            font-size: 0.78rem;
            transition: var(--transition);
            background: var(--surface);
            color: var(--text-primary);
            font-family: inherit;
            font-weight: 500;
            position: relative;
        }

        body.page-forgot-password .form-control:focus{
            outline: none;
            border-color: var(--primary-main);
            box-shadow: 0 0 0 4px rgba(45, 122, 95, 0.15);
            transform: translateY(-2px);
            animation: forgot-password--focusPulse 0.3s ease-out;
        }

        body.page-forgot-password .form-control:focus+.input-icon{
            color: var(--primary-main);
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }

        body.page-forgot-password .form-control:hover:not(:focus){
            border-color: var(--text-muted);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        body.page-forgot-password .form-control::placeholder{
            color: var(--text-muted);
            transition: var(--transition);
            font-weight: 400;
        }

        body.page-forgot-password .form-control:focus::placeholder{
            color: transparent;
            transform: translateY(-10px);
        }

        /* Validation States */
        body.page-forgot-password .form-control.is-invalid{
            border-color: var(--error);
            box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
            animation: forgot-password--shake 0.5s ease-in-out;
        }

        body.page-forgot-password .form-control.is-valid{
            border-color: var(--success);
            box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
        }

        body.page-forgot-password .invalid-feedback{
            display: block;
            color: var(--error);
            font-size: 0.65rem;
            margin-top: 0.38rem;
            opacity: 0;
            transform: translateY(-10px);
            transition: var(--transition);
            font-weight: 500;
        }

        body.page-forgot-password .invalid-feedback.show{
            opacity: 1;
            transform: translateY(0);
            animation: forgot-password--errorSlideIn 0.4s ease-out;
        }

        body.page-forgot-password .valid-feedback{
            display: block;
            color: var(--success);
            font-size: 0.65rem;
            margin-top: 0.38rem;
            opacity: 0;
            transform: translateY(-10px);
            transition: var(--transition);
            font-weight: 500;
        }

        body.page-forgot-password .valid-feedback.show{
            opacity: 1;
            transform: translateY(0);
            animation: forgot-password--successSlideIn 0.4s ease-out;
        }

        /* Security Notice */
        body.page-forgot-password .security-notice{
            background: rgba(45, 122, 95, 0.05);
            border: 1px solid rgba(45, 122, 95, 0.1);
            border-radius: var(--radius-md);
            padding: 0.75rem;
            margin-bottom: 1.1rem;
            display: flex;
            align-items: start;
            gap: 0.55rem;
            animation: forgot-password--fadeIn 0.6s ease-out 0.2s forwards;
            opacity: 0;
        }

        body.page-forgot-password .security-notice i{
            color: var(--primary-main);
            margin-top: 0.1rem;
            flex-shrink: 0;
            font-size: 0.88rem;
        }

        body.page-forgot-password .security-notice-content{
            font-size: 0.7rem;
            color: var(--text-secondary);
        }

        body.page-forgot-password .security-notice-title{
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.18rem;
        }

        /* Submit Button */
        body.page-forgot-password .btn-reset{
            width: 100%;
            padding: 0.95rem 1.15rem;
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--primary-light) 100%);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 0.88rem;
            letter-spacing: 0.025em;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            margin-top: 0.75rem;
            transform: translateY(20px);
            opacity: 0;
            animation: forgot-password--slideInUp 0.6s ease-out 0.4s forwards;
            box-shadow: var(--shadow-md);
        }

        body.page-forgot-password .btn-reset:hover:not(:disabled){
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            filter: brightness(1.05);
        }

        body.page-forgot-password .btn-reset:active{
            transform: translateY(-1px);
        }

        body.page-forgot-password .btn-reset:disabled{
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        body.page-forgot-password .btn-reset:focus{
            outline: 3px solid var(--primary-main);
            outline-offset: 3px;
        }

        body.page-forgot-password .btn-reset::before{
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s;
        }

        body.page-forgot-password .btn-reset:hover::before{
            left: 100%;
        }

        body.page-forgot-password .btn-reset.loading{
            color: transparent;
            pointer-events: none;
        }

        body.page-forgot-password .btn-reset.loading::after{
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: forgot-password--spin 1s linear infinite;
        }

        body.page-forgot-password .btn-reset.success{
            background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
            animation: forgot-password--successPulse 0.6s ease;
        }

        body.page-forgot-password .btn-reset.success::after{
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.4rem;
            animation: forgot-password--checkmarkBounce 0.6s var(--bounce);
            color: white;
        }

        /* Message Box */
        body.page-forgot-password .message-box{
            margin-top: 1.1rem;
            min-height: 20px;
        }

        body.page-forgot-password .alert{
            border-radius: var(--radius-md);
            border: none;
            padding: 0.95rem;
            font-size: 0.72rem;
            font-weight: 500;
            position: relative;
            overflow: hidden;
            transform: translateY(20px);
            opacity: 0;
            animation: forgot-password--alertSlideIn 0.5s ease-out forwards;
        }

        body.page-forgot-password .alert::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            animation: forgot-password--alertProgress 0.4s ease-out;
        }

        body.page-forgot-password .alert-success{
            background: rgba(5, 150, 105, 0.1);
            color: var(--success);
            border: 1px solid rgba(5, 150, 105, 0.2);
        }

        body.page-forgot-password .alert-success::before{
            background: var(--success);
        }

        body.page-forgot-password .alert-danger{
            background: rgba(220, 38, 38, 0.1);
            color: var(--error);
            border: 1px solid rgba(220, 38, 38, 0.2);
        }

        body.page-forgot-password .alert-danger::before{
            background: var(--error);
        }

        body.page-forgot-password .alert-info{
            background: rgba(37, 99, 235, 0.1);
            color: var(--info);
            border: 1px solid rgba(37, 99, 235, 0.2);
        }

        body.page-forgot-password .alert-info::before{
            background: var(--info);
        }

        body.page-forgot-password .alert-warning{
            background: rgba(217, 119, 6, 0.1);
            color: var(--warning);
            border: 1px solid rgba(217, 119, 6, 0.2);
        }

        body.page-forgot-password .alert-warning::before{
            background: var(--warning);
        }

        /* Form Links */
        body.page-forgot-password .form-links{
            text-align: center;
            margin-top: 1.5rem;
            padding-top: 1.1rem;
            border-top: 1px solid var(--border-light);
            opacity: 0;
            animation: forgot-password--fadeIn 0.6s ease-out 0.6s forwards;
        }

        body.page-forgot-password .form-links a{
            color: var(--primary-main);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.75rem;
            transition: var(--transition);
            position: relative;
            padding: 0.2rem 0;
        }

        body.page-forgot-password .form-links a:hover{
            color: var(--primary-dark);
            transform: translateY(-1px);
        }

        body.page-forgot-password .form-links a:focus{
            outline: 2px solid var(--primary-main);
            outline-offset: 2px;
        }

        body.page-forgot-password .form-links a::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-main), var(--primary-light));
            transition: width 0.3s ease;
        }

        body.page-forgot-password .form-links a:hover::after{
            width: 100%;
        }

        /* Responsive Design - Optimized for 1700x956 */
        @media (max-width: 1024px) {
            body.page-forgot-password .main-container{
                grid-template-columns: 1fr;
                max-width: 500px;
            }

            body.page-forgot-password .hero-section{
                padding: 1.5rem 1.2rem;
                text-align: center;
            }

            body.page-forgot-password .hero-title{
                font-size: 2rem;
            }
        }

        @media (max-width: 768px) {
            body.page-forgot-password{
                padding: 0.4rem;
            }

            body.page-forgot-password .main-container{
                border-radius: var(--radius-lg);
            }

            body.page-forgot-password .hero-section{
                padding: 1.2rem 0.85rem;
            }

            body.page-forgot-password .hero-title{
                font-size: 1.6rem;
            }

            body.page-forgot-password .hero-subtitle{
                font-size: 0.8rem;
            }

            body.page-forgot-password .form-section{
                padding: 1.8rem 1.2rem;
            }

            body.page-forgot-password .form-title{
                font-size: 1.4rem;
            }

            body.page-forgot-password .form-group{
                margin-bottom: 0.95rem;
            }

            body.page-forgot-password .form-control{
                padding: 0.68rem 0.8rem 0.68rem 2.2rem;
                font-size: 0.72rem;
            }

            body.page-forgot-password .btn-reset{
                padding: 0.78rem 0.8rem;
                font-size: 0.8rem;
            }

            body.page-forgot-password .input-icon{
                left: 0.8rem;
                font-size: 0.88rem;
            }
        }

        @media (max-width: 480px) {
            body.page-forgot-password .form-section{
                padding: 1.5rem 0.8rem;
            }

            body.page-forgot-password .form-title{
                font-size: 1.2rem;
            }
        }

        /* Animations */
        @keyframes forgot-password--slideUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes forgot-password--fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes forgot-password--slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes forgot-password--slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes forgot-password--fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes forgot-password--scaleX {
            from {
                transform: scaleX(0);
            }

            to {
                transform: scaleX(1);
            }
        }

        @keyframes forgot-password--float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes forgot-password--spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes forgot-password--pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.8;
                transform: scale(1.05);
            }
        }

        @keyframes forgot-password--shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-8px);
            }

            75% {
                transform: translateX(8px);
            }
        }

        @keyframes forgot-password--focusPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(45, 122, 95, 0.4);
            }

            100% {
                box-shadow: 0 0 0 4px rgba(45, 122, 95, 0.15);
            }
        }

        @keyframes forgot-password--successPulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes forgot-password--checkmarkBounce {
            0% {
                transform: translate(-50%, -50%) scale(0);
            }

            50% {
                transform: translate(-50%, -50%) scale(1.3);
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes forgot-password--errorSlideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes forgot-password--successSlideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes forgot-password--alertSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes forgot-password--alertProgress {
            from {
                transform: scaleY(0);
            }

            to {
                transform: scaleY(1);
            }
        }

        /* Accessibility */
        body.page-forgot-password .sr-only{
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        @media (prefers-contrast: high) {
            body.page-forgot-password{
                --border-light: #333333;
                --text-secondary: #333333;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            body.page-forgot-password *,
body.page-forgot-password *::before,
body.page-forgot-password *::after{
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        body.page-forgot-password .form-control:focus-visible,
body.page-forgot-password .btn-reset:focus-visible{
            outline: 3px solid var(--primary-main);
            outline-offset: 3px;
        }

        @media print {

            body.page-forgot-password .loading-overlay,
body.page-forgot-password .network-status,
body.page-forgot-password .hero-section::before,
body.page-forgot-password .hero-section::after{
                display: none !important;
            }
        }
    


        /* Login-aligned auth layout overrides */
        body.page-forgot-password{
            background:
                radial-gradient(60rem 60rem at -10% -20%, rgba(26, 75, 58, .08), transparent 60%),
                radial-gradient(60rem 60rem at 110% 120%, rgba(30, 107, 79, .08), transparent 60%),
                linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 45%, var(--primary-bg) 100%);
            padding: clamp(0.5rem, 2vw, 2rem);
        }

        body.page-forgot-password::before{
            display: none;
        }

        body.page-forgot-password .main-container{
            grid-template-columns: 30fr 70fr;
            max-width: 1180px;
            min-height: 640px;
            height: auto;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, .8);
        }

        body.page-forgot-password .hero-section{
            background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary-main) 50%, var(--accent) 100%);
            padding: 2.8rem 2.2rem;
        }

        body.page-forgot-password .hero-section::before{
            width: 160px;
            height: 160px;
            top: -40px;
            right: -40px;
        }

        body.page-forgot-password .hero-section::after{
            width: 120px;
            height: 120px;
            bottom: -24px;
            left: -24px;
        }

        body.page-forgot-password .hero-title{
            font-size: 2.6rem;
            font-weight: 800;
            margin-bottom: 0.9rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        body.page-forgot-password .hero-subtitle{
            font-size: 1rem;
            margin-bottom: 1.3rem;
            font-weight: 400;
            opacity: 0.95;
        }

        body.page-forgot-password .hero-features{
            margin-top: 1rem;
        }

        body.page-forgot-password .hero-features li{
            font-size: 0.96rem;
            font-weight: 500;
            margin-bottom: 0.65rem;
        }

        body.page-forgot-password .hero-features i{
            font-size: 1.05rem;
            color: rgba(255, 255, 255, 0.9);
        }

        body.page-forgot-password .form-section{
            padding: 2.8rem;
            align-items: center;
            justify-content: flex-start;
        }

        body.page-forgot-password #main-content{
            width: 100%;
            max-width: 620px;
        }

        body.page-forgot-password .form-header{
            margin-bottom: 2rem;
        }

        body.page-forgot-password .form-title{
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.45rem;
            letter-spacing: -0.02em;
        }

        body.page-forgot-password .form-subtitle{
            font-size: 0.94rem;
            font-weight: 500;
        }

        body.page-forgot-password .form-description{
            font-size: 0.85rem;
        }

        body.page-forgot-password .forgot-form{
            max-width: 520px;
            margin: 0 auto;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        body.page-forgot-password .form-group{
            margin-bottom: 1.3rem;
        }

        body.page-forgot-password .form-label{
            font-size: 0.89rem;
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        body.page-forgot-password .form-label i{
            color: var(--primary-main);
            margin-right: 0.5rem;
            font-size: 0.96rem;
        }

        body.page-forgot-password .form-control{
            padding: 0.92rem 1.05rem 0.92rem 2.8rem;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-md);
            font-size: 0.89rem;
            background: var(--surface);
            font-weight: 500;
        }

        body.page-forgot-password .form-control:hover{
            border-color: #cbd5e1;
        }

        body.page-forgot-password .form-control:focus{
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 4px rgba(26, 75, 58, .1);
            background: var(--surface-elevated);
        }

        body.page-forgot-password .input-icon{
            left: 1rem;
            font-size: 0.96rem;
        }

        body.page-forgot-password .security-notice{
            background: rgba(26, 75, 58, .05);
            border: 1px solid rgba(26, 75, 58, .1);
            border-radius: var(--radius-md);
            padding: 0.85rem 0.95rem;
            margin-bottom: 1.3rem;
            gap: 0.6rem;
        }

        body.page-forgot-password .security-notice i{
            color: var(--primary-main);
            margin-top: 0.1rem;
            font-size: 0.9rem;
        }

        body.page-forgot-password .security-notice-content{
            font-size: 0.82rem;
            line-height: 1.5;
        }

        body.page-forgot-password .security-notice-title{
            font-size: 0.9rem;
            margin-bottom: 0.2rem;
        }

        body.page-forgot-password .btn-reset{
            width: 75%;
            margin: 0.25rem auto 0;
            min-height: 58px;
            padding: 1.02rem 1.8rem;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 1rem;
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
            box-shadow: 0 10px 25px rgba(26, 75, 58, .3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.page-forgot-password .btn-reset.success{
            opacity: 1;
            transform: translateY(0);
        }

        body.page-forgot-password .btn-reset.success::after{
            content: none;
        }

        body.page-forgot-password .btn-reset.success #buttonText{
            opacity: 1;
        }

        body.page-forgot-password .btn-reset:hover:not(:disabled){
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(26, 75, 58, .4);
        }

        body.page-forgot-password .message-box{
            min-height: 20px;
            margin-top: 1.2rem;
        }

        body.page-forgot-password .form-links{
            margin-top: 1.6rem;
            padding-top: 1.4rem;
            border-top: 2px solid var(--border-light);
            font-size: 0.92rem;
            line-height: 1.75;
        }

        body.page-forgot-password .form-links a{
            font-weight: 700;
        }

        @media (max-width: 1024px) {
            body.page-forgot-password .main-container{
                grid-template-columns: 1fr;
                height: auto;
                max-width: 500px;
            }

            body.page-forgot-password .hero-section{
                text-align: center;
                padding: 1.5rem 1.2rem;
            }

            body.page-forgot-password .hero-title{
                font-size: 2rem;
            }
        }

        @media (max-width: 768px) {
            body.page-forgot-password .form-section{
                padding: 2rem 1.5rem;
            }

            body.page-forgot-password #main-content{
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            body.page-forgot-password .form-section{
                padding: 1.75rem 1rem;
            }

            body.page-forgot-password .btn-reset{
                width: 100%;
            }
        }

        html[data-theme="dark"] body.page-forgot-password{
            background:
                radial-gradient(circle at top left, rgba(8, 73, 40, 0.16), transparent 28%),
                radial-gradient(circle at top right, rgba(8, 73, 40, 0.08), transparent 24%),
                linear-gradient(180deg, #07100c 0%, #090f0c 100%);
            color: #eef5ef;
        }

        html[data-theme="dark"] body.page-forgot-password .main-container{
            background: linear-gradient(180deg, rgba(12, 18, 15, .98) 0%, rgba(10, 16, 13, .98) 100%);
            border-color: rgba(255, 255, 255, .08);
            box-shadow: 0 24px 60px rgba(0, 0, 0, .48);
        }

        html[data-theme="dark"] body.page-forgot-password .hero-section{
            background: linear-gradient(145deg, #06291a 0%, #084928 50%, #0c6237 100%);
            border-right: 1px solid rgba(255, 255, 255, .06);
        }

        html[data-theme="dark"] body.page-forgot-password .form-section{
            background: linear-gradient(180deg, rgba(15, 23, 19, .98) 0%, rgba(12, 18, 15, .98) 100%);
        }

        html[data-theme="dark"] body.page-forgot-password .hero-title,
html[data-theme="dark"] body.page-forgot-password .form-title{
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-forgot-password .hero-subtitle,
html[data-theme="dark"] body.page-forgot-password .form-subtitle,
html[data-theme="dark"] body.page-forgot-password .form-description,
html[data-theme="dark"] body.page-forgot-password .form-links{
            color: #9eb0a6;
        }

        html[data-theme="dark"] body.page-forgot-password .hero-features li{
            color: #ebf7ef;
        }

        html[data-theme="dark"] body.page-forgot-password .form-label,
html[data-theme="dark"] body.page-forgot-password .form-label i{
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-forgot-password .form-control{
            background: rgba(255, 255, 255, .04) !important;
            color: #eef5ef !important;
            border-color: rgba(255, 255, 255, .08) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
        }

        html[data-theme="dark"] body.page-forgot-password .form-control:hover{
            border-color: rgba(255, 255, 255, .14) !important;
        }

        html[data-theme="dark"] body.page-forgot-password .form-control:focus{
            background: rgba(255, 255, 255, .05) !important;
            border-color: rgba(8, 73, 40, .58) !important;
            box-shadow: 0 0 0 4px rgba(8, 73, 40, .16) !important;
        }

        html[data-theme="dark"] body.page-forgot-password .form-control::placeholder{
            color: #71837a !important;
        }

        html[data-theme="dark"] body.page-forgot-password .input-icon{
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-forgot-password .security-notice{
            background: rgba(8, 73, 40, .14);
            border-color: rgba(8, 73, 40, .22);
        }

        html[data-theme="dark"] body.page-forgot-password .security-notice i{
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-forgot-password .btn-reset{
            background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
            box-shadow: 0 14px 28px rgba(8, 73, 40, .24);
        }

        html[data-theme="dark"] body.page-forgot-password .btn-reset:hover:not(:disabled){
            box-shadow: 0 18px 34px rgba(8, 73, 40, .32);
        }

        html[data-theme="dark"] body.page-forgot-password .form-links{
            border-top-color: rgba(255, 255, 255, .08);
        }

        html[data-theme="dark"] body.page-forgot-password .form-links a{
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-forgot-password .message-box .alert{
            background: rgba(12, 18, 15, .96);
            color: #eef5ef;
            border-color: rgba(255, 255, 255, .08);
        }

        html[data-theme="dark"] body.page-forgot-password .alert-success{
            background: rgba(16, 185, 129, .12) !important;
            color: #c8f7dd !important;
            border-left-color: rgba(16, 185, 129, .7) !important;
        }

        html[data-theme="dark"] body.page-forgot-password .alert-danger{
            background: rgba(239, 68, 68, .12) !important;
            color: #fecaca !important;
            border-left-color: rgba(239, 68, 68, .7) !important;
        }

        html[data-theme="dark"] body.page-forgot-password .alert-warning{
            background: rgba(245, 158, 11, .12) !important;
            color: #fde68a !important;
            border-left-color: rgba(245, 158, 11, .7) !important;
        }

        html[data-theme="dark"] body.page-forgot-password .alert-info{
            background: rgba(8, 73, 40, .14) !important;
            color: #d9fbe5 !important;
            border-left-color: rgba(8, 73, 40, .7) !important;
        }

        @media (max-width: 1024px) {
            html[data-theme="dark"] body.page-forgot-password .main-container{
                background: linear-gradient(180deg, rgba(12, 18, 15, .98) 0%, rgba(10, 16, 13, .98) 100%);
            }
        }
    

/* ==========================================================
   Template: includes/theme_support.html (global)
   ========================================================== */

    :root {
        color-scheme: light;

        /* Shared theme tokens */
        --wb-page-bg: #f4f7f4;
        --wb-page-bg-soft: #eef2f7;
        --wb-surface: #ffffff;
        --wb-surface-soft: #f8fafc;
        --wb-surface-strong: #edf2f7;
        --wb-text: #0f172a;
        --wb-text-muted: #64748b;
        --wb-text-soft: #94a3b8;
        --wb-border: #e2e8f0;
        --wb-border-strong: #cbd5e1;
        --wb-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
        --wb-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
        --wb-shadow-md: 0 10px 25px rgba(15, 23, 42, 0.08);
        --wb-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
        --wb-shadow-xl: 0 30px 70px rgba(15, 23, 42, 0.15);
        --wb-shadow-panel: 0 18px 34px -24px rgba(15, 23, 42, 0.35);
        --wb-brand: #02542d;
        --wb-brand-strong: #013a1f;
        --wb-brand-soft: rgba(2, 84, 45, 0.08);
        --wb-brand-soft-2: rgba(2, 84, 45, 0.12);
        --wb-success: #16a34a;
        --wb-warning: #f59e0b;
        --wb-danger: #ef4444;
        --wb-info: #3b82f6;

        /* Bridge tokens used by existing templates */
        --primary-bg: var(--wb-page-bg);
        --primary-dark: var(--wb-brand-strong);
        --primary-main: var(--wb-brand);
        --primary-light: #2d7a5f;
        --accent: #1e6b4f;
        --surface: var(--wb-surface);
        --surface-elevated: var(--wb-surface);
        --surface-primary: var(--wb-surface);
        --surface-secondary: var(--wb-page-bg-soft);
        --surface-tertiary: var(--wb-surface-strong);
        --surface-white: var(--wb-surface);
        --text-primary: var(--wb-text);
        --text-secondary: var(--wb-text-muted);
        --text-muted: var(--wb-text-soft);
        --border-light: var(--wb-border);
        --border-focus: var(--wb-brand);
        --shadow-xs: var(--wb-shadow-xs);
        --shadow-sm: var(--wb-shadow-sm);
        --shadow-md: var(--wb-shadow-md);
        --shadow-lg: var(--wb-shadow-lg);
        --shadow-xl: var(--wb-shadow-xl);
        --shadow: var(--wb-shadow-sm);

        /* Existing app tokens */
        --brand-primary: var(--wb-brand);
        --brand-secondary: var(--wb-brand-strong);
        --brand-tertiary: #0b4426;
        --brand-light: #0e5a36;
        --brand-accent: #9cfccb;
        --brand-accent-vibrant: #7cf5a3;
        --active-indicator: #c6f68c;

        --ink-900: #0f172a;
        --ink-800: #1e293b;
        --ink-700: #334155;
        --ink-600: #475569;
        --ink-500: #64748b;
        --ink-400: #94a3b8;
        --ink-300: #cbd5e1;
        --ink-200: #e2e8f0;
        --ink-100: #f1f5f9;
        --ink-50: #f8fafc;

        --sidebar-bg: linear-gradient(145deg, var(--brand-secondary) 0%, var(--brand-primary) 35%, var(--brand-tertiary) 100%);
        --sidebar-text: rgba(255, 255, 255, 0.96);
        --sidebar-text-muted: rgba(255, 255, 255, 0.74);
        --sidebar-text-soft: rgba(255, 255, 255, 0.54);
        --sidebar-divider: rgba(255, 255, 255, 0.08);
        --sidebar-hover-bg: rgba(255, 255, 255, 0.10);
        --sidebar-hover-border: rgba(255, 255, 255, 0.18);
        --sidebar-hover-shadow: rgba(0, 0, 0, 0.25);
        --sidebar-active-bg: rgba(255, 255, 255, 0.15);
        --sidebar-active-border: rgba(255, 255, 255, 0.22);
        --sidebar-active-shadow: rgba(0, 0, 0, 0.28);

        --bs-body-bg: var(--wb-page-bg);
        --bs-body-color: var(--wb-text);
        --bs-border-color: var(--wb-border);
        --bs-secondary-bg: var(--wb-page-bg-soft);
        --bs-tertiary-bg: var(--wb-surface-strong);
        --bs-card-bg: var(--wb-surface);
        --bs-card-border-color: var(--wb-border);
        --bs-dropdown-bg: var(--wb-surface);
        --bs-dropdown-link-color: var(--wb-text);
        --bs-dropdown-link-hover-bg: var(--wb-brand-soft);
        --bs-dropdown-link-hover-color: var(--brand-accent);
        --bs-modal-bg: var(--wb-surface);
        --bs-modal-color: var(--wb-text);
        --bs-offcanvas-bg: var(--wb-surface);
        --bs-table-bg: var(--wb-surface);
        --bs-table-color: var(--wb-text);
        --bs-table-striped-bg: var(--wb-page-bg-soft);
        --bs-table-hover-bg: rgba(2, 84, 45, 0.05);
        --bs-primary: var(--brand-primary);
        --bs-primary-rgb: 2, 84, 45;
        --bs-success: var(--wb-success);
        --bs-warning: var(--wb-warning);
        --bs-danger: var(--wb-danger);
        --bs-info: var(--wb-info);
    }

    html[data-theme="dark"] {
        color-scheme: dark;

        --wb-page-bg: #08110d;
        --wb-page-bg-soft: #0d1612;
        --wb-surface: #101815;
        --wb-surface-soft: #131d19;
        --wb-surface-strong: #17231d;
        --wb-text: #edf5ef;
        --wb-text-muted: #9eaea5;
        --wb-text-soft: #72837a;
        --wb-border: rgba(148, 163, 184, 0.16);
        --wb-border-strong: rgba(148, 163, 184, 0.24);
        --wb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
        --wb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.24);
        --wb-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.36);
        --wb-shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.42);
        --wb-shadow-xl: 0 36px 80px rgba(0, 0, 0, 0.50);
        --wb-shadow-panel: 0 24px 42px -30px rgba(0, 0, 0, 0.60);
        --wb-brand: rgb(8 73 40);
        --wb-brand-strong: #06331b;
        --wb-brand-soft: rgba(8, 73, 40, 0.14);
        --wb-brand-soft-2: rgba(8, 73, 40, 0.20);
        --wb-success: #34d399;
        --wb-warning: #f59e0b;
        --wb-danger: #ef4444;
        --wb-info: #60a5fa;

        --primary-bg: var(--wb-page-bg);
        --primary-dark: #06170f;
        --primary-main: var(--wb-brand);
        --primary-light: #0d6a39;
        --accent: #0d6a39;
        --surface: var(--wb-surface);
        --surface-elevated: var(--wb-surface);
        --surface-primary: var(--wb-surface);
        --surface-secondary: var(--wb-page-bg-soft);
        --surface-tertiary: var(--wb-surface-soft);
        --surface-white: var(--wb-surface);
        --text-primary: var(--wb-text);
        --text-secondary: var(--wb-text-muted);
        --text-muted: var(--wb-text-soft);
        --border-light: var(--wb-border);
        --border-focus: var(--wb-brand);
        --shadow-xs: var(--wb-shadow-xs);
        --shadow-sm: var(--wb-shadow-sm);
        --shadow-md: var(--wb-shadow-md);
        --shadow-lg: var(--wb-shadow-lg);
        --shadow-xl: var(--wb-shadow-xl);
        --shadow: var(--wb-shadow-sm);

        --brand-primary: var(--wb-brand);
        --brand-secondary: var(--wb-brand-strong);
        --brand-tertiary: #0b4526;
        --brand-light: #0f6f3d;
        --brand-accent: #c9f5d4;
        --brand-accent-vibrant: #9ae9b1;
        --active-indicator: #d8f4a4;

        --ink-900: #f4faf6;
        --ink-800: #e5eee8;
        --ink-700: #d0d9d3;
        --ink-600: #b0bbb5;
        --ink-500: #8fa09a;
        --ink-400: #6d7d76;
        --ink-300: #34403b;
        --ink-200: rgba(148, 163, 184, 0.18);
        --ink-100: rgba(148, 163, 184, 0.12);
        --ink-50: rgba(148, 163, 184, 0.08);

        /* Page-local template tokens. Many HTML pages define these in their
           own <style> blocks, so keep the dark-mode readable values here. */
        --white: #ffffff;
        --black: #ffffff;
        --text: var(--wb-text);
        --text-900: #ffffff;
        --text-800: #f8fafc;
        --text-700: #edf5ef;
        --text-600: #dbe7df;
        --text-500: #c9d6cf;
        --text-400: #aebdb5;
        --text-300: #94a3b8;
        --text-primary: #ffffff;
        --text-secondary: #dbe7df;
        --text-muted: #b7c5be;
        --surface-white: var(--wb-surface);
        --surface-gray-50: var(--wb-surface-soft);
        --surface-gray-100: var(--wb-surface-strong);
        --surface-gray-200: rgba(148, 163, 184, 0.18);
        --border-100: var(--wb-border);
        --border-200: var(--wb-border);
        --border-300: var(--wb-border-strong);
        --bg-page: var(--wb-page-bg);
        --bg-card: var(--wb-surface);
        --bg-white: var(--wb-surface);
        --bg-light: var(--wb-surface-soft);

        --sidebar-bg: linear-gradient(145deg, #06100c 0%, #0b1712 35%, #0f2818 100%);
        --sidebar-text: rgba(255, 255, 255, 0.96);
        --sidebar-text-muted: rgba(255, 255, 255, 0.82);
        --sidebar-text-soft: rgba(255, 255, 255, 0.58);
        --sidebar-divider: rgba(255, 255, 255, 0.09);
        --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
        --sidebar-hover-border: rgba(255, 255, 255, 0.14);
        --sidebar-hover-shadow: rgba(0, 0, 0, 0.32);
        --sidebar-active-bg: rgba(255, 255, 255, 0.12);
        --sidebar-active-border: rgba(255, 255, 255, 0.18);
        --sidebar-active-shadow: rgba(0, 0, 0, 0.36);

        --bs-body-bg: var(--wb-page-bg);
        --bs-body-color: var(--wb-text);
        --bs-border-color: var(--wb-border);
        --bs-secondary-bg: var(--wb-page-bg-soft);
        --bs-tertiary-bg: var(--wb-surface-soft);
        --bs-card-bg: var(--wb-surface);
        --bs-card-border-color: var(--wb-border);
        --bs-dropdown-bg: var(--wb-surface);
        --bs-dropdown-link-color: var(--wb-text);
        --bs-dropdown-link-hover-bg: var(--wb-brand-soft);
        --bs-dropdown-link-hover-color: var(--brand-primary);
        --bs-modal-bg: var(--wb-surface);
        --bs-modal-color: var(--wb-text);
        --bs-offcanvas-bg: var(--wb-surface);
        --bs-table-bg: var(--wb-surface);
        --bs-table-color: var(--wb-text);
        --bs-table-striped-bg: rgba(148, 163, 184, 0.05);
        --bs-table-hover-bg: rgba(8, 73, 40, 0.08);
        --bs-primary: var(--brand-primary);
        --bs-primary-rgb: 8, 73, 40;
        --bs-success: var(--wb-success);
        --bs-warning: var(--wb-warning);
        --bs-danger: var(--wb-danger);
        --bs-info: var(--wb-info);
    }

    html, body {
        background: var(--wb-page-bg);
        color: var(--wb-text);
    }

    body {
        accent-color: var(--brand-primary);
    }

    a {
        color: var(--brand-primary);
    }

    a:hover {
        color: var(--brand-secondary);
    }

    html[data-theme="dark"] a {
        color: var(--brand-accent);
    }

    html[data-theme="dark"] a:hover {
        color: #eff9f2;
    }

    .text-muted,
    .text-secondary {
        color: var(--ink-500) !important;
    }

    html[data-theme="dark"] .text-primary,
    html[data-theme="dark"] .link-primary,
    html[data-theme="dark"] .btn-link {
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] .btn-outline-primary {
        color: var(--brand-accent) !important;
        border-color: rgba(8, 73, 40, 0.30) !important;
    }

    html[data-theme="dark"] .btn-outline-primary:hover,
    html[data-theme="dark"] .btn-outline-primary:focus {
        background: rgba(8, 73, 40, 0.12) !important;
        color: #eff9f2 !important;
        border-color: rgba(8, 73, 40, 0.42) !important;
    }

    .bg-white {
        background-color: var(--surface-primary) !important;
    }

    .bg-light,
    .bg-gray-50,
    .bg-gray-100,
    .bg-body-secondary,
    .bg-body-tertiary {
        background-color: var(--surface-secondary) !important;
    }

    .border,
    .border-top,
    .border-end,
    .border-bottom,
    .border-start {
        border-color: var(--wb-border) !important;
    }

    .shadow-sm {
        box-shadow: var(--shadow-sm) !important;
    }

    .shadow {
        box-shadow: var(--shadow-lg) !important;
    }

    .shadow-md {
        box-shadow: var(--shadow-md) !important;
    }

    .shadow-lg {
        box-shadow: var(--shadow-lg) !important;
    }

    .card,
    .modal-content,
    .dropdown-menu,
    .toast,
    .popover,
    .offcanvas,
    .list-group-item,
    .table-responsive,
    .table-wrap,
    .table-container,
    .data-table,
    .table-card,
    .variant-table-shell,
    .main-container,
    .login-container,
    .register-container,
    .forgot-container,
    .forgot-password-container,
    .reset-container,
    .reset-password-container,
    .verification-card,
    .dashboard-container,
    .chat-container,
    .auth-card,
    .panel-card,
    .page-card,
    .content-card,
    .form-card,
    .business-card {
        /* background-color: var(--surface-primary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
        box-shadow: var(--shadow-md); */
    }

    .card-header,
    .modal-header,
    .offcanvas-header,
    .list-group-item.active,
    .table thead th,
    .thead-dark th {
        background-color: var(--surface-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    .form-control,
    .form-select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    select {
        background-color: var(--surface-primary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    .form-control::placeholder,
    textarea::placeholder,
    input::placeholder {
        color: var(--text-muted) !important;
    }

    .input-group-text {
        background-color: var(--surface-secondary) !important;
        color: var(--text-secondary) !important;
        border-color: var(--wb-border) !important;
    }

    .btn-close {
        opacity: 0.8;
    }

    html[data-theme="dark"] .btn-close {
        filter: brightness(0) invert(1);
    }

    .table {
        color: var(--text-primary);
    }

    .table thead th {
        background: var(--surface-secondary);
        color: var(--brand-primary);
        border-color: var(--wb-border) !important;
    }

    .table tbody td,
    .table tfoot td,
    .table tfoot th {
        border-color: var(--wb-border) !important;
    }

    .table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-striped-bg: var(--surface-secondary);
    }

    .pagination .page-link {
        background-color: var(--surface-primary);
        color: var(--text-primary);
        border-color: var(--wb-border);
    }

    .pagination .page-link:hover {
        background-color: var(--surface-secondary);
        color: var(--brand-primary);
    }

    .pagination .page-item.active .page-link {
        background-color: var(--brand-primary);
        border-color: var(--brand-primary);
        color: #fff;
    }

    .alert {
        background-color: var(--surface-primary);
        color: var(--text-primary);
        border-color: var(--wb-border);
    }

    .theme-toggle-btn,
    #themeToggleBtn {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        border: 1px solid var(--wb-border);
        background: var(--surface-primary);
        color: var(--brand-primary);
        transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .theme-toggle-btn:hover,
    #themeToggleBtn:hover {
        transform: translateY(-1px) scale(1.04);
        background: var(--surface-secondary);
        box-shadow: var(--shadow-sm);
    }

    html[data-theme="dark"] .theme-toggle-btn,
    html[data-theme="dark"] #themeToggleBtn {
        background: rgba(8, 73, 40, 0.12);
        color: var(--brand-accent);
        border-color: rgba(8, 73, 40, 0.24);
    }

    html[data-theme="dark"] .theme-toggle-btn:hover,
    html[data-theme="dark"] #themeToggleBtn:hover {
        background: rgba(8, 73, 40, 0.18);
    }

    .theme-toggle-fab {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        z-index: 1050;
        box-shadow: var(--wb-shadow-lg);
        backdrop-filter: blur(14px);
    }

    @media (max-width: 576px) {
        .theme-toggle-fab {
            right: .75rem;
            bottom: .75rem;
        }
    }

    /* Base app shell */
    html[data-theme="dark"] .layout-wrapper {
        background: var(--wb-page-bg);
    }

    html[data-theme="dark"] .navbar {
        background: rgba(8, 12, 17, 0.92) !important;
        border-bottom-color: var(--wb-border) !important;
        color: var(--wb-text) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30) !important;
    }

    html[data-theme="dark"] .navbar.is-scrolled {
        border-color: rgba(148, 163, 184, 0.22) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.40) !important;
    }

    html[data-theme="dark"] .content-area {
        background: var(--wb-page-bg) !important;
        color: var(--wb-text) !important;
    }

    html[data-theme="dark"] .content-area,
    html[data-theme="dark"] .content-area :is(h1, h2, h3, h4, h5, h6, p, span, label, small, strong, b, li, dt, dd, div) {
        color: var(--text-primary);
    }

    html[data-theme="dark"] .content-area :is(.text-dark, .text-black, [class*="text-slate"], [class*="text-gray-7"], [class*="text-gray-8"], [class*="text-gray-9"]) {
        color: #ffffff !important;
    }

    html[data-theme="dark"] .content-area :is(.text-muted, .text-secondary, [class*="text-gray-4"], [class*="text-gray-5"], [class*="text-gray-6"]) {
        color: var(--text-muted) !important;
    }

    html[data-theme="dark"] .content-area :is(i, .bi, svg) {
        color: inherit;
    }

    html[data-theme="dark"] .content-area svg:not([fill="none"]) {
        fill: currentColor;
    }

    html[data-theme="dark"] .content-area svg :is(path, circle, rect, polygon, line, polyline) {
        stroke: currentColor;
    }

    html[data-theme="dark"] .content-area :is([class*="icon"], [class*="-icon"], .bi)::before {
        color: inherit;
    }

    html[data-theme="dark"] .content-area :is([style*="color: #0"], [style*="color:#0"], [style*="color: #1"], [style*="color:#1"], [style*="color: #2"], [style*="color:#2"], [style*="color: #3"], [style*="color:#3"], [style*="color: black"], [style*="color:black"]) {
        color: #ffffff !important;
    }

    html[data-theme="dark"] .content-area :is([style*="color: var(--text-900)"], [style*="color:var(--text-900)"], [style*="color: var(--text-700)"], [style*="color:var(--text-700)"]) {
        color: #ffffff !important;
    }

    html[data-theme="dark"] #sidebar.sidebar {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 6px 0 30px rgba(0, 0, 0, 0.5) !important;
    }

    html[data-theme="dark"] #toggleSidebarBtn {
        background: rgba(8, 73, 40, 0.12) !important;
        border-color: rgba(8, 73, 40, 0.22) !important;
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] #toggleSidebarBtn.is-drawer-open {
        background: linear-gradient(135deg, #084928, #0d6a39) !important;
        border-color: transparent !important;
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] #sidebarOverlay {
        background: rgba(2, 6, 23, 0.68) !important;
    }

    html[data-theme="dark"] .notification-dropdown .dropdown-menu,
    html[data-theme="dark"] .dropdown-menu.user-dropdown,
    html[data-theme="dark"] .language-dropdown-menu {
        background: var(--surface-primary) !important;
        border-color: var(--wb-border) !important;
        color: var(--text-primary) !important;
        box-shadow: var(--shadow-lg) !important;
    }

    html[data-theme="dark"] .notification-card-header {
        background: linear-gradient(135deg, rgba(8, 73, 40, 0.88), #0d6a39) !important;
        color: #eafff1 !important;
    }

    html[data-theme="dark"] .mark-all-btn {
        color: #eafff1 !important;
    }

    html[data-theme="dark"] .notification-item {
        border-bottom-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .notification-item.unseen {
        background: rgba(8, 73, 40, 0.12) !important;
    }

    html[data-theme="dark"] .notification-item:hover {
        background: rgba(8, 73, 40, 0.18) !important;
    }

    html[data-theme="dark"] .notification-item .title {
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] .notification-item .message,
    html[data-theme="dark"] .notification-item .time {
        color: var(--ink-500) !important;
    }

    html[data-theme="dark"] .language-dropdown-trigger {
        background: var(--surface-primary) !important;
        color: var(--brand-accent) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .language-dropdown-trigger.active,
    html[data-theme="dark"] .language-dropdown-trigger:hover,
    html[data-theme="dark"] .language-dropdown-trigger:focus {
        background: rgba(8, 73, 40, 0.12) !important;
        border-color: rgba(8, 73, 40, 0.24) !important;
        box-shadow: 0 0 0 2px rgba(8, 73, 40, 0.16) !important;
    }

    html[data-theme="dark"] .language-dropdown-option {
        color: var(--text-primary) !important;
    }

    html[data-theme="dark"] .language-dropdown-option:hover,
    html[data-theme="dark"] .language-dropdown-option:focus,
    html[data-theme="dark"] .language-dropdown-option.selected {
        background: rgba(8, 73, 40, 0.12) !important;
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] .content-area .table-container,
    html[data-theme="dark"] .content-area .data-table,
    html[data-theme="dark"] .content-area .table-card,
    html[data-theme="dark"] .content-area .variant-table-shell,
    html[data-theme="dark"] .wb-table-wrap {
        background: var(--surface-primary) !important;
        border-color: var(--wb-border) !important;
        box-shadow: var(--shadow-md) !important;
    }

    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) {
        color: var(--ink-700) !important;
    }

    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) thead th {
        background: var(--surface-primary) !important;
        color: var(--brand-accent) !important;
        border-bottom-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr {
        border-bottom-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr:hover {
        background: rgba(8, 73, 40, 0.08) !important;
        box-shadow: inset 3px 0 0 var(--brand-accent) !important;
    }

    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody td,
    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tfoot td,
    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) tfoot th {
        color: var(--ink-700) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .content-area table.table-striped:not([class*="fc-"]):not(.dataTable):not(.dt-table) tbody tr:nth-child(even) {
        background: var(--surface-secondary) !important;
    }

    html[data-theme="dark"] .content-area table.table-bordered:not([class*="fc-"]):not(.dataTable):not(.dt-table) td,
    html[data-theme="dark"] .content-area table.table-bordered:not([class*="fc-"]):not(.dataTable):not(.dt-table) th {
        border-right-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .content-area .pagination,
    html[data-theme="dark"] .content-area .cat-pagination,
    html[data-theme="dark"] .content-area [id*="paginat"] {
        background: transparent !important;
    }

    html[data-theme="dark"] .pagination .page-link,
    html[data-theme="dark"] .cat-pagination .page-link {
        background: var(--surface-primary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .pagination .page-link:hover,
    html[data-theme="dark"] .cat-pagination .page-link:hover {
        background: var(--surface-secondary) !important;
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] .pagination .page-item.active .page-link,
    html[data-theme="dark"] .cat-pagination .page-item.active .page-link {
        background: linear-gradient(135deg, #084928, #0d6a39) !important;
        border-color: var(--brand-primary) !important;
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] .skip-link:focus {
        background: var(--surface-primary);
        color: var(--brand-accent);
        box-shadow: var(--shadow-md);
    }

    html[data-theme="dark"] .btn-outline-secondary,
    html[data-theme="dark"] .btn-outline-light {
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .btn-light {
        background: var(--surface-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .table thead th {
        background: var(--surface-secondary) !important;
        color: var(--brand-accent) !important;
        border-color: var(--wb-border) !important;
    }

    /* Table / icon polish for custom table-heavy pages */
    html[data-theme="dark"] .settings-table,
    html[data-theme="dark"] .content-area table:not([class*="fc-"]):not(.dataTable):not(.dt-table) {
        color: var(--wb-text) !important;
    }

    html[data-theme="dark"] .settings-table thead th {
        background: rgba(255, 255, 255, 0.02) !important;
        color: #c9f5d4 !important;
        border-bottom-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .settings-table tbody tr {
        border-bottom-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .settings-table tbody tr:hover {
        background: rgba(8, 73, 40, 0.08) !important;
    }

    html[data-theme="dark"] .settings-table td {
        color: var(--wb-text-muted) !important;
    }

    html[data-theme="dark"] .settings-table :is(.template-name, .table-title, .template-title) {
        color: var(--wb-text) !important;
    }

    html[data-theme="dark"] .settings-table .template-meta {
        color: var(--wb-text-soft) !important;
    }

    html[data-theme="dark"] :is(.content-area table, .settings-table) :is([class*="action-btn"], .table-action-btn, .action-btn, .btn-icon, .icon-only) {
        background: rgba(255, 255, 255, 0.03) !important;
        color: var(--wb-text) !important;
        border-color: var(--wb-border) !important;
        box-shadow: none !important;
    }

    html[data-theme="dark"] :is(.content-area table, .settings-table) :is([class*="action-btn"], .table-action-btn, .action-btn, .btn-icon, .icon-only):hover {
        background: rgba(8, 73, 40, 0.14) !important;
        color: #eff9f2 !important;
        border-color: rgba(8, 73, 40, 0.32) !important;
    }

    html[data-theme="dark"] :is(.content-area table, .settings-table) :is([class*="action-btn"], .table-action-btn, .action-btn, .btn-icon, .icon-only) :is(i, svg) {
        color: inherit !important;
        fill: currentColor !important;
    }

    html[data-theme="dark"] .content-area .table-action-btn.edit {
        background: rgba(8, 73, 40, 0.10) !important;
        color: #c9f5d4 !important;
        border-color: rgba(8, 73, 40, 0.32) !important;
    }

    html[data-theme="dark"] .content-area .table-action-btn.edit:hover {
        background: linear-gradient(135deg, #0c6237, #084928) !important;
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] .content-area .table-action-btn.delete {
        background: rgba(239, 68, 68, 0.08) !important;
        color: #fecaca !important;
        border-color: rgba(239, 68, 68, 0.28) !important;
    }

    html[data-theme="dark"] .content-area .table-action-btn.delete:hover {
        background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
        color: #fff !important;
    }

    html[data-theme="dark"] .settings-table .action-btn.view {
        background: rgba(255, 255, 255, 0.03) !important;
        color: #c9f5d4 !important;
        border-color: rgba(8, 73, 40, 0.32) !important;
    }

    html[data-theme="dark"] .settings-table .action-btn.view:hover {
        background: rgba(8, 73, 40, 0.16) !important;
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] .settings-table .action-btn.submit {
        background: linear-gradient(135deg, #084928, #0d6a39) !important;
        color: #eff9f2 !important;
        border-color: transparent !important;
    }

    html[data-theme="dark"] .settings-table .action-btn.submit:hover:not(:disabled) {
        background: linear-gradient(135deg, #0d6a39, #084928) !important;
    }

    html[data-theme="dark"] .settings-table .action-btn.icon-only:not(.submit):not(.view) {
        background: rgba(245, 158, 11, 0.08) !important;
        color: #fdba74 !important;
        border-color: rgba(245, 158, 11, 0.28) !important;
    }

    html[data-theme="dark"] .settings-table .action-btn.icon-only:not(.submit):not(.view):hover {
        background: rgba(245, 158, 11, 0.16) !important;
        color: #fed7aa !important;
        border-color: rgba(245, 158, 11, 0.36) !important;
    }

    html[data-theme="dark"] .dx-viewport,
    html[data-theme="dark"] .dx-widget,
    html[data-theme="dark"] .dx-datagrid,
    html[data-theme="dark"] .dx-datagrid-headers,
    html[data-theme="dark"] .dx-datagrid-rowsview,
    html[data-theme="dark"] .dx-datagrid-total-footer,
    html[data-theme="dark"] .dx-toolbar,
    html[data-theme="dark"] .dx-popup-content,
    html[data-theme="dark"] .dx-overlay-content {
        background-color: var(--surface-primary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .dx-datagrid-headers,
    html[data-theme="dark"] .dx-datagrid-headers .dx-datagrid-table,
    html[data-theme="dark"] .dx-header-row > td,
    html[data-theme="dark"] .dx-row > td {
        background-color: var(--surface-primary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .dx-datagrid-rowsview .dx-row:hover > td {
        background-color: rgba(8, 73, 40, 0.08) !important;
    }

    html[data-theme="dark"] .dx-pager,
    html[data-theme="dark"] .dx-pager .dx-page,
    html[data-theme="dark"] .dx-pager .dx-pages,
    html[data-theme="dark"] .dx-datagrid-pager {
        background-color: var(--surface-primary) !important;
        color: var(--text-primary) !important;
    }

    html[data-theme="dark"] .dx-button {
        background: var(--surface-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .dx-texteditor-input,
    html[data-theme="dark"] .dx-textbox .dx-texteditor-input,
    html[data-theme="dark"] .dx-texteditor-input-container {
        background: var(--surface-primary) !important;
        color: var(--text-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .bg-gray-50,
    html[data-theme="dark"] .bg-gray-100 {
        background-color: var(--wb-page-bg) !important;
    }

    html[data-theme="dark"] .bg-black {
        background-color: #05080d !important;
    }

    html[data-theme="dark"] .text-gray-400,
    html[data-theme="dark"] .text-gray-500,
    html[data-theme="dark"] .text-gray-600 {
        color: var(--ink-500) !important;
    }

    html[data-theme="dark"] .text-gray-700,
    html[data-theme="dark"] .text-gray-800,
    html[data-theme="dark"] .text-gray-900 {
        color: var(--text-primary) !important;
    }

    html[data-theme="dark"] .border-gray-100,
    html[data-theme="dark"] .border-gray-200,
    html[data-theme="dark"] .border-gray-300 {
        border-color: var(--wb-border) !important;
    }

    /* Dark polish for the custom builder screens */
    html[data-theme="dark"] :is(.agent-layout, .product-layout, .service-layout, .bp-container),
    html[data-theme="dark"] :is(.agent-layout, .product-layout, .service-layout, .bp-container) * {
        --primary: var(--brand-primary);
        --primary-light: #0d6a39;
        --primary-dark: #06331b;
        --secondary: #0d6a39;
        --success: #34d399;
        --warning: #f59e0b;
        --error: #ef4444;
        --accent: rgba(8, 73, 40, 0.18);
        --text: var(--wb-text);
        --text-secondary: var(--wb-text-muted);
        --text-muted: var(--wb-text-soft);
        --bg-page: var(--wb-page-bg);
        --bg-card: var(--wb-surface);
        --border: var(--wb-border);
        --border-light: var(--wb-border);
        --border-dark: var(--wb-border-strong);
        --shadow: var(--wb-shadow-sm);
        --shadow-md: var(--wb-shadow-md);
        --shadow-lg: var(--wb-shadow-lg);
        --transition: var(--fast);
    }

    html[data-theme="dark"] :is(.agent-layout, .product-layout, .service-layout, .bp-container) {
        background:
            radial-gradient(circle at top left, rgba(8, 73, 40, 0.14), transparent 34%),
            radial-gradient(circle at top right, rgba(8, 73, 40, 0.08), transparent 28%),
            var(--wb-page-bg) !important;
        color: var(--wb-text) !important;
    }

    html[data-theme="dark"] :is(.agent-sidebar, .product-sidebar, .service-sidebar, .bp-sidebar, .agent-main, .product-main, .service-main, .bp-main),
    html[data-theme="dark"] :is(.helper-card, .info-card, .section-panel, .bp-card, .table-container, .config-section) {
        background: linear-gradient(180deg, rgba(16, 24, 21, 0.98) 0%, rgba(12, 18, 15, 0.98) 100%) !important;
        border-color: var(--wb-border) !important;
        color: var(--wb-text) !important;
        box-shadow: var(--wb-shadow-md) !important;
    }

    html[data-theme="dark"] .dashboard-container {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: var(--text-primary) !important;
    }

    html[data-theme="dark"] :is(.agent-sidebar-header, .product-sidebar-header, .service-sidebar-header, .bp-sidebar-header, .main-header, .bp-main-header, .section-panel-header) {
        background: linear-gradient(135deg, rgba(8, 73, 40, 0.14), rgba(16, 24, 21, 0.98)) !important;
        border-color: var(--wb-border) !important;
        color: var(--wb-text) !important;
    }

    html[data-theme="dark"] .agent-sidebar-header::before,
    html[data-theme="dark"] .product-sidebar-header::before,
    html[data-theme="dark"] .service-sidebar-header::before,
    html[data-theme="dark"] .bp-sidebar-header::before {
        background: linear-gradient(135deg, rgba(8, 73, 40, 0.16), transparent 72%) !important;
    }

    html[data-theme="dark"] :is(.agent-sidebar-title, .product-sidebar-title, .service-sidebar-title, .bp-sidebar-title, .bp-card-title, .main-title, .bp-main-title) {
        color: var(--wb-text) !important;
    }

    html[data-theme="dark"] :is(.agent-sidebar-subtitle, .product-sidebar-subtitle, .service-sidebar-subtitle, .bp-sidebar-subtitle, .mh-section-copy, .section-panel-subtitle, .field-help, .info-card-copy, .security-strength, .form-actions-copy) {
        color: var(--wb-text-muted) !important;
    }

    html[data-theme="dark"] :is(.main-step-indicator, .bp-step-indicator, .section-badge) {
        background: rgba(8, 73, 40, 0.16) !important;
        border-color: rgba(8, 73, 40, 0.24) !important;
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] :is(.step-item, .bp-step-item) {
        color: var(--wb-text-muted) !important;
    }

    html[data-theme="dark"] :is(.step-item:hover, .bp-step-item:hover) {
        background: rgba(8, 73, 40, 0.10) !important;
        color: var(--wb-text) !important;
    }

    html[data-theme="dark"] :is(.step-item.active, .bp-step-item.bp-active, .bp-step-item.active) {
        background: rgba(8, 73, 40, 0.16) !important;
        color: var(--wb-text) !important;
        border-left-color: var(--brand-primary) !important;
    }

    html[data-theme="dark"] .step-item::before,
    html[data-theme="dark"] .bp-step-item::before {
        background: var(--wb-surface-soft) !important;
        color: var(--wb-text-muted) !important;
        border: 1px solid var(--wb-border) !important;
    }

    html[data-theme="dark"] :is(.step-item i, .bp-step-item i, .helper-card i, .info-card-icon, .field-label i, .bp-form-label i, .bp-card-title i, .agent-sidebar-title i, .product-sidebar-title i, .service-sidebar-title i, .bp-sidebar-title i, .mh-icon) {
        background: rgba(8, 73, 40, 0.16) !important;
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] .section-panel-title::before {
        background: linear-gradient(135deg, var(--brand-accent), var(--brand-primary)) !important;
        box-shadow: 0 0 0 4px rgba(8, 73, 40, 0.14) !important;
    }

    html[data-theme="dark"] :is(.field-control, .bp-form-control, .bp-form-select) {
        background: var(--wb-surface) !important;
        color: var(--wb-text) !important;
        border-color: var(--wb-border) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    }

    html[data-theme="dark"] :is(.field-control::placeholder, .bp-form-control::placeholder, .bp-form-select::placeholder) {
        color: var(--wb-text-soft) !important;
    }

    html[data-theme="dark"] :is(.field-control:focus, .bp-form-control:focus, .bp-form-select:focus) {
        border-color: var(--brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.22) !important;
    }

    html[data-theme="dark"] :is(.sidebar-actions, .form-actions, .bp-nav-buttons) {
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .sidebar-actions {
        background: rgba(12, 18, 15, 0.94) !important;
    }

    html[data-theme="dark"] .sidebar-note-item {
        background: rgba(16, 24, 21, 0.92) !important;
        border-color: var(--wb-border) !important;
        color: var(--wb-text-muted) !important;
    }

    html[data-theme="dark"] .sidebar-note-item i {
        background: rgba(8, 73, 40, 0.16) !important;
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] :is(.bp-btn-secondary, .btn-secondary, .btn-ghost, .btn-outline-secondary, .btn-outline-light) {
        background: var(--wb-surface) !important;
        color: var(--wb-text) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] :is(.btn-secondary:hover, .btn-ghost:hover, .bp-btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover) {
        background: rgba(8, 73, 40, 0.10) !important;
        color: var(--brand-accent) !important;
        border-color: rgba(8, 73, 40, 0.22) !important;
    }

    html[data-theme="dark"] :is(.btn-save-main, .btn-primary, .btn-mh-save, .bp-btn-primary) {
        background: linear-gradient(135deg, #084928, #0d6a39) !important;
        color: #eff9f2 !important;
        border-color: transparent !important;
        box-shadow: 0 18px 34px -26px rgba(8, 73, 40, 0.78) !important;
    }

    html[data-theme="dark"] :is(.btn-save-main:hover, .btn-primary:hover, .btn-mh-save:hover, .bp-btn-primary:hover) {
        background: linear-gradient(135deg, #0d6a39, #084928) !important;
        color: #eff9f2 !important;
        box-shadow: 0 22px 38px -26px rgba(8, 73, 40, 0.88) !important;
    }

    html[data-theme="dark"] :is(.btn[disabled], .btn-save-main[disabled], .btn-mh-save[disabled]) {
        opacity: .62 !important;
    }

    html[data-theme="dark"] .agent-toast.success {
        background: linear-gradient(135deg, #084928, #0d6a39) !important;
    }

    html[data-theme="dark"] .bp-step-item.bp-completed::before {
        background: #0d6a39 !important;
        color: #eff9f2 !important;
        border-color: transparent !important;
    }

    html[data-theme="dark"] :is(.table-container, .table-wrap, .table-card, .variant-table-shell, .data-table, .table-responsive) {
        background: var(--wb-surface) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] :is(.skeleton, .ci-skeleton) {
        background: linear-gradient(90deg, rgba(148, 163, 184, 0.07) 25%, rgba(148, 163, 184, 0.16) 50%, rgba(148, 163, 184, 0.07) 75%) !important;
        background-size: 200% 100% !important;
        box-shadow: none !important;
    }

    html[data-theme="dark"] .skeleton-row,
    html[data-theme="dark"] .week-card-skeleton,
    html[data-theme="dark"] .empty-row,
    html[data-theme="dark"] .table-empty-state-row {
        background: transparent !important;
    }

    html[data-theme="dark"] .week-card-skeleton {
        border-color: var(--wb-border) !important;
        box-shadow: var(--wb-shadow-md) !important;
    }

    html[data-theme="dark"] .week-card-skeleton .week-card-header {
        background: transparent !important;
    }

    html[data-theme="dark"] :is(.empty-state, .table-empty-state-content) {
        color: var(--wb-text-muted) !important;
    }

    html[data-theme="dark"] :is(.empty-state i, .table-empty-state-icon) {
        color: var(--brand-accent) !important;
    }

    html[data-theme="dark"] :is(.table-empty-state-cell, .empty-row td) {
        background: transparent !important;
        color: var(--wb-text-muted) !important;
    }

    html[data-theme="dark"] :is(.placeholder, .placeholder-glow .placeholder) {
        background-color: rgba(148, 163, 184, 0.14) !important;
        opacity: 1 !important;
    }

    /* ════════════════════════════════════════════════════════════════
       DARK MODE READABILITY POLISH — applies to ALL pages
       Forces dark text/icons that pages hard-code in their own styles
       to render light in dark mode. Last-rule-wins via specificity.
       ════════════════════════════════════════════════════════════════ */

    /* 1. Bridge any page-local dark ink/text tokens to light values. */
    html[data-theme="dark"] {
        --ink-900: #f4faf6 !important;
        --ink-800: #e5eee8 !important;
        --ink-700: #d0d9d3 !important;
        --ink-600: #b0bbb5 !important;
        --ink-500: #94a3b8 !important;
        --text-900: #ffffff !important;
        --text-800: #f4faf6 !important;
        --text-700: #e5eee8 !important;
        --text-600: #d0d9d3 !important;
        --text-500: #b0bbb5 !important;
        --text-primary: #ffffff !important;
        --text-secondary: #d0d9d3 !important;
        --text-muted: #94a3b8 !important;
        --gray-900: #f4faf6 !important;
        --gray-800: #e5eee8 !important;
        --gray-700: #d0d9d3 !important;
        --gray-600: #b0bbb5 !important;
        --neutral-900: #f4faf6 !important;
        --neutral-800: #e5eee8 !important;
        --neutral-700: #d0d9d3 !important;
        --primary-text: #ffffff !important;
        --heading-color: #ffffff !important;
        --body-color: #d0d9d3 !important;
    }

    /* 2. Base text inside every page body should be readable. */
    html[data-theme="dark"] body {
        color: var(--text-primary, #ffffff);
    }

    /* 3. Force all icons (Bootstrap Icons / SVG / generic icon classes) to inherit a light color
          from their parent, instead of inheriting a hard-coded dark token. */
    html[data-theme="dark"] :is(i, .bi, .icon, [class*=" icon-"], [class^="icon-"], [class*="-icon"], [class*="bi-"]) {
        color: inherit;
    }

    html[data-theme="dark"] :is(i.text-dark, i.text-black, .bi.text-dark, .bi.text-black) {
        color: #ffffff !important;
    }

    /* Removed unsafe svg-catchall; component colors now use theme tokens. */

    /* 4. Hard-coded dark color values used inline or in page styles → force white. */

    /* Removed unsafe inline-color-catchall; component colors now use theme tokens. */

    /* 5. Common semantic class names used across pages for titles/labels/values/meta. */

    /* Removed unsafe semantic-name-catchall; component colors now use theme tokens. */

    html[data-theme="dark"] :is(
        [class*="subtitle"], [class*="Subtitle"],
        [class*="muted"], [class*="meta"],
        [class*="helper"], [class*="hint"],
        [class*="description"], [class*="caption"],
        [class*="small-text"], [class*="text-small"]
    ):not(.btn):not(.badge) {
        color: var(--text-muted, #b7c5be) !important;
    }

    /* 6. Sidebar / drawer / off-canvas should always read light over the dark gradient bg. */
    html[data-theme="dark"] :is(#sidebar, .sidebar, .offcanvas-body) :is(
        a, .nav-link, .menu-label, .sidebar-header, h1, h2, h3, h4, h5, h6, span, p, i, .bi, svg
    ) {
        color: var(--sidebar-text, #ffffff) !important;
    }

    html[data-theme="dark"] :is(#sidebar, .sidebar) .menu-label {
        color: var(--sidebar-text-soft, rgba(255, 255, 255, 0.58)) !important;
    }

    /* 7. Top navbar — text/icons should be readable against the dark navbar. */
    html[data-theme="dark"] .navbar :is(a, span, p, label, .nav-link, i, .bi, svg, .navbar-text, .navbar-brand) {
        color: var(--text-primary, #ffffff) !important;
    }

    html[data-theme="dark"] .navbar .nav-link.text-muted,
    html[data-theme="dark"] .navbar .text-muted {
        color: var(--text-muted, #b7c5be) !important;
    }

    /* 8. Bootstrap utility text colors that map to dark inks. */
    html[data-theme="dark"] :is(
        .text-body, .text-dark, .text-black,
        .text-gray-700, .text-gray-800, .text-gray-900,
        .text-slate-700, .text-slate-800, .text-slate-900,
        .text-ink-700, .text-ink-800, .text-ink-900
    ) {
        color: #ffffff !important;
    }

    html[data-theme="dark"] :is(.text-body-secondary, .text-body-tertiary) {
        color: var(--text-muted, #b7c5be) !important;
    }

    /* 9. Cards / panels / list groups → ensure inherited text is light. */
    html[data-theme="dark"] :is(.card, .card-body, .card-header, .card-footer, .panel, .list-group-item, .modal-content, .modal-body, .modal-header, .modal-footer, .offcanvas-body, .toast, .popover, .accordion-item, .accordion-body, .accordion-button) {
        color: var(--text-primary, #ffffff);
    }

    html[data-theme="dark"] .accordion-button {
        background-color: var(--surface-primary) !important;
        color: var(--text-primary, #ffffff) !important;
    }

    html[data-theme="dark"] .accordion-button:not(.collapsed) {
        background-color: var(--surface-secondary) !important;
        color: var(--brand-accent, #c9f5d4) !important;
    }

    /* 10. Form labels, fieldset legends, helper text. */
    html[data-theme="dark"] :is(label, .form-label, .col-form-label, legend, fieldset > legend) {
        color: var(--text-primary, #ffffff) !important;
    }

    html[data-theme="dark"] :is(.form-text, .help-text, .input-helper, .form-helper) {
        color: var(--text-muted, #b7c5be) !important;
    }

    /* 11. Tabs / pills / nav variants. */
    html[data-theme="dark"] :is(.nav-tabs, .nav-pills) .nav-link {
        color: var(--text-secondary, #d0d9d3) !important;
    }

    html[data-theme="dark"] :is(.nav-tabs, .nav-pills) .nav-link.active {
        color: var(--brand-accent, #c9f5d4) !important;
        background-color: rgba(8, 73, 40, 0.18) !important;
        border-color: var(--wb-border) !important;
    }

    /* 12. Badges with light backgrounds — flip text to dark for legibility. */
    html[data-theme="dark"] :is(.badge.bg-light, .badge.bg-white, .badge-light) {
        background-color: var(--surface-secondary) !important;
        color: var(--text-primary, #ffffff) !important;
        border: 1px solid var(--wb-border);
    }

    /* 13. Breadcrumbs. */
    html[data-theme="dark"] .breadcrumb,
    html[data-theme="dark"] .breadcrumb-item,
    html[data-theme="dark"] .breadcrumb-item a {
        color: var(--text-secondary, #d0d9d3) !important;
    }

    html[data-theme="dark"] .breadcrumb-item.active {
        color: var(--text-primary, #ffffff) !important;
    }

    /* 14. Dropdown menu items. */
    html[data-theme="dark"] .dropdown-menu {
        background-color: var(--surface-primary) !important;
        border-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .dropdown-item {
        color: var(--text-primary, #ffffff) !important;
    }

    html[data-theme="dark"] .dropdown-item:hover,
    html[data-theme="dark"] .dropdown-item:focus {
        background-color: rgba(8, 73, 40, 0.18) !important;
        color: var(--brand-accent, #c9f5d4) !important;
    }

    html[data-theme="dark"] .dropdown-divider {
        border-color: var(--wb-border) !important;
    }

    /* 15. Tooltips & popovers. */
    html[data-theme="dark"] .tooltip-inner {
        background-color: #0b1712 !important;
        color: #ffffff !important;
    }

    html[data-theme="dark"] .popover {
        background-color: var(--surface-primary) !important;
        border-color: var(--wb-border) !important;
        color: var(--text-primary, #ffffff) !important;
    }

    html[data-theme="dark"] .popover-header,
    html[data-theme="dark"] .popover-body {
        background-color: transparent !important;
        color: var(--text-primary, #ffffff) !important;
        border-color: var(--wb-border) !important;
    }

    /* 16. User dropdown shown via portal in base.html. */
    html[data-theme="dark"] .dropdown-menu.user-dropdown {
        background: var(--surface-primary) !important;
        color: var(--text-primary, #ffffff) !important;
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--wb-border) !important;
    }

    html[data-theme="dark"] .dropdown-menu.user-dropdown .user-dropdown-item {
        border-bottom-color: var(--wb-border) !important;
    }

    html[data-theme="dark"] .dropdown-menu.user-dropdown .user-dropdown-item:hover {
        background: rgba(8, 73, 40, 0.16) !important;
    }

    html[data-theme="dark"] .dropdown-menu.user-dropdown .user-dropdown-label {
        color: var(--brand-accent, #c9f5d4) !important;
    }

    html[data-theme="dark"] .dropdown-menu.user-dropdown .user-value {
        color: var(--text-primary, #ffffff) !important;
    }

    html[data-theme="dark"] .dropdown-menu.user-dropdown .user-dropdown-footer {
        background: var(--surface-secondary) !important;
    }

    /* 17. Top-bar action icons (notification bell etc) in dark mode. */
    html[data-theme="dark"] :is(.notification-dropdown .btn, .notification-dropdown .btn i) {
        color: var(--brand-accent, #c9f5d4) !important;
    }

    html[data-theme="dark"] :is(.navbar .btn-link, .navbar .btn-light, .navbar .icon-btn) {
        color: var(--text-primary, #ffffff) !important;
    }

    /* 18. Generic action / icon buttons (Edit / Delete / View etc) outside tables. */
    html[data-theme="dark"] :is(.icon-btn, .btn-icon, .action-icon, .action-btn) {
        color: var(--text-primary, #ffffff);
    }

    html[data-theme="dark"] :is(.icon-btn, .btn-icon, .action-icon, .action-btn) :is(i, .bi, svg) {
        color: inherit !important;
        fill: currentColor !important;
    }

    /* 19. Empty-state / placeholder icons should not look like dark blobs. */
    html[data-theme="dark"] :is(.empty-state-icon, .no-data-icon, .placeholder-icon) {
        color: var(--brand-accent, #c9f5d4) !important;
        opacity: 0.9;
    }

    /* 20. Catch-all safety net: any element using an unmapped ink/slate var should still be readable.
           Only applies where the page literally references the variable in inline style. */
    html[data-theme="dark"] [style*="var(--ink-700)"],
    html[data-theme="dark"] [style*="var(--ink-800)"],
    html[data-theme="dark"] [style*="var(--ink-900)"],
    html[data-theme="dark"] [style*="var(--text-700)"],
    html[data-theme="dark"] [style*="var(--text-800)"],
    html[data-theme="dark"] [style*="var(--text-900)"] {
        color: #ffffff !important;
    }

    /* Shared scrollbar system for every application template. */
    :root {
        --wb-scrollbar-size: 10px;
        --wb-scrollbar-track: var(--surface-gray-100, #eef2f4);
        --wb-scrollbar-thumb: var(--brand-primary, var(--primary-green, #02542d));
        --wb-scrollbar-thumb-hover: var(--brand-secondary, var(--primary-green-dark, #01402a));
        --wb-scrollbar-border: var(--surface-primary, var(--surface-white, #ffffff));
    }

    html[data-theme="dark"] {
        --wb-scrollbar-track: var(--surface-gray-100, #17231d);
        --wb-scrollbar-thumb: var(--brand-accent, #42b883);
        --wb-scrollbar-thumb-hover: #68d39b;
        --wb-scrollbar-border: var(--surface-primary, #101815);
    }

    :where(
        html,
        body,
        .content-area,
        #sidebar,
        .modal-body,
        .dropdown-menu,
        .table-scroll-wrapper,
        .table-wrapper,
        .activity-feed,
        .product-main,
        .service-main,
        .agent-main,
        .bp-main,
        [class*="scroll-wrapper"],
        [class*="-scroll"],
        [class*="-list"]
    ) {
        scrollbar-width: thin !important;
        scrollbar-color: var(--wb-scrollbar-thumb) var(--wb-scrollbar-track) !important;
    }

    :where(
        .content-area,
        #sidebar,
        .modal-body,
        .dropdown-menu,
        .table-scroll-wrapper,
        .table-wrapper,
        .activity-feed,
        .product-main,
        .service-main,
        .agent-main,
        .bp-main,
        [class*="scroll-wrapper"],
        [class*="-scroll"],
        [class*="-list"]
    )::-webkit-scrollbar,
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: var(--wb-scrollbar-size) !important;
        height: var(--wb-scrollbar-size) !important;
    }

    :where(
        .content-area,
        #sidebar,
        .modal-body,
        .dropdown-menu,
        .table-scroll-wrapper,
        .table-wrapper,
        .activity-feed,
        .product-main,
        .service-main,
        .agent-main,
        .bp-main,
        [class*="scroll-wrapper"],
        [class*="-scroll"],
        [class*="-list"]
    )::-webkit-scrollbar-track,
    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: var(--wb-scrollbar-track) !important;
        border-radius: 999px !important;
    }

    :where(
        .content-area,
        #sidebar,
        .modal-body,
        .dropdown-menu,
        .table-scroll-wrapper,
        .table-wrapper,
        .activity-feed,
        .product-main,
        .service-main,
        .agent-main,
        .bp-main,
        [class*="scroll-wrapper"],
        [class*="-scroll"],
        [class*="-list"]
    )::-webkit-scrollbar-thumb,
    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        min-width: 36px;
        min-height: 36px;
        background: var(--wb-scrollbar-thumb) !important;
        border: 2px solid var(--wb-scrollbar-border) !important;
        border-radius: 999px !important;
    }

    :where(
        .content-area,
        #sidebar,
        .modal-body,
        .dropdown-menu,
        .table-scroll-wrapper,
        .table-wrapper,
        .activity-feed,
        .product-main,
        .service-main,
        .agent-main,
        .bp-main,
        [class*="scroll-wrapper"],
        [class*="-scroll"],
        [class*="-list"]
    )::-webkit-scrollbar-thumb:hover,
    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
        background: var(--wb-scrollbar-thumb-hover) !important;
    }

    :where(
        .content-area,
        #sidebar,
        .modal-body,
        .dropdown-menu,
        .table-scroll-wrapper,
        .table-wrapper,
        .activity-feed,
        .product-main,
        .service-main,
        .agent-main,
        .bp-main,
        [class*="scroll-wrapper"],
        [class*="-scroll"],
        [class*="-list"]
    )::-webkit-scrollbar-corner,
    html::-webkit-scrollbar-corner,
    body::-webkit-scrollbar-corner {
        background: var(--wb-scrollbar-track) !important;
    }

    /* These category controls provide their own synchronized draggable thumbs. */
    .cat-drill-columns,
    .cat-drill-col-body,
    .chat-actions {
        scrollbar-width: none !important;
    }

    .cat-drill-columns::-webkit-scrollbar,
    .cat-drill-col-body::-webkit-scrollbar,
    .chat-actions::-webkit-scrollbar {
        display: none !important;
    }

    .cat-drill-scrollbar,
    .cat-drill-vscroll {
        background: var(--wb-scrollbar-track) !important;
        border-color: var(--border-200, #e2e8f0) !important;
    }

    .cat-drill-scrollbar-thumb,
    .cat-drill-vscroll-thumb {
        background: var(--wb-scrollbar-thumb) !important;
    }

    .cat-drill-scrollbar-thumb:hover,
    .cat-drill-vscroll-thumb:hover {
        background: var(--wb-scrollbar-thumb-hover) !important;
    }



/* ==========================================================
   Template: index.html (page-index)
   ========================================================== */

        body.page-index{
            font-family: Arial, sans-serif;
            background-color: #ece5dd;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column;
        }

        body.page-index .input-container{
            margin-bottom: 10px;
        }

        body.page-index input{
            padding: 6px;
            margin-right: 4px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        body.page-index button{
            padding: 6px 12px;
            background-color: #075e54;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        body.page-index .chat-container{
            width: 300px;
            height: 420px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        }

        body.page-index .chat-header{
            background-color: #075e54;
            color: white;
            padding: 8px;
            text-align: center;
            font-weight: bold;
        }

        body.page-index .chat-body{
            flex: 1;
            padding: 8px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        body.page-index .message{
            max-width: 75%;
            padding: 6px 10px;
            margin: 4px;
            border-radius: 8px;
            word-wrap: break-word;
        }

        body.page-index .user-message{
            align-self: flex-end;
            background-color: #dcf8c6;
        }

        body.page-index .bot-message{
            align-self: flex-start;
            background-color: #ece5dd;
        }

        body.page-index .chat-footer{
            display: flex;
            padding: 8px;
            background-color: white;
            border-top: 1px solid #ddd;
        }

        body.page-index .chat-history{
            width: 300px;
            background-color: white;
            margin-top: 8px;
            padding: 8px;
            border-radius: 8px;
            display: none;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            scroll-behavior: auto;
        }

        body.page-index .loading{
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 4px;
        }

        body.page-index .loading span{
            width: 6px;
            height: 6px;
            background-color: gray;
            border-radius: 50%;
            animation: index--bounce 1.5s infinite ease-in-out;
        }

        body.page-index .loading span:nth-child(1){
            animation-delay: 0s;
        }

        body.page-index .loading span:nth-child(2){
            animation-delay: 0.2s;
        }

        body.page-index .loading span:nth-child(3){
            animation-delay: 0.4s;
        }

        @keyframes index--bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }

    

/* ==========================================================
   Template: live_agent.html (page-live-agent)
   ========================================================== */

    /* ==== Dashboard UI token set (mirrors campaigns.html) ==== */
    body.page-live-agent{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;

        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);

        --primary: var(--primary-green);
        --white: #ffffff;
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* ==== Page wrapper ==== */
    body.page-live-agent .dashboard-container{
        margin: 0 auto;
        padding: .875rem .875rem 2.5rem;
        color: var(--text-700);
    }

    /* ==== Unified header card ==== */
    body.page-live-agent .la-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
    }

    body.page-live-agent .la-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
        border-radius: var(--radius-xl);
    }

    body.page-live-agent .la-header-main{
        flex: 1 1 300px;
        min-width: 240px;
        position: relative;
        z-index: 1;
    }

    body.page-live-agent .la-header-create{
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        margin-left: auto;
    }

    body.page-live-agent .page-title{
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0 0 .25rem 0;
        color: var(--primary-green);
        letter-spacing: -.01em;
    }

    body.page-live-agent .page-subtitle{
        font-size: .8rem;
        color: var(--text-500);
        font-weight: 500;
        margin: 0;
    }

    /* ==== Skeleton Loader ==== */
    body.page-live-agent .skeleton{
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: live-agent--shimmer 1.5s infinite;
        border-radius: .375rem;
        height: 1rem;
        width: 100%;
    }

    body.page-live-agent .skeleton.small{ width: 60%; }
    body.page-live-agent .skeleton.medium{ width: 80%; }

    @keyframes live-agent--shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    body.page-live-agent .skeleton-row{
        cursor: default !important;
        pointer-events: none;
    }

    body.page-live-agent .skeleton-row:hover{
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    /* ==== KPI Stat Cards ==== */
    body.page-live-agent .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 10px 0 16px;
    }

    body.page-live-agent .stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        text-decoration: none;
        color: inherit;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    body.page-live-agent .stat-card:hover{
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green);
    }

    body.page-live-agent .stat-card.active{
        background: var(--primary);
        color: var(--white);
        box-shadow: var(--shadow-md);
        border-color: var(--primary);
    }

    body.page-live-agent .stat-card.active .stat-icon{
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    body.page-live-agent .stat-card.active .stat-label{
        color: rgba(255, 255, 255, 0.8);
    }

    body.page-live-agent .stat-card.active .stat-value{
        color: var(--white);
    }

    body.page-live-agent .stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-live-agent .stat-content{
        flex: 1;
        min-width: 0;
    }

    body.page-live-agent .stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-live-agent .stat-value{
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ==== Controls bar ==== */
    body.page-live-agent .controls-section{
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        flex-shrink: 0;
        min-width: 280px;
        position: relative;
        z-index: 1;
    }

    body.page-live-agent .controls-grid{
        display: flex;
        gap: 6px;
        align-items: center;
    }

    body.page-live-agent .search-container{
        position: relative;
        flex: 1;
        min-width: 160px;
    }

    body.page-live-agent .search-icon{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .875rem;
        color: var(--text-500);
        pointer-events: none;
    }

    body.page-live-agent .search-input{
        width: 100%;
        padding: 6px 10px 6px 32px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .75rem;
        transition: var(--transition-fast);
        outline: none;
    }

    body.page-live-agent .search-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    /* ==== Buttons ==== */
    body.page-live-agent .la-header-card .btn-create{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1.5px solid var(--primary-green);
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
        white-space: nowrap;
        text-decoration: none;
        box-shadow: none;
    }

    body.page-live-agent .la-header-card .btn-create:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        box-shadow: none;
    }

    body.page-live-agent .btn{
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.4rem 0.75rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 0.7rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: var(--transition-fast);
        font-family: inherit;
    }

    body.page-live-agent .btn-primary{
        background: var(--gradient-primary);
        color: var(--white);
        box-shadow: var(--shadow-sm);
    }

    body.page-live-agent .btn-primary:hover{
        box-shadow: var(--shadow-md);
        color: var(--white);
        opacity: .88;
    }

    body.page-live-agent .btn-secondary{
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-xs);
    }

    body.page-live-agent .btn-secondary:hover{
        background: var(--primary-green-light);
        color: var(--primary-green);
        border-color: var(--primary-green);
    }

    /* ==== Custom Dropdown ==== */
    body.page-live-agent .custom-dropdown{
        position: relative;
        min-width: 140px;
        z-index: 100;
    }

    body.page-live-agent .custom-dropdown.open{
        z-index: 200;
    }

    body.page-live-agent .custom-dropdown .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 6px 10px;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        color: var(--text-700);
        font-weight: 600;
        font-size: .75rem;
        cursor: pointer;
        transition: var(--transition-fast);
        outline: none;
    }

    body.page-live-agent .custom-dropdown .dropdown-trigger:hover{
        border-color: var(--primary-green);
    }

    body.page-live-agent .custom-dropdown .dropdown-trigger:focus,
body.page-live-agent .custom-dropdown .dropdown-trigger.active{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-live-agent .custom-dropdown .dropdown-trigger .selected-text{
        flex: 1;
        text-align: left;
    }

    body.page-live-agent .custom-dropdown .dropdown-arrow{
        transition: transform .2s ease;
        color: var(--primary-green);
        font-size: 0.7rem;
    }

    body.page-live-agent .custom-dropdown .dropdown-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-live-agent .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: all .2s ease;
    }

    body.page-live-agent .custom-dropdown .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
    }

    body.page-live-agent .custom-dropdown .dropdown-option{
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: 0.5rem 0.75rem;
        color: var(--text-700);
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-live-agent .custom-dropdown .dropdown-option:hover{
        background: var(--primary-green-light);
        color: var(--primary-green);
    }

    body.page-live-agent .custom-dropdown .dropdown-option.selected{
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-weight: 600;
    }

    body.page-live-agent .dropdown-option i{
        color: var(--primary-green);
        font-size: .75rem;
    }

    /* ==== Data table shell ==== */
    body.page-live-agent .table-container{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: visible;
    }

    body.page-live-agent .custom-table thead th:first-child{ border-top-left-radius: calc(var(--radius-xl) - 1px); }
    body.page-live-agent .custom-table thead th:last-child{ border-top-right-radius: calc(var(--radius-xl) - 1px); }
    body.page-live-agent .table-footer{
        border-bottom-left-radius: calc(var(--radius-xl) - 1px);
        border-bottom-right-radius: calc(var(--radius-xl) - 1px);
    }

    body.page-live-agent .table-scroll-wrapper{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-live-agent .table-scroll-wrapper::-webkit-scrollbar{
        height: 8px;
    }

    body.page-live-agent .table-scroll-wrapper::-webkit-scrollbar-track{
        background: var(--surface-gray-100);
        border-radius: 0.375rem;
    }

    body.page-live-agent .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: var(--primary-green);
        border-radius: 0.375rem;
    }

    body.page-live-agent .custom-table{
        width: 100%;
        border-collapse: collapse;
        font-size: .875rem;
    }

    body.page-live-agent .custom-table thead th{
        background: var(--primary-green-dark);
        color: #fff;
        border: none;
        font-weight: 600;
        font-size: .72rem;
        padding: .75rem 1rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .045em;
        white-space: nowrap;
        vertical-align: middle;
        position: sticky;
        top: 0;
    }

    body.page-live-agent .custom-table thead th:hover{
        background: var(--primary-green);
    }

    body.page-live-agent .custom-table tbody tr{
        transition: background .15s ease;
        border-bottom: 1px solid var(--border-200);
    }

    body.page-live-agent .custom-table tbody tr:last-child{
        border-bottom: none;
    }

    body.page-live-agent .custom-table tbody tr:nth-child(even){
        background: var(--surface-gray-50);
    }

    body.page-live-agent .custom-table tbody tr:hover:not(.skeleton-row){
        background: var(--primary-green-light);
    }

    body.page-live-agent .custom-table tbody tr:hover:not(.skeleton-row) td:first-child{
        border-left: 3px solid var(--primary-green);
    }

    body.page-live-agent .custom-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        text-align: left;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-live-agent .custom-table td:first-child{
        border-left: 3px solid transparent;
        transition: border-color .15s ease;
    }

    body.page-live-agent .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
    }

    body.page-live-agent .pagination{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-live-agent .pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-live-agent .pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-live-agent .pagination-btn.active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-live-agent .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
    }

    /* ==== Customer Info Styles ==== */
    body.page-live-agent .customer-info{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 200px;
    }

    body.page-live-agent .customer-avatar{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: var(--gradient-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        flex-shrink: 0;
        font-size: 0.875rem;
    }

    body.page-live-agent .customer-details{
        flex: 1;
        text-align: left;
        min-width: 150px;
    }

    body.page-live-agent .customer-name{
        font-weight: 600;
        color: var(--primary-green);
        margin-bottom: 0.125rem;
        font-size: 0.875rem;
        white-space: normal;
        line-height: 1.2;
    }

    body.page-live-agent .customer-contact{
        font-size: 0.75rem;
        color: var(--text-500);
        white-space: normal;
        line-height: 1.2;
    }

    /* ==== Status Badges ==== */
    body.page-live-agent .status-badge{
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: 4px 10px;
        border-radius: var(--radius-sm);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    body.page-live-agent .status-assigned{
        background: var(--primary-green-light);
        color: var(--primary-green);
    }

    body.page-live-agent .status-auto{
        background: rgba(16, 185, 129, 0.15);
        color: #059669;
    }

    body.page-live-agent .status-manual{
        background: var(--surface-gray-100);
        color: var(--text-500);
    }

    body.page-live-agent .status-active{
        background: rgba(34, 197, 94, 0.15);
        color: #16a34a;
    }

    body.page-live-agent .status-offline{
        background: var(--surface-gray-100);
        color: var(--text-500);
    }

    /* ==== Agent Dropdown ==== */
    body.page-live-agent .agent-dropdown{
        position: relative;
        display: block;
        width: 100%;
        max-width: 210px;
    }

    body.page-live-agent .agent-trigger{
        display: flex;
        align-items: center;
        gap: .45rem;
        padding: 6px 10px;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
        font-size: .8125rem;
        font-weight: 500;
        color: var(--text-700);
        height: 36px;
        width: 100%;
        outline: none;
        user-select: none;
        -webkit-user-select: none;
        box-sizing: border-box;
    }

    body.page-live-agent .agent-trigger:hover{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
    }

    body.page-live-agent .agent-trigger.active{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-live-agent .agent-trigger .agent-avatar{
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .6rem;
        font-weight: 700;
        flex-shrink: 0;
        line-height: 1;
    }

    body.page-live-agent .agent-trigger .agent-name{
        flex: 1;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .8rem;
        color: var(--text-700);
        pointer-events: none;
    }

    body.page-live-agent .agent-trigger .dropdown-arrow{
        flex-shrink: 0;
        font-size: .65rem;
        color: var(--text-500);
        transition: transform .2s ease;
        pointer-events: none;
    }

    body.page-live-agent .agent-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
        color: var(--primary-green);
    }

    body.page-live-agent .agent-dropdown.disabled .agent-trigger{
        background: var(--surface-gray-50);
        color: var(--text-500);
        cursor: default;
        border-color: var(--border-200);
    }

    body.page-live-agent .agent-dropdown.disabled .agent-trigger:hover{
        border-color: var(--border-200);
        box-shadow: none;
        background: var(--surface-gray-50);
    }

    body.page-live-agent .agent-dropdown.disabled .agent-avatar{
        background: var(--surface-gray-200);
    }

    body.page-live-agent .agent-menu{
        position: fixed;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 24px -4px rgba(0,0,0,.12), 0 4px 8px -2px rgba(0,0,0,.07);
        min-width: 220px;
        max-height: 260px;
        overflow-y: auto;
        z-index: 99999;
        display: none;
    }

    body.page-live-agent .agent-menu.show{
        display: block;
        animation: live-agent--agentMenuIn .15s ease;
    }

    @keyframes live-agent--agentMenuIn {
        from { opacity: 0; transform: translateY(-6px) scale(.98); }
        to   { opacity: 1; transform: translateY(0)   scale(1); }
    }

    body.page-live-agent .agent-menu::-webkit-scrollbar{ width: 4px; }
    body.page-live-agent .agent-menu::-webkit-scrollbar-track{ background: transparent; }
    body.page-live-agent .agent-menu::-webkit-scrollbar-thumb{ background: var(--border-200); border-radius: 4px; }

    body.page-live-agent .agent-menu-header{
        padding: 8px 12px 4px;
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-500);
    }

    body.page-live-agent .agent-menu-divider{
        height: 1px;
        background: var(--border-200);
        margin: 4px 0;
    }

    body.page-live-agent .agent-item{
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: 8px 12px;
        cursor: pointer;
        transition: background .12s ease;
        user-select: none;
    }

    body.page-live-agent .agent-item:hover{
        background: var(--primary-green-light);
    }

    body.page-live-agent .agent-item.selected{
        background: var(--primary-green-light);
    }

    body.page-live-agent .agent-item.selected .agent-item-name{
        color: var(--primary-green);
    }

    body.page-live-agent .agent-item .agent-avatar{
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .65rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    body.page-live-agent .agent-item .agent-details{
        flex: 1;
        min-width: 0;
    }

    body.page-live-agent .agent-item .agent-item-name{
        font-weight: 600;
        font-size: .8rem;
        color: var(--text-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.page-live-agent .agent-item .agent-username{
        font-size: .7rem;
        color: var(--text-500);
    }

    body.page-live-agent .agent-item .check-icon{
        color: var(--primary-green);
        font-size: .75rem;
        opacity: 0;
        flex-shrink: 0;
    }

    body.page-live-agent .agent-item.selected .check-icon{
        opacity: 1;
    }

    body.page-live-agent .agent-item.unassigned .agent-avatar{
        background: var(--surface-gray-100);
        color: var(--text-500);
    }

    /* ==== Toggle Switch ==== */
    body.page-live-agent .toggle-switch{
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        cursor: pointer;
    }

    body.page-live-agent .toggle-switch input{
        opacity: 0;
        width: 0;
        height: 0;
    }

    body.page-live-agent .toggle-slider{
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--surface-gray-200);
        transition: var(--transition-fast);
        border-radius: 24px;
    }

    body.page-live-agent .toggle-slider:before{
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: var(--transition-fast);
        border-radius: 50%;
        box-shadow: var(--shadow-sm);
    }

    body.page-live-agent .toggle-switch:hover .toggle-slider{
        background-color: var(--surface-gray-100);
    }

    body.page-live-agent .toggle-switch input:checked + .toggle-slider{
        background: var(--primary-green);
    }

    body.page-live-agent .toggle-switch:hover input:checked + .toggle-slider{
        background: var(--primary-green-dark);
    }

    body.page-live-agent .toggle-switch input:checked + .toggle-slider:before{
        transform: translateX(20px);
    }

    /* ==== Empty state ==== */
    body.page-live-agent .empty-state{
        text-align: center;
        padding: 48px 16px;
        color: var(--text-500);
    }

    body.page-live-agent .empty-state i{
        font-size: 3rem;
        color: var(--primary-green);
        margin-bottom: 16px;
        display: block;
    }

    body.page-live-agent .empty-state h3{
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-700);
        margin-bottom: 8px;
    }

    body.page-live-agent .empty-state p{
        color: var(--text-500);
        margin: 0;
    }

    /* ==== Toast ==== */
    body.page-live-agent .toast-notification{
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 9999;
        min-width: 250px;
        max-width: 350px;
        padding: .875rem 1rem;
        border-radius: var(--radius-md);
        font-size: .8125rem;
        font-weight: 600;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        transform: translateX(1rem);
        transition: all .3s ease;
        pointer-events: none;
    }

    body.page-live-agent .toast-notification.show{
        opacity: 1;
        transform: translateX(0);
    }

    body.page-live-agent .toast-notification.success{
        background: var(--primary-green);
        color: white;
    }

    body.page-live-agent .toast-notification.error{
        background: var(--error);
        color: white;
    }

    body.page-live-agent .toast-notification.info{
        background: var(--primary-green);
        color: white;
    }

    /* ==== Loading Overlay ==== */
    body.page-live-agent .loading-overlay{
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, .85);
        backdrop-filter: blur(4px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2000;
    }

    body.page-live-agent .loading-overlay.show{
        display: flex;
    }

    body.page-live-agent .spinner{
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-200);
        border-top-color: var(--primary-green);
        border-radius: 50%;
        animation: live-agent--spin 1s linear infinite;
    }

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

    /* ==== Mobile responsive ==== */
    @media (max-width: 768px) {
        body.page-live-agent .dashboard-container{ padding: 0.75rem; }
        body.page-live-agent .controls-section{ min-width: unset; width: 100%; }
        body.page-live-agent .controls-grid{ flex-direction: column; gap: 12px; }
        body.page-live-agent .search-container{ min-width: unset; }
        body.page-live-agent .custom-table{ font-size: .8125rem; }
        body.page-live-agent .custom-table td,
body.page-live-agent .custom-table th{ padding: 10px 8px; }
        body.page-live-agent .customer-info{ min-width: 180px; }
        body.page-live-agent .customer-avatar{ width: 2rem; height: 2rem; font-size: 0.75rem; }
    }

    @media (max-width: 576px) {
        body.page-live-agent .dashboard-container{ padding: 0.5rem; }

        body.page-live-agent .la-header-card{
            padding: .75rem;
            gap: .75rem;
            margin-bottom: 0.75rem;
        }

        body.page-live-agent .la-header-card{
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
        }

        body.page-live-agent .la-header-main{
            min-width: 0;
            grid-column: 1;
        }

        body.page-live-agent .la-header-create{
            grid-column: 2;
            grid-row: 1;
            align-self: start;
            margin-left: 0;
        }

        body.page-live-agent .la-header-create.btn-create{
            min-height: 36px;
            padding: .5rem .75rem;
            justify-content: center;
        }

        body.page-live-agent .page-title{ font-size: 1.125rem; margin-bottom: .25rem; }
        body.page-live-agent .page-subtitle{ font-size: .7rem; }

        body.page-live-agent .controls-section{
            padding: 0;
            width: 100%;
            border-radius: 0;
            grid-column: 1 / -1;
        }

        body.page-live-agent .controls-grid{
            gap: .5rem;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        body.page-live-agent .search-container{
            flex: 1;
            min-width: 0;
        }

        body.page-live-agent .custom-dropdown{
            flex: 0 0 118px;
            min-width: 118px;
        }

        body.page-live-agent .search-input{
            font-size: .8125rem;
            padding: .5rem .5rem .5rem 2rem;
            border-radius: .5rem;
            height: 36px;
        }

        body.page-live-agent .search-icon{
            left: .5rem;
            font-size: .875rem;
        }

        body.page-live-agent .btn-create span{
            display: inline;
        }

        body.page-live-agent .stats-grid{
            margin: .5rem 0 .75rem;
            gap: .5rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: stretch;
        }

        body.page-live-agent .stat-card{
            width: 100%;
            min-width: 0;
            min-height: 94px;
            padding: .75rem .5rem;
            gap: .5rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        body.page-live-agent .stat-content{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        body.page-live-agent .stat-card .stat-label{
            font-size: .55rem;
            text-align: center;
            margin-bottom: 0;
        }

        body.page-live-agent .stat-card .stat-value{
            width: 100%;
            font-size: 1.25rem;
            font-weight: 800;
            text-align: center;
        }

        body.page-live-agent .stat-card .stat-icon{
            width: 32px;
            height: 32px;
            font-size: .95rem;
            border-radius: 8px;
        }

        body.page-live-agent .table-container{
            border-radius: .75rem;
            margin-bottom: 1rem;
        }

        body.page-live-agent .custom-table{
            font-size: .75rem;
            min-width: 800px;
        }

        body.page-live-agent .custom-table thead th{
            padding: .75rem .5rem;
            font-size: .7rem;
        }

        body.page-live-agent .custom-table td{
            padding: .75rem .5rem;
            font-size: .75rem;
        }

        body.page-live-agent .live-agent-actions{
            flex-wrap: nowrap !important;
            min-width: 72px;
        }

        body.page-live-agent .live-agent-actions .btn{
            width: 2rem;
            min-width: 2rem;
            height: 2rem;
            padding: 0;
            justify-content: center;
        }

        body.page-live-agent .table-footer{
            padding: .75rem;
            flex-direction: column;
            gap: .75rem;
            text-align: center;
        }

        body.page-live-agent .pagination{
            justify-content: center;
        }
    }

    /* ==== Dark Mode ==== */
    html[data-theme="dark"] body.page-live-agent{
        color-scheme: dark;
        --primary-green: #084928;
        --primary-green-dark: #06341c;
        --primary-green-light: rgba(8, 73, 40, 0.2);
        --primary-green-ghost: rgba(8, 73, 40, 0.12);
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;
        --surface-white: #101814;
        --surface-gray-50: #0c1210;
        --surface-gray-100: #101916;
        --surface-gray-200: #1b2721;
        --text-900: #eef6f1;
        --text-700: #cad7cf;
        --text-500: #96a59d;
        --border-200: #22322b;
        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;
        --shadow-xs: 0 1px 2px rgb(0 0 0 / .35);
        --shadow-sm: 0 1px 3px rgb(0 0 0 / .42), 0 1px 2px rgb(0 0 0 / .24);
        --shadow-md: 0 12px 28px rgb(0 0 0 / .36);
        --shadow-lg: 0 22px 44px rgb(0 0 0 / .42);
        --hover-shadow: 0 18px 34px -24px rgba(8, 73, 40, 0.78);
        --white: #101814;
    }

    html[data-theme="dark"] body.page-live-agent .dashboard-container{
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-live-agent .la-header-card,
html[data-theme="dark"] body.page-live-agent .table-container,
html[data-theme="dark"] body.page-live-agent .stat-card{
        background: linear-gradient(180deg, rgba(16, 24, 20, 0.98), rgba(12, 18, 15, 0.98));
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    }

    html[data-theme="dark"] body.page-live-agent .la-header-card::before{
        background: linear-gradient(90deg, rgba(8, 73, 40, 0.14), transparent 72%);
    }

    html[data-theme="dark"] body.page-live-agent .page-title{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .page-subtitle,
html[data-theme="dark"] body.page-live-agent .stat-label,
html[data-theme="dark"] body.page-live-agent .table-footer,
html[data-theme="dark"] body.page-live-agent .empty-state,
html[data-theme="dark"] body.page-live-agent .empty-state p,
html[data-theme="dark"] body.page-live-agent .empty-state h3{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .stat-card.active{
        background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
        color: #fff;
        border-color: rgba(8, 73, 40, 0.6);
        box-shadow: 0 18px 34px rgba(8, 73, 40, 0.22);
    }

    html[data-theme="dark"] body.page-live-agent .stat-card.active .stat-icon{
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    html[data-theme="dark"] body.page-live-agent .stat-card.active .stat-label,
html[data-theme="dark"] body.page-live-agent .stat-card.active .stat-value{
        color: #fff;
    }

    html[data-theme="dark"] body.page-live-agent .stat-value{
        color: #eef6f1;
    }

    html[data-theme="dark"] body.page-live-agent .stat-icon{
        background: rgba(8, 73, 40, 0.16);
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .search-icon,
html[data-theme="dark"] body.page-live-agent .dropdown-arrow,
html[data-theme="dark"] body.page-live-agent .empty-state i{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .search-input,
html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-trigger,
html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-menu,
html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-option{
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-700);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-live-agent .search-input::placeholder{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .search-input:focus,
html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-trigger:hover,
html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-trigger:focus,
html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-trigger.active{
        border-color: rgba(8, 73, 40, 0.5);
        box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.16);
        background: rgba(255, 255, 255, 0.045);
    }

    html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-option:hover,
html[data-theme="dark"] body.page-live-agent .custom-dropdown .dropdown-option.selected{
        background: rgba(8, 73, 40, 0.16);
        color: #eff9f2;
    }

    html[data-theme="dark"] body.page-live-agent .la-header-card .btn-create{
        background: rgba(255, 255, 255, 0.04);
        color: #c9f5d4;
        border-color: rgba(8, 73, 40, 0.5);
    }

    html[data-theme="dark"] body.page-live-agent .la-header-card .btn-create:hover{
        background: linear-gradient(135deg, #0c6237, #084928);
        color: #eff9f2;
        border-color: transparent;
    }

    html[data-theme="dark"] body.page-live-agent .custom-table thead th{
        background: rgba(13, 19, 16, 0.98);
        color: #c9f5d4;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-live-agent .custom-table thead th:hover{
        background: rgba(8, 73, 40, 0.22);
    }

    html[data-theme="dark"] body.page-live-agent .custom-table tbody tr{
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"] body.page-live-agent .custom-table tbody tr:nth-child(even){
        background: rgba(255, 255, 255, 0.03);
    }

    html[data-theme="dark"] body.page-live-agent .custom-table tbody tr:hover:not(.skeleton-row){
        background: rgba(8, 73, 40, 0.08);
        box-shadow: inset 3px 0 0 #084928;
    }

    html[data-theme="dark"] body.page-live-agent .custom-table tbody tr:hover:not(.skeleton-row) td:first-child{
        border-left-color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .custom-table td{
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-live-agent .table-footer{
        background: rgba(13, 19, 16, 0.98);
        border-top-color: rgba(255, 255, 255, 0.08);
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .table-scroll-wrapper::-webkit-scrollbar-track{
        background: rgba(255, 255, 255, 0.04);
    }

    html[data-theme="dark"] body.page-live-agent .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: rgba(8, 73, 40, 0.7);
    }

    html[data-theme="dark"] body.page-live-agent .pagination-btn{
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-700);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-live-agent .pagination-btn:hover:not(.disabled),
html[data-theme="dark"] body.page-live-agent .pagination-btn.active{
        background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
        color: #eff9f2;
        border-color: transparent;
    }

    html[data-theme="dark"] body.page-live-agent .pagination-btn.disabled{
        background: rgba(255, 255, 255, 0.02);
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .customer-name{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .customer-contact{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .status-auto{
        background: rgba(16, 185, 129, 0.18);
        color: #6ee7b7;
    }

    html[data-theme="dark"] body.page-live-agent .status-assigned{
        background: rgba(8, 73, 40, 0.22);
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .status-manual,
html[data-theme="dark"] body.page-live-agent .status-offline{
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .status-active{
        background: rgba(34, 197, 94, 0.18);
        color: #bbf7d0;
    }

    html[data-theme="dark"] body.page-live-agent .agent-trigger{
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-live-agent .agent-trigger:hover,
html[data-theme="dark"] body.page-live-agent .agent-trigger.active{
        border-color: rgba(8, 73, 40, 0.5);
        background: rgba(8, 73, 40, 0.12);
    }

    html[data-theme="dark"] body.page-live-agent .agent-trigger .agent-name{
        color: var(--text-700);
    }

    html[data-theme="dark"] body.page-live-agent .agent-trigger .dropdown-arrow{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .agent-dropdown.disabled .agent-trigger{
        background: rgba(255, 255, 255, 0.02);
        color: var(--text-500);
        border-color: rgba(255, 255, 255, 0.05);
    }

    html[data-theme="dark"] body.page-live-agent .agent-menu{
        background: #101814;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.56);
    }

    html[data-theme="dark"] body.page-live-agent .agent-menu::-webkit-scrollbar-thumb{
        background: rgba(8, 73, 40, 0.6);
    }

    html[data-theme="dark"] body.page-live-agent .agent-menu-header{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .agent-menu-divider{
        background: rgba(255, 255, 255, 0.07);
    }

    html[data-theme="dark"] body.page-live-agent .agent-item:hover,
html[data-theme="dark"] body.page-live-agent .agent-item.selected{
        background: rgba(8, 73, 40, 0.16);
    }

    html[data-theme="dark"] body.page-live-agent .agent-item .agent-item-name{
        color: var(--text-900);
    }

    html[data-theme="dark"] body.page-live-agent .agent-item.selected .agent-item-name{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .agent-item .agent-username{
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .agent-item .check-icon{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .agent-item.unassigned .agent-avatar{
        background: rgba(255, 255, 255, 0.07);
        color: var(--text-500);
    }

    html[data-theme="dark"] body.page-live-agent .toggle-slider{
        background-color: rgba(255, 255, 255, 0.12);
    }

    html[data-theme="dark"] body.page-live-agent .toggle-switch:hover .toggle-slider{
        background-color: rgba(255, 255, 255, 0.18);
    }

    html[data-theme="dark"] body.page-live-agent .toggle-switch input:checked + .toggle-slider{
        background: #0c6237;
    }

    html[data-theme="dark"] body.page-live-agent .loading-overlay{
        background: rgba(8, 14, 11, 0.88);
    }

    html[data-theme="dark"] body.page-live-agent .skeleton{
        background: linear-gradient(90deg, rgba(148, 163, 184, 0.07) 25%, rgba(148, 163, 184, 0.16) 50%, rgba(148, 163, 184, 0.07) 75%);
        background-size: 200% 100%;
    }

    html[data-theme="dark"] body.page-live-agent .empty-state i{
        color: #c9f5d4;
    }

    html[data-theme="dark"] body.page-live-agent .empty-state h3{
        color: #eef6f1;
    }
    /* ==== Desktop header: title left, search + sort + create right ==== */
@media (min-width: 769px) {
    body.page-live-agent .la-header-card{
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto auto;
        align-items: center;
        gap: 12px;
        padding: 1rem 1.25rem;
    }

    body.page-live-agent .la-header-main{
        grid-column: 1;
        min-width: 0;
    }

    /* Search + Sort comes first */
    body.page-live-agent .controls-section{
        grid-column: 2;
        grid-row: 1;
        min-width: 390px;
        width: 390px;
        align-self: center;
    }

    body.page-live-agent .controls-grid{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    body.page-live-agent .search-container{
        flex: 1 1 auto;
        min-width: 220px;
    }

    body.page-live-agent .custom-dropdown{
        flex: 0 0 160px;
        min-width: 160px;
    }

    /* Create Agent comes last */
    body.page-live-agent .la-header-create{
        grid-column: 3;
        grid-row: 1;
        margin-left: 0;
        align-self: center;
        justify-self: end;
    }

    body.page-live-agent .search-input,
body.page-live-agent .custom-dropdown .dropdown-trigger,
body.page-live-agent .la-header-card .btn-create{
        height: 38px;
    }
}


/* ==========================================================
   Template: login.html (page-login)
   ========================================================== */

        body.page-login{
            --primary-dark: #1a4b3a;
            --primary-main: #1a4b3a;
            --primary-light: #2d7a5f;
            --primary-bg: #f0f7f4;
            --accent: #1e6b4f;
            --surface: #ffffff;
            --surface-elevated: #fafbfa;
            --text-primary: #1a1a1a;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-light: #e5e7eb;
            --border-focus: #1a4b3a;
            --success: #10b981;
            --success-dark: #059669;
            --error: #ef4444;
            --error-dark: #dc2626;
            --info: #1a4b3a;
            --warning: #f59e0b;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);

            --radius-sm: 9px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
        }

        body.page-login *{
            box-sizing: border-box
        }

        body.page-login{
            font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
            background:
                radial-gradient(60rem 60rem at -10% -20%, rgba(26, 75, 58, .08), transparent 60%),
                radial-gradient(60rem 60rem at 110% 120%, rgba(30, 107, 79, .08), transparent 60%),
                linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 45%, var(--primary-bg) 100%);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(0.5rem, 2vw, 2rem);
            overflow-x: hidden;
        }

        /* Toast Container */
        body.page-login .toast-container{
            position: fixed;
            top: 16px;
            right: 16px;
            z-index: 9999;
            max-width: 380px;
        }

        body.page-login .toast-notification{
            background: white;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-xl);
            padding: 1rem 1.2rem;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
            min-width: 320px;
            border-left: 4px solid;
        }

        body.page-login .toast-notification.success{
            border-left-color: var(--success);
        }

        body.page-login .toast-notification.error{
            border-left-color: var(--error);
        }

        body.page-login .toast-notification.info{
            border-left-color: var(--info);
        }

        body.page-login .toast-notification.warning{
            border-left-color: var(--warning);
        }

        body.page-login .toast-icon{
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            font-size: 1.1rem;
        }

        body.page-login .toast-notification.success .toast-icon{
            background: rgba(16, 185, 129, .1);
            color: var(--success-dark);
        }

        body.page-login .toast-notification.error .toast-icon{
            background: rgba(239, 68, 68, .1);
            color: var(--error-dark);
        }

        body.page-login .toast-notification.info .toast-icon{
            background: rgba(26, 75, 58, .1);
            color: var(--info);
        }

        body.page-login .toast-notification.warning .toast-icon{
            background: rgba(245, 158, 11, .1);
            color: var(--warning);
        }

        body.page-login .toast-content{
            flex: 1;
            padding-top: 2px;
        }

        body.page-login .toast-title{
            font-weight: 700;
            font-size: 0.92rem;
            color: var(--text-primary);
            margin-bottom: 0.3rem;
        }

        body.page-login .toast-message{
            font-size: 0.84rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        body.page-login .toast-close{
            background: rgba(0, 0, 0, .04);
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.3rem;
            font-size: 0.95rem;
            border-radius: 6px;
            width: 26px;
            height: 26px;
            display: grid;
            place-items: center;
        }

        body.page-login .toast-close:hover{
            background: rgba(0, 0, 0, .08);
            color: var(--text-primary);
        }

        /* Main Container */
        body.page-login .main-container{
            display: grid;
            grid-template-columns: 30fr 70fr;
            width: 100%;
            max-width: 1180px;
            height: 640px;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(20px);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            border: 1px solid rgba(255, 255, 255, .8);
            overflow: hidden;
        }

        /* HERO SECTION - 30% */
        body.page-login .hero-section{
            background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary-main) 50%, var(--accent) 100%);
            color: #fff;
            padding: 2.8rem 2.2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        body.page-login .hero-section::before,
body.page-login .hero-section::after{
            content: "";
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 6s ease-in-out infinite;
            pointer-events: none;
        }

        body.page-login .hero-section::before{
            width: 160px;
            height: 160px;
            top: -40px;
            right: -40px;
            animation-delay: 0s;
        }

        body.page-login .hero-section::after{
            width: 120px;
            height: 120px;
            bottom: -24px;
            left: -24px;
            animation-delay: 3s;
        }

        body.page-login .hero-section > *{
            position: relative;
            z-index: 1;
        }

        body.page-login .hero-logo{
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .16);
            border: 2px solid rgba(255, 255, 255, .3);
            margin-bottom: 1.5rem;
        }

        body.page-login .hero-logo i{
            font-size: 1.8rem;
            color: #fff;
        }

        body.page-login .hero-title{
            font-family: "Poppins", sans-serif;
            font-size: 2.6rem;
            font-weight: 800;
            margin-bottom: 0.9rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        body.page-login .hero-subtitle{
            line-height: 1.6;
            margin-bottom: 1.3rem;
            font-size: 1rem;
            font-weight: 400;
            opacity: 0.95;
        }

        body.page-login .hero-points{
            list-style: none;
            margin: 1rem 0 0;
            padding: 0;
        }

        body.page-login .hero-points li{
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin: 0.65rem 0;
            font-size: 0.96rem;
            font-weight: 500;
            padding: 0.35rem 0;
        }

        body.page-login .hero-points li i{
            font-size: 1.05rem;
        }

        /* FORM SECTION - 70% */
        body.page-login .form-section{
            background: var(--surface);
            padding: 2.8rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        body.page-login .form-header{
            text-align: center;
            margin-bottom: 2rem;
        }

        body.page-login .form-title{
            font-family: "Poppins", sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 0.45rem;
            letter-spacing: -0.02em;
        }

        body.page-login .form-subtitle{
            color: var(--text-secondary);
            font-size: 0.94rem;
            font-weight: 500;
        }

        /* Form Fields */
        body.page-login .login-form{
            max-width: 520px;
            margin: 0 auto;
            width: 100%;
        }

        body.page-login .form-group{
            margin-bottom: 1.3rem;
        }

        body.page-login .form-label{
            display: block;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.55rem;
            font-size: 0.89rem;
            letter-spacing: -0.01em;
        }

        body.page-login .form-label i{
            color: var(--primary-main);
            margin-right: 0.5rem;
            font-size: 0.96rem;
        }

        body.page-login .form-control{
            width: 100%;
            padding: 0.92rem 1.05rem;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-md);
            font-size: 0.89rem;
            transition: all 0.2s ease;
            background: var(--surface);
            font-weight: 500;
        }

        body.page-login .form-control:hover{
            border-color: #cbd5e1;
        }

        body.page-login .form-control:focus{
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 4px rgba(26, 75, 58, .1);
            background: var(--surface-elevated);
        }

        body.page-login .form-control::placeholder{
            color: var(--text-muted);
            font-weight: 400;
        }

        /* Password Wrapper */
        body.page-login .password-wrapper{
            position: relative;
        }

        body.page-login .password-toggle{
            position: absolute;
            right: 9px;
            top: 50%;
            transform: translateY(-50%);
            border: 1.5px solid var(--border-light);
            background: white;
            border-radius: 9px;
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            cursor: pointer;
            z-index: 2;
            font-size: 1rem;
            transition: all 0.2s ease;
            color: var(--text-secondary);
        }

        body.page-login .password-toggle:hover{
            background: var(--primary-bg);
            border-color: var(--primary-main);
            color: var(--primary-main);
        }

        /* Validation */
        body.page-login .invalid-feedback{
            display: none;
            color: var(--error-dark);
            font-size: 0.8rem;
            margin-top: 0.48rem;
            padding: 0.48rem 0.68rem;
            background: rgba(239, 68, 68, .08);
            border-radius: 8px;
            border-left: 3px solid var(--error);
        }

        body.page-login .form-control.is-invalid+.invalid-feedback,
body.page-login .password-wrapper .is-invalid~.invalid-feedback{
            display: block;
        }

        body.page-login .form-control.is-invalid{
            border-color: var(--error);
            background: rgba(239, 68, 68, .03);
        }

        body.page-login .form-control.is-valid{
            border-color: var(--success);
            background: rgba(16, 185, 129, .03);
        }

        /* Form Options */
        body.page-login .form-options{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1.2rem 0 1.5rem;
            font-size: 0.85rem;
        }

        body.page-login .remember-me{
            display: flex;
            align-items: center;
            color: var(--text-secondary);
            cursor: pointer;
            user-select: none;
        }

        body.page-login .remember-me input{
            margin-right: 0.5rem;
            accent-color: var(--primary-main);
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        body.page-login .forgot-password{
            color: var(--primary-main);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease;
        }

        body.page-login .forgot-password:hover{
            color: var(--accent);
            text-decoration: underline;
        }

        /* Submit Button */
        body.page-login .btn-login{
            width: 75%;
            margin: 0 auto;
            padding: 1.02rem 1.8rem;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 1rem;
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
            color: #fff;
            box-shadow: 0 10px 25px rgba(26, 75, 58, .3);
            transition: all 0.2s ease;
            letter-spacing: 0.02em;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
        }

        body.page-login .btn-login:hover:not(:disabled){
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(26, 75, 58, .4);
        }

        body.page-login .btn-login:active{
            transform: translateY(0);
        }

        body.page-login .btn-login:disabled{
            opacity: 0.7;
            cursor: not-allowed;
        }

        body.page-login .btn-login.loading{
            color: transparent;
        }

        body.page-login .btn-login.loading:after{
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, .3);
            border-top-color: #fff;
            animation: login--spin 0.8s linear infinite;
        }

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

        /* Messages */
        body.page-login .message-box{
            min-height: 20px;
            margin-top: 1.2rem;
        }

        body.page-login .alert{
            border-radius: var(--radius-md);
            padding: 0.9rem;
            font-size: 0.85rem;
            font-weight: 500;
            border-left: 4px solid;
        }

        body.page-login .alert-success{
            background: rgba(16, 185, 129, .1);
            color: var(--success-dark);
            border-left-color: var(--success);
        }

        body.page-login .alert-danger{
            background: rgba(239, 68, 68, .1);
            color: var(--error-dark);
            border-left-color: var(--error);
        }

        body.page-login .alert-warning{
            background: rgba(245, 158, 11, .1);
            color: var(--warning);
            border-left-color: var(--warning);
        }

        body.page-login .alert-info{
            background: rgba(26, 75, 58, .1);
            color: var(--info);
            border-left-color: var(--info);
        }

        body.page-login .alert i{
            margin-right: 0.5rem;
        }

        /* Form Links */
        body.page-login .form-links{
            text-align: center;
            margin-top: 1.6rem;
            padding-top: 1.4rem;
            border-top: 2px solid var(--border-light);
            font-size: 0.92rem;
        }

        body.page-login .form-links a{
            color: var(--primary-main);
            font-weight: 700;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        body.page-login .form-links a:hover{
            color: var(--accent);
            text-decoration: underline;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            body.page-login .main-container{
                grid-template-columns: 1fr;
                height: auto;
            }

            body.page-login .hero-section{
                text-align: center;
            }

            body.page-login .hero-points{
                display: inline-block;
                text-align: left;
            }
        }

        @media (max-width: 768px) {
            body.page-login .form-section{
                padding: 2rem 1.5rem;
            }
        }

        @media (max-width: 480px) {
            body.page-login .toast-notification{
                min-width: auto;
            }
        }
    


        html[data-theme="dark"] body.page-login{
            background:
                radial-gradient(circle at top left, rgba(8, 73, 40, 0.16), transparent 28%),
                radial-gradient(circle at top right, rgba(8, 73, 40, 0.08), transparent 24%),
                linear-gradient(180deg, #07100c 0%, #090f0c 100%);
            color: #eef5ef;
        }

        html[data-theme="dark"] body.page-login .main-container{
            background: linear-gradient(180deg, rgba(12, 18, 15, .98) 0%, rgba(10, 16, 13, .98) 100%);
            border-color: rgba(255, 255, 255, .08);
            box-shadow: 0 24px 60px rgba(0, 0, 0, .48);
        }

        html[data-theme="dark"] body.page-login .hero-section{
            background: linear-gradient(145deg, #06291a 0%, #084928 50%, #0c6237 100%);
            border-right: 1px solid rgba(255, 255, 255, .06);
        }

        html[data-theme="dark"] body.page-login .hero-title,
html[data-theme="dark"] body.page-login .form-title{
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-login .hero-subtitle,
html[data-theme="dark"] body.page-login .form-subtitle,
html[data-theme="dark"] body.page-login .remember-me,
html[data-theme="dark"] body.page-login .form-links{
            color: #9eb0a6;
        }

        html[data-theme="dark"] body.page-login .hero-points li{
            color: #ebf7ef;
        }

        html[data-theme="dark"] body.page-login .form-section{
            background: linear-gradient(180deg, rgba(15, 23, 19, .98) 0%, rgba(12, 18, 15, .98) 100%);
        }

        html[data-theme="dark"] body.page-login .form-label,
html[data-theme="dark"] body.page-login .form-label i{
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-login .form-control{
            background: rgba(255, 255, 255, .04) !important;
            color: #eef5ef !important;
            border-color: rgba(255, 255, 255, .08) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
        }

        html[data-theme="dark"] body.page-login .form-control:hover{
            border-color: rgba(255, 255, 255, .14) !important;
        }

        html[data-theme="dark"] body.page-login .form-control:focus{
            background: rgba(255, 255, 255, .05) !important;
            border-color: rgba(8, 73, 40, .58) !important;
            box-shadow: 0 0 0 4px rgba(8, 73, 40, .16) !important;
        }

        html[data-theme="dark"] body.page-login .form-control::placeholder{
            color: #71837a !important;
        }

        html[data-theme="dark"] body.page-login .password-toggle{
            background: rgba(255, 255, 255, .04);
            border-color: rgba(255, 255, 255, .08);
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-login .password-toggle:hover{
            background: rgba(8, 73, 40, .14);
            border-color: rgba(8, 73, 40, .3);
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-login .btn-login{
            background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
            box-shadow: 0 14px 28px rgba(8, 73, 40, .24);
        }

        html[data-theme="dark"] body.page-login .btn-login:hover:not(:disabled){
            box-shadow: 0 18px 34px rgba(8, 73, 40, .32);
        }

        html[data-theme="dark"] body.page-login .form-options{
            color: #9eb0a6;
        }

        html[data-theme="dark"] body.page-login .remember-me input{
            accent-color: rgb(8 73 40);
        }

        html[data-theme="dark"] body.page-login .forgot-password,
html[data-theme="dark"] body.page-login .form-links a{
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-login .forgot-password:hover,
html[data-theme="dark"] body.page-login .form-links a:hover{
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-login .form-links{
            border-top-color: rgba(255, 255, 255, .08);
        }

        html[data-theme="dark"] body.page-login .message-box .alert{
            background: rgba(12, 18, 15, .96);
            color: #eef5ef;
            border-color: rgba(255, 255, 255, .08);
        }

        html[data-theme="dark"] body.page-login .alert-success{
            background: rgba(16, 185, 129, .12) !important;
            color: #c8f7dd !important;
            border-left-color: rgba(16, 185, 129, .7) !important;
        }

        html[data-theme="dark"] body.page-login .alert-danger{
            background: rgba(239, 68, 68, .12) !important;
            color: #fecaca !important;
            border-left-color: rgba(239, 68, 68, .7) !important;
        }

        html[data-theme="dark"] body.page-login .alert-warning{
            background: rgba(245, 158, 11, .12) !important;
            color: #fde68a !important;
            border-left-color: rgba(245, 158, 11, .7) !important;
        }

        html[data-theme="dark"] body.page-login .alert-info{
            background: rgba(8, 73, 40, .14) !important;
            color: #d9fbe5 !important;
            border-left-color: rgba(8, 73, 40, .7) !important;
        }

        html[data-theme="dark"] body.page-login .toast-notification{
            background: rgba(15, 23, 19, .98);
            border-left-color: rgb(8 73 40);
            box-shadow: 0 20px 45px rgba(0, 0, 0, .48);
        }

        html[data-theme="dark"] body.page-login .toast-title{
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-login .toast-close{
            background: rgba(255, 255, 255, .04);
            color: #9eb0a6;
        }

        html[data-theme="dark"] body.page-login .toast-close:hover{
            background: rgba(255, 255, 255, .08);
            color: #eff9f2;
        }

        @media (max-width: 1024px) {
            html[data-theme="dark"] body.page-login .main-container{
                background: linear-gradient(180deg, rgba(12, 18, 15, .98) 0%, rgba(10, 16, 13, .98) 100%);
            }
        }
    

/* ==========================================================
   Template: marketing_agency/register.html (page-marketing-agency-register)
   ========================================================== */

        body.page-marketing-agency-register .auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}body.page-marketing-agency-register .auth-card{width:min(720px,100%);padding:28px;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(18,63,39,.08)}body.page-marketing-agency-register .auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}body.page-marketing-agency-register .field{display:grid;gap:6px}body.page-marketing-agency-register .field-wide{grid-column:1/-1}body.page-marketing-agency-register .field label{font-size:.8rem;font-weight:700}body.page-marketing-agency-register .field input,
body.page-marketing-agency-register .field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px}body.page-marketing-agency-register .field input:focus,
body.page-marketing-agency-register .field textarea:focus{outline:3px solid rgba(2,84,45,.14);border-color:var(--brand)}body.page-marketing-agency-register .auth-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}body.page-marketing-agency-register .form-error{margin-top:14px;color:var(--danger)}@media(max-width:620px){body.page-marketing-agency-register .auth-grid{grid-template-columns:1fr}body.page-marketing-agency-register .field-wide{grid-column:auto}}
    

/* ==========================================================
   Template: messages_left.html (page-messages-left)
   ========================================================== */

    /* Dashboard-specific styles using base.html color scheme */
 

    /* Header Styles */
    body.page-messages-left .dashboard-header{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.875rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    body.page-messages-left .dashboard-header::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
    }

    body.page-messages-left .header-content{
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    body.page-messages-left .header-title{
        font-size: 1.25rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        letter-spacing: -0.01em;
        margin-bottom: 0.2rem;
    }

    body.page-messages-left .header-subtitle{
        font-size: 0.8rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin: 0;
    }

    /* Section Styles */
    body.page-messages-left .section-title{
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--brand-primary);
        margin-bottom: 0.625rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-messages-left .section-icon{
        width: 1.25rem;
        height: 1.25rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: var(--surface-primary);
        border-radius: 0.4rem;
        font-size: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* KPI Cards */
    body.page-messages-left .kpi-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 0.875rem;
        margin-bottom: 1rem;
    }

    body.page-messages-left .kpi-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.875rem;
        padding: 1rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: block;
    }

    body.page-messages-left .kpi-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-messages-left .kpi-header{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.625rem;
    }

    body.page-messages-left .kpi-icon{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.625rem;
        background: rgba(2, 84, 45, 0.15);
        color: var(--brand-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    body.page-messages-left .kpi-content{
        flex: 1;
    }

    body.page-messages-left .kpi-label{
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.8;
        margin-bottom: 0.4rem;
    }

    body.page-messages-left .kpi-value{
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 0.4rem;
        background: linear-gradient(135deg, var(--brand-primary) 0%, #10b981 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    body.page-messages-left .kpi-change{
        font-size: 0.625rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.2rem;
        color: #22c55e;
    }

    /* Data Table */
    body.page-messages-left .data-table{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.875rem;
        overflow: hidden;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }

    body.page-messages-left .table-header{
        padding: 0.875rem 1rem;
        background: var(--surface-secondary);
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-messages-left .table-header-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.2rem;
    }

    body.page-messages-left .table-title{
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--brand-primary);
        margin: 0;
    }

    body.page-messages-left .table-subtitle{
        color: var(--ink-500);
        font-size: 0.625rem;
        font-weight: 500;
        margin: 0;
    }

    body.page-messages-left .table-actions{
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-messages-left .search-container{
        position: relative;
        margin: 0.625rem 0.875rem;
    }

    body.page-messages-left .search-input{
        width: 100%;
        padding: 0.5rem 0.875rem 0.5rem 1.875rem;
        border: 1px solid var(--ink-200);
        border-radius: 0.625rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-size: 0.6875rem;
        transition: all 0.3s ease;
        outline: none;
    }

    body.page-messages-left .search-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.15);
    }

    body.page-messages-left .search-icon{
        position: absolute;
        left: 0.625rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        font-size: 12px;
    }

    body.page-messages-left .table-wrapper{
        overflow-x: auto;
    }

    body.page-messages-left table{
        width: 100%;
        border-collapse: collapse;
    }

    body.page-messages-left th,
body.page-messages-left td{
        padding: 0.5rem 0.875rem;
        text-align: left;
        border-bottom: 1px solid var(--ink-200);
        font-size: 0.6875rem;
    }

    body.page-messages-left th{
        background: rgba(2, 84, 45, 0.08);
        font-weight: 600;
        color: var(--brand-primary);
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    body.page-messages-left td{
        color: var(--ink-700);
        font-weight: 500;
    }

    body.page-messages-left tbody tr{
        transition: all 0.2s ease;
        cursor: pointer;
    }

    body.page-messages-left tbody tr:hover{
        background: rgba(2, 84, 45, 0.08);
    }

    /* Status Badges */
    body.page-messages-left .status-badge{
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.3rem 0.625rem;
        border-radius: 0.625rem;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    body.page-messages-left .status-active{
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    body.page-messages-left .status-inactive{
        background: rgba(107, 114, 128, 0.15);
        color: #6b7280;
        border: 1px solid rgba(107, 114, 128, 0.3);
    }

    body.page-messages-left .status-expired{
        background: rgba(245, 158, 11, 0.15);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    body.page-messages-left .status-promo{
        background: rgba(168, 85, 247, 0.15);
        color: #7c3aed;
        border: 1px solid rgba(168, 85, 247, 0.3);
    }

    /* Pagination */
    body.page-messages-left .pagination-section{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.875rem 1rem;
        border-top: 1px solid var(--ink-200);
        background: var(--surface-secondary);
    }

    body.page-messages-left .pagination-info{
        font-size: 0.6875rem;
        color: var(--ink-500);
        font-weight: 500;
    }

    body.page-messages-left .pagination-controls{
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-messages-left .pagination-btn{
        min-width: 1.875rem;
        text-align: center;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--ink-200);
        border-radius: 0.4rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-weight: 600;
        font-size: 0.6875rem;
        cursor: pointer;
        transition: all 0.2s ease;
        outline: none;
    }

    body.page-messages-left .pagination-btn:hover:not(.disabled){
        background: var(--brand-primary);
        color: white;
        border-color: var(--brand-primary);
        transform: translateY(-1px);
    }

    body.page-messages-left .pagination-btn.active{
        background: var(--brand-primary);
        color: white;
        border-color: var(--brand-primary);
    }

    body.page-messages-left .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
        opacity: 0.5;
    }

    /* Buttons */
    body.page-messages-left .btn{
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.4rem 0.75rem;
        border-radius: 0.4rem;
        font-weight: 600;
        font-size: 0.625rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
    }

    body.page-messages-left .btn-primary{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: var(--surface-primary);
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    }

    body.page-messages-left .btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        color: var(--surface-primary);
        text-decoration: none;
    }

    body.page-messages-left .btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1px solid var(--ink-200);
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    body.page-messages-left .btn-secondary:hover{
        background: var(--brand-primary);
        transform: translateY(-1px);
        color: white;
        text-decoration: none;
        border-color: var(--brand-primary);
    }

    /* Slide-out Detail Panel */
    body.page-messages-left .detail-panel-overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.page-messages-left .detail-panel-overlay.active{
        opacity: 1;
        visibility: visible;
    }

    body.page-messages-left .detail-panel{
        position: fixed;
        top: 0;
        right: 0;
        width: clamp(360px, 29vw, 420px);
        max-width: calc(100vw - 1rem);
        height: 100dvh;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 1rem 0 0 1rem;
        background: var(--surface-primary);
        box-shadow: -12px 0 36px rgba(0, 0, 0, 0.16);
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.page-messages-left .detail-panel.active{
        transform: translateX(0);
    }

    body.page-messages-left .detail-panel-header{
        min-height: 4.5rem;
        padding: 1rem 1.125rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }

    body.page-messages-left .detail-panel-title{
        font-size: 1.125rem;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.page-messages-left .detail-panel-close{
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        font-size: 1rem;
    }

    body.page-messages-left .detail-panel-close:hover{
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    body.page-messages-left .detail-panel-content{
        flex: 1;
        overflow-y: auto;
        padding: 1.125rem 1.25rem 1.5rem;
        scrollbar-width: thin;
        scrollbar-color: var(--brand-primary) transparent;
        overscroll-behavior: contain;
    }

    body.page-messages-left .detail-panel-content::-webkit-scrollbar{
        width: 6px;
    }

    body.page-messages-left .detail-panel-content::-webkit-scrollbar-track{
        background: transparent;
    }

    body.page-messages-left .detail-panel-content::-webkit-scrollbar-thumb{
        background: color-mix(in srgb, var(--brand-primary) 78%, transparent);
        border-radius: 999px;
    }

    body.page-messages-left .detail-section{
        margin-bottom: 1.125rem;
    }

    body.page-messages-left .detail-section-title{
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--brand-primary);
        margin-bottom: 0.45rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    body.page-messages-left .detail-row{
        display: grid;
        grid-template-columns: minmax(7.5rem, .9fr) minmax(0, 1.1fr);
        column-gap: 1rem;
        align-items: flex-start;
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-messages-left .detail-row:last-child{
        border-bottom: none;
    }

    body.page-messages-left .detail-label{
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--ink-500);
    }

    body.page-messages-left .detail-value{
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ink-700);
        text-align: right;
        overflow-wrap: anywhere;
    }

    body.page-messages-left .detail-panel-footer{
        padding: 1rem 1.25rem;
        background: var(--surface-secondary);
        border-top: 1px solid var(--ink-200);
        flex-shrink: 0;
        text-align: center;
    }

    body.page-messages-left .btn-unsubscribe-panel{
        background: transparent;
        color: var(--brand-primary);
        border: 2px solid var(--brand-primary);
        padding: 0.625rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        justify-content: center;
    }

    body.page-messages-left .btn-unsubscribe-panel:hover:not(:disabled){
        background: var(--brand-primary);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(2, 84, 45, 0.2);
    }

    body.page-messages-left .btn-unsubscribe-panel:disabled{
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Toast */
    body.page-messages-left .toast{
        position: fixed;
        top: 0.875rem;
        right: 0.875rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        color: var(--ink-700);
        padding: 0.625rem 0.875rem;
        border-radius: 0.625rem;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        z-index: 1001;
        transform: translateX(calc(100% + 0.875rem));
        transition: all 0.3s ease;
        font-weight: 600;
        font-size: 0.6875rem;
        min-width: 240px;
        max-width: 280px;
    }

    body.page-messages-left .toast.show{
        transform: translateX(0);
    }

    body.page-messages-left .toast-success{
        border-left: 4px solid #22c55e;
    }

    body.page-messages-left .toast-error{
        border-left: 4px solid #ef4444;
    }

    body.page-messages-left .dashboard-alert{
        border-radius: 0.875rem;
        padding: 0.875rem 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        box-shadow: var(--shadow-sm);
        font-size: 0.75rem;
        font-weight: 600;
    }

    body.page-messages-left .dashboard-alert.success{
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.24);
        color: #047857;
    }

    body.page-messages-left .dashboard-alert.warning{
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.24);
        color: #b45309;
    }

    body.page-messages-left .dashboard-alert.error{
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.24);
        color: #b91c1c;
    }

    body.page-messages-left .dashboard-alert.info{
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.22);
        color: #1d4ed8;
    }

    body.page-messages-left .dashboard-alert a{
        color: inherit;
        font-weight: 700;
        text-decoration: underline;
    }

    body.page-messages-left .kpi-change.status-active-copy{
        color: #22c55e;
    }

    body.page-messages-left .kpi-change.status-expired-copy{
        color: #d97706;
    }

    body.page-messages-left .kpi-change.status-inactive-copy{
        color: #6b7280;
    }

    html[data-theme="dark"] body.page-messages-left .kpi-change.status-active-copy{
        color: #86efac;
    }

    html[data-theme="dark"] body.page-messages-left .kpi-change.status-expired-copy{
        color: #fde68a;
    }

    html[data-theme="dark"] body.page-messages-left .kpi-change.status-inactive-copy{
        color: #cbd5e1;
    }

    html[data-theme="dark"] body.page-messages-left .dashboard-alert{
        background: rgba(15, 23, 19, 0.96);
        color: #eef5ef;
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] body.page-messages-left .dashboard-alert.success{
        background: rgba(16, 185, 129, 0.12);
        border-color: rgba(16, 185, 129, 0.26);
        color: #c8f7dd;
    }

    html[data-theme="dark"] body.page-messages-left .dashboard-alert.warning{
        background: rgba(245, 158, 11, 0.14);
        border-color: rgba(245, 158, 11, 0.26);
        color: #fde68a;
    }

    html[data-theme="dark"] body.page-messages-left .dashboard-alert.error{
        background: rgba(239, 68, 68, 0.14);
        border-color: rgba(239, 68, 68, 0.26);
        color: #fecaca;
    }

    html[data-theme="dark"] body.page-messages-left .dashboard-alert.info{
        background: rgba(59, 130, 246, 0.14);
        border-color: rgba(59, 130, 246, 0.26);
        color: #dbeafe;
    }

    html[data-theme="dark"] body.page-messages-left .dashboard-alert a{
        color: #eff9f2;
    }

    /* Skeleton */
    body.page-messages-left .skeleton{
        background: linear-gradient(90deg, var(--ink-200) 25%, var(--ink-100) 50%, var(--ink-200) 75%);
        background-size: 200% 100%;
        animation: messages-left--shimmer 1.5s infinite;
        border-radius: 0.4rem;
        height: 0.875rem;
    }

    @keyframes messages-left--shimmer {
        0% {
            background-position: -200px 0;
        }

        100% {
            background-position: 200px 0;
        }
    }

    /* Animations */
    body.page-messages-left .animate-slide-up{
        animation: messages-left--slideUp 0.5s ease-out forwards;
    }

    @keyframes messages-left--slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        body.page-messages-left .dashboard-container{
            padding: 0.75rem;
        }

        body.page-messages-left .header-content{
            flex-direction: column;
            gap: 0.75rem;
        }

        body.page-messages-left .header-title{
            font-size: 1.25rem;
        }

        body.page-messages-left .kpi-grid{
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }

        body.page-messages-left .table-header-row{
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        body.page-messages-left .table-actions{
            align-self: stretch;
            justify-content: flex-end;
        }

        body.page-messages-left .pagination-section{
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
        }

        body.page-messages-left th,
body.page-messages-left td{
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
        }

        body.page-messages-left .detail-panel{
            width: 100%;
            max-width: 100vw;
            border-radius: 0;
        }

        body.page-messages-left .detail-panel-header{
            min-height: 4rem;
            padding: .875rem 1rem;
        }

        body.page-messages-left .detail-panel-content{
            padding: 1rem;
        }

        body.page-messages-left .detail-row{
            grid-template-columns: minmax(7rem, .9fr) minmax(0, 1.1fr);
        }
    }


/* ==========================================================
   Template: orders/analytics.html (page-orders-analytics)
   ========================================================== */

    /* ============================================================================
   ORDER ANALYTICS - PROFESSIONAL DASHBOARD UI
   ============================================================================ */

    /* Container */
    body.page-orders-analytics .analytics-container{
        display: flex;
        gap: 1rem;
        padding: .875rem;
        min-height: calc(100vh - 50px);
        margin: 0 auto;
    }

    /* Main Content */
    body.page-orders-analytics .analytics-main{
        flex: 1;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1.25rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }

    /* Header */
    body.page-orders-analytics .analytics-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-orders-analytics .analytics-title{
        font-size: 1.5rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-orders-analytics .analytics-title i{
        color: var(--brand-primary);
        font-size: 1.3rem;
    }

    body.page-orders-analytics .analytics-actions{
        display: flex;
        gap: .75rem;
    }

    body.page-orders-analytics .analytics-btn{
        padding: .625rem 1rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        cursor: pointer;
        transition: var(--fast);
        border: 1px solid;
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        text-decoration: none;
    }

    body.page-orders-analytics .analytics-btn-primary{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-orders-analytics .analytics-btn-primary:hover{
        background: var(--brand-secondary);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        text-decoration: none;
    }

    body.page-orders-analytics .analytics-btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border-color: var(--brand-primary);
    }

    body.page-orders-analytics .analytics-btn-secondary:hover{
        background: rgba(2, 84, 45, 0.06);
        border-color: var(--brand-secondary);
        text-decoration: none;
    }

    /* Metrics Grid */
    body.page-orders-analytics .metrics-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    /* Metric Card */
    body.page-orders-analytics .metric-card{
        background: linear-gradient(135deg, var(--surface-primary), var(--surface-secondary));
        border: 1px solid var(--ink-200);
        border-radius: .75rem;
        padding: 1.25rem;
        position: relative;
        overflow: hidden;
        transition: var(--fast);
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
    }

    body.page-orders-analytics .metric-card:hover{
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        border-color: var(--brand-primary);
    }

    body.page-orders-analytics .metric-card::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    }

    body.page-orders-analytics .metric-label{
        font-size: .7rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .5rem;
    }

    body.page-orders-analytics .metric-value{
        font-size: 2rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin-bottom: .25rem;
        line-height: 1;
    }

    body.page-orders-analytics .metric-icon{
        position: absolute;
        bottom: .75rem;
        right: .75rem;
        font-size: 3rem;
        opacity: 0.08;
        color: var(--brand-primary);
    }

    /* Variant Colors */
    body.page-orders-analytics .metric-card.variant-primary{
        border-top-color: #0d6efd;
    }

    body.page-orders-analytics .metric-card.variant-primary .metric-value{
        color: #0d6efd;
    }

    body.page-orders-analytics .metric-card.variant-primary .metric-icon{
        color: #0d6efd;
    }

    body.page-orders-analytics .metric-card.variant-warning{
        border-top-color: #ffc107;
    }

    body.page-orders-analytics .metric-card.variant-warning .metric-value{
        color: #f59e0b;
    }

    body.page-orders-analytics .metric-card.variant-warning .metric-icon{
        color: #ffc107;
    }

    body.page-orders-analytics .metric-card.variant-success{
        border-top-color: #198754;
    }

    body.page-orders-analytics .metric-card.variant-success .metric-value{
        color: #198754;
    }

    body.page-orders-analytics .metric-card.variant-success .metric-icon{
        color: #198754;
    }

    body.page-orders-analytics .metric-card.variant-info{
        border-top-color: #0dcaf0;
    }

    body.page-orders-analytics .metric-card.variant-info .metric-value{
        color: #0891b2;
    }

    body.page-orders-analytics .metric-card.variant-info .metric-icon{
        color: #0dcaf0;
    }

    /* Charts Grid */
    body.page-orders-analytics .charts-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    /* Chart Card */
    body.page-orders-analytics .chart-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .75rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
        overflow: hidden;
        transition: var(--fast);
    }

    body.page-orders-analytics .chart-card:hover{
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        border-color: var(--ink-300);
    }

    body.page-orders-analytics .chart-header{
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--ink-200);
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.03), transparent);
    }

    body.page-orders-analytics .chart-title{
        font-size: .875rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-orders-analytics .chart-title i{
        color: var(--brand-primary);
        font-size: .8rem;
    }

    body.page-orders-analytics .chart-body{
        padding: 1.25rem;
    }

    body.page-orders-analytics .chart-container{
        height: 280px;
        position: relative;
    }

    /* Table Card */
    body.page-orders-analytics .table-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .75rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
        overflow: hidden;
    }

    body.page-orders-analytics .table-header{
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--ink-200);
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.03), transparent);
    }

    body.page-orders-analytics .table-title{
        font-size: .875rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-orders-analytics .table-title i{
        color: var(--brand-primary);
        font-size: .8rem;
    }

    body.page-orders-analytics .table-body{
        padding: 0;
    }

    body.page-orders-analytics .analytics-table{
        width: 100%;
        border-collapse: collapse;
    }

    body.page-orders-analytics .analytics-table thead th{
        background: var(--brand-primary) !important;
        color: #fff !important;
        padding: .625rem 1rem !important;
        text-align: left;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        border-bottom: none !important;
        position: static !important;
        white-space: nowrap;
    }

    body.page-orders-analytics .analytics-table thead th:first-child{ border-radius: .5rem 0 0 0; }
    body.page-orders-analytics .analytics-table thead th:last-child{ border-radius: 0 .5rem 0 0; }

    body.page-orders-analytics .analytics-table tbody tr{
        border-bottom: 1px solid var(--ink-100);
        transition: background var(--fast);
    }

    body.page-orders-analytics .analytics-table tbody tr:hover{
        background: rgba(2, 84, 45, 0.04);
    }

    body.page-orders-analytics .analytics-table tbody tr:last-child{
        border-bottom: none;
    }

    body.page-orders-analytics .analytics-table tbody td{
        padding: .625rem 1rem;
        font-size: .8125rem;
        color: #4b5563;
        font-weight: 400;
        vertical-align: middle;
        border: none;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    /* Orders count column — right-aligned tabular nums */
    body.page-orders-analytics .analytics-table thead th:last-child,
body.page-orders-analytics .analytics-table tbody td:last-child{
        text-align: right !important;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    body.page-orders-analytics .analytics-table td{
        padding: .875rem 1rem;
        font-size: .75rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-medium);
    }

    body.page-orders-analytics .analytics-table td:last-child{
        text-align: right;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
    }

    /* Empty State */
    body.page-orders-analytics .empty-state{
        text-align: center;
        padding: 2rem 1rem;
        color: var(--ink-500);
    }

    body.page-orders-analytics .empty-state i{
        font-size: 2.5rem;
        color: var(--ink-300);
        margin-bottom: .75rem;
    }

    body.page-orders-analytics .empty-state-text{
        font-size: .8rem;
        font-weight: var(--font-weight-medium);
        color: var(--ink-600);
    }

    /* Loading Skeleton */
    body.page-orders-analytics .skeleton{
        background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--surface-primary) 50%, var(--surface-secondary) 75%);
        background-size: 200% 100%;
        animation: orders-analytics--shimmer 1.5s infinite;
        border-radius: .5rem;
    }

    @keyframes orders-analytics--shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        body.page-orders-analytics .analytics-container{
            padding: .5rem;
        }

        body.page-orders-analytics .analytics-main{
            padding: 1rem;
        }

        body.page-orders-analytics .analytics-header{
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }

        body.page-orders-analytics .analytics-actions{
            width: 100%;
            flex-direction: column;
        }

        body.page-orders-analytics .analytics-btn{
            width: 100%;
            justify-content: center;
        }

        body.page-orders-analytics .metrics-grid{
            grid-template-columns: 1fr;
        }

        body.page-orders-analytics .charts-grid{
            grid-template-columns: 1fr;
        }

        body.page-orders-analytics .analytics-title{
            font-size: 1.25rem;
        }

        body.page-orders-analytics .metric-value{
            font-size: 1.75rem;
        }
    }

    /* Dashboard header and KPI styles (copied minimal set from dashboard.html) */
    body.page-orders-analytics .dashboard-header{ background: var(--surface-primary); border: 1px solid var(--ink-200); border-radius: .875rem; padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
    body.page-orders-analytics .header-content{ position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    body.page-orders-analytics .header-title{ font-size: 1.5rem; font-weight: var(--font-weight-extrabold); background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
    body.page-orders-analytics .header-subtitle{ font-size: 0.75rem; color: var(--ink-500); font-weight: var(--font-weight-medium); }
    body.page-orders-analytics .header-stats{ display: flex; gap: .875rem; }
    body.page-orders-analytics .header-stat{ text-align: center; padding: 0.625rem .875rem; background: rgba(2,84,45,0.08); border-radius: 0.625rem; border: 1px solid var(--ink-200); min-width: 4.25rem; }
    body.page-orders-analytics .header-stat-number{ font-size: 1.05rem; font-weight: var(--font-weight-bold); color: var(--brand-primary); display: block; line-height: 1.2; }
    body.page-orders-analytics .header-stat-label{ font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); font-weight: var(--font-weight-semibold); margin-top: 0.1rem; }

    body.page-orders-analytics .kpi-section{ margin-bottom: 1rem; }
    body.page-orders-analytics .kpi-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .875rem; margin-bottom: 1rem; }
    body.page-orders-analytics .kpi-card{ background: var(--surface-primary); border: 1px solid var(--ink-200); border-radius: .875rem; padding: 1rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); transition: var(--base); position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; display: block; min-height: 120px; }
    body.page-orders-analytics .kpi-card-primary{ background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); color: var(--surface-primary); border: none; }
    body.page-orders-analytics .kpi-header{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.625rem; position: relative; z-index: 1; }
    body.page-orders-analytics .kpi-icon{ width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: rgba(2,84,45,0.15); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
    body.page-orders-analytics .kpi-card-primary .kpi-icon{ background: rgba(255,255,255,0.2); color: var(--surface-primary); }
    body.page-orders-analytics .kpi-content{ position: relative; z-index: 1; flex: 1; }
    body.page-orders-analytics .kpi-label{ font-size: 0.65rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; margin-bottom: 0.4rem; }
    body.page-orders-analytics .kpi-value{ font-size: 1.6rem; font-weight: var(--font-weight-extrabold); line-height: 1; margin-bottom: 0.4rem; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent-vibrant) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    body.page-orders-analytics .kpi-card-primary .kpi-value{ color: var(--surface-primary); background: none; -webkit-text-fill-color: var(--surface-primary); }


/* ==========================================================
   Template: orders/dashboard.html (page-orders-dashboard)
   ========================================================== */

    /* ==== CSS Custom Properties ==== */
    body.page-orders-dashboard{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;
        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;
        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;
        --border-200: #e5e7eb;
        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;
        --info: #3b82f6;
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;
        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);
        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    }

    /* ==== Page Container ==== */
    body.page-orders-dashboard .dashboard-container{
        padding: 1rem 0 3rem;
        color: var(--text-700);
    }

    /* ==== Page Header ==== */
    body.page-orders-dashboard .page-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.875rem;
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
    }

    body.page-orders-dashboard .page-title{
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: .01em;
    }

    /* ==== Filter Toggle Button ==== */
    body.page-orders-dashboard .btn-filter-toggle{
        padding: 8px 14px;
        background: var(--gradient-primary);
        color: white;
        border: none;
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: .75rem;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: var(--shadow-sm);
    }

    body.page-orders-dashboard .btn-filter-toggle:hover{
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    body.page-orders-dashboard .btn-filter-toggle.active{
        background: var(--primary-green);
    }

    /* ==== Stat Cards ==== */
    body.page-orders-dashboard .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 10px 0 18px 0;
    }

    body.page-orders-dashboard .stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    body.page-orders-dashboard .stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green-light);
    }

    body.page-orders-dashboard .stat-card.active{
        outline: 2px solid var(--primary-green);
        outline-offset: 0;
    }

    body.page-orders-dashboard .stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-orders-dashboard .stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-orders-dashboard .stat-value{
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ==== Filters Section ==== */
    body.page-orders-dashboard .filters-section{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        padding: 16px;
        margin-bottom: 16px;
        max-height: 0;
        overflow: hidden;
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;
    }

    body.page-orders-dashboard .filters-section.show{
        max-height: 1000px;
        opacity: 1;
        visibility: visible;
    }

    body.page-orders-dashboard .filters-title{
        font-size: .875rem;
        font-weight: 700;
        color: var(--primary-green);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-dashboard .filters-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 14px;
        margin-bottom: 14px;
    }

    body.page-orders-dashboard .form-group{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    body.page-orders-dashboard .form-label{
        font-size: .875rem;
        font-weight: 600;
        color: var(--text-700);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-dashboard .form-select{
        padding: 10px 14px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .875rem;
        transition: var(--transition-fast);
    }

    body.page-orders-dashboard .form-select:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-orders-dashboard .filter-actions{
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* ==== Custom Buttons ==== */
    body.page-orders-dashboard .btn-custom{
        padding: 10px 20px;
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: .875rem;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none;
    }

    body.page-orders-dashboard .btn-custom.btn-primary{
        background: var(--gradient-primary);
        color: white;
    }

    body.page-orders-dashboard .btn-custom.btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    body.page-orders-dashboard .btn-custom.btn-secondary{
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1px solid var(--primary-green);
    }

    body.page-orders-dashboard .btn-custom.btn-secondary:hover{
        background: var(--primary-green);
        color: white;
    }

    body.page-orders-dashboard .btn-custom.btn-info{
        background: var(--info);
        color: white;
    }

    body.page-orders-dashboard .btn-custom.btn-success{
        background: var(--success);
        color: white;
    }

    body.page-orders-dashboard .btn-custom.btn-sm{
        padding: 6px 12px;
        font-size: .8125rem;
    }

    /* ==== Table Container ==== */
    body.page-orders-dashboard .table-container{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    body.page-orders-dashboard .table-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-200);
        background: var(--surface-gray-50);
        flex-wrap: wrap;
        gap: 12px;
    }

    body.page-orders-dashboard .table-title{
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--primary-green);
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }

    body.page-orders-dashboard .table-actions{
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    body.page-orders-dashboard .custom-table{
        width: 100%;
        font-size: .875rem;
        margin-bottom: 0;
    }

    body.page-orders-dashboard .custom-table thead th{
        background: var(--primary-green-dark);
        color: #fff;
        font-weight: 600;
        font-size: .72rem;
        letter-spacing: .045em;
        text-transform: uppercase;
        padding: .75rem 1rem;
        text-align: left;
        border: none;
        white-space: nowrap;
        vertical-align: middle;
    }

    body.page-orders-dashboard .custom-table tbody tr{
        transition: var(--transition-fast);
        border-bottom: 1px solid var(--border-200);
    }

    body.page-orders-dashboard .custom-table tbody tr:last-child{ border-bottom: none; }

    body.page-orders-dashboard .custom-table tbody tr:nth-child(even){
        background: var(--surface-gray-50);
    }

    body.page-orders-dashboard .custom-table tbody tr:hover{
        background: var(--primary-green-ghost);
        box-shadow: inset 3px 0 0 var(--primary-green);
    }

    body.page-orders-dashboard .custom-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        font-size: .8125rem;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    /* ==== Order ID Badge ==== */
    body.page-orders-dashboard .order-id-badge{
        color: var(--primary-green);
        font-weight: 600;
    }

    /* ==== Customer Display ==== */
    body.page-orders-dashboard .customer-cell{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-dashboard .customer-icon{
        color: var(--text-500);
        font-size: .8rem;
    }

    /* ==== Quantity Badge ==== */
    body.page-orders-dashboard .badge-qty{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .025em;
        background: var(--surface-gray-100);
        color: var(--text-700);
    }

    /* ==== Total Price Badge ==== */
    body.page-orders-dashboard .total-price{
        color: var(--success);
        font-weight: 600;
    }

    /* ==== Status Badges ==== */
    body.page-orders-dashboard .badge-status{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .025em;
    }

    body.page-orders-dashboard .badge-pending{
        background: #FEF3C7;
        color: #92400E;
    }

    body.page-orders-dashboard .badge-confirmed{
        background: var(--primary-green-light);
        color: var(--primary-green);
    }

    body.page-orders-dashboard .badge-processing{
        background: #DBEAFE;
        color: #1E40AF;
    }

    body.page-orders-dashboard .badge-shipped,
body.page-orders-dashboard .badge-delivered{
        background: #D1FAE5;
        color: #065F46;
    }

    body.page-orders-dashboard .badge-cancelled{
        background: #FEE2E2;
        color: #991B1B;
    }

    body.page-orders-dashboard .badge-info{
        background: #DBEAFE;
        color: #1E40AF;
    }

    body.page-orders-dashboard .badge-success{
        background: #D1FAE5;
        color: #065F46;
    }

    /* ==== Table Footer ==== */
    body.page-orders-dashboard .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
        flex-wrap: wrap;
        gap: 12px;
    }

    /* ==== Pagination ==== */
    body.page-orders-dashboard .pagination-custom{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-dashboard .pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-orders-dashboard .pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-orders-dashboard .pagination-btn.active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-orders-dashboard .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
    }

    /* ==== Empty State ==== */
    body.page-orders-dashboard .empty-state{
        text-align: center;
        padding: 32px;
        color: var(--text-500);
    }

    body.page-orders-dashboard .empty-state-icon{
        font-size: 32px;
        margin-bottom: 8px;
        display: block;
        color: var(--primary-green);
    }

    /* ==== Animations ==== */
    body.page-orders-dashboard .fade-in{
        animation: orders-dashboard--fadeIn .4s ease-out;
    }

    @keyframes orders-dashboard--fadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* ==== Responsive Design ==== */
    @media (max-width: 640px) {
        body.page-orders-dashboard .page-header{
            flex-direction: column;
            align-items: stretch;
        }

        body.page-orders-dashboard .btn-filter-toggle{
            width: 100%;
            justify-content: center;
        }

        body.page-orders-dashboard .filters-grid{
            grid-template-columns: 1fr;
        }

        body.page-orders-dashboard .table-header{
            flex-direction: column;
            align-items: stretch;
        }

        body.page-orders-dashboard .table-actions{
            justify-content: center;
        }

        body.page-orders-dashboard .table-container{
            border: none;
            background: transparent;
            box-shadow: none;
        }

        body.page-orders-dashboard .custom-table thead{
            display: none;
        }

        body.page-orders-dashboard .custom-table,
body.page-orders-dashboard .custom-table tbody,
body.page-orders-dashboard .custom-table tr,
body.page-orders-dashboard .custom-table td{
            display: block;
            width: 100%;
        }

        body.page-orders-dashboard .custom-table tr{
            background: #fff;
            border: 1px solid var(--border-200);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            margin-bottom: 12px;
            overflow: hidden;
        }

        body.page-orders-dashboard .custom-table td{
            border-bottom: 1px solid var(--border-200);
            position: relative;
            padding-left: 40%;
        }

        body.page-orders-dashboard .custom-table td:last-child{
            border-bottom: none;
        }

        body.page-orders-dashboard .custom-table td::before{
            content: attr(data-label);
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            font-weight: 700;
            color: var(--primary-green);
            width: 35%;
        }

        body.page-orders-dashboard .table-footer{
            border: none;
            background: transparent;
            padding: 8px 0;
            flex-direction: column;
        }

        body.page-orders-dashboard .stats-grid{
            grid-template-columns: 1fr 1fr;
            justify-items: center;
        }
    }


/* ==========================================================
   Template: orders/detail.html (page-orders-detail)
   ========================================================== */

  /* ── Token set ── */
  body.page-orders-detail{
    --primary-green: #02542D;
    --primary-green-dark: #01402A;
    --primary-green-light: #02542d15;
    --primary-green-ghost: #02542d08;
    --accent-emerald: #10b981;
    --surface-white: #ffffff;
    --surface-gray-50: #f8fafc;
    --surface-gray-100: #f1f5f9;
    --surface-gray-200: #e2e8f0;
    --text-900: #0f172a;
    --text-700: #334155;
    --text-500: #64748b;
    --border-200: #e5e7eb;
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0/.06);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
    --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem;
    --transition: all .3s cubic-bezier(.4,0,.2,1);
    --transition-fast: all .15s cubic-bezier(.4,0,.2,1);
    --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
  }

  body.page-orders-detail .od-container,
body.page-orders-detail .od-container *,
body.page-orders-detail .od-container *::before,
body.page-orders-detail .od-container *::after,
body.page-orders-detail .popup-overlay,
body.page-orders-detail .popup-overlay *,
body.page-orders-detail .popup-overlay *::before,
body.page-orders-detail .popup-overlay *::after{ box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Layout ── */
  body.page-orders-detail .od-container{ padding: .875rem .875rem 2.5rem; color: var(--text-700); }

  body.page-orders-detail .od-header{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    padding: .8rem 1.1rem;
    margin-bottom: .875rem;
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    position: relative; overflow: hidden;
  }
  body.page-orders-detail .od-header::before{
    content: ""; position: absolute; inset: 0;
    background: var(--primary-green-ghost); pointer-events: none; border-radius: var(--radius-xl);
  }
  body.page-orders-detail .od-header-left{ display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
  body.page-orders-detail .od-header-id{
    font-size: 1.35rem; font-weight: 800;
    background: var(--gradient-primary); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.01em;
  }
  body.page-orders-detail .od-header-meta{ font-size: .7rem; color: var(--text-500); font-weight: 500; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  body.page-orders-detail .od-header-meta i{ color: var(--primary-green); }
  body.page-orders-detail .od-header-right{ display: flex; align-items: center; gap: .625rem; }

  body.page-orders-detail .od-grid{
    display: grid;
    grid-template-columns: 27fr 43fr 30fr;
    gap: .875rem;
    align-items: start;
  }

  /* ── Cards ── */
  body.page-orders-detail .od-card{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: .875rem;
    transition: var(--transition-fast);
  }
  body.page-orders-detail .od-card:last-child{ margin-bottom: 0; }
  body.page-orders-detail .od-card:hover{ box-shadow: var(--shadow-md); }

  body.page-orders-detail .od-card-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--surface-gray-100);
    background: var(--primary-green-ghost);
    position: relative;
  }
  body.page-orders-detail .od-card-head::after{
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 48px; height: 2px; background: var(--primary-green);
  }
  body.page-orders-detail .od-card-title{
    display: flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 800; color: var(--primary-green);
    text-transform: uppercase; letter-spacing: .05em;
  }
  body.page-orders-detail .od-card-title-icon{
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--primary-green-light); color: var(--primary-green);
    display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0;
  }
  body.page-orders-detail .od-card-body{ padding: 1rem; }

  /* ── KV Rows (General Info) ── */
  body.page-orders-detail .od-kv{ display: flex; flex-direction: column; gap: .5rem; }
  body.page-orders-detail .od-kv-row{
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: .5rem .625rem;
    border-radius: var(--radius-md);
    background: var(--surface-gray-50);
    border: 1px solid var(--border-200);
    gap: .5rem;
    transition: var(--transition-fast);
  }
  body.page-orders-detail .od-kv-row:hover{ background: var(--primary-green-ghost); border-color: var(--primary-green-light); }
  body.page-orders-detail .od-kv-key{ font-size: .62rem; font-weight: 700; color: var(--text-500); text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; padding-top: 1px; }
  body.page-orders-detail .od-kv-val{ font-size: .78rem; font-weight: 600; color: var(--text-900); text-align: right; line-height: 1.4; }
  body.page-orders-detail .od-kv-val.green{ color: var(--primary-green); }
  body.page-orders-detail .od-kv-val.mono{ font-family: "SF Mono","Monaco","Cascadia Code",monospace; color: var(--success); }

  /* ── Customer section ── */
  body.page-orders-detail .od-customer{
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--surface-gray-100);
    background: var(--primary-green-ghost);
  }
  body.page-orders-detail .od-customer-avatar{
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--primary-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .875rem; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(2,84,45,.25);
  }
  body.page-orders-detail .od-customer-name{ font-size: .8125rem; font-weight: 700; color: var(--text-900); }
  body.page-orders-detail .od-customer-sub{ font-size: .68rem; color: var(--text-500); margin-top: 2px; display: flex; align-items: center; gap: 4px; }

  /* ── Vertical Timeline (Progress) ── */
  body.page-orders-detail .od-tl{ display: flex; flex-direction: column; gap: 0; padding: .875rem 1rem; }
  body.page-orders-detail .od-tl-row{ display: flex; gap: .75rem; align-items: flex-start; position: relative; }
  body.page-orders-detail .od-tl-left{ display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 32px; }
  body.page-orders-detail .od-tl-dot{
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; z-index: 1; flex-shrink: 0;
    border: 2px solid; box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
  }
  body.page-orders-detail .od-tl-dot.completed{ background: var(--primary-green); color: #fff; border-color: var(--primary-green); box-shadow: 0 2px 8px rgba(2,84,45,.25); }
  body.page-orders-detail .od-tl-dot.current{ background: var(--warning); color: #fff; border-color: var(--warning); box-shadow: 0 2px 8px rgba(245,158,11,.3); animation: orders-detail--tlPulse 2s infinite; }
  body.page-orders-detail .od-tl-dot.pending{ background: var(--surface-white); color: var(--text-500); border-color: var(--border-200); }
  @keyframes orders-detail--tlPulse { 0%,100% { box-shadow: 0 2px 8px rgba(245,158,11,.3); } 50% { box-shadow: 0 4px 14px rgba(245,158,11,.55); } }
  body.page-orders-detail .od-tl-line{ width: 2px; flex: 1; min-height: 18px; background: var(--border-200); border-radius: 1px; margin: 2px 0; }
  body.page-orders-detail .od-tl-line.done{ background: var(--primary-green); }
  body.page-orders-detail .od-tl-right{ flex: 1; padding: .2rem 0 .875rem; min-width: 0; }
  body.page-orders-detail .od-tl-label{ font-size: .78rem; font-weight: 700; color: var(--text-900); line-height: 1.2; }
  body.page-orders-detail .od-tl-label.completed{ color: var(--primary-green); }
  body.page-orders-detail .od-tl-label.current{ color: #92400e; }
  body.page-orders-detail .od-tl-label.pending{ color: var(--text-500); opacity: .65; }
  body.page-orders-detail .od-tl-sub{ font-size: .67rem; color: var(--text-500); margin-top: 2px; }

  /* Hidden progress bar (JS still updates it, we just don't show the track) */
  body.page-orders-detail .od-progress-hidden{ display: none; }

  /* Progress % badge shown in card head */
  body.page-orders-detail .od-progress-pct{
    font-size: .65rem; font-weight: 700; color: var(--primary-green);
    background: var(--primary-green-light); padding: 2px 8px;
    border-radius: 999px; border: 1px solid var(--primary-green-light);
  }

  /* ── Order Items (Col 2) ── */
  body.page-orders-detail .od-items{ display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem 0; }
  body.page-orders-detail .od-item{
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .625rem .75rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border-200); background: var(--surface-gray-50);
    transition: var(--transition-fast);
  }
  body.page-orders-detail .od-item:hover{ background: var(--primary-green-ghost); border-color: var(--primary-green-light); }
  body.page-orders-detail .od-item-img{
    width: 56px; height: 56px; border-radius: var(--radius-md);
    background: var(--surface-gray-100); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; overflow: hidden;
    border: 1px solid var(--border-200);
  }
  body.page-orders-detail .od-item-img img{ width: 100%; height: 100%; object-fit: cover; }
  body.page-orders-detail .od-item-img i{ font-size: 1.4rem; color: var(--text-500); }
  body.page-orders-detail .od-item-info{ flex: 1; min-width: 0; }
  body.page-orders-detail .od-item-name{ font-size: .8125rem; font-weight: 700; color: var(--text-900); margin-bottom: 3px; }
  body.page-orders-detail .od-item-meta{ font-size: .67rem; color: var(--text-500); display: flex; gap: .5rem; flex-wrap: wrap; }
  body.page-orders-detail .od-item-price{ font-size: .875rem; font-weight: 800; color: var(--success); flex-shrink: 0; font-family: "SF Mono","Monaco",monospace; }

  body.page-orders-detail .od-divider{ border: none; border-top: 1px solid var(--surface-gray-100); margin: .75rem 1rem 0; }

  body.page-orders-detail .od-totals{
    display: grid; grid-template-columns: 1fr 1fr; gap: .875rem;
    padding: .875rem 1rem;
  }
  body.page-orders-detail .od-addr-label{ font-size: .62rem; font-weight: 700; color: var(--text-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .375rem; }
  body.page-orders-detail .od-addr-text{ font-size: .72rem; color: var(--text-700); line-height: 1.65; }
  body.page-orders-detail .od-price-rows{ display: flex; flex-direction: column; gap: .3rem; }
  body.page-orders-detail .od-price-row{ display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-500); }
  body.page-orders-detail .od-price-row.total{ font-size: .8125rem; font-weight: 800; color: var(--primary-green); border-top: 1px solid var(--border-200); padding-top: .375rem; margin-top: .1rem; }

  /* ── Activity log (center col) ── */
  body.page-orders-detail .activity-log-wrap{
    background: var(--surface-white); border: 1px solid var(--border-200);
    border-radius: var(--radius-lg); overflow: hidden;
  }
  body.page-orders-detail .activity-log-header{
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--primary-green-ghost);
    border-bottom: 1px solid var(--border-200); cursor: pointer; user-select: none;
  }
  body.page-orders-detail .activity-log-header-left{
    display: flex; align-items: center; gap: 7px;
    font-size: .8125rem; font-weight: 700; color: var(--primary-green);
  }
  body.page-orders-detail .activity-log-header-badge{
    background: var(--primary-green); color: #fff;
    font-size: .65rem; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  }
  body.page-orders-detail .activity-log-toggle-icon{ color: var(--text-500); font-size: .8rem; transition: transform .25s ease; }
  body.page-orders-detail .activity-log-toggle-icon.open{ transform: rotate(180deg); }
  body.page-orders-detail .activity-log-body{
    max-height: 300px; overflow-y: auto; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 0;
  }
  body.page-orders-detail .activity-log-body::-webkit-scrollbar{ width: 4px; }
  body.page-orders-detail .activity-log-body::-webkit-scrollbar-track{ background: var(--surface-gray-100); border-radius: 2px; }
  body.page-orders-detail .activity-log-body::-webkit-scrollbar-thumb{ background: var(--primary-green-light); border-radius: 2px; }
  body.page-orders-detail .al-item{ display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; position: relative; }
  body.page-orders-detail .al-item:not(.al-last)::after{
    content: ""; position: absolute; left: 14px; top: 30px; bottom: -2px;
    width: 2px; background: var(--border-200); border-radius: 1px;
  }
  body.page-orders-detail .al-icon-wrap{
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 1; font-size: .7rem;
  }
  body.page-orders-detail .al-body{ flex: 1; padding-top: 3px; min-width: 0; }
  body.page-orders-detail .al-text{ font-size: .8rem; color: var(--text-700); font-weight: 500; line-height: 1.4; word-break: break-word; }
  body.page-orders-detail .al-meta{ font-size: .675rem; color: var(--text-500); margin-top: 3px; display: flex; align-items: center; gap: 4px; }

  /* ── Management card (dark green header) ── */
  body.page-orders-detail .od-card-mgmt{ border: none; box-shadow: var(--shadow-md); }
  body.page-orders-detail .od-mgmt-header{
    background: var(--primary-green);
    padding: 1rem 1.1rem;
    position: relative; overflow: hidden;
  }
  body.page-orders-detail .od-mgmt-header::before{
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: rgba(255,255,255,.05);
  }
  body.page-orders-detail .od-mgmt-title{ font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem; }
  body.page-orders-detail .od-mgmt-act-btns{ display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .625rem; }
  body.page-orders-detail .od-mgmt-btn{
    display: flex; align-items: center; justify-content: center; gap: .375rem;
    padding: .55rem .75rem; border-radius: var(--radius-lg); font-size: .72rem; font-weight: 700;
    cursor: pointer; border: none; transition: var(--transition-fast);
    min-height: 38px; letter-spacing: .01em;
  }
  body.page-orders-detail .od-mgmt-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
  body.page-orders-detail .od-mgmt-btn:disabled{ opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
  body.page-orders-detail .od-mgmt-btn-accept{ background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); }
  body.page-orders-detail .od-mgmt-btn-accept:hover:not(:disabled){ background: rgba(255,255,255,.25); }
  body.page-orders-detail .od-mgmt-btn-reject{ background: #fde8e8; color: #7f1d1d; border: 1px solid rgba(239,68,68,.3); }
  body.page-orders-detail .od-mgmt-btn-reject:hover:not(:disabled){ background: #fca5a5; }
  body.page-orders-detail .od-mgmt-body{ padding: 1rem; }

  body.page-orders-detail .od-mini-al-wrap{
    background: var(--surface-gray-50); border: 1px solid var(--border-200);
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: .875rem;
  }
  body.page-orders-detail .od-mini-al-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: .45rem .75rem; background: var(--primary-green-ghost);
    border-bottom: 1px solid var(--border-200); cursor: pointer; user-select: none;
  }
  body.page-orders-detail .od-mini-al-head-left{
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; color: var(--primary-green);
  }
  body.page-orders-detail .activity-mini-body{
    max-height: 180px; overflow-y: auto; padding: .5rem .625rem;
    display: flex; flex-direction: column; gap: .3rem;
  }
  body.page-orders-detail .activity-mini-body::-webkit-scrollbar{ width: 3px; }
  body.page-orders-detail .activity-mini-body::-webkit-scrollbar-thumb{ background: var(--primary-green-light); border-radius: 2px; }
  body.page-orders-detail .alm-item{
    display: flex; align-items: flex-start; gap: .5rem; padding: .375rem .5rem;
    background: var(--surface-white); border-radius: var(--radius-sm);
    border: 1px solid var(--border-200);
  }
  body.page-orders-detail .alm-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
  body.page-orders-detail .alm-content{ flex: 1; min-width: 0; }
  body.page-orders-detail .alm-text{ font-size: .7rem; color: var(--text-700); font-weight: 500; line-height: 1.3; word-break: break-word; }
  body.page-orders-detail .alm-time{ font-size: .6rem; color: var(--text-500); display: block; margin-top: 2px; }

  /* ── Payment docs section ── */
  body.page-orders-detail .od-pay-doc{
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .75rem; background: var(--surface-gray-50); border-radius: var(--radius-md);
    border: 1px solid var(--border-200); margin-bottom: .75rem;
  }
  body.page-orders-detail .od-pay-doc-info{ display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
  body.page-orders-detail .od-pay-doc-name{ font-size: .78rem; font-weight: 600; color: var(--text-900); }
  body.page-orders-detail .od-pay-doc-meta{ font-size: .65rem; color: var(--text-500); }

  body.page-orders-detail .od-section-label{
    font-size: .6rem; font-weight: 700; color: var(--text-500);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem;
  }
  body.page-orders-detail .od-pay-date{ font-size: .78rem; color: var(--text-700); font-weight: 500; margin-bottom: .875rem; }

  /* ── Secondary action buttons ── */
  body.page-orders-detail .od-action-row{ display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }

  /* ── Refund section ── */
  body.page-orders-detail #refundSection{
    padding: .875rem; background: #fef2f2; border-radius: var(--radius-lg);
    border: 1px solid #fecaca; margin-bottom: .875rem;
  }

  /* ── Shipping Section ── */
  body.page-orders-detail .od-card-fulfill .od-card-head{ background: var(--surface-gray-50); }
  body.page-orders-detail .od-ship-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: .625rem; }

  /* ── Shipping status display card ── */
  body.page-orders-detail .od-ship-status-card{
    background: var(--primary-green-ghost);
    border: 1px solid var(--primary-green-light);
    border-radius: var(--radius-lg);
    padding: .75rem;
    margin-bottom: .875rem;
  }
  body.page-orders-detail .od-ship-status-header{
    display: flex; align-items: center; gap: .5rem;
    font-size: .72rem; font-weight: 700; color: var(--primary-green);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: .625rem;
  }
  body.page-orders-detail .od-ship-status-badge{
    margin-left: auto;
    font-size: .6rem; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
  }
  body.page-orders-detail .od-ship-status-badge.transit{ background: rgba(2,84,45,.12); color: var(--primary-green); border: 1px solid var(--primary-green-light); }
  body.page-orders-detail .od-ship-status-badge.delivered{ background: rgba(34,197,94,.12); color: #15803d; border: 1px solid rgba(34,197,94,.3); }
  body.page-orders-detail .od-ship-status-badge.not-shipped{ background: var(--surface-gray-100); color: var(--text-500); border: 1px solid var(--border-200); }
  body.page-orders-detail .od-ship-status-rows{ display: flex; flex-direction: column; gap: .375rem; }
  body.page-orders-detail .od-ship-status-row{
    display: flex; align-items: center; justify-content: space-between;
    font-size: .72rem; padding: .25rem 0;
    border-bottom: 1px solid var(--primary-green-light);
  }
  body.page-orders-detail .od-ship-status-row:last-child{ border-bottom: none; }
  body.page-orders-detail .od-ship-status-key{ color: var(--text-500); font-weight: 600; display: flex; align-items: center; gap: .3rem; }
  body.page-orders-detail .od-ship-status-val{ color: var(--text-900); font-weight: 700; text-align: right; }
  body.page-orders-detail .od-ship-status-val.mono{ font-family: "SF Mono","Monaco","Cascadia Code",monospace; color: var(--primary-green); letter-spacing: .02em; }

  /* ── Fulfillment card sub-status hint ── */
  body.page-orders-detail #shippingStatusHint{
    font-size: .75rem; color: var(--text-500); margin-bottom: .625rem;
    padding: .375rem .625rem; background: #fef3c7;
    border-radius: var(--radius-md); border-left: 3px solid var(--warning); display: none;
  }

  /* ── Status badge (used in header) ── */
  body.page-orders-detail .od-status-badge{
    display: inline-flex; align-items: center; gap: 5px;
    padding: .25rem .65rem; border-radius: 999px;
    font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  }
  body.page-orders-detail .od-status-badge i{ font-size: .7rem; }
  body.page-orders-detail .od-status-badge.pending{ background: rgba(245,158,11,.12); color: #92400e; border: 1px solid rgba(245,158,11,.2); }
  body.page-orders-detail .od-status-badge.confirmed{ background: rgba(34,197,94,.12); color: #166534; border: 1px solid rgba(34,197,94,.2); }
  body.page-orders-detail .od-status-badge.processing{ background: var(--primary-green-light); color: var(--primary-green); border: 1px solid var(--primary-green-light); }
  body.page-orders-detail .od-status-badge.shipped{ background: var(--primary-green-light); color: var(--primary-green); border: 1px solid var(--primary-green-light); }
  body.page-orders-detail .od-status-badge.delivered,
body.page-orders-detail .od-status-badge.completed{ background: rgba(34,197,94,.12); color: #166534; border: 1px solid rgba(34,197,94,.2); }
  body.page-orders-detail .od-status-badge.cancelled,
body.page-orders-detail .od-status-badge.rejected{ background: rgba(239,68,68,.12); color: #991b1b; border: 1px solid rgba(239,68,68,.2); }

  /* ── Keep existing btn / form-control / popup / toast styles ── */
  body.page-orders-detail #mainContent .btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border: none; border-radius: var(--radius-lg);
    font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: var(--transition-fast); outline: none; white-space: nowrap;
    user-select: none; position: relative; overflow: hidden; min-height: 38px;
  }
  body.page-orders-detail #mainContent .btn:disabled{ opacity: .6; cursor: not-allowed; transform: none !important; }
  body.page-orders-detail #mainContent .btn-primary{ background: var(--primary-green); color: #fff; box-shadow: var(--shadow-sm); }
  body.page-orders-detail #mainContent .btn-primary:hover:not(:disabled){ background: var(--primary-green-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; text-decoration: none; }
  body.page-orders-detail #mainContent .btn-secondary{ background: var(--surface-white); border: 1px solid var(--border-200); color: var(--text-700); box-shadow: var(--shadow-xs); }
  body.page-orders-detail #mainContent .btn-secondary:hover:not(:disabled){ background: var(--surface-gray-50); border-color: var(--primary-green); color: var(--primary-green); transform: translateY(-1px); text-decoration: none; }
  body.page-orders-detail #mainContent .btn-success{ background: var(--success); color: #fff; box-shadow: var(--shadow-sm); }
  body.page-orders-detail #mainContent .btn-success:hover:not(:disabled){ background: #16a34a; transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; text-decoration: none; }
  body.page-orders-detail #mainContent .btn-warning{ background: var(--warning); color: #fff; box-shadow: var(--shadow-sm); }
  body.page-orders-detail #mainContent .btn-warning:hover:not(:disabled){ background: #d97706; transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; text-decoration: none; }
  body.page-orders-detail #mainContent .btn-danger{ background: var(--error); color: #fff; box-shadow: var(--shadow-sm); }
  body.page-orders-detail #mainContent .btn-danger:hover:not(:disabled){ background: #dc2626; transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; text-decoration: none; }
  body.page-orders-detail #mainContent .btn-sm{ padding: 5px 10px; font-size: .72rem; min-height: 30px; }

  body.page-orders-detail #mainContent .form-label{ display: block; font-size: .65rem; font-weight: 700; color: var(--text-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
  body.page-orders-detail #mainContent .form-control{
    width: 100%; padding: 8px 12px; border: 1px solid var(--border-200);
    border-radius: var(--radius-lg); background: var(--surface-white); color: var(--text-700);
    font-size: .8125rem; font-weight: 500; transition: var(--transition-fast); outline: none;
  }
  body.page-orders-detail #mainContent .form-control:focus{ border-color: var(--primary-green); box-shadow: 0 0 0 3px var(--primary-green-light); }
  body.page-orders-detail #mainContent .form-control:read-only{ background: var(--surface-gray-50); color: var(--text-500); cursor: not-allowed; }

  /* Popup */
  body.page-orders-detail .popup-overlay{
    position: fixed; inset: 0; background: rgba(15,23,42,.6);
    backdrop-filter: blur(10px); z-index: 1050; display: none;
    align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .25s ease;
  }
  body.page-orders-detail .popup-overlay.show{ display: flex; opacity: 1; }
  body.page-orders-detail .popup-content{
    background: var(--surface-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative;
    transform: scale(.95) translateY(16px); transition: transform .25s ease; border: 1px solid var(--border-200);
  }
  body.page-orders-detail .popup-overlay.show .popup-content{ transform: scale(1) translateY(0); }
  body.page-orders-detail .popup-header{
    padding: 16px 20px; border-bottom: 2px solid var(--surface-gray-100);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface-gray-50); border-radius: var(--radius-xl) var(--radius-xl) 0 0; position: relative;
  }
  body.page-orders-detail .popup-header::after{ content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--gradient-primary); }
  body.page-orders-detail .popup-title{ display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-900); }
  body.page-orders-detail .popup-title i{ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--primary-green); background: var(--primary-green-light); border-radius: var(--radius-md); font-size: 1rem; }
  body.page-orders-detail .popup-close{ background: var(--surface-gray-100); border: 1px solid var(--border-200); width: 32px; height: 32px; border-radius: var(--radius-md); cursor: pointer; color: var(--text-500); font-size: .875rem; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
  body.page-orders-detail .popup-close:hover{ background: #fee2e2; border-color: #dc2626; color: #dc2626; }
  body.page-orders-detail .popup-body{ padding: 20px; }
  body.page-orders-detail .popup-message{ font-size: .875rem; line-height: 1.5; color: var(--text-700); margin-bottom: 16px; }
  body.page-orders-detail .popup-buttons{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
  body.page-orders-detail .popup-success .popup-title i{ background: rgba(34,197,94,.1); color: var(--success); }
  body.page-orders-detail .popup-error   .popup-title i{ background: rgba(239,68,68,.1); color: var(--error); }
  body.page-orders-detail .popup-warning .popup-title i{ background: rgba(245,158,11,.1); color: var(--warning); }
  body.page-orders-detail .popup-info    .popup-title i{ background: rgba(59,130,246,.1);  color: var(--info); }

  /* Toast */
  body.page-orders-detail .action-toast{
    position: fixed; right: 16px; top: 16px; z-index: 1100; color: #fff;
    padding: 10px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    font-size: .8125rem; font-weight: 600; opacity: 0; transform: translateY(-6px);
    transition: opacity .2s ease,transform .2s ease; pointer-events: none;
  }
  body.page-orders-detail .action-toast.show{ opacity: 1; transform: translateY(0); }
  body.page-orders-detail .action-toast.success{ background: var(--success); }
  body.page-orders-detail .action-toast.error{ background: var(--error); }
  body.page-orders-detail .action-toast.info{ background: #2563eb; }

  /* Btn loading spinner */
  body.page-orders-detail #mainContent .btn-loading{ position: relative; color: transparent !important; }
  body.page-orders-detail #mainContent .btn-loading::after{
    content: ""; position: absolute; width: 16px; height: 16px;
    top: 50%; left: 50%; margin: -8px 0 0 -8px;
    border: 2px solid transparent; border-top-color: #fff;
    border-radius: 50%; animation: orders-detail--btnSpin 1s linear infinite;
  }
  @keyframes orders-detail--btnSpin { to { transform: rotate(360deg); } }

  /* Status badge (existing, used in info list) */
  body.page-orders-detail .status-badge{
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    border-radius: var(--radius-sm); font-size: .62rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
  }
  body.page-orders-detail .status-badge.pending{ background: var(--warning); color: #fff; }
  body.page-orders-detail .status-badge.confirmed{ background: var(--primary-green); color: #fff; }
  body.page-orders-detail .status-badge.processing{ background: var(--primary-green); color: #fff; }
  body.page-orders-detail .status-badge.shipped{ background: var(--primary-green); color: #fff; }
  body.page-orders-detail .status-badge.delivered{ background: var(--primary-green); color: #fff; }
  body.page-orders-detail .status-badge.cancelled{ background: var(--error); color: #fff; }
  body.page-orders-detail .status-badge.validating{ background: #7c3aed; color: #fff; }
  body.page-orders-detail .status-badge.completed{ background: var(--success); color: #fff; }
  body.page-orders-detail .status-badge.error{ background: var(--error); color: #fff; }

  /* Fade-in animation */
  body.page-orders-detail .fade-in{ animation: orders-detail--fadeIn .4s ease-out both; }
  body.page-orders-detail .fade-in:nth-child(1){ animation-delay: 0ms; }
  body.page-orders-detail .fade-in:nth-child(2){ animation-delay: 80ms; }
  body.page-orders-detail .fade-in:nth-child(3){ animation-delay: 160ms; }
  @keyframes orders-detail--fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* Responsive */
  @media (max-width: 1100px) {
    body.page-orders-detail .od-grid{ grid-template-columns: 1fr 1fr; }
    body.page-orders-detail .od-col-3{ grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
    body.page-orders-detail .od-col-3 .od-card{ margin-bottom: 0; }
  }
  @media (max-width: 720px) {
    body.page-orders-detail .od-grid{ grid-template-columns: 1fr; }
    body.page-orders-detail .od-col-3{ grid-column: auto; display: block; }
    body.page-orders-detail .od-col-3 .od-card{ margin-bottom: .875rem; }
    body.page-orders-detail .od-totals{ grid-template-columns: 1fr; }
    body.page-orders-detail .od-ship-grid{ grid-template-columns: 1fr; }
    body.page-orders-detail .od-mgmt-act-btns{ grid-template-columns: 1fr; }
  }


/* ==========================================================
   Template: orders/menu.html (page-orders-menu)
   ========================================================== */

  body.page-orders-menu{
    --primary-green: #02542D;
    --primary-green-dark: #01402A;
    --primary-green-light: #02542d15;
    --primary-green-ghost: #02542d08;
    --accent-emerald: #10b981;
    --accent-mint: #6ee7b7;
    --surface-white: #ffffff;
    --surface-gray-50: #f8fafc;
    --surface-gray-100: #f1f5f9;
    --surface-gray-200: #e2e8f0;
    --text-900: #0f172a;
    --text-700: #334155;
    --text-500: #64748b;
    --border-200: #e5e7eb;
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --transition: all .3s cubic-bezier(.4, 0, .2, 1);
    --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);
    --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    --per-page: 8;
  }

  body.page-orders-menu .dashboard-container{
    margin: 0 auto;
    padding: 0.875rem 0.875rem 2.5rem;
    color: var(--text-700);
  }

  body.page-orders-menu .customers-header-card{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
  }

  body.page-orders-menu .customers-header-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    border-radius: var(--radius-xl);
  }

  body.page-orders-menu .customers-header-main{
    flex: 1 1 300px;
    min-width: 240px;
  }

  body.page-orders-menu #pageTitle{
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 .25rem 0;
    color: var(--primary-green);
    letter-spacing: -.01em;
  }

  body.page-orders-menu .page-subtitle{
    font-size: .8rem;
    color: var(--text-500);
    font-weight: 500;
    margin: 0;
  }

  body.page-orders-menu .skeleton-line{
    height: 12px;
    border-radius: 6px;
    background: var(--surface-gray-100);
    position: relative;
    overflow: hidden;
  }

  body.page-orders-menu .skeleton-line::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
    transform: translateX(-100%);
    animation: orders-menu--shimmer 1.2s infinite;
  }

  @keyframes orders-menu--shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  body.page-orders-menu .stats-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 6px 0 14px;
  }

  body.page-orders-menu .stat-card{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-xl);
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 70px;
  }

  body.page-orders-menu .stat-card.primary{
    background: var(--primary-green);
    color: #fff;
    border: none;
  }

  body.page-orders-menu .stat-card.primary .stat-icon{
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }

  body.page-orders-menu .stat-card.primary .stat-label{
    color: rgba(255, 255, 255, .85);
  }

  body.page-orders-menu .stat-card.primary .stat-value{
    color: #fff;
  }

  body.page-orders-menu .stat-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-green-light)
  }

  body.page-orders-menu .stat-card.active{
    outline: 2px solid var(--primary-green);
    outline-offset: 0
  }

  body.page-orders-menu .stat-card.primary.active{
    outline-color: #ffffff;
  }

  body.page-orders-menu .stat-icon{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-green-light);
    color: var(--primary-green);
    font-size: 1rem;
    flex-shrink: 0;
  }

  body.page-orders-menu .stat-label{
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-500);
    font-weight: 700;
    margin-bottom: 2px;
  }

  body.page-orders-menu .stat-value{
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-900);
    line-height: 1.1;
  }

  body.page-orders-menu .controls-section{
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    flex-shrink: 0;
    min-width: 300px;
  }

  body.page-orders-menu .controls-grid{
    display: flex;
    gap: 8px;
    align-items: center;
  }

  body.page-orders-menu .search-container{
    position: relative;
    flex: 1;
    min-width: 180px;
  }

  body.page-orders-menu .search-icon{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--text-500);
    pointer-events: none
  }

  body.page-orders-menu .search-input{
    width: 100%;
    padding: 5px 10px 5px 30px;
    border: 1px solid var(--border-200);
    border-radius: var(--radius-lg);
    background: var(--surface-white);
    color: var(--text-700);
    font-size: .75rem;
    transition: var(--transition-fast);
    outline: none;
    height: 34px;
  }

  body.page-orders-menu .search-input:focus{
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--primary-green-light)
  }

  body.page-orders-menu .sort-container{
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
  }

  body.page-orders-menu .custom-dropdown{
    position: relative;
    width: 100%;
  }

  body.page-orders-menu .dropdown-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 10px;
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-lg);
    color: var(--text-700);
    font-weight: 600;
    font-size: .7rem;
    cursor: pointer;
    transition: var(--transition-fast);
    outline: none;
    min-width: 130px;
    height: 34px;
  }

  body.page-orders-menu .dropdown-trigger:hover{
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-green-light);
  }

  body.page-orders-menu .dropdown-trigger.active{
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-green-light);
    background: var(--primary-green-ghost);
  }

  body.page-orders-menu .dropdown-arrow{
    transition: var(--transition-fast);
    color: var(--primary-green);
    font-size: .875rem;
  }

  body.page-orders-menu .dropdown-trigger.active .dropdown-arrow{
    transform: rotate(180deg);
  }

  body.page-orders-menu .custom-dropdown .dropdown-menu{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition-fast);
  }

  body.page-orders-menu .custom-dropdown .dropdown-menu.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  body.page-orders-menu .dropdown-option{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--text-700);
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }

  body.page-orders-menu .dropdown-option:hover{
    background: var(--primary-green-light);
    color: var(--primary-green-dark);
  }

  body.page-orders-menu .dropdown-section-label{
    padding: 6px 12px 4px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-500);
    pointer-events: none;
  }

  body.page-orders-menu .dropdown-divider{
    height: 1px;
    background: var(--border-200);
    margin: 4px 0;
  }

  body.page-orders-menu .dropdown-option.selected{
    background: var(--primary-green-light);
    color: var(--primary-green);
    font-weight: 600;
  }

  body.page-orders-menu .sort-icon{
    color: var(--primary-green);
    font-size: 1rem;
    flex-shrink: 0;
  }

  body.page-orders-menu #sortSelect{
    display: none;
  }

  body.page-orders-menu .table-container{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden
  }

  body.page-orders-menu .table-scroll-wrapper{
    overflow-x: auto;
    max-width: 100%;
  }

  body.page-orders-menu .table-scroll-wrapper::-webkit-scrollbar{
    height: 8px;
  }

  body.page-orders-menu .table-scroll-wrapper::-webkit-scrollbar-track{
    background: var(--surface-gray-100);
    border-radius: 0.375rem;
  }

  body.page-orders-menu .table-scroll-wrapper::-webkit-scrollbar-thumb{
    background: var(--primary-green);
    border-radius: 0.375rem;
  }

  body.page-orders-menu .custom-table{
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem
  }

  body.page-orders-menu .custom-table thead th{
    background: var(--primary-green-dark);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: .72rem;
    padding: .75rem 1rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .045em;
    white-space: nowrap;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  body.page-orders-menu .custom-table tbody tr{
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--border-200)
  }

  body.page-orders-menu .custom-table tbody tr:nth-child(even){
    background: var(--surface-gray-50)
  }

  body.page-orders-menu .custom-table tbody tr:hover{
    background: var(--primary-green-ghost);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  body.page-orders-menu .custom-table tbody tr[data-order-id]{
    cursor: pointer
  }

  body.page-orders-menu .custom-table td{
    padding: .75rem 1rem;
    color: #4b5563;
    border: none;
    font-size: .8125rem;
    vertical-align: middle;
    font-weight: 400;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
  }

  /* ── Column alignment utilities (local, works outside .content-area) ── */
  body.page-orders-menu .custom-table th.col-center,
body.page-orders-menu .custom-table td.col-center{ text-align: center !important; }

  body.page-orders-menu .custom-table th.col-num,
body.page-orders-menu .custom-table td.col-num{ text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

  body.page-orders-menu .custom-table th.col-action,
body.page-orders-menu .custom-table td.col-action{ text-align: center !important; white-space: nowrap; }

  body.page-orders-menu .table-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-white);
    border-top: 1px solid var(--border-200);
    font-size: .75rem;
    color: var(--text-500)
  }

  body.page-orders-menu .pagination{
    display: flex;
    align-items: center;
    gap: 6px
  }

  body.page-orders-menu .pagination-btn{
    min-width: 2rem;
    text-align: center;
    padding: .35rem .5rem;
    border: 1px solid var(--border-200);
    border-radius: var(--radius-md);
    background: var(--surface-white);
    color: var(--text-700);
    font-weight: 600;
    font-size: .75rem;
    cursor: pointer;
    transition: var(--transition-fast)
  }

  body.page-orders-menu .pagination-btn:hover:not(.disabled){
    background: var(--primary-green);
    color: #fff;
    border-color: var(--primary-green);
    transform: translateY(-1px)
  }

  body.page-orders-menu .pagination-btn.active{
    background: var(--primary-green);
    color: #fff;
    border-color: var(--primary-green)
  }

  body.page-orders-menu .pagination-btn.disabled{
    background: var(--surface-gray-100);
    color: var(--text-500);
    cursor: not-allowed
  }

  body.page-orders-menu .status-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  body.page-orders-menu .status-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  body.page-orders-menu .status-pending{
    background: rgba(251, 188, 5, 0.1);
    color: #92400e;
  }

  body.page-orders-menu .status-pending .status-dot{
    background: var(--warning);
  }

  body.page-orders-menu .status-processing,
body.page-orders-menu .status-confirmed{
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
  }

  body.page-orders-menu .status-processing .status-dot,
body.page-orders-menu .status-confirmed .status-dot{
    background: var(--info);
  }

  body.page-orders-menu .status-completed,
body.page-orders-menu .status-delivered,
body.page-orders-menu .status-shipped{
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
  }

  body.page-orders-menu .status-completed .status-dot,
body.page-orders-menu .status-delivered .status-dot,
body.page-orders-menu .status-shipped .status-dot{
    background: var(--success);
  }

  body.page-orders-menu .status-cancelled,
body.page-orders-menu .status-cancel,
body.page-orders-menu .status-rejected{
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
  }

  body.page-orders-menu .status-cancelled .status-dot,
body.page-orders-menu .status-cancel .status-dot,
body.page-orders-menu .status-rejected .status-dot{
    background: var(--error);
  }

  /* PAYMENT_WAS_SUCCESSFUL maps to "successful" = same green as completed */
  body.page-orders-menu .status-successful{
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
  }

  body.page-orders-menu .status-successful .status-dot{
    background: var(--success);
  }

  body.page-orders-menu .customer-cell{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body.page-orders-menu .customer-icon{
    color: var(--text-500);
    font-size: .8rem;
  }

  body.page-orders-menu .badge-qty{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .025em;
    background: var(--surface-gray-100);
    color: var(--text-700);
  }

  body.page-orders-menu .total-price{
    color: var(--success);
    font-weight: 700;
  }

  body.page-orders-menu .decision-btns{
    display: inline-flex;
    border: 1px solid var(--border-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
  }

  body.page-orders-menu .decision-btns button{
    border: none;
    background: var(--surface-white);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 500;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.page-orders-menu .decision-btns button:disabled{
    opacity: 0.4;
    cursor: not-allowed;
  }

  body.page-orders-menu .btn-accept{
    color: var(--success);
    border-right: 1px solid var(--border-200);
  }

  body.page-orders-menu .btn-accept:hover:not(:disabled){
    background: var(--success);
    color: white;
  }

  body.page-orders-menu .btn-reject{
    color: var(--error);
  }

  body.page-orders-menu .btn-reject:hover:not(:disabled){
    background: var(--error);
    color: white;
  }

  body.page-orders-menu .btn-icon{
    background: transparent;
    border: 1px solid var(--border-200);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    color: var(--text-500);
    cursor: pointer;
    transition: var(--transition-fast);
    margin-left: 0.5rem;
  }

  body.page-orders-menu .btn-icon:hover{
    color: var(--primary-green);
    border-color: var(--primary-green);
    background: var(--primary-green-light);
  }

  body.page-orders-menu .flag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
  }

  body.page-orders-menu .flag.f-yes{
    background: var(--success);
    color: white;
  }

  body.page-orders-menu .flag.f-no{
    background: var(--error);
    color: white;
  }

  body.page-orders-menu .flag.f-na{
    background: var(--text-500);
    color: white;
  }

    @media (max-width: 768px) {
    body.page-orders-menu .dashboard-container{
      padding: 0.75rem;
    }

    body.page-orders-menu .controls-section{
      min-width: unset;
      width: 100%;
    }

    body.page-orders-menu .controls-grid{
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 8px;
      align-items: center;
    }

    body.page-orders-menu .search-container{
      flex: 1 1 auto;
      min-width: 0;
    }

    body.page-orders-menu .sort-container{
      flex: 0 0 145px;
      min-width: 145px;
    }

    body.page-orders-menu .custom-dropdown{
      width: 100%;
    }

    body.page-orders-menu .stats-grid{
      grid-template-columns: repeat(2, 1fr);
      align-items: stretch;
    }

    body.page-orders-menu .stat-card{
      width: 100%;
      min-width: 0;
      min-height: 96px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      padding: .75rem .4rem;
      text-align: center;
    }

    body.page-orders-menu .stat-card > div:last-child{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    body.page-orders-menu .stat-label{
      margin-bottom: .1rem;
      font-size: .55rem;
      line-height: 1.25;
      text-align: center;
    }

    body.page-orders-menu .stat-value{
      width: 100%;
      font-size: 1.2rem;
      text-align: center;
    }
  }

  @media (max-width: 576px) {
    body.page-orders-menu .dashboard-container{
      padding: 0.5rem;
    }

    body.page-orders-menu .customers-header-card{
      padding: .75rem;
      gap: .75rem;
    }

    body.page-orders-menu #pageTitle{
      font-size: 1.125rem;
    }

    body.page-orders-menu .stats-grid{
      grid-template-columns: repeat(2, 1fr);
      gap: .5rem;
      align-items: stretch;
    }

    body.page-orders-menu .controls-grid{
      flex-direction: row;
      flex-wrap: nowrap;
      gap: .5rem;
    }

    body.page-orders-menu .search-container{
      flex: 1 1 auto;
      min-width: 0;
    }

    body.page-orders-menu .sort-container{
      flex: 0 0 138px;
      min-width: 138px;
      gap: 4px;
    }

    body.page-orders-menu .sort-icon{
      font-size: .8rem;
    }

    body.page-orders-menu .dropdown-trigger{
      min-width: 0;
      width: 100%;
      padding-inline: .6rem;
    }

    body.page-orders-menu .stat-card{
      min-height: 94px;
      border-radius: .8rem;
    }

    body.page-orders-menu .stat-icon{
      width: 34px;
      height: 34px;
      font-size: .9rem;
    }

    body.page-orders-menu .table-container{
      border-radius: .75rem;
    }

    body.page-orders-menu .custom-table{
      font-size: .75rem;
      min-width: 1050px;
      table-layout: auto;
    }

    body.page-orders-menu .custom-table thead{
      display: table-header-group;
    }

    body.page-orders-menu .custom-table tbody{
      display: table-row-group;
    }

    body.page-orders-menu .custom-table tr{
      display: table-row;
    }

    body.page-orders-menu .custom-table th,
body.page-orders-menu .custom-table td{
      display: table-cell;
      width: auto;
      min-width: 110px;
      padding: .65rem .75rem;
      text-align: left;
      white-space: nowrap;
    }

    body.page-orders-menu .custom-table th:first-child,
body.page-orders-menu .custom-table td:first-child{
      min-width: 90px;
    }

    body.page-orders-menu .custom-table th:last-child,
body.page-orders-menu .custom-table td:last-child{
      min-width: 120px;
    }

    body.page-orders-menu .custom-table th:nth-child(7),
body.page-orders-menu .custom-table td:nth-child(7),
body.page-orders-menu .custom-table th:nth-child(8),
body.page-orders-menu .custom-table td:nth-child(8){
      min-width: 135px;
      text-align: center;
      white-space: nowrap;
      word-break: normal;
      overflow-wrap: normal;
    }

    body.page-orders-menu .custom-table .status-badge{
      min-width: 108px;
      padding: .35rem .65rem;
      font-size: .65rem;
      line-height: 1.2;
    }

    body.page-orders-menu .custom-table td::before{
      display: none;
    }
  }

  body.page-orders-menu .fade-in{
    animation: orders-menu--fadeIn .4s ease-out
  }

  @keyframes orders-menu--fadeIn {
    from {
      opacity: 0;
      transform: translateY(6px)
    }

    to {
      opacity: 1;
      transform: none
    }
  }


/* ==========================================================
   Template: orders/order_dashboard.html (page-orders-order-dashboard)
   ========================================================== */

    /* ==== CSS Custom Properties ==== */
    body.page-orders-order-dashboard{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;
        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;
        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;
        --border-200: #e5e7eb;
        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;
        --info: #3b82f6;
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;
        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);
        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    }

    /* ==== Page Container ==== */
    body.page-orders-order-dashboard .dashboard-container{
        padding: 1rem 0 3rem;
        color: var(--text-700);
    }

    /* ==== Page Header ==== */
    body.page-orders-order-dashboard .page-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.875rem;
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
    }

    body.page-orders-order-dashboard .page-title{
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: .01em;
    }

    /* ==== Filter Toggle Button ==== */
    body.page-orders-order-dashboard .btn-filter-toggle{
        padding: 8px 14px;
        background: var(--gradient-primary);
        color: white;
        border: none;
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: .75rem;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: var(--shadow-sm);
    }

    body.page-orders-order-dashboard .btn-filter-toggle:hover{
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    body.page-orders-order-dashboard .btn-filter-toggle.active{
        background: var(--primary-green);
    }

    /* ==== Stat Cards ==== */
    body.page-orders-order-dashboard .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 10px 0 18px 0;
    }

    body.page-orders-order-dashboard .stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    body.page-orders-order-dashboard .stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green-light);
    }

    body.page-orders-order-dashboard .stat-card.active{
        outline: 2px solid var(--primary-green);
        outline-offset: 0;
    }

    body.page-orders-order-dashboard .stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-orders-order-dashboard .stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-orders-order-dashboard .stat-value{
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ==== Filters Section ==== */
    body.page-orders-order-dashboard .filters-section{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        padding: 16px;
        margin-bottom: 16px;
        max-height: 0;
        overflow: hidden;
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;
    }

    body.page-orders-order-dashboard .filters-section.show{
        max-height: 1000px;
        opacity: 1;
        visibility: visible;
    }

    body.page-orders-order-dashboard .filters-title{
        font-size: .875rem;
        font-weight: 700;
        color: var(--primary-green);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-order-dashboard .filters-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 14px;
        margin-bottom: 14px;
    }

    body.page-orders-order-dashboard .form-group{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    body.page-orders-order-dashboard .form-label{
        font-size: .875rem;
        font-weight: 600;
        color: var(--text-700);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-order-dashboard .form-select{
        padding: 10px 14px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .875rem;
        transition: var(--transition-fast);
    }

    body.page-orders-order-dashboard .form-select:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-orders-order-dashboard .filter-actions{
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* ==== Custom Buttons ==== */
    body.page-orders-order-dashboard .btn-custom{
        padding: 10px 20px;
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: .875rem;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none;
    }

    body.page-orders-order-dashboard .btn-custom.btn-primary{
        background: var(--gradient-primary);
        color: white;
    }

    body.page-orders-order-dashboard .btn-custom.btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    body.page-orders-order-dashboard .btn-custom.btn-secondary{
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1px solid var(--primary-green);
    }

    body.page-orders-order-dashboard .btn-custom.btn-secondary:hover{
        background: var(--primary-green);
        color: white;
    }

    body.page-orders-order-dashboard .btn-custom.btn-info{
        background: var(--info);
        color: white;
    }

    body.page-orders-order-dashboard .btn-custom.btn-success{
        background: var(--success);
        color: white;
    }

    body.page-orders-order-dashboard .btn-custom.btn-sm{
        padding: 6px 12px;
        font-size: .8125rem;
    }

    /* ==== Table Container ==== */
    body.page-orders-order-dashboard .table-container{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    body.page-orders-order-dashboard .table-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-200);
        background: var(--surface-gray-50);
        flex-wrap: wrap;
        gap: 12px;
    }

    body.page-orders-order-dashboard .table-title{
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--primary-green);
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }

    body.page-orders-order-dashboard .table-actions{
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    body.page-orders-order-dashboard .custom-table{
        width: 100%;
        font-size: .875rem;
        margin-bottom: 0;
    }

    body.page-orders-order-dashboard .custom-table thead th{
        background: var(--primary-green-dark);
        color: #fff;
        font-weight: 600;
        font-size: .72rem;
        letter-spacing: .045em;
        text-transform: uppercase;
        padding: .75rem 1rem;
        text-align: left;
        border: none;
        white-space: nowrap;
        vertical-align: middle;
    }

    body.page-orders-order-dashboard .custom-table tbody tr{
        transition: var(--transition-fast);
        border-bottom: 1px solid var(--border-200);
    }

    body.page-orders-order-dashboard .custom-table tbody tr:last-child{ border-bottom: none; }

    body.page-orders-order-dashboard .custom-table tbody tr:nth-child(even){
        background: var(--surface-gray-50);
    }

    body.page-orders-order-dashboard .custom-table tbody tr:hover{
        background: var(--primary-green-ghost);
        box-shadow: inset 3px 0 0 var(--primary-green);
    }

    body.page-orders-order-dashboard .custom-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        font-size: .8125rem;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    /* ==== Order ID Badge ==== */
    body.page-orders-order-dashboard .order-id-badge{
        color: var(--primary-green);
        font-weight: 600;
    }

    /* ==== Customer Display ==== */
    body.page-orders-order-dashboard .customer-cell{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-order-dashboard .customer-icon{
        color: var(--text-500);
        font-size: .8rem;
    }

    /* ==== Quantity Badge ==== */
    body.page-orders-order-dashboard .badge-qty{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .025em;
        background: var(--surface-gray-100);
        color: var(--text-700);
    }

    /* ==== Total Price Badge ==== */
    body.page-orders-order-dashboard .total-price{
        color: var(--success);
        font-weight: 600;
    }

    /* ==== Status Badges ==== */
    body.page-orders-order-dashboard .badge-status{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .025em;
    }

    body.page-orders-order-dashboard .badge-pending{
        background: #FEF3C7;
        color: #92400E;
    }

    body.page-orders-order-dashboard .badge-confirmed{
        background: var(--primary-green-light);
        color: var(--primary-green);
    }

    body.page-orders-order-dashboard .badge-processing{
        background: #DBEAFE;
        color: #1E40AF;
    }

    body.page-orders-order-dashboard .badge-shipped,
body.page-orders-order-dashboard .badge-delivered{
        background: #D1FAE5;
        color: #065F46;
    }

    body.page-orders-order-dashboard .badge-cancelled{
        background: #FEE2E2;
        color: #991B1B;
    }

    body.page-orders-order-dashboard .badge-info{
        background: #DBEAFE;
        color: #1E40AF;
    }

    body.page-orders-order-dashboard .badge-success{
        background: #D1FAE5;
        color: #065F46;
    }

    /* ==== Table Footer ==== */
    body.page-orders-order-dashboard .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
        flex-wrap: wrap;
        gap: 12px;
    }

    /* ==== Pagination ==== */
    body.page-orders-order-dashboard .pagination-custom{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-orders-order-dashboard .pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-orders-order-dashboard .pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-orders-order-dashboard .pagination-btn.active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-orders-order-dashboard .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
    }

    /* ==== Empty State ==== */
    body.page-orders-order-dashboard .empty-state{
        text-align: center;
        padding: 32px;
        color: var(--text-500);
    }

    body.page-orders-order-dashboard .empty-state-icon{
        font-size: 32px;
        margin-bottom: 8px;
        display: block;
        color: var(--primary-green);
    }

    /* ==== Animations ==== */
    body.page-orders-order-dashboard .fade-in{
        animation: orders-order-dashboard--fadeIn .4s ease-out;
    }

    @keyframes orders-order-dashboard--fadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* ==== Responsive Design ==== */
    @media (max-width: 640px) {
        body.page-orders-order-dashboard .page-header{
            flex-direction: column;
            align-items: stretch;
        }

        body.page-orders-order-dashboard .btn-filter-toggle{
            width: 100%;
            justify-content: center;
        }

        body.page-orders-order-dashboard .filters-grid{
            grid-template-columns: 1fr;
        }

        body.page-orders-order-dashboard .table-header{
            flex-direction: column;
            align-items: stretch;
        }

        body.page-orders-order-dashboard .table-actions{
            justify-content: center;
        }

        body.page-orders-order-dashboard .table-container{
            border: none;
            background: transparent;
            box-shadow: none;
        }

        body.page-orders-order-dashboard .custom-table thead{
            display: none;
        }

        body.page-orders-order-dashboard .custom-table,
body.page-orders-order-dashboard .custom-table tbody,
body.page-orders-order-dashboard .custom-table tr,
body.page-orders-order-dashboard .custom-table td{
            display: block;
            width: 100%;
        }

        body.page-orders-order-dashboard .custom-table tr{
            background: #fff;
            border: 1px solid var(--border-200);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            margin-bottom: 12px;
            overflow: hidden;
        }

        body.page-orders-order-dashboard .custom-table td{
            border-bottom: 1px solid var(--border-200);
            position: relative;
            padding-left: 40%;
        }

        body.page-orders-order-dashboard .custom-table td:last-child{
            border-bottom: none;
        }

        body.page-orders-order-dashboard .custom-table td::before{
            content: attr(data-label);
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            font-weight: 700;
            color: var(--primary-green);
            width: 35%;
        }

        body.page-orders-order-dashboard .table-footer{
            border: none;
            background: transparent;
            padding: 8px 0;
            flex-direction: column;
        }

        body.page-orders-order-dashboard .stats-grid{
            grid-template-columns: 1fr 1fr;
            justify-items: center;
        }
    }


/* ==========================================================
   Template: orders/show_orders.html (page-orders-show-orders)
   ========================================================== */

        body.page-orders-show-orders{
            --brand-primary: #02542D;
            --brand-secondary: #013a1f;
            --ink-50: #f8fafc;
            --ink-100: #f1f5f9;
            --ink-200: #e2e8f0;
            --ink-500: #64748b;
            --ink-700: #334155;
            --ink-800: #1e293b;
            --surface-primary: #fff;
            --surface-secondary: #f8fafc;
            --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        body.page-orders-show-orders *{ box-sizing: border-box; }
        body.page-orders-show-orders{
            font-family: var(--font-family);
            background: var(--surface-secondary);
            color: var(--ink-700);
            margin: 0;
            padding: 1rem;
            font-size: .875rem;
            -webkit-font-smoothing: antialiased;
        }
        body.page-orders-show-orders h2{
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--ink-800);
            margin: 0 0 1rem;
            letter-spacing: -.01em;
            text-align: center;
        }
        body.page-orders-show-orders .table-wrap{
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: .75rem;
            border: 1px solid var(--ink-200);
            background: var(--surface-primary);
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / .07);
            margin-top: 1rem;
        }
        body.page-orders-show-orders table{
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }
        body.page-orders-show-orders th,
body.page-orders-show-orders td{
            padding: .75rem 1rem;
            text-align: center;
            vertical-align: middle;
            border: none;
        }
        body.page-orders-show-orders thead th{
            background: var(--brand-primary);
            color: #fff;
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .045em;
            text-transform: uppercase;
            white-space: nowrap;
            border-bottom: none;
        }
        body.page-orders-show-orders thead th:first-child{ border-radius: .75rem 0 0 0; }
        body.page-orders-show-orders thead th:last-child{ border-radius: 0 .75rem 0 0; }
        body.page-orders-show-orders tbody tr{
            border-bottom: 1px solid var(--ink-100);
            transition: background .15s;
        }
        body.page-orders-show-orders tbody tr:last-child{ border-bottom: none; }
        body.page-orders-show-orders tbody tr:hover{ background: rgba(2,84,45,.04); }
        body.page-orders-show-orders tbody tr:nth-child(even){ background: var(--surface-secondary); }
        body.page-orders-show-orders tbody tr:nth-child(even):hover{ background: rgba(2,84,45,.04); }

        /* Number / price columns */
        body.page-orders-show-orders th.col-num,
body.page-orders-show-orders td.col-num{
            text-align: center;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        body.page-orders-show-orders th.col-center,
body.page-orders-show-orders td.col-center{ text-align: center; }
        body.page-orders-show-orders th.col-action,
body.page-orders-show-orders td.col-action{ text-align: center; white-space: nowrap; }

        body.page-orders-show-orders .table-text-truncate-20{
            display: inline-block;
            max-width: 20ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
            cursor: help;
        }

        /* Badge styling */
        body.page-orders-show-orders .badge{
            display: inline-block;
            padding: .2em .55em;
            border-radius: 999px;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .03em;
            text-transform: uppercase;
            white-space: nowrap;
            vertical-align: middle;
        }
        body.page-orders-show-orders .badge-pending{ background: #fef3c7; color: #92400e; }
        body.page-orders-show-orders .badge-confirmed{ background: #dbeafe; color: #1e40af; }
        body.page-orders-show-orders .badge-processing{ background: #e0f2fe; color: #075985; }
        body.page-orders-show-orders .badge-shipped{ background: #dcfce7; color: #166534; }
        body.page-orders-show-orders .badge-delivered{ background: #bbf7d0; color: #14532d; }
        body.page-orders-show-orders .badge-cancelled{ background: #fee2e2; color: #991b1b; }
        body.page-orders-show-orders .badge-payment-pending{ background: #fef9c3; color: #713f12; }
        body.page-orders-show-orders .badge-payment-completed{ background: #dcfce7; color: #166534; }
        body.page-orders-show-orders .badge-payment-validating{ background: #ede9fe; color: #5b21b6; }
        body.page-orders-show-orders .badge-payment-error{ background: #fee2e2; color: #991b1b; }

        /* Expandable detail row */
        body.page-orders-show-orders tr.details{
            display: none;
            background: var(--ink-50);
        }
        body.page-orders-show-orders tr.details td{
            padding: 1rem 1.25rem;
        }
        body.page-orders-show-orders tr.details > td > strong{
            display: block;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--ink-500);
            margin-bottom: .625rem;
        }

        /* Inner cart items table */
        body.page-orders-show-orders tr.details table{
            background: var(--surface-primary);
            border: 1px solid var(--ink-200);
            border-radius: .5rem;
            overflow: hidden;
            border-collapse: separate;
            border-spacing: 0;
        }
        body.page-orders-show-orders tr.details table thead th{
            background: var(--brand-secondary, #013a1f);
            color: #fff;
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .05em;
            text-transform: uppercase;
            padding: .5rem .875rem;
            white-space: nowrap;
            border-radius: 0 !important;
        }
        body.page-orders-show-orders tr.details table tbody tr{
            border-bottom: 1px solid var(--ink-100);
        }
        body.page-orders-show-orders tr.details table tbody tr:last-child{ border-bottom: none; }
        body.page-orders-show-orders tr.details table tbody tr:hover{ background: rgba(2,84,45,.03); }
        body.page-orders-show-orders tr.details table tbody td{
            padding: .5rem .875rem;
            font-size: .8rem;
            color: var(--ink-700);
            vertical-align: middle;
        }
        body.page-orders-show-orders tr.details table tbody td:nth-child(2),
body.page-orders-show-orders tr.details table thead th:nth-child(2){ text-align: center; }
        body.page-orders-show-orders tr.details table tbody td:nth-child(4),
body.page-orders-show-orders tr.details table thead th:nth-child(4){ text-align: center; }

        body.page-orders-show-orders button.toggle-btn{
            cursor: pointer;
            border: 1px solid var(--ink-200);
            background: var(--surface-secondary);
            color: var(--brand-primary);
            font-size: .875rem;
            width: 26px;
            height: 26px;
            border-radius: .375rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, color .15s;
        }
        body.page-orders-show-orders button.toggle-btn:hover{
            background: var(--brand-primary);
            color: #fff;
            border-color: var(--brand-primary);
        }
        /* Custom Dropdown Styles */
        body.page-orders-show-orders .custom-dropdown{
            position: relative;
            display: inline-block;
            min-width: 140px;
        }
        body.page-orders-show-orders .custom-dropdown .dropdown-trigger{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 8px 12px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        body.page-orders-show-orders .custom-dropdown .dropdown-trigger:hover{
            border-color: #999;
        }
        body.page-orders-show-orders .custom-dropdown.open .dropdown-trigger{
            border-color: #666;
        }
        body.page-orders-show-orders .custom-dropdown .dropdown-menu{
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
        }
        body.page-orders-show-orders .custom-dropdown.open .dropdown-menu{
            display: block;
        }
        body.page-orders-show-orders .custom-dropdown .dropdown-option{
            display: block;
            width: 100%;
            padding: 8px 12px;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }
        body.page-orders-show-orders .custom-dropdown .dropdown-option:hover{
            background: #f5f5f5;
        }
        body.page-orders-show-orders .custom-dropdown .dropdown-option.selected{
            background: #e3f2fd;
            font-weight: 500;
        }
        body.page-orders-show-orders .custom-dropdown .hidden-select{
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 0;
            height: 0;
        }
    

/* ==========================================================
   Template: orders/user_orders.html (page-orders-user-orders)
   ========================================================== */

    body.page-orders-user-orders .user-card{
        transition: transform 0.3s;
        border-radius: 7px;
    }

    body.page-orders-user-orders .user-card:hover{
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    body.page-orders-user-orders .status-pill{
        display: inline-block;
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
        font-weight: 600;
        border-radius: 42px;
        margin-right: 4px;
    }


/* ==========================================================
   Template: payment_success.html (page-payment-success)
   ========================================================== */

        body.page-payment-success *,
body.page-payment-success *::before,
body.page-payment-success *::after{ box-sizing: border-box; margin: 0; padding: 0; }

        body.page-payment-success{
            --green:       #02542d;
            --green-light: #16a34a;
            --green-pale:  #dcfce7;
            --ink-50:      #f8fafc;
            --ink-100:     #f1f5f9;
            --ink-200:     #e2e8f0;
            --ink-400:     #94a3b8;
            --ink-500:     #64748b;
            --ink-600:     #475569;
            --ink-700:     #334155;
            --ink-800:     #1e293b;
            --amber:       #d97706;
            --amber-pale:  #fef3c7;
        }

        body.page-payment-success{
            min-height: 100vh;
            background: #f0fdf4;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            overflow-x: hidden;
        }

        /* ── Confetti canvas (sits behind everything) ── */
        body.page-payment-success #confettiCanvas{
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        /* ── Card ── */
        body.page-payment-success .ps-card{
            position: relative;
            z-index: 1;
            width: min(600px, 100%);
            background: #fff;
            border-radius: 1.25rem;
            box-shadow: 0 20px 60px rgba(2, 84, 45, .13), 0 4px 16px rgba(0,0,0,.06);
            overflow: hidden;
            animation: payment-success--cardIn .55s cubic-bezier(.22,1,.36,1) both;
        }
        @keyframes payment-success--cardIn {
            from { opacity:0; transform: translateY(32px) scale(.97); }
            to   { opacity:1; transform: translateY(0)   scale(1);    }
        }

        /* ── Top accent bar ── */
        body.page-payment-success .ps-card::before{
            content: "";
            display: block;
            height: 5px;
            background: linear-gradient(90deg, var(--green) 0%, #22c55e 100%);
        }

        /* ── Hero section ── */
        body.page-payment-success .ps-hero{
            padding: 2.5rem 2rem 1.75rem;
            text-align: center;
            background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
            border-bottom: 1px solid var(--ink-200);
        }

        /* Animated checkmark circle */
        body.page-payment-success .ps-circle{
            width: 88px;
            height: 88px;
            border-radius: 50%;
            background: var(--green-pale);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.25rem;
            position: relative;
            animation: payment-success--circlePop .5s .2s cubic-bezier(.22,1,.36,1) both;
        }
        @keyframes payment-success--circlePop {
            from { opacity:0; transform: scale(.4); }
            to   { opacity:1; transform: scale(1);  }
        }
        /* Spinning ring around circle */
        body.page-payment-success .ps-circle::before{
            content: "";
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: var(--green-light);
            border-right-color: var(--green-light);
            animation: payment-success--spinRing .7s .15s ease-out both;
        }
        @keyframes payment-success--spinRing {
            from { transform: rotate(-90deg); opacity:0; }
            to   { transform: rotate(270deg); opacity:1; }
        }

        /* SVG checkmark draw animation */
        body.page-payment-success .ps-check-svg{
            width: 44px;
            height: 44px;
            animation: payment-success--svgIn .3s .55s ease both;
        }
        @keyframes payment-success--svgIn {
            from { opacity:0; transform: scale(.6); }
            to   { opacity:1; transform: scale(1);  }
        }
        body.page-payment-success .ps-check-path{
            stroke: var(--green-light);
            stroke-width: 3.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            stroke-dasharray: 50;
            stroke-dashoffset: 50;
            animation: payment-success--drawCheck .45s .6s ease forwards;
        }
        @keyframes payment-success--drawCheck {
            to { stroke-dashoffset: 0; }
        }

        /* Pending state icon */
        body.page-payment-success .ps-pending-icon{
            font-size: 2.2rem;
            color: var(--amber);
        }

        body.page-payment-success .ps-circle-checking{
            background: var(--amber-pale);
        }
        body.page-payment-success .ps-circle-checking::before{
            border-color: transparent;
            border-top-color: var(--amber);
            animation: payment-success--continuousSpin .9s linear infinite;
        }
        body.page-payment-success .ps-checking-icon{
            color: var(--amber);
            font-size: 2rem;
            animation: payment-success--continuousSpin 1s linear infinite;
        }
        body.page-payment-success .ps-circle-failed{
            background: #fee2e2;
        }
        body.page-payment-success .ps-circle-failed::before{
            border-color: rgba(220, 38, 38, .25);
            animation: none;
        }
        body.page-payment-success .ps-failed-icon{
            color: #dc2626;
            font-size: 2.2rem;
        }
        @keyframes payment-success--continuousSpin {
            to { transform: rotate(360deg); }
        }

        body.page-payment-success .ps-hero-title{
            font-size: 1.45rem;
            font-weight: 800;
            color: var(--ink-800);
            letter-spacing: -.025em;
            margin-bottom: .5rem;
            animation: payment-success--fadeUp .4s .75s ease both;
        }
        body.page-payment-success .ps-hero-title.pending{ color: #92400e; }
        body.page-payment-success .ps-hero-title.checking{ color: #92400e; }
        body.page-payment-success .ps-hero-title.failed{ color: #991b1b; }

        body.page-payment-success .ps-hero-sub{
            font-size: .85rem;
            color: var(--ink-500);
            line-height: 1.65;
            max-width: 440px;
            margin: 0 auto;
            animation: payment-success--fadeUp .4s .85s ease both;
        }
        @keyframes payment-success--fadeUp {
            from { opacity:0; transform: translateY(10px); }
            to   { opacity:1; transform: translateY(0);    }
        }

        /* Status pill */
        body.page-payment-success .ps-status-pill{
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            margin-top: .875rem;
            padding: .3rem .85rem;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .03em;
            text-transform: uppercase;
            animation: payment-success--fadeUp .4s .9s ease both;
        }
        body.page-payment-success .ps-status-pill.success{ background: var(--green-pale); color: var(--green); }
        body.page-payment-success .ps-status-pill.pending{ background: var(--amber-pale); color: var(--amber); }
        body.page-payment-success .ps-status-pill.checking{ background: var(--amber-pale); color: var(--amber); }
        body.page-payment-success .ps-status-pill.failed{ background: #fee2e2; color: #b91c1c; }
        body.page-payment-success .ps-status-pill i{ font-size: .7rem; }

        /* ── Details grid ── */
        body.page-payment-success .ps-details{
            padding: 1.5rem 2rem;
            animation: payment-success--fadeUp .4s .95s ease both;
        }
        body.page-payment-success .ps-details-label{
            font-size: .68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--ink-400);
            margin-bottom: .875rem;
        }
        body.page-payment-success .ps-grid{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: .625rem;
        }
        body.page-payment-success .ps-cell{
            background: var(--ink-50);
            border: 1px solid var(--ink-200);
            border-radius: .625rem;
            padding: .75rem 1rem;
            transition: border-color .15s, box-shadow .15s;
        }
        body.page-payment-success .ps-cell:hover{
            border-color: rgba(2, 84, 45, .2);
            box-shadow: 0 2px 8px rgba(2, 84, 45, .07);
        }
        body.page-payment-success .ps-cell-key{
            display: block;
            font-size: .65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: var(--ink-400);
            margin-bottom: .3rem;
        }
        body.page-payment-success .ps-cell-val{
            font-size: .88rem;
            font-weight: 700;
            color: var(--ink-800);
            overflow-wrap: anywhere;
        }
        body.page-payment-success .ps-cell-val.highlight{ color: var(--green); }

        /* ── Footer actions ── */
        body.page-payment-success .ps-footer{
            display: flex;
            gap: .625rem;
            padding: 1.25rem 2rem;
            border-top: 1px solid var(--ink-200);
            background: var(--ink-50);
            animation: payment-success--fadeUp .4s 1.05s ease both;
        }
        body.page-payment-success .ps-btn{
            flex: 1;
            min-height: 42px;
            border-radius: .625rem;
            padding: .6rem 1rem;
            font-size: .82rem;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            border: none;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s, opacity .15s;
        }
        body.page-payment-success .ps-btn:hover{ transform: translateY(-1px); }
        body.page-payment-success .ps-btn:active{ transform: translateY(0); }
        body.page-payment-success .ps-btn-outline{
            background: #fff;
            color: var(--ink-700);
            border: 1px solid var(--ink-200);
            box-shadow: 0 1px 3px rgba(0,0,0,.06);
        }
        body.page-payment-success .ps-btn-outline:hover{ border-color: var(--green); color: var(--green); box-shadow: 0 3px 10px rgba(2,84,45,.1); }
        body.page-payment-success .ps-btn-solid{
            background: linear-gradient(135deg, var(--green) 0%, #16a34a 100%);
            color: #fff;
            box-shadow: 0 3px 12px rgba(2, 84, 45, .3);
        }
        body.page-payment-success .ps-btn-solid:hover{ box-shadow: 0 6px 18px rgba(2, 84, 45, .35); }

        @media (max-width: 520px) {
            body.page-payment-success .ps-hero{ padding: 2rem 1.25rem 1.5rem; }
            body.page-payment-success .ps-details{ padding: 1.25rem; }
            body.page-payment-success .ps-grid{ grid-template-columns: 1fr; }
            body.page-payment-success .ps-footer{ flex-direction: column; padding: 1rem 1.25rem; }
            body.page-payment-success .ps-card::before{ height: 4px; }
        }
    

/* ==========================================================
   Template: payout_detail.html (page-payout-detail)
   ========================================================== */

    /* ==== Dashboard UI token set (mirrors campaigns/customer.html) ==== */
    body.page-payout-detail{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;

        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);

        --primary: var(--primary-green);
        --white: #ffffff;
    }

    /* ==== Page wrapper ==== */
    body.page-payout-detail .dashboard-container{
        margin: 0 auto;
        padding: .875rem .875rem 2.5rem;
        color: var(--text-700);
    }

    /* ==== Unified header card ==== */
    body.page-payout-detail .detail-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }

    body.page-payout-detail .detail-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: var(--primary-green-ghost);
        pointer-events: none;
        border-radius: var(--radius-xl);
    }

    body.page-payout-detail .detail-header-main{
        flex: 1 1 300px;
        min-width: 240px;
        position: relative;
        z-index: 1;
    }

    body.page-payout-detail #pageTitle{
        font-size: 1.55rem;
        font-weight: 800;
        margin: 0 0 .3rem 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -.01em;
    }

    body.page-payout-detail .page-subtitle{
        font-size: .75rem;
        color: var(--text-500);
        font-weight: 600;
        margin: 0;
        letter-spacing: .02em;
    }

    /* ==== Controls section (right side of header — all in one line) ==== */
    body.page-payout-detail .controls-section{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        padding: 6px 10px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    body.page-payout-detail .controls-grid{
        display: flex;
        gap: 6px;
        align-items: center;
    }

    body.page-payout-detail .search-container{
        position: relative;
        flex: 1;
        min-width: 160px;
    }

    body.page-payout-detail .search-icon{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .875rem;
        color: var(--text-500);
        pointer-events: none;
    }

    body.page-payout-detail .search-input{
        width: 100%;
        padding: 6px 10px 6px 32px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .75rem;
        transition: var(--transition-fast);
        outline: none;
        font-family: inherit;
    }

    body.page-payout-detail .search-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    /* ==== Buttons ==== */
    body.page-payout-detail .btn{
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.4rem 0.75rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: 0.7rem;
        text-decoration: none;
        border: 1px solid var(--border-200);
        cursor: pointer;
        transition: var(--transition-fast);
        font-family: inherit;
        background: var(--surface-white);
        color: var(--text-700);
    }

    body.page-payout-detail .btn:hover{
        background: var(--primary-green-light);
        border-color: var(--primary-green-light);
        color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-payout-detail .btn-primary{
        background: var(--gradient-primary);
        color: var(--white);
        box-shadow: var(--shadow-sm);
        border: none;
    }

    body.page-payout-detail .btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        color: var(--white);
    }

    body.page-payout-detail .btn-secondary{
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-xs);
    }

    body.page-payout-detail .btn-secondary:hover{
        background: var(--primary-green-light);
        transform: translateY(-1px);
        color: var(--primary-green);
        border-color: var(--primary-green-light);
    }

    body.page-payout-detail .btn:disabled{
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

    /* ==== Custom Dropdown (customer.html style) ==== */
    body.page-payout-detail .custom-dropdown{
        position: relative;
        width: 180px;
        z-index: 100;
    }

    body.page-payout-detail .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 6px 10px;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        color: var(--text-700);
        font-weight: 600;
        font-size: .75rem;
        cursor: pointer;
        transition: var(--transition-fast);
        outline: none;
        width: 100%;
        font-family: inherit;
    }

    body.page-payout-detail .dropdown-trigger:hover{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-payout-detail .dropdown-trigger:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-payout-detail .dropdown-trigger.active{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        background: var(--primary-green-ghost);
    }

    body.page-payout-detail .dropdown-arrow{
        transition: var(--transition-fast);
        color: var(--primary-green);
        font-size: .75rem;
    }

    body.page-payout-detail .dropdown-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-payout-detail .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--transition-fast);
        max-height: 260px;
    }

    body.page-payout-detail .custom-dropdown .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        overflow-y: auto;
    }

    body.page-payout-detail .dropdown-option{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--text-700);
        font-size: .75rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
    }

    body.page-payout-detail .dropdown-option:hover{
        background: var(--primary-green-light);
        color: var(--primary-green-dark);
    }

    body.page-payout-detail .dropdown-option.selected{
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-weight: 600;
    }

    body.page-payout-detail select.hidden-select{ display: none; }

    /* ==== KPI Stat Cards ==== */
    body.page-payout-detail .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 0 0 14px;
    }

    body.page-payout-detail .stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        position: relative;
        overflow: hidden;
    }

    body.page-payout-detail .stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green-light);
    }

    body.page-payout-detail .stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-payout-detail .stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-payout-detail .stat-value{
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ==== Skeleton Loader ==== */
    body.page-payout-detail .skeleton{
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: payout-detail--shimmer 1.5s infinite;
        border-radius: .375rem;
        height: 1rem;
        width: 100%;
    }

    body.page-payout-detail .skeleton.small{ width: 60%; }
    body.page-payout-detail .skeleton.medium{ width: 80%; }

    @keyframes payout-detail--shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    body.page-payout-detail .skeleton-row{
        cursor: default !important;
        pointer-events: none;
    }

    body.page-payout-detail .skeleton-row:hover{
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    /* ==== Data table shell ==== */
    body.page-payout-detail .table-container{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    body.page-payout-detail .table-scroll-wrapper{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-payout-detail .table-scroll-wrapper::-webkit-scrollbar{ height: 8px; }
    body.page-payout-detail .table-scroll-wrapper::-webkit-scrollbar-track{ background: var(--surface-gray-100); border-radius: .375rem; }
    body.page-payout-detail .table-scroll-wrapper::-webkit-scrollbar-thumb{ background: var(--primary-green); border-radius: .375rem; }

    body.page-payout-detail .custom-table{
        width: 100%;
        border-collapse: collapse;
        font-size: .875rem;
    }

    body.page-payout-detail .custom-table thead th{
        background: var(--primary-green-dark);
        color: #fff;
        border: none;
        font-weight: 600;
        font-size: .72rem;
        padding: .75rem 1rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .045em;
        white-space: nowrap;
        vertical-align: middle;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    body.page-payout-detail .custom-table thead th:hover{ background: var(--primary-green); }

    body.page-payout-detail .custom-table tbody tr{
        transition: var(--transition-fast);
        border-bottom: 1px solid var(--border-200);
    }

    body.page-payout-detail .custom-table tbody tr:nth-child(even){ background: var(--surface-gray-50); }

    body.page-payout-detail .custom-table tbody tr:hover:not(.skeleton-row):not(.empty-row){
        background: var(--primary-green-ghost);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    body.page-payout-detail .custom-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        text-align: left;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-payout-detail .custom-table td:first-child{
        font-weight: 400;
        color: inherit;
    }

    body.page-payout-detail .custom-table td a{
        color: var(--primary-green);
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition-fast);
    }

    body.page-payout-detail .custom-table td a:hover{ text-decoration: underline; }

    /* ==== Table footer & pagination (customer.html style) ==== */
    body.page-payout-detail .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
    }

    body.page-payout-detail .pagination{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-payout-detail .pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-payout-detail .pagination-btn:hover:not(.disabled):not(.active){
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-payout-detail .pagination-btn.active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-payout-detail .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
    }

    /* ==== Status Badges ==== */
    body.page-payout-detail .status-badge{
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    body.page-payout-detail .status-pending{ background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
    body.page-payout-detail .status-completed{ background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
    body.page-payout-detail .status-processing{ background: rgba(59,130,246,.15); color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }
    body.page-payout-detail .status-failed{ background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

    /* ==== Action button in table ==== */
    body.page-payout-detail .action-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-sm);
        font-size: .85rem;
        cursor: pointer;
        transition: var(--transition-fast);
        text-decoration: none;
    }

    body.page-payout-detail .action-btn:hover{
        background: var(--primary-green);
        color: var(--white);
        border-color: var(--primary-green);
        transform: translateY(-1px);
        text-decoration: none;
    }

    /* ==== Empty state ==== */
    body.page-payout-detail .empty-state{
        text-align: center;
        padding: 48px 16px;
        color: var(--text-500);
    }

    body.page-payout-detail .empty-state i{ font-size: 3rem; color: var(--primary-green); margin-bottom: 16px; display: block; }
    body.page-payout-detail .empty-state h3{ font-size: 1.25rem; font-weight: 600; color: var(--text-700); margin-bottom: 8px; }
    body.page-payout-detail .empty-state p{ color: var(--text-500); margin: 0; }

    body.page-payout-detail .empty-row td{
        text-align: center;
        padding: 3rem 1.5rem !important;
        color: var(--text-500);
    }

    /* ==== Animations ==== */
    body.page-payout-detail .fade-in{ animation: payout-detail--fadeIn .4s ease-out; }

    @keyframes payout-detail--fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: none; }
    }

    /* ==== A11y focus ==== */
    body.page-payout-detail .btn:focus,
body.page-payout-detail .search-input:focus,
body.page-payout-detail .dropdown-trigger:focus,
body.page-payout-detail .dropdown-option:focus,
body.page-payout-detail .pagination-btn:focus,
body.page-payout-detail .stat-card:focus{
        outline: 2px solid var(--primary-green);
        outline-offset: 2px;
    }

    /* ==== Mobile responsive ==== */
    @media (max-width: 768px) {
        body.page-payout-detail .dashboard-container{ padding: 0.75rem; }
        body.page-payout-detail .controls-section{ min-width: unset; width: 100%; }
        body.page-payout-detail .controls-grid{ flex-direction: column; gap: 8px; }
        body.page-payout-detail .search-container{ min-width: unset; }
        body.page-payout-detail .custom-dropdown{ width: 100%; }
        body.page-payout-detail .controls-grid{ flex-wrap: wrap; }
        body.page-payout-detail .custom-table{ font-size: .8125rem; }
        body.page-payout-detail .custom-table td,
body.page-payout-detail .custom-table th{ padding: 10px 8px; }
    }

    @media (max-width: 576px) {
        body.page-payout-detail .dashboard-container{ padding: 0.5rem; }

        body.page-payout-detail .detail-header-card{
            padding: .75rem;
            gap: .75rem;
            margin-bottom: 0.75rem;
        }
        body.page-payout-detail .detail-header-main{ min-width: unset; }
        body.page-payout-detail #pageTitle{ font-size: 1.125rem; margin-bottom: .25rem; }
        body.page-payout-detail .page-subtitle{ font-size: .7rem; }

        body.page-payout-detail .controls-section{
            padding: .5rem;
            width: 100%;
            border-radius: .75rem;
        }
        body.page-payout-detail .controls-grid{
            gap: .5rem;
            flex-direction: row;
        }
        body.page-payout-detail .search-container{ flex: 1; min-width: 0; }
        body.page-payout-detail .search-input{
            font-size: .8125rem;
            padding: .5rem .5rem .5rem 2rem;
            border-radius: .5rem;
            height: 36px;
        }
        body.page-payout-detail .search-icon{ left: .5rem; font-size: .875rem; }

        body.page-payout-detail .custom-dropdown{ width: 100%; }
        body.page-payout-detail .dropdown-trigger{
            padding: .5rem .5rem;
            font-size: .7rem;
            height: 36px;
            border-radius: .5rem;
            gap: 4px;
        }
        body.page-payout-detail .dropdown-arrow{ font-size: .7rem; }
        body.page-payout-detail .custom-dropdown .dropdown-menu{ width: 180px; }
        body.page-payout-detail .dropdown-option{ font-size: .7rem; padding: .5rem .75rem; }

        body.page-payout-detail .controls-grid{ flex-wrap: wrap; }
        body.page-payout-detail .controls-grid .btn{ padding: .3rem .5rem; font-size: .6rem; }

        body.page-payout-detail .stats-grid{
            margin: .5rem 0 .75rem;
            gap: .5rem;
            grid-template-columns: 1fr;
            justify-items: center;
        }
        body.page-payout-detail .stat-card{
            padding: .75rem .5rem;
            gap: .5rem;
        }
        body.page-payout-detail .stat-card .stat-label{ font-size: .55rem; margin-bottom: 0; }
        body.page-payout-detail .stat-card .stat-value{ font-size: 1.1rem; }
        body.page-payout-detail .stat-card .stat-icon{ width: 32px; height: 32px; font-size: .95rem; border-radius: 8px; }

        body.page-payout-detail .table-container{ border-radius: .75rem; }
        body.page-payout-detail .custom-table{ font-size: .75rem; min-width: 700px; }
        body.page-payout-detail .custom-table thead th{ padding: .75rem .5rem; font-size: .7rem; }
        body.page-payout-detail .custom-table td{ padding: .75rem .5rem; font-size: .75rem; }

        body.page-payout-detail .table-footer{
            padding: .75rem;
            font-size: .7rem;
            flex-direction: column;
            gap: .75rem;
            align-items: stretch;
        }
        body.page-payout-detail #infoBox{ text-align: center; }
        body.page-payout-detail .pagination{ justify-content: center; }
        body.page-payout-detail .pagination-btn{ min-width: 2rem; padding: .35rem .5rem; font-size: .75rem; }
    }


/* ==========================================================
   Template: place_orders.html (page-place-orders)
   ========================================================== */

        /* Custom Dropdown Styles */
        body.page-place-orders .custom-dropdown{
            position: relative;
            width: 100%;
        }
        body.page-place-orders .custom-dropdown .dropdown-trigger{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.375rem 0.75rem;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            cursor: pointer;
            font-size: 1rem;
            color: #212529;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        body.page-place-orders .custom-dropdown .dropdown-trigger:hover{
            border-color: #86b7fe;
        }
        body.page-place-orders .custom-dropdown.open .dropdown-trigger{
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        body.page-place-orders .custom-dropdown .dropdown-menu{
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow-y: auto;
            z-index: 1000;
            display: none;
        }
        body.page-place-orders .custom-dropdown.open .dropdown-menu{
            display: block;
        }
        body.page-place-orders .custom-dropdown .dropdown-option{
            display: block;
            width: 100%;
            padding: 0.5rem 0.75rem;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            color: #212529;
            transition: background 0.15s;
        }
        body.page-place-orders .custom-dropdown .dropdown-option:hover{
            background: #f8f9fa;
        }
        body.page-place-orders .custom-dropdown .dropdown-option.selected{
            background: rgba(13, 110, 253, 0.1);
            color: #0d6efd;
            font-weight: 500;
        }
        body.page-place-orders .custom-dropdown .hidden-select{
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 0;
            height: 0;
        }
    

/* ==========================================================
   Template: product_detail.html (page-product-detail)
   ========================================================== */

/* ============================================================
   Product Detail — Clean 2-Column Bento
   ============================================================ */

body.page-product-detail .pd-wrap{ padding: .75rem; }

/* Toast */
body.page-product-detail .pd-toast{
    position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999;
    padding: .6rem 1rem; border-radius: .5rem; font-size: .78rem; font-weight: 600;
    opacity: 0; transform: translateX(.75rem); pointer-events: none;
    transition: all .3s ease; box-shadow: 0 4px 16px rgba(0,0,0,.18); min-width: 180px;
}
body.page-product-detail .pd-toast.show{ opacity: 1; transform: translateX(0); pointer-events: auto; }
body.page-product-detail .pd-toast.success{ background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); color: #fff; }
body.page-product-detail .pd-toast.error{ background: linear-gradient(90deg, #ef4444, #b91c1c); color: #fff; }
body.page-product-detail .pd-toast.info{ background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); color: #fff; }

/* Skeleton */
body.page-product-detail .pd-skeleton{
    background: linear-gradient(90deg, var(--ink-200,#e5e7eb) 25%, var(--ink-100,#f3f4f6) 50%, var(--ink-200,#e5e7eb) 75%);
    background-size: 200% 100%; animation: product-detail--pd-shimmer 1.4s infinite; border-radius: .3rem; display: inline-block;
}
@keyframes product-detail--pd-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ============================================================
   BUTTONS
   ============================================================ */
body.page-product-detail .pd-btn{
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .82rem; border-radius: .5rem;
    font-size: .73rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--ink-200); text-decoration: none;
    transition: all .18s ease; background: var(--surface-primary); color: var(--ink-600);
    white-space: nowrap; line-height: 1;
}
body.page-product-detail .pd-btn i{ font-size: .8rem; }
body.page-product-detail .pd-btn:hover{ background: var(--ink-100); color: var(--ink-800); border-color: var(--ink-300); text-decoration: none; }
body.page-product-detail .pd-btn-primary{
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff !important; border-color: transparent;
}
body.page-product-detail .pd-btn-primary:hover{
    transform: translateY(-1px); box-shadow: 0 4px 14px rgba(2,84,45,.3);
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff !important; border-color: transparent;
}
body.page-product-detail .pd-btn-back:hover{ color: var(--brand-primary); border-color: rgba(2,84,45,.25); background: rgba(2,84,45,.05); }
body.page-product-detail .pd-btn-icon{ padding: .42rem .52rem; }

/* ============================================================
   TOP BAR
   ============================================================ */
body.page-product-detail .pd-topbar{
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .9rem;
    padding: 1rem 1.15rem;
    margin-bottom: .75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: start;
}

body.page-product-detail .pd-topbar-imgblock{ display: flex; flex-direction: column; gap: .4rem; }
body.page-product-detail .pd-topbar-img{
    width: 78px; height: 78px;
    border-radius: .65rem; overflow: hidden; flex-shrink: 0;
    background: var(--ink-100); border: 1.5px solid var(--ink-200);
    cursor: pointer; position: relative;
}
body.page-product-detail .pd-topbar-img img{ width: 100%; height: 100%; object-fit: cover; display: none; }
body.page-product-detail .pd-img-avatar{
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff; font-weight: 800; font-size: 1.4rem;
}
body.page-product-detail .pd-zoom-overlay{
    position: absolute; inset: 0; background: rgba(0,0,0,.42);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: .18s; color: #fff; font-size: .7rem; font-weight: 600; gap: .25rem;
}
body.page-product-detail .pd-topbar-img:hover .pd-zoom-overlay{ opacity: 1; }
body.page-product-detail .pd-thumbs-strip{ display: flex; gap: .3rem; flex-wrap: wrap; max-width: 78px; }
body.page-product-detail .pd-thumb{
    width: 34px; height: 34px; border-radius: .35rem;
    object-fit: cover; cursor: pointer; border: 2px solid transparent;
    transition: all .15s ease; background: var(--ink-100);
}
body.page-product-detail .pd-thumb:hover,
body.page-product-detail .pd-thumb.active{ border-color: var(--brand-primary); transform: scale(1.06); }

body.page-product-detail .pd-topbar-info{ min-width: 0; }
body.page-product-detail .pd-topbar-name{
    font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin: 0 0 .22rem; line-height: 1.25;
}
body.page-product-detail .pd-topbar-meta{
    font-size: .7rem; color: var(--ink-500); font-weight: 500;
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .3rem;
}
body.page-product-detail .pd-topbar-meta i{ font-size: .65rem; }

body.page-product-detail .pd-cat-path{ display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin-bottom: .35rem; }
body.page-product-detail .pd-cat-crumb{
    font-size: .67rem; font-weight: 600;
    background: rgba(2,84,45,.08); color: var(--brand-primary);
    padding: .1rem .42rem; border-radius: 20px; border: 1px solid rgba(2,84,45,.14);
}
body.page-product-detail .pd-cat-crumb.last{ background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
body.page-product-detail .pd-cat-sep{ color: var(--ink-300); font-size: .6rem; }

body.page-product-detail .pd-topbar-pricerow{ display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .2rem; }
body.page-product-detail .pd-topbar-price{ font-size: 1.1rem; font-weight: 800; color: var(--brand-primary); line-height: 1; }
body.page-product-detail .pd-topbar-pricesub{ font-size: .65rem; color: var(--ink-400); font-weight: 500; }
body.page-product-detail .pd-stars-row{ display: flex; align-items: center; gap: .15rem; }
body.page-product-detail .pd-star-icon{ font-size: .6rem; color: var(--ink-200); }
body.page-product-detail .pd-star-icon.filled{ color: #f59e0b; }
body.page-product-detail .pd-rating-val{ font-size: .7rem; color: var(--ink-500); font-weight: 600; }
body.page-product-detail .pd-stock-badge{
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .55rem; border-radius: 20px; font-size: .67rem; font-weight: 700;
}
body.page-product-detail .pd-stock-in{ background: rgba(2,84,45,.1);  color: var(--brand-primary); border: 1px solid rgba(2,84,45,.2); }
body.page-product-detail .pd-stock-out{ background: rgba(220,53,69,.1); color: #dc3545;             border: 1px solid rgba(220,53,69,.2); }

body.page-product-detail .pd-topbar-actions{ display: flex; flex-direction: column; gap: .45rem; align-items: flex-end; }
body.page-product-detail .pd-topbar-btnrow{ display: flex; gap: .35rem; }
body.page-product-detail .pd-type-label{ font-size: .67rem; color: var(--ink-400); text-align: right; }
body.page-product-detail .pd-type-label strong{ color: var(--ink-700); }
body.page-product-detail .pd-active-dot{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; margin-right: .25rem; }
body.page-product-detail .pd-inactive-dot{ background: #dc3545; }

/* ============================================================
   2-COLUMN BENTO
   ============================================================ */
body.page-product-detail .pd-bento{
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: .75rem;
    align-items: start;
    margin-bottom: .75rem;
}
body.page-product-detail .pd-bento-left{ display: flex; flex-direction: column; gap: .65rem; }
body.page-product-detail .pd-bento-right{ display: flex; flex-direction: column; gap: .65rem; }

/* ============================================================
   INVENTORY METRICS STRIP (top of right column)
   ============================================================ */
body.page-product-detail .pd-inv-strip{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .55rem;
}
body.page-product-detail .pd-inv-metric{
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .8rem;
    padding: .75rem .6rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
body.page-product-detail .pd-inv-metric-icon{
    width: 28px; height: 28px; border-radius: .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .35rem; font-size: .8rem;
}
body.page-product-detail .pd-inv-metric-icon{ background: rgba(2,84,45,.1); color: var(--brand-primary); }
body.page-product-detail .pd-inv-metric-val{ font-size: 1.25rem; font-weight: 800; line-height: 1; color: var(--ink-800); display: block; }
body.page-product-detail .pd-inv-metric-lbl{ font-size: .62rem; color: var(--ink-400); font-weight: 600; margin-top: .18rem; text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   CARD
   ============================================================ */
body.page-product-detail .pd-card{
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .8rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
body.page-product-detail .pd-card-hdr{
    display: flex; align-items: center; gap: .48rem;
    padding: .52rem .78rem;
    background: var(--ink-50, #f9fafb);
    border-bottom: 1px solid var(--ink-100);
    color: var(--ink-600);
    font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
body.page-product-detail .pd-hdr-icon{
    width: 19px; height: 19px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-radius: .3rem; color: #fff; font-size: .63rem;
}
body.page-product-detail .pd-card-body{ padding: .6rem .78rem; }

/* KV rows */
body.page-product-detail .pd-kv{
    display: flex; justify-content: space-between; align-items: center;
    padding: .28rem 0; border-bottom: 1px solid var(--ink-100); gap: .5rem;
}
body.page-product-detail .pd-kv:last-child{ border-bottom: none; padding-bottom: 0; }
body.page-product-detail .pd-kv-k{ font-size: .68rem; color: var(--ink-500); font-weight: 500; white-space: nowrap; }
body.page-product-detail .pd-kv-v{ font-size: .7rem; color: var(--ink-700); font-weight: 600; text-align: right; }
body.page-product-detail .pd-kv-v.accent{ color: var(--brand-primary); }
body.page-product-detail .pd-kv-v.green{ color: #16a34a; }
body.page-product-detail .pd-kv-v.red{ color: #dc3545; }
body.page-product-detail .pd-kv-v.muted{ color: var(--ink-400); font-weight: 400; }

/* ============================================================
   DESCRIPTION
   ============================================================ */
body.page-product-detail .pd-desc{
    font-size: .76rem; color: var(--ink-600); line-height: 1.65;
    background: rgba(2,84,45,.03);
    border-radius: .45rem;
    padding: .6rem .7rem;
    border: 1px solid rgba(2,84,45,.07);
    overflow-wrap: anywhere;
}
body.page-product-detail .pd-desc-clamped{
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    max-height: none;
}
body.page-product-detail .pd-chips{ display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .45rem; }
body.page-product-detail .pd-chip{
    font-size: .63rem; font-weight: 600;
    background: rgba(2,84,45,.08); color: var(--brand-primary);
    padding: .12rem .42rem; border-radius: 20px; border: 1px solid rgba(2,84,45,.12);
    transition: all .12s;
}
body.page-product-detail .pd-chip:hover{ background: var(--brand-primary); color: #fff; }

/* ============================================================
   VARIANT TABLE
   ============================================================ */
body.page-product-detail .pd-var-wrap{ overflow-x: auto; }
body.page-product-detail .pd-variant-tbl{ width: 100%; border-collapse: collapse; font-size: .7rem; }
body.page-product-detail .pd-variant-tbl th{
    background: rgba(2,84,45,.07); color: var(--brand-primary);
    padding: .28rem .5rem; font-weight: 700; text-align: left;
    border-bottom: 1px solid rgba(2,84,45,.14); white-space: nowrap;
}
body.page-product-detail .pd-variant-tbl td{ padding: .25rem .5rem; border-bottom: 1px solid var(--ink-100); color: var(--ink-700); vertical-align: middle; }
body.page-product-detail .pd-variant-tbl tr:last-child td{ border-bottom: none; }
body.page-product-detail .pd-variant-tbl tr:hover td{ background: rgba(2,84,45,.03); }
body.page-product-detail .pd-var-badge{
    display: inline-flex; align-items: center;
    padding: .08rem .38rem; border-radius: 20px;
    font-size: .63rem; font-weight: 600;
    background: rgba(2,84,45,.09); color: var(--brand-primary); white-space: nowrap;
}
body.page-product-detail .pd-var-badge.out{ background: rgba(220,53,69,.08); color: #dc3545; }
body.page-product-detail .pd-var-attr{ font-size: .63rem; color: var(--ink-500); }

/* ============================================================
   CATEGORIES
   ============================================================ */
body.page-product-detail .pd-pref-item{
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem 0; border-bottom: 1px solid var(--ink-100); gap: .4rem;
}
body.page-product-detail .pd-pref-item:last-child{ border-bottom: none; padding-bottom: 0; }
body.page-product-detail .pd-pref-k{ font-size: .67rem; color: var(--ink-400); font-weight: 500; }
body.page-product-detail .pd-pref-v{ font-size: .7rem; color: var(--brand-primary); font-weight: 700; text-align: right; }

/* ============================================================
   PROPERTY / AMENITIES
   ============================================================ */
body.page-product-detail .pd-prop-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
body.page-product-detail .pd-prop-item{
    display: flex; flex-direction: column; padding: .35rem .5rem;
    background: rgba(2,84,45,.04); border-radius: .4rem; border: 1px solid var(--ink-100);
}
body.page-product-detail .pd-prop-k{ font-size: .62rem; color: var(--ink-400); font-weight: 500; }
body.page-product-detail .pd-prop-v{ font-size: .7rem; color: var(--ink-700); font-weight: 600; }
body.page-product-detail .pd-amenity-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
body.page-product-detail .pd-amenity{ display: flex; align-items: center; gap: .35rem; font-size: .7rem; color: var(--ink-700); padding: .2rem 0; }
body.page-product-detail .pd-amenity i{ color: var(--brand-primary); font-size: .75rem; }

/* ============================================================
   LOGISTICS TAGS
   ============================================================ */
body.page-product-detail .pd-log-tags{ display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .35rem; }
body.page-product-detail .pd-log-tag{
    font-size: .62rem; font-weight: 600;
    background: rgba(2,84,45,.08); color: var(--brand-primary);
    padding: .1rem .4rem; border-radius: .3rem; border: 1px solid rgba(2,84,45,.12);
}

/* ============================================================
   DISCOUNTS & PRODUCT INFORMATION
   ============================================================ */
body.page-product-detail .pd-offers-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; }
body.page-product-detail .pd-offer{
    position: relative; overflow: hidden;
    padding: .65rem .7rem; border-radius: .6rem;
    background: linear-gradient(145deg, rgba(2,84,45,.07), rgba(34,197,94,.03));
    border: 1px solid rgba(2,84,45,.15);
}
body.page-product-detail .pd-offer::before{
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: #16a34a;
}
body.page-product-detail .pd-offer.inactive{ opacity: .68; filter: saturate(.7); }
body.page-product-detail .pd-offer.inactive::before{ background: var(--ink-400); }
body.page-product-detail .pd-offer-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
body.page-product-detail .pd-offer-value{ color: var(--brand-primary); font-size: .9rem; font-weight: 800; line-height: 1.2; }
body.page-product-detail .pd-offer-status{
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .12rem .38rem; border-radius: 20px;
    background: rgba(22,163,74,.1); color: #15803d;
    font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
body.page-product-detail .pd-offer-status.inactive{ background: var(--ink-100); color: var(--ink-500); }
body.page-product-detail .pd-offer-desc{ margin-top: .28rem; color: var(--ink-700); font-size: .7rem; font-weight: 600; }
body.page-product-detail .pd-offer-meta{ display: flex; flex-wrap: wrap; gap: .25rem .55rem; margin-top: .38rem; }
body.page-product-detail .pd-offer-meta span{ color: var(--ink-500); font-size: .62rem; }
body.page-product-detail .pd-offer-meta i{ color: var(--brand-primary); margin-right: .16rem; }

body.page-product-detail .pd-details-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .4rem; }
body.page-product-detail .pd-detail-item{
    min-width: 0; padding: .45rem .55rem;
    background: rgba(2,84,45,.035); border: 1px solid var(--ink-100); border-radius: .45rem;
}
body.page-product-detail .pd-detail-k{ display: block; color: var(--ink-400); font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; }
body.page-product-detail .pd-detail-v{ display: block; margin-top: .12rem; color: var(--ink-700); font-size: .7rem; font-weight: 600; overflow-wrap: anywhere; }

/* ============================================================
   SECONDARY SECTIONS
   ============================================================ */
body.page-product-detail .pd-secondary{ display: flex; flex-direction: column; gap: .65rem; }
body.page-product-detail .pd-faq-item{ border: 1px solid var(--ink-100); border-radius: .5rem; margin-bottom: .35rem; overflow: hidden; }
body.page-product-detail .pd-faq-item:last-child{ margin-bottom: 0; }
body.page-product-detail .pd-faq-q{
    padding: .48rem .7rem; font-size: .73rem; font-weight: 600;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    background: rgba(2,84,45,.03); transition: .15s;
}
body.page-product-detail .pd-faq-q:hover{ background: rgba(2,84,45,.07); }
body.page-product-detail .pd-faq-q i{ transition: transform .18s; }
body.page-product-detail .pd-faq-a{ padding: 0 .7rem; font-size: .72rem; color: var(--ink-600); max-height: 0; overflow: hidden; transition: max-height .2s, padding .2s; }
body.page-product-detail .pd-faq-item.open .pd-faq-a{ max-height: 200px; padding: .4rem .7rem; }
body.page-product-detail .pd-faq-item.open .pd-faq-q i{ transform: rotate(180deg); }

body.page-product-detail .pd-related-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: .5rem; }
body.page-product-detail .pd-related-card{ border: 1px solid var(--ink-200); border-radius: .5rem; overflow: hidden; transition: .15s; }
body.page-product-detail .pd-related-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
body.page-product-detail .pd-related-card a{ display: block; color: inherit; text-decoration: none; }
body.page-product-detail .pd-related-img{ height: 72px; background: var(--ink-100); overflow: hidden; }
body.page-product-detail .pd-related-img img{ width: 100%; height: 100%; object-fit: cover; }
body.page-product-detail .pd-related-info{ padding: .3rem .4rem; }
body.page-product-detail .pd-related-name{ font-size: .67rem; font-weight: 600; color: var(--ink-700); margin: 0 0 .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-product-detail .pd-related-price{ font-size: .68rem; color: var(--brand-primary); font-weight: 700; }

html[data-theme="dark"] body.page-product-detail .pd-offer,
html[data-theme="dark"] body.page-product-detail .pd-detail-item{
    background: rgba(34,197,94,.055);
    border-color: rgba(74,222,128,.16);
}
html[data-theme="dark"] body.page-product-detail .pd-offer-value,
html[data-theme="dark"] body.page-product-detail .pd-offer-meta i{
    color: #86efac;
}
html[data-theme="dark"] body.page-product-detail .pd-offer-desc,
html[data-theme="dark"] body.page-product-detail .pd-detail-v{
    color: #e5eee9;
}
html[data-theme="dark"] body.page-product-detail .pd-offer-meta span,
html[data-theme="dark"] body.page-product-detail .pd-detail-k{
    color: #9dafb6;
}
html[data-theme="dark"] body.page-product-detail .pd-offer-status{
    background: rgba(34,197,94,.14);
    color: #bbf7d0;
}
html[data-theme="dark"] body.page-product-detail .pd-offer-status.inactive{
    background: #1b2821;
    color: #a8b8af;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
    body.page-product-detail .pd-bento{ grid-template-columns: 1fr; }
    body.page-product-detail .pd-inv-strip{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    body.page-product-detail .pd-topbar{ grid-template-columns: auto 1fr; }
    body.page-product-detail .pd-topbar-actions{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 575px) {
    body.page-product-detail .pd-wrap{ padding: .5rem; }
    body.page-product-detail .pd-topbar{ grid-template-columns: 1fr; }
    body.page-product-detail .pd-topbar-imgblock{ flex-direction: row; align-items: center; }
    body.page-product-detail .pd-inv-strip{ grid-template-columns: 1fr 1fr 1fr; }
    body.page-product-detail .pd-prop-grid{ grid-template-columns: 1fr; }
    body.page-product-detail .pd-details-grid{ grid-template-columns: 1fr 1fr; }
    body.page-product-detail .pd-amenity-grid{ grid-template-columns: 1fr; }
}


/* ==========================================================
   Template: product_service.html (page-product-service)
   ========================================================== */

  /* ============================================================================
       PRODUCT MANAGEMENT - DASHBOARD MATCHING UI (mirrors upload_business_profile)
       ============================================================================ */

  /* Remap legacy vars to base.html design tokens */
  body.page-product-service .product-layout,
body.page-product-service .product-layout *{
    --primary: var(--brand-primary);
    --primary-light: var(--brand-primary);
    --primary-dark: var(--brand-secondary);
    --secondary: #4ade80;
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --accent: var(--ink-200);
    --text: var(--ink-800);
    --text-secondary: var(--ink-600);
    --text-muted: var(--ink-400);
    --bg-page: var(--surface-secondary);
    --bg-card: var(--surface-primary);
    --border: var(--ink-200);
    --border-light: var(--surface-secondary);
    --border-dark: var(--ink-300);
    --radius: .5rem;
    --radius-lg: .875rem;
    --shadow: var(--shadow-sm);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --gap: 1rem;
    --gap-sm: .75rem;
    --gap-xs: .375rem;
    --transition: var(--fast);
    --sidebar-width: 260px;
    accent-color: var(--brand-primary);
  }

  /* Progress Bar */
  body.page-product-service .progress-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ink-200);
    z-index: 1000;
    overflow: hidden;
  }

  body.page-product-service .progress-bar-custom{
    height: 100%;
    width: 0;
    background: var(--brand-primary);
    transition: width .4s var(--easing);
  }

  /* Layout */
  body.page-product-service .product-layout{
    display: flex;
    gap: 1rem;
    padding: .875rem;
    min-height: calc(100vh - 50px);
    margin: 0 auto;
  }

  /* Sidebar - matches bp-sidebar / sv-sidebar pattern */
  body.page-product-service .product-sidebar{
    width: 260px;
    min-width: 260px;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .875rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: .875rem;
    align-self: flex-start;
  }

  body.page-product-service .product-sidebar-header{
    padding: 1rem 1.25rem;
    /* border-bottom: 1px solid var(--ink-200);
        background: var(--surface-primary); */
    position: relative;
  }

  body.page-product-service .product-sidebar-header::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(2,84,45,.1), rgba(2,84,45,.03));
    pointer-events: none;
  }

  body.page-product-service .product-sidebar-title{
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    z-index: 1;
  }

  body.page-product-service .product-sidebar-title i{
    font-size: .9rem;
  }

  body.page-product-service .product-sidebar-subtitle{
    display: none;
  }

  /* Steps - matches bp-step-item pattern */
  body.page-product-service .product-steps{
    list-style: none;
    padding: 0;
    margin: 0;
  }

  body.page-product-service .step-item{
    display: flex;
    align-items: center;
    padding: .75rem 1.25rem;
    cursor: pointer;
    transition: var(--fast);
    font-weight: var(--font-weight-medium);
    font-size: .75rem;
    color: var(--ink-600);
    border-left: 3px solid transparent;
    background: var(--surface-primary);
  }

  body.page-product-service .step-item:last-child{
    border-bottom: none;
  }

  body.page-product-service .step-item i{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .75rem;
    font-size: .65rem;
    font-weight: var(--font-weight-bold);
    transition: var(--fast);
    flex-shrink: 0;
  }

  body.page-product-service .step-item:hover{
    background: rgba(2, 84, 45, 0.04);
    color: var(--brand-primary);
  }

  body.page-product-service .step-item:hover i{
    background: var(--brand-primary);
    color: var(--surface-primary);
  }

  body.page-product-service .step-item.active{
    background: rgba(2, 84, 45, 0.08);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--brand-primary);
  }

  body.page-product-service .step-item.active i{
    background: var(--brand-primary);
    color: var(--surface-primary);
  }

  /* Sidebar Actions */
  body.page-product-service .sidebar-actions{
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ink-200);
    background: var(--surface-secondary);
  }

  body.page-product-service .btn-save-main{
    width: 100%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: var(--surface-primary);
    border: none;
    padding: .625rem 1rem;
    border-radius: .5rem;
    font-weight: var(--font-weight-semibold);
    font-size: .75rem;
    cursor: pointer;
    transition: var(--fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    box-shadow: 0 2px 8px rgba(2,84,45,.25);
  }

  body.page-product-service .btn-save-main:hover{
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(2,84,45,.35);
  }

  /* Main Content - matches bp-main / sv-main pattern */
  body.page-product-service .product-main{
    flex: 1;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .875rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.page-product-service .product-main::-webkit-scrollbar{
    width: 6px;
  }

  body.page-product-service .product-main::-webkit-scrollbar-track{
    background: var(--surface-tertiary);
    border-radius: .375rem;
  }

  body.page-product-service .product-main::-webkit-scrollbar-thumb{
    background: var(--ink-300);
    border-radius: .375rem;
  }

  body.page-product-service .product-main::-webkit-scrollbar-thumb:hover{
    background: var(--brand-primary);
  }

  body.page-product-service .main-header{
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .9rem;
    margin-bottom: .75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  body.page-product-service .mh-left{
    display: flex; align-items: center; gap: .5rem;
    flex: 1; min-width: 0;
  }

  body.page-product-service .mh-icon{
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-radius: .45rem; color: #fff; font-size: .8rem;
  }

  body.page-product-service .mh-right{
    display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
  }

  body.page-product-service .main-title{
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.015em;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.page-product-service .btn-mh-save{
    width: 1.9rem; height: 1.9rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .45rem; font-size: .78rem; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff !important; border: none; cursor: pointer;
    box-shadow: 0 2px 6px rgba(2,84,45,.22);
    transition: all .18s ease;
  }
  body.page-product-service .btn-mh-save:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(2,84,45,.35); }

  /* Tab Cards */
  body.page-product-service .tab-card{
    display: none;
  }

  body.page-product-service .tab-card.active{
    display: block;
    animation: product-service--fadeIn .3s ease-out;
  }

  @keyframes product-service--fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body.page-product-service .card-title{ display: none !important; }
  body.page-product-service .card-title i{ display: none !important; }

  /* ============================================================================
       PRODUCT WORKSPACE UI REFINEMENTS
       ============================================================================ */
  body.page-product-service .product-sidebar-header{
    border-bottom: 1px solid var(--ink-200);
    background: var(--surface-primary);
  }

  body.page-product-service .step-item{
    position: relative;
    padding: .8rem 1.25rem;
  }

  body.page-product-service .step-item::before{
    content: attr(data-step);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .75rem;
    font-size: .65rem;
    font-weight: var(--font-weight-bold);
    transition: var(--fast);
    flex-shrink: 0;
  }

  body.page-product-service .step-item.active::before{
    background: var(--brand-primary);
    color: var(--surface-primary);
  }

  body.page-product-service .step-item.completed::before{
    content: "✓";
    background: #22c55e;
    color: var(--surface-primary);
  }

  body.page-product-service .step-label{
    display: block;
    line-height: 1.4;
  }

  body.page-product-service .main-title-group{ display: none; }
  body.page-product-service .main-eyebrow{ display: none; }
  body.page-product-service .main-subtitle{ display: none; }

  body.page-product-service .main-header-actions{
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-left: auto;
  }

  /* Icon-only button helpers */
  body.page-product-service .btn-icon{
    width: 2.1rem; height: 2.1rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .5rem; font-size: .85rem; flex-shrink: 0;
  }
  body.page-product-service .nav-buttons .prev-btn,
body.page-product-service .nav-buttons .next-btn{
    width: 2.2rem; height: 2.2rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .5rem; font-size: .9rem;
  }
  body.page-product-service .section-panel-header > div{ flex: 1; min-width: 0; }

  body.page-product-service .main-step-indicator{
    background: rgba(2,84,45,.08);
    color: var(--brand-primary);
    font-size: .67rem;
    font-weight: 700;
    padding: .22rem .6rem;
    border-radius: 20px;
    border: 1px solid rgba(2,84,45,.15);
    white-space: nowrap;
    letter-spacing: .02em;
  }

  body.page-product-service .tab-card{
    display: none;
  }

  body.page-product-service .tab-card.active{
    display: block;
    animation: product-service--fadeIn .3s ease-out;
  }

  body.page-product-service .tab-lead{
    display: none;
  }

  body.page-product-service .section-stack{
    display: flex;
    flex-direction: column;
    gap: .875rem;
  }

  body.page-product-service .section-panel{
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .875rem;
    padding: .95rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
  }

  body.page-product-service .section-panel-header{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: nowrap;
    margin: -.95rem -.95rem .9rem;
    padding: .55rem .95rem;
    background: var(--ink-50, #f9fafb);
    border-bottom: 1px solid var(--ink-200);
    border-radius: .875rem .875rem 0 0;
  }

  body.page-product-service .section-panel-title{
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    color: var(--ink-600);
    text-transform: uppercase;
    letter-spacing: .055em;
  }

  body.page-product-service .section-panel-subtitle{
    display: none;
  }

  body.page-product-service .section-badge{
    display: none;
  }

  body.page-product-service .section-split-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .875rem;
  }

  body.page-product-service .section-subpanel{
    padding: 0;
    border: 1px solid rgba(2,84,45,.14);
    border-radius: .75rem;
    background: rgba(2,84,45,.02);
    overflow: hidden;
  }

  body.page-product-service .section-subpanel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: nowrap;
    padding: .5rem .875rem;
    background: rgba(2,84,45,.05);
    border-bottom: 1px solid rgba(2,84,45,.1);
    margin-bottom: 0;
  }

  body.page-product-service .section-subpanel > *:not(.section-subpanel-header){
    padding: .875rem;
  }

  body.page-product-service .section-subpanel-title{
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: .045em;
  }

  body.page-product-service .section-subpanel-copy{
    display: none;
  }

  body.page-product-service .helper-card{
    display: none;
  }

  body.page-product-service .helper-card i{
    color: var(--brand-primary);
    font-size: .95rem;
    margin-top: .1rem;
  }

  body.page-product-service .helper-card p{
    margin: 0;
    font-size: .72rem;
    line-height: 1.6;
    color: var(--ink-700);
  }

  body.page-product-service .helper-card strong{
    color: var(--ink-800);
  }

  body.page-product-service .field-header,
body.page-product-service .section-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
  }

  body.page-product-service .section-toolbar{
    margin-top: .875rem;
  }

  body.page-product-service .section-note{
    display: none;
  }

  body.page-product-service .muted-link{
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
  }

  body.page-product-service .muted-link:hover{
    text-decoration: underline;
  }

  body.page-product-service .toggle-content{
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(2, 84, 45, 0.12);
    border-radius: .75rem;
    border-left: 1px solid rgba(2, 84, 45, 0.12);
  }

  body.page-product-service .toggle-group{
    min-height: 72px;
  }

  body.page-product-service .image-gallery{
    min-height: 152px;
  }

  body.page-product-service .variant-title-wrap{
    flex: 1;
    min-width: 0;
  }

  body.page-product-service .variant-meta-block{
    grid-column: 1 / -1;
    margin-top: .25rem;
    padding-top: .875rem;
    border-top: 1px solid var(--ink-200);
  }

  body.page-product-service .variant-action-row{
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }

  body.page-product-service .variant-attr-row{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: .625rem;
    align-items: center;
    margin-top: .625rem;
  }

  body.page-product-service .file-item-body,
body.page-product-service .field-row{
    display: flex;
    align-items: center;
    gap: .625rem;
    flex: 1;
    min-width: 0;
  }

  body.page-product-service .field-row>.form-control,
body.page-product-service .field-row>.form-select,
body.page-product-service .file-item-body>.form-control,
body.page-product-service .file-item-body>.form-select{
    flex: 1;
    min-width: 0;
  }

  body.page-product-service .main-header-actions .btn,
body.page-product-service .variant-action-row .btn{
    justify-content: center;
  }

  body.page-product-service .mobile-header-copy{
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
  }

  body.page-product-service .mobile-header-step{
    font-size: .7rem;
    color: var(--ink-500);
    font-weight: var(--font-weight-semibold);
  }

  body.page-product-service .variant-mode-panel.is-hidden,
body.page-product-service .variant-empty.is-hidden{
    display: none !important;
  }

  body.page-product-service .variant-section-shell{
    margin-top: .875rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
  }

  body.page-product-service .variant-simple-grid{
    margin-top: 0;
  }

  body.page-product-service .variant-simple-note{
    margin: 0 0 .875rem;
    font-size: .72rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-summary-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: .875rem;
  }

  body.page-product-service .variant-summary-card{
    padding: .875rem 1rem;
    border: 1px solid var(--ink-200);
    border-radius: .75rem;
    background: linear-gradient(180deg, rgba(2, 84, 45, 0.04), rgba(2, 84, 45, 0));
  }

  body.page-product-service .variant-summary-label{
    display: block;
    margin-bottom: .35rem;
    font-size: .68rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: var(--font-weight-semibold);
  }

  body.page-product-service .variant-summary-value{
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-table-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .875rem;
  }

  body.page-product-service .variant-table-copy{
    display: flex;
    flex-direction: column;
    gap: .18rem;
    min-width: 0;
  }

  body.page-product-service .variant-table-caption{
    margin: 0;
    font-size: .82rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-table-note{
    font-size: .7rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-option-shell{
    margin-bottom: .875rem;
  }

  body.page-product-service .variant-option-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
  }

  body.page-product-service .variant-option-card{
    padding: .9rem;
    border: 1px solid var(--ink-200);
    border-radius: .875rem;
    background: var(--surface-primary);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
  }

  body.page-product-service .variant-option-card-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
  }

  body.page-product-service .variant-option-name{
    margin: 0;
    font-size: .82rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-option-meta{
    display: inline-flex;
    margin-top: .22rem;
    font-size: .68rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-option-actions{
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
  }

  body.page-product-service .variant-option-values{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }

  body.page-product-service .variant-value-list{
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: .75rem;
  }

  body.page-product-service .variant-value-row{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
  }

  body.page-product-service .variant-option-select-grid{
    margin-top: .75rem;
  }

  body.page-product-service .variant-inline-note{
    margin: .5rem 0 0;
    font-size: .7rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-inline-error{
    margin: .625rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: .8rem;
    background: rgba(254, 242, 242, 0.92);
    color: #b91c1c;
    font-size: .74rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.45;
  }

  body.page-product-service .vvm-option-select.is-duplicate{
    border-color: rgba(239, 68, 68, 0.42);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
  }

  body.page-product-service .variant-table-shell{
    border: 1px solid var(--ink-200);
    border-radius: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--surface-primary);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.05);
  }

  body.page-product-service .variant-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
  }

  body.page-product-service .variant-table thead th{
    padding: .75rem 1rem;
    font-size: .72rem;
    font-weight: var(--font-weight-bold);
    color: #fff;
    background: var(--brand-primary);
    border-bottom: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .045em;
    vertical-align: middle;
    text-align: left;
  }

  body.page-product-service .variant-table tbody td{
    padding: .95rem .9rem;
    border-bottom: 1px solid var(--ink-200);
    vertical-align: middle;
    font-size: .8rem;
    color: var(--ink-700);
  }

  body.page-product-service .variant-table tbody tr:last-child td{
    border-bottom: none;
  }

  body.page-product-service .variant-table tbody tr:hover{
    background: rgba(2, 84, 45, 0.02);
  }

  body.page-product-service .variant-cell-main{
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 220px;
    width: 100%;
  }

  body.page-product-service .variant-thumb{
    width: 40px;
    height: 40px;
    border-radius: .7rem;
    overflow: hidden;
    background: var(--surface-secondary);
    border: 1px solid var(--ink-200);
    flex-shrink: 0;
  }

  body.page-product-service .variant-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.page-product-service .variant-thumb-fallback{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-400);
    font-size: .9rem;
  }

  body.page-product-service .variant-main-text{
    min-width: 0;
    flex: 1;
  }

  body.page-product-service .variant-row-title{
    display: block;
    font-size: .95rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
    word-break: break-word;
  }

  body.page-product-service .variant-row-subtitle{
    display: block;
    margin-top: .32rem;
    font-size: .72rem;
    color: var(--ink-500);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  body.page-product-service .variant-row-subtitle:empty{
    display: none;
  }

  body.page-product-service .variant-inline-input,
body.page-product-service .variant-inline-select{
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe1e7;
    border-radius: .85rem;
    background: #fff;
    font-size: .85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-800);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
  }

  body.page-product-service .variant-inline-input{
    padding: .55rem .8rem;
  }

  body.page-product-service .variant-inline-input.variant-inline-price,
body.page-product-service .variant-inline-input.variant-inline-stock{
    max-width: 120px;
    text-align: center;
  }

  body.page-product-service .variant-inline-select{
    padding: .55rem 2.1rem .55rem .8rem;
  }

  body.page-product-service .variant-chip-list{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  body.page-product-service .variant-chip{
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .28rem .5rem;
    border-radius: 999px;
    background: var(--surface-secondary);
    border: 1px solid var(--ink-200);
    font-size: .68rem;
    color: var(--ink-700);
    white-space: nowrap;
  }

  body.page-product-service .variant-chip strong{
    color: var(--ink-800);
    font-weight: var(--font-weight-semibold);
  }

  body.page-product-service .variant-metric{
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
    white-space: nowrap;
  }

  body.page-product-service .variant-empty{
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--ink-500);
    font-size: .78rem;
    background: var(--surface-secondary);
  }

  body.page-product-service .variant-empty i{
    display: block;
    font-size: 1.5rem;
    color: var(--ink-400);
    margin-bottom: .625rem;
  }

  body.page-product-service .variant-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--ink-200);
    background: var(--surface-secondary);
    flex-wrap: wrap;
  }

  body.page-product-service .variant-pagination.is-hidden{
    display: none;
  }

  body.page-product-service .variant-pagination-info{
    font-size: .72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-500);
  }

  body.page-product-service .variant-pagination-btns{
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body.page-product-service .variant-page-btn{
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    background: var(--surface-primary);
    color: var(--ink-700);
    font-size: .72rem;
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--fast);
  }

  body.page-product-service .variant-page-btn:hover:not(.disabled):not(.active){
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: rgba(2, 84, 45, 0.05);
  }

  body.page-product-service .variant-page-btn.active{
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--surface-primary);
  }

  body.page-product-service .variant-page-btn.disabled{
    opacity: .45;
    cursor: not-allowed;
    background: var(--surface-secondary);
  }

  body.page-product-service .variant-page-ellipsis{
    color: var(--ink-400);
    font-size: .78rem;
    padding: 0 .15rem;
  }

  body.page-product-service .variant-option-modal{
    width: min(760px, calc(100vw - 2rem));
  }

  body.page-product-service .variant-modal-overlay{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
  }

  body.page-product-service .variant-modal-overlay.active{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.page-product-service .variant-modal{
    width: min(960px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.28);
  }

  body.page-product-service .variant-modal-header,
body.page-product-service .variant-modal-footer{
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ink-200);
    background: var(--surface-primary);
  }

  body.page-product-service .variant-modal-footer{
    border-top: 1px solid var(--ink-200);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
  }

  body.page-product-service .variant-modal-title{
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-modal-subtitle{
    margin: .2rem 0 0;
    font-size: .72rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-modal-close{
    width: 34px;
    height: 34px;
    border-radius: .6rem;
    border: 1px solid var(--ink-200);
    background: var(--surface-primary);
    color: var(--ink-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--fast);
  }

  body.page-product-service .variant-modal-close:hover{
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background: rgba(2, 84, 45, 0.05);
  }

  body.page-product-service .variant-modal-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  body.page-product-service .variant-modal-body{
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
  }

  body.page-product-service .variant-modal-grid{
    margin-top: 0;
  }

  body.page-product-service .variant-modal-preview{
    width: 100%;
    min-height: 140px;
    border-radius: .875rem;
    border: 1px dashed var(--ink-300);
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  body.page-product-service .variant-modal-preview img{
    width: 100%;
    height: 140px;
    object-fit: cover;
  }

  body.page-product-service .variant-modal-preview span{
    font-size: .72rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-kv-sections{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
  }

  body.page-product-service .variant-kv-panel{
    border: 1px solid var(--ink-200);
    border-radius: .875rem;
    padding: .95rem;
    background: var(--surface-secondary);
  }

  body.page-product-service .variant-kv-note{
    margin: .5rem 0 0;
    font-size: .7rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-kv-list{
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: .75rem;
  }

  body.page-product-service .variant-kv-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
  }

  body.page-product-service .variant-kv-remove{
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    border: 1px solid var(--ink-200);
    background: var(--surface-primary);
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--fast);
  }

  body.page-product-service .variant-kv-remove:hover{
    background: rgba(239, 68, 68, 0.06);
    border-color: #ef4444;
  }

  body.page-product-service .variant-configured-content{
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.page-product-service .variant-workspace-panel{
    margin-bottom: 0;
  }

  body.page-product-service .variant-summary-panel{
    margin-bottom: 0;
  }

  body.page-product-service .variant-summary-list{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .875rem;
  }

  body.page-product-service .variant-summary-list.is-hidden{
    display: none;
  }

  body.page-product-service .variant-summary-row{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .9rem;
    border: 1px solid var(--ink-200);
    border-radius: .75rem;
    background: var(--surface-secondary);
  }

  body.page-product-service .variant-summary-name{
    min-width: 120px;
    font-size: .8rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-summary-values{
    flex: 1;
    font-size: .74rem;
    color: var(--ink-600);
    line-height: 1.55;
  }

  body.page-product-service .variant-table-toolbar-main{
    margin-bottom: .875rem;
  }

  body.page-product-service .variant-table-toolbar-actions{
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
  }

  body.page-product-service .variant-table-toolbar-actions .btn:disabled{
    background: var(--surface-secondary);
    border-color: var(--ink-200);
    color: var(--ink-400);
    opacity: 1;
  }

  body.page-product-service .variant-table-shell{
    border: 1px solid var(--ink-200);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.05);
    overflow: hidden;
  }

  body.page-product-service .variant-table-scroll-wrapper{
    overflow-x: auto;
    max-width: 100%;
  }

  body.page-product-service .variant-table-scroll-wrapper::-webkit-scrollbar{
    height: 8px;
  }

  body.page-product-service .variant-table-scroll-wrapper::-webkit-scrollbar-track{
    background: var(--surface-secondary);
    border-radius: .375rem;
  }

  body.page-product-service .variant-table-scroll-wrapper::-webkit-scrollbar-thumb{
    background: var(--brand-primary);
    border-radius: .375rem;
  }

  body.page-product-service .variant-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    font-size: .875rem;
  }

  body.page-product-service .variant-table thead th{
    background: var(--brand-primary);
    color: #fff;
    border: none;
    font-weight: var(--font-weight-bold);
    font-size: .72rem;
    padding: .75rem 1rem;
    white-space: nowrap;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .045em;
    vertical-align: middle;
  }

  body.page-product-service .variant-table thead th.variant-col-actions{
    width: 92px;
  }

  body.page-product-service .variant-table tbody tr{
    transition: var(--fast);
    border-bottom: 1px solid var(--ink-200);
  }

  body.page-product-service .variant-table tbody tr:nth-child(even){
    background: rgba(248, 250, 252, 0.95);
  }

  body.page-product-service .variant-table tbody tr:hover{
    background: rgba(2, 84, 45, 0.05);
  }

  body.page-product-service .variant-table tbody td{
    padding: .75rem 1rem;
    border: none;
    vertical-align: middle;
    text-align: left;
    font-size: .8125rem;
    color: #4b5563;
    font-weight: 400;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
  }

  body.page-product-service .variant-table .form-control,
body.page-product-service .variant-table .form-select{
    min-width: 0;
    padding: 0;
    font-size: inherit;
  }

  body.page-product-service .variant-image-cell{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    min-width: 92px;
  }

  body.page-product-service .variant-thumb{
    width: 46px;
    height: 46px;
    border-radius: .75rem;
    overflow: hidden;
    background: var(--surface-secondary);
    border: 1px solid var(--ink-200);
    flex-shrink: 0;
  }

  body.page-product-service .variant-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.page-product-service .variant-thumb-fallback{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-400);
    font-size: .95rem;
  }

  body.page-product-service .variant-thumb-select{
    width: 88px;
    min-height: 30px;
    padding: .22rem 1.4rem .22rem .45rem;
    font-size: .68rem;
    font-weight: var(--font-weight-semibold);
    border-radius: .6rem;
    text-align: center;
  }

  body.page-product-service .variant-main-text{
    min-width: 0;
    flex: 1;
  }

  body.page-product-service .variant-row-title{
    display: block;
    font-size: .9rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
    word-break: break-word;
  }

  body.page-product-service .variant-row-subtitle{
    display: block;
    margin-top: .25rem;
    font-size: .72rem;
    color: var(--ink-500);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  body.page-product-service .variant-row-subtitle:empty{
    display: none;
  }

  body.page-product-service .variant-details-cell{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }

  body.page-product-service .variant-details-cell .variant-detail-trigger{
    margin-top: 0;
  }

  body.page-product-service .variant-details-meta{
    font-size: .72rem;
    line-height: 1.45;
    color: var(--ink-500);
    word-break: break-word;
  }

  body.page-product-service .variant-sku{
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--ink-500);
    word-break: break-all;
  }

  body.page-product-service .variant-inline-input,
body.page-product-service .variant-inline-select{
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--ink-200);
    border-radius: .75rem;
    background: #fff;
    font-size: .84rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-800);
    transition: var(--fast);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65);
  }

  body.page-product-service .variant-inline-input:focus,
body.page-product-service .variant-inline-select:focus{
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
    outline: none;
  }

  body.page-product-service .variant-inline-input{
    padding: .55rem .8rem;
  }

  body.page-product-service .variant-inline-input.variant-inline-price,
body.page-product-service .variant-inline-input.variant-inline-stock{
    max-width: 130px;
    margin: 0 auto;
    text-align: center;
  }

  body.page-product-service .variant-inline-select{
    padding: .45rem 1.9rem .45rem .65rem;
  }

  body.page-product-service .variant-empty{
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--ink-500);
    font-size: .78rem;
    background: var(--surface-secondary);
  }

  body.page-product-service .variant-empty i{
    display: block;
    font-size: 1.5rem;
    color: var(--ink-400);
    margin-bottom: .625rem;
  }

  body.page-product-service .variant-pagination{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    background: var(--surface-primary);
    border-top: 1px solid var(--ink-200);
    flex-wrap: wrap;
  }

  body.page-product-service .variant-pagination.is-hidden{
    display: none;
  }

  body.page-product-service .variant-pagination-info{
    font-size: .8125rem;
    color: var(--ink-500);
    font-weight: var(--font-weight-medium);
  }

  body.page-product-service .variant-pagination-btns{
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
  }

  body.page-product-service .variant-page-btn{
    min-width: 2.25rem;
    text-align: center;
    padding: .4rem .6rem;
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    background: var(--surface-primary);
    color: var(--ink-700);
    font-weight: var(--font-weight-semibold);
    font-size: .8125rem;
    cursor: pointer;
    transition: var(--fast);
  }

  body.page-product-service .variant-page-btn:hover:not(.disabled){
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    transform: translateY(-1px);
  }

  body.page-product-service .variant-page-btn.active{
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
  }

  body.page-product-service .variant-page-btn.disabled{
    opacity: .45;
    cursor: not-allowed;
    background: var(--surface-secondary);
  }

  body.page-product-service .variant-page-ellipsis{
    color: var(--ink-400);
    font-size: .78rem;
    padding: 0 .15rem;
  }

  body.page-product-service .variant-builder-modal{
    width: min(1080px, calc(100vw - 2rem));
  }

  body.page-product-service .variant-details-modal{
    width: min(760px, calc(100vw - 2rem));
  }

  body.page-product-service .variant-details-headline{
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--ink-200);
    border-radius: .85rem;
    background: var(--surface-secondary);
    font-size: .9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-details-panel{
    margin-top: .5rem;
    margin-bottom: 0;
  }

  body.page-product-service .variant-details-rows{
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  body.page-product-service .variant-detail-trigger{
    margin-top: .45rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .62rem;
    border: 1px solid rgba(2, 84, 45, 0.18);
    border-radius: 999px;
    background: rgba(2, 84, 45, 0.06);
    color: var(--brand-primary);
    font-size: .72rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--fast);
  }

  body.page-product-service .variant-detail-trigger:hover{
    background: rgba(2, 84, 45, 0.1);
    border-color: rgba(2, 84, 45, 0.28);
  }

  body.page-product-service .variant-detail-trigger.has-details{
    background: rgba(2, 84, 45, 0.1);
  }

  body.page-product-service .variant-row-actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
  }

  body.page-product-service .variant-row-action-btn{
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ink-200);
    border-radius: .55rem;
    background: var(--surface-primary);
    color: var(--ink-600);
    font-size: .82rem;
    cursor: pointer;
    transition: var(--fast);
  }

  body.page-product-service .variant-row-action-btn:hover{
    background: var(--surface-secondary);
    color: var(--ink-800);
    border-color: var(--ink-300);
  }

  body.page-product-service .variant-row-action-btn.variant-row-delete:hover{
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
  }

  body.page-product-service .variant-value-add-modal{
    width: min(520px, calc(100vw - 2rem));
  }

  body.page-product-service .vvm-option-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
  }

  body.page-product-service .vvm-fields-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
  }

  body.page-product-service .vvm-attr-section{
    border-top: 1px solid var(--ink-200);
    padding-top: .75rem;
  }

  body.page-product-service .vvm-attr-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
  }

  body.page-product-service .vvm-attr-label{
    font-size: .78rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-600);
  }

  body.page-product-service .variant-option-summary{
    margin-bottom: .9rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(2, 84, 45, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
    border: 1px solid rgba(2, 84, 45, 0.12);
    border-radius: 1rem;
    box-shadow: 0 12px 28px rgb(15 23 42 / 0.05);
  }

  body.page-product-service .variant-option-summary-caption{
    margin: 0 0 .8rem;
    font-size: .78rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  body.page-product-service .variant-option-simple-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
  }

  body.page-product-service .variant-option-simple-row{
    border: 1px solid var(--ink-200);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 22px rgb(15 23 42 / 0.05);
  }

  body.page-product-service .variant-option-simple-row-inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: .95rem 1rem;
  }

  body.page-product-service .variant-option-simple-head{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }

  body.page-product-service .variant-option-simple-name{
    min-width: 0;
    padding: .38rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(2, 84, 45, 0.12);
    background: rgba(2, 84, 45, 0.08);
    color: var(--brand-primary);
    font-size: .74rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    word-break: break-word;
  }

  body.page-product-service .variant-option-simple-count{
    font-size: .7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-500);
    white-space: nowrap;
  }

  body.page-product-service .variant-option-simple-values{
    width: 100%;
  }

  body.page-product-service .variant-option-values-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }

  body.page-product-service .variant-option-card-empty{
    font-size: .74rem;
    color: var(--ink-500);
    font-style: italic;
  }

  body.page-product-service .variant-builder-layout{
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .95fr);
    gap: 1rem;
    align-items: start;
    min-height: 0;
  }

  body.page-product-service .variant-builder-sidebar,
body.page-product-service .variant-builder-form{
    border: 1px solid rgba(2, 84, 45, 0.12);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    min-height: 430px;
  }

  body.page-product-service .variant-builder-sidebar{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 430px;
    background: linear-gradient(180deg, rgba(245, 250, 247, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  }

  body.page-product-service .variant-builder-sidebar-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
  }

  body.page-product-service .variant-builder-section-kicker{
    display: inline-flex;
    align-items: center;
    padding: .28rem .58rem;
    border-radius: 999px;
    background: rgba(2, 84, 45, 0.08);
    color: var(--brand-primary);
    font-size: .66rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  body.page-product-service .variant-builder-sidebar-title{
    margin: .5rem 0 0;
    font-size: .98rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-builder-sidebar-copy{
    margin: .28rem 0 0;
    max-width: 46ch;
    font-size: .78rem;
    color: var(--ink-500);
    line-height: 1.5;
  }

  body.page-product-service .variant-builder-sidebar-actions{
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
  }

  body.page-product-service .variant-builder-sidebar-meta{
    display: inline-flex;
    align-items: center;
    padding: .42rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(2, 84, 45, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink-600);
    font-size: .73rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  body.page-product-service .variant-builder-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .75rem;
    max-height: min(420px, calc(100vh - 18rem));
    overflow-y: auto;
    padding-right: .2rem;
    align-content: start;
  }

  body.page-product-service .variant-builder-list::-webkit-scrollbar{
    width: 8px;
  }

  body.page-product-service .variant-builder-list::-webkit-scrollbar-track{
    background: rgba(148, 163, 184, 0.12);
    border-radius: 999px;
  }

  body.page-product-service .variant-builder-list::-webkit-scrollbar-thumb{
    background: rgba(2, 84, 45, 0.24);
    border-radius: 999px;
  }

  body.page-product-service .variant-builder-empty{
    grid-column: 1 / -1;
    min-height: 160px;
    padding: 1rem 1.1rem;
    border: 1px dashed rgba(2, 84, 45, 0.24);
    border-radius: .95rem;
    background: rgba(255, 255, 255, 0.84);
    font-size: .78rem;
    color: var(--ink-500);
    text-align: center;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.page-product-service .variant-builder-item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    min-height: 146px;
    padding: 1rem .95rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 1rem;
    background: var(--surface-primary);
    box-shadow: 0 10px 20px rgb(15 23 42 / 0.05);
    transition: var(--fast);
  }

  body.page-product-service .variant-builder-item:hover{
    border-color: rgba(2, 84, 45, 0.18);
    box-shadow: 0 12px 24px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
  }

  body.page-product-service .variant-builder-item.is-active{
    border-color: var(--brand-primary);
    background: linear-gradient(135deg, rgba(2, 84, 45, 0.05) 0%, var(--surface-primary) 100%);
    box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.08);
  }

  body.page-product-service .variant-builder-item-button{
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .75rem;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0 2.25rem 0 0;
    color: inherit;
    cursor: pointer;
  }

  body.page-product-service .variant-builder-item-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
  }

  body.page-product-service .variant-builder-item-name{
    display: block;
    font-size: .9rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
    line-height: 1.35;
  }

  body.page-product-service .variant-builder-item-count{
    display: inline-flex;
    align-items: center;
    padding: .28rem .58rem;
    border-radius: 999px;
    background: rgba(2, 84, 45, 0.09);
    color: var(--brand-primary);
    font-size: .68rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  body.page-product-service .variant-builder-item-values{
    display: flex;
    width: 100%;
    margin-top: 0;
  }

  body.page-product-service .variant-builder-item-chip-list{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-height: 60px;
    overflow: hidden;
    align-content: flex-start;
  }

  body.page-product-service .variant-builder-item-chip-list .variant-chip{
    background: #f8fafc;
    border-color: rgba(2, 84, 45, 0.12);
  }

  body.page-product-service .variant-builder-item-delete{
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ink-200);
    border-radius: .6rem;
    background: var(--surface-primary);
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--fast);
  }

  body.page-product-service .variant-builder-item-delete:hover{
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
  }

  body.page-product-service .variant-builder-form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
    min-height: 430px;
  }

  body.page-product-service .variant-builder-form-head{
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(2, 84, 45, 0.08);
  }

  body.page-product-service .variant-builder-form-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
  }

  body.page-product-service .variant-builder-form-action{
    width: 34px;
    height: 34px;
    border-radius: .65rem;
    border: 1px solid rgba(2, 84, 45, 0.16);
    background: var(--surface-primary);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--fast);
    flex: 0 0 auto;
  }

  body.page-product-service .variant-builder-form-action:hover{
    border-color: var(--brand-primary);
    background: rgba(2, 84, 45, 0.06);
  }

  body.page-product-service .variant-builder-save-btn{
    min-width: 168px;
    justify-content: center;
  }

  body.page-product-service .variant-builder-form-title{
    margin: .5rem 0 0;
    font-size: .98rem;
    font-weight: var(--font-weight-bold);
    color: var(--ink-800);
  }

  body.page-product-service .variant-builder-form-copy{
    margin: .32rem 0 0;
    max-width: 40ch;
    font-size: .78rem;
    color: var(--ink-500);
    line-height: 1.5;
  }

  body.page-product-service .variant-chip-input{
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    min-height: 52px;
    padding: .65rem .8rem;
    border: 1px solid var(--ink-200);
    border-radius: .9rem;
    background: #fff;
    cursor: text;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75);
  }

  body.page-product-service .variant-chip-input:focus-within{
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
  }

  body.page-product-service .variant-chip-list-editable{
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
  }

  body.page-product-service .variant-chip-list-editable:empty{
    display: none;
  }

  body.page-product-service .variant-chip.variant-chip-editable{
    padding-right: .32rem;
    background: rgba(2, 84, 45, 0.07);
    border-color: rgba(2, 84, 45, 0.12);
  }

  body.page-product-service .variant-chip.variant-chip-more{
    background: rgba(2, 84, 45, 0.08);
    border-color: rgba(2, 84, 45, 0.14);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
  }

  body.page-product-service .variant-chip.variant-chip-more strong{
    color: inherit;
  }

  body.page-product-service .variant-chip-remove{
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 999px;
    background: rgba(2, 84, 45, 0.08);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  body.page-product-service .variant-chip-field{
    flex: 1 1 180px;
    min-width: 160px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: .78rem;
    color: var(--ink-800);
  }

  body.page-product-service .variant-chip-field::placeholder{
    color: var(--ink-400);
  }

  body.page-product-service .variant-builder-note{
    margin: .45rem 0 0;
    font-size: .7rem;
    color: var(--ink-500);
  }

  body.page-product-service .variant-builder-field-note{
    margin: .45rem 0 0;
    font-size: .72rem;
    color: var(--ink-500);
    line-height: 1.5;
  }

  @media (max-width: 1199px) {
    body.page-product-service .variant-builder-layout{
      grid-template-columns: 1fr;
    }

    body.page-product-service .variant-builder-sidebar{
      min-height: 0;
    }

    body.page-product-service .variant-builder-list{
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }
  }

  @media (max-width: 991px) {
    body.page-product-service .variant-option-simple-list,
body.page-product-service .variant-builder-list{
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
  }

  @media (max-width: 767px) {
    body.page-product-service .variant-summary-row,
body.page-product-service .variant-builder-sidebar-head,
body.page-product-service .variant-builder-form-top,
body.page-product-service .variant-option-simple-head,
body.page-product-service .variant-builder-item-head{
      flex-direction: column;
      align-items: stretch;
    }

    body.page-product-service .variant-builder-sidebar-actions{
      width: 100%;
      justify-content: space-between;
    }

    body.page-product-service .variant-summary-name{
      min-width: 0;
    }

    body.page-product-service .variant-chip-field{
      min-width: 100%;
    }
  }

  /* Form Elements - matches bp-form / sv-form pattern */
  body.page-product-service .form-label{
    font-weight: var(--font-weight-semibold);
    color: var(--ink-700);
    margin-bottom: .375rem;
    font-size: .75rem;
    display: flex;
    align-items: center;
    gap: .375rem;
  }

  body.page-product-service .form-label i{
    color: var(--brand-primary);
    font-size: .7rem;
  }

  body.page-product-service .form-control,
body.page-product-service .form-select{
    width: 100%;
    padding: .625rem .875rem;
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    font-size: .75rem;
    font-family: var(--font-family-primary);
    transition: var(--fast);
    background: var(--surface-primary);
    color: var(--ink-700);
    outline: none;
    font-weight: var(--font-weight-medium);
  }

  body.page-product-service .form-control:focus,
body.page-product-service .form-select:focus{
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
  }

  body.page-product-service .form-control::placeholder{
    color: var(--ink-400);
  }

  /* Custom Dropdown Styles - matches sv-dropdown pattern */
  body.page-product-service .custom-dropdown{
    position: relative;
    width: 100%;
  }

  body.page-product-service .custom-dropdown.open{
    z-index: 100;
  }

  body.page-product-service .custom-dropdown .dropdown-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .625rem .875rem;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    cursor: pointer;
    font-size: .75rem;
    color: var(--ink-700);
    font-weight: var(--font-weight-medium);
    transition: var(--fast);
    outline: none;
  }

  body.page-product-service .custom-dropdown .dropdown-trigger:hover{
    border-color: var(--ink-300);
  }

  body.page-product-service .custom-dropdown.open .dropdown-trigger{
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
  }

  body.page-product-service .custom-dropdown .dropdown-menu{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
  }

  body.page-product-service .custom-dropdown.open .dropdown-menu{
    display: block;
  }

  /* .section-panel sets overflow:hidden (for its rounded corners), which clips
     any dropdown menu that extends past the panel's bottom edge — e.g. Selling
     Type, the last field in the Shipping panel. Lift the clip only while a
     dropdown inside is actually open, so normal panel clipping is unaffected. */
  body.page-product-service .section-panel:has(.custom-dropdown.open){
    overflow: visible;
  }

  body.page-product-service .custom-dropdown .dropdown-option{
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .875rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    color: var(--ink-700);
    font-weight: var(--font-weight-medium);
    transition: var(--fast);
  }

  body.page-product-service .custom-dropdown .dropdown-option:hover{
    background: rgba(2, 84, 45, 0.06);
    color: var(--brand-primary);
  }

  body.page-product-service .custom-dropdown .dropdown-option.selected{
    background: rgba(2, 84, 45, 0.1);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
  }

  /* In dark mode the light-theme brand green lands at ~1.6:1 against the dark
     menu surface, making the hovered/selected option unreadable. Same treatment
     already used for .page-live-agent. */
  html[data-theme="dark"] body.page-product-service .custom-dropdown .dropdown-option:hover,
html[data-theme="dark"] body.page-product-service .custom-dropdown .dropdown-option.selected{
    background: rgba(8, 73, 40, 0.16);
    color: #eff9f2;
  }

  body.page-product-service .custom-dropdown .hidden-select{
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
  }

  /* Searchable Dropdown variant (Related Products) */
  body.page-product-service .custom-dropdown.comp-dropdown .dropdown-menu{
    max-height: 320px;
    overflow: hidden;
    padding: 0;
    flex-direction: column;
  }

  body.page-product-service .custom-dropdown.comp-dropdown.open .dropdown-menu{
    display: flex;
  }

  body.page-product-service .custom-dropdown .dropdown-search-wrap{
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--surface-primary);
    border-bottom: 1px solid var(--ink-200);
    z-index: 1;
  }

  body.page-product-service .custom-dropdown .dropdown-search-wrap > i{
    color: var(--ink-400);
    font-size: .8rem;
  }

  body.page-product-service .custom-dropdown .dropdown-search{
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: .75rem;
    color: var(--ink-700);
    font-weight: var(--font-weight-medium);
    padding: .25rem 0;
  }

  body.page-product-service .custom-dropdown .dropdown-search::placeholder{
    color: var(--ink-400);
  }

  body.page-product-service .custom-dropdown .dropdown-options-list{
    flex: 1;
    overflow-y: auto;
    max-height: 260px;
  }

  body.page-product-service .custom-dropdown .dropdown-empty{
    padding: .85rem .875rem;
    text-align: center;
    font-size: .75rem;
    color: var(--ink-400);
  }

  body.page-product-service .custom-dropdown.comp-dropdown .dropdown-trigger .dropdown-label{
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-400);
  }

  body.page-product-service .custom-dropdown.comp-dropdown.has-value .dropdown-trigger .dropdown-label{
    color: var(--ink-700);
  }

  body.page-product-service .comp-item{
    align-items: flex-start;
  }

  body.page-product-service .comp-item .file-icon,
body.page-product-service .comp-item>.remove-item{
    margin-top: .125rem;
  }

  body.page-product-service .comp-item-fields{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
    min-width: 0;
  }

  body.page-product-service .comp-reason{
    font-size: .75rem;
    background: var(--surface-primary);
  }

  body.page-product-service .discount-mention-wrap{
    position: relative;
  }

  body.page-product-service .discount-product-menu{
    position: fixed;
    z-index: 10000;
    display: none;
    max-height: 240px;
    overflow: hidden;
    padding: 0;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .625rem;
    box-shadow: var(--shadow-lg);
  }

  body.page-product-service .discount-product-menu.open{
    display: flex;
    flex-direction: column;
  }

  body.page-product-service .discount-product-search-wrap{
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    background: var(--surface-primary);
    border-bottom: 1px solid var(--ink-200);
  }

  body.page-product-service .discount-product-search-wrap i{
    color: var(--ink-400);
    font-size: .75rem;
  }

  body.page-product-service .discount-product-search{
    flex: 1;
    min-width: 0;
    padding: .375rem .5rem;
    color: var(--ink-700);
    background: var(--surface-secondary);
    border: 1px solid var(--ink-200);
    border-radius: .4rem;
    outline: none;
    font-size: .75rem;
  }

  body.page-product-service .discount-product-search:focus{
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(2, 84, 45, .1);
    background: var(--surface-primary);
  }

  body.page-product-service .discount-product-options{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .375rem;
  }

  body.page-product-service .discount-product-option{
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--ink-700);
    font-size: .75rem;
    font-weight: var(--font-weight-medium);
    text-align: left;
    cursor: pointer;
  }

  body.page-product-service .discount-product-option:hover,
body.page-product-service .discount-product-option:focus{
    color: var(--brand-primary);
    background: rgba(2, 84, 45, .08);
    outline: none;
  }

  body.page-product-service .discount-product-option i{
    color: var(--brand-primary);
  }

  body.page-product-service .discount-product-empty{
    padding: .75rem;
    color: var(--ink-400);
    font-size: .75rem;
    text-align: center;
  }

  body.page-product-service .discount-product-chips{
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
  }

  body.page-product-service .discount-product-chip{
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .35rem .55rem;
    color: var(--brand-primary);
    background: rgba(2, 84, 45, .08);
    border: 1px solid rgba(2, 84, 45, .18);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: var(--font-weight-semibold);
  }

  body.page-product-service .discount-product-chip button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  body.page-product-service .form-control-lg{
    padding: .75rem 1rem;
    font-size: .875rem;
  }

  body.page-product-service .form-textarea{
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
  }

  /* Toggle Switch */
  body.page-product-service .toggle-group{
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background: var(--surface-secondary);
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    transition: var(--fast);
  }

  body.page-product-service .toggle-group:hover{
    border-color: var(--brand-primary);
    background: rgba(2, 84, 45, 0.02);
  }

  body.page-product-service .toggle-switch{
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
  }

  body.page-product-service .toggle-switch input{
    opacity: 0;
    width: 0;
    height: 0;
  }

  body.page-product-service .toggle-slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ink-300);
    border-radius: 24px;
    transition: var(--fast);
  }

  body.page-product-service .toggle-slider:before{
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  body.page-product-service .toggle-switch input:checked+.toggle-slider{
    background: var(--brand-primary);
  }

  body.page-product-service .toggle-switch input:checked+.toggle-slider:before{
    transform: translateX(20px);
  }

  body.page-product-service .toggle-label{
    flex: 1;
  }

  body.page-product-service .toggle-label-title{
    font-weight: var(--font-weight-semibold);
    color: var(--ink-700);
    font-size: .8rem;
  }

  body.page-product-service .toggle-label-desc{
    font-size: .7rem;
    color: var(--ink-500);
  }

  body.page-product-service .toggle-content{
    display: none;
    margin-top: .75rem;
    padding: .75rem;
    background: var(--surface-primary);
    border-radius: .5rem;
    border-left: 3px solid var(--brand-primary);
  }

  body.page-product-service .toggle-content.active{
    display: block;
  }

  /* Product Behavior — 3-column card grid */
  body.page-product-service .behavior-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  body.page-product-service .behavior-col{
    display: flex;
    flex-direction: column;
  }

  body.page-product-service .behavior-col .toggle-group{
    flex: 1;
  }

  body.page-product-service .behavior-col .toggle-content{
    border-radius: 0 0 .5rem .5rem;
    border-top: none;
    border-left: none;
    border: 1px solid var(--ink-200);
    border-top: 3px solid var(--brand-primary);
    margin-top: 0;
  }

  @media (max-width: 900px) {
    body.page-product-service .behavior-grid{
      grid-template-columns: 1fr;
    }
  }

  /* Image Gallery - matches sv-image-gallery */
  body.page-product-service .image-gallery{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: .75rem;
    padding: .75rem;
    background: var(--surface-secondary);
    border: 2px dashed var(--ink-300);
    border-radius: var(--radius);
    min-height: 120px;
  }

  body.page-product-service .image-item{
    position: relative;
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
    transition: var(--fast);
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
  }

  body.page-product-service .image-item:hover{
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border-color: var(--brand-primary);
    z-index: 10;
  }

  body.page-product-service .image-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.page-product-service .image-remove{
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: #ef4444;
    color: var(--surface-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: var(--transition);
  }

  body.page-product-service .image-item:hover .image-remove{
    opacity: 1;
  }

  body.page-product-service .image-add{
    aspect-ratio: 1;
    border: 2px dashed var(--brand-primary);
    background: rgba(2, 84, 45, 0.05);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--fast);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
    font-size: .65rem;
  }

  body.page-product-service .image-add:hover{
    background: rgba(2, 84, 45, 0.1);
    transform: scale(1.05);
  }

  body.page-product-service .image-add i{
    font-size: 1.5rem;
    margin-bottom: 4px;
  }

  /* Editor - matches sv-editor pattern */
  body.page-product-service .editor-wrapper{
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--surface-primary);
  }

  body.page-product-service .editor-toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .5rem;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--ink-200);
  }

  body.page-product-service .editor-btn-group{
    display: flex;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .375rem;
    overflow: hidden;
  }

  body.page-product-service .editor-btn{
    width: 28px;
    height: 28px;
    border: none;
    background: var(--surface-primary);
    color: var(--ink-500);
    cursor: pointer;
    transition: var(--fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    border-right: 1px solid var(--ink-200);
  }

  body.page-product-service .editor-btn:last-child{
    border-right: none;
  }

  body.page-product-service .editor-btn:hover{
    background: var(--brand-primary);
    color: var(--surface-primary);
  }

  body.page-product-service .editor-content{
    min-height: 100px;
    max-height: 250px;
    overflow-y: auto;
    padding: .75rem;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--ink-700);
  }

  body.page-product-service .editor-content:focus{
    outline: none;
  }

  body.page-product-service .editor-content:empty:before{
    content: attr(data-placeholder);
    color: var(--ink-400);
  }

  /* Tag Pills */
  body.page-product-service .tags-display{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: 10px;
  }

  body.page-product-service .tag-pill{
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    background: rgba(2, 84, 45, 0.1);
    color: var(--brand-primary);
    border: 1px solid rgba(2, 84, 45, 0.2);
    border-radius: 1.5rem;
    font-size: .7rem;
    font-weight: var(--font-weight-semibold);
    transition: var(--fast);
  }

  body.page-product-service .tag-pill:hover{
    background: var(--brand-primary);
    color: var(--surface-primary);
    border-color: var(--brand-primary);
  }

  body.page-product-service .tag-remove{
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Variant Cards */
  body.page-product-service .variant-list{
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  body.page-product-service .variant-card{
    background: var(--surface-secondary);
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    padding: .75rem;
    transition: var(--fast);
  }

  body.page-product-service .variant-card:hover{
    border-color: var(--brand-primary);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  body.page-product-service .variant-header{
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-sm);
  }

  body.page-product-service .variant-image-preview{
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    overflow: hidden;
    background: white;
    border: 1px solid var(--border);
    flex-shrink: 0;
  }

  body.page-product-service .variant-image-preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* File List */
  body.page-product-service .file-list{
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  body.page-product-service .file-item{
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem;
    background: var(--surface-secondary);
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    transition: var(--fast);
  }

  body.page-product-service .file-item:hover{
    border-color: var(--brand-primary);
    background: var(--surface-primary);
  }

  body.page-product-service .file-icon{
    width: 24px;
    height: 24px;
    background: rgba(2, 84, 45, 0.1);
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: .75rem;
    flex-shrink: 0;
  }

  body.page-product-service .file-info{
    flex: 1;
    min-width: 0;
  }

  body.page-product-service .file-link{
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: .75rem;
    transition: var(--fast);
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: .375rem;
  }

  body.page-product-service .file-link:hover{
    color: var(--brand-secondary);
    text-decoration: underline;
  }

  /* ============================================================================
       PRODUCT PREFERENCE MODAL - Multi-step wizard (category-themed)
       ============================================================================ */
  body.page-product-service .pref-modal-overlay{
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body.page-product-service .pref-modal-overlay.active{
    display: flex;
    align-items: center;
    justify-content: center;
    animation: product-service--fadeIn .25s ease-out;
  }

  body.page-product-service .pref-modal{
    background: var(--surface-primary, #fff);
    border-radius: 1rem;
    border: 1px solid var(--ink-200, #e5e7eb);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    width: min(94vw, 920px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: product-service--prefSlideUp .3s ease-out;
  }

  @keyframes product-service--prefSlideUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Header */
  body.page-product-service .pref-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    /* background: var(--brand-primary, #02542D); */
    /* color: #fff; */
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-200);
    background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
  }

  body.page-product-service .pref-modal-header h3{
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  body.page-product-service .pref-level-jump{
    position: relative;
    margin-left: auto;
    margin-right: .5rem;
    min-width: 220px;
  }

  body.page-product-service .pref-level-jump-btn{
    width: 100%;
    min-height: 38px;
    border: 1.5px solid rgba(2, 84, 45, .22);
    border-radius: .7rem;
    background: var(--surface-primary, #fff);
    color: var(--ink-800, #1e293b);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .45rem .7rem .45rem .85rem;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }

  body.page-product-service .pref-level-jump-btn:hover,
body.page-product-service .pref-level-jump.open .pref-level-jump-btn{
    border-color: var(--brand-primary, #02542D);
    background: rgba(2, 84, 45, .05);
  }

  body.page-product-service .pref-level-jump-menu{
    display: none;
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 3;
    width: min(320px, 80vw);
    max-height: 320px;
    overflow-y: auto;
    padding: .45rem;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: .8rem;
    background: var(--surface-primary, #fff);
    box-shadow: 0 18px 38px -18px rgb(15 23 42 / .35);
  }

  body.page-product-service .pref-level-jump.open .pref-level-jump-menu{
    display: block;
  }

  body.page-product-service .pref-level-option{
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: .55rem;
    padding: .55rem .65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    text-align: left;
    color: var(--ink-700, #334155);
    cursor: pointer;
  }

  body.page-product-service .pref-level-option:hover{
    background: rgba(2, 84, 45, .07);
  }

  body.page-product-service .pref-level-option.active{
    background: rgba(2, 84, 45, .11);
    color: var(--brand-primary, #02542D);
    font-weight: 700;
  }

  body.page-product-service .pref-level-option.disabled{
    opacity: .45;
    cursor: not-allowed;
  }

  body.page-product-service .pref-level-option-main{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }

  body.page-product-service .pref-level-option-title,
body.page-product-service .pref-level-jump-label{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page-product-service .pref-level-option-value{
    color: var(--ink-500, #64748b);
    font-size: .68rem;
    font-weight: 600;
  }

  body.page-product-service .pref-modal-header h3 .pref-step-badge{
    background: rgba(255, 255, 255, .2);
    padding: .15rem .55rem;
    border-radius: 1rem;
    font-size: .7rem;
    font-weight: 600;
  }

  body.page-product-service .pref-modal-close{
    background: #02542d;
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: background .2s;
  }

  body.page-product-service .pref-modal-close:hover{
    background: #e3ece8;
    color: #02542d;
  }

  /* Breadcrumb trail */
  body.page-product-service .pref-breadcrumb{
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .65rem 1.25rem;
    background: var(--surface-secondary, #f8fafc);
    border-bottom: 1px solid var(--ink-200, #e5e7eb);
    font-size: .7rem;
    color: var(--ink-500, #64748b);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    flex-shrink: 0;
  }

  body.page-product-service .pref-breadcrumb::-webkit-scrollbar{
    height: 4px;
  }

  body.page-product-service .pref-breadcrumb::-webkit-scrollbar-thumb{
    background: var(--ink-300, #cbd5e1);
    border-radius: 2px;
  }

  body.page-product-service .pref-breadcrumb-item{
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: 999px;
    background: var(--surface-primary, #fff);
    padding: .28rem .6rem;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink-600, #475569);
  }

  body.page-product-service .pref-breadcrumb-item.clickable{
    cursor: pointer;
    color: var(--brand-primary, #02542D);
  }

  body.page-product-service .pref-breadcrumb-item.clickable:hover{
    border-color: var(--brand-primary, #02542D);
    background: rgba(2, 84, 45, .07);
  }

  body.page-product-service .pref-breadcrumb-item.current{
    border-color: var(--brand-primary, #02542D);
    background: rgba(2, 84, 45, .12);
    color: var(--brand-primary, #02542D);
    font-weight: 700;
  }

  body.page-product-service .pref-breadcrumb-item.upcoming{
    opacity: .7;
  }

  body.page-product-service .pref-breadcrumb-sep{
    color: var(--ink-300, #cbd5e1);
    font-size: .65rem;
  }

  body.page-product-service .pref-breadcrumb-more{
    border: 1px dashed var(--ink-300, #cbd5e1);
    background: transparent;
    color: var(--ink-500, #64748b);
    border-radius: 999px;
    padding: .15rem .45rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  body.page-product-service .pref-breadcrumb-more:hover{
    border-color: var(--brand-primary, #02542D);
    color: var(--brand-primary, #02542D);
  }

  /* Body */
  body.page-product-service .pref-modal-body{
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--surface-primary, #fff);
  }

  body.page-product-service .pref-modal-body::-webkit-scrollbar{
    width: 5px;
  }

  body.page-product-service .pref-modal-body::-webkit-scrollbar-track{
    background: transparent;
  }

  body.page-product-service .pref-modal-body::-webkit-scrollbar-thumb{
    background: var(--ink-300, #cbd5e1);
    border-radius: 3px;
  }

  body.page-product-service .pref-selector-toolbar{
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
  }

  body.page-product-service .pref-search-wrap{
    position: relative;
    flex: 1;
    min-width: 0;
  }

  body.page-product-service .pref-search-wrap i{
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400, #94a3b8);
    pointer-events: none;
  }

  body.page-product-service .pref-search{
    width: 100%;
    height: 42px;
    padding: 0 .85rem 0 2.35rem;
    border: 1.5px solid var(--ink-200, #e5e7eb);
    border-radius: .7rem;
    background: var(--surface-primary, #fff);
    color: var(--ink-800, #1e293b);
    font-size: .8rem;
    outline: none;
  }

  body.page-product-service .pref-search:focus{
    border-color: var(--brand-primary, #02542D);
    box-shadow: 0 0 0 3px rgba(2, 84, 45, .1);
  }

  body.page-product-service .pref-selection-status{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    border-radius: .65rem;
    background: rgba(2, 84, 45, .08);
    color: var(--brand-primary, #02542D);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Grid */
  body.page-product-service .pref-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
  }

  body.page-product-service .pref-grid.pref-grid-list{
    grid-template-columns: 1fr;
    gap: .625rem;
  }

  /* Card-like selectable item */
  body.page-product-service .pref-item{
    appearance: none;
    width: 100%;
    border: 1.5px solid var(--ink-200, #e5e7eb);
    border-radius: .9rem;
    padding: .7rem .85rem;
    text-align: left;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    background: var(--surface-primary, #fff);
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 70px;
    box-shadow: var(--shadow-sm);
  }

  body.page-product-service .pref-item:hover{
    border-color: var(--brand-primary, #02542D);
    background: rgba(2, 84, 45, .03);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  body.page-product-service .pref-item.selected{
    border-color: var(--brand-primary, #02542D);
    background: rgba(2, 84, 45, .09);
    box-shadow: 0 0 0 2px rgba(2, 84, 45, .14);
  }

  body.page-product-service .pref-item.selected::after{
    content: "";
    font-family: "bootstrap-icons";
    position: absolute;
    top: .45rem;
    right: .5rem;
    font-size: .7rem;
    color: var(--brand-primary, #02542D);
  }

  body.page-product-service .pref-item-icon{
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
    background: rgba(2, 84, 45, .11);
    color: var(--brand-primary, #02542D);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    transition: all .15s ease;
  }

  body.page-product-service .pref-item.selected .pref-item-icon,
body.page-product-service .pref-item:hover .pref-item-icon{
    background: var(--brand-primary, #02542D);
    color: #fff;
  }

  body.page-product-service .pref-item-text{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
  }

  body.page-product-service .pref-item-title{
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-800, #1e293b);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.page-product-service .pref-item-meta{
    font-size: .66rem;
    font-weight: 600;
    color: var(--ink-500, #64748b);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  body.page-product-service .pref-item-arrow{
    font-size: .8rem;
    color: var(--ink-400, #94a3b8);
    transition: transform .15s ease, color .15s ease;
    flex-shrink: 0;
  }

  body.page-product-service .pref-item:hover .pref-item-arrow,
body.page-product-service .pref-item.selected .pref-item-arrow{
    color: var(--brand-primary, #02542D);
    transform: translateX(2px);
  }

  /* List mode */
  body.page-product-service .pref-grid-list .pref-item{
    min-height: 62px;
  }

  body.page-product-service .pref-grid-list .pref-item-title{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Pagination footer */
  body.page-product-service .pref-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--ink-200, #e5e7eb);
    background: var(--surface-secondary, #f8fafc);
    flex-shrink: 0;
    font-size: .75rem;
  }

  body.page-product-service .pref-pagination-info{
    color: var(--ink-500, #64748b);
    font-weight: 600;
  }

  body.page-product-service .pref-pagination-btns{
    display: flex;
    align-items: center;
    gap: 5px;
  }

  body.page-product-service .pref-page-btn{
    min-width: 2rem;
    height: 2rem;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: .375rem;
    background: var(--surface-primary, #fff);
    color: var(--ink-700, #334155);
    font-weight: 600;
    font-size: .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
  }

  body.page-product-service .pref-page-btn:hover:not(.disabled):not(.active){
    background: var(--brand-primary, #02542D);
    color: #fff;
    border-color: var(--brand-primary, #02542D);
    transform: translateY(-1px);
  }

  body.page-product-service .pref-page-btn.active{
    background: var(--brand-primary, #02542D);
    color: #fff;
    border-color: var(--brand-primary, #02542D);
  }

  body.page-product-service .pref-page-btn.disabled{
    opacity: .45;
    cursor: not-allowed;
    background: var(--surface-secondary, #f8fafc);
  }

  body.page-product-service .pref-page-ellipsis{
    padding: 0 .3rem;
    color: var(--ink-400, #94a3b8);
  }

  /* Footer actions */
  body.page-product-service .pref-modal-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--ink-200, #e5e7eb);
    background: var(--surface-primary, #fff);
    flex-shrink: 0;
  }

  body.page-product-service .pref-btn{
    padding: .45rem 1rem;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: none;
    display: flex;
    align-items: center;
    gap: .35rem;
  }

  body.page-product-service .pref-btn-back{
    background: var(--surface-secondary, #f1f5f9);
    color: var(--ink-600, #475569);
    border: 1px solid var(--ink-200, #e5e7eb);
  }

  body.page-product-service .pref-btn-back:hover{
    background: var(--ink-100, #f1f5f9);
  }

  body.page-product-service .pref-btn-skip{
    background: transparent;
    color: var(--ink-500, #64748b);
  }

  body.page-product-service .pref-btn-skip:hover{
    color: var(--ink-700, #334155);
    text-decoration: underline;
  }

  body.page-product-service .pref-btn-done{
    background: var(--brand-primary, #02542D);
    color: #fff;
    border: 1px solid var(--brand-primary, #02542D);
  }

  body.page-product-service .pref-btn-done:hover:not(:disabled){
    background: var(--brand-secondary, #01402A);
    border-color: var(--brand-secondary, #01402A);
  }

  body.page-product-service .pref-btn-done:disabled{
    opacity: .45;
    cursor: not-allowed;
  }

  /* Selected preferences chips display */
  body.page-product-service .pref-selected-display{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
  }

  body.page-product-service .pref-chip{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    background: rgba(2, 84, 45, .08);
    border: 1px solid rgba(2, 84, 45, .2);
    border-radius: 2rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--brand-primary, #02542D);
    line-height: 1;
    cursor: pointer;
  }

  body.page-product-service .pref-chip:hover{
    background: rgba(2, 84, 45, .14);
  }

  body.page-product-service .pref-chip-label{
    color: var(--ink-500, #64748b);
    font-weight: 500;
    margin-right: .1rem;
  }

  body.page-product-service .pref-chip-remove{
    cursor: pointer;
    font-size: .65rem;
    opacity: .6;
    transition: opacity .15s;
    margin-left: .15rem;
  }

  body.page-product-service .pref-chip-remove:hover{
    opacity: 1;
  }

  body.page-product-service .pref-chip-more{
    cursor: default;
    border-style: dashed;
    color: var(--ink-500, #64748b);
    background: var(--surface-secondary, #f8fafc);
  }

  body.page-product-service .pref-chip-more:hover{
    background: var(--surface-secondary, #f8fafc);
  }

  body.page-product-service .pref-open-btn{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    background: var(--surface-primary, #fff);
    border: 1.5px solid rgba(2, 84, 45, .28);
    border-radius: .7rem;
    color: var(--brand-primary, #02542D);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    min-height: 46px;
    justify-content: center;
    width: 100%;
  }

  body.page-product-service .pref-open-btn:hover{
    background: rgba(2, 84, 45, .06);
    border-color: var(--brand-primary, #02542D);
  }

  body.page-product-service .pref-open-btn i{
    font-size: .85rem;
  }

  /* Empty state */
  body.page-product-service .pref-empty{
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ink-400, #94a3b8);
  }

  body.page-product-service .pref-empty i{
    font-size: 2rem;
    margin-bottom: .5rem;
    display: block;
    opacity: .5;
  }

  /* Responsive */
  @media (max-width: 920px) {
    body.page-product-service .pref-modal{
      width: min(96vw, 920px);
      max-height: 92vh;
    }

    body.page-product-service .pref-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    body.page-product-service .pref-modal-header{
      align-items: stretch;
      flex-wrap: wrap;
    }

    body.page-product-service .pref-modal-header h3{
      font-size: .9rem;
    }

    body.page-product-service .pref-level-jump{
      order: 3;
      width: 100%;
      margin: .25rem 0 0;
    }

    body.page-product-service .pref-breadcrumb{
      padding-left: .85rem;
      padding-right: .85rem;
    }

    body.page-product-service .pref-modal-body{
      padding-left: .85rem;
      padding-right: .85rem;
    }

    body.page-product-service .pref-selector-toolbar{
      align-items: stretch;
      flex-direction: column;
      gap: .5rem;
    }

    body.page-product-service .pref-selection-status{
      justify-content: center;
    }

    body.page-product-service .pref-grid{
      grid-template-columns: 1fr;
    }

    body.page-product-service .pref-pagination,
body.page-product-service .pref-modal-footer{
      padding-left: .85rem;
      padding-right: .85rem;
    }

    body.page-product-service .pref-modal-footer{
      gap: .5rem;
      flex-wrap: wrap;
    }
  }

  /* PDF Modal */
  body.page-product-service .pdf-modal{
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
  }

  body.page-product-service .pdf-modal.active{
    display: flex;
    align-items: center;
    justify-content: center;
    animation: product-service--fadeIn 0.3s ease-out;
  }

  body.page-product-service .pdf-modal-content{
    position: relative;
    width: 95%;
    height: 95%;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }

  body.page-product-service .pdf-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: var(--brand-primary);
    color: var(--surface-primary);
  }

  body.page-product-service .pdf-modal-title{
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
  }

  body.page-product-service .pdf-modal-close{
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.page-product-service .pdf-modal-close:hover{
    background: rgba(255, 255, 255, 0.3);
  }

  body.page-product-service .pdf-modal-body{
    width: 100%;
    height: calc(100% - 60px);
  }

  body.page-product-service .pdf-iframe{
    width: 100%;
    height: 100%;
    border: none;
  }

  /* Navigation Buttons - matches sv-nav-buttons */
  body.page-product-service .nav-buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-200);
  }

  /* Buttons - matches sv-btn pattern */
  body.page-product-service .btn{
    padding: .625rem 1.25rem;
    border-radius: .5rem;
    font-weight: var(--font-weight-semibold);
    font-size: .75rem;
    cursor: pointer;
    transition: var(--fast);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    text-decoration: none;
  }

  body.page-product-service .btn.disabled,
body.page-product-service .btn:disabled,
body.page-product-service fieldset:disabled .btn{
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: #02542d;
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
  }

  body.page-product-service .btn-primary{
    background: var(--brand-primary);
    color: var(--surface-primary);
    border-color: var(--brand-primary);
  }

  body.page-product-service .btn-primary:hover{
    background: var(--brand-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    color: var(--surface-primary);
  }

  body.page-product-service .btn-secondary{
    background: var(--surface-primary);
    color: var(--brand-primary);
    border-color: var(--ink-200);
  }

  body.page-product-service .btn-secondary:hover{
    background: rgba(2, 84, 45, 0.06);
    border-color: var(--brand-primary);
  }

  body.page-product-service .btn-outline{
    background: var(--surface-primary);
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
  }

  body.page-product-service .btn-outline:hover{
    background: var(--brand-primary);
    color: var(--surface-primary);
  }

  body.page-product-service .btn-ghost{
    background: var(--surface-primary);
    color: var(--ink-600);
    border: 1px solid var(--ink-200);
  }

  body.page-product-service .btn-ghost:hover{
    background: rgba(2, 84, 45, 0.06);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    text-decoration: none;
  }

  body.page-product-service .btn-danger{
    background: var(--surface-primary);
    color: #ef4444;
    border: 1px solid #ef4444;
  }

  body.page-product-service .btn-danger:hover{
    background: #ef4444;
    color: var(--surface-primary);
  }

  body.page-product-service .btn-sm{
    padding: .5rem .75rem;
    font-size: .7rem;
  }

  /* Toast Notifications - matches sv-toast pattern */
  body.page-product-service .toast-container{
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    max-width: 300px;
  }

  body.page-product-service .toast{
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    background: var(--surface-primary);
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    border-left: 3px solid var(--brand-primary);
    animation: product-service--slideIn 0.3s ease-out;
  }

  @keyframes product-service--slideIn {
    from {
      opacity: 0;
      transform: translateX(100px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  body.page-product-service .toast.success{
    border-left-color: #22c55e;
  }

  body.page-product-service .toast.error{
    border-left-color: #ef4444;
  }

  body.page-product-service .toast-icon{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
  }

  body.page-product-service .toast.success .toast-icon{
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
  }

  body.page-product-service .toast.error .toast-icon{
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }

  body.page-product-service .toast-message{
    flex: 1;
    font-size: .75rem;
    font-weight: var(--font-weight-medium);
    color: var(--ink-700);
  }

  body.page-product-service .toast-close{
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.6;
    color: var(--ink-500);
  }

  body.page-product-service .toast-close:hover{
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
  }

  /* Alert Messages */
  body.page-product-service .alert-success{
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    color: #166534;
  }

  body.page-product-service .alert-danger{
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #991b1b;
  }

  /* Form Grid - matches bp-form-grid */
  body.page-product-service .form-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  body.page-product-service .form-group{
    display: flex;
    flex-direction: column;
    position: relative;
  }

  body.page-product-service .form-group.full-width{
    grid-column: 1 / -1;
  }

  body.page-product-service .hidden{
    display: none !important;
  }

  body.page-product-service .text-muted{
    color: var(--ink-500) !important;
    font-size: .7rem !important;
    font-weight: var(--font-weight-medium);
  }

  body.page-product-service .mb-3{
    margin-bottom: .75rem !important;
  }

  body.page-product-service .spinner-border{
    display: inline-block;
    width: .75rem;
    height: .75rem;
    vertical-align: text-bottom;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: product-service--spin 0.75s linear infinite;
  }

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

  /* Mobile Header - matches bp-mobile-header */
  body.page-product-service .mobile-header{
    display: none;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .875rem;
    padding: .75rem 1rem;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: .875rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  body.page-product-service .mobile-toggle{
    background: var(--brand-primary);
    color: var(--surface-primary);
    border: none;
    padding: .5rem .75rem;
    border-radius: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: var(--font-weight-semibold);
    transition: var(--fast);
  }

  body.page-product-service .mobile-toggle:hover{
    background: var(--brand-secondary);
  }

  body.page-product-service .mobile-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
    opacity: 0;
    transition: opacity .3s ease;
  }

  /* Responsive */
  @media (max-width: 991px) {
    body.page-product-service .product-layout{
      flex-direction: column;
      padding: .75rem;
      gap: .75rem;
    }

    body.page-product-service .product-sidebar{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: auto;
      height: auto;
      max-height: 80vh;
      overflow-y: auto;
      z-index: 1000;
      transform: translateY(-100%);
      transition: transform .3s ease;
      border-radius: 0 0 .875rem .875rem;
    }

    body.page-product-service .product-sidebar.sidebar-open{
      display: block;
      transform: translateY(0);
    }

    body.page-product-service .mobile-header{
      display: flex;
    }

    body.page-product-service .mobile-overlay.overlay-active{
      display: block;
      opacity: 1;
    }

    body.page-product-service .product-main{
      max-height: calc(100vh - 100px);
      padding: 1rem;
    }

    body.page-product-service .nav-buttons{
      flex-direction: column;
      gap: .75rem;
    }

    body.page-product-service .main-header{
      position: static;
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
      padding-left: 0;
      padding-right: 0;
    }

    body.page-product-service .main-header,
body.page-product-service .main-header-actions,
body.page-product-service .section-panel-header,
body.page-product-service .section-subpanel-header,
body.page-product-service .field-header,
body.page-product-service .section-toolbar,
body.page-product-service .field-row,
body.page-product-service .file-item,
body.page-product-service .variant-header{
      flex-direction: column;
      align-items: stretch;
    }

    body.page-product-service .section-split-grid,
body.page-product-service .form-grid,
body.page-product-service .variant-attr-row{
      grid-template-columns: 1fr;
    }

    body.page-product-service .variant-summary-grid,
body.page-product-service .variant-kv-sections,
body.page-product-service .variant-kv-row,
body.page-product-service .variant-value-row{
      grid-template-columns: 1fr;
    }

    body.page-product-service .nav-buttons .btn{
      width: 100%;
      justify-content: center;
    }
  }

  @media (max-width: 575px) {
    body.page-product-service .product-layout{
      padding: .5rem;
    }

    body.page-product-service .product-main{
      padding: .75rem;
    }
  }

/* ══════════════════════════════════════════════════════
   UNIFIED TYPOGRAPHY SCALE  (single source of truth)
   All font-size overrides below win over earlier rules.
   Scale: xs=.7rem  sm=.75rem  base=.82rem  lg=.88rem
   ══════════════════════════════════════════════════════ */

/* Page / section headings */
body.page-product-service .main-title{ font-size: .88rem !important; }
body.page-product-service .product-sidebar-title{ font-size: .88rem !important; }

/* Navigation & step items */
body.page-product-service .step-item{ font-size: .75rem !important; }
body.page-product-service .step-item::before{ font-size: .68rem !important; }

/* Section card headers */
body.page-product-service .section-panel-title{ font-size: .72rem !important; }
body.page-product-service .section-subpanel-title{ font-size: .7rem  !important; }

/* Chips, pills, indicators */
body.page-product-service .main-step-indicator{ font-size: .7rem  !important; }
body.page-product-service .mh-icon{ font-size: .8rem  !important; }

/* Form elements */
body.page-product-service .form-label{ font-size: .75rem !important; }
body.page-product-service .form-control,
body.page-product-service .form-select{ font-size: .75rem !important; }

/* Buttons */
body.page-product-service .btn-save-main{ font-size: .75rem !important; }
body.page-product-service .btn{ font-size: .75rem !important; }
body.page-product-service .btn-mh-save{ font-size: .8rem  !important; }

/* Sidebar save */
body.page-product-service .sidebar-actions .btn-save-main{ font-size: .75rem !important; }

  /* ============================================================================
     WORKSPACE SHELL REFRESH
     ============================================================================ */
  @media (min-width: 992px) {
    body.page-product-service .product-layout{
      display: grid;
      grid-template-columns: minmax(260px, 280px) minmax(0, 1fr);
      align-items: start;
      gap: 1rem;
      padding: 1rem;
      border: 1px solid rgba(2, 84, 45, 0.08);
      border-radius: 1.15rem;
      box-shadow: 0 20px 40px -34px rgba(15, 23, 42, 0.35);
    }

    body.page-product-service .product-main{
      min-height: calc(100vh - 6.5rem);
      max-height: none;
      overflow: visible;
    }
  }

  body.page-product-service .product-sidebar{
    border-radius: 1.05rem;
    border: 1px solid rgba(2, 84, 45, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 247, 0.94) 100%);
    box-shadow: 0 18px 34px -32px rgba(15, 23, 42, 0.55);
  }

  body.page-product-service .product-sidebar-header{
    padding: 1rem 1rem .9rem;
    background: linear-gradient(135deg, rgba(2, 84, 45, 0.12), rgba(2, 84, 45, 0.03));
    border-bottom: 1px solid rgba(2, 84, 45, 0.1);
  }

  body.page-product-service .sidebar-kicker{
    margin: 0 0 .45rem;
    font-size: .68rem;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-primary);
  }

  body.page-product-service .product-sidebar-title{
    font-size: .92rem !important;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink-800);
  }

  body.page-product-service .product-sidebar-title i{
    width: 1.95rem;
    height: 1.95rem;
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px -14px rgba(2, 84, 45, 0.85);
  }

  body.page-product-service .product-sidebar-subtitle{
    display: block;
    margin-top: .45rem;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--ink-500);
  }

  body.page-product-service .product-steps{
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }

  body.page-product-service .step-item{
    margin: 0;
    border: 1px solid transparent;
    border-radius: .85rem;
    font-size: .78rem;
    line-height: 1.45;
  }

  body.page-product-service .step-item:hover{
    background: rgba(2, 84, 45, 0.05);
    border-color: rgba(2, 84, 45, 0.08);
  }

  body.page-product-service .step-item.active{
    border-color: rgba(2, 84, 45, 0.14);
    box-shadow: 0 12px 22px -20px rgba(2, 84, 45, 0.6);
  }

  body.page-product-service .step-label{
    font-weight: 700;
    letter-spacing: -.01em;
  }

  body.page-product-service .sidebar-actions{
    padding: .9rem;
    border-top: 1px solid rgba(2, 84, 45, 0.08);
    background: transparent;
  }

  body.page-product-service .btn-save-main{
    min-height: 44px;
    border-radius: .85rem;
    font-size: .82rem;
    letter-spacing: -.01em;
    box-shadow: 0 16px 24px -20px rgba(2, 84, 45, 0.72);
  }

  body.page-product-service .product-main{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.96));
    border: 1px solid rgba(2, 84, 45, 0.1);
    border-radius: 1.05rem;
    padding: 1rem;
    box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.3);
  }

  body.page-product-service .main-header{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(2, 84, 45, 0.12);
    border-radius: 1.05rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 247, 0.94));
    box-shadow: 0 20px 32px -30px rgba(15, 23, 42, 0.42);
    top: .75rem;
  }

  body.page-product-service .mh-left{
    align-items: flex-start;
    gap: .85rem;
  }

  body.page-product-service .mh-copy{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
  }

  body.page-product-service .mh-eyebrow{
    margin: 0;
    font-size: .72rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--brand-primary);
  }

  body.page-product-service .mh-icon{
    width: 46px;
    height: 46px;
    border-radius: .95rem;
    box-shadow: 0 18px 28px -22px rgba(2, 84, 45, 0.85);
  }

  body.page-product-service .main-title{
    margin: 0;
    font-size: 1.22rem !important;
    line-height: 1.2;
    letter-spacing: -.02em;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }

  body.page-product-service .mh-section-copy{
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--ink-500);
    font-weight: 600;
  }

  body.page-product-service #currentSectionTitle{
    color: var(--ink-700);
    font-weight: 700;
  }

  body.page-product-service .mh-separator{
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(2, 84, 45, 0.28);
  }

  body.page-product-service .mh-right{
    gap: .55rem;
  }

  body.page-product-service .main-step-indicator{
    padding: .45rem .78rem;
    border-radius: 999px;
    border: 1px solid rgba(2, 84, 45, 0.14);
    background: rgba(2, 84, 45, 0.08);
    color: var(--brand-primary);
    font-size: .72rem !important;
    font-weight: 700;
  }

  body.page-product-service .main-header .btn-mh-save,
body.page-product-service .main-header .btn.btn-ghost{
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .85rem;
  }

  body.page-product-service .main-header .btn.btn-ghost{
    border: 1px solid rgba(2, 84, 45, 0.12);
    background: #fff;
    color: var(--ink-700);
  }

  body.page-product-service .main-header .btn.btn-ghost:hover{
    background: rgba(2, 84, 45, 0.05);
    color: var(--brand-primary);
  }

  body.page-product-service #message{
    margin-bottom: .85rem;
  }

  body.page-product-service .section-stack{
    gap: 1rem;
  }

  body.page-product-service .section-panel{
    border: 1px solid rgba(2, 84, 45, 0.11);
    border-radius: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 250, 0.95));
    box-shadow: 0 14px 30px -34px rgba(15, 23, 42, 0.42);
  }

  body.page-product-service .section-panel-header{
    margin: -1rem -1rem 1rem;
    padding: .8rem 1rem;
    background: rgba(2, 84, 45, 0.04);
    border-bottom: 1px solid rgba(2, 84, 45, 0.08);
    border-radius: 1rem 1rem 0 0;
  }

  body.page-product-service .section-panel-title{
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem !important;
    letter-spacing: .11em;
    color: var(--ink-700);
  }

  body.page-product-service .section-panel-title::before{
    content: "";
    width: .72rem;
    height: .72rem;
    border-radius: .24rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 8px 16px -14px rgba(2, 84, 45, 0.88);
  }

  body.page-product-service .section-subpanel{
    border-color: rgba(2, 84, 45, 0.12);
    border-radius: .9rem;
    background: linear-gradient(180deg, rgba(2, 84, 45, 0.03), rgba(2, 84, 45, 0.01));
  }

  body.page-product-service .section-subpanel-header{
    padding: .7rem .9rem;
    background: rgba(2, 84, 45, 0.06);
    border-bottom: 1px solid rgba(2, 84, 45, 0.08);
  }

  body.page-product-service .section-subpanel-title{
    font-size: .7rem;
    letter-spacing: .08em;
  }

  body.page-product-service .form-label{
    font-size: .76rem;
    letter-spacing: -.01em;
  }

  body.page-product-service .form-control,
body.page-product-service .form-select,
body.page-product-service .custom-dropdown .dropdown-trigger,
body.page-product-service .dropdown-search{
    min-height: 44px;
    border-radius: .8rem;
    font-size: .84rem;
    border-color: rgba(148, 163, 184, 0.32);
    box-shadow: none;
  }

  body.page-product-service textarea.form-control{
    min-height: 120px;
    padding-top: .75rem;
  }

  body.page-product-service .form-control-lg{
    min-height: 48px;
    font-size: .92rem;
    font-weight: 600;
  }

  body.page-product-service .form-control:focus,
body.page-product-service .form-select:focus,
body.page-product-service .custom-dropdown.open .dropdown-trigger,
body.page-product-service .dropdown-search:focus{
    border-color: rgba(2, 84, 45, 0.35);
    box-shadow: 0 0 0 4px rgba(2, 84, 45, 0.08);
  }

  body.page-product-service .mobile-header{
    margin: .75rem .75rem 0;
    padding: .85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(2, 84, 45, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 247, 0.94));
    box-shadow: 0 18px 24px -28px rgba(15, 23, 42, 0.5);
  }

  body.page-product-service .mobile-header-copy{
    gap: .22rem;
  }

  body.page-product-service .mobile-header-eyebrow{
    font-size: .7rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--brand-primary);
  }

  body.page-product-service .mobile-header .main-title{
    font-size: 1rem !important;
  }

  body.page-product-service .mobile-header-step{
    font-size: .72rem;
    color: var(--ink-500);
  }

  body.page-product-service .mobile-toggle{
    border-radius: .8rem;
    border: 1px solid rgba(2, 84, 45, 0.12);
    background: #fff;
    color: var(--brand-primary);
  }

  body.page-product-service .card-title,
body.page-product-service .tab-lead,
body.page-product-service .helper-card,
body.page-product-service .section-panel-subtitle,
body.page-product-service .section-badge{
    display: none !important;
  }

  body.page-product-service .sidebar-kicker,
body.page-product-service .product-sidebar-subtitle,
body.page-product-service .mh-eyebrow,
body.page-product-service .mh-section-copy,
body.page-product-service .mobile-header-eyebrow{
    display: none !important;
  }

  body.page-product-service .product-sidebar-header{
    padding: .8rem .9rem;
    background: linear-gradient(135deg, rgba(2, 84, 45, 0.08), rgba(2, 84, 45, 0.02));
  }

  body.page-product-service .product-sidebar-title{
    font-size: .84rem !important;
  }

  body.page-product-service .product-sidebar-title i{
    width: 1.7rem;
    height: 1.7rem;
    border-radius: .6rem;
  }

  body.page-product-service .product-steps{
    padding: .4rem;
  }

  body.page-product-service .step-item{
    border-radius: .72rem;
    font-size: .74rem;
  }

  body.page-product-service .sidebar-actions{
    padding: .75rem;
  }

  body.page-product-service .btn-save-main{
    min-height: 40px;
    border-radius: .78rem;
    font-size: .78rem;
  }

  body.page-product-service .main-header{
    gap: .7rem;
    padding: .62rem .8rem;
    margin-bottom: .75rem;
    border-radius: .85rem;
    top: .35rem;
  }

  body.page-product-service .mh-left{
    align-items: center;
    gap: .6rem;
  }

  body.page-product-service .mh-icon{
    width: 32px;
    height: 32px;
    border-radius: .72rem;
    box-shadow: 0 12px 18px -18px rgba(2, 84, 45, 0.85);
  }

  body.page-product-service .main-title{
    font-size: .94rem !important;
    background: none;
    -webkit-text-fill-color: currentColor;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-800);
  }

  body.page-product-service .mh-right{
    gap: .4rem;
  }

  body.page-product-service .main-step-indicator{
    padding: .32rem .58rem;
    font-size: .68rem !important;
  }

  body.page-product-service .main-header .btn-mh-save,
body.page-product-service .main-header .btn.btn-ghost{
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .68rem;
  }

  body.page-product-service .mobile-header{
    padding: .65rem .8rem;
    border-radius: .85rem;
  }

  body.page-product-service .mobile-header .main-title{
    font-size: .9rem !important;
  }

  body.page-product-service .mobile-header-step{
    font-size: .67rem;
  }

  @media (max-width: 991px) {
    body.page-product-service .main-header{
      top: 0;
      padding: .62rem .75rem;
    }

    body.page-product-service .main-title{
      font-size: .9rem !important;
    }
  }

  @media (max-width: 767px) {
    body.page-product-service .main-header{
      grid-template-columns: 1fr;
    }

    body.page-product-service .mh-right{
      width: 100%;
      justify-content: space-between;
    }

    body.page-product-service .main-step-indicator{
      order: 1;
    }
  }



  body.page-product-service .dof-list{ display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
  body.page-product-service .dof-empty{
    border: 1px dashed var(--ink-300, #cbd5e1); border-radius: .75rem; padding: .9rem 1rem;
    font-size: .78rem; color: var(--ink-500, #64748b); text-align: center;
  }
  body.page-product-service .dof-card{
    display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start;
    border: 1px solid var(--ink-200, #e2e8f0); border-radius: .75rem; padding: .75rem .9rem;
    background: var(--surface-secondary, #f8fafc);
  }
  body.page-product-service .dof-card-top{ display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
  body.page-product-service .dof-type-badge{
    font-size: .68rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px;
    background: rgba(2, 84, 45, 0.08); color: var(--brand-primary, #02542d);
    border: 1px solid rgba(2, 84, 45, 0.18);
  }
  body.page-product-service .dof-status{ font-size: .66rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; letter-spacing: .02em; }
  body.page-product-service .dof-status-active{ background: rgba(22, 163, 74, .12); color: #15803d; }
  body.page-product-service .dof-status-inactive{ background: rgba(100, 116, 139, .14); color: #475569; }
  body.page-product-service .dof-status-expired{ background: rgba(220, 38, 38, .12); color: #b91c1c; }
  body.page-product-service .dof-status-scheduled{ background: rgba(37, 99, 235, .12); color: #1d4ed8; }
  body.page-product-service .dof-status-limit{ background: rgba(217, 119, 6, .14); color: #b45309; }
  body.page-product-service .dof-priority{ font-size: .68rem; color: var(--ink-500, #64748b); }
  body.page-product-service .dof-card-desc{ font-weight: 600; margin: .3rem 0 .1rem; color: var(--ink-800, #1e293b); font-size: .85rem; }
  body.page-product-service .dof-card-meta,
body.page-product-service .dof-card-dates,
body.page-product-service .dof-card-usage{ font-size: .73rem; color: var(--ink-500, #64748b); }
  body.page-product-service .dof-card-actions{ display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
  body.page-product-service .dof-icon-btn{
    width: 30px; height: 30px; border-radius: .55rem; border: 1px solid var(--ink-200, #e2e8f0);
    background: var(--surface-primary, #fff); color: var(--ink-600, #475569);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  body.page-product-service .dof-icon-btn:hover{ border-color: var(--brand-primary, #02542d); color: var(--brand-primary, #02542d); }
  body.page-product-service .dof-icon-btn.dof-delete:hover{ border-color: #dc2626; color: #dc2626; }
  body.page-product-service .dof-active-toggle-label{ display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--ink-500, #64748b); cursor: pointer; margin: 0; }
  body.page-product-service .dof-add-btn{
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; font-size: .8rem;
    border: 1px solid var(--ink-200, #e2e8f0); border-radius: .6rem; cursor: pointer;
    background: var(--surface-primary, #fff); color: var(--ink-700, #334155);
  }
  body.page-product-service .dof-add-btn:hover{ border-color: var(--brand-primary, #02542d); color: var(--brand-primary, #02542d); }
  body.page-product-service .dof-overlap-warning{
    background: rgba(217, 119, 6, .1); border: 1px solid rgba(217, 119, 6, .3); color: #92400e;
    border-radius: .6rem; padding: .55rem .75rem; font-size: .74rem; margin-bottom: .6rem;
  }
  body.page-product-service .dof-modal-overlay{
    display: none; position: fixed; inset: 0; z-index: 10030;
    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px);
  }
  body.page-product-service .dof-modal-overlay.active{ display: flex; align-items: center; justify-content: center; }
  body.page-product-service .dof-modal{
    width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column; min-height: 0;
    background: var(--surface-primary, #fff); border: 1px solid var(--ink-200, #e2e8f0);
    border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.28);
  }
  body.page-product-service .dof-modal-header{
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--ink-200, #e2e8f0);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  }
  body.page-product-service .dof-modal-title{ margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink-800, #1e293b); }
  body.page-product-service .dof-modal-subtitle{ margin: .2rem 0 0; font-size: .72rem; color: var(--ink-500, #64748b); }
  body.page-product-service .dof-modal-close{
    width: 34px; height: 34px; border-radius: .6rem; border: 1px solid var(--ink-200, #e2e8f0);
    background: var(--surface-primary, #fff); color: var(--ink-600, #475569);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  body.page-product-service .dof-modal-close:hover{ color: var(--brand-primary, #02542d); border-color: var(--brand-primary, #02542d); }
  body.page-product-service .dof-modal-body{ flex: 1 1 auto; min-height: 0; padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
  body.page-product-service .dof-modal-footer{
    padding: 1rem 1.25rem; border-top: 1px solid var(--ink-200, #e2e8f0);
    display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  }
  body.page-product-service .dof-btn-secondary{
    padding: .5rem 1rem; border-radius: .6rem; border: 1px solid var(--ink-200, #e2e8f0);
    background: var(--surface-primary, #fff); color: var(--ink-700, #334155); cursor: pointer; font-size: .82rem;
  }
  body.page-product-service .dof-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; margin-bottom: .9rem; }
  body.page-product-service .dof-errors{
    background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .3); color: #b91c1c;
    border-radius: .6rem; padding: .6rem .8rem; font-size: .75rem; margin-bottom: .9rem;
  }
  body.page-product-service .dof-errors ul{ margin: 0; padding-left: 1.1rem; }
  body.page-product-service .dof-tier-row{ display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .5rem; margin-bottom: .5rem; align-items: center; }
  body.page-product-service .dof-check-list{ display: flex; flex-wrap: wrap; gap: .4rem; max-height: 160px; overflow: auto; padding: .25rem 0; }
  body.page-product-service .dof-check-list label{
    display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem;
    color: var(--ink-700, #334155); cursor: pointer; margin: 0;
    border: 1px solid var(--ink-200, #e2e8f0); border-radius: .5rem; padding: .3rem .55rem;
    background: var(--surface-primary, #fff);
  }
  body.page-product-service .dof-check-list label:hover{ border-color: var(--brand-primary, #02542d); }
  body.page-product-service .dof-check-list label:has(input:checked){ border-color: var(--brand-primary, #02542d); background: rgba(2, 84, 45, 0.06); }
  body.page-product-service .dof-bundle-list{ max-height: 200px; overflow: auto; border: 1px solid var(--ink-200, #e2e8f0); border-radius: .6rem; margin-top: .4rem; }
  body.page-product-service .dof-bundle-item{ display: flex; gap: .5rem; padding: .45rem .6rem; align-items: center; cursor: pointer; font-size: .78rem; border-bottom: 1px solid var(--ink-100, #f1f5f9); margin: 0; }
  body.page-product-service .dof-bundle-item:last-child{ border-bottom: none; }
  body.page-product-service .dof-bundle-id{ margin-left: auto; font-size: .68rem; color: var(--ink-500, #64748b); }
  body.page-product-service .dof-note{ font-size: .72rem; color: var(--ink-500, #64748b); margin: .25rem 0 0; }
  body.page-product-service .dof-example{ font-size: .73rem; color: var(--ink-500, #64748b); background: var(--surface-secondary, #f8fafc); border-radius: .5rem; padding: .45rem .6rem; margin-top: .4rem; }
  body.page-product-service .dof-section-label{ font-size: .78rem; font-weight: 700; color: var(--ink-700, #334155); margin: 0 0 .35rem; }
  body.page-product-service .dof-bundle-chips{ display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
  body.page-product-service .dof-bundle-chip{
    display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; padding: .25rem .55rem;
    border-radius: 999px; background: rgba(2, 84, 45, 0.08); color: var(--brand-primary, #02542d);
    border: 1px solid rgba(2, 84, 45, 0.18);
  }
  body.page-product-service .dof-bundle-chip button{
    border: none; background: none; cursor: pointer; color: inherit;
    font-size: .95rem; line-height: 1; padding: 0;
  }
  body.page-product-service .dof-radio{ display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--ink-700, #334155); cursor: pointer; margin: 0; }
  body.page-product-service .dof-usage-progress{ width: 160px; height: 6px; margin-top: .3rem; accent-color: var(--brand-primary, #02542d); }
  body.page-product-service .dof-hidden-select{ display: none !important; }
  body.page-product-service .dof-datetime{ display: flex; gap: .4rem; }
  body.page-product-service .dof-datetime input[type="date"]{ flex: 1.3; min-width: 0; }
  body.page-product-service .dof-datetime input[type="time"]{ flex: 1; min-width: 0; }
  body.page-product-service .dof-dropdown .dropdown-menu{ z-index: 10040; max-height: 260px; overflow-y: auto; }

  body.page-product-service .unsaved-nav-overlay{
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  body.page-product-service .unsaved-nav-overlay.active{
    display: flex;
  }

  body.page-product-service .unsaved-nav-modal{
    width: min(94vw, 440px);
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: 1rem;
    background: var(--surface-primary, #fff);
    box-shadow: 0 24px 60px -24px rgb(15 23 42 / .5);
    overflow: hidden;
  }

  body.page-product-service .unsaved-nav-header{
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--ink-200, #e5e7eb);
    background: linear-gradient(135deg, rgba(2, 84, 45, .1), #fff);
  }

  body.page-product-service .unsaved-nav-icon{
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(2, 84, 45, .12);
    color: var(--brand-primary, #02542d);
    font-size: 1.05rem;
  }

  body.page-product-service .unsaved-nav-title{
    margin: 0;
    font-size: .98rem;
    font-weight: 800;
    color: var(--ink-900, #0f172a);
  }

  body.page-product-service .unsaved-nav-subtitle{
    margin: .18rem 0 0;
    color: var(--ink-500, #64748b);
    font-size: .75rem;
    line-height: 1.4;
  }

  body.page-product-service .unsaved-nav-close{
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-500, #64748b);
    cursor: pointer;
  }

  body.page-product-service .unsaved-nav-close:hover{
    color: var(--brand-primary, #02542d);
    border-color: rgba(2, 84, 45, .35);
  }

  body.page-product-service .unsaved-nav-body{
    padding: 1rem 1.1rem .9rem;
    color: var(--ink-700, #334155);
    font-size: .82rem;
    line-height: 1.5;
  }

  body.page-product-service .unsaved-nav-footer{
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .85rem 1.1rem 1rem;
    border-top: 1px solid var(--ink-100, #f1f5f9);
    background: var(--surface-secondary, #f8fafc);
  }

  body.page-product-service .unsaved-nav-btn{
    min-height: 38px;
    border-radius: .65rem;
    padding: .5rem .9rem;
    border: 1px solid var(--ink-200, #e5e7eb);
    background: #fff;
    color: var(--ink-700, #334155);
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
  }

  body.page-product-service .unsaved-nav-btn:hover{
    border-color: rgba(2, 84, 45, .35);
    color: var(--brand-primary, #02542d);
  }

  body.page-product-service .unsaved-nav-primary{
    background: var(--brand-primary, #02542d);
    color: #fff;
    border-color: var(--brand-primary, #02542d);
  }

  body.page-product-service .unsaved-nav-primary:hover{
    color: #fff;
    background: var(--brand-secondary, #01402a);
    border-color: var(--brand-secondary, #01402a);
  }

  @media (max-width: 520px) {
    body.page-product-service .unsaved-nav-footer{
      flex-direction: column-reverse;
    }

    body.page-product-service .unsaved-nav-btn{
      justify-content: center;
      width: 100%;
    }
  }


/* ==========================================================
   Template: promotioncode_crud.html (page-promotioncode-crud)
   ========================================================== */

  /* ============== ROOT & CONTAINER ============== */
  body.page-promotioncode-crud .promo-container{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.875rem;
    background: var(--surface-primary);
  }

  /* ============== HEADER SECTION ============== */
  body.page-promotioncode-crud .promo-header{
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: 0.875rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    position: relative;
    overflow: hidden;
  }

  body.page-promotioncode-crud .promo-header::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 84, 45, 0.08);
    pointer-events: none;
  }

  body.page-promotioncode-crud .header-wrapper{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.625rem;
    flex-wrap: wrap;
  }

  body.page-promotioncode-crud .header-left{
    flex: 1;
    min-width: 250px;
  }

  body.page-promotioncode-crud .header-title{
    font-size: 1.625rem;
    font-weight: var(--font-weight-extrabold);
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem 0;
  }

  body.page-promotioncode-crud .header-subtitle{
    font-size: 0.75rem;
    color: var(--ink-500);
    font-weight: var(--font-weight-medium);
    margin: 0;
  }

  body.page-promotioncode-crud .header-actions{
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
  }

  /* ============== BUTTON STYLES ============== */
  body.page-promotioncode-crud .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-weight: var(--font-weight-semibold);
    font-size: 0.6875rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family-primary);
  }

  body.page-promotioncode-crud .btn-primary{
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: white;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  body.page-promotioncode-crud .btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    color: white;
  }

  body.page-promotioncode-crud .btn-primary:active{
    transform: translateY(0);
  }

  body.page-promotioncode-crud .btn-secondary{
    background: var(--surface-primary);
    color: var(--brand-primary);
    border: 1.5px solid var(--ink-200);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  body.page-promotioncode-crud .btn-secondary:hover{
    background: rgba(2, 84, 45, 0.05);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
  }

  body.page-promotioncode-crud .btn-outline{
    background: transparent;
    color: var(--brand-primary);
    border: 1.5px solid var(--ink-200);
  }

  body.page-promotioncode-crud .btn-outline:hover{
    background: rgba(2, 84, 45, 0.08);
    border-color: var(--brand-primary);
  }

  body.page-promotioncode-crud .btn-danger{
    background: #ef4444;
    color: white;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1);
  }

  body.page-promotioncode-crud .btn-danger:hover{
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    color: white;
  }

  body.page-promotioncode-crud .btn-sm{
    padding: 0.4rem 0.625rem;
    font-size: 0.625rem;
  }

  body.page-promotioncode-crud .btn-icon{
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    justify-content: center;
    border-radius: 0.5rem;
  }

  /* ============== MAIN GRID LAYOUT ============== */
  body.page-promotioncode-crud .promo-grid{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.25rem;
  }

  /* ============== FORM CARD ============== */
  body.page-promotioncode-crud .form-card{
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 0.875rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.page-promotioncode-crud .form-header{
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--ink-200);
    padding: 1rem;
  }

  body.page-promotioncode-crud .form-title{
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  body.page-promotioncode-crud .form-title i{
    font-size: 1.25rem;
  }

  body.page-promotioncode-crud .form-body{
    padding: 1.25rem;
  }

  body.page-promotioncode-crud .form-group{
    margin-bottom: 1rem;
  }

  body.page-promotioncode-crud .form-group:last-of-type{
    margin-bottom: 0;
  }

  body.page-promotioncode-crud .form-label{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-700);
  }

  body.page-promotioncode-crud .form-label i{
    font-size: 0.875rem;
    color: var(--brand-primary);
  }

  body.page-promotioncode-crud .form-input{
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ink-200);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    background: var(--surface-primary);
    color: var(--ink-700);
    font-family: var(--font-family-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
  }

  body.page-promotioncode-crud .form-input::placeholder{
    color: var(--ink-400);
  }

  body.page-promotioncode-crud .form-input:focus{
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(2, 84, 45, 0.1);
    outline: none;
    background: var(--surface-primary);
  }

  body.page-promotioncode-crud .form-input:invalid:not(:placeholder-shown){
    border-color: #ef4444;
  }

  body.page-promotioncode-crud .form-actions{
    display: flex;
    gap: 0.625rem;
    margin-top: 1.25rem;
  }

  body.page-promotioncode-crud .form-actions button{
    flex: 1;
  }

  body.page-promotioncode-crud .form-hint{
    font-size: 0.6875rem;
    color: var(--ink-500);
    margin-top: 0.875rem;
    padding: 0.75rem;
    background: rgba(2, 84, 45, 0.08);
    border-radius: 0.5rem;
    border-left: 3px solid var(--brand-primary);
    font-style: italic;
  }

  /* ============== LIST CARD ============== */
  body.page-promotioncode-crud .list-card{
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: fit-content;
  }

  body.page-promotioncode-crud .list-header{
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--ink-200);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.875rem;
  }

  body.page-promotioncode-crud .list-title{
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  body.page-promotioncode-crud .list-title i{
    font-size: 1.25rem;
  }

  /* ============== SEARCH & FILTER ============== */
  body.page-promotioncode-crud .search-filter-section{
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ink-200);
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    background: var(--surface-primary);
  }

  body.page-promotioncode-crud .search-wrapper{
    position: relative;
    flex: 1;
    min-width: 170px;
  }

  body.page-promotioncode-crud .search-input{
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2rem;
    border: 1px solid var(--ink-200);
    border-radius: 0.5rem;
    background: var(--surface-primary);
    color: var(--ink-700);
    font-size: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: var(--font-family-primary);
  }

  body.page-promotioncode-crud .search-input::placeholder{
    color: var(--ink-400);
  }

  body.page-promotioncode-crud .search-input:focus{
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(2, 84, 45, 0.1);
    background: var(--surface-primary);
  }

  body.page-promotioncode-crud .search-icon{
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    font-size: 0.875rem;
    pointer-events: none;
  }

  body.page-promotioncode-crud .search-clear{
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ink-400);
    cursor: pointer;
    padding: 0.2rem;
    display: none;
  }

  body.page-promotioncode-crud .search-input:not(:placeholder-shown)~.search-clear{
    display: block;
  }

  /* ============== LIST STATS ============== */
  body.page-promotioncode-crud .list-stats{
    padding: 0.75rem 1rem;
    background: var(--surface-primary);
    border-bottom: 1px solid var(--ink-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.875rem;
  }

  body.page-promotioncode-crud .list-count{
    font-size: 0.6875rem;
    color: var(--ink-500);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  /* ============== PROMO LIST ============== */
  body.page-promotioncode-crud .promo-list{
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 350px);
  }

  body.page-promotioncode-crud .promo-list::-webkit-scrollbar{
    width: 8px;
  }

  body.page-promotioncode-crud .promo-list::-webkit-scrollbar-track{
    background: var(--surface-tertiary);
    border-radius: 0.5rem;
  }

  body.page-promotioncode-crud .promo-list::-webkit-scrollbar-thumb{
    background: var(--brand-accent-vibrant);
    border-radius: 0.5rem;
    border: 2px solid var(--surface-tertiary);
  }

  body.page-promotioncode-crud .promo-list::-webkit-scrollbar-thumb:hover{
    background: var(--brand-primary);
  }

  /* ============== PROMO ITEM ============== */
  body.page-promotioncode-crud .promo-item{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid var(--ink-200);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
    gap: 0.875rem;
  }

  body.page-promotioncode-crud .promo-item:hover{
    background: rgba(2, 84, 45, 0.05);
    border-left-color: var(--brand-primary);
    transform: translateX(2px);
  }

  body.page-promotioncode-crud .promo-item:last-child{
    border-bottom: none;
  }

  body.page-promotioncode-crud .promo-content{
    flex: 1;
    min-width: 0;
  }

  body.page-promotioncode-crud .promo-header-inner{
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
  }

  body.page-promotioncode-crud .promo-badge{
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.625rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: white;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    white-space: nowrap;
  }

  body.page-promotioncode-crud .promo-meta{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
    font-size: 0.7rem;
    color: var(--ink-600);
  }

  body.page-promotioncode-crud .promo-meta-item{
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  body.page-promotioncode-crud .promo-meta-item i{
    color: var(--brand-primary);
    font-size: 0.8rem;
  }

  body.page-promotioncode-crud .promo-dates{
    font-size: 0.6875rem;
    color: var(--ink-500);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  body.page-promotioncode-crud .promo-actions{
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
  }

  body.page-promotioncode-crud .promo-actions .btn{
    width: 2rem;
    height: 2rem;
    padding: 0;
    justify-content: center;
  }

  /* ============== EMPTY STATE ============== */
  body.page-promotioncode-crud .empty-state{
    text-align: center;
    padding: 2.5rem 1.625rem;
    color: var(--ink-500);
  }

  body.page-promotioncode-crud .empty-icon{
    font-size: 2.875rem;
    margin-bottom: 0.875rem;
    opacity: 0.5;
    color: var(--brand-primary);
  }

  body.page-promotioncode-crud .empty-title{
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-700);
    margin-bottom: 0.4rem;
  }

  body.page-promotioncode-crud .empty-subtitle{
    font-size: 0.7rem;
    color: var(--ink-500);
    margin: 0;
  }

  /* ============== TOAST NOTIFICATION ============== */
  body.page-promotioncode-crud .toast{
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    background: var(--surface-primary);
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    padding: 0.875rem 1.25rem;
    border-radius: 0.625rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 1050;
    transform: translateX(calc(100% + 1.625rem));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: var(--font-weight-semibold);
    font-size: 0.7rem;
    min-width: 270px;
    max-width: 340px;
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }

  body.page-promotioncode-crud .toast-show{
    transform: translateX(0);
  }

  body.page-promotioncode-crud .toast-success{
    border-left: 4px solid #22c55e;
  }

  body.page-promotioncode-crud .toast-success::before{
    content: "✓";
    color: #22c55e;
    font-weight: bold;
    font-size: 1.25rem;
  }

  body.page-promotioncode-crud .toast-error{
    border-left: 4px solid #ef4444;
  }

  body.page-promotioncode-crud .toast-error::before{
    content: "✕";
    color: #ef4444;
    font-weight: bold;
    font-size: 1.25rem;
  }

  body.page-promotioncode-crud .toast-info{
    border-left: 4px solid #3b82f6;
  }

  body.page-promotioncode-crud .toast-info::before{
    content: "ⓘ";
    color: #3b82f6;
    font-weight: bold;
    font-size: 1.25rem;
  }

  /* ============== SKELETON LOADER ============== */
  body.page-promotioncode-crud .skeleton{
    background: linear-gradient(90deg, var(--ink-200) 25%, var(--ink-100) 50%, var(--ink-200) 75%);
    background-size: 200% 100%;
    animation: promotioncode-crud--shimmer 1.5s infinite;
    border-radius: 0.5rem;
  }

  @keyframes promotioncode-crud--shimmer {
    0% {
      background-position: -200px 0;
    }

    100% {
      background-position: 200px 0;
    }
  }

  @keyframes promotioncode-crud--slideUp {
    from {
      opacity: 0;
      transform: translateY(25px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes promotioncode-crud--fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  body.page-promotioncode-crud .animate-slide-up{
    animation: promotioncode-crud--slideUp 0.5s ease-out forwards;
  }

  body.page-promotioncode-crud .animate-fade-in{
    animation: promotioncode-crud--fadeIn 0.4s ease-out forwards;
  }

  /* ============== RESPONSIVE DESIGN ============== */
  @media (max-width: 1280px) {
    body.page-promotioncode-crud .promo-grid{
      grid-template-columns: 1fr 1.5fr;
      gap: 1.25rem;
    }
  }

  @media (max-width: 1024px) {
    body.page-promotioncode-crud .promo-grid{
      grid-template-columns: 1fr;
    }

    body.page-promotioncode-crud .form-card{
      position: relative;
      top: auto;
    }

    body.page-promotioncode-crud .header-wrapper{
      flex-direction: column;
      align-items: flex-start;
    }

    body.page-promotioncode-crud .header-actions{
      width: 100%;
    }

    body.page-promotioncode-crud .promo-list{
      max-height: 60vh;
    }
  }

  @media (max-width: 768px) {
    body.page-promotioncode-crud .promo-container{
      padding: 0.75rem;
    }

    body.page-promotioncode-crud .promo-header{
      padding: 1rem;
      margin-bottom: 1rem;
    }

    body.page-promotioncode-crud .header-title{
      font-size: 1.5rem;
    }

    body.page-promotioncode-crud .header-title i{
      font-size: 1.75rem;
    }

    body.page-promotioncode-crud .promo-item{
      flex-direction: column;
      padding: 1rem;
    }

    body.page-promotioncode-crud .promo-actions{
      width: 100%;
      justify-content: flex-end;
    }

    body.page-promotioncode-crud .search-filter-section{
      flex-direction: column;
    }

    body.page-promotioncode-crud .search-wrapper{
      min-width: 100%;
    }

    body.page-promotioncode-crud .promo-meta{
      gap: 0.75rem;
    }

    body.page-promotioncode-crud .toast{
      min-width: 90vw;
      max-width: calc(100vw - 2rem);
      left: 1rem;
      right: 1rem;
      top: auto;
      bottom: 1.5rem;
    }

    body.page-promotioncode-crud .form-actions{
      flex-direction: column;
    }

    body.page-promotioncode-crud .btn-sm{
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    body.page-promotioncode-crud .promo-container{
      padding: 0.5rem;
    }

    body.page-promotioncode-crud .promo-header{
      padding: 0.875rem;
      margin-bottom: 0.75rem;
    }

    body.page-promotioncode-crud .header-wrapper{
      gap: 1rem;
    }

    body.page-promotioncode-crud .header-title{
      font-size: 1.25rem;
    }

    body.page-promotioncode-crud .header-title i{
      font-size: 1.5rem;
    }

    body.page-promotioncode-crud .form-header,
body.page-promotioncode-crud .list-header,
body.page-promotioncode-crud .form-body{
      padding: 1rem;
    }

    body.page-promotioncode-crud .form-title,
body.page-promotioncode-crud .list-title{
      font-size: 1.1rem;
    }

    body.page-promotioncode-crud .promo-item{
      padding: 0.875rem;
    }

    body.page-promotioncode-crud .promo-meta{
      gap: 0.5rem;
      font-size: 0.75rem;
    }

    body.page-promotioncode-crud .promo-badge{
      font-size: 0.7rem;
      padding: 0.35rem 0.6rem;
    }

    body.page-promotioncode-crud .btn{
      padding: 0.5rem 0.75rem;
      font-size: 0.7rem;
    }

    body.page-promotioncode-crud .btn-icon{
      width: 2rem;
      height: 2rem;
    }

    body.page-promotioncode-crud .toast{
      font-size: 0.75rem;
      min-width: 85vw;
    }
  }


/* ==========================================================
   Template: register.html (page-register)
   ========================================================== */

        body.page-register{
            --primary-dark: #1a4b3a;
            --primary-main: #1a4b3a;
            --primary-light: #2d7a5f;
            --primary-bg: #f0f7f4;
            --accent: #1e6b4f;
            --surface: #ffffff;
            --surface-elevated: #fafbfa;
            --text-primary: #1a1a1a;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-light: #e5e7eb;
            --border-focus: #1a4b3a;
            --success: #10b981;
            --success-dark: #059669;
            --error: #ef4444;
            --error-dark: #dc2626;
            --info: #1a4b3a;
            --warning: #f59e0b;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
            --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, .1);
            --shadow-lg: 0 8px 12px -3px rgba(0, 0, 0, .1);
            --shadow-xl: 0 16px 20px -5px rgba(0, 0, 0, .1);

            --radius-sm: 7px;
            --radius-md: 10px;
            --radius-lg: 13px;
            --radius-xl: 19px;
        }

        body.page-register *{
            box-sizing: border-box
        }

        body.page-register{
            font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
            background:
                radial-gradient(48rem 48rem at -10% -20%, rgba(26, 75, 58, .08), transparent 60%),
                radial-gradient(48rem 48rem at 110% 120%, rgba(30, 107, 79, .08), transparent 60%),
                linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 45%, var(--primary-bg) 100%);
            color: var(--text-primary);
            line-height: 1.5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(0.4rem, 1.5vw, 1.5rem);
            overflow-x: hidden;
            overflow-y: auto;
        }

        /* Toast Container */
        body.page-register .toast-container{
            position: fixed;
            top: 12px;
            right: 12px;
            z-index: 9999;
            max-width: 300px;
        }

        body.page-register .toast-notification{
            background: white;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-xl);
            padding: 0.75rem 0.95rem;
            margin-bottom: 8px;
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            min-width: 260px;
            border-left: 3px solid;
        }

        body.page-register .toast-notification.success{
            border-left-color: var(--success);
            background: #ffffff;
        }

        body.page-register .toast-notification.error{
            border-left-color: var(--error);
            background: #ffffff;
        }

        body.page-register .toast-notification.info{
            border-left-color: var(--info);
            background: #ffffff;
        }

        body.page-register .toast-notification.warning{
            border-left-color: var(--warning);
            background: #ffffff;
        }

        body.page-register .toast-icon{
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            font-size: 0.88rem;
        }

        body.page-register .toast-notification.success .toast-icon{
            background: rgba(16, 185, 129, .1);
            color: var(--success-dark);
        }

        body.page-register .toast-notification.error .toast-icon{
            background: rgba(239, 68, 68, .1);
            color: var(--error-dark);
        }

        body.page-register .toast-notification.info .toast-icon{
            background: rgba(26, 75, 58, .1);
            color: var(--info);
        }

        body.page-register .toast-notification.warning .toast-icon{
            background: rgba(245, 158, 11, .1);
            color: var(--warning);
        }

        body.page-register .toast-content{
            flex: 1;
            padding-top: 1px;
        }

        body.page-register .toast-title{
            font-weight: 700;
            font-size: 0.74rem;
            color: var(--text-primary);
            margin-bottom: 0.2rem;
        }

        body.page-register .toast-message{
            font-size: 0.68rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        body.page-register .toast-close{
            background: rgba(0, 0, 0, .04);
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.2rem;
            font-size: 0.76rem;
            border-radius: 5px;
            width: 21px;
            height: 21px;
            display: grid;
            place-items: center;
        }

        body.page-register .toast-close:hover{
            background: rgba(0, 0, 0, .08);
            color: var(--text-primary);
        }

        /* Main Container - Optimized for 1700x956 at 100% zoom */
        body.page-register .main-container{
            display: grid;
            grid-template-columns: 28fr 72fr;
            width: 100%;
            max-width: 1280px;
            height: 680px;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(16px);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            border: 1px solid rgba(255, 255, 255, .8);
            overflow: hidden;
        }

        /* HERO SECTION - 28% */
        body.page-register .hero-section{
            background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary-main) 50%, var(--accent) 100%);
            color: #fff;
            padding: 2rem 1.6rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        body.page-register .hero-section::before,
body.page-register .hero-section::after{
            content: "";
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 6s ease-in-out infinite;
            pointer-events: none;
        }

        body.page-register .hero-section::before{
            width: 160px;
            height: 160px;
            top: -40px;
            right: -40px;
            animation-delay: 0s;
        }

        body.page-register .hero-section::after{
            width: 120px;
            height: 120px;
            bottom: -24px;
            left: -24px;
            animation-delay: 3s;
        }

        body.page-register .hero-section > *{
            position: relative;
            z-index: 1;
        }

        body.page-register .hero-logo{
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .16);
            border: 2px solid rgba(255, 255, 255, .3);
            margin-bottom: 1.1rem;
        }

        body.page-register .hero-logo i{
            font-size: 1.4rem;
            color: #fff;
        }

        body.page-register .hero-title{
            font-family: "Poppins", sans-serif;
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 0.65rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        body.page-register .hero-subtitle{
            line-height: 1.5;
            margin-bottom: 0.95rem;
            font-size: 0.8rem;
            font-weight: 400;
            opacity: 0.95;
        }

        body.page-register .hero-points{
            list-style: none;
            margin: 0.75rem 0 0;
            padding: 0;
        }

        body.page-register .hero-points li{
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin: 0.45rem 0;
            font-size: 0.76rem;
            font-weight: 500;
            padding: 0.25rem 0;
        }

        body.page-register .hero-points li i{
            font-size: 0.84rem;
        }

        /* FORM SECTION - 72% */
        body.page-register .form-section{
            background: var(--surface);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        body.page-register .form-header-sticky{
            position: sticky;
            top: 0;
            z-index: 10;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            padding: 1.4rem 2rem 0;
            border-bottom: 1px solid transparent;
            flex-shrink: 0;
        }

        body.page-register .form-header-sticky.scrolled{
            border-bottom-color: var(--border-light);
            box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
        }

        body.page-register .form-header{
            text-align: center;
            margin-bottom: 0.8rem;
        }

        body.page-register .form-title{
            font-family: "Poppins", sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 0.3rem;
            letter-spacing: -0.02em;
        }

        body.page-register .form-subtitle{
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 500;
        }

        /* Progress Bar */
        body.page-register .progress-container{
            margin: 0.8rem 0 0.7rem;
            padding: 0.7rem 0.9rem;
            background: var(--primary-bg);
            border-radius: var(--radius-md);
            border: 1px solid rgba(26, 75, 58, .15);
        }

        body.page-register .progress-label{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.4rem;
            font-size: 0.69rem;
            color: var(--text-secondary);
            font-weight: 600;
        }

        body.page-register .progress-percentage{
            font-size: 0.84rem;
            color: var(--primary-main);
            font-weight: 700;
        }

        body.page-register .progress-bar-custom{
            height: 7px;
            background: rgba(229, 231, 235, 0.8);
            border-radius: 999px;
            overflow: hidden;
        }

        body.page-register .progress-fill{
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--primary-main) 0%, var(--accent) 100%);
            transition: width 0.5s ease;
            border-radius: 999px;
        }

        /* SCROLLABLE FORM CONTENT */
        body.page-register .form-content-wrapper{
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 2rem 1.6rem;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-light) var(--border-light);
        }

        body.page-register .form-content-wrapper::-webkit-scrollbar{
            width: 6px;
        }

        body.page-register .form-content-wrapper::-webkit-scrollbar-track{
            background: var(--surface-elevated);
            border-radius: 8px;
            margin: 8px 0;
        }

        body.page-register .form-content-wrapper::-webkit-scrollbar-thumb{
            background: var(--primary-main);
            border-radius: 8px;
            border: 1px solid var(--surface-elevated);
        }

        body.page-register .form-content-wrapper::-webkit-scrollbar-thumb:hover{
            background: var(--primary-dark);
        }

        /* Form Fields */
        body.page-register .register-form{
            /* No animation */
        }

        body.page-register .form-group{
            margin-bottom: 0.85rem;
        }

        body.page-register .form-label{
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.4rem;
            font-size: 0.71rem;
            letter-spacing: -0.01em;
        }

        /* Inline optional marker placed to the right of labels */
        body.page-register .label-row{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        body.page-register .label-row .form-text{
            margin: 0;
            font-size: 0.71rem;
            color: var(--text-secondary);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        body.page-register .form-label i{
            color: var(--primary-main);
            font-size: 0.77rem;
        }

        body.page-register .form-control,
body.page-register .form-select{
            width: 100%;
            padding: 0.68rem 0.8rem;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-md);
            font-size: 0.71rem;
            transition: all 0.2s ease;
            background: var(--surface);
            font-weight: 500;
        }

        body.page-register .form-control:hover,
body.page-register .form-select:hover{
            border-color: #cbd5e1;
        }

        body.page-register .form-control:focus,
body.page-register .form-select:focus{
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 3px rgba(26, 75, 58, .1);
            background: var(--surface-elevated);
        }

        body.page-register .form-control::placeholder{
            color: var(--text-muted);
            font-weight: 400;
        }

        /* Password Wrapper */
        body.page-register .password-wrapper{
            position: relative;
        }

        body.page-register .password-toggle,
body.page-register .password-info-btn{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border: 1.5px solid var(--border-light);
            background: white;
            border-radius: 7px;
            width: 28px;
            height: 28px;
            display: grid;
            place-items: center;
            cursor: pointer;
            z-index: 2;
            font-size: 0.8rem;
            transition: all 0.2s ease;
        }

        body.page-register .password-toggle{
            right: 7px;
            color: var(--text-secondary);
        }

        body.page-register .password-info-btn{
            right: 40px;
            color: var(--primary-main);
        }

        body.page-register .password-toggle:hover{
            background: var(--primary-bg);
            border-color: var(--primary-main);
            color: var(--primary-main);
        }

        body.page-register .password-info-btn:hover{
            background: rgba(26, 75, 58, .1);
            border-color: var(--primary-main);
        }

        /* Validation */
        body.page-register .invalid-feedback{
            display: none;
            color: var(--error-dark);
            font-size: 0.64rem;
            margin-top: 0.35rem;
            padding: 0.35rem 0.5rem;
            background: rgba(239, 68, 68, .08);
            border-radius: 6px;
            border-left: 2px solid var(--error);
        }

        /* Match the JS contract: errors are written to the .invalid-feedback
           inside the field's .form-group, regardless of how deeply the control
           is wrapped (.password-wrapper) or what sits between them (.form-text,
           #industryError). Adjacent-sibling selectors miss those cases. */
        body.page-register .form-group:has(.is-invalid) .invalid-feedback{
            display: block;
        }

        body.page-register .form-control.is-invalid,
body.page-register .form-select.is-invalid{
            border-color: var(--error);
            background: rgba(239, 68, 68, .03);
        }

        body.page-register .form-control.is-valid,
body.page-register .form-select.is-valid{
            border-color: var(--success);
            background: rgba(16, 185, 129, .03);
        }

        body.page-register .form-text{
            font-size: 0.62rem;
            margin-top: 0.32rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 0.28rem;
            font-weight: 500;
        }

        body.page-register .form-text i{
            font-size: 0.6rem;
        }

        /* Submit Button */
        body.page-register .btn-register{
            width: 75%;
            display: block;
            margin: 1.3rem auto 0;
            padding: 0.78rem 1.4rem;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 0.8rem;
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
            color: #fff;
            box-shadow: 0 8px 20px rgba(26, 75, 58, .3);
            transition: all 0.2s ease;
            letter-spacing: 0.02em;
            cursor: pointer;
            position: relative;
        }

        body.page-register .btn-register:hover:not(:disabled){
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(26, 75, 58, .4);
        }

        body.page-register .btn-register:active{
            transform: translateY(0);
        }

        body.page-register .btn-register:disabled{
            opacity: 0.7;
            cursor: not-allowed;
        }

        body.page-register .btn-register.loading{
            color: transparent;
        }

        body.page-register .btn-register.loading:after{
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, .3);
            border-top-color: #fff;
            animation: register--spin 0.8s linear infinite;
        }

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

        body.page-register .form-links{
            text-align: center;
            margin-top: 1.2rem;
            padding-top: 1rem;
            border-top: 1.5px solid var(--border-light);
            font-size: 0.74rem;
        }

        body.page-register .form-links a{
            color: var(--primary-main);
            font-weight: 700;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        body.page-register .form-links a:hover{
            color: var(--accent);
            text-decoration: underline;
        }

        body.page-register .register-success-state{
            display: none;
            text-align: center;
            margin-top: 1rem;
            padding: 1.4rem 1.2rem;
            border: 1px solid rgba(16, 185, 129, .18);
            background: linear-gradient(135deg, rgba(16, 185, 129, .08) 0%, rgba(26, 75, 58, .05) 100%);
            border-radius: var(--radius-lg);
        }

        body.page-register .register-success-state.show{
            display: block;
            animation: fadeIn .3s ease-out;
        }

        body.page-register .register-success-icon{
            width: 52px;
            height: 52px;
            margin: 0 auto .85rem;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(16, 185, 129, .12);
            color: var(--success-dark);
            font-size: 1.35rem;
        }

        body.page-register .register-success-title{
            font-family: "Poppins", sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: .35rem;
        }

        body.page-register .register-success-copy{
            font-size: .8rem;
            color: var(--text-secondary);
            max-width: 36rem;
            margin: 0 auto;
        }

        body.page-register .register-success-copy strong{
            color: var(--text-primary);
        }

        body.page-register .register-success-note{
            margin-top: .55rem;
            font-size: .75rem;
        }

        body.page-register .register-success-actions{
            display: flex;
            justify-content: center;
            gap: .75rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        body.page-register .register-success-link{
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .72rem 1rem;
            border-radius: var(--radius-md);
            font-size: .78rem;
            font-weight: 700;
            text-decoration: none;
            border: 1px solid transparent;
            cursor: pointer;
            font-family: inherit;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
        }

        body.page-register .register-success-link.primary{
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
            color: #fff;
            box-shadow: var(--shadow-md);
        }

        body.page-register .register-success-link.secondary{
            background: #fff;
            color: var(--primary-main);
            border: 1px solid var(--border-light);
        }

        body.page-register .register-success-link:hover{
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        /* Modal */
        body.page-register .modal-content{
            border-radius: var(--radius-xl);
            border: none;
            box-shadow: var(--shadow-xl);
        }

        body.page-register .modal-header{
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
            color: white;
            padding: 1.1rem 1.35rem;
            border: none;
        }

        body.page-register .modal-title{
            font-weight: 700;
            font-size: 0.92rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        body.page-register .modal-title i{
            font-size: 1rem;
        }

        body.page-register .modal-header .btn-close{
            filter: brightness(0) invert(1);
            opacity: 0.9;
        }

        body.page-register .modal-body{
            padding: 1.4rem;
            background: var(--primary-bg);
        }

        body.page-register .modal-intro{
            color: var(--text-secondary);
            margin-bottom: 1.1rem;
            font-size: 0.74rem;
            padding: 0.75rem;
            background: white;
            border-radius: var(--radius-sm);
            border-left: 3px solid var(--info);
        }

        body.page-register .requirement-item{
            display: flex;
            align-items: center;
            gap: 0.68rem;
            padding: 0.75rem 0.84rem;
            margin: 0.42rem 0;
            background: white;
            border-radius: var(--radius-md);
            font-size: 0.74rem;
            color: var(--text-primary);
            border: 1.5px solid var(--border-light);
            font-weight: 500;
            transition: all 0.2s ease;
        }

        body.page-register .requirement-item i{
            font-size: 0.92rem;
            color: var(--text-muted);
        }

        body.page-register .requirement-item.met{
            background: rgba(16, 185, 129, .08);
            border-color: var(--success);
            color: var(--success-dark);
        }

        body.page-register .requirement-item.met i{
            color: var(--success);
        }

        /* Row gap adjustment */
        body.page-register .row.g-3{
            --bs-gutter-x: 0.8rem;
            --bs-gutter-y: 0.5rem;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1400px) {
            body.page-register .main-container{
                max-width: min(1180px, 96vw);
                height: clamp(600px, 75vh, 680px);
            }
        }

        @media (max-width: 1200px) {
            body.page-register .main-container{
                max-width: min(1050px, 96vw);
                height: clamp(560px, 72vh, 640px);
            }

            body.page-register .form-header-sticky{
                padding: 1.2rem 1.8rem 0;
            }

            body.page-register .form-content-wrapper{
                padding: 0 1.8rem 1.4rem;
            }

            body.page-register .hero-section{
                padding: 1.8rem 1.4rem;
            }

            body.page-register .hero-title{
                font-size: 1.8rem;
            }

            body.page-register .form-title{
                font-size: 1.35rem;
            }
        }

        @media (max-width: 1024px) {
            body.page-register{
                align-items: flex-start;
            }

            body.page-register .main-container{
                grid-template-columns: 1fr;
                height: auto;
                max-height: none;
                overflow: visible;
            }

            body.page-register .form-section,
body.page-register .form-content-wrapper{
                overflow: visible;
            }

            body.page-register .form-content-wrapper{
                flex: 0 1 auto;
            }

            body.page-register .hero-section{
                text-align: center;
                padding: 1.5rem 1.2rem;
            }

            body.page-register .hero-points{
                display: inline-block;
                text-align: left;
            }
        }

        @media (max-width: 768px) {
            body.page-register .btn-register{
                width: 100%;
            }

            body.page-register .password-info-btn{
                right: 38px;
            }

            body.page-register .row.g-3 > .col-md-4{
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            body.page-register .toast-notification{
                min-width: auto;
            }

            body.page-register .form-header-sticky{
                padding: 1rem 1.2rem 0;
            }

            body.page-register .form-content-wrapper{
                padding: 0 1.2rem 1.2rem;
            }
        }

        /* Dark Mode */
        html[data-theme="dark"] body.page-register{
            color-scheme: dark;
        }

        html[data-theme="dark"] body.page-register{
            background:
                radial-gradient(48rem 48rem at -10% -20%, rgba(8, 73, 40, .22), transparent 58%),
                radial-gradient(48rem 48rem at 110% 120%, rgba(8, 73, 40, .12), transparent 58%),
                linear-gradient(135deg, #05100b 0%, #08110d 50%, #06100b 100%);
            color: var(--wb-text, #edf5ef);
        }

        html[data-theme="dark"] body.page-register .main-container{
            background: linear-gradient(180deg, rgba(16, 24, 20, 0.98) 0%, rgba(10, 16, 13, 0.98) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
        }

        html[data-theme="dark"] body.page-register .hero-section{
            background: linear-gradient(145deg, #06291a 0%, #084928 50%, #0c6237 100%);
            border-right: 1px solid rgba(255, 255, 255, 0.06);
        }

        html[data-theme="dark"] body.page-register .form-section{
            background: linear-gradient(180deg, rgba(13, 19, 16, 0.98) 0%, rgba(11, 17, 14, 0.98) 100%);
            color: var(--wb-text, #edf5ef);
        }

        html[data-theme="dark"] body.page-register .form-header-sticky{
            background: rgba(13, 19, 16, 0.96);
            border-bottom-color: rgba(255, 255, 255, 0.06);
        }

        html[data-theme="dark"] body.page-register .form-header-sticky.scrolled{
            border-bottom-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
        }

        html[data-theme="dark"] body.page-register .form-title,
html[data-theme="dark"] body.page-register .register-success-title{
            color: #eef6f1;
        }

        html[data-theme="dark"] body.page-register .form-subtitle,
html[data-theme="dark"] body.page-register .progress-label,
html[data-theme="dark"] body.page-register .label-row .form-text,
html[data-theme="dark"] body.page-register .form-text,
html[data-theme="dark"] body.page-register .register-success-copy,
html[data-theme="dark"] body.page-register .toast-message,
html[data-theme="dark"] body.page-register .toast-close{
            color: var(--wb-text-muted, #9eaea5);
        }

        html[data-theme="dark"] body.page-register .progress-container{
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.08);
        }

        html[data-theme="dark"] body.page-register .progress-bar-custom{
            background: rgba(255, 255, 255, 0.08);
        }

        html[data-theme="dark"] body.page-register .progress-percentage,
html[data-theme="dark"] body.page-register .form-label i,
html[data-theme="dark"] body.page-register .register-success-icon,
html[data-theme="dark"] body.page-register .toast-notification.info .toast-icon{
            color: #c9f5d4;
        }

        html[data-theme="dark"] body.page-register .form-label{
            color: var(--wb-text, #edf5ef);
        }

        html[data-theme="dark"] body.page-register .form-control,
html[data-theme="dark"] body.page-register .form-select{
            background: rgba(255, 255, 255, 0.03);
            color: var(--wb-text, #edf5ef);
            border-color: rgba(255, 255, 255, 0.08);
        }

        html[data-theme="dark"] body.page-register .form-control:hover,
html[data-theme="dark"] body.page-register .form-select:hover{
            border-color: rgba(8, 73, 40, 0.35);
        }

        html[data-theme="dark"] body.page-register .form-control:focus,
html[data-theme="dark"] body.page-register .form-select:focus{
            background: rgba(255, 255, 255, 0.045);
            border-color: rgba(8, 73, 40, 0.56);
            box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.16);
        }

        html[data-theme="dark"] body.page-register .form-control::placeholder{
            color: var(--wb-text-soft, #72837a);
        }

        html[data-theme="dark"] body.page-register .password-toggle,
html[data-theme="dark"] body.page-register .password-info-btn{
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
            color: var(--wb-text-muted, #9eaea5);
        }

        html[data-theme="dark"] body.page-register .password-toggle:hover,
html[data-theme="dark"] body.page-register .password-info-btn:hover{
            background: rgba(8, 73, 40, 0.14);
            border-color: rgba(8, 73, 40, 0.34);
            color: #eef6f1;
        }

        html[data-theme="dark"] body.page-register .invalid-feedback{
            background: rgba(239, 68, 68, 0.12);
            color: #fecaca;
            border-left-color: #ef4444;
        }

        html[data-theme="dark"] body.page-register .form-control.is-invalid,
html[data-theme="dark"] body.page-register .form-select.is-invalid{
            background: rgba(239, 68, 68, 0.06);
        }

        html[data-theme="dark"] body.page-register .form-control.is-valid,
html[data-theme="dark"] body.page-register .form-select.is-valid{
            background: rgba(16, 185, 129, 0.06);
        }

        html[data-theme="dark"] body.page-register .btn-register{
            background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
            color: #eff9f2;
            box-shadow: 0 16px 34px rgba(8, 73, 40, 0.24);
        }

        html[data-theme="dark"] body.page-register .btn-register:hover:not(:disabled){
            box-shadow: 0 20px 40px rgba(8, 73, 40, 0.32);
        }

        html[data-theme="dark"] body.page-register .btn-register.loading:after{
            border-color: rgba(255, 255, 255, 0.24);
            border-top-color: #fff;
        }

        html[data-theme="dark"] body.page-register .form-links{
            border-top-color: rgba(255, 255, 255, 0.08);
            color: var(--wb-text-muted, #9eaea5);
        }

        html[data-theme="dark"] body.page-register .form-links a{
            color: #c9f5d4;
        }

        html[data-theme="dark"] body.page-register .form-links a:hover{
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-register .register-success-state{
            background: linear-gradient(180deg, rgba(8, 73, 40, 0.16) 0%, rgba(16, 24, 20, 0.98) 100%);
            border-color: rgba(8, 73, 40, 0.28);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
        }

        html[data-theme="dark"] body.page-register .register-success-icon{
            background: rgba(8, 73, 40, 0.18);
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-register .register-success-copy strong{
            color: #eef6f1;
        }

        html[data-theme="dark"] body.page-register .register-success-link.primary{
            background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-register .register-success-link.secondary{
            background: rgba(255, 255, 255, 0.03);
            color: #c9f5d4;
            border-color: rgba(255, 255, 255, 0.08);
        }

        html[data-theme="dark"] body.page-register .register-success-link.secondary:hover{
            background: rgba(8, 73, 40, 0.12);
            color: #eff9f2;
        }

        html[data-theme="dark"] body.page-register .toast-notification{
            background: rgba(15, 23, 19, 0.98);
            color: var(--wb-text, #edf5ef);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        html[data-theme="dark"] body.page-register .toast-title{
            color: #eef6f1;
        }

        html[data-theme="dark"] body.page-register .toast-close{
            background: rgba(255, 255, 255, 0.04);
        }

        html[data-theme="dark"] body.page-register .toast-close:hover{
            background: rgba(255, 255, 255, 0.08);
            color: #eef6f1;
        }

        html[data-theme="dark"] body.page-register .toast-notification.success{
            border-left-color: #22c55e;
        }

        html[data-theme="dark"] body.page-register .toast-notification.error{
            border-left-color: #ef4444;
        }

        html[data-theme="dark"] body.page-register .toast-notification.info{
            border-left-color: #0ea5e9;
        }

        html[data-theme="dark"] body.page-register .toast-notification.warning{
            border-left-color: #f59e0b;
        }

        html[data-theme="dark"] body.page-register .toast-notification.success .toast-icon{
            background: rgba(34, 197, 94, 0.14);
            color: #86efac;
        }

        html[data-theme="dark"] body.page-register .toast-notification.error .toast-icon{
            background: rgba(239, 68, 68, 0.14);
            color: #fecaca;
        }

        html[data-theme="dark"] body.page-register .toast-notification.warning .toast-icon{
            background: rgba(245, 158, 11, 0.14);
            color: #fcd34d;
        }

        html[data-theme="dark"] body.page-register .modal-content{
            background: linear-gradient(180deg, rgba(16, 24, 20, 0.98) 0%, rgba(12, 18, 15, 0.98) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
        }

        html[data-theme="dark"] body.page-register .modal-header{
            background: linear-gradient(135deg, rgba(8, 73, 40, 0.96) 0%, rgba(12, 98, 55, 0.94) 100%);
        }

        html[data-theme="dark"] body.page-register .modal-body{
            background: rgba(12, 18, 15, 0.98);
        }

        html[data-theme="dark"] body.page-register .modal-intro,
html[data-theme="dark"] body.page-register .requirement-item{
            background: rgba(255, 255, 255, 0.03);
            color: var(--wb-text, #edf5ef);
            border-color: rgba(255, 255, 255, 0.08);
        }

        html[data-theme="dark"] body.page-register .modal-intro{
            border-left-color: rgba(8, 73, 40, 0.72);
        }

        html[data-theme="dark"] body.page-register .requirement-item i{
            color: var(--wb-text-soft, #72837a);
        }

        html[data-theme="dark"] body.page-register .requirement-item.met{
            background: rgba(8, 73, 40, 0.16);
            border-color: rgba(8, 73, 40, 0.28);
            color: #d9fbe5;
        }

        html[data-theme="dark"] body.page-register .requirement-item.met i{
            color: #86efac;
        }

        html[data-theme="dark"] body.page-register #industryError{
            background: rgba(239, 68, 68, 0.12) !important;
            color: #fecaca !important;
            border-left-color: #ef4444 !important;
        }

        html[data-theme="dark"] body.page-register #industryErrorMsg{
            color: inherit !important;
        }

        html[data-theme="dark"] body.page-register #industryRetryBtn{
            background: rgba(255, 255, 255, 0.03) !important;
            color: #fecaca !important;
            border-color: rgba(239, 68, 68, 0.28) !important;
        }

        html[data-theme="dark"] body.page-register #industryRetryBtn:hover{
            background: rgba(239, 68, 68, 0.16) !important;
            color: #fff1f2 !important;
        }
    

/* ==========================================================
   Template: reset_password.html (page-reset-password)
   ========================================================== */

        body.page-reset-password{
            --primary-dark: #1a4b3a;
            --primary-main: #1a4b3a;
            --primary-light: #2d7a5f;
            --primary-bg: #f0f7f4;
            --accent: #1e6b4f;
            --surface: #ffffff;
            --surface-elevated: #fafbfa;
            --text-primary: #1a1a1a;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-light: #e5e7eb;
            --border-focus: #3b82f6;
            --success: #10b981;
            --success-dark: #059669;
            --error: #ef4444;
            --error-dark: #dc2626;
            --info: #3b82f6;
            --warning: #f59e0b;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
            --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, .1);
            --shadow-lg: 0 8px 12px -3px rgba(0, 0, 0, .1);
            --shadow-xl: 0 16px 20px -5px rgba(0, 0, 0, .1);

            --radius-sm: 7px;
            --radius-md: 10px;
            --radius-lg: 13px;
            --radius-xl: 19px;
        }

        body.page-reset-password *{
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        body.page-reset-password{
            font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
            background:
                radial-gradient(48rem 48rem at -10% -20%, rgba(26, 75, 58, .08), transparent 60%),
                radial-gradient(48rem 48rem at 110% 120%, rgba(30, 107, 79, .08), transparent 60%),
                linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 45%, var(--primary-bg) 100%);
            color: var(--text-primary);
            line-height: 1.5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(0.4rem, 1.5vw, 1.5rem);
            overflow-x: hidden;
        }

        /* Toast Container */
        body.page-reset-password .toast-container{
            position: fixed;
            top: 12px;
            right: 12px;
            z-index: 9999;
            max-width: 300px;
        }

        body.page-reset-password .toast-notification{
            background: white;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-xl);
            padding: 0.75rem 0.95rem;
            margin-bottom: 8px;
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            min-width: 260px;
            border-left: 3px solid;
            animation: reset-password--slideInRight 0.3s ease-out;
        }

        body.page-reset-password .toast-notification.success{ border-left-color: var(--success); }
        body.page-reset-password .toast-notification.error{ border-left-color: var(--error); }
        body.page-reset-password .toast-notification.info{ border-left-color: var(--info); }
        body.page-reset-password .toast-notification.warning{ border-left-color: var(--warning); }

        body.page-reset-password .toast-icon{
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            font-size: 0.88rem;
        }

        body.page-reset-password .toast-notification.success .toast-icon{ background: rgba(16, 185, 129, .1); color: var(--success-dark); }
        body.page-reset-password .toast-notification.error .toast-icon{ background: rgba(239, 68, 68, .1); color: var(--error-dark); }
        body.page-reset-password .toast-notification.info .toast-icon{ background: rgba(59, 130, 246, .1); color: var(--info); }
        body.page-reset-password .toast-notification.warning .toast-icon{ background: rgba(245, 158, 11, .1); color: var(--warning); }

        body.page-reset-password .toast-content{ flex: 1; padding-top: 1px; }
        body.page-reset-password .toast-title{ font-weight: 700; font-size: 0.74rem; color: var(--text-primary); margin-bottom: 0.2rem; }
        body.page-reset-password .toast-message{ font-size: 0.68rem; color: var(--text-secondary); line-height: 1.4; }

        body.page-reset-password .toast-close{
            background: rgba(0, 0, 0, .04);
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.2rem;
            font-size: 0.76rem;
            border-radius: 5px;
            width: 21px;
            height: 21px;
            display: grid;
            place-items: center;
        }

        body.page-reset-password .toast-close:hover{ background: rgba(0, 0, 0, .08); color: var(--text-primary); }

        /* Main Container - Optimized for 1700x956 */
        body.page-reset-password .main-container{
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            max-width: 1000px;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(16px);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            border: 1px solid rgba(255, 255, 255, .8);
            overflow: hidden;
            animation: reset-password--slideUp 0.6s ease-out;
        }

        /* Hero Section */
        body.page-reset-password .hero-section{
            background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary-main) 50%, var(--accent) 100%);
            color: #fff;
            padding: 2rem 1.6rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        body.page-reset-password .hero-section::before,
body.page-reset-password .hero-section::after{
            content: "";
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: reset-password--float 6s ease-in-out infinite;
        }

        body.page-reset-password .hero-section::before{
            width: 160px;
            height: 160px;
            top: -40px;
            right: -40px;
        }

        body.page-reset-password .hero-section::after{
            width: 120px;
            height: 120px;
            bottom: -30px;
            left: -30px;
            animation-delay: 3s;
        }

        body.page-reset-password .hero-content{ position: relative; z-index: 2; }

        body.page-reset-password .hero-logo{
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .16);
            border: 2px solid rgba(255, 255, 255, .3);
            margin-bottom: 1.1rem;
        }

        body.page-reset-password .hero-logo i{ font-size: 1.4rem; color: #fff; }

        body.page-reset-password .hero-title{
            font-family: "Poppins", sans-serif;
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 0.65rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        body.page-reset-password .hero-subtitle{
            line-height: 1.5;
            margin-bottom: 0.95rem;
            font-size: 0.8rem;
            font-weight: 400;
            opacity: 0.95;
        }

        body.page-reset-password .hero-points{ list-style: none; margin: 0.75rem 0 0; padding: 0; }

        body.page-reset-password .hero-points li{
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin: 0.45rem 0;
            font-size: 0.76rem;
            font-weight: 500;
            padding: 0.25rem 0;
        }

        body.page-reset-password .hero-points li i{ font-size: 0.84rem; }

        /* Form Section */
        body.page-reset-password .form-section{
            background: var(--surface);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 2rem 1.8rem;
        }

        body.page-reset-password .form-header{
            text-align: center;
            margin-bottom: 1.5rem;
        }

        body.page-reset-password .form-title{
            font-family: "Poppins", sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 0.3rem;
            letter-spacing: -0.02em;
        }

        body.page-reset-password .form-subtitle{
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 500;
        }

        body.page-reset-password .form-divider{
            width: 48px;
            height: 2.5px;
            background: linear-gradient(90deg, var(--primary-main), var(--accent));
            margin: 0.75rem auto 0;
            border-radius: 10px;
        }

        /* Form Fields */
        body.page-reset-password .reset-form{ animation: reset-password--fadeInUp 0.6s ease-out; }

        body.page-reset-password .form-group{ margin-bottom: 0.9rem; }

        body.page-reset-password .form-label{
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.4rem;
            font-size: 0.71rem;
            letter-spacing: -0.01em;
        }

        body.page-reset-password .form-label i{ color: var(--primary-main); font-size: 0.77rem; }

        body.page-reset-password .input-wrapper{ position: relative; }

        body.page-reset-password .input-icon{
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-main);
            font-size: 0.88rem;
            opacity: 0.8;
            pointer-events: none;
            transition: all 0.2s ease;
        }

        body.page-reset-password .form-control{
            width: 100%;
            padding: 0.68rem 2.8rem 0.68rem 2.4rem;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-md);
            font-size: 0.71rem;
            transition: all 0.2s ease;
            background: var(--surface);
            font-weight: 500;
        }

        body.page-reset-password .form-control:hover{ border-color: #cbd5e1; }

        body.page-reset-password .form-control:focus{
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
            background: var(--surface-elevated);
        }

        body.page-reset-password .form-control:focus + .input-icon{
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }

        body.page-reset-password .form-control::placeholder{ color: var(--text-muted); font-weight: 400; }

        body.page-reset-password .form-control.is-invalid{ border-color: var(--error); background: rgba(239, 68, 68, .03); }
        body.page-reset-password .form-control.is-valid{ border-color: var(--success); background: rgba(16, 185, 129, .03); }

        /* Password Toggle */
        body.page-reset-password .password-toggle{
            position: absolute;
            right: 0.6rem;
            top: 50%;
            transform: translateY(-50%);
            border: 1.5px solid var(--border-light);
            background: white;
            border-radius: 7px;
            width: 28px;
            height: 28px;
            display: grid;
            place-items: center;
            cursor: pointer;
            z-index: 2;
            font-size: 0.8rem;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        body.page-reset-password .password-toggle:hover{
            background: var(--primary-bg);
            border-color: var(--primary-main);
            color: var(--primary-main);
        }

        /* Password Strength */
        body.page-reset-password .password-strength{
            margin-top: 0.5rem;
            padding: 0.6rem;
            background: var(--primary-bg);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(26, 75, 58, .1);
        }

        body.page-reset-password .strength-label{
            font-size: 0.62rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 0.35rem;
        }

        body.page-reset-password .strength-bar{
            height: 5px;
            background: var(--border-light);
            border-radius: 999px;
            overflow: hidden;
            margin-bottom: 0.4rem;
        }

        body.page-reset-password .strength-fill{
            height: 100%;
            width: 0;
            border-radius: 999px;
            transition: all 0.3s ease;
        }

        body.page-reset-password .strength-fill.weak{ width: 25%; background: var(--error); }
        body.page-reset-password .strength-fill.fair{ width: 50%; background: var(--warning); }
        body.page-reset-password .strength-fill.good{ width: 75%; background: var(--info); }
        body.page-reset-password .strength-fill.strong{ width: 100%; background: var(--success); }

        body.page-reset-password .strength-requirements{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.25rem;
        }

        body.page-reset-password .requirement{
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.58rem;
            color: var(--text-muted);
        }

        body.page-reset-password .requirement i{ font-size: 0.6rem; }
        body.page-reset-password .requirement.met{ color: var(--success); }
        body.page-reset-password .requirement.met i{ color: var(--success); }

        /* Invalid Feedback */
        body.page-reset-password .invalid-feedback{
            display: none;
            color: var(--error-dark);
            font-size: 0.64rem;
            margin-top: 0.35rem;
            padding: 0.35rem 0.5rem;
            background: rgba(239, 68, 68, .08);
            border-radius: 6px;
            border-left: 2px solid var(--error);
        }

        body.page-reset-password .form-control.is-invalid ~ .invalid-feedback{ display: block; }

        /* Submit Button */
        body.page-reset-password .btn-reset{
            width: 100%;
            display: block;
            margin: 1.3rem auto 0;
            padding: 0.78rem 1.4rem;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 0.8rem;
            background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
            color: #fff;
            box-shadow: 0 8px 20px rgba(26, 75, 58, .3);
            transition: all 0.2s ease;
            letter-spacing: 0.02em;
            cursor: pointer;
            position: relative;
        }

        body.page-reset-password .btn-reset:hover:not(:disabled){
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(26, 75, 58, .4);
        }

        body.page-reset-password .btn-reset:active{ transform: translateY(0); }
        body.page-reset-password .btn-reset:disabled{ opacity: 0.7; cursor: not-allowed; }

        body.page-reset-password .btn-reset.loading{ color: transparent; }

        body.page-reset-password .btn-reset.loading:after{
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, .3);
            border-top-color: #fff;
            animation: reset-password--spin 0.8s linear infinite;
        }

        body.page-reset-password .btn-reset.success{
            background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
        }

        body.page-reset-password .form-links{
            text-align: center;
            margin-top: 1.2rem;
            padding-top: 1rem;
            border-top: 1.5px solid var(--border-light);
            font-size: 0.74rem;
        }

        body.page-reset-password .form-links a{
            color: var(--primary-main);
            font-weight: 700;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        body.page-reset-password .form-links a:hover{ color: var(--accent); text-decoration: underline; }

        /* Responsive */
        @media (max-width: 900px) {
            body.page-reset-password .main-container{
                grid-template-columns: 1fr;
                max-width: 480px;
            }

            body.page-reset-password .hero-section{
                text-align: center;
                padding: 1.5rem 1.2rem;
            }

            body.page-reset-password .hero-logo{ margin: 0 auto 1rem; }
            body.page-reset-password .hero-points{ display: inline-block; text-align: left; }
        }

        @media (max-width: 480px) {
            body.page-reset-password .form-section{ padding: 1.5rem 1rem; }
            body.page-reset-password .hero-section{ padding: 1.2rem 1rem; }
            body.page-reset-password .strength-requirements{ grid-template-columns: 1fr; }
        }

        /* Animations */
        @keyframes reset-password--slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes reset-password--fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes reset-password--slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes reset-password--float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

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

/* ==========================================================
   Template: service_category.html (page-service-category)
   ========================================================== */

    body.page-service-category #mainContent.content-area{
        background: var(--surface-white);
        display: flex;
        flex-direction: column;
    }

    /* ============================================================================
       CSS VARIABLES - Theme Tokens
       ============================================================================ */
    body.page-service-category{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;

        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;

        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;

        --border-200: #e5e7eb;

        --success: #22c55e;
        --error: #ef4444;

        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;

        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);

        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* ============================================================================
       PAGE CONTAINER
       ============================================================================ */
    body.page-service-category .cat-container{
        margin: 0 auto;
        width: 100%;
        min-width: 0;
        flex: 1;
        min-height: 100%;
        color: var(--text-700);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* ============================================================================
       UNIFIED HEADER CARD
       ============================================================================ */
    body.page-service-category .cat-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        padding: 1rem 1.25rem 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
    }

    body.page-service-category .cat-header-card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
        border-radius: var(--radius-xl);
    }

    body.page-service-category .cat-header-main{
        flex: 1 1 300px;
        min-width: 240px;
        position: relative;
        z-index: 1;
    }

    body.page-service-category .cat-page-title{
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0 0 .25rem 0;
        color: var(--primary-green);
        letter-spacing: -.01em;
    }

    body.page-service-category .cat-page-subtitle{
        font-size: .8rem;
        color: var(--text-500);
        font-weight: 500;
        margin: 0;
    }

    /* ============================================================================
       CONTROLS SECTION
       ============================================================================ */
    body.page-service-category .cat-controls-section{
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        position: relative;
        z-index: 1;
        flex: 1 1 420px;
    }

    body.page-service-category .cat-controls-grid{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .6rem;
        align-items: center;
        width: 100%;
    }

    /* Search */
    body.page-service-category .cat-search-container{
        position: relative;
        flex: 1 1 240px;
        min-width: 180px;
    }

    body.page-service-category .cat-search-icon{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .875rem;
        color: var(--text-500);
        pointer-events: none;
    }

    body.page-service-category .cat-search-input{
        width: 100%;
        height: 38px;
        padding: 0 10px 0 32px;
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .8125rem;
        transition: var(--transition-fast);
        outline: none;
    }

    body.page-service-category .cat-search-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    /* Sort Dropdown */
    body.page-service-category .cat-sort-container{
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }

    body.page-service-category .cat-sort-label{
        font-size: .75rem;
        color: var(--text-500);
        font-weight: 600;
        white-space: nowrap;
    }

    body.page-service-category .cat-dropdown{
        position: relative;
        width: 140px;
        max-width: 100%;
    }

    body.page-service-category .cat-dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0 12px;
        height: 38px;
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-lg);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
        outline: none;
        width: 100%;
    }

    body.page-service-category .cat-dropdown-trigger:hover{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-service-category .cat-dropdown-trigger:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-service-category .cat-dropdown-trigger.active{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        background: var(--primary-green-ghost);
    }

    body.page-service-category .cat-dropdown-arrow{
        transition: var(--transition-fast);
        color: var(--primary-green);
        font-size: .875rem;
    }

    body.page-service-category .cat-dropdown-trigger.active .cat-dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-service-category .cat-dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--transition-fast);
    }

    body.page-service-category .cat-dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    body.page-service-category .cat-dropdown-option{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--text-700);
        font-size: .8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-service-category .cat-dropdown-option:hover{
        background: var(--primary-green-light);
        color: var(--primary-green-dark);
    }

    body.page-service-category .cat-dropdown-option.selected{
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-weight: 600;
    }

    /* Add Button */
    body.page-service-category .cat-add-btn{
        padding: 0 18px;
        height: 38px;
        background: var(--gradient-primary);
        color: var(--surface-white);
        border: none;
        border-radius: var(--radius-lg);
        font-size: .8125rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 7px;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: var(--shadow-sm);
        letter-spacing: .01em;
    }

    body.page-service-category .cat-add-btn:hover{
        background: linear-gradient(135deg, var(--primary-green-dark) 0%, #011f15 100%);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        color: var(--surface-white);
        text-decoration: none;
    }

    body.page-service-category .cat-add-btn:active{
        transform: translateY(0);
        box-shadow: var(--shadow-sm);
    }

    body.page-service-category .cat-header-card .cat-add-btn{
        background: var(--surface-white);
        color: var(--primary-green);
        border: 1.5px solid var(--primary-green);
        box-shadow: none;
    }

    body.page-service-category .cat-header-card .cat-add-btn:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        transform: none;
        box-shadow: none;
    }

    /* ============================================================================
       KPI STATS GRID
       ============================================================================ */
    body.page-service-category .cat-stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 10px 0 16px;
    }

    body.page-service-category .cat-stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius-xl);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-fast);
        position: relative;
        overflow: hidden;
        cursor: default;
    }

    body.page-service-category .cat-stat-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-green-light);
    }

    body.page-service-category .cat-stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-service-category .cat-stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-service-category .cat-stat-value{
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-900);
    }

    /* ============================================================================
       GRID LAYOUT & CARDS
       ============================================================================ */
    body.page-service-category .cat-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /* ── Card shell ── */
    body.page-service-category .cat-card{
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
        transition: var(--transition);
        cursor: pointer;
        position: relative;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
    }
    body.page-service-category .cat-card:hover{
        border-color: var(--primary-green);
        transform: translateY(-3px);
        box-shadow: var(--hover-shadow);
    }

    /* ── Card top band: icon + title + order badge + action buttons ── */
    body.page-service-category .cat-card-header{
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: 1rem 1rem .75rem;
        background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
        border-bottom: 1px solid var(--border-200);
        position: relative;
    }

    body.page-service-category .cat-card-icon-box{
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
        transition: var(--transition-fast);
    }
    body.page-service-category .cat-card:hover .cat-card-icon-box{
        background: var(--primary-green);
        color: var(--surface-white);
    }

    body.page-service-category .cat-card-header-text{
        flex: 1;
        min-width: 0;
    }

    body.page-service-category .cat-card-title{
        font-size: .95rem;
        font-weight: 800;
        color: var(--text-900);
        margin: 0 0 .25rem 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    body.page-service-category .cat-card-level{
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        font-size: .65rem;
        padding: .15rem .45rem;
        background: var(--primary-green-light);
        color: var(--primary-green);
        border-radius: 99px;
        font-weight: 700;
        border: 1px solid transparent;
    }
    body.page-service-category .cat-card-level i{ font-size: .6rem; }

    /* 3 action buttons — top-right of header, revealed on hover */
    body.page-service-category .cat-card-actions{
        position: absolute;
        top: .65rem;
        right: .65rem;
        display: flex;
        gap: .3rem;
        opacity: 0;
        transform: translateY(-4px);
        transition: var(--transition-fast);
        pointer-events: none;
    }
    body.page-service-category .cat-card:hover .cat-card-actions{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    body.page-service-category .cat-card-action{
        width: 1.75rem;
        height: 1.75rem;
        border-radius: var(--radius-sm);
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        color: var(--text-700);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .7rem;
        cursor: pointer;
        transition: var(--transition-fast);
        box-shadow: var(--shadow-sm);
    }
    body.page-service-category .cat-card-action:hover{
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
        transform: scale(1.08);
    }
    body.page-service-category .cat-card-action.delete:hover{
        background: var(--error);
        border-color: var(--error);
    }
    body.page-service-category .cat-card-action.add:hover{
        background: var(--primary-green);
        border-color: var(--primary-green);
        color: var(--surface-white);
    }

    /* ── Card body: sub-category chips ── */
    body.page-service-category .cat-card-body{
        padding: .75rem 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    body.page-service-category .cat-card-chips-label{
        font-size: .65rem;
        font-weight: 700;
        color: var(--text-500);
        text-transform: uppercase;
        letter-spacing: .05em;
        display: flex;
        align-items: center;
        gap: .3rem;
    }
    body.page-service-category .cat-card-chips-label i{ color: var(--primary-green); }

    body.page-service-category .cat-card-subcategories{
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
        min-height: 1.6rem;
    }

    body.page-service-category .cat-subcategory-chip{
        padding: .2rem .55rem;
        background: var(--primary-green-ghost);
        border: 1px solid var(--primary-green-light);
        border-radius: 99px;
        font-size: .7rem;
        color: var(--primary-green);
        font-weight: 600;
        white-space: nowrap;
        transition: var(--transition-fast);
    }
    body.page-service-category .cat-subcategory-chip:hover{
        background: var(--primary-green-light);
    }
    body.page-service-category .cat-subcategory-chip.chip-more{
        background: var(--surface-gray-100);
        border-color: var(--border-200);
        color: var(--text-500);
    }

    /* empty chips state */
    body.page-service-category .cat-card-no-subs{
        font-size: .75rem;
        color: var(--text-500);
        font-style: italic;
    }

    /* ── Card footer: count + view button ── */
    body.page-service-category .cat-card-footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .6rem 1rem;
        border-top: 1px solid var(--border-200);
        background: var(--surface-gray-50);
    }

    body.page-service-category .cat-card-count{
        font-size: .72rem;
        color: var(--text-500);
        display: flex;
        align-items: center;
        gap: .3rem;
        font-weight: 600;
    }
    body.page-service-category .cat-card-count i{ color: var(--primary-green); font-size: .78rem; }

    /* ============================================================================
       SERVICE CATEGORY FLOW
       ============================================================================ */
    body.page-service-category .cat-flow-shell{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        margin-bottom: 1rem;
        overflow: hidden;
    }
    body.page-service-category .cat-flow-levels{
        display: flex;
        gap: .65rem;
        padding: .85rem;
        overflow-x: auto;
        border-bottom: 1px solid var(--border-200);
        background: var(--surface-gray-50);
    }
    body.page-service-category .cat-flow-level{
        min-width: 190px;
        padding: .7rem .8rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        display: flex;
        align-items: center;
        gap: .6rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-service-category .cat-flow-level:hover{ border-color: var(--primary-green); box-shadow: var(--shadow-sm); }
    body.page-service-category .cat-flow-level-icon{
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--surface-white);
        background: var(--primary-green);
    }
    body.page-service-category .cat-flow-level-copy{ flex: 1; min-width: 0; }
    body.page-service-category .cat-flow-level-name{
        color: var(--text-900);
        font-size: .78rem;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.page-service-category .cat-flow-level-order{ color: var(--text-500); font-size: .65rem; font-weight: 600; margin-top: .1rem; }
    body.page-service-category .cat-flow-level-actions{ display: flex; gap: .25rem; }
    body.page-service-category .cat-flow-level-action{
        width: 25px;
        height: 25px;
        border: 1px solid var(--border-200);
        border-radius: 6px;
        background: var(--surface-white);
        color: var(--text-500);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .65rem;
        cursor: pointer;
    }
    body.page-service-category .cat-flow-level-action:hover{ color: var(--surface-white); background: var(--primary-green); }
    body.page-service-category .cat-flow-level-action.delete:hover{ background: var(--error); border-color: var(--error); }
    body.page-service-category .cat-flow-canvas{ padding: 1.25rem; overflow: auto; min-height: 230px; }
    body.page-service-category .cat-flow-title{
        display: flex;
        align-items: center;
        gap: .45rem;
        margin-bottom: 1rem;
        color: var(--primary-green);
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .045em;
    }
    body.page-service-category .cat-flow-forest{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .7rem;
        min-width: max-content;
    }
    body.page-service-category .cat-flow-branch{ display: flex; align-items: center; position: relative; }
    body.page-service-category .cat-flow-node{
        width: 180px;
        min-height: 58px;
        padding: .6rem .7rem;
        border: 1.5px solid var(--border-200);
        border-left: 4px solid var(--primary-green);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-service-category .cat-flow-node:hover{
        border-color: var(--primary-green);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }
    body.page-service-category .cat-flow-node-level{
        color: var(--text-500);
        font-size: .6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    body.page-service-category .cat-flow-node-value{
        margin-top: .2rem;
        color: var(--text-900);
        font-size: .82rem;
        font-weight: 800;
        overflow-wrap: anywhere;
    }
    body.page-service-category .cat-flow-children{
        display: flex;
        flex-direction: column;
        gap: .55rem;
        margin-left: 42px;
        padding-left: 26px;
        border-left: 2px solid #b9d2c5;
        position: relative;
    }
    body.page-service-category .cat-flow-children::before{
        content: "";
        position: absolute;
        width: 42px;
        height: 2px;
        left: -42px;
        top: 50%;
        background: #b9d2c5;
    }
    body.page-service-category .cat-flow-children > .cat-flow-branch::before{
        content: "";
        position: absolute;
        width: 26px;
        height: 2px;
        left: -26px;
        top: 50%;
        background: #b9d2c5;
    }
    body.page-service-category .cat-flow-leaf{ margin-left: .45rem; color: var(--success); font-size: .8rem; }
    body.page-service-category .cat-flow-empty-level{ color: var(--text-500); font-size: .75rem; font-style: italic; padding: .75rem 0; }

    body.page-service-category .cat-view-btn{
        padding: .3rem .7rem;
        background: var(--primary-green);
        color: var(--surface-white);
        border: none;
        border-radius: var(--radius-sm);
        font-size: .7rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }
    body.page-service-category .cat-view-btn:hover{
        background: var(--primary-green-dark);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    /* ============================================================================
       CATEGORY DETAIL MODAL
       ============================================================================ */
    body.page-service-category .cat-modal-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(4px);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }
    body.page-service-category .cat-modal-overlay.show{ opacity: 1; visibility: visible; }

    body.page-service-category .cat-modal{
        background: var(--surface-white);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        max-width: 660px;
        width: 100%;
        max-height: 88vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transform: scale(.92) translateY(24px);
        transition: var(--transition);
        z-index: 9999;
    }
    body.page-service-category .cat-modal-overlay.show .cat-modal{ transform: scale(1) translateY(0); }

    /* ── HEADER ─────────────────────────────────────────────── */
    body.page-service-category .cat-modal-header{
        padding: 1.1rem 1.25rem 1rem 1.5rem;
        border-bottom: 1px solid var(--border-200);
        background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
        display: flex;
        align-items: center;
        gap: .75rem;
        flex-shrink: 0;
    }

    /* icon box */
    body.page-service-category .cat-modal-icon{
        width: 46px; height: 46px;
        border-radius: 12px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }

    /* name + pills column */
    body.page-service-category .cat-modal-title-text{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    body.page-service-category .cat-modal-title-text h2{
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0;
        color: var(--text-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* inline name edit */
    body.page-service-category .cat-modal-name-input{
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-900);
        border: 2px solid var(--primary-green);
        border-radius: var(--radius-md);
        padding: .2rem .6rem;
        outline: none;
        width: 100%;
        background: var(--surface-white);
        box-shadow: 0 0 0 3px var(--primary-green-light);
        display: none;
    }

    /* pill row */
    body.page-service-category .cat-modal-title-meta{
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-wrap: wrap;
    }
    body.page-service-category .cat-modal-meta-pill{
        display: inline-flex; align-items: center; gap: .25rem;
        font-size: .69rem; font-weight: 700;
        padding: .2rem .55rem;
        border-radius: 99px;
        border: 1px solid var(--border-200);
        background: var(--surface-gray-100);
        color: var(--text-700);
    }
    body.page-service-category .cat-modal-meta-pill i{ color: var(--primary-green); font-size: .72rem; }
    body.page-service-category .cat-modal-meta-pill.status-active{ background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
    body.page-service-category .cat-modal-meta-pill.status-active i{ color:#15803d; }
    body.page-service-category .cat-modal-meta-pill.status-inactive{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
    body.page-service-category .cat-modal-meta-pill.status-inactive i{ color:#b91c1c; }

    /* header right-side icon buttons: edit, delete, close */
    body.page-service-category .cat-modal-hdr-actions{
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-shrink: 0;
        margin-left: auto;
    }
    body.page-service-category .cat-hdr-btn{
        width: 2.1rem; height: 2.1rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-200);
        background: var(--surface-white);
        color: var(--text-700);
        display: flex; align-items: center; justify-content: center;
        font-size: .82rem;
        cursor: pointer;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-service-category .cat-hdr-btn:hover{ border-color: var(--primary-green); color: var(--primary-green); background: var(--primary-green-light); }
    body.page-service-category .cat-hdr-btn.edit-active{ background: var(--primary-green); color: var(--surface-white); border-color: var(--primary-green); }
    body.page-service-category .cat-hdr-btn.delete-btn:hover{ background: var(--error); color: var(--surface-white); border-color: var(--error); }
    body.page-service-category .cat-hdr-btn.close-btn:hover{ background: var(--error); color: var(--surface-white); border-color: var(--error); }

    /* ── BODY ───────────────────────────────────────────────── */
    body.page-service-category .cat-modal-body{
        padding: 1.25rem 1.5rem;
        overflow-y: auto;
        flex: 1;
    }
    body.page-service-category .cat-modal-body::-webkit-scrollbar{ width: 6px; }
    body.page-service-category .cat-modal-body::-webkit-scrollbar-track{ background: var(--surface-gray-100); border-radius: 99px; }
    body.page-service-category .cat-modal-body::-webkit-scrollbar-thumb{ background: var(--primary-green); border-radius: 99px; }

    body.page-service-category .cat-detail-label{
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: .7rem;
        display: flex;
        align-items: center;
        gap: .4rem;
    }
    body.page-service-category .cat-detail-label i{ color: var(--primary-green); }

    /* sub-cat grid */
    body.page-service-category .cat-subcategories-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: .6rem;
    }
    body.page-service-category .cat-subcategory-item{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        padding: .45rem .65rem;
        display: flex;
        align-items: center;
        gap: .35rem;
        transition: var(--transition-fast);
        cursor: default;
    }
    body.page-service-category .cat-subcategory-item:hover{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
        box-shadow: var(--shadow-sm);
    }
    body.page-service-category .cat-subcategory-name{
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-900);
        margin: 0;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.page-service-category .cat-subcategory-inline-edit{
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-900);
        border: 1.5px solid var(--primary-green);
        border-radius: var(--radius-sm);
        padding: .1rem .3rem;
        outline: none;
        background: var(--surface-white);
        flex: 1;
        min-width: 0;
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }
    body.page-service-category .cat-sub-item-actions{
        display: flex;
        gap: .2rem;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity .15s;
    }
    body.page-service-category .cat-subcategory-item:hover .cat-sub-item-actions{ opacity: 1; }
    body.page-service-category .cat-sub-action-btn{
        width: 1.45rem; height: 1.45rem;
        border: none;
        border-radius: 4px;
        display: flex; align-items: center; justify-content: center;
        font-size: .65rem;
        cursor: pointer;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-service-category .cat-sub-action-btn.edit-btn{ background: var(--primary-green-light); color: var(--primary-green); }
    body.page-service-category .cat-sub-action-btn.edit-btn:hover{ background: var(--primary-green); color: #fff; }
    body.page-service-category .cat-sub-action-btn.delete-btn{ background: #fee2e2; color: #b91c1c; }
    body.page-service-category .cat-sub-action-btn.delete-btn:hover{ background: var(--error); color: #fff; }
    body.page-service-category .cat-sub-action-btn.save-btn{ background: var(--primary-green-light); color: var(--primary-green); }
    body.page-service-category .cat-sub-action-btn.save-btn:hover{ background: var(--primary-green); color: #fff; }
    body.page-service-category .cat-sub-action-btn.cancel-btn{ background: var(--surface-gray-100); color: var(--text-500); }
    body.page-service-category .cat-sub-action-btn.cancel-btn:hover{ background: var(--surface-gray-200); color: var(--text-700); }

    /* empty */
    body.page-service-category .cat-subcategories-empty{ text-align:center; padding:2rem 1rem; color: var(--text-500); }
    body.page-service-category .cat-subcategories-empty i{ font-size:2rem; color: var(--primary-green-light); margin-bottom:.5rem; display:block; }
    body.page-service-category .cat-subcategories-empty p{ font-size:.82rem; margin:0; }

    /* ── FOOTER ─────────────────────────────────────────────── */
    body.page-service-category .cat-modal-footer{
        border-top: 1px solid var(--border-200);
        background: var(--surface-white);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }
    /* row 1: add sub-cat input */
    body.page-service-category .cat-modal-footer-input{
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .8rem 1.5rem;
        border-bottom: 1px solid var(--border-200);
        background: var(--surface-gray-50);
    }
    body.page-service-category .cat-modal-footer-input-label{
        font-size: .68rem;
        font-weight: 700;
        color: var(--text-500);
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
        flex-shrink: 0;
    }
    body.page-service-category .cat-modal-footer-input-label i{ color: var(--primary-green); margin-right:.2rem; }
    body.page-service-category .cat-subcategory-input-row{
        display: flex;
        gap: .5rem;
        align-items: center;
        flex: 1;
    }
    body.page-service-category .cat-subcategory-input{
        flex: 1;
        min-width: 0;
        padding: .55rem .75rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        font-size: .82rem;
        color: var(--text-700);
        background: var(--surface-white);
        transition: var(--transition-fast);
        outline: none;
    }
    body.page-service-category .cat-subcategory-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }
    body.page-service-category .cat-subcategory-add-btn{
        border: none;
        background: var(--primary-green);
        color: #fff;
        border-radius: var(--radius-md);
        padding: .55rem .85rem;
        font-size: .78rem;
        font-weight: 700;
        display: inline-flex; align-items: center; gap: .35rem;
        cursor: pointer;
        transition: var(--transition-fast);
        white-space: nowrap;
        flex-shrink: 0;
    }
    body.page-service-category .cat-subcategory-add-btn:hover{ background: var(--primary-green-dark); }

    /* row 2: save button bar */
    body.page-service-category .cat-modal-footer-actions{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .7rem 1.5rem;
        gap: .5rem;
    }
    body.page-service-category .cat-footer-hint{
        font-size: .72rem;
        color: var(--text-500);
        font-weight: 600;
    }
    body.page-service-category .cat-footer-hint i{ color: var(--primary-green); margin-right:.2rem; }

    /* save button */
    body.page-service-category .cat-modal-save-btn{
        display: inline-flex; align-items: center; gap: .4rem;
        padding: .55rem 1.2rem;
        border: none;
        border-radius: var(--radius-md);
        background: var(--primary-green);
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-service-category .cat-modal-save-btn:hover:not(:disabled){ background: var(--primary-green-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    body.page-service-category .cat-modal-save-btn:disabled{ opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

    /* ============================================================================
       PAGINATION SECTION
       ============================================================================ */
    body.page-service-category .cat-pagination-wrapper{
        display: block;
        width: 100%;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-top: .75rem;
        margin-bottom: .5rem;
        flex-shrink: 0;
    }

    @media (min-width: 769px) {
        body.page-service-category .cat-pagination-wrapper{
            position: relative;
            bottom: auto;
            z-index: auto;
        }
    }

    body.page-service-category #categoryGrid{
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* overflow: auto; */
        padding-bottom: .5rem;
    }

    body.page-service-category #categoryGrid > *{
        flex: 0 0 auto;
        min-height: 0;
    }

    body.page-service-category .cat-pagination-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        background: var(--surface-white);
        border-top: 1px solid var(--border-200);
        font-size: .8125rem;
        color: var(--text-500);
    }

    body.page-service-category .cat-pagination-info{
        flex: 0 1 auto;
        font-weight: 600;
    }

    body.page-service-category .cat-pagination{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-left: auto;
    }

    body.page-service-category .cat-pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-service-category .cat-pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-service-category .cat-pagination-btn.active{
        background: var(--primary-green);
        color: var(--surface-white);
        border-color: var(--primary-green);
    }

    body.page-service-category .cat-pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
        opacity: .6;
    }

    body.page-service-category .cat-pagination-ellipsis{
        padding: 0 .5rem;
        color: var(--text-500);
    }

    /* ============================================================================
       EMPTY & LOADING STATES
       ============================================================================ */
    body.page-service-category .cat-empty{
        text-align: center;
        padding: 4rem 2rem 3.5rem;
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    body.page-service-category .cat-empty::before{
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(2,84,45,0.055) 0%, transparent 70%);
        pointer-events: none;
    }

    body.page-service-category .cat-empty-icon-wrap{
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(2, 84, 45, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
    }

    body.page-service-category .cat-empty i{
        font-size: 2rem;
        color: var(--primary-green);
        margin: 0;
        display: block;
    }

    body.page-service-category .cat-empty h3{
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--text-700);
        margin: 0 0 .5rem 0;
    }

    body.page-service-category .cat-empty p{
        font-size: .875rem;
        color: var(--text-500);
        margin: 0 0 1.5rem 0;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Loading Skeleton */
    /* ── Skeleton ── */
    body.page-service-category .cat-skeleton{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 1rem;
    }
    body.page-service-category .cat-skeleton-card{
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }
    /* header band */
    body.page-service-category .cat-skeleton-header{
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--border-200);
        background: var(--primary-green-ghost);
    }
    body.page-service-category .cat-skeleton-icon{
        width: 42px; height: 42px;
        border-radius: 12px;
        flex-shrink: 0;
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: service-category--shimmer 1.5s infinite;
    }
    body.page-service-category .cat-skeleton-header-text{ flex: 1; display: flex; flex-direction: column; gap: .4rem; }
    /* body */
    body.page-service-category .cat-skeleton-body{
        padding: .75rem 1rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }
    body.page-service-category .cat-skeleton-chips{
        display: flex; gap: .35rem; flex-wrap: wrap;
    }
    body.page-service-category .cat-skeleton-chip{
        height: 1.3rem; width: 4rem;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: service-category--shimmer 1.5s infinite;
    }
    /* footer */
    body.page-service-category .cat-skeleton-footer{
        padding: .55rem 1rem;
        border-top: 1px solid var(--border-200);
        background: var(--surface-gray-50);
        display: flex; justify-content: space-between; align-items: center;
    }
    body.page-service-category .cat-skeleton-line{
        height: .85rem;
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: service-category--shimmer 1.5s infinite;
        border-radius: var(--radius-sm);
    }

    @keyframes service-category--shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* Toast */
    body.page-service-category .cat-toast{
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 10000;
        padding: 1rem 1.5rem;
        border-radius: var(--radius-lg);
        font-size: .85rem;
        font-weight: 600;
        color: var(--surface-white);
        display: flex;
        align-items: center;
        gap: .75rem;
        opacity: 0;
        transform: translateX(400px);
        transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        pointer-events: none;
        box-shadow: var(--shadow-lg);
        min-width: 320px;
    }

    body.page-service-category .cat-toast.show{
        opacity: 1;
        transform: translateX(0);
        pointer-events: all;
    }

    body.page-service-category .cat-toast.success{
        background: linear-gradient(135deg, var(--success) 0%, #16a34a 100%);
    }

    body.page-service-category .cat-toast.error{
        background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
    }

    body.page-service-category .cat-toast i{
        font-size: 1.25rem;
    }

    /* Assign existing service modal */
    body.page-service-category .cat-assign-modal{
        max-width: 620px;
    }

    body.page-service-category .cat-assign-body{
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    body.page-service-category .cat-assign-subtitle{
        margin: 0;
        font-size: .82rem;
        color: var(--text-500);
    }

    body.page-service-category .cat-assign-subtitle strong{
        color: var(--primary-green);
    }

    body.page-service-category .cat-assign-search{
        position: relative;
    }

    body.page-service-category .cat-assign-search .cat-search-input{
        font-size: .82rem;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

    body.page-service-category .cat-assign-search .cat-search-icon{
        left: 12px;
    }

    body.page-service-category .cat-assign-list{
        display: flex;
        flex-direction: column;
        gap: .55rem;
        max-height: 360px;
        overflow-y: auto;
        padding-right: .2rem;
    }

    body.page-service-category .cat-assign-list::-webkit-scrollbar{
        width: 6px;
    }

    body.page-service-category .cat-assign-list::-webkit-scrollbar-thumb{
        background: var(--surface-gray-200);
        border-radius: 99px;
    }

    body.page-service-category .cat-assign-item{
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        padding: .65rem .75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        transition: var(--transition-fast);
    }

    body.page-service-category .cat-assign-item:hover{
        border-color: var(--primary-green);
        background: var(--primary-green-ghost);
    }

    body.page-service-category .cat-assign-item-main{
        min-width: 0;
    }

    body.page-service-category .cat-assign-item-name{
        font-size: .84rem;
        font-weight: 700;
        color: var(--text-900);
        margin: 0 0 .1rem 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.page-service-category .cat-assign-item-meta{
        font-size: .74rem;
        color: var(--text-500);
        margin: 0;
    }

    body.page-service-category .cat-assign-item-meta .current{
        color: var(--primary-green);
        font-weight: 700;
    }

    body.page-service-category .cat-assign-btn{
        border: none;
        border-radius: var(--radius-md);
        background: var(--primary-green);
        color: #fff;
        padding: .4rem .75rem;
        font-size: .75rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        white-space: nowrap;
    }

    body.page-service-category .cat-assign-btn:hover:not(:disabled){
        background: var(--primary-green-dark);
    }

    body.page-service-category .cat-assign-btn:disabled{
        opacity: .55;
        cursor: not-allowed;
    }

    body.page-service-category .cat-assign-empty{
        border: 1px dashed var(--border-200);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        text-align: center;
        color: var(--text-500);
        font-size: .82rem;
    }

    body.page-service-category .cat-assign-empty i{
        font-size: 1.3rem;
        display: block;
        margin-bottom: .35rem;
        color: var(--primary-green);
    }

    /* ============================================================================
       RESPONSIVE
       ============================================================================ */
    @media (max-width: 768px) {
        body.page-service-category .cat-container{
            padding: .625rem;
        }

        body.page-service-category .cat-header-card{
            padding: .875rem;
            gap: .8rem;
            border-radius: 14px;
        }

        body.page-service-category .cat-header-main{
            flex-basis: 100%;
            min-width: 0;
        }

        body.page-service-category .cat-controls-section{
            width: 100%;
            min-width: unset;
        }

        body.page-service-category .cat-controls-grid{
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: .5rem;
        }

        body.page-service-category .cat-search-container{
            grid-column: 1 / -1;
            min-width: unset;
        }

        body.page-service-category .cat-sort-container{
            width: 100%;
            min-width: 0;
        }

        body.page-service-category .cat-dropdown{
            min-width: 0;
            width: 100%;
        }

        body.page-service-category .cat-header-card .cat-add-btn{
            width: 100%;
            justify-content: center;
            padding-inline: .75rem;
        }

        body.page-service-category .cat-stats-grid{
            gap: .5rem;
            margin: .65rem 0 .85rem;
        }

        body.page-service-category .cat-stat-card{
            min-width: 0;
            padding: .75rem;
            gap: .7rem;
            border-radius: 14px;
        }

        body.page-service-category .cat-stat-icon{
            width: 32px;
            height: 32px;
            font-size: .95rem;
        }

        body.page-service-category .cat-stat-value{
            font-size: 1.125rem;
        }

        body.page-service-category .cat-grid{
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: .75rem;
        }
        body.page-service-category .cat-skeleton{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }

        body.page-service-category .cat-pagination-footer{
            flex-direction: column;
            gap: .75rem;
            align-items: stretch;
        }

        body.page-service-category .cat-pagination-info{
            text-align: center;
        }

        body.page-service-category .cat-pagination{
            justify-content: center;
            margin-left: 0;
        }

        body.page-service-category .cat-modal{ max-width: 100%; margin: 0; border-radius: var(--radius-lg); }
        body.page-service-category .cat-modal-header{ padding: .9rem 1rem; }
        body.page-service-category .cat-modal-icon{ width: 40px; height: 40px; font-size: 1.2rem; }
        body.page-service-category .cat-modal-title-text h2{ font-size: 1rem; }
        body.page-service-category .cat-modal-body{ padding: 1rem; }
        body.page-service-category .cat-modal-footer-input{ padding: .65rem 1rem; }
        body.page-service-category .cat-modal-footer-input-label{ display: none; }
        body.page-service-category .cat-modal-footer-actions{ padding: .6rem 1rem; }
        body.page-service-category .cat-subcategories-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
        body.page-service-category .cat-assign-list{ max-height: 300px; }

        body.page-service-category .cat-toast{
            right: 1rem;
            left: 1rem;
            min-width: auto;
        }
    }

    @media (max-width: 576px) {
        body.page-service-category .cat-page-title{ font-size: 1.05rem; margin-bottom: .2rem; }
        body.page-service-category .cat-page-subtitle{ font-size: .7rem; line-height: 1.45; }
        body.page-service-category .cat-sort-label{ display: none; }
        body.page-service-category .cat-search-input,
body.page-service-category .cat-dropdown-trigger,
body.page-service-category .cat-add-btn{ height: 40px; }
        body.page-service-category .cat-stats-grid{
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .5rem;
        }
        body.page-service-category .cat-stat-card{
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            padding: .7rem .3rem;
            text-align: center;
        }
        body.page-service-category .cat-stat-card > div:last-child{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .15rem;
            width: 100%;
            min-width: 0;
        }
        body.page-service-category .cat-stat-label{
            margin: 0;
            font-size: .52rem;
            line-height: 1.25;
            text-align: center;
        }
        body.page-service-category .cat-stat-value{
            width: 100%;
            flex-shrink: 0;
            font-size: 1.15rem;
            line-height: 1.15;
            text-align: center;
        }
        body.page-service-category .cat-pagination-btn{ min-width: 2rem; padding: .35rem .5rem; font-size: .75rem; }
        body.page-service-category .cat-pagination{ overflow-x: auto; padding-bottom: .15rem; }
        body.page-service-category .cat-subcategories-grid{ grid-template-columns: 1fr; }
        body.page-service-category .cat-grid{ grid-template-columns: 1fr; gap: .65rem; }
        body.page-service-category .cat-skeleton{ grid-template-columns: 1fr; gap: .65rem; }
        body.page-service-category .cat-card-title{ font-size: .88rem; }
    }

    body.page-service-category .cat-category-layout{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    body.page-service-category .cat-main-category-card{
        width: 100%;
        min-height: 210px;
        border-color: rgba(2, 84, 45, .35);
    }
    body.page-service-category .cat-main-category-card .cat-card-header{
        background: linear-gradient(135deg, var(--primary-green-light), var(--surface-white));
    }
    body.page-service-category .cat-main-category-card .cat-card-title{ font-size: 1.05rem; }
    body.page-service-category .cat-main-category-card .cat-card-body{ min-height: 90px; }
    body.page-service-category .cat-subcategory-levels{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: .75rem;
    }
    body.page-service-category .cat-subcategory-levels .cat-card{ min-height: 245px; }

    @media (max-width: 768px) {
        body.page-service-category .cat-subcategory-levels{ grid-template-columns: 1fr; }
        body.page-service-category .cat-main-category-card,
body.page-service-category .cat-subcategory-levels .cat-card{ min-height: 0; }
    }

    @media (max-width: 1100px) {
        body.page-service-category .cat-header-card{ padding: 1rem; }
        body.page-service-category .cat-header-main,
body.page-service-category .cat-controls-section{ flex-basis: 100%; }
        body.page-service-category .cat-controls-grid{ justify-content: stretch; }
        body.page-service-category .cat-search-container{ flex: 1 1 100%; }
        body.page-service-category .cat-sort-container{ flex: 1 1 220px; }
        body.page-service-category .cat-dropdown{ width: 100%; }
        body.page-service-category .cat-add-btn{
            flex: 1 1 180px;
            justify-content: center;
        }
        body.page-service-category .cat-stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* ============================================================================
       DRILLDOWN COLUMN VIEW (C1 → C1.1 → C1.1.1 …)
       ============================================================================ */
    body.page-service-category .cat-drill-shell{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        padding: .8rem;
        margin-bottom: .5rem;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }
    body.page-service-category .cat-drill-breadcrumb{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .35rem .5rem;
        margin-bottom: .85rem;
        font-size: .75rem;
        color: var(--text-500);
        font-weight: 600;
    }
    body.page-service-category .cat-drill-crumb{
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem .55rem;
        border-radius: 99px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        border: 1px solid transparent;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-service-category .cat-drill-crumb:hover{ border-color: var(--primary-green); }
    body.page-service-category .cat-drill-crumb.root{ background: var(--surface-gray-100); color: var(--text-700); }
    body.page-service-category .cat-drill-crumb-sep{ color: var(--text-500); }

    body.page-service-category .cat-drill-columns{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, 255px);
        gap: .65rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        padding: .1rem;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
    }
    body.page-service-category .cat-drill-columns::-webkit-scrollbar{ display: none; }
    body.page-service-category .cat-drill-scrollbar{
        position: relative;
        height: 14px;
        margin: .7rem .1rem 0;
        background: var(--surface-gray-100);
        border: 1px solid var(--border-200);
        border-radius: 99px;
        cursor: pointer;
    }
    body.page-service-category .cat-drill-scrollbar-thumb{
        position: absolute;
        inset: 2px auto 2px 2px;
        width: 56px;
        background: var(--primary-green);
        border-radius: 99px;
        cursor: grab;
        touch-action: none;
        transition: background .15s ease;
    }
    body.page-service-category .cat-drill-scrollbar-thumb:hover{
        background: var(--primary-green-dark);
    }
    body.page-service-category .cat-drill-scrollbar-thumb:active{ cursor: grabbing; }

    body.page-service-category .cat-drill-col{
        scroll-snap-align: start;
        position: relative;
        background: var(--surface-white);
        border: 1.5px solid var(--border-200);
        border-radius: var(--radius-xl);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        height: 100%;
        max-height: none;
        transition: var(--transition-fast);
    }
    body.page-service-category .cat-drill-col:hover{ border-color: var(--primary-green-light); }
    body.page-service-category .cat-drill-col.is-active{ border-color: var(--primary-green); box-shadow: var(--shadow-md); }
    body.page-service-category .cat-drill-col.is-empty{ border-style: dashed; background: var(--surface-gray-50); }

    body.page-service-category .cat-drill-col-head{
        display: flex;
        align-items: center;
        gap: .55rem;
        min-height: 52px;
        padding: .45rem .55rem;
        border-bottom: 1px solid var(--border-200);
        background: linear-gradient(135deg, var(--primary-green-ghost) 0%, var(--surface-white) 100%);
    }
    body.page-service-category .cat-drill-col-icon{
        width: 28px; height: 28px;
        border-radius: 9px;
        background: var(--primary-green-light);
        color: var(--primary-green);
        display: flex; align-items: center; justify-content: center;
        font-size: .9rem;
        flex-shrink: 0;
    }
    body.page-service-category .cat-drill-col-head-text{ flex: 1; min-width: 0; }
    body.page-service-category .cat-drill-col-path{
        font-size: .6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--primary-green);
        margin: 0;
    }
    body.page-service-category .cat-drill-col-title{
        font-size: .82rem;
        font-weight: 800;
        color: var(--text-900);
        line-height: 1.25;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin: .1rem 0 0;
    }
    body.page-service-category .cat-drill-col-actions{
        display: flex;
        gap: .25rem;
        flex-shrink: 0;
    }
    body.page-service-category .cat-drill-col-action{
        width: 1.5rem; height: 1.5rem;
        border-radius: 6px;
        border: 1px solid var(--border-200);
        background: var(--surface-white);
        color: var(--text-700);
        display: flex; align-items: center; justify-content: center;
        font-size: .68rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-service-category .cat-drill-col-action:hover{ background: var(--primary-green); color: #fff; border-color: var(--primary-green); }

    body.page-service-category .cat-drill-col-body{
        flex: 1;
        padding: .45rem .8rem .45rem .45rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: .35rem;
        min-height: 0;
        scrollbar-width: none;
    }
    body.page-service-category .cat-drill-col-body::-webkit-scrollbar{ display: none; }
    body.page-service-category .cat-drill-vscroll{
        position: absolute;
        top: 59px;
        right: 3px;
        bottom: 36px;
        width: 9px;
        background: var(--surface-gray-100);
        border: 1px solid var(--border-200);
        border-radius: 99px;
        cursor: pointer;
        z-index: 3;
    }
    body.page-service-category .cat-drill-vscroll-thumb{
        position: absolute;
        inset: 2px 2px auto;
        min-height: 30px;
        background: var(--primary-green);
        border-radius: 99px;
        cursor: grab;
        touch-action: none;
    }
    body.page-service-category .cat-drill-vscroll-thumb:hover{ background: var(--primary-green-dark); }
    body.page-service-category .cat-drill-vscroll-thumb:active{ cursor: grabbing; }

    body.page-service-category .cat-drill-item{
        display: flex;
        align-items: center;
        gap: .4rem;
        min-height: 36px;
        padding: .35rem .45rem .35rem .55rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .8rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition-fast);
        text-align: left;
        width: 100%;
        outline: none;
    }
    body.page-service-category .cat-drill-item:hover{ border-color: var(--primary-green); background: var(--primary-green-ghost); }
    body.page-service-category .cat-drill-item:focus-visible{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }
    body.page-service-category .cat-drill-item.is-selected{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        box-shadow: var(--shadow-sm);
    }
    body.page-service-category .cat-drill-item.is-selected .cat-drill-item-chev{ color: rgba(255,255,255,.85); }
    body.page-service-category .cat-drill-item.is-leaf{ cursor: default; }
    body.page-service-category .cat-drill-item-label{
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Parent attribution shown while a mapped column lists values from every parent at once
       (WZ-179). Muted and shrink-last so it never crowds out the value itself. */
    body.page-service-category .cat-drill-item-parent{
        flex: 0 1 auto;
        min-width: 0;
        max-width: 46%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: .1rem .4rem;
        border-radius: 99px;
        background: var(--surface-gray-100);
        color: var(--text-500);
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .01em;
    }
    body.page-service-category .cat-drill-item.is-selected .cat-drill-item-parent{
        background: rgba(255, 255, 255, .18);
        color: rgba(255, 255, 255, .92);
    }

    body.page-service-category .cat-drill-item-tools{
        display: inline-flex;
        gap: .2rem;
        opacity: .72;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }
    body.page-service-category .cat-drill-item:hover .cat-drill-item-tools,
body.page-service-category .cat-drill-item:focus-within .cat-drill-item-tools{ opacity: 1; }
    body.page-service-category .cat-drill-item-tool{
        width: 1.55rem; height: 1.55rem;
        border-radius: 5px;
        border: none;
        display: flex; align-items: center; justify-content: center;
        font-size: .65rem;
        cursor: pointer;
        transition: var(--transition-fast);
        background: var(--surface-gray-100);
        color: var(--text-700);
    }
    body.page-service-category .cat-drill-item-tool.edit:hover{ background: var(--primary-green); color: #fff; }
    body.page-service-category .cat-drill-item-tool.delete:hover{ background: var(--error); color: #fff; }
    body.page-service-category .cat-drill-item.is-selected .cat-drill-item-tool{ background: rgba(255,255,255,.18); color: #fff; }
    body.page-service-category .cat-drill-item.is-selected .cat-drill-item-tool:hover{ background: rgba(0,0,0,.25); }
    body.page-service-category .cat-drill-item-edit-input{
        flex: 1;
        min-width: 0;
        padding: .25rem .45rem;
        border: 1.5px solid var(--primary-green);
        border-radius: 5px;
        font-size: .8rem;
        font-weight: 600;
        background: var(--surface-white);
        color: var(--text-900);
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }
    body.page-service-category .cat-drill-add-row{
        display: flex; gap: .35rem; align-items: center;
        padding: .45rem .5rem;
        margin-bottom: .35rem;
        border: 1.5px dashed var(--primary-green);
        background: var(--primary-green-ghost);
        border-radius: var(--radius-md);
    }
    body.page-service-category .cat-drill-add-input{
        flex: 1; min-width: 0;
        padding: .3rem .5rem;
        border: 1px solid var(--border-200);
        border-radius: 5px;
        font-size: .8rem; font-weight: 500;
        background: var(--surface-white); outline: none;
    }
    body.page-service-category .cat-drill-add-input:focus{ border-color: var(--primary-green); box-shadow: 0 0 0 2px var(--primary-green-light); }
    body.page-service-category .cat-drill-add-btn{
        border: none; background: var(--primary-green); color: #fff;
        border-radius: 5px; padding: .3rem .55rem;
        font-size: .7rem; font-weight: 700; cursor: pointer;
        display: inline-flex; align-items: center; gap: .25rem;
    }
    body.page-service-category .cat-drill-add-btn.cancel{ background: var(--surface-gray-200); color: var(--text-700); }
    body.page-service-category .cat-drill-add-btn:hover:not(.cancel){ background: var(--primary-green-dark); }
    body.page-service-category .cat-drill-col-action.is-active{ background: var(--primary-green); color: #fff; border-color: var(--primary-green); }

    body.page-service-category .cat-drill-item-chev{
        font-size: .85rem;
        color: var(--primary-green);
        flex-shrink: 0;
    }
    body.page-service-category .cat-drill-item-leaf-dot{
        width: .45rem; height: .45rem;
        border-radius: 50%;
        background: var(--primary-green-light);
        flex-shrink: 0;
    }
    body.page-service-category .cat-drill-col.is-empty .cat-drill-col-body{
        align-items: center;
        justify-content: center;
        color: var(--text-500);
        font-size: .78rem;
        font-style: italic;
        text-align: center;
        padding: 1.25rem .75rem;
    }
    body.page-service-category .cat-drill-empty-illustration{
        font-size: 1.6rem;
        color: var(--primary-green-light);
        margin-bottom: .35rem;
    }

    body.page-service-category .cat-drill-col-foot{
        min-height: 32px;
        padding: .3rem .55rem;
        border-top: 1px solid var(--border-200);
        background: var(--surface-gray-50);
        font-size: .65rem;
        color: var(--text-500);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .35rem;
    }
    body.page-service-category .cat-drill-col-foot button{
        border: none;
        background: transparent;
        color: var(--primary-green);
        font-weight: 700;
        cursor: pointer;
        font-size: .68rem;
        display: inline-flex;
        align-items: center;
        gap: .2rem;
    }
    body.page-service-category .cat-drill-col-foot button:hover{ text-decoration: underline; }

    @media (max-width: 768px) {
        body.page-service-category .cat-drill-columns{
            grid-auto-columns: minmax(220px, min(82vw, 300px));
            gap: .65rem;
        }
        body.page-service-category .cat-drill-shell{ padding: .75rem; }
        body.page-service-category .cat-drill-col{
            min-height: 210px;
            height: 210px;
            max-height: 210px;
        }
        body.page-service-category .cat-drill-col-foot{
            flex-wrap: wrap;
            align-items: flex-start;
        }
        body.page-service-category .cat-drill-col-foot button{
            width: 100%;
            justify-content: flex-end;
        }
    }

    @media (max-width: 576px) {
        body.page-service-category .cat-controls-grid,
body.page-service-category .cat-sort-container,
body.page-service-category .cat-drill-add-row{
            flex-direction: column;
            align-items: stretch;
        }
        body.page-service-category .cat-search-container,
body.page-service-category .cat-sort-container,
body.page-service-category .cat-dropdown,
body.page-service-category .cat-add-btn,
body.page-service-category .cat-sort-label{
            width: 100%;
        }
        body.page-service-category .cat-sort-label{
            display: block;
            margin-bottom: .15rem;
        }
        body.page-service-category .cat-stats-grid{ grid-template-columns: 1fr; }
        body.page-service-category .cat-drill-shell{ padding: .65rem; }
        body.page-service-category .cat-drill-columns{ grid-auto-columns: minmax(100%, 100%); }
        body.page-service-category .cat-drill-scrollbar{ display: none; }
        body.page-service-category .cat-pagination-wrapper{ margin-top: 1rem; }
        body.page-service-category #categoryGrid{
            display: block;
            overflow: visible;
        }
        body.page-service-category #categoryGrid > *{
            flex: none;
        }
    }


/* ==========================================================
   Template: service_detail.html (page-service-detail)
   ========================================================== */

    /* ==== Service Detail Page - Dashboard UI ==== */
    body.page-service-detail .pd-container{
        margin: 0 auto;
        padding: .875rem;
    }

    /* ==== Header Card ==== */
    body.page-service-detail .pd-header{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    body.page-service-detail .pd-header::before{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(2, 84, 45, 0.08);
        pointer-events: none;
    }

    body.page-service-detail .pd-header-content{
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    body.page-service-detail .pd-header-left{
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    body.page-service-detail .pd-btn-back{
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        padding: .5rem .875rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        text-decoration: none;
        border: 1px solid var(--ink-200);
        cursor: pointer;
        transition: all .15s ease;
        background: var(--surface-primary);
        color: var(--brand-primary);
    }

    body.page-service-detail .pd-btn-back:hover{
        background: rgba(2, 84, 45, 0.1);
        border-color: var(--brand-primary);
        color: var(--brand-primary);
        text-decoration: none;
        transform: translateY(-1px);
    }

    body.page-service-detail .pd-header-info h1{
        font-size: 1.35rem;
        font-weight: var(--font-weight-extrabold);
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -.02em;
        margin: 0 0 .125rem 0;
    }

    body.page-service-detail .pd-header-info p{
        font-size: .75rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin: 0;
    }

    body.page-service-detail .pd-header-actions{
        display: flex;
        gap: .5rem;
        align-items: center;
        flex-wrap: wrap;
    }

    body.page-service-detail .pd-btn{
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        padding: .5rem .875rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        text-decoration: none;
        border: 1px solid var(--ink-200);
        cursor: pointer;
        transition: all .15s ease;
        background: var(--surface-primary);
        color: var(--ink-700);
    }

    body.page-service-detail .pd-btn:hover{
        background: var(--brand-primary);
        border-color: var(--brand-primary);
        color: var(--surface-primary);
        text-decoration: none;
    }

    body.page-service-detail .pd-btn-primary{
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: white;
        border: none;
    }

    body.page-service-detail .pd-btn-primary:hover{
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(2, 84, 45, 0.25);
        color: white;
    }

    /* ==== Main Grid ==== */
    body.page-service-detail .pd-grid{
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /* ==== Gallery Card ==== */
    body.page-service-detail .pd-gallery{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem;
        box-shadow: var(--shadow-sm);
    }

    body.page-service-detail .pd-gallery-layout{
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: .875rem;
        align-items: start;
    }

    body.page-service-detail .pd-thumbnails{
        display: flex;
        flex-direction: column;
        gap: .5rem;
        max-height: 400px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--brand-primary) var(--ink-100);
    }

    body.page-service-detail .pd-thumbnails::-webkit-scrollbar{
        width: 4px;
    }

    body.page-service-detail .pd-thumbnails::-webkit-scrollbar-track{
        background: var(--ink-100);
        border-radius: .25rem;
    }

    body.page-service-detail .pd-thumbnails::-webkit-scrollbar-thumb{
        background: var(--brand-primary);
        border-radius: .25rem;
    }

    body.page-service-detail .pd-thumb{
        width: 72px;
        height: 72px;
        border-radius: .5rem;
        object-fit: cover;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all .15s ease;
        background: var(--ink-100);
    }

    body.page-service-detail .pd-thumb:hover,
body.page-service-detail .pd-thumb.active{
        border-color: var(--brand-primary);
        transform: scale(1.05);
        box-shadow: 0 3px 10px rgba(2, 84, 45, 0.3);
    }

    body.page-service-detail .pd-main-image{
        position: relative;
        border-radius: .75rem;
        overflow: hidden;
        aspect-ratio: 1;
        background: var(--ink-100);
        cursor: zoom-in;
    }

    body.page-service-detail .pd-main-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .2s ease;
    }

    body.page-service-detail .pd-zoom-overlay{
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all .2s ease;
    }

    body.page-service-detail .pd-main-image:hover .pd-zoom-overlay{
        opacity: 1;
    }

    body.page-service-detail .pd-zoom-text{
        background: var(--surface-primary);
        color: var(--ink-700);
        padding: .5rem 1rem;
        border-radius: .5rem;
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        display: flex;
        align-items: center;
        gap: .375rem;
    }

    body.page-service-detail .pd-no-image{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 1rem;
        color: var(--ink-400);
        text-align: center;
        padding: 2rem;
    }

    body.page-service-detail .pd-no-image-avatar{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.75rem;
        font-weight: var(--font-weight-extrabold);
        box-shadow: var(--shadow-md);
    }

    /* ==== Gallery Mini (right-col image card — matches product_detail) ==== */
    body.page-service-detail .pd-gallery-mini{
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    body.page-service-detail .pd-gallery-mini .pd-main-image{
        position: relative;
        border-radius: .75rem;
        overflow: hidden;
        aspect-ratio: 1;
        background: var(--ink-100);
        cursor: zoom-in;
    }

    body.page-service-detail .pd-gallery-mini .pd-main-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .2s ease;
    }

    body.page-service-detail .pd-thumbs-row{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .375rem;
    }

    body.page-service-detail .pd-thumbs-row .pd-thumb{
        width: 58px;
        height: 58px;
    }

    /* ==== Sidebar ==== */
    body.page-service-detail .pd-sidebar{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* ==== Card Component ==== */
    body.page-service-detail .pd-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        transition: all .2s ease;
    }

    body.page-service-detail .pd-card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .52rem .78rem;
        background: var(--ink-50, #f9fafb);
        border-bottom: 1px solid var(--ink-100);
        color: var(--ink-600);
    }

    body.page-service-detail .pd-card-title{
        display: flex;
        align-items: center;
        gap: .48rem;
        font-size: .67rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: .06em;
        margin: 0;
    }

    /* Icon badge — matches product_detail .pd-hdr-icon */
    body.page-service-detail .pd-hdr-icon{
        width: 19px; height: 19px; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        border-radius: .3rem; color: #fff; font-size: .63rem;
    }
    body.page-service-detail .pd-hdr-icon i{ color: #fff !important; font-size: .63rem; }

    /* ==== Discount Offers ==== */
    body.page-service-detail .sd-offers-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: .625rem;
    }

    body.page-service-detail .sd-offer-card{
        position: relative;
        overflow: hidden;
        padding: .75rem;
        border-radius: .625rem;
        background: linear-gradient(145deg, rgba(2,84,45,.07), rgba(34,197,94,.03));
        border: 1px solid rgba(2,84,45,.16);
    }

    body.page-service-detail .sd-offer-card::before{
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: #16a34a;
    }

    body.page-service-detail .sd-offer-card.inactive{ opacity: .68; filter: saturate(.7); }
    body.page-service-detail .sd-offer-card.inactive::before{ background: var(--ink-400); }
    body.page-service-detail .sd-offer-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
    body.page-service-detail .sd-offer-value{ color: var(--brand-primary); font-size: .95rem; font-weight: 800; line-height: 1.2; }
    body.page-service-detail .sd-offer-status{
        display: inline-flex; align-items: center; gap: .2rem;
        padding: .12rem .4rem; border-radius: 20px;
        background: rgba(22,163,74,.1); color: #15803d;
        font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    }
    body.page-service-detail .sd-offer-status.inactive{ background: var(--ink-100); color: var(--ink-500); }
    body.page-service-detail .sd-offer-desc{ margin-top: .3rem; color: var(--ink-700); font-size: .73rem; font-weight: 600; }
    body.page-service-detail .sd-offer-meta{ display: flex; flex-wrap: wrap; gap: .3rem .65rem; margin-top: .45rem; }
    body.page-service-detail .sd-offer-meta span{ color: var(--ink-500); font-size: .64rem; }
    body.page-service-detail .sd-offer-meta i{ color: var(--brand-primary); margin-right: .18rem; }
    body.page-service-detail .sd-offer-targets{
        grid-column: 1 / -1;
        display: flex; align-items: center; flex-wrap: wrap; gap: .3rem;
        padding-top: .15rem; color: var(--ink-500); font-size: .66rem;
    }
    body.page-service-detail .sd-offer-target{
        padding: .12rem .42rem; border-radius: 20px;
        background: rgba(2,84,45,.08); border: 1px solid rgba(2,84,45,.14);
        color: var(--brand-primary); font-weight: 600;
    }

    html[data-theme="dark"] body.page-service-detail .sd-offer-card{
        background: rgba(34,197,94,.055);
        border-color: rgba(74,222,128,.16);
    }
    html[data-theme="dark"] body.page-service-detail .sd-offer-value,
html[data-theme="dark"] body.page-service-detail .sd-offer-meta i{ color: #86efac; }
    html[data-theme="dark"] body.page-service-detail .sd-offer-desc{ color: #e5eee9; }
    html[data-theme="dark"] body.page-service-detail .sd-offer-meta span{ color: #9dafb6; }
    html[data-theme="dark"] body.page-service-detail .sd-offer-targets{ color: #9dafb6; }
    html[data-theme="dark"] body.page-service-detail .sd-offer-target{ background: rgba(34,197,94,.08); border-color: rgba(74,222,128,.16); color: #bbf7d0; }
    html[data-theme="dark"] body.page-service-detail .sd-offer-status{ background: rgba(34,197,94,.14); color: #bbf7d0; }
    html[data-theme="dark"] body.page-service-detail .sd-offer-status.inactive{ background: #1b2821; color: #a8b8af; }

    body.page-service-detail .pd-card-body{
        padding: 1rem;
    }

    /* ==== Price Card ==== */
    body.page-service-detail .pd-price-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        padding: 1rem 1.25rem;
        border-radius: .875rem;
        text-align: center;
        box-shadow: var(--shadow-sm);
    }

    body.page-service-detail .pd-price-amount{
        font-size: 1.65rem;
        font-weight: var(--font-weight-extrabold);
        margin-bottom: .25rem;
        line-height: 1;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    body.page-service-detail .pd-price-desc{
        font-size: .72rem;
        font-weight: var(--font-weight-medium);
        color: var(--ink-500);
    }

    /* ==== Rating ==== */
    body.page-service-detail .pd-rating{
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .875rem;
        background: var(--ink-50);
        border-radius: .625rem;
        border: 1px solid var(--ink-200);
        margin-bottom: 1rem;
    }

    body.page-service-detail .pd-stars{
        display: flex;
        gap: 2px;
    }

    body.page-service-detail .pd-star{
        font-size: .9rem;
        color: #fbbf24;
    }

    body.page-service-detail .pd-star.empty{
        color: var(--ink-300);
    }

    body.page-service-detail .pd-rating-info{
        display: flex;
        flex-direction: column;
        gap: .125rem;
    }

    body.page-service-detail .pd-rating-score{
        font-weight: var(--font-weight-extrabold);
        color: var(--ink-700);
        font-size: .9rem;
    }

    body.page-service-detail .pd-rating-label{
        font-size: .6rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    /* ==== Stats Grid ==== */
    body.page-service-detail .pd-stats{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
    }

    body.page-service-detail .pd-stat{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: .75rem;
        background: var(--ink-50);
        border-radius: .5rem;
        border: 1px solid var(--ink-200);
        transition: all .15s ease;
        text-align: center;
    }

    body.page-service-detail .pd-stat:hover{
        background: rgba(2, 84, 45, 0.08);
        border-color: var(--brand-primary);
        transform: translateY(-2px);
    }

    body.page-service-detail .pd-stat-value{
        font-size: 1.1rem;
        font-weight: var(--font-weight-extrabold);
        color: var(--brand-primary);
        margin-bottom: .125rem;
        line-height: 1;
    }

    body.page-service-detail .pd-stat-label{
        font-size: .6rem;
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: .05em;
        font-weight: var(--font-weight-semibold);
    }

    /* ==== Info Grid ==== */
    body.page-service-detail .pd-info-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
    }

    body.page-service-detail .pd-info-card{
        background: var(--ink-50);
        border: 1px solid var(--ink-200);
        border-radius: .75rem;
        padding: 1rem;
        transition: all .15s ease;
    }

    body.page-service-detail .pd-info-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
        border-color: rgba(2, 84, 45, 0.15);
        background: var(--surface-primary);
    }

    body.page-service-detail .pd-info-card-header{
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: .75rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-service-detail .pd-info-icon{
        width: 1.5rem;
        height: 1.5rem;
        background: var(--brand-primary);
        color: white;
        border-radius: .375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
    }

    body.page-service-detail .pd-info-card-title{
        font-size: .875rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-700);
        margin: 0;
    }

    body.page-service-detail .pd-info-row{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: .375rem 0;
        border-bottom: 1px solid var(--ink-200);
        gap: .5rem;
        font-size: .75rem;
    }

    body.page-service-detail .pd-info-row:last-child{
        border-bottom: none;
        padding-bottom: 0;
    }

    body.page-service-detail .pd-info-key{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
        flex: 0 0 auto;
    }

    body.page-service-detail .pd-info-value{
        color: var(--ink-500);
        text-align: right;
        word-break: break-word;
    }

    body.page-service-detail .pd-info-value--long{
        flex: 1;
        min-width: 0;
        line-height: 1.45;
    }

    /* ==== Chips ==== */
    body.page-service-detail .pd-chips{
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
    }

    body.page-service-detail .pd-chip{
        display: inline-flex;
        align-items: center;
        padding: .25rem .625rem;
        font-size: .65rem;
        font-weight: var(--font-weight-semibold);
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        border-radius: 1.5rem;
        border: 1px solid rgba(2, 84, 45, 0.2);
        transition: all .15s ease;
    }

    body.page-service-detail .pd-chip:hover{
        background: var(--brand-primary);
        color: white;
        border-color: var(--brand-primary);
    }

    /* ==== Badges ==== */
    body.page-service-detail .pd-badge{
        display: inline-flex;
        align-items: center;
        padding: .2rem .5rem;
        border-radius: .75rem;
        font-size: .6rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    body.page-service-detail .pd-badge-success{
        background: rgba(2, 84, 45, 0.15);
        color: var(--brand-primary);
        border: 1px solid rgba(2, 84, 45, 0.3);
    }

    body.page-service-detail .pd-badge-warning{
        background: rgba(245, 158, 11, 0.15);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    body.page-service-detail .pd-badge-error{
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    body.page-service-detail .pd-badge-info{
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        border: 1px solid rgba(2, 84, 45, 0.2);
    }

    /* ==== Description ==== */
    body.page-service-detail .pd-description{
        background: rgba(2,84,45,.03);
        padding: .6rem .75rem;
        border-radius: .5rem;
        border: 1px solid rgba(2,84,45,.07);
        font-size: .8rem;
        line-height: 1.6;
        color: var(--ink-700);
    }

    /* ==== Amenities ==== */
    body.page-service-detail .pd-amenities{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .5rem;
    }

    body.page-service-detail .pd-amenity{
        display: flex;
        align-items: center;
        gap: .375rem;
        padding: .5rem .75rem;
        background: var(--ink-50);
        border-radius: .5rem;
        font-size: .7rem;
        font-weight: var(--font-weight-medium);
        color: var(--ink-700);
        border: 1px solid var(--ink-200);
        transition: all .15s ease;
    }

    body.page-service-detail .pd-amenity:hover{
        background: rgba(2, 84, 45, 0.08);
        border-color: var(--brand-primary);
    }

    body.page-service-detail .pd-amenity i{
        color: var(--brand-primary);
        font-size: .8rem;
    }

    /* ==== Missing / deleted service ==== */
    body.page-service-detail .sd-missing{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        text-align: center;
        padding: 4rem 1.5rem;
        min-height: 50vh;
    }
    body.page-service-detail .sd-missing-icon{
        font-size: 2.25rem;
        color: #f59e0b;
    }
    body.page-service-detail .sd-missing-title{
        font-size: 1.05rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0;
    }
    body.page-service-detail .sd-missing-text{
        font-size: .78rem;
        color: var(--ink-600);
        margin: 0;
        max-width: 32rem;
    }
    body.page-service-detail .sd-missing-btn{
        margin-top: .5rem;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        width: auto;
        padding: .4rem .85rem;
        text-decoration: none;
    }

    /* ==== Documents ==== */
    body.page-service-detail .sd-doc{
        align-items: flex-start;
        gap: .5rem;
        text-decoration: none;
        color: inherit;
    }
    body.page-service-detail .sd-doc .sd-doc-body{
        display: flex;
        flex-direction: column;
        gap: .1rem;
        min-width: 0;
        flex: 1;
    }
    body.page-service-detail .sd-doc-name{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-800);
        word-break: break-word;
    }
    body.page-service-detail .sd-doc-meta{
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ink-500);
    }
    body.page-service-detail .sd-doc-desc{
        font-size: .66rem;
        font-weight: var(--font-weight-normal);
        color: var(--ink-600);
        line-height: 1.45;
    }
    body.page-service-detail .sd-doc-open{
        font-size: .7rem;
        opacity: .55;
        flex-shrink: 0;
    }
    body.page-service-detail .sd-doc:hover .sd-doc-open{ opacity: 1; }
    body.page-service-detail .sd-doc.is-unavailable{
        cursor: not-allowed;
        opacity: .7;
    }
    body.page-service-detail .sd-doc.is-unavailable:hover{
        background: var(--ink-50);
        border-color: var(--ink-200);
    }
    body.page-service-detail .sd-doc-flag{
        flex-shrink: 0;
        font-size: .58rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #b45309;
        background: rgba(245,158,11,.12);
        border: 1px solid rgba(245,158,11,.25);
        border-radius: .25rem;
        padding: .1rem .3rem;
    }

    /* ==== FAQ ==== */
    body.page-service-detail .pd-faq{
        background: var(--ink-50);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        margin-bottom: .5rem;
        overflow: hidden;
        transition: all .15s ease;
    }

    body.page-service-detail .pd-faq:hover{
        border-color: rgba(2, 84, 45, 0.15);
    }

    body.page-service-detail .pd-faq-question{
        background: var(--surface-primary);
        padding: .75rem 1rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        color: var(--ink-700);
        cursor: pointer;
        border-bottom: 1px solid var(--ink-200);
        transition: all .15s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    body.page-service-detail .pd-faq-question:hover{
        background: rgba(2, 84, 45, 0.08);
    }

    body.page-service-detail .pd-faq-question i{
        transition: transform .2s ease;
    }

    body.page-service-detail .pd-faq-answer{
        padding: .75rem 1rem;
        color: var(--ink-600);
        font-size: .75rem;
        line-height: 1.6;
        display: none;
    }

    body.page-service-detail .pd-faq.active .pd-faq-answer{
        display: block;
    }

    body.page-service-detail .pd-faq.active .pd-faq-question i{
        transform: rotate(180deg);
    }

    /* ==== Related Items ==== */
    body.page-service-detail .pd-related-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: .75rem;
    }

    body.page-service-detail .pd-related-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        overflow: hidden;
        transition: all .2s ease;
        box-shadow: var(--shadow-sm);
    }

    body.page-service-detail .pd-related-card:hover{
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand-primary);
    }

    body.page-service-detail .pd-related-card a{
        display: block;
        color: inherit;
        text-decoration: none;
    }

    body.page-service-detail .pd-related-img{
        aspect-ratio: 1;
        overflow: hidden;
        background: var(--ink-100);
    }

    body.page-service-detail .pd-related-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .2s ease;
    }

    body.page-service-detail .pd-related-card:hover .pd-related-img img{
        transform: scale(1.08);
    }

    body.page-service-detail .pd-related-info{
        padding: .75rem;
    }

    body.page-service-detail .pd-related-name{
        margin: 0 0 .375rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
        line-height: 1.4;
        font-size: .75rem;
    }

    body.page-service-detail .pd-related-price{
        color: var(--brand-primary);
        font-weight: var(--font-weight-extrabold);
        font-size: .875rem;
    }

    /* ==== Empty State ==== */
    body.page-service-detail .pd-empty{
        text-align: center;
        padding: 2rem 1rem;
        color: var(--ink-500);
        grid-column: 1 / -1;
    }

    body.page-service-detail .pd-empty-icon{
        width: 60px;
        height: 60px;
        margin: 0 auto .75rem;
        border-radius: 50%;
        background: var(--ink-100);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--ink-400);
    }

    body.page-service-detail .pd-empty-title{
        margin: 0 0 .375rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-bold);
        font-size: .875rem;
    }

    body.page-service-detail .pd-empty-text{
        margin: 0;
        font-size: .75rem;
    }

    /* ==== Skeleton ==== */
    body.page-service-detail .pd-skeleton{
        background: linear-gradient(90deg, var(--ink-200) 25%, var(--ink-100) 50%, var(--ink-200) 75%);
        background-size: 200% 100%;
        animation: service-detail--pd-shimmer 1.5s infinite;
        border-radius: .375rem;
        height: 1rem;
    }

    @keyframes service-detail--pd-shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* ==== Toast ==== */
    body.page-service-detail .pd-toast{
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 9999;
        min-width: 220px;
        max-width: 320px;
        padding: .75rem 1rem;
        border-radius: .625rem;
        font-size: .8rem;
        font-weight: var(--font-weight-semibold);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        transform: translateX(1rem);
        transition: all .3s ease;
        pointer-events: none;
    }

    body.page-service-detail .pd-toast.show{
        opacity: 1;
        transform: translateX(0);
    }

    body.page-service-detail .pd-toast.success{
        background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
        color: white;
    }

    body.page-service-detail .pd-toast.error{
        background: linear-gradient(90deg, #ef4444, #b91c1c);
        color: white;
    }

    body.page-service-detail .pd-toast.info{
        background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
        color: white;
    }

    /* ==== Animations ==== */
    @keyframes service-detail--pd-fadeIn {
        from {
            opacity: 0;
            transform: translateY(.5rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-service-detail .pd-animate{
        animation: service-detail--pd-fadeIn .4s ease-out forwards;
    }

    body.page-service-detail .pd-animate-delay-1{
        animation-delay: .1s;
        opacity: 0;
    }

    body.page-service-detail .pd-animate-delay-2{
        animation-delay: .2s;
        opacity: 0;
    }

    body.page-service-detail .pd-animate-delay-3{
        animation-delay: .3s;
        opacity: 0;
    }

    body.page-service-detail .pd-animate-delay-4{
        animation-delay: .4s;
        opacity: 0;
    }

    /* ── Action Bar ── */
    body.page-service-detail .sd-action-bar{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        position: relative; overflow: hidden;
    }
    body.page-service-detail .sd-action-bar::before{
        content: ""; position: absolute; inset: 0;
        background: rgba(2,84,45,.05); pointer-events: none;
    }
    body.page-service-detail .sd-action-bar::after{
        content: ""; position: absolute; left: 0; top: 0; bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        border-radius: .875rem 0 0 .875rem;
    }
    body.page-service-detail .sd-action-bar-inner{
        position: relative; z-index: 1;
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: 1rem; flex-wrap: wrap;
    }
    body.page-service-detail .sd-action-bar-left{
        display: flex; align-items: flex-start; gap: .75rem; flex: 1; min-width: 0;
    }
    body.page-service-detail .sd-action-bar-right{
        display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0;
    }
    body.page-service-detail .sd-header-body{ flex: 1; min-width: 0; }
    body.page-service-detail .sd-header-title{
        font-size: 1.4rem; font-weight: var(--font-weight-extrabold);
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        letter-spacing: -.025em; line-height: 1.2; margin: 0 0 .5rem 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body.page-service-detail .sd-header-chips{
        display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-bottom: .375rem;
    }
    body.page-service-detail .sd-hchip{
        display: inline-flex; align-items: center; gap: .25rem;
        padding: .2rem .55rem; border-radius: 999px;
        font-size: .67rem; font-weight: var(--font-weight-semibold);
        border: 1px solid var(--ink-200); background: var(--ink-50); color: var(--ink-600);
        white-space: nowrap;
    }
    body.page-service-detail .sd-hchip i{ font-size: .6rem; }
    body.page-service-detail .sd-hchip--type{ background: rgba(2,84,45,.1);  color: var(--brand-primary);   border-color: rgba(2,84,45,.2); }
    body.page-service-detail .sd-hchip--sell{ background: rgba(2,84,45,.06); color: var(--brand-secondary);  border-color: rgba(2,84,45,.15); }
    body.page-service-detail .sd-hchip--date{ background: var(--ink-50); color: var(--ink-500); }
    body.page-service-detail .sd-hchip--cat{ background: rgba(59,130,246,.08); color: #3b82f6; border-color: rgba(59,130,246,.2); }
    body.page-service-detail .sd-hchip--id{ background: rgba(2,84,45,.06); color: var(--brand-primary); border-color: rgba(2,84,45,.12); font-weight: var(--font-weight-bold); }
    body.page-service-detail .sd-header-desc{
        font-size: .775rem; color: var(--ink-600); line-height: 1.6; margin: .375rem 0 0 0;
        padding: .45rem .75rem; background: var(--ink-50); border-radius: .5rem;
        border: 1px solid rgba(2,84,45,.07); max-width: 620px; background: rgba(2,84,45,.03);
    }

    /* ── Description Card (left col, below header) ── */
    body.page-service-detail .sd-desc-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    body.page-service-detail .sd-desc-card-inner{
        display: flex;
        gap: 1.25rem;
        padding: 1.1rem 1.25rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    body.page-service-detail .sd-desc-left{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }
    body.page-service-detail .sd-desc-badges{
        display: flex;
        gap: .375rem;
        flex-wrap: wrap;
        align-items: center;
    }
    body.page-service-detail .sd-desc-badge{
        display: inline-flex; align-items: center; gap: .25rem;
        padding: .18rem .55rem;
        border-radius: 999px;
        font-size: .65rem; font-weight: var(--font-weight-bold);
        text-transform: uppercase; letter-spacing: .04em;
    }
    body.page-service-detail .sd-desc-badge--active{ background: rgba(2,84,45,.12);  color: var(--brand-primary);  border: 1px solid rgba(2,84,45,.2); }
    body.page-service-detail .sd-desc-badge--inactive{ background: rgba(239,68,68,.1); color: #ef4444;               border: 1px solid rgba(239,68,68,.2); }
    body.page-service-detail .sd-desc-badge--type{ background: var(--ink-100);     color: var(--ink-600);         border: 1px solid var(--ink-200); }
    body.page-service-detail .sd-desc-badge--sell{ background: rgba(2,84,45,.06);  color: var(--brand-secondary); border: 1px solid rgba(2,84,45,.12); }
    body.page-service-detail .sd-desc-text{
        font-size: .8rem;
        color: var(--ink-600);
        line-height: 1.7;
        margin: 0;
        padding: .5rem .75rem;
        background: var(--ink-50);
        border-radius: .5rem;
        border: 1px solid rgba(2,84,45,.07); background: rgba(2,84,45,.03);
    }
    /* Rich text from the service editor: keep the card's own typography so pasted
       markup can't shrink or restyle the description. */
    body.page-service-detail .sd-desc-text > *{ margin: 0; }
    body.page-service-detail .sd-desc-text > * + *{ margin-top: .4rem; }
    body.page-service-detail .sd-desc-text p,
    body.page-service-detail .sd-desc-text div,
    body.page-service-detail .sd-desc-text span,
    body.page-service-detail .sd-desc-text li{
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
        color: inherit;
    }
    body.page-service-detail .sd-desc-text ul,
    body.page-service-detail .sd-desc-text ol{ padding-left: 1.1rem; }
    body.page-service-detail .sd-desc-text h1,
    body.page-service-detail .sd-desc-text h2,
    body.page-service-detail .sd-desc-text h3,
    body.page-service-detail .sd-desc-text h4,
    body.page-service-detail .sd-desc-text h5,
    body.page-service-detail .sd-desc-text h6{
        font-size: .85rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
    }
    body.page-service-detail .sd-desc-text a{ color: var(--brand-primary); text-decoration: underline; }
    body.page-service-detail .sd-desc-text img{ max-width: 100%; height: auto; }
    body.page-service-detail .sd-desc-keywords{
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: .4rem;
        padding-left: 1.25rem;
        border-left: 1px solid var(--ink-200);
        max-width: 220px;
    }
    body.page-service-detail .sd-desc-kw-label{
        font-size: .62rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink-500);
        display: flex;
        align-items: center;
        gap: .3rem;
    }

    /* ── Main Bento ── */
    body.page-service-detail .sd-bento-grid{
        display: grid;
        grid-template-columns: 1fr 310px;
        gap: 1rem;
        align-items: start;
    }
    body.page-service-detail .sd-left-col{ display: flex; flex-direction: column; gap: 1rem; }
    body.page-service-detail .sd-right-col{ display: flex; flex-direction: column; gap: 1rem; }

    /* Metrics Strip */
    body.page-service-detail .sd-metrics-strip{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .25rem;
        background: var(--ink-100);
        padding: .25rem;
        border-radius: .875rem;
        border: 1px solid var(--ink-200);
    }
    body.page-service-detail .sd-metric-tile{
        background: var(--surface-primary);
        padding: 1rem .875rem;
        border-radius: .75rem;
        transition: all .15s ease;
    }
    body.page-service-detail .sd-metric-tile:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
    body.page-service-detail .sd-metric-lbl{
        font-size: .6rem; font-weight: var(--font-weight-bold);
        color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem;
    }
    body.page-service-detail .sd-metric-val{
        font-size: 1.25rem; font-weight: var(--font-weight-extrabold);
        color: var(--brand-primary); line-height: 1.1; margin-bottom: .15rem;
    }
    body.page-service-detail .sd-metric-sub{ font-size: .63rem; color: var(--ink-400); font-weight: var(--font-weight-medium); }

    /* Metadata Card (clean light) */
    body.page-service-detail .sd-meta-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    body.page-service-detail .sd-meta-card-title{
        font-size: .67rem; font-weight: var(--font-weight-bold);
        text-transform: uppercase; letter-spacing: .06em;
        color: var(--ink-600);
        margin: 0;
        padding: .42rem 1rem;
        border-bottom: 1px solid var(--ink-100);
        display: flex; align-items: center; gap: .375rem;
        background: var(--ink-50, #f9fafb);
    }
    body.page-service-detail .sd-meta-card-title .pd-hdr-icon i{ color: #fff !important; }
    body.page-service-detail .sd-meta-card-body{ padding: .75rem 1rem; }
    body.page-service-detail .sd-meta-row{
        display: flex; justify-content: space-between; align-items: flex-start;
        padding: .35rem 1rem; border-bottom: 1px solid var(--ink-100);
        gap: .5rem;
    }
    body.page-service-detail .sd-meta-row:last-child{ border-bottom: none; padding-bottom: 0; }
    body.page-service-detail .sd-meta-key{ font-size: .67rem; font-weight: var(--font-weight-semibold); color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
    body.page-service-detail .sd-meta-value{ font-size: .72rem; font-weight: var(--font-weight-semibold); color: var(--ink-700); text-align: right; }
    body.page-service-detail .sd-meta-chips{ display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
    body.page-service-detail .sd-meta-chip{
        font-size: .63rem; background: rgba(2,84,45,.08); color: var(--brand-primary);
        padding: .15rem .45rem; border-radius: .375rem; font-weight: var(--font-weight-semibold);
        border: 1px solid rgba(2,84,45,.14);
    }

    /* Rating compact */
    body.page-service-detail .sd-rating-compact{
        display: flex; align-items: center; justify-content: space-between;
        padding: .75rem; background: var(--ink-50);
        border: 1px solid var(--ink-200); border-radius: .625rem; margin-bottom: .75rem;
    }

    /* Variants / Packages */
    body.page-service-detail .sd-variant-wrap{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-service-detail .sd-variant-table{
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: .78rem;
    }

    body.page-service-detail .sd-variant-table th{
        padding: .75rem 1rem;
        font-size: .7rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .05em;
        white-space: nowrap;
        background: var(--ink-50);
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-service-detail .sd-variant-table th:first-child,
body.page-service-detail .sd-variant-table td:first-child{
        width: 54%;
    }

    body.page-service-detail .sd-variant-table th:not(:first-child),
body.page-service-detail .sd-variant-table td:not(:first-child){
        width: 11.5%;
        text-align: center;
    }

    body.page-service-detail .sd-variant-table td{
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--ink-100);
        vertical-align: middle;
        color: var(--ink-600);
        overflow-wrap: anywhere;
    }

    body.page-service-detail .sd-variant-table tr:nth-child(even) td{
        background: rgba(2, 84, 45, .025);
    }

    body.page-service-detail .sd-variant-table tr:last-child td{
        border-bottom: none;
    }

    body.page-service-detail .sd-variant-name{
        display: grid;
        gap: .28rem;
        min-width: 0;
    }

    body.page-service-detail .sd-variant-title{
        color: var(--ink-700);
        font-size: .86rem;
        font-weight: var(--font-weight-semibold);
        line-height: 1.35;
    }

    body.page-service-detail .sd-variant-sku{
        color: #8aa0b8;
        font-size: .68rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.35;
        word-break: break-word;
    }

    body.page-service-detail .sd-variant-meta{
        color: var(--ink-500);
        font-size: .7rem;
        font-weight: var(--font-weight-semibold);
        line-height: 1.35;
        text-transform: capitalize;
    }

    body.page-service-detail .sd-variant-desc{
        color: #8aa0b8;
        font-size: .72rem;
        line-height: 1.45;
    }

    body.page-service-detail .sd-variant-price,
body.page-service-detail .sd-variant-number{
        color: var(--ink-700);
        font-weight: var(--font-weight-semibold);
        white-space: nowrap;
    }

    body.page-service-detail .sd-variant-price{
        color: var(--brand-primary);
        font-weight: var(--font-weight-bold);
    }

    body.page-service-detail .sd-variant-status{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 62px;
        padding: .18rem .5rem;
        border-radius: 999px;
        font-size: .64rem;
        font-weight: var(--font-weight-bold);
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.page-service-detail .sd-variant-status.active{
        background: rgba(2,84,45,.12);
        color: var(--brand-primary);
    }

    body.page-service-detail .sd-variant-status.inactive{
        background: rgba(239,68,68,.1);
        color: #ef4444;
    }

    /* ── Responsive ── */
    @media (max-width: 1199px) {
        body.page-service-detail .sd-bento-grid{ grid-template-columns: 1fr 270px; }
        body.page-service-detail .sd-metrics-strip{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 991px) {
        body.page-service-detail .sd-bento-grid{ grid-template-columns: 1fr; }
        body.page-service-detail .sd-metrics-strip{ grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 767px) {
        body.page-service-detail .pd-container{ padding: .5rem; }
        body.page-service-detail .pd-header-content{ flex-direction: column; align-items: stretch; gap: .75rem; }
        body.page-service-detail .pd-header-left{ flex-direction: column; align-items: flex-start; }
        body.page-service-detail .pd-header-actions{ width: 100%; }
        body.page-service-detail .pd-header-actions .pd-btn{ flex: 1; justify-content: center; }
        body.page-service-detail .sd-metrics-strip{ grid-template-columns: repeat(2, 1fr); }
        body.page-service-detail .pd-info-grid{ grid-template-columns: 1fr; }
        body.page-service-detail .pd-amenities{ grid-template-columns: 1fr; }
        body.page-service-detail .pd-thumbs-row{ justify-content: flex-start; }
        body.page-service-detail .pd-related-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 575px) {
        body.page-service-detail .sd-metrics-strip{ grid-template-columns: 1fr 1fr; }
        body.page-service-detail .pd-related-grid{ grid-template-columns: 1fr; }
        body.page-service-detail .pd-stats{ grid-template-columns: 1fr 1fr; }
        body.page-service-detail .sd-variant-wrap{ overflow: visible; }
        body.page-service-detail .sd-variant-table,
body.page-service-detail .sd-variant-table tbody,
body.page-service-detail .sd-variant-table tr,
body.page-service-detail .sd-variant-table td{
            display: block;
            width: 100% !important;
            min-width: 0;
        }
        body.page-service-detail .sd-variant-table{
            border-collapse: separate;
            border-spacing: 0 .65rem;
            font-size: .78rem;
        }
        body.page-service-detail .sd-variant-table thead{
            display: none;
        }
        body.page-service-detail .sd-variant-table tr{
            background: var(--surface-primary);
            border: 1px solid var(--ink-200);
            border-radius: .75rem;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        body.page-service-detail .sd-variant-table tr:nth-child(even) td{
            background: transparent;
        }
        body.page-service-detail .sd-variant-table td{
            display: grid;
            grid-template-columns: 92px 1fr;
            gap: .75rem;
            align-items: start;
            padding: .65rem .85rem;
            border-bottom: 1px solid var(--ink-100);
            text-align: left !important;
        }
        body.page-service-detail .sd-variant-table td::before{
            content: attr(data-label);
            color: var(--ink-500);
            font-size: .62rem;
            font-weight: var(--font-weight-bold);
            text-transform: uppercase;
            letter-spacing: .05em;
        }
        body.page-service-detail .sd-variant-table td:first-child{
            grid-template-columns: 1fr;
            background: var(--ink-50);
        }
        body.page-service-detail .sd-variant-table td:first-child::before{
            display: none;
        }
        body.page-service-detail .sd-variant-table td:last-child{
            border-bottom: none;
        }
        body.page-service-detail .sd-variant-status{
            justify-self: start;
        }
    }


/* ==========================================================
   Template: service_service.html (page-service-service)
   ========================================================== */

/* ============================================================
   SERVICE MANAGEMENT — DESIGN SYSTEM v2
   Compact, professional, responsive. Light + dark via
   html[data-theme="dark"]. Every dynamic JS component covered.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
body.page-service-service{
    --gap-xs: .5rem;

    --sv-primary: #02542D;
    --sv-primary-600: #046B3A;
    --sv-primary-700: #013A1F;
    --sv-accent: #7CF5A3;

    --sv-page: #f3f6f4;
    --sv-surface: #ffffff;
    --sv-surface-2: #f7faf8;
    --sv-surface-3: #edf2ef;
    --sv-border: #e1e8e3;
    --sv-border-strong: #c9d4cd;

    --sv-text: #15221b;
    --sv-text-2: #45544c;
    --sv-muted: #70806f;

    --sv-primary-soft: #e6f3ec;
    --sv-primary-soft-2: #d3ecdf;
    --sv-ring: rgba(4, 107, 58, .18);

    --sv-danger: #c23a3a;
    --sv-danger-soft: #fbecec;
    --sv-warn: #9a6b12;
    --sv-warn-soft: #fdf3dd;
    /* Informational accents follow the brand green (no blue) */
    --sv-info-soft: var(--sv-primary-soft);
    --sv-info: var(--sv-primary-600);

    --sv-radius-sm: 8px;
    --sv-radius: 12px;
    --sv-radius-lg: 16px;

    --sv-shadow-sm: 0 1px 2px rgba(10, 30, 20, .05);
    --sv-shadow-md: 0 4px 16px rgba(10, 30, 20, .08);
    --sv-shadow-lg: 0 18px 50px rgba(8, 24, 16, .22);

    --sv-btn-grad: linear-gradient(135deg, #046B3A 0%, #02542D 100%);

    /* Height of the fixed top navbar (content scrolls inside #mainContent below it) */
    --sv-nav-offset: 57px;
}

html[data-theme="dark"] body.page-service-service{
    --sv-primary: #12965a;
    --sv-primary-600: #17a866;
    --sv-primary-700: #0c6b3e;

    --sv-page: #0a110d;
    --sv-surface: #121b15;
    --sv-surface-2: #17221b;
    --sv-surface-3: #1c2921;
    --sv-border: rgba(150, 180, 162, .16);
    --sv-border-strong: rgba(150, 180, 162, .30);

    --sv-text: #eef5f0;
    --sv-text-2: #c4d3ca;
    --sv-muted: #92a399;

    --sv-primary-soft: rgba(124, 245, 163, .10);
    --sv-primary-soft-2: rgba(124, 245, 163, .18);
    --sv-ring: rgba(124, 245, 163, .22);

    --sv-danger: #e07a7a;
    --sv-danger-soft: rgba(224, 122, 122, .12);
    --sv-warn: #e3b76a;
    --sv-warn-soft: rgba(227, 183, 106, .12);
    --sv-info: var(--sv-primary-600);
    --sv-info-soft: var(--sv-primary-soft);

    --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sv-shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
    --sv-shadow-lg: 0 22px 60px rgba(0, 0, 0, .6);

    --sv-btn-grad: linear-gradient(135deg, #0f7d4a 0%, #0a5c36 100%);
}

/* ---------- 2. Page shell ---------- */
body.page-service-service{
    background: var(--sv-page);
}

/* Pull the layout flush against #mainContent's 1.25rem/1rem padding so
   content starts at the very top of the scroll area. */
body.page-service-service .service-layout{
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    margin: -1.25rem -1rem 0;
    padding: .6rem .8rem 1.5rem;
}

/* Progress bar (top of viewport) */
body.page-service-service .progress-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 1050;
    pointer-events: none;
}

body.page-service-service .progress-bar-custom{
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--sv-primary-600), var(--sv-accent));
    border-radius: 0 3px 3px 0;
    transition: width .35s ease;
}

/* ---------- 3. Sidebar (step navigation) ---------- */
body.page-service-service .service-sidebar{
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    padding: .9rem;
    box-shadow: var(--sv-shadow-sm);
}

body.page-service-service .service-sidebar-header{
    padding: .1rem .25rem .65rem;
    border-bottom: 1px solid var(--sv-border);
}

body.page-service-service .service-sidebar-title{
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--sv-text);
    letter-spacing: -.01em;
}

body.page-service-service .service-sidebar-title i{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--sv-btn-grad);
    color: #fff;
    font-size: .85rem;
    flex: none;
}

body.page-service-service .service-steps{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

body.page-service-service .step-item{
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--sv-text-2);
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

body.page-service-service .step-item i{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--sv-surface-3);
    color: var(--sv-muted);
    font-size: .8rem;
    flex: none;
    transition: background .15s ease, color .15s ease;
}

body.page-service-service .step-item:hover{
    background: var(--sv-surface-2);
    color: var(--sv-text);
}

body.page-service-service .step-item.active{
    background: var(--sv-btn-grad);
    color: #fff;
    box-shadow: 0 4px 12px rgba(2, 84, 45, .28);
}

body.page-service-service .step-item.active i{
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

body.page-service-service .step-item.completed{
    color: var(--sv-primary);
    border-color: var(--sv-border);
    background: var(--sv-primary-soft);
}

body.page-service-service .step-item.completed i{
    background: var(--sv-primary-soft-2);
    color: var(--sv-primary);
}

html[data-theme="dark"] body.page-service-service .step-item.active,
html[data-theme="dark"] body.page-service-service .step-item.active i{
    color: #fff;
}

body.page-service-service .step-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-service-service .sidebar-actions{
    border-top: 1px solid var(--sv-border);
    padding-top: .75rem;
}

body.page-service-service .btn-save-main{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .9rem;
    border: none;
    border-radius: 10px;
    background: var(--sv-btn-grad);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 84, 45, .3);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

body.page-service-service .btn-save-main:hover{
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 84, 45, .38);
    color: #fff;
}

body.page-service-service .btn-save-main:active{
    transform: translateY(0);
}

/* ---------- 4. Main column & header ---------- */
body.page-service-service .service-main{
    min-width: 0;
}

body.page-service-service .main-header{
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .75rem;
    margin-bottom: .6rem;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
}

body.page-service-service .mh-left{
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

body.page-service-service .mh-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
    font-size: .95rem;
    flex: none;
}

body.page-service-service .main-title{
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--sv-text);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-service-service .mh-right{
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
}

body.page-service-service .main-step-indicator{
    font-size: .74rem;
    font-weight: 700;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border-radius: 999px;
    padding: .3rem .65rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

body.page-service-service .btn-mh-save{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: var(--sv-btn-grad);
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

body.page-service-service .btn-mh-save:hover{
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff;
}

/* ---------- 5. Mobile header & drawer ---------- */
body.page-service-service .mobile-header{
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: -1.25rem -1rem 0;
    padding: .6rem 1rem .3rem;
}

body.page-service-service .mobile-header-copy{
    min-width: 0;
}

body.page-service-service .mobile-header .main-title{
    font-size: 1rem;
}

body.page-service-service .mobile-header-step{
    font-size: .72rem;
    font-weight: 600;
    color: var(--sv-muted);
}

body.page-service-service .mobile-toggle{
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border: 1px solid var(--sv-border);
    border-radius: 10px;
    background: var(--sv-surface);
    color: var(--sv-text);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sv-shadow-sm);
}

body.page-service-service .mobile-overlay{
    position: fixed;
    inset: 0;
    background: rgba(6, 18, 12, .5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    z-index: 1240;
    transition: opacity .2s ease, visibility .2s ease;
}

body.page-service-service .mobile-overlay.overlay-active{
    opacity: 1;
    visibility: visible;
}

/* ---------- 6. Tab cards ---------- */
body.page-service-service .tab-card{
    display: none;
}

body.page-service-service .tab-card.active{
    display: block;
    animation: service-service--sv-fade-in .22s ease;
}

@keyframes service-service--sv-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

body.page-service-service .card-title{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .15rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sv-text);
    letter-spacing: -.01em;
}

body.page-service-service .card-title i{
    color: var(--sv-primary);
    font-size: .95rem;
}

body.page-service-service .tab-lead{
    margin: 0 0 .8rem;
    font-size: .8rem;
    color: var(--sv-muted);
    max-width: 72ch;
}

body.page-service-service .helper-card{
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .8rem;
    margin-bottom: .8rem;
    background: var(--sv-primary-soft);
    border: 1px solid var(--sv-primary-soft-2);
    border-radius: var(--sv-radius-sm);
    font-size: .76rem;
    color: var(--sv-text-2);
}

body.page-service-service .helper-card i{
    color: var(--sv-primary);
    font-size: .85rem;
    margin-top: .1rem;
    flex: none;
}

body.page-service-service .helper-card p{
    margin: 0;
}

/* ---------- 7. Section panels ---------- */
body.page-service-service .section-stack{
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

body.page-service-service .section-split-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
    align-items: start;
}

@media (min-width: 1100px) {
    body.page-service-service .section-split-grid{ grid-template-columns: 1fr 1fr; }
}

body.page-service-service .section-panel{
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    padding: .8rem 1rem .95rem;
    box-shadow: var(--sv-shadow-sm);
}

body.page-service-service .section-panel-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--sv-border);
}

body.page-service-service .section-panel-title{
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    color: var(--sv-text);
    letter-spacing: -.01em;
}

body.page-service-service .section-panel-subtitle{
    margin: .15rem 0 0;
    font-size: .74rem;
    color: var(--sv-muted);
}

body.page-service-service .section-badge{
    flex: none;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border: 1px solid var(--sv-primary-soft-2);
    border-radius: 999px;
    padding: .28rem .6rem;
    white-space: nowrap;
}

body.page-service-service .section-toolbar{
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

body.page-service-service .section-note{
    margin: .4rem 0 0;
    font-size: .72rem;
    color: var(--sv-muted);
}

body.page-service-service .section-note code,
body.page-service-service .section-panel-subtitle code,
body.page-service-service .booking-note-card code{
    font-size: .68rem;
    background: var(--sv-surface-3);
    border: 1px solid var(--sv-border);
    border-radius: 5px;
    padding: .06rem .3rem;
    color: var(--sv-primary);
}

/* ---------- 8. Forms ---------- */
body.page-service-service .form-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .7rem .8rem;
}

body.page-service-service .form-grid .full-width{
    grid-column: 1 / -1;
}

body.page-service-service .form-group{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.page-service-service .form-label{
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .32rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--sv-text-2);
}

body.page-service-service .form-label i{
    color: var(--sv-primary);
    font-size: .78rem;
}

body.page-service-service .field-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

body.page-service-service .form-control,
body.page-service-service .form-select{
    width: 100%;
    padding: .48rem .65rem;
    font-size: .83rem;
    line-height: 1.4;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.page-service-service .form-control::placeholder{
    color: var(--sv-muted);
    opacity: .8;
}

body.page-service-service .form-control:focus,
body.page-service-service .form-select:focus{
    outline: none;
    border-color: var(--sv-primary-600);
    box-shadow: 0 0 0 3px var(--sv-ring);
    background-color: var(--sv-surface);
    color: var(--sv-text);
}

body.page-service-service .form-control-lg{
    padding: .6rem .75rem;
    font-size: .95rem;
    font-weight: 600;
}

body.page-service-service .form-textarea{
    min-height: 60px;
    resize: vertical;
}

html[data-theme="dark"] body.page-service-service .form-select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2392a399' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] body.page-service-service .form-control,
html[data-theme="dark"] body.page-service-service .form-select{
    background-color: var(--sv-surface-2);
}

html[data-theme="dark"] body.page-service-service input[type="date"].form-control,
html[data-theme="dark"] body.page-service-service input[type="time"].form-control,
html[data-theme="dark"] body.page-service-service input[type="datetime-local"].form-control{
    color-scheme: dark;
}

body.page-service-service input[type="file"].form-control{
    padding: .35rem .5rem;
    font-size: .76rem;
}

body.page-service-service .form-control.is-invalid,
body.page-service-service .form-select.is-invalid{
    border-color: var(--sv-danger);
    background-image: none;
}

body.page-service-service .form-control.is-invalid:focus,
body.page-service-service .form-select.is-invalid:focus{
    border-color: var(--sv-danger);
    box-shadow: 0 0 0 3px var(--sv-danger-soft);
}

body.page-service-service .text-muted{
    color: var(--sv-muted) !important;
    font-size: .72rem;
}

body.page-service-service .text-muted i{
    font-size: .72rem;
}

body.page-service-service .muted-link{
    color: var(--sv-primary);
    font-weight: 600;
    text-decoration: none;
}

body.page-service-service .muted-link:hover{
    text-decoration: underline;
    color: var(--sv-primary-600);
}

body.page-service-service .hidden,
body.page-service-service .is-hidden,
body.page-service-service .hidden-select{
    display: none !important;
}

/* Booking layout */
body.page-service-service .booking-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem .8rem;
}

@media (min-width: 640px) {
    body.page-service-service .booking-grid{ grid-template-columns: repeat(2, 1fr); }
    body.page-service-service .booking-grid .booking-span-2{ grid-column: span 2; }
}

@media (min-width: 1180px) {
    body.page-service-service .booking-grid{ grid-template-columns: repeat(4, 1fr); }
    body.page-service-service .booking-grid .booking-span-2{ grid-column: span 2; }
}

body.page-service-service .booking-note-card{
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .8rem;
    background: var(--sv-primary-soft);
    border: 1px solid var(--sv-primary-soft-2);
    border-radius: var(--sv-radius-sm);
    font-size: .74rem;
    color: var(--sv-text-2);
}

body.page-service-service .booking-note-card i{
    color: var(--sv-info);
    margin-top: .1rem;
    flex: none;
}

body.page-service-service .booking-note-card strong{
    display: block;
    color: var(--sv-text);
    font-size: .76rem;
    margin-bottom: .1rem;
}

/* Identity layout: name + category side by side on wide screens */
body.page-service-service .service-identity-grid{
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    body.page-service-service .service-identity-grid{ grid-template-columns: 1fr 1fr; }
    body.page-service-service .service-identity-grid .service-name-group,
body.page-service-service .service-identity-grid .service-category-group{ grid-column: auto; }
    body.page-service-service .service-identity-grid .service-description-group{ grid-column: 1 / -1; }
}

/* ---------- 9. Toggle switches ---------- */
body.page-service-service .toggle-group{
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .toggle-switch{
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: none;
    margin: 0;
}

body.page-service-service .toggle-switch input{
    opacity: 0;
    width: 0;
    height: 0;
}

body.page-service-service .toggle-slider{
    position: absolute;
    inset: 0;
    background: var(--sv-border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease;
}

body.page-service-service .toggle-slider::before{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .18s ease;
}

body.page-service-service .toggle-switch input:checked + .toggle-slider{
    background: var(--sv-primary-600);
}

body.page-service-service .toggle-switch input:checked + .toggle-slider::before{
    transform: translateX(16px);
}

body.page-service-service .toggle-switch input:focus-visible + .toggle-slider{
    box-shadow: 0 0 0 3px var(--sv-ring);
}

body.page-service-service .toggle-label{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.page-service-service .toggle-label-title{
    font-size: .8rem;
    font-weight: 600;
    color: var(--sv-text);
}

body.page-service-service .toggle-label-desc{
    font-size: .7rem;
    color: var(--sv-muted);
}

body.page-service-service .toggle-content{
    margin-top: .55rem;
    padding: .6rem .75rem;
    border-left: 3px solid var(--sv-primary-soft-2);
    background: var(--sv-surface-2);
    border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0;
}

/* ---------- 10. Buttons ---------- */
body.page-service-service .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .95rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: var(--sv-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.3;
    transition: background .15s ease, color .15s ease, border-color .15s ease,
        box-shadow .15s ease, transform .15s ease, filter .15s ease;
}

body.page-service-service .btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--sv-ring);
}

body.page-service-service .btn-sm{
    padding: .35rem .65rem;
    font-size: .74rem;
    border-radius: 7px;
}

body.page-service-service .btn-icon{
    padding: .42rem .55rem;
}

body.page-service-service .btn-primary{
    background: var(--sv-btn-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(2, 84, 45, .25);
}

body.page-service-service .btn-primary:hover,
body.page-service-service .btn-primary:focus{
    background: var(--sv-btn-grad);
    filter: brightness(1.1);
    color: #fff;
    transform: translateY(-1px);
}

body.page-service-service .btn-secondary{
    background: var(--sv-surface-3);
    border-color: var(--sv-border);
    color: var(--sv-text-2);
}

body.page-service-service .btn-secondary:hover{
    background: var(--sv-border);
    color: var(--sv-text);
}

body.page-service-service .btn-outline{
    background: transparent;
    border-color: var(--sv-primary-600);
    color: var(--sv-primary);
}

body.page-service-service .btn-outline:hover{
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
}

body.page-service-service .btn-ghost{
    background: transparent;
    border-color: var(--sv-border);
    color: var(--sv-text-2);
}

body.page-service-service .btn-ghost:hover{
    background: var(--sv-surface-3);
    color: var(--sv-text);
}

body.page-service-service .btn-danger{
    background: var(--sv-danger-soft);
    border-color: transparent;
    color: var(--sv-danger);
}

body.page-service-service .btn-danger:hover{
    background: var(--sv-danger);
    color: #fff;
}

body.page-service-service .nav-buttons{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .7rem;
}

/* ---------- 11. Rich text editor ---------- */
body.page-service-service .editor-wrapper{
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.page-service-service .editor-wrapper:focus-within{
    border-color: var(--sv-primary-600);
    box-shadow: 0 0 0 3px var(--sv-ring);
}

body.page-service-service .editor-toolbar{
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .35rem .5rem;
    background: var(--sv-surface-2);
    border-bottom: 1px solid var(--sv-border);
}

body.page-service-service .editor-btn-group{
    display: flex;
    gap: .15rem;
}

body.page-service-service .editor-btn-group + .editor-btn-group{
    border-left: 1px solid var(--sv-border);
    padding-left: .5rem;
}

body.page-service-service .editor-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sv-text-2);
    font-size: .82rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

body.page-service-service .editor-btn:hover,
body.page-service-service .editor-btn.active{
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
}

body.page-service-service .editor-content{
    min-height: 120px;
    max-height: 320px;
    overflow-y: auto;
    padding: .65rem .8rem;
    font-size: .84rem;
    color: var(--sv-text);
    outline: none;
}

body.page-service-service .editor-content:empty::before{
    content: attr(data-placeholder);
    color: var(--sv-muted);
    opacity: .8;
    pointer-events: none;
}

body.page-service-service .editor-content a{
    color: var(--sv-primary);
}

html[data-theme="dark"] body.page-service-service .editor-wrapper,
html[data-theme="dark"] body.page-service-service .editor-content{
    background: var(--sv-surface-2);
}

/* ---------- 12. Tags ---------- */
body.page-service-service .tag-cluster-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
}

body.page-service-service .tag-panel{
    padding: .65rem .75rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .tag-panel-featured{
    border-color: var(--sv-primary-soft-2);
    background: var(--sv-primary-soft);
}

html[data-theme="dark"] body.page-service-service .tag-panel-featured{
    background: var(--sv-primary-soft);
}

body.page-service-service .tags-display{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
}

body.page-service-service .tags-display:empty{
    margin-top: 0;
}

body.page-service-service .tag-pill{
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .3rem .22rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sv-primary);
    background: var(--sv-surface);
    border: 1px solid var(--sv-primary-soft-2);
    border-radius: 999px;
}

html[data-theme="dark"] body.page-service-service .tag-pill{
    background: var(--sv-surface-3);
    color: var(--sv-accent);
}

body.page-service-service .tag-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: .72rem;
    cursor: pointer;
    opacity: .7;
}

body.page-service-service .tag-remove:hover{
    opacity: 1;
    background: var(--sv-danger-soft);
    color: var(--sv-danger);
}

/* ---------- 13. Discoverability layout ---------- */
body.page-service-service .discoverability-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
}

@media (min-width: 1100px) {
    body.page-service-service .discoverability-layout{
        grid-template-columns: 1fr;
        gap: .65rem;
    }
    body.page-service-service .discoverability-social{ grid-column: auto; }
    body.page-service-service .discoverability-tags .tag-cluster-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.page-service-service .discoverability-media .image-gallery{ grid-template-columns: repeat(auto-fill, 80px); justify-content:start; }
    body.page-service-service .discoverability-note{ margin-top:.35rem; }
    body.page-service-service .discoverability-social .field-header{ margin-bottom:0!important; }
}

@media (min-width: 700px) and (max-width: 1099px) {
    body.page-service-service .discoverability-tags .tag-cluster-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.page-service-service .discoverability-tags .tag-panel:last-child{ grid-column:1/-1; }
}

body.page-service-service .discoverability-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .5rem;
}

body.page-service-service .discoverability-card-head .form-label{
    margin-bottom: 0;
}

body.page-service-service .discoverability-counter{
    white-space: nowrap;
}

body.page-service-service .discoverability-note{
    display: block;
    margin-top: .5rem;
}

/* ---------- 14. Image gallery ---------- */
body.page-service-service .image-gallery{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: .5rem;
}

body.page-service-service .image-item{
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--sv-radius-sm);
    overflow: hidden;
    border: 1px solid var(--sv-border);
    background: var(--sv-surface-3);
}

body.page-service-service .image-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-service-service .image-remove{
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(10, 20, 14, .65);
    color: #fff;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

body.page-service-service .image-remove:hover{
    background: var(--sv-danger);
}

body.page-service-service .image-add{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    aspect-ratio: 1;
    border: 1.5px dashed var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-surface-2);
    color: var(--sv-muted);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

body.page-service-service .image-add i{
    font-size: .95rem;
}

body.page-service-service .image-add:hover{
    border-color: var(--sv-primary-600);
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
}

/* ---------- 15. File / repeatable rows ---------- */
body.page-service-service .file-list{
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

body.page-service-service .file-list:empty{
    display: none;
}

body.page-service-service .file-item{
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .75rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .file-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
    font-size: .85rem;
    flex: none;
    margin-top: .1rem;
}

body.page-service-service .file-info{
    min-width: 0;
}

body.page-service-service .file-item .remove-item,
body.page-service-service .file-item .remove-bundle{
    flex: none;
    margin-top: .1rem;
}

/* ---------- 16. Variant table ---------- */
body.page-service-service .variant-table-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

body.page-service-service .variant-table-caption{
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sv-text);
}

body.page-service-service .variant-table-note{
    font-size: .71rem;
    color: var(--sv-muted);
}

body.page-service-service .variant-table-shell{
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    overflow: hidden;
    background: var(--sv-surface);
}

html[data-theme="dark"] body.page-service-service .variant-table-shell{
    background: var(--sv-surface-2);
}

body.page-service-service .variant-table-scroll-wrapper{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.page-service-service .variant-table{
    width: 100%;
    min-width: 1020px;
    border-collapse: collapse;
    font-size: .78rem;
}

body.page-service-service .variant-table thead th{
    position: sticky;
    top: 0;
    background: var(--sv-surface-3);
    color: var(--sv-text-2);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    padding: .5rem .55rem;
    border-bottom: 1px solid var(--sv-border);
    white-space: nowrap;
}

body.page-service-service .variant-table tbody td{
    padding: .4rem .45rem;
    border-bottom: 1px solid var(--sv-border);
    vertical-align: top;
}

body.page-service-service .variant-table tbody tr:last-child td{
    border-bottom: none;
}

body.page-service-service .variant-table tbody tr:hover{
    background: var(--sv-surface-2);
}

body.page-service-service .variant-table .form-control,
body.page-service-service .variant-table .form-select{
    padding: .35rem .5rem;
    font-size: .76rem;
    min-width: 80px;
}

body.page-service-service .variant-table .variant-description{
    min-width: 180px;
    min-height: 40px;
}

body.page-service-service .variant-col-actions{
    width: 56px;
}

body.page-service-service .variant-col-variant{
    min-width: 150px;
}

body.page-service-service .variant-row-actions{
    display: flex;
    justify-content: center;
    gap: .25rem;
    padding-top: .2rem;
}

body.page-service-service .variant-row-action-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--sv-border);
    border-radius: 7px;
    background: var(--sv-surface);
    color: var(--sv-muted);
    cursor: pointer;
    font-size: .78rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

body.page-service-service .variant-row-action-btn:hover,
body.page-service-service .variant-row-delete:hover{
    background: var(--sv-danger-soft);
    border-color: var(--sv-danger);
    color: var(--sv-danger);
}

body.page-service-service .variant-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.3rem 1rem;
    color: var(--sv-muted);
    font-size: .78rem;
}

body.page-service-service .variant-empty i{
    font-size: 1.3rem;
    opacity: .6;
}

/* ---------- 17. Custom dropdowns ---------- */
body.page-service-service .custom-dropdown{
    position: relative;
}

body.page-service-service .dropdown-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    padding: .48rem .65rem;
    font-size: .83rem;
    color: var(--sv-text);
    background: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html[data-theme="dark"] body.page-service-service .dropdown-trigger{
    background: var(--sv-surface-2);
}

body.page-service-service .dropdown-trigger:hover{
    border-color: var(--sv-primary-600);
}

body.page-service-service .custom-dropdown.open .dropdown-trigger{
    border-color: var(--sv-primary-600);
    box-shadow: 0 0 0 3px var(--sv-ring);
}

body.page-service-service .dropdown-trigger-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-service-service .dropdown-trigger > i{
    flex: none;
    font-size: .72rem;
    color: var(--sv-muted);
    transition: transform .15s ease;
}

body.page-service-service .custom-dropdown.open .dropdown-trigger > i{
    transform: rotate(180deg);
}

body.page-service-service .custom-dropdown .dropdown-menu{
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    box-shadow: var(--sv-shadow-md);
    padding: .3rem;
    max-height: 280px;
    overflow: hidden auto;
    margin: 0;
}

body.page-service-service .custom-dropdown.open .dropdown-menu{
    display: block;
}

html[data-theme="dark"] body.page-service-service .custom-dropdown .dropdown-menu{
    background: var(--sv-surface-2);
}

body.page-service-service .dropdown-search-wrap{
    position: sticky;
    top: 0;
    padding: .2rem .2rem .35rem;
    background: inherit;
}

body.page-service-service .dropdown-search{
    width: 100%;
    padding: .4rem .6rem;
    font-size: .78rem;
    color: var(--sv-text);
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: 7px;
}

body.page-service-service .dropdown-search:focus{
    outline: none;
    border-color: var(--sv-primary-600);
    box-shadow: 0 0 0 3px var(--sv-ring);
}

body.page-service-service .dropdown-options{
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

body.page-service-service .dropdown-option{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .42rem .6rem;
    font-size: .8rem;
    color: var(--sv-text);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, color .12s ease;
}

body.page-service-service .dropdown-option:hover{
    background: var(--sv-surface-3);
}

body.page-service-service .dropdown-option.selected{
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
    font-weight: 600;
}

html[data-theme="dark"] body.page-service-service .dropdown-option.selected{
    color: var(--sv-accent);
}

body.page-service-service .dropdown-check{
    flex: none;
    font-size: .8rem;
    visibility: hidden;
}

/* WZ-175: Related Services options lead with a (usually invisible) check icon, so the
   shared `justify-content:space-between` above was pushing the service name against the
   right edge of the menu. Pack these options from the start so labels read left-aligned
   like every other dropdown on the page. */
body.page-service-service #relatedDropdownOptions .dropdown-option{
    justify-content: flex-start;
    text-align: left;
}

body.page-service-service #relatedDropdownOptions .dropdown-option > span:last-child{
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

body.page-service-service .dropdown-option.selected .dropdown-check{
    visibility: visible;
}

/* Native <select> replaced by the custom dropdown UI (see enhancer script).
   The menu is fixed-positioned by JS so scroll wrappers can't clip it. */
body.page-service-service .select-dropdown > select{
    display: none !important;
}

body.page-service-service .select-dropdown .dropdown-menu{
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    min-width: 130px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1450;
}

body.page-service-service .variant-table .dropdown-trigger{
    padding: .35rem .5rem;
    font-size: .76rem;
    min-width: 96px;
}

/* Related service tags (selected, each with reason input) */
body.page-service-service .related-selected-tags{
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .55rem;
}

body.page-service-service .related-tag{
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .related-tag-name{
    flex: none;
    max-width: 40%;
    font-size: .76rem;
    font-weight: 600;
    color: var(--sv-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="dark"] body.page-service-service .related-tag-name{
    color: var(--sv-accent);
}

body.page-service-service .related-tag .form-control{
    flex: 1;
    padding: .35rem .55rem;
    font-size: .76rem;
}

body.page-service-service .related-tag-remove{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sv-muted);
    cursor: pointer;
    font-size: .85rem;
}

body.page-service-service .related-tag-remove:hover{
    background: var(--sv-danger-soft);
    color: var(--sv-danger);
}

/* ---------- 18. Modal foundation ---------- */
body.page-service-service .pref-modal-overlay,
body.page-service-service .dof-modal-overlay,
body.page-service-service .unsaved-nav-overlay,
body.page-service-service .pdf-modal{
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(7, 18, 12, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

body.page-service-service .pref-modal-overlay.active,
body.page-service-service .dof-modal-overlay.active,
body.page-service-service .unsaved-nav-overlay.active,
body.page-service-service .pdf-modal.active{
    opacity: 1;
    visibility: visible;
}

body.page-service-service .pref-modal,
body.page-service-service .dof-modal,
body.page-service-service .unsaved-nav-modal,
body.page-service-service .pdf-modal-content{
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 860px);
    width: 100%;
    transform: translateY(10px) scale(.985);
    transition: transform .2s ease;
    overflow: hidden;
}

body.page-service-service .pref-modal-overlay.active .pref-modal,
body.page-service-service .dof-modal-overlay.active .dof-modal,
body.page-service-service .unsaved-nav-overlay.active .unsaved-nav-modal,
body.page-service-service .pdf-modal.active .pdf-modal-content{
    transform: translateY(0) scale(1);
}

/* ---------- 19. Category preference modal ---------- */
body.page-service-service .pref-modal{
    max-width: 780px;
}

body.page-service-service .pref-modal-header{
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sv-border);
    flex-wrap: wrap;
}

body.page-service-service .pref-modal-header h3{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--sv-text);
    min-width: 0;
    flex: 1;
}

body.page-service-service .pref-modal-header h3 i{
    color: var(--sv-primary);
}

body.page-service-service .pref-step-badge{
    font-size: .64rem;
    font-weight: 700;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border-radius: 999px;
    padding: .22rem .55rem;
    white-space: nowrap;
}

body.page-service-service .pref-modal-close,
body.page-service-service .dof-modal-close,
body.page-service-service .pdf-modal-close,
body.page-service-service .unsaved-nav-close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--sv-surface-3);
    color: var(--sv-text-2);
    font-size: .8rem;
    cursor: pointer;
    flex: none;
    transition: background .15s ease, color .15s ease;
}

body.page-service-service .pref-modal-close:hover,
body.page-service-service .dof-modal-close:hover,
body.page-service-service .pdf-modal-close:hover,
body.page-service-service .unsaved-nav-close:hover{
    background: var(--sv-danger-soft);
    color: var(--sv-danger);
}

/* Level jump dropdown in modal header */
body.page-service-service .pref-level-jump{
    position: relative;
    flex: none;
}

body.page-service-service .pref-level-jump-btn{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--sv-text-2);
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: 8px;
    cursor: pointer;
}

body.page-service-service .pref-level-jump-btn:hover{
    border-color: var(--sv-primary-600);
    color: var(--sv-primary);
}

body.page-service-service .pref-level-jump-menu{
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 20;
    min-width: 230px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    box-shadow: var(--sv-shadow-md);
    padding: .3rem;
}

body.page-service-service .pref-level-jump.open .pref-level-jump-menu{
    display: block;
}

body.page-service-service .pref-level-option{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .45rem .6rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--sv-text);
}

body.page-service-service .pref-level-option:hover{
    background: var(--sv-surface-3);
}

body.page-service-service .pref-level-option.active{
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
}

body.page-service-service .pref-level-option.disabled{
    opacity: .45;
    cursor: not-allowed;
}

body.page-service-service .pref-level-option-main{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.page-service-service .pref-level-option-title{
    font-size: .78rem;
    font-weight: 600;
}

body.page-service-service .pref-level-option-value{
    font-size: .68rem;
    color: var(--sv-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Breadcrumb */
body.page-service-service .pref-breadcrumb{
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--sv-border);
    background: var(--sv-surface-2);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

body.page-service-service .pref-breadcrumb:empty{
    display: none;
}

body.page-service-service .pref-breadcrumb-item{
    font-size: .7rem;
    font-weight: 600;
    color: var(--sv-muted);
    padding: .25rem .55rem;
    border-radius: 999px;
    flex: none;
}

body.page-service-service .pref-breadcrumb-item.current{
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
}

body.page-service-service .pref-breadcrumb-item.clickable{
    cursor: pointer;
    color: var(--sv-text-2);
}

body.page-service-service .pref-breadcrumb-item.clickable:hover{
    background: var(--sv-surface-3);
    color: var(--sv-primary);
}

body.page-service-service .pref-breadcrumb-item.upcoming{
    opacity: .55;
}

body.page-service-service .pref-breadcrumb-sep{
    color: var(--sv-muted);
    font-size: .6rem;
    flex: none;
}

body.page-service-service .pref-modal-body{
    padding: .85rem 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 220px;
}

body.page-service-service .pref-selector-toolbar{
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .7rem;
    flex-wrap: wrap;
}

body.page-service-service .pref-search-wrap{
    position: relative;
    flex: 1;
    min-width: 200px;
}

body.page-service-service .pref-search-wrap i{
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sv-muted);
    font-size: .78rem;
    pointer-events: none;
}

body.page-service-service .pref-search{
    width: 100%;
    padding: .48rem .65rem .48rem 1.9rem;
    font-size: .8rem;
    color: var(--sv-text);
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .pref-search:focus{
    outline: none;
    border-color: var(--sv-primary-600);
    box-shadow: 0 0 0 3px var(--sv-ring);
}

body.page-service-service .pref-selection-status{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border-radius: 999px;
    padding: .35rem .7rem;
    white-space: nowrap;
}

body.page-service-service .pref-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
}

body.page-service-service .pref-grid-list{
    grid-template-columns: 1fr;
}

body.page-service-service .pref-item{
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .65rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color .13s ease, background .13s ease, transform .13s ease;
}

body.page-service-service .pref-item:hover{
    border-color: var(--sv-primary-600);
    transform: translateY(-1px);
}

body.page-service-service .pref-item.selected{
    border-color: var(--sv-primary-600);
    background: var(--sv-primary-soft);
}

body.page-service-service .pref-item-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
    font-size: .75rem;
    flex: none;
}

body.page-service-service .pref-item.selected .pref-item-icon{
    background: var(--sv-primary-600);
    color: #fff;
}

body.page-service-service .pref-item-text{
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

body.page-service-service .pref-item-title{
    font-size: .8rem;
    font-weight: 600;
    color: var(--sv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-service-service .pref-item-meta{
    font-size: .66rem;
    color: var(--sv-muted);
}

body.page-service-service .pref-item-arrow{
    color: var(--sv-muted);
    font-size: .7rem;
    flex: none;
}

body.page-service-service .pref-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: var(--sv-muted);
    font-size: .8rem;
    text-align: center;
}

body.page-service-service .pref-empty i{
    font-size: 1.5rem;
    opacity: .55;
}

body.page-service-service .pref-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--sv-border);
    font-size: .74rem;
    color: var(--sv-muted);
}

body.page-service-service .pref-pagination-btns{
    display: flex;
    gap: .3rem;
}

body.page-service-service .pref-pagination-btns button{
    padding: .3rem .6rem;
    font-size: .72rem;
    border: 1px solid var(--sv-border);
    border-radius: 7px;
    background: var(--sv-surface);
    color: var(--sv-text-2);
    cursor: pointer;
}

body.page-service-service .pref-pagination-btns button:hover{
    border-color: var(--sv-primary-600);
    color: var(--sv-primary);
}

body.page-service-service .pref-modal-footer{
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--sv-border);
    background: var(--sv-surface-2);
}

body.page-service-service .pref-btn{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: var(--sv-radius-sm);
    border: 1px solid var(--sv-border);
    background: var(--sv-surface);
    color: var(--sv-text-2);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}

body.page-service-service .pref-btn:hover{
    background: var(--sv-surface-3);
    color: var(--sv-text);
}

body.page-service-service .pref-btn-back{
    margin-right: auto;
}

body.page-service-service .pref-btn-skip{
    color: var(--sv-muted);
}

body.page-service-service .pref-btn-done{
    background: var(--sv-btn-grad);
    border-color: transparent;
    color: #fff;
}

body.page-service-service .pref-btn-done:hover{
    background: var(--sv-btn-grad);
    filter: brightness(1.1);
    color: #fff;
}

body.page-service-service .pref-btn-done:disabled{
    opacity: .5;
    cursor: not-allowed;
    filter: none;
}

/* Category open button + selected chips (on form) */
body.page-service-service .pref-open-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border: 1.5px dashed var(--sv-primary-600);
    border-radius: var(--sv-radius-sm);
    cursor: pointer;
    transition: background .15s ease, border-style .15s ease;
}

body.page-service-service .pref-open-btn:hover{
    background: var(--sv-primary-soft-2);
    border-style: solid;
}

body.page-service-service .pref-selected-display{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

body.page-service-service .pref-selected-display:empty{
    margin-top: 0;
}

body.page-service-service .pref-chip{
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .25rem .35rem .25rem .6rem;
    font-size: .72rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .13s ease;
}

body.page-service-service .pref-chip:hover{
    border-color: var(--sv-primary-600);
}

body.page-service-service .pref-chip-label{
    color: var(--sv-muted);
    font-weight: 600;
    white-space: nowrap;
}

body.page-service-service .pref-chip-value{
    color: var(--sv-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-service-service .pref-chip-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: var(--sv-muted);
    cursor: pointer;
    flex: none;
}

body.page-service-service .pref-chip-remove:hover{
    background: var(--sv-danger-soft);
    color: var(--sv-danger);
}

body.page-service-service .pref-chip-more{
    cursor: default;
    color: var(--sv-muted);
    font-weight: 700;
}

/* ---------- 20. Discount offers (cards + modal) ---------- */
body.page-service-service .dof-list{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .55rem;
}

body.page-service-service .dof-list:empty{
    margin-bottom: 0;
}

body.page-service-service .dof-empty{
    border: 1.5px dashed var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    padding: .8rem 1rem;
    font-size: .76rem;
    color: var(--sv-muted);
    text-align: center;
}

body.page-service-service .dof-add-btn{
    background: transparent;
    border: 1.5px dashed var(--sv-primary-600);
    color: var(--sv-primary);
    width: 100%;
    padding: .5rem .8rem;
    font-size: .8rem;
}

body.page-service-service .dof-add-btn:hover{
    background: var(--sv-primary-soft);
    border-style: solid;
    color: var(--sv-primary);
}

body.page-service-service .dof-card{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .8rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .dof-card-main{
    min-width: 0;
    flex: 1;
}

body.page-service-service .dof-card-top{
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

body.page-service-service .dof-type-badge{
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border-radius: 999px;
    padding: .18rem .5rem;
}

body.page-service-service .dof-status{
    font-size: .64rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .18rem .5rem;
}

body.page-service-service .dof-status-active{
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
}

body.page-service-service .dof-status-scheduled{
    color: var(--sv-info);
    background: var(--sv-info-soft);
}

body.page-service-service .dof-status-expired{
    color: var(--sv-danger);
    background: var(--sv-danger-soft);
}

body.page-service-service .dof-status-inactive{
    color: var(--sv-muted);
    background: var(--sv-surface-3);
}

body.page-service-service .dof-status-limit{
    color: var(--sv-warn);
    background: var(--sv-warn-soft);
}

body.page-service-service .dof-priority{
    font-size: .64rem;
    font-weight: 600;
    color: var(--sv-muted);
    background: var(--sv-surface-3);
    border-radius: 999px;
    padding: .18rem .5rem;
}

/* Two active offers sharing a priority — the applied discount is ambiguous. */
body.page-service-service .dof-priority.is-duplicate{
    color: #b91c1c;
    background: rgba(239, 68, 68, .12);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .35);
    cursor: help;
}

body.page-service-service .dof-card-desc{
    font-size: .8rem;
    font-weight: 600;
    color: var(--sv-text);
}

body.page-service-service .dof-card-meta,
body.page-service-service .dof-card-dates,
body.page-service-service .dof-card-usage{
    font-size: .7rem;
    color: var(--sv-muted);
    margin-top: .12rem;
}

body.page-service-service .dof-usage-progress{
    width: 100%;
    max-width: 220px;
    height: 5px;
    margin-top: .3rem;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sv-surface-3);
    accent-color: var(--sv-primary-600);
}

body.page-service-service .dof-usage-progress::-webkit-progress-bar{
    background: var(--sv-surface-3);
    border-radius: 999px;
}

body.page-service-service .dof-usage-progress::-webkit-progress-value{
    background: var(--sv-primary-600);
    border-radius: 999px;
}

body.page-service-service .dof-usage-progress::-moz-progress-bar{
    background: var(--sv-primary-600);
    border-radius: 999px;
}

body.page-service-service .dof-card-actions{
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: none;
}

body.page-service-service .dof-active-toggle-label{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--sv-text-2);
    cursor: pointer;
    user-select: none;
}

body.page-service-service .dof-active-toggle-label input[type="checkbox"]{
    accent-color: var(--sv-primary-600);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

body.page-service-service .dof-icon-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid var(--sv-border);
    border-radius: 7px;
    background: var(--sv-surface);
    color: var(--sv-muted);
    font-size: .74rem;
    cursor: pointer;
    transition: background .13s ease, color .13s ease, border-color .13s ease;
}

body.page-service-service .dof-icon-btn:hover{
    border-color: var(--sv-primary-600);
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
}

body.page-service-service .dof-icon-btn.dof-delete:hover{
    border-color: var(--sv-danger);
    color: var(--sv-danger);
    background: var(--sv-danger-soft);
}

body.page-service-service .dof-overlap-warning{
    padding: .55rem .8rem;
    margin-bottom: .5rem;
    background: var(--sv-warn-soft);
    border: 1px solid var(--sv-warn);
    border-radius: var(--sv-radius-sm);
    font-size: .74rem;
    color: var(--sv-warn);
    font-weight: 600;
}

/* DOF modal */
body.page-service-service .dof-modal{
    max-width: 640px;
}

body.page-service-service .dof-modal-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sv-border);
}

body.page-service-service .dof-modal-title{
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--sv-text);
}

body.page-service-service .dof-modal-subtitle{
    margin: .15rem 0 0;
    font-size: .72rem;
    color: var(--sv-muted);
}

body.page-service-service .dof-modal-body{
    padding: .85rem 1rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

body.page-service-service .dof-modal-body .form-group{
    margin: 0;
}

body.page-service-service .dof-modal-footer{
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--sv-border);
    background: var(--sv-surface-2);
}

body.page-service-service .dof-btn-secondary{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-surface);
    color: var(--sv-text-2);
    cursor: pointer;
}

body.page-service-service .dof-btn-secondary:hover{
    background: var(--sv-surface-3);
    color: var(--sv-text);
}

body.page-service-service .dof-errors{
    padding: .55rem .8rem;
    background: var(--sv-danger-soft);
    border: 1px solid var(--sv-danger);
    border-radius: var(--sv-radius-sm);
    font-size: .74rem;
    color: var(--sv-danger);
}

body.page-service-service .dof-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem .7rem;
}

@media (max-width: 540px) {
    body.page-service-service .dof-grid{ grid-template-columns: 1fr; }
}

body.page-service-service .dof-note{
    margin: .25rem 0 0;
    font-size: .68rem;
    color: var(--sv-muted);
}

body.page-service-service .dof-note[hidden]{
    display: none;
}

/* WZ-177: discount types whose Business Details → Extra Info feature is switched off stay
   listed (so the user can see they exist) but are visibly inert and refuse selection. */
body.page-service-service .dropdown-option.is-disabled{
    opacity: .5;
    cursor: not-allowed;
}

body.page-service-service .dropdown-option.is-disabled:hover{
    background: transparent;
}

body.page-service-service .dropdown-option.is-disabled::after{
    content: "\F46A";
    flex: none;
    margin-left: auto;
    font-family: "bootstrap-icons";
    font-size: .72rem;
    opacity: .8;
}

body.page-service-service .dof-datetime{
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: .4rem;
}

body.page-service-service .dof-section-label{
    margin: 0 0 .3rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--sv-text-2);
}

body.page-service-service .dof-radio{
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--sv-text-2);
    cursor: pointer;
}

body.page-service-service .dof-radio input{
    accent-color: var(--sv-primary-600);
    cursor: pointer;
}

body.page-service-service .dof-check-list{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-height: 150px;
    overflow-y: auto;
    padding: .45rem .6rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .dof-variant-check,
body.page-service-service .dof-bundle-check{
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .76rem;
    color: var(--sv-text-2);
    cursor: pointer;
}

body.page-service-service .dof-variant-check input,
body.page-service-service .dof-bundle-check input{
    accent-color: var(--sv-primary-600);
}

body.page-service-service .dof-tier-row{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: .4rem;
    align-items: center;
    margin-bottom: .4rem;
}

body.page-service-service .dof-example{
    padding: .5rem .7rem;
    background: var(--sv-surface-2);
    border-left: 3px solid var(--sv-primary-600);
    border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0;
    font-size: .72rem;
    color: var(--sv-text-2);
}

body.page-service-service .dof-bundle-item{
    align-items: center;
}

body.page-service-service .dof-bundle-id{
    font-size: .68rem;
    color: var(--sv-muted);
}

body.page-service-service .dof-bundle-chips,
body.page-service-service .dof-bundle-list{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}

body.page-service-service .dof-bundle-chip{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .3rem .22rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border: 1px solid var(--sv-primary-soft-2);
    border-radius: 999px;
}

body.page-service-service .dof-bundle-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: .74rem;
    opacity: .7;
}

body.page-service-service .dof-bundle-remove:hover{
    opacity: 1;
    background: var(--sv-danger-soft);
    color: var(--sv-danger);
}

body.page-service-service .dof-hidden-select{
    display: none !important;
}

/* Discount service picker */
body.page-service-service .discount-mention-wrap { position: relative; }
body.page-service-service .discount-service-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
body.page-service-service .discount-service-menu {
    position: fixed;
    z-index: 10050;
    display: none;
    max-height: 16rem;
    padding: .5rem;
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-surface-1, #fff);
    box-shadow: 0 .9rem 2.5rem rgb(20 40 28 / .18);
}
body.page-service-service .discount-service-menu.open { display: block; }
body.page-service-service .discount-service-search-wrap{
    position: relative;
    margin-bottom: .4rem;
}

body.page-service-service .discount-service-search-wrap i{
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sv-muted);
    font-size: .74rem;
    pointer-events: none;
}

body.page-service-service .discount-service-search{
    width: 100%;
    padding: .42rem .6rem .42rem 1.8rem;
    font-size: .78rem;
    color: var(--sv-text);
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .discount-service-search:focus{
    outline: none;
    border-color: var(--sv-primary-600);
    box-shadow: 0 0 0 3px var(--sv-ring);
}

body.page-service-service .discount-service-options{
    display: flex;
    flex-direction: column;
    gap: .15rem;
    max-height: 170px;
    overflow-y: auto;
    padding: .3rem;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body.page-service-service .discount-service-option{
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .4rem .55rem;
    font-size: .78rem;
    color: var(--sv-text);
    background: transparent;
    border: none;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
}

body.page-service-service .discount-service-option:hover{
    background: var(--sv-primary-soft);
    color: var(--sv-primary);
}

body.page-service-service .discount-service-empty{
    padding: .6rem;
    font-size: .74rem;
    color: var(--sv-muted);
    text-align: center;
}

body.page-service-service .discount-service-chip{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .35rem .25rem .6rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--sv-primary);
    background: var(--sv-primary-soft);
    border: 1px solid var(--sv-primary-soft-2);
    border-radius: 999px;
}

body.page-service-service .remove-discount-service{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

body.page-service-service .remove-discount-service:hover{
    opacity: 1;
    background: var(--sv-danger-soft);
    color: var(--sv-danger);
}

/* ---------- 21. PDF modal ---------- */
body.page-service-service .pdf-modal-content{
    max-width: 1080px;
    height: min(88vh, 900px);
}

body.page-service-service .pdf-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sv-border);
}

body.page-service-service .pdf-modal-title{
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--sv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-service-service .pdf-modal-body{
    flex: 1;
    min-height: 0;
    background: var(--sv-surface-3);
}

body.page-service-service .pdf-iframe{
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ---------- 22. Unsaved-changes modal ---------- */
body.page-service-service .unsaved-nav-modal{
    max-width: 440px;
}

body.page-service-service .unsaved-nav-header{
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem .6rem;
}

body.page-service-service .unsaved-nav-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sv-warn-soft);
    color: var(--sv-warn);
    font-size: 1rem;
    flex: none;
}

body.page-service-service .unsaved-nav-header > div{
    flex: 1;
    min-width: 0;
}

body.page-service-service .unsaved-nav-title{
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--sv-text);
}

body.page-service-service .unsaved-nav-subtitle{
    margin: .15rem 0 0;
    font-size: .74rem;
    color: var(--sv-muted);
}

body.page-service-service .unsaved-nav-body{
    padding: 0 1rem .8rem calc(1rem + 36px + .7rem);
    font-size: .8rem;
    color: var(--sv-text-2);
}

body.page-service-service .unsaved-nav-footer{
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--sv-border);
    background: var(--sv-surface-2);
}

body.page-service-service .unsaved-nav-btn{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    background: var(--sv-surface);
    color: var(--sv-text-2);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, filter .15s ease;
}

body.page-service-service .unsaved-nav-btn:hover{
    background: var(--sv-surface-3);
    color: var(--sv-text);
}

body.page-service-service .unsaved-nav-btn.unsaved-nav-primary{
    background: var(--sv-btn-grad);
    border-color: transparent;
    color: #fff;
}

body.page-service-service .unsaved-nav-btn.unsaved-nav-primary:hover{
    filter: brightness(1.1);
    color: #fff;
}

/* ---------- 23. Toasts & alerts ---------- */
body.page-service-service .toast-container{
    position: fixed;
    top: calc(var(--sv-nav-offset) + 12px);
    right: 14px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(340px, calc(100vw - 28px));
    pointer-events: none;
}

body.page-service-service .toast-container .toast{
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
    padding: .65rem .75rem;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-left: 4px solid var(--sv-primary-600);
    border-radius: var(--sv-radius-sm);
    box-shadow: var(--sv-shadow-md);
    font-size: .78rem;
    color: var(--sv-text);
    pointer-events: auto;
    transition: opacity .3s ease, transform .3s ease;
}

body.page-service-service .toast-container .toast .toast-icon{
    flex: none;
    font-size: .9rem;
    margin-top: .05rem;
    color: var(--sv-primary);
}

body.page-service-service .toast-container .toast.success{ border-left-color: var(--sv-primary-600); }
body.page-service-service .toast-container .toast.success .toast-icon{ color: var(--sv-primary-600); }

body.page-service-service .toast-container .toast.error{ border-left-color: var(--sv-danger); }
body.page-service-service .toast-container .toast.error .toast-icon{ color: var(--sv-danger); }

body.page-service-service .toast-container .toast.warning{ border-left-color: var(--sv-warn); }
body.page-service-service .toast-container .toast.warning .toast-icon{ color: var(--sv-warn); }

body.page-service-service .toast-container .toast.info{ border-left-color: var(--sv-info); }
body.page-service-service .toast-container .toast.info .toast-icon{ color: var(--sv-info); }

body.page-service-service .toast-message{
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

body.page-service-service .toast-close{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sv-muted);
    cursor: pointer;
    font-size: .85rem;
}

body.page-service-service .toast-close:hover{
    background: var(--sv-surface-3);
    color: var(--sv-text);
}

/* Flash alert */
body.page-service-service #message{
    margin-bottom: .8rem;
}

body.page-service-service #message:empty{
    display: none;
}

body.page-service-service #message .alert{
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .85rem;
    border-radius: var(--sv-radius-sm);
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid transparent;
    margin: 0;
    transition: opacity .3s ease;
}

body.page-service-service #message .alert-success{
    background: var(--sv-primary-soft);
    border-color: var(--sv-primary-soft-2);
    color: var(--sv-primary);
}

body.page-service-service #message .alert-danger{
    background: var(--sv-danger-soft);
    border-color: var(--sv-danger);
    color: var(--sv-danger);
}

/* ---------- 24. Scrollbars & focus ---------- */
body.page-service-service .service-layout *::-webkit-scrollbar,
body.page-service-service .pref-modal *::-webkit-scrollbar,
body.page-service-service .dof-modal *::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

body.page-service-service .service-layout *::-webkit-scrollbar-thumb,
body.page-service-service .pref-modal *::-webkit-scrollbar-thumb,
body.page-service-service .dof-modal *::-webkit-scrollbar-thumb{
    background: var(--sv-border-strong);
    border-radius: 999px;
}

body.page-service-service .service-layout *::-webkit-scrollbar-track,
body.page-service-service .pref-modal *::-webkit-scrollbar-track,
body.page-service-service .dof-modal *::-webkit-scrollbar-track{
    background: transparent;
}

/* ---------- 25. Responsive ---------- */
@media (max-width: 1080px) {
    body.page-service-service .service-layout{
        grid-template-columns: 1fr;
        margin-top: 0;
        padding-top: .35rem;
    }

    body.page-service-service .mobile-header{
        display: flex;
    }

    body.page-service-service .service-sidebar{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1250;
        width: min(290px, 84vw);
        border-radius: 0 var(--sv-radius-lg) var(--sv-radius-lg) 0;
        transform: translateX(-105%);
        transition: transform .25s ease;
        overflow-y: auto;
        padding-top: 1.1rem;
    }

    body.page-service-service .service-sidebar.sidebar-open{
        transform: translateX(0);
        box-shadow: var(--sv-shadow-lg);
    }
}

@media (max-width: 680px) {
    /* base.html .content-area padding shrinks to 1rem .875rem here */
    body.page-service-service .service-layout{
        margin-left: -.875rem;
        margin-right: -.875rem;
        padding-left: .55rem;
        padding-right: .55rem;
    }

    body.page-service-service .mobile-header{
        margin: -1rem -.875rem 0;
        padding: .55rem .875rem .3rem;
    }

    body.page-service-service .section-panel{
        padding: .8rem .8rem .9rem;
        border-radius: var(--sv-radius);
    }

    body.page-service-service .main-header{
        padding: .5rem .6rem;
    }

    body.page-service-service .mh-icon{
        display: none;
    }

    body.page-service-service .form-grid,
body.page-service-service .booking-grid{
        grid-template-columns: 1fr;
    }

    body.page-service-service .booking-grid .booking-span-2{
        grid-column: auto;
    }

    body.page-service-service .file-item{
        flex-wrap: wrap;
    }

    body.page-service-service .file-item .file-info{
        flex-basis: 100%;
        order: 3;
    }

    body.page-service-service .related-tag{
        flex-wrap: wrap;
    }

    body.page-service-service .related-tag-name{
        max-width: 100%;
    }

    body.page-service-service .pref-modal-overlay,
body.page-service-service .dof-modal-overlay,
body.page-service-service .pdf-modal{
        padding: .5rem;
    }

    body.page-service-service .pref-modal,
body.page-service-service .dof-modal,
body.page-service-service .pdf-modal-content{
        max-height: 94vh;
    }

    body.page-service-service .pref-modal-footer,
body.page-service-service .dof-modal-footer{
        flex-wrap: wrap;
    }

    body.page-service-service .nav-buttons .btn{
        flex: 1;
    }

    body.page-service-service .dof-card{
        flex-direction: column;
    }

    body.page-service-service .dof-card-actions{
        width: 100%;
        justify-content: flex-end;
    }

    body.page-service-service .dof-tier-row{
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-service-service .service-layout *,
body.page-service-service .tab-card,
body.page-service-service .toast-container .toast,
body.page-service-service .service-sidebar{
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================
   Promotional broadcast templates (page-broadcast-templates)
   ========================================================== */
body.page-broadcast-templates {
    --bt-green: #02542d;
    --bt-green-dark: #013a20;
    --bt-green-soft: rgb(2 84 45 / .08);
    --bt-green-ghost: rgb(2 84 45 / .04);
    --bt-green-line: rgb(2 84 45 / .16);
    --bt-ink: #0f172a;
    --bt-muted: #64748b;
    --bt-line: #e5e7eb;
    --bt-surface: #ffffff;
    --bt-surface-soft: #f8fafc;
    --bt-surface-muted: #f1f5f9;
    --bt-page-bg: #f8fafc;
    --bt-danger: #dc2626;
    --bt-danger-soft: #fef2f2;
    --bt-warning: #b45309;
    --bt-warning-soft: #fffbeb;
    --bt-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
    --bt-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --bt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --bt-radius-sm: .375rem;
    --bt-radius-md: .5rem;
    --bt-radius-lg: .75rem;
    --bt-radius-xl: 1rem;
    background: var(--bt-page-bg);
}

body.page-broadcast-templates .content-area {
    background: var(--bt-page-bg);
}

body.page-broadcast-templates .bt-page {
    width: 100%;
    margin: 0;
    padding: .875rem .875rem 2.5rem;
    color: var(--bt-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

body.page-broadcast-templates .bt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-xl);
    background: var(--bt-surface);
    box-shadow: var(--bt-shadow-sm);
}

body.page-broadcast-templates .bt-eyebrow {
    margin: 0 0 .25rem;
    color: var(--bt-green);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

body.page-broadcast-templates .bt-header h1 {
    margin: 0;
    color: var(--bt-green);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

body.page-broadcast-templates .bt-header p:not(.bt-eyebrow) {
    margin: .25rem 0 0;
    color: var(--bt-muted);
    font-size: .8rem;
    font-weight: 500;
}

body.page-broadcast-templates .bt-help-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .5rem;
    min-height: 2.35rem;
    padding: .55rem .75rem;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface);
    color: var(--bt-green);
    box-shadow: var(--bt-shadow-xs);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

body.page-broadcast-templates .bt-help-link:hover {
    border-color: var(--bt-green);
    background: var(--bt-green-soft);
    box-shadow: var(--bt-shadow-sm);
    transform: translateY(-1px);
}

body.page-broadcast-templates .bt-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 1rem;
}

body.page-broadcast-templates .bt-panel {
    overflow: hidden;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-xl);
    background: var(--bt-surface);
    box-shadow: var(--bt-shadow-sm);
}

body.page-broadcast-templates .bt-form-panel {
    padding: 1rem;
}

body.page-broadcast-templates .bt-panel-heading,
body.page-broadcast-templates .bt-list-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--bt-line);
}

body.page-broadcast-templates .bt-panel-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: .75rem;
    background: var(--bt-green-soft);
    color: var(--bt-green);
    font-size: 1.1rem;
}

body.page-broadcast-templates :is(.bt-panel-heading, .bt-list-heading) h2 {
    margin: 0;
    color: var(--bt-ink);
    font-size: 1rem;
    font-weight: 800;
}

body.page-broadcast-templates :is(.bt-panel-heading, .bt-list-heading) p {
    margin: .2rem 0 0;
    color: var(--bt-muted);
    font-size: .75rem;
}

body.page-broadcast-templates #broadcastTemplateForm {
    display: grid;
    gap: .95rem;
    padding-top: 1rem;
}

body.page-broadcast-templates .bt-field label,
body.page-broadcast-templates .bt-label-row label {
    display: block;
    margin-bottom: .35rem;
    color: var(--bt-ink);
    font-size: .75rem;
    font-weight: 700;
}

body.page-broadcast-templates .bt-field label > span[aria-hidden="true"] {
    color: var(--bt-danger);
}

body.page-broadcast-templates .bt-optional {
    margin-left: .3rem;
    color: var(--bt-muted);
    font-size: .68rem;
    font-weight: 500;
}

body.page-broadcast-templates .bt-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

body.page-broadcast-templates .bt-character-count {
    color: var(--bt-muted);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

body.page-broadcast-templates .bt-character-count.is-near-limit {
    color: var(--bt-warning);
    font-weight: 700;
}

body.page-broadcast-templates .bt-field :is(input[type="text"], textarea) {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: .62rem .75rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--bt-radius-md);
    outline: none;
    background: var(--bt-surface);
    color: var(--bt-ink);
    font: inherit;
    font-size: .82rem;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body.page-broadcast-templates .bt-field textarea {
    min-height: 9.25rem;
    resize: vertical;
    line-height: 1.5;
}

body.page-broadcast-templates .bt-field :is(input[type="text"], textarea):focus {
    border-color: var(--bt-green);
    background: var(--bt-surface);
    box-shadow: 0 0 0 .2rem rgba(2, 84, 45, .11);
}

body.page-broadcast-templates .bt-field :is(input, textarea).is-invalid {
    border-color: var(--bt-danger);
    box-shadow: 0 0 0 .16rem rgba(165, 42, 42, .09);
}

body.page-broadcast-templates .bt-field-hint,
body.page-broadcast-templates .bt-field-error {
    margin: .35rem 0 0;
    font-size: .7rem;
    line-height: 1.4;
}

body.page-broadcast-templates .bt-field-hint {
    color: var(--bt-muted);
}

body.page-broadcast-templates .bt-field-error {
    color: var(--bt-danger);
    font-weight: 650;
}

body.page-broadcast-templates .bt-field .bt-upload {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 4.35rem;
    margin: 0;
    padding: .8rem;
    border: 1px dashed #94a3b8;
    border-radius: var(--bt-radius-lg);
    background: var(--bt-surface-soft);
    color: var(--bt-ink);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

body.page-broadcast-templates .bt-field .bt-upload:hover,
body.page-broadcast-templates .bt-field .bt-upload:focus-within {
    border-color: var(--bt-green);
    background: var(--bt-green-soft);
}

body.page-broadcast-templates .bt-upload-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface);
    color: var(--bt-green);
    box-shadow: var(--bt-shadow-xs);
}

body.page-broadcast-templates .bt-upload-copy {
    display: block;
    min-width: 0;
}

body.page-broadcast-templates .bt-upload-copy strong {
    overflow: hidden;
    color: var(--bt-ink);
    font-size: .8rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-broadcast-templates .bt-upload-copy small {
    overflow: hidden;
    color: var(--bt-muted);
    font-size: .68rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-broadcast-templates .bt-upload-action {
    padding: .42rem .65rem;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface);
    color: var(--bt-green);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

body.page-broadcast-templates .bt-image-preview {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 2.25rem;
    align-items: center;
    gap: .75rem;
    margin-top: .55rem;
    padding: .6rem;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface);
}

body.page-broadcast-templates .bt-image-preview[hidden] {
    display: none;
}

body.page-broadcast-templates .bt-image-preview img {
    width: 3rem;
    height: 3rem;
    border-radius: var(--bt-radius-sm);
    object-fit: cover;
}

body.page-broadcast-templates .bt-image-preview div {
    display: grid;
    min-width: 0;
}

body.page-broadcast-templates .bt-image-preview strong {
    overflow: hidden;
    color: var(--bt-ink);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-broadcast-templates .bt-image-preview span {
    color: var(--bt-muted);
    font-size: .68rem;
}

body.page-broadcast-templates .bt-image-preview button,
body.page-broadcast-templates .bt-alert-close {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--bt-radius-md);
    background: transparent;
    color: var(--bt-muted);
}

body.page-broadcast-templates .bt-image-preview button:hover {
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
}

body.page-broadcast-templates .bt-guidance {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid var(--bt-green-line);
    border-radius: var(--bt-radius-md);
    background: var(--bt-green-soft);
    color: var(--bt-green);
    scroll-margin-top: 6rem;
}

body.page-broadcast-templates .bt-guidance > i {
    margin-top: .05rem;
    font-size: 1rem;
}

body.page-broadcast-templates .bt-guidance p {
    display: grid;
    gap: .15rem;
    margin: 0;
    font-size: .72rem;
    line-height: 1.42;
}

body.page-broadcast-templates .bt-guidance span {
    color: var(--bt-muted);
}

body.page-broadcast-templates .bt-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .65rem 1rem;
    border: 0;
    border-radius: var(--bt-radius-md);
    background: linear-gradient(135deg, var(--bt-green), var(--bt-green-dark));
    box-shadow: 0 .45rem 1rem rgb(2 84 45 / .18);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}

body.page-broadcast-templates .bt-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 .6rem 1.3rem rgb(2 84 45 / .24);
}

body.page-broadcast-templates .bt-submit:disabled {
    cursor: wait;
    opacity: .72;
}

body.page-broadcast-templates .bt-alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .8rem .95rem;
    border: 1px solid;
    border-radius: var(--bt-radius-lg);
    font-size: .78rem;
    line-height: 1.4;
}

body.page-broadcast-templates .bt-alert[hidden] {
    display: none;
}

body.page-broadcast-templates .bt-alert > i {
    margin-top: .1rem;
}

body.page-broadcast-templates .bt-alert > div {
    display: grid;
    flex: 1;
    gap: .08rem;
}

body.page-broadcast-templates .bt-alert-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

body.page-broadcast-templates .bt-alert-error {
    border-color: #efc6c2;
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
}

body.page-broadcast-templates .bt-form-panel > .bt-alert-error {
    margin: 1rem 0 0;
}

body.page-broadcast-templates .bt-alert-close {
    margin: -.35rem -.45rem -.35rem auto;
}

body.page-broadcast-templates .bt-list-heading {
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

body.page-broadcast-templates .bt-refresh {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: .5rem .7rem;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface);
    color: var(--bt-green);
    box-shadow: var(--bt-shadow-xs);
    font-size: .72rem;
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

body.page-broadcast-templates .bt-refresh:hover:not(:disabled) {
    border-color: var(--bt-green);
    background: var(--bt-green-soft);
    transform: translateY(-1px);
}

body.page-broadcast-templates .bt-refresh.is-loading i {
    animation: bt-spin .8s linear infinite;
}

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

body.page-broadcast-templates .bt-list-loading,
body.page-broadcast-templates .bt-list-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    padding: 2rem;
    text-align: center;
}

body.page-broadcast-templates :is(.bt-list-loading, .bt-list-message)[hidden] {
    display: none;
}

body.page-broadcast-templates .bt-list-loading {
    gap: .75rem;
    color: var(--bt-muted);
    font-size: .78rem;
}

body.page-broadcast-templates .bt-list-loading .spinner-border {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--bt-green);
}

body.page-broadcast-templates .bt-list-message-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .9rem;
    border-radius: var(--bt-radius-lg);
    background: var(--bt-green-soft);
    color: var(--bt-green);
    font-size: 1.25rem;
}

body.page-broadcast-templates .bt-list-message-error {
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
}

body.page-broadcast-templates .bt-list-message h3 {
    margin: 0;
    color: var(--bt-ink);
    font-size: .95rem;
    font-weight: 800;
}

body.page-broadcast-templates .bt-list-message p {
    max-width: 22rem;
    margin: .4rem 0 0;
    color: var(--bt-muted);
    font-size: .75rem;
}

body.page-broadcast-templates .bt-list-message button {
    margin-top: 1rem;
    padding: .55rem .8rem;
    border: 1px solid var(--bt-green);
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface);
    color: var(--bt-green);
    font-size: .75rem;
    font-weight: 700;
}

body.page-broadcast-templates .bt-template-list {
    display: grid;
    gap: .75rem;
    max-height: calc(100vh - 15.5rem);
    min-height: 20rem;
    padding: 1rem;
    overflow-y: auto;
}

body.page-broadcast-templates .bt-template-list[hidden] {
    display: none;
}

body.page-broadcast-templates .bt-template-card {
    padding: .9rem;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-lg);
    background: var(--bt-surface);
    box-shadow: var(--bt-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.page-broadcast-templates .bt-template-card:hover {
    border-color: var(--bt-green-line);
    box-shadow: var(--bt-shadow-sm);
    transform: translateY(-1px);
}

body.page-broadcast-templates .bt-template-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

body.page-broadcast-templates .bt-template-name-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .65rem;
}

body.page-broadcast-templates .bt-template-type-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: var(--bt-radius-md);
    background: var(--bt-green-soft);
    color: var(--bt-green);
}

body.page-broadcast-templates .bt-template-name-wrap > div {
    min-width: 0;
}

body.page-broadcast-templates .bt-template-name-wrap h3 {
    overflow: hidden;
    margin: 0;
    color: var(--bt-ink);
    font-size: .84rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-broadcast-templates .bt-template-name-wrap p {
    margin: .2rem 0 0;
    color: var(--bt-muted);
    font-size: .67rem;
}

body.page-broadcast-templates .bt-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .3rem;
    padding: .32rem .5rem;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

body.page-broadcast-templates .bt-status-draft {
    background: var(--bt-surface-muted);
    color: var(--bt-muted);
}

body.page-broadcast-templates :is(.bt-status-pending, .bt-status-pending-meta) {
    background: var(--bt-warning-soft);
    color: var(--bt-warning);
}

body.page-broadcast-templates .bt-status-approved {
    background: var(--bt-green-soft);
    color: var(--bt-green);
}

body.page-broadcast-templates .bt-status-rejected {
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
}

body.page-broadcast-templates .bt-template-body {
    display: -webkit-box;
    margin: .85rem 0 0;
    overflow: hidden;
    color: #475569;
    font-size: .76rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body.page-broadcast-templates .bt-template-image {
    width: 100%;
    max-height: 11rem;
    margin-top: .85rem;
    border-radius: var(--bt-radius-md);
    object-fit: cover;
}

body.page-broadcast-templates .bt-rejection {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .8rem;
    padding: .7rem;
    border-left: .2rem solid var(--bt-danger);
    border-radius: var(--bt-radius-sm) var(--bt-radius-md) var(--bt-radius-md) var(--bt-radius-sm);
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
}

body.page-broadcast-templates .bt-rejection p {
    display: grid;
    gap: .1rem;
    margin: 0;
    font-size: .7rem;
    line-height: 1.4;
}

body.page-broadcast-templates .bt-rejection span {
    color: #7f1d1d;
}

html[data-theme="dark"] body.page-broadcast-templates {
    --bt-ink: #ecf4ef;
    --bt-muted: #9eaea5;
    --bt-line: rgb(148 163 184 / .18);
    --bt-surface: #101815;
    --bt-surface-soft: #131d19;
    --bt-surface-muted: #17231d;
    --bt-page-bg: #08110d;
    --bt-green: #4fba80;
    --bt-green-dark: #23764d;
    --bt-green-soft: rgb(79 186 128 / .12);
    --bt-green-line: rgb(79 186 128 / .22);
    --bt-danger: #f87171;
    --bt-danger-soft: rgb(127 29 29 / .22);
    --bt-warning: #fbbf24;
    --bt-warning-soft: rgb(120 53 15 / .2);
}

html[data-theme="dark"] body.page-broadcast-templates .content-area {
    background: var(--bt-page-bg);
}

html[data-theme="dark"] body.page-broadcast-templates :is(.bt-header, .bt-panel, .bt-help-link, .bt-field input[type="text"], .bt-field textarea, .bt-field .bt-upload, .bt-upload-action, .bt-image-preview, .bt-template-card) {
    background: var(--bt-surface);
    border-color: var(--bt-line);
}

html[data-theme="dark"] body.page-broadcast-templates :is(.bt-guidance span, .bt-template-body) {
    color: #b6c7bd;
}

html[data-theme="dark"] body.page-broadcast-templates :is(.bt-upload-icon, .bt-template-type-icon, .bt-panel-icon, .bt-list-message-icon) {
    background: var(--bt-green-soft);
    color: var(--bt-green);
}

html[data-theme="dark"] body.page-broadcast-templates .bt-alert-success {
    border-color: rgb(74 222 128 / .28);
    background: rgb(22 101 52 / .18);
    color: #86efac;
}

html[data-theme="dark"] body.page-broadcast-templates .bt-rejection span {
    color: #fecaca;
}

@media (max-width: 1100px) {
    body.page-broadcast-templates .bt-layout {
        grid-template-columns: 1fr;
    }

    body.page-broadcast-templates .bt-template-list {
        max-height: none;
    }
}

@media (max-width: 576px) {
    body.page-broadcast-templates .bt-page {
        padding: .5rem;
    }

    body.page-broadcast-templates .bt-header {
        align-items: flex-start;
        flex-direction: column;
        gap: .8rem;
        padding: 1rem;
    }

    body.page-broadcast-templates .bt-help-link {
        width: 100%;
        justify-content: center;
    }

    body.page-broadcast-templates .bt-form-panel,
    body.page-broadcast-templates .bt-list-heading {
        padding: 1rem;
    }

    body.page-broadcast-templates .bt-panel-heading {
        align-items: flex-start;
    }

    body.page-broadcast-templates .bt-template-card-head {
        flex-direction: column;
    }

    body.page-broadcast-templates .bt-status {
        margin-left: 2.9rem;
    }

    body.page-broadcast-templates .bt-upload-action {
        display: none;
    }

    body.page-broadcast-templates .bt-field .bt-upload {
        grid-template-columns: 2.35rem minmax(0, 1fr);
    }

    body.page-broadcast-templates .bt-list-loading,
    body.page-broadcast-templates .bt-list-message {
        min-height: 18rem;
    }
}

/* Marketing Agency Dashboard V2: reusable semantic components.
   Tokens are matched to the main dashboard's global palette (--brand-primary,
   --ink-900/500/200, --shadow-sm) so the partner portal reads as the same
   product rather than a separately-themed page. */
.page-marketing-agency-portal,
.agency-auth-page {
    --agency-ink: #0f172a;
    --agency-muted: #64748b;
    --agency-border: #e2e8f0;
    --agency-surface: #ffffff;
    --agency-canvas: #f8fafc;
    --agency-brand: #02542d;
    --agency-brand-dark: #013a1f;
    --agency-focus: #02542d;
    --agency-danger: #dc2626;
    --agency-radius: .875rem;
    --agency-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --agency-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / .12), 0 8px 10px -6px rgb(0 0 0 / .1);
    margin: 0;
    min-height: 100vh;
    color: var(--agency-ink);
    background: var(--agency-canvas);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.page-marketing-agency-portal [hidden],
.agency-auth-page [hidden] { display: none !important; }
.page-marketing-agency-portal .visually-hidden,
.agency-auth-page .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The shared `html, body { overflow: hidden }` rule assumes the app-shell
   layout, where `.content-area` scrolls internally. This portal is a plain
   flow document with no inner scroll region, so restore normal page scroll
   here or content past the first viewport becomes unreachable. */
html:has(body.page-marketing-agency-portal),
html:has(body.agency-auth-page) { height: auto; overflow: auto; }
body.page-marketing-agency-portal,
body.agency-auth-page { height: auto; min-height: 100vh; overflow: auto; }

.agency-shell { min-height: 100vh; }
.agency-header {
    position: sticky;
    z-index: 50;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem;
    padding: .75rem clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid var(--agency-border);
    background: rgb(255 255 255 / .94);
    backdrop-filter: blur(14px);
}
.agency-brand,
.agency-auth-brand {
    display: inline-flex;
    gap: .7rem;
    align-items: center;
    color: var(--agency-ink);
    font-weight: 800;
    text-decoration: none;
}
.agency-brand-mark {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    place-items: center;
    border-radius: .7rem;
    color: #fff;
    background: linear-gradient(145deg, var(--agency-brand), var(--agency-brand-dark));
    box-shadow: 0 .35rem 1rem rgb(2 84 45 / .2);
}
.agency-header-actions { position: relative; }
.agency-profile-trigger {
    display: flex;
    gap: .65rem;
    align-items: center;
    min-height: 2.85rem;
    padding: .35rem .65rem;
    border: 1px solid transparent;
    border-radius: .8rem;
    color: var(--agency-ink);
    background: transparent;
    cursor: pointer;
}
.agency-profile-trigger:hover,
.agency-profile-trigger[aria-expanded="true"] { border-color: var(--agency-border); background: var(--agency-canvas); }
.agency-profile-trigger span:nth-child(2) { display: grid; gap: .1rem; text-align: left; }
.agency-profile-trigger small { color: var(--agency-muted); }
.agency-avatar {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    color: var(--agency-brand);
    background: #e1f1e8;
}
.agency-profile-menu {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    width: min(20rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--agency-border);
    border-radius: var(--agency-radius);
    background: var(--agency-surface);
    box-shadow: var(--agency-shadow-lg);
}
.agency-profile-menu dl { display: grid; gap: .65rem; margin: 0 0 1rem; }
.agency-profile-menu dl div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; }
.agency-profile-menu dt { color: var(--agency-muted); font-size: .78rem; }
.agency-profile-menu dd { margin: 0; overflow-wrap: anywhere; font-size: .85rem; font-weight: 600; }

.agency-main { width: 100%; margin: 0 auto; padding: clamp(1.25rem, 2.5vw, 3rem); }
.agency-page-heading,
.agency-panel-head,
.agency-section-heading {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
}
.agency-page-heading { margin-bottom: 1.5rem; }
.agency-page-heading h1,
.agency-section-heading h2,
.agency-panel-head h2 { margin: 0; color: var(--agency-ink); letter-spacing: -.025em; }
.agency-page-heading h1 { font-size: clamp(1.65rem, 4vw, 2.35rem); }
.agency-panel-head h2,
.agency-section-heading h2 { font-size: 1.15rem; }
.agency-eyebrow { margin: 0 0 .4rem; color: var(--agency-brand); font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.agency-muted { margin: .35rem 0 0; color: var(--agency-muted); font-size: .88rem; line-height: 1.55; }
.agency-toolbar { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.agency-toolbar label { color: var(--agency-muted); font-size: .8rem; font-weight: 700; }
.agency-toolbar select,
.agency-search input,
.agency-field input,
.agency-field textarea {
    min-height: 2.75rem;
    padding: .65rem .8rem;
    border: 1px solid var(--agency-border);
    border-radius: .7rem;
    color: var(--agency-ink);
    background: #fff;
    font: inherit;
}

/* Custom dropdown (in-house component, matches the campaign filter pattern
   used elsewhere in the app) fronting a hidden native <select> that stays the
   source of truth for value/change handling. */
.agency-dropdown { position: relative; display: flex; align-items: center; gap: .5rem; }
.agency-dropdown-label { color: var(--agency-muted); font-size: .8rem; font-weight: 700; }
.agency-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-width: 9.5rem;
    min-height: 2.75rem;
    padding: .55rem .8rem;
    border: 1px solid var(--agency-border);
    border-radius: .7rem;
    color: var(--agency-ink);
    background: var(--agency-surface);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}
.agency-dropdown-trigger:hover { border-color: var(--agency-brand); }
.agency-dropdown-trigger:focus-visible,
.agency-dropdown-trigger.active {
    outline: none;
    border-color: var(--agency-focus);
    box-shadow: 0 0 0 3px rgb(2 84 45 / .15);
}
.agency-dropdown-trigger .selected-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agency-dropdown-trigger .dropdown-arrow { flex: 0 0 auto; color: var(--agency-muted); font-size: .7rem; transition: transform .2s ease; }
.agency-dropdown-trigger.active .dropdown-arrow { transform: rotate(180deg); }
.agency-dropdown-menu {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 40;
    min-width: 100%;
    max-height: 16rem;
    padding: .35rem;
    overflow-y: auto;
    border: 1px solid var(--agency-border);
    border-radius: .7rem;
    background: var(--agency-surface);
    box-shadow: var(--agency-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.agency-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.agency-dropdown-option {
    display: block;
    width: 100%;
    padding: .55rem .7rem;
    border: 0;
    border-radius: .5rem;
    color: var(--agency-ink);
    background: none;
    font: inherit;
    font-size: .84rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.agency-dropdown-option:hover { color: var(--agency-brand); background: rgb(2 84 45 / .08); }
.agency-dropdown-option.selected { color: var(--agency-brand); background: rgb(2 84 45 / .1); font-weight: 700; }
.agency-btn {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.agency-btn-primary { color: #fff; background: var(--agency-brand); }
.agency-btn-primary:hover { background: var(--agency-brand-dark); }
.agency-btn-secondary { border-color: var(--agency-border); color: var(--agency-ink); background: #fff; }
.agency-btn-secondary:hover { border-color: #b9c8bf; background: #f7faf8; }
.agency-btn-block { width: 100%; }
.agency-btn:disabled { cursor: not-allowed; opacity: .5; }
.agency-btn:focus-visible,
.agency-profile-trigger:focus-visible,
.agency-client-row:focus-visible,
.agency-tier-tabs button:focus-visible,
.agency-back:focus-visible,
.agency-field input:focus-visible,
.agency-field textarea:focus-visible,
.agency-toolbar select:focus-visible,
.agency-icon-action:focus-visible,
.agency-search input:focus-visible {
    outline: 3px solid rgb(2 84 45 / .25);
    outline-offset: 2px;
    border-color: var(--agency-focus);
}

.agency-summary-grid,
.agency-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.agency-detail-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agency-stat-card,
.agency-detail-stat {
    display: grid;
    gap: .65rem;
    min-height: 7.25rem;
    padding: 1.1rem;
    border: 1px solid var(--agency-border);
    border-radius: var(--agency-radius);
    background: var(--agency-surface);
    box-shadow: var(--agency-shadow-sm);
}
.agency-stat-card span,
.agency-detail-stat span { color: var(--agency-muted); font-size: .8rem; font-weight: 600; }
.agency-stat-card strong,
.agency-detail-stat strong { align-self: end; font-size: clamp(1.65rem, 4vw, 2.1rem); }
.agency-detail-stat small { color: var(--agency-muted); font-size: .72rem; font-weight: 700; }
.agency-detail-stat.positive strong { color: var(--agency-brand); }
.agency-detail-stat.negative strong { color: var(--agency-danger); }
.agency-stat-hot { border-color: #efd3d3; background: linear-gradient(145deg, #fff, #fff7f7); }
.agency-stat-hot strong { color: #8e3030; }
.agency-stat-closed { border-color: #cfe4d8; background: linear-gradient(145deg, #fff, #f3fbf6); }
.agency-stat-closed strong { color: var(--agency-brand); }

.agency-panel {
    margin-bottom: 1.5rem;
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid var(--agency-border);
    border-radius: var(--agency-radius);
    background: var(--agency-surface);
    box-shadow: var(--agency-shadow-sm);
}
.agency-panel-head { margin-bottom: 1rem; }
.agency-search { position: relative; display: flex; align-items: center; }
.agency-search i { position: absolute; left: .8rem; color: var(--agency-muted); }
.agency-search input { width: min(18rem, 100%); padding-left: 2.25rem; }
.agency-client-table { border-top: 1px solid var(--agency-border); }
.agency-client-header,
.agency-client-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) repeat(3, minmax(5rem, .42fr)) 1.5rem;
    gap: 1rem;
    align-items: center;
}
.agency-client-header { padding: .7rem .85rem; color: var(--agency-muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.agency-client-row {
    min-height: 4.5rem;
    padding: .8rem .85rem;
    border-top: 1px solid #edf1ee;
    border-radius: .65rem;
    color: var(--agency-ink);
    text-decoration: none;
    transition: transform .16s ease, background .16s ease;
}
.agency-client-row:hover { background: #f5f9f6; transform: translateX(.2rem); }
.agency-client-name { display: grid; gap: .2rem; min-width: 0; }
.agency-client-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agency-client-name small { color: var(--agency-muted); }
.agency-client-row > span:not(.agency-client-name) { font-weight: 700; }
.agency-client-row > i { color: var(--agency-muted); }
.agency-pagination { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; margin-top: 1rem; color: var(--agency-muted); font-size: .82rem; }

.agency-performance { padding-top: .5rem; }
.agency-section-heading { margin-bottom: 1rem; }
.agency-widget-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.agency-widget { padding: 1.1rem; border: 1px solid var(--agency-border); border-radius: var(--agency-radius); background: #fff; }
.agency-widget-head { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.agency-widget-head h3 { margin: 0; font-size: .95rem; }
.agency-widget-head > span { padding: .25rem .55rem; border-radius: 999px; color: var(--agency-muted); background: var(--agency-canvas); font-size: .72rem; }
.agency-widget-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.agency-widget-metrics div { display: grid; gap: .25rem; padding: .7rem; border-radius: .65rem; background: var(--agency-canvas); }
.agency-widget-metrics span { color: var(--agency-muted); font-size: .68rem; }
.agency-widget-metrics strong { font-size: 1.05rem; }
.page-marketing-agency-portal .ui-state { display: grid; min-height: 7rem; place-items: center; padding: 1rem; color: var(--agency-muted); text-align: center; }
.page-marketing-agency-portal .ui-state i { font-size: 1.4rem; }

.agency-back { display: inline-flex; gap: .45rem; align-items: center; margin: 0 0 1rem; padding: .4rem 0; border: 0; color: var(--agency-brand); background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.agency-tier-tabs { display: flex; gap: .55rem; flex-wrap: wrap; }
.agency-tier-tabs button {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    min-height: 2.75rem;
    padding: .55rem .85rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    color: var(--agency-muted);
    background: var(--agency-canvas);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.agency-tier-tabs button.active { border-color: currentColor; font-weight: 700; }
.agency-tier-tabs .tier-hot.active { color: #8e3030; background: #fff2f2; }
.agency-tier-tabs .tier-warm.active { color: #79520f; background: #fff7e6; }
.agency-tier-tabs .tier-cold.active { color: #52605a; background: #f1f4f2; }
.agency-tier-tabs strong { display: inline-grid; min-width: 1.35rem; min-height: 1.35rem; place-items: center; border-radius: 999px; background: rgb(255 255 255 / .75); font-size: .72rem; }
.agency-lead-list { border-top: 1px solid var(--agency-border); }
.agency-lead-row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; min-height: 4.5rem; padding: .8rem .25rem; border-bottom: 1px solid #edf1ee; }
.agency-lead-identity,
.agency-lead-outcome { display: grid; gap: .25rem; }
.agency-lead-identity span { color: var(--agency-muted); font-size: .78rem; }
.agency-lead-outcome { justify-items: end; }
.agency-closure-tag { padding: .25rem .55rem; border-radius: 999px; color: #58625c; background: #eef2ef; font-size: .7rem; }

.agency-client-intel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.agency-client-card { margin-bottom: 0; }
.agency-access-list {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.agency-access-chip {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    min-height: 2.25rem;
    padding: .4rem .65rem;
    border: 1px solid #dce6df;
    border-radius: .7rem;
    color: var(--agency-ink);
    background: var(--agency-canvas);
    font-size: .78rem;
    font-weight: 700;
}
.agency-access-chip strong {
    padding: .12rem .4rem;
    border-radius: 999px;
    color: var(--agency-muted);
    background: rgb(255 255 255 / .85);
    font-size: .65rem;
    text-transform: uppercase;
}
.agency-access-chip.access-edit { border-color: #b9dec9; background: #f0faf4; }
.agency-access-chip.access-view { border-color: #cbdbe3; background: #f3f8fb; }
.agency-access-chip.access-none { color: var(--agency-muted); }
.agency-client-meta {
    display: grid;
    gap: .65rem;
    margin: 0;
}
.agency-client-meta div {
    display: grid;
    grid-template-columns: minmax(6rem, .35fr) minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding-top: .65rem;
    border-top: 1px solid var(--agency-border);
}
.agency-client-meta dt { color: var(--agency-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.agency-client-meta dd { margin: 0; overflow-wrap: anywhere; font-size: .86rem; font-weight: 700; }
.agency-lead-mix-list { display: grid; gap: .9rem; }
.agency-mix-row {
    display: grid;
    grid-template-columns: minmax(6rem, .45fr) minmax(8rem, 1fr) 3.5rem;
    gap: .8rem;
    align-items: center;
}
.agency-mix-row > div:first-child { display: grid; gap: .2rem; }
.agency-mix-row strong { font-size: .88rem; }
.agency-mix-row span { color: var(--agency-muted); font-size: .76rem; font-weight: 700; }
.agency-mix-track {
    height: .55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2ef;
}
.agency-mix-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--agency-brand);
}
.mix-hot .agency-mix-fill { background: #b84a4a; }
.mix-warm .agency-mix-fill { background: #c6922e; }
.mix-cold .agency-mix-fill { background: #64748b; }
.agency-campaign-table,
.agency-lead-table { display: grid; gap: .55rem; }
.agency-campaign-header,
.agency-campaign-row {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) repeat(4, minmax(6rem, .42fr));
    gap: .75rem;
    align-items: center;
}
.agency-campaign-header,
.agency-lead-header {
    padding: .55rem .75rem;
    color: var(--agency-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.agency-campaign-row {
    min-height: 4.75rem;
    padding: .8rem .75rem;
    border: 1px solid var(--agency-border);
    border-radius: .75rem;
    background: #fff;
}
.agency-campaign-main,
.agency-lead-campaign { display: grid; gap: .25rem; min-width: 0; }
.agency-campaign-main strong,
.agency-lead-campaign strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-campaign-main span,
.agency-lead-campaign span,
.agency-lead-identity small { color: var(--agency-muted); font-size: .74rem; line-height: 1.45; }
.agency-mini-metric { display: grid; gap: .2rem; min-width: 0; }
.agency-mini-metric span { color: var(--agency-muted); font-size: .68rem; font-weight: 700; }
.agency-mini-metric strong { font-size: .9rem; }
.agency-lead-header,
.agency-lead-table-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1.15fr) minmax(8rem, .45fr) auto;
    gap: .85rem;
    align-items: center;
}
.agency-lead-table-row {
    justify-content: initial;
    min-height: 5rem;
    padding: .85rem .75rem;
    border: 1px solid var(--agency-border);
    border-radius: .75rem;
    background: #fff;
}
.agency-lead-table-row .agency-lead-outcome { justify-items: start; }
.agency-icon-action {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: .45rem .65rem;
    border: 1px solid var(--agency-border);
    border-radius: .7rem;
    color: var(--agency-ink);
    background: var(--agency-surface);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.agency-icon-action:hover { border-color: var(--agency-brand); color: var(--agency-brand); }

.agency-auth-page { display: grid; place-items: center; padding: clamp(1rem, 5vw, 3rem); }
.agency-auth-shell { width: min(52rem, 100%); }
.agency-auth-shell-compact { width: min(30rem, 100%); }
.agency-auth-brand { margin-bottom: 1rem; }
.agency-auth-card { padding: clamp(1.25rem, 4vw, 2.25rem); border: 1px solid var(--agency-border); border-radius: 1.25rem; background: #fff; box-shadow: 0 1.5rem 4rem rgb(26 57 38 / .12); }
.agency-auth-card h1 { margin: 0; font-size: clamp(1.65rem, 5vw, 2.25rem); letter-spacing: -.035em; }
.agency-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.agency-field { display: grid; gap: .4rem; margin-top: 1rem; }
.agency-auth-grid .agency-field { margin-top: 0; }
.agency-field-wide { grid-column: 1 / -1; }
.agency-field label { font-size: .78rem; font-weight: 700; }
.agency-field input,
.agency-field textarea { width: 100%; box-sizing: border-box; }
.agency-field textarea { resize: vertical; }
.agency-field small { color: var(--agency-muted); font-size: .72rem; }
.agency-auth-actions { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 1.35rem; }
.agency-auth-actions a,
.agency-auth-switch a { color: var(--agency-brand); font-weight: 700; }
.agency-form-error { min-height: 1.4rem; margin-top: .8rem; color: var(--agency-danger); font-size: .8rem; }
.agency-auth-switch { margin: 1rem 0 0; color: var(--agency-muted); text-align: center; font-size: .82rem; }
.agency-auth-success { text-align: center; }
.agency-success-icon { display: inline-grid; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; place-items: center; border-radius: 50%; color: #fff; background: var(--agency-brand); font-size: 1.6rem; }
.agency-code-display { display: flex; gap: .75rem; align-items: center; justify-content: center; margin: 1.5rem 0; padding: 1rem; border: 1px dashed #abc4b4; border-radius: .85rem; background: #f3faf6; }
.agency-code-display > strong { font-size: clamp(1.3rem, 4vw, 1.8rem); letter-spacing: .06em; }

/* Partner authentication reuses the primary Wazzibot login/register components. */
.page-login .partner-entry-links,
.page-register .partner-entry-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(2, 84, 45, .13);
    font-size: .84rem;
}

.page-login .auth-entry-links,
.page-register .auth-entry-links {
    display: grid;
    justify-items: center;
    gap: .7rem;
}

.page-login .auth-entry-links .partner-entry-links,
.page-register .auth-entry-links .partner-entry-links {
    width: 100%;
    margin-top: 0;
    padding-top: .7rem;
}

.page-login .partner-entry-links > span:first-child,
.page-register .partner-entry-links > span:first-child {
    color: var(--text-medium, #596960);
    font-weight: 600;
}

.page-login .partner-entry-actions,
.page-register .partner-entry-actions {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.page-login .partner-entry-links a,
.page-register .partner-entry-links a {
    font-weight: 750;
}

html[data-theme="dark"] :is(.page-login, .page-register) .partner-entry-links {
    border-top-color: rgba(182, 215, 194, .16);
}

html[data-theme="dark"] :is(.page-login, .page-register) .partner-entry-links > span:first-child {
    color: #d5e2da;
}

/* Keep every authentication-page text role readable in dark mode. */
html[data-theme="dark"] body:is(.page-login, .page-register) {
    --text-primary: #f1f7f3 !important;
    --text-secondary: #c7d5cc !important;
    --text-muted: #a7b8ad !important;
    --text-medium: #c7d5cc !important;
    --surface: #101815 !important;
    --surface-elevated: #131d19 !important;
    --border-light: rgba(199, 213, 204, .2) !important;
}

html[data-theme="dark"] body:is(.page-login, .page-register) .form-section :is(
    .form-title,
    .form-label,
    .register-success-title
) {
    color: #f1f7f3 !important;
}

html[data-theme="dark"] body:is(.page-login, .page-register) .form-section :is(
    .form-subtitle,
    .form-text,
    .form-links,
    .remember-me,
    .register-success-copy
) {
    color: #c7d5cc !important;
}

html[data-theme="dark"] body:is(.page-login, .page-register) .form-section .form-links a {
    color: #b9f6ca;
    text-decoration-color: rgba(185, 246, 202, .45);
}

html[data-theme="dark"] body:is(.page-login, .page-register) .form-section .form-links a:hover,
html[data-theme="dark"] body:is(.page-login, .page-register) .form-section .form-links a:focus-visible {
    color: #ffffff;
}

html[data-theme="dark"] body:is(.page-partner-login, .page-partner-register) .partner-form-error {
    color: #fca5a5;
}

html[data-theme="dark"] body.page-partner-register .partner-registration-code {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(185, 246, 202, .3);
}

html[data-theme="dark"] body.page-partner-register .partner-registration-code > strong {
    color: #e7f8ec;
}

.page-partner-register .partner-auth-eyebrow,
.page-partner-login .partner-auth-eyebrow {
    margin: 0 0 .65rem;
    color: rgb(255 255 255 / .82);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-register.page-partner-register .main-container {
    max-width: min(1180px, 96vw);
}
body.page-register:not(.page-partner-register) .form-section {
    padding-top: 0;
}
body.page-register:not(.page-partner-register) .form-header-sticky {
    padding-top: .95rem;
}
.page-register.page-partner-register .form-section {
    padding-top: 0;
}
.page-register.page-partner-register .form-header-sticky {
    padding-top: .95rem;
}
.page-register.page-partner-register .form-content-wrapper {
    padding-top: .35rem;
}
.page-partner-register .partner-business-details { min-height: 5.1rem; resize: vertical; }
.page-partner-register .partner-form-error,
.page-partner-login .partner-form-error {
    min-height: 1.35rem;
    margin-top: .35rem;
    color: var(--error-dark, #b42318);
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}
.page-partner-register .partner-form-error:empty {
    min-height: 0;
    margin: 0;
}
.page-partner-register .partner-form-error:not(:empty) {
    margin-top: .75rem;
}
.page-partner-register .auth-entry-links .partner-entry-links {
    margin-top: 0;
}
.page-partner-register .partner-registration-code {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    padding: .85rem;
    border: 1px dashed rgba(26, 75, 58, .35);
    border-radius: var(--radius-md);
    background: rgba(26, 75, 58, .05);
}
.page-partner-register .partner-registration-code > strong {
    color: var(--primary-dark);
    font-size: clamp(1.2rem, 4vw, 1.65rem);
    letter-spacing: .06em;
}
@media (max-width: 480px) {
    .page-partner-register .partner-registration-code { align-items: stretch; flex-direction: column; }
}

@media (max-width: 900px) {
    .agency-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agency-widget-list { grid-template-columns: 1fr; }
    .agency-client-intel { grid-template-columns: 1fr; }
    .agency-client-header,
    .agency-client-row { grid-template-columns: minmax(10rem, 1fr) repeat(3, minmax(4rem, .35fr)) 1rem; gap: .65rem; }
    .agency-campaign-header,
    .agency-campaign-row { grid-template-columns: minmax(12rem, 1fr) repeat(4, minmax(5rem, .42fr)); }
}

@media (max-width: 680px) {
    .agency-header { padding-inline: 1rem; }
    .agency-brand > span:last-child { display: none; }
    .agency-profile-trigger span:nth-child(2),
    .agency-profile-trigger > i { display: none; }
    .agency-main { padding: 1rem; }
    .agency-page-heading,
    .agency-panel-head,
    .agency-section-heading { align-items: stretch; flex-direction: column; }
    .agency-toolbar { display: grid; grid-template-columns: 1fr; }
    .agency-dropdown { justify-content: space-between; }
    .agency-dropdown-trigger { flex: 1 1 auto; min-width: 0; }
    .agency-summary-grid { grid-template-columns: 1fr; }
    .agency-stat-card { min-height: 5.8rem; }
    .agency-search input { width: 100%; }
    .agency-client-header { display: none; }
    .agency-client-table { display: grid; gap: .65rem; border: 0; }
    .agency-client-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 1rem;
        gap: .75rem;
        padding: 1rem;
        border: 1px solid var(--agency-border);
    }
    .agency-client-name { grid-column: 1 / -2; }
    .agency-client-row > i { grid-column: -2 / -1; grid-row: 1; justify-self: end; }
    .agency-client-row > span:not(.agency-client-name)::before { display: block; margin-bottom: .2rem; color: var(--agency-muted); content: attr(data-label); font-size: .65rem; font-weight: 600; }
    .agency-widget-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agency-detail-stats { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .agency-detail-stat { min-height: 6rem; padding: .85rem; }
    .agency-detail-stat strong { font-size: 1.45rem; }
    .agency-client-meta div { grid-template-columns: 1fr; gap: .2rem; }
    .agency-mix-row { grid-template-columns: 1fr; gap: .35rem; }
    .agency-campaign-header,
    .agency-lead-header { display: none; }
    .agency-campaign-row,
    .agency-lead-table-row {
        grid-template-columns: 1fr;
        gap: .7rem;
        padding: .9rem;
    }
    .agency-campaign-main strong,
    .agency-lead-campaign strong { white-space: normal; }
    .agency-lead-table-row .agency-lead-outcome { justify-items: start; }
    .agency-icon-action { width: 100%; }
    .agency-panel-head-stacked { gap: 1rem; }
    .agency-tier-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agency-tier-tabs button { justify-content: center; padding-inline: .4rem; }
    .agency-pagination { justify-content: space-between; }
    .agency-auth-grid { grid-template-columns: 1fr; }
    .agency-field-wide { grid-column: auto; }
    .agency-auth-actions { align-items: stretch; flex-direction: column-reverse; text-align: center; }
    .agency-auth-actions .agency-btn { width: 100%; }
    .agency-code-display { align-items: stretch; flex-direction: column; }
}

@media (max-width: 420px) {
    .agency-detail-stats { grid-template-columns: 1fr; }
    .agency-widget-metrics { grid-template-columns: 1fr 1fr; }
    .agency-lead-row { align-items: flex-start; }
}

.page-settings .delegated-sensitive-note {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid #efd69a;
    border-radius: .75rem;
    color: #6d5014;
    background: #fff9e9;
    font-size: .82rem;
    line-height: 1.5;
}
.page-settings .delegated-sensitive-note i { margin-top: .12rem; }
.page-settings .grant-service-name { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.page-settings .grant-service-row.grant-sensitive-row { background: #fffdf7; }
.page-settings .grant-sensitive-badge {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    padding: .18rem .45rem;
    border-radius: 999px;
    color: #805b13;
    background: #fff2cc;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}

body.page-upload-business-profile .bp-agency-access-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #cfe1d6;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5fbf7, #fff);
}
body.page-upload-business-profile .bp-agency-access-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #1a4b3a;
}
body.page-upload-business-profile .bp-agency-access-panel h3 { margin: 0 0 .3rem; color: #18382d; font-size: .95rem; }
body.page-upload-business-profile .bp-agency-access-panel p { margin: 0; color: #627069; font-size: .78rem; line-height: 1.5; }
@media (max-width: 700px) {
    body.page-upload-business-profile .bp-agency-access-panel { grid-template-columns: auto minmax(0, 1fr); }
    body.page-upload-business-profile .bp-agency-access-panel .bp-inline-link { grid-column: 1 / -1; justify-content: center; }
}

.page-partner-safe-settings .safe-settings-shell { max-width: 64rem; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); }
.page-partner-safe-settings .safe-settings-heading { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.page-partner-safe-settings .safe-settings-heading h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.15rem); }
.page-partner-safe-settings .safe-settings-heading p:not(.safe-settings-eyebrow) { max-width: 44rem; margin: .45rem 0 0; color: var(--ink-500, #64748b); line-height: 1.55; }
.page-partner-safe-settings .safe-settings-eyebrow { margin: 0 0 .35rem; color: var(--brand-primary, #02542d); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.page-partner-safe-settings .safe-settings-badge { display: inline-flex; gap: .4rem; align-items: center; flex: 0 0 auto; padding: .45rem .7rem; border-radius: 999px; color: var(--brand-primary, #02542d); background: rgb(2 84 45 / .08); font-size: .75rem; font-weight: 700; }
.page-partner-safe-settings .safe-settings-card { padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--ink-200, #e2e8f0); border-radius: .875rem; background: var(--surface-primary, #fff); box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.page-partner-safe-settings .safe-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.page-partner-safe-settings .safe-settings-grid label { display: grid; gap: .4rem; font-size: .8rem; font-weight: 700; }
.page-partner-safe-settings .safe-settings-grid input,
.page-partner-safe-settings .safe-settings-grid select,
.page-partner-safe-settings .safe-settings-grid textarea { width: 100%; min-height: 2.75rem; box-sizing: border-box; padding: .65rem .75rem; border: 1px solid var(--ink-200, #e2e8f0); border-radius: .7rem; background: var(--surface-primary, #fff); color: inherit; font: inherit; }
.page-partner-safe-settings .safe-settings-grid textarea { resize: vertical; }
.page-partner-safe-settings .safe-settings-wide { grid-column: 1 / -1; }
.page-partner-safe-settings .safe-settings-actions { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; min-height: 3rem; margin-top: 1rem; }
.page-partner-safe-settings #safeSettingsMessage { color: var(--ink-500, #64748b); font-size: .8rem; }

@media (max-width: 680px) {
    .page-partner-safe-settings .safe-settings-heading { align-items: stretch; flex-direction: column; }
    .page-partner-safe-settings .safe-settings-badge { align-self: flex-start; }
    .page-partner-safe-settings .safe-settings-grid { grid-template-columns: 1fr; }
    .page-partner-safe-settings .safe-settings-wide { grid-column: auto; }
    .page-partner-safe-settings .safe-settings-actions { align-items: stretch; flex-direction: column; }
    .page-partner-safe-settings .safe-settings-actions button { width: 100%; }
}

/* Compact service pricing and discount editor */
body.page-service-service .booking-grid{ grid-auto-flow:dense; align-items:start; }
body.page-service-service .booking-grid > .form-group:nth-child(3){ grid-column:1/-1; }
body.page-service-service #dofList{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
body.page-service-service .dof-card{ min-width:0; padding:.5rem .6rem; }
body.page-service-service .dof-card-desc:empty,
body.page-service-service .dof-card-meta:empty{ display:none; }
body.page-service-service .dof-modal{ max-width:720px; }
body.page-service-service .dof-modal-body{ gap:.5rem; padding:.7rem .85rem; }
body.page-service-service .dof-modal-header{ padding:.7rem .85rem; }
body.page-service-service .dof-active-row{ position:absolute; top:.8rem; right:3.4rem; }
body.page-service-service .dof-modal-body{ position:relative; }
body.page-service-service .dof-dropdown.open{ z-index:100; }
body.page-service-service .dof-dropdown .dropdown-menu{ z-index:110; }
body.page-service-service .dof-advanced{ border:1px solid var(--sv-border); border-radius:var(--sv-radius-sm); background:var(--sv-surface-2); }
body.page-service-service .dof-advanced summary{ padding:.55rem .7rem; cursor:pointer; list-style:none; color:var(--sv-text-2); font-size:.74rem; font-weight:700; }
body.page-service-service .dof-advanced summary::-webkit-details-marker{ display:none; }
body.page-service-service .dof-advanced summary i{ margin-right:.35rem; color:var(--sv-primary); }
body.page-service-service .dof-advanced-body{ display:flex; flex-direction:column; gap:.55rem; padding:0 .7rem .7rem; }
body.page-service-service .dof-staff-tier-list{ display:flex; flex-wrap:wrap; gap:.35rem; }
body.page-service-service .dof-staff-tier-list label{ display:flex; align-items:center; gap:.3rem; padding:.35rem .5rem; border:1px solid var(--sv-border); border-radius:999px; background:var(--sv-surface); font-size:.72rem; cursor:pointer; }
body.page-service-service .behavior-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; align-items:stretch; }
body.page-service-service .behavior-grid > .form-group.full-width{ grid-column:auto; margin:0; min-width:0; }
body.page-service-service .behavior-card{ padding:.55rem; border:1px solid var(--sv-border); border-radius:var(--sv-radius-sm); background:var(--sv-surface-2); }
body.page-service-service .behavior-card .toggle-group{ height:100%; padding:0; border:0; background:transparent; }
body.page-service-service .behavior-value-card{ display:flex; flex-direction:column; justify-content:center; border-left:3px solid var(--sv-primary-600); }
body.page-service-service .behavior-value-card.is-disabled{ opacity:.5; border-left-color:var(--sv-border-strong); }
body.page-service-service .behavior-value-card .form-label{ white-space:nowrap; }
@media(max-width:1000px){body.page-service-service .behavior-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){body.page-service-service .behavior-grid{grid-template-columns:1fr}body.page-service-service .behavior-card{padding:.5rem}body.page-service-service .behavior-value-card .form-label{white-space:normal}}
@media(max-width:720px){body.page-service-service #dofList{grid-template-columns:1fr}body.page-service-service .dof-active-row{position:static}body.page-service-service .booking-grid>.form-group:nth-child(3){grid-column:auto}body.page-service-service .dof-modal-subtitle{display:none}}


/* ==========================================================
   Template: settings.html (page-settings)
   ========================================================== */

    /* ============================================================================
   SETTINGS - EXACT UI CLONE FROM BUSINESS PROFILE
   ============================================================================ */

    /* Global Theme Colors for Form Elements */
    body.page-settings .bp-container,
body.page-settings .bp-container *{
        accent-color: var(--brand-primary);
    }

    body.page-settings .bp-container ::selection{
        background: rgba(2, 84, 45, 0.2);
        color: var(--ink-800);
    }

    body.page-settings .bp-container input[type="time"],
body.page-settings .bp-container input[type="date"],
body.page-settings .bp-container input[type="datetime-local"]{
        color-scheme: light;
    }

    body.page-settings .bp-container input[type="time"]::-webkit-calendar-picker-indicator,
body.page-settings .bp-container input[type="date"]::-webkit-calendar-picker-indicator{
        filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(90deg);
        cursor: pointer;
    }

    /* Container */
    body.page-settings .bp-container{
        display: flex;
        gap: 1rem;
        padding: .875rem;
        min-height: calc(100vh - 50px);
        margin: 0 auto;
    }

    /* Progress Bar */
    body.page-settings .bp-progress-container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--ink-200);
        z-index: 1000;
    }

    body.page-settings .bp-progress-bar{
        height: 100%;
        width: 0;
        background: var(--brand-primary);
        transition: width .4s var(--easing);
    }

    /* Sidebar */
    body.page-settings .bp-sidebar{
        width: 260px;
        min-width: 260px;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        overflow: hidden;
        height: fit-content;
        position: sticky;
        top: .875rem;
        align-self: flex-start;
    }

    body.page-settings .bp-sidebar-header{
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--ink-200);
        background: var(--surface-primary);
        position: relative;
    }

    body.page-settings .bp-sidebar-header::before{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(2, 84, 45, 0.06);
        pointer-events: none;
    }

    body.page-settings .bp-sidebar-title{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
        position: relative;
        z-index: 1;
    }

    body.page-settings .bp-sidebar-title i{
        font-size: .9rem;
    }

    body.page-settings .bp-sidebar-subtitle{
        font-size: .7rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin-top: .25rem;
        position: relative;
        z-index: 1;
    }

    /* Steps */
    body.page-settings .bp-steps{
        list-style: none;
        padding: 0;
        margin: 0;
    }

    body.page-settings .bp-step-item{
        display: flex;
        align-items: center;
        padding: .75rem 1.25rem;
        cursor: pointer;
        transition: var(--fast);
        font-weight: var(--font-weight-medium);
        font-size: .75rem;
        color: var(--ink-600);
        border-left: 3px solid transparent;
        background: var(--surface-primary);
    }

    body.page-settings .bp-step-item:hover{
        background: rgba(2, 84, 45, 0.04);
        color: var(--brand-primary);
    }

    body.page-settings .bp-step-item::before{
        content: attr(data-step);
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--ink-100);
        color: var(--ink-500);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: .75rem;
        font-size: .65rem;
        font-weight: var(--font-weight-bold);
        transition: var(--fast);
        flex-shrink: 0;
    }

    body.page-settings .bp-step-item.bp-active{
        background: rgba(2, 84, 45, 0.08);
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
        border-left-color: var(--brand-primary);
    }

    body.page-settings .bp-step-item.bp-active::before{
        background: var(--brand-primary);
        color: var(--surface-primary);
    }

    body.page-settings .bp-step-item.bp-completed::before{
        content: "";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        background: #22c55e;
        color: var(--surface-primary);
    }

    /* Main Content */
    body.page-settings .bp-main{
        flex: 1;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1.25rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.page-settings .bp-main::-webkit-scrollbar{
        width: 6px;
    }

    body.page-settings .bp-main::-webkit-scrollbar-track{
        background: var(--surface-tertiary);
        border-radius: .375rem;
    }

    body.page-settings .bp-main::-webkit-scrollbar-thumb{
        background: var(--ink-300);
        border-radius: .375rem;
    }

    body.page-settings .bp-main::-webkit-scrollbar-thumb:hover{
        background: var(--brand-primary);
    }

    body.page-settings .bp-main-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--ink-200);
        position: sticky;
        top: -1.25rem;
        background: var(--surface-primary);
        z-index: 10;
        margin-top: -1.25rem;
        padding-top: 1.25rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    body.page-settings .bp-main-title{
        font-size: 1.25rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0;
    }

    body.page-settings .bp-step-indicator{
        background: rgba(2, 84, 45, 0.1);
        padding: .375rem .75rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        color: var(--brand-primary);
        font-size: .7rem;
    }

    /* Mobile Header */
    body.page-settings .bp-mobile-header{
        display: none;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .875rem;
        padding: .75rem 1rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    }

    body.page-settings .bp-mobile-toggle{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border: none;
        padding: .5rem .75rem;
        border-radius: .5rem;
        cursor: pointer;
        transition: var(--fast);
        display: flex;
        align-items: center;
        gap: .375rem;
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-settings .bp-mobile-overlay{
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
        opacity: 0;
        transition: opacity .3s ease;
    }

    /* Cards */
    body.page-settings .bp-card{
        display: none;
    }

    body.page-settings .bp-card.bp-active{
        display: block;
        animation: settings--fadeIn .3s ease-out;
    }

    @keyframes settings--fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-settings .bp-card-title{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin: 0 0 1rem 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-settings .bp-card-title i{
        font-size: .9rem;
    }

    /* Form Styles */
    body.page-settings .bp-form-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    body.page-settings .bp-form-group{
        display: flex;
        flex-direction: column;
    }

    body.page-settings .bp-form-group.bp-full-width{
        grid-column: 1 / -1;
    }

    body.page-settings .bp-form-label{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
        margin-bottom: .375rem;
        font-size: .75rem;
        display: flex;
        align-items: center;
        gap: .375rem;
    }

    body.page-settings .bp-form-label i{
        color: var(--brand-primary);
        font-size: .7rem;
    }

    body.page-settings .bp-form-label .bp-required{
        color: #ef4444;
    }

    body.page-settings .bp-form-control,
body.page-settings .bp-form-select{
        width: 100%;
        padding: .625rem .875rem;
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        font-size: .75rem;
        font-family: var(--font-family-primary);
        transition: var(--fast);
        background: var(--surface-primary);
        color: var(--ink-700);
        outline: none;
        font-weight: var(--font-weight-medium);
    }

    body.page-settings .bp-form-control:focus,
body.page-settings .bp-form-select:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-settings .bp-form-control::placeholder{
        color: var(--ink-400);
    }

    body.page-settings .bp-form-control:read-only{
        background: var(--surface-secondary);
        color: var(--ink-500);
        cursor: not-allowed;
    }

    body.page-settings textarea.bp-form-control{
        min-height: 80px;
        resize: vertical;
        line-height: 1.5;
    }

    /* Custom-rendered dropdown (see initCustomDropdown() in settings.html)
       — the same .custom-dropdown/.dropdown-trigger/.dropdown-menu/
       .dropdown-option component already used on Services, Campaigns,
       Dashboard, etc. A native <select>'s option list is painted by the
       OS, not the page, so it can't pick up our theme tokens; this is
       plain page markup instead, themed with the same tokens as every
       other Settings field. */
    body.page-settings .custom-dropdown{
        position: relative;
    }

    body.page-settings .custom-dropdown.open{
        z-index: 1000;
    }

    body.page-settings .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .6rem;
        width: 100%;
        padding: .625rem .875rem;
        font-size: .75rem;
        font-family: var(--font-family-primary);
        font-weight: var(--font-weight-medium);
        color: var(--ink-700);
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        cursor: pointer;
        text-align: left;
        transition: var(--fast);
    }

    body.page-settings .dropdown-trigger:hover{
        border-color: var(--brand-primary);
    }

    body.page-settings .custom-dropdown.open .dropdown-trigger{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-settings .dropdown-trigger-text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-settings .dropdown-trigger-text.placeholder{
        color: var(--ink-400);
    }

    body.page-settings .dropdown-trigger > i{
        flex: none;
        font-size: .7rem;
        color: var(--ink-500);
        transition: transform .15s ease;
    }

    body.page-settings .custom-dropdown.open .dropdown-trigger > i{
        transform: rotate(180deg);
    }

    body.page-settings .custom-dropdown .dropdown-menu{
        display: none;
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        right: 0;
        z-index: 60;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        box-shadow: 0 10px 25px -5px rgb(0 0 0 / .15), 0 8px 10px -6px rgb(0 0 0 / .1);
        padding: .3rem;
        max-height: 280px;
        overflow: hidden auto;
        margin: 0;
    }

    body.page-settings .custom-dropdown.open .dropdown-menu{
        display: block;
    }

    body.page-settings .dropdown-option{
        display: flex;
        align-items: center;
        width: 100%;
        padding: .42rem .6rem;
        font-size: .75rem;
        font-weight: var(--font-weight-medium);
        color: var(--ink-700);
        background: transparent;
        border: none;
        border-radius: .375rem;
        cursor: pointer;
        text-align: left;
        transition: background .12s ease, color .12s ease;
    }

    body.page-settings .dropdown-option.placeholder{
        color: var(--ink-400);
    }

    body.page-settings .dropdown-option:hover{
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
    }

    body.page-settings .dropdown-option.selected{
        background: var(--brand-primary);
        color: #fff;
        font-weight: 600;
    }

    body.page-settings .dropdown-option.selected:hover{
        background: var(--brand-secondary);
        color: #fff;
    }

    body.page-settings select.hidden-select{
        display: none;
    }

    /* Form Input Wrapper for visibility toggle */
    body.page-settings .form-input-wrapper{
        position: relative;
        display: flex;
        align-items: center;
    }

    body.page-settings .form-input-wrapper .bp-form-control{
        padding-right: 2.8rem;
    }

    body.page-settings .toggle-visibility-btn{
        position: absolute;
        right: 0.6rem;
        background: none;
        border: none;
        color: var(--brand-primary);
        cursor: pointer;
        font-size: 1.05rem;
        padding: 0.45rem;
        transition: transform var(--fast), color var(--fast);
        z-index: 10;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.page-settings .toggle-visibility-btn:hover{
        transform: scale(1.06);
        color: var(--brand-secondary);
    }

    /* Navigation Buttons */
    body.page-settings .bp-nav-buttons{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--ink-200);
    }

    body.page-settings .bp-btn{
        padding: .625rem 1.25rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        cursor: pointer;
        transition: var(--fast);
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        text-decoration: none;
    }

    body.page-settings .bp-btn-primary{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-settings .bp-btn-primary:hover{
        background: var(--brand-secondary);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    body.page-settings .bp-btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border-color: var(--ink-200);
    }

    body.page-settings .bp-btn-secondary:hover{
        background: rgba(2, 84, 45, 0.06);
        border-color: var(--brand-primary);
    }

    /* Error Handling */
    body.page-settings .bp-error{
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }

    body.page-settings .bp-error-text{
        color: #ef4444;
        font-size: .7rem;
        margin-top: .25rem;
        display: flex;
        align-items: center;
        gap: .25rem;
        font-weight: var(--font-weight-medium);
    }

    /* Config Sections */
    body.page-settings .config-section{
        border-radius: .625rem;
        padding: 1.25rem;
        margin-bottom: 1.75rem;
    }

    body.page-settings .config-title{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
        font-size: 1.05rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
    }

    /* Table Styles */
    body.page-settings .table-container{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        overflow: hidden;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
        margin-top: 1.25rem;
    }

    body.page-settings .table-scroll-wrapper{
        overflow-x: auto;
    }

    body.page-settings .table-toolbar{
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    body.page-settings .settings-table{
        width: 100%;
        min-width: 100%;
        border-collapse: collapse;
        font-size: 0.75rem;
    }

    body.page-settings .settings-table thead th{
        background: var(--brand-primary);
        color: white;
        font-weight: var(--font-weight-bold);
        font-size: 0.7rem;
        padding: 0.75rem 1rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        vertical-align: middle;
    }

    body.page-settings .settings-table tbody tr{
        border-bottom: 1px solid var(--ink-200);
        transition: background var(--fast);
    }

    body.page-settings .settings-table tbody tr:nth-child(even){
        background: rgba(0, 0, 0, 0.01);
    }

    body.page-settings .settings-table tbody tr:hover:not(.skeleton-row){
        background: rgba(2, 84, 45, 0.04);
    }

    body.page-settings .settings-table td{
        padding: 0.75rem 1rem;
        color: #4b5563;
        font-weight: 400;
        vertical-align: middle;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-settings .template-name{
        font-weight: 500;
        color: #374151;
        display: block;
        margin-bottom: 0.25rem;
    }

    body.page-settings .template-meta{
        font-size: 0.7rem;
        color: var(--ink-500);
    }

    /* Action Buttons in Table */
    body.page-settings .action-buttons{
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    body.page-settings .action-btn{
        padding: 0.4rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.7rem;
        font-weight: var(--font-weight-semibold);
        border: 1px solid;
        cursor: pointer;
        transition: var(--fast);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

    body.page-settings .action-btn.icon-only{
        width: 2rem;
        height: 2rem;
        padding: 0;
        justify-content: center;
        gap: 0;
        font-size: 0.82rem;
    }

    body.page-settings .action-btn:disabled{
        opacity: 0.6;
        cursor: not-allowed;
    }

    body.page-settings .action-btn.submit{
        background: var(--brand-primary);
        color: white;
        border-color: var(--brand-primary);
    }

    body.page-settings .action-btn.submit:hover:not(:disabled){
        background: var(--brand-secondary);
    }

    body.page-settings .action-btn.view{
        background: transparent;
        color: var(--brand-primary);
        border-color: var(--brand-primary);
    }

    body.page-settings .action-btn.view:hover{
        background: rgba(2, 84, 45, 0.06);
    }

    /* Sort Dropdown */
    body.page-settings .tmpl-sort-container{
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    body.page-settings .tmpl-sort-icon{
        color: var(--brand-primary);
        font-size: 0.9rem;
    }

    body.page-settings .tmpl-custom-dropdown{
        position: relative;
        width: 145px;
    }

    body.page-settings .tmpl-dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0.45rem 0.75rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        color: var(--ink-700);
        font-weight: 600;
        font-size: 0.75rem;
        cursor: pointer;
        transition: border-color 0.15s, box-shadow 0.15s;
        outline: none;
        width: 100%;
    }

    body.page-settings .tmpl-dropdown-trigger:hover{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.1);
    }

    body.page-settings .tmpl-dropdown-trigger:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-settings .tmpl-dropdown-trigger.active{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.1);
        background: rgba(2, 84, 45, 0.05);
    }

    body.page-settings .tmpl-dropdown-arrow{
        transition: transform 0.15s;
        color: var(--brand-primary);
        font-size: 0.7rem;
    }

    body.page-settings .tmpl-dropdown-trigger.active .tmpl-dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-settings .tmpl-dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    }

    body.page-settings .tmpl-dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    body.page-settings .tmpl-dropdown-option{
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0.5rem 0.75rem;
        color: var(--ink-700);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.12s;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-settings .tmpl-dropdown-option:hover{
        background: rgba(2, 84, 45, 0.07);
        color: var(--brand-primary);
    }

    body.page-settings .tmpl-dropdown-option.selected{
        background: rgba(2, 84, 45, 0.08);
        color: var(--brand-primary);
        font-weight: 600;
    }

    /* Pagination */
    body.page-settings .table-pagination{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--ink-200);
        background: var(--surface-primary);
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    body.page-settings .pagination-info{
        font-size: 0.72rem;
        color: var(--ink-500);
    }

    body.page-settings .pagination-controls{
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    body.page-settings .pagination-btn{
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.5rem;
        border: 1px solid var(--ink-200);
        border-radius: 0.375rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-size: 0.72rem;
        font-weight: var(--font-weight-medium);
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.page-settings .pagination-btn:hover:not(:disabled){
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

    body.page-settings .pagination-btn.active{
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
        font-weight: var(--font-weight-bold);
    }

    body.page-settings .pagination-btn:disabled{
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Badges */
    body.page-settings .status-badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.65rem;
        border-radius: 0.5rem;
        font-size: 0.65rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        min-width: 68px;
        height: 24px;
    }

    body.page-settings .status-success{
        background: rgba(34, 197, 94, 0.12);
        color: #16a34a;
        border: 1px solid rgba(34, 197, 94, 0.22);
    }

    body.page-settings .status-warning{
        background: rgba(245, 158, 11, 0.12);
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.22);
    }

    body.page-settings .status-error{
        background: rgba(239, 68, 68, 0.10);
        color: #b91c1c;
        border: 1px solid rgba(239, 68, 68, 0.18);
    }

    body.page-settings .status-info{
        background: rgba(59, 130, 246, 0.10);
        color: #2563eb;
        border: 1px solid rgba(59, 130, 246, 0.18);
    }

    body.page-settings .status-secondary{
        background: var(--surface-tertiary);
        color: var(--ink-600);
        border: 1px solid var(--ink-300);
    }

    /* Category badges */
    body.page-settings .category-marketing{
        background: rgba(139, 92, 246, 0.1);
        color: #7c3aed;
        border-color: rgba(139, 92, 246, 0.2);
    }

    body.page-settings .category-utility{
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
        border-color: rgba(34, 197, 94, 0.2);
    }

    body.page-settings .category-authentication{
        background: rgba(245, 158, 11, 0.1);
        color: #b45309;
        border-color: rgba(245, 158, 11, 0.2);
    }

    body.page-settings .bp-form-control.field-required-attention{
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .16) !important;
        background: #fff7f7 !important;
        animation: settings--requiredFieldPulse .8s ease-in-out 2;
    }

    body.page-settings .field-required-message{
        display: block;
        margin-top: .35rem;
        color: #b91c1c;
        font-size: .72rem;
        font-weight: 700;
    }

    @keyframes settings--requiredFieldPulse {
        50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .2); }
    }

    /* Skeleton Loading */
    body.page-settings .skeleton{
        background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--surface-primary) 50%, var(--surface-secondary) 75%);
        background-size: 200% 100%;
        animation: settings--shimmer 1.5s infinite;
        border-radius: .5rem;
        height: 1rem;
        width: 100%;
    }

    body.page-settings .skeleton.small{
        width: 60%;
    }

    body.page-settings .skeleton.medium{
        width: 80%;
    }

    body.page-settings .skeleton.large{
        width: 100%;
    }

    @keyframes settings--shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* Alerts */
    body.page-settings .alert-bar{
        position: relative;
        display: none;
        padding: 0.9rem 1.25rem;
        border-radius: .625rem;
        margin-bottom: 1rem;
        font-size: 0.75rem;
        font-weight: var(--font-weight-medium);
        animation: settings--slideDown 0.28s var(--fast) both;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    }

    @keyframes settings--slideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-settings .alert-bar.hide{
        animation: settings--slideUpOut 0.28s var(--fast) both;
    }

    @keyframes settings--slideUpOut {
        to {
            opacity: 0;
            transform: translateY(-8px);
        }
    }

    body.page-settings .alert-bar-error{
        background: #fff5f5;
        color: #991b1b;
        border-left: 4px solid #ef4444;
        display: none;
        align-items: center;
        justify-content: space-between;
    }

    body.page-settings .alert-bar-error.show{
        display: flex;
    }

    body.page-settings .alert-bar-success{
        background: #f0fdf4;
        color: #166534;
        border-left: 4px solid #16a34a;
        display: none;
        align-items: center;
        justify-content: space-between;
    }

    body.page-settings .alert-bar-success.show{
        display: flex;
    }

    body.page-settings .alert-content{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 1;
    }

    body.page-settings .alert-icon{
        font-size: 1rem;
        flex-shrink: 0;
    }

    body.page-settings .alert-message{
        flex: 1;
        line-height: 1.4;
    }

    body.page-settings .alert-close{
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        padding: 0;
        margin-left: 1rem;
        flex-shrink: 0;
        transition: transform var(--fast);
        color: inherit;
    }

    body.page-settings .alert-close:hover{
        transform: scale(1.08);
    }

    /* Toast Notification */
    body.page-settings .settings-toast,
    body.page-settings .toast{
        position: fixed;
        top: 1rem;
        right: 1rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        color: var(--ink-700);
        padding: 0.75rem 1rem;
        border-radius: .625rem;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        z-index: 10050;
        transform: translateX(calc(100% + 1rem));
        transition: transform .3s ease;
        font-weight: var(--font-weight-semibold);
        font-size: 0.75rem;
        min-width: 260px;
        max-width: 320px;
    }

    body.page-settings .settings-toast-show,
    body.page-settings .toast-show{
        transform: translateX(0);
    }

    body.page-settings .settings-toast-success,
    body.page-settings .toast-success{
        border-left: 4px solid #16a34a;
    }

    body.page-settings .settings-toast-error,
    body.page-settings .toast-error{
        border-left: 4px solid #ef4444;
    }

    body.page-settings .settings-toast-warning,
    body.page-settings .toast-warning{
        border-left: 4px solid #f59e0b;
    }

    /* Modal */
    body.page-settings .modal{
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(6px);
        z-index: 1050;
        padding: 1.5rem;
        overflow-y: auto;
    }

    body.page-settings .modal.show{
        display: flex;
        align-items: center;
        justify-content: center;
        animation: settings--modalFadeIn .28s ease both;
    }

    @keyframes settings--modalFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    body.page-settings .modal-content{
        background: var(--surface-primary);
        border-radius: .875rem;
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08);
        max-width: 920px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        animation: settings--slideUp 0.28s ease both;
    }

    @keyframes settings--slideUp {
        from {
            opacity: 0;
            transform: translateY(18px) scale(.995);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    body.page-settings .modal-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem;
        border-bottom: 1px solid var(--ink-200);
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.03), transparent);
    }

    body.page-settings .modal-header h5{
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-900);
        margin: 0;
    }

    body.page-settings .modal-close{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: .625rem;
        border: 1px solid var(--ink-200);
        background: var(--surface-primary);
        color: var(--ink-500);
        font-size: 1.05rem;
        cursor: pointer;
        transition: transform var(--fast), background var(--fast);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.page-settings .modal-close:hover{
        transform: scale(1.04);
        background: #ef4444;
        color: white;
        border-color: #ef4444;
    }

    body.page-settings .modal-body{
        padding: 1.25rem;
    }

    body.page-settings .modal-footer{
        padding: 1.25rem;
        border-top: 1px solid var(--ink-200);
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    /* Empty State */
    body.page-settings .empty-state{
        text-align: center;
        padding: 3rem 1.5rem;
        color: var(--ink-500);
    }

    body.page-settings .empty-state i{
        font-size: 3rem;
        color: var(--ink-300);
        margin-bottom: 1rem;
    }

    body.page-settings .empty-state h3{
        font-size: 1rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-600);
        margin: 0;
    }

    /* WABA Status Card */
    body.page-settings .waba-status-card,
body.page-settings .skeleton-status-card{
        background: linear-gradient(135deg, rgba(2, 84, 45, 0.03) 0%, transparent 100%);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        padding: 1rem;
    }

    body.page-settings .waba-status-card-header{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    body.page-settings .waba-status-icon{
        font-size: 1.5rem;
    }

    body.page-settings .waba-status-title{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-900);
        text-transform: capitalize;
        font-size: 0.75rem;
    }

    /* Password Strength */
    body.page-settings .password-strength{
        display: none;
        margin-top: 0.5rem;
        padding: 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.7rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-settings .password-strength.weak{
        background: rgba(239, 68, 68, 0.1);
        color: #991b1b;
    }

    body.page-settings .password-strength.medium{
        background: rgba(245, 158, 11, 0.1);
        color: #b45309;
    }

    body.page-settings .password-strength.strong{
        background: rgba(34, 197, 94, 0.1);
        color: #166534;
    }

    /* Loading Spinner */
    body.page-settings .loading{
        display: none;
        text-align: center;
        padding: 1rem;
    }

    body.page-settings .spinner{
        width: 2rem;
        height: 2rem;
        border: 3px solid var(--ink-200);
        border-top-color: var(--brand-primary);
        border-radius: 50%;
        animation: settings--spin 0.8s linear infinite;
        margin: 0 auto 0.5rem;
    }

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

    body.page-settings .spin{
        display: inline-block;
        animation: settings--spin 0.8s linear infinite;
    }

    /* Requirements List */
    body.page-settings .requirements{
        background: rgba(2, 84, 45, 0.04);
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        font-size: 0.7rem;
    }

    body.page-settings .requirements ul{
        margin: 0.5rem 0 0;
        padding-left: 1.25rem;
    }

    body.page-settings .requirements li{
        margin-bottom: 0.25rem;
    }

    /* Integration Card */
    body.page-settings .integration-card{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: var(--surface-secondary);
        border: 1px solid var(--ink-200);
        border-radius: 0.625rem;
        margin-bottom: 1rem;
    }

    body.page-settings .integration-title{
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1;
    }

    body.page-settings .integration-icon{
        width: 3rem;
        height: 3rem;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: white;
        border-radius: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    body.page-settings .integration-info{
        flex: 1;
    }

    body.page-settings .integration-name{
        font-weight: var(--font-weight-bold);
        color: var(--ink-900);
        margin-bottom: 0.25rem;
    }

    body.page-settings .integration-description{
        font-size: 0.7rem;
        color: var(--ink-600);
        margin: 0;
    }

    body.page-settings .integration-actions{
        display: flex;
        gap: 0.75rem;
    }

    /* Responsive */
    @media (max-width: 992px) {
        body.page-settings .bp-container{
            flex-direction: column;
        }

        body.page-settings .bp-sidebar{
            position: relative;
            top: 0;
            width: 100%;
            min-width: 100%;
        }

        body.page-settings .bp-main{
            max-height: none;
        }

        body.page-settings .bp-mobile-header{
            display: flex;
        }
    }

    @media (max-width: 768px) {
        body.page-settings .bp-container{
            padding: .5rem;
        }

        body.page-settings .bp-form-grid{
            grid-template-columns: 1fr;
        }

        body.page-settings .bp-main{
            padding: 1rem;
        }

        body.page-settings .bp-main-header{
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }

        body.page-settings .action-buttons{
            flex-direction: column;
        }

        body.page-settings .action-btn{
            width: 100%;
            justify-content: center;
        }

        body.page-settings .action-btn.icon-only{
            width: 2rem;
        }
    }

    @media (max-width: 480px) {
        body.page-settings .bp-sidebar{
            border-radius: .625rem;
        }

        body.page-settings .bp-steps{
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        body.page-settings .bp-step-item{
            flex: 0 0 auto;
            flex-direction: column;
            text-align: center;
            padding: .6rem .9rem;
            min-width: 84px;
            border-left: none;
            border-bottom: 3px solid transparent;
        }

        body.page-settings .bp-step-item.bp-active{
            border-left: none;
            border-bottom-color: var(--brand-primary);
        }

        body.page-settings .bp-step-item::before{
            margin-right: 0;
            margin-bottom: .375rem;
        }
    }

    /* ============================================================================
       SETTINGS - PRODUCT WORKSPACE REDESIGN
       Mirrors product_service.html while preserving existing settings behavior.
       ============================================================================ */
    body.page-settings .bp-container,
body.page-settings .bp-container *{
        --primary: var(--brand-primary);
        --primary-light: var(--brand-primary);
        --primary-dark: var(--brand-secondary);
        --secondary: #4ade80;
        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;
        --accent: var(--ink-200);
        --text: var(--ink-800);
        --text-secondary: var(--ink-600);
        --text-muted: var(--ink-400);
        --bg-page: var(--surface-secondary);
        --bg-card: var(--surface-primary);
        --border: var(--ink-200);
        --border-light: var(--surface-secondary);
        --border-dark: var(--ink-300);
        --radius: .5rem;
        --radius-lg: .875rem;
        --shadow: var(--shadow-sm);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --gap: 1rem;
        --gap-sm: .75rem;
        --gap-xs: .375rem;
        --transition: var(--fast);
        --sidebar-width: 260px;
    }

    body.page-settings .bp-progress-container{
        overflow: hidden;
    }

    body.page-settings .bp-sidebar-header{
        border-bottom: 1px solid var(--ink-200);
        background: var(--surface-primary);
    }

    body.page-settings .bp-sidebar-header::before{
        background: linear-gradient(135deg, rgba(2, 84, 45, .1), rgba(2, 84, 45, .03));
    }

    body.page-settings .bp-sidebar-subtitle{
        display: none;
    }

    body.page-settings .bp-sidebar-title{
        font-size: .88rem;
    }

    body.page-settings .bp-step-item{
        position: relative;
        padding: .8rem 1.25rem;
    }

    body.page-settings .bp-step-item .step-label{
        display: block;
        line-height: 1.4;
    }

    body.page-settings .bp-step-item.bp-completed::before{
        content: "✓";
        font-family: inherit;
        font-weight: var(--font-weight-bold);
    }

    body.page-settings .sidebar-actions{
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--ink-200);
        background: var(--surface-secondary);
    }

    body.page-settings .sidebar-actions.is-hidden{
        display: none;
    }

    body.page-settings .btn-save-main{
        width: 100%;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: var(--surface-primary);
        border: none;
        padding: .625rem 1rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        cursor: pointer;
        transition: var(--fast);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .375rem;
        box-shadow: 0 2px 8px rgba(2, 84, 45, .25);
    }

    body.page-settings .btn-save-main:hover{
        background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(2, 84, 45, .35);
    }

    body.page-settings .main-header{
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .55rem .85rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .9rem;
        margin-bottom: .75rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
        position: sticky;
        top: 0;
        z-index: 20;
    }

    body.page-settings .mh-left{
        display: flex;
        align-items: center;
        gap: .5rem;
        flex: 1;
        min-width: 0;
    }

    body.page-settings .mh-icon{
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        border-radius: .45rem;
        color: #fff;
        font-size: .8rem;
    }

    body.page-settings .mh-right{
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-shrink: 0;
    }

    body.page-settings .main-title{
        font-size: .95rem;
        font-weight: 800;
        letter-spacing: -.015em;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.page-settings .main-step-indicator{
        background: rgba(2, 84, 45, .08);
        color: var(--brand-primary);
        font-size: .67rem;
        font-weight: 700;
        padding: .22rem .6rem;
        border-radius: 20px;
        border: 1px solid rgba(2, 84, 45, .15);
        white-space: nowrap;
        letter-spacing: .02em;
    }

    body.page-settings .btn-icon,
body.page-settings .btn-mh-save{
        width: 1.9rem;
        height: 1.9rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .45rem;
        font-size: .78rem;
        flex-shrink: 0;
    }

    body.page-settings .btn-mh-save{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: #fff !important;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(2, 84, 45, .22);
        transition: all .18s ease;
    }

    body.page-settings .btn-mh-save:hover{
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(2, 84, 45, .35);
    }

    body.page-settings .settings-header-action.is-hidden{
        display: none;
    }

    body.page-settings .bp-main .bp-card > .bp-main-header{
        display: none;
    }

    body.page-settings .config-section{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: .95rem;
        margin-bottom: .875rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
        overflow: hidden;
    }

    body.page-settings .config-title{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .5rem;
        flex-wrap: nowrap;
        margin: -.95rem -.95rem .9rem;
        padding: .55rem .95rem;
        background: var(--ink-50, #f9fafb);
        border-bottom: 1px solid var(--ink-200);
        border-radius: .875rem .875rem 0 0;
        color: var(--ink-600);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .055em;
    }

    body.page-settings .config-title i{
        color: var(--brand-primary);
        font-size: .78rem;
    }

    body.page-settings .bp-form-grid{
        gap: .875rem;
        margin-bottom: 0;
    }

    body.page-settings .bp-form-label{
        font-size: .75rem;
    }

    body.page-settings .bp-form-control,
body.page-settings .bp-form-select{
        min-height: 2.35rem;
    }

    body.page-settings .bp-nav-buttons{
        justify-content: flex-end;
        gap: .75rem;
        margin-top: .875rem;
        padding-top: .875rem;
    }

    body.page-settings .bp-btn-primary{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
        color: var(--surface-primary);
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(2, 84, 45, .2);
    }

    body.page-settings .bp-btn-primary:hover{
        background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
        box-shadow: 0 4px 14px rgba(2, 84, 45, .28);
    }

    body.page-settings .bp-btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border-color: var(--ink-200);
    }

    body.page-settings .bp-btn-secondary:hover{
        background: rgba(2, 84, 45, .06);
        border-color: var(--brand-primary);
    }

    body.page-settings .table-toolbar{
        align-items: center;
        gap: .75rem;
        margin-bottom: .875rem;
    }

    body.page-settings .table-container{
        margin-top: 0;
        border-radius: 1rem;
        box-shadow: 0 1px 3px rgb(15 23 42 / 0.05);
    }

    body.page-settings .settings-table th:last-child,
body.page-settings .settings-table td:last-child{
        text-align: center;
        width: 132px;
        min-width: 132px;
    }

    body.page-settings .settings-table td:last-child{
        padding-left: .75rem;
        padding-right: .75rem;
        white-space: nowrap;
    }

    body.page-settings .settings-table td:last-child .action-buttons{
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: .55rem;
    }

    body.page-settings .settings-table td:last-child .action-btn{
        flex: 0 0 auto;
        justify-content: center;
        line-height: 1;
    }

    body.page-settings .integration-card,
body.page-settings .waba-status-card,
body.page-settings .skeleton-status-card,
body.page-settings .requirements{
        border-radius: .75rem;
    }

    body.page-settings .integration-card{
        background: rgba(2, 84, 45, .02);
        border: 1px solid rgba(2, 84, 45, .14);
        margin-bottom: 0;
    }

    body.page-settings .settings-mobile-header{
        display: none;
        align-items: center;
        justify-content: space-between;
        margin: .875rem .875rem 0;
        padding: .75rem 1rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    }

    body.page-settings .settings-mobile-copy{
        display: flex;
        flex-direction: column;
        gap: .2rem;
        min-width: 0;
    }

    body.page-settings .settings-mobile-step{
        font-size: .7rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-semibold);
    }

    body.page-settings .settings-mobile-toggle{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border: none;
        padding: .5rem .75rem;
        border-radius: .5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: .375rem;
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        transition: var(--fast);
    }

    body.page-settings .settings-mobile-toggle:hover{
        background: var(--brand-secondary);
    }

    body.page-settings .settings-mobile-overlay{
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
        opacity: 0;
        transition: opacity .3s ease;
    }

    @media (max-width: 991px) {
        body.page-settings .bp-container{
            flex-direction: column;
            padding: .75rem;
            gap: .75rem;
        }

        body.page-settings .bp-sidebar{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: auto;
            min-width: 0;
            height: auto;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 1000;
            transform: translateY(-100%);
            transition: transform .3s ease;
            border-radius: 0 0 .875rem .875rem;
        }

        body.page-settings .bp-sidebar.settings-open{
            display: block;
            transform: translateY(0);
        }

        body.page-settings .settings-mobile-header{
            display: flex;
        }

        body.page-settings .settings-mobile-overlay.overlay-active{
            display: block;
            opacity: 1;
        }

        body.page-settings .bp-main{
            max-height: calc(100vh - 100px);
            padding: 1rem;
        }

        body.page-settings .main-header{
            position: static;
        }

        body.page-settings .bp-nav-buttons,
body.page-settings .table-toolbar,
body.page-settings .integration-card{
            flex-direction: column;
            align-items: stretch;
        }

        body.page-settings .bp-nav-buttons .bp-btn,
body.page-settings .table-toolbar .bp-btn,
body.page-settings .integration-actions .bp-btn{
            width: 100%;
            justify-content: center;
        }

        body.page-settings .tmpl-sort-container,
body.page-settings .tmpl-custom-dropdown{
            width: 100%;
        }

        body.page-settings .bp-steps{
            display: block;
        }

        body.page-settings .bp-step-item{
            flex-direction: row;
            text-align: left;
            border-left: 3px solid transparent;
            border-bottom: none;
        }

        body.page-settings .bp-step-item.bp-active{
            border-left-color: var(--brand-primary);
            border-bottom-color: transparent;
        }

        body.page-settings .bp-step-item::before{
            margin-right: .75rem;
            margin-bottom: 0;
        }
    }

    @media (max-width: 768px) {
        body.page-settings .bp-container{
            padding: .75rem;
        }

        body.page-settings .bp-main{
            padding: .875rem;
        }

        body.page-settings .main-header{
            gap: .5rem;
            padding: .5rem .65rem;
        }

        body.page-settings .main-title{
            font-size: .86rem;
        }

        body.page-settings .config-section{
            padding: .85rem;
        }

        body.page-settings .config-title{
            margin: -.85rem -.85rem .85rem;
            padding: .55rem .85rem;
        }
    }



    body.page-settings .delegated-link-row{
        display: grid;
        gap: .45rem;
        max-width: 46rem;
        margin-bottom: 1rem;
    }

    body.page-settings .delegated-link-controls{
        display: grid;
        grid-template-columns: minmax(15rem, 24rem) auto;
        gap: .6rem;
        align-items: center;
    }

    body.page-settings .delegated-link-controls .bp-form-control{
        max-width: none;
    }

    body.page-settings .grant-card{
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem;
        margin-top: 1rem;
        background: var(--surface-primary);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    body.page-settings .grant-card:hover{
        border-color: rgba(2, 84, 45, .22);
        box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
    }

    body.page-settings .grant-card.is-saving .grant-service-list{
        opacity: .72;
    }

    body.page-settings .grant-card-head{
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        padding-bottom: .9rem;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-settings .grant-card-identity{
        display: flex;
        align-items: center;
        gap: .75rem;
        min-width: 0;
    }

    body.page-settings .grant-card-avatar{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .625rem;
        color: var(--brand-primary);
        background: rgba(2, 84, 45, .09);
        flex: 0 0 auto;
    }

    body.page-settings .grant-card-identity strong{
        display: block;
        overflow-wrap: anywhere;
        color: var(--ink-800);
        font-size: .92rem;
    }

    body.page-settings .grant-card-meta{
        overflow-wrap: anywhere;
        color: var(--ink-500);
        font-size: .74rem;
        font-weight: 600;
    }

    body.page-settings .grant-unlink-btn{
        gap: .35rem;
        min-height: 2.25rem;
        padding: .45rem .75rem;
        flex: 0 0 auto;
    }

    body.page-settings .grant-list-head{
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
        gap: 1rem;
        padding: .9rem .85rem .45rem;
        color: var(--ink-500);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    body.page-settings .grant-service-list{
        display: grid;
        gap: .55rem;
    }

    body.page-settings .grant-service-row{
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
        gap: 1rem;
        align-items: center;
        padding: .75rem .85rem;
        border: 1px solid var(--ink-200);
        border-radius: .75rem;
        background: var(--surface-primary);
        transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }

    body.page-settings .grant-service-row:hover{
        border-color: rgba(2, 84, 45, .22);
        background: rgba(2, 84, 45, .025);
    }

    body.page-settings .grant-service-row.grant-sensitive-row{
        border-color: rgba(245, 158, 11, .34);
        background: linear-gradient(135deg, rgba(245, 158, 11, .08), var(--surface-primary));
    }

    body.page-settings .grant-service-copy{
        display: flex;
        align-items: center;
        gap: .65rem;
        min-width: 0;
    }

    body.page-settings .grant-service-icon{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: .55rem;
        color: var(--brand-primary);
        background: rgba(2, 84, 45, .08);
        flex: 0 0 auto;
    }

    body.page-settings .grant-sensitive-row .grant-service-icon{
        color: #9a6100;
        background: rgba(245, 158, 11, .16);
    }

    body.page-settings .grant-service-text{
        min-width: 0;
    }

    body.page-settings .grant-service-name{
        display: flex;
        gap: .55rem;
        align-items: center;
        flex-wrap: wrap;
    }

    body.page-settings .grant-service-name strong{
        color: var(--ink-800);
        font-size: .82rem;
    }

    body.page-settings .grant-service-description{
        max-width: 46rem;
        margin: .25rem 0 0;
        color: var(--ink-500);
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.45;
    }

    body.page-settings .grant-sensitive-badge{
        display: inline-flex;
        gap: .3rem;
        align-items: center;
        padding: .18rem .45rem;
        border-radius: 999px;
        color: #805b13;
        background: #fff2cc;
        font-size: .66rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    body.page-settings .grant-service-access{
        justify-self: end;
        width: 100%;
        max-width: 24rem;
    }

    body.page-settings .grant-selector{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .2rem;
        width: 100%;
        min-width: 0;
        padding: .25rem;
        margin: 0;
        border: 1px solid var(--ink-200);
        border-radius: .7rem;
        background: var(--surface-secondary);
    }

    body.page-settings .grant-selector[data-level-count="1"]{
        grid-template-columns: 1fr;
    }

    body.page-settings .grant-selector[data-level-count="2"]{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-settings .grant-selector label{
        position: relative;
        display: block;
        min-width: 0;
        margin: 0;
        cursor: pointer;
    }

    body.page-settings .grant-selector input{
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    body.page-settings .grant-selector span{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.45rem;
        padding: .55rem .6rem;
        border-radius: .5rem;
        color: var(--ink-600);
        font-size: .72rem;
        font-weight: 750;
        line-height: 1.2;
        text-align: center;
        pointer-events: none;
        white-space: nowrap;
        transition: background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    body.page-settings .grant-selector label:hover span{
        background: rgba(2, 84, 45, .06);
        color: var(--brand-primary);
    }

    body.page-settings .grant-selector input:checked + span{
        color: #fff;
        background: var(--brand-primary);
        box-shadow: 0 8px 16px rgba(2, 84, 45, .2);
    }

    body.page-settings .grant-selector input:focus-visible + span{
        outline: 3px solid var(--active-indicator);
        outline-offset: 2px;
    }

    body.page-settings .grant-card-actions{
        display: flex;
        justify-content: flex-end;
        gap: .5rem;
        margin-top: .9rem;
        padding-top: .9rem;
        border-top: 1px solid var(--ink-200);
    }

    body.page-settings .grant-save-btn,
body.page-settings .grant-action-busy{
        justify-content: center;
        gap: .45rem;
        min-width: 9.5rem;
    }

    body.page-settings .grant-action-busy{
        cursor: wait;
        opacity: .9;
        pointer-events: none;
        transform: none;
    }

    body.page-settings .grant-button-spinner{
        width: .9rem;
        height: .9rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: settings--spin .7s linear infinite;
        flex: 0 0 auto;
    }

    body.page-settings #delegatedAccessMessage{
        margin-bottom: 0;
    }

    @media(max-width:900px){
        body.page-settings .grant-list-head{
            display: none;
        }

        body.page-settings .grant-service-row{
            grid-template-columns: 1fr;
            gap: .75rem;
        }

        body.page-settings .grant-service-access{
            justify-self: stretch;
            max-width: none;
        }
    }

    @media(max-width:700px){
        body.page-settings .delegated-link-controls{
            grid-template-columns: 1fr;
        }

        body.page-settings .grant-card-head{
            align-items: stretch;
            flex-direction: column;
        }

        body.page-settings .grant-card-actions{
            justify-content: stretch;
        }

        body.page-settings .grant-unlink-btn,
body.page-settings .grant-save-btn{
            width: 100%;
        }

        body.page-settings .grant-service-copy{
            align-items: flex-start;
        }

        body.page-settings .grant-selector span{
            min-height: 2.6rem;
            padding: .5rem .42rem;
            white-space: normal;
        }
    }

    @media(max-width:420px){
        body.page-settings .grant-selector span{
            font-size: .68rem;
        }
    }


/* ==========================================================
   Template: sgnonsjkhjamjbmfblogin.html (page-sgnonsjkhjamjbmfblogin)
   ========================================================== */

    /* ===== Glass dashboard theme (aligned with settings.html) ===== */
    body.page-sgnonsjkhjamjbmfblogin{
        --brand: #02542D;
        --brand-600: #014f2b;
        --brand-700: #013e22;
        --brand-800: #0b2e22;
        --ink: #0c1222;
        --muted: #64748b;
        --g-50: #f2fbf6;
        --g-100: #e5f6ee;
        --g-200: #c8eadc;
        --g-300: #a4dcc6;
        --glass-bg: rgba(255, 255, 255, .55);
        --glass-border: rgba(2, 84, 45, .18);
        --glass-blur: blur(12px);
        --card: #fff;
        --shadow-sm: 0 6px 18px rgba(2, 84, 45, .08);
        --shadow-md: 0 12px 30px rgba(2, 84, 45, .12);
    }

    body.page-sgnonsjkhjamjbmfblogin{
        background: linear-gradient(135deg, #f6faf8 0%, #eef6f1 100%);
        min-height: 100vh;
    }

    body.page-sgnonsjkhjamjbmfblogin .wrap{
        max-width: 1260px;
        margin: 16px auto;
        padding: 0 14px
    }

    /* Cards */
    body.page-sgnonsjkhjamjbmfblogin .card{
        background: var(--card);
        border: 1px solid var(--glass-border);
        border-radius: 14px;
        box-shadow: var(--shadow-md);
        padding: 20px;
        margin-bottom: 16px;
    }

    body.page-sgnonsjkhjamjbmfblogin .card h4{
        margin: 0 0 16px 0;
        color: var(--brand-800);
        font-weight: 800;
        letter-spacing: .2px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body.page-sgnonsjkhjamjbmfblogin .card h4 i{
        color: var(--brand);
    }

    /* Sections */
    body.page-sgnonsjkhjamjbmfblogin .config-section{
        border: 1px solid #e6efe9;
        background: #fafbfc;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 14px;
    }

    body.page-sgnonsjkhjamjbmfblogin .config-section:last-child{
        margin-bottom: 0;
    }

    body.page-sgnonsjkhjamjbmfblogin .config-title{
        font-weight: 800;
        color: var(--brand-700);
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 14px 0;
        font-size: 1rem;
    }

    body.page-sgnonsjkhjamjbmfblogin .config-title i{
        color: var(--brand);
    }

    /* Enhanced button styling for your existing button */
    body.page-sgnonsjkhjamjbmfblogin button[onclick="launchWhatsAppSignup()"]{
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%) !important;
        border: none !important;
        border-radius: 999px !important;
        font-weight: 800 !important;
        padding: 12px 24px !important;
        color: #fff !important;
        font-size: 14px !important;
        transition: all .2s !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    }

    body.page-sgnonsjkhjamjbmfblogin button[onclick="launchWhatsAppSignup()"]::before{
        content: "🔗";
        margin-right: 5px;
    }

    body.page-sgnonsjkhjamjbmfblogin button[onclick="launchWhatsAppSignup()"]:hover{
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(2, 84, 45, .3) !important;
    }

    /* Response sections styling */
    body.page-sgnonsjkhjamjbmfblogin .response-section{
        margin-top: 16px;
    }

    body.page-sgnonsjkhjamjbmfblogin .response-label{
        font-weight: 600;
        color: var(--brand-700);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    body.page-sgnonsjkhjamjbmfblogin .response-label i{
        color: var(--brand);
    }

    /* Style your existing pre elements */
    body.page-sgnonsjkhjamjbmfblogin #session-info-response,
body.page-sgnonsjkhjamjbmfblogin #sdk-response{
        background: #f8f9fa !important;
        border: 1px solid #e6efe9 !important;
        border-radius: 10px !important;
        padding: 14px !important;
        font-family: "Courier New", monospace !important;
        font-size: 11px !important;
        max-height: 170px !important;
        overflow-y: auto !important;
        white-space: pre-wrap !important;
        word-break: break-all !important;
        color: #333 !important;
        margin: 0 !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        body.page-sgnonsjkhjamjbmfblogin .wrap{
            padding: 0 12px;
        }

        body.page-sgnonsjkhjamjbmfblogin .card{
            padding: 20px;
        }

        body.page-sgnonsjkhjamjbmfblogin .config-section{
            padding: 16px;
        }

        body.page-sgnonsjkhjamjbmfblogin button[onclick="launchWhatsAppSignup()"]{
            padding: 12px 20px !important;
            font-size: 14px !important;
        }
    }

    /* Integration styling */
    body.page-sgnonsjkhjamjbmfblogin .integration-card{
        background: #f8f9fa;
        border: 1px solid #e6efe9;
        border-radius: 10px;
        padding: 16px;
        transition: all .2s;
    }

    body.page-sgnonsjkhjamjbmfblogin .integration-title{
        font-weight: 700;
        color: var(--brand-800);
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    body.page-sgnonsjkhjamjbmfblogin .integration-title i{
        color: var(--brand);
    }

    body.page-sgnonsjkhjamjbmfblogin .description-text{
        color: var(--muted);
        margin-bottom: 16px;
        line-height: 1.5;
    }


/* ==========================================================
   Template: upload_business_profile.html (page-upload-business-profile)
   ========================================================== */

    /* ============================================================================
   BUSINESS PROFILE - DASHBOARD MATCHING UI
   ============================================================================ */

    /* Global Theme Colors for Form Elements */
    body.page-upload-business-profile .bp-container,
body.page-upload-business-profile .bp-container *{
        accent-color: var(--brand-primary);
    }

    body.page-upload-business-profile .bp-container ::selection{
        background: rgba(2, 84, 45, 0.2);
        color: var(--ink-800);
    }

    body.page-upload-business-profile .bp-container input[type="time"],
body.page-upload-business-profile .bp-container input[type="date"],
body.page-upload-business-profile .bp-container input[type="datetime-local"]{
        color-scheme: light;
    }

    body.page-upload-business-profile .bp-container input[type="time"]::-webkit-calendar-picker-indicator,
body.page-upload-business-profile .bp-container input[type="date"]::-webkit-calendar-picker-indicator{
        filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(90deg);
        cursor: pointer;
    }

    /* Container */
    body.page-upload-business-profile .bp-container{
        display: flex;
        gap: 1rem;
        padding: .875rem;
        min-height: calc(100vh - 50px);
        margin: 0 auto;
    }

    /* Progress Bar */
    body.page-upload-business-profile .bp-progress-container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--ink-200);
        z-index: 1000;
    }

    body.page-upload-business-profile .bp-progress-bar{
        height: 100%;
        width: 0;
        background: var(--brand-primary);
        transition: width .4s var(--easing);
    }

    /* Sidebar */
    body.page-upload-business-profile .bp-sidebar{
        width: 260px;
        min-width: 260px;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        overflow: hidden;
        height: fit-content;
        position: sticky;
        top: .875rem;
        align-self: flex-start;
    }

    body.page-upload-business-profile .bp-sidebar-header{
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--ink-200);
        background: var(--surface-primary);
        position: relative;
    }

    body.page-upload-business-profile .bp-sidebar-header::before{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(2, 84, 45, 0.06);
        pointer-events: none;
    }

    body.page-upload-business-profile .bp-sidebar-title{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
        position: relative;
        z-index: 1;
    }

    body.page-upload-business-profile .bp-sidebar-title i{
        font-size: .9rem;
    }

    body.page-upload-business-profile .bp-sidebar-subtitle{
        font-size: .7rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin-top: .25rem;
        position: relative;
        z-index: 1;
    }

    /* Steps */
    body.page-upload-business-profile .bp-steps{
        list-style: none;
        padding: 0;
        margin: 0;
    }

    body.page-upload-business-profile .bp-step-item{
        display: flex;
        align-items: center;
        padding: .75rem 1.25rem;
        cursor: pointer;
        transition: var(--fast);
        font-weight: var(--font-weight-medium);
        font-size: .75rem;
        color: var(--ink-600);
        border-left: 3px solid transparent;
        background: var(--surface-primary);
    }

    body.page-upload-business-profile .bp-step-item:hover{
        background: rgba(2, 84, 45, 0.04);
        color: var(--brand-primary);
    }

    body.page-upload-business-profile .bp-step-item::before{
        content: attr(data-step);
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--ink-100);
        color: var(--ink-500);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: .75rem;
        font-size: .65rem;
        font-weight: var(--font-weight-bold);
        transition: var(--fast);
        flex-shrink: 0;
    }

    body.page-upload-business-profile .bp-step-item.bp-active{
        background: rgba(2, 84, 45, 0.08);
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
        border-left-color: var(--brand-primary);
    }

    body.page-upload-business-profile .bp-step-item.bp-active::before{
        background: var(--brand-primary);
        color: var(--surface-primary);
    }

    body.page-upload-business-profile .bp-step-item.bp-completed::before{
        content: "";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        background: #22c55e;
        color: var(--surface-primary);
    }

    /* Sidebar Actions */
    body.page-upload-business-profile .bp-sidebar-actions{
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--ink-200);
        background: var(--surface-secondary);
    }

    body.page-upload-business-profile .bp-btn-save{
        width: 100%;
        background: var(--brand-primary);
        color: #fff;
        border: none;
        padding: .625rem 1rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        cursor: pointer;
        transition: var(--fast);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .375rem;
    }

    body.page-upload-business-profile .bp-btn-save:hover{
        background: var(--brand-secondary);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    body.page-upload-business-profile .bp-btn-save:disabled{
        opacity: .8;
        cursor: not-allowed;
        transform: none;
    }

    /* Main Content */
    body.page-upload-business-profile .bp-main{
        flex: 1;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1.25rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.page-upload-business-profile .bp-main::-webkit-scrollbar{
        width: 6px;
    }

    body.page-upload-business-profile .bp-main::-webkit-scrollbar-track{
        background: var(--surface-tertiary);
        border-radius: .375rem;
    }

    body.page-upload-business-profile .bp-main::-webkit-scrollbar-thumb{
        background: var(--ink-300);
        border-radius: .375rem;
    }

    body.page-upload-business-profile .bp-main::-webkit-scrollbar-thumb:hover{
        background: var(--brand-primary);
    }

    body.page-upload-business-profile .bp-main-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--ink-200);
        position: sticky;
        top: -1.25rem;
        background: var(--surface-primary);
        z-index: 10;
        margin-top: -1.25rem;
        padding-top: 1.25rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    body.page-upload-business-profile .bp-main-title{
        font-size: 1.25rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
        margin: 0;
    }

    body.page-upload-business-profile .bp-step-indicator{
        background: rgba(2, 84, 45, 0.1);
        padding: .375rem .75rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        color: var(--brand-primary);
        font-size: .7rem;
    }

    /* Mobile Header */
    body.page-upload-business-profile .bp-mobile-header{
        display: none;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .875rem;
        padding: .75rem 1rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    }

    body.page-upload-business-profile .bp-mobile-toggle{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border: none;
        padding: .5rem .75rem;
        border-radius: .5rem;
        cursor: pointer;
        transition: var(--fast);
        display: flex;
        align-items: center;
        gap: .375rem;
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-upload-business-profile .bp-mobile-overlay{
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
        opacity: 0;
        transition: opacity .3s ease;
    }

    /* Cards */
    body.page-upload-business-profile .bp-card{
        display: none;
    }

    body.page-upload-business-profile .bp-card.bp-active{
        display: block;
        animation: upload-business-profile--fadeIn .3s ease-out;
    }

    @keyframes upload-business-profile--fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body.page-upload-business-profile .bp-card-title{
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin: 0 0 1rem 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-upload-business-profile .bp-card-title i{
        font-size: .9rem;
    }

    /* Form Styles */
    body.page-upload-business-profile .bp-form-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    body.page-upload-business-profile .bp-form-group{
        display: flex;
        flex-direction: column;
    }

    body.page-upload-business-profile .bp-form-group.bp-full-width{
        grid-column: 1 / -1;
    }

    body.page-upload-business-profile .bp-form-label{
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
        margin-bottom: .375rem;
        font-size: .75rem;
        display: flex;
        align-items: center;
        gap: .375rem;
    }

    body.page-upload-business-profile .bp-form-label i{
        color: var(--brand-primary);
        font-size: .7rem;
    }

    body.page-upload-business-profile .bp-form-label .bp-required{
        color: #ef4444;
    }

    body.page-upload-business-profile .bp-form-control,
body.page-upload-business-profile .bp-form-select{
        width: 100%;
        padding: .625rem .875rem;
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        font-size: .75rem;
        font-family: var(--font-family-primary);
        transition: var(--fast);
        background: var(--surface-primary);
        color: var(--ink-700);
        outline: none;
        font-weight: var(--font-weight-medium);
    }

    body.page-upload-business-profile .bp-form-control:focus,
body.page-upload-business-profile .bp-form-select:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-upload-business-profile .bp-form-control::placeholder{
        color: var(--ink-400);
    }

    body.page-upload-business-profile textarea.bp-form-control{
        min-height: 80px;
        resize: vertical;
        line-height: 1.5;
    }

    body.page-upload-business-profile .bp-account-panel{
        background: rgba(2, 84, 45, 0.04);
        border: 1px solid rgba(2, 84, 45, 0.12);
        border-radius: .75rem;
        padding: 1rem;
    }

    body.page-upload-business-profile .bp-account-panel-header{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: .75rem;
        margin-bottom: .875rem;
        flex-wrap: wrap;
    }

    body.page-upload-business-profile .bp-account-panel-note{
        margin: .25rem 0 0 0;
        color: var(--ink-500);
        font-size: .72rem;
        line-height: 1.5;
    }

    body.page-upload-business-profile .bp-inline-link{
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        color: var(--brand-primary);
        text-decoration: none;
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        white-space: nowrap;
    }

    body.page-upload-business-profile .bp-inline-link:hover{
        color: var(--brand-secondary);
        text-decoration: underline;
    }

    body.page-upload-business-profile .bp-methods-manager{
        border: 1px solid var(--ink-200);
        border-radius: .75rem;
        padding: .875rem;
        background: var(--surface-secondary);
    }

    body.page-upload-business-profile .bp-methods-input-row{
        display: flex;
        align-items: stretch;
        gap: .625rem;
        flex-wrap: wrap;
    }

    body.page-upload-business-profile .bp-methods-input-row .bp-form-control{
        flex: 1 1 240px;
        min-width: 220px;
    }

    body.page-upload-business-profile .bp-chip-list{
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .875rem;
    }

    body.page-upload-business-profile .bp-chip-empty{
        margin-top: .875rem;
        color: var(--ink-500);
        font-size: .75rem;
        font-style: italic;
    }

    body.page-upload-business-profile .bp-chip{
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        border: 1px solid rgba(2, 84, 45, 0.12);
        border-radius: 999px;
        padding: .375rem .5rem .375rem .75rem;
        background: var(--surface-primary);
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    body.page-upload-business-profile .bp-chip-name{
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-700);
    }

    body.page-upload-business-profile .bp-chip-actions{
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

    body.page-upload-business-profile .bp-chip-btn{
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        border: 1px solid var(--ink-200);
        background: var(--surface-primary);
        color: var(--ink-600);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--fast);
        padding: 0;
    }

    body.page-upload-business-profile .bp-chip-btn:hover{
        border-color: var(--brand-primary);
        color: var(--brand-primary);
        transform: translateY(-1px);
    }

    body.page-upload-business-profile .bp-chip-btn.bp-chip-delete:hover{
        border-color: #ef4444;
        color: #ef4444;
    }

    /* Custom Dropdown */
    body.page-upload-business-profile .custom-dropdown{
        position: relative;
        width: 100%;

    }

    body.page-upload-business-profile .custom-dropdown.open{
        z-index: 100;
    }

    body.page-upload-business-profile .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        width: 100%;
        padding: .625rem .875rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-medium);
        font-size: .75rem;
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: var(--fast);
        outline: none;
    }

    body.page-upload-business-profile .dropdown-trigger:hover{
        border-color: var(--ink-300);
    }

    body.page-upload-business-profile .dropdown-trigger:focus,
body.page-upload-business-profile .dropdown-trigger.active{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.1);
    }

    body.page-upload-business-profile .dropdown-trigger .selected-text{
        flex: 1;
        text-align: left;
    }

    body.page-upload-business-profile .dropdown-trigger .selected-text.placeholder{
        color: var(--ink-400);
        min-height: 0;
        background: transparent;
        opacity: 1;
        cursor: inherit;
        vertical-align: initial;
    }

    body.page-upload-business-profile .dropdown-arrow{
        transition: transform .2s ease;
        color: var(--ink-500);
        font-size: .65rem;
    }

    body.page-upload-business-profile .dropdown-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-upload-business-profile .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: all .2s ease;
        max-height: 320px;
    }

    body.page-upload-business-profile .custom-dropdown .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
    }

    body.page-upload-business-profile .dropdown-search-wrap{
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface-primary);
        padding: .625rem;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .dropdown-search-box{
        position: relative;
    }

    body.page-upload-business-profile .dropdown-search-icon{
        position: absolute;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        font-size: .7rem;
        pointer-events: none;
    }

    body.page-upload-business-profile .dropdown-search-input{
        width: 100%;
        padding: .6rem .75rem .6rem 2rem;
        border: 1px solid var(--ink-200);
        border-radius: .45rem;
        font-size: .75rem;
        font-family: var(--font-family-primary);
        background: var(--surface-primary);
        color: var(--ink-700);
        outline: none;
    }

    body.page-upload-business-profile .dropdown-search-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.08);
    }

    body.page-upload-business-profile .dropdown-options-wrap{
        max-height: 250px;
        overflow-y: auto;
    }

    body.page-upload-business-profile .dropdown-options-wrap::-webkit-scrollbar{
        width: 6px;
    }

    body.page-upload-business-profile .dropdown-options-wrap::-webkit-scrollbar-thumb{
        background: var(--ink-300);
        border-radius: .375rem;
    }

    body.page-upload-business-profile .dropdown-options-wrap::-webkit-scrollbar-thumb:hover{
        background: var(--brand-primary);
    }

    body.page-upload-business-profile .dropdown-empty{
        display: none;
        padding: .75rem .875rem;
        font-size: .72rem;
        color: var(--ink-500);
        text-align: center;
    }

    body.page-upload-business-profile .dropdown-option[hidden]{
        display: none !important;
    }

    body.page-upload-business-profile .dropdown-option{
        display: flex;
        align-items: center;
        padding: .5rem .875rem;
        color: var(--ink-700);
        font-size: .75rem;
        font-weight: var(--font-weight-medium);
        cursor: pointer;
        transition: var(--fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-upload-business-profile .dropdown-option:hover{
        background: rgba(2, 84, 45, 0.06);
        color: var(--brand-primary);
    }

    body.page-upload-business-profile .dropdown-option.selected{
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
    }

    body.page-upload-business-profile select.bp-form-select.hidden-select{
        display: none;
    }

    /* Navigation Buttons */
    body.page-upload-business-profile .bp-nav-buttons{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .bp-btn{
        padding: .625rem 1.25rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .75rem;
        cursor: pointer;
        transition: var(--fast);
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        text-decoration: none;
    }

    body.page-upload-business-profile .bp-btn-primary{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-upload-business-profile .bp-btn-primary:hover{
        background: var(--brand-secondary);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    body.page-upload-business-profile .bp-btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border-color: var(--ink-200);
    }

    body.page-upload-business-profile .bp-btn-secondary:hover{
        background: rgba(2, 84, 45, 0.06);
        border-color: var(--brand-primary);
    }

    /* Error Handling */
    body.page-upload-business-profile .bp-error{
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }

    body.page-upload-business-profile .bp-error-text{
        color: #ef4444;
        font-size: .7rem;
        margin-top: .25rem;
        display: flex;
        align-items: center;
        gap: .25rem;
        font-weight: var(--font-weight-medium);
    }

    body.page-upload-business-profile .bp-step-error-summary{
        display: none;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: #991b1b;
        border-radius: .5rem;
        padding: .75rem 1rem;
        margin-bottom: 1rem;
        font-size: .75rem;
        font-weight: var(--font-weight-medium);
    }

    body.page-upload-business-profile .bp-step-error-summary.active{
        display: block;
    }

    /* Save Progress */
    body.page-upload-business-profile .bp-save-progress{
        position: fixed;
        bottom: 1.25rem;
        right: 1.25rem;
        padding: .75rem 1rem;
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-radius: .625rem;
        font-size: .8rem;
        z-index: 1000;
        display: none;
        align-items: center;
        gap: .5rem;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        font-weight: var(--font-weight-semibold);
    }

    body.page-upload-business-profile .bp-save-progress.active{
        display: flex;
    }

    body.page-upload-business-profile .bp-hidden{
        display: none !important;
    }

    /* Loading State */
    @keyframes upload-business-profile--fieldShimmer {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    body.page-upload-business-profile .form-loading .bp-form-control,
body.page-upload-business-profile .form-loading .bp-form-select,
body.page-upload-business-profile .form-loading .dropdown-trigger{
        pointer-events: none;
        color: transparent !important;
        background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 50%, var(--ink-100) 75%) !important;
        background-size: 200% 100%;
        animation: upload-business-profile--fieldShimmer 1.2s ease-in-out infinite;
    }

    /* FAQ Section */
    body.page-upload-business-profile .faq-header-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
        gap: .75rem;
    }

    body.page-upload-business-profile .faq-link-btn{
        background: var(--surface-primary);
        color: var(--brand-primary);
        padding: .5rem 1rem;
        border-radius: .5rem;
        text-decoration: none;
        font-size: .7rem;
        font-weight: var(--font-weight-semibold);
        transition: var(--fast);
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        border: 1px solid var(--brand-primary);
    }

    body.page-upload-business-profile .faq-link-btn:hover{
        background: var(--brand-primary);
        color: var(--surface-primary);
        text-decoration: none;
    }

    /* FAQ Add Card */
    body.page-upload-business-profile .faq-add-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    body.page-upload-business-profile .faq-add-card-header{
        background: var(--surface-secondary);
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--ink-200);
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-upload-business-profile .faq-add-card-header i{
        color: var(--brand-primary);
        font-size: .85rem;
    }

    body.page-upload-business-profile .faq-add-card-header h4{
        margin: 0;
        font-size: .8rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
    }

    body.page-upload-business-profile .faq-add-card-body{
        padding: 1rem;
    }

    /* FAQ Toggle Options */
    body.page-upload-business-profile .faq-toggle-row{
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px dashed var(--ink-200);
    }

    body.page-upload-business-profile .faq-toggle-item{
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-upload-business-profile .faq-toggle-item input[type="checkbox"]{
        width: 1.1rem;
        height: 1.1rem;
        cursor: pointer;
        accent-color: var(--brand-primary);
        border-radius: .25rem;
    }

    body.page-upload-business-profile .faq-toggle-item label{
        font-size: .75rem;
        color: var(--ink-700);
        cursor: pointer;
        margin: 0;
        font-weight: var(--font-weight-medium);
        display: flex;
        align-items: center;
        gap: .25rem;
    }

    body.page-upload-business-profile .faq-toggle-item label i{
        font-size: .7rem;
        color: var(--brand-primary);
    }

    /* FAQ Actions */
    body.page-upload-business-profile .faq-actions{
        display: flex;
        gap: .75rem;
        margin-top: 1rem;
        padding-top: .75rem;
        border-top: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .faq-actions .bp-btn{
        flex: 1;
        max-width: 180px;
    }

    body.page-upload-business-profile .bp-btn.btn-loading{
        pointer-events: none;
        opacity: 0.75;
        position: relative;
    }

    body.page-upload-business-profile .bp-btn.btn-loading .btn-text{
        visibility: hidden;
    }

    body.page-upload-business-profile .bp-btn.btn-loading .btn-spinner{
        display: inline-flex !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    body.page-upload-business-profile .btn-spinner{
        display: none !important;
    }

    /* Info Card */
    body.page-upload-business-profile .faq-info-card{
        background: rgba(2, 84, 45, 0.04);
        border: 1px solid rgba(2, 84, 45, 0.15);
        border-radius: .5rem;
        padding: .75rem 1rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
        gap: .625rem;
    }

    body.page-upload-business-profile .faq-info-card i{
        color: var(--brand-primary);
        font-size: .9rem;
        margin-top: .125rem;
    }

    body.page-upload-business-profile .faq-info-card p{
        margin: 0;
        font-size: .7rem;
        color: var(--ink-700);
        line-height: 1.5;
        font-weight: var(--font-weight-medium);
    }

    body.page-upload-business-profile .faq-info-card a{
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
        text-decoration: none;
    }

    body.page-upload-business-profile .faq-info-card a:hover{
        text-decoration: underline;
    }

    body.page-upload-business-profile .bp-form-check{
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-top: .5rem;
    }

    body.page-upload-business-profile .bp-form-check input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        accent-color: var(--brand-primary);
    }

    body.page-upload-business-profile .bp-form-check label{
        font-size: .75rem;
        color: var(--ink-600);
        cursor: pointer;
        margin: 0;
        font-weight: var(--font-weight-medium);
    }

    /* Toggle Checkbox */
    body.page-upload-business-profile .toggle-checkbox-wrapper{
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .625rem .875rem;
        background: var(--surface-secondary);
        border-radius: .5rem;
        border: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .toggle-checkbox-wrapper:hover{
        background: rgba(2, 84, 45, 0.04);
        border-color: var(--ink-300);
    }

    body.page-upload-business-profile .toggle-checkbox-wrapper input[type="checkbox"]{
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        accent-color: var(--brand-primary);
    }

    body.page-upload-business-profile .toggle-checkbox-label{
        color: var(--ink-700);
        font-size: .75rem;
        font-weight: var(--font-weight-medium);
        cursor: pointer;
    }

    body.page-upload-business-profile .bp-svc-info-icon{
        color: var(--ink-400);
        font-size: .8rem;
        cursor: help;
        margin-left: auto;
        flex-shrink: 0;
    }

    body.page-upload-business-profile .bp-svc-info-icon:hover{
        color: var(--brand-primary);
    }

    /* Services Grid */
    body.page-upload-business-profile .bp-services-description{
        font-size: .75rem;
        color: var(--ink-500);
        margin: 0 0 .75rem 0;
    }

    body.page-upload-business-profile .bp-services-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .5rem;
    }

    /* ============= CUSTOM TIME PICKER ============= */
    body.page-upload-business-profile .custom-time-picker{
        position: relative;
        width: 100%;
    }

    /* Trigger Button - Normal State */
    body.page-upload-business-profile .time-picker-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        width: 100%;
        padding: .625rem .875rem;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        color: var(--ink-700);
        font-weight: var(--font-weight-medium);
        font-size: .75rem;
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: all .2s ease;
        outline: none;
    }

    /* Trigger Button - Hover State */
    body.page-upload-business-profile .time-picker-trigger:hover{
        border-color: var(--brand-primary);
        background: rgba(2, 84, 45, 0.03);
    }

    body.page-upload-business-profile .time-picker-trigger:hover .time-icon{
        transform: scale(1.1);
    }

    body.page-upload-business-profile .time-picker-trigger:hover .dropdown-arrow{
        color: var(--brand-primary);
    }

    /* Trigger Button - Focus/Active State */
    body.page-upload-business-profile .time-picker-trigger:focus,
body.page-upload-business-profile .time-picker-trigger.active{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
        background: rgba(2, 84, 45, 0.04);
    }

    /* Time Display */
    body.page-upload-business-profile .time-picker-trigger .time-display{
        flex: 1;
        text-align: left;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    body.page-upload-business-profile .time-picker-trigger .time-display.placeholder{
        color: var(--ink-400);
        min-height: 0;
        background: transparent;
        opacity: 1;
        cursor: inherit;
        vertical-align: initial;
    }

    /* When time is selected, show it prominently */
    body.page-upload-business-profile .time-picker-trigger .time-display:not(.placeholder){
        color: var(--brand-primary);
        font-weight: var(--font-weight-semibold);
    }

    /* Clock Icon */
    body.page-upload-business-profile .time-picker-trigger .time-icon{
        color: var(--brand-primary);
        font-size: .8rem;
        transition: transform .2s ease;
    }

    /* Dropdown Arrow */
    body.page-upload-business-profile .time-picker-trigger .dropdown-arrow{
        transition: all .2s ease;
        color: var(--ink-400);
        font-size: .65rem;
    }

    body.page-upload-business-profile .time-picker-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
        color: var(--brand-primary);
    }

    /* Dropdown Panel */
    body.page-upload-business-profile .time-picker-dropdown{
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        z-index: 1000;
        padding: 1rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all .2s ease;
    }

    body.page-upload-business-profile .time-picker-dropdown.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Dropdown Header */
    body.page-upload-business-profile .time-picker-dropdown::before{
        content: "Select Time";
        display: block;
        font-size: .65rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .75rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--ink-200);
        text-align: center;
    }

    /* Time Selects Container */
    body.page-upload-business-profile .time-picker-selects{
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: .375rem;
        padding: .5rem;
        background: var(--surface-secondary);
        border-radius: .5rem;
        border: 1px solid var(--ink-200);
    }

    /* Select Wrapper */
    body.page-upload-business-profile .time-picker-select-wrapper{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
    }

    body.page-upload-business-profile .time-choice-list-hours-wrap{
        width: 6.7rem;
    }

    body.page-upload-business-profile .time-choice-list-minutes-wrap{
        width: 4.4rem;
    }

    body.page-upload-business-profile .time-choice-list-periods-wrap{
        width: 3.35rem;
    }

    /* Select Labels */
    body.page-upload-business-profile .time-picker-label{
        font-size: .55rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .375rem;
        text-align: center;
    }

    body.page-upload-business-profile .time-picker-native-select{
        display: none !important;
    }

    body.page-upload-business-profile .time-choice-list{
        display: grid;
        gap: .25rem;
    }

    body.page-upload-business-profile .time-choice-list-hours{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.page-upload-business-profile .time-choice-list-minutes{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-upload-business-profile .time-choice-list-periods{
        grid-template-columns: 1fr;
    }

    body.page-upload-business-profile .time-choice-option{
        height: 1.9rem;
        min-width: 0;
        padding: 0 .2rem;
        border: 1px solid rgba(2, 84, 45, .14);
        border-radius: .38rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-family: var(--font-family-primary);
        font-size: .72rem;
        font-weight: var(--font-weight-bold);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

    body.page-upload-business-profile .time-choice-option:hover,
body.page-upload-business-profile .time-choice-option:focus-visible{
        border-color: rgba(2, 84, 45, .34);
        background: rgba(2, 84, 45, .06);
        color: var(--brand-primary);
        outline: none;
    }

    body.page-upload-business-profile .time-choice-option.is-selected{
        border-color: var(--brand-primary);
        background: var(--brand-primary);
        color: var(--surface-primary);
        box-shadow: 0 8px 16px -14px rgba(2, 84, 45, .72);
    }

    /* Hour & Minute Selects */
    body.page-upload-business-profile .time-picker-select{
        width: 58px;
        padding: .5rem .375rem;
        border: 1px solid var(--ink-200);
        border-radius: .375rem;
        font-size: .85rem;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family-primary);
        text-align: center;
        background: var(--surface-primary);
        color: var(--ink-700);
        cursor: pointer;
        transition: all .15s ease;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    body.page-upload-business-profile .time-picker-select:hover{
        border-color: var(--brand-primary);
        background: rgba(2, 84, 45, 0.04);
    }

    body.page-upload-business-profile .time-picker-select:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
        outline: none;
        background: var(--surface-primary);
    }

    /* Separator : */
    body.page-upload-business-profile .time-picker-separator{
        font-size: 1.5rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        padding: 0 .125rem;
        line-height: 1;
        margin-top: 1.68rem;
    }

    /* AM/PM Period Select */
    body.page-upload-business-profile .time-picker-period{
        width: 52px;
        padding: .5rem .25rem;
        border: 1px solid var(--ink-200);
        border-radius: .375rem;
        font-size: .7rem;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family-primary);
        text-align: center;
        background: var(--surface-primary);
        color: var(--ink-700);
        cursor: pointer;
        transition: all .15s ease;
        text-transform: uppercase;
    }

    body.page-upload-business-profile .time-picker-period:hover{
        border-color: var(--brand-primary);
        background: rgba(2, 84, 45, 0.04);
    }

    body.page-upload-business-profile .time-picker-period:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.12);
        outline: none;
    }

    /* Action Buttons */
    body.page-upload-business-profile .time-picker-actions{
        display: flex;
        gap: .5rem;
        margin-top: .875rem;
        padding-top: .75rem;
        border-top: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .time-picker-btn{
        flex: 1;
        padding: .5rem .75rem;
        border-radius: .5rem;
        font-size: .7rem;
        font-weight: var(--font-weight-semibold);
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: all .15s ease;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
    }

    /* Cancel Button */
    body.page-upload-business-profile .time-picker-btn-cancel{
        background: var(--surface-primary);
        color: var(--ink-600);
        border-color: var(--ink-200);
    }

    body.page-upload-business-profile .time-picker-btn-cancel:hover{
        background: var(--ink-100);
        border-color: var(--ink-300);
        color: var(--ink-700);
    }

    /* Apply Button */
    body.page-upload-business-profile .time-picker-btn-apply{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-upload-business-profile .time-picker-btn-apply:hover{
        background: var(--brand-secondary);
        border-color: var(--brand-secondary);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(2, 84, 45, 0.2);
    }

    /* Hide original time input */
    body.page-upload-business-profile .custom-time-picker input[type="time"].hidden-time-input{
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    /* ============= SHIPPING SECTION ============= */
    body.page-upload-business-profile .shipping-general-settings{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        padding: 1rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    body.page-upload-business-profile .shipping-general-settings h4{
        font-size: .875rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        margin: 0 0 1rem 0;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .shipping-general-settings h4 i{
        font-size: .8rem;
    }

    body.page-upload-business-profile .info-helper-text{
        font-size: .65rem;
        color: var(--ink-500);
        margin-top: .25rem;
        display: flex;
        align-items: flex-start;
        gap: .25rem;
        font-weight: var(--font-weight-medium);
        line-height: 1.4;
    }

    body.page-upload-business-profile .info-helper-text i{
        font-size: .6rem;
        color: var(--brand-primary);
        margin-top: .125rem;
    }

    /* Volumetric Grid */
    body.page-upload-business-profile .volumetric-divisor-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: .75rem;
        margin-top: .5rem;
    }

    body.page-upload-business-profile .volumetric-item{
        display: flex;
        flex-direction: column;
    }

    body.page-upload-business-profile .volumetric-label{
        font-size: .65rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-600);
        margin-bottom: .25rem;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    /* Shipping Section Headers */
    body.page-upload-business-profile .shipping-section-header{
        display: flex;
        align-items: center;
        gap: .625rem;
        margin: 1.25rem 0 .875rem 0;
        padding: .75rem 1rem;
        background: var(--surface-secondary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
    }

    body.page-upload-business-profile .shipping-section-header i{
        font-size: 1.1rem;
        color: var(--brand-primary);
    }

    body.page-upload-business-profile .shipping-section-header h3{
        margin: 0;
        font-size: .875rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-800);
    }

    /* Section Description */
    body.page-upload-business-profile .section-description{
        background: rgba(2, 84, 45, 0.04);
        padding: .625rem .875rem;
        border-radius: .5rem;
        margin-bottom: .875rem;
        border-left: 3px solid var(--brand-primary);
    }

    body.page-upload-business-profile .section-description p{
        margin: 0;
        font-size: .7rem;
        font-weight: var(--font-weight-medium);
        color: var(--ink-700);
        display: flex;
        align-items: center;
        gap: .375rem;
        line-height: 1.4;
    }

    body.page-upload-business-profile .section-description p i{
        color: var(--brand-primary);
        font-size: .75rem;
    }

    /* Section Actions */
    body.page-upload-business-profile .section-actions{
        margin-top: .75rem;
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }

    /* Box Configuration */
    body.page-upload-business-profile .shipping-box-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: .875rem;
        margin-bottom: .875rem;
    }

    body.page-upload-business-profile .box-config-card{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        padding: .875rem;
        position: relative;
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
        transition: var(--fast);
    }

    body.page-upload-business-profile .box-config-card:hover{
        border-color: var(--ink-300);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    body.page-upload-business-profile .box-header-section{
        text-align: center;
        margin-bottom: .625rem;
        padding-bottom: .5rem;
        border-bottom: 1px dashed var(--ink-200);
    }

    body.page-upload-business-profile .box-header-label{
        font-size: .6rem;
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: .25rem;
        font-weight: var(--font-weight-semibold);
        display: block;
    }

    body.page-upload-business-profile .box-name-input{
        width: 100%;
        padding: .375rem .625rem;
        border: 1px solid var(--ink-200);
        border-radius: .375rem;
        font-size: .8rem;
        font-weight: var(--font-weight-bold);
        text-align: center;
        color: var(--brand-primary);
        background: var(--surface-primary);
        font-family: var(--font-family-primary);
    }

    body.page-upload-business-profile .box-name-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.1);
        outline: none;
    }

    /* Dimensions */
    body.page-upload-business-profile .box-dimensions-wrapper{
        margin-bottom: .625rem;
    }

    body.page-upload-business-profile .box-dimensions-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .375rem;
    }

    body.page-upload-business-profile .box-dimension-item{
        display: flex;
        flex-direction: column;
    }

    body.page-upload-business-profile .box-dimension-label{
        font-size: .55rem;
        color: var(--ink-600);
        font-weight: var(--font-weight-semibold);
        margin-bottom: .125rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        display: flex;
        align-items: center;
        gap: .125rem;
    }

    body.page-upload-business-profile .box-dimension-label i{
        font-size: .5rem;
        color: var(--brand-primary);
    }

    body.page-upload-business-profile .box-dimension-input{
        padding: .375rem .25rem;
        border: 1px solid var(--ink-200);
        border-radius: .375rem;
        font-size: .75rem;
        text-align: center;
        font-weight: var(--font-weight-semibold);
        font-family: var(--font-family-primary);
        background: var(--surface-primary);
        color: var(--ink-700);
        width: 100%;
    }

    body.page-upload-business-profile .box-dimension-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.1);
        outline: none;
    }

    /* Weight & Price */
    body.page-upload-business-profile .box-weight-price-wrapper{
        background: var(--surface-secondary);
        border-radius: .375rem;
        padding: .625rem;
    }

    body.page-upload-business-profile .box-weight-price-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .375rem;
    }

    body.page-upload-business-profile .box-field-group{
        display: flex;
        flex-direction: column;
    }

    body.page-upload-business-profile .box-field-label{
        font-size: .55rem;
        font-weight: var(--font-weight-semibold);
        color: var(--ink-600);
        margin-bottom: .125rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        display: flex;
        align-items: center;
        gap: .125rem;
    }

    body.page-upload-business-profile .box-field-label i{
        font-size: .55rem;
        color: var(--brand-primary);
    }

    body.page-upload-business-profile .box-field-input{
        padding: .375rem .5rem;
        border: 1px solid var(--ink-200);
        border-radius: .375rem;
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        font-family: var(--font-family-primary);
        background: var(--surface-primary);
        color: var(--ink-700);
        width: 100%;
    }

    body.page-upload-business-profile .box-field-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.1);
        outline: none;
    }

    /* Remove Button */
    body.page-upload-business-profile .box-remove-btn{
        width: 100%;
        margin-top: .625rem;
        background: var(--surface-primary);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
        padding: .375rem;
        border-radius: .375rem;
        font-weight: var(--font-weight-semibold);
        font-size: .65rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        font-family: var(--font-family-primary);
        transition: var(--fast);
    }

    body.page-upload-business-profile .box-remove-btn:hover{
        background: #ef4444;
        color: var(--surface-primary);
        border-color: #ef4444;
    }

    /* Add Button */
    body.page-upload-business-profile #addBoxBtn,
body.page-upload-business-profile #addSlabBtn{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1px dashed var(--brand-primary);
        padding: .5rem .875rem;
        border-radius: .5rem;
        font-weight: var(--font-weight-semibold);
        font-size: .7rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        font-family: var(--font-family-primary);
        transition: var(--fast);
    }

    body.page-upload-business-profile #addBoxBtn:hover,
body.page-upload-business-profile #addSlabBtn:hover{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-style: solid;
    }

    /* Empty State */
    body.page-upload-business-profile .box-empty-state{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 1rem;
        background: var(--surface-secondary);
        border: 1px dashed var(--ink-300);
        border-radius: .625rem;
        text-align: center;
        grid-column: 1 / -1;
    }

    body.page-upload-business-profile .box-empty-state i{
        font-size: 1.5rem;
        color: var(--ink-400);
        margin-bottom: .5rem;
    }

    body.page-upload-business-profile .box-empty-state-title{
        font-size: .8rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-700);
        margin-bottom: .25rem;
    }

    body.page-upload-business-profile .box-empty-state-text{
        font-size: .7rem;
        color: var(--ink-500);
        margin: 0;
    }

    /* Slab Pricing */
    body.page-upload-business-profile .slab-table-wrapper{
        overflow-x: auto;
        margin-bottom: .75rem;
        border-radius: .5rem;
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
        border: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .slab-pricing-table{
        width: 100%;
        border-collapse: collapse;
        background: var(--surface-primary);
    }

    body.page-upload-business-profile .slab-pricing-table thead{
        background: var(--brand-primary);
    }

    body.page-upload-business-profile .slab-pricing-table th{
        padding: .75rem 1rem;
        text-align: left;
        font-weight: var(--font-weight-semibold);
        font-size: .72rem;
        letter-spacing: .045em;
        text-transform: uppercase;
        color: #fff;
        border-bottom: none;
        white-space: nowrap;
        vertical-align: middle;
    }

    body.page-upload-business-profile .slab-pricing-table tbody tr{
        border-bottom: 1px solid var(--ink-200);
    }

    body.page-upload-business-profile .slab-pricing-table tbody tr:hover{
        background: rgba(2, 84, 45, 0.02);
    }

    body.page-upload-business-profile .slab-pricing-table td{
        padding: .75rem 1rem;
        font-size: .8125rem;
        vertical-align: middle;
    }

    body.page-upload-business-profile .slab-number{
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        font-size: .8rem;
        background: rgba(2, 84, 45, 0.08);
        width: 1.5rem;
        height: 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .375rem;
    }

    body.page-upload-business-profile .slab-input{
        width: 100%;
        padding: .375rem .5rem;
        border: 1px solid var(--ink-200);
        border-radius: .375rem;
        font-size: .75rem;
        font-weight: var(--font-weight-semibold);
        font-family: var(--font-family-primary);
        background: var(--surface-primary);
    }

    body.page-upload-business-profile .slab-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.1);
        outline: none;
    }

    body.page-upload-business-profile .slab-empty-state{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: 1rem .75rem;
        background: var(--surface-secondary);
        border-top: 1px dashed var(--ink-200);
        color: var(--ink-500);
        font-size: .7rem;
        font-weight: var(--font-weight-medium);
    }

    body.page-upload-business-profile .slab-empty-state i{
        font-size: .875rem;
        color: var(--ink-400);
    }

    body.page-upload-business-profile .slab-remove-btn{
        background: var(--surface-primary);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.2);
        padding: .25rem .5rem;
        border-radius: .375rem;
        font-weight: var(--font-weight-semibold);
        font-size: .65rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        font-family: var(--font-family-primary);
        transition: var(--fast);
    }

    body.page-upload-business-profile .slab-remove-btn:hover{
        background: #ef4444;
        color: var(--surface-primary);
        border-color: #ef4444;
    }

    /* Extra KG Pricing */
    body.page-upload-business-profile .extra-kg-pricing{
        background: rgba(245, 158, 11, 0.06);
        padding: .875rem;
        border-radius: .625rem;
        border: 1px solid rgba(245, 158, 11, 0.2);
        margin-top: 1rem;
    }

    body.page-upload-business-profile .extra-kg-pricing .bp-form-label{
        color: #92400e;
        font-size: .75rem;
        margin-bottom: .5rem;
    }

    body.page-upload-business-profile .extra-kg-pricing .bp-form-control{
        border-color: rgba(245, 158, 11, 0.3);
    }

    body.page-upload-business-profile .extra-kg-pricing .bp-form-control:focus{
        border-color: #f59e0b;
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
    }

    body.page-upload-business-profile .extra-kg-pricing .info-helper-text{
        background: rgba(255, 255, 255, 0.7);
        padding: .5rem .75rem;
        border-radius: .375rem;
        margin-top: .5rem;
        color: #78350f;
        border-left: 2px solid #f59e0b;
    }

    /* ============= RESPONSIVE ============= */
    @media (max-width: 991px) {
        body.page-upload-business-profile .bp-container{
            flex-direction: column;
            padding: .75rem;
            gap: .75rem;
        }

        body.page-upload-business-profile .bp-sidebar{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: auto;
            height: auto;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 1000;
            transform: translateY(-100%);
            transition: transform .3s ease;
            border-radius: 0 0 .875rem .875rem;
        }

        body.page-upload-business-profile .bp-sidebar.bp-sidebar-open{
            display: block;
            transform: translateY(0);
        }

        body.page-upload-business-profile .bp-mobile-header{
            display: flex;
        }

        body.page-upload-business-profile .bp-mobile-overlay.bp-overlay-active{
            display: block;
            opacity: 1;
        }

        body.page-upload-business-profile .bp-main{
            max-height: calc(100vh - 100px);
            padding: 1rem;
        }

        body.page-upload-business-profile .bp-nav-buttons{
            flex-direction: column;
            gap: .75rem;
        }

        body.page-upload-business-profile .bp-btn{
            width: 100%;
            justify-content: center;
        }

        body.page-upload-business-profile .bp-form-grid{
            grid-template-columns: 1fr;
        }

        body.page-upload-business-profile .shipping-box-grid{
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 575px) {
        body.page-upload-business-profile .bp-methods-input-row{
            flex-direction: column;
        }
    }

    @media (max-width: 575px) {
        body.page-upload-business-profile .bp-container{
            padding: .5rem;
        }

        body.page-upload-business-profile .bp-main{
            padding: .75rem;
        }

        body.page-upload-business-profile .box-dimensions-grid{
            grid-template-columns: repeat(3, 1fr);
        }

        body.page-upload-business-profile .box-weight-price-grid{
            grid-template-columns: 1fr 1fr;
        }
    }
    body.page-upload-business-profile .extra-settings-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.65rem; }
    body.page-upload-business-profile .extra-setting-card{ min-width:0; position:relative; border:1px solid var(--ink-200); border-radius:.75rem; padding:.75rem; background:var(--surface-primary); color:var(--ink-700); transition:border-color .18s ease,box-shadow .18s ease; }
    body.page-upload-business-profile .extra-setting-card:hover{ border-color:var(--ink-300); box-shadow:var(--shadow-sm,0 2px 8px rgba(60,64,67,.08)); }
    body.page-upload-business-profile .extra-setting-card:nth-child(1){grid-column:span 8}body.page-upload-business-profile .extra-setting-card:nth-child(2){grid-column:span 4}body.page-upload-business-profile .extra-setting-card:nth-child(3){grid-column:span 12}body.page-upload-business-profile .extra-setting-card:nth-child(4),
body.page-upload-business-profile .extra-setting-card:nth-child(5){grid-column:span 6}
    body.page-upload-business-profile .extra-setting-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.55rem; min-height:1.9rem; }
    body.page-upload-business-profile .extra-setting-title{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; font-weight:750; color:var(--ink-800); margin:0; }
    body.page-upload-business-profile .extra-setting-title i{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:50%; color:var(--brand-primary); background:var(--wb-brand-soft,rgba(2,84,45,.08)); font-size:.7rem; }
    body.page-upload-business-profile .extra-helper-text{ display:flex; align-items:flex-start; gap:.35rem; margin:.35rem 0 0 2.3rem; max-width:36rem; color:var(--ink-500); font-size:.68rem; font-weight:600; line-height:1.45; }
    body.page-upload-business-profile #extraBookingHours{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; }
    body.page-upload-business-profile .extra-hours-row{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem; align-items:center; padding:.45rem; border:1px solid var(--ink-200); border-radius:.55rem; background:var(--surface-secondary); }
    body.page-upload-business-profile .extra-hours-row .extra-hours-day{ grid-column:1/-1; }
    body.page-upload-business-profile .extra-hours-row .bp-form-control{ min-width:0; height:2rem; padding:.3rem .35rem; font-size:.68rem; }
    /* WZ-176: extra scheduling times use compact themed pickers backed by time inputs.
       The wrapper carries the Opens/Closes/Start/End caption while the visible trigger
       stays aligned with the Business Profile form controls. */
    body.page-upload-business-profile .extra-time-field{ display:flex; flex-direction:column; gap:.18rem; min-width:0; }
    body.page-upload-business-profile .extra-time-field-label{ color:var(--ink-500); font-size:.6rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
    body.page-upload-business-profile .extra-time-input{ width:100%; min-width:0; height:2.1rem; padding:.3rem .45rem; font-size:.72rem; font-variant-numeric:tabular-nums; }
    body.page-upload-business-profile .extra-time-input::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.55; transition:opacity .15s ease; }
    body.page-upload-business-profile .extra-time-input:hover::-webkit-calendar-picker-indicator{ opacity:1; }
    body.page-upload-business-profile .extra-hours-row .extra-time-input{ height:2rem; font-size:.68rem; }
    body.page-upload-business-profile .extra-hours-row .custom-dropdown .dropdown-trigger{ min-height:2rem; padding:.3rem .45rem; font-size:.68rem; border-radius:.45rem; }
    body.page-upload-business-profile .extra-hours-row .custom-dropdown .dropdown-menu{ min-width:8rem; max-height:13rem; }
    body.page-upload-business-profile .extra-hours-row .dropdown-options-wrap{ max-height:12rem; }
    body.page-upload-business-profile .extra-quick-divider{ height:1px; margin:.7rem 0; background:var(--ink-200); }
    body.page-upload-business-profile .extra-quick-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:2rem; }
    body.page-upload-business-profile .extra-repeat-row{ display:grid; grid-template-columns:90px minmax(90px,1fr) minmax(90px,1fr) auto; gap:.4rem; align-items:center; margin-top:.35rem; padding:.35rem; border-radius:.55rem; }
    body.page-upload-business-profile .extra-repeat-row:hover{ background:var(--ink-50); }
    /* extra-staff-row only has 3 children (name, checkboxes, button), so it
       doesn't fill the 4-column .extra-repeat-row grid meant for blackout
       rows — the button was landing in a flexible 1fr track and stretching
       to fill it. Give it its own template with a content-sized last column
       and a fixed small square button instead. */
    body.page-upload-business-profile .extra-staff-row{ grid-template-columns:minmax(90px,200px) 1fr auto; }
    body.page-upload-business-profile .extra-staff-row>.extra-mini-btn{ width:2.1rem; height:2.1rem; padding:0; display:grid; place-items:center; justify-self:center; }
    body.page-upload-business-profile .extra-hours-day{ display:flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:600; }
    body.page-upload-business-profile .extra-repeat-list:empty::after{ content:"No items"; display:grid; place-items:center; min-height:2.25rem; color:var(--ink-400); font-size:.68rem; border:1px dashed var(--ink-200); border-radius:.55rem; background:var(--surface-secondary); }
    body.page-upload-business-profile #extraStaffTiers:empty::after{ content:"No staff tiers yet. Click Add to create one."; }
    body.page-upload-business-profile .extra-mini-btn{ border:1px solid rgba(2,84,45,.18); background:rgba(2,84,45,.06); color:var(--brand-primary); border-radius:.55rem; padding:.48rem .7rem; font-size:.7rem; font-weight:700; cursor:pointer; transition:all .2s; }
    body.page-upload-business-profile .extra-mini-btn:hover{ color:#fff; border-color:var(--brand-primary); background:var(--brand-primary); box-shadow:0 4px 10px rgba(2,84,45,.18); }
    body.page-upload-business-profile .extra-mini-btn.danger{ color:#dc2626; padding:.4rem .55rem; }
    body.page-upload-business-profile .extra-mini-btn.danger:hover{ color:#fff; border-color:#dc2626; background:#dc2626; box-shadow:none; }
    body.page-upload-business-profile .extra-inline-checks{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.45rem 0; }
    body.page-upload-business-profile .extra-inline-checks label{ font-size:.66rem; display:flex; gap:.25rem; align-items:center; padding:.28rem .4rem; border:1px solid var(--ink-200); border-radius:999px; background:var(--surface-secondary); color:var(--ink-700); cursor:pointer; }
    body.page-upload-business-profile .extra-staff-days-label{ display:inline-flex; align-items:center; min-height:1.75rem; margin-right:.15rem; color:var(--ink-500); font-size:.64rem; font-weight:800; text-transform:uppercase; white-space:nowrap; }
    body.page-upload-business-profile .extra-switch{ display:inline-flex; align-items:center; gap:.45rem; color:var(--ink-500); font-size:.68rem; font-weight:700; cursor:pointer; }
    body.page-upload-business-profile .extra-switch input{ appearance:none; width:2.1rem; height:1.15rem; margin:0; border-radius:999px; background:var(--ink-300); position:relative; transition:.2s; }
    body.page-upload-business-profile .extra-switch input::after{ content:""; position:absolute; width:.83rem; height:.83rem; left:.16rem; top:.16rem; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s; }
    body.page-upload-business-profile .extra-switch input:checked{ background:var(--brand-primary); }
    body.page-upload-business-profile .extra-switch input:checked::after{ transform:translateX(.95rem); }
    body.page-upload-business-profile .extra-card-body{ transition:opacity .2s,filter .2s; }
    body.page-upload-business-profile .extra-card-body.is-disabled{ opacity:.38; filter:grayscale(.35); pointer-events:none; }
    html[data-theme="dark"] body.page-upload-business-profile .extra-setting-card{ background:var(--wb-surface); border-color:var(--wb-border); box-shadow:none; }
    html[data-theme="dark"] body.page-upload-business-profile .extra-setting-card:hover{ border-color:var(--wb-border-strong); box-shadow:var(--wb-shadow-sm); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-setting-title i{ color:var(--brand-accent); background:var(--wb-brand-soft-2); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-helper-text,
html[data-theme="dark"] body.page-upload-business-profile .extra-time-field-label,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-days-label{ color:var(--wb-muted); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-hours-row,
html[data-theme="dark"] body.page-upload-business-profile .extra-inline-checks label,
html[data-theme="dark"] body.page-upload-business-profile .extra-repeat-list:empty::after,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-row{ background:var(--wb-surface-soft); border-color:var(--wb-border); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-repeat-row:hover{ background:var(--ink-50); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-mini-btn{ color:var(--brand-accent); background:var(--wb-brand-soft-2); border-color:rgba(156,252,203,.2); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-mini-btn:hover{ color:#fff; background:var(--brand-light); border-color:var(--brand-light); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-mini-btn.danger{ color:#f87171; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.25); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-mini-btn.danger:hover{ color:#fff; background:#dc2626; border-color:#dc2626; }
    html[data-theme="dark"] body.page-upload-business-profile .extra-switch input:checked{ background:#0d7a43; }
    html[data-theme="dark"] body.page-upload-business-profile .extra-quick-divider{ background:var(--wb-border); }
    html[data-theme="dark"] body.page-upload-business-profile .extra-setting-card :is(input,select){ color-scheme:dark; }
    html[data-theme="light"] body.page-upload-business-profile .extra-setting-card :is(input,select){ color-scheme:light; }
    @media(max-width:1100px){body.page-upload-business-profile #extraBookingHours{grid-template-columns:repeat(2,minmax(0,1fr))}body.page-upload-business-profile .extra-setting-card:nth-child(n){grid-column:span 6}body.page-upload-business-profile .extra-setting-card:nth-child(1),
body.page-upload-business-profile .extra-setting-card:nth-child(3){grid-column:span 12}}
    @media(max-width:767px){
        body.page-upload-business-profile .extra-settings-grid{grid-template-columns:1fr;gap:.5rem}
        body.page-upload-business-profile .extra-setting-card:nth-child(n){grid-column:1}
        body.page-upload-business-profile .extra-hours-row,
body.page-upload-business-profile .extra-repeat-row:not(.extra-staff-row),
body.page-upload-business-profile .extra-repeat-row:not(.extra-staff-row)[style]{grid-template-columns:1fr 1fr!important}
        body.page-upload-business-profile .extra-hours-day{grid-column:1/-1}
        body.page-upload-business-profile .extra-setting-head{align-items:center}
        body.page-upload-business-profile .extra-setting-card{padding:.65rem}
        body.page-upload-business-profile .extra-staff-row,
body.page-upload-business-profile .extra-staff-row[style]{display:grid!important;grid-template-columns:minmax(0,1fr) 2rem!important;gap:.35rem!important;align-items:center;margin:.35rem 0 0;padding:.45rem;background:var(--surface-secondary);border:1px solid var(--ink-200)}
        body.page-upload-business-profile .extra-staff-row .staff-tier-name{grid-column:1;grid-row:1;height:2.1rem;min-width:0}
        body.page-upload-business-profile .extra-staff-row>.extra-inline-checks{grid-column:1/-1;grid-row:2;margin:.05rem 0;gap:.25rem}
        body.page-upload-business-profile .extra-staff-row>.extra-mini-btn{grid-column:2;grid-row:1;width:2rem;height:2rem;padding:0!important;display:grid;place-items:center}
        body.page-upload-business-profile .extra-staff-row .extra-inline-checks label{padding:.2rem .35rem;font-size:.62rem}
    }

    /* Extra info scheduling polish */
    body.page-upload-business-profile .extra-settings-grid{
        align-items:start;
    }

    body.page-upload-business-profile .extra-setting-card{
        border-color:rgba(2,84,45,.12);
        background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,249,.96));
        box-shadow:0 14px 30px -28px rgba(15,23,42,.42);
        overflow:visible;
    }

    body.page-upload-business-profile .extra-setting-card:hover{
        border-color:rgba(2,84,45,.22);
        box-shadow:0 18px 32px -30px rgba(15,23,42,.48);
    }

    body.page-upload-business-profile .extra-setting-card:has(.time-picker-dropdown.show){
        z-index:30;
    }

    body.page-upload-business-profile .extra-setting-head{
        align-items:flex-start;
        padding-bottom:.55rem;
        border-bottom:1px solid rgba(2,84,45,.08);
    }

    body.page-upload-business-profile .extra-setting-title{
        color:var(--ink-800);
        letter-spacing:0;
    }

    body.page-upload-business-profile .extra-setting-title i{
        border-radius:.55rem;
        background:rgba(2,84,45,.08);
        box-shadow:inset 0 0 0 1px rgba(2,84,45,.06);
    }

    body.page-upload-business-profile #extraLunchBody{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:.55rem;
        margin-bottom:.25rem;
    }

    body.page-upload-business-profile #extraBookingHours{
        gap:.55rem;
    }

    body.page-upload-business-profile .extra-hours-row,
body.page-upload-business-profile .extra-staff-row,
body.page-upload-business-profile .extra-repeat-row{
        border:1px solid rgba(2,84,45,.11);
        background:rgba(2,84,45,.035);
    }

    body.page-upload-business-profile .extra-hours-row:hover,
body.page-upload-business-profile .extra-staff-row:hover,
body.page-upload-business-profile .extra-repeat-row:hover{
        background:rgba(2,84,45,.06);
        border-color:rgba(2,84,45,.18);
    }

    body.page-upload-business-profile .extra-hours-day{
        min-height:1.45rem;
        color:var(--ink-700);
    }

    body.page-upload-business-profile .extra-time-field{
        gap:.28rem;
    }

    body.page-upload-business-profile .extra-time-field-label{
        color:var(--brand-primary);
        font-size:.58rem;
        line-height:1;
        letter-spacing:0;
    }

    body.page-upload-business-profile .extra-compact-time-picker{
        position:relative;
        width:100%;
        min-width:0;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-trigger{
        min-height:2.12rem;
        padding:.35rem .5rem;
        border-radius:.5rem;
        border-color:rgba(2,84,45,.16);
        background:var(--surface-primary);
        box-shadow:0 1px 2px rgba(15,23,42,.04);
        font-size:.68rem;
        line-height:1.15;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-trigger:hover{
        border-color:rgba(2,84,45,.34);
        background:rgba(2,84,45,.04);
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-trigger:focus,
body.page-upload-business-profile .extra-compact-time-picker .time-picker-trigger.active{
        border-color:var(--brand-primary);
        box-shadow:0 0 0 3px rgba(2,84,45,.1);
        background:var(--surface-primary);
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-display{
        min-width:0;
        gap:.35rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-variant-numeric:tabular-nums;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-icon{
        width:1.1rem;
        height:1.1rem;
        display:inline-grid;
        place-items:center;
        border-radius:.35rem;
        background:rgba(2,84,45,.08);
        flex:0 0 auto;
        font-size:.62rem;
    }

    body.page-upload-business-profile .extra-compact-time-picker .dropdown-arrow{
        flex:0 0 auto;
        font-size:.58rem;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-dropdown{
        top:calc(100% + .35rem);
        left:0;
        right:auto;
        width:max(100%,18rem);
        max-width:calc(100vw - 2rem);
        padding:.75rem;
        border-color:rgba(2,84,45,.18);
        border-radius:.65rem;
        box-shadow:0 22px 42px -24px rgba(15,23,42,.5),0 8px 18px -14px rgba(2,84,45,.38);
        transform:translateY(-.25rem);
    }

    body.page-upload-business-profile .extra-time-field:last-child .extra-compact-time-picker .time-picker-dropdown{
        left:auto;
        right:0;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-dropdown.show{
        transform:translateY(0);
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-dropdown::before{
        margin-bottom:.55rem;
        padding-bottom:.45rem;
        color:var(--brand-primary);
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-selects{
        gap:.35rem;
        padding:.55rem;
        border-color:rgba(2,84,45,.12);
        background:rgba(2,84,45,.045);
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-select,
body.page-upload-business-profile .extra-compact-time-picker .time-picker-period{
        height:2.1rem;
        border-color:rgba(2,84,45,.16);
        color:var(--ink-800);
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-select{
        width:3.35rem;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-period{
        width:3.15rem;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-actions{
        margin-top:.7rem;
        padding-top:.65rem;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-picker-btn{
        min-height:2rem;
        border-radius:.48rem;
    }

    body.page-upload-business-profile .extra-compact-time-picker .time-choice-option{
        height:1.82rem;
        font-size:.68rem;
    }

    body.page-upload-business-profile .extra-staff-note{
        display:flex;
        align-items:flex-start;
        gap:.45rem;
        margin:.15rem 0 .6rem;
        padding:.6rem .7rem;
        border:1px solid rgba(2,84,45,.14);
        border-radius:.6rem;
        background:rgba(2,84,45,.055);
        color:var(--ink-600);
        font-size:.68rem;
        font-weight:700;
        line-height:1.45;
    }

    body.page-upload-business-profile .extra-staff-note i{
        color:var(--brand-primary);
        margin-top:.12rem;
        flex:0 0 auto;
    }

    body.page-upload-business-profile .extra-inline-checks{
        gap:.35rem;
    }

    body.page-upload-business-profile .extra-inline-checks label{
        min-height:1.75rem;
        padding:.28rem .48rem;
        border-color:rgba(2,84,45,.14);
        background:var(--surface-primary);
        color:var(--ink-600);
        font-weight:700;
        line-height:1;
        transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
    }

    body.page-upload-business-profile .extra-inline-checks label:hover{
        border-color:rgba(2,84,45,.28);
        color:var(--brand-primary);
        background:rgba(2,84,45,.045);
    }

    body.page-upload-business-profile .extra-inline-checks label:has(input:checked){
        border-color:rgba(2,84,45,.28);
        background:rgba(2,84,45,.1);
        color:var(--brand-primary);
        box-shadow:0 8px 16px -16px rgba(2,84,45,.55);
    }

    body.page-upload-business-profile .extra-inline-checks input[type="checkbox"],
body.page-upload-business-profile .extra-hours-day input[type="checkbox"]{
        appearance:none;
        position:relative;
        width:.82rem;
        height:.82rem;
        margin:0;
        flex:0 0 auto;
        border:1.5px solid rgba(2,84,45,.28);
        border-radius:.22rem;
        background:var(--surface-primary);
        cursor:pointer;
    }

    body.page-upload-business-profile .extra-inline-checks input[type="checkbox"]:checked,
body.page-upload-business-profile .extra-hours-day input[type="checkbox"]:checked{
        border-color:var(--brand-primary);
        background:var(--brand-primary);
    }

    body.page-upload-business-profile .extra-inline-checks input[type="checkbox"]:checked::after,
body.page-upload-business-profile .extra-hours-day input[type="checkbox"]:checked::after{
        content:"";
        position:absolute;
        left:.18rem;
        top:.2rem;
        width:.38rem;
        height:.2rem;
        border-left:2px solid #fff;
        border-bottom:2px solid #fff;
        transform:rotate(-45deg);
    }

    body.page-upload-business-profile .extra-staff-row{
        grid-template-columns:minmax(10rem,14rem) minmax(20rem,1fr) auto;
        gap:.55rem;
        align-items:start;
        padding:.55rem;
        border-radius:.65rem;
    }

    body.page-upload-business-profile .extra-staff-row .staff-tier-name{
        min-height:2.15rem;
    }

    body.page-upload-business-profile .extra-staff-row>.extra-inline-checks{
        margin:0;
    }

    body.page-upload-business-profile .extra-staff-days-label{
        min-height:1.75rem;
        padding:0 .2rem;
        letter-spacing:0;
        color:var(--brand-primary);
    }

    body.page-upload-business-profile .extra-staff-smart,
body.page-upload-business-profile .extra-staff-suggestions{
        grid-column:1/-1;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:.4rem;
        min-width:0;
    }

    body.page-upload-business-profile .extra-staff-smart{
        margin-top:.05rem;
        padding:.45rem .5rem;
        border:1px dashed rgba(2,84,45,.16);
        border-radius:.55rem;
        background:rgba(2,84,45,.045);
    }

    body.page-upload-business-profile .extra-staff-smart-text{
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        min-width:0;
        flex:1 1 15rem;
        color:var(--ink-500);
        font-size:.67rem;
        font-weight:700;
        line-height:1.35;
    }

    body.page-upload-business-profile .extra-staff-smart-text i{
        flex:0 0 auto;
        color:var(--brand-primary);
    }

    body.page-upload-business-profile .extra-staff-suggestions{
        padding-top:.05rem;
    }

    body.page-upload-business-profile .extra-staff-suggestion-label{
        display:inline-flex;
        align-items:center;
        min-height:1.7rem;
        color:var(--ink-500);
        font-size:.62rem;
        font-weight:800;
        text-transform:uppercase;
        white-space:nowrap;
    }

    body.page-upload-business-profile .extra-staff-smart-apply,
body.page-upload-business-profile .extra-staff-preset{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:1.72rem;
        max-width:100%;
        padding:.24rem .58rem;
        border:1px solid rgba(2,84,45,.18);
        border-radius:999px;
        background:var(--surface-primary);
        color:var(--brand-primary);
        font-size:.65rem;
        font-weight:800;
        line-height:1;
        white-space:nowrap;
        cursor:pointer;
        transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
    }

    body.page-upload-business-profile .extra-staff-smart-apply{
        border-radius:.5rem;
        background:rgba(2,84,45,.08);
    }

    body.page-upload-business-profile .extra-staff-smart-apply[hidden]{
        display:none;
    }

    body.page-upload-business-profile .extra-staff-smart-apply:hover,
body.page-upload-business-profile .extra-staff-smart-apply:focus-visible,
body.page-upload-business-profile .extra-staff-preset:hover,
body.page-upload-business-profile .extra-staff-preset:focus-visible,
body.page-upload-business-profile .extra-staff-preset.is-active{
        border-color:var(--brand-primary);
        background:var(--brand-primary);
        color:#fff;
        box-shadow:0 8px 16px -14px rgba(2,84,45,.65);
        outline:none;
    }

    body.page-upload-business-profile .extra-staff-preset.is-active{
        transform:translateY(-1px);
    }

    body.page-upload-business-profile .extra-switch{
        min-height:1.75rem;
        padding:.18rem .22rem .18rem .25rem;
        border-radius:999px;
    }

    body.page-upload-business-profile .extra-switch input{
        box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
    }

    body.page-upload-business-profile .extra-switch input:focus-visible{
        outline:3px solid rgba(2,84,45,.18);
        outline-offset:2px;
    }

    body.page-upload-business-profile .extra-switch:has(input:checked) span{
        color:var(--brand-primary);
    }

    body.page-upload-business-profile .extra-mini-btn{
        min-height:2.1rem;
        border-radius:.55rem;
        background:var(--surface-primary);
    }

    body.page-upload-business-profile .extra-card-body.is-disabled{
        opacity:.48;
        filter:saturate(.55);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-setting-card{
        background:linear-gradient(180deg,rgba(17,38,29,.98),rgba(11,25,19,.96));
        border-color:var(--wb-border);
        box-shadow:none;
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-setting-head{
        border-bottom-color:var(--wb-border);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-hours-row,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-row,
html[data-theme="dark"] body.page-upload-business-profile .extra-repeat-row{
        background:rgba(22,64,44,.34);
        border-color:var(--wb-border);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-hours-row:hover,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-row:hover,
html[data-theme="dark"] body.page-upload-business-profile .extra-repeat-row:hover{
        background:rgba(29,83,56,.38);
        border-color:var(--wb-border-strong);
    }

html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-picker-trigger,
html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-picker-dropdown,
html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-picker-select,
html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-picker-period,
html[data-theme="dark"] body.page-upload-business-profile .time-choice-option,
html[data-theme="dark"] body.page-upload-business-profile .extra-inline-checks label,
html[data-theme="dark"] body.page-upload-business-profile .extra-inline-checks input[type="checkbox"],
html[data-theme="dark"] body.page-upload-business-profile .extra-hours-day input[type="checkbox"]{
        background:var(--wb-surface);
        border-color:var(--wb-border);
        color:var(--wb-text);
    }

html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-picker-trigger:hover,
html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-picker-trigger.active,
html[data-theme="dark"] body.page-upload-business-profile .time-choice-option:hover,
html[data-theme="dark"] body.page-upload-business-profile .time-choice-option:focus-visible,
html[data-theme="dark"] body.page-upload-business-profile .extra-inline-checks label:hover,
html[data-theme="dark"] body.page-upload-business-profile .extra-inline-checks label:has(input:checked){
        background:rgba(79,186,128,.12);
        border-color:rgba(143,227,181,.35);
        color:#9ae9b1;
    }

    html[data-theme="dark"] body.page-upload-business-profile .time-choice-option.is-selected{
        background:#0d7a43;
        border-color:#8fe3b5;
        color:#eff9f2;
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-staff-note{
        background:rgba(79,186,128,.1);
        border-color:rgba(143,227,181,.22);
        color:var(--wb-muted);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-staff-note i{
        color:var(--brand-accent);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-staff-smart{
        background:rgba(79,186,128,.08);
        border-color:rgba(143,227,181,.22);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-staff-smart-text,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-suggestion-label{
        color:var(--wb-muted);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-staff-smart-text i{
        color:var(--brand-accent);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-staff-smart-apply,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-preset{
        background:var(--wb-surface);
        border-color:var(--wb-border);
        color:var(--wb-text);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-staff-smart-apply:hover,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-smart-apply:focus-visible,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-preset:hover,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-preset:focus-visible,
html[data-theme="dark"] body.page-upload-business-profile .extra-staff-preset.is-active{
        background:#0d7a43;
        border-color:#8fe3b5;
        color:#eff9f2;
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-picker-selects,
html[data-theme="dark"] body.page-upload-business-profile .extra-compact-time-picker .time-icon{
        background:rgba(79,186,128,.1);
        border-color:rgba(143,227,181,.2);
    }

    html[data-theme="dark"] body.page-upload-business-profile .extra-inline-checks input[type="checkbox"]:checked,
html[data-theme="dark"] body.page-upload-business-profile .extra-hours-day input[type="checkbox"]:checked{
        background:#0d7a43;
        border-color:#8fe3b5;
    }

    @media(max-width:1100px){
        body.page-upload-business-profile .extra-staff-row{
            grid-template-columns:minmax(8rem,12rem) minmax(0,1fr) auto;
        }
    }

    @media(max-width:767px){
        body.page-upload-business-profile #extraLunchBody{
            grid-template-columns:1fr;
        }

        body.page-upload-business-profile .extra-setting-head{
            gap:.5rem;
        }

        body.page-upload-business-profile .extra-compact-time-picker .time-picker-dropdown{
            width:min(18rem,calc(100vw - 2rem));
        }

        body.page-upload-business-profile .extra-staff-row,
body.page-upload-business-profile .extra-staff-row[style]{
            border-color:rgba(2,84,45,.12);
            border-radius:.65rem;
            background:rgba(2,84,45,.035);
        }

        body.page-upload-business-profile .extra-staff-row .extra-inline-checks label{
            min-height:1.65rem;
            padding:.24rem .38rem;
        }

        body.page-upload-business-profile .extra-staff-smart,
body.page-upload-business-profile .extra-staff-suggestions{
            grid-column:1/-1;
        }

        body.page-upload-business-profile .extra-staff-smart-text{
            flex-basis:100%;
        }
    }



                    body.page-upload-business-profile .sdo-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;}
                    body.page-upload-business-profile .sdo-form{background:var(--ink-50);border:1px solid var(--ink-200);border-radius:.75rem;padding:1rem 1.25rem;margin-bottom:1rem;}
                    body.page-upload-business-profile .sdo-form-title{font-weight:var(--font-weight-bold);color:var(--brand-primary);margin-bottom:.875rem;font-size:.88rem;display:flex;align-items:center;gap:.4rem;}
                    body.page-upload-business-profile .sdo-common-panel{border:1px solid var(--ink-200);border-radius:.5rem;margin-top:.875rem;overflow:hidden;}
                    body.page-upload-business-profile .sdo-common-summary{padding:.625rem 1rem;font-weight:var(--font-weight-semibold);font-size:.78rem;cursor:pointer;color:var(--ink-600);background:var(--surface-primary);list-style:none;display:flex;align-items:center;gap:.375rem;}
                    body.page-upload-business-profile .sdo-common-summary::-webkit-details-marker{display:none;}
                    body.page-upload-business-profile .sdo-common-summary::after{content:"";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:.6rem;transition:transform .2s;}
                    body.page-upload-business-profile details[open] .sdo-common-summary::after{transform:rotate(180deg);}
                    body.page-upload-business-profile .sdo-common-body{padding:.875rem 1rem;border-top:1px solid var(--ink-100);}
                    body.page-upload-business-profile .sdo-check-row{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.375rem;}
                    body.page-upload-business-profile .sdo-check-row label{display:flex;align-items:center;gap:.3rem;font-size:.8rem;cursor:pointer;white-space:nowrap;}
                    body.page-upload-business-profile .sdo-form-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--ink-200);}
                    body.page-upload-business-profile .sdo-active-toggle{display:flex;align-items:center;gap:.4rem;font-size:.8rem;cursor:pointer;font-weight:var(--font-weight-semibold);color:var(--ink-700);}
                    body.page-upload-business-profile .sdo-form-actions{display:flex;gap:.5rem;}
                    /* Offer cards */
                    body.page-upload-business-profile .sdo-offer-card{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem 1rem;background:var(--surface-primary);border:1px solid var(--ink-200);border-radius:.625rem;margin-bottom:.5rem;gap:1rem;transition:all .15s ease;}
                    body.page-upload-business-profile .sdo-offer-card:hover{border-color:rgba(2,84,45,.2);box-shadow:var(--shadow-sm);}
                    body.page-upload-business-profile .sdo-offer-inactive{opacity:.6;}
                    body.page-upload-business-profile .sdo-offer-left{display:flex;align-items:flex-start;gap:.75rem;flex:1;min-width:0;}
                    body.page-upload-business-profile .sdo-offer-icon{width:2rem;height:2rem;border-radius:.5rem;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;flex-shrink:0;margin-top:.1rem;}
                    body.page-upload-business-profile .sdo-offer-info{flex:1;min-width:0;}
                    body.page-upload-business-profile .sdo-offer-type{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-bottom:.3rem;}
                    body.page-upload-business-profile .sdo-badge{display:inline-flex;align-items:center;padding:.13rem .45rem;border-radius:.3rem;font-size:.62rem;font-weight:var(--font-weight-bold);background:rgba(2,84,45,.1);color:var(--brand-primary);border:1px solid rgba(2,84,45,.2);}
                    body.page-upload-business-profile .sdo-badge-active{background:rgba(2,84,45,.15);color:var(--brand-primary);}
                    body.page-upload-business-profile .sdo-badge-inactive{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.2);}
                    body.page-upload-business-profile .sdo-badge-priority{background:rgba(245,158,11,.1);color:#d97706;border-color:rgba(245,158,11,.25);}
                    body.page-upload-business-profile .sdo-offer-desc{font-size:.78rem;font-weight:var(--font-weight-semibold);color:var(--ink-700);margin-bottom:.175rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
                    body.page-upload-business-profile .sdo-offer-summary{font-size:.71rem;color:var(--ink-500);}
                    body.page-upload-business-profile .sdo-offer-actions{display:flex;gap:.25rem;flex-shrink:0;}
                    /* Dynamic row layouts */
                    body.page-upload-business-profile .sdo-tier-row,
body.page-upload-business-profile .sdo-addon-row,
body.page-upload-business-profile .sdo-blackout-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.375rem;}
                    body.page-upload-business-profile .sdo-tier-row .bp-form-control,
body.page-upload-business-profile .sdo-addon-row .bp-form-control,
body.page-upload-business-profile .sdo-blackout-row .bp-form-control{flex:1;min-width:0;}
                    body.page-upload-business-profile .sdo-row-del{flex-shrink:0;padding:.3rem .55rem;border-radius:.375rem;border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.08);color:#ef4444;cursor:pointer;font-size:.75rem;line-height:1;}
                    body.page-upload-business-profile .sdo-row-del:hover{background:rgba(239,68,68,.18);}
                    body.page-upload-business-profile .sdo-row-label{font-size:.68rem;color:var(--ink-400);white-space:nowrap;align-self:center;}
                

/* ==========================================================
   Template: view_products_services.html (page-view-products-services)
   ========================================================== */

    /* Products-specific styles using base.html color scheme */
    body.page-view-products-services .products-container{

        margin: 0 auto;
        padding: .875rem;
    }

    /* Header with Controls - Single Card */
    body.page-view-products-services .header-controls-wrapper{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }

    body.page-view-products-services .header-controls-content{
        position: relative;
    }

    body.page-view-products-services .header-title{
        font-size: 1.25rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        letter-spacing: -0.01em;
        margin-bottom: 0.25rem;
    }

    body.page-view-products-services .header-subtitle{
        font-size: 0.8rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin-bottom: 0;
    }

    /* Controls Section - Integrated */
    body.page-view-products-services .controls-grid{
        display: flex;
        gap: 0.75rem;
        align-items: center;
        flex-wrap: wrap;
    }

    body.page-view-products-services .product-header-actions{
        display: flex;
        align-items: center;
        gap: .75rem;
        flex: 0 0 auto;
    }

    body.page-view-products-services .search-container{
        position: relative;
        flex: 1;
        min-width: 200px;
    }

    body.page-view-products-services .search-icon{
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        font-size: 0.875rem;
        pointer-events: none;
        z-index: 1;
    }

    body.page-view-products-services .search-input{
        width: 100%;
        padding: 0.5rem 0.875rem 0.5rem 2.25rem;
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-size: 0.8125rem;
        transition: var(--base);
        outline: none;
    }

    body.page-view-products-services .search-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.15);
    }

    /* Custom Dropdown Styling */
    body.page-view-products-services .sort-container{
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        z-index: 100;
    }

    body.page-view-products-services .custom-dropdown{
        position: relative;
        width: 150px;
        z-index: 100;
    }

    body.page-view-products-services .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 8px 12px;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        color: var(--ink-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--base);
        outline: none;
        width: 100%;
        position: relative;
        z-index: 100;
    }

    body.page-view-products-services .dropdown-trigger:hover{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.15);
    }

    body.page-view-products-services .dropdown-trigger:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.15);
    }

    body.page-view-products-services .dropdown-trigger.active{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.15);
        background: rgba(2, 84, 45, 0.08);
        z-index: 101;
    }

    body.page-view-products-services .dropdown-arrow{
        transition: var(--base);
        color: var(--brand-primary);
        font-size: .75rem;
    }

    body.page-view-products-services .dropdown-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-view-products-services .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--base);
    }

    body.page-view-products-services .custom-dropdown .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        z-index: 1000;
    }

    body.page-view-products-services .dropdown-option{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--ink-700);
        font-size: .8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--base);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-view-products-services .dropdown-option:hover{
        background: rgba(2, 84, 45, 0.15);
        color: var(--brand-secondary);
    }

    body.page-view-products-services .dropdown-option.selected{
        background: rgba(2, 84, 45, 0.15);
        color: var(--brand-primary);
        font-weight: 600;
    }

    body.page-view-products-services .dropdown-option:focus{
        outline: 2px solid var(--brand-primary);
        outline-offset: -2px;
        background: rgba(2, 84, 45, 0.15);
    }

    body.page-view-products-services .sort-icon{
        color: var(--brand-primary);
        font-size: .75rem;
        flex-shrink: 0;
    }

    /* Hide original select */
    body.page-view-products-services #sortSelect{
        display: none;
    }

    /* Table Container */
    body.page-view-products-services .table-container{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-bottom: 1rem;
        position: relative;
    }

    body.page-view-products-services .table-scroll-wrapper{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-view-products-services .table-scroll-wrapper::-webkit-scrollbar{
        height: 8px;
    }

    body.page-view-products-services .table-scroll-wrapper::-webkit-scrollbar-track{
        background: var(--surface-secondary);
        border-radius: 0.375rem;
    }

    body.page-view-products-services .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: var(--brand-primary);
        border-radius: 0.375rem;
    }

    body.page-view-products-services .products-table{
        width: 100%;
        min-width: 1500px;
        border-collapse: collapse;
        font-size: 0.8rem;
        table-layout: fixed;
    }

    body.page-view-products-services .products-table thead th{
        background: var(--brand-primary);
        color: var(--surface-primary);
        font-weight: var(--font-weight-bold);
        font-size: 0.7rem;
        padding: .75rem 1rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        vertical-align: middle;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    body.page-view-products-services .products-table tbody tr{
        transition: var(--fast);
        border-bottom: 1px solid var(--ink-200);
        cursor: pointer;
    }

    body.page-view-products-services .products-table tbody tr:nth-child(even){
        background: var(--surface-secondary);
    }

    body.page-view-products-services .products-table tbody tr:hover:not(.skeleton-row){
        background: rgba(2, 84, 45, 0.08);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    body.page-view-products-services .products-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        text-align: left;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-view-products-services .products-table td:first-child{
        font-weight: 400;
        color: inherit;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        font-variant-numeric: tabular-nums;
    }

    body.page-view-products-services .products-table th:first-child,
body.page-view-products-services .products-table td:first-child{
        min-width: 104px;
    }

    body.page-view-products-services .products-table td:first-child strong,
body.page-view-products-services .products-table .numeric-value,
body.page-view-products-services .products-table .available-badge,
body.page-view-products-services .products-table .rating,
body.page-view-products-services .products-table .badge{
        white-space: nowrap;
    }

    body.page-view-products-services .products-table td:last-child .table-actions{
        min-width: 120px;
    }

    body.page-view-products-services .product-name{
        font-weight: 500;
        color: #374151;
        line-height: 1.2;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.85rem;
        cursor: default;
    }

    body.page-view-products-services .cat-badge{
        display: inline-block;
        padding: 2px 8px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--brand-primary);
        background: #e6f4ee;
        border-radius: 12px;
        letter-spacing: 0.02em;
        vertical-align: middle;
    }

    /* Available badge styling */
    body.page-view-products-services .available-badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(2, 84, 45, 0.12);
        color: var(--brand-primary);
        padding: 0.3rem 0.6rem;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.8rem;
        min-width: 44px;
        text-align: center;
        border: 1px solid rgba(2, 84, 45, 0.25);
    }

    /* Skeleton Loader */
    body.page-view-products-services .skeleton{
        background: linear-gradient(90deg, var(--surface-tertiary) 25%, var(--surface-secondary) 50%, var(--surface-tertiary) 75%);
        background-size: 200% 100%;
        animation: view-products-services--shimmer 1.5s infinite;
        border-radius: 0.375rem;
        height: 1.25rem;
        width: 100%;
    }

    body.page-view-products-services .skeleton.small{
        width: 60%;
    }

    body.page-view-products-services .skeleton.medium{
        width: 80%;
    }

    @keyframes view-products-services--shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    body.page-view-products-services .skeleton-row{
        cursor: default !important;
    }

    body.page-view-products-services .skeleton-row:hover{
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    /* Loading Indicator */
    body.page-view-products-services .inline-loader{
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--brand-primary);
        font-size: 0.875rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-view-products-services .inline-spinner{
        width: 16px;
        height: 16px;
        border: 2px solid var(--ink-200);
        border-top-color: var(--brand-primary);
        border-radius: 50%;
        animation: view-products-services--spin 0.6s linear infinite;
    }

    @keyframes view-products-services--spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Table Actions */
    body.page-view-products-services .table-actions{
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        white-space: nowrap;
    }

    body.page-view-products-services .table-action-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 0.9rem;
        border-radius: 0.375rem;
        border: 1px solid;
        cursor: pointer;
        transition: var(--base);
        text-decoration: none;
    }

    body.page-view-products-services .table-action-btn.edit{
        color: var(--brand-primary);
        background: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-view-products-services .table-action-btn.edit:hover{
        background: var(--brand-primary);
        color: var(--surface-primary);
        transform: translateY(-1px);
        text-decoration: none;
    }

    body.page-view-products-services .table-action-btn.delete{
        color: #ef4444;
        background: var(--surface-primary);
        border-color: #ef4444;
    }

    body.page-view-products-services .table-action-btn.delete:hover{
        background: #ef4444;
        color: var(--surface-primary);
        transform: translateY(-1px);
        text-decoration: none;
    }

    body.page-view-products-services .table-action-btn:disabled{
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    /* Table Footer */
    body.page-view-products-services .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        background: var(--surface-secondary);
        border-top: 1px solid var(--ink-200);
        font-size: 0.8125rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
    }

    /* Pagination */
    body.page-view-products-services .pagination{
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.page-view-products-services .pagination-btn{
        min-width: 2.25rem;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-weight: var(--font-weight-semibold);
        font-size: 0.8125rem;
        cursor: pointer;
        transition: var(--base);
    }

    body.page-view-products-services .pagination-btn:hover:not(.disabled){
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
        transform: translateY(-1px);
    }

    body.page-view-products-services .pagination-btn.active{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-view-products-services .pagination-btn.disabled{
        background: var(--surface-tertiary);
        color: var(--ink-400);
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Status Badges */
    body.page-view-products-services .badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        font-weight: var(--font-weight-bold);
        border-radius: 0.5rem;
        text-align: center;
        min-width: 60px;
        height: 26px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    body.page-view-products-services .badge.success{
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    body.page-view-products-services .badge.warning{
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    body.page-view-products-services .badge.secondary{
        background: var(--surface-tertiary);
        color: var(--ink-600);
        border: 1px solid var(--ink-300);
    }

    body.page-view-products-services .badge.info{
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        border: 1px solid rgba(2, 84, 45, 0.25);
    }

    /* Star Rating */
    body.page-view-products-services .rating{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        color: #fbbf24;
        font-size: 0.875rem;
        font-weight: var(--font-weight-semibold);
    }

    /* Numeric Values */
    body.page-view-products-services .numeric-value{
        font-weight: var(--font-weight-bold);
        color: var(--ink-900);
    }

    /* ── Confirmation Modal ── */
    body.page-view-products-services .modal-backdrop{
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    body.page-view-products-services .modal-backdrop.visible{
        opacity: 1;
        visibility: visible;
    }

    body.page-view-products-services .modal-content{
        background: var(--surface-primary);
        border-radius: 1.125rem;
        box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
        max-width: 420px;
        width: 92%;
        margin: 1rem;
        transform: translateY(18px) scale(0.97);
        opacity: 0;
        transition: transform .3s cubic-bezier(.34,1.36,.64,1), opacity .25s ease;
        overflow: hidden;
        position: relative;
    }

    body.page-view-products-services .modal-backdrop.visible .modal-content{
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Accent bar at top — colour swapped per type via JS class */
    body.page-view-products-services .modal-content::before{
        content: "";
        display: block;
        height: 4px;
        background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
        position: absolute;
        top: 0; left: 0; right: 0;
    }

    body.page-view-products-services .modal-content.modal-danger::before{
        background: linear-gradient(90deg, #ef4444, #b91c1c);
    }

    body.page-view-products-services .modal-header{
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.75rem 1.75rem 1rem;
    }

    /* Icon badge */
    body.page-view-products-services .modal-icon{
        width: 48px;
        height: 48px;
        border-radius: .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
        background: rgba(2, 84, 45, .1);
        color: var(--brand-primary);
        border: 1.5px solid rgba(2, 84, 45, .15);
    }

    body.page-view-products-services .modal-icon.edit{
        background: rgba(2, 84, 45, .1);
        color: var(--brand-primary);
        border-color: rgba(2, 84, 45, .18);
    }

    body.page-view-products-services .modal-icon.delete{
        background: rgba(239, 68, 68, .1);
        color: #ef4444;
        border-color: rgba(239, 68, 68, .18);
    }

    body.page-view-products-services .modal-header-text{
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }

    body.page-view-products-services .modal-title{
        font-size: 1.05rem;
        font-weight: var(--font-weight-extrabold);
        color: var(--ink-900);
        margin: 0;
        letter-spacing: -.01em;
    }

    body.page-view-products-services .modal-subtitle-tag{
        font-size: .68rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--brand-primary);
        opacity: .75;
    }

    body.page-view-products-services .modal-divider{
        height: 1px;
        background: var(--ink-100);
        margin: 0 1.75rem;
    }

    body.page-view-products-services .modal-body{
        padding: 1.1rem 1.75rem 1.5rem;
    }

    body.page-view-products-services .modal-message{
        font-size: .875rem;
        color: var(--ink-500);
        margin: 0;
        line-height: 1.65;
    }

    body.page-view-products-services .modal-message strong{
        color: var(--ink-800);
        font-weight: var(--font-weight-semibold);
    }

    body.page-view-products-services .modal-actions{
        display: flex;
        gap: .625rem;
        justify-content: flex-end;
        padding: 0 1.75rem 1.5rem;
    }

    body.page-view-products-services .modal-btn{
        padding: .6rem 1.25rem;
        border-radius: .625rem;
        font-weight: var(--font-weight-bold);
        font-size: .8125rem;
        border: none;
        cursor: pointer;
        transition: all .18s ease;
        min-width: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
    }

    body.page-view-products-services .modal-btn.primary{
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: #fff;
        box-shadow: 0 2px 8px rgba(2,84,45,.25);
    }

    body.page-view-products-services .modal-btn.primary:hover:not(:disabled){
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(2,84,45,.3);
    }

    body.page-view-products-services .modal-btn.danger{
        background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
        color: #fff;
        box-shadow: 0 2px 8px rgba(239,68,68,.25);
    }

    body.page-view-products-services .modal-btn.danger:hover:not(:disabled){
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(239,68,68,.3);
    }

    body.page-view-products-services .modal-btn.secondary{
        background: var(--ink-50);
        color: var(--ink-700);
        border: 1px solid var(--ink-200);
    }

    body.page-view-products-services .modal-btn.secondary:hover{
        background: var(--ink-100);
        border-color: var(--ink-300);
        transform: translateY(-1px);
    }

    body.page-view-products-services .modal-btn:disabled{
        opacity: .55;
        cursor: not-allowed;
        transform: none !important;
    }

    /* Button Spinner */
    body.page-view-products-services .btn-spinner{
        width: 14px;
        height: 14px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: view-products-services--spin 0.6s linear infinite;
    }

    /* Empty State */
    body.page-view-products-services .empty-state{
        text-align: center;
        padding: 4rem 2rem;
        color: var(--ink-500);
    }

    body.page-view-products-services .empty-state i{
        font-size: 4rem;
        color: var(--brand-primary);
        margin-bottom: 1.5rem;
        display: block;
        opacity: 0.5;
    }

    body.page-view-products-services .empty-state h3{
        font-size: 1.5rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-700);
        margin-bottom: 0.75rem;
    }

    body.page-view-products-services .empty-state p{
        color: var(--ink-500);
        margin: 0;
        font-size: 1rem;
    }

    /* Animations */
    body.page-view-products-services .fade-in{
        animation: view-products-services--fadeIn 0.4s ease-out;
    }

    @keyframes view-products-services--fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes view-products-services--slideInRight {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Responsive Design */
    @media (max-width: 992px) {
        body.page-view-products-services .controls-grid{
            /* flex-direction: column; */
            align-items: stretch;
        }

        body.page-view-products-services .search-container{
            min-width: unset;
        }

        body.page-view-products-services .custom-dropdown{
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        body.page-view-products-services .products-container{
            padding: 0.75rem;
        }

        body.page-view-products-services .header-title{
            font-size: 1.5rem;
        }

        body.page-view-products-services .table-footer{
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }

        /* compact table for small screens */
        body.page-view-products-services .products-table{
            font-size: 0.78rem;
        }

        body.page-view-products-services .product-name{ font-size: 0.95rem; }

        body.page-view-products-services .pagination{
            justify-content: center;
        }

        body.page-view-products-services .product-header-actions{
            width: 100%;
            gap: .625rem;
        }

        body.page-view-products-services .product-header-actions .btn{
            flex: 1 1 0;
            min-width: 0;
            justify-content: center;
            white-space: nowrap;
        }

        body.page-view-products-services .modal-content{
            padding: 1.5rem;
        }

        body.page-view-products-services .modal-actions{
            flex-direction: column;
        }
    }

    body.page-view-products-services .btn-primary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1.5px solid var(--brand-primary);
        padding: 0.45rem 1rem;
        border-radius: 0.5rem;
        font-weight: var(--font-weight-semibold);
        font-size: 0.8125rem;
        text-decoration: none;
        cursor: pointer;
        transition: var(--base);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        white-space: nowrap;
    }

    body.page-view-products-services .btn-primary:hover{
        background: var(--brand-primary);
        color: var(--surface-primary);
        text-decoration: none;
    }

    body.page-view-products-services .btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1px solid var(--ink-200);
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: var(--font-weight-semibold);
        font-size: 0.8125rem;
        text-decoration: none;
        cursor: pointer;
        transition: var(--base);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        white-space: nowrap;
    }

    body.page-view-products-services .btn-secondary:hover{
        background: rgba(2, 84, 45, 0.08);
        transform: translateY(-1px);
        text-decoration: none;
        border-color: var(--brand-primary);
    }

    /* Dark mode */
    html[data-theme="dark"] body.page-view-products-services .products-container{
        color-scheme: dark;
    }

    html[data-theme="dark"] body.page-view-products-services .header-controls-wrapper,
html[data-theme="dark"] body.page-view-products-services .table-container{
        background: #0d1813;
        border-color: #2b3b33;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    html[data-theme="dark"] body.page-view-products-services .header-title{
        color: #f3f7f5;
    }

    html[data-theme="dark"] body.page-view-products-services .header-subtitle,
html[data-theme="dark"] body.page-view-products-services .search-icon{
        color: #9dafb6;
    }

    html[data-theme="dark"] body.page-view-products-services .search-input,
html[data-theme="dark"] body.page-view-products-services .dropdown-trigger,
html[data-theme="dark"] body.page-view-products-services .custom-dropdown .dropdown-menu{
        background: #0b1511;
        border-color: #2c3d35;
        color: #edf4f0;
    }

    html[data-theme="dark"] body.page-view-products-services .search-input::placeholder{
        color: #90a2ad;
        opacity: 1;
    }

    html[data-theme="dark"] body.page-view-products-services .search-input:focus,
html[data-theme="dark"] body.page-view-products-services .dropdown-trigger:hover,
html[data-theme="dark"] body.page-view-products-services .dropdown-trigger:focus,
html[data-theme="dark"] body.page-view-products-services .dropdown-trigger.active{
        background: #0f1d17;
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
    }

    html[data-theme="dark"] body.page-view-products-services .dropdown-option{
        color: #dce8e1;
    }

    html[data-theme="dark"] body.page-view-products-services .dropdown-option:hover,
html[data-theme="dark"] body.page-view-products-services .dropdown-option.selected{
        background: rgba(34, 197, 94, 0.12);
        color: #86efac;
    }

    html[data-theme="dark"] body.page-view-products-services .sort-icon,
html[data-theme="dark"] body.page-view-products-services .dropdown-arrow{
        color: #86efac;
    }

    html[data-theme="dark"] body.page-view-products-services .products-table thead th{
        background: #102019;
        color: #bbf7d0;
        border-bottom: 1px solid #31423a;
    }

    html[data-theme="dark"] body.page-view-products-services .products-table tbody tr{
        background: #0d1813;
        border-color: #26372f;
    }

    html[data-theme="dark"] body.page-view-products-services .products-table tbody tr:nth-child(even){
        background: #0b1611;
    }

    html[data-theme="dark"] body.page-view-products-services .products-table tbody tr:hover:not(.skeleton-row){
        background: #12251b;
    }

    html[data-theme="dark"] body.page-view-products-services .products-table td,
html[data-theme="dark"] body.page-view-products-services .products-table td:first-child,
html[data-theme="dark"] body.page-view-products-services .product-name,
html[data-theme="dark"] body.page-view-products-services .numeric-value,
html[data-theme="dark"] body.page-view-products-services .rating{
        color: #edf4f0;
    }

    html[data-theme="dark"] body.page-view-products-services .cat-badge{
        background: rgba(34, 197, 94, 0.12);
        color: #bbf7d0;
        border: 1px solid rgba(74, 222, 128, 0.24);
    }

    html[data-theme="dark"] body.page-view-products-services .available-badge,
html[data-theme="dark"] body.page-view-products-services .badge.info{
        background: rgba(16, 185, 129, 0.08);
        color: #d1fae5;
        border-color: rgba(52, 211, 153, 0.18);
    }

    html[data-theme="dark"] body.page-view-products-services .badge.secondary{
        background: #121e18;
        color: #e1ebe5;
        border-color: #3a4b42;
    }

    html[data-theme="dark"] body.page-view-products-services .badge.warning{
        background: rgba(245, 158, 11, 0.14);
        color: #fde68a;
        border-color: rgba(245, 158, 11, 0.42);
    }

    html[data-theme="dark"] body.page-view-products-services .table-action-btn.edit{
        background: rgba(16, 185, 129, 0.06);
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, 0.28);
    }

    html[data-theme="dark"] body.page-view-products-services .table-action-btn.delete{
        background: rgba(239, 68, 68, 0.07);
        color: #fca5a5;
        border-color: rgba(239, 68, 68, 0.4);
    }

    html[data-theme="dark"] body.page-view-products-services .table-footer{
        background: #0b1611;
        border-color: #2b3b33;
        color: #c6d3cc;
    }

    html[data-theme="dark"] body.page-view-products-services .pagination-btn{
        background: #101c16;
        border-color: #34463c;
        color: #dce8e1;
    }

    html[data-theme="dark"] body.page-view-products-services .pagination-btn:hover:not(.disabled),
html[data-theme="dark"] body.page-view-products-services .pagination-btn.active{
        background: #08783e;
        border-color: #22c55e;
        color: #fff;
    }

    html[data-theme="dark"] body.page-view-products-services .pagination-btn.disabled{
        background: #0d1712;
        color: #64776d;
        border-color: #26372f;
    }

    html[data-theme="dark"] body.page-view-products-services .table-scroll-wrapper::-webkit-scrollbar-track{
        background: #0a130f;
    }

    html[data-theme="dark"] body.page-view-products-services .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: #365347;
    }


/* ==========================================================
   Template: view_services_services.html (page-view-services-services)
   ========================================================== */

    /* Services-specific styles using base.html color scheme */
    body.page-view-services-services .services-container{

        margin: 0 auto;
        padding: .875rem;
    }

    /* Header with Controls - Single Card */
    body.page-view-services-services .header-controls-wrapper{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }

    body.page-view-services-services .header-controls-content{
        position: relative;
    }

    body.page-view-services-services .header-title{
        font-size: 1.25rem;
        font-weight: var(--font-weight-bold);
        color: var(--brand-primary);
        letter-spacing: -0.01em;
        margin-bottom: 0.25rem;
    }

    body.page-view-services-services .header-subtitle{
        font-size: 0.8rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
        margin-bottom: 0;
    }

    /* Controls Section - Integrated */
    body.page-view-services-services .controls-grid{
        display: flex;
        gap: 0.75rem;
        align-items: center;
        flex-wrap: wrap;
    }

    body.page-view-services-services .service-header-actions{
        display: flex;
        align-items: center;
        gap: .75rem;
        flex: 0 0 auto;
    }

    body.page-view-services-services .search-container{
        position: relative;
        flex: 1;
        min-width: 200px;
    }

    body.page-view-services-services .search-icon{
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-400);
        font-size: 0.875rem;
        pointer-events: none;
        z-index: 1;
    }

    body.page-view-services-services .search-input{
        width: 100%;
        padding: 0.5rem 0.875rem 0.5rem 2.25rem;
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-size: 0.8125rem;
        transition: var(--base);
        outline: none;
    }

    body.page-view-services-services .search-input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.15);
    }

    /* Custom Dropdown Styling */
    body.page-view-services-services .sort-container{
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        z-index: 100;
    }

    body.page-view-services-services .custom-dropdown{
        position: relative;
        width: 150px;
        z-index: 100;
    }

    body.page-view-services-services .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 8px 12px;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        color: var(--ink-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--base);
        outline: none;
        width: 100%;
        position: relative;
        z-index: 100;
    }

    body.page-view-services-services .dropdown-trigger:hover{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.15);
    }

    body.page-view-services-services .dropdown-trigger:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(2, 84, 45, 0.15);
    }

    body.page-view-services-services .dropdown-trigger.active{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 2px rgba(2, 84, 45, 0.15);
        background: rgba(2, 84, 45, 0.08);
        z-index: 101;
    }

    body.page-view-services-services .dropdown-arrow{
        transition: var(--base);
        color: var(--brand-primary);
        font-size: .75rem;
    }

    body.page-view-services-services .dropdown-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-view-services-services .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--base);
    }

    body.page-view-services-services .custom-dropdown .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        z-index: 1000;
    }

    body.page-view-services-services .dropdown-option{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--ink-700);
        font-size: .8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--base);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    body.page-view-services-services .dropdown-option:hover{
        background: rgba(2, 84, 45, 0.15);
        color: var(--brand-secondary);
    }

    body.page-view-services-services .dropdown-option.selected{
        background: rgba(2, 84, 45, 0.15);
        color: var(--brand-primary);
        font-weight: 600;
    }

    body.page-view-services-services .dropdown-option:focus{
        outline: 2px solid var(--brand-primary);
        outline-offset: -2px;
        background: rgba(2, 84, 45, 0.15);
    }

    body.page-view-services-services .sort-icon{
        color: var(--brand-primary);
        font-size: .75rem;
        flex-shrink: 0;
    }

    /* Hide original select */
    body.page-view-services-services #sortSelect{
        display: none;
    }

    /* Table Container */
    body.page-view-services-services .table-container{
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .875rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-bottom: 1rem;
        position: relative;
    }

    body.page-view-services-services .table-scroll-wrapper{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-view-services-services .table-scroll-wrapper::-webkit-scrollbar{
        height: 8px;
    }

    body.page-view-services-services .table-scroll-wrapper::-webkit-scrollbar-track{
        background: var(--surface-secondary);
        border-radius: 0.375rem;
    }

    body.page-view-services-services .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: var(--brand-primary);
        border-radius: 0.375rem;
    }

    body.page-view-services-services .services-table{
        width: 100%;
        min-width: 1500px;
        border-collapse: collapse;
        font-size: 0.8rem;
        table-layout: fixed;
    }

    body.page-view-services-services .services-table thead th{
        background: var(--brand-primary);
        color: var(--surface-primary);
        font-weight: var(--font-weight-bold);
        font-size: 0.7rem;
        padding: .75rem 1rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        vertical-align: middle;
        position: sticky;
        top: 0;
    }

    body.page-view-services-services .services-table tbody tr{
        transition: var(--fast);
        border-bottom: 1px solid var(--ink-200);
        cursor: pointer;
    }

    body.page-view-services-services .services-table tbody tr:nth-child(even){
        background: var(--surface-secondary);
    }

    body.page-view-services-services .services-table tbody tr:hover:not(.skeleton-row){
        background: rgba(2, 84, 45, 0.08);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    body.page-view-services-services .services-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border: none;
        vertical-align: middle;
        text-align: left;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-view-services-services .services-table td:first-child{
        font-weight: 400;
        color: inherit;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        font-variant-numeric: tabular-nums;
    }

    body.page-view-services-services .services-table th:first-child,
body.page-view-services-services .services-table td:first-child{
        min-width: 104px;
    }

    body.page-view-services-services .services-table td:first-child strong,
body.page-view-services-services .services-table .numeric-value,
body.page-view-services-services .services-table .available-badge,
body.page-view-services-services .services-table .rating,
body.page-view-services-services .services-table .badge{
        white-space: nowrap;
    }

    body.page-view-services-services .services-table td:last-child .table-actions{
        min-width: 120px;
    }

    body.page-view-services-services .service-name{
        font-weight: 500;
        color: #374151;
        line-height: 1.2;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.85rem;
        cursor: default;
    }

    body.page-view-services-services .cat-badge{
        display: inline-block;
        padding: 2px 8px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--brand-primary);
        background: #e6f4ee;
        border-radius: 12px;
        letter-spacing: 0.02em;
        vertical-align: middle;
    }

    /* ==== Filter trigger + panel ==== */
    body:is(.page-view-services-services, .page-view-products-services) .filter-container{
        position: relative;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-trigger{
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        height: 100%;
        min-height: 38px;
        padding: 0 .85rem;
        font-family: inherit;
        font-size: .78rem;
        font-weight: 600;
        color: var(--ink-700);
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .5rem;
        cursor: pointer;
        white-space: nowrap;
        transition: border-color .15s ease, color .15s ease, background .15s ease;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-trigger:hover,
    body:is(.page-view-services-services, .page-view-products-services) .filter-trigger.is-open,
    body:is(.page-view-services-services, .page-view-products-services) .filter-trigger.has-filters{
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-count{
        min-width: 17px;
        padding: 0 4px;
        font-size: .62rem;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
        color: #fff;
        background: var(--brand-primary);
        border-radius: 999px;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-panel{
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 1200;
        width: 320px;
        max-height: min(70vh, 520px);
        display: flex;
        flex-direction: column;
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .625rem;
        box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-panel[hidden]{ display: none; }

    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .7rem .85rem;
        border-bottom: 1px solid var(--ink-100);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-title{
        font-size: .78rem;
        font-weight: 700;
        color: var(--ink-800);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-close{
        border: 0;
        background: none;
        color: var(--ink-400);
        cursor: pointer;
        font-size: .72rem;
        padding: 2px;
        line-height: 1;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-close:hover{ color: var(--ink-700); }

    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-body{
        overflow-y: auto;
        padding: .3rem .85rem .6rem;
        flex: 1;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-group{ padding: .6rem 0; }
    body:is(.page-view-services-services, .page-view-products-services) .filter-group + .filter-group{
        border-top: 1px solid var(--ink-100);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-group-label{
        margin: 0 0 .4rem;
        font-size: .62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink-400);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-pills{
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-pill{
        appearance: none;
        font-family: inherit;
        font-size: .7rem;
        font-weight: 600;
        color: var(--ink-600);
        background: var(--ink-50);
        border: 1px solid var(--ink-200);
        border-radius: 999px;
        padding: .22rem .6rem;
        cursor: pointer;
        transition: all .15s ease;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-pill:hover{ border-color: var(--ink-300); }

    body:is(.page-view-services-services, .page-view-products-services) .filter-pill.is-active{
        color: var(--brand-primary);
        background: #e6f4ee;
        border-color: rgba(2, 84, 45, .28);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-checks{
        display: flex;
        flex-direction: column;
        gap: .1rem;
        max-height: 168px;
        overflow-y: auto;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-check{
        display: flex;
        align-items: center;
        gap: .45rem;
        font-size: .74rem;
        color: var(--ink-700);
        padding: .18rem .2rem;
        border-radius: .3rem;
        cursor: pointer;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-check:hover{ background: var(--ink-50); }
    body:is(.page-view-services-services, .page-view-products-services) .filter-check input{
        accent-color: var(--brand-primary);
        cursor: pointer;
        flex-shrink: 0;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-check span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-range{
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-range-input{
        width: 100%;
        min-width: 0;
        font-family: inherit;
        font-size: .74rem;
        color: var(--ink-700);
        background: var(--surface-primary);
        border: 1px solid var(--ink-200);
        border-radius: .375rem;
        padding: .28rem .45rem;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-range-input:focus{
        outline: none;
        border-color: var(--brand-primary);
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-range-sep{ color: var(--ink-400); font-size: .74rem; }

    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-foot{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .6rem .85rem;
        border-top: 1px solid var(--ink-100);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-btn-ghost,
    .table-empty-state-content .filter-btn-ghost{
        appearance: none;
        font-family: inherit;
        font-size: .74rem;
        font-weight: 600;
        color: var(--ink-500);
        background: none;
        border: 0;
        padding: .3rem .1rem;
        cursor: pointer;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-btn-ghost:hover,
    .table-empty-state-content .filter-btn-ghost:hover{ color: var(--brand-primary); }

    body:is(.page-view-services-services, .page-view-products-services) .filter-btn-primary{
        appearance: none;
        font-family: inherit;
        font-size: .74rem;
        font-weight: 600;
        color: #fff;
        background: var(--brand-primary);
        border: 0;
        border-radius: .4rem;
        padding: .38rem .85rem;
        cursor: pointer;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-btn-primary:hover{ opacity: .92; }

    /* ==== Active filter chips ==== */
    body:is(.page-view-services-services, .page-view-products-services) .active-filters{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .4rem;
        margin-bottom: .6rem;
        padding: 0 .15rem;
    }
    body:is(.page-view-services-services, .page-view-products-services) .active-filters[hidden]{ display: none; }

    body:is(.page-view-services-services, .page-view-products-services) .active-filters-label{
        font-size: .64rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink-400);
    }

    body:is(.page-view-services-services, .page-view-products-services) .active-filters-list{
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
        flex: 1;
        min-width: 0;
    }

    body:is(.page-view-services-services, .page-view-products-services) .active-chip{
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        appearance: none;
        font-family: inherit;
        font-size: .68rem;
        font-weight: 600;
        color: var(--brand-primary);
        background: #e6f4ee;
        border: 1px solid rgba(2, 84, 45, .18);
        border-radius: 999px;
        padding: .18rem .5rem;
        cursor: pointer;
        max-width: 220px;
    }
    body:is(.page-view-services-services, .page-view-products-services) .active-chip span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body:is(.page-view-services-services, .page-view-products-services) .active-chip i{ font-size: .7rem; opacity: .7; flex-shrink: 0; }
    body:is(.page-view-services-services, .page-view-products-services) .active-chip:hover{ background: #d5ebe0; }
    body:is(.page-view-services-services, .page-view-products-services) .active-chip:hover i{ opacity: 1; }

    body:is(.page-view-services-services, .page-view-products-services) .active-filters-clear{
        appearance: none;
        font-family: inherit;
        font-size: .68rem;
        font-weight: 600;
        color: var(--ink-500);
        background: none;
        border: 0;
        cursor: pointer;
        text-decoration: underline;
        flex-shrink: 0;
    }
    body:is(.page-view-services-services, .page-view-products-services) .active-filters-clear:hover{ color: var(--brand-primary); }

    @media (max-width: 640px){
        body:is(.page-view-services-services, .page-view-products-services) .filter-panel{
            width: min(320px, calc(100vw - 2rem));
            right: auto;
            left: 0;
        }
    }

    /* ==== Filters / Columns tabs (one popover, two panes) ==== */
    body:is(.page-view-services-services, .page-view-products-services) .filter-tabs{
        display: flex;
        gap: .15rem;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-tab{
        appearance: none;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: .76rem;
        font-weight: 600;
        color: var(--ink-500);
        padding: .2rem .1rem .35rem;
        margin-right: .6rem;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color .15s ease, border-color .15s ease;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-tab:hover{
        color: var(--ink-700);
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-tab.is-active{
        color: var(--brand-primary);
        border-bottom-color: var(--brand-primary);
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-tab-note{
        margin-left: .3rem;
        font-size: .58rem;
        font-weight: 700;
        color: var(--ink-500);
        background: var(--ink-100);
        border-radius: 999px;
        padding: .08rem .32rem;
        vertical-align: middle;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-tab-note[hidden]{ display: none; }

    /* `.filter-panel-body` / `.filter-panel-foot` set an explicit display, which would
       otherwise win over the [hidden] attribute used to swap panes. */
    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-body[hidden],
    body:is(.page-view-services-services, .page-view-products-services) .filter-panel-foot[hidden]{
        display: none;
    }

    body:is(.page-view-services-services, .page-view-products-services) #filterPaneColumns .filter-checks{
        max-height: none;
        gap: 0;
    }

    body:is(.page-view-services-services, .page-view-products-services) .filter-hint{
        margin: .5rem 0 0;
        font-size: .64rem;
        line-height: 1.4;
        color: var(--ink-400);
    }

    /* ID / Name / Actions can't be switched off — the row would lose its identity. */
    body:is(.page-view-services-services, .page-view-products-services) .filter-check.is-locked{
        opacity: .55;
        cursor: default;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-check.is-locked:hover{
        background: none;
    }
    body:is(.page-view-services-services, .page-view-products-services) .filter-check.is-locked input{
        cursor: default;
    }

    /* Category cell: first selection as a badge, remaining count behind a "+N" pill. */
    body:is(.page-view-services-services, .page-view-products-services) .cat-cell{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 100%;
        min-width: 0;
    }

    body:is(.page-view-services-services, .page-view-products-services) .cat-cell .cat-badge{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    body:is(.page-view-services-services, .page-view-products-services) .cat-more{
        flex-shrink: 0;
        appearance: none;
        border: 1px solid var(--ink-200);
        background: var(--ink-50);
        color: var(--ink-600);
        font-family: inherit;
        font-size: .66rem;
        font-weight: 700;
        line-height: 1;
        padding: 3px 6px;
        border-radius: 10px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }

    body:is(.page-view-services-services, .page-view-products-services) .cat-more:hover,
    body:is(.page-view-services-services, .page-view-products-services) .cat-more:focus-visible,
    body:is(.page-view-services-services, .page-view-products-services) .cat-more.is-open{
        background: #e6f4ee;
        color: var(--brand-primary);
        border-color: rgba(2, 84, 45, .25);
        outline: none;
    }

    /* Rendered to <body> so the table's overflow container cannot clip it. */
    .cat-tooltip{
        position: fixed;
        z-index: 9999;
        max-width: 260px;
        padding: .45rem .55rem;
        background: var(--surface-primary, #fff);
        border: 1px solid var(--ink-200, #e4e7ec);
        border-radius: .5rem;
        box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
        font-size: .7rem;
        line-height: 1.45;
        color: var(--ink-700, #344054);
        opacity: 0;
        visibility: hidden;
        transition: opacity .12s ease;
        pointer-events: none;
    }

    .cat-tooltip.is-visible{
        opacity: 1;
        visibility: visible;
    }

    .cat-tooltip-title{
        font-size: .58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink-400, #98a2b3);
        margin-bottom: .25rem;
    }

    .cat-tooltip-item{
        padding: .12rem 0;
        white-space: normal;
        word-break: break-word;
    }

    .cat-tooltip-item + .cat-tooltip-item{
        border-top: 1px solid var(--ink-100, #f2f4f7);
    }

    /* Available badge styling */
    body:is(.page-view-services-services, .page-view-products-services) .available-badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(2, 84, 45, 0.12);
        color: var(--brand-primary);
        padding: 0.3rem 0.6rem;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.8rem;
        min-width: 44px;
        text-align: center;
        border: 1px solid rgba(2, 84, 45, 0.25);
    }

    /* Skeleton Loader */
    body.page-view-services-services .skeleton{
        background: linear-gradient(90deg, var(--surface-tertiary) 25%, var(--surface-secondary) 50%, var(--surface-tertiary) 75%);
        background-size: 200% 100%;
        animation: view-services-services--shimmer 1.5s infinite;
        border-radius: 0.375rem;
        height: 1.25rem;
        width: 100%;
    }

    body.page-view-services-services .skeleton.small{
        width: 60%;
    }

    body.page-view-services-services .skeleton.medium{
        width: 80%;
    }

    @keyframes view-services-services--shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    body.page-view-services-services .skeleton-row{
        cursor: default !important;
    }

    body.page-view-services-services .skeleton-row:hover{
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    /* Loading Indicator */
    body.page-view-services-services .inline-loader{
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--brand-primary);
        font-size: 0.875rem;
        font-weight: var(--font-weight-semibold);
    }

    body.page-view-services-services .inline-spinner{
        width: 16px;
        height: 16px;
        border: 2px solid var(--ink-200);
        border-top-color: var(--brand-primary);
        border-radius: 50%;
        animation: view-services-services--spin 0.6s linear infinite;
    }

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

    /* Table Actions */
    body.page-view-services-services .table-actions{
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        white-space: nowrap;
    }

    body.page-view-services-services .table-action-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 0.9rem;
        border-radius: 0.375rem;
        border: 1px solid;
        cursor: pointer;
        transition: var(--base);
        text-decoration: none;
    }

    body.page-view-services-services .table-action-btn.edit{
        color: var(--brand-primary);
        background: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-view-services-services .table-action-btn.edit:hover{
        background: var(--brand-primary);
        color: var(--surface-primary);
        transform: translateY(-1px);
        text-decoration: none;
    }

    body.page-view-services-services .table-action-btn.delete{
        color: #ef4444;
        background: var(--surface-primary);
        border-color: #ef4444;
    }

    body.page-view-services-services .table-action-btn.delete:hover{
        background: #ef4444;
        color: var(--surface-primary);
        transform: translateY(-1px);
        text-decoration: none;
    }

    body.page-view-services-services .table-action-btn:disabled{
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    /* Table Footer */
    body.page-view-services-services .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        background: var(--surface-secondary);
        border-top: 1px solid var(--ink-200);
        font-size: 0.8125rem;
        color: var(--ink-500);
        font-weight: var(--font-weight-medium);
    }

    /* Pagination */
    body.page-view-services-services .pagination{
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.page-view-services-services .pagination-btn{
        min-width: 2.25rem;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ink-200);
        border-radius: 0.5rem;
        background: var(--surface-primary);
        color: var(--ink-700);
        font-weight: var(--font-weight-semibold);
        font-size: 0.8125rem;
        cursor: pointer;
        transition: var(--base);
    }

    body.page-view-services-services .pagination-btn:hover:not(.disabled){
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
        transform: translateY(-1px);
    }

    body.page-view-services-services .pagination-btn.active{
        background: var(--brand-primary);
        color: var(--surface-primary);
        border-color: var(--brand-primary);
    }

    body.page-view-services-services .pagination-btn.disabled{
        background: var(--surface-tertiary);
        color: var(--ink-400);
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Status Badges */
    body.page-view-services-services .badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        font-weight: var(--font-weight-bold);
        border-radius: 0.5rem;
        text-align: center;
        min-width: 60px;
        height: 26px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    body.page-view-services-services .badge.success{
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    body.page-view-services-services .badge.warning{
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    body.page-view-services-services .badge.secondary{
        background: var(--surface-tertiary);
        color: var(--ink-600);
        border: 1px solid var(--ink-300);
    }

    body.page-view-services-services .badge.info{
        background: rgba(2, 84, 45, 0.1);
        color: var(--brand-primary);
        border: 1px solid rgba(2, 84, 45, 0.25);
    }

    /* Star Rating */
    body.page-view-services-services .rating{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        color: #fbbf24;
        font-size: 0.875rem;
        font-weight: var(--font-weight-semibold);
    }

    /* Numeric Values */
    body.page-view-services-services .numeric-value{
        font-weight: var(--font-weight-bold);
        color: var(--ink-900);
    }

    /* ── Confirmation Modal ── */
    body.page-view-services-services .modal-backdrop{
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    body.page-view-services-services .modal-backdrop.visible{
        opacity: 1;
        visibility: visible;
    }

    body.page-view-services-services .modal-content{
        background: var(--surface-primary);
        border-radius: 1.125rem;
        box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
        max-width: 420px;
        width: 92%;
        margin: 1rem;
        transform: translateY(18px) scale(0.97);
        opacity: 0;
        transition: transform .3s cubic-bezier(.34,1.36,.64,1), opacity .25s ease;
        overflow: hidden;
        position: relative;
    }

    body.page-view-services-services .modal-backdrop.visible .modal-content{
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Accent bar at top — colour swapped per type via JS class */
    body.page-view-services-services .modal-content::before{
        content: "";
        display: block;
        height: 4px;
        background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
        position: absolute;
        top: 0; left: 0; right: 0;
    }

    body.page-view-services-services .modal-content.modal-danger::before{
        background: linear-gradient(90deg, #ef4444, #b91c1c);
    }

    body.page-view-services-services .modal-header{
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.75rem 1.75rem 1rem;
    }

    /* Icon badge */
    body.page-view-services-services .modal-icon{
        width: 48px;
        height: 48px;
        border-radius: .75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
        background: rgba(2, 84, 45, .1);
        color: var(--brand-primary);
        border: 1.5px solid rgba(2, 84, 45, .15);
    }

    body.page-view-services-services .modal-icon.edit{
        background: rgba(2, 84, 45, .1);
        color: var(--brand-primary);
        border-color: rgba(2, 84, 45, .18);
    }

    body.page-view-services-services .modal-icon.delete{
        background: rgba(239, 68, 68, .1);
        color: #ef4444;
        border-color: rgba(239, 68, 68, .18);
    }

    body.page-view-services-services .modal-header-text{
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }

    body.page-view-services-services .modal-title{
        font-size: 1.05rem;
        font-weight: var(--font-weight-extrabold);
        color: var(--ink-900);
        margin: 0;
        letter-spacing: -.01em;
    }

    body.page-view-services-services .modal-subtitle-tag{
        font-size: .68rem;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--brand-primary);
        opacity: .75;
    }

    body.page-view-services-services .modal-divider{
        height: 1px;
        background: var(--ink-100);
        margin: 0 1.75rem;
    }

    body.page-view-services-services .modal-body{
        padding: 1.1rem 1.75rem 1.5rem;
    }

    body.page-view-services-services .modal-message{
        font-size: .875rem;
        color: var(--ink-500);
        margin: 0;
        line-height: 1.65;
    }

    body.page-view-services-services .modal-message strong{
        color: var(--ink-800);
        font-weight: var(--font-weight-semibold);
    }

    body.page-view-services-services .modal-actions{
        display: flex;
        gap: .625rem;
        justify-content: flex-end;
        padding: 0 1.75rem 1.5rem;
    }

    body.page-view-services-services .modal-btn{
        padding: .6rem 1.25rem;
        border-radius: .625rem;
        font-weight: var(--font-weight-bold);
        font-size: .8125rem;
        border: none;
        cursor: pointer;
        transition: all .18s ease;
        min-width: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
    }

    body.page-view-services-services .modal-btn.primary{
        background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        color: #fff;
        box-shadow: 0 2px 8px rgba(2,84,45,.25);
    }

    body.page-view-services-services .modal-btn.primary:hover:not(:disabled){
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(2,84,45,.3);
    }

    body.page-view-services-services .modal-btn.danger{
        background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
        color: #fff;
        box-shadow: 0 2px 8px rgba(239,68,68,.25);
    }

    body.page-view-services-services .modal-btn.danger:hover:not(:disabled){
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(239,68,68,.3);
    }

    body.page-view-services-services .modal-btn.secondary{
        background: var(--ink-50);
        color: var(--ink-700);
        border: 1px solid var(--ink-200);
    }

    body.page-view-services-services .modal-btn.secondary:hover{
        background: var(--ink-100);
        border-color: var(--ink-300);
        transform: translateY(-1px);
    }

    body.page-view-services-services .modal-btn:disabled{
        opacity: .55;
        cursor: not-allowed;
        transform: none !important;
    }

    /* Button Spinner */
    body.page-view-services-services .btn-spinner{
        width: 14px;
        height: 14px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: view-services-services--spin 0.6s linear infinite;
    }

    /* Empty State */
    body.page-view-services-services .empty-state{
        text-align: center;
        padding: 4rem 2rem;
        color: var(--ink-500);
    }

    body.page-view-services-services .empty-state i{
        font-size: 4rem;
        color: var(--brand-primary);
        margin-bottom: 1.5rem;
        display: block;
        opacity: 0.5;
    }

    body.page-view-services-services .empty-state h3{
        font-size: 1.5rem;
        font-weight: var(--font-weight-bold);
        color: var(--ink-700);
        margin-bottom: 0.75rem;
    }

    body.page-view-services-services .empty-state p{
        color: var(--ink-500);
        margin: 0;
        font-size: 1rem;
    }

    /* Animations */
    body.page-view-services-services .fade-in{
        animation: view-services-services--fadeIn 0.4s ease-out;
    }

    @keyframes view-services-services--fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes view-services-services--slideInRight {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Responsive Design */
    @media (max-width: 992px) {
        body.page-view-services-services .controls-grid{
            /* flex-direction: column; */
            align-items: stretch;
        }

        body.page-view-services-services .search-container{
            min-width: unset;
        }

        body.page-view-services-services .custom-dropdown{
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        body.page-view-services-services .services-container{
            padding: 0.75rem;
        }

        body.page-view-services-services .header-title{
            font-size: 1.5rem;
        }

        body.page-view-services-services .table-footer{
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }

        /* compact table for small screens */
        body.page-view-services-services .services-table{
            font-size: 0.78rem;
        }

        body.page-view-services-services .service-name{ font-size: 0.95rem; }

        body.page-view-services-services .pagination{
            justify-content: center;
        }

        body.page-view-services-services .service-header-actions{
            width: 100%;
            gap: .625rem;
        }

        body.page-view-services-services .service-header-actions .btn{
            flex: 1 1 0;
            min-width: 0;
            justify-content: center;
            white-space: nowrap;
        }

        body.page-view-services-services .table-scroll-wrapper.is-empty{
            overflow-x: hidden;
        }

        body.page-view-services-services .table-scroll-wrapper.is-empty .services-table{
            min-width: 100%;
            table-layout: auto;
        }

        body.page-view-services-services .table-scroll-wrapper.is-empty .services-table thead{
            display: none;
        }

        body.page-view-services-services .table-scroll-wrapper.is-empty .table-empty-state-content{
            min-height: 300px;
            padding: 2.5rem 1rem;
        }

        body.page-view-services-services .table-scroll-wrapper.is-empty .empty-state i{
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        body.page-view-services-services .table-scroll-wrapper.is-empty .empty-state h3{
            font-size: 1.2rem;
        }

        body.page-view-services-services .table-scroll-wrapper.is-empty .empty-state p{
            font-size: .85rem;
        }

        body.page-view-services-services .modal-content{
            width: 95%;
        }

        body.page-view-services-services .modal-actions{
            flex-direction: column;
        }
    }

    body.page-view-services-services .btn-primary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1.5px solid var(--brand-primary);
        padding: 0.45rem 1rem;
        border-radius: 0.5rem;
        font-weight: var(--font-weight-semibold);
        font-size: 0.8125rem;
        text-decoration: none;
        cursor: pointer;
        transition: var(--base);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        white-space: nowrap;
    }

    body.page-view-services-services .btn-primary:hover{
        background: var(--brand-primary);
        color: var(--surface-primary);
        text-decoration: none;
    }

    body.page-view-services-services .btn-secondary{
        background: var(--surface-primary);
        color: var(--brand-primary);
        border: 1px solid var(--ink-200);
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: var(--font-weight-semibold);
        font-size: 0.8125rem;
        text-decoration: none;
        cursor: pointer;
        transition: var(--base);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        white-space: nowrap;
    }

    body.page-view-services-services .btn-secondary:hover{
        background: rgba(2, 84, 45, 0.08);
        transform: translateY(-1px);
        text-decoration: none;
        border-color: var(--brand-primary);
    }

    /* Dark mode */
    html[data-theme="dark"] body.page-view-services-services .services-container{
        color-scheme: dark;
    }

    html[data-theme="dark"] body.page-view-services-services .header-controls-wrapper,
html[data-theme="dark"] body.page-view-services-services .table-container{
        background: #0d1813;
        border-color: #2b3b33;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    html[data-theme="dark"] body.page-view-services-services .header-title{
        color: #f3f7f5;
    }

    html[data-theme="dark"] body.page-view-services-services .header-subtitle,
html[data-theme="dark"] body.page-view-services-services .search-icon{
        color: #9dafb6;
    }

    html[data-theme="dark"] body.page-view-services-services .search-input,
html[data-theme="dark"] body.page-view-services-services .dropdown-trigger,
html[data-theme="dark"] body.page-view-services-services .custom-dropdown .dropdown-menu{
        background: #0b1511;
        border-color: #2c3d35;
        color: #edf4f0;
    }

    html[data-theme="dark"] body.page-view-services-services .search-input::placeholder{
        color: #90a2ad;
        opacity: 1;
    }

    html[data-theme="dark"] body.page-view-services-services .search-input:focus,
html[data-theme="dark"] body.page-view-services-services .dropdown-trigger:hover,
html[data-theme="dark"] body.page-view-services-services .dropdown-trigger:focus,
html[data-theme="dark"] body.page-view-services-services .dropdown-trigger.active{
        background: #0f1d17;
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
    }

    html[data-theme="dark"] body.page-view-services-services .dropdown-option{
        color: #dce8e1;
    }

    html[data-theme="dark"] body.page-view-services-services .dropdown-option:hover,
html[data-theme="dark"] body.page-view-services-services .dropdown-option.selected{
        background: rgba(34, 197, 94, 0.12);
        color: #86efac;
    }

    html[data-theme="dark"] body.page-view-services-services .sort-icon,
html[data-theme="dark"] body.page-view-services-services .dropdown-arrow{
        color: #86efac;
    }

    html[data-theme="dark"] body.page-view-services-services .services-table thead th{
        background: #102019;
        color: #bbf7d0;
        border-bottom: 1px solid #31423a;
    }

    html[data-theme="dark"] body.page-view-services-services .services-table tbody tr,
html[data-theme="dark"] body.page-view-services-services .services-table tbody tr:nth-child(even){
        background: #0d1813;
        border-color: #26372f;
    }

    html[data-theme="dark"] body.page-view-services-services .services-table tbody tr:nth-child(even){
        background: #0b1611;
    }

    html[data-theme="dark"] body.page-view-services-services .services-table tbody tr:hover:not(.skeleton-row){
        background: #12251b;
    }

    html[data-theme="dark"] body.page-view-services-services .services-table td,
html[data-theme="dark"] body.page-view-services-services .services-table td:first-child,
html[data-theme="dark"] body.page-view-services-services .service-name,
html[data-theme="dark"] body.page-view-services-services .numeric-value,
html[data-theme="dark"] body.page-view-services-services .rating{
        color: #edf4f0;
    }

    html[data-theme="dark"] body.page-view-services-services .cat-badge{
        background: rgba(34, 197, 94, 0.12);
        color: #bbf7d0;
        border: 1px solid rgba(74, 222, 128, 0.24);
    }

    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-trigger{
        background: rgba(148, 163, 184, .08);
        border-color: rgba(148, 163, 184, .22);
        color: #cbd5cf;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-trigger:hover,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-trigger.is-open,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-trigger.has-filters{
        border-color: rgba(74, 222, 128, .4);
        color: #bbf7d0;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-count{
        background: #22c55e;
        color: #06281a;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-panel{
        background: #16211c;
        border-color: rgba(148, 163, 184, .2);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-panel-head,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-panel-foot,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-group + .filter-group{
        border-color: rgba(148, 163, 184, .14);
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-panel-title{ color: #e2e8e4; }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-tab{ color: #8fa39a; }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-tab:hover{ color: #cbd5cf; }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-tab.is-active{
        color: #bbf7d0;
        border-bottom-color: #4ade80;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-tab-note{
        background: rgba(148, 163, 184, .16);
        color: #8fa39a;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-hint{ color: #7f9389; }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-group-label{ color: #7f9389; }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-check{ color: #cbd5cf; }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-check:hover{
        background: rgba(148, 163, 184, .08);
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-pill,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-range-input{
        background: rgba(148, 163, 184, .08);
        border-color: rgba(148, 163, 184, .2);
        color: #cbd5cf;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-pill.is-active{
        background: rgba(34, 197, 94, .16);
        border-color: rgba(74, 222, 128, .32);
        color: #bbf7d0;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .active-chip{
        background: rgba(34, 197, 94, .14);
        border-color: rgba(74, 222, 128, .26);
        color: #bbf7d0;
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .active-chip:hover{
        background: rgba(34, 197, 94, .22);
    }
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .active-filters-label,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .active-filters-clear,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .filter-btn-ghost{ color: #8fa39a; }

    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .cat-more{
        background: rgba(148, 163, 184, .12);
        border-color: rgba(148, 163, 184, .22);
        color: #9dafb6;
    }

    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .cat-more:hover,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .cat-more:focus-visible,
    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .cat-more.is-open{
        background: rgba(34, 197, 94, .14);
        border-color: rgba(74, 222, 128, .28);
        color: #bbf7d0;
    }

    html[data-theme="dark"] .cat-tooltip{
        background: #16211c;
        border-color: rgba(148, 163, 184, .2);
        color: #d7e2dc;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    }

    html[data-theme="dark"] .cat-tooltip-title{ color: #7f9389; }
    html[data-theme="dark"] .cat-tooltip-item + .cat-tooltip-item{
        border-top-color: rgba(148, 163, 184, .14);
    }

    html[data-theme="dark"] body:is(.page-view-services-services, .page-view-products-services) .available-badge,
html[data-theme="dark"] body.page-view-services-services .badge.info{
        background: rgba(16, 185, 129, 0.08);
        color: #d1fae5;
        border-color: rgba(52, 211, 153, 0.18);
    }

    html[data-theme="dark"] body.page-view-services-services .badge.secondary{
        background: #121e18;
        color: #e1ebe5;
        border-color: #3a4b42;
    }

    html[data-theme="dark"] body.page-view-services-services .badge.warning{
        background: rgba(245, 158, 11, 0.14);
        color: #fde68a;
        border-color: rgba(245, 158, 11, 0.42);
    }

    html[data-theme="dark"] body.page-view-services-services .table-scroll-wrapper::-webkit-scrollbar-track{
        background: #0a130f;
    }

    html[data-theme="dark"] body.page-view-services-services .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: #365347;
    }


/* ==========================================================
   Template: wallet.html (page-wallet)
   ========================================================== */

    body.page-wallet{
        --primary-green: #02542D;
        --primary-green-dark: #01402A;
        --primary-green-light: #02542d15;
        --primary-green-ghost: #02542d08;
        --accent-emerald: #10b981;
        --accent-mint: #6ee7b7;
        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;
        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;
        --border-200: #e5e7eb;
        --surface-canvas: #f4f7f6;
        --success: #22c55e;
        --warning: #f59e0b;
        --error: #ef4444;
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
        --radius-sm: .375rem;
        --radius-md: .5rem;
        --radius-lg: .75rem;
        --radius-xl: 1rem;
        --transition: all .3s cubic-bezier(.4, 0, .2, 1);
        --transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);
        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
        --primary: var(--primary-green);
        --white: #ffffff;
        --hover-shadow: 0 8px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    body.page-wallet .dashboard-container{
        margin: 0 auto;
        padding: 1rem 1rem 2.25rem;
        color: var(--text-700);
    }

    body.page-wallet .wallet-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: 14px;
        padding: 1rem 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-xs);
        position: relative;
        overflow: visible;
        display: grid;
        gap: .85rem;
    }

    body.page-wallet .wallet-header-card::before{
        display: none;
    }

    body.page-wallet .wallet-header-main{
        min-width: 0;
        position: relative;
        z-index: 1;
    }

    body.page-wallet #pageTitle{
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0 0 .3rem 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -.01em;
    }

    body.page-wallet .page-subtitle{
        font-size: .75rem;
        color: var(--text-500);
        font-weight: 600;
        margin: 0;
        letter-spacing: .02em;
    }

    body.page-wallet .btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        height: 40px;
        padding: 0 .9rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        font-size: .8125rem;
        text-decoration: none;
        border: 1px solid var(--border-200);
        cursor: pointer;
        transition: var(--transition-fast);
        font-family: inherit;
        background: var(--surface-white);
        color: var(--primary-green);
    }

    body.page-wallet .btn:hover{
        background: var(--primary-green-light);
        color: var(--primary-green);
        border-color: var(--primary-green-light);
    }

    body.page-wallet .controls-section{
        background: var(--surface-canvas);
        border: 1px solid var(--surface-gray-200);
        border-radius: 12px;
        box-shadow: none;
        padding: 10px;
        flex-shrink: 0;
        min-width: 0;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    body.page-wallet .controls-grid{
        display: grid;
        grid-template-columns: minmax(260px, 1.8fr) minmax(170px, .8fr) minmax(140px, .7fr) minmax(160px, .9fr) auto auto;
        gap: 10px;
        align-items: end;
        width: 100%;
    }

    body.page-wallet .controls-section .search-input,
body.page-wallet .controls-section .dropdown-trigger,
body.page-wallet .controls-section .control-input{
        background: var(--surface-white);
    }

    body.page-wallet .control-field{
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    body.page-wallet .control-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        padding-left: 2px;
    }

    body.page-wallet .control-input{
        width: 100%;
        height: 40px;
        padding: 0 .85rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .8125rem;
        transition: var(--transition-fast);
        outline: none;
        font-family: inherit;
    }

    body.page-wallet .control-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-wallet .search-container{
        position: relative;
        min-width: 0;
    }

    body.page-wallet .search-icon{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: .875rem;
        color: var(--text-500);
        pointer-events: none;
    }

    body.page-wallet .search-input{
        width: 100%;
        height: 40px;
        padding: 0 10px 0 32px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: .85rem;
        transition: var(--transition-fast);
        outline: none;
        font-family: inherit;
    }

    body.page-wallet .search-input:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-wallet .custom-dropdown{
        position: relative;
        width: 100%;
        z-index: 100;
    }

    body.page-wallet .dropdown-trigger{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0 12px;
        height: 40px;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
        outline: none;
        width: 100%;
        font-family: inherit;
    }

    body.page-wallet .dropdown-trigger:hover{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }

    body.page-wallet .dropdown-trigger:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-wallet .dropdown-trigger.active{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        background: var(--primary-green-ghost);
    }

    body.page-wallet .dropdown-arrow{
        transition: var(--transition-fast);
        color: var(--primary-green);
        font-size: .875rem;
    }

    body.page-wallet .dropdown-trigger.active .dropdown-arrow{
        transform: rotate(180deg);
    }

    body.page-wallet .custom-dropdown .dropdown-menu{
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: var(--transition-fast);

    }

    body.page-wallet .custom-dropdown .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        overflow-y: auto;
    }

    body.page-wallet .dropdown-option{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--text-700);
        font-size: .8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-fast);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
    }

    body.page-wallet .dropdown-option:hover,
body.page-wallet .dropdown-option:focus,
body.page-wallet .dropdown-option.selected{
        background: var(--primary-green-light);
        color: var(--primary-green);
        outline: none;
    }

    body.page-wallet select.hidden-select{
        display: none;
    }

    body.page-wallet .skeleton{
        background: linear-gradient(90deg, var(--surface-gray-100) 25%, var(--surface-gray-50) 50%, var(--surface-gray-100) 75%);
        background-size: 200% 100%;
        animation: wallet--shimmer 1.5s infinite;
        border-radius: .375rem;
        height: 1rem;
        width: 100%;
    }

    body.page-wallet .skeleton.small{
        width: 60%;
    }

    body.page-wallet .skeleton.medium{
        width: 80%;
    }

    @keyframes wallet--shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    body.page-wallet .skeleton-row{
        cursor: default !important;
        pointer-events: none;
    }

    body.page-wallet .skeleton-row:hover{
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    body.page-wallet .stats-grid{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 14px;
    }

    body.page-wallet .stat-card{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--surface-white);
        border: 1px solid var(--surface-gray-200);
        box-shadow: none;
        transition: var(--transition-fast);
        color: inherit;
        position: relative;
        overflow: hidden;
        cursor: default;
    }

    body.page-wallet .stat-card:hover{
        transform: none;
        box-shadow: none;
        border-color: var(--surface-gray-200);
    }

    body.page-wallet .stat-card.primary{
        background: var(--primary);
        color: var(--white);
        transform: none;
        box-shadow: none;
        border-color: var(--primary);
        cursor: default;
    }

    body.page-wallet .stat-card.primary .stat-icon{
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    body.page-wallet .stat-card.primary .stat-value{
        color: var(--white);
    }

    body.page-wallet .stat-card.primary .stat-label{
        color: rgba(255, 255, 255, 0.8);
    }

    body.page-wallet .stat-card.primary .stat-meta,
body.page-wallet .stat-card.primary .stat-meta strong{
        color: rgba(255, 255, 255, 0.85);
    }

    body.page-wallet .stat-icon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-green-light);
        color: var(--primary-green);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    body.page-wallet .stat-label{
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-500);
        font-weight: 700;
        margin-bottom: 2px;
    }

    body.page-wallet .stat-value{
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--text-900);
    }

    body.page-wallet .stat-meta{
        font-size: .7rem;
        color: var(--text-500);
        margin-top: 2px;
        font-weight: 500;
    }

    body.page-wallet .stat-meta strong{
        color: var(--primary-green);
    }

    body.page-wallet .table-container{
        background: var(--surface-white);
        border: 1px solid var(--surface-gray-200);
        border-radius: 14px;
        box-shadow: none;
        overflow: hidden;
    }

    body.page-wallet .table-scroll-wrapper{
        overflow-x: auto;
        max-width: 100%;
    }

    body.page-wallet .table-scroll-wrapper::-webkit-scrollbar{
        height: 8px;
    }

    body.page-wallet .table-scroll-wrapper::-webkit-scrollbar-track{
        background: var(--surface-gray-100);
        border-radius: .375rem;
    }

    body.page-wallet .table-scroll-wrapper::-webkit-scrollbar-thumb{
        background: var(--primary-green);
        border-radius: .375rem;
    }

    body.page-wallet .custom-table{
        width: 100%;
        min-width: 920px;
        border-collapse: separate;
        border-spacing: 0;
        font-size: .85rem;
        table-layout: fixed;
    }

    body.page-wallet .custom-table thead th{
        background: var(--surface-white);
        color: #2f6b52;
        border: none;
        border-bottom: 2px solid var(--surface-gray-200);
        font-weight: 700;
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: .75rem 1rem;
        white-space: nowrap;
        vertical-align: middle;
        position: sticky;
        top: 0;
        text-align: left;
    }

    body.page-wallet .custom-table th:nth-child(1){ width: 32%; }
    body.page-wallet .custom-table th:nth-child(2){ width: 26%; }
    body.page-wallet .custom-table th:nth-child(3){ width: 16%; }
    body.page-wallet .custom-table th:nth-child(4){ width: 20%; text-align: right; font-variant-numeric: tabular-nums; }
    body.page-wallet .custom-table th:nth-child(5){ width: 6%; text-align: center; }
    body.page-wallet .custom-table td:nth-child(4),
body.page-wallet .custom-table .summary-total-cell{ text-align: right; font-variant-numeric: tabular-nums; }

    body.page-wallet .custom-table tbody tr{
        transition: var(--transition-fast);
    }

    body.page-wallet .custom-table tbody tr:hover:not(.skeleton-row):not(.empty-row):not(.group-detail-row){
        background: var(--primary-green-ghost);
    }

    body.page-wallet .custom-table td{
        padding: .75rem 1rem;
        color: #4b5563;
        border-bottom: 1px solid var(--surface-gray-200);
        vertical-align: middle;
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-wallet .group-summary-row{
        cursor: pointer;
    }

    body.page-wallet .group-summary-row.expanded td{
        background: #f4faf6;
    }

    body.page-wallet .group-summary-row td:first-child{
        border-left: 3px solid transparent;
    }

    body.page-wallet .group-summary-row.expanded td:first-child{
        border-left-color: var(--primary-green);
    }

    body.page-wallet .group-summary-row:focus-visible{
        outline: 2px solid var(--primary-green);
        outline-offset: -2px;
    }

    body.page-wallet .summary-value{
        font-size: .86rem;
        font-weight: 600;
        color: #374151;
        line-height: 1.3;
    }

    body.page-wallet .summary-subline{
        margin-top: 4px;
        font-size: .72rem;
        color: #6b7280;
        line-height: 1.35;
    }

    body.page-wallet .summary-date-cell .summary-value{
        color: #6b7280;
        font-weight: 500;
    }

    body.page-wallet .summary-type-cell .summary-value{
        color: #4b5563;
        font-weight: 500;
    }

    body.page-wallet .summary-status-cell{
        white-space: nowrap;
    }

    body.page-wallet .summary-total-cell{
        text-align: right;
    }

    body.page-wallet .summary-total-cell .summary-value{
        font-variant-numeric: tabular-nums;
    }

    body.page-wallet .group-toggle-cell{
        text-align: center;
    }

    body.page-wallet .group-toggle-btn{
        width: 32px;
        height: 32px;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-sm);
        background: var(--surface-white);
        color: var(--primary-green);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-wallet .group-toggle-btn:hover{
        border-color: var(--primary-green);
        background: var(--primary-green-light);
    }

    body.page-wallet .group-toggle-btn i{
        font-size: .82rem;
        transition: transform var(--transition-fast);
    }

    body.page-wallet .group-summary-row[aria-expanded="true"] .group-toggle-btn i{
        transform: rotate(180deg);
    }

    body.page-wallet .group-detail-row td{
        padding: 0 12px 12px;
        border-bottom: 1px solid var(--surface-gray-200);
        background: var(--surface-gray-50);
    }

    body.page-wallet .group-detail-panel{
        border: 1px solid var(--surface-gray-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        overflow: hidden;
    }

    body.page-wallet .group-detail-scroll{
        overflow-x: auto;
    }

    body.page-wallet .group-detail-scroll::-webkit-scrollbar{
        height: 8px;
    }

    body.page-wallet .group-detail-scroll::-webkit-scrollbar-track{
        background: var(--surface-gray-100);
        border-radius: .375rem;
    }

    body.page-wallet .group-detail-scroll::-webkit-scrollbar-thumb{
        background: var(--primary-green);
        border-radius: .375rem;
    }

    body.page-wallet .statement-table{
        width: 100%;
        min-width: 860px;
        border-collapse: collapse;
        font-size: .8125rem;
        background: var(--surface-white);
    }

    body.page-wallet .statement-table thead th{
        background: var(--surface-white);
        color: #2f6b52;
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: 11px 12px;
        border-bottom: 2px solid var(--surface-gray-200);
        text-align: left;
        white-space: nowrap;
    }

    body.page-wallet .statement-table tbody td{
        padding: 11px 12px;
        border-bottom: 1px solid var(--surface-gray-200);
        color: #4b5563;
        vertical-align: middle;
        font-weight: 500;
    }

    body.page-wallet .statement-table tbody tr:nth-child(even){
        background: #f9fbfa;
    }

    body.page-wallet .statement-table tbody tr:hover{
        background: var(--primary-green-ghost);
    }

    body.page-wallet .statement-table tbody tr:last-child td{
        border-bottom: none;
    }

    body.page-wallet .statement-table th:nth-child(3),
body.page-wallet .statement-table th:nth-child(4),
body.page-wallet .statement-table th:nth-child(5),
body.page-wallet .statement-table td:nth-child(3),
body.page-wallet .statement-table td:nth-child(4),
body.page-wallet .statement-table td:nth-child(5){
        text-align: right;
    }

    body.page-wallet .statement-order-id{
        white-space: nowrap;
    }

    body.page-wallet .statement-date{
        white-space: nowrap;
        color: #6b7280;
    }

    body.page-wallet .statement-table tbody td:nth-child(3){
        color: #4b5563;
    }

    body.page-wallet .statement-money{
        display: inline-block;
        min-width: 100px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: .01em;
    }

    body.page-wallet .statement-placeholder{
        color: var(--text-500);
    }

    body.page-wallet .amount-credit{
        color: #15803d;
        font-weight: 600;
    }

    body.page-wallet .amount-debit{
        color: #dc2626;
        font-weight: 600;
    }

    body.page-wallet .statement-table tbody td,
body.page-wallet .statement-table tbody .statement-order-id,
body.page-wallet .statement-table tbody .statement-date,
body.page-wallet .statement-table tbody .amount-credit,
body.page-wallet .statement-table tbody .amount-debit{
        color: #000;
        font-weight: 500;
    }

    body.page-wallet .muted-text{
        color: var(--text-500);
    }

    body.page-wallet .table-money{
        display: inline-block;
        min-width: 100px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: .01em;
    }

    body.page-wallet .table-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        background: var(--surface-white);
        border-top: 1px solid var(--surface-gray-200);
        font-size: .8125rem;
        color: var(--text-500);
        gap: 12px;
    }

    body.page-wallet .pagination{
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.page-wallet .pagination-btn{
        min-width: 2.25rem;
        text-align: center;
        padding: .4rem .6rem;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        color: var(--text-700);
        font-weight: 600;
        font-size: .8125rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    body.page-wallet .pagination-btn:hover:not(.disabled){
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
        transform: translateY(-1px);
    }

    body.page-wallet .pagination-btn.active{
        background: var(--primary-green);
        color: #fff;
        border-color: var(--primary-green);
    }

    body.page-wallet .pagination-btn.disabled{
        background: var(--surface-gray-100);
        color: var(--text-500);
        cursor: not-allowed;
    }

    body.page-wallet .status-badge{
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    body.page-wallet .status-pending{
        background: rgba(2, 84, 45, .08);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, .2);
    }

    body.page-wallet .status-completed{
        background: rgba(2, 84, 45, .12);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, .25);
    }

    body.page-wallet .status-processing{
        background: rgba(2, 84, 45, .06);
        color: var(--primary-green);
        border: 1px solid rgba(2, 84, 45, .18);
    }

    body.page-wallet .status-failed{
        background: rgba(220, 38, 38, .1);
        color: #b91c1c;
        border: 1px solid rgba(220, 38, 38, .22);
    }

    body.page-wallet .status-active{
        background: rgba(34, 197, 94, .15);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, .3);
    }

    body.page-wallet .status-inactive{
        background: rgba(107, 114, 128, .15);
        color: #6b7280;
        border: 1px solid rgba(107, 114, 128, .3);
    }

    body.page-wallet .empty-state{
        text-align: center;
        padding: 48px 16px;
        color: var(--text-500);
    }

    body.page-wallet .empty-state i{
        font-size: 3rem;
        color: var(--primary-green);
        margin-bottom: 16px;
        display: block;
    }

    body.page-wallet .empty-state h3{
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-700);
        margin-bottom: 8px;
    }

    body.page-wallet .empty-state p{
        color: var(--text-500);
        margin: 0;
    }

    body.page-wallet .empty-row td{
        text-align: center;
        padding: 3rem 1.5rem !important;
        color: var(--text-500);
    }

    body.page-wallet .fade-in{
        animation: wallet--fadeIn .4s ease-out;
    }

    @keyframes wallet--fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: none; }
    }

    body.page-wallet .stat-card:focus,
body.page-wallet .btn:focus,
body.page-wallet .search-input:focus,
body.page-wallet .dropdown-trigger:focus,
body.page-wallet .dropdown-option:focus,
body.page-wallet .pagination-btn:focus{
        outline: 2px solid var(--primary-green);
        outline-offset: 2px;
    }

    @media (max-width: 1200px) {
        body.page-wallet .controls-grid{
            grid-template-columns: repeat(5, minmax(120px, 1fr));
            align-items: end;
        }

        body.page-wallet .search-container{
            grid-column: 1 / -1;
        }

        body.page-wallet .custom-dropdown{
            min-width: 150px;
        }
    }

    @media (max-width: 768px) {
        body.page-wallet .dashboard-container{
            padding: .75rem;
        }

        body.page-wallet .stats-grid{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        body.page-wallet .controls-section{
            width: 100%;
            min-width: 0;
        }

        body.page-wallet .controls-grid{
            grid-template-columns: 1fr;
            gap: 12px;
        }

        body.page-wallet .custom-dropdown,
body.page-wallet .search-container,
body.page-wallet .control-field,
body.page-wallet .btn{
            width: 100%;
            min-width: 0;
        }

        body.page-wallet .table-footer{
            flex-direction: column;
            align-items: stretch;
        }

        body.page-wallet #infoBox{
            text-align: center;
        }

        body.page-wallet .custom-table{
            font-size: .8125rem;
        }

        body.page-wallet .custom-table td,
body.page-wallet .custom-table th{
            padding: 10px 8px;
        }

    }

    /* ── Hero Bento ──────────────────────────────────── */
    body.page-wallet .hero-bento{
        display: grid;
        grid-template-columns: 70% 30%;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }
    body.page-wallet .hero-balance-card{
        background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
        border-radius: 1.25rem;
        padding: 1.25rem 1.75rem;
        color: #fff;
        position: relative;
        overflow: hidden;
        min-height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 8px 32px rgba(2,84,45,.25);
    }
    body.page-wallet .hero-balance-card::after{
        content: "";
        position: absolute;
        right: -40px; bottom: -40px;
        width: 200px; height: 200px;
        background: rgba(255,255,255,.05);
        border-radius: 50%;
        pointer-events: none;
    }
    body.page-wallet .hero-balance-label{
        font-size: .72rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .1em; opacity: .75; margin: 0 0 .375rem;
    }
    body.page-wallet .hero-balance-amount{
        font-size: 3rem; font-weight: 800; letter-spacing: -.03em;
        line-height: 1.1; margin: 0;
    }
    body.page-wallet .hero-balance-bottom{
        display: flex; justify-content: space-between; align-items: flex-end;
        gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1;
    }
    body.page-wallet .hero-chips{ display: flex; gap: .625rem; flex-wrap: wrap; }
    body.page-wallet .hero-chip{
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.15);
        backdrop-filter: blur(8px);
        border-radius: .75rem;
        padding: .5rem .875rem;
        min-width: 110px;
    }
    body.page-wallet .hero-chip-label{
        font-size: .6rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .08em; opacity: .65; margin: 0 0 .25rem;
    }
    body.page-wallet .hero-chip-value{ font-size: .875rem; font-weight: 700; margin: 0; }
    body.page-wallet .hero-manage-btn{
        display: inline-flex; align-items: center; gap: .375rem;
        background: #fff; color: var(--primary-green);
        padding: .625rem 1.25rem; border-radius: .875rem;
        font-weight: 700; font-size: .8125rem; border: none;
        cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15);
        transition: transform .15s ease, box-shadow .15s ease;
        white-space: nowrap;
    }
    body.page-wallet .hero-manage-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }

    body.page-wallet .hero-payout-card{
        background: var(--surface-white);
        border: 1px solid var(--surface-gray-200);
        border-radius: 1.25rem;
        padding: 1.75rem;
        display: flex; flex-direction: column;
        justify-content: center; gap: 0;
        box-shadow: var(--shadow-xs);
    }
    body.page-wallet .payout-info-item{ padding: 1rem 0; }
    body.page-wallet .payout-info-item + .payout-info-item{ border-top: 1px solid var(--surface-gray-200); }
    body.page-wallet .payout-info-label{
        font-size: .62rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .08em; color: var(--text-500); margin: 0 0 .625rem;
    }
    body.page-wallet .payout-info-row{ display: flex; align-items: center; gap: .75rem; }
    body.page-wallet .payout-info-icon{
        font-size: 1.75rem; color: var(--primary-green); line-height: 1;
    }
    body.page-wallet .payout-info-main{ flex: 1; }
    body.page-wallet .payout-info-value{ font-size: 1.2rem; font-weight: 800; color: var(--text-900); margin: 0; }
    body.page-wallet .payout-info-sub{ font-size: .75rem; color: var(--text-500); font-weight: 500; margin: .125rem 0 0; }
    body.page-wallet .payout-change-btn{
        font-size: .72rem; font-weight: 700; color: var(--primary-green);
        background: none; border: none; cursor: pointer; padding: 0;
        text-decoration: underline; text-underline-offset: 2px;
    }

    /* ── Filters Bar ─────────────────────────────────── */
    body.page-wallet .filters-bar{
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
        padding: .625rem 0;
    }
    body.page-wallet .filters-bar-left{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    body.page-wallet .activity-title{
        font-size: 1.15rem; font-weight: 800; color: var(--primary-green);
        margin: 0; letter-spacing: -.01em;
    }
    body.page-wallet .ftab-group{
        display: flex; background: var(--surface-gray-100);
        border-radius: .625rem; padding: 3px; gap: 2px;
    }
    body.page-wallet .ftab{
        padding: .35rem .9rem; border: none; background: none;
        border-radius: .5rem; font-size: .78rem; font-weight: 700;
        color: var(--text-500); cursor: pointer; transition: var(--transition-fast);
        font-family: inherit;
    }
    body.page-wallet .ftab.active{ background: var(--surface-white); color: var(--primary-green); box-shadow: var(--shadow-xs); }
    body.page-wallet .ftab:hover:not(.active){ color: var(--primary-green); }
    body.page-wallet .filters-bar-right{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    body.page-wallet .filt-select,
body.page-wallet .filt-input{
        height: 36px; border: 1px solid var(--surface-gray-200); border-radius: .625rem;
        background: var(--surface-white); color: var(--text-700);
        font-size: .78rem; font-weight: 600; font-family: inherit;
        padding: 0 .75rem; outline: none; cursor: pointer;
        transition: var(--transition-fast);
    }
    body.page-wallet .filt-select:focus,
body.page-wallet .filt-input:focus{ border-color: var(--primary-green); box-shadow: 0 0 0 2px var(--primary-green-light); }
    body.page-wallet .filt-icon-btn{
        width: 36px; height: 36px; border: 1px solid var(--surface-gray-200);
        border-radius: .625rem; background: var(--surface-white);
        color: var(--text-500); display: inline-flex; align-items: center;
        justify-content: center; cursor: pointer; transition: var(--transition-fast);
        font-size: .875rem;
    }
    body.page-wallet .filt-icon-btn:hover{ color: var(--primary-green); border-color: var(--primary-green); background: var(--primary-green-light); }

    /* ── Custom Dropdown (filter / view-mode) ─────────── */
    body.page-wallet .wallet-dropdown{ position: relative; }
    body.page-wallet .wallet-dropdown-trigger{
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; height: 36px; padding: 0 .75rem;
        background: var(--surface-white); border: 1px solid var(--surface-gray-200);
        border-radius: .625rem; color: var(--text-700);
        font-weight: 600; font-size: .78rem; font-family: inherit;
        cursor: pointer; white-space: nowrap; min-width: 140px;
        transition: var(--transition-fast); outline: none;
    }
    body.page-wallet .wallet-dropdown-trigger:hover{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
    }
    body.page-wallet .wallet-dropdown-trigger.active{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 2px var(--primary-green-light);
        background: rgba(2,84,45,.05);
    }
    body.page-wallet .wallet-dropdown-arrow{
        font-size: .68rem; color: var(--primary-green);
        transition: transform .18s ease; flex-shrink: 0;
    }
    body.page-wallet .wallet-dropdown-trigger.active .wallet-dropdown-arrow{ transform: rotate(180deg); }
    body.page-wallet .wallet-dropdown-menu{
        position: absolute; top: calc(100% + 5px); left: 0;
        min-width: 100%; background: var(--surface-white);
        border: 1px solid var(--surface-gray-200); border-radius: .625rem;
        box-shadow: 0 10px 28px rgba(0,0,0,.12); z-index: 9999;
        overflow: hidden; opacity: 0; visibility: hidden;
        transform: translateY(-6px); transition: var(--transition-fast);
    }
    body.page-wallet .wallet-dropdown-menu.show{
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    body.page-wallet .wallet-dropdown-option{
        display: flex; align-items: center; gap: 8px;
        width: 100%; padding: 9px 13px; border: none; background: none;
        color: var(--text-700); font-size: .8rem; font-weight: 500;
        font-family: inherit; cursor: pointer; text-align: left;
        transition: var(--transition-fast);
    }
    body.page-wallet .wallet-dropdown-option:hover{ background: var(--primary-green-light); color: var(--primary-green); }
    body.page-wallet .wallet-dropdown-option.selected{
        background: rgba(2,84,45,.08); color: var(--primary-green); font-weight: 700;
    }

    /* ── Week Cards (Accordion) ──────────────────────── */
    body.page-wallet .payout-list{ display: flex; flex-direction: column; gap: .75rem; }
    body.page-wallet .week-card{
        background: var(--surface-white);
        border: 1px solid var(--surface-gray-200);
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: var(--shadow-xs);
        transition: box-shadow .2s ease;
    }
    body.page-wallet .week-card:hover{ box-shadow: var(--shadow-sm); }
    body.page-wallet .week-card.expanded{ border-color: rgba(2,84,45,.2); }
    body.page-wallet .week-card-header{
        display: flex; align-items: center; gap: 1rem;
        padding: 1.25rem 1.5rem; cursor: pointer;
        transition: background .15s ease; user-select: none;
    }
    body.page-wallet .week-card-header:hover{ background: var(--primary-green-ghost); }
    body.page-wallet .week-icon-badge{
        width: 44px; height: 44px; border-radius: .75rem; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
    }
    body.page-wallet .week-icon-badge.available{ background: rgba(2,84,45,.12); color: var(--primary-green); }
    body.page-wallet .week-icon-badge.processing{ background: rgba(2,84,45,.08); color: var(--primary-green); }
    body.page-wallet .week-icon-badge.completed{ background: rgba(2,84,45,.12); color: var(--primary-green); }
    body.page-wallet .week-icon-badge.pending{ background: rgba(2,84,45,.08); color: var(--primary-green); }
    body.page-wallet .week-icon-badge.failed{ background: rgba(220,38,38,.1); color: #b91c1c; }
    body.page-wallet .week-header-info{ flex: 1; min-width: 0; }
    body.page-wallet .week-header-title{ font-size: .9375rem; font-weight: 800; color: var(--text-900); margin: 0 0 .3rem; }
    body.page-wallet .week-header-meta{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    body.page-wallet .week-header-meta .status-badge{ font-size: .62rem; }
    body.page-wallet .week-meta-count{ font-size: .75rem; color: var(--text-500); font-weight: 500; }
    body.page-wallet .week-total-block{ text-align: right; flex-shrink: 0; }
    body.page-wallet .week-total-label{ font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-500); margin: 0 0 .25rem; }
    body.page-wallet .week-total-value{ font-size: 1.2rem; font-weight: 800; color: var(--text-900); margin: 0; }
    body.page-wallet .week-chevron{ color: var(--surface-gray-200); font-size: 1.2rem; flex-shrink: 0; transition: transform .2s ease; }
    body.page-wallet .week-card.expanded .week-chevron{ transform: rotate(180deg); color: var(--primary-green); }

    body.page-wallet .week-detail{ display: none; border-top: 1px solid var(--surface-gray-200); }
    body.page-wallet .week-card.expanded .week-detail{ display: block; }
    body.page-wallet .week-detail-inner{ overflow-x: auto; }
    body.page-wallet .week-detail-inner::-webkit-scrollbar{ height: 6px; }
    body.page-wallet .week-detail-inner::-webkit-scrollbar-track{ background: var(--surface-gray-100); }
    body.page-wallet .week-detail-inner::-webkit-scrollbar-thumb{ background: var(--primary-green); border-radius: .375rem; }
    body.page-wallet .week-detail-footer{
        padding: .75rem 1.5rem; text-align: center;
        border-top: 1px solid var(--surface-gray-100); background: var(--surface-gray-50);
    }
    body.page-wallet .week-detail-footer button{
        font-size: .78rem; font-weight: 700; color: var(--primary-green);
        background: none; border: none; cursor: pointer;
    }
    body.page-wallet .week-detail-footer button:hover{ text-decoration: underline; }

    /* ── Pager Bar ───────────────────────────────────── */
    body.page-wallet .pager-bar{
        display: flex; justify-content: space-between; align-items: center;
        padding: .875rem 0; margin-top: .5rem;
        font-size: .8125rem; color: var(--text-500);
    }

    /* ── Skeleton Cards ──────────────────────────────── */
    body.page-wallet .week-card-skeleton .week-card-header{ cursor: default; pointer-events: none; }

    /* ── Responsive ──────────────────────────────────── */
    @media (max-width: 992px) {
        body.page-wallet .hero-bento{ grid-template-columns: 1fr; }
        body.page-wallet .hero-payout-card{ flex-direction: row; gap: 1.5rem; }
        body.page-wallet .payout-info-item + .payout-info-item{ border-top: none; border-left: 1px solid var(--surface-gray-200); padding-top: 0; padding-left: 1.5rem; }
    }
    @media (max-width: 768px) {
        body.page-wallet .hero-balance-amount{ font-size: 2.25rem; }
        body.page-wallet .filters-bar{ flex-direction: column; align-items: flex-start; }
        body.page-wallet .filters-bar-right{ width: 100%; justify-content: flex-start; }
        body.page-wallet .week-card-header{ padding: 1rem; gap: .75rem; }
        body.page-wallet .week-total-block{ display: none; }
    }

    @media (max-width: 576px) {
        body.page-wallet .dashboard-container{
            padding: .5rem;
        }

        body.page-wallet .wallet-header-card{
            padding: .75rem;
            gap: .75rem;
            margin-bottom: .75rem;
        }

        body.page-wallet .wallet-header-main{
            min-width: 0;
        }

        body.page-wallet #pageTitle{
            font-size: 1.125rem;
            margin-bottom: .25rem;
        }

        body.page-wallet .page-subtitle{
            font-size: .7rem;
        }

        body.page-wallet .stats-grid{
            margin: .5rem 0 .75rem;
            gap: .5rem;
            grid-template-columns: repeat(2, 1fr);
            justify-items: center;
        }

        body.page-wallet .stat-card{
            padding: .75rem .5rem;
            gap: .5rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        body.page-wallet .stat-card .stat-label{
            font-size: .55rem;
            text-align: center;
            margin-bottom: 0;
        }

        body.page-wallet .stat-card .stat-value{
            font-size: 1.25rem;
            font-weight: 800;
            text-align: center;
        }

        body.page-wallet .stat-card .stat-icon{
            width: 32px;
            height: 32px;
            font-size: .95rem;
            border-radius: 8px;
        }

        body.page-wallet .stat-card .stat-meta{
            font-size: .6rem;
            text-align: center;
        }

        body.page-wallet .table-container{
            border-radius: .75rem;
        }

        body.page-wallet .controls-section{
            padding: .5rem;
            width: 100%;
            border-radius: .75rem;
            min-width: 0;
        }

        body.page-wallet .controls-grid{
            gap: .5rem;
            grid-template-columns: 1fr;
        }

        body.page-wallet .search-container{
            grid-column: auto;
            min-width: 0;
        }

        body.page-wallet .search-input{
            font-size: .8125rem;
            padding: 0 .5rem 0 2rem;
        }

        body.page-wallet .dropdown-trigger,
body.page-wallet .search-input,
body.page-wallet .control-input{
            height: 36px;
            border-radius: .5rem;
        }

        body.page-wallet .custom-dropdown{ width: 100%; }

        body.page-wallet .dropdown-trigger{
            padding: .5rem .5rem;
            font-size: .75rem;
            gap: 4px;
        }

        body.page-wallet .dropdown-arrow{
            font-size: .75rem;
        }

        body.page-wallet .custom-dropdown .dropdown-menu{
            width: 140px;
        }

        body.page-wallet .dropdown-option{
            font-size: .75rem;
            padding: .5rem .75rem;
        }

        body.page-wallet .custom-table{
            font-size: .75rem;
            min-width: 740px;
        }

        body.page-wallet .custom-table thead th{
            padding: .75rem .5rem;
            font-size: .7rem;
        }

        body.page-wallet .custom-table td{
            padding: .75rem .5rem;
            font-size: .75rem;
        }

        body.page-wallet .summary-value{
            font-size: .78rem;
        }

        body.page-wallet .summary-subline{
            font-size: .68rem;
        }

        body.page-wallet .statement-table{
            min-width: 740px;
        }

        body.page-wallet .table-footer{
            padding: .75rem;
            font-size: .7rem;
            flex-direction: column;
            gap: .75rem;
            align-items: stretch;
        }

        body.page-wallet #infoBox{
            text-align: center;
        }

        body.page-wallet .pagination{
            justify-content: center;
        }

        body.page-wallet .pagination-btn{
            min-width: 2rem;
            padding: .35rem .5rem;
            font-size: .75rem;
        }
    }

    html[data-theme="dark"] body.page-wallet{
        --primary-green: #084928;
        --primary-green-dark: #06331b;
        --primary-green-light: rgba(8, 73, 40, 0.16);
        --primary-green-ghost: rgba(8, 73, 40, 0.10);
        --accent-emerald: #9ae6b4;
        --accent-mint: #c8f1d7;
        --surface-white: #101815;
        --surface-gray-50: #0d1310;
        --surface-gray-100: #111915;
        --surface-gray-200: rgba(148, 163, 184, 0.18);
        --text-900: #eef4ee;
        --text-700: #d6dfd8;
        --text-500: #93a49d;
        --border-200: rgba(148, 163, 184, 0.18);
        --surface-canvas: #08110d;
        --success: #34d399;
        --warning: #fbbf24;
        --error: #f87171;
        --hover-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.55);
    }

    html[data-theme="dark"] body.page-wallet .dashboard-container{
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet .wallet-header-card,
html[data-theme="dark"] body.page-wallet .controls-section,
html[data-theme="dark"] body.page-wallet .table-container,
html[data-theme="dark"] body.page-wallet .week-card,
html[data-theme="dark"] body.page-wallet .group-detail-panel,
html[data-theme="dark"] body.page-wallet .statement-table,
html[data-theme="dark"] body.page-wallet .table-footer{
        background: linear-gradient(180deg, rgba(16, 24, 21, 0.98) 0%, rgba(10, 16, 13, 0.98) 100%) !important;
        border-color: var(--border-200) !important;
        box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.58) !important;
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet .wallet-header-card::before{
        background: rgba(8, 73, 40, 0.16) !important;
    }

    html[data-theme="dark"] body.page-wallet #pageTitle{
        background: linear-gradient(135deg, #eff9f2 0%, #9ae6b4 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    html[data-theme="dark"] body.page-wallet .page-subtitle,
html[data-theme="dark"] body.page-wallet .control-label,
html[data-theme="dark"] body.page-wallet .search-icon,
html[data-theme="dark"] body.page-wallet .table-footer,
html[data-theme="dark"] body.page-wallet .week-meta-count,
html[data-theme="dark"] body.page-wallet .week-total-label,
html[data-theme="dark"] body.page-wallet .empty-state p,
html[data-theme="dark"] body.page-wallet .empty-row td{
        color: var(--text-500) !important;
    }

    html[data-theme="dark"] body.page-wallet .stat-card,
html[data-theme="dark"] body.page-wallet .btn,
html[data-theme="dark"] body.page-wallet .control-input,
html[data-theme="dark"] body.page-wallet .search-input,
html[data-theme="dark"] body.page-wallet .dropdown-trigger,
html[data-theme="dark"] body.page-wallet .wallet-dropdown-trigger,
html[data-theme="dark"] body.page-wallet .filt-select,
html[data-theme="dark"] body.page-wallet .filt-input,
html[data-theme="dark"] body.page-wallet .filt-icon-btn,
html[data-theme="dark"] body.page-wallet .group-toggle-btn,
html[data-theme="dark"] body.page-wallet .pagination-btn{
        background: var(--surface-white) !important;
        color: var(--text-700) !important;
        border-color: var(--border-200) !important;
    }

    html[data-theme="dark"] body.page-wallet .btn:hover,
html[data-theme="dark"] body.page-wallet .control-input:focus,
html[data-theme="dark"] body.page-wallet .search-input:focus,
html[data-theme="dark"] body.page-wallet .dropdown-trigger:hover,
html[data-theme="dark"] body.page-wallet .dropdown-trigger:focus,
html[data-theme="dark"] body.page-wallet .wallet-dropdown-trigger:hover,
html[data-theme="dark"] body.page-wallet .wallet-dropdown-trigger:focus,
html[data-theme="dark"] body.page-wallet .filt-select:focus,
html[data-theme="dark"] body.page-wallet .filt-input:focus,
html[data-theme="dark"] body.page-wallet .filt-icon-btn:hover,
html[data-theme="dark"] body.page-wallet .group-toggle-btn:hover,
html[data-theme="dark"] body.page-wallet .pagination-btn:hover:not(.disabled){
        background: rgba(8, 73, 40, 0.10) !important;
        border-color: rgba(8, 73, 40, 0.26) !important;
        color: var(--accent-mint) !important;
        box-shadow: 0 0 0 2px rgba(8, 73, 40, 0.10) !important;
    }

    html[data-theme="dark"] body.page-wallet .dropdown-trigger.active,
html[data-theme="dark"] body.page-wallet .wallet-dropdown-trigger.active,
html[data-theme="dark"] body.page-wallet .pagination-btn.active,
html[data-theme="dark"] body.page-wallet .group-toggle-btn:focus-visible{
        background: rgba(8, 73, 40, 0.16) !important;
        border-color: rgba(8, 73, 40, 0.32) !important;
        color: var(--accent-mint) !important;
    }

    html[data-theme="dark"] body.page-wallet .wallet-dropdown-menu{
        background: var(--surface-white) !important;
        border-color: var(--border-200) !important;
        box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.58) !important;
    }

    html[data-theme="dark"] body.page-wallet .wallet-dropdown-option{
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet .wallet-dropdown-option:hover,
html[data-theme="dark"] body.page-wallet .wallet-dropdown-option:focus,
html[data-theme="dark"] body.page-wallet .wallet-dropdown-option.selected{
        background: rgba(8, 73, 40, 0.12) !important;
        color: var(--accent-mint) !important;
    }

    html[data-theme="dark"] body.page-wallet .custom-table thead th,
html[data-theme="dark"] body.page-wallet .statement-table thead th{
        background: var(--surface-gray-100) !important;
        color: var(--accent-mint) !important;
        border-bottom-color: var(--border-200) !important;
    }

    html[data-theme="dark"] body.page-wallet .custom-table td,
html[data-theme="dark"] body.page-wallet .statement-table tbody td,
html[data-theme="dark"] body.page-wallet .summary-value,
html[data-theme="dark"] body.page-wallet .week-header-title,
html[data-theme="dark"] body.page-wallet .week-total-value{
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet .summary-subline,
html[data-theme="dark"] body.page-wallet .summary-date-cell .summary-value,
html[data-theme="dark"] body.page-wallet .summary-type-cell .summary-value,
html[data-theme="dark"] body.page-wallet .statement-date,
html[data-theme="dark"] body.page-wallet .statement-placeholder,
html[data-theme="dark"] body.page-wallet .muted-text{
        color: var(--text-500) !important;
    }

    html[data-theme="dark"] body.page-wallet .statement-table tbody td,
html[data-theme="dark"] body.page-wallet .statement-table tbody .statement-order-id{
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet .statement-table tbody .amount-credit{
        color: #34d399 !important;
    }

    html[data-theme="dark"] body.page-wallet .statement-table tbody .amount-debit{
        color: #f87171 !important;
    }

    html[data-theme="dark"] body.page-wallet .group-summary-row.expanded td{
        background: rgba(8, 73, 40, 0.08) !important;
    }

    html[data-theme="dark"] body.page-wallet .group-summary-row.expanded td:first-child{
        border-left-color: var(--accent-mint) !important;
    }

    html[data-theme="dark"] body.page-wallet .group-detail-row td{
        background: var(--surface-gray-50) !important;
        border-top-color: var(--border-200) !important;
        border-bottom-color: var(--border-200) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-card.expanded{
        border-color: rgba(8, 73, 40, 0.24) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-card-header:hover{
        background: rgba(8, 73, 40, 0.08) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-icon-badge.available,
html[data-theme="dark"] body.page-wallet .week-icon-badge.processing,
html[data-theme="dark"] body.page-wallet .week-icon-badge.completed,
html[data-theme="dark"] body.page-wallet .week-icon-badge.pending{
        background: rgba(8, 73, 40, 0.16) !important;
        color: var(--accent-mint) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-chevron{
        color: var(--text-500) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-card.expanded .week-chevron{
        color: var(--accent-mint) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-detail,
html[data-theme="dark"] body.page-wallet .week-detail-footer{
        border-top-color: var(--border-200) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-detail-footer{
        background: var(--surface-gray-50) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-detail-footer button,
html[data-theme="dark"] body.page-wallet .group-toggle-btn,
html[data-theme="dark"] body.page-wallet .pagination-btn{
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet .custom-table tbody tr:hover:not(.skeleton-row):not(.empty-row):not(.group-detail-row){
        background: rgba(8, 73, 40, 0.08) !important;
    }

    html[data-theme="dark"] body.page-wallet .skeleton{
        background: linear-gradient(90deg, rgba(148, 163, 184, 0.07) 25%, rgba(148, 163, 184, 0.16) 50%, rgba(148, 163, 184, 0.07) 75%) !important;
        background-size: 200% 100% !important;
    }

    html[data-theme="dark"] body.page-wallet .week-card-skeleton{
        background: linear-gradient(180deg, rgba(16, 24, 21, 0.98) 0%, rgba(10, 16, 13, 0.98) 100%) !important;
        border-color: var(--border-200) !important;
        box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.58) !important;
    }

    html[data-theme="dark"] body.page-wallet .week-card-skeleton .week-card-header{
        background: transparent !important;
    }

    html[data-theme="dark"] body.page-wallet .empty-state,
html[data-theme="dark"] body.page-wallet .table-empty-state-content{
        color: var(--text-500) !important;
    }

    html[data-theme="dark"] body.page-wallet .empty-state i{
        color: var(--accent-mint) !important;
    }

    html[data-theme="dark"] body.page-wallet .empty-row td,
html[data-theme="dark"] body.page-wallet .table-empty-state-cell{
        background: transparent !important;
    }


/* ==========================================================
   Template: wallet_superadmin_withdraw.html (page-wallet-superadmin-withdraw)
   ========================================================== */

    body.page-wallet-superadmin-withdraw{
        --primary-green: #02542d;
        --primary-green-dark: #01402a;
        --primary-green-light: #02542d15;
        --surface-white: #ffffff;
        --surface-gray-50: #f8fafc;
        --surface-gray-100: #f1f5f9;
        --surface-gray-200: #e2e8f0;
        --text-900: #0f172a;
        --text-700: #334155;
        --text-500: #64748b;
        --border-200: #e5e7eb;
        --surface-canvas: #f4f7f6;
        --success: #16a34a;
        --error: #dc2626;
        --warning: #d97706;
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.06);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-xl: 1rem;
        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    }

    body.page-wallet-superadmin-withdraw .dashboard-container{
        margin: 0 auto;
        padding: 1rem 1rem 2.25rem;
        color: var(--text-700);
    }

    body.page-wallet-superadmin-withdraw .wallet-header-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: 14px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-xs);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.75rem;
        align-items: center;
    }

    body.page-wallet-superadmin-withdraw #pageTitle{
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0 0 0.3rem 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    body.page-wallet-superadmin-withdraw .page-subtitle{
        font-size: 0.8rem;
        color: var(--text-500);
        margin: 0;
        font-weight: 600;
    }

    body.page-wallet-superadmin-withdraw .btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        height: 40px;
        padding: 0 0.95rem;
        border-radius: var(--radius-md);
        font-weight: 700;
        font-size: 0.82rem;
        text-decoration: none;
        border: 1px solid var(--border-200);
        cursor: pointer;
        background: var(--surface-white);
        color: var(--primary-green);
        transition: 0.15s ease-in-out;
    }

    body.page-wallet-superadmin-withdraw .btn:hover{
        background: var(--primary-green-light);
        border-color: #c7e0d4;
    }

    body.page-wallet-superadmin-withdraw .btn-primary{
        background: var(--gradient-primary);
        color: #fff;
        border: none;
    }

    body.page-wallet-superadmin-withdraw .btn-primary:hover{
        filter: brightness(1.03);
        color: #fff;
    }

    body.page-wallet-superadmin-withdraw .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.75rem;
        margin-bottom: 0.9rem;
    }

    body.page-wallet-superadmin-withdraw .stat-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: 12px;
        padding: 0.85rem 0.95rem;
        box-shadow: var(--shadow-xs);
    }

    body.page-wallet-superadmin-withdraw .stat-label{
        color: var(--text-500);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
        margin-bottom: 0.4rem;
    }

    body.page-wallet-superadmin-withdraw .stat-value{
        color: var(--text-900);
        font-size: 1.05rem;
        font-weight: 800;
        word-break: break-word;
    }

    body.page-wallet-superadmin-withdraw .panel-grid{
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 0.85rem;
        margin-bottom: 0.9rem;
    }

    body.page-wallet-superadmin-withdraw .panel-card{
        background: var(--surface-white);
        border: 1px solid var(--border-200);
        border-radius: 12px;
        box-shadow: var(--shadow-xs);
        padding: 1rem;
    }

    body.page-wallet-superadmin-withdraw .panel-title{
        margin: 0 0 0.8rem 0;
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-900);
    }

    body.page-wallet-superadmin-withdraw .form-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }

    body.page-wallet-superadmin-withdraw .form-field{
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    body.page-wallet-superadmin-withdraw .form-field.full{
        grid-column: 1 / -1;
    }

    body.page-wallet-superadmin-withdraw .form-label{
        font-size: 0.76rem;
        color: var(--text-500);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    body.page-wallet-superadmin-withdraw .control-input,
body.page-wallet-superadmin-withdraw .control-textarea{
        width: 100%;
        border: 1px solid var(--border-200);
        border-radius: var(--radius-lg);
        background: var(--surface-white);
        color: var(--text-700);
        font-size: 0.88rem;
        outline: none;
        transition: 0.15s ease-in-out;
    }

    body.page-wallet-superadmin-withdraw .control-input{
        height: 42px;
        padding: 0 0.85rem;
    }

    body.page-wallet-superadmin-withdraw .control-textarea{
        min-height: 130px;
        padding: 0.7rem 0.85rem;
        resize: vertical;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    }

    body.page-wallet-superadmin-withdraw .control-input:focus,
body.page-wallet-superadmin-withdraw .control-textarea:focus{
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px var(--primary-green-light);
    }

    body.page-wallet-superadmin-withdraw .inline-help{
        margin-top: 0.35rem;
        font-size: 0.78rem;
        color: var(--text-500);
    }

    body.page-wallet-superadmin-withdraw .actions-row{
        margin-top: 0.9rem;
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    body.page-wallet-superadmin-withdraw .status-box{
        margin-top: 0.9rem;
        border-radius: var(--radius-lg);
        border: 1px solid var(--surface-gray-200);
        background: var(--surface-gray-50);
        color: var(--text-700);
        padding: 0.7rem 0.8rem;
        font-weight: 600;
        font-size: 0.86rem;
        display: none;
    }

    body.page-wallet-superadmin-withdraw .status-box.info{
        display: block;
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
    }

    body.page-wallet-superadmin-withdraw .status-box.success{
        display: block;
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }

    body.page-wallet-superadmin-withdraw .status-box.error{
        display: block;
        border-color: #fecaca;
        background: #fef2f2;
        color: #991b1b;
    }

    body.page-wallet-superadmin-withdraw .token-card{
        margin-bottom: 0.9rem;
    }

    body.page-wallet-superadmin-withdraw .token-input{
        min-height: 88px;
        font-size: 0.78rem;
    }

    body.page-wallet-superadmin-withdraw .preview-title{
        margin: 0 0 0.55rem 0;
        font-size: 0.83rem;
        color: var(--text-500);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
    }

    body.page-wallet-superadmin-withdraw .preview-box{
        margin: 0 0 0.85rem 0;
        border: 1px solid var(--surface-gray-200);
        background: #0b1220;
        color: #d2e8ff;
        border-radius: var(--radius-lg);
        padding: 0.7rem;
        min-height: 128px;
        overflow: auto;
        font-size: 0.8rem;
        line-height: 1.45;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    }

    body.page-wallet-superadmin-withdraw .table-wrap{
        overflow: auto;
        border: 1px solid var(--surface-gray-200);
        border-radius: var(--radius-lg);
    }

    body.page-wallet-superadmin-withdraw table.custom-table{
        width: 100%;
        border-collapse: collapse;
        min-width: 760px;
        background: var(--surface-white);
    }

    body.page-wallet-superadmin-withdraw table.custom-table th,
body.page-wallet-superadmin-withdraw table.custom-table td{
        padding: 0.7rem 0.9rem;
        border-bottom: 1px solid var(--surface-gray-200);
        text-align: left;
        font-size: 0.8125rem;
        vertical-align: middle;
        white-space: normal;
        word-break: break-word;
        line-height: 1.45;
    }

    body.page-wallet-superadmin-withdraw table.custom-table td{
        color: #4b5563;
        font-weight: 400;
    }

    body.page-wallet-superadmin-withdraw table.custom-table tbody tr:hover{
        background: rgba(2,84,45,.04);
    }

    body.page-wallet-superadmin-withdraw table.custom-table th{
        background: var(--primary-green) !important;
        color: #fff !important;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Amount column — right-aligned */
    body.page-wallet-superadmin-withdraw table.custom-table th:nth-child(4),
body.page-wallet-superadmin-withdraw table.custom-table td:nth-child(4){
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    body.page-wallet-superadmin-withdraw table.custom-table tbody tr:last-child td{
        border-bottom: none;
    }

    body.page-wallet-superadmin-withdraw .amount-credit{
        color: var(--success);
        font-weight: 700;
    }

    body.page-wallet-superadmin-withdraw .amount-debit{
        color: var(--error);
        font-weight: 700;
    }

    body.page-wallet-superadmin-withdraw .status-chip{
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 0.18rem 0.55rem;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: #eef2ff;
        color: #3730a3;
    }

    @media (max-width: 992px) {
        body.page-wallet-superadmin-withdraw .panel-grid{
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        body.page-wallet-superadmin-withdraw .form-grid{
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 576px) {
        body.page-wallet-superadmin-withdraw .stats-grid{
            justify-items: center;
        }
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw{
        --primary-green: #084928;
        --primary-green-dark: #06331b;
        --primary-green-light: rgba(8, 73, 40, 0.16);
        --surface-white: #101815;
        --surface-gray-50: #0d1310;
        --surface-gray-100: #111915;
        --surface-gray-200: rgba(148, 163, 184, 0.18);
        --text-900: #eef4ee;
        --text-700: #d6dfd8;
        --text-500: #93a49d;
        --border-200: rgba(148, 163, 184, 0.18);
        --surface-canvas: #08110d;
        --success: #34d399;
        --error: #f87171;
        --warning: #fbbf24;
        --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .dashboard-container{
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .wallet-header-card,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .stat-card,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .panel-card,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .table-wrap,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .status-box{
        background: linear-gradient(180deg, rgba(16, 24, 21, 0.98) 0%, rgba(10, 16, 13, 0.98) 100%) !important;
        border-color: var(--border-200) !important;
        box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.58) !important;
        color: var(--text-700) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw #pageTitle{
        background: linear-gradient(135deg, #eff9f2 0%, #9ae6b4 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .page-subtitle,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .form-label,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .inline-help,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .preview-title,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .stat-label{
        color: var(--text-500) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .stat-value,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .panel-title{
        color: var(--text-900) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .btn,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .control-input,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .control-textarea{
        background: var(--surface-white) !important;
        color: var(--text-700) !important;
        border-color: var(--border-200) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .btn:hover,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .control-input:focus,
html[data-theme="dark"] body.page-wallet-superadmin-withdraw .control-textarea:focus{
        background: rgba(8, 73, 40, 0.10) !important;
        border-color: rgba(8, 73, 40, 0.26) !important;
        color: var(--accent-mint, #c8f1d7) !important;
        box-shadow: 0 0 0 3px rgba(8, 73, 40, 0.12) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .btn-primary{
        background: linear-gradient(135deg, #084928, #0d6a39) !important;
        color: #eff9f2 !important;
        border-color: transparent !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .status-box.info{
        border-color: rgba(59, 130, 246, 0.28) !important;
        background: rgba(30, 41, 59, 0.95) !important;
        color: #bfdbfe !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .status-box.success{
        border-color: rgba(8, 73, 40, 0.28) !important;
        background: rgba(8, 73, 40, 0.20) !important;
        color: var(--accent-mint, #c8f1d7) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .status-box.error{
        border-color: rgba(248, 113, 113, 0.30) !important;
        background: rgba(127, 29, 29, 0.35) !important;
        color: #fecaca !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .preview-box{
        background: #0a1210 !important;
        color: #d9f0e2 !important;
        border-color: var(--border-200) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw table.custom-table{
        background: var(--surface-white) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw table.custom-table th{
        background: linear-gradient(135deg, #084928, #0d6a39) !important;
        color: #eff9f2 !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw table.custom-table td{
        color: var(--text-700) !important;
        border-bottom-color: var(--border-200) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw table.custom-table tbody tr:hover{
        background: rgba(8, 73, 40, 0.08) !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .amount-credit{
        color: #34d399 !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .amount-debit{
        color: #f87171 !important;
    }

    html[data-theme="dark"] body.page-wallet-superadmin-withdraw .status-chip{
        background: rgba(8, 73, 40, 0.12) !important;
        color: var(--accent-mint, #c8f1d7) !important;
    }


/* ==========================================================
   Template: whatsapp.html (page-whatsapp)
   ========================================================== */

        body.page-whatsapp #console::-webkit-scrollbar{
            width: 8px;
        }
        body.page-whatsapp #console::-webkit-scrollbar-thumb{
            background: #333;
            border-radius: 4px;
        }

        @keyframes whatsapp--pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        body.page-whatsapp .loading{
            animation: whatsapp--pulse 1.5s infinite;
        }

        body.page-whatsapp #qrImage{
            max-width: 250px;
            margin: 0 auto;
            transition: all 0.3s ease;
        }
    

/* ==========================================================
   Generated reusable utilities migrated from inline styles
   ========================================================== */
.u-inline-006a6141a1{width:9%;}
.u-inline-01168efdde{font-size:.82rem;color:var(--text-900);padding-left:1.2rem;line-height:1.8;}
.u-inline-014ce95b0c{height:.7rem;width:56px;}
.u-inline-01556d8058{font-style:italic;}
.u-inline-0168e57726{width:80px;height:24px;margin:0 auto;border-radius:4px;}
.u-inline-016da9ea0e{padding:0.75rem; background:var(--surface-white); border:1px solid var(--border-200); border-radius:var(--radius-md);}
.u-inline-02154fce5f{color:var(--brand-primary);font-weight:700;}
.u-inline-02176d97c8{width:100%;padding:0.75rem;font-size:0.875rem;border-radius:0.625rem;}
.u-inline-0286603c00{margin-top:.35rem;}
.u-inline-028cd0d034{color:var(--primary-green);font-size:.7rem;}
.u-inline-02fb48dc78{text-align:center;padding:1rem 0;}
.u-inline-032717fe4b{height:1.2rem;width:80px;}
.u-inline-03e223056b{margin-top:.75rem;}
.u-inline-0466783d98{width:100%;}
.u-inline-068d27fd83{max-width:80px;}
.u-inline-07266b27f1{width:20px;height:1rem;display:inline-block;border-radius:.25rem;}
.u-inline-0727a4075d{font-size:.5rem;}
.u-inline-0744c38747{color:#dc2626;}
.u-inline-0836653201{font-size: 1.125rem;}
.u-inline-085bb129e5{font-size:.68rem;color:var(--ink-500);line-height:1.35;margin-top:.2rem;}
.u-inline-0983432282{cursor:default;}
.u-inline-09aaa001e4{font-weight: 600; color: var(--ink-900);}
.u-inline-0b2a5ce01b{font-size:.72rem;font-weight:600;color:var(--text-500);background:var(--surface-gray-100);border:1px solid var(--border-200);padding:.18rem .55rem;border-radius:1rem;}
.u-inline-0b8bac0aae{background: linear-gradient(135deg, rgba(2, 84, 45, 0.05) 0%, transparent 100%); border: 1px solid var(--ink-200); border-radius: var(--radius-md); padding: 1.5rem;}
.u-inline-0c607b7f3d{width:4rem;height:1.4rem;border-radius:var(--radius-sm);}
.u-inline-0c6ca3bda3{border: 1px solid var(--ink-200); border-radius: var(--radius-md); overflow: hidden;}
.u-inline-0cf8f93b0e{margin-top:1rem;}
.u-inline-0d3a93d0a4{height: 80px; width: 100%;}
.u-inline-0dc8cc6234{margin-top: 0.5rem;}
.u-inline-0dec2ae8ae{padding:8px 4px;}
.u-inline-0e48ffc5ff{height:1.5rem;width:220px;display:inline-block;}
.u-inline-0fd04d6236{height:1px;}
.u-inline-106ad01dfc{display:flex;align-items:center;gap:2px;justify-content:flex-end;}
.u-inline-114435dc4a{color: var(--ink-700); font-size: 0.75rem; line-height: 1.6;}
.u-inline-1169661891{margin:0;}
.u-inline-1288e8faa7{font-size:.78rem;color:var(--text-700);line-height:1.65;padding:.5rem .75rem;background:var(--surface-gray-50);border-radius:var(--radius-md);border-left:3px solid var(--primary-green);}
.u-inline-12dcf5705b{max-height:220px; overflow-y:auto;}
.u-inline-13cbe03b9a{text-align: right;}
.u-inline-13e2f6bb6f{max-height:180px;}
.u-inline-1430a54625{margin-bottom:0.25rem;}
.u-inline-14ee8c2ddf{color:var(--primary-green);font-size:.6rem;}
.u-inline-15d0ff2206{color: #059669; font-weight: 700;}
.u-inline-15e48a326e{width:65%;}
.u-inline-165dc9c1f4{margin:0;display:flex;align-items:center;gap:.4rem;}
.u-inline-16884469a8{margin-bottom:1rem;}
.u-inline-16b4e3d214{color:var(--ink-500);}
.u-inline-170cee338f{position:absolute;top:-42px;right:0;background:var(--surface-primary);border:none;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-700);}
.u-inline-1733f71205{max-height: 50vh; overflow-y: auto;}
.u-inline-178fe0e68b{font-size:.78rem;color:var(--ink-600);line-height:1.6;padding:.25rem 0;}
.u-inline-1987bb9c27{width:90px;height:1.25rem;display:inline-block;}
.u-inline-1a7cb23520{color:#dc3545;}
.u-inline-1aabdecbda{display:none; margin-bottom:0.5rem;}
.u-inline-1b666629f8{width:40px;height:.9rem;display:inline-block;}
.u-inline-1c09f0c006{margin-bottom: 0.5rem;}
.u-inline-1c72de5403{font-size:.74rem;color:var(--ink-600);line-height:1.6;padding:.5rem 0;}
.u-inline-1ccb34ca80{height: 50px; margin: 10px 0;}
.u-inline-1cdf35126d{background:var(--info);}
.u-inline-1cf45b462d{text-align: center; padding: 2rem; color: var(--ink-500);}
.u-inline-1da9facb4d{margin:0;}
.u-inline-1ea5f39d8d{text-align:center;padding:0.75rem;color:var(--ink-500);font-size:0.8125rem;}
.u-inline-1ed8b21822{padding:0.4rem 1rem; background:var(--brand-primary); color:white; border:none; border-radius:0.4rem; font-weight:600; font-size:0.6875rem; cursor:pointer;}
.u-inline-202a4e280d{font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7;}
.u-inline-20d43445e1{font-size:.78rem;}
.u-inline-2152565e45{padding:0 8px;flex-shrink:0;}
.u-inline-2158833e2e{font-size:.62rem;color:var(--ink-400);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.22rem;}
.u-inline-21d8fb5d75{margin-top:0.75rem;}
.u-inline-21d91b7027{display:block;}
.u-inline-2218386e30{display:none;font-size:.8rem;margin-bottom:.625rem;padding:6px 10px;border-radius:var(--radius-md);background:#d1fae5;color:#065f46;border:1px solid #a7f3d0;}
.u-inline-22720f5a0a{color:#ef4444;font-size:1.2rem;flex-shrink:0;}
.u-inline-22ca54a87e{padding:6px 10px;}
.u-inline-231bcdc10a{margin-top:0.75rem;font-size:0.8125rem;}
.u-inline-23984e735d{width:15%;}
.u-inline-23b6a5b58d{width:28px;height:.65rem;display:inline-block;}
.u-inline-24301ecfdb{padding:10px 12px;font-size:.8rem;color:var(--text-500);}
.u-inline-2497a1017b{background:var(--primary-green-light);color:var(--primary-green);padding:.375rem .75rem;border-radius:.5rem;font-weight:700;font-size:.875rem;}
.u-inline-25d6a46d62{display: flex; flex-direction: column; gap: 1rem;}
.u-inline-26164d3f1a{font-size:.65rem;margin-right:.2rem;}
.u-inline-261a9d5c8d{margin-top:15px; display: flex; gap: 10px; align-items: center;}
.u-inline-272495f681{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;}
.u-inline-27649b76d2{background:var(--success);}
.u-inline-27ec316f51{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;}
.u-inline-27fe373315{width:70%;margin:0 auto .25rem;}
.u-inline-2925c5f684{width:40px;height:40px;border-radius:50%;display:block;}
.u-inline-2948714722{font-size:.8rem;color:#991b1b;margin-bottom:.75rem;}
.u-inline-29c7f41bdc{font-size:.8rem;color:var(--ink-400);}
.u-inline-2b9dc75405{font-size: 2rem;}
.u-inline-2cfd33e836{font-weight: 800; font-size: 1.125rem; color: var(--brand-primary);}
.u-inline-2d98adf5c6{margin-bottom: 10px;}
.u-inline-2ded764b9d{cursor:pointer; border: 2px dashed rgba(2,84,45,0.25); background: rgba(2,84,45,0.03);}
.u-inline-2e1ecb805d{font-size:.75rem;color:var(--text-500);}
.u-inline-2ece6c08c5{font-size:.7rem;color:var(--ink-400);margin-top:.2rem;}
.u-inline-2f10b96cbf{height:1.5rem;width:6rem;border-radius:2rem;}
.u-inline-2f619a34b6{font-weight:600; color:var(--primary-green); margin:0;}
.u-inline-2fa1cdcaf0{font-size:.9rem;font-weight:800;color:var(--ink-800);}
.u-inline-2fd853e7ed{height:4px;background:var(--surface-gray-200);border-radius:2px;}
.u-inline-304187db8e{background-color: #fff3e0; border-left: 4px solid #fd7e14 !important;}
.u-inline-306b9ecc88{width:36px;height:28px;margin:0 auto;border-radius:6px;}
.u-inline-325bf95478{color: var(--ink-500); font-weight: normal;}
.u-inline-3267ac0bed{opacity:.75;}
.u-inline-33b4fd4bab{font-size: 0.75rem; font-weight: 600; color: var(--ink-500); margin-bottom: 0.5rem;}
.u-inline-33e8b793ea{color:var(--brand-primary);margin-right:.375rem;}
.u-inline-3489846a1a{margin-top:.5rem;font-size:.73rem;padding:.35rem .7rem;}
.u-inline-34eb8c5d02{flex:1;font-size:.78rem;color:var(--text-500);font-weight:500;}
.u-inline-35227c3b2b{border:none;box-shadow:none;}
.u-inline-3701df8604{height:80px;width:100%;}
.u-inline-3764e53892{text-decoration: none; color: inherit; display: flex; width: 100%;}
.u-inline-37825b2d10{color:var(--ink-500);font-size:0.68rem;margin-top:0.25rem;}
.u-inline-382c7c4d25{display: flex; gap: 15px; flex-wrap: wrap;}
.u-inline-39679204a5{height:.7rem;max-width:140px;}
.u-inline-39bd1b2857{display:flex;align-items:center;gap:8px;flex:1;}
.u-inline-39d94fd855{width:56px;height:56px;border-radius:50%;background:var(--surface-gray-100);display:flex;align-items:center;justify-content:center;font-size:1.5rem;}
.u-inline-3a19cea2f3{height:12px;border-radius:6px;width:40%;}
.u-inline-3a35cb5a4d{width:32px;height:.65rem;display:inline-block;}
.u-inline-3b287d8f11{white-space:pre-wrap;color:var(--ink-700);}
.u-inline-3bb9b0abd6{margin-top: 10px; display: block;}
.u-inline-3cc40e016b{border-radius: 0.875rem; padding: 0.875rem 1rem; margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 600;}
.u-inline-3cca352376{background:transparent;color:#b45309;border-color:#b45309;}
.u-inline-3d3d47671a{color:#9ca3af;font-size:11px;}
.u-inline-3e0ddefe29{background:#fff;padding:2rem 2.5rem;border-radius:1rem;box-shadow:0 4px 24px rgba(0,0,0,0.18);text-align:center;max-width:350px;}
.u-inline-3ef1fa1aa1{margin-bottom:12px;}
.u-inline-406788522f{display:none; margin-top:1rem; font-size:.82rem;}
.u-inline-4089783532{display:flex;gap:1rem;justify-content:center;}
.u-inline-40f48d0120{height:8px;margin:0 auto;}
.u-inline-410010f105{width:100%;height:36px;border-radius:6px;}
.u-inline-41a087a039{margin-top: 1.25rem;}
.u-inline-437c9b5352{color:var(--brand-primary);}
.u-inline-44086da759{height:14px;border-radius:6px;margin-bottom:.4rem;width:55%;}
.u-inline-460ef7ebcb{margin-top:.5rem;display:block;}
.u-inline-47365cbd0b{color:#ef4444;font-size:20px;}
.u-inline-477c9d58b9{padding:.75rem 1rem 0;}
.u-inline-477d664a08{width:10%;}
.u-inline-481a8d5453{margin-top:.875rem;}
.u-inline-4828c3d8ae{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;}
.u-inline-48603ee198{width:28px;height:28px;font-size:.7rem;}
.u-inline-48f00572e7{height:14px;border-radius:6px;width:80px;}
.u-inline-4a4275b8e3{width:38px;height:38px;border-radius:50%;display:block;}
.u-inline-4a61ca5899{width:40%; height:.65rem; margin-top:.3rem;}
.u-inline-4ad1783410{margin-top: 0; margin-bottom: 8px;}
.u-inline-4ce9cd155d{margin-bottom:.5rem;font-size:.82rem;color:var(--text-700);}
.u-inline-4d102c1cbd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.u-inline-4edeb9e71d{text-decoration:none;}
.u-inline-4f23f73484{height:.7rem;max-width:120px;}
.u-inline-5163ecf44c{font-size:.875rem;}
.u-inline-538764830f{margin-left: auto;}
.u-inline-549d21b0d5{text-align:center;padding:1.5rem;color:#dc2626;font-size:0.8125rem;}
.u-inline-54a2fd1158{padding:0.75rem; margin-bottom:0.5rem; background:var(--surface-white); border:1px solid var(--border-200); border-radius:var(--radius-md);}
.u-inline-55aa9c7d38{font-size:1.1rem;font-weight:800;color:var(--ink-800);}
.u-inline-55b2e17218{width:18%;}
.u-inline-569bc0dad2{flex:1;display:grid;gap:var(--gap-xs);}
.u-inline-571500b718{display: flex; flex-direction: column; gap: 0.75rem;}
.u-inline-579ecf90ae{width:40px;height:.75rem;display:inline-block;background:var(--ink-200);}
.u-inline-57b4695840{padding:7px 10px;border-radius:var(--radius-md);}
.u-inline-597b3cea0d{width:210px;height:1.1rem;display:inline-block;}
.u-inline-59badc1c83{width:35%;height:.6rem;}
.u-inline-5b797237f3{color:var(--brand-primary);font-weight:var(--font-weight-bold);}
.u-inline-5ce2f90f8f{font-size: 0.8125rem; color: var(--ink-500); margin-bottom: 1rem;}
.u-inline-5d99e2da0b{position:relative;max-width:90vw;max-height:90vh;}
.u-inline-5db8347ca2{width:6%;}
.u-inline-5f6c3b398a{padding:0 4px;}
.u-inline-615d6beb24{display:none; margin-top:.4rem; font-size:.78rem; color:var(--error-dark); padding:.35rem .5rem; background:rgba(239,68,68,.08); border-radius:6px; border-left:2px solid var(--error);}
.u-inline-61a7b7af6e{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.u-inline-61d5304141{font-size:.75rem;color:var(--brand-primary);}
.u-inline-62902f2068{text-align:center;padding:1.5rem;color:var(--ink-500);font-size:0.8125rem;}
.u-inline-63820c8b0f{color:#ef4444;font-weight:600;}
.u-inline-648149cea2{margin-bottom: 0;}
.u-inline-64d87d2fbe{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);z-index:9999;display:flex;align-items:center;justify-content:center;}
.u-inline-651390c81f{font-size:.7rem;color:var(--text-500);margin-left:3px;}
.u-inline-6652f01461{padding:.45rem .55rem;}
.u-inline-666f6d1a5f{padding:.25rem 0;}
.u-inline-670472cb99{display:none;margin-top:.55rem;}
.u-inline-6743ac20ef{padding:0 4px;color:var(--text-500);}
.u-inline-682298337e{color:var(--ink-400);font-size:.75rem;}
.u-inline-690f054c4e{margin-left:auto;}
.u-inline-69b0f1e87d{margin:0; font-size:0.8125rem;}
.u-inline-69df411a6d{color:var(--text-500); text-align:center; padding:1.5rem; margin:0; background:var(--surface-white); border-radius:var(--radius-md);}
.u-inline-6a142e1f51{display:flex;align-items:center;gap:.4rem;margin-top:.375rem;font-size:.8rem;cursor:pointer;}
.u-inline-6a438996ce{padding:.625rem .875rem;}
.u-inline-6b43596d88{display:flex;align-items:center;justify-content:center;height:100%;background:var(--ink-100);color:var(--ink-400);font-weight:bold;font-size:1.5rem;}
.u-inline-6b68ac9f88{margin-right: 0.5rem;}
.u-inline-6b839a4a49{color:#25d366;}
.u-inline-6b99de8b69{display:none;}
.u-inline-6bd38455cf{position:absolute;top:-45px;right:0;background:var(--surface-primary);border:none;width:36px;height:36px;border-radius:50%;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-700);}
.u-inline-6bda6c3b88{padding:.8rem .4rem;color:var(--text-500);font-size:.78rem;font-style:italic;text-align:center;}
.u-inline-6c02208845{width:30px;height:1.1rem;display:inline-block;}
.u-inline-6d930ad79a{color:var(--ink-300);}
.u-inline-6da2cb1aaf{font-size:0.8125rem; color:var(--text-700);}
.u-inline-6db51783c0{width:58px;height:58px;border-radius:.5rem;display:inline-block;}
.u-inline-6e5ebc7cb6{height:.8rem;width:180px;display:inline-block;}
.u-inline-6f494a0998{width:75px;height:.95rem;display:inline-block;}
.u-inline-708bb7474d{display:flex;align-items:center;gap:.6rem;}
.u-inline-711058b54d{margin-top:.5rem;font-size:.75rem;color:var(--primary-green);font-weight:600;}
.u-inline-711429a7f7{color:var(--primary-green);}
.u-inline-76084ee4e5{margin-bottom:0;}
.u-inline-7623f05545{flex:1;}
.u-inline-767bee4c9f{margin:0;color:var(--ink-500);font-size:.75rem;}
.u-inline-776652fa45{text-decoration:none;margin-bottom:.25rem;}
.u-inline-77f71fc35b{font-size: 0.75rem; letter-spacing: 0.5px;}
.u-inline-7841f1b86e{padding:.75rem;font-size:.75rem;color:var(--ink-400);text-align:center;}
.u-inline-78a658449f{font-size:.42rem;}
.u-inline-78d779b627{font-weight:var(--font-weight-semibold);color:var(--brand-primary);}
.u-inline-78d7af8b7e{font-weight: bold;}
.u-inline-7962ce13f7{font-size:.8125rem;}
.u-inline-7ac2917dfd{display:none;margin-top:6px;padding:6px 10px;background:#f0fdf4;border-radius:.5rem;border:1px solid #bbf7d0;font-size:.75rem;color:#166534;}
.u-inline-7ad938896a{width:3.5rem;}
.u-inline-7c49d331f2{margin-left:.5rem;color:var(--primary-green);font-size:.75rem;font-weight:700;text-decoration:none;}
.u-inline-7c73bebd1c{grid-column:1/-1;margin-bottom:.5rem;}
.u-inline-7d0c0ea964{color: var(--error);}
.u-inline-7d590d666d{margin-top:.3rem;}
.u-inline-7fce3abc18{width:5rem;}
.u-inline-807e51198d{width: 100px;}
.u-inline-819774c1d5{color:var(--brand-primary);font-weight:600;}
.u-inline-83bdd6911d{margin: 0 0 1rem 0; color: var(--brand-primary); display: flex; align-items: center; gap: 0.5rem;}
.u-inline-8410c989c9{cursor: pointer;}
.u-inline-842252d1fb{justify-content:center;}
.u-inline-845195ce2b{display:flex;align-items:center;justify-content:center;height:100%;background:rgba(2,84,45,.1);color:var(--brand-primary);font-weight:700;font-size:1.25rem;}
.u-inline-84eff7f602{margin-right:12px;}
.u-inline-8506681389{width: 180px;}
.u-inline-854cf3b791{cursor:default;pointer-events:none;}
.u-inline-8589d44370{padding:6px 12px;background:var(--primary-green);color:white;border-radius:var(--radius-md);font-size:.75rem;text-decoration:none;font-weight:600;}
.u-inline-85f0562ef1{font-weight:700;font-size:.9rem;color:var(--text-700);margin-bottom:.25rem;}
.u-inline-864c8f6072{font-size:1.1rem;}
.u-inline-8676454d42{font-size:.72rem;color:var(--ink-400);}
.u-inline-86a56a9b97{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;padding:.5rem .75rem;background:rgba(2,84,45,.04);border:1px solid rgba(2,84,45,.1);border-radius:8px;}
.u-inline-86daf899c5{color:#dc2626;font-size:1rem;}
.u-inline-87162ae9ef{opacity:.3;}
.u-inline-8864106b87{height:1rem;width:3.5rem;}
.u-inline-88c0c92ba5{height:1rem;width:100%;}
.u-inline-8952e528eb{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--text-500);}
.u-inline-895334504f{padding: 0.5rem 1.25rem; background: var(--brand-primary); color: white; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 0.75rem; cursor: pointer;}
.u-inline-8a2e2e013e{margin-top:.75rem;font-size:.82rem;color:var(--text-700);}
.u-inline-8b9154e2ab{font-weight: 700; font-size: 0.875rem; color: var(--ink-800); margin-bottom: 0.25rem;}
.u-inline-8bfc3bce05{display:flex; align-items:center; gap:5px; cursor:pointer;}
.u-inline-8c222a996e{width:auto;padding:.5rem 1.25rem;}
.u-inline-8c6c2976e8{font-size:0.55rem;}
.u-inline-8c8f533b00{width:8%;}
.u-inline-8cd54c7cdb{font-size: 0.6875rem; color: var(--ink-400); margin-top: 0.2rem;}
.u-inline-8db5008c7a{width:7%;}
.u-inline-8e509a7558{display:flex;align-items:center;gap:.3rem;}
.u-inline-9040b170ec{min-width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center; background:var(--gradient-primary); color:white; border-radius:50%; font-size:0.6875rem; font-weight:700;}
.u-inline-90414c4672{background:var(--amber-pale);}
.u-inline-904aba8bca{font-size:1rem;font-weight:700;margin-bottom:.35rem;color:var(--text-700);}
.u-inline-90634e1f6b{margin-bottom:0.75rem;}
.u-inline-907c408a00{margin:8px 0 0 20px;padding:0;}
.u-inline-90e857b9f1{font-size:.8rem;color:var(--text-500);margin-bottom:12px;}
.u-inline-910f0ab8a7{margin-top: 22px;}
.u-inline-9143c2dfcf{color:var(--ink-600); margin-bottom:0.75rem;}
.u-inline-922992c4f7{width:50px;height:1.25rem;display:inline-block;}
.u-inline-9269b2631e{display:flex; align-items:center; gap:10px; padding:14px 18px; margin-bottom:16px; background:#fef2f2; border:1px solid #fecaca; border-radius:0.75rem; color:#991b1b; font-size:0.875rem; font-weight:600;}
.u-inline-92e5201f80{background: var(--brand-primary); color: white; padding: 0.75rem 1rem; font-weight: 600; text-transform: uppercase; font-size: 0.8125rem;}
.u-inline-933a8ef29e{font-size: 0.85rem;}
.u-inline-93bf9a3a7b{width:5rem;height:.7rem;}
.u-inline-944c5b8132{font-weight:600; color:var(--primary-green); margin:0; font-size:0.875rem;}
.u-inline-95652a0d33{margin-left:2rem; padding:0.5rem 0.75rem; background:var(--primary-green-light); border-radius:var(--radius-sm); border-left:3px solid var(--primary-green);}
.u-inline-960b5563eb{height:1.5rem;width:7rem;border-radius:2rem;}
.u-inline-9633b5b638{color:var(--text-500);font-weight:500;font-size:.75rem;}
.u-inline-964072ad95{margin-bottom:15px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.u-inline-96558dd67a{height:8px;}
.u-inline-970c834f72{margin-left:auto; background:none; border:1px solid #fca5a5; color:#dc2626; border-radius:0.5rem; padding:4px 10px; cursor:pointer; font-size:0.8125rem; font-weight:600;}
.u-inline-97257a69c5{width:44px;height:24px;margin:0 auto;border-radius:12px;}
.u-inline-97294b207c{grid-column:1/-1;}
.u-inline-9890e98882{margin-left:.5rem; padding:.15rem .5rem; font-size:.74rem; border:1px solid var(--error-dark); background:transparent; color:var(--error-dark); border-radius:4px; cursor:pointer;}
.u-inline-98beeb5ef3{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:.75rem;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.u-inline-99141e9122{display:flex;justify-content:center;gap:.35rem;flex-wrap:nowrap;}
.u-inline-9a1962ff83{width:3rem;}
.u-inline-9b0245fc00{height:1rem;width:2.5rem;}
.u-inline-9b610df208{width:38px;height:.65rem;display:inline-block;}
.u-inline-9b784a51db{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--surface-gray-50);border-radius:var(--radius-md);margin-bottom:8px;border:1px solid var(--border-200);}
.u-inline-9bd0cebc41{grid-template-columns:minmax(140px,1fr) minmax(220px,2fr) auto;}
.u-inline-9bf3fbba31{display:none;align-items:flex-start;gap:.4rem;margin-top:.55rem;padding:.45rem .6rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-md);color:#fff;font-size:.66rem;line-height:1.3;}
.u-inline-9c0c53f90c{font-size:.8125rem;font-weight:600;}
.u-inline-9cde93b918{background: var(--surface-secondary); border: 1px solid var(--ink-200); border-radius: var(--radius-sm); padding: 0.75rem; font-family: monospace; white-space: pre-wrap; font-size: 0.875rem;}
.u-inline-9d56aaf28c{font-size:.85rem;}
.u-inline-9d5ee3348b{max-height: 400px; overflow-y: auto;}
.u-inline-9ddf8fcd2a{display:none; margin-top: 1rem;}
.u-inline-9def567686{display:flex;gap:.375rem;}
.u-inline-9e2840da51{font-size:.72rem;}
.u-inline-9ec55f58e7{opacity:1;transform:none;}
.u-inline-9f74638192{flex:1;display:none;}
.u-inline-a07604d334{flex:1;min-width:0;}
.u-inline-a0826f6992{visibility:hidden;}
.u-inline-a0ac9bc52b{width:48px;height:.65rem;display:inline-block;}
.u-inline-a1b334ed6e{display:none; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 0.625rem; padding: 0.625rem 0.875rem; margin-bottom: 1rem; font-size: 0.6875rem; color: #1d4ed8; font-weight: 500;}
.u-inline-a1cb270ef6{width:100%;height:.72rem;display:block;margin-bottom:.38rem;}
.u-inline-a2e94d72eb{padding:0;}
.u-inline-a5338b5840{font-size:.875rem;font-weight:600;color:var(--ink-700);}
.u-inline-a56a0b223d{color:var(--text-500);}
.u-inline-a5f61e28aa{font-size:.8125rem;padding:8px 12px;width:100%;}
.u-inline-aa47f0dcbc{font-size:0.8125rem; color:var(--primary-green); font-weight:500;}
.u-inline-aa94f16da6{font-size:.8rem;font-weight:700;color:var(--ink-700);}
.u-inline-abe807f5a0{margin-top:.5rem;font-size:.75rem;color:var(--text-500);}
.u-inline-acbb2d71ba{color:var(--error);}
.u-inline-acd292dcda{display:block;font-size:.75rem;font-weight:600;margin-bottom:6px;}
.u-inline-ad07138bda{display:flex;align-items:center;gap:.4rem;font-size:.8rem;cursor:pointer;}
.u-inline-ad2677ab1f{font-size:.65rem;color:rgba(255,255,255,.6);}
.u-inline-ad35f66e1d{color: #dc2626; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;}
.u-inline-ad421ef8b0{height:1.5rem;width:5rem;border-radius:2rem;}
.u-inline-ad7ac4e773{padding:.75rem 1rem;}
.u-inline-adf17fd380{font-size: 0.625rem; color: var(--ink-500);}
.u-inline-ae05e31e35{display: flex; align-items: center; gap: 0.75rem;}
.u-inline-ae73b7843e{display:none !important;}
.u-inline-ae934952bd{text-align:center;padding:2rem;color:var(--ink-500);}
.u-inline-aec0bd88d1{width:140px;height:1rem;display:inline-block;}
.u-inline-af3fee87a1{margin-bottom:10px;}
.u-inline-af7607c017{width:35%; height:.6rem;}
.u-inline-af79ec5d77{background:var(--text-500);}
.u-inline-afcf7064a8{height:.9rem;margin-bottom:.4rem;max-width:200px;}
.u-inline-afe0dc34ed{background:var(--warning);}
.u-inline-b0731cf0e0{margin-top:.625rem;}
.u-inline-b19ad18268{font-size:.875rem;resize:none;}
.u-inline-b1a8393c7e{width:24px;height:1rem;display:inline-block;border-radius:.25rem;}
.u-inline-b24800fea2{height:.7rem;max-width:130px;}
.u-inline-b378a57da5{border-top:1px solid rgba(2,84,45,0.15); margin-top:0.25rem; padding-top:0.5rem; font-weight:700;}
.u-inline-b4245d3891{margin-bottom:.875rem;}
.u-inline-b57afc0a59{margin-bottom: 0.75rem;}
.u-inline-b5dfcdb52a{display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap;}
.u-inline-b8aeedb644{font-size:.8rem;}
.u-inline-b8d9ae99ec{font-weight:600;color:var(--ink-800);}
.u-inline-b9cbeae9b5{height:4px;background:var(--primary-green);border-radius:2px;width:0%;transition:width 1.2s cubic-bezier(.4,0,.2,1);}
.u-inline-bc6541eb1e{color:var(--text-500); text-align:center; padding:1rem; margin:0;}
.u-inline-bca75acf57{width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;}
.u-inline-bd7c3e8942{color:#fbbf24;font-size:.75rem;}
.u-inline-bd9eded869{height:1.5rem;width:4rem;border-radius:2rem;}
.u-inline-bddf042cda{margin-top:.375rem;font-size:.73rem;padding:.35rem .7rem;}
.u-inline-be0d59a044{color: var(--ink-500); font-size: 0.75rem; margin-bottom: 1rem;}
.u-inline-be8da06696{width: 70px;}
.u-inline-be9297b92d{font-size:.75rem;font-weight:700;color:var(--ink-700);}
.u-inline-bed2930445{width:58px;height:58px;}
.u-inline-bf17975318{font-size:.7rem;}
.u-inline-bf22da9470{width:70%;margin-bottom:.25rem;}
.u-inline-bf43d68a57{padding:0 .25rem;}
.u-inline-c054d14a81{height:.9rem;margin-bottom:.4rem;max-width:240px;}
.u-inline-c0590101a7{font-size:.78rem;font-weight:var(--font-weight-semibold);color:var(--ink-800);line-height:1.5;padding:.25rem 0;}
.u-inline-c0cb1e8176{font-size:.55rem;color:var(--ink-300);}
.u-inline-c17d5917b9{display:flex;align-items:center;justify-content:center;height:100%;background:var(--ink-100);color:var(--ink-400);font-weight:700;font-size:1.1rem;}
.u-inline-c28bd948da{text-align:left;}
.u-inline-c2ab5f6beb{font-size:.6rem;background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2);}
.u-inline-c2c3db6396{text-decoration:line-through; color:var(--ink-400);}
.u-inline-c39e14086d{padding:3rem 1rem;text-align:center;}
.u-inline-c409e8440b{font-size: 0.6rem; padding: 0.25rem 0.5rem;}
.u-inline-c44222005a{width:2rem;height:2rem;}
.u-inline-c46a460a74{text-align:center;padding:1.25rem;color:var(--text-500);font-size:.8125rem;}
.u-inline-c4cb726557{grid-column: 1 / -1; text-align: center; padding: 2rem; color: var(--ink-500);}
.u-inline-c516c5b913{min-width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center; background:var(--gradient-primary); color:white; border-radius:50%; font-size:0.625rem; font-weight:700;}
.u-inline-c5e8ffe60b{opacity: 0;}
.u-inline-c6b8cfe67b{font-size:.875rem;font-weight:600;color:var(--text-900);}
.u-inline-c6e7979de4{opacity:1;}
.u-inline-c722987b6e{color:var(--ink-400);}
.u-inline-c86297f773{width:4rem; height:1.4rem; border-radius: var(--radius-sm);}
.u-inline-c8be1ccba6{display:none;}
.u-inline-c8c74c8dfc{height:.85rem;width:100px;}
.u-inline-c90ac199f5{height:.9rem;margin-bottom:.4rem;max-width:220px;}
.u-inline-c951e35a79{padding:1rem;}
.u-inline-c96a73ca56{font-size:.6rem;}
.u-inline-c9815e5a60{width:55px;height:.65rem;display:inline-block;}
.u-inline-c9decd4989{width:40px;height:40px;border-radius:50%;}
.u-inline-c9efed0824{font-size:.65rem;font-weight:700;}
.u-inline-ca6b63ed89{display:flex; align-items:flex-start; gap:0.5rem; margin-bottom:0.375rem;}
.u-inline-cad980f4b7{width:100%;}
.u-inline-cb7c5c70a2{grid-template-columns:1fr 1fr 1fr;}
.u-inline-ccc879b78e{grid-column: 1 / -1; text-align: center; padding: 2rem;}
.u-inline-cd1f2436dc{width:92%;height:.72rem;display:block;margin-bottom:.38rem;}
.u-inline-cd4ec199f9{color:var(--brand-primary,#02542D);margin-right:4px;}
.u-inline-cd7fe35b3d{font-size:.72rem;font-weight:700;color:var(--success);}
.u-inline-cf2e575ad5{display: grid; gap: 1.5rem;}
.u-inline-cfdfa80f75{width:55px;height:.75rem;display:inline-block;background:var(--ink-200);}
.u-inline-d061b86e74{margin-bottom:.75rem;}
.u-inline-d0698c48c3{overflow-x:auto;}
.u-inline-d16341b8d6{color:var(--ink-200);}
.u-inline-d2514dc712{margin:0 0 .2rem;}
.u-inline-d25c0c1cf0{margin:0; font-size:0.875rem;}
.u-inline-d2874c8660{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:.75rem;box-shadow:var(--shadow-xl);}
.u-inline-d2c63a2e7b{font-size:.75rem;color:#64748b;font-weight:400;}
.u-inline-d30095ec0b{margin:0; font-size:0.875rem; font-weight:600;}
.u-inline-d3612f07e0{text-transform:uppercase;}
.u-inline-d3b0e74140{color:var(--brand-primary);}
.u-inline-d3e7bec478{opacity:.4;flex-shrink:0;}
.u-inline-d4681f3483{padding:0 8px;}
.u-inline-d48ddc06ad{background: rgba(2,84,45,0.2);}
.u-inline-d4b563e23e{color:#059669;}
.u-inline-d4f7536fd4{margin-top: 1.5rem;}
.u-inline-d53d248222{font-size:2.75rem;opacity:.35;display:block;margin-bottom:1rem;}
.u-inline-d5c8571c15{cursor:pointer;margin-bottom:0;}
.u-inline-d6db40ea5a{width:40px;}
.u-inline-d8db29164d{font-size:.78rem;color:var(--text-700);line-height:1.65;padding:.5rem .75rem;background:var(--surface-gray-50);border-radius:var(--radius-md);font-style:italic;}
.u-inline-d97d4b290d{display:flex;flex-direction:column;gap:2px;}
.u-inline-dab43fb936{margin-top: 1rem;}
.u-inline-daeb0ebb37{color:var(--ink-400);}
.u-inline-db6e7325b9{padding:3.5rem 1rem;text-align:center;color:var(--text-500);}
.u-inline-dbd27ec492{width:85%;height:.72rem;display:block;}
.u-inline-dbe46ecc3e{margin:0 0 .25rem;font-weight:var(--font-weight-bold);color:var(--ink-700);font-size:.875rem;}
.u-inline-dca78ff4e7{width:80%;margin-bottom:.25rem;}
.u-inline-dd7c788006{height:1.2rem;width:140px;}
.u-inline-dd9577e211{grid-template-columns:repeat(2,1fr);}
.u-inline-dddc6efa10{margin-top: -0.25rem;}
.u-inline-de0aa912d3{max-width:640px;}
.u-inline-deb1e49545{margin-top:.5rem;}
.u-inline-df728c08d7{font-size:1.5rem; display:block; margin-bottom:0.5rem;}
.u-inline-e0babe3727{max-width:100px;}
.u-inline-e0f5398238{font-size: 0.75rem; color: var(--ink-500);}
.u-inline-e17e344930{padding-bottom:0;}
.u-inline-e261b5ddc7{height:1rem;width:3rem;}
.u-inline-e3237df9cc{display:flex; flex-direction:column; gap:.3rem; margin:.3rem 0 .4rem;}
.u-inline-e4419ddff2{color:#d1d5db;font-size:.75rem;}
.u-inline-e4b466083c{display:block; font-size:0.75rem; font-weight:600; margin-bottom:6px;}
.u-inline-e5c25c2864{width:100%;margin-top:0.5rem;padding:0.625rem;font-size:0.8125rem;border-radius:0.625rem;}
.u-inline-e74a373e7f{width: 300px;}
.u-inline-e74c3beb5d{font-weight:var(--font-weight-bold);color:var(--brand-primary);}
.u-inline-e7a5e21c2a{width:28px;height:1rem;display:inline-block;border-radius:.25rem;}
.u-inline-e91934e6ff{width:60px;height:.75rem;display:inline-block;background:var(--ink-200);}
.u-inline-ea2eddd3c1{color:var(--border-200);}
.u-inline-ed6d996be8{font-size:.78rem;color:var(--text-500);}
.u-inline-ed9e67c94e{padding:0 4px;color:var(--text-500);}
.u-inline-ee1ef6c1ba{width:190px;height:.65rem;display:inline-block;}
.u-inline-ee3d55bf99{flex: 1;}
.u-inline-ef7142f76c{padding: 1rem;}
.u-inline-f0a0c216bf{background:var(--success);color:white;padding:2px 6px;border-radius:4px;font-size:.625rem;margin-left:4px;}
.u-inline-f103eb60bb{font-size:.875rem;font-weight:700;color:#7f1d1d;}
.u-inline-f16e8fa0bf{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.375rem;margin:.5rem 0 .25rem;font-size:.68rem;color:var(--ink-400);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.u-inline-f203972539{width:5rem; height:.7rem;}
.u-inline-f219c57c7a{background:var(--surface-white); padding:0.75rem; border-radius:var(--radius-md); border:1px solid var(--border-200); font-size:0.875rem;}
.u-inline-f267e3ca68{margin-bottom: 1rem;}
.u-inline-f2892a2e8a{display: none;}
.u-inline-f289d0cef5{width:40%;height:.65rem;margin-top:.3rem;}
.u-inline-f369595f8b{color: var(--brand-primary);}
.u-inline-f38a951c89{flex-shrink:0;}
.u-inline-f44d69bdf1{max-width: 300px; white-space: normal;}
.u-inline-f54981239a{font-size:.875rem;margin:0;}
.u-inline-f59c6aed5f{margin-bottom:.625rem;}
.u-inline-f5f99dbec3{display:flex; align-items:flex-start; gap:0.5rem;}
.u-inline-f7110a52be{background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;}
.u-inline-f7b06fd6c3{height:1.5rem;width:6.5rem;border-radius:2rem;}
.u-inline-f8b6eff4f7{border: 2px solid var(--ink-200); border-radius: 0.75rem; padding: 1rem; cursor: pointer; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center;}
.u-inline-f8e5243e7b{background:var(--error);}
.u-inline-f94c675719{background:var(--surface-gray-100);color:var(--text-500);font-size:.7rem;}
.u-inline-f99b37cdf1{width:40px;height:1.25rem;display:inline-block;}
.u-inline-f9b74f33a8{display:grid;grid-template-columns:80px 1fr 100px auto;gap:.375rem;margin:.5rem 0 .25rem;font-size:.68rem;color:var(--ink-400);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.u-inline-fa9644bb1f{width: 60%;}
.u-inline-fb6ff19581{display:flex;align-items:center;gap:.5rem;margin-bottom:.625rem;}
.u-inline-fcb22d9d9a{color:var(--ink-500);text-align:center;padding:.875rem 1rem;font-size:.8125rem;}
.u-inline-fcc860818c{margin:.35rem 0 0;color:var(--ink-500);}
.u-inline-fd07874beb{width: 100%; height: 20px;}
.u-inline-fd14ca83c7{width:14%;}
.u-inline-fd1616863a{margin:.25rem 0 0;}
.u-inline-ff11686f6d{font-weight:normal;color:var(--ink-500);}
.u-inline-ff227d0632{margin: 0;}

/* ==========================================================
   Shared professional component refinements
   ========================================================== */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(img, svg, video, canvas) { max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font: inherit; }
:where(button, [role="button"], a, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary, #02542d) 28%, transparent);
    outline-offset: 2px;
}
[aria-label^="Close" i],
.btn-close,
.toast-close,
.modal-close {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
    touch-action: manipulation;
}
[hidden] { display: none !important; }
.app-shell { min-width: 0; overflow-x: hidden; }
.app-shell .content-area { min-width: 0; }
.app-shell :where(.table-responsive, .table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.app-shell :where(.card, .section-panel, .detail-panel, .grant-card) { min-width: 0; }
.preference-path-part { color: var(--ink-500); font-size: .78rem; font-weight: 600; }
.preference-path-part.is-current { color: var(--brand-primary); }
.page-appointment .apt-badge { background: var(--apt-category-color, #02542d); }
.bp-notification {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: .75rem 1.25rem;
    border-radius: .5rem;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .12);
    font-size: .8rem;
    font-weight: 600;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity .3s ease, transform .3s ease;
}
.bp-notification.is-visible { opacity: 1; transform: translateX(0); }
.bp-notification--success { background: var(--brand-primary, #02542d); }
.bp-notification--error { background: #dc2626; }
.withdrawal-action {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .625rem;
    border: 0;
    border-radius: .375rem;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    cursor: pointer;
}
.withdrawal-action--processing { background: #d97706; }
.withdrawal-action--completed { background: #15803d; }
.withdrawal-action--failed { background: #dc2626; }
.page-orders-detail .al-tone-brand { --activity-tone: var(--primary-green, #02542d); }
.page-orders-detail .al-tone-danger { --activity-tone: #ef4444; }
.page-orders-detail .al-icon-wrap.al-tone-brand { background: rgb(2 84 45 / .09); border: 2px solid rgb(2 84 45 / .24); }
.page-orders-detail .al-icon-wrap.al-tone-danger { background: rgb(239 68 68 / .09); border: 2px solid rgb(239 68 68 / .24); }
.page-orders-detail .al-icon-wrap[class*="al-tone-"] i { color: var(--activity-tone); }
.page-orders-detail .alm-dot[class*="al-tone-"] { background: var(--activity-tone); }

/* Keep appointment modal chrome consistent with the branded modal system. */
body.page-appointment .modal-header,
body.page-appointment .modal-header .modal-title {
    color: #fff !important;
}
body.page-appointment .modal-header {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    border-color: transparent !important;
}
body.page-appointment .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: .9;
}
body.page-appointment .modal-header .btn-close:hover,
body.page-appointment .modal-header .btn-close:focus-visible {
    opacity: 1;
}
body.page-appointment .modal-header .btn-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Standalone marketing portal and payment result pages use the same theme
   contract as the authenticated app shell. */
.page-marketing-agency-portal .agency-header-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

html[data-theme="dark"] :is(.page-marketing-agency-portal, .agency-auth-page) {
    --agency-ink: #edf5ef;
    --agency-muted: #9eaea5;
    --agency-border: rgba(148, 163, 184, .18);
    --agency-surface: #101815;
    --agency-canvas: #08110d;
    --agency-brand: #4fba80;
    --agency-brand-dark: #23764d;
    --agency-focus: #4fba80;
    --agency-danger: #f87171;
    color: var(--agency-ink);
    background: var(--agency-canvas);
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-header {
    background: rgb(16 24 21 / .94);
    border-color: var(--agency-border);
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / .24);
}
html[data-theme="dark"] .page-marketing-agency-portal :is(
    .agency-profile-menu, .agency-panel, .agency-stat-card,
    .agency-detail-stat, .agency-widget, .agency-campaign-row,
    .agency-lead-table-row, .agency-icon-action
) {
    background: var(--agency-surface);
    border-color: var(--agency-border);
    color: var(--agency-ink);
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / .22);
}
html[data-theme="dark"] .page-marketing-agency-portal :is(
    .agency-toolbar select, .agency-search input, .agency-field input,
    .agency-field textarea, .agency-btn-secondary,
    .agency-dropdown-trigger, .agency-dropdown-menu
) {
    background: var(--agency-surface) !important;
    border-color: var(--agency-border) !important;
    color: var(--agency-ink) !important;
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-btn-secondary:hover,
html[data-theme="dark"] .page-marketing-agency-portal .agency-profile-trigger:hover,
html[data-theme="dark"] .page-marketing-agency-portal .agency-profile-trigger[aria-expanded="true"],
html[data-theme="dark"] .page-marketing-agency-portal .agency-client-row:hover,
html[data-theme="dark"] .page-marketing-agency-portal .agency-icon-action:hover {
    background: #17231d !important;
    border-color: var(--agency-border) !important;
}
html[data-theme="dark"] .page-marketing-agency-portal :is(.agency-client-row, .agency-lead-row) {
    border-color: var(--agency-border);
    color: var(--agency-ink);
}
html[data-theme="dark"] .page-marketing-agency-portal :is(
    .agency-widget-head > span, .agency-widget-metrics div,
    .agency-tier-tabs button, .agency-closure-tag,
    .agency-access-chip, .agency-mix-track
) {
    background: #17231d;
    color: var(--agency-muted);
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-access-chip strong {
    background: rgb(255 255 255 / .08);
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-access-chip.access-edit {
    border-color: rgb(79 186 128 / .28);
    background: rgb(79 186 128 / .1);
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-access-chip.access-view {
    border-color: rgb(125 185 216 / .26);
    background: rgb(125 185 216 / .09);
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-stat-hot {
    background: linear-gradient(145deg, #181514, #211617);
    border-color: rgb(248 113 113 / .22);
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-stat-hot strong,
html[data-theme="dark"] .page-marketing-agency-portal .tier-hot.active {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-stat-closed {
    background: linear-gradient(145deg, #101815, #102019);
    border-color: rgb(52 211 153 / .2);
}
html[data-theme="dark"] .page-marketing-agency-portal .tier-hot.active { background: rgb(127 29 29 / .22); }
html[data-theme="dark"] .page-marketing-agency-portal .tier-warm.active { color: #fcd34d !important; background: rgb(120 53 15 / .2); }
html[data-theme="dark"] .page-marketing-agency-portal .tier-cold.active { color: #d0d9d3 !important; background: #17231d; }
html[data-theme="dark"] .page-marketing-agency-portal .agency-tier-tabs strong {
    background: rgb(255 255 255 / .08);
}
html[data-theme="dark"] .page-marketing-agency-portal .agency-avatar {
    background: rgb(79 186 128 / .16);
    color: #9ae9b1;
}

html[data-theme="dark"] body.page-payment-success {
    --green: #2f9b69;
    --green-light: #34d399;
    --green-pale: rgb(52 211 153 / .14);
    --ink-50: #131d19;
    --ink-100: #17231d;
    --ink-200: rgba(148, 163, 184, .18);
    --ink-400: #94a3b8;
    --ink-500: #b0bbb5;
    --ink-600: #d0d9d3;
    --ink-700: #e5eee8;
    --ink-800: #f4faf6;
    --amber: #fbbf24;
    --amber-pale: rgb(245 158 11 / .14);
    background: #08110d;
    color: #edf5ef;
}
html[data-theme="dark"] body.page-payment-success .ps-card {
    background: #101815;
    border: 1px solid rgba(148, 163, 184, .18);
    box-shadow: 0 24px 64px rgb(0 0 0 / .45);
}
html[data-theme="dark"] body.page-payment-success .ps-hero {
    background: linear-gradient(180deg, #102019 0%, #101815 100%);
    border-color: rgba(148, 163, 184, .18);
}
html[data-theme="dark"] body.page-payment-success :is(.ps-cell, .ps-footer) {
    background: #131d19;
    border-color: rgba(148, 163, 184, .18);
}
html[data-theme="dark"] body.page-payment-success .ps-btn-outline {
    background: #131d19;
    border-color: rgba(148, 163, 184, .22);
    color: #e5eee8;
}
html[data-theme="dark"] body.page-payment-success .ps-hero-title.pending,
html[data-theme="dark"] body.page-payment-success .ps-status-pill.pending { color: #fbbf24 !important; }
html[data-theme="dark"] body.page-payment-success .ps-status-pill.success { color: #86efac !important; }
html[data-theme="dark"] body.page-payment-success :is(.ps-hero-title.checking, .ps-status-pill.checking, .ps-checking-icon) {
    color: #fbbf24 !important;
}
html[data-theme="dark"] body.page-payment-success .ps-circle-checking {
    background: rgb(245 158 11 / .14);
}
html[data-theme="dark"] body.page-payment-success :is(.ps-hero-title.failed, .ps-status-pill.failed, .ps-failed-icon) {
    color: #fca5a5 !important;
}
html[data-theme="dark"] body.page-payment-success .ps-circle-failed,
html[data-theme="dark"] body.page-payment-success .ps-status-pill.failed {
    background: rgb(127 29 29 / .22);
}

body:is(.page-category, .page-service-category) .cat-confirm-overlay{
    position:fixed;
    inset:0;
    z-index:10030;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
}

body:is(.page-category, .page-service-category) .cat-confirm-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

body:is(.page-category, .page-service-category) .cat-confirm-modal{
    width:min(30rem,100%);
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:.85rem;
    padding:1rem;
    border:1px solid var(--border-200);
    border-radius:.9rem;
    background:var(--surface-white);
    box-shadow:var(--shadow-xl, 0 24px 54px rgba(15,23,42,.24));
    color:var(--text-700);
    transform:translateY(.5rem) scale(.96);
    transition:transform .18s ease;
}

body:is(.page-category, .page-service-category) .cat-confirm-overlay.show .cat-confirm-modal{
    transform:translateY(0) scale(1);
}

body:is(.page-category, .page-service-category) .cat-confirm-icon{
    width:2.55rem;
    height:2.55rem;
    display:grid;
    place-items:center;
    border-radius:.7rem;
    background:#fee2e2;
    color:#b91c1c;
    font-size:1rem;
}

body:is(.page-category, .page-service-category) .cat-confirm-overlay.is-neutral .cat-confirm-icon{
    background:var(--primary-green-light);
    color:var(--primary-green);
}

body:is(.page-category, .page-service-category) .cat-confirm-content{
    min-width:0;
}

body:is(.page-category, .page-service-category) .cat-confirm-content h2{
    margin:0 0 .35rem;
    color:var(--text-900);
    font-size:1rem;
    font-weight:800;
    line-height:1.25;
}

body:is(.page-category, .page-service-category) .cat-confirm-content p{
    margin:0;
    color:var(--text-600, var(--text-700));
    font-size:.82rem;
    font-weight:500;
    line-height:1.55;
    white-space:pre-line;
}

body:is(.page-category, .page-service-category) .cat-confirm-actions{
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
    gap:.55rem;
    padding-top:.85rem;
    border-top:1px solid var(--border-200);
}

body:is(.page-category, .page-service-category) .cat-confirm-btn{
    min-height:2.25rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.55rem .9rem;
    border:1px solid var(--border-200);
    border-radius:.55rem;
    background:var(--surface-white);
    color:var(--text-700);
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

body:is(.page-category, .page-service-category) .cat-confirm-btn:hover,
body:is(.page-category, .page-service-category) .cat-confirm-btn:focus-visible{
    outline:none;
    border-color:var(--primary-green);
    color:var(--primary-green);
    background:var(--primary-green-light);
    box-shadow:0 0 0 3px var(--primary-green-light);
}

body:is(.page-category, .page-service-category) .cat-confirm-btn.danger{
    border-color:#dc2626;
    background:#dc2626;
    color:#fff;
}

body:is(.page-category, .page-service-category) .cat-confirm-btn.danger:hover,
body:is(.page-category, .page-service-category) .cat-confirm-btn.danger:focus-visible{
    border-color:#b91c1c;
    background:#b91c1c;
    color:#fff;
    box-shadow:0 10px 22px -16px rgba(185,28,28,.7);
    transform:translateY(-1px);
}

html[data-theme="dark"] body:is(.page-category, .page-service-category) .cat-confirm-modal{
    background:#101815;
    border-color:rgb(148 163 184 / .2);
    box-shadow:0 24px 60px rgba(0,0,0,.42);
}

html[data-theme="dark"] body:is(.page-category, .page-service-category) .cat-confirm-content h2{
    color:#f4faf6;
}

html[data-theme="dark"] body:is(.page-category, .page-service-category) .cat-confirm-content p{
    color:#b0bbb5;
}

html[data-theme="dark"] body:is(.page-category, .page-service-category) .cat-confirm-icon{
    background:rgb(127 29 29 / .24);
    color:#fca5a5;
}

html[data-theme="dark"] body:is(.page-category, .page-service-category) .cat-confirm-overlay.is-neutral .cat-confirm-icon{
    background:var(--primary-green-light);
    color:#8fe3b5;
}

html[data-theme="dark"] body:is(.page-category, .page-service-category) .cat-confirm-actions{
    border-top-color:rgb(148 163 184 / .18);
}

html[data-theme="dark"] body:is(.page-category, .page-service-category) .cat-confirm-btn{
    background:#131d19;
    border-color:rgb(148 163 184 / .22);
    color:#d0d9d3;
}

@media(max-width:560px){
    body:is(.page-category, .page-service-category) .cat-confirm-modal{
        grid-template-columns:1fr;
        gap:.7rem;
    }

    body:is(.page-category, .page-service-category) .cat-confirm-actions{
        flex-direction:column-reverse;
    }

    body:is(.page-category, .page-service-category) .cat-confirm-btn{
        width:100%;
    }
}

body:is(.page-add-category, .page-add-service-category) .adc-native-select{
    display:none;
}

body:is(.page-add-category, .page-add-service-category) .adc-form-group:has(.adc-custom-select.open){
    position:relative;
    z-index:25;
}

body:is(.page-add-category, .page-add-service-category) .adc-custom-select{
    position:relative;
    width:100%;
}

body:is(.page-add-category, .page-add-service-category) .adc-select-trigger{
    width:100%;
    min-height:2.72rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.7rem 1rem;
    border:1.5px solid var(--border-200);
    border-radius:var(--radius-md, .5rem);
    background:var(--surface-white);
    color:var(--text-700);
    font-size:.85rem;
    font-weight:600;
    line-height:1.25;
    text-align:left;
    cursor:pointer;
    box-sizing:border-box;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}

body.page-add-service-category .adc-select-trigger{
    min-height:2.6rem;
    padding:.72rem .85rem;
    border-radius:.5rem;
    font-size:.8rem;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.02);
}

body:is(.page-add-category, .page-add-service-category) .adc-select-trigger:hover{
    border-color:var(--primary-green);
    background:var(--surface-gray-50);
}

body:is(.page-add-category, .page-add-service-category) .adc-select-trigger:focus-visible,
body:is(.page-add-category, .page-add-service-category) .adc-select-trigger.active{
    outline:none;
    border-color:var(--primary-green);
    box-shadow:0 0 0 3px var(--primary-green-light);
}

body:is(.page-add-category, .page-add-service-category) .adc-select-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body:is(.page-add-category, .page-add-service-category) .adc-select-text.placeholder{
    display:block;
    min-height:0;
    background:transparent !important;
    color:var(--text-500);
    font-weight:500;
    opacity:1 !important;
    cursor:inherit;
    animation:none;
}

body:is(.page-add-category, .page-add-service-category) .adc-select-arrow{
    flex:0 0 auto;
    color:var(--primary-green);
    font-size:.78rem;
    transition:transform .18s ease;
}

body:is(.page-add-category, .page-add-service-category) .adc-custom-select.open .adc-select-arrow{
    transform:rotate(180deg);
}

body:is(.page-add-category, .page-add-service-category) .adc-select-menu{
    position:absolute;
    top:calc(100% + .35rem);
    left:0;
    right:0;
    z-index:60;
    max-height:16rem;
    overflow:auto;
    padding:.35rem;
    border:1px solid var(--border-200);
    border-radius:.65rem;
    background:var(--surface-white);
    box-shadow:var(--shadow-lg, 0 14px 32px rgba(15,23,42,.16));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-.25rem);
    transition:opacity .16s ease,visibility .16s ease,transform .16s ease;
}

body:is(.page-add-category, .page-add-service-category) .adc-custom-select.open .adc-select-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

body:is(.page-add-category, .page-add-service-category) .adc-select-option{
    width:100%;
    min-height:2rem;
    display:flex;
    align-items:center;
    padding:.55rem .65rem;
    border:0;
    border-radius:.45rem;
    background:transparent;
    color:var(--text-700);
    font-size:.8rem;
    font-weight:600;
    line-height:1.25;
    text-align:left;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}

body:is(.page-add-category, .page-add-service-category) .adc-select-option:hover,
body:is(.page-add-category, .page-add-service-category) .adc-select-option:focus-visible,
body:is(.page-add-category, .page-add-service-category) .adc-select-option.selected{
    outline:none;
    background:var(--primary-green-light);
    color:var(--primary-green);
}

html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) .adc-select-trigger,
html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) .adc-select-menu{
    background:#101815;
    border-color:rgb(148 163 184 / .2);
    color:#d0d9d3;
}

html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) .adc-select-trigger:hover{
    background:#131d19;
}

html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) .adc-select-option{
    color:#d0d9d3;
}

html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) .adc-select-option:hover,
html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) .adc-select-option:focus-visible,
html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) .adc-select-option.selected{
    background:var(--primary-green-light);
    color:#8fe3b5;
}

@media(max-width:640px){
    body:is(.page-add-category, .page-add-service-category) .adc-select-menu{
        max-height:13rem;
    }
}

/* Page families that declare their own light palette must remap those local
   variables when the root theme changes. */
html[data-theme="dark"] body:is(
    .page-campaigns, .page-category, .page-service-category, .page-faqs,
    .page-add-category, .page-add-service-category,
    .page-list-orders, .page-orders-dashboard, .page-orders-order-dashboard,
    .page-orders-detail, .page-orders-menu, .page-orders-show-orders,
    .page-orders-user-orders, .page-orders-analytics, .page-payout-detail,
    .page-appointments-dashboard, .page-admin-dashboard,
    .page-partner-safe-settings, .page-reset-password, .page-email-verification
) {
    --surface-white: #101815;
    --surface-primary: #101815;
    --surface-gray-50: #131d19;
    --surface-gray-100: #17231d;
    --surface-gray-200: rgba(148, 163, 184, .18);
    --surface-secondary: #131d19;
    --surface-tertiary: #17231d;
    --bg-page: #08110d;
    --bg-card: #101815;
    --bg-white: #101815;
    --bg-light: #131d19;
    --text-900: #f4faf6;
    --text-800: #e5eee8;
    --text-700: #d0d9d3;
    --text-600: #b0bbb5;
    --text-500: #94a3b8;
    --text-primary: #edf5ef;
    --text-secondary: #b0bbb5;
    --text-muted: #94a3b8;
    --border-100: rgba(148, 163, 184, .12);
    --border-200: rgba(148, 163, 184, .18);
    --border-300: rgba(148, 163, 184, .26);
}

html[data-theme="dark"] body.page-add-category {
    --primary-green: #02542D;
    --primary-green-dark: #01402A;
    --primary-green-light: #02542d24;
    --primary-green-ghost: #02542d12;
    --surface-white: #101815;
    --surface-gray-50: #131d19;
    --surface-gray-100: #17231d;
    --surface-gray-200: rgb(148 163 184 / .16);
    --text-900: #f4faf6;
    --text-700: #d0d9d3;
    --text-500: #9eaea5;
    --border-200: rgb(148 163 184 / .2);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / .28);
    --shadow-md: 0 8px 18px rgb(0 0 0 / .28);
    --shadow-lg: 0 14px 32px rgb(0 0 0 / .32);
    --shadow-xl: 0 20px 40px rgb(0 0 0 / .38);
}

html[data-theme="dark"] body.page-add-service-category {
    --primary-green: #4fba80;
    --primary-green-dark: #23764d;
    --primary-green-light: rgb(79 186 128 / .18);
    --primary-green-ghost: rgb(79 186 128 / .08);
    --surface-white: #101815;
    --surface-gray-50: #131d19;
    --surface-gray-100: #17231d;
    --surface-gray-200: rgb(148 163 184 / .16);
    --text-900: #f4faf6;
    --text-700: #d0d9d3;
    --text-500: #9eaea5;
    --border-200: rgb(148 163 184 / .2);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / .28);
    --shadow-md: 0 8px 18px rgb(0 0 0 / .28);
    --shadow-lg: 0 14px 32px rgb(0 0 0 / .32);
    --shadow-xl: 0 20px 40px rgb(0 0 0 / .38);
}
html[data-theme="dark"] body:is(.page-add-category, .page-add-service-category) :is(
    .adc-header-card, .adc-card, .adc-actions, .adc-card-header,
    .adc-info-block, .adc-code-sample, .adc-tag-wrapper
) {
    border-color: rgb(148 163 184 / .2) !important;
}
html[data-theme="dark"] body.page-add-service-category .adc-info-block.tips {
    background: rgb(79 186 128 / .08) !important;
    border-color: rgb(79 186 128 / .18) !important;
}

html[data-theme="dark"] body.page-campaigns :is(.campaigns-header-card, .stat-card, .campaign-card, .campaigns-table-card),
html[data-theme="dark"] body.page-list-orders :is(.customers-header-card, .stat-card, .customers-table-card),
html[data-theme="dark"] body.page-faqs :is(.customers-header-card, .stat-card, .customers-table-card),
html[data-theme="dark"] body:is(.page-category, .page-service-category) :is(.cat-header-card, .cat-stat-card, .cat-table-card, .cat-modal-content),
html[data-theme="dark"] body.page-orders-dashboard :is(.page-header, .stat-card, .filters-section, .table-container),
html[data-theme="dark"] body.page-orders-detail :is(.od-header, .od-card),
html[data-theme="dark"] body.page-payout-detail :is(.detail-header-card, .stat-card, .detail-card, .table-container),
html[data-theme="dark"] body.page-appointments-dashboard :is(.stat-card, .appointments-card, .filters-card, .recent-appointments),
html[data-theme="dark"] body.page-partner-safe-settings :is(.safe-settings-card, .safe-settings-fieldset),
html[data-theme="dark"] body.page-admin-dashboard :is(.card, .modal-content, .table-responsive) {
    background: #101815 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #edf5ef !important;
    box-shadow: 0 12px 28px rgb(0 0 0 / .28) !important;
}
html[data-theme="dark"] body:is(.page-appointments-dashboard, .page-admin-dashboard) {
    background: #08110d !important;
    color: #edf5ef !important;
}
html[data-theme="dark"] body.page-orders-analytics .analytics-btn-primary {
    color: #fff !important;
}
html[data-theme="dark"] body.page-orders-user-orders :is(
    .card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-warning),
    .card-header, .card-footer
) {
    background: #101815 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #edf5ef !important;
}
html[data-theme="dark"] body.page-orders-user-orders :is(.form-control, .form-select, .input-group-text) {
    background: #131d19 !important;
    border-color: rgba(148, 163, 184, .22) !important;
    color: #edf5ef !important;
}
html[data-theme="dark"] :is(.bg-warning.text-dark, .bg-info.text-dark) {
    color: #17211b !important;
}

/* Remaining theme-specific component surfaces. These stay page-scoped so a
   specialised editor or form cannot leak its palette into another screen. */
html[data-theme="dark"] .delegated-banner {
    background: #2b2412 !important;
    border-color: rgb(251 191 36 / .32) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .delegated-banner .btn {
    background: transparent !important;
    border-color: rgb(252 211 77 / .48) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] body.page-dashboard .header-title {
    background-image: linear-gradient(135deg, #8fe3b5 0%, #c6f6d5 100%);
}
html[data-theme="dark"] body.page-product-service :is(
    .variant-inline-select, .variant-chip-input, .variant-image-preview,
    .pdf-modal-content, .main-header .btn.btn-ghost, .mobile-toggle,
    .unsaved-nav-close, .unsaved-nav-btn,
    /* .mobile-header hardcodes a near-white gradient with no dark variant,
       leaving dark-mode's light title text at ~1:1 on white. */
    .mobile-header
) {
    background: var(--surface-primary, #101815) !important;
    border-color: var(--ink-200, rgb(148 163 184 / .18)) !important;
    color: var(--ink-700, #edf5ef) !important;
}
html[data-theme="dark"] body.page-settings :is(
    input[type="date"], input[type="time"], input[type="datetime-local"]
),
html[data-theme="dark"] body.page-upload-business-profile :is(
    input[type="date"], input[type="time"], input[type="datetime-local"]
) {
    color-scheme: dark !important;
}
html[data-theme="dark"] body.page-settings .bp-form-control.field-required-attention {
    background: rgb(127 29 29 / .18) !important;
    color: #fee2e2 !important;
}
html[data-theme="dark"] body.page-settings .dropdown-trigger {
    background: var(--wb-surface, #101815) !important;
    color: var(--wb-text, #edf5ef) !important;
    border-color: var(--wb-border, rgb(148 163 184 / .18)) !important;
}
html[data-theme="dark"] body.page-settings .dropdown-trigger-text.placeholder,
html[data-theme="dark"] body.page-settings .dropdown-trigger > i {
    color: var(--wb-text-soft, #9fb3a8) !important;
}
html[data-theme="dark"] body.page-settings .custom-dropdown .dropdown-menu {
    background: var(--wb-surface, #101815) !important;
    border-color: var(--wb-border, rgb(148 163 184 / .18)) !important;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / .5), 0 8px 10px -6px rgb(0 0 0 / .4) !important;
}
html[data-theme="dark"] body.page-settings .dropdown-option {
    color: var(--wb-text, #edf5ef) !important;
}
html[data-theme="dark"] body.page-settings .dropdown-option.placeholder {
    color: var(--wb-text-soft, #9fb3a8) !important;
}
html[data-theme="dark"] body.page-settings .dropdown-option:hover {
    background: rgba(156, 252, 203, 0.14) !important;
    color: var(--brand-accent, #9cfccb) !important;
}
html[data-theme="dark"] body.page-settings .dropdown-option.selected {
    background: var(--brand-primary) !important;
    color: #fff !important;
}
html[data-theme="dark"] body.page-settings .field-required-message,
html[data-theme="dark"] body.page-settings .password-strength.weak {
    color: #fca5a5 !important;
}
html[data-theme="dark"] body.page-settings .alert-bar-error {
    background: rgb(127 29 29 / .22) !important;
    color: #fecaca !important;
}
html[data-theme="dark"] body.page-settings .alert-bar-success {
    background: rgb(20 83 45 / .24) !important;
    color: #bbf7d0 !important;
}
html[data-theme="dark"] body.page-settings .delegated-sensitive-note {
    background: rgb(120 53 15 / .22) !important;
    border-color: rgb(251 191 36 / .38) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] body.page-settings .delegated-sensitive-note :is(strong, i, span) {
    color: inherit !important;
}
html[data-theme="dark"] body.page-settings :is(.grant-card, .grant-service-row) {
    background: #101815 !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: #edf5ef !important;
    box-shadow: 0 12px 28px rgb(0 0 0 / .24) !important;
}
html[data-theme="dark"] body.page-settings .grant-card:hover,
html[data-theme="dark"] body.page-settings .grant-service-row:hover {
    background: #131d19 !important;
    border-color: rgba(47, 155, 105, .28) !important;
}
html[data-theme="dark"] body.page-settings .grant-service-row.grant-sensitive-row {
    background: rgb(120 53 15 / .18) !important;
    border-color: rgb(251 191 36 / .34) !important;
}
html[data-theme="dark"] body.page-settings :is(.grant-card-head, .grant-card-actions) {
    border-color: rgba(148, 163, 184, .18) !important;
}
html[data-theme="dark"] body.page-settings :is(.grant-card-identity strong, .grant-service-name strong) {
    color: #edf5ef !important;
}
html[data-theme="dark"] body.page-settings :is(.grant-card-meta, .grant-list-head, .grant-service-description, .grant-selector span) {
    color: #9eaea5 !important;
}
html[data-theme="dark"] body.page-settings .grant-service-icon {
    background: rgb(47 155 105 / .16) !important;
    color: #9ae9b1 !important;
}
html[data-theme="dark"] body.page-settings .grant-sensitive-row .grant-service-icon,
html[data-theme="dark"] body.page-settings .grant-sensitive-badge {
    background: rgb(251 191 36 / .16) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] body.page-settings .grant-selector {
    background: #08110d !important;
    border-color: rgba(148, 163, 184, .18) !important;
}
html[data-theme="dark"] body.page-settings .grant-selector label:hover span {
    background: rgb(47 155 105 / .12) !important;
    color: #9ae9b1 !important;
}
html[data-theme="dark"] body.page-settings .grant-selector input:checked + span {
    background: linear-gradient(135deg, #084928, #0d6a39) !important;
    color: #eff9f2 !important;
}
html[data-theme="dark"] body.page-settings .main-title {
    background: none !important;
    color: #edf5ef !important;
    -webkit-text-fill-color: #edf5ef !important;
}
html[data-theme="dark"] body.page-settings .password-strength.medium {
    color: #fcd34d !important;
}
html[data-theme="dark"] body.page-settings .password-strength.strong {
    color: #86efac !important;
}
html[data-theme="dark"] body.page-upload-business-profile .bp-step-error-summary {
    background: rgb(127 29 29 / .2) !important;
    border-color: rgb(248 113 113 / .35) !important;
    color: #fecaca !important;
}
html[data-theme="dark"] body.page-upload-business-profile .bp-agency-access-panel {
    background: linear-gradient(135deg, #14261c, #101815) !important;
    border-color: rgb(79 186 128 / .28) !important;
}
html[data-theme="dark"] body.page-upload-business-profile .bp-agency-access-panel h3 {
    color: #d9fbe7 !important;
}
html[data-theme="dark"] body.page-upload-business-profile .bp-agency-access-panel p {
    color: #aebdb5 !important;
}
html[data-theme="dark"] body.page-upload-business-profile .bp-agency-access-panel .bp-inline-link {
    color: #8fe3b5 !important;
}
html[data-theme="dark"] body.page-upload-business-profile .extra-kg-pricing {
    background: rgb(120 53 15 / .18) !important;
    border-color: rgb(251 191 36 / .28) !important;
}
html[data-theme="dark"] body.page-upload-business-profile .extra-kg-pricing .bp-form-label,
html[data-theme="dark"] body.page-upload-business-profile .extra-kg-pricing .info-helper-text {
    color: #fde68a !important;
}
html[data-theme="dark"] body.page-upload-business-profile .extra-kg-pricing .info-helper-text {
    background: rgb(41 37 16 / .68) !important;
}
body.page-appointments-appointment-tracker .tracker-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
}
body.page-appointments-appointment-tracker .tracker-pagination a {
    padding: .5rem .85rem;
    border: 1px solid var(--brand-primary, #02542d);
    border-radius: .5rem;
    color: var(--brand-primary, #02542d);
    text-decoration: none;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker {
    background: #08110d !important;
    color: #edf5ef !important;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker :is(
    .filter-section, .appointment-card, input, select
) {
    background: #101815 !important;
    border-color: rgba(148, 163, 184, .22) !important;
    color: #edf5ef !important;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker :is(.appointment-header, .chat-history) {
    border-color: rgba(148, 163, 184, .18) !important;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker .user-message {
    background: #15263a !important;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker .bot-message {
    background: #14261c !important;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker .status-scheduled {
    background: rgb(30 64 175 / .24) !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker .status-in-progress {
    background: rgb(20 83 45 / .28) !important;
    color: #bbf7d0 !important;
}
html[data-theme="dark"] body.page-appointments-appointment-tracker .status-completed {
    background: #17231d !important;
    color: #d0d9d3 !important;
}
body.page-agent-login .agent-login-form {
    width: min(100%, 32rem);
}
body.page-admin-dashboard :is(.search-container, .admin-search, .search-wrapper) {
    max-width: 100%;
}
body.page-admin-dashboard :is(.search-container, .admin-search, .search-wrapper) input {
    width: min(300px, 100%);
}

@media (max-width: 768px) {
    body:is(.page-orders-daily-report, .page-orders-user-orders) :is(th, td) {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    .bp-notification { top: .75rem; right: .75rem; left: .75rem; max-width: none; }
    .app-shell :where(.page-heading, .detail-head, .grant-card-head, .toolbar) {
        align-items: stretch;
        flex-direction: column;
    }
    .app-shell :where(button, .btn, input, select, textarea) { min-height: 2.75rem; }
    .app-shell :where(.btn-close, .toast-close, .modal-close, [aria-label^="Close" i]) {
        min-height: 0;
        min-width: 0;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    body.page-chat { --sidebar-width: 280px; }
}

@media (min-width: 769px) and (max-width: 992px) {
    body.page-chat { --sidebar-width: 270px; }

    body.page-chat .chat-container {
        gap: .75rem;
        padding: .75rem;
    }

    body.page-chat .chat-container .chat-header {
        padding-inline: .9rem;
        gap: .7rem;
    }

    body.page-chat .chat-container .chat-actions {
        max-width: min(46vw, 360px);
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    body.page-chat .chat-container .chat-actions::-webkit-scrollbar {
        display: none;
    }

    body.page-chat .chat-container .chat-control-btn {
        min-width: max-content;
        height: 34px;
        padding-inline: .75rem;
    }
}

/* Chat mobile is a true list/detail flow, not an off-canvas desktop drawer. */
@media (max-width: 768px) {
    body.page-chat {
        min-height: calc(var(--vh, 1vh) * 100);
        min-height: 100dvh;
    }

    body.page-chat .layout-wrapper,
    body.page-chat .flex-fill {
        height: calc(var(--vh, 1vh) * 100);
        min-height: calc(var(--vh, 1vh) * 100);
        height: 100dvh;
        min-height: 100dvh;
    }

    body.page-chat .content-area {
        flex: 0 0 calc((var(--vh, 1vh) * 100) - var(--topbar-height, 64px));
        height: calc((var(--vh, 1vh) * 100) - var(--topbar-height, 64px));
        flex: 0 0 calc(100dvh - var(--topbar-height, 64px));
        height: calc(100dvh - var(--topbar-height, 64px));
        min-height: 0;
        margin-top: var(--topbar-height, 64px) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    body.page-chat .chat-container {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        padding: 0;
        gap: 0;
        overflow: hidden;
    }

    body.page-chat .mobile-overlay { display: none !important; }

    body.page-chat .chat-sidebar { z-index: 1; }

    body.page-chat .chat-container .chat-sidebar,
    body.page-chat .chat-container .chat-main {
        position: absolute;
        inset: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        transition: none;
    }

    body.page-chat .chat-container .chat-sidebar {
        z-index: 1;
        padding-top: 0;
    }

    body.page-chat .chat-container .chat-main {
        z-index: 2;
    }

    body.page-chat.mobile-chat-list .chat-sidebar {
        display: flex;
        transform: none;
    }

    body.page-chat.mobile-chat-list .chat-main {
        display: none;
    }

    body.page-chat.mobile-chat-detail .chat-sidebar {
        display: none;
    }

    body.page-chat.mobile-chat-detail .chat-main {
        display: flex;
    }

    body.page-chat.mobile-chat-list .chat-container .chat-sidebar,
    body.page-chat:not(.mobile-chat-list):not(.mobile-chat-detail) .chat-container .chat-sidebar {
        display: flex;
        pointer-events: auto !important;
        visibility: visible;
    }

    body.page-chat.mobile-chat-list .chat-container .chat-main,
    body.page-chat:not(.mobile-chat-list):not(.mobile-chat-detail) .chat-container .chat-main {
        display: none;
    }

    body.page-chat.mobile-chat-detail .chat-container .chat-sidebar {
        display: none;
    }

    body.page-chat.mobile-chat-detail .chat-container .chat-main {
        display: flex;
        pointer-events: auto !important;
        visibility: visible;
    }

    body.page-chat .chat-container .chat-sidebar .sidebar-header {
        min-height: 3.75rem;
        padding: .75rem 1rem;
    }

    body.page-chat .chat-sidebar .sidebar-title {
        font-size: .98rem;
        letter-spacing: 0;
    }

    body.page-chat .chat-container .chat-filters {
        padding: .7rem .9rem .6rem;
    }

    body.page-chat .chat-container .filter-tab {
        height: 42px;
        min-width: 0;
        padding-inline: .55rem;
        gap: .35rem;
        line-height: 1.15;
    }

    body.page-chat .filter-badge {
        min-width: 21px;
    }

    body.page-chat .chat-container .search-container {
        padding: .65rem .9rem;
    }

    body.page-chat .chat-container .search-wrapper {
        height: 44px;
        padding-inline: .8rem;
    }

    body.page-chat .contact-list-container {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    body.page-chat .chat-container .contact-list {
        height: 100%;
        overflow-y: auto;
        padding: .45rem .5rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
    }

    body.page-chat .chat-container .contact-item {
        min-height: 4.25rem;
        margin: 0 0 .35rem;
        padding: .72rem .65rem;
        gap: .62rem;
        border: 1px solid transparent;
        border-bottom-color: var(--border);
        border-radius: .65rem;
    }

    body.page-chat .chat-container .contact-item:hover,
    body.page-chat .chat-container .contact-item.active {
        transform: none;
    }

    body.page-chat .chat-container .contact-avatar,
    body.page-chat .chat-container .chat-avatar {
        width: 38px;
        height: 38px;
        font-size: .76rem;
    }

    body.page-chat .chat-container .contact-info {
        min-width: 0;
    }

    body.page-chat .chat-container .contact-name {
        margin-bottom: .12rem;
        font-size: .82rem;
    }

    body.page-chat .chat-container .contact-preview {
        max-width: 100%;
        font-size: .74rem;
    }

    body.page-chat .chat-container .contact-assigned {
        display: flex;
        align-items: center;
        gap: .3rem;
        color: var(--primary-green);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.page-chat .contact-meta {
        max-width: 5.75rem;
        gap: .28rem;
    }

    body.page-chat .contact-time {
        font-size: .64rem;
    }

    body.page-chat .contact-status {
        max-width: 100%;
        padding: .13rem .42rem;
        font-size: .62rem;
        letter-spacing: 0;
        white-space: nowrap;
    }

    body.page-chat .chat-container .chat-header {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-areas:
            "back contact"
            "actions actions";
        height: auto;
        min-height: 0;
        padding: .5rem .75rem 0;
        align-items: center;
        column-gap: .6rem;
        row-gap: .45rem;
        position: sticky;
        top: 0;
    }

    body.page-chat #openSidebarBtn {
        grid-area: back;
        display: flex !important;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    body.page-chat .chat-container .chat-contact-info {
        grid-area: contact;
        min-width: 0;
        gap: .6rem;
    }

    body.page-chat .chat-container .chat-contact-name {
        margin: 0;
        font-size: .86rem;
        letter-spacing: 0;
    }

    body.page-chat .chat-container .chat-contact-status {
        font-size: .68rem;
    }

    body.page-chat .chat-container .chat-actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: minmax(74px, .82fr) minmax(98px, 1fr) 38px 38px;
        width: calc(100% + 1.5rem);
        max-width: none;
        margin-inline: -.75rem;
        padding: .45rem .75rem .55rem;
        gap: .45rem;
        border-top: 1px solid var(--border);
        overflow: visible;
    }

    body.page-chat .chat-container .chat-control-btn {
        width: 100%;
        min-width: 0;
        height: 36px;
        padding-inline: .55rem;
        border-radius: .55rem;
        font-size: .7rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    body.page-chat .chat-container .action-btn {
        width: 38px;
        height: 36px;
        border-radius: .55rem;
        flex-shrink: 0;
    }

    body.page-chat .chat-menu {
        top: calc(100% + .35rem);
        right: .75rem;
        min-width: min(220px, calc(100vw - 1.5rem));
        border-radius: .75rem;
    }

    body.page-chat #chatSearchBar {
        padding: .55rem .75rem;
    }

    body.page-chat .chat-container .chat-messages {
        padding: .85rem .75rem 1rem;
        gap: .42rem;
    }

    body.page-chat .chat-container .message {
        max-width: min(88%, 36rem);
        padding: .62rem .75rem;
        border-radius: .75rem;
        font-size: .82rem;
        line-height: 1.45;
    }

    body.page-chat .message-meta {
        font-size: .64rem;
    }

    body.page-chat .date-separator {
        margin: .35rem 0;
    }

    body.page-chat .message-composer {
        padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px));
        gap: .5rem;
    }

    body.page-chat .composer-container {
        min-height: 44px;
        padding: .42rem .5rem .42rem .75rem;
        gap: .35rem;
        border-radius: .75rem;
    }

    body.page-chat .message-input {
        min-height: 24px;
        font-size: 16px;
        line-height: 1.35;
    }

    body.page-chat .composer-actions {
        gap: .1rem;
        flex-shrink: 0;
    }

    body.page-chat .composer-btn {
        width: 34px;
        height: 34px;
    }

    body.page-chat .send-btn {
        width: 44px;
        height: 44px;
    }

    body.page-chat .media-composer-panel {
        padding: .5rem;
        border-radius: .75rem;
    }

    body.page-chat .recording-state,
    body.page-chat .media-preview {
        flex-wrap: wrap;
    }

    body.page-chat .media-preview-details {
        min-width: calc(100% - 52px);
    }

    body.page-chat .new-message-indicator {
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 2rem);
    }

    body.page-chat .toast {
        top: calc(var(--topbar-height, 64px) + .65rem);
        right: .75rem;
        left: .75rem;
        max-width: none;
    }
}

@media (max-width: 380px) {
    body.page-chat .chat-container .chat-filters,
    body.page-chat .chat-container .search-container {
        padding-inline: .7rem;
    }

    body.page-chat .chat-container .filter-tab {
        font-size: .74rem;
        padding-inline: .45rem;
    }

    body.page-chat .chat-container .chat-header {
        grid-template-columns: 36px minmax(0, 1fr);
        padding-inline: .62rem;
    }

    body.page-chat #openSidebarBtn {
        width: 36px;
        height: 36px;
    }

    body.page-chat .chat-container .chat-actions {
        grid-template-columns: minmax(68px, .82fr) minmax(88px, 1fr) 36px 36px;
        width: calc(100% + 1.24rem);
        margin-inline: -.62rem;
        padding-inline: .62rem;
        gap: .35rem;
    }

    body.page-chat .chat-container .chat-control-btn {
        height: 34px;
        font-size: .66rem;
        padding-inline: .4rem;
    }

    body.page-chat .chat-container .action-btn {
        width: 36px;
        height: 34px;
    }

    body.page-chat .chat-container .chat-messages {
        padding-inline: .62rem;
    }

    body.page-chat .message-composer {
        padding-inline: .62rem;
    }
}

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

/* ==========================================================
   Desktop density and shared visual rhythm

   The dashboard previously needed roughly 80% browser zoom to fit naturally.
   Keep browser zoom at 100% and apply that density at the design-system level
   instead. Mobile/tablet typography and 44px touch targets stay unchanged.
   ========================================================== */
@media (min-width: 993px) {
    html {
        font-size: 80%;
    }

    :root {
        --sidebar-width-expanded: 216px;
        --sidebar-width-collapsed: 56px;
        --ui-page-gutter: 1.25rem;
        --ui-section-gap: 1rem;
        --ui-control-height: 2.625rem;
        --ui-card-radius: .875rem;
    }

    body {
        line-height: 1.48;
        text-rendering: optimizeLegibility;
    }

    /* Application frame */
    body.app-shell #sidebar.sidebar {
        width: var(--sidebar-width-expanded);
        min-width: var(--sidebar-width-expanded);
    }

    body.app-shell .sidebar.collapsed {
        width: var(--sidebar-width-collapsed) !important;
        min-width: var(--sidebar-width-collapsed) !important;
    }

    body.app-shell .sidebar-header {
        padding: .85rem .8rem .5rem;
        margin-bottom: .25rem;
    }

    body.app-shell .menu-label {
        padding: .62rem .85rem .3rem;
    }

    body.app-shell .nav.flex-column {
        padding-inline: .5rem;
        gap: .14rem;
    }

    body.app-shell .nav-link {
        gap: .58rem;
        padding: .58rem .75rem;
        border-radius: .7rem;
    }

    body.app-shell .nav-link.active {
        padding-left: calc(.75rem - 3px) !important;
    }

    body.app-shell .navbar {
        min-height: 3.75rem;
        padding-block: .3rem;
    }

    body.app-shell .navbar .container-fluid {
        padding-inline: var(--ui-page-gutter);
    }

    body.app-shell #toggleSidebarBtn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    body.app-shell .language-dropdown {
        min-width: 124px;
    }

    body.app-shell .language-dropdown-trigger {
        min-height: 34px;
        padding: 5px 9px;
    }

    body.app-shell .user-avatar {
        width: 31px;
        height: 31px;
    }

    body.app-shell .content-area {
        padding: 1rem var(--ui-page-gutter) 1.25rem;
    }

    /* Old global `.container { max-width: 600px }` made some dashboard pages
       artificially narrow. Page-owned inner max-widths still remain intact. */
    body.app-shell .content-area > :is(.container, .container-fluid) {
        width: 100%;
        max-width: none !important;
        margin-inline: auto;
    }

    body.app-shell .content-area > :first-child {
        margin-top: 0;
    }

    /* Consistent component rhythm without overriding page-specific palettes. */
    body.app-shell :is(.card, .modal-content, .dropdown-menu, .table-responsive) {
        border-radius: var(--ui-card-radius);
    }

    body.app-shell :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select) {
        min-height: var(--ui-control-height);
    }

    body.app-shell :is(.form-control, .form-select, .btn) {
        line-height: 1.4;
    }

    body.app-shell :is(.card-header, .card-footer) {
        padding-block: .8rem;
    }

    body.app-shell :is(table, .table, .custom-table) :is(th, td) {
        vertical-align: middle;
    }

    body.app-shell :is(.table, .custom-table) > :not(caption) > * > * {
        padding-block: .65rem;
    }

    body.app-shell :is(.page-heading, .header-content, .detail-head, .toolbar, .filters-header) {
        gap: var(--ui-section-gap);
    }

    /* Authentication and other centered standalone pages have several fixed
       pixel shells; cap them so they match the same desktop density. */
    body:is(.page-login, .page-register) .main-container {
        max-width: 1060px;
        max-height: calc(100vh - 2.5rem);
    }

    body.page-login .main-container {
        height: min(576px, calc(100vh - 2.5rem));
    }

    body:is(.page-login, .page-register) :is(.hero-section, .form-section) {
        padding-block: 2.25rem;
    }

    body:is(.page-forgot-password, .page-reset-password) .main-container {
        max-width: 980px;
    }

    body.page-payment-success .ps-card {
        width: min(540px, 100%);
    }

}

/* Mid-size laptops need compact spacing, but not the full 80% type scale. */
@media (min-width: 769px) and (max-width: 992px) {
    body.app-shell .content-area {
        padding: 1rem;
    }

    body.app-shell :is(.card, .modal-content) {
        border-radius: .875rem;
    }
}

/* Authentication pages must never inherit a desktop-sized child width on
   narrow screens. Keep branding present, but compact enough to reach the form. */
@media (max-width: 768px) {
    body:is(.page-login, .page-register) {
        display: block;
        padding: 0 !important;
        overflow-x: hidden;
    }

    body:is(.page-login, .page-register) .main-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh;
        border-radius: 0;
    }

    body:is(.page-login, .page-register) :is(
        .hero-section, .form-section, .login-form, .register-form,
        .form-grid, .form-row, .form-group, .input-wrapper
    ) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.page-login .hero-section {
        padding: 1.65rem 1.25rem;
    }

    body.page-login .hero-title {
        font-size: 2.15rem;
        margin-bottom: .55rem;
    }

    body.page-login .hero-subtitle {
        margin-bottom: .7rem;
        font-size: .92rem;
    }

    body.page-login .hero-points {
        margin-top: .45rem;
    }

    body.page-login .hero-points li {
        gap: .6rem;
        margin: .3rem 0;
        padding: .15rem 0;
        font-size: .88rem;
    }

    body.page-login .form-section {
        padding: 2rem 1.25rem !important;
    }

    body.page-login .form-options {
        gap: .75rem 1rem;
        flex-wrap: wrap;
    }

    body.page-login .btn-login {
        width: 100%;
    }

    body:is(.page-login, .page-register) :is(input, select, textarea, button) {
        max-width: 100%;
    }
}

/* Category-first setup modal used by product and service creation pages. */
body.page-product-service .category-first-overlay,
body.page-service-service .category-first-overlay {
    position: fixed;
    inset: 0;
    z-index: 1450;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(7, 18, 12, .58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

body.page-product-service .category-first-overlay.active,
body.page-service-service .category-first-overlay.active {
    opacity: 1;
    visibility: visible;
}

body.page-product-service .category-first-modal {
    --cf-bg: var(--surface-primary, #fff);
    --cf-soft: var(--surface-secondary, #f6faf7);
    --cf-border: var(--ink-200, #dfe7e2);
    --cf-text: var(--ink-800, #17211b);
    --cf-muted: var(--ink-500, #66756b);
    --cf-primary: var(--brand-primary, #02542d);
    --cf-danger: var(--error, #dc2626);
    --cf-primary-soft: rgba(2, 84, 45, .09);
}

body.page-service-service .category-first-modal {
    --cf-bg: var(--sv-surface, #fff);
    --cf-soft: var(--sv-surface-2, #f6faf7);
    --cf-border: var(--sv-border, #dfe7e2);
    --cf-text: var(--sv-text, #17211b);
    --cf-muted: var(--sv-muted, #66756b);
    --cf-primary: var(--sv-primary, #02542d);
    --cf-danger: var(--sv-danger, #dc2626);
    --cf-primary-soft: var(--sv-primary-soft, rgba(2, 84, 45, .09));
}

body.page-product-service .category-first-modal,
body.page-service-service .category-first-modal {
    width: min(100%, 520px);
    max-height: min(90vh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--cf-bg);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    box-shadow: 0 24px 52px -34px rgba(15, 23, 42, .6);
    transform: translateY(10px) scale(.985);
    transition: transform .2s ease;
}

body.page-product-service .category-first-overlay.active .category-first-modal,
body.page-service-service .category-first-overlay.active .category-first-modal {
    transform: translateY(0) scale(1);
}

body.page-product-service .category-first-header,
body.page-service-service .category-first-header {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem;
    border-bottom: 1px solid var(--cf-border);
}

body.page-product-service .category-first-icon,
body.page-service-service .category-first-icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--cf-primary);
    background: var(--cf-primary-soft);
}

body.page-product-service .category-first-header > div,
body.page-service-service .category-first-header > div {
    flex: 1;
    min-width: 0;
}

body.page-product-service .category-first-header h3,
body.page-service-service .category-first-header h3 {
    margin: 0;
    color: var(--cf-text);
    font-size: .96rem;
    line-height: 1.25;
    font-weight: 800;
}

body.page-product-service .category-first-header p,
body.page-service-service .category-first-header p {
    margin: .25rem 0 0;
    color: var(--cf-muted);
    font-size: .76rem;
    line-height: 1.45;
}

body.page-product-service .category-first-close,
body.page-service-service .category-first-close {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-muted);
    background: var(--cf-soft);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    cursor: pointer;
}

body.page-product-service .category-first-close:hover,
body.page-service-service .category-first-close:hover {
    color: var(--cf-danger);
}

body.page-product-service .category-first-body,
body.page-service-service .category-first-body {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
    overflow-y: auto;
}

body.page-product-service .category-first-field,
body.page-service-service .category-first-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

body.page-product-service .category-first-field label,
body.page-service-service .category-first-field label {
    color: var(--cf-text);
    font-size: .75rem;
    font-weight: 700;
}

body.page-product-service .category-first-field input,
body.page-product-service .category-first-field textarea,
body.page-service-service .category-first-field input,
body.page-service-service .category-first-field textarea {
    width: 100%;
    padding: .65rem .75rem;
    color: var(--cf-text);
    background: var(--cf-soft);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.45;
    outline: none;
}

body.page-product-service .category-first-field textarea,
body.page-service-service .category-first-field textarea {
    resize: vertical;
    min-height: 96px;
}

body.page-product-service .category-first-field input:focus,
body.page-product-service .category-first-field textarea:focus,
body.page-service-service .category-first-field input:focus,
body.page-service-service .category-first-field textarea:focus {
    border-color: var(--cf-primary);
    box-shadow: 0 0 0 3px var(--cf-primary-soft);
}

body.page-product-service .category-first-field small,
body.page-service-service .category-first-field small {
    color: var(--cf-muted);
    font-size: .7rem;
}

body.page-product-service .category-first-error,
body.page-service-service .category-first-error {
    display: none;
    margin: 0;
    padding: .6rem .7rem;
    color: var(--cf-danger);
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .22);
    border-radius: 8px;
    font-size: .74rem;
    line-height: 1.35;
}

body.page-product-service .category-first-error.show,
body.page-service-service .category-first-error.show {
    display: block;
}

body.page-product-service .category-first-footer,
body.page-service-service .category-first-footer {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--cf-border);
    background: var(--cf-soft);
}

body.page-product-service .category-first-secondary,
body.page-product-service .category-first-primary,
body.page-service-service .category-first-secondary,
body.page-service-service .category-first-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    padding: .58rem .85rem;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.page-product-service .category-first-secondary,
body.page-service-service .category-first-secondary {
    color: var(--cf-text);
    background: var(--cf-bg);
    border: 1px solid var(--cf-border);
}

body.page-product-service .category-first-primary,
body.page-service-service .category-first-primary {
    color: #fff;
    background: var(--cf-primary);
    border: 1px solid var(--cf-primary);
}

body.page-product-service .category-first-secondary:hover,
body.page-product-service .category-first-primary:hover,
body.page-service-service .category-first-secondary:hover,
body.page-service-service .category-first-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 20px -18px rgba(15, 23, 42, .5);
}

body.page-product-service .category-first-primary:disabled,
body.page-service-service .category-first-primary:disabled {
    opacity: .72;
    cursor: wait;
    transform: none;
}

body.page-product-service .category-first-primary .spinner-border,
body.page-service-service .category-first-primary .spinner-border {
    width: .85rem;
    height: .85rem;
    border-width: .12rem;
}

@media (max-width: 560px) {
    body.page-product-service .category-first-header,
    body.page-service-service .category-first-header {
        padding: .85rem;
    }

    body.page-product-service .category-first-body,
    body.page-service-service .category-first-body {
        padding: .85rem;
    }

    body.page-product-service .category-first-footer,
    body.page-service-service .category-first-footer {
        flex-direction: column-reverse;
        padding: .85rem;
    }

    body.page-product-service .category-first-secondary,
    body.page-product-service .category-first-primary,
    body.page-service-service .category-first-secondary,
    body.page-service-service .category-first-primary {
        width: 100%;
    }
}

/* ==== FAQ Modal (mirrors the campaigns page modal design) ==== */
body.page-faqs .modal{
    padding: 0 !important;
}

body.page-faqs .modal.show .modal-dialog{
    display: flex;
    flex-direction: column;
}

body.page-faqs .modal-dialog{
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
    height: auto;
}

body.page-faqs .modal-dialog.modal-lg{
    max-width: 800px;
}

body.page-faqs .modal-content{
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    height: auto;
    overflow: hidden;
}

body.page-faqs .modal-content .form-section{
    box-shadow: 0px 1px 20px 10px rgb(0 0 0 / .08);
}

body.page-faqs .modal-header{
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: none;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

body.page-faqs .modal-header::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-emerald), var(--accent-mint), var(--accent-emerald));
}

body.page-faqs .modal-header .modal-title{
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.page-faqs .modal-header .modal-title i{
    color: #fff !important;
}

body.page-faqs .modal-subtitle{
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0.25rem 0 0 0;
    font-weight: 400;
    line-height: 1.4;
}

body.page-faqs .modal-header .btn-close{
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: var(--transition-fast);
}

body.page-faqs .modal-header .btn-close:hover{
    opacity: 1;
    transform: scale(1.1);
}

body.page-faqs .modal-body{
    padding: 1rem;
    overflow-y: auto !important;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 180px);
    background: var(--surface-gray-50);
}

body.page-faqs .modal-body::-webkit-scrollbar{
    width: 8px;
}

body.page-faqs .modal-body::-webkit-scrollbar-track{
    background: var(--surface-gray-200);
    border-radius: 4px;
}

body.page-faqs .modal-body::-webkit-scrollbar-thumb{
    background: var(--primary-green);
    border-radius: 4px;
}

body.page-faqs .modal-body::-webkit-scrollbar-thumb:hover{
    background: var(--primary-green-dark);
}

body.page-faqs .modal-footer{
    padding: 1rem 1.25rem;
    background: var(--surface-white);
    border-top: 1px solid var(--border-200);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    z-index: 10;
}

body.page-faqs .modal-footer .btn{
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    width: auto;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 5.75rem;
}

body.page-faqs #faq-modal-form{
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 2rem - 70px);
    overflow: hidden;
}

body.page-faqs #faq-modal-form .modal-body{
    flex: 1;
    overflow-y: auto;
}

body.page-faqs .modal .form-label{
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-700);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

body.page-faqs .modal .form-label .required{
    color: var(--error);
}

body.page-faqs .modal .form-control{
    border: 1px solid var(--border-200);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.625rem;
    font-size: 0.8125rem;
    transition: var(--transition-fast);
    background: var(--surface-white);
}

body.page-faqs .modal .form-control:hover{
    border-color: var(--primary-green-light);
}

body.page-faqs .modal .form-control:focus{
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-green-light);
    outline: none;
}

body.page-faqs .modal .form-control::placeholder{
    color: var(--text-500);
    font-size: 0.75rem;
}

body.page-faqs .modal textarea.form-control{
    min-height: 60px;
    resize: vertical;
}

body.page-faqs .form-section{
    background: var(--surface-white);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-xs);
}

body.page-faqs .form-section:last-child{
    margin-bottom: 0;
}

body.page-faqs .form-section-title{
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-200);
}

body.page-faqs .form-section-title i{
    font-size: 0.875rem;
}

body.page-faqs .form-section-title .required{
    color: var(--error);
    font-weight: 400;
}

body.page-faqs .toggle-group{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--surface-gray-50);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-md);
}

body.page-faqs .toggle-item{
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--surface-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-200);
    transition: var(--transition-fast);
}

body.page-faqs .toggle-item:hover{
    border-color: var(--primary-green-light);
}

body.page-faqs .toggle-item .form-check{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.page-faqs .toggle-item .form-check-input{
    margin: 0;
    width: 2rem;
    height: 1rem;
}

body.page-faqs .toggle-item .form-check-label{
    font-size: 0.75rem;
    line-height: 1.2;
}

body.page-faqs .toggle-item .form-check-label strong{
    display: block;
    font-size: 0.75rem;
}

body.page-faqs .toggle-item .form-check-label small{
    font-size: 0.625rem;
    color: var(--text-500);
}

@media (max-width: 768px) {
    body.page-faqs .modal-body{
        padding: 1rem;
    }
    body.page-faqs .modal-footer{
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }
    body.page-faqs .toggle-group{
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    body.page-faqs .modal-dialog{
        margin: 0.25rem;
        max-height: calc(100vh - 0.5rem);
    }
    body.page-faqs .modal-header{
        padding: 0.875rem 1rem;
    }
    body.page-faqs .modal-header .modal-title{
        font-size: 1rem;
    }
    body.page-faqs .modal-subtitle{
        font-size: 0.6875rem;
    }
    body.page-faqs .modal-body{
        padding: 0.875rem;
    }
    body.page-faqs .modal-footer{
        padding: 0.625rem 0.875rem;
        gap: 0.5rem;
    }
    body.page-faqs .modal-footer .btn{
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Forgot password now uses the same auth shell, validation, toast, and message
   treatment as login. Keep this late so it wins over the older reset page skin. */
body.page-forgot-password{
    --primary-dark: #1a4b3a;
    --primary-main: #1a4b3a;
    --primary-light: #2d7a5f;
    --primary-bg: #f0f7f4;
    --accent: #1e6b4f;
    --surface: #ffffff;
    --surface-elevated: #fafbfa;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-light: #e5e7eb;
    --border-focus: #1a4b3a;
    --success: #10b981;
    --success-dark: #059669;
    --error: #ef4444;
    --error-dark: #dc2626;
    --info: #1a4b3a;
    --warning: #f59e0b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        radial-gradient(60rem 60rem at -10% -20%, rgba(26, 75, 58, .08), transparent 60%),
        radial-gradient(60rem 60rem at 110% 120%, rgba(30, 107, 79, .08), transparent 60%),
        linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 45%, var(--primary-bg) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 2vw, 2rem);
    overflow-x: hidden;
}

body.page-forgot-password *,
body.page-forgot-password *::before,
body.page-forgot-password *::after{
    box-sizing: border-box;
}

body.page-forgot-password .toast-container{
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    max-width: 380px;
}

body.page-forgot-password .toast-notification{
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: 1rem 1.2rem;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 320px;
    border-left: 4px solid;
}

body.page-forgot-password .toast-notification.success{ border-left-color: var(--success); }
body.page-forgot-password .toast-notification.error{ border-left-color: var(--error); }
body.page-forgot-password .toast-notification.info{ border-left-color: var(--info); }
body.page-forgot-password .toast-notification.warning{ border-left-color: var(--warning); }

body.page-forgot-password .toast-icon{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

body.page-forgot-password .toast-notification.success .toast-icon{
    background: rgba(16, 185, 129, .1);
    color: var(--success-dark);
}

body.page-forgot-password .toast-notification.error .toast-icon{
    background: rgba(239, 68, 68, .1);
    color: var(--error-dark);
}

body.page-forgot-password .toast-notification.info .toast-icon{
    background: rgba(26, 75, 58, .1);
    color: var(--info);
}

body.page-forgot-password .toast-notification.warning .toast-icon{
    background: rgba(245, 158, 11, .1);
    color: var(--warning);
}

body.page-forgot-password .toast-content{
    flex: 1;
    padding-top: 2px;
}

body.page-forgot-password .toast-title{
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

body.page-forgot-password .toast-message{
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

body.page-forgot-password .toast-close{
    background: rgba(0, 0, 0, .04);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem;
    font-size: 0.95rem;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
}

body.page-forgot-password .toast-close:hover{
    background: rgba(0, 0, 0, .08);
    color: var(--text-primary);
}

body.page-forgot-password .main-container{
    display: grid;
    grid-template-columns: 30fr 70fr;
    width: 100%;
    max-width: 1180px;
    height: 640px;
    min-height: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, .8);
    overflow: hidden;
    animation: none;
}

body.page-forgot-password .hero-section{
    background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary-main) 50%, var(--accent) 100%);
    color: #fff;
    padding: 2.8rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

body.page-forgot-password .hero-section::before,
body.page-forgot-password .hero-section::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

body.page-forgot-password .hero-section::before{
    width: 160px;
    height: 160px;
    top: -40px;
    right: -40px;
}

body.page-forgot-password .hero-section::after{
    width: 120px;
    height: 120px;
    bottom: -24px;
    left: -24px;
    animation-delay: 3s;
}

body.page-forgot-password .hero-section > *{
    position: relative;
    z-index: 1;
}

body.page-forgot-password .hero-title{
    font-family: "Poppins", sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
    line-height: 1.1;
    letter-spacing: 0;
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    animation: none;
}

body.page-forgot-password .hero-subtitle{
    line-height: 1.6;
    margin-bottom: 1.3rem;
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.95;
    animation: none;
}

body.page-forgot-password .hero-points{
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

body.page-forgot-password .hero-points li{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.65rem 0;
    padding: 0.35rem 0;
    color: #fff;
    font-size: 0.96rem;
    font-weight: 500;
    opacity: 1;
    transform: none;
    animation: none;
}

body.page-forgot-password .hero-points li i{
    font-size: 1.05rem;
    color: #fff;
    animation: none;
    filter: none;
}

body.page-forgot-password .form-section{
    background: var(--surface);
    padding: 2.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.page-forgot-password .form-header{
    text-align: center;
    margin-bottom: 2rem;
    animation: none;
    opacity: 1;
    transform: none;
}

body.page-forgot-password .form-title{
    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.45rem;
    letter-spacing: 0;
}

body.page-forgot-password .form-subtitle{
    color: var(--text-secondary);
    font-size: 0.94rem;
    font-weight: 500;
    margin-bottom: 0;
}

body.page-forgot-password .forgot-form{
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    display: block;
    animation: none;
    opacity: 1;
    transform: none;
}

body.page-forgot-password .form-group{
    margin-bottom: 1.3rem;
    position: relative;
    opacity: 1;
    transform: none;
    animation: none;
}

body.page-forgot-password .form-label{
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.55rem;
    font-size: 0.89rem;
    letter-spacing: 0;
}

body.page-forgot-password .form-label i{
    color: var(--primary-main);
    margin-right: 0.5rem;
    font-size: 0.96rem;
}

body.page-forgot-password .form-control{
    width: 100%;
    padding: 0.92rem 1.05rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.89rem;
    transition: all 0.2s ease;
    background: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-weight: 500;
    transform: none;
    box-shadow: none;
}

body.page-forgot-password .form-control:hover{
    border-color: #cbd5e1;
    transform: none;
    box-shadow: none;
}

body.page-forgot-password .form-control:focus{
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px rgba(26, 75, 58, .1);
    background: var(--surface-elevated);
    transform: none;
    animation: none;
}

body.page-forgot-password .form-control::placeholder{
    color: var(--text-muted);
    font-weight: 400;
}

body.page-forgot-password .form-control.is-invalid{
    border-color: var(--error);
    background: rgba(239, 68, 68, .03);
    box-shadow: none;
    animation: none;
}

body.page-forgot-password .form-control.is-valid{
    border-color: var(--success);
    background: rgba(16, 185, 129, .03);
    box-shadow: none;
}

body.page-forgot-password .invalid-feedback{
    display: none;
    color: var(--error-dark);
    font-size: 0.8rem;
    margin-top: 0.48rem;
    padding: 0.48rem 0.68rem;
    background: rgba(239, 68, 68, .08);
    border-radius: 8px;
    border-left: 3px solid var(--error);
    opacity: 1;
    transform: none;
    transition: none;
    font-weight: 500;
}

body.page-forgot-password .form-control.is-invalid + .invalid-feedback{
    display: block;
}

body.page-forgot-password .btn-reset{
    width: 75%;
    min-height: 0;
    margin: 0 auto;
    padding: 1.02rem 1.8rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
    color: #fff;
    box-shadow: 0 10px 25px rgba(26, 75, 58, .3);
    transition: all 0.2s ease;
    letter-spacing: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    opacity: 1;
    transform: none;
    animation: none;
}

body.page-forgot-password .btn-reset::before{
    content: none;
}

body.page-forgot-password .btn-reset:hover:not(:disabled){
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(26, 75, 58, .4);
    filter: none;
}

body.page-forgot-password .btn-reset:active{
    transform: translateY(0);
}

body.page-forgot-password .btn-reset:disabled{
    opacity: 0.7;
    cursor: not-allowed;
}

body.page-forgot-password .btn-reset.loading{
    color: transparent;
    pointer-events: auto;
}

body.page-forgot-password .btn-reset.loading i,
body.page-forgot-password .btn-reset.loading #buttonText{
    opacity: 0;
}

body.page-forgot-password .btn-reset.loading::after{
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    animation: login--spin 0.8s linear infinite;
}

body.page-forgot-password .btn-reset.success{
    background: linear-gradient(135deg, var(--primary-main) 0%, var(--accent) 100%);
    animation: none;
}

body.page-forgot-password .btn-reset.success::after{
    content: none;
}

body.page-forgot-password .btn-reset.success i,
body.page-forgot-password .btn-reset.success #buttonText{
    opacity: 1;
}

body.page-forgot-password .message-box{
    min-height: 20px;
    margin-top: 1.2rem;
}

body.page-forgot-password .alert{
    border-radius: var(--radius-md);
    padding: 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    border-left: 4px solid;
    position: relative;
    overflow: hidden;
    transform: none;
    opacity: 1;
    animation: none;
}

body.page-forgot-password .alert::before{
    content: none;
}

body.page-forgot-password .alert-success{
    background: rgba(16, 185, 129, .1);
    color: var(--success-dark);
    border-left-color: var(--success);
}

body.page-forgot-password .alert-danger{
    background: rgba(239, 68, 68, .1);
    color: var(--error-dark);
    border-left-color: var(--error);
}

body.page-forgot-password .alert-warning{
    background: rgba(245, 158, 11, .1);
    color: var(--warning);
    border-left-color: var(--warning);
}

body.page-forgot-password .alert-info{
    background: rgba(26, 75, 58, .1);
    color: var(--info);
    border-left-color: var(--info);
}

body.page-forgot-password .alert i{
    margin-right: 0.5rem;
}

body.page-forgot-password .form-links{
    text-align: center;
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 2px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.75;
    opacity: 1;
    animation: none;
}

body.page-forgot-password .form-links a{
    color: var(--primary-main);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.page-forgot-password .form-links a:hover{
    color: var(--accent);
    text-decoration: underline;
}

@media (min-width: 993px) {
    body.page-forgot-password .main-container{
        max-width: 1060px;
        max-height: calc(100vh - 2.5rem);
        height: min(576px, calc(100vh - 2.5rem));
    }

    body.page-forgot-password :is(.hero-section, .form-section){
        padding-block: 2.25rem;
    }
}

@media (max-width: 1024px) {
    body.page-forgot-password .main-container{
        grid-template-columns: 1fr;
        height: auto;
    }

    body.page-forgot-password .hero-section{
        text-align: center;
    }

    body.page-forgot-password .hero-points{
        display: inline-block;
        text-align: left;
    }
}

@media (max-width: 768px) {
    body.page-forgot-password{
        display: block;
        padding: 0 !important;
        overflow-x: hidden;
    }

    body.page-forgot-password .main-container{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh;
        border-radius: 0;
    }

    body.page-forgot-password :is(.hero-section, .form-section, .forgot-form, .form-group){
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.page-forgot-password .hero-section{
        padding: 1.65rem 1.25rem;
    }

    body.page-forgot-password .hero-title{
        font-size: 2.15rem;
        margin-bottom: .55rem;
    }

    body.page-forgot-password .hero-subtitle{
        margin-bottom: .7rem;
        font-size: .92rem;
    }

    body.page-forgot-password .hero-points{
        margin-top: .45rem;
    }

    body.page-forgot-password .hero-points li{
        gap: .6rem;
        margin: .3rem 0;
        padding: .15rem 0;
        font-size: .88rem;
    }

    body.page-forgot-password .form-section{
        padding: 2rem 1.25rem !important;
    }

    body.page-forgot-password .btn-reset{
        width: 100%;
    }
}

@media (max-width: 480px) {
    body.page-forgot-password .toast-notification{
        min-width: auto;
    }
}

html[data-theme="dark"] body.page-forgot-password{
    background:
        radial-gradient(circle at top left, rgba(8, 73, 40, 0.16), transparent 28%),
        radial-gradient(circle at top right, rgba(8, 73, 40, 0.08), transparent 24%),
        linear-gradient(180deg, #07100c 0%, #090f0c 100%);
    color: #eef5ef;
}

html[data-theme="dark"] body.page-forgot-password .main-container{
    background: linear-gradient(180deg, rgba(12, 18, 15, .98) 0%, rgba(10, 16, 13, .98) 100%);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] body.page-forgot-password .hero-section{
    background: linear-gradient(145deg, #06291a 0%, #084928 50%, #0c6237 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

html[data-theme="dark"] body.page-forgot-password .form-section{
    background: linear-gradient(180deg, rgba(15, 23, 19, .98) 0%, rgba(12, 18, 15, .98) 100%);
}

html[data-theme="dark"] body.page-forgot-password .hero-title,
html[data-theme="dark"] body.page-forgot-password .form-title{
    color: #eff9f2;
}

html[data-theme="dark"] body.page-forgot-password .hero-subtitle,
html[data-theme="dark"] body.page-forgot-password .form-subtitle,
html[data-theme="dark"] body.page-forgot-password .form-links{
    color: #9eb0a6;
}

html[data-theme="dark"] body.page-forgot-password .hero-points li{
    color: #ebf7ef;
}

html[data-theme="dark"] body.page-forgot-password .form-label,
html[data-theme="dark"] body.page-forgot-password .form-label i{
    color: #d9fbe5;
}

html[data-theme="dark"] body.page-forgot-password .form-control{
    background: rgba(255, 255, 255, .04) !important;
    color: #eef5ef !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

html[data-theme="dark"] body.page-forgot-password .form-control:hover{
    border-color: rgba(255, 255, 255, .14) !important;
}

html[data-theme="dark"] body.page-forgot-password .form-control:focus{
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(8, 73, 40, .58) !important;
    box-shadow: 0 0 0 4px rgba(8, 73, 40, .16) !important;
}

html[data-theme="dark"] body.page-forgot-password .form-control::placeholder{
    color: #71837a !important;
}

html[data-theme="dark"] body.page-forgot-password .btn-reset{
    background: linear-gradient(135deg, #0c6237 0%, #084928 100%);
    box-shadow: 0 14px 28px rgba(8, 73, 40, .24);
}

html[data-theme="dark"] body.page-forgot-password .btn-reset:hover:not(:disabled){
    box-shadow: 0 18px 34px rgba(8, 73, 40, .32);
}

html[data-theme="dark"] body.page-forgot-password .form-links{
    border-top-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] body.page-forgot-password .form-links a{
    color: #d9fbe5;
}

html[data-theme="dark"] body.page-forgot-password .form-links a:hover{
    color: #eff9f2;
}

html[data-theme="dark"] body.page-forgot-password .message-box .alert{
    background: rgba(12, 18, 15, .96);
    color: #eef5ef;
    border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] body.page-forgot-password .alert-success{
    background: rgba(16, 185, 129, .12) !important;
    color: #c8f7dd !important;
    border-left-color: rgba(16, 185, 129, .7) !important;
}

html[data-theme="dark"] body.page-forgot-password .alert-danger{
    background: rgba(239, 68, 68, .12) !important;
    color: #fecaca !important;
    border-left-color: rgba(239, 68, 68, .7) !important;
}

html[data-theme="dark"] body.page-forgot-password .alert-warning{
    background: rgba(245, 158, 11, .12) !important;
    color: #fde68a !important;
    border-left-color: rgba(245, 158, 11, .7) !important;
}

html[data-theme="dark"] body.page-forgot-password .alert-info{
    background: rgba(8, 73, 40, .14) !important;
    color: #d9fbe5 !important;
    border-left-color: rgba(8, 73, 40, .7) !important;
}

html[data-theme="dark"] body.page-forgot-password .toast-notification{
    background: rgba(15, 23, 19, .98);
    border-left-color: rgb(8 73 40);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] body.page-forgot-password .toast-title{
    color: #eff9f2;
}

html[data-theme="dark"] body.page-forgot-password .toast-close{
    background: rgba(255, 255, 255, .04);
    color: #9eb0a6;
}

html[data-theme="dark"] body.page-forgot-password .toast-close:hover{
    background: rgba(255, 255, 255, .08);
    color: #eff9f2;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password{
    --surface: rgba(15, 23, 19, .98);
    --surface-elevated: rgba(20, 31, 26, .98);
    --text-primary: #f4fff7;
    --text-secondary: #c9d8cf;
    --text-muted: #9fb2a7;
    --border-light: rgba(255, 255, 255, .16);
    --border-focus: #35d27d;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-section{
    color: #f4fff7;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password :is(
    .form-title,
    .form-label,
    .form-label i
){
    color: #f4fff7 !important;
    opacity: 1 !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-subtitle{
    color: #d9e7de !important;
    opacity: 1 !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-label{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .24);
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-label i{
    color: #86efac !important;
    margin-right: 0;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-control{
    background: rgba(255, 255, 255, .075) !important;
    color: #f4fff7 !important;
    border-color: rgba(255, 255, 255, .24) !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-control:hover{
    border-color: rgba(255, 255, 255, .34) !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-control:focus{
    background: rgba(255, 255, 255, .095) !important;
    border-color: rgba(74, 222, 128, .72) !important;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .16) !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-control::placeholder{
    color: #d7e5dc !important;
    opacity: 1 !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-links,
:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-links div{
    color: #d9e7de !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-links a{
    color: #f4fff7 !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-links a:hover,
:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .form-links a:focus-visible{
    color: #86efac !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .invalid-feedback{
    background: rgba(248, 113, 113, .14) !important;
    color: #fecaca !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .toast-title{
    color: #f4fff7 !important;
}

:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.page-forgot-password .toast-message{
    color: #d9e7de !important;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}