/* TgtoDrive Liquid Glass. Load last: legacy feature sheets retain their layout;
   this layer owns materials, typography, shell spacing and accessible states. */
html.liquid-glass {
    color-scheme: light;
    --lg-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --lg-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
    --lg-text: #202b3b;
    --lg-muted: #58697d;
    --lg-accent: #0068d6;
    --lg-canvas: #e9eef3;
    --lg-wallpaper: url('liquid_glass_wallpaper.svg');
    --lg-surface: rgba(255, 255, 255, .18);
    --lg-elevated: rgba(250, 253, 255, .92);
    --lg-input: rgba(255, 255, 255, .42);
    --lg-soft: rgba(248, 252, 255, .12);
    --lg-hover: rgba(255, 255, 255, .85);
    --lg-border: rgba(255, 255, 255, .7);
    --lg-line: rgba(59, 85, 116, .12);
    --lg-reflection: linear-gradient(132deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .015) 44%, rgba(255, 255, 255, .10));
    --lg-panel-surface: var(--lg-reflection), var(--lg-surface);
    --lg-floating-surface: var(--lg-reflection), rgba(246, 251, 255, .68);
    --lg-highlight: inset 0 0 0 1px rgba(255, 255, 255, .23);
    --lg-shadow: 0 0 20px -7px rgba(46, 68, 92, .20), var(--lg-highlight);
    --lg-floating-shadow: 0 0 28px -8px rgba(46, 68, 92, .22), var(--lg-highlight);
    --lg-selected: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(217, 237, 255, .28));
    --lg-blur: blur(18px) saturate(165%);
    --lg-radius: 24px;
    --lg-ease: cubic-bezier(.2, .75, .25, 1);
    --lg-action-bg: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(191, 219, 245, .3)), rgba(206, 228, 250, .24);
    --lg-action-text: #0759a8;
    --lg-action-border: rgba(93, 146, 198, .28);
    --lg-action-shadow: 0 0 10px -5px rgba(44, 82, 120, .18), inset 0 0 0 1px rgba(255, 255, 255, .25);
    --primary: var(--lg-accent);
    --primary-hover: #0058bc;
    --primary-light: rgba(0, 102, 218, .09);
    --primary-gradient: var(--lg-action-bg);
    --bg-body: var(--lg-canvas);
    --bg-sidebar: var(--lg-surface);
    --bg-card: var(--lg-surface);
    --bg-card-elevated: var(--lg-elevated);
    --bg-card-hover: var(--lg-hover);
    --bg-card-subtle: var(--lg-soft);
    --text-main: var(--lg-text);
    --text-sub: var(--lg-muted);
    --text-muted: var(--lg-muted);
    --border: var(--lg-line);
    --border-light: var(--lg-border);
    --border-highlight: var(--lg-border);
    --border-subtle: var(--lg-line);
    --shadow-card: var(--lg-shadow);
    --shadow-glass: var(--lg-floating-shadow);
    --radius-l: var(--lg-radius);
    --radius-lg: var(--lg-radius);
    --glass-blur: var(--lg-blur);
}

html.liquid-glass[data-theme="dark"] {
    color-scheme: dark;
    --lg-text: #edf3fb;
    --lg-muted: #a4b4c9;
    --lg-accent: #92ceff;
    --lg-canvas: #21262e;
    --lg-wallpaper: url('liquid_glass_wallpaper_dark.svg');
    --lg-surface: rgba(20, 33, 50, .22);
    --lg-elevated: rgba(26, 39, 56, .97);
    --lg-input: rgba(12, 23, 39, .52);
    --lg-soft: rgba(18, 30, 46, .14);
    --lg-hover: rgba(55, 76, 102, .7);
    --lg-border: rgba(203, 228, 255, .13);
    --lg-line: rgba(191, 211, 242, .13);
    --lg-reflection: linear-gradient(132deg, rgba(200, 228, 255, .06), rgba(200, 228, 255, 0) 44%, rgba(176, 206, 245, .025));
    --lg-floating-surface: var(--lg-reflection), rgba(18, 32, 51, .76);
    --lg-highlight: inset 0 0 0 1px rgba(222, 239, 255, .05);
    --lg-shadow: 0 0 20px -7px rgba(0, 0, 0, .36), var(--lg-highlight);
    --lg-floating-shadow: 0 0 28px -8px rgba(0, 0, 0, .42), var(--lg-highlight);
    --lg-selected: linear-gradient(135deg, rgba(100, 157, 224, .34), rgba(85, 150, 230, .15));
    --primary: var(--lg-accent);
    --primary-hover: #b8e0ff;
    --primary-light: rgba(92, 176, 255, .15);
    --lg-action-bg: linear-gradient(145deg, rgba(180, 212, 246, .16), rgba(102, 152, 206, .075)), rgba(37, 68, 103, .28);
    --lg-action-text: #b6dcff;
    --lg-action-border: rgba(163, 203, 243, .25);
    --lg-action-shadow: 0 0 10px -5px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(223, 238, 255, .07);
    --primary-gradient: var(--lg-action-bg);
}

