/* ==========================================================================
   CloudBox — Glass layer
   Glassmorphism (frosted, translucent surfaces over a soft colour field) combined with
   "liquid glass" (specular rims, glossy fluid controls, springy motion, and, in Chromium,
   a gentle refraction on small floating surfaces).

   Loaded LAST. It only restyles surfaces; layout, spacing and the design tokens come from style.css.
   Everything degrades: no backdrop-filter, "reduce transparency" and "more contrast" all fall back
   to solid surfaces from the original design system.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --glass-blur: 18px;
  --glass-blur-lg: 28px;
  --glass-sat: 175%;
  --glass-bg: color-mix(in srgb, var(--card) 52%, transparent);
  --glass-bg-soft: color-mix(in srgb, var(--card) 36%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--card) 76%, transparent);
  --glass-tint: rgba(255, 255, 255, .5);
  --glass-edge-hi: rgba(255, 255, 255, .95);
  --glass-edge-mid: rgba(255, 255, 255, .55);
  --glass-edge-lo: rgba(255, 255, 255, .20);
  --glass-line: rgba(255, 255, 255, .55);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 60%);
  --glass-shadow: 0 10px 30px rgba(24, 32, 80, .10), 0 2px 6px rgba(24, 32, 80, .06);
  --glass-shadow-lg: 0 24px 60px rgba(24, 32, 80, .18), 0 6px 16px rgba(24, 32, 80, .08);
  --glass-rim: inset 0 1px 0 var(--glass-edge-hi), inset 1px 0 0 var(--glass-edge-mid), inset 0 -1px 0 var(--glass-edge-lo), inset -1px 0 0 var(--glass-edge-lo);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --glass-spot: rgba(255, 255, 255, .34);
  /* colour field behind everything */
  --aurora-a: rgba(79, 110, 247, .52);
  --aurora-b: rgba(168, 85, 247, .42);
  --aurora-c: rgba(14, 165, 233, .40);
  --aurora-d: rgba(236, 72, 153, .26);
}
[data-theme="dark"] {
  --glass-spot: rgba(255, 255, 255, .08);
  --glass-bg: color-mix(in srgb, var(--card) 50%, transparent);
  --glass-bg-soft: color-mix(in srgb, var(--card) 34%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--card) 78%, transparent);
  --glass-tint: rgba(255, 255, 255, .06);
  --glass-edge-hi: rgba(255, 255, 255, .34);
  --glass-edge-mid: rgba(255, 255, 255, .16);
  --glass-edge-lo: rgba(255, 255, 255, .05);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,0) 60%);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .3);
  --glass-shadow-lg: 0 28px 70px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .35);
  --aurora-a: rgba(94, 114, 255, .44);
  --aurora-b: rgba(139, 92, 246, .38);
  --aurora-c: rgba(14, 165, 233, .26);
  --aurora-d: rgba(236, 72, 153, .20);
}
[data-theme="private"] {
  --glass-spot: rgba(226, 196, 255, .09);
  --glass-bg: color-mix(in srgb, var(--card) 50%, transparent);
  --glass-bg-soft: color-mix(in srgb, var(--card) 34%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--card) 78%, transparent);
  --glass-tint: rgba(210, 170, 255, .06);
  --glass-edge-hi: rgba(226, 196, 255, .34);
  --glass-edge-mid: rgba(210, 170, 255, .16);
  --glass-edge-lo: rgba(210, 170, 255, .05);
  --glass-line: rgba(210, 170, 255, .12);
  --glass-sheen: linear-gradient(135deg, rgba(226,196,255,.16) 0%, rgba(226,196,255,.04) 38%, rgba(226,196,255,0) 60%);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --glass-shadow-lg: 0 28px 70px rgba(0, 0, 0, .65), 0 8px 20px rgba(0, 0, 0, .4);
  --aurora-a: rgba(180, 108, 255, .42);
  --aurora-b: rgba(255, 92, 138, .28);
  --aurora-c: rgba(99, 102, 241, .32);
  --aurora-d: rgba(180, 108, 255, .20);
}
[data-theme="ocean"] {
  --aurora-a: rgba(13, 142, 176, .50);
  --aurora-b: rgba(56, 189, 248, .44);
  --aurora-c: rgba(16, 185, 129, .32);
  --aurora-d: rgba(99, 102, 241, .22);
  --glass-shadow: 0 10px 30px rgba(7, 48, 58, .12), 0 2px 6px rgba(7, 48, 58, .06);
  --glass-shadow-lg: 0 24px 60px rgba(7, 48, 58, .20), 0 6px 16px rgba(7, 48, 58, .08);
}
[data-theme="sunset"] {
  --aurora-a: rgba(236, 90, 42, .46);
  --aurora-b: rgba(244, 114, 182, .40);
  --aurora-c: rgba(251, 191, 36, .42);
  --aurora-d: rgba(168, 85, 247, .20);
  --glass-shadow: 0 10px 30px rgba(58, 26, 16, .12), 0 2px 6px rgba(58, 26, 16, .06);
  --glass-shadow-lg: 0 24px 60px rgba(58, 26, 16, .20), 0 6px 16px rgba(58, 26, 16, .08);
}

