:root {
    color-scheme: light;
    --page: #f6f7fb;
    --ink: #1f282a;
    --muted: #657071;
    --line: #d8deea;
    --surface: #ffffff;
    --surface-alt: #eef3ff;
    --brand-blue: #064ee4;
    --brand-blue-dark: #0034a5;
    --brand-orange: #ff9312;
    --green: var(--brand-blue);
    --green-dark: var(--brand-blue-dark);
    --copper: var(--brand-orange);
    --blue: var(--brand-blue);
    --yellow: #ffb14a;
    --danger: #9f3d36;
    --shadow: 0 16px 38px rgba(5, 28, 87, 0.08);
    --page-gutter: clamp(24px, 2.5vw, 40px);
    --font-body: Roboto, Arial, sans-serif;
    --font-heading: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-body: 17px;
    --text-body-mobile: 17px;
    --weight-body: 400;
    --line-body: inherit;
    --weight-heading: 600;
    --line-heading: 1.2;
    --text-h1: 48px;
    --text-h1-tablet: 40px;
    --text-h1-mobile: 32px;
    --line-h1: 1.2;
    --text-h2: 38px;
    --text-h2-tablet: 32px;
    --text-h2-mobile: 25px;
    --line-h2: 1.2;
    --text-h3: 30px;
    --text-h3-tablet: 26px;
    --text-h3-mobile: 22px;
    --line-h3: 1.4;
    --text-h4: 24px;
    --text-h4-tablet: 20px;
    --text-h4-mobile: 18px;
    --line-h4: 1.2;
    --text-h5: 20px;
    --text-h5-tablet: 17px;
    --text-h5-mobile: 15px;
    --line-h5: 1.2;
    --text-h6: 17px;
    --text-h6-tablet: 15px;
    --text-h6-mobile: 13px;
    --line-h6: 1.2;
    --text-nav: 15px;
    --weight-nav: 720;
    --text-button: 15px;
    --weight-button: 720;
    --text-listing-title: 30px;
    --text-listing-title-tablet: 26px;
    --text-listing-title-mobile: 22px;
    --weight-listing-title: 600;
    --text-meta: 15px;
    --text-filter: 15px;
    --tracking-body: 0em;
    --share-gap: 10px;
    font-family: var(--font-body);
}

/* Capability-based organization and board-operation surfaces. */
.organization-setup-panel {
    max-width: 820px;
}

.organization-setup-panel .registration-heading {
    max-width: 620px;
}

.organization-mode-options {
    display: grid;
    gap: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.organization-mode-options legend {
    width: 100%;
    padding: 0 0 12px;
    border: 0;
    font-weight: 600;
}

.organization-mode-option {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.organization-mode-option:last-child {
    border-bottom: 0;
}

.organization-mode-option:has(input:checked) {
    background: #f4f8f7;
    box-shadow: inset 3px 0 0 var(--rom-search-bg, #176b5b);
}

.organization-mode-option input {
    margin-top: 4px;
}

.organization-mode-option span,
.operator-application-heading,
.settings-link-row span {
    display: grid;
    gap: 3px;
}

.organization-mode-option small,
.operator-application-heading span,
.settings-link-row small,
.minimal-plan-row span {
    color: var(--muted);
    font-weight: 400;
}

.operator-application-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.operator-application-heading,
.operator-application-fields .field:nth-last-child(-n+3) {
    grid-column: 1 / -1;
}

.capability-status-line,
.organization-overview-status,
.minimal-plan-row,
.operator-request-row,
.organization-application-row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.capability-status-line > div,
.organization-application-summary,
.operator-request-row > div {
    display: grid;
    gap: 3px;
}

.capability-status-line small {
    max-width: 520px;
    color: var(--muted);
    text-align: right;
}

.organization-team-invite,
.partner-organization-form,
.board-domain-add-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) auto;
    gap: 12px;
    align-items: end;
}

.partner-organization-form {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(160px, .7fr) auto;
}

.organization-application-review,
.operator-review-form {
    display: grid;
    grid-template-columns: minmax(130px, auto) minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.operator-request-row {
    align-items: end;
}

.operator-request-row p,
.organization-application-summary p {
    margin: 4px 0 0;
    color: var(--muted);
}

.settings-link-list {
    padding-block: 0;
}

.settings-link-row {
    display: grid;
    grid-template-columns: 22px 1fr 18px;
    gap: 14px;
    align-items: center;
    min-height: 68px;
    padding: 10px 2px;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}

.settings-link-row:hover {
    color: var(--rom-search-bg, #176b5b);
}

.minimal-plan-list {
    display: grid;
}

.minimal-plan-row.current {
    color: var(--rom-search-bg, #176b5b);
}

.application-form-shell {
    width: min(760px, calc(100% - 32px));
    margin: 32px auto 60px;
}

.application-form-shell header {
    margin: 22px 0;
}

@media (max-width: 840px) {
    .organization-team-invite,
    .partner-organization-form,
    .board-domain-add-form,
    .organization-application-review,
    .operator-review-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .organization-team-invite .button,
    .partner-organization-form .button,
    .board-domain-add-form .button,
    .organization-application-review .mini-button,
    .operator-review-form .button {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .operator-application-fields,
    .organization-team-invite,
    .partner-organization-form,
    .board-domain-add-form,
    .organization-application-review,
    .operator-review-form {
        grid-template-columns: 1fr;
    }

    .capability-status-line,
    .minimal-plan-row,
    .operator-request-row,
    .organization-application-row {
        align-items: stretch;
        flex-direction: column;
    }

    .capability-status-line small {
        text-align: left;
    }
}

/* Shared account and workspace portal architecture. */
.portal-app-shell {
    padding-top: 0;
}

.portal-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    width: 100%;
    min-height: calc(100vh - 112px);
}

.portal-sidebar {
    position: sticky;
    top: 56px;
    align-self: start;
    height: calc(100vh - 56px);
    padding: 22px 16px 32px 0;
    border-right: 1px solid var(--line);
    background: transparent;
    overflow-y: auto;
}

.portal-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 18px;
}

.portal-context-label {
    display: grid;
    min-width: 0;
    padding: 7px 8px;
    gap: 2px;
    color: var(--ink);
    font-family: var(--font-ui);
}

.portal-context-label strong,
.portal-context-label small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-context-label strong {
    font-size: 14px;
}

.portal-context-label small {
    color: var(--muted);
    font-size: 11px;
}

.portal-nav {
    display: grid;
    gap: 18px;
}

.portal-nav-group {
    display: grid;
    gap: 3px;
}

.portal-nav-label {
    padding: 0 9px 5px;
    color: #687477;
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
}

.portal-nav-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    min-height: 40px;
    padding: 8px 9px;
    align-items: center;
    gap: 9px;
    border-left: 2px solid transparent;
    border-radius: 0 5px 5px 0;
    color: #354245;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}

.portal-nav-item:hover,
.portal-nav-item:focus-visible,
.portal-nav-item.active {
    background: #edf3f1;
    color: var(--green-dark);
}

.portal-nav-item.active {
    border-left-color: var(--green-dark);
    font-weight: 780;
}

.portal-nav-item small {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #dce9e5;
    color: var(--green-dark);
    font-size: 11px;
    text-align: center;
}

.portal-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.portal-content {
    min-width: 0;
    padding: 26px 0 52px 32px;
}

.portal-content-header {
    display: flex;
    min-height: 42px;
    margin-bottom: 22px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}

.portal-content-header h1 {
    margin: 0;
    font-size: 28px;
}

.portal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal-mobile-toggle,
.portal-sidebar-close {
    display: none;
}

.portal-sidebar-backdrop {
    display: none;
}

.portal-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 26px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.portal-stat {
    min-width: 0;
    padding: 16px 18px;
    border-right: 1px solid var(--line);
}

.portal-stat:first-child {
    padding-left: 0;
}

.portal-stat:last-child {
    border-right: 0;
}

.portal-stat span,
.portal-stat small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.portal-stat strong {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 22px;
}

.portal-section {
    min-width: 0;
}

.portal-section + .portal-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.portal-section-heading {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.portal-section-heading h2 {
    margin: 0;
    font-size: 20px;
}

.portal-list {
    display: grid;
    border-top: 1px solid var(--line);
}

.portal-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 11px 0;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.portal-list-row > div,
.portal-list-row > a:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.portal-list-row strong,
.portal-list-row a {
    color: var(--ink);
}

.portal-list-row span,
.portal-list-row small {
    color: var(--muted);
    font-size: 13px;
}

.portal-list-row > a:first-child {
    text-decoration: none;
}

.portal-list-row > a:first-child:hover strong,
.portal-list-row > a:first-child:focus-visible strong {
    color: var(--green-dark);
    text-decoration: underline;
}

.portal-list-row-form {
    align-items: start;
}

.portal-inline-form {
    display: grid;
    grid-template-columns: minmax(120px, 0.65fr) minmax(140px, 0.8fr) minmax(180px, 1fr) auto;
    min-width: min(100%, 610px);
    align-items: center;
    gap: 7px;
}

.portal-inline-form select,
.portal-inline-form input {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
}

.portal-empty-state {
    width: min(520px, 100%);
    padding: 34px 0;
}

.portal-empty-state h2,
.portal-empty-state p {
    margin-top: 0;
}

.portal-empty-state p {
    color: var(--muted);
}

.portal-access-grid .check-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
}

.portal-overview-stats-secondary {
    margin-bottom: 0;
}

.portal-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line);
}

.portal-status-filters a {
    padding: 7px 0 9px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.portal-status-filters a.active {
    border-bottom-color: var(--green-dark);
    color: var(--green-dark);
}

.portal-form {
    width: min(720px, 100%);
}

.portal-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
}

.portal-empty {
    margin: 0;
    padding: 18px 0;
    color: var(--muted);
}

.account-signout {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.account-signout button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

@media (max-width: 1024px) {
    .portal-app-shell {
        padding-top: 14px;
    }

    .portal-shell {
        display: block;
        min-height: 0;
    }

    .portal-mobile-toggle {
        display: grid;
        grid-template-columns: 20px auto minmax(0, 1fr);
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: #fff;
        color: var(--ink);
        text-align: left;
    }

    .portal-mobile-toggle span {
        color: var(--muted);
        font-size: 12px;
    }

    .portal-mobile-toggle strong {
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .portal-sidebar {
        position: fixed;
        z-index: 130;
        top: 0;
        left: 0;
        width: min(320px, 100vw);
        height: 100dvh;
        padding: 18px 16px 32px;
        border-right: 1px solid var(--line);
        background: #fff;
        box-shadow: 12px 0 28px rgba(19, 31, 35, 0.18);
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    .portal-shell.is-sidebar-open .portal-sidebar {
        transform: translateX(0);
    }

    .portal-sidebar-close {
        display: inline-grid;
        width: 38px;
        height: 38px;
        padding: 0;
        place-items: center;
        border: 0;
        background: transparent;
        color: var(--ink);
    }

    .portal-sidebar-backdrop {
        position: fixed;
        z-index: 120;
        inset: 0;
        display: block;
        background: rgba(21, 29, 31, 0.34);
    }

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

    .portal-content {
        padding: 20px 0 44px;
    }

    .portal-content-header {
        min-height: 36px;
    }

    .portal-content-header h1 {
        font-size: 24px;
    }

    body.portal-sidebar-open {
        overflow: hidden;
    }

    .portal-inline-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 680px) {
    .portal-sidebar {
        width: 100vw;
        border-right: 0;
    }

    .portal-content-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .portal-header-actions,
    .portal-header-actions .button {
        width: 100%;
    }

    .portal-header-actions .button {
        justify-content: center;
    }

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

    .portal-stat:nth-child(2) {
        border-right: 0;
    }

    .portal-stat:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .portal-stat:nth-child(3) {
        padding-left: 0;
    }

    .portal-list-row {
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .portal-list-row > :last-child:not(div) {
        justify-self: start;
    }

    .portal-inline-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .portal-form-actions {
        position: static;
    }
}

/* Multi-tenant publishing controls */
.domain-manager-head,
.brand-studio-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.domain-manager-head p,
.brand-studio-head p {
    max-width: 720px;
}

.domain-add-band {
    align-items: end;
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(360px, 1.2fr);
    gap: 32px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.domain-add-form {
    align-items: end;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.domain-list {
    display: grid;
}

.domain-row {
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.domain-row > header,
.domain-actions,
.domain-statuses {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.domain-statuses,
.domain-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.dns-steps {
    display: grid;
    gap: 8px;
 width: min(900px, 100%);
    padding: 22px 0;
}

.dns-step {
    align-items: start;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding-top: 10px;
}

.dns-step > span {
    align-items: center;
    background: var(--green);
    border-radius: 50%;
    color: white;
    display: flex;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.dns-record {
    align-items: center;
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 36px;
    min-height: 44px;
    gap: 10px;
    padding: 7px 10px;
    background: var(--soft);
}

.dns-record code {
    overflow-wrap: anywhere;
}

.domain-notice,
.domain-check-message {
    background: #fff7df;
    border-left: 3px solid #c98617;
    padding: 12px 14px;
}

.locked-feature,
.domain-empty {
    display: grid;
    gap: 4px;
}

.brand-studio-layout {
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
    gap: 32px;
}

.brand-controls details {
    border-bottom: 1px solid var(--line);
    padding: 0;
}

.brand-controls summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    padding: 18px 0;
}

.brand-control-grid,
.brand-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 2px 0 24px;
}

.brand-color-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-asset-field {
    display: grid;
    gap: 8px;
    padding: 12px 0;
}

.brand-link-row {
    display: grid;
    grid-template-columns: minmax(100px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.brand-preview-panel {
    position: sticky;
    top: 72px;
}

.brand-preview-toolbar,
.brand-studio-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.brand-preview-toolbar {
    margin-bottom: 10px;
}

.brand-preview-toolbar button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 7px;
}

.brand-preview-toolbar button.is-active {
    border-bottom-color: var(--green);
}

.brand-preview {
    background: var(--rom-board-bg);
    border: 1px solid var(--line);
    color: var(--rom-text);
    margin-inline: auto;
    min-height: 480px;
    overflow: hidden;
    transition: width 180ms ease;
    width: 100%;
}

.brand-preview[data-device="tablet"] { width: 76%; }
.brand-preview[data-device="mobile"] { width: 48%; min-width: 280px; }

.brand-preview > header {
    align-items: center;
    background: var(--rom-surface);
    display: flex;
    justify-content: space-between;
    min-height: 52px;
    padding: 12px 16px;
}

.brand-preview main {
    padding: 24px;
}

.brand-preview-search {
    align-items: center;
    background: var(--rom-surface);
    border: 1px solid #d7dcda;
    display: flex;
    justify-content: space-between;
    margin: 18px 0;
    padding-left: 12px;
}

.brand-preview button {
    background: var(--rom-search-bg);
    border: 0;
    border-radius: var(--tenant-button-radius);
    color: var(--rom-search-text);
    padding: 10px 14px;
}

.brand-preview article {
    background: var(--rom-surface);
    border-radius: var(--tenant-card-radius);
    margin-top: 10px;
    padding: 16px;
}

.brand-reset-form {
    border-top: 1px solid var(--line);
    margin-top: 28px;
    padding-top: 20px;
}

.tenant-public-surface {
    background: var(--rom-board-bg);
    color: var(--rom-text);
}

.tenant-public-surface .opportunity-card,
.tenant-public-surface .related-card {
    border-radius: var(--tenant-card-radius);
}

.tenant-public-surface .button,
.tenant-public-surface button,
.tenant-public-surface input[type="submit"] {
    border-radius: var(--tenant-button-radius);
}

.powered-by {
    font-size: 12px;
    opacity: 0.7;
}

@media (max-width: 900px) {
    .brand-studio-layout,
    .domain-add-band {
        grid-template-columns: 1fr;
    }

    .brand-preview-panel {
        position: static;
    }
}

@media (max-width: 640px) {
    .domain-manager-head,
    .brand-studio-head,
    .domain-row > header {
        align-items: stretch;
        flex-direction: column;
    }

    .domain-add-form,
    .brand-control-grid,
    .brand-color-grid,
    .brand-link-row {
        grid-template-columns: 1fr;
    }

    .dns-record {
        grid-template-columns: 1fr 36px;
    }

    .dns-record > span {
        grid-column: 1 / -1;
    }
}

/* No-code scoped board builder */
.scope-manager-shell,
.scope-builder-shell {
    width: 100%;
    padding: 28px var(--page-gutter) 56px;
}

[data-scope-builder] [hidden] {
    display: none !important;
}

.scope-manager-header,
.scope-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.scope-manager-header h1,
.scope-builder-header h1 {
    margin: 2px 0 6px;
}

.scope-manager-header p,
.scope-builder-header p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}

.back-link {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--brand-blue-dark);
    font-weight: 700;
    text-decoration: none;
}

.scope-manager-tools {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 190px auto;
    gap: 10px;
    align-items: end;
    padding: 14px 0;
    border-block: 1px solid var(--line);
}

.scope-manager-list {
    margin-top: 8px;
}

.scope-manager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 104px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.scope-manager-main {
    min-width: 0;
}

.scope-manager-title-row,
.scope-manager-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scope-manager-title-row h2 {
    margin: 0;
    font-size: 19px;
}

.scope-manager-title-row a {
    color: var(--brand-blue-dark);
    text-decoration: none;
}

.scope-manager-main p {
    margin: 5px 0 2px;
    color: var(--muted);
}

.scope-manager-main small {
    color: var(--muted);
}

.scope-manager-actions form {
    margin: 0;
}

.scope-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.scope-status.is-published {
    border-color: #97c9b6;
    background: #eef9f4;
    color: #17634b;
}

.scope-status.is-empty {
    border-color: #e7bd76;
    background: #fff8e8;
    color: #7a5012;
}

.icon-command {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--brand-blue-dark);
    font-size: 18px;
    text-decoration: none;
}

.scope-empty-state {
    margin-top: 30px;
    padding: 46px 20px;
    text-align: center;
}

.scope-empty-state h2 {
    margin: 0 0 6px;
}

.scope-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 22px;
    border-block: 1px solid var(--line);
}

.scope-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
}

.scope-stepper button span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
}

.scope-stepper button.is-active {
    border-bottom-color: var(--brand-orange);
    color: var(--brand-blue-dark);
}

.scope-stepper button.is-complete span {
    border-color: #2e8066;
    background: #2e8066;
    color: #fff;
}

.scope-builder-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    gap: 24px;
    align-items: start;
}

.scope-builder-editor,
.scope-live-preview {
    min-width: 0;
}

.scope-builder-step {
    min-height: 560px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.scope-builder-step[hidden] {
    display: none;
}

.scope-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
}

.scope-step-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 800;
}

.scope-step-heading h2 {
    margin: 0 0 4px;
}

.scope-step-heading p {
    margin: 0;
    color: var(--muted);
}

.scope-template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.scope-template-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 84px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    text-align: left;
}

