/* Unified Theme - cross-page light/dark consistency */
:root {
    --u-bg: #eef2f7;
    --u-bg-soft: #f8fafc;
    --u-surface: #ffffff;
    --u-surface-elev: #f8fafc;
    --u-border: rgba(148, 163, 184, 0.42);
    --u-text: #0f172a;
    --u-text-soft: #334155;
    --u-text-muted: #475569;
    --u-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    /* Home page card variables — glass OS values */
    --card-bg: rgba(255, 255, 255, 0.16);
    --card-border: rgba(255, 255, 255, 0.46);
    --card-soft-bg: rgba(255, 255, 255, 0.18);
    --card-soft-2-bg: rgba(255, 255, 255, 0.15);
    --topbar-bg: rgba(255, 255, 255, 0.16);
    --topbar-border: rgba(255, 255, 255, 0.46);
}

html[data-theme="dark"],
body.dark-mode {
    --u-bg: #020617;
    --u-bg-soft: #0f172a;
    --u-surface: #0f172a;
    --u-surface-elev: #1e293b;
    --u-border: rgba(148, 163, 184, 0.48);
    --u-text: #f8fafc;
    --u-text-soft: #e2e8f0;
    --u-text-muted: #cbd5e1;
    --u-shadow: 0 14px 30px rgba(2, 6, 23, 0.45);
    /* Home page card variables — dark glass */
    --card-bg: rgba(15, 23, 42, 0.50);
    --card-border: rgba(255, 255, 255, 0.10);
    --card-soft-bg: rgba(30, 41, 59, 0.50);
    --card-soft-2-bg: rgba(15, 23, 42, 0.45);
    --topbar-bg: rgba(15, 23, 42, 0.48);
    --topbar-border: rgba(255, 255, 255, 0.10);
}

body.viewport-bg,
body.perf-lite {
    background:
        radial-gradient(ellipse 90% 70% at 10% -5%,  rgba(56, 189, 248, 0.26), transparent 60%),
        radial-gradient(ellipse 70% 80% at 95%  5%,  rgba(139, 92, 246, 0.20), transparent 58%),
        radial-gradient(ellipse 60% 55% at 55% 105%, rgba(236, 72, 153, 0.16), transparent 56%),
        #ffffff !important;
    color: var(--u-text);
}

html[data-theme="dark"] body.viewport-bg,
html[data-theme="dark"] body.perf-lite,
body.dark-mode.viewport-bg,
body.dark-mode.perf-lite {
    background:
        radial-gradient(ellipse 90% 70% at 10% -5%,  rgba(56, 189, 248, 0.14), transparent 60%),
        radial-gradient(ellipse 70% 80% at 95%  5%,  rgba(139, 92, 246, 0.12), transparent 58%),
        radial-gradient(ellipse 60% 55% at 55% 105%, rgba(236, 72, 153, 0.09), transparent 56%),
        var(--u-bg) !important;
}

/* Light mode: replace dark mesh ::before with a light pastel version so glass blurs a light surface */
html:not([data-theme="dark"]) body:not(.dark-mode).viewport-bg::before {
    background:
        radial-gradient(ellipse 75% 65% at 15% 10%,  rgba(79, 142, 247, 0.75)  0%, transparent 55%),
        radial-gradient(ellipse 55% 75% at 88%  8%,  rgba(139, 92, 246, 0.62)  0%, transparent 55%),
        radial-gradient(ellipse 65% 55% at 50% 105%, rgba(236, 72, 153, 0.55)  0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 95%  72%, rgba(0, 201, 167, 0.45)   0%, transparent 52%),
        #ffffff;
}

/* Light mode: minimal scrim — barely there, colors dominate */
html:not([data-theme="dark"]) body:not(.dark-mode).viewport-bg::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.18) 100%);
}

/* Home page light mode: keep the mesh but move the base away from pure white */
body.home-dashboard-page.viewport-bg,
body.home-dashboard-page.perf-lite {
    background:
        radial-gradient(ellipse 92% 72% at 10% -5%, rgba(56, 189, 248, 0.32), transparent 58%),
        radial-gradient(ellipse 74% 82% at 95% 5%, rgba(139, 92, 246, 0.24), transparent 56%),
        radial-gradient(ellipse 64% 58% at 55% 105%, rgba(236, 72, 153, 0.18), transparent 54%),
        #dbeafe !important;
}

html:not([data-theme="dark"]) body.home-dashboard-page:not(.dark-mode).viewport-bg::before {
    background:
        radial-gradient(ellipse 80% 68% at 14% 10%, rgba(96, 165, 250, 0.84) 0%, transparent 52%),
        radial-gradient(ellipse 60% 76% at 88% 8%, rgba(167, 139, 250, 0.58) 0%, transparent 54%),
        radial-gradient(ellipse 68% 56% at 50% 104%, rgba(125, 211, 252, 0.48) 0%, transparent 54%),
        radial-gradient(ellipse 50% 56% at 94% 72%, rgba(59, 130, 246, 0.34) 0%, transparent 50%),
        #dbeafe;
}

html:not([data-theme="dark"]) body.home-dashboard-page:not(.dark-mode).viewport-bg::after {
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.05) 0%, rgba(191, 219, 254, 0.1) 100%);
}

@media (max-width: 820px) {
    html:not([data-theme="dark"]) body:not(.dark-mode).viewport-bg::before {
        background:
            radial-gradient(ellipse 82% 70% at 12% 6%, rgba(56, 189, 248, 0.78) 0%, transparent 54%),
            radial-gradient(ellipse 72% 62% at 86% 4%, rgba(99, 102, 241, 0.62) 0%, transparent 56%),
            radial-gradient(ellipse 64% 70% at 96% 42%, rgba(45, 212, 191, 0.52) 0%, transparent 53%),
            radial-gradient(ellipse 78% 68% at 8% 62%, rgba(14, 165, 233, 0.42) 0%, transparent 58%),
            radial-gradient(ellipse 76% 60% at 50% 108%, rgba(244, 114, 182, 0.56) 0%, transparent 56%),
            radial-gradient(ellipse 58% 54% at 64% 72%, rgba(251, 191, 36, 0.34) 0%, transparent 52%),
            #ffffff;
    }

    html[data-theme="dark"] body.viewport-bg::before,
    body.dark-mode.viewport-bg::before {
        background:
            radial-gradient(ellipse 84% 72% at 10% 0%, rgba(14, 165, 233, 0.36) 0%, transparent 56%),
            radial-gradient(ellipse 70% 68% at 92% 6%, rgba(139, 92, 246, 0.28) 0%, transparent 58%),
            radial-gradient(ellipse 62% 64% at 98% 42%, rgba(20, 184, 166, 0.24) 0%, transparent 54%),
            radial-gradient(ellipse 74% 60% at 12% 68%, rgba(37, 99, 235, 0.24) 0%, transparent 60%),
            radial-gradient(ellipse 78% 58% at 52% 106%, rgba(236, 72, 153, 0.22) 0%, transparent 58%),
            radial-gradient(ellipse 58% 50% at 64% 76%, rgba(245, 158, 11, 0.16) 0%, transparent 54%),
            #0a1024;
    }

    html:not([data-theme="dark"]) body.home-dashboard-page:not(.dark-mode).viewport-bg::before {
        background:
            radial-gradient(ellipse 84% 72% at 12% 6%, rgba(96, 165, 250, 0.82) 0%, transparent 52%),
            radial-gradient(ellipse 74% 64% at 86% 4%, rgba(129, 140, 248, 0.56) 0%, transparent 54%),
            radial-gradient(ellipse 66% 72% at 96% 42%, rgba(125, 211, 252, 0.46) 0%, transparent 51%),
            radial-gradient(ellipse 76% 64% at 12% 68%, rgba(59, 130, 246, 0.34) 0%, transparent 56%),
            radial-gradient(ellipse 78% 62% at 50% 108%, rgba(191, 219, 254, 0.28) 0%, transparent 54%),
            #dbeafe;
    }
}

/* Dark mode sidebar hover: white/60 hover bg turns nav text invisible — use subtle tint instead */
html[data-theme="dark"] aside a:hover,
body.dark-mode aside a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--u-text) !important;
}

/* Core surfaces — solid components keep explicit backgrounds */
.stat-card,
.admin-panel-block,
.admin-glass-shell,
.admin-login-glass-card,
.table-shell,
.offer-lines-panel,
.offer-lines-box,
.items-table-wrap,
.offer-preview-dialog,
.catalog-result,
.picker-page .picker-card,
.auth-card {
    background: var(--u-surface) !important;
    border: 1px solid var(--u-border) !important;
    box-shadow: var(--u-shadow) !important;
}