/* ---------- the colour field the glass sits on ---------- */
body.cb-app, body.cb-sharepage { background: var(--bg); position: relative; }
body.cb-app::before, body.cb-sharepage::before {
  content: "";
  position: fixed;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 12% 10%, var(--aurora-a), transparent 70%),
    radial-gradient(38% 36% at 88% 14%, var(--aurora-b), transparent 70%),
    radial-gradient(46% 40% at 78% 92%, var(--aurora-c), transparent 70%),
    radial-gradient(34% 32% at 8% 86%, var(--aurora-d), transparent 70%);
  animation: cbAurora 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cbAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

/* ---------- glass surfaces ---------- */
.topbar,
.cb-side-foot,
.cb-storage,
.settings-card,
.stat-card,
.action-card,
.cb-linkcard,
.cb-sharecard,
.cb-stabs,
.cb-list,
.file-table,
.cb-up,
.cb-ghost,
.nav-search-results,
.nav-user-dropdown,
.context-menu,
.cb-menu,
.toast,
.auth-card,
.cb-qrbox,
.cb-session,
.cb-pick-list,
.cb-sharelist,
.cb-selbar,
.empty-state {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.topbar {
  background: color-mix(in srgb, var(--card) 62%, transparent);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 -1px 0 var(--glass-edge-lo), 0 6px 24px rgba(24, 32, 80, .05);
}
.cb-storage,
.settings-card,
.stat-card,
.action-card,
.cb-linkcard,
.cb-sharecard,
.cb-card,
.cb-list,
.file-table,
.cb-session,
.cb-sharelist,
.empty-state {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}
.cb-card, .cb-linkcard, .stat-card, .action-card { transition: transform .35s var(--spring), box-shadow .25s, border-color .2s, background .2s; }
.cb-card:hover, .cb-linkcard:hover, .stat-card:hover, .action-card:hover { transform: translateY(-2px); box-shadow: var(--glass-rim), var(--glass-shadow-lg); border-color: var(--glass-line); }
.cb-card.is-sel, .cb-linkcard.is-sel { background: color-mix(in srgb, var(--primary) 16%, var(--glass-bg)); border-color: color-mix(in srgb, var(--primary) 55%, transparent); }
.cb-list { overflow: hidden; border-radius: var(--r-lg); }
.cb-row { background: transparent; border-bottom-color: var(--glass-line); }
.cb-row:hover { background: color-mix(in srgb, var(--card) 55%, transparent); }
.cb-row.is-sel { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.cb-lh { border-bottom-color: var(--glass-line); }
.file-table th { background: color-mix(in srgb, var(--bg) 40%, transparent); }
.file-table th, .file-table td { border-bottom-color: var(--glass-line); }
.file-table tbody tr:hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
.cb-card .cb-thumb.big { background: color-mix(in srgb, var(--bg) 45%, transparent); }
.cb-sharelist, .cb-pick-list { background: var(--glass-bg-soft); }
.cb-sharerow, .cb-pick-item { border-bottom-color: var(--glass-line); }
.cb-sharerow:hover { background: color-mix(in srgb, var(--card) 55%, transparent); }
.cb-session { background: var(--glass-bg-soft); box-shadow: var(--glass-rim); }
.cb-qrbox { background: var(--glass-bg-soft); border-color: var(--glass-line); }
.cb-kv, .cb-actrow { border-bottom-color: var(--glass-line); }

/* grid cards: translucent but not blurred (there can be hundreds, and they are mostly thumbnail anyway) */
.cb-card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* the sidebar itself stays open (no card) so the colour field shows through; its active pill is glass */
.cb-side-link { transition: background .25s, color .2s, box-shadow .25s, transform .3s var(--spring); }
.cb-side-link:hover { background: var(--glass-bg-soft); transform: translateX(2px); }
.cb-side-link.is-active {
  background: linear-gradient(var(--glass-bg), var(--glass-bg)), var(--primary-soft);
  color: var(--primary);
  box-shadow: var(--glass-rim), 0 4px 16px color-mix(in srgb, var(--primary) 18%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
.cb-side-foot { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: var(--glass-line); }
.cb-storage { padding: 12px; border-radius: var(--r-lg); }

/* ---------- floating / elevated layers: stronger glass + liquid sheen ---------- */
.cb-modal,
.nav-user-dropdown,
.nav-search-results,
.context-menu,
.cb-menu,
.cb-up,
.auth-card,
.toast {
  background: var(--glass-sheen), var(--glass-bg-strong);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-rim), var(--glass-shadow-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
}
.toast { color: var(--text); background: var(--glass-sheen), color-mix(in srgb, var(--card) 86%, transparent); border-radius: 999px; padding: 10px 18px; }
.toast.toast-error { background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0)), color-mix(in srgb, var(--danger) 88%, transparent); color: #fff; box-shadow: var(--glass-rim), 0 12px 34px color-mix(in srgb, var(--danger) 35%, transparent); }
.cb-modal-backdrop { background: color-mix(in srgb, #0b0f1d 38%, transparent); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
[data-theme="dark"] .cb-modal-backdrop, [data-theme="private"] .cb-modal-backdrop { background: color-mix(in srgb, #000 45%, transparent); }
.cb-modal { animation: cbGlassIn .45s var(--spring); }
@keyframes cbGlassIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
.cb-modal-head, .cb-modal-foot { border-color: var(--glass-line); }
.cb-menu button:hover, .context-menu button:hover, .cb-menu button:focus-visible { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.nav-search-item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cb-selbar { background: linear-gradient(var(--glass-sheen)), color-mix(in srgb, var(--primary) 14%, var(--glass-bg)); box-shadow: var(--glass-rim), 0 8px 24px color-mix(in srgb, var(--primary) 16%, transparent); }

/* auth screens already have a colour field; the card becomes a glass pane */
.auth-card { border-color: rgba(255, 255, 255, .55); }
[data-theme="dark"] .auth-card, [data-theme="private"] .auth-card { border-color: var(--glass-line); }
.auth-card input { background: color-mix(in srgb, var(--bg) 55%, transparent); }

/* ---------- controls ---------- */
.btn, .cb-menu-btn {
  background: var(--glass-sheen), var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-rim), 0 2px 8px rgba(24, 32, 80, .06);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  transition: transform .3s var(--spring), box-shadow .2s, background .2s, border-color .2s;
}
.btn:hover { background: var(--glass-sheen), color-mix(in srgb, var(--card) 78%, transparent); border-color: var(--glass-line); transform: translateY(-1px); box-shadow: var(--glass-rim), 0 8px 20px rgba(24, 32, 80, .10); }
.btn:active, .btn-primary:active { transform: translateY(0) scale(.97); }
.danger-btn:hover { background: color-mix(in srgb, var(--danger) 12%, var(--glass-bg)); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* primary = liquid, glossy and coloured */
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary-dark));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--primary) 60%, rgba(255,255,255,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.12), 0 8px 22px color-mix(in srgb, var(--primary) 38%, transparent), 0 1px 2px rgba(0,0,0,.12);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  transition: transform .3s var(--spring), box-shadow .2s, filter .2s;
}
.btn-primary:hover { transform: translateY(-1px); filter: saturate(1.1) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.12), 0 12px 28px color-mix(in srgb, var(--primary) 46%, transparent), 0 1px 2px rgba(0,0,0,.12); }
.btn-primary:disabled { filter: grayscale(.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.cb-btn-danger { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 52%), var(--danger); }

/* pointer-follow specular highlight (set by glass.js) */
.btn:hover, .btn-primary:hover, .cb-side-link:hover, .cb-stab:hover, .theme-option:hover, .cb-seg button:hover, .stat-card:hover, .cb-linkcard:hover, .cb-card:hover, .action-card:hover, .cb-theme-dot:hover {
  background-image: radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), var(--glass-spot), transparent 62%);
  background-blend-mode: normal;
}
.btn-primary:hover { background-image: radial-gradient(120px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .5), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 52%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary-dark)); background-blend-mode: normal; }

