body:has(.admin-chrome),
body:has(.portal-chrome),
body:has(.admin-auth-page) {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.admin-chrome :is(h1, h2, h3, h4, h5, h6),
.portal-chrome :is(h1, h2, h3, h4, h5, h6),
.admin-auth-page :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    color: var(--ink);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}
.admin-chrome h1,
.portal-chrome h1,
.admin-auth-page h1 {
    font-size: var(--text-2xl);
    line-height: 32px;
}
.admin-chrome h2,
.portal-chrome h2,
.admin-auth-page h2 {
    font-size: var(--text-xl);
    line-height: 28px;
}
.admin-chrome h3,
.portal-chrome h3,
.admin-auth-page h3 {
    font-size: var(--text-lg);
    line-height: 24px;
}
.admin-chrome h4,
.portal-chrome h4,
.admin-auth-page h4 {
    font-size: var(--text-md);
    line-height: 24px;
}
.admin-chrome h5,
.portal-chrome h5,
.admin-auth-page h5 {
    font-size: var(--text-base);
    line-height: 20px;
}
.admin-chrome h6,
.portal-chrome h6,
.admin-auth-page h6 {
    font-size: var(--text-xs);
    line-height: 16px;
}
.admin-chrome p,
.portal-chrome p,
.admin-auth-page p {
    margin: 0 0 var(--space-3);
    color: var(--ink-2);
}
.admin-chrome p:last-child,
.portal-chrome p:last-child,
.admin-auth-page p:last-child {
    margin-bottom: 0;
}
.admin-chrome small,
.portal-chrome small {
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
}
.admin-chrome code,
.portal-chrome code {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace);
    font-size: 0.9em;
}
.admin-chrome :is(td, th, .admin-kpi-value, .admin-num, time),
.portal-chrome :is(td, th, .admin-kpi-value, .admin-num, time) {
    font-variant-numeric: tabular-nums;
}
:is(.admin-chrome, .portal-chrome) .admin-kpi-value {
    letter-spacing: -0.03em;
}
:where(.admin-chrome, .portal-chrome, .admin-auth-page) a:not([class]) {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 2px;
}
:where(.admin-chrome, .portal-chrome, .admin-auth-page) a:not([class]):hover {
    text-decoration-color: currentColor;
}
.admin-chrome :focus-visible,
.portal-chrome :focus-visible,
.admin-auth-page :focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
}
.admin-chrome ::selection,
.portal-chrome ::selection {
    background: var(--accent-soft);
    color: var(--ink);
}
.admin-chrome ::-webkit-scrollbar,
.portal-chrome ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.admin-chrome ::-webkit-scrollbar-thumb,
.portal-chrome ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--radius-full);
    background-clip: content-box;
    background-color: var(--line-strong);
}
@media (pointer: coarse) {
    :is(.admin-chrome, .portal-chrome, .admin-auth-page) .admin-btn {
        min-height: 44px;
    }
    :is(.admin-chrome, .portal-chrome, .admin-auth-page) .admin-btn--icon {
        min-width: 44px;
    }
    :is(.admin-chrome, .portal-chrome, .admin-auth-page)
        :is(
            .admin-input,
            .admin-field input:where(:not([type="checkbox"]):not([type="radio"])),
            .admin-field select,
            .admin-form input:where(:not([type="checkbox"]):not([type="radio"])),
            .admin-form select,
            .admin-datatable-search input,
            .admin-datatable-filter select,
            .admin-datatable-pagesize select
        ) {
        min-height: 44px;
    }
    :is(.admin-chrome, .portal-chrome) :is(.admin-sidebar-item, .admin-sidebar-subitem) {
        min-height: 44px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .admin-chrome *,
    .portal-chrome *,
    .admin-auth-page *,
    .admin-modal2 *,
    .admin-drawer *,
    .admin-toast-region * {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}
html[data-motion="reduced"] .admin-chrome *,
html[data-motion="reduced"] .portal-chrome *,
html[data-motion="reduced"] .admin-auth-page *,
html[data-motion="reduced"] .admin-modal2,
html[data-motion="reduced"] .admin-modal2 *,
html[data-motion="reduced"] .admin-drawer,
html[data-motion="reduced"] .admin-drawer *,
html[data-motion="reduced"] .admin-toast-region *,
html[data-motion="reduced"] .fss-sheet,
html[data-motion="reduced"] .fss-sheet * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
}
@media print {
    .admin-chrome,
    .portal-chrome {
        display: block;
        background: #fff;
    }
    .admin-sidebar,
    .admin-topheader,
    .admin-skip-link,
    .admin-page-header-actions,
    .admin-toolbar-end,
    .admin-datatable-controls,
    .admin-datatable-footer,
    .admin-toast-region {
        display: none !important;
    }
    .admin-content {
        max-width: none;
        padding: 0;
    }
    .admin-card,
    .admin-datatable-wrap,
    .admin-data-table-wrap {
        border-color: #d4d4d4;
        box-shadow: none;
        break-inside: avoid;
    }
}
.admin-chrome {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--canvas);
}
.admin-chrome[data-sidebar-collapsed="true"] {
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}
.admin-chrome:not(.portal-chrome) {
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 52px; 
    --page-pad: 32px; 
    --admin-bnav-h: 0px;
    background: var(--canvas);
}
.admin-chrome:not(.portal-chrome):not([data-has-user]) {
    grid-template-columns: minmax(0, 1fr);
}
.admin-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.admin-main > .admin-content {
    display: flex;
    width: 100%;
    max-width: var(--content-max);
    flex: 1 0 auto;
    flex-direction: column;
    gap: var(--stack);
    margin: 0 auto;
    padding: var(--space-8) var(--page-pad) var(--space-10);
}
.admin-chrome > .admin-content > :not(.admin-topheader):not(.portal-alert-banner) {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
}
.admin-chrome > .admin-content {
    padding-bottom: var(--space-8);
}
.admin-shell,
.admin-shell-wide,
.admin-shell-full {
    display: flex;
    width: 100%;
    max-width: var(--content-max);
    flex-direction: column;
    gap: var(--stack);
    margin: 0 auto;
    padding: var(--page-pad);
    background: none;
}
.admin-main > .admin-content > :is(.admin-shell, .admin-shell-wide) {
    max-width: none;
    padding: 0;
}
.admin-skip-link {
    position: absolute;
    z-index: var(--z-skip);
    top: -60px;
    left: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.admin-skip-link:focus-visible {
    top: var(--space-2);
}
.admin-chrome[data-sidebar-collapsed="true"] .admin-sidebar-head {
    justify-content: center;
    padding: 0;
}
.admin-chrome[data-sidebar-collapsed="true"] .admin-sidebar-nav {
    padding-inline: var(--space-2);
}
.admin-chrome[data-sidebar-collapsed="true"] .admin-sidebar-item {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    padding: 0;
    font-size: 0;
}
.admin-chrome[data-sidebar-collapsed="true"] .admin-sidebar-item-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
}
.admin-prefs :is(button):focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
.admin-prefs {
    display: grid;
    gap: 2px;
}
.admin-prefs-row {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
}
.admin-prefs-label {
    color: var(--ink);
    font-size: var(--text-base);
}
.admin-prefs-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.admin-prefs-segmented button {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-small);
    font-weight: var(--font-medium);
}
.admin-prefs-segmented button:hover {
    color: var(--ink);
}
.admin-prefs-segmented button[aria-pressed="true"] {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
}
.admin-prefs-switchrow {
    cursor: pointer;
}
.admin-prefs-switchrow:hover {
    background: var(--surface-2);
}
.admin-prefs-switch {
    position: relative;
    width: 34px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--line-strong);
    transition: background var(--dur-fast) var(--ease-out);
}
.admin-prefs-switch > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-fast) var(--ease-out);
}
.admin-prefs-switchrow[aria-checked="true"] .admin-prefs-switch {
    background: var(--selection-ink);
}
.admin-prefs-switchrow[aria-checked="true"] .admin-prefs-switch > span {
    transform: translateX(14px);
}
@media (pointer: coarse) {
    .admin-prefs-row {
        min-height: 44px;
    }
    .admin-prefs-segmented button {
        height: 44px;
    }
}
.admin-pinned-tabs,
.admin-tabs-strip {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.admin-pinned-tabs::-webkit-scrollbar,
.admin-tabs-strip::-webkit-scrollbar {
    display: none;
}
.admin-tabs-pin {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.admin-tabs-pin:hover:not(:disabled) {
    background: var(--control-fill);
    color: var(--ink);
}
.admin-tabs-pin:disabled {
    color: var(--ink-disabled);
    cursor: default;
}
.admin-pin-tab {
    display: inline-flex;
    height: 28px;
    max-width: 168px;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    padding: 0 2px 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    color: var(--ink-2);
    font-size: var(--text-small);
    touch-action: manipulation;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
.admin-pin-tab:hover {
    background: var(--control-fill-hover);
    color: var(--ink);
}
.admin-pin-tab[data-active="true"] {
    background: var(--accent-soft);
    color: var(--ink);
    font-weight: var(--font-medium);
}
.admin-pin-tab-link {
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
}
.admin-pin-tab-link:focus-visible,
.admin-pin-tab-close:focus-visible,
.admin-tabs-pin:focus-visible {
    border-radius: var(--radius-xs);
    box-shadow: var(--focus-ring);
    outline: none;
}
.admin-pin-tab-close {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}
.admin-pin-tab-close:hover {
    background: var(--surface-pressed);
    color: var(--ink);
}
.admin-ctx-menu {
    position: fixed;
    z-index: var(--z-popover);
    display: flex;
    min-width: 200px;
    flex-direction: column;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.admin-ctx-menu :is(a, button) {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
}
.admin-ctx-menu :is(a, button):hover {
    background: var(--surface-2);
}
.admin-ctx-menu-section {
    padding: var(--space-2) var(--space-2) var(--space-1);
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: none;
}
.admin-ctx-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0 var(--space-2) var(--space-2);
}
.admin-ctx-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
}
.admin-ctx-swatch--none {
    background: var(--surface);
}
.admin-grid-2-1 {
    display: grid;
    gap: var(--stack-cards);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-grid-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 1180px) {
    .admin-grid-2-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 1023px) {
    .admin-chrome:not(.portal-chrome) {
        --page-pad: 16px;
        --admin-bnav-h: calc(64px + env(safe-area-inset-bottom));
        
        --fss-bottom-nav-h: var(--admin-bnav-h);
        --fss-actionbar-safe: 0px;
        grid-template-columns: minmax(0, 1fr);
    }
    .admin-chrome:not(.portal-chrome) .fss-actionbar-spacer {
        height: 56px;
    }
    html:has(.admin-chrome[data-has-user]:not(.portal-chrome)) {
        --bottom-nav-h: 64px;
    }
    html:has(.admin-chrome[data-has-user]:not(.portal-chrome) .fss-actionbar[data-variant="fixed"]) {
        --bottom-nav-h: 120px;
    }
    .admin-chrome > .admin-content > :not(.admin-topheader) {
        padding-inline: 0;
    }
}
@media (max-width: 1020px) {
    .admin-shell,
    .admin-shell-wide,
    .admin-shell-full {
        padding: var(--space-6);
    }
}
@media (max-width: 640px) {
    .admin-shell,
    .admin-shell-wide {
        padding: var(--space-4);
    }
}
.portal-chrome .admin-content {
    background: none;
}
.portal-lang-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
}
.portal-lang-field-label {
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: none;
}
.portal-lang-options {
    display: flex;
    gap: var(--space-1);
    padding: 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
}
.portal-lang-options .portal-lang-option {
    width: auto;
    min-height: var(--control-sm);
    flex: 1 1 0;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}
.portal-lang-options .portal-lang-option[data-active="true"] {
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(32, 37, 34, 0.08);
    color: var(--ink);
}
.portal-lang-floating {
    position: fixed;
    z-index: var(--z-sticky);
    top: var(--space-4);
    right: var(--space-4);
}
.portal-lang-trigger {
    display: inline-flex;
    height: var(--control-md);
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    color: #f7f8fa;
    cursor: pointer;
    font-size: var(--text-xs);
}
.portal-lang-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
}
.portal-lang-trigger-code {
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}
.portal-lang-caret {
    color: rgba(247, 248, 250, 0.7);
}
.portal-lang-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    display: flex;
    min-width: 180px;
    flex-direction: column;
    padding: var(--space-1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: var(--night-2);
    box-shadow: var(--shadow-2);
}
.portal-lang-menu-option {
    display: flex;
    min-height: var(--control-lg);
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: #e6eae7;
    cursor: pointer;
    font-size: var(--text-base);
    text-align: left;
}
.portal-lang-menu-option:hover,
.portal-lang-menu-option[data-active="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.portal-lang-menu-code {
    color: rgba(230, 234, 231, 0.6);
    font-size: var(--text-xs);
    text-transform: uppercase;
}
.portal-lang-menu-label {
    flex: 1 1 auto;
}
.admin-tab-rename {
    width: 160px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    outline: none;
}
.admin-tab-rename:focus-visible {
    box-shadow: var(--focus-ring);
}
.admin-btn--md {
    height: var(--control-md);
}
.admin-btn--secondary.admin-btn--icon {
    color: var(--ink-2);
}
.admin-btn--danger:active:not(:disabled) {
    background: color-mix(in srgb, var(--danger-bg), var(--danger) 14%);
    transform: scale(0.98);
}
.admin-btn--link.admin-btn--icon {
    width: auto;
    height: auto;
}
.admin-btn:disabled:not([data-loading]) {
    border-color: transparent;
    background: var(--surface-2);
    box-shadow: none;
    color: var(--ink-disabled);
    cursor: not-allowed;
}
.admin-field,
.admin-form label:not(.admin-checkbox):not(.admin-switch) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1-5);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
}
.admin-field[data-invalid] .admin-field-label {
    color: var(--danger);
}
.admin-field[data-invalid] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    border-color: var(--danger);
}
.admin-field-hint,
.admin-form-help {
    display: block;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    line-height: 16px;
}
.admin-form-help > svg {
    display: inline;
    margin-right: var(--space-1);
    vertical-align: -2px;
}
.admin-field-error,
.admin-form-error {
    color: var(--danger);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 16px;
}
.admin-field-error > svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 1px;
}
.admin-input,
.admin-field input,
.admin-field select,
.admin-field textarea,
.admin-form input:where(:not([type="checkbox"]):not([type="radio"])),
.admin-form select,
.admin-form textarea,
.admin-datatable-search input,
.admin-datatable-filter select,
.admin-datatable-pagesize select {
    width: 100%;
    height: var(--input-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    
    box-shadow: var(--shadow-1);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 20px;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.admin-field textarea,
.admin-form textarea {
    height: auto;
    min-height: 112px;
    padding: var(--space-2) var(--space-3);
    line-height: var(--leading-normal);
    resize: vertical;
}
:where([data-density="compact"]) :is(.admin-field, .admin-form) textarea {
    min-height: 96px;
}
:is(.admin-field, .admin-form) textarea:not([rows]) {
    max-height: 320px;
    field-sizing: content;
}
.admin-input:hover,
.admin-form :is(input, select, textarea):hover:not(:disabled) {
    border-color: #a1a1aa;
}
.admin-input:focus,
.admin-field :is(input, select, textarea):focus,
.admin-form :is(input, select, textarea):focus {
    border-color: var(--focus-ring-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring-color) 28%, transparent);
    outline: none;
}
.admin-input[aria-invalid="true"],
.admin-form :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
}
.admin-input[data-state="warning"] {
    border-color: var(--warning);
}
.admin-input:disabled,
.admin-form :is(input, select, textarea):disabled {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--ink-disabled);
    cursor: not-allowed;
}
.admin-form :is(input, textarea)::placeholder {
    color: var(--ink-3);
}
.admin-form :is(input[type="checkbox"], input[type="radio"]) {
    width: 16px;
    height: 16px;
    accent-color: var(--selection-ink);
}
.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.admin-form-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.32fr);
}
.admin-field-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-top: var(--space-1);
}
@media (max-width: 680px) {
    .admin-form-grid,
    .admin-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.admin-card,
.admin-workspace-panel,
.admin-passkey-card,
.admin-wide-card {
    
    padding: var(--card-pad, var(--space-5));
    border-radius: var(--radius-md);
    background: var(--surface);
    
    box-shadow: var(--shadow-1);
}
@media (max-width: 640px) {
    .admin-card,
    .admin-workspace-panel,
    .admin-passkey-card,
    .admin-wide-card {
        padding: var(--space-4);
    }
}
:is(.admin-card, .admin-wide-card, .admin-workspace-panel) > * {
    min-width: 0;
}
.admin-card-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.admin-card-heading > svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--ink-3);
}
.admin-card-heading > div {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
}
.admin-card-heading h2,
.admin-card-heading h3,
.admin-card-heading h4 {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}
.admin-card-heading > p,
.admin-card-heading > div > p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: 16px;
}
.admin-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.admin-section-toolbar > svg + div {
    flex: 1;
}
.admin-section-toolbar > .admin-card-heading {
    margin-bottom: 0;
}
.admin-kv {
    display: grid;
    gap: 0;
    grid-template-columns: 144px minmax(0, 1fr);
}
.admin-kv > div {
    display: contents;
}
.admin-kv > dt {
    display: flex;
    min-height: var(--control-lg);
    align-items: center;
    padding-right: var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-base);
}
.admin-kv > dd {
    display: flex;
    min-height: var(--control-lg);
    align-items: center;
    margin: 0;
    color: var(--ink);
    font-size: var(--text-base);
}
@media (max-width: 760px) {
    .admin-section-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-kv {
        grid-template-columns: minmax(0, 1fr);
    }
    .admin-kv > dt {
        min-height: 0;
        padding-bottom: 0;
    }
    .admin-kv > dd {
        min-height: 0;
        padding-bottom: var(--space-3);
    }
}
.admin-kicker {
    display: block;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0;
    line-height: 16px;
    text-transform: none;
}
.admin-page-header .admin-kicker,
.admin-card-heading .admin-kicker {
    display: none;
}
@media (max-width: 640px) {
    :is(.admin-chrome, .portal-chrome, .admin-auth-page) .admin-page-header h1 {
        font-size: 24px;
        line-height: 28px;
    }
}
@media (max-width: 1023px) {
    .admin-chrome:not(.portal-chrome) .admin-page-header-primary[data-mobile-bar] {
        display: none;
    }
    .admin-chrome:not(.portal-chrome) .admin-page-header[data-bar-overflow] {
        position: relative;
    }
    .admin-chrome:not(.portal-chrome) .admin-page-header[data-bar-overflow] > .admin-page-header-actions {
        position: absolute;
        top: 0;
        right: 0;
        min-height: 0;
    }
    .admin-chrome:not(.portal-chrome) .admin-page-header[data-bar-overflow] > .admin-page-header-copy {
        padding-right: calc(44px + var(--space-2));
    }
}
.admin-datatable[data-variant="plain"],
.admin-card > .admin-datatable,
.admin-wide-card > .admin-datatable,
.admin-workspace-panel > .admin-datatable {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.admin-datatable-search {
    position: relative;
    display: block;
    max-width: 360px;
    flex: 1 1 280px;
}
.admin-datatable-search input {
    height: var(--control-md);
    padding-left: 34px;
    
    border-color: var(--line-field);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.admin-datatable-search input:hover {
    border-color: color-mix(in srgb, var(--line-field), var(--ink) 12%);
}
.admin-datatable-search input:focus {
    border-color: var(--focus-ring-color);
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring-color) 28%, transparent);
    outline: none;
}
.admin-datatable-filter-multi-list .admin-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2-5, 10px);
    min-height: var(--control-md);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}
.admin-datatable-filter-multi-list .admin-checkbox-label input {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    flex: none;
    accent-color: var(--selection-ink);
    cursor: pointer;
}
.admin-data-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.admin-datatable-table,
.admin-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}
.admin-datatable-table th,
.admin-data-table th {
    height: var(--thead-h);
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line);
    
    background: var(--sidebar-bg);
    color: var(--ink-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: 0;
    line-height: 18px;
    text-align: left;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}
.admin-datatable-table td,
.admin-data-table td {
    height: var(--row-h);
    
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    line-height: 20px;
    vertical-align: middle;
}
.admin-datatable-table td:has(> .admin-datatable-cellmain),
.admin-data-table td:has(> .admin-datatable-cellmain) {
    padding-block: var(--space-1-5);
}
.admin-datatable-table tbody tr:last-child td,
.admin-data-table tbody tr:last-child td {
    border-bottom: 0;
}
.admin-datatable-table tbody tr td,
.admin-data-table tbody tr td {
    transition: background-color var(--dur-fast) var(--ease-out);
}
/* Row hover and the row pointer come from ONE rule in fss-core ui.css; do not add a second one here. */
.admin-datatable-table th button,
.admin-data-table th button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}
.admin-datatable-table a,
.admin-data-table a {
    color: inherit;
    text-decoration: none;
}
.admin-datatable-table a:hover,
.admin-data-table a:hover {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 2px;
}
.admin-datatable[data-variant="plain"] .fss-cardlist,
.admin-card > .admin-datatable .fss-cardlist {
    gap: 0;
}
.admin-datatable[data-variant="plain"] .fss-card,
.admin-card > .admin-datatable .fss-card {
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
}
.admin-datatable[data-variant="plain"] .fss-card[data-swipe],
.admin-card > .admin-datatable .fss-card[data-swipe] {
    padding: 0;
}
.admin-datatable[data-variant="plain"] .fss-card-body,
.admin-card > .admin-datatable .fss-card-body {
    padding: var(--space-3) 0;
}
.admin-datatable[data-variant="plain"] .fss-card:last-child,
.admin-card > .admin-datatable .fss-card:last-child {
    border-bottom: 0;
}
@media (max-width: 1023px) {
    .admin-datatable[data-mobile]:not([data-variant="plain"]):not(.admin-card > .admin-datatable) .fss-cardlist {
        gap: var(--space-2);
    }
    .admin-datatable[data-mobile]:not([data-variant="plain"]):not(.admin-card > .admin-datatable) .fss-card {
        border-radius: var(--radius-md);
    }
    .admin-datatable[data-mobile] .admin-datatable-search {
        max-width: none;
        flex: 1 1 160px;
    }
}
@container fss-datatable (max-width: 767px) {
    .admin-datatable-search {
        max-width: none;
        flex: 1 1 160px;
    }
}
@media (max-width: 760px) {
    .admin-datatable-search {
        max-width: none;
        flex-basis: 100%;
    }
}
.admin-status-badge[data-tone="accent"] {
    background: var(--surface-2);
    color: var(--ink-2);
}
.admin-status-badge[data-size="sm"] .admin-status-badge-dot {
    width: 5px;
    height: 5px;
}
.admin-status-badge > svg {
    width: 12px;
    height: 12px;
    flex: none;
}
.admin-tabs2[data-measured] > .admin-tabs2-list {
    overflow: hidden;
}
.admin-tab2[hidden],
.admin-tabs2-option[hidden] {
    display: none;
}
.admin-tab2.admin-tabs2-trigger {
    gap: var(--space-1-5);
}
.admin-tab2 {
    display: inline-flex;
    height: 44px;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}
.admin-tab2:active {
    color: var(--ink);
}
.admin-tab2[data-active="true"],
.admin-tab2[aria-selected="true"] {
    border-bottom-color: var(--selection-ink);
    color: var(--ink);
    font-weight: var(--font-medium);
}
.admin-tabs2[data-motion] .admin-tab2[data-active="true"],
.admin-tabs2[data-motion] .admin-tab2[aria-selected="true"] {
    border-bottom-color: transparent;
}
.admin-tab2 {
    position: relative;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.admin-confirm2-type .admin-field-label {
    color: var(--ink-2);
    font-size: var(--text-small);
    font-weight: var(--font-regular);
    line-height: var(--lh-small);
}
.admin-banner[data-variant="inline"]:is([data-tone="neutral"], [data-tone="accent"]) {
    border-left-color: var(--line-strong);
}
@media (max-width: 760px) {
    .admin-banner {
        flex-wrap: wrap;
    }
    .admin-banner-actions {
        width: 100%;
        margin-left: 32px;
    }
}
@media (pointer: coarse) {
    .admin-banner-actions a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }
}
.admin-card .admin-empty-state,
.admin-wide-card .admin-empty-state,
.admin-workspace-panel .admin-empty-state,
.admin-passkey-card .admin-empty-state,
.admin-kpi .admin-empty-state,
.admin-datatable .admin-empty-state,
.admin-drawer-panel .admin-empty-state,
.admin-modal2-panel .admin-empty-state,
td .admin-empty-state,
.admin-empty-state[data-card="false"] {
    border: 0;
    border-radius: 0;
    background: none;
}
.admin-empty-state[data-card="true"] {
    border-radius: var(--radius-md);
    background: var(--surface);
}
.admin-empty-state h3,
.admin-empty-state > strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: var(--font-medium);
    line-height: 20px;
}
.admin-empty-state p {
    max-width: 48ch;
    color: var(--ink-3);
    font-size: var(--text-body);
    line-height: var(--lh-body);
}
.admin-empty-state[data-kind="filtered"] {
    gap: var(--space-1-5);
}
.admin-empty-state[data-kind="done"] > strong {
    font-size: 24px;
    line-height: 28px;
}
.admin-spin {
    animation: admin-spin 0.9s linear infinite;
}
.admin-datatable-cellmain {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}
.admin-datatable-cellmain > strong,
.admin-datatable-cellmain > b {
    overflow: hidden;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-datatable-cellmain > span {
    overflow: hidden;
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-money {
    display: inline;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-semibold);
    white-space: nowrap;
}
.admin-checkbox-label,
.admin-form label.admin-checkbox-label:not(.admin-checkbox):not(.admin-switch):not(.admin-datatable-filter-multi-list *) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
}
.admin-form .admin-checkbox-label:not(.admin-datatable-filter-multi-list *) input {
    width: 16px;
    height: 16px;
    min-height: 0;
}
.admin-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
}
.admin-toggle-row input {
    width: 16px;
    height: 16px;
    min-height: 0;
    flex: 0 0 auto;
    accent-color: var(--selection-ink);
}
.admin-toggle-row input:disabled {
    cursor: not-allowed;
}
.admin-address-lookup {
    display: grid;
    grid-template-columns: minmax(110px, 0.34fr) minmax(110px, 0.28fr) minmax(100px, 0.24fr) auto;
    gap: var(--space-4);
    align-items: end;
}
.admin-inline-password-form .admin-form-error,
.admin-inline-password-form .admin-form-help {
    grid-column: 1 / -1;
    margin: 0;
}
.admin-card-heading.compact h2 {
    margin: 0;
    font-size: var(--text-md);
}
.admin-datatable-table td:has(> time),
.admin-datatable-table td:has(> .admin-num),
.admin-datatable-table td:has(> .admin-money),
.admin-datatable-table td:has(> .admin-nowrap),
.admin-datatable-table td[data-nowrap] {
    white-space: nowrap;
}
.admin-data-table-compact {
    min-width: 680px;
    font-size: var(--text-sm);
}
@media (max-width: 760px) {
    .admin-address-lookup,
    .admin-inline-password-form {
        grid-template-columns: minmax(0, 1fr);
    }
}
.admin-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
}
@media (pointer: coarse) {
    :is(
            .admin-combobox-trigger,
            .admin-datatable-preset,
            .admin-datatable-more,
            .admin-datatable-columns,
            .admin-datatable-filter,
            .admin-tab2
        ) {
        min-height: 44px;
    }
    :is(
            .admin-banner-close,
            .admin-toast-close,
            .admin-toast-undo,
            .admin-pagination-btn,
            .admin-back-link,
            .admin-datatable-sort,
            .admin-drawer-close,
            .admin-modal2-close
        ) {
        position: relative;
    }
    :is(
            .admin-banner-close,
            .admin-toast-close,
            .admin-toast-undo,
            .admin-pagination-btn,
            .admin-back-link,
            .admin-datatable-sort,
            .admin-drawer-close,
            .admin-modal2-close
        )::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        content: "";
        transform: translate(-50%, -50%);
    }
}
.fss-rail {
    --rail-x: 10px;
    position: relative;
}
.fss-rail::before {
    position: absolute;
    top: var(--rail-top, 0);
    bottom: var(--rail-bottom, 0);
    left: var(--rail-x);
    width: 3px;
    border-radius: 3px;
    background: var(--line);
    content: "";
    pointer-events: none;
}
.fss-rail-node {
    --node-ring: var(--line-strong);
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--surface);
    
    box-shadow:
        inset 0 0 0 1.5px var(--node-ring),
        0 0 0 2px var(--rail-bg, var(--surface));
}
.fss-rail-node[data-state="done"] {
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--rail-bg, var(--surface));
}
.fss-rail-node[data-state="now"] {
    background: var(--accent);
    box-shadow:
        inset 0 0 0 1.5px var(--selection-ink),
        0 0 0 4px var(--accent-soft);
}
.fss-rail-node[data-state="open"][data-tone="danger"] { --node-ring: var(--danger); }
.fss-rail-node[data-state="open"][data-tone="warning"] { --node-ring: var(--warning); }
.fss-rail-node[data-state="open"][data-tone="info"] { --node-ring: var(--info); }
.fss-rail-node[data-state="open"][data-tone="success"] { --node-ring: var(--success); }
.fss-rail-node[data-state="handled"] { --node-ring: var(--selection-ink); }
.fss-sheet-panel[data-height="full"] .fss-sheet-body > .admin-form {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.fss-sheet-panel[data-height="full"] .fss-sheet-body > .admin-form > .admin-form-actions:last-child {
    margin-top: auto;
}
.fss-sheet-foot > .admin-btn {
    flex: 1 1 0;
}
.fss-timeline {
    display: grid;
    min-width: 0;
    container-type: inline-size;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
}
.fss-timeline .fss-timeline-dayhead {
    
    position: sticky;
    z-index: 1;
    top: var(--fss-sticky-top, 0px);
    width: fit-content;
    margin: 0 0 0 136px;
    padding: var(--space-3) var(--space-2) var(--space-1) 0;
    background: var(--rail-bg, var(--surface));
    color: var(--ink-2);
    font-size: var(--text-caption, 12px);
    font-weight: 600;
    line-height: 16px;
}
.fss-timeline-item {
    display: grid;
    padding: var(--space-2) 0;
    column-gap: 12px;
    grid-template-columns: 88px 24px minmax(0, 1fr);
}
.fss-timeline-gutter .fss-rail-node {
    position: absolute;
    top: 6px;
    left: 7.5px;
}
.fss-timeline-title {
    display: flex;
    align-items: flex-start;
    margin: 0;
    color: var(--ink);
    font-size: var(--text-body, 14px);
    font-weight: 500;
    gap: 6px;
    line-height: 20px;
    overflow-wrap: anywhere;
}
.fss-timeline-title a {
    color: inherit;
    text-decoration: none;
}
.fss-timeline-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}
.fss-timeline-title a:focus-visible {
    border-radius: 2px;
    box-shadow: var(--focus-ring);
    outline: none;
}
.fss-timeline-item[data-state="planned"] .fss-timeline-title {
    color: var(--ink-2);
}
.fss-timeline-body {
    margin-top: 2px;
    color: var(--ink-2);
    font-size: var(--text-body, 14px);
    line-height: 20px;
    overflow-wrap: anywhere;
}
.fss-timeline-meta {
    margin: 2px 0 0;
    color: var(--ink-3);
    font-size: var(--text-caption, 12px);
    line-height: 16px;
}
@container (max-width: 520px) {
    .fss-timeline .fss-timeline-dayhead {
        margin-left: 36px;
    }
    .fss-timeline-item {
        grid-template-columns: 24px minmax(0, 1fr);
    }
}
.fss-worklist-node .fss-rail-node {
    position: absolute;
    top: 6px;
    left: 7.5px;
}
.fss-worklist-done-node.fss-rail-node {
    width: 16px;
    height: 16px;
}
@media (pointer: coarse) {
    :is(
            .admin-text-link,
            .admin-card-action,
            .admin-inline-link,
            .admin-record-chip,
            .fss-timeline-title a,
            .admin-empty-state-action a:not(.admin-btn)
        ) {
        position: relative;
    }
    :is(
            .admin-text-link,
            .admin-card-action,
            .admin-inline-link,
            .admin-record-chip,
            .fss-timeline-title a,
            .admin-empty-state-action a:not(.admin-btn)
        )::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        content: "";
        transform: translate(-50%, -50%);
    }
}
:is(.admin-chrome, .portal-chrome) .fss-eyebrow {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    line-height: 16px;
}
.admin-auth-page {
    
    --control-md: 40px;
    --control-lg: 44px;
    --input-h: 44px;
    --input-h-sm: 40px;
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-4);
    background: var(--night);
    overflow: hidden;
}
.admin-auth-page::before {
    width: 200px;
    height: 42px;
    background: url("/branding/logo-horizontal-white.svg") no-repeat center / contain;
    content: "";
}
.admin-auth-panel {
    position: relative;
    display: flex;
    width: min(100%, 420px);
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6) var(--space-6) calc(var(--space-6) + 20px);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
}
.admin-auth-panel::before {
    position: absolute;
    top: var(--space-8);
    bottom: var(--space-6);
    left: 20px;
    width: 3px;
    border-radius: 3px;
    background: var(--line);
    content: "";
    pointer-events: none;
}
.admin-auth-panel.admin-auth-panel-wide {
    width: min(100%, 560px);
}
.admin-auth-panel h1 {
    position: relative;
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--font-semibold);
    line-height: var(--lh-h1);
}
.admin-auth-panel h1::before {
    position: absolute;
    top: 12px;
    left: -26.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        inset 0 0 0 1.5px var(--selection-ink),
        0 0 0 4px var(--accent-soft);
    content: "";
}
.admin-auth-panel > p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.admin-auth-panel .admin-kicker {
    justify-self: start;
}
.admin-auth-panel form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (max-width: 480px) {
    .admin-auth-page {
        justify-content: flex-start;
        padding: var(--space-8) 0 0;
        gap: var(--space-5);
    }
    .admin-auth-page::before {
        align-self: flex-start;
        margin-left: var(--space-8);
    }
    .admin-auth-panel,
    .admin-auth-panel.admin-auth-panel-wide {
        width: 100%;
        flex: 1 1 auto;
        padding: var(--space-6) var(--space-4) var(--space-8) 32px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .admin-auth-panel::before {
        top: var(--space-6);
        bottom: var(--space-8);
        left: 14px;
    }
    .admin-auth-panel h1::before {
        left: -20.5px;
    }
}
.admin-password-input {
    position: relative;
    display: block;
}
.admin-password-input input {
    width: 100%;
    padding-right: 40px;
}
.admin-password-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    display: inline-grid;
    width: var(--control-md);
    height: var(--control-md);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
}
.admin-password-toggle:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.admin-code-input {
    position: relative;
}
.admin-code-input input.admin-code-input-field,
.admin-code-input input.admin-code-input-field:is(:hover, :focus, :focus-visible, [aria-invalid="true"]) {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    font-size: 16px;
    letter-spacing: 0;
    outline: none;
    appearance: none;
    
    transition: background-color 600000s 0s;
}
.admin-code-input-field::selection {
    background: transparent;
}
.admin-code-input-slots {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    gap: var(--space-2);
    pointer-events: none;
}
.admin-code-input-slot {
    display: inline-flex;
    width: 40px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}
