@import url("../filament/app.css");

:root {
    color-scheme: dark;
    --af-bg: #080a0d;
    --af-panel: #101419;
    --af-panel-strong: #151b21;
    --af-border: rgba(214, 221, 230, 0.13);
    --af-text: #f3f7fb;
    --af-muted: #aab6c2;
    --af-accent: #31c6a8;
    --af-accent-strong: #77d8c7;
    --af-warm: #f3b95f;
}

html,
body {
    background: var(--af-bg);
    color: var(--af-text);
}

.fi-sidebar,
.fi-main-ctn,
.fi-topbar {
    background: var(--af-bg);
}

.fi-sidebar-nav,
.fi-section,
.fi-wi-card,
.fi-main-ctn .fi-section {
    border-color: var(--af-border);
}

.fi-sidebar-item-active {
    background: rgba(59, 130, 246, 0.16);
}

.fi-main-ctn .fi-section,
.fi-wi-card {
    background: var(--af-panel);
}

.fi-btn,
.fi-btn * {
    letter-spacing: 0;
}

.af-command-shell {
    display: flex;
    align-items: center;
}

.fi-global-search {
    width: min(22rem, 34vw);
}

.fi-global-search-field .fi-input-wrp {
    border-color: rgba(214, 221, 230, 0.12);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.045);
}

.fi-global-search-field .fi-input-wrp:focus-within {
    border-color: rgba(49, 198, 168, 0.58);
    box-shadow: 0 0 0 3px rgba(49, 198, 168, 0.12);
}

.fi-global-search-results-ctn {
    border: 1px solid rgba(226, 232, 240, 0.15);
    border-radius: 0.5rem !important;
    background: rgba(12, 17, 22, 0.98) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48) !important;
}

.fi-global-search-result-group > div {
    border-color: rgba(226, 232, 240, 0.1) !important;
    background: rgba(16, 22, 28, 0.98) !important;
}

.fi-global-search-result-group h3 {
    color: var(--af-accent-strong) !important;
    background: transparent !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
}

.fi-global-search-result {
    border-color: rgba(226, 232, 240, 0.08) !important;
}

.fi-global-search-result:hover,
.fi-global-search-result:focus-within {
    background: rgba(49, 198, 168, 0.08) !important;
}

.fi-global-search-result-link h4 {
    color: var(--af-text) !important;
    font-weight: 800;
}

.fi-global-search-result-link dl,
.fi-global-search-no-results-message {
    color: var(--af-muted) !important;
}

.af-command-trigger,
.af-command-palette__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border: 1px solid rgba(214, 221, 230, 0.12);
    border-radius: 0.5rem;
    color: var(--af-muted);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.af-command-trigger svg,
.af-command-palette__close svg {
    width: 1.15rem;
    height: 1.15rem;
}

.af-command-trigger:hover,
.af-command-palette__close:hover {
    border-color: rgba(49, 198, 168, 0.42);
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.1);
}

.af-command-palette {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: start center;
    padding: clamp(4.5rem, 12vh, 7.5rem) 1rem 1rem;
    background: rgba(3, 5, 8, 0.78);
    backdrop-filter: blur(10px);
}

.af-command-palette[x-cloak] {
    display: none !important;
}

.af-command-palette__panel {
    display: grid;
    width: min(100%, 42rem);
    max-height: min(42rem, calc(100vh - 6rem));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.16);
    border-radius: 0.5rem;
    background: rgba(12, 17, 22, 0.98);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.54);
}

.af-command-palette__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.8rem;
}

.af-command-palette__header > div {
    display: grid;
    gap: 0.15rem;
}

.af-command-palette__header span {
    color: var(--af-accent-strong);
    font-size: 0.7rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-command-palette__header h2 {
    color: var(--af-text);
    font-size: 1.15rem;
    font-weight: 850;
    line-height: 1.2;
}

.af-command-palette__close {
    width: 2.25rem;
    height: 2.25rem;
}

.af-command-palette__search {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 1rem 0.75rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.055);
}

.af-command-palette__search:focus-within {
    border-color: rgba(49, 198, 168, 0.62);
    box-shadow: 0 0 0 3px rgba(49, 198, 168, 0.13);
}

.af-command-palette__search svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: var(--af-muted);
}

.af-command-palette__search input {
    width: 100%;
    min-width: 0;
    height: 3rem;
    border: 0;
    outline: 0;
    color: var(--af-text);
    background: transparent;
    font-size: 0.92rem;
}

.af-command-palette__search input::placeholder {
    color: var(--af-muted);
}

.af-command-palette__search input::-webkit-search-cancel-button {
    display: none;
}

.af-command-palette__results {
    display: grid;
    gap: 0.25rem;
    min-height: 5rem;
    max-height: min(29rem, calc(100vh - 15rem));
    overflow-y: auto;
    padding: 0 0.65rem 0.75rem;
}

.af-command-palette__result {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--af-text);
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease;
}

.af-command-palette__result:hover,
.af-command-palette__result.is-active {
    border-color: rgba(49, 198, 168, 0.25);
    background: rgba(49, 198, 168, 0.09);
}

.af-command-palette__result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(49, 198, 168, 0.18);
    border-radius: 0.5rem;
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.07);
}

.af-command-palette__result-icon svg {
    width: 1rem;
    height: 1rem;
}

.af-command-palette__result-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.af-command-palette__result-copy strong,
.af-command-palette__result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.af-command-palette__result-copy strong {
    font-size: 0.84rem;
    font-weight: 800;
}

.af-command-palette__result-copy small,
.af-command-palette__section {
    color: var(--af-muted);
    font-size: 0.72rem;
}

.af-command-palette__section {
    padding: 0.25rem 0.4rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.4rem;
    white-space: nowrap;
}

.af-command-palette__empty {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 2rem 1rem;
    color: var(--af-muted);
    text-align: center;
}

.af-command-palette__empty svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--af-accent-strong);
}

.af-command-palette__empty strong {
    color: var(--af-text);
    font-size: 0.86rem;
}

.af-command-palette__empty span {
    font-size: 0.76rem;
}

@media (max-width: 640px) {
    .fi-global-search {
        width: min(9.5rem, 42vw);
    }

    .af-command-palette {
        padding: 4.25rem 0.75rem 0.75rem;
    }

    .af-command-palette__panel {
        max-height: calc(100vh - 5rem);
    }

    .af-command-palette__results {
        max-height: calc(100vh - 14rem);
    }

    .af-command-palette__result {
        grid-template-columns: 2.25rem minmax(0, 1fr);
    }

    .af-command-palette__section {
        display: none;
    }
}

.fi-simple-layout {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(49, 198, 168, 0.09), transparent 34%, rgba(243, 185, 95, 0.08)),
        linear-gradient(135deg, rgba(8, 10, 13, 0.98), rgba(13, 18, 24, 1)),
        var(--af-bg);
    padding: 1.5rem;
}

.fi-simple-main {
    width: min(100%, 31rem);
    max-width: 31rem;
    border: 1px solid var(--af-border);
    border-radius: 1rem;
    background: rgba(16, 20, 25, 0.94);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
}

.fi-simple-header {
    gap: 0.5rem;
}

.fi-logo {
    color: var(--af-text);
    font-weight: 800;
    letter-spacing: 0;
}

.fi-simple-header-heading {
    color: var(--af-text);
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.fi-simple-header-subheading {
    color: var(--af-muted);
}

.fi-input-wrp {
    border-color: rgba(214, 221, 230, 0.14);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.fi-input-wrp:focus-within {
    border-color: rgba(49, 198, 168, 0.72);
    box-shadow: 0 0 0 3px rgba(49, 198, 168, 0.15);
}

.fi-input,
.fi-checkbox-input {
    color: var(--af-text);
}

.fi-fo-field-wrp-label,
.fi-checkbox-input + span {
    color: var(--af-text);
}

.fi-btn-color-primary {
    background: linear-gradient(135deg, #31c6a8, #2d8fd5);
    color: #071013;
    font-weight: 800;
}

.fi-btn-color-primary:hover {
    filter: brightness(1.04);
}

.af-login-helper {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--af-border);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.045);
}

.af-login-helper__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--af-text);
}

.af-login-helper__header > div {
    display: grid;
    gap: 0.2rem;
}

.af-login-helper__eyebrow,
.af-login-helper__credentials span {
    color: var(--af-muted);
    font-size: 0.75rem;
}

.af-login-helper__credentials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.af-login-helper__credentials div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.65rem;
    background: rgba(8, 10, 13, 0.48);
}

.af-login-helper code {
    overflow-wrap: anywhere;
    color: var(--af-accent-strong);
    font-size: 0.8rem;
}

.af-login-helper__quick,
.af-login-helper__secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
    background: var(--af-warm);
    color: #181108;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.af-login-helper__secondary-action {
    grid-column: 1 / -1;
    border: 1px solid rgba(49, 198, 168, 0.4);
    background: rgba(49, 198, 168, 0.12);
    color: var(--af-accent-strong);
}

.af-login-helper__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.af-login-helper__links a {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--af-border);
    border-radius: 0.55rem;
    color: var(--af-muted);
    font-size: 0.75rem;
    text-decoration: none;
}

.af-login-helper__links a:hover,
.af-login-helper__links a.is-active {
    border-color: rgba(49, 198, 168, 0.5);
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.1);
}

@media (max-width: 640px) {
    .fi-simple-layout {
        padding: 1rem;
    }

    .fi-simple-main {
        border-radius: 0.8rem;
    }

    .af-login-helper__header {
        align-items: stretch;
        flex-direction: column;
    }

    .af-login-helper__credentials {
        grid-template-columns: 1fr;
    }
}

.fi-main {
    color: var(--af-text);
}

.fi-wi-stats-overview-stat {
    border-radius: 0.5rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    background: rgba(16, 20, 25, 0.92);
}

.af-admin-command {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(214, 221, 230, 0.12);
    border-radius: 0.5rem;
    background:
        linear-gradient(90deg, rgba(49, 198, 168, 0.08), rgba(243, 185, 95, 0.06)),
        rgba(16, 20, 25, 0.94);
}

.af-admin-command__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.af-admin-command__header p {
    margin: 0 0 0.25rem;
    color: var(--af-accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.af-admin-command__header h2 {
    margin: 0;
    color: var(--af-text);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
}

.af-admin-command__header span {
    max-width: 24rem;
    color: var(--af-muted);
    font-size: 0.88rem;
    text-align: right;
}

.af-admin-command__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.9fr);
    gap: 1rem;
}

.af-admin-command__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.af-admin-command__link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 5rem;
    padding: 0.85rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    color: var(--af-text);
    background: rgba(8, 10, 13, 0.42);
    text-decoration: none;
}

.af-admin-command__link:hover {
    border-color: rgba(49, 198, 168, 0.42);
    background: rgba(49, 198, 168, 0.08);
}

.af-admin-command__icon {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--af-accent-strong);
    flex: 0 0 auto;
}

.af-admin-command__link span {
    display: grid;
    gap: 0.25rem;
}

.af-admin-command__link strong {
    color: var(--af-text);
    font-size: 0.95rem;
}

