/* ========================================================================== */
/* === PHOTOCLOUD LIQUID GLASS DESIGN SYSTEM (Kyant0/AndroidLiquidGlass)  === */
/* === Strictly scoped to body.liquid-glass-theme — Zero impact on Theme 1 === */
/* ========================================================================== */

body.liquid-glass-theme {
    --lg-primary: #38BDF8;
    --lg-primary-rgb: 56, 189, 248;
    --lg-secondary: #818CF8;
    --lg-secondary-rgb: 129, 140, 248;
    --lg-glass-color: #E0F2FE;
    --lg-glass-rgb: 224, 242, 254;
    --lg-surface-tone: #0B132B;
    --lg-surface-tone-rgb: 11, 19, 43;
    --lg-border-color: #BAE6FD;
    --lg-border-rgb: 186, 230, 253;
    --lg-icon-color: #E0F2FE;
    --lg-text-color: #F8FAFC;
    --lg-accent-color: #00F5D4;
    --lg-accent-rgb: 0, 245, 212;

    --lg-blur: 28px;
    --lg-saturation: 185%;
    --lg-brightness: 106%;
    --lg-contrast: 108%;
    --lg-surface-alpha: 0.280;
    --lg-elevated-alpha: 0.400;
    --lg-highlight-alpha: 0.416;
    --lg-border-alpha: 0.446;
    --lg-shadow-alpha: 0.476;
    --lg-depth-spread: 38px;
    --lg-gradient-angle: 135deg;
    --lg-refraction-scale: 9.10;
    --lg-corner-radius: 24px;
    --lg-anim-duration: 316ms;

    --lg-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation)) brightness(var(--lg-brightness)) contrast(var(--lg-contrast));

    background-color: var(--lg-surface-tone);
    background-image:
        radial-gradient(circle at 14% 18%, rgba(var(--lg-primary-rgb), 0.28) 0%, transparent 46%),
        radial-gradient(circle at 86% 22%, rgba(var(--lg-secondary-rgb), 0.25) 0%, transparent 48%),
        radial-gradient(circle at 52% 84%, rgba(var(--lg-accent-rgb), 0.18) 0%, transparent 52%),
        linear-gradient(160deg, rgba(var(--lg-surface-tone-rgb), 0.96) 0%, #050814 100%);
    background-attachment: fixed;
    color: var(--lg-text-color);
    transition:
        background-color var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1),
        color var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

body.liquid-glass-theme:not(.dark-mode):not([data-lg-custom-colors="true"]) {
    --lg-surface-tone: #EBF4FF;
    --lg-surface-tone-rgb: 235, 244, 255;
    --lg-text-color: #0B172A;
    --lg-icon-color: #0284C7;
    background-color: #EBF4FF;
    background-image:
        radial-gradient(circle at 14% 18%, rgba(var(--lg-primary-rgb), 0.32) 0%, transparent 48%),
        radial-gradient(circle at 86% 22%, rgba(var(--lg-secondary-rgb), 0.26) 0%, transparent 50%),
        radial-gradient(circle at 50% 85%, rgba(var(--lg-accent-rgb), 0.22) 0%, transparent 54%),
        linear-gradient(160deg, #F0F7FF 0%, #DCEBFA 100%);
}

body.liquid-glass-theme .gallery-container {
    background: transparent;
}

body.liquid-glass-theme h1,
body.liquid-glass-theme h2,
body.liquid-glass-theme h3,
body.liquid-glass-theme .header-title-group h1 {
    color: var(--lg-text-color);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

body.liquid-glass-theme p,
body.liquid-glass-theme #media-count,
body.liquid-glass-theme .group-title {
    color: color-mix(in srgb, var(--lg-text-color) 78%, transparent);
}

/* --- Reusable Optical Glass Surface Mixin Rules --- */
body.liquid-glass-theme .gallery-header,
body.liquid-glass-theme .m3-floating-bar,
body.liquid-glass-theme .m3-selection-dock,
body.liquid-glass-theme .upload-details-card,
body.liquid-glass-theme .m3-modal-card,
body.liquid-glass-theme .auth-card,
body.liquid-glass-theme .scan-status-container,
body.liquid-glass-theme .lg-glass-surface {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), calc(var(--lg-surface-alpha) + var(--lg-highlight-alpha) * 0.38)) 0%,
        rgba(var(--lg-surface-tone-rgb), var(--lg-elevated-alpha)) 58%,
        rgba(var(--lg-primary-rgb), calc(var(--lg-surface-alpha) * 0.65)) 100%
    );
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    box-shadow:
        0 14px var(--lg-depth-spread) -6px rgba(0, 0, 0, var(--lg-shadow-alpha)),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, var(--lg-highlight-alpha)),
        inset 0 -1px 2px 0 rgba(var(--lg-primary-rgb), calc(var(--lg-highlight-alpha) * 0.55));
}

