/* ============================================================
   Lab Shared - visual foundation za Trio First Lab plugine
   v1.3.0
   ============================================================ */

:root {
  --lab-paper: #f1e3c3;
  --lab-paper-light: #f7edd4;
  --lab-paper-dark: #e2c99b;
  --lab-ink: #21323a;
  --lab-ink-soft: #3a4a50;
  --lab-navy: #20384a;
  --lab-navy-soft: #2f4b5d;
  --lab-ochre: #c99a32;
  --lab-mustard: #d7ad45;
  --lab-burnt-orange: #a95d2b;
  --lab-warm-brown: #7b5631;
  --lab-muted-blue: #5d87a1;
  --lab-soft-green: #8fa276;
  --lab-soft-red: #b86a55;
  --lab-bg: linear-gradient(180deg, var(--lab-paper-light) 0%, var(--lab-paper) 100%);
  --lab-bg-soft: rgba(247, 237, 212, 0.7);
  --lab-surface: rgba(246, 234, 209, 0.88);
  --lab-surface-strong: rgba(247, 237, 212, 0.96);
  --lab-surface-muted: rgba(234, 215, 178, 0.9);
  --lab-border: rgba(33, 50, 58, 0.22);
  --lab-border-strong: rgba(33, 50, 58, 0.38);
  --lab-text: var(--lab-ink);
  --lab-heading: var(--lab-ink);
  --lab-muted: var(--lab-ink-soft);
  --lab-accent: var(--lab-navy);
  --lab-accent-dark: #172b38;
  --lab-accent-bg: rgba(32, 56, 74, 0.12);
  --lab-accent-glow: rgba(33, 50, 58, 0.16);
  --lab-accent-contrast: var(--lab-paper-light);
  --lab-success: #5c7150;
  --lab-success-bg: rgba(143, 162, 118, 0.2);
  --lab-success-border: rgba(92, 113, 80, 0.32);
  --lab-danger: var(--lab-soft-red);
  --lab-danger-bg: rgba(184, 106, 85, 0.16);
  --lab-danger-border: rgba(184, 106, 85, 0.3);
  --lab-warning: var(--lab-ochre);
  --lab-warning-bg: rgba(201, 154, 50, 0.18);
  --lab-warning-border: rgba(169, 93, 43, 0.26);
  --lab-focus-ring: rgba(93, 135, 161, 0.22);
  --lab-font: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --lab-font-display: "Syne", "Avenir Next", "Trebuchet MS", sans-serif;
  --lab-font-mono: var(--lab-font);
  --lab-max-w: 760px;
  --lab-page-pad: 18px;
  --lab-page-pad-sm: 12px;
  --lab-radius-sm: 10px;
  --lab-radius: 14px;
  --lab-radius-lg: 18px;
  --lab-radius-xl: 22px;
  --lab-shadow: 3px 3px 0 rgba(33, 50, 58, 0.14);
  --lab-shadow-lg: 5px 5px 0 rgba(33, 50, 58, 0.16);
  --lab-shadow-focus: 0 0 0 4px var(--lab-focus-ring);
  --lab-gap-sm: 10px;
  --lab-gap: 14px;
  --lab-gap-lg: 20px;
  --lab-gap-xl: 28px;
  --lab-ease: 0.18s ease;
  --lab-btn-h: 48px;
  --lab-btn-h-lg: 56px;
  --lab-input-h: 50px;
}

/* App system tokens. Legacy token names remain available, but the
   values now describe one shared PWA/app visual language. */