.af-admin-command__link small {
    color: var(--af-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.af-admin-command__signals {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.af-admin-command__signals div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(214, 221, 230, 0.09);
    border-radius: 0.5rem;
    background: rgba(8, 10, 13, 0.38);
}

.af-admin-command__signals span {
    color: var(--af-muted);
    font-size: 0.78rem;
}

.af-admin-command__signals strong {
    color: var(--af-warm);
    font-size: 1rem;
}

.af-admin-command__priorities {
    display: grid;
    gap: 0.65rem;
}

.af-admin-command__priorities-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.af-admin-command__priorities-head span {
    color: var(--af-accent-strong);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.af-admin-command__priorities-head strong {
    color: var(--af-text);
    font-size: 0.92rem;
}

.af-admin-command__priority-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.af-admin-command__priority {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 5rem;
    padding: 0.8rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    color: var(--af-text);
    background: rgba(8, 10, 13, 0.38);
    text-decoration: none;
}

.af-admin-command__priority-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    height: 2.65rem;
    padding: 0 0.45rem;
    border: 1px solid rgba(49, 198, 168, 0.26);
    border-radius: 0.5rem;
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.1);
    font-size: 1rem;
    font-weight: 850;
}

.af-admin-command__priority-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.af-admin-command__priority-copy strong {
    color: var(--af-text);
    font-size: 0.9rem;
}

.af-admin-command__priority-copy small {
    color: var(--af-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.af-admin-command__priority[data-tone="warning"] .af-admin-command__priority-count {
    border-color: rgba(243, 185, 95, 0.34);
    color: var(--af-warm);
    background: rgba(243, 185, 95, 0.1);
}

.af-admin-command__priority[data-tone="danger"] .af-admin-command__priority-count {
    border-color: rgba(244, 63, 94, 0.34);
    color: #fda4af;
    background: rgba(244, 63, 94, 0.1);
}

.af-local-console {
    display: grid;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    background: rgba(8, 10, 13, 0.36);
}

.af-local-console__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.af-local-console__head > div:first-child {
    display: grid;
    gap: 0.15rem;
}

.af-local-console__head > div:first-child > span {
    color: var(--af-accent-strong);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.af-local-console__head strong {
    color: var(--af-text);
    font-size: 0.9rem;
}

.af-local-console__head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.af-local-console__head-actions small {
    color: var(--af-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.af-local-console__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(49, 198, 168, 0.26);
    border-radius: 0.5rem;
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.08);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.af-local-console__refresh svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.af-local-console__refresh:hover {
    border-color: rgba(49, 198, 168, 0.48);
    background: rgba(49, 198, 168, 0.14);
}

.af-local-console__refresh:disabled {
    cursor: wait;
    opacity: 0.7;
}

.af-local-console__refresh-icon--loading {
    animation: af-local-console-spin 700ms linear infinite;
}

@keyframes af-local-console-spin {
    to {
        transform: rotate(360deg);
    }
}

.af-local-console__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.af-local-console__check {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    min-height: 4.8rem;
    padding: 0.75rem;
    border: 1px solid rgba(214, 221, 230, 0.09);
    border-radius: 0.5rem;
    color: var(--af-text);
    background: rgba(8, 10, 13, 0.38);
    text-decoration: none;
}

.af-local-console__check span,
.af-local-console__check small {
    color: var(--af-muted);
    font-size: 0.76rem;
}

.af-local-console__check strong,
.af-local-console__check code {
    overflow-wrap: anywhere;
    color: var(--af-text);
    font-size: 0.86rem;
}

.af-local-console__check code {
    color: var(--af-accent-strong);
}

.af-local-console__profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.af-local-console__health {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.af-local-console__health span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.58rem 0.65rem;
    border: 1px solid rgba(49, 198, 168, 0.2);
    border-radius: 0.5rem;
    color: var(--af-muted);
    background: rgba(49, 198, 168, 0.08);
    font-size: 0.76rem;
}

.af-local-console__health strong {
    color: var(--af-accent-strong);
    font-size: 0.74rem;
    font-weight: 850;
}

.af-local-console__health span[data-status="failed"] {
    border-color: rgba(244, 63, 94, 0.32);
    background: rgba(244, 63, 94, 0.1);
}

.af-local-console__health span[data-status="failed"] strong {
    color: #fda4af;
}

.af-local-console__profiles a {
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    color: var(--af-muted);
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
}

.af-local-console__check:hover,
.af-local-console__profiles a:hover {
    border-color: rgba(49, 198, 168, 0.42);
    background: rgba(49, 198, 168, 0.08);
}

.af-portal-dashboard {
    display: grid;
    gap: 1rem;
}

.af-portal-page {
    display: grid;
    gap: 1rem;
}

.af-portal-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(214, 221, 230, 0.12);
    border-radius: 0.5rem;
    background:
        linear-gradient(90deg, rgba(49, 198, 168, 0.08), rgba(45, 143, 213, 0.08)),
        rgba(16, 20, 25, 0.94);
}

.af-portal-toolbar p {
    margin: 0 0 0.25rem;
    color: var(--af-accent-strong);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.af-portal-toolbar h2 {
    margin: 0;
    color: var(--af-text);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: 0;
}

.af-portal-toolbar span {
    color: var(--af-muted);
    font-size: 0.86rem;
}

.af-portal-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.af-portal-toolbar__actions a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(214, 221, 230, 0.12);
    border-radius: 0.45rem;
    color: var(--af-muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.af-portal-toolbar__actions a:hover {
    border-color: rgba(49, 198, 168, 0.45);
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.08);
}

.af-portal-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-height: 9rem;
    padding: 1.1rem;
    border: 1px solid rgba(214, 221, 230, 0.12);
    border-radius: 0.5rem;
    background:
        linear-gradient(90deg, rgba(45, 143, 213, 0.12), rgba(49, 198, 168, 0.08)),
        rgba(16, 20, 25, 0.94);
}

.af-portal-hero p,
.af-portal-panel__head span {
    margin: 0 0 0.25rem;
    color: var(--af-accent-strong);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.af-portal-hero h2,
.af-portal-panel__head h3 {
    margin: 0;
    color: var(--af-text);
    letter-spacing: 0;
}

.af-portal-hero h2 {
    font-size: 1.55rem;
    line-height: 1.15;
    font-weight: 850;
}

.af-portal-hero span,
.af-portal-panel__head a,
.af-portal-row span,
.af-portal-row small,
.af-portal-stack span,
.af-portal-metric small {
    color: var(--af-muted);
}

.af-portal-hero__status {
    display: grid;
    gap: 0.25rem;
    min-width: 8rem;
    padding: 0.75rem;
    border: 1px solid rgba(214, 221, 230, 0.11);
    border-radius: 0.5rem;
    background: rgba(8, 10, 13, 0.44);
}

.af-portal-hero__status span {
    color: var(--af-muted);
    font-size: 0.75rem;
}

.af-portal-hero__status strong {
    color: var(--af-warm);
    font-size: 1rem;
}

.af-portal-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.af-portal-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-height: 4.6rem;
    padding: 0.8rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    background: rgba(16, 20, 25, 0.92);
    text-decoration: none;
}

.af-portal-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(49, 198, 168, 0.22);
    border-radius: 0.5rem;
    background: rgba(49, 198, 168, 0.1);
    color: var(--af-accent-strong);
}

.af-portal-action__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.af-portal-action__copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.af-portal-action__copy strong {
    color: var(--af-text);
    font-size: 0.9rem;
    line-height: 1.2;
}

.af-portal-action__copy small {
    overflow-wrap: anywhere;
    color: var(--af-muted);
    font-size: 0.76rem;
    line-height: 1.3;
}

.af-portal-attention {
    display: grid;
    gap: 0.65rem;
}

.af-portal-attention__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.1rem;
}

.af-portal-attention__head > div {
    display: grid;
    gap: 0.15rem;
}

.af-portal-attention__head span {
    color: var(--af-accent-strong);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-portal-attention__head h3 {
    color: var(--af-text);
    font-size: 1rem;
    font-weight: 850;
}

.af-portal-attention__head small {
    color: var(--af-muted);
    font-size: 0.74rem;
}

.af-portal-attention__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.af-portal-attention__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    min-height: 5rem;
    padding: 0.75rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    color: var(--af-text);
    background: rgba(16, 20, 25, 0.92);
    text-decoration: none;
}

.af-portal-attention__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(49, 198, 168, 0.2);
    border-radius: 0.5rem;
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.08);
}

.af-portal-attention__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.af-portal-attention__copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.af-portal-attention__copy strong {
    font-size: 0.84rem;
    line-height: 1.25;
}

.af-portal-attention__copy small {
    color: var(--af-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.af-portal-attention__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem;
    border: 1px solid rgba(49, 198, 168, 0.22);
    border-radius: 0.5rem;
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.08);
    font-size: 0.88rem;
}

.af-portal-attention__item[data-tone="danger"] .af-portal-attention__icon,
.af-portal-attention__item[data-tone="danger"] .af-portal-attention__value {
    border-color: rgba(244, 63, 94, 0.3);
    color: #fda4af;
    background: rgba(244, 63, 94, 0.1);
}

.af-portal-attention__item[data-tone="warning"] .af-portal-attention__icon,
.af-portal-attention__item[data-tone="warning"] .af-portal-attention__value {
    border-color: rgba(243, 185, 95, 0.32);
    color: var(--af-warm);
    background: rgba(243, 185, 95, 0.1);
}

.af-portal-attention__item[data-tone="info"] .af-portal-attention__icon,
.af-portal-attention__item[data-tone="info"] .af-portal-attention__value {
    border-color: rgba(90, 167, 255, 0.3);
    color: #93c5fd;
    background: rgba(90, 167, 255, 0.1);
}

.af-portal-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.af-portal-metric {
    display: grid;
    gap: 0.35rem;
    min-height: 8.4rem;
    padding: 0.9rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    background: rgba(16, 20, 25, 0.92);
}

.af-portal-metric svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--af-accent-strong);
}

.af-portal-metric span {
    color: var(--af-muted);
    font-size: 0.78rem;
}

.af-portal-metric strong {
    color: var(--af-text);
    font-size: 1.22rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.af-portal-metric small {
    font-size: 0.76rem;
    line-height: 1.35;
}

.af-portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.af-portal-panel {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 0.5rem;
    background: rgba(16, 20, 25, 0.92);
}

.af-portal-panel--wide {
    grid-column: 1 / -1;
}

.af-portal-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.af-portal-panel__head h3 {
    font-size: 1rem;
    font-weight: 800;
}

.af-portal-panel__head a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(214, 221, 230, 0.12);
    border-radius: 0.45rem;
    font-size: 0.76rem;
    text-decoration: none;
    white-space: nowrap;
}

.af-portal-panel__head a:hover {
    border-color: rgba(49, 198, 168, 0.45);
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.08);
}

.af-portal-list,
.af-portal-stack {
    display: grid;
    gap: 0.6rem;
}

.af-portal-row,
.af-portal-stack div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.35fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.3rem;
    padding: 0.75rem;
    border: 1px solid rgba(214, 221, 230, 0.08);
    border-radius: 0.5rem;
    background: rgba(8, 10, 13, 0.38);
}

.af-portal-row--compact,
.af-portal-stack div {
    grid-template-columns: minmax(0, 1fr) auto;
}

.af-portal-row strong,
.af-portal-stack strong {
    display: block;
    color: var(--af-text);
    font-size: 0.92rem;
    line-height: 1.25;
}

.af-portal-row span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    line-height: 1.35;
}

.af-portal-row small {
    font-size: 0.76rem;
    text-align: right;
}

.af-portal-progress {
    width: 100%;
    height: 0.48rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(214, 221, 230, 0.12);
}

.af-portal-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--af-accent), #2d8fd5);
}

.af-portal-stack div {
    min-height: 3.75rem;
}

.af-portal-stack span {
    font-size: 0.78rem;
}

.af-portal-stack strong {
    color: var(--af-warm);
    text-align: right;
}

.af-portal-empty {
    padding: 0.85rem;
    border: 1px dashed rgba(214, 221, 230, 0.16);
    border-radius: 0.5rem;
    color: var(--af-muted);
    font-size: 0.86rem;
}

.af-portal-empty--action {
    display: grid;
    gap: 0.45rem;
    border-style: solid;
    background: rgba(8, 10, 13, 0.34);
}

.af-portal-empty--action span {
    color: var(--af-accent-strong);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.af-portal-empty--action strong {
    color: var(--af-text);
    font-size: 0.95rem;
    line-height: 1.25;
}

.af-portal-empty--action small {
    color: var(--af-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.af-portal-empty--action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 2rem;
    margin-top: 0.15rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(49, 198, 168, 0.28);
    border-radius: 0.45rem;
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.08);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}

.af-portal-empty--action a:hover {
    border-color: rgba(49, 198, 168, 0.52);
    background: rgba(49, 198, 168, 0.13);
}

.af-portal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.65rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(214, 221, 230, 0.1);
    border-radius: 999px;
    color: var(--af-muted);
    background: rgba(214, 221, 230, 0.06);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.af-portal-badge[data-tone="success"] {
    border-color: rgba(49, 198, 168, 0.3);
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.09);
}

.af-portal-badge[data-tone="warning"] {
    border-color: rgba(243, 185, 95, 0.34);
    color: var(--af-warm);
    background: rgba(243, 185, 95, 0.09);
}

.af-portal-badge[data-tone="danger"] {
    border-color: rgba(244, 63, 94, 0.3);
    color: #fda4af;
    background: rgba(244, 63, 94, 0.09);
}