.admin-code-input-slot[data-active] {
    border-color: var(--focus-ring-color);
    box-shadow: var(--focus-ring);
}
@media (max-width: 400px) {
    .admin-code-input-slots {
        gap: var(--space-1-5);
    }
    .admin-code-input-slot {
        width: 36px;
        height: 42px;
        font-size: var(--text-md);
    }
}
.admin-auth-stack {
    display: grid;
    gap: var(--space-5);
}
.admin-secret-box {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.admin-secret-box span {
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}
.admin-secret-box code {
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.admin-totp-qr-panel {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
}
.admin-totp-qr-panel img {
    width: min(232px, 100%);
    height: auto;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #ffffff;
}
.admin-manual-totp-details {
    display: grid;
    gap: var(--space-3);
}
.admin-inline-link {
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.portal-oidc-scopes {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-oidc-scopes li {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
}
.portal-oidc-scopes span {
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.admin-auth-stack .portal-oidc-continue {
    height: auto;
    min-height: 44px;
    padding-block: 10px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.admin-drawer-head .admin-kicker {
    display: block;
    color: var(--ink-3);
}
@media (max-width: 760px) {
    .admin-drawer-body .admin-form > .admin-form-actions,
    .admin-drawer-body > .admin-form-actions {
        bottom: calc(var(--space-4) * -1);
        margin: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
        padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    }
}
.admin-quill-editor .ql-toolbar.ql-snow,
.admin-quill-editor .ql-container.ql-snow {
    border: 0;
}
.admin-quill-editor .ql-toolbar.ql-snow {
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.admin-quill-editor .ql-editor {
    min-height: var(--quill-min-height, 180px);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.96rem;
    line-height: 1.65;
}
.admin-quill-editor .ql-editor.ql-blank::before {
    color: var(--ink-2);
    font-style: normal;
}
.admin-quill-editor {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
@media (pointer: coarse) {
    .admin-quill-editor .ql-toolbar.ql-snow button {
        width: 44px;
        height: 44px;
        padding: 13px;
    }
    .admin-quill-editor .ql-toolbar.ql-snow .ql-picker {
        height: 44px;
    }
    .admin-quill-editor .ql-toolbar.ql-snow .ql-formats {
        margin-right: var(--space-2);
    }
    .admin-quill-editor .ql-toolbar.ql-snow {
        padding: var(--space-1) var(--space-2);
    }
    .admin-quill-editor .ql-toolbar.ql-snow .ql-picker-label {
        display: inline-flex;
        height: 44px;
        align-items: center;
        padding-inline: var(--space-2) var(--space-1);
        line-height: 44px;
    }
    .admin-quill-editor .ql-toolbar.ql-snow .ql-picker-label svg {
        position: static;
        margin-top: 0;
    }
}
.mail-settings-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.mail-settings-tab-panel {
    display: flex;
    flex-direction: column;
}
.mail-settings-hint {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.mail-settings-actions-row {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
}
.admin-form label.mail-settings-inline-checkbox.mail-settings-inline-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
}
.mail-settings-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}
.mail-settings-inline-form label {
    min-width: 180px;
}
.mail-settings-subsection {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.mail-settings-subhead {
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.mail-settings-rules {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.mail-settings-rule {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
}
.mail-settings-rule-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.mail-settings-rule-name {
    flex: 1 1 220px;
    min-width: 0;
}
.mail-settings-rule-move {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}
.mail-settings-match {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.mail-settings-match select {
    width: auto;
}
.mail-settings-condition,
.mail-settings-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.mail-settings-condition select,
.mail-settings-condition input,
.mail-settings-action select,
.mail-settings-action input {
    width: auto;
    min-width: 140px;
    flex: 1 1 160px;
}
.mail-settings-forwarding {
    margin-top: var(--space-2);
}
.mail-settings-policy-columns {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mail-settings-policy-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.mail-settings-policy-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}
.mail-settings-policy-list code {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-settings-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.mail-settings-preset-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
    cursor: pointer;
    font-size: var(--text-sm);
}
.mail-settings-preset-option[data-active="true"] {
    border-color: var(--focus-ring-color);
    background: var(--accent-soft);
}
.mail-settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.mail-settings-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}
.mail-settings-list > li > div:first-child {
    flex: 1 1 220px;
    min-width: 0;
}
.mail-settings-list-desc {
    color: var(--ink-2);
}
.mail-settings-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}
.mail-settings-disposable-form,
.mail-settings-app-password-form {
    align-items: flex-end;
}
.mail-settings-protocols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}
.mail-settings-protocols legend {
    width: 100%;
    margin-bottom: var(--space-1);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}
@media (max-width: 640px) {
    .mail-settings-list > li,
    .mail-settings-policy-list li {
        flex-direction: column;
        align-items: flex-start;
    }
    .mail-settings-row-actions {
        margin-left: 0;
    }
}
.mail-settings-tab-panel[hidden] {
    display: none;
}
.admin-sms-report-toolbar .admin-field {
    min-width: 220px;
}
.admin-sms-report-num,
.admin-sms-report .admin-data-table th.admin-sms-report-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .admin-sms-report-toolbar .admin-field {
        min-width: 0;
        width: 100%;
    }
}
@media print {
    .admin-sms-report .admin-card {
        break-inside: auto;
    }
    .admin-sms-report .admin-data-table tr {
        break-inside: avoid;
    }
    .admin-sms-report .admin-data-table thead {
        display: table-header-group;
    }
}
.admin-passkey-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink-2);
}
.admin-drawer-body .admin-passkey-card {
    padding: 0;
    border: 0;
    background: none;
}
.admin-copyblock-body > .admin-btn {
    flex: 0 0 auto;
}
.admin-card ol.admin-muted {
    margin: var(--space-3) 0;
    padding-left: var(--space-6);
    list-style: decimal;
}
.admin-ticket-chat {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.admin-ticket-msg {
    display: grid;
    max-width: min(680px, 88%);
    min-width: 0;
    gap: var(--space-1);
}
.admin-ticket-msg[data-author="studio"] {
    justify-self: end;
}
.admin-ticket-msg[data-author="customer"] {
    justify-self: start;
}
.admin-ticket-msg-meta {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--ink-3);
    font-size: var(--text-xs);
}
.admin-ticket-msg-meta strong {
    color: var(--ink-2);
    font-weight: var(--font-medium);
}
.admin-ticket-msg[data-author="studio"] .admin-ticket-msg-meta {
    justify-content: flex-end;
}
.admin-ticket-bubble {
    min-width: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-3) var(--space-4);
    color: var(--ink);
    overflow-wrap: anywhere;
}
.admin-ticket-msg[data-author="studio"] .admin-ticket-bubble {
    background: var(--surface-2);
    border-bottom-right-radius: var(--radius-xs);
}
.admin-ticket-msg[data-author="customer"] .admin-ticket-bubble {
    border-bottom-left-radius: var(--radius-xs);
}
.admin-ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.admin-ticket-composer {
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
}
@media (max-width: 760px) {
    .admin-ticket-msg {
        max-width: 100%;
    }
}
.admin-ticket-composer {
    scroll-margin-top: calc(var(--topbar-h) + var(--space-4));
}
.admin-ticket-attachments .admin-btn {
    max-width: 100%;
}
.admin-data-table td:last-child:has(> .admin-btn, > button, > form, > .portal-table-actions) {
    text-align: right;
}
.portal-vat-status {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-2);
    line-height: 1.5;
}
.portal-vat-status svg {
    flex: 0 0 auto;
    margin-top: 3px;
}
.portal-vat-status[data-state="mismatch"] {
    color: var(--warning);
}
.portal-vat-status[data-state="invalid"] {
    color: var(--danger);
}
.portal-dd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 700;
    color: var(--ink);
}
.portal-dd-status[data-tone="success"] {
    color: var(--success);
}
.portal-dd-iban {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-2);
}
.portal-dd-iban strong {
    color: var(--ink);
}
.portal-ticket-message-body {
    color: var(--ink);
    line-height: 1.65;
}
.portal-ticket-message-body p,
.portal-ticket-message-body ul,
.portal-ticket-message-body ol,
.portal-ticket-message-body blockquote,
.portal-ticket-message-body pre {
    margin: 0 0 var(--space-3);
}
.portal-ticket-message-body > :last-child {
    margin-bottom: 0;
}
.portal-ticket-message-body a {
    color: var(--selection-ink);
    font-weight: 600;
}
.voip-voice-avatar {
    --voice-size: 40px;
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--voice-size);
    height: var(--voice-size);
    overflow: hidden;
    border-radius: 50%;
    background: var(--voice-c2);
    isolation: isolate;
}
.voip-voice-avatar::before {
    position: absolute;
    inset: -30%;
    content: "";
    background:
        radial-gradient(circle at 30% 28%, var(--voice-c1) 0 18%, transparent 52%),
        radial-gradient(circle at 72% 70%, var(--voice-c3) 0 16%, transparent 50%),
        conic-gradient(from var(--voice-angle), var(--voice-c1), var(--voice-c2), var(--voice-c3), var(--voice-c1));
    filter: blur(calc(var(--voice-size) * 0.14));
}
.voip-voice-avatar::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow: inset 0 0 0 1px rgb(16 19 23 / 0.06);
    opacity: 0.18;
    mix-blend-mode: soft-light;
}
.voip-voice-avatar[data-playing]::before {
    animation: voip-voice-swirl 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .voip-voice-avatar[data-playing]::before {
        animation: none;
    }
}
.voip-voice-orb {
    position: relative;
    display: inline-grid;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    place-items: center;
}
.voip-voice-orb:disabled {
    cursor: default;
}
.voip-voice-orb:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}
.voip-voice-orb-icon {
    position: absolute;
    display: grid;
    width: 42%;
    height: 42%;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.88);
    color: var(--ink);
    place-items: center;
    transition: transform var(--dur-fast) var(--ease-out);
}
.voip-voice-orb:hover .voip-voice-orb-icon {
    transform: scale(1.06);
}
.voip-voice-orb:disabled .voip-voice-orb-icon {
    display: none;
}
.voip-tts-help {
    display: block;
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 18px;
}
.voip-tts-help[data-over] {
    color: var(--danger);
}
.voip-tts-cost {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 20px;
}
.voip-tts-cost p {
    margin: 0;
}
.voip-tts-cost strong {
    color: var(--ink);
}
.registrar-contact-kind {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.registrar-contact-kind legend {
    width: 100%;
    margin-bottom: var(--space-1);
    padding: 0;
    font-weight: 600;
}
.fss-file-glyph {
    display: inline-flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 34px;
    height: 40px;
    border-radius: 8px 12px 8px 8px;
    background: var(--surface-2);
    color: var(--ink-2);
}
.fss-file-glyph small {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}
.fss-file-glyph[data-kind="pdf"] {
    color: var(--danger);
}
.fss-file-glyph[data-kind="image"],
.fss-file-glyph[data-kind="video"] {
    color: var(--info);
}
.fss-file-glyph[data-kind="spreadsheet"] {
    color: var(--success);
}
.voip-flow-canvas .react-flow__edge.selected .react-flow__edge-path,
.voip-flow-canvas .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: var(--selection-ink);
    stroke-width: 2.5;
}
.voip-flow-canvas[data-zoom="far"] .react-flow__edge:not(.selected):not(:hover):not(:focus-visible) .react-flow__edge-textwrapper {
    opacity: 0;
}
.portal-banner-slot {
    padding: var(--page-pad);
    padding-bottom: 0;
}
.portal-lang-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
}
.portal-lang-field-label {
    color: var(--ink-2); 
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.portal-lang-options {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
}
.portal-lang-options .portal-lang-option {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: auto;
    min-height: var(--control-sm);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--ink-2); 
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.portal-lang-options .portal-lang-option:hover {
    background: var(--control-fill-hover);
    color: var(--ink);
}
.portal-lang-options .portal-lang-option[data-active="true"] {
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(32, 37, 34, 0.08);
    color: var(--ink);
    font-weight: var(--font-semibold);
}
.portal-lang-options .portal-lang-option[data-active="true"]::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-ink);
}
.portal-lang-options .portal-lang-option:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.portal-lang-field[data-pending="true"] {
    opacity: 0.72;
}
.portal-lang-floating {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 60;
}
.portal-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 170ms ease, border-color 170ms ease, color 170ms ease;
}
.portal-lang-trigger:hover,
.portal-lang-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(199, 255, 74, 0.4);
    color: #ffffff;
}
.portal-lang-trigger:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.portal-lang-trigger > svg {
    color: #ffffff; 
}
.portal-lang-trigger-code {
    letter-spacing: 0.02em;
}
.portal-lang-caret {
    transition: transform 170ms ease;
}
.portal-lang-trigger[aria-expanded="true"] .portal-lang-caret {
    transform: rotate(180deg);
}
.portal-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1;
    display: grid;
    gap: 2px;
    min-width: 178px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: #181d22;
    padding: 6px;
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.45);
}
.portal-lang-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}
.portal-lang-menu-option:hover,
.portal-lang-menu-option[data-active="true"] {
    background: rgba(199, 255, 74, 0.12);
    color: #ffffff;
}
.portal-lang-menu-option:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.portal-lang-menu-option[data-active="true"] svg {
    color: #ffffff; 
}
.portal-lang-menu-code {
    min-width: 26px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
}
.portal-lang-menu-label {
    flex: 1;
}
.portal-lang-floating[data-pending="true"] .portal-lang-trigger {
    opacity: 0.72;
}
.portal-table-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.portal-address-strip {
    display: grid;
    grid-template-columns: minmax(110px, 0.4fr) minmax(90px, 0.3fr) minmax(90px, 0.3fr);
    gap: var(--space-4);
}
@media (max-width: 560px) {
    .portal-address-strip {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .portal-address-strip > :first-child {
        grid-column: 1 / -1;
    }
}
.portal-invoice-meta {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}
.portal-invoice-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}
.portal-invoice-meta > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.portal-invoice-meta dt {
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-invoice-meta dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}
.portal-missing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-complete-hint {
    margin-top: var(--space-3);
}
.portal-address-lookup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.portal-address-lookup svg {
    flex: 0 0 auto;
}
.admin-data-table td:last-child > .portal-table-actions {
    justify-content: flex-end;
}
.portal-chat {
    display: grid;
    gap: var(--space-4);
}
.portal-chat-composer {
    margin-top: var(--space-5);
    border-top: 1px solid var(--line);
    padding-top: var(--space-5);
}
.portal-chat-msg {
    display: grid;
    gap: 6px;
    max-width: min(720px, 88%);
    min-width: 0;
}
.portal-chat-msg[data-author="customer"] {
    justify-self: end;
}
.portal-chat-msg[data-author="studio"] {
    justify-self: start;
}
.portal-chat-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--ink-2);
    font-weight: 600;
}
.portal-chat-msg[data-author="customer"] .portal-chat-meta {
    justify-content: flex-end;
}
.portal-chat-bubble {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    min-width: 0;
    overflow-wrap: anywhere;
}
.portal-chat-msg[data-author="customer"] .portal-chat-bubble {
    background: rgba(199, 255, 74, 0.14);
    border-color: rgba(199, 255, 74, 0.45);
    border-bottom-right-radius: 4px;
}
.portal-chat-msg[data-author="studio"] .portal-chat-bubble {
    border-bottom-left-radius: 4px;
}
.portal-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.portal-dd-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}
.portal-onboarding {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 0;
}
.portal-onboarding-card {
    padding: clamp(20px, 4vw, 32px);
}
.portal-onboarding-head {
    margin-bottom: 18px;
}
.portal-onboarding-head h1 {
    margin: 6px 0 4px;
}
.portal-onboarding form h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}
.portal-onboarding-progress {
    position: relative;
    display: flex;
    height: 8px;
    margin: 20px 0 10px;
}
.portal-onboarding-progress::before {
    position: absolute;
    top: 2.5px;
    right: 4px;
    left: 4px;
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    content: "";
}
.portal-onboarding-progress span {
    position: relative;
    height: 8px;
    flex: 1 1 0;
}
.portal-onboarding-progress span::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow:
        inset 0 0 0 1.5px var(--line-strong),
        0 0 0 2px var(--surface);
    content: "";
}
.portal-onboarding-progress span[data-active="true"]::before {
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--surface);
}
.portal-onboarding-progress span[data-active="true"]:has(+ span[data-active="true"])::after {
    position: absolute;
    top: 2.5px;
    right: -4px;
    left: 4px;
    height: 3px;
    background: var(--ink);
    content: "";
}
.portal-onboarding-progress span[data-active="true"]:not(:has(+ span[data-active="true"]))::before {
    background: var(--accent);
    box-shadow:
        inset 0 0 0 1.5px var(--selection-ink),
        0 0 0 4px var(--accent-soft);
}
.portal-onboarding-stepcount {
    font-size: 0.8rem;
    color: var(--ink-2);
}
.portal-onboarding-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.portal-ticket-form {
    gap: var(--space-4);
}
.portal-upload-field {
    display: grid;
    gap: var(--space-3);
}
.portal-upload-dropzone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    border: 1px dashed var(--line-field);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: var(--space-4);
}
.portal-upload-dropzone[data-dragging="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.portal-upload-dropzone > svg {
    color: var(--ink-3);
}
.portal-upload-dropzone strong,
.portal-upload-dropzone span {
    display: block;
}
.portal-upload-dropzone span {
    margin-top: var(--space-1);
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 1.45;
}
.portal-upload-list {
    display: grid;
    gap: var(--space-2);
}
.portal-upload-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px auto auto;
    gap: var(--space-3);
    align-items: center;
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-3);
}
.portal-upload-item strong,
.portal-upload-item span,
.portal-upload-item small {
    display: block;
}
.portal-upload-item span {
    margin-top: var(--space-1);
    color: var(--ink-2);
    font-size: var(--text-xs);
}
.portal-upload-item small {
    margin-top: var(--space-1);
    color: var(--danger);
    font-weight: 600;
}
.portal-upload-item > svg {
    color: var(--success);
}
.portal-upload-item button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-3);
    cursor: pointer;
}
@media (max-width: 760px) {
    .portal-upload-dropzone,
    .portal-upload-item {
        grid-template-columns: 1fr;
    }
}
.portal-content-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-content-section {
    display: flex;
    min-height: 56px;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.portal-content-section:hover,
.portal-content-section:focus-visible {
    border-color: var(--line-strong);
    background: var(--surface-2);
}
.portal-content-section > svg {
    flex: none;
    margin-top: 2px;
    color: var(--ink-2);
}
.portal-content-section span {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.portal-content-section small {
    color: var(--ink-3);
    font-size: var(--text-small, 0.8125rem);
}
.portal-content-groups {
    display: grid;
    gap: var(--space-5);
}
.portal-content-group {
    display: grid;
    gap: var(--space-2);
}
.portal-content-group .portal-content-group-title {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-small, 0.8125rem);
    font-weight: var(--font-semibold, 600);
    line-height: 18px;
}
.portal-content-subnav {
    display: grid;
    gap: var(--space-1);
}
.portal-content-subnav-sub .admin-tabs2 {
    border-bottom: 0;
}
.portal-content-subnav-sub .admin-tab2 {
    height: 36px;
    color: var(--ink-3);
    font-size: var(--text-small, 0.8125rem);
}
.portal-content-subnav-sub .admin-tab2[data-active="true"] {
    color: var(--ink);
}
.portal-content-secret {
    align-items: flex-end;
}
.portal-content-secret > label {
    flex: 1 1 auto;
    min-width: 0;
}
.portal-content-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-bottom: var(--space-3);
}
.portal-chrome .admin-datatable-cellmain > .admin-status-badge {
    align-self: flex-start;
}
@media (max-width: 640px) {
    .portal-content-toolbar {
        justify-content: stretch;
    }
    .portal-content-toolbar > * {
        flex: 1 1 auto;
    }
}
.portal-content-note {
    margin: 0 0 var(--space-3);
}
.portal-content-summary {
    display: -webkit-box;
    max-width: 56ch;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--ink);
}
.portal-content-editor-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.portal-content-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}
@media (max-width: 1023px) {
    .portal-content-editor-bar {
        margin-bottom: var(--space-3);
    }
}
.portal-content-editor-main,
.portal-content-editor-side {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
}
.portal-content-editor-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}
.portal-content-fieldset {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.portal-content-fieldset legend {
    padding: 0 6px;
    font-weight: 500;
}
.portal-content-checklist {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-content-checklist--grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.portal-content-check {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}
.portal-content-check input {
    flex: none;
    width: auto;
}
.portal-content-cover {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}
.portal-content-cover img {
    display: block;
    width: 100%;
    max-height: 180px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.portal-content-preview {
    display: grid;
    gap: var(--space-3);
}
.portal-content-preview-cover {
    width: 100%;
    max-height: 320px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.portal-content-preview-excerpt {
    color: var(--ink-2);
    font-size: 1.0625rem;
}
.portal-content-preview img {
    max-width: 100%;
    height: auto;
}
.portal-content-upload {
    margin-bottom: var(--space-4);
}
.portal-content-media-grid,
.portal-content-media-pick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .portal-content-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.portal-content-media-item {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
}
.portal-content-media-thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink-3);
}
.portal-content-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portal-content-media-thumb picture,
.portal-content-media-card picture,
.portal-content-alt-preview picture {
    display: contents;
}
.portal-content-media-noalt {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    min-height: 24px;
}
.portal-content-alt-preview {
    display: grid;
    place-items: center;
    max-height: 220px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-content-alt-preview img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}
.portal-content-alt [data-over] {
    color: var(--danger);
}
.portal-content-media-menu {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
}
.portal-content-media-menu-trigger {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.portal-content-media-menu-trigger svg {
    padding: 4px;
    box-sizing: content-box;
    border-radius: var(--radius-full, 999px);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.portal-content-media-menu-trigger:focus-visible {
    outline: 2px solid var(--selection-ink);
    outline-offset: -2px;
}
.portal-content-media-meta {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}
.portal-content-media-meta strong {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-small, 0.8125rem);
    font-weight: var(--font-medium, 500);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-content-media-meta small {
    color: var(--ink-3);
    overflow-wrap: anywhere;
}
.portal-content-media-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.portal-content-media-bar-search {
    flex: 1 1 280px;
    min-width: 0;
}
.portal-content-media-bar-search .portal-content-search {
    margin-bottom: 0;
}
.portal-content-submission {
    display: grid;
    gap: var(--space-4);
}
.portal-content-field-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.portal-content-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-content-secret {
    display: grid;
    gap: var(--space-3);
}
.portal-content-secret-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.portal-content-fields > div {
    display: grid;
    gap: 2px;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
}
.portal-content-fields dt {
    color: var(--ink-3);
    font-size: var(--text-small, 0.8125rem);
}
.portal-content-fields dd {
    margin: 0;
    color: var(--ink);
}
@media (max-width: 480px) {
    .portal-content-secret-row {
        flex-wrap: wrap;
    }
    .portal-content-secret-row input {
        flex: 1 1 100%;
    }
}
.portal-content-secret-row input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.portal-content-secret-warning {
    margin: 0;
}
.portal-content-search {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}
.portal-content-search input {
    flex: 1 1 160px;
    min-width: 0;
}
.admin-form.portal-content-search {
    flex-direction: row;
}
@media (max-width: 1023px) {
    .portal-chrome .admin-page-header:has(> .admin-page-header-actions > .admin-page-header-overflow:only-child) {
        position: relative;
    }
    .portal-chrome .admin-page-header:has(> .admin-page-header-actions > .admin-page-header-overflow:only-child) > .admin-page-header-actions {
        position: absolute;
        top: 0;
        right: 0;
        min-height: 0;
    }
    .portal-chrome .admin-page-header:has(> .admin-page-header-actions > .admin-page-header-overflow:only-child) > .admin-page-header-copy {
        padding-right: calc(44px + var(--space-2));
    }
}
.admin-form label.portal-content-check:not(.admin-checkbox):not(.admin-switch) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 20px;
}
.admin-form label.portal-content-check input {
    width: 16px;
    height: 16px;
    min-height: 0;
}
@media (pointer: coarse) {
    .admin-form label.portal-content-check:not(.admin-checkbox):not(.admin-switch) {
        min-height: 44px;
    }
}
.portal-content-pagination {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-4);
}
.portal-content-editor-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.portal-content-blocks {
    display: grid;
    gap: var(--space-3);
}
.portal-content-block {
    border-radius: var(--radius-sm);
    background: var(--surface);
    min-width: 0;
}
.portal-content-block-head {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
}
.portal-content-block-actions,
.portal-content-block-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.portal-content-block-body {
    padding: var(--space-3);
    min-width: 0;
}
.portal-content-block-fields {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}
.portal-content-block-media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}
.portal-content-block-thumb {
    display: block;
    width: 120px;
    height: 80px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-2);
}
.portal-content-gallery-items {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-content-gallery-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}
.portal-content-gallery-item .portal-content-block-thumb {
    width: 96px;
    height: 64px;
}
.portal-content-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}
.portal-content-column {
    min-width: 0;
}
.portal-content-revisions {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-content-revision {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}
.portal-content-revision-main {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}
.portal-content-revision-main small {
    color: var(--ink-3);
}
.portal-content-revision-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .portal-content-gallery-item {
        grid-template-columns: 1fr;
    }
}
.portal-content-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
}
.portal-content-variables {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-content-variables li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.portal-content-variable {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.portal-content-variable:hover,
.portal-content-variable:focus-visible {
    border-color: var(--ink-3);
}
.portal-content-variable code {
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
.portal-content-variable small {
    color: var(--ink-3);
}
.portal-content-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-content-mail-preview {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.portal-content-mail-frame {
    width: 100%;
    height: 520px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.portal-content-ai {
    display: grid;
    gap: 16px;
}
.portal-content-ai-slot {
    display: flex;
    justify-content: flex-end;
}
.portal-sms-mode {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    justify-self: start;
}
.portal-sms-mode label {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    font-size: var(--text-sm);
}
.portal-sms-mode label[data-active] {
    background: var(--surface, #fff);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--line);
}
.portal-sms-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.portal-sms-mode label:focus-within {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 1px;
}
.portal-sms-counter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: calc(var(--space-2) * -1);
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-sms-counter-error {
    color: var(--danger);
    font-weight: 600;
}
.portal-sms-when {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}
.portal-sms-when legend {
    margin-bottom: var(--space-1);
    padding: 0;
    font-weight: 600;
}
.portal-sms-when label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.portal-sms-sendat {
    display: grid;
    gap: var(--space-1);
    max-width: 320px;
}
.portal-sms-terms-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding-left: 1.2em;
}
.portal-sms-terms-note {
    margin: 0;
}
.portal-sms-confirm {
    display: grid;
    gap: var(--space-3);
}
.portal-sms-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: 0;
}
.portal-sms-summary > div {
    display: grid;
    gap: 2px;
}
.portal-sms-summary dt {
    color: var(--ink-2);
    font-size: var(--text-xs);
}
.portal-sms-summary dd {
    margin: 0;
    font-weight: 600;
}
.portal-sms-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.portal-sms-quote tfoot td {
    border-top: 1px solid var(--line);
    font-weight: 500;
}
.portal-sms-quote tfoot .portal-sms-total td {
    font-weight: 700;
}
.portal-sms-file {
    display: grid;
    gap: var(--space-1);
}
.portal-sms-import-result {
    display: grid;
    gap: var(--space-2);
}
.portal-sms-invalid {
    max-height: 220px;
    margin: 0;
    padding-left: 1.2em;
    overflow: auto;
    font-size: var(--text-sm);
}
.portal-sms-optout-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    margin-bottom: var(--space-3);
}
.portal-sms-optout-form label {
    display: grid;
    flex: 1 1 200px;
    gap: var(--space-1);
}
.portal-chrome.admin-chrome {
    --canvas: var(--canvas-portal);
    --portal-nav-h: 0px;
    grid-template-columns: 240px minmax(0, 1fr);
    background: var(--canvas);
    font-size: var(--text-body-lg);
    line-height: var(--lh-body-lg);
}
.portal-side {
    --rail-bg: var(--sidebar-bg);
    align-self: stretch;
    border-right: 1px solid var(--line);
    
    background: var(--sidebar-bg);
}
.portal-nav.fss-rail::before {
    display: none;
}
.portal-side-inner {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4) var(--space-3);
    overflow: hidden auto;
}
.portal-side-brand {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
}
.portal-side-brand .logo-image {
    width: auto;
    height: 30px;
}
.portal-nav {
    --rail-top: 8px;
    --rail-bottom: 8px;
    display: grid;
    gap: 2px;
    padding: var(--space-1) 0;
}
.portal-nav-row {
    position: relative;
}
.portal-nav-link {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: var(--space-3);
    margin-left: 0;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    text-align: left;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.portal-nav-link:hover {
    background: var(--nav-hover);
    color: var(--ink);
}
.portal-nav-row[data-active] > .portal-nav-link {
    background: var(--nav-active);
    color: var(--ink);
    font-weight: var(--font-medium);
}
.portal-nav-row[data-active]:has(.portal-nav-sublink[data-active]) > .portal-nav-link {
    background: none;
}
.portal-nav-link > svg {
    flex: none;
}
.portal-nav-label {
    min-width: 0;
    flex: 1 1 auto;
}
.portal-nav-chevron {
    color: var(--ink-3);
    transition: transform var(--dur-fast) var(--ease-out);
}
.portal-nav-row[data-open] > .portal-nav-link .portal-nav-chevron {
    transform: rotate(90deg);
}
.fss-rail-node.portal-nav-node {
    position: absolute;
    top: 14px;
    left: -10px;
    width: 3px;
    height: 16px;
    border: 0;
    border-radius: 3px;
    background: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), var(--ink) 18%);
}
.portal-nav-sub {
    overflow: hidden;
}
.portal-nav-sub-inner {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 2px 0 4px 32px;
}
.portal-nav-sub-inner::before {
    position: absolute;
    top: 0;
    bottom: 24px;
    left: 21px;
    width: 1px;
    background: var(--line);
    content: "";
    pointer-events: none;
}
.portal-nav-sublink {
    position: relative;
}
.portal-nav-sublink::before {
    position: absolute;
    top: 50%;
    left: -13.5px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--line-field);
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
}
.portal-nav-sublink[data-active]::before {
    background: var(--accent);
    box-shadow: 0 0 0 1.5px var(--ink);
}
.portal-nav-sublink {
    display: flex;
    min-height: 40px;
    align-items: center;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    text-decoration: none;
}
.portal-nav-sublink:hover {
    background: var(--nav-hover);
    color: var(--ink);
}
.portal-nav-sublink[data-active] {
    background: var(--nav-active);
    color: var(--ink);
    font-weight: var(--font-medium);
}
.portal-top-start {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    overflow: hidden;
}
/* The persisted wrapper (x-persist) must not become a flex item of its own: the strip inside keeps its own overflow and min-width. */
.portal-top-start > [x-persist="portal-pins"] {
    display: contents;
}
.portal-top-end {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
}
.portal-top-action {
    display: inline-flex;
    height: 36px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: var(--text-small);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.portal-stacko-mark {
    flex: 0 0 auto;
    filter: brightness(0);
    opacity: 0.72;
}
.portal-chrome.portal-focus {
    display: block;
    --portal-nav-h: 0px;
}
.portal-focus-head {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--page-pad);
}
.portal-focus .admin-content {
    max-width: 960px;
    margin: 0 auto;
    padding-inline: var(--page-pad);
}
.portal-top .admin-tabs-pin[data-labeled] {
    width: auto;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    font-size: var(--text-small);
    font-weight: var(--font-medium);
}
.portal-top .admin-tabs-pin-hint {
    white-space: nowrap;
}
.portal-top-action:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.portal-top-action:focus-visible,
.portal-credit-chip:focus-visible,
.portal-user:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
.portal-top-action-out {
    color: var(--ink-3);
}
.portal-credit-chip {
    display: inline-flex;
    height: 36px;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3) 0 10px;
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}
.portal-credit-chip:hover {
    background: var(--surface-2);
}
.portal-credit-chip > svg {
    flex: none;
    color: var(--ink-2);
}
.portal-credit-chip-count {
    font-variant-numeric: tabular-nums;
}
.portal-credit-chip[data-tone="danger"] {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}
.portal-credit-chip[data-tone="danger"] > svg {
    color: currentColor;
}
.portal-usermenu {
    position: relative;
    display: inline-flex;
}
.portal-user {
    display: inline-flex;
    max-width: 240px;
    height: 36px;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    padding: 0 6px 0 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: none;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    transition: background var(--dur-fast) var(--ease-out);
}
.portal-user:hover,
.portal-user[aria-expanded="true"] {
    background: var(--surface-2);
}
.portal-user > svg {
    flex: none;
    color: var(--ink-3);
}
.portal-user-name {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-avatar {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--accent); 
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
}
.portal-usermenu-popover {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + var(--space-2));
    right: 0;
    display: grid;
    width: 312px;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.portal-usermenu-identity {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-3) var(--space-2);
    line-height: 1.3;
}
.portal-usermenu-identity strong {
    overflow: hidden;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-usermenu-identity small {
    overflow: hidden;
    color: var(--ink-3);
    font-size: var(--text-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-usermenu-popover :is(a, button) {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
}
.portal-usermenu-popover :is(a, button):hover {
    background: var(--surface-2);
}
.portal-usermenu-popover form {
    margin: 0;
}
.portal-usermenu-sep {
    height: 1px;
    margin: var(--space-1) 0;
    border: 0;
    background: var(--line);
}
.portal-usermenu-popover .portal-lang-field {
    padding: var(--space-2) var(--space-3);
}
.portal-usermenu-popover .admin-prefs-segmented button {
    display: inline-block;
    width: auto;
    min-height: 0;
    height: 32px;
    padding: 0 12px;
    background: none;
    color: var(--ink-2);
    font-size: var(--text-small);
    font-weight: var(--font-medium);
    text-align: center;
}
.portal-usermenu-popover .admin-prefs-segmented button[aria-pressed="true"],
.portal-usermenu-popover .admin-prefs-segmented button[aria-pressed="true"]:hover {
    background: var(--surface);
    color: var(--ink);
}
.portal-usermenu-popover .admin-prefs-row.admin-prefs-switchrow {
    min-height: 44px;
    justify-content: space-between;
    gap: var(--space-3);
}
.portal-usermenu-popover .admin-prefs {
    min-width: 0;
}
.portal-usermenu-popover .admin-prefs-row {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 var(--space-3);
}
.portal-usermenu-popover .admin-prefs-row:not(.admin-prefs-switchrow) {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
}
.portal-more-prefs {
    border-top: 1px solid var(--line);
    padding-top: var(--space-2);
}
.portal-chrome.admin-chrome > .admin-content > .portal-top {
    position: sticky;
    z-index: var(--z-sticky);
    top: 0;
    display: flex;
    width: 100%;
    max-width: none;
    height: 52px; 
    flex: none;
    align-items: center;
    margin-inline: 0;
    gap: var(--space-4);
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
}
.portal-top > * {
    min-width: 0;
}
.portal-top > .portal-top-end {
    min-width: auto;
}
@media (max-width: 1279px) {
    .portal-top-action-label,
    .portal-top-action-out,
    .portal-user-name {
        display: none;
    }
    .portal-top-action {
        width: 36px;
        justify-content: center;
        padding: 0;
    }
}
.portal-mtop,
.portal-bnav,
.portal-paybar {
    display: none;
}
@media (max-width: 1023px) {
    .portal-chrome.admin-chrome {
        --portal-nav-h: calc(64px + env(safe-area-inset-bottom));
        
        --fss-bottom-nav-h: var(--portal-nav-h);
        --fss-actionbar-safe: 0px;
        grid-template-columns: minmax(0, 1fr);
        
        grid-template-rows: auto minmax(0, 1fr);
    }
    html:has(.portal-chrome[data-has-user]) {
        --bottom-nav-h: 64px;
    }
    html:has(.portal-chrome[data-has-user][data-pay-bar]) {
        --bottom-nav-h: 128px;
    }
    html:has(.portal-chrome[data-has-user] .fss-actionbar[data-variant="fixed"]) {
        --bottom-nav-h: 120px;
    }
    .portal-side,
    .portal-chrome.admin-chrome > .admin-content > .portal-top,
    .portal-banner-slot {
        display: none;
    }
    .portal-mtop {
        position: sticky;
        z-index: var(--z-sticky);
        top: 0;
        display: flex;
        height: 48px;
        align-items: center;
        gap: var(--space-3);
        padding: 0 var(--space-4);
        border-bottom: 1px solid var(--line);
        background: var(--surface);
    }
    .portal-mtop-brand .logo-image {
        width: auto;
        height: 24px;
    }
    .portal-mtop .portal-credit-chip {
        height: 32px;
        margin-left: auto;
        padding: 0 10px 0 8px;
    }
    .portal-mtop-title {
        overflow: hidden;
        min-width: 0;
        padding-left: var(--space-3);
        border-left: 1px solid var(--line);
        color: var(--ink-2);
        font-size: var(--text-small);
        font-weight: var(--font-medium);
        line-height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .portal-chrome.admin-chrome > .admin-content > :not(.portal-top):not(.portal-banner-slot) {
        padding-inline: var(--space-4);
    }
    .portal-chrome.admin-chrome > .admin-content {
        padding-bottom: calc(var(--portal-nav-h) + var(--space-4));
    }
    .portal-chrome.admin-chrome[data-pay-bar]:not(:has(.fss-actionbar[data-variant="fixed"])) > .admin-content {
        padding-bottom: calc(var(--portal-nav-h) + 64px + var(--space-4));
    }
    .portal-paybar {
        position: fixed;
        z-index: var(--z-sticky);
        right: 0;
        bottom: var(--portal-nav-h);
        left: 0;
        display: block;
        padding: var(--space-2) var(--space-4);
        border-top: 1px solid var(--line);
        background: var(--surface);
    }
    .portal-chrome:has(.fss-actionbar[data-variant="fixed"]) .portal-paybar {
        display: none;
    }
    .portal-bnav {
        --rail-bg: var(--night);
        position: fixed;
        z-index: var(--z-sticky);
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        height: var(--portal-nav-h);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--night);
    }
    .portal-bnav[data-cols="5"] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .portal-bnav::before {
        position: absolute;
        top: 0;
        right: var(--space-3);
        left: var(--space-3);
        height: 3px;
        border-radius: 3px;
        background: var(--ink-2);
        content: "";
        pointer-events: none;
    }
    .portal-bnav-item {
        position: relative;
        display: flex;
        min-height: 64px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: var(--space-2) 0 0;
        border: 0;
        background: none;
        color: #aeb6af; 
        cursor: pointer;
        font: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .portal-bnav-item[data-active] {
        color: #ffffff;
    }
    .portal-bnav-item:focus-visible {
        border-radius: var(--radius-sm);
        box-shadow: inset 0 0 0 2px var(--accent);
    }
    .portal-bnav-icon {
        position: relative;
        display: inline-flex;
        height: 24px;
        align-items: center;
    }
    .portal-bnav-label {
        font-size: var(--text-caption);
        font-weight: var(--font-medium);
        line-height: 16px;
    }
    .portal-bnav-item[data-active] .portal-bnav-label {
        font-weight: var(--font-semibold);
    }
    .fss-rail-node.portal-bnav-node {
        position: absolute;
        top: -2.5px;
        left: calc(50% - 4px);
        box-shadow:
            inset 0 0 0 1.5px var(--night),
            0 0 0 3px rgba(199, 255, 74, 0.3);
    }
}
.portal-more .fss-sheet-body {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
}
.portal-more-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-3);
}
.portal-more-user-copy {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}
.portal-more-user-copy strong {
    overflow: hidden;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-more-user-copy small {
    overflow: hidden;
    color: var(--ink-3);
    font-size: var(--text-small);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-more-list {
    display: grid;
}
.portal-more-list--account {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
}
.portal-more-row {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-body-lg);
    font-weight: var(--font-medium);
    text-align: left;
    text-decoration: none;
}
.portal-more-row > svg:first-child {
    flex: none;
    color: var(--ink-2);
}
.portal-more-row > svg:last-child:not(:first-child) {
    margin-left: auto;
    color: var(--ink-3);
}
.portal-more-row > span {
    min-width: 0;
}
.portal-more-row[data-active] {
    background: var(--nav-active);
    font-weight: var(--font-semibold);
}
.portal-more-row--logout {
    margin-top: var(--space-2);
    border-top: 1px solid var(--line);
    border-radius: 0;
    color: var(--danger);
}
.portal-more-row--logout > svg:first-child {
    color: var(--danger);
}
.portal-more-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 0 var(--space-2) 40px;
}
.portal-more-chip {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--control-fill);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    text-decoration: none;
}
.portal-more-chip[data-active] {
    border-color: var(--selection-ink);
    background: var(--accent-soft);
    font-weight: var(--font-semibold);
}
.portal-more .portal-lang-field {
    padding: var(--space-3) var(--space-2);
}
.portal-more .portal-lang-options .portal-lang-option {
    min-height: 44px;
}
.portal-credit-topup {
    display: grid;
    gap: var(--space-4);
}
.portal-credit-amount-field .portal-credit-amount-input .admin-input {
    padding-left: calc(var(--space-3) + 18px);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
}
.portal-credit-preset-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}
.portal-credit-problem {
    margin: 0;
    color: var(--danger);
    font-size: var(--text-sm);
}
.portal-credit-quote {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.portal-credit-quote > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.portal-credit-quote dt {
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-credit-quote dd {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.portal-credit-quote[data-empty] dd {
    color: var(--ink-3);
}
.portal-credit-consent {
    align-items: flex-start;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.portal-credit-consent input {
    margin-top: 2px;
}
.portal-credit-methods {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.portal-credit-methods legend {
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.portal-credit-methods[aria-busy] {
    opacity: 0.6;
}
.portal-credit-submit .admin-btn {
    width: 100%;
}
.portal-credit-more {
    display: flex;
    justify-content: center;
    padding-top: var(--space-3);
}
.portal-credit-footer {
    margin: 0;
    font-size: var(--text-sm);
}
.portal-sms-credit .admin-kv {
    margin-bottom: 0.5rem;
}
.portal-sms-credit-line {
    margin-top: 0.25rem;
}
@media (max-width: 1023px) {
    .portal-chrome[data-pay-bar] .portal-header-pay {
        display: none;
    }
}
.portal-phase .fss-rail-node {
    z-index: 1;
}
.portal-billing-settings {
    display: grid;
    gap: var(--space-3);
    scroll-margin-top: var(--space-6);
}
.portal-billing-settings-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
}
.portal-billing-setting {
    display: grid;
    gap: var(--space-2);
    align-content: start;
}
.portal-billing-setting h3 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: var(--font-medium);
}
@media (min-width: 1024px) {
    .portal-billing-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
.portal-invoice-layout {
    display: grid;
    gap: var(--stack-cards);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
    .portal-invoice-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }
}
.portal-invoice-card {
    display: grid;
    gap: var(--space-4);
}
.portal-invoice-from {
    margin: 0;
    color: var(--ink);
    font-weight: var(--font-semibold);
}
.portal-invoice-from span {
    color: var(--ink-3);
    font-weight: var(--font-regular);
}
.portal-invoice-figure {
    display: grid;
    gap: var(--space-1);
}
.portal-invoice-figure-label {
    color: var(--ink-2);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}
.portal-invoice-figure-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}
.portal-invoice-amount {
    color: var(--ink);
    font-size: var(--text-display-xl);
    line-height: var(--lh-display-xl);
}
.portal-invoice-when {
    margin: 0;
    color: var(--ink-2);
}
.portal-invoice-when[data-overdue] {
    color: var(--danger);
    font-weight: var(--font-medium);
}
.portal-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.portal-invoice-hint {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}
.portal-invoice-lines {
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
}
.portal-invoice-lines summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--ink);
    cursor: pointer;
    font-weight: var(--font-semibold);
    list-style: none;
}
.portal-invoice-lines summary::-webkit-details-marker {
    display: none;
}
.portal-invoice-lines summary small {
    color: var(--ink-2);
    font-size: var(--text-small);
    font-weight: var(--font-regular);
}
.portal-invoice-lines summary:focus-visible {
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: var(--focus-ring);
}
.portal-invoice-line-list {
    display: grid;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}
.portal-invoice-line-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
}
.portal-invoice-line-desc {
    min-width: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.portal-invoice-line-qty {
    margin-right: 6px;
    color: var(--ink-3);
}
.portal-invoice-line-amount {
    color: var(--ink);
}
.portal-invoice-line-note {
    margin: var(--space-2) 0 0;
    color: var(--ink-3);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
}
.portal-invoice-totals {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
}
.portal-invoice-totals > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--ink-2);
}
.portal-invoice-totals dd {
    margin: 0;
}
.portal-invoice-totals > div[data-total] {
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-weight: var(--font-semibold);
}
.portal-invoice-side {
    display: grid;
    gap: var(--stack-cards);
}
.portal-invoice-autopay {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
}
.portal-invoice-autopay h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-h3);
    font-weight: var(--font-semibold);
}
.portal-invoice-autopay p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}
@media (max-width: 1023px) {
    .portal-chrome:has(.fss-actionbar[data-variant="fixed"]) .portal-invoice-pay {
        display: none;
    }
}
.portal-thanks {
    display: grid;
    gap: var(--space-4);
    --rail-bg: var(--surface);
}
.portal-thanks-head {
    display: grid;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: 24px minmax(0, 1fr);
}
.portal-thanks-node {
    position: relative;
    height: 28px;
}
.portal-thanks-node .fss-rail-node {
    position: absolute;
    top: 10px;
    left: 7.5px;
}
.portal-thanks-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-h2);
    font-weight: var(--font-semibold);
    line-height: var(--lh-h2);
}
.portal-thanks-copy p {
    margin: var(--space-1) 0 0;
    color: var(--ink-2);
}
.portal-thanks-figure,
.portal-thanks-next,
.portal-thanks-actions,
.portal-thanks-question {
    padding-left: calc(24px + var(--space-3));
}
.portal-thanks-figure {
    display: grid;
    gap: 2px;
    margin: 0;
}
.portal-thanks-figure-label {
    color: var(--ink-2);
    font-size: var(--text-small);
}
.portal-thanks-amount {
    color: var(--ink);
    font-size: var(--text-display-lg);
    line-height: var(--lh-display-lg);
}
.portal-thanks-next h3 {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-size: var(--text-h3);
    font-weight: var(--font-semibold);
}
.portal-thanks-next ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-left: 18px;
    color: var(--ink-2);
}
.portal-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (max-width: 599px) {
    .portal-thanks-figure,
    .portal-thanks-next,
    .portal-thanks-actions,
    .portal-thanks-question {
        padding-left: 0;
    }
}
.portal-voip-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--stack-cards);
}
@media (min-width: 1024px) {
    .portal-voip-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
    .portal-voip-calls {
        grid-column: 1;
        grid-row: 1;
    }
    .portal-voip-numbers {
        grid-column: 1;
        grid-row: 2;
    }
    .portal-voip-users {
        grid-column: 1;
        grid-row: 3;
    }
    .portal-voip-recording {
        grid-column: 1;
        grid-row: 4;
    }
    .portal-voip-start {
        grid-column: 2;
        grid-row: 1;
    }
    .portal-voip-notes {
        grid-column: 2;
        grid-row: 2;
    }
    .portal-voip-layout[data-start="none"] .portal-voip-notes {
        grid-row: 1;
    }
}
.portal-voip-start {
    display: grid;
    gap: var(--space-1);
}
.portal-voip-start-price {
    margin: var(--space-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    font-weight: var(--font-semibold);
    line-height: var(--lh-display-lg);
    letter-spacing: -0.015em;
    color: var(--ink);
}
.portal-voip-start .admin-muted {
    margin: var(--space-2) 0 0;
}
.portal-voip-table {
    width: 100%;
    border-collapse: collapse;
}
.portal-voip-table th,
.portal-voip-table td {
    padding: var(--space-3) var(--space-2);
    border-top: 1px solid var(--line);
    text-align: right;
    vertical-align: middle;
}
.portal-voip-table thead th {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    border-top: 0;
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    line-height: var(--lh-caption);
}
.portal-voip-table thead th:first-child,
.portal-voip-table tbody th {
    padding-left: 0;
    text-align: left;
}
.portal-voip-table td:last-child,
.portal-voip-table thead th:last-child {
    padding-right: 0;
}
.portal-voip-table tbody th {
    font-weight: var(--font-medium);
    color: var(--ink);
}
.portal-voip-table--calls td {
    width: 24%;
}
.portal-voip-table--numbers td {
    width: 21%;
}
.portal-voip-country {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.portal-voip-dial {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 48px;
    min-height: 24px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    text-align: center;
}
.portal-voip-dial svg {
    flex: none;
}
.portal-voip-country-name {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.portal-voip-country-note,
.portal-voip-once {
    white-space: nowrap;
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-regular);
    line-height: var(--lh-caption);
}
.portal-voip-country-note.portal-voip-ranges {
    max-width: 44ch;
    white-space: normal;
    overflow-wrap: anywhere;
}
.portal-voip-price {
    display: inline-grid;
    gap: 2px;
    justify-items: end;
}
.portal-voip-price[data-empty="true"] {
    color: var(--ink-3);
}
.portal-voip-excl {
    color: var(--ink);
    font-size: var(--text-h3);
    font-weight: var(--font-semibold);
    line-height: var(--lh-h3);
}
.portal-voip-incl {
    color: var(--ink-3);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
}
.portal-voip-cell-label {
    display: none;
}
.portal-voip-other-row th,
.portal-voip-other-row td {
    border-top: 1px solid var(--line-strong);
}
.portal-voip-disclaimer {
    margin: var(--space-4) 0 0;
    max-width: 72ch;
    color: var(--ink-3);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
}
.portal-voip-disclaimer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.portal-voip-notes-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-left: 18px;
    color: var(--ink-2);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}
@media (max-width: 640px) {
    .portal-voip-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .portal-voip-table,
    .portal-voip-table tbody {
        display: block;
    }
    .portal-voip-table tbody tr {
        display: grid;
        grid-template-columns: repeat(var(--voip-cols, 2), minmax(0, 1fr));
        gap: var(--space-2) var(--space-3);
        padding: var(--space-3) 0;
        border-top: 1px solid var(--line);
    }
    .portal-voip-table--calls tbody tr {
        --voip-cols: 2;
    }
    .portal-voip-table--numbers tbody tr {
        --voip-cols: 3;
    }
    .portal-voip-table tbody tr:first-child {
        border-top: 0;
    }
    .portal-voip-table th,
    .portal-voip-table td,
    .portal-voip-table td:last-child {
        padding: 0;
        border-top: 0;
        text-align: left;
    }
    .portal-voip-table tbody th {
        grid-column: 1 / -1;
    }
    .portal-voip-table--calls td,
    .portal-voip-table--numbers td {
        width: auto;
    }
    .portal-voip-cell-label {
        display: grid;
        margin-bottom: var(--space-1);
        color: var(--ink-3);
        font-size: var(--text-caption);
        line-height: var(--lh-caption);
    }
    .portal-voip-table--numbers .portal-voip-cell-label {
        align-content: start;
        min-height: calc(2 * var(--lh-caption));
    }
    .portal-voip-price {
        justify-items: start;
    }
}
.portal-voip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--stack);
}
.portal-voip-list {
    display: grid;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    list-style: none;
    overflow: hidden;
}
.portal-voip-list > li + li {
    border-top: 1px solid var(--line);
}
.portal-voip-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-height: 64px;
    padding: var(--space-3) var(--space-5);
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}
.portal-voip-row:hover {
    background: var(--surface-2);
}
.portal-voip-row:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--focus-ring-color);
}
.portal-voip-row > svg {
    flex: none;
    color: var(--ink-3);
}
.portal-voip-row-copy {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}
.portal-voip-row-copy strong {
    overflow: hidden;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-voip-row-copy small {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-voip-step {
    display: grid;
    gap: 2px;
}
.portal-voip-step[data-kind="missing"] .portal-voip-step-label,
.portal-voip-step[data-kind="missing"] .portal-voip-step-icon {
    color: var(--warning);
}
.portal-voip-form .portal-voip-lock {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.portal-voip-cost {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 20px;
}
.portal-voip-cost p {
    margin: 0;
}
.portal-voip-cost strong {
    color: var(--ink);
}
.portal-voip-help {
    display: block;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    line-height: 16px;
}
.admin-form label.portal-voip-check > span {
    display: grid;
    gap: 2px;
}
.admin-form label.portal-voip-check > span.portal-voip-cline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.admin-form label.portal-voip-check--nested {
    padding-left: var(--space-6);
}
.admin-form label.portal-voip-check:has(input:disabled) {
    color: var(--ink-3);
}
.admin-form.portal-voip-form label.portal-voip-inline:not(.admin-checkbox) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}
.admin-form.portal-voip-form label.portal-voip-inline input {
    width: 84px;
    text-align: right;
}
.portal-voip-drawer-actions .portal-voip-help {
    flex-basis: 100%;
    max-width: 60ch;
}
.admin-form label.portal-voip-choice:not(.admin-checkbox) {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
}
.admin-form label.portal-voip-choice[data-active] {
    border-color: var(--selection-ink);
    box-shadow: inset 0 0 0 1px var(--selection-ink);
}
.admin-form label.portal-voip-choice:focus-within {
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.portal-voip-choice span {
    display: grid;
    gap: 2px;
}
.portal-voip-choice small {
    color: var(--ink-2);
    font-size: var(--text-xs);
}
.admin-form.portal-voip-form .portal-voip-member-tools label.portal-voip-inline input {
    width: 64px;
    height: var(--control-sm);
}
.admin-form label.portal-voip-check > span.portal-voip-cline--start {
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-2);
}
.portal-voip-countries {
    display: grid;
    max-height: 320px;
    margin: 0;
    padding: var(--space-1) 0;
    border-radius: var(--radius-md);
    list-style: none;
    overflow-y: auto;
}
.portal-voip-countries > li {
    padding: var(--space-1) var(--space-3);
}
.admin-form .portal-voip-countries label.portal-voip-check {
    font-size: var(--text-sm);
}
@media (max-width: 640px) {
    .portal-voip-row {
        min-height: 60px;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
}
.portal-voip-player {
    display: grid;
    gap: var(--space-3);
}
.portal-voip-player audio {
    display: block;
    width: 100%;
}
.portal-voip-player p {
    margin: 0;
}
.portal-voip-vm-transcript {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--line-strong);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
.portal-voip-vm-transcript p {
    margin-top: var(--space-1);
    color: var(--ink);
    white-space: pre-line;
}
.portal-voip-soundrow > .portal-voip-row {
    flex: 1;
    min-width: 0;
    padding-left: var(--space-3);
}
.portal-content-ticket-msg[data-internal="true"] .admin-ticket-bubble {
    border-style: dashed;
    background: var(--warning-bg);
}
.portal-content-ticket-composer .admin-switch span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.portal-voip-subnav {
    display: none;
}
@media (max-width: 768px) {
    .portal-voip-subnav {
        display: block;
        margin-inline: calc(-1 * var(--page-pad, 16px));
    }
    .portal-voip-subnav ul {
        display: flex;
        gap: var(--space-2);
        margin: 0;
        padding: 0 var(--page-pad, 16px) var(--space-1);
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .portal-voip-subnav ul::-webkit-scrollbar {
        display: none;
    }
    .portal-voip-subnav li {
        flex: none;
        scroll-snap-align: center;
    }
    .portal-voip-subnav a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 var(--space-4);
        border-radius: var(--radius-full);
        background: var(--surface-2);
        color: var(--ink-2);
        font-size: var(--text-sm);
        text-decoration: none;
        white-space: nowrap;
    }
    .portal-voip-subnav a[aria-current="page"] {
        background: var(--ink);
        color: var(--surface);
        font-weight: var(--font-semibold);
    }
    .portal-voip-subnav a:focus-visible {
        outline: 2px solid var(--focus-ring-color);
        outline-offset: 2px;
    }
}
.admin-form label.portal-voip-dayname {
    min-height: 36px;
    font-weight: var(--font-medium);
}
.portal-voip-ranges {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}
.portal-voip-holidays > li:not([data-on]) .portal-voip-cline > span:first-child {
    color: var(--ink-3);
}
.portal-voip-connectbox h3,
.portal-voip-danger h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-voip-danger {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}
.portal-voip-qr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-voip-app {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    
    container-type: inline-size;
}
.portal-voip-app-link .admin-btn {
    justify-content: center;
    gap: var(--space-2);
}
.portal-voip-app-link .portal-voip-help {
    margin: 0;
    text-align: center;
    font-size: var(--text-xs);
}
.portal-voip-app-copy .admin-status-badge {
    margin-top: var(--space-1);
}
.portal-voip-app-badges .admin-status-badge {
    margin-top: var(--space-1);
}
.portal-voip-app-rolechoice .admin-prefs-switchrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
}
.portal-voip-app-rolechoice .admin-prefs-switchrow:disabled {
    cursor: default;
    opacity: 0.6;
}
@media (max-width: 480px) {
    .portal-voip-app-item > .admin-btn {
        grid-column: 2;
        justify-self: start;
    }
}
.portal-voip-usage {
    display: grid;
    gap: var(--space-4);
}
.portal-voip-usage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
}
.portal-voip-usage-head h2 {
    margin: 0;
    font-size: var(--text-h3);
}
.portal-voip-usage-month {
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-voip-usage-body {
    display: grid;
    gap: var(--space-3);
}
.portal-voip-usage-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    margin: 0;
}
.portal-voip-usage-number {
    font-size: var(--text-3xl);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
}
.portal-voip-usage-unit {
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-voip-usage-calls {
    flex-basis: 100%;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-voip-usage-plan {
    display: grid;
    gap: var(--space-2);
}
.portal-voip-meter {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 3px;
    max-width: 28rem;
}
.portal-voip-meter span {
    height: 12px;
    border-radius: 2px;
    background: var(--line);
}
.portal-voip-meter span[data-on="true"] {
    background: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink), transparent 78%);
    animation: portal-voip-meter-on 260ms ease-out both;
    animation-delay: calc(var(--i, 0) * 28ms);
}
.portal-voip-meter span[data-on="true"][data-full="true"] {
    background: var(--selection-ink);
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .portal-voip-meter span[data-on="true"] {
        animation: none;
    }
}
.portal-voip-usage-plantext {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-voip-usage-plantext strong {
    color: var(--ink);
    font-weight: 600;
}
.portal-voip-usage-extra,
.portal-voip-usage-users {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-sm);
}
.portal-voip-usage-cost {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.portal-voip-usage-cost dt {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 500;
}
.portal-voip-usage-cost dd {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.portal-voip-usage-note {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
}
.portal-voip-usage-link {
    justify-self: start;
    font-size: var(--text-sm);
}
.portal-content-form-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.portal-content-inline-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
}
.portal-content-appointment {
    display: grid;
    gap: var(--space-4);
}
.portal-content-appointment-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    color: var(--ink-2);
}
.portal-content-appointment-notes {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.portal-content-appointment-actions,
.portal-content-appointment-cancel {
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.portal-content-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: var(--space-2);
}
.portal-content-slot {
    min-height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.portal-content-slot:hover {
    background: var(--surface-2);
}
.portal-content-slot[data-selected] {
    border-color: var(--ink);
    background: var(--accent-soft);
    font-weight: var(--font-semibold);
}
.portal-content-slot--ghost {
    justify-self: start;
    color: var(--ink-2);
}
.portal-appt-week {
    display: grid;
    gap: var(--space-4);
}
.portal-appt-week-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}
.portal-appt-week-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-appt-week-filter button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}
.portal-appt-week-filter button[data-active] {
    border-color: var(--ink);
    background: var(--accent-soft);
    color: var(--ink);
    font-weight: var(--font-semibold);
}
.portal-appt-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--block-color, var(--ink-3));
}
.portal-appt-week-grid {
    display: grid;
    grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.portal-appt-week-corner,
.portal-appt-week-day {
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.portal-appt-week-day {
    padding: var(--space-2) var(--space-2);
    border-left: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-align: center;
}
.portal-appt-week-day[data-today] {
    background: var(--accent-soft);
    color: var(--ink);
}
.portal-appt-week-gutter {
    position: relative;
    height: calc(var(--week-hours) * var(--hour-h));
}
.portal-appt-week-gutter span {
    position: absolute;
    right: var(--space-2);
    color: var(--ink-3);
    font-size: var(--text-xs);
    line-height: 1;
    transform: translateY(-50%);
}
.portal-appt-week-gutter span:first-child {
    transform: translateY(2px);
}
.portal-appt-week-col {
    position: relative;
    height: calc(var(--week-hours) * var(--hour-h));
    border-left: 1px solid var(--line);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--hour-h) - 1px),
        var(--line) calc(var(--hour-h) - 1px),
        var(--line) var(--hour-h)
    );
}
.portal-appt-week-col[data-today] {
    background-color: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}