.scope-template-card span {
    color: var(--muted);
    font-size: 13px;
}

.scope-template-card:hover,
.scope-template-card.is-selected {
    border-color: var(--brand-blue);
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.scope-two-column,
.scope-criteria-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.scope-segmented {
    display: flex;
    align-items: end;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.scope-segmented legend {
    width: 100%;
    margin-bottom: 7px;
    font-weight: 700;
}

.scope-segmented label {
    flex: 1;
}

.scope-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.scope-segmented span {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 700;
}

.scope-segmented label:first-of-type span {
    border-radius: 6px 0 0 6px;
}

.scope-segmented label:last-of-type span {
    border-left: 0;
    border-radius: 0 6px 6px 0;
}

.scope-segmented input:checked + span {
    border-color: var(--brand-blue);
    background: #eef3ff;
    color: var(--brand-blue-dark);
}

.scope-choice {
    min-width: 0;
}

.scope-field-label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}

.scope-choice-menu {
    position: relative;
}

.scope-choice-menu summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    list-style: none;
}

.scope-choice-menu summary::-webkit-details-marker {
    display: none;
}

.scope-choice-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
}

.scope-choice-popover {
    position: absolute;
    z-index: 8;
    top: calc(100% + 5px);
    width: 100%;
    min-width: 240px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--shadow);
}

.scope-choice-search {
    width: 100%;
    min-height: 38px;
    margin-bottom: 8px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
}

.scope-choice-options {
    max-height: 220px;
    overflow: auto;
}

.scope-choice-options label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 5px;
}

.scope-choice-options input,
.scope-manual-filters input,
.scope-toggle-row input,
.scope-check input {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.scope-choice-options label:hover {
    background: #f3f6fc;
}

.scope-choice-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    min-height: 6px;
    margin-top: 6px;
}

.scope-choice-chip {
    padding: 3px 7px;
    border: 1px solid #b8c8e8;
    border-radius: 999px;
    background: #f4f7ff;
    color: var(--brand-blue-dark);
    font-size: 12px;
}

.scope-range-band {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border-block: 1px solid var(--line);
    background: #f8fafc;
}

.scope-range-band + .scope-range-band {
    margin-top: 0;
    border-top: 0;
}

.field.is-disabled {
    opacity: .5;
}

.scope-board-criteria {
    margin-top: 22px;
}

.scope-board-field-group h3 {
    margin: 0 0 14px;
}

.scope-visibility-options,
.scope-publish-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.scope-visibility-options > label,
.scope-publish-options > label {
    position: relative;
}

.scope-visibility-options input,
.scope-publish-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.scope-visibility-options label > span,
.scope-publish-options label > span {
    display: flex;
    flex-direction: column;
    min-height: 88px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
}

.scope-visibility-options small,
.scope-publish-options small {
    margin-top: 4px;
    color: var(--muted);
}

.scope-visibility-options input:checked + span,
.scope-publish-options input:checked + span {
    border-color: var(--brand-blue);
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.scope-manual-filters {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f8fafc;
}

.scope-manual-filters > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.scope-manual-filters label,
.scope-toggle-row label,
.scope-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scope-toggle-row {
    display: flex;
    gap: 24px;
    margin: 20px 0;
}

.scope-seo-fields {
    display: grid;
    gap: 13px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.scope-seo-fields h3 {
    margin: 0;
}

.scope-slug-control {
    display: flex;
    align-items: center;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.scope-slug-control span {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #f3f5f9;
    color: var(--muted);
    font-size: 13px;
}

.scope-slug-control input {
    flex: 1;
    min-width: 100px;
    border: 0;
    box-shadow: none;
}

.scope-publish-options {
    margin-top: 18px;
}

.scope-publish-options legend {
    margin-bottom: 8px;
    font-weight: 700;
}

.scope-final-summary {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
    padding: 14px;
    border-left: 3px solid var(--brand-orange);
    background: #f5f7fc;
}

.scope-builder-navigation {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.scope-builder-navigation [data-scope-next],
.scope-builder-navigation [data-scope-save] {
    margin-left: auto;
}

.scope-live-preview {
    position: sticky;
    top: 78px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #edf1f7;
}

.scope-preview-heading,
.scope-preview-heading > div,
.scope-preview-devices {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.scope-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2e8066;
}

.scope-preview-devices button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
}

.scope-preview-devices button.is-active {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.scope-preview-count {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 14px;
}

.scope-preview-count strong {
    color: var(--brand-blue-dark);
    font-size: 25px;
}

.scope-preview-count span {
    color: var(--muted);
}

.scope-preview-summary,
.scope-preview-warnings {
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}

.scope-preview-warnings {
    border-left: 3px solid var(--brand-orange);
    background: #fff8e8;
}

.scope-preview-warnings p {
    margin: 0 0 5px;
}

.scope-preview-frame {
    width: 100%;
    max-height: 600px;
    margin: 12px auto 0;
    overflow: auto;
    padding: 10px;
    border: 1px solid #cbd4e3;
    border-radius: 6px;
    background: #fff;
    transition: width .2s ease;
}

.scope-preview-frame[data-preview-size-active="tablet"] {
    width: min(82%, 700px);
}

.scope-preview-frame[data-preview-size-active="mobile"] {
    width: min(58%, 390px);
}

.scope-preview-frame .opportunity-list {
    grid-template-columns: 1fr !important;
}

.scope-preview-frame .opportunity-card {
    min-width: 0;
}

.scope-public-layout--no-filters {
    grid-template-columns: 1fr;
}

.scope-public-layout--no-filters .marketplace-search-row,
.scope-public-layout--no-filters .marketplace-results {
    grid-column: 1;
}

.scope-public-heading h1 {
    text-align: center;
}

@media (max-width: 1120px) {
    .scope-builder-workspace {
        grid-template-columns: 1fr;
    }

    .scope-live-preview {
        position: static;
    }

    .scope-builder-step {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .scope-manager-shell,
    .scope-builder-shell {
        padding-top: 18px;
    }

    .scope-manager-header,
    .scope-builder-header,
    .scope-manager-row {
        align-items: stretch;
        flex-direction: column;
    }

    .scope-manager-tools {
        grid-template-columns: 1fr;
    }

    .scope-stepper {
        grid-template-columns: repeat(5, 42px);
        justify-content: space-between;
        overflow-x: auto;
    }

    .scope-stepper button {
        min-width: 42px;
        font-size: 0;
    }

    .scope-stepper button span {
        font-size: 12px;
    }

    .scope-builder-step {
        padding: 17px;
    }

    .scope-template-grid,
    .scope-two-column,
    .scope-criteria-grid,
    .scope-visibility-options,
    .scope-publish-options {
        grid-template-columns: 1fr;
    }

    .scope-range-band {
        grid-template-columns: 1fr;
    }

    .scope-manual-filters > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scope-slug-control {
        align-items: stretch;
        flex-direction: column;
    }

    .scope-slug-control span {
        min-height: 34px;
    }

    .scope-preview-frame[data-preview-size-active="tablet"],
    .scope-preview-frame[data-preview-size-active="mobile"] {
        width: 100%;
    }
}

* {
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-style: normal;
    font-weight: var(--weight-body);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-body);
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: var(--font-ui);
    font-size: var(--text-button);
    letter-spacing: 0;
}

button {
    cursor: pointer;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 56px;
    width: 100%;
    padding: 6px var(--page-gutter);
    border-bottom: 1px solid rgba(6, 78, 228, 0.14);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 235px;
    color: var(--ink);
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: clamp(168px, 20vw, 235px);
    max-height: 40px;
    object-fit: contain;
}

.brand-context {
    display: block;
    max-width: 150px;
    overflow: hidden;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 147, 18, 0.44);
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.mobile-menu-toggle {
    display: none;
}

.header-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.mobile-account-action,
.mobile-register-action {
    display: none;
}

.topnav a,
.topnav-menu summary {
    padding: 6px 9px;
    border-radius: 8px;
    border: 0;
    color: #334042;
    font-family: var(--font-ui);
    font-size: var(--text-nav);
    font-weight: var(--weight-nav);
    text-decoration: none;
}

.topnav a:hover,
.topnav a.active,
.topnav-menu summary:hover,
.topnav-menu summary.active,
.topnav-menu[open] summary,
.topbar-form button:hover {
    background: rgba(6, 78, 228, 0.08);
    color: var(--brand-blue-dark);
}

.topnav .nav-cta {
    border: 1px solid rgba(255, 147, 18, 0.42);
    background: var(--brand-orange);
    color: #050505;
    font-weight: 780;
}

.topnav-menu {
    position: relative;
}

.topnav-menu summary {
    list-style: none;
    cursor: pointer;
}

.topnav-menu summary::-webkit-details-marker {
    display: none;
}

.topnav-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.topnav-menu:not([open]) .topnav-menu-panel {
    display: none;
}

.topnav-menu-panel a {
    color: var(--ink);
    white-space: nowrap;
}

.topbar-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.topbar-form select {
    min-height: 32px;
    max-width: 210px;
    font-size: 13px;
}

.topbar-form button {
    min-height: 32px;
    padding: 6px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #334042;
    font-family: var(--font-ui);
    font-size: var(--text-nav);
    font-weight: var(--weight-nav);
}

.user-avatar {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #e8efff;
    color: var(--brand-blue-dark);
    font-family: var(--font-ui);
    font-weight: 800;
    line-height: 1;
}

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

.user-avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.user-avatar-md {
    width: 42px;
    height: 42px;
    font-size: 14px;
}

.user-avatar-xl {
    width: 88px;
    height: 88px;
    font-size: 25px;
}

.header-account-menu > summary.account-avatar-toggle {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: transparent;
}

.header-account-menu[open] .account-avatar-toggle,
.account-avatar-toggle:hover,
.account-avatar-toggle:focus-visible {
    border-color: var(--brand-blue);
    background: rgba(6, 78, 228, 0.06);
}

.account-avatar-toggle:focus-visible {
    outline: 3px solid rgba(6, 78, 228, 0.2);
    outline-offset: 2px;
}

.header-notification-menu > summary.notification-toggle {
    position: relative;
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #334042;
}

.header-notification-menu[open] .notification-toggle,
.notification-toggle:hover,
.notification-toggle:focus-visible {
    border-radius: 50%;
    background: rgba(6, 78, 228, 0.08);
    color: var(--brand-blue-dark);
}

.notification-toggle:focus-visible {
    outline: 3px solid rgba(6, 78, 228, 0.2);
    outline-offset: 2px;
}

.notification-toggle .portal-icon {
    width: 19px;
    height: 19px;
}

.notification-badge {
    position: absolute;
    top: -1px;
    right: -2px;
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
    border-radius: 9px;
    background: var(--brand-orange);
    color: #111111;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
}

.notification-menu-panel {
    width: 340px;
    padding: 0;
    overflow: hidden;
}

.notification-menu-header,
.notifications-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-menu-header {
    min-height: 48px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.notification-menu-header form {
    margin: 0;
}

.notification-menu-header button {
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--brand-blue-dark);
    font-size: 12px;
    font-weight: 750;
}

.notification-menu-list,
.notifications-list {
    display: grid;
}

.notification-row,
.notification-page-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 8px;
    gap: 10px;
    align-items: start;
    color: var(--ink);
    text-decoration: none;
    white-space: normal;
}

.notification-row {
    min-height: 72px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(31, 40, 42, 0.08);
}

.notification-row:hover,
.notification-page-row:hover,
.notification-row.is-unread,
.notification-page-row.is-unread {
    background: rgba(6, 78, 228, 0.055);
}

.notification-row-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #edf2ff;
    color: var(--brand-blue-dark);
}

.notification-row-icon .portal-icon {
    width: 17px;
    height: 17px;
}

.notification-row-copy,
.notification-row-copy strong,
.notification-row-copy span,
.notification-row-copy small {
    display: block;
    min-width: 0;
}

.notification-row-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-row-copy span {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.notification-row-copy small {
    margin-top: 4px;
    color: #6b7476;
    font-size: 11px;
}

.notification-unread-dot {
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--brand-blue);
}

.notification-empty,
.notification-page-empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    text-align: center;
}

.notification-empty {
    min-height: 132px;
    gap: 8px;
    padding: 22px;
}

.notification-empty .portal-icon,
.notification-page-empty .portal-icon {
    width: 24px;
    height: 24px;
    color: #7a8587;
}

.notification-menu-footer {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue-dark);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.notifications-page {
    width: min(720px, 100%);
    margin: 0 auto;
}

.notifications-page-header {
    min-height: 70px;
    border-bottom: 1px solid var(--line);
}

.notifications-page-header h1 {
    margin: 0;
}

.notifications-page-header span {
    color: var(--muted);
    font-size: 12px;
}

.notification-page-row {
    min-height: 82px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--line);
}

