/* Editing and administration share one presentation contract. Domain fields,
   endpoints, and outer page gutters remain application-owned. */
:root { --app-workspace-header-height: var(--app-header-height-desktop); }
@media (max-width: 1024px) {
    :root { --app-workspace-header-height: var(--app-header-height-mobile); }
}
:root.header-scroll-hidden { --app-workspace-header-height: 0px; }

.app-workspace {
    width: 100%;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--app-space-4);
    --app-section-nav-height: 64px;
}
.app-workspace > *, .app-workspace form, .app-workspace section { min-width: 0; }
.app-workspace-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 20px 24px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-hero);
    background: linear-gradient(115deg, var(--app-surface), color-mix(in srgb, var(--app-primary) 5%, var(--app-surface)));
}
.app-workspace-heading h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.app-workspace-heading p { margin: 8px 0 0; color: var(--app-text-muted); max-width: 68ch; }
.app-workspace-heading .back-link { display: inline-flex; margin-bottom: 8px; }
.app-section-nav {
    position: sticky;
    top: calc(var(--app-workspace-header-height) + 8px);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-card);
    background: color-mix(in srgb, var(--app-surface) 94%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: var(--app-shadow-soft);
}
.app-section-nav a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 auto;
    min-height: var(--app-touch-target);
    padding: 10px 16px;
    border-radius: var(--app-radius-control);
    color: var(--app-text-muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}
.app-section-nav a:hover { background: var(--app-hover-bg); color: var(--app-text); }
.app-section-nav a.is-active { background: var(--app-primary); color: var(--app-on-primary); }
.app-section-nav a:focus-visible { outline: 2px solid var(--app-primary); outline-offset: -2px; }
.app-section-nav .app-icon { flex: 0 0 auto; font-size: 1.15rem; }

.app-editor-section, .app-admin-panel {
    margin: 0;
    padding: clamp(16px, 1.6vw, 24px);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-card);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
    scroll-margin-top: calc(var(--app-workspace-header-height) + var(--app-section-nav-height, 64px) + 24px);
}
.app-editor-section h2, .app-editor-section > legend, .app-admin-panel h2 {
    margin: 0 0 16px;
    padding: 0;
    float: none;
    width: auto;
    color: var(--app-text);
    font-size: clamp(1.125rem, 1.6vw, 1.4rem);
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: -.02em;
}
.app-editor-section > legend { float: left; width: 100%; }
.app-editor-section > legend + * { clear: both; }
.app-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.app-editor-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-editor-grid > * { min-width: 0; }
.app-editor-grid__full { grid-column: 1 / -1; }
.app-editor-media { display: grid; gap: 16px; }
.app-editor-media-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.app-workspace :is(.form-control, .form-select, .form-dating) {
    min-height: var(--app-control-height);
    border: 1px solid var(--app-control-border);
    border-radius: var(--app-radius-control);
    background-color: var(--app-field-bg);
    color: var(--app-text);
    font-size: 1rem;
    box-shadow: none;
}
.app-workspace :is(.form-control, .form-select, .form-dating):focus {
    border-color: var(--app-primary);
    box-shadow: var(--app-focus-ring);
    outline: 0;
}
.app-workspace textarea { resize: vertical; }
.app-workspace :is(.form-control, .form-select, .form-dating)[aria-invalid="true"] { border-color: var(--app-danger); }
.app-workspace :is(.form-label, .auto-field label) { color: var(--app-text-muted); font-size: .875rem; font-weight: 700; }
.app-workspace .app-sticky-actions { justify-content: flex-end; align-items: center; border: 1px solid var(--app-border); border-radius: var(--app-radius-card); box-shadow: var(--app-shadow-soft); }
.app-workspace .app-sticky-actions__hint { margin-block: 0; }