/* liquidGlass-wrapper stays transparent — glass layers handle the surface */
.liquidGlass-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="dark"] .liquidGlass-wrapper,
body.dark-mode .liquidGlass-wrapper {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* Typography normalization */
.text-slate-900,
.text-slate-800,
.text-slate-700,
.liquidGlass-text {
    color: var(--u-text) !important;
}

.text-slate-600,
.text-slate-500,
.text-slate-400 {
    color: var(--u-text-muted) !important;
}

html[data-theme="dark"] .text-blue-700,
body.dark-mode .text-blue-700 { color: #bfdbfe !important; }
html[data-theme="dark"] .text-blue-600,
body.dark-mode .text-blue-600 { color: #93c5fd !important; }
html[data-theme="dark"] .text-violet-600,
body.dark-mode .text-violet-600 { color: #c4b5fd !important; }
html[data-theme="dark"] .text-emerald-600,
body.dark-mode .text-emerald-600 { color: #6ee7b7 !important; }
html[data-theme="dark"] .text-red-500,
body.dark-mode .text-red-500 { color: #fca5a5 !important; }
html[data-theme="dark"] .text-amber-600,
body.dark-mode .text-amber-600 { color: #fcd34d !important; }

/* Table consistency */
table thead th {
    background: var(--u-surface-elev);
    color: var(--u-text-soft) !important;
}

table tbody tr:hover {
    background: color-mix(in srgb, var(--u-surface-elev) 65%, transparent) !important;
}

/* Inputs and editors */
input,
select,
textarea,
.glass-input,
.settings-input,
.prompt-editor {
    background: var(--u-surface-elev) !important;
    color: var(--u-text) !important;
    border-color: var(--u-border) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--u-text-muted) !important;
}

/* ============================================================
   BUTTON SYSTEM — Glass OS
   Usage: class="btn btn-primary"  /  btn-danger  /  btn-success  /  btn-ghost  /  btn-warning
   Size modifiers: btn-sm  /  btn-lg  /  btn-icon (square)
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s ease,
        border-color 0.15s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.5);
    outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary — blue */
.btn-primary {
    background: rgba(37, 99, 235, 0.88);
    color: #fff;
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover {
    background: rgba(29, 78, 216, 0.95);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38);
    color: #fff;
}

/* Danger — red */
.btn-danger {
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.24), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-danger:hover {
    background: rgba(185, 28, 28, 0.95);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.34);
    color: #fff;
}

/* Success — green */
.btn-success {
    background: rgba(22, 163, 74, 0.85);
    color: #fff;
    border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.24), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-success:hover {
    background: rgba(21, 128, 61, 0.95);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.34);
    color: #fff;
}

/* Ghost — neutral glass (only btn variant that benefits from its own backdrop-filter) */
.btn-ghost {
    background: rgba(255, 255, 255, 0.55);
    color: var(--u-text-soft);
    border-color: rgba(148, 163, 184, 0.38);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    color: var(--u-text);
}

/* Warning — amber */
.btn-warning {
    background: rgba(217, 119, 6, 0.85);
    color: #fff;
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.24), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-warning:hover {
    background: rgba(180, 83, 9, 0.95);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.34);
    color: #fff;
}

/* Sizes */
.btn-sm   { padding: 5px 12px; font-size: 11px; border-radius: 10px; gap: 5px; }
.btn-lg   { padding: 10px 22px; font-size: 14px; border-radius: 14px; gap: 8px; }
.btn-icon { padding: 0; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.btn-sm.btn-icon { width: 28px; height: 28px; border-radius: 8px; }
.btn-block { width: 100%; }

/* Dark mode — ghost only (colored variants look fine as-is) */
html[data-theme="dark"] .btn-ghost,
body.dark-mode .btn-ghost {
    background: rgba(30, 41, 59, 0.65);
    color: var(--u-text-soft);
    border-color: rgba(100, 116, 139, 0.45);
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(248,250,252,0.1);
}
html[data-theme="dark"] .btn-ghost:hover,
body.dark-mode .btn-ghost:hover {
    background: rgba(30, 41, 59, 0.88);
    color: var(--u-text);
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.3);
}

/* Legacy glass-btn — keep working, bridge border only */
.glass-btn,
.auth-btn,
.top-action-btn,
.pagination-btn {
    border-color: var(--u-border) !important;
}

/* Bridge legacy button families to the Glass OS look */
body.viewport-bg .settings-btn,
body.viewport-bg .camera-capture-btn,
body.viewport-bg .badge-btn,
body.viewport-bg .view-switch__btn,
body.viewport-bg .top-action-btn,
body.viewport-bg .pagination-btn,
body.viewport-bg.picker-page #copy,
body.viewport-bg.picker-page #save {
    border: 1px solid rgba(148, 163, 184, 0.46) !important;
    background: rgba(255, 255, 255, 0.52) !important;
    color: var(--u-text-soft) !important;
    box-shadow:
        0 8px 16px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease !important;
}

body.viewport-bg .settings-btn:hover,
body.viewport-bg .camera-capture-btn:hover,
body.viewport-bg .badge-btn:hover,
body.viewport-bg .view-switch__btn:hover,
body.viewport-bg .top-action-btn:hover,
body.viewport-bg .pagination-btn:hover,
body.viewport-bg.picker-page #copy:hover,
body.viewport-bg.picker-page #save:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.58) !important;
    box-shadow:
        0 12px 22px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

body.viewport-bg .settings-btn:active,
body.viewport-bg .camera-capture-btn:active,
body.viewport-bg .badge-btn:active,
body.viewport-bg .view-switch__btn:active,
body.viewport-bg .top-action-btn:active,
body.viewport-bg .pagination-btn:active,
body.viewport-bg.picker-page #copy:active,
body.viewport-bg.picker-page #save:active {
    transform: translateY(0) scale(0.98);
}

/* Keep topbar + pager buttons visually identical (neutral glass) */
body.viewport-bg .topbar-actions .top-action-btn,
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.viewport-bg .pagination-btn,
body.viewport-bg .pagination-btn:hover {
    color: var(--u-text-soft) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
    background: rgba(255, 255, 255, 0.56) !important;
}

body.viewport-bg .pagination-btn--active,
body.viewport-bg .topbar-actions .top-action-btn.upload-primary,
body.viewport-bg .topbar-actions .top-action-btn.upload-primary.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.upload-primary.liquidGlass-wrapper:hover > .liquidGlass-tint {
    color: #ffffff !important;
    border-color: rgba(147, 197, 253, 0.84) !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(29, 78, 216, 0.86)) !important;
}

/* Cancel text-color utility drift on action buttons so all match */
body.viewport-bg .topbar-actions .top-action-btn.text-red-600,
body.viewport-bg .topbar-actions .top-action-btn.text-blue-700,
body.viewport-bg .topbar-actions .top-action-btn.text-orange-500,
body.viewport-bg .topbar-actions .top-action-btn.text-violet-700,
body.viewport-bg .topbar-actions .top-action-btn.text-emerald-700,
body.viewport-bg .settings-btn.text-red-700,
body.viewport-bg .settings-btn.text-blue-700,
body.viewport-bg .settings-btn.text-emerald-700,
body.viewport-bg .settings-btn.text-amber-700,
body.viewport-bg .settings-btn.text-violet-700,
body.viewport-bg .settings-btn.text-cyan-700,
body.viewport-bg .settings-btn.text-slate-700 {
    color: var(--u-text-soft) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
    background: rgba(255, 255, 255, 0.56) !important;
}

body.viewport-bg .settings-btn.text-blue-700,
body.viewport-bg .camera-capture-btn.primary,
body.viewport-bg .badge-btn.active,
body.viewport-bg.picker-page #save {
    color: #ffffff !important;
    border-color: rgba(147, 197, 253, 0.84) !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(29, 78, 216, 0.86)) !important;
    box-shadow:
        0 12px 22px rgba(37, 99, 235, 0.28),
        inset 0 1px 0 rgba(219, 234, 254, 0.38) !important;
}

body.viewport-bg .settings-btn.text-red-700 {
    color: #ffffff !important;
    border-color: rgba(252, 165, 165, 0.82) !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.84)) !important;
}

body.viewport-bg .settings-btn.text-emerald-700,
body.viewport-bg .settings-btn.text-cyan-700,
body.viewport-bg .settings-btn.text-amber-700,
body.viewport-bg .settings-btn.text-violet-700 {
    color: #ffffff !important;
    border-color: rgba(134, 239, 172, 0.78) !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.84)) !important;
}

body.viewport-bg .camera-capture-btn.secondary,
body.viewport-bg .badge-btn.inactive,
body.viewport-bg.picker-page #copy {
    color: var(--u-text-soft) !important;
    background: rgba(255, 255, 255, 0.56) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
}

body.viewport-bg .view-switch[data-view="list"] .view-switch__btn[data-view-target="list"],
body.viewport-bg .view-switch[data-view="chart"] .view-switch__btn[data-view-target="chart"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.84)) !important;
    border-color: rgba(147, 197, 253, 0.8) !important;
    box-shadow:
        0 10px 18px rgba(37, 99, 235, 0.24),
        inset 0 1px 0 rgba(219, 234, 254, 0.36) !important;
}

html[data-theme="dark"] body.viewport-bg .settings-btn,
html[data-theme="dark"] body.viewport-bg .camera-capture-btn,
html[data-theme="dark"] body.viewport-bg .badge-btn,
html[data-theme="dark"] body.viewport-bg .view-switch__btn,
html[data-theme="dark"] body.viewport-bg .top-action-btn,
html[data-theme="dark"] body.viewport-bg .pagination-btn,
html[data-theme="dark"] body.viewport-bg.picker-page #copy,
html[data-theme="dark"] body.viewport-bg.picker-page #save,
body.dark-mode.viewport-bg .settings-btn,
body.dark-mode.viewport-bg .camera-capture-btn,
body.dark-mode.viewport-bg .badge-btn,
body.dark-mode.viewport-bg .view-switch__btn,
body.dark-mode.viewport-bg .top-action-btn,
body.dark-mode.viewport-bg .pagination-btn,
body.dark-mode.viewport-bg.picker-page #copy,
body.dark-mode.viewport-bg.picker-page #save {
    background: rgba(51, 65, 85, 0.72) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.56) !important;
    box-shadow:
        0 10px 20px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(226, 232, 240, 0.22) !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn,
