:root {
    --bg: #191a1d;
    --panel: #151619;
    --surface: #202126;
    --surface-hover: #27292f;
    --surface-raised: #2b2d33;
    --border: #34363c;
    --fg: #f2f2f4;
    --muted: #9699a2;
    --quiet: #686b74;
    --accent: #ff0053;
    --accent-soft: #78052c;
    --sidebar-width: 228px;
    --container-gutter: 12px;
    --radius: 3px;
    --motion-fast: 120ms;
    --motion-normal: 170ms;
    --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

* {
    box-sizing: border-box;
}

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

body {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'sidebar main' 'sidebar footer';
    background: var(--bg);
    color: var(--fg);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

button,
input,
select {
    font: inherit;
}

button,
a,
select {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 75%, white);
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-container {
    width: 100%;
    padding-inline: var(--container-gutter);
}

#sidebar {
    grid-area: sidebar;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding-top: 14px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 58px;
    padding: 9px 12px;
    border-bottom: 1px solid #26272c;
    color: var(--quiet);
    text-decoration: none;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.15em;
}

.sidebar-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.sidebar-primary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2b2c31;
}

.sidebar-dynamic-sections {
    padding-top: 5px;
}

.sidebar-item,
.sidebar-menu-title {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 20px;
    padding: 5px 10px 5px 14px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: #a6a9b1;
    text-align: left;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.25;
    cursor: pointer;
}

.sidebar-item:hover,
.sidebar-menu-title:hover,
.sidebar-item.active {
    background: #24252a;
    color: #fff;
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    left: 0;
    width: 3px;
    background: var(--accent);
}

.sidebar-section {
    margin-top: 13px;
}

.sidebar-section-title {
    margin: 0 4px 5px;
    padding: 0 8px 6px;
    border-bottom: 1px solid #292a30;
    color: #b16a82;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.sidebar-items,
.sidebar-menu-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-menu-title {
    color: #bc7a90;
    font-weight: 650;
}

.sidebar-menu-items {
    padding-left: 10px;
}

.sidebar-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.sidebar-item-row .sidebar-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-rescan {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5d6069;
    cursor: pointer;
}

.sidebar-rescan:hover {
    color: var(--fg);
}

.sidebar-runtime {
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #26272c;
    color: #5f626b;
    font-size: 10px;
}

.sidebar-loading,
.sidebar-error {
    padding: 14px;
    color: var(--muted);
}

main {
    grid-area: main;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

#topbars {
    background: #1d1e22;
    border-bottom: 1px solid var(--border);
}

.topbar-heading-row,
.topbar-controls-row,
.models-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topbar-heading-row {
    min-height: 66px;
    padding-block: 12px 9px;
}

.topbar-controls-row,
.models-toolbar {
    min-height: 48px;
    padding-block: 7px 11px;
}

.topbar-heading h1 {
    margin: 0;
    color: #f5f5f6;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.15;
}

.topbar-heading.models-heading h1 {
    font-size: 22px;
}

.topbar-heading p {
    margin: 5px 0 0;
    color: #858891;
    font-size: 11px;
}

.topbar-heading-actions,
.toolbar-actions,
.sort-control,
.models-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-count {
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

input,
select {
    min-height: 32px;
    border: 1px solid #3b3d44;
    border-radius: var(--radius);
    background: #24252a;
    color: var(--fg);
    padding: 6px 10px;
}

input::placeholder {
    color: #71747d;
}

#search,
#studios-search {
    width: min(360px, 36vw);
}

#models-search {
    width: min(310px, 30vw);
}

#models-studio-filter {
    width: min(250px, 24vw);
}

.button-secondary,
.button-primary,
.icon-button {
    min-height: 32px;
    border: 1px solid #3b3d44;
    border-radius: var(--radius);
    background: #292a30;
    color: #c8cad1;
    padding: 5px 11px;
    cursor: pointer;
}

.button-secondary,
.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 11px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.button-primary,
.button-secondary.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.button-secondary:hover,
.icon-button:hover {
    border-color: #51545d;
    background: #34363d;
    color: #fff;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0;
}

.icon-button.compact {
    width: 25px;
    min-height: 25px;
}

.icon-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#video-sort-direction svg {
    transition: transform 0.15s ease;
}

#video-sort-direction.descending svg {
    transform: scaleY(-1);
}

#content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: auto;
}

#video-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding-block: 8px 20px;
}

.card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.card-static {
    cursor: default;
}

.card:hover {
    background: var(--surface-hover);
}

.card-cover-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111216;
}

.card-cover,
.card-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-duration {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    border-radius: 2px;
    background: rgb(15 16 19 / 75%);
    color: #fff;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 650;
}

.card-infos {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px 3px;
}

.card-title {
    min-width: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
}