.notification-page-empty {
    min-height: 260px;
    gap: 8px;
}

.notification-page-empty h2 {
    margin: 0;
    font-size: 18px;
}

.notification-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    font-size: 13px;
}

.account-menu-panel {
    width: 316px;
    max-height: min(720px, calc(100vh - 74px));
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.account-menu-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.account-menu-identity {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 8px;
    text-decoration: none;
}

.account-menu-close {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
}

.account-menu-close .portal-icon {
    width: 19px;
    height: 19px;
}

.account-menu-identity > span:last-child,
.account-menu-identity strong,
.account-menu-identity small {
    display: block;
    min-width: 0;
}

.account-menu-identity strong,
.account-menu-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-identity strong {
    color: var(--ink);
    font-size: 14px;
}

.account-menu-identity small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.account-context-block {
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.account-context-switcher > summary,
.account-context-current {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 16px;
    min-height: 48px;
    padding: 7px 8px;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.account-context-current {
    grid-template-columns: 20px minmax(0, 1fr);
    cursor: default;
}

.account-context-switcher > summary::-webkit-details-marker {
    display: none;
}

.account-context-switcher > summary:hover,
.account-context-switcher > summary:focus-visible {
    background: #edf3f1;
}

.account-context-switcher > summary > .portal-icon:last-child {
    width: 15px;
    height: 15px;
    transition: transform 160ms ease;
}

.account-context-switcher[open] > summary > .portal-icon:last-child {
    transform: rotate(180deg);
}

.account-context-switcher small,
.account-context-switcher strong,
.account-context-current small,
.account-context-current strong,
.account-context-option small,
.account-context-option strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-context-switcher small,
.account-context-current small,
.account-context-option small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.account-context-switcher strong,
.account-context-current strong,
.account-context-option strong {
    margin-top: 2px;
    color: var(--ink);
    font-size: 13px;
}

.account-context-options {
    display: grid;
    max-height: 260px;
    margin-top: 3px;
    padding: 3px 0;
    gap: 2px;
    overflow-y: auto;
}

.account-context-options form {
    margin: 0;
}

.account-context-option {
    display: grid;
    width: 100%;
    grid-template-columns: 20px minmax(0, 1fr) 16px;
    min-height: 48px;
    padding: 7px 8px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-ui);
    text-align: left;
}

.account-context-option:hover,
.account-context-option:focus-visible,
.account-context-option.active {
    background: #edf3f1;
}

.account-context-option.active > .portal-icon:last-child {
    width: 15px;
    height: 15px;
    color: var(--green-dark);
}

.account-menu-links {
    display: grid;
    padding: 5px 0;
}

.account-menu-links a,
.account-menu-disabled,
.account-menu-signout button {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
}

.account-menu-disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.account-menu-label {
    padding: 7px 8px 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 760;
    text-transform: uppercase;
}

.account-personal-links {
    border-top: 1px solid var(--line);
}

.account-menu-links a > span,
.account-menu-disabled > span {
    min-width: 0;
    flex: 1 1 auto;
}

.account-menu-badge {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #dce9e5;
    color: var(--green-dark);
    font-size: 10px;
    text-align: center;
}

.account-menu-links a.locked {
    color: var(--muted);
}

.account-menu-links a:hover,
.account-menu-links a.active,
.account-menu-signout button:hover {
    background: rgba(6, 78, 228, 0.07);
    color: var(--brand-blue-dark);
}

.account-menu-links .portal-icon,
.account-menu-disabled .portal-icon,
.account-menu-signout .portal-icon {
    width: 18px;
    height: 18px;
}

.account-menu-signout {
    margin: 0;
    padding-top: 5px;
    border-top: 1px solid var(--line);
}

.account-settings-page {
    width: min(680px, 100%);
    margin: 0 auto;
}

.account-settings-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.account-settings-heading h1 {
    margin: 0;
    font-size: 28px;
}

.account-settings-heading span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.account-settings-form {
    display: grid;
    gap: 22px;
    padding-top: 24px;
}

.account-photo-editor {
    display: flex;
    align-items: center;
    gap: 18px;
}

.account-photo-editor > div,
.account-photo-editor small {
    display: block;
}

.account-photo-editor small {
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
}

.account-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px var(--page-gutter) 56px;
}

.site-footer {
    border-top: 1px solid rgba(6, 78, 228, 0.12);
    background: rgba(255, 255, 255, 0.92);
}

.app-footer-shell {
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px var(--page-gutter);
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.footer-brand img {
    display: block;
    width: clamp(150px, 18vw, 220px);
    max-height: 36px;
    object-fit: contain;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
}

.footer-links a {
    color: #334042;
    font-family: var(--font-ui);
    font-size: var(--text-nav);
    font-weight: var(--weight-nav);
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--brand-blue-dark);
    text-decoration: underline;
}

.site-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.flash,
.error-list {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(23, 107, 91, 0.22);
    background: #e8f3ef;
    color: var(--green-dark);
}

.error-list {
    border-color: rgba(159, 61, 54, 0.28);
    background: #f7e9e7;
    color: var(--danger);
}

.error-list p {
    margin: 0;
}

.error-list p + p {
    margin-top: 6px;
}

.workspace-band,
.tool-panel,
.board-preview {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.workspace-band {
    padding: clamp(18px, 3vw, 28px);
}

[data-tab-panel][hidden] {
    display: none !important;
}

.workspace-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 18px 0;
    overflow-x: auto;
}

.workspace-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
    font-size: 13px;
    font-weight: 780;
    text-decoration: none;
    white-space: nowrap;
}

.workspace-tabs a.active,
.workspace-tabs a:hover,
.workspace-tabs a:focus {
    border-color: rgba(23, 107, 91, 0.28);
    background: #eaf4f0;
    color: var(--green-dark);
}

.admin-tabs {
    position: sticky;
    top: 72px;
    z-index: 12;
    padding: 8px 0;
    background: rgba(244, 241, 234, 0.94);
    backdrop-filter: blur(10px);
}

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

.section-heading.compact {
    margin-bottom: 14px;
}

.page-intro {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--copper);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: var(--weight-heading);
}

h1,
h2 {
    margin: 0;
    color: #182225;
}

h1 {
    font-size: var(--text-h1);
    line-height: var(--line-h1);
}

h2 {
    font-size: var(--text-h2);
    line-height: var(--line-h2);
}

h3 {
    font-size: var(--text-h3);
    line-height: var(--line-h3);
}

h4 {
    font-size: var(--text-h4);
    line-height: var(--line-h4);
}

h5 {
    font-size: var(--text-h5);
    line-height: var(--line-h5);
}

h6 {
    font-size: var(--text-h6);
    line-height: var(--line-h6);
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.button,
.board-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(31, 40, 42, 0.16);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-button);
    font-weight: var(--weight-button);
    text-decoration: none;
    white-space: nowrap;
}

.button:hover {
    border-color: rgba(31, 40, 42, 0.28);
}

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

.button.primary:hover {
    background: var(--green-dark);
}

select,
input,
textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(31, 40, 42, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
}

input,
textarea {
    padding: 9px 11px;
}

select {
    padding: 9px 32px 9px 11px;
}

textarea {
    min-height: 104px;
    resize: vertical;
}

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

.metric {
    min-height: 92px;
    padding: 16px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #f9f8f4;
}

.metric span,
.metric strong {
    display: block;
}

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

.metric strong {
    margin-top: 8px;
    font-size: 27px;
    line-height: 1;
}

.metric-code {
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.board-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-radius: 8px;
    background: var(--surface-alt);
    text-decoration: none;
}

.board-chip span {
    min-width: 0;
    overflow: hidden;
    color: #344043;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-chip strong {
    color: var(--green);
}

.command-center-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.command-card {
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 15px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
    text-decoration: none;
}

.command-card:hover,
.command-card:focus {
    border-color: rgba(23, 107, 91, 0.28);
    background: #f3f7f3;
}

.command-card span {
    color: var(--copper);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.command-card strong {
    color: #182225;
    font-size: 16px;
    line-height: 1.25;
}

.command-card small {
    color: var(--muted);
}

.work-grid {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.work-grid.two {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.tool-panel,
.board-preview {
    min-width: 0;
    padding: clamp(16px, 2vw, 22px);
}

.auth-shell {
    display: grid;
    min-height: calc(100vh - 160px);
    place-items: center;
}

.auth-panel {
    width: min(440px, 100%);
    padding: clamp(20px, 4vw, 30px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.wide-auth {
    width: min(760px, 100%);
}

.auth-panel h1 {
    margin-bottom: 18px;
}

.registration-panel {
    width: min(560px, 100%);
}

.registration-wizard {
    gap: 0;
}

.registration-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.registration-progress span {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: #dce1e2;
}

.registration-progress span[aria-current="step"] {
    background: var(--brand-blue);
}

.registration-step {
    gap: 14px;
}

.registration-step[hidden] {
    display: none;
}

.registration-step-identity,
.registration-wizard[data-step="intent"] .registration-step-intent {
    display: grid;
}

.registration-step-intent,
.registration-wizard[data-step="intent"] .registration-step-identity {
    display: none;
}

.registration-heading .eyebrow {
    margin-bottom: 4px;
}

.registration-heading h1 {
    margin: 0 0 4px;
}

.registration-heading h1:focus {
    outline: 0;
}

.account-type-grid {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.registration-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.account-type-grid legend {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.account-type-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-radius: 8px;
    background: #fbfaf6;
}

.registration-role-grid .account-type-option {
    position: relative;
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 96px;
    align-content: start;
    padding: 14px;
    cursor: pointer;
}

.registration-role-grid .account-type-option > input {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-blue);
}

.registration-role-grid .account-type-option > .portal-icon {
    width: 20px;
    height: 20px;
    color: var(--brand-blue-dark);
}

.registration-role-grid .account-type-option:has(input:checked) {
    border-color: var(--brand-blue);
    background: #f4f7ff;
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.registration-role-grid .account-type-option:has(input:focus-visible) {
    outline: 3px solid rgba(6, 78, 228, 0.18);
    outline-offset: 2px;
}

.registration-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
}

.registration-actions .button.primary,
.registration-step-continue {
    justify-content: center;
}

.account-type-option strong,
.account-type-option small {
    display: block;
}

.account-type-option small {
    margin-top: 2px;
    color: var(--muted);
}

.auth-note,
.empty-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.setup-grid,
.workspace-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.setup-grid div,
.workspace-summary div {
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #f9f8f4;
}

.setup-grid strong,
.setup-grid span,
.workspace-summary span,
.workspace-summary strong,
.workspace-summary a {
    display: block;
}

.setup-grid span,
.workspace-summary span {
    color: var(--muted);
    font-size: 13px;
}

.workspace-summary a {
    margin-top: 6px;
    color: var(--blue);
    font-weight: 800;
}

.plan-card {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(25, 93, 122, 0.16);
    border-radius: 8px;
    background: #f6faf9;
}

.compact-plan {
    background: #fbfaf6;
}

.plan-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.plan-head,
.plan-meter > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plan-head span,
.plan-meter span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.plan-head strong,
.plan-meter strong {
    display: block;
}

.plan-meters {
    display: grid;
    gap: 10px;
}

.plan-meter {
    display: grid;
    gap: 6px;
}

.meter-track {
    display: block;
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: rgba(31, 40, 42, 0.1);
}

.meter-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}

.plan-link {
    min-width: 72px;
}

.billing-hero .metric strong {
    overflow: hidden;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.pricing-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 360px;
    padding: 16px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-radius: 8px;
    background: #fbfaf6;
}

.pricing-card.current {
    border-color: rgba(23, 107, 91, 0.34);
    background: #f0f8f5;
}

.pricing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pricing-head span,
.pricing-head strong {
    display: block;
}

.pricing-head span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.pricing-head strong {
    margin-top: 4px;
    font-size: 24px;
    line-height: 1;
}

.pricing-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.pricing-card ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 18px;
    color: #364245;
    font-size: 13px;
}

.pricing-card form,
.pricing-card .button {
    align-self: end;
    width: 100%;
}

.pricing-card .button[disabled] {
    opacity: 0.64;
    cursor: not-allowed;
}

.billing-summary {
    grid-template-columns: 1fr;
}

.billing-summary strong,
.billing-summary a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-meters {
    gap: 14px;
}

.stacked-form {
    display: grid;
    gap: 12px;
}

.compact-form {
    gap: 10px;
}

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

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

.field span,
.color-field span {
    color: #526064;
    font-size: 12px;
    font-weight: 760;
}

.field.wide {
    grid-column: 1 / -1;
}

.board-meta-fields {
    display: grid;
    gap: 12px;
}

.board-meta-fieldset {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #f8fbfa;
}

.board-meta-fieldset legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.source-table {
    display: grid;
    gap: 8px;
}

.board-admin-header,
.board-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.board-admin-header.compact {
    padding-bottom: 14px;
}

.board-admin-header h1,
.board-editor-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.board-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
}

.board-summary-strip strong {
    color: var(--ink);
}

.board-index-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 180px auto auto;
    gap: 10px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.board-index-toolbar select,
.board-index-toolbar .button {
    min-height: 42px;
}

.board-index-search {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.board-index-search .portal-icon {
    width: 18px;
    color: var(--muted);
}

.board-index-search input {
    min-width: 0;
    min-height: 40px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.board-index-list {
    display: grid;
}

.board-index-row {
    display: grid;
    grid-template-columns: 44px minmax(180px, 1fr) auto minmax(160px, auto) auto;
    gap: 14px;
    align-items: center;
    min-height: 76px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.board-index-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--board-accent, var(--green)) 12%, #ffffff);
    color: var(--board-accent, var(--green));
}

.board-index-icon .portal-icon {
    width: 21px;
    height: 21px;
}

.board-index-identity {
    min-width: 0;
}

.board-index-identity h2 {
    overflow: hidden;
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-index-identity span,
.board-index-counts span {
    color: var(--muted);
    font-size: 12px;
}

.board-index-counts,
.board-index-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.board-index-counts strong {
    color: var(--ink);
}

.board-index-actions .button,
.board-index-actions .icon-button {
    min-height: 38px;
}

.board-action-menu {
    position: relative;
}

.board-action-menu > summary {
    display: inline-grid;
    list-style: none;
    cursor: pointer;
    font-size: 20px;
}

.board-action-menu > summary::-webkit-details-marker {
    display: none;
}

.board-action-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 15;
    display: grid;
    min-width: 150px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--shadow);
}

.board-action-menu-panel button {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.board-action-menu-panel button:hover {
    background: #f3f6f5;
}

.board-action-menu-panel .danger-text {
    color: #a0332e;
}

.back-link {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.board-settings-form {
    max-width: 980px;
}

.board-settings-section {
    display: grid;
    grid-template-columns: minmax(170px, 0.38fr) minmax(0, 1fr);
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.board-settings-heading h2,
.board-editor-section-heading h2,
.contributor-admin-section > header h2 {
    margin: 0;
    font-size: 18px;
}

.board-settings-heading span,
.board-editor-section-heading span,
.contributor-admin-section > header span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.board-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

.board-settings-grid .compact-number {
    max-width: none;
}

.apply-default-check {
    min-height: 44px;
}

.board-editor-savebar {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
}

.board-editor-title > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.board-editor-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 980px);
    gap: 34px;
    align-items: start;
    padding-top: 24px;
}

.board-editor-nav {
    position: sticky;
    top: 84px;
    display: grid;
    gap: 3px;
}

.board-editor-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.board-editor-nav a:hover,
.board-editor-nav a.active {
    background: #eef5f3;
    color: var(--green);
}

.board-editor-nav .portal-icon {
    width: 18px;
    height: 18px;
}

.board-editor-mobile-nav {
    display: none;
}

.board-editor-form {
    min-width: 0;
}

.board-editor-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.input-prefix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.input-prefix > span {
    padding-left: 12px;
    color: var(--muted);
}

.input-prefix input {
    border: 0;
    background: transparent;
}

.board-toggle-list {
    display: grid;
    gap: 0;
    margin-top: 24px;
    border-top: 1px solid var(--line);
}

.board-toggle-list .check-row {
    min-height: 62px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.board-toggle-list .check-row > span,
.board-toggle-list .check-row strong,
.board-toggle-list .check-row small {
    display: block;
}

.board-toggle-list .check-row small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.board-toggle-list .disabled {
    opacity: 0.6;
}

.board-field-list {
    border-top: 1px solid var(--line);
}

.board-field-row {
    border-bottom: 1px solid var(--line);
}

.board-field-row > summary {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto 20px;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 8px 4px;
    list-style: none;
    cursor: pointer;
}

.board-field-row > summary::-webkit-details-marker {
    display: none;
}

.board-field-summary-name strong,
.board-field-summary-name small {
    display: block;
}

.board-field-summary-name strong {
    font-size: 14px;
}

.board-field-summary-name small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.board-field-chips {
    display: flex;
    gap: 5px;
}

.board-field-chips span {
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef3f2;
    color: #4b5a5c;
    font-size: 10px;
    font-weight: 750;
}

.board-field-row > summary > .portal-icon {
    width: 18px;
    transition: transform 150ms ease;
}

.board-field-row[open] > summary > .portal-icon {
    transform: rotate(180deg);
}

.board-field-body {
    padding: 18px;
    border-top: 1px solid var(--line);
    background: #f8faf9;
}

.board-field-toggles {
    display: grid;
    grid-template-columns: repeat(6, minmax(78px, auto)) minmax(90px, 1fr);
    gap: 10px;
    align-items: end;
}

.board-field-options {
    margin-top: 18px;
}

.board-custom-field-builder {
    margin-top: 26px;
}

.custom-field-builder {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(31, 40, 42, 0.12);
}

.custom-field-builder-head,
.custom-field-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.custom-field-builder-head {
    align-items: flex-start;
    justify-content: space-between;
}

.custom-field-builder h3,
.custom-field-builder p {
    margin: 0;
}

.custom-field-builder p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.custom-field-list {
    display: grid;
    gap: 10px;
}

.custom-field-row {
    padding: 12px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfcfb;
}

.custom-field-row .field {
    flex: 1 1 180px;
}

.custom-field-row .custom-field-options {
    flex-basis: 240px;
}

.custom-field-remove {
    flex: 0 0 auto;
    margin-bottom: 2px;
    font-size: 20px;
    line-height: 1;
}

.mini-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: #526064;
    font-size: 12px;
    font-weight: 700;
}

.compact-number {
    max-width: 110px;
}

.share-provider-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    margin-top: 22px;
    border-top: 1px solid var(--line);
}

.share-provider-edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.share-provider-edit-row input[type="number"] {
    width: 74px;
    min-height: 34px;
}

.share-maximum-field {
    max-width: 180px;
}

.contributor-admin-section {
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.contributor-admin-section > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.contributor-admin-list {
    border-top: 1px solid var(--line);
}

.contributor-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.contributor-admin-row > div:first-child strong,
.contributor-admin-row > div:first-child span {
    display: block;
}

.contributor-admin-row > div:first-child span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .board-index-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .board-index-row > .status-pill {
        justify-self: end;
    }

    .board-index-counts {
        grid-column: 2;
    }

    .board-index-actions {
        grid-column: 3;
        grid-row: 2;
    }

    .board-editor-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 16px;
    }

    .board-editor-nav {
        display: none;
    }

    .board-editor-mobile-nav {
        position: relative;
        display: block;
    }

    .board-editor-mobile-nav > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: 9px 12px;
        border: 1px solid var(--line);
        border-radius: 6px;
        list-style: none;
        background: #fff;
        cursor: pointer;
        font-weight: 750;
    }

    .board-editor-mobile-nav > summary::-webkit-details-marker {
        display: none;
    }

    .board-editor-mobile-nav > summary .portal-icon {
        width: 18px;
    }

    .board-editor-mobile-nav > div {
        position: absolute;
        z-index: 12;
        display: grid;
        width: 100%;
        margin-top: 5px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: #fff;
        box-shadow: var(--shadow);
    }

    .board-editor-mobile-nav a {
        min-height: 40px;
        padding: 9px;
        border-radius: 5px;
        color: var(--ink);
        text-decoration: none;
    }

    .board-editor-mobile-nav a.active {
        background: #eef5f3;
        color: var(--green);
    }

    .board-field-toggles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .board-admin-header,
    .board-editor-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .board-admin-header h1,
    .board-editor-header h1 {
        font-size: 24px;
    }

    .board-admin-header .inline-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .board-index-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .board-index-search {
        grid-column: 1 / -1;
    }

    .board-index-toolbar label:has(select) {
        min-width: 0;
    }

    .board-index-toolbar select {
        width: 100%;
    }

    .board-index-toolbar .text-link {
        grid-column: 1 / -1;
    }

    .board-index-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .board-index-icon {
        width: 36px;
        height: 36px;
    }

    .board-index-row > .status-pill {
        display: none;
    }

    .board-index-counts {
        gap: 8px;
    }

    .board-index-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }

    .board-settings-section {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 0;
    }

    .board-settings-grid,
    .share-provider-editor {
        grid-template-columns: 1fr;
    }

    .board-editor-title > div {
        flex-wrap: wrap;
    }

    .board-editor-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .board-field-row > summary {
        grid-template-columns: minmax(0, 1fr) 18px;
    }

    .board-field-chips {
        display: none;
    }

    .board-field-body {
        margin: 0 -4px;
        padding: 14px 10px;
    }

    .board-field-toggles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contributor-admin-row {
        align-items: stretch;
        flex-direction: column;
    }

    .contributor-admin-row .inline-actions {
        justify-content: flex-start;
    }
}

