/**
 * SYNCTONIC CSS — Source Index
 * ------------------------------------------------------------------
 * IMPORT ORDER IS AN ARCHITECTURAL DECISION, NOT A CONVENIENCE.
 *
 * 1. Tokens          — raw values every later layer consumes
 * 2. Reset           — normalize UA defaults before anything styles
 * 3. Auto-styling    — semantic HTML, zero specificity via :where()
 * 4. Effects         — glass + ambient, consumed by components next
 * 5. Components      — sync-* explicit classes (Milestone 2+)
 * 6. Utilities       — layout helpers, highest "normal" specificity
 * 7. Themes          — token overrides, must load after base tokens
 *                      but can appear anywhere since it only touches
 *                      custom properties, not selectors
 * 8. A11y            — LAST. Focus rings and motion-safety must be
 *                      able to override any hover/transform effect
 *                      defined above, unconditionally.
 * ------------------------------------------------------------------
 *//**
 * SYNCTONIC CSS — Design Tokens
 * ------------------------------------------------------------------
 * Every value a component needs should live here. Components must
 * consume tokens, never hardcode raw values. This is what makes
 * theming possible without duplicating component styles.
 *
 * Tokens are defined on :root (light, default) and re-mapped by
 * themes (src/themes/*.css) and dark mode (src/base/dark-mode.css).
 * ------------------------------------------------------------------
 */

:root {
  color-scheme: light;

  /* ============================================================
     COLOR — base surface & content colors
     ============================================================ */
  --sync-bg: #f4f5f7;
  --sync-bg-rgb: 244, 245, 247;
  --sync-surface: #ffffff;
  --sync-surface-rgb: 255, 255, 255;
  --sync-surface-hover: #ffffff;
  --sync-surface-hover-rgb: 255, 255, 255;

  --sync-text: #14161a;
  --sync-text-muted: #5a5f6b;
  --sync-text-subtle: #8b8f99;
  --sync-text-on-accent: #ffffff;

  --sync-border: rgba(20, 22, 26, 0.1);
  --sync-border-strong: rgba(20, 22, 26, 0.18);

  /* Accent — a restrained two-stop identity, not a rainbow */
  --sync-accent: #4f6bff;
  --sync-accent-rgb: 79, 107, 255;
  --sync-accent-2: #8a5cf6;
  --sync-accent-2-rgb: 138, 92, 246;
  --sync-accent-hover: #3d59f2;
  --sync-accent-active: #2f49d8;

  /* Semantic state colors */
  --sync-success: #1c9a6c;
  --sync-success-rgb: 28, 154, 108;
  --sync-warning: #b8790a;
  --sync-warning-rgb: 184, 121, 10;
  --sync-danger: #d1403f;
  --sync-danger-rgb: 209, 64, 63;
  --sync-info: #4f6bff;
  --sync-info-rgb: 79, 107, 255;

  /* ============================================================
     GLASS — material system inputs
     Consumed by src/effects/glass.css to build the material levels.
     ============================================================ */
  --sync-glass-opacity: 0.6;
  --sync-glass-blur: 16px;
  --sync-glass-saturation: 1.4;
  --sync-glass-border: rgba(255, 255, 255, 0.4);
  --sync-glass-highlight: rgba(255, 255, 255, 0.6);
  --sync-glass-shadow-color: 20, 22, 26;

  /* ============================================================
     LIQUID GLASS — ultra-realistic specular glass physics
     ============================================================ */
  --sync-liquid-bg: rgba(255, 255, 255, 0.55);
  --sync-liquid-bg-hover: rgba(255, 255, 255, 0.75);
  --sync-liquid-bg-active: rgba(255, 255, 255, 0.85);
  --sync-liquid-border: rgba(255, 255, 255, 0.8);
  --sync-liquid-highlight-top: rgba(255, 255, 255, 0.95);
  --sync-liquid-highlight-bottom: rgba(255, 255, 255, 0.35);
  --sync-liquid-inner-bevel:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.05),
    inset 0 0 16px 0 rgba(255, 255, 255, 0.45);
  --sync-liquid-shadow:
    0 16px 36px rgba(20, 22, 26, 0.08),
    0 4px 12px rgba(20, 22, 26, 0.04),
    0 1px 2px rgba(20, 22, 26, 0.04);
  --sync-liquid-shadow-hover:
    0 22px 48px rgba(20, 22, 26, 0.12),
    0 8px 20px rgba(20, 22, 26, 0.06),
    0 1px 3px rgba(20, 22, 26, 0.04);
  --sync-liquid-shadow-active:
    0 6px 16px rgba(20, 22, 26, 0.08),
    0 2px 6px rgba(20, 22, 26, 0.04);
  --sync-liquid-blur: 24px;
  --sync-liquid-saturation: 1.8;
  --sync-liquid-refraction-shadow: 0 4px 8px rgba(20, 22, 26, 0.12);

  /* Button sizing scale */
  --sync-btn-h-xs: 28px;
  --sync-btn-px-xs: 0.75rem;
  --sync-btn-font-xs: 0.75rem;
  --sync-btn-h-sm: 36px;
  --sync-btn-px-sm: 1.125rem;
  --sync-btn-font-sm: 0.875rem;
  --sync-btn-h-md: 46px;
  --sync-btn-px-md: 1.75rem;
  --sync-btn-font-md: 1rem;
  --sync-btn-h-lg: 58px;
  --sync-btn-px-lg: 2.5rem;
  --sync-btn-font-lg: 1.1875rem;
  --sync-btn-h-xl: 70px;
  --sync-btn-px-xl: 3.25rem;
  --sync-btn-font-xl: 1.375rem;

  /* ============================================================
     RADIUS
     ============================================================ */
  --sync-radius-xs: 6px;
  --sync-radius-sm: 10px;
  --sync-radius: 14px;
  --sync-radius-lg: 20px;
  --sync-radius-xl: 28px;
  --sync-radius-full: 999px;

  /* ============================================================
     SHADOWS — layered, soft, never harsh
     ============================================================ */
  --sync-shadow-sm:
    0 1px 2px rgba(20, 22, 26, 0.04),
    0 1px 1px rgba(20, 22, 26, 0.03);
  --sync-shadow:
    0 4px 16px rgba(20, 22, 26, 0.06),
    0 2px 6px rgba(20, 22, 26, 0.04);
  --sync-shadow-lg:
    0 12px 32px rgba(20, 22, 26, 0.10),
    0 4px 12px rgba(20, 22, 26, 0.05);
  --sync-shadow-glow:
    0 0 0 1px rgba(var(--sync-accent-rgb), 0.12),
    0 8px 24px rgba(var(--sync-accent-rgb), 0.18);

  /* ============================================================
     MOTION
     ============================================================ */
  --sync-duration-fast: 120ms;
  --sync-duration-normal: 220ms;
  --sync-duration-slow: 420ms;

  --sync-ease-fluid: cubic-bezier(0.4, 0, 0.2, 1);
  --sync-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sync-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ============================================================
     SPACING — 4px base scale
     ============================================================ */
  --sync-space-3xs: 0.25rem;  /* 4px */
  --sync-space-2xs: 0.5rem;   /* 8px */
  --sync-space-xs: 0.75rem;   /* 12px */
  --sync-space-sm: 1rem;      /* 16px */
  --sync-space-md: 1.5rem;    /* 24px */
  --sync-space-lg: 2rem;      /* 32px */
  --sync-space-xl: 3rem;      /* 48px */
  --sync-space-2xl: 4rem;     /* 64px */
  --sync-space-3xl: 6rem;     /* 96px */

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --sync-font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --sync-font-mono:
    "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono", Menlo,
    Consolas, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --sync-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --sync-text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --sync-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --sync-text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
  --sync-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --sync-text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 1.9375rem);
  --sync-text-3xl: clamp(1.9375rem, 1.6rem + 1.7vw, 2.625rem);
  --sync-text-4xl: clamp(2.4375rem, 1.9rem + 2.7vw, 3.5rem);

  --sync-leading-tight: 1.15;
  --sync-leading-snug: 1.35;
  --sync-leading-normal: 1.6;
  --sync-leading-relaxed: 1.75;

  --sync-weight-normal: 400;
  --sync-weight-medium: 500;
  --sync-weight-semibold: 600;
  --sync-weight-bold: 700;

  --sync-tracking-tight: -0.02em;
  --sync-tracking-normal: 0;
  --sync-tracking-wide: 0.02em;

  /* ============================================================
     Z-INDEX SCALE — named layers so components never guess
     ============================================================ */
  --sync-z-dropdown: 1000;
  --sync-z-sticky: 1100;
  --sync-z-sidebar: 1200;
  --sync-z-modal-backdrop: 1300;
  --sync-z-modal: 1310;
  --sync-z-toast: 1400;
  --sync-z-tooltip: 1500;

  /* ============================================================
     FOCUS RING — one definition, reused everywhere
     ============================================================ */
  --sync-focus-ring-color: rgba(var(--sync-accent-rgb), 0.55);
  --sync-focus-ring-width: 3px;
  --sync-focus-ring-offset: 2px;

  /* ============================================================
     CONTAINER — layout scale
     ============================================================ */
  --sync-container-max: 1280px;
  --sync-container-padding: clamp(1rem, 4vw, 2.5rem);

  /* ============================================================
     AMBIENT — lighting engine defaults (see src/effects/ambient.css)
     Consolidated here rather than a second :root block so there is
     exactly one canonical place themes need to override.
     ============================================================ */
  --sync-ambient-opacity: 0.9;
  --sync-ambient-blur: 70px;
  --sync-ambient-speed: 18s;
  --sync-ambient-color-1: rgba(var(--sync-accent-rgb), 0.5);
  --sync-ambient-color-2: rgba(var(--sync-accent-2-rgb), 0.45);
  --sync-ambient-color-3: rgba(var(--sync-accent-rgb), 0.28);

  /* Page-level backdrop wash (applied to bare <body> by auto-styling).
     Deliberately more restrained than .sync-ambient's own opacity,
     since it sits behind ALL page content, not a single section. */
  --sync-page-backdrop-opacity-1: 0.16;
  --sync-page-backdrop-opacity-2: 0.12;
}

/**
 * SYNCTONIC CSS — Reset
 * ------------------------------------------------------------------
 * A modern, opinionated reset. Removes user-agent inconsistencies
 * without stripping useful semantics (e.g. we keep list markers off
 * only inside sync-styled nav/menu contexts, not globally).
 * ------------------------------------------------------------------
 */

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

* {
  margin: 0;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  text-align: inherit;
}

button:disabled {
  cursor: not-allowed;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Respect reduced motion globally as a hard floor — components may
   add MORE restraint under this query, never less. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * SYNCTONIC CSS — Semantic Auto-Styling
 * ------------------------------------------------------------------
 * THE KEY ARCHITECTURAL DECISION IN THIS FRAMEWORK.
 *
 * Bare elements (button, input, .card-like <section>, etc.) get
 * styled automatically using the SAME tokens the explicit .sync-*
 * components use. But they're wrapped in :where(), which has ZERO
 * specificity contribution — so a single class on the element,
 * even one unrelated to Synctonic, silently wins. This means:
 *
 *   <button>Click</button>                → auto-styled
 *   <button class="sync-button-primary">  → sync-button-primary wins
 *   <button class="my-custom-btn">        → my-custom-btn wins
 *
 * No !important. No specificity war. No load-order dependency.
 * This is what makes "zero config" and "full control" coexist.
 *
 * Escape hatches:
 *   <body class="sync-no-auto">   → disables auto-styling document-wide
 *   <div class="sync-raw">        → disables auto-styling for a subtree
 * ------------------------------------------------------------------
 */

/* ============================================================
   ESCAPE HATCH GUARD
   Every rule below is scoped to :not(.sync-no-auto):not(.sync-no-auto *)
   so opting out is a single class, not a fight against the cascade.
   ============================================================ */

:where(body:not(.sync-no-auto)) {
  background: var(--sync-bg);
  color: var(--sync-text);
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-base);
  line-height: var(--sync-leading-normal);
  min-height: 100vh;
}

/* Ambient backdrop for the page — subtle, controlled entirely through
   --sync-page-backdrop-opacity-* tokens (see tokens.css) so it never
   overpowers content and themes can retune it without touching this file. */
:where(body:not(.sync-no-auto):not(.sync-raw body, body.sync-raw)) {
  background-image:
    radial-gradient(
      circle at 15% -10%,
      rgba(var(--sync-accent-rgb), var(--sync-page-backdrop-opacity-1)),
      transparent 55%
    ),
    radial-gradient(
      circle at 85% 110%,
      rgba(var(--sync-accent-2-rgb), var(--sync-page-backdrop-opacity-2)),
      transparent 55%
    );
  background-attachment: fixed;
}

/* ---------------- Typography ---------------- */

:where(h1:not(.sync-no-auto h1, .sync-raw h1, h1.sync-raw)) {
  font-size: var(--sync-text-4xl);
  font-weight: var(--sync-weight-bold);
  line-height: var(--sync-leading-tight);
  letter-spacing: var(--sync-tracking-tight);
  margin-bottom: var(--sync-space-md);
}

:where(h2:not(.sync-no-auto h2, .sync-raw h2, h2.sync-raw)) {
  font-size: var(--sync-text-3xl);
  font-weight: var(--sync-weight-bold);
  line-height: var(--sync-leading-tight);
  letter-spacing: var(--sync-tracking-tight);
  margin-bottom: var(--sync-space-sm);
}

:where(h3:not(.sync-no-auto h3, .sync-raw h3, h3.sync-raw)) {
  font-size: var(--sync-text-2xl);
  font-weight: var(--sync-weight-semibold);
  line-height: var(--sync-leading-snug);
  margin-bottom: var(--sync-space-sm);
}

:where(h4:not(.sync-no-auto h4, .sync-raw h4, h4.sync-raw)) {
  font-size: var(--sync-text-xl);
  font-weight: var(--sync-weight-semibold);
  line-height: var(--sync-leading-snug);
  margin-bottom: var(--sync-space-xs);
}

:where(h5:not(.sync-no-auto h5, .sync-raw h5, h5.sync-raw),
       h6:not(.sync-no-auto h6, .sync-raw h6, h6.sync-raw)) {
  font-size: var(--sync-text-lg);
  font-weight: var(--sync-weight-semibold);
  line-height: var(--sync-leading-snug);
  margin-bottom: var(--sync-space-xs);
}

:where(p:not(.sync-no-auto p, .sync-raw p, p.sync-raw)) {
  color: var(--sync-text-muted);
  line-height: var(--sync-leading-relaxed);
  margin-bottom: var(--sync-space-sm);
  max-width: 68ch;
}

:where(a:not(.sync-no-auto a, .sync-raw a, a.sync-raw)) {
  color: var(--sync-accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--sync-duration-fast) var(--sync-ease-fluid);
}

:where(a:not(.sync-no-auto a, .sync-raw a, a.sync-raw):hover) {
  color: var(--sync-accent-hover);
  text-decoration: underline;
}

:where(small:not(.sync-no-auto small, .sync-raw small, small.sync-raw)) {
  font-size: var(--sync-text-sm);
  color: var(--sync-text-subtle);
}

:where(code:not(.sync-no-auto code, .sync-raw code, code.sync-raw),
       pre:not(.sync-no-auto pre, .sync-raw pre, pre.sync-raw)) {
  font-family: var(--sync-font-mono);
  font-size: 0.9em;
  background: rgba(var(--sync-bg-rgb), 0.6);
  border: 1px solid var(--sync-border);
  border-radius: var(--sync-radius-xs);
}

