:root {
    color-scheme: light;
    --color-bg: #f2f7fc;
    --color-bg-elevated: #f8fbff;
    --color-surface: #ffffff;
    --color-surface-soft: #edf4fb;
    --color-sidebar: #073f70;
    --color-text: #172033;
    --color-text-soft: #3f4b5d;
    --color-muted: #6c788a;
    --color-border: #dbe5ef;
    --color-border-strong: #c5d3e1;
    --color-primary: #0b8290;
    --color-primary-strong: #076775;
    --color-primary-soft: #def4f5;
    --color-blue: #2f6fd6;
    --color-blue-soft: #e6efff;
    --color-violet: #7c4dcc;
    --color-violet-soft: #efe9ff;
    --color-amber: #b66a00;
    --color-amber-soft: #fff1d6;
    --color-green: #22835b;
    --color-green-soft: #def5e9;
    --color-red: #bf2f36;
    --color-red-soft: #ffe4e6;
    --shadow-sm: 0 1px 2px rgba(28, 48, 76, 0.07), 0 4px 14px rgba(28, 48, 76, 0.035);
    --shadow-md: 0 18px 48px rgba(24, 43, 70, 0.12);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --sidebar-width: 286px;
    --topbar-height: 78px;
    --transition: 160ms ease;
}

/* Customer create modal preview: one clean surface, compact two-column workflow. */
#customer-create-dialog {
    width: min(820px, calc(100vw - 28px));
}

#customer-create-dialog .app-dialog-shell {
    max-height: min(760px, calc(100vh - 28px));
    box-shadow: 0 28px 80px rgba(2, 12, 24, .42);
}

#customer-create-dialog .app-dialog-header {
    padding: 18px 56px 15px 22px;
}

#customer-create-dialog .app-dialog-body {
    padding: 18px 22px 20px;
}

#customer-create-dialog .customer-premium-form {
    display: grid;
    gap: 15px;
}

#customer-create-dialog .customer-primary-grid,
#customer-create-dialog .customer-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px;
}

#customer-create-dialog .customer-primary-grid .form-field,
#customer-create-dialog .customer-details-grid .form-field {
    min-width: 0;
    align-content: start;
}

#customer-create-dialog .form-field > span:first-child {
    margin-bottom: 6px;
    color: var(--color-text-soft);
    font-size: 11.5px;
    font-weight: 800;
}

#customer-create-dialog .v1-field-control,
#customer-create-dialog .phone-input {
    min-height: 42px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-soft) 72%, var(--color-surface));
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

#customer-create-dialog .v1-field-control:focus-within,
#customer-create-dialog .phone-input:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

#customer-create-dialog .v1-field-icon,
#customer-create-dialog .phone-input-icon {
    width: 42px;
    flex: 0 0 42px;
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
    color: var(--color-primary);
}

#customer-create-dialog .phone-country {
    width: 102px;
    flex: 0 0 102px;
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
}

#customer-create-dialog .v1-field-control .input,
#customer-create-dialog .v1-field-control .select,
#customer-create-dialog .phone-input .input {
    min-height: 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
}

#customer-create-dialog .customer-phone-feedback {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--color-green);
    font-size: 10.5px;
    font-weight: 700;
}

#customer-create-dialog .customer-phone-feedback.is-invalid {
    color: var(--color-red);
}

#customer-create-dialog .customer-phone-feedback-icon {
    display: inline-flex;
    align-items: center;
}

#customer-create-dialog .customer-phone-feedback svg {
    width: 14px;
    height: 14px;
}

#customer-create-dialog .customer-plan-control .select {
    font-weight: 750;
    transition: color var(--transition);
}

#customer-create-dialog .customer-plan-control.is-iptv .select {
    color: var(--color-blue);
}

#customer-create-dialog .customer-plan-control.is-p2p .select {
    color: var(--color-amber);
}

#customer-create-dialog .customer-plan-strip {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface));
}

#customer-create-dialog .customer-plan-strip > div,
#customer-create-dialog .customer-plan-strip-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#customer-create-dialog .customer-plan-strip small,
#customer-create-dialog .customer-plan-strip-meta small {
    color: var(--color-muted);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
}

#customer-create-dialog .customer-plan-strip strong {
    font-size: 12.5px;
}

#customer-create-dialog .customer-plan-strip [data-summary-line] {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#customer-create-dialog .customer-plan-strip-meta {
    grid-template-columns: repeat(2, minmax(70px, auto));
    gap: 16px;
    text-align: right;
}

#customer-create-dialog .customer-plan-strip-meta strong {
    color: var(--color-primary-strong);
}

#customer-create-dialog .customer-premium-details {
    border-top: 1px solid var(--color-border);
}

#customer-create-dialog .customer-premium-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

#customer-create-dialog .customer-premium-details summary::-webkit-details-marker {
    display: none;
}

#customer-create-dialog .customer-premium-details summary > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#customer-create-dialog .customer-premium-details summary > span svg {
    width: 15px;
    height: 15px;
    color: var(--color-primary);
}

#customer-create-dialog .customer-premium-details summary small {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 10.5px;
    font-weight: 500;
}

#customer-create-dialog .customer-premium-details summary > svg {
    width: 15px;
    height: 15px;
    color: var(--color-muted);
    transition: transform var(--transition);
}

#customer-create-dialog .customer-premium-details[open] summary > svg {
    transform: rotate(180deg);
}

#customer-create-dialog .customer-details-grid {
    padding: 2px 0 5px;
}

#customer-create-dialog .customer-details-grid .field-wide {
    grid-column: 1 / -1;
}

#customer-create-dialog .customer-commercial-grid {
    align-items: end;
}

#customer-create-dialog .customer-initial-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    grid-column: 1 / -1;
    padding: 10px 0 2px;
    border-top: 1px solid var(--color-border);
}

#customer-create-dialog .customer-payment-method {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-muted);
    font-size: 10.5px;
    font-weight: 700;
}

#customer-create-dialog .customer-payment-method .select {
    min-height: 34px;
    min-width: 120px;
}

#customer-create-dialog .app-dialog-footer {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    margin-top: 14px;
    padding: 14px 22px;
}

#customer-create-dialog .app-dialog-footer .button {
    min-width: 126px;
}

@media (max-width: 620px) {
    #customer-create-dialog {
        width: calc(100vw - 16px);
    }

    #customer-create-dialog .app-dialog-header,
    #customer-create-dialog .app-dialog-body {
        padding-left: 15px;
        padding-right: 15px;
    }

    #customer-create-dialog .customer-primary-grid,
    #customer-create-dialog .customer-details-grid {
        grid-template-columns: 1fr;
    }

    #customer-create-dialog .customer-plan-strip {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    #customer-create-dialog .customer-plan-strip-meta {
        grid-column: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }

    #customer-create-dialog .customer-initial-payment {
        align-items: start;
        flex-direction: column;
    }

    #customer-create-dialog .app-dialog-footer {
        margin: 10px -15px -15px;
        padding: 12px 15px;
    }

    #customer-create-dialog .app-dialog-footer .button {
        flex: 1;
        min-width: 0;
    }
}

/* Customer edit modal uses the same compact field system as customer create. */
#customer-edit-dialog {
    width: min(820px, calc(100vw - 28px));
}

#customer-edit-dialog .app-dialog-shell {
    max-height: min(760px, calc(100vh - 28px));
    box-shadow: 0 28px 80px rgba(2, 12, 24, .42);
}

#customer-edit-dialog .app-dialog-header {
    padding: 18px 56px 15px 22px;
}

#customer-edit-dialog .app-dialog-body {
    padding: 18px 22px 20px;
}

#customer-edit-dialog .customer-premium-form {
    display: grid;
    gap: 15px;
}

#customer-edit-dialog .customer-primary-grid,
#customer-edit-dialog .customer-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px;
}

#customer-edit-dialog .customer-primary-grid .form-field,
#customer-edit-dialog .customer-details-grid .form-field {
    min-width: 0;
    align-content: start;
}

#customer-edit-dialog .form-field > span:first-child {
    margin-bottom: 6px;
    color: var(--color-text-soft);
    font-size: 11.5px;
    font-weight: 800;
}

#customer-edit-dialog .v1-field-control,
#customer-edit-dialog .phone-input {
    display: flex;
    min-width: 0;
    min-height: 42px;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-soft) 72%, var(--color-surface));
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

#customer-edit-dialog .v1-field-control:focus-within,
#customer-edit-dialog .phone-input:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

#customer-edit-dialog .v1-field-icon,
#customer-edit-dialog .phone-input-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: auto;
    min-height: 40px;
    flex: 0 0 42px;
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
    color: var(--color-primary);
}

#customer-edit-dialog .v1-field-icon > svg,
#customer-edit-dialog .phone-input-icon > svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
}

#customer-edit-dialog .phone-country {
    width: 102px;
    flex: 0 0 102px;
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
}

#customer-edit-dialog .v1-field-control .input,
#customer-edit-dialog .v1-field-control .select,
#customer-edit-dialog .phone-input .input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
}

#customer-edit-dialog .customer-phone-feedback {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--color-green);
    font-size: 10.5px;
    font-weight: 700;
}

#customer-edit-dialog .customer-phone-feedback.is-invalid {
    color: var(--color-red);
}

#customer-edit-dialog .customer-phone-feedback-icon {
    display: inline-flex;
    align-items: center;
}

#customer-edit-dialog .customer-phone-feedback svg {
    width: 14px;
    height: 14px;
}

#customer-edit-dialog .customer-plan-control .select {
    font-weight: 750;
    transition: color var(--transition);
}

#customer-edit-dialog .customer-plan-control.is-iptv .select {
    color: var(--color-blue);
}

#customer-edit-dialog .customer-plan-control.is-p2p .select {
    color: var(--color-amber);
}

#customer-edit-dialog .customer-premium-details {
    border-top: 1px solid var(--color-border);
}

#customer-edit-dialog .customer-premium-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

#customer-edit-dialog .customer-premium-details summary::-webkit-details-marker {
    display: none;
}

#customer-edit-dialog .customer-premium-details summary > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#customer-edit-dialog .customer-premium-details summary > span svg,
#customer-edit-dialog .customer-premium-details summary > svg {
    width: 15px;
    height: 15px;
}

#customer-edit-dialog .customer-premium-details summary > span svg {
    color: var(--color-primary);
}

#customer-edit-dialog .customer-premium-details summary small {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 10.5px;
    font-weight: 500;
}

#customer-edit-dialog .customer-premium-details summary > svg {
    color: var(--color-muted);
    transition: transform var(--transition);
}

#customer-edit-dialog .customer-premium-details[open] summary > svg {
    transform: rotate(180deg);
}

#customer-edit-dialog .customer-details-grid {
    padding: 2px 0 5px;
}

#customer-edit-dialog .customer-details-grid .field-wide {
    grid-column: 1 / -1;
}

#customer-edit-dialog .app-dialog-footer {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    margin-top: 14px;
    padding: 14px 22px;
}

#customer-edit-dialog .app-dialog-footer .button {
    min-width: 126px;
}

@media (max-width: 620px) {
    #customer-edit-dialog {
        width: calc(100vw - 16px);
    }

    #customer-edit-dialog .app-dialog-header,
    #customer-edit-dialog .app-dialog-body {
        padding-left: 15px;
        padding-right: 15px;
    }

    #customer-edit-dialog .customer-primary-grid,
    #customer-edit-dialog .customer-details-grid {
        grid-template-columns: 1fr;
    }

    #customer-edit-dialog .customer-commercial-spacer {
        display: none;
    }

    #customer-edit-dialog .app-dialog-footer {
        margin: 10px -15px -15px;
        padding: 12px 15px;
    }

    #customer-edit-dialog .app-dialog-footer .button {
        flex: 1;
        min-width: 0;
    }
}

/* Internal section navigation follows the WhatsApp typography reference. */
:is(
    .whatsapp-tab,
    .notify-tab,
    .streaming-tab,
    .profile-tab,
    .module-tab,
    .reseller-workspace-tabs > a
) {
    font-size: 15px !important;
}

.reseller-workspace-tabs > a > strong {
    font-size: inherit !important;
}

:is(
    .whatsapp-tab > span,
    .notify-tab > b,
    .streaming-tab > span,
    .reseller-workspace-tabs > a > em
) {
    font-size: 11px !important;
}

@media (max-width: 620px) {
    :is(
        .whatsapp-tab,
        .notify-tab,
        .streaming-tab,
        .profile-tab,
        .module-tab,
        .reseller-workspace-tabs > a
    ) {
        font-size: 13px !important;
    }
}

/* WhatsApp template variables behave like copy actions, not static labels. */
.whatsapp-variable {
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface-soft);
    color: var(--color-primary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.whatsapp-variable:hover,
.whatsapp-variable:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    outline: none;
    transform: translateY(-1px);
}

.whatsapp-variable.is-copied,
.whatsapp-variable.is-inserted {
    border-color: var(--color-green);
    background: var(--color-green-soft);
    color: var(--color-green);
}

.template-create-dialog,
#template-create {
    width: min(1060px, calc(100vw - 28px));
}

.whatsapp-template-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 276px;
    align-items: start;
    gap: 20px;
}

.whatsapp-template-fields {
    min-width: 0;
}

.whatsapp-phone-preview {
    position: sticky;
    top: 0;
    display: grid;
    gap: 0;
    overflow: hidden;
    min-height: 454px;
    border: 5px solid #111820;
    border-radius: 30px;
    background: #0b141b;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .3), 0 0 0 1px rgba(148, 174, 184, .2);
}

.whatsapp-phone-preview::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 50%;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    transform: translateX(-50%);
}

.whatsapp-phone-top {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 62px;
    padding: 19px 14px 11px;
    background: #172a34;
    color: #f4fbfc;
}

.whatsapp-phone-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #21c063;
    color: white;
}

.whatsapp-phone-avatar svg { width: 17px; height: 17px; }
.whatsapp-phone-top div { display: grid; gap: 1px; min-width: 0; }
.whatsapp-phone-top strong { font-size: 11px; }
.whatsapp-phone-top small { color: #9bb4bb; font-size: 9px; }
.whatsapp-phone-dots { margin-left: auto; color: #9bb4bb; letter-spacing: 2px; }

.whatsapp-phone-wall {
    display: flex;
    align-items: flex-end;
    min-height: 338px;
    padding: 20px 12px 16px;
    overflow-y: auto;
    background-color: #0d1a21;
    background-image: radial-gradient(rgba(142, 183, 190, .08) 1px, transparent 1px);
    background-size: 16px 16px;
}

.whatsapp-phone-bubble {
    display: grid;
    gap: 5px;
    width: fit-content;
    max-width: 94%;
    padding: 11px 12px 7px;
    border-radius: 11px 11px 3px 11px;
    background: #d9fdd3;
    color: #1d2a2e;
    font-size: 11.5px;
    line-height: 1.48;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
}

.whatsapp-phone-bubble > span {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.whatsapp-phone-bubble small { justify-self: end; color: #6e847a; font-size: 8px; }
.whatsapp-phone-caption { padding: 9px 12px 10px; background: #172a34; color: #8da8ae; text-align: center; font-size: 9px; letter-spacing: .02em; }

@media (max-width: 760px) {
    .whatsapp-template-composer { grid-template-columns: 1fr; }
    .whatsapp-phone-preview { position: relative; width: min(100%, 310px); min-height: 340px; margin-inline: auto; }
    .whatsapp-phone-wall { min-height: 225px; }
}

/* Manager panels: dedicated SaaS account and subscription center. */
.manager-hero,
.manager-detail-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--color-blue) 22%, var(--color-border));
    border-radius: var(--radius-md);
    background: linear-gradient(105deg, color-mix(in srgb, var(--color-blue-soft) 70%, var(--color-surface)), var(--color-surface) 58%);
    box-shadow: var(--shadow-sm);
}

.manager-hero-icon,
.manager-detail-avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-blue) 30%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-blue-soft) 78%, var(--color-surface));
    color: var(--color-blue);
    font-weight: 850;
}

.manager-hero-icon svg,
.manager-detail-avatar svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.manager-hero h1,
.manager-detail-hero h1 {
    margin: 2px 0 2px;
    font-size: 27px;
    line-height: 1.15;
}

.manager-hero p,
.manager-detail-hero p,
.manager-section-header p {
    margin: 0;
    color: var(--color-text-soft);
}

.manager-hero-action {
    margin-left: auto;
}

.manager-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.manager-stat {
    --manager-tone: var(--color-blue);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--manager-tone) 25%, var(--color-border));
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.manager-stat-green { --manager-tone: var(--color-green); }
.manager-stat-amber { --manager-tone: var(--color-amber); }
.manager-stat-red { --manager-tone: var(--color-red); }
.manager-stat-violet { --manager-tone: var(--color-violet); }

.manager-stat-icon,
.manager-usage-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--manager-tone) 12%, var(--color-surface));
    color: var(--manager-tone);
}

.manager-stat-icon svg,
.manager-usage-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.manager-stat div {
    min-width: 0;
}

.manager-stat small,
.manager-stat span,
.manager-detail-stats small,
.manager-detail-stats em,
.manager-usage-grid small,
.manager-usage-grid em {
    display: block;
    color: var(--color-text-soft);
    font-size: 11px;
    font-style: normal;
}

.manager-stat small {
    font-weight: 800;
    text-transform: uppercase;
}

.manager-stat strong {
    display: block;
    overflow: hidden;
    margin: 1px 0;
    font-size: 21px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manager-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.manager-filter-group,
.manager-filter-actions,
.manager-row-actions,
.manager-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.manager-filter-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.manager-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.manager-filter-label svg,
.manager-search-control svg,
.manager-limit svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.manager-select-control,
.manager-search-control {
    min-height: 42px;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.manager-select-control > span {
    padding: 0 10px;
    color: var(--color-text-soft);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.manager-select-control select,
.manager-search-control input {
    min-width: 118px;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
}

.manager-plan-filter select { min-width: 150px; }
.manager-search-control { padding-left: 12px; }
.manager-search-control { flex: 1 1 170px; max-width: 235px; min-width: 160px; }
.manager-search-control input { width: 100%; padding: 0 11px; }

.manager-list-section,
.manager-detail-section {
    margin-bottom: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.manager-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

.manager-section-header h2 {
    margin: 0 0 2px;
    font-size: 17px;
}

.manager-section-header p { font-size: 13px; }
.manager-table-wrap { overflow-x: auto; border-top: 1px solid var(--color-border); }
.manager-table { width: 100%; border-collapse: collapse; min-width: 1050px; }
.manager-table th {
    padding: 11px 14px;
    background: var(--color-surface-soft);
    color: var(--color-text-soft);
    font-size: 10px;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
}
.manager-table td { padding: 13px 14px; border-top: 1px solid var(--color-border); font-size: 13px; vertical-align: middle; }
.manager-table tbody tr:first-child td { border-top: 0; }
.manager-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary-soft) 24%, transparent); }
.manager-panel-identity { display: flex; align-items: center; gap: 10px; min-width: 200px; color: var(--color-primary-strong); }
.manager-panel-identity > span:last-child,
.manager-table td > strong,
.manager-cell-note { display: block; }
.manager-panel-identity strong,
.manager-panel-identity small { display: block; }
.manager-panel-identity small,
.manager-cell-note { color: var(--color-text-soft); font-size: 11px; }
.manager-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-blue) 25%, var(--color-border));
    border-radius: var(--radius-md);
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-weight: 850;
}
.manager-usage-inline { display: grid; gap: 2px; min-width: 110px; color: var(--color-text-soft); font-size: 11px; }
.manager-usage-inline b { color: var(--color-text); }
.manager-limit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.manager-date-late { color: var(--color-red); }
.manager-actions-cell { text-align: right !important; }
.manager-row-actions { justify-content: flex-end; }
.manager-row-actions form { margin: 0; }
.manager-pagination { padding: 14px 18px; border-top: 1px solid var(--color-border); }

.manager-detail-hero { justify-content: space-between; }
.manager-detail-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.manager-detail-avatar { color: var(--color-primary-strong); font-size: 16px; }
.manager-detail-actions { flex-wrap: wrap; justify-content: flex-end; }
.manager-detail-actions form { margin: 0; }
.manager-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.manager-detail-stats article { display: flex; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.manager-detail-stats article > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.manager-detail-stats svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.manager-detail-stats strong { display: block; font-size: 17px; }
.manager-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr); gap: 18px; }
.manager-subscription-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.manager-subscription-band div { padding: 16px 18px; border-right: 1px solid var(--color-border); }
.manager-subscription-band div:last-child { border-right: 0; }
.manager-subscription-band small { display: block; color: var(--color-text-soft); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.manager-subscription-band strong { display: block; margin-top: 3px; }
.manager-usage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.manager-usage-grid > div { min-width: 0; padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.manager-usage-grid strong { display: block; margin: 5px 0 1px; font-size: 20px; }
.manager-usage-grid em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manager-account-list { margin: 0; padding: 0 18px; }
.manager-account-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.manager-account-list dt { color: var(--color-text-soft); }
.manager-account-list dd { margin: 0; font-weight: 750; text-align: right; }
.manager-block-reason { display: grid; gap: 3px; margin: 12px 18px 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--color-red) 28%, var(--color-border)); border-radius: var(--radius-md); background: var(--color-red-soft); color: var(--color-red); font-size: 12px; }
.manager-control-actions { display: grid; gap: 8px; padding: 16px 18px 18px; }
.manager-history-list { border-top: 1px solid var(--color-border); }
.manager-history-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 20px; border-top: 1px solid var(--color-border); }
.manager-history-list article:first-child { border-top: 0; }
.manager-history-marker { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.manager-history-list strong,
.manager-history-list small { display: block; }
.manager-history-list p { margin: 2px 0; color: var(--color-text-soft); font-size: 13px; }
.manager-history-list small { color: var(--color-text-soft); font-size: 11px; }

.manager-dialog {
    width: min(980px, calc(100vw - 30px));
    max-height: calc(100vh - 30px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 28px 90px rgba(7, 20, 38, .32);
}
.manager-dialog-medium { width: min(760px, calc(100vw - 30px)); }
.manager-dialog-small { width: min(610px, calc(100vw - 30px)); }
.manager-dialog::backdrop { background: rgba(7, 20, 38, .62); backdrop-filter: blur(5px); }
.manager-dialog-shell { display: flex; flex-direction: column; max-height: calc(100vh - 30px); }
.manager-dialog-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.manager-dialog-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--color-blue) 28%, var(--color-border)); border-radius: var(--radius-md); background: var(--color-blue-soft); color: var(--color-blue); }
.manager-dialog-icon svg,
.manager-dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.manager-dialog-header strong,
.manager-dialog-header small { display: block; }
.manager-dialog-header strong { font-size: 19px; }
.manager-dialog-header small { color: var(--color-text-soft); }
.manager-dialog-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-soft); cursor: pointer; }
.manager-dialog-body { display: grid; gap: 12px; padding: 16px 20px; overflow-y: auto; }
.manager-form-section { padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.manager-form-section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.manager-form-section-title > span { width: 26px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary-strong); font-size: 10px; font-weight: 900; }
.manager-form-section-title strong,
.manager-form-section-title small { display: block; }
.manager-form-section-title strong { font-size: 12px; text-transform: uppercase; }
.manager-form-section-title small { color: var(--color-text-soft); font-size: 11px; }
.manager-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; }
.manager-form-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.manager-field { display: grid; gap: 5px; min-width: 0; }
.manager-field > span { font-size: 11px; font-weight: 800; }
.manager-field > div { min-height: 42px; display: grid; grid-template-columns: 42px minmax(0, 1fr); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.manager-field > div:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 13%, transparent); }
.manager-field > div > svg { width: 42px; height: 42px; padding: 12px; border-right: 1px solid var(--color-border); background: var(--color-primary-soft); color: var(--color-primary-strong); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.manager-field input,
.manager-field select,
.manager-field textarea { min-width: 0; width: 100%; border: 0; outline: 0; padding: 0 12px; background: transparent; color: var(--color-text); }
.manager-field select { cursor: pointer; }
.manager-field textarea { padding-top: 10px; resize: vertical; }
.manager-field-wide { grid-column: 1 / -1; }
.manager-field-textarea { min-height: 84px !important; align-items: start; }
.manager-switch { min-height: 48px; display: flex; align-items: center; gap: 9px; align-self: end; padding: 8px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.manager-switch > input { position: absolute; opacity: 0; pointer-events: none; }
.manager-switch > span { width: 36px; height: 20px; position: relative; flex: 0 0 auto; border-radius: 10px; background: var(--color-border-strong); transition: .2s ease; }
.manager-switch > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: .2s ease; }
.manager-switch input:checked + span { background: var(--color-primary); }
.manager-switch input:checked + span::after { transform: translateX(16px); }
.manager-switch strong,
.manager-switch small { display: block; }
.manager-switch strong { font-size: 12px; }
.manager-switch small { color: var(--color-text-soft); font-size: 10px; }
.manager-dialog-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-soft); }

@media (max-width: 1250px) {
    .manager-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .manager-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manager-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1400px) {
    .manager-table { min-width: 860px; }
    .manager-table th:nth-child(7),
    .manager-table td:nth-child(7) { display: none; }
}

@media (max-width: 900px) {
    .manager-filter,
    .manager-detail-hero { align-items: stretch; flex-direction: column; }
    .manager-filter-group,
    .manager-filter-actions { flex-wrap: wrap; }
    .manager-search-control { flex: 1 1 100%; }
    .manager-search-control input { width: 100%; }
    .manager-detail-actions { justify-content: flex-start; }
    .manager-subscription-band,
    .manager-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manager-subscription-band div:nth-child(2) { border-right: 0; }
    .manager-form-grid-three { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .manager-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
    .manager-hero-action { width: 100%; margin-left: 0; }
    .manager-stats,
    .manager-detail-stats { grid-template-columns: 1fr; }
    .manager-filter-group,
    .manager-filter-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .manager-filter-label { padding: 6px 0; }
    .manager-plan-filter select,
    .manager-select-control select { width: 100%; min-width: 0; }
    .manager-detail-brand { align-items: flex-start; }
    .manager-detail-avatar { width: 46px; height: 46px; }
    .manager-detail-hero h1 { font-size: 22px; }
    .manager-detail-actions .button,
    .manager-detail-actions form { flex: 1 1 auto; }
    .manager-detail-actions form .button { width: 100%; }
    .manager-subscription-band,
    .manager-usage-grid,
    .manager-form-grid,
    .manager-form-grid-three { grid-template-columns: 1fr; }
    .manager-subscription-band div { border-right: 0; border-top: 1px solid var(--color-border); }
    .manager-subscription-band div:first-child { border-top: 0; }
    .manager-dialog-body,
    .manager-dialog-header,
    .manager-dialog-footer { padding-left: 14px; padding-right: 14px; }
    .manager-dialog-footer .button { flex: 1; }
}

/* Subscription command center. */
.subscription-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--color-violet) 22%, var(--color-border));
    border-radius: var(--radius-md);
    background: linear-gradient(105deg, color-mix(in srgb, var(--color-violet-soft) 62%, var(--color-surface)), var(--color-surface) 62%);
    box-shadow: var(--shadow-sm);
}

.subscription-hero-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--color-violet) 28%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-violet-soft) 74%, var(--color-surface));
    color: var(--color-violet);
}

.subscription-hero-icon svg,
.subscription-callout svg,
.subscription-automation svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.subscription-hero h1 {
    margin: 2px 0;
    font-size: 27px;
    line-height: 1.15;
}

.subscription-hero p {
    margin: 0;
    color: var(--color-text-soft);
}

.subscription-hero .button {
    margin-left: auto;
}

.subscription-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.subscription-stats .manager-stat {
    padding: 14px;
}

.subscription-stats .manager-stat strong {
    font-size: 19px;
}

.subscription-automation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.subscription-automation.is-on {
    color: var(--color-green);
}

.subscription-automation svg {
    width: 15px;
    height: 15px;
}

.subscription-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary-soft) 54%, var(--color-surface));
    color: var(--color-primary-strong);
    font-size: 12px;
    font-weight: 720;
}

.subscription-callout svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.subscription-callout-warning {
    border-color: color-mix(in srgb, var(--color-amber) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-amber-soft) 62%, var(--color-surface));
    color: var(--color-amber);
}

.subscription-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.subscription-settings-grid .manager-form-section {
    display: grid;
    gap: 12px;
}

.subscription-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.subscription-switches .manager-switch {
    align-self: stretch;
}

@media (max-width: 1500px) {
    .subscription-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1400px) {
    .subscription-table {
        min-width: 860px;
    }
    .subscription-table th:nth-child(7),
    .subscription-table td:nth-child(7) {
        display: table-cell;
    }
    .subscription-table th:nth-child(6),
    .subscription-table td:nth-child(6) {
        display: none;
    }
}

@media (max-width: 900px) {
    .subscription-hero {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .subscription-hero .button {
        margin-left: 72px;
    }
    .subscription-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .subscription-hero {
        flex-direction: column;
        padding: 18px;
    }
    .subscription-hero .button {
        width: 100%;
        margin-left: 0;
    }
    .subscription-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .subscription-stats .manager-stat {
        align-items: flex-start;
        min-height: 112px;
        padding: 12px;
    }
    .subscription-stats .manager-stat-icon {
        width: 34px;
        height: 34px;
    }
    .subscription-stats .manager-stat small {
        line-height: 1.2;
    }
    .subscription-switches {
        grid-template-columns: 1fr;
    }
    .subscription-table {
        display: block;
        min-width: 0;
    }
    .subscription-table thead {
        display: none;
    }
    .subscription-table tbody,
    .subscription-table tr,
    .subscription-table td {
        display: block !important;
        width: 100%;
    }
    .subscription-table tr {
        padding: 14px;
        border-top: 1px solid var(--color-border);
    }
    .subscription-table tr:first-child {
        border-top: 0;
    }
    .subscription-table td {
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 12px;
        padding: 9px 0;
        border-top: 1px dashed color-mix(in srgb, var(--color-border) 72%, transparent);
    }
    .subscription-table td::before {
        content: attr(data-label);
        align-self: center;
        color: var(--color-text-soft);
        font-size: 10px;
        font-weight: 850;
        text-transform: uppercase;
    }
    .subscription-table td:first-child,
    .subscription-table td:last-child {
        grid-template-columns: 1fr;
    }
    .subscription-table td:first-child {
        padding-top: 0;
        border-top: 0;
    }
    .subscription-table td:first-child::before,
    .subscription-table td:last-child::before {
        display: none;
    }
    .subscription-table .manager-panel-identity {
        min-width: 0;
    }
    .subscription-table .manager-panel-identity > span:last-child {
        min-width: 0;
    }
    .subscription-table .manager-panel-identity strong,
    .subscription-table .manager-panel-identity small,
    .subscription-table .manager-cell-note {
        overflow-wrap: anywhere;
    }
    .subscription-table .manager-row-actions,
    .subscription-table .v3-action-group {
        justify-content: flex-start;
    }
    .subscription-table .manager-actions-cell {
        padding-bottom: 0;
    }
}

/* V1 modal composition with Algo Gestor V3 tokens. */
#plan-create-dialog.crud-create-dialog {
    width: min(860px, calc(100vw - 28px));
}

#plan-create-dialog .app-dialog-shell {
    border-radius: 18px;
}

#plan-create-dialog .app-dialog-header {
    padding: 24px 62px 16px 26px;
}

#plan-create-dialog .crud-dialog-icon {
    display: none !important;
}

#plan-create-dialog .crud-dialog-heading strong {
    font-size: 25px;
    font-weight: 800;
}

#plan-create-dialog .crud-dialog-heading small {
    margin-top: 3px;
    font-size: 13px;
}

#plan-create-dialog .app-dialog-header > .icon-button {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--color-red-soft);
    color: var(--color-red);
    font-size: 24px;
}

#plan-create-dialog .app-dialog-body {
    padding: 16px 26px 22px;
}

#plan-create-dialog .v1-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

#plan-create-dialog .field-wide {
    grid-column: 1 / -1;
}

#plan-create-dialog .form-field {
    gap: 6px;
}

#plan-create-dialog .form-field > span:first-child {
    padding-left: 1px;
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 800;
}

#plan-create-dialog .v1-field-control {
    display: flex;
    min-width: 0;
    min-height: 46px;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: 11px;
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

#plan-create-dialog .v1-field-control:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

#plan-create-dialog .v1-field-icon {
    display: grid;
    place-items: center;
    width: 50px;
    flex: 0 0 50px;
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 62%, var(--color-surface));
    color: var(--color-primary-strong);
}

#plan-create-dialog .v1-field-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#plan-create-dialog .v1-field-control .input,
#plan-create-dialog .v1-field-control .select,
#plan-create-dialog .v1-field-control .textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#plan-create-dialog .v1-field-control .input:focus,
#plan-create-dialog .v1-field-control .select:focus,
#plan-create-dialog .v1-field-control .textarea:focus {
    outline: 0;
    box-shadow: none;
}

#plan-create-dialog .v1-field-textarea .v1-field-icon {
    align-items: start;
    padding-top: 14px;
}

#plan-create-dialog .v1-field-textarea .textarea {
    min-height: 76px;
    resize: vertical;
}