:root {
  --lab-paper: #f4f6f8;
  --lab-paper-light: #fffdf8;
  --lab-paper-dark: #dfe6ec;
  --lab-ink: #17222b;
  --lab-ink-soft: #52616b;
  --lab-navy: #24384d;
  --lab-navy-soft: #33516b;
  --lab-ochre: #d79b2b;
  --lab-mustard: #e1b553;
  --lab-burnt-orange: #b35a38;
  --lab-warm-brown: #6e5541;
  --lab-muted-blue: #5e7f95;
  --lab-soft-green: #62866c;
  --lab-soft-red: #c85648;
  --lab-bg: linear-gradient(180deg, #fffdf8 0%, #f4f6f8 100%);
  --lab-bg-soft: rgba(244, 246, 248, 0.74);
  --lab-surface: rgba(255, 255, 255, 0.92);
  --lab-surface-strong: #ffffff;
  --lab-surface-muted: rgba(238, 242, 245, 0.9);
  --lab-border: rgba(23, 34, 43, 0.13);
  --lab-border-strong: rgba(23, 34, 43, 0.24);
  --lab-accent: var(--lab-navy);
  --lab-accent-dark: #162636;
  --lab-accent-bg: rgba(36, 56, 77, 0.1);
  --lab-accent-glow: rgba(36, 56, 77, 0.16);
  --lab-accent-contrast: #fffdf8;
  --lab-success: #53765f;
  --lab-success-bg: rgba(83, 118, 95, 0.12);
  --lab-success-border: rgba(83, 118, 95, 0.28);
  --lab-danger: #c85648;
  --lab-danger-bg: rgba(200, 86, 72, 0.1);
  --lab-danger-border: rgba(200, 86, 72, 0.26);
  --lab-warning: #c4871d;
  --lab-warning-bg: rgba(215, 155, 43, 0.13);
  --lab-warning-border: rgba(196, 135, 29, 0.24);
  --lab-focus-ring: rgba(73, 132, 161, 0.24);
  --lab-shell-bg: #f4f6f8;
  --lab-app-bg: #ffffff;
  --lab-app-bg-soft: #f8fafb;
  --lab-app-topbar: rgba(255, 255, 255, 0.88);
  --lab-app-nav: rgba(255, 255, 255, 0.92);
  --lab-nav-height: 70px;
  --lab-page-max-w: 1120px;
  --lab-max-w: 820px;
  --lab-page-pad: clamp(14px, 2.4vw, 28px);
  --lab-radius-sm: 8px;
  --lab-radius: 12px;
  --lab-radius-lg: 16px;
  --lab-radius-xl: 20px;
  --lab-shadow: 0 10px 28px rgba(23, 34, 43, 0.08);
  --lab-shadow-lg: 0 18px 52px rgba(23, 34, 43, 0.1);
  --lab-shadow-focus: 0 0 0 4px var(--lab-focus-ring);
  --lab-gap-sm: 10px;
  --lab-gap: 16px;
  --lab-gap-lg: 22px;
  --lab-gap-xl: 32px;
  --lab-ease: 0.18s ease;
}

.lab-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lab-hidden {
  display: none !important;
}

.lab-stack > * + * {
  margin-top: var(--lab-gap);
}

.lab-row {
  display: flex;
  gap: var(--lab-gap);
  align-items: center;
  flex-wrap: wrap;
}

.lab-row--between {
  justify-content: space-between;
}

.lab-actions {
  display: flex;
  gap: var(--lab-gap-sm);
  flex-wrap: wrap;
}

.lab-actions > * {
  flex: 1 1 160px;
}

.lab-toolbar {
  display: flex;
  align-items: center;
  gap: var(--lab-gap-sm);
  row-gap: 8px;
  flex-wrap: wrap;
}

.lab-toolbar > * {
  flex: 0 0 auto;
}

.lab-toolbar--spread {
  justify-content: space-between;
}

.lab-section {
  padding: var(--lab-gap-lg);
  background: var(--lab-surface);
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius-lg);
  box-shadow: var(--lab-shadow);
}