.card-right-infos {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-height {
    border-radius: 2px;
    background: #303139;
    color: #a9acb4;
    padding: 2px 4px;
    font-size: 9px;
    text-transform: lowercase;
}

.card-favorite {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.card-favorite img {
    width: 16px;
    height: 16px;
    opacity: 0.55;
}

.card-favorite.active img,
.card-favorite:hover img {
    opacity: 1;
}

.card-models {
    padding: 2px 10px 5px;
    color: #b2b4bb;
    font-size: 11px;
    line-height: 1.35;
}

.card-metadata {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 9px;
    color: #858891;
    font-size: 9px;
    text-transform: uppercase;
}

.card-size,
.card-release {
    color: #a5a8af;
    white-space: nowrap;
}

#models-manager {
    padding-block: 8px 20px;
}

#models-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
}

.model-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.model-card:hover {
    background: var(--surface-hover);
}

.model-portrait {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: contain;
    background: #111216;
    border-bottom: 1px solid var(--border);
}

.model-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 7px 7px;
}

.model-name {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.model-stats {
    color: #777a83;
    font-size: 10px;
}

.model-aliases {
    color: #b3b5bc;
    font-size: 13px;
    line-height: 1.3;
}

.model-aliases.empty,
.model-alias-empty {
    color: #6e717a;
    font-style: italic;
}

.models-studio-filter,
.models-add-control {
    position: relative;
}

.models-filter-list,
.models-add-popover,
.model-merge-box {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #41434a;
    border-radius: var(--radius);
    background: #202126;
    box-shadow: 0 12px 30px rgb(0 0 0 / 35%);
}

.models-filter-option,
.merge-item {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-bottom: 1px solid #2e3036;
    background: transparent;
    color: #c8cad0;
    text-align: left;
    cursor: pointer;
}

.models-filter-option:hover,
.models-filter-option.keyboard-active,
.models-filter-option.active,
.merge-item:hover {
    background: #31333a;
    color: #fff;
}

.models-add-popover {
    right: 0;
    width: 260px;
    padding: 12px;
}

.models-add-popover label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
}

.models-add-popover input {
    width: 100%;
}

.models-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 9px;
}

.models-add-message,
.model-alias-message {
    min-height: 16px;
    margin-top: 6px;
    color: #ff7c9f;
    font-size: 11px;
}

#model-detail {
    padding-block: 10px 6px;
}

.model-header-layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.model-header-portrait {
    width: 172px;
    aspect-ratio: 2 / 3;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #111216;
}

.model-header-right {
    flex: 1;
    min-width: 0;
}

.model-header-name {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 650;
}

.model-header-meta {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.model-header-aliases {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.model-alias-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

#model-aliases {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.model-alias-chip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding-left: 8px;
    border: 1px solid #5b2240;
    border-radius: var(--radius);
    background: #351622;
    color: #f0d7e0;
    font-size: 13px;
}

.model-alias-remove {
    width: 24px;
    height: 23px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a77485;
    cursor: pointer;
}

.model-alias-remove::before {
    content: '×';
    font-size: 16px;
}

.model-add-alias {
    display: flex;
    gap: 7px;
    margin-top: 8px;
}

.model-merge {
    position: relative;
    margin-top: 9px;
}

.model-merge-box {
    position: relative;
    top: auto;
    width: min(330px, 100%);
    margin-top: 5px;
}

.model-merge-box input {
    width: 100%;
    border-width: 0 0 1px;
}

.merge-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 67%);
}

.merge-confirm-box {
    width: min(420px, calc(100vw - 40px));
    padding: 20px;
    border: 1px solid #484a52;
    border-radius: var(--radius);
    background: #1d1e22;
}

.merge-confirm-text {
    margin-bottom: 24px;
    color: #e4e4e7;
}

.merge-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#studios-manager {
    padding-block: 10px 20px;
}

.studios-directory {
    column-count: 3;
    column-gap: 34px;
}

.studios-letter-group {
    break-inside: avoid;
    margin-bottom: 18px;
}

.studios-letter {
    margin: 0 0 4px;
    padding-bottom: 5px;
    border-bottom: 1px solid #6e1234;
    color: #d6d7da;
    font-size: 13px;
}

.studio-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    border-bottom: 1px solid #2d2e33;
}

.studio-open {
    overflow: hidden;
    padding: 7px 4px;
    border: 0;
    background: transparent;
    color: #d4d5d9;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.studio-row:hover {
    background: var(--surface-hover);
}

.studio-copy {
    border-color: transparent;
    background: transparent;
    color: #737680;
}

.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--muted);
    text-align: center;
}

.empty-state strong {
    color: #d2d3d7;
    font-size: 14px;
}

.empty-state span {
    margin-top: 6px;
    font-size: 11px;
}

.empty-state.error strong {
    color: #ff88a8;
}

.load-sentinel,
.models-load-sentinel {
    height: 2px;
}