:where(code:not(.sync-no-auto code, .sync-raw code, code.sync-raw)) {
  padding: 0.15em 0.4em;
}

:where(pre:not(.sync-no-auto pre, .sync-raw pre, pre.sync-raw)) {
  padding: var(--sync-space-sm);
  overflow-x: auto;
}

:where(pre code) {
  background: none;
  border: none;
  padding: 0;
}

/* ---------------- Structural elements ---------------- */

:where(header:not(.sync-no-auto header, .sync-raw header, header.sync-raw)) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sync-space-md);
  padding: var(--sync-space-sm) var(--sync-container-padding);
  background: rgba(var(--sync-surface-rgb), var(--sync-glass-opacity));
  backdrop-filter: saturate(var(--sync-glass-saturation)) blur(var(--sync-glass-blur));
  -webkit-backdrop-filter: saturate(var(--sync-glass-saturation)) blur(var(--sync-glass-blur));
  border-bottom: 1px solid var(--sync-glass-border);
  position: sticky;
  top: 0;
  z-index: var(--sync-z-sticky);
}

:where(header:not(.sync-no-auto header, .sync-raw header, header.sync-raw) h1) {
  font-size: var(--sync-text-xl);
  margin-bottom: 0;
}

:where(nav:not(.sync-no-auto nav, .sync-raw nav, nav.sync-raw)) {
  display: flex;
  align-items: center;
  gap: var(--sync-space-md);
}

:where(nav:not(.sync-no-auto nav, .sync-raw nav, nav.sync-raw) a) {
  color: var(--sync-text-muted);
  font-weight: var(--sync-weight-medium);
  font-size: var(--sync-text-sm);
}

:where(nav:not(.sync-no-auto nav, .sync-raw nav, nav.sync-raw) a:hover) {
  color: var(--sync-text);
  text-decoration: none;
}

:where(main:not(.sync-no-auto main, .sync-raw main, main.sync-raw)) {
  display: block;
  max-width: var(--sync-container-max);
  margin-inline: auto;
  padding: var(--sync-space-xl) var(--sync-container-padding);
}

:where(section:not(.sync-no-auto section, .sync-raw section, section.sync-raw)) {
  margin-block: var(--sync-space-xl);
}

:where(footer:not(.sync-no-auto footer, .sync-raw footer, footer.sync-raw)) {
  padding: var(--sync-space-lg) var(--sync-container-padding);
  border-top: 1px solid var(--sync-border);
  color: var(--sync-text-subtle);
  font-size: var(--sync-text-sm);
}

:where(aside:not(.sync-no-auto aside, .sync-raw aside, aside.sync-raw)) {
  padding: var(--sync-space-sm);
  border-radius: var(--sync-radius);
  background: rgba(var(--sync-surface-rgb), var(--sync-glass-opacity));
  border: 1px solid var(--sync-glass-border);
}

/* ---------------- Interactive elements ---------------- */
/* These share tokens with .sync-button / .sync-input so bare and
   classed elements are visually consistent — see components/*.css */

:where(button:not(.sync-no-auto button, .sync-raw button, button.sync-raw)):not([role="switch"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sync-space-xs);
  min-height: var(--sync-btn-h-md);
  padding: 0 var(--sync-btn-px-md);
  font-weight: var(--sync-weight-medium);
  font-size: var(--sync-btn-font-md);
  color: var(--sync-text);
  background: var(--sync-liquid-bg);
  border: 1px solid var(--sync-liquid-border);
  border-radius: var(--sync-radius-full);
  backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow);
  transition:
    transform var(--sync-duration-normal) var(--sync-ease-spring),
    box-shadow var(--sync-duration-normal) var(--sync-ease-fluid),
    background var(--sync-duration-normal) var(--sync-ease-fluid),
    border-color var(--sync-duration-normal) var(--sync-ease-fluid),
    filter var(--sync-duration-fast) var(--sync-ease-fluid);
}

:where(button:not(.sync-no-auto button, .sync-raw button, button.sync-raw):not([role="switch"]):hover) {
  transform: translateY(-2px);
  background: var(--sync-liquid-bg-hover);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-hover);
  filter: brightness(1.03);
}

:where(button:not(.sync-no-auto button, .sync-raw button, button.sync-raw):not([role="switch"]):active) {
  transform: translateY(1px) scale(0.985);
  background: var(--sync-liquid-bg-active);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-active);
  filter: brightness(0.98);
}

:where(button:not(.sync-no-auto button, .sync-raw button, button.sync-raw):disabled) {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.2);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not(.sync-no-auto input, .sync-raw input, input.sync-raw),
       textarea:not(.sync-no-auto textarea, .sync-raw textarea, textarea.sync-raw),
       select:not(.sync-no-auto select, .sync-raw select, select.sync-raw)) {
  display: block;
  width: 100%;
  padding: var(--sync-space-2xs) var(--sync-space-sm);
  font-size: var(--sync-text-base);
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.55);
  border: 1px solid var(--sync-liquid-border);
  border-radius: var(--sync-radius-sm);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 0 8px rgba(255, 255, 255, 0.35),
    var(--sync-shadow-sm);
  transition:
    border-color var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid),
    background var(--sync-duration-fast) var(--sync-ease-fluid);
}

:where(input:not(.sync-no-auto input, .sync-raw input, input.sync-raw)::placeholder,
       textarea:not(.sync-no-auto textarea, .sync-raw textarea, textarea.sync-raw)::placeholder) {
  color: var(--sync-text-subtle);
}

:where(input:not(.sync-no-auto input, .sync-raw input, input.sync-raw):focus-visible,
       textarea:not(.sync-no-auto textarea, .sync-raw textarea, textarea.sync-raw):focus-visible,
       select:not(.sync-no-auto select, .sync-raw select, select.sync-raw):focus-visible) {
  outline: none;
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 0 0 var(--sync-focus-ring-width) var(--sync-focus-ring-color),
    var(--sync-shadow);
}

:where(table:not(.sync-no-auto table, .sync-raw table, table.sync-raw)) {
  width: 100%;
  border-radius: var(--sync-radius-sm);
  overflow: hidden;
}

:where(table:not(.sync-no-auto table, .sync-raw table, table.sync-raw) th) {
  text-align: left;
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-semibold);
  color: var(--sync-text-muted);
  padding: var(--sync-space-2xs) var(--sync-space-xs);
  border-bottom: 1px solid var(--sync-border-strong);
}

:where(table:not(.sync-no-auto table, .sync-raw table, table.sync-raw) td) {
  padding: var(--sync-space-2xs) var(--sync-space-xs);
  border-bottom: 1px solid var(--sync-border);
}

:where(details:not(.sync-no-auto details, .sync-raw details, details.sync-raw)) {
  border: 1px solid var(--sync-border);
  border-radius: var(--sync-radius-sm);
  padding: var(--sync-space-xs) var(--sync-space-sm);
}

:where(summary:not(.sync-no-auto summary, .sync-raw summary, summary.sync-raw)) {
  cursor: pointer;
  font-weight: var(--sync-weight-medium);
}

:where(progress:not(.sync-no-auto progress, .sync-raw progress, progress.sync-raw)) {
  width: 100%;
  height: 8px;
  border-radius: var(--sync-radius-full);
  overflow: hidden;
  border: none;
}

:where(progress:not(.sync-no-auto progress, .sync-raw progress, progress.sync-raw))::-webkit-progress-bar {
  background: var(--sync-border);
}

:where(progress:not(.sync-no-auto progress, .sync-raw progress, progress.sync-raw))::-webkit-progress-value {
  background: linear-gradient(90deg, var(--sync-accent), var(--sync-accent-2));
}

/**
 * SYNCTONIC CSS — Glass Material System
 * ------------------------------------------------------------------
 * Glass is not `background: rgba(255,255,255,.1)`. Each material
 * level is a coordinated step across opacity, blur, saturation,
 * border-highlight, and shadow depth — all driven by tokens so
 * themes can reshape the entire material scale at once.
 *
 * Levels, lightest to heaviest:
 *   sync-glass-clear   near-invisible, just enough separation
 *   sync-glass-soft     gentle surface, low blur
 *   sync-glass           default — the workhorse of the framework
 *   sync-glass-strong   more opaque, more saturated, for emphasis
 *   sync-glass-solid    nearly opaque, for modals/toasts needing legibility
 *
 * All levels support a `data-sync-glow="accent|success|warning|danger"`
 * attribute for a tinted highlight border, kept subtle by default.
 * ------------------------------------------------------------------
 */

@property --sync-glass-tilt {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}

.sync-glass-clear,
.sync-glass-soft,
.sync-glass,
.sync-glass-strong,
.sync-glass-solid {
  position: relative;
  isolation: isolate;
  border-radius: var(--sync-radius);
  border: 1px solid var(--sync-glass-border);
  background-clip: padding-box;
}

/* Fallback for browsers without backdrop-filter: fall back to a
   more opaque flat surface so content stays legible without blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sync-glass-clear,
  .sync-glass-soft,
  .sync-glass,
  .sync-glass-strong,
  .sync-glass-solid {
    background: var(--sync-surface);
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .sync-glass-clear {
    background: rgba(var(--sync-surface-rgb), 0.28);
    backdrop-filter: blur(6px) saturate(1.15);
    -webkit-backdrop-filter: blur(6px) saturate(1.15);
    box-shadow: var(--sync-shadow-sm);
  }

  .sync-glass-soft {
    background: rgba(var(--sync-surface-rgb), 0.45);
    backdrop-filter: blur(10px) saturate(1.25);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
    box-shadow: var(--sync-shadow-sm);
  }

  .sync-glass {
    background: rgba(var(--sync-surface-rgb), var(--sync-glass-opacity));
    backdrop-filter: blur(var(--sync-glass-blur)) saturate(var(--sync-glass-saturation));
    -webkit-backdrop-filter: blur(var(--sync-glass-blur)) saturate(var(--sync-glass-saturation));
    box-shadow: var(--sync-shadow);
  }

  .sync-glass-strong {
    background: rgba(var(--sync-surface-rgb), 0.78);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: var(--sync-shadow-lg);
  }

  .sync-glass-solid {
    background: rgba(var(--sync-surface-rgb), 0.94);
    backdrop-filter: blur(32px) saturate(1.6);
    -webkit-backdrop-filter: blur(32px) saturate(1.6);
    box-shadow: var(--sync-shadow-lg);
  }

  /* ============================================================
     LIQUID GLASS PRIMITIVES
     Hyper-realistic glass lens physics with specular light reflection
     ============================================================ */
  .sync-glass-liquid {
    background: var(--sync-liquid-bg);
    backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);
    -webkit-backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);
    border: 1px solid var(--sync-liquid-border);
    box-shadow: var(--sync-liquid-inner-bevel), var(--sync-liquid-shadow);
  }
}

/* Top highlight — a thin light seam along the upper edge, the detail
   that reads as "glass" rather than "translucent plastic". Uses a
   pseudo-element mask so it never interferes with content. */
.sync-glass-clear::before,
.sync-glass-soft::before,
.sync-glass::before,
.sync-glass-strong::before,
.sync-glass-solid::before,
.sync-glass-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    var(--sync-glass-tilt),
    var(--sync-glass-highlight) 0%,
    rgba(255, 255, 255, 0.4) 15%,
    transparent 35%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Liquid lens specular highlight overlay for hyper-realistic glass */
.sync-glass-liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.25) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Tinted glow border — opt-in via data attribute, kept subtle */
[data-sync-glow="accent"] {
  border-color: rgba(var(--sync-accent-rgb), 0.45);
  box-shadow: var(--sync-shadow), 0 0 0 1px rgba(var(--sync-accent-rgb), 0.15), 0 8px 24px rgba(var(--sync-accent-rgb), 0.2);
}
[data-sync-glow="success"] {
  border-color: rgba(var(--sync-success-rgb), 0.45);
  box-shadow: var(--sync-shadow), 0 0 0 1px rgba(var(--sync-success-rgb), 0.15), 0 8px 24px rgba(var(--sync-success-rgb), 0.2);
}
[data-sync-glow="warning"] {
  border-color: rgba(var(--sync-warning-rgb), 0.45);
  box-shadow: var(--sync-shadow), 0 0 0 1px rgba(var(--sync-warning-rgb), 0.15), 0 8px 24px rgba(var(--sync-warning-rgb), 0.2);
}
[data-sync-glow="danger"] {
  border-color: rgba(var(--sync-danger-rgb), 0.45);
  box-shadow: var(--sync-shadow), 0 0 0 1px rgba(var(--sync-danger-rgb), 0.15), 0 8px 24px rgba(var(--sync-danger-rgb), 0.2);
}

/* Performance guard: on pages with many glass surfaces, expensive
   blur compounds fast. Reduce blur radius under this opt-in class,
   applied by developers to long lists of glass cards if needed. */
.sync-glass-perf .sync-glass-clear,
.sync-glass-perf .sync-glass-soft,
.sync-glass-perf .sync-glass,
.sync-glass-perf .sync-glass-strong,
.sync-glass-perf .sync-glass-solid,
.sync-glass-perf .sync-glass-liquid {
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}

/* ============================================================
   AMBIENT SPOTLIGHTS & MESH ORBS (Atmospheric lighting)
   ============================================================ */

.sync-spotlight {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  height: 450px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--sync-accent-rgb), 0.28) 0%,
    rgba(var(--sync-accent-2-rgb), 0.14) 45%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.sync-orb {
  position: absolute;
  border-radius: var(--sync-radius-full);
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

/**
 * SYNCTONIC CSS — Ambient Lighting Engine
 * ------------------------------------------------------------------
 * Layered radial-gradient light fields for atmospheric depth.
 * Applied to a container via class; every visual parameter is a
 * token so intensity/color/blur/speed are fully overridable inline:
 *
 *   <div class="sync-ambient" style="--sync-ambient-opacity: 0.4;">
 *
 * Animation is OPT-IN via `sync-ambient-animated`, never automatic —
 * per spec §11 "Do not make animations mandatory."
 * ------------------------------------------------------------------
 */

/* Ambient tokens (--sync-ambient-*) are defined once, in
   src/tokens/tokens.css, alongside the rest of the token system. */

.sync-ambient {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sync-ambient::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  opacity: var(--sync-ambient-opacity);
  filter: blur(var(--sync-ambient-blur));
  background:
    radial-gradient(circle at 20% 20%, var(--sync-ambient-color-1), transparent 45%),
    radial-gradient(circle at 80% 30%, var(--sync-ambient-color-2), transparent 45%),
    radial-gradient(circle at 50% 90%, var(--sync-ambient-color-3), transparent 50%);
  pointer-events: none;
}

/* Single-color variants — override just color-1, others fade out */
.sync-ambient-purple {
  --sync-ambient-color-1: rgba(138, 92, 246, 0.35);
  --sync-ambient-color-2: rgba(138, 92, 246, 0.18);
  --sync-ambient-color-3: rgba(79, 107, 255, 0.12);
}

.sync-ambient-pink {
  --sync-ambient-color-1: rgba(236, 72, 153, 0.3);
  --sync-ambient-color-2: rgba(236, 72, 153, 0.15);
  --sync-ambient-color-3: rgba(138, 92, 246, 0.12);
}

.sync-ambient-blue {
  --sync-ambient-color-1: rgba(79, 107, 255, 0.35);
  --sync-ambient-color-2: rgba(79, 107, 255, 0.18);
  --sync-ambient-color-3: rgba(56, 189, 248, 0.12);
}

.sync-ambient-multi {
  --sync-ambient-color-1: rgba(79, 107, 255, 0.3);
  --sync-ambient-color-2: rgba(138, 92, 246, 0.26);
  --sync-ambient-color-3: rgba(236, 72, 153, 0.16);
}

/* Animated variant — slow, ambient drift only. Opt-in class. */
.sync-ambient-animated::before {
  animation: sync-ambient-drift var(--sync-ambient-speed) var(--sync-ease-fluid) infinite alternate;
}

@keyframes sync-ambient-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-3%, 2%) scale(1.05);
  }
  100% {
    transform: translate(2%, -3%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sync-ambient-animated::before {
    animation: none;
  }
}

/* Ambient content stays above the light layer without extra markup */
.sync-ambient > :not([class*="sync-ambient"]) {
  position: relative;
  z-index: 1;
}
/**
 * SYNCTONIC CSS — Chromatic & Holographic Glass Shaders
 * ------------------------------------------------------------------
 * Physical prism dispersion, holographic spectral sheens, and optical
 * noise textures for hyper-realistic and futuristic glass surfaces.
 * ------------------------------------------------------------------
 */

/* ============================================================
   CHROMATIC PRISM DISPERSION
   Simulates light splitting through a glass edge into rainbow hues.
   ============================================================ */

.sync-glass-chromatic {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.4);
}