#plan-create-dialog .duration-shortcuts {
    gap: 4px;
    margin-top: 2px;
}

#plan-create-dialog .duration-shortcuts button {
    height: 24px;
    padding: 0 8px;
}

#plan-create-dialog .app-dialog-footer {
    margin: 18px -26px -22px;
    padding: 16px 26px 0;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 680px) {
    #plan-create-dialog .app-dialog-header {
        padding: 20px 58px 14px 18px;
    }

    #plan-create-dialog .app-dialog-body {
        padding: 14px 18px 18px;
    }

    #plan-create-dialog .v1-modal-grid {
        grid-template-columns: 1fr;
    }

    #plan-create-dialog .field-wide {
        grid-column: auto;
    }

    #plan-create-dialog .app-dialog-footer {
        margin: 16px -18px -18px;
        padding: 14px 18px 0;
    }
}

/* Customer modal fields reuse the compact icon controls from the plan modal. */
#customer-create-dialog .customer-modal-sections {
    align-items: start;
}

#customer-create-dialog .v1-field-control {
    display: flex;
    min-width: 0;
    min-height: 40px;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

#customer-create-dialog .v1-field-control:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

#customer-create-dialog .v1-field-icon {
    display: grid;
    place-items: center;
    width: 42px;
    flex: 0 0 42px;
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 62%, var(--color-surface));
    color: var(--color-primary-strong);
}

#customer-create-dialog .v1-field-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#customer-create-dialog .v1-field-control .input,
#customer-create-dialog .v1-field-control .select,
#customer-create-dialog .v1-field-control .textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#customer-create-dialog .v1-field-control .input:focus,
#customer-create-dialog .v1-field-control .select:focus,
#customer-create-dialog .v1-field-control .textarea:focus {
    outline: 0;
    box-shadow: none;
}

#customer-create-dialog .customer-datetime-control {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 1px minmax(104px, .55fr);
    align-items: center;
}

#customer-create-dialog .customer-datetime-control .v1-field-icon {
    height: 100%;
}

#customer-create-dialog .customer-date-input,
#customer-create-dialog .customer-time-input {
    min-width: 0;
}

#customer-create-dialog .customer-time-input {
    text-align: center;
}

#customer-create-dialog .customer-datetime-divider {
    width: 1px;
    height: 24px;
    background: var(--color-border);
}

#customer-create-dialog .customer-datetime-help {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 550;
    line-height: 1.35;
}

#customer-create-dialog .v1-field-textarea .v1-field-icon {
    align-items: start;
    padding-top: 11px;
}

.customer-subscription-summary {
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-blue) 34%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-blue-soft) 48%, var(--color-surface));
}

.customer-subscription-summary summary {
    display: grid;
    grid-template-columns: 32px auto minmax(0, 1fr) 28px;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 8px 10px;
    list-style: none;
    cursor: pointer;
}

.customer-subscription-summary summary::-webkit-details-marker {
    display: none;
}

.customer-summary-icon,
.customer-summary-toggle {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.customer-summary-icon svg,
.customer-summary-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.customer-subscription-summary summary > strong {
    font-size: 12.5px;
    white-space: nowrap;
}

.customer-subscription-summary summary > span[data-summary-line] {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-soft);
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-summary-toggle {
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--color-blue) 24%, var(--color-border));
    border-radius: 50%;
    background: var(--color-surface);
    transition: transform var(--transition);
}

.customer-subscription-summary[open] .customer-summary-toggle {
    transform: rotate(180deg);
}

.customer-summary-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 10px 10px 51px;
}

.customer-summary-details > span {
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.customer-summary-details small {
    color: var(--color-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.customer-summary-details strong {
    font-size: 11px;
}

@media (max-width: 620px) {
    .customer-subscription-summary summary {
        grid-template-columns: 32px minmax(0, 1fr) 28px;
    }

    .customer-subscription-summary summary > span[data-summary-line] {
        grid-column: 1 / -1;
        padding-left: 41px;
        white-space: normal;
    }

    .customer-summary-details {
        grid-template-columns: 1fr;
        padding-left: 10px;
    }
}

/* Customer operation actions ported from the V1 workflow. */
.customer-due {
    display: inline-grid;
    gap: 2px;
    white-space: nowrap;
}

.customer-due-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.customer-due strong {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 650;
}

/* Keep the four operational values on one typographic level. */
.customers-table .customer-primary-text,
.customers-table .customer-primary-value,
.customers-table .customer-due strong {
    color: var(--color-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25;
}

.customer-due-days {
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

.customer-due-time {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.customers-table .customer-plan-type,
.customers-table .customer-screens-badge {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .02em;
}

.customers-table .customer-plan-meta {
    display: grid;
    gap: 2px;
    justify-items: start;
}

.customers-table tbody td:first-child .table-main > span:not(.truncate) {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
}

.customers-table .customer-contact {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.customers-table .customer-plan-type.is-iptv { color: #62a5ff; }
.customers-table .customer-plan-type.is-p2p { color: #e6a044; }

.customers-table .customer-server-type {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .02em;
}

.customers-table .customer-application {
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.customers-table .customer-secondary-text {
    color: var(--color-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35;
    letter-spacing: 0;
}

.customer-actions,
.v3-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.customer-actions form,
.v3-action-group form {
    margin: 0;
}

.customer-action,
.v3-action {
    width: 34px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--action-color) 34%, var(--color-border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--action-color) 10%, var(--color-surface));
    color: var(--action-color);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.customer-action:hover,
.customer-action:focus-visible,
.v3-action:hover,
.v3-action:focus-visible {
    color: #ffffff;
    background: var(--action-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--action-color) 27%, transparent);
    outline: none;
    transform: translateY(-2px);
}

.customer-action svg,
.v3-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.customer-action-view,
.v3-action.is-view,
.v3-action.is-copy { --action-color: #0784c7; }
.customer-action-pix { --action-color: #16a36a; }
.customer-action-message { --action-color: #25a968; }
.customer-action-renew,
.v3-action.is-renew,
.v3-action.is-status { --action-color: #dd9308; }
.customer-action-edit,
.v3-action.is-edit { --action-color: #6557e8; }
.customer-action-delete,
.v3-action.is-delete { --action-color: #e64842; }
.customer-action-block,
.v3-action.is-confirm { --action-color: #36a852; }
.customer-action-unblock { --action-color: #3474c7; }
.customer-action-archive { --action-color: #68798a; }
.customer-action-restore { --action-color: #16a36a; }
.v3-action.is-settings { --action-color: #527085; }

.customer-action:disabled {
    cursor: not-allowed;
    filter: grayscale(.45);
    opacity: .42;
    transform: none;
}

.customer-archive-policy-sections {
    grid-template-columns: minmax(0, 1fr);
}

#customer-archive-policy-dialog .v1-field-control {
    display: flex;
    min-width: 0;
    min-height: 44px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

#customer-archive-policy-dialog .v1-field-control:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

#customer-archive-policy-dialog .v1-field-icon {
    display: grid;
    width: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 62%, var(--color-surface));
    color: var(--color-primary-strong);
}

#customer-archive-policy-dialog .v1-field-icon > svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#customer-archive-policy-dialog .v1-field-control > .select {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-archive-policy-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.customer-archive-policy-note-icon {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

#customer-archive-policy-dialog .customer-archive-policy-note-icon > svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

/* V3 standard: compact, solid and semantic table actions. */
.table-actions,
.v3-action-group,
.customer-actions,
.notify-actions,
.streaming-actions,
.server-actions,
.reseller-actions,
.payment-actions,
.plan-actions,
.template-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.table-actions form,
.v3-action-group form,
.customer-actions form,
.notify-actions form,
.streaming-actions form,
.server-actions form,
.reseller-actions form,
.payment-actions form,
.plan-actions form,
.template-actions form {
    display: inline-flex;
    margin: 0;
}

.data-table .table-actions .icon-button,
.data-table .table-icon-button,
.data-table .v3-action,
.manager-data-table .v3-action,
.customer-action,
.server-action,
.reseller-action,
.plan-action,
.payment-action,
.stream-action,
.notify-action,
.template-action {
    --action-color: #0784c7;
    display: inline-grid;
    width: 32px;
    height: 30px;
    min-width: 32px;
    min-height: 30px;
    flex: 0 0 32px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--action-color) 78%, #ffffff);
    border-radius: 6px;
    background: var(--action-color);
    color: #ffffff;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--action-color) 24%, transparent);
    cursor: pointer;
    transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
}

.data-table .table-actions .icon-button:hover,
.data-table .table-actions .icon-button:focus-visible,
.data-table .table-icon-button:hover,
.data-table .table-icon-button:focus-visible,
.data-table .v3-action:hover,
.data-table .v3-action:focus-visible,
.manager-data-table .v3-action:hover,
.manager-data-table .v3-action:focus-visible,
.customer-action:hover,
.customer-action:focus-visible,
.server-action:hover,
.server-action:focus-visible,
.reseller-action:hover,
.reseller-action:focus-visible,
.plan-action:hover,
.plan-action:focus-visible,
.payment-action:hover,
.payment-action:focus-visible,
.stream-action:hover,
.stream-action:focus-visible,
.notify-action:hover,
.notify-action:focus-visible,
.template-action:hover,
.template-action:focus-visible {
    border-color: color-mix(in srgb, var(--action-color) 60%, #ffffff);
    background: var(--action-color);
    color: #ffffff;
    filter: brightness(1.12);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--action-color) 34%, transparent);
    outline: none;
    transform: translateY(-2px);
}

.data-table .table-actions .icon-button > svg,
.data-table .table-icon-button > svg,
.data-table .v3-action > svg,
.manager-data-table .v3-action > svg,
.customer-action > svg,
.server-action > svg,
.reseller-action > svg,
.plan-action > svg,
.payment-action > svg,
.stream-action > svg,
.notify-action > svg,
.template-action > svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.customer-action-view,
.is-view,
.is-open { --action-color: #0784c7 !important; }

.customer-action-pix,
.customer-action-restore,
.is-sale,
.is-central,
.is-approve,
.is-confirm,
.is-read,
.is-resolve { --action-color: #16a36a !important; }

.customer-action-renew,
.is-renew,
.is-sync,
.is-adjust,
.is-status,
.is-toggle,
.is-clients { --action-color: #dd9308 !important; }

.customer-action-edit,
.is-edit { --action-color: #6557e8 !important; }

.customer-action-delete,
.is-delete,
.is-cancel,
.action-danger,
.icon-button.is-danger { --action-color: #e64842 !important; }

.customer-action-block,
.customer-action-unblock { --action-color: #3474c7 !important; }

.customer-action-archive,
.is-copy,
.is-settings { --action-color: #68798a !important; }

.customer-more-actions {
    position: relative;
    display: inline-flex;
}

.customer-more-actions > summary {
    list-style: none;
}

.customer-more-actions > summary::-webkit-details-marker {
    display: none;
}

.customer-action-more {
    --action-color: #68798a;
}

.customer-more-actions[open] > .customer-action-more {
    filter: brightness(1.12);
}

.customer-more-menu {
    position: absolute;
    z-index: 60;
    right: 0;
    bottom: calc(100% + 8px);
    display: grid;
    width: 178px;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.customer-more-actions.is-positioned .customer-more-menu {
    position: fixed;
    right: auto;
    bottom: auto;
    left: var(--customer-menu-left);
    top: var(--customer-menu-top);
}

.customer-more-menu form {
    display: flex;
    width: 100%;
    margin: 0;
}

.customer-more-menu form:last-of-type {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--color-border);
}

.customer-more-menu .customer-menu-action {
    --menu-icon-color: var(--color-text-soft);
    display: flex;
    width: 100%;
    height: 31px;
    min-width: 0;
    min-height: 31px;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 8px;
    border-color: transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-soft);
    box-shadow: none;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.customer-more-menu .customer-menu-action:hover,
.customer-more-menu .customer-menu-action:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    color: var(--color-text);
    filter: none;
    box-shadow: none;
    transform: none;
}

.customer-more-menu .customer-menu-action.is-danger {
    --menu-icon-color: var(--color-red);
    color: var(--color-text-soft);
}

.customer-more-menu .customer-menu-action.is-danger:hover,
.customer-more-menu .customer-menu-action.is-danger:focus-visible {
    border-color: color-mix(in srgb, var(--color-red) 24%, transparent);
    background: color-mix(in srgb, var(--color-red) 10%, var(--color-surface));
    color: var(--color-text);
}

.customer-more-menu .customer-menu-action:disabled {
    opacity: .42;
}

.customer-more-menu .customer-menu-action > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--menu-icon-color);
}

.customer-more-menu .customer-action-message { --menu-icon-color: #68798a; }
.customer-more-menu .customer-action-edit { --menu-icon-color: #8f83ff; }
.customer-more-menu .customer-action-block,
.customer-more-menu .customer-action-unblock { --menu-icon-color: #4f91e8; }
.customer-more-menu .customer-action-archive,
.customer-more-menu .customer-action-restore { --menu-icon-color: #8a9aab; }

/* The menu is intentionally quieter than the quick-action buttons. */
.customers-table .customer-more-menu .customer-menu-action,
.customers-table .customer-more-menu .customer-menu-action:hover,
.customers-table .customer-more-menu .customer-menu-action:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--color-text-soft) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.customers-table .customer-more-menu .customer-menu-action:hover,
.customers-table .customer-more-menu .customer-menu-action:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) !important;
    color: var(--color-text) !important;
}

.customers-table .customer-more-menu .customer-menu-action.is-danger:hover,
.customers-table .customer-more-menu .customer-menu-action.is-danger:focus-visible {
    border-color: color-mix(in srgb, var(--color-red) 24%, transparent) !important;
    background: color-mix(in srgb, var(--color-red) 10%, var(--color-surface)) !important;
}

/* Expanded sidebar: less lateral dead space, same compact mode. */
:root {
    --sidebar-width: 252px;
}

.sidebar {
    padding-inline: 12px;
}

.brand {
    padding-inline: 6px;
}

.nav-scroll {
    padding-right: 0;
}

.sidebar-footer {
    margin-inline: -12px;
    padding-inline: 12px;
}

.sidebar-footer .tenant-card {
    margin-inline: -12px;
    padding-inline: 20px;
}

.customer-archive-policy-note > div {
    display: grid;
    gap: 4px;
}

.customer-archive-policy-note > div > span {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.55;
}

.customers-table .customer-action {
    width: 32px;
    height: 30px;
    border-color: color-mix(in srgb, var(--action-color) 82%, #ffffff);
    background: var(--action-color);
    color: #ffffff;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--action-color) 24%, transparent);
}

.customers-table .customer-action:hover,
.customers-table .customer-action:focus-visible {
    filter: brightness(1.12);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--action-color) 34%, transparent);
}

.customers-table td > .badge-success,
.customers-table td > .badge-warning,
.customers-table td > .badge-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 58px;
    min-height: 24px;
    padding: 5px 10px;
    border-color: transparent;
    border-radius: 999px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: capitalize;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}

.customers-table td > .badge-success::before,
.customers-table td > .badge-warning::before,
.customers-table td > .badge-danger::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ffffff;
}

.customers-table td > .badge-success { background: #20b868; }
.customers-table td > .badge-warning { background: #d99317; }
.customers-table td > .badge-danger { background: #e34b55; }

.manager-actions-cell .v3-action-group {
    justify-content: flex-end;
}

.customer-renewal-errors {
    margin-bottom: 16px;
}

.customer-renewal-dialog [hidden] {
    display: none !important;
}

.renewal-context-grid,
.customer-link-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.renewal-context-grid > div,
.customer-link-summary > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface-soft);
}

.renewal-context-grid span,
.customer-link-summary span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.renewal-context-grid strong,
.customer-link-summary strong {
    overflow-wrap: anywhere;
}

.form-help {
    margin: 16px 0 0;
    color: var(--color-muted);
    font-size: 12px;
}

.customer-operation-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
    gap: 18px;
}

.customer-link-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.customer-link-summary > div:last-child {
    grid-column: span 2;
}

/* Rocket dashboard information architecture rebuilt with V3 data. */
.rocket-dashboard-heading {
    align-items: flex-end;
}

.main-shell {
    min-width: 0;
    overflow-x: clip;
}

.dashboard-period-panel {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 26px;
    padding: 15px 17px;
}

.dashboard-period-panel > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dashboard-period-panel > div > div {
    display: grid;
    gap: 2px;
}

.dashboard-period-panel > div span:last-child {
    color: var(--color-muted);
    font-size: 12px;
}

.dashboard-period-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.dashboard-period-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.dashboard-period-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.dashboard-period-form label {
    display: grid;
    gap: 5px;
}

.dashboard-period-form label span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-period-form .input {
    min-width: 145px;
}

.rocket-dashboard-section {
    margin-bottom: 30px;
}

.rocket-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.rocket-section-heading h2 {
    margin: 2px 0 0;
    font-size: 22px;
}

.expiry-card-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 11px;
}

.rocket-summary-card,
.billing-card,
.profit-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.rocket-summary-card {
    --card-accent: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.rocket-summary-card:hover,
.rocket-summary-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--card-accent) 54%, var(--color-border));
    box-shadow: var(--shadow-md);
    outline: none;
}

.rocket-summary-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--card-accent) 13%, var(--color-surface));
    color: var(--card-accent);
    border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 22%, var(--color-border));
}

.rocket-summary-card header span {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 820;
}

.rocket-summary-card header svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.rocket-summary-card header > strong {
    font-size: 11px;
}

.rocket-summary-card > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 13px;
}

.rocket-card-value {
    font-size: 23px;
}

.rocket-summary-card > div span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 750;
}

.tone-green { --card-accent: #22835b; }
.tone-red { --card-accent: #bf2f36; }
.tone-rose { --card-accent: #a63d5b; --metric-color: #a63d5b; --metric-soft: #fbe7ed; }
.tone-amber { --card-accent: #b66a00; }
.tone-gold { --card-accent: #9b7810; --metric-color: #9b7810; --metric-soft: #fff5ce; }
.tone-blue { --card-accent: #3168d8; }
.tone-teal { --card-accent: #087f8c; }
.tone-violet { --card-accent: #7c4dcc; }

.billing-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.billing-card {
    --card-accent: var(--color-green);
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 108px;
    padding: 16px;
}

.billing-card-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: color-mix(in srgb, var(--card-accent) 12%, var(--color-surface));
    color: var(--card-accent);
}

.billing-card-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.billing-card > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.billing-card > div > span,
.billing-card small {
    color: var(--color-muted);
    font-size: 12px;
}

.billing-card strong {
    font-size: 21px;
    overflow-wrap: anywhere;
}

.profit-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profit-card {
    --card-accent: var(--color-blue);
    padding: 16px;
}

.profit-card header,
.profit-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profit-card header > span:first-child {
    font-weight: 840;
}

.profit-card-numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.profit-card-numbers > div {
    display: grid;
    gap: 5px;
    padding: 11px;
    border-radius: 7px;
    background: var(--color-surface-soft);
}

.profit-card-numbers span,
.profit-card footer span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 780;
    text-transform: uppercase;
}

.profit-card footer {
    padding-top: 13px;
    border-top: 1px solid var(--color-border);
}

.daily-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.daily-chart-panel {
    min-width: 0;
    overflow: hidden;
}

.daily-chart-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
}

.daily-chart {
    min-width: max(100%, calc(var(--chart-columns) * 44px));
    height: 250px;
    display: grid;
    grid-template-columns: repeat(var(--chart-columns), minmax(34px, 1fr));
    gap: 6px;
    align-items: end;
}

.daily-chart-column {
    height: 100%;
    display: grid;
    grid-template-rows: 20px minmax(150px, 1fr) 19px;
    gap: 5px;
    align-items: end;
    text-align: center;
}

.daily-chart-value {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 9px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-chart-track {
    position: relative;
    width: min(24px, 78%);
    height: 100%;
    display: block;
    justify-self: center;
    border-radius: 5px 5px 2px 2px;
    background: var(--color-surface-soft);
    overflow: hidden;
}

.daily-chart-fill {
    position: absolute;
    inset: auto 0 0;
    min-height: 2px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 70%, #111827));
}

.daily-chart-label {
    color: var(--color-text-soft);
    font-size: 9px;
    font-weight: 780;
}

.rocket-operations-grid {
    margin-top: 8px;
}

.rocket-history-panel {
    margin-bottom: 8px;
}

/* Dashboard maps: Rocket operational logic with Algo Gestor visual language. */
.rocket-map-grid {
    display: grid;
    gap: 14px;
}

.rocket-map-grid-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rocket-map-grid-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.rocket-map-card {
    min-width: 0;
    margin: 0;
    padding: 17px;
    overflow: hidden;
}

.rocket-map-header {
    min-height: 48px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.rocket-map-header h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.rocket-map-header p {
    margin: 0;
    color: var(--color-muted);
    font-size: 11px;
}

.rocket-map-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 760;
}

.rocket-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.rocket-map-legend i,
.payment-method-list i {
    width: 8px;
    height: 8px;
    display: block;
    flex: 0 0 auto;
    border-radius: 2px;
    background: var(--legend-color, var(--color-blue));
}

.legend-client { --legend-color: #2f6fd6; }
.legend-reseller { --legend-color: #55b98a; }
.legend-credit { --legend-color: #665cc7; }
.legend-cost { --legend-color: #e05260; }
.legend-profit { --legend-color: #29996b; }
.legend-revenue { --legend-color: #4f6fd0; }

.rocket-map-scroll {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.rocket-column-map {
    min-width: 100%;
    height: 238px;
    display: grid;
    grid-template-columns: repeat(var(--map-columns), minmax(0, 1fr));
    gap: clamp(1px, .35vw, 5px);
    align-items: end;
    padding: 8px 34px 0;
    border-bottom: 1px solid var(--color-border-strong);
    background-image: repeating-linear-gradient(to top, transparent 0, transparent 48px, color-mix(in srgb, var(--color-border) 72%, transparent) 49px);
}

.rocket-column-map-item {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 20px;
    gap: 6px;
    align-items: end;
    text-align: center;
}

.rocket-column-map-item > span {
    width: max-content;
    max-width: none;
    justify-self: center;
    color: var(--color-muted);
    min-width: 0;
    overflow: visible;
    font-size: clamp(7px, .55vw, 9px);
    font-weight: 760;
    white-space: nowrap;
}

.rocket-column-map-item:first-child > span {
    justify-self: start;
}

.rocket-column-map-item:last-child > span {
    justify-self: end;
}

.rocket-column-bars {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.rocket-column-bars.single-bar {
    padding-inline: 8px;
}

.rocket-column-bar {
    position: relative;
    width: min(15px, 42%);
    min-height: 2px;
    display: block;
    border-radius: 4px 4px 1px 1px;
    background: var(--bar-color);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--bar-color) 18%, transparent);
    transition: filter var(--transition), transform var(--transition);
}

.rocket-column-bar.is-empty {
    height: 0 !important;
    min-height: 0;
    opacity: 0;
    box-shadow: none;
}

.rocket-column-bar:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.rocket-column-bar b {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    color: var(--color-text-soft);
    font-size: 8px;
    font-weight: 820;
    transform: translateX(-50%);
}

.rocket-column-bar.is-client { --bar-color: #2f6fd6; }
.rocket-column-bar.is-reseller { --bar-color: #55b98a; }
.rocket-column-bar.is-credit { --bar-color: #665cc7; width: min(27px, 70%); }

.compact-map-card {
    min-height: 320px;
}

.rocket-horizontal-map {
    display: grid;
    gap: 15px;
}

.rocket-horizontal-row {
    display: grid;
    grid-template-columns: minmax(90px, 0.9fr) minmax(100px, 1.5fr) auto;
    align-items: center;
    gap: 10px;
}

.rocket-horizontal-row > div:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.rocket-horizontal-row > div:first-child strong,
.rocket-horizontal-row > div:first-child span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rocket-horizontal-row > div:first-child strong,
.rocket-horizontal-row > strong {
    font-size: 11px;
}

.rocket-horizontal-row > div:first-child span {
    color: var(--color-muted);
    font-size: 9px;
}

.rocket-horizontal-track {
    height: 18px;
    display: flex;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-surface-soft);
}

.rocket-horizontal-track > span {
    min-width: 0;
    height: 100%;
    display: block;
    transition: width 220ms ease;
}

.rocket-horizontal-track .is-cost { background: #e05260; }
.rocket-horizontal-track .is-profit { background: #29996b; }
.rocket-horizontal-track .is-revenue { background: #4f6fd0; }

.rocket-map-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 24px;
    border: 1px dashed var(--color-border-strong);
    border-radius: 7px;
    color: var(--color-muted);
    font-size: 12px;
    text-align: center;
}

.payment-method-layout {
    display: grid;
    grid-template-columns: minmax(128px, 0.85fr) minmax(135px, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 215px;
}

.payment-donut {
    width: min(150px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: conic-gradient(var(--payment-gradient));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 74%, transparent);
}

.payment-donut::before {
    content: '';
    grid-area: 1 / 1;
    width: 59%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-border);
}

.payment-donut > div {
    z-index: 1;
    grid-area: 1 / 1;
    display: grid;
    gap: 2px;
    text-align: center;
}

.payment-donut span {
    color: var(--color-muted);
    font-size: 9px;
    font-weight: 780;
    text-transform: uppercase;
}

.payment-donut strong {
    max-width: 78px;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.payment-method-list {
    display: grid;
    gap: 5px;
}

.payment-method-list > div {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
}

.payment-method-list > div:last-child {
    border-bottom: 0;
}

.payment-method-list i {
    --legend-color: var(--method-color);
    border-radius: 50%;
}

.payment-method-list span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.payment-method-list strong,
.payment-method-list b {
    font-size: 10px;
}

.payment-method-list small {
    color: var(--color-muted);
    font-size: 8px;
}

.rocket-geo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 14px;
}

.customer-location-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 116px;
    gap: 12px;
}

.rocket-geo-card {
    min-width: 0;
    margin: 0;
    padding: 17px;
}

.geo-total {
    display: grid;
    justify-items: end;
    gap: 2px;
    color: var(--color-primary);
}

.geo-total strong {
    font-size: 21px;
    line-height: 1;
}

.geo-total small {
    color: var(--color-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.geo-heading-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.geo-map-stage {
    position: relative;
    min-height: 318px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px),
        var(--color-surface-soft);
    background-size: 34px 34px;
}

.geo-map-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 50px color-mix(in srgb, var(--color-surface) 70%, transparent);
}

.geo-vector-map {
    width: 100%;
    height: 318px;
    display: grid;
    place-items: center;
    padding: 16px;
}

.geo-map-stage-brazil .geo-vector-map,
.geo-map-stage-world .geo-vector-map { padding: 14px 24px 40px; }
.geo-map-stage-world,
.geo-map-stage-world .geo-vector-map { min-height: 338px; height: 338px; }

.geo-map-svg {
    width: auto;
    height: 270px;
    max-width: 94%;
    max-height: calc(100% - 18px);
    display: block;
    overflow: visible;
    filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--color-text) 12%, transparent));
}

.geo-region {
    cursor: pointer;
    stroke: color-mix(in srgb, var(--color-surface) 84%, var(--color-border));
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    outline: none;
    transition: fill 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.geo-region.level-0 { fill: color-mix(in srgb, var(--color-text-soft) 23%, var(--color-surface-soft)); stroke: color-mix(in srgb, var(--color-text-soft) 28%, var(--color-border)); }
.geo-region.level-1 { fill: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface)); }
.geo-region.level-2 { fill: color-mix(in srgb, var(--color-primary) 46%, var(--color-surface)); }
.geo-region.level-3 { fill: color-mix(in srgb, var(--color-primary) 62%, var(--color-surface)); }
.geo-region.level-4 { fill: color-mix(in srgb, var(--color-primary) 78%, var(--color-surface)); }
.geo-region.level-5 { fill: var(--color-primary); }

.geo-region:hover,
.geo-region:focus-visible {
    stroke: var(--color-primary-strong);
    stroke-width: 2;
    filter: brightness(1.14) drop-shadow(0 3px 4px color-mix(in srgb, var(--color-primary) 25%, transparent));
}

.geo-map-loading,
.geo-map-error {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.geo-map-tooltip {
    position: absolute;
    z-index: 4;
    width: 176px;
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
}

.geo-map-tooltip[hidden] { display: none; }

.geo-map-tooltip strong { color: var(--color-text); font-size: 11px; }
.geo-map-tooltip span { color: var(--color-primary); font-size: 14px; font-weight: 900; }
.geo-map-tooltip small { color: var(--color-muted); font-size: 8px; }

.geo-map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.geo-map-legend i {
    width: 22px;
    height: 7px;
    border-radius: 2px;
}

.geo-map-legend .level-1 { background: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface)); }
.geo-map-legend .level-2 { background: color-mix(in srgb, var(--color-primary) 46%, var(--color-surface)); }
.geo-map-legend .level-3 { background: color-mix(in srgb, var(--color-primary) 62%, var(--color-surface)); }
.geo-map-legend .level-4 { background: color-mix(in srgb, var(--color-primary) 78%, var(--color-surface)); }
.geo-map-legend .level-5 { background: var(--color-primary); }

.geo-map-footnote {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 10px;
}

.geo-map-footnote svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.country-flag {
    width: 27px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    border-radius: 5px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: 8px;
    font-weight: 900;
}

.geo-country-summary {
    min-height: 46px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.geo-country-summary > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface-soft);
}

.geo-country-summary strong,
.geo-country-summary b,
.geo-country-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geo-country-summary strong { font-size: 9px; }
.geo-country-summary b { color: var(--color-primary); font-size: 9px; }
.geo-country-summary small { grid-column: 2 / -1; color: var(--color-muted); font-size: 8px; }
.geo-country-summary > span { align-self: center; color: var(--color-muted); font-size: 10px; }

@media (max-width: 1400px) {
    .expiry-card-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 1100px) {
    .billing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .daily-chart-grid,
    .rocket-map-grid-primary,
    .customer-operation-grid { grid-template-columns: 1fr; }
    .rocket-map-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-method-map { grid-column: 1 / -1; }
    .rocket-geo-grid { grid-template-columns: 1fr; }
    .customer-location-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .dashboard-period-panel,
    .dashboard-period-form { align-items: stretch; flex-direction: column; }
    .dashboard-period-form .input { width: 100%; min-width: 0; }
    .expiry-card-grid,
    .billing-card-grid,
    .profit-card-grid { grid-template-columns: 1fr; }
    .rocket-section-heading { align-items: flex-start; flex-direction: column; }
    .renewal-context-grid,
    .customer-link-summary { grid-template-columns: 1fr; }
    .customer-link-summary > div:last-child { grid-column: auto; }
    .customer-actions { gap: 7px; }
    .customer-action { width: 42px; height: 40px; }
    .rocket-map-grid-secondary { grid-template-columns: 1fr; }
    .payment-method-map { grid-column: auto; }
    .rocket-map-header { min-height: 0; flex-direction: column; }
    .rocket-map-legend { justify-content: flex-start; }
    .rocket-horizontal-row { grid-template-columns: minmax(82px, 0.8fr) minmax(90px, 1fr) auto; }
    .payment-method-layout { grid-template-columns: 1fr; }
    .payment-donut { width: 138px; }
    .geo-map-stage,
    .geo-vector-map { min-height: 280px; height: 280px; }
    .geo-map-stage-world,
    .geo-map-stage-world .geo-vector-map { min-height: 300px; height: 300px; }
    .geo-map-stage-brazil .geo-vector-map,
    .geo-map-stage-world .geo-vector-map { padding: 12px 18px 28px; }
    .geo-map-svg { height: 220px; }
    .geo-country-summary { grid-template-columns: 1fr; }
    .customer-location-fields { grid-template-columns: 1fr; }
}

/* Revendas: central operacional baseada no fluxo funcional do V1. */
.reseller-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.table-primary {
    display: grid;
    gap: 2px;
}

.table-primary span,
.server-link-main span,
.timeline-item p,
.timeline-item > div > span {
    color: var(--color-muted);
    font-size: 13px;
}

.reseller-page-heading,
.reseller-central-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.reseller-page-heading h1,
.reseller-central-head h1 {
    margin: 2px 0 4px;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.15;
}

.reseller-page-heading p,
.reseller-central-head p {
    margin: 0;
    color: var(--color-muted);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
}

.back-link svg {
    width: 15px;
    height: 15px;
}

.reseller-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reseller-form {
    max-width: 920px;
    margin: 0 auto;
}

.reseller-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field-span-2 {
    grid-column: span 2;
}

.form-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.form-field > span {
    color: var(--color-text-soft);
    font-size: 13px;
    font-weight: 700;
}

.textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 11px 13px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.reseller-tabs {
    margin-bottom: 18px;
}

.reseller-central-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 22px;
    scroll-margin-top: calc(var(--topbar-height) + 18px);
}

.reseller-links-panel,
.reseller-action-panel {
    min-width: 0;
}

.server-link-list {
    display: grid;
}

.server-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-top: 1px solid var(--color-border);
}

.server-link-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.server-link-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 180px;
}

.server-link-main > div {
    display: grid;
}

.server-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.server-icon svg {
    width: 18px;
    height: 18px;
}

.server-link-data {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.server-link-data > span:not(.badge) {
    display: grid;
    min-width: 80px;
    font-weight: 700;
}

.server-link-data small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.stack-form {
    display: grid;
    gap: 15px;
}

.two-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.button-block {
    width: 100%;
    justify-content: center;
}

.credit-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.credit-total span {
    color: var(--color-muted);
    font-size: 13px;
}

.credit-total strong {
    font-size: 18px;
}

.reseller-history {
    scroll-margin-top: calc(var(--topbar-height) + 18px);
}

.timeline {
    display: grid;
}

.timeline-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid var(--color-border);
}

.timeline-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.timeline-marker {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.timeline-marker svg {
    width: 16px;
    height: 16px;
}

.timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.timeline-head time {
    color: var(--color-muted);
    font-size: 12px;
    white-space: nowrap;
}

.timeline-item p {
    margin: 3px 0;
}

.empty-state.compact {
    min-height: 150px;
}

.action-danger {
    color: var(--color-red);
}

@media (max-width: 1120px) {
    .reseller-central-grid {
        grid-template-columns: 1fr;
    }

    .reseller-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .reseller-page-heading,
    .reseller-central-head,
    .server-link-row {
        align-items: stretch;
        flex-direction: column;
    }

    .reseller-form-grid,
    .two-field-grid,
    .reseller-stats {
        grid-template-columns: 1fr;
    }

    .field-span-2 {
        grid-column: auto;
    }

    .server-link-data {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .reseller-head-actions,
    .form-actions {
        flex-wrap: wrap;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0d1117;
    --color-bg-elevated: #121821;
    --color-surface: #181e27;
    --color-surface-soft: #202834;
    --color-sidebar: #181e27;
    --color-text: #f1f5f9;
    --color-text-soft: #c5ceda;
    --color-muted: #929dad;
    --color-border: #2b3543;
    --color-border-strong: #3c4858;
    --color-primary: #36beb9;
    --color-primary-strong: #6edbd6;
    --color-primary-soft: rgba(54, 190, 185, 0.14);
    --color-blue: #79a6ff;
    --color-blue-soft: rgba(72, 119, 214, 0.18);
    --color-violet: #b99aff;
    --color-violet-soft: rgba(124, 77, 204, 0.18);
    --color-amber: #ffbc63;
    --color-amber-soft: rgba(182, 106, 0, 0.20);
    --color-green: #62d39c;
    --color-green-soft: rgba(34, 131, 91, 0.20);
    --color-red: #ff7b83;
    --color-red-soft: rgba(191, 47, 54, 0.18);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 5px 16px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 22px 56px rgba(0, 0, 0, 0.34);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--color-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0, var(--color-bg) 190px);
    background-attachment: fixed;
    color: var(--color-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    border: 0;
}

svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-muted) 34%, transparent) transparent;
}

*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-muted) 34%, transparent);
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-muted) 52%, transparent);
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 84px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 22px 18px 0;
    background:
        linear-gradient(180deg, rgba(51, 195, 189, 0.12), transparent 34%),
        var(--color-sidebar);
    color: #e8f5f1;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 4px 6px 24px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, #33c3bd, #3168d8);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 16px 32px rgba(51, 195, 189, 0.20);
}

.brand-name {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.brand-segment {
    display: block;
    margin-top: 2px;
    color: rgba(232, 245, 241, 0.62);
    font-size: 12px;
    font-weight: 650;
}

.nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 22px;
    padding: 0 3px 18px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.nav-scroll:hover {
    scrollbar-color: rgba(232, 245, 241, 0.28) transparent;
}

.nav-scroll::-webkit-scrollbar {
    width: 4px;
    height: 0;
}

.nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.nav-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: transparent;
}

.nav-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(232, 245, 241, 0.28);
}

.nav-section {
    display: grid;
    gap: 8px;
}

.nav-heading {
    padding: 0 10px;
    color: rgba(232, 245, 241, 0.44);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    align-items: center;
    min-height: 42px;
    gap: 11px;
    padding: 10px;
    border-radius: var(--radius-md);
    color: rgba(232, 245, 241, 0.78);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.nav-link.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(51, 195, 189, 0.22), rgba(49, 104, 216, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.nav-link.is-muted {
    color: rgba(232, 245, 241, 0.50);
}

.nav-link.is-muted:hover,
.nav-link.is-muted:focus-visible {
    color: rgba(232, 245, 241, 0.72);
}

.nav-svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.nav-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 720;
}

.nav-pill {
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.09);
    color: rgba(232, 245, 241, 0.66);
    font-size: 10px;
    font-weight: 800;
}

.sidebar-footer {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin-top: auto;
    margin-inline: -18px;
    padding: 12px 18px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(5, 24, 41, 0.86), rgba(5, 24, 41, 0.98));
    box-shadow: 0 -12px 28px rgba(2, 18, 32, 0.16);
}

.tenant-renewal-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    color: #7dd3fc;
    font-size: 9.5px;
    font-weight: 800;
    text-decoration: none;
}

.tenant-renewal-inline:hover,
.tenant-renewal-inline:focus-visible {
    color: #ffffff;
    outline: none;
}

.tenant-renewal-inline > svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tenant-renewal-inline > span,
.tenant-renewal-inline > small {
    white-space: nowrap;
}

.tenant-renewal-inline > small {
    margin-left: auto;
    color: rgba(232, 245, 241, 0.62);
    font-size: 9px;
    font-weight: 750;
}

.tenant-renewal-inline.is-warning {
    color: #fcd34d;
}

.tenant-renewal-inline.is-danger {
    color: #fda4af;
}

.tenant-renewal-progress {
    display: block;
    height: 3px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
}

.tenant-renewal-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #36d98a;
}

.tenant-renewal-progress.is-warning > span {
    background: #f4a928;
}

.tenant-renewal-progress.is-danger > span {
    background: #ef5261;
}

.tenant-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 8px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 -1px 0 rgba(255, 255, 255, 0.045);
}

.sidebar-footer .tenant-card {
    margin-inline: -18px;
    padding-inline: 26px;
}

.tenant-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(96, 210, 203, 0.26);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(51, 195, 189, 0.25), rgba(49, 104, 216, 0.28));
    color: #eaffff;
    font-size: 11px;
    font-weight: 850;
}

.tenant-copy {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.tenant-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tenant-label {
    color: rgba(232, 245, 241, 0.56);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.tenant-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 4px;
}

.tenant-scope {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.14);
    color: #a7f3d0;
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
    text-transform: uppercase;
}

.tenant-role {
    min-width: 0;
    overflow: hidden;
    color: rgba(232, 245, 241, 0.62);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 7px;
}

.sidebar-footer-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 245, 241, 0.64);
    font-size: 10.5px;
    font-weight: 720;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.sidebar-footer-action:hover,
.sidebar-footer-action:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    outline: none;
}

.sidebar-footer-action > svg,
.sidebar-footer-action .nav-svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-logout-form {
    min-width: 0;
}

.sidebar-collapse-button {
    min-width: 0;
    margin-left: 0;
}

.sidebar-collapsed .sidebar {
    margin-inline: 0;
    padding-inline: 12px;
}

.sidebar-collapsed .sidebar-footer {
    margin-inline: -12px;
    padding-inline: 12px;
}

.sidebar-collapsed .sidebar-footer .tenant-card {
    margin-inline: -12px;
    padding-inline: 19px;
}

.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-heading,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .tenant-copy,
.sidebar-collapsed .sidebar-footer-actions span {
    display: none;
}

.sidebar-collapsed .brand-lockup {
    display: none;
}

.sidebar-collapsed .brand > .brand-mark.brand-mark-official {
    display: grid;
}

.sidebar-collapsed .brand {
    justify-content: center;
    padding-inline: 0;
}

.sidebar-collapsed .nav-link {
    justify-content: center;
}

.sidebar-collapsed .nav-icon {
    margin-inline: auto;
}

.sidebar-collapsed .tenant-card {
    display: grid;
    place-items: center;
    padding: 7px;
}

.sidebar-collapsed .sidebar-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.sidebar-collapsed .sidebar-footer-action {
    width: 100%;
    padding-inline: 0;
}

/* Contextual module flyout for the compact sidebar. */
.sidebar-flyout {
    position: fixed;
    z-index: 1000;
    left: calc(84px + 10px);
    top: 20px;
    display: grid;
    width: min(248px, calc(100vw - 110px));
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(145, 199, 244, 0.18);
    border-radius: 12px;
    background: color-mix(in srgb, #0d172a 94%, var(--color-sidebar));
    box-shadow: 0 24px 55px rgba(1, 10, 22, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    color: #eef7ff;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px) translateY(-50%);
    transition: opacity 150ms ease, transform 150ms ease;
}

.sidebar-flyout[hidden] {
    display: none;
}

.sidebar-flyout.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) translateY(-50%);
}

.sidebar-flyout::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-left: 1px solid rgba(145, 199, 244, 0.18);
    border-bottom: 1px solid rgba(145, 199, 244, 0.18);
    background: #0d172a;
    transform: translateY(-50%) rotate(45deg);
}