.app-admin-workspace { gap: 20px; }
.app-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.app-admin-grid > * { min-width: 0; }
.app-admin-grid__full { grid-column: 1 / -1; }
.app-admin-workspace .admin-section-title { margin: 0; font-size: 1.25rem; font-weight: 750; }
.app-admin-workspace .app-admin-panel .app-button { min-height: var(--app-touch-target); }
.app-admin-panel .admin-panel-content { display: grid; gap: 12px; min-width: 0; }
.app-admin-panel .admin-panel-content > h2 { margin-bottom: 0; }
.app-admin-panel :is(small, .field-help) { max-width: 64ch; }
.app-admin-workspace :is(.admin-section, .admin-moderation) { min-width: 0; }
.app-admin-workspace :is(.admin-filter-row, .section-head-inline) { flex-wrap: wrap; gap: 12px; }
.app-admin-workspace .admin-promotion-form > button { justify-self: start; }
.app-admin-workspace :is(.table-responsive, .admin-table-wrap, .app-table-wrap) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-card);
    background: var(--app-surface);
}
.app-admin-workspace :is(.table, .admin-table) { margin: 0; }
.app-admin-workspace :is(.table, .admin-table) th { background: var(--app-surface-2); }
.app-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.app-stat-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-card);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
}
.app-stat-card__label { color: var(--app-text-muted); font-size: .875rem; font-weight: 650; }
.app-stat-card__value { font-size: clamp(1.6rem, 2vw, 2.25rem); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; }
.app-stat-card__value--success { color: var(--app-success); }
.app-stat-card__value--warning { color: var(--app-warning); }
.app-stat-card__value--info { color: var(--app-info); }
.app-stat-card p { margin: 0; overflow-wrap: anywhere; }

/* Main media and thumbnails occupy separate, explicitly bounded rows.
   Absolute fills prevent intrinsic portrait dimensions from expanding a row. */
.app-profile-gallery { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; }
.app-profile-gallery__stage {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(280px, 60dvh, 560px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-card);
    background: var(--app-surface-2);
}
.app-profile-gallery__stage img, .app-profile-gallery__stage video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.app-profile-gallery__rail {
    display: flex;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding: 4px;
}
.app-profile-gallery__thumb {
    position: relative;
    display: block;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-control);
    background: var(--app-surface-2);
}
.app-profile-gallery__thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.app-profile-gallery__thumb:hover { border-color: var(--app-primary); }
.app-profile-gallery :is(a, button):focus-visible { outline: 2px solid var(--app-primary); outline-offset: -3px; }

@media (max-height: 500px) { .app-profile-gallery__stage { height: min(65dvh, 360px); } }

@media (max-width: 1100px) {
    .app-editor-grid, .app-editor-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-editor-media-grid, .app-admin-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .app-workspace-heading { padding: 16px; }
    .app-editor-grid, .app-editor-grid--wide { grid-template-columns: minmax(0, 1fr); }
    .app-section-nav a { padding-inline: 12px; }
    .app-workspace .app-sticky-actions { flex-wrap: wrap; }
    .app-workspace .app-sticky-actions__hint { flex-basis: 100%; }
    .app-admin-workspace { gap: 16px; }
}

