/*! Liquid Glass — component presets CSS (needs liquid-glass.css)
 * Components are namespaced lg-*. Behaviour lives in liquid-glass-ui.js and is
 * attached through data-lg-ui="…". Accent colour: --lg-accent.
 */
:root { --lg-accent: #0a84ff; --lg-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.lg-sr { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.lg-i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:where([class^="lg-"], [class*=" lg-"]) button, button:where([class^="lg-"], [class*=" lg-"]) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- buttons */
.lg-btn { --r: 999px; height: 46px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 650 16px var(--lg-font); white-space: nowrap; }
.lg-btn--s { height: 34px; padding: 0 14px; font-size: 14px; }
.lg-btn--l { height: 58px; padding: 0 30px; font-size: 18px; }
.lg-icon-btn { --r: 50%; width: 48px; height: 48px; display: inline-grid; place-items: center; flex: none; }
.lg-icon-btn--s { width: 36px; height: 36px; } .lg-icon-btn--l { width: 60px; height: 60px; }
.lg-icon-btn--l .lg-i { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- lens knob (switch + slider) */
.lg-knob { --r: 99px; position: absolute !important; left: 0; top: 2px; width: 38px; height: 26px; box-shadow: 0 3px 8px -2px rgba(0,0,0,.3); }
.lg-knob__solid { position: absolute; inset: 0; border-radius: inherit; background: #fff; box-shadow: inset 0 -1px 2px rgba(0,0,0,.08); }

/* ---------------------------------------------------------------- switch */
.lg-switch { position: relative; display: inline-block; width: 64px; height: 30px; border-radius: 99px; flex: none; vertical-align: middle; touch-action: none; }
.lg-switch__track { --r: 99px; position: absolute !important; inset: 0; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); }
.lg-switch__fill { position: absolute; inset: 0; border-radius: 99px; background: var(--lg-switch-on, #34c759); opacity: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.lg-switch:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- slider */
.lg-slider { position: relative; display: block; width: 100%; min-width: 120px; height: 30px; touch-action: none; cursor: pointer; }
.lg-slider__track { position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); overflow: hidden; }
.lg-slider__fill { position: absolute; inset: 0; background: var(--lg-accent); transform-origin: 0 50%; transform: scaleX(0); }
.lg-slider:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 4px; border-radius: 99px; }

/* ---------------------------------------------------------------- segmented + tab bar */
.lg-seg { --r: 999px; display: inline-flex; padding: 4px; height: 44px; touch-action: none; }
.lg-seg > [role=tab] { flex: 1; min-width: 78px; border-radius: 99px; font: 650 15px var(--lg-font); display: flex; align-items: center; justify-content: center; gap: 4px; position: relative; z-index: 2; }
.lg-seg > [role=tab].is-under { color: var(--lg-seg-accent, inherit); }
.lg-seg > [role=tab]:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: -3px; }
.lg-seg__bubble { position: absolute; left: 4px; top: 4px; bottom: 4px; border-radius: 99px; z-index: 1;
  background: rgba(var(--bubble-rgb, 255,255,255), var(--bubble-a, .22));
  box-shadow: inset 0 1px 0 rgba(255,255,255, calc(.5 * var(--hl-k))), inset 0 0 0 .5px rgba(255,255,255, calc(.22 * var(--hl-k))), 0 5px 12px -7px rgba(0,0,0,.3); }
.lg-seg__lens { --r: 99px; position: absolute !important; left: 4px; top: 4px; bottom: 4px; visibility: hidden; z-index: 3 !important; pointer-events: none; }
.lg-seg--tabbar { height: 64px; --lg-seg-accent: var(--lg-accent); }
.lg-seg--tabbar > [role=tab] { flex-direction: column; font-size: 10.5px; gap: 3px; }
.lg-seg--tabbar > [role=tab] .lg-i { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- stepper */
.lg-stepper { --r: 999px; display: inline-flex; align-items: center; height: 50px; padding: 0 5px; }
.lg-stepper button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.lg-stepper button:hover { background: rgba(var(--tint-rgb), .18); }
.lg-stepper output { min-width: 54px; text-align: center; font: 800 22px var(--lg-font); font-variant-numeric: tabular-nums; display: inline-block; }

/* ---------------------------------------------------------------- checkbox + radio */
.lg-check { display: flex; align-items: center; gap: 12px; padding: 9px 0; font: 600 16px var(--lg-font); cursor: pointer; }
.lg-check__box { --r: 8px; width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.lg-check__box--round { --r: 50%; }
.lg-check__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--lg-accent); opacity: 0; }
.lg-check__box svg { position: relative; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lg-check__mark { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lg-check__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #fff; scale: 0; }
.lg-check input:focus-visible + .lg-check__box { outline: 2px solid var(--lg-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- inputs */
.lg-search { --r: 999px; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 14px; width: 220px; cursor: text; }
.lg-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 16px var(--lg-font); color: inherit; }
.lg-search input::placeholder { color: inherit; opacity: .6; }
.lg-search input::-webkit-search-cancel-button { display: none; }
.lg-search__cancel { font: 650 14px var(--lg-font); padding: 6px 10px; border-radius: 99px; opacity: 0; pointer-events: none; white-space: nowrap; }
.lg-field { display: block; height: 46px; border-radius: 14px; padding: 0 14px; border: 0; outline: 0; width: 100%; font: 600 15px var(--lg-font); color: inherit;
  background: rgba(var(--tint-rgb), calc(var(--tint-a) * 2.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 2px 5px rgba(0,0,0,.12); }
.lg-field::placeholder { color: inherit; opacity: .55; }
.lg-field:focus-visible { box-shadow: inset 0 0 0 2px var(--lg-accent); }
.lg-form { --r: 30px; display: flex; flex-direction: column; gap: 12px; padding: 22px; }

/* ---------------------------------------------------------------- toolbar + sidebar + chips */
.lg-toolbar { --r: 999px; display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 6px; }
.lg-toolbar__title { flex: 1; text-align: center; font: 700 16px var(--lg-font); }
.lg-toolbar__btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.lg-toolbar__btn:hover { background: rgba(var(--tint-rgb), .2); }
.lg-sidebar { --r: 28px; display: flex; flex-direction: column; padding: 10px; }
.lg-sidebar > button { position: relative; z-index: 2; height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 14px; font: 600 15px var(--lg-font); text-align: left; }
.lg-sidebar__heading { margin: 6px 12px; font: 700 12px var(--lg-font); opacity: .6; }
.lg-sidebar__bubble { position: absolute; left: 10px; right: 10px; top: 0; height: 42px; border-radius: 14px; z-index: 1;
  background: rgba(var(--bubble-rgb, 255,255,255), var(--bubble-a, .22)); box-shadow: inset 0 1px 0 rgba(255,255,255, calc(.5 * var(--hl-k))), 0 4px 10px -6px rgba(0,0,0,.3); }
.lg-chip { --r: 999px; height: 36px; padding: 0 8px 0 14px; display: inline-flex; align-items: center; gap: 6px; font: 650 14px var(--lg-font); }
.lg-chip [data-lg-remove] { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--tint-rgb), .22); }
.lg-chip [data-lg-remove] svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ---------------------------------------------------------------- overlays (hidden until opened) */
.lg-toast, .lg-alert, .lg-sheet, .lg-menu, .lg-tip { visibility: hidden; }
.lg-toast { --r: 24px; position: absolute !important; left: 50%; top: 14px; width: min(340px, calc(100% - 24px)); translate: -50% 0; display: flex; gap: 12px; padding: 14px 16px; }
.lg-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.lg-alert { --r: 30px; position: absolute !important; left: 50%; top: 50%; translate: -50% -50%; width: min(280px, calc(100% - 32px)); padding: 20px 18px 16px; text-align: center; }
.lg-alert__actions { display: flex; gap: 10px; } .lg-alert__actions > * { flex: 1; }
.lg-sheet { --r: 30px 30px 0 0; position: absolute !important; left: 8px; right: 8px; bottom: 0; padding: 10px 20px 20px; touch-action: none; }
.lg-sheet__grab { width: 40px; height: 5px; border-radius: 9px; background: currentColor; opacity: .35; margin: 0 auto 14px; }
.lg-menu { --r: 22px; position: absolute !important; width: 220px; padding: 6px; }
.lg-menu [role=menuitem] { width: 100%; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 14px; font: 600 15px var(--lg-font); text-align: left; }
.lg-menu [role=menuitem]:hover, .lg-menu [role=menuitem]:focus-visible { background: rgba(var(--tint-rgb), .22); outline: none; }
.lg-menu hr { border: 0; height: 1px; background: currentColor; opacity: .15; margin: 4px 10px; }
.lg-menu .lg-danger { color: #ff453a; }
.lg-tip { --r: 14px; position: fixed !important; left: 0; top: 0; z-index: 9999; padding: 8px 12px; font: 650 14px var(--lg-font); white-space: nowrap; transform-origin: 50% 100%; pointer-events: none; }

/* ---------------------------------------------------------------- media + containers */
.lg-card { --r: 30px; overflow: hidden; }
.lg-card__media { margin: 8px 8px 0; border-radius: 22px; min-height: 120px; background-size: cover; background-position: center; }
.lg-card__body { padding: 14px 18px 18px; }
.lg-player { --r: 30px; padding: 16px; }
.lg-player__top { display: flex; gap: 14px; align-items: center; }
.lg-player__art { width: 62px; height: 62px; border-radius: 14px; flex: none; background: conic-gradient(from 200deg, #ff375f, #ff9f0a, #ffd60a, #30d158, #64d2ff, #5e5ce6, #bf5af2, #ff375f); background-size: cover; }
.lg-player__bar { height: 5px; border-radius: 9px; margin: 16px 0 6px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
.lg-player__bar > i { display: block; height: 100%; width: calc(var(--value, .4) * 100%); background: currentColor; border-radius: inherit; }
.lg-player__controls { display: flex; justify-content: center; gap: 26px; margin-top: 4px; }
.lg-player__controls button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; }
.lg-player__controls svg { width: 26px; height: 26px; fill: currentColor; }
.lg-widget { --r: 32px; width: 170px; height: 170px; padding: 16px; display: flex; flex-direction: column; }
.lg-progress { --r: 999px; display: block; width: 100%; height: 18px; padding: 4px; }
.lg-progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #64d2ff, var(--lg-accent)); transform-origin: 0 50%; transform: scaleX(var(--value, .5)); }
.lg-ring { --r: 50%; width: 96px; height: 96px; display: inline-grid; place-items: center; }
.lg-ring svg { width: 76px; height: 76px; rotate: -90deg; grid-area: 1 / 1; }
.lg-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.lg-ring__arc { stroke: var(--lg-ring-color, #30d158); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--value, .5) * 100); }
.lg-ring__label { grid-area: 1 / 1; font: 800 18px var(--lg-font); }
.lg-dock { --r: 26px; display: inline-flex; align-items: flex-end; gap: 10px; padding: 9px 12px; }
.lg-dock__item { position: relative; width: 50px; height: 50px; border-radius: 13px; flex: none; transform-origin: 50% 100%; box-shadow: 0 4px 10px -4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.lg-keycap { --r: 16px; min-width: 64px; height: 64px; padding: 0 16px; display: inline-grid; place-items: center; font: 700 24px var(--lg-font); }

/* ---------------------------------------------------------------- lens + metaball */
.lg-lens { --r: 50%; position: absolute !important; left: 0; top: 0; width: 130px; height: 130px; cursor: grab; touch-action: none; }
.lg-lens.is-dragging, .lg-metaball__drop.is-dragging { cursor: grabbing; }
.lg-metaball { position: absolute; inset: 0; }
.lg-metaball__refract { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; }
.lg-metaball__drop { position: absolute; left: 0; top: 0; z-index: 2; width: var(--size, 120px); height: var(--size, 120px); border-radius: 50%; cursor: grab; touch-action: none; }
.lg-metaball__layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.lg-svg .lg-metaball__drop > .lg__refract { display: none; }