.lab-section-title {
  margin: 0 0 6px;
  color: var(--lab-heading);
  font-family: var(--lab-font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lab-section-subtitle {
  margin: 0;
  color: var(--lab-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.lab-app-shell {
  width: 100%;
  max-width: 100%;
  padding-inline: var(--lab-page-pad);
}

.lab-app {
  width: 100%;
  max-width: var(--lab-max-w);
  margin: 0 auto;
  color: var(--lab-text);
  font-family: var(--lab-font);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

.lab-app,
.lab-app *,
.lab-app *::before,
.lab-app *::after {
  box-sizing: border-box;
}

.lab-app__inner {
  padding: var(--lab-gap-lg);
  background: var(--lab-bg);
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius-xl);
  box-shadow: var(--lab-shadow-lg);
}

.lab-app__header {
  display: grid;
  gap: 12px;
  margin-bottom: var(--lab-gap-lg);
}

.lab-app__title {
  margin: 0;
  color: var(--lab-heading);
  font-family: var(--lab-font-display);
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lab-app__description {
  margin: 0;
  max-width: 46ch;
  color: var(--lab-muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

.lab-card {
  background: var(--lab-surface);
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius-lg);
  box-shadow: var(--lab-shadow);
}

.lab-card--soft {
  background: var(--lab-surface-muted);
}

.lab-workspace {
  display: grid;
  gap: var(--lab-gap);
  margin-bottom: var(--lab-gap);
  align-content: start;
}

.lab-panel {
  padding: var(--lab-gap);
  background: var(--lab-surface);
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius-lg);
  box-shadow: var(--lab-shadow);
}

.lab-panel--muted {
  background: rgba(255, 255, 255, 0.56);
}

.lab-panel--inactive {
  opacity: 0.68;
}

.lab-stat {
  display: grid;
  gap: 5px;
  min-width: 120px;
  padding: 14px 16px;
  background: var(--lab-surface-strong);
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius);
  box-shadow: 2px 2px 0 rgba(33, 50, 58, 0.1);
}

.lab-stat__label {
  color: var(--lab-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lab-stat__value {
  color: var(--lab-heading);
  font-family: var(--lab-font-display);
  font-size: 1.35rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lab-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.lab-stats > * {
  flex: 0 0 auto;
}

.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--lab-border);
  border-radius: 999px;
  background: rgba(247, 237, 212, 0.88);
  color: var(--lab-muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
}

.lab-chip--accent {
  border-color: rgba(32, 56, 74, 0.24);
  background: var(--lab-accent-bg);
  color: var(--lab-accent);
}

.lab-chip--success {
  border-color: var(--lab-success-border);
  background: var(--lab-success-bg);
  color: var(--lab-success);
}

.lab-chip--danger {
  border-color: var(--lab-danger-border);
  background: var(--lab-danger-bg);
  color: var(--lab-danger);
}

.lab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--lab-btn-h);
  padding: 10px 16px;
  border: 1.5px solid var(--lab-border);
  border-radius: 999px;
  background: var(--lab-surface-strong);
  color: var(--lab-text);
  font-family: var(--lab-font);
  font-size: 0.94rem;
  font-weight: 700;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--lab-ease),
    border-color var(--lab-ease),
    color var(--lab-ease),
    box-shadow var(--lab-ease),
    transform 0.1s;
  box-shadow: var(--lab-shadow);
}

.lab-btn:hover {
  border-color: var(--lab-border-strong);
  box-shadow: 4px 4px 0 rgba(33, 50, 58, 0.16);
  transform: translateY(-1px);
}

.lab-btn:active {
  transform: translateY(0);
  box-shadow: 2px 2px 0 rgba(33, 50, 58, 0.14);
}

.lab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.lab-btn:focus-visible {
  outline: none;
  box-shadow: var(--lab-shadow-focus);
}

.lab-btn--primary {
  background: var(--lab-accent);
  border-color: var(--lab-ink);
  color: var(--lab-accent-contrast);
  box-shadow: 3px 3px 0 rgba(33, 50, 58, 0.18);
}

.lab-btn--primary:hover {
  background: var(--lab-navy-soft);
  border-color: var(--lab-ink);
}

.lab-btn--secondary {
  background: rgba(215, 173, 69, 0.88);
  border-color: rgba(123, 86, 49, 0.32);
  color: var(--lab-ink);
}

.lab-btn--secondary:hover {
  background: rgba(201, 154, 50, 0.9);
  border-color: rgba(123, 86, 49, 0.4);
}

.lab-btn--ghost {
  background: transparent;
  border-color: var(--lab-border);
  color: var(--lab-muted);
}

.lab-btn--ghost:hover {
  background: rgba(247, 237, 212, 0.64);
  border-color: var(--lab-border-strong);
  color: var(--lab-text);
}

.lab-btn--danger {
  background: var(--lab-danger);
  border-color: rgba(123, 86, 49, 0.34);
  color: var(--lab-paper-light);
}

.lab-btn--sm {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.82rem;
}

.lab-btn--lg {
  min-height: var(--lab-btn-h-lg);
  padding: 13px 20px;
  font-size: 1rem;
}

.lab-btn--full {
  width: 100%;
}

.lab-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}

.lab-tabs--segmented {
  padding: 5px;
  background: rgba(234, 215, 178, 0.82);
  border: 1.5px solid var(--lab-border);
  border-radius: 999px;
}

.lab-tab {
  flex: 1;
  min-height: var(--lab-btn-h);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--lab-muted);
  font-family: var(--lab-font);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background var(--lab-ease),
    border-color var(--lab-ease),
    color var(--lab-ease),
    box-shadow var(--lab-ease),
    transform 0.1s;
}

.lab-tab:hover {
  background: rgba(247, 237, 212, 0.88);
  color: var(--lab-heading);
}

.lab-tab:focus-visible {
  outline: none;
  box-shadow: var(--lab-shadow-focus);
}

.lab-tab:active {
  transform: scale(0.985);
}

.lab-tab[aria-selected="true"],
.lab-tab--active {
  border-color: var(--lab-ink);
  background: var(--lab-accent);
  color: var(--lab-accent-contrast);
  box-shadow: 3px 3px 0 rgba(33, 50, 58, 0.18);
}

.lab-stepper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lab-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--lab-border);
  border-radius: 999px;
  background: rgba(247, 237, 212, 0.88);
  color: var(--lab-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.lab-step--active {
  border-color: rgba(199, 137, 24, 0.34);
  background: rgba(199, 137, 24, 0.14);
  color: var(--lab-accent-dark);
}

.lab-step--done {
  border-color: var(--lab-success-border);
  background: var(--lab-success-bg);
  color: var(--lab-success);
}

.lab-field {
  display: grid;
  gap: 6px;
}

.lab-label {
  display: block;
  margin-bottom: 6px;
  color: var(--lab-heading);
  font-size: 0.88rem;
  font-weight: 700;
}

.lab-input,
.lab-select,
.lab-textarea {
  display: block;
  width: 100%;
  min-height: var(--lab-input-h);
  padding: 11px 14px;
  border: 1.5px solid var(--lab-border);
  border-radius: 14px;
  background: rgba(247, 237, 212, 0.86);
  color: var(--lab-text);
  font: inherit;
  transition:
    border-color var(--lab-ease),
    box-shadow var(--lab-ease),
    background var(--lab-ease);
}

.lab-textarea {
  min-height: 120px;
  resize: vertical;
}

.lab-input::placeholder,
.lab-textarea::placeholder {
  color: var(--lab-muted);
}

.lab-input:hover,
.lab-select:hover,
.lab-textarea:hover {
  border-color: var(--lab-border-strong);
}

.lab-input:focus-visible,
.lab-select:focus-visible,
.lab-textarea:focus-visible {
  outline: none;
  border-color: rgba(176, 116, 17, 0.48);
  box-shadow: var(--lab-shadow-focus);
}

.lab-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lab-choice {
  min-height: var(--lab-btn-h);
  padding: 14px 12px;
  border: 1.5px solid var(--lab-border);
  border-radius: 18px;
  background: rgba(247, 237, 212, 0.82);
  color: var(--lab-text);
  font-family: var(--lab-font);
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: none;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition:
    background var(--lab-ease),
    border-color var(--lab-ease),
    color var(--lab-ease),
    transform 0.1s,
    box-shadow var(--lab-ease);
}

.lab-choice:hover {
  border-color: rgba(123, 86, 49, 0.4);
  background: rgba(234, 215, 178, 0.92);
  color: var(--lab-accent);
}

.lab-choice:focus-visible {
  outline: none;
  box-shadow: var(--lab-shadow-focus);
}

.lab-choice:active {
  transform: scale(0.99);
}

.lab-choice[aria-pressed="true"],
.lab-choice--selected {
  border-color: rgba(166, 108, 8, 0.34);
  background: rgba(199, 137, 24, 0.16);
  color: var(--lab-accent-dark);
}

.lab-choice--good {
  border-color: var(--lab-success-border);
  background: var(--lab-success-bg);
  color: var(--lab-success);
}

.lab-choice--bad {
  border-color: var(--lab-danger-border);
  background: var(--lab-danger-bg);
  color: var(--lab-danger);
}

.lab-choice:disabled,
.lab-choice[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.lab-feedback {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  min-height: 52px;
  border: 1.5px solid var(--lab-border);
  border-radius: 16px;
  background: rgba(247, 237, 212, 0.82);
  color: var(--lab-muted);
  font-size: 0.92rem;
  line-height: 1.45;
  animation: lab-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lab-feedback--good {
  border-color: var(--lab-success-border);
  background: var(--lab-success-bg);
  color: var(--lab-success);
}

.lab-feedback--bad {
  border-color: var(--lab-danger-border);
  background: var(--lab-danger-bg);
  color: var(--lab-danger);
}

.lab-feedback--warn {
  border-color: var(--lab-warning-border);
  background: var(--lab-warning-bg);
  color: var(--lab-warning);
}

.lab-settings-drawer {
  margin-top: var(--lab-gap);
  border-top: 1px solid rgba(120, 98, 47, 0.12);
  padding-top: 14px;
}

.lab-divider {
  height: 1px;
  border: 0;
  background: rgba(120, 98, 47, 0.12);
}

@keyframes lab-pop {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .lab-app-shell {
    padding-inline: var(--lab-page-pad-sm);
  }

  .lab-app__inner,
  .lab-section {
    padding: 16px;
    border-radius: 22px;
  }

  .lab-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lab-actions > * {
    flex: none;
    width: 100%;
  }

  .lab-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lab-choice-grid {
    grid-template-columns: 1fr;
  }

  .lab-toolbar--spread {
    justify-content: flex-start;
  }
}

@media (min-width: 760px) {
  .lab-app__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

@media (min-width: 520px) {
  .lab-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 680px) {
  .lab-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Forced tab styling for ear-training plugins where shared segmented tabs caused visual overrides. */
#fff-lab-kadence-app .lab-tabs,
.slovensko-akordi-wrap .lab-tabs,
.sl-int__app .lab-tabs {
  display: flex;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  flex-wrap: wrap;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#fff-lab-kadence-app .lab-tabs.lab-tabs--segmented,
.slovensko-akordi-wrap .lab-tabs.lab-tabs--segmented,
.sl-int__app .lab-tabs.lab-tabs--segmented {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#fff-lab-kadence-app .lab-tab,
.slovensko-akordi-wrap .lab-tab,
.sl-int__app .lab-tab {
  flex: 1 1 0;
  min-height: var(--lab-btn-h);
  padding: 14px 16px !important;
  border: 1.5px solid var(--lab-border) !important;
  border-radius: 16px !important;
  background: var(--lab-surface-strong) !important;
  color: var(--lab-muted) !important;
  box-shadow: var(--lab-shadow) !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
}

#fff-lab-kadence-app .lab-tab:hover,
.slovensko-akordi-wrap .lab-tab:hover,
.sl-int__app .lab-tab:hover {
  background: var(--lab-accent-bg) !important;
  border-color: var(--lab-border-strong) !important;
  color: var(--lab-accent) !important;
}

#fff-lab-kadence-app .lab-tab[aria-selected="true"],
#fff-lab-kadence-app .lab-tab--active,
.slovensko-akordi-wrap .lab-tab[aria-selected="true"],
.slovensko-akordi-wrap .lab-tab--active,
.sl-int__app .lab-tab[aria-selected="true"],
.sl-int__app .lab-tab--active {
  background: var(--lab-accent) !important;
  border-color: var(--lab-ink) !important;
  color: var(--lab-accent-contrast) !important;
  box-shadow: 3px 3px 0 rgba(33, 50, 58, 0.18) !important;
}

#fff-lab-kadence-app .lab-tab[aria-selected="false"],
.slovensko-akordi-wrap .lab-tab[aria-selected="false"],
.sl-int__app .lab-tab[aria-selected="false"] {
  box-shadow: none !important;
}

.lab-app button,
.lab-app .lab-btn,
.lab-app .lab-tab,
.lab-app .lab-choice {
  text-transform: none !important;
}

/* Scoped compatibility adapter for older plugin markup. This gives legacy
   local controls the shared app language without touching theme chrome. */
.lab-app :where(.fff-btn, .btn, .btn-primary, .btn-secondary, .btn-danger, .button, input[type="submit"]),
.lab-app :where(button):not(.lab-choice):not(.lab-tab):not(.lab-btn) {
  min-height: var(--lab-btn-h);
  padding: 10px 16px;
  border: 1.5px solid var(--lab-border);
  border-radius: 999px;
  background: var(--lab-surface-strong);
  color: var(--lab-text);
  font-family: var(--lab-font);
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--lab-shadow);
  transition:
    background var(--lab-ease),
    border-color var(--lab-ease),
    color var(--lab-ease),
    box-shadow var(--lab-ease),
    transform 0.1s;
}

.lab-app :where(.fff-btn-primary, .btn-primary, .is-primary, input[type="submit"]) {
  background: var(--lab-accent);
  border-color: var(--lab-accent-dark);
  color: var(--lab-accent-contrast);
}

.lab-app :where(.fff-btn-secondary, .btn-secondary, .is-secondary) {
  background: var(--lab-accent-bg);
  border-color: rgba(36, 56, 77, 0.2);
  color: var(--lab-accent);
}

.lab-app :where(.fff-btn-danger, .btn-danger, .is-danger) {
  background: var(--lab-danger);
  border-color: var(--lab-danger-border);
  color: #fffdf8;
}

.lab-app :where(.fff-btn, .btn, .btn-primary, .btn-secondary, .btn-danger, .button, button, input[type="submit"]):hover {
  border-color: var(--lab-border-strong);
  transform: translateY(-1px);
}

.lab-app :where(.fff-btn, .btn, .btn-primary, .btn-secondary, .btn-danger, .button, button, input[type="submit"]):focus-visible {
  outline: none;
  box-shadow: var(--lab-shadow-focus);
}

.lab-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]), select, textarea) {
  min-height: var(--lab-input-h);
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius);
  background: var(--lab-surface-strong);
  color: var(--lab-text);
  font-family: var(--lab-font);
  box-shadow: none;
}

.lab-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]), select, textarea):focus {
  border-color: var(--lab-accent);
  outline: none;
  box-shadow: var(--lab-shadow-focus);
}

