/*
 * Responsive application shell aligned to the exported Figma reference.
 * The existing stylesheet owns feature-level controls and dialogs; this file
 * owns page geometry, shared surfaces, and the final visual tokens.
 */

:root,
body[data-theme="light"] {
    --ui-brand: #0b5fae;
    --ui-brand-hover: #084f92;
    --ui-workspace: #dadada;
    --ui-surface: #ffffff;
    --ui-surface-soft: #ececeb;
    --ui-control: #e4e4e4;
    --ui-text: #383838;
    --ui-muted: #99999f;
    --ui-line: #dedede;
    --ui-danger: #d81f26;
    --ui-shadow: 0 2px 9px rgba(0, 0, 0, .18);
    --ui-radius: 10px;
    --ui-selection-bg: rgba(11, 95, 174, .22);
    --ui-nav-height: 58px;
    --ui-tab-height: 50px;
    --ui-tab-top-radius: 20px;
    --ui-tab-inverse-radius: 20px;
    --ui-gap: clamp(6px, .7vw, 10px);
    --ui-page-pad: clamp(6px, .7vw, 10px);
}

body[data-theme="dark"] {
    --ui-brand: #4893dd;
    --ui-brand-hover: #65a6e5;
    --ui-workspace: #0e0e0e;
    --ui-surface: #2b2b2b;
    --ui-surface-soft: #1f1f1f;
    --ui-control: #3b3b3b;
    --ui-text: #e3e3f1;
    --ui-muted: #8d8d8d;
    --ui-line: rgba(226, 226, 244, .12);
    --ui-danger: #e26f73;
    --ui-shadow: none;
    --ui-selection-bg: rgba(72, 147, 221, .34);
}

/* The markup carries Tailwind's selection:bg-zinc-700, which paints a dark
   band under dark text in the light theme. Only the background is overridden
   so coloured elements keep their own text colour. */
body[data-theme]::selection,
body[data-theme] ::selection {
    background-color: var(--ui-selection-bg);
}

html,
body {
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
}

/* UI copy is presentation, not a text-editing surface. */
body :where(*):not(input):not(textarea):not(select):not(option):not([contenteditable="true"]) {
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
select,
option,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

body {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr);
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-family: Montserrat, "Noto Sans SC", "Segoe UI", sans-serif !important;
    font-size: 12px !important;
}

/* The rounded workspace must reveal the white app shell at its top corners. */
body[data-theme="light"] {
    background: var(--ui-surface) !important;
}

button,
input,
select {
    min-width: 0;
    font: inherit;
}

.menu-trigger,
.menu-item {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

#native-menu-bar {
    display: flex !important;
    align-items: center;
    padding: 7px clamp(18px, 2.25vw, 32px) !important;
    gap: clamp(18px, 2.8vw, 40px) !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    border-bottom: 3px solid var(--ui-control) !important;
    border-radius: 0 0 20px 20px !important;
    background: color-mix(in srgb, var(--ui-surface) 92%, var(--ui-workspace)) !important;
    box-shadow: none !important;
    color: var(--ui-muted) !important;
    font-size: 10px !important;
    line-height: 1.4;
}

#native-menu-bar .menu-brand {
    color: var(--ui-brand) !important;
    font-weight: 900;
    text-transform: uppercase;
}

#native-menu-bar .menu-group {
    padding: 0 !important;
}

#native-menu-bar .menu-trigger {
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    white-space: nowrap;
}

#native-menu-bar .menu-trigger:hover,
#native-menu-bar .menu-trigger:focus-visible {
    color: var(--ui-text);
}

#native-menu-bar .menu-group > div {
    min-width: max-content;
    padding: 4px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

#native-menu-bar .menu-item {
    width: 100%;
    padding: 7px 10px !important;
    border-radius: 5px;
    text-align: left;
    white-space: nowrap;
}

#native-menu-bar .menu-item:hover,
#native-menu-bar .menu-item:focus-visible {
    background: var(--ui-control) !important;
    color: var(--ui-text) !important;
}

body > header {
    display: flex !important;
    align-items: flex-end !important;
    min-width: 0;
    height: var(--ui-nav-height) !important;
    min-height: var(--ui-nav-height) !important;
    padding: 0 clamp(18px, 2.25vw, 32px) !important;
    border: 0 !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
}

body > header > div:first-child {
    height: 100%;
    min-width: 0;
    gap: clamp(20px, 2.7vw, 40px) !important;
}

body > header .text-\[14px\] {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    font-size: 0 !important;
}

body > header .brand-mark {
    width: 56px !important;
    height: 38px !important;
    object-fit: contain;
}

body > header .brand-name,
body > header .text-\[14px\] > span,
body > header .h-6 {
    display: none !important;
}

body > header nav {
    display: flex;
    align-items: flex-end !important;
    gap: clamp(8px, 2.6vw, 38px) !important;
    overflow: visible !important;
}

body > header nav button {
    align-self: flex-end;
    min-width: 89px !important;
    height: var(--ui-tab-height) !important;
    padding: 0 10px 8px !important;
    border: 0 !important;
    border-bottom: 8px solid transparent !important;
    border-radius: var(--ui-tab-top-radius) var(--ui-tab-top-radius) 0 0 !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
}

body > header nav button:hover {
    background: var(--ui-surface-soft) !important;
}

body > header nav button.border-zinc-100 {
    border-bottom-color: var(--ui-workspace) !important;
    background: var(--ui-workspace) !important;
    color: var(--ui-brand) !important;
    font-weight: 700 !important;
}

body > header nav button.border-zinc-100::before,
body > header nav button.border-zinc-100::after {
    bottom: -8px !important;
    width: var(--ui-tab-inverse-radius) !important;
    height: var(--ui-tab-inverse-radius) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

body > header nav button.border-zinc-100::before {
    left: calc(-1 * var(--ui-tab-inverse-radius)) !important;
    background-image: radial-gradient(
        circle at top left,
        transparent var(--ui-tab-inverse-radius),
        var(--ui-workspace) calc(var(--ui-tab-inverse-radius) + .5px)
    ) !important;
}

body > header nav button.border-zinc-100::after {
    right: calc(-1 * var(--ui-tab-inverse-radius)) !important;
    background-image: radial-gradient(
        circle at top right,
        transparent var(--ui-tab-inverse-radius),
        var(--ui-workspace) calc(var(--ui-tab-inverse-radius) + .5px)
    ) !important;
}

body > header > .header-actions {
    align-self: center;
    display: flex;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body > header .export-actions {
    display: grid;
    grid-template-columns: repeat(3, 96px);
    flex: 0 0 auto;
    align-items: center;
    width: 308px !important;
    height: 32px;
    gap: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ui-brand);
}

body > header .export-actions > button {
    display: flex;
    flex: 0 0 96px !important;
    align-items: center;
    justify-content: center;
    width: 96px !important;
    min-width: 96px !important;
    height: 32px !important;
    min-height: 0 !important;
    padding: 3px 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ui-text) !important;
    box-shadow: inset 0 0 0 3px var(--ui-brand) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
}

body > header .export-actions > :is(#btn-export-roll, #btn-import, #btn-export-dialog) {
    box-sizing: border-box !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 32px !important;
    flex: 0 0 96px !important;
    font-weight: 900 !important;
}

body[data-theme="light"] > header .export-actions > :is(#btn-export-roll, #btn-import) {
    background: #fff !important;
    color: var(--ui-text) !important;
}

body > header .export-actions > button.hidden {
    display: none !important;
}