.portal-appt-closed {
    color: var(--ink-3);
    font-size: var(--text-xs);
}
.portal-appt-week-col > .portal-appt-closed {
    position: absolute;
    top: var(--space-2);
    right: 0;
    left: 0;
    text-align: center;
}
.portal-appt-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px 3px 8px;
    border: 0;
    border-left: 3px solid var(--block-color, var(--ink-3));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--block-color, var(--ink-3)) 13%, var(--surface));
    color: var(--ink);
    font: inherit;
    font-size: var(--text-xs);
    line-height: 1.25;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.portal-appt-block:hover,
.portal-appt-block:focus-visible {
    background: color-mix(in srgb, var(--block-color, var(--ink-3)) 24%, var(--surface));
}
.portal-appt-block span {
    font-weight: var(--font-semibold);
}
.portal-appt-block small {
    overflow: hidden;
    color: var(--ink-2);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-appt-days {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-appt-days li {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}
.portal-appt-days li:last-child {
    border-bottom: 0;
}
.portal-appt-days li[data-today] > strong::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-radius: var(--radius-full);
    background: var(--accent);
    vertical-align: middle;
}
.portal-appt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-appt-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-height: 44px;
    padding: 4px 12px 4px 10px;
    border: 0;
    border-left: 3px solid var(--block-color, var(--ink-3));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--block-color, var(--ink-3)) 13%, var(--surface));
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}
.portal-appt-chip small {
    color: var(--ink-2);
    font-size: var(--text-xs);
}
@media (max-width: 760px) {
    .portal-appt-week-grid {
        display: none;
    }
    .portal-appt-days {
        display: block;
    }
    .portal-content-form-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}