.af-portal-kv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.af-portal-kv {
    min-height: 4.25rem;
    padding: 0.75rem;
    border: 1px solid rgba(214, 221, 230, 0.08);
    border-radius: 0.5rem;
    background: rgba(8, 10, 13, 0.34);
}

.af-portal-kv span {
    display: block;
    color: var(--af-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.af-portal-kv strong {
    display: block;
    margin-top: 0.3rem;
    color: var(--af-text);
    font-size: 0.9rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.af-portal-thread {
    display: grid;
    gap: 0.6rem;
}

.af-portal-message {
    padding: 0.75rem;
    border: 1px solid rgba(214, 221, 230, 0.08);
    border-radius: 0.5rem;
    background: rgba(8, 10, 13, 0.34);
}

.af-portal-message__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.af-portal-message__head strong {
    color: var(--af-text);
    font-size: 0.85rem;
}

.af-portal-message__head span,
.af-portal-message p {
    color: var(--af-muted);
    font-size: 0.78rem;
}

.af-portal-message p {
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .af-admin-command__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .af-admin-command__header span {
        max-width: none;
        text-align: left;
    }

    .af-admin-command__grid {
        grid-template-columns: 1fr;
    }

    .af-admin-command__signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-admin-command__priority-list {
        grid-template-columns: 1fr;
    }

    .af-local-console__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .af-local-console__head-actions {
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .af-local-console__refresh {
        width: 100%;
    }

    .af-local-console__grid {
        grid-template-columns: 1fr;
    }

    .af-local-console__health {
        grid-template-columns: 1fr;
    }

    .af-portal-hero {
        align-items: stretch;
        flex-direction: column;
        min-height: auto;
    }

    .af-portal-actions,
    .af-portal-attention__grid,
    .af-portal-metrics,
    .af-portal-grid,
    .af-portal-kv-grid {
        grid-template-columns: 1fr;
    }

    .af-portal-row,
    .af-portal-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        flex-direction: column;
    }

    .af-portal-attention__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .af-portal-row small,
    .af-portal-stack strong {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .af-admin-command__links,
    .af-admin-command__signals {
        grid-template-columns: 1fr;
    }

    .af-portal-panel__head {
        align-items: stretch;
        flex-direction: column;
    }

    .af-portal-toolbar__actions {
        justify-content: flex-start;
    }
}

/* Premium visual refresh for the marketing agency control system. */
:root {
    --af-bg: #070b10;
    --af-bg-soft: #0b1118;
    --af-panel: #0f151d;
    --af-panel-strong: #141c25;
    --af-panel-raised: #182330;
    --af-border: rgba(226, 232, 240, 0.14);
    --af-border-strong: rgba(226, 232, 240, 0.22);
    --af-text: #f7fafc;
    --af-muted: #a8b5c3;
    --af-muted-strong: #c8d3df;
    --af-accent: #22c7a9;
    --af-accent-strong: #8ee5d3;
    --af-blue: #5aa7ff;
    --af-blue-soft: rgba(90, 167, 255, 0.16);
    --af-warm: #f4be63;
    --af-warm-soft: rgba(244, 190, 99, 0.15);
    --af-danger-soft: rgba(244, 63, 94, 0.14);
    --af-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
    --af-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.2);
}

html.fi,
body.fi-body {
    min-height: 100%;
    background:
        linear-gradient(180deg, rgba(34, 199, 169, 0.08) 0%, rgba(7, 11, 16, 0) 18rem),
        linear-gradient(120deg, rgba(90, 167, 255, 0.07), rgba(244, 190, 99, 0.04) 44%, rgba(7, 11, 16, 0) 78%),
        var(--af-bg) !important;
    color: var(--af-text) !important;
}

body.fi-body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.fi-layout,
.fi-main-ctn {
    background: transparent !important;
    color: var(--af-text) !important;
}

.fi-main {
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
}

.fi-page {
    display: grid;
    gap: 1.25rem;
}

.fi-header-heading {
    color: var(--af-text) !important;
    font-size: clamp(1.35rem, 1.15rem + 0.4vw, 1.8rem);
    font-weight: 860;
    letter-spacing: 0;
}

.fi-header-subheading,
.fi-breadcrumbs,
.fi-breadcrumbs a,
.fi-breadcrumbs-item-label {
    color: var(--af-muted) !important;
}

.fi-topbar {
    background: rgba(7, 11, 16, 0.76) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.09);
    backdrop-filter: blur(18px);
}

.fi-topbar nav {
    background: transparent !important;
    box-shadow: none !important;
}

.fi-sidebar {
    background:
        linear-gradient(180deg, rgba(34, 199, 169, 0.12), rgba(90, 167, 255, 0.08) 42%, rgba(7, 11, 16, 0.94)),
        var(--af-bg-soft) !important;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
    box-shadow: 16px 0 44px rgba(0, 0, 0, 0.22);
}

.fi-sidebar-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
    background: rgba(7, 11, 16, 0.18);
}

.fi-logo {
    color: var(--af-text) !important;
    font-weight: 860;
}

.fi-sidebar-nav {
    border: 0 !important;
    background: transparent !important;
}

.fi-sidebar-group-label {
    color: rgba(200, 211, 223, 0.72) !important;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.fi-sidebar-item a,
.fi-sidebar-item button {
    min-height: 2.35rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--af-muted-strong) !important;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.fi-sidebar-item a:hover,
.fi-sidebar-item button:hover {
    border-color: rgba(226, 232, 240, 0.1);
    background: rgba(226, 232, 240, 0.055) !important;
    color: var(--af-text) !important;
}

.fi-sidebar-item-active a,
.fi-sidebar-item-active button,
.fi-sidebar-item.fi-active a,
.fi-sidebar-item.fi-active button {
    border-color: rgba(34, 199, 169, 0.34);
    background:
        linear-gradient(90deg, rgba(34, 199, 169, 0.2), rgba(90, 167, 255, 0.12)),
        rgba(226, 232, 240, 0.05) !important;
    color: var(--af-text) !important;
    box-shadow: inset 3px 0 0 var(--af-accent);
}

.fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--af-accent-strong) !important;
}

.fi-section,
.fi-wi-card,
.fi-ta,
.fi-fo-repeater-item,
.fi-in-entry-wrp,
.fi-modal-window {
    border: 1px solid var(--af-border) !important;
    border-radius: 0.5rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        rgba(15, 21, 29, 0.92) !important;
    box-shadow: var(--af-shadow-soft);
}

.fi-section-header,
.fi-ta-header,
.fi-modal-header {
    border-color: rgba(226, 232, 240, 0.08) !important;
}

.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading,
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp-label span,
.fi-input-label {
    color: var(--af-text) !important;
    letter-spacing: 0;
}

.fi-section-header-description,
.fi-ta-header-description,
.fi-fo-field-wrp-helper-text,
.fi-input-wrp-hint-label,
.fi-pagination,
.fi-ta-text,
.fi-ta-cell,
.fi-ta-empty-state-description {
    color: var(--af-muted) !important;
}

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    min-height: 8.6rem;
    border: 1px solid rgba(226, 232, 240, 0.12) !important;
    border-radius: 0.5rem !important;
    background:
        linear-gradient(135deg, rgba(34, 199, 169, 0.12), rgba(90, 167, 255, 0.06) 48%, rgba(244, 190, 99, 0.06)),
        rgba(15, 21, 29, 0.94) !important;
    box-shadow: var(--af-shadow-soft) !important;
}

.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--af-accent), var(--af-blue), var(--af-warm));
}

.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-description {
    color: var(--af-muted) !important;
}

.fi-wi-stats-overview-stat-value {
    color: var(--af-text) !important;
    font-weight: 860 !important;
    letter-spacing: 0;
}

.fi-btn {
    border-radius: 0.5rem !important;
    font-weight: 780 !important;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.fi-btn:hover {
    transform: translateY(-1px);
}

.fi-btn-color-primary {
    border: 1px solid rgba(142, 229, 211, 0.36) !important;
    background: linear-gradient(135deg, #21c4a6, #58a6ff) !important;
    color: #041014 !important;
    box-shadow: 0 14px 28px rgba(34, 199, 169, 0.18);
}

.fi-btn-color-gray {
    border-color: rgba(226, 232, 240, 0.13) !important;
    background: rgba(226, 232, 240, 0.06) !important;
    color: var(--af-muted-strong) !important;
}

.fi-input-wrp,
.fi-select-input,
.choices__inner {
    border: 1px solid rgba(226, 232, 240, 0.14) !important;
    border-radius: 0.5rem !important;
    background: rgba(7, 11, 16, 0.54) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.fi-input-wrp:focus-within,
.fi-select-input:focus,
.choices.is-focused .choices__inner {
    border-color: rgba(34, 199, 169, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(34, 199, 169, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.fi-input,
.fi-select-input,
.choices__input {
    color: var(--af-text) !important;
}

.fi-ta-table {
    background: transparent !important;
}

.fi-ta-header-cell,
.fi-ta-row {
    border-color: rgba(226, 232, 240, 0.08) !important;
}

.fi-ta-header-cell {
    background: rgba(7, 11, 16, 0.36) !important;
}

.fi-ta-row:hover {
    background: rgba(34, 199, 169, 0.045) !important;
}

.fi-badge {
    border-radius: 999px !important;
    border: 1px solid rgba(226, 232, 240, 0.12);
}

.fi-tabs,
.fi-tabs-item,
.fi-dropdown-panel {
    border-color: var(--af-border) !important;
    background: rgba(15, 21, 29, 0.96) !important;
    color: var(--af-text) !important;
}

.fi-tabs-item-active {
    background: rgba(34, 199, 169, 0.12) !important;
    color: var(--af-accent-strong) !important;
}

.fi-simple-layout {
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2.25rem);
    background:
        linear-gradient(140deg, rgba(34, 199, 169, 0.13), rgba(90, 167, 255, 0.09) 44%, rgba(244, 190, 99, 0.07)),
        linear-gradient(180deg, #071018, #070b10 62%, #05070a),
        var(--af-bg) !important;
}

.fi-simple-layout::before {
    content: "AgencyFlow Marketing";
    position: fixed;
    top: clamp(1rem, 3vw, 2rem);
    left: clamp(1rem, 3vw, 2rem);
    color: rgba(247, 250, 252, 0.88);
    font-size: 0.82rem;
    font-weight: 860;
    letter-spacing: 0;
    pointer-events: none;
}

.fi-simple-main {
    position: relative;
    width: min(100%, 35rem) !important;
    max-width: 35rem !important;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.16);
    border-radius: 0.5rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        rgba(12, 18, 26, 0.94) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
}

.fi-simple-page {
    padding: clamp(1.15rem, 2.5vw, 1.7rem) !important;
}

.fi-simple-page > section {
    gap: 1.15rem !important;
}

.fi-simple-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--af-accent), var(--af-blue), var(--af-warm));
}

.fi-simple-header {
    gap: 0.6rem;
}

.fi-simple-header-heading {
    color: var(--af-text) !important;
    font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.2rem) !important;
    font-weight: 880 !important;
}

.fi-simple-header-subheading {
    color: var(--af-muted) !important;
}

.fi-simple-main form {
    display: grid;
    gap: 1rem;
}

.af-login-helper {
    gap: 1rem;
    margin-top: 1.35rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, rgba(34, 199, 169, 0.1), rgba(90, 167, 255, 0.06)),
        rgba(7, 11, 16, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.af-login-helper__header strong {
    color: var(--af-text);
    font-size: 1rem;
}

.af-login-helper__eyebrow,
.af-login-helper__credentials span {
    color: var(--af-muted);
    font-weight: 760;
}

.af-login-helper__quick,
.af-login-helper__secondary-action {
    border-radius: 0.5rem;
    box-shadow: 0 10px 22px rgba(244, 190, 99, 0.14);
}

.af-login-helper__quick:hover,
.af-login-helper__secondary-action:hover,
.af-login-helper__links a:hover {
    transform: translateY(-1px);
}

.af-login-helper__credentials div {
    border-color: rgba(226, 232, 240, 0.1);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.55);
}

.af-login-helper code {
    color: var(--af-accent-strong);
    font-size: 0.82rem;
}

.af-login-helper__links a {
    border-radius: 0.5rem;
    transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.af-admin-command,
.af-portal-hero,
.af-portal-toolbar {
    position: relative;
    overflow: hidden;
    border-color: rgba(226, 232, 240, 0.14);
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, rgba(34, 199, 169, 0.14), rgba(90, 167, 255, 0.08) 52%, rgba(244, 190, 99, 0.07)),
        rgba(15, 21, 29, 0.94);
    box-shadow: var(--af-shadow);
}

.af-admin-command::before,
.af-portal-hero::before,
.af-portal-toolbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--af-accent), var(--af-blue), var(--af-warm));
}

