/* Tilat: Liquid Glass controls inspired by Vadik Matveev's CodePen reference.
   https://codepen.io/fooontic/pen/KwpRaGr
   Original Tilat implementation: flexible widths, existing app state, reduced motion. */
:root {
  --lg-surface: 242 246 252;
  --lg-highlight: 255 255 255;
  --lg-shadow: 28 45 69;
  --lg-ink: #263449;
  --lg-muted: #617087;
  --lg-accent: #496caa;
  --lg-transmission: .30;
  --lg-rim-opacity: .92;
  --lg-blur: 12px;
  --lg-saturation: 160%;
  --lg-ease: cubic-bezier(.22, .78, .18, 1);
  --lg-shell-shadow:
    inset 0 0 0 1px rgb(var(--lg-highlight) / .30),
    inset 1.5px 2px 1px -1px rgb(var(--lg-highlight) / var(--lg-rim-opacity)),
    inset -1.2px -1.6px 1px -1px rgb(var(--lg-highlight) / .72),
    inset 0 4px 5px -4px rgb(var(--lg-highlight) / .95),
    inset 0 -3px 5px -3px rgb(var(--lg-shadow) / .14),
    0 3px 6px rgb(var(--lg-shadow) / .06),
    0 12px 30px rgb(var(--lg-shadow) / .10);
  --lg-lens-shadow:
    inset 0 0 0 1px rgb(var(--lg-highlight) / .42),
    inset 1.5px 2px 1px -1px rgb(var(--lg-highlight) / .95),
    inset -1.4px -1.8px 1px -1px rgb(var(--lg-highlight) / .75),
    inset 0 -4px 3px -3px rgb(var(--lg-shadow) / .13),
    0 2px 5px rgb(var(--lg-shadow) / .09),
    0 6px 12px rgb(var(--lg-shadow) / .06);
}
body.night {
  --lg-surface: 46 59 79;
  --lg-highlight: 214 235 255;
  --lg-shadow: 2 8 18;
  --lg-ink: #edf3ff;
  --lg-muted: #b4c2d7;
  --lg-accent: #aecbff;
  --lg-transmission: .56;
  --lg-rim-opacity: .48;
  --lg-saturation: 155%;
}
.glass,
body.night .glass,
.header-actions,
dialog {
  color: var(--lg-ink);
  background:
    linear-gradient(145deg, rgb(var(--lg-highlight) / .19), transparent 42%, rgb(var(--lg-highlight) / .055)),
    rgb(var(--lg-surface) / var(--lg-transmission));
  border: 1px solid rgb(var(--lg-highlight) / .32);
  box-shadow: var(--lg-shell-shadow);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  transition: background-color .4s var(--lg-ease), box-shadow .4s var(--lg-ease), color .25s ease;
}
.panel.glass {
  --lg-blur: 16px;
  border-radius: 28px;
  text-shadow: 0 1px rgb(var(--lg-highlight) / .22);
  scrollbar-color: rgb(var(--lg-shadow) / .22) transparent;
}
.topbar,
body.night .topbar {
  background: transparent;
  border: 0;
}
.header-actions {
  --lg-blur: 8px;
  padding: 6px;
  gap: 5px;
  border-radius: 999px;
}
.header-actions button,
.header-actions .avatar {
  min-height: 40px;
  border-radius: 999px;
}
.header-actions .avatar { width: 40px; padding: 0; }
.header-actions #plans { padding-inline: 17px; }
.header-actions .primary {
  background: linear-gradient(165deg, #7396cfe8, #506fa6eb);
  color: #fff;
  border-color: rgb(255 255 255 / .36);
  box-shadow: inset 0 1.5px 1px rgb(255 255 255 / .60), inset 0 -1px 2px #2d456657, 0 3px 9px #36527b24;
}
.header-actions .primary:hover:not(:disabled) { background: linear-gradient(165deg, #82a7e1ed, #5c7fb9f5); }
.header-actions .secondary,
body.night .header-actions .secondary,
.header-actions .avatar {
  background: rgb(var(--lg-highlight) / .13);
  border: 1px solid rgb(var(--lg-highlight) / .19);
  box-shadow: inset 0 1px rgb(var(--lg-highlight) / .70), 0 2px 4px rgb(var(--lg-shadow) / .04);
  color: var(--lg-ink);
}
.header-actions #plans:hover { background: rgb(var(--lg-highlight) / .20); }
.brand .icon { color: var(--lg-accent); }
.breadcrumb,
.workspace-title p { color: var(--lg-muted); }
.view-bar.glass {
  --lg-blur: 6px;
  --lg-transmission: .19;
  border-radius: 999px;
  padding: 7px;
  gap: 7px;
  overflow: visible;
}
body.night .view-bar.glass { --lg-transmission: .37; }
.view-bar > button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 10px;
}
.view-bar .separator { height: 22px; margin-inline: 2px; background: rgb(var(--lg-shadow) / .12); }
body.night .view-bar .separator { background: rgb(var(--lg-highlight) / .18); }
.view-bar button .icon,
.header-actions button .icon,
.liquid-switch button .icon {
  transition: scale .2s var(--lg-ease), color .2s ease;
}
.view-bar button:hover:not(:disabled) .icon,
.header-actions button:hover:not(:disabled) .icon { scale: 1.10; }
.view-bar button:hover:not(:disabled) { color: var(--lg-accent); background: rgb(var(--lg-highlight) / .15); }
/* The moving capsule is a separate layer; labels always stay sharp. */
.segmented.liquid-switch {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgb(var(--lg-highlight) / .20);
  border-radius: 999px;
  padding: 5px;
  gap: 2px;
  background: rgb(var(--lg-shadow) / .045);
  box-shadow: inset 0 1px 3px rgb(var(--lg-shadow) / .075), 0 1px rgb(var(--lg-highlight) / .55);
}
.segmented.liquid-switch > button {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  min-width: 0;
  min-height: 36px;
  padding: 8px 11px;
  font-size: 13px;
  background: transparent;
  color: var(--lg-muted);
  box-shadow: none;
  transition: color .25s ease;
}
.segmented.liquid-switch > button.active,
body.night .segmented.liquid-switch > button.active,
.view-bar .segmented.liquid-switch > button.active {
  color: var(--lg-ink);
  background: transparent !important;
  box-shadow: none;
}
.segmented.liquid-switch > button:hover:not(:disabled) { color: var(--lg-accent); background: transparent; }
.segmented.liquid-switch > button:active:not(:disabled) { transform: none; }
.liquid-thumb {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(var(--thumb-x, 5px), var(--thumb-y, 5px));
  width: var(--thumb-width, 0px);
  height: var(--thumb-height, 36px);
  border-radius: 999px;
  transition: transform .42s var(--lg-ease), width .42s var(--lg-ease), height .2s ease;
}
.liquid-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgb(var(--lg-highlight) / .51), rgb(var(--lg-highlight) / .14) 55%, rgb(var(--lg-highlight) / .23));
  box-shadow: var(--lg-lens-shadow);
  transform-origin: var(--thumb-origin, center);
}
.liquid-switch[data-motion='a'] .liquid-thumb::before { animation: liquid-stretch-a .44s var(--lg-ease); }
.liquid-switch[data-motion='b'] .liquid-thumb::before { animation: liquid-stretch-b .44s var(--lg-ease); }
@keyframes liquid-stretch-a { 0%, 100% { scale: 1 1; } 45% { scale: 1.10 .94; } }
@keyframes liquid-stretch-b { 0%, 100% { scale: 1 1; } 45% { scale: 1.10 .94; } }
.liquid-switch:not([data-ready]) .liquid-thumb { visibility: hidden; transition: none; }
.view-bar .segmented.liquid-switch { border-color: transparent; background: transparent; box-shadow: none; padding: 0; }
.view-bar .liquid-switch > button { min-height: 40px; padding-inline: 12px; }
.view-bar .light-switch > button { width: 40px; min-width: 40px; padding-inline: 10px; }
.liquid-switch > button:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 3px; }
/* Restrict SVG refraction to small controls, with a pure CSS fallback. */
@supports (backdrop-filter: url('#tilat-liquid-refraction')) {
  .liquid-refraction .view-bar.glass,
  .liquid-refraction .header-actions {
    backdrop-filter: blur(5px) url('#tilat-liquid-refraction') saturate(var(--lg-saturation));
  }
}
.liquid-filter-defs { position: fixed; width: 0; height: 0; pointer-events: none; overflow: hidden; }
.catalog-card,
body.night .catalog-card,
.template-card,
body.night .template-card {
  border-color: rgb(var(--lg-highlight) / .28);
  background: linear-gradient(150deg, rgb(var(--lg-highlight) / .24), rgb(var(--lg-highlight) / .07));
  box-shadow: inset 0 1px rgb(var(--lg-highlight) / .64), 0 2px 5px rgb(var(--lg-shadow) / .035);
  border-radius: 17px;
  color: var(--lg-ink);
  transition: background .2s, box-shadow .2s, translate .2s;
}
.catalog-card:hover:not(:disabled),
body.night .catalog-card:hover:not(:disabled),
.template-card:hover:not(:disabled) {
  background: rgb(var(--lg-highlight) / .32) !important;
  border-color: rgb(var(--lg-highlight) / .62);
  box-shadow: var(--lg-lens-shadow);
  translate: 0 -2px;
}
.catalog-card small,
.template-card small,
.panel .small,
.panel .category-label,
.panel .eyebrow,
.panel .stat-grid span,
.panel .field > span,
body.night .panel .field > span { color: var(--lg-muted); }
.panel .field input:not([type='range']),
.panel .field textarea,
.panel .field select,
body.night .panel .field input:not([type='range']),
body.night .panel .field textarea,
body.night .panel .field select {
  background: rgb(var(--lg-highlight) / .21);
  border-color: rgb(var(--lg-highlight) / .25);
  box-shadow: inset 0 1px 2px rgb(var(--lg-shadow) / .06), 0 1px rgb(var(--lg-highlight) / .38);
  color: var(--lg-ink);
  border-radius: 12px;
}
.panel .secondary,
body.night .panel .secondary,
dialog .secondary {
  background: rgb(var(--lg-highlight) / .21);
  color: var(--lg-ink);
  border: 1px solid rgb(var(--lg-highlight) / .34);
  box-shadow: inset 0 1px rgb(var(--lg-highlight) / .75), 0 2px 5px rgb(var(--lg-shadow) / .045);
}
.library-footer button { padding: 11px 9px; border-radius: 13px; }
.library-footer button:hover { background: rgb(var(--lg-highlight) / .30); }
.panel .divider, .library-footer { border-color: rgb(var(--lg-shadow) / .10); }
.panel .divider { background: rgb(var(--lg-shadow) / .10); }
body.night .panel .divider { background: rgb(var(--lg-highlight) / .14); }
/* Dialogs use a denser version of the same glass for readable forms. */
dialog {
  --lg-transmission: .87;
  --lg-blur: 22px;
  border-radius: 29px;
}
body.night dialog { --lg-transmission: .94; }
dialog::backdrop { background: rgb(29 43 64 / .18); backdrop-filter: blur(5px); }
dialog p, dialog .small { color: var(--lg-muted); }
body.night dialog input, body.night dialog select, body.night dialog textarea { background: #ffffff13; border-color: #ffffff25; color: var(--lg-ink); }
body.night dialog .notice { background: #ffffff10; color: #c4d4ec; }
body.night dialog .floor-canvas { background: white; }
.auth-card.glass { --lg-transmission: .46; border-radius: 32px; }
.mobile-panels .glass { border-radius: 50%; width: 44px; height: 44px; }
.statusbar,
body.night .statusbar { background: transparent; border-color: transparent; color: var(--lg-muted); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, body.night .glass, .header-actions, dialog { background: rgb(var(--lg-surface) / .97); }
}
@media (max-width: 1150px) {
  .header-actions { padding: 5px; }
  .segmented.liquid-switch > button { padding-inline: 8px; }
  .view-bar.glass { gap: 3px; }
  .view-bar .light-switch > button { min-width: 38px; width: 38px; }
}
@media (max-width: 850px) {
  .topbar { padding: 0 12px; }
  .header-actions { padding: 4px; gap: 2px; }
  .header-actions button, .header-actions .avatar { min-height: 36px; width: 36px; padding: 8px; }
  .header-actions #plans { padding: 8px; }
  .panel.glass { --lg-transmission: .68; --lg-blur: 20px; }
  body.night .panel.glass { --lg-transmission: .83; }
  .view-bar.glass { padding: 5px; gap: 1px; max-width: calc(100% - 16px); }
  .view-bar > button { width: 32px; height: 36px; padding: 8px; }
  .view-bar .segmented.liquid-switch > button { min-height: 36px; padding: 8px; gap: 5px; font-size: 12px; }
  .view-bar .light-switch > button { width: 32px; min-width: 32px; }
  .view-bar .separator { margin-inline: 0; }
}
@media (max-width: 380px) {
  .view-bar .segmented.liquid-switch > button { padding-inline: 7px; }
  .view-bar .segmented:not(.light-switch) .icon { display: none; }
  .view-bar > button { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-thumb, .liquid-thumb::before, .catalog-card, .template-card,
  .view-bar button .icon, .header-actions button .icon { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, body.night .glass, .header-actions, dialog { background: rgb(var(--lg-surface) / .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  .glass, .header-actions, dialog { border: 1px solid CanvasText; }
  .liquid-thumb { border: 2px solid Highlight; }
}
/* Keep the surrounding page and compact catalog in the same visual state. */
body { background: #edf0f3; }
body.night { background: #222835; }
.catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-card { min-width: 0; }
.catalog-visual img { max-width: 100%; }
.statusbar { gap: 14px; }
.statusbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar #save-status { min-width: 0; }
.statusbar #seat-count { flex-shrink: 0; }
@media (prefers-reduced-transparency: reduce) {
  .liquid-refraction .view-bar.glass,
  .liquid-refraction .header-actions {
    background: rgb(var(--lg-surface) / .97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}