body > header .export-actions > #btn-export-dialog {
    background: var(--ui-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body[data-theme="dark"] > header .export-actions > #btn-export-roll,
body[data-theme="dark"] > header .export-actions > #btn-import {
    background: #1f1f1f !important;
    color: #e3e3f1 !important;
    box-shadow: inset 0 0 0 3px var(--ui-brand) !important;
}

#btn-delete-develop-image {
    display: none !important;
}

#native-menu-bar .menu-group.is-open > .menu-popover {
    display: block !important;
}

#views {
    display: grid !important;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: var(--ui-page-pad) !important;
    border-radius: 20px 20px 0 0 !important;
    background: var(--ui-workspace) !important;
    background-clip: padding-box !important;
    /* box-shadow: 0 -7px 16px rgba(0, 0, 0, .16) !important; */
    overflow: visible !important;
}

#views > [id^="view-"] {
    position: relative !important;
    inset: auto !important;
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    border-radius: var(--ui-radius) !important;
}

#view-library {
    gap: var(--ui-gap);
    overflow: visible !important;
    background: transparent !important;
}

.view-toolbar {
    flex: 0 0 auto;
    min-width: 0;
    height: auto !important;
    padding: 6px 18px !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: var(--ui-shadow) !important;
}

body[data-theme="light"] #view-library > .library-toolbar {
    background: var(--ui-surface-soft) !important;
}

body[data-theme="dark"] #view-library > .library-toolbar {
    background: var(--ui-surface-soft) !important;
}

.library-toolbar-actions {
    flex: 0 0 auto;
    gap: 10px !important;
}

.library-toolbar > h1,
#history-view-title {
    margin: 0;
    color: var(--ui-brand) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

#library-selection-count {
    min-width: 92px;
    color: var(--ui-muted) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: right;
    white-space: nowrap;
}

#btn-select-all,
#btn-deselect-all,
#btn-delete-library-images {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px !important;
    border-radius: 5px !important;
    background: var(--ui-surface) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    white-space: nowrap;
}

#btn-select-all,
#btn-deselect-all {
    min-width: 108px;
}

#btn-delete-library-images {
    min-width: 160px;
}

#btn-select-all,
#btn-deselect-all {
    color: var(--ui-muted) !important;
}

#btn-delete-library-images {
    color: var(--ui-danger) !important;
}

#btn-delete-library-images:disabled {
    color: var(--ui-muted) !important;
    background: var(--ui-surface) !important;
    opacity: .45 !important;
    cursor: not-allowed !important;
}

@media (max-width: 760px) {
    #btn-select-all,
    #btn-delete-library-images {
        flex-basis: auto;
        width: auto;
    }
}

.view-content {
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: clamp(16px, 1.6vw, 24px) !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

.library-content:has(#library-empty:not(.hidden)) {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#library-grid,
#history-internal-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)) !important;
    gap: clamp(8px, .75vw, 12px) !important;
}

.library-item {
    min-width: 0;
    aspect-ratio: 4 / 3 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--ui-surface-soft) !important;
    outline: 0 solid transparent !important;
    outline-offset: -2px !important;
}

.library-item:hover {
    outline: 1px solid var(--ui-muted) !important;
}

.library-item:hover img {
    opacity: 1 !important;
    transform: none !important;
}

.library-item.selected {
    outline: 3px solid var(--ui-brand) !important;
}

#library-empty,
#history-empty {
    color: var(--ui-muted) !important;
}

#library-empty svg,
#history-empty svg {
    width: clamp(56px, 5vw, 76px) !important;
    height: auto !important;
    color: var(--ui-muted) !important;
}

#library-empty .text-sm,
#history-empty .text-sm {
    color: var(--ui-text) !important;
    font-size: clamp(18px, 1.7vw, 24px) !important;
    font-weight: 800 !important;
}

#library-empty .text-\[11px\] {
    max-width: 36rem !important;
    color: var(--ui-muted) !important;
    font-size: clamp(13px, 1.15vw, 16px) !important;
    font-weight: 600 !important;
}

#library-empty button,
#history-empty button {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 8px 18px !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: #c8c8c8 !important;
    color: #343434 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#view-history.is-active {
    display: grid !important;
    grid-template-columns: minmax(180px, 16vw) minmax(0, 1fr);
    gap: var(--ui-gap);
}

#view-history.is-active.history-detail {
    grid-template-columns: minmax(0, 1fr);
}

#view-history.history-detail #history-filter-sidebar {
    display: none !important;
}

#view-history > div:first-child {
    width: auto !important;
    min-width: 0;
    padding: clamp(14px, 1.25vw, 18px) !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

#view-history > div:last-child {
    min-width: 0;
    margin: 0 !important;
    gap: var(--ui-gap);
}

body[data-theme] #view-history:not(.history-detail) > div:last-child {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-theme] #view-history > div:last-child > .history-toolbar {
    flex: 0 0 auto !important;
    height: auto !important;
    padding: 6px 18px !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: var(--ui-shadow) !important;
}

body[data-theme] #view-history > div:last-child > .history-content {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    padding: 16px !important;
}

body[data-theme] #view-history:not(.history-detail) > div:last-child > .history-content {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Roll Contents sits directly on the workspace. The toolbar remains the only
 * raised card, while the photo grid is inset from its left and right edges. */
body[data-theme] #view-history.history-detail > div:last-child > .history-content {
    padding: 22px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

body[data-theme] #view-history.history-detail,
body[data-theme] #view-history.history-detail > div:last-child {
    min-height: 0 !important;
    overflow: hidden !important;
}

body[data-theme] #view-history.history-detail > div:last-child {
    gap: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
}

#view-history.history-detail #history-internal-grid {
    width: 100%;
    margin: 0 auto;
}

.history-roll-overview:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(520px, 1.35fr);
    align-items: center;
    /* The wide gap belongs between the identity and the facts; the note row
     * sits directly under both. */
    column-gap: clamp(28px, 5vw, 84px);
    row-gap: 18px;
    margin: -6px 0 28px;
    padding: 12px 14px;
}

.history-roll-identity { min-width: 0; }
.history-roll-identity > span,
.history-roll-facts dt {
    display: block;
    margin-bottom: 7px;
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 500;
}
.history-roll-identity h2 {
    overflow: hidden;
    margin: 0;
    color: var(--ui-text);
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.history-roll-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: clamp(18px, 3vw, 48px);
    margin: 0;
}
.history-roll-facts div { min-width: 0; }
/* Same label/value rhythm as the four facts above, on its own full-width row. */
.history-roll-note {
    grid-column: 1 / -1;
    min-width: 0;
}
.history-roll-note > span {
    display: block;
    margin-bottom: 7px;
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 500;
}
.history-roll-note > p {
    margin: 0;
    color: var(--ui-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.history-roll-facts dd {
    overflow: hidden;
    margin: 0;
    color: var(--ui-text);
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#view-history.history-detail #btn-edit-roll,
#view-history.history-detail #btn-delete-roll-images,
#view-history.history-detail #btn-promote-roll,
#view-history.history-detail #btn-export-contact-sheet {
    min-height: 34px !important;
    padding: 0 16px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#view-history.history-detail #btn-edit-roll {
    background: transparent !important;
    color: var(--ui-text) !important;
}

#view-history.history-detail #btn-delete-roll-images {
    background: transparent !important;
    color: #f09a9d !important;
}

#view-history.history-detail #btn-promote-roll {
    background: #99999f !important;
    color: #fff !important;
}

#view-history.history-detail #btn-promote-roll:hover:not(:disabled) {
    background: #85858b !important;
}

#view-history.history-detail #btn-export-contact-sheet {
    background: #fff !important;
    color: var(--ui-brand) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .08) !important;
}