.skeleton-cover,
.skeleton-portrait,
.skeleton-line,
.model-detail-loading,
.studios-loading {
    background: linear-gradient(90deg, #23242a 20%, #2c2e34 40%, #23242a 60%);
    background-size: 300% 100%;
    animation: skeleton 1.25s ease-in-out infinite;
}

.skeleton-cover {
    aspect-ratio: 16 / 9;
}

.skeleton-portrait {
    aspect-ratio: 2 / 3;
}

.skeleton-line {
    width: 65%;
    height: 9px;
    margin: 9px 10px;
    border-radius: 2px;
}

.skeleton-line.wide {
    width: 80%;
}

.skeleton-line.short {
    width: 45%;
}

.model-detail-loading,
.studios-loading {
    padding: 22px;
    color: var(--muted);
    background-clip: text;
}

@keyframes skeleton {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

#debug-panel {
    grid-area: footer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 34px;
    padding: 7px 14px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 11px;
}

body[data-runtime='web'] #debug-panel {
    display: none;
}

.ok { color: #56b979; }
.fail { color: #ff6f96; }

#toast-container {
    position: fixed;
    right: 22px;
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 7px;
    pointer-events: none;
}

.toast {
    max-width: min(360px, calc(100vw - 44px));
    padding: 7px 12px;
    border: 1px solid #484a52;
    border-radius: var(--radius);
    background: #292a30;
    color: #e1e2e5;
    box-shadow: 0 8px 22px rgb(0 0 0 / 30%);
    opacity: 0;
    transform: translateY(6px);
    transition: 0.18s ease;
}

.toast.visible {
    opacity: 1;
    transform: translateY(0);
}

#scan-log,
#scan-log *,
#scan-overlay-stats,
.scan-overlay-progress * {
    font-family: 'Fira Code', monospace;
}

.scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgb(0 0 0 / 72%);
}

.scan-overlay.hidden {
    display: none;
}

.scan-overlay-inner {
    display: flex;
    flex-direction: column;
    width: min(1400px, calc(100vw - var(--sidebar-width) - 80px));
    height: 80vh;
    margin-left: var(--sidebar-width);
    padding: 14px 16px;
    border: 1px solid #3b3d44;
    border-radius: var(--radius);
    background: #101114;
    color: #ddd;
}

.scan-overlay-header,
.scan-overlay-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#scan-overlay-cancel,
#scan-overlay-close {
    border: 1px solid #494b53;
    border-radius: var(--radius);
    background: #292a30;
    color: #ddd;
    padding: 5px 10px;
}

.scan-overlay-progress {
    margin: 11px 0 8px;
}

#scan-progress-bar {
    height: 5px;
    overflow: hidden;
    background: #24252a;
}

#scan-progress-fill {
    width: 0;
    height: 100%;
    background: var(--accent);
}

#scan-progress-text,
.scan-overlay-stats {
    margin-top: 6px;
    color: #aaa;
    font-size: 11px;
}

#scan-log {
    flex: 1;
    min-height: 0;
    margin-top: 10px;
    overflow-y: auto;
    border: 1px solid #292a30;
    background: #0b0c0e;
    padding: 9px;
    font-size: 11px;
    line-height: 1.45;
}