.sidebar-flyout-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sidebar-flyout-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid color-mix(in srgb, var(--flyout-tone) 36%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--flyout-tone) 18%, #11213a);
    color: var(--flyout-tone);
}

.sidebar-flyout-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-flyout-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.sidebar-flyout-copy strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-flyout-copy small {
    color: rgba(219, 234, 254, 0.62);
    font-size: 10px;
    line-height: 1.35;
}

.sidebar-flyout-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--flyout-tone) 30%, transparent);
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--flyout-tone) 86%, #2563eb), #2563eb);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 850;
}

.sidebar-flyout-action svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-icon-cyan { color: #7dd3fc; }
.nav-icon-green { color: #6ee7b7; }
.nav-icon-violet { color: #c4b5fd; }
.nav-icon-blue { color: #93c5fd; }
.nav-icon-amber { color: #fcd34d; }
.nav-icon-gold { color: #facc15; }
.nav-icon-emerald { color: #6ee7b7; }
.nav-icon-whatsapp { color: #86efac; }
.nav-icon-rose { color: #fda4af; }
.nav-icon-slate { color: #cbd5e1; }
.nav-icon-orange { color: #fdba74; }

@media (min-width: 981px) {
    .sidebar-collapsed .nav-link {
        overflow: visible;
    }
}

@media (max-width: 980px) {
    .sidebar-flyout {
        display: none !important;
    }
}

.sidebar-collapsed .sidebar-collapse-button .nav-svg {
    transform: rotate(180deg);
}

.main-shell {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 30px;
    background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(18px);
}

.topbar-title {
    display: grid;
    min-width: 170px;
}

.eyebrow {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar-title strong {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 820;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 12px;
    min-width: 0;
}

.search-box {
    width: min(360px, 100%);
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-muted);
    box-shadow: var(--shadow-sm);
}

.search-box svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
}

.search-box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.icon-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-soft);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), color var(--transition), transform var(--transition), background var(--transition);
}

.icon-button:hover,
.icon-button:focus-visible {
    color: var(--color-primary-strong);
    border-color: var(--color-primary);
    outline: none;
    transform: translateY(-1px);
}

.icon-button svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.topbar-menu {
    position: relative;
    flex: 0 0 auto;
}

.topbar-menu-trigger {
    position: relative;
}

.topbar-menu-trigger.is-open {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.topbar-announcement-trigger {
    --topbar-attention-color: var(--color-blue);
}

.topbar-announcement-trigger:hover,
.topbar-announcement-trigger:focus-visible,
.topbar-announcement-trigger.is-open {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.topbar-notification-trigger {
    --topbar-attention-color: var(--color-orange, #d97706);
}

.topbar-notification-trigger:hover,
.topbar-notification-trigger:focus-visible,
.topbar-notification-trigger.is-open {
    border-color: var(--color-orange, #d97706);
    background: color-mix(in srgb, var(--color-amber-soft) 80%, var(--color-surface));
    color: var(--color-orange, #d97706);
}

.topbar-menu-trigger.has-unread {
    animation: topbar-unread-pulse 2.2s ease-in-out infinite;
}

@keyframes topbar-unread-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--topbar-attention-color) 0%, transparent);
    }
    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--topbar-attention-color) 22%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-menu-trigger.has-unread {
        animation: none;
    }
}

.topbar-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid var(--color-bg);
    border-radius: 999px;
    background: var(--color-red);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}

.topbar-popover {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 28px));
    display: grid;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 24px 58px rgba(8, 18, 28, .28);
}

.topbar-popover[hidden] {
    display: none;
}

#user-notification-menu {
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}

[data-theme="dark"] #user-notification-menu {
    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-orange, #d97706) 4%);
}

.topbar-popover-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-soft);
}

.topbar-popover-announce .topbar-popover-heading {
    min-height: 60px;
    border-top: 0;
}

#admin-broadcast-menu .topbar-popover-heading strong {
    font-size: 16px;
    line-height: 1.2;
}

#admin-broadcast-menu .topbar-popover-heading .topbar-popover-icon.tone-amber {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border: 0;
    background: transparent;
    color: var(--color-amber, #d58a16);
}

#admin-broadcast-menu .topbar-popover-heading .topbar-popover-icon svg {
    width: 17px;
    height: 17px;
}

#user-notification-menu .topbar-popover-heading {
    border-top: 2px solid var(--color-orange, #d97706);
}

.topbar-popover-heading > span:last-child {
    display: grid;
    gap: 2px;
}

.topbar-popover-heading > span:nth-child(2) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.topbar-popover-heading-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.topbar-popover-close {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.topbar-popover-close:hover {
    color: var(--color-text);
}

.topbar-popover-close svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.topbar-popover-heading strong {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 850;
}

.topbar-popover-heading small,
.topbar-popover p,
.topbar-notification-item small {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.35;
}

#user-notification-menu .topbar-popover-heading {
    min-height: 60px;
    background: color-mix(in srgb, var(--color-surface-soft) 72%, transparent);
}

#user-notification-menu .topbar-popover-heading strong {
    font-size: 16px;
    line-height: 1.2;
}

[data-theme="dark"] #user-notification-menu .topbar-popover-heading,
[data-theme="dark"] #user-notification-menu .topbar-popover-footer {
    background: var(--color-surface-soft);
}

#user-notification-menu .topbar-popover-heading .topbar-popover-icon.tone-orange {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border: 0;
    background: transparent;
    color: var(--color-orange, #d97706);
}

#user-notification-menu .topbar-popover-heading .topbar-popover-icon svg {
    width: 17px;
    height: 17px;
}

#admin-broadcast-menu .topbar-popover-heading > .topbar-popover-close {
    margin-left: auto;
}

.topbar-popover p {
    margin: 0;
}

.topbar-broadcast-form {
    display: grid;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
}

.topbar-broadcast-form label {
    display: grid;
    gap: 4px;
}

.topbar-broadcast-form label > span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
}

.topbar-broadcast-form .input,
.topbar-broadcast-form .select,
.topbar-broadcast-form .textarea {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.topbar-broadcast-form .textarea {
    min-height: 64px;
    resize: vertical;
}

.topbar-broadcast-form .button {
    min-height: 34px;
    justify-content: center;
    padding: 7px 10px;
    font-size: 11px;
}

.topbar-broadcast-form .button svg {
    width: 14px;
    height: 14px;
}

.topbar-popover-description {
    margin: 13px 15px 10px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.4;
}

.topbar-create-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 37px;
    margin: 0 15px 13px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.topbar-create-button:hover {
    background: var(--color-primary-strong);
}

.topbar-create-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.topbar-broadcast-dialog {
    width: min(470px, calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 28px 80px rgba(8, 18, 28, .34);
}

.topbar-broadcast-dialog::backdrop {
    background: rgba(5, 12, 20, .62);
    backdrop-filter: blur(4px);
}

.topbar-broadcast-dialog-form {
    display: grid;
    gap: 13px;
    padding: 18px;
}

.topbar-broadcast-dialog-form > header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.topbar-broadcast-dialog-form > header > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.topbar-broadcast-dialog-form > header strong {
    font-size: 15px;
}

.topbar-broadcast-dialog-form > header small {
    color: var(--color-muted);
    font-size: 11px;
}

.topbar-broadcast-dialog-form > header .topbar-popover-close {
    margin-left: auto;
}

.topbar-broadcast-dialog-form label {
    display: grid;
    gap: 5px;
}

.topbar-broadcast-dialog-form label > span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
}

.topbar-broadcast-dialog-form .input,
.topbar-broadcast-dialog-form .select,
.topbar-broadcast-dialog-form .textarea {
    min-height: 40px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.topbar-broadcast-dialog-form .textarea {
    resize: vertical;
}

.topbar-broadcast-dialog-form > footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 13px;
    border-top: 1px solid var(--color-border);
}

.topbar-broadcast-dialog-form .button {
    min-height: 38px;
    padding: 0 13px;
    font-size: 11px;
}

.topbar-broadcast-dialog-form .button svg {
    width: 14px;
    height: 14px;
}

.topbar-popover-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.topbar-popover-icon.tone-amber {
    background: var(--color-amber-soft);
    color: var(--color-amber-strong);
}

.topbar-popover-icon.tone-blue {
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.topbar-popover-icon.tone-orange {
    background: color-mix(in srgb, var(--color-amber-soft) 82%, var(--color-surface));
    color: var(--color-amber-strong, #a65f00);
}

.topbar-popover-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-popover-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary-strong);
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}

.topbar-popover-link:hover {
    color: var(--color-primary);
}

.topbar-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 76px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

#user-notification-menu .topbar-notification-item {
    min-height: 92px;
    padding: 15px 16px;
    gap: 12px;
    background: transparent;
}

#user-notification-menu .topbar-notification-item:hover {
    background: color-mix(in srgb, var(--color-surface-soft) 70%, transparent);
}

#user-notification-menu .topbar-notification-item .topbar-popover-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border: 1px solid color-mix(in srgb, var(--color-orange, #d97706) 38%, var(--color-border));
    background: color-mix(in srgb, var(--color-surface) 91%, var(--color-orange, #d97706) 9%);
    color: var(--color-orange, #d97706);
}

.topbar-notification-item:hover {
    background: var(--color-surface-soft);
}

.topbar-notification-item:last-of-type {
    border-bottom: 0;
}

.topbar-notification-item > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.topbar-notification-item > span:nth-child(2) {
    display: grid;
    gap: 3px;
    flex: 1;
}

.topbar-system-item {
    min-height: 82px;
    padding: 12px 15px;
}
}

.topbar-system-item .topbar-popover-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.topbar-system-item .topbar-popover-icon svg {
    width: 18px;
    height: 18px;
}

#admin-broadcast-menu .topbar-system-item {
    min-height: 120px;
    padding: 16px;
    gap: 12px;
}

#admin-broadcast-menu .topbar-system-item .topbar-popover-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border: 1px solid color-mix(in srgb, var(--color-red) 36%, var(--color-border));
    background: color-mix(in srgb, var(--color-red-soft) 82%, var(--color-surface));
    color: var(--color-red);
}

#admin-broadcast-menu .topbar-system-item > span:nth-child(2) {
    gap: 4px;
}

#admin-broadcast-menu .topbar-system-item strong {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

#admin-broadcast-menu .topbar-system-item small {
    display: block;
    overflow: visible;
    color: var(--color-text-soft);
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

#admin-broadcast-menu .topbar-system-item small:last-child {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 11px;
}

#admin-broadcast-menu .notification-label {
    margin-bottom: 1px;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--color-red-soft);
    color: var(--color-red);
    font-size: 11px;
    font-weight: 700;
}

#admin-broadcast-menu .topbar-popover-footer {
    min-height: 42px;
    font-size: 12px;
    background: var(--color-surface-soft);
}

.notification-label {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 2px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
}

.notification-label.priority-critica,
.notification-label.priority-alta {
    background: var(--color-red-soft);
    color: var(--color-red);
}

.topbar-item-actions {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--color-muted);
    font-size: 12px;
}

#user-notification-menu .topbar-item-actions {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding-top: 2px;
}

#user-notification-menu .topbar-item-actions form {
    display: contents;
}

#user-notification-menu .topbar-item-actions button,
#user-notification-menu .topbar-item-read {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

#user-notification-menu .topbar-item-actions button:hover {
    color: var(--color-text);
}

#user-notification-menu .topbar-item-actions button.is-danger:hover {
    color: var(--color-red);
}

#user-notification-menu .topbar-item-actions svg,
#user-notification-menu .topbar-item-read svg {
    width: 14px;
    height: 14px;
}

.topbar-item-actions svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.topbar-mark-read {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-amber-strong, #a65f00);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-notification-item strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: normal;
}

#user-notification-menu .topbar-notification-item > span:nth-child(2) > small:first-of-type {
    color: var(--color-text-soft);
    font-size: 12px;
}

#user-notification-menu .topbar-notification-item > span:nth-child(2) > small:last-of-type {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11px;
}

.topbar-notification-item small {
    display: block;
    overflow: visible;
    white-space: normal;
    line-height: 1.35;
}

#user-notification-menu .topbar-popover-footer {
    min-height: 42px;
    font-size: 12px;
    background: color-mix(in srgb, var(--color-surface-soft) 55%, transparent);
}

.notification-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--color-blue);
}

.notification-dot.priority-critica,
.notification-dot.priority-alta {
    background: var(--color-red);
}

.notification-dot.priority-normal {
    background: var(--color-primary);
}

.topbar-popover-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 14px 15px;
    color: var(--color-muted);
    font-size: 11px;
}

.topbar-popover-footer {
    display: block;
    margin: 0;
    padding: 11px 15px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 10px;
    text-align: center;
    text-decoration: none;
}

.topbar-popover-footer:hover {
    color: var(--color-primary-strong);
}

.topbar-popover-empty svg {
    width: 15px;
    height: 15px;
    color: var(--color-primary);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.theme-icon-dark,
[data-theme="dark"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: block;
}

.mobile-menu {
    display: none;
}

.scope-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.scope-pill-primary {
    border-color: color-mix(in srgb, var(--color-primary) 46%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.profile-chip {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.profile-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: 12px;
    font-weight: 850;
}

.profile-meta {
    display: grid;
    min-width: 0;
}

.profile-name,
.profile-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-name {
    font-size: 13px;
    font-weight: 820;
}

.profile-role {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 650;
}

.logout-form {
    display: flex;
}

.content {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 30px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.page-kicker {
    margin: 0 0 8px;
    color: var(--color-primary-strong);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-heading h1 {
    margin: 0;
    font-size: 36px;
    line-height: 1.06;
    letter-spacing: 0;
}

.page-heading p {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--color-text-soft);
    font-size: 16px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 780;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
}

.button:hover,
.button:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
    outline: none;
    transform: translateY(-1px);
}

.button-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
    color: #ffffff;
}

.button-primary:hover,
.button-primary:focus-visible {
    color: #ffffff;
    border-color: transparent;
}

.button-success {
    border-color: transparent;
    background: var(--color-green);
    color: #ffffff;
}

.button-success:hover,
.button-success:focus-visible {
    border-color: transparent;
    background: color-mix(in srgb, var(--color-green) 86%, #000000);
    color: #ffffff;
}

.button svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.card,
.stat-card,
.panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.stat-card {
    position: relative;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 18px;
}

.stat-card::after {
    display: none;
}

.stat-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.stat-label {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 820;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.metric-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--metric-soft);
    color: var(--metric-color);
}

.metric-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.tone-teal {
    --metric-color: var(--color-primary-strong);
    --metric-soft: var(--color-primary-soft);
}

.tone-blue {
    --metric-color: var(--color-blue);
    --metric-soft: var(--color-blue-soft);
}

.tone-violet {
    --metric-color: var(--color-violet);
    --metric-soft: var(--color-violet-soft);
}

.tone-amber {
    --metric-color: var(--color-amber);
    --metric-soft: var(--color-amber-soft);
}

.tone-green {
    --metric-color: var(--color-green);
    --metric-soft: var(--color-green-soft);
}

.tone-red {
    --metric-color: var(--color-red);
    --metric-soft: var(--color-red-soft);
}

.stat-value {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    font-size: 34px;
    line-height: 1;
    font-weight: 860;
    letter-spacing: 0;
}

.stat-caption {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    color: var(--color-text-soft);
    font-size: 13px;
    font-weight: 650;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
    gap: 18px;
    margin-bottom: 22px;
}

.panel {
    padding: 20px;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 840;
}

.panel-subtitle {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 800;
}

.badge-success {
    border-color: color-mix(in srgb, var(--color-green) 32%, var(--color-border));
    background: var(--color-green-soft);
    color: var(--color-green);
}

.badge-warning {
    border-color: color-mix(in srgb, var(--color-amber) 34%, var(--color-border));
    background: var(--color-amber-soft);
    color: var(--color-amber);
}

.badge-danger {
    border-color: color-mix(in srgb, var(--color-red) 34%, var(--color-border));
    background: var(--color-red-soft);
    color: var(--color-red);
}

.badge-neutral {
    background: var(--color-surface-soft);
    color: var(--color-text-soft);
}

.badge-blue {
    border-color: color-mix(in srgb, var(--color-blue) 30%, var(--color-border));
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.lifecycle {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.lifecycle-step {
    min-height: 132px;
    display: grid;
    align-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}

.step-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: 12px;
    font-weight: 850;
}

.step-title {
    display: block;
    font-weight: 830;
}

.step-copy {
    margin-top: 5px;
    color: var(--color-muted);
    font-size: 12px;
}

.signal-list {
    display: grid;
    gap: 12px;
}

.signal-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}

.signal-dot {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--signal-color, var(--color-primary));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal-color, var(--color-primary)) 16%, transparent);
}

.signal-title {
    display: block;
    font-size: 13px;
    font-weight: 820;
}

.signal-copy {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 12px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr {
    transition: background var(--transition);
}

.data-table tbody tr:hover {
    background: var(--color-bg-elevated);
}

.table-main {
    display: grid;
    gap: 3px;
}

.table-main strong {
    font-weight: 820;
}

.table-main span,
.table-muted {
    color: var(--color-muted);
    font-size: 12px;
}

.table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary-strong);
    font-size: 12px;
    font-weight: 820;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.table-action:hover,
.table-action:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    outline: none;
    transform: translateY(-1px);
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-actions form {
    margin: 0;
}

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

.table-action-muted:hover,
.table-action-muted:focus-visible {
    color: var(--color-red);
    border-color: var(--color-red);
    background: var(--color-red-soft);
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 190px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-muted);
    text-align: center;
    padding: 28px;
}

.empty-state > svg {
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.manager-table td[colspan] > .empty-state {
    width: calc(100% - 20px);
    min-height: 210px;
    margin: 10px;
}

.empty-state strong {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text);
    font-size: 16px;
}

.notice {
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font-weight: 760;
}

.notice-success {
    border-color: color-mix(in srgb, var(--color-green) 32%, var(--color-border));
    background: var(--color-green-soft);
    color: var(--color-green);
}

/* Success confirmations are transient feedback, not page content. */
.global-success-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 420;
    display: flex;
    align-items: center;
    gap: 11px;
    width: min(380px, calc(100vw - 32px));
    margin: 0;
    padding: 13px 13px 13px 16px;
    border: 1px solid color-mix(in srgb, var(--color-green) 42%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-green-soft) 86%, var(--color-surface));
    box-shadow: 0 18px 42px rgba(7, 20, 25, .24), var(--shadow-md);
    font-size: 12px;
    line-height: 1.4;
    animation: global-toast-in .22s ease-out;
}

.global-success-toast::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: var(--color-green);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.global-success-toast.is-leaving {
    animation: global-toast-out .18s ease-in forwards;
}

.global-success-toast-close {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-left: auto;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.global-success-toast-close:hover {
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    color: var(--color-green);
}

@keyframes global-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes global-toast-out { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 760px) {
    .global-success-toast { right: 16px; bottom: 16px; left: 16px; width: auto; }
}

.notify-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.notify-hero-actions form { margin: 0; }

@media (max-width: 760px) {
    .notify-hero-actions { justify-content: stretch; }
    .notify-hero-actions form,
    .notify-hero-actions .button { width: 100%; }
}

.notice-danger {
    display: grid;
    gap: 3px;
    border-color: color-mix(in srgb, var(--color-red) 32%, var(--color-border));
    background: var(--color-red-soft);
    color: var(--color-red);
}

.module-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, var(--metric-soft), transparent 58%),
        var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.module-hero-copy {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.module-hero h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.06;
}

.module-hero p {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--color-text-soft);
    font-size: 16px;
}

.module-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--metric-soft);
    color: var(--metric-color);
}

.module-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.module-hero-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.module-create-action {
    align-self: center;
    min-height: 42px;
    line-height: 1;
}

.module-create-action > svg {
    display: block;
    flex: 0 0 auto;
    transform: none;
}

.module-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.customers-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.scope-filter-panel {
    position: relative;
    overflow: visible;
    margin-bottom: 18px;
    padding: 6px;
}

.scope-filter-toolbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 18px;
    padding: 4px 6px;
}

.scope-filter-controls,
.scope-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scope-filter-controls {
    min-width: 0;
}

.scope-filter-title {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary-soft) 68%, var(--color-surface));
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.scope-filter-title svg,
.scope-filter-actions .button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scope-filter-control {
    display: grid;
    grid-template-columns: auto minmax(126px, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-left: 11px;
    border: 1px solid color-mix(in srgb, var(--color-border) 84%, var(--color-text-soft));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface-soft) 70%, var(--color-surface));
    box-shadow: 0 1px 1px color-mix(in srgb, var(--color-text) 5%, transparent);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.scope-filter-control:hover {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background: var(--color-surface);
}

.scope-filter-control:focus-within {
    border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
    background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.scope-filter-control > span {
    color: var(--color-text-soft);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.scope-filter-control .select {
    min-width: 142px;
    min-height: 38px;
    padding-right: 34px;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--color-surface);
    box-shadow: none;
}

.scope-filter-actions {
    position: relative;
    justify-content: flex-end;
}

.scope-filter-actions .button {
    min-height: 42px;
    white-space: nowrap;
}

.scope-filter-actions .scope-icon-button {
    width: 42px;
    min-width: 42px;
    padding: 0;
}

.scope-filter-actions .scope-icon-button > svg {
    display: block;
    margin: 0;
}

.scope-filter-title > svg {
    width: 15px;
    height: 15px;
}

.scope-filter-actions .scope-search-drawer {
    top: 50%;
    right: 100%;
    width: 272px;
    margin-right: 8px;
    transform: translateY(-50%);
}

@media (max-width: 1120px) {
    .scope-filter-actions .scope-search-drawer {
        top: calc(100% + 8px);
        right: 0;
        width: min(380px, calc(100vw - 48px));
        margin-right: 0;
        transform: none;
    }
}

.scope-search-toggle.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.scope-search-drawer {
    position: absolute;
    top: calc(100% + 8px);
    right: 10px;
    z-index: 40;
    display: block;
    width: min(380px, calc(100% - 20px));
}

.scope-search-drawer[hidden] {
    display: none;
}

.scope-search-box {
    position: relative;
    display: block;
}

.scope-search-box > svg {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

.scope-search-box .input {
    min-height: 42px;
    padding-left: 42px;
    background: var(--color-surface);
}

.scope-search-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 26px;
    color: var(--color-muted);
    text-align: center;
}

.scope-search-empty strong {
    color: var(--color-text);
}

@media (max-width: 1120px) {
    .scope-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .scope-filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .scope-filter-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .scope-filter-title {
        min-height: 28px;
        padding: 0 2px;
    }

    .scope-filter-control {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .scope-filter-control .select {
        min-width: 0;
        width: 100%;
    }

    .scope-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scope-filter-actions .button {
        justify-content: center;
        min-width: 0;
        padding-inline: 8px;
    }

    .scope-search-drawer {
        right: 0;
        width: 100%;
    }
}

/* Compact filter chips are shared by every module toolbar. */
.scope-filter-panel {
    padding: 5px;
    border-radius: var(--radius-md);
}

.scope-filter-toolbar {
    gap: 7px 12px;
    padding: 3px 5px;
}

.scope-filter-controls,
.scope-filter-actions {
    gap: 7px;
}

.scope-filter-title {
    min-height: 32px;
    gap: 7px;
    padding: 0 7px;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: 10px;
}

.scope-filter-title svg {
    width: 14px;
    height: 14px;
}

.scope-filter-control {
    grid-template-columns: auto minmax(70px, 1fr);
    min-height: 32px;
    padding-left: 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 86%, var(--color-surface-soft));
    box-shadow: none;
}

.scope-filter-control > span {
    font-size: 9px;
    letter-spacing: .02em;
}

.scope-filter-control .select {
    min-width: 82px;
    min-height: 30px;
    padding: 0 27px 0 8px;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: transparent;
    font-size: 11.5px;
}

.scope-filter-actions .scope-icon-button {
    width: 34px;
    min-width: 34px;
    min-height: 32px;
    border-radius: 8px;
}

.scope-filter-actions .scope-icon-button > svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 760px) {
    .scope-filter-title {
        min-height: 26px;
    }

    .scope-filter-control {
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 34px;
    }

    .scope-filter-control .select {
        min-height: 32px;
    }
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(170px, 0.34fr) minmax(190px, 0.38fr) auto;
    gap: 14px;
    align-items: end;
}

.filter-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.filter-field span {
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 820;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.customers-table {
    min-width: 940px;
}

.customer-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.42fr);
    gap: 18px;
    margin-bottom: 18px;
}