#view-history.history-detail #btn-export-contact-sheet:hover:not(:disabled) {
    background: #f7f7f7 !important;
    color: var(--ui-brand-hover) !important;
}

#view-develop.is-active {
    display: grid !important;
}

#view-develop {
    grid-template-columns: minmax(0, 1fr) clamp(24px, 2.1vw, 30px) clamp(320px, 25vw, 420px);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--ui-gap) !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

#history-filter-sidebar {
    width: auto !important;
    min-width: 0;
    padding: clamp(14px, 1.25vw, 18px) !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

/* Rolls archive */
.roll-filter-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

#view-history #btn-clear-roll-filters {
    padding: 5px 10px !important;
    border: 0 !important;
    background: var(--ui-control) !important;
    color: var(--ui-brand) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.roll-filter-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 20px 0 16px;
    padding: 16px 8px;
    border-block: 3px solid var(--ui-line);
}

.roll-filter-stats span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--ui-muted);
    font-size: 10px;
}

.roll-filter-stats strong {
    color: var(--ui-brand);
    font-size: 23px;
    line-height: 1;
}

.roll-filter-group {
    margin-bottom: 18px !important;
    padding: 10px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface-soft);
}

#view-history .roll-filter-group h3 {
    margin-bottom: 7px !important;
    color: var(--ui-text) !important;
    font-size: 14px !important;
}

#filter-date-list {
    gap: 4px !important;
}

.roll-date-year {
    border-radius: 6px;
}

.roll-date-year summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 25px;
    cursor: pointer;
    list-style: none;
    color: var(--ui-text);
    font-size: 12px;
}

.roll-date-year summary::-webkit-details-marker { display: none; }
.roll-date-year summary::after {
    content: "›";
    margin-left: 2px;
    color: var(--ui-brand);
    font-size: 18px;
    line-height: 1;
    transform: rotate(0deg);
}
.roll-date-year[open] summary::after { transform: rotate(90deg); }
#view-history .filter-year-checkbox {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--ui-brand);
}
.roll-date-children {
    display: grid;
    gap: 3px;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--ui-surface);
}

#view-history .roll-date-children label {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 25px;
    color: var(--ui-muted) !important;
    font-size: 12px !important;
}

#view-history .roll-date-children .filter-date {
    width: 13px;
    height: 13px;
    margin: 0;
}

.roll-date-children label span {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#library-rolls-grid:not(.hidden) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(12px, 1.35vw, 20px) !important;
}
#library-rolls-grid.hidden { display: none !important; }

.roll-card {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.roll-card:hover { transform: translateY(-2px); }
.roll-card.delete-selected { box-shadow: inset 0 0 0 3px var(--ui-danger), var(--ui-shadow); }
.roll-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    aspect-ratio: 2.8 / 1;
    margin: 20px 20px 0;
    padding: 16px 20px;
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--ui-workspace) 48%, var(--ui-surface-soft));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .16);
}
.roll-preview-grid img,
.roll-preview-grid .roll-preview-empty {
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ui-surface) 86%, var(--ui-surface-soft));
    object-fit: cover;
}
.roll-card .roll-summary { padding: 18px 30px 22px; }
.roll-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roll-card .roll-title { min-width: 0; color: var(--ui-text); font-size: 15px; font-weight: 700; }
.roll-frame-count {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--ui-control);
    color: var(--ui-text);
    font-size: 10px;
}
.roll-card .roll-format { margin-top: 7px; color: var(--ui-brand); font-size: 13px; }
.roll-card .roll-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.roll-card .roll-meta > span { min-width: 0; color: var(--ui-text); font-size: 13px; }
.roll-card .roll-meta small { display: block; color: var(--ui-muted); font-size: 10px; font-weight: 600; }
/* A roll note reads as one more labelled fact, exactly like Camera and
 * Captured, so several rolls of the same film stock stay comparable at a
 * glance instead of the note competing with the card's real metadata. */
.roll-card .roll-notes { min-width: 0; margin-top: 18px; }
.roll-card .roll-notes small { display: block; color: var(--ui-muted); font-size: 10px; font-weight: 600; }
.roll-card .roll-notes > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 3px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.roll-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.roll-view-action { color: var(--ui-brand); font-size: 14px; font-weight: 700; }
#view-history .roll-edit-action { margin: 0; padding: 4px 0 !important; background: transparent !important; color: var(--ui-muted) !important; }

@media (max-width: 980px) {
    #library-rolls-grid { grid-template-columns: minmax(0, 1fr); }
}

#view-develop > div:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ui-gap);
    overflow: visible !important;
    background: transparent !important;
}

#view-develop > div:first-child > div:first-child {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: var(--ui-shadow) !important;
}

.toolbar-btn {
    min-height: 0 !important;
    padding: 5px 8px !important;
    border-radius: 3px !important;
    color: var(--ui-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.transform-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crop-tools {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    margin-right: 6px;
}

.crop-tools > .toolbar-btn {
    height: 27px !important;
    padding: 5px 14px !important;
    border-radius: 0 !important;
}

.crop-tools > #btn-crop-mode {
    min-width: 58px;
    background: #fff !important;
}

.crop-tools > #btn-reset-crop {
    min-width: 84px;
    border-radius: 4px !important;
    background: #99999f !important;
    color: #fff !important;
}

#view-develop .transform-tools {
    gap: 14px !important;
}

body[data-theme="dark"] .crop-tools > #btn-crop-mode {
    background: #1f1f1f !important;
    color: #e3e3f1 !important;
}

body[data-theme="dark"] .crop-tools {
    background: #1f1f1f;
}

body[data-theme="dark"] .crop-tools > #btn-reset-crop {
    background: #8d8d8d !important;
    color: #1f1f1f !important;
}

.toolbar-btn:hover:not(:disabled),
.toolbar-btn.active {
    background: var(--ui-surface) !important;
    color: var(--ui-brand) !important;
}

.toolbar-icon {
    color: var(--ui-brand) !important;
    stroke: var(--ui-brand) !important;
}

.toolbar-icon-fill {
    stroke: none !important;
}

#btn-rotate-left .toolbar-icon,
#btn-rotate-right .toolbar-icon,
#btn-flip-h .toolbar-icon,
#btn-flip-v .toolbar-icon {
    stroke: none !important;
}

#view-develop > div:first-child > div:nth-child(2) {
    min-height: 0;
    padding: clamp(12px, 1.4vw, 20px) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-workspace) !important;
}

#preview-viewport {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;
}

#zoom-hud {
    position: absolute;
    right: clamp(14px, 1.5vw, 22px);
    bottom: clamp(14px, 1.5vw, 22px);
    z-index: 60;
    min-width: 52px;
    padding: 6px 9px;
    border-radius: 5px;
    background: rgba(246, 246, 246, 0.92);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

#zoom-hud.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#zoom-hud.hidden {
    display: none !important;
}

body[data-theme="dark"] #zoom-hud {
    background: rgba(31, 31, 31, 0.9);
    color: #e3e3f1;
}

/* Keep the scope tabs physically joined to the visualization surface. */
#inspector-scopes > div:first-child {
    margin-bottom: 0 !important;
}

#inspector-scopes > div:last-child {
    border-radius: 0 5px 5px 5px !important;
}

#canvas-wrapper {
    /* The viewport clips zoomed content; constraining each axis here would
     * distort the canvas as soon as only one side reaches the viewport. */
    max-width: none;
    max-height: none;
    box-shadow: none !important;
}

#filmstrip-container {
    grid-column: 1 / 3;
    grid-row: 2;
    flex: 0 0 auto;
    height: auto !important;
    min-height: clamp(88px, 11vh, 104px) !important;
    margin: 0 !important;
    padding: clamp(10px, 1vw, 14px) !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