.portal-content-linked-list .admin-datatable-cellmain {
    min-width: 0;
    overflow-wrap: anywhere;
}
.portal-content-note-meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    color: var(--ink-2);
}
.portal-shop-statuscell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.portal-shop-photos {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}
.portal-shop-photos li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.portal-shop-photos img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xs);
    object-fit: cover;
}
@media (max-width: 760px) {
    .portal-shop-variant > .portal-table-actions {
        grid-column: 2;
        grid-row: 1;
    }
}
.portal-shop-order-main,
.portal-shop-order-side {
    display: grid;
    align-content: start;
    gap: var(--stack-cards);
    min-width: 0;
}
.portal-shop-lines td,
.portal-shop-lines th {
    vertical-align: top;
}
.portal-shop-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.portal-shop-totals dt {
    color: var(--ink-2);
}
.portal-shop-totals dd {
    margin: 0;
    text-align: right;
}
.portal-shop-totals .portal-shop-total {
    color: var(--ink);
    font-weight: 600;
}
.portal-shop-line {
    display: block;
}
.portal-shop-payment {
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}
.portal-shop-payment:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.portal-shop-refunds {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-shop-refunds li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.portal-shop-refunds small {
    flex-basis: 100%;
    color: var(--ink-2);
}
@media (pointer: coarse) {
    :is(.portal-mtop-brand) {
        position: relative;
    }
    :is(.portal-mtop-brand)::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        content: "";
        transform: translate(-50%, -50%);
    }
}
.portal-invoice-lines {
    display: grid;
    gap: var(--space-2);
}
.portal-invoice-line {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(4.5rem, 0.6fr) minmax(6rem, 0.9fr) minmax(5rem, 0.7fr) minmax(5.5rem, 0.9fr) auto;
    gap: var(--space-2);
    align-items: center;
}
.portal-invoice-line label {
    display: block;
    margin: 0;
}
.portal-invoice-line input,
.portal-invoice-line select {
    width: 100%;
    min-width: 0;
}
.portal-invoice-line-total {
    text-align: right;
    white-space: nowrap;
}
.portal-invoice-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-5);
    margin: 0 0 var(--space-3);
}
.portal-invoice-totals dt {
    color: var(--ink-2);
}
.portal-invoice-totals dd {
    margin: 0;
    text-align: right;
}
.portal-invoice-totals .portal-invoice-total {
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
}
@media (max-width: 760px) {
    .portal-invoice-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }
    .portal-invoice-line > label:first-child {
        grid-column: 1 / -1;
    }
    .portal-invoice-line-total {
        text-align: left;
    }
}
.portal-voip-setup-rail li > button > .fss-rail-node {
    margin: 6px 0 0 7.5px;
}
@media (max-width: 1023px) {
    .portal-voip-setup-rail li > button > .fss-rail-node {
        margin: 2px 0 0;
    }
}
.portal-voip-setup-form {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
}
.portal-voip-setup-block {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}
.portal-voip-setup-subtitle {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.admin-form .portal-voip-setup-choices label.portal-voip-choice:not(.admin-checkbox) {
    grid-template-columns: auto minmax(0, 1fr);
}
.admin-form .portal-voip-setup-choices label.portal-voip-choice[data-icon]:not(.admin-checkbox) {
    grid-template-columns: auto auto minmax(0, 1fr);
}
.portal-voip-setup-device-name .portal-voip-ext-chip {
    flex: none;
}
.portal-voip-setup-flow header .portal-voip-setup-subtitle {
    margin: 0;
}
.portal-voip-setup-start {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
}
.portal-voip-setup-start h2,
.portal-voip-setup-start p {
    margin: 0;
}
.portal-voip-setup-start h2 {
    font-size: var(--text-lg);
}
.portal-voip-setup-start p {
    margin-top: var(--space-1);
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-voip-setup-start-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--selection-ink);
}
@media (max-width: 640px) {
    .portal-voip-setup-start {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .portal-voip-setup-start > a {
        grid-column: 1 / -1;
        justify-content: center;
    }
}
.portal-voip-setup-forward {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-voip-setup-forward > li {
    display: grid;
    gap: var(--space-3);
}
.portal-voip-setup-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
@media (max-width: 480px) {
    .portal-voip-setup-dates {
        grid-template-columns: minmax(0, 1fr);
    }
}
.portal-voip-setup-periods {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-voip-setup-periods > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-sm);
}
.admin-form.portal-voip-setup-form label.portal-voip-check > span.portal-voip-cline {
    display: grid;
    justify-content: start;
    gap: 2px;
}
.portal-voip-mode {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-voip-mode button {
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.portal-voip-mode button:hover {
    color: var(--ink);
}
.portal-voip-mode button[aria-pressed="true"] {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    font-weight: var(--font-semibold);
}
.portal-voip-mode button:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 0;
}
.portal-voip-mode[data-busy] {
    opacity: 0.7;
}
@media (pointer: coarse) {
    .portal-voip-mode button {
        min-height: 40px;
    }
}
.portal-voip-simple-dot {
    display: block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--line-strong);
}
.portal-voip-simple-dot[data-tone="open"] {
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-bg);
}
.portal-voip-simple-dot[data-tone="reachable"] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--success);
}
.portal-voip-ext-chip {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium);
    line-height: 1.5;
    vertical-align: 1px;
}
.portal-contacts-find {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.portal-contacts-find label {
    display: grid;
    flex: 1 1 280px;
    gap: var(--space-1);
    min-width: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.portal-contacts-find p {
    flex: 1 1 100%;
    margin: 0;
}
.portal-contacts-consent {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}
.portal-contacts-consent h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-contacts-consent-list dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.portal-contacts-consent-list small {
    color: var(--ink-3);
}
.portal-contacts-consent-list .portal-contacts-consent-hint {
    flex-basis: 100%;
}
.admin-form .portal-contacts-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.portal-contacts-phones {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-contacts-phones li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem) auto auto;
    align-items: center;
    gap: var(--space-2);
}
.admin-form .portal-contacts-phones label.portal-contacts-primary {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.admin-form label.portal-contacts-search:not(.admin-checkbox):not(.admin-switch) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink-3);
}
.admin-form .portal-contacts-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.portal-contacts-pick {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-contacts-pick li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
}
.portal-contacts-pick label > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.portal-contacts-pick small {
    color: var(--ink-3);
}
.portal-contacts-merge {
    gap: var(--space-5);
}
.portal-contacts-drop {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    color: var(--ink-2);
    text-align: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.portal-contacts-drop:hover,
.portal-contacts-drop[data-dragging] {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}
.portal-contacts-drop:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}
.portal-contacts-drop strong {
    color: var(--ink);
    font-size: var(--text-md);
}
.portal-contacts-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.portal-contacts-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}
.portal-contacts-summary > div {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-contacts-summary dt {
    color: var(--ink-3);
    font-size: var(--text-xs);
}
.portal-contacts-summary dd {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-semibold);
}
.portal-contacts-columns {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-contacts-columns li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    align-items: center;
    gap: var(--space-3);
}
.portal-contacts-column-name {
    overflow: hidden;
    color: var(--ink);
    font-weight: var(--font-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-contacts-issues {
    display: grid;
    gap: var(--space-4);
}
.portal-contacts-issues h3 {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-contacts-issues ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-left: var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-contacts-target {
    max-width: 28rem;
}
@media (max-width: 640px) {
    .portal-contacts-phones li {
        grid-template-columns: minmax(0, 1fr) minmax(0, 7rem) auto;
    }
    .portal-contacts-phones li .portal-contacts-primary {
        grid-column: 1 / 3;
    }
    .portal-contacts-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portal-contacts-columns li {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
}
.portal-content-newsletter-progress {
    display: grid;
    gap: var(--space-1);
}
.portal-content-newsletter-progress progress {
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-2);
    accent-color: var(--accent);
}
.portal-content-newsletter-domain {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-top: 1px solid var(--line);
}
.portal-content-newsletter-domain:first-of-type {
    border-top: 0;
}
.portal-content-newsletter-records {
    overflow-x: auto;
}
.portal-content-newsletter-records code {
    overflow-wrap: anywhere;
    word-break: break-all;
}
.portal-notify-help {
    margin: 0 0 var(--space-3);
    max-width: 62ch;
}
.portal-notify-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-notify-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
}
.portal-notify-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 260px;
    gap: 2px;
}
.portal-notify-copy span {
    color: var(--ink-3);
    font-size: var(--text-small);
}
.portal-notify-channels {
    display: flex;
    flex: none;
    gap: var(--space-5);
}
.portal-notify-switch {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-base);
}
.portal-notify-switch input {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--selection-ink);
}
.portal-notify-switch[data-pending] {
    opacity: 0.6;
}
@media (max-width: 640px) {
    .portal-notify-channels {
        width: 100%;
    }
}
.portal-privacy {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}
.portal-privacy h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-privacy h4 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.portal-privacy-help,
.portal-privacy-legal {
    margin: 0;
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.portal-privacy-actions {
    display: grid;
    gap: var(--space-4);
}
.portal-privacy-actions > div {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
}
.portal-privacy-actions small,
.portal-privacy-request small {
    color: var(--ink-3);
}
.portal-privacy-requests {
    display: grid;
    gap: var(--space-2);
}
.portal-privacy-requests > ul,
.portal-privacy-steps {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-privacy-request {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-privacy-request-head,
.portal-privacy-steps li,
.portal-privacy-request-actions,
.portal-privacy-request-actions form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.portal-privacy-steps .portal-privacy-reason {
    flex-basis: 100%;
}
.portal-privacy.portal-privacy-list {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 0;
}
.portal-privacy-list h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
ul.portal-privacy-requests {
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-privacy-timeline {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.portal-contacts-touchpoints {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}
.portal-contacts-touchpoints h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-contacts-touchpoints-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-contacts-touchpoints-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-2);
}
.portal-contacts-touchpoints-list li > span {
    flex: 1 1 auto;
    min-width: 0;
}
.portal-contacts-touchpoints-open {
    flex: none;
    color: var(--ink);
    font-size: var(--text-sm);
    text-decoration: underline;
}
.portal-call {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.portal-call-reason {
    max-width: 38ch;
}
.portal-call-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.portal-call-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.portal-search-trigger {
    display: inline-flex;
    height: 36px;
    min-width: 168px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2) 0 var(--space-3);
    
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink-3);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-small);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.portal-search-trigger:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.portal-search-trigger:focus-visible,
.portal-search-icon:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
.portal-search-trigger-label {
    flex: 1 1 auto;
    text-align: left;
}
.portal-search-trigger kbd {
    display: inline-flex;
    height: 20px;
    align-items: center;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--sidebar-bg);
    color: var(--ink-3);
    font: inherit;
    font-size: var(--text-caption);
}
.portal-search-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
}
.portal-mtop .portal-search-icon + .portal-credit-chip {
    margin-left: 0;
}
@media (max-width: 1279px) {
    .portal-search-trigger {
        width: 36px;
        min-width: 0;
        justify-content: center;
        padding: 0;
        border-color: transparent;
        background: none;
    }
    .portal-search-trigger-label,
    .portal-search-trigger kbd {
        display: none;
    }
}
:is(.portal-spotlight, .portal-palette-sheet) kbd {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}
.portal-spotlight-result-source {
    max-width: 140px;
    overflow: hidden;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-spotlight-note {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) 10px;
    color: var(--ink-3);
    font-size: var(--text-caption);
    line-height: 18px;
}
.portal-spotlight {
    position: fixed;
    
    z-index: 10050;
    inset: 0;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 12vh var(--space-4) var(--space-4);
}
.portal-spotlight-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(16, 21, 18, 0.4);
    cursor: default;
}
.portal-spotlight-panel {
    position: relative;
    display: flex;
    width: min(680px, 100%);
    max-height: min(640px, 76vh);
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
}
.portal-spotlight-search {
    display: flex;
    min-height: 56px;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.portal-spotlight-search > svg {
    flex: 0 0 auto;
    color: var(--ink-3);
}
.portal-spotlight-search input {
    min-width: 0;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: none;
    outline: 0;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 24px;
}
.portal-spotlight-search input::placeholder {
    color: var(--ink-3);
}
.portal-spotlight-search input::-webkit-search-cancel-button {
    display: none;
}
.portal-spotlight-cancel {
    height: 44px;
    padding: 0 var(--space-1);
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.portal-spotlight-results {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}
.portal-spotlight-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.portal-spotlight-group + .portal-spotlight-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}
.portal-spotlight-group-label {
    display: block;
    padding: 6px 10px 4px;
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--lh-caption);
}
.portal-spotlight-result {
    display: grid;
    min-height: 40px;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    gap: var(--space-3);
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
}
.portal-spotlight-result[data-active] {
    background: var(--surface-2);
}
.portal-spotlight-result-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
}
.portal-spotlight-result[data-active] .portal-spotlight-result-icon {
    background: var(--surface);
    color: var(--ink);
}
.portal-spotlight-result-copy {
    display: grid;
    min-width: 0;
    line-height: 18px;
}
.portal-spotlight-result-copy strong,
.portal-spotlight-result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-spotlight-result-copy strong {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.portal-spotlight-result-copy small {
    color: var(--ink-3);
    font-size: var(--text-caption);
}
.portal-spotlight-result-kind {
    color: var(--ink-3);
    font-size: var(--text-caption);
    white-space: nowrap;
}
.portal-spotlight-result[data-tone="danger"] .portal-spotlight-result-copy strong {
    color: var(--danger);
}
.portal-spotlight-result[aria-disabled="true"] {
    cursor: not-allowed;
}
.portal-spotlight-result[aria-disabled="true"] .portal-spotlight-result-copy strong {
    color: var(--ink-3);
}
.portal-spotlight-empty {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-base);
    line-height: 20px;
    text-align: center;
}
.portal-spotlight-foot {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink-3);
    font-size: var(--text-caption);
}
.portal-spotlight-foot > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.portal-palette-sheet .portal-spotlight-search {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 0 var(--space-2) 0 var(--space-4);
}
.portal-palette-sheet .portal-spotlight-results {
    overflow: visible;
    padding: var(--space-2);
}
.portal-palette-sheet .portal-spotlight-result {
    min-height: 48px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
}
.portal-palette-sheet .portal-palette-sheet .portal-spotlight-result-source {
    display: none;
}
.portal-auto-intro {
    max-width: 62ch;
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-auto-url {
    overflow-wrap: anywhere;
}
.portal-auto-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.portal-auto-section-head h2,
.portal-auto-block-head h2 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-auto-templates {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-6);
}
.portal-auto-template-grid {
    display: grid;
    gap: var(--stack-cards);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-auto-template {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
}
.portal-auto-template h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}
.portal-auto-template p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-auto-template-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.portal-auto-detail-side {
    display: grid;
    align-content: start;
    gap: var(--stack-cards);
    min-width: 0;
}
.portal-auto-detail-main {
    min-width: 0;
}
@media (max-width: 1180px) {
    .portal-auto-detail-side {
        order: -1;
    }
}
.portal-auto-editor {
    display: grid;
    gap: var(--stack-cards);
}
.portal-auto-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
}
.portal-auto-block-head .admin-form-help {
    flex-basis: 100%;
    margin: 0;
}
.portal-auto-fields {
    display: grid;
    gap: var(--space-3);
}
.portal-auto-days {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}
.portal-auto-call-filters {
    padding-top: var(--space-2);
}
.portal-auto-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    justify-self: start;
}
.admin-form label.portal-auto-segment-option {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    cursor: pointer;
}
.portal-auto-segment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.portal-auto-segment-option span {
    padding: 6px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color 120ms ease, color 120ms ease;
}
.portal-auto-segment-option input:checked + span {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink), transparent 88%);
}
.portal-auto-segment-option input:focus-visible + span {
    outline: 2px solid var(--selection-ink);
    outline-offset: 2px;
}
.portal-auto-text {
    display: grid;
    gap: var(--space-2);
}
.portal-auto-vars {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.portal-auto-var {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--control-fill);
    color: var(--ink-2);
    font: inherit;
    font-size: var(--text-caption);
    font-weight: 600;
    cursor: pointer;
}
.portal-auto-var:hover {
    background: var(--control-fill-hover);
    color: var(--ink);
}
.portal-auto-var:focus-visible {
    outline: 2px solid var(--selection-ink);
    outline-offset: 2px;
}
.portal-auto-var span {
    font-family: var(--font-mono);
    color: var(--ink-3);
}
.portal-auto-var-preview {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.portal-auto-var-preview span {
    color: var(--ink-3);
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .portal-auto-segment-option span {
        transition: none;
    }
}
.portal-auto-issues {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
}
.portal-auto-status {
    display: grid;
    gap: var(--space-3);
}
.portal-auto-switch {
    min-height: 56px;
    align-items: center;
    text-align: left;
}
.portal-auto-cost-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-auto-cost-note svg {
    flex: none;
    margin-top: 3px;
    color: var(--warning);
}
.portal-auto-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-auto-cost {
    display: grid;
    gap: var(--space-3);
}
.portal-auto-cost p {
    margin: 0;
}
.portal-auto-cost-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.portal-auto-cost-table th,
.portal-auto-cost-table td {
    padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.portal-auto-cost-table th {
    color: var(--ink-3);
    font-weight: var(--font-medium);
}
.portal-auto-cost-total {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-auto-cost-total small {
    color: var(--ink-3);
}
.portal-auto-runs {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-auto-run {
    border-bottom: 1px solid var(--line);
}
.portal-auto-run:last-child {
    border-bottom: 0;
}
.portal-auto-run summary,
.portal-auto-run-flat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) 0;
    cursor: pointer;
    list-style: none;
}
.portal-auto-run-flat {
    cursor: default;
}
.portal-auto-run summary::-webkit-details-marker {
    display: none;
}
.portal-auto-run summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
.portal-auto-run-main {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.portal-auto-run-main strong {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.portal-auto-run-main small {
    color: var(--ink-3);
    font-size: var(--text-caption);
}
.portal-auto-run-body {
    display: grid;
    gap: var(--space-2);
    padding: 0 0 var(--space-3);
}
.portal-auto-steps {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-auto-steps li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}
.portal-auto-step-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.portal-auto-step-reason {
    color: var(--ink-3);
    font-size: var(--text-caption);
}
.portal-flow-editor {
    gap: var(--space-4);
}
.portal-flow-name {
    display: grid;
    gap: var(--space-2);
}
.portal-flow-issue {
    margin: 0;
    color: var(--warning);
    font-size: var(--text-sm);
}
.portal-flow-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}
.portal-flow-heading {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-flow-note {
    margin: 0;
}
.portal-flow {
    --gutter: 128px;
    --rail-x: calc(var(--gutter) - 18px);
    --node-y: 24px;
    --rail-bg: var(--canvas);
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-flow-row,
.portal-flow-insert {
    position: relative;
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr);
}
.portal-flow-row {
    padding-bottom: var(--space-3);
}
.portal-flow-row::before,
.portal-flow-insert::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--rail-x);
    width: 3px;
    background: var(--line);
    content: "";
    pointer-events: none;
}
.portal-flow-row[data-first]::before {
    top: var(--node-y);
    border-radius: 3px 3px 0 0;
}
.portal-flow-row[data-last]::before {
    bottom: calc(100% - var(--node-y));
    border-radius: 0 0 3px 3px;
}
.portal-flow-row[data-wait]::before {
    width: 0;
    border-left: 3px dotted var(--line-strong);
    background: none;
}
.portal-flow-gutter {
    position: relative;
    min-height: calc(var(--node-y) + 8px);
}
.portal-flow-word {
    display: block;
    padding: calc(var(--node-y) - 13px) calc(var(--gutter) - var(--rail-x) + 12px) 0 0;
    color: var(--ink-2);
    font-size: 19px;
    line-height: 24px;
    text-align: right;
    overflow-wrap: anywhere;
}
.portal-flow-row[data-first] .portal-flow-word {
    color: var(--ink);
    font-size: 24px;
}
.portal-flow-row[data-quiet] .portal-flow-word {
    color: var(--ink-3);
}
.portal-flow-row[data-wait] .portal-flow-word {
    color: var(--ink-3);
    font-size: 15px;
}
.portal-flow-node {
    position: absolute;
    top: calc(var(--node-y) - 4px);
    left: calc(var(--rail-x) - 2.5px);
}
.portal-flow-slot {
    min-width: 0;
}
.portal-flow-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}
.portal-flow-card:hover {
    border-color: var(--line-strong);
}
.portal-flow-card[data-selected] {
    border-color: var(--selection-ink);
    box-shadow: 0 0 0 1px var(--selection-ink);
}
.portal-flow-card[data-invalid] {
    border-color: var(--warning-border);
}
.portal-flow-card-open {
    display: flex;
    flex: 1 1 0;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.portal-flow-card-open:focus-visible,
.portal-flow-wait-open:focus-visible,
.portal-flow-grip:focus-visible,
.portal-flow-plus:focus-visible,
.portal-flow-pick:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
.portal-flow-card-icon {
    display: inline-grid;
    flex: none;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink-2);
}
.portal-flow-row[data-first] .portal-flow-card-icon {
    background: var(--night);
    color: var(--surface);
}
.portal-flow-card-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}
.portal-flow-card-text strong {
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    line-height: var(--lh-body);
}
.portal-flow-card-detail {
    color: var(--ink-2);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
.portal-flow-card-eyebrow {
    display: none;
    color: var(--ink-3);
    font-size: var(--text-caption);
}
.portal-flow-bubble,
.portal-flow-quote {
    max-width: 46ch;
    margin-top: var(--space-1-5);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.portal-flow-bubble {
    padding: var(--space-2) var(--space-3);
    border-radius: 16px 16px 16px 4px;
    background: var(--surface-2);
}
.portal-flow-quote {
    padding-left: var(--space-3);
    border-left: 3px solid var(--line-strong);
    color: var(--ink-2);
}
.portal-flow-card-side {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    max-width: 45%;
    margin-left: auto;
    padding-top: var(--space-1);
}
.portal-flow-card-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-height: 20px;
}
.portal-flow-card-tools {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.portal-flow-card:hover .portal-flow-card-tools,
.portal-flow-card:focus-within .portal-flow-card-tools,
.portal-flow-wait:hover .portal-flow-card-tools,
.portal-flow-wait:focus-within .portal-flow-card-tools {
    opacity: 1;
}
@media (hover: none) {
    .portal-flow-card-tools {
        opacity: 1;
    }
}
.portal-flow-card-note {
    flex-basis: 100%;
    margin: 0 0 0 calc(32px + var(--space-3) + var(--space-1));
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-flow-issues {
    flex-basis: 100%;
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-1) calc(32px + var(--space-3) + var(--space-5));
    color: var(--warning);
    font-size: var(--text-sm);
}
.portal-flow-row[data-dragging] {
    z-index: 2;
}
.portal-flow-row[data-dragging] .portal-flow-card,
.portal-flow-row[data-dragging] .portal-flow-wait {
    box-shadow: var(--shadow-2);
}
.portal-flow-row[data-dragging] .portal-flow-grip {
    cursor: grabbing;
}
.portal-flow-history {
    display: inline-flex;
    gap: 4px;
}
.portal-flow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
}
.portal-flow-dot[data-tone="success"] { background: var(--success); }
.portal-flow-dot[data-tone="danger"] { background: var(--danger); }
.portal-flow-dot[data-tone="warning"] { background: var(--warning); }
.portal-flow-dot[data-tone="info"] { background: var(--info); }
.portal-flow-wait {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    margin-top: calc(var(--node-y) - 20px);
    padding: 2px var(--space-2) 2px 2px;
    border-radius: var(--radius-full);
    background: var(--control-fill);
}
.portal-flow-wait[data-selected] {
    box-shadow: 0 0 0 2px var(--selection-ink);
}
.portal-flow-wait[data-invalid] {
    box-shadow: 0 0 0 1.5px var(--warning-border);
}
.portal-flow-wait .portal-flow-grip {
    height: 32px;
    border-radius: var(--radius-full);
}
.portal-flow-wait-open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
}
.portal-flow-wait .portal-flow-issues {
    padding-left: var(--space-3);
}
.portal-flow-insert {
    min-height: 28px;
    margin-top: calc(var(--space-3) * -1);
    margin-bottom: 0;
}
.portal-flow-plus {
    position: absolute;
    top: 2px;
    left: calc(var(--rail-x) - 10.5px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--canvas);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    color: var(--ink-3);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}