.sync-glass-chromatic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    var(--sync-glass-tilt, 135deg),
    rgba(255, 0, 128, 0.8) 0%,
    rgba(128, 0, 255, 0.7) 20%,
    rgba(0, 212, 255, 0.8) 40%,
    rgba(0, 255, 170, 0.7) 60%,
    rgba(255, 221, 0, 0.6) 80%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
  transition: opacity var(--sync-duration-normal) var(--sync-ease-fluid);
}

.sync-glass-chromatic:hover::before {
  opacity: 1;
}

/* ============================================================
   HOLOGRAPHIC SPECTRAL SHEEN
   Iridescent dynamic sheen that shifts across the surface.
   ============================================================ */

.sync-glass-holographic {
  position: relative;
  overflow: hidden;
}

.sync-glass-holographic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    calc(var(--sync-glass-tilt, 135deg) + 45deg),
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 105, 180, 0.2) 25%,
    rgba(0, 255, 255, 0.2) 50%,
    rgba(147, 112, 219, 0.2) 75%,
    transparent 100%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
  transition: opacity var(--sync-duration-normal) var(--sync-ease-fluid);
}

.sync-glass-holographic:hover::after {
  opacity: 0.9;
}

/* Chromatic Liquid Glass Button */
.sync-btn-chromatic {
  position: relative;
  isolation: isolate;
  background: var(--sync-liquid-bg);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow),
    0 0 24px rgba(168, 85, 247, 0.25);
}

.sync-btn-chromatic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    var(--sync-glass-tilt, 135deg),
    rgba(255, 105, 180, 0.9) 0%,
    rgba(0, 212, 255, 0.9) 35%,
    rgba(168, 85, 247, 0.9) 70%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.sync-btn-chromatic:hover {
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-hover),
    0 0 36px rgba(0, 212, 255, 0.4);
}

/* ============================================================
   OPTICAL NOISE & FROSTED GRAIN
   Subtle SVG turbulence grain for tactile physical glass feel.
   ============================================================ */

.sync-glass-grain {
  position: relative;
}

.sync-glass-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* Chromatic Ambient Glow */
[data-sync-glow="chromatic"] {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow),
    0 0 32px rgba(236, 72, 153, 0.25),
    0 0 48px rgba(59, 130, 246, 0.2);
}
/* Core Components */
/**
 * SYNCTONIC CSS — Liquid Glass Buttons
 * ------------------------------------------------------------------
 * Hyper-realistic 3D liquid glass buttons with specular edge highlights,
 * inner lens refraction, diffuse ambient drop shadow, and tactile physics.
 * ------------------------------------------------------------------
 */

.sync-btn,
.sync-button,
.sync-btn-liquid {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sync-space-xs);
  min-height: var(--sync-btn-h-md);
  padding: 0 var(--sync-btn-px-md);
  font-family: var(--sync-font-sans);
  font-size: var(--sync-btn-font-md);
  font-weight: var(--sync-weight-medium);
  letter-spacing: var(--sync-tracking-tight);
  line-height: 1;
  color: var(--sync-text);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;

  /* Pill shape default for authentic liquid glass look */
  border-radius: var(--sync-radius-full);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  background-clip: padding-box;

  /* 3D Glass refraction & lens depth */
  backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);

  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow);

  transition:
    transform var(--sync-duration-normal) var(--sync-ease-spring),
    box-shadow var(--sync-duration-normal) var(--sync-ease-fluid),
    background var(--sync-duration-normal) var(--sync-ease-fluid),
    border-color var(--sync-duration-normal) var(--sync-ease-fluid),
    filter var(--sync-duration-fast) var(--sync-ease-fluid);
}

/* ============================================================
   SPECULAR REFLECTION HIGHLIGHTS (Top rim light & bottom reflex)
   ============================================================ */

.sync-btn::before,
.sync-button::before,
.sync-btn-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--sync-liquid-highlight-top) 0%,
    rgba(255, 255, 255, 0.45) 20%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-btn::after,
.sync-button::after,
.sync-btn-liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to top,
    var(--sync-liquid-highlight-bottom) 0%,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Hover & tactile active states */
.sync-btn:hover,
.sync-button:hover,
.sync-btn-liquid:hover {
  transform: translateY(-2px);
  background: var(--sync-liquid-bg-hover);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-hover);
  filter: brightness(1.03);
}

.sync-btn:active,
.sync-button:active,
.sync-btn-liquid:active {
  transform: translateY(1px) scale(0.985);
  background: var(--sync-liquid-bg-active);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-active);
  filter: brightness(0.98);
}

.sync-btn:disabled,
.sync-button:disabled,
.sync-btn-liquid:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--sync-shadow-sm) !important;
  filter: grayscale(0.2) !important;
}

/* ============================================================
   BUTTON VARIANTS
   ============================================================ */

/* Primary — Vibrant Luminous Liquid Glass */
.sync-btn-primary {
  color: var(--sync-text-on-accent);
  background: linear-gradient(135deg, rgba(var(--sync-accent-rgb), 0.88), rgba(var(--sync-accent-2-rgb), 0.92));
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
    0 12px 30px rgba(var(--sync-accent-rgb), 0.35),
    0 4px 12px rgba(var(--sync-accent-rgb), 0.2);
}

.sync-btn-primary::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.25) 30%,
    transparent 60%
  );
}

.sync-btn-primary:hover {
  background: linear-gradient(135deg, rgba(var(--sync-accent-rgb), 0.96), rgba(var(--sync-accent-2-rgb), 0.98));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
    0 18px 40px rgba(var(--sync-accent-rgb), 0.45),
    0 6px 16px rgba(var(--sync-accent-rgb), 0.3);
}

.sync-btn-primary:active {
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 16px rgba(var(--sync-accent-rgb), 0.35);
}

/* Secondary / Frosted Subtle Glass */
.sync-btn-secondary,
.sync-btn-soft {
  background: rgba(var(--sync-surface-rgb), 0.4);
  border-color: var(--sync-border);
  color: var(--sync-text);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.6),
    var(--sync-shadow-sm);
}

.sync-btn-secondary:hover,
.sync-btn-soft:hover {
  background: rgba(var(--sync-surface-rgb), 0.65);
  border-color: var(--sync-border-strong);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.8),
    var(--sync-shadow);
}

/* Ghost / Crystal Glass Outline */
.sync-btn-ghost,
.sync-btn-outline {
  background: transparent;
  border-color: var(--sync-border-strong);
  color: var(--sync-text);
  box-shadow: none;
}

.sync-btn-ghost:hover,
.sync-btn-outline:hover {
  background: rgba(var(--sync-surface-rgb), 0.35);
  border-color: var(--sync-accent);
  color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
    0 0 16px rgba(var(--sync-accent-rgb), 0.15);
}

/* Ambient Glow Liquid Button */
.sync-btn-glow {
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow),
    0 0 24px rgba(var(--sync-accent-rgb), 0.28);
}

.sync-btn-glow:hover {
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-hover),
    0 0 36px rgba(var(--sync-accent-rgb), 0.45);
}

/* Semantic Status Variants */
.sync-btn-success {
  background: rgba(var(--sync-success-rgb), 0.16);
  border-color: rgba(var(--sync-success-rgb), 0.4);
  color: var(--sync-success);
}
.sync-btn-success:hover {
  background: rgba(var(--sync-success-rgb), 0.28);
  border-color: rgba(var(--sync-success-rgb), 0.6);
  box-shadow: var(--sync-liquid-inner-bevel), 0 10px 24px rgba(var(--sync-success-rgb), 0.25);
}

.sync-btn-warning {
  background: rgba(var(--sync-warning-rgb), 0.16);
  border-color: rgba(var(--sync-warning-rgb), 0.4);
  color: var(--sync-warning);
}
.sync-btn-warning:hover {
  background: rgba(var(--sync-warning-rgb), 0.28);
  border-color: rgba(var(--sync-warning-rgb), 0.6);
  box-shadow: var(--sync-liquid-inner-bevel), 0 10px 24px rgba(var(--sync-warning-rgb), 0.25);
}

.sync-btn-danger {
  background: rgba(var(--sync-danger-rgb), 0.16);
  border-color: rgba(var(--sync-danger-rgb), 0.4);
  color: var(--sync-danger);
}
.sync-btn-danger:hover {
  background: rgba(var(--sync-danger-rgb), 0.28);
  border-color: rgba(var(--sync-danger-rgb), 0.6);
  box-shadow: var(--sync-liquid-inner-bevel), 0 10px 24px rgba(var(--sync-danger-rgb), 0.25);
}

/* ============================================================
   LIQUID SHINE SWEEP EFFECT
   ============================================================ */

.sync-btn-shine {
  overflow: hidden;
}

.sync-btn-shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 2;
  transition: none;
}

.sync-btn-shine:hover::after {
  left: 200%;
  transition: left 0.75s ease-in-out;
}

/* ============================================================
   SIZES & SHAPES
   ============================================================ */

/* Extra Small */
.sync-btn-xs {
  min-height: var(--sync-btn-h-xs);
  padding: 0 var(--sync-btn-px-xs);
  font-size: var(--sync-btn-font-xs);
}

/* Small */
.sync-btn-sm {
  min-height: var(--sync-btn-h-sm);
  padding: 0 var(--sync-btn-px-sm);
  font-size: var(--sync-btn-font-sm);
}

/* Medium (Default) */
.sync-btn-md {
  min-height: var(--sync-btn-h-md);
  padding: 0 var(--sync-btn-px-md);
  font-size: var(--sync-btn-font-md);
}

/* Large */
.sync-btn-lg {
  min-height: var(--sync-btn-h-lg);
  padding: 0 var(--sync-btn-px-lg);
  font-size: var(--sync-btn-font-lg);
}

/* Extra Large */
.sync-btn-xl {
  min-height: var(--sync-btn-h-xl);
  padding: 0 var(--sync-btn-px-xl);
  font-size: var(--sync-btn-font-xl);
}

/* Shapes */
.sync-btn-pill {
  border-radius: var(--sync-radius-full);
}

.sync-btn-rounded {
  border-radius: var(--sync-radius);
}

.sync-btn-square {
  border-radius: var(--sync-radius-xs);
}

/* Icon Buttons */
.sync-btn-icon {
  padding: 0;
  width: var(--sync-btn-h-md);
  height: var(--sync-btn-h-md);
  border-radius: var(--sync-radius-full);
}

.sync-btn-icon.sync-btn-xs { width: var(--sync-btn-h-xs); height: var(--sync-btn-h-xs); }
.sync-btn-icon.sync-btn-sm { width: var(--sync-btn-h-sm); height: var(--sync-btn-h-sm); }
.sync-btn-icon.sync-btn-lg { width: var(--sync-btn-h-lg); height: var(--sync-btn-h-lg); }
.sync-btn-icon.sync-btn-xl { width: var(--sync-btn-h-xl); height: var(--sync-btn-h-xl); }

/* Full width */
.sync-btn-block {
  display: flex;
  width: 100%;
}

/* Button Groups */
.sync-btn-group {
  display: inline-flex;
  align-items: center;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.3);
  padding: 3px;
  border: 1px solid var(--sync-liquid-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sync-btn-group .sync-btn,
.sync-btn-group .sync-button {
  box-shadow: none;
  border: 1px solid transparent;
}

.sync-btn-group .sync-btn:hover,
.sync-btn-group .sync-button:hover {
  transform: none;
  background: var(--sync-liquid-bg-hover);
  box-shadow: var(--sync-shadow-sm);
}

.sync-btn-group .sync-btn.sync-active,
.sync-btn-group .sync-button.sync-active {
  background: var(--sync-liquid-bg-active);
  border-color: var(--sync-liquid-border);
  box-shadow: var(--sync-liquid-inner-bevel), var(--sync-shadow-sm);
}

/**
 * SYNCTONIC CSS — Liquid Glass Cards
 * ------------------------------------------------------------------
 * Translucent surfaces with specular rim light, ambient occlusion shadows,
 * and optional interactive lift states.
 * ------------------------------------------------------------------
 */

.sync-card,
.sync-card-liquid {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: var(--sync-radius-lg);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  background-clip: padding-box;
  padding: var(--sync-space-lg);
  color: var(--sync-text);

  backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.03);
  -webkit-backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.03);

  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow);

  transition:
    transform var(--sync-duration-normal) var(--sync-ease-spring),
    box-shadow var(--sync-duration-normal) var(--sync-ease-fluid),
    border-color var(--sync-duration-normal) var(--sync-ease-fluid),
    background var(--sync-duration-normal) var(--sync-ease-fluid);
}

/* Top specular reflection rim for card */
.sync-card::before,
.sync-card-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--sync-liquid-highlight-top) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Card variants */
.sync-card-frosted {
  background: rgba(var(--sync-surface-rgb), 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--sync-border);
}

.sync-card-interactive {
  cursor: pointer;
}

.sync-card-interactive:hover {
  transform: translateY(-4px);
  background: var(--sync-liquid-bg-hover);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-hover);
}

.sync-card-interactive:active {
  transform: translateY(-1px) scale(0.995);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow);
}

/* Card sections */
.sync-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sync-space-sm);
  margin-bottom: var(--sync-space-md);
  padding-bottom: var(--sync-space-sm);
  border-bottom: 1px solid var(--sync-border);
}

.sync-card-header h1,
.sync-card-header h2,
.sync-card-header h3,
.sync-card-header h4,
.sync-card-header h5,
.sync-card-header h6 {
  margin: 0;
}

.sync-card-body {
  flex: 1 1 auto;
}

.sync-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sync-space-sm);
  margin-top: var(--sync-space-md);
  padding-top: var(--sync-space-sm);
  border-top: 1px solid var(--sync-border);
}

/* Card Glow Effect */
.sync-card-glow {
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow),
    0 0 40px rgba(var(--sync-accent-rgb), 0.18);
}
/**
 * SYNCTONIC CSS — Liquid Glass Inputs & Form Varieties
 * ------------------------------------------------------------------
 * Luminous glass inputs with specular lens physics, crisp reflections,
 * and 5 distinct material varieties (Liquid, Frosted, Clear, Glow, Chromatic).
 * ------------------------------------------------------------------
 */

/* ============================================================
   BASE INPUT SPECIFICATION
   ============================================================ */

.sync-input,
.sync-textarea {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-base);
  line-height: var(--sync-leading-normal);
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.2);
  border: 1px solid var(--sync-liquid-border);
  border-radius: var(--sync-radius);
  outline: none;

  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);

  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.04);

  transition:
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    border-color var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-input::placeholder,
.sync-textarea::placeholder {
  color: var(--sync-text-subtle);
  opacity: 0.85;
}