.af-admin-command__header,
.af-admin-command__grid,
.af-portal-hero > *,
.af-portal-toolbar > * {
    position: relative;
}

.af-admin-command__header p,
.af-portal-toolbar p,
.af-portal-hero p,
.af-portal-panel__head span {
    color: var(--af-accent-strong);
    letter-spacing: 0.04em;
}

.af-admin-command__header h2,
.af-portal-toolbar h2,
.af-portal-hero h2,
.af-portal-panel__head h3 {
    color: var(--af-text);
    font-weight: 880;
}

.af-admin-command__header span,
.af-portal-toolbar span,
.af-portal-hero span {
    color: var(--af-muted-strong);
}

.af-admin-command__link,
.af-admin-command__signals div,
.af-admin-command__priority,
.af-local-console,
.af-local-console__check,
.af-local-console__profiles a,
.af-portal-action,
.af-portal-attention__item,
.af-portal-metric,
.af-portal-panel,
.af-portal-row,
.af-portal-stack div,
.af-portal-kv,
.af-portal-message {
    border-color: rgba(226, 232, 240, 0.11);
    border-radius: 0.5rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(7, 11, 16, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.af-admin-command__link,
.af-admin-command__priority,
.af-local-console__check,
.af-local-console__refresh,
.af-local-console__profiles a,
.af-portal-action,
.af-portal-attention__item,
.af-portal-empty--action a,
.af-portal-panel__head a,
.af-portal-toolbar__actions a {
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.af-admin-command__link:hover,
.af-admin-command__priority:hover,
.af-local-console__check:hover,
.af-local-console__refresh:hover,
.af-local-console__profiles a:hover,
.af-portal-action:hover,
.af-portal-attention__item:hover,
.af-portal-empty--action a:hover,
.af-portal-panel__head a:hover,
.af-portal-toolbar__actions a:hover {
    border-color: rgba(34, 199, 169, 0.42);
    background: rgba(34, 199, 169, 0.095);
    box-shadow: 0 12px 28px rgba(34, 199, 169, 0.09);
    transform: translateY(-1px);
}

.af-admin-command__icon,
.af-portal-action__icon,
.af-portal-metric svg {
    color: var(--af-accent-strong);
    filter: drop-shadow(0 6px 12px rgba(34, 199, 169, 0.16));
}

.af-portal-actions {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.af-admin-command__signals strong,
.af-portal-hero__status strong,
.af-portal-stack strong {
    color: var(--af-warm);
}

.af-portal-metrics {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.af-portal-metric {
    min-height: 9rem;
}

.af-portal-metric strong {
    font-size: 1.35rem;
    font-weight: 860;
}

.af-portal-panel {
    box-shadow: var(--af-shadow-soft);
}

.af-portal-row:hover,
.af-portal-stack div:hover {
    border-color: rgba(90, 167, 255, 0.28);
    background: rgba(90, 167, 255, 0.06);
}

.af-portal-empty--action {
    border-color: rgba(90, 167, 255, 0.2);
    background:
        linear-gradient(135deg, rgba(34, 199, 169, 0.075), rgba(90, 167, 255, 0.06)),
        rgba(7, 11, 16, 0.48);
}

.af-portal-progress {
    height: 0.55rem;
    background: rgba(226, 232, 240, 0.12);
}

.af-portal-progress span {
    background: linear-gradient(90deg, var(--af-accent), var(--af-blue), var(--af-warm));
    box-shadow: 0 0 18px rgba(34, 199, 169, 0.24);
}

.af-portal-badge {
    border-color: rgba(226, 232, 240, 0.12);
    background: rgba(226, 232, 240, 0.06);
}

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-sidebar-item a:focus-visible,
.fi-sidebar-item button:focus-visible,
.fi-input:focus-visible,
.fi-select-input:focus-visible,
.fi-global-search-result-link:focus-visible,
.af-command-trigger:focus-visible,
.af-command-palette__close:focus-visible,
.af-command-palette__result:focus-visible,
.af-admin-command__link:focus-visible,
.af-admin-command__priority:focus-visible,
.af-local-console__check:focus-visible,
.af-local-console__refresh:focus-visible,
.af-local-console__profiles a:focus-visible,
.af-portal-action:focus-visible,
.af-portal-attention__item:focus-visible,
.af-portal-empty--action a:focus-visible,
.af-portal-panel__head a:focus-visible,
.af-portal-toolbar__actions a:focus-visible,
.af-login-helper__quick:focus-visible,
.af-login-helper__secondary-action:focus-visible,
.af-login-helper__links a:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44) !important;
    outline-offset: 3px !important;
}

.af-admin-command__link:focus-visible,
.af-command-palette__result:focus-visible,
.af-admin-command__priority:focus-visible,
.af-local-console__check:focus-visible,
.af-local-console__refresh:focus-visible,
.af-local-console__profiles a:focus-visible,
.af-portal-action:focus-visible,
.af-portal-attention__item:focus-visible,
.af-portal-row:focus-within,
.af-portal-stack div:focus-within,
.af-portal-panel:focus-within,
.af-portal-empty--action:focus-within,
.af-login-helper:focus-within {
    border-color: rgba(142, 229, 211, 0.42);
    box-shadow: 0 0 0 3px rgba(34, 199, 169, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html {
    scrollbar-color: rgba(142, 229, 211, 0.42) rgba(7, 11, 16, 0.9);
}

@media (min-width: 1024px) {
    .fi-main {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 760px) {
    .fi-main {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .fi-simple-layout::before {
        position: static;
        align-self: start;
        margin-bottom: 0.75rem;
    }

    .af-admin-command,
    .af-local-console,
    .af-portal-hero,
    .af-portal-toolbar,
    .af-portal-action,
    .af-portal-attention__item,
    .af-portal-panel,
    .af-portal-metric {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .fi-btn:hover,
    .af-login-helper__quick:hover,
    .af-login-helper__secondary-action:hover,
    .af-login-helper__links a:hover,
    .af-admin-command__link:hover,
    .af-admin-command__priority:hover,
    .af-command-palette__result:hover,
    .af-local-console__check:hover,
    .af-local-console__refresh:hover,
    .af-local-console__profiles a:hover,
    .af-portal-action:hover,
    .af-portal-attention__item:hover,
    .af-portal-empty--action a:hover,
    .af-portal-panel__head a:hover,
    .af-portal-toolbar__actions a:hover {
        transform: none !important;
    }
}

/* Collaborator timesheet. */
.af-timesheet {
    display: grid;
    gap: 1rem;
}

.af-timesheet-summary {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.5rem;
    background:
        linear-gradient(120deg, rgba(34, 199, 169, 0.1), rgba(90, 167, 255, 0.07) 55%, rgba(243, 185, 95, 0.06)),
        rgba(7, 11, 16, 0.72);
    box-shadow: var(--af-shadow-soft);
}

.af-timesheet-summary__head {
    display: grid;
    grid-template-columns: minmax(12rem, 0.65fr) minmax(14rem, 1fr);
    align-items: end;
    gap: 1rem;
}

.af-timesheet-summary__head span,
.af-timesheet-form .af-portal-panel__head span,
.af-timesheet-history .af-portal-panel__head span {
    color: var(--af-accent-strong);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-timesheet-summary__head h3 {
    margin-top: 0.2rem;
    color: var(--af-text);
    font-size: 1rem;
    font-weight: 850;
}

.af-timesheet-summary__progress,
.af-timesheet-day__track {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.12);
}

.af-timesheet-summary__progress span,
.af-timesheet-day__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--af-accent), var(--af-blue), var(--af-warm));
}

.af-timesheet-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(226, 232, 240, 0.1);
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.af-timesheet-stats > div {
    min-width: 0;
    padding: 0.85rem;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
}

.af-timesheet-stats > div:last-child {
    border-right: 0;
}

.af-timesheet-stats span,
.af-timesheet-day > span {
    display: block;
    color: var(--af-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.af-timesheet-stats strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--af-text);
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.af-timesheet-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.65rem;
}

.af-timesheet-day {
    min-width: 0;
    padding: 0.65rem;
    border-left: 2px solid transparent;
}

.af-timesheet-day[data-today="true"] {
    border-left-color: var(--af-accent);
    background: rgba(34, 199, 169, 0.055);
}

.af-timesheet-day > strong {
    display: block;
    margin: 0.15rem 0 0.55rem;
    color: var(--af-text);
    font-size: 0.82rem;
}

.af-timesheet-day > small {
    display: block;
    margin-top: 0.4rem;
    color: var(--af-muted);
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.af-timesheet-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr);
    align-items: start;
    gap: 1rem;
}

.af-timesheet-form .af-portal-panel__head svg {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--af-accent-strong);
}

.af-timesheet-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.af-timesheet-field > span {
    color: var(--af-text);
    font-size: 0.76rem;
    font-weight: 800;
}

.af-timesheet-field input,
.af-timesheet-field select,
.af-timesheet-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0.45rem;
    color: var(--af-text);
    background: rgba(5, 8, 12, 0.68);
    font-size: 0.82rem;
}

.af-timesheet-field textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.af-timesheet-field input:focus,
.af-timesheet-field select:focus,
.af-timesheet-field textarea:focus {
    border-color: rgba(142, 229, 211, 0.52);
    box-shadow: 0 0 0 3px rgba(34, 199, 169, 0.12);
    outline: 0;
}

.af-timesheet-field > small {
    color: #fda4af;
    font-size: 0.72rem;
}

.af-timesheet-form__row,
.af-timesheet-duration {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.af-timesheet-check {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.75rem;
    padding: 0.7rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.45rem;
    background: rgba(34, 199, 169, 0.045);
    cursor: pointer;
}

.af-timesheet-check input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--af-accent);
}

.af-timesheet-check span {
    display: grid;
    gap: 0.15rem;
}

.af-timesheet-check strong {
    color: var(--af-text);
    font-size: 0.8rem;
}

.af-timesheet-check small {
    color: var(--af-muted);
    font-size: 0.72rem;
}

.af-timesheet-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid rgba(34, 199, 169, 0.4);
    border-radius: 0.45rem;
    color: #04110e;
    background: var(--af-accent-strong);
    font-size: 0.82rem;
    font-weight: 850;
    transition: filter 150ms ease, transform 150ms ease;
}

.af-timesheet-submit svg {
    width: 1rem;
    height: 1rem;
}

.af-timesheet-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.af-timesheet-submit:disabled {
    cursor: wait;
    filter: saturate(0.45);
    opacity: 0.72;
}

.af-timesheet-history__list {
    display: grid;
}