.film-item {
    flex: 0 0 clamp(84px, 7.5vw, 108px);
    /* Keep every filmstrip slot landscape even when its rendered thumbnail
     * was captured after a 90-degree rotation. The image itself is cropped
     * inside this stable frame via object-fit: cover. */
    width: clamp(84px, 7.5vw, 108px) !important;
    height: clamp(56px, 5vw, 72px) !important;
    aspect-ratio: 3 / 2;
    border-radius: 3px !important;
    background: var(--ui-surface-soft) !important;
}

.film-item.active {
    outline: 3px solid var(--ui-brand) !important;
    outline-offset: -3px !important;
}

.film-item.selected:not(.active) {
    outline: 2px solid color-mix(in srgb, var(--ui-brand) 72%, transparent) !important;
    outline-offset: -2px !important;
    opacity: 1 !important;
}

#develop-module-nav {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 4px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.module-nav-btn {
    width: 100%;
}

#develop-inspector {
    grid-column: 3;
    grid-row: 1 / 3;
    width: calc(100% + 16px) !important;
    height: calc(100% + 16px) !important;
    min-width: 0 !important;
    margin: -8px !important;
    padding: 8px !important;
    gap: var(--ui-gap) !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

#develop-inspector > #inspector-scopes,
#develop-inspector > div:last-child {
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

#develop-inspector > #inspector-scopes {
    position: sticky !important;
    top: 0 !important;
    flex: 0 0 auto !important;
    padding: clamp(16px, 1.7vw, 24px) !important;
}

#develop-inspector > #inspector-scopes .w-full {
    height: auto !important;
    aspect-ratio: 2.7 / 1;
    border: 0 !important;
    border-radius: 5px !important;
    background: var(--ui-workspace) !important;
}

#develop-inspector > #inspector-controls {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: clamp(16px, 1.7vw, 24px) !important;
    gap: 18px !important;
}

#develop-inspector.calibration-locked > #inspector-controls {
    overflow: hidden !important;
}

#btn-copy-settings,
#btn-paste-settings,
.control-group button:not(.toolbar-btn) {
    min-height: 0 !important;
    padding-block: 7px !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-control) !important;
    color: var(--ui-text) !important;
}

.inspector-action-segment {
    border-radius: var(--ui-radius) !important;
    background: var(--ui-brand) !important;
    box-shadow: inset 0 0 0 2px var(--ui-brand) !important;
}

.control-group button#btn-auto-color {
    background: var(--ui-brand) !important;
    color: #fff !important;
}

.control-group #btn-reset-color {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

.control-group,
.control-group h3 {
    border-color: var(--ui-line) !important;
}

@media (max-width: 1100px) {
    body > header nav button {
        min-width: 58px !important;
        padding-inline: 7px !important;
        font-size: 14px !important;
    }

    #view-develop {
        grid-template-columns: minmax(0, 1fr) clamp(22px, 2.4vw, 26px) minmax(280px, 30vw);
    }

    .toolbar-btn > span {
        display: none;
    }

    #btn-crop-mode .toolbar-icon,
    #btn-reset-crop .toolbar-icon,
    #btn-recalibrate .toolbar-icon,
    #btn-perspective-mode .toolbar-icon {
        display: block !important;
    }
}

@media (max-width: 760px) {
    #native-menu-bar {
        padding-inline: 14px !important;
        gap: 16px !important;
    }

    body > header {
        padding-inline: 10px !important;
    }

    body > header > div:first-child {
        gap: 10px !important;
    }

    body > header .brand-mark {
        width: 42px !important;
    }

    body > header nav {
        gap: 0 !important;
    }

    body > header nav button {
        min-width: 48px !important;
        font-size: 12px !important;
    }

    #view-history.is-active {
        grid-template-columns: minmax(150px, 28vw) minmax(0, 1fr);
    }

    #view-develop {
        grid-template-columns: minmax(0, 1fr) clamp(20px, 3vw, 24px);
        grid-template-rows: minmax(420px, 62vh) auto minmax(480px, 70vh);
        height: auto !important;
        gap: 6px !important;
    }

    #view-develop > div:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    #develop-module-nav {
        grid-column: 2;
        grid-row: 1;
    }

    #filmstrip-container {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body[data-theme] #view-develop > #develop-inspector {
        grid-column: 1 / -1;
        grid-row: 3;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
    }

    #views:has(#view-develop.is-active) {
        display: block !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 520px) {
    body > header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 6px !important;
    }

    body > header > div:first-child {
        grid-row: 1;
        width: auto;
        height: auto;
        justify-content: space-between;
        gap: 4px !important;
    }

    body > header .brand-mark {
        width: 34px !important;
    }

    body > header nav {
        flex: 1 1 auto;
        justify-content: space-between;
    }

    body > header nav button {
        flex: 1 1 0;
        min-width: 0 !important;
        height: auto !important;
        line-height: 1.35 !important;
        padding-inline: 4px !important;
    }

    body > header > .header-actions {
        grid-row: 2;
        width: 100% !important;
        align-self: stretch !important;
        justify-content: flex-end;
    }

    body > header .export-actions > #btn-export-dialog {
        display: flex !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #views > [id^="view-"],
    .library-item,
    .film-item {
        animation: none !important;
        transition: none !important;
    }
}

/* The active scope tab and canvas form one continuous surface. */
#inspector-scopes:has(#btn-viz-histogram.active) > div:last-child {
    border-radius: 0 5px 5px 5px !important;
}

#inspector-scopes:has(#btn-viz-waveform.active) > div:last-child {
    border-radius: 5px 0 5px 5px !important;
}

/* Frame 53 / 60: main inspector controls. */
body[data-theme="light"] {
    --inspector-panel: #e4e4e4;
    --inspector-field: #ffffff;
    --inspector-standalone: #e4e4e4;
}

body[data-theme="dark"] {
    --inspector-panel: #2b2b2b;
    --inspector-field: #3b3b3b;
    /* The print-emulation controls sit directly on the panel. A fill equal to
     * the panel (#2b2b2b) left them as bare text once the platform-drawn
     * select chrome was removed. */
    --inspector-standalone: #3b3b3b;
}

#inspector-actions .inspector-action-segment {
    display: grid !important;
    /* Auto Invert, whole-roll batch and Reset stay on one line: the two
     * invert actions share the row and Reset keeps a narrower pill. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 0.75fr) !important;
    gap: 6px !important;
    padding: 3px !important;
    overflow: hidden !important;
    border-radius: 11px !important;
    background: var(--ui-brand) !important;
    box-shadow: inset 0 0 0 2px var(--ui-brand) !important;
}

#inspector-actions .inspector-action-segment > button {
    min-width: 0 !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 9px !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

#inspector-actions #btn-auto-color,
#inspector-actions #btn-auto-color-roll {
    background: var(--ui-brand) !important;
    color: #ffffff !important;
}

#inspector-actions #btn-reset-color {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

/* Roll imports without sampled anchors and Loose Import keep the v1.0.2 pair:
 * one wide Auto Invert and Reset. Invert Whole Roll only exists once the roll
 * carries sampled film base and leader anchors. */
#inspector-actions .inspector-action-segment.is-single-invert {
    grid-template-columns: minmax(0, 2.25fr) minmax(0, 0.75fr) !important;
}

#inspector-actions #btn-auto-color-roll[hidden] {
    display: none !important;
}

#inspector-printer > h3 {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#inspector-input {
    padding: 18px 0 24px !important;
    border: 0 !important;
    border-top: 3px solid var(--ui-control) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#inspector-input > h3,