.source-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 134px 72px 54px;
    align-items: end;
    gap: 10px;
    min-height: 58px;
}

.compact-field select {
    min-height: 40px;
}

.schedule-toggle {
    display: grid;
    grid-template-columns: 18px auto;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    color: #526064;
    font-size: 12px;
    font-weight: 800;
}

.schedule-toggle input {
    width: 18px;
    min-height: 18px;
}

.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
}

.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.switch span {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #c8c2b6;
}

.switch span::after {
    display: block;
    width: 18px;
    height: 18px;
    margin: 2px;
    border-radius: 999px;
    background: #ffffff;
    content: "";
    transition: transform 160ms ease;
}

.switch input:checked + span {
    background: var(--green);
}

.switch input:checked + span::after {
    transform: translateX(16px);
}

.mini-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid rgba(31, 40, 42, 0.14);
    border-radius: 8px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.status-list {
    display: grid;
    gap: 8px;
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(31, 40, 42, 0.08);
}

.status-row div {
    min-width: 0;
}

.status-row strong,
.status-row span {
    display: block;
}

.status-row span {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-pill,
.source-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ece7dc;
    color: #465155;
    font-size: 12px;
    font-weight: 760;
    white-space: nowrap;
}

.status-pill.ok,
.status-pill.completed,
.source-pill.local {
    background: #e6f1ee;
    color: var(--green-dark);
}

.status-pill.error,
.status-pill.failed {
    background: #f6e4df;
    color: var(--danger);
}

.status-pill.skipped,
.status-pill.completed_with_errors {
    background: #f8edcc;
    color: #765412;
}

.status-pill.running {
    background: #e6edf4;
    color: var(--blue);
}

.status-pill.pending {
    background: #f8edcc;
    color: #765412;
}

.status-pill.approved,
.source-pill.featured {
    background: #e7f0f8;
    color: var(--blue);
}

.status-pill.rejected {
    background: #f6e4df;
    color: var(--danger);
}

.status-pill.suspended {
    background: #f6e4df;
    color: var(--danger);
}

.compact-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.compact-metrics .metric {
    min-height: 78px;
    padding: 12px;
}

.compact-metrics .metric strong {
    font-size: 22px;
}

.featured-summary {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid rgba(31, 40, 42, 0.08);
}

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

.color-field {
    display: grid;
    gap: 7px;
}

.color-field input[type="color"] {
    width: 100%;
    min-height: 42px;
    padding: 4px;
}

.color-grid .button {
    grid-column: 1 / -1;
}

.typography-settings {
    display: grid;
    grid-column: 1 / -1;
    gap: 14px;
    margin: 8px 0 0;
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid rgba(31, 40, 42, 0.1);
}

.typography-settings legend {
    padding: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: var(--weight-heading);
}

.field-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.typography-preview-copy {
    margin-bottom: 18px;
}

.typography-preview-copy span {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    font-weight: var(--weight-nav);
}

.typography-preview-copy h2 {
    margin-top: 5px;
}

.typography-preview-copy p {
    margin: 7px 0 0;
}

[data-board-typography],
[data-typography-preview] {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-body);
}

.board-preview,
.public-board-shell {
    color: var(--rom-text);
    background: var(--rom-board-bg);
}

.preview-search {
    margin-bottom: 16px;
}

.board-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.board-search input {
    background: var(--rom-surface);
}

.board-search button {
    border-color: var(--rom-search-bg);
    background: var(--rom-search-bg);
    color: var(--rom-search-text);
}

.public-listing {
    border: 1px solid rgba(31, 40, 42, 0.14);
    border-radius: 8px;
    background: var(--rom-surface);
}

.public-listing + .public-listing,
.public-listing + .external-ad-slot,
.external-ad-slot + .public-listing {
    margin-top: 10px;
}

.public-listing summary {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.public-listing summary::-webkit-details-marker {
    display: none;
}

.board-plus {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--rom-plus), #ffffff 64%);
    border-radius: 8px;
    color: var(--rom-plus);
    font-size: 22px;
    font-weight: 760;
    line-height: 1;
    transition: transform 160ms ease, background 160ms ease;
}

.public-listing[open] .board-plus {
    transform: rotate(45deg);
    background: color-mix(in srgb, var(--rom-plus), #ffffff 86%);
}

.public-listing strong,
.public-listing small {
    display: block;
}

.public-listing strong {
    overflow-wrap: anywhere;
}

.public-listing small {
    color: color-mix(in srgb, var(--rom-text), #ffffff 42%);
}

.public-listing p {
    margin: 0;
    padding: 0 14px 12px 56px;
    color: color-mix(in srgb, var(--rom-text), #ffffff 22%);
}

.public-listing a,
.listing-actions a {
    color: var(--rom-link);
    font-weight: 760;
}

.listing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 14px 14px 56px;
}

.listing-actions span {
    color: color-mix(in srgb, var(--rom-text), #ffffff 38%);
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    color: #2f3b3e;
}

.check-row input {
    width: 18px;
    min-height: 18px;
}

.permission-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.token-reveal {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(23, 107, 91, 0.2);
    border-radius: 8px;
    background: #e8f3ef;
}

.token-reveal span {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.token-reveal code {
    overflow-x: auto;
    color: #102b25;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: nowrap;
}

.key-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.key-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 0;
    border-top: 1px solid rgba(31, 40, 42, 0.08);
}

.key-row.revoked {
    opacity: 0.62;
}

.key-row strong,
.key-row span {
    display: block;
}

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

.mini-button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(159, 61, 54, 0.22);
    border-radius: 8px;
    background: #fff7f5;
    color: var(--danger);
    font-weight: 800;
}

.mini-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(25, 93, 122, 0.24);
    border-radius: 8px;
    background: #eef5f6;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mini-copy.copied {
    border-color: rgba(23, 107, 91, 0.28);
    background: #e6f1ee;
    color: var(--green-dark);
}

.copy-stack {
    display: grid;
    gap: 10px;
}

.copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.copy-row code,
.endpoint-body code {
    overflow: hidden;
    padding: 9px 10px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #f8f6f0;
    color: #243033;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.capability-grid div,
.board-key-grid div {
    padding: 10px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #f9f8f4;
}

.capability-grid span,
.board-key-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.capability-grid strong,
.board-key-grid strong {
    display: block;
    margin-top: 3px;
}

.endpoint-list {
    display: grid;
    gap: 10px;
}

.endpoint-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(132px, auto);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfaf6;
}

.endpoint-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 8px;
    background: #e6edf4;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.endpoint-method.post {
    background: #e6f1ee;
    color: var(--green-dark);
}

.endpoint-body {
    display: grid;
    min-width: 0;
    gap: 5px;
}

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

.endpoint-actions {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.endpoint-actions small {
    color: var(--muted);
    font-size: 12px;
}

.developer-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f6f3ed 100%);
}

.developer-grid {
    align-items: start;
}

.board-key-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.snippet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.snippet-card {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.activity-feed {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.activity-item {
    padding: 10px 0;
    border-top: 1px solid rgba(31, 40, 42, 0.08);
}

.activity-item span {
    display: inline-flex;
    margin-bottom: 3px;
    color: var(--copper);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.activity-item p {
    margin: 0;
}

.activity-item small {
    color: var(--muted);
}

.run-list,
.log-list {
    display: grid;
    gap: 8px;
}

.run-row,
.log-row {
    display: grid;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(31, 40, 42, 0.08);
}

.run-row {
    grid-template-columns: minmax(0, 1fr) minmax(148px, auto);
    align-items: start;
}

.run-row strong,
.run-row span,
.run-row small {
    display: block;
}

.run-row span,
.run-row small,
.run-counts small,
.log-row p,
.log-row small {
    color: var(--muted);
    font-size: 13px;
}

.run-counts {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.log-row {
    grid-template-columns: 72px minmax(0, 1fr);
}

.log-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ece7dc;
    color: #465155;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.log-row.error > span {
    background: #f6e4df;
    color: var(--danger);
}

.log-row.warning > span {
    background: #f8edcc;
    color: #765412;
}

.log-row.info > span {
    background: #e6f1ee;
    color: var(--green-dark);
}

.log-row p {
    margin: 2px 0;
}

.listing-band {
    margin-top: 18px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

th,
td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(31, 40, 42, 0.08);
    text-align: left;
    vertical-align: top;
}

th {
    background: #f6f3ed;
    color: #4f5a5d;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

td strong,
td span {
    display: block;
}

td span {
    color: var(--muted);
    font-size: 13px;
}

.empty-cell,
.public-empty {
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.public-board-shell {
    width: 100%;
    margin: 0;
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid color-mix(in srgb, var(--rom-text), transparent 84%);
    border-radius: 8px;
}

.public-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.public-list {
    margin-top: 14px;
}

.external-ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    border: 1px dashed color-mix(in srgb, var(--rom-text), transparent 68%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--rom-surface), var(--rom-board-bg) 52%);
}

.external-ad-slot span {
    color: color-mix(in srgb, var(--rom-text), transparent 30%);
    font-size: 13px;
}

.rosepat-embed-board {
    border: 1px solid #d9d3c7;
    border-radius: 8px;
    background: #ffffff;
    color: #1f282a;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.rosepat-embed-head,
.rosepat-embed-item {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(31, 40, 42, 0.08);
}

.rosepat-embed-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    background: #f6f3ed;
}

.rosepat-embed-item a {
    color: #195d7a;
    font-weight: 800;
}

.rosepat-embed-item p {
    margin: 4px 0 0;
    color: #657071;
}

.code-panel {
    margin: 0;
    overflow-x: auto;
    border: 1px solid #d7ded8;
    border-radius: 8px;
    background: #12201d;
    color: #e8f3ed;
    padding: 14px;
    font-size: 0.82rem;
    line-height: 1.55;
}

.code-panel code {
    white-space: pre;
}

.tall-code {
    max-height: 520px;
}

.marketplace-shell,
.marketplace-side .tool-panel,
.opportunity-detail .tool-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.marketplace-shell {
    padding: clamp(18px, 3vw, 28px);
}

.marketplace-results {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

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

.marketplace-hero h1 {
    max-width: 820px;
}

.marketplace-hero p {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--muted);
}

.marketplace-filters {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(130px, 1fr)) auto auto;
    align-items: end;
    gap: 10px;
}

.search-field input {
    min-width: 220px;
}

.marketplace-check {
    align-self: end;
    min-height: 40px;
}

.marketplace-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    margin-top: 18px;
}

.smart-marketplace-layout {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    align-items: start;
}

.marketplace-filter-column {
    position: sticky;
    top: 18px;
    display: grid;
    align-self: start;
    gap: 10px;
    min-width: 0;
}

.marketplace-filter-list {
    display: grid;
    gap: 0;
    background: transparent;
}

.mobile-filter-toggle {
    display: none;
}

.mobile-filter-panel {
    display: contents;
}

.filter-heading {
    margin: 0;
    padding: 0 2px;
    background: transparent;
}

.filter-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-filter);
    line-height: 1.35;
    font-weight: 820;
}