.customer-detail-hero {
    position: relative;
    overflow: hidden;
}

.customer-detail-hero::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: -74px;
    width: 190px;
    height: 190px;
    border: 24px solid color-mix(in srgb, var(--color-blue) 8%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.customer-detail-hero .module-hero-copy,
.customer-detail-hero .customer-head-actions {
    position: relative;
    z-index: 1;
}

.customer-detail-hero .back-link {
    width: max-content;
    margin-bottom: 7px;
    color: var(--color-blue);
    font-size: 12px;
    font-weight: 800;
}

.customer-detail-hero .page-kicker {
    margin-bottom: 1px;
}

.customer-detail-hero h1 {
    margin: 0 0 3px;
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.1;
}

.customer-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.customer-kpi-grid.v3-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.customer-kpi-grid .v3-metric-card {
    min-height: 112px;
}

.customer-kpi-grid .v3-metric-copy strong {
    font-size: clamp(21px, 2vw, 27px);
}

.customer-info-grid strong small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.customer-operation-panel,
.customer-access-panel,
.customer-payments-panel {
    position: relative;
    overflow: hidden;
}

.customer-operation-panel .panel-header,
.customer-access-panel .panel-header,
.customer-payments-panel .panel-header {
    align-items: center;
}

.customer-access-list {
    display: grid;
    gap: 0;
    margin-top: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.customer-access-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
}

.customer-access-list div:last-child {
    border-bottom: 0;
}

.customer-access-list span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.customer-access-list strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 750;
    text-align: right;
}

.customer-access-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    color: var(--color-muted);
    font-size: 11px;
}

.customer-access-note svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}

.customer-payments-panel {
    margin-top: 18px;
}

@media (max-width: 980px) {
    .customer-kpi-grid.v3-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .customer-detail-hero {
        align-items: flex-start;
    }

    .customer-detail-hero .customer-head-actions {
        width: 100%;
    }

    .customer-detail-hero .customer-head-actions .button {
        flex: 1;
        justify-content: center;
    }

    .customer-kpi-grid.v3-metric-grid {
        grid-template-columns: 1fr;
    }

    .customer-access-list div {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .customer-access-list strong {
        text-align: left;
    }
}

.customer-profile-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
}

.customer-avatar {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: 30px;
    font-weight: 900;
}

.customer-profile-main {
    min-width: 0;
}

.customer-profile-main h2 {
    margin: 12px 0 4px;
    font-size: 26px;
    line-height: 1.1;
}

.customer-profile-main p {
    margin: 0;
    color: var(--color-muted);
}

.customer-info-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.customer-info-grid div,
.customer-notes {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}

.customer-info-grid span,
.customer-notes span {
    display: block;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.customer-info-grid strong {
    display: block;
    margin-top: 6px;
    font-size: 14px;
}

.customer-notes {
    grid-column: 1 / -1;
}

.customer-notes p {
    margin: 8px 0 0;
    color: var(--color-text-soft);
}

.compact-list {
    display: grid;
    gap: 10px;
}

.compact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}

.compact-row strong,
.compact-row span {
    display: block;
}

.compact-row span {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12px;
}

.compact-row-end {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.mini-stat {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.mini-stat span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 820;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mini-stat strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 860;
}

.related-list {
    display: grid;
    gap: 10px;
}

.related-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}

.related-row span {
    color: var(--color-text-soft);
    font-weight: 760;
}

.related-row strong {
    font-weight: 850;
}

.form-panel {
    display: grid;
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.span-2 {
    grid-column: span 2;
}

.required {
    color: var(--color-red);
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field label {
    color: var(--color-text-soft);
    font-size: 13px;
    font-weight: 780;
}

.input,
.select,
.textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.input,
.select {
    height: 42px;
    padding: 0 12px;
}

.textarea {
    min-height: 112px;
    padding: 11px 12px;
    resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
    outline: none;
}

/* Keep native select menus readable in the dark theme as well. */
[data-theme="dark"] select {
    color-scheme: dark;
}

[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
    background: var(--color-surface);
    color: var(--color-text);
}

.is-invalid {
    border-color: var(--color-red);
}

.field-error {
    color: var(--color-red);
    font-size: 12px;
    font-weight: 760;
}

.field-help {
    color: var(--color-muted);
    font-size: 12px;
}

.input[readonly],
.textarea[readonly] {
    background: var(--color-surface-soft);
    color: var(--color-muted);
    cursor: not-allowed;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.quick-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.stat-card {
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.stat-card:hover,
.stat-card:focus-visible {
    border-color: color-mix(in srgb, var(--metric-color) 45%, var(--color-border));
    box-shadow: var(--shadow-md);
    outline: none;
    transform: translateY(-2px);
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.7fr);
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-secondary-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
}

.text-link {
    color: var(--color-primary-strong);
    font-size: 13px;
    font-weight: 820;
}

.text-link:hover,
.text-link:focus-visible {
    text-decoration: underline;
    outline: none;
}

.bar-chart {
    height: 244px;
    display: grid;
    grid-template-columns: repeat(6, minmax(54px, 1fr));
    gap: 14px;
    align-items: end;
    padding-top: 18px;
}

.bar-chart-column {
    height: 100%;
    display: grid;
    grid-template-rows: 20px minmax(130px, 1fr) 22px;
    gap: 7px;
    min-width: 0;
    align-items: end;
    text-align: center;
}

.bar-chart-value {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-chart-track {
    position: relative;
    width: min(42px, 72%);
    height: 100%;
    display: block;
    justify-self: center;
    overflow: hidden;
    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-xs) var(--radius-xs);
    background: var(--color-surface-soft);
}

.bar-chart-fill {
    position: absolute;
    inset: auto 0 0;
    display: block;
    min-height: 8px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--color-primary), var(--color-blue));
}

.bar-chart-label {
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.alert-list,
.timeline-list,
.search-result-list {
    display: grid;
}

.alert-row {
    --alert-color: var(--color-blue);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    min-height: 67px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.alert-row:last-child,
.timeline-row:last-child,
.search-result-row:last-child {
    border-bottom: 0;
}

.alert-row-danger { --alert-color: var(--color-red); }
.alert-row-warning { --alert-color: var(--color-amber); }
.alert-row-blue { --alert-color: var(--color-blue); }

.alert-count {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--alert-color) 14%, var(--color-surface));
    color: var(--alert-color);
    font-size: 13px;
    font-weight: 900;
}

.alert-copy,
.timeline-copy,
.search-result-row > span {
    display: grid;
    min-width: 0;
}

.alert-copy strong,
.timeline-copy strong,
.search-result-row strong {
    font-size: 13px;
    font-weight: 820;
}

.alert-copy span,
.timeline-copy span,
.search-result-row small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-row > svg,
.search-result-row > svg {
    width: 17px;
    height: 17px;
    stroke: var(--color-muted);
    stroke-width: 2;
    fill: none;
}

.timeline-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}

.timeline-marker {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border: 0;
    border-radius: 50%;
}

.timeline-marker.badge-success { background: var(--color-green); }
.timeline-marker.badge-danger { background: var(--color-red); }
.timeline-marker.badge-warning { background: var(--color-amber); }
.timeline-marker.badge-neutral { background: var(--color-muted); }

.timeline-row time {
    color: var(--color-muted);
    font-size: 10px;
    white-space: nowrap;
}

.compact-empty {
    min-height: 150px;
}

.text-danger { color: var(--color-red) !important; }
.text-warning { color: var(--color-amber) !important; }
.text-success { color: var(--color-green) !important; }

.renewals-table {
    min-width: 670px;
}

.module-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -2px 0 18px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.module-tab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 820;
    white-space: nowrap;
}

.module-tab:hover,
.module-tab:focus-visible {
    background: var(--color-surface-soft);
    color: var(--color-text);
    outline: none;
}

.module-tab.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.module-filter-panel {
    margin-bottom: 18px;
}

.module-filter-bar {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.3fr) auto;
}

.support-filter-bar {
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 0.26fr) minmax(160px, 0.26fr) auto;
}

.input-with-icon {
    position: relative;
    display: block;
}

.input-with-icon > svg {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    width: 17px;
    height: 17px;
    stroke: var(--color-muted);
    stroke-width: 2;
    fill: none;
    transform: translateY(-50%);
    pointer-events: none;
}

.input-with-icon .input {
    padding-left: 38px;
}

.module-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    align-items: start;
}

.module-data-table {
    min-width: 920px;
}

.actions-column {
    width: 1%;
    white-space: nowrap;
}

.table-icon-button {
    width: 34px;
    height: 34px;
}

.table-icon-button svg {
    width: 16px;
    height: 16px;
}

.action-success {
    color: var(--color-green);
}

.action-success:hover,
.action-success:focus-visible {
    border-color: var(--color-green);
    background: var(--color-green-soft);
    color: var(--color-green);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
}

.pagination-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 800;
}

.pagination-button svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.pagination-button.is-disabled {
    opacity: 0.45;
}

.pagination-status {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 760;
}

.detail-panel {
    max-width: 1120px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.detail-item {
    min-width: 0;
    min-height: 82px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 14px 16px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
}

.detail-item:nth-child(2n) {
    border-right: 0;
}

.detail-item.span-2 {
    grid-column: span 2;
    border-right: 0;
}

.detail-item span:first-child,
.ticket-facts span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 820;
    text-transform: uppercase;
}

.detail-item strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.toggle-field {
    align-content: end;
}

.toggle-control {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    cursor: pointer;
}

.toggle-control > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--color-border-strong);
    transition: background var(--transition);
}

.toggle-track span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition);
}

.toggle-control > input:checked + .toggle-track {
    background: var(--color-primary);
}

.toggle-control > input:checked + .toggle-track span {
    transform: translateX(18px);
}

.toggle-control > input:focus-visible + .toggle-track {
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.toggle-copy {
    display: grid;
}

.toggle-copy small {
    color: var(--color-muted);
    font-weight: 600;
}

.global-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 18px;
}

.search-empty {
    min-height: 260px;
}

.search-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.search-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.profile-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.profile-avatar-large {
    width: 46px;
    height: 46px;
    font-size: 15px;
}

.security-form {
    gap: 16px;
}

.password-field {
    position: relative;
    display: block;
}

.password-field .input {
    padding-right: 48px;
}

.password-field button {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #687080;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-field button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.auth-access-note {
    margin: 0;
    color: #6d7380;
    font-size: 12px;
    text-align: center;
}

.support-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.support-side-stack {
    display: grid;
    gap: 18px;
}

.conversation-list {
    min-height: 280px;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.message-row {
    display: flex;
    justify-content: flex-start;
}

.message-row.is-mine {
    justify-content: flex-end;
}

.message-bubble {
    width: min(680px, 86%);
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}

.message-row.is-mine .message-bubble {
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    background: var(--color-primary-soft);
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-muted);
    font-size: 11px;
}

.message-meta strong {
    color: var(--color-text-soft);
}

.message-bubble p {
    margin: 7px 0 0;
    white-space: pre-wrap;
}

.reply-form,
.support-status-form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.reply-form > label,
.support-status-form .form-field > span {
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 820;
}

.ticket-facts {
    display: grid;
    gap: 0;
}

.ticket-facts > div {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.ticket-facts > div:last-child {
    border-bottom: 0;
}

.scrim {
    display: none;
}

.auth-body {
    min-height: 100vh;
    display: grid;
    padding: 0;
    background: var(--color-bg-elevated);
}

.auth-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 55.25% 44.75%;
    overflow: hidden;
    background: var(--color-bg-elevated);
}

.auth-brand-panel {
    position: relative;
    display: grid;
    place-items: center;
    padding: 48px;
    overflow: hidden;
    background:
        radial-gradient(circle at 40% 42%, rgba(255, 255, 255, 0.13), transparent 0.7rem),
        linear-gradient(135deg, #29006d 0%, #18008d 48%, #0712b7 100%);
    color: #ffffff;
}

.auth-brand-panel::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 32%),
        linear-gradient(290deg, rgba(255, 255, 255, 0.05), transparent 38%);
    content: "";
    pointer-events: none;
}

.auth-logo-lockup {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    text-align: center;
    transform: translateY(-4px);
}

.auth-logo-mark {
    display: grid;
    place-items: center;
    width: 190px;
    height: 144px;
    margin-bottom: 10px;
    border: 13px solid currentColor;
    border-radius: 24px 64px 24px 64px;
    color: #ffffff;
    font-size: 80px;
    font-weight: 950;
    line-height: 1;
    box-shadow: inset 0 -10px 0 rgba(255, 255, 255, 0.12);
}

.auth-logo-name {
    color: #ffffff;
    font-size: 72px;
    font-weight: 950;
    line-height: 0.92;
}

.auth-logo-subtitle {
    margin-top: 8px;
    color: #ffffff;
    font-size: 48px;
    font-weight: 360;
    font-style: italic;
    line-height: 0.94;
}

.auth-logo-segment {
    margin-top: 12px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
}

.auth-card {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 48px 8vw;
    background: #ffffff;
    color: #202631;
}

[data-theme="dark"] .auth-card {
    background: #f7f7f8;
    color: #202631;
}

.auth-card-header {
    width: min(420px, 100%);
    margin-bottom: 18px;
    text-align: center;
}

.auth-card-header h1 {
    margin: 0;
    color: #202631;
    font-size: 34px;
    font-weight: 920;
    letter-spacing: 0;
    line-height: 1;
}

.auth-form {
    width: min(420px, 100%);
    display: grid;
    gap: 18px;
}

.auth-form .form-field {
    gap: 8px;
}

.auth-form label {
    color: #232936;
    font-size: 14px;
    font-weight: 820;
}

.auth-form .input {
    height: 48px;
    border-color: #dedee4;
    border-radius: 3px;
    background: #ffffff;
    color: #202631;
    box-shadow: 0 2px 6px rgba(16, 20, 28, 0.06);
}

.auth-form .input:focus {
    border-color: #2b006b;
    box-shadow: 0 0 0 3px rgba(43, 0, 107, 0.10);
}

.check-row {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 9px;
    color: #4a5261;
    font-size: 13px;
    font-weight: 720;
    cursor: pointer;
}

.check-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.auth-submit {
    width: 100%;
    height: 44px;
    margin-top: 0;
    justify-content: center;
    border-radius: 4px;
    background: #2a0067;
    color: #ffffff;
    font-size: 16px;
    font-weight: 850;
    box-shadow: 0 10px 22px rgba(42, 0, 103, 0.18);
}

.auth-submit:hover,
.auth-submit:focus-visible {
    background: #350085;
}

.auth-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 0;
    font-size: 14px;
    font-weight: 850;
}

.auth-links span:first-child {
    color: #1096b9;
}

.auth-links span:last-child {
    color: #d94a4a;
}

@media (max-width: 1280px) {
    .metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-overview-grid,
    .dashboard-secondary-grid,
    .module-content-grid {
        grid-template-columns: 1fr;
    }

    .related-summary-panel .related-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .module-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lifecycle {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .customers-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        width: min(var(--sidebar-width), calc(100vw - 54px));
        transform: translateX(-104%);
        transition: transform var(--transition);
    }

    .sidebar-open .sidebar {
        transform: translateX(0);
    }

    .scrim {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: block;
        pointer-events: none;
        background: rgba(9, 13, 12, 0.42);
        opacity: 0;
        transition: opacity var(--transition);
    }

    .sidebar-open .scrim {
        pointer-events: auto;
        opacity: 1;
    }

    .mobile-menu {
        display: grid;
    }

    .topbar {
        padding: 12px 18px;
    }

    .search-box {
        display: none;
    }

    .content {
        padding: 24px 18px;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .quick-actions {
        justify-content: flex-start;
    }

    .module-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }

    .filter-bar,
    .customer-detail-grid,
    .customer-info-grid,
    .profile-settings-grid,
    .support-detail-grid,
    .search-results {
        grid-template-columns: 1fr;
    }

    .global-search-form {
        grid-template-columns: 1fr auto;
    }

    .customer-profile-panel {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        min-height: 390px;
    }
}

@media (max-width: 760px) {
    .metrics-grid,
    .module-stats,
    .lifecycle,
    .customers-metrics {
        grid-template-columns: 1fr;
    }

    .topbar-title {
        min-width: 0;
    }

    .topbar-title strong {
        font-size: 16px;
    }

    .profile-meta {
        display: none;
    }

    .profile-chip {
        padding-right: 6px;
    }

    .scope-pill {
        display: none;
    }

    .page-heading h1,
    .module-hero h1 {
        font-size: 30px;
    }

    .page-heading p,
    .module-hero p {
        font-size: 14px;
    }

    .module-hero-copy {
        display: grid;
    }

    .module-tabs {
        justify-content: flex-start;
    }

    .related-summary-panel .related-list,
    .detail-grid,
    .global-search-form {
        grid-template-columns: 1fr;
    }

    .detail-item,
    .detail-item:nth-child(2n),
    .detail-item.span-2 {
        grid-column: span 1;
        border-right: 0;
    }

    .pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-button,
    .pagination-status {
        justify-content: center;
        text-align: center;
    }

    .bar-chart {
        height: 218px;
        gap: 6px;
    }

    .bar-chart-value {
        display: none;
    }

    .bar-chart-column {
        grid-template-rows: 0 minmax(130px, 1fr) 22px;
    }

    .message-bubble {
        width: 94%;
    }

    .auth-body {
        padding: 0;
    }

    .auth-shell {
        min-height: 0;
    }

    .auth-brand-panel,
    .auth-card {
        padding: 30px 22px;
    }

    .auth-brand-panel {
        min-height: 330px;
    }

    .auth-logo-mark {
        width: 128px;
        height: 98px;
        border-width: 9px;
        font-size: 52px;
    }

    .auth-logo-name {
        font-size: 48px;
    }

    .auth-logo-subtitle {
        font-size: 34px;
    }

    .auth-logo-segment {
        font-size: 22px;
    }
}

/* Servidores: central operacional portada do V1. */
.server-hero-actions,
.server-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.server-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.server-table-card {
    min-width: 0;
}

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

.server-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 145px;
}

.server-name-cell > span:last-child,
.server-money,
.server-margin {
    display: grid;
}

.server-name-cell small,
.server-money small,
.server-margin small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.server-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid color-mix(in srgb, var(--color-blue) 25%, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.server-avatar svg {
    width: 18px;
    height: 18px;
}

.server-client-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 190px;
}

.server-mini-badge,
.server-credit-badge,
.server-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.server-mini-badge::before,
.server-credit-badge::before,
.server-status::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.server-mini-badge.is-active,
.server-status.is-ativo,
.server-credit-badge.is-ok {
    border-color: color-mix(in srgb, var(--color-green) 28%, transparent);
    background: var(--color-green-soft);
    color: var(--color-green);
}

.server-mini-badge.is-warning,
.server-status.is-warning,
.server-credit-badge.is-low {
    border-color: color-mix(in srgb, var(--color-amber) 28%, transparent);
    background: var(--color-amber-soft);
    color: var(--color-amber);
}

.server-mini-badge.is-danger,
.server-status.is-danger,
.server-status.is-offline,
.server-status.is-empty,
.server-credit-badge.is-empty {
    border-color: color-mix(in srgb, var(--color-red) 26%, transparent);
    background: var(--color-red-soft);
    color: var(--color-red);
}

.server-margin.is-positive,
.is-positive {
    color: var(--color-green);
}

.server-margin.is-negative,
.is-negative {
    color: var(--color-red);
}

.server-margin.is-neutral {
    color: var(--color-text);
}

.server-actions {
    flex-wrap: nowrap;
}

.server-action {
    width: 34px;
    height: 34px;
}

.server-action.is-sale { background: var(--color-green-soft); color: var(--color-green); }
.server-action.is-adjust { background: var(--color-surface-soft); color: var(--color-text-soft); }
.server-action.is-view { background: var(--color-blue-soft); color: var(--color-blue); }
.server-action.is-edit { background: var(--color-violet-soft); color: var(--color-violet); }
.server-action.is-delete { background: var(--color-red-soft); color: var(--color-red); }

.server-page-heading,
.server-central-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
}

.server-page-heading h1,
.server-central-head h1 {
    margin: 2px 0 4px;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.15;
}

.server-page-heading p,
.server-central-head p {
    margin: 0;
    color: var(--color-muted);
}

.server-form {
    max-width: 920px;
    margin: 0 auto;
}

.server-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.server-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.server-kpi {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.server-kpi span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.server-kpi strong {
    font-size: 25px;
    line-height: 1.2;
}

.server-kpi small {
    color: var(--color-muted);
}

.server-overview-grid,
.server-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.server-bottom-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr);
}

.server-summary-list,
.server-integration-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-border);
}

.server-summary-list > div,
.server-integration-list > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 13px;
    background: var(--color-surface);
}

.server-summary-list span,
.server-integration-list span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.server-summary-list strong,
.server-integration-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-integration-list > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.server-operation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.server-operation {
    scroll-margin-top: calc(var(--topbar-height) + 16px);
}

.server-operation-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.server-operation-head h2 {
    margin: 0;
    font-size: 17px;
}

.server-operation-head p {
    margin: 2px 0 0;
    color: var(--color-muted);
    font-size: 12px;
}

.operation-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--radius-sm);
}

.operation-icon svg { width: 18px; height: 18px; }
.operation-icon.is-purchase { background: var(--color-green-soft); color: var(--color-green); }
.operation-icon.is-sale { background: var(--color-blue-soft); color: var(--color-blue); }
.operation-icon.is-adjust { background: var(--color-amber-soft); color: var(--color-amber); }

.server-extract-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 0 15px;
}

.server-extract-filters a {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.server-extract-filters a.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.server-client-list {
    display: grid;
}

.server-client-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}

.server-client-list a:first-child { border-top: 0; padding-top: 0; }
.server-client-list a > span:first-child { display: grid; }
.server-client-list small { color: var(--color-muted); }

.reseller-v1-table {
    min-width: 850px;
    table-layout: fixed;
}

.reseller-v1-table th,
.reseller-v1-table td {
    padding-left: 9px;
    padding-right: 9px;
}

.reseller-v1-table th:nth-child(1) { width: 19%; }
.reseller-v1-table th:nth-child(2) { width: 12%; }
.reseller-v1-table th:nth-child(3) { width: 13%; }
.reseller-v1-table th:nth-child(4) { width: 13%; }
.reseller-v1-table th:nth-child(5) { width: 10%; }
.reseller-v1-table th:nth-child(6) { width: 10%; }
.reseller-v1-table th:nth-child(7) { width: 9%; }
.reseller-v1-table th:nth-child(8) { width: 14%; }

.reseller-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}

.reseller-name-cell > span:last-child,
.reseller-margin {
    display: grid;
}

.reseller-name-cell small,
.reseller-margin small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.reseller-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid color-mix(in srgb, var(--color-blue) 25%, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-size: 13px;
    font-weight: 800;
}

.reseller-type-badge,
.reseller-server-badge {
    display: inline-flex;
    width: max-content;
    max-width: 150px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-blue) 24%, var(--color-border));
    border-radius: 999px;
    background: var(--color-blue-soft);
    color: var(--color-blue);
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reseller-server-badge {
    border-color: var(--color-border);
    background: var(--color-surface-soft);
    color: var(--color-text-soft);
}

.reseller-margin.is-positive { color: var(--color-green); }
.reseller-margin.is-negative { color: var(--color-red); }
.reseller-margin.is-neutral { color: var(--color-text); }

.reseller-actions {
    flex-wrap: nowrap;
}

.reseller-action {
    width: 31px;
    height: 31px;
}

.reseller-action.is-central { background: var(--color-green-soft); color: var(--color-green); }
.reseller-action.is-credits { background: var(--color-blue-soft); color: var(--color-blue); }
.reseller-action.is-edit { background: var(--color-violet-soft); color: var(--color-violet); }
.reseller-action.is-delete { background: var(--color-red-soft); color: var(--color-red); }

