/* Liquid Glass design: frosted surfaces, liquid light, specular edges.
   Inspired by https://github.com/ybouane/liquidglass
   Applied when <html data-design="glass">. */

[data-design="glass"] {
  --glass-tint: rgba(16, 22, 38, 0.58);
  --glass-tint-strong: rgba(12, 17, 30, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.22);
  --glass-edge-bright: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(28px) saturate(160%);
  --glass-glow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 -1px 0 rgba(120, 180, 255, 0.16) inset, 0 18px 48px rgba(2, 6, 18, 0.42);
}

[data-design="glass"] body {
  background: #070b14;
}

[data-design="glass"] .app {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(120, 158, 255, 0.22), transparent 55%),
    radial-gradient(110% 80% at 92% 12%, rgba(236, 150, 205, 0.16), transparent 52%),
    radial-gradient(120% 100% at 50% 108%, rgba(88, 214, 214, 0.18), transparent 58%),
    linear-gradient(160deg, #0a1020 0%, #070b14 58%, #0a0f1b 100%);
}

[data-design="glass"] .app::before,
[data-design="glass"] .app::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.7;
  animation: glass-drift 22s var(--emph-decel) infinite alternate;
}

[data-design="glass"] .app::before {
  inset: -18% auto auto -14%;
  width: 70vmax;
  height: 70vmax;
  background:
    radial-gradient(circle at 34% 34%, rgba(160, 196, 255, 0.34), transparent 58%),
    radial-gradient(circle at 68% 62%, rgba(120, 255, 240, 0.16), transparent 54%);
}

[data-design="glass"] .app::after {
  inset: auto -16% -24% auto;
  width: 64vmax;
  height: 64vmax;
  background:
    radial-gradient(circle at 46% 42%, rgba(255, 170, 222, 0.24), transparent 56%),
    radial-gradient(circle at 24% 70%, rgba(130, 170, 255, 0.22), transparent 52%);
  animation-delay: -9s;
  animation-duration: 27s;
}

[data-design="glass"] .main-pane,
[data-design="glass"] .app-bar,
[data-design="glass"] .dock {
  position: relative;
  z-index: 1;
}

[data-design="glass"] .app-bar {
  z-index: 20;
  height: 56px;
  margin: calc(8px + env(safe-area-inset-top, 0px)) 12px 6px;
  padding-inline: 10px 8px;
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255, 255, 255, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.028));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.26) inset,
    0 -1px 0 rgba(120, 180, 255, 0.12) inset,
    0 12px 32px rgba(2, 6, 18, 0.32);
}

[data-design="glass"] .brand {
  width: 38px;
  height: 38px;
  margin-inline: 4px 10px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.10) 46%, transparent 68%),
    linear-gradient(145deg, rgba(140, 180, 255, 0.34), rgba(86, 126, 232, 0.20));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -6px 14px rgba(40, 80, 180, 0.16) inset,
    0 8px 20px rgba(40, 100, 220, 0.22);
  color: #f5f8ff;
}

[data-design="glass"] .brand .material-symbols-rounded {
  font-size: 20px;
  filter: drop-shadow(0 1px 6px rgba(2, 6, 18, 0.35));
}

[data-design="glass"] .live-dot {
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #8ff0c8;
  box-shadow:
    0 0 0 2px rgba(8, 14, 28, 0.9),
    0 0 8px rgba(96, 240, 190, 0.9),
    0 0 16px rgba(96, 240, 190, 0.45);
}

[data-design="glass"] .app-bar h1 {
  color: #f4f7ff;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 12px rgba(2, 6, 18, 0.45);
}

[data-design="glass"] .app-bar .icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.075);
  color: #eaf2ff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.26) inset,
    0 4px 14px rgba(2, 6, 18, 0.18);
}

[data-design="glass"] .app-bar .icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

[data-design="glass"] .app-bar .icon-btn:active {
  background: rgba(255, 255, 255, 0.18);
}

[data-design="glass"] .app-bar .icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline-color: var(--glass-edge-bright);
}