html.liquid-glass body {
    font-family: var(--lg-font-ui);
    color: var(--lg-text);
    background-color: var(--lg-canvas);
    background-image: var(--lg-wallpaper);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
html.liquid-glass :is(button, input, select, textarea) { font-family: inherit; }
html.liquid-glass body button { font-weight: 500; }
html.liquid-glass ::selection { background: rgba(69, 154, 255, .27); }

/* A floating frame. No transforms on the shell: dialogs and iOS fixed elements
   must keep their original viewport containing block. */
html.liquid-glass body .sidebar {
    background: var(--lg-panel-surface) !important;
    border: 1px solid var(--lg-border) !important;
    box-shadow: var(--lg-floating-shadow) !important;
    backdrop-filter: var(--lg-blur) !important;
    -webkit-backdrop-filter: var(--lg-blur) !important;
    flex-shrink: 0;
}
html.liquid-glass body .top-bar {
    background: var(--lg-panel-surface) !important;
    border: 1px solid var(--lg-border) !important;
    box-shadow: var(--lg-shadow) !important;
    backdrop-filter: var(--lg-blur) !important;
    -webkit-backdrop-filter: var(--lg-blur) !important;
}
@media (min-width: 769px) {
    html.liquid-glass body .sidebar {
        width: 244px !important;
        margin: 16px 0 16px 16px;
        height: calc(100% - 32px);
        border-radius: 26px;
        overflow: hidden;
    }
    html.liquid-glass body .top-bar {
        margin: 16px 24px 0;
        padding: 0 22px !important;
        min-height: 68px;
        border-radius: 22px;
        flex-shrink: 0;
    }
    html.liquid-glass body .content-area { padding: 24px 24px 40px !important; }
    html.liquid-glass body .search-input,
    html.liquid-glass body .search-input:focus { width: clamp(180px, 22vw, 300px) !important; }
}
html.liquid-glass body .brand { padding: 23px 20px 21px !important; border-color: var(--lg-line) !important; gap: 12px !important; }
html.liquid-glass body .brand-icon { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
html.liquid-glass body .brand-text { color: var(--lg-text) !important; -webkit-text-fill-color: currentColor; background: none; letter-spacing: -.045em !important; font-size: 1.16rem !important; }
html.liquid-glass body .brand-version { color: var(--lg-muted) !important; margin-left: 0 !important; font-size: .68rem !important; }
html.liquid-glass body #sidebar-nav { padding: 12px 10px 20px !important; scrollbar-width: thin; scrollbar-color: var(--lg-line) transparent; }
html.liquid-glass body .nav-category-title { color: var(--lg-muted) !important; font-weight: 500 !important; font-size: .69rem !important; letter-spacing: .05em !important; }
html.liquid-glass body .nav-category-btn { min-height: 30px; padding: 7px 10px !important; }
html.liquid-glass body .nav-item { min-height: 38px; padding: 9px 12px !important; border-radius: 12px !important; color: var(--lg-muted) !important; margin-bottom: 3px !important; transition: background .18s var(--lg-ease), box-shadow .18s var(--lg-ease), color .18s ease !important; }
html.liquid-glass body .nav-item:hover { background: var(--lg-soft) !important; color: var(--lg-text) !important; transform: none !important; }
html.liquid-glass body .nav-item.active { background: var(--lg-selected) !important; border-color: var(--lg-border) !important; color: var(--lg-accent) !important; box-shadow: var(--lg-shadow) !important; }
html.liquid-glass body .nav-item.active::before { content: none !important; }
html.liquid-glass body .nav-category-group:not(:first-child)::before { opacity: .35; }
html.liquid-glass body .nav-item svg { color: currentColor !important; }
html.liquid-glass body .sidebar-footer { border-color: var(--lg-line) !important; padding: 14px 12px !important; }
html.liquid-glass body .sidebar-footer :is(.theme-toggle-btn, .logout-btn) { height: 38px !important; border-radius: 12px !important; background: var(--lg-soft) !important; border-color: var(--lg-line) !important; color: var(--lg-muted) !important; }
html.liquid-glass body #theme-toggle-text { color: inherit !important; font-size: .76rem; }
html.liquid-glass body .page-title { color: var(--lg-text) !important; font-size: 1.04rem !important; letter-spacing: -.02em !important; }
html.liquid-glass body .page-heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
html.liquid-glass body .page-eyebrow { font-size: 10px; letter-spacing: .08em; color: var(--lg-muted); }
html.liquid-glass body .top-bar-context { display: none; margin-left: auto; font-size: 12px; color: var(--lg-muted); letter-spacing: .04em; }
html.liquid-glass body .top-bar.has-no-top-actions .top-bar-context { display: block; }
html.liquid-glass body .search-shortcut { position: absolute; right: 10px; padding: 3px 5px; border: 1px solid var(--lg-line); border-radius: 5px; font-family: inherit; font-size: 10px; color: var(--lg-muted); pointer-events: none; }
html.liquid-glass body .search-wrapper .search-input { padding-right: 62px !important; }

/* First-run and connection warnings belong to the frame, not unstyled text
   above it. Keep them compact enough to leave room for content on phones. */
html.liquid-glass body .global-alert-strip { flex: 0 0 auto; margin: 0 24px; padding: 0; }
html.liquid-glass body .global-alert-strip:empty { display: none; }
html.liquid-glass body .global-alert-strip.visible { margin-top: 16px; }
html.liquid-glass body .global-alert-banner { display: flex; gap: 12px; align-items: flex-start; padding: 13px 17px; border-radius: 16px; border: 1px solid var(--lg-border); background: var(--lg-panel-surface); box-shadow: var(--lg-highlight); }
html.liquid-glass body .global-alert-banner-icon { flex: 0 0 20px; color: var(--lg-accent); padding-top: 1px; }
html.liquid-glass body .global-alert-banner-title { font-weight: 650; font-size: .82rem; margin-bottom: 4px; }
html.liquid-glass body .global-alert-banner-desc { color: var(--lg-muted); font-size: .76rem; line-height: 1.7; }
html.liquid-glass body .global-alert-details { flex: 1; min-width: 0; }
html.liquid-glass body .global-alert-details summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; margin: 2px 0; line-height: 1.6; }
html.liquid-glass body .global-alert-details summary::-webkit-details-marker { display: none; }
html.liquid-glass body .global-alert-details summary:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 4px; border-radius: 4px; }
html.liquid-glass body .global-alert-disclosure { font-size: 11px; font-weight: 400; color: var(--lg-muted); }
html.liquid-glass body .global-alert-disclosure::after { content: '⌄'; margin-left: 7px; }
html.liquid-glass body .global-alert-details[open] .global-alert-disclosure::after { content: '⌃'; }
html.liquid-glass body .global-alert-details .global-alert-banner-desc { margin-top: 8px; }
html.liquid-glass body .global-alert-settings-btn { align-self: start; flex-shrink: 0; background: transparent !important; border: 0 !important; padding: 3px 0 3px 8px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--lg-accent) !important; box-shadow: none !important; cursor: pointer; }
html.liquid-glass body .global-alert-settings-btn span { margin-left: 5px; }
html.liquid-glass body .global-alert-settings-btn { border-radius: 8px; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.liquid-glass body .global-alert-banner-error { border-left: 1px solid var(--lg-border); }
html.liquid-glass body .global-alert-banner-error .global-alert-banner-icon { color: #a46a0d; }
html.liquid-glass[data-theme="dark"] body .global-alert-banner-error .global-alert-banner-icon { color: #e7b865; }

/* Background glass is reserved for the outer card; nested content uses a
   simple translucent fill, avoiding stacks of GPU blur layers in long forms. */
html.liquid-glass body :is(.config-group, .emby-dashboard-head, .emby-metric-card, .emby-panel,
    .emby-setup-panel, .emby-proxy-card, .proxy-settings-card, .proxy-settings-block, .proxy-settings-head, .proxy-settings-guide, .emby-proxy-head, .utility-card, .utility-tool-card,
    .organize-history-toolbar, .transfer-history-toolbar, .md-filter-panel, .md-ranking-panel, .md-library-toolbar, .md-library-filter-panel,
    .md-calendar-toolbar, .md-task-card, .vfp-editor-toolbar, .vfp-rule-card, .vfp-assist-panel) {
    background: var(--lg-panel-surface) !important;
    border: 1px solid var(--lg-border) !important;
    border-radius: var(--lg-radius) !important;
    box-shadow: var(--lg-shadow) !important;
    backdrop-filter: var(--lg-blur) !important;
    -webkit-backdrop-filter: var(--lg-blur) !important;
}
/* Structural sections must stay clear, especially the hidden dashboard panel. */
html.liquid-glass body :is(#emby-dashboard-section, #emby-proxy-section, #proxy-settings-section,
    #utility-tools-section, .media-discovery-section) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body :is(.config-subgroup, .emby-setup-card, .utility-ai-card, .vf-inline-editor, .vfp-all-mode-card) {
    background: var(--lg-soft) !important;
    border-color: var(--lg-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--lg-highlight) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.liquid-glass body .config-subgroup:hover { background: var(--lg-soft) !important; border-color: var(--lg-line) !important; }
html.liquid-glass body .config-subgroup-icon { border-radius: 12px !important; background: var(--lg-selected) !important; border-color: var(--lg-border) !important; color: var(--lg-accent) !important; box-shadow: var(--lg-highlight); }
html.liquid-glass body :is(.config-subgroup-title, .emby-panel-title, .form-label, .group-title, .emby-metric-value) { color: var(--lg-text) !important; }
html.liquid-glass body :is(.config-subgroup-desc, .form-desc, .emby-dashboard-tip, .emby-dashboard-date, .emby-metric-label) { color: var(--lg-muted) !important; }
html.liquid-glass body .emby-dashboard-head { padding: 6px 4px 2px !important; gap: 20px; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.liquid-glass body .emby-dashboard-title { font-size: clamp(1.5rem, 2.3vw, 1.9rem); font-weight: 600; letter-spacing: -.035em; }
html.liquid-glass body .emby-dashboard-date { font-size: 12px; font-weight: 400; margin-top: 7px; }
html.liquid-glass body .emby-dashboard-tip { max-width: 620px; line-height: 1.7; font-size: .76rem; }
html.liquid-glass body .emby-metric-card { padding: 22px !important; }
html.liquid-glass body .emby-metric-card:hover { transform: none !important; }
html.liquid-glass body .emby-metric-value { font-size: 1.95rem !important; font-weight: 650 !important; font-variant-numeric: tabular-nums; letter-spacing: -.05em !important; }
html.liquid-glass body .emby-panel { padding: 22px !important; }

/* A single connection surface, with an illustration and a focused form.
   The illustration is decorative; real service state stays in the form. */
html.liquid-glass body .emby-dashboard-wrap.is-setup .emby-dashboard-actions,
html.liquid-glass body .emby-dashboard-wrap.is-setup .emby-dashboard-tip { display: none; }
html.liquid-glass body #emby-setup-panel { padding: clamp(24px, 3vw, 44px); border-radius: 30px !important; }
html.liquid-glass body #emby-setup-panel .emby-setup-card {
    display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1100px; margin: 0 auto;
    padding: 0; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
}
html.liquid-glass body .emby-setup-intro { min-width: 0; padding: 0 10px; }
html.liquid-glass body .emby-setup-badge { background: none; padding: 0; color: var(--lg-accent); font-size: 10px; font-weight: 600; letter-spacing: .13em; }
html.liquid-glass body .emby-setup-title { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.25; letter-spacing: -.04em; font-weight: 600; margin: 14px 0 17px; color: var(--lg-text); }
html.liquid-glass body .emby-setup-desc { color: var(--lg-muted); max-width: 310px; font-size: 13px; font-weight: 400; line-height: 1.85; }
html.liquid-glass body .emby-setup-features { display: grid; gap: 20px; list-style: none; margin: 30px 0 0; padding: 0; }
html.liquid-glass body .emby-setup-features li { display: flex; gap: 13px; align-items: center; }
html.liquid-glass body .emby-setup-features li > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--lg-border); border-radius: 11px; background: var(--lg-panel-surface); box-shadow: var(--lg-highlight); color: var(--lg-accent); }
html.liquid-glass body .emby-setup-features strong { display: block; font-size: 12px; font-weight: 500; color: var(--lg-text); }
html.liquid-glass body .emby-setup-features small { display: block; margin-top: 4px; font-size: 11px; color: var(--lg-muted); }
html.liquid-glass body .emby-setup-form { margin: 0; padding: 28px; gap: 10px; border: 1px solid var(--lg-border); border-radius: 22px; background: var(--lg-reflection); box-shadow: var(--lg-highlight); min-width: 0; }
html.liquid-glass body .emby-setup-form-heading { margin-bottom: 15px; }
html.liquid-glass body .emby-setup-form-heading h3 { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
html.liquid-glass body .emby-setup-form-heading p { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--lg-muted); }
html.liquid-glass body .emby-setup-label { font-size: 12px; font-weight: 500; color: var(--lg-text); margin-top: 6px; }
html.liquid-glass body .emby-setup-input { min-height: 44px; padding: 11px 13px; font-size: 13px; font-weight: 400; }
html.liquid-glass body .emby-setup-actions { gap: 9px; margin-top: 14px; }
html.liquid-glass body #emby-setup-test-btn { background: var(--lg-panel-surface) !important; border-color: var(--lg-border) !important; color: var(--lg-text) !important; box-shadow: var(--lg-highlight) !important; }
html.liquid-glass body #emby-setup-save-btn { background: var(--lg-action-bg) !important; color: var(--lg-action-text) !important; border-color: var(--lg-action-border) !important; box-shadow: var(--lg-action-shadow) !important; }
html.liquid-glass body #emby-setup-clear-btn { background: transparent !important; border-color: transparent !important; color: var(--danger) !important; box-shadow: none !important; padding-inline: 4px; margin-left: 2px; font-size: 11px; }
html.liquid-glass body .emby-setup-btn { min-height: 38px; font-weight: 500; border-radius: 11px; }
html.liquid-glass body .emby-setup-result { border-radius: 10px; padding: 10px 12px; font-size: 11px; line-height: 1.65; }
html.liquid-glass body .emby-setup-result:empty { display: none; }
html.liquid-glass body .emby-setup-result.info { color: var(--lg-muted); border-color: var(--lg-line); background: var(--lg-soft); }
html.liquid-glass body .emby-setup-tip { color: var(--lg-muted); font-size: 11px; line-height: 1.8; }
html.liquid-glass body .emby-proxy-head { padding: 24px !important; gap: 18px; align-items: center; }
html.liquid-glass body .emby-proxy-head > div:first-child { flex: 1 1 520px; }
html.liquid-glass body .emby-proxy-tip { margin-top: 12px; max-width: 780px; color: var(--lg-muted); font-size: 12px; line-height: 1.8; }
html.liquid-glass body .emby-proxy-actions { gap: 8px; }
html.liquid-glass body .emby-proxy-result.info { color: var(--lg-muted); border: 0; background: transparent; padding: 0 5px; line-height: 1.8; font-size: 12px; }
html.liquid-glass body .emby-proxy-empty {
    grid-column: 1 / -1; min-height: 360px; padding: 45px 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid var(--lg-border); border-radius: 28px;
    background: var(--lg-panel-surface); box-shadow: var(--lg-shadow);
    color: var(--lg-muted); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur);
}
html.liquid-glass body .emby-proxy-empty h3 { color: var(--lg-text); font-weight: 600; font-size: 20px; letter-spacing: -.025em; margin: 18px 0 10px; }
html.liquid-glass body .emby-proxy-empty p { margin: 0; font-size: 12px; line-height: 1.8; }
.lg-empty-art { position: relative; width: 160px; height: 106px; color: var(--lg-accent); }
.lg-empty-orbit { position: absolute; inset: 10px -6px 0; border: 1px solid var(--lg-border); border-radius: 50%; transform: rotate(-18deg); }
.lg-empty-tile { position: absolute; display: grid; place-items: center; width: 74px; height: 83px; border-radius: 23px; border: 1px solid var(--lg-border); background: var(--lg-reflection), var(--lg-soft); box-shadow: var(--lg-floating-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lg-empty-tile-back { left: 13px; top: 4px; transform: rotate(-14deg); background-color: var(--primary-light); }
.lg-empty-tile-front { right: 10px; top: 16px; transform: rotate(12deg); }
.lg-empty-tile svg { width: 28px; height: 28px; stroke-width: 1.5; }
.lg-empty-services { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.lg-empty-services span { padding: 6px 11px; border: 1px solid var(--lg-line); border-radius: 20px; font-size: 10px; color: var(--lg-muted); background: var(--lg-soft); }
.lg-media-art { position: relative; width: 220px; height: 146px; margin-bottom: 26px; color: var(--lg-accent); }
.lg-media-art-orbit { position: absolute; width: 206px; height: 100px; top: 27px; left: -4px; border: 1px solid var(--lg-border); border-radius: 50%; transform: rotate(-22deg); }
.lg-media-art-tile { position: absolute; display: grid; place-items: center; border: 1px solid var(--lg-border); box-shadow: var(--lg-floating-shadow); border-radius: 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lg-media-art-tile-back { width: 81px; height: 100px; left: 22px; top: 13px; transform: rotate(-13deg); background: linear-gradient(140deg, rgba(143,207,247,.44),rgba(255,255,255,.08)); }
.lg-media-art-tile-back svg { width: 30px; height: 30px; stroke-width: 1.25; }
.lg-media-art-tile-front { width: 107px; height: 116px; left: 79px; top: 26px; transform: rotate(10deg); background: linear-gradient(140deg,rgba(255,255,255,.4),rgba(179,223,255,.1)); }
.lg-media-art-spark { position: absolute; left: 176px; top: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--lg-border); background: var(--lg-panel-surface); box-shadow: var(--lg-shadow); border-radius: 12px; transform: rotate(6deg); }

/* Form sections and tool launchers use fewer nested borders. */
html.liquid-glass body .config-group.config-group-structured { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.liquid-glass body .config-group-structured .config-subgroup { background: var(--lg-panel-surface) !important; border-color: var(--lg-border) !important; box-shadow: var(--lg-shadow) !important; padding: 23px !important; border-radius: 22px !important; }
html.liquid-glass body .config-group-structured .form-item { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 16px 0 !important; }
html.liquid-glass body .config-group-structured .form-item + .form-item { border-top: 1px solid var(--lg-line) !important; }
html.liquid-glass body .config-subgroup:not(.is-collapsed) .config-subgroup-head {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--lg-line) !important;
}
html.liquid-glass body .config-subgroup-head { transition: none !important; }
html.liquid-glass body .proxy-settings-guide-card { background: var(--lg-reflection) !important; border-color: var(--lg-line) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.liquid-glass body .proxy-settings-steps { background: var(--lg-soft) !important; border-color: var(--lg-line) !important; }
html.liquid-glass body .proxy-settings-block-icon { background: var(--lg-selected); color: var(--lg-accent); border-color: var(--lg-border); box-shadow: var(--lg-highlight); border-radius: 12px; }
html.liquid-glass body :is(.emby-panel-title, .config-subgroup-title) { font-weight: 600 !important; line-height: 1.45; letter-spacing: 0 !important; }
html.liquid-glass body .form-label { font-size: 14px; font-weight: 500 !important; line-height: 1.5; letter-spacing: 0; }
html.liquid-glass body :is(.form-desc, .config-subgroup-desc) { font-size: 13px !important; font-weight: 400 !important; line-height: 1.75 !important; letter-spacing: 0; overflow-wrap: anywhere; }
html.liquid-glass body .utility-tools-header { margin-bottom: 24px; }
html.liquid-glass body :is(.utility-tools-title, .proxy-settings-title, .emby-proxy-title) { font-size: 26px !important; letter-spacing: 0; font-weight: 600 !important; line-height: 1.4; }
html.liquid-glass body #utility-tools-section .utility-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px; }
html.liquid-glass body .utility-tool-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px !important; min-height: 200px; transition: box-shadow .22s var(--lg-ease), transform .22s var(--lg-ease), border-color .22s ease !important; }
html.liquid-glass body .utility-tool-card-label { font-size: 15px !important; font-weight: 600 !important; color: var(--lg-text) !important; margin-top: 14px; }
html.liquid-glass body .utility-tool-card-desc { font-size: 12px !important; font-weight: 400 !important; line-height: 1.8 !important; color: var(--lg-muted) !important; margin: 7px 0 17px; }
html.liquid-glass body .utility-tool-card-icon { width: 42px !important; height: 42px !important; border-radius: 14px !important; border: 1px solid var(--lg-border); box-shadow: var(--lg-highlight); }
html.liquid-glass body .utility-tool-card-icon svg { stroke-width: 1.6; }
html.liquid-glass body .utility-tool-card:nth-child(3n+1) .utility-tool-card-icon { background: linear-gradient(145deg, rgba(170,160,244,.22), rgba(170,160,244,.04)) !important; color: #6860b5 !important; }
html.liquid-glass body .utility-tool-card:nth-child(3n+2) .utility-tool-card-icon { background: linear-gradient(145deg, rgba(65,190,186,.22), rgba(65,190,186,.04)) !important; color: #137d82 !important; }
html.liquid-glass body .utility-tool-card:nth-child(3n) .utility-tool-card-icon { background: linear-gradient(145deg, rgba(93,164,241,.22), rgba(93,164,241,.04)) !important; color: #2275c1 !important; }
html.liquid-glass[data-theme="dark"] body .utility-tool-card:nth-child(3n+1) .utility-tool-card-icon { color: #cec4ff !important; }
html.liquid-glass[data-theme="dark"] body .utility-tool-card:nth-child(3n+2) .utility-tool-card-icon { color: #9de4df !important; }
html.liquid-glass[data-theme="dark"] body .utility-tool-card:nth-child(3n) .utility-tool-card-icon { color: #b1d9ff !important; }
html.liquid-glass body .utility-tool-card::before { content: ''; position: absolute; top: 18px; right: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--lg-border); box-shadow: 0 0 12px rgba(176,218,255,.25); pointer-events: none; }
html.liquid-glass body .utility-tool-card-meta { margin-top: auto; padding: 0; background: transparent !important; color: var(--lg-accent) !important; font-weight: 500 !important; font-size: 11px; }
html.liquid-glass body .utility-tool-card-meta::after { content: '↗'; display: inline-block; margin-left: 7px; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
    html.liquid-glass body .utility-tool-card:hover { transform: translateY(-3px) !important; border-color: var(--lg-border) !important; box-shadow: var(--lg-floating-shadow) !important; }
    html.liquid-glass body .utility-tool-card:hover .utility-tool-card-meta::after { transform: translate(2px, -2px); }
}

/* Consistent input material, with native color-scheme-aware select menus. */
html.liquid-glass body :is(.form-input, .search-input, .login-input, .emby-setup-input, .emby-user-select,
    .proxy-settings-input, .utility-input, .vfp-input, .vfp-select, .vfp-card-input, .vfp-tmdb-input,
    .md-search-input, .md-filter-input, .md-filter-select),
html.liquid-glass body .config-group :is(input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], input[type="email"], select, textarea) {
    color: var(--lg-text) !important;
    background-color: var(--lg-input) !important;
    border-color: var(--lg-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
html.liquid-glass body :is(input, textarea)::placeholder,
html.liquid-glass[data-theme="dark"] body :is(input, textarea)::placeholder { color: var(--lg-muted) !important; opacity: .85 !important; }
html.liquid-glass body select option { color: var(--lg-text); background: var(--lg-canvas); }
html.liquid-glass body :is(.form-input, .search-input, .login-input, .emby-setup-input):focus,
html.liquid-glass body .config-group :is(input, select, textarea):focus {
    border-color: var(--lg-accent) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}
html.liquid-glass body .search-input { height: 38px !important; border-radius: 13px !important; }
html.liquid-glass body :is(#save-btn, .save-btn, .login-btn, .vfp-primary-btn) {
    background: var(--primary-gradient) !important;
    border: 1px solid var(--lg-action-border) !important;
    color: var(--lg-action-text) !important;
    border-radius: 13px !important;
    box-shadow: var(--lg-action-shadow) !important;
    text-shadow: none;
}
html.liquid-glass body .save-btn { height: 38px !important; padding-inline: 18px !important; }
html.liquid-glass body :is(#save-btn, .save-btn, .login-btn, .vfp-primary-btn):hover:not(:disabled) { background: var(--primary-gradient) !important; color: var(--lg-action-text) !important; border-color: var(--lg-accent) !important; filter: none; transform: none; }
html.liquid-glass body :is(#save-btn, .save-btn, .login-btn, .vfp-primary-btn):disabled { opacity: .5 !important; filter: saturate(.4); transform: none !important; cursor: not-allowed; }

/* The selected segment catches light; unselected choices remain quiet. */
html.liquid-glass body :is(.md-tab-bar, .md-tabs, .md-source-tabs, .emby-trend-actions, .md-view-switch) { background: var(--lg-soft); border-color: var(--lg-line); border-radius: 16px; }
html.liquid-glass body :is(.md-tab.active, .md-source-tab.active, .md-filter-chip.active, .emby-trend-btn.active) { background: var(--lg-selected) !important; border-color: var(--lg-border) !important; color: var(--lg-accent) !important; box-shadow: var(--lg-shadow) !important; }
html.liquid-glass body .media-discovery-section .md-page--library :is(.md-library-filter-chip, .md-resource-filter-chip) { color: var(--lg-muted) !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; font-weight: 550; }
html.liquid-glass body .media-discovery-section .md-page--library :is(.md-library-filter-chip.is-active, .md-resource-filter-chip.is-active) { background: var(--lg-selected) !important; color: var(--lg-accent) !important; border-color: var(--lg-border) !important; box-shadow: var(--lg-shadow) !important; }
html.liquid-glass body .md-page { --md-surface: var(--lg-surface); --md-border: var(--lg-line); --md-muted: var(--lg-muted); --md-soft: var(--lg-soft); }
html.liquid-glass body .md-spotlight-compact { border-radius: 26px; border-color: rgba(175, 217, 255, .38); box-shadow: var(--lg-floating-shadow); background: linear-gradient(115deg, #173b69, #15566b); }
html.liquid-glass body .md-spotlight-backdrop { background-image: radial-gradient(ellipse at 80% 20%, rgba(108, 211, 226, .55), transparent 65%), linear-gradient(120deg, #133458, #206b83); }
html.liquid-glass body .md-spotlight-shade { background: linear-gradient(90deg, rgba(13, 38, 65, .82), rgba(13, 45, 67, .14)); }

/* Menus and dialogs are more opaque than content, so text stays readable
   regardless of the page behind them. No size/display override here. */
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, .organize-recognize-panel,
    .md-modal, .md-dialog, .vfp-dialog, .vfp-tools-drawer, .vfp-preview-drawer, .vfp-search-drawer) {
    background: var(--lg-floating-surface) !important;
    color: var(--lg-text);
    border: 1px solid var(--lg-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--lg-floating-shadow) !important;
    backdrop-filter: var(--lg-blur) !important;
    -webkit-backdrop-filter: var(--lg-blur) !important;
}
html.liquid-glass body :is(.search-results, .search-results-dropdown, .config-search-results) { background: var(--lg-elevated) !important; }
html.liquid-glass body .utility-modal-header { background: var(--lg-reflection) !important; border-bottom-color: var(--lg-line) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.liquid-glass body .utility-modal-title { font-weight: 600 !important; color: var(--lg-text) !important; }
html.liquid-glass body .utility-modal-subtitle { color: var(--lg-muted) !important; font-size: 12px !important; line-height: 1.75 !important; }
html.liquid-glass body .utility-modal-close { border-radius: 50% !important; border-color: var(--lg-border) !important; background: var(--lg-soft) !important; color: var(--lg-muted) !important; box-shadow: var(--lg-highlight) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.liquid-glass body .utility-modal-close:hover { color: var(--lg-text) !important; background: var(--lg-selected) !important; transform: none !important; }
html.liquid-glass body .utility-modal .utility-ai-card { background: transparent !important; border-color: var(--lg-line) !important; box-shadow: none !important; }
html.liquid-glass body :is(.toast, .vfp-toast) { background: var(--lg-elevated); color: var(--lg-text); border: 1px solid var(--lg-border); border-radius: 16px; box-shadow: var(--lg-floating-shadow); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); }
html.liquid-glass body .overlay { background: rgba(16, 31, 53, .32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html.liquid-glass body .restart-status { color: var(--lg-muted) !important; }
html.liquid-glass body .restart-cancel-btn { color: var(--lg-text) !important; background: var(--lg-input) !important; border-color: var(--lg-line) !important; }
html.liquid-glass body .app-load-state { width: min(100%, 520px); margin: clamp(24px, 8vh, 100px) auto; padding: 36px; border-radius: 28px; border: 1px solid var(--lg-border); background: var(--lg-surface); box-shadow: var(--lg-shadow); text-align: center; }
html.liquid-glass body .app-load-icon { margin-bottom: 18px; color: var(--lg-accent); }
html.liquid-glass body .app-load-icon svg { width: 32px; height: 32px; }
html.liquid-glass body .app-load-title { font-size: 1.15rem; font-weight: 650; margin-bottom: 12px; }
html.liquid-glass body .app-load-description { color: var(--lg-muted); font-size: .85rem; line-height: 1.8; overflow-wrap: anywhere; }
html.liquid-glass body .app-load-retry { margin-top: 22px; padding: 12px 22px; border-radius: 14px; border: 1px solid var(--lg-border); background: var(--lg-selected); color: var(--lg-accent); font-weight: 600; cursor: pointer; }
html.liquid-glass body .app-load-state[data-state="loading"] .app-load-icon { animation: lg-loading-breathe 1.6s ease-in-out infinite; }
@keyframes lg-loading-breathe { 50% { opacity: .35; } }

/* Focus is visible in both themes, including formerly outline:none controls. */
html.liquid-glass body :is(button, a, input, select, textarea, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid var(--lg-accent) !important;
    outline-offset: 3px !important;
}
html.liquid-glass body #main-content:focus-visible { outline-offset: -4px !important; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 100000; padding: 12px 18px; border-radius: 14px; background: var(--lg-elevated); color: var(--lg-accent); box-shadow: var(--lg-floating-shadow); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

@media (max-width: 1100px) and (min-width: 769px) {
    html.liquid-glass body .sidebar { width: 220px !important; margin-left: 12px; }
    html.liquid-glass body .top-bar { margin-inline: 16px; padding-inline: 16px !important; }
    html.liquid-glass body .content-area { padding: 20px 16px 36px !important; }
}
@media (max-width: 768px) {
    html.liquid-glass body { --lg-radius: 20px; }
    html.liquid-glass body .top-bar { border-radius: 0 0 20px 20px; border-top: 0 !important; }
    html.liquid-glass body .sidebar { border-radius: 0 26px 26px 0; max-width: calc(100vw - 48px); }
    html.liquid-glass body .global-alert-strip { margin-inline: 14px; }
    html.liquid-glass body .global-alert-strip.visible { margin-top: 14px; }
    html.liquid-glass body .global-alert-banner { padding: 12px 14px; gap: 9px; }
    html.liquid-glass body .global-alert-banner-desc { font-size: .72rem; }
    html.liquid-glass body .sidebar .nav-item { min-height: 44px; }
    html.liquid-glass body .sidebar .nav-category-btn { min-height: 40px; }
    html.liquid-glass body .sidebar-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
    html.liquid-glass body .sidebar-footer :is(.theme-toggle-btn, .logout-btn) { height: 44px !important; }
    html.liquid-glass body .content-area:not(.log-viewer-active) { padding: 18px 14px calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
    html.liquid-glass body .emby-dashboard-head { padding: 2px 4px !important; }
    html.liquid-glass body .emby-dashboard-actions { flex-wrap: wrap; gap: 8px; }
    html.liquid-glass body .emby-metrics-grid { gap: 12px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html.liquid-glass body .emby-metric-card { padding: 18px !important; }
    html.liquid-glass body .emby-metric-value { font-size: 1.7rem !important; }
    html.liquid-glass body .emby-panel { padding: 18px !important; }
    html.liquid-glass body .mobile-dock-card {
        padding: 6px !important;
        background: var(--lg-panel-surface) !important;
        border: 1px solid var(--lg-border) !important;
        box-shadow: var(--lg-floating-shadow) !important;
        backdrop-filter: var(--lg-blur) !important;
        -webkit-backdrop-filter: var(--lg-blur) !important;
    }
    html.liquid-glass body .mobile-dock-btn { min-height: 52px; color: var(--lg-muted) !important; }
    html.liquid-glass body .mobile-dock-btn.is-active { background: var(--lg-selected) !important; color: var(--lg-accent) !important; box-shadow: var(--lg-shadow) !important; }
    html.liquid-glass body .mobile-dock-btn .dock-icon { color: inherit !important; }
    /* 16px prevents iOS from zooming into controls on focus. */
    html.liquid-glass body :is(.form-input, .search-input, .login-input),
    html.liquid-glass body .config-group :is(input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], input[type="email"], select, textarea) { font-size: 16px !important; }
    /* Keep the existing low-compositing-cost document scroll strategy. */
    html.liquid-glass body.mobile-document-scroll :is(.sidebar, .top-bar, .config-group, .config-subgroup, .emby-panel, .emby-metric-card, .vfp-rule-card) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}
@media (max-width: 1100px) {
    html.liquid-glass body #emby-setup-panel { padding: 26px; }
    html.liquid-glass body #emby-setup-panel .emby-setup-card { gap: 24px; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); }
    html.liquid-glass body .emby-setup-form { padding: 22px; }
    html.liquid-glass body .emby-setup-title { font-size: 32px; }
    html.liquid-glass body .emby-setup-actions { flex-wrap: wrap; }
    html.liquid-glass body #utility-tools-section .utility-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
    html.liquid-glass body .page-heading { flex: 1 1 auto; }
    /* A static image scrolls with the document; svh keeps its size stable while
       the software keyboard opens. Only navigation samples the live backdrop. */
    html.liquid-glass body.mobile-document-scroll {
        background-image: linear-gradient(to bottom, var(--lg-canvas), transparent 16%, transparent 78%, var(--lg-canvas)), var(--lg-wallpaper) !important;
        background-size: 100% 100svh, auto 100svh;
        background-position: 0 0, 65% 0;
        background-repeat: repeat-y;
        background-attachment: scroll;
    }
    html.liquid-glass body.mobile-document-scroll :is(.top-bar, .sidebar.open, .mobile-dock-card) {
        background: var(--lg-panel-surface) !important;
        box-shadow: var(--lg-floating-shadow) !important;
        backdrop-filter: var(--lg-blur) !important;
        -webkit-backdrop-filter: var(--lg-blur) !important;
    }
    html.liquid-glass body.mobile-document-scroll .config-group { background: var(--lg-panel-surface) !important; }
    html.liquid-glass body.mobile-document-scroll .config-group .config-subgroup { background: var(--lg-panel-surface) !important; }
    html.liquid-glass body.mobile-document-scroll .config-group .form-item { background: transparent !important; }
    html.liquid-glass body.mobile-document-scroll .config-group.config-group-structured { background: transparent !important; }
    html.liquid-glass body.mobile-document-scroll .top-bar.mobile-input-active {
        background: var(--lg-elevated) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html.liquid-glass body.mobile-document-scroll .utility-modal {
        background: var(--lg-floating-surface) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html.liquid-glass.is-standalone-ios body {
        background-image: var(--lg-wallpaper) !important;
        background-size: auto 100svh;
        background-position: 65% 0;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }
    html.liquid-glass.is-standalone-ios body .top-bar { background: var(--lg-panel-surface) !important; }
    html.liquid-glass.is-standalone-ios body .top-bar.mobile-input-active { background: var(--lg-elevated) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    html.liquid-glass body :is(.page-eyebrow, .top-bar-context, .search-shortcut) { display: none !important; }
    html.liquid-glass body .top-bar .page-title { margin: 0; }
    html.liquid-glass body .search-wrapper .search-input { padding-right: 12px !important; }
    html.liquid-glass body #emby-setup-panel { padding: 22px; }
    html.liquid-glass body #emby-setup-panel .emby-setup-card { display: block; }
    html.liquid-glass body .emby-setup-intro { display: none; }
    html.liquid-glass body .emby-setup-form { padding: 0; border: 0; background: transparent; box-shadow: none; }
    html.liquid-glass body .emby-dashboard-wrap { gap: 20px !important; }
    html.liquid-glass body .emby-setup-form-heading { margin-bottom: 10px; }
    html.liquid-glass body .emby-setup-label { margin-top: 8px; }
    html.liquid-glass body .emby-setup-actions { margin-top: 12px; gap: 8px; }
    html.liquid-glass body .emby-setup-actions .emby-setup-btn { min-height: 42px; padding: 10px 12px; }
    html.liquid-glass body #emby-setup-clear-btn { min-height: 32px; }
    html.liquid-glass body .emby-proxy-head { padding: 22px !important; gap: 16px; }
    html.liquid-glass body .emby-proxy-actions { width: 100%; }
    html.liquid-glass body .emby-proxy-empty { min-height: 300px; padding: 30px 20px; }
    html.liquid-glass body .emby-proxy-empty h3 { font-size: 18px; }
    html.liquid-glass body .config-group-structured .config-subgroup { padding: 19px !important; }
    html.liquid-glass body #utility-tools-section .utility-tools-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
    html.liquid-glass body .utility-tool-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 5px; align-items: start; min-height: 0; padding: 20px !important; }
    html.liquid-glass body .utility-tool-card::before { content: none; }
    html.liquid-glass body .utility-tool-card-icon { grid-column: 1; grid-row: 1 / 3; }
    html.liquid-glass body .utility-tool-card-label { grid-column: 2; grid-row: 1; margin: 0; font-size: 14px !important; }
    html.liquid-glass body .utility-tool-card-desc { grid-column: 2; grid-row: 2; margin: 0; font-size: 11px !important; }
    html.liquid-glass body .utility-tool-card-meta { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 0 !important; }
    html.liquid-glass body .utility-tool-card-meta::after { content: '›'; font-size: 23px; margin: 0; color: var(--lg-muted); }
    html.liquid-glass body :is(.utility-tools-title, .proxy-settings-title, .emby-proxy-title) { font-size: 22px !important; }
}
/* Dialogs override the document-scroll mode, which otherwise wins over the
   application's scroll lock on phones. No layout change during text input. */
html:root.liquid-glass body.tgto-app.modal-open,
html:root.liquid-glass body.tgto-app.mobile-document-scroll.modal-open {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Respect user preferences and browsers without backdrop-filter. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.liquid-glass, html.liquid-glass[data-theme="dark"] { --lg-floating-surface: var(--lg-elevated); }
    html.liquid-glass { --lg-surface: #f4f8fd; --lg-elevated: #f8fbff; --lg-input: #fff; --lg-soft: #eaf1f9; }
    html.liquid-glass[data-theme="dark"] { --lg-surface: #1c2b40; --lg-elevated: #223249; --lg-input: #142237; --lg-soft: #17263b; }
}
@media (prefers-reduced-transparency: reduce) {
    html.liquid-glass, html.liquid-glass[data-theme="dark"] { --lg-floating-surface: var(--lg-elevated); }
    html.liquid-glass { --lg-surface: #f4f8fd; --lg-elevated: #f8fbff; --lg-input: #fff; --lg-soft: #eaf1f9; --lg-blur: none; }
    html.liquid-glass[data-theme="dark"] { --lg-surface: #1c2b40; --lg-elevated: #223249; --lg-input: #142237; --lg-soft: #17263b; }
}
@media (prefers-reduced-motion: reduce) {
    html.liquid-glass body :is(.sidebar, .nav-item, .utility-tool-card, .utility-modal-close, .form-input, .search-input, .login-input, .emby-setup-input),
    html.liquid-glass body .config-group :is(input, select, textarea) { transition: none !important; }
    html.liquid-glass *, html.liquid-glass *::before, html.liquid-glass *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (forced-colors: active) {
    html.liquid-glass body :is(.nav-item.active, .mobile-dock-btn.is-active, button, input, select, textarea) { border: 1px solid ButtonText !important; }
    html.liquid-glass body .nav-item.active { outline: 2px solid Highlight; outline-offset: -2px; }
}