.af-timesheet-entry {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.8rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.af-timesheet-entry:last-child {
    border-bottom: 0;
}

.af-timesheet-entry time {
    display: grid;
    justify-items: center;
    padding: 0.45rem 0.25rem;
    border: 1px solid rgba(90, 167, 255, 0.22);
    border-radius: 0.4rem;
    background: rgba(90, 167, 255, 0.06);
}

.af-timesheet-entry time strong {
    color: var(--af-text);
    font-size: 1rem;
}

.af-timesheet-entry time span {
    color: var(--af-blue);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.af-timesheet-entry > div:nth-child(2) {
    min-width: 0;
}

.af-timesheet-entry > div:nth-child(2) > strong {
    display: block;
    color: var(--af-text);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.af-timesheet-entry > div:nth-child(2) > span,
.af-timesheet-entry p {
    color: var(--af-muted);
    font-size: 0.73rem;
}

.af-timesheet-entry p {
    margin-top: 0.35rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.af-timesheet-entry__meta {
    display: grid;
    justify-items: end;
    gap: 0.2rem;
    text-align: right;
}

.af-timesheet-entry__meta strong {
    color: var(--af-warm);
    font-size: 0.85rem;
}

.af-timesheet-entry__meta span,
.af-timesheet-entry__meta small {
    color: var(--af-muted);
    font-size: 0.68rem;
}

.af-timesheet-submit:focus-visible,
.af-timesheet-check:focus-within {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 3px;
}

@media (max-width: 960px) {
    .af-timesheet-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .af-timesheet-summary {
        box-shadow: none;
    }

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

    .af-timesheet-summary__progress {
        grid-column: 1 / -1;
    }

    .af-timesheet-stats > div:nth-child(2) {
        border-right: 0;
    }

    .af-timesheet-stats > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-timesheet-days {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .af-timesheet-summary__head,
    .af-timesheet-form__row {
        grid-template-columns: 1fr;
    }

    .af-timesheet-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-timesheet-entry {
        grid-template-columns: 2.8rem minmax(0, 1fr);
    }

    .af-timesheet-entry__meta {
        grid-column: 2;
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        justify-items: start;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-timesheet-submit:hover {
        transform: none;
    }
}

/* Collaborator wallet. */
.af-wallet {
    display: grid;
    gap: 1rem;
}

.af-wallet-balance {
    display: grid;
    grid-template-columns: minmax(16rem, 1.35fr) repeat(3, minmax(10rem, 0.65fr));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.5rem;
    background:
        linear-gradient(115deg, rgba(34, 199, 169, 0.12), rgba(90, 167, 255, 0.06) 58%, rgba(243, 185, 95, 0.07)),
        rgba(7, 11, 16, 0.76);
    box-shadow: var(--af-shadow-soft);
}

.af-wallet-balance__primary,
.af-wallet-balance__metric {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 8.5rem;
    padding: 1rem;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
}

.af-wallet-balance > div:last-child {
    border-right: 0;
}

.af-wallet-balance span {
    color: var(--af-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.af-wallet-balance__primary strong {
    margin-top: 0.25rem;
    color: var(--af-text);
    font-size: 1.65rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.af-wallet-balance__primary small {
    margin-top: 0.5rem;
    color: var(--af-accent-strong);
    font-size: 0.72rem;
}

.af-wallet-balance__metric strong {
    margin-top: 0.3rem;
    color: var(--af-text);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.af-wallet-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.78fr) minmax(25rem, 1.22fr);
    align-items: start;
    gap: 1rem;
}

.af-wallet-form .af-portal-panel__head svg {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--af-accent-strong);
}

.af-wallet-form__notice {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.75rem;
    padding: 0.75rem;
    border-left: 2px solid var(--af-blue);
    background: rgba(90, 167, 255, 0.055);
}

.af-wallet-form__notice svg {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--af-blue);
}

.af-wallet-form__notice span {
    display: grid;
    gap: 0.15rem;
}

.af-wallet-form__notice strong {
    color: var(--af-text);
    font-size: 0.8rem;
}

.af-wallet-form__notice small {
    color: var(--af-muted);
    font-size: 0.72rem;
}

.af-wallet-history__list {
    display: grid;
}

.af-wallet-withdrawal {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.af-wallet-withdrawal:last-child {
    border-bottom: 0;
}

.af-wallet-withdrawal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(90, 167, 255, 0.24);
    border-radius: 0.45rem;
    color: var(--af-blue);
    background: rgba(90, 167, 255, 0.07);
}

.af-wallet-withdrawal__icon[data-tone="success"] {
    border-color: rgba(34, 199, 169, 0.28);
    color: var(--af-accent-strong);
    background: rgba(34, 199, 169, 0.07);
}

.af-wallet-withdrawal__icon[data-tone="warning"] {
    border-color: rgba(243, 185, 95, 0.3);
    color: var(--af-warm);
    background: rgba(243, 185, 95, 0.07);
}

.af-wallet-withdrawal__icon[data-tone="danger"] {
    border-color: rgba(244, 63, 94, 0.3);
    color: #fda4af;
    background: rgba(244, 63, 94, 0.07);
}

.af-wallet-withdrawal__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.af-wallet-withdrawal > div:nth-child(2) {
    min-width: 0;
}

.af-wallet-withdrawal > div:nth-child(2) strong {
    display: block;
    color: var(--af-text);
    font-size: 0.86rem;
}

.af-wallet-withdrawal > div:nth-child(2) span,
.af-wallet-withdrawal > div:nth-child(2) small {
    display: block;
    margin-top: 0.2rem;
    color: var(--af-muted);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.af-wallet-withdrawal__meta {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
}

.af-wallet-withdrawal__meta > strong {
    color: var(--af-warm);
    font-size: 0.88rem;
}

@media (max-width: 1040px) {
    .af-wallet-balance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-wallet-balance > div:nth-child(2) {
        border-right: 0;
    }

    .af-wallet-balance > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-wallet-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .af-wallet-balance {
        grid-template-columns: 1fr;
        box-shadow: none;
    }

    .af-wallet-balance > div {
        min-height: 6.6rem;
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-wallet-balance > div:last-child {
        border-bottom: 0;
    }

    .af-wallet-withdrawal {
        grid-template-columns: 2.6rem minmax(0, 1fr);
    }

    .af-wallet-withdrawal__meta {
        grid-column: 2;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        justify-items: start;
    }
}

/* Collaborator performance evaluations. */
.af-evaluations {
    display: grid;
    gap: 1rem;
}

.af-evaluation-hero {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.76);
    box-shadow: var(--af-shadow-soft);
}

.af-evaluation-score {
    display: grid;
    place-content: center;
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(34, 199, 169, 0.5);
    border-radius: 50%;
    background: rgba(34, 199, 169, 0.08);
    text-align: center;
}

.af-evaluation-score strong {
    color: var(--af-text);
    font-size: 2rem;
    line-height: 1;
}

.af-evaluation-score span {
    margin-top: 0.2rem;
    color: var(--af-accent-strong);
    font-size: 0.72rem;
}

.af-evaluation-hero__copy {
    min-width: 0;
}

.af-evaluation-hero__copy > span {
    color: var(--af-accent-strong);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-evaluation-hero__copy h3 {
    margin-top: 0.25rem;
    color: var(--af-text);
    font-size: 1.2rem;
    font-weight: 850;
}

.af-evaluation-hero__copy p {
    margin-top: 0.3rem;
    color: var(--af-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.af-evaluation-hero__action {
    display: grid;
    justify-items: end;
    gap: 0.65rem;
}

.af-evaluation-hero__action button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(34, 199, 169, 0.4);
    border-radius: 0.45rem;
    color: #04110e;
    background: var(--af-accent-strong);
    font-size: 0.76rem;
    font-weight: 850;
    transition: filter 150ms ease, transform 150ms ease;
}

.af-evaluation-hero__action button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.af-evaluation-hero__action button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.af-evaluation-hero__action button svg {
    width: 1rem;
    height: 1rem;
}

.af-evaluation-hero__action small {
    color: var(--af-muted);
    font-size: 0.72rem;
}

.af-evaluation-dimensions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.7rem;
}

.af-evaluation-dimension {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 6.5rem;
    padding: 0.8rem;
    border: 1px solid rgba(226, 232, 240, 0.11);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.54);
}

.af-evaluation-dimension > svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--af-blue);
}

.af-evaluation-dimension > span {
    color: var(--af-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.af-evaluation-dimension > strong {
    color: var(--af-text);
    font-size: 0.78rem;
}

.af-evaluation-dimension > div {
    grid-column: 1 / -1;
    height: 0.48rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.12);
}

.af-evaluation-dimension > div span,
.af-evaluation-history__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--af-accent);
}

.af-evaluation-feedback {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.af-evaluation-feedback > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: 0.6rem;
    min-height: 10rem;
    padding: 0.9rem;
    border-top: 2px solid rgba(90, 167, 255, 0.45);
    background: rgba(7, 11, 16, 0.48);
}

.af-evaluation-feedback > div:nth-child(1) {
    border-top-color: rgba(34, 199, 169, 0.52);
}

.af-evaluation-feedback > div:nth-child(3) {
    border-top-color: rgba(243, 185, 95, 0.52);
}

.af-evaluation-feedback span {
    color: var(--af-text);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-evaluation-feedback svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--af-blue);
}

.af-evaluation-feedback p {
    grid-column: 1 / -1;
    color: var(--af-muted);
    font-size: 0.8rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.af-evaluation-history__list {
    display: grid;
}

.af-evaluation-history__list article {
    display: grid;
    grid-template-columns: minmax(8rem, 0.6fr) minmax(10rem, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.af-evaluation-history__list article:last-child {
    border-bottom: 0;
}

.af-evaluation-history__list article > div:first-child strong {
    display: block;
    color: var(--af-text);
    font-size: 0.84rem;
}

.af-evaluation-history__list article > div:first-child span {
    color: var(--af-muted);
    font-size: 0.7rem;
}

.af-evaluation-history__track {
    height: 0.48rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.12);
}

.af-evaluation-history__list article > strong {
    color: var(--af-warm);
    font-size: 0.82rem;
}

.af-evaluation-hero__action button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 3px;
}

@media (max-width: 820px) {
    .af-evaluation-hero {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        box-shadow: none;
    }

    .af-evaluation-score {
        width: 5.5rem;
        height: 5.5rem;
    }

    .af-evaluation-hero__action {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, auto);
        align-items: center;
        justify-content: space-between;
        justify-items: start;
    }

    .af-evaluation-feedback {
        grid-template-columns: 1fr;
    }

    .af-evaluation-history__list article {
        grid-template-columns: minmax(7rem, 0.6fr) minmax(8rem, 1fr) auto;
    }

    .af-evaluation-history__list article > .af-portal-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 520px) {
    .af-evaluation-hero {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .af-evaluation-hero__action {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .af-evaluation-hero__action button {
        width: 100%;
    }

    .af-evaluation-history__list article {
        grid-template-columns: 1fr auto;
    }

    .af-evaluation-history__track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-evaluation-hero__action button:hover {
        transform: none;
    }
}

/* Client approvals workspace. */
.af-client-approvals {
    display: grid;
    gap: 1rem;
}

.af-client-approval-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.68);
    box-shadow: var(--af-shadow-soft);
}

.af-client-approval-summary > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 5rem;
    padding: 0.85rem;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
}

.af-client-approval-summary > div:last-child {
    border-right: 0;
}

.af-client-approval-summary svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--af-blue);
}

.af-client-approval-summary span {
    color: var(--af-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.af-client-approval-summary strong {
    color: var(--af-text);
    font-size: 1rem;
}

.af-client-approval-summary [data-tone="warning"] svg,
.af-client-approval-summary [data-tone="warning"] strong {
    color: var(--af-warm);
}

.af-client-approval-summary [data-tone="danger"] svg,
.af-client-approval-summary [data-tone="danger"] strong {
    color: #fda4af;
}

.af-client-approval-summary [data-tone="success"] svg {
    color: var(--af-accent-strong);
}

.af-client-approval-list {
    display: grid;
    gap: 0.85rem;
}

.af-client-approval {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.11);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.62);
    box-shadow: var(--af-shadow-soft);
}

.af-client-approval[data-status="pending"] {
    border-left: 3px solid var(--af-warm);
}

.af-client-approval__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.af-client-approval__head > div:first-child {
    min-width: 0;
}