.icon-btn { transition: background .2s, color .2s, transform .3s var(--spring); }
.icon-btn:hover { background: var(--glass-bg); box-shadow: var(--glass-rim); }
.icon-btn:active { transform: scale(.9); }

/* fields */
.cb-input, .cb-select, .cb-textarea, .nav-search input, .settings-card input[type=text], .settings-card input[type=password], .settings-card input[type=email], .settings-card textarea, .inline-form input[type=text] {
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 3px rgba(24, 32, 80, .08), inset 0 0 0 1px rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cb-input:focus, .cb-select:focus, .cb-textarea:focus, .nav-search input:focus, .auth-card input:focus, .settings-card input:focus {
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: 0 0 0 4px var(--primary-soft), inset 0 1px 2px rgba(24, 32, 80, .05);
}

/* segmented controls, tabs, chips */
.cb-seg, .cb-stabs, .cb-seg-icons, .cb-theme-row {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-rim);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.cb-seg button, .cb-stab, .cb-seg-icons button { transition: background .25s, color .2s, box-shadow .25s, transform .3s var(--spring); }
.cb-seg button.cb-seg-on, .cb-stab.is-on, .cb-seg-icons button.on {
  background: var(--glass-sheen), color-mix(in srgb, var(--card) 86%, transparent);
  color: var(--primary);
  box-shadow: var(--glass-rim), 0 4px 14px color-mix(in srgb, var(--primary) 18%, transparent), 0 1px 3px rgba(24, 32, 80, .12);
}
.cb-seg button.cb-seg-on:active, .cb-stab:active { transform: scale(.96); }
.theme-option { background: var(--glass-bg); border-color: var(--glass-line); box-shadow: var(--glass-rim); transition: transform .3s var(--spring), border-color .2s, background .2s; }
.theme-option.selected { background: linear-gradient(var(--glass-bg), var(--glass-bg)), var(--primary-soft); border-color: var(--primary); box-shadow: var(--glass-rim), 0 6px 20px color-mix(in srgb, var(--primary) 22%, transparent); }
.cb-badge { background: var(--glass-bg); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge-mid); }
.cb-badge.ok, .cb-badge.warn, .cb-badge.bad, .cb-badge.info { backdrop-filter: blur(6px); }