.sync-input:focus,
.sync-textarea:focus {
  background: rgba(var(--sync-surface-rgb), 0.45);
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 3px rgba(var(--sync-accent-rgb), 0.25),
    0 4px 20px rgba(var(--sync-accent-rgb), 0.15);
}

.sync-input:disabled,
.sync-textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(var(--sync-surface-rgb), 0.1);
  box-shadow: none;
}

/* ============================================================
   5 FORM MATERIAL VARIETIES
   ============================================================ */

/* 1. Ultra Liquid Glass (Default) */
.sync-input-liquid {
  background: rgba(var(--sync-surface-rgb), 0.15);
  border: 1px solid var(--sync-liquid-border);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-sm);
}

.sync-input-liquid:focus {
  background: rgba(var(--sync-surface-rgb), 0.35);
  border-color: var(--sync-accent);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    0 0 0 3px rgba(var(--sync-accent-rgb), 0.28),
    var(--sync-shadow);
}

/* 2. Frosted Soft Glass */
.sync-input-frosted {
  background: rgba(var(--sync-surface-rgb), 0.65);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    0 4px 16px rgba(0, 0, 0, 0.06);
}

.sync-input-frosted:focus {
  background: rgba(var(--sync-surface-rgb), 0.85);
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    0 0 0 3px rgba(var(--sync-accent-rgb), 0.2);
}

/* 3. Crystal Clear Glass */
.sync-input-clear {
  background: rgba(var(--sync-surface-rgb), 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.03);
}

.sync-input-clear:focus {
  background: rgba(var(--sync-surface-rgb), 0.45);
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(var(--sync-accent-rgb), 0.2);
}

/* 4. Ambient Luminous Glow */
.sync-input-glow {
  background: rgba(var(--sync-surface-rgb), 0.55);
  border: 1px solid rgba(var(--sync-accent-rgb), 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 0 16px rgba(var(--sync-accent-rgb), 0.2);
}

.sync-input-glow:focus {
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 0 24px rgba(var(--sync-accent-rgb), 0.4),
    0 0 0 3px rgba(var(--sync-accent-rgb), 0.3);
}

/* 5. Chromatic Prism Glass */
.sync-input-chromatic {
  position: relative;
  background: rgba(var(--sync-surface-rgb), 0.5);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 4px 16px rgba(168, 85, 247, 0.15);
}

.sync-input-chromatic:focus {
  border-color: transparent;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 0 0 3px rgba(236, 72, 153, 0.3),
    0 0 24px rgba(6, 182, 212, 0.25);
}

/* ============================================================
   SIZES & SHAPES
   ============================================================ */

.sync-input-xs {
  padding: 0.3rem 0.6rem;
  font-size: var(--sync-text-xs);
  border-radius: var(--sync-radius-xs);
}

.sync-input-sm {
  padding: 0.45rem 0.75rem;
  font-size: var(--sync-text-sm);
  border-radius: var(--sync-radius-sm);
}

.sync-input-md {
  padding: 0.65rem 1rem;
  font-size: var(--sync-text-base);
  border-radius: var(--sync-radius);
}

.sync-input-lg {
  padding: 0.85rem 1.25rem;
  font-size: var(--sync-text-lg);
  border-radius: var(--sync-radius-lg);
}

.sync-input-pill {
  border-radius: var(--sync-radius-full);
  padding-inline: 1.4rem;
}

/* ============================================================
   INPUT ICON WRAPPERS & SEAMLESS PASSWORD REVEAL
   ============================================================ */

.sync-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.sync-input-icon-left,
.sync-input-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sync-text-subtle);
  font-size: 1rem;
  z-index: 2;
}

.sync-input-icon-left {
  left: 1rem;
  pointer-events: none;
}

.sync-input-icon-right {
  right: 1rem;
}

.sync-input-has-icon-left {
  padding-left: 2.6rem;
}

.sync-input-has-icon-right {
  padding-right: 2.6rem;
}

/* Seamless Password Toggle (No heavy border or grey box) */
.sync-password-toggle {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--sync-text-subtle);
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity var(--sync-duration-fast) var(--sync-ease-fluid), transform var(--sync-duration-fast) var(--sync-ease-spring);
}

.sync-password-toggle:hover {
  opacity: 1;
  transform: scale(1.15);
  color: var(--sync-text);
}

/* Password Strength Meter */
.sync-password-meter {
  width: 100%;
  height: 4px;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.35);
  margin-top: 6px;
  overflow: hidden;
}

.sync-password-meter-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease, background 0.3s ease;
}

.sync-password-meter-weak { width: 33%; background: var(--sync-danger); }
.sync-password-meter-medium { width: 66%; background: var(--sync-warning); }
.sync-password-meter-strong { width: 100%; background: var(--sync-success); }

/* ============================================================
   VALIDATION STATES (Luminous specular halos)
   ============================================================ */

.sync-input.sync-is-valid {
  border-color: var(--sync-success);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(34, 197, 94, 0.22);
}

.sync-input.sync-is-invalid {
  border-color: var(--sync-danger);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(239, 68, 68, 0.22);
}

/* Textarea specifics */
.sync-textarea {
  min-height: 90px;
  resize: vertical;
  line-height: var(--sync-leading-normal);
}
/**
 * SYNCTONIC CSS — Form Layouts, Groups & Floating Labels
 * ------------------------------------------------------------------
 * Structural form wrappers, floating label physics, responsive rows,
 * helper hints, and fieldsets.
 * ------------------------------------------------------------------
 */

.sync-form {
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-md);
  width: 100%;
}

.sync-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.sync-label {
  display: inline-block;
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text);
  user-select: none;
}

.sync-label-required::after {
  content: " *";
  color: var(--sync-danger);
}

.sync-form-helper {
  font-size: var(--sync-text-xs);
  color: var(--sync-text-subtle);
  margin-top: 2px;
}

.sync-form-error {
  font-size: var(--sync-text-xs);
  color: var(--sync-danger);
  font-weight: var(--sync-weight-medium);
  margin-top: 2px;
}

.sync-form-success {
  font-size: var(--sync-text-xs);
  color: var(--sync-success);
  font-weight: var(--sync-weight-medium);
  margin-top: 2px;
}

/* ============================================================
   FLOATING LABELS
   Label smoothly scales up into a crisp glass badge on focus.
   ============================================================ */

.sync-form-floating {
  position: relative;
  width: 100%;
}

.sync-form-floating .sync-input,
.sync-form-floating .sync-textarea {
  padding-top: 1.45rem;
  padding-bottom: 0.55rem;
  padding-inline: 1.1rem;
}

.sync-form-floating .sync-label {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-50%);
  font-size: var(--sync-text-sm);
  color: var(--sync-text-subtle);
  pointer-events: none;
  transition:
    top var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-fluid),
    font-size var(--sync-duration-fast) var(--sync-ease-fluid),
    color var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-form-floating .sync-textarea ~ .sync-label {
  top: 1.25rem;
}

.sync-form-floating .sync-input:focus ~ .sync-label,
.sync-form-floating .sync-input:not(:placeholder-shown) ~ .sync-label,
.sync-form-floating .sync-textarea:focus ~ .sync-label,
.sync-form-floating .sync-textarea:not(:placeholder-shown) ~ .sync-label {
  top: 0.45rem;
  transform: translateY(0);
  font-size: 0.72rem;
  font-weight: var(--sync-weight-semibold);
  color: var(--sync-accent);
  letter-spacing: 0.02em;
}

/* ============================================================
   RESPONSIVE FORM GRIDS
   ============================================================ */

.sync-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sync-space-md);
  width: 100%;
}

.sync-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sync-space-md);
}

.sync-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sync-space-md);
}

@media (width <= 768px) {
  .sync-form-grid-2,
  .sync-form-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FIELDSETS & LEGENDS
   ============================================================ */

.sync-fieldset {
  border: 1px solid var(--sync-liquid-border);
  border-radius: var(--sync-radius-lg);
  padding: var(--sync-space-md) var(--sync-space-lg);
  background: rgba(var(--sync-surface-rgb), 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: var(--sync-space-md);
}

.sync-legend {
  padding: 0.2rem 0.65rem;
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-semibold);
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.7);
  border: 1px solid var(--sync-liquid-border);
  border-radius: var(--sync-radius-full);
  box-shadow: var(--sync-shadow-sm);
}

/**
 * SYNCTONIC CSS — Custom Liquid Glass Checkboxes, Radios & Choice Cards
 * ------------------------------------------------------------------
 * Translucent selection controls with spring animation checkmarks,
 * glowing radio dots, and interactive plan choice cards.
 * ------------------------------------------------------------------
 */

/* ============================================================
   CUSTOM LIQUID GLASS CHECKBOX
   ============================================================ */

.sync-checkbox-label,
.sync-radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-2xs);
  font-size: var(--sync-text-sm);
  color: var(--sync-text);
  cursor: pointer;
  user-select: none;
}

.sync-checkbox,
.sync-radio {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: var(--sync-radius-xs);
  border: 1px solid var(--sync-liquid-border);
  background: rgba(var(--sync-surface-rgb), 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    var(--sync-shadow-sm);
  outline: none;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition:
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    border-color var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-spring),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-checkbox::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) scale(0) translateY(-1px);
  transform-origin: center;
  transition: transform var(--sync-duration-fast) var(--sync-ease-spring);
}

.sync-checkbox:checked {
  background: linear-gradient(135deg, var(--sync-accent), var(--sync-accent-2));
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(var(--sync-accent-rgb), 0.4);
}

.sync-checkbox:checked::before {
  transform: rotate(-45deg) scale(1) translateY(-1px);
}

.sync-checkbox:focus-visible,
.sync-radio:focus-visible {
  outline: var(--sync-focus-ring-width) solid var(--sync-focus-ring-color);
  outline-offset: 2px;
}

/* ============================================================
   CUSTOM LIQUID GLASS RADIO
   ============================================================ */

.sync-radio {
  border-radius: var(--sync-radius-full);
}

.sync-radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--sync-radius-full);
  background: #ffffff;
  transform: scale(0);
  transition: transform var(--sync-duration-fast) var(--sync-ease-spring);
}

.sync-radio:checked {
  background: linear-gradient(135deg, var(--sync-accent), var(--sync-accent-2));
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(var(--sync-accent-rgb), 0.4);
}

.sync-radio:checked::before {
  transform: scale(1);
}

/* ============================================================
   SELECTABLE GLASS CHOICE CARDS
   ============================================================ */

.sync-choice-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sync-space-sm);
  width: 100%;
}

.sync-choice-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: var(--sync-radius-lg);
  border: 1px solid var(--sync-liquid-border);
  background: rgba(var(--sync-surface-rgb), 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-sm);
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--sync-duration-fast) var(--sync-ease-spring),
    border-color var(--sync-duration-fast) var(--sync-ease-fluid),
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-choice-card:hover {
  transform: translateY(-2px);
  background: rgba(var(--sync-surface-rgb), 0.65);
  border-color: var(--sync-accent);
}

.sync-choice-card input[type="radio"],
.sync-choice-card input[type="checkbox"] {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.sync-choice-card:has(input:checked) {
  border-color: var(--sync-accent);
  background: rgba(var(--sync-surface-rgb), 0.75);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    0 0 20px rgba(var(--sync-accent-rgb), 0.25),
    var(--sync-shadow);
}

/**
 * SYNCTONIC CSS — Custom Select Dropdowns & Tag Inputs
 * ------------------------------------------------------------------
 * Translucent selects with custom SVG glass chevron arrows,
 * pill variants, and multi-tag chip fields.
 * ------------------------------------------------------------------
 */

.sync-select {
  display: block;
  width: 100%;
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-base);
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.55);
  border: 1px solid var(--sync-liquid-border);
  border-radius: var(--sync-radius-sm);
  outline: none;
  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23888888'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;

  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    var(--sync-shadow-sm);

  transition:
    border-color var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid),
    background var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-select:focus {
  background-color: rgba(var(--sync-surface-rgb), 0.8);
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 0 0 var(--sync-focus-ring-width) var(--sync-focus-ring-color),
    var(--sync-shadow);
}

.sync-select-pill {
  border-radius: var(--sync-radius-full);
  padding-left: var(--sync-space-md);
  padding-right: 2.75rem;
  background-position: right 1.25rem center;
}

/* ============================================================
   MULTI-TAG / CHIP INPUT
   ============================================================ */

.sync-tag-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.65rem;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--sync-radius-sm);
  border: 1px solid var(--sync-liquid-border);
  background: rgba(var(--sync-surface-rgb), 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    var(--sync-shadow-sm);
  transition: border-color var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-tag-input-container:focus-within {
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 0 0 2px rgba(var(--sync-accent-rgb), 0.25);
}

.sync-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 0.2rem 0.6rem;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-accent-rgb), 0.18);
  border: 1px solid rgba(var(--sync-accent-rgb), 0.45);
  color: var(--sync-text);
  font-size: var(--sync-text-xs);
  font-weight: var(--sync-weight-medium);
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.sync-tag-chip-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--sync-text-muted) !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  cursor: pointer;
  transform: none !important;
  transition: all 0.15s ease;
}

.sync-tag-chip-remove:hover {
  background: rgba(var(--sync-danger-rgb), 0.35) !important;
  color: #ffffff !important;
  transform: scale(1.15) !important;
}

.sync-tag-field {
  flex: 1 1 70px;
  min-width: 60px;
  max-width: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-sm);
  color: var(--sync-text);
  padding: 4px 6px;
  min-height: auto;
  height: auto;
}

/**
 * SYNCTONIC CSS — File Upload & Drag-and-Drop Glass Dropzone
 * ------------------------------------------------------------------
 * Translucent upload zones with dashed glass borders, cloud upload icons,
 * dragover luminous glows, and file list preview tags.
 * ------------------------------------------------------------------
 */

/* ============================================================
   INTERACTIVE GLASS DROPZONE
   ============================================================ */

.sync-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sync-space-xs);
  padding: 2.5rem 1.5rem;
  border-radius: var(--sync-radius-lg);
  border: 2px dashed var(--sync-liquid-border);
  background: rgba(var(--sync-surface-rgb), 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--sync-duration-fast) var(--sync-ease-fluid),
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-spring);
}

.sync-dropzone:hover,
.sync-dropzone.sync-dragover {
  border-color: var(--sync-accent);
  background: rgba(var(--sync-surface-rgb), 0.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    0 0 24px rgba(var(--sync-accent-rgb), 0.25);
  transform: translateY(-2px);
}

.sync-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.sync-dropzone-icon {
  font-size: 2.2rem;
  color: var(--sync-accent);
  margin-bottom: 2px;
}

.sync-dropzone-title {
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-semibold);
  color: var(--sync-text);
}

.sync-dropzone-hint {
  font-size: var(--sync-text-xs);
  color: var(--sync-text-subtle);
}

/* File list chip item */
.sync-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-2xs);
  margin-top: var(--sync-space-xs);
  width: 100%;
}

.sync-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.85rem;
  border-radius: var(--sync-radius-sm);
  background: rgba(var(--sync-surface-rgb), 0.55);
  border: 1px solid var(--sync-liquid-border);
  font-size: var(--sync-text-xs);
  color: var(--sync-text);
}

/**
 * SYNCTONIC CSS — PIN & OTP Verification Code Inputs
 * ------------------------------------------------------------------
 * Segmented liquid glass boxes for 2FA / verification codes with
 * focused specular glow transitions.
 * ------------------------------------------------------------------
 */