html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint,
html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
html[data-theme="dark"] body.viewport-bg .pagination-btn,
html[data-theme="dark"] body.viewport-bg .pagination-btn:hover,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.dark-mode.viewport-bg .pagination-btn,
body.dark-mode.viewport-bg .pagination-btn:hover {
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.56) !important;
    background: rgba(51, 65, 85, 0.72) !important;
}

/* Pill shape unification — matches language/theme switcher look */
body.viewport-bg .btn,
body.viewport-bg .glass-btn,
body.viewport-bg .auth-btn,
body.viewport-bg .top-action-btn,
body.viewport-bg .pagination-btn,
body.viewport-bg .settings-btn,
body.viewport-bg .camera-capture-btn,
body.viewport-bg .badge-btn,
body.viewport-bg .view-switch__btn,
body.viewport-bg.picker-page #copy,
body.viewport-bg.picker-page #save,
body.viewport-bg [id^="send-evidenta-btn-"] {
    border-radius: 9999px !important;
}

body.viewport-bg .btn-icon,
body.viewport-bg .btn-sm.btn-icon {
    border-radius: 9999px !important;
}

/* Transparency tuning — make all buttons more translucent glass */
body.viewport-bg .btn,
body.viewport-bg .btn-ghost,
body.viewport-bg .btn-primary,
body.viewport-bg .btn-success,
body.viewport-bg .btn-danger,
body.viewport-bg .btn-warning,
body.viewport-bg .settings-btn,
body.viewport-bg .camera-capture-btn,
body.viewport-bg .badge-btn,
body.viewport-bg .top-action-btn,
body.viewport-bg .pagination-btn,
body.viewport-bg .view-switch__btn,
body.viewport-bg.picker-page #copy,
body.viewport-bg.picker-page #save {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(148, 163, 184, 0.44) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 10px 20px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(15, 23, 42, 0.08) !important;
}

body.viewport-bg .btn:hover,
body.viewport-bg .btn-ghost:hover,
body.viewport-bg .btn-primary:hover,
body.viewport-bg .btn-success:hover,
body.viewport-bg .btn-danger:hover,
body.viewport-bg .btn-warning:hover {
    background: rgba(255, 255, 255, 0.32) !important;
}

html[data-theme="dark"] body.viewport-bg .btn,
html[data-theme="dark"] body.viewport-bg .btn-ghost,
html[data-theme="dark"] body.viewport-bg .btn-primary,
html[data-theme="dark"] body.viewport-bg .btn-success,
html[data-theme="dark"] body.viewport-bg .btn-danger,
html[data-theme="dark"] body.viewport-bg .btn-warning,
html[data-theme="dark"] body.viewport-bg .settings-btn,
html[data-theme="dark"] body.viewport-bg .camera-capture-btn,
html[data-theme="dark"] body.viewport-bg .badge-btn,
html[data-theme="dark"] body.viewport-bg .top-action-btn,
html[data-theme="dark"] body.viewport-bg .pagination-btn,
html[data-theme="dark"] body.viewport-bg .view-switch__btn,
html[data-theme="dark"] body.viewport-bg.picker-page #copy,
html[data-theme="dark"] body.viewport-bg.picker-page #save,
body.dark-mode.viewport-bg .btn,
body.dark-mode.viewport-bg .btn-ghost,
body.dark-mode.viewport-bg .btn-primary,
body.dark-mode.viewport-bg .btn-success,
body.dark-mode.viewport-bg .btn-danger,
body.dark-mode.viewport-bg .btn-warning,
body.dark-mode.viewport-bg .settings-btn,
body.dark-mode.viewport-bg .camera-capture-btn,
body.dark-mode.viewport-bg .badge-btn,
body.dark-mode.viewport-bg .top-action-btn,
body.dark-mode.viewport-bg .pagination-btn,
body.dark-mode.viewport-bg .view-switch__btn,
body.dark-mode.viewport-bg.picker-page #copy,
body.dark-mode.viewport-bg.picker-page #save {
    background: rgba(30, 41, 59, 0.38) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
    box-shadow:
        0 10px 22px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(226, 232, 240, 0.3),
        inset 0 -1px 0 rgba(15, 23, 42, 0.5) !important;
}

/* Real transparency fix for liquid buttons: tune inner tint layer */
body.viewport-bg .liquidGlass-wrapper.glass-btn > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn:hover > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.18) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn {
    border-color: rgba(255, 255, 255, 0.58) !important;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn > .liquidGlass-effect {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn > .liquidGlass-shine {
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.16) 44%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn.bg-blue-600 > .liquidGlass-tint {
    background: rgba(37, 99, 235, 0.26) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn.bg-red-600 > .liquidGlass-tint {
    background: rgba(220, 38, 38, 0.22) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn.bg-green-600 > .liquidGlass-tint,
body.viewport-bg .liquidGlass-wrapper.glass-btn.bg-green-500 > .liquidGlass-tint {
    background: rgba(22, 163, 74, 0.24) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn.bg-slate-900 > .liquidGlass-tint {
    background: rgba(15, 23, 42, 0.24) !important;
}

body.viewport-bg .liquidGlass-wrapper.glass-btn.bg-gray-300 > .liquidGlass-tint {
    background: rgba(203, 213, 225, 0.2) !important;
}

html[data-theme="dark"] body.viewport-bg .liquidGlass-wrapper.glass-btn > .liquidGlass-tint,
body.dark-mode.viewport-bg .liquidGlass-wrapper.glass-btn > .liquidGlass-tint {
    background: rgba(51, 65, 85, 0.24) !important;
}

html[data-theme="dark"] body.viewport-bg .liquidGlass-wrapper.glass-btn:hover > .liquidGlass-tint,
body.dark-mode.viewport-bg .liquidGlass-wrapper.glass-btn:hover > .liquidGlass-tint {
    background: rgba(71, 85, 105, 0.32) !important;
}

html[data-theme="dark"] body.viewport-bg .liquidGlass-wrapper.glass-btn,
body.dark-mode.viewport-bg .liquidGlass-wrapper.glass-btn {
    border-color: rgba(226, 232, 240, 0.5) !important;
    box-shadow:
        0 12px 24px rgba(2, 6, 23, 0.42),
        inset 0 1px 0 rgba(226, 232, 240, 0.34) !important;
}

/* High-specificity glass tint overrides (beats liquid-theme-cards ID selectors) */
#login-card .auth-btn--secondary > .liquidGlass-tint,
#admin-login-card .auth-btn--secondary > .liquidGlass-tint,
#admin-shell .glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
#admin-clients-shell .glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.16) !important;
}

#login-card .auth-btn--secondary:hover > .liquidGlass-tint,
#admin-login-card .auth-btn--secondary:hover > .liquidGlass-tint,
#admin-shell .glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
#admin-clients-shell .glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.24) !important;
}

html[data-theme="dark"] #login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint,
html[data-theme="dark"] #admin-login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint,
html[data-theme="dark"] #admin-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint,
html[data-theme="dark"] #admin-clients-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint,
body.dark-mode #login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint,
body.dark-mode #admin-login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint,
body.dark-mode #admin-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint,
body.dark-mode #admin-clients-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500) > .liquidGlass-tint {
    background: rgba(51, 65, 85, 0.24) !important;
}

html[data-theme="dark"] #login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint,
html[data-theme="dark"] #admin-login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint,
html[data-theme="dark"] #admin-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint,
html[data-theme="dark"] #admin-clients-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint,
body.dark-mode #login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint,
body.dark-mode #admin-login-card .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint,
body.dark-mode #admin-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint,
body.dark-mode #admin-clients-shell .glass-btn.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):hover > .liquidGlass-tint {
    background: rgba(71, 85, 105, 0.32) !important;
}

html[data-theme="dark"] #login-card .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-login-card .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-shell .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-clients-shell .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint,
body.dark-mode #login-card .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint,
body.dark-mode #admin-login-card .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint,
body.dark-mode #admin-shell .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint,
body.dark-mode #admin-clients-shell .glass-btn.liquidGlass-wrapper.bg-blue-600 > .liquidGlass-tint {
    background: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme="dark"] #login-card .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-login-card .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-shell .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-clients-shell .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint,
body.dark-mode #login-card .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint,
body.dark-mode #admin-login-card .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint,
body.dark-mode #admin-shell .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint,
body.dark-mode #admin-clients-shell .glass-btn.liquidGlass-wrapper.bg-green-600 > .liquidGlass-tint {
    background: rgba(34, 197, 94, 0.28) !important;
}

html[data-theme="dark"] #login-card .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-login-card .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-shell .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint,
html[data-theme="dark"] #admin-clients-shell .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint,
body.dark-mode #login-card .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint,
body.dark-mode #admin-login-card .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint,
body.dark-mode #admin-shell .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint,
body.dark-mode #admin-clients-shell .glass-btn.liquidGlass-wrapper.bg-red-600 > .liquidGlass-tint {
    background: rgba(239, 68, 68, 0.28) !important;
}