/* --- Top Bar Variants (capsule / floating / crystal) --- */
body.liquid-glass-theme .gallery-header {
    border-bottom: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    transition: all var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

body.liquid-glass-theme[data-lg-nav-style="floating"] .gallery-header {
    margin: 10px auto 4px;
    max-width: 1380px;
    width: calc(100% - 24px);
    border-radius: var(--lg-corner-radius);
}

body.liquid-glass-theme[data-lg-nav-style="crystal"] .gallery-header {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), calc(var(--lg-surface-alpha) * 0.72)) 0%,
        rgba(var(--lg-primary-rgb), calc(var(--lg-surface-alpha) * 0.36)) 100%
    );
    box-shadow:
        0 18px var(--lg-depth-spread) -4px rgba(0, 0, 0, var(--lg-shadow-alpha)),
        inset 0 2px 3px 0 rgba(255, 255, 255, calc(var(--lg-highlight-alpha) * 1.2)),
        0 0 18px rgba(var(--lg-primary-rgb), calc(var(--lg-border-alpha) * 0.35));
}

/* --- Floating Bottom Bar & Capsule Pills --- */
body.liquid-glass-theme .m3-floating-bar {
    border-radius: calc(var(--lg-corner-radius) * 1.45);
    padding: 0 12px;
    gap: 6px;
}

body.liquid-glass-theme .m3-floating-bar .nav-pill {
    color: color-mix(in srgb, var(--lg-text-color) 84%, transparent);
    border-radius: calc(var(--lg-corner-radius) * 1.15);
    border: 1px solid transparent;
    transition: all var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

body.liquid-glass-theme .m3-floating-bar .nav-pill .material-icons {
    color: var(--lg-icon-color);
}

body.liquid-glass-theme .m3-floating-bar .nav-pill:hover {
    background: rgba(var(--lg-glass-rgb), 0.16);
    border-color: rgba(var(--lg-border-rgb), calc(var(--lg-border-alpha) * 0.65));
    color: var(--lg-text-color);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, var(--lg-highlight-alpha));
}

body.liquid-glass-theme .m3-floating-bar .nav-pill.active {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-primary-rgb), 0.42) 0%,
        rgba(var(--lg-secondary-rgb), 0.32) 100%
    );
    color: var(--lg-text-color);
    border-color: rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    box-shadow:
        0 6px 18px rgba(var(--lg-primary-rgb), 0.28),
        inset 0 1.5px 1px rgba(255, 255, 255, var(--lg-highlight-alpha));
}

body.liquid-glass-theme .m3-floating-bar .nav-pill.tonal-cta {
    background: linear-gradient(
        var(--lg-gradient-angle),
        var(--lg-primary) 0%,
        var(--lg-secondary) 100%
    );
    color: #041322;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 8px 22px rgba(var(--lg-primary-rgb), 0.42),
        inset 0 1.5px 2px rgba(255, 255, 255, 0.68);
}

body.liquid-glass-theme .m3-floating-bar .nav-pill.tonal-cta .material-icons {
    color: #041322;
}

/* --- Buttons, Selects, Chips & Dropdowns --- */
body.liquid-glass-theme .btn,
body.liquid-glass-theme .grouping-controls,
body.liquid-glass-theme .lightbox-action-pill,
body.liquid-glass-theme .editor-tool-btn,
body.liquid-glass-theme .doc-tool-btn,
body.liquid-glass-theme .doc-sheet-tab {
    border-radius: var(--lg-corner-radius);
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    transition: all var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

body.liquid-glass-theme .btn.outlined,
body.liquid-glass-theme .grouping-controls,
body.liquid-glass-theme .doc-tool-btn {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), calc(var(--lg-surface-alpha) * 0.85)) 0%,
        rgba(var(--lg-surface-tone-rgb), calc(var(--lg-elevated-alpha) * 0.8)) 100%
    );
    color: var(--lg-text-color);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    box-shadow:
        0 6px 18px rgba(0, 0, 0, calc(var(--lg-shadow-alpha) * 0.5)),
        inset 0 1px 1px rgba(255, 255, 255, var(--lg-highlight-alpha));
}