.sync-otp-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-xs);
}

.sync-otp-box {
  width: 48px;
  height: 56px;
  text-align: center;
  font-family: var(--sync-font-mono);
  font-size: 1.4rem;
  font-weight: var(--sync-weight-bold);
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.55);
  border: 1px solid var(--sync-liquid-border);
  border-radius: var(--sync-radius);
  outline: none;

  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    var(--sync-shadow-sm);

  transition:
    border-color var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-spring),
    background var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-otp-box:focus {
  background: rgba(var(--sync-surface-rgb), 0.85);
  border-color: var(--sync-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 0 0 var(--sync-focus-ring-width) var(--sync-focus-ring-color),
    0 0 16px rgba(var(--sync-accent-rgb), 0.35);
  transform: translateY(-2px) scale(1.04);
}

.sync-otp-divider {
  width: 8px;
  height: 2px;
  background: var(--sync-border-strong);
  border-radius: var(--sync-radius-full);
}

/* Mobile Responsiveness */
@media (width <= 480px) {
  .sync-otp-group {
    gap: 4px;
    width: 100%;
    justify-content: center;
  }

  .sync-otp-box {
    width: clamp(34px, 12vw, 44px);
    height: clamp(42px, 14vw, 52px);
    font-size: 1.15rem;
    border-radius: var(--sync-radius-sm);
  }

  .sync-otp-divider {
    width: 4px;
  }
}
/**
 * SYNCTONIC CSS — Liquid Glass Badges & Tags
 * ------------------------------------------------------------------
 * Translucent micro-capsules with specular rim highlight and vibrant status hues.
 * ------------------------------------------------------------------
 */

.sync-badge,
.sync-badge-liquid {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-3xs);
  padding: 0.2rem 0.65rem;
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-xs);
  font-weight: var(--sync-weight-semibold);
  letter-spacing: var(--sync-tracking-wide);
  line-height: 1;
  border-radius: var(--sync-radius-full);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  color: var(--sync-text);
  white-space: nowrap;
  vertical-align: middle;

  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    var(--sync-shadow-sm);
}

.sync-badge::before,
.sync-badge-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Badge Variants */
.sync-badge-primary {
  background: rgba(var(--sync-accent-rgb), 0.18);
  border-color: rgba(var(--sync-accent-rgb), 0.45);
  color: var(--sync-accent);
}

.sync-badge-success {
  background: rgba(var(--sync-success-rgb), 0.18);
  border-color: rgba(var(--sync-success-rgb), 0.45);
  color: var(--sync-success);
}

.sync-badge-warning {
  background: rgba(var(--sync-warning-rgb), 0.18);
  border-color: rgba(var(--sync-warning-rgb), 0.45);
  color: var(--sync-warning);
}

.sync-badge-danger {
  background: rgba(var(--sync-danger-rgb), 0.18);
  border-color: rgba(var(--sync-danger-rgb), 0.45);
  color: var(--sync-danger);
}

.sync-badge-info {
  background: rgba(var(--sync-info-rgb), 0.18);
  border-color: rgba(var(--sync-info-rgb), 0.45);
  color: var(--sync-info);
}

/* Status Indicator Dot */
.sync-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--sync-radius-full);
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Badge Sizes */
.sync-badge-sm {
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
}

.sync-badge-lg {
  padding: 0.35rem 0.85rem;
  font-size: var(--sync-text-sm);
}

/**
 * SYNCTONIC CSS — Liquid Glass Toggles & Switches
 * ------------------------------------------------------------------
 * Tactile glass capsule toggle tracks with spring-animated glass thumbs.
 * ------------------------------------------------------------------
 */

.sync-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-xs);
  cursor: pointer;
  user-select: none;
}

.sync-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.sync-switch-track {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.5);
  border: 1px solid var(--sync-liquid-border);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.08),
    var(--sync-shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background var(--sync-duration-normal) var(--sync-ease-fluid),
    border-color var(--sync-duration-normal) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-normal) var(--sync-ease-fluid);
}

.sync-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: var(--sync-radius-full);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 6px rgba(20, 22, 26, 0.15),
    0 1px 2px rgba(20, 22, 26, 0.1);
  transition:
    transform var(--sync-duration-normal) var(--sync-ease-spring),
    background var(--sync-duration-normal) var(--sync-ease-fluid);
}

/* Switch Active/Checked state */
.sync-switch input:checked + .sync-switch-track {
  background: linear-gradient(135deg, rgba(var(--sync-accent-rgb), 0.85), rgba(var(--sync-accent-2-rgb), 0.9));
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 16px rgba(var(--sync-accent-rgb), 0.35);
}

.sync-switch input:checked + .sync-switch-track .sync-switch-thumb {
  transform: translateX(22px);
  background: #ffffff;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(var(--sync-accent-rgb), 0.4);
}

/* Focus state */
.sync-switch input:focus-visible + .sync-switch-track {
  outline: var(--sync-focus-ring-width) solid var(--sync-focus-ring-color);
  outline-offset: var(--sync-focus-ring-offset);
}
/**
 * SYNCTONIC CSS — Liquid Glass Segmented Tabs & Nav
 * ------------------------------------------------------------------
 * Floating liquid glass segmented controllers and pill navigation tabs.
 * ------------------------------------------------------------------
 */

.sync-tabs,
.sync-tabs-liquid {
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-3xs);
  padding: 4px;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.45);
  border: 1px solid var(--sync-liquid-border);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    var(--sync-shadow-sm);

  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.sync-tab-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.15rem;
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text-muted);
  text-decoration: none;
  border-radius: var(--sync-radius-full);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    color var(--sync-duration-fast) var(--sync-ease-fluid),
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-tab-item:hover {
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.35);
}

.sync-tab-item.sync-active,
.sync-tab-item[aria-selected="true"] {
  color: var(--sync-text);
  background: var(--sync-liquid-bg);
  border-color: var(--sync-liquid-border);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-sm);
}

.sync-tab-item.sync-active::before,
.sync-tab-item[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0%,
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/**
 * SYNCTONIC CSS — Liquid Glass Modal & Overlays
 * ------------------------------------------------------------------
 * Floating glass dialogs with deep background blur and specular highlights.
 * ------------------------------------------------------------------
 */

.sync-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--sync-z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sync-space-md);
  background: rgba(11, 12, 15, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sync-modal,
.sync-modal-liquid {
  position: relative;
  isolation: isolate;
  z-index: var(--sync-z-modal);
  width: 100%;
  max-width: 540px;
  border-radius: var(--sync-radius-xl);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  padding: var(--sync-space-xl);
  color: var(--sync-text);

  backdrop-filter: blur(32px) saturate(1.8) brightness(1.04);
  -webkit-backdrop-filter: blur(32px) saturate(1.8) brightness(1.04);

  box-shadow:
    var(--sync-liquid-inner-bevel),
    0 24px 64px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.15);

  animation: sync-modal-pop var(--sync-duration-normal) var(--sync-ease-spring);
}

.sync-modal::before,
.sync-modal-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--sync-liquid-highlight-top) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

@keyframes sync-modal-pop {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sync-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sync-space-md);
}

.sync-modal-body {
  margin-bottom: var(--sync-space-lg);
}

.sync-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sync-space-sm);
}

/* Navigation & Shell */

/**
 * SYNCTONIC CSS — Liquid Glass Navbar & Navigation Bar
 * ------------------------------------------------------------------
 * Floating and sticky liquid glass headers with specular edge highlights.
 * ------------------------------------------------------------------
 */

.sync-navbar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sync-space-md);
  padding: var(--sync-space-sm) var(--sync-container-padding);
  background: var(--sync-liquid-bg);
  border-bottom: 1px solid var(--sync-liquid-border);
  backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.04);
  box-shadow: var(--sync-shadow-sm);
  z-index: var(--sync-z-sticky);
}

/* Floating capsule navbar (Apple-style / modern SaaS pill header) */
.sync-navbar-floating {
  position: sticky;
  top: var(--sync-space-md);
  margin-inline: auto;
  max-width: min(var(--sync-container-max), calc(100% - 2rem));
  border-radius: var(--sync-radius-full);
  border: 1px solid var(--sync-liquid-border);
  padding: 0.65rem 1.5rem;
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow);
}

.sync-navbar-floating::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--sync-liquid-highlight-top) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.sync-navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-xs);
  font-size: 1rem;
  font-weight: var(--sync-weight-bold);
  color: var(--sync-text);
  text-decoration: none;
  letter-spacing: var(--sync-tracking-tight);
  white-space: nowrap;
}

.sync-navbar-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sync-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--sync-radius-full);
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--sync-duration-fast) var(--sync-ease-fluid),
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-nav-link:hover {
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.45);
}

.sync-nav-link.sync-active {
  color: var(--sync-text);
  background: var(--sync-liquid-bg);
  border: 1px solid var(--sync-liquid-border);
  box-shadow: var(--sync-liquid-inner-bevel), var(--sync-shadow-xs);
}

.sync-navbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Luxury Circular Icon Action Buttons (Mode, Search, Toggle) */
.sync-navbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sync-radius-full);
  border: 1px solid var(--sync-liquid-border);
  background: rgba(var(--sync-surface-rgb), 0.35);
  color: var(--sync-text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    var(--sync-shadow-xs);
  transition: all var(--sync-duration-fast) var(--sync-ease-fluid);
  flex-shrink: 0;
}

.sync-navbar-icon-btn:hover {
  background: rgba(var(--sync-surface-rgb), 0.7);
  border-color: var(--sync-accent);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(var(--sync-accent-rgb), 0.35);
  color: var(--sync-accent);
}

/* Mobile Hamburger Toggle Button */
.sync-navbar-toggle {
  display: none;
}

.sync-nav-link .sync-nav-icon,
.sync-nav-link .sync-nav-arrow,
.sync-nav-link .sync-kbd,
.sync-navbar-menu-header,
.sync-nav-text-mobile {
  display: none;
}

.sync-nav-text-desktop {
  display: inline;
}

/* ============================================================
   RESPONSIVE NAVBAR (Tablet & Mobile Breakpoints)
   ============================================================ */

@media (width <= 960px) {
  .sync-nav-text-desktop {
    display: none;
  }

  .sync-nav-text-mobile {
    display: inline;
  }

  .sync-navbar-floating {
    max-width: calc(100% - 1.25rem);
    padding: 0.45rem 0.85rem;
    border-radius: var(--sync-radius-full);
  }

  .sync-navbar-toggle {
    display: inline-flex;
  }

  /* Windows 11 Acrylic / visionOS Frosted Sheet */
  .sync-navbar-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 0.65rem;
    border-radius: var(--sync-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(12, 14, 22, 0.92) !important;
    color: var(--sync-text);
    backdrop-filter: blur(48px) saturate(2) brightness(1.04);
    -webkit-backdrop-filter: blur(48px) saturate(2) brightness(1.04);
    box-shadow:
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.25),
      0 20px 60px rgba(0, 0, 0, 0.75),
      0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: all var(--sync-duration-normal) var(--sync-ease-spring);
    pointer-events: none;
    z-index: 9999;
  }

  .sync-navbar-menu.sync-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  .sync-navbar-menu-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem 0.5rem;
    font-size: var(--sync-text-xs);
    font-weight: var(--sync-weight-semibold);
    letter-spacing: var(--sync-tracking-wide);
    color: var(--sync-text-subtle);
    text-transform: uppercase;
    border-bottom: 1px solid var(--sync-border);
    margin-bottom: 0.35rem;
  }

  .sync-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: var(--sync-radius-sm);
    font-size: var(--sync-text-sm);
    font-weight: var(--sync-weight-medium);
    color: var(--sync-text);
    background: transparent;
    border: 1px solid transparent;
    transition:
      background var(--sync-duration-fast) var(--sync-ease-fluid),
      color var(--sync-duration-fast) var(--sync-ease-fluid),
      transform var(--sync-duration-fast) var(--sync-ease-fluid);
  }

  .sync-nav-link .sync-nav-link-main {
    display: flex;
    align-items: center;
    gap: var(--sync-space-xs);
  }

  .sync-nav-link .sync-nav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    width: 20px;
  }

  .sync-nav-link .sync-kbd {
    display: inline-flex !important;
    font-size: 0.68rem;
    height: 18px;
    padding: 0 5px;
    opacity: 0.6;
  }

  .sync-nav-link:hover,
  .sync-nav-link.sync-active {
    background: rgba(var(--sync-surface-rgb), 0.55) !important;
    color: var(--sync-text) !important;
    box-shadow:
      var(--sync-liquid-inner-bevel),
      var(--sync-shadow-xs) !important;
    transform: translateX(2px);
  }

  .sync-nav-link.sync-active .sync-kbd {
    opacity: 1;
    color: var(--sync-accent);
    border-color: var(--sync-accent);
  }

  :root[data-sync-mode="light"] .sync-navbar-menu {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(48px) saturate(1.8);
    -webkit-backdrop-filter: blur(48px) saturate(1.8);
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.9),
      0 20px 60px rgba(0, 0, 0, 0.18),
      0 4px 16px rgba(0, 0, 0, 0.08);
  }

  :root[data-sync-mode="light"] .sync-nav-link {
    color: #1e293b !important;
    background: transparent;
    border-color: transparent;
  }

  :root[data-sync-mode="light"] .sync-nav-link:hover,
  :root[data-sync-mode="light"] .sync-nav-link.sync-active {
    color: var(--sync-accent) !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }
}

@media (width <= 480px) {
  .sync-navbar-floating {
    max-width: calc(100% - 1rem);
    padding: 0.4rem 0.75rem;
  }
}

/**
 * SYNCTONIC CSS — Liquid Glass Sidebar & Drawer
 * ------------------------------------------------------------------
 * Translucent sidebar shells with specular edge highlights and active links.
 * ------------------------------------------------------------------
 */

.sync-sidebar {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 260px;
  min-height: 100vh;
  padding: var(--sync-space-md);
  background: var(--sync-liquid-bg);
  border-right: 1px solid var(--sync-liquid-border);
  backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.03);
  -webkit-backdrop-filter: blur(var(--sync-liquid-blur)) saturate(var(--sync-liquid-saturation)) brightness(1.03);
  box-shadow: var(--sync-shadow-sm);
  z-index: var(--sync-z-sidebar);
}

.sync-sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--sync-space-xs);
  padding: var(--sync-space-xs) var(--sync-space-sm);
  margin-bottom: var(--sync-space-lg);
}

.sync-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-3xs);
  flex: 1 1 auto;
}

.sync-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-radius: var(--sync-radius-sm);
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text-muted);
  text-decoration: none;
  transition:
    color var(--sync-duration-fast) var(--sync-ease-fluid),
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-sidebar-item:hover {
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.45);
  transform: translateX(2px);
}

.sync-sidebar-item.sync-active {
  color: var(--sync-text);
  background: var(--sync-liquid-bg);
  border: 1px solid var(--sync-liquid-border);
  box-shadow: var(--sync-liquid-inner-bevel), var(--sync-shadow-sm);
}

.sync-sidebar-footer {
  padding-top: var(--sync-space-md);
  border-top: 1px solid var(--sync-border);
}

/**
 * SYNCTONIC CSS — Liquid Glass Breadcrumbs
 * ------------------------------------------------------------------
 * Translucent capsule breadcrumb navigation.
 * ------------------------------------------------------------------
 */

.sync-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-2xs);
  padding: 0.35rem 0.85rem;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.45);
  border: 1px solid var(--sync-liquid-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  list-style: none;
  margin: 0;
}

.sync-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font-size: var(--sync-text-xs);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text-muted);
}