.af-client-approval__head > div:first-child span {
    color: var(--af-accent-strong);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.af-client-approval__head h3 {
    margin-top: 0.25rem;
    color: var(--af-text);
    font-size: 1rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.af-client-approval__head > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.af-client-approval > p {
    color: var(--af-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.af-client-approval__context {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(226, 232, 240, 0.1);
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.af-client-approval__context > div {
    min-width: 0;
    padding: 0.7rem;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
}

.af-client-approval__context > div:last-child {
    border-right: 0;
}

.af-client-approval__context span {
    display: block;
    color: var(--af-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.af-client-approval__context strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--af-text);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.af-client-approval__decision {
    display: grid;
    gap: 0.75rem;
}

.af-client-approval__decision > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.af-client-approval__decision button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.45rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(226, 232, 240, 0.16);
    border-radius: 0.45rem;
    color: var(--af-text);
    background: rgba(226, 232, 240, 0.06);
    font-size: 0.74rem;
    font-weight: 850;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.af-client-approval__decision button[data-decision="approved"] {
    border-color: rgba(34, 199, 169, 0.4);
    color: var(--af-accent-strong);
    background: rgba(34, 199, 169, 0.08);
}

.af-client-approval__decision button[data-decision="changes_requested"] {
    border-color: rgba(243, 185, 95, 0.4);
    color: var(--af-warm);
    background: rgba(243, 185, 95, 0.08);
}

.af-client-approval__decision button[data-decision="rejected"] {
    border-color: rgba(244, 63, 94, 0.38);
    color: #fda4af;
    background: rgba(244, 63, 94, 0.08);
}

.af-client-approval__decision button:hover {
    border-color: rgba(142, 229, 211, 0.48);
    transform: translateY(-1px);
}

.af-client-approval__decision button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.af-client-approval__decision button svg {
    width: 1rem;
    height: 1rem;
}

.af-client-approval__result {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem;
    border-left: 2px solid var(--af-accent);
    background: rgba(34, 199, 169, 0.05);
}

.af-client-approval__result > svg {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--af-accent-strong);
}

.af-client-approval__result strong {
    display: block;
    color: var(--af-text);
    font-size: 0.78rem;
}

.af-client-approval__result span,
.af-client-approval__result p {
    color: var(--af-muted);
    font-size: 0.72rem;
}

.af-client-approval__result p {
    margin-top: 0.3rem;
}

.af-client-approval__decision button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 3px;
}

@media (max-width: 780px) {
    .af-client-approval-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-shadow: none;
    }

    .af-client-approval-summary > div:nth-child(2) {
        border-right: 0;
    }

    .af-client-approval-summary > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-client-approval {
        box-shadow: none;
    }

    .af-client-approval__context {
        grid-template-columns: 1fr;
    }

    .af-client-approval__context > div {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-client-approval__context > div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 520px) {
    .af-client-approval__head {
        flex-direction: column;
    }

    .af-client-approval__head > div:last-child,
    .af-client-approval__decision > div {
        justify-content: flex-start;
        width: 100%;
    }

    .af-client-approval__decision button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-client-approval__decision button:hover {
        transform: none;
    }
}

/* Client file library. */
.af-client-files {
    display: grid;
    gap: 1rem;
}

.af-client-files__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.68);
}

.af-client-files__summary > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 4.7rem;
    padding: 0.85rem;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
}

.af-client-files__summary > div:last-child {
    border-right: 0;
}

.af-client-files__summary svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--af-blue);
}

.af-client-files__summary span {
    min-width: 0;
    color: var(--af-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.af-client-files__summary strong {
    color: var(--af-text);
    font-size: 0.95rem;
    white-space: nowrap;
}

.af-client-files__upload {
    padding: 1rem;
    border: 1px solid rgba(142, 229, 211, 0.18);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.54);
}

.af-client-files__section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.af-client-files__section-head span {
    color: var(--af-accent-strong);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-client-files__section-head h3 {
    margin-top: 0.2rem;
    color: var(--af-text);
    font-size: 0.95rem;
    font-weight: 850;
}

.af-client-files__section-head small {
    color: var(--af-muted);
    font-size: 0.7rem;
}

.af-client-files__form {
    display: grid;
    grid-template-columns: minmax(12rem, 0.65fr) minmax(16rem, 1fr) auto;
    align-items: end;
    gap: 0.85rem;
}

.af-client-files__dropzone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: 0.65rem;
    min-width: 0;
    min-height: 6.85rem;
    padding: 0.8rem;
    cursor: pointer;
    border: 1px dashed rgba(142, 229, 211, 0.32);
    border-radius: 0.45rem;
    background: rgba(34, 199, 169, 0.04);
}

.af-client-files__dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.af-client-files__dropzone svg {
    grid-row: 1 / span 3;
    align-self: center;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--af-accent-strong);
}

.af-client-files__dropzone strong {
    min-width: 0;
    overflow: hidden;
    color: var(--af-text);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.af-client-files__dropzone span,
.af-client-files__dropzone small {
    color: var(--af-muted);
    font-size: 0.68rem;
}

.af-client-files__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.af-client-files__fields label {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.af-client-files__fields label > span {
    color: var(--af-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.af-client-files__description {
    grid-column: 1 / -1;
}

.af-client-files__fields select,
.af-client-files__fields input,
.af-client-files__filters select,
.af-client-files__search input {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.48rem 0.65rem;
    border: 1px solid rgba(226, 232, 240, 0.15);
    border-radius: 0.4rem;
    color: var(--af-text);
    background: rgba(5, 9, 14, 0.78);
    font-size: 0.75rem;
}

.af-client-files__form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 8.5rem;
    min-height: 2.45rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(34, 199, 169, 0.45);
    border-radius: 0.45rem;
    color: #04120f;
    background: var(--af-accent-strong);
    font-size: 0.74rem;
    font-weight: 900;
}

.af-client-files__form > button svg {
    width: 1rem;
    height: 1rem;
}

.af-client-files__form > button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.af-client-files__error {
    color: #fda4af;
    font-size: 0.72rem;
}

.af-client-files__library {
    padding-top: 0.2rem;
}

.af-client-files__filters {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.35fr) minmax(10rem, 0.35fr);
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.af-client-files__search {
    position: relative;
    display: flex;
    align-items: center;
}

.af-client-files__search svg {
    position: absolute;
    left: 0.65rem;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    color: var(--af-muted);
    pointer-events: none;
}

.af-client-files__search input {
    padding-left: 2.1rem;
}

.af-client-files__list {
    display: grid;
    gap: 0.65rem;
}

.af-client-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-left: 3px solid var(--af-blue);
    border-radius: 0.45rem;
    background: rgba(7, 11, 16, 0.55);
}

.af-client-file[data-source="client"] {
    border-left-color: var(--af-accent);
}

.af-client-file__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 0.45rem;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.08);
}

.af-client-file__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.af-client-file__copy {
    min-width: 0;
}

.af-client-file__copy > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.af-client-file__copy > div span {
    color: var(--af-accent-strong);
    font-size: 0.64rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-client-file__copy > div span + span {
    color: var(--af-muted);
}

.af-client-file__copy h4 {
    margin-top: 0.2rem;
    color: var(--af-text);
    font-size: 0.82rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.af-client-file__copy p,
.af-client-file__copy small {
    display: block;
    margin-top: 0.18rem;
    color: var(--af-muted);
    font-size: 0.7rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.af-client-file__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.af-client-file__actions a,
.af-client-file__actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0.4rem;
    color: var(--af-text);
    background: rgba(226, 232, 240, 0.05);
    font-size: 0.7rem;
    font-weight: 850;
}

.af-client-file__actions button {
    width: 2.25rem;
    padding: 0;
    color: #fda4af;
}

.af-client-file__actions svg {
    width: 0.95rem;
    height: 0.95rem;
}

.af-client-files__dropzone:focus-within,
.af-client-files__fields select:focus-visible,
.af-client-files__fields input:focus-visible,
.af-client-files__filters select:focus-visible,
.af-client-files__search input:focus-visible,
.af-client-files__form > button:focus-visible,
.af-client-file__actions a:focus-visible,
.af-client-file__actions button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 3px;
}

@media (max-width: 960px) {
    .af-client-files__form {
        grid-template-columns: minmax(12rem, 0.65fr) minmax(16rem, 1fr);
    }

    .af-client-files__form > button {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 760px) {
    .af-client-files__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-client-files__summary > div:nth-child(2) {
        border-right: 0;
    }

    .af-client-files__summary > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-client-files__form,
    .af-client-files__filters {
        grid-template-columns: 1fr;
    }

    .af-client-files__form > button {
        grid-column: auto;
        justify-self: stretch;
    }
}

@media (max-width: 560px) {
    .af-client-files__section-head,
    .af-client-file {
        align-items: stretch;
    }

    .af-client-files__section-head {
        flex-direction: column;
    }

    .af-client-files__fields,
    .af-client-file {
        grid-template-columns: 1fr;
    }

    .af-client-files__description {
        grid-column: auto;
    }

    .af-client-file__icon {
        display: none;
    }

    .af-client-file__actions {
        justify-content: space-between;
    }

    .af-client-file__actions a {
        flex: 1;
    }
}

/* Collaborator project kanban. */
.af-collaborator-kanban,
.af-kanban-projects {
    display: grid;
    gap: 1rem;
}

.af-kanban-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.5rem;
    background: rgba(7, 11, 16, 0.68);
}

.af-kanban-summary > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 4.7rem;
    padding: 0.85rem;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
}

.af-kanban-summary > div:last-child {
    border-right: 0;
}

.af-kanban-summary svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--af-blue);
}