#inspector-print > h3 {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#inspector-input > h3 {
    margin-bottom: 16px !important;
}

#inspector-input > div {
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#inspector-input > div > div {
    gap: 10px !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--inspector-panel) !important;
}

/* Inspector dropdowns are drawn here instead of by the platform. The native
 * macOS pop-up button paints its own gradient body and stepper, which never
 * matches the flat Chromium/Windows rendering, so every dropdown in the
 * inspector shares one drawn shape, one caret and one typography. */
#inspector-input #select-colorspace,
#inspector-input .develop-calibration-profile select,
#inspector-print #select-builtin-lut {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 32px 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%),
        linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 17px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 5px 5px !important;
    background-repeat: no-repeat !important;
    color: var(--ui-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-overflow: ellipsis;
    box-shadow: none !important;
}

/* Contextual fills stay as designed: fields sit on an inspector card, the LUT
 * selector sits directly on the panel. */
#inspector-input #select-colorspace,
#inspector-input .develop-calibration-profile select {
    background-color: var(--inspector-field) !important;
}

#inspector-print #select-builtin-lut {
    background-color: var(--inspector-standalone) !important;
}

#inspector-input #select-colorspace:disabled,
#inspector-input .develop-calibration-profile select:disabled,
#inspector-print #select-builtin-lut:disabled {
    color: var(--ui-muted) !important;
    cursor: not-allowed;
}

#inspector-print {
    border-top: 3px solid var(--ui-control) !important;
    background: transparent !important;
}

#inspector-print > h3 {
    margin-bottom: 20px !important;
}

#inspector-print #btn-load-lut {
    width: 100% !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--inspector-standalone) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

body[data-theme="dark"] #inspector-actions #btn-reset-color {
    background: #2b2b2b !important;
    color: #e3e3f1 !important;
}

body[data-theme="dark"] #inspector-print {
    border-top-color: #3b3b3b !important;
}

/* Frame 53 / 60: the module locator occupies only the upper inspector area. */
@media (min-width: 761px) {
    #develop-module-nav {
        align-self: start !important;
        height: calc(100% - var(--module-nav-offset, 0px)) !important;
        margin-top: var(--module-nav-offset, 0px) !important;
        position: relative !important;
        overflow: visible !important;
    }
}

/* Evenly spaced ticks and a rounded precision track. Temperature and Tint
 * intentionally retain their existing unticked gradient tracks. */
body[data-theme="light"] #develop-inspector input.custom-range:not(.temperature-track):not(.tint-track),
body[data-theme="light"] #develop-inspector input.slider {
    --slider-tick: rgba(20, 20, 22, .18);
    background-image:
        linear-gradient(var(--slider-tick), var(--slider-tick)),
        linear-gradient(var(--slider-tick), var(--slider-tick)),
        repeating-linear-gradient(to right, var(--slider-tick) 0 1px, transparent 1px 10%) !important;
    background-size: 1px 7px, 1px 7px, calc(100% - 1px) 7px !important;
    background-position: left top, right top, left top !important;
    background-repeat: no-repeat !important;
}

body[data-theme="dark"] #develop-inspector input.custom-range:not(.temperature-track):not(.tint-track),
body[data-theme="dark"] #develop-inspector input.slider {
    --slider-tick: rgba(226, 226, 244, .18);
    background-image:
        linear-gradient(var(--slider-tick), var(--slider-tick)),
        linear-gradient(var(--slider-tick), var(--slider-tick)),
        repeating-linear-gradient(to right, var(--slider-tick) 0 1px, transparent 1px 10%) !important;
    background-size: 1px 7px, 1px 7px, calc(100% - 1px) 7px !important;
    background-position: left top, right top, left top !important;
    background-repeat: no-repeat !important;
}

body[data-theme] #develop-inspector input.custom-range:not(.temperature-track):not(.tint-track)::-webkit-slider-runnable-track,
body[data-theme] #develop-inspector input.slider::-webkit-slider-runnable-track,
body[data-theme] #develop-inspector input.custom-range:not(.temperature-track):not(.tint-track):disabled::-webkit-slider-runnable-track,
body[data-theme] #develop-inspector input.slider:disabled::-webkit-slider-runnable-track {
    height: 4px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(
        to right,
        var(--track-fill, var(--ui-brand)) 0%,
        var(--track-fill, var(--ui-brand)) var(--val),
        color-mix(in srgb, var(--ui-muted) 38%, transparent) var(--val),
        color-mix(in srgb, var(--ui-muted) 38%, transparent) 100%
    ) !important;
}


#develop-module-nav .module-nav-steps {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    gap: 4px;
}

#develop-module-nav .module-nav-btn {
    flex: 1 1 0;
    min-height: 14px;
}

#develop-module-nav .module-nav-btn[data-target="inspector-input"] {
    margin-top: 6px;
}

.module-nav-slider {
    --module-slider-y: 0px;
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 50%;
    width: min(18px, calc(100% - 4px));
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: color-mix(in srgb, var(--ui-brand) 82%, white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
    cursor: grab;
    touch-action: none;
    transform: translate(-50%, var(--module-slider-y));
}

.module-nav-slider:hover,
.module-nav-slider:focus-visible,
.module-nav-slider.is-dragging {
    background: var(--ui-brand);
    outline: none;
}

.module-nav-slider.is-dragging {
    cursor: grabbing;
}

/* Final dark hierarchy pass. Keep the workspace near-black so the charcoal
 * panels and cards retain the separation shown in the reference screens. */
body[data-theme="dark"] {
    --ui-workspace: #0e0e0e;
    --ui-surface: #2b2b2b;
    --ui-surface-soft: #1f1f1f;
    --ui-control: #414143;
    --ui-line: rgba(226, 226, 244, .12);
    --ui-shadow: 0 2px 9px rgba(0, 0, 0, .38);
}

body[data-theme="dark"] #views {
    background: var(--ui-workspace) !important;
}

body[data-theme="dark"] #view-library > .library-toolbar,
body[data-theme="dark"] #view-history .history-toolbar,
body[data-theme="dark"] #view-develop > div:first-child > div:first-child,
body[data-theme="dark"] #filmstrip-container {
    background: var(--ui-surface-soft) !important;
    box-shadow: var(--ui-shadow) !important;
}

body[data-theme="dark"] .library-content,
body[data-theme="dark"] .library-content:has(#library-empty:not(.hidden)),
body[data-theme="dark"] #view-history > div:first-child,
body[data-theme="dark"] #history-filter-sidebar,
body[data-theme="dark"] #view-history .history-content,
body[data-theme="dark"] #develop-inspector > #inspector-scopes,
body[data-theme="dark"] #develop-inspector > #inspector-controls,
body[data-theme="dark"] #develop-module-nav {
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}

body[data-theme="dark"] .library-item,
body[data-theme="dark"] .film-item {
    background: var(--ui-surface-soft) !important;
}

body[data-theme="dark"] #develop-inspector > #inspector-scopes .w-full,
body[data-theme="dark"] #view-develop > div:first-child > div:nth-child(2) {
    background: var(--ui-workspace) !important;
}

body[data-theme="dark"] #btn-select-all,
body[data-theme="dark"] #btn-deselect-all,
body[data-theme="dark"] #btn-delete-library-images,
body[data-theme="dark"] #btn-copy-settings,
body[data-theme="dark"] #btn-paste-settings {
    background: var(--ui-control) !important;
}

body[data-theme="dark"] #btn-delete-library-images:disabled {
    background: color-mix(in srgb, var(--ui-control) 58%, var(--ui-surface-soft)) !important;
}

