/* Responsive adjustments */

.site-footer {
    padding: 2rem 0;
    text-align: center;
}
.site-footer-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.site-footer-link:hover,
.site-footer-link:focus {
    color: var(--accent);
    text-decoration: underline;
}

/* Compact admin treatment */

.admin-page {
    --ink: #1d2327;
    --muted: #646970;
    --line: #dcdcde;
    --paper: #f0f0f1;
    --panel: #fff;
    --field: #fff;
    background: var(--paper);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.admin-page .site-header {
    width: 100%;
    padding: 0.55rem 1rem;
    background: #1d2327;
    color: #f0f0f1;
}
.admin-page .brand {
    color: #f0f0f1;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}
.admin-page .nav {
    gap: 0.35rem;
}

.admin-page .nav a,
.admin-page .button,
.admin-page button,
.admin-page input[type="submit"] {
    padding: 0.35rem 0.6rem;
    border-color: #2271b1;
    background: #2271b1;
    color: #fff;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
}

.admin-page .button.secondary,
.admin-page button.secondary,
.admin-page .tree-toggle {
    background: #fff;
    color: #2271b1;
}
.admin-page .gallery-row-actions {
    white-space: nowrap;
}
.admin-page .gallery-row-actions .gallery-row-action {
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
}

.admin-page .site-main,
.admin-page .site-footer {
    width: min(1280px, calc(100% - 2rem));
}

.admin-page .hero,
.admin-page .panel {
    padding: 1rem;
    border-color: #c3c4c7;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.admin-page .hero h1,
.admin-page .panel h1,
.admin-page .panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    line-height: 1.25;
}
.admin-page .bulk-row {
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}
.admin-page .bulk-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-weight: 600;
}

.admin-page input,
.admin-page textarea,
.admin-page select {
    min-height: 2rem;
    padding: 0.35rem 0.5rem;
    border-color: #8c8f94;
    border-radius: 3px;
}
.admin-page input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    min-height: 0;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}
.admin-page label:has(input[type="checkbox"]) {
    align-items: center;
}
.admin-page .admin-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    font-weight: 600;
}
.admin-devmode-panel--secondary {
    margin-top: 1rem;
    border-style: dashed;
    opacity: 0.92;
}
.admin-devmode-panel--secondary h2 {
    font-size: 1.05rem;
}
.admin-page table {
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.25;
}
.admin-page th {
    background: #f6f7f7;
    color: #1d2327;
    font-weight: 600;
}

.admin-page th,
.admin-page td {
    padding: 0.22rem 0.45rem;
    vertical-align: middle;
}
.admin-page td input[type="checkbox"] {
    width: 0.9rem;
    height: 0.9rem;
}
.admin-flag.is-enabled {
    color: #1f8a3b;
    font-weight: 800;
    display: inline-block;
    min-width: 1ch;
}
.admin-page tr:hover td {
    background: #f6f7f7;
}
.admin-page tr.is-subgallery td {
    background: #fbfbfc;
}
.admin-page .admin-thumb {
    width: 4rem;
    height: 3rem;
    border-radius: 3px;
}

.admin-page .tree-toggle,
.admin-page .tree-spacer {
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1;
}
.admin-page .tree-title {
    gap: 0.18rem;
}
.admin-page .thumbnail-progress-bar {
    height: 0.55rem;
    border-radius: 3px;
}
@media (max-width: 680px) {
.site-header {
        align-items: flex-start;
        flex-direction: column;
    }
.lightbox {
        grid-template-columns: 1fr;
        grid-template-areas: "stage";
    }
.lightbox img {
        max-width: calc(100vw - 2rem);
    }
.lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
.lightbox-previous {
        left: 0.5rem;
    }
.lightbox-next {
        right: 0.5rem;
    }
.picture-game-pair {
        grid-template-columns: 1fr;
    }
.picture-game-choice {
        grid-template-rows: minmax(15rem, 48vh) auto;
    }
}
.gallery-list-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    column-gap: 0;
    align-items: start;
    overflow: visible;
}
.gallery-list-content {
    min-width: 0;
}
.gallery-image-grid {
    min-width: 0;
}
.back-to-top-button {
    position: sticky;
    top: calc(100dvh - 5.25rem);
    z-index: 900;
    margin-left: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: max-content;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(255, 253, 248, 0.7);
    background: var(--accent);
    color: #fffdf8;
    box-shadow: 0 14px 34px rgba(54, 38, 20, 0.24);
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.back-to-top-button[hidden] {
    display: none;
}
.back-to-top-button.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top-button:hover,
.back-to-top-button:focus-visible {
    box-shadow: 0 18px 44px rgba(54, 38, 20, 0.32);
    transform: translateY(-2px);
}
.back-to-top-button span:first-child {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.18);
    font-size: 1.05rem;
}
@media (max-width: 980px) {
.gallery-list-frame {
        display: block;
    }
.back-to-top-button {
        position: fixed;
        right: 0.85rem;
        bottom: 0.85rem;
        top: auto;
        padding: 0.65rem 0.8rem;
    }
}

/* Public design refinements */
.public-page .hero {
    position: relative;
    display: grid;
    gap: 0.7rem;
    overflow: hidden;
    padding: clamp(0.85rem, 1.8vw, 1.25rem);
    margin-bottom: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius, 16px);
    background: var(--gallery-panel);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.public-page .hero-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.public-page .hero-meta {
    display: grid;
    justify-items: end;
    gap: 0.45rem;
    flex: 0 0 min(24rem, 42vw);
    min-width: 14rem;
}

.public-page .hero .gallery-title-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.public-page .hero .gallery-title-bar .gallery-title {
    flex: 1 1 auto;
    min-width: 0;
}

.public-page .hero h1 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(2.05rem, 3.6vw, 3.2rem);
    font-weight: 800;
    line-height: var(--type-tight-line-height, 1.05);
    letter-spacing: var(--type-tracking-tight, -0.025em);
    overflow-wrap: normal;
    word-break: normal;
}

.public-page .hero p {
    max-width: 72ch;
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    line-height: var(--type-body-line-height, 1.5);
    opacity: 0.88;
}

.public-page .hero-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    align-items: center;
}

