:root {
    --bkf-ink: #1e1e1e;
    --bkf-paper: #f5f7f5;
    --bkf-muted: #6f7479;
    --bkf-line: rgba(30, 30, 30, .1);
    --bkf-radius: .75rem;
}

body.bkf-approvals {
    background: var(--bkf-paper);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.dark body.bkf-approvals {
    --bkf-ink: #edf2f7;
    --bkf-paper: #111827;
    --bkf-muted: #a0aec0;
    --bkf-line: rgba(255, 255, 255, .12);
    background: #111827;
    color: #edf2f7;
}

html.dark body.bkf-approvals #page-header,
html.dark body.bkf-approvals .block,
html.dark body.bkf-approvals .panel,
html.dark body.bkf-approvals .metric-card,
html.dark body.bkf-approvals .empty {
    background-color: #182235;
    border-color: rgba(255, 255, 255, .09);
    color: #edf2f7;
}

html.dark body.bkf-approvals .block-header-default,
html.dark body.bkf-approvals .bg-body-light,
html.dark body.bkf-approvals .history-item,
html.dark body.bkf-approvals .client-list div {
    background-color: #202b40 !important;
}

html.dark body.bkf-approvals .table,
html.dark body.bkf-approvals .form-label,
html.dark body.bkf-approvals .fw-semibold,
html.dark body.bkf-approvals .block-title,
html.dark body.bkf-approvals .h2 {
    color: #edf2f7;
}

html.dark body.bkf-approvals .text-muted,
html.dark body.bkf-approvals .project-label,
html.dark body.bkf-approvals .version-badge,
html.dark body.bkf-approvals code {
    color: #a0aec0 !important;
}

html.dark body.bkf-approvals .table > :not(caption) > * > * {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .08);
    color: inherit;
}

html.dark body.bkf-approvals .form-control,
html.dark body.bkf-approvals .form-select,
html.dark body.bkf-approvals .panel input,
html.dark body.bkf-approvals .panel select,
html.dark body.bkf-approvals .panel textarea,
html.dark body.bkf-approvals .version-form input,
html.dark body.bkf-approvals .version-form textarea {
    background-color: #111827;
    border-color: rgba(255, 255, 255, .14);
    color: #edf2f7;
}

html.dark body.bkf-approvals .form-control::placeholder,
html.dark body.bkf-approvals textarea::placeholder {
    color: #718096;
}

html.dark body.bkf-approvals .ops-hero,
html.dark body.bkf-approvals .approval-card__details,
html.dark body.bkf-approvals .approval-card__version {
    border-color: rgba(255, 255, 255, .1);
}

html.dark body.bkf-approvals .approval-card {
    background: #182235;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: none;
}

html.dark body.bkf-approvals .task-column,
html.dark body.bkf-approvals .task-card,
html.dark body.bkf-approvals .task-create {
    background: #182235;
    border-color: rgba(255, 255, 255, .09);
}

html.dark body.bkf-approvals .task-column {
    background: rgba(255, 255, 255, .03);
}

html.dark body.bkf-approvals .task-column__head strong,
html.dark body.bkf-approvals .task-comment {
    background: #202b40;
    border-color: rgba(255, 255, 255, .09);
}

html.dark body.bkf-approvals .approval-progress__bar {
    background: rgba(255, 255, 255, .08);
}