@media (max-width: 1160px) {
    .server-operation-grid { grid-template-columns: 1fr; }
    .server-kpi-grid,
    .server-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
    .server-overview-grid,
    .server-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .server-page-heading,
    .server-central-head { align-items: stretch; flex-direction: column; }
    .server-form-grid,
    .server-kpi-grid,
    .server-stats,
    .server-summary-list,
    .server-integration-list { grid-template-columns: 1fr; }
    .server-head-actions .button { flex: 1; justify-content: center; }
}
.whatsapp-hero{margin-bottom:18px}.whatsapp-tabs{display:flex;gap:8px;padding:6px;margin-bottom:18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm);overflow-x:auto}.whatsapp-tab{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:145px;padding:11px 16px;border-radius:6px;color:var(--color-muted);font-weight:700;text-decoration:none;white-space:nowrap;transition:background .18s ease,color .18s ease,box-shadow .18s ease}.whatsapp-tab>svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.whatsapp-tab:hover{background:var(--metric-soft);color:var(--metric-color)}.whatsapp-tab.is-active{background:var(--metric-color);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--metric-color) 28%,transparent)}.whatsapp-tab span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,currentColor 18%,transparent);font-size:11px}.whatsapp-stats{margin-bottom:18px}.whatsapp-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:18px;margin-bottom:18px}.whatsapp-section{padding:20px;margin-bottom:18px}.whatsapp-grid>.whatsapp-section{margin-bottom:0}.whatsapp-section>.panel-header{margin-bottom:18px}.whatsapp-switches{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.whatsapp-switches label{display:flex;align-items:center;gap:8px;color:var(--color-text);font-size:13px;font-weight:650}.whatsapp-switches input{width:17px;height:17px;accent-color:var(--color-primary)}.whatsapp-record{border-top:1px solid var(--color-border)}.whatsapp-record:last-child{border-bottom:1px solid var(--color-border)}.whatsapp-record summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px;cursor:pointer;list-style:none}.whatsapp-record summary::-webkit-details-marker{display:none}.whatsapp-record summary>span:first-child{display:grid;gap:3px}.whatsapp-record summary small{color:var(--color-muted)}.whatsapp-record[open] summary{color:var(--color-primary)}.whatsapp-record-body{padding:4px 4px 16px}.whatsapp-record>form:last-child{padding:0 4px 16px}.whatsapp-variables{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.whatsapp-variables code{padding:7px 10px;border:1px solid var(--color-border);border-radius:5px;background:var(--color-surface-soft);color:var(--color-primary);font-size:12px}.whatsapp-run-panel{display:flex;min-height:220px;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px}.whatsapp-run-panel>strong{font-size:28px}.whatsapp-message-preview{display:block;max-width:360px;white-space:normal}.table-meta,.table-error{display:block;margin-top:4px;color:var(--color-muted);font-size:11px}.table-error{color:var(--color-red)}.button-small{min-height:34px;padding:6px 9px;font-size:11px}.icon-button.is-danger{color:var(--color-red)}
@media(max-width:900px){.whatsapp-grid{grid-template-columns:1fr}.whatsapp-tabs{justify-content:flex-start}.whatsapp-tab{min-width:118px}.whatsapp-section{padding:16px}}

/* WhatsApp templates: V1 workflow with the V3 visual language. */
.template-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.template-summary{display:flex;align-items:center;gap:16px;min-height:108px;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.template-summary-icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto;border-radius:var(--radius-md);background:var(--summary-soft);color:var(--summary-color)}.template-summary-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.template-summary>div{display:grid;gap:2px}.template-summary small{color:var(--summary-color);font-size:11px;font-weight:800;text-transform:uppercase}.template-summary strong{color:var(--color-text);font-size:30px;line-height:1}.template-summary>div>span{color:var(--summary-color);font-size:12px;font-weight:700}.template-summary.is-total{--summary-color:var(--color-blue);--summary-soft:var(--color-blue-soft);border-color:color-mix(in srgb,var(--color-blue) 28%,var(--color-border))}.template-summary.is-active{--summary-color:var(--color-green);--summary-soft:var(--color-green-soft);border-color:color-mix(in srgb,var(--color-green) 28%,var(--color-border))}.template-summary.is-inactive{--summary-color:var(--color-amber);--summary-soft:var(--color-amber-soft);border-color:color-mix(in srgb,var(--color-amber) 28%,var(--color-border))}.template-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding:10px}.template-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.template-filters .select{min-width:170px}.template-table-panel{overflow:hidden}.template-data-table th,.template-data-table td{padding:13px 14px}.template-name{color:var(--color-blue)}.template-type-badge{display:inline-flex;padding:5px 9px;border:1px solid color-mix(in srgb,var(--color-blue) 24%,var(--color-border));border-radius:999px;background:var(--color-blue-soft);color:var(--color-blue);font-size:11px;font-weight:750;white-space:nowrap}.template-actions{flex-wrap:nowrap}.template-action{width:36px;height:36px}.template-action.is-edit{background:var(--color-violet-soft);color:var(--color-violet);border-color:color-mix(in srgb,var(--color-violet) 24%,var(--color-border))}.template-action.is-copy{background:var(--color-surface-soft);color:var(--color-text-soft)}.template-action.is-delete{background:var(--color-red-soft);color:var(--color-red);border-color:color-mix(in srgb,var(--color-red) 24%,var(--color-border))}
.app-dialog{width:min(760px,calc(100vw - 28px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text);box-shadow:var(--shadow-md)}.app-dialog::backdrop{background:rgba(7,18,17,.62);backdrop-filter:blur(3px)}.app-dialog-shell{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.app-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--color-border);background:var(--color-surface-soft)}.app-dialog-header>div{display:grid;gap:2px}.app-dialog-header span{font-size:18px;font-weight:800}.app-dialog-header small{color:var(--color-muted)}.app-dialog-header .icon-button{font-size:25px;line-height:1}.app-dialog-body{max-height:calc(100vh - 125px);overflow-y:auto;padding:20px}.app-dialog-body .form-actions{margin-top:0}.app-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:20px -20px -20px;padding:16px 20px;border-top:1px solid var(--color-border);background:var(--color-bg-elevated)}
.crud-create-dialog{width:min(980px,calc(100vw - 28px))}.crud-create-dialog .app-dialog-shell{max-height:calc(100vh - 32px);box-shadow:0 28px 80px rgba(16,32,28,.26)}.crud-create-dialog[open] .app-dialog-shell{animation:crud-dialog-in .2s ease-out}.crud-create-dialog .app-dialog-header{padding:17px 54px 14px 20px}.crud-create-dialog .app-dialog-header>.icon-button{position:absolute;top:15px;right:16px;width:34px;height:34px;border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-muted)}.crud-create-dialog .app-dialog-header>.icon-button:hover{background:var(--color-primary-soft);color:var(--color-primary-strong);transform:translateY(-1px)}.crud-dialog-heading{display:flex!important;align-items:center;gap:12px!important}.crud-dialog-heading>div{display:grid;gap:3px}.crud-dialog-heading strong{font-size:21px;line-height:1.1}.crud-dialog-heading small{font-size:12px;line-height:1.35}.crud-dialog-icon{display:grid!important;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid color-mix(in srgb,var(--dialog-tone) 20%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--dialog-tone) 12%,var(--color-surface));color:var(--dialog-tone);box-shadow:var(--shadow-sm)}.crud-dialog-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.crud-dialog-icon.tone-primary{--dialog-tone:var(--color-primary)}.crud-dialog-icon.tone-teal{--dialog-tone:var(--color-primary)}.crud-dialog-icon.tone-violet{--dialog-tone:var(--color-violet)}.crud-dialog-icon.tone-blue{--dialog-tone:var(--color-blue)}.crud-create-dialog .app-dialog-body{padding:14px 20px 20px}.crud-create-dialog .app-dialog-body>.notice{margin:0 0 12px}.crud-create-dialog .form-field{min-width:0}.crud-create-dialog .form-field>span{font-size:11.5px;font-weight:800}.crud-create-dialog .input,.crud-create-dialog .select{min-height:40px;padding:0 12px;border-radius:var(--radius-md);font-size:12.8px}.crud-create-dialog .textarea{padding:10px 12px;border-radius:var(--radius-md);font-size:12.8px}.crud-modal-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.crud-form-section{position:relative;display:grid;align-content:start;gap:10px;min-width:0;padding:12px;border:1px solid color-mix(in srgb,var(--color-border) 82%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-surface-soft) 55%,var(--color-surface));box-shadow:0 6px 18px rgba(22,32,29,.035)}.crud-form-section::before{content:"";position:absolute;top:-1px;left:12px;right:12px;height:1px;background:color-mix(in srgb,var(--color-primary) 24%,transparent)}.crud-form-section.section-wide{grid-column:1/-1}.crud-section-heading{display:flex;align-items:center;gap:8px}.crud-section-heading>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border));border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary-strong);font-size:10px;font-weight:900}.crud-section-heading>div{display:grid;gap:1px}.crud-section-heading strong{color:var(--color-primary-strong);font-size:11.5px;font-weight:900;text-transform:uppercase}.crud-section-heading small{color:var(--color-muted);font-size:10.5px;line-height:1.25}.crud-fields{display:grid;gap:9px}.crud-fields.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.crud-fields.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.crud-fields.status-due-cols{grid-template-columns:minmax(150px,.44fr) minmax(240px,1fr)}.crud-fields .field-wide{grid-column:1/-1}.crud-preview-card{display:grid;gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--color-blue) 20%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-blue-soft) 48%,var(--color-surface))}.crud-preview-card>header{display:flex;align-items:center;gap:9px}.crud-preview-card>header>div{display:grid;gap:1px}.crud-preview-card>header small,.crud-preview-grid small{color:var(--color-muted);font-size:9.5px;font-weight:800;text-transform:uppercase}.crud-preview-card>header strong{font-size:13px}.crud-preview-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-md);background:var(--color-blue-soft);color:var(--color-blue)}.crud-preview-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.crud-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.crud-preview-grid.five-cols{grid-template-columns:repeat(5,minmax(0,1fr))}.crud-preview-grid>span{display:grid;gap:2px;min-width:0;padding:8px;border:1px solid color-mix(in srgb,var(--color-border) 75%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-surface) 84%,transparent)}.crud-preview-grid strong{overflow-wrap:anywhere;font-size:11.5px}.duration-shortcuts{display:flex;flex-wrap:wrap;gap:5px}.duration-shortcuts button{height:28px;padding:0 9px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-soft);font-size:10.5px;font-weight:800;cursor:pointer}.duration-shortcuts button:hover,.duration-shortcuts button.is-active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong)}.crud-observation{padding:0;overflow:hidden}.crud-observation::before{display:none}.crud-observation summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:0 12px;list-style:none;color:var(--color-primary-strong);font-size:12px;font-weight:900;cursor:pointer}.crud-observation summary::-webkit-details-marker{display:none}.crud-observation summary small{display:inline-flex;padding:3px 7px;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary-strong);font-size:9.5px}.crud-observation summary::after{content:"+";display:grid;place-items:center;width:24px;height:24px;margin-left:auto;border-radius:var(--radius-md);background:var(--color-primary-soft);font-size:16px}.crud-observation[open] summary::after{content:"-"}.crud-observation>.form-field{padding:0 12px 12px}.crud-create-dialog .app-dialog-footer{position:sticky;bottom:-20px;z-index:2;margin-top:12px;padding:13px 20px}.crud-create-dialog .app-dialog-footer .button{min-width:116px}.customer-modal-sections .crud-preview-card{margin-top:1px}.server-modal-sections{grid-template-columns:1fr}@keyframes crud-dialog-in{from{opacity:.35;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.crud-create-dialog[open] .app-dialog-shell{animation:none}}
@media(max-width:900px){.crud-modal-sections{grid-template-columns:1fr}.crud-form-section{grid-column:1/-1}.crud-fields.three-cols,.crud-preview-grid.five-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.crud-create-dialog{width:calc(100vw - 16px)}.crud-create-dialog .app-dialog-header{padding:14px 50px 12px 14px}.crud-create-dialog .app-dialog-body{padding:10px 12px 14px}.crud-dialog-heading strong{font-size:18px}.crud-dialog-icon{width:36px;height:36px;flex-basis:36px}.crud-fields.two-cols,.crud-fields.three-cols,.crud-fields.status-due-cols,.crud-preview-grid,.crud-preview-grid.five-cols{grid-template-columns:1fr}.crud-create-dialog .app-dialog-footer{margin:10px -12px -14px;padding:11px 12px}.crud-create-dialog .app-dialog-footer .button{flex:1;min-width:0}}
@media(max-width:800px){.template-summary-grid{grid-template-columns:1fr}.template-summary{min-height:90px}.template-toolbar{align-items:stretch;flex-direction:column}.template-filters{display:grid;grid-template-columns:1fr 1fr auto auto}.template-filters .select{min-width:0;width:100%}.template-toolbar>.button{width:100%}.template-data-table{min-width:980px}.app-dialog-body{padding:16px}.app-dialog-footer{margin:18px -16px -16px;padding:14px 16px}.app-dialog .form-grid{grid-template-columns:1fr}.app-dialog .field-span-2{grid-column:auto}}
.evolution-qr-dialog .app-dialog-shell{width:min(540px,calc(100vw - 28px))}.evolution-qr-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.evolution-qr-title-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--color-green) 38%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-green) 12%,transparent);color:var(--color-green)}.evolution-qr-title-icon svg{width:21px;height:21px}.evolution-qr-body{display:grid;place-items:stretch;gap:16px;padding:18px 22px 20px;text-align:left}.evolution-qr-status{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--color-teal) 28%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-teal) 7%,var(--color-surface));transition:border-color .2s ease,background .2s ease}.evolution-qr-status-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--color-teal) 14%,transparent);color:var(--color-teal)}.evolution-qr-status-icon svg{width:17px;height:17px;animation:evolutionQrSpin 2.4s linear infinite}.evolution-qr-status div{display:grid;gap:2px}.evolution-qr-status strong{font-size:12.5px}.evolution-qr-status small{color:var(--color-muted);font-size:10.5px}.evolution-qr-live{display:inline-flex;align-items:center;gap:5px;color:var(--color-green);font-size:9px;font-weight:800;text-transform:uppercase}.evolution-qr-live i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 14%,transparent);animation:evolutionQrPulse 1.6s ease-in-out infinite}.evolution-qr-frame{position:relative;display:grid;place-items:center;width:min(330px,100%);aspect-ratio:1;margin:auto;padding:12px;border:1px solid color-mix(in srgb,var(--color-teal) 28%,var(--color-border));border-radius:var(--radius-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--color-teal) 7%,var(--color-surface)),var(--color-surface));box-shadow:0 18px 42px rgba(3,10,20,.18)}.evolution-qr-frame img{display:block;width:100%;height:100%;object-fit:contain;border:8px solid #fff;border-radius:10px;background:#fff}.evolution-qr-success{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;border-radius:inherit;background:color-mix(in srgb,var(--color-surface) 96%,transparent);text-align:center}.evolution-qr-success[hidden]{display:none}.evolution-qr-success>span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:color-mix(in srgb,var(--color-green) 16%,transparent);color:var(--color-green);box-shadow:0 0 0 8px color-mix(in srgb,var(--color-green) 7%,transparent)}.evolution-qr-success svg{width:28px;height:28px}.evolution-qr-success strong{margin-top:4px;font-size:17px}.evolution-qr-success small{color:var(--color-muted);font-size:11px}.evolution-qr-timer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 14px}.evolution-qr-timer-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--color-muted);font-size:10.5px;font-weight:700}.evolution-qr-timer-copy strong{color:var(--color-text);font-variant-numeric:tabular-nums;font-size:12px}.evolution-qr-progress{height:5px;overflow:hidden;border-radius:999px;background:var(--color-surface-muted)}.evolution-qr-progress i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-teal),var(--color-green));transition:width 1s linear}.evolution-qr-refresh{grid-column:2;grid-row:1 / span 2;min-height:38px;color:var(--color-teal)}.evolution-qr-refresh svg{width:15px;height:15px}.evolution-qr-refresh.is-loading svg{animation:evolutionQrSpin .8s linear infinite}.evolution-qr-note{margin:0;color:var(--color-muted);font-size:10px;text-align:center}.evolution-qr-body[data-qr-state="connected"] .evolution-qr-status{border-color:color-mix(in srgb,var(--color-green) 40%,var(--color-border));background:color-mix(in srgb,var(--color-green) 9%,var(--color-surface))}.evolution-qr-body[data-qr-state="connected"] .evolution-qr-status-icon{color:var(--color-green)}.evolution-qr-body[data-qr-state="connected"] .evolution-qr-status-icon svg{animation:none}.evolution-qr-body[data-qr-state="error"] .evolution-qr-status{border-color:color-mix(in srgb,var(--color-red) 42%,var(--color-border));background:color-mix(in srgb,var(--color-red) 8%,var(--color-surface))}.evolution-qr-body[data-qr-state="error"] .evolution-qr-status-icon{color:var(--color-red)}@keyframes evolutionQrSpin{to{transform:rotate(360deg)}}@keyframes evolutionQrPulse{50%{opacity:.4;transform:scale(.8)}}@media(max-width:560px){.evolution-qr-dialog .app-dialog-shell{width:calc(100vw - 18px)}.evolution-qr-body{padding:15px}.evolution-qr-frame{width:min(290px,100%)}.evolution-qr-live{display:none}.evolution-qr-status{grid-template-columns:auto 1fr}.evolution-qr-timer{grid-template-columns:1fr}.evolution-qr-refresh{grid-column:1;grid-row:auto;width:100%}}
.whatsapp-limit-state{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px;border:1px solid color-mix(in srgb,var(--color-amber) 30%,var(--color-border));border-radius:var(--radius-md);background:var(--color-amber-soft)}.whatsapp-limit-state .module-icon{--metric-color:var(--color-amber);--metric-soft:var(--color-surface)}.whatsapp-limit-state strong{display:block;margin-bottom:4px}.whatsapp-limit-state p{margin:0;color:var(--color-text-soft);font-size:13px}@media(max-width:720px){.whatsapp-limit-state{grid-template-columns:auto 1fr}.whatsapp-limit-state .button{grid-column:1/-1;width:100%}}

/* Sidebar copied from the V1 navigation treatment, with V3 structure preserved. */
.sidebar{background:radial-gradient(circle at 18% 0,rgba(46,144,250,.28),transparent 32%),linear-gradient(180deg,#073f70 0%,#06365f 46%,#042844 100%);border-right-color:rgba(255,255,255,.11);box-shadow:8px 0 30px rgba(2,18,32,.18)}
.brand{position:relative;margin-bottom:5px;border-bottom:1px solid rgba(226,242,255,.13)}
.brand-mark{background:linear-gradient(135deg,#fff,#dbeafe);color:#07467d;box-shadow:0 10px 22px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.7)}
.brand-segment,.nav-heading{color:rgba(219,234,254,.68)}
.nav-scroll{gap:17px}.nav-section{gap:5px}
.nav-link{position:relative;min-height:43px;padding:0 10px;border:1px solid transparent;border-radius:12px;color:rgba(248,251,255,.9);overflow:hidden;isolation:isolate;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
.nav-link::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 999px 999px 0;background:#7dd3fc;opacity:0;transform:scaleY(.45);transition:opacity .18s ease,transform .18s ease}
.nav-link::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(96,165,250,.06),transparent);opacity:0;transform:translateX(-12px);transition:opacity .18s ease,transform .18s ease;z-index:-1}
.nav-link:hover,.nav-link:focus-visible{color:#fff;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.12);box-shadow:0 8px 18px rgba(0,0,0,.12);transform:translateX(3px)}
.nav-link:hover::before,.nav-link:focus-visible::before,.nav-link.is-active::before{opacity:1;transform:scaleY(1)}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.is-active::after{opacity:1;transform:translateX(0)}
.nav-link.is-active{color:#fff;background:linear-gradient(135deg,rgba(22,131,216,.36),rgba(255,255,255,.08));border-color:rgba(147,197,253,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 26px rgba(1,20,36,.22),0 0 22px rgba(37,99,235,.1)}

/* Brand selector: Algo Gestor purple active state, restrained for both themes. */
.nav-heading{font-size:10px;font-weight:700;letter-spacing:.095em;opacity:.78}
.nav-link:not(.is-active){color:rgba(248,251,255,.76);font-weight:600}
.nav-link.is-active{color:#f5efff;background:linear-gradient(135deg,rgba(117,63,190,.34),rgba(74,48,112,.22));border-color:rgba(177,129,255,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),0 10px 24px rgba(67,34,117,.2),0 0 20px rgba(141,86,220,.12)}
.nav-link::before{background:#a874ff}
.nav-link.is-active .nav-icon{color:#e5d4ff;background:rgba(143,80,222,.25);box-shadow:inset 0 0 0 1px rgba(190,146,255,.3),0 0 16px rgba(143,80,222,.16)}
[data-theme="dark"] .nav-link.is-active{background:linear-gradient(135deg,rgba(117,63,190,.30),rgba(255,255,255,.045));border-color:rgba(177,129,255,.29);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.24),0 0 20px rgba(143,80,222,.11)}
[data-theme="dark"] .nav-link:not(.is-active){color:rgba(245,240,255,.72)}

/* Tenant footer compaction is intentionally isolated from the main ADM. */
@media (min-width: 981px) {
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .sidebar-workspace {
        width: calc(100% + 14px);
        margin-left: -14px;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .sidebar-workspace .tenant-card {
        position: relative;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        column-gap: 7px;
        padding-left: 4px;
        padding-right: 18px;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-heading {
        gap: 4px;
        white-space: nowrap;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-heading .tenant-name {
        flex: 0 1 auto;
        font-size: 12.5px;
        line-height: 1.15;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-heading .tenant-scope {
        flex: 0 0 auto;
        margin: 0;
        padding: 2px 5px;
        font-size: 7px;
        line-height: 1.2;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-subscription {
        margin-top: 1px;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-subscription > span {
        gap: 3px;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-subscription > span > small {
        margin-left: 0;
        overflow: visible;
        font-size: 8px;
        text-overflow: clip;
    }

    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-workspace-chevron {
        position: absolute;
        top: 20px;
        right: 7px;
    }

    .app-shell.is-main-admin:not(.sidebar-collapsed) .sidebar-workspace {
        width: auto;
        margin-left: 0;
    }

    .app-shell.is-main-admin:not(.sidebar-collapsed) .sidebar-workspace .tenant-card {
        position: static;
        grid-template-columns: 40px minmax(0, 1fr) 16px;
        align-items: center;
        gap: 11px;
        padding: 10px 10px 9px 26px;
    }

    .app-shell.is-main-admin:not(.sidebar-collapsed) .tenant-workspace-kind {
        display: flex;
    }

    .app-shell.is-main-admin:not(.sidebar-collapsed) .tenant-workspace-chevron {
        position: static;
    }
}

/* Workspace footer: keep identity metadata on one compact, readable line. */
.sidebar-workspace .tenant-card {
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    padding-right: 24px;
}

.sidebar-workspace .tenant-avatar {
    margin-top: 1px;
}

.sidebar-workspace .tenant-copy {
    min-width: 0;
    gap: 4px;
}

.sidebar-workspace .tenant-heading {
    align-items: center;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}

.sidebar-workspace .tenant-name {
    flex: 0 1 auto;
    font-size: 12.5px;
    line-height: 1.15;
}

.sidebar-workspace .tenant-heading .tenant-scope {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 6px;
    font-size: 7.5px;
    line-height: 1.2;
}

.sidebar-workspace .tenant-workspace-kind {
    display: none;
}

.sidebar-workspace .tenant-subscription {
    margin-top: 1px;
}

.sidebar-workspace .tenant-subscription > span > small {
    margin-left: 0;
    font-size: 8px;
}

.sidebar-workspace .tenant-workspace-chevron {
    position: absolute;
    top: 20px;
    right: 7px;
}

/* Use the full footer width so workspace data never truncates unnecessarily. */
@media (min-width: 981px) {
    .app-shell:not(.sidebar-collapsed) .sidebar-workspace {
        width: calc(100% + 14px);
        margin-left: -14px;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-workspace .tenant-card {
        column-gap: 7px;
        padding-left: 4px;
        padding-right: 18px;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-workspace .tenant-heading {
        gap: 4px;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-workspace .tenant-heading .tenant-scope {
        padding-inline: 5px;
        font-size: 7px;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-workspace .tenant-subscription > span {
        gap: 3px;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-workspace .tenant-subscription > span > small {
        overflow: visible;
        text-overflow: clip;
    }
}
[data-theme="dark"] .nav-link.is-active .nav-icon{background:rgba(143,80,222,.22);box-shadow:inset 0 0 0 1px rgba(190,146,255,.26),0 0 16px rgba(143,80,222,.14)}
.nav-icon{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:rgba(255,255,255,.1);color:#dbeafe;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.nav-link:hover .nav-icon,.nav-link:focus-visible .nav-icon,.nav-link.is-active .nav-icon{color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 18px rgba(125,211,252,.18);transform:scale(1.05)}
.nav-svg{width:17px;height:17px}

/* Dark mode uses the same graphite family as the premium content surfaces. */
[data-theme="dark"] .sidebar {
    background:
        linear-gradient(180deg, #1c232d 0%, #181e27 48%, #141a22 100%);
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(186, 221, 248, 0.10);
}

[data-theme="dark"] .nav-link.is-active {
    background: linear-gradient(135deg, rgba(24, 118, 188, 0.30), rgba(255, 255, 255, 0.055));
    border-color: rgba(147, 197, 253, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055), 0 10px 24px rgba(0, 10, 20, 0.24);
}

[data-theme="dark"] .nav-link::before {
    background: #68bde9;
}

[data-theme="dark"] .nav-link:hover .nav-icon,
[data-theme="dark"] .nav-link:focus-visible .nav-icon,
[data-theme="dark"] .nav-link.is-active .nav-icon {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 14px rgba(104, 189, 233, 0.12);
}

[data-theme="dark"] .sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.075);
    background: linear-gradient(180deg, rgba(22, 29, 38, 0.94), #141a22 42%, #11171e 100%);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .sidebar-footer .tenant-card {
    background: rgba(255, 255, 255, 0.022);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 -1px 0 rgba(255, 255, 255, 0.035);
}

[data-theme="dark"] .sidebar-footer-action {
    color: rgba(226, 235, 244, 0.68);
}

[data-theme="dark"] .sidebar-footer-action:hover,
[data-theme="dark"] .sidebar-footer-action:focus-visible {
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
}

[data-theme="dark"] .tenant-renewal-inline {
    color: #8dc9e9;
}

[data-theme="dark"] .tenant-renewal-progress {
    background: rgba(255, 255, 255, 0.09);
}

/* Plans: commercial workflow ported from V1. */
.plan-table-panel{overflow:hidden}.plan-table-panel>.panel-header{padding:18px 20px}.plan-data-table{min-width:1060px}.plan-data-table th,.plan-data-table td{padding:13px 14px}.plan-name-cell{display:flex;align-items:center;gap:10px;min-width:230px}.plan-name-cell>span:last-child{display:grid;gap:2px}.plan-name-cell small{color:var(--color-muted);font-size:11px;font-weight:700}.plan-avatar{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:var(--radius-md);background:var(--color-blue-soft);color:var(--color-blue)}.plan-avatar.is-p2p{background:color-mix(in srgb,#f08a24 16%,var(--color-surface));color:#f08a24}.plan-avatar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.plan-type,.plan-pill,.plan-duration{display:inline-flex;align-items:center;padding:5px 10px;border:1px solid color-mix(in srgb,var(--color-blue) 24%,var(--color-border));border-radius:999px;background:var(--color-blue-soft);color:var(--color-blue);font-size:11px;font-weight:800;white-space:nowrap}.plan-type.is-p2p{border-color:color-mix(in srgb,#f08a24 34%,var(--color-border));background:color-mix(in srgb,#f08a24 15%,var(--color-surface));color:#f08a24}.plan-duration{border-color:color-mix(in srgb,var(--color-amber) 28%,var(--color-border));background:var(--color-amber-soft);color:var(--color-amber)}.plan-actions{flex-wrap:nowrap}.plan-action{width:36px;height:36px}.plan-action.is-clients{background:var(--color-amber-soft);color:var(--color-amber)}.plan-action.is-delete{background:var(--color-red-soft);color:var(--color-red)}.plan-action.is-view{background:var(--color-blue-soft);color:var(--color-blue)}.plan-action.is-edit{background:var(--color-violet-soft);color:var(--color-violet)}.plan-action.is-copy{background:var(--color-surface-soft);color:var(--color-text-soft)}.plan-data-table .server-status{border:0;cursor:pointer}.plan-form-panel{max-width:900px;margin:0 auto;padding:24px}.plan-detail-panel{padding:20px;margin-bottom:18px}
.plan-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px}.plan-status-tabs{display:flex;gap:8px;flex:0 0 auto}.plan-status-tab{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-soft);font-size:13px;font-weight:750;text-decoration:none}.plan-status-tab:hover,.plan-status-tab.is-active{border-color:color-mix(in srgb,var(--color-blue) 42%,var(--color-border));background:var(--color-blue-soft);color:var(--color-blue)}.plan-toolbar-form{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.plan-toolbar-form .select{width:225px}.plan-search{min-width:150px;flex:1}.plan-search .input{width:100%}.plan-hero-actions{display:flex;align-items:center;gap:10px}.plan-detail-stats .mini-stat{position:relative;overflow:hidden}.plan-detail-stats .mini-stat:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--metric-color)}.plan-detail-stats .mini-stat small{display:block;margin-top:5px;color:var(--color-muted);font-size:11px}.plan-config-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:4px -20px -20px}.plan-config-grid>div{min-width:0;padding:18px 20px;border-top:1px solid var(--color-border)}.plan-config-grid>div+div{border-left:1px solid var(--color-border)}.plan-config-grid dt{margin-bottom:7px;color:var(--color-muted);font-size:11px;font-weight:800;text-transform:uppercase}.plan-config-grid dd{margin:0;color:var(--color-text);font-size:14px;font-weight:700}.plan-detail-panel>.panel-header{padding-bottom:16px}.plan-detail-panel+.plan-table-panel>.panel-header{padding:20px}
@media(max-width:980px){.plan-toolbar{align-items:stretch;flex-direction:column}.plan-toolbar-form{width:100%}.plan-status-tabs{width:100%}.plan-status-tab{flex:1}.plan-config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-config-grid>div:nth-child(3){border-left:0}}@media(max-width:680px){.plan-toolbar-form{display:grid;grid-template-columns:1fr auto auto}.plan-toolbar-form label:first-of-type,.plan-search{grid-column:1/-1;width:100%}.plan-toolbar-form>.button{width:auto}.plan-hero-actions{width:100%}.plan-hero-actions .button{flex:1}.plan-config-grid{grid-template-columns:1fr}.plan-config-grid>div+div{border-left:0}.plan-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Shared instant-search toolbar used by operational modules. */
.plan-toolbar-form,
.template-filters {
    position: relative;
}

.plan-toolbar-form .scope-filter-actions,
.template-filters .scope-filter-actions {
    margin-left: auto;
}

.template-filters {
    min-width: 0;
    flex: 1;
    justify-content: space-between;
}

.template-filters .scope-filter-controls {
    min-width: 0;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .plan-toolbar-form {
        display: flex;
        flex-wrap: wrap;
    }

    .plan-toolbar-form .scope-filter-control {
        width: 100%;
    }

    .plan-toolbar-form .scope-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
    }

    .template-filters {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .template-filters .scope-filter-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .template-filters .scope-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
    }

    .plan-toolbar-form .scope-search-drawer,
    .template-filters .scope-search-drawer {
        right: 0;
        width: 100%;
    }
}

/* Central de creditos */
.credit-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.credit-readonly-badge{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--color-border));border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary-strong);font-size:11px;font-weight:850;text-transform:uppercase}
.credit-readonly-badge svg,.credit-stat-icon svg,.v3-metric-icon svg,.credit-server-cell svg,.credit-balance svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.credit-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.credit-stat,.v3-metric-card{--credit-stat-tone:var(--color-primary);display:flex;align-items:center;gap:12px;min-width:0;padding:16px;border:1px solid color-mix(in srgb,var(--credit-stat-tone) 20%,var(--color-border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--credit-stat-tone) 5%,var(--color-surface));box-shadow:var(--shadow-sm)}
.credit-stat.tone-blue,.v3-metric-card.tone-blue{--credit-stat-tone:var(--color-blue)}.credit-stat.tone-amber,.v3-metric-card.tone-amber{--credit-stat-tone:var(--color-amber)}.credit-stat.tone-violet,.v3-metric-card.tone-violet{--credit-stat-tone:var(--color-violet)}.credit-stat.tone-green,.v3-metric-card.tone-green{--credit-stat-tone:var(--color-green)}.credit-stat.tone-red,.v3-metric-card.tone-red{--credit-stat-tone:var(--color-red)}.v3-metric-card.tone-slate{--credit-stat-tone:var(--color-text-soft)}
.credit-stat-icon,.v3-metric-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--credit-stat-tone) 13%,var(--color-surface));color:var(--credit-stat-tone)}
.credit-stat-copy,.v3-metric-copy{display:grid;min-width:0;gap:2px}.credit-stat-copy small,.credit-stat-copy em,.v3-metric-copy small,.v3-metric-copy em{color:var(--color-muted);font-size:10px;font-style:normal;font-weight:750}.credit-stat-copy small,.v3-metric-copy small{color:color-mix(in srgb,var(--credit-stat-tone) 76%,var(--color-text));text-transform:uppercase}.credit-stat-copy strong,.v3-metric-copy strong{color:var(--color-text);font-size:clamp(18px,1.4vw,25px);line-height:1.1;overflow-wrap:anywhere}
.credit-filter-panel{margin-bottom:16px;padding:12px}.credit-filter-form{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}.credit-filter-controls{display:flex;align-items:flex-end;gap:8px;flex:1 1 720px;min-width:0}.credit-filter-controls .scope-filter-control{min-width:150px}.credit-filter-controls .credit-panel-filter{min-width:180px}.credit-filter-controls .credit-date-filter{min-width:132px;max-width:150px}.credit-filter-form .scope-filter-actions{margin-left:auto}.credit-filter-form .scope-search-drawer{flex:0 0 min(520px,100%);margin-left:auto}
.credit-ledger-panel{overflow:hidden}.credit-ledger-header{padding:18px 20px}.credit-ledger-table{min-width:1120px}.credit-ledger-table th,.credit-ledger-table td{padding:12px 11px;vertical-align:middle}.credit-ledger-table tbody tr:hover{background:color-mix(in srgb,var(--color-primary) 4%,var(--color-surface))}
.credit-date,.credit-panel-name,.credit-operator{display:inline-block;max-width:150px;color:var(--color-text-soft);font-size:11px;font-weight:750}.credit-panel-name,.credit-operator{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.credit-server-cell{display:inline-flex;align-items:center;gap:8px;min-width:145px;color:var(--color-primary-strong);text-decoration:none}.credit-server-cell>span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:var(--radius-md);background:var(--color-primary-soft)}.credit-server-cell.is-legacy{color:var(--color-muted)}.credit-server-cell.is-legacy>span{background:var(--color-surface-soft)}
.credit-movement-cell,.credit-entity,.credit-money{display:grid;gap:4px}.credit-movement-cell{min-width:190px;max-width:260px}.credit-movement-cell>strong,.credit-entity>strong{color:var(--color-text);font-size:11.5px;line-height:1.35}
.credit-type{display:inline-flex;width:fit-content;padding:4px 8px;border-radius:999px;background:var(--color-surface-soft);color:var(--color-text-soft);font-size:9.5px;font-weight:850;text-transform:uppercase}.credit-type.is-success{background:var(--color-green-soft);color:var(--color-green)}.credit-type.is-warning{background:var(--color-amber-soft);color:var(--color-amber)}.credit-type.is-violet{background:var(--color-violet-soft);color:var(--color-violet)}.credit-type.is-blue{background:var(--color-blue-soft);color:var(--color-blue)}.credit-type.is-danger{background:var(--color-red-soft);color:var(--color-red)}
.credit-legacy-label{color:var(--color-muted);font-size:9.5px;font-weight:800;text-transform:uppercase}.credit-entity{min-width:145px;max-width:200px}.credit-entity small{overflow:hidden;color:var(--color-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.credit-quantity{display:inline-flex;min-width:76px;justify-content:center;padding:6px 9px;border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-muted);font-size:11.5px}.credit-quantity.is-positive{background:var(--color-green-soft);color:var(--color-green)}.credit-quantity.is-negative{background:var(--color-red-soft);color:var(--color-red)}
.credit-money{min-width:125px}.credit-money small{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--color-muted);font-size:9.5px}.credit-money strong{color:var(--color-text-soft);font-size:10.5px}.credit-balance{display:inline-flex;align-items:center;gap:6px;min-width:135px;color:var(--color-muted)}.credit-balance svg{width:13px;height:13px}.credit-balance small,.credit-balance strong{font-size:11px}.credit-balance strong{color:var(--color-text)}.credit-balance strong.is-negative{color:var(--color-red)}
[data-theme="dark"] .credit-filter-controls .scope-filter-control,[data-theme="dark"] .credit-filter-controls .select,[data-theme="dark"] .credit-filter-controls .input{background:var(--color-surface);color:var(--color-text)}
[data-theme="dark"] .credit-filter-controls .select option{background:var(--color-surface);color:var(--color-text)}
[data-theme="dark"] .credit-filter-controls input[type="date"]{color-scheme:dark}
@media(max-width:1280px){.credit-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.credit-filter-controls{flex-wrap:wrap}}
@media(max-width:820px){.credit-hero-actions{justify-content:flex-start;width:100%}.credit-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-filter-form,.credit-filter-controls{align-items:stretch;flex-direction:column}.credit-filter-controls .scope-filter-control,.credit-filter-controls .credit-date-filter,.credit-filter-controls .credit-panel-filter{width:100%;max-width:none}.credit-filter-form .scope-filter-actions{width:100%;margin-left:0}.credit-filter-form .scope-filter-actions .button{flex:1}}
@media(max-width:520px){.credit-stat-grid,.subscription-stats{grid-template-columns:1fr}.credit-hero-actions .button{width:100%;justify-content:center}}

/* Central de auditoria */
.history-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.history-readonly{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--color-violet) 24%,var(--color-border));border-radius:var(--radius-md);background:var(--color-violet-soft);color:var(--color-violet);font-size:11px;font-weight:850;text-transform:uppercase}.history-readonly svg,.history-stat-icon svg,.history-dialog-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.history-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.history-stat{--history-tone:var(--color-violet);display:flex;align-items:center;gap:12px;min-width:0;padding:16px;border:1px solid color-mix(in srgb,var(--history-tone) 20%,var(--color-border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--history-tone) 5%,var(--color-surface));box-shadow:var(--shadow-sm)}.history-stat.tone-blue{--history-tone:var(--color-blue)}.history-stat.tone-red{--history-tone:var(--color-red)}.history-stat.tone-amber{--history-tone:var(--color-amber)}.history-stat.tone-teal{--history-tone:var(--color-primary)}.history-stat-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--history-tone) 13%,var(--color-surface));color:var(--history-tone)}.history-stat>span:last-child{display:grid;gap:2px;min-width:0}.history-stat small,.history-stat em{color:var(--color-muted);font-size:10px;font-style:normal;font-weight:750}.history-stat small{color:color-mix(in srgb,var(--history-tone) 76%,var(--color-text));text-transform:uppercase}.history-stat strong{font-size:24px;line-height:1.1}
.history-filter-panel{margin-bottom:16px;padding:12px}.history-filter-form{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}.history-filter-controls{display:flex;align-items:flex-end;gap:8px;flex:1 1 930px;min-width:0}.history-filter-controls .scope-filter-control{min-width:140px}.history-filter-controls .history-date{min-width:132px;max-width:145px}.history-filter-form .scope-filter-actions{margin-left:auto}.history-filter-form .scope-search-drawer{flex:0 0 min(520px,100%);margin-left:auto}
.history-ledger-panel{overflow:hidden}.history-ledger-header{padding:18px 20px}.history-ledger-table{min-width:1160px}.history-ledger-table th,.history-ledger-table td{padding:11px 10px;vertical-align:middle}.history-date-cell{display:inline-block;max-width:82px;color:var(--color-text-soft);font-size:10.5px;font-weight:750}.history-event{display:block;min-width:170px;max-width:230px;font-size:11.5px;line-height:1.35}.history-module{display:inline-flex;padding:5px 8px;border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-text-soft);font-size:10px;font-weight:800}.history-actor{display:flex;align-items:center;gap:7px;min-width:130px}.history-actor>span{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary-strong);font-size:9px;font-weight:900}.history-actor strong{max-width:115px;overflow:hidden;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}.history-source{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--color-surface-soft);color:var(--color-text-soft);font-size:9.5px;font-weight:850;text-transform:uppercase}.history-source.is-violet{background:var(--color-violet-soft);color:var(--color-violet)}.history-source.is-blue{background:var(--color-blue-soft);color:var(--color-blue)}.history-source.is-warning{background:var(--color-amber-soft);color:var(--color-amber)}.history-ip{padding:4px 6px;border-radius:var(--radius-sm);background:var(--color-surface-soft);color:var(--color-text-soft);font-size:9.5px}.history-summary{display:block;min-width:165px;max-width:230px;color:var(--color-muted);font-size:10.5px;line-height:1.35}.history-detail-button{width:34px;height:34px;background:var(--color-blue-soft);color:var(--color-blue)}
.history-detail-dialog{width:min(850px,calc(100vw - 28px))}.history-detail-dialog .app-dialog-shell{max-height:calc(100vh - 34px)}.history-dialog-heading{display:flex!important;align-items:center;gap:11px!important}.history-dialog-heading>div{display:grid;gap:2px}.history-dialog-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-md);background:var(--color-violet-soft);color:var(--color-violet)}.history-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.history-detail-grid>div{display:grid;gap:5px;min-width:0;padding:11px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}.history-detail-grid .span-2{grid-column:1/-1}.history-detail-grid span{color:var(--color-muted);font-size:9.5px;font-weight:850;text-transform:uppercase}.history-detail-grid strong{color:var(--color-text);font-size:12px;line-height:1.45;overflow-wrap:anywhere}.history-entity-link{margin-left:8px;color:var(--color-primary-strong);font-size:11px;text-decoration:none}.history-json-block pre{max-height:150px;margin:0;overflow:auto;color:var(--color-text-soft);font:10.5px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.history-technical{grid-template-columns:auto 1fr;align-items:center}.history-technical code{overflow:hidden;color:var(--color-text-soft);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
[data-theme="dark"] .history-filter-controls .scope-filter-control,[data-theme="dark"] .history-filter-controls .select,[data-theme="dark"] .history-filter-controls .input{background:var(--color-surface);color:var(--color-text)}[data-theme="dark"] .history-filter-controls input[type="date"]{color-scheme:dark}
@media(max-width:1320px){.history-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.history-filter-controls{flex-wrap:wrap}}
@media(max-width:820px){.history-hero-actions{justify-content:flex-start;width:100%}.history-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-filter-form,.history-filter-controls{align-items:stretch;flex-direction:column}.history-filter-controls .scope-filter-control,.history-filter-controls .history-date{width:100%;max-width:none}.history-filter-form .scope-filter-actions{width:100%;margin-left:0}.history-filter-form .scope-filter-actions .button{flex:1}.history-detail-grid{grid-template-columns:1fr}.history-detail-grid .span-2{grid-column:auto}}
@media(max-width:520px){.history-stat-grid{grid-template-columns:1fr}}

/* Central de suporte SaaS */
.support-admin-scope{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--color-red) 22%,var(--color-border));border-radius:var(--radius-md);background:var(--color-red-soft);color:var(--color-red);font-size:11px;font-weight:850;text-transform:uppercase}.support-admin-scope svg,.support-stat-icon svg,.support-requester-icon svg,.support-account-profile svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.support-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.support-stat{--support-tone:var(--color-blue);display:flex;align-items:center;gap:12px;min-height:82px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--support-tone) 20%,var(--color-border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--support-tone) 5%,var(--color-surface));box-shadow:var(--shadow-sm)}.support-stat.tone-red{--support-tone:var(--color-red)}.support-stat.tone-amber{--support-tone:var(--color-amber)}.support-stat.tone-green{--support-tone:var(--color-green)}.support-stat-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--support-tone) 13%,var(--color-surface));color:var(--support-tone)}.support-stat>span:last-child{display:grid;gap:2px}.support-stat small{color:color-mix(in srgb,var(--support-tone) 74%,var(--color-text));font-size:10px;font-weight:850;text-transform:uppercase}.support-stat strong{font-size:25px;line-height:1}
.support-filter-panel{margin-bottom:16px;padding:12px}.support-filter-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.support-filter-controls{display:flex;align-items:flex-end;gap:8px;flex:1 1 710px}.support-filter-controls .scope-filter-control{min-width:148px}.support-filter-form .scope-filter-actions{margin-left:auto}.support-search-drawer{position:relative;display:flex;align-items:center;flex:0 0 min(520px,100%);margin-left:auto}.support-search-drawer[hidden]{display:none}.support-search-drawer>svg{position:absolute;left:12px;width:16px;height:16px;color:var(--color-primary);z-index:1}.support-search-drawer .input{padding-left:38px;border-color:var(--color-primary)}
.support-workspace{display:grid;grid-template-columns:minmax(280px,320px) minmax(470px,1fr) minmax(260px,300px);gap:14px;align-items:stretch;min-height:690px}.support-workspace>.panel{min-width:0;margin:0;padding:0;overflow:hidden}.support-column-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:14px 16px;border-bottom:1px solid var(--color-border);background:var(--color-surface-soft)}.support-column-header>div{display:grid;gap:2px;min-width:0}.support-column-header h2{margin:0;font-size:15px}.support-column-header p{margin:0;color:var(--color-muted);font-size:10.5px}
.support-inbox{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.support-ticket-list{max-height:720px;overflow-y:auto}.support-ticket-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:13px 14px;border-bottom:1px solid var(--color-border);background:var(--color-surface);text-decoration:none;transition:background var(--transition),border-color var(--transition)}.support-ticket-item:hover,.support-ticket-item:focus-visible{background:var(--color-surface-soft);outline:none}.support-ticket-item.is-active{border-left:3px solid var(--color-primary);background:var(--color-primary-soft)}.support-ticket-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-md);background:var(--color-blue-soft);color:var(--color-blue);font-size:10px;font-weight:900}.support-ticket-copy{display:grid;gap:4px;min-width:0}.support-ticket-copy>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.support-ticket-copy strong,.support-ticket-copy b,.support-ticket-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-ticket-copy strong{font-size:11.5px}.support-ticket-copy time{color:var(--color-muted);font-size:8.5px}.support-ticket-copy b{font-size:10.5px}.support-ticket-copy small{color:var(--color-muted);font-size:9.5px}.support-ticket-tags{display:flex;gap:5px}.support-ticket-tags .badge{padding:3px 6px;font-size:8px}.support-unread{position:absolute;top:9px;left:40px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--color-red);color:#fff;font-size:8px;font-style:normal;font-weight:900}.support-column-empty,.support-chat-empty{display:grid;place-items:center;align-content:center;gap:8px;min-height:260px;padding:24px;color:var(--color-muted);text-align:center}.support-column-empty svg,.support-chat-empty svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}.support-column-empty strong,.support-chat-empty strong{color:var(--color-text)}.support-column-empty span,.support-chat-empty p{margin:0;font-size:11px}.support-inbox-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--color-border)}.support-inbox-pagination a,.support-inbox-pagination span{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--color-border);border-radius:var(--radius-md)}.support-inbox-pagination svg{width:14px;height:14px}.support-inbox-pagination span{opacity:.4}.support-inbox-pagination b{font-size:10px}
.support-conversation{display:grid;grid-template-rows:auto auto minmax(310px,1fr) auto}.support-chat-header{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:82px;padding:14px 16px;border-bottom:1px solid var(--color-border)}.support-chat-person{display:flex;align-items:center;gap:10px;min-width:0}.support-chat-person>span{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary-strong);font-size:11px;font-weight:900}.support-chat-person>div{display:grid;gap:2px;min-width:0}.support-chat-person strong{font-size:13px}.support-chat-person small,.support-chat-person p{margin:0;overflow:hidden;color:var(--color-muted);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}.support-close-form .button{min-height:36px;padding:7px 10px;font-size:10px}.support-conversation-subject{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--color-border);background:var(--color-surface-soft)}.support-conversation-subject>span:first-child{display:grid;gap:2px;min-width:0}.support-conversation-subject b{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.support-conversation-subject small{color:var(--color-muted);font-size:9px}.support-message-stream{display:grid;align-content:start;gap:10px;min-height:310px;max-height:500px;padding:18px;overflow-y:auto;background:color-mix(in srgb,var(--color-bg) 64%,var(--color-surface))}.support-system-message{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--color-muted);font-size:9px;text-align:center}.support-system-message span{padding:5px 9px;border-radius:999px;background:var(--color-surface-soft)}.support-system-message time{font-size:8px}.support-message{display:flex;justify-content:flex-start}.support-message.is-mine{justify-content:flex-end}.support-message>div{width:min(72%,540px);padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.support-message.is-mine>div{border-color:color-mix(in srgb,var(--color-primary) 28%,var(--color-border));background:var(--color-primary-soft)}.support-message p{margin:0;color:var(--color-text-soft);font-size:11.5px;line-height:1.55;white-space:pre-wrap}.support-message footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;color:var(--color-muted);font-size:8.5px}.support-message footer strong{color:var(--color-text-soft);font-size:8.5px}.support-composer{padding:12px 14px;border-top:1px solid var(--color-border)}.support-quick-replies{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto}.support-quick-replies button{flex:0 0 auto;min-height:26px;padding:4px 8px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface-soft);color:var(--color-text-soft);font-size:8.5px;font-weight:750;cursor:pointer}.support-quick-replies button:hover{border-color:var(--color-primary);color:var(--color-primary-strong)}.support-composer form{display:grid;gap:8px}.support-composer textarea{min-height:74px}.support-composer form>footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.support-composer form>footer label{display:flex;align-items:center;gap:6px;color:var(--color-muted);font-size:9px}.support-composer form>footer .button{min-height:36px;font-size:10px}.support-finished{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:12px;border-top:1px solid var(--color-border);background:var(--color-green-soft);color:var(--color-green);font-size:10.5px}.support-finished svg{width:16px;height:16px}
.support-account{display:grid;align-content:start}.support-account-profile{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--color-border)}.support-account-profile>span{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:var(--radius-md);background:var(--color-blue-soft);color:var(--color-blue);font-size:11px;font-weight:900}.support-account-profile>div{display:grid;gap:2px;min-width:0}.support-account-profile strong,.support-account-profile small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-account-profile strong{font-size:12px}.support-account-profile small{color:var(--color-muted);font-size:9px}.support-account-profile em{justify-self:start;padding:3px 6px;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary-strong);font-size:8px;font-style:normal;font-weight:800}.support-account-facts{display:grid;margin:0;padding:4px 16px}.support-account-facts>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--color-border)}.support-account-facts dt{color:var(--color-muted);font-size:9px}.support-account-facts dd{margin:0;max-width:150px;overflow:hidden;color:var(--color-text-soft);font-size:9.5px;font-weight:800;text-align:right;text-overflow:ellipsis;white-space:nowrap}.support-assignment{display:grid;gap:9px;padding:14px 16px;border-top:1px solid var(--color-border)}.support-assignment label{display:grid;gap:4px}.support-assignment label>span{color:var(--color-muted);font-size:9px;font-weight:800;text-transform:uppercase}.support-assignment .select{min-height:36px;font-size:10px}.support-assignment .button{width:100%;min-height:36px;font-size:10px}.support-tech-context{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.support-tech-context summary{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:var(--color-text-soft);font-size:10px;font-weight:850;cursor:pointer;list-style:none}.support-tech-context summary span{display:flex;align-items:center;gap:7px}.support-tech-context summary svg{width:14px;height:14px}.support-tech-context>dl{display:grid;margin:0;padding:0 16px 12px}.support-tech-context>dl>div{display:grid;gap:2px;padding:7px 0;border-top:1px solid var(--color-border)}.support-tech-context dt{color:var(--color-muted);font-size:8px;text-transform:uppercase}.support-tech-context dd{margin:0;overflow-wrap:anywhere;color:var(--color-text-soft);font-size:9px}.support-recent-actions{display:grid;gap:8px;padding:14px 16px}.support-recent-actions h3{margin:0;font-size:11px}.support-recent-actions>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.support-recent-actions>div>span{display:grid;grid-template-columns:7px 1fr;min-width:0}.support-recent-actions i{grid-row:1/3;align-self:center;width:6px;height:6px;border-radius:50%;background:var(--color-green)}.support-recent-actions strong,.support-recent-actions small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-recent-actions strong{font-size:8.5px}.support-recent-actions small{color:var(--color-muted);font-size:8px}.support-recent-actions time{color:var(--color-muted);font-size:7.5px;text-align:right}.support-recent-actions p,.support-details-empty{padding:20px;color:var(--color-muted);font-size:10px;text-align:center}
.support-requester-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.support-requester-shell>.panel{margin:0}.support-requester-conversation{padding:0;overflow:hidden}.support-requester-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--color-border)}.support-requester-header>div{display:flex;align-items:center;gap:12px;min-width:0}.support-requester-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:var(--radius-md);background:var(--color-red-soft);color:var(--color-red)}.support-requester-header>div>div{display:grid;gap:2px;min-width:0}.support-requester-header p,.support-requester-header h2,.support-requester-header small{margin:0}.support-requester-header p{color:var(--color-muted);font-size:9px;font-weight:800}.support-requester-header h2{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.support-requester-header small{color:var(--color-muted);font-size:9.5px}.support-requester-status{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--color-border);background:var(--color-surface-soft)}.support-requester-status>span{display:flex;align-items:center;gap:6px;color:var(--color-muted)}.support-requester-status>span i{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--color-border);border-radius:50%;background:var(--color-surface)}.support-requester-status>span svg{width:12px;height:12px}.support-requester-status>span b{font-size:8.5px;white-space:nowrap}.support-requester-status>span.is-done{color:var(--color-green)}.support-requester-status>span.is-done i{border-color:color-mix(in srgb,var(--color-green) 30%,var(--color-border));background:var(--color-green-soft)}.support-requester-status>em{height:1px;background:var(--color-border)}.support-message-stream.requester{min-height:350px;max-height:520px}.support-requester-reply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:14px 16px;border-top:1px solid var(--color-border)}.support-requester-reply .textarea{min-height:76px}.support-requester-reply .button{min-height:42px}.support-requester-summary{padding:0;overflow:hidden}.support-requester-summary>header{display:flex;align-items:center;gap:9px;padding:16px;border-bottom:1px solid var(--color-border);background:var(--color-surface-soft)}.support-requester-summary>header>span{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--color-red-soft);color:var(--color-red)}.support-requester-summary>header svg{width:17px;height:17px}.support-requester-summary h2,.support-requester-summary p{margin:0}.support-requester-summary h2{font-size:13px}.support-requester-summary header p{color:var(--color-muted);font-size:9px}.support-requester-summary dl{display:grid;margin:0;padding:6px 16px}.support-requester-summary dl>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--color-border)}.support-requester-summary dt{color:var(--color-muted);font-size:9px}.support-requester-summary dd{margin:0;color:var(--color-text-soft);font-size:9.5px;font-weight:800;text-align:right}.support-requester-summary>p{display:flex;align-items:flex-start;gap:7px;margin:0;padding:14px 16px;border-top:1px solid var(--color-border);color:var(--color-muted);font-size:9px;line-height:1.45}.support-requester-summary>p svg{width:14px;height:14px;flex:0 0 14px}.support-requester-empty{grid-column:1/-1;display:grid;place-items:center;min-height:390px;padding:40px;text-align:center}.support-requester-empty>span{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-lg);background:var(--color-red-soft);color:var(--color-red)}.support-requester-empty>span svg{width:28px;height:28px}.support-requester-empty h2{margin:16px 0 5px;font-size:22px}.support-requester-empty p{max-width:520px;margin:0 0 18px;color:var(--color-muted);font-size:12px}
.support-create-dialog{width:min(720px,calc(100vw - 28px))}.support-create-dialog .app-dialog-shell{max-height:calc(100vh - 32px)}.support-dialog-heading{display:flex!important;align-items:center;gap:11px!important}.support-dialog-heading>span{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-red-soft);color:var(--color-red)}.support-dialog-heading>span svg{width:19px;height:19px}.support-dialog-heading>div{display:grid;gap:2px}.support-dialog-heading strong{font-size:18px}.support-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.support-create-grid .span-2{grid-column:1/-1}.support-create-grid .form-field{display:grid;gap:5px}.support-create-grid .form-field>span{color:var(--color-text-soft);font-size:11px;font-weight:800}.support-create-grid .form-field>span b{color:var(--color-red)}.support-create-grid .form-field>small{color:var(--color-muted);font-size:9.5px}.support-error-details{padding:0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}.support-error-details summary{padding:10px 12px;color:var(--color-text-soft);font-size:10px;font-weight:800;cursor:pointer}.support-error-details .form-field{padding:0 12px 12px}
[data-theme="dark"] .support-filter-controls .scope-filter-control,[data-theme="dark"] .support-filter-controls .select,[data-theme="dark"] .support-search-drawer .input,[data-theme="dark"] .support-assignment .select{background:var(--color-surface);color:var(--color-text)}
@media(max-width:1450px){.support-workspace{grid-template-columns:290px minmax(430px,1fr)}.support-account{grid-column:1/-1;grid-template-columns:260px 1fr 1fr}.support-account>.support-column-header{grid-column:1/-1}.support-account-profile{border-right:1px solid var(--color-border)}.support-account-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.support-account-facts>div{display:grid;align-content:center}.support-assignment{grid-template-columns:1fr 1fr auto;align-items:end}.support-tech-context,.support-recent-actions{border-left:1px solid var(--color-border)}}
@media(max-width:1050px){.support-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.support-filter-controls{flex-wrap:wrap}.support-workspace{grid-template-columns:1fr}.support-inbox{min-height:420px}.support-ticket-list{max-height:420px}.support-conversation{min-height:650px}.support-account{display:grid;grid-template-columns:1fr 1fr}.support-account>.support-column-header{grid-column:1/-1}.support-account-profile{border-right:1px solid var(--color-border)}.support-account-facts{grid-template-columns:1fr}.support-requester-shell{grid-template-columns:1fr}.support-requester-summary{grid-row:1}.support-message-stream.requester{min-height:300px}}
@media(max-width:720px){.support-portal-hero .button,.support-center-hero .support-admin-scope{width:100%;justify-content:center}.support-stat-grid{grid-template-columns:1fr}.support-filter-form,.support-filter-controls{align-items:stretch;flex-direction:column}.support-filter-controls .scope-filter-control{width:100%}.support-filter-form .scope-filter-actions{width:100%;margin-left:0}.support-filter-form .scope-filter-actions .button{flex:1}.support-search-drawer{flex-basis:100%;width:100%;margin-left:0}.support-workspace{min-height:0}.support-chat-header{align-items:flex-start;flex-direction:column}.support-close-form,.support-close-form .button{width:100%}.support-message>div{width:88%}.support-account{grid-template-columns:1fr}.support-account>.support-column-header{grid-column:auto}.support-account-profile{border-right:0}.support-assignment{grid-template-columns:1fr}.support-requester-header{align-items:flex-start;flex-direction:column}.support-requester-status{grid-template-columns:1fr;justify-items:start}.support-requester-status>em{display:none}.support-requester-reply{grid-template-columns:1fr}.support-create-grid{grid-template-columns:1fr}.support-create-grid .span-2{grid-column:auto}}