.portal-flow-plus:hover {
    background: var(--accent);
    box-shadow: inset 0 0 0 1.5px var(--selection-ink);
    color: var(--accent-ink);
    transform: scale(1.12);
}
.portal-flow-insert[data-wide] {
    min-height: 0;
    margin-top: calc(var(--space-2) * -1);
    padding-bottom: var(--space-3);
}
.portal-flow-addlink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--control-fill);
    color: var(--ink-2);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
}
.portal-flow-addlink:hover {
    background: var(--control-fill-hover);
    color: var(--ink);
}
.portal-flow-addlink:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
.portal-flow-row[data-dragging] ~ .portal-flow-insert .portal-flow-plus {
    visibility: hidden;
}
.portal-flow-empty,
.portal-flow-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: 40px;
    padding-top: calc(var(--node-y) - 20px);
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.portal-flow-row[data-fresh] .portal-flow-slot {
    animation: portal-flow-in var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .portal-flow-row[data-fresh] .portal-flow-slot {
        animation: none;
    }
    .portal-flow-card,
    .portal-flow-card-tools,
    .portal-flow-plus {
        transition: none;
    }
}
.portal-flow-cost {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--info-bg);
    color: var(--ink);
}
.portal-flow-cost svg {
    flex: none;
    margin-top: 2px;
    color: var(--info);
}
.portal-flow-cost p {
    margin: 2px 0 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-flow-dirty {
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.portal-flow-drawer {
    display: grid;
    gap: var(--space-4);
}
.portal-flow-drawer-cost {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-flow-choice-list {
    display: grid;
    gap: var(--space-1);
}
.admin-form.portal-flow-drawer label.portal-flow-choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}
.admin-form.portal-flow-drawer label.portal-flow-choice:hover {
    background: var(--control-fill-hover);
}
.admin-form.portal-flow-drawer label.portal-flow-choice:has(input:checked) {
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--selection-ink);
}
.portal-flow-choice input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ink);
}
.portal-flow-picker {
    display: grid;
    gap: var(--space-5);
}
.portal-flow-picker h3 {
    margin: 0 0 var(--space-2);
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
}
.portal-flow-picker ul {
    display: grid;
    gap: var(--space-1-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-flow-pick {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.portal-flow-pick:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
}
.portal-flow-pick > span:nth-child(2) {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}
.portal-flow-pick strong {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.portal-flow-pick small {
    color: var(--ink-2);
    font-size: var(--text-caption);
}
.portal-flow-mini {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-flow-mini li {
    position: relative;
    padding: 0 0 var(--space-1-5) 20px;
    color: var(--ink-2);
    font-size: var(--text-caption);
    line-height: 16px;
}
.portal-flow-mini li::before {
    position: absolute;
    top: 4px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    content: "";
}
.portal-flow-mini li[data-kind="trigger"]::before {
    background: var(--ink);
    box-shadow: none;
}
.portal-flow-mini li:not(:last-child)::after {
    position: absolute;
    top: 12px;
    bottom: -4px;
    left: 5px;
    width: 2px;
    background: var(--line);
    content: "";
}
.portal-flow-mini li[data-kind="wait"]::before {
    display: none;
}
.portal-flow-mini li[data-kind="wait"] {
    color: var(--ink-3);
}
.portal-flow-mini li[data-kind="wait"]::after,
.portal-flow-mini li:has(+ li[data-kind="wait"])::after {
    width: 0;
    border-left: 2px dotted var(--line-strong);
    background: none;
}
.portal-auto-template--blank {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--card-pad, var(--space-4));
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}
@media (max-width: 640px) {
    .portal-flow {
        --gutter: 28px;
        --rail-x: 8px;
        --node-y: 22px;
    }
    .portal-flow-word {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .portal-flow-card-eyebrow {
        display: block;
    }
    .portal-flow-card {
        padding: var(--space-2);
    }
    .portal-flow-card-open {
        flex-basis: calc(100% - 40px);
        gap: var(--space-2);
    }
    .portal-flow-card-side {
        max-width: none;
        flex-basis: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: calc(32px + var(--space-3));
    }
    .portal-flow-card-note,
    .portal-flow-issues {
        margin-left: 0;
        padding-left: var(--space-3);
    }
}
.portal-shop-bracket {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: var(--space-2) var(--space-3);
    align-items: end;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}
.portal-shop-bracket:last-child {
    border-bottom: 0;
}
@media (max-width: 640px) {
    .portal-shop-bracket {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.portal-appt-scope {
    display: grid;
    gap: 4px;
    max-width: 420px;
    margin-bottom: 16px;
}
.portal-appt-scope label {
    display: grid;
    gap: 6px;
}
.portal-appt-slot-resources {
    display: block;
    font-size: 11px;
    color: var(--ink-3);
    font-family: var(--font-sans, inherit);
}
.portal-costs {
    display: grid;
    gap: var(--space-4);
}
.portal-costs-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.portal-costs-block {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}
.portal-costs-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-2) var(--space-3);
    color: var(--ink-2);
}
.portal-costs-head h3 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--ink);
}
.portal-costs-head p {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
}
.portal-costs-amount {
    font-size: var(--text-md);
    color: var(--ink);
    white-space: nowrap;
}
.portal-costs-lines {
    display: grid;
    margin: 0;
}
.portal-costs-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line);
}
.portal-costs-line:first-child {
    border-top: 0;
}
.portal-costs-line dt {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-2);
    color: var(--ink);
    font-size: var(--text-sm);
    min-width: 0;
}
.portal-costs-line dt > :not(.portal-costs-dot) {
    grid-column: 2;
}
.portal-costs-line dt small {
    color: var(--ink-3);
    font-size: var(--text-xs);
}
.portal-costs-line dd {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-sm);
    white-space: nowrap;
}
.portal-costs-line--total dt,
.portal-costs-line--total dd {
    font-weight: var(--font-semibold);
}
.portal-costs-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: var(--radius-full);
    grid-row: 1 / span 2;
}
.portal-costs-rates {
    display: grid;
    gap: var(--space-5, 28px);
    margin-top: var(--space-5, 28px);
}
.portal-costs-rates-head {
    display: grid;
    gap: var(--space-3);
}
.portal-costs-rates-head p {
    margin: 0;
    max-width: 68ch;
}
.portal-costs-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-costs-jump-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    padding: 0 var(--space-3);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
    text-decoration: none;
}
.portal-costs-jump-chip:hover {
    color: var(--ink);
    background: var(--surface-3, var(--surface-2));
}
.portal-costs-jump-chip:focus-visible {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 2px;
}
.portal-costs-rate-section {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    scroll-margin-top: 72px;
}
.portal-costs-rate-title {
    margin: 0;
    font-size: var(--text-md, 1rem);
    font-weight: var(--font-semibold);
    color: var(--ink);
}
.portal-costs-rate-stack {
    display: grid;
    gap: var(--space-4);
}
.portal-costs-rate-price {
    display: grid;
    justify-items: end;
}
.portal-costs-rate-price small {
    color: var(--ink-3);
    font-weight: var(--font-regular, 400);
}
.portal-content-lang {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}
.portal-content-editor-side .portal-content-warning {
    color: var(--warning);
}
.portal-content-review-note {
    color: var(--ink-3);
    font-size: 13px;
}
.portal-content-lang-note {
    flex-basis: 100%;
    order: 9;
    margin: 0;
    color: var(--ink-3);
    font-size: 13px;
}
.portal-content-lang-label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: 600;
}
.portal-content-lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 3px;
    list-style: none;
    border-radius: var(--radius-sm);
    background: var(--control-fill);
}
.portal-content-lang-chip {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--ink-2);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color 120ms ease;
}
a.portal-content-lang-chip:hover {
    background: var(--control-fill-hover);
    color: var(--ink);
}
.portal-content-lang-chip[aria-current="true"] {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-1, 0 1px 2px rgb(0 0 0 / 0.08));
}
.portal-content-lang-code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
}
.portal-content-lang-name {
    color: var(--ink-3);
}
.portal-content-lang-chip[aria-current="true"] .portal-content-lang-name {
    color: var(--ink-2);
}
.portal-content-lang-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-3);
    flex: none;
}
.portal-content-lang-dot[data-status="published"],
.portal-content-lang-dot[data-status="active"] {
    background: var(--success);
}
.portal-content-lang-dot[data-status="in_review"] {
    background: var(--info);
}
.portal-content-lang-dot[data-status="archived"] {
    background: var(--warning);
}
@media (max-width: 639px) {
    .portal-content-lang-name {
        display: none;
    }
}
.portal-content-review {
    margin-bottom: var(--space-4);
}
.portal-content-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-content-localization {
    display: grid;
    gap: var(--space-3);
    max-width: 560px;
}
.portal-content-localization-locales {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-events-statuscell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.portal-events-section-title {
    margin: var(--space-6) 0 var(--space-1);
    font-size: var(--text-lg);
}
.portal-events-subtitle {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-2);
}
.portal-events-registration {
    display: grid;
    gap: var(--space-4);
}
.portal-events-notes {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.portal-events-ticketlist {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-events-ticketlist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
}
.portal-events-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.portal-events-checkin {
    display: grid;
    gap: var(--space-4);
}
.portal-events-checkin-counter {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-lg);
}
.portal-events-checkin-bar {
    display: block;
    block-size: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}
.portal-events-checkin-bar > span {
    display: block;
    block-size: 100%;
    background: var(--accent);
    transition: inline-size 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.portal-events-checkin-search {
    display: grid;
    gap: var(--space-3);
}
.portal-events-checkin-search input[type="search"] {
    inline-size: 100%;
    min-block-size: 52px;
    font-size: var(--text-lg);
}
.portal-events-checkin-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-events-checkin-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}
.portal-events-checkin-list li[data-checked-in="true"] .portal-events-checkin-who {
    opacity: 0.7;
}
.portal-events-checkin-who {
    display: grid;
    min-inline-size: 0;
}
.portal-events-checkin-who strong,
.portal-events-checkin-who small {
    overflow-wrap: anywhere;
}
.portal-events-checkin-list .admin-btn {
    min-block-size: 48px;
    min-inline-size: 48px;
}
@media (max-width: 640px) {
    .portal-events-checkin-list li {
        grid-template-columns: minmax(0, 1fr);
    }
    .portal-events-checkin-list .admin-btn {
        inline-size: 100%;
    }
}
.portal-legal-editor {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1180px) {
    .portal-legal-editor {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.portal-legal-frame {
    width: 100%;
    height: 520px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.portal-legal-view-head .portal-events-section-title {
    margin-top: 0;
}
@media (max-width: 760px) {
    .portal-legal-frame,
    .portal-legal-frame--tall {
        height: 420px;
    }
}
.portal-trainer-proposal {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.portal-trainer-proposal[data-status="pending"] {
    border-color: var(--ink-3);
}
.portal-trainer-proposal header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.portal-trainer-proposal h4 {
    margin: 0;
    font-size: var(--text-sm);
}
.portal-chatbot-meter h2,
.portal-chatbot-embed h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
}
.portal-chatbot-embed {
    display: grid;
    gap: var(--space-2);
}
.portal-chatbot-embed p {
    margin: 0;
}
.portal-voip-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
}
.portal-voip-appstore {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.portal-voip-appstore-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--surface-2);
    flex: none;
}
.portal-voip-appstore-text {
    flex: 1 1 240px;
    min-width: 0;
}
.portal-voip-appstore-text h2 {
    margin: 0 0 4px;
    font-size: 1rem;
}
.portal-voip-appstore-text p {
    margin: 0;
}
.fsvoip-appstore-badge {
    display: inline-block;
    flex: none;
    line-height: 0;
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch) {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-weight: var(--font-regular);
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch):hover {
    background: var(--surface-2);
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch)[data-active] {
    border-color: var(--selection-ink);
    box-shadow: inset 0 0 0 1px var(--selection-ink);
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch):has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch) > strong {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 1.3;
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch) > small {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 1.45;
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch) > .portal-voip-rg-choice-mark {
    display: inline-grid;
    grid-column: 1;
    grid-row: 1;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-full);
    color: transparent;
}
.admin-form label.portal-voip-rg-choice:not(.admin-checkbox):not(.admin-switch)[data-active] > .portal-voip-rg-choice-mark {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--surface);
}
.portal-voip-rg-timeline > li > .fss-rail-node {
    position: absolute;
    top: 5px;
    left: 4px;
    z-index: 1;
}
.portal-voip-rg-danger .portal-voip-danger {
    margin-top: 0;
}
.portal-voip-tts {
    display: grid;
    gap: var(--stack);
    grid-template-areas:
        "rec"
        "compose"
        "all";
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
.portal-voip-tts-rec {
    grid-area: rec;
}
.portal-voip-tts-all {
    grid-area: all;
}
.portal-voip-tts-compose {
    grid-area: compose;
}
@media (min-width: 1024px) {
    .portal-voip-tts {
        column-gap: var(--stack);
        row-gap: var(--space-8);
        grid-template-areas:
            "rec compose"
            "all compose";
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        grid-template-rows: auto 1fr;
    }
    .portal-voip-tts-compose {
        position: sticky;
        top: 72px;
    }
}
.portal-voip-tts-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.portal-voip-tts-group > header h2,
.portal-voip-tts-card > h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: var(--lh-h2);
}
.portal-voip-tts-group > header p {
    max-width: 60ch;
    margin: var(--space-1) 0 0;
    color: var(--ink-2);
    font-size: var(--text-body);
    line-height: var(--lh-body);
}
.portal-voip-tts-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.portal-voip-tts-grid[data-size="large"] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
@media (min-width: 640px) {
    .portal-voip-tts-grid[data-size="large"] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}
.portal-voip-tts-voice {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow var(--dur-fast) var(--ease-out);
}
.portal-voip-tts-voice[data-size="large"] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4) var(--space-4);
}
.portal-voip-tts-voice:hover {
    box-shadow: inset 0 0 0 1px var(--line-strong);
}
.portal-voip-tts-voice[data-selected] {
    box-shadow: inset 0 0 0 2px var(--accent);
}
.portal-voip-tts-voice-pick {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.portal-voip-tts-voice-pick::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    content: "";
}
.portal-voip-tts-voice .voip-voice-orb {
    z-index: 1;
}
.portal-voip-tts-voice-pick:focus-visible {
    outline: none;
}
.portal-voip-tts-voice-pick:focus-visible::after {
    box-shadow: var(--focus-ring);
}
.portal-voip-tts-voice-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: var(--lh-h3);
}
.portal-voip-tts-voice-check {
    display: inline-grid;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    place-items: center;
}
.portal-voip-tts-voice-meta {
    color: var(--ink-2);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}
.portal-voip-tts-voice-desc {
    color: var(--ink-3);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}
.portal-voip-tts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-voip-tts-chip {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--control-fill);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
}
.portal-voip-tts-chip:hover {
    background: var(--control-fill-hover);
}
.portal-voip-tts-chip[aria-pressed="true"] {
    background: var(--ink);
    color: var(--surface);
}
.portal-voip-tts-chip span {
    color: inherit;
    opacity: 0.7;
}
.portal-voip-tts-chip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.portal-voip-tts-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.portal-voip-tts-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.portal-voip-tts-form[hidden] {
    display: none;
}
.portal-voip-tts-chosen {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-voip-tts-chosen > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.portal-voip-tts-chosen strong {
    color: var(--ink);
    font-weight: 600;
}
.portal-voip-tts-chosen-label {
    color: var(--ink-3);
    font-size: var(--text-caption);
    line-height: var(--lh-caption);
}
.portal-voip-tts-done {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--success-bg);
}
.portal-voip-tts-done strong {
    color: var(--ink);
}
.portal-voip-tts-done p {
    margin: var(--space-1) 0 0;
    color: var(--ink-2);
    font-size: var(--text-small);
    line-height: var(--lh-small);
}
.portal-voip-tts-done-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.portal-voip-tts-linkbutton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--selection-ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
@media (max-width: 1023px) {
    .portal-voip-tts-submit {
        display: none;
    }
}
.portal-domain-dns-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.portal-domain-name-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.portal-domain-name-input input {
    flex: 1 1 auto;
    min-width: 0;
}
.portal-domain-name-input span {
    flex: 0 1 auto;
    overflow-wrap: anywhere;
    font-size: var(--text-small);
}
.portal-domain-ns-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.portal-domain-ns-row input {
    flex: 1 1 auto;
    min-width: 0;
}
.portal-domain-transfer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.portal-domain-autorenew-switch {
    min-height: 56px;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}