.marketplace-filter-accordion {
    margin: 0;
    background: transparent;
}

.marketplace-filter-accordion > summary {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.marketplace-filter-accordion > summary::-webkit-details-marker {
    display: none;
}

.filter-accordion-icon::before {
    content: "+";
    color: var(--rom-plus, var(--brand-orange));
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.marketplace-filter-accordion[open] .filter-accordion-icon::before {
    content: "-";
}

.marketplace-filter-accordion > summary strong {
    min-width: 0;
    font-size: var(--text-filter);
    font-weight: 800;
}

.filter-accordion-panel {
    display: grid;
    gap: 10px;
    padding: 0 2px 14px 26px;
    background: transparent;
}

.filter-option-search {
    width: 100%;
    min-height: 38px;
}

.filter-option-list {
    display: grid;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 5px 4px;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
}

.filter-option:hover,
.filter-option:focus-within {
    color: var(--green-dark);
}

.filter-option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.filter-option-input:checked + span {
    color: var(--green-dark);
    font-weight: 800;
}

.filter-option-input:focus-visible + span {
    outline: 2px solid var(--brand-blue);
    outline-offset: 3px;
}

.filter-option[hidden] {
    display: none;
}

.grant-size-range,
.deadline-filter-range {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.marketplace-side {
    display: grid;
    align-content: start;
    gap: 18px;
}

.opportunity-list,
.compact-opportunity-list {
    display: grid;
    gap: 14px;
}

.marketplace-search-row {
    grid-column: 1 / -1;
    min-width: 0;
}

.listing-topbar {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(31, 40, 42, 0.1);
}

.marketplace-search-row .listing-topbar {
    margin-bottom: 0;
}

.listing-top-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.advanced-search-control {
    position: relative;
    min-width: 0;
}

.listing-top-search input[type="search"] {
    width: 100%;
    min-height: 42px;
    padding-right: 46px;
    border-radius: 8px;
}

.advanced-search-help {
    position: absolute;
    z-index: 25;
    top: 7px;
    right: 7px;
}

.advanced-search-help summary {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c6cfdb;
    border-radius: 50%;
    background: #ffffff;
    color: #46516a;
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
    list-style: none;
}

.advanced-search-help summary::-webkit-details-marker {
    display: none;
}

.advanced-search-help summary:hover,
.advanced-search-help summary:focus-visible,
.advanced-search-help[open] summary {
    border-color: var(--brand-blue);
    color: var(--brand-blue-dark);
}

.advanced-search-help summary:focus-visible {
    outline: 3px solid rgba(6, 78, 228, 0.18);
    outline-offset: 2px;
}

.advanced-search-help-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: min(360px, calc(100vw - 32px));
    gap: 7px;
    padding: 13px;
    border: 1px solid #ccd4df;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(30, 42, 62, 0.16);
    color: var(--ink);
}

.advanced-search-help-panel code {
    overflow-wrap: anywhere;
    color: #334155;
    font-size: 12px;
}

.advanced-search-help-panel small {
    color: var(--muted);
    line-height: 1.45;
}

.advanced-search-error {
    grid-column: 1 / -1;
    margin: -2px 0 0;
    color: #a52828;
    font-size: 13px;
}

.advanced-search-error strong {
    font-weight: 800;
}

.listing-view-controls,
.listing-layout-buttons,
.listing-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.listing-top-actions {
    min-width: 0;
    flex-wrap: nowrap;
}

.listing-view-controls {
    min-width: 0;
}

.board-selector-wrap {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
}

.top-board-select {
    width: var(--board-select-width, auto);
    max-width: min(280px, 100%);
    min-width: 0;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    border-radius: 8px;
}

.listing-search-submit {
    height: 42px;
    min-height: 42px;
}

.board-selector-sizer {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: pre;
}

.listing-layout-buttons {
    flex: 0 0 auto;
}

.listing-layout-button {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #ccd4df;
    border-radius: 8px;
    background: #ffffff;
    color: #46516a;
    cursor: pointer;
}

.listing-layout-button:hover,
.listing-layout-button:focus-visible,
.listing-layout-button[aria-pressed="true"] {
    border-color: var(--green);
    background: #eaf4f0;
    color: var(--green-dark);
}

.listing-layout-button:focus-visible {
    outline: 3px solid rgba(12, 110, 105, 0.2);
    outline-offset: 2px;
}

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

.marketplace-result-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin-bottom: 16px;
}

.result-count {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 720;
}

.listing-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.listing-view-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 780;
    text-decoration: none;
}

.listing-view-tabs a.active,
.listing-view-tabs a:hover,
.listing-view-tabs a:focus {
    border-bottom-color: var(--green);
    background: transparent;
    color: var(--green-dark);
}

.marketplace-applied-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: -4px 0 16px;
    padding: 9px 10px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-radius: 4px;
    background: #f7f4ee;
    color: var(--ink);
    font-size: 15px;
}

.applied-filters-label {
    flex: 0 0 auto;
    font-weight: 800;
}

.applied-filter-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.applied-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 3px 7px;
    border: 1px solid rgba(31, 40, 42, 0.15);
    border-radius: 4px;
    background: #ffffff;
    color: var(--ink);
    line-height: 1.2;
    text-decoration: none;
}

.applied-filter-chip:hover,
.applied-filter-chip:focus {
    border-color: var(--green);
    color: var(--green-dark);
}

.applied-filter-remove {
    color: var(--brand-orange);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.applied-filters-clear {
    margin-left: 2px;
    color: var(--green-dark);
    font-weight: 800;
    text-underline-offset: 3px;
}

.alert-create-form {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(31, 40, 42, 0.1);
}

.opportunity-card {
    --card-title-size: var(--text-listing-title);
    display: block;
    padding: 18px 20px;
    border: 1px solid #e8ecf4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 33, 79, 0.05);
    overflow-wrap: anywhere;
}

.opportunity-card-media {
    display: flex;
    min-height: 116px;
    align-items: center;
    justify-content: center;
    margin: -20px -20px 16px;
    border-radius: 8px 8px 0 0;
    background:
        linear-gradient(135deg, rgba(23, 107, 91, 0.9), rgba(25, 93, 122, 0.92)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 10px, rgba(255, 255, 255, 0.04) 10px 20px);
    color: #ffffff;
    overflow: hidden;
}

.listing-card-table {
    display: none;
}

.listing-card-standard {
    display: contents;
}

.opportunity-card-media-frame {
    display: none;
    min-width: 0;
}

.opportunity-card.layout-preset-magazine .listing-card-standard > .opportunity-card-media-frame,
.opportunity-card.layout-preset-blog_list .listing-card-standard > .opportunity-card-media-frame,
.opportunity-card.layout-preset-scholarship_portal .listing-card-standard > .opportunity-card-media-frame {
    display: contents;
}

.opportunity-card.layout-preset-image_heavy .listing-card-standard > .opportunity-card-media-frame {
    display: block;
}

.opportunity-card.layout-preset-blog_list .opportunity-excerpt {
    display: block;
}

.opportunity-card-media {
    color: #ffffff;
    text-decoration: none;
}

.opportunity-card-media:focus-visible,
.related-card-media:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: -3px;
}

.opportunity-card-media img,
.related-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opportunity-card-media.is-logo img,
.related-card-media.is-logo img {
    padding: 14px;
    background: #ffffff;
    object-fit: contain;
}

.opportunity-card-media span {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 18px;
    font-weight: 900;
}

.opportunity-field-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.opportunity-field-pills a,
.opportunity-field-pills span {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(12, 110, 105, 0.18);
    border-radius: 8px;
    background: #f2fbf8;
    color: #204846;
    font-size: 12px;
    line-height: 1.35;
    text-decoration: none;
}

.opportunity-field-pills a:hover,
.opportunity-field-pills a:focus {
    border-color: rgba(12, 110, 105, 0.34);
    background: #e7f5f1;
    text-decoration: underline;
}

.opportunity-field-pills strong {
    color: #0c6e69;
    font-weight: 800;
}

.detail-field-pills {
    margin-top: 14px;
}

.public-field-pills {
    padding: 0 14px 12px 54px;
}

.opportunity-card-head {
    display: block;
    width: 100%;
    min-width: 0;
}

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

.opportunity-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.opportunity-country-tag,
.opportunity-board-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background: #f7f4ee;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

.opportunity-board-tag {
    background: #eef5f6;
    color: var(--blue);
}

.opportunity-country-tag:hover,
.opportunity-country-tag:focus,
.opportunity-board-tag:hover,
.opportunity-board-tag:focus {
    color: var(--blue);
    text-decoration: underline;
}

.marketplace-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #e7f0f8;
    color: var(--blue);
    font-size: 12px;
    font-weight: 820;
}

.marketplace-badge.neutral {
    background: #e6f1ee;
    color: var(--green-dark);
}

.opportunity-main a {
    color: var(--ink);
    text-decoration: none;
}

.opportunity-card-title {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    font-family: var(--font-heading);
    font-size: var(--card-title-size);
    line-height: 1.22;
    font-weight: var(--weight-listing-title);
}

.opportunity-title-link {
    color: var(--blue) !important;
    text-decoration: none;
}

.opportunity-title-link:hover,
.opportunity-title-link:focus {
    text-decoration: underline;
}

.opportunity-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    color: #5f6675;
    font-size: var(--text-meta);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.opportunity-card.layout-preset-magazine .opportunity-card-meta,
.opportunity-card.layout-preset-image_heavy .opportunity-card-meta,
.opportunity-card.layout-preset-blog_list .opportunity-card-meta,
.opportunity-card.layout-preset-scholarship_portal .opportunity-card-meta {
    display: grid;
    align-items: start;
    gap: 4px;
}

.opportunity-card.layout-preset-magazine .opportunity-card-meta .opportunity-sep,
.opportunity-card.layout-preset-image_heavy .opportunity-card-meta .opportunity-sep,
.opportunity-card.layout-preset-blog_list .opportunity-card-meta .opportunity-sep,
.opportunity-card.layout-preset-scholarship_portal .opportunity-card-meta .opportunity-sep {
    display: none;
}

.opportunity-meta-item {
    display: inline;
}

.opportunity-meta-item strong {
    color: #35415a;
}

.filter-value-link {
    color: var(--blue) !important;
    font-weight: 400;
    text-decoration: none;
}

.filter-value-link:hover,
.filter-value-link:focus {
    text-decoration: underline;
}

.opportunity-sep {
    display: inline-block;
    margin: 0 12px;
    color: #35415a;
    line-height: 1;
    font-weight: 900;
}

.opportunity-excerpt {
    max-width: 820px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.opportunity-list.layout-preset-magazine,
.opportunity-list.layout-preset-image_heavy,
.opportunity-list.layout-preset-scholarship_portal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.opportunity-card.layout-preset-magazine,
.opportunity-card.layout-preset-image_heavy,
.opportunity-card.layout-preset-scholarship_portal {
    min-height: 100%;
    padding: 20px;
}

.opportunity-card.layout-preset-magazine {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    border-color: rgba(25, 93, 122, 0.16);
}

.opportunity-card.layout-preset-magazine .opportunity-card-media {
    min-height: 100%;
    margin: -20px 0 -20px -20px;
    border-radius: 8px 0 0 8px;
}

.opportunity-card.layout-preset-magazine .opportunity-card-title {
    font-size: calc(var(--card-title-size) + 2px);
}

.opportunity-card.layout-preset-image_heavy {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.opportunity-card.layout-preset-image_heavy .opportunity-card-media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 18px;
    border: 1px solid rgba(15, 33, 79, 0.1);
    border-radius: 6px;
    background: #f3f6f8;
    overflow: hidden;
}

.opportunity-card.layout-preset-image_heavy .opportunity-card-media {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    background:
        linear-gradient(145deg, rgba(15, 33, 79, 0.92), rgba(12, 110, 105, 0.88)),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.22), transparent 28%);
}

.opportunity-card.layout-preset-image_heavy .opportunity-card-media.is-logo {
    background: #ffffff;
}

.opportunity-card.layout-preset-image_heavy .opportunity-card-media.is-logo img {
    padding: 18px;
}

.opportunity-card.layout-preset-image_heavy .opportunity-card-head {
    flex: 1;
}

.opportunity-card.layout-preset-image_heavy .opportunity-card-title {
    font-size: calc(var(--card-title-size) + 1px);
}

.opportunity-card.layout-preset-compact_list {
    padding: 12px 14px;
    box-shadow: none;
}

.opportunity-list.layout-preset-compact_list {
    gap: 8px;
}

.opportunity-card.layout-preset-compact_list .opportunity-card-title {
    margin-bottom: 4px;
    font-size: calc(var(--card-title-size) - 3px);
}

.opportunity-card.layout-preset-compact_list .opportunity-chip-row {
    margin-bottom: 6px;
}

.opportunity-card.layout-preset-compact_list .opportunity-field-pills {
    margin-top: 8px;
}