html[data-theme="dark"] #login-card .auth-btn--secondary > .liquidGlass-tint,
html[data-theme="dark"] #admin-login-card .auth-btn--secondary > .liquidGlass-tint,
body.dark-mode #login-card .auth-btn--secondary > .liquidGlass-tint,
body.dark-mode #admin-login-card .auth-btn--secondary > .liquidGlass-tint {
    background: rgba(71, 85, 105, 0.3) !important;
}

/* Homepage topbar buttons: force transparent glass tint */
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.22) !important;
}

body.viewport-bg .topbar-actions .top-action-btn.upload-primary.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(29, 78, 216, 0.36)) !important;
}

body.viewport-bg .topbar-actions .top-action-btn.upload-primary.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.52), rgba(30, 64, 175, 0.44)) !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: rgba(71, 85, 105, 0.24) !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: rgba(100, 116, 139, 0.32) !important;
}

/* Homepage search bar: add subtle transparent glass fields */
body.viewport-bg #searchForm input[name="q"],
body.viewport-bg #searchForm input[type="date"],
body.viewport-bg #searchForm select {
    background: rgba(255, 255, 255, 0.36) !important;
    border-color: rgba(148, 163, 184, 0.42) !important;
    color: var(--u-text) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 6px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] body.viewport-bg #searchForm input[name="q"],
html[data-theme="dark"] body.viewport-bg #searchForm input[type="date"],
html[data-theme="dark"] body.viewport-bg #searchForm select,
body.dark-mode.viewport-bg #searchForm input[name="q"],
body.dark-mode.viewport-bg #searchForm input[type="date"],
body.dark-mode.viewport-bg #searchForm select {
    background: rgba(30, 41, 59, 0.42) !important;
    border-color: rgba(148, 163, 184, 0.46) !important;
    color: #e2e8f0 !important;
}

/* Homepage hard override: topbar button tint transparency */
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-orange-500.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-blue-700.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-red-600.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-violet-700.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-emerald-700.liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:not(.upload-primary) > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-orange-500.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-blue-700.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-red-600.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-violet-700.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.text-emerald-700.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:not(.upload-primary):hover > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint,
html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:not(.upload-primary) > .liquidGlass-tint,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:not(.upload-primary) > .liquidGlass-tint {
    background: rgba(71, 85, 105, 0.2) !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:not(.upload-primary):hover > .liquidGlass-tint,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover > .liquidGlass-tint,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:not(.upload-primary):hover > .liquidGlass-tint {
    background: rgba(100, 116, 139, 0.28) !important;
}

/* Homepage search bar container + fields transparency */
body.viewport-bg #searchForm {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="dark"] body.viewport-bg #searchForm,
body.dark-mode.viewport-bg #searchForm {
    background: rgba(15, 23, 42, 0.24) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
}

/* Theme/language switcher visibility */
.switcher {
    border: 1px solid var(--u-border) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="dark"] .switcher,
body.dark-mode .switcher {
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.36) !important;
}

.switcher[data-lang-switcher] .switcher__lang-text {
    font-weight: 900;
}

/* Admin sidebar variables — glass values override per-page opaque defaults */
:root {
    --sidebar-bg: rgba(255, 255, 255, 0.18);
    --sidebar-border: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"],
body.dark-mode {
    --sidebar-bg: rgba(15, 23, 42, 0.45);
    --sidebar-border: rgba(255, 255, 255, 0.1);
}

/* Admin sidebar — glass, not solid */
aside[style*="--sidebar-bg"] {
    border-right: 1px solid var(--u-border) !important;
}

/* ============================================================
   GLASS OS FORCE — loaded after inline <style> blocks so
   these !important rules beat page-level solid overrides.
   Specificity: body.viewport-bg .x = (0,2,1) > most inline (0,2,0)
   ============================================================ */

/* Wrapper must be transparent — tint layer provides the surface color.
   Double-class trick (.liquidGlass-wrapper.liquidGlass-wrapper) bumps
   specificity to (0,3,1) so this beats inline <style> rules of the same
   specificity while loading order guarantees the win on ties. */
body.viewport-bg .liquidGlass-wrapper.liquidGlass-wrapper {
    background: transparent !important;
}

/* Re-enable glass layers that inline styles may have killed (spec 0,4,1) */
body.viewport-bg .liquidGlass-wrapper.liquidGlass-wrapper > .liquidGlass-effect {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1 !important;
    display: block !important;
}

body.viewport-bg .liquidGlass-wrapper.liquidGlass-wrapper > .liquidGlass-tint {
    display: block !important;
    opacity: 1 !important;
}

body.viewport-bg .liquidGlass-wrapper.liquidGlass-wrapper > .liquidGlass-shine {
    display: block !important;
}

/* Light mode tint */
body.viewport-bg .liquidGlass-wrapper.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):not(.bg-slate-900) > .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Dark mode tint */
html[data-theme="dark"] body.viewport-bg .liquidGlass-wrapper.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):not(.bg-slate-900) > .liquidGlass-tint,
body.dark-mode.viewport-bg .liquidGlass-wrapper.liquidGlass-wrapper:not(.bg-blue-600):not(.bg-red-600):not(.bg-green-600):not(.bg-green-500):not(.bg-slate-900) > .liquidGlass-tint {
    background: rgba(15, 23, 42, 0.55) !important;
}

/* ── Dashboard stat cards (no liquidGlass stack, direct backdrop-filter) ── */
body.viewport-bg .stat-card {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.46) !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

body.viewport-bg .top-stat-card {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.52) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

html[data-theme="dark"] body.viewport-bg .stat-card,
body.dark-mode.viewport-bg .stat-card {
    background: rgba(15, 23, 42, 0.50) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.26) !important;
}

html[data-theme="dark"] body.viewport-bg .top-stat-card,
body.dark-mode.viewport-bg .top-stat-card {
    background: rgba(15, 23, 42, 0.52) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32) !important;
}

/* ── OCR training zone cards ── */
body.viewport-bg .zone-card {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.44) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
}

body.viewport-bg .zone-card.needs-review {
    background: rgba(254, 215, 170, 0.22) !important;
    border-color: rgba(251, 146, 60, 0.35) !important;
}

body.viewport-bg .zone-card.accepted {
    background: rgba(134, 239, 172, 0.18) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}

html[data-theme="dark"] body.viewport-bg .zone-card,
body.dark-mode.viewport-bg .zone-card {
    background: rgba(15, 23, 42, 0.48) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ── Glass inputs — slightly transparent, readable ── */
body.viewport-bg .glass-input,
body.viewport-bg input.glass-input,
body.viewport-bg select.glass-input,
body.viewport-bg textarea.glass-input {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="dark"] body.viewport-bg .glass-input,
body.dark-mode.viewport-bg .glass-input {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Viewer wrap (OCR zones), settings inputs ── */
body.viewport-bg .viewer-wrap,
body.viewport-bg .settings-input {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.42) !important;
}

html[data-theme="dark"] body.viewport-bg .viewer-wrap,
html[data-theme="dark"] body.viewport-bg .settings-input,
body.dark-mode.viewport-bg .viewer-wrap,
body.dark-mode.viewport-bg .settings-input {
    background: rgba(15, 23, 42, 0.52) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ── Prompt editor textarea ── */
body.viewport-bg .prompt-editor {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.42) !important;
}

html[data-theme="dark"] body.viewport-bg .prompt-editor,
body.dark-mode.viewport-bg .prompt-editor {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Home page sheet cards & topbar ── */
body.viewport-bg .sheet-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--card-border) !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card,
body.dark-mode.viewport-bg .sheet-card {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.viewport-bg [data-liquid-skip="1"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

html[data-theme="dark"] body.viewport-bg [data-liquid-skip="1"],
body.dark-mode.viewport-bg [data-liquid-skip="1"] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.24) !important;
}

/* ── glass-panel on viewport-bg pages (overrides solid bg from solid-surfaces block) ── */
body.viewport-bg .glass-panel {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.48) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

html[data-theme="dark"] body.viewport-bg .glass-panel,
body.dark-mode.viewport-bg .glass-panel {
    background: rgba(15, 23, 42, 0.52) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30) !important;
}

/* FINAL ENFORCE: homepage topbar colored glass buttons + green search */
body.viewport-bg .topbar-actions .top-action-btn.top-action-btn.liquidGlass-wrapper.liquidGlass-wrapper.upload-primary > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(29, 78, 216, 0.28)) !important;
}

body.viewport-bg .topbar-actions .top-action-btn.top-action-btn.liquidGlass-wrapper.liquidGlass-wrapper.text-violet-700 > .liquidGlass-tint {
    background: rgba(167, 139, 250, 0.18) !important;
}

body.viewport-bg .topbar-actions .top-action-btn.top-action-btn.liquidGlass-wrapper.liquidGlass-wrapper.text-emerald-700 > .liquidGlass-tint {
    background: rgba(16, 185, 129, 0.18) !important;
}

body.viewport-bg .topbar-actions .top-action-btn.top-action-btn.liquidGlass-wrapper.liquidGlass-wrapper.text-orange-500 > .liquidGlass-tint {
    background: rgba(251, 146, 60, 0.18) !important;
}