/* switch: liquid thumb */
.cb-switch .track { background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 3px rgba(24,32,80,.15); transition: background .3s, box-shadow .3s; }
.cb-switch .track::after { top: 2px; left: 2px; width: 16px; height: 16px; background: radial-gradient(circle at 35% 30%, #fff 0%, #f3f6ff 55%, #dfe5ff 100%); box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 -1px 2px rgba(0,0,0,.08); transition: transform .4s var(--spring), width .2s; }
.cb-switch input:active + .track::after { width: 21px; }
.cb-switch input:checked + .track { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%), var(--primary); border-color: transparent; box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); }
.cb-switch input:checked + .track::after { transform: translateX(16px); }
.cb-switch input:checked:active + .track::after { transform: translateX(11px); }

/* progress + storage: glossy liquid fills */
.cb-progress, .cb-storage-bar, .upload-progress-bar { background: color-mix(in srgb, var(--border-strong) 55%, transparent); box-shadow: inset 0 1px 2px rgba(24, 32, 80, .14); }
.cb-progress > i, .upload-progress-fill, .cb-storage-bar i {
  background-image: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 60%), linear-gradient(90deg, var(--primary), var(--primary-hover));
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 45%, transparent);
}
.cb-storage-bar i { background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 60%); box-shadow: none; }
.cb-progress.bad > i { background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); background-color: var(--danger); }

/* file-type chips get a glassy gloss */
.cb-ico { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); }
.stat-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }

/* callouts */
.cb-callout { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 var(--glass-edge-mid); }