.portal-domain-autorenew-text {
    display: grid;
    gap: 2px;
}
.portal-domain-register-results {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    border: 0;
}
.portal-domain-register-results legend {
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--ink);
}
.portal-domain-register-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink-2);
}
.portal-domain-register-result[data-available] {
    color: var(--ink);
    cursor: pointer;
}
.portal-domain-register-name {
    overflow-wrap: anywhere;
}
.portal-domain-register-price {
    grid-column: 2 / -1;
    font-size: var(--text-small);
}
.portal-domain-kv > dt {
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.portal-domain-kv > dd {
    flex-wrap: wrap;
    font-weight: var(--font-medium);
}
.portal-domain-unknown {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
}
.portal-domain-unknown small {
    font-weight: var(--font-regular);
    line-height: 1.4;
}
.portal-domain-ns {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
.portal-domain-ns > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    min-width: 0;
}
.portal-domain-ns code {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
}
.portal-domain-ns-copy {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}
.portal-domain-ns-copy:hover {
    background: var(--line);
    color: var(--ink);
}
.portal-domain-kv > .portal-domain-contacts-row {
    justify-content: space-between;
    gap: var(--space-3);
}
.portal-domain-contacts-row .admin-muted {
    font-weight: var(--font-regular);
}
.portal-domain-note {
    margin: var(--space-3) 0 0;
    line-height: 1.5;
}
.portal-domain-actions {
    margin-top: var(--space-4);
}
@media (max-width: 760px) {
    .portal-domain-kv > dd {
        padding-bottom: var(--space-4);
    }
    .portal-domain-kv > .portal-domain-contacts-row {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
    }
}
.portal-domain-card > .admin-card-heading {
    flex-wrap: wrap;
    align-items: flex-start;
}
.portal-domain-card > .admin-card-heading > div {
    flex-basis: 220px;
}
.portal-domain-card > .admin-card-heading > p,
.portal-domain-card > .admin-card-heading p {
    margin: 0;
    color: var(--ink-3);
    line-height: 1.5;
}
.portal-domain-kv > .portal-domain-lockstate {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}
.portal-domain-lockstate small {
    font-weight: var(--font-regular);
    line-height: 1.5;
}
.portal-content-kpis .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .portal-content-kpis .admin-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .portal-content-kpis .admin-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (pointer: coarse) {
    .portal-search-icon {
        width: 44px;
        height: 44px;
    }
}
.admin-kv > dd:has(> .portal-shop-line) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-block: var(--space-2);
}
.portal-content-media-bar-search .admin-datatable-search {
    flex: 1 1 auto;
}
.portal-content-media-bar-search .admin-datatable-search input {
    flex: none;
}
.portal-voip-plan {
    display: grid;
    gap: var(--space-4);
}
.portal-voip-plan-current {
    display: grid;
    gap: var(--space-2);
}
.portal-voip-plan-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0;
}
.portal-voip-plan-name span {
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.portal-voip-plan-none {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 20px;
}
.portal-voip-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.portal-voip-plan-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-voip-plan-offer {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.portal-voip-plan-offer[data-state="current"] {
    box-shadow: inset 3px 0 0 var(--accent, currentColor);
}
.portal-voip-plan-offer p {
    margin: 0;
}
.portal-voip-nbo {
    display: grid;
    gap: var(--space-4);
}
:where(:not(.portal-voip-ov-side)) > .portal-voip-nbo {
    margin-bottom: var(--stack-cards);
}
.portal-voip-nbo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.portal-voip-nbo-head h2 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-h3);
}
.portal-voip-nbo-head p {
    margin: 0;
    max-width: 56ch;
}
.portal-domain-dns-valuecell {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.portal-redirect-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-redirect {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.portal-redirect[data-inactive] {
    border-style: dashed;
    border-color: var(--warning-border);
}
.portal-redirect-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
}
.portal-redirect-end {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.portal-redirect-label {
    color: var(--ink-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}
.portal-redirect-host {
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    overflow-wrap: anywhere;
}
.portal-redirect-path {
    color: var(--ink-2);
}
.portal-redirect-meta {
    color: var(--ink-3);
    font-size: var(--text-xs);
}
.portal-redirect-wire {
    display: flex;
    align-items: center;
    width: 88px;
    color: var(--ink-2);
}
.portal-redirect-wire-line {
    position: relative;
    flex: 1 1 auto;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--line-strong);
}
.portal-redirect-wire-line::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--ink);
    content: "";
    transform: translate(-50%, -50%);
}
.portal-redirect-wire svg {
    flex: 0 0 auto;
    margin-left: -3px;
}
.portal-redirect-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.portal-redirect-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (max-width: 640px) {
    .portal-redirect-route {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }
    .portal-redirect-wire {
        width: auto;
        height: 32px;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 3px;
    }
    .portal-redirect-wire-line {
        flex: 1 1 auto;
        width: 3px;
        height: auto;
    }
    .portal-redirect-wire-line::before {
        top: 0;
        left: 50%;
    }
    .portal-redirect-wire svg {
        margin: -3px 0 0 -2.5px;
        transform: rotate(90deg);
    }
}
.portal-redirect-form {
    display: grid;
    gap: var(--space-6);
}
.portal-redirect-fieldset {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.portal-redirect-fieldset > legend {
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-redirect-source {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink);
    overflow-wrap: anywhere;
}
.portal-redirect-advanced > summary {
    cursor: pointer;
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.portal-redirect-advanced[open] > summary {
    margin-bottom: var(--space-3);
}
.portal-redirect-choices,
.portal-redirect-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.admin-form label.portal-redirect-choice,
.admin-form label.portal-redirect-status-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 400;
}
.admin-form label.portal-redirect-status-option {
    grid-template-columns: minmax(0, 1fr);
}
.admin-form label.portal-redirect-choice[data-active],
.admin-form label.portal-redirect-status-option[data-active] {
    border-color: var(--selection-ink);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--selection-ink);
}
.admin-form label.portal-redirect-choice:focus-within,
.admin-form label.portal-redirect-status-option:focus-within {
    box-shadow: var(--focus-ring);
}
.portal-redirect-choice input,
.portal-redirect-status-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.portal-redirect-choice-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
}
.portal-redirect-choice[data-active] .portal-redirect-choice-icon {
    background: var(--surface);
    color: var(--ink);
}
.portal-redirect-choice-text,
.portal-redirect-status-option > span {
    display: grid;
    gap: 2px;
}
.portal-redirect-choice small,
.portal-redirect-status-option small {
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: 1.4;
}
.portal-redirect-example {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border-left: 3px solid var(--line-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-2);
    font-size: var(--text-sm);
}
.portal-redirect-example-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
.portal-redirect-example-line strong {
    color: var(--ink);
    font-weight: var(--font-semibold);
}
@media (max-width: 640px) {
    .portal-redirect-choices,
    .portal-redirect-status {
        grid-template-columns: minmax(0, 1fr);
    }
}
.portal-content-submission-files {
    display: grid;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.portal-content-submission-files li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.pv-page [data-enter] {
    animation: pv-enter var(--dur-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * var(--stagger));
}
.pv-overview {
    max-width: 1160px;
}
.pv-page .pv-hero-sentence {
    
    min-height: 114px;
    max-width: 32ch;
    margin: 0;
    color: var(--ink);
    font: 500 30px/38px var(--font-display);
    letter-spacing: -0.015em;
}
.pv-hero-actions .admin-btn:active {
    transform: scale(0.97);
}
.pv-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.pv-metrics[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pv-metrics[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pv-metrics[data-count="1"] {
    grid-template-columns: minmax(0, 340px);
}
.pv-metric {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 16px var(--card-pad) 14px;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
a.pv-metric:hover {
    border-color: color-mix(in srgb, var(--line), var(--ink) 14%);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}
.pv-metric-label {
    color: var(--ink-3);
    font-size: 13px;
    line-height: 18px;
}
.pv-metric-value {
    display: block;
    font: 600 26px/32px var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.pv-metric-meaning {
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 17px;
}
.pv-metric-meaning[data-tone="success"] {
    color: var(--success);
}
.pv-metric-meaning[data-tone="warning"] {
    color: var(--warning);
}
.pv-metric-meaning[data-tone="danger"] {
    color: var(--danger);
}
.pv-metric-meaning[data-tone="info"] {
    color: var(--info);
}
.pv-metric-visual {
    margin-top: 8px;
}
.pv-bars {
    display: flex;
    height: 34px;
    align-items: flex-end;
    gap: 3px;
}
.pv-bars i {
    flex: 1;
    border-radius: 2px;
    background: var(--surface-2);
    transform-origin: bottom;
}
.pv-bars i[data-kind="calls"] {
    background: var(--ink-3);
}
.pv-bars i[data-kind="missed"] {
    background: var(--danger);
}
.pv-bars i[data-kind="now"] {
    background: var(--ink);
}
.pv-bars[data-draw] i {
    animation: pv-grow-y 460ms var(--ease-out) backwards;
    animation-delay: calc(var(--b, 0) * 22ms + 200ms);
}
.pv-life {
    position: relative;
    height: 14px;
}
.pv-life[data-labeled] {
    height: 28px;
}
.pv-life-track,
.pv-life-fill {
    position: absolute;
    top: 6px;
    left: 0;
    height: 2px;
    border-radius: 2px;
}
.pv-life-track {
    right: 4px;
    background: var(--line);
}
.pv-life-fill {
    width: var(--p);
    background: var(--ink);
    transform-origin: left;
}
.pv-life[data-draw] .pv-life-fill {
    animation: pv-grow-x var(--dur-draw) var(--ease-draw) 200ms backwards;
}
.pv-life[data-tone="warning"] .pv-life-fill {
    background: var(--warning);
}
.pv-life[data-tone="danger"] .pv-life-fill {
    background: var(--danger);
}
.pv-life-end {
    position: absolute;
    top: 3px;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.pv-life[data-tone="warning"] .pv-life-end {
    box-shadow: inset 0 0 0 1.5px var(--warning);
}
.pv-life[data-tone="danger"] .pv-life-end {
    box-shadow: inset 0 0 0 1.5px var(--danger);
}
.pv-life[data-done] .pv-life-end {
    background: var(--ink);
    box-shadow: none;
}
.pv-life-text {
    position: absolute;
    top: 13px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-3);
    font-size: 11.5px;
    line-height: 15px;
    white-space: nowrap;
}
.pv-life-text span:first-child {
    overflow: hidden;
    font-family: var(--font-mono);
    text-overflow: ellipsis;
}
.pv-meter {
    height: 6px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface-2);
}
.pv-meter i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--ink-2);
    transform: scaleX(var(--v, 0));
    transform-origin: left;
}
.pv-meter[data-draw] i {
    animation: pv-grow-x 700ms var(--ease-draw) 250ms backwards;
}
.pv-meter[data-tone="warning"] i {
    background: var(--warning);
}
.pv-meter[data-tone="danger"] i {
    background: var(--danger);
}
.pv-meter-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 16px;
}
.pv-meter-labels span[data-tone="warning"] {
    color: var(--warning);
}
.pv-meter-labels span[data-tone="danger"] {
    color: var(--danger);
}
.pv-phases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pv-phases i {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: var(--line);
    transform-origin: left;
}
.pv-phases li[data-state="done"] i {
    background: var(--ink);
}
.pv-phases li[data-state="now"] i {
    background: color-mix(in srgb, var(--ink) 40%, var(--surface));
}
.pv-phases[data-draw] i {
    animation: pv-grow-x 300ms var(--ease-out) backwards;
    animation-delay: calc(var(--s, 0) * 90ms + 250ms);
}
.pv-phase-labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 16px;
    list-style: none;
}
.pv-phase-labels li[data-state="now"] {
    color: var(--ink);
    font-weight: var(--font-medium);
}
.pv-card {
    min-width: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
}
.pv-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px var(--card-pad);
    border-bottom: 1px solid var(--line);
}
.pv-card-head h2 {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
}
.pv-card-count {
    color: var(--ink-3);
    font-size: 13px;
}
.pv-card-aside {
    margin-left: auto;
    font-size: 13px;
}
.pv-card-aside a {
    color: var(--ink-2);
    text-decoration: none;
}
.pv-card-aside a:hover {
    color: var(--ink);
    text-decoration: underline;
}
.pv-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pv-row-group {
    position: sticky;
    z-index: 1;
    top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--card-pad) 6px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
    color: var(--ink-3);
    font-size: 12.5px;
}
.pv-rows > .pv-row-group:first-child {
    border-top: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pv-row-group b {
    color: var(--ink-2);
    font-weight: var(--font-semibold);
}
.pv-row {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1.1fr) minmax(0, 1fr) 110px 16px;
    align-items: center;
    gap: 16px;
    padding: 12px var(--card-pad);
    border-top: 1px solid var(--line);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.pv-rows > .pv-row:first-child {
    border-top: 0;
}
.pv-row[data-linked]:hover {
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
.pv-row[data-linked]:active {
    background: var(--surface-2);
}
.pv-row-ic {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-2);
}
.pv-row-main {
    min-width: 0;
}
.pv-row-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: var(--font-medium);
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.pv-row-title,
button.pv-row-title {
    cursor: pointer;
}
a.pv-row-title::after,
button.pv-row-title::after {
    position: absolute;
    inset: 0;
    content: "";
}
a.pv-row-title:focus-visible,
button.pv-row-title:focus-visible {
    outline: none;
}
/* Keyboard focus only: the row hover background plus a slim inset accent. A mouse click shows nothing. */
html:not([data-input="pointer"]) a.pv-row-title:focus-visible::after,
html:not([data-input="pointer"]) button.pv-row-title:focus-visible::after {
    background: color-mix(in srgb, var(--selection-ink) 5%, transparent);
    box-shadow: inset 3px 0 0 var(--selection-ink);
    border-radius: var(--radius-md);
}
.pv-row-sub {
    overflow: hidden;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-row-sub[data-mono] {
    font-family: var(--font-mono);
    font-size: 12.5px;
}
.pv-row-vis {
    min-width: 0;
}
.pv-row-fig {
    text-align: right;
    white-space: nowrap;
}
.pv-row-fig b {
    font-size: 14.5px;
    font-weight: var(--font-semibold);
}
.pv-row-fig small {
    display: block;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 16px;
}
.pv-row-chev {
    color: var(--ink-3);
    transition: transform var(--dur-fast) var(--ease-out);
}
.pv-row[data-linked]:hover .pv-row-chev {
    transform: translateX(2px);
}
.pv-row-acts {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}
.pv-attn {
    grid-template-columns: 14px minmax(0, 1fr) auto;
}
.pv-attn .pv-row-title {
    overflow: visible;
    white-space: normal;
}
.pv-attn .pv-row-sub {
    white-space: normal;
}
.pv-vrail-node .fss-rail-node {
    position: absolute;
    top: 6px;
    left: 7.5px;
}
.pv-empty {
    padding: 22px var(--card-pad);
}
.pv-empty strong {
    display: block;
    font-size: 14.5px;
}
.pv-empty p {
    margin: 4px 0 0;
    color: var(--ink-3);
    font-size: 13.5px;
}
.pv-live {
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
.pv-live-pill .admin-status-badge-dot {
    position: relative;
}
.pv-live::after,
.pv-live-pill .admin-status-badge-dot::after {
    position: absolute;
    inset: -3px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: 0;
}
[data-enter] .pv-live::after,
[data-enter] .pv-live-pill .admin-status-badge-dot::after {
    animation: pv-pulse 1.8s var(--ease-out) 0.9s 2;
}
.pv-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pv-drawer-body > * {
    animation: pv-enter var(--dur-base) var(--ease-out) backwards;
}
.pv-drawer-body > :nth-child(1) {
    animation-delay: 140ms;
}
.pv-drawer-body > :nth-child(2) {
    animation-delay: 180ms;
}
.pv-drawer-body > :nth-child(3) {
    animation-delay: 220ms;
}
.pv-drawer-body > :nth-child(4) {
    animation-delay: 260ms;
}
.pv-drawer-body > :nth-child(n + 5) {
    animation-delay: 300ms;
}
.pv-skel-line,
.pv-skel-card,
.pv-skel-row {
    display: block;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    animation: pv-skel-pulse 1.4s ease-in-out infinite;
}
.pv-skel-line {
    height: 14px;
}
@media (max-width: 1023px) {
    .pv-overview {
        gap: 28px;
    }
    .pv-overview > .pv-metrics,
    .pv-skel-metrics {
        margin-top: 0;
    }
    .pv-page .pv-hero-sentence {
        min-height: 93px;
        max-width: none;
        font-size: 24px;
        line-height: 31px;
    }
    .pv-hero-actions > .admin-btn,
    .pv-hero-actions > button {
        min-height: 48px;
        flex: 1 1 0;
        justify-content: center;
    }
    .portal-chrome[data-pay-bar] .pv-pay {
        display: none;
    }
    .pv-row-title,
    .pv-row-sub {
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .pv-metrics,
    .pv-metrics[data-count="3"],
    .pv-skel-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pv-metrics[data-count="1"] {
        grid-template-columns: minmax(0, 1fr);
    }
    .pv-metric {
        padding: 14px 14px 12px;
    }
    .pv-metric-value {
        font-size: 22px;
        line-height: 28px;
    }
    .pv-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 6px 12px;
    }
    .pv-row-vis {
        grid-column: 2 / -1;
        grid-row: 2;
    }
    .pv-row-vis:empty,
    .pv-row-fig:empty,
    .pv-row-chev {
        display: none;
    }
    .pv-attn {
        grid-template-columns: 14px minmax(0, 1fr);
    }
    .pv-attn .pv-row-acts {
        grid-column: 2;
        justify-content: flex-start;
    }
    .pv-attn .pv-row-acts .admin-btn {
        min-height: 44px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pv-page [data-enter],
    .pv-page [data-draw],
    .pv-page [data-draw] *,
    .pv-page [data-draw]::after,
    .pv-page .pv-live::after,
    .pv-page .pv-live-pill .admin-status-badge-dot::after,
    .pv-drawer-body > *,
    .pv-skel-line,
    .pv-skel-card,
    .pv-skel-row {
        animation: none !important;
    }
    .pv-metric,
    .pv-row,
    .pv-row-chev,
    .pv-pay-label,
    .pv-pay-busy {
        transition-duration: 1ms !important;
    }
}
html[data-motion="reduced"] .pv-page [data-enter],
html[data-motion="reduced"] .pv-page [data-draw],
html[data-motion="reduced"] .pv-page [data-draw] *,
html[data-motion="reduced"] .pv-page [data-draw]::after,
html[data-motion="reduced"] .pv-page .pv-live::after,
html[data-motion="reduced"] .pv-page .pv-live-pill .admin-status-badge-dot::after,
html[data-motion="reduced"] .pv-drawer-body > *,
html[data-motion="reduced"] .pv-skel-line,
html[data-motion="reduced"] .pv-skel-card,
html[data-motion="reduced"] .pv-skel-row {
    animation: none !important;
}
html[data-motion="reduced"] .pv-metric,
html[data-motion="reduced"] .pv-row,
html[data-motion="reduced"] .pv-row-chev,
html[data-motion="reduced"] .pv-pay-label,
html[data-motion="reduced"] .pv-pay-busy {
    transition-duration: 1ms !important;
}
.pv-subpage {
    max-width: 1160px;
}
.pv-metric-action {
    margin-top: 10px;
}
.pv-metric-action .admin-btn:active {
    transform: scale(0.97);
}
.pv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pv-seg {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}
.pv-seg button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pv-seg button:hover {
    background: var(--surface-2);
}
.pv-seg button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--surface);
}
.pv-seg button:focus-visible {
    outline: 2px solid var(--selection-ink);
    outline-offset: 1px;
}
.pv-seg-n {
    color: var(--ink-3);
    font-size: 12px;
}
.pv-seg button[aria-pressed="true"] .pv-seg-n {
    color: color-mix(in srgb, var(--surface), transparent 30%);
}
.pv-search {
    display: flex;
    width: 300px;
    max-width: 100%;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-3);
}
.pv-search:focus-within {
    border-color: var(--ink-3);
    outline: 2px solid var(--selection-ink);
    outline-offset: -1px;
}
.pv-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}
.pv-row[data-variant="invoice"] {
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.5fr) 118px 132px;
}
.pv-row-lead {
    color: var(--ink-2);
    font-size: 12.5px;
    white-space: nowrap;
}
.pv-inv-vis {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}
.pv-inv-vis > :first-child {
    flex: none;
}
.pv-inv-vis .pv-life {
    min-width: 120px;
    flex: 1;
}
.pv-row[data-soft] .pv-row-title {
    color: var(--ink-2);
}
.pv-row[data-soft] .pv-row-fig b {
    color: var(--ink-2);
    font-weight: var(--font-medium);
}
.pv-row[data-soft] .pv-row-acts {
    visibility: hidden;
}
.pv-pill-est {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--info), var(--surface) 88%);
    color: var(--info);
    font-size: 12px;
    font-weight: var(--font-medium);
}
.pv-drawer-actions {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}
.pv-facts {
    margin: 0;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: var(--radius-md);
}
.pv-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
.pv-facts > div:first-child {
    border-top: 0;
}
.pv-facts dt {
    color: var(--ink-3);
}
.pv-facts dd {
    margin: 0;
    color: var(--ink);
    font-weight: var(--font-medium);
    text-align: right;
}
.pv-drawer-hint {
    margin: 0;
    color: var(--ink-3);
    font-size: 13.5px;
    line-height: 20px;
}
.pv-drawer-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pv-anchor {
    scroll-margin-top: 64px;
}
.pv-monthnav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.pv-monthnav-label {
    min-width: 108px;
    color: var(--ink-2);
    font-size: 13px;
    text-align: center;
    text-transform: capitalize;
}
.pv-costs {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: 32px;
    padding: 20px var(--card-pad);
}
.pv-costs-total {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.pv-costs-cap {
    color: var(--ink-3);
    font-size: 13px;
}
.pv-costs-amount {
    font: 600 34px/40px var(--font-display);
    letter-spacing: -0.015em;
}
.pv-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 12.5px;
}
.pv-delta[data-direction="down"] {
    color: var(--success);
}
.pv-costs-forecast {
    color: var(--ink-3);
    font-size: 13px;
}
.pv-costbar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.pv-stack {
    display: flex;
    height: 12px;
    gap: 2px;
    overflow: hidden;
    border-radius: 6px;
}
.pv-stack i {
    min-width: 4px;
    background: color-mix(in srgb, var(--ink) calc(100% - var(--seg, 0) * 16%), var(--surface));
    transform-origin: left;
}
.pv-stack[data-draw] i {
    animation: pv-grow-x var(--dur-draw) var(--ease-draw) backwards;
    animation-delay: calc(200ms + var(--s, 0) * 80ms);
}
.pv-legend {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}
.pv-legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.pv-legend li > i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink) calc(100% - var(--seg, 0) * 16%), var(--surface));
}
.pv-legend li > span:last-child {
    color: var(--ink-2);
}
.pv-details {
    border-top: 1px solid var(--line);
}
.pv-details > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 var(--card-pad);
    color: var(--ink-2);
    cursor: pointer;
    font-size: 13.5px;
}
.pv-details > summary:hover {
    color: var(--ink);
}
.pv-details[open] > summary {
    border-bottom: 1px solid var(--line);
}
.pv-details > .portal-costs {
    padding: 16px var(--card-pad) var(--card-pad);
}
.pv-find {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.pv-find-field {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-3);
}
.pv-find-field:focus-within {
    border-color: var(--ink); 
}
.pv-find-field input:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
}
.pv-find-field input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    outline: none;
}
.pv-find .admin-btn {
    min-height: 44px;
    padding-inline: 20px;
}
.pv-row[data-variant="domain"] {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) 132px 16px;
}
.pv-row[data-variant="domain"] > .pv-row-lead,
.pv-row[data-variant="domain"] > .pv-row-ic {
    display: none;
}
.pv-tld {
    color: var(--ink-3);
}
.pv-dns {
    display: flex;
    flex-direction: column;
    gap: 18px;
    container-type: inline-size;
}
.pv-purpose h4 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: var(--font-semibold);
}
.pv-purpose p {
    margin: 0 0 8px;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 18px;
}
.pv-rec {
    display: grid;
    grid-template-columns: 58px 76px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 10px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.pv-rec-type {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11.5px;
    text-align: center;
}
.pv-rec-host,
.pv-rec-val {
    min-width: 0;
    overflow-wrap: anywhere;
}
.pv-rec-host {
    color: var(--ink-2);
}
.pv-rec-ttl {
    color: var(--ink-3);
    font-size: 12px;
    white-space: nowrap;
}
.pv-rec-tag {
    grid-column: 3 / -1;
    color: var(--ink-3);
    font-size: 12px;
}
@container (max-width: 400px) {
    .pv-rec {
        grid-template-columns: 58px minmax(0, 1fr) auto;
    }
    .pv-rec-val {
        grid-column: 1 / -1;
    }
}
.pv-redir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.pv-redir[data-inactive] {
    opacity: 0.6;
}
.pv-redir svg {
    flex: none;
    color: var(--ink-3);
}
.pv-redir-from,
.pv-redir-to {
    min-width: 0;
    overflow-wrap: anywhere;
}
.pv-dns-edit {
    align-self: flex-start;
}
@media (max-width: 1023px) {
    .pv-toolbar {
        align-items: stretch;
    }
    .pv-seg,
    .pv-search {
        width: 100%;
    }
    .pv-seg button {
        min-height: 40px;
        flex: 1 1 auto;
        justify-content: center;
    }
    .pv-search {
        min-height: 44px;
    }
    .pv-metrics[data-count="3"] > :first-child {
        grid-column: 1 / -1;
    }
    .pv-row[data-variant="invoice"] {
        grid-template-areas:
            "lead fig"
            "main fig"
            "vis vis"
            "acts acts";
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }
    .pv-row[data-variant="invoice"] > .pv-row-lead {
        grid-area: lead;
        font-size: 12px;
    }
    .pv-row[data-variant="invoice"] > .pv-row-main {
        grid-area: main;
    }
    .pv-row[data-variant="invoice"] > .pv-row-vis {
        grid-area: vis;
        grid-column: auto;
        grid-row: auto;
        margin-top: 4px;
    }
    .pv-row[data-variant="invoice"] > .pv-row-fig {
        grid-area: fig;
        align-self: center;
    }
    .pv-row[data-variant="invoice"] > .pv-row-acts {
        grid-area: acts;
        justify-content: flex-start;
        margin-top: 6px;
    }
    .pv-row[data-variant="invoice"] .pv-row-acts .admin-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .pv-row[data-variant="invoice"][data-soft] > .pv-row-acts {
        display: none;
    }
    .pv-inv-vis {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    .pv-inv-vis .pv-life {
        min-width: 140px;
    }
    .pv-costs {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 16px 14px;
    }
    .pv-costs-amount {
        font-size: 30px;
        line-height: 36px;
    }
    .pv-monthnav .admin-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .pv-find {
        flex-direction: column;
    }
    .pv-find .admin-btn {
        min-height: 48px;
        justify-content: center;
    }
    .pv-row[data-variant="domain"] {
        grid-template-areas:
            "main fig"
            "vis vis";
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .pv-row[data-variant="domain"] > .pv-row-main {
        grid-area: main;
    }
    .pv-row[data-variant="domain"] > .pv-row-vis {
        grid-area: vis;
        grid-column: auto;
        grid-row: auto;
    }
    .pv-row[data-variant="domain"] > .pv-row-fig {
        grid-area: fig;
    }
    .pv-drawer-actions .admin-btn {
        min-height: 48px;
        flex: 1 1 0;
        justify-content: center;
    }
    .pv-drawer-links .admin-btn,
    .pv-dns-edit {
        min-height: 44px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pv-switch i,
    .pv-switch::before,
    .pv-seg button {
        transition-duration: 1ms !important;
    }
}
html[data-motion="reduced"] .pv-switch i,
html[data-motion="reduced"] .pv-switch::before,
html[data-motion="reduced"] .pv-seg button {
    transition-duration: 1ms !important;
}
.pv-row[data-variant="invoice"] .pv-row-title {
    white-space: normal;
}
@media (max-width: 1023px) {
    .pv-seg button {
        min-height: 44px;
    }
    .pv-details > .portal-costs {
        padding: 12px 6px 14px;
    }
    .pv-details .portal-costs-line dt a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }
    .portal-costs-jump-chip {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }
}
@media (max-width: 1023px) {
    .pv-row[data-variant="invoice"][data-soft] > .pv-row-lead {
        display: none;
    }
}
.pv-card-body {
    padding: 16px var(--card-pad) var(--card-pad);
}
.pv-card-body + .pv-rows > .pv-row:first-child {
    border-top: 1px solid var(--line);
}
.pv-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pv-row:has(> .pv-row-acts) {
    grid-template-columns: 32px minmax(0, 1.1fr) minmax(0, 0.8fr) 96px auto;
}
.pv-subpage.portal-voip {
    --vsec-pad: var(--card-pad, 20px);
}
@media (max-width: 640px) {
    .pv-subpage.portal-voip {
        --vsec-pad: var(--space-4);
    }
}
.pv-subpage.portal-voip .portal-voip-section-head h2 {
    font-size: 15px;
    line-height: 22px;
}
.pv-subpage.portal-voip .portal-voip-lines:not([data-rail]) {
    margin-inline: calc(-1 * var(--vsec-pad));
}
.pv-subpage.portal-voip .portal-voip-section-head + .portal-voip-lines:not([data-rail]) {
    margin-top: calc(-1 * var(--space-3) + 6px);
}
.pv-subpage.portal-voip .portal-voip-section > .portal-voip-lines:not([data-rail]):last-child {
    margin-bottom: calc(-1 * var(--vsec-pad));
}
.pv-subpage.portal-voip .portal-voip-lines:not([data-rail]) > li,
.pv-subpage.portal-voip .portal-voip-lines:not([data-rail]) > li + li {
    border-top: 1px solid var(--line);
}
.pv-subpage.portal-voip .portal-voip-lines:not([data-rail]) .portal-voip-line {
    min-height: 56px;
    padding: 12px var(--vsec-pad);
    border-radius: 0;
}
.pv-subpage.portal-voip .portal-voip-section > .portal-voip-lines:not([data-rail]):last-child > li:last-child .portal-voip-line {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.pv-subpage.portal-voip button.portal-voip-line:hover,
.pv-subpage.portal-voip a.portal-voip-line:hover,
.pv-subpage.portal-voip .portal-voip-row:hover {
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
.pv-subpage.portal-voip button.portal-voip-line:active,
.pv-subpage.portal-voip a.portal-voip-line:active,
.pv-subpage.portal-voip .portal-voip-row:active {
    background: var(--surface-2);
}
.pv-subpage.portal-voip .portal-voip-line-title {
    font-size: 14.5px;
}
.pv-subpage.portal-voip .portal-voip-line-state {
    font-size: 13px;
}
.pv-subpage.portal-voip .portal-voip-line-chevron,
.pv-subpage.portal-voip .portal-voip-row > svg {
    transition: transform var(--dur-fast) var(--ease-out);
}
.pv-subpage.portal-voip a.portal-voip-line:hover .portal-voip-line-chevron,
.pv-subpage.portal-voip button.portal-voip-line:hover .portal-voip-line-chevron,
.pv-subpage.portal-voip .portal-voip-row:hover > svg {
    transform: translateX(2px);
}
.pv-subpage.portal-voip .portal-voip-row {
    min-height: 60px;
    padding: 12px var(--card-pad);
}
.pv-subpage.portal-voip .portal-voip-row-ext {
    display: grid;
    min-width: 40px;
    height: 32px;
    place-items: center;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-2);
    font: 500 12.5px/1 var(--font-mono);
}
.pv-subpage.portal-voip .portal-voip-row-ext:empty {
    display: none;
}
.pv-subpage.portal-voip .portal-voip-row-copy strong {
    font-size: 14.5px;
    font-weight: var(--font-medium);
}
.pv-subpage.portal-voip .portal-voip-row-copy small {
    color: var(--ink-3);
    font-size: 13px;
}
.pv-subpage.portal-voip .portal-voip-hero {
    gap: var(--space-4);
}
.pv-subpage.portal-voip .portal-voip-hero .portal-voip-hero-says {
    border-left: 2px solid color-mix(in srgb, var(--ink) 22%, var(--surface));
}
.pv-subpage.portal-voip .portal-voip-hero .portal-voip-hero-status[data-tone="open"] .portal-voip-hero-node {
    background: var(--success);
    box-shadow: 0 0 0 4px var(--success-bg);
}
.pv-subpage.portal-voip .portal-voip-setup-start-icon {
    background: var(--surface-2);
    color: var(--ink);
}
.pv-subpage.portal-voip .portal-voip-task {
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pv-subpage.portal-voip button.portal-voip-task:hover {
    border-color: color-mix(in srgb, var(--line), var(--ink) 14%);
    background: var(--surface);
}
.pv-subpage.portal-voip .portal-voip-task-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
@media (max-width: 640px) {
    .pv-subpage.portal-voip .portal-voip-ov-wrap > .pv-metrics[data-count="4"],
    .pv-subpage.portal-voip .portal-voip-ov-wrap > .pv-metrics[data-count="3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (pointer: coarse) {
    .pv-subpage.portal-voip .portal-voip-step-link {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }
}
.pv-empty-action {
    margin-top: 12px;
}
.pv-two {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.pv-pad {
    padding: 16px var(--card-pad);
}
.pv-pad > p {
    margin: 0 0 10px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 21px;
}
.pv-pad > p:last-child {
    margin-bottom: 0;
}
.pv-settings-desc {
    margin: 0;
    padding: 12px var(--card-pad) 0;
    color: var(--ink-3);
    font-size: 13.5px;
    line-height: 20px;
}
.pv-setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 6px 16px;
    padding: 12px var(--card-pad);
    border-top: 1px solid var(--line);
}
.pv-settings > .pv-setting:first-child {
    border-top: 0;
}
.pv-settings-desc + .pv-settings > .pv-setting:first-child {
    margin-top: 8px;
    border-top: 1px solid var(--line);
}
.pv-setting-label {
    display: grid;
    min-width: 0;
    gap: 2px;
    font-size: 14.5px;
    font-weight: var(--font-medium);
    line-height: 20px;
}
.pv-setting-label small {
    color: var(--ink-3);
    font-size: 13px;
    font-weight: var(--font-regular);
    line-height: 18px;
}
.pv-setting-value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 20px;
}
.pv-setting[data-tone="success"] .pv-setting-value {
    color: var(--success);
}
.pv-setting[data-tone="warning"] .pv-setting-value {
    color: var(--warning);
}
.pv-setting[data-tone="danger"] .pv-setting-value {
    color: var(--danger);
}
.pv-setting-action {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.pv-setting:not(:has(.pv-setting-value)) {
    grid-template-columns: minmax(0, 1fr) auto;
}
.pv-turn {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 16px;
}
.pv-turn-node {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pv-turn-node i {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-knob);
}
.pv-turn-node[data-active] {
    color: var(--ink);
    font-weight: var(--font-medium);
}
.pv-turn-node[data-active] i {
    border-color: var(--ink);
    background: var(--ink);
}
.pv-turn[data-turn="you"] .pv-turn-node[data-active] i {
    border-color: var(--warning);
    background: var(--warning);
}
.pv-turn-line {
    width: 28px;
    height: 2px;
    border-radius: 1px;
    background: var(--line);
}
.pv-row[data-variant="message"] {
    grid-template-columns: 32px minmax(0, 1.6fr) minmax(0, 1fr) 110px 16px;
}
.pv-row[data-variant="message"] .pv-row-title {
    white-space: normal;
}
.pv-row[data-variant="message"] .pv-row-sub {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}
.pv-deliver {
    display: grid;
    gap: 4px;
}
.pv-deliver-bar {
    display: flex;
    height: 6px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface-2);
}
.pv-deliver-bar i {
    display: block;
    height: 100%;
    background: var(--ink-2);
}
.pv-deliver-bar i[data-kind="pending"] {
    background: var(--line-strong);
}
.pv-deliver-bar i[data-kind="failed"] {
    background: var(--danger);
}
.pv-deliver small {
    color: var(--ink-3);
    font-size: 12px;
    line-height: 16px;
}
.pv-row[data-variant="plain"] {
    grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
}
.pv-row[data-variant="plain"] > .pv-row-fig {
    min-width: 84px;
}
.pv-row[data-variant="plain"] > .pv-row-acts {
    flex-wrap: wrap;
}
.pv-row[data-variant="plain"] .pv-row-title {
    white-space: normal;
}
.pv-quote {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
    color: var(--ink);
    font-size: 14px;
    line-height: 21px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.pv-subpage > .admin-card,
.pv-subpage > .admin-wide-card,
.pv-subpage .pv-two > .admin-card,
.pv-subpage .pv-two > div > .admin-card,
.pv-subpage .pv-col > .admin-card {
    border-color: var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.pv-subpage .pv-col {
    display: grid;
    min-width: 0;
    gap: 16px;
}
.pv-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--ink-3);
    font-size: 13.5px;
}
.pv-link-row a {
    color: var(--ink-2);
}
@media (max-width: 1023px) {
    .pv-two {
        grid-template-columns: minmax(0, 1fr);
    }
    .pv-setting {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .pv-setting-value {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .pv-setting-action .admin-btn,
    .pv-setting-action button {
        min-height: 44px;
    }
    .pv-row[data-variant="message"],
    .pv-row[data-variant="plain"] {
        grid-template-columns: 32px minmax(0, 1fr) auto;
    }
    .pv-turn {
        flex-wrap: wrap;
    }
}
html[data-motion="reduced"] .pv-turn-node i {
    transition-duration: 1ms !important;
}
.pv-row-note {
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 16px;
    white-space: nowrap;
}
.pv-subpage > * {
    flex-shrink: 0;
}
.pv-row[data-variant="plain"] .pv-row-sub {
    white-space: normal;
}
.pv-turncard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}
.pv-turncard > p {
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
}
.pv-turncard > p strong {
    color: var(--ink);
}
.pv-card-intro {
    margin: 0;
    padding: 12px var(--card-pad) 0;
    color: var(--ink-3);
    font-size: 13.5px;
    line-height: 20px;
}
.pv-card .admin-datatable,
.pv-card .admin-data-table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.pv-subpage .admin-kpi {
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.pv-subpage .admin-kpi .admin-kpi-label {
    color: var(--ink-3);
    font-size: 13px;
    line-height: 18px;
}
.pv-subpage .admin-kpi .admin-kpi-value {
    font: 600 26px/32px var(--font-display);
    letter-spacing: -0.01em;
}
.pv-subpage .admin-kpi .admin-kpi-hint {
    color: var(--ink-3);
    font-size: 12.5px;
}
.pv-subpage a.admin-kpi:hover {
    border-color: color-mix(in srgb, var(--line), var(--ink) 14%);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}
.pv-subpage .portal-content-sections {
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
}
.pv-subpage .portal-content-section {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 12px var(--card-pad);
    align-items: center;
}
.pv-subpage .portal-content-sections > li:first-child .portal-content-section {
    border-top: 0;
}
.pv-subpage .portal-content-section:hover,
.pv-subpage .portal-content-section:focus-visible {
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
.pv-subpage .portal-content-section > svg {
    width: 32px;
    height: 32px;
    padding: 8px;
    margin: 0;
    border-radius: 8px;
    background: var(--surface-2);
}
.pv-subpage .portal-content-section strong {
    font-size: 14.5px;
    font-weight: var(--font-medium);
}
@media (min-width: 1024px) {
    .pv-subpage .portal-content-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
@media (max-width: 1023px) {
    .pv-row[data-variant="plain"],
    .pv-row[data-variant="message"] {
        grid-template-areas:
            "ic main fig"
            "ic vis vis"
            ". acts acts";
        grid-template-columns: 32px minmax(0, 1fr) auto;
    }
    .pv-row[data-variant="plain"] > .pv-row-ic,
    .pv-row[data-variant="message"] > .pv-row-ic {
        grid-area: ic;
    }
    .pv-row[data-variant="plain"] > .pv-row-main,
    .pv-row[data-variant="message"] > .pv-row-main {
        grid-area: main;
    }
    .pv-row[data-variant="plain"] > .pv-row-vis,
    .pv-row[data-variant="message"] > .pv-row-vis {
        grid-area: vis;
        grid-column: auto;
        grid-row: auto;
    }
    .pv-row[data-variant="plain"] > .pv-row-fig,
    .pv-row[data-variant="message"] > .pv-row-fig {
        grid-area: fig;
    }
    .pv-row[data-variant="plain"] > .pv-row-acts,
    .pv-row[data-variant="message"] > .pv-row-acts {
        grid-area: acts;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .pv-row[data-variant="plain"] .pv-row-acts .admin-btn,
    .pv-row[data-variant="plain"] .pv-row-acts button {
        min-width: 44px;
        min-height: 44px;
    }
}
.pv-row[data-variant="download"] {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
}
.pv-row[data-variant="download"] > .pv-row-fig {
    display: none;
}
.pv-row[data-variant="download"] > .pv-row-ic {
    width: auto;
    height: auto;
    background: transparent;
}
.pv-dl-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    color: var(--ink-3);
    font-size: var(--text-sm);
    white-space: nowrap;
}
@media (max-width: 1023px) {
    .pv-row[data-variant="download"] {
        grid-template-areas:
            "ic main acts"
            "ic vis acts";
        grid-template-columns: 34px minmax(0, 1fr) auto;
        row-gap: 4px;
    }
    .pv-row[data-variant="download"] > .pv-row-ic {
        grid-area: ic;
        align-self: start;
    }
    .pv-row[data-variant="download"] > .pv-row-main {
        grid-area: main;
    }
    .pv-row[data-variant="download"] > .pv-row-vis {
        grid-area: vis;
    }
    .pv-row[data-variant="download"] > .pv-row-acts {
        grid-area: acts;
    }
    .pv-dl-meta {
        gap: 8px;
        font-size: var(--text-xs);
    }
    .pv-dl-meta > :last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 640px) {
    .pv-dl-label,
    .pv-dl-meta > :last-child {
        display: none;
    }
    .pv-row[data-variant="download"] .pv-row-acts .admin-btn {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
}
.pv-overview.po-overview {
    max-width: 1240px;
}
.po-overview .po-card {
    min-width: 0;
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.po-overview .po-card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.po-overview .po-card-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
.po-overview .po-card-head h2 a {
    color: inherit;
    text-decoration: none;
}
.po-overview .po-card-head h2 a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.po-overview .po-card-head > .po-sub {
    margin-left: auto;
}
.po-overview .po-sub {
    margin: 0;
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 18px;
}
.po-overview .po-eyebrow {
    margin: 0 0 8px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02em;
}
.po-overview .po-tile-note[data-tone="danger"] {
    color: var(--danger);
}
.po-overview .po-tile-note[data-tone="warning"] {
    color: var(--warning);
}
.po-overview .po-more-link {
    color: var(--ink-2);
    font-size: 13px;
    text-decoration: none;
}
.po-overview .po-more-link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.po-overview .po-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.po-overview .po-btn-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--accent);
}
.po-overview [data-po-enter] {
    animation: po-enter var(--dur-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * var(--stagger));
}
.po-overview .po-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 6px;
}
.po-overview .po-hero[data-has-invoices] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.po-overview .po-hello {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    min-width: 0;
    padding-top: 10px;
}
.po-overview .po-greeting {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.17;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.po-overview .po-greeting em {
    color: var(--ink-2);
    font-style: normal;
}
.po-overview .po-hello-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.po-overview .po-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.po-overview .po-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.po-overview .po-tile:hover {
    border-color: var(--line-field);
}
.po-overview .po-tile-label {
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0.02em;
}
.po-overview .po-tile-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.02em;
}
.po-overview .po-tile-value small,
.po-overview .po-tile-note {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}
.po-overview .po-tile-value small {
    color: var(--ink-3);
}
.po-overview .po-invoices {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--radius-lg);
}
.po-overview .po-amount {
    margin: 2px 0 6px;
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}
.po-overview .po-amount span {
    color: var(--ink-3);
    font-size: 28px;
    letter-spacing: -0.02em;
}
.po-overview .po-context {
    margin: 0;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 19px;
}
.po-overview .po-paybar {
    position: relative;
    height: 60px;
    margin: 22px 0 16px;
}
.po-overview .po-paybar-track,
.po-overview .po-paybar-done {
    position: absolute;
    top: 7px;
    left: 0;
    height: 2px;
    border-radius: 1px;
}
.po-overview .po-paybar-track {
    right: 0;
    background: var(--surface-2);
}
.po-overview .po-paybar-done {
    background: var(--ink);
    transform-origin: left;
}
.po-overview [data-po-enter] .po-paybar-done {
    animation: po-grow-x var(--dur-draw) var(--ease-draw) backwards;
    animation-delay: 160ms;
}
.po-overview .po-pin {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    transform: translateX(-50%);
}
.po-overview .po-pin i {
    width: 12px;
    height: 12px;
    margin: 2px 0 8px;
    border: 2px solid var(--line-field);
    border-radius: var(--radius-full);
    background: var(--surface);
}
.po-overview .po-pin b {
    color: var(--ink);
    font-weight: 500;
}
.po-overview .po-pin[data-kind="sent"] i,
.po-overview .po-pin[data-kind="due"][data-past] i {
    border-color: var(--ink);
    background: var(--ink);
}
.po-overview .po-pin[data-kind="overdue"] {
    color: var(--danger);
}
.po-overview .po-pin[data-kind="overdue"] i {
    border-color: var(--danger);
    background: var(--danger);
}
.po-overview .po-pin[data-kind="today"] i {
    border-color: var(--ink);
    background: var(--accent);
}
.po-overview .po-invoices-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
.po-overview .po-invoices-aside {
    margin-left: auto;
    color: var(--ink-2);
    font-size: 12.5px;
}
.po-overview .po-paid {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 22px;
}
.po-overview .po-paid-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink);
}
.po-overview .po-paid-title {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.02em;
}
.po-overview .po-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.po-overview .po-services:not([data-count="1"]):not([data-count="2"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.po-overview .po-services-more {
    margin: -4px 0 0;
}
.po-overview .po-services-more[data-mobile-only] {
    display: none;
}
.po-overview .po-site {
    display: flex;
    flex-direction: column;
}
.po-overview .po-site-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.po-overview .po-fav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    overflow: hidden;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
}
.po-overview .po-fav img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.po-overview .po-site-name {
    min-width: 0;
}
.po-overview .po-site-name h2 {
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-overview .po-site-name h2 a {
    color: var(--ink);
    text-decoration: none;
}
.po-overview .po-site-name h2 a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.po-overview .po-site-name p {
    overflow: hidden;
    margin: 0;
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-overview .po-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    margin-left: auto;
    padding: 4px 9px;
    border: 1px solid var(--line-field);
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 12.5px;
    text-decoration: none;
}
.po-overview .po-open:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}
.po-overview .po-browser {
    overflow: hidden;
    margin: 14px 0 12px;
    border-radius: 12px;
    background: var(--surface-2);
}
.po-overview .po-browser-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.po-overview .po-browser-bar i {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--line-field);
}
.po-overview .po-browser-bar span {
    overflow: hidden;
    margin-left: 8px;
    color: var(--ink-3);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-overview .po-browser-shot {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.po-overview .po-browser-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.po-overview .po-browser-blank {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ink-3);
    font-size: 11px;
}
.po-overview .po-facts {
    display: grid;
    gap: 6px;
    margin: auto 0 0;
    font-size: 13px;
    line-height: 18px;
}
.po-overview .po-facts div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.po-overview .po-facts dt {
    color: var(--ink-3);
}
.po-overview .po-facts dd {
    overflow: hidden;
    margin: 0;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-overview .po-service {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.po-overview .po-service-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 0;
    color: var(--ink-3);
    font-size: 13px;
}
.po-overview .po-service-figure strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.po-overview .po-service-cta {
    align-self: flex-start;
    margin-top: auto;
}
.po-overview .po-phone {
    display: flex;
    flex-direction: column;
}
.po-overview .po-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
    padding: 0;
    list-style: none;
}
.po-overview .po-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
}
.po-overview .po-line-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.po-overview .po-line-name {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-overview .po-line-detail {
    color: var(--ink-3);
    font-size: 12px;
    line-height: 16px;
}
.po-overview .po-led {
    position: relative;
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--line-field);
}
.po-overview .po-line[data-state="connected"] .po-led {
    background: var(--success);
}
.po-overview .po-line[data-state="connected"] .po-led::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--success);
    animation: po-led 2.4s var(--ease-out) infinite;
}
.po-overview .po-line[data-state="app"] .po-led {
    border: 2px solid var(--success);
    background: var(--surface);
}
.po-overview .po-more {
    margin: -6px 0 12px;
}
.po-overview .po-day-label {
    margin-top: auto;
}
.po-overview .po-day {
    position: relative;
    height: 56px;
    margin-top: 6px;
}
.po-overview .po-day-axis {
    position: absolute;
    right: 0;
    bottom: 15px;
    left: 0;
    height: 1px;
    background: var(--line);
}
.po-overview .po-day-slot {
    position: absolute;
    top: 6px;
    bottom: 16px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    transform: translateX(-50%);
}
.po-overview .po-day-tick {
    width: 3px;
    border-radius: 2px;
    background: var(--ink);
    transform-origin: bottom;
}
.po-overview .po-day-tick[data-missed] {
    background: var(--danger);
}
.po-overview [data-po-enter] .po-day-tick {
    animation: po-grow-y var(--dur-draw) var(--ease-draw) backwards;
    animation-delay: 200ms;
}
.po-overview .po-day-now {
    position: absolute;
    top: 0;
    bottom: 10px;
    width: 1px;
    background: var(--accent-deep);
}
.po-overview .po-day-now span {
    position: absolute;
    top: -3px;
    left: 4px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10px;
}
.po-overview .po-day-empty {
    position: absolute;
    top: 12px;
    left: 0;
    color: var(--ink-3);
    font-size: 12px;
}
.po-overview .po-day-hours {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 12px;
}
.po-overview .po-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}
.po-overview .po-lower[data-has-domains] {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.po-overview .po-side {
    display: grid;
    align-content: start;
    gap: 16px;
}
.po-overview .po-lower:not([data-has-domains]) .po-side {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.po-overview .po-monthstrip {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
    margin: 16px 0 6px;
    padding: 0;
    list-style: none;
}
.po-overview .po-monthstrip li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 6px 0 5px;
    border-radius: 8px;
}
.po-overview .po-monthstrip li[data-current] {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
}
.po-overview .po-monthstrip-count {
    height: 16px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}
.po-overview .po-monthstrip-count {
    position: relative;
}
.po-overview .po-monthstrip-count[data-stops]::after {
    content: "";
    position: absolute;
    top: 1px;
    right: -5px;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--danger);
}
.po-overview .po-monthstrip-bar {
    display: block;
    width: 8px;
    height: 28px;
    border-radius: 4px;
    background: var(--surface-2);
}
.po-overview .po-monthstrip-bar {
    position: relative;
    overflow: hidden;
}
.po-overview .po-monthstrip-bar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--h, 0) * 100%);
    border-radius: 4px;
    background: var(--ink);
}
.po-overview .po-monthstrip-label {
    color: var(--ink-3);
    font-size: 10px;
    line-height: 14px;
    text-transform: lowercase;
}
.po-overview .po-monthstrip li[data-current] .po-monthstrip-label {
    color: var(--ink);
    font-weight: 600;
}
.po-overview .po-domlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.po-overview .po-domlist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.po-overview .po-domlist a {
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-overview .po-domlist a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.po-overview .po-domlist-when {
    flex: none;
    margin-left: auto;
    color: var(--ink-3);
    font-size: 12px;
}
.po-overview .po-domlist-when[data-stops] {
    color: var(--danger);
}
.po-overview .po-domains .po-more-link {
    display: inline-block;
    margin-top: 12px;
}
.po-overview .po-cells {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 3px;
    margin: 14px 0 10px;
}
.po-overview .po-cells i {
    height: 28px;
    border-radius: 4px;
    background: var(--surface-2);
}
.po-overview .po-cells i[data-filled] {
    background: var(--ink);
}
.po-overview .po-feed {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.po-overview .po-feed li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-2);
}
.po-overview .po-feed li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.po-overview .po-feed-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--ink);
}
.po-overview .po-feed-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
    line-height: 19px;
}
.po-overview .po-feed-copy a {
    color: var(--ink);
    text-decoration: none;
}
.po-overview .po-feed-copy a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.po-overview .po-feed-when {
    color: var(--ink-3);
    font-size: 11px;
    line-height: 19px;
}
.po-overview .po-help {
    margin-top: 8px;
}
@media (max-width: 1180px) {
    .po-overview .po-services:not([data-count="1"]):not([data-count="2"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .po-overview .po-lower[data-has-domains] {
        grid-template-columns: minmax(0, 1fr);
    }
    .po-overview .po-lower[data-has-domains] .po-side {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}
@media (max-width: 1023px) {
    .po-overview .po-hero[data-has-invoices] {
        grid-template-columns: minmax(0, 1fr);
    }
    .po-overview .po-greeting {
        font-size: 24px;
    }
}
@media (max-width: 720px) {
    .po-overview .po-services,
    .po-overview .po-services:not([data-count="1"]):not([data-count="2"]),
    .po-overview .po-lower[data-has-domains] .po-side,
    .po-overview .po-lower:not([data-has-domains]) .po-side {
        grid-template-columns: minmax(0, 1fr);
    }
    .po-overview .po-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .po-overview .po-site[data-extra] {
        display: none;
    }
    .po-overview .po-services-more[data-mobile-only] {
        display: block;
    }
    .po-overview .po-card,
    .po-overview .po-invoices {
        padding: 16px;
    }
    .po-overview .po-amount {
        font-size: 38px;
    }
    .po-overview .po-amount span {
        font-size: 24px;
    }
    .po-overview .po-invoices-aside {
        margin-left: 0;
        flex-basis: 100%;
    }
    .po-overview .po-monthstrip {
        gap: 2px;
    }
    .po-overview .po-monthstrip-bar {
        width: 6px;
        height: 22px;
    }
    .po-overview .po-monthstrip-label {
        font-size: 9px;
        overflow: hidden;
        max-width: 100%;
    }
    .po-overview .po-cells i {
        height: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .po-overview [data-po-enter],
    .po-overview [data-po-enter] .po-paybar-done,
    .po-overview [data-po-enter] .po-day-tick,
    .po-overview .po-line[data-state="connected"] .po-led::after {
        animation: none;
    }
}
html[data-motion="reduced"] .po-overview [data-po-enter],
html[data-motion="reduced"] .po-overview [data-po-enter] .po-paybar-done,
html[data-motion="reduced"] .po-overview [data-po-enter] .po-day-tick,
html[data-motion="reduced"] .po-overview .po-line[data-state="connected"] .po-led::after {
    animation: none;
}
.portal-voip-subnav[data-variant="pills"] {
    display: block;
    min-width: 0;
}
.portal-voip-subnav[data-variant="pills"] ul {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0 0 var(--space-1);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.portal-voip-subnav[data-variant="pills"] ul::-webkit-scrollbar {
    display: none;
}
.portal-voip-subnav[data-variant="pills"] li {
    flex: none;
}
.portal-voip-subnav[data-variant="pills"] a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    white-space: nowrap;
}
.portal-voip-subnav[data-variant="pills"] a:hover {
    background: var(--surface-pressed);
    color: var(--ink);
}
.portal-voip-subnav[data-variant="pills"] a[aria-current="page"] {
    background: var(--ink);
    color: var(--surface);
}
.portal-voip-subnav[data-variant="pills"] a:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .portal-voip-subnav[data-variant="pills"] {
        margin-inline: calc(-1 * var(--space-4));
    }
    .portal-voip-subnav[data-variant="pills"] ul {
        padding-inline: var(--space-4);
    }
}
@media (pointer: coarse) {
    .portal-voip-subnav a,
    .portal-voip-subnav[data-variant="pills"] a {
        min-height: 44px;
    }
}
.portal-voip-pagefoot {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}
@media (min-width: 769px) {
    .portal-voip-pagefoot {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}
@media (max-width: 768px) {
    .portal-voip-subnav:not([data-variant="pills"]) {
        margin-inline: calc(-1 * var(--space-4));
    }
    .portal-voip-subnav:not([data-variant="pills"]) ul {
        padding-inline: var(--space-4);
    }
}
.portal-voip-pagefoot p {
    margin: 0;
}
.portal-voip-pagefoot-title {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.portal-voip-pagefoot .portal-voip-mode {
    justify-self: start;
}
.portal-voip-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    min-width: 0;
}
.portal-voip-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.portal-voip-section-head h2 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
}
.portal-voip-section-head p {
    margin: var(--space-1) 0 0;
}
.portal-voip-lines {
    position: relative;
    margin: 0 calc(-1 * var(--space-2));
    padding: 0;
    list-style: none;
}
.portal-voip-lines > li + li {
    border-top: 1px solid var(--line);
}
.portal-voip-lines[data-rail] > li + li {
    border-top: 0;
}
.portal-voip-lines[data-rail]::before {
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: calc(var(--space-2) + 10.5px);
    width: 3px;
    border-radius: 3px;
    background: var(--line);
    content: "";
    pointer-events: none;
}
.portal-voip-line {
    --rail-bg: var(--surface);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 16px;
    grid-template-areas: "title state chev";
    align-items: center;
    column-gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
}
.portal-voip-line[data-lead] {
    grid-template-columns: 24px minmax(0, 1fr) auto 16px;
    grid-template-areas: "lead title state chev";
}
div.portal-voip-line {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title state";
}
div.portal-voip-line[data-lead] {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "lead title state";
}
button.portal-voip-line,
a.portal-voip-line {
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
button.portal-voip-line:hover,
a.portal-voip-line:hover {
    --rail-bg: var(--surface-2);
    background: var(--surface-2);
}
button.portal-voip-line:focus-visible,
a.portal-voip-line:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 0;
}
.portal-voip-line-lead {
    display: grid;
    grid-area: lead;
    place-items: center;
    color: var(--ink-2);
}
.portal-voip-line-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    grid-area: title;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.portal-voip-line-title .portal-voip-ext-chip {
    margin-left: 0;
}
.portal-voip-line-state {
    grid-area: state;
    min-width: 0;
    max-width: 20rem;
    overflow: hidden;
    color: var(--ink-2);
    font-size: var(--text-sm);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-voip-line-state[data-unset] {
    color: var(--ink-3);
}
.portal-voip-line-state[data-emphasize] {
    color: var(--ink);
    font-weight: var(--font-medium);
}
.portal-voip-line-chevron {
    grid-area: chev;
    color: var(--ink-3);
}
.portal-voip-line[data-variant="number"] .portal-voip-line-title {
    flex-wrap: nowrap;
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .portal-voip-line {
        grid-template-columns: minmax(0, 1fr) 16px;
        grid-template-areas:
            "title chev"
            "state chev";
        row-gap: 2px;
    }
    .portal-voip-line[data-lead] {
        grid-template-columns: 24px minmax(0, 1fr) 16px;
        grid-template-areas:
            "lead title chev"
            ". state chev";
    }
    div.portal-voip-line,
    div.portal-voip-line[data-lead] {
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
            "lead title"
            ". state";
    }
    .portal-voip-line-state {
        max-width: none;
        text-align: left;
        white-space: normal;
    }
    .portal-voip-lines[data-rail]::before {
        top: 32px;
        bottom: 32px;
    }
}
.portal-voip-hero {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
}
.portal-voip-hero .portal-voip-hero-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 1.5em;
    margin: 0;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.portal-voip-hero-node {
    display: block;
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--ink-3);
}
.portal-voip-hero .portal-voip-hero-status[data-tone="open"] .portal-voip-hero-node {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(199, 255, 74, 0.35);
}
.portal-voip-hero-body {
    display: grid;
    gap: var(--space-5);
}
@media (min-width: 900px) {
    .portal-voip-hero-body {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--space-10);
    }
}
.portal-voip-hero-numbers {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-voip-hero-number {
    color: var(--ink);
    font-size: var(--text-3xl);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium);
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
}
.portal-voip-hero-numbers[data-count="many"] .portal-voip-hero-number {
    font-size: var(--text-2xl);
}
.portal-voip-hero .portal-voip-hero-says {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--accent);
}
.portal-voip-hero-says span {
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.portal-voip-hero-says strong {
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: 1.35;
}
.portal-voip-hero .portal-voip-hero-empty {
    margin: 0;
    color: var(--ink-3);
}
@media (max-width: 560px) {
    .portal-voip-hero {
        padding: var(--space-5);
    }
    .portal-voip-hero-number {
        font-size: var(--text-2xl);
    }
    .portal-voip-hero-numbers[data-count="many"] .portal-voip-hero-number {
        font-size: var(--text-xl);
    }
}
.portal-voip-hero-story {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}
.portal-voip-attention {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--warning-border);
    background: var(--warning-bg);
}
.portal-voip-attention h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--warning);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.portal-voip-attention ul {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-voip-attention li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}
.portal-voip-attention li + li {
    padding-top: var(--space-3);
    border-top: 1px solid var(--warning-border);
}
.portal-voip-attention li > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 240px;
}
.portal-voip-attention strong {
    color: var(--ink);
    font-size: var(--text-base);
}
.portal-voip-attention p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-sm);
}
.portal-voip-tasks ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 900px) {
    .portal-voip-tasks ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.portal-voip-tasks li {
    display: grid;
    min-width: 0;
}
.portal-voip-task {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-height: 112px;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    font: inherit;
    text-align: left;
}
button.portal-voip-task {
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
button.portal-voip-task:hover {
    background: var(--surface-2);
}
button.portal-voip-task:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}
.portal-voip-task-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink);
}
.portal-voip-task-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1.3;
}
.portal-voip-task-state {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink-3);
    font-size: var(--text-sm);
    line-height: 1.35;
}
.portal-voip-ov {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-cards);
    align-items: start;
}
.portal-voip-ov-main,
.portal-voip-ov-side {
    display: grid;
    gap: var(--stack-cards);
    min-width: 0;
}
@media (min-width: 1100px) {
    .portal-voip-ov {
        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    }
}
.portal-voip-ov-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
.portal-voip-ov-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-cards);
    min-width: 0;
}
.portal-voip-usage p,
.portal-voip-usage dl {
    margin: 0;
}
.portal-voip-usage .portal-voip-usage-users,
.portal-voip-usage .portal-voip-usage-extra {
    color: var(--ink);
}
@media (pointer: coarse) {
    .portal-voip-mode button,
    .portal-voip-rg-chip,
    .portal-chrome .voip-stats-ranges a {
        min-height: 44px;
    }
    .portal-chrome .voip-stats-ranges a {
        display: inline-flex;
        align-items: center;
    }
    .portal-chrome .voip-voice-orb {
        min-width: 44px;
        min-height: 44px;
    }
}
.portal-auto-advanced {
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
}
@keyframes admin-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes voip-voice-swirl {
    to {
        transform: rotate(360deg);
    }
}
@keyframes portal-voip-meter-on {
    from {
        background: var(--line);
    }
}
@keyframes portal-flow-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes pv-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}
@keyframes pv-grow-y {
    from {
        transform: scaleY(0);
    }
}
@keyframes pv-grow-x {
    from {
        transform: scaleX(0);
    }
}
@keyframes pv-pulse {
    0% {
        opacity: 0.6;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(2);
    }
}
@keyframes pv-skel-pulse {
    50% {
        opacity: 0.55;
    }
}
@keyframes po-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}
@keyframes po-grow-x {
    from {
        transform: scaleX(0);
    }
}
@keyframes po-led {
    from {
        opacity: 0.45;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(2.6);
    }
}
@keyframes po-grow-y {
    from {
        transform: scaleY(0);
    }
}
.logo { display: inline-flex; align-items: center; min-width: 0; }
.logo-image { width: 142px; height: auto; max-height: 40px; flex: 0 0 auto; }
.portal-overview-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.portal-overview-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.portal-overview-card h2 { margin: 0; }
.portal-overview-card p { margin: 0 0 8px; color: var(--ink-2); }
.portal-kb-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 520px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md, 10px); background: var(--surface); }
.portal-kb-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: none; font: inherit; color: inherit; }
.portal-kb-search:focus-within { border-color: var(--ink-2); }
.portal-markdown { max-width: 760px; }
.portal-markdown h1, .portal-markdown h2, .portal-markdown h3 { margin: 1.4em 0 0.5em; }
.portal-markdown p, .portal-markdown ul, .portal-markdown ol { margin: 0 0 1em; line-height: 1.6; }
.portal-markdown a { text-decoration: underline; }
.portal-markdown code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.portal-passkeys-table { width: 100%; border-collapse: collapse; }
.portal-passkeys-table th, .portal-passkeys-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.portal-passkeys-table th { color: var(--ink-3); font-weight: 500; font-size: 0.8125rem; }
.portal-table-actions { text-align: right; }
.pv-col { display: grid; gap: 16px; }
.pv-col > .pv-card { padding: 20px; }
.portal-lang-field { display: grid; gap: 6px; }
button.admin-tab2 { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.pv-col--flush > .pv-card { padding: 0; }
.admin-ctx-menu {
    position: fixed;
    z-index: var(--z-popover);
    display: flex;
    min-width: 200px;
    flex-direction: column;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.admin-ctx-menu :is(a, button) {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
}
.admin-ctx-menu :is(a, button):hover {
    background: var(--surface-2);
}
.admin-ctx-menu-section {
    padding: var(--space-2) var(--space-2) var(--space-1);
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: none;
}
.admin-ctx-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
}
.admin-ctx-swatch--none {
    background: var(--surface);
}
.admin-tab-rename {
    width: 160px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    outline: none;
}
.admin-tab-rename:focus-visible {
    box-shadow: var(--focus-ring);
}
.portal-notify-help {
    margin: 0 0 var(--space-3);
    max-width: 62ch;
}
.portal-notify-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-notify-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
}
.portal-notify-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 260px;
    gap: 2px;
}
.portal-notify-copy span {
    color: var(--ink-3);
    font-size: var(--text-small);
}
.portal-notify-channels {
    display: flex;
    flex: none;
    gap: var(--space-5);
}
.portal-notify-switch {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-base);
}
.portal-notify-switch input {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--selection-ink);
}
.portal-notify-switch[data-pending] {
    opacity: 0.6;
}
@media (max-width: 640px) {
    .portal-notify-channels {
        width: 100%;
    }
}
.portal-call {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.portal-call-reason {
    max-width: 38ch;
}
.portal-call-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.portal-call-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.portal-search-trigger {
    display: inline-flex;
    height: 36px;
    min-width: 168px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2) 0 var(--space-3);
    
    border: 1px solid var(--line-field);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink-3);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-small);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.portal-search-trigger:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.portal-search-trigger:focus-visible,