/* Network administration: one heading, ribbon and responsive row vocabulary. */
.page-shell.app-admin-workspace, .app-admin-page { padding-block: var(--app-content-gap); }
.app-admin-page { padding-inline: var(--app-page-padding-inline); }
.app-dashboard { display: grid; gap: 24px; min-width: 0; }
.app-dashboard section { display: grid; gap: 12px; }
.app-dashboard h3 { margin: 0; font-size: 1rem; font-weight: 750; color: var(--app-text-muted); }
.app-admin-note { margin: 0; max-width: 100ch; color: var(--app-text-muted); font-size: .875rem; line-height: 1.6; }
.app-stat-card__link { align-self: end; color: var(--app-primary); font-size: .875rem; font-weight: 700; text-decoration: none; }
.app-admin-list { display: grid; gap: 12px; min-width: 0; }
.app-admin-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(100px, .5fr) minmax(180px, 1fr); align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--app-border); border-radius: var(--app-radius-card); background: var(--app-surface); }
.app-admin-row > * { min-width: 0; }
.app-admin-row--selectable { grid-template-columns: 20px minmax(0, 1.6fr) minmax(100px, .5fr) minmax(180px, 1fr); }
.app-admin-row--listing { grid-template-columns: 80px minmax(0, 1fr) auto; }
.app-admin-row__identity { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; }
.app-admin-row__media { display: grid; place-items: center; width: 72px; height: 80px; overflow: hidden; border-radius: var(--app-radius-control); background: var(--app-surface-2); }
.app-admin-row--listing .app-admin-row__media { width: 80px; height: 60px; }
.app-admin-row__media img { width: 100%; height: 100%; object-fit: cover; }
.app-admin-row__media .app-icon { font-size: 1.75rem; color: var(--app-text-muted); }
.app-admin-row__title { display: block; color: var(--app-text); font-size: 1rem; font-weight: 750; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.app-admin-row__title:hover { color: var(--app-primary); }
.app-admin-row__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--app-text-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.app-admin-row__meta span { display: inline-flex; align-items: center; gap: 4px; }
.app-admin-row__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-admin-badge { display: inline-flex; align-items: center; padding: 5px 9px; font-size: .75rem; font-weight: 700; border-radius: var(--app-radius-control); background: var(--app-surface-2); color: var(--app-text-muted); }
.app-admin-badge--success { color: var(--app-success); background: color-mix(in srgb, var(--app-success) 12%, var(--app-surface)); }
.app-admin-badge--warning { color: var(--app-warning); background: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface)); }
.app-admin-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.app-admin-row__actions form { margin: 0; }
.app-admin-row__actions .app-button { min-height: 40px; }
.app-admin-more { position: relative; max-width: 100%; }
.app-admin-more summary { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); color: var(--app-text-muted); font-size: .8125rem; font-weight: 700; cursor: pointer; list-style: none; }
.app-admin-more summary::-webkit-details-marker { display: none; }
.app-admin-more summary:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.app-admin-more__content { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: min(360px, 100%); margin-top: 8px; padding: 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background: var(--app-surface-2); }
.app-admin-more[open] { flex: 1 1 100%; }
.app-admin-more[open] summary { width: fit-content; margin-left: auto; }
.app-admin-more__content form:not([style]), .app-admin-more__content .input-group { max-width: 100%; }
.app-admin-list-toolbar, .app-admin-sort, .app-admin-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.app-admin-list-toolbar { justify-content: space-between; margin-block: 12px; }
.app-admin-sort { font-size: .8125rem; }
.app-admin-subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); color: var(--app-text-muted); font-weight: 650; font-size: .875rem; text-decoration: none; }
.app-admin-subnav a.is-active { background: var(--app-surface-2); border-color: var(--app-primary); color: var(--app-primary); }
.app-admin-empty { padding: 32px 16px; border: 1px dashed var(--app-border); border-radius: var(--app-radius-card); color: var(--app-text-muted); text-align: center; }
.app-admin-workspace .admin-heading, .app-admin-workspace .manage-heading { min-width: 0; }
.app-admin-workspace .manage-heading h2 { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.4rem); font-weight: 750; }
.app-admin-workspace .manage-card { padding: clamp(16px, 1.6vw, 24px); border-radius: var(--app-radius-card); }
.app-admin-workspace .table { width: 100%; border-collapse: collapse; color: var(--app-text); }
.app-admin-workspace .table :is(th,td) { padding: 12px; border-bottom: 1px solid var(--app-border); vertical-align: middle; }
.app-admin-workspace .traffic-head { flex-wrap: wrap; }
.app-admin-workspace .traffic-head .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.app-admin-workspace .traffic .d-flex { display: flex; flex-wrap: wrap; gap: 8px; }
.app-admin-workspace .traffic .text-muted { color: var(--app-text-muted); }
.app-admin-workspace .traffic .text-end { text-align: end; }
.app-admin-workspace .traffic .small { font-size: .8125rem; }
.app-admin-workspace .traffic .d-block { display: block; }
.app-admin-workspace .traffic .disabled { pointer-events: none; opacity: .5; }
.app-admin-workspace .traffic .htmx-indicator { opacity: 0; }
.app-admin-workspace .traffic .htmx-request.htmx-indicator, .app-admin-workspace .traffic .htmx-request .htmx-indicator { opacity: 1; }
@media (max-width: 1099px) {
    .app-admin-row { grid-template-columns: minmax(0, 1fr) auto; }
    .app-admin-row--selectable { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .app-admin-row__actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--app-border); }
    .app-admin-row--listing { grid-template-columns: 80px minmax(0,1fr); }
}
@media (max-width: 640px) {
    .app-admin-row, .app-admin-row--selectable { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
    .app-admin-row--selectable { grid-template-columns: 20px minmax(0,1fr); }
    .app-admin-row--selectable .app-admin-row__status { grid-column: 2; }
    .app-admin-row__identity { grid-template-columns: 56px minmax(0,1fr); gap: 12px; }
    .app-admin-row__media { width: 56px; height: 64px; }
    .app-admin-row--listing { grid-template-columns: 64px minmax(0,1fr); }
    .app-admin-row--listing .app-admin-row__media { width: 64px; height: 52px; }
    .app-dashboard { gap: 20px; }
}

.app-admin-error { padding: 16px; border: 1px solid var(--app-danger); border-radius: var(--app-radius-card); background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface)); color: var(--app-text); }