[data-design="glass"] .stage {
  background:
    radial-gradient(90% 80% at 50% 10%, rgba(120, 160, 255, 0.10), transparent 60%),
    var(--surface-container-lowest);
}

[data-design="glass"] #viewCanvas,
[data-design="glass"] #gridOverlay,
[data-design="glass"] #flashOverlay {
  border-radius: var(--corner-xl);
}

[data-design="glass"] #viewCanvas {
  box-shadow: 0 24px 64px rgba(2, 6, 18, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.10);
}

[data-design="glass"] .dock {
  z-index: 20;
  width: calc(100% - 24px);
  max-width: 720px;
  height: 64px;
  margin: 6px auto calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 0 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 26px;
  background:
    radial-gradient(100% 140% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.26) inset,
    0 -1px 0 rgba(120, 180, 255, 0.12) inset,
    0 16px 40px rgba(2, 6, 18, 0.42);
  overflow: visible;
}

[data-design="glass"] .dock .icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.065);
  color: #eaf2ff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset;
}

[data-design="glass"] .dock .icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

[data-design="glass"] .dock .icon-btn:active {
  background: rgba(255, 255, 255, 0.18);
}

[data-design="glass"] .dock .badge {
  background: linear-gradient(180deg, #ff9b9b, #e5484d);
  color: #ffffff;
  box-shadow:
    0 0 0 2px rgba(8, 14, 28, 0.88),
    0 0 10px rgba(239, 68, 68, 0.55);
}

[data-design="glass"] .timer-label {
  background: linear-gradient(180deg, #bfe0ff, #7db4ff);
  color: #081021;
  box-shadow:
    0 0 0 2px rgba(8, 14, 28, 0.88),
    0 0 10px rgba(120, 170, 255, 0.55);
}

[data-design="glass"] .timer-overlay {
  background: radial-gradient(90% 90% at 50% 50%, rgba(3, 7, 18, 0.22), rgba(3, 7, 18, 0.08));
}

[data-design="glass"] .timer-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 24px 28px;
  border-radius: 32px;
  background:
    radial-gradient(120% 120% at 24% 10%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 48%, transparent 70%),
    var(--glass-tint-strong);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #f4f7ff;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 -1px 0 rgba(120, 180, 255, 0.18) inset,
    var(--glass-glow),
    0 0 34px rgba(120, 170, 255, 0.22);
}

[data-design="glass"] .timer-card::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg, rgba(255, 255, 255, 0.60), rgba(150, 200, 255, 0.30) calc(var(--timer-progress, 0) * 360deg), transparent calc(var(--timer-progress, 0) * 360deg));
  filter: blur(18px) saturate(160%);
  opacity: 0.65;
  pointer-events: none;
}

[data-design="glass"] .timer-card > * {
  position: relative;
  z-index: 1;
}

[data-design="glass"] .timer-count {
  color: #f8fbff;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 22px rgba(120, 170, 255, 0.65),
    0 0 64px rgba(120, 170, 255, 0.38);
  letter-spacing: 0.01em;
}

[data-design="glass"] .dock #btnTimer[aria-pressed="true"] {
  background: linear-gradient(150deg, rgba(150, 190, 255, 0.28), rgba(96, 140, 235, 0.16));
  border-color: rgba(190, 215, 255, 0.55);
  color: #f0f6ff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 0 16px rgba(120, 170, 255, 0.22);
}

[data-design="glass"] .timer-card .btn.tonal {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--glass-edge);
  color: #eaf2ff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}

[data-design="glass"] .timer-card .btn.tonal:hover {
  background: rgba(255, 255, 255, 0.20);
}

[data-design="glass"] .fab-capture {
  width: 86px;
  height: 86px;
  bottom: calc(100% + 10px);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.14) 40%, transparent 62%),
    linear-gradient(150deg, rgba(158, 198, 255, 0.60), rgba(84, 132, 234, 0.36));
  color: #f7faff;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 -12px 26px rgba(36, 78, 180, 0.22) inset,
    0 0 0 6px rgba(255, 255, 255, 0.055),
    0 18px 42px rgba(2, 6, 18, 0.55),
    0 0 34px rgba(120, 170, 255, 0.20);
  transition:
    transform 160ms var(--spatial-fast),
    box-shadow 160ms var(--fx-fast),
    background-color 160ms var(--fx-fast);
}