.opportunity-card.layout-preset-minimal_text {
    padding: 14px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.opportunity-list.layout-preset-minimal_text {
    gap: 0;
}

.opportunity-card.layout-preset-minimal_text .opportunity-chip-row,
.opportunity-card.layout-preset-minimal_text .opportunity-field-pills {
    display: none;
}

.opportunity-card.layout-preset-minimal_text .opportunity-card-title {
    font-size: calc(var(--card-title-size) - 2px);
}

.opportunity-card.layout-preset-blog_list {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    border-left: 4px solid var(--green);
    box-shadow: none;
}

.opportunity-card.layout-preset-blog_list .opportunity-card-media {
    min-height: 132px;
    margin: -18px 0 -18px -20px;
    border-radius: 8px 0 0 8px;
    background:
        linear-gradient(135deg, rgba(23, 107, 91, 0.9), rgba(75, 91, 107, 0.88)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 8px, rgba(255, 255, 255, 0.03) 8px 16px);
}

.opportunity-card.layout-preset-blog_list .opportunity-card-title {
    font-size: calc(var(--card-title-size) + 1px);
}

.opportunity-card.layout-preset-directory_list {
    padding: 14px 16px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.opportunity-list.layout-preset-directory_list,
.related-grid.layout-preset-directory_list {
    gap: 0;
    border-top: 1px solid rgba(31, 40, 42, 0.1);
}

.opportunity-card.layout-preset-directory_list .opportunity-card-title {
    font-size: calc(var(--card-title-size) - 3px);
}

.opportunity-card.layout-preset-directory_list .opportunity-field-pills {
    margin-top: 8px;
}

.opportunity-list.layout-preset-table_list,
.related-grid.layout-preset-table_list {
    gap: 0;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.listing-table-header {
    display: none;
}

.opportunity-list.layout-preset-table_list > .listing-table-header,
.related-grid.layout-preset-table_list > .listing-table-header,
.opportunity-card.layout-preset-table_list {
    display: grid;
    grid-template-columns: minmax(280px, 2.2fr) minmax(100px, 0.75fr) minmax(140px, 1fr) minmax(115px, 0.8fr);
    align-items: center;
}

.listing-table-header {
    min-height: 40px;
    padding: 0 12px;
    background: #f3f6fa;
    color: #46516a;
    font-size: 12px;
    font-weight: 850;
}

.opportunity-card.layout-preset-table_list {
    padding: 0 12px;
    border: 0;
    border-top: 1px solid #e8ecf3;
    border-radius: 0;
    box-shadow: none;
}

.opportunity-card.layout-preset-table_list .listing-card-table {
    display: contents;
}

.opportunity-card.layout-preset-table_list .listing-card-standard {
    display: none;
}

.listing-table-cell {
    min-width: 0;
    padding: 13px 10px;
    color: #4f596c;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.listing-table-primary .opportunity-card-title {
    margin: 0 0 3px;
    font-size: calc(var(--text-meta) + 1px);
    line-height: 1.3;
}

.listing-table-organization {
    color: var(--muted) !important;
    font-size: 12px;
    font-weight: 400;
}

.listing-table-muted {
    color: var(--muted) !important;
    font-size: 12px;
    font-weight: 600;
}

.listing-table-link {
    color: var(--ink) !important;
    font-weight: 400;
    text-decoration: none;
}

.listing-table-link:hover,
.listing-table-link:focus,
.listing-table-organization:hover,
.listing-table-organization:focus {
    text-decoration: underline;
}

.opportunity-card.layout-preset-nonprofit {
    position: relative;
    border-color: rgba(23, 107, 91, 0.18);
    background: #fbfcfb;
    box-shadow: none;
}

.opportunity-card.layout-preset-nonprofit::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: var(--green);
}

.opportunity-card.layout-preset-nonprofit .opportunity-board-tag,
.opportunity-card.layout-preset-nonprofit .opportunity-country-tag {
    background: #eaf4f0;
}

.opportunity-card.layout-preset-scholarship_portal {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    border-color: rgba(245, 142, 22, 0.22);
    background: #fffdfa;
}

.opportunity-card.layout-preset-scholarship_portal .opportunity-card-media {
    min-height: 100%;
    margin: -20px 0 -20px -20px;
    border-radius: 8px 0 0 8px;
    background:
        linear-gradient(135deg, rgba(245, 142, 22, 0.92), rgba(25, 93, 122, 0.9)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 12px, rgba(255, 255, 255, 0.02) 12px 24px);
}

.opportunity-card.layout-preset-scholarship_portal .opportunity-board-tag {
    background: #fff2dc;
    color: #8a4a06;
}

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

.mini-button.save,
.mini-button.neutral {
    border-color: rgba(25, 93, 122, 0.24);
    background: #eef5f6;
    color: var(--blue);
}

.mini-button.neutral {
    border-color: rgba(31, 40, 42, 0.14);
    background: #f7f4ee;
    color: #455053;
}

.full-button {
    width: 100%;
    margin-top: 14px;
}

.pagination-wrap {
    margin-top: 16px;
}

.plugin-page-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 760;
}

.plugin-page-nav a,
.plugin-page-current {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    color: var(--ink);
    text-decoration: none;
}

.plugin-page-nav a:hover,
.plugin-page-nav a:focus {
    color: var(--green-dark);
    text-decoration: underline;
}

.plugin-page-current {
    color: var(--green-dark);
}

.plugin-page-separator {
    color: rgba(31, 40, 42, 0.34);
}

.opportunity-detail-shell {
    --detail-title-size: calc(var(--text-listing-title) + 9px);
    width: min(920px, 100%);
    max-width: 920px;
    margin: 0 auto;
}

.opportunity-detail {
    display: block;
    width: 100%;
}

.detail-main {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

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

.detail-kicker a,
.detail-kicker span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 4px;
    background: #ece7dc;
    color: #455053;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.detail-kicker .opportunity-country-tag {
    background: #f7f4ee;
    color: var(--ink);
}

.detail-kicker .opportunity-board-tag,
.detail-kicker .marketplace-badge {
    background: #e7f0f8;
    color: var(--blue);
}

.detail-kicker .marketplace-badge.neutral {
    background: #e6f1ee;
    color: var(--green-dark);
}

.detail-main h1 {
    margin: 14px 0 10px;
    color: var(--blue);
    font-family: var(--font-heading);
    font-size: var(--detail-title-size);
    font-weight: var(--weight-listing-title);
    line-height: 1.2;
}

.detail-subtitle {
    margin: 10px 0 18px;
    color: var(--muted);
    font-size: 16px;
}

.detail-meta {
    color: var(--ink);
    font-size: var(--text-meta);
}

.detail-summary-divider {
    height: 1px;
    margin: 18px 0 20px;
    background: var(--blue);
    opacity: 0.55;
}

.readable-content {
    width: min(82ch, 100%);
}

.detail-body {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    color: var(--ink);
    font-size: var(--text-body);
    line-height: var(--line-body);
    overflow-wrap: anywhere;
}

.detail-body p {
    margin: 8px 0 0;
    white-space: pre-line;
}

.rich-editor-field {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.rich-editor-label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.source-draft-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: end;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(31, 40, 42, 0.1);
}

.source-draft-status {
    grid-column: 1 / -1;
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}

.rich-editor-field > textarea[data-rich-editor] {
    width: 100%;
    min-height: 280px;
    resize: vertical;
}

.rich-editor-field .tox-tinymce {
    border: 1px solid #ccd4df;
    border-radius: 8px;
}

.rich-editor-field .tox .tox-editor-header {
    box-shadow: none;
}

.rich-editor-meta,
.editor-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.rich-editor-meta {
    color: var(--muted);
    font-size: 12px;
}

.rich-editor-preview {
    padding: 0;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.rich-editor-preview summary {
    padding: 10px 12px;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.rich-editor-preview iframe {
    display: block;
    width: 100%;
    min-height: 260px;
    border: 0;
    border-top: 1px solid rgba(31, 40, 42, 0.1);
    background: #ffffff;
}

.editor-form-actions {
    justify-content: flex-end;
}

.rich-listing-content {
    max-width: 100%;
    color: var(--ink);
    font-size: var(--text-body);
    line-height: var(--line-body);
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.rich-listing-content > :first-child {
    margin-top: 0;
}

.rich-listing-content > :last-child {
    margin-bottom: 0;
}

.rich-listing-content p,
.rich-listing-content ul,
.rich-listing-content ol,
.rich-listing-content blockquote,
.rich-listing-content table {
    margin: 12px 0;
}

.rich-listing-content h2,
.rich-listing-content h3,
.rich-listing-content h4 {
    margin: 22px 0 8px;
    color: var(--ink);
    line-height: 1.3;
}

.rich-listing-content h2 { font-size: 21px; }
.rich-listing-content h3 { font-size: 18px; }
.rich-listing-content h4 { font-size: 16px; }

.rich-listing-content ul,
.rich-listing-content ol {
    padding-left: 24px;
}

.rich-listing-content ul { list-style: disc; }
.rich-listing-content ol { list-style: decimal; }

.rich-listing-content a {
    color: var(--rom-link, var(--blue));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-listing-content blockquote {
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--green);
    color: var(--muted);
}

.rich-listing-content hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid rgba(31, 40, 42, 0.12);
}

.rich-listing-content table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

.rich-listing-content th,
.rich-listing-content td {
    padding: 9px 10px;
    border: 1px solid #dce2e8;
    text-align: left;
    vertical-align: top;
}

.rich-listing-content th {
    background: #f3f6fa;
    font-weight: 800;
}

.moderation-rich-preview {
    max-height: 220px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #ffffff;
    overflow: auto;
}

.detail-actions {
    margin-top: 18px;
}

.tracker-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(31, 40, 42, 0.08);
}

.tracker-row strong,
.tracker-row span {
    display: block;
}

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

.tracker-row a {
    color: var(--ink);
    text-decoration: none;
}

.tracker-row a:hover,
.tracker-row a:focus {
    color: var(--blue);
    text-decoration: underline;
}

.tracker-row-form {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(130px, 0.7fr) minmax(160px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.tracker-row-form select,
.tracker-row-form input {
    min-height: 36px;
}

.facet-summary {
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--muted);
    font-size: 13px;
}

.facet-summary strong {
    color: var(--ink);
}

.single-share {
    display: grid;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 18px;
    padding-inline: 0;
    padding-bottom: 18px;
}

.single-share strong {
    font-size: 15px;
}

.single-share-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, 44px);
    grid-auto-flow: row;
    gap: var(--share-gap);
    align-items: center;
    justify-content: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.single-share-item {
    display: inline-grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(25, 93, 122, 0.18);
    border-radius: 999px;
    background: #eef5f6;
    color: var(--blue);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.single-share-links svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.single-share-item:hover,
.single-share-item:focus-visible {
    border-color: rgba(25, 93, 122, 0.34);
    background: #e1eef2;
    text-decoration: none;
}

@media (max-width: 1120px) {
    :root {
        --share-gap: 8px;
    }
}

@media (max-width: 720px) {
    :root {
        --share-gap: 6px;
    }
}

.single-share-links .copied {
    border-color: rgba(23, 107, 91, 0.38);
    background: #e8f5ef;
    color: var(--green);
}

.single-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(31, 40, 42, 0.08);
}

.single-fact-grid div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.single-fact-grid span,
.single-fact-grid strong {
    display: block;
}

.single-fact-grid span {
    color: var(--muted);
    font-size: 12px;
}

.single-fact-grid strong {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
}

.fact-list {
    display: grid;
    gap: 10px;
}

.fact-list div {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(31, 40, 42, 0.08);
}

.fact-list span,
.fact-list strong {
    display: block;
}

.fact-list span {
    color: var(--muted);
    font-size: 12px;
}

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

.submission-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfaf6;
}

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

.submission-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.submission-title-row strong,
.submission-title-row span {
    display: block;
}

.submission-title-row span {
    color: var(--muted);
    font-size: 13px;
}

.quality-score {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e6f1ee;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 820;
    white-space: nowrap;
}

.submission-main p {
    color: var(--muted);
}

.flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.flag-row span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f8edcc;
    color: #765412;
    font-size: 12px;
    font-weight: 760;
}

.submission-actions {
    display: grid;
    gap: 10px;
    align-content: start;
}

.related-listings-section {
    width: 100%;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(31, 40, 42, 0.1);
}

.related-listings-heading {
    margin-bottom: 14px;
}

.related-listings-heading h2 {
    margin: 2px 0 0;
    color: var(--blue);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.2;
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.compact-opportunity-list > a,
.saved-row {
    padding: 12px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfaf6;
}

.related-card {
    --related-title-size: calc(var(--text-listing-title) - 4px);
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e8ecf4;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 33, 79, 0.04);
    overflow-wrap: anywhere;
}

.compact-opportunity-list > a {
    display: grid;
    gap: 4px;
    color: var(--ink);
    text-decoration: none;
}

.related-card a {
    text-decoration: none;
}

.related-card-body {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.related-card-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.related-card-title {
    margin: 0;
    color: var(--blue);
    font-family: var(--font-heading);
    font-size: var(--related-title-size);
    line-height: 1.24;
    font-weight: var(--weight-listing-title);
}

.related-title-link {
    color: var(--blue) !important;
}

.related-title-link:hover,
.related-title-link:focus {
    text-decoration: underline;
}

.related-card-meta {
    display: grid;
    align-items: start;
    gap: 3px;
    color: #5f6675;
    font-size: var(--text-meta);
    line-height: 1.5;
}

.related-card-meta .opportunity-sep {
    display: none;
}

.related-card-excerpt {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--text-meta);
    line-height: var(--line-body);
}

.related-field-pills {
    gap: 6px;
    margin-top: 0;
}

.related-field-pills a {
    padding: 5px 7px;
    font-size: 11px;
}

.related-card-media {
    display: none;
    min-height: 78px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(23, 107, 91, 0.9), rgba(25, 93, 122, 0.86)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 8px, rgba(255, 255, 255, 0.04) 8px 16px);
    color: #ffffff;
    overflow: hidden;
    text-decoration: none;
}

.related-card-media span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.related-card.layout-preset-magazine,
.related-card.layout-preset-blog_list,
.related-card.layout-preset-scholarship_portal {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: stretch;
}

.related-card.layout-preset-magazine .related-card-media,
.related-card.layout-preset-blog_list .related-card-media,
.related-card.layout-preset-scholarship_portal .related-card-media,
.related-card.layout-preset-image_heavy .related-card-media {
    display: flex;
}

.related-card.layout-preset-magazine .related-card-media,
.related-card.layout-preset-blog_list .related-card-media,
.related-card.layout-preset-scholarship_portal .related-card-media {
    min-height: 100%;
}

.related-card.layout-preset-image_heavy {
    grid-template-columns: 1fr;
}

.related-card.layout-preset-image_heavy .related-card-media {
    min-height: 128px;
}

.related-card.layout-preset-compact_list {
    gap: 8px;
    padding: 10px 12px;
    box-shadow: none;
}

.related-card.layout-preset-compact_list .related-card-title {
    font-size: calc(var(--related-title-size) - 2px);
}

.related-card.layout-preset-compact_list .related-card-chip-row,
.related-card.layout-preset-compact_list .related-field-pills {
    display: none;
}

.related-card.layout-preset-minimal_text {
    padding: 10px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.related-card.layout-preset-minimal_text .related-card-chip-row,
.related-card.layout-preset-minimal_text .related-field-pills {
    display: none;
}

.related-card.layout-preset-directory_list {
    padding: 12px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.related-card.layout-preset-table_list {
    padding: 12px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.related-card.layout-preset-nonprofit {
    position: relative;
    padding-left: 18px;
    border-color: rgba(23, 107, 91, 0.18);
    background: #fbfcfb;
    box-shadow: none;
}

.related-card.layout-preset-nonprofit::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: var(--green);
}

.related-card.layout-preset-scholarship_portal {
    border-color: rgba(245, 142, 22, 0.22);
    background: #fffdfa;
}

.related-card.layout-preset-scholarship_portal .related-card-media {
    background:
        linear-gradient(135deg, rgba(245, 142, 22, 0.92), rgba(25, 93, 122, 0.9)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 8px, rgba(255, 255, 255, 0.02) 8px 16px);
}

.compact-opportunity-list span {
    color: var(--muted);
    font-size: 13px;
}

.related-card-media span {
    color: #ffffff;
}

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

.preference-grid > div {
    max-height: 330px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfaf6;
}

.preference-grid strong {
    display: block;
    margin-bottom: 8px;
}

.profile-toggle {
    align-self: end;
}

.saved-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.saved-row a {
    color: var(--ink);
    text-decoration: none;
}

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.mapping-table {
    display: grid;
    gap: 8px;
}

.mapping-head,
.mapping-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1fr) minmax(120px, 0.5fr);
    gap: 10px;
    align-items: center;
}