body[data-theme="dark"] .roll-row {
    border-color: var(--ui-line) !important;
}

/* Dark detail fixes: give the scopes card a readable lower edge and keep the
 * blue header button ring free from legacy black borders/outlines. */
body[data-theme="dark"] #develop-inspector > #inspector-scopes {
    box-shadow: 0 7px 12px rgba(0, 0, 0, .42) !important;
}

body[data-theme="dark"] > header .export-actions > :is(#btn-export-roll, #btn-import) {
    appearance: none;
    border: 0 !important;
    outline: 0 !important;
    background-clip: border-box !important;
    box-shadow: inset 0 0 0 3px var(--ui-brand) !important;
}

/* Align the Library and Rolls headers to the Develop tool strip width. */
#view-library > .library-toolbar,
#view-history > div:last-child > .history-toolbar {
    align-self: flex-start !important;
    width: min(
        100%,
        calc(
            100vw - (2 * var(--ui-page-pad)) - clamp(320px, 25vw, 420px)
            - clamp(24px, 2.1vw, 30px) - (2 * var(--ui-gap))
        )
    ) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#view-develop > div:first-child > div:first-child {
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#view-library > .library-toolbar,
#view-history > div:last-child > .history-toolbar,
#view-develop > div:first-child > div:first-child {
    min-height: 52px !important;
    padding-inline: clamp(12px, 1.25vw, 18px) !important;
}

#view-library .library-toolbar-actions,
#view-history .history-toolbar > div,
#view-develop .transform-tools {
    min-width: 0 !important;
}

/* Give roll-card shadows breathing room inside the scrolling viewport. */
#view-history,
#view-history > div:last-child {
    overflow: visible !important;
}

body[data-theme] #view-history:not(.history-detail) > div:last-child > .history-content {
    padding: 8px !important;
    overflow-y: auto !important;
}

/* Keep the archive inside the application viewport so the roll list owns the
 * scroll position instead of growing beyond the window. */
#views > [id^="view-"] {
    width: 100%;
    height: 100%;
    min-height: 0;
}
#view-history > div:last-child,
#view-library > div:last-child,
#view-develop > div:first-child,
#view-develop > div:last-child {
    min-height: 0;
}
#view-history > div:last-child > .history-content,
#view-library > div:last-child > .library-content {
    min-height: 0;
}

#library-rolls-grid:not(.hidden) {
    padding: 8px !important;
}

/* Import dialogs mirror the exported Figma card system. */
.import-modal {
    padding: 10px !important;
    background: color-mix(in srgb, var(--ui-workspace) 58%, transparent) !important;
}

.import-dialog {
    width: min(460px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 20px);
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
    transform: scale(1) !important;
}

.import-dialog-header {
    min-height: 48px;
    padding: 10px 10px 10px 20px !important;
    border: 0 !important;
    background: var(--ui-surface) !important;
}

.import-dialog-header h2 {
    color: var(--ui-brand) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.import-dialog-header p {
    margin-top: 5px !important;
    color: var(--ui-text) !important;
    font-size: 12px !important;
}

.import-close-btn {
    display: grid !important;
    place-items: center;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ui-muted) !important;
}

.import-close-btn svg {
    width: 24px !important;
    height: 24px !important;
}

.import-choice-list {
    margin: 0 10px 10px;
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 10px;
    background: var(--ui-workspace) !important;
}

/* Override the legacy generic modal spacing with the exact Figma geometry. */
#import-choice-content > .import-dialog-header,
#continue-roll-content > .import-dialog-header,
#roll-metadata-content > .import-dialog-header {
    padding: 10px 10px 10px 20px !important;
}

#import-choice-content > .import-choice-list,
#continue-roll-content > .import-dialog-body,
#roll-metadata-content > .import-dialog-body {
    padding: 10px !important;
}

#import-choice-content button:not(.import-close-btn) {
    position: relative;
    min-height: 82px !important;
    padding: 5px 10px !important;
    align-items: flex-start;
    justify-content: center;
    gap: 10px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 5px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#import-choice-content button:not(.import-close-btn) span:first-child {
    color: var(--ui-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#import-choice-content button:not(.import-close-btn) span:first-child::after {
    content: " →";
}

#import-choice-content button:not(.import-close-btn) span:nth-child(2) {
    max-width: calc(100% - 90px);
    color: var(--ui-text) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.import-choice-art {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 92px;
    height: 92px;
    transform: translateY(-50%);
    object-fit: contain;
    opacity: .14;
    pointer-events: none;
}

.import-dialog-back-title {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ui-brand) !important;
    cursor: pointer;
    font: inherit;
}

.import-dialog-back-title svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.import-dialog-back-title:focus-visible {
    outline: 2px solid var(--ui-brand);
    outline-offset: 4px;
}

/* Copy Settings mirrors the two-column Figma dialog in both themes. */
.copy-settings-modal {
    padding: 10px !important;
    background: color-mix(in srgb, var(--ui-workspace) 58%, transparent) !important;
    backdrop-filter: blur(6px);
}

.copy-settings-dialog {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(754px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    outline: none;
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .24);
}

.copy-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 14px 20px 10px;
}

.copy-settings-header h2 {
    margin: 0;
    color: var(--ui-brand);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.copy-settings-header p {
    margin: 3px 0 0;
    color: var(--ui-text);
    font-size: 11px;
    line-height: 1.35;
}

.copy-settings-close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ui-muted);
}

.copy-settings-close:hover {
    background: var(--ui-control);
    color: var(--ui-text);
}

.copy-settings-close svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.copy-settings-source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    margin: 0 10px 10px;
    padding: 10px 32px;
    border-radius: 10px;
    background: var(--ui-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.copy-settings-source > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.copy-settings-source span {
    color: var(--ui-muted);
    font-size: 10px;
}

.copy-settings-source strong {
    overflow: hidden;
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    min-height: 0;
    margin: 0 10px 10px;
    padding: 16px 20px;
    overflow-y: auto;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-workspace) 64%, var(--ui-surface));
}

.copy-settings-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
}

.copy-settings-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.copy-settings-group legend {
    width: 100%;
    margin: 0 0 2px;
    padding: 0;
}

.copy-settings-group label {
    display: flex;
    min-width: 0;
    min-height: 25px;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
}

.copy-settings-group > label {
    margin-left: 24px;
}

.copy-settings-group legend label {
    color: var(--ui-brand);
    font-size: 16px;
}

.copy-settings-group input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--ui-brand);
}

.copy-settings-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 0 10px 10px;
}

.copy-settings-footer-spacer {
    flex: 1 1 auto;
}

.copy-settings-footer button,
.copy-settings-footer select {
    min-height: 35px;
    border: 0;
    border-radius: 10px;
    font-size: 12px;
}

.copy-settings-secondary {
    padding: 0 12px;
    background: var(--ui-control);
    color: var(--ui-text);
    font-weight: 700;
}

.copy-settings-footer select {
    min-width: 210px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--ui-line);
    background-color: var(--ui-surface);
    color: var(--ui-text);
}

.copy-settings-primary {
    padding: 0 18px;
    background: var(--ui-brand);
    color: #fff;
    font-weight: 700;
}

.copy-settings-primary:hover {
    background: var(--ui-brand-hover);
}

@media (max-width: 680px) {
    .copy-settings-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .copy-settings-footer {
        flex-wrap: wrap;
    }

    .copy-settings-footer select {
        min-width: min(210px, 100%);
        flex: 1 1 180px;
    }

    .copy-settings-footer-spacer {
        display: none;
    }
}