.lab-icon-btn {
  inline-size: var(--lab-btn-h);
  min-inline-size: var(--lab-btn-h);
  min-block-size: var(--lab-btn-h);
  padding: 0;
  border-radius: 999px;
}

.lab-status,
.lab-feedback,
.lab-toast,
.lab-empty-state,
.lab-error-state,
.lab-offline-state,
.lab-permission-gate,
.lab-progress-summary,
.lab-audio-transport {
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius-lg);
  background: var(--lab-surface);
  color: var(--lab-text);
  box-shadow: var(--lab-shadow);
}

.lab-status,
.lab-feedback,
.lab-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--lab-gap-sm);
  padding: 12px 14px;
}

.lab-status[data-state="success"],
.lab-feedback[data-state="success"] {
  border-color: var(--lab-success-border);
  background: var(--lab-success-bg);
  color: var(--lab-success);
}

.lab-status[data-state="error"],
.lab-feedback[data-state="error"] {
  border-color: var(--lab-danger-border);
  background: var(--lab-danger-bg);
  color: var(--lab-danger);
}

.lab-status[data-state="warning"],
.lab-feedback[data-state="warning"],
.lab-offline-state {
  border-color: var(--lab-warning-border);
  background: var(--lab-warning-bg);
  color: var(--lab-warning);
}