/* ============================================================
   HOMEPAGE FINAL BUTTON COLORS (must stay at file end)
   ============================================================ */

/* Upload button: blue glass */
#uForm .btn.btn-primary.liquidGlass-wrapper {
    color: #eff6ff !important;
}

#uForm .btn.btn-primary.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(29, 78, 216, 0.28)) !important;
}

#uForm .btn.btn-primary.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(30, 64, 175, 0.34)) !important;
}

/* Camera button: violet glass */
.camera-action .btn.btn-ghost.liquidGlass-wrapper {
    color: #5b21b6 !important;
}

.camera-action .btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(147, 112, 219, 0.18)) !important;
}

.camera-action .btn.btn-ghost.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(147, 112, 219, 0.24)) !important;
}

/* Logout button: orange glass */
form[action="/logout"] .btn.btn-ghost.liquidGlass-wrapper {
    color: #c2410c !important;
}

form[action="/logout"] .btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.22), rgba(249, 115, 22, 0.18)) !important;
}

form[action="/logout"] .btn.btn-ghost.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(249, 115, 22, 0.24)) !important;
}

/* Dashboard button: emerald glass */
a[href="/admin/dashboard"].btn.liquidGlass-wrapper {
    color: #047857 !important;
}

a[href="/admin/dashboard"].btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.18)) !important;
}

a[href="/admin/dashboard"].btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.24)) !important;
}

/* OCR Zones button: emerald glass */
a[href="/admin/ocr-zones"].btn.liquidGlass-wrapper {
    color: #047857 !important;
}

a[href="/admin/ocr-zones"].btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.18)) !important;
}

a[href="/admin/ocr-zones"].btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.24)) !important;
}

/* Reset Queue button: red glass */
form[action="/reset_queue"] .btn.btn-danger.liquidGlass-wrapper {
    color: #fef2f2 !important;
}

form[action="/reset_queue"] .btn.btn-danger.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.32), rgba(239, 68, 68, 0.26)) !important;
}

form[action="/reset_queue"] .btn.btn-danger.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.42), rgba(239, 68, 68, 0.34)) !important;
}

/* Search button: explicit green glass */
#searchForm button.btn.btn-primary.liquidGlass-wrapper {
    color: #ecfdf5 !important;
}

#searchForm button.btn.btn-primary.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.32)) !important;
}

#searchForm button.btn.btn-primary.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(4, 120, 87, 0.4)) !important;
}

/* Clear button: glass */
#searchForm a.btn.btn-ghost.liquidGlass-wrapper {
    color: #64748b !important;
}

#searchForm a.btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.18), rgba(71, 85, 105, 0.14)) !important;
}

#searchForm a.btn.btn-ghost.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.26), rgba(71, 85, 105, 0.22)) !important;
}

/* Dark mode variants */
html[data-theme="dark"] #uForm .btn.btn-primary.liquidGlass-wrapper,
body.dark-mode #uForm .btn.btn-primary.liquidGlass-wrapper {
    color: #eff6ff !important;
}

html[data-theme="dark"] #uForm .btn.btn-primary.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode #uForm .btn.btn-primary.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.36), rgba(37, 99, 235, 0.32)) !important;
}

html[data-theme="dark"] .camera-action .btn.btn-ghost.liquidGlass-wrapper,
body.dark-mode .camera-action .btn.btn-ghost.liquidGlass-wrapper {
    color: #c4b5fd !important;
}

html[data-theme="dark"] .camera-action .btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode .camera-action .btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.28), rgba(147, 112, 219, 0.24)) !important;
}

html[data-theme="dark"] form[action="/logout"] .btn.btn-ghost.liquidGlass-wrapper,
body.dark-mode form[action="/logout"] .btn.btn-ghost.liquidGlass-wrapper {
    color: #fdba74 !important;
}

html[data-theme="dark"] form[action="/logout"] .btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode form[action="/logout"] .btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.28), rgba(249, 115, 22, 0.24)) !important;
}

html[data-theme="dark"] a[href="/admin/dashboard"].btn.liquidGlass-wrapper,
body.dark-mode a[href="/admin/dashboard"].btn.liquidGlass-wrapper {
    color: #86efac !important;
}

html[data-theme="dark"] a[href="/admin/dashboard"].btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode a[href="/admin/dashboard"].btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.24)) !important;
}

html[data-theme="dark"] a[href="/admin/ocr-zones"].btn.liquidGlass-wrapper,
body.dark-mode a[href="/admin/ocr-zones"].btn.liquidGlass-wrapper {
    color: #86efac !important;
}

html[data-theme="dark"] a[href="/admin/ocr-zones"].btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode a[href="/admin/ocr-zones"].btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.24)) !important;
}

html[data-theme="dark"] form[action="/reset_queue"] .btn.btn-danger.liquidGlass-wrapper,
body.dark-mode form[action="/reset_queue"] .btn.btn-danger.liquidGlass-wrapper {
    color: #fecaca !important;
}

html[data-theme="dark"] form[action="/reset_queue"] .btn.btn-danger.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode form[action="/reset_queue"] .btn.btn-danger.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.36), rgba(239, 68, 68, 0.32)) !important;
}

html[data-theme="dark"] #searchForm button.btn.btn-primary.liquidGlass-wrapper,
body.dark-mode #searchForm button.btn.btn-primary.liquidGlass-wrapper {
    color: #ecfdf5 !important;
}

html[data-theme="dark"] #searchForm button.btn.btn-primary.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode #searchForm button.btn.btn-primary.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.42), rgba(5, 150, 105, 0.34)) !important;
}

/* ============================================================
   FALLBACK: Direct color rules for ALL topbar glass buttons
   ============================================================ */

/* Blue buttons (upload & search) */
.btn.btn-primary.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.36), rgba(29, 78, 216, 0.28)) !important;
}

.btn.btn-primary.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.48), rgba(30, 64, 175, 0.36)) !important;
}

/* Ghost buttons (camera, logout, dashboard, ocr, clear) */
.btn.btn-ghost.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.22), rgba(100, 116, 139, 0.18)) !important;
}

.btn.btn-ghost.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.3), rgba(100, 116, 139, 0.26)) !important;
}

/* Specific colors via context selectors */
.camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(147, 112, 219, 0.18)) !important;
}

.camera-action .btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.32), rgba(147, 112, 219, 0.26)) !important;
}

form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.22), rgba(249, 115, 22, 0.18)) !important;
}

form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.32), rgba(249, 115, 22, 0.26)) !important;
}

a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.18)) !important;
}

a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(5, 150, 105, 0.26)) !important;
}

a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.18)) !important;
}

a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(5, 150, 105, 0.26)) !important;
}

#searchForm button.btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.32)) !important;
}

#searchForm button.btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.52), rgba(5, 150, 105, 0.4)) !important;
}

/* Danger button (reset queue) */
.btn.btn-danger.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.32), rgba(239, 68, 68, 0.26)) !important;
}

.btn.btn-danger.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.44), rgba(239, 68, 68, 0.36)) !important;
}

/* Dark mode fallbacks */
html[data-theme="dark"] .btn.btn-primary.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode .btn.btn-primary.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.38), rgba(37, 99, 235, 0.32)) !important;
}

html[data-theme="dark"] .btn.btn-ghost.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode .btn.btn-ghost.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.28), rgba(100, 116, 139, 0.24)) !important;
}

html[data-theme="dark"] .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(147, 112, 219, 0.26)) !important;
}

html[data-theme="dark"] form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(249, 115, 22, 0.26)) !important;
}

html[data-theme="dark"] a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.26)) !important;
}

html[data-theme="dark"] a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.26)) !important;
}

html[data-theme="dark"] #searchForm button.btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode #searchForm button.btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.44), rgba(5, 150, 105, 0.36)) !important;
}

html[data-theme="dark"] .btn.btn-danger.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode .btn.btn-danger.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.38), rgba(239, 68, 68, 0.32)) !important;
}

/* ============================================================
   TOPBAR BUTTON DIRECT COLORS — viewport-bg context
   Specificitate (0,4,1)+ bate generic (0,2,1) de la viewport-bg
   ============================================================ */

body.viewport-bg #uForm .btn.glass-btn {
    background: rgba(37, 99, 235, 0.28) !important;
    color: #dbeafe !important;
}
body.viewport-bg #uForm .btn.glass-btn:hover {
    background: rgba(37, 99, 235, 0.40) !important;
}

body.viewport-bg .camera-action .btn.glass-btn {
    background: rgba(139, 92, 246, 0.22) !important;
    color: #5b21b6 !important;
}
body.viewport-bg .camera-action .btn.glass-btn:hover {
    background: rgba(139, 92, 246, 0.32) !important;
}

body.viewport-bg form[action="/logout"] .btn.glass-btn {
    background: rgba(251, 146, 60, 0.22) !important;
    color: #c2410c !important;
}
body.viewport-bg form[action="/logout"] .btn.glass-btn:hover {
    background: rgba(251, 146, 60, 0.32) !important;
}

