/* Quiet, opaque surfaces. Loaded after the legacy glass layers so application
   layout, visibility and state handling can stay independent of the material. */
html.liquid-glass {
    --lg-text: #182230;
    --lg-muted: #4b5a70;
    --lg-placeholder: #64748b;
    --lg-accent: #48658d;
    --ui-focus-border: #7184a0;
    --ui-focus-halo: rgba(72, 101, 141, .10);
    --ui-focus-width: 1px;
    --ui-focus-offset: -1px;
    --lg-canvas: #f1f6fc;
    --lg-wallpaper: none;
    --lg-surface: #ffffff;
    --lg-elevated: #ffffff;
    --lg-input: #f9fafb;
    --lg-soft: #f8f9fa;
    --lg-hover: #f1f3f5;
    --lg-border: #ececef;
    --lg-line: #e7e8eb;
    --lg-reflection: none;
    --lg-panel-surface: #ffffff;
    --lg-floating-surface: #ffffff;
    --lg-navigation-surface: #ffffff;
    --lg-optical-tint: #ffffff;
    --lg-highlight: none;
    --lg-shadow: 0 0 16px rgba(28, 31, 36, .035);
    --lg-floating-shadow: 0 0 24px rgba(28, 31, 36, .055);
    --lg-selected: #eaf0f6;
    --lg-blur: none;
    --lg-radius: 20px;
    --lg-control-reader: #ffffff;
    --lg-control-heading: #f8f9fa;
    --tool-surface: var(--lg-soft);
    --tool-dialog: var(--lg-elevated);
    --tool-edge: none;
    --primary: var(--lg-accent);
    --primary-hover: #3c577b;
    --primary-light: #eaf0f6;
    --glass-blur: none;
}

html.liquid-glass[data-theme="dark"] {
    --lg-text: #e8e9ec;
    --lg-muted: #a4a6ad;
    --lg-placeholder: #98a4b7;
    --lg-accent: #a7bddb;
    --ui-focus-border: #8da3c0;
    --ui-focus-halo: rgba(167, 189, 219, .12);
    --lg-canvas: #18191b;
    --lg-wallpaper: none;
    --lg-surface: #232427;
    --lg-elevated: #27282c;
    --lg-input: #1e1f22;
    --lg-soft: #292a2e;
    --lg-hover: #303237;
    --lg-border: #303136;
    --lg-line: #36373d;
    --lg-reflection: none;
    --lg-panel-surface: #232427;
    --lg-floating-surface: #27282c;
    --lg-navigation-surface: #232427;
    --lg-optical-tint: #232427;
    --lg-highlight: none;
    --lg-shadow: 0 0 16px rgba(0, 0, 0, .12);
    --lg-floating-shadow: 0 0 24px rgba(0, 0, 0, .2);
    --lg-selected: #303946;
    --lg-blur: none;
    --lg-control-reader: #232427;
    --lg-control-heading: #292a2e;
    --primary-hover: #c5d5eb;
    --primary-light: #303946;
}

/* Tool dialogs have locally scoped material tokens in the older sheet. */
html.liquid-glass body.tgto-app :is(#utility-tools-section, .utility-modal,
    .tbp-overlay, .organize-recognize-modal, .organize-detail-modal,
    .organize-clear-modal, .organize-inline-confirm-modal),
html.liquid-glass[data-theme="dark"] body.tgto-app :is(#utility-tools-section,
    .utility-modal, .tbp-overlay, .organize-recognize-modal, .organize-detail-modal,
    .organize-clear-modal, .organize-inline-confirm-modal) {
    --tool-surface: var(--lg-soft);
    --tool-dialog: var(--lg-elevated);
    --tool-edge: none;
}

html.liquid-glass body,
html.liquid-glass body.mobile-document-scroll,
html.liquid-glass.is-standalone-ios body {
    background: var(--lg-canvas) !important;
}

/* Supporting copy stays readable; placeholders retain a quieter hierarchy. */
html.liquid-glass:root body :is(input, textarea)::placeholder {
    color: var(--lg-placeholder) !important;
    opacity: 1 !important;
}