.public-page .hero-actions .button,
.public-page .hero-actions button {
    min-height: 0;
    padding: 0.48rem 0.75rem;
    border-radius: var(--radius, 16px);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.public-page .hero .tag-list,
.public-page .hero .breadcrumbs {
    margin: 0;
}

.public-page .hero-tags {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
    max-width: 100%;
}

.public-page .hero .tag-list {
    justify-content: flex-end;
    gap: 0.25rem;
    opacity: 0.92;
}

.public-page .hero .tag-list-label {
    font-size: 0.72rem;
}

.public-page .hero .tag {
    padding: 0.1rem 0.42rem;
    border-radius: var(--radius, 16px);
    background: var(--panel);
    color: var(--accent-dark);
    font-size: 0.76rem;
    line-height: 1.35;
}

.public-page .hero .breadcrumbs {
    font-size: 0.9rem;
    opacity: 0.7;
}

.public-page .hero .gallery-branding-logo {
    flex: 0 0 auto;
    max-width: min(9rem, 24vw);
    max-height: 4.25rem;
    object-fit: contain;
}

.public-page .hero .gallery-branding-banner {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

@media (max-width: 760px) {
    .public-page .hero-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .public-page .hero-meta {
        justify-items: start;
        min-width: 0;
        width: 100%;
    }

    .public-page .hero-actions,
    .public-page .hero .tag-list {
        justify-content: flex-start;
    }

    .public-page .hero-tags {
        justify-items: start;
    }

    .public-page .hero h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }
}
.public-page .gallery-card {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.public-page .gallery-card:hover,
.public-page .gallery-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(54, 38, 20, 0.14);
}

.public-page .gallery-card img,
.public-page .gallery-collage {
    height: 12rem;
}
.public-page .gallery-card-body {
    min-height: 8rem;
}

.public-page .gallery-card-body h2,
.public-page .image-meta h2 {
    margin: 0 0 0.25rem;
    line-height: 1.15;
}
.public-page .image-card {
    background: rgba(255, 250, 240, 0.94);
}
.public-page .image-meta p {
    margin-top: 0.25rem;
}

.gallery-card > .tag-list .tag-list-label,
.hero .tag-list .tag-list-label {
    opacity: 0.7;
}
.vote-row {
    margin-top: 0.6rem;
}
.image-stage {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

/* Keeps the generated <picture> wrapper from adding inline text spacing below thumbnails. */
.image-stage > .image-preview-link,
.image-stage > .image-preview-link picture {
    display: block;
    line-height: 0;
}
.image-vote-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 6;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.15rem 0.2rem;
    border: 0;
    border-radius: 0 8px 0 0;
    background: transparent;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: none;
    line-height: 1;
    transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* Keeps the vote overlay anchored to the actual picture instead of the surrounding card chrome. */
.image-stage > .image-vote-overlay {
    bottom: 0.25rem;
    left: 0.25rem;
}
.vote-score-badge {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.08rem 0.2rem;
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.0);
    color: var(--accent-dark);
    font-weight: 800;
    line-height: 1;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

/* Overrides the generic vote-row span width inside image overlays so the arrow, score, and hover buttons stay compact. */
.image-vote-overlay .vote-score-badge,
.image-vote-overlay .vote-score-badge span,
.image-vote-overlay .vote-action-group {
    min-width: 0;
}

/* Keeps the arrow and count visually close together in the collapsed badge. */
.vote-score-badge strong {
    display: inline-block;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}
.vote-action-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Keeps the vote buttons hidden until the user hovers the image card or focuses inside it. */
.image-vote-overlay .vote-action-group {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-0.25rem);
    transition: max-width 140ms ease, opacity 140ms ease, transform 140ms ease;
}

/* Reveals the vote buttons on hover and keyboard focus. */
.image-card:hover .image-vote-overlay .vote-action-group,
.image-card:focus-within .image-vote-overlay .vote-action-group {
    max-width: 6rem;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Adjusts the hover vote overlay once the buttons are visible. */
.image-card:hover .image-vote-overlay,
.image-card:focus-within .image-vote-overlay {
    background: rgba(15, 23, 42, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.image-card:hover .vote-score-badge,
.image-card:focus-within .vote-score-badge {
    background: rgba(255, 253, 248, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.vote-row span {
    min-width: 5.25rem;
}
.vote-row button {
    min-width: 2.1rem;
    font-weight: 800;
    line-height: 1;
}

/* Keeps the overlay buttons compact inside the image corner badge. */
.image-vote-overlay button {
    min-width: 1.9rem;
    padding: 0.15rem 0.35rem;
}
.lightbox-description {
    max-width: min(52rem, 100%);
    margin: 0;
    color: rgba(255, 253, 248, 0.9);
    overflow-wrap: anywhere;
}
.lightbox-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.lightbox-fullscreen-link {
    padding: 0.3rem 0.7rem;
    border: 1px solid #fffdf8;
    background: rgba(255, 253, 248, 0.12);
    color: #fffdf8;
    border-radius: var(--radius, 16px);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.lightbox-counter,
.lightbox-help {
    color: rgba(255, 253, 248, 0.78);
    font-size: 0.9rem;
}
.lightbox-original-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 1px solid #fffdf8;
    border-radius: var(--radius, 16px);
    color: #fffdf8;
    padding: 0.35rem 0.65rem;
    text-decoration: none;
}

/* Leaflet base layout for EXIF GPS maps.
   The map library is loaded only when a visitor opens a map, but these rules
   must already exist before Leaflet measures the canvas. Without them, tile
   panes can be initialized with incomplete dimensions and the map appears as
   broken rectangular fragments. These rules intentionally mirror the small
   subset of Leaflet 1.9.x CSS required for tile, marker, popup and control
   positioning. */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    left: 0;
    position: absolute;
    top: 0;
}
.leaflet-container {
    background: #ddd;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    touch-action: pan-x pan-y;
}
.leaflet-tile-pane {
    z-index: 200;
}
.leaflet-overlay-pane {
    z-index: 400;
}
.leaflet-shadow-pane {
    z-index: 500;
}
.leaflet-marker-pane {
    z-index: 600;
}
.leaflet-tooltip-pane {
    z-index: 650;
}
.leaflet-popup-pane {
    z-index: 700;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    user-select: none;
}
.leaflet-tile {
    filter: inherit;
    visibility: hidden;
}
.leaflet-tile-loaded {
    opacity: 1;
    visibility: inherit;
}
.leaflet-fade-anim .leaflet-tile {
    opacity: 0;
    transition: opacity 0.2s linear;
    will-change: opacity;
}
.leaflet-fade-anim .leaflet-tile-loaded {
    opacity: 1;
}
.leaflet-zoom-animated {
    transform-origin: 0 0;
}
.leaflet-zoom-hide {
    visibility: hidden;
}
.leaflet-interactive {
    cursor: pointer;
}
.leaflet-grab {
    cursor: grab;
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
    cursor: grabbing;
}
.leaflet-control {
    pointer-events: auto;
    position: relative;
    z-index: 800;
}

.leaflet-top,
.leaflet-bottom {
    pointer-events: none;
    position: absolute;
    z-index: 1000;
}
.leaflet-top {
    top: 0;
}
.leaflet-right {
    right: 0;
}
.leaflet-bottom {
    bottom: 0;
}
.leaflet-left {
    left: 0;
}
.leaflet-control {
    clear: both;
    float: left;
}
.leaflet-right .leaflet-control {
    float: right;
}
.leaflet-top .leaflet-control {
    margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
    margin-left: 10px;
}
.leaflet-right .leaflet-control {
    margin-right: 10px;
}
.leaflet-control-zoom a {
    background: #fff;
    border-bottom: 1px solid #ccc;
    color: #000;
    display: block;
    font: 700 18px/26px Arial, Helvetica, sans-serif;
    height: 26px;
    text-align: center;
    text-decoration: none;
    width: 26px;
}

.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus {
    background: #f4f4f4;
}
.leaflet-control-zoom-in {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.leaflet-control-zoom-out {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: 0;
}
.leaflet-bar {
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
.leaflet-popup {
    margin-bottom: 20px;
    position: absolute;
    text-align: center;
}
.leaflet-popup-content-wrapper {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    padding: 1px;
    text-align: left;
}
.leaflet-popup-content {
    line-height: 1.3;
    margin: 13px 24px 13px 20px;
    min-height: 1px;
}
.leaflet-popup-tip-container {
    height: 20px;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 40px;
}
.leaflet-popup-tip {
    background: #fff;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    height: 17px;
    margin: -10px auto 0;
    padding: 1px;
    transform: rotate(45deg);
    width: 17px;
}
.leaflet-popup-close-button {
    color: #757575;
    font: 16px/24px Tahoma, Verdana, sans-serif;
    height: 24px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 24px;
}

.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
    color: #111;
}
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    font-size: 11px;
    line-height: 1.4;
    padding: 0 5px;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
    pointer-events: auto;
}

.leaflet-container img.leaflet-tile,
.leaflet-container img.leaflet-marker-icon,
.leaflet-container img.leaflet-marker-shadow {
    max-height: none;
    max-width: none;
}

.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
    border: 0;
    padding: 0;
}
.leaflet-container .leaflet-control-attribution a {
    color: #0078a8;
}
.leaflet-default-icon-path {
    background-image: url("https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png");
}

/* GPS map controls for EXIF photo locations. */
.image-preview-link {
    display: block;
}
.photo-map-pin {
    align-items: center;
    --gps-pin-size: 26;
    --gps-pin-background-size: 22;
    --gps-pin-background-color: rgba(15, 23, 42, 0.55);
    --gps-pin-border-color: rgba(255, 255, 255, 0.25);
    --gps-pin-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    --gps-pin-backdrop: blur(4px);
    background: var(--gps-pin-background-color);
    border: 1px solid var(--gps-pin-border-color);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: inline-flex;
    font-size: calc(var(--gps-pin-size) * 0.55px);
    height: calc(var(--gps-pin-background-size) * 1px);
    justify-content: center;
    line-height: 1;
    min-width: calc(var(--gps-pin-background-size) * 1px);
    padding: 0;
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    width: calc(var(--gps-pin-background-size) * 1px);
    z-index: 2;
    backdrop-filter: var(--gps-pin-backdrop);
    box-shadow: var(--gps-pin-shadow);
    box-sizing: border-box;
}

.photo-map-pin[data-pin-background="off"],
.photo-map-pin[data-theme-pin-background="off"] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.photo-map-pin[data-pin-hidden="1"] {
    display: none !important;
}

.theme-gps-pin-settings {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.42);
}

.theme-gps-pin-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
}

.theme-gps-pin-preview .photo-map-pin {
    position: relative;
    right: auto;
    top: auto;
    flex: 0 0 auto;
}

.photo-map-pin:hover,
.photo-map-pin:focus-visible,
.lightbox-map-button:hover,
.lightbox-map-button:focus-visible {
    transform: translateY(-1px);
}
.lightbox-map-button {
    padding: 0.35rem 0.7rem;
}
.map-overlay {
    align-items: center;
    background: rgba(2, 6, 23, 0.82);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: fixed;
    z-index: 1200;
}
.map-overlay[hidden] {
    display: none;
}
.map-dialog {
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    color: var(--text, #111827);
    max-width: 1120px;
    padding: 1rem;
    position: relative;
    width: min(96vw, 1120px);
}
.map-dialog h2 {
    margin: 0 4.5rem 0.75rem 0;
}
.map-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.map-canvas {
    border-radius: 0.75rem;
    height: min(70vh, 720px);
    min-height: 360px;
    overflow: hidden;
    width: 100%;
}
.map-popup {
    max-width: 240px;
}
.map-popup img {
    border-radius: 0.45rem;
    display: block;
    height: auto;
    margin-bottom: 0.5rem;
    max-width: 220px;
    width: 100%;
}
.map-popup h3 {
    font-size: 1rem;
    margin: 0 0 0.35rem;
}
.map-popup p {
    margin: 0.35rem 0;
}
.map-attribution-note {
    margin: 0.65rem 0 0;
}
body.has-map-overlay {
    overflow: hidden;
}
.exif-admin-summary dl {
    display: grid;
    gap: 0.35rem 1rem;
    grid-template-columns: max-content minmax(0, 1fr);
}
.exif-admin-summary dt {
    font-weight: 700;
}
.exif-admin-summary dd {
    margin: 0;
}

/* Leaflet fullscreen split hardening.
   Browser fullscreen applies the gallery lightbox image rules to every image
   inside the fullscreen element. Leaflet also keeps old tile containers around
   during zoom/resize transitions. These local overrides keep map tiles as raw
   map tiles so the split map cannot inherit photo sizing, filters, radius or
   transitions from the fullscreen viewer. */
.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-container img.leaflet-tile,
.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-container .leaflet-tile-pane img {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    filter: none !important;
    height: 256px !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: initial !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: none !important;
    visibility: visible !important;
    width: 256px !important;
}

.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-tile-container,
.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-tile-pane {
    filter: none !important;
    opacity: 1 !important;
}

/* Leaflet marker icon hardening.
   Keep the GPS pin dimensions independent from gallery image and fullscreen
   image rules while leaving map tiles controlled by the tile-specific reset. */
.leaflet-container img.leaflet-marker-icon {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    filter: none !important;
    height: 41px !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: initial !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: none !important;
    visibility: visible !important;
    width: 25px !important;
    z-index: auto;
}
.leaflet-container img.leaflet-marker-shadow {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    filter: none !important;
    height: 41px !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: initial !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: none !important;
    visibility: visible !important;
    width: 41px !important;
}
.leaflet-container .leaflet-marker-pane {
    z-index: 600;
}
.leaflet-container .leaflet-shadow-pane {
    z-index: 500;
}

/* CSS-only Leaflet marker for gallery GPS maps.
   This avoids Leaflet's external PNG marker dependency, which can appear as a
   broken image in fullscreen or on hosts that restrict CDN image loading. */
.leaflet-container .gallery-leaflet-marker {
    background: transparent !important;
    border: 0 !important;
    display: block !important;
    height: 40px !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0 !important;
    visibility: visible !important;
    width: 26px !important;
}
.leaflet-container .gallery-leaflet-marker-pin {
    background: #2f80d1;
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    display: block;
    height: 26px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(-45deg);
    width: 26px;
}
.leaflet-container .gallery-leaflet-marker-pin::after {
    background: #ffffff;
    border-radius: 50%;
    content: "";
    display: block;
    height: 8px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 8px;
}
.leaflet-container .gallery-leaflet-marker-shadow {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 50%;
    bottom: -1px;
    display: block;
    height: 9px;
    left: 4px;
    position: absolute;
    transform: rotate(-12deg);
    width: 22px;
}
.image-detail-panel {
    text-align: center;
}
.image-detail-photo {
    display: block;
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.favicon-current {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.favicon-current img,
.favicon-preview-row canvas {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line, #d6cfc2);
    border-radius: 0.5rem;
    background: #fff;
    image-rendering: auto;
}
.favicon-cropper {
    display: grid;
    gap: 0.8rem;
    max-width: 360px;
}
.favicon-crop-stage {
    width: 256px;
    height: 256px;
    border: 1px solid var(--line, #d6cfc2);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
    touch-action: none;
}
.favicon-crop-stage canvas {
    display: block;
    width: 256px;
    height: 256px;
    cursor: grab;
}
.favicon-crop-stage canvas:active {
    cursor: grabbing;
}
.favicon-preview-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.lightbox.is-fullscreen,
.lightbox.is-mobile-fullscreen,
.lightbox:fullscreen {
    background: #050505 !important;
}
.gallery-dev-overlay {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2147483000;
    width: min(35rem, calc(100vw - 1.5rem));
    max-height: min(60vh, 34rem);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(5, 10, 18, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.7rem;
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.68rem;
    line-height: 1.28;
    pointer-events: none;
}

.gallery-dev-overlay header,
.gallery-dev-overlay footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.gallery-dev-overlay footer {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 0;
    opacity: 0.72;
}
.gallery-dev-overlay strong {
    display: inline-grid;
    place-items: center;
    min-width: 2.2rem;
    min-height: 1.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}
.gallery-dev-overlay pre {
    margin: 0;
    padding: 0.45rem 0.55rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.gallery-dev-overlay canvas {
    display: block;
    width: 100%;
    height: 72px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lightbox.is-fullscreen .gallery-dev-overlay,
.lightbox.is-mobile-fullscreen .gallery-dev-overlay,
.lightbox:fullscreen .gallery-dev-overlay {
    right: 0.75rem;
    bottom: 0.75rem;
}
@media (max-width: 720px) {
.gallery-dev-overlay {
        right: 0.5rem;
        bottom: 0.5rem;
        width: calc(100vw - 1rem);
        font-size: 0.62rem;
    }
}

/* Reworked admin workspace layout */
.admin-page {
    --admin-bg: #f4f6f8;
    --admin-sidebar: #17202a;
    --admin-sidebar-soft: #202b36;
    --admin-sidebar-text: #dce3ea;
    --admin-sidebar-muted: #8fa0ae;
    --admin-accent: #2271b1;
    --admin-accent-soft: #e6f2fb;
    --admin-border: #d7dde3;
    --admin-card: #ffffff;
    --admin-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    background: var(--admin-bg);
}

.admin-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 3.25rem;
    padding: 0.65rem 1.25rem;
    background: #101820;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 16px rgba(0, 0, 0, 0.2);
}

.admin-page .site-header .nav a {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #f4f7fa;
}

.admin-page .site-header .nav a:hover,
.admin-page .site-header .nav a:focus {
    background: rgba(255, 255, 255, 0.14);
}

.admin-shell {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: 1.25rem;
    width: min(1560px, calc(100% - 2rem));
    margin: 1.25rem auto 0;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 4.5rem;
    max-height: calc(100vh - 5.5rem);
    overflow: auto;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--admin-sidebar), #111820);
    color: var(--admin-sidebar-text);
    box-shadow: var(--admin-shadow);
}

.admin-sidebar-title {
    padding: 0.35rem 0.5rem 0.9rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-menu-group {
    margin: 0 0 0.7rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.admin-menu-group h2 {
    margin: 0 0 0.45rem;
    color: var(--admin-sidebar-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-menu-links {
    display: grid;
    gap: 0.2rem;
}

.admin-menu-link {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    color: var(--admin-sidebar-text);
    font-size: 0.92rem;
    font-weight: 650;
    text-decoration: none;
}

.admin-menu-link:hover,
.admin-menu-link:focus,
.admin-menu-link.is-active {
    background: var(--admin-sidebar-soft);
    color: #ffffff;
}

.admin-menu-link.is-active {
    box-shadow: inset 3px 0 0 var(--admin-accent);
}

.admin-menu-link.is-update-pending {
    color: #fff1b8;
}

.admin-page .admin-content {
    width: 100%;
    margin: 0;
}

.admin-page .site-footer {
    width: min(1560px, calc(100% - 2rem));
}

.admin-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #edf5fb);
    box-shadow: var(--admin-shadow);
}

.admin-dashboard-hero h1 {
    margin-bottom: 0.35rem;
    font-size: 2rem;
    letter-spacing: -0.035em;
}

.admin-kicker {
    margin: 0 0 0.25rem;
    color: var(--admin-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-hero-actions,
.admin-page .admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.admin-tabs {
    position: sticky;
    top: 3.25rem;
    z-index: 30;
    margin: 1rem 0;
    padding: 0.5rem;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(10px);
}

.admin-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.2rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #1d2327;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.admin-tab:hover,
.admin-tab:focus,
.admin-tab.is-active {
    border-color: var(--admin-accent);
    background: var(--admin-accent-soft);
    color: #0f4f80;
}

.admin-tab:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

.admin-tab[aria-selected="true"] {
    border-color: var(--admin-accent);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.admin-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #e8f2fa;
    color: #0f4f80;
    font-size: 0.76rem;
    font-weight: 800;
}

.admin-tab-panel {
    scroll-margin-top: 7.5rem;
    margin-bottom: 1rem;
}

.admin-tab-panel[hidden] {
    display: none;
}

.admin-tab-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-tab-intro h2,
.admin-tab-intro p {
    margin-top: 0;
}

.admin-dashboard-progress-slot {
    margin: 0.85rem 0;
}

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

.admin-metric-card {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-card);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.admin-metric-card span {
    color: #5d6975;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-metric-card strong {
    color: #16202a;
    font-size: 1.9rem;
    line-height: 1.05;
}

.admin-metric-card small {
    color: #6c7782;
    font-size: 0.82rem;
}

.admin-page .panel,
.admin-page .hero {
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

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

.admin-action-card {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-height: 9rem;
    padding: 0.9rem;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #fbfcfd;
}

.admin-action-card strong {
    color: #1d2327;
    font-size: 1rem;
}

.admin-action-card span {
    color: #64717d;
    font-size: 0.9rem;
}

.admin-action-card.is-attention {
    border-color: #c99700;
    background: #fff9e7;
}

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

.admin-maintenance-card {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-height: 8.5rem;
    padding: 0.9rem;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: #fbfcfd;
}

.admin-maintenance-card strong {
    color: #1d2327;
    font-size: 1rem;
}

.admin-maintenance-card span {
    color: #64717d;
    font-size: 0.9rem;
}

.admin-maintenance-card.is-attention {
    border-color: #c99700;
    background: #fff9e7;
}

.admin-maintenance-card .nav {
    margin-top: 0;
}

.admin-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.admin-panel-heading h2 {
    margin: 0;
}

.admin-page .bulk-row {
    border-color: var(--admin-border);
    background: #f8fafc;
}

.admin-page table {
    overflow: hidden;
    border-color: var(--admin-border);
    background: #fff;
}

.admin-page th {
    background: #edf2f7;
}

.admin-page td {
    border-bottom: 1px solid #edf0f3;
}

.admin-page tr:hover td {
    background: #f7fbff;
}

.admin-page tr.is-subgallery td {
    background: #fcfdff;
}

.admin-page .button,
.admin-page button,
.admin-page input[type="submit"],
.admin-page .nav a {
    border-radius: 7px;
}

.admin-page .button.secondary,
.admin-page button.secondary,
.admin-page .nav a.secondary {
    border-color: #b8c5d0;
    background: #ffffff;
    color: #1f5f8f;
}

.admin-devmode-panel--secondary {
    border-radius: 14px;
    background: #fbfcfd;
}

@media (max-width: 1100px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        max-height: none;
    }

    .admin-menu-group {
        display: inline-grid;
        width: min(100%, 18rem);
        margin-right: 0.5rem;
        vertical-align: top;
    }

    .admin-metric-grid,
    .admin-action-grid,
    .admin-maintenance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .admin-shell {
        width: min(100% - 1rem, 1560px);
        margin-top: 0.75rem;
    }

    .admin-dashboard-hero,
    .admin-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-hero-actions {
        justify-content: flex-start;
    }

    .admin-tabs {
        position: static;
    }

    .admin-tab-intro {
        flex-direction: column;
    }

    .admin-metric-grid,
    .admin-action-grid,
    .admin-maintenance-grid {
        grid-template-columns: 1fr;
    }
}

/* Styles the Admin edit-gallery image order toolbar above the draggable photo table. */
.admin-image-order-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.65rem 0 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border, #c3c4c7);
    border-radius: 4px;
    background: #f8fafc;
}

/* Keeps the reorder instruction compact so it does not dominate the edit-gallery workflow. */
.admin-image-order-toolbar .muted {
    margin: 0;
}

/* Styles the live save-state text used by the drag-and-drop image ordering feature. */
.admin-image-order-status {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: #646970;
}

/* Marks that the reordered table state is currently being persisted. */
.admin-image-order-status[data-state="saving"] {
    color: #8a5a00;
}

/* Marks a successfully persisted image order. */
.admin-image-order-status[data-state="saved"] {
    color: #1f8a3b;
}

/* Marks a failed image-order save so the admin knows to reload before trusting the visible order. */
.admin-image-order-status[data-state="error"] {
    color: #b42318;
}

/* Keeps the drag-handle column narrow and visually separated from bulk selection. */
.admin-image-order-cell {
    width: 2.4rem;
    text-align: center;
}

/* Makes the image-name header look like a sortable table title rather than a form submit control. */
.admin-image-name-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Keeps keyboard focus visible when sorting the image table from the Name header. */
.admin-image-name-sort:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 3px;
}

/* Gives pointer users clear feedback that the Name header can apply an immediate saved sort. */
.admin-image-name-sort:hover {
    text-decoration: underline;
}

/* Styles the dedicated pointer handle used to move image rows without interfering with checkboxes or links. */
.admin-image-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    color: #1d2327;
    cursor: grab;
    font-size: 14px;
    touch-action: none;
    user-select: none;
    line-height: 1;
}

/* Provides immediate pointer feedback while the row is being moved. */
.admin-image-drag-handle:active {
    cursor: grabbing;
}

/* Makes the moved row obvious and slightly translucent while pointer-based ordering is active. */
.admin-image-order-table tr.is-dragging td {
    background: #e8f2ff;
    opacity: 0.72;
}

/* Prevents text selection during pointer-based image ordering, especially when moving across filenames. */
body.admin-image-order-active {
    cursor: grabbing;
    user-select: none;
}

@media (max-width: 720px) {
    /* Stacks the reorder toolbar on narrow screens while preserving the live save status. */
    .admin-image-order-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Allows the save-state label to wrap rather than forcing horizontal scrolling on mobile admin screens. */
    .admin-image-order-status {
        white-space: normal;
    }
}

/* Shows the exact insertion point while an Admin image row is being reordered. */
.admin-image-order-placeholder td {
    padding: 0;
    border: 2px dashed #2271b1;
    background: rgba(34, 113, 177, 0.08);
}

/* Keeps the real row in the table model while the visible ghost follows the pointer. */
.admin-image-order-table tr.is-reorder-hidden {
    visibility: hidden;
}

/* Displays a fixed visual copy of the image row during pointer-based Admin ordering. */
.admin-image-order-ghost {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    border-collapse: collapse;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    opacity: 0.94;
    background: #fff;
}

/* Keeps the ghost row readable while clearly marking it as a temporary drag preview. */
.admin-image-order-ghost td {
    background: #fff;
    border-bottom: 1px solid #dcdcde;
}

/* Makes the cloned drag handle visually consistent inside the ghost row. */
.admin-image-order-ghost .admin-image-drag-handle {
    cursor: grabbing;
}

/* Styles public pagination controls for gallery and photo listings. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.75rem 0 1rem;
}

/* Styles one public pagination link or inactive pagination item. */
.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(122, 83, 45, 0.22);
    border-radius: var(--radius, 16px);
    background: rgba(255, 250, 240, 0.78);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

/* Styles the current pagination page. */
.pagination-link.is-current {
    background: var(--accent);
    color: #fffdf8;
    border-color: var(--accent);
}

/* Styles disabled pagination controls. */
.pagination-link.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

/* Styles compact pagination gaps between page-number ranges. */
.pagination-gap {
    color: var(--muted);
    padding: 0 0.15rem;
}

/* Styles the current page text next to pagination controls. */
.pagination-status {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

/* Styles compact checkbox labels used by small admin options. */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Enforces configured pagination columns on desktop gallery grids. */
.grid.pagination-grid-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
.grid.pagination-grid-columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

@media (max-width: 48rem) {
    .grid.pagination-grid-columns-2,
    .grid.pagination-grid-columns-3,
    .grid.pagination-grid-columns-4,
    .grid.pagination-grid-columns-5,
    .grid.pagination-grid-columns-6,
    .grid.pagination-grid-columns-7,
    .grid.pagination-grid-columns-8,
    .grid.pagination-grid-columns-9,
    .grid.pagination-grid-columns-10,
    .grid.pagination-grid-columns-11,
    .grid.pagination-grid-columns-12 {
        grid-template-columns: 1fr !important;
    }
}

.admin-log-filter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
}

.admin-log-table code {
    font-size: 0.85rem;
    word-break: break-word;
}

.log-context summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.log-context pre {
    max-width: 42rem;
    overflow: auto;
    white-space: pre-wrap;
}

.log-severity {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(15, 118, 110, 0.12);
}

.log-severity-warning,
.log-severity-error,
.log-severity-critical {
    background: rgba(217, 119, 6, 0.16);
}

.log-severity-error,
.log-severity-critical {
    color: #991b1b;
}

.metric-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.metric-card {
    border: 1px solid rgba(93, 104, 116, 0.18);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.55);
}

.metric-card strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.2;
}

.metric-card span,
.metric-card small {
    display: block;
    color: var(--muted);
}

.telemetry-privacy-note {
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
}

.telemetry-settings-panel .checkbox-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.telemetry-split {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Splits the Admin Appearance editor into editable controls and a live public-page preview. */
.theme-appearance-editor {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    gap: 1.25rem;
    align-items: stretch;
    border: 1px solid rgba(93, 104, 116, 0.22);
    border-radius: 1rem;
    padding: 1rem;
}

/* Keeps the left side dense enough for many color controls without making the preview cramped. */
.theme-appearance-controls {
    display: grid;
    gap: 0.95rem;
    align-content: start;
    padding-right: 1.25rem;
    border-right: 1px solid rgba(93, 104, 116, 0.22);
}

/* Makes color controls read like deliberate theme rows instead of thin browser strips. */
.theme-color-control {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 12rem);
    gap: 0.4rem 0.75rem;
    align-items: center;
}

/* Places helper text under the full color-control row. */
.theme-color-control .muted {
    grid-column: 1 / -1;
}

/* Enlarges the native color picker target while keeping browser color-picker behavior. */
.theme-color-control input[type="color"] {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.25rem;
    cursor: pointer;
}

/* Improves the visible color well in Chromium/WebKit browsers. */
.theme-color-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

/* Improves the visible color well in Chromium/WebKit browsers. */
.theme-color-control input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 8px;
}

/* Improves the visible color well in Firefox. */
.theme-color-control input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 8px;
}

/* Hosts the right-side live preview and separates it from the editable form controls. */
.theme-live-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

/* Miniature public page driven by JavaScript-managed preview variables. */
.theme-preview-page {
    --preview-accent: var(--accent, #a5481c);
    --preview-accent-dark: var(--accent-dark, #713414);
    --preview-paper: var(--paper, #f8f4ec);
    --preview-panel: var(--panel, #fffaf0);
    --preview-gallery-panel: var(--gallery-panel, var(--panel, #fffaf0));
    --preview-header-text: var(--header-text, #0f172a);
    --preview-hero-text: var(--hero-text, #0f172a);
    --preview-radius: var(--radius, 16px);
    --preview-font-family: var(--font-family, Georgia, Times New Roman, serif);
    --preview-background-opacity: 0.65;
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid rgba(93, 104, 116, 0.26);
    border-radius: var(--preview-radius);
    padding: 0.85rem;
    background: var(--preview-paper);
    color: #17212b;
    font-family: var(--preview-font-family);
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.10);
}

/* Shows the selected public page width in the compact admin preview. */
.theme-preview-page[data-preview-width="default"] {
    width: 82%;
    margin-right: auto;
}

/* Represents the wider public container without depending on the real browser viewport. */
.theme-preview-page[data-preview-width="wide"] {
    width: 92%;
    margin-right: auto;
}

/* Represents a custom public container width in the fixed-size preview column. */
.theme-preview-page[data-preview-width="custom"] {
    width: calc(82% + (18% * var(--preview-custom-width-scale, 0.4063)));
    margin-right: auto;
}

/* Represents the full-width public container inside the fixed-size preview column. */
.theme-preview-page[data-preview-width="full"] {
    width: 100%;
}

/* Keeps the conditional custom-width controls visually grouped without introducing extra layout logic. */
.theme-custom-width-control {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.42);
}

.theme-custom-width-control[hidden] {
    display: none;
}

/* Keeps the explanatory text below the preview in normal document flow. */
.theme-live-preview > .muted {
    position: relative;
    z-index: 2;
    margin: 0;
}

/* Simulates the same layered public background model used by the real theme CSS. */
.theme-preview-background,
.theme-preview-background span {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

/* Shows the saved background image with the same opacity slider semantics as the public page. */
.theme-preview-background span {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: var(--preview-background-opacity);
}

/* Makes preview header chrome resemble the public header without using the real page header. */
.theme-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--preview-radius);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

/* Displays the configured header title color in the preview header. */
.theme-preview-header strong {
    color: var(--preview-header-text);
    font-size: 1rem;
    line-height: 1.15;
}

/* Keeps preview navigation compact enough for the right column. */
.theme-preview-header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* Mirrors button and navigation color behavior inside the preview. */
.theme-preview-link,
.theme-preview-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--preview-accent-dark);
    border-radius: var(--preview-radius);
    background: var(--preview-accent);
    color: #fffdf8;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

/* Shows the public gallery hero styling and the configured gallery title color. */
.theme-preview-hero {
    overflow: hidden;
    margin-bottom: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--preview-radius);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

/* Keeps the simulated hero label subtle while still reflecting the hero text color. */
.theme-preview-hero p {
    margin: 0 0 0.2rem;
    color: var(--preview-hero-text);
    font-size: 0.78rem;
    opacity: 0.82;
}

/* Displays the gallery title color using a realistic title size for the small preview. */
.theme-preview-hero h2 {
    margin: 0 0 0.45rem;
    color: var(--preview-hero-text);
    font-size: 1.25rem;
    line-height: 1.1;
}

/* Mirrors the public tag style using accent colors. */
.theme-preview-tag {
    display: inline-flex;
    border: 1px solid var(--preview-accent);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    background: rgba(255, 255, 255, 0.68);
    color: var(--preview-accent-dark);
    font-size: 0.74rem;
    font-weight: 700;
}

/* Shows two representative gallery cards so panel colors are immediately visible. */
.theme-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

/* Displays the generic panel color on the first card. */
.theme-preview-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(122, 83, 45, 0.18);
    border-radius: var(--preview-radius);
    background: var(--preview-panel);
}

/* Displays the open-gallery panel color on the second card. */
.theme-preview-gallery-card {
    background: var(--preview-gallery-panel);
}

/* Creates a tiny image placeholder whose gradient uses the current accent color. */
.theme-preview-card div {
    min-height: 4.3rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, var(--preview-accent), var(--preview-accent-dark));
}

/* Keeps preview card captions readable at thumbnail scale. */
.theme-preview-card h3 {
    margin: 0.55rem 0.55rem 0.15rem;
    color: #17212b;
    font-size: 0.86rem;
    line-height: 1.15;
}

/* Shows muted supporting text without needing real gallery data. */
.theme-preview-card p {
    margin: 0 0.55rem 0.6rem;
    color: #5d6874;
    font-size: 0.72rem;
}

/* Presents selected and unselected pagination states with the configured accent. */
.theme-preview-pagination {
    display: flex;
    gap: 0.35rem;
}

/* Makes inactive preview pagination look like real secondary pagination items. */
.theme-preview-pagination span:not(:first-child) {
    background: rgba(255, 255, 255, 0.62);
    color: var(--preview-accent-dark);
}

@media (max-width: 900px) {
    /* Stacks the Appearance editor when the Admin screen is too narrow for a useful split preview. */
    .theme-appearance-editor {
        grid-template-columns: 1fr;
    }

    /* Removes the vertical divider when the preview moves below the controls. */
    .theme-appearance-controls {
        padding-right: 0;
        padding-bottom: 1.25rem;
        border-right: 0;
        border-bottom: 1px solid rgba(93, 104, 116, 0.22);
    }

    /* Avoids sticky positioning on narrow screens where the preview is no longer side-by-side. */
    .theme-preview-page {
        position: relative;
        top: auto;
    }
}

@media (max-width: 520px) {
    /* Gives color pickers the full row on very narrow Admin screens. */
    .theme-color-control {
        grid-template-columns: 1fr;
    }

    /* Keeps the preview cards readable on phones. */
    .theme-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* Adds compact guidance and status styling for Admin gallery tree ordering. */
.admin-gallery-order-toolbar {
    margin-top: 0;
}

/* Keeps the legacy gallery move handle visually aligned with the existing photo move handle. */
.admin-gallery-drag-handle {
    font-size: 14px;
}

/* Makes the nested gallery table advertise pointer-based ordering without changing table layout. */
.admin-gallery-order-table tr.is-dragging td {
    background: #e8f2ff;
    opacity: 0.2;
}

.admin-gallery-order-placeholder td::after {
    content: attr(data-drag-hint);
}

/* Removes the moved subtree from the table flow while the ghost follows the pointer. */
.admin-gallery-order-table tr.is-reorder-hidden {
    display: none;
}

/* Prevents accidental text selection while galleries are being reordered or nested. */
body.admin-gallery-order-active {
    cursor: grabbing;
    user-select: none;
}

/* Shows the exact drop position and uses indentation to preview the target tree depth. */
.admin-gallery-order-placeholder td {
    position: relative;
    padding: 0;
    border: 2px dashed #2271b1;
    background: linear-gradient(90deg, transparent 0, transparent calc(var(--gallery-drag-depth, 0) * 28px), rgba(34, 113, 177, 0.10) calc(var(--gallery-drag-depth, 0) * 28px));
}

/* Adds a clear vertical marker at the candidate tree depth while dragging horizontally. */
.admin-gallery-order-placeholder td::before {
    content: '';
    display: block;
    width: 4px;
    height: 100%;
    margin-left: calc(var(--gallery-drag-depth, 0) * 28px);
    background: #2271b1;
}

/* Adds a directional cue so nesting and moving out are visible before the drop is committed. */
.admin-gallery-order-placeholder td::after {
    content: '↓ same level';
    position: absolute;
    top: 50%;
    left: calc((var(--gallery-drag-depth, 0) * 28px) + 0.85rem);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border: 1px solid rgba(34, 113, 177, 0.28);
    border-radius: 999px;
    background: #ffffff;
    color: #0f4f97;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    box-shadow: 0 0.35rem 1rem rgba(15, 79, 151, 0.16);
    white-space: nowrap;
}

.admin-gallery-order-placeholder[data-drag-direction="right"] td::after {
    content: '→ nest deeper';
}

.admin-gallery-order-placeholder[data-drag-direction="left"] td::after {
    content: '← move out';
}

/* Keeps the gallery ghost readable when several nested rows move together. */
.admin-gallery-order-ghost {
    max-height: 420px;
    overflow: hidden;
    opacity: 0.2;
}

.admin-gallery-order-ghost[data-drag-direction="right"] {
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.22), 0 1rem 2rem rgba(15, 79, 151, 0.22);
}

.admin-gallery-order-ghost[data-drag-direction="left"] {
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.22), 0 1rem 2rem rgba(120, 53, 15, 0.18);
}

/* Keeps older cloned gallery drag handles consistent inside the ghost row. */
.admin-gallery-order-ghost .admin-gallery-drag-handle {
    cursor: grabbing;
}

/* Keeps expanded admin log diagnostics readable without changing the table data model. */
.log-entry-details summary {
    cursor: pointer;
}

/* Gives the diagnostic export action breathing room inside a compact table cell. */
.log-detail-actions {
    margin: 0.75rem 0;
}

/* Renders admin log metadata as a compact two-column diagnostic list. */
.log-detail-list {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: 0.35rem 0.75rem;
    margin: 0.75rem 0;
}

/* Keeps admin log detail labels visually distinct from values. */
.log-detail-list dt {
    font-weight: 700;
}

/* Prevents long request identifiers or routes from stretching the log table. */
.log-detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Marks update recovery actions as potentially destructive maintenance operations. */
.danger-zone {
    border-color: rgba(190, 40, 40, 0.35);
}

/* Makes the clean reinstall button visually separate from normal update actions. */
.button.danger,
button.danger {
    border-color: rgba(190, 40, 40, 0.65);
}

.admin-log-table-wrap {
    overflow-x: auto;
}

.admin-log-table th a {
    color: inherit;
    text-decoration: none;
}

.admin-log-table th a:hover,
.admin-log-table th a:focus-visible {
    text-decoration: underline;
}

[data-admin-log-live-state] {
    min-width: 7rem;
}

.nsfw-stage {
    align-items: stretch;
    background: rgba(0, 0, 0, 0.08);
    min-height: 180px;
}

.nsfw-placeholder {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
    min-height: 180px;
    padding: 1.5rem;
    text-align: center;
    width: 100%;
}

.nsfw-placeholder strong {
    font-size: 1.15rem;
}

.nsfw-placeholder span {
    color: var(--muted-text, #666);
    max-width: 18rem;
}

/* Refines the admin account screen into readable profile and recovery panels. */
.account-settings-page {
    display: grid;
    gap: 1rem;
}

/* Keeps the page title, help text, and recovery state visible before the forms. */
.account-settings-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff, #f6f7f7);
}

.account-settings-kicker {
    margin: 0 0 0.35rem;
    color: #646970;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-settings-hero h1 {
    margin-bottom: 0.35rem !important;
}

/* Shows whether password reset is usable without forcing the admin to inspect every field. */
.account-settings-status {
    display: grid;
    gap: 0.2rem;
    align-content: center;
    padding: 0.9rem;
    border: 1px solid #dcdcde;
    border-left-width: 4px;
    border-radius: 8px;
    background: #ffffff;
}

.account-settings-status.is-ready {
    border-left-color: #008a20;
}

.account-settings-status.is-incomplete {
    border-left-color: #d63638;
}

.account-settings-status-label {
    color: #646970;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-settings-status strong {
    font-size: 1.05rem;
}

.account-settings-status small {
    color: #646970;
    line-height: 1.35;
}

/* Places profile and recovery configuration next to each other on wider admin screens. */
.account-settings-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
    gap: 1rem;
    align-items: start;
}

.account-settings-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #ffffff;
}

.account-settings-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #dcdcde;
}

.account-settings-card-header h2 {
    margin-bottom: 0.35rem !important;
}

.account-settings-form label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
}

.account-settings-form input,
.account-settings-form select {
    width: 100%;
}

.account-settings-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.account-settings-help {
    margin: 0;
    color: #646970;
    font-size: 0.92rem;
    line-height: 1.45;
}

.account-settings-callout,
.account-settings-readiness {
    padding: 0.75rem 0.85rem;
    border: 1px solid #c3c4c7;
    border-left: 4px solid #2271b1;
    border-radius: 6px;
    background: #f6f7f7;
    line-height: 1.45;
}

.account-settings-toggle {
    display: flex !important;
    gap: 0.65rem !important;
    align-items: flex-start !important;
    padding: 0.8rem;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #f6f7f7;
}

.account-settings-toggle input {
    flex: 0 0 auto;
    margin-top: 0.2rem !important;
}

.account-settings-toggle span {
    display: grid;
    gap: 0.15rem;
}

.account-settings-toggle small {
    color: #646970;
    font-weight: 400;
    line-height: 1.35;
}

.account-settings-details {
    padding: 0.85rem;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fbfbfc;
}

.account-settings-details summary {
    cursor: pointer;
    font-weight: 700;
}

.account-settings-details > * + * {
    margin-top: 0.8rem;
}

.account-settings-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.25rem;
}

.account-settings-test-form {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px dashed #c3c4c7;
    border-radius: 6px;
    background: #f6f7f7;
}

.account-settings-test-form p {
    margin: 0.25rem 0 0;
}

@media (max-width: 900px) {
    .account-settings-hero,
    .account-settings-grid,
    .account-settings-two-column {
        grid-template-columns: 1fr;
    }

    .account-settings-test-form {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Keeps public photo metadata over the thumbnail so descriptions do not change the card height. */
.image-stage > .image-meta-overlay {
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    left: 2.9rem;
    z-index: 5;
    max-width: calc(100% - 3.25rem);
    max-height: calc(100% - 0.7rem);
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: rgba(255, 250, 240, 0.88);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
    color: var(--text);
    line-height: 1.25;
    overflow: hidden;
    pointer-events: none;
}

/* Keeps overlaid titles compact and prevents long titles from stretching the grid. */
.image-stage > .image-meta-overlay h2 {
    margin: 0 0 0.18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Truncates public photo descriptions to a readable two-line caption with an ellipsis. */
.image-stage > .image-meta-overlay p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Keeps tag chips from turning the metadata overlay into a tall panel. */
.image-stage > .image-meta-overlay .tag-list {
    max-height: 1.65rem;
    margin-top: 0.35rem;
    overflow: hidden;
}

/* Gives the metadata overlay more room on narrow screens where the vote badge is less likely to overlap. */
@media (max-width: 520px) {
    .image-stage > .image-meta-overlay {
        left: 0.35rem;
        max-width: calc(100% - 0.7rem);
    }
}

/* Gives the Theme editor the same calm workspace rhythm as the Dashboard tabs. */
.admin-theme-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-theme-hero h1 {
    margin-bottom: 0.25rem;
    font-size: 2rem;
    letter-spacing: -0.035em;
}

.admin-theme-hero p {
    margin: 0;
}

.admin-theme-form {
    margin-top: 0;
}

.admin-theme-form > .admin-tab-panel {
    margin-top: 0;
}

.theme-tab-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.theme-tab-card-grid > fieldset,
.admin-theme-form > .admin-tab-panel > fieldset {
    margin: 0;
}

.admin-theme-save-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0;
}

.admin-theme-save-panel p {
    margin: 0.25rem 0 0;
}

@media (max-width: 900px) {
    .admin-theme-hero,
    .admin-theme-save-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .theme-tab-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Gives the gallery management tab one calm surface instead of several loose controls. */
.admin-gallery-workspace {
    overflow: hidden;
    border: 1px solid var(--admin-border, #d4dde7);
    border-radius: calc(var(--radius, 16px) + 4px);
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

/* Keeps ordering help and bulk controls visually attached to the table they affect. */
.admin-gallery-command-panel {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-bottom: 1px solid #e5ebf2;
    background: linear-gradient(180deg, #fbfdff, #f6f9fc);
}

/* Turns the drag guidance into a compact status strip with one clear message. */
.admin-gallery-order-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid #dbe5ef;
    border-radius: var(--radius, 16px);
    background: rgba(255, 255, 255, 0.72);
}

.admin-gallery-order-toolbar strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #17212b;
    font-size: 0.92rem;
}

.admin-gallery-order-toolbar p {
    margin: 0;
}

/* Makes gallery filters read as a real toolbar and keeps buttons from crowding the table. */
.admin-page .admin-gallery-controls {
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.admin-gallery-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: auto;
    margin: 0;
    color: #17212b;
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-gallery-controls select {
    min-width: 11rem;
    margin: 0;
    background: #fff;
}

.admin-gallery-select-all {
    padding: 0.45rem 0.65rem;
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    background: #fff;
}

.admin-gallery-filter-summary {
    min-width: 8rem;
}

/* Allows wide folder paths without making the whole admin page look broken. */
.admin-gallery-table-shell {
    overflow-x: auto;
}

/* Uses separate borders so gallery rows can be styled as readable records. */
.admin-page .admin-gallery-tree-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.admin-gallery-tree-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.72rem 0.8rem;
    border-bottom: 1px solid #dbe5ef;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-gallery-tree-table tbody td {
    padding: 0.78rem 0.8rem;
    border-bottom: 1px solid #edf1f5;
    vertical-align: middle;
}

.admin-gallery-tree-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-gallery-tree-table tbody tr:hover td {
    background: #f8fbff;
}

.admin-gallery-tree-table tbody tr.is-subgallery td {
    background-image: linear-gradient(90deg, rgba(34, 113, 177, 0.07), rgba(34, 113, 177, 0) 16rem);
}

.admin-gallery-select-heading,
.admin-gallery-count-heading,
.admin-gallery-actions-heading {
    width: 1%;
}

/* Keeps the legacy handle style available for older cached markup during a deployment. */
.admin-gallery-drag-handle {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #cbd8e5;
    border-radius: 0.65rem;
    background: #fff;
    color: #475569;
    font-size: 14px;
    cursor: grab;
}

.admin-gallery-drag-handle:hover,
.admin-gallery-drag-handle:focus-visible {
    border-color: #2271b1;
    color: #2271b1;
    outline: none;
}

.admin-gallery-title-cell {
    min-width: 32rem;
}

.admin-gallery-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* Uses the visual gallery record itself as the drag affordance, avoiding a separate move column. */
.admin-gallery-summary[data-admin-gallery-drag-zone] {
    cursor: default;
    touch-action: pan-y;
}

.admin-gallery-summary[data-admin-gallery-drag-zone]:active {
    cursor: grabbing;
}

.admin-gallery-summary[data-admin-gallery-drag-zone] a,
.admin-gallery-summary[data-admin-gallery-drag-zone] button {
    cursor: pointer;
    touch-action: manipulation;
}

.admin-gallery-summary[data-admin-gallery-drag-zone] .admin-gallery-preview,
.admin-gallery-summary[data-admin-gallery-drag-zone] .admin-gallery-path,
.admin-gallery-summary[data-admin-gallery-drag-zone] .admin-gallery-parent {
    cursor: grab;
}

.admin-gallery-summary[data-admin-gallery-drag-zone] .admin-gallery-title-link {
    cursor: pointer;
}

.admin-gallery-summary[data-admin-gallery-drag-zone] .tree-toggle {
    cursor: pointer;
}

.admin-gallery-preview {
    display: inline-flex;
    flex: 0 0 7.25rem;
    align-items: center;
    justify-content: center;
    width: 7.25rem;
    height: 4.65rem;
    overflow: hidden;
    border: 1px solid #dbe5ef;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #f8fafc, #eaf1f8);
    color: #718096;
    text-decoration: none;
}

.admin-gallery-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-gallery-preview.is-empty span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-gallery-summary-text {
    min-width: 0;
}

.admin-gallery-title-link {
    color: #0f4f97;
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.admin-gallery-path,
.admin-gallery-parent {
    display: block;
    max-width: 44rem;
    margin-top: 0.24rem;
    overflow: hidden;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-gallery-parent {
    color: #7a8796;
}

.admin-gallery-state-cell {
    min-width: 8.5rem;
}

.admin-gallery-status-pill,
.admin-gallery-access-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0.35rem 0.35rem 0;
    padding: 0.18rem 0.55rem;
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: capitalize;
}

.admin-gallery-status-pill.is-public {
    border-color: rgba(30, 126, 52, 0.22);
    background: rgba(30, 126, 52, 0.10);
    color: #166534;
}

.admin-gallery-status-pill.is-unpublished,
.admin-gallery-status-pill.is-draft {
    border-color: rgba(180, 83, 9, 0.24);
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.admin-gallery-status-pill.is-private {
    border-color: rgba(71, 85, 105, 0.25);
    background: rgba(100, 116, 139, 0.12);
    color: #334155;
}

.admin-gallery-access-label {
    background: #fff;
    color: #64748b;
    text-transform: none;
}

.admin-gallery-feature-cell {
    min-width: 12rem;
}

.admin-gallery-feature {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-width: 2.9rem;
    margin: 0 0.3rem 0.3rem 0;
    padding: 0.22rem 0.42rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-gallery-feature .admin-flag.is-enabled {
    color: #16833a;
    font-weight: 900;
}

.admin-gallery-image-count {
    text-align: right;
}

.admin-gallery-image-count strong {
    display: inline-flex;
    justify-content: center;
    min-width: 2.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #17212b;
}

.gallery-row-actions {
    min-width: 0;
    white-space: nowrap;
}

.gallery-row-action-set {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cbd9e7;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.gallery-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0f4f97;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.gallery-row-action + .gallery-row-action {
    border-left: 1px solid #d8e3ef;
}

button.gallery-row-action.secondary {
    background: transparent;
}

.gallery-row-action:hover,
.gallery-row-action:focus-visible {
    background: #eaf3fb;
    color: #063f7d;
    text-decoration: none;
}

.gallery-row-action-icon {
    transform: translateY(-0.02rem);
}

/* Keeps Admin branding asset controls readable inside the edit-gallery form. */
.admin-branding-assets {
    padding: 1rem;
    border: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.55);
    border-radius: var(--radius, 16px);
}

/* Separates each branding asset control without creating a separate page. */
.admin-branding-asset {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(98, 105, 117, 0.22);
    border-radius: calc(var(--radius, 16px) * 0.75);
}

/* Keeps branding labels and descriptions compact. */
.admin-branding-copy {
    display: grid;
    gap: 0.15rem;
}

/* Aligns current branding previews with the remove checkbox. */
.admin-branding-current {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Constrains current branding previews so extreme uploads do not distort Admin. */
.admin-branding-preview {
    display: block;
    max-width: min(26rem, 100%);
    max-height: 8rem;
    object-fit: contain;
    border: 1px solid var(--line);
    background: var(--field);
    border-radius: calc(var(--radius, 16px) * 0.6);
}

.admin-branding-preview-logo {
    max-width: min(12rem, 100%);
}

.admin-branding-preview-separator {
    max-height: 4rem;
}

@media (max-width: 640px) {
    .gallery-title-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .gallery-branding-logo {
        max-width: min(11rem, 70vw);
    }

    .gallery-title-bar .gallery-title {
        flex-basis: auto;
        width: 100%;
    }

    .gallery-branding-banner {
        width: 100%;
        max-height: 8rem;
    }

    .public-page .hero .gallery-title-bar {
        gap: 0.45rem;
    }

    .public-page .hero .gallery-branding-logo {
        max-width: min(6rem, 32vw);
        max-height: 2.75rem;
    }

    .public-page .hero .gallery-branding-banner {
        width: 100%;
        max-height: 3.75rem;
    }
}



.admin-language-tab-grid {
    margin-bottom: 1rem;
}

.admin-language-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--admin-border, #d4dde7);
    border-radius: 14px;
    background: #fff;
}

.admin-language-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.admin-language-table th,
.admin-language-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--admin-border, #e5ebf2);
    text-align: left;
    vertical-align: top;
}

.admin-language-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-muted, #64748b);
    background: #f8fafc;
}

.admin-language-table tr:last-child td {
    border-bottom: 0;
}

.admin-language-table code {
    white-space: nowrap;
}

.admin-language-editor {
    margin-top: 1rem;
}

.admin-language-json-editor {
    width: 100%;
    min-height: 26rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.86rem;
    line-height: 1.55;
    tab-size: 2;
    white-space: pre;
}

.admin-language-coverage-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.25rem 0 0.85rem;
}

.admin-language-coverage-summary span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--admin-border, #d4dde7);
    border-radius: 999px;
    background: #fff;
}

.admin-language-key-details {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--admin-border, #d4dde7);
    border-radius: 14px;
    background: #f8fafc;
}

.admin-language-key-details summary {
    cursor: pointer;
    font-weight: 700;
}

.admin-language-key-list {
    display: block;
    max-height: 14rem;
    overflow: auto;
    padding: 0.75rem;
    border: 1px solid var(--admin-border, #d4dde7);
    border-radius: 12px;
    background: #fff;
    white-space: pre-wrap;
}

.admin-language-conventions {
    margin-top: 1rem;
}

.admin-language-convention-list {
    display: grid;
    gap: 0.45rem;
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.admin-language-convention-list code {
    display: inline-flex;
    margin-right: 0.35rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--admin-border, #d4dde7);
    border-radius: 999px;
    background: #fff;
}

/* Admin dashboard render timing panel. */
.admin-render-profile {
    margin: 1.5rem 0;
    border: 1px solid color-mix(in srgb, var(--theme-border, #d1d5db) 80%, transparent);
    border-radius: var(--theme-radius, 18px);
    background: color-mix(in srgb, var(--theme-surface, #ffffff) 94%, transparent);
    color: var(--theme-text, #1f2937);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.admin-render-profile summary {
    cursor: pointer;
    padding: 0.9rem 1rem;
    font-weight: 700;
    user-select: none;
}

.admin-render-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0 1rem 1rem;
}

.admin-render-profile h2 {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
}

.admin-render-profile table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.admin-render-profile th,
.admin-render-profile td {
    padding: 0.35rem 0.45rem;
    border-top: 1px solid color-mix(in srgb, var(--theme-border, #d1d5db) 70%, transparent);
    text-align: right;
    vertical-align: top;
}

.admin-render-profile th:first-child {
    text-align: left;
}

.admin-render-profile-note {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--theme-muted, #64748b);
    font-size: 0.8rem;
}


.patch-notes-viewer {
    margin-top: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 72%, transparent);
    border-radius: calc(var(--radius, 16px) + 4px);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--admin-accent, #2271b1) 11%, transparent), transparent 34rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    overflow: visible;
}

.patch-notes-viewer > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    cursor: pointer;
    list-style: none;
    font-weight: 780;
}

.patch-notes-viewer > summary::-webkit-details-marker {
    display: none;
}

.patch-notes-viewer > summary::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 70%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--admin-accent, #2271b1);
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.patch-notes-viewer[open] > summary::after {
    content: "−";
}

.patch-notes-viewer > summary span {
    display: block;
    font-size: 1.04rem;
    letter-spacing: -0.01em;
}

.patch-notes-viewer > summary small {
    display: block;
    margin-top: 0.18rem;
    color: var(--muted, #64748b);
    font-size: 0.84rem;
    font-weight: 550;
}

.patch-notes-viewer[open] > summary {
    border-bottom: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 72%, transparent);
}

.patch-notes-toolbar {
    display: grid;
    grid-template-columns: minmax(17rem, 28rem) 1fr;
    align-items: end;
    gap: 1rem;
    padding: 1rem 1.15rem 0.75rem;
}

.patch-notes-select-form,
.patch-notes-shortcuts {
    display: flex;
    align-items: end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.patch-notes-select-form {
    position: relative;
}

.patch-notes-shortcuts {
    justify-content: flex-end;
}

.patch-notes-picker-label {
    flex: 1 0 100%;
    color: var(--muted, #64748b);
    font-size: 0.82rem;
    font-weight: 750;
}

.patch-notes-picker {
    position: relative;
    flex: 1 1 19rem;
    min-width: min(100%, 17rem);
}

.patch-notes-picker-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.64rem 0.78rem 0.64rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 82%, transparent);
    border-radius: calc(var(--radius, 16px) * 0.8);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 22px rgba(15, 23, 42, 0.06);
    font-weight: 780;
    text-align: left;
    cursor: pointer;
}

.patch-notes-picker-button:hover,
.patch-notes-picker.is-open .patch-notes-picker-button {
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 55%, var(--admin-border, #d7dde3));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent, #2271b1) 12%, transparent), 0 12px 26px rgba(15, 23, 42, 0.08);
}

.patch-notes-picker-chevron {
    color: var(--admin-accent, #2271b1);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.16s ease;
}

.patch-notes-picker.is-open .patch-notes-picker-chevron {
    transform: rotate(180deg);
}

.patch-notes-picker-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.42rem);
    left: 0;
    width: min(30rem, calc(100vw - 3rem));
    max-height: 28rem;
    overflow: auto;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 78%, transparent);
    border-radius: calc(var(--radius, 16px) + 2px);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--admin-accent, #2271b1) 9%, transparent), transparent 18rem),
        rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.25rem) scale(0.985);
    transform-origin: top left;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.patch-notes-picker.is-open .patch-notes-picker-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.patch-notes-version-group + .patch-notes-version-group {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 66%, transparent);
}

.patch-notes-version-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.48rem 0.58rem 0.42rem;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 820;
    letter-spacing: -0.01em;
}

.patch-notes-version-heading small {
    padding: 0.16rem 0.48rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--admin-accent, #2271b1) 8%, #ffffff);
    color: color-mix(in srgb, var(--admin-accent, #2271b1) 68%, #334155);
    border: 1px solid color-mix(in srgb, var(--admin-accent, #2271b1) 10%, transparent);
    font-size: 0.72rem;
    font-weight: 720;
    white-space: nowrap;
}

.patch-notes-version-option {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.35rem;
    margin-top: 0.16rem;
    padding: 0.48rem 0.6rem 0.48rem 1.22rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius, 16px) * 0.64);
    background: color-mix(in srgb, var(--admin-accent, #2271b1) 4%, #ffffff);
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.patch-notes-version-option:hover,
.patch-notes-version-option:focus-visible {
    background: color-mix(in srgb, var(--admin-accent, #2271b1) 8%, #ffffff);
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 14%, transparent);
    color: #0f172a;
    outline: none;
}

.patch-notes-version-option.is-selected {
    background: color-mix(in srgb, var(--admin-accent, #2271b1) 11%, #ffffff);
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 22%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--admin-accent, #2271b1) 82%, #ffffff);
    color: #111827;
    font-weight: 800;
}

.patch-notes-version-number {
    min-width: 0;
}

.patch-notes-version-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.patch-notes-version-meta small {
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.055);
    color: #475569;
    border: 1px solid rgba(15, 23, 42, 0.045);
    font-size: 0.68rem;
    font-weight: 760;
    white-space: nowrap;
}

.patch-notes-version-option.is-installed .patch-notes-version-meta small:first-child {
    background: rgba(22, 163, 74, 0.10);
    color: #166534;
    border-color: rgba(22, 163, 74, 0.12);
}

.patch-notes-version-option.is-latest .patch-notes-version-meta small:last-child {
    background: color-mix(in srgb, var(--admin-accent, #2271b1) 9%, #ffffff);
    color: color-mix(in srgb, var(--admin-accent, #2271b1) 72%, #334155);
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 12%, transparent);
}

.patch-notes-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.patch-notes-shortcuts .button,
.patch-notes-select-form .button {
    min-height: 2.7rem;
    border-radius: calc(var(--radius, 16px) * 0.75);
}

.patch-notes-shortcuts .button.is-update-pending {
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 72%, #0f172a);
    color: #ffffff;
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--admin-accent, #2271b1) 92%, #ffffff),
            color-mix(in srgb, var(--admin-accent, #2271b1) 92%, #ffffff) 10px,
            color-mix(in srgb, var(--admin-accent, #2271b1) 76%, #0f172a) 10px,
            color-mix(in srgb, var(--admin-accent, #2271b1) 76%, #0f172a) 20px
        );
    box-shadow: 0 10px 24px color-mix(in srgb, var(--admin-accent, #2271b1) 22%, transparent);
}

.patch-notes-fragment-inner {
    padding: 0 1.15rem 1.15rem;
}

.patch-notes-content {
    margin: 0;
    padding: 1.1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 76%, transparent);
    border-radius: calc(var(--radius, 16px) + 2px);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 28px rgba(15, 23, 42, 0.05);
}

.patch-notes-content h3,
.patch-notes-content h4,
.patch-notes-content h5 {
    margin-top: 1.05rem;
    margin-bottom: 0.45rem;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.patch-notes-content h3:first-child {
    margin-top: 0;
}

.patch-notes-content p {
    margin: 0.5rem 0;
    color: #334155;
    line-height: 1.62;
}

.patch-notes-content ul {
    display: grid;
    gap: 0.38rem;
    margin: 0.45rem 0 0.9rem;
    padding-left: 1.25rem;
}

.patch-notes-content li {
    color: #334155;
    line-height: 1.55;
}

.patch-notes-content li::marker {
    color: var(--admin-accent, #2271b1);
}

.patch-notes-content code {
    padding: 0.08rem 0.32rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 60%, transparent);
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.055);
    color: #0f172a;
    font-size: 0.92em;
}

.patch-notes-content pre {
    overflow: auto;
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 62%, transparent);
    border-radius: calc(var(--radius, 16px) * 0.75);
    background: rgba(15, 23, 42, 0.07);
}

.patch-notes-content pre code {
    padding: 0;
    border: 0;
    background: transparent;
}

.patch-notes-fragment {
    position: relative;
    min-height: 4rem;
}

.patch-notes-viewer.is-loading .patch-notes-fragment {
    opacity: 0.68;
    pointer-events: none;
}

.patch-notes-viewer.is-loading .patch-notes-fragment::after {
    content: "";
    position: absolute;
    inset: 0 1.15rem 1.15rem;
    border-radius: calc(var(--radius, 16px) + 2px);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(34, 113, 177, 0.06),
            rgba(34, 113, 177, 0.06) 10px,
            rgba(34, 113, 177, 0.14) 10px,
            rgba(34, 113, 177, 0.14) 20px
        );
}

.patch-notes-source-note {
    margin: 0 0 0.75rem;
    padding: 0.62rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--admin-border, #d7dde3) 65%, transparent);
    border-radius: calc(var(--radius, 16px) * 0.7);
    background: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
}

@media (max-width: 760px) {
    .patch-notes-toolbar {
        grid-template-columns: 1fr;
    }

    .patch-notes-shortcuts {
        justify-content: flex-start;
    }
}

/* Softens the patch notes version picker and protects it from generic admin button styling. */
.admin-page .patch-notes-picker-button {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    color: #0f172a;
    border-color: color-mix(in srgb, var(--admin-border, #d7dde3) 82%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(15, 23, 42, 0.06);
}

.admin-page .patch-notes-picker-button:hover,
.admin-page .patch-notes-picker.is-open .patch-notes-picker-button {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98));
    color: #0f172a;
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 42%, var(--admin-border, #d7dde3));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent, #2271b1) 10%, transparent), 0 12px 26px rgba(15, 23, 42, 0.08);
}

.admin-page .patch-notes-picker-chevron {
    color: #334155;
}

.admin-page .patch-notes-version-option {
    background: rgba(255, 255, 255, 0.96);
    color: #334155;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: none;
}

.admin-page .patch-notes-version-option:hover,
.admin-page .patch-notes-version-option:focus-visible {
    background: color-mix(in srgb, var(--admin-accent, #2271b1) 5%, #ffffff);
    color: #0f172a;
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 18%, rgba(15, 23, 42, 0.08));
    box-shadow: none;
}

.admin-page .patch-notes-version-option.is-selected {
    background: color-mix(in srgb, var(--admin-accent, #2271b1) 8%, #ffffff);
    color: #111827;
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 28%, rgba(15, 23, 42, 0.10));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--admin-accent, #2271b1) 72%, #ffffff);
}

.admin-page .patch-notes-version-option .patch-notes-version-number {
    color: inherit;
}

.admin-page .patch-notes-version-option.is-selected .patch-notes-version-number {
    color: #111827;
}

.admin-update-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--admin-accent, #2271b1) 10%, transparent), transparent 28rem),
        linear-gradient(135deg, #ffffff, #f5f9fc);
}

.admin-update-hero h1,
.admin-update-hero p {
    margin-top: 0;
}

.admin-update-hero h1 {
    margin-bottom: 0.35rem;
    font-size: 2rem;
    letter-spacing: -0.035em;
}

.admin-update-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-update-state-card.is-ok {
    border-color: rgba(22, 163, 74, 0.18);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.92), #ffffff);
}

.admin-update-state-card.is-attention {
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 28%, transparent);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--admin-accent, #2271b1) 12%, transparent), transparent 18rem),
        #ffffff;
}

.admin-update-state-card.is-warning {
    border-color: rgba(185, 28, 28, 0.18);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.94), #ffffff);
}

.admin-update-status-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.85rem;
}

.admin-update-card {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: #fbfcfd;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.admin-update-card h3,
.admin-update-card p,
.admin-update-card form {
    margin-top: 0;
}

.admin-update-card h3 {
    margin-bottom: 0.1rem;
    color: #16202a;
    letter-spacing: -0.015em;
}

.admin-update-card.is-attention {
    border-color: color-mix(in srgb, var(--admin-accent, #2271b1) 30%, var(--admin-border, #d7dde3));
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--admin-accent, #2271b1) 10%, transparent), transparent 20rem),
        #ffffff;
}

.admin-update-action-form {
    gap: 0.75rem;
}

.admin-update-tools-grid {
    align-items: stretch;
}

.admin-update-tool-card {
    min-height: 0;
}

.admin-update-tool-card form {
    margin: 0;
}

.admin-update-tool-card.is-danger {
    border-color: rgba(185, 28, 28, 0.18);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.84), #ffffff);
}

.admin-update-tool-card .danger-zone {
    border: 0;
    padding: 0;
    background: transparent;
}

@media (max-width: 1080px) {
    .admin-update-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-update-status-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-update-hero {
        display: grid;
    }

    .admin-update-metric-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin tag editor layout. */
.admin-tags-hero {
    margin-bottom: 1rem;
}

.admin-tags-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.admin-tags-list-panel,
.admin-tags-edit-panel {
    min-width: 0;
}

.admin-tags-list {
    display: grid;
    gap: 0.5rem;
}

.admin-tag-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--panel) 92%, #fff);
    color: inherit;
    text-decoration: none;
}

.admin-tag-row:hover,
.admin-tag-row:focus,
.admin-tag-row.is-active {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.admin-tag-row span {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.admin-tag-row strong,
.admin-tag-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-tag-row small,
.admin-tag-row em {
    color: var(--muted);
    font-size: 0.85rem;
    font-style: normal;
}

.admin-tags-form {
    display: grid;
    gap: 1rem;
}

.admin-tags-form label {
    display: grid;
    gap: 0.4rem;
    font-weight: 700;
}

.admin-tags-form input,
.admin-tags-form textarea {
    width: 100%;
}

.admin-tags-form .muted {
    font-weight: 400;
}

@media (max-width: 880px) {
    .admin-tags-layout {
        grid-template-columns: 1fr;
    }
}

/* Admin gallery date picker enhancement. */
.admin-date-picker-field,
.admin-side-panel-field:has(.admin-date-picker-control) {
    gap: 0.35rem;
}

.admin-date-picker-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: min(100%, 28rem);
    max-width: 100%;
}

.admin-date-picker-control .admin-date-picker-input {
    min-width: 0;
    flex: 1 1 10rem;
    height: 2.15rem;
    margin: 0;
}

.admin-date-picker-control .admin-date-picker-input::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;
}

.admin-date-picker-control .admin-date-picker-button,
.admin-page .admin-date-picker-control .admin-date-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    white-space: nowrap;
    line-height: 1.2;
}

.admin-date-picker-control .admin-date-picker-calendar,
.admin-page .admin-date-picker-control .admin-date-picker-calendar {
    width: 2.15rem;
    min-width: 2.15rem;
    padding-inline: 0;
    font-size: 1rem;
}

@media (max-width: 560px) {
    .admin-date-picker-control {
        flex-wrap: wrap;
    }

    .admin-date-picker-control .admin-date-picker-input {
        flex-basis: calc(100% - 2.5rem);
    }
}