body.viewport-bg a[href="/admin/dashboard"].glass-btn,
body.viewport-bg a[href="/admin/ocr-zones"].glass-btn {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #047857 !important;
}
body.viewport-bg a[href="/admin/dashboard"].glass-btn:hover,
body.viewport-bg a[href="/admin/ocr-zones"].glass-btn:hover {
    background: rgba(16, 185, 129, 0.32) !important;
}

body.viewport-bg form[action="/reset_queue"] .btn.glass-btn {
    background: rgba(220, 38, 38, 0.28) !important;
    color: #fef2f2 !important;
}
body.viewport-bg form[action="/reset_queue"] .btn.glass-btn:hover {
    background: rgba(220, 38, 38, 0.40) !important;
}

body.viewport-bg #searchForm button.glass-btn {
    background: rgba(16, 185, 129, 0.28) !important;
    color: #ecfdf5 !important;
}
body.viewport-bg #searchForm button.glass-btn:hover {
    background: rgba(16, 185, 129, 0.40) !important;
}

body.viewport-bg #searchForm a.glass-btn {
    background: rgba(100, 116, 139, 0.18) !important;
    color: #475569 !important;
}
body.viewport-bg #searchForm a.glass-btn:hover {
    background: rgba(100, 116, 139, 0.26) !important;
}

/* Dark mode */
html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn,
body.dark-mode.viewport-bg #uForm .btn.glass-btn {
    background: rgba(59, 130, 246, 0.32) !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn:hover,
body.dark-mode.viewport-bg #uForm .btn.glass-btn:hover {
    background: rgba(59, 130, 246, 0.44) !important;
}

html[data-theme="dark"] body.viewport-bg .camera-action .btn.glass-btn,
body.dark-mode.viewport-bg .camera-action .btn.glass-btn {
    background: rgba(139, 92, 246, 0.28) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] body.viewport-bg form[action="/logout"] .btn.glass-btn,
body.dark-mode.viewport-bg form[action="/logout"] .btn.glass-btn {
    background: rgba(251, 146, 60, 0.28) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] body.viewport-bg a[href="/admin/dashboard"].glass-btn,
html[data-theme="dark"] body.viewport-bg a[href="/admin/ocr-zones"].glass-btn,
body.dark-mode.viewport-bg a[href="/admin/dashboard"].glass-btn,
body.dark-mode.viewport-bg a[href="/admin/ocr-zones"].glass-btn {
    background: rgba(16, 185, 129, 0.28) !important;
    color: #86efac !important;
}

html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .btn.glass-btn,
body.dark-mode.viewport-bg form[action="/reset_queue"] .btn.glass-btn {
    background: rgba(239, 68, 68, 0.32) !important;
    color: #fecaca !important;
}

html[data-theme="dark"] body.viewport-bg #searchForm button.glass-btn,
body.dark-mode.viewport-bg #searchForm button.glass-btn {
    background: rgba(16, 185, 129, 0.34) !important;
    color: #d1fae5 !important;
}

html[data-theme="dark"] body.viewport-bg #searchForm a.glass-btn,
body.dark-mode.viewport-bg #searchForm a.glass-btn {
    background: rgba(100, 116, 139, 0.24) !important;
    color: #94a3b8 !important;
}

/* ============================================================
   TINT LAYER COLORS — viewport-bg topbar buttons
   Targetez .liquidGlass-tint direct cu specificitate > (0,4,1)
   ============================================================ */

/* Upload — albastru */
body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.36), rgba(29, 78, 216, 0.28)) !important;
}
body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.50), rgba(29, 78, 216, 0.40)) !important;
}
body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper i { color: #dbeafe !important; }

/* Camera — violet */
body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.30), rgba(109, 40, 217, 0.22)) !important;
}
body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.44), rgba(109, 40, 217, 0.34)) !important;
}
body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper i { color: #5b21b6 !important; }

/* Logout — portocaliu */
body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.30), rgba(249, 115, 22, 0.22)) !important;
}
body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.44), rgba(249, 115, 22, 0.34)) !important;
}
body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper i { color: #c2410c !important; }

/* Reset Queue — rosu */
body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.34), rgba(220, 38, 38, 0.26)) !important;
}
body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.48), rgba(220, 38, 38, 0.38)) !important;
}
body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper i { color: #fef2f2 !important; }

/* Search — verde */
body.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.40), rgba(5, 150, 105, 0.30)) !important;
}
body.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.54), rgba(5, 150, 105, 0.42)) !important;
}
body.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper i { color: #ecfdf5 !important; }

/* Clear — gri */
body.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.22), rgba(71, 85, 105, 0.16)) !important;
}
body.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.32), rgba(71, 85, 105, 0.26)) !important;
}
body.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper i { color: #475569 !important; }

/* Dark mode tint */
html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.40), rgba(37, 99, 235, 0.32)) !important;
}
html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper i,
body.dark-mode.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.dark-mode.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper i { color: #bfdbfe !important; }

html[data-theme="dark"] body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(109, 40, 217, 0.28)) !important;
}
html[data-theme="dark"] body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper i,
body.dark-mode.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.dark-mode.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper i { color: #c4b5fd !important; }

html[data-theme="dark"] body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.36), rgba(249, 115, 22, 0.28)) !important;
}
html[data-theme="dark"] body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper i,
body.dark-mode.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.dark-mode.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper i { color: #fdba74 !important; }

html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.40), rgba(239, 68, 68, 0.32)) !important;
}
html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper i,
body.dark-mode.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.dark-mode.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper i { color: #fecaca !important; }

html[data-theme="dark"] body.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.46), rgba(5, 150, 105, 0.36)) !important;
}
html[data-theme="dark"] body.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper i,
body.dark-mode.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.dark-mode.viewport-bg #searchForm button.glass-btn.liquidGlass-wrapper i { color: #d1fae5 !important; }

html[data-theme="dark"] body.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.28), rgba(71, 85, 105, 0.22)) !important;
}
html[data-theme="dark"] body.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper i,
body.dark-mode.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper .liquidGlass-text,
body.dark-mode.viewport-bg #searchForm a.glass-btn.liquidGlass-wrapper i { color: #94a3b8 !important; }

/* ============================================================
   TOP-ACTION-BTN fara .btn — targetare directa pe href/action
   ============================================================ */

/* ADAUGĂ FIȘE — albastru */
body.viewport-bg #uForm label.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.36), rgba(29, 78, 216, 0.28)) !important;
}
body.viewport-bg #uForm label.glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.52), rgba(29, 78, 216, 0.42)) !important;
}
html[data-theme="dark"] body.viewport-bg #uForm label.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg #uForm label.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.42), rgba(37, 99, 235, 0.34)) !important;
}

/* DECONECTARE — portocaliu (fara .btn) */
body.viewport-bg form[action="/logout"] .glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.32), rgba(249, 115, 22, 0.24)) !important;
}
body.viewport-bg form[action="/logout"] .glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.48), rgba(249, 115, 22, 0.38)) !important;
}

/* OFERTE — violet */
body.viewport-bg a[href="/offers"].glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.30), rgba(109, 40, 217, 0.22)) !important;
}
body.viewport-bg a[href="/offers"].glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.46), rgba(109, 40, 217, 0.36)) !important;
}

/* RESET COADĂ — rosu */
body.viewport-bg form[action="/reset_queue"] .glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.34), rgba(220, 38, 38, 0.26)) !important;
}
body.viewport-bg form[action="/reset_queue"] .glass-btn.liquidGlass-wrapper:hover > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.50), rgba(220, 38, 38, 0.40)) !important;
}

/* Dark mode */
html[data-theme="dark"] body.viewport-bg form[action="/logout"] .glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg form[action="/logout"] .glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.38), rgba(249, 115, 22, 0.30)) !important;
}
html[data-theme="dark"] body.viewport-bg a[href="/offers"].glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg a[href="/offers"].glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.36), rgba(139, 92, 246, 0.28)) !important;
}
html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg form[action="/reset_queue"] .glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.42), rgba(239, 68, 68, 0.34)) !important;
}

/* Offer view action pills */
body.viewport-bg .offer-view-action.glass-btn.liquidGlass-wrapper {
    color: var(--u-text-soft) !important;
}

body.viewport-bg .offer-view-action.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg .offer-view-action.glass-btn.liquidGlass-wrapper > i {
    color: inherit !important;
}

body.viewport-bg .offer-view-action--list.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.28), rgba(100, 116, 139, 0.2)) !important;
}

body.viewport-bg .offer-view-action--edit.glass-btn.liquidGlass-wrapper {
    color: #1d4ed8 !important;
}

body.viewport-bg .offer-view-action--edit.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(37, 99, 235, 0.2)) !important;
}

body.viewport-bg .offer-view-action--print.glass-btn.liquidGlass-wrapper {
    color: #047857 !important;
}

body.viewport-bg .offer-view-action--print.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(5, 150, 105, 0.2)) !important;
}

body.viewport-bg .offer-view-action--docx.glass-btn.liquidGlass-wrapper {
    color: #4338ca !important;
}