.portal-search-icon:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
.portal-search-trigger-label {
    flex: 1 1 auto;
    text-align: left;
}
.portal-search-trigger kbd {
    display: inline-flex;
    height: 20px;
    align-items: center;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--sidebar-bg);
    color: var(--ink-3);
    font: inherit;
    font-size: var(--text-caption);
}
.portal-search-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
}
.portal-mtop .portal-search-icon + .portal-credit-chip {
    margin-left: 0;
}
@media (max-width: 1279px) {
    .portal-search-trigger {
        width: 36px;
        min-width: 0;
        justify-content: center;
        padding: 0;
        border-color: transparent;
        background: none;
    }
    .portal-search-trigger-label,
    .portal-search-trigger kbd {
        display: none;
    }
}
:is(.portal-spotlight, .portal-palette-sheet) kbd {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}
.portal-spotlight-result-source {
    max-width: 140px;
    overflow: hidden;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-spotlight-note {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) 10px;
    color: var(--ink-3);
    font-size: var(--text-caption);
    line-height: 18px;
}
.portal-spotlight {
    position: fixed;
    
    z-index: 10050;
    inset: 0;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 12vh var(--space-4) var(--space-4);
}
.portal-spotlight-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(16, 21, 18, 0.4);
    cursor: default;
}
.portal-spotlight-panel {
    position: relative;
    display: flex;
    width: min(680px, 100%);
    max-height: min(640px, 76vh);
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
}
.portal-spotlight-search {
    display: flex;
    min-height: 56px;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.portal-spotlight-search > svg {
    flex: 0 0 auto;
    color: var(--ink-3);
}
.portal-spotlight-search input {
    min-width: 0;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: none;
    outline: 0;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 24px;
}
.portal-spotlight-search input::placeholder {
    color: var(--ink-3);
}
.portal-spotlight-search input::-webkit-search-cancel-button {
    display: none;
}
.portal-spotlight-cancel {
    height: 44px;
    padding: 0 var(--space-1);
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.portal-spotlight-results {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}
.portal-spotlight-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.portal-spotlight-group + .portal-spotlight-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}
.portal-spotlight-group-label {
    display: block;
    padding: 6px 10px 4px;
    color: var(--ink-3);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    line-height: var(--lh-caption);
}
.portal-spotlight-result {
    display: grid;
    min-height: 40px;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    gap: var(--space-3);
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
}
.portal-spotlight-result[data-active] {
    background: var(--surface-2);
}
.portal-spotlight-result-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
}
.portal-spotlight-result[data-active] .portal-spotlight-result-icon {
    background: var(--surface);
    color: var(--ink);
}
.portal-spotlight-result-copy {
    display: grid;
    min-width: 0;
    line-height: 18px;
}
.portal-spotlight-result-copy strong,
.portal-spotlight-result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-spotlight-result-copy strong {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}
.portal-spotlight-result-copy small {
    color: var(--ink-3);
    font-size: var(--text-caption);
}
.portal-spotlight-result-kind {
    color: var(--ink-3);
    font-size: var(--text-caption);
    white-space: nowrap;
}
.portal-spotlight-result[data-tone="danger"] .portal-spotlight-result-copy strong {
    color: var(--danger);
}
.portal-spotlight-result[aria-disabled="true"] {
    cursor: not-allowed;
}
.portal-spotlight-result[aria-disabled="true"] .portal-spotlight-result-copy strong {
    color: var(--ink-3);
}
.portal-spotlight-empty {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-base);
    line-height: 20px;
    text-align: center;
}
.portal-spotlight-foot {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink-3);
    font-size: var(--text-caption);
}
.portal-spotlight-foot > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.portal-palette-sheet .portal-spotlight-search {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 0 var(--space-2) 0 var(--space-4);
}
.portal-palette-sheet .portal-spotlight-results {
    overflow: visible;
    padding: var(--space-2);
}
.portal-palette-sheet .portal-spotlight-result {
    min-height: 48px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
}
.portal-palette-sheet .portal-palette-sheet .portal-spotlight-result-source {
    display: none;
}
@media (pointer: coarse) {
    .portal-search-icon {
        width: 44px;
        height: 44px;
    }
}
.portal-oidc-scopes {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.portal-oidc-scopes li {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
}
.portal-oidc-scopes span {
    color: var(--ink-3);
    font-size: var(--text-sm);
}
.admin-auth-stack .portal-oidc-continue {
    height: auto;
    min-height: 44px;
    padding-block: 10px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.portal-overview { display: grid; gap: 20px; }
.portal-ov-hello { display: grid; gap: 6px; }
.portal-ov-greeting { margin: 0; color: var(--ink-2); font-size: 15px; }
.portal-ov-hello .pv-hero-sentence { min-height: 0; }
.portal-ov-invoices { display: grid; gap: 10px; }
.portal-ov-amount { font: 600 34px/40px var(--font-display); color: var(--ink); letter-spacing: -0.015em; }
.portal-ov-inv-paid { margin: 0; font-size: 20px; }
.portal-ov-context { margin: 0; color: var(--ink-2); }
.portal-ov-line { position: relative; height: 46px; margin: 8px 0 4px; }
.portal-ov-line::before, .portal-ov-line-fill { position: absolute; top: 6px; left: 0; height: 2px; border-radius: 2px; content: ""; }
.portal-ov-line::before { right: 0; background: var(--line); }
.portal-ov-line-fill { background: var(--ink); }
.portal-ov-knot { position: absolute; top: 0; display: grid; justify-items: center; gap: 6px; transform: translateX(-50%); }
.portal-ov-knot i { width: 14px; height: 14px; border: 2px solid var(--ink-3); border-radius: 50%; background: var(--surface); }
.portal-ov-knot[data-past] i { border-color: var(--ink); background: var(--ink); }
.portal-ov-knot[data-kind="today"] i { border-color: var(--accent, #c7ff4a); background: var(--accent, #c7ff4a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 15%, transparent); }
.portal-ov-knot[data-kind="overdue"] i { border-color: var(--danger, #d92d20); }
.portal-ov-knot small { color: var(--ink-3); font-size: 12px; line-height: 16px; white-space: nowrap; }
.portal-ov-knot small b { color: var(--ink-2); font-weight: var(--font-medium); }
.portal-ov-cells { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 10px 0; }
.portal-ov-cells i { height: 18px; border-radius: 3px; background: var(--surface-2); }
.portal-ov-cells i[data-filled] { background: var(--ink); }
.pv-attn .pv-row[data-tone="danger"] .pv-row-ic { color: var(--danger, #d92d20); }
.pv-attn .pv-row[data-tone="warning"] .pv-row-ic { color: var(--warning, #b54708); }
.admin-pin-tab-slot { display: contents; }
.portal-apps-table td:last-child { text-align: right; }
.portal-call-reason-row { list-style: none; }
.portal-top-stacko {
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

/* --- Mobile shell (< 1024 px), parity with Next portal v3 ------------------------------------------------------------------- */
/* Open-invoice badge on Facturen in the bottom bar (Next modules/portal.css `.portal-bnav-badge`). */
@media (max-width: 1023px) {
    .portal-bnav-badge {
        position: absolute;
        top: -4px;
        left: calc(100% - 6px);
        display: inline-flex;
        min-width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border-radius: var(--radius-full);
        background: var(--danger-solid);
        box-shadow: 0 0 0 2px var(--night);
        color: #ffffff;
        font-size: 11px;
        font-weight: var(--font-semibold);
        line-height: 1;
    }
}

/* The fss-core sheet is teleported without our class: the More content carries `.portal-more` itself (Next `.portal-more .fss-sheet-body`). */
.portal-more-body {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
}

/* MobileActionBar: the fss-core page header renders `.fss-actionbar[data-fss-actionbar]` without Next's `data-variant="fixed"`. The
   same portal rules as for the fixed bar: it pushes the pay button away, the content gets room for it and floating layers sit above
   it. The bottom bar already carries the safe area, so the action bar does not add it again (Next `--fss-actionbar-safe: 0`). */
@media (max-width: 1023px) {
    html:has(.portal-chrome[data-has-user] [data-fss-actionbar]) {
        --bottom-nav-h: 120px;
    }
    .portal-chrome:has([data-fss-actionbar]) .portal-paybar {
        display: none;
    }
    .portal-chrome.admin-chrome:has([data-fss-actionbar]) > .admin-content {
        padding-bottom: calc(var(--portal-nav-h) + 56px + var(--space-4));
    }
    .portal-chrome [data-fss-actionbar] {
        padding-bottom: var(--space-2);
    }
}

/* Image fallback (portal.js): the placeholder shows once the image failed; a hidden placeholder stays hidden whatever display it sets. */
[data-img-placeholder][hidden],
img[data-img-fallback][hidden] {
    display: none !important;
}
.pv-site-shot[data-img-failed] {
    display: none;
}
.pv-row-ic .pv-row-ic-fallback {
    display: inline-flex;
}

/* nested-cards: nothing inside a card draws its own card.
   An empty state, a table wrapper (Livewire DataTable, `.admin-data-table-wrap`), the mobile card list of a table and a card nested in a
   card render flat, like Next (`EmptyState` in a card, `DataTable variant="plain"`): the ancestor supplies the border, radius and shadow.
   `data-card="true"` is the deliberate escape hatch (as in Next). fss-core's ui.css gives `.admin-empty-state` and `.admin-datatable-wrap`
   their own chrome and Next's opt-out list never covered `.pv-card`, so the list is complete here. tests/Unit/NestedCardsTest.php guards it. */
:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card)
    :is(.admin-empty-state, .admin-datatable-wrap, .admin-data-table-wrap, .admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card):not([data-card="true"]),
.admin-empty-state[data-card="false"],
:is(.admin-kpi, .admin-drawer-panel, .admin-modal2-panel)
    :is(.admin-empty-state, .admin-datatable-wrap, .admin-data-table-wrap):not([data-card="true"]) {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card) .fss-datatable .fss-cardlist {
    gap: 0;
}
:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card) .fss-datatable .fss-card {
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}
:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card) .fss-datatable .fss-card:not([data-selected]) {
    background: none;
}
:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card) .fss-datatable .fss-card[data-swipe] {
    padding: 0;
}
:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card) .fss-datatable .fss-card:last-child {
    border-bottom: 0;
}
/* A select inside a list row (right side): fixed comfortable width, same height as every field. */
.pv-row-acts .pv-row-select {
    width: 220px;
    max-width: 100%;
}
/* A status badge in a list row never pushes the row wider than the screen. */
.pv-row-vis {
    min-width: 0;
}
.pv-row-vis .admin-status-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overview cards with a list: the list sits flush under the head divider (no empty band, no double line). */
.admin-card[data-flush] > .admin-card-body > .portal-voip-lines,
.pv-subpage.portal-voip .admin-card[data-flush] > .admin-card-body > .portal-voip-lines:not([data-rail]) {
    margin: 0;
}
.admin-card[data-flush] > .admin-card-body > .portal-voip-lines > li:first-child {
    border-top: 0;
}

/* --- Zoeken (⌘K): rustige kop, omlijst zoekveld, "Ik zoek naar"-chips, rijen met een icoon per soort, snel-naar-pillen, toetsenhints --- */
.pq { position: fixed; z-index: 10050; inset: 0; display: grid; align-items: start; justify-items: center; padding: 11vh 16px 16px; }
.pq-backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in srgb, var(--ink) 28%, transparent); backdrop-filter: blur(3px); cursor: default; }
.pq-panel { position: relative; display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(680px, 80vh); overflow: hidden; padding: 18px 20px 0; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-3); }
@keyframes pq-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
.pq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.pq-head h2 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 22px; }
.pq-close { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-full); background: var(--control-fill, var(--surface-2)); color: var(--ink-2); cursor: pointer; }
.pq-close:hover { background: var(--control-fill-hover, var(--surface-pressed)); color: var(--ink); }
.pq-field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line-field); border-radius: 12px; background: var(--surface); color: var(--ink-3); transition: border-color 0.15s, box-shadow 0.15s; }
.pq-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.pq-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; }
.pq-field input::-webkit-search-cancel-button { display: none; }
.pq-spinner { width: 14px; height: 14px; border: 2px solid var(--line-field); border-top-color: var(--ink-2); border-radius: var(--radius-full); animation: pq-spin 0.7s linear infinite; }
@keyframes pq-spin { to { transform: rotate(360deg); } }
.pq-label { display: block; margin: 0 0 8px; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.pq-scopes { padding-top: 14px; }
.pq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pq-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: var(--control-fill, var(--surface-2)); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.pq-chip:hover { background: var(--control-fill-hover, var(--surface-pressed)); color: var(--ink); }
.pq-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.pq-chip-count { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.7; }
.pq-results { flex: 1; min-height: 0; overflow-y: auto; margin: 10px -12px 0; padding: 4px 12px 8px; overscroll-behavior: contain; }
.pq-intro { margin: 10px 0 4px; color: var(--ink-3); font-size: 13px; }
.pq-group { padding-top: 10px; }
.pq-group .pq-label { margin: 0 0 4px; padding: 0 8px; }
.pq-row { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.pq-row[data-active] { background: var(--surface-2); }
.pq-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); }
.pq-icon > span { display: grid; place-items: center; }
.pq-text { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.pq-text strong { overflow: hidden; flex: none; max-width: 70%; font-size: 14px; font-weight: 500; text-overflow: ellipsis; }
.pq-context { overflow: hidden; color: var(--ink-3); font-size: 13px; text-overflow: ellipsis; }
.pq-context::before { content: "–"; margin-right: 6px; }
.pq-meta { flex: none; color: var(--ink-3); font-size: 12px; }
.pq-enter { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); opacity: 0; }
.pq-row[data-active] .pq-enter { opacity: 1; }
.pq-empty, .pq-note { margin: 14px 8px; color: var(--ink-3); font-size: 13px; }
.pq-quick { padding: 12px 0 16px; border-top: 1px solid var(--line); }
.pq-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-full); background: var(--control-fill, var(--surface-2)); color: var(--ink); font-size: 13px; text-decoration: none; }
.pq-pill:hover { background: var(--control-fill-hover, var(--surface-pressed)); }
.pq-pill svg { color: var(--ink-3); }
.pq-foot { display: flex; gap: 16px; margin: 0 -20px; padding: 10px 20px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-size: 12px; }
.pq-foot kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: 2px; padding: 0 4px; border-radius: 5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 10px; }
.pq :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pq-field input:focus-visible { outline: none; }
@media (max-width: 640px) {
    .pq { padding: 0; align-items: end; }
    .pq-panel { width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; }
    .pq-foot { display: none; }
    .pq-text strong { max-width: 100%; }
    .pq-context { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pq-panel { animation: none; } .pq-spinner { animation-duration: 2s; } }

/* --- Accountmenu (topbalk): identiteit bovenaan, rustige rijen met icoon, groepen met een lijn ertussen, uitloggen in rood --- */
.portal-usermenu.um { flex: none; }
.um-panel { position: absolute; z-index: var(--z-popover); top: calc(100% + 8px); right: 0; width: 288px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-3); transform-origin: top right; }
.um-enter { transition: opacity 0.18s cubic-bezier(.16, 1, .3, 1), transform 0.22s cubic-bezier(.16, 1, .3, 1); }
.um-leave { transition: opacity 0.12s ease-in, transform 0.12s ease-in; }
.um-from { opacity: 0; transform: translateY(-4px) scale(.97); }
.um-to { opacity: 1; transform: none; }
.um-identity { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.um-avatar { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-full); background: var(--accent, #c7ff4a); color: var(--ink); font-size: 14px; font-weight: 600; }
.um-avatar i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border: 2px solid var(--surface); border-radius: var(--radius-full); background: var(--success); }
.um-who { display: flex; flex-direction: column; min-width: 0; }
.um-who strong { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }
.um-who small { overflow: hidden; color: var(--ink-3); font-size: 12.5px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.um-group { margin: 0; padding: 4px 0; border-top: 1px solid var(--line); }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.12s, color 0.12s; }
.um-item > span:first-of-type { flex: 1; min-width: 0; }
.um-item svg { flex: none; color: var(--ink-3); transition: color 0.12s; }
.um-item:hover, .um-item:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.um-item:hover svg, .um-item:focus-visible svg { color: var(--ink); }
.um-static { cursor: default; }
.um-static:hover { background: transparent; color: var(--ink-2); }
.um-static:hover svg { color: var(--ink-3); }
.um-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.um-seg button { min-width: 34px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.um-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); }
.um-seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.um-switch { position: relative; width: 30px; height: 18px; flex: none; border-radius: var(--radius-full); background: var(--line-strong); transition: background 0.15s; }
.um-switch span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-1); transition: transform 0.18s cubic-bezier(.16, 1, .3, 1); }
.um-item[aria-checked="true"] .um-switch { background: var(--ink); }
.um-item[aria-checked="true"] .um-switch span { transform: translateX(12px); }
.um-danger, .um-danger svg { color: var(--danger); }
.um-danger:hover, .um-danger:focus-visible { background: var(--danger-bg); color: var(--danger); }
.um-danger:hover svg { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .um-enter, .um-leave { transition: none; } }