/* Copy Settings must override the legacy [id$="-content"] modal rules. */
#copy-settings-content.copy-settings-dialog {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    width: min(754px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 20px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

#copy-settings-content > .copy-settings-header {
    min-height: 58px !important;
    padding: 14px 20px 10px !important;
    border: 0 !important;
}

#copy-settings-content .copy-settings-header h2 {
    margin: 0 !important;
    color: var(--ui-brand) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

#copy-settings-content .copy-settings-header p {
    margin: 3px 0 0 !important;
    color: var(--ui-text) !important;
    font-size: 11px !important;
}

#copy-settings-content .copy-settings-close {
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--ui-muted) !important;
}

#copy-settings-content > .copy-settings-source {
    min-height: 58px !important;
    margin: 0 10px 10px !important;
    padding: 10px 32px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15) !important;
}

#copy-settings-content > .copy-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px !important;
    min-height: 0 !important;
    margin: 0 10px 10px !important;
    padding: 16px 20px !important;
    overflow-y: auto !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--ui-workspace) 64%, var(--ui-surface)) !important;
}

#copy-settings-content .copy-settings-column {
    gap: 14px !important;
}

#copy-settings-content .copy-settings-group,
#copy-settings-content .copy-settings-group legend {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#copy-settings-content .copy-settings-group legend {
    margin-bottom: 2px !important;
}

#copy-settings-content .copy-settings-group label {
    min-height: 25px !important;
    gap: 10px !important;
    color: var(--ui-text) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

#copy-settings-content .copy-settings-group > label {
    margin-left: 24px !important;
}

#copy-settings-content .copy-settings-group legend label {
    margin-left: 0 !important;
    color: var(--ui-brand) !important;
    font-size: 16px !important;
}

#copy-settings-content .copy-settings-group input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    background: var(--ui-control) !important;
}

#copy-settings-content > .copy-settings-footer {
    min-height: 45px !important;
    padding: 0 10px 10px !important;
    border: 0 !important;
}

#copy-settings-content .copy-settings-footer button,
#copy-settings-content .copy-settings-footer select {
    min-height: 35px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

#copy-settings-content .copy-settings-secondary {
    padding: 0 12px !important;
    background: var(--ui-control) !important;
    color: var(--ui-text) !important;
    font-weight: 700 !important;
}

#copy-settings-content .copy-settings-footer select {
    min-width: 280px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0 32px 0 12px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%),
        linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 17px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px) !important;
    background-size: 5px 5px !important;
    background-repeat: no-repeat !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

#copy-settings-content #btn-confirm-copy-settings.copy-settings-primary {
    padding: 0 18px !important;
    background: var(--ui-brand) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

@media (max-width: 680px) {
    #copy-settings-content > .copy-settings-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #copy-settings-content .copy-settings-footer select {
        min-width: min(210px, 100%) !important;
    }
}

.import-dialog-body {
    padding: 10px !important;
    gap: 10px !important;
    overflow: auto;
}

.import-form-card {
    padding: 20px !important;
    gap: 15px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--ui-workspace) !important;
}

.import-form-row {
    min-height: 30px;
    gap: 14px;
}

.import-form-row > label {
    flex: 1 1 0;
    color: var(--ui-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

.import-form-row > select,
.import-form-row > input[type="date"],
.import-form-row > div {
    width: 200px !important;
    flex: 0 0 200px;
}

/* The roll note is the one free-form row: it needs the full width so several
   rolls of the same film stock stay tellable apart at a glance. */
.import-dialog .import-form-row-notes {
    flex-direction: column;
    align-items: stretch;
}

.import-dialog .import-form-row-notes > label {
    flex: 0 0 auto;
}

.import-dialog .import-form-row-notes > textarea {
    width: 100% !important;
    flex: 1 1 auto;
    min-height: 54px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-family: inherit;
    font-size: 12px !important;
    line-height: 1.45;
    resize: vertical;
}

.import-dialog select,
.import-dialog input[type="date"],
.import-dialog input[type="text"] {
    min-height: 30px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.import-dialog select {
    appearance: none;
    padding: 0 30px 0 10px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%),
        linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%) !important;
    background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}

.import-dialog input[type="date"] {
    padding: 0 10px !important;
    color-scheme: light dark;
    text-align: center;
}

.import-dialog-footer {
    padding: 0 !important;
}

.import-secondary-btn,
.import-primary-btn {
    min-height: 35px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.import-secondary-btn {
    padding-inline: 20px !important;
    background: var(--ui-control) !important;
    color: var(--ui-text) !important;
}

.import-primary-btn {
    padding-inline: 20px !important;
    background: var(--ui-brand) !important;
    color: #fff !important;
}

@media (max-width: 760px) {
    #view-library > .library-toolbar,
    #view-history > div:last-child > .history-toolbar {
        width: 100% !important;
    }

    .import-form-row {
        align-items: stretch !important;
        flex-direction: column;
        gap: 6px;
    }

    .import-form-row > select,
    .import-form-row > input[type="date"],
    .import-form-row > div {
        width: 100% !important;
        flex-basis: auto;
    }
}

.native-control-proxy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.custom-select-control,
.custom-date-control {
    position: relative;
    width: 100%;
    min-width: 0;
}

.custom-select-trigger,
.custom-date-trigger {
    position: relative;
    width: 100% !important;
    min-height: 30px !important;
    padding: 0 32px 0 10px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 30px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-date-trigger {
    padding-inline: 10px !important;
    text-align: center;
}

.custom-select-trigger::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ui-muted);
    border-bottom: 2px solid var(--ui-muted);
    transform: rotate(45deg);
}

.custom-select-trigger[aria-expanded="true"]::after {
    top: 13px;
    transform: rotate(225deg);
}