html.dark body.bkf-approvals .approval-progress__bar span {
    background: linear-gradient(135deg, #edf2f7 0%, #8bd3ff 100%);
}

html.dark body.bkf-approvals .approval-chip {
    border-color: rgba(255, 255, 255, .12);
    color: #a0aec0;
}

html.dark body.bkf-approvals .approval-chip:hover,
html.dark body.bkf-approvals .approval-chip.is-active {
    background: #edf2f7;
    border-color: #edf2f7;
    color: #111827;
}

.bkf-public-header {
    align-items: center;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(18px);
    border: 1px solid var(--bkf-line);
    border-radius: 999px;
    display: flex;
    justify-content: space-between;
    margin: 24px clamp(16px, 4vw, 56px) 0;
    min-height: 64px;
    padding: 0 24px;
}

.bkf-public-brand {
    color: var(--bkf-ink);
    text-decoration: none;
}

.bkf-flow-brand {
    align-items: baseline;
    color: inherit;
    display: inline-flex;
    gap: .3rem;
    letter-spacing: 0;
    line-height: 1;
}

.bkf-flow-brand span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 900;
}

.bkf-flow-brand em {
    font-family: Marcellus, Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

.bkf-public-header nav {
    display: flex;
    gap: 18px;
}

.bkf-public-header nav a {
    color: var(--bkf-muted);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
}

.bkf-login-page {
    background: #020202;
    color: #f5f5f5;
}

.bkf-login-page #page-container,
.bkf-login-page #main-container {
    min-height: 100vh;
}

.bkf-login-page #main-container {
    background: #020202;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2rem);
    position: relative;
    overflow: hidden;
}

.login-mesh {
    height: 100%;
    inset: 0;
    opacity: .84;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 0;
}