[data-design="glass"] .fab-capture::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.44);
  background:
    radial-gradient(90% 90% at 34% 26%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04) 58%, transparent 72%);
  box-shadow: 0 1px 14px rgba(255, 255, 255, 0.30) inset;
  pointer-events: none;
}

[data-design="glass"] .fab-capture::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  border: 1px solid rgba(190, 215, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 26px rgba(120, 170, 255, 0.18);
  pointer-events: none;
}

[data-design="glass"] .fab-capture .material-symbols-rounded {
  position: relative;
  z-index: 1;
  font-size: 32px;
  filter: drop-shadow(0 2px 6px rgba(0, 20, 60, 0.32));
}

[data-design="glass"] .fab-capture:hover {
  background:
    radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.20) 40%, transparent 62%),
    linear-gradient(150deg, rgba(176, 212, 255, 0.68), rgba(100, 150, 244, 0.42));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 -12px 26px rgba(36, 78, 180, 0.22) inset,
    0 0 0 7px rgba(255, 255, 255, 0.075),
    0 22px 50px rgba(2, 6, 18, 0.58),
    0 0 40px rgba(130, 180, 255, 0.26);
}

[data-design="glass"] .fab-capture:active {
  transform: translateX(-50%) scale(0.94);
  background-color: transparent;
  box-shadow:
    0 2px 10px rgba(20, 50, 130, 0.30) inset,
    0 0 0 5px rgba(255, 255, 255, 0.045),
    0 10px 26px rgba(2, 6, 18, 0.50);
}

[data-design="glass"] .fab-capture:focus-visible {
  outline-color: rgba(255, 255, 255, 0.92);
  outline-offset: 5px;
}

[data-design="glass"] .fab-capture.timer-cancel {
  background:
    radial-gradient(125% 125% at 30% 18%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.14) 40%, transparent 62%),
    linear-gradient(150deg, rgba(255, 165, 165, 0.58), rgba(217, 70, 80, 0.38));
  color: #ffffff;
}

[data-design="glass"] .icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

[data-design="glass"] .icon-btn[aria-pressed="true"] {
  color: #eaf2ff;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

[data-design="glass"] .float-toolbar {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-glow);
}

[data-design="glass"] .float-toolbar .divider {
  background: rgba(255, 255, 255, 0.22);
}

[data-design="glass"] .side-sheet {
  background: var(--glass-tint);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.20) inset, 0 24px 64px rgba(2, 6, 18, 0.55);
  --sheet-bg: rgba(13, 19, 33, 0.94);
}

[data-design="glass"] .sheet-header,
[data-design="glass"] .sheet-actions {
  background: transparent;
}

[data-design="glass"] .sheet-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

[data-design="glass"] .section + .section {
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-design="glass"] .legal-copy a {
  color: #bfe0ff;
}

[data-design="glass"] .field input,
[data-design="glass"] .field textarea {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.24);
}

[data-design="glass"] .field input:hover,
[data-design="glass"] .field textarea:hover {
  border-color: rgba(255, 255, 255, 0.46);
}

[data-design="glass"] .field input:focus,
[data-design="glass"] .field textarea:focus {
  border-color: rgba(190, 215, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(190, 215, 255, 0.5), 0 0 18px rgba(120, 170, 255, 0.25);
}

[data-design="glass"] .field label {
  background: var(--sheet-bg);
}

[data-design="glass"] .filled-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset;
}

[data-design="glass"] .filled-card .card-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #eaf2ff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

[data-design="glass"] .btn.primary {
  background:
    radial-gradient(120% 160% at 24% 0%, rgba(255, 255, 255, 0.55), transparent 52%),
    linear-gradient(140deg, rgba(142, 182, 255, 0.92), rgba(104, 150, 240, 0.72));
  color: #081021;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 10px 26px rgba(60, 110, 220, 0.35);
}

