:root {
    color-scheme: light;
    --brand: #dc2626;
    --brand-dark: #b91c1c;
    --brand-soft: transparent;
    --canvas: #fff;
    --surface: #fff;
    --ink: #0f172a;
    --muted: #64748b;
    --line: transparent;
    --success: #16a34a;
    --warning: #d97706;
    --sidebar-width: 280px;
    --sidebar-width-collapse: 80px;
    --header-height: 70px;
    --app-page-gutter: 24px;
    --app-header-control-size: 48px;
    --app-header-icon-size: 40px;
    --app-header-control-gap: 0px;
    --app-header-search-actions-gap: 24px;
    --app-header-icon-color: var(--brand);
    --app-header-icon-hover-color: var(--brand-dark);
    --app-header-icon-hover-background: var(--brand-soft);
    --app-header-mark-size: 40px;
    --app-header-mark-icon-width: 23px;
    --app-header-mark-icon-height: 29px;
    --app-header-collapsed-mark-start: calc((var(--sidebar-width-collapse) - var(--app-header-mark-size)) / 2 - 1px);
    --app-header-mobile-mark-offset: calc(var(--app-header-collapsed-mark-start) - 16px);
    --app-header-mobile-toggle-gap: calc(var(--sidebar-width-collapse) - var(--app-header-collapsed-mark-start) - var(--app-header-mark-size));
    --app-header-actions-edge-offset: 0px;
    --radius: 10px;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body.app-page, body.selfcare-page, body.installer-page, body.payment-result-page {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .85rem;
    line-height: 1.5;
}
body.app-page { min-height: 100vh; display: block !important; }

.app-sidebar {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    padding: 20px 10px 14px;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid var(--line);
    transition: width .3s ease;
    scrollbar-width: none;
}
.app-sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.app-brand-row { display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; gap: 5px; padding: 0 4px 12px; }
.app-brand { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 0 8px; color: var(--ink); text-decoration: none; }
.brand-logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 42px; object-fit: contain; object-position: left center; }
body.sidebar-collapsed .brand-logo { width: 38px; height: 38px; object-fit: cover; object-position: left center; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: var(--brand); color: #fff; font-size: 18px; font-weight: 800; }
.app-brand strong, .app-brand small, .workspace-switcher strong, .workspace-switcher small, .sidebar-account strong, .sidebar-account small { display: block; }
.app-brand strong { font-size: 14px; line-height: 1.25; }
.app-brand small, .workspace-switcher small, .sidebar-account small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.brand-copy, .workspace-copy { min-width: 0; }
.sidebar-collapse { display: grid; width: 30px; min-height: 30px !important; flex: 0 0 30px; place-items: center; padding: 0 !important; border-color: var(--line) !important; background: #fff !important; color: var(--muted) !important; font-size: 21px !important; }
.sidebar-collapse .sidebar-icon-svg { transition: transform .18s ease; }
body.sidebar-collapsed .sidebar-collapse .sidebar-icon-svg { transform: rotate(180deg); }
.sidebar-collapse:hover { border-color: var(--line) !important; background: #f8fafc !important; color: var(--ink) !important; }
.workspace-switcher { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.workspace-avatar, .account-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; font-weight: 750; }
.workspace-switcher strong, .sidebar-account strong { max-width: 145px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher small { font-size: 10px; }
.workspace-chevron { margin-left: auto; color: var(--muted); }
.nav-search-wrap { position: relative; display: block; margin: 14px 0 4px; }
.nav-search { width: 100%; min-height: 36px !important; padding: 7px 34px 7px 10px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: #f8fafc !important; font-size: 12px !important; }
.nav-search-shortcut { position: absolute; top: 50%; right: 9px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: #94a3b8; font-size: 11px; transform: translateY(-50%); }
.app-navigation { padding-top: 12px; }
.nav-section { padding-top: 6px; }
.nav-section-heading { margin: 16px 10px 7px; color: #64748b; font-size: 10px; font-weight: 750; letter-spacing: .08em; line-height: 1.35; }
.nav-group { margin-top: 10px; }
.nav-group summary { display: flex; min-height: 34px; align-items: center; gap: 8px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; background: #f1f3f5; box-shadow: 0 2px 5px rgb(15 23 42 / 10%); color: #1e293b; cursor: pointer; list-style: none; user-select: none; line-height: 1.25; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover { background: #e9ecef; box-shadow: 0 3px 7px rgb(15 23 42 / 14%); color: var(--ink); }
.nav-group[open] > summary { background: var(--brand-soft); box-shadow: 0 2px 6px rgb(15 23 42 / 12%); color: var(--brand-dark); }
.nav-group[open] > summary .nav-group-icon { color: var(--brand); }
@supports selector(details::details-content) {
    .nav-group {
        interpolate-size: allow-keywords;
    }
    .nav-group::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .3s ease, content-visibility .3s allow-discrete;
    }
    .nav-group[open]::details-content {
        block-size: auto;
    }
}
.nav-group-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; color: #475569; }
.sidebar-icon-svg { display: block; width: 20px; height: 20px; stroke-width: 2; }
.nav-group-icon .sidebar-icon-svg { width: 20px; height: 20px; }
.nav-group-title { min-width: 0; flex: 1; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.nav-group-chevron { position: relative; width: 14px; height: 14px; margin-left: auto; color: #64748b; }
.nav-group-chevron::before, .nav-group-chevron::after { position: absolute; top: 6px; left: 3px; width: 9px; height: 1.5px; border-radius: 2px; background: currentColor; content: ""; }
.nav-group-chevron::after { transform: rotate(90deg); transition: transform .15s ease; }
.nav-group[open] .nav-group-chevron::after { transform: rotate(0); }
.nav-group[open] .nav-group-chevron { color: var(--brand-dark); }
.nav-submenu { position: relative; margin: 3px 0 5px 11px; padding: 2px 0 2px 12px; border-left: 1px solid #e2e8f0; }
.nav-link { position: relative; display: flex; min-height: 42px; align-items: center; gap: 11px; margin: 2px 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 999px; color: #1e293b; font-size: 14px; font-weight: 550; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.nav-child { min-height: 40px; margin-left: 0; padding: 6px 9px; }
.nav-submenu .nav-link.nav-child { isolation: isolate; margin: 0; border-radius: 999px; background: transparent; box-shadow: none; }
.nav-submenu .nav-link.nav-child::after { position: absolute; z-index: -1; inset: 3px 0; border-radius: inherit; background: #fafbfc; box-shadow: 0 1px 3px rgb(15 23 42 / 7%); content: ""; }
.nav-submenu .nav-link.nav-child:hover { background: transparent; box-shadow: none; }
.nav-submenu .nav-link.nav-child:hover::after { background: #f5f6f7; box-shadow: 0 2px 5px rgb(15 23 42 / 10%); }
.nav-link:hover { background: #f8fafc; color: var(--ink); }
.nav-link-planned { color: #64748b; }
.nav-planned-mark { margin-left: auto; padding: 1px 6px; border: 1px dashed #cbd5e1; border-radius: 999px; color: #94a3b8; font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.preview-chip { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 10px; font-weight: 650; }
.nav-link.is-active { border-color: #fecaca; background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; }
.nav-link.is-active::before { position: absolute; inset: 7px auto 7px -13px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); content: ""; }
.nav-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; color: #475569; line-height: 1; }
.nav-link.is-active .nav-icon { color: var(--brand); }
.nav-link-planned .nav-icon { color: #64748b; }
.nav-empty { margin: 10px; color: var(--muted); font-size: 11px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.sidebar-account { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 14px 7px 2px; border-top: 1px solid var(--line); }
.account-avatar { border-radius: 50%; background: #f1f5f9; color: #475569; }
.account-copy { min-width: 0; }
.account-copy strong { max-width: 100px; }
.sidebar-account form { margin-left: auto; }
.account-logout { min-height: 32px !important; margin: 0 0 0 auto !important; padding: 0 8px !important; border: 1px solid var(--line) !important; background: #fff !important; color: #475569 !important; font-size: 11px !important; }
.account-logout:hover { border-color: #fecaca !important; background: var(--brand-soft) !important; color: var(--brand-dark) !important; }
.sidebar-scrim, .mobile-topbar { display: none; }
body.sidebar-collapsed { --sidebar-width: var(--sidebar-width-collapse); }
body.sidebar-collapsed .app-sidebar { padding-right: 9px; padding-left: 9px; }
body.sidebar-collapsed .app-brand-row { justify-content: center; }
body.sidebar-collapsed .app-brand { padding: 0; }
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .workspace-copy,
body.sidebar-collapsed .sidebar-account .account-copy,
body.sidebar-collapsed .sidebar-account .account-logout span,
body.sidebar-collapsed .nav-search-wrap,
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .nav-group-chevron,
body.sidebar-collapsed .nav-submenu,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-planned-mark,
body.sidebar-collapsed .nav-section-heading { display: none; }
body.sidebar-collapsed .sidebar-collapse { position: absolute; top: 25px; right: 4px; width: 23px; min-height: 24px !important; }
body.sidebar-collapsed .workspace-switcher { justify-content: center; padding: 8px 3px; }
body.sidebar-collapsed .app-navigation { padding-top: 16px; }
body.sidebar-collapsed .nav-link { justify-content: center; gap: 0; padding-right: 5px; padding-left: 5px; }
body.sidebar-collapsed .nav-child { margin-left: 0; }
body.sidebar-collapsed .nav-link.is-active::before { left: -9px; }
body.sidebar-collapsed .nav-group summary { justify-content: center; padding-right: 4px; padding-left: 4px; }
body.sidebar-collapsed .nav-group[open] .nav-submenu { display: block; margin: 0; padding: 0; border: 0; }
body.sidebar-collapsed .nav-group[open] .nav-link { display: flex; }
body.sidebar-collapsed .sidebar-account { flex-wrap: wrap; justify-content: center; padding-right: 0; padding-left: 0; }
body.sidebar-collapsed .sidebar-account form { margin: 0; }
body.sidebar-collapsed .sidebar-account .account-logout { width: 38px; padding: 0 !important; font-size: 0 !important; }
body.sidebar-collapsed .sidebar-account .account-logout::after { content: "↪"; font-size: 16px; }
[data-nav-item][hidden], [data-nav-group][hidden] { display: none !important; }

.app-page.has-sidebar > header {
    position: relative;
    min-height: var(--header-height);
    margin: 0 0 0 var(--sidebar-width) !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid var(--line) !important;
    background: #fff !important;
    color: var(--muted);
    font-size: 12px;
}
.app-page > header a { color: var(--ink) !important; font-size: 12px; font-weight: 650 !important; }
.app-page > main {
    width: auto !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 28px 34px 48px !important;
}
.app-page.has-sidebar > main {
    max-width: none !important;
    margin: 0 0 0 var(--sidebar-width) !important;
    padding: 26px 24px !important;
}
.app-footer { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 0 var(--sidebar-width); padding: 15px 24px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.app-page:not(.has-sidebar) > main {
    width: min(100% - 48px, 440px) !important;
    max-width: 440px !important;
    margin: 10vh auto !important;
    padding: 30px !important;
}
.app-page h1 { margin: 0 0 16px !important; color: var(--ink) !important; font-size: 25px !important; font-weight: 720 !important; letter-spacing: -.035em; line-height: 1.25; }
.app-page h2 { margin: 0 0 12px !important; color: #1e293b; font-size: 16px !important; font-weight: 680 !important; letter-spacing: -.015em; }
.app-page h3 { color: #1e293b; font-size: 14px; }
.app-page p { color: var(--muted); }
.app-page main section {
    margin: 12px 0 !important;
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-top: 1px solid var(--line) !important;
    border-radius: var(--radius);
    background: var(--surface) !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 3%);
}
.app-page main form { gap: 12px; }
.app-page main label, .selfcare-page main label, .installer-page main label { color: #334155; font-size: 12px !important; font-weight: 620 !important; }
.app-page main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.app-page main select, .app-page main textarea,
.selfcare-page main input:not([type="checkbox"]):not([type="hidden"]),
.selfcare-page main select, .selfcare-page main textarea,
.installer-page main input:not([type="checkbox"]):not([type="hidden"]),
.installer-page main select, .installer-page main textarea {
    min-height: 38px !important;
    max-width: 100%;
    padding: 7px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--ink) !important;
    font: inherit;
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.app-page main textarea, .selfcare-page main textarea, .installer-page main textarea {
    min-height: 84px !important;
    border-radius: 12px !important;
}
.app-page main input:focus, .app-page main select:focus, .app-page main textarea:focus,
.selfcare-page main input:focus, .selfcare-page main select:focus, .selfcare-page main textarea:focus,
.installer-page main input:focus, .installer-page main select:focus, .installer-page main textarea:focus {
    border-color: var(--brand) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgb(220 38 38 / 12%);
}
.app-page main button, .app-page > dialog button,
.selfcare-page main button, .installer-page main button {
    min-height: 36px !important;
    padding: 0 15px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
    background: #bfdbfe !important;
    color: #1e40af !important;
    font: inherit;
    font-size: 12px !important;
    font-weight: 680 !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.app-page main button:hover, .app-page > dialog button:hover { border-color: #93c5fd !important; background: #93c5fd !important; color: #1e3a8a !important; }
.app-page main button:disabled, .app-page > dialog button:disabled,
.selfcare-page main button:disabled, .installer-page main button:disabled { cursor: not-allowed; opacity: .6; }
.app-page main button:focus-visible, .app-page > dialog button:focus-visible,
.selfcare-page main button:focus-visible, .installer-page main button:focus-visible, .nav-link:focus-visible, a:focus-visible {
    outline: 3px solid rgb(220 38 38 / 28%);
    outline-offset: 2px;
}
.app-page a:not(.app-brand):not(.nav-link) { color: var(--brand-dark); }
.app-page table { width: 100%; border-collapse: separate !important; border-spacing: 0; text-align: left; font-size: 12px; }
.app-page th, .app-page td { padding: 8px 10px !important; border-bottom: 1px solid #edf1f5 !important; vertical-align: middle !important; line-height: 1.4; }
.app-page th { background: #f8fafc; color: #64748b !important; font-size: 10px !important; font-weight: 730; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.app-page tbody tr:hover { background: #fffafa; }
.app-page tbody tr:last-child td { border-bottom: 0 !important; }
.app-page main .table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.app-page main .table-wrap table { min-width: 680px; }
.app-page .notice, .app-page .error, .selfcare-page .error, .installer-page .error, .app-page .success, .selfcare-page .success {
    padding: 12px 14px !important;
    border: 1px solid #fecaca !important;
    border-left: 3px solid var(--brand) !important;
    border-radius: 7px;
    background: var(--brand-soft) !important;
    color: #991b1b !important;
}
.app-page .success, .selfcare-page .success { border-color: #bbf7d0 !important; border-left-color: var(--success) !important; background: #f0fdf4 !important; color: #166534 !important; }
.app-page .metrics, .selfcare-page .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; border: 0 !important; background: transparent !important; }
.app-page .metrics > div, .selfcare-page .summary > div { min-height: 88px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff !important; }
.app-page .metrics span, .selfcare-page .summary dt { color: var(--muted); font-size: 11px; }
.app-page .metrics strong, .selfcare-page .summary dd { display: block; margin: 7px 0 0; color: var(--ink); font-size: 20px; font-weight: 720; }
.app-page .filters, .app-page form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; gap: 14px; }
.app-page form.inline { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }
.app-page form.inline input, .app-page form.inline select { max-width: 240px; }
.app-page .limits { gap: 12px; }
.app-page .limits label { min-width: 170px; }
.app-page .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.app-page .page-heading h1 { margin-bottom: 4px !important; }
.app-page .eyebrow { margin: 0 0 5px; color: var(--brand-dark); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.app-page .page-description { margin: 0; font-size: 12px; }
.app-page section.dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none; }
.app-page .dashboard-metric { display: flex; min-width: 0; min-height: 126px; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 19px; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.app-page .dashboard-metric:hover { border-color: #cad3dd; box-shadow: 0 2px 8px rgb(15 23 42 / 6%); }
.app-page .dashboard-metric-link { display: block; min-width: 0; color: inherit !important; text-decoration: none; border-radius: 9px; }
.app-page .dashboard-metric-link:focus-visible { outline: 3px solid rgb(220 38 38 / 28%); outline-offset: 3px; }
.app-page .dashboard-metric-link:hover .dashboard-metric { border-color: #cad3dd; box-shadow: 0 2px 8px rgb(15 23 42 / 6%); }
.app-page .dashboard-metric-icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; background: #fef2f2; color: var(--brand); font-size: 20px; }
.app-page .dashboard-metric > span { color: var(--muted); font-size: 11px; font-weight: 600; display: block; margin-bottom: 8px; }
.app-page .dashboard-metric strong { margin: 9px 0 4px; color: var(--ink); font-size: clamp(18px, 2vw, 23px); font-weight: 730; letter-spacing: -.025em; overflow-wrap: anywhere; }
.app-page .dashboard-metric small { color: var(--muted); font-size: 10px; }
.app-page section.dashboard-panel { min-width: 0; padding: 20px !important; }
.app-page .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.app-page .section-heading h2 { margin: 0 0 3px !important; }
.app-page .section-heading p { margin: 0; font-size: 11px; }
.app-page .text-link { font-size: 11px; font-weight: 650; white-space: nowrap; }
.app-page .collection-chart { display: grid; min-height: 146px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 10px 5px 0; }
.app-page .trend-column { display: grid; min-width: 0; height: 126px; grid-template-rows: 18px minmax(0, 1fr) 18px; justify-items: center; color: var(--muted); font-size: 10px; }
.app-page .trend-amount { max-width: 100%; overflow: hidden; color: #475569; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.app-page .trend-bar { width: min(100%, 38px); height: var(--bar-height); align-self: end; border-radius: 5px 5px 2px 2px; background: var(--brand); }
.app-page .trend-label { align-self: end; }
.app-page .dashboard-lower { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
.app-page .dashboard-lower > section { min-width: 0; }
.app-page .quick-action-list { display: grid; gap: 7px; }
.app-page .quick-action-list a { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: #334155 !important; font-size: 11px; font-weight: 600; text-decoration: none; }
.app-page .quick-action-list a:hover { border-color: #fecaca; background: var(--brand-soft); color: var(--brand-dark) !important; }
.app-page .quick-action-list a span { color: var(--brand); font-size: 16px; }
.app-page .empty-copy { margin: 0; font-size: 12px; }
.app-page .status-badge { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 10px; font-weight: 650; white-space: nowrap; }
.app-page .status-succeeded { background: #f0fdf4; color: #166534; }
.app-page .status-failed { background: #fef2f2; color: #b91c1c; }
.app-page .status-pending, .app-page .status-review, .app-page .status-reconciliation_required { background: #fffbeb; color: #92400e; }
.app-page .login { border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; border-radius: 12px; box-shadow: 0 18px 45px rgb(15 23 42 / 8%); }
.app-page body, .selfcare-page body { background: var(--canvas); }

body.selfcare-page > header {
    min-height: 68px;
    padding: 14px max(22px, calc((100% - 1060px) / 2)) !important;
    border-bottom: 1px solid var(--line) !important;
    background: #fff !important;
    color: var(--ink);
}
.selfcare-page header strong { color: var(--brand-dark) !important; font-size: 15px; }
.selfcare-page > main { width: min(100% - 40px, 1060px); margin: 30px auto !important; padding: 0 !important; }
.selfcare-page h1 { color: var(--ink); font-size: 25px; letter-spacing: -.03em; }
.selfcare-page h2 { color: #1e293b; font-size: 16px; }
.selfcare-page section { margin: 16px 0 !important; padding: 21px !important; border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; border-radius: var(--radius); background: #fff !important; box-shadow: 0 1px 2px rgb(15 23 42 / 3%); }
.selfcare-page .login { width: min(100%, 440px); margin: 9vh auto !important; padding: 28px !important; border-top: 1px solid var(--line) !important; }
.selfcare-page form.checkout { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.selfcare-page table { width: 100%; border-collapse: collapse; }
.selfcare-page table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.selfcare-page th, .selfcare-page td { padding: 10px 9px; border-bottom: 1px solid var(--line); text-align: left; }
.selfcare-page th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.selfcare-page .traffic-chart { min-width: 0; margin: 16px 0; padding: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.selfcare-page .traffic-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.selfcare-page .traffic-chart-heading strong, .selfcare-page .traffic-chart-heading small { display: block; }
.selfcare-page .traffic-chart-heading strong { color: var(--ink); font-size: 13px; }
.selfcare-page .traffic-chart-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.selfcare-page .traffic-chart-current { color: var(--muted); font-size: 10px; white-space: nowrap; }
.selfcare-page .traffic-chart-plot { width: 100%; min-width: 0; }
.selfcare-page .traffic-chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.selfcare-page .traffic-grid-line { stroke: #e2e8f0; stroke-width: 1; }
.selfcare-page .traffic-axis-label { fill: #64748b; font-size: 10px; }
.selfcare-page .traffic-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.selfcare-page .traffic-line-download { stroke: #dc2626; }
.selfcare-page .traffic-line-upload { stroke: #2563eb; }
.selfcare-page .traffic-point { stroke: #fff; stroke-width: 1.5; }
.selfcare-page .traffic-point-download { fill: #dc2626; }
.selfcare-page .traffic-point-upload { fill: #2563eb; }
.selfcare-page .traffic-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 0 48px; color: #475569; font-size: 10px; }
.selfcare-page .traffic-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.selfcare-page .traffic-chart-legend i { width: 9px; height: 9px; border-radius: 50%; }
.selfcare-page .traffic-legend-download { background: #dc2626; }
.selfcare-page .traffic-legend-upload { background: #2563eb; }
.selfcare-page .service-connection-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: #f0fdf4; color: #166534; font-size: 10px; font-weight: 700; }
.selfcare-page .service-connection-state::before { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; content: ""; }
.selfcare-page .onu-status-online { color: #166534; font-weight: 700; }

body.installer-page { min-height: 100vh; padding: 32px 16px; }
.installer-page > main { width: min(100%, 760px); margin: 0 auto !important; padding: 30px !important; border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; border-radius: 12px; background: #fff !important; box-shadow: 0 16px 44px rgb(15 23 42 / 7%); }
.installer-page h1 { margin: 0 0 8px; color: var(--ink) !important; font-size: 25px; }
.installer-page p { color: var(--muted); }
.installer-page fieldset { border-top-color: var(--line) !important; }
.installer-page legend { color: #1e293b; }

body.payment-result-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.payment-result-page main { width: min(100%, 520px); padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.payment-result-page h1 { font-size: 24px; }

@media (max-width: 900px) {
    :root { --sidebar-width: 238px; }
    .app-page.has-sidebar > header { padding-right: 20px !important; padding-left: 20px !important; }
    .app-page > main { padding-right: 20px !important; padding-left: 20px !important; }
}
@media (max-width: 720px) {
    body.sidebar-open { overflow: hidden; }
    .app-sidebar { z-index: 60; width: min(84vw, 290px); transform: translateX(-105%); transition: transform .2s ease; box-shadow: none; }
    body.sidebar-collapsed { --sidebar-width: 258px; }
    .sidebar-collapse { display: none; }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-scrim { position: fixed; z-index: 50; inset: 0; display: block; visibility: hidden; border: 0 !important; border-radius: 0 !important; background: transparent !important; opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
    body.sidebar-open .sidebar-scrim { visibility: visible; opacity: 1; }
    .mobile-topbar { position: sticky; z-index: 30; top: 0; display: flex; height: 56px; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 96%); }
    .mobile-brand { color: var(--ink); font-size: 13px; font-weight: 700; }
    .icon-button { display: grid; width: 38px; min-height: 38px !important; place-items: center; padding: 0 !important; border-color: var(--line) !important; background: #fff !important; color: #334155 !important; font-size: 17px !important; }
    .app-page.has-sidebar > header { min-height: 52px; margin-left: 0 !important; padding: 13px 18px !important; }
    .app-page.has-sidebar > main, .app-page:not(.has-sidebar) > main { margin: 0 auto !important; padding: 22px 16px 34px !important; }
    .app-footer { margin: 0; padding: 14px 16px 20px; }
    .app-page h1 { font-size: 22px !important; }
    .app-page section, .selfcare-page section { padding: 16px !important; }
    .app-page .dashboard-lower { grid-template-columns: 1fr; }
    .app-page section.dashboard-metrics { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
    .app-page .dashboard-metric { min-height: 106px; padding: 14px; }
    .app-page section.dashboard-panel { padding: 16px !important; }
    .app-page .collection-chart { gap: 6px; }
    .selfcare-page > main { width: calc(100% - 32px); margin: 20px auto !important; }
    .selfcare-page > header { padding: 12px 16px !important; }
    .installer-page > main { padding: 22px 17px !important; }
    .app-page .table-wrap table { min-width: 720px; }
    .app-page .table-wrap table, .app-page .ops-table { min-width: 0; width: 100%; table-layout: fixed; }
}
@media (max-width: 720px) {
    :root { --app-page-gutter: 16px; }
}
@media (max-width: 560px) {
    :root { --app-page-gutter: 12px; }
}
@media (max-width: 440px) {
    .app-page form.grid, .app-page .filters { grid-template-columns: 1fr; }
    .app-page form.inline input, .app-page form.inline select { width: 100%; max-width: none; }
    .app-page .metrics, .selfcare-page .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .app-page .metrics > div, .selfcare-page .summary > div { min-height: 78px; padding: 12px; }
    .app-page .metrics strong, .selfcare-page .summary dd { font-size: 17px; }
    .selfcare-page form.checkout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Self-Care dashboard styling follows the legacy portal while retaining the current page gutters. */
body.selfcare-page {
    color: #1b1b1f;
    font-family: "Plus Jakarta Sans", "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.selfcare-page > .selfcare-header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px max(22px, calc((100% - 1060px) / 2)) !important;
    border-bottom: 1px solid var(--line) !important;
    background: #fff !important;
}
.selfcare-page .selfcare-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--ink) !important;
    text-decoration: none;
}
.selfcare-page .selfcare-brand > span:last-child { display: grid; gap: 2px; }
.selfcare-page .selfcare-brand-logo { display: block; width: auto; height: 36px; max-width: 120px; object-fit: contain; }
.selfcare-page .selfcare-brand strong { color: #1b1b1f !important; font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.selfcare-page .selfcare-brand small { color: #e0262f; font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.selfcare-page .selfcare-header-actions { display: flex; align-items: center; gap: 12px; }
.selfcare-page .selfcare-header-customer { max-width: 220px; overflow: hidden; color: #475569; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.selfcare-page .selfcare-logout-form { display: block; margin: 0; }
.selfcare-page button.selfcare-secondary-button {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-color: var(--line) !important;
    background: #fff !important;
    color: #475569 !important;
}
.selfcare-page > main { width: min(100% - 40px, 1060px); margin: 30px auto !important; padding: 0 !important; }
.selfcare-page h1 { margin: 0 0 5px; color: #1b1b1f; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.selfcare-page .selfcare-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 22px; }
.selfcare-page .selfcare-eyebrow { margin: 0 0 5px; color: var(--brand-dark); font-size: 10px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.selfcare-page .selfcare-muted { margin: 4px 0 0; color: #7b7b88; font-size: 14px; }
.selfcare-page .selfcare-account-state, .selfcare-page .service-connection-state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f0fdf4;
    color: #166534;
    font-size: 11px;
    font-weight: 720;
    white-space: nowrap;
}
.selfcare-page .selfcare-account-state::before, .selfcare-page .service-connection-state::before { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; content: ""; }
.selfcare-page .selfcare-account-state.is-inactive { background: #fff7ed; color: #9a3412; }
.selfcare-page .selfcare-account-state.is-inactive::before { background: #d97706; }
.selfcare-page .selfcare-service-summary {
    position: relative;
    display: grid;
    min-height: 180px;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr);
    align-items: center;
    gap: 24px;
    overflow: hidden;
    margin: 0 0 22px !important;
    padding: 28px !important;
    border: 1px solid rgb(224 38 47 / 22%) !important;
    border-radius: 20px;
    background: linear-gradient(135deg, #c91d26, #e0262f 65%, #ee4a52) !important;
    box-shadow: 0 14px 34px rgb(224 38 47 / 26%);
    color: #fff;
}
.selfcare-page .selfcare-service-summary::after { position: absolute; top: -90px; right: -90px; width: 280px; height: 280px; border: 1.5px solid rgb(255 255 255 / 20%); border-radius: 50%; box-shadow: 0 0 0 46px rgb(255 255 255 / 5%); content: ""; pointer-events: none; }
.selfcare-page .selfcare-summary-primary, .selfcare-page .selfcare-summary-actions { position: relative; z-index: 1; }
.selfcare-page .selfcare-summary-primary { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.selfcare-page .selfcare-service-state { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #12804a; font-size: 14px; font-weight: 650; }
.selfcare-page .selfcare-service-state i { width: 9px; height: 9px; border-radius: 50%; background: #1fbf6b; box-shadow: 0 0 0 4px rgb(31 191 107 / 18%); }
.selfcare-page .selfcare-service-state.is-inactive { color: #45454f; }
.selfcare-page .selfcare-service-state.is-inactive i { background: #a35a00; box-shadow: 0 0 0 4px rgb(163 90 0 / 15%); }
.selfcare-page .selfcare-summary-label { color: #ffd9dc; font-size: 13.5px; font-weight: 500; }
.selfcare-page .selfcare-summary-primary strong { color: #fff !important; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.selfcare-page .selfcare-summary-user { color: #ffe4e6; font-size: 13px; overflow-wrap: anywhere; }
.selfcare-page .selfcare-summary-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.selfcare-page .selfcare-summary-expiry { display: grid; justify-items: end; gap: 2px; margin-bottom: 4px; text-align: right; }
.selfcare-page .selfcare-summary-expiry strong { color: #fff !important; font-size: 26px; font-weight: 800; }
.selfcare-page .selfcare-summary-action { display: inline-flex; min-height: 46px; align-items: center; gap: 10px; padding: 0 24px; border-radius: 10px; background: #fff; color: #b81b23 !important; box-shadow: 0 6px 16px rgb(224 38 47 / 18%); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.selfcare-page .selfcare-summary-payment-form { margin: 0; }
.selfcare-page main .selfcare-summary-action { min-height: 46px !important; padding: 0 24px !important; border: 0 !important; border-radius: 10px !important; background: #fff !important; color: #b81b23 !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; font-family: inherit; }
.selfcare-page main .selfcare-summary-action:disabled { cursor: not-allowed; opacity: .62; }
.selfcare-page main .selfcare-summary-preview-action:disabled { opacity: 1; }
.selfcare-page .selfcare-summary-history { color: #fff !important; font-size: 12px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.selfcare-page .selfcare-summary-action,
.selfcare-page .selfcare-summary-history,
.selfcare-page .selfcare-secondary-button,
.selfcare-page .selfcare-checkout button { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease; }
.selfcare-page .selfcare-summary-action:active,
.selfcare-page .selfcare-checkout button:active { transform: translateY(1px); }
.selfcare-page dialog.selfcare-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(84vh, 760px); padding: 22px; overflow-y: auto; border: 1px solid #ececf0; border-radius: 14px; background: #fff; color: #1b1b1f; box-shadow: 0 24px 70px rgb(27 27 31 / 24%); }
.selfcare-page dialog.selfcare-dialog::backdrop { background: rgb(27 27 31 / 42%); backdrop-filter: blur(2px); }
.selfcare-page .selfcare-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.selfcare-page .selfcare-dialog-header h2 { margin: 0; color: #1b1b1f; font-size: 19px; }
.selfcare-page .selfcare-dialog-close { display: grid; width: 36px; min-height: 36px !important; flex: 0 0 36px; place-items: center; padding: 0 !important; border: 1px solid #ececf0 !important; border-radius: 50% !important; background: #fff !important; color: #1b1b1f !important; font-size: 22px; line-height: 1; }
.selfcare-page .selfcare-dialog-form { display: grid; gap: 12px; }
.selfcare-page .selfcare-dialog-form label { display: grid; gap: 5px; }
.selfcare-page .selfcare-dialog-form input, .selfcare-page .selfcare-dialog-form select { width: 100%; min-width: 0; }
.selfcare-page .selfcare-dialog-form > button { min-height: 42px; margin-top: 4px; }
.selfcare-page .selfcare-dialog .selfcare-table-wrap { max-width: 100%; overflow-x: auto; }
.selfcare-page .selfcare-dialog table { min-width: 560px; }
.selfcare-page .selfcare-invoice-table table { min-width: 0; }
.selfcare-page .selfcare-invoice-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #e4f6ec; color: #12804a; font-size: 12px; font-weight: 700; }
.selfcare-page .selfcare-invoice-status.status-pending, .selfcare-page .selfcare-invoice-status.status-due { background: #fff1dc; color: #a35a00; }
.selfcare-page .selfcare-invoice-status.status-cancelled, .selfcare-page .selfcare-invoice-status.status-failed, .selfcare-page .selfcare-invoice-status.status-overdue { background: #fdecea; color: #b3261e; }
.selfcare-page .selfcare-invoice-empty { margin: 0; }
.selfcare-page section.selfcare-panel {
    min-width: 0;
    margin: 0 0 18px !important;
    padding: 20px !important;
    border: 1px solid #ececf0 !important;
    border-top: 1px solid #ececf0 !important;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 1px 2px rgb(27 27 31 / 6%), 0 8px 24px rgb(27 27 31 / 7%);
}
.selfcare-page .selfcare-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.selfcare-page .selfcare-section-heading h2 { margin: 0 0 3px !important; color: #1b1b1f; font-size: 18px; font-weight: 700; }
.selfcare-page .selfcare-section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.selfcare-page .selfcare-panel .traffic-chart { margin: 14px 0; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.selfcare-page .traffic-chart-heading strong { color: var(--ink); font-size: 13px; }
.selfcare-page .traffic-chart-heading small, .selfcare-page .traffic-chart-current { color: var(--muted); font-size: 10px; }
.selfcare-page .traffic-line-upload, .selfcare-page .traffic-point-upload { stroke: #1e293b; fill: #1e293b; }
.selfcare-page .traffic-legend-upload { background: #1e293b; }
.selfcare-page .selfcare-onu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.selfcare-page .selfcare-onu-grid > div { min-width: 0; min-height: 72px; padding: 16px 18px; border: 1px solid #ececf0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(27 27 31 / 4%); }
.selfcare-page .selfcare-onu-grid dt { margin-bottom: 4px; color: #7b7b88; font-size: 13.5px; }
.selfcare-page .selfcare-onu-grid dd { margin: 0; color: #1b1b1f; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.selfcare-page .selfcare-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.selfcare-page .selfcare-table-wrap table { display: table; width: 100%; min-width: 590px; border-collapse: collapse; white-space: nowrap; }
.selfcare-page .selfcare-table-wrap th { padding: 10px 12px; background: #f8fafc; color: var(--muted); font-size: 10px; font-weight: 720; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.selfcare-page .selfcare-table-wrap td { padding: 11px 12px; border-bottom: 1px solid #edf1f5; color: #334155; font-size: 12px; }
.selfcare-page .selfcare-table-wrap tbody tr:last-child td { border-bottom: 0; }
.selfcare-page .selfcare-panel .unavailable { margin: 0; border: 1px solid var(--line); border-left: 3px solid #94a3b8; border-radius: 7px; background: #f8fafc; color: #475569; font-size: 12px; }
.selfcare-page .selfcare-checkout { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); align-items: end; gap: 13px; margin: 0 0 18px; }
.selfcare-page .selfcare-checkout label { display: grid; gap: 6px; color: #334155; font-size: 11px; font-weight: 650; }
.selfcare-page .selfcare-checkout button { min-height: 50px !important; border: 0 !important; border-radius: 12px !important; background: #e0262f !important; box-shadow: 0 6px 16px rgb(224 38 47 / 18%); font-size: 15px !important; font-weight: 700 !important; }
.selfcare-page .selfcare-table-title { margin: 18px 0 9px; color: #1e293b; font-size: 13px; }
.selfcare-page .selfcare-account-title { margin: 32px 0 14px; color: #1b1b1f; font-size: 18px; font-weight: 700; }
.selfcare-page .selfcare-account-details { margin-bottom: 24px; }
.selfcare-page .selfcare-recharge-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 15px 18px; border: 1px solid #ececf0; border-radius: 14px; background: #fff; }
.selfcare-page .selfcare-recharge-summary strong { display: block; color: #1b1b1f; font-size: 18px; font-weight: 800; }
.selfcare-page .selfcare-recharge-summary span { color: #7b7b88; font-size: 13px; }
.selfcare-page .selfcare-recharge-summary b { color: #e0262f; font-size: 20px; font-weight: 800; white-space: nowrap; }
.selfcare-page .selfcare-help-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 32px 0 0 !important; padding: 22px 24px !important; border: 1px solid #ececf0 !important; border-radius: 14px; background: #fff !important; box-shadow: 0 1px 2px rgb(27 27 31 / 6%), 0 8px 24px rgb(27 27 31 / 7%); }
.selfcare-page .selfcare-help-card h2 { margin: 0 !important; color: #1b1b1f; font-size: 17px; }
.selfcare-page .selfcare-help-card p { margin: 4px 0 0; color: #7b7b88; font-size: 14px; }
.selfcare-page .selfcare-page-alert { margin-bottom: 16px; }
.selfcare-page .selfcare-legacy-section-title { margin: 32px 0 14px; color: #1b1b1f; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.selfcare-page section.selfcare-legacy-box {
    margin: 0 0 18px !important;
    padding: 20px !important;
    border: 1px solid #ececf0 !important;
    border-top: 1px solid #ececf0 !important;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 1px 2px rgb(27 27 31 / 6%), 0 8px 24px rgb(27 27 31 / 7%);
}
.selfcare-page .selfcare-legacy-box .rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; justify-items: center; gap: 16px; margin-bottom: 14px; text-align: center; }
.selfcare-page .selfcare-legacy-box .rates > div { min-width: 0; text-align: center; }
.selfcare-page .selfcare-legacy-box .rates strong { display: block; color: #1b1b1f; font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.selfcare-page .selfcare-legacy-box .rates .sess strong { padding-top: 6px; color: #45454f; font-size: 16px; font-weight: 700; }
.selfcare-page .selfcare-account-box { margin-bottom: 24px !important; }
.selfcare-page .selfcare-legacy-box .lbl { color: #7b7b88; font-size: 13.5px; }
.selfcare-page .selfcare-legacy-box .lbl.dl, .selfcare-page .selfcare-legacy-box .lbl.ul { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.selfcare-page .selfcare-legacy-box .lbl.dl { color: #e0262f; }
.selfcare-page .selfcare-legacy-box .lbl.ul { color: #1b1b1f; }
.selfcare-page .selfcare-legacy-chart { display: block; width: 100%; height: 180px; }
.selfcare-page .selfcare-legacy-chart text { fill: #7b7b88; font: 12px system-ui, sans-serif; }
.selfcare-page .selfcare-legacy-chart .gridline { stroke: #ececf0; stroke-width: 1; }
.selfcare-page .selfcare-legacy-chart .download { fill: none; stroke: #e0262f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.selfcare-page .selfcare-legacy-chart .upload { fill: none; stroke: #1b1b1f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.selfcare-page .selfcare-refresh-button { display: grid; width: 36px; min-height: 36px !important; place-items: center; padding: 0 !important; border-radius: 50% !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.selfcare-page .selfcare-refresh-button svg { width: 18px; height: 18px; filter: drop-shadow(0 2px 2px rgb(15 23 42 / 35%)); }
.selfcare-page .selfcare-onu-refresh-form { flex: 0 0 auto; }
.selfcare-page .selfcare-onu-refresh-form { display: flex; min-width: 0; align-items: center; gap: 10px; }
.selfcare-page .selfcare-onu-refresh-form svg { width: 18px; height: 18px; }
.selfcare-page .selfcare-onu-refresh-form .is-loading svg { animation: selfcare-refresh-spin 1s linear infinite; }
.selfcare-page .selfcare-onu-refresh-status { color: #7b7b88; font-size: 12px; }
@keyframes selfcare-refresh-spin { to { transform: rotate(360deg); } }
.selfcare-page .selfcare-legacy-box .upd { margin: 12px 0 0; color: #7b7b88; font-size: 13px; }
.selfcare-page .selfcare-legacy-box .onu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: nowrap; margin-bottom: 16px; }
.selfcare-page .selfcare-legacy-box .onu-id { display: flex; min-width: 0; align-items: center; gap: 12px; flex-wrap: wrap; }
.selfcare-page .selfcare-legacy-box .onu-id strong { color: #1b1b1f; font-size: 17px; }
.selfcare-page .selfcare-legacy-box .chip { display: inline-block; margin: 2px 0 18px; padding: 3px 12px; border-radius: 999px; background: #e4f6ec; color: #12804a; font-size: 13.5px; font-weight: 700; }
.selfcare-page .selfcare-legacy-box .chip.mute { background: #eeeef1; color: #7b7b88; }
.selfcare-page .selfcare-legacy-box .onu-head .chip { margin: 0; }
.selfcare-page .selfcare-legacy-box .grid.onu-grid,
.selfcare-page .selfcare-account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0; }
.selfcare-page .selfcare-legacy-box .tile,
.selfcare-page .selfcare-account-grid .tile {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #ececf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(27 27 31 / 4%);
}
.selfcare-page .selfcare-legacy-box .tile dt,
.selfcare-page .selfcare-account-grid .tile dt { margin-bottom: 4px; color: #7b7b88; font-size: 13.5px; }
.selfcare-page .selfcare-legacy-box .tile dd,
.selfcare-page .selfcare-account-grid .tile dd { margin: 0; color: #1b1b1f; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.selfcare-page .selfcare-legacy-box .empty { padding: 24px; border: 1px solid #ececf0; border-radius: 14px; background: #fff; text-align: center; }
.selfcare-page .selfcare-legacy-box .empty h3 { margin: 0 0 5px; color: #1b1b1f; font-size: 17px; }
.selfcare-page .selfcare-legacy-box .empty p { margin: 0; color: #7b7b88; font-size: 14px; }
.selfcare-page .selfcare-help-card.helpcard { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 32px 0 0 !important; padding: 22px 24px !important; border: 1px solid #ececf0 !important; border-radius: 14px; background: #fff !important; box-shadow: 0 1px 2px rgb(27 27 31 / 6%), 0 8px 24px rgb(27 27 31 / 7%); }
.selfcare-page .selfcare-help-card h3 { color: #1b1b1f; font-size: 17px; }
.selfcare-page .selfcare-help-card p { max-width: 480px; margin: 4px 0 0; color: #7b7b88; font-size: 14.5px; }
.selfcare-page .login { border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; border-radius: 12px; box-shadow: 0 14px 36px rgb(15 23 42 / 7%); }
.selfcare-page .login h1 { margin-bottom: 5px; }
.selfcare-page .selfcare-login-form { display: grid; gap: 14px; margin-top: 18px; }
.selfcare-page .selfcare-login-feats { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.selfcare-page .selfcare-login-feats li { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid #e8edf4; border-radius: 10px; font-size: 12px; }
.selfcare-page .selfcare-login-feats span { color: #7b7b88; font-weight: 600; }
.selfcare-page .selfcare-help { margin: 16px 0 0; color: #475569; font-size: 12px; }
.selfcare-page .selfcare-login-form label { display: grid; gap: 6px; color: #334155; font-size: 12px; font-weight: 650; }
.selfcare-page > .selfcare-footer { padding: 18px 20px 28px; color: #64748b; font-size: 13px; letter-spacing: .02em; text-align: center; }
@media (max-width: 720px) {
    .selfcare-page > .selfcare-header { padding: 12px 16px !important; }
    .selfcare-page > main { width: calc(100% - 32px); margin: 20px auto !important; }
    .selfcare-page .selfcare-service-summary { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px !important; }
    .selfcare-page .selfcare-summary-actions { align-items: flex-start; }
    .selfcare-page .selfcare-summary-expiry { justify-items: start; text-align: left; }
    .selfcare-page .selfcare-summary-action { justify-content: center; }
    .selfcare-page .selfcare-legacy-box .rates { gap: 8px; }
    .selfcare-page .selfcare-legacy-box .rates strong { font-size: 18px; }
    .selfcare-page .selfcare-legacy-box .rates .sess strong { font-size: 14px; }
    .selfcare-page .selfcare-legacy-box .rates .lbl { font-size: 11px; }
}
@media (max-width: 480px) {
    .selfcare-page > .selfcare-header { gap: 8px; }
    .selfcare-page .selfcare-header-actions { gap: 7px; }
    .selfcare-page .selfcare-header-customer { display: none; }
    .selfcare-page .selfcare-welcome { flex-direction: column; gap: 10px; }
    .selfcare-page .selfcare-service-summary { gap: 14px; padding: 18px !important; border-radius: 16px; }
    .selfcare-page .selfcare-summary-primary strong { font-size: clamp(23px, 7vw, 28px); }
    .selfcare-page .selfcare-summary-expiry strong { font-size: clamp(21px, 6vw, 26px); }
    .selfcare-page .selfcare-summary-actions { align-items: flex-start; }
    .selfcare-page .selfcare-summary-payment-form { width: min(100%, 220px); }
    .selfcare-page .selfcare-summary-action { width: min(100%, 220px); justify-content: center; }
    .selfcare-page .selfcare-summary-history { align-self: flex-start; }
    .selfcare-page .selfcare-section-heading h2 { font-size: 17px; }
    .selfcare-page .selfcare-section-heading { align-items: flex-start; }
    .selfcare-page section.selfcare-panel { padding: 16px !important; }
    .selfcare-page section.selfcare-legacy-box { padding: 16px !important; }
    .selfcare-page .selfcare-legacy-box .grid.onu-grid,
    .selfcare-page .selfcare-account-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; }
    .selfcare-page .selfcare-legacy-box .tile,
    .selfcare-page .selfcare-account-grid .tile { padding: 12px; }
    .selfcare-page .selfcare-legacy-box .tile dd,
    .selfcare-page .selfcare-account-grid .tile dd { font-size: 15px; }
    .selfcare-page .selfcare-legacy-section-title { margin-top: 26px; }
    .selfcare-page .selfcare-help-card.helpcard { padding: 16px !important; }
    .selfcare-page .selfcare-invoice-table { overflow: visible; border: 0; }
    .selfcare-page .selfcare-invoice-table table,
    .selfcare-page .selfcare-invoice-table tbody { display: block; width: 100%; min-width: 0; overflow: visible; white-space: normal; }
    .selfcare-page .selfcare-invoice-table thead { display: none; }
    .selfcare-page .selfcare-invoice-table tbody { display: grid; gap: 10px; }
    .selfcare-page .selfcare-invoice-table tr { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 11px 13px; border: 1px solid #ececf0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(27 27 31 / 4%); }
    .selfcare-page .selfcare-invoice-table td { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 7px 0 !important; border: 0 !important; color: #1b1b1f; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
    .selfcare-page .selfcare-invoice-table td::before { flex: 0 0 auto; color: #7b7b88; content: attr(data-label); font-size: 10px; font-weight: 600; }
    .selfcare-page .selfcare-invoice-table td:first-child { grid-column: 1 / -1; margin-bottom: 3px; padding-bottom: 9px !important; border-bottom: 1px solid #ececf0 !important; font-weight: 750; }
    .selfcare-page .selfcare-invoice-table td:nth-child(2), .selfcare-page .selfcare-invoice-table td:nth-child(3) { grid-column: span 1; }
    .selfcare-page .selfcare-invoice-table td:nth-child(4), .selfcare-page .selfcare-invoice-table td:nth-child(5) { grid-column: span 1; }
    .selfcare-page .selfcare-invoice-table td[colspan] { grid-column: 1 / -1; }
    .selfcare-page .selfcare-recharge-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
    .selfcare-page .selfcare-help-card { padding: 16px !important; }
}

.app-page .dashboard-shell {
    display: grid;
    gap: 18px;
}
.app-page .dashboard-page-heading {
    align-items: center;
    margin: 0;
}
.app-page .dashboard-heading-copy h1 {
    margin: 0 0 5px !important;
    font-size: clamp(23px, 2.4vw, 30px) !important;
}
.app-page .dashboard-heading-copy .eyebrow {
    margin-bottom: 7px;
}
.app-page .dashboard-heading-copy .page-description {
    margin: 0;
    font-size: 12px;
}
.app-page .dashboard-preview-notice {
    margin: -7px 0 0;
    padding: 9px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 11px;
    font-weight: 580;
}
.app-page .insight-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 680;
    white-space: nowrap;
}
.app-page .dashboard-date-chip {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}
.app-page .dashboard-date-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
}
.app-page .dashboard-date-icon svg {
    width: 17px;
    height: 17px;
}
.app-page .dashboard-date-chip small,
.app-page .dashboard-date-chip strong {
    display: block;
}
.app-page .dashboard-date-chip small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
}
.app-page .dashboard-date-chip strong {
    margin-top: 2px;
    color: #334155;
    font-size: 11px;
    font-weight: 680;
    white-space: nowrap;
}
.app-page section.dashboard-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
    gap: 12px;
    margin: 0 !important;
}
.app-page .dashboard-metric {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    min-height: 106px;
    gap: 8px;
    padding: 15px;
    border-color: #e8edf4;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
}
.app-page .dashboard-metric:hover {
    transform: translateY(-2px);
    border-color: #d5deea;
    box-shadow: 0 8px 18px rgb(15 23 42 / 7%);
}
.app-page .dashboard-metric-top {
    display: contents;
}
.app-page .dashboard-metric-icon {
    position: absolute;
    top: calc(50% - 16px);
    left: 15px;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    transform: translateY(-50%);
    border-radius: 9px;
    border: 0;
    box-shadow: 0 3px 7px rgb(15 23 42 / 14%);
}
.app-page .dashboard-metric-icon .sidebar-icon-svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.6;
}
.app-page .dashboard-metric-icon > span {
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
}
.app-page .dashboard-tone-primary {
    background: #bfdbfe;
    color: #1e40af;
}
.app-page .dashboard-tone-success {
    background: #a7f3d0;
    color: #065f46;
}
.app-page .dashboard-tone-warning {
    background: #fde68a;
    color: #92400e;
}
.app-page .dashboard-tone-danger {
    background: #fecdd3;
    color: #9f1239;
}
.app-page .dashboard-tone-purple {
    background: #ddd6fe;
    color: #5b21b6;
}
.app-page .dashboard-tone-info {
    background: #a5f3fc;
    color: #155e75;
}
body.app-page.has-sidebar > main .dashboard-shell .dashboard-metric-label {
    position: absolute;
    top: calc(50% - 16px);
    right: 15px;
    left: 65px;
    transform: translateY(-50%);
    min-width: 0;
    color: #475569;
    font-family: "Cerebri Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.app-page.has-sidebar > main .dashboard-shell .dashboard-metric strong.dashboard-metric-value {
    display: block;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    justify-self: end;
    align-self: end;
    grid-row: 2;
    color: #475569 !important;
    font-family: "Cerebri Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: right;
}
.app-page .dashboard-metric-detail {
    display: none;
}
.app-page section.dashboard-panel {
    margin: 0 !important;
    padding: 20px 22px !important;
    border-color: #e8edf4 !important;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
}
.app-page .dashboard-shell .section-heading {
    align-items: center;
    margin-bottom: 16px;
}
.app-page .dashboard-shell .section-heading h2 {
    margin: 0 0 3px !important;
    font-size: 15px !important;
    letter-spacing: -.02em;
}
.app-page .dashboard-shell .section-heading p {
    margin: 0;
    font-size: 11px;
}
.app-page .dashboard-shell .text-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2563eb;
}
.app-page .dashboard-trend-panel .collection-chart {
    min-height: 190px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    padding: 10px 8px 0;
}
.app-page .dashboard-trend-panel .trend-column {
    height: 176px;
    grid-template-rows: 19px minmax(0, 1fr) 20px;
    font-size: 10px;
}
.app-page .dashboard-trend-panel .trend-amount {
    color: #64748b;
    font-size: 10px;
    font-weight: 620;
}
.app-page .dashboard-trend-panel .trend-bar {
    width: min(100%, 42px);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%);
    transition: filter .15s ease;
}
.app-page .dashboard-trend-panel .trend-column:hover .trend-bar {
    filter: brightness(.94);
}
.app-page .dashboard-trend-panel .trend-label {
    color: #64748b;
    font-weight: 600;
}
.app-page .dashboard-lower {
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .9fr);
    gap: 16px;
    align-items: stretch;
}
.app-page .dashboard-lower-single {
    grid-template-columns: minmax(0, 1fr);
}
.app-page .dashboard-record-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}
.app-page .dashboard-record-panel {
    min-width: 0;
}
.app-page .dashboard-record-panel .section-heading {
    justify-content: flex-start;
    text-align: left;
}
.app-page .dashboard-record-panel .section-heading > div {
    width: 100%;
}
.app-page .dashboard-record-panel .table-wrap {
    border-color: #edf1f5;
    border-radius: 9px;
}
.app-page .dashboard-record-panel table {
    min-width: 420px;
}
.app-page .dashboard-record-panel th {
    background: #f8fafc;
}
.app-page .dashboard-record-protocol {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 10px;
}
.app-page .dashboard-load-more {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}
.app-page .recent-payments .table-wrap {
    border-color: #edf1f5;
    border-radius: 9px;
}
.app-page .recent-payments .section-heading {
    justify-content: flex-start;
    text-align: left;
}
.app-page .recent-payments .section-heading > div {
    flex: 1 1 auto;
    width: 100%;
}
.app-page .recent-payments .table-wrap :is(th, td) { text-align: center; }
.app-page .recent-payments th {
    background: #f8fafc;
}
.app-page .quick-action-list {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 9px;
}
.app-page .quick-action-list a {
    min-height: 58px;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px;
    border-color: #e8edf4;
    border-radius: 9px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.app-page .quick-action-list a:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
    background: #f8fbff;
    color: #1d4ed8 !important;
}
.app-page .quick-action-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
}
.app-page .quick-action-icon .sidebar-icon-svg {
    width: 18px;
    height: 18px;
}
.app-page .quick-action-icon {
    font-size: 16px;
    font-weight: 700;
}
.app-page .quick-action-label {
    min-width: 0;
    flex: 1;
    color: #334155;
    font-size: 11px;
    font-weight: 650;
}
.app-page .quick-action-arrow {
    color: #94a3b8 !important;
    font-size: 15px !important;
}
@media (max-width: 720px) {
    .app-page .dashboard-page-heading {
        align-items: flex-start;
    }
    .app-page .dashboard-date-chip {
        min-height: 40px;
        padding: 4px 8px;
    }
    .app-page .dashboard-date-icon {
        width: 28px;
        height: 28px;
    }
    .app-page .dashboard-date-chip strong {
        font-size: 10px;
    }
    .app-page .dashboard-trend-panel .collection-chart {
        gap: 7px;
        padding-right: 0;
        padding-left: 0;
    }
    .app-page .dashboard-trend-panel .trend-column {
        height: 158px;
    }
}
@media (max-width: 480px) {
    .app-page .dashboard-page-heading {
        flex-direction: column;
        gap: 12px;
    }
    .app-page .dashboard-date-chip {
        align-self: flex-start;
    }
    .app-page section.dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-page .dashboard-metric {
        min-height: 96px;
        gap: 6px;
        padding: 11px;
    }
    body.app-page.has-sidebar > main .dashboard-shell .dashboard-metric-label {
        top: 50%;
        right: 11px;
        left: 53px;
        font-size: 13px !important;
    }
    .app-page .dashboard-metric-icon {
        left: 11px;
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .app-page .dashboard-metric-icon .sidebar-icon-svg {
        width: 24px;
        height: 24px;
    }
    body.app-page.has-sidebar > main .dashboard-shell .dashboard-metric strong.dashboard-metric-value {
        font-family: "Cerebri Sans", sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    .app-page .dashboard-trend-panel {
        padding-right: 13px !important;
        padding-left: 13px !important;
    }
    .app-page .dashboard-trend-panel .collection-chart {
        gap: 4px;
    }
    .app-page .dashboard-trend-panel .trend-amount {
        font-size: 8px;
    }
    .app-page .quick-action-list {
        grid-template-columns: 1fr;
    }
}
.business-dashboard {
    --business-blue: #2563eb;
    --business-violet: #7c3aed;
    --business-green: #059669;
    --business-amber: #d97706;
    gap: 18px;
}
.business-dashboard .dashboard-page-heading {
    gap: 22px;
}
.business-dashboard section.business-kpi-grid,
.business-dashboard section.business-main-grid,
.business-dashboard section.business-lower-grid {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
}
.business-dashboard .dashboard-heading-copy h1 {
    text-transform: capitalize;
}
.business-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.business-period-form {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}
.business-period-form label {
    padding-left: 7px;
    color: var(--muted);
    font-size: 10px !important;
    white-space: nowrap;
}
.business-period-form input {
    width: 142px;
    min-height: 34px !important;
    padding: 5px 7px !important;
    border-color: transparent !important;
    font-size: 11px !important;
}
.business-period-form button {
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
}
.business-secondary-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: #334155 !important;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}
.business-secondary-link:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
    color: var(--business-blue) !important;
}
.business-period-bar {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: linear-gradient(110deg, #eff6ff, #fff 74%);
}
.business-period-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 10px;
    background: #dbeafe;
    color: var(--business-blue);
    font-size: 18px;
}
.business-period-bar small,
.business-period-bar strong {
    display: block;
}
.business-period-bar small {
    color: #64748b;
    font-size: 10px;
}
.business-period-bar strong {
    margin-top: 2px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
}
.business-period-scope {
    margin-left: auto;
    padding: 5px 9px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: rgb(255 255 255 / 75%);
    color: #475569;
    font-size: 10px;
    font-weight: 600;
}
.business-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.business-kpi {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 166px;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
    transition: transform .15s ease, box-shadow .15s ease;
}
.business-kpi::after {
    position: absolute;
    right: -34px;
    bottom: -46px;
    width: 116px;
    height: 116px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .08;
    content: "";
    pointer-events: none;
}
.business-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgb(15 23 42 / 7%);
}
.business-kpi-blue { color: var(--business-blue); background: linear-gradient(145deg, #fff, #f8fbff); }
.business-kpi-violet { color: var(--business-violet); background: linear-gradient(145deg, #fff, #fbfaff); }
.business-kpi-green { color: var(--business-green); background: linear-gradient(145deg, #fff, #f7fdf9); }
.business-kpi-amber { color: var(--business-amber); background: linear-gradient(145deg, #fff, #fffdf7); }
.business-kpi-top {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #64748b;
    font-size: 10px;
    font-weight: 630;
}
.business-kpi-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 9px;
    background: rgb(37 99 235 / 8%);
    color: currentColor;
    font-size: 17px;
    font-weight: 750;
}
.business-kpi-label {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}
.business-kpi-value {
    display: block;
    max-width: 100%;
    color: #0f172a;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 760;
    letter-spacing: -.04em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.business-kpi-foot {
    margin-top: auto;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.4;
}
.business-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr);
    gap: 15px;
    align-items: stretch;
}
.business-dashboard .dashboard-panel {
    min-width: 0;
}
.business-dashboard article.dashboard-panel {
    margin: 0;
    padding: 20px 22px;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
}
.business-chart-period {
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}
.business-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 12px;
    color: #64748b;
    font-size: 10px;
}
.business-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.business-trend-legend i {
    width: 8px;
    height: 8px;
    border-radius: 3px;
}
.business-legend-billed { background: #a78bfa; }
.business-legend-collected { background: #2563eb; }
.business-trend-chart {
    display: grid;
    min-height: 220px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    padding: 8px 8px 0;
    border-bottom: 1px solid #e9eef5;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 52px, #f1f5f9 53px, transparent 54px);
}
.business-trend-column {
    display: grid;
    min-width: 0;
    height: 205px;
    grid-template-rows: minmax(0, 1fr) 22px;
    justify-items: center;
}
.business-trend-bars {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: end;
    justify-content: center;
    gap: 5px;
}
.business-trend-bar {
    width: min(34%, 28px);
    height: var(--bar-height);
    min-height: 0;
    align-self: end;
    border-radius: 5px 5px 1px 1px;
}
.business-trend-bar-billed { background: linear-gradient(180deg, #c4b5fd, #8b5cf6); }
.business-trend-bar-collected { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.business-trend-month {
    align-self: end;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
}
.business-chart-empty {
    margin: 12px 0 0;
    color: #94a3b8;
    font-size: 10px;
    text-align: center;
}
.business-health-panel {
    display: flex;
    flex-direction: column;
}
.business-health-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 13px;
    padding: 13px;
    border: 1px solid #d1fae5;
    border-radius: 9px;
    background: #f0fdf4;
}
.business-health-total span {
    color: #166534;
    font-size: 11px;
    font-weight: 630;
}
.business-health-total strong {
    color: #047857;
    font-size: 23px;
    font-weight: 760;
}
.business-health-list {
    display: grid;
    gap: 12px;
    padding: 5px 1px 14px;
}
.business-health-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.business-health-list > div > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 10px;
}
.business-health-list strong {
    color: #1e293b;
    font-size: 12px;
}
.business-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}
.business-status-active { background: #10b981; }
.business-status-suspended { background: #f59e0b; }
.business-status-expired { background: #f43f5e; }
.business-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--business-blue) !important;
    font-size: 10px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
.business-health-panel > .business-panel-link {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #edf1f5;
}
.business-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr);
    gap: 15px;
    align-items: stretch;
}
.business-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.business-inventory-grid > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid #e8edf4;
    border-radius: 9px;
}
.business-inventory-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 15px;
}
.business-inventory-icon-violet { background: #f5f3ff; color: #7c3aed; }
.business-inventory-icon-green { background: #ecfdf5; color: #059669; }
.business-inventory-grid small,
.business-inventory-grid strong {
    display: block;
}
.business-inventory-grid small {
    color: #64748b;
    font-size: 9px;
    line-height: 1.3;
}
.business-inventory-grid strong {
    margin-top: 2px;
    color: #1e293b;
    font-size: 16px;
    font-weight: 740;
}
.business-inventory-note {
    margin: 11px 0 0;
    color: #94a3b8;
    font-size: 9px;
    line-height: 1.45;
}
.business-activity-panel .section-heading {
    align-items: center;
}
.business-payment-list {
    display: grid;
}
.business-payment-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f5;
}
.business-payment-row:last-child {
    border-bottom: 0;
}
.business-payment-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}
.business-payment-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}
.business-payment-copy strong {
    overflow: hidden;
    color: #334155;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.business-payment-copy small {
    color: #94a3b8;
    font-size: 9px;
}
.business-payment-amount {
    display: grid;
    justify-items: end;
    gap: 3px;
    color: #1e293b;
    font-size: 10px;
    font-weight: 680;
    white-space: nowrap;
}
.business-payment-status {
    color: #64748b;
    font-size: 9px;
    font-weight: 560;
}
.business-payment-status.status-succeeded { color: #059669; }
.business-payment-status.status-pending,
.business-payment-status.status-review,
.business-payment-status.status-reconciliation_required { color: #d97706; }
.business-payment-status.status-failed { color: #e11d48; }
@media (max-width: 980px) {
    .business-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .business-main-grid,
    .business-lower-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 720px) {
    .business-dashboard .dashboard-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .business-dashboard-actions {
        justify-content: flex-start;
    }
    .business-period-form {
        flex-wrap: wrap;
    }
    .business-period-scope {
        margin-left: auto;
    }
}
@media (max-width: 480px) {
    .business-kpi-grid {
        gap: 8px;
    }
    .business-kpi {
        min-height: 148px;
        padding: 12px;
    }
    .business-kpi-value {
        font-size: clamp(15px, 4vw, 19px);
    }
    .business-kpi-foot {
        font-size: 9px;
    }
    .business-inventory-grid {
        grid-template-columns: 1fr;
    }
    .business-inventory-grid > div {
        padding: 9px;
    }
    .business-trend-chart {
        gap: 5px;
        padding-right: 1px;
        padding-left: 1px;
    }
    .business-trend-bars {
        gap: 3px;
    }
    .business-trend-bar {
        width: 36%;
    }
}

/* PAGE LAYOUT AND STRUCTURE */
main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 40px 28px;
    background: var(--canvas);
}

body.has-sidebar main { margin-left: var(--sidebar-width); }

.page-header { margin-bottom: 32px; }
.page-header h1 { margin: 0 0 8px; font-size: 28px; font-weight: 700; color: var(--ink); }
.page-header .text-muted { color: var(--muted); font-size: 14px; margin: 0; }

/* CARDS AND SECTIONS */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.section-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.section-header h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--ink); }

/* FORMS */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.app-page main form.form-grid:not(.router-edit-form) .form-group { align-self: stretch; }
.app-page main form.form-grid:not(.router-edit-form) .form-group > label:not(:has(> input, > select, > textarea)) {
    display: flex;
    min-height: 15px;
    align-items: flex-start;
    line-height: 1.25;
}
.app-page main form.form-grid:not(.router-edit-form) .form-group > label:has(> input, > select, > textarea) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    line-height: 1.25;
}
.app-page main form.form-grid:not(.router-edit-form) .form-group > :is(input, select, textarea),
.app-page main form.form-grid:not(.router-edit-form) .form-group > label > :is(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 38px !important;
    height: 38px;
    margin: 0;
}
.app-page main form.form-grid:not(.router-edit-form) .form-group > select,
.app-page main form.form-grid:not(.router-edit-form) .form-group > label > select {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.app-page main form.form-grid:not(.router-edit-form) .form-group > textarea,
.app-page main form.form-grid:not(.router-edit-form) .form-group > label > textarea {
    min-height: 84px !important;
    height: 84px;
    border-radius: 12px !important;
}
.app-page main section.customer-form-section,
.selfcare-page main section.customer-form-section {
    display: block;
    margin: 0 !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.app-page main form.customer-create-form,
.selfcare-page main form.customer-create-form {
    grid-template-columns: minmax(0, 1fr);
}
.app-page main section.customer-form-section:first-of-type,
.selfcare-page main section.customer-form-section:first-of-type {
    border-top: 0 !important;
    padding-top: 0 !important;
}
.app-page main .customer-form-section > h3,
.selfcare-page main .customer-form-section > h3 {
    margin: 0 0 12px !important;
    color: var(--ink);
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35;
}
.app-page main .customer-form-fields,
.selfcare-page main .customer-form-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    min-width: 0;
}
.app-page main .customer-server-form-section .customer-form-fields,
.selfcare-page main .customer-server-form-section .customer-form-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app-page main .customer-form-fields > .form-group,
.selfcare-page main .customer-form-fields > .form-group {
    align-self: stretch;
    min-width: 0;
}
.app-page main .customer-form-fields > .form-group[hidden],
.selfcare-page main .customer-form-fields > .form-group[hidden] {
    display: none !important;
}
.app-page main .customer-form-fields .form-group > label:has(> input, > select, > textarea),
.selfcare-page main .customer-form-fields .form-group > label:has(> input, > select, > textarea) {
    display: grid;
    grid-template-rows: minmax(14px, auto) 38px;
    gap: 5px;
    width: 100%;
    min-width: 0;
    color: #334155;
    font-size: 11px !important;
    font-weight: 620 !important;
    line-height: 1.25;
}
.app-page main .customer-form-fields .form-group > label:not(:has(> input, > select, > textarea)),
.selfcare-page main .customer-form-fields .form-group > label:not(:has(> input, > select, > textarea)) {
    display: block;
    min-height: 14px;
    margin: 0;
    color: #334155;
    font-size: 11px !important;
    font-weight: 620 !important;
    line-height: 14px;
}
.app-page main .customer-form-fields .form-group > label:has(> input, > select, > textarea) > :is(input, select, textarea),
.selfcare-page main .customer-form-fields .form-group > label:has(> input, > select, > textarea) > :is(input, select, textarea),
.app-page main .customer-form-fields .form-group > :is(input, select, textarea),
.selfcare-page main .customer-form-fields .form-group > :is(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 38px !important;
    height: 38px;
    margin: 0;
}
.app-page main .customer-form-fields .form-group > textarea,
.selfcare-page main .customer-form-fields .form-group > textarea,
.app-page main .customer-form-fields .form-group > label > textarea,
.selfcare-page main .customer-form-fields .form-group > label > textarea {
    min-height: 84px !important;
    height: 84px;
    border-radius: 12px !important;
}
.app-page main .customer-form-fields .form-group > small,
.selfcare-page main .customer-form-fields .form-group > small {
    display: block;
    margin-top: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}
.app-page main .customer-form-fields .form-group > small[hidden],
.selfcare-page main .customer-form-fields .form-group > small[hidden] {
    display: none !important;
}
.app-page main .customer-form-fields > .text-muted,
.selfcare-page main .customer-form-fields > .text-muted {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}
.app-page main .customer-form-fields > button,
.selfcare-page main .customer-form-fields > button {
    align-self: end;
    justify-self: start;
    min-width: 190px;
    min-height: 38px;
    margin-top: 20px;
    padding: 0 18px;
    width: auto;
}
@media (max-width: 720px) {
    .app-page main .customer-form-fields,
    .selfcare-page main .customer-form-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}
@media (max-width: 420px) {
    .app-page main .customer-form-fields,
    .selfcare-page main .customer-form-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 720px) {
    .app-page main .customer-server-form-section .customer-form-fields,
    .selfcare-page main .customer-server-form-section .customer-form-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}
.form-grid > :is(button, .btn), form.grid > :is(button, .btn), .filters > :is(button, .btn) {
    align-self: end;
    justify-self: start;
    width: fit-content;
}
.form-grid .form-group > button,
.form-grid .form-group > .btn {
    align-self: flex-start;
    width: fit-content;
    min-height: 38px;
    margin-top: 20px;
    padding: 0 18px;
}
.form-group label { font-size: 13px; font-weight: 600; color: var(--ink); }
.form-group input, .form-group select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; transition: border-color 0.15s ease; background: var(--surface); }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 15px; border: none; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: #e2e8f0; color: var(--ink); }
.btn-secondary:hover { background: #cbd5e1; }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #15803d; }
.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover { background: #dc2626; }
.app-page .btn { border-radius: 10px; min-height: 38px; font-weight: 700; box-shadow: none; }
.app-page .btn-primary, .app-page a.btn-primary:not(.app-brand):not(.nav-link) { background: #bfdbfe; color: #1e40af; }
.app-page .btn-primary:hover, .app-page a.btn-primary:not(.app-brand):not(.nav-link):hover { background: #93c5fd; color: #1e3a8a; }
.app-page .btn-secondary, .app-page a.btn-secondary:not(.app-brand):not(.nav-link) { background: #fff; color: #475569; border: 1px solid #e2e8f0; }
.app-page .btn-secondary:hover, .app-page a.btn-secondary:not(.app-brand):not(.nav-link):hover { background: #f1f5f9; color: #0f172a; }
.app-page .btn-success, .app-page a.btn-success:not(.app-brand):not(.nav-link) { background: #a7f3d0; color: #065f46; }
.app-page .btn-success:hover { background: #6ee7b7; }
.app-page .btn-danger, .app-page a.btn-danger:not(.app-brand):not(.nav-link) { background: #fecdd3; color: #9f1239; }
.app-page .btn-danger:hover { background: #fda4af; }
.app-page main button.btn-secondary, .app-page > dialog button.btn-secondary { background: #fff !important; color: #475569 !important; border-color: #e2e8f0 !important; }
.app-page main button.btn-secondary:hover, .app-page > dialog button.btn-secondary:hover { background: #f1f5f9 !important; color: #0f172a !important; border-color: #e2e8f0 !important; }
.app-page main button.btn-success, .app-page > dialog button.btn-success { background: #a7f3d0 !important; color: #065f46 !important; border-color: #a7f3d0 !important; }
.app-page main button.btn-danger, .app-page > dialog button.btn-danger { background: #fecdd3 !important; color: #9f1239 !important; border-color: #fecdd3 !important; }
.app-page main button.btn-danger:hover, .app-page > dialog button.btn-danger:hover { background: #fda4af !important; border-color: #fda4af !important; }
.app-page .btn-sm { min-height: 32px; }
.app-page a.btn:not(.app-brand):not(.nav-link) { text-decoration: none; }
.btn-lg { padding: 0 16px; font-size: 13px; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 11px; }

/* TABLES */
.table-wrapper { overflow-x: auto; border-radius: 6px; border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead { background: #f8fafc; border-bottom: 1px solid var(--line); }
.data-table th { padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tbody tr:last-child td { border-bottom: none; }
.row-disabled { opacity: 0.6; }

/* TEXT UTILITIES */
.text-center { text-align: center; }
.text-muted { color: var(--muted); font-size: 13px; }
.font-semibold { font-weight: 600; }
.font-mono { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; }

/* STATUS BADGES */
.status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-active { background: #dcfce7; color: #166534; }
.status-inactive { background: #f3f4f6; color: #6b7280; }
.status-warning { background: #fef3c7; color: #b45309; }
.status-info { background: #dbeafe; color: #1e40af; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-info { background: #dbeafe; color: #1e40af; }

/* ALERTS */
.alert { padding: 14px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; border-left: 4px solid; }
.alert strong { font-weight: 600; }
.alert-success { background: #f0fdf4; color: #166534; border-color: var(--success); }
.alert-error { background: #fef2f2; color: #991b1b; border-color: var(--brand); }
.action-cell { white-space: nowrap; }

.app-page .olt-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.app-page .olt-list-toolbar h2 { margin: 0 0 4px; color: var(--ink); font-size: 18px; font-weight: 650; }
.app-page .olt-list-toolbar p { margin: 0; color: var(--muted); font-size: 12px; }
.app-page .olt-list-toolbar .btn { flex: 0 0 auto; }
.app-page .olt-list-toolbar .btn .olt-action-icon { width: 16px; height: 16px; }
.app-page .olt-table-wrap { overflow-x: auto; }
.app-page .olt-table { min-width: 930px; }
.app-page .olt-model-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; }
.app-page .olt-status-form { margin: 0; }
.app-page .olt-status-pill { min-height: 26px !important; padding: 3px 9px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--surface) !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 650 !important; cursor: pointer; }
.app-page .olt-status-pill.is-enabled { border-color: #86efac !important; background: #f0fdf4 !important; color: #15803d !important; }
.app-page .olt-status-pill.is-disabled { background: var(--canvas) !important; }
.app-page .olt-error-code { display: block; margin-top: 4px; color: var(--brand); font-size: 10px; }
.app-page .olt-row-actions { display: flex; align-items: center; gap: 5px; }
.app-page .olt-row-actions form { display: inline-flex; margin: 0; }
.app-page .olt-icon-action { display: inline-grid; place-items: center; width: 32px !important; height: 32px !important; min-height: 32px !important; flex: 0 0 32px; padding: 0 !important; border: 1px solid transparent !important; border-radius: 999px !important; background: transparent !important; color: var(--muted) !important; text-decoration: none; cursor: pointer; }
.app-page .olt-icon-action:hover:not(:disabled) { border-color: var(--line) !important; background: var(--canvas) !important; color: var(--ink) !important; }
.app-page .olt-icon-action.is-check { color: #2563eb !important; }
.app-page .olt-icon-action.is-list { color: #059669 !important; }
.app-page .olt-icon-action.is-danger { color: #dc2626 !important; }
.app-page .olt-icon-action:disabled { opacity: .38; cursor: not-allowed; }
.app-page .olt-action-icon { display: block; width: 17px; height: 17px; }
.app-page .olt-empty-row { padding: 28px !important; color: var(--muted) !important; text-align: center; }
.app-page .olt-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(88vh, 780px); padding: 24px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgb(15 23 42 / 28%); }
.app-page .olt-dialog::backdrop { background: rgb(15 23 42 / 55%); backdrop-filter: blur(2px); }
.app-page .olt-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.app-page .olt-dialog-head h2 { margin: 0 0 5px; color: var(--ink); font-size: 19px; }
.app-page .olt-dialog-head p { margin: 0; color: var(--muted); font-size: 12px; }
.app-page .olt-dialog .form-group[hidden], .app-page .olt-dialog [hidden] { display: none !important; }
.app-page .olt-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; grid-column: 1 / -1; margin-top: 6px; }
.app-page .olt-inventory-card { overflow: hidden; }
.app-page .olt-inventory-table { min-width: 640px; }
.app-page .olt-inventory-table pre { max-width: 700px; max-height: 240px; overflow: auto; white-space: pre-wrap; color: var(--muted); }
.app-page .olt-inventory-table summary { cursor: pointer; color: var(--brand); font-size: 12px; }
.sidebar-dark .olt-model-badge { background: #2a2a2a; color: #e7e7e7; border-color: #383838; }
.sidebar-dark .olt-status-pill.is-enabled { background: #12301f; color: #86efac; border-color: #27623e; }
.sidebar-dark .olt-status-pill.is-disabled { background: #2a2a2a; color: #b3b3b3; border-color: #383838; }
.sidebar-dark .olt-icon-action.is-check { color: #60a5fa !important; }
.sidebar-dark .olt-icon-action.is-list { color: #34d399 !important; }
.sidebar-dark .olt-icon-action.is-danger { color: #f87171 !important; }
.app-page .olt-dialog .btn-secondary { background: #e2e8f0 !important; color: var(--ink) !important; }
.app-page .olt-dialog .btn-secondary:hover { background: #cbd5e1 !important; }
.sidebar-dark .olt-dialog .btn-secondary { background: #383838 !important; color: #e7e7e7 !important; }
.sidebar-dark .olt-dialog .btn-secondary:hover { background: #444 !important; }
@media (max-width: 768px) {
    .app-page .olt-list-toolbar { align-items: flex-start; }
    .app-page .olt-dialog { padding: 18px; }
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) { main { padding: 28px 20px; } .form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 768px) { main { margin-left: 0; padding: 20px 16px; } .page-header h1 { font-size: 22px; } .form-grid { grid-template-columns: 1fr; } .data-table { font-size: 13px; } .data-table th, .data-table td { padding: 10px 12px; } .section-header { flex-direction: column; gap: 12px; } }

/* SHARED MANAGEMENT PAGE KIT (ops-*) - reused by Operator, Network, Customers, Billing... pages */
.app-page .ops-page { display: grid; gap: 18px; min-width: 0; }
.app-page .ops-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.app-page .ops-head h1 { margin: 0 0 5px !important; font-size: clamp(23px, 2.4vw, 30px) !important; }
.app-page .ops-head p { margin: 0; color: var(--muted); font-size: 12px; }
.app-page .ops-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-page .ops-notice { margin: 0; padding: 9px 12px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; color: #1e40af; font-size: 11px; font-weight: 580; }
.app-page .ops-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.app-page .ops-stat { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid #e8edf4; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgb(15 23 42 / 3%); }
.app-page .ops-stat span { color: var(--muted); font-size: 11px; font-weight: 600; }
.app-page .ops-stat strong { color: var(--ink); font-size: 24px; line-height: 1.1; }
.app-page .ops-stat small { color: var(--muted); font-size: 10px; }
.app-page .ops-stat.is-good strong { color: #059669; }
.app-page .ops-stat.is-warn strong { color: #d97706; }
.app-page .ops-stat.is-bad strong { color: var(--brand); }
.app-page .ops-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 18px; align-items: start; }
.app-page .ops-stack { display: grid; gap: 18px; min-width: 0; }
.app-page .ops-panel { min-width: 0; padding: 20px 22px; border: 1px solid #e8edf4; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgb(15 23 42 / 3%); }
.app-page .ops-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.app-page .ops-panel-head h2 { margin: 0 !important; font-size: 15px !important; }
.app-page .ops-panel-head small { color: var(--muted); font-size: 11px; }
.app-page .ops-form { display: grid; gap: 12px; }
.app-page .ops-form label { display: grid; gap: 5px; color: #334155; font-size: 11px; font-weight: 650; }
.app-page .ops-form input, .app-page .ops-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.app-page .ops-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-page .ops-table-wrap { overflow-x: auto; border: 1px solid #e8edf4; border-radius: 10px; }
.app-page .ops-table th { padding: 10px 14px; background: #f8fafc; color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.app-page .ops-table td { padding: 12px 14px; border-top: 1px solid #eef2f7; color: var(--ink); vertical-align: middle; }
.app-page .ops-table tbody tr:hover { background: #fafbfd; }
.app-page .ops-table .ops-empty { padding: 28px 14px; color: var(--muted); text-align: center; }
.app-page .ops-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-page .ops-avatar { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.app-page .ops-identity strong { display: block; font-size: 12px; }
.app-page .ops-identity small { display: block; color: var(--muted); font-size: 10px; }
.app-page .ops-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 10px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.app-page .ops-badge.is-active { background: #dcfce7; color: #166534; }
.app-page .ops-badge.is-suspended, .app-page .ops-badge.is-pending { background: #fef3c7; color: #92400e; }
.app-page .ops-badge.is-deactivated, .app-page .ops-badge.is-expired, .app-page .ops-badge.is-cancelled { background: #fee2e2; color: #991b1b; }
.app-page .ops-inline-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.app-page .ops-inline-form select { min-width: 118px; }
.app-page .ops-inline-form button { min-height: 34px !important; padding: 0 12px !important; font-size: 11px !important; }
.app-page .ops-role { margin: 0 0 10px; border: 1px solid #e8edf4; border-radius: 10px; background: #fff; }
.app-page .ops-role summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; }
.app-page .ops-role summary::-webkit-details-marker { display: none; }
.app-page .ops-role summary small { color: var(--muted); font-size: 10px; font-weight: 600; }
.app-page .ops-role[open] summary { border-bottom: 1px solid #eef2f7; }
.app-page .ops-role-body { display: grid; gap: 12px; padding: 14px; }
.app-page .ops-permissions { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.app-page .ops-permissions label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #eef2f7; border-radius: 8px; color: #334155; font-size: 11px; font-weight: 550; }
.app-page .ops-permissions input { width: auto !important; min-height: 0 !important; margin: 0; }
.app-page .ops-note { margin: 0; color: var(--muted); font-size: 11px; }
.app-page .ops-badge.is-online, .app-page .ops-badge.is-paid, .app-page .ops-badge.is-sent, .app-page .ops-badge.is-resolved, .app-page .ops-badge.is-enabled { background: #dcfce7; color: #166534; }
.app-page .ops-badge.is-offline, .app-page .ops-badge.is-failed, .app-page .ops-badge.is-overdue, .app-page .ops-badge.is-disabled { background: #fee2e2; color: #991b1b; }
.app-page .ops-badge.is-open, .app-page .ops-badge.is-queued, .app-page .ops-badge.is-draft { background: #fef3c7; color: #92400e; }
.app-page .ops-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.app-page .ops-form-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; }
.app-page .ops-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.app-page .ops-toggle { display: flex !important; align-items: center; gap: 9px; grid-auto-flow: column; }
.app-page .ops-toggle input { width: auto !important; min-height: 0 !important; margin: 0; }
.app-page .ops-filterbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 14px 16px; border: 1px solid #e8edf4; border-radius: 12px; background: #fff; }
.app-page .ops-filterbar label { display: grid; gap: 5px; color: #334155; font-size: 11px; font-weight: 650; }
.app-page .ops-filterbar button { min-height: 38px !important; }
.app-page button.ops-ghost { border-color: var(--line) !important; background: #fff !important; color: #334155 !important; }
.app-page .ops-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.app-page .ops-card { display: grid; align-content: start; gap: 8px; padding: 20px 22px; border: 1px solid #e8edf4; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgb(15 23 42 / 3%); }
.app-page .ops-card .ops-badge { justify-self: start; }
.app-page .ops-card h2 { margin: 0 !important; font-size: 15px !important; }
.app-page .ops-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.app-page .ops-map { position: relative; min-height: 380px; border: 1px solid #e8edf4; border-radius: 10px; background: #f8fafc radial-gradient(#cbd5e1 1px, transparent 1px) 0 0 / 22px 22px; }
.app-page .ops-map-node { position: absolute; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 1px #cbd5e1; }
.app-page .ops-map-node.is-warn { background: #d97706; }
.app-page .ops-map-node.is-bad { background: var(--brand); }
@media (max-width: 1100px) { .app-page .ops-layout { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .app-page .ops-form-row { grid-template-columns: 1fr; } .app-page .ops-inline-form { flex-wrap: wrap; } }
@media (max-width: 720px) { .app-page .table-wrap table, .app-page .ops-table { min-width: 0; width: 100%; table-layout: fixed; } }

.app-header { position: sticky; z-index: 30; top: 0; display: block; min-height: var(--header-height); margin-left: var(--sidebar-width); border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 96%); backdrop-filter: blur(10px); }
.app-header-inner { display: flex; min-height: var(--header-height); align-items: center; gap: 18px; padding: 10px 24px; }
.app-header-mobile { display: none; align-items: center; gap: 10px; }
.global-search { position: relative; display: flex; min-width: 180px; max-width: 580px; flex: 1 1 420px; align-items: center; }
.global-search input { width: 100%; min-height: 40px !important; padding: 9px 70px 9px 38px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: #f8fafc !important; color: var(--ink); font-size: 12px !important; }
.global-search-icon { position: absolute; left: 12px; z-index: 1; display: grid; width: 18px; height: 18px; place-items: center; color: var(--muted); pointer-events: none; }
.global-search-icon .sidebar-icon-svg { width: 16px; height: 16px; }
.global-search-shortcut { position: absolute; right: 10px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: #94a3b8; font-size: 10px; pointer-events: none; }
.global-search-results { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 35px rgb(15 23 42 / 14%); }
.global-search-results a { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 10px 12px; color: var(--ink) !important; text-decoration: none; }
.global-search-results a:hover { background: var(--brand-soft); }
.global-search-results strong, .global-search-results small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-results strong { font-size: 12px; }
.global-search-results small, .global-search-empty { margin: 0; color: var(--muted); font-size: 11px; }
.global-search-empty { padding: 12px; }
.app-header-actions { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: 10px; margin-left: auto; }
.header-icon-button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; text-decoration: none; }
.header-icon-button:hover { background: #f1f5f9; color: var(--brand); }
.header-icon-button .sidebar-icon-svg { width: 17px; height: 17px; }
.header-icon-button .theme-icon-sun { display: none; }
.sidebar-dark .header-icon-button .theme-icon-moon { display: none; }
.sidebar-dark .header-icon-button .theme-icon-sun { display: inline-flex; }
.app-header-account { display: flex; min-width: 0; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--line); }
.app-page > main:has(.business-dashboard),
.app-page > main:has(.dashboard-shell) { min-height: auto; }
.app-header-account .account-copy { display: block; }
.app-header-account .account-copy strong { max-width: 140px; }
.app-header-account form { margin-left: 4px; }
.app-header-account .account-logout { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px !important; }
.app-header-account .account-logout .sidebar-icon-svg { width: 15px; height: 15px; }
.app-header-actions form { margin: 0 !important; }
.app-header-actions .account-logout,
.app-header-actions .header-signout-preview { display: inline-flex; align-items: center; gap: 6px; min-height: 32px !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid var(--line) !important; border-radius: 6px !important; background: #fff !important; color: #334155 !important; font-size: 11px !important; font-weight: 500 !important; white-space: nowrap; }
.app-header-actions .account-logout:hover,
.app-header-actions .header-signout-preview:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; color: #0f172a !important; }
.app-header-actions .account-logout .sidebar-icon-svg,
.app-header-actions .header-signout-preview .sidebar-icon-svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
    .app-header { margin-left: 0; }
    .app-header-inner { gap: 10px; padding: 8px 14px; }
    .app-header-mobile { display: flex; flex: 0 0 auto; }
    .app-header-account .account-copy, .app-header-account .account-avatar, .app-header-account .preview-chip { display: flex; }
    .app-header-account .account-copy { flex-direction: column; }
    .app-header-account { margin-left: 0; }
    .app-header-account .account-logout { min-width: auto; }
    .global-search { flex-basis: 180px; }
}
@media (max-width: 560px) {
    :root { --header-height: 58px; }
    .app-header-inner { min-height: 58px; padding: 7px 10px; }
    .mobile-brand { max-width: 82px; overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .global-search { min-width: 0; flex-basis: auto; }
    .global-search input { min-height: 36px !important; padding-left: 32px !important; padding-right: 10px !important; font-size: 11px !important; }
    .global-search-shortcut { display: none; }
    .global-search-icon { left: 9px; }
    .app-header-actions { gap: 2px; }
    .header-icon-button { width: 28px; height: 32px; flex-basis: 28px; }
    .app-header-actions .account-logout > span,
    .app-header-actions .header-signout-preview > span { display: none; }
    .app-header-actions .account-logout,
    .app-header-actions .header-signout-preview { gap: 0; padding: 0 9px !important; }
    .app-header-account { flex: 0 1 auto; gap: 5px; padding-left: 6px; border-left: 1px solid var(--line); }
    .app-header-account .account-copy, .app-header-account .account-avatar, .app-header-account .preview-chip { display: none; }
    .app-header-account .account-logout { min-height: 28px !important; padding: 0 5px !important; font-size: 8px !important; }
    .app-header-account .account-logout .sidebar-icon-svg { width: 12px; height: 12px; }
    .app-header-account .account-logout > span { display: none; }
    .app-page main { padding: 16px 12px; }
    .app-page .page-header, .app-page .page-heading, .app-page .section-header { gap: 10px; }
    .app-page .page-header, .app-page .page-heading { flex-direction: column; }
    .app-page .metrics, .selfcare-page .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .app-page .metrics > div, .selfcare-page .summary > div { min-height: 72px; padding: 11px; }
    .app-page .metrics strong, .selfcare-page .summary dd { font-size: 17px; }
    .app-page .table-wrap, .app-page .ops-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
    .app-page .table-wrap table, .app-page .ops-table { min-width: 0; table-layout: fixed; font-size: 10px; }
    .app-page th, .app-page td, .app-page .ops-table th, .app-page .ops-table td { min-width: 0; padding: 8px 5px !important; overflow-wrap: anywhere; word-break: break-word; }
    .app-page th { font-size: 9px !important; white-space: normal; }
    .app-page .ops-table .ops-identity small { overflow-wrap: anywhere; }
    .app-page .form-grid, .app-page form.grid, .app-page .filters { grid-template-columns: 1fr; gap: 10px; }
    .app-page .form-grid input, .app-page .form-grid select, .app-page .form-grid textarea { width: 100%; max-width: 100%; }
    .app-page .dashboard-lower, .app-page .dashboard-detail-grid { grid-template-columns: 1fr; }
}

body.sidebar-dark .app-sidebar { border-right-color: #1e293b; background: #0f172a; color: #e2e8f0; }
body.sidebar-dark .app-sidebar .app-brand,
body.sidebar-dark .app-sidebar .nav-group summary,
body.sidebar-dark .app-sidebar .nav-link { color: #e2e8f0; }
body.sidebar-dark .app-sidebar .workspace-switcher,
body.sidebar-dark .app-sidebar .sidebar-collapse { border-color: #334155 !important; background: #1e293b !important; color: #e2e8f0 !important; }
body.sidebar-dark .app-sidebar .nav-search { border-color: #334155 !important; background: #1e293b !important; color: #f8fafc; }
body.sidebar-dark .app-sidebar .nav-section-heading,
body.sidebar-dark .app-sidebar .nav-group-icon,
body.sidebar-dark .app-sidebar .nav-icon,
body.sidebar-dark .app-sidebar .nav-group-chevron,
body.sidebar-dark .app-sidebar .app-brand small,
body.sidebar-dark .app-sidebar .workspace-switcher small { color: #94a3b8; }
body.sidebar-dark .app-sidebar .nav-group summary:hover,
body.sidebar-dark .app-sidebar .nav-link:hover { background: #1e293b; color: #f8fafc; }
body.sidebar-dark .app-sidebar .nav-group[open] > summary,
body.sidebar-dark .app-sidebar .nav-link.is-active { border-color: #7f1d1d; background: #450a0a; color: #fecaca; }
body.sidebar-dark .app-sidebar .nav-submenu { border-left-color: #334155; }
body.sidebar-dark .app-sidebar .sidebar-account { border-top-color: #334155; }
body.app-page .app-header .header-icon-button { min-height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #64748b !important; }
body.app-page .app-header .header-icon-button:hover { background: #f1f5f9 !important; color: #475569 !important; }
body.app-page .app-header .header-icon-button .sidebar-icon-svg { width: 16px; height: 16px; }
body.app-page .app-header .app-header-actions { gap: 0; }
body.app-page .app-header .header-icon-button { width: 32px; flex-basis: 32px; }
body.app-page .app-header .header-signout-preview,
body.app-page .app-header .account-logout { gap: 4px; margin-left: 8px !important; }
body.app-page .app-header .header-signout-preview .sidebar-icon-svg,
body.app-page .app-header .account-logout .sidebar-icon-svg { width: 13px; height: 13px; }
body.app-page .app-header .account-logout,
body.app-page .app-header .header-signout-preview { min-height: 32px !important; padding: 0 8px !important; border: 1px solid var(--line) !important; border-radius: 6px !important; background: #fff !important; color: #334155 !important; font-size: 11px !important; }
body.app-page .app-header .account-logout:hover,
body.app-page .app-header .header-signout-preview:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; color: #0f172a !important; }
body.app-page.has-sidebar > header.app-header { padding: 0 24px !important; }
body.app-page.has-sidebar > header.app-header .app-header-inner {
    height: 100%;
    min-height: inherit;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    align-items: center;
}
body.app-page .app-header .header-icon-button { width: 40px; height: 40px; flex-basis: 40px; }
body.app-page .app-header .header-icon-button .sidebar-icon-svg { width: 18px; height: 18px; }
body.app-page .app-header .header-signout-preview,
body.app-page .app-header .account-logout { min-height: 38px !important; padding: 0 12px !important; font-size: 12px !important; }
body.app-page .app-header .header-signout-preview .sidebar-icon-svg,
body.app-page .app-header .account-logout .sidebar-icon-svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
    body.app-page.has-sidebar > header.app-header { padding-right: 20px !important; padding-left: 20px !important; }
    body.app-page.has-sidebar > header.app-header .app-header-inner { padding-right: 4px; }
    body.app-page.has-sidebar > header.app-header .global-search { min-width: 0; }
    body.app-page.has-sidebar > header.app-header .app-header-actions { transform: translateY(1px); }
}
@media (max-width: 720px) {
    body.app-page.has-sidebar > header.app-header { padding-right: 16px !important; padding-left: 16px !important; }
    body.app-page.has-sidebar > header.app-header .app-header-inner { padding-right: 0; }
}
@media (max-width: 420px) {
    .app-header-inner { gap: 5px; padding-left: 8px; }
    .mobile-brand { max-width: 70px; }
    .app-header-actions { gap: 0; }
    body.app-page .app-header .header-icon-button { width: 36px; height: 40px; flex-basis: 36px; }
    body.app-page .app-header .header-signout-preview,
    body.app-page .app-header .account-logout { padding: 0 9px !important; }
}

/* Responsive content guardrails. Sidebar dimensions and page gutters remain unchanged. */
html, body { max-width: 100%; overflow-x: hidden; }
main, section, article, form, fieldset, .card, .table-wrap, .ops-page, .ops-panel, .ops-table-wrap { min-width: 0; max-width: 100%; }
img, svg, canvas, video { max-width: 100%; }
table { max-width: 100%; }

/* Equal content gutters: center the same 1060px working area used by selfcare-preview. */
@media (min-width: 721px) {
    body.app-page.has-sidebar > main {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

.app-sidebar .app-brand-row { padding-left: 0; }
.app-sidebar .app-brand { padding-left: 0; }
.app-sidebar .brand-logo { max-height: 54px; width: auto; max-width: 100%; }
.app-sidebar .sidebar-collapse, .app-sidebar .sidebar-collapse:hover, .app-sidebar .sidebar-collapse:focus-visible { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--muted) !important; }
.app-sidebar .sidebar-collapse:hover { color: var(--ink) !important; }
body.sidebar-collapsed .app-sidebar .brand-logo { width: 38px; height: 38px; max-height: 38px; }

body .app-sidebar .app-brand-row button.sidebar-collapse, body .app-sidebar .app-brand-row button.sidebar-collapse:hover, body .app-sidebar .app-brand-row button.sidebar-collapse:focus-visible { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--muted) !important; }
body .app-sidebar .app-brand-row button.sidebar-collapse:hover { color: var(--ink) !important; }

body .app-sidebar .sidebar-collapse > span { display: grid; width: 20px; height: 20px; place-items: center; }
body .app-sidebar .sidebar-collapse .sidebar-icon-svg { width: 20px; height: 20px; flex: none; }
body .app-sidebar .sidebar-collapse .sidebar-icon-svg { max-width: none; }
body .app-sidebar .sidebar-collapse > span { min-width: 20px; }

body.sidebar-collapsed .app-sidebar .app-brand { display: none; }
body.sidebar-collapsed .app-sidebar .app-brand-row { justify-content: center; }
body.sidebar-collapsed .app-sidebar .app-brand-row button.sidebar-collapse { position: static; display: grid; width: 38px; height: 38px; min-height: 38px !important; flex: 0 0 38px; border: 1px solid var(--line) !important; border-radius: 9px; background: #fff !important; color: var(--ink) !important; }
body.sidebar-collapsed .app-sidebar .sidebar-collapse .sidebar-icon-svg { display: none; }
body.sidebar-collapsed .app-sidebar .sidebar-collapse > span { position: relative; display: block; width: 18px; height: 2px; min-width: 0; border-radius: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

body.sidebar-collapsed .app-sidebar .app-brand-row button.sidebar-collapse { width: 100%; height: 58px; min-height: 58px !important; flex: 0 0 100%; border-radius: 8px; }
body.sidebar-collapsed .app-sidebar .app-brand-row { padding-right: 0; padding-left: 0; }

body.sidebar-collapsed .app-sidebar .app-brand-row button.sidebar-collapse { border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.sidebar-collapsed .app-sidebar .sidebar-collapse > span { width: 34px; height: 4px; border-radius: 4px; box-shadow: 0 -10px 0 currentColor, 0 10px 0 currentColor; }

@media (min-width: 901px) {
    .app-header { height: 76px; min-height: 76px; }
    .app-header-inner { height: 76px; min-height: 76px; padding-top: 0; padding-bottom: 0; }
}

@media (min-width: 901px) {
    .app-header, .app-header-inner { height: 90px; min-height: 90px; }
    .preview-toolbar { height: 58px !important; min-height: 58px !important; padding-top: 0 !important; padding-bottom: 0 !important; flex-wrap: nowrap !important; }
}

.app-sidebar { padding-top: 0; }
.app-sidebar .app-brand-row { position: sticky; z-index: 5; top: 0; box-sizing: border-box; height: 90px; min-height: 90px; flex: 0 0 90px; margin: 0 -10px; padding: 20px 14px 12px; border-bottom: 1px solid var(--line); background: #fff; }
body.sidebar-collapsed .app-sidebar .app-brand-row { margin: 0 -9px; padding-right: 9px; padding-left: 9px; }

.app-sidebar { border-right: 0; background: linear-gradient(var(--line), var(--line)) right 90px / 1px calc(100% - 90px) no-repeat #fff; }
.app-sidebar .nav-search-wrap { margin-top: 14px; }

html, body { overflow-x: clip !important; }
.app-sidebar { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow-x: hidden; }
.app-sidebar .app-brand-row { border-radius: 14px 14px 0 0; margin-right: -11px; margin-left: -11px; }

.app-page.has-sidebar > header.app-header { position: sticky !important; top: 0; z-index: 30; }

@media (min-width: 901px) {
    body.app-page.has-sidebar .app-sidebar { inset: 90px auto 0 0; }
    body.app-page.has-sidebar .app-sidebar .app-brand-row { position: fixed; z-index: 45; top: 0; left: 0; width: var(--sidebar-width); height: 90px; min-height: 90px; margin: 0; padding: 20px 14px 12px; border: 0; border-radius: 0; background: transparent; transition: width .3s ease; }
    body.app-page.has-sidebar.sidebar-collapsed .app-sidebar .app-brand-row { padding-right: 10px; padding-left: 10px; }
    body.app-page.has-sidebar .app-sidebar .nav-search-wrap { margin-top: 14px; }
    .app-page.has-sidebar > header.app-header { margin-left: 0; }
    .app-header-inner { padding-left: calc(var(--sidebar-width) + 24px); }
}

@media (min-width: 901px) { body.app-page.has-sidebar > header.app-header { margin-left: 0 !important; } }

@media (min-width: 901px) { body.app-page.has-sidebar .app-sidebar { inset: 98px auto 0 0; } }

@media (min-width: 901px) { body.app-page.has-sidebar .app-sidebar { inset: 90px auto 0 0; } }
.app-sidebar { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff; }

@media (min-width: 901px) {
    body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .app-brand-row button.sidebar-collapse { position: absolute; top: 45px; right: 0; width: 30px; height: 30px; min-height: 30px !important; flex: none; transform: translate(50%, -50%); }
}

@media (min-width: 901px) {
    body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .app-brand-row button.sidebar-collapse { top: 90px; right: 0; z-index: 50; width: 26px; height: 26px; min-height: 26px !important; border-radius: 50%; background: #fff !important; transform: translate(12.5px, -50%); }
}

@media (min-width: 901px) { body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .app-brand-row button.sidebar-collapse { transform: translate(13.5px, -50%); } }

@media (min-width: 901px) { body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .app-brand-row button.sidebar-collapse { top: 45px; } }

@media (min-width: 901px) { body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .app-brand-row button.sidebar-collapse { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 28px !important; padding: 0 !important; transform: translate(14px, -50%); }
 body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .sidebar-collapse > span { display: flex; width: 20px; height: 20px; margin: 0; align-items: center; justify-content: center; } }

@media (min-width: 901px) { body.app-page.has-sidebar .app-sidebar .app-brand-row { padding-top: 0; padding-bottom: 0; align-items: center; } body.app-page.has-sidebar .app-sidebar .app-brand-row .app-brand { display: flex; align-items: center; } }

@media (min-width: 901px) { body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .nav-search-wrap { position: sticky; top: 0; z-index: 6; margin: 0 0 4px; padding: 14px 0 6px; background: #fff; } body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .nav-search-shortcut { top: 22px; } }

@media (min-width: 901px) { body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .nav-search-wrap { padding-bottom: 12px; margin-bottom: 0; } }

/* PPPoE All Clients */
.app-page .pc-page { gap: 16px; }
.app-page .pc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.app-page .pc-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-page .pc-title-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; color: var(--brand); }
.app-page .pc-title-icon svg { width: 34px; height: 34px; }
.app-page .pc-title h1 { margin: 0 0 3px !important; font-size: 22px !important; }
.app-page .pc-title p { margin: 0; color: var(--muted); font-size: 12px; }
.app-page .pc-cards { display: grid; flex: 1 1 520px; max-width: 700px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.app-page .pc-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid #e8edf4; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgb(15 23 42 / 3%); }
.app-page .pc-card small { display: block; font-size: 11px; font-weight: 650; }
.app-page .pc-card strong { display: block; color: var(--ink); font-size: 20px; line-height: 1.15; }
.app-page .pc-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 8px #fff, 0 0 0 0 currentColor; opacity: .9; }
.app-page .pc-card.is-online { color: #16a34a; } .app-page .pc-card.is-offline { color: #64748b; } .app-page .pc-card.is-expired { color: #dc2626; } .app-page .pc-card.is-due { color: #f59e0b; }
.app-page .pc-card.is-online .pc-dot, .app-page .pc-card.is-offline .pc-dot, .app-page .pc-card.is-expired .pc-dot, .app-page .pc-card.is-due .pc-dot { background: color-mix(in srgb, currentColor 18%, #fff); box-shadow: inset 0 0 0 9px color-mix(in srgb, currentColor 18%, #fff), inset 0 0 0 14px currentColor; }
.app-page .pc-panel { display: grid; gap: 14px; padding: 16px; }
.app-page .pc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.app-page .pc-search { flex: 1 1 240px; }
.app-page .pc-search input, .app-page .pc-select select, .app-page .pc-select input { width: 100%; min-height: 40px !important; font-size: 12px !important; }
.app-page .pc-select { display: grid; flex: 0 1 150px; gap: 2px; min-width: 110px; color: #64748b; font-size: 10px; font-weight: 650; }
.app-page .pc-advanced { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 4px; }
.app-page .pc-advanced[hidden] { display: none; }
.app-page .pc-btn { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.app-page .pc-btn svg { width: 16px; height: 16px; max-width: none; }
.app-page .pc-btn.is-outline { border-color: #fca5a5; color: var(--brand); }
.app-page .pc-btn.is-primary { border-color: var(--brand); background: #fff; color: var(--brand); }
.app-page .pc-btn.is-solid { border-color: var(--brand); background: var(--brand); color: #fff; }
.app-page .pc-link { color: var(--brand); font-size: 12px; font-weight: 650; }
.app-page .pc-quick-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.app-page .pc-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.app-page .pc-chip { padding: 7px 13px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; font-size: 12px; font-weight: 700; text-decoration: none; }
.app-page .pc-chip.is-online { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; } .app-page .pc-chip.is-expired { color: #b91c1c; background: #fef2f2; border-color: #fecaca; } .app-page .pc-chip.is-due { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.app-page .pc-chip.is-all.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-page .pc-chip.is-active { box-shadow: 0 0 0 2px rgb(15 23 42 / 12%); }
.app-page .pc-top-actions { display: flex; gap: 10px; }
.app-page .pc-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #eef2f7; font-size: 12px; }
.app-page .pc-selected { margin-right: 6px; color: var(--muted); }
.app-page .pc-btn.is-bulk { min-height: 34px; padding: 0 13px; color: #475569; }
.app-page .pc-btn.is-bulk:disabled { opacity: .55; cursor: not-allowed; }
.app-page .pc-table-wrap { overflow: visible !important; border: 1px solid #e8edf4; border-radius: 10px; }
.app-page .pc-table { width: 100%; min-width: 0 !important; table-layout: auto !important; border-collapse: collapse; font-size: 11px; }
.app-page .pc-table th { padding: 8px 6px !important; background: #f8fafc; color: #475569; font-size: 10px; font-weight: 700; text-align: left; }
.app-page .pc-table td { padding: 7px 6px !important; border-top: 1px solid #eef2f7; color: var(--ink); vertical-align: middle; overflow-wrap: anywhere; }
.app-page .pc-table th:first-child { border-top-left-radius: 10px; } .app-page .pc-table th:last-child { border-top-right-radius: 10px; }
@media (max-width: 1500px) { .app-page .pc-table th:nth-child(14), .app-page .pc-table td:nth-child(14), .app-page .pc-table th:nth-child(2), .app-page .pc-table td:nth-child(2) { display: none; } }
@media (max-width: 1320px) { .app-page .pc-table th:nth-child(8), .app-page .pc-table td:nth-child(8) { display: none; } }
@media (max-width: 1100px) { .app-page .pc-table th:nth-child(5), .app-page .pc-table td:nth-child(5), .app-page .pc-table th:nth-child(11), .app-page .pc-table td:nth-child(11) { display: none; } }
@media (max-width: 1180px) {
  .app-page .pc-table { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; font-size: 10px; }
  .app-page .pc-table th:nth-child(1), .app-page .pc-table td:nth-child(1), .app-page .pc-table th:nth-child(5), .app-page .pc-table td:nth-child(5), .app-page .pc-table th:nth-child(n+8):nth-child(-n+11), .app-page .pc-table td:nth-child(n+8):nth-child(-n+11), .app-page .pc-table th:nth-child(14), .app-page .pc-table td:nth-child(14) { display: none !important; }
  .app-page .pc-table th:nth-child(2), .app-page .pc-table td:nth-child(2), .app-page .pc-table th:nth-child(3), .app-page .pc-table td:nth-child(3), .app-page .pc-table th:nth-child(4), .app-page .pc-table td:nth-child(4), .app-page .pc-table th:nth-child(6), .app-page .pc-table td:nth-child(6), .app-page .pc-table th:nth-child(7), .app-page .pc-table td:nth-child(7), .app-page .pc-table th:nth-child(12), .app-page .pc-table td:nth-child(12), .app-page .pc-table th:nth-child(13), .app-page .pc-table td:nth-child(13), .app-page .pc-table th:nth-child(15), .app-page .pc-table td:nth-child(15) { display: table-cell !important; }
  .app-page .pc-table th:nth-child(2) { width: 6%; } .app-page .pc-table th:nth-child(3) { width: 15%; } .app-page .pc-table th:nth-child(4) { width: 15%; } .app-page .pc-table th:nth-child(6) { width: 12%; }
  .app-page .pc-table th:nth-child(7) { width: 15%; } .app-page .pc-table th:nth-child(12) { width: 12%; } .app-page .pc-table th:nth-child(13) { width: 15%; }
  .app-page .pc-table th.pc-actions-h, .app-page .pc-table td.pc-actions { width: 34px !important; min-width: 0 !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .app-page .pc-table th, .app-page .pc-table td { padding: 7px 4px !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; word-break: break-word; text-overflow: clip !important; }
  .app-page .pc-table th { font-size: 9px; }
  .app-page .pc-table td small { font-size: 9px; }
  .app-page .pc-status { min-width: 0; padding: 3px 6px; font-size: 9px; }
  .app-page .pc-menu summary { width: 26px; height: 26px; }
  .app-page .pc-bulk, .app-page .pc-selected { display: none !important; }
}
.app-page .pc-table td small { display: block; color: var(--muted); font-size: 10px; }
.app-page .pc-table tbody tr:hover { background: #fafbfd; }
.app-page .pc-table .pc-check { width: 34px; text-align: center; }
.app-page .pc-status { display: inline-flex; min-width: 62px; justify-content: center; padding: 4px 10px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; }
.app-page .pc-status.is-online { background: #16a34a; } .app-page .pc-status.is-offline { background: #94a3b8; } .app-page .pc-status.is-expired { background: #dc2626; } .app-page .pc-status.is-disabled { background: #6d28d9; } .app-page .pc-status.is-unknown, .app-page .pc-status.is-unassigned { background: #d97706; }
.app-page .pc-days { display: inline-block; min-width: 26px; padding: 3px 6px; border-radius: 6px; text-align: center; font-weight: 700; }
.app-page .pc-days.is-good { background: #dcfce7; color: #166534; } .app-page .pc-days.is-warn { background: #fef3c7; color: #92400e; } .app-page .pc-days.is-bad { background: #fee2e2; color: #991b1b; }
.app-page .pc-due { color: #dc2626; font-weight: 700; }
.app-page .pc-rx { white-space: nowrap; } .app-page .pc-rx.is-stale { color: #64748b; }
.app-page .pc-muted { color: var(--muted); }
.app-page .pc-actions { text-align: center; }
.app-page .pc-menu { position: relative; display: inline-block; }
.app-page .pc-menu summary { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 6px; font-size: 18px; line-height: 1; cursor: pointer; list-style: none; }
.app-page .pc-menu summary::-webkit-details-marker { display: none; }
.app-page .pc-menu summary:hover, .app-page .pc-menu[open] summary { background: #f1f5f9; }
.app-page .pc-menu-list { position: absolute; z-index: 40; top: 30px; right: 0; display: grid; min-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgb(15 23 42 / 14%); text-align: left; }
.app-page .pc-menu-list a, .app-page .pc-menu-list button { display: block; width: 100%; min-height: 0 !important; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.app-page .pc-menu-list form { margin: 0; }
.app-page .pc-menu-list a:hover, .app-page .pc-menu-list button:hover:not(:disabled) { background: #f1f5f9; }
.app-page .pc-menu-list button:disabled { color: #94a3b8; cursor: not-allowed; }
.app-page .pc-menu-list .is-danger { color: #dc2626; }
.app-page .pc-table tbody tr:nth-last-child(-n+3) .pc-menu-list { top: auto; bottom: 30px; }
.app-page .pc-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: #475569; font-size: 12px; }
.app-page .pc-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-page .pc-pg { display: inline-grid; min-width: 30px; height: 30px; place-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 12px; text-decoration: none; }
.app-page .pc-pg.is-current { border-color: var(--brand); background: var(--brand); color: #fff; }
.app-page .pc-pg.is-disabled { color: #cbd5e1; }
.app-page .pc-gap { color: var(--muted); }
.app-page .pc-per-page { margin: 0 0 0 8px; } .app-page .pc-per-page select { min-height: 30px !important; padding: 0 8px; font-size: 12px; }
.app-page .pc-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.app-page .pc-info-card { padding: 16px 18px; }
.app-page .pc-info-card h2 { margin: 0 0 10px !important; font-size: 14px !important; }
.app-page .pc-info-card dl { display: grid; gap: 7px; margin: 0; font-size: 12px; }
.app-page .pc-info-card dl > div { display: flex; justify-content: space-between; gap: 10px; }
.app-page .pc-info-card dt { color: var(--muted); } .app-page .pc-info-card dd { margin: 0; font-weight: 700; text-align: right; }
.app-page .pc-info-card dt::after { content: " :"; }
.app-page .pc-info-card dt { white-space: nowrap; flex: 0 0 auto; }
.app-page .pc-info-card dd { min-width: 0; overflow-wrap: anywhere; }
.app-page .pc-note { padding: 10px 14px; border: 1px solid #e0e7ff; border-radius: 8px; background: #f5f7ff; }
.app-page .pc-toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; margin: 0; padding: 10px 14px; border-radius: 8px; background: #0f172a; color: #fff; font-size: 12px; }
@media (max-width: 1100px) { .app-page .pc-cards { max-width: none; flex-basis: 100%; } .app-page .pc-info { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .app-page .pc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-page .pc-page .pc-btn { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.app-page .pc-page .pc-btn.is-outline { border-color: #fca5a5; color: var(--brand); }
.app-page .pc-page .pc-btn.is-primary { border-color: var(--brand); color: var(--brand); }
.app-page .pc-page .pc-btn.is-solid { border-color: var(--brand); background: var(--brand); color: #fff; }
.app-page .pc-page .pc-btn.is-bulk { color: #475569; }
.app-page .pc-page .pc-btn.is-bulk:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }
.app-page .pc-page .pc-chip { color: #475569; }
.app-page .pc-page .pc-chip.is-online { color: #15803d; } .app-page .pc-page .pc-chip.is-expired { color: #b91c1c; } .app-page .pc-page .pc-chip.is-due { color: #b45309; }
.app-page .pc-page .pc-chip.is-all.is-active { color: #fff; }
.app-page .pc-page a.pc-pg { color: var(--ink); }
.app-page .pc-page a.pc-pg.is-current { color: #fff; }
.app-page .pc-page > .pc-top, .app-page .pc-page > .dashboard-preview-notice, .app-page .pc-page > .pc-note, .app-page .pc-page > .alert { width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
.app-page .pc-page button.pc-btn, .app-page .pc-page .pc-menu-list button, .app-page .pc-page .pc-per-page button { padding: 0 14px !important; border: 1px solid var(--line) !important; background: #fff !important; color: var(--ink) !important; font-weight: 700 !important; }
.app-page .pc-page button.pc-btn.is-outline { border-color: #fca5a5 !important; color: var(--brand) !important; }
.app-page .pc-page button.pc-btn.is-bulk { min-height: 34px !important; padding: 0 13px !important; color: #475569 !important; }
.app-page .pc-page button.pc-btn.is-bulk:not(:disabled):hover { border-color: var(--brand) !important; background: #fff !important; color: var(--brand) !important; }
.app-page .pc-page button.pc-btn:disabled { opacity: .55; cursor: not-allowed; }
.app-page .pc-page .pc-menu-list button { min-height: 0 !important; padding: 7px 10px !important; border: 0 !important; background: transparent !important; font-weight: 600 !important; }
.app-page .pc-page .pc-menu-list button:hover:not(:disabled) { background: #f1f5f9 !important; color: var(--ink) !important; }
.app-page .pc-page .pc-menu-list button:disabled { color: #94a3b8 !important; opacity: 1; }
.app-page .pc-page .pc-menu-list .is-danger { color: #dc2626 !important; }
.app-page .pc-page .pc-advanced button.pc-btn { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.app-page .pc-page { grid-template-columns: minmax(0, 1fr); }
.app-page .pc-panel { grid-template-columns: minmax(0, 1fr); }
.app-page .pc-page > .pc-info { width: 100%; box-sizing: border-box; }
.app-page .pc-page .pc-menu-list a { color: var(--ink); } .app-page .pc-page .pc-menu-list a:hover { color: var(--brand); }

.app-page .pc-table th { position: relative; }
.app-page .pc-resize { position: absolute; top: 0; right: -4px; bottom: 0; z-index: 2; width: 9px; cursor: col-resize; user-select: none; touch-action: none; }
.app-page .pc-resize::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 6px; width: 1px; background: #cbd5e1; }
.app-page .pc-resize:hover::after, .app-page .pc-resize.is-active::after { width: 2px; background: var(--brand); }
.app-page .pc-table.is-resized { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.app-page .pc-table-wrap.is-resized { overflow: visible !important; }
body.pc-resizing { cursor: col-resize; user-select: none; }
.app-page .pc-user { color: var(--brand); text-decoration: none; } .app-page .pc-user:hover { text-decoration: underline; }
@media (max-width: 1180px) { .app-page .pc-resize { display: none; } .app-page .pc-table.is-resized { table-layout: auto !important; width: 100% !important; min-width: 0 !important; } }

.app-page .pc-table-wrap { border: 1px solid #e8edf4; }
.app-page .pc-table th, .app-page .pc-table td { border: 0; }
.app-page .pc-table td { border-top: 1px solid #eef2f7; }
.app-page .pc-table th.pc-actions-h, .app-page .pc-table td.pc-actions { width: 68px; min-width: 68px; max-width: 68px; box-sizing: border-box; text-align: center; }
.app-page .pc-table th.pc-check, .app-page .pc-table td.pc-check { width: 34px; min-width: 34px; max-width: 34px; box-sizing: border-box; }
@media (min-width: 1181px) {
  .app-page .pc-table th, .app-page .pc-table td, .app-page .pc-table td small, .app-page .pc-table td .pc-rx { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .app-page .pc-table td.pc-actions { overflow: visible; }
  .app-page .pc-table th .pc-resize { right: 0; }
  .app-page .pc-table { table-layout: fixed !important; width: 100%; }
  .app-page .pc-table th:nth-child(3) { width: 11%; } .app-page .pc-table th:nth-child(4) { width: 9%; } .app-page .pc-table th:nth-child(5) { width: 9%; }
  .app-page .pc-table th:nth-child(6) { width: 8%; } .app-page .pc-table th:nth-child(7) { width: 9%; } .app-page .pc-table th:nth-child(8) { width: 6%; }
  .app-page .pc-table th:nth-child(9) { width: 8%; } .app-page .pc-table th:nth-child(10) { width: 6%; } .app-page .pc-table th:nth-child(11) { width: 8%; }
  .app-page .pc-table th:nth-child(12) { width: 8%; } .app-page .pc-table th:nth-child(13) { width: 12%; } .app-page .pc-table th:nth-child(14) { width: 8%; }
  .app-page .pc-table th:nth-child(2) { width: 30px; }
}
.app-page .pc-h-short { display: none; }
@media (max-width: 1180px) { .app-page .pc-h-full { display: none; } .app-page .pc-h-short { display: inline; } }
.app-page .pc-page:not(.pc-detail) > .pc-info { grid-template-columns: minmax(0, 420px); }

.app-page .pc-table .pc-status, .app-page .pc-table .pc-status[class] { min-width: 0; padding: 0; border-radius: 0; background: transparent !important; color: var(--ink) !important; font-size: inherit; font-weight: 600; justify-content: flex-start; }

.app-page .pc-table .pc-days, .app-page .pc-table .pc-days[class] { min-width: 0; padding: 0; border-radius: 0; background: transparent !important; color: var(--ink) !important; font-weight: 600; }
.app-page .pc-table .pc-days.is-bad { color: #dc2626 !important; }
.app-page .pc-table .pc-rx { font-weight: 600; }
.app-page .pc-table .pc-rx.is-good { color: #16a34a !important; } .app-page .pc-table .pc-rx.is-bad { color: #dc2626 !important; }
.app-page .pc-detail .pc-rx.is-good { color: #16a34a; font-weight: 600; } .app-page .pc-detail .pc-rx.is-bad { color: #dc2626; font-weight: 600; }
.app-page .pc-rx-line { display: inline-flex; align-items: center; gap: 8px; }
.app-page .pc-onu-refresh-form { margin: 0; }
.app-page main .pc-detail .pc-onu-refresh { display: grid; width: 30px; height: 30px; min-height: 30px !important; place-items: center; padding: 0 !important; border-radius: 50% !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #475569 !important; cursor: pointer; }
.app-page main .pc-detail .pc-onu-refresh:hover:not(:disabled) { background: #f1f5f9 !important; }
.app-page main .pc-detail .pc-onu-refresh:disabled { cursor: not-allowed; opacity: .55; }
.app-page main .pc-info-card dd a { color: #2563eb !important; }
.app-page .pc-traffic canvas { display: block; width: 100%; height: 120px; }
.app-page .pc-traffic-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; }
.app-page .pc-traffic-legend span { display: inline-flex; align-items: center; gap: 6px; }
.app-page .pc-traffic-legend i { width: 10px; height: 10px; border-radius: 50%; }
.app-page .pc-traffic-legend .is-down i { background: #16a34a; } .app-page .pc-traffic-legend .is-up i { background: #2563eb; }
.app-page .pc-traffic small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.app-page .pc-link-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.app-page .pc-link-state i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.app-page .pc-link-state.is-up { color: #16a34a; } .app-page .pc-link-state.is-down { color: #dc2626; }
.app-page .pc-secret summary { cursor: pointer; color: #2563eb; list-style: none; }
.app-page .pc-secret summary::-webkit-details-marker { display: none; }
.app-page .pc-secret[open] summary { display: none; }
.app-page .pc-card.is-manual { color: #7c3aed; } .app-page .pc-card.is-manual .pc-dot { background: color-mix(in srgb, currentColor 18%, #fff); box-shadow: inset 0 0 0 9px color-mix(in srgb, currentColor 18%, #fff), inset 0 0 0 14px currentColor; }
.app-page .pc-page .pc-chip.is-manual { color: #6d28d9; }
.app-page .pc-renew { position: relative; }
.app-page .pc-renew > summary { list-style: none; cursor: pointer; }
.app-page .pc-renew > summary::-webkit-details-marker { display: none; }
.app-page .pc-renew-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 12px; min-width: 260px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgb(15 23 42 / 16%); }
.app-page .pc-renew-menu form { display: grid; gap: 8px; margin: 0; }
.app-page .pc-renew-manual { padding-top: 10px; border-top: 1px solid #e2e8f0; }
.app-page .pc-renew-menu label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.app-page .pc-renew-menu small { color: var(--muted); font-size: 11px; }
.app-page .pc-mac-form { margin: 0; }
.app-page .pc-table .pc-status.is-online { color: #16a34a !important; }
.app-page .pc-table .pc-status.is-offline { color: #475569 !important; }
.app-page .pc-table .pc-status.is-expired { color: #dc2626 !important; }
.app-page .pc-table .pc-status.is-disabled { color: #ea580c !important; }
.app-page .pc-table .pc-status.is-unknown, .app-page .pc-table .pc-status.is-unassigned { color: #92400e !important; }
.app-page .pc-text-status { font-weight: 700; }
.app-page main .pc-info-card .pc-text-status.is-active { color: #16a34a; } .app-page main .pc-info-card .pc-text-status.is-pending { color: #d97706; } .app-page main .pc-info-card .pc-text-status.is-left { color: #475569; } .app-page main .pc-info-card .pc-text-status.is-expired { color: #dc2626; } .app-page main .pc-info-card .pc-text-status.is-disabled { color: #ea580c; }
.app-page .pc-status.is-active { background: #16a34a; } .app-page .pc-status.is-pending { background: #d97706; } .app-page .pc-status.is-left { background: #64748b; }
.app-page .pc-table .pc-status.is-active { color: #16a34a !important; } .app-page .pc-table .pc-status.is-pending { color: #d97706 !important; } .app-page .pc-table .pc-status.is-left { color: #475569 !important; }
.app-page .pc-table a.pc-user, .app-page .pc-table a.pc-user:visited { color: #2563eb !important; text-decoration: none; }
.app-page .pc-table a.pc-user:hover { color: #1d4ed8 !important; text-decoration: underline; }

.app-page .pc-table tbody tr { transition: background-color .12s ease; }
.app-page .pc-table tbody tr:hover, .app-page .pc-table tbody tr:hover > td { background-color: #eaf2ff !important; }
.app-page .pc-table tbody tr:has(details[open]), .app-page .pc-table tbody tr:has(details[open]) > td { background-color: #eaf2ff !important; }

/* PPPoE table tighter rows */
.app-page .pc-table td { padding-top: 3px !important; padding-bottom: 3px !important; line-height: 1.25 !important; }
.app-page .pc-table th { padding-top: 6px !important; padding-bottom: 6px !important; }
.app-page .pc-table td.pc-actions .pc-menu-btn, .app-page .pc-table td.pc-actions summary { margin-top: 0; margin-bottom: 0; }

/* PPPoE panel larger text */
.app-page .pc-panel { font-size: 14px; }
.app-page .pc-panel .pc-search input, .app-page .pc-panel .pc-select select, .app-page .pc-panel .pc-select input { font-size: 14px !important; }
.app-page .pc-panel .pc-select span, .app-page .pc-panel label { font-size: 13px !important; }
.app-page .pc-panel .pc-btn, .app-page .pc-panel .pc-chip, .app-page .pc-panel .pc-link, .app-page .pc-panel .pc-bulk, .app-page .pc-panel .pc-bulk strong, .app-page .pc-panel .pc-selected { font-size: 13px !important; }
.app-page .pc-panel .pc-table, .app-page .pc-panel .pc-table td, .app-page .pc-panel .pc-table td * { font-size: 13px !important; }
.app-page .pc-panel .pc-table th { font-size: 12px !important; }
.app-page .pc-panel .pc-menu-list a, .app-page .pc-panel .pc-menu-list button { font-size: 13px !important; }
.app-page .pc-panel .pc-footer, .app-page .pc-panel .pc-footer select, .app-page .pc-panel .pc-pg { font-size: 13.5px !important; }
.app-page .pc-panel .pc-table td.pc-actions summary span { font-size: 18px !important; }
@media (min-width: 1181px) {
  .app-page .pc-table th:nth-child(3) { width: 14%; } .app-page .pc-table th:nth-child(4) { width: 10%; } .app-page .pc-table th:nth-child(5) { width: 12%; }
  .app-page .pc-table th:nth-child(6) { width: 8%; } .app-page .pc-table th:nth-child(7) { width: 9%; } .app-page .pc-table th:nth-child(8) { width: 7%; }
  .app-page .pc-table th:nth-child(9) { width: 10%; } .app-page .pc-table th:nth-child(10) { width: 6%; } .app-page .pc-table th:nth-child(11) { width: 10%; }
  .app-page .pc-table th:nth-child(12) { width: 10%; } .app-page .pc-table th:nth-child(13) { width: 11%; } .app-page .pc-table th:nth-child(14) { width: 10%; }
  .app-page .pc-panel .pc-table th, .app-page .pc-panel .pc-table td { padding-left: 4px !important; padding-right: 4px !important; }
}
.app-page .pc-table th:nth-child(5), .app-page .pc-table td:nth-child(5) { display: none !important; }

.app-page .pc-table th .pc-sort { display: inline-flex; max-width: 100%; align-items: center; gap: 3px; color: inherit !important; text-decoration: none !important; white-space: nowrap; }
.app-page .pc-table th .pc-sort:hover { color: var(--brand) !important; }
.app-page .pc-table th .pc-sort-indicator { color: #94a3b8; font-size: 10px; }
.app-page .pc-table th[aria-sort="ascending"] .pc-sort-indicator,
.app-page .pc-table th[aria-sort="descending"] .pc-sort-indicator { color: var(--brand); }
.app-page .pc-table th.pc-last-logout-h .pc-resize { right: auto; left: 0; }
.app-page .pc-table th.pc-last-logout-h .pc-sort { margin-left: 10px; }
.app-page .pc-table th { text-transform: none !important; }

:root { --sidebar-width: 220px; }
@media (max-width: 900px) { :root { --sidebar-width: 220px; } }
@media (max-width: 720px) { .app-sidebar { width: min(84vw, 220px); } }
.app-sidebar .nav-link, .app-sidebar .nav-group-title { font-size: .9rem !important; }
.app-sidebar .nav-link.nav-child { font-size: .85rem !important; font-weight: 400 !important; }
.app-sidebar .nav-link.nav-child.is-active { font-weight: 500 !important; }
.app-sidebar .nav-submenu .nav-link.nav-child { font-size: 14px !important; font-weight: 700 !important; }
.app-sidebar .nav-group-title { text-transform: none !important; letter-spacing: normal; }
body.sidebar-collapsed .app-sidebar .nav-icon,
body.sidebar-collapsed .app-sidebar .nav-group-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}
body.sidebar-collapsed .app-sidebar .nav-icon .sidebar-icon-svg,
body.sidebar-collapsed .app-sidebar .nav-group-icon .sidebar-icon-svg {
    width: 25px;
    height: 25px;
}
body.sidebar-collapsed .app-sidebar {
    --sidebar-icon-center: 50%;
}
body.sidebar-collapsed .app-sidebar .app-brand-row {
    position: relative;
}
body.app-page.has-sidebar.sidebar-collapsed .app-sidebar .app-brand-row .app-brand {
    display: none !important;
}
body.sidebar-collapsed .app-sidebar .app-brand-row button.sidebar-collapse {
    position: absolute;
    inset: 0 2px 0 0;
    display: block;
    width: auto;
    height: 100%;
    min-height: 0 !important;
    flex: none;
}
body.sidebar-collapsed .app-sidebar .sidebar-collapse > span {
    position: absolute;
    top: 50%;
    left: var(--sidebar-icon-center);
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: #dc2626;
    box-shadow: none;
    transform: translate(-50%, -50%);
}
body.sidebar-collapsed .app-sidebar .sidebar-collapse > span::before,
body.sidebar-collapsed .app-sidebar .sidebar-collapse > span::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: inherit;
    background: #dc2626;
    content: "";
}
body.sidebar-collapsed .app-sidebar .sidebar-collapse > span::before { top: -8px; }
body.sidebar-collapsed .app-sidebar .sidebar-collapse > span::after { bottom: -8px; }
body.sidebar-collapsed .app-sidebar .nav-link {
    position: relative;
    width: calc(100% + 18px);
    margin-right: -9px;
    margin-left: -9px;
}
body.sidebar-collapsed .app-sidebar .nav-group > summary {
    position: relative;
    width: calc(100% + 18px);
    margin-right: -9px;
    margin-left: -9px;
}
body.sidebar-collapsed .app-sidebar .nav-icon,
body.sidebar-collapsed .app-sidebar .nav-group-icon {
    position: absolute;
    left: var(--sidebar-icon-center);
    transform: translateX(-50%);
}
.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-link:hover .nav-label,
.app-sidebar .nav-group summary:hover,
.app-sidebar .nav-group[open] > summary:hover,
.app-sidebar .nav-group summary:hover .nav-group-icon,
.app-sidebar .nav-group summary:hover .nav-group-title {
    color: #dc2626 !important;
}
body.sidebar-collapsed .app-sidebar .sidebar-collapse,
body.sidebar-collapsed .app-sidebar .sidebar-collapse:hover {
    color: #dc2626 !important;
}
.app-header,
.app-header a,
.app-header button,
.app-header input,
.app-header strong,
.app-header small,
.app-header .mobile-brand,
.app-header .preview-chip,
.app-header .global-search-shortcut,
.app-header .account-logout {
    font-size: .875rem !important;
    font-weight: 400 !important;
}
@media (min-width: 901px) {
    :root { --header-height: 70px; }
    .app-header, .app-header-inner { height: 70px; min-height: 70px; }
    .app-header-inner { padding-right: 18px; }
    body.app-page.has-sidebar .app-header-inner .global-search {
        width: 240px;
        max-width: 280px;
        flex: 0 1 240px;
        margin-left: 0;
    }
    body.app-page.has-sidebar .app-header-inner .app-header-actions { margin-left: 0; }
    body.app-page.has-sidebar > header.app-header { border-bottom: 0 !important; }
    body.app-page.has-sidebar > header.app-header::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: calc(var(--sidebar-width) - 1px);
        border-bottom: 1px solid var(--line);
        content: "";
        pointer-events: none;
    }
    body.app-page.has-sidebar .app-sidebar { inset: 70px auto 0 0; }
    body.app-page.has-sidebar .app-sidebar .app-brand-row {
        height: 70px;
        min-height: 70px;
        flex-basis: 70px;
    }
    body.app-page.has-sidebar .app-sidebar { background-size: 1px calc(100% - 70px); background-position-y: 70px; }
}
.app-sidebar .nav-search-wrap { position: relative !important; top: auto !important; z-index: auto !important; margin: 8px 0 0 !important; padding: 0 0 2px !important; background: transparent !important; }
.app-sidebar .nav-search-shortcut { top: 50% !important; transform: translateY(-50%); }
.app-sidebar .app-navigation { padding-top: 2px !important; }
@media (min-width: 901px) {
    body.app-page.has-sidebar .app-sidebar .nav-search-wrap {
        position: sticky !important;
        top: 0 !important;
        z-index: 6 !important;
        box-sizing: border-box;
        width: auto;
        margin: 0 -10px 4px !important;
        padding: 8px 10px 2px !important;
        border: 0 !important;
        background: #fff !important;
    }
    body.app-page.has-sidebar .app-sidebar .nav-search-shortcut {
        top: calc(50% + 3px) !important;
        right: 19px !important;
        transform: translateY(-50%);
    }
    body.app-page.has-sidebar .app-sidebar::before {
        content: none !important;
    }
    body.app-page.has-sidebar:not(.sidebar-collapsed) .app-sidebar .app-brand-row button.sidebar-collapse {
        top: 35px;
    }
}
html,
html * {
    font-family: Nunito, sans-serif !important;
}
body.app-page.has-sidebar > main,
body.app-page.has-sidebar > main *:nth-child(n) {
    font-size: .835rem !important;
    font-weight: 400 !important;
}
body.app-page.has-sidebar > main .pc-table td.pc-actions .pc-menu summary span {
    font-size: .835rem !important;
    font-weight: 400 !important;
}
.app-header-brand { display: none; }
@media (min-width: 901px) {
    body.app-page.has-sidebar .app-header-inner { position: relative; }
    body.app-page.has-sidebar .app-header-brand {
        position: absolute;
        top: 0;
        left: 10px;
        display: flex;
        width: calc(var(--sidebar-width) - 24px);
        height: 100%;
        align-items: center;
        padding-left: 4px;
        color: var(--ink);
        text-decoration: none;
    }
    body.app-page.has-sidebar .app-header-brand .brand-logo { width: auto; max-width: 100%; max-height: 42px; }
    body.app-page.has-sidebar .header-sidebar-toggle {
        position: absolute;
        top: 50%;
        left: calc(var(--sidebar-width) - 24px);
        display: grid;
        width: 36px;
        height: 40px;
        min-height: 40px !important;
        place-items: center;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #64748b !important;
        cursor: pointer;
        transform: translateY(-50%);
    }
    body.app-page.has-sidebar .header-sidebar-toggle:hover { background: #f1f5f9 !important; color: #475569 !important; }
    body.app-page.has-sidebar .header-sidebar-toggle .sidebar-icon-svg { width: 18px; height: 18px; }
    body.app-page.has-sidebar.sidebar-collapsed .header-sidebar-toggle { left: calc(var(--sidebar-width) - 24px); }
    body.app-page.has-sidebar .app-sidebar {
        inset: calc(var(--header-height) - 1px) auto 12px 0;
        overflow-y: auto;
        border-right: 1px solid var(--line);
        background: #fff;
    }
    body.app-page.has-sidebar .app-sidebar .nav-search-wrap {
        position: sticky !important;
        top: 0 !important;
        z-index: 6 !important;
        margin-top: 0 !important;
        background: #fff !important;
    }
}
@media (max-width: 900px) {
    body.app-page.has-sidebar .app-sidebar { inset: calc(var(--header-height) - 1px) auto 0 0; }
    body.app-page.has-sidebar .app-header-inner { padding-left: 0; }
    body.app-page.has-sidebar .app-header-mobile {
        position: relative;
        top: -1.5px;
        order: 0;
        flex-direction: row-reverse;
        gap: 8px;
    }
    body.app-page.has-sidebar .mobile-header-s-mark {
        display: grid;
        width: 32px;
        height: 36px;
        flex: 0 0 32px;
        place-items: center;
        border: 1px solid #b91c1c;
        border-radius: 8px;
        background: #dc2626;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 2px 4px rgb(15 23 42 / 14%);
        color: #fff;
    }
    body.app-page.has-sidebar .mobile-header-s-mark svg {
        display: block;
        width: 21px;
        height: 27px;
    }
    body.app-page.has-sidebar .app-header-brand { display: none; }
    body.app-page.has-sidebar .header-sidebar-toggle { display: none !important; }
}
@media (min-width: 721px) and (max-width: 900px) {
    body.app-page.has-sidebar > header.app-header {
        margin-left: 0 !important;
        padding: 0 24px !important;
        border-bottom: 0 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-inner {
        position: relative;
        padding-left: calc(var(--sidebar-width) + 24px);
        padding-right: 18px;
    }
    body.app-page.has-sidebar > header.app-header { border-bottom: 0 !important; }
    body.app-page.has-sidebar > header.app-header::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: calc(var(--sidebar-width) - 1px);
        border-bottom: 1px solid var(--line);
        content: "";
        pointer-events: none;
    }
    body.app-page.has-sidebar .app-header-brand {
        position: absolute;
        top: 0;
        left: 10px;
        display: flex;
        width: calc(var(--sidebar-width) - 24px);
        min-width: 0;
        height: 100%;
        align-items: center;
        padding-left: 4px;
        color: var(--ink);
        text-decoration: none;
    }
    body.app-page.has-sidebar .app-header-brand .brand-logo { display: block; }
    body.app-page.has-sidebar .app-header-brand .collapsed-header-logo { display: none; }
    body.app-page.has-sidebar.sidebar-collapsed .app-header-brand {
        left: calc((var(--sidebar-width) - 40px) / 2 - 29px);
    }
    body.app-page.has-sidebar.sidebar-collapsed .app-header-brand .brand-logo { display: none; }
    body.app-page.has-sidebar.sidebar-collapsed .app-header-brand .collapsed-header-logo {
        display: grid;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        place-items: center;
        border: 1px solid #b91c1c;
        border-radius: 9px;
        background: #dc2626;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 2px 4px rgb(15 23 42 / 14%);
        color: #fff;
    }
    body.app-page.has-sidebar .app-header-brand .collapsed-header-logo svg {
        display: block;
        width: 23px;
        height: 29px;
    }
    body.app-page.has-sidebar .mobile-header-s-mark { display: none; }
    body.app-page.has-sidebar .app-header-mobile { display: none !important; }
    body.app-page.has-sidebar .header-sidebar-toggle {
        position: absolute;
        top: 50%;
        left: calc(var(--sidebar-width) - 24px);
        display: grid !important;
        width: 48px;
        height: 48px;
        min-height: 48px !important;
        place-items: center;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #dc2626 !important;
        cursor: pointer;
        transform: translateY(-50%);
    }
    body.app-page.has-sidebar .header-sidebar-toggle .sidebar-icon-svg { width: 40px; height: 40px; stroke-width: 2; }
    body.app-page.has-sidebar .app-header-actions { margin-left: auto !important; }
}
@media (min-width: 901px) {
    body.app-page.has-sidebar .collapsed-header-logo { display: none; }
    body.app-page.has-sidebar.sidebar-collapsed .app-header-brand {
        left: calc((var(--sidebar-width) - 40px) / 2 - 29px);
        display: flex;
        width: calc(var(--sidebar-width) - 24px);
    }
    body.app-page.has-sidebar.sidebar-collapsed .app-header-brand .brand-logo { display: none; }
    body.app-page.has-sidebar.sidebar-collapsed .collapsed-header-logo {
        display: grid;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        place-items: center;
        border: 1px solid #b91c1c;
        border-radius: 9px;
        background: #dc2626;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 2px 4px rgb(15 23 42 / 14%);
        color: #fff;
    }
    body.app-page.has-sidebar.sidebar-collapsed .collapsed-header-logo svg {
        display: block;
        width: 23px;
        height: 29px;
    }
    body.app-page.has-sidebar .header-sidebar-toggle {
        width: 48px;
        height: 48px;
        min-height: 48px !important;
        color: #dc2626 !important;
    }
    body.app-page.has-sidebar .header-sidebar-toggle .sidebar-icon-svg {
        width: 40px;
        height: 40px;
        stroke-width: 2;
    }
    body.app-page.has-sidebar .header-sidebar-toggle:hover {
        background: #fef2f2 !important;
        color: #b91c1c !important;
    }
}
@media (max-width: 720px) {
    .app-page .table-wrap,
    .app-page .table-wrapper,
    .app-page .ops-table-wrap,
    .app-page .pc-table-wrap,
    .selfcare-page .selfcare-table-wrap {
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .app-page .table-wrap > table,
    .app-page .table-wrapper > table,
    .app-page .ops-table-wrap > table,
    .app-page .pc-table-wrap > table {
        display: table;
        width: max-content !important;
        min-width: 720px !important;
        table-layout: auto !important;
        white-space: nowrap !important;
    }
    .app-page .table-wrap th,
    .app-page .table-wrap td,
    .app-page .table-wrapper th,
    .app-page .table-wrapper td,
    .app-page .ops-table-wrap th,
    .app-page .ops-table-wrap td,
    .app-page .pc-table-wrap th,
    .app-page .pc-table-wrap td {
        min-width: max-content;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
    .app-page .pc-table-wrap > .pc-table {
        min-width: 900px !important;
    }
    .app-page .pc-table-wrap .pc-table th {
        width: auto !important;
    }
    .app-page .pc-table-wrap .pc-table th:nth-child(n+8):nth-child(-n+11),
    .app-page .pc-table-wrap .pc-table td:nth-child(n+8):nth-child(-n+11),
    .app-page .pc-table-wrap .pc-table th:nth-child(14),
    .app-page .pc-table-wrap .pc-table td:nth-child(14) {
        display: table-cell !important;
    }
    .app-page .pc-table-wrap .pc-table th,
    .app-page .pc-table-wrap .pc-table td {
        width: auto !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

:root { --header-height: 70px; }
body.app-page.has-sidebar > header.app-header,
body.app-page.has-sidebar > header.app-header .app-header-inner {
    box-sizing: border-box;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
}
body.app-page.has-sidebar > header.app-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.app-page.has-sidebar > header.app-header .app-header-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mobile-search-toggle,
.mobile-header-menu-wrap,
.mobile-header-icon { display: none !important; }
.desktop-header-shortcut,
.desktop-admin-identity { display: none !important; }
@media (max-width: 900px) {
    body.app-page.has-sidebar > header.app-header .app-header-inner { position: relative; }
    body.app-page.has-sidebar .app-header-actions {
        position: relative;
        top: -2.5px;
        gap: 8px;
        margin-left: auto !important;
        margin-right: 0;
        justify-content: flex-end;
    }
    body.app-page.has-sidebar .mobile-search-toggle { order: 1; }
    body.app-page.has-sidebar .mobile-profile-wrap { order: 2; }
    body.app-page.has-sidebar .mobile-settings-wrap { order: 3; }
    body.app-page.has-sidebar .app-header-actions > .header-icon-button {
        width: 42px !important;
        height: 40px !important;
        flex: 0 0 42px !important;
    }
    body.app-page.has-sidebar .app-header-actions > .header-icon-button .sidebar-icon-svg {
        width: 22px !important;
        height: 22px !important;
    }
    body.app-page.has-sidebar .app-header-actions > .header-signout-preview,
    body.app-page.has-sidebar .app-header-actions > form .account-logout {
        width: 36px;
        height: 40px;
        min-height: 40px !important;
        justify-content: center;
        padding: 0 !important;
    }
    body.app-page.has-sidebar .app-header-actions > .header-signout-preview .sidebar-icon-svg,
    body.app-page.has-sidebar .app-header-actions > form .account-logout .sidebar-icon-svg {
        width: 18px;
        height: 18px;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu-wrap { position: relative; display: block !important; }
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle {
        display: grid !important;
        width: 42px !important;
        height: 40px !important;
        flex: 0 0 42px !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon .sidebar-icon-svg,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle .sidebar-icon-svg {
        width: 22px !important;
        height: 22px !important;
    }
    body.app-page.has-sidebar .mobile-header-menu[hidden] { display: none !important; }
    body.app-page.has-sidebar .mobile-header-menu:not([hidden]) {
        position: absolute;
        z-index: 50;
        top: calc(100% + 8px);
        left: 0;
        display: grid;
        min-width: 210px;
        gap: 2px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 28px rgb(15 23 42 / 16%);
    }
    body.app-page.has-sidebar .mobile-header-menu p {
        margin: 2px 8px 5px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
    }
    body.app-page.has-sidebar .mobile-header-menu-item {
        display: block;
        padding: 9px 10px;
        border-radius: 7px;
        color: var(--ink);
        font-size: 12px;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
    }
    body.app-page.has-sidebar button.mobile-theme-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 9px;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
    }
    body.app-page.has-sidebar .mobile-theme-toggle .sidebar-icon-svg { width: 15px; height: 15px; }
    body.app-page.has-sidebar .mobile-theme-toggle-check { margin-left: auto; color: var(--brand); }
    body.app-page.has-sidebar .mobile-theme-toggle[aria-pressed="true"] .mobile-theme-toggle-check::after { content: "✓"; }
    body.app-page.has-sidebar button.mobile-theme-toggle:hover { background: var(--brand-soft); color: var(--brand-dark); }
    body.app-page.has-sidebar a.mobile-header-menu-item:hover { background: var(--brand-soft); color: var(--brand-dark); }
    body.app-page.has-sidebar .mobile-header-menu-item.is-unavailable { color: var(--muted); cursor: not-allowed; }
    body.app-page.has-sidebar .mobile-settings-menu {
        position: fixed;
        top: calc(var(--header-height) + 8px);
        right: 16px;
        left: auto !important;
        min-width: min(210px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
    }
    body.app-page.has-sidebar .mobile-profile-menu { left: auto !important; right: 0; min-width: 190px !important; }
    body.app-page.has-sidebar .mobile-profile-menu strong,
    body.app-page.has-sidebar .mobile-profile-menu span { display: block; padding: 4px 8px; font-size: 12px; }
    body.app-page.has-sidebar .mobile-profile-menu span { color: var(--muted); font-size: 11px; }
    body.app-page.has-sidebar .mobile-profile-logout { margin: 0; }
    body.app-page.has-sidebar .mobile-profile-logout .mobile-header-menu-item {
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
    }
    body.app-page.has-sidebar .mobile-profile-logout .mobile-header-menu-item:hover {
        background: var(--brand-soft);
        color: var(--brand-dark);
    }
    body.app-page.has-sidebar .global-search { display: none; }
    body.app-page.has-sidebar.mobile-search-open .global-search {
        position: absolute;
        z-index: 50;
        top: calc(100% + 8px);
        right: 16px;
        left: 16px;
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        flex: none;
        margin: 0;
    }
    body.app-page.has-sidebar.mobile-search-open .global-search input {
        display: block;
        width: 100%;
        min-height: 40px !important;
        padding: 9px 42px 9px 38px !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgb(15 23 42 / 10%);
    }
    body.app-page.has-sidebar.mobile-search-open .global-search-icon {
        display: grid;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
    }
    body.app-page.has-sidebar.mobile-search-open .global-search-shortcut { display: none; }
    body.app-page.has-sidebar.mobile-search-open .global-search-results { border-radius: 12px; }
}
@media (max-width: 360px) {
    body.app-page.has-sidebar .app-header-mobile .icon-button {
        width: 36px;
        min-height: 36px !important;
        padding: 0 !important;
    }
    body.app-page.has-sidebar .mobile-brand { max-width: 60px; }
    body.app-page.has-sidebar .app-header-actions { gap: 8px; }
    body.app-page.has-sidebar .app-header-actions > .header-icon-button {
        width: 38px !important;
        height: 36px !important;
        flex-basis: 38px !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu-wrap > .header-icon-button {
        width: 38px !important;
        height: 36px !important;
        flex-basis: 38px !important;
    }
    body.app-page.has-sidebar .app-header-actions > .header-icon-button .sidebar-icon-svg {
        width: 32px !important;
        height: 32px !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu-wrap > .header-icon-button .sidebar-icon-svg {
        width: 32px !important;
        height: 32px !important;
    }
    body.app-page.has-sidebar .app-header-actions > .header-signout-preview,
    body.app-page.has-sidebar .app-header-actions > form .account-logout {
        width: 32px;
        height: 36px;
        min-height: 36px !important;
    }
}
@media (min-width: 721px) {
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap {
        margin-right: 0 !important;
    }
}
body.app-page.has-sidebar .header-sidebar-toggle,
body.app-page.has-sidebar .header-sidebar-toggle:hover,
body.app-page.has-sidebar .header-sidebar-toggle:focus,
body.app-page.has-sidebar .header-sidebar-toggle:focus-visible,
body.app-page.has-sidebar .header-sidebar-toggle:active {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
body.app-page.has-sidebar .app-header-mobile > button.icon-button,
body.app-page.has-sidebar .app-header-mobile > button.icon-button:hover,
body.app-page.has-sidebar .app-header-mobile > button.icon-button:focus,
body.app-page.has-sidebar .app-header-mobile > button.icon-button:focus-visible,
body.app-page.has-sidebar .app-header-mobile > button.icon-button:active {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    color: #64748b !important;
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 900px) {
    body.app-page.has-sidebar .app-header-mobile > button.icon-button .sidebar-icon-svg,
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon .sidebar-icon-svg,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle .sidebar-icon-svg {
        width: 32px !important;
        height: 32px !important;
    }
    body.app-page.has-sidebar .app-header-mobile > button.icon-button:active,
    body.app-page.has-sidebar .app-header-mobile > button.icon-button[aria-expanded="true"],
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon:active,
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon[aria-expanded="true"],
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle:active,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle[aria-expanded="true"] {
        color: #dc2626 !important;
    }
    body.app-page.has-sidebar .app-header-actions > .header-icon-button:hover,
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu-wrap > .header-icon-button:hover,
    body.app-page.has-sidebar .app-header-actions > .mobile-search-toggle:hover {
        background: transparent !important;
        box-shadow: none !important;
    }
    body.app-page.has-sidebar .app-header-mobile > button.icon-button,
    body.app-page.has-sidebar .app-header-mobile > button.icon-button:hover,
    body.app-page.has-sidebar .app-header-mobile > button.icon-button:focus,
    body.app-page.has-sidebar .app-header-mobile > button.icon-button:active,
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon,
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon:hover,
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon:focus,
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon:active,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle:hover,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle:focus,
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle:active {
        color: #dc2626 !important;
    }
}

body.app-page.has-sidebar .app-header-actions {
    top: auto !important;
    gap: var(--app-header-control-gap) !important;
    transform: none !important;
}
body.app-page.has-sidebar .app-header-mobile {
    top: auto !important;
    gap: var(--app-header-control-gap) !important;
    align-items: center !important;
}
body.app-page.has-sidebar .app-header-actions .header-icon-button,
body.app-page.has-sidebar .app-header-mobile > button.icon-button {
    box-sizing: border-box !important;
    width: var(--app-header-control-size) !important;
    height: var(--app-header-control-size) !important;
    min-height: var(--app-header-control-size) !important;
    flex: 0 0 var(--app-header-control-size) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--app-header-icon-color) !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}
body.app-page.has-sidebar .app-header-actions .header-icon-button .sidebar-icon-svg,
body.app-page.has-sidebar .app-header-mobile > button.icon-button .sidebar-icon-svg {
    width: var(--app-header-icon-size) !important;
    height: var(--app-header-icon-size) !important;
}
body.app-page.has-sidebar .app-header-actions .header-icon-button:hover,
body.app-page.has-sidebar .app-header-mobile > button.icon-button:hover {
    background: var(--app-header-icon-hover-background) !important;
    color: var(--app-header-icon-hover-color) !important;
}
body.app-page.has-sidebar .app-header-actions .header-icon-button:active,
body.app-page.has-sidebar .app-header-actions .header-icon-button[aria-expanded="true"],
body.app-page.has-sidebar .app-header-mobile > button.icon-button:active,
body.app-page.has-sidebar .app-header-mobile > button.icon-button[aria-expanded="true"] {
    color: var(--app-header-icon-hover-color) !important;
}
body.app-page.has-sidebar .header-sidebar-toggle {
    width: var(--app-header-control-size) !important;
    height: var(--app-header-control-size) !important;
    min-height: var(--app-header-control-size) !important;
    color: var(--app-header-icon-color) !important;
}
body.app-page.has-sidebar .header-sidebar-toggle .sidebar-icon-svg {
    width: var(--app-header-icon-size) !important;
    height: var(--app-header-icon-size) !important;
}
body.app-page.has-sidebar .header-sidebar-toggle:hover {
    background: var(--app-header-icon-hover-background) !important;
    color: var(--app-header-icon-hover-color) !important;
}
body.app-page.has-sidebar .mobile-header-s-mark {
    width: var(--app-header-mark-size) !important;
    height: var(--app-header-mark-size) !important;
    flex-basis: var(--app-header-mark-size) !important;
}
body.app-page.has-sidebar .mobile-header-s-mark svg,
body.app-page.has-sidebar .collapsed-header-logo svg {
    width: var(--app-header-mark-icon-width) !important;
    height: var(--app-header-mark-icon-height) !important;
}
@media (max-width: 720px) {
    :root { --app-header-actions-edge-offset: 4px; }
    body.app-page.has-sidebar .app-header-mobile {
        margin-left: var(--app-header-mobile-mark-offset);
        gap: var(--app-header-mobile-toggle-gap) !important;
    }
}
@media (min-width: 721px) and (max-width: 900px) {
    :root { --app-header-actions-edge-offset: 9px; }
}
body.app-page.has-sidebar .app-header-actions {
    transform: translateX(var(--app-header-actions-edge-offset)) !important;
}
body.app-page.has-sidebar .sidebar-scrim:hover,
body.app-page.has-sidebar .sidebar-scrim:focus,
body.app-page.has-sidebar .sidebar-scrim:focus-visible,
body.app-page.has-sidebar .sidebar-scrim:active {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
body.app-page.has-sidebar .sidebar-scrim {
    appearance: none;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.app-page.has-sidebar > header.app-header {
    padding-right: var(--app-page-gutter) !important;
}
body.app-page.has-sidebar > header.app-header .app-header-inner {
    padding-right: 0 !important;
}
body.app-page.has-sidebar > main {
    padding-right: var(--app-page-gutter) !important;
}
@media (min-width: 901px) {
    body.app-page.has-sidebar .app-header-inner {
        position: relative;
        align-items: center;
    }
    body.app-page.has-sidebar .global-search {
        position: relative;
        min-width: 180px;
        width: 180px;
        max-width: 180px;
        height: var(--app-header-control-size);
        flex: 0 0 180px;
        margin: 0;
        order: 1;
    }
    body.app-page.has-sidebar .global-search input {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 8px 36px 8px 14px !important;
        border-width: 1px !important;
        border-style: solid !important;
        border-color: #cbd5e1 !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        color: var(--ink) !important;
        font-size: 12px !important;
    }
    body.app-page.has-sidebar .global-search-icon {
        right: 12px;
        left: auto;
        width: 16px;
        height: 16px;
    }
    body.app-page.has-sidebar .global-search-icon .sidebar-icon-svg {
        width: 16px;
        height: 16px;
    }
    body.app-page.has-sidebar .global-search-shortcut {
        display: none;
    }
    body.app-page.has-sidebar .app-header-actions {
        position: relative;
        z-index: 1;
        gap: 12px;
        margin-left: auto !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle { display: none !important; }
    body.app-page.has-sidebar .mobile-profile-wrap { order: 4; }
    body.app-page.has-sidebar .mobile-settings-wrap { order: 5; }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu-wrap {
        position: relative;
        display: block !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon {
        display: grid !important;
        width: 32px !important;
        height: 36px !important;
        flex: 0 0 32px !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-icon .sidebar-icon-svg {
        width: 20px !important;
        height: 20px !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu[hidden] {
        display: none !important;
    }
    body.app-page.has-sidebar .mobile-profile-wrap > .mobile-header-icon {
        width: auto !important;
        min-width: 0;
        padding: 0 8px !important;
        gap: 8px;
    }
    body.app-page.has-sidebar .mobile-profile-wrap > .mobile-header-icon > .sidebar-icon-svg {
        display: none;
    }
    body.app-page.has-sidebar .desktop-admin-identity {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        color: var(--ink);
        font-size: 13px;
        white-space: nowrap;
    }
    body.app-page.has-sidebar .desktop-admin-mark {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        place-items: center;
        overflow: hidden;
        border: 0;
        border-radius: 50%;
        background: #fff;
    }
    body.app-page.has-sidebar .desktop-admin-mark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    body.app-page.has-sidebar .desktop-admin-chevron {
        width: 13px;
        height: 13px;
        color: var(--muted);
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu:not([hidden]) {
        position: absolute;
        z-index: 50;
        top: calc(100% + 8px);
        right: 0;
        display: grid;
        min-width: 210px;
        gap: 2px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 28px rgb(15 23 42 / 16%);
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu p {
        margin: 2px 8px 5px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
    }
    body.app-page.has-sidebar .mobile-settings-menu .mobile-header-menu-item {
        display: block;
        padding: 9px 10px;
        border-radius: 7px;
        color: var(--ink);
        font-size: 12px;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
    }
    body.app-page.has-sidebar .app-header-actions a.mobile-header-menu-item:hover {
        background: var(--brand-soft);
        color: var(--brand-dark);
    }
    body.app-page.has-sidebar .app-header-actions .mobile-header-menu-item.is-unavailable {
        color: var(--muted);
        cursor: not-allowed;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-profile-menu {
        min-width: 190px !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-profile-menu strong,
    body.app-page.has-sidebar .app-header-actions .mobile-profile-menu span {
        display: block;
        padding: 4px 8px;
        font-size: 12px;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-profile-menu span {
        color: var(--muted);
        font-size: 11px;
    }
}
@media (min-width: 721px) and (max-width: 900px) {
    body.app-page.has-sidebar .app-header-actions .global-search {
        display: flex !important;
        position: relative;
        min-width: 160px;
        width: 160px;
        max-width: 160px;
        height: 36px;
        flex: 0 0 160px;
        margin: 0;
        order: 1;
    }
    body.app-page.has-sidebar .app-header-actions .global-search input {
        height: 36px !important;
        min-height: 36px !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-search-toggle {
        display: none !important;
    }
}
@media (min-width: 721px) and (max-width: 900px) {
    body.app-page.has-sidebar .app-header-actions .mobile-profile-wrap > .mobile-header-icon {
        width: auto !important;
        flex: 0 1 auto !important;
    }
    body.app-page.has-sidebar .app-header-actions .mobile-profile-wrap > .mobile-header-icon > .sidebar-icon-svg {
        display: none;
    }
    body.app-page.has-sidebar .desktop-admin-identity {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        color: var(--ink);
        font-size: 13px;
        white-space: nowrap;
    }
    body.app-page.has-sidebar .desktop-admin-mark {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        place-items: center;
        overflow: hidden;
        border: 0;
        border-radius: 50%;
        background: #fff;
    }
    body.app-page.has-sidebar .desktop-admin-mark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    body.app-page.has-sidebar .desktop-admin-chevron {
        width: 13px;
        height: 13px;
        color: var(--muted);
    }
    body.app-page.has-sidebar .mobile-profile-wrap { order: 4; }
    body.app-page.has-sidebar .mobile-settings-wrap { order: 5; }
}
@media (min-width: 721px) {
    body.app-page.has-sidebar .desktop-header-shortcut,
    body.app-page.has-sidebar .mobile-settings-wrap > .mobile-header-icon,
    body.app-page.has-sidebar .mobile-profile-wrap > .mobile-header-icon {
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        color: #64748b !important;
    }
    body.app-page.has-sidebar .desktop-header-shortcut:hover,
    body.app-page.has-sidebar .mobile-settings-wrap > .mobile-header-icon:hover,
    body.app-page.has-sidebar .mobile-profile-wrap > .mobile-header-icon:hover,
    body.app-page.has-sidebar .mobile-settings-wrap > .mobile-header-icon[aria-expanded="true"],
    body.app-page.has-sidebar .mobile-profile-wrap > .mobile-header-icon[aria-expanded="true"] {
        color: #475569 !important;
    }
    body.app-page.has-sidebar .desktop-header-shortcut:focus-visible,
    body.app-page.has-sidebar .mobile-settings-wrap > .mobile-header-icon:focus-visible,
    body.app-page.has-sidebar .mobile-profile-wrap > .mobile-header-icon:focus-visible {
        outline: 2px solid #94a3b8 !important;
        outline-offset: 2px;
    }
}
@media (max-width: 720px) {
    body.app-page.has-sidebar .app-header-actions {
        position: static;
    }
}
@media (min-width: 721px) {
    body.app-page.has-sidebar > header.app-header .app-header-actions {
        gap: 18px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .global-search {
        min-width: 180px !important;
        width: 180px !important;
        max-width: 180px !important;
        flex: 0 0 180px !important;
        order: 1 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .global-search input {
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 8px 36px 8px 14px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        color: var(--ink) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    html body.app-page.has-sidebar > header.app-header .app-header-actions input#global-customer-search[type="search"] {
        border: 1px solid #cbd5e1 !important;
        border-width: 1px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .global-search-icon {
        right: 12px !important;
        left: auto !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .global-search-shortcut {
        display: none !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut {
        display: grid !important;
        order: 2 !important;
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        place-items: center;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #64748b !important;
        text-decoration: none;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut-renew {
        order: 3 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap {
        order: 4 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-settings-wrap {
        order: 5 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-settings-wrap > .mobile-header-icon {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-settings-wrap > .mobile-header-icon .sidebar-icon-svg {
        width: 32px !important;
        height: 32px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap > .mobile-header-icon {
        width: auto !important;
        height: 36px !important;
        flex: 0 0 auto !important;
        padding: 0 2px !important;
        border: 0 !important;
        background: transparent !important;
        color: #64748b !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap > .mobile-header-icon > .sidebar-icon-svg {
        display: none !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-mark {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        border: 0;
        border-radius: 50%;
        background: #fff;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-mark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-chevron {
        width: 14px;
        height: 14px;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut:hover,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-settings-wrap > .mobile-header-icon:hover {
        color: #dc2626 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut:focus-visible,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-settings-wrap > .mobile-header-icon:focus-visible,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap > .mobile-header-icon:focus-visible {
        outline: 2px solid #94a3b8 !important;
        outline-offset: 2px;
    }
}
@media (min-width: 721px) and (max-width: 900px) {
    body.app-page.has-sidebar > header.app-header .app-header-actions .global-search {
        min-width: 160px !important;
        width: 160px !important;
        max-width: 160px !important;
        flex-basis: 160px !important;
    }
}
body.app-page.has-sidebar > header.app-header .desktop-header-shortcut,
body.app-page.has-sidebar > header.app-header .app-header-actions .header-icon-button,
body.app-page.has-sidebar > header.app-header .app-header-mobile > button.icon-button,
body.app-page.has-sidebar > header.app-header .header-sidebar-toggle {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #64748b !important;
    filter: none !important;
    -webkit-tap-highlight-color: transparent;
}
body.app-page.has-sidebar > header.app-header .desktop-header-shortcut:hover,
body.app-page.has-sidebar > header.app-header .app-header-actions .header-icon-button:hover,
body.app-page.has-sidebar > header.app-header .app-header-mobile > button.icon-button:hover,
body.app-page.has-sidebar > header.app-header .header-sidebar-toggle:hover {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #dc2626 !important;
    filter: none !important;
    outline: none !important;
}
@media (max-width: 720px) {
    body.app-page.has-sidebar > header.app-header .app-header-actions {
        gap: 18px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut {
        display: grid !important;
        width: 36px !important;
        height: 48px !important;
        flex: 0 0 36px !important;
        margin-right: 0 !important;
        place-items: center;
        padding: 0 !important;
        order: 2 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut .sidebar-icon-svg {
        width: 32px !important;
        height: 32px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut-renew {
        order: 3 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-search-toggle {
        order: 1 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap {
        order: 4 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap > .mobile-header-icon {
        width: 32px !important;
        height: 36px !important;
        min-height: 36px !important;
        flex: 0 0 32px !important;
        padding: 0 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-settings-wrap {
        order: 5 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-settings-wrap > .mobile-header-icon {
        width: 36px !important;
        flex: 0 0 36px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions > .mobile-search-toggle {
        width: 40px !important;
        flex: 0 0 40px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-mobile > button.icon-button,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-header-icon,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-search-toggle {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #64748b !important;
        filter: none !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-mobile > button.icon-button:hover,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-header-icon:hover,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-search-toggle:hover {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #dc2626 !important;
        filter: none !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-mobile > button.icon-button .sidebar-icon-svg,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-header-icon .sidebar-icon-svg {
        width: 32px !important;
        height: 32px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut .sidebar-icon-svg,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-search-toggle .sidebar-icon-svg {
        width: 18px !important;
        height: 18px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap > .mobile-header-icon > .sidebar-icon-svg {
        display: none !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap .desktop-admin-label,
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap .desktop-admin-chevron {
        display: none !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-identity {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        color: var(--ink);
        font-size: 12px;
        white-space: nowrap;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-mark {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        place-items: center;
        overflow: hidden;
        border-radius: 50%;
        background: #fff;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-mark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-chevron {
        width: 14px;
        height: 14px;
    }
}
@media (max-width: 360px) {
    body.app-page.has-sidebar > header.app-header .app-header-mobile {
        gap: 4px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-mobile > .mobile-header-s-mark,
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-label,
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-chevron {
        display: none !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-mobile > .icon-button {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-mobile > .mobile-header-s-mark {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions {
        gap: 18px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-header-shortcut {
        width: 32px !important;
        flex-basis: 32px !important;
        margin-right: 0 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions > .mobile-search-toggle {
        width: 36px !important;
        flex-basis: 36px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-header-menu-wrap > .mobile-header-icon {
        width: 32px !important;
        flex-basis: 32px !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .mobile-profile-wrap > .mobile-header-icon {
        width: 32px !important;
        height: 36px !important;
        min-height: 36px !important;
        flex: 0 0 32px !important;
        padding: 0 !important;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-identity {
        gap: 3px;
        font-size: 11px;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-mark {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
    body.app-page.has-sidebar > header.app-header .app-header-actions .desktop-admin-chevron {
        width: 12px;
        height: 12px;
    }
}
body.app-page.has-sidebar:not(.sidebar-dark) .app-sidebar .nav-submenu .nav-link.nav-child.is-active {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.app-page.has-sidebar:not(.sidebar-dark) .app-sidebar .nav-submenu .nav-link.nav-child.is-active::after {
    inset: 3px 0;
    box-sizing: border-box;
    border: 1px solid #fde8e8;
    background: var(--brand-soft);
    box-shadow: 0 2px 5px rgb(15 23 42 / 12%);
}
body.app-page.has-sidebar:not(.sidebar-dark) .app-sidebar .nav-submenu .nav-link.nav-child.is-active::before {
    display: block;
    inset: 10px auto 10px -13px;
}
body.app-page.has-sidebar .app-header-actions .mobile-header-menu-item {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 9px;
    font-weight: 500 !important;
}
body.app-page.has-sidebar .mobile-settings-menu .mobile-header-menu-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    color: #64748b;
}
body.app-page.has-sidebar .mobile-settings-menu .mobile-header-menu-icon .sidebar-icon-svg {
    width: 16px;
    height: 16px;
}
body.app-page.has-sidebar .mobile-settings-menu button.mobile-theme-toggle {
    min-height: 36px !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    text-align: left;
}
body.app-page.has-sidebar .mobile-settings-menu button.mobile-theme-toggle:hover {
    border-color: transparent !important;
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
}
body.app-page.has-sidebar .mobile-settings-menu .mobile-theme-toggle .mobile-header-menu-icon {
    color: #64748b;
}
body.app-page.has-sidebar .mobile-settings-menu .mobile-theme-toggle-check {
    margin-left: auto;
    color: var(--brand);
}
body.app-page.sidebar-dark {
    color-scheme: dark;
    --brand-dark: #f87171;
    --brand-soft: transparent;
    --canvas: #fff;
    --surface: #252526;
    --ink: #d4d4d4;
    --muted: #a0a0a0;
    --line: transparent;
    background: var(--canvas) !important;
    color: var(--ink);
}
body.app-page.sidebar-dark > main { background: var(--canvas); color: var(--ink); }
body.app-page.sidebar-dark > header.app-header,
body.app-page.sidebar-dark.has-sidebar > header.app-header {
    border-color: var(--line) !important;
    background: rgb(37 37 38 / 96%) !important;
    color: var(--muted);
}
body.app-page.sidebar-dark .app-sidebar {
    border-right-color: #333;
    background: #181818;
    color: var(--ink);
}
body.app-page.sidebar-dark .app-sidebar .app-brand,
body.app-page.sidebar-dark .app-sidebar .nav-group summary,
body.app-page.sidebar-dark .app-sidebar .nav-link { color: var(--ink); }
body.app-page.sidebar-dark .app-sidebar .workspace-switcher,
body.app-page.sidebar-dark .app-sidebar .sidebar-collapse,
body.app-page.sidebar-dark .app-sidebar .nav-search {
    border-color: var(--line) !important;
    background: #252526 !important;
    color: var(--ink) !important;
}
body.app-page.sidebar-dark .app-sidebar .nav-section-heading,
body.app-page.sidebar-dark .app-sidebar .nav-group-icon,
body.app-page.sidebar-dark .app-sidebar .nav-icon,
body.app-page.sidebar-dark .app-sidebar .nav-group-chevron,
body.app-page.sidebar-dark .app-sidebar .app-brand small,
body.app-page.sidebar-dark .app-sidebar .workspace-switcher small { color: #a0a0a0; }
body.app-page.sidebar-dark .app-sidebar .nav-group summary:hover,
body.app-page.sidebar-dark .app-sidebar .nav-link:hover { background: #2a2d2e; color: #e7e7e7; }
body.app-page.sidebar-dark .app-sidebar .nav-group[open] > summary {
    border-color: transparent;
    background: #2a2d2e;
    box-shadow: 0 2px 6px rgb(0 0 0 / 28%);
    color: #e7e7e7;
}
body.app-page.sidebar-dark .app-sidebar .nav-group > summary {
    background: #252526;
    box-shadow: 0 2px 5px rgb(0 0 0 / 24%);
}
body.app-page.sidebar-dark .app-sidebar .nav-submenu .nav-link.nav-child {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
body.app-page.sidebar-dark .app-sidebar .nav-submenu .nav-link.nav-child:hover {
    background: transparent;
    box-shadow: none;
}
body.app-page.sidebar-dark .app-sidebar .nav-submenu .nav-link.nav-child::after {
    inset: 3px 0;
    background: #202122;
    box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
}
body.app-page.sidebar-dark .app-sidebar .nav-submenu .nav-link.nav-child:hover::after {
    background: #2a2d2e;
    box-shadow: 0 2px 5px rgb(0 0 0 / 24%);
}
body.app-page.sidebar-dark .app-sidebar .nav-group[open] > summary .nav-group-icon,
body.app-page.sidebar-dark .app-sidebar .nav-group[open] .nav-group-chevron { color: #f87171; }
body.app-page.sidebar-dark .app-sidebar .nav-link.is-active {
    border-color: transparent;
    background: transparent;
    color: #f87171;
}
body.app-page.sidebar-dark .app-sidebar .nav-submenu .nav-link.nav-child.is-active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
body.app-page.sidebar-dark .app-sidebar .nav-submenu .nav-link.nav-child.is-active::after {
    inset: 3px 0;
    box-sizing: border-box;
    border: 1px solid #5b3032;
    background: #3b2022;
    box-shadow: 0 2px 5px rgb(0 0 0 / 24%);
}
body.app-page.has-sidebar > header.app-header {
    border-bottom: 0 !important;
    box-shadow: 0 2px 6px rgb(15 23 42 / 10%);
}
body.app-page.has-sidebar .app-sidebar {
    inset: calc(var(--header-height) - -6px) auto 12px 0;
    border-right: 0 !important;
    background-image: none !important;
    transition: width .3s ease, padding .3s ease;
}
@media (min-width: 901px) {
    body.app-page.has-sidebar .app-header-inner {
        transition: padding-left .3s ease;
    }
    body.app-page.has-sidebar .header-sidebar-toggle {
        transition: left .3s ease;
    }
    body.app-page.has-sidebar .app-header-brand {
        transition: left .3s ease, width .3s ease;
    }
}
body.app-page.sidebar-dark .app-sidebar .nav-link.is-active::before { background: #f87171; }
body.app-page.sidebar-dark .app-sidebar .nav-submenu { border-left-color: #3c3c3c; }
body.app-page.sidebar-dark .app-sidebar .sidebar-account { border-top-color: var(--line); }
body.app-page.sidebar-dark :is(h2, h3, h4) { color: var(--ink); }
body.app-page.sidebar-dark :is(.app-footer, .text-muted, .ops-note, .ops-head p, .pc-title p) { color: var(--muted); }
body.app-page.sidebar-dark .app-footer { border-top-color: var(--line); }
body.app-page.sidebar-dark :is(section, .ops-stat, .ops-panel, .ops-card, .ops-role, .ops-filterbar, .pc-card, .pc-panel, .dashboard-panel, .dashboard-metric, .dashboard-date-chip, .quick-action-list a, .business-period-form, .business-secondary-link, .business-period-bar, .global-search-results, .mobile-header-menu, .ops-permissions label, .pc-table-wrap, .ops-table-wrap, .table-wrap, .table-wrapper) {
    border-color: var(--line) !important;
    background-color: var(--surface) !important;
    color: var(--ink);
    box-shadow: none;
}
body.app-page.sidebar-dark .business-period-bar {
    background: linear-gradient(110deg, #252b35, #252526 74%) !important;
}
body.app-page.sidebar-dark .business-period-icon,
body.app-page.sidebar-dark .business-payment-avatar { background: #253247; color: #8ab4f8; }
body.app-page.sidebar-dark .business-period-scope {
    border-color: #3c4656;
    background: #2d2d30;
    color: #c5c5c5;
}
body.app-page.sidebar-dark .business-period-bar :is(small, strong) { color: #c5c5c5; }
body.app-page.sidebar-dark .business-kpi {
    border-color: var(--line);
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
body.app-page.sidebar-dark .business-kpi-blue { background: linear-gradient(145deg, #252b35, #222832); }
body.app-page.sidebar-dark .business-kpi-violet { background: linear-gradient(145deg, #2b2633, #25232b); }
body.app-page.sidebar-dark .business-kpi-green { background: linear-gradient(145deg, #242e29, #222a25); }
body.app-page.sidebar-dark .business-kpi-amber { background: linear-gradient(145deg, #302c23, #29261f); }
body.app-page.sidebar-dark .business-kpi-top,
body.app-page.sidebar-dark .business-kpi-label,
body.app-page.sidebar-dark .business-kpi-foot { color: var(--muted); }
body.app-page.sidebar-dark .business-kpi-value,
body.app-page.sidebar-dark .business-health-list strong,
body.app-page.sidebar-dark .business-inventory-grid strong,
body.app-page.sidebar-dark .business-payment-copy strong,
body.app-page.sidebar-dark .business-payment-amount { color: var(--ink); }
body.app-page.sidebar-dark .business-chart-period,
body.app-page.sidebar-dark .business-trend-legend,
body.app-page.sidebar-dark .business-trend-month,
body.app-page.sidebar-dark .business-health-list > div > span,
body.app-page.sidebar-dark .business-inventory-grid small,
body.app-page.sidebar-dark .business-payment-copy small { color: var(--muted); }
body.app-page.sidebar-dark .business-trend-chart {
    border-bottom-color: var(--line);
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 52px, #383838 53px, transparent 54px);
}
body.app-page.sidebar-dark .business-health-total {
    border-color: #385943;
    background: #263b2d;
}
body.app-page.sidebar-dark .business-health-total span { color: #a7d8b2; }
body.app-page.sidebar-dark .business-health-total strong { color: #8bd49c; }
body.app-page.sidebar-dark .business-health-panel > .business-panel-link,
body.app-page.sidebar-dark .business-payment-row { border-color: var(--line); }
body.app-page.sidebar-dark .business-inventory-grid > div { border-color: var(--line); }
body.app-page.sidebar-dark .business-inventory-icon { background: #253247; color: #8ab4f8; }
body.app-page.sidebar-dark .business-inventory-icon-violet { background: #352b45; color: #c4a7e7; }
body.app-page.sidebar-dark .business-inventory-icon-green { background: #263b2d; color: #81c995; }
body.app-page.sidebar-dark .business-payment-status.status-succeeded { color: #81c995; }
body.app-page.sidebar-dark :is(.business-payment-status.status-pending, .business-payment-status.status-review, .business-payment-status.status-reconciliation_required) { color: #e6c27a; }
body.app-page.sidebar-dark .business-payment-status.status-failed { color: #f09a9a; }
body.app-page.sidebar-dark .status-badge { border-color: #454545; background: #2d2d30; color: #c5c5c5; }
body.app-page.sidebar-dark .status-succeeded { background: #263b2d; color: #8bd49c; }
body.app-page.sidebar-dark :is(.status-pending, .status-review, .status-reconciliation_required, .status-warning) { background: #41351f; color: #e6c27a; }
body.app-page.sidebar-dark :is(.status-failed, .status-error) { background: #43282a; color: #f09a9a; }
body.app-page.sidebar-dark .status-info { background: #253247; color: #8ab4f8; }
body.app-page.sidebar-dark .status-active { background: #263b2d; color: #8bd49c; }
body.app-page.sidebar-dark :is(section, .ops-panel, .ops-stat, .ops-card, .pc-card, .dashboard-panel, .dashboard-metric) {
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}
body.app-page.sidebar-dark .business-dashboard > section.business-kpi-grid,
body.app-page.sidebar-dark .business-dashboard > section.business-main-grid,
body.app-page.sidebar-dark .business-dashboard > section.business-lower-grid {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.app-page.sidebar-dark .dashboard-metric-value,
body.app-page.sidebar-dark .dashboard-date-chip strong,
body.app-page.sidebar-dark .quick-action-label { color: var(--ink) !important; }
body.app-page.sidebar-dark .dashboard-metric-label,
body.app-page.sidebar-dark .dashboard-metric-detail,
body.app-page.sidebar-dark .dashboard-trend-panel .trend-amount,
body.app-page.sidebar-dark .dashboard-trend-panel .trend-label { color: var(--muted); }
body.app-page.sidebar-dark :is(.dashboard-tone-primary, .dashboard-date-icon, .quick-action-icon, .insight-badge) {
    background: #253247;
    color: #8ab4f8;
}
body.app-page.sidebar-dark .dashboard-tone-success { background: #263b2d; color: #81c995; }
body.app-page.sidebar-dark .dashboard-tone-warning { background: #41351f; color: #e6c27a; }
body.app-page.sidebar-dark .dashboard-tone-danger { background: #43282a; color: #f09a9a; }
body.app-page.sidebar-dark .dashboard-tone-purple { background: #352b45; color: #c4a7e7; }
body.app-page.sidebar-dark .dashboard-tone-info { background: #20383d; color: #80cbc4; }
body.app-page.sidebar-dark .business-secondary-link { color: var(--ink) !important; }
body.app-page.sidebar-dark .business-secondary-link:hover { border-color: #555 !important; background: #2a2d2e !important; color: #e7e7e7 !important; }
body.app-page.sidebar-dark :is(label, .ops-form label, .ops-filterbar label, .ops-permissions label, .pc-select) { color: #c5c5c5; }
body.app-page.sidebar-dark input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.app-page.sidebar-dark select,
body.app-page.sidebar-dark textarea,
body.app-page.sidebar-dark .app-sidebar .nav-search,
body.app-page.sidebar-dark .app-header .global-search input {
    border-color: #3c3c3c !important;
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
    color-scheme: dark;
}
body.app-page.sidebar-dark input::placeholder,
body.app-page.sidebar-dark textarea::placeholder,
body.app-page.sidebar-dark .global-search input::placeholder { color: #858585; }
body.app-page.sidebar-dark input:focus,
body.app-page.sidebar-dark select:focus,
body.app-page.sidebar-dark textarea:focus { border-color: #707070 !important; }
body.app-page.sidebar-dark :is(table, th, td) { border-color: #3c3c3c !important; }
body.app-page.sidebar-dark :is(th, .ops-table th, .pc-table th) {
    background: #2d2d30 !important;
    color: #bcbcbc !important;
}
body.app-page.sidebar-dark :is(td, .ops-table td, .pc-table td) { color: var(--ink); }
body.app-page.sidebar-dark :is(tbody tr:hover, .ops-table tbody tr:hover, .pc-table tbody tr:hover) { background: #2a2d2e !important; }
body.app-page.sidebar-dark :is(.pc-btn.is-outline, .pc-btn.is-primary, .pc-btn.is-bulk, .pc-chip:not(.is-active), .pc-pg:not(.is-current), button.ops-ghost, .app-header-actions .account-logout, .app-header-actions .header-signout-preview) {
    border-color: #4a4a4a !important;
    background: #2d2d30 !important;
    color: #d4d4d4 !important;
}
body.app-page.sidebar-dark :is(.pc-btn.is-outline, .pc-btn.is-primary, .pc-btn.is-bulk, .pc-chip:not(.is-active), .pc-pg:not(.is-current), button.ops-ghost, .app-header-actions .account-logout, .app-header-actions .header-signout-preview):hover {
    border-color: #666 !important;
    background: #383838 !important;
}
body.app-page.sidebar-dark .app-header .header-icon-button { color: #bcbcbc !important; }
body.app-page.sidebar-dark .app-header .header-icon-button:hover { background: #383838 !important; color: #e7e7e7 !important; }
body.app-page.sidebar-dark .app-header .app-header-actions .account-logout,
body.app-page.sidebar-dark .app-header .app-header-actions .header-signout-preview {
    border-color: var(--line) !important;
    background: #2d2d30 !important;
    color: #d4d4d4 !important;
}
body.app-page.sidebar-dark .app-header .mobile-header-menu {
    border-color: var(--line);
    background: #252526;
    color: var(--ink);
}
body.app-page.sidebar-dark .app-header .mobile-header-menu-item { color: var(--ink); }
body.app-page.sidebar-dark .app-header a.mobile-header-menu-item:hover,
body.app-page.sidebar-dark .app-header button.mobile-theme-toggle:hover {
    background: #2a2d2e !important;
    color: #e7e7e7 !important;
}
body.app-page.sidebar-dark .app-header .mobile-header-menu-icon { color: #a0a0a0; }
body.app-page.sidebar-dark .app-header .mobile-theme-toggle-check { color: #f87171; }
body.app-page.sidebar-dark :is(.ops-notice, .dashboard-preview-notice) {
    border-color: #384b61 !important;
    background: #202b38 !important;
    color: #c5d8ed !important;
}
body.app-page.sidebar-dark :is(.ops-map, .nav-search-wrap) { border-color: var(--line); }
body.app-page.sidebar-dark .ops-map {
    background-color: #202124;
    background-image: radial-gradient(#4a4a4a 1px, transparent 1px);
}
body.app-page.sidebar-dark .ops-map-node { border-color: #252526; }
body.app-page.sidebar-dark .pc-dot { box-shadow: inset 0 0 0 8px #252526, 0 0 0 0 currentColor; }
body.app-page.sidebar-dark :is(.ops-badge, .pc-chip.is-online) { background: #263b2d; color: #8bd49c; border-color: #385943; }
body.app-page.sidebar-dark :is(.ops-badge.is-suspended, .ops-badge.is-pending, .ops-badge.is-open, .ops-badge.is-queued, .ops-badge.is-draft, .pc-chip.is-due) { background: #41351f; color: #e6c27a; border-color: #66542e; }
body.app-page.sidebar-dark :is(.ops-badge.is-deactivated, .ops-badge.is-expired, .ops-badge.is-cancelled, .ops-badge.is-offline, .ops-badge.is-failed, .ops-badge.is-overdue, .ops-badge.is-disabled, .pc-chip.is-expired) { background: #43282a; color: #f09a9a; border-color: #694044; }
body.app-page.sidebar-dark :is(.ops-badge.is-online, .ops-badge.is-paid, .ops-badge.is-sent, .ops-badge.is-resolved, .ops-badge.is-enabled) { background: #263b2d; color: #8bd49c; }
body.app-page.sidebar-dark .dashboard-shell .text-link,
body.app-page.sidebar-dark .business-dashboard .business-secondary-link { color: #8ab4f8 !important; }

.app-page main.router-management-page {
    display: grid;
    align-content: start;
    gap: 16px;
}
.app-page main.router-management-page > :is(.page-header, .alert, .router-add-form, .router-list-panel, section) {
    min-width: 0;
    margin: 0 !important;
}
.app-page main.router-management-page > .page-header { padding-bottom: 2px; }
.app-page main.router-management-page > .page-header h1 { margin-bottom: 4px; font-size: 24px; }
.app-page main.router-management-page > .page-header p { margin: 0; }
.app-page main.router-management-page > .router-add-form,
.app-page main.router-management-page > section:not(.router-list-panel),
.app-page main.router-management-page > .router-list-panel {
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    color: var(--ink);
    box-shadow: 0 1px 3px rgb(15 23 42 / 7%);
}
.app-page main.router-management-page > section:not(.router-list-panel) > h2 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 650;
}
.app-page main.router-management-page p { line-height: 1.5; }
.app-page main.router-management-page > section > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.app-page main.router-management-page .router-add-form > summary {
    color: var(--ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 650;
    list-style-position: inside;
}
.app-page main.router-management-page .router-add-form[open] > summary { margin-bottom: 12px; }
.app-page main.router-management-page .router-add-form > p {
    margin: 0 0 14px !important;
    color: var(--muted) !important;
    font-size: 12px !important;
}
.app-page main.router-management-page .form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}
.app-page main.router-management-page .form-group {
    min-width: 0;
    gap: 5px;
}
.app-page main.router-management-page .form-group label,
.app-page main.router-management-page .router-edit-form > label {
    color: var(--ink);
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.35;
}
.app-page main.router-management-page .form-group small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.app-page main.router-management-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.app-page main.router-management-page select,
.app-page main.router-management-page textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 36px !important;
    padding: 7px 13px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font: inherit;
    font-size: 12px !important;
    line-height: 1.2;
}
.app-page main.router-management-page button,
.app-page main.router-management-page .btn,
.app-page main.router-management-page .router-add-link {
    display: inline-flex;
    min-height: 32px !important;
    align-items: center;
    justify-content: center;
    padding: 0 13px !important;
    border: 1px solid var(--brand) !important;
    border-radius: 999px !important;
    background: var(--brand) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.app-page main.router-management-page button:hover,
.app-page main.router-management-page .btn:hover,
.app-page main.router-management-page .router-add-link:hover { border-color: var(--brand-dark) !important; background: var(--brand-dark) !important; }
.app-page main.router-management-page button:disabled { cursor: not-allowed; opacity: .55; }
.app-page main.router-management-page .router-list-panel { overflow: hidden; }
.app-page main.router-management-page .router-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}
.app-page main.router-management-page .router-list-heading h2 {
    margin: 0 0 3px !important;
    color: var(--ink) !important;
    font-size: 16px !important;
}
.app-page main.router-management-page .router-list-heading p { margin: 0; color: var(--muted) !important; font-size: 11px; }
.app-page main.router-management-page .router-list-wrap,
.app-page main.router-management-page .table-wrap,
.app-page main.router-management-page .table-wrapper {
    max-width: 100%;
    margin: 0;
    overflow: auto !important;
    border: 1px solid var(--line);
    border-radius: 9px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.app-page main.router-management-page table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate !important;
    border-spacing: 0;
    color: var(--ink);
    font-size: 11px;
    text-align: left;
}
.app-page main.router-management-page .router-list-table {
    min-width: 1624px;
    table-layout: fixed;
}
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(1) { width: 54px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(2) { width: 190px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(3) { width: 120px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(4) { width: 165px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(5) { width: 105px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(6) { width: 155px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(7) { width: 190px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(8) { width: 210px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(9) { width: 155px; }
.app-page main.router-management-page .router-list-table :is(th, td):nth-child(10) { width: 280px; }
.app-page main.router-management-page th {
    height: 36px;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--line) !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 9px !important;
    font-weight: 720 !important;
    letter-spacing: .035em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
.app-page main.router-management-page td {
    min-height: 44px;
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    line-height: 1.4;
    vertical-align: middle !important;
}
.app-page main.router-management-page .router-list-table td {
    height: 52px;
    max-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-page main.router-management-page .router-list-table td:nth-child(8) { overflow: visible; text-overflow: clip; }
.app-page main.router-management-page .router-list-table td:nth-child(7) form { max-width: 100%; }
.app-page main.router-management-page .router-list-table .router-portal-details { overflow: visible; text-overflow: clip; }
.app-page main.router-management-page tbody tr:hover td { background: var(--canvas) !important; }
.app-page main.router-management-page tbody tr:last-child td { border-bottom: 0 !important; }
.app-page main.router-management-page .router-list-table .router-id-cell { color: var(--muted) !important; }
.app-page main.router-management-page .router-list-table .router-name { display: block; color: var(--ink); font-weight: 650; }
.app-page main.router-management-page .router-list-table .router-name,
.app-page main.router-management-page .router-list-table .router-row-meta,
.app-page main.router-management-page .router-list-table td:nth-child(4),
.app-page main.router-management-page .router-list-table td:nth-child(6) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-page main.router-management-page .router-list-table .router-row-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.app-page main.router-management-page .router-list-table .router-host-cell { max-width: 180px; }
.app-page main.router-management-page .router-services-table { min-width: 975px; table-layout: fixed; }
.app-page main.router-management-page .router-services-table :is(th, td):nth-child(1) { width: 170px; }
.app-page main.router-management-page .router-services-table :is(th, td):nth-child(2) { width: 155px; }
.app-page main.router-management-page .router-services-table :is(th, td):nth-child(3) { width: 180px; }
.app-page main.router-management-page .router-services-table :is(th, td):nth-child(4) { width: 150px; }
.app-page main.router-management-page .router-services-table :is(th, td):nth-child(5) { width: 130px; }
.app-page main.router-management-page .router-services-table :is(th, td):nth-child(6) { width: 190px; }
.app-page main.router-management-page .router-services-table td {
    height: 52px;
    max-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-page main.router-management-page .router-services-table td form { max-width: 100%; }
.app-page main.router-management-page .router-status-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a5b13;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.app-page main.router-management-page .router-status-badge.is-online { background: #ecfdf3; color: #167447; }
.app-page main.router-management-page .router-status-badge.is-offline,
.app-page main.router-management-page .router-status-badge.is-disabled { background: #f1f5f9; color: #64748b; }
.app-page main.router-management-page td form { display: inline-flex; align-items: center; margin: 0 !important; }
.app-page main.router-management-page .router-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; }
.app-page main.router-management-page .router-row-actions button { min-height: 28px !important; padding: 0 10px !important; font-size: 10px !important; }
.app-page main.router-management-page .router-edit-button {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
}
.app-page main.router-management-page .router-edit-button:hover { border-color: var(--brand) !important; color: var(--brand-dark) !important; background: var(--surface) !important; }
.app-page main.router-management-page .router-delete-button {
    border-color: #fecaca !important;
    background: #fff7f7 !important;
    color: #b4232c !important;
}
.app-page main.router-management-page .router-delete-button:hover { border-color: #fecaca !important; background: #fee2e2 !important; color: #b4232c !important; }
.app-page main.router-management-page .router-delete-button:disabled { opacity: .48; }
.app-page main.router-management-page .router-empty-state { padding: 22px 10px !important; color: var(--muted) !important; text-align: center; }
.app-page main.router-management-page .router-portal-details { min-width: 145px; white-space: normal; }
.app-page main.router-management-page .router-portal-details > summary { color: var(--brand-dark); cursor: pointer; font-size: 10px; font-weight: 650; }
.app-page main.router-management-page .router-portal-details-body { width: 250px; max-width: min(250px, 70vw); padding-top: 7px; white-space: normal; }
.app-page main.router-management-page .router-portal-details-body form { display: flex; flex-wrap: wrap; gap: 6px; }
.app-page main.router-management-page .router-portal-details-body label,
.app-page main.router-management-page .router-portal-details-body small { display: block; width: 100%; margin: 2px 0; white-space: normal; }
.app-page main.router-management-page .router-portal-details-body select { max-width: 100%; }
.app-page main.router-management-page .router-portal-details-body button { min-height: 30px !important; }
body.app-page.sidebar-dark main.router-management-page > :is(.router-add-form, section) { box-shadow: none; }
body.app-page.sidebar-dark main.router-management-page th { background: #2d2d30 !important; color: #bcbcbc !important; }
body.app-page.sidebar-dark main.router-management-page .router-edit-button {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
}
body.app-page.sidebar-dark main.router-management-page .router-delete-button {
    border-color: #694044 !important;
    background: #43282a !important;
    color: #f09a9a !important;
}
.app-page .router-edit-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: 90vh;
    overflow: auto;
    margin: auto;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 18px 50px rgb(15 23 42 / 20%);
}
.app-page .router-edit-dialog::backdrop { background: rgb(15 23 42 / 42%); }
.app-page .router-edit-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.app-page .router-edit-dialog-heading h2 { margin: 0 0 5px; color: var(--ink); font-size: 19px; }
.app-page .router-edit-dialog-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.app-page .router-edit-dialog .router-edit-close {
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-size: 21px !important;
}
.app-page .router-edit-dialog .router-edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}
.app-page .router-edit-dialog .router-edit-form > label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--ink); font-size: 11px; font-weight: 650; }
.app-page .router-edit-dialog .router-edit-form > label span { color: var(--muted); font-weight: 400; }
.app-page .router-edit-dialog .router-edit-form input,
.app-page .router-edit-dialog .router-edit-form select {
    width: 100%;
    min-height: 36px !important;
    padding: 7px 13px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font: inherit;
    font-size: 12px;
}
.app-page .router-edit-dialog .router-edit-form-actions { display: flex; justify-content: flex-end; gap: 8px; grid-column: 1 / -1; margin-top: 4px; }
.app-page .router-edit-dialog .router-edit-form-actions button { min-height: 32px !important; border-radius: 999px !important; font-size: 11px !important; }
@media (max-width: 520px) {
    .app-page .router-edit-dialog { padding: 16px; }
    .app-page .router-edit-dialog .router-edit-form { grid-template-columns: minmax(0, 1fr); }
    .app-page .router-edit-dialog .router-edit-form-actions { grid-column: auto; }
}
@media (max-width: 980px) {
    .app-page main.router-management-page .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .app-page main.router-management-page { gap: 12px; }
    .app-page main.router-management-page > :is(.router-add-form, .router-list-panel, section) { padding: 13px !important; }
    .app-page main.router-management-page .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .app-page main.router-management-page .router-list-heading { align-items: center; }
    .app-page main.router-management-page table { min-width: 720px; }
    .app-page main.router-management-page .router-list-table { min-width: 1624px; }
}
@media (max-width: 520px) {
    .app-page main.router-management-page .form-grid { grid-template-columns: minmax(0, 1fr); }
    .app-page main.router-management-page .router-list-heading { align-items: flex-start; }
    .app-page main.router-management-page .router-list-heading .router-add-link { min-height: 30px !important; padding-inline: 10px !important; }
    .app-page .router-edit-dialog .router-edit-form { grid-template-columns: minmax(0, 1fr); }
    .app-page .router-edit-dialog .router-edit-form-actions { grid-column: auto; }
}

/* Consistent native dropdowns across page content. */
.app-page main select, .app-page > dialog select,
.selfcare-page main select, .installer-page main select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 12px 12px !important;
    line-height: 1.35;
    text-overflow: ellipsis;
    cursor: pointer;
}
.app-page main select:disabled, .app-page > dialog select:disabled,
.selfcare-page main select:disabled, .installer-page main select:disabled {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed;
    opacity: 1;
}
.app-page main select option, .app-page > dialog select option,
.selfcare-page main select option, .installer-page main select option {
    background: #fff;
    color: #0f172a;
}
body.app-page.sidebar-dark main select,
body.app-page.sidebar-dark > dialog select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%23c5c5c5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.app-page.sidebar-dark main select:disabled,
body.app-page.sidebar-dark > dialog select:disabled {
    background-color: #252525 !important;
    color: #858585 !important;
}
@supports (appearance: base-select) {
    .app-page main select, .app-page > dialog select,
    .selfcare-page main select, .installer-page main select {
        appearance: base-select !important;
        -webkit-appearance: base-select !important;
        background-image: none !important;
        padding-right: 12px !important;
    }
    .app-page main select::picker(select), .app-page > dialog select::picker(select),
    .selfcare-page main select::picker(select), .installer-page main select::picker(select) {
        appearance: base-select;
        margin-block: 5px;
        padding: 5px;
        overflow: auto;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        color: #0f172a;
        box-shadow: 0 12px 30px rgb(15 23 42 / 16%);
    }
    .app-page main select::picker-icon, .app-page > dialog select::picker-icon,
    .selfcare-page main select::picker-icon, .installer-page main select::picker-icon {
        color: #64748b;
        transition: transform .15s ease;
    }
    .app-page main select:open::picker-icon, .app-page > dialog select:open::picker-icon,
    .selfcare-page main select:open::picker-icon, .installer-page main select:open::picker-icon {
        transform: rotate(180deg);
    }
    .app-page main select option, .app-page > dialog select option,
    .selfcare-page main select option, .installer-page main select option {
        min-height: 36px;
        padding: 8px 11px;
        border-radius: 8px;
        background: transparent;
        color: #334155;
        font: inherit;
        font-size: 13px;
        cursor: pointer;
    }
    .app-page main select option:checked, .app-page > dialog select option:checked,
    .selfcare-page main select option:checked, .installer-page main select option:checked {
        background: #fef2f2;
        color: #b91c1c;
        font-weight: 650;
    }
    .app-page main select option:hover, .app-page > dialog select option:hover,
    .selfcare-page main select option:hover, .installer-page main select option:hover,
    .app-page main select option:focus, .app-page > dialog select option:focus,
    .selfcare-page main select option:focus, .installer-page main select option:focus {
        background: #f8fafc;
        color: #0f172a;
    }
    .app-page main select option:disabled, .app-page > dialog select option:disabled,
    .selfcare-page main select option:disabled, .installer-page main select option:disabled {
        color: #94a3b8;
        cursor: not-allowed;
    }
    body.app-page.sidebar-dark main select::picker(select),
    body.app-page.sidebar-dark > dialog select::picker(select) {
        border-color: #3c3c3c;
        background: #1e1e1e;
        color: #e2e8f0;
    }
    body.app-page.sidebar-dark main select::picker-icon,
    body.app-page.sidebar-dark > dialog select::picker-icon { color: #c5c5c5; }
    body.app-page.sidebar-dark main select option,
    body.app-page.sidebar-dark > dialog select option {
        color: #d4d4d4;
    }
    body.app-page.sidebar-dark main select option:checked,
    body.app-page.sidebar-dark > dialog select option:checked {
        background: #3a2426;
        color: #fca5a5;
    }
    body.app-page.sidebar-dark main select option:hover,
    body.app-page.sidebar-dark > dialog select option:hover,
    body.app-page.sidebar-dark main select option:focus,
    body.app-page.sidebar-dark > dialog select option:focus {
        background: #2a2d2e;
        color: #f8fafc;
    }
}

/* Keep editable controls compact and aligned inside data-table cells. */
.app-page main table td :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
),
.selfcare-page main table td :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 32px !important;
    height: 32px;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.2;
}
.app-page main table td > label:has(> select),
.selfcare-page main table td > label:has(> select) {
    display: grid;
    min-width: 0;
    gap: 4px;
    width: 100%;
    color: #475569;
    font-size: 10px !important;
    line-height: 1.3;
}
.app-page main table td > label:has(+ select),
.selfcare-page main table td > label:has(+ select) {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    color: #475569;
    font-size: 10px !important;
    line-height: 1.3;
}
.app-page main table td > label + select,
.selfcare-page main table td > label + select {
    display: block;
}
.app-page main table td select,
.selfcare-page main table td select {
    padding-right: 28px !important;
    background-position: right 9px center !important;
    background-size: 10px 10px !important;
}
.app-page main table td > form:not(.pc-bulk),
.app-page main table td form.ops-inline-form,
.app-page main table td form.olt-status-form,
.app-page main.router-management-page table td form,
.selfcare-page main table td > form {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    margin: 0 !important;
}
.app-page main table td > form:not(.pc-bulk) > select,
.app-page main table td form.ops-inline-form > select,
.app-page main table td form.olt-status-form > select,
.app-page main.router-management-page table td form > select,
.selfcare-page main table td > form > select {
    flex: 1 1 118px;
    width: auto;
    max-width: 180px;
}
.app-page main table td form > button:not(.olt-icon-action),
.app-page main table td > button:not(.olt-icon-action),
.selfcare-page main table td form > button {
    min-width: max-content;
    min-height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.2;
}
.app-page main table td .ops-inline-form button {
    min-height: 32px !important;
}
.app-page.sidebar-dark main table td :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.selfcare-page.sidebar-dark main table td :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    border-color: #3c3c3c !important;
    background-color: #1e1e1e !important;
    color: #d4d4d4 !important;
}
@media (max-width: 720px) {
    .app-page main table td :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ),
    .selfcare-page main table td :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        min-height: 30px !important;
        height: 30px;
        font-size: 10px !important;
    }
    .app-page main table td form > button:not(.olt-icon-action),
    .app-page main table td > button:not(.olt-icon-action),
    .selfcare-page main table td form > button {
        min-height: 30px !important;
        padding-inline: 9px !important;
        font-size: 10px !important;
    }
}

html body,
html body :is(*, #project-wide-font-weight) {
    font-weight: 700 !important;
}

body.app-page :is(
    .card,
    .dashboard-metric,
    .dashboard-panel,
    .metrics > div,
    .ops-stat,
    .ops-panel,
    .ops-card,
    .ops-role,
    .ops-filterbar,
    .pc-card,
    .pc-panel,
    .pc-info-card,
    .business-kpi,
    .business-health-panel,
    .business-inventory-grid > div,
    .business-payment-row,
    .business-secondary-link,
    .business-period-form,
    .business-period-bar,
    .quick-action-list > a,
    .router-add-form,
    .router-list-panel,
    .table-wrap,
    .pc-table-wrap,
    .ops-table-wrap
),
body.selfcare-page :is(
    .selfcare-panel,
    .selfcare-legacy-box,
    .selfcare-help-card,
    .selfcare-onu-grid > div,
    .selfcare-recharge-summary,
    .selfcare-legacy-box .tile,
    .selfcare-account-grid .tile,
    .summary > div
) {
    background: #0f172a00 !important;
    box-shadow: 0 0 0 0 #00000000, 0 3px 12px rgb(0 0 0 / 12%) !important;
}

.app-page main .dashboard-record-panel .table-wrap {
    overflow-x: hidden;
}
.app-page main .dashboard-record-panel .table-wrap > table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
}
.app-page main .dashboard-record-panel .table-wrap :is(th, td) {
    overflow: hidden;
    padding-right: 4px !important;
    padding-left: 4px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-page main .dashboard-record-panel .table-wrap :is(th, td) {
    text-align: center;
}
.app-page main .dashboard-record-panel#latest-invoices .table-wrap th:nth-child(1),
.app-page main .dashboard-record-panel#latest-invoices .table-wrap td:nth-child(1) { width: 30%; }
.app-page main .dashboard-record-panel#latest-invoices .table-wrap th:nth-child(2),
.app-page main .dashboard-record-panel#latest-invoices .table-wrap td:nth-child(2) { width: 35%; }
.app-page main .dashboard-record-panel#latest-invoices .table-wrap th:nth-child(3),
.app-page main .dashboard-record-panel#latest-invoices .table-wrap td:nth-child(3) { width: 35%; }
.app-page main .dashboard-record-panel.recent-payments .table-wrap :is(th, td):nth-child(1) { width: 30%; }
.app-page main .dashboard-record-panel.recent-payments .table-wrap :is(th, td):nth-child(2) { width: 25%; }
.app-page main .dashboard-record-panel.recent-payments .table-wrap :is(th, td):nth-child(3) { width: 25%; }
.app-page main .dashboard-record-panel.recent-payments .table-wrap :is(th, td):nth-child(4) { width: 20%; }
.app-page main .dashboard-record-panel:is(#upcoming-expiries, #latest-expired) .table-wrap th:nth-child(1),
.app-page main .dashboard-record-panel:is(#upcoming-expiries, #latest-expired) .table-wrap td:nth-child(1),
.app-page main .dashboard-record-panel:is(#upcoming-expiries, #latest-expired) .table-wrap th:nth-child(3),
.app-page main .dashboard-record-panel:is(#upcoming-expiries, #latest-expired) .table-wrap td:nth-child(3) { width: 35%; }
.app-page main .dashboard-record-panel:is(#upcoming-expiries, #latest-expired) .table-wrap th:nth-child(2),
.app-page main .dashboard-record-panel:is(#upcoming-expiries, #latest-expired) .table-wrap td:nth-child(2) { width: 30%; }

body:is(.app-page, .selfcare-page, .installer-page) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]) {
    box-shadow: 0 2px 6px rgb(15 23 42 / 10%);
    transition: box-shadow .3s ease;
}
body:is(.app-page, .selfcare-page, .installer-page) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]):focus {
    outline: none;
    box-shadow: 0 3px 8px rgb(185 28 28 / 58%) !important;
}

body.app-page .app-sidebar .nav-link,
body.app-page .app-sidebar .nav-group > summary { border-radius: 10px !important; }

body.app-page:not(.sidebar-dark) .app-sidebar .nav-group > summary {
    border-color: transparent !important;
    background: #fafbfc !important;
    box-shadow: 0 1px 3px rgb(15 23 42 / 7%) !important;
}
body.app-page:not(.sidebar-dark) .app-sidebar .nav-group > summary:hover {
    background: #f5f6f7 !important;
    box-shadow: 0 2px 5px rgb(15 23 42 / 10%) !important;
}
body.app-page:not(.sidebar-dark) .app-sidebar .nav-group[open] > summary {
    border-color: #fde8e8 !important;
    background: var(--brand-soft) !important;
    box-shadow: 0 2px 5px rgb(15 23 42 / 12%) !important;
}
body.app-page.sidebar-dark .app-sidebar .nav-group > summary {
    border-color: transparent !important;
    background: #202122 !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 18%) !important;
}
body.app-page.sidebar-dark .app-sidebar .nav-group > summary:hover {
    background: #2a2d2e !important;
    box-shadow: 0 2px 5px rgb(0 0 0 / 24%) !important;
}
body.app-page.sidebar-dark .app-sidebar .nav-group[open] > summary {
    border-color: #5b3032 !important;
    background: #3b2022 !important;
    box-shadow: 0 2px 5px rgb(0 0 0 / 24%) !important;
}
body.app-page.has-sidebar .mobile-header-menu-item,
body.app-page.has-sidebar .mobile-settings-menu .mobile-header-menu-item,
body.app-page.has-sidebar .mobile-settings-menu button.mobile-theme-toggle { border-radius: 10px !important; }
body.app-page.has-sidebar .mobile-header-menu:not([hidden]) { border-radius: 14px; }
body.app-page.has-sidebar .mobile-header-menu-item { border: 1px solid transparent !important; background: #fafbfc !important; box-shadow: 0 1px 3px rgb(15 23 42 / 7%) !important; transition: background-color .15s ease, box-shadow .15s ease; }
body.app-page.has-sidebar .mobile-header-menu-item:hover, body.app-page.has-sidebar .mobile-header-menu-item:focus-visible { background: #f5f6f7 !important; box-shadow: 0 2px 5px rgb(15 23 42 / 10%) !important; }
body.app-page.sidebar-dark.has-sidebar .mobile-header-menu-item { background: rgb(255 255 255 / 6%) !important; box-shadow: 0 1px 3px rgb(0 0 0 / 24%) !important; }
body.app-page.sidebar-dark.has-sidebar .mobile-header-menu-item:hover { background: rgb(255 255 255 / 10%) !important; box-shadow: 0 2px 5px rgb(0 0 0 / 30%) !important; }
body.app-page.has-sidebar .app-header .mobile-header-menu .mobile-header-menu-item { background: #fafbfc !important; box-shadow: 0 1px 3px rgb(15 23 42 / 7%) !important; color: #1e293b; }
body.app-page.has-sidebar .app-header .mobile-header-menu .mobile-header-menu-item:is(:hover, :focus-visible) { background: #f5f6f7 !important; box-shadow: 0 2px 5px rgb(15 23 42 / 10%) !important; color: #1e293b !important; }
body.app-page.sidebar-dark.has-sidebar .app-header .mobile-header-menu .mobile-header-menu-item { background: rgb(255 255 255 / 6%) !important; box-shadow: 0 1px 3px rgb(0 0 0 / 24%) !important; color: #e7e7e7; }
body.app-page.sidebar-dark.has-sidebar .app-header .mobile-header-menu .mobile-header-menu-item:is(:hover, :focus-visible) { background: rgb(255 255 255 / 10%) !important; box-shadow: 0 2px 5px rgb(0 0 0 / 30%) !important; color: #e7e7e7 !important; }
body.app-page.has-sidebar:not(.sidebar-dark) .app-header .mobile-header-menu button.mobile-theme-toggle { background: #fafbfc !important; }
body.app-page.has-sidebar:not(.sidebar-dark) .app-header .mobile-header-menu button.mobile-theme-toggle:is(:hover, :focus-visible) { background: #f5f6f7 !important; }

body.app-page.has-sidebar .mobile-profile-menu { padding: 8px; }
body.app-page.has-sidebar .app-header-actions .mobile-profile-menu > strong { padding: 2px 8px 0; font-size: 12px; }
body.app-page.has-sidebar .app-header-actions .mobile-profile-menu > span:not(.mobile-header-menu-item) { margin-bottom: 5px; padding: 0 8px 4px; font-size: 11px; font-weight: 700; }
body.app-page.has-sidebar .mobile-profile-menu .mobile-header-menu-item { display: flex !important; width: 100%; min-height: 36px; align-items: center; gap: 9px; margin: 0; padding: 9px 10px !important; color: var(--ink); font-size: 12px; font-weight: 500 !important; line-height: 1.3; text-align: left; text-decoration: none !important; white-space: nowrap; }
body.app-page.has-sidebar .mobile-profile-menu .mobile-header-menu-item span { display: inline !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit; }
body.app-page.has-sidebar .mobile-profile-menu .mobile-header-menu-item .mobile-header-menu-icon { display: inline-flex !important; width: 16px; height: 16px; flex: 0 0 16px; align-items: center; justify-content: center; color: #64748b !important; }
body.app-page.has-sidebar .mobile-profile-menu .mobile-header-menu-icon .sidebar-icon-svg { width: 16px; height: 16px; }
body.app-page.has-sidebar .mobile-profile-menu .mobile-header-menu-item.is-unavailable { opacity: .7; cursor: not-allowed; }
body.app-page.has-sidebar .mobile-profile-logout { display: block; margin: 0; }

body.app-page.has-sidebar .app-header .app-header-actions .mobile-profile-menu .mobile-header-menu-item { display: flex !important; align-items: center; gap: 9px; padding: 9px 10px !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: none !important; text-decoration-line: none !important; }
body.app-page.has-sidebar .app-header .app-header-actions .mobile-profile-menu .mobile-header-menu-item > span { display: inline-flex !important; padding: 0 !important; color: inherit; font-size: 12px !important; font-weight: 500 !important; text-decoration: none !important; }
body.app-page.has-sidebar .app-header .app-header-actions .mobile-profile-menu .mobile-header-menu-item > .mobile-header-menu-icon { width: 16px; height: 16px; flex: 0 0 16px; color: #64748b; }

body.app-page.has-sidebar .app-header .app-header-actions .mobile-profile-menu .mobile-header-menu-item > span:not(.mobile-header-menu-icon) { color: var(--ink) !important; font-size: 14px !important; font-weight: 700 !important; }
body.app-page.has-sidebar .app-header .app-header-actions .mobile-profile-menu .mobile-header-menu-item.is-unavailable { opacity: 1; }

body.app-page.sidebar-collapsed .app-sidebar .nav-submenu .nav-link.nav-child::after { inset: 3px 5px !important; }
body.app-page.has-sidebar .dashboard-metrics .dashboard-metric-icon {
    font-size: 0 !important;
}
body.app-page.has-sidebar .dashboard-metrics .dashboard-metric-icon::after {
    display: block;
    color: inherit;
    font-family: "Segoe UI Symbol", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
body.app-page.has-sidebar .dashboard-metrics > :nth-child(1) .dashboard-metric-icon::after { content: "\2659"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(2) .dashboard-metric-icon::after { content: "\25A6"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(3) .dashboard-metric-icon::after { content: "\25A6"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(4) .dashboard-metric-icon::after { content: "\2713"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(5) .dashboard-metric-icon::after { content: "\2713"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(6) .dashboard-metric-icon::after { content: "\223F"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(7) .dashboard-metric-icon::after { content: "\25CE"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(8) .dashboard-metric-icon::after { content: "\25CF"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(9) .dashboard-metric-icon::after { content: "\223F"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(10) .dashboard-metric-icon::after { content: "\25CE"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(11) .dashboard-metric-icon::after { content: "\25F7"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(12) .dashboard-metric-icon::after { content: "\25F7"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(13) .dashboard-metric-icon::after { content: "\25F7"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(14) .dashboard-metric-icon::after { content: "\2026"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(15) .dashboard-metric-icon::after { content: "\2198"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(16) .dashboard-metric-icon::after { content: "\2016"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(17) .dashboard-metric-icon::after { content: "\09F3"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(18) .dashboard-metric-icon::after { content: "\09F3"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(19) .dashboard-metric-icon::after { content: "\09F3"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(20) .dashboard-metric-icon::after { content: "\09F3"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(21) .dashboard-metric-icon::after { content: "\09F3"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(22) .dashboard-metric-icon::after { content: "\2211"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(23) .dashboard-metric-icon::after { content: "\2211"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(24) .dashboard-metric-icon::after { content: "\25A4"; }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(25) .dashboard-metric-icon::after { content: "\2657"; }
body.app-page.has-sidebar .dashboard-metrics .dashboard-metric-icon::after {
    width: 20px;
    height: 20px;
    content: "";
    background: currentColor;
    -webkit-mask: var(--metric-icon) center / contain no-repeat;
    mask: var(--metric-icon) center / contain no-repeat;
}
body.app-page.has-sidebar .dashboard-metrics > :nth-child(1) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M3 20v-1a6 6 0 0 1 12 0v1M16 5a3 3 0 0 1 0 6m2 3a5 5 0 0 1 3 5v1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(2) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(3) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M12 13v5m-2.5-2.5h5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(4) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(5) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m8 12 2.5 2.5L16 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(6) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(7) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(8) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(9) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(10) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8.5a15 15 0 0 1 20 0M5 12a10 10 0 0 1 14 0m-11 3.5a5 5 0 0 1 8 0M12 19h.01' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(11) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(12) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(13) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(14) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 8v4m0 4h.01' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(15) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17 9 11l4 4 8-9M15 6h6v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(16) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M9 9v6m6-6v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(17) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(18) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(19) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(20) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(21) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='20' height='13' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M2 10h20m-15 5h4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(22) .dashboard-metric-icon,
body.app-page.has-sidebar .dashboard-metrics > :nth-child(23) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19V5m0 14h16M7 16l4-4 3 2 5-7m-4 0h4v4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(24) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 8h8M8 12h8m-8 4h5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(25) .dashboard-metric-icon { --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M3 20v-1a6 6 0 0 1 12 0v1m2-13a3 3 0 0 1 0 6m1 2a5 5 0 0 1 3 5v1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.app-page.has-sidebar .dashboard-metrics .dashboard-metric .dashboard-metric-icon {
    border: 1px solid rgb(255 255 255 / 90%);
    border-radius: 12px;
    background: linear-gradient(145deg, #fff, #e8eefc);
    box-shadow: 0 4px 9px rgb(34 54 88 / 15%), inset 0 1px 0 #fff;
    color: #4263a8;
}
body.app-page.has-sidebar .dashboard-metrics > :nth-child(2n) .dashboard-metric-icon { color: #8a4fc4; background: linear-gradient(145deg, #fff, #f0e5ff); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(3n) .dashboard-metric-icon { color: #16856f; background: linear-gradient(145deg, #fff, #dcf7ed); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(5n) .dashboard-metric-icon { color: #c17a16; background: linear-gradient(145deg, #fff, #fff0cf); }
body.app-page.has-sidebar .dashboard-metrics > :nth-child(7n) .dashboard-metric-icon { color: #d14352; background: linear-gradient(145deg, #fff, #ffe1e5); }
body.app-page.has-sidebar .dashboard-metrics .dashboard-metric .dashboard-metric-icon::after {
    width: 21px !important;
    height: 21px !important;
    content: "" !important;
    background: currentColor !important;
    font-size: 0 !important;
    -webkit-mask: var(--metric-icon) center / contain no-repeat !important;
    mask: var(--metric-icon) center / contain no-repeat !important;
}
body.app-page.has-sidebar .dashboard-metrics .dashboard-metric .dashboard-metric-icon { border: 1px solid #ececf0 !important; }
body.app-page :is(.mobile-header-menu, .mobile-settings-menu, .mobile-profile-menu, .global-search-results, .dropdown-menu, .pc-menu-list, [role="menu"], [role="listbox"]) { background: #ececf0 !important; background-color: #ececf0 !important; }
body.app-page main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):is(:not(:focus), :focus) {
    border-color: #ececf0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
body.app-page .collection-chart .trend-bar {
    background: #f3c9cc !important;
    border-radius: 8px 8px 3px 3px !important;
    box-shadow: none !important;
}
body.app-page .collection-chart .trend-column:last-child .trend-bar { background: #dc2626 !important; }
body.app-page .collection-chart .trend-amount { color: #1b1b1f !important; }
body.app-page .collection-chart .trend-label { color: #6b6b73 !important; }

.rm-card{margin:0 0 16px;padding:20px;border:1px solid #e5e7eb;border-radius:18px;background:#fff}
.rm-card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rm-card h2{margin:0;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#475569}
.rm-card small{font-size:.7rem;color:#475569}
.rm-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rm-facts div{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:999px;background:#f8fafc;font-size:.72rem}
.rm-facts span,.rm-info span,.rm-gauge span{color:#64748b;text-transform:uppercase;font-size:.68rem}
.rm-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.rm-tile{padding:12px 14px;border-radius:14px;border:1px solid}
.rm-tile span{display:block;font-size:.68rem;text-transform:uppercase}
.rm-tile strong{font-size:.95rem}
.rm-tile.is-green{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.rm-tile.is-blue{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.rm-tile.is-indigo{background:#eef2ff;border-color:#c7d2fe;color:#4338ca}
.rm-ready{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:12px 18px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:.8rem}
.rm-ready i{width:8px;height:8px;border-radius:50%;background:#94a3b8}
.rm-summary{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;margin-bottom:24px}
.rm-info,.rm-gauge{padding:18px;border:1px solid #e5e7eb;border-radius:18px;background:#fff}
.rm-info p{display:flex;justify-content:space-between;margin:0 0 10px;font-size:.78rem}
.rm-gauge{display:flex;flex-direction:column;align-items:center;gap:10px}
.rm-ring{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#e5e7eb 0)}
.rm-ring b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;font-size:.8rem}
@media(max-width:900px){.rm-facts,.rm-tiles,.rm-summary{grid-template-columns:1fr 1fr}}

.rm-box{margin:0 0 24px;padding:20px;border:1px solid #e5e7eb;border-radius:20px;background:#fff;box-shadow:0 1px 3px rgb(15 23 42/6%)}
.rm-box .rm-card{margin:0 0 16px;padding:0 0 16px;border:0;border-bottom:1px solid #eef0f3;border-radius:0}
.rm-box .rm-summary{margin-bottom:0}

.cl-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;margin:0 0 16px}
.cl-filters label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:#475569}
.cl-filters input,.cl-filters select{padding:8px 10px;border:1px solid #d9dee7;border-radius:10px;font-size:.8rem}
.cl-search{grid-column:span 2}
.cl-actions{display:flex;gap:8px}


.dashboard-shell > .dashboard-metrics[aria-label="Customer summary"]{margin:0 0 16px !important}

/* Self-Care login (ported from the old portal design) */
.selfcare-page .sl-ic { width: 20px; height: 20px; flex: none; }
.selfcare-page .sl-top { position: relative; z-index: 3; padding: 14px 0; border-bottom: 1px solid #ececf0; background: #fff; }
.selfcare-page .sl-bar { display: flex; max-width: 1120px; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; padding: 0 20px; }
.selfcare-page .sl-logo img { display: block; width: 150px; height: auto; }
.selfcare-page .sl-sup { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fdeeef; color: #45454f !important; font-size: 13px; text-decoration: none; }
.selfcare-page .sl-sup .sl-ic { width: 16px; height: 16px; color: #e0262f; }
.selfcare-page .sl-sup b { color: #1b1b1f; }
.selfcare-page .sl-main { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - 68px); width: 100% !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
.selfcare-page .sl-hero { position: relative; display: flex; align-items: center; overflow: hidden; background: linear-gradient(160deg, #c91d26 0%, #e0262f 60%, #ee4a52 100%); color: #fff; }
.selfcare-page .sl-rings { position: absolute; right: -180px; bottom: -180px; width: 640px; height: 640px; }
.selfcare-page .sl-rings i { position: absolute; inset: 0; margin: auto; border: 1.5px solid rgb(255 255 255 / 18%); border-radius: 50%; }
.selfcare-page .sl-rings i:nth-child(1) { width: 160px; height: 160px; }
.selfcare-page .sl-rings i:nth-child(2) { width: 300px; height: 300px; }
.selfcare-page .sl-rings i:nth-child(3) { width: 460px; height: 460px; }
.selfcare-page .sl-rings i:nth-child(4) { width: 640px; height: 640px; border-color: rgb(255 255 255 / 10%); }
.selfcare-page .sl-rings::after { content: ""; position: absolute; inset: 0; width: 16px; height: 16px; margin: auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px rgb(255 255 255 / 22%); }
.selfcare-page .sl-hero-in { position: relative; max-width: 620px; margin-left: auto; padding: 48px 48px 56px; }
.selfcare-page .sl-pill { display: inline-block; margin-bottom: 18px; padding: 5px 14px; border-radius: 999px; background: rgb(255 255 255 / 16%); font-size: 12px; font-weight: 700; }
.selfcare-page .sl-hero h1 { margin: 0 0 14px; color: #fff; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.25; }
.selfcare-page .sl-lead { max-width: 480px; margin: 0 0 28px; color: #ffe3e5; font-size: 15px; }
.selfcare-page .sl-feats { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.selfcare-page .sl-feats li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 14px; background: rgb(255 255 255 / 10%); }
.selfcare-page .sl-fi { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 12px; background: #fff; color: #e0262f; }
.selfcare-page .sl-feats b { display: block; font-size: 14px; }
.selfcare-page .sl-feats div span { display: block; color: #ffe3e5; font-size: 12.5px; }
.selfcare-page .sl-side { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: #f7f7f8; }
.selfcare-page .sl-card { width: 100%; max-width: 420px; padding: 30px 28px 24px; border: 1px solid #ececf0; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgb(27 27 31 / 6%), 0 8px 24px rgb(27 27 31 / 7%); }
.selfcare-page .sl-card h2 { margin: 0; font-size: 22px; font-weight: 800; }
.selfcare-page .sl-sub { margin: 6px 0 14px; color: #7b7b88; font-size: 13px; }
.selfcare-page .sl-sub b { color: #45454f; }
.selfcare-page .sl-alert { margin: 0 0 6px; padding: 10px 12px; border: 1px solid #f4c7c3; border-radius: 10px; background: #fdecea; color: #b3261e; font-size: 13px; }
.selfcare-page .sl-card label { display: block; margin: 16px 0 6px; color: #45454f; font-size: 13px; font-weight: 700; }
.selfcare-page .sl-field { position: relative; display: flex; align-items: center; }
.selfcare-page .sl-field .sl-ic { position: absolute; left: 14px; color: #7b7b88; }
.selfcare-page .sl-field input { width: 100%; height: 48px; padding: 0 84px 0 44px; border: 1.5px solid #ececf0; border-radius: 12px; background: #fff; font: inherit; }
.selfcare-page .sl-field input:focus { border-color: #e0262f; outline: 0; box-shadow: 0 0 0 4px rgb(224 38 47 / 16%); }
.selfcare-page main .sl-eye { position: absolute; right: 6px; width: auto; min-height: 36px !important; padding: 0 12px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #e0262f !important; font-size: 13px !important; }
.selfcare-page main .sl-eye:hover { background: #fdeeef !important; }
.selfcare-page main .sl-btn { width: 100%; min-height: 48px !important; margin-top: 20px; border: 0 !important; border-radius: 12px !important; background: #e0262f !important; color: #fff !important; font-size: 15px !important; box-shadow: 0 6px 16px rgb(224 38 47 / 28%); }
.selfcare-page main .sl-btn:hover { background: #b81b23 !important; }
.selfcare-page .sl-help { display: grid; gap: 6px; margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: #fdeeef; color: #45454f; font-size: 13px; }
.selfcare-page .sl-help b { color: #1b1b1f; }
.selfcare-page .sl-help span { display: flex; align-items: center; gap: 8px; }
.selfcare-page .sl-help .sl-ic { width: 15px; height: 15px; color: #e0262f; }
@media (max-width: 860px) {
    .selfcare-page .sl-main { grid-template-columns: 1fr; min-height: 0; }
    .selfcare-page .sl-hero-in { max-width: none; margin: 0; padding: 32px 20px; }
    .selfcare-page .sl-rings { right: -260px; bottom: -260px; }
}
@media (max-width: 480px) {
    body.app-page.has-sidebar > header.app-header .app-header-actions { gap: 4px !important; }
    body.app-page .app-header-actions .desktop-header-shortcut { width: 32px; height: 32px; }
    body.app-page .app-header-actions .mobile-header-icon { width: 32px; height: 32px; }
}

/* Invoice report filter: aligned grid, mobile friendly */
.app-page .ops-filterbar.invoice-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 14px; align-items: end; }
.app-page .ops-filterbar.invoice-filter label { min-width: 0; }
.app-page .ops-filterbar.invoice-filter :is(input, select) { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.app-page .ops-filterbar.invoice-filter button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 720px) {
    .app-page .ops-filterbar.invoice-filter { grid-template-columns: 1fr 1fr; }
    .app-page .ops-filterbar.invoice-filter button { width: 100%; justify-self: stretch; }
    .app-page .ops-filterbar:not(.invoice-filter) { display: grid; grid-template-columns: 1fr; }
    .app-page .ops-filterbar:not(.invoice-filter) :is(input, select, button) { width: 100%; box-sizing: border-box; }
}
@media (max-width: 420px) { .app-page .ops-filterbar.invoice-filter { grid-template-columns: 1fr; } }