/* ---------- mobile: the bottom bar becomes a floating liquid-glass dock ---------- */
@media (max-width: 960px) {
  .cb-side { background: var(--glass-sheen), var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat)); border-right: 1px solid var(--glass-line); }
  .cb-side-backdrop { background: color-mix(in srgb, #0b0f1d 40%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .cb-bottom {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px;
    border: 1px solid var(--glass-line);
    border-radius: 26px;
    background: var(--glass-sheen), var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
    box-shadow: var(--glass-rim), var(--glass-shadow-lg);
  }
  .cb-bottom a.is-active { background: color-mix(in srgb, var(--primary) 14%, transparent); box-shadow: var(--glass-rim); }
  .cb-bottom-plus { background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 52%), var(--primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px color-mix(in srgb, var(--primary) 45%, transparent); margin-top: -26px; }
  .cb-main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .cb-up { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast-container { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ---------- preview overlay: dark glass ---------- */
.cb-viewer { background: color-mix(in srgb, #070912 90%, transparent); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.cb-viewer-bar { background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,0)); border-bottom: 1px solid rgba(255,255,255,.08); }
.cb-viewer-tools { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cb-viewer-nav { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: background .2s, transform .3s var(--spring); }
.cb-viewer-nav:hover { background: rgba(255, 255, 255, .22); }

/* ---------- Chromium refraction (enabled by glass.js adding html.cb-refract) ----------
   A tiny ripple is applied on small floating surfaces only, so large areas stay cheap. */
html.cb-refract .toast,
html.cb-refract .cb-bottom,
html.cb-refract .cb-selbar,
html.cb-refract .nav-user-dropdown,
html.cb-refract .context-menu,
html.cb-refract .cb-menu {
  -webkit-backdrop-filter: url(#cb-liquid) blur(14px) saturate(var(--glass-sat));
  backdrop-filter: url(#cb-liquid) blur(14px) saturate(var(--glass-sat));
}

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: var(--card); --glass-bg-soft: var(--card); --glass-bg-strong: var(--card); }
  .topbar { background: var(--card); }
  .cb-modal-backdrop, .cb-side-backdrop { background: rgba(8, 10, 16, .6); }
  .cb-viewer { background: rgba(9, 11, 17, .97); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--card); --glass-bg-soft: var(--card); --glass-bg-strong: var(--card); --glass-sheen: none; }
  body.cb-app::before, body.cb-sharepage::before { display: none; }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .topbar { background: var(--card); }
  .cb-viewer { background: rgba(9, 11, 17, .97); }
}
@media (prefers-contrast: more) {
  :root { --glass-bg: var(--card); --glass-bg-soft: var(--card); --glass-bg-strong: var(--card); --glass-line: var(--border-strong); }
  body.cb-app::before, body.cb-sharepage::before { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  body.cb-app::before, body.cb-sharepage::before { animation: none; }
  .cb-modal { animation: none; }
  .btn, .btn-primary, .cb-card, .cb-linkcard, .stat-card, .cb-side-link, .icon-btn { transition: none; }
}
@media print { body.cb-app::before, body.cb-sharepage::before { display: none; } }

/* ---------- Google sign-in: a frosted pill with the real four-colour G ---------- */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer;
  background: var(--glass-sheen), color-mix(in srgb, #fff 72%, transparent);
  color: #1f2937;
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-rim), 0 2px 10px rgba(24, 32, 80, .08);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  transition: transform .3s var(--spring), box-shadow .2s, background .2s, border-color .2s;
}
.btn-google:hover { background: var(--glass-sheen), color-mix(in srgb, #fff 88%, transparent); transform: translateY(-1px); box-shadow: var(--glass-rim), 0 10px 24px rgba(24, 32, 80, .14); }
.btn-google:active { transform: translateY(0) scale(.98); }
.btn-google:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-theme="dark"] .btn-google, [data-theme="private"] .btn-google { background: var(--glass-sheen), color-mix(in srgb, #fff 9%, transparent); color: #e8eaed; }
[data-theme="dark"] .btn-google:hover, [data-theme="private"] .btn-google:hover { background: var(--glass-sheen), color-mix(in srgb, #fff 15%, transparent); }
.cb-google-block { margin-top: 2px; }
.cb-google-block .oauth-divider { margin: 18px 0 14px; }
.cb-google-link { width: auto; padding: 9px 16px; }
.cb-google-email { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-radius: var(--r-md); border: 1px solid var(--glass-line); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.cb-google-email input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 4px; color: var(--text-soft); cursor: default; }
.cb-google-email .cb-badge { white-space: nowrap; }
.cb-google-linked { display: flex; align-items: center; gap: 12px; }
.cb-google-linked .cb-hint { margin: 2px 0 0; }