body.viewport-bg .offer-view-action--docx.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(79, 70, 229, 0.2)) !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .offer-view-action.glass-btn.liquidGlass-wrapper {
    border-color: rgba(226, 232, 240, 0.46) !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--list.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .offer-view-action--list.glass-btn.liquidGlass-wrapper {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--list.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .offer-view-action--list.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.3), rgba(100, 116, 139, 0.24)) !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--edit.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .offer-view-action--edit.glass-btn.liquidGlass-wrapper {
    color: #bfdbfe !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--edit.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .offer-view-action--edit.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.34), rgba(37, 99, 235, 0.26)) !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--print.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .offer-view-action--print.glass-btn.liquidGlass-wrapper {
    color: #a7f3d0 !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--print.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .offer-view-action--print.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.34), rgba(5, 150, 105, 0.26)) !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--docx.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .offer-view-action--docx.glass-btn.liquidGlass-wrapper {
    color: #c7d2fe !important;
}

html[data-theme="dark"] body.viewport-bg .offer-view-action--docx.glass-btn.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode.viewport-bg .offer-view-action--docx.glass-btn.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.36), rgba(79, 70, 229, 0.28)) !important;
}

.app-watermark {
    position: fixed;
    right: 16px;
    bottom: 14px;
    z-index: 9998;
    width: auto;
    max-width: min(240px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(31, 41, 55, 0.78);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    display: grid;
    gap: 2px;
    font-size: 10px;
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: 0;
    text-align: right;
    pointer-events: none;
    user-select: none;
    opacity: 0.76;
}

html[data-theme="dark"] .app-watermark,
body.dark-mode .app-watermark {
    border-color: transparent;
    background: transparent;
    color: rgba(203, 213, 225, 0.72);
    box-shadow: none;
}

.app-watermark__line {
    max-width: 100%;
    text-align: right;
    white-space: normal;
}

.app-watermark__line--1 {
    font-size: 10px;
    font-weight: 700;
    color: rgba(17, 24, 39, 0.82);
}

.app-watermark__line--2,
.app-watermark__line--3 {
    font-size: 10px;
    font-weight: 600;
    color: rgba(55, 65, 81, 0.7);
}

html[data-theme="dark"] .app-watermark__line--1,
body.dark-mode .app-watermark__line--1 {
    color: rgba(226, 232, 240, 0.8);
}

html[data-theme="dark"] .app-watermark__line--2,
html[data-theme="dark"] .app-watermark__line--3,
body.dark-mode .app-watermark__line--2,
body.dark-mode .app-watermark__line--3 {
    color: rgba(203, 213, 225, 0.68);
}

@media (max-width: 640px) {
    .app-watermark {
        right: 8px;
        bottom: 8px;
        max-width: min(208px, calc(100vw - 16px));
        padding: 0;
        font-size: 9px;
        gap: 1px;
    }
}

@media print {
    .app-watermark {
        display: none !important;
    }
}

html[data-theme="dark"] #searchForm a.btn.btn-ghost.liquidGlass-wrapper,
body.dark-mode #searchForm a.btn.btn-ghost.liquidGlass-wrapper {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #searchForm a.btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint,
body.dark-mode #searchForm a.btn.btn-ghost.liquidGlass-wrapper > .liquidGlass-tint {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.22), rgba(100, 116, 139, 0.18)) !important;
}

/* ============================================================
   FINAL OVERRIDES FOR MAIN TOPBAR BUTTONS
   Keep at absolute end so wrapped liquidGlass text inherits color.
   ============================================================ */

body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(37, 99, 235, 0.18) !important;
    border-color: rgba(96, 165, 250, 0.58) !important;
    color: #eff6ff !important;
}

body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(167, 139, 250, 0.12) !important;
    border-color: rgba(167, 139, 250, 0.5) !important;
    color: #5b21b6 !important;
}

body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(251, 146, 60, 0.12) !important;
    border-color: rgba(251, 146, 60, 0.5) !important;
    color: #c2410c !important;
}

body.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper,
body.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.52) !important;
    color: #047857 !important;
}

body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(248, 113, 113, 0.56) !important;
    color: #991b1b !important;
}

body.viewport-bg #searchForm button.btn.glass-btn.liquidGlass-wrapper {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.58) !important;
    color: #ecfdf5 !important;
}

body.viewport-bg #searchForm a.btn.glass-btn.liquidGlass-wrapper {
    background: rgba(226, 232, 240, 0.16) !important;
    border-color: rgba(148, 163, 184, 0.48) !important;
    color: #64748b !important;
}

body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > i,
body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > i,
body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > i,
body.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > i,
body.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > i,
body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > i,
body.viewport-bg #searchForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.viewport-bg #searchForm .btn.glass-btn.liquidGlass-wrapper > i {
    color: inherit !important;
}

html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(37, 99, 235, 0.24) !important;
    border-color: rgba(96, 165, 250, 0.62) !important;
    color: #eff6ff !important;
}

html[data-theme="dark"] body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(139, 92, 246, 0.18) !important;
    border-color: rgba(167, 139, 250, 0.54) !important;
    color: #ddd6fe !important;
}

html[data-theme="dark"] body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(249, 115, 22, 0.18) !important;
    border-color: rgba(251, 146, 60, 0.54) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] body.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper,
html[data-theme="dark"] body.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.56) !important;
    color: #a7f3d0 !important;
}

html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(248, 113, 113, 0.58) !important;
    color: #fecaca !important;
}

html[data-theme="dark"] body.viewport-bg #searchForm button.btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg #searchForm button.btn.glass-btn.liquidGlass-wrapper {
    background: rgba(16, 185, 129, 0.24) !important;
    border-color: rgba(52, 211, 153, 0.62) !important;
    color: #ecfdf5 !important;
}

html[data-theme="dark"] body.viewport-bg #searchForm a.btn.glass-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg #searchForm a.btn.glass-btn.liquidGlass-wrapper {
    background: rgba(100, 116, 139, 0.18) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > i,
html[data-theme="dark"] body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > i,
html[data-theme="dark"] body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > i,
html[data-theme="dark"] body.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > i,
html[data-theme="dark"] body.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > i,
html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > i,
html[data-theme="dark"] body.viewport-bg #searchForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
html[data-theme="dark"] body.viewport-bg #searchForm .btn.glass-btn.liquidGlass-wrapper > i,
body.dark-mode.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.dark-mode.viewport-bg #uForm .btn.glass-btn.liquidGlass-wrapper > i,
body.dark-mode.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.dark-mode.viewport-bg .camera-action .btn.glass-btn.liquidGlass-wrapper > i,
body.dark-mode.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.dark-mode.viewport-bg form[action="/logout"] .btn.glass-btn.liquidGlass-wrapper > i,
body.dark-mode.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.dark-mode.viewport-bg a[href="/admin/dashboard"].btn.glass-btn.liquidGlass-wrapper > i,
body.dark-mode.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.dark-mode.viewport-bg a[href="/admin/ocr-zones"].btn.glass-btn.liquidGlass-wrapper > i,
body.dark-mode.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.dark-mode.viewport-bg form[action="/reset_queue"] .btn.glass-btn.liquidGlass-wrapper > i,
body.dark-mode.viewport-bg #searchForm .btn.glass-btn.liquidGlass-wrapper > .liquidGlass-text,
body.dark-mode.viewport-bg #searchForm .btn.glass-btn.liquidGlass-wrapper > i {
    color: inherit !important;
}

/* Hard stop for residual transparency across viewport theme. */
body.viewport-bg .liquidGlass-wrapper,
body.viewport-bg .sheet-card,
body.viewport-bg [data-liquid-skip="1"],
body.viewport-bg .glass-panel,
body.viewport-bg .topbar-chip,
body.viewport-bg .topbar-chip--accent {
    background: #ffffff !important;
}

body.viewport-bg .liquidGlass-wrapper > .liquidGlass-effect,
body.viewport-bg .liquidGlass-wrapper > .liquidGlass-tint,
body.viewport-bg .liquidGlass-wrapper > .liquidGlass-shine {
    display: none !important;
    opacity: 0 !important;
}

html[data-theme="dark"] body.viewport-bg .liquidGlass-wrapper,
html[data-theme="dark"] body.viewport-bg .sheet-card,
html[data-theme="dark"] body.viewport-bg [data-liquid-skip="1"],
html[data-theme="dark"] body.viewport-bg .glass-panel,
html[data-theme="dark"] body.viewport-bg .topbar-chip,
html[data-theme="dark"] body.viewport-bg .topbar-chip--accent,
body.dark-mode.viewport-bg .liquidGlass-wrapper,
body.dark-mode.viewport-bg .sheet-card,
body.dark-mode.viewport-bg [data-liquid-skip="1"],
body.dark-mode.viewport-bg .glass-panel,
body.dark-mode.viewport-bg .topbar-chip,
body.dark-mode.viewport-bg .topbar-chip--accent {
    background: #0f172a !important;
}

/* Expanded card emphasis: intervention type + intervention cost + delete sheet button. */
body.viewport-bg .sheet-card .expand-section .expanded-option-btn.pointer-events-none.inactive {
    opacity: 0.88 !important;
}

body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="instalare"] {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}
body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="reparatie"] {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}
body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="intretinere"] {
    background: #d1fae5 !important;
    border-color: #86efac !important;
    color: #047857 !important;
}

body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="contract"] {
    background: #cffafe !important;
    border-color: #67e8f9 !important;
    color: #0f766e !important;
}
body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="cost"] {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #b45309 !important;
}
body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="garantie"] {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #6d28d9 !important;
}