.sync-breadcrumb-item a {
  color: var(--sync-text-muted);
  text-decoration: none;
}

.sync-breadcrumb-item a:hover {
  color: var(--sync-text);
}

.sync-breadcrumb-item + .sync-breadcrumb-item::before {
  content: "/";
  padding-right: var(--sync-space-2xs);
  color: var(--sync-text-subtle);
}

.sync-breadcrumb-item.sync-active {
  color: var(--sync-text);
  font-weight: var(--sync-weight-semibold);
}

/**
 * SYNCTONIC CSS — Liquid Glass Pagination
 * ------------------------------------------------------------------
 * Translucent segmented paging controls.
 * ------------------------------------------------------------------
 */

.sync-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-3xs);
  padding: 3px;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.45);
  border: 1px solid var(--sync-liquid-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  list-style: none;
  margin: 0;
}

.sync-page-item {
  display: inline-flex;
}

.sync-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border-radius: var(--sync-radius-full);
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text-muted);
  text-decoration: none;
  transition:
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    color var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-page-link:hover {
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.5);
}

.sync-page-item.sync-active .sync-page-link {
  color: var(--sync-text);
  background: var(--sync-liquid-bg);
  border: 1px solid var(--sync-liquid-border);
  box-shadow: var(--sync-liquid-inner-bevel), var(--sync-shadow-sm);
  font-weight: var(--sync-weight-semibold);
}

/* Feedback & Overlays */

/**
 * SYNCTONIC CSS — Liquid Glass Alerts & Banners
 * ------------------------------------------------------------------
 * Luminous notification callouts with specular rim reflections.
 * ------------------------------------------------------------------
 */

.sync-alert {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: var(--sync-space-sm);
  padding: var(--sync-space-md);
  border-radius: var(--sync-radius);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--sync-liquid-inner-bevel), var(--sync-shadow-sm);
  color: var(--sync-text);
  margin-bottom: var(--sync-space-md);
}

.sync-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7) 0%,
    transparent 40%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.sync-alert-content {
  flex: 1 1 auto;
}

.sync-alert-title {
  font-weight: var(--sync-weight-semibold);
  font-size: var(--sync-text-sm);
  margin-bottom: var(--sync-space-3xs);
}

.sync-alert-body {
  font-size: var(--sync-text-sm);
  color: var(--sync-text-muted);
}

/* Alert Semantic Variants */
.sync-alert-primary {
  background: rgba(var(--sync-accent-rgb), 0.12);
  border-color: rgba(var(--sync-accent-rgb), 0.35);
}
.sync-alert-primary .sync-alert-title { color: var(--sync-accent); }

.sync-alert-success {
  background: rgba(var(--sync-success-rgb), 0.12);
  border-color: rgba(var(--sync-success-rgb), 0.35);
}
.sync-alert-success .sync-alert-title { color: var(--sync-success); }

.sync-alert-warning {
  background: rgba(var(--sync-warning-rgb), 0.12);
  border-color: rgba(var(--sync-warning-rgb), 0.35);
}
.sync-alert-warning .sync-alert-title { color: var(--sync-warning); }

.sync-alert-danger {
  background: rgba(var(--sync-danger-rgb), 0.12);
  border-color: rgba(var(--sync-danger-rgb), 0.35);
}
.sync-alert-danger .sync-alert-title { color: var(--sync-danger); }
/**
 * SYNCTONIC CSS — Liquid Glass Toast Notifications
 * ------------------------------------------------------------------
 * Floating toast notifications with specular depth.
 * ------------------------------------------------------------------
 */

.sync-toast-container {
  position: fixed;
  bottom: var(--sync-space-lg);
  right: var(--sync-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-sm);
  z-index: var(--sync-z-toast);
  pointer-events: none;
}

.sync-toast {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sync-space-sm);
  min-width: 300px;
  max-width: 420px;
  padding: 0.85rem 1.25rem;
  border-radius: var(--sync-radius-full);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  color: var(--sync-text);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-lg);
  animation: sync-toast-slide var(--sync-duration-normal) var(--sync-ease-spring);
}

.sync-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

@keyframes sync-toast-slide {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/**
 * SYNCTONIC CSS — Pure CSS Liquid Glass Tooltips
 * ------------------------------------------------------------------
 * Hover tooltips rendered via data attributes with frosted glass finish.
 * ------------------------------------------------------------------
 */

[data-sync-tooltip] {
  position: relative;
}

[data-sync-tooltip]::after {
  content: attr(data-sync-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.35rem 0.75rem;
  border-radius: var(--sync-radius-sm);
  background: rgba(var(--sync-surface-rgb), 0.85);
  border: 1px solid var(--sync-liquid-border);
  color: var(--sync-text);
  font-size: var(--sync-text-xs);
  font-weight: var(--sync-weight-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    var(--sync-shadow);
  z-index: var(--sync-z-tooltip);
  transition:
    opacity var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-spring),
    visibility var(--sync-duration-fast);
}

[data-sync-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/**
 * SYNCTONIC CSS — Liquid Glass Dropdown Menus
 * ------------------------------------------------------------------
 * Floating glass menu sheets with hover/focus disclosure.
 * ------------------------------------------------------------------
 */

.sync-dropdown {
  position: relative;
  display: inline-block;
}

.sync-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  padding: var(--sync-space-3xs);
  border-radius: var(--sync-radius);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-lg);
  z-index: var(--sync-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transition:
    opacity var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-spring),
    visibility var(--sync-duration-fast);
}

.sync-dropdown:hover .sync-dropdown-menu,
.sync-dropdown:focus-within .sync-dropdown-menu,
.sync-dropdown.sync-open .sync-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.sync-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sync-space-xs);
  width: 100%;
  padding: 0.5rem 0.85rem;
  border-radius: var(--sync-radius-xs);
  font-size: var(--sync-text-sm);
  color: var(--sync-text);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-dropdown-item:hover {
  background: rgba(var(--sync-surface-rgb), 0.5);
}

.sync-dropdown-divider {
  height: 1px;
  margin: var(--sync-space-3xs) 0;
  background: var(--sync-border);
}

/**
 * SYNCTONIC CSS — Liquid Glass Accordion
 * ------------------------------------------------------------------
 * Collapsible disclosure sections with specular borders and smooth springs.
 * ------------------------------------------------------------------
 */

.sync-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-xs);
  width: 100%;
}

.sync-accordion-item {
  border-radius: var(--sync-radius);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: var(--sync-shadow-sm);
  transition: box-shadow var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-accordion-item[open] {
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow);
}

.sync-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  font-weight: var(--sync-weight-medium);
  font-size: var(--sync-text-base);
  color: var(--sync-text);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.sync-accordion-trigger::-webkit-details-marker {
  display: none;
}

.sync-accordion-trigger::after {
  content: "▾";
  font-size: 1.1rem;
  color: var(--sync-text-muted);
  transition: transform var(--sync-duration-normal) var(--sync-ease-spring);
}

.sync-accordion-item[open] .sync-accordion-trigger::after {
  transform: rotate(180deg);
}

.sync-accordion-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--sync-text-muted);
  font-size: var(--sync-text-sm);
  line-height: var(--sync-leading-relaxed);
}

/**
 * SYNCTONIC CSS — Luminous Glass Activity Spinners
 * ------------------------------------------------------------------
 * Glass ring loaders with radiant conic highlights.
 * ------------------------------------------------------------------
 */

.sync-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: var(--sync-radius-full);
  border: 3px solid rgba(var(--sync-accent-rgb), 0.2);
  border-top-color: var(--sync-accent);
  box-shadow: 0 0 12px rgba(var(--sync-accent-rgb), 0.35);
  animation: sync-spin 0.75s linear infinite;
  vertical-align: middle;
}

.sync-spinner-sm {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.sync-spinner-lg {
  width: 44px;
  height: 44px;
  border-width: 4px;
}

@keyframes sync-spin {
  to {
    transform: rotate(360deg);
  }
}

/**
 * SYNCTONIC CSS — Liquid Glass Shimmer Skeletons
 * ------------------------------------------------------------------
 * Glass shimmer loading placeholders.
 * ------------------------------------------------------------------
 */

.sync-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(var(--sync-surface-rgb), 0.4);
  border-radius: var(--sync-radius-sm);
}

.sync-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: sync-shimmer 1.5s infinite;
}

.sync-skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--sync-radius-xs);
}

.sync-skeleton-circle {
  border-radius: var(--sync-radius-full);
}

@keyframes sync-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Data & Media Display */

/**
 * SYNCTONIC CSS — Liquid Glass Avatars & Stacks
 * ------------------------------------------------------------------
 * Profile avatars with specular ring highlights and badge indicators.
 * ------------------------------------------------------------------
 */

.sync-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--sync-radius-full);
  background: var(--sync-liquid-bg);
  border: 2px solid var(--sync-liquid-border);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-sm);
  font-weight: var(--sync-weight-semibold);
  font-size: var(--sync-text-sm);
  color: var(--sync-text);
  overflow: hidden;
}

.sync-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sync-avatar-sm { width: 32px; height: 32px; font-size: var(--sync-text-xs); }
.sync-avatar-lg { width: 56px; height: 56px; font-size: var(--sync-text-lg); }
.sync-avatar-xl { width: 72px; height: 72px; font-size: var(--sync-text-xl); }

.sync-avatar-group {
  display: inline-flex;
  align-items: center;
}

.sync-avatar-group .sync-avatar {
  margin-left: -12px;
  border-color: var(--sync-surface);
  transition: transform var(--sync-duration-fast) var(--sync-ease-fluid), z-index var(--sync-duration-fast);
}

.sync-avatar-group .sync-avatar:first-child {
  margin-left: 0;
}

.sync-avatar-group .sync-avatar:hover {
  transform: translateY(-4px) scale(1.1);
  z-index: 10;
}

/**
 * SYNCTONIC CSS — Liquid Glass Data Tables
 * ------------------------------------------------------------------
 * Translucent tables with specular headers, striped rows, and hover glows.
 * ------------------------------------------------------------------
 */

.sync-table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--sync-radius);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-sm);
}

.sync-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--sync-text-sm);
  color: var(--sync-text);
}

.sync-table th {
  padding: 0.85rem 1.25rem;
  font-weight: var(--sync-weight-semibold);
  color: var(--sync-text-muted);
  background: rgba(var(--sync-surface-rgb), 0.5);
  border-bottom: 1px solid var(--sync-border-strong);
  white-space: nowrap;
}

.sync-table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--sync-border);
}

.sync-table-hover tbody tr:hover {
  background: rgba(var(--sync-surface-rgb), 0.45);
}

.sync-table-striped tbody tr:nth-child(even) {
  background: rgba(var(--sync-surface-rgb), 0.25);
}

/**
 * SYNCTONIC CSS — Liquid Glass Stat & KPI Widgets
 * ------------------------------------------------------------------
 * Metric summary cards with specular headers and indicator trends.
 * ------------------------------------------------------------------
 */

.sync-stat {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: var(--sync-space-lg);
  border-radius: var(--sync-radius-lg);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow);
  color: var(--sync-text);
  transition: transform var(--sync-duration-fast) var(--sync-ease-spring);
}

.sync-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--sync-liquid-highlight-top) 0%,
    transparent 40%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.sync-stat:hover {
  transform: translateY(-3px);
}

.sync-stat-label {
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text-muted);
  margin-bottom: var(--sync-space-2xs);
}

.sync-stat-value {
  font-size: var(--sync-text-3xl);
  font-weight: var(--sync-weight-bold);
  letter-spacing: var(--sync-tracking-tight);
  line-height: 1.1;
  color: var(--sync-text);
}

.sync-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sync-text-xs);
  font-weight: var(--sync-weight-semibold);
  margin-top: var(--sync-space-xs);
}

.sync-stat-trend-up { color: var(--sync-success); }
.sync-stat-trend-down { color: var(--sync-danger); }
/**
 * SYNCTONIC CSS — Liquid Glass Timelines
 * ------------------------------------------------------------------
 * Activity logs and roadmap timelines with luminous nodes.
 * ------------------------------------------------------------------
 */

.sync-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-lg);
  padding-left: var(--sync-space-lg);
  margin-left: var(--sync-space-xs);
  border-left: 2px solid var(--sync-border);
}

.sync-timeline-item {
  position: relative;
}

.sync-timeline-dot {
  position: absolute;
  top: 4px;
  left: calc(-1 * var(--sync-space-lg) - 7px);
  width: 12px;
  height: 12px;
  border-radius: var(--sync-radius-full);
  background: var(--sync-accent);
  border: 2px solid var(--sync-surface);
  box-shadow: 0 0 10px var(--sync-accent);
}

.sync-timeline-time {
  font-size: var(--sync-text-xs);
  color: var(--sync-text-subtle);
  margin-bottom: 2px;
}

.sync-timeline-title {
  font-size: var(--sync-text-base);
  font-weight: var(--sync-weight-semibold);
  color: var(--sync-text);
}

.sync-timeline-desc {
  font-size: var(--sync-text-sm);
  color: var(--sync-text-muted);
  margin-top: 4px;
}

/**
 * SYNCTONIC CSS — Liquid Glass Pricing Cards & Tiers
 * ------------------------------------------------------------------
 * Translucent plan tier cards with highlighted popular borders.
 * ------------------------------------------------------------------
 */

.sync-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sync-space-lg);
  align-items: stretch;
}

@media (width <= 768px) {
  .sync-pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--sync-space-md);
  }

  .sync-pricing-card {
    padding: 1.5rem 1.25rem;
  }

  .sync-pricing-popular {
    transform: none;
  }

  .sync-pricing-popular:hover {
    transform: translateY(-4px);
  }
}

.sync-pricing-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: var(--sync-space-xl);
  border-radius: var(--sync-radius-xl);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-lg);
  color: var(--sync-text);
  transition:
    transform var(--sync-duration-normal) var(--sync-ease-spring),
    box-shadow var(--sync-duration-normal) var(--sync-ease-fluid);
}

.sync-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-hover);
}

.sync-pricing-popular {
  border-color: rgba(var(--sync-accent-rgb), 0.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    0 20px 48px rgba(var(--sync-accent-rgb), 0.25);
  transform: scale(1.03);
}

.sync-pricing-popular:hover {
  transform: scale(1.03) translateY(-6px);
}

.sync-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}

.sync-pricing-price {
  font-size: var(--sync-text-4xl);
  font-weight: var(--sync-weight-bold);
  letter-spacing: var(--sync-tracking-tight);
  margin-block: var(--sync-space-sm);
  color: var(--sync-text);
}

.sync-pricing-price span {
  font-size: var(--sync-text-base);
  font-weight: var(--sync-weight-normal);
  color: var(--sync-text-muted);
}

.sync-pricing-features {
  list-style: none;
  margin: var(--sync-space-md) 0 var(--sync-space-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-xs);
  flex: 1 1 auto;
}

.sync-pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--sync-space-xs);
  font-size: var(--sync-text-sm);
  color: var(--sync-text-muted);
}

.sync-pricing-feature-check {
  color: var(--sync-success);
  font-weight: bold;
}

/* Next-Gen App Components */

/**
 * SYNCTONIC CSS — Liquid Glass Command Palette (Cmd + K)
 * ------------------------------------------------------------------
 * Floating spotlight search overlay with keyboard navigation,
 * grouped action categories, and hotkey badges.
 * ------------------------------------------------------------------
 */

.sync-command-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--sync-z-modal-backdrop);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--sync-space-md) var(--sync-space-md);
  background: rgba(11, 12, 15, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sync-duration-normal) var(--sync-ease-fluid),
    visibility var(--sync-duration-normal);
}