.lab-empty-state,
.lab-error-state,
.lab-offline-state,
.lab-permission-gate {
  display: grid;
  gap: var(--lab-gap);
  padding: var(--lab-gap-lg);
}

.lab-progress-summary,
.lab-audio-transport {
  display: grid;
  gap: var(--lab-gap-sm);
  padding: var(--lab-gap);
}

.lab-bottom-action-bar {
  position: sticky;
  inset-block-end: calc(var(--lab-nav-height, 70px) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lab-gap-sm);
  align-items: center;
  justify-content: center;
  padding: 10px var(--lab-page-pad-sm);
  margin-block-start: var(--lab-gap);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius-lg);
  background: var(--lab-app-topbar, var(--lab-surface-strong));
  box-shadow: var(--lab-shadow);
  backdrop-filter: blur(14px);
}

.lab-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--lab-page-pad);
  background: rgba(23, 34, 43, 0.48);
}

.lab-modal[hidden] {
  display: none;
}

.lab-modal__panel {
  inline-size: min(100%, 560px);
  max-block-size: min(760px, calc(100vh - 2 * var(--lab-page-pad)));
  overflow: auto;
  padding: var(--lab-gap-lg);
  border: 1.5px solid var(--lab-border);
  border-radius: var(--lab-radius-xl);
  background: var(--lab-surface-strong);
  box-shadow: var(--lab-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .lab-app *,
  .lab-modal *,
  .lab-bottom-action-bar {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}