/* Shared compact filter bar wins over legacy module-specific wrappers. */
:is(.credit-filter-panel, .history-filter-panel, .support-filter-panel).scope-filter-panel {
    padding: 6px;
}

:is(.manager-filter, .credit-filter-form, .history-filter-form, .support-filter-form).scope-filter-toolbar {
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

:is(.credit-filter-controls, .history-filter-controls, .support-filter-controls).scope-filter-controls {
    align-items: center;
}

.scope-filter-actions .support-search-drawer {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 272px;
    margin: 0 8px 0 0;
    transform: translateY(-50%);
}

/* Account-level accent choices. */
[data-accent="blue"] { --color-primary:#2f6fd6;--color-primary-strong:#245bb5;--color-primary-soft:#e6efff; }
[data-accent="green"] { --color-primary:#22835b;--color-primary-strong:#176744;--color-primary-soft:#def5e9; }
[data-accent="violet"] { --color-primary:#7c4dcc;--color-primary-strong:#6238ae;--color-primary-soft:#efe9ff; }
[data-theme="dark"][data-accent="blue"] { --color-primary:#79a6ff;--color-primary-strong:#a9c5ff;--color-primary-soft:rgba(72,119,214,.18); }
[data-theme="dark"][data-accent="green"] { --color-primary:#61d09a;--color-primary-strong:#91e5b9;--color-primary-soft:rgba(34,131,91,.2); }
[data-theme="dark"][data-accent="violet"] { --color-primary:#b99aff;--color-primary-strong:#d0bcff;--color-primary-soft:rgba(124,77,204,.2); }

/* Child panels keep the notification accents independent from their personal accent color. */
.panel-child-topbar-trigger.topbar-announcement-trigger:hover,
.panel-child-topbar-trigger.topbar-announcement-trigger:focus-visible,
.panel-child-topbar-trigger.topbar-announcement-trigger.is-open {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.panel-child-topbar-trigger.topbar-notification-trigger:hover,
.panel-child-topbar-trigger.topbar-notification-trigger:focus-visible,
.panel-child-topbar-trigger.topbar-notification-trigger.is-open {
    border-color: var(--color-orange, #d97706);
    background: color-mix(in srgb, var(--color-amber-soft) 80%, var(--color-surface));
    color: var(--color-orange, #d97706);
}

.brand-mark img,.tenant-avatar img,.profile-avatar img{width:100%;height:100%;object-fit:contain;border-radius:inherit}.brand-mark img{padding:4px}.tenant-avatar img,.profile-avatar img{object-fit:cover}

/* Premium profile and workspace center. */
.profile-center-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:150px;margin-bottom:14px;padding:22px 24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-primary) 20%,var(--color-border));border-radius:var(--radius-md);background:linear-gradient(120deg,color-mix(in srgb,var(--color-primary) 9%,var(--color-surface)),var(--color-surface) 58%);box-shadow:var(--shadow-sm)}
.profile-center-identity,.profile-center-summary,.profile-center-summary>div{display:flex;align-items:center}.profile-center-identity{gap:15px;min-width:0}.profile-center-avatar{display:grid;place-items:center;width:66px;height:66px;flex:0 0 66px;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--color-border));border-radius:var(--radius-lg);background:var(--color-primary-soft);color:var(--color-primary-strong);font-size:18px;font-weight:900;box-shadow:0 10px 28px color-mix(in srgb,var(--color-primary) 14%,transparent)}.profile-center-avatar img{width:100%;height:100%;object-fit:contain;padding:6px}.profile-center-identity>div{display:grid;gap:4px;min-width:0}.profile-center-identity h1,.profile-center-identity p{margin:0}.profile-center-identity h1{overflow:hidden;font-size:26px;text-overflow:ellipsis;white-space:nowrap}.profile-center-identity p{display:flex;align-items:center;gap:7px;color:var(--color-muted);font-size:11.5px}.profile-center-identity p span{width:3px;height:3px;border-radius:50%;background:var(--color-primary)}
.profile-center-summary{position:relative;z-index:1;gap:20px}.profile-center-summary>div{display:grid;gap:3px;min-width:110px;padding-left:18px;border-left:1px solid var(--color-border)}.profile-center-summary small{color:var(--color-muted);font-size:9px;font-weight:800;text-transform:uppercase}.profile-center-summary strong{font-size:12px}.profile-center-hero>.v3-card-watermark{position:absolute;right:18px;top:50%;z-index:-1;color:var(--color-primary);opacity:.055;transform:translateY(-50%)}.profile-center-hero>.v3-card-watermark svg{width:126px;height:126px;fill:none;stroke:currentColor;stroke-width:1.4}
.profile-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-bottom:16px;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.profile-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:7px 10px;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--color-muted);font-size:10.5px;font-weight:800;text-decoration:none;transition:background var(--transition),border-color var(--transition),color var(--transition)}.profile-tab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}.profile-tab:hover,.profile-tab:focus-visible{border-color:var(--color-border);background:var(--color-surface-soft);color:var(--color-text);outline:none}.profile-tab.is-active{border-color:color-mix(in srgb,var(--color-primary) 28%,var(--color-border));background:var(--color-primary-soft);color:var(--color-primary-strong);box-shadow:0 5px 16px color-mix(in srgb,var(--color-primary) 9%,transparent)}
.profile-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.profile-overview-card{--profile-tone:var(--color-primary);display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:11px;min-height:108px;padding:15px;border:1px solid color-mix(in srgb,var(--profile-tone) 20%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--profile-tone) 5%,var(--color-surface));color:var(--color-text);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}.profile-overview-card.tone-blue{--profile-tone:var(--color-blue)}.profile-overview-card.tone-violet{--profile-tone:var(--color-violet)}.profile-overview-card.tone-amber{--profile-tone:var(--color-amber)}.profile-overview-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--profile-tone) 42%,var(--color-border));box-shadow:var(--shadow-md)}.profile-overview-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--profile-tone) 13%,var(--color-surface));color:var(--profile-tone)}.profile-overview-card>span svg,.profile-overview-card>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.profile-overview-card>svg{color:var(--color-muted)}.profile-overview-card>div{display:grid;gap:2px;min-width:0}.profile-overview-card small{color:var(--profile-tone);font-size:9px;font-weight:850;text-transform:uppercase}.profile-overview-card strong,.profile-overview-card p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-overview-card strong{font-size:13px}.profile-overview-card p{margin:0;color:var(--color-muted);font-size:9.5px}
.profile-overview-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,1.2fr);align-items:center;gap:20px;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.profile-overview-status{display:flex;align-items:center;gap:12px}.profile-overview-status>div{display:grid;gap:3px}.profile-overview-status h2,.profile-overview-status p{margin:0}.profile-overview-status h2{font-size:16px}.profile-overview-status p{color:var(--color-muted);font-size:10.5px}.profile-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}.profile-facts>div{display:grid;gap:4px;padding:12px;border-right:1px solid var(--color-border)}.profile-facts>div:last-child{border-right:0}.profile-facts dt{color:var(--color-muted);font-size:8.5px;font-weight:800;text-transform:uppercase}.profile-facts dd{margin:0;overflow:hidden;font-size:10.5px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.profile-settings-panel{padding:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.profile-section-header{display:flex;align-items:center;gap:12px;padding:17px 19px;border-bottom:1px solid var(--color-border);background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 5%,var(--color-surface-soft)),var(--color-surface))}.profile-section-header>div{display:grid;gap:2px}.profile-section-header h2,.profile-section-header p{margin:0}.profile-section-header h2{font-size:17px}.profile-section-header p{color:var(--color-muted);font-size:10px}.profile-settings-panel>.notice{margin:14px 18px 0}
.profile-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:20px}.profile-field{display:grid;gap:5px;min-width:0}.profile-field.span-2{grid-column:1/-1}.profile-field>span{color:var(--color-text-soft);font-size:10px;font-weight:800}.profile-field>div{display:grid;grid-template-columns:42px minmax(0,1fr);min-height:43px;overflow:hidden;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);transition:border-color var(--transition),box-shadow var(--transition)}.profile-field>div:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)}.profile-field>div>svg{align-self:stretch;width:42px;height:100%;padding:13px;border-right:1px solid var(--color-border);background:var(--color-primary-soft);color:var(--color-primary);fill:none;stroke:currentColor;stroke-width:2}.profile-field input,.profile-field select{width:100%;min-width:0;padding:0 12px;border:0;outline:0;background:transparent;color:var(--color-text);font:inherit;font-size:11.5px}.profile-form-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-top:1px solid var(--color-border);background:var(--color-surface-soft)}.profile-form-footer>span{color:var(--color-muted);font-size:9.5px}
.profile-brand-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:14px}.profile-brand-layout .profile-settings-panel>.profile-field{margin:0 20px 15px}.profile-logo-editor{display:flex;align-items:center;gap:14px;margin:20px;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}.profile-logo-preview{display:grid;place-items:center;width:76px;height:76px;flex:0 0 76px;overflow:hidden;border:1px dashed color-mix(in srgb,var(--color-primary) 45%,var(--color-border));border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-primary);font-size:17px;font-weight:900}.profile-logo-preview img{width:100%;height:100%;padding:6px;object-fit:contain}.profile-logo-editor>div{display:grid;justify-items:start;gap:5px}.profile-logo-editor strong{font-size:12px}.profile-logo-editor small{color:var(--color-muted);font-size:9.5px}.profile-logo-editor .button{margin-top:4px}.profile-remove-logo{display:flex;align-items:center;margin:0 20px 18px;color:var(--color-red);font-size:10px;cursor:pointer}.profile-remove-logo input{margin-right:8px}.profile-remove-logo span{display:flex;align-items:center;gap:6px}.profile-remove-logo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.profile-brand-preview{display:grid;align-content:start;gap:15px;min-height:340px;padding:20px;border:1px solid color-mix(in srgb,var(--color-primary) 20%,var(--color-border));border-radius:var(--radius-md);background:linear-gradient(145deg,#1c232d,#111820);color:#fff;box-shadow:var(--shadow-sm)}.profile-preview-sidebar{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);background:rgba(255,255,255,.045)}.profile-preview-sidebar>span{display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border-radius:var(--radius-md);background:#f6f9ff;color:#164f79;font-size:11px;font-weight:900}.profile-preview-sidebar img{width:100%;height:100%;padding:4px;object-fit:contain}.profile-preview-sidebar>div{display:grid;gap:2px}.profile-preview-sidebar strong{font-size:12px}.profile-preview-sidebar small{color:rgba(255,255,255,.55);font-size:8px}.profile-preview-content{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.profile-preview-content span{height:74px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);background:rgba(255,255,255,.035)}.profile-brand-preview>p{margin:0;color:rgba(255,255,255,.55);font-size:9.5px;line-height:1.5}
.profile-security-grid{display:grid;grid-template-columns:minmax(360px,.75fr) minmax(0,1.25fr);gap:14px}.profile-password-fields{display:grid;gap:12px;padding:20px}.profile-session-list{display:grid}.profile-session{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--color-border)}.profile-session>span{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-muted)}.profile-session>span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.profile-session>div{display:grid;gap:3px}.profile-session strong{display:flex;align-items:center;gap:7px;font-size:11px}.profile-session em{padding:3px 6px;border-radius:999px;background:var(--color-surface-soft);color:var(--color-muted);font-size:7.5px;font-style:normal;text-transform:uppercase}.profile-session small{display:flex;align-items:center;gap:6px;color:var(--color-muted);font-size:8.5px}.profile-session small b{width:3px;height:3px;border-radius:50%;background:currentColor}.profile-session.is-current>span{background:var(--color-green-soft);color:var(--color-green)}.profile-session.is-current em{background:var(--color-green-soft);color:var(--color-green)}.profile-end-sessions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:14px 18px;border-top:1px solid var(--color-border);background:var(--color-surface-soft)}
.profile-preference-section{display:grid;grid-template-columns:minmax(180px,.35fr) minmax(0,1fr);gap:22px;padding:19px 20px;border-bottom:1px solid var(--color-border)}.profile-preference-section>div:first-child{display:grid;align-content:start;gap:4px}.profile-preference-section>div:first-child>strong{font-size:11.5px}.profile-preference-section>div:first-child>small{color:var(--color-muted);font-size:9.5px;line-height:1.45}.profile-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.profile-choice-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-choice,.profile-accent{cursor:pointer}.profile-choice input,.profile-accent input{position:absolute;opacity:0;pointer-events:none}.profile-choice>span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-muted);transition:border-color var(--transition),background var(--transition),color var(--transition),box-shadow var(--transition)}.profile-choice svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}.profile-choice strong{font-size:10px}.profile-choice input:checked+span{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));background:var(--color-primary-soft);color:var(--color-primary-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 9%,transparent)}
.profile-accent-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.profile-accent{display:flex;align-items:center;gap:9px;min-height:54px;padding:10px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}.profile-accent>span{width:25px;height:25px;border:5px solid color-mix(in srgb,currentColor 15%,var(--color-surface));border-radius:50%;background:currentColor;color:#36beb9}.profile-accent.is-blue>span{color:#4d86e8}.profile-accent.is-green>span{color:#32a774}.profile-accent.is-violet>span{color:#8c63d5}.profile-accent strong{font-size:9.5px}.profile-accent:has(input:checked){border-color:currentColor;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 9%,transparent)}.profile-inline-preferences{display:grid!important;grid-template-columns:minmax(200px,1fr) minmax(270px,1fr);align-items:center;gap:12px}.profile-switch{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft);cursor:pointer}.profile-switch>input{position:absolute;opacity:0}.profile-switch>span{position:relative;width:36px;height:20px;flex:0 0 36px;border-radius:999px;background:var(--color-border-strong);transition:background var(--transition)}.profile-switch>span::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform var(--transition)}.profile-switch>input:checked+span{background:var(--color-primary)}.profile-switch>input:checked+span::after{transform:translateX(16px)}.profile-switch>div{display:grid;gap:2px}.profile-switch strong{font-size:10px}.profile-switch small{color:var(--color-muted);font-size:8.5px}
.profile-subscription-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;padding:20px;border:1px solid color-mix(in srgb,var(--color-green) 22%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-green) 5%,var(--color-surface));box-shadow:var(--shadow-sm)}.profile-subscription-hero>div{display:flex;align-items:center;gap:12px}.profile-subscription-hero>div>span:last-child{display:grid;gap:2px}.profile-subscription-hero h2,.profile-subscription-hero p{margin:0}.profile-subscription-hero h2{font-size:18px}.profile-subscription-hero p{color:var(--color-muted);font-size:10px}.profile-subscription-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.profile-subscription-progress{display:grid;gap:10px;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.profile-subscription-progress>div{display:flex;align-items:center;justify-content:space-between}.profile-subscription-progress>div>span{display:grid;gap:2px}.profile-subscription-progress strong{font-size:11px}.profile-subscription-progress small{color:var(--color-muted);font-size:9px}.profile-subscription-progress b{color:var(--color-green);font-size:11px}.profile-subscription-progress>span{height:7px;overflow:hidden;border-radius:999px;background:var(--color-surface-soft)}.profile-subscription-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-primary),var(--color-green))}.profile-admin-plan{display:flex;align-items:center;gap:14px;padding:24px}.profile-admin-plan>div{display:grid;gap:3px}.profile-admin-plan h2,.profile-admin-plan p{margin:0}.profile-admin-plan h2{font-size:18px}.profile-admin-plan p{color:var(--color-muted);font-size:10.5px}
@media(max-width:1200px){.profile-center-summary>div{display:none}.profile-tabs{grid-template-columns:repeat(3,1fr)}.profile-overview-grid{grid-template-columns:repeat(2,1fr)}.profile-overview-band{grid-template-columns:1fr}.profile-brand-layout,.profile-security-grid{grid-template-columns:1fr}.profile-brand-preview{min-height:260px}.profile-preference-section{grid-template-columns:1fr}.profile-subscription-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.profile-center-hero,.profile-subscription-hero{align-items:flex-start;flex-direction:column}.profile-center-summary{width:100%;justify-content:flex-start}.profile-tabs{display:flex;overflow-x:auto}.profile-tab{min-width:126px}.profile-overview-grid,.profile-form-grid,.profile-choice-grid,.profile-choice-grid.two-cols,.profile-accent-choices,.profile-inline-preferences,.profile-subscription-grid{grid-template-columns:1fr}.profile-facts{grid-template-columns:repeat(2,1fr)}.profile-facts>div:nth-child(2){border-right:0}.profile-facts>div:nth-child(-n+2){border-bottom:1px solid var(--color-border)}.profile-form-footer,.profile-end-sessions{align-items:stretch;grid-template-columns:1fr;flex-direction:column}.profile-form-footer .button,.profile-subscription-hero .button{width:100%;justify-content:center}.profile-field.span-2{grid-column:auto}.profile-logo-editor{align-items:flex-start;flex-direction:column}.profile-center-identity h1{font-size:22px}}