body.liquid-glass-theme .grouping-controls .material-icons,
body.liquid-glass-theme .btn.outlined .material-icons {
    color: var(--lg-icon-color);
}

body.liquid-glass-theme .btn-like-select {
    color: var(--lg-text-color);
}

body.liquid-glass-theme .btn-like-select option {
    background: #0F172A;
    color: #F8FAFC;
}

body.liquid-glass-theme .btn.primary {
    background: linear-gradient(
        var(--lg-gradient-angle),
        var(--lg-primary) 0%,
        var(--lg-secondary) 100%
    );
    color: #031120;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow:
        0 8px 24px rgba(var(--lg-primary-rgb), 0.38),
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65);
}

body.liquid-glass-theme .btn.danger {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.78), rgba(190, 18, 60, 0.78));
    color: #FFF1F2;
    border: 1px solid rgba(254, 205, 211, 0.45);
    box-shadow:
        0 8px 20px rgba(244, 63, 94, 0.32),
        inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* --- Media Cards & Cloud File Cards --- */
body.liquid-glass-theme .media-card-wrapper {
    border-radius: var(--lg-corner-radius);
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), var(--lg-surface-alpha)) 0%,
        rgba(var(--lg-surface-tone-rgb), var(--lg-elevated-alpha)) 100%
    );
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    box-shadow:
        0 10px calc(var(--lg-depth-spread) * 0.75) -4px rgba(0, 0, 0, var(--lg-shadow-alpha)),
        inset 0 1px 1.5px rgba(255, 255, 255, var(--lg-highlight-alpha));
    padding: 3px;
    transition:
        transform var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1),
        border-color var(--lg-anim-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

body.liquid-glass-theme[data-lg-card-style="prism"] .media-card-wrapper {
    box-shadow:
        0 14px var(--lg-depth-spread) -4px rgba(0, 0, 0, var(--lg-shadow-alpha)),
        0 0 16px rgba(var(--lg-primary-rgb), calc(var(--lg-border-alpha) * 0.32)),
        inset 0 1.5px 2px rgba(255, 255, 255, calc(var(--lg-highlight-alpha) * 1.15));
}

body.liquid-glass-theme .media-card-wrapper:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(var(--lg-primary-rgb), 0.75);
}

body.liquid-glass-theme .media-card {
    border-radius: calc(var(--lg-corner-radius) - 3px);
    background: transparent;
}

/* Specular diagonal sheen over media cards */
body.liquid-glass-theme .media-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(255, 255, 255, calc(var(--lg-highlight-alpha) * 0.42)) 0%,
        transparent 38%,
        transparent 72%,
        rgba(var(--lg-primary-rgb), calc(var(--lg-highlight-alpha) * 0.25)) 100%
    );
    pointer-events: none;
}

body.liquid-glass-theme .cloud-file-preview {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), calc(var(--lg-surface-alpha) * 0.75)) 0%,
        rgba(var(--lg-surface-tone-rgb), calc(var(--lg-elevated-alpha) * 0.85)) 100%
    );
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
}

body.liquid-glass-theme .cloud-file-icon-wrap {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-primary-rgb), 0.32) 0%,
        rgba(var(--lg-secondary-rgb), 0.28) 100%
    );
    color: var(--lg-icon-color);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, var(--lg-highlight-alpha));
}

body.liquid-glass-theme .cloud-file-title {
    color: var(--lg-text-color);
}

body.liquid-glass-theme .cloud-file-sub {
    color: color-mix(in srgb, var(--lg-text-color) 72%, transparent);
}

body.liquid-glass-theme .media-album-badge {
    background: rgba(var(--lg-surface-tone-rgb), 0.68);
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    color: var(--lg-text-color);
}

/* --- Selection State & Marquee --- */
body.liquid-glass-theme .media-card-wrapper.selected .media-card {
    box-shadow:
        0 0 0 3px var(--lg-accent-color),
        0 0 20px rgba(var(--lg-accent-rgb), 0.55);
}

body.liquid-glass-theme .selection-overlay {
    background: radial-gradient(
        circle at center,
        rgba(var(--lg-primary-rgb), 0.18) 0%,
        rgba(var(--lg-accent-rgb), 0.32) 100%
    );
}