.sync-command-backdrop.sync-open {
  opacity: 1;
  visibility: visible;
}

.sync-command-dialog {
  position: relative;
  isolation: isolate;
  z-index: var(--sync-z-modal);
  width: 100%;
  max-width: 620px;
  border-radius: var(--sync-radius-xl);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  color: var(--sync-text);
  overflow: hidden;

  backdrop-filter: blur(32px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(1.8) brightness(1.05);

  box-shadow:
    var(--sync-liquid-inner-bevel),
    0 24px 64px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.15);

  transform: scale(0.96) translateY(-12px);
  transition: transform var(--sync-duration-normal) var(--sync-ease-spring);
}

.sync-command-backdrop.sync-open .sync-command-dialog {
  transform: scale(1) translateY(0);
}

.sync-command-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--sync-liquid-highlight-top) 0%,
    rgba(255, 255, 255, 0.25) 25%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.sync-command-header {
  display: flex;
  align-items: center;
  gap: var(--sync-space-sm);
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--sync-border);
}

.sync-command-search-icon {
  font-size: 1.1rem;
  color: var(--sync-text-muted);
}

.sync-command-input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-lg);
  color: var(--sync-text);
  outline: none;
}

.sync-command-input::placeholder {
  color: var(--sync-text-subtle);
}

.sync-command-body {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--sync-space-xs);
}

.sync-command-group {
  margin-bottom: var(--sync-space-xs);
}

.sync-command-group-title {
  padding: 0.4rem 0.85rem;
  font-size: var(--sync-text-xs);
  font-weight: var(--sync-weight-semibold);
  letter-spacing: var(--sync-tracking-wide);
  color: var(--sync-text-subtle);
  text-transform: uppercase;
}

.sync-command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: var(--sync-radius-sm);
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text);
  cursor: pointer;
  user-select: none;
  transition:
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    color var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-command-item:hover,
.sync-command-item.sync-active {
  background: rgba(var(--sync-surface-rgb), 0.55);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-sm);
  transform: translateX(2px);
}

.sync-command-item-main {
  display: flex;
  align-items: center;
  gap: var(--sync-space-xs);
}

.sync-command-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.4rem;
  border-top: 1px solid var(--sync-border);
  font-size: var(--sync-text-xs);
  color: var(--sync-text-subtle);
  background: rgba(var(--sync-surface-rgb), 0.2);
}

/* Hotkey badge */
.sync-kbd,
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-family: var(--sync-font-mono);
  font-size: 0.75rem;
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.6);
  border: 1px solid var(--sync-liquid-border);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* Mobile Responsiveness */
@media (width <= 640px) {
  .sync-command-backdrop {
    padding: 3vh 0.75rem;
  }

  .sync-command-dialog {
    border-radius: var(--sync-radius-lg);
  }

  .sync-command-header {
    padding: 0.85rem 1rem;
  }

  .sync-command-input {
    font-size: var(--sync-text-base);
  }

  .sync-command-footer {
    padding: 0.65rem 1rem;
    font-size: 0.7rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}
/**
 * SYNCTONIC CSS — visionOS / macOS Floating Glass Dock
 * ------------------------------------------------------------------
 * Floating bottom capsule dock with spring magnification physics,
 * glass reflections, and active status indicators.
 * ------------------------------------------------------------------
 */

.sync-dock-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sync-dock {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--sync-space-2xs);
  padding: 0.5rem 0.85rem;
  border-radius: var(--sync-radius-full);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    0 16px 40px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: var(--sync-z-sticky);
}

.sync-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--sync-liquid-highlight-top) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.sync-dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--sync-radius);
  background: rgba(var(--sync-surface-rgb), 0.5);
  border: 1px solid var(--sync-liquid-border);
  color: var(--sync-text);
  font-size: 1.35rem;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    var(--sync-shadow-sm);
  transition:
    transform var(--sync-duration-normal) var(--sync-ease-spring),
    background var(--sync-duration-fast) var(--sync-ease-fluid),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-dock-item:hover {
  transform: translateY(-8px) scale(1.18);
  background: var(--sync-liquid-bg-hover);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-liquid-shadow-hover);
  z-index: 10;
}

/* Tooltip on dock hover */
.sync-dock-item::after {
  content: attr(data-sync-title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.25rem 0.65rem;
  border-radius: var(--sync-radius-sm);
  background: rgba(var(--sync-surface-rgb), 0.85);
  border: 1px solid var(--sync-liquid-border);
  color: var(--sync-text);
  font-size: var(--sync-text-xs);
  font-weight: var(--sync-weight-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sync-shadow);
  transition:
    opacity var(--sync-duration-fast) var(--sync-ease-fluid),
    transform var(--sync-duration-fast) var(--sync-ease-spring),
    visibility var(--sync-duration-fast);
}

.sync-dock-item:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Active running app indicator dot */
.sync-dock-item.sync-active::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: var(--sync-radius-full);
  background: var(--sync-accent);
  box-shadow: 0 0 6px var(--sync-accent);
}

.sync-dock-divider {
  width: 1px;
  height: 28px;
  margin-inline: 4px;
  background: var(--sync-border-strong);
}

/* Mobile & Touch Responsiveness */
@media (width <= 640px) {
  .sync-dock-container {
    overflow-x: auto;
    padding-block: 0.5rem;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    justify-content: flex-start;
  }

  .sync-dock {
    gap: 4px;
    padding: 0.35rem 0.6rem;
    margin-inline: auto;
  }

  .sync-dock-item {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  .sync-dock-divider {
    height: 22px;
    margin-inline: 2px;
  }
}
/**
 * SYNCTONIC CSS — Tactile Glass Range Sliders
 * ------------------------------------------------------------------
 * Luminous glass sliders with gradient fill progress and glowing crystal thumbs.
 * ------------------------------------------------------------------
 */

.sync-slider-container {
  display: flex;
  flex-direction: column;
  gap: var(--sync-space-3xs);
  width: 100%;
}

.sync-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  color: var(--sync-text);
}

.sync-slider-value {
  font-family: var(--sync-font-mono);
  font-size: var(--sync-text-xs);
  color: var(--sync-accent);
}

/* Range input element styling */
input[type="range"].sync-slider,
.sync-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.55);
  border: 1px solid var(--sync-liquid-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  outline: none;
  cursor: pointer;
  margin: var(--sync-space-2xs) 0;
}

/* WebKit thumb */
input[type="range"].sync-slider::-webkit-slider-thumb,
.sync-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--sync-radius-full);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2px 8px rgba(20, 22, 26, 0.2),
    0 0 10px rgba(var(--sync-accent-rgb), 0.4);
  cursor: pointer;
  transition:
    transform var(--sync-duration-fast) var(--sync-ease-spring),
    box-shadow var(--sync-duration-fast) var(--sync-ease-fluid);
}

input[type="range"].sync-slider::-webkit-slider-thumb:hover,
.sync-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow:
    0 3px 12px rgba(20, 22, 26, 0.3),
    0 0 16px rgba(var(--sync-accent-rgb), 0.6);
}

input[type="range"].sync-slider::-webkit-slider-thumb:active,
.sync-range::-webkit-slider-thumb:active {
  transform: scale(1.05);
}

/* Firefox thumb */
input[type="range"].sync-slider::-moz-range-thumb,
.sync-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--sync-radius-full);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2px 8px rgba(20, 22, 26, 0.2),
    0 0 10px rgba(var(--sync-accent-rgb), 0.4);
  cursor: pointer;
}

/* Focus visibility */
input[type="range"].sync-slider:focus-visible,
.sync-range:focus-visible {
  outline: var(--sync-focus-ring-width) solid var(--sync-focus-ring-color);
  outline-offset: 4px;
}
/**
 * SYNCTONIC CSS — Glass Code Blocks & Window Chrome
 * ------------------------------------------------------------------
 * Translucent code windows with macOS window controls (🔴 🟡 🟢),
 * language pill badges, and one-click copy triggers.
 * ------------------------------------------------------------------
 */

.sync-codeblock {
  position: relative;
  isolation: isolate;
  border-radius: var(--sync-radius-lg);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow);
  overflow: hidden;
  margin-block: var(--sync-space-md);
  max-width: 100%;
  box-sizing: border-box;
}

.sync-codeblock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--sync-liquid-highlight-top) 0%,
    transparent 35%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.sync-codeblock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: rgba(var(--sync-surface-rgb), 0.4);
  border-bottom: 1px solid var(--sync-border);
}

.sync-codeblock-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sync-codeblock-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--sync-radius-full);
}

.sync-codeblock-dot-red { background: #ff5f56; }
.sync-codeblock-dot-yellow { background: #ffbd2e; }
.sync-codeblock-dot-green { background: #27c93f; }

.sync-codeblock-title {
  font-family: var(--sync-font-mono);
  font-size: var(--sync-text-xs);
  color: var(--sync-text-muted);
}

.sync-codeblock-actions {
  display: flex;
  align-items: center;
  gap: var(--sync-space-xs);
}

.sync-codeblock-lang {
  font-family: var(--sync-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(var(--sync-surface-rgb), 0.6);
  color: var(--sync-text-subtle);
  border: 1px solid var(--sync-border);
}

.sync-codeblock-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--sync-radius-xs);
  border: 1px solid var(--sync-border);
  background: rgba(var(--sync-surface-rgb), 0.5);
  color: var(--sync-text);
  font-size: var(--sync-text-xs);
  font-family: var(--sync-font-sans);
  cursor: pointer;
  transition: all var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-codeblock-copy:hover {
  background: var(--sync-liquid-bg-hover);
  border-color: var(--sync-accent);
  color: var(--sync-accent);
}

.sync-codeblock-body {
  padding: var(--sync-space-md);
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
}

.sync-codeblock-body code {
  font-family: var(--sync-font-mono);
  font-size: 0.88rem;
  line-height: 1.65;
  background: transparent;
  border: none;
  padding: 0;
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-all;
}

/* Mobile Responsiveness */
@media (width <= 600px) {
  .sync-codeblock {
    margin-block: var(--sync-space-sm);
    border-radius: var(--sync-radius-md);
  }

  .sync-codeblock-header {
    padding: 0.5rem 0.75rem;
  }

  .sync-codeblock-body {
    padding: 0.75rem;
    font-size: 0.75rem;
  }

  .sync-codeblock-body code {
    font-size: 0.75rem;
  }
}
/**
 * SYNCTONIC CSS — Liquid Glass Chat & Message Bubbles
 * ------------------------------------------------------------------
 * Translucent conversational UI with luminous sent bubbles,
 * frosted received bubbles, and glowing typing indicators.
 * ------------------------------------------------------------------
 */

.sync-chat-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  border-radius: var(--sync-radius-xl);
  border: 1px solid var(--sync-liquid-border);
  background: rgba(var(--sync-surface-rgb), 0.35);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-lg);
  overflow: hidden;
}

.sync-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--sync-border);
  background: rgba(var(--sync-surface-rgb), 0.45);
}

.sync-chat-messages {
  flex: 1 1 auto;
  padding: 1.1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Base Message Bubble */
.sync-chat-bubble {
  position: relative;
  isolation: isolate;
  max-width: 85%;
  padding: 0.65rem 1rem;
  border-radius: 16px;
  font-size: var(--sync-text-sm);
  line-height: var(--sync-leading-snug);
  overflow-wrap: break-word;
}

/* Received Message Bubble (Frosted Soft Glass) */
.sync-chat-bubble-received,
.sync-chat-bubble.sync-chat-received,
.sync-chat-received {
  align-self: flex-start;
  background: rgba(var(--sync-surface-rgb), 0.65);
  border: 1px solid var(--sync-liquid-border);
  color: var(--sync-text);
  border-bottom-left-radius: 4px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    var(--sync-shadow-sm);
}

/* Sent Message Bubble (Luminous Accent Glass) */
.sync-chat-bubble-sent,
.sync-chat-bubble.sync-chat-sent,
.sync-chat-sent {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(var(--sync-accent-rgb), 0.88), rgba(var(--sync-accent-2-rgb), 0.92));
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--sync-text-on-accent);
  border-bottom-right-radius: 4px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 4px 18px rgba(var(--sync-accent-rgb), 0.35);
}

.sync-chat-time {
  display: block;
  font-size: 0.7rem;
  margin-top: 5px;
  opacity: 0.75;
  text-align: right;
}

/* Typing Indicator */
.sync-typing-indicator {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.65rem 1rem;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.55);
  border: 1px solid var(--sync-liquid-border);
  box-shadow: var(--sync-shadow-sm);
}

.sync-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--sync-radius-full);
  background: var(--sync-accent);
  opacity: 0.4;
  animation: sync-typing-bounce 1.2s infinite ease-in-out;
}

.sync-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.sync-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes sync-typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Chat Input Bar */
.sync-chat-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--sync-border);
  background: rgba(var(--sync-surface-rgb), 0.3);
}

.sync-chat-input-bar {
  display: flex;
  align-items: center;
  gap: var(--sync-space-2xs);
  padding: 4px 6px 4px 12px;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.6);
  border: 1px solid var(--sync-liquid-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sync-chat-input {
  flex: 1 1 auto;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
  padding: 0.35rem 0.5rem;
  font-family: var(--sync-font-sans);
  font-size: var(--sync-text-sm);
  color: var(--sync-text);
  min-height: auto;
  height: auto;
}

/* Mobile Responsiveness */
@media (width <= 600px) {
  .sync-chat-container {
    max-width: 100%;
    border-radius: var(--sync-radius-lg);
  }

  .sync-chat-header {
    padding: 0.65rem 0.85rem;
  }

  .sync-chat-messages {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .sync-chat-bubble {
    max-width: 90%;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
  }

  .sync-chat-footer {
    padding: 0.5rem 0.75rem;
  }
}
/**
 * SYNCTONIC CSS — Liquid Glass Carousel Component
 * ------------------------------------------------------------------
 * Multi-slide interactive carousel with glass navigation arrows,
 * smooth sliding track, tab switches, and indicator dots.
 * ------------------------------------------------------------------
 */

.sync-carousel {
  position: relative;
  isolation: isolate;
  width: 100%;
  border-radius: var(--sync-radius-xl);
  border: 1px solid var(--sync-liquid-border);
  background: var(--sync-liquid-bg);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    var(--sync-liquid-inner-bevel),
    var(--sync-shadow-lg);
  overflow: hidden;
}

.sync-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--sync-liquid-highlight-top) 0%,
    transparent 35%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Header with Variety Tabs */
.sync-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--sync-border);
  background: rgba(var(--sync-surface-rgb), 0.35);
}

.sync-carousel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sync-space-xs);
}

.sync-carousel-tab {
  padding: 0.35rem 0.85rem;
  border-radius: var(--sync-radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--sync-text-muted);
  font-size: var(--sync-text-sm);
  font-weight: var(--sync-weight-medium);
  cursor: pointer;
  user-select: none;
  transition: all var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-carousel-tab:hover {
  color: var(--sync-text);
  background: rgba(var(--sync-surface-rgb), 0.4);
}

.sync-carousel-tab.sync-active {
  color: var(--sync-accent);
  background: rgba(var(--sync-surface-rgb), 0.7);
  border-color: var(--sync-liquid-border);
  box-shadow: var(--sync-shadow-sm);
}

/* Sliding Track */
.sync-carousel-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.sync-carousel-track {
  display: flex;
  transition: transform var(--sync-duration-slow) var(--sync-ease-spring);
  width: 100%;
}

.sync-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 2.25rem;
  box-sizing: border-box;
}