/* The shell is white in the light theme, with only a fine neutral boundary. */
html.liquid-glass body :is(.sidebar, .top-bar, .mobile-dock-card),
html.liquid-glass body.mobile-document-scroll :is(.sidebar.open, .top-bar, .mobile-dock-card),
html.liquid-glass body .top-bar.lg-optical-host,
html.liquid-glass body.mobile-document-scroll .top-bar.lg-optical-host {
    background: var(--lg-navigation-surface) !important;
    border-color: var(--lg-border) !important;
    box-shadow: var(--lg-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body :is(.top-bar, .mobile-dock-card)::after,
html.liquid-glass body .lg-optical-host > span.lg-optical-backdrop {
    content: none !important;
    display: none !important;
}
html.liquid-glass body .sidebar .nav-item.active {
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
html.liquid-glass.clean-ui body .sidebar .nav-category-title {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px;
    letter-spacing: 0 !important;
}

/* These are content surfaces, not generic divs or application section roots. */
html.liquid-glass body :is(
    .config-group:not(.config-group-structured), .config-group-structured .config-subgroup,
    .emby-metric-card, .emby-panel, .emby-setup-panel, .emby-proxy-card,
    .emby-proxy-head, .emby-proxy-empty, .proxy-settings-card,
    .proxy-settings-block, .proxy-settings-head, .proxy-settings-guide, .proxy-settings-save-panel,
    .utility-card, .utility-tool-card, .tg-transfer-card, .monitor-link-card, .organize-history-toolbar,
    .transfer-history-toolbar, .md-filter-panel, .md-ranking-panel,
    .md-library-toolbar, .md-library-filter-panel, .md-calendar-toolbar,
    .md-ranking-control-panel, .md-ranking-results-shell, .md-calendar-shell,
    .md-spotlight-compact, .md-calendar-spotlight, .md-task-card, .md-basic-config-panel,
    .md-work-detail-hero, .md-work-detail-info-card, .md-work-detail-person-card,
    .md-work-detail-filmography, .md-tmdb-section, .md-work-detail-resource-panel,
    .md-work-detail-actor-hero, .md-actor-explore-panel, .md-actor-profile-hero,
    .md-actor-profile-aside, .md-actor-filmography-panel, .md-state,
    .md-work-detail-loading, .md-work-detail-error, .app-load-state,
    .vfp-editor-toolbar, .vfp-assist-panel, .vfp-rule-board,
    .ssh-config, .ssh-profile-bar
) {
    border-color: var(--lg-border) !important;
    border-radius: 20px !important;
    background: var(--lg-panel-surface) !important;
    box-shadow: var(--lg-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body #emby-setup-panel { border-radius: 20px !important; }
html.liquid-glass body .global-alert-banner {
    background: var(--lg-surface);
    border-color: var(--lg-border);
    border-radius: 14px;
    box-shadow: none;
}
html.liquid-glass body :is(.md-ranking-results-shell, .md-calendar-shell) .md-state {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Inner groups are deliberately a shade quieter than the outer white cards. */
html.liquid-glass body :is(.config-subgroup, .utility-ai-card, .vf-inline-editor,
    .proxy-settings-guide-card, .proxy-settings-steps, .qr115-panel,
    .md-spotlight-stat-card, .md-calendar-spotlight-stat, .md-calendar-date-rail-wrap,
    .md-resource-filter-bar, .md-monitor-dialog-intro, .md-resource-card,
    .emby-live-card, .emby-user-card, .emby-invite-access-guide) {
    border-color: var(--lg-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body .config-group-structured .config-subgroup {
    border-radius: 20px !important;
    border-color: var(--lg-border) !important;
    box-shadow: var(--lg-shadow) !important;
}
html.liquid-glass body :is(.proxy-settings-guide-card, .md-spotlight-stat-card,
    .md-calendar-spotlight-stat, .emby-invite-access-guide) {
    background: var(--lg-soft) !important;
}
html.liquid-glass body :is(.organize-batch-toolbar, .md-ranking-vlib-toggle,
    .md-ranking-vlib-section, .md-basic-callout, .config-subgroup-desc.is-callout) {
    background: var(--lg-soft) !important;
    border-color: var(--lg-line) !important;
    border-radius: 12px;
    box-shadow: none !important;
}
html.liquid-glass body .config-subgroup-desc.is-callout::before {
    color: var(--lg-muted) !important;
}
html.liquid-glass body .organize-batch-toolbar.is-selection-mode {
    border-color: var(--lg-accent) !important;
}
html.liquid-glass body .md-basic-config-panel.is-dirty {
    border-color: color-mix(in srgb, var(--lg-control-warning) 38%, var(--lg-line)) !important;
}
html.liquid-glass body.tgto-app .utility-modal :is(.utility-ai-card,
    .utility-modal-card, .utility-cover-section, .utility-cover-action-card,
    .utility-share-clean-stat-card, .utility-share-clean-detail-summary,
    .utility-share-clean-detail-item, .utility-tmdb-search-result-card,
    .utility-tmdb-regex-card, .utility-cover-library-item,
    .utility-share-clean-log-item, .utility-share-clean-history-item,
    .utility-cover-plugin-card, .utility-share-clean-config-card,
    .utility-share-clean-progress-card, .utility-share-clean-history-card,
    .utility-share-clean-detail-card) {
    background: var(--lg-soft) !important;
    border-color: var(--lg-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body :is(.search-input, .md-pagination-page,
    .md-work-detail-monitor-status),
html.liquid-glass body.tgto-app :is(#env-sections, .utility-modal, .tbp-dialog)
    :is(input, select, textarea),
html.liquid-glass body.tgto-app #utility-bot-commands-modal
    :is(.transfer-history-header, .transfer-history-container),
html.liquid-glass body.tgto-app #organize-history-section #organize-batch-toolbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body.tgto-app #env-sections :is(.transfer-table-wrap,
    .log-viewer-container, .proxy-settings-results) {
    background: var(--lg-control-reader);
    border-color: var(--lg-line);
    border-radius: 12px;
    box-shadow: none;
}

/* Menus and dialogs have an opaque reading surface; overlays stay neutral. */
html.liquid-glass body :is(.search-results, .search-results-dropdown,
    .config-search-results, .custom-confirm-modal, .modal-content, .restart-dialog,
    .utility-modal, .directory-selector-panel, .notify-bot-panel,
    .organize-recognize-panel, .organize-detail-panel, .organize-clear-panel,
    .organize-inline-confirm-dialog, .md-modal, .md-dialog, .tbp-dialog,
    .vfp-dialog, .vfp-tools-drawer, .vfp-preview-drawer, .vfp-search-drawer) {
    background: var(--lg-elevated) !important;
    border-color: var(--lg-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--lg-floating-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body :is(.overlay, .md-modal-backdrop, .utility-modal-overlay,
    .directory-selector-backdrop, .notify-bot-backdrop, .vf-modal-backdrop,
    .organize-inline-confirm-backdrop, .organize-clear-mask, .organize-detail-mask,
    .organize-recognize-mask, .pttransfer-records-mask, .pikpak-captcha-modal-overlay,
    .tbp-overlay, .vfp-modal-backdrop) {
    background: rgba(24, 25, 28, .28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body :is(.utility-modal-header, .tbp-dialog-header,
    .organize-clear-header, .organize-recognize-header) {
    background: transparent !important;
    border-color: var(--lg-line) !important;
}
html.liquid-glass body :is(.organize-recognize-result-shell,
    .organize-recognize-card, .organize-clear-date-card,
    .organize-clear-calendar-shell, .organize-clear-field-row) {
    background: var(--lg-soft) !important;
    border-color: var(--lg-line) !important;
    box-shadow: none !important;
}
html.liquid-glass body :is(.config-subgroup-icon, .proxy-settings-block-icon,
    .organize-clear-icon, .ssh-brand-mark),
html.liquid-glass body .emby-setup-features li > span,
html.liquid-glass body:is(.vfp-app-body, .vfp-inline-editor-open) .vfp-empty-icon {
    background: var(--lg-soft) !important;
    border-color: var(--lg-line) !important;
    box-shadow: none !important;
}

/* Artwork in posters remains intact. Only decorative blurred duplicates and
   ornamental highlights are removed from the surrounding interface. */
html.liquid-glass body :is(.md-spotlight-backdrop, .md-calendar-spotlight-backdrop,
    .md-spotlight-shade, .md-calendar-spotlight-shade, .md-work-detail-backdrop,
    .md-work-detail-hero-shade, .md-actor-profile-hero-art, .lg-media-art-orbit) {
    display: none !important;
}
html.liquid-glass body .utility-tool-card::before { content: none !important; }
html.liquid-glass body .utility-tool-card:nth-child(n) .utility-tool-card-icon,
html.liquid-glass[data-theme="dark"] body .utility-tool-card:nth-child(n) .utility-tool-card-icon {
    background: var(--lg-soft) !important;
    color: var(--lg-accent) !important;
    border-color: var(--lg-line) !important;
    box-shadow: none !important;
}
html.liquid-glass body :is(.lg-empty-tile, .lg-media-art-tile, .lg-media-art-spark) {
    background: var(--lg-soft);
    border-color: var(--lg-line);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Tool shortcuts use compact rows without truncating their descriptions. */
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tools-page {
    gap: 16px;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tools-header {
    margin-bottom: 0;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 12px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 5px;
    align-items: start;
    align-content: center;
    min-height: 112px;
    padding: 16px !important;
    border-radius: 14px !important;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card-icon svg {
    width: 18px;
    height: 18px;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card-label {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 14px !important;
    line-height: 22px;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card-desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 13px !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card-meta {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card-meta::after {
    content: '\203a';
    margin: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--lg-muted);
    transform: none !important;
    transition: none;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card:hover {
    transform: none !important;
    border-color: color-mix(in srgb, var(--lg-accent) 28%, var(--lg-line)) !important;
}
html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card:focus-visible {
    outline: var(--ui-focus-width) solid var(--ui-focus-border) !important;
    outline-offset: var(--ui-focus-offset) !important;
    box-shadow: 0 0 0 3px var(--ui-focus-halo) !important;
}
@media (min-width: 1600px) {
    html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tools-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 1100px) {
    html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tools-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    html.liquid-glass.clean-ui body.tgto-app #utility-tools-section .utility-tool-card {
        min-height: 104px;
        padding: 14px !important;
        column-gap: 10px;
    }
}
html.liquid-glass body :is(.md-library-tile-kind, .md-library-tile-score,
    .md-calendar-card-kind, .md-calendar-card-score, .md-ranking-tile .md-score,
    .md-ranking-tile .md-rank, .md-actor-card-label, .md-actor-card-heat,
    .md-actor-work-kind, .md-actor-work-score) {
    background: rgba(24, 25, 28, .82);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Standalone pages use the same white panels as the main application. */
html.liquid-glass body.lg-login-page .login-card,
html.liquid-glass body.lg-ssh-page .ssh-header {
    background: var(--lg-panel-surface) !important;
    border-color: var(--lg-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--lg-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body.lg-login-page .login-logo {
    background: var(--lg-soft);
    border-color: var(--lg-line);
    box-shadow: none;
}
html.liquid-glass body.lg-ssh-page .ssh-terminal-panel {
    background: #1d1f23;
    border-color: #33363d;
    border-radius: 20px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.liquid-glass body.lg-ssh-page :is(.ssh-terminal-title, .ssh-command-form) {
    background: #24262b;
    border-color: #33363d;
}
html.liquid-glass body.lg-ssh-page #cmd-input {
    background: transparent !important;
    color: #e8e9ed !important;
}
html.liquid-glass body #ssh-section .ssh-tip-box {
    background: var(--lg-soft);
    color: var(--lg-muted);
    border-color: var(--lg-line);
    box-shadow: none;
}
html.liquid-glass body #ssh-section .ssh-header-icon { filter: none; }
html.liquid-glass body:is(.vfp-app-body, .vfp-inline-editor-open) .vfp-rule-card {
    border-radius: 12px !important;
    box-shadow: none !important;
}

@media (min-width: 769px) {
    html.liquid-glass body .sidebar { border-radius: 18px; }
    html.liquid-glass body .top-bar { border-radius: 16px; }
}
@media (max-width: 768px) {
    html.liquid-glass body .sidebar { border-radius: 0 18px 18px 0; }
    html.liquid-glass body .top-bar { border-radius: 0 0 16px 16px; }
}

/* Keep keyboard focus close to the control instead of drawing a second frame.
   Dialog containers receive focus for navigation; their controls show the cue. */
html.liquid-glass.clean-ui:root :is(body, #env-sections) :is(button, a, input,
    select, textarea, summary, [tabindex], [role="button"]):not([role="dialog"]):focus-visible {
    outline: var(--ui-focus-width) solid var(--ui-focus-border) !important;
    outline-offset: var(--ui-focus-offset) !important;
    box-shadow: 0 0 0 3px var(--ui-focus-halo) !important;
}
html.liquid-glass.clean-ui:root body [role="dialog"]:focus-visible {
    outline: none !important;
}

@media (forced-colors: active) {
    html.liquid-glass,
    html.liquid-glass[data-theme="dark"] {
        --lg-text: CanvasText;
        --lg-muted: CanvasText;
        --lg-placeholder: GrayText;
        --lg-accent: LinkText;
        --ui-focus-border: Highlight;
        --ui-focus-halo: transparent;
        --ui-focus-width: 2px;
        --ui-focus-offset: 2px;
        --lg-canvas: Canvas;
        --lg-surface: Canvas;
        --lg-elevated: Canvas;
        --lg-input: Canvas;
        --lg-soft: Canvas;
        --lg-border: CanvasText;
        --lg-line: CanvasText;
        --lg-panel-surface: Canvas;
        --lg-floating-surface: Canvas;
        --lg-navigation-surface: Canvas;
        --lg-selected: Canvas;
        --lg-shadow: none;
        --lg-floating-shadow: none;
    }
}