.af-kanban-summary span {
    color: var(--af-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.af-kanban-summary strong {
    color: var(--af-text);
    font-size: 0.95rem;
}

.af-kanban-summary [data-tone="danger"] svg,
.af-kanban-summary [data-tone="danger"] strong {
    color: #fda4af;
}

.af-kanban-summary [data-tone="success"] svg {
    color: var(--af-accent-strong);
}

.af-kanban-project {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(226, 232, 240, 0.12);
    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

.af-kanban-project__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.af-kanban-project__head > div:first-child {
    min-width: 0;
}

.af-kanban-project__head > div:first-child > span {
    color: var(--af-accent-strong);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-kanban-project__head h3 {
    margin-top: 0.2rem;
    color: var(--af-text);
    font-size: 1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.af-kanban-project__head p {
    margin-top: 0.25rem;
    color: var(--af-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.af-kanban-project__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.af-kanban-project__progress {
    display: grid;
    grid-template-columns: minmax(8rem, 0.3fr) minmax(12rem, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0;
    border-top: 1px solid rgba(226, 232, 240, 0.08);
    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

.af-kanban-project__progress > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.af-kanban-project__progress span,
.af-kanban-project__progress small {
    color: var(--af-muted);
    font-size: 0.68rem;
}

.af-kanban-project__progress strong {
    color: var(--af-text);
    font-size: 0.8rem;
}

.af-kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 0.65rem;
    min-width: 0;
}

.af-kanban-column {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.45rem;
    background: rgba(7, 11, 16, 0.48);
}

.af-kanban-column__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.7rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.af-kanban-column__head svg {
    width: 1rem;
    height: 1rem;
    color: var(--af-blue);
}

.af-kanban-column[data-task-column="doing"] .af-kanban-column__head svg,
.af-kanban-column[data-task-column="review"] .af-kanban-column__head svg {
    color: var(--af-warm);
}

.af-kanban-column[data-task-column="done"] .af-kanban-column__head svg {
    color: var(--af-accent-strong);
}

.af-kanban-column__head strong {
    color: var(--af-text);
    font-size: 0.72rem;
    font-weight: 850;
}

.af-kanban-column__head span {
    display: grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    color: var(--af-muted);
    background: rgba(226, 232, 240, 0.08);
    font-size: 0.66rem;
    font-weight: 850;
}

.af-kanban-column__tasks {
    display: grid;
    gap: 0.5rem;
    min-height: 8rem;
    padding: 0.55rem;
}

.af-kanban-task {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    min-width: 0;
    min-height: 10rem;
    padding: 0.7rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.4rem;
    background: rgba(4, 8, 13, 0.82);
}

.af-kanban-task[data-overdue="true"] {
    border-left: 3px solid #fb7185;
}

.af-kanban-task__head,
.af-kanban-task__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.af-kanban-task__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.af-kanban-task__drag {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    margin: -0.2rem 0 -0.2rem -0.2rem;
    border-radius: 0.3rem;
    color: var(--af-muted);
    cursor: grab;
}

.af-kanban-task__drag:active {
    cursor: grabbing;
}

.af-kanban-task__drag svg {
    width: 0.9rem;
    height: 0.9rem;
}

.af-kanban-task__drag:hover {
    color: var(--af-text);
    background: rgba(226, 232, 240, 0.06);
}

.af-kanban-task__drag:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 2px;
}

.af-kanban-column__tasks:has(.fi-sortable-ghost) {
    background: rgba(142, 229, 211, 0.035);
}

.af-kanban-task.fi-sortable-ghost {
    border-color: rgba(142, 229, 211, 0.42);
    opacity: 0.45;
}

.af-kanban-task__head span {
    color: var(--af-muted);
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-kanban-task__head span[data-priority="high"],
.af-kanban-task__head span[data-priority="urgent"] {
    color: #fda4af;
}

.af-kanban-task__head small,
.af-kanban-task__foot > span {
    color: var(--af-muted);
    font-size: 0.64rem;
}

.af-kanban-task[data-overdue="true"] .af-kanban-task__foot > span {
    color: #fda4af;
}

.af-kanban-task h4 {
    color: var(--af-text);
    font-size: 0.78rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.af-kanban-task p {
    color: var(--af-muted);
    font-size: 0.68rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.af-task-checklist {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid rgba(226, 232, 240, 0.09);
    border-radius: 0.38rem;
    background: rgba(226, 232, 240, 0.025);
}

.af-task-checklist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.af-task-checklist__head span,
.af-task-checklist__head strong {
    color: var(--af-muted);
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-task-checklist__head strong {
    color: var(--af-accent-strong);
}

.af-task-checklist__items {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.af-task-checklist__items button,
.af-task-checklist__items > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    padding: 0.28rem 0.35rem;
    border-radius: 0.3rem;
    color: var(--af-muted);
    text-align: left;
    font-size: 0.64rem;
}

.af-task-checklist__items button {
    border: 1px solid transparent;
}

.af-task-checklist__items button:hover {
    border-color: rgba(142, 229, 211, 0.18);
    color: var(--af-text);
    background: rgba(142, 229, 211, 0.04);
}

.af-task-checklist__items svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--af-warm);
}

.af-task-checklist__items [data-completed="true"] {
    color: var(--af-muted);
    text-decoration: line-through;
}

.af-task-checklist__items [data-completed="true"] svg {
    color: var(--af-accent-strong);
}

.af-task-checklist__items button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.af-task-checklist__items button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 2px;
}

.af-task-checklist--readonly {
    margin-top: 0.55rem;
    max-width: 34rem;
}

.af-task-comments {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid rgba(226, 232, 240, 0.09);
    border-radius: 0.38rem;
    background: rgba(49, 198, 168, 0.025);
}

.af-task-comments--client {
    margin-top: 0.55rem;
    max-width: 34rem;
}

.af-task-comments__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.af-task-comments__head span,
.af-task-comments__head strong {
    color: var(--af-muted);
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.af-task-comments__head strong {
    color: var(--af-accent-strong);
}

.af-task-comments__list {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.af-task-comment {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.42rem 0.46rem;
    border: 1px solid rgba(226, 232, 240, 0.08);
    border-radius: 0.32rem;
    background: rgba(7, 11, 16, 0.42);
}

.af-task-comment[data-comment-visibility="client"] {
    border-color: rgba(49, 198, 168, 0.2);
    background: rgba(49, 198, 168, 0.055);
}

.af-task-comment > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.af-task-comment strong,
.af-task-comment span,
.af-task-comment p,
.af-task-comments__empty {
    overflow-wrap: anywhere;
    font-size: 0.64rem;
    line-height: 1.4;
}

.af-task-comment strong {
    min-width: 0;
    color: var(--af-text);
    font-weight: 800;
}

.af-task-comment span,
.af-task-comments__empty {
    color: var(--af-muted);
}

.af-task-comment[data-comment-visibility="internal"] span {
    color: var(--af-warm);
}

.af-task-comment p {
    color: var(--af-muted);
}

.af-task-comments__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 0;
}

.af-task-comments__form textarea {
    width: 100%;
    min-width: 0;
    resize: vertical;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.34rem;
    color: var(--af-text);
    background: rgba(7, 11, 16, 0.64);
    padding: 0.45rem 0.5rem;
    font-size: 0.68rem;
    line-height: 1.4;
}

.af-task-comments__form textarea::placeholder {
    color: rgba(170, 182, 194, 0.72);
}

.af-task-comments__form button {
    display: grid;
    place-items: center;
    width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid rgba(49, 198, 168, 0.28);
    border-radius: 0.34rem;
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.08);
}

.af-task-comments__form button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.af-task-comments__form button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.af-task-comments__form textarea:focus-visible,
.af-task-comments__form button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 2px;
}

.af-project-timeline {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.8rem 0;
    border-top: 1px solid rgba(226, 232, 240, 0.09);
    border-bottom: 1px solid rgba(226, 232, 240, 0.09);
}

.af-project-timeline__head,
.af-project-timeline__head > div,
.af-project-timeline__content,
.af-project-timeline__content > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}

.af-project-timeline__head > div {
    justify-content: flex-start;
}

.af-project-timeline__head span,
.af-project-timeline__head small,
.af-project-timeline__content time,
.af-project-timeline__content > span {
    color: var(--af-muted);
    font-size: 0.65rem;
}

.af-project-timeline__head span {
    color: var(--af-accent-strong);
    font-weight: 850;
    text-transform: uppercase;
}

.af-project-timeline__head strong,
.af-project-timeline__content strong {
    color: var(--af-text);
    font-size: 0.72rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.af-project-timeline__list {
    display: grid;
    gap: 0;
    min-width: 0;
}

.af-project-timeline__list li {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    min-width: 0;
    padding: 0.45rem 0;
}

.af-project-timeline__list li:not(:last-child)::after {
    position: absolute;
    top: 2rem;
    bottom: -0.2rem;
    left: 0.72rem;
    width: 1px;
    content: "";
    background: rgba(226, 232, 240, 0.12);
}

.af-project-timeline__icon {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(142, 229, 211, 0.18);
    border-radius: 50%;
    color: var(--af-accent-strong);
    background: var(--af-surface, #0b0f14);
}

.af-project-timeline__icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

.af-project-timeline__content {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.18rem;
}

.af-project-timeline__content > div {
    width: 100%;
}

.af-project-timeline__content > span b {
    margin: 0 0.2rem;
    font-weight: 400;
}

.af-project-timeline__empty {
    padding: 0.75rem;
    border: 1px dashed rgba(226, 232, 240, 0.1);
    border-radius: 0.38rem;
    color: var(--af-muted);
    text-align: center;
    font-size: 0.68rem;
}

@media (max-width: 560px) {
    .af-project-timeline__content > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.1rem;
    }
}

.af-kanban-task__foot {
    align-self: end;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.af-kanban-task__foot > div {
    display: flex;
    gap: 0.35rem;
}

.af-kanban-task__foot button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0.38rem;
    color: var(--af-text);
    background: rgba(226, 232, 240, 0.05);
}

.af-kanban-task__foot button[data-task-move="next"] {
    color: var(--af-accent-strong);
}

.af-kanban-task__foot button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.af-kanban-task__foot button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.af-kanban-task__foot button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 2px;
}

.af-kanban-column__empty {
    display: grid;
    place-items: center;
    min-height: 6.5rem;
    border: 1px dashed rgba(226, 232, 240, 0.1);
    border-radius: 0.38rem;
}

.af-kanban-column__empty span {
    color: var(--af-muted);
    font-size: 0.68rem;
}

@media (max-width: 1100px) {
    .af-kanban-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .af-kanban-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-kanban-summary > div:nth-child(2) {
        border-right: 0;
    }

    .af-kanban-summary > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-kanban-project__progress {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .af-kanban-project__head {
        flex-direction: column;
    }

    .af-kanban-project__meta {
        justify-content: flex-start;
    }

    .af-kanban-board {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-collaborator-kanban *,
    .af-collaborator-kanban *::before,
    .af-collaborator-kanban *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-client-files *,
    .af-client-files *::before,
    .af-client-files *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Collaborator project files. */
.af-collaborator-files__form {
    grid-template-columns: minmax(12rem, 0.6fr) minmax(18rem, 1fr) auto;
}

.af-collaborator-files__share {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 3.2rem;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.4rem;
    background: rgba(226, 232, 240, 0.03);
}

.af-collaborator-files__share input {
    width: 1rem;
    height: 1rem;
    appearance: auto;
    border: revert;
    background: revert;
    accent-color: var(--af-accent);
}

.af-collaborator-files__share > svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--af-accent-strong);
}

.af-collaborator-files__share strong,
.af-collaborator-files__share small {
    display: block;
}

.af-collaborator-files__share strong {
    color: var(--af-text);
    font-size: 0.72rem;
}

.af-collaborator-files__share small {
    margin-top: 0.1rem;
    color: var(--af-muted);
    font-size: 0.66rem;
}

.af-collaborator-files__filters {
    grid-template-columns: minmax(13rem, 1fr) repeat(3, minmax(9rem, 0.35fr));
}

.af-client-file[data-visibility="internal"] {
    border-left-color: var(--af-warm);
}

.af-client-file[data-visibility="internal"] .af-client-file__icon {
    border-color: rgba(243, 185, 95, 0.28);
    color: var(--af-warm);
    background: rgba(243, 185, 95, 0.08);
}

.af-collaborator-files__share:focus-within {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 3px;
}

@media (max-width: 960px) {
    .af-collaborator-files__form {
        grid-template-columns: minmax(12rem, 0.6fr) minmax(16rem, 1fr);
    }

    .af-collaborator-files__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .af-collaborator-files__form,
    .af-collaborator-files__filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .af-collaborator-files__share {
        grid-column: auto;
    }
}

/* Operational file center. */
.af-operational-files__form {
    grid-template-columns: minmax(12rem, 0.55fr) minmax(20rem, 1fr) auto;
}

.af-operational-files__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af-operational-files__share {
    grid-column: 1 / -1;
}

.af-operational-files__filters {
    grid-template-columns: minmax(13rem, 1fr) repeat(4, minmax(8rem, 0.32fr));
}

.af-operational-file[data-source="client"] {
    border-left-color: #c4b5fd;
}

.af-operational-file[data-source="client"] .af-client-file__icon {
    border-color: rgba(196, 181, 253, 0.28);
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.08);
}

.af-operational-file__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 14rem;
}

.af-operational-file__actions .af-operational-file__visibility {
    width: auto;
    padding: 0.45rem 0.6rem;
    color: var(--af-warm);
}

.af-operational-file__actions .af-operational-file__visibility[data-visible="false"] {
    color: var(--af-accent-strong);
}

.af-operational-file__visibility:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 3px;
}

@media (max-width: 1100px) {
    .af-operational-files__form {
        grid-template-columns: minmax(12rem, 0.55fr) minmax(18rem, 1fr);
    }

    .af-operational-files__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .af-operational-files__form,
    .af-operational-files__filters {
        grid-template-columns: 1fr;
    }

    .af-operational-file__actions {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .af-operational-files__fields {
        grid-template-columns: 1fr;
    }

    .af-operational-files__share {
        grid-column: auto;
    }

    .af-operational-file__actions .af-operational-file__visibility {
        flex: 1;
    }
}

/* Portal notification center. */
.af-notification-center {
    display: grid;
    gap: 1rem;
    color: var(--af-text);
}

.af-notification-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-left: 3px solid var(--af-accent);
    border-radius: 0.45rem;
    background: linear-gradient(110deg, rgba(20, 184, 166, 0.08), rgba(30, 41, 59, 0.08) 46%, rgba(15, 23, 42, 0.32));
}

.af-notification-hero > div {
    min-width: 0;
}

.af-notification-hero span,
.af-notification-hero h2,
.af-notification-hero p {
    margin: 0;
}

.af-notification-hero > div > span {
    color: var(--af-accent-strong);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.af-notification-hero h2 {
    margin-top: 0.2rem;
    color: var(--af-text);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.25;
}

.af-notification-hero p {
    margin-top: 0.25rem;
    color: var(--af-muted);
    font-size: 0.74rem;
}

.af-notification-mark-all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.35rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(142, 229, 211, 0.3);
    border-radius: 0.4rem;
    color: var(--af-accent-strong);
    background: rgba(20, 184, 166, 0.08);
    font-size: 0.7rem;
    font-weight: 700;
}

.af-notification-mark-all svg {
    width: 1rem;
    height: 1rem;
}

.af-notification-mark-all:disabled {
    cursor: default;
    opacity: 0.45;
}

.af-notification-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.24);
}

.af-notification-filter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.2rem;
    padding: 0.65rem 0.8rem;
    border-right: 1px solid rgba(226, 232, 240, 0.1);
    color: var(--af-muted);
    text-align: left;
    background: transparent;
    font-size: 0.7rem;
}

.af-notification-filter:last-child {
    border-right: 0;
}

.af-notification-filter svg {
    width: 1rem;
    height: 1rem;
}

.af-notification-filter strong {
    display: grid;
    place-items: center;
    min-width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    color: var(--af-text);
    background: rgba(226, 232, 240, 0.08);
    font-size: 0.68rem;
}

.af-notification-filter[data-active="true"] {
    color: var(--af-text);
    background: rgba(20, 184, 166, 0.09);
    box-shadow: inset 0 -2px 0 var(--af-accent);
}

.af-notification-filter[data-active="true"] svg,
.af-notification-filter[data-active="true"] strong {
    color: var(--af-accent-strong);
}

.af-notification-feed {
    display: grid;
    gap: 0.55rem;
}

.af-notification-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 6.4rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-left: 3px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.24);
}

.af-notification-item[data-read="false"] {
    background: rgba(30, 41, 59, 0.43);
}

.af-notification-item[data-severity="success"] {
    border-left-color: #34d399;
}