/* Global KPI cards: Credits and Algo Notifica are the V3 reference. */
.v3-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

:is(
    .credit-stat,
    .v3-metric-card,
    .history-stat,
    .support-stat,
    .streaming-metric,
    .reseller-kpi,
    .payment-health-card,
    .template-summary,
    .billing-card
) {
    --v3-card-tone: var(--color-blue);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 96px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--v3-card-tone) 18%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--v3-card-tone) 5%, var(--color-surface));
    box-shadow: var(--shadow-sm);
}

:is(.credit-stat, .v3-metric-card, .history-stat, .support-stat, .streaming-metric, .reseller-kpi, .payment-health-card, .template-summary, .billing-card):is(.tone-teal, .tone-cyan, .is-teal) { --v3-card-tone: var(--color-primary); }
:is(.credit-stat, .v3-metric-card, .history-stat, .support-stat, .streaming-metric, .reseller-kpi, .payment-health-card, .template-summary, .billing-card):is(.tone-blue, .is-blue, .is-total) { --v3-card-tone: var(--color-blue); }
:is(.credit-stat, .v3-metric-card, .history-stat, .support-stat, .streaming-metric, .reseller-kpi, .payment-health-card, .template-summary, .billing-card):is(.tone-green, .is-green, .is-active) { --v3-card-tone: var(--color-green); }
:is(.credit-stat, .v3-metric-card, .history-stat, .support-stat, .streaming-metric, .reseller-kpi, .payment-health-card, .template-summary, .billing-card):is(.tone-amber, .is-amber, .is-inactive) { --v3-card-tone: var(--color-amber); }
:is(.credit-stat, .v3-metric-card, .history-stat, .support-stat, .streaming-metric, .reseller-kpi, .payment-health-card, .template-summary, .billing-card):is(.tone-violet, .is-violet) { --v3-card-tone: var(--color-violet); }
:is(.credit-stat, .v3-metric-card, .history-stat, .support-stat, .streaming-metric, .reseller-kpi, .payment-health-card, .template-summary, .billing-card):is(.tone-red, .is-red) { --v3-card-tone: var(--color-red); }
:is(.credit-stat, .v3-metric-card, .history-stat, .support-stat, .streaming-metric, .reseller-kpi, .payment-health-card, .template-summary, .billing-card).tone-slate { --v3-card-tone: var(--color-text-soft); }

:is(
    .credit-stat-icon,
    .v3-metric-icon,
    .history-stat-icon,
    .support-stat-icon,
    .streaming-metric-icon,
    .reseller-kpi-icon,
    .payment-health-icon,
    .template-summary-icon,
    .billing-card-icon
) {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--v3-card-tone) 18%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--v3-card-tone) 13%, var(--color-surface));
    color: var(--v3-card-tone);
}

:is(
    .credit-stat-icon,
    .v3-metric-icon,
    .history-stat-icon,
    .support-stat-icon,
    .streaming-metric-icon,
    .reseller-kpi-icon,
    .payment-health-icon,
    .template-summary-icon,
    .billing-card-icon
) > svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(
    .credit-stat-copy,
    .v3-metric-copy,
    .history-stat > span:last-child,
    .support-stat > span:last-child,
    .streaming-metric > div,
    .reseller-kpi > div,
    .payment-health-card > div,
    .template-summary > div,
    .billing-card > div
) {
    display: grid;
    min-width: 0;
    gap: 2px;
}

:is(
    .credit-stat-copy,
    .v3-metric-copy,
    .history-stat > span:last-child,
    .support-stat > span:last-child,
    .streaming-metric > div,
    .reseller-kpi > div,
    .payment-health-card > div,
    .template-summary > div,
    .billing-card > div
) > small:first-child,
.streaming-metric > div > small,
.reseller-kpi > div > small,
.payment-health-card > div > small:first-child,
.template-summary > div > small:first-child,
.billing-card > div > span:first-child {
    color: color-mix(in srgb, var(--v3-card-tone) 78%, var(--color-text));
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

:is(
    .credit-stat-copy,
    .v3-metric-copy,
    .history-stat > span:last-child,
    .support-stat > span:last-child,
    .streaming-metric > div,
    .reseller-kpi > div,
    .payment-health-card > div,
    .template-summary > div,
    .billing-card > div
) > strong {
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: clamp(20px, 1.45vw, 25px);
    font-weight: 860;
    line-height: 1.1;
}

.credit-stat-copy > em,
.v3-metric-copy > em,
.history-stat > span:last-child > em,
.streaming-metric > div > span:last-child,
.reseller-kpi > div > p,
.payment-health-card > div > span,
.template-summary > div > span:last-child,
.billing-card > div > small:last-child {
    margin: 0;
    color: var(--color-muted);
    font-size: 9.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

/* Global icon watermarks for module heroes and KPI cards. */
:is(
    .credit-stat,
    .v3-metric-card,
    .history-stat,
    .support-stat,
    .streaming-metric,
    .reseller-kpi,
    .payment-health-card,
    .template-summary,
    .billing-card,
    .notify-metric
) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

:is(
    .credit-stat,
    .v3-metric-card,
    .history-stat,
    .support-stat,
    .streaming-metric,
    .reseller-kpi,
    .payment-health-card,
    .template-summary,
    .billing-card,
    .notify-metric
) > :not(.v3-card-watermark) {
    position: relative;
    z-index: 1;
}

:is(
    .credit-stat,
    .v3-metric-card,
    .history-stat,
    .support-stat,
    .streaming-metric,
    .reseller-kpi,
    .payment-health-card,
    .template-summary,
    .billing-card,
    .notify-metric
) > :is(.credit-stat-copy, .v3-metric-copy, div):not(.v3-card-watermark),
.history-stat > span:not(.history-stat-icon, .v3-card-watermark),
.support-stat > span:not(.support-stat-icon, .v3-card-watermark) {
    padding-right: 48px;
}

/* Sidebar footer uses one continuous surface instead of nested blocks. */
.sidebar-footer,
[data-theme="dark"] .sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.065);
    background: transparent;
    box-shadow: none;
}

.sidebar-workspace .tenant-card,
[data-theme="dark"] .sidebar-footer .tenant-card {
    background: transparent;
    box-shadow: none;
}

.sidebar-workspace .tenant-card {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    gap: 11px;
    padding-top: 10px;
    padding-bottom: 9px;
}

.sidebar-workspace .tenant-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.sidebar-workspace .tenant-name {
    font-size: 12.5px;
}

.sidebar-workspace .tenant-scope {
    padding: 2px 7px;
    font-size: 8px;
}

.sidebar-workspace .tenant-subscription {
    margin-top: 5px;
}

.sidebar-workspace .tenant-subscription > span,
.sidebar-workspace .tenant-subscription > small {
    font-size: 9px;
}

.sidebar-workspace .tenant-subscription > span strong {
    font-size: 9.5px;
}

.sidebar-workspace .tenant-subscription > i {
    height: 4px;
}

.sidebar-workspace .tenant-workspace-kind {
    display: block;
    min-width: 0;
    margin-top: 3px;
}

.sidebar-workspace .tenant-subscription {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin-top: 5px;
    color: #8ee8c2;
}

.sidebar-workspace .tenant-subscription > span {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
}

.sidebar-workspace .tenant-subscription svg {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.sidebar-workspace .tenant-subscription strong {
    color: rgba(236, 255, 248, 0.86);
    font-size: 9px;
    font-weight: 760;
}

.sidebar-workspace .tenant-subscription small {
    overflow: hidden;
    color: rgba(232, 245, 241, 0.62);
    font-size: 8.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-workspace .tenant-subscription > i {
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-workspace .tenant-subscription > i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #36d98a;
}

.sidebar-workspace .tenant-subscription.is-warning {
    color: #f4a928;
}

.sidebar-workspace .tenant-subscription.is-warning > i b {
    background: #f4a928;
}

.sidebar-workspace .tenant-subscription.is-danger {
    color: #ef5261;
}

.sidebar-workspace .tenant-subscription.is-danger > i b {
    background: #ef5261;
}

.sidebar-footer-actions {
    margin-top: 0;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
}

/* Compact workspace switcher in the sidebar footer. */
.sidebar-workspace {
    position: relative;
    display: block;
    margin-left: 0;
}

.sidebar-workspace > summary {
    list-style: none;
}

.sidebar-workspace > summary::-webkit-details-marker {
    display: none;
}

.sidebar-workspace .tenant-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 10px 10px 9px 26px;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
    transition: background var(--transition), box-shadow var(--transition);
}

.sidebar-workspace .tenant-card:hover,
.sidebar-workspace .tenant-card:focus-visible,
.sidebar-workspace[open] .tenant-card {
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    outline: none;
}

.sidebar-workspace .tenant-copy {
    gap: 3px;
}

.tenant-workspace-kind {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tenant-workspace-kind .tenant-role {
    font-size: 8.5px;
}

.tenant-workspace-chevron {
    width: 14px;
    height: 14px;
    color: rgba(232, 245, 241, 0.5);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform var(--transition), color var(--transition);
}

.sidebar-workspace[open] .tenant-workspace-chevron {
    color: #ffffff;
    transform: rotate(180deg);
}

.tenant-subscription {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    color: #8dc9e9;
}

.tenant-subscription > span {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 8.5px;
    white-space: nowrap;
}

.tenant-subscription > span > small {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: rgba(232, 245, 241, 0.62);
    font-size: 8.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-subscription > span svg {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.tenant-subscription > span strong {
    color: #d8eef9;
    font-size: 9px;
}

.tenant-subscription > small {
    color: rgba(232, 245, 241, 0.62);
    font-size: 8.5px;
    font-weight: 750;
    white-space: nowrap;
}

.tenant-subscription > i {
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.tenant-subscription > i > b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #36d98a;
}

.tenant-subscription.is-warning { color: #f6c35b; }
.tenant-subscription.is-warning > i > b { background: #f4a928; }
.tenant-subscription.is-danger { color: #fda4af; }
.tenant-subscription.is-danger > i > b { background: #ef5261; }

.sidebar-workspace-popover {
    position: absolute;
    z-index: 1100;
    right: 10px;
    bottom: calc(100% + 9px);
    left: 10px;
    overflow: hidden;
    border: 1px solid rgba(167, 207, 238, 0.16);
    border-radius: 10px;
    background: #151d27;
    color: #edf5fb;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
}

.sidebar-workspace:not([open]) .sidebar-workspace-popover {
    display: none;
}

.sidebar-workspace-popover header {
    display: grid;
    gap: 2px;
    padding: 12px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(120deg, rgba(70, 168, 220, 0.10), rgba(139, 92, 246, 0.06));
}

.sidebar-workspace-popover header span {
    color: rgba(226, 235, 244, 0.52);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.sidebar-workspace-popover header strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-workspace-popover nav {
    display: grid;
    padding: 6px;
}

.sidebar-workspace-popover a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 13px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 7px;
    color: #edf5fb;
    text-decoration: none;
}

.sidebar-workspace-popover a:hover,
.sidebar-workspace-popover a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.sidebar-workspace-popover a > svg:first-child {
    width: 16px;
    height: 16px;
    color: #75c5e9;
}

.sidebar-workspace-popover a > svg:last-child {
    width: 12px;
    height: 12px;
    color: rgba(226, 235, 244, 0.42);
}

.sidebar-workspace-popover svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sidebar-workspace-popover a > span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.sidebar-workspace-popover a strong {
    font-size: 10.5px;
}

.sidebar-workspace-popover a small {
    color: rgba(226, 235, 244, 0.5);
    font-size: 8.5px;
}

.sidebar-collapsed .sidebar-workspace {
    margin-inline: 0;
}

.sidebar-collapsed .sidebar-workspace .tenant-card {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 9px 0;
}

.sidebar-collapsed .tenant-workspace-chevron {
    display: none;
}

.sidebar-collapsed .sidebar-workspace-popover {
    position: fixed;
    right: auto;
    bottom: 54px;
    left: 94px;
    width: 238px;
}

/* Premium topbar: contextual navigation and consolidated account actions. */
.topbar {
    height: 74px;
    gap: 16px;
    padding: 12px 24px;
}

.topbar-title {
    min-width: 205px;
    gap: 2px;
}

.topbar-breadcrumb {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-breadcrumb b {
    margin: 0 4px;
    color: color-mix(in srgb, var(--color-muted) 55%, transparent);
    font-weight: 500;
}

.topbar-title strong {
    margin-top: 0;
    font-size: 17px;
}

.topbar-actions {
    gap: 8px;
}

.topbar .search-box {
    width: min(440px, 100%);
    height: 40px;
    margin-left: auto;
    box-shadow: none;
}

.search-box kbd {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 7px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.topbar .icon-button {
    width: 40px;
    height: 40px;
    box-shadow: none;
}

.topbar-account-trigger {
    min-height: 40px;
    padding: 3px 8px 3px 4px;
    cursor: pointer;
    color: var(--color-text);
}

.topbar-account-trigger:hover,
.topbar-account-trigger:focus-visible,
.topbar-account-trigger.is-open {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    background: var(--color-primary-soft);
    outline: none;
}

.topbar-account-trigger .profile-avatar {
    width: 32px;
    height: 32px;
}

.topbar-account-trigger .profile-role {
    display: flex;
    align-items: center;
    gap: 5px;
}

.topbar-account-trigger .profile-role b {
    color: var(--color-primary);
    font-size: 7px;
}

.topbar-account-chevron {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform var(--transition);
}

.topbar-account-trigger.is-open .topbar-account-chevron {
    transform: rotate(180deg);
}

.topbar-account-popover {
    width: min(310px, calc(100vw - 24px));
}

.topbar-account-heading {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-soft)), var(--color-surface));
}

.topbar-account-heading .profile-avatar-large {
    width: 44px;
    height: 44px;
}

.topbar-account-heading > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.topbar-account-heading strong,
.topbar-account-heading small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-account-heading strong {
    font-size: 13px;
}

.topbar-account-heading small {
    color: var(--color-muted);
    font-size: 10.5px;
}

.topbar-account-heading em {
    width: fit-content;
    margin-top: 3px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.topbar-account-links {
    display: grid;
    padding: 7px;
}

.topbar-account-links a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    padding: 9px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
}

.topbar-account-links a:hover,
.topbar-account-links a:focus-visible {
    background: var(--color-surface-soft);
    outline: none;
}

.topbar-account-links a > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.topbar-account-links svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.topbar-account-links a > svg {
    grid-column: 3;
    grid-row: 1 / 3;
    color: var(--color-muted);
}

.topbar-account-links b {
    align-self: end;
    font-size: 11.5px;
}

.topbar-account-links small {
    align-self: start;
    color: var(--color-muted);
    font-size: 9.5px;
}

.topbar-account-logout {
    padding: 8px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-soft);
}

.topbar-account-logout button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-red);
    cursor: pointer;
    text-align: left;
}

.topbar-account-logout button:hover,
.topbar-account-logout button:focus-visible {
    background: var(--color-red-soft);
    outline: none;
}

.topbar-account-logout svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.topbar-account-logout span {
    display: grid;
    gap: 1px;
}

.topbar-account-logout strong {
    font-size: 11.5px;
}

.topbar-account-logout small {
    color: var(--color-muted);
    font-size: 9.5px;
}

@media (max-width: 1180px) {
    .search-box kbd,
    .topbar-account-trigger .profile-role b,
    .topbar-account-trigger .profile-role {
        display: none;
    }
}

@media (max-width: 760px) {
    .topbar {
        height: 68px;
        padding: 10px 12px;
    }

    .topbar-breadcrumb {
        display: none;
    }

    .topbar-account-trigger {
        padding-right: 4px;
    }

    .topbar-account-chevron {
        display: none;
    }
}

/* Product identity is fixed; tenant artwork remains scoped to the workspace. */
.brand-mark.brand-mark-official {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    overflow: hidden;
    border: 1px solid rgba(178, 136, 255, 0.24);
    background: linear-gradient(145deg, rgba(143, 80, 222, 0.14), rgba(255, 255, 255, 0.045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.14);
}

.brand-mark.brand-mark-official img {
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
}

/* Full Algo Gestor lockup in the expanded sidebar; compact mode keeps the mark. */
.brand-lockup {
    display: block;
    width: 100%;
    height: 78px;
    flex: 1 1 auto;
    overflow: visible;
}

.brand-lockup img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.brand > .brand-mark.brand-mark-official {
    display: none;
}

.brand > .brand-copy {
    display: none;
}

.profile-logo-preview img,
.profile-center-avatar img,
.profile-preview-sidebar img {
    padding: 0;
    object-fit: contain;
}

/* Open sidebar keeps its breathing room only on the icon side. */
@media (min-width: 981px) {
    .app-shell:not(.sidebar-collapsed) .sidebar {
        padding-right: 0;
    }

    .app-shell:not(.sidebar-collapsed) .brand {
        padding-right: 18px;
    }

    .app-shell:not(.sidebar-collapsed) .nav-scroll {
        padding-right: 0;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-footer {
        margin-left: -18px;
        margin-right: 0;
        padding-left: 18px;
        padding-right: 0;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-footer > .tenant-card {
        margin-left: -18px;
        margin-right: 0;
        padding-left: 26px;
        padding-right: 10px;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-footer-actions {
        padding-right: 8px;
    }
}

.nav-scroll {
    scrollbar-color: transparent transparent;
}

.nav-scroll:hover,
.nav-scroll:focus-within {
    scrollbar-color: rgba(226, 235, 244, 0.16) transparent;
}

.nav-scroll::-webkit-scrollbar {
    width: 2px;
}

.nav-scroll:hover::-webkit-scrollbar-thumb,
.nav-scroll:focus-within::-webkit-scrollbar-thumb {
    background: rgba(226, 235, 244, 0.16);
}

.nav-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(226, 235, 244, 0.28);
}

/* Profile center: readable SaaS typography without increasing card density. */
.profile-center-identity p {
    font-size: 13px;
    line-height: 1.45;
}

.profile-center-summary small {
    font-size: 10.5px;
    line-height: 1.3;
}

.profile-center-summary strong {
    font-size: 13.5px;
}

.profile-tab {
    font-size: 12px;
}

.profile-overview-card small {
    font-size: 10.5px;
}

.profile-overview-card strong {
    font-size: 14px;
}

.profile-overview-card p {
    font-size: 11.5px;
    line-height: 1.4;
}

.profile-overview-status p,
.profile-section-header p,
.profile-subscription-hero p,
.profile-admin-plan p {
    font-size: 12px;
    line-height: 1.5;
}

.profile-facts dt {
    font-size: 10px;
}

.profile-facts dd {
    font-size: 12px;
}

.profile-field > span {
    font-size: 11.5px;
}

.profile-field input,
.profile-field select {
    font-size: 13px;
}

.profile-form-footer > span,
.profile-logo-editor small,
.profile-brand-preview > p {
    font-size: 11px;
    line-height: 1.5;
}

.profile-logo-editor strong,
.profile-preview-sidebar strong {
    font-size: 13px;
}

.profile-preview-sidebar small {
    font-size: 10px;
}

.profile-session strong {
    font-size: 12.5px;
}

.profile-session em {
    font-size: 9px;
}

.profile-session small {
    font-size: 10.5px;
    line-height: 1.4;
}

.profile-preference-section > div:first-child > strong {
    font-size: 13px;
}

.profile-preference-section > div:first-child > small {
    font-size: 11.5px;
    line-height: 1.5;
}

.profile-choice strong,
.profile-accent strong,
.profile-switch strong {
    font-size: 11.5px;
}

.profile-switch small {
    font-size: 10.5px;
    line-height: 1.4;
}

.profile-subscription-progress strong,
.profile-subscription-progress b {
    font-size: 12.5px;
}

.profile-subscription-progress small {
    font-size: 10.5px;
}

@media (max-width: 720px) {
    .profile-tab {
        font-size: 12px;
    }

    .profile-center-identity p,
    .profile-section-header p,
    .profile-subscription-hero p,
    .profile-admin-plan p {
        font-size: 12px;
    }
}

/* International phone input shared by customers and resellers. */
.phone-input {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 44px;
    overflow: visible;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.phone-input:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.phone-country {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-width: 72px;
    padding: 0 10px 0 12px;
    border-right: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 700;
    cursor: pointer;
}

.phone-country-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.phone-country-flag {
    flex: 0 0 auto;
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border-strong) 70%, transparent);
}

.phone-country-trigger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.phone-country-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 7px);
    left: -43px;
    width: min(270px, calc(100vw - 48px));
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.phone-country-menu[hidden] {
    display: none !important;
}

.phone-country-option {
    width: 100%;
    min-height: 32px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
}

.phone-country-option:hover,
.phone-country-option:focus-visible,
.phone-country-option.is-selected {
    outline: 0;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.phone-country-option img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
}

.phone-country-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-country-option strong {
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.phone-country-chevron {
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
}

.phone-country-chevron svg {
    width: 13px;
    height: 13px;
}

.phone-country .select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.phone-input-icon {
    display: grid;
    place-items: center;
    width: 42px;
    flex: 0 0 42px;
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary-soft) 62%, var(--color-surface));
    color: var(--color-primary-strong);
}

.phone-input-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.phone-input > .input {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
}

.phone-input > .input:focus {
    outline: 0;
    box-shadow: none;
}

.customer-initial-payment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .52fr);
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary-soft) 28%, var(--color-surface));
}

.customer-payment-toggle {
    padding: 0;
    border: 0;
    background: transparent;
}

.customer-payment-method {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.customer-payment-method > span {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
}

.customer-payment-method .select {
    min-height: 38px;
}

@media (max-width: 720px) {
    .customer-initial-payment {
        grid-template-columns: 1fr;
    }
}

/* Keep the two initial decisions visually independent from the payment method. */
#customer-create-dialog .customer-initial-payment {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    align-items: stretch;
    gap: 10px;
}

#customer-create-dialog .customer-payment-choice,
#customer-create-dialog .customer-payment-method {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary-soft) 22%, var(--color-surface));
}

#customer-create-dialog .customer-payment-choice {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 9px 11px;
}

#customer-create-dialog .customer-payment-choice .toggle-control {
    width: 100%;
    min-height: 0;
    gap: 9px;
}

#customer-create-dialog .customer-payment-choice.is-finance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(125px, .52fr);
    gap: 12px;
}

#customer-create-dialog .customer-payment-choice .toggle-copy strong {
    font-size: 12px;
    line-height: 1.25;
}

#customer-create-dialog .customer-payment-choice .toggle-copy small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
}

#customer-create-dialog .customer-payment-method {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

#customer-create-dialog .customer-payment-method[hidden] {
    display: none !important;
}

@media (max-width: 850px) {
    #customer-create-dialog .customer-initial-payment {
        grid-template-columns: 1fr;
    }

    #customer-create-dialog .customer-payment-choice.is-finance {
        grid-template-columns: minmax(0, 1fr) minmax(120px, .48fr);
    }
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* Direct customer messaging and per-instance call policy. */
.customer-message-dialog { width: min(610px, calc(100vw - 28px)); }
.customer-message-dialog .app-dialog-shell { box-shadow: 0 28px 80px rgba(4, 20, 18, .3); }
.customer-message-heading { display: flex !important; align-items: center; gap: 12px !important; }
.customer-message-heading > div { display: grid; gap: 2px; }
.customer-message-recipient { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-primary-soft) 52%, var(--color-surface)); }
.customer-message-recipient > div { display: grid; min-width: 0; gap: 2px; }
.customer-message-recipient small { color: var(--color-muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.customer-message-recipient strong { font-size: 13px; }
.customer-message-recipient > div > span { color: var(--color-muted); font-size: 11px; }
.customer-message-recipient > .badge { margin-left: auto; }
.customer-message-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 900; }
.customer-message-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.customer-message-fields .form-field { display: grid; gap: 6px; }
.customer-message-fields .form-field > span { font-size: 11px; font-weight: 800; }
.customer-message-preview { display: grid; gap: 8px; margin-top: 14px; padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); }
.customer-message-preview > span { display: flex; align-items: center; gap: 7px; color: var(--color-primary-strong); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.customer-message-preview svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.customer-message-preview p { min-height: 74px; margin: 0; color: var(--color-text-soft); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.call-settings { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); transition: border-color .18s ease, background .18s ease; }
.call-settings.is-enabled { border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); background: color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface)); }
.call-settings-heading { display: flex; align-items: center; gap: 11px; }
.call-settings-heading > div { display: grid; gap: 2px; min-width: 0; }
.call-settings-heading strong { font-size: 13px; }
.call-settings-heading small { color: var(--color-muted); font-size: 10.5px; }
.call-settings-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.call-settings-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.premium-switch { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto; cursor: pointer; }
.premium-switch input { position: absolute; opacity: 0; pointer-events: none; }
.premium-switch > span { position: relative; width: 38px; height: 22px; flex: 0 0 38px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-soft); transition: .18s ease; }
.premium-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-muted); transition: .18s ease; }
.premium-switch input:checked + span { border-color: var(--color-primary); background: var(--color-primary); }
.premium-switch input:checked + span::after { left: 19px; background: #fff; }
.premium-switch b { color: var(--color-text-soft); font-size: 11px; white-space: nowrap; }
.call-message-field { display: grid; gap: 6px; }
.call-message-field > span { font-size: 11px; font-weight: 800; }
.call-message-field textarea:disabled { cursor: not-allowed; opacity: .5; }

@media (max-width: 680px) {
    .customer-message-fields { grid-template-columns: 1fr; }
    .call-settings-heading { align-items: flex-start; flex-wrap: wrap; }
    .premium-switch { width: 100%; margin-left: 47px; }
    .customer-message-recipient > .badge { display: none; }
}

:is(
    .credit-stat,
    .v3-metric-card,
    .history-stat,
    .support-stat,
    .streaming-metric,
    .reseller-kpi,
    .payment-health-card,
    .template-summary,
    .billing-card,
    .notify-metric
) > .v3-card-watermark {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 0;
    width: 78px;
    height: 78px;
    color: var(--v3-card-tone);
    opacity: .09;
    pointer-events: none;
    transform: translateY(-50%);
}

:is(
    .credit-stat,
    .v3-metric-card,
    .history-stat,
    .support-stat,
    .streaming-metric,
    .reseller-kpi,
    .payment-health-card,
    .template-summary,
    .billing-card,
    .notify-metric
) > .v3-card-watermark > svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-theme="dark"] .v3-card-watermark {
    opacity: .12;
}

.module-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.module-hero > :not(.v3-hero-watermark) {
    position: relative;
    z-index: 1;
}

.v3-hero-watermark {
    position: absolute;
    top: 50%;
    right: 34px;
    z-index: 0;
    width: 128px;
    height: 128px;
    color: var(--color-primary);
    opacity: .055;
    pointer-events: none;
    transform: translateY(-50%);
}

.v3-hero-watermark > svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-theme="dark"] .v3-hero-watermark {
    opacity: .075;
}

@media (max-width: 820px) {
    .v3-hero-watermark {
        right: 18px;
        width: 108px;
        height: 108px;
    }
}

@media (max-width: 760px) {
    .v3-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .v3-metric-grid {
        grid-template-columns: 1fr;
    }
}

/* Stable copy selectors after the global watermark is appended. */
.history-stat > span:not(.history-stat-icon, .v3-card-watermark),
.support-stat > span:not(.support-stat-icon, .v3-card-watermark) {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    gap: 2px;
    padding-right: 48px;
}

/* SaaS governance, security and onboarding */
.governance-hero{position:relative;display:flex;align-items:center;gap:18px;min-height:132px;padding:24px 28px;margin-bottom:16px;border:1px solid var(--color-border);border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 8%,var(--color-surface)) 0,var(--color-surface) 45%);overflow:hidden}.governance-hero>div{flex:1}.governance-hero h1{margin:2px 0 4px;font-size:28px}.governance-hero p{margin:0;color:var(--color-muted)}.governance-metrics{margin-bottom:16px}.governance-metrics.four-cols{grid-template-columns:repeat(4,minmax(0,1fr))}.governance-panel{border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);overflow:hidden}.governance-panel>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--color-border)}.governance-panel>header h2{margin:2px 0;font-size:18px}.governance-panel>header p{margin:0;color:var(--color-muted)}.invite-link{display:flex;align-items:center;gap:18px;padding:14px 18px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--color-green) 42%,var(--color-border));border-radius:8px;background:color-mix(in srgb,var(--color-green) 8%,var(--color-surface))}.invite-link div{display:flex;flex:1;flex-direction:column}.invite-link input{min-width:45%;padding:10px 12px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-soft);color:var(--color-text)}.governance-list{padding:8px 22px 18px}.team-member{display:grid;grid-template-columns:42px minmax(180px,1fr) 150px 120px auto 38px;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-border)}.team-avatar{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 18%,var(--color-surface-soft));color:var(--color-primary);font-weight:800}.team-identity{display:flex;flex-direction:column}.team-identity small{color:var(--color-muted)}.team-member select{height:40px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-soft);color:var(--color-text);padding:0 10px}.team-permissions{position:relative}.team-permissions summary{cursor:pointer;color:var(--color-primary);font-weight:700}.team-permissions>div{position:absolute;z-index:40;right:0;top:28px;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px;width:390px;padding:14px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);box-shadow:var(--shadow-md)}.team-permissions label{display:flex;gap:7px;font-size:12px}.compact-dialog{width:min(620px,calc(100vw - 24px))}.compact-dialog header{display:flex;align-items:center;gap:14px}.compact-dialog header>div{flex:1}.compact-dialog header>button{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-soft);color:var(--color-text)}.dialog-body.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px}.dialog-body label{display:flex;flex-direction:column;gap:7px;font-weight:700}.dialog-body input,.dialog-body select{height:44px;padding:0 12px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-soft);color:var(--color-text)}.span-2{grid-column:span 2}.compact-dialog footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--color-border)}
.operations-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.operation-list{padding:0 20px}.operation-list article{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-border)}.operation-list article>div{display:flex;flex:1;flex-direction:column;min-width:0}.operation-list article>div small{overflow:hidden;color:var(--color-muted);text-overflow:ellipsis;white-space:nowrap}.operation-list article>span:last-child{display:flex;align-items:flex-end;flex-direction:column}.status-dot{width:9px;height:9px;border-radius:50%}.status-danger{background:var(--color-red)}.status-success{background:var(--color-green)}.status-warning{background:var(--color-amber)}
.operations-status-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.backup-status{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.backup-status>div{display:flex;flex-direction:column}.backup-status small{color:var(--color-muted)}.backup-status.is-ready{border-color:color-mix(in srgb,var(--color-green) 35%,var(--color-border))}.backup-status.is-warning{border-color:color-mix(in srgb,var(--color-amber) 35%,var(--color-border))}
.privacy-datasets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.privacy-datasets article{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.privacy-datasets article>div{display:flex;flex:1;flex-direction:column;min-width:110px}.privacy-datasets small{color:var(--color-muted)}.privacy-datasets .button{width:100%;justify-content:center}.security-checklist{display:grid;gap:14px;padding:20px;list-style:none}.security-checklist li{display:flex;gap:12px}.security-checklist li>svg{width:20px;color:var(--color-green)}.security-checklist span{display:flex;flex-direction:column}.security-checklist small{color:var(--color-muted)}.danger-zone form{display:flex;flex-direction:column;gap:12px;padding:20px}.danger-zone textarea{min-height:110px;padding:12px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-soft);color:var(--color-text)}
.import-workspace{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-bottom:16px}.import-uploader,.import-guide{padding:22px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.import-uploader{display:grid;grid-template-columns:1fr 1fr;gap:16px}.import-uploader>div{grid-column:span 2}.import-uploader h2{margin:8px 0 2px}.import-uploader p{margin:0;color:var(--color-muted)}.import-uploader label{display:flex;flex-direction:column;gap:7px;font-weight:700}.import-uploader input,.import-uploader select{min-height:44px;padding:10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface-soft);color:var(--color-text)}.import-uploader .button{grid-column:span 2;justify-self:end}.import-guide{display:flex;flex-direction:column;gap:13px}.import-guide>div{display:flex;flex-direction:column;gap:5px}.import-guide code{overflow:auto;padding:9px;border-radius:5px;background:var(--color-surface-soft);color:var(--color-primary);font-size:11px}.import-preview{margin-top:16px}.import-preview .table-shell{margin:16px}.import-preview table{width:100%;border-collapse:collapse}.import-preview th,.import-preview td{padding:11px;border-bottom:1px solid var(--color-border);text-align:left}
.two-factor-panel{grid-column:1/-1}.two-factor-setup{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}.two-factor-setup img{width:220px;border-radius:8px;background:#fff}.two-factor-setup>div{display:flex;flex-direction:column;gap:12px}.two-factor-setup small{display:flex;flex-direction:column;gap:5px;color:var(--color-muted)}.recovery-codes{padding:18px;border:1px solid color-mix(in srgb,var(--color-amber) 45%,var(--color-border));border-radius:8px;background:color-mix(in srgb,var(--color-amber) 8%,var(--color-surface))}.recovery-codes code{display:block;margin-top:10px;line-height:2;color:var(--color-amber)}.security-enabled{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:14px;border:1px solid color-mix(in srgb,var(--color-green) 40%,var(--color-border));border-radius:8px;background:color-mix(in srgb,var(--color-green) 8%,var(--color-surface))}.security-enabled>svg{width:24px;color:var(--color-green)}.security-enabled>div{display:flex;flex-direction:column}.auth-card.two-factor-card{max-width:440px}
@media(max-width:1100px){.privacy-datasets{grid-template-columns:repeat(2,1fr)}.governance-metrics.four-cols{grid-template-columns:repeat(2,1fr)}.team-member{grid-template-columns:42px 1fr 130px 110px}.team-permissions{grid-column:2/4}.operations-grid,.import-workspace{grid-template-columns:1fr}}@media(max-width:700px){.governance-hero{align-items:flex-start;flex-wrap:wrap;padding:20px}.governance-hero h1{font-size:23px}.privacy-datasets,.governance-metrics.four-cols{grid-template-columns:1fr}.team-member{grid-template-columns:38px 1fr}.team-member select,.team-permissions,.team-member>.action-button{grid-column:2}.team-permissions>div{position:static;width:auto;grid-template-columns:1fr}.two-factor-setup{grid-template-columns:1fr}.import-uploader{grid-template-columns:1fr}.import-uploader>div,.import-uploader .button{grid-column:auto}}
/* Auth V3 --------------------------------------------------------------- */
.auth-v3.auth-body {
    min-height: 100dvh;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 48px;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-v3::before,
.auth-v3::after {
    display: none;
}

.auth-topbar {
    width: 100%;
    padding: 0 clamp(20px, 4vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    box-sizing: border-box;
}

.auth-product {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text);
    text-decoration: none;
}

.auth-product-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface-soft);
}

.auth-product-mark img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.auth-product > span:last-child {
    display: grid;
    gap: 2px;
}

.auth-product strong {
    font-size: 15px;
    line-height: 1.2;
}

.auth-product small {
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.2;
}

.auth-theme-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.auth-theme-toggle:hover {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
    background: var(--color-surface-soft);
}

.auth-theme-toggle svg {
    width: 19px;
    height: 19px;
}

[data-theme="light"] .auth-theme-dark,
[data-theme="dark"] .auth-theme-light {
    display: none;
}

.auth-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 0;
    padding: 22px 20px 28px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-primary) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 3.5%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    overflow: hidden;
}