/* --- Zijbalk (v6): groepen met een rustige kop en een lijn erboven, compacte rijen met icoon, actief = zacht grijs vlak --- */
.portal-nav { gap: 2px; }
.portal-nav-heading { margin: 14px 12px 6px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 500; line-height: 16px; }
.portal-nav .portal-nav-link { min-height: 36px; gap: 10px; padding: 0 10px; border-radius: 9px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; transition: background 0.12s, color 0.12s; }
.portal-nav .portal-nav-link > svg:first-child { width: 17px; height: 17px; color: var(--ink-3); transition: color 0.12s; }
.portal-nav .portal-nav-link:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); }
.portal-nav .portal-nav-link:hover > svg:first-child { color: var(--ink-2); }
.portal-nav .portal-nav-row[data-active] > .portal-nav-link { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: none; color: var(--ink); }
.portal-nav .portal-nav-row[data-active] > .portal-nav-link > svg:first-child { color: var(--ink); }
.portal-nav .portal-nav-row[data-active]:has(.portal-nav-sublink[data-active]) > .portal-nav-link { background: none; }
.portal-nav .portal-nav-node { display: none; }
.portal-nav .portal-nav-sub-inner { position: relative; margin: 2px 0 6px 18px; padding-left: 12px; }
.portal-nav .portal-nav-sub-inner::before { position: absolute; top: 2px; bottom: 2px; left: 0; width: 1px; background: var(--line); content: ""; }
.portal-nav .portal-nav-sublink { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px; color: var(--ink-3); font-size: 13px; font-weight: 450; text-decoration: none; transition: background 0.12s, color 0.12s; }
.portal-nav .portal-nav-sublink::before { display: none; }
.portal-nav .portal-nav-sublink:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); }
.portal-nav .portal-nav-sublink[data-active] { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-weight: 500; }
.portal-nav .portal-nav-sublink[data-active]::after { position: absolute; top: 9px; bottom: 9px; left: -12.5px; width: 2px; border-radius: 2px; background: var(--ink); content: ""; }

/* Adres-component (zoeken, samenvatting, handmatig). */
.fss-address { display: grid; gap: var(--space-3); }
.fss-address-summary { display: grid; }
.fss-address-caption { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 12px; }
.fss-address-line { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 12px; border-radius: var(--radius-sm); background: var(--control-fill, var(--surface-2)); }
.fss-address-text { min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.fss-address-link { padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; font: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; }
.fss-address-link:hover { color: var(--ink); }
.fss-address-searchbox { display: grid; justify-items: start; gap: var(--space-2); }
.fss-address-suggest { position: relative; width: 100%; }
.fss-address-list { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; left: 0; display: grid; max-height: 280px; overflow-y: auto; padding: 4px; border-radius: var(--radius-md, 10px); background: var(--surface); box-shadow: var(--shadow-2); }
.fss-address-list button { min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.fss-address-list button[data-active] { background: var(--surface-2); }
.fss-address-empty { margin: 0; padding: 8px 10px; color: var(--ink-3); font-size: var(--text-sm); }
.fss-address-manual { display: grid; justify-items: start; gap: var(--space-3); }
.fss-address-row { display: grid; width: 100%; gap: var(--space-4); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.fss-address-row[data-cols="3"] { --cols: 3; }
.fss-address-row[data-cols="1"] { --cols: 1; }
.fss-address-row { align-items: start; }
.fss-address-row > label { margin: 0; }
@media (max-width: 760px) { .fss-address-row { grid-template-columns: minmax(0, 1fr); } }

/* Address field: grid labels must not inherit the stacked-form gap (that rule weighs 0,2,2 via :not([class])),
   and the summary line looks like a regular input so the field does not jump between modes. */
.fss-address .fss-address-row > label:not([class]) { margin: 0; }
.fss-address .fss-address-row { align-items: start; row-gap: var(--field-gap, var(--space-4)); }
.fss-address .fss-address-caption { margin-bottom: 6px; color: var(--ink); font-size: 12px; }
.fss-address .fss-address-line { min-height: var(--input-h, 44px); padding: 0 var(--space-3); border: 1px solid var(--line-field); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1); }
.fss-address .fss-address-link { flex: none; color: var(--ink-2); font-size: var(--text-sm); }

/* =====================================================================
   CARD CANON (admin + portal, one anatomy)
   Surface: white, --radius-md, --shadow-1, no border. Inset = --card-pad (density: admin compact 16, portal comfortable 20), also on mobile.
   Head: ONE row, min-height 56, padding 12px --card-pad, hairline divider underneath. Title left (16/600, no icon: title and content share the
   --card-pad line), badge/count/actions right. Body: --card-pad all round. Foot: .admin-card-foot (divider above, actions right).
   Canon markup = <x-fss::card>; .pv-card-head and cards that still carry a bare heading as first child are normalised to it here.
   Not cards (left alone): KPI/stat tiles, dashboard tiles (.admin-today-*), CRM record zones/relationship/holding, billing ageing/months,
   hero/help blocks, banners, drawers, modals.
   ===================================================================== */
:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card):not(#_):not(:is(.admin-card, .pv-card, .admin-wide-card, .admin-workspace-panel, .admin-passkey-card) *) {
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.admin-card:not([data-structured]):not(.pv-card):not(.admin-today-money, .admin-today-mrr, .admin-today-worklist, .admin-today-board, .admin-today-revenue, .crm-record-zone, .crm-relationship, .crm-holding, .billing-ageing, .billing-months),
.admin-wide-card:not([data-structured]):not(.pv-card):not(.admin-card),
.admin-workspace-panel:not([data-structured]),
.admin-passkey-card:not([data-structured]) {
    padding: var(--card-pad, var(--space-5));
}
.admin-card:not([data-structured]):not(.pv-card):not(.admin-today-money, .admin-today-mrr, .admin-today-worklist, .admin-today-board, .admin-today-revenue, .crm-record-zone, .crm-relationship, .crm-holding, .billing-ageing, .billing-months) > :is(.admin-card-heading, .admin-section-toolbar, .admin-card-head, h2, h3):first-child,
.admin-workspace-panel:not([data-structured]) > :is(.admin-card-heading, .admin-section-toolbar, .admin-card-head, h2, h3):first-child,
.admin-passkey-card:not([data-structured]) > :is(.admin-card-heading, .admin-section-toolbar, .admin-card-head, h2, h3):first-child {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-height: 56px;
    margin: calc(-1 * var(--card-pad, var(--space-5))) calc(-1 * var(--card-pad, var(--space-5))) var(--card-pad, var(--space-5));
    padding: var(--space-3) var(--card-pad, var(--space-5));
    border-bottom: 1px solid var(--line);
}
.admin-card:not([data-structured]) > :is(h2, h3):first-child {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}
:is(.admin-card-head, .pv-card-head, .admin-section-toolbar, .admin-card-heading) :is(h2, h3) {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}
.pv-card-head {
    min-height: 56px;
    box-sizing: border-box;
}
/* no icon in a card head: the title starts on the content line */
.admin-card-head .admin-card-heading > svg:first-child,
.admin-card-head > svg:first-child,
.pv-card-head > svg:first-child,
.admin-section-toolbar > svg:first-child,
.admin-card > .admin-card-heading > svg:first-child,
.admin-card:not([data-structured]) > .admin-section-toolbar .admin-card-heading > svg:first-child {
    display: none;
}
/* Section title inside a card body or form (several sections in one card, no card head): same size as a card title, on the content line. */
.admin-card .admin-field-section > header > :is(h2, h3) {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}
/* Same head, when the card is one form and the heading is the form's first child. */
.admin-card:not([data-structured]):not(.pv-card):not(.admin-today-money, .admin-today-mrr, .admin-today-worklist, .admin-today-board, .admin-today-revenue, .crm-record-zone, .crm-relationship, .crm-holding, .billing-ageing, .billing-months) > form:first-child > :is(.admin-card-heading, .admin-section-toolbar, h2, h3):first-child,
.admin-workspace-panel:not([data-structured]) > form:first-child > :is(.admin-card-heading, .admin-section-toolbar, h2, h3):first-child {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-height: 56px;
    margin: calc(-1 * var(--card-pad, var(--space-5))) calc(-1 * var(--card-pad, var(--space-5))) var(--card-pad, var(--space-5));
    padding: var(--space-3) var(--card-pad, var(--space-5));
    border-bottom: 1px solid var(--line);
}
.admin-card:not([data-structured]) > form:first-child > :is(h2, h3):first-child {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}
.admin-card > form:first-child > .admin-card-heading > svg:first-child {
    display: none;
}
/* Same head, when the heading follows the hidden inputs (csrf, section) of a form that makes up the card. */
.admin-card:not([data-structured]):not(.pv-card):not(.admin-today-money, .admin-today-mrr, .admin-today-worklist, .admin-today-board, .admin-today-revenue, .crm-record-zone, .crm-relationship, .crm-holding, .billing-ageing, .billing-months) > form:first-child > :is(.admin-card-heading, .admin-section-toolbar, h2, h3):is(input[type="hidden"] + *, input[type="hidden"] + input[type="hidden"] + *),
.admin-workspace-panel:not([data-structured]) > form:first-child > :is(.admin-card-heading, .admin-section-toolbar, h2, h3):is(input[type="hidden"] + *, input[type="hidden"] + input[type="hidden"] + *) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-height: 56px;
    margin: calc(-1 * var(--card-pad, var(--space-5))) calc(-1 * var(--card-pad, var(--space-5))) var(--card-pad, var(--space-5));
    padding: var(--space-3) var(--card-pad, var(--space-5));
    border-bottom: 1px solid var(--line);
}
.admin-card:not([data-structured]) > form:first-child > :is(h2, h3):is(input[type="hidden"] + *, input[type="hidden"] + input[type="hidden"] + *) {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 24px;
}
.admin-card > form:first-child > .admin-card-heading:is(input[type="hidden"] + *, input[type="hidden"] + input[type="hidden"] + *) > svg:first-child {
    display: none;
}

/* SMS page cards (2026-10-21).
   Lists directly under a card head start flush: no extra top margin and no rounded group header under the divider. */
.admin-card[data-flush] > .admin-card-body > .pv-rows { margin-top: 0; }
.admin-card-head ~ .admin-card-body .pv-rows > .pv-row-group:first-child,
.pv-card-head ~ .pv-rows > .pv-row-group:first-child { border-radius: 0; }
.admin-card-head ~ .admin-card-body .pv-rows > .pv-row-group,
.pv-card-head ~ .pv-rows > .pv-row-group { background: var(--surface); }
/* A row without status or figure gives its space to the title instead of reserving two empty columns. */
.pv-row:has(> .pv-row-vis:empty):has(> .pv-row-fig:empty) { grid-template-columns: 32px minmax(0, 1fr) auto; }
.pv-row:has(> .pv-row-vis:empty):has(> .pv-row-fig:empty) > :is(.pv-row-vis, .pv-row-fig) { display: none; }

/* Scheduled messages: a calendar date chip, then what goes out and to whom, then a quiet cancel. */
.sms-sched { margin: 0; padding: 0; list-style: none; }
.sms-sched-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: 14px var(--card-pad); border-top: 1px solid var(--line); }
.sms-sched-item:first-child { border-top: 0; }
.sms-sched-date { display: grid; width: 48px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.sms-sched-month { padding: 3px 0 2px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: var(--font-semibold); line-height: 14px; }
.sms-sched-day { padding: 3px 0 5px; color: var(--ink); font-size: 18px; font-weight: var(--font-semibold); line-height: 22px; }
.sms-sched-main { display: grid; min-width: 0; gap: 2px; }
.sms-sched-meta { display: flex; gap: 6px; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.sms-sched-meta > span + span::before { content: "·"; margin-right: 6px; }
.sms-sched-title { overflow: hidden; color: var(--ink); font-size: 14.5px; font-weight: var(--font-medium); line-height: 20px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.sms-sched-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.sms-sched-sub { overflow: hidden; color: var(--ink-2); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.sms-sched-cancel { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 13px; }
.sms-sched-cancel:hover { background: color-mix(in srgb, var(--danger, #c0392b) 8%, transparent); color: var(--danger-ink, var(--danger, #b42318)); }
.sms-sched-cancel:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }
.sms-sched-cancel:disabled { cursor: default; opacity: .5; }
@media (max-width: 520px) { .sms-sched-cancel span { display: none; } }

/* SMS terms: the points on screen, a consent row that reads as one clickable choice, version beside the action. */
.portal-sms-terms .sms-terms-intro { margin: 0 0 var(--space-4); color: var(--ink-2); }
.sms-terms-points { display: grid; gap: 10px; margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.sms-terms-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--ink); font-size: 14px; line-height: 20px; }
.sms-terms-points svg { width: 20px; height: 20px; padding: 3px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.portal-sms-terms label.sms-terms-consent { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); cursor: pointer; font-size: 14px; line-height: 20px; transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.portal-sms-terms label.sms-terms-consent:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--line)); }
.portal-sms-terms label.sms-terms-consent[data-checked] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.portal-sms-terms label.sms-terms-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.sms-terms-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.sms-terms-version { color: var(--ink-3); font-size: 12.5px; }

/* Search and filters belong inside their card, laid out like the DataTable controls: search first, filters next to it. */
:is(.pv-card, .admin-card-body, .pv-card > .pv-scope) > .pv-toolbar { justify-content: flex-start; padding: 16px var(--card-pad) 12px; }
:is(.pv-card, .admin-card-body, .pv-card > .pv-scope) > .pv-toolbar > span:empty { display: none; }
:is(.pv-card, .admin-card-body, .pv-card > .pv-scope) > .pv-toolbar > .pv-search { order: -1; width: 360px; border-color: transparent; background: var(--surface-2); }
:is(.pv-card, .admin-card-body, .pv-card > .pv-scope) > .pv-toolbar > .pv-search:focus-within { background: var(--surface); }
:is(.pv-card, .admin-card-body, .pv-card > .pv-scope) > .pv-toolbar { border-bottom: 1px solid var(--line); }
:is(.pv-card, .admin-card-body, .pv-card > .pv-scope) > .pv-toolbar ~ .pv-rows { margin-top: 0; }
@media (max-width: 640px) { :is(.pv-card, .admin-card-body, .pv-card > .pv-scope) > .pv-toolbar > .pv-search { width: 100%; } }

/* A one-line banner (no title) centres its text, icon and action on one line instead of top-aligning the text. */
.admin-banner:not(:has(.admin-banner-title)) { align-items: center; }
.pv-card > .pv-scope { display: contents; }

/* A closed submenu takes no space: its inner margins only apply when the group is open (Websites/Telefonie stood 8px further apart). */
.portal-nav .portal-nav-row:not([data-open]) .portal-nav-sub-inner { margin-top: 0; margin-bottom: 0; }

/* Billing card (2026-10-21): built on the DataTable card (toolbar, chips, count, then table) with invoice specifics. */
.portal-billing-card .pv-bill-table th[data-align="right"] { text-align: right; }
.portal-billing-card .pv-bill-table th:first-child, .portal-billing-card .pv-bill-table td:first-child { width: 128px; }
.portal-billing-card .pv-bill-table th:nth-child(3), .portal-billing-card .pv-bill-table td:nth-child(3) { width: 240px; }
.portal-billing-card .pv-bill-table th:nth-child(4), .portal-billing-card .pv-bill-table td:nth-child(4) { width: 120px; }
.portal-billing-card .pv-bill-table th:last-child, .portal-billing-card .pv-bill-table td:last-child { width: 156px; }
.portal-billing-card .pv-bill-row[data-linked] { cursor: pointer; }
.portal-billing-card .pv-bill-number { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.portal-billing-card .pv-bill-title { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: var(--font-medium); text-align: left; cursor: pointer; }
.portal-billing-card .pv-bill-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.portal-billing-card .pv-bill-amount { display: grid; justify-items: end; line-height: 1.25; white-space: nowrap; }
.portal-billing-card .pv-bill-amount b { font-weight: var(--font-semibold); }
.portal-billing-card .pv-bill-amount small { color: var(--ink-3); font-size: 12px; }
.portal-billing-card .pv-bill-row[data-state="paid"] .pv-bill-amount b,
.portal-billing-card .pv-bill-row[data-expected] .pv-bill-amount b,
.portal-billing-card .pv-bill-card[data-state="paid"] .pv-bill-amount b,
.portal-billing-card .pv-bill-card[data-expected] .pv-bill-amount b { color: var(--ink-2); font-weight: var(--font-medium); }
.portal-billing-card .pv-bill-row[data-expected] strong { color: var(--ink-2); }
.portal-billing-card .pv-bill-row .pv-row-acts { align-items: center; gap: 6px; justify-content: flex-end; }
.portal-billing-card .pv-inv-vis { display: flex; align-items: center; gap: 10px; }
.portal-billing-card .pv-inv-when { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.portal-billing-card .pv-inv-when[data-tone="danger"] { color: var(--danger); }
.portal-billing-card .pv-bill-group :is(th, b) { font-weight: var(--font-semibold); }
.portal-billing-card .pv-bill-group > th { padding: 9px 12px 9px 20px; }
.portal-billing-card .pv-bill-group > th > :is(b, span) { display: inline-block; }
.portal-billing-card .pv-bill-group > th > span { float: right; color: var(--ink-3); font-weight: var(--font-regular, 400); }
.portal-billing-card li.pv-bill-group { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0 6px; color: var(--ink-3); font-size: 12.5px; }
.portal-billing-card li.pv-bill-group > b { color: var(--ink-2); }
.portal-billing-card .pv-est-date { display: inline-block; padding: 2px 8px; border: 1px dashed color-mix(in srgb, var(--ink-3) 50%, transparent); border-radius: 6px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.portal-billing-card .pv-bill-card-foot { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.portal-billing-card .pv-bill-card .fss-card-title { overflow: visible; white-space: normal; }

/* Contact drawer (redesign): identity header, calm sections, chips for lists, actions pinned by the drawer rule in fss-core. */
.portal-contacts-form { gap: var(--space-6); }
.portal-contacts-form .portal-contacts-form-body { display: contents; }
.portal-contacts-form .pcd-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.portal-contacts-form .pcd-avatar { display: grid; flex: none; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: var(--text-sm); font-weight: var(--font-semibold); letter-spacing: 0.02em; }
.portal-contacts-form .pcd-who { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.portal-contacts-form .pcd-who strong { overflow: hidden; color: var(--ink); font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.portal-contacts-form .pcd-who span { overflow: hidden; color: var(--ink-3); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.portal-contacts-form .pcd-mail { flex: none; }
.portal-contacts-form .pcd-calls { margin: calc(var(--space-2) * -1) 0 0; border: 1px solid var(--line); border-radius: var(--radius-md); }
.portal-contacts-form .pcd-calls li { padding: var(--space-2) var(--space-3); }
.portal-contacts-form .pcd-calls li + li { border-top: 1px solid var(--line); }
.portal-contacts-form .pcd-section { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-contacts-form .pcd-section > h3 { margin: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 20px; }
.portal-contacts-form .pcd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.portal-contacts-form .pcd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.portal-contacts-form .pcd-field > span { color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--font-medium); line-height: 16px; }
.portal-contacts-form .pcd-field > small, .portal-contacts-form .pcd-hint { display: block; margin: 0; color: var(--ink-3); font-size: var(--text-xs); line-height: 16px; }
.portal-contacts-form .pcd-phones { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-contacts-form .pcd-phones > legend { float: none; width: auto; margin: 0 0 var(--space-1); padding: 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--font-medium); line-height: 16px; }
.portal-contacts-form .portal-contacts-phone { display: grid; grid-template-columns: minmax(0, 1fr) 112px auto 32px; align-items: center; gap: var(--space-2); }
.portal-contacts-form .portal-contacts-phone .portal-contacts-primary { gap: 6px; color: var(--ink-2); font-size: var(--text-xs); white-space: nowrap; }
.portal-contacts-form .pcd-add { align-self: flex-start; }
.portal-contacts-form .pcd-lists { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-contacts-form .pcd-lists > legend { float: none; width: auto; margin: 0 0 var(--space-2); padding: 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--font-medium); line-height: 16px; }
.portal-contacts-form .pcd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.portal-contacts-form .pcd-chip { position: relative; display: inline-flex; cursor: pointer; }
.portal-contacts-form .pcd-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.portal-contacts-form .pcd-chip span { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--text-sm); line-height: 20px; transition: background var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease; }
.portal-contacts-form .pcd-chip:hover span { border-color: var(--ink-3); }
.portal-contacts-form .pcd-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.portal-contacts-form .pcd-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.portal-contacts-form .pcd-extra { display: grid; gap: var(--space-6); margin: 0; padding: 0; border: 0; }
.portal-contacts-form .pcd-unknown { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.portal-contacts-form .pcd-actions { justify-content: flex-end; }
.portal-contacts-form .pcd-delete { margin-right: auto; color: var(--danger); }
.portal-contacts-form .pcd-delete:hover:not(:disabled) { background: var(--danger-soft, var(--surface-2)); }
@media (max-width: 640px) {
    .portal-contacts-form .pcd-grid { grid-template-columns: minmax(0, 1fr); }
    .portal-contacts-form .portal-contacts-phone { grid-template-columns: minmax(0, 1fr) auto 32px; }
    .portal-contacts-form .portal-contacts-phone > input { grid-column: 1 / -1; }
    .portal-contacts-form .portal-contacts-phone > select { grid-column: 1; }
}

/* Content: the section chips sit under the group tabs with the same spacing as the admin pages (tabs, 16px, chips). */
.portal-content-subnav .portal-content-subnav-sub { margin-top: 12px; }
.portal-contacts-form .portal-contacts-consent-list { display: grid; margin: 0; padding: 0; list-style: none; }
.portal-contacts-form .portal-contacts-consent-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.portal-contacts-form .portal-contacts-consent-list li:first-child { border-top: 0; }
.portal-contacts-form .portal-contacts-consent-list li > span:last-child { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.portal-contacts-form .portal-contacts-touchpoints-list { gap: var(--space-2); }
.portal-contacts-form .portal-privacy { margin: 0; padding: 0; border: 0; }
@media (max-width: 640px) {
    .portal-contacts-form .pcd-actions { flex-wrap: nowrap; }
    .portal-contacts-form .pcd-delete-label { display: none; }
}
.portal-billing-card .fss-datatable[data-cards] .admin-datatable-toolbar > .admin-datatable-filter { display: flex; }
@media (max-width: 767px) { .portal-billing-card .admin-datatable-toolbar > .admin-datatable-filter { display: flex !important; flex: 1 1 100%; } }
.portal-billing-card .pv-bill-card .fss-card-subtitle { grid-row: 2; }

/* SMS terms: one rhythm inside the card (the generic card body adds 12px between children, which glued the list to the consent box). */
.admin-card.portal-sms-terms .admin-card-body { display: grid; gap: 16px; }
.admin-card.portal-sms-terms .admin-card-body > * { margin: 0; }
.admin-card.portal-sms-terms .admin-card-body > .sms-terms-points { margin-bottom: 4px; }
.admin-card.portal-sms-terms .sms-terms-points li { color: var(--ink-2); }
.admin-card.portal-sms-terms .admin-card-body > .sms-terms-foot { margin-top: 4px; }

/* Websites (plan `portal-websites-content`, phase 1): one page per website with the site header, task tabs, chips and the attention card. */
.pv-site-page .pv-site-header .admin-page-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.pv-site-head-fav { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-3); overflow: hidden; }
.pv-site-head-fav img { width: 20px; height: 20px; object-fit: contain; }
.pv-site-head-domain { min-width: 0; overflow: hidden; color: var(--ink-3); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.pv-site-head-open { gap: 6px; }
.pv-site-nav { display: grid; gap: 12px; min-width: 0; }
.pv-site-nav > * { min-width: 0; }
.pv-site-third { margin-top: -4px; }
.pv-site-section-head { display: grid; gap: var(--space-1); }
.pv-site-section-head h2 { margin: 0; font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--ink); }
.pv-site-section-head p { margin: 0; color: var(--ink-3); font-size: var(--text-sm); }
.pv-site-grid { display: grid; gap: var(--space-4); align-items: start; min-width: 0; }
.pv-site-grid > * { min-width: 0; }
@media (min-width: 1024px) {
    .pv-site-grid:not([data-solo]) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .pv-site-grid[data-even]:not([data-solo]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pv-attention-row .pv-attention-count { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.pv-attention-row[data-tone="warning"] .pv-attention-count { background: var(--warning-bg, var(--surface-2)); color: var(--warning); }
.pv-attention-row[data-tone="danger"] .pv-attention-count { background: var(--danger-bg, var(--surface-2)); color: var(--danger); }
.pv-attention-row[data-tone="info"] .pv-attention-count { background: var(--info-bg, var(--surface-2)); color: var(--info); }
.pv-attention-card .pv-attention-calm { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); }
.pv-attention-card .pv-attention-calm svg { color: var(--success); }
.pv-attention-card .pv-attention-calm p { margin: 0; }
.pv-attention-slot { display: inline-flex; min-width: 0; }
.pv-attention-pill { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink-2); font-size: var(--text-caption); font-weight: var(--font-medium); line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.pv-attention-pill[data-tone="warning"] { background: var(--warning-bg, var(--surface-2)); color: var(--warning); }
.pv-attention-pill[data-tone="danger"] { background: var(--danger-bg, var(--surface-2)); color: var(--danger); }
.pv-attention-pill[data-tone="info"] { background: var(--info-bg, var(--surface-2)); color: var(--info); }
.pv-attention-more { color: inherit; opacity: .75; }
@media (max-width: 640px) {
    .pv-site-head-open-label { display: none; }
    .pv-site-head-domain { flex-basis: 100%; }
    .pv-site-page .pv-card-head { flex-wrap: wrap; }
    .pv-site-page .pv-card-head .pv-card-aside { max-width: 100%; margin-left: 0; }
    .pv-site-page .pv-card-head .pv-card-actions { flex-wrap: wrap; }
    .pv-site-page .portal-content-media-bar .portal-content-search { flex-wrap: wrap; min-width: 0; }
}