.mapping-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.mapping-row {
    padding: 10px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfcfb;
}

.mapping-row strong,
.mapping-row small {
    display: block;
}

.mapping-row small {
    color: var(--muted);
    font-size: 12px;
}

.email-preview {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-top: 5px solid var(--email-accent, var(--green));
    border-radius: 8px;
    background: #fbfaf6;
}

.email-preview > strong {
    color: var(--email-accent, var(--green));
    font-size: 18px;
}

.email-preview p,
.email-preview small {
    margin: 0;
    color: var(--muted);
}

.email-preview-item {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.email-preview-item span {
    color: var(--copper);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.email-preview-item h3 {
    margin: 0;
    font-size: 17px;
}

.email-preview-item a {
    width: fit-content;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--email-accent, var(--green));
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
}

.moderation-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(31, 40, 42, 0.1);
    border-radius: 8px;
    background: #fbfaf6;
}

.organization-public-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: clamp(18px, 4vw, 44px) 0 clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--line);
}

.organization-public-identity {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 28px);
}

.organization-public-logo {
    display: grid;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--rom-surface, #ffffff);
    color: var(--rom-link, var(--green-dark));
    font-size: 24px;
    font-weight: 800;
}

.organization-public-logo img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.organization-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.organization-name-line h1 {
    margin: 0;
}

.organization-verified-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--rom-link, #176b5b) 26%, transparent);
    border-radius: 999px;
    color: var(--rom-link, #176b5b);
    font-size: 12px;
    font-weight: 700;
}

.organization-public-identity p {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--muted);
}

.organization-public-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px;
}

.organization-public-meta a {
    color: var(--rom-link, var(--link-color));
    text-decoration: none;
}

.organization-listing-band {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding-top: clamp(20px, 3vw, 32px);
    background: transparent;
}

.organization-listing-heading,
.organization-settings-heading,
.organization-domain-summary,
.organization-overview-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.organization-listing-heading {
    margin-bottom: 14px;
}

.organization-listing-heading h2,
.organization-settings-heading h2 {
    margin: 0;
}

.organization-settings {
    width: min(100%, 940px);
}

.organization-settings-heading {
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.organization-settings-heading p,
.organization-form-title span,
.organization-public-url,
.organization-plan-note {
    color: var(--muted);
    font-size: 13px;
}

.organization-settings-heading p {
    margin: 5px 0 0;
}

.organization-settings-form,
.organization-domain-section {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.organization-settings-form:last-child,
.organization-domain-section:last-child {
    border-bottom: 0;
}

.organization-form-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.organization-logo-editor {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.organization-logo-preview {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--green-dark);
    font-size: 24px;
    font-weight: 800;
}

.organization-logo-preview img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

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

.organization-logo-fields .toggle-line {
    grid-column: 1 / -1;
}

.organization-color-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(88px, 1fr));
    gap: 10px;
}

.color-field {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.color-field input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
}

.organization-status-line {
    margin-bottom: 8px;
}

.organization-public-url {
    display: inline-block;
    max-width: min(680px, 70vw);
    margin-top: 6px;
    overflow: hidden;
    color: var(--link-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subdomain-field {
    display: flex;
    align-items: stretch;
}

.subdomain-field input {
    min-width: 0;
    border-radius: 6px 0 0 6px;
}

.subdomain-field span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #f4f6f5;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.organization-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.organization-settings .toggle-line {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 14px;
}

.organization-settings .toggle-line input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0;
    accent-color: var(--green);
}

.organization-advanced-settings,
.organization-dns-details {
    border: 0;
}

.organization-advanced-settings > summary,
.organization-dns-details > summary {
    width: fit-content;
    cursor: pointer;
    color: var(--link-color);
    font-size: 13px;
    font-weight: 700;
}

.compact-form {
    margin-top: 14px;
}

.organization-domain-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin: 14px 0;
}

.organization-domain-list {
    display: grid;
    gap: 0;
}

.organization-domain-row {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.organization-domain-summary > div:first-child {
    display: grid;
    gap: 3px;
}

.organization-domain-summary span {
    color: var(--muted);
    font-size: 12px;
}

.organization-dns-details {
    margin-top: 12px;
}

.organization-dns-details .dns-record {
    margin-top: 8px;
}

.organization-overview-status {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.organization-overview-status > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.organization-overview-status span {
    color: var(--muted);
    font-size: 13px;
}

.board-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.board-tab-row a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(31, 40, 42, 0.12);
    border-radius: 8px;
    background: #fbfaf6;
    color: var(--ink);
    font-size: 13px;
    font-weight: 780;
    text-decoration: none;
}

.board-tab-row a.active,
.board-tab-row a:hover {
    border-color: rgba(23, 107, 91, 0.28);
    background: #eaf4f0;
    color: var(--green-dark);
}

.seo-board-heading {
    margin: 0 0 12px;
    text-align: center;
}

.seo-board-heading h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    text-align: center;
}

.seo-board-layout {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    align-items: start;
}

[data-discovery-layout="none"],
[data-discovery-layout="topbar"] {
    grid-template-columns: minmax(0, 1fr);
}

[data-discovery-layout="none"] .marketplace-search-row,
[data-discovery-layout="none"] .marketplace-results,
[data-discovery-layout="topbar"] .marketplace-search-row,
[data-discovery-layout="topbar"] .marketplace-filter-column,
[data-discovery-layout="topbar"] .marketplace-results {
    grid-column: 1;
}

[data-discovery-layout="topbar"] .marketplace-filter-column {
    position: static;
    width: 100%;
}

[data-discovery-layout="topbar"] .mobile-filter-panel {
    display: grid;
    gap: 8px;
}

[data-discovery-layout="topbar"] .marketplace-filter-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 18px;
}

[data-discovery-layout="topbar"] .marketplace-filter-accordion[open] {
    grid-column: span 2;
}

[data-discovery-layout="topbar"] .filter-heading h2 {
    font-size: 14px;
}

.discovery-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 28px;
    align-items: start;
}

.discovery-studio-editor,
.discovery-control-section,
.discovery-control-list {
    display: grid;
    gap: 14px;
}

.discovery-layout-setting {
    max-width: 360px;
}

.discovery-layout-setting small,
.discovery-section-heading span,
.discovery-control-state small,
.organization-discovery-editor > small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.discovery-control-section {
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.discovery-section-heading h3 {
    margin: 0 0 2px;
    font-size: 18px;
}

.discovery-control-list {
    gap: 0;
}

.discovery-control-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) minmax(125px, .8fr) 62px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(31, 40, 42, .09);
}

.discovery-control-row .field {
    margin: 0;
}

.discovery-control-row input,
.discovery-control-row select {
    min-height: 38px;
}

.discovery-control-label input {
    font-size: 15px;
}

.discovery-control-mode select {
    font-size: 14px;
}

.discovery-control-order input {
    text-align: center;
}

.discovery-control-state {
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
    gap: 1px;
    padding: 0 2px 6px;
}

.discovery-control-state strong {
    color: var(--muted);
    font-size: 12px;
}

.discovery-control-state.is-visible strong {
    color: var(--green-dark);
}

.discovery-preview {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.discovery-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.discovery-preview-toolbar {
    display: grid;
    gap: 8px;
}

.discovery-preview-devices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f4f6f8;
}

.discovery-preview-devices button {
    min-height: 30px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.discovery-preview-devices button.active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(31, 40, 42, .12);
}

.discovery-preview-mobile-filter {
    display: none;
}

.discovery-preview[data-preview-device="mobile"] {
    position: static;
    width: min(100%, 320px);
    margin-inline: auto;
}