.scan-log-line {
    overflow: hidden;
    padding: 2px 3px;
    border-bottom: 1px solid #24252a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-idx { color: #777; margin-right: 6px; }
.log-status-info { color: #82aaff; }
.log-status-updated { color: #e2d56b; }
.log-status-added { color: #64c77a; }
.log-status-skipped { color: #999; }
.log-status-error { color: #ff6f6f; }
.log-studio { color: #ccc; margin-inline: 6px; }
.log-arrow { color: #666; margin-right: 6px; }
.log-title { color: #eee; margin-right: 6px; }
.log-file { color: #555; }
.scan-stat-label-em,
.scan-stat-value-em { color: var(--accent); }

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #18191c;
}

::-webkit-scrollbar-thumb {
    background: #3a3c43;
}

#content::-webkit-scrollbar-thumb {
    background: #7b1b3d;
}

/* Compact library views: preserve the Models hierarchy while matching the agreed dense tablet layout. */
#topbars {
    position: relative;
}

.topbar:not(#topbar-models) .topbar-heading-row {
    position: absolute;
    top: 7px;
    right: var(--container-gutter);
    z-index: 4;
    width: auto;
    min-height: 32px;
    padding: 0;
}

.topbar:not(#topbar-models) .topbar-heading {
    display: none;
}

.topbar:not(#topbar-models) .topbar-controls-row {
    min-height: 48px;
    padding-block: 7px;
    padding-right: calc(var(--container-gutter) + 40px);
}

#topbar-models .topbar-heading-row {
    min-height: 56px;
    padding-block: 9px 6px;
}

#topbar-models .models-toolbar {
    min-height: 46px;
    padding-block: 6px 8px;
}

.card,
.model-card {
    border-color: #2d2f34;
}

.card-infos {
    padding: 7px 8px 2px;
}

.card-models {
    padding: 1px 8px 4px;
}

.card-metadata {
    padding: 4px 8px 7px;
}

.model-header-layout + #video-list {
    padding-top: 8px;
}

@media (max-width: 1100px) {
    :root {
        --sidebar-width: 210px;
        --container-gutter: 10px;
    }

    #video-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #models-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .studios-directory {
        column-count: 2;
    }
}

/* 0.5.2 compact single-line headers and tablet density */
:root {
    --topbar-height: 42px;
    --radius: 2px;
}

.sidebar-brand {
    min-height: var(--topbar-height);
    height: var(--topbar-height);
    padding-block: 6px;
}

.sidebar-brand img {
    width: 38px;
    height: 38px;
}

.topbar-single-row {
    display: flex;
    align-items: center;
    min-height: var(--topbar-height);
    height: var(--topbar-height);
    gap: 10px;
    padding-block: 7px;
}

.topbar-single-row h1 {
    flex: 0 0 auto;
    margin: 0;
    color: #f5f5f6;
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
}

.topbar-single-row .result-count {
    flex: 0 0 auto;
    margin-right: 10px;
}

.topbar-single-row .toolbar-actions,
.models-toolbar-inline {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.models-toolbar-inline {
    min-width: 0;
}

#models-search { width: min(285px, 23vw); }
#models-studio-filter { width: min(230px, 19vw); }
#search, #studios-search { width: min(340px, 30vw); }

input,
select,
.button-secondary,
.button-primary,
.icon-button,
.models-filter-list,
.models-add-popover,
.model-merge-box {
    border-radius: 2px;
}

input:focus-visible,
select:focus-visible {
    outline: none;
    border-color: #8a5366;
    box-shadow: 0 0 0 1px rgb(255 0 83 / 12%);
}

select {
    appearance: none;
    min-width: 92px;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23999ca5' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}

.sidebar-dynamic-sections {
    padding-top: 2px;
}

.sidebar-section {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #34363c;
}

.sidebar-section + .sidebar-section {
    margin-top: 22px;
}

.sidebar-section-title {
    margin: 0 4px 3px;
    padding: 0 8px 6px;
    border-bottom: 0;
    color: #ababab;
}

.sidebar-items,
.sidebar-menu-items {
    gap: 0;
}

.sidebar-item,
.sidebar-menu-title {
    padding-block: 3px;
}

.sidebar-menu-title {
    color: #ababab;
}

#video-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#models-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.model-body {
    gap: 3px;
}

.model-aliases,
.model-alias-label,
.model-alias-chip {
    font-size: 12px;
}

@media (max-width: 1100px) {
    #video-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #models-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 0.5.3 visual refinement */
.topbar-single-row h1 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
}

.topbar-single-row .result-count {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin: 0 10px 0 0;
    line-height: 1.2;
}

input[type='search']::-webkit-search-cancel-button {
    appearance: none;
    width: 15px;
    height: 15px;
    margin-left: 7px;
    opacity: 0.62;
    cursor: pointer;
    background: center / 11px 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7m0-7-7 7' fill='none' stroke='%23b4b6bd' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type='search']::-webkit-search-cancel-button:hover { opacity: 1; }

.video-sort-picker { position: relative; }
.sort-picker-button {
    position: relative;
    min-width: 96px;
    min-height: 32px;
    padding: 5px 28px 5px 10px;
    border: 1px solid #3b3d44;
    border-radius: 2px;
    background: #292a30;
    color: #c8cad1;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sort-picker-button::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid #999ca5;
    border-bottom: 1px solid #999ca5;
    transform: translateY(-70%) rotate(45deg);
}
.sort-picker-button[aria-expanded='true'] { border-color: #555861; }
.sort-picker-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    right: 0;
    width: 128px;
    overflow: hidden;
    border: 1px solid #41434a;
    border-radius: 2px;
    background: #202126;
    box-shadow: 0 10px 24px rgb(0 0 0 / 32%);
}
.sort-picker-menu button {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid #2e3036;
    background: transparent;
    color: #c8cad0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sort-picker-menu button:last-child { border-bottom: 0; }
.sort-picker-menu button:hover,
.sort-picker-menu button.active { background: #31333a; color: #fff; }
.sort-picker-menu button.active { box-shadow: inset 2px 0 0 var(--accent); }

.card {
    display: flex;
    flex-direction: column;
}
.card-infos { align-items: flex-start; }
.card-title { flex: 1 1 auto; min-width: 0; }
.card-right-infos { flex: 0 0 auto; align-self: flex-start; }
.card-height,
.card-studio {
    border: 1px solid #3b3d44;
    border-radius: 2px;
    color: #b9bbc2;
}
.card-height {
    background: #292a30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 20px;
    padding: 2px 6px;
    font-size: 9px;
    line-height: 1;
    text-transform: lowercase;
}
.card-models { padding-bottom: 6px; }
.card-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 5px;
    text-transform: none;
}
.card-studio {
    font-variant: small-caps;
    background-color: #191919;
    max-width: 58%;
    padding: 2px 6px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.card-file-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #a5a8af;
    white-space: nowrap;
}
.card-meta-separator { color: #666971; }

.model-header-aliases {
    display: block;
    margin-top: 12px;
}
.model-alias-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}
#model-aliases { gap: 6px; }
.model-header-meta { margin-top: 4px; }
.model-merge { margin-top: 12px; }
#merge-toggle {
    min-height: 28px;
    padding: 3px 9px;
    font-size: 11px;
}
.model-merge-box { width: min(260px, 100%); }
.model-merge-box input { width: 100%; min-height: 30px; }
.model-add-alias input { width: min(260px, 100%); }


/* 0.6.0 application shell */
:root { --app-header-height: var(--topbar-height); }
body {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--app-header-height) auto minmax(0, 1fr) auto;
    grid-template-areas: 'appheader appheader' 'viewheader viewheader' 'sidebar main' 'sidebar footer';
}
.app-header {
    grid-area: appheader;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: #151619;
}
.app-brand { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto; }
.app-brand img { width:34px; height:34px; object-fit:contain; }
.app-nav { display:flex; align-items:stretch; align-self:stretch; gap:2px; }
.app-nav a { text-transform:uppercase; position:relative; display:flex; align-items:center; padding:0 13px; color:#a9abb2; text-decoration:none; font-size:12px; font-weight:500; }
.app-nav a:hover, .app-nav a.active { color:#f1f1f3; background:#1d1e22; }
.app-nav a.active::after { content:''; position:absolute; left:12px; right:12px; bottom:0; height:2px; background:var(--accent); }
.app-header-search { width:min(420px, 34vw); margin-left:auto; }
.app-header-search .search-field, #global-search { width:100%; }
#app-scan-btn { flex:0 0 auto; }
.content-mode-toggle { flex:0 0 auto; min-height:26px; padding:3px 8px; border:1px solid #3a3c43; border-radius:2px; background:#1c1d21; color:#9da0a8; font:600 9px Montserrat,sans-serif; letter-spacing:.06em; cursor:pointer; }
.content-mode-toggle[aria-pressed='true'] { border-color:#713047; background:#302027; color:#efb9cd; }
#sidebar { grid-template-rows:minmax(0,1fr) auto; }
.sidebar-dynamic-sections { padding-top:0; }
main { display:contents; }
#topbars { grid-area:viewheader; min-width:0; }
#content { grid-area:main; min-width:0; min-height:0; }
body:not([data-sidebar-context='none']) #topbars .app-container { padding-left:calc(var(--sidebar-width) + var(--container-gutter)); }

.search-field { position:relative; display:inline-flex; min-width:0; }
.search-field > input { width:100%; padding-right:28px !important; }
.search-clear { position:absolute; right:6px; top:50%; width:18px; height:18px; padding:3px; border:0; border-radius:2px; background:transparent; color:#777a83; opacity:0; pointer-events:none; transform:translateY(-50%); cursor:pointer; }
.search-clear.visible { opacity:.72; pointer-events:auto; }
.search-clear:hover { opacity:1; background:#303138; color:#c7c9cf; }
.search-clear svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; }
input[type='search']::-webkit-search-cancel-button { display:none; }
.models-studio-filter > .search-field { width:100%; }
#models-search + .search-clear {}
.toolbar-actions > .search-field { width:min(340px,30vw); }
.models-toolbar-inline > .search-field { width:min(285px,23vw); }
.models-toolbar-inline > .models-studio-filter { width:min(230px,19vw); }
.models-toolbar-inline > .models-studio-filter #models-studio-filter { width:100%; }

.model-alias-label { text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:#ababab; }
#model-aliases { display:flex; flex-wrap:wrap; align-items:center; }
.model-alias-text { cursor:pointer; }
.model-alias-text:hover { color:#fff; }
.model-merge-box { width:260px !important; max-width:calc(100vw - 40px); }
.model-merge-box input { width:260px !important; max-width:100%; }
.studios-add-control { position:relative; }
.studios-add-control .models-add-popover { right:0; left:auto; width:260px; }
.studios-add-control .models-add-popover input { width:100%; }
.optional { color:var(--quiet); font-weight:400; }

/* 0.6.2 UI alignment and model actions */
.topbar-single-row {
    padding-block: 4px;
}
.topbar-single-row .result-count {
    align-self: baseline;
    position: relative;
    top: 1px;
}
.sidebar-dynamic-sections {
    padding-top: 12px;
}
.model-header-aliases {
    margin-top: 16px;
}
.model-merge {
    margin-top: 8px;
    width: 260px;
    max-width: 100%;
    align-self: flex-start;
}
.model-merge-box {
    display: block;
    width: 260px !important;
    max-width: 100% !important;
}
.model-merge-box.hidden {
    display: none;
}
.model-merge-box input {
    display: block;
    width: 260px !important;
    max-width: 100% !important;
}
.model-merge-toggle {
    font-size: 15px;
    line-height: 1;
}

/* 0.6.3 compact header alignment */
.topbar-single-row {
    padding-block: 2px;
}
.topbar-single-row .result-count {
    display: inline-block;
    align-self: baseline;
    min-height: 0;
    position: static;
    top: auto;
    line-height: 1.2;
}
.sidebar-dynamic-sections {
    padding-top: 0;
}
#merge-toggle {
    width: 25px;
    min-height: 25px;
    padding: 0;
    font-size: inherit;
}
.model-merge-toggle svg {
    width: 14px;
    height: 14px;
}

/* Manage and Reconcile */
.topbar-title-group { display:flex; align-items:baseline; gap:9px; min-width:0; }
.topbar-title-group > h1,
.topbar-title-group > .result-count { align-self:baseline; }

#reconcile-manager { min-height:100%; padding-block:12px 24px; }
.reconcile-filters { display:flex; align-items:center; gap:2px; padding:2px; border:1px solid #34363c; border-radius:2px; background:#191a1d; }
.reconcile-filter { min-height:26px; padding:3px 9px; border:0; border-radius:2px; background:transparent; color:#858891; font-size:10px; cursor:pointer; }
.reconcile-filter:hover,
.reconcile-filter.active { background:#303138; color:#fff; }
#reconcile-run { min-height:30px; padding:5px 11px; font-size:10px; }
.reconcile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:10px; }
.reconcile-card { display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden; border:1px solid var(--border); border-radius:2px; background:var(--surface); scroll-margin-top:12px; }
.reconcile-reasons { display:flex; align-items:center; gap:6px; min-height:32px; padding:5px 10px; border-bottom:1px solid #2d2f35; }
.reconcile-reason { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border-radius:2px; font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.reconcile-reason.name-difference { background:#3b3323; color:#f2c56d; }
.reconcile-reason.duplicate { background:#3f2035; color:#fa69a5; }
.reconcile-reference { padding:12px 14px 14px; background:#1c1d21; }
.reconcile-matches { flex:1 0 auto; padding:12px 14px; border-top:1px solid #303239; }
.reconcile-section-label { display:block; margin-bottom:9px; color:#aeb1bb; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.reconcile-entity { display:grid; grid-template-columns:82px minmax(0,1fr); gap:11px; min-width:0; text-align:left; }
.reconcile-portrait,
.reconcile-portrait-frame { display:block; width:82px; aspect-ratio:2 / 3; border:1px solid #24252a; border-radius:2px; background:#1b1c20; }
.reconcile-portrait-frame { position:relative; overflow:hidden; }
.reconcile-portrait-frame .reconcile-portrait { width:100%; height:100%; border:0; background:transparent; object-fit:contain; }
.reconcile-portrait-frame.failed .reconcile-portrait { display:none; }
.reconcile-entity-body { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.reconcile-name { max-width:100%; overflow-wrap:anywhere; color:#f5f5f7; font-size:14px; line-height:1.25; }
.reconcile-list-label { margin-top:12px; color:#b16a82; font-size:10px; font-weight:600; text-transform:uppercase; }
.reconcile-aliases { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.reconcile-alias { padding:3px 7px; border-radius:2px; background:#30323a; color:#d5d6db; font-size:9px; line-height:1.35; }
.reconcile-alias.matched { box-shadow:inset 0 0 0 1px #7e3455; color:#fff; }
.reconcile-empty { color:#737680; font-size:10px; }
.reconcile-entity .button-secondary { width:auto; margin-top:11px; color:#eeeef1; }
.reconcile-model-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.reconcile-model-grid .reconcile-entity + .reconcile-entity { padding-left:12px; border-left:1px solid #303239; }
.reconcile-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:39px; margin:0 14px; padding:5px 0; border-top:1px solid #303239; }
.reconcile-actions > div { display:flex; flex-wrap:wrap; gap:6px; }
.reconcile-actions .reconcile-merge { border:1px solid #753047; background:#3a222b; color:#f0c3d3; }
.reconcile-actions .reconcile-merge:hover { border-color:#a64067; background:#482631; }
.reconcile-merge-dialog { display:flex; flex-direction:column; gap:10px; width:min(440px,calc(100vw - 30px)); max-height:calc(100vh - 30px); overflow:hidden; }
.reconcile-confirm-dialog { display:flex; flex-direction:column; gap:12px; width:min(390px,calc(100vw - 30px)); }
.reconcile-confirm-body { display:flex; flex-direction:column; gap:5px; color:#aeb1bb; font-size:11px; line-height:1.45; }
.reconcile-confirm-body > strong { color:#f5f5f7; font-size:13px; overflow-wrap:anywhere; }
.reconcile-confirm-models { display:flex; flex-wrap:wrap; gap:5px; }
.reconcile-confirm-models span { padding:3px 7px; border-radius:2px; background:#30323a; color:#d5d6db; font-size:9px; }
.reconcile-survivors { display:grid; gap:6px; min-height:0; max-height:55vh; overflow-x:hidden; overflow-y:auto; }
.reconcile-survivor { display:block; width:100%; min-width:0; padding:8px; overflow:hidden; border:1px solid #373941; border-radius:2px; background:#202126; color:inherit; text-align:left; cursor:pointer; }
.reconcile-survivor:hover { border-color:#60636d; background:#25272c; }
.reconcile-survivor.selected { border-color:#a73764; box-shadow:inset 3px 0 0 var(--accent); background:#2b2228; }
.reconcile-survivor.selected::after { content:'Selected'; display:block; margin-top:6px; color:#f39bbb; font-size:8px; font-weight:700; letter-spacing:.06em; text-align:right; text-transform:uppercase; }
.reconcile-survivor .reconcile-entity { width:100%; grid-template-columns:54px minmax(0,1fr); }
.reconcile-survivor .reconcile-portrait,
.reconcile-survivor .reconcile-portrait-frame { width:54px; height:81px; aspect-ratio:2 / 3; flex:none; }
.reconcile-survivor .reconcile-list-label { margin-top:7px; }
.reconcile-welcome,
.reconcile-progress { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; color:#858891; text-align:center; }
.reconcile-welcome strong,
.reconcile-progress strong { margin-bottom:7px; color:#eeeef1; font-size:15px; }
.reconcile-welcome > span,
.reconcile-progress > span { max-width:520px; font-size:11px; line-height:1.5; }
.reconcile-welcome-run { margin-top:16px; }
.reconcile-progress-track { width:min(420px,75%); height:3px; margin-top:18px; overflow:hidden; border-radius:1px; background:#303138; }
.reconcile-progress-track > span { display:block; height:100%; background:var(--accent); transition:width .2s ease; }

@media (max-width:1050px) {
    .reconcile-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
    .reconcile-model-grid { grid-template-columns:1fr; }
    .reconcile-model-grid .reconcile-entity + .reconcile-entity { padding:10px 0 0; border-top:1px solid #303239; border-left:0; }
    .reconcile-actions { align-items:flex-start; }
    .reconcile-actions > div { flex-direction:column; }
}

/* 0.10.0 contextual shell, sources and shared motion */
body { transition:grid-template-columns var(--motion-normal) var(--motion-ease); }
body[data-sidebar-context='none'] { grid-template-columns:0 minmax(0,1fr); }
#sidebar { grid-template-rows:minmax(0,1fr) auto; overflow:hidden; opacity:1; transition:opacity var(--motion-fast) var(--motion-ease),visibility 0s linear 0s; }
body[data-sidebar-context='none'] #sidebar { visibility:hidden; opacity:0; pointer-events:none; transition:opacity var(--motion-fast) var(--motion-ease),visibility 0s linear var(--motion-fast); }
.context-sidebar { min-height:0; overflow-y:auto; padding:0 8px 18px; }
.context-sidebar .sidebar-section:first-child { margin-top:0; padding-top:0; border-top:0; }
#video-list { width:100%; grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr)); }
#models-grid { grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); }
.video-card,.model-card,.studio-card,.sidebar-item,.button-primary,.button-secondary,.icon-button,input,.reconcile-card { transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease); }
#sources-manager { padding-block:12px 24px; }
.source-group { padding:10px 0 14px; border-bottom:1px solid var(--border); }
.source-group>.source-field { max-width:320px; }
.source-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:8px; margin-top:8px; }
.source-card { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.source-card-heading { color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.source-field { display:grid; gap:4px; color:var(--muted); font-size:10px; }
.source-field input { width:100%; min-height:30px; }
.source-paths { display:grid; gap:7px; }
.source-path-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:6px; }
.source-card-actions,.source-group-actions { display:flex; flex-wrap:wrap; gap:5px; }
.source-card-actions { margin-top:auto; padding-top:3px; border-top:1px solid #303137; }
.source-menu { grid-column:1/-1; padding:8px; border-left:2px solid #303137; }
.source-menu>.source-field { max-width:320px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }

/* 0.11.0 privacy presentation. The mode is set synchronously in <head>. */
/* Shared compact view controls and in-page navigation. */
.sidebar-spacer { height:12px; min-height:12px; flex:0 0 12px; pointer-events:none; }
.videos-toolbar { flex-wrap:wrap; min-width:0; }
.video-control-group { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.control-group-label { font-size:10px; letter-spacing:0.1em; font-weight:600; color:var(--text-muted,#92949e); }

.video-control-group .search-field { min-width:120px; flex:1; }
.video-refresh { border-left:1px solid #363840; margin-left:4px; }
.card-model-link { color:inherit; text-decoration:none; }
.card-model-link:hover, .card-model-link:focus-visible { color:var(--accent,#b95072); text-decoration:underline; }
.studios-alphabet { display:flex; gap:3px; overflow-x:auto; padding:0 0 12px; }
.studios-alphabet button { flex:0 0 24px; height:25px; border:0; border-radius:2px; background:transparent; color:#b5b7c0; font:inherit; font-size:11px; cursor:pointer; }
.studios-alphabet button:disabled { opacity:.3; cursor:default; }
.studios-alphabet button:not(:disabled):hover, .studios-alphabet button:focus-visible { background:#30323a; color:#e9b0c2; }
.studios-letter-group { scroll-margin-top:12px; }
@media(max-width:1100px) { #topbar-videos .topbar-single-row { flex-wrap:wrap; } .videos-toolbar { width:100%; justify-content:flex-start; } }
@media(max-width:600px) { .video-control-group { width:100%; }  .video-filter-group .search-field { flex-basis:100%; } .video-filter-group input { width:100%; } .control-group-label { flex-basis:100%; } }

/* View-state restoration owns scroll while paginated content is replaced. */
#content { overflow-anchor:none; }

#topbar-videos .topbar-single-row { height:auto; min-height:var(--topbar-height); }

@media(max-width:600px) {
    :root { --sidebar-width:120px; --app-header-height:90px; }
    .app-header { display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:44px 40px; gap:0 8px; padding:0 8px; }
    .app-brand { grid-column:1; grid-row:1; }
    .app-header-search { grid-column:2; grid-row:1; width:100%; margin:0; }
    .content-mode-toggle { grid-column:3; grid-row:1; }
    .app-nav { grid-column:1 / -1; grid-row:2; overflow-x:auto; min-width:0; }
    .app-nav a { flex:0 0 auto; padding:0 10px; font-size:11px; }
    #topbar-videos .topbar-single-row { gap:6px; }
    .videos-toolbar { gap:20px; }
    
    .studios-directory { column-count:1; }
}
#topbar-videos #search { width:100%; }
@media(max-width:600px) {
    
}

.card-cover,.card-preview,.model-portrait,.model-header-portrait,.reconcile-portrait { transition:filter var(--motion-fast) var(--motion-ease); }
html[data-content-mode='sfw'] .card-cover,
html[data-content-mode='sfw'] .card-preview,
html[data-content-mode='sfw'] .model-portrait,
html[data-content-mode='sfw'] .model-header-portrait,
html[data-content-mode='sfw'] .sfw-sensitive,
html[data-content-mode='sfw'] .reconcile-portrait { filter:blur(22px); }
.card-cover-wrapper { overflow:hidden; }
.card-cover.image-unavailable { visibility:hidden; }


/* Shared established controls, with responsive grouping instead of native selects. */
.sort-direction svg { transition: transform 0.15s ease; }
.sort-direction.descending svg { transform: scaleY(-1); }
.icon-button:disabled { opacity: .4; cursor: default; }
.video-filter-group .models-studio-filter { width: 180px; min-width: 120px; }
.video-filter-group .models-studio-filter input { width: 100%; }
.video-sort-group .icon-button { flex: 0 0 32px; }
@media (max-width: 600px) {
    .video-filter-group > .search-field, .video-filter-group > .models-studio-filter { width:100%; flex-basis:100%; }
    .video-sort-group .video-sort-picker { flex: 1 1 calc(100% - 40px); }
    .video-sort-group .sort-picker-button { width: 100%; }
}

/* Manual StashDB image export dialog */
.stashdb-images-dialog { width: min(680px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; }
.stashdb-search { display: flex; gap: 8px; }
.stashdb-search input { flex: 1; min-width: 0; }
.stashdb-results { display: grid; gap: 8px; max-height: 36vh; overflow-y: auto; margin-top: 12px; }
.stashdb-result { display: flex; justify-content: flex-start; gap: 12px; text-align: left; width: 100%; white-space: pre-line; }
.stashdb-result span { min-width: 0; overflow-wrap: anywhere; }
.stashdb-result img { width: 48px; height: 64px; object-fit: contain; flex-shrink: 0; }
.stashdb-result[aria-pressed="true"] { border-color: var(--accent); }
.stashdb-confirmation, .stashdb-status { white-space: pre-line; overflow-wrap: anywhere; }