.auth-stage::before {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 96vw;
    aspect-ratio: 1312 / 396;
    background: url('/assets/img/algo-gestor-lockup-sidebar-test.png') center / contain no-repeat;
    content: "";
    opacity: .024;
    filter: grayscale(1) contrast(.9);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

[data-theme="dark"] .auth-stage {
    background-image:
        linear-gradient(rgba(54, 190, 185, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54, 190, 185, .035) 1px, transparent 1px);
}

[data-theme="dark"] .auth-stage::before {
    opacity: .028;
}

.auth-login-panel {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    padding: 24px 28px 22px;
    display: grid;
    gap: 18px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
}

.auth-login-header {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.auth-login-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 3px;
    display: grid;
    place-items: center;
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
}

.auth-login-icon svg {
    width: 23px;
    height: 23px;
}

.auth-login-header .eyebrow {
    color: var(--color-primary);
    font-size: 11px;
    letter-spacing: 0;
}

.auth-login-header h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 26px;
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: 0;
}

.auth-login-header p {
    max-width: 340px;
    margin: 0;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.5;
}

.auth-feedback {
    min-height: 42px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.35;
}

.auth-feedback svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.auth-feedback.is-success {
    color: var(--color-green);
    border-color: color-mix(in srgb, var(--color-green) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-green) 9%, var(--color-surface));
}

.auth-feedback.is-danger {
    color: var(--color-red);
    border-color: color-mix(in srgb, var(--color-red) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-red) 9%, var(--color-surface));
}

.auth-v3-form {
    width: 100%;
    display: grid;
    gap: 16px;
}

.auth-field {
    display: grid;
    gap: 7px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
}

.auth-v3 .auth-form label.auth-field,
.auth-v3 .auth-form label.auth-remember {
    color: var(--color-text);
}

.auth-v3 svg:not(.auth-product-mark svg) {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-input-shell {
    min-height: 48px;
    padding: 0 13px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 7px;
    background: #151b26;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-input-shell:focus-within {
    border-color: #8f7cff;
    background: #171d2a;
    box-shadow: 0 0 0 3px rgba(143, 124, 255, .14);
}

.auth-input-shell.is-invalid {
    border-color: var(--color-red);
}

.auth-input-shell > svg {
    width: 18px;
    height: 18px;
    color: var(--color-muted);
}

.auth-input-shell input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0;
    color: var(--color-text);
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 450;
    letter-spacing: 0;
}

.auth-input-shell input::placeholder {
    color: var(--color-muted);
    opacity: .86;
}

.auth-password-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--color-muted);
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.auth-password-toggle:hover {
    color: var(--color-primary);
    background: var(--color-surface-soft);
}

.auth-password-toggle svg {
    width: 18px;
    height: 18px;
}

.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-soft);
    cursor: pointer;
}

.auth-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-remember > span {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background: var(--color-bg-elevated);
}

.auth-remember input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 4px var(--color-primary), inset 0 0 0 6px #fff;
}

.auth-remember input:focus-visible + span {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.auth-remember strong,
.auth-account-note {
    font-size: 11px;
    font-weight: 550;
}

.auth-v3 .auth-remember strong {
    color: var(--color-text-soft);
}

.auth-account-note {
    color: var(--color-muted);
    text-align: right;
}

.auth-primary-button {
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    border: 1px solid #7e6cf0;
    border-radius: 7px;
    background: linear-gradient(135deg, #6f5bd3, #4e83dc);
    box-shadow: 0 9px 22px rgba(89, 95, 210, .22);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.auth-turnstile-wrap {
    min-height: 48px;
    padding: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
    overflow: hidden;
    border: 0;
    background: transparent;
}

.auth-turnstile-wrap.is-invalid {
    padding: 6px 8px;
    border: 1px solid var(--color-red);
    border-radius: 7px;
    background: color-mix(in srgb, var(--color-red) 7%, var(--color-surface));
}

.auth-turnstile-wrap .cf-turnstile {
    width: 100%;
    min-height: 48px;
}

.auth-turnstile-wrap .field-error {
    width: 100%;
    color: var(--color-red);
    font-size: 11px;
    text-align: left;
}

.auth-primary-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 11px 26px color-mix(in srgb, var(--color-primary) 27%, transparent);
}

.auth-primary-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
    outline-offset: 2px;
}

.auth-primary-button:disabled {
    opacity: .82;
    cursor: wait;
    transform: none;
}

.auth-button-spinner {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, .42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spinner .72s linear infinite;
}

.auth-button-spinner[hidden] {
    display: none;
}

@keyframes auth-spinner {
    to { transform: rotate(360deg); }
}

.auth-primary-button svg {
    width: 17px;
    height: 17px;
}

.auth-security-note {
    padding-top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text-soft);
    border-top: 1px solid var(--color-border);
}

.auth-security-note > svg {
    width: 18px;
    height: 18px;
    color: var(--color-green);
    flex: 0 0 auto;
}

.auth-security-note > span {
    display: grid;
    gap: 2px;
}

.auth-security-note strong {
    font-size: 11px;
}

.auth-security-note small {
    color: var(--color-muted);
    font-size: 10px;
    line-height: 1.35;
}

/* Global metric cards: improve readability without competing with values. */
.stat-label {
    font-size: 13px;
    font-weight: 720;
}

.stat-caption {
    font-size: 13.5px;
    font-weight: 600;
}

:is(.credit-stat-copy, .v3-metric-copy) small,
:is(.history-stat, .support-stat) small,
.reseller-kpi > div > small,
.payment-health-card small,
.template-summary small,
.billing-card small {
    font-size: 11px;
    font-weight: 650;
}

:is(.credit-stat-copy, .v3-metric-copy) em,
.history-stat em,
.support-stat em {
    font-size: 11px;
    font-weight: 600;
}

.auth-page-footer {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
}

.auth-page-footer b {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Keep the login card fully reachable when the security widget increases its height. */
.auth-v3.auth-body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.auth-v3 .auth-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px 20px 44px;
}

.auth-v3 .auth-login-panel {
    flex: 0 0 auto;
    margin: 0;
    width: min(440px, 100%);
    padding: 24px 28px 22px;
}

.auth-v3 .auth-page-footer {
    gap: 12px;
    transform: translateY(-14px);
    font-size: 12px;
    font-weight: 650;
}

@media (max-height: 760px) {
    .auth-v3 .auth-stage {
        align-items: flex-start;
        padding-top: 24px;
        padding-bottom: 28px;
    }

    .auth-v3 .auth-login-panel {
        padding: 24px 28px 22px;
    }
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.auth-back-link:hover {
    color: var(--color-primary);
}

.auth-back-link svg {
    width: 16px;
    height: 16px;
}

.auth-two-factor-panel .auth-input-shell input {
    text-align: center;
    font-size: 17px;
    letter-spacing: 0;
}

@media (max-width: 600px) {
    .auth-v3.auth-body {
        grid-template-rows: minmax(0, 1fr) 40px;
    }

    .auth-topbar {
        padding: 0 16px;
    }

    .auth-product-mark {
        width: 40px;
        height: 40px;
    }

    .auth-product-mark img {
        width: 34px;
        height: 34px;
    }

    .auth-stage {
        padding: 20px 14px;
        background-size: 34px 34px;
    }

    .auth-stage::before {
        display: none;
    }

    .auth-login-panel {
        padding: 22px 18px;
        gap: 19px;
    }

    .auth-login-header h1 {
        font-size: 25px;
    }

    .auth-form-options {
        align-items: flex-start;
    }

    .auth-account-note {
        max-width: 112px;
    }

    .auth-page-footer span:not(:first-child),
    .auth-page-footer b {
        display: none;
    }
}

/* Global V3 dialog standard, approved on the customer workflow. */
.crud-create-dialog:not(#customer-create-dialog),
#manager-panel-create-dialog,
#saas-plan-dialog,
.premium-dialog#team-create {
    width: min(820px, calc(100vw - 28px));
}

:is(.crud-create-dialog, #manager-panel-create-dialog, #saas-plan-dialog) :is(.app-dialog-shell, .manager-dialog-shell),
.premium-dialog#team-create > form {
    max-height: min(780px, calc(100vh - 28px));
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 28px 80px rgba(2, 12, 24, .42);
}

:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-dialog-header,
.premium-dialog#team-create > form > header {
    min-height: 70px;
    padding: 16px 54px 14px 20px;
    border-bottom: 1px solid var(--color-border);
}

:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-dialog-icon,
.premium-dialog#team-create .module-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary-soft) 58%, var(--color-surface));
    color: var(--color-primary);
}

:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-dialog-header strong,
.premium-dialog#team-create > form > header h2 {
    font-size: 20px;
    line-height: 1.15;
}

:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-dialog-header small,
.premium-dialog#team-create > form > header p {
    color: var(--color-muted);
    font-size: 11.5px;
}

.crud-create-dialog:not(#customer-create-dialog) .app-dialog-body,
:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-dialog-body,
.premium-dialog#team-create .dialog-body {
    padding: 18px 20px 20px;
}

.crud-create-dialog:not(#customer-create-dialog) .crud-modal-sections,
.crud-create-dialog:not(#customer-create-dialog) .server-modal-sections {
    gap: 15px;
}

.crud-create-dialog:not(#customer-create-dialog) .crud-form-section,
#manager-panel-create-dialog .manager-form-section,
#saas-plan-dialog .saas-plan-form-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.crud-create-dialog:not(#customer-create-dialog) .crud-form-section::before {
    display: none;
}

.crud-create-dialog:not(#customer-create-dialog) .crud-form-section + .crud-form-section,
#manager-panel-create-dialog .manager-form-section + .manager-form-section,
#saas-plan-dialog .saas-plan-form-section + .saas-plan-form-section {
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.crud-create-dialog:not(#customer-create-dialog) .crud-section-heading,
:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-form-section-title {
    margin-bottom: 10px;
}

.crud-create-dialog:not(#customer-create-dialog) .crud-section-heading > span,
:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-form-section-title > span {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: var(--radius-md);
}

.crud-create-dialog:not(#customer-create-dialog) :is(.input, .select, .textarea),
:is(#manager-panel-create-dialog, #saas-plan-dialog) :is(.manager-field > div, .manager-field-textarea),
.premium-dialog#team-create :is(input, select) {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-soft) 72%, var(--color-surface));
}

.crud-create-dialog:not(#customer-create-dialog) :is(.input, .select):focus,
:is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-field > div:focus-within,
.premium-dialog#team-create :is(input, select):focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.crud-create-dialog:not(#customer-create-dialog) .crud-observation,
.streaming-dialog .stream-observation {
    overflow: hidden;
    border-top: 1px solid var(--color-border);
}

.collapsible-observation {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-soft) 62%, var(--color-surface));
}

.collapsible-observation summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    list-style: none;
    color: var(--color-text-soft);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.collapsible-observation summary::-webkit-details-marker {
    display: none;
}

.collapsible-observation summary:hover {
    color: var(--color-primary-strong);
}

.collapsible-observation-toggle {
    position: relative;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.collapsible-observation-toggle::before,
.collapsible-observation-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 160ms ease, opacity 160ms ease;
}

.collapsible-observation-toggle::before {
    width: 10px;
    height: 2px;
}

.collapsible-observation-toggle::after {
    width: 2px;
    height: 10px;
}

.collapsible-observation[open] .collapsible-observation-toggle::after {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0);
}

.collapsible-observation-body {
    padding: 0 12px 12px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
}

.collapsible-observation-body .textarea {
    width: 100%;
    min-height: 82px;
    margin-top: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
}

.collapsible-observation-body .field-error {
    display: block;
    margin-top: 6px;
    color: var(--color-red);
    font-size: 10.5px;
    font-weight: 700;
}

.reseller-quick-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--color-blue) 22%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-blue-soft) 34%, var(--color-surface));
}

.reseller-quick-action > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.reseller-quick-action strong {
    color: var(--color-text);
    font-size: 12px;
}

.reseller-quick-action small {
    color: var(--color-muted);
    font-size: 10.5px;
    line-height: 1.35;
}

.reseller-quick-action .button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
}

.reseller-credit-dialog .app-dialog-body {
    display: grid;
    gap: 12px;
}

@media (min-width: 640px) {
    .reseller-quick-action {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .reseller-quick-action .button {
        grid-column: auto;
        width: auto;
    }
}

.streaming-activation-dialog .streaming-form-sections > section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.streaming-activation-dialog .streaming-form-sections > section + section {
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

:is(.crud-create-dialog, #manager-panel-create-dialog, #saas-plan-dialog) :is(.app-dialog-footer, .manager-dialog-footer) {
    min-height: 66px;
    padding: 13px 20px;
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

:is(.crud-create-dialog, #manager-panel-create-dialog, #saas-plan-dialog) :is(.app-dialog-footer, .manager-dialog-footer) .button {
    min-width: 126px;
    min-height: 40px;
}

.crud-create-dialog .button-success,
#manager-panel-create-dialog .button-success,
#saas-plan-dialog .button-success,
.premium-dialog#team-create .button-success {
    color: #06261f;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-success) 18%, transparent);
}

@media (max-width: 620px) {
    .crud-create-dialog:not(#customer-create-dialog),
    #manager-panel-create-dialog,
    #saas-plan-dialog,
    .premium-dialog#team-create {
        width: calc(100vw - 16px);
    }

    .crud-create-dialog:not(#customer-create-dialog) .app-dialog-body,
    :is(#manager-panel-create-dialog, #saas-plan-dialog) .manager-dialog-body,
    .premium-dialog#team-create .dialog-body {
        padding: 14px;
    }

    #manager-panel-create-dialog :is(.manager-form-grid, .manager-form-grid-three),
    #saas-plan-dialog :is(.manager-form-grid, .manager-form-grid-three),
    .premium-dialog#team-create .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Server detail: operational information with the V3 premium hierarchy. */
.server-detail-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
}

.server-detail-hero::after {
    content: "";
    position: absolute;
    right: 34px;
    bottom: -58px;
    width: 190px;
    height: 190px;
    border: 24px solid color-mix(in srgb, var(--color-amber) 8%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.server-detail-hero .module-hero-copy,
.server-detail-hero .server-head-actions {
    position: relative;
    z-index: 1;
}

.server-detail-hero .back-link {
    width: max-content;
    margin-bottom: 7px;
    color: var(--color-amber);
    font-size: 12px;
    font-weight: 800;
}

.server-detail-hero .page-kicker {
    margin-bottom: 1px;
}

.server-detail-hero h1 {
    margin: 0 0 3px;
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.1;
}

.server-detail-hero .server-status {
    min-height: 32px;
    padding: 6px 12px;
}

.server-kpi-grid.v3-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.server-kpi-grid .v3-metric-card {
    min-height: 118px;
}

.server-kpi-grid .v3-metric-copy strong {
    font-size: clamp(22px, 2vw, 28px);
}

.server-overview-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
}

.server-overview-card > .panel-header {
    align-items: center;
    margin-bottom: 18px;
}

.server-panel-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.server-panel-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid color-mix(in srgb, var(--panel-tone) 24%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--panel-tone) 12%, var(--color-surface));
    color: var(--panel-tone);
}

.server-panel-icon.tone-blue { --panel-tone: var(--color-blue); }
.server-panel-icon.tone-green { --panel-tone: var(--color-green); }
.server-panel-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }

.server-result,
.server-connection-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.server-result.is-positive { background: var(--color-green-soft); }
.server-result.is-negative { background: var(--color-red-soft); }
.server-connection-state.is-connected { color: var(--color-green); background: var(--color-green-soft); }
.server-connection-state.is-manual { color: var(--color-amber); background: var(--color-amber-soft); }
.server-connection-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }

.server-finance-highlight {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.server-finance-highlight > span {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-soft) 70%, var(--color-surface));
}

.server-finance-highlight small {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.server-finance-highlight strong {
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-overview-card .server-summary-list,
.server-overview-card .server-integration-list {
    border-radius: var(--radius-md);
}

.server-overview-card :is(.server-summary-list, .server-integration-list) > div {
    min-height: 67px;
    justify-content: center;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-soft));
}

.server-overview-card :is(.server-summary-list, .server-integration-list) span {
    font-size: 10px;
    text-transform: uppercase;
}

.server-overview-card :is(.server-summary-list, .server-integration-list) strong {
    font-size: 14px;
}

.server-integration-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 86px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--color-green) 18%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-green) 5%, var(--color-surface));
}

.server-integration-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--radius-md);
    background: var(--color-green-soft);
    color: var(--color-green);
}

.server-integration-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.server-integration-summary > div { display: grid; gap: 2px; min-width: 0; }
.server-integration-summary small { color: var(--color-green); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.server-integration-summary strong { font-size: 17px; }
.server-integration-summary p { margin: 0; color: var(--color-muted); font-size: 11px; }

/* Plan details: keep the empty linked-client state informative but compact. */
.plan-table-panel td[colspan] > .empty-state {
    min-height: 124px;
    margin: 8px;
}

.plan-table-panel td[colspan] > .empty-state strong {
    font-size: 14px;
}

.plan-table-panel td[colspan] > .empty-state span {
    font-size: 11px;
}

.server-operation-area {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.server-operation-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.server-operation-toolbar h2,
.server-operation-toolbar p { margin: 0; }
.server-operation-toolbar h2 { font-size: 18px; }
.server-operation-toolbar > div:first-child > p:last-child { margin-top: 3px; color: var(--color-muted); font-size: 11px; }
.server-operation-actions { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 10px; min-width: min(610px, 58%); }

.server-operation-button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.server-operation-button:hover { transform: translateY(-2px); border-color: var(--operation-tone); background: color-mix(in srgb, var(--operation-tone) 7%, var(--color-surface)); box-shadow: var(--shadow-sm); }
.server-operation-button > span { display: grid; place-items: center; width: 36px; height: 36px; grid-row: span 2; border-radius: var(--radius-md); background: color-mix(in srgb, var(--operation-tone) 14%, var(--color-surface)); color: var(--operation-tone); }
.server-operation-button > span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.server-operation-button strong { font-size: 12px; }
.server-operation-button small { color: var(--color-muted); font-size: 10px; }
.server-operation-button.is-purchase { --operation-tone: var(--color-green); }
.server-operation-button.is-sale { --operation-tone: var(--color-blue); }
.server-operation-button.is-adjust { --operation-tone: var(--color-amber); }

.server-operation-dialog { width: min(560px, calc(100vw - 28px)); }
.server-operation-dialog .app-dialog-body { display: grid; gap: 14px; padding: 18px 20px 20px; }
.server-operation-dialog .app-dialog-footer { margin: 4px -20px -20px; }

@media (max-width: 900px) {
    .server-operation-toolbar { align-items: stretch; flex-direction: column; }
    .server-operation-actions { min-width: 0; width: 100%; }
}

@media (max-width: 560px) {
    .server-operation-area { padding: 16px; }
    .server-operation-actions { grid-template-columns: 1fr; }
    .server-operation-dialog .app-dialog-body { padding: 16px; }
    .server-operation-dialog .app-dialog-footer { margin: 4px -16px -16px; }
}

@media (max-width: 1100px) {
    .server-kpi-grid.v3-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .server-detail-hero { align-items: flex-start; }
    .server-detail-hero .server-head-actions { width: 100%; }
    .server-detail-hero .server-head-actions .button { flex: 1; }
    .server-kpi-grid.v3-metric-grid,
    .server-finance-highlight { grid-template-columns: 1fr; }
    .server-overview-card { padding: 16px; }
    .server-overview-card > .panel-header { align-items: flex-start; }
}

/* Global confirmation dialog */
body.has-global-confirm { overflow: hidden; }

.global-confirm {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.global-confirm[hidden] { display: none !important; }

.global-confirm-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(5, 12, 22, .68);
    backdrop-filter: blur(6px);
    cursor: default;
}

.global-confirm-panel {
    position: relative;
    width: min(500px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    gap: 0 14px;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 30px 90px rgba(2, 10, 22, .42);
    color: var(--color-text);
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition: opacity 160ms ease, transform 160ms ease;
}

.global-confirm.is-open .global-confirm-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.global-confirm-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 22px 0 0 22px;
    border: 1px solid color-mix(in srgb, var(--color-amber) 28%, var(--color-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-amber) 12%, var(--color-surface));
    color: var(--color-amber);
}

.global-confirm.is-danger .global-confirm-icon {
    border-color: color-mix(in srgb, var(--color-red) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-red) 12%, var(--color-surface));
    color: var(--color-red);
}

.global-confirm-icon svg,
.global-confirm-close svg,
.global-confirm-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.global-confirm-copy {
    min-width: 0;
    padding: 21px 0 22px 22px;
}

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

.global-confirm-copy h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.global-confirm-copy p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-line;
}

.global-confirm-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 11px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--color-red) 24%, var(--color-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-red) 7%, var(--color-surface-soft));
}

.global-confirm-warning svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--color-red);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.global-confirm-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 14px 14px 0 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-soft);
    color: var(--color-muted);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.global-confirm-close:hover {
    border-color: var(--color-red);
    background: var(--color-red-soft);
    color: var(--color-red);
}

.global-confirm-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-soft) 55%, var(--color-surface));
}

.global-confirm-cancel,
.global-confirm-submit {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.global-confirm-cancel {
    background: var(--color-surface);
    color: var(--color-text);
}

.global-confirm-cancel:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.global-confirm-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 9px 24px color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.global-confirm.is-danger .global-confirm-submit {
    border-color: var(--color-red);
    background: var(--color-red);
    box-shadow: 0 9px 24px color-mix(in srgb, var(--color-red) 24%, transparent);
}

.global-confirm-cancel:hover,
.global-confirm-submit:hover { transform: translateY(-1px); }

.global-confirm-cancel:focus-visible,
.global-confirm-submit:focus-visible,
.global-confirm-close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
    outline-offset: 2px;
}

.server-actions .server-action.is-purchase { background: var(--color-green) !important; color: #fff !important; }
.server-actions .server-action.is-sale { background: var(--color-amber) !important; color: #fff !important; }
.server-actions .server-action.is-adjust { background: var(--color-blue) !important; color: #fff !important; }
.server-actions .server-action.is-view { background: var(--color-blue) !important; color: #fff !important; }
.server-actions .server-action.is-edit { background: var(--color-violet) !important; color: #fff !important; }
.server-actions .server-action.is-delete { background: var(--color-red) !important; color: #fff !important; }
.server-actions .server-action.is-purchase:hover,
.server-actions .server-action.is-sale:hover,
.server-actions .server-action.is-adjust:hover { filter: brightness(1.08); transform: translateY(-1px); }
.server-operation-dialog { z-index: 1200; }

/* Unified edit experience for plans, servers, resellers and generic modules. */
.global-edit-dialog { width: min(820px, calc(100vw - 28px)); max-height: calc(100vh - 28px); }
.global-edit-dialog .app-dialog-shell { max-height: calc(100vh - 28px); box-shadow: 0 28px 80px rgba(2, 12, 24, .42); }
.global-edit-dialog .app-dialog-header { padding: 17px 54px 14px 20px; }
.global-edit-dialog .app-dialog-header > .icon-button { position: absolute; top: 15px; right: 16px; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-surface-soft); color: var(--color-muted); }
.global-edit-dialog .app-dialog-header > .icon-button:hover { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.global-edit-dialog .crud-dialog-icon { font-size: 20px; line-height: 1; }
.global-edit-dialog .crud-dialog-heading strong { font-size: 21px; line-height: 1.1; }
.global-edit-dialog .crud-dialog-heading small { font-size: 12px; line-height: 1.35; }
.global-edit-dialog-body { max-height: calc(100vh - 112px); overflow-y: auto; padding: 18px 20px 20px; }
.global-edit-form { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.global-edit-form .form-grid,
.global-edit-form .server-form-grid,
.global-edit-form .reseller-form-grid { display: grid; gap: 12px; }
.global-edit-form .panel-header { display: none; }
.global-edit-form .form-actions { position: sticky; bottom: -20px; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; margin: 4px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.global-edit-form .form-actions .button { min-width: 126px; }
.global-edit-form .form-field { min-width: 0; }
.global-edit-control { display: flex; align-items: stretch; width: 100%; min-height: 42px; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface-soft) 72%, var(--color-surface)); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.global-edit-control:focus-within { border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); }
.global-edit-control .v1-field-icon { display: grid; place-items: center; width: 42px; min-height: 42px; flex: 0 0 42px; border-right: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent); color: var(--color-primary); }
.global-edit-control .v1-field-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.global-edit-control > .input,
.global-edit-control > .select,
.global-edit-control > .textarea { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.global-edit-control > .textarea { min-height: 88px; padding-top: 12px; }
.global-edit-observation { grid-column: 1 / -1; }
.global-edit-observation summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-soft); color: var(--color-text-soft); cursor: pointer; list-style: none; }
.global-edit-observation summary::-webkit-details-marker { display: none; }
.global-edit-observation summary > span { display: grid; gap: 2px; }
.global-edit-observation summary strong { font-size: 11px; }
.global-edit-observation summary small { color: var(--color-muted); font-size: 10px; }
.global-edit-observation summary > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); font-size: 18px; font-weight: 500; line-height: 1; }
.global-edit-observation[open] summary { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.global-edit-observation[open] summary > b { transform: rotate(45deg); }
.global-edit-observation .collapsible-observation-body { padding-top: 10px; }
.global-edit-observation .collapsible-observation-body .textarea { width: 100%; }
.global-edit-loading,
.global-edit-error { display: grid; justify-items: center; gap: 10px; min-height: 180px; align-content: center; color: var(--color-muted); text-align: center; }
.global-edit-loading strong,
.global-edit-error strong { color: var(--color-text); font-size: 14px; }
.global-edit-error span { font-size: 12px; }
.global-edit-spinner { width: 28px; height: 28px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: global-edit-spin .75s linear infinite; }
.global-edit-error .button { margin-top: 4px; }
@keyframes global-edit-spin { to { transform: rotate(360deg); } }

@media (max-width: 680px) {
    .global-edit-dialog { width: calc(100vw - 16px); }
    .global-edit-dialog-body { padding: 15px; }
    .global-edit-form .form-actions { margin: 4px -15px -15px; padding: 12px 15px; }
    .global-edit-form .form-actions .button { flex: 1; min-width: 0; }
}

@media (max-width: 560px) {
    .global-confirm { padding: 14px; }
    .global-confirm-panel { grid-template-columns: 40px minmax(0, 1fr) 34px; }
    .global-confirm-icon { width: 40px; height: 40px; margin: 18px 0 0 16px; }
    .global-confirm-copy { padding: 18px 0 18px 18px; }
    .global-confirm-copy h2 { font-size: 18px; }
    .global-confirm-actions { padding: 13px 14px; }
    .global-confirm-cancel,
    .global-confirm-submit { flex: 1; padding: 0 12px; }
}

/* Sidebar typography: lighter reading weight with clear active hierarchy. */
.nav-heading{font-size:10px;font-weight:700;letter-spacing:.095em}
.nav-link .nav-label{font-weight:600}
.nav-link.is-active .nav-label{font-weight:600}

/* The selected accent must also drive the sidebar active state. */
.nav-link.is-active{color:#fff !important;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 28%,var(--color-surface)),color-mix(in srgb,var(--color-surface) 88%,transparent)) !important;border-color:color-mix(in srgb,var(--color-primary) 38%,var(--color-border)) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 15%,transparent),0 10px 24px rgba(0,0,0,.12),0 0 20px color-mix(in srgb,var(--color-primary) 12%,transparent) !important}
.nav-link::before{background:var(--color-primary) !important}
.nav-link.is-active .nav-icon{color:var(--color-primary-strong) !important;background:color-mix(in srgb,var(--color-primary) 22%,var(--color-surface)) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 30%,transparent),0 0 16px color-mix(in srgb,var(--color-primary) 14%,transparent) !important}
[data-theme="dark"] .nav-link.is-active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 30%,var(--color-surface)),color-mix(in srgb,var(--color-surface) 88%,transparent)) !important;border-color:color-mix(in srgb,var(--color-primary) 42%,var(--color-border)) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 15%,transparent),0 10px 24px rgba(0,0,0,.24),0 0 20px color-mix(in srgb,var(--color-primary) 15%,transparent) !important}
[data-theme="dark"] .nav-link::before{background:var(--color-primary) !important}
[data-theme="dark"] .nav-link.is-active .nav-icon{background:color-mix(in srgb,var(--color-primary) 22%,var(--color-surface)) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 30%,transparent),0 0 16px color-mix(in srgb,var(--color-primary) 14%,transparent) !important}
[data-theme="dark"] .nav-link:not(.is-active){color:rgba(245,240,255,.72)}

/* Final workspace footer scope: compact only tenant panels, never the main ADM. */
@media (min-width: 981px) {
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .sidebar-workspace { width: calc(100% + 14px); margin-left: -14px; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .sidebar-workspace .tenant-card { position: relative; grid-template-columns: 40px minmax(0, 1fr); align-items: start; column-gap: 7px; padding-left: 4px; padding-right: 18px; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-heading { gap: 4px; white-space: nowrap; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-heading .tenant-name { flex: 0 1 auto; font-size: 12.5px; line-height: 1.15; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-heading .tenant-scope { flex: 0 0 auto; margin: 0; padding: 2px 5px; font-size: 7px; line-height: 1.2; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-subscription { margin-top: 1px; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-subscription > span { gap: 3px; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-subscription > span > small { margin-left: 0; overflow: visible; font-size: 8px; text-overflow: clip; }
    .app-shell.is-tenant-panel:not(.sidebar-collapsed) .tenant-workspace-chevron { position: absolute; top: 20px; right: 7px; }
    .app-shell.is-main-admin:not(.sidebar-collapsed) .sidebar-workspace { width: auto; margin-left: 0; }
    .app-shell.is-main-admin:not(.sidebar-collapsed) .sidebar-workspace .tenant-card { position: static; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 11px; padding: 10px 10px 9px 26px; }
    .app-shell.is-main-admin:not(.sidebar-collapsed) .tenant-workspace-kind { display: flex; }
    .app-shell.is-main-admin:not(.sidebar-collapsed) .tenant-workspace-chevron { position: static; }
}