/* Liquid Glass buttons — standalone, no dependencies.
   Load after your reset. Font follows --app-font-family or the parent.
   Theme: data-theme="light|dark" on an ancestor, or existing .dark class.
*/
.lg-button {font-family:var(--app-font-family);--mx:50%;--my:0%;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:34px;min-height:134px;border:1px solid rgba(95,95,91,.26);border-radius:999px;padding:0 44px;background:radial-gradient(ellipse at var(--mx) var(--my),rgba(255,255,255,.76),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.62),rgba(241,241,239,.27) 43%,rgba(255,255,255,.36));box-shadow:inset 0 2px 2px rgba(255,255,255,1),inset 1px 0 1px rgba(255,255,255,.95),inset -1px 0 1px rgba(255,255,255,.85),inset 0 -2px 2px rgba(255,255,255,.98),0 1px 2px rgba(51,51,47,.07),0 17px 24px -13px rgba(80,80,70,.055);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);font:inherit;font-size:44px;letter-spacing:-.7px;color:inherit;cursor:pointer;transition:transform .18s,box-shadow .18s; -webkit-tap-highlight-color:transparent}

.lg-button:before {content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.75);border-radius:inherit;pointer-events:none}

.lg-button:active {transform:scale(.965);box-shadow:inset 0 2px 9px #0000000b,0 2px 7px #00000006}

.lg-button:focus-visible {outline:3px solid #477cab;outline-offset:6px}

.lg-button--icon {width:134px;padding:0;color:#393a37}

.lg-button svg {width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}




:where(.dark, [data-theme="dark"]) .lg-button {color:#ededeb;border-color:rgba(115,115,110,.16);background:radial-gradient(ellipse at var(--mx) var(--my),rgba(150,150,145,.08),transparent 60%),linear-gradient(180deg,#2b2b2b,#272727 48%,#282828);box-shadow:inset 0 2px 2px rgba(235,235,225,.18),inset 1px 0 2px rgba(190,190,185,.06),inset -1px 0 2px rgba(190,190,185,.06),inset 0 -2px 3px rgba(225,225,216,.19),0 2px 4px #0008}

:where(.dark, [data-theme="dark"]) .lg-button:before {border-color:rgba(200,200,192,.025)}

:where(.dark, [data-theme="dark"]) .lg-button--icon {color:#bfbfb7}

:where(.dark, [data-theme="dark"]) .lg-button:active {box-shadow:inset 0 2px 9px #0005,inset 0 -1px 2px #ffffff18}

.lg-button.lg-button--tinted{
  --wash:16%;--pool:26%;--veil:38%;--edge:.65;
  color:color-mix(in srgb,var(--tint) 48%,#101014);
  border-color:color-mix(in srgb,var(--tint) 20%,#88888830);
  background:
    radial-gradient(ellipse at var(--mx) var(--my),rgb(255 255 255 / .24),transparent 62%),
    radial-gradient(ellipse at 50% 125%,color-mix(in srgb,var(--tint) var(--pool),transparent),transparent 72%),
    linear-gradient(170deg,color-mix(in srgb,#fff var(--veil),transparent),transparent 55%),
    color-mix(in srgb,var(--tint) var(--wash),transparent);
  backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  box-shadow:inset 0 1px 1px rgb(255 255 255 / var(--edge)),inset 0 -1px 2px #ffffff80,0 2px 3px #00000008,0 8px 18px -12px color-mix(in srgb,var(--tint) 28%,transparent);
}

.lg-button.lg-button--tinted:before {
  inset:0;border:1px solid transparent;
  background:linear-gradient(155deg,#ffffffba,#ffffff0a 30%,#ffffff00 65%,#ffffff80) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

:where(.dark, [data-theme="dark"]) .lg-button.lg-button--tinted {
  --wash:20%;--pool:30%;--veil:8%;--edge:.24;
  color:color-mix(in srgb,var(--tint) 36%,#fff);
  border-color:color-mix(in srgb,var(--tint) 22%,#ffffff12);
  box-shadow:inset 0 1px 1px rgb(255 255 255 / var(--edge)),inset 0 -1px 2px #ffffff20,0 3px 8px #00000028;
}

:where(.dark, [data-theme="dark"]) .lg-button.lg-button--tinted:before {opacity:.42}

.lg-button.lg-button--tinted.lg-button--prominent {--wash:56%;--pool:48%;--veil:16%;font-weight:500;color:#141419}

:where(.dark, [data-theme="dark"]) .lg-button.lg-button--tinted.lg-button--prominent {--wash:62%;--pool:50%;--veil:12%;color:#fff}

:where(.dark, [data-theme="dark"]) .lg-button.lg-button--tinted.lg-button--prominent[data-color="orange"],:where(.dark, [data-theme="dark"]) .lg-button.lg-button--tinted.lg-button--prominent[data-color="green"] {color:#080d0b}

.lg-button.lg-button--tinted:active {transform:scale(.965);box-shadow:inset 0 1px 5px #00000018,inset 0 -1px 1px #ffffff50}

.lg-button {
  box-sizing: border-box;
  appearance: none;
  --lg-size: 54px;
  min-height: var(--lg-size);
  max-width: 100%;
  padding: 12px 23px;
  gap: 10px;
  font: inherit;
  font-family: var(--app-font-family, inherit);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.2px;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
.lg-button svg { width: 20px; height: 20px; stroke-width: 2; }
.lg-button--icon { width: var(--lg-size); height: var(--lg-size); padding: 0; flex-shrink: 0; }
.lg-button--small { --lg-size: 44px; padding: 9px 17px; font-size: 15px; }
.lg-button--large { --lg-size: 64px; padding: 16px 28px; font-size: 20px; }
.lg-button--icon:is(.lg-button--small,.lg-button--large) { padding: 0; }
.lg-button[data-color="blue"] { --tint: #0a84ff; }
.lg-button[data-color="orange"] { --tint: #ff9500; }
.lg-button[data-color="red"] { --tint: #ff3b30; }
.lg-button[data-color="green"] { --tint: #34c759; }
.lg-button--tinted { --tint: #0a84ff; }
.lg-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.lg-button:focus-visible { outline: 3px solid #0a84ff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .lg-button { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
  .lg-button { backdrop-filter: none; -webkit-backdrop-filter: none; background: #f5f5f4; }
  :where(.dark, [data-theme="dark"]) .lg-button { background: #282828; }
  .lg-button.lg-button--tinted { background: color-mix(in srgb, var(--tint) 18%, #f9f9f8); }
  :where(.dark, [data-theme="dark"]) .lg-button.lg-button--tinted { background: color-mix(in srgb, var(--tint) 25%, #202020); }
  .lg-button.lg-button--tinted.lg-button--prominent { background: color-mix(in srgb, var(--tint) 62%, #f9f9f8); }
  :where(.dark, [data-theme="dark"]) .lg-button.lg-button--tinted.lg-button--prominent { background: color-mix(in srgb, var(--tint) 75%, #202020); }
}
@media (forced-colors: active) {
  .lg-button { background: ButtonFace !important; color: ButtonText !important; border: 1px solid ButtonText !important; box-shadow: none !important; }
  .lg-button::before { display: none; }
  .lg-button:focus-visible { outline-color: Highlight; }
}