/* ============================================================
   LIQUID GLASS — optional overlay theme.
   Loads AFTER styles.css. To fully revert the effect, remove the
   <link ... liquid-glass.css> tag from the HTML (or delete this file).
   Black / graphite Apple-style specular glass. No color tint.
   ============================================================ */

:root {
  --lg-tint:    rgba(20, 21, 23, 0.55);
  --lg-sheen:   linear-gradient(180deg,
                  rgba(255,255,255,0.065) 0%,
                  rgba(255,255,255,0.020) 15%,
                  rgba(255,255,255,0.000) 44%);
  --lg-hi:      inset 0 1px 0 0 rgba(255,255,255,0.10);
  --lg-edge:    inset 0 0 0 1px rgba(255,255,255,0.022);
  --lg-shadow:  0 10px 44px rgba(0,0,0,0.50);
  --lg-blur:    blur(30px) saturate(170%);
}

/* ── Shared glass surfaces ──────────────────────────────── */
.safety-shield-card,
.editor-card,
.editor-bottom-card,
.photo-preview-wrap,
.photo-process-card,
.photo-output-wrap,
.video-process-card,
.intensity-panel,
.creation-date-panel,
.mode-bar,
.drop-zone,
.download-bar,
.modal-box {
  background: var(--lg-sheen), var(--lg-tint) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid rgba(255,255,255,0.085);
  box-shadow: var(--lg-hi), var(--lg-edge), var(--lg-shadow);
}

/* Drop zone keeps its dashed look but gains depth */
.drop-zone {
  border-style: dashed;
  border-color: rgba(255,255,255,0.12);
}

/* ── Frosted header bar ─────────────────────────────────── */
.header {
  background: linear-gradient(180deg, rgba(14,14,16,0.74), rgba(8,8,9,0.62)) !important;
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05);
}

/* ── Glass buttons ──────────────────────────────────────── */
.btn-outline {
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02)) !important;
  border-color: rgba(255,255,255,0.13);
  box-shadow: var(--lg-hi);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.btn-outline:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)) !important;
  border-color: rgba(255,255,255,0.22);
}
.btn-primary {
  box-shadow: var(--lg-hi), 0 4px 20px rgba(0,0,0,0.42);
}

/* ── Editor specifics ───────────────────────────────────── */
.editor-tabs   { background: rgba(255,255,255,0.028) !important; }
.editor-canvas-wrap {
  background: var(--lg-sheen), rgba(10,10,11,0.6) !important;
  box-shadow: var(--lg-hi), var(--lg-edge), var(--lg-shadow);
}
.editor-adj-val {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.022)) !important;
  box-shadow: var(--lg-hi);
}
.editor-panel-actions,
.editor-tabs,
.editor-history-row .btn { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── Workspace profile chips ────────────────────────────── */
.workspace-profile-trigger,
.workspace-profiles,
.workspace-profile-option {
  background: var(--lg-sheen), var(--lg-tint) !important;
  box-shadow: var(--lg-hi), var(--lg-shadow);
}

/* ── Segmented / pill containers get an inner edge ──────── */
.segmented,
.fps-page-seg,
.mode-tabs {
  box-shadow: var(--lg-edge), var(--lg-hi);
}

/* ── Toasts as glass ────────────────────────────────────── */
#toastContainer .toast,
.toast {
  background: var(--lg-sheen), rgba(18,18,20,0.72) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--lg-hi), 0 8px 30px rgba(0,0,0,0.5);
}