[data-design="glass"] .btn.primary:hover {
  background:
    radial-gradient(120% 160% at 24% 0%, rgba(255, 255, 255, 0.68), transparent 52%),
    linear-gradient(140deg, rgba(160, 198, 255, 0.95), rgba(120, 165, 248, 0.78));
}

[data-design="glass"] .btn.tonal {
  background: rgba(255, 255, 255, 0.12);
  color: #eaf2ff;
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

[data-design="glass"] .btn.tonal:hover {
  background: rgba(255, 255, 255, 0.18);
}

[data-design="glass"] .btn.outlined {
  border-color: rgba(255, 255, 255, 0.30);
  color: #e6edff;
}

[data-design="glass"] .chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.24);
  color: #dbe5fb;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

[data-design="glass"] .chip:hover {
  background: rgba(255, 255, 255, 0.11);
}

[data-design="glass"] .chip[aria-checked="true"] {
  background:
    radial-gradient(120% 160% at 24% 0%, rgba(255, 255, 255, 0.45), transparent 56%),
    linear-gradient(140deg, rgba(150, 190, 255, 0.85), rgba(112, 155, 240, 0.65));
  color: #081021;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

[data-design="glass"] .switch {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
}

[data-design="glass"] .switch-input:checked + .switch {
  background: linear-gradient(140deg, rgba(160, 200, 255, 0.95), rgba(110, 158, 245, 0.85));
  border-color: rgba(255, 255, 255, 0.45);
}

[data-design="glass"] .switch-input:checked + .switch .switch-handle {
  background: #0b1424;
  color: #dbe8ff;
}

[data-design="glass"] .switch-handle {
  background: rgba(255, 255, 255, 0.55);
}

[data-design="glass"] .slider-head .value {
  color: #c9d7f5;
}

[data-design="glass"] input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(170, 205, 255, 0.95) 0 var(--fill, 88%), rgba(255, 255, 255, 0.14) var(--fill, 88%) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

[data-design="glass"] input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.14);
}

[data-design="glass"] input[type="range"]::-moz-range-progress {
  background: rgba(170, 205, 255, 0.95);
}

[data-design="glass"] input[type="range"]::-webkit-slider-thumb,
[data-design="glass"] input[type="range"]::-moz-range-thumb {
  background: #eaf2ff;
  box-shadow: 0 0 12px rgba(140, 185, 255, 0.8);
}

[data-design="glass"] .dialog {
  background: var(--glass-tint-strong);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-glow);
}

[data-design="glass"] .preview-frame {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

[data-design="glass"] .thumb {
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(2, 6, 18, 0.35);
}

[data-design="glass"] .thumb-delete {
  background: rgba(12, 18, 32, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

[data-design="glass"] .snackbar {
  background: rgba(255, 255, 255, 0.14);
  color: #f2f6ff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--corner-m);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 14px 36px rgba(2, 6, 18, 0.45);
}

[data-design="glass"] .snackbar .material-symbols-rounded {
  color: #bfe0ff;
}

@media (min-width: 840px) {
  [data-design="glass"] .side-sheet {
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--glass-edge);
    background: rgba(12, 18, 32, 0.66);
  }
}

@keyframes glass-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  50% { transform: translate3d(2%, 3%, 0) scale(1.06); }
  to { transform: translate3d(4%, -3%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="glass"] .app::before,
  [data-design="glass"] .app::after { animation: none; }
}

/* Offscreen LiquidGlass renderer for the watermark card. */
#liquidGlassRoot {
  position: fixed;
  left: -12000px;
  top: 0;
  width: 480px;
  height: 200px;
  pointer-events: none;
  opacity: 0.01;
  overflow: visible;
}

#liquidGlassRoot > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#liquidGlassStamp {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 440px;
  height: 160px;
  background: transparent;
  border: 0;
  pointer-events: none;
}