.custom-select-menu,
.custom-date-panel {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    right: 0;
    width: max(100%, 220px);
    padding: 6px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.custom-select-menu {
    max-height: min(240px, 45vh);
    overflow-y: auto;
}

.custom-select-group {
    padding: 7px 9px 4px;
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.custom-select-option {
    display: block !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-align: left;
}

.custom-select-option:hover,
.custom-select-option:focus-visible,
.custom-select-option[aria-selected="true"] {
    background: var(--ui-control) !important;
    color: var(--ui-brand) !important;
}

.custom-date-panel {
    top: auto;
    bottom: calc(100% + 6px);
    width: 252px;
    padding: 10px;
}

.custom-date-header {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    margin-bottom: 8px;
}

.custom-date-header strong {
    color: var(--ui-text);
    font-size: 12px;
    text-align: center;
}

.custom-date-nav {
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ui-brand) !important;
    font-size: 22px !important;
}

.custom-date-nav:hover {
    background: var(--ui-control) !important;
}

.custom-date-weekdays,
.custom-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.custom-date-weekdays {
    margin-bottom: 4px;
    color: var(--ui-muted);
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.custom-date-day,
.custom-date-spacer {
    aspect-ratio: 1;
}

.custom-date-day {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    font-size: 10px !important;
}

.custom-date-day:hover,
.custom-date-day:focus-visible {
    background: var(--ui-control) !important;
}

.custom-date-day.is-selected {
    background: var(--ui-brand) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* Keep the dialog silhouette intact and make every surface theme-aware. */
.import-dialog {
    overflow: hidden !important;
    border-radius: 20px !important;
    background: var(--ui-surface) !important;
    clip-path: inset(0 round 20px);
}
.import-dialog-header { background: var(--ui-surface) !important; }
.import-choice-list,
.import-form-card,
#roll-metadata-content .import-form-card,
#continue-roll-content .import-form-card { background: var(--ui-workspace) !important; }
#import-choice-content button:not(.import-close-btn),
.custom-select-trigger,
.custom-date-trigger,
.custom-select-menu,
.custom-date-panel {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}
body[data-theme="dark"] .import-choice-art {
    filter: invert(1);
    opacity: .16;
}

@media (max-width: 900px) {
    .history-roll-overview:not(.hidden) {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .history-roll-facts { gap: 16px; }
}

@media (max-width: 620px) {
    .history-roll-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Final responsive geometry and import-popover containment. */
#view-library > .library-toolbar,
#view-history > div:last-child > .history-toolbar {
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

/* Calibration uses the same page-toolbar rhythm as Library and Rolls. */
#view-calibration {
    gap: var(--ui-gap);
    overflow: visible !important;
    background: transparent !important;
}

#view-calibration > .calibration-toolbar {
    width: 100% !important;
    min-height: 52px !important;
    padding: 6px clamp(12px, 1.25vw, 18px) !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: var(--ui-shadow) !important;
}

#view-calibration > .calibration-toolbar > h1 {
    margin: 0;
    color: var(--ui-brand) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

#view-calibration > .calibration-layout {
    padding: 0 !important;
    gap: var(--ui-gap) !important;
    background: transparent !important;
}

/* Documentation uses the same page-toolbar rhythm as Library, Rolls, and Calibration. */
#view-documentation {
    gap: var(--ui-gap);
    overflow: visible !important;
    background: transparent !important;
}

#view-documentation > .documentation-toolbar {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 6px clamp(12px, 1.25vw, 18px) !important;
    border: 0 !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: var(--ui-shadow) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#view-documentation > .documentation-toolbar > .documentation-toolbar-lead > h1 {
    margin: 0;
    color: var(--ui-brand) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

#view-documentation > .documentation-toolbar > .documentation-toolbar-lead > p {
    margin: 2px 0 0 !important;
    color: var(--ui-muted) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view-documentation > .documentation-layout {
    padding: 0 !important;
    gap: var(--ui-gap) !important;
    background: transparent !important;
}

#view-documentation .documentation-nav-panel,
#view-documentation .documentation-content-panel {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}

#view-documentation .documentation-search-input {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 6px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-size: 12px !important;
    padding: 0 12px !important;
}

#view-documentation .documentation-search-input:focus {
    border-color: var(--ui-brand) !important;
}

/* The manual is a reading surface: its text must stay selectable even though
   the rest of the application shell disables selection on UI copy. */
body #view-documentation .documentation-content-panel,
body #view-documentation .documentation-content-panel *,
body #view-documentation .documentation-article,
body #view-documentation .documentation-article * {
    -webkit-user-select: text;
    user-select: text;
}

/* Shared command typography across top-level work surfaces. */
:is(
    body > header .export-actions > button,
    .library-toolbar .library-toolbar-button,
    #view-history .history-toolbar button:not(#btn-history-back),
    #view-calibration .calibration-primary-button,
    #view-calibration .calibration-secondary-button,
    .calibration-profile-modal .calibration-primary-button,
    .calibration-profile-modal .calibration-secondary-button
) {
    font-family: Montserrat, "Noto Sans SC", "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Library commands share one stable control height. */
.library-toolbar-actions > :is(
    #btn-select-all,
    #btn-deselect-all,
    #btn-delete-library-images,
    #btn-calibrate-density
) {
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
}

body[data-theme] #view-develop > #develop-inspector {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

.import-dialog-body { overflow: auto !important; }

#roll-metadata-content .import-form-card,
#continue-roll-content .import-form-card {
    padding: 20px !important;
    border-radius: 10px !important;
    background: var(--ui-workspace) !important;
}

#roll-metadata-content :is(.custom-select-trigger, .custom-date-trigger),
#continue-roll-content .custom-select-trigger {
    background: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
}

.custom-select-menu {
    max-height: min(156px, 28vh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.custom-date-panel {
    width: 252px;
    max-height: 250px;
    overflow: hidden;
    border-color: var(--ui-line);
    background: var(--ui-surface) !important;
}

.custom-date-header strong,
.custom-date-day {
    color: var(--ui-text) !important;
}

.custom-date-weekdays {
    color: var(--ui-muted) !important;
}

.custom-date-nav {
    color: var(--ui-text) !important;
}

.custom-date-nav:hover,
.custom-date-day:hover,
.custom-date-day:focus-visible {
    background: var(--ui-control) !important;
}

.custom-date-day.is-selected {
    background: var(--ui-brand) !important;
    color: #fff !important;
}

@media (max-width: 1100px) {
    #view-develop {
        grid-template-columns: minmax(0, 1fr) clamp(22px, 2.4vw, 26px) clamp(280px, 30vw, 320px) !important;
    }
}

@media (max-width: 760px) {
    #view-develop {
        grid-template-columns: minmax(0, 1fr) clamp(20px, 3vw, 24px) clamp(240px, 36vw, 280px) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        height: 100% !important;
    }

    #view-develop > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #develop-module-nav {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #filmstrip-container {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
    }

    body[data-theme] #view-develop > #develop-inspector {
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        width: 100% !important;
        height: 100% !important;
    }

    #views:has(#view-develop.is-active) {
        display: grid !important;
        overflow: visible !important;
    }
}

/* ------------------------------------------------------------------ */
/* Collapsible inspector sections, Tone Curve and Detail                */
/* ------------------------------------------------------------------ */

/* The triangle sits at the right of the section title, exactly where
   Lightroom keeps it: the title stays, the controls fold away. */
#develop-inspector .control-group-body {
    display: block;
}

/* Section headers carry no fill. The legacy rule that paints the density
   readout rows ("control-group > .flex.items-center.justify-between") also
   matched these headings, which left some sections with a grey pill and others
   without. The printer, input, and print sections already reset it. */
#develop-inspector [data-collapsible-module] > h3 {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#develop-inspector .control-group.is-collapsed > .control-group-body {
    display: none !important;
}

#develop-inspector .control-group-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

#develop-inspector .control-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: var(--ui-muted) !important;
    cursor: pointer;
}

#develop-inspector .control-group-toggle:hover,
#develop-inspector .control-group-toggle:focus-visible {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-text) !important;
    outline: none;
}

#develop-inspector .control-group-toggle-icon {
    width: 14px;
    height: 14px;
    color: inherit;
    transition: transform .16s ease;
}

#develop-inspector .control-group-toggle[aria-expanded="false"] .control-group-toggle-icon {
    transform: rotate(-90deg);
}

#develop-inspector .tone-curve-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#develop-inspector .tone-curve-channels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

#develop-inspector button.tone-curve-channel {
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: var(--ui-control) !important;
    color: var(--ui-muted) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}

#develop-inspector button.tone-curve-channel.is-active {
    background: var(--ui-brand) !important;
    color: #fff !important;
}

#develop-inspector button.tone-curve-channel-red.is-active {
    background: #b8443c !important;
}

#develop-inspector button.tone-curve-channel-green.is-active {
    background: #2f855a !important;
}

#develop-inspector button.tone-curve-channel-blue.is-active {
    background: #3767ab !important;
}

#develop-inspector .tone-curve-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: var(--ui-workspace);
    cursor: crosshair;
    touch-action: none;
}

#develop-inspector .tone-curve-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#develop-inspector button.tone-curve-reset {
    flex: 0 0 auto;
    min-height: 24px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: var(--ui-control) !important;
    color: var(--ui-text) !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
}

#develop-inspector button.tone-curve-reset:hover {
    background: var(--ui-surface-soft) !important;
}

#develop-inspector .detail-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#develop-inspector .detail-group-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ui-muted);
}