.login-shell {
    display: grid;
    max-width: 430px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.panel.login-card {
    background: #121212;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: none;
    color: #f5f5f5;
    padding: clamp(2rem, 5vw, 3.4rem);
    text-align: center;
}

.login-card h1 {
    color: #f7f7f7;
    font-size: clamp(2rem, 5vw, 2.7rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 2rem;
}

.login-card h1 .bkf-flow-brand {
    gap: .5rem;
    justify-content: center;
}

.login-card h1 .bkf-flow-brand span {
    font-size: 1em;
}

.login-card h1 .bkf-flow-brand em {
    font-size: .92em;
}

.login-card > p {
    color: rgba(255, 255, 255, .52);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1.7rem;
}

.panel.login-card label {
    color: rgba(255, 255, 255, .56);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: .85rem;
    text-align: left;
    text-transform: none;
}

.panel.login-card input {
    background: #030303;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 650;
    margin-top: .45rem;
    min-height: 58px;
    padding: 0 1rem;
}

.panel.login-card input::placeholder {
    color: rgba(255, 255, 255, .38);
}

.panel.login-card input:focus {
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
    outline: none;
}

.panel.login-card button {
    background: #f2f2f2;
    border: 0;
    border-radius: 8px;
    color: #050505;
    font-size: 1rem;
    font-weight: 800;
    min-height: 58px;
    width: 100%;
}

.panel.login-card button:hover {
    background: #fff;
}

.eyebrow,
.category {
    align-items: center;
    color: var(--bkf-ink);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 800;
    gap: .75rem;
    letter-spacing: .14em;
    margin: 0 0 .875rem;
    text-transform: uppercase;
}

.eyebrow::before {
    background: var(--bkf-ink);
    content: "";
    height: 1px;
    width: 32px;
}

.panel {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    box-shadow: 0 12px 36px rgba(30, 30, 30, .05);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.panel h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.panel label,
.decision-form label {
    color: #343a40;
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.panel input,
.panel select,
.panel textarea,
.decision-form textarea,
.filter-bar select,
.version-form input,
.version-form textarea {
    background-color: #fff;
    border: 1px solid #dfe3e7;
    border-radius: .5rem;
    display: block;
    font-size: .92rem;
    margin-top: .45rem;
    padding: .72rem .85rem;
    width: 100%;
}

.panel button,
.decision-form button,
.version-form button {
    border-radius: 999px;
}

.stack {
    display: grid;
    gap: 1.25rem;
}

.hero-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.hero-row h1 {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0;
}

.counter {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: 999px;
    color: var(--bkf-muted);
    font-size: .78rem;
    font-weight: 700;
    padding: .5rem .85rem;
}

.admin-grid {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr);
}

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

.metric-card {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    color: inherit;
    display: block;
    padding: 1.25rem;
    text-decoration: none;
}

.metric-card span {
    color: var(--bkf-muted);
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.metric-card strong {
    font-size: 2rem;
    line-height: 1;
}

.filter-bar {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(160px, 1fr)) auto auto;
    margin: 1rem 0;
}

.button-link {
    align-items: center;
    background: #1e1e1e;
    border: 1px solid #1e1e1e;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    justify-content: center;
    letter-spacing: .08em;
    min-height: 42px;
    padding: .65rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.button-ghost {
    background: transparent;
    border-color: #d3d7dc;
    color: var(--bkf-ink);
}

.ops-hero {
    align-items: center;
    border-bottom: 1px solid var(--bkf-line);
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
}

.ops-hero h2 {
    color: var(--bkf-ink);
    font-size: clamp(1.55rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    margin: 0 0 .5rem;
}

.ops-hero p {
    color: var(--bkf-muted);
    margin: 0;
}

.approval-progress {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.approval-progress__bar {
    background: rgba(30, 30, 30, .08);
    border-radius: 999px;
    flex: 1;
    height: 8px;
    overflow: hidden;
}

.approval-progress__bar span {
    background: linear-gradient(135deg, #1e1e1e 0%, #4a5568 100%);
    display: block;
    height: 100%;
    transition: width .25s ease;
}

.approval-progress strong {
    color: var(--bkf-ink);
    font-size: .82rem;
}

.approval-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.approval-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.approval-chip {
    align-items: center;
    border: 1px solid var(--bkf-line);
    border-radius: 999px;
    color: var(--bkf-muted);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: .5rem;
    padding: .5rem .8rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.approval-chip:hover,
.approval-chip.is-active {
    background: #1e1e1e;
    border-color: #1e1e1e;
    color: #fff;
}

.approval-chip span {
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
}

.approval-filter {
    min-width: min(100%, 280px);
}

.approval-filter summary {
    list-style: none;
}

.approval-filter summary::-webkit-details-marker {
    display: none;
}

.approval-board {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.approval-card {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    box-shadow: 0 16px 42px rgba(30, 30, 30, .06);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.approval-card__preview {
    align-items: center;
    aspect-ratio: 16 / 10;
    background: #111;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.approval-card__preview .material-media,
.approval-card__preview .material-frame {
    height: 100%;
    max-height: none;
    min-height: 0;
    object-fit: contain;
    width: 100%;
}

.media-preview-shell {
    display: grid;
    height: 100%;
    place-items: center;
    position: relative;
    width: 100%;
}

.media-open {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    bottom: .8rem;
    color: #111;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .48rem .72rem;
    position: absolute;
    right: .8rem;
    text-transform: uppercase;
    z-index: 2;
}

.media-open:hover {
    background: #fff;
}

.approval-card__preview .link-action {
    align-self: end;
    background: rgba(0, 0, 0, .7);
    border-radius: 999px;
    margin: 1rem;
    padding: .55rem .8rem;
}

.approval-card__body {
    display: grid;
    gap: .8rem;
    padding: 1.1rem;
}

.approval-card__top,
.approval-card__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

.approval-card h3 {
    color: var(--bkf-ink);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.18;
    margin: 0;
}

.approval-card__category {
    color: var(--bkf-muted);
    font-size: .82rem;
    font-weight: 700;
    margin: -.3rem 0 0;
}

.approval-card__meta {
    color: var(--bkf-muted);
    font-size: .75rem;
}

.approval-card__details {
    border-top: 1px dashed var(--bkf-line);
    color: var(--bkf-muted);
    display: grid;
    font-size: .84rem;
    gap: .65rem;
    padding-top: .85rem;
}

.approval-card__details summary {
    color: var(--bkf-ink);
    cursor: pointer;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    list-style: none;
    text-transform: uppercase;
}

.approval-card__details summary::-webkit-details-marker {
    display: none;
}

.approval-card__details p {
    margin: 0;
}

.approval-card__version {
    border-top: 1px dashed var(--bkf-line);
    padding-top: .85rem;
}

.task-shell {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .34fr);
}

.task-board {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    overflow-x: auto;
    padding-bottom: .25rem;
}

.task-column {
    background: rgba(30, 30, 30, .03);
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    min-width: 240px;
    padding: .85rem;
}

.task-column__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.task-column__head span {
    color: var(--bkf-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.task-column__head strong {
    align-items: center;
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: 999px;
    color: var(--bkf-muted);
    display: inline-flex;
    font-size: .72rem;
    height: 28px;
    justify-content: center;
    min-width: 28px;
}

.task-column__list,
.task-card,
.task-comment-form {
    display: grid;
    gap: .75rem;
}

.task-card {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    padding: 1rem;
}

.task-card__head,
.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.task-card h3 {
    color: var(--bkf-ink);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.task-card p {
    color: var(--bkf-muted);
    font-size: .84rem;
    margin: 0;
}

.task-status,
.task-priority {
    border-radius: 999px;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .32rem .5rem;
    text-transform: uppercase;
}

.task-status-todo {
    background: #edf0f2;
    color: #59616a;
}

.task-status-doing {
    background: #fff4d8;
    color: #8a6500;
}

.task-status-done {
    background: #e5f7ee;
    color: #23724c;
}

.task-status-blocked {
    background: #ffe8e4;
    color: #9f382c;
}

.task-priority {
    background: #f7f8f9;
    color: var(--bkf-muted);
}

.task-priority-high {
    background: #111;
    color: #fff;
}

.task-meta {
    color: var(--bkf-muted);
    font-size: .73rem;
}

.task-status-form {
    margin: 0;
}

.task-timeline {
    border-top: 1px dashed var(--bkf-line);
    display: grid;
    gap: .55rem;
    padding-top: .75rem;
}

.task-comment {
    background: #f7f8f9;
    border-radius: .5rem;
    padding: .65rem;
}

.task-comment strong,
.task-comment time {
    display: inline-flex;
    font-size: .72rem;
}

.task-comment strong {
    color: var(--bkf-ink);
    font-weight: 800;
    margin-right: .35rem;
}

.task-comment time {
    color: var(--bkf-muted);
}

.task-create {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    padding: 1rem;
    position: sticky;
    top: 92px;
}

.task-create h3 {
    color: var(--bkf-ink);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.material-grid {
    display: grid;
    gap: 1.5rem;
}

.material-card {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.05fr);
    overflow: hidden;
}

.material-preview {
    align-items: center;
    background: #111;
    display: flex;
    justify-content: center;
    min-height: 420px;
}

.material-media,
.material-frame {
    display: block;
    height: 100%;
    max-height: 720px;
    object-fit: contain;
    width: 100%;
}

.material-frame {
    background: #fff;
    border: 0;
    min-height: 520px;
}

.material-body {
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.material-head,
.button-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.material-head h2 {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
}

.project-label,
.version-badge,
code {
    color: var(--bkf-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
}

.project-label {
    display: block;
    letter-spacing: .08em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.version-badge {
    border: 1px solid #dfe3e7;
    border-radius: 999px;
    display: inline-flex;
    margin-top: .55rem;
    padding: .25rem .5rem;
}

.status {
    border-radius: 999px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .4rem .62rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pending {
    background: #fff4d8;
    color: #8a6500;
}

.status-viewed {
    background: #edf0f2;
    color: #59616a;
}

.status-approved {
    background: #e5f7ee;
    color: #23724c;
}

.status-changes {
    background: #ffe8e4;
    color: #9f382c;
}

.nav-tabs-block {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.tab-content > .tab-pane {
    padding-bottom: 1.5rem;
}

.version-details summary {
    list-style: none;
}

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

.decision-form,
.history {
    border-top: 1px solid var(--bkf-line);
    padding-top: 1rem;
}

.history {
    display: grid;
    gap: .75rem;
}

.history-item {
    background: #f7f8f9;
    border-radius: .5rem;
    padding: .85rem;
}

.history-item time {
    color: var(--bkf-muted);
    display: block;
    font-size: .76rem;
}

.client-list,
.category-list {
    display: grid;
    gap: .7rem;
}

.client-list div {
    background: #f7f8f9;
    border: 1px solid #e6e9ec;
    border-radius: .5rem;
    display: grid;
    gap: .25rem;
    padding: .85rem;
}

.category-list form {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.version-form {
    display: grid;
    gap: .5rem;
    min-width: 260px;
}

.version-form input,
.version-form textarea {
    font-size: .82rem;
    margin-top: 0;
    padding: .55rem .65rem;
}

.version-history {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.version-history span {
    border: 1px solid #dfe3e7;
    border-radius: 999px;
    color: var(--bkf-muted);
    font-size: .72rem;
    padding: .25rem .45rem;
}

.empty,
.alert,
.success {
    border-radius: var(--bkf-radius);
    margin-bottom: 1rem;
    padding: 1rem;
}

.empty {
    background: #fff;
    border: 1px solid var(--bkf-line);
}

.alert {
    background: #ffe8e4;
    border: 1px solid #ffc7bd;
    color: #9f382c;
}

.success {
    background: #e5f7ee;
    border: 1px solid #bce7d0;
    color: #23724c;
}

.link-action {
    color: #fff;
    padding: 1rem;
}

.sync-guide {
    background: #fff;
    border: 1px solid var(--bkf-line);
    border-radius: var(--bkf-radius);
    display: grid;
    gap: .8rem;
    padding: 1rem;
}

.sync-guide h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.sync-guide p {
    color: var(--bkf-muted);
    margin: 0;
}

.sync-guide pre {
    background: #101214;
    border-radius: .5rem;
    color: #f3f4f6;
    margin: 0;
    overflow-x: auto;
    padding: 1rem;
}

.media-lightbox-open {
    overflow: hidden;
}

.media-lightbox {
    align-items: center;
    background: rgba(0, 0, 0, .82);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    position: fixed;
    z-index: 9999;
}

.media-lightbox__panel {
    background: #0b0d10;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--bkf-radius);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .4);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92vh;
    max-width: 1180px;
    overflow: hidden;
    width: min(100%, 1180px);
}

.media-lightbox__bar {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .8rem 1rem;
}

.media-lightbox__bar strong {
    font-size: .95rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-lightbox__bar button {
    background: #fff;
    border: 0;
    border-radius: 999px;
    color: #111;
    font-size: .78rem;
    font-weight: 800;
    padding: .45rem .75rem;
}

.media-lightbox__stage {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 260px;
    overflow: auto;
}

.media-lightbox__stage img,
.media-lightbox__stage video {
    display: block;
    max-height: calc(92vh - 64px);
    max-width: 100%;
    object-fit: contain;
}

.media-lightbox__stage iframe {
    background: #fff;
    border: 0;
    height: calc(92vh - 64px);
    width: 100%;
}

@media (max-width: 991.98px) {
    .login-shell,
    .admin-grid,
    .metric-grid,
    .filter-bar,
    .material-card {
        grid-template-columns: 1fr;
    }

    .ops-hero,
    .approval-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .approval-board,
    .task-shell {
        grid-template-columns: 1fr;
    }

    .task-board {
        grid-template-columns: repeat(4, minmax(240px, 1fr));
    }

    .task-create {
        position: static;
    }

    .hero-row,
    .material-head,
    .button-row {
        align-items: stretch;
        flex-direction: column;
    }

    .material-preview {
        min-height: 260px;
    }
}