.af-notification-item[data-severity="warning"] {
    border-left-color: #fbbf24;
}

.af-notification-item[data-severity="danger"] {
    border-left-color: #fb7185;
}

.af-notification-item[data-severity="info"] {
    border-left-color: #38bdf8;
}

.af-notification-item__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.45rem;
    color: var(--af-accent-strong);
    background: rgba(226, 232, 240, 0.04);
}

.af-notification-item__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.af-notification-item__content {
    min-width: 0;
}

.af-notification-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--af-muted);
    font-size: 0.62rem;
}

.af-notification-item__meta > span {
    color: var(--af-accent-strong);
    font-weight: 700;
    text-transform: uppercase;
}

.af-notification-item__meta b {
    padding: 0.18rem 0.38rem;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 0.3rem;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.07);
    font-weight: 600;
}

.af-notification-item__meta b[data-tone="success"] {
    border-color: rgba(52, 211, 153, 0.22);
    color: #6ee7b7;
    background: rgba(52, 211, 153, 0.07);
}

.af-notification-item__meta b[data-tone="warning"] {
    border-color: rgba(251, 191, 36, 0.22);
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.07);
}

.af-notification-item__meta b[data-tone="danger"] {
    border-color: rgba(251, 113, 133, 0.24);
    color: #fda4af;
    background: rgba(251, 113, 133, 0.07);
}

.af-notification-item h3 {
    margin: 0.25rem 0 0;
    color: var(--af-text);
    font-size: 0.82rem;
    line-height: 1.35;
}

.af-notification-item p {
    margin: 0.18rem 0 0;
    color: var(--af-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.af-notification-item[data-read="true"] h3,
.af-notification-item[data-read="true"] p {
    opacity: 0.72;
}

.af-notification-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.af-notification-item__actions a,
.af-notification-item__actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 0.38rem;
    color: var(--af-text);
    background: rgba(226, 232, 240, 0.04);
}

.af-notification-item__actions a {
    padding: 0.4rem 0.55rem;
    color: var(--af-accent-strong);
    font-size: 0.66rem;
    font-weight: 700;
}

.af-notification-item__actions button {
    width: 2rem;
}

.af-notification-item__actions svg {
    width: 0.9rem;
    height: 0.9rem;
}

.af-notification-mark-all:focus-visible,
.af-notification-filter:focus-visible,
.af-notification-item__actions a:focus-visible,
.af-notification-item__actions button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 2px;
}

.af-notification-empty {
    display: grid;
    place-items: center;
    min-height: 14rem;
    padding: 1.5rem;
    border: 1px dashed rgba(226, 232, 240, 0.14);
    border-radius: 0.45rem;
    color: var(--af-muted);
    text-align: center;
}

.af-notification-empty svg {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.65rem;
    color: var(--af-accent-strong);
}

.af-notification-empty span,
.af-notification-empty strong,
.af-notification-empty small {
    display: block;
}

.af-notification-empty span {
    font-size: 0.65rem;
    text-transform: uppercase;
}

.af-notification-empty strong {
    margin-top: 0.2rem;
    color: var(--af-text);
    font-size: 0.85rem;
}

.af-notification-empty small {
    margin-top: 0.2rem;
    font-size: 0.68rem;
}

@media (max-width: 760px) {
    .af-notification-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .af-notification-mark-all {
        width: 100%;
    }

    .af-notification-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-notification-filter:nth-child(2) {
        border-right: 0;
    }

    .af-notification-filter:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    }

    .af-notification-item {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .af-notification-item__actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .af-notification-filter {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .af-notification-filter strong {
        grid-column: 2;
        grid-row: 2;
        width: max-content;
        height: auto;
        min-width: 0;
        border-radius: 0.3rem;
        padding: 0.1rem 0.35rem;
    }

    .af-notification-item {
        grid-template-columns: 1fr;
    }

    .af-notification-item__icon {
        width: 2.2rem;
        height: 2.2rem;
    }

    .af-notification-item__actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .af-notification-item__actions a {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-notification-center *,
    .af-notification-center *::before,
    .af-notification-center *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.af-notification-preferences {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.24);
}

.af-notification-preferences > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.6rem;
    padding: 0.65rem 0.8rem;
    cursor: pointer;
    list-style: none;
}

.af-notification-preferences > summary::-webkit-details-marker {
    display: none;
}

.af-notification-preferences > summary > svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--af-muted);
    transition: transform 160ms ease;
}

.af-notification-preferences[open] > summary > svg {
    transform: rotate(180deg);
}

.af-notification-preferences__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(142, 229, 211, 0.2);
    border-radius: 0.4rem;
    color: var(--af-accent-strong);
    background: rgba(20, 184, 166, 0.07);
}

.af-notification-preferences__icon svg {
    width: 1rem;
    height: 1rem;
}

.af-notification-preferences summary strong,
.af-notification-preferences summary small {
    display: block;
}

.af-notification-preferences summary strong {
    color: var(--af-text);
    font-size: 0.74rem;
}

.af-notification-preferences summary small {
    margin-top: 0.1rem;
    color: var(--af-muted);
    font-size: 0.65rem;
}

.af-notification-preferences__form {
    display: grid;
    gap: 1rem;
    padding: 0.85rem;
    border-top: 1px solid rgba(226, 232, 240, 0.1);
}

.af-notification-preferences fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.af-notification-preferences legend,
.af-notification-preferences__schedule > label > span {
    margin-bottom: 0.4rem;
    color: var(--af-muted);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.af-notification-preferences__toggles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

.af-notification-preferences__toggles label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.38rem;
    color: var(--af-text);
    background: rgba(226, 232, 240, 0.03);
    font-size: 0.66rem;
}

.af-notification-preferences__toggles label > svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--af-accent-strong);
}

.af-notification-preferences input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    appearance: auto;
    border: revert;
    background: revert;
    accent-color: var(--af-accent);
}

.af-notification-preferences__schedule {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(13rem, 1.2fr) minmax(8rem, 0.6fr) minmax(8rem, 0.6fr);
    align-items: end;
    gap: 0.6rem;
}

.af-notification-preferences__schedule > label > span {
    display: block;
}

.af-notification-preferences select,
.af-notification-preferences input[type="time"] {
    width: 100%;
    min-height: 2.35rem;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 0.38rem;
    color: var(--af-text);
    background: rgba(15, 23, 42, 0.62);
    font-size: 0.7rem;
}

.af-notification-preferences select {
    padding: 0.45rem 0.55rem;
}

.af-notification-preferences input[type="time"] {
    padding: 0.4rem 0.5rem;
}

.af-notification-preferences__quiet-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.35rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.38rem;
    background: rgba(226, 232, 240, 0.03);
}

.af-notification-preferences__quiet-toggle strong,
.af-notification-preferences__quiet-toggle small {
    display: block;
}

.af-notification-preferences__quiet-toggle strong {
    color: var(--af-text);
    font-size: 0.68rem;
}

.af-notification-preferences__quiet-toggle small {
    color: var(--af-muted);
    font-size: 0.61rem;
}

.af-notification-preferences__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.af-notification-preferences__footer > span,
.af-notification-preferences__footer > button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.af-notification-preferences__footer > span {
    color: var(--af-muted);
    font-size: 0.64rem;
}

.af-notification-preferences__footer svg {
    width: 0.95rem;
    height: 0.95rem;
}

.af-notification-preferences__footer > button {
    min-height: 2.3rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(142, 229, 211, 0.3);
    border-radius: 0.38rem;
    color: var(--af-accent-strong);
    background: rgba(20, 184, 166, 0.08);
    font-size: 0.68rem;
    font-weight: 700;
}

.af-notification-preferences summary:focus-visible,
.af-notification-preferences label:focus-within,
.af-notification-preferences select:focus-visible,
.af-notification-preferences input:focus-visible,
.af-notification-preferences__footer > button:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 2px;
}

@media (max-width: 960px) {
    .af-notification-preferences__toggles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .af-notification-preferences__schedule {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .af-notification-preferences__toggles,
    .af-notification-preferences__schedule {
        grid-template-columns: 1fr;
    }

    .af-notification-preferences__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .af-notification-preferences__footer > button {
        justify-content: center;
        width: 100%;
    }
}

/* Persistent notification indicator in portal topbars. */
.af-notification-indicator {
    display: flex;
    align-items: center;
}

.af-notification-indicator__trigger {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(214, 221, 230, 0.12);
    border-radius: 0.5rem;
    color: var(--af-muted);
    background: rgba(255, 255, 255, 0.04);
}

.af-notification-indicator__trigger > svg {
    width: 1.15rem;
    height: 1.15rem;
}

.af-notification-indicator__trigger > span {
    position: absolute;
    top: -0.28rem;
    right: -0.28rem;
    display: grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.22rem;
    border: 2px solid var(--af-bg);
    border-radius: 999px;
    color: #fff;
    background: #e11d48;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
}

.af-notification-indicator__trigger:hover {
    border-color: rgba(49, 198, 168, 0.42);
    color: var(--af-accent-strong);
    background: rgba(49, 198, 168, 0.1);
}

.af-notification-popover {
    width: min(24rem, calc(100vw - 1rem));
    color: var(--af-text);
    background: #0c1116;
}

.af-notification-popover > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem;
}

.af-notification-popover > header span,
.af-notification-popover > header strong {
    display: block;
}

.af-notification-popover > header span {
    color: var(--af-accent-strong);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.af-notification-popover > header strong {
    margin-top: 0.08rem;
    color: var(--af-text);
    font-size: 0.82rem;
}

.af-notification-popover > header button {
    min-height: 1.9rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(142, 229, 211, 0.2);
    border-radius: 0.35rem;
    color: var(--af-accent-strong);
    background: rgba(20, 184, 166, 0.06);
    font-size: 0.61rem;
    font-weight: 700;
}

.af-notification-popover__feed {
    max-height: 20rem;
    overflow-y: auto;
    border-top: 1px solid rgba(226, 232, 240, 0.08);
    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

.af-notification-popover__feed > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    min-height: 4rem;
    padding: 0.62rem 0.75rem;
    border-left: 2px solid transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.06);
    background: rgba(226, 232, 240, 0.015);
}

.af-notification-popover__feed > a:last-child {
    border-bottom: 0;
}

.af-notification-popover__feed > a[data-read="false"] {
    border-left-color: var(--af-accent);
    background: rgba(20, 184, 166, 0.055);
}

.af-notification-popover__feed > a[data-tone="warning"] {
    border-left-color: #fbbf24;
}

.af-notification-popover__feed > a[data-tone="danger"] {
    border-left-color: #fb7185;
}

.af-notification-popover__feed > a:hover {
    background: rgba(226, 232, 240, 0.06);
}

.af-notification-popover__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 0.38rem;
    color: var(--af-accent-strong);
    background: rgba(226, 232, 240, 0.035);
}

.af-notification-popover__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.af-notification-popover__feed > a strong,
.af-notification-popover__feed > a small {
    display: block;
}

.af-notification-popover__feed > a strong {
    overflow: hidden;
    color: var(--af-text);
    font-size: 0.68rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.af-notification-popover__feed > a small {
    margin-top: 0.14rem;
    color: var(--af-muted);
    font-size: 0.6rem;
}

.af-notification-popover__empty {
    display: grid;
    place-items: center;
    min-height: 8rem;
    padding: 1rem;
    color: var(--af-muted);
    text-align: center;
}

.af-notification-popover__empty svg {
    width: 1.4rem;
    height: 1.4rem;
    margin-bottom: 0.4rem;
    color: var(--af-accent-strong);
}

.af-notification-popover__empty strong,
.af-notification-popover__empty small {
    display: block;
}

.af-notification-popover__empty strong {
    color: var(--af-text);
    font-size: 0.7rem;
}

.af-notification-popover__empty small {
    margin-top: 0.12rem;
    font-size: 0.61rem;
}

.af-notification-popover > footer {
    padding: 0.55rem 0.7rem;
}

.af-notification-popover > footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2rem;
    color: var(--af-accent-strong);
    font-size: 0.66rem;
    font-weight: 700;
}

.af-notification-popover > footer svg {
    width: 0.85rem;
    height: 0.85rem;
}

.af-notification-indicator__trigger:focus-visible,
.af-notification-popover button:focus-visible,
.af-notification-popover a:focus-visible {
    outline: 3px solid rgba(142, 229, 211, 0.44);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .af-notification-popover {
        width: calc(100vw - 0.75rem);
    }
}