body.liquid-glass-theme .selection-marquee {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-primary-rgb), 0.24) 0%,
        rgba(var(--lg-accent-rgb), 0.18) 100%
    );
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 1.5px solid var(--lg-accent-color);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* --- Form Controls: Inputs, Checkboxes, Radios, Sliders, Switches --- */
body.liquid-glass-theme input[type="text"],
body.liquid-glass-theme input[type="password"],
body.liquid-glass-theme input[type="number"],
body.liquid-glass-theme .m3-modal-input-row input,
body.liquid-glass-theme .doc-search-input-wrap,
body.liquid-glass-theme .radio-group {
    background: rgba(var(--lg-surface-tone-rgb), var(--lg-elevated-alpha));
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    color: var(--lg-text-color);
    border-radius: calc(var(--lg-corner-radius) * 0.65);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, calc(var(--lg-highlight-alpha) * 0.5));
}

body.liquid-glass-theme input[type="checkbox"],
body.liquid-glass-theme input[type="radio"],
body.liquid-glass-theme input[type="range"] {
    accent-color: var(--lg-accent-color);
}

/* --- Modals, Lightbox, Photo Editor, Document Viewer, Transfer Center --- */
body.liquid-glass-theme .m3-modal-card,
body.liquid-glass-theme .upload-details-card {
    border-radius: var(--lg-corner-radius);
    color: var(--lg-text-color);
}

body.liquid-glass-theme .upload-gem {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-primary-rgb), 0.36) 0%,
        rgba(var(--lg-secondary-rgb), 0.28) 100%
    );
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    color: var(--lg-icon-color);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, var(--lg-shadow-alpha)),
        inset 0 1px 1.5px rgba(255, 255, 255, var(--lg-highlight-alpha));
}

body.liquid-glass-theme .document-viewer-modal,
body.liquid-glass-theme .photo-editor-modal {
    background:
        radial-gradient(circle at 20% 20%, rgba(var(--lg-primary-rgb), 0.22) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(var(--lg-secondary-rgb), 0.22) 0%, transparent 50%),
        rgba(var(--lg-surface-tone-rgb), 0.92);
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
}

body.liquid-glass-theme .document-viewer-header,
body.liquid-glass-theme .document-viewer-toolbar,
body.liquid-glass-theme .photo-editor-header,
body.liquid-glass-theme .photo-editor-controls {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), var(--lg-surface-alpha)) 0%,
        rgba(var(--lg-surface-tone-rgb), var(--lg-elevated-alpha)) 100%
    );
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border-color: rgba(var(--lg-border-rgb), var(--lg-border-alpha));
}

/* ========================================================================== */
/* === SETTINGS & LIQUID GLASS CUSTOMIZATION STUDIO MODAL (WEB)           === */
/* ========================================================================== */

.lg-settings-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3400;
    background: rgba(4, 8, 18, 0.68);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lg-settings-modal-backdrop.open {
    display: flex;
}

.lg-settings-dialog {
    width: min(920px, 100%);
    max-height: 90dvh;
    background: var(--surface-container-high, #1c1c22);
    color: var(--on-surface, #f4f4f6);
    border-radius: 28px;
    border: 1px solid var(--outline-variant, rgba(255, 255, 255, 0.14));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.liquid-glass-theme .lg-settings-dialog {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), calc(var(--lg-surface-alpha) + 0.12)) 0%,
        rgba(var(--lg-surface-tone-rgb), calc(var(--lg-elevated-alpha) + 0.28)) 65%,
        rgba(var(--lg-primary-rgb), calc(var(--lg-surface-alpha) * 0.55)) 100%
    );
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    border-radius: var(--lg-corner-radius);
    color: var(--lg-text-color);
    box-shadow:
        0 24px var(--lg-depth-spread) rgba(0, 0, 0, var(--lg-shadow-alpha)),
        inset 0 1.5px 2px rgba(255, 255, 255, var(--lg-highlight-alpha));
}

.lg-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.lg-settings-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.lg-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lg-theme-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.lg-theme-choice-card {
    border-radius: 20px;
    padding: 18px;
    border: 2px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.35);
    color: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

.lg-theme-choice-card.active {
    border-color: var(--lg-primary, #38BDF8);
    background: rgba(56, 189, 248, 0.14);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.18);
}

.lg-theme-choice-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
}