body.viewport-bg .sheet-card .expand-section .expanded-option-btn.active {
    opacity: 1 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18) !important;
}

body.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
}
body.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn:hover {
    background: #fecaca !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="instalare"],
body.dark-mode.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="instalare"] {
    background: #1e3a8a !important;
    border-color: #60a5fa !important;
    color: #dbeafe !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="reparatie"],
body.dark-mode.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="reparatie"] {
    background: #7f1d1d !important;
    border-color: #f87171 !important;
    color: #fee2e2 !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="intretinere"],
body.dark-mode.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn[data-category="intretinere"] {
    background: #14532d !important;
    border-color: #4ade80 !important;
    color: #dcfce7 !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="contract"],
body.dark-mode.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="contract"] {
    background: #164e63 !important;
    border-color: #22d3ee !important;
    color: #cffafe !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="cost"],
body.dark-mode.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="cost"] {
    background: #78350f !important;
    border-color: #f59e0b !important;
    color: #fef3c7 !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="garantie"],
body.dark-mode.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn[data-category="garantie"] {
    background: #4c1d95 !important;
    border-color: #a78bfa !important;
    color: #ede9fe !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn,
body.dark-mode.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn {
    background: #7f1d1d !important;
    border-color: #f87171 !important;
    color: #fee2e2 !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn:hover,
body.dark-mode.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn:hover {
    background: #991b1b !important;
    border-color: #fca5a5 !important;
    color: #fff1f2 !important;
}

/* Restore clear action colors for homepage topbar buttons (opaque, no glass). */
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

body.viewport-bg .topbar-actions .top-action-btn.upload-primary.liquidGlass-wrapper,
body.viewport-bg .topbar-actions #uForm .top-action-btn.liquidGlass-wrapper {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}

body.viewport-bg .topbar-actions #document-scan-open-btn.top-action-btn.liquidGlass-wrapper {
    background: #ccfbf1 !important;
    border-color: #5eead4 !important;
    color: #0f766e !important;
}

body.viewport-bg .topbar-actions form[action="/logout"] .top-action-btn.liquidGlass-wrapper {
    background: #ffedd5 !important;
    border-color: #fdba74 !important;
    color: #c2410c !important;
}

body.viewport-bg .topbar-actions a[href="/offers"].top-action-btn.liquidGlass-wrapper {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #6d28d9 !important;
}

body.viewport-bg .topbar-actions a[href="/admin/dashboard"].top-action-btn.liquidGlass-wrapper,
body.viewport-bg .topbar-actions a[href="/admin/ocr-zones"].top-action-btn.liquidGlass-wrapper {
    background: #d1fae5 !important;
    border-color: #86efac !important;
    color: #047857 !important;
}

body.viewport-bg .topbar-actions form[action="/reset_queue"] .top-action-btn.liquidGlass-wrapper {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}

body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper:hover {
    filter: brightness(0.97);
}

body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper .liquidGlass-text,
body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper i {
    color: inherit !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.liquidGlass-wrapper {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions .top-action-btn.upload-primary.liquidGlass-wrapper,
html[data-theme="dark"] body.viewport-bg .topbar-actions #uForm .top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions .top-action-btn.upload-primary.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions #uForm .top-action-btn.liquidGlass-wrapper {
    background: #1e3a8a !important;
    border-color: #3b82f6 !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions #document-scan-open-btn.top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions #document-scan-open-btn.top-action-btn.liquidGlass-wrapper {
    background: #134e4a !important;
    border-color: #2dd4bf !important;
    color: #ccfbf1 !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions form[action="/logout"] .top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions form[action="/logout"] .top-action-btn.liquidGlass-wrapper {
    background: #7c2d12 !important;
    border-color: #fb923c !important;
    color: #ffedd5 !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions a[href="/offers"].top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions a[href="/offers"].top-action-btn.liquidGlass-wrapper {
    background: #4c1d95 !important;
    border-color: #a78bfa !important;
    color: #ede9fe !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions a[href="/admin/dashboard"].top-action-btn.liquidGlass-wrapper,
html[data-theme="dark"] body.viewport-bg .topbar-actions a[href="/admin/ocr-zones"].top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions a[href="/admin/dashboard"].top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions a[href="/admin/ocr-zones"].top-action-btn.liquidGlass-wrapper {
    background: #14532d !important;
    border-color: #4ade80 !important;
    color: #dcfce7 !important;
}

html[data-theme="dark"] body.viewport-bg .topbar-actions form[action="/reset_queue"] .top-action-btn.liquidGlass-wrapper,
body.dark-mode.viewport-bg .topbar-actions form[action="/reset_queue"] .top-action-btn.liquidGlass-wrapper {
    background: #7f1d1d !important;
    border-color: #f87171 !important;
    color: #fee2e2 !important;
}

/* Expanded card button palette (final override). */
body.viewport-bg .sheet-card .expand-section .glass-btn {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    color: #334155 !important;
}

body.viewport-bg .sheet-card .expand-section button[id^="create-offer-btn-"] {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #6d28d9 !important;
}

body.viewport-bg .sheet-card .expand-section button[id^="send-evidenta-btn-"] {
    background: #d1fae5 !important;
    border-color: #86efac !important;
    color: #047857 !important;
}

body.viewport-bg .sheet-card .expand-section button[id^="edit-btn-"] {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}

body.viewport-bg .sheet-card .expand-section .edit-actions-expanded button[onclick*="saveEditExpanded"] {
    background: #bbf7d0 !important;
    border-color: #4ade80 !important;
    color: #166534 !important;
}

body.viewport-bg .sheet-card .expand-section .edit-actions-expanded button[onclick*="cancelEditExpanded"] {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
}

body.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}

body.viewport-bg .sheet-card .expand-section button[id^="send-evidenta-btn-"]:disabled,
body.viewport-bg .sheet-card .expand-section button[id^="send-evidenta-btn-"].opacity-50 {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #6b7280 !important;
}

body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="instalare"] {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}
body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="reparatie"] {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}
body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="intretinere"] {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}
body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="contract"] {
    background: #ecfeff !important;
    border-color: #a5f3fc !important;
    color: #0f766e !important;
}
body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="cost"] {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}
body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="garantie"] {
    background: #f5f3ff !important;
    border-color: #ddd6fe !important;
    color: #6d28d9 !important;
}

body.viewport-bg .sheet-card .expand-section .glass-btn:hover,
body.viewport-bg .sheet-card .expand-section .expanded-option-btn:hover {
    filter: brightness(0.97);
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section .glass-btn,
body.dark-mode.viewport-bg .sheet-card .expand-section .glass-btn {
    border-color: #475569 !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section button[id^="create-offer-btn-"],
body.dark-mode.viewport-bg .sheet-card .expand-section button[id^="create-offer-btn-"] {
    background: #4c1d95 !important;
    border-color: #a78bfa !important;
    color: #ede9fe !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section button[id^="send-evidenta-btn-"],
body.dark-mode.viewport-bg .sheet-card .expand-section button[id^="send-evidenta-btn-"] {
    background: #14532d !important;
    border-color: #4ade80 !important;
    color: #dcfce7 !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section button[id^="edit-btn-"],
body.dark-mode.viewport-bg .sheet-card .expand-section button[id^="edit-btn-"] {
    background: #1e3a8a !important;
    border-color: #60a5fa !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section .edit-actions-expanded button[onclick*="saveEditExpanded"],
body.dark-mode.viewport-bg .sheet-card .expand-section .edit-actions-expanded button[onclick*="saveEditExpanded"] {
    background: #166534 !important;
    border-color: #4ade80 !important;
    color: #dcfce7 !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section .edit-actions-expanded button[onclick*="cancelEditExpanded"],
body.dark-mode.viewport-bg .sheet-card .expand-section .edit-actions-expanded button[onclick*="cancelEditExpanded"] {
    background: #334155 !important;
    border-color: #64748b !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn,
body.dark-mode.viewport-bg .sheet-card .expand-section form[action^="/delete/"] .glass-btn {
    background: #7f1d1d !important;
    border-color: #f87171 !important;
    color: #fee2e2 !important;
}

html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="instalare"],
body.dark-mode.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="instalare"] {
    background: #1e3a8a !important;
    border-color: #3b82f6 !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="reparatie"],
body.dark-mode.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="reparatie"] {
    background: #7f1d1d !important;
    border-color: #ef4444 !important;
    color: #fecaca !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="intretinere"],
body.dark-mode.viewport-bg .sheet-card .expand-section #tip-slider .expanded-option-btn.inactive[data-category="intretinere"] {
    background: #14532d !important;
    border-color: #22c55e !important;
    color: #bbf7d0 !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="contract"],
body.dark-mode.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="contract"] {
    background: #164e63 !important;
    border-color: #06b6d4 !important;
    color: #a5f3fc !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="cost"],
body.dark-mode.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="cost"] {
    background: #78350f !important;
    border-color: #f59e0b !important;
    color: #fde68a !important;
}
html[data-theme="dark"] body.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="garantie"],
body.dark-mode.viewport-bg .sheet-card .expand-section #cost-slider .expanded-option-btn.inactive[data-category="garantie"] {
    background: #4c1d95 !important;
    border-color: #8b5cf6 !important;
    color: #ddd6fe !important;
}