.discovery-preview[data-preview-device="mobile"] .discovery-preview-mobile-filter {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

.discovery-preview[data-preview-device="mobile"] .discovery-preview-mobile-filter b {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: 10px;
}

.discovery-preview[data-preview-device="mobile"] .discovery-preview-body {
    grid-template-columns: 1fr;
}

.discovery-preview[data-preview-device="mobile"] .discovery-preview-filters {
    display: none;
}

.discovery-preview-heading span {
    color: var(--muted);
    font-size: 12px;
}

.discovery-preview-search {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border: 1px solid #cbd3dd;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
}

.discovery-preview-search .portal-icon {
    width: 16px;
    height: 16px;
}

.discovery-preview-tabs {
    display: flex;
    gap: 12px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.discovery-preview-tabs span {
    padding: 5px 0;
    color: var(--muted);
    font-size: 11px;
}

.discovery-preview-tabs span.active {
    border-bottom: 2px solid var(--brand-blue);
    color: var(--ink);
}

.discovery-preview-body {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
}

.discovery-preview-body.discovery-preview-topbar,
.discovery-preview-body.discovery-preview-none {
    grid-template-columns: 1fr;
}

.discovery-preview-filters,
.discovery-preview-results {
    display: grid;
    align-content: start;
    gap: 7px;
}

.discovery-preview-filters span {
    display: flex;
    gap: 5px;
    color: var(--ink);
    font-size: 10px;
}

.discovery-preview-filters b {
    color: var(--brand-orange);
}

.discovery-preview-results > span {
    display: grid;
    gap: 6px;
    min-height: 62px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.discovery-preview-results b,
.discovery-preview-results i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #d7dde4;
}

.discovery-preview-results b { width: 72%; background: #98a6b5; }
.discovery-preview-results i { width: 54%; }
.discovery-preview-results i:last-child { width: 38%; }

.organization-discovery-editor,
.organization-discovery-list {
    display: grid;
    gap: 10px;
}

.organization-discovery-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, .65fr);
    gap: 10px;
}

@media (max-width: 1060px) {
    .discovery-studio {
        grid-template-columns: 1fr;
    }

    .discovery-preview {
        position: static;
    }
}

@media (max-width: 820px) {
    [data-discovery-layout="topbar"] .mobile-filter-panel {
        display: none;
    }

    [data-discovery-layout="topbar"] .mobile-filter-panel.is-open {
        display: grid;
    }

    [data-discovery-layout="topbar"] .marketplace-filter-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discovery-control-row {
        grid-template-columns: minmax(0, 1fr) minmax(130px, .8fr) 64px;
    }

    .discovery-control-state {
        grid-column: 1 / -1;
        padding: 0 2px 6px;
    }
}

@media (max-width: 620px) {
    .discovery-control-row,
    .organization-discovery-row {
        grid-template-columns: minmax(0, 1fr) 132px;
    }

    .discovery-control-order {
        display: none;
    }

    .discovery-control-state {
        grid-column: 1 / -1;
    }
}

a.marketplace-badge {
    text-decoration: none;
}

a.marketplace-badge:hover,
a.marketplace-badge:focus {
    text-decoration: underline;
}

.listing-media-fields {
    min-width: 0;
    margin: 4px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.listing-media-fields legend {
    padding: 0 6px;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
}

.listing-media-fields .field-help {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
}

.listing-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.listing-media-field {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(29, 37, 40, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.listing-media-field h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.listing-media-preview {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed rgba(29, 37, 40, 0.22);
    border-radius: 6px;
    background: #f6f8f7;
    color: var(--muted);
    font-size: 13px;
}

.listing-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-media-preview.is-logo img {
    padding: 16px;
    background: #ffffff;
    object-fit: contain;
}

.listing-media-fields.is-compact .listing-media-grid {
    grid-template-columns: 1fr;
}

.inventory-media-editor {
    margin-top: 8px;
}

.inventory-media-editor > summary {
    width: fit-content;
    cursor: pointer;
    color: var(--link-color);
    font-size: 12px;
    font-weight: 700;
}

.inventory-media-editor form {
    width: min(560px, calc(100vw - 64px));
    margin-top: 10px;
}

@media (max-width: 1120px) {
    :root {
        --page-gutter: 22px;
    }

    h1 { font-size: var(--text-h1-tablet); }
    h2 { font-size: var(--text-h2-tablet); }
    h3 { font-size: var(--text-h3-tablet); }
    h4 { font-size: var(--text-h4-tablet); }
    h5 { font-size: var(--text-h5-tablet); }
    h6 { font-size: var(--text-h6-tablet); }

    .opportunity-card {
        --card-title-size: var(--text-listing-title-tablet);
    }

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

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .board-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .work-grid.two {
        grid-template-columns: 1fr;
    }

    .studio-board-grid,
    .studio-global-layout,
    .field-control-head,
    .field-control-row,
    .mapping-head,
    .mapping-row,
    .seo-board-layout {
        grid-template-columns: 1fr;
    }

    .field-control-head,
    .mapping-head {
        display: none;
    }

    .studio-board-head,
    .studio-savebar,
    .organization-public-hero {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .studio-status-row {
        justify-content: flex-start;
    }

    .marketplace-filters,
    .marketplace-layout,
    .submission-card {
        grid-template-columns: 1fr;
    }

    .marketplace-filter-column {
        position: static;
    }

    .mobile-filter-toggle {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 9px 12px;
        border: 1px solid #ccd4df;
        border-radius: 8px;
        background: #ffffff;
        color: var(--ink);
        font-weight: 800;
        text-align: left;
    }

    .mobile-filter-toggle:hover,
    .mobile-filter-toggle:focus-visible,
    .mobile-filter-toggle[aria-expanded="true"] {
        border-color: var(--brand-blue);
        color: var(--brand-blue-dark);
    }

    .mobile-filter-toggle:focus-visible {
        outline: 3px solid rgba(6, 78, 228, 0.18);
        outline-offset: 2px;
    }

    .mobile-filter-count {
        display: inline-flex;
        min-width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        padding: 0 7px;
        border-radius: 12px;
        background: rgba(6, 78, 228, 0.1);
        color: var(--brand-blue-dark);
        font-size: 12px;
    }

    .mobile-filter-toggle-icon {
        position: relative;
        width: 14px;
        height: 14px;
        margin-left: auto;
        flex: 0 0 14px;
    }

    .mobile-filter-toggle-icon::before,
    .mobile-filter-toggle-icon::after {
        content: "";
        position: absolute;
        left: 2px;
        top: 6px;
        width: 10px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 160ms ease;
    }

    .mobile-filter-toggle-icon::after {
        transform: rotate(90deg);
    }

    .mobile-filter-toggle[aria-expanded="true"] .mobile-filter-toggle-icon::after {
        transform: rotate(0);
    }

    .mobile-filter-panel {
        display: none;
        min-width: 0;
        gap: 8px;
    }

    .mobile-filter-panel.is-open {
        display: grid;
    }

    .mobile-filter-panel .filter-heading {
        padding: 4px 2px 0;
    }

    .mobile-filter-panel .marketplace-filter-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px;
        min-width: 0;
    }

    .mobile-filter-panel .marketplace-filter-accordion {
        min-width: 0;
    }

    .mobile-filter-panel .marketplace-filter-accordion[open] {
        grid-column: 1 / -1;
    }

    .mobile-filter-panel .filter-accordion-panel,
    .mobile-filter-panel .field,
    .mobile-filter-panel input,
    .mobile-filter-panel select {
        min-width: 0;
        max-width: 100%;
    }

    .admin-tabs {
        position: static;
        padding-top: 0;
    }

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

}

@media (max-width: 720px) {
    :root {
        --page-gutter: clamp(14px, 4vw, 16px);
    }

    h1 { font-size: var(--text-h1-mobile); }
    h2 { font-size: var(--text-h2-mobile); }
    h3 { font-size: var(--text-h3-mobile); }
    h4 { font-size: var(--text-h4-mobile); }
    h5 { font-size: var(--text-h5-mobile); }
    h6 { font-size: var(--text-h6-mobile); }

    .listing-media-grid {
        grid-template-columns: 1fr;
    }

    body,
    [data-board-typography],
    [data-typography-preview] {
        font-size: var(--text-body-mobile);
    }

    .opportunity-card {
        --card-title-size: var(--text-listing-title-mobile);
    }

    .opportunity-detail-shell {
        --detail-title-size: calc(var(--text-listing-title-mobile) + 5px);
    }

    .related-card {
        --related-title-size: calc(var(--text-listing-title-mobile) - 2px);
    }

    .topbar,
    .section-heading,
    .public-board-head {
        align-items: stretch;
        flex-direction: column;
    }

    .topnav,
    .inline-actions {
        justify-content: flex-start;
    }

    .topnav {
        width: 100%;
        align-items: stretch;
    }

    .topnav a,
    .topnav-menu summary,
    .topbar-form button {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
    }

    .workspace-switcher,
    .workspace-switcher select {
        width: 100%;
        max-width: none;
    }

    .topnav-menu {
        width: 100%;
    }

    .topnav-menu-panel {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
    }

    .brand {
        min-width: 0;
    }

    .brand-logo {
        width: min(210px, 70vw);
        max-height: 38px;
    }

    .brand-context {
        display: none;
    }

    .site-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .site-footer p {
        white-space: normal;
    }

    .metric-grid,
    .compact-metrics,
    .board-strip,
    .command-center-grid,
    .form-grid,
    .studio-global-layout-controls,
    .share-provider-grid,
    .color-grid,
    .moderation-edit-grid,
    .permission-row,
    .setup-grid,
    .workspace-summary {
        grid-template-columns: 1fr;
    }

    .workspace-tabs {
        flex-wrap: nowrap;
        margin: 14px 0;
        padding-bottom: 4px;
    }

    .source-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .source-row .compact-field,
    .source-row .schedule-toggle,
    .source-row .mini-link {
        grid-column: 2;
    }

    .source-row .mini-link {
        justify-content: flex-start;
        padding: 0 10px;
    }

    .run-row,
    .log-row,
    .endpoint-row {
        grid-template-columns: 1fr;
    }

    .run-counts {
        justify-items: start;
    }

    .endpoint-actions {
        justify-items: start;
    }

    .copy-row {
        grid-template-columns: 1fr;
    }

    .source-draft-tool {
        grid-template-columns: 1fr;
    }

    .source-draft-status {
        grid-column: auto;
    }

    .custom-field-builder-head,
    .custom-field-row {
        align-items: stretch;
        flex-direction: column;
    }

    .custom-field-row .field,
    .custom-field-row .custom-field-options {
        flex-basis: auto;
        width: 100%;
    }

    .custom-field-remove {
        align-self: flex-end;
    }

    .board-search {
        grid-template-columns: 1fr;
    }

    .listing-top-search {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .listing-top-actions {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .listing-search-submit {
        min-width: 64px;
        flex: 1 1 72px;
    }

    .listing-view-controls {
        width: auto;
        min-width: 0;
        flex: 0 1 auto;
        justify-content: flex-start;
    }

    .board-selector-wrap {
        flex: 0 1 auto;
        max-width: calc(100% - 96px);
    }

    .marketplace-result-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-listing p,
    .listing-actions {
        padding-left: 14px;
    }

    .marketplace-hero,
    .opportunity-card,
    .saved-row {
        grid-template-columns: 1fr;
    }

    .marketplace-hero {
        flex-direction: column;
    }

    .opportunity-list.layout-preset-magazine,
    .opportunity-list.layout-preset-image_heavy,
    .opportunity-list.layout-preset-scholarship_portal,
    .opportunity-card.layout-preset-directory_list {
        grid-template-columns: 1fr;
    }

    .opportunity-card.layout-preset-magazine,
    .opportunity-card.layout-preset-blog_list,
    .opportunity-card.layout-preset-scholarship_portal {
        grid-template-columns: 1fr;
    }

    .opportunity-card.layout-preset-magazine .opportunity-card-media,
    .opportunity-card.layout-preset-blog_list .opportunity-card-media,
    .opportunity-card.layout-preset-scholarship_portal .opportunity-card-media {
        min-height: 132px;
        margin: -20px -20px 16px;
        border-radius: 8px 8px 0 0;
    }

    .preference-grid,
    .related-grid,
    .related-grid.layout-columns-2,
    .tracker-row,
    .tracker-row-form,
    .single-fact-grid {
        grid-template-columns: 1fr;
    }

    .related-card.layout-preset-magazine,
    .related-card.layout-preset-blog_list,
    .related-card.layout-preset-scholarship_portal {
        grid-template-columns: 1fr;
    }

    .related-card.layout-preset-magazine .related-card-media,
    .related-card.layout-preset-blog_list .related-card-media,
    .related-card.layout-preset-scholarship_portal .related-card-media {
        min-height: 116px;
    }

    .related-card-meta {
        display: grid;
        gap: 3px;
    }

    .opportunity-card-meta {
        display: grid;
        gap: 4px;
    }

    .opportunity-sep {
        display: none;
    }

    .opportunity-list.layout-preset-table_list > .listing-table-header,
    .related-grid.layout-preset-table_list > .listing-table-header {
        display: none;
    }

    .opportunity-card.layout-preset-table_list {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 14px;
    }

    .listing-table-cell {
        display: grid;
        grid-template-columns: minmax(86px, 0.42fr) minmax(0, 1fr);
        gap: 10px;
        padding: 0;
    }

    .listing-table-cell::before {
        content: attr(data-label);
        color: #46516a;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
    }

    .listing-table-primary {
        display: block;
        padding-bottom: 5px;
    }

    .listing-table-primary::before {
        display: none;
    }

    .detail-main h1 {
        font-size: var(--detail-title-size);
    }
}

@media (max-width: 420px) {
    .listing-top-actions,
    .listing-view-controls,
    .listing-layout-buttons {
        gap: 6px;
    }

    .listing-search-submit {
        padding-right: 11px;
        padding-left: 11px;
        font-size: 15px;
    }

    .top-board-select {
        padding-right: 28px;
        padding-left: 9px;
        font-size: 15px;
        text-overflow: ellipsis;
    }

    .listing-layout-button {
        width: 40px;
        flex-basis: 40px;
    }

    .board-selector-wrap {
        max-width: calc(100% - 86px);
    }
}

@media (max-width: 1120px) {
    body.mobile-menu-open,
    body.account-menu-open {
        overflow: hidden;
    }

    .app-header {
        z-index: 100;
        min-height: 48px;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .app-header .brand {
        position: relative;
        z-index: 3;
        min-width: 0;
        margin-right: auto;
    }

    .app-header .brand-logo {
        width: clamp(150px, 18vw, 205px);
        max-height: 32px;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 3;
        display: inline-flex;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: var(--brand-blue);
        color: #ffffff;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible,
    .mobile-menu-toggle[aria-expanded="true"] {
        background: var(--brand-blue-dark);
        color: #ffffff;
    }

    .mobile-menu-toggle:focus-visible {
        outline: 3px solid rgba(6, 78, 228, 0.2);
        outline-offset: 2px;
    }

    .mobile-menu-icon {
        position: relative;
        display: block;
        width: 19px;
        height: 14px;
    }

    .mobile-menu-icon span {
        position: absolute;
        left: 0;
        display: block;
        width: 19px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transform-origin: center;
        transition: transform 180ms ease, opacity 140ms ease;
    }

    .header-actions {
        position: relative;
        z-index: 3;
        gap: 6px;
        margin-left: auto;
    }

    .mobile-account-action,
    .mobile-register-action {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .mobile-account-action {
        width: 38px;
        flex: 0 0 38px;
        border-radius: 50%;
        background: #edf2ff;
        color: var(--brand-blue-dark);
    }

    .mobile-account-action .portal-icon {
        width: 19px;
        height: 19px;
    }

    .mobile-register-action {
        padding: 0 12px;
        border-radius: 7px;
        background: var(--brand-orange);
        color: #111111;
        font-size: 12px;
        font-weight: 800;
    }

    .header-account-menu .account-menu-panel {
        position: fixed;
        top: calc(52px + env(safe-area-inset-top));
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100dvh - 52px - env(safe-area-inset-top));
        min-height: calc(100vh - 52px - env(safe-area-inset-top));
        max-height: none;
        min-width: 0;
        padding: 10px var(--page-gutter) max(20px, env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        box-shadow: none;
        background: #ffffff;
        overflow-y: auto;
    }

    .account-menu-close {
        display: inline-flex;
    }

    .account-context-options {
        max-height: none;
    }

    .header-notification-menu .notification-menu-panel {
        position: fixed;
        top: calc(52px + env(safe-area-inset-top));
        right: 12px;
        width: min(360px, calc(100vw - 24px));
        min-width: 0;
    }

    body.mobile-menu-open .header-account-menu,
    body.mobile-menu-open .header-notification-menu,
    body.mobile-menu-open .mobile-account-action,
    body.mobile-menu-open .mobile-register-action {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-menu-icon span:nth-child(1) { top: 0; }
    .mobile-menu-icon span:nth-child(2) { top: 6px; }
    .mobile-menu-icon span:nth-child(3) { top: 12px; }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .app-header .topnav {
        position: fixed;
        inset: 0;
        z-index: 2;
        display: flex;
        width: 100%;
        height: 100dvh;
        min-height: 100vh;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        padding: max(68px, calc(env(safe-area-inset-top) + 60px)) var(--page-gutter) max(28px, env(safe-area-inset-bottom));
        background: #ffffff;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
    }

    .app-header .topnav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }

    .app-header .topnav > a,
    .app-header .topnav > .topnav-menu > summary,
    .app-header .topnav > .topbar-form > button {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 4px;
        border-bottom: 1px solid rgba(31, 40, 42, 0.1);
        border-radius: 0;
        font-size: 18px;
    }

    .app-header .topnav > .desktop-auth-link {
        display: none;
    }

    .app-header .topnav > .topbar-form,
    .app-header .topnav > .topnav-menu,
    .app-header .topnav > .workspace-switcher,
    .app-header .topnav > .workspace-switcher select {
        width: 100%;
        max-width: none;
    }

    .app-header .topnav .topnav-menu-panel {
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 4px 0 8px 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .app-header .topnav .topnav-menu-panel a {
        min-height: 42px;
        padding: 8px 4px;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .app-header {
        gap: 7px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-header .brand-logo {
        width: 124px;
    }

    .header-actions {
        gap: 5px;
    }

    .mobile-account-action,
    .header-notification-menu > summary.notification-toggle,
    .header-account-menu > summary.account-avatar-toggle,
    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .mobile-register-action {
        min-height: 36px;
        padding: 0 9px;
        font-size: 11px;
    }

    .account-settings-heading h1 {
        font-size: 24px;
    }

    .header-notification-menu .notification-menu-panel {
        left: 10px;
        right: 10px;
        width: auto;
    }
}

@media (max-width: 350px) {
    .app-header .brand-logo {
        width: 108px;
    }

    .mobile-register-action {
        padding: 0 7px;
    }
}

@media (max-width: 560px) {
    .registration-panel {
        padding: 20px 16px;
    }

    .registration-role-grid {
        grid-template-columns: 1fr;
    }

    .registration-role-grid .account-type-option {
        min-height: 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-icon span,
    .app-header .topnav {
        transition: none;
    }
}
/* No-code board lifecycle */
.board-create-form {
    display: grid;
    gap: 20px;
}

.board-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.board-template-option {
    min-height: 86px;
    border: 1px solid var(--border, #d8dee8);
    background: #fff;
    padding: 14px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.board-template-option:has(input:checked) {
    border-color: var(--brand-primary, #0b4de8);
    box-shadow: 0 0 0 1px var(--brand-primary, #0b4de8);
}

.board-template-option input {
    margin-top: 3px;
}

.board-template-option span,
.board-template-option small {
    display: block;
}

.board-template-option small {
    margin-top: 5px;
    color: var(--muted, #64748b);
    line-height: 1.4;
}

.board-create-submit {
    justify-content: flex-end;
    margin-top: 18px;
}
/* Team and listing management */
.breakable {
    overflow-wrap: anywhere;
}

.role-guide {
    color: var(--muted, #64748b);
    font-size: 0.88rem;
}

.role-guide p {
    margin: 0 0 7px;
}

.team-member-row {
    flex-wrap: wrap;
}

.compact-metrics .metric {
    color: inherit;
    text-decoration: none;
}

.compact-metrics .metric.is-active {
    box-shadow: inset 0 -3px var(--brand-primary, #0b4de8);
}

.listing-library-toolbar,
.listing-library {
    margin-top: 18px;
}

.listing-library-search {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) minmax(150px, auto) auto;
}

.listing-bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.listing-bulk-actions > span {
    margin-left: auto;
    color: var(--muted, #64748b);
}

.management-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.management-table {
    width: 100%;
    border-collapse: collapse;
}

.management-table th,
.management-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    text-align: left;
    vertical-align: top;
}

.management-table td small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #64748b);
}

.listing-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 20px;
    align-items: start;
}

.listing-editor-aside,
.stacked-actions,
.revision-list,
.listing-origin {
    display: grid;
    gap: 12px;
}

.stacked-actions form,
.stacked-actions .button {
    width: 100%;
}

.listing-origin {
    margin: 0;
}

.listing-origin div {
    display: grid;
    gap: 3px;
}

.listing-origin dt,
.revision-list span {
    color: var(--muted, #64748b);
    font-size: 0.82rem;
}

.listing-origin dd {
    margin: 0;
}

.revision-list div {
    display: grid;
    gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.managed-listing-preview {
    max-width: 820px;
    margin: 0 auto;
}

.preview-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.preview-notice .button {
    margin-left: auto;
}

@media (max-width: 840px) {
    .listing-editor-layout {
        grid-template-columns: 1fr;
    }

    .listing-library-search {
        grid-template-columns: 1fr 1fr;
    }

    .organization-color-grid {
        grid-template-columns: repeat(3, minmax(88px, 1fr));
    }

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

@media (max-width: 560px) {
    .listing-library-search {
        grid-template-columns: 1fr;
    }

    .listing-bulk-actions {
        flex-wrap: wrap;
    }

    .organization-public-identity,
    .organization-settings-heading,
    .organization-domain-summary,
    .organization-listing-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .organization-public-logo {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .organization-logo-editor,
    .organization-logo-fields,
    .organization-domain-add,
    .organization-toggle-grid {
        grid-template-columns: 1fr;
    }

    .organization-color-grid {
        grid-template-columns: repeat(2, minmax(88px, 1fr));
    }

    .organization-logo-fields .toggle-line {
        grid-column: auto;
    }

    .subdomain-field {
        align-items: stretch;
        flex-direction: column;
    }

    .subdomain-field input,
    .subdomain-field span {
        min-height: 42px;
        border: 1px solid var(--line);
        border-radius: 6px;
    }

    .subdomain-field span {
        margin-top: 5px;
    }

    .organization-public-url {
        max-width: 88vw;
    }
}

/* Mobile form stability: text controls stay readable without disabling browser zoom. */
@media (max-width: 1120px) {
    body :is(
        form,
        fieldset,
        .field,
        .search-field,
        .listing-top-search,
        .listing-top-actions,
        .mobile-filter-panel,
        .portal-inline-form
    ) {
        min-width: 0;
        max-width: 100%;
    }

    body :is(
        input:not([type]),
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="password"],
        input[type="url"],
        input[type="tel"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="time"],
        input[type="week"],
        select,
        textarea,
        [contenteditable="true"]
    ) {
        max-width: 100%;
        font-size: 16px;
    }
}