/* Navigation Arrows */
.sync-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sync-radius-full);
  border: 1px solid var(--sync-liquid-border);
  background: rgba(var(--sync-surface-rgb), 0.65);
  color: var(--sync-text);
  font-size: 1.1rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sync-shadow-sm);
  transition: all var(--sync-duration-fast) var(--sync-ease-spring);
}

.sync-carousel-btn:hover {
  background: rgba(var(--sync-surface-rgb), 0.9);
  border-color: var(--sync-accent);
  color: var(--sync-accent);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(var(--sync-accent-rgb), 0.35);
}

/* Dots Indicators */
.sync-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--sync-border);
  background: rgba(var(--sync-surface-rgb), 0.25);
}

.sync-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--sync-radius-full);
  background: rgba(var(--sync-surface-rgb), 0.5);
  border: 1px solid var(--sync-border);
  cursor: pointer;
  transition: all var(--sync-duration-fast) var(--sync-ease-spring);
}

.sync-carousel-dot.sync-active {
  width: 24px;
  background: var(--sync-accent);
  border-color: var(--sync-accent);
  box-shadow: 0 0 8px var(--sync-accent);
}

/* Mobile Responsiveness */
@media (width <= 768px) {
  .sync-carousel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
  }

  .sync-carousel-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .sync-carousel-tab {
    flex-shrink: 0;
    font-size: var(--sync-text-xs);
    padding: 0.3rem 0.65rem;
  }

  .sync-carousel-slide {
    padding: 1.25rem 0.85rem;
  }

  .sync-carousel-footer {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.5rem;
  }
}
/* Utilities */
/**
 * SYNCTONIC CSS — Layout & Structure Utilities
 * ------------------------------------------------------------------
 * Responsive containers, flexbox, grid, and spacing utilities.
 * ------------------------------------------------------------------
 */

.sync-container {
  width: 100%;
  max-width: var(--sync-container-max);
  margin-inline: auto;
  padding-inline: var(--sync-container-padding);
}

.sync-container-sm { max-width: 768px; }
.sync-container-md { max-width: 1024px; }
.sync-container-lg { max-width: 1280px; }
.sync-container-xl { max-width: 1440px; }
.sync-container-full { max-width: 100%; }

/* Flexbox */
.sync-flex {
  display: flex;
}

.sync-inline-flex {
  display: inline-flex;
}

.sync-flex-col {
  display: flex;
  flex-direction: column;
}

.sync-flex-wrap {
  flex-wrap: wrap;
}

.sync-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sync-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sync-items-center { align-items: center; }
.sync-items-start { align-items: flex-start; }
.sync-items-end { align-items: flex-end; }
.sync-justify-center { justify-content: center; }
.sync-justify-between { justify-content: space-between; }
.sync-justify-end { justify-content: flex-end; }

/* Grid */
.sync-grid {
  display: grid;
  gap: var(--sync-space-md);
}

.sync-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sync-space-md);
  width: 100%;
}

.sync-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sync-space-md);
  width: 100%;
}

.sync-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sync-space-md);
  width: 100%;
}

.sync-grid > *,
.sync-grid-2 > *,
.sync-grid-3 > *,
.sync-grid-4 > * {
  min-width: 0;
  max-width: 100%;
}

@media (width <= 768px) {
  .sync-grid-2,
  .sync-grid-3,
  .sync-grid-4 {
    grid-template-columns: 1fr;
    gap: var(--sync-space-sm);
  }
}

/* Gap scale */
.sync-gap-3xs { gap: var(--sync-space-3xs); }
.sync-gap-2xs { gap: var(--sync-space-2xs); }
.sync-gap-xs { gap: var(--sync-space-xs); }
.sync-gap-sm { gap: var(--sync-space-sm); }
.sync-gap-md { gap: var(--sync-space-md); }
.sync-gap-lg { gap: var(--sync-space-lg); }
.sync-gap-xl { gap: var(--sync-space-xl); }

/* Stack (vertical layout with consistent spacing) */
.sync-stack > * + * {
  margin-top: var(--sync-space-md);
}

/* ============================================================
   BENTO GRID UTILITIES (Apple / Linear style asymmetric grids)
   ============================================================ */

.sync-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sync-space-md);
  width: 100%;
}

.sync-bento-grid > * {
  min-width: 0;
  max-width: 100%;
}

.sync-bento-col-12 { grid-column: span 12; }
.sync-bento-col-8 { grid-column: span 8; }
.sync-bento-col-7 { grid-column: span 7; }
.sync-bento-col-6 { grid-column: span 6; }
.sync-bento-col-5 { grid-column: span 5; }
.sync-bento-col-4 { grid-column: span 4; }
.sync-bento-col-3 { grid-column: span 3; }

.sync-bento-row-2 { grid-row: span 2; }

@media (width <= 900px) {
  .sync-bento-col-8,
  .sync-bento-col-7,
  .sync-bento-col-6,
  .sync-bento-col-5,
  .sync-bento-col-4,
  .sync-bento-col-3 {
    grid-column: span 12;
  }
}

/* Standard Section Cadence */
.sync-section {
  position: relative;
  padding-block: var(--sync-space-2xl);
  scroll-margin-top: 5rem;
}

/* Responsive visibility utilities */
@media (width <= 768px) {
  .sync-hide-mobile { display: none !important; }
}

@media (width >= 769px) and (width <= 1024px) {
  .sync-hide-tablet { display: none !important; }
}

@media (width >= 1025px) {
  .sync-hide-desktop { display: none !important; }
}

.sync-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/**
 * SYNCTONIC CSS — Ambient Glow & Caustic Lighting Utilities
 * ------------------------------------------------------------------
 * Luminous halo glows for liquid glass components and focal elements.
 * ------------------------------------------------------------------
 */

.sync-glow-accent {
  box-shadow: 0 0 32px rgba(var(--sync-accent-rgb), 0.35);
}

.sync-glow-purple {
  box-shadow: 0 0 32px rgba(138, 92, 246, 0.35);
}

.sync-glow-pink {
  box-shadow: 0 0 32px rgba(236, 72, 153, 0.35);
}

.sync-glow-blue {
  box-shadow: 0 0 32px rgba(79, 107, 255, 0.35);
}

.sync-glow-hover:hover {
  box-shadow: 0 0 40px rgba(var(--sync-accent-rgb), 0.5);
}

/* Themes Engine */

/**
 * SYNCTONIC CSS — 8-Theme Material Engine
 * ------------------------------------------------------------------
 * Full theme engine driven by data-sync-theme and data-sync-mode.
 * Overrides custom properties so every component re-themes instantly.
 * ------------------------------------------------------------------
 */

/* ============================================================
   DARK MODE BASE (Automatic and explicit)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-sync-mode="light"]) {
    color-scheme: dark;

    --sync-bg: #040508;
    --sync-bg-rgb: 4, 5, 8;
    --sync-surface: #0a0c12;
    --sync-surface-rgb: 10, 12, 18;
    --sync-surface-hover: #121520;
    --sync-surface-hover-rgb: 18, 21, 32;

    --sync-text: #f8f9fa;
    --sync-text-muted: #9499a8;
    --sync-text-subtle: #585e70;

    --sync-border: rgba(255, 255, 255, 0.08);
    --sync-border-strong: rgba(255, 255, 255, 0.14);

    --sync-glass-border: rgba(255, 255, 255, 0.1);
    --sync-glass-highlight: rgba(255, 255, 255, 0.2);

    --sync-liquid-bg: rgba(255, 255, 255, 0.035);
    --sync-liquid-bg-hover: rgba(255, 255, 255, 0.07);
    --sync-liquid-bg-active: rgba(255, 255, 255, 0.1);
    --sync-liquid-border: rgba(255, 255, 255, 0.12);
    --sync-liquid-highlight-top: rgba(255, 255, 255, 0.35);
    --sync-liquid-highlight-bottom: rgba(255, 255, 255, 0.08);
    --sync-liquid-inner-bevel:
      inset 0 1px 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 2px 0 rgba(0, 0, 0, 0.35),
      inset 0 0 16px 0 rgba(255, 255, 255, 0.02);
    --sync-liquid-shadow:
      0 16px 36px rgba(0, 0, 0, 0.6),
      0 4px 12px rgba(0, 0, 0, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.3);
    --sync-liquid-shadow-hover:
      0 22px 48px rgba(0, 0, 0, 0.75),
      0 8px 20px rgba(0, 0, 0, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.35);
    --sync-liquid-shadow-active:
      0 6px 16px rgba(0, 0, 0, 0.45),
      0 2px 6px rgba(0, 0, 0, 0.3);
  }
}

[data-sync-mode="dark"] {
  color-scheme: dark;

  --sync-bg: #040508;
  --sync-bg-rgb: 4, 5, 8;
  --sync-surface: #0a0c12;
  --sync-surface-rgb: 10, 12, 18;
  --sync-surface-hover: #121520;
  --sync-surface-hover-rgb: 18, 21, 32;

  --sync-text: #f8f9fa;
  --sync-text-muted: #9499a8;
  --sync-text-subtle: #585e70;

  --sync-border: rgba(255, 255, 255, 0.08);
  --sync-border-strong: rgba(255, 255, 255, 0.14);

  --sync-glass-border: rgba(255, 255, 255, 0.1);
  --sync-glass-highlight: rgba(255, 255, 255, 0.2);

  --sync-liquid-bg: rgba(255, 255, 255, 0.035);
  --sync-liquid-bg-hover: rgba(255, 255, 255, 0.07);
  --sync-liquid-bg-active: rgba(255, 255, 255, 0.1);
  --sync-liquid-border: rgba(255, 255, 255, 0.12);
  --sync-liquid-highlight-top: rgba(255, 255, 255, 0.35);
  --sync-liquid-highlight-bottom: rgba(255, 255, 255, 0.08);
  --sync-liquid-inner-bevel:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 16px 0 rgba(255, 255, 255, 0.02);
  --sync-liquid-shadow:
    0 16px 36px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.3);
  --sync-liquid-shadow-hover:
    0 22px 48px rgba(0, 0, 0, 0.75),
    0 8px 20px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.35);
  --sync-liquid-shadow-active:
    0 6px 16px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   NAMED THEMES (data-sync-theme)
   ============================================================ */

/* 1. MIDNIGHT (OLED Obsidian Black) */
[data-sync-theme="midnight"] {
  --sync-accent: #6366f1;
  --sync-accent-rgb: 99, 102, 241;
  --sync-accent-2: #a855f7;
  --sync-accent-2-rgb: 168, 85, 247;
  --sync-bg: #030712;
  --sync-bg-rgb: 3, 7, 18;
  --sync-surface: #0f172a;
  --sync-surface-rgb: 15, 23, 42;
}

/* 2. AURORA (Teal & Emerald Cosmic Glow) */
[data-sync-theme="aurora"] {
  --sync-accent: #06b6d4;
  --sync-accent-rgb: 6, 182, 212;
  --sync-accent-2: #10b981;
  --sync-accent-2-rgb: 16, 185, 129;
}

/* 3. NEBULA (Violet & Magenta Cyberpunk) */
[data-sync-theme="nebula"] {
  --sync-accent: #d946ef;
  --sync-accent-rgb: 217, 70, 239;
  --sync-accent-2: #8b5cf6;
  --sync-accent-2-rgb: 139, 92, 246;
}

/* 4. OCEAN (Deep Marine Cyan & Sapphire) */
[data-sync-theme="ocean"] {
  --sync-accent: #0284c7;
  --sync-accent-rgb: 2, 132, 199;
  --sync-accent-2: #2563eb;
  --sync-accent-2-rgb: 37, 99, 235;
}

/* 5. SUNSET (Amber & Coral Warm Luxury) */
[data-sync-theme="sunset"] {
  --sync-accent: #f59e0b;
  --sync-accent-rgb: 245, 158, 11;
  --sync-accent-2: #f43f5e;
  --sync-accent-2-rgb: 244, 63, 94;
}

/* 6. ROSE (Blush Pink & Ruby Glass) */
[data-sync-theme="rose"] {
  --sync-accent: #ec4899;
  --sync-accent-rgb: 236, 72, 153;
  --sync-accent-2: #f43f5e;
  --sync-accent-2-rgb: 244, 63, 94;
}

/* 7. EMERALD (Electric Lime & Jade Cyber) */
[data-sync-theme="emerald"] {
  --sync-accent: #10b981;
  --sync-accent-rgb: 16, 185, 129;
  --sync-accent-2: #84cc16;
  --sync-accent-2-rgb: 132, 204, 22;
}

/* 8. MONO (Minimalist Platinum & Obsidian) */
[data-sync-theme="mono"] {
  --sync-accent: #475569;
  --sync-accent-rgb: 71, 85, 105;
  --sync-accent-2: #334155;
  --sync-accent-2-rgb: 51, 65, 85;
}
/* Accessibility Layer */
/**
 * SYNCTONIC CSS — Accessibility Overrides
 * ------------------------------------------------------------------
 * Loaded LAST in index.css, intentionally. Focus visibility and
 * motion safety must win over any component or effect style that
 * came before, including hover transforms and glass blur.
 * ------------------------------------------------------------------
 */

/* Universal focus-visible ring — every interactive element, whether
   auto-styled or explicitly classed, gets this without opting in. */
:focus-visible {
  outline: var(--sync-focus-ring-width) solid var(--sync-focus-ring-color);
  outline-offset: var(--sync-focus-ring-offset);
  border-radius: var(--sync-radius-xs);
}

/* Never suppress focus rings for keyboard users. Mouse users get the
   browser's default :focus (not :focus-visible) suppressed instead. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled state — consistent everywhere, overrides component-level
   hover transforms so a disabled button never looks interactive. */
[disabled],
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Screen-reader-only utility */
.sync-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sync-sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* Skip link — hidden until focused, standard pattern */
.sync-skip-link {
  position: absolute;
  top: -100%;
  left: var(--sync-space-sm);
  z-index: var(--sync-z-toast);
  padding: var(--sync-space-2xs) var(--sync-space-sm);
  background: var(--sync-surface);
  color: var(--sync-text);
  border-radius: var(--sync-radius-sm);
  box-shadow: var(--sync-shadow-lg);
  transition: top var(--sync-duration-fast) var(--sync-ease-fluid);
}

.sync-skip-link:focus {
  top: var(--sync-space-sm);
}

/* Reduced motion — hard floor, already enforced in reset.css.
   This section adds SEMANTIC reductions: things that shouldn't just
   go instant, but should not move at all, per component. */
@media (prefers-reduced-motion: reduce) {
  .sync-ambient::before {
    animation: none !important;
  }

  [class*="sync-"]:hover {
    transform: none !important;
  }
}

/* High contrast / forced-colors mode — glass surfaces lose their
   translucency semantics under forced-colors, so ensure borders
   and focus rings remain via system colors rather than disappearing. */
@media (forced-colors: active) {
  .sync-glass-clear,
  .sync-glass-soft,
  .sync-glass,
  .sync-glass-strong,
  .sync-glass-solid {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }
}

/* Touch target minimum — interactive elements meet 44x44 on
   coarse-pointer (touch) devices, per WCAG 2.5.5, without bloating
   desktop hit areas where a mouse cursor is more precise. */
@media (pointer: coarse) {
  :where(button, .sync-button, a.sync-button, input[type="checkbox"], input[type="radio"]) {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Form validation states — consistent, not color-only (paired with
   icon/text in real usage; this just ensures the color contrast
   itself passes and border style differs, not just hue). */
:where(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--sync-danger);
  border-width: 2px;
}

:where(input, textarea, select)[aria-invalid="true"]:focus-visible {
  outline-color: rgba(var(--sync-danger-rgb), 0.55);
}