.app-admin-inline-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-block: 16px; }
.app-admin-inline-controls input { flex: 1 1 16rem; max-width: 36ch; min-width: 0; }
.app-admin-workspace .admin-panel__title { flex-wrap: wrap; }
.app-admin-workspace .admin-panel { margin: 0 0 20px; }
.app-admin-workspace .blacklist-form { flex-wrap: wrap; }
.app-admin-workspace .blacklist-form input { flex: 1 1 20ch; min-width: 0; max-width: 64ch; }

@media (max-width: 640px) {
    .app-dashboard .app-stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 12px; }
    .app-dashboard .app-stat-card { padding: 16px; gap: 8px; }
    .app-dashboard .app-stat-card__label { overflow-wrap: anywhere; }
    .app-dashboard .app-stat-card__value { overflow-wrap: anywhere; }
}

.app-admin-workspace .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-hover-bg: var(--app-hover-bg);
    --bs-table-border-color: var(--app-border);
}

/* Moderation controls and maintenance operations share the same inner composition. */
.app-admin-bulk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background: var(--app-surface-2); }
.app-admin-selection { display: inline-flex; align-items: center; gap: 8px; min-height: var(--app-touch-target); font-weight: 650; }
.app-admin-selection-count { color: var(--app-text-muted); font-size: .875rem; }
.app-admin-bulk-toolbar small { flex-basis: 100%; }
.app-admin-row input[type="checkbox"], .app-admin-selection input { width: 18px; height: 18px; accent-color: var(--app-primary); }
.app-admin-row__actions form:not(.app-admin-owner-form) { display: contents; }
.app-admin-more > summary { display: flex; align-items: center; gap: 6px; min-height: var(--app-touch-target); }
.app-admin-row--listing { grid-template-columns: minmax(0, 1.6fr) minmax(100px, .5fr) minmax(180px, 1fr); }
.app-admin-row--listing.app-admin-row--selectable { grid-template-columns: 20px minmax(0, 1.6fr) minmax(100px, .5fr) minmax(180px, 1fr); }
.app-admin-row--listing .app-admin-row__identity { grid-template-columns: 80px minmax(0, 1fr); }
.app-admin-section-heading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.25rem; }
.app-admin-maintenance { display: grid; gap: 20px; }
.app-admin-operation { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--app-border); border-radius: var(--app-radius-card); background: var(--app-surface); }
.app-admin-operation h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
.app-admin-operation__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-admin-operation__actions form { display: contents; }
.app-admin-operation__result { min-width: 0; overflow-wrap: anywhere; }
.app-admin-rejection { display: grid; gap: 16px; }
.app-admin-rejection form { display: grid; gap: 16px; }
.app-admin-rejection textarea { width: 100%; max-width: 90ch; min-height: 8rem; }
.app-admin-rejection .app-admin-row__identity { max-width: 90ch; }
@media (min-width: 1100px) { .app-admin-maintenance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) {
    .app-admin-row--listing { grid-template-columns: minmax(0, 1fr) auto; }
    .app-admin-row--listing.app-admin-row--selectable { grid-template-columns: 20px minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
    .app-admin-row--listing, .app-admin-row--listing.app-admin-row--selectable { grid-template-columns: 20px minmax(0, 1fr); }
    .app-admin-row--listing .app-admin-row__identity { grid-template-columns: 64px minmax(0, 1fr); }
    .app-admin-bulk-toolbar { padding: 12px; gap: 8px 12px; }
    .app-admin-bulk-toolbar .app-button { flex: 1 1 14ch; }
}

.app-admin-queue { display: grid; gap: 16px; }

.app-admin-owner-form { flex-basis: 100%; max-width: 44ch; }
.app-admin-owner-form label { display: block; margin-bottom: 8px; }

.app-admin-job { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background: var(--app-surface-2); }
.app-admin-job--success { border-color: color-mix(in srgb, var(--app-success) 45%, var(--app-border)); }
.app-admin-job--danger { border-color: var(--app-danger); }
.app-admin-job__message { margin: 0 0 12px; color: var(--app-primary); }
.app-admin-job__title { font-weight: 700; }
.app-admin-job__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.app-admin-job__metric { display: grid; gap: 4px; min-width: 0; }
.app-admin-job__metric strong { font-size: 1.2rem; }
.app-admin-job__metric span { font-size: .8125rem; color: var(--app-text-muted); }
.app-admin-job__details summary { padding-block: 8px; color: var(--app-text-muted); cursor: pointer; }
.app-admin-job__json { max-height: 20rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font-size: .75rem; }

/* Introductory content and results span the operation grid on every site. */
.app-admin-maintenance > :is(header, h2, p, [aria-live], .app-admin-maintenance__result) { grid-column: 1 / -1; }
.app-admin-maintenance__heading { display: grid; gap: 8px; }
.app-admin-maintenance__heading :is(h2, p) { margin: 0; }
.app-admin-sort > a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--app-touch-target); padding: 8px 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); color: var(--app-text); background: var(--app-surface); text-decoration: none; }
.app-admin-sort > a:hover, .app-admin-sort > a[aria-current] { border-color: var(--app-primary); background: var(--app-accent-soft); }
.app-admin-sort > a:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }

/* Inline media navigation is shared; icons rendered by child components are
   styled here globally, where Blazor isolation cannot hide them. */
.app-gallery-navigation { position: absolute; top: 50%; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(15,11,16,.62); color: #fff; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.app-gallery-navigation--previous { left: 12px; }
.app-gallery-navigation--next { right: 12px; }
.app-gallery-navigation .app-svg-icon { width: 1em; height: 1em; font-size: 1.45rem; }
.app-gallery-navigation:hover { background: rgba(15,11,16,.82); border-color: rgba(255,255,255,.45); }
.app-gallery-navigation:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
@media(max-width:640px) { .app-gallery-navigation { width: 44px; height: 44px; } }
.app-profile-gallery__thumb[aria-pressed="true"] { border: 2px solid var(--app-primary); }