.lg-live-preview-stage {
    position: relative;
    border-radius: 22px;
    padding: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 25%, rgba(var(--lg-primary-rgb), 0.55) 0%, transparent 48%),
        radial-gradient(circle at 82% 75%, rgba(var(--lg-secondary-rgb), 0.52) 0%, transparent 52%),
        radial-gradient(circle at 55% 40%, rgba(var(--lg-accent-rgb), 0.36) 0%, transparent 45%),
        linear-gradient(135deg, #070C1F 0%, #111C38 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.lg-live-preview-card {
    position: relative;
    border-radius: var(--lg-corner-radius, 24px);
    padding: 18px 20px;
    background: linear-gradient(
        var(--lg-gradient-angle, 135deg),
        rgba(var(--lg-glass-rgb, 224, 242, 254), calc(var(--lg-surface-alpha, 0.28) + 0.1)) 0%,
        rgba(var(--lg-surface-tone-rgb, 11, 19, 43), var(--lg-elevated-alpha, 0.4)) 100%
    );
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border: 1px solid rgba(var(--lg-border-rgb, 186, 230, 253), var(--lg-border-alpha, 0.45));
    box-shadow:
        0 16px var(--lg-depth-spread, 38px) rgba(0, 0, 0, var(--lg-shadow-alpha, 0.48)),
        inset 0 1.5px 2px rgba(255, 255, 255, var(--lg-highlight-alpha, 0.42));
    color: var(--lg-text-color, #F8FAFC);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lg-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 10px;
}

.lg-preset-btn {
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.4);
    color: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.18s ease;
}

.lg-preset-btn:hover,
.lg-preset-btn.active {
    border-color: var(--lg-primary, #38BDF8);
    background: rgba(56, 189, 248, 0.16);
}

.lg-section-block {
    border-radius: 20px;
    padding: 18px;
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.16);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lg-section-block h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lg-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 18px;
}

.lg-control-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.lg-control-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.lg-colors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 12px;
}

.lg-color-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 12px;
    font-weight: 600;
}

.lg-color-picker-item input[type="color"] {
    width: 32px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.lg-toggles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

.lg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.lg-json-area {
    width: 100%;
    min-height: 84px;
    border-radius: 14px;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    background: rgba(15, 23, 42, 0.55);
    color: #E2E8F0;
    border: 1px solid rgba(148, 163, 184, 0.24);
    resize: vertical;
}

/* --- Settings Cloud Storage Card & Liquid Glass Overrides --- */
.cloud-storage-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.cloud-storage-settings-totals {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cloud-storage-total-pill {
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.32);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

.cloud-storage-total-pill strong {
    font-size: 16px;
    font-weight: 800;
}

.cloud-storage-total-pill.subtle {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.24);
}

.cloud-storage-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 12px;
}

.cloud-storage-cat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.36);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.cloud-storage-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cloud-storage-cat-card.cat-media .cloud-storage-cat-icon {
    background: rgba(56, 189, 248, 0.18);
    color: #38BDF8;
}

.cloud-storage-cat-card.cat-files .cloud-storage-cat-icon {
    background: rgba(16, 185, 129, 0.18);
    color: #10B981;
}

.cloud-storage-cat-card.cat-trash .cloud-storage-cat-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #F59E0B;
}

.cloud-storage-cat-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.cloud-storage-cat-meta strong {
    font-size: 15px;
    font-weight: 800;
}

.cloud-storage-cat-pct {
    font-size: 11px;
    opacity: 0.78;
}

body.liquid-glass-theme .cloud-storage-badge,
body.liquid-glass-theme .cloud-storage-popover,
body.liquid-glass-theme .trash-storage-banner {
    background: linear-gradient(
        var(--lg-gradient-angle),
        rgba(var(--lg-glass-rgb), var(--lg-surface-alpha)) 0%,
        rgba(var(--lg-surface-tone-rgb), var(--lg-elevated-alpha)) 100%
    );
    backdrop-filter: var(--lg-backdrop-filter);
    -webkit-backdrop-filter: var(--lg-backdrop-filter);
    border: 1px solid rgba(var(--lg-border-rgb), var(--lg-border-alpha));
    color: var(--lg-text-color);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, var(--lg-shadow-alpha)),
        inset 0 1px 1.5px rgba(255, 255, 255, var(--lg-highlight-alpha));
}

/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.liquid-glass-theme .gallery-header,
    body.liquid-glass-theme .m3-floating-bar,
    body.liquid-glass-theme .m3-selection-dock,
    body.liquid-glass-theme .upload-details-card,
    body.liquid-glass-theme .m3-modal-card,
    body.liquid-glass-theme .auth-card,
    body.liquid-glass-theme .lg-settings-dialog,
    body.liquid-glass-theme .cloud-storage-popover {
        background: rgba(var(--lg-surface-tone-rgb), 0.94);
    }
}