markupr 2.1.8 → 2.5.0

package/dist/renderer/assets/index-CUqz_Gs6.css

@@ -1,2270 +0,0 @@
-:root {
-  --ff-shell-bg:
-    radial-gradient(circle at 10% -18%, rgba(10, 132, 255, 0.16), transparent 46%),
-    radial-gradient(circle at 90% -16%, rgba(94, 106, 240, 0.12), transparent 44%),
-    linear-gradient(180deg, #090c14 0%, #0c1018 60%, #0b0f16 100%);
-  --ff-surface: rgba(22, 28, 39, 0.82);
-  --ff-surface-strong: rgba(26, 33, 45, 0.9);
-  --ff-border: rgba(150, 162, 183, 0.22);
-  --ff-border-strong: rgba(167, 178, 198, 0.34);
-  --ff-text-primary: #eef3ff;
-  --ff-text-secondary: #c6d0e3;
-  --ff-text-muted: #8f9db5;
-  --ff-live: #ff3b30;
-  --ff-live-soft: rgba(255, 59, 48, 0.24);
-  --ff-accent: #0a84ff;
-  --ff-accent-soft: rgba(10, 132, 255, 0.22);
-  --ff-success: #34c759;
-  --ff-error: #ff3b30;
-}
-
-.ff-shell {
-  width: 100%;
-  min-height: 100%;
-  padding: 12px;
-  background: var(--ff-shell-bg);
-  color: var(--ff-text-primary);
-  font-family: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
-    Arial, sans-serif;
-}
-
-.ff-shell--hud {
-  padding: 0;
-  background: transparent;
-}
-
-.ff-shell__card {
-  border: 1px solid var(--ff-border);
-  border-radius: 18px;
-  background: linear-gradient(180deg, var(--ff-surface-strong) 0%, var(--ff-surface) 100%);
-  box-shadow:
-    0 12px 32px rgba(3, 6, 12, 0.5),
-    inset 0 1px 0 rgba(217, 224, 236, 0.11);
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: calc(100vh - 24px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  animation: ffShellIn 180ms ease-out;
-}
-
-.ff-shell__card--hud {
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  padding: 0;
-  gap: 0;
-  overflow: visible;
-  max-height: none;
-  animation: none;
-}
-
-.ff-shell__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.ff-shell__eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ff-text-muted);
-  font-weight: 600;
-}
-
-.ff-shell__title {
-  margin-top: 2px;
-  font-size: 24px;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-  color: var(--ff-text-primary);
-}
-
-.ff-shell__quiet-btn {
-  font-size: 12px;
-  color: var(--ff-text-secondary);
-  background: rgba(138, 149, 171, 0.14);
-  border: 1px solid rgba(138, 149, 171, 0.26);
-  border-radius: 999px;
-  padding: 7px 11px;
-  min-height: 30px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
-}
-
-.ff-shell__quiet-btn:hover {
-  background: rgba(138, 149, 171, 0.24);
-  border-color: rgba(164, 176, 199, 0.45);
-  color: var(--ff-text-primary);
-}
-
-.ff-shell__subtitle {
-  color: var(--ff-text-secondary);
-  font-size: 13px;
-  line-height: 1.45;
-}
-
-.ff-shell__controls {
-  display: grid;
-  gap: 8px;
-}
-
-.ff-shell__primary-btn,
-.ff-shell__secondary-btn {
-  width: 100%;
-  min-height: 42px;
-  border-radius: 12px;
-  border: 1px solid transparent;
-  padding: 11px 14px;
-  font-size: 14px;
-  font-weight: 600;
-  transition: transform 120ms ease, opacity 120ms ease, border-color 140ms ease, background 140ms ease;
-}
-
-.ff-shell__primary-btn {
-  color: #ffffff;
-  background: linear-gradient(180deg, #0a84ff 0%, #0077ed 100%);
-  box-shadow: 0 6px 14px rgba(10, 132, 255, 0.26);
-}
-
-.ff-shell__primary-btn.is-live {
-  background: linear-gradient(180deg, #ff453a 0%, #d92f25 100%);
-  box-shadow: 0 6px 14px rgba(255, 69, 58, 0.25);
-}
-
-.ff-shell__primary-btn:hover:not(:disabled) {
-  filter: brightness(1.03);
-}
-
-.ff-shell__secondary-btn {
-  color: var(--ff-text-secondary);
-  background: rgba(124, 137, 160, 0.12);
-  border-color: rgba(124, 137, 160, 0.24);
-}
-
-.ff-shell__secondary-btn:hover:not(:disabled) {
-  background: rgba(124, 137, 160, 0.22);
-  border-color: rgba(124, 137, 160, 0.38);
-  color: var(--ff-text-primary);
-}
-
-.ff-shell__primary-btn:disabled,
-.ff-shell__secondary-btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.ff-shell__primary-btn:not(:disabled):active,
-.ff-shell__secondary-btn:not(:disabled):active {
-  transform: translateY(1px);
-}
-
-.ff-shell__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.ff-shell__meta span {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid rgba(131, 144, 168, 0.26);
-  background: rgba(131, 144, 168, 0.12);
-  border-radius: 999px;
-  padding: 5px 10px;
-  font-size: 11px;
-  color: var(--ff-text-secondary);
-}
-
-.ff-shell__meta span.is-ready {
-  border-color: rgba(52, 199, 89, 0.42);
-  background: rgba(52, 199, 89, 0.14);
-  color: #7de0a0;
-}
-
-.ff-shell__meta span.is-optional {
-  border-color: rgba(255, 159, 10, 0.35);
-  background: rgba(255, 159, 10, 0.14);
-  color: #f2bd66;
-}
-
-.ff-shell__meta-pill {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid rgba(131, 144, 168, 0.25);
-  background: rgba(131, 144, 168, 0.12);
-  border-radius: 999px;
-  padding: 5px 10px;
-  font-size: 11px;
-  color: var(--ff-text-secondary);
-}
-
-.ff-shell__byok-cta {
-  border-radius: 12px;
-  padding: 12px;
-  border: 1px solid rgba(255, 159, 10, 0.35);
-  background: rgba(255, 159, 10, 0.1);
-  display: grid;
-  gap: 6px;
-}
-
-.ff-shell__byok-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: #f2bd66;
-}
-
-.ff-shell__byok-detail {
-  font-size: 12px;
-  color: #ddb46f;
-}
-
-.ff-shell__byok-btn {
-  justify-self: start;
-  min-height: 30px;
-  border-radius: 9px;
-  border: 1px solid rgba(255, 159, 10, 0.44);
-  background: rgba(255, 159, 10, 0.16);
-  color: #ffe0ad;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 6px 10px;
-}
-
-.ff-shell__transcript {
-  border-radius: 12px;
-  padding: 11px;
-  border: 1px solid rgba(10, 132, 255, 0.28);
-  background: rgba(10, 132, 255, 0.08);
-}
-
-.ff-shell__transcript-label {
-  font-size: 11px;
-  color: var(--ff-text-muted);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.ff-shell__transcript p {
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.ff-shell__transcript-scroll {
-  max-height: 190px;
-  overflow-y: auto;
-  display: grid;
-  gap: 7px;
-  padding-right: 4px;
-}
-
-.ff-shell__transcript-line {
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--ff-text-primary);
-}
-
-.ff-shell__transcript-interim {
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--ff-text-secondary);
-  font-style: italic;
-  opacity: 0.92;
-}
-
-.ff-shell__transcript-placeholder {
-  font-size: 12px;
-  color: var(--ff-text-muted);
-}
-
-.ff-shell__report {
-  border-radius: 14px;
-  border: 1px solid rgba(70, 160, 255, 0.34);
-  background: rgba(70, 160, 255, 0.1);
-  padding: 12px;
-  display: grid;
-  gap: 8px;
-}
-
-.ff-shell__report-label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: #98c2ff;
-}
-
-.ff-shell__path {
-  font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Mono', monospace;
-  font-size: 11px;
-  color: var(--ff-text-primary);
-  overflow-wrap: anywhere;
-  background: rgba(11, 15, 24, 0.72);
-  border: 1px solid rgba(130, 142, 165, 0.28);
-  border-radius: 9px;
-  padding: 9px;
-}
-
-.ff-shell__report-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 7px;
-}
-
-.ff-shell__report-actions button {
-  flex: 1 1 140px;
-  min-height: 34px;
-  border-radius: 10px;
-  border: 1px solid rgba(130, 142, 165, 0.28);
-  background: rgba(25, 31, 42, 0.84);
-  color: var(--ff-text-secondary);
-  font-size: 12px;
-  padding: 8px 10px;
-  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
-}
-
-.ff-shell__report-actions button:hover {
-  background: rgba(34, 41, 54, 0.95);
-  border-color: rgba(153, 166, 189, 0.42);
-  color: var(--ff-text-primary);
-}
-
-.ff-shell__error {
-  border-radius: 12px;
-  border: 1px solid rgba(255, 59, 48, 0.35);
-  background: rgba(255, 59, 48, 0.14);
-  color: #ff9a92;
-  padding: 10px 11px;
-  font-size: 12px;
-}
-
-.ff-shell__recent {
-  border: 1px solid rgba(130, 142, 165, 0.24);
-  border-radius: 14px;
-  background: rgba(19, 25, 35, 0.78);
-  padding: 11px;
-  display: grid;
-  gap: 10px;
-}
-
-.ff-shell__recent-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.ff-shell__recent-header h2 {
-  font-size: 13px;
-  letter-spacing: 0.01em;
-}
-
-.ff-shell__recent-header button {
-  color: var(--ff-text-secondary);
-  font-size: 11px;
-  border-radius: 8px;
-  border: 1px solid rgba(131, 144, 168, 0.28);
-  padding: 6px 8px;
-  background: rgba(131, 144, 168, 0.12);
-}
-
-.ff-shell__recent-list {
-  display: grid;
-  gap: 8px;
-}
-
-.ff-shell__recent-item {
-  border: 1px solid rgba(131, 144, 168, 0.22);
-  background: rgba(14, 20, 30, 0.72);
-  border-radius: 10px;
-  padding: 9px;
-  display: grid;
-  gap: 8px;
-}
-
-.ff-shell__recent-open {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--ff-text-primary);
-}
-
-.ff-shell__recent-open span:last-child {
-  color: var(--ff-text-muted);
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.ff-shell__recent-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  font-size: 11px;
-  color: var(--ff-text-secondary);
-}
-
-.ff-shell__recent-meta button {
-  margin-left: auto;
-  min-height: 28px;
-  color: var(--ff-text-secondary);
-  border: 1px solid rgba(131, 144, 168, 0.28);
-  background: rgba(131, 144, 168, 0.12);
-  border-radius: 8px;
-  padding: 4px 8px;
-  font-size: 11px;
-}
-
-.ff-shell__empty {
-  font-size: 12px;
-  color: var(--ff-text-muted);
-}
-
-.ff-shell__footer {
-  display: grid;
-  gap: 5px;
-}
-
-.ff-shell__footer p {
-  font-size: 11px;
-  color: var(--ff-text-muted);
-}
-
-.ff-shell__donate {
-  margin-top: 4px;
-  align-self: flex-start;
-}
-
-.ff-shell--recording .ff-shell__card {
-  border-color: rgba(255, 59, 48, 0.35);
-}
-
-.ff-shell--recording .ff-shell__title::after {
-  content: '';
-  display: inline-flex;
-  margin-left: 8px;
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--ff-live);
-  box-shadow: 0 0 0 6px var(--ff-live-soft);
-  animation: ffLivePulse 1.6s ease-in-out infinite;
-}
-
-.ff-shell--complete .ff-shell__card {
-  border-color: rgba(52, 199, 89, 0.42);
-}
-
-.ff-shell--error .ff-shell__card {
-  border-color: rgba(255, 59, 48, 0.38);
-}
-
-@keyframes ffLivePulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 var(--ff-live-soft);
-    opacity: 1;
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
-    opacity: 0.68;
-  }
-}
-
-@keyframes ffShellIn {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes ffSpinnerSpin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.ff-shell--processing .ff-shell__card::before {
-  content: '';
-  display: block;
-  width: 22px;
-  height: 22px;
-  margin: 8px auto;
-  border: 2.5px solid rgba(123, 138, 166, 0.3);
-  border-top-color: var(--ff-accent);
-  border-radius: 50%;
-  animation: ffSpinnerSpin 0.85s linear infinite;
-}
-
-/* Post-processing progress indicator */
-.ff-shell__processing {
-  border-radius: 12px;
-  padding: 14px;
-  border: 1px solid rgba(10, 132, 255, 0.32);
-  background: rgba(10, 132, 255, 0.1);
-  display: grid;
-  gap: 10px;
-}
-
-.ff-shell__processing-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ff-text-primary);
-  text-align: center;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-}
-
-.ff-shell__processing-dots {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  min-width: 28px;
-  font-family: 'SF Mono', 'Menlo', monospace;
-  letter-spacing: 0.08em;
-  color: rgba(219, 234, 255, 0.9);
-  opacity: 0.92;
-}
-
-.ff-shell__processing-bar-track {
-  height: 7px;
-  border-radius: 3px;
-  background: rgba(10, 132, 255, 0.18);
-  overflow: hidden;
-}
-
-.ff-shell__processing-bar-fill {
-  position: relative;
-  height: 100%;
-  border-radius: 3px;
-  background: linear-gradient(90deg, #0a84ff 0%, #4ab0ff 100%);
-  transition: width 860ms cubic-bezier(0.19, 0.91, 0.21, 1);
-  min-width: 0;
-}
-
-.ff-shell__processing-bar-fill::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    100deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.26) 45%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  transform: translateX(-140%);
-  animation: ffProcessSweep 1.5s linear infinite;
-}
-
-.ff-shell__processing-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.ff-shell__processing-percent {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--ff-accent);
-  font-variant-numeric: tabular-nums;
-  min-width: 36px;
-}
-
-.ff-shell__processing-step {
-  font-size: 12px;
-  color: var(--ff-text-secondary);
-  text-align: right;
-  flex: 1;
-}
-
-.ff-shell__error-guidance {
-  margin-top: 8px;
-  font-size: 11px;
-  color: var(--ff-text-muted);
-  line-height: 1.45;
-}
-
-.ff-shell__error-retry {
-  margin-top: 10px;
-  padding: 8px 13px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #ff9a92;
-  background: rgba(255, 59, 48, 0.1);
-  border: 1px solid rgba(255, 59, 48, 0.3);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background 140ms ease, border-color 140ms ease;
-}
-
-.ff-shell__error-retry:hover {
-  background: rgba(255, 59, 48, 0.17);
-  border-color: rgba(255, 59, 48, 0.4);
-}
-
-@keyframes ffProcessSweep {
-  to {
-    transform: translateX(140%);
-  }
-}
-
-:focus-visible {
-  outline: 2px solid var(--ff-accent);
-  outline-offset: 2px;
-}
-
-@media (max-width: 520px) {
-  .ff-shell {
-    padding: 10px;
-  }
-
-  .ff-shell__card {
-    padding: 14px;
-    max-height: calc(100vh - 20px);
-  }
-
-  .ff-shell__header {
-    gap: 8px;
-  }
-
-  .ff-shell__title {
-    font-size: 22px;
-  }
-
-  .ff-shell__report-actions button {
-    flex-basis: 100%;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-/**
- * markupr Global Styles
- *
- * Premium, Apple/Linear quality design system.
- * Uses CSS custom properties for runtime theme switching.
- */
-
-/* ============================================================================
-   CSS Reset & Base
-   ============================================================================ */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  /* Prevent font size inflation on mobile */
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-
-  /* Smooth scrolling */
-  scroll-behavior: smooth;
-}
-
-body {
-  min-height: 100vh;
-  font-family: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-
-  /* Theme colors via CSS custom properties */
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-
-  /* Smooth theme transitions */
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-body.markupr-hud-mode {
-  background-color: transparent !important;
-}
-
-html.markupr-hud-mode,
-html.markupr-hud-mode body,
-html.markupr-hud-mode #root {
-  background: transparent !important;
-}
-
-/* Remove default button styling */
-button {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-/* Remove default input styling */
-input,
-textarea,
-select {
-  font: inherit;
-  color: inherit;
-}
-
-/* Remove list styles */
-ul,
-ol {
-  list-style: none;
-}
-
-/* Remove anchor styling */
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-/* Images */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-/* Inherit fonts for form elements */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* Avoid text overflows */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-/* ============================================================================
-   Typography Utilities
-   ============================================================================ */
-
-.text-2xs { font-size: 0.625rem; }
-.text-xs { font-size: 0.75rem; }
-.text-sm { font-size: 0.875rem; }
-.text-base { font-size: 1rem; }
-.text-lg { font-size: 1.125rem; }
-.text-xl { font-size: 1.25rem; }
-.text-2xl { font-size: 1.5rem; }
-.text-3xl { font-size: 1.875rem; }
-.text-4xl { font-size: 2.25rem; }
-.text-5xl { font-size: 3rem; }
-
-.font-normal { font-weight: 400; }
-.font-medium { font-weight: 500; }
-.font-semibold { font-weight: 600; }
-.font-bold { font-weight: 700; }
-
-.leading-none { line-height: 1; }
-.leading-tight { line-height: 1.25; }
-.leading-snug { line-height: 1.375; }
-.leading-normal { line-height: 1.5; }
-.leading-relaxed { line-height: 1.625; }
-
-.tracking-tighter { letter-spacing: -0.05em; }
-.tracking-tight { letter-spacing: -0.025em; }
-.tracking-normal { letter-spacing: 0; }
-.tracking-wide { letter-spacing: 0.025em; }
-.tracking-wider { letter-spacing: 0.05em; }
-
-.font-mono {
-  font-family: 'SF Mono', Menlo, Monaco, monospace;
-}
-
-/* ============================================================================
-   Color Utilities
-   ============================================================================ */
-
-/* Text colors */
-.text-primary { color: var(--text-primary); }
-.text-secondary { color: var(--text-secondary); }
-.text-tertiary { color: var(--text-tertiary); }
-.text-inverse { color: var(--text-inverse); }
-.text-link { color: var(--text-link); }
-.text-accent { color: var(--accent-default); }
-
-/* Background colors */
-.bg-primary { background-color: var(--bg-primary); }
-.bg-secondary { background-color: var(--bg-secondary); }
-.bg-tertiary { background-color: var(--bg-tertiary); }
-.bg-elevated { background-color: var(--bg-elevated); }
-.bg-subtle { background-color: var(--bg-subtle); }
-.bg-accent { background-color: var(--accent-default); }
-.bg-accent-subtle { background-color: var(--accent-subtle); }
-
-/* Border colors */
-.border-default { border-color: var(--border-default); }
-.border-subtle { border-color: var(--border-subtle); }
-.border-strong { border-color: var(--border-strong); }
-.border-focus { border-color: var(--border-focus); }
-.border-accent { border-color: var(--accent-default); }
-
-/* Status colors */
-.text-success { color: var(--status-success); }
-.text-warning { color: var(--status-warning); }
-.text-error { color: var(--status-error); }
-.text-info { color: var(--status-info); }
-
-.bg-success { background-color: var(--status-success); }
-.bg-success-subtle { background-color: var(--status-success-subtle); }
-.bg-warning { background-color: var(--status-warning); }
-.bg-warning-subtle { background-color: var(--status-warning-subtle); }
-.bg-error { background-color: var(--status-error); }
-.bg-error-subtle { background-color: var(--status-error-subtle); }
-.bg-info { background-color: var(--status-info); }
-.bg-info-subtle { background-color: var(--status-info-subtle); }
-
-/* ============================================================================
-   Glass Morphism
-   ============================================================================ */
-
-.glass {
-  background: var(--surface-glass);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--surface-glass-border);
-}
-
-.glass-subtle {
-  background: var(--surface-glass);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid var(--surface-glass-border);
-}
-
-.glass-strong {
-  background: var(--surface-glass);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--surface-glass-border);
-}
-
-/* ============================================================================
-   Focus States
-   ============================================================================ */
-
-/* Default focus outline - remove for mouse users */
-:focus {
-  outline: none;
-}
-
-/* Focus visible - show for keyboard users */
-:focus-visible {
-  outline: 2px solid var(--accent-default);
-  outline-offset: 2px;
-}
-
-/* Custom focus ring class */
-.focus-ring:focus-visible {
-  box-shadow: 0 0 0 3px var(--border-focus);
-}
-
-/* ============================================================================
-   Interactive States
-   ============================================================================ */
-
-/* Hover background */
-.hover-bg:hover {
-  background-color: var(--bg-subtle);
-}
-
-/* Active state */
-.active-scale:active {
-  transform: scale(0.98);
-}
-
-/* Disabled state */
-.disabled,
-[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* ============================================================================
-   Scrollbar Styling
-   ============================================================================ */
-
-/* Thin scrollbar for all scrollable elements */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-default) transparent;
-}
-
-/* Webkit scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border-default);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--border-strong);
-}
-
-/* Hide scrollbar but keep functionality */
-.scrollbar-hidden {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.scrollbar-hidden::-webkit-scrollbar {
-  display: none;
-}
-
-/* ============================================================================
-   Selection
-   ============================================================================ */
-
-::selection {
-  background-color: var(--accent-muted);
-  color: var(--text-primary);
-}
-
-/* ============================================================================
-   Premium Elevation (Box Shadows)
-   ============================================================================ */
-
-.shadow-xs {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.shadow-sm {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-}
-
-.shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-}
-
-.shadow-inner {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-}
-
-/* Accent glow */
-.shadow-glow {
-  box-shadow: 0 0 20px var(--accent-muted);
-}
-
-.shadow-glow-lg {
-  box-shadow: 0 0 40px var(--accent-muted);
-}
-
-/* ============================================================================
-   Border Radius
-   ============================================================================ */
-
-.rounded-none { border-radius: 0; }
-.rounded-sm { border-radius: 0.25rem; }
-.rounded { border-radius: 0.375rem; }
-.rounded-md { border-radius: 0.5rem; }
-.rounded-lg { border-radius: 0.75rem; }
-.rounded-xl { border-radius: 1rem; }
-.rounded-2xl { border-radius: 1.5rem; }
-.rounded-3xl { border-radius: 2rem; }
-.rounded-full { border-radius: 9999px; }
-
-/* ============================================================================
-   Transitions
-   ============================================================================ */
-
-.transition-none { transition: none; }
-.transition-all { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); }
-.transition-colors {
-  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
-}
-.transition-opacity { transition: opacity 200ms ease; }
-.transition-transform { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
-.transition-shadow { transition: box-shadow 200ms ease; }
-
-/* Durations */
-.duration-75 { transition-duration: 75ms; }
-.duration-100 { transition-duration: 100ms; }
-.duration-150 { transition-duration: 150ms; }
-.duration-200 { transition-duration: 200ms; }
-.duration-300 { transition-duration: 300ms; }
-.duration-500 { transition-duration: 500ms; }
-
-/* Easings */
-.ease-linear { transition-timing-function: linear; }
-.ease-in { transition-timing-function: ease-in; }
-.ease-out { transition-timing-function: ease-out; }
-.ease-in-out { transition-timing-function: ease-in-out; }
-.ease-spring { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-.ease-bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
-
-/* ============================================================================
-   Z-Index Scale
-   ============================================================================ */
-
-.z-behind { z-index: -1; }
-.z-base { z-index: 0; }
-.z-dropdown { z-index: 10; }
-.z-sticky { z-index: 20; }
-.z-fixed { z-index: 30; }
-.z-overlay { z-index: 40; }
-.z-modal { z-index: 50; }
-.z-popover { z-index: 60; }
-.z-tooltip { z-index: 70; }
-.z-toast { z-index: 80; }
-.z-max { z-index: 9999; }
-
-/* ============================================================================
-   Common Components
-   ============================================================================ */
-
-/* Card */
-.card {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-default);
-  border-radius: 0.75rem;
-  padding: 1rem;
-}
-
-.card-elevated {
-  background-color: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: 0.75rem;
-  padding: 1rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-/* Badge */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-
-.badge-accent {
-  background-color: var(--accent-subtle);
-  color: var(--accent-default);
-}
-
-.badge-success {
-  background-color: var(--status-success-subtle);
-  color: var(--status-success);
-}
-
-.badge-warning {
-  background-color: var(--status-warning-subtle);
-  color: var(--status-warning);
-}
-
-.badge-error {
-  background-color: var(--status-error-subtle);
-  color: var(--status-error);
-}
-
-/* Divider */
-.divider {
-  height: 1px;
-  background-color: var(--border-default);
-  margin: 1rem 0;
-}
-
-.divider-vertical {
-  width: 1px;
-  height: 100%;
-  background-color: var(--border-default);
-  margin: 0 0.5rem;
-}
-
-/* ============================================================================
-   Electron-Specific Styles
-   ============================================================================ */
-
-/* Drag region for title bar */
-.drag-region {
-  -webkit-app-region: drag;
-  app-region: drag;
-}
-
-.no-drag {
-  -webkit-app-region: no-drag;
-  app-region: no-drag;
-}
-
-/* Prevent text selection in UI */
-.select-none {
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* Allow text selection */
-.select-text {
-  user-select: text;
-  -webkit-user-select: text;
-}
-
-/* ============================================================================
-   Reduced Motion
-   ============================================================================ */
-
-@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;
-  }
-}
-/**
- * markupr - Premium Animation System
- *
- * A comprehensive collection of micro-animations designed for 60fps performance.
- * Uses GPU-accelerated properties (transform, opacity) for smooth rendering.
- *
- * Includes:
- * - Spring physics for dialogs
- * - Staggered list animations
- * - State transitions (recording, processing, complete, error)
- * - Loading skeletons with shimmer
- * - Success/error feedback
- * - Button press effects
- * - Tooltip animations
- * - Smooth scrolling
- */
-
-/* ============================================================================
-   CSS Custom Properties (Design Tokens)
-   ============================================================================ */
-
-:root {
-  /* Timing Functions - Spring Physics */
-  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
-  --spring-snap: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-
-  /* Timing Functions - Standard */
-  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* Durations */
-  --duration-instant: 100ms;
-  --duration-fast: 150ms;
-  --duration-normal: 250ms;
-  --duration-slow: 400ms;
-  --duration-slower: 600ms;
-
-  /* Colors for state animations — sourced from theme tokens */
-  --color-recording: var(--status-error);
-  --color-processing: var(--status-warning);
-  --color-success: var(--status-success);
-  --color-error: var(--status-error);
-  --color-info: var(--status-info);
-}
-
-/* ============================================================================
-   Reduced Motion Support
-   ============================================================================ */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* ============================================================================
-   Dialog / Modal Animations
-   ============================================================================ */
-
-/* Spring entrance for dialogs */
-@keyframes dialogEnter {
-  0% {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-@keyframes dialogExit {
-  0% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-}
-
-/* Backdrop fade */
-@keyframes backdropFadeIn {
-  from {
-    opacity: 0;
-    backdrop-filter: blur(0px);
-  }
-  to {
-    opacity: 1;
-    backdrop-filter: blur(8px);
-  }
-}
-
-@keyframes backdropFadeOut {
-  from {
-    opacity: 1;
-    backdrop-filter: blur(8px);
-  }
-  to {
-    opacity: 0;
-    backdrop-filter: blur(0px);
-  }
-}
-
-.ff-dialog-enter {
-  animation: dialogEnter var(--duration-normal) var(--spring-bounce);
-}
-
-.ff-dialog-exit {
-  animation: dialogExit var(--duration-fast) var(--ease-out);
-}
-
-.ff-backdrop-enter {
-  animation: backdropFadeIn var(--duration-normal) var(--ease-out);
-}
-
-.ff-backdrop-exit {
-  animation: backdropFadeOut var(--duration-fast) var(--ease-out);
-}
-
-/* ============================================================================
-   Staggered List Animations
-   ============================================================================ */
-
-@keyframes listItemEnter {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes listItemEnterLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes listItemEnterRight {
-  from {
-    opacity: 0;
-    transform: translateX(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes listItemEnterScale {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.ff-list-item-enter {
-  animation: listItemEnter var(--duration-normal) var(--spring-smooth) both;
-}
-
-.ff-list-item-enter-left {
-  animation: listItemEnterLeft var(--duration-normal) var(--spring-smooth) both;
-}
-
-.ff-list-item-enter-right {
-  animation: listItemEnterRight var(--duration-normal) var(--spring-smooth) both;
-}
-
-.ff-list-item-enter-scale {
-  animation: listItemEnterScale var(--duration-normal) var(--spring-bounce) both;
-}
-
-/* Stagger delays (use with data-stagger-index or inline style) */
-.ff-stagger-1 { animation-delay: 50ms; }
-.ff-stagger-2 { animation-delay: 100ms; }
-.ff-stagger-3 { animation-delay: 150ms; }
-.ff-stagger-4 { animation-delay: 200ms; }
-.ff-stagger-5 { animation-delay: 250ms; }
-.ff-stagger-6 { animation-delay: 300ms; }
-.ff-stagger-7 { animation-delay: 350ms; }
-.ff-stagger-8 { animation-delay: 400ms; }
-.ff-stagger-9 { animation-delay: 450ms; }
-.ff-stagger-10 { animation-delay: 500ms; }
-
-/* ============================================================================
-   Recording State Animations
-   ============================================================================ */
-
-/* Pulsing glow for recording state */
-@keyframes recordingPulse {
-  0%, 100% {
-    box-shadow:
-      0 0 0 0 rgba(239, 68, 68, 0.4),
-      0 4px 12px -2px rgba(239, 68, 68, 0.3);
-  }
-  50% {
-    box-shadow:
-      0 0 0 8px rgba(239, 68, 68, 0),
-      0 8px 20px -4px rgba(239, 68, 68, 0.4);
-  }
-}
-
-@keyframes recordingDotPulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.6;
-    transform: scale(0.9);
-  }
-}
-
-@keyframes recordingRing {
-  0% {
-    transform: scale(1);
-    opacity: 0.6;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.ff-recording-pulse {
-  animation: recordingPulse 2s ease-in-out infinite;
-}
-
-.ff-recording-dot {
-  animation: recordingDotPulse 1.5s ease-in-out infinite;
-}
-
-.ff-recording-ring {
-  animation: recordingRing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
-
-/* ============================================================================
-   Processing State Animations
-   ============================================================================ */
-
-@keyframes processingGradient {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes processingPulse {
-  0%, 100% {
-    opacity: 1;
-    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
-  }
-  50% {
-    opacity: 0.8;
-    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
-  }
-}
-
-@keyframes processingRotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.ff-processing-gradient {
-  background: linear-gradient(
-    90deg,
-    rgba(245, 158, 11, 0.1) 0%,
-    rgba(245, 158, 11, 0.3) 50%,
-    rgba(245, 158, 11, 0.1) 100%
-  );
-  background-size: 200% 100%;
-  animation: processingGradient 1.5s linear infinite;
-}
-
-.ff-processing-pulse {
-  animation: processingPulse 1.5s ease-in-out infinite;
-}
-
-.ff-processing-rotate {
-  animation: processingRotate 1s linear infinite;
-}
-
-/* ============================================================================
-   Success State Animations
-   ============================================================================ */
-
-@keyframes successPulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
-  }
-}
-
-@keyframes successBounce {
-  0%, 100% {
-    transform: scale(1);
-  }
-  25% {
-    transform: scale(1.1);
-  }
-  50% {
-    transform: scale(0.95);
-  }
-  75% {
-    transform: scale(1.02);
-  }
-}
-
-@keyframes successCheckDraw {
-  0% {
-    stroke-dashoffset: 24;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes successPop {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.ff-success-pulse {
-  animation: successPulse 1.5s ease-in-out;
-}
-
-.ff-success-bounce {
-  animation: successBounce 0.5s var(--spring-bounce);
-}
-
-.ff-success-check {
-  stroke-dasharray: 24;
-  stroke-dashoffset: 24;
-  animation: successCheckDraw 0.4s var(--ease-out) 0.2s forwards;
-}
-
-.ff-success-pop {
-  animation: successPop 0.4s var(--spring-bounce);
-}
-
-/* ============================================================================
-   Error State Animations
-   ============================================================================ */
-
-@keyframes errorShake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(4px);
-  }
-}
-
-@keyframes errorPulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
-    border-color: rgba(239, 68, 68, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
-    border-color: rgba(239, 68, 68, 0.8);
-  }
-}
-
-@keyframes errorFlash {
-  0%, 100% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: rgba(239, 68, 68, 0.1);
-  }
-}
-
-.ff-error-shake {
-  animation: errorShake 0.5s var(--ease-out);
-}
-
-.ff-error-pulse {
-  animation: errorPulse 1s ease-in-out 2;
-}
-
-.ff-error-flash {
-  animation: errorFlash 0.3s ease-in-out 2;
-}
-
-/* ============================================================================
-   Skeleton Loading Animations
-   ============================================================================ */
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-@keyframes skeletonPulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.ff-skeleton {
-  background: linear-gradient(
-    90deg,
-    rgba(55, 65, 81, 0.3) 0%,
-    rgba(75, 85, 99, 0.5) 50%,
-    rgba(55, 65, 81, 0.3) 100%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s ease-in-out infinite;
-  border-radius: 8px;
-}
-
-.ff-skeleton-pulse {
-  animation: skeletonPulse 1.5s ease-in-out infinite;
-}
-
-/* Skeleton variants */
-.ff-skeleton-text {
-  height: 16px;
-  margin-bottom: 8px;
-}
-
-.ff-skeleton-title {
-  height: 24px;
-  width: 60%;
-  margin-bottom: 12px;
-}
-
-.ff-skeleton-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-.ff-skeleton-thumbnail {
-  width: 100%;
-  aspect-ratio: 16/9;
-  border-radius: 8px;
-}
-
-.ff-skeleton-button {
-  height: 40px;
-  width: 120px;
-  border-radius: 8px;
-}
-
-/* ============================================================================
-   Button Press Effects
-   ============================================================================ */
-
-.ff-btn-press {
-  transition: transform var(--duration-instant) var(--ease-out),
-              box-shadow var(--duration-instant) var(--ease-out);
-  will-change: transform;
-}
-
-.ff-btn-press:hover {
-  transform: translateY(-1px);
-}
-
-.ff-btn-press:active {
-  transform: scale(0.97) translateY(0);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-/* Scale press effect */
-.ff-btn-scale {
-  transition: transform var(--duration-instant) var(--spring-bounce);
-  will-change: transform;
-}
-
-.ff-btn-scale:hover {
-  transform: scale(1.02);
-}
-
-.ff-btn-scale:active {
-  transform: scale(0.95);
-}
-
-/* Ripple effect (requires JS for position) */
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-.ff-ripple {
-  position: absolute;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.3);
-  transform: scale(0);
-  animation: ripple 0.6s linear;
-  pointer-events: none;
-}
-
-/* ============================================================================
-   Tooltip Animations
-   ============================================================================ */
-
-@keyframes tooltipFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes tooltipFadeOut {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(4px) scale(0.95);
-  }
-}
-
-@keyframes tooltipFadeInTop {
-  from {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.ff-tooltip-enter {
-  animation: tooltipFadeIn var(--duration-fast) var(--spring-smooth);
-}
-
-.ff-tooltip-exit {
-  animation: tooltipFadeOut var(--duration-instant) var(--ease-out);
-}
-
-.ff-tooltip-enter-top {
-  animation: tooltipFadeInTop var(--duration-fast) var(--spring-smooth);
-}
-
-/* ============================================================================
-   Toast / Notification Animations
-   ============================================================================ */
-
-@keyframes toastSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(100%) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes toastSlideOut {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(100%) scale(0.9);
-  }
-}
-
-@keyframes toastSlideInTop {
-  from {
-    opacity: 0;
-    transform: translateY(-100%) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.ff-toast-enter {
-  animation: toastSlideIn var(--duration-normal) var(--spring-smooth);
-}
-
-.ff-toast-exit {
-  animation: toastSlideOut var(--duration-fast) var(--ease-out);
-}
-
-.ff-toast-enter-top {
-  animation: toastSlideInTop var(--duration-normal) var(--spring-smooth);
-}
-
-/* Slide up animation for update notifications */
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-slide-up {
-  animation: slideUp 0.3s var(--spring-smooth);
-}
-
-/* ============================================================================
-   Card Hover Effects
-   ============================================================================ */
-
-.ff-card-hover {
-  transition: transform var(--duration-fast) var(--ease-out),
-              box-shadow var(--duration-fast) var(--ease-out);
-  will-change: transform;
-}
-
-.ff-card-hover:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.3);
-}
-
-.ff-card-lift {
-  transition: transform var(--duration-normal) var(--spring-smooth),
-              box-shadow var(--duration-normal) var(--ease-out);
-}
-
-.ff-card-lift:hover {
-  transform: translateY(-4px) scale(1.01);
-  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
-}
-
-/* ============================================================================
-   Badge / Counter Animations
-   ============================================================================ */
-
-@keyframes badgePop {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.3);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes badgeBounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  25% {
-    transform: translateY(-4px);
-  }
-  50% {
-    transform: translateY(0);
-  }
-  75% {
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes counterIncrement {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-.ff-badge-pop {
-  animation: badgePop var(--duration-normal) var(--spring-bounce);
-}
-
-.ff-badge-bounce {
-  animation: badgeBounce 0.5s var(--ease-out);
-}
-
-.ff-counter-increment {
-  animation: counterIncrement 0.3s var(--spring-bounce);
-}
-
-/* ============================================================================
-   Page / View Transitions
-   ============================================================================ */
-
-@keyframes pageSlideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes pageSlideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes pageFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes pageZoomIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.ff-page-slide-right {
-  animation: pageSlideInRight var(--duration-slow) var(--spring-smooth);
-}
-
-.ff-page-slide-left {
-  animation: pageSlideInLeft var(--duration-slow) var(--spring-smooth);
-}
-
-.ff-page-fade {
-  animation: pageFadeIn var(--duration-normal) var(--ease-out);
-}
-
-.ff-page-zoom {
-  animation: pageZoomIn var(--duration-normal) var(--spring-smooth);
-}
-
-/* ============================================================================
-   Scrolling Behavior
-   ============================================================================ */
-
-.ff-smooth-scroll {
-  scroll-behavior: smooth;
-}
-
-.ff-scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.ff-scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* Custom scrollbar styling */
-.ff-scrollbar-styled {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(107, 114, 128, 0.5) transparent;
-}
-
-.ff-scrollbar-styled::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.ff-scrollbar-styled::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 3px;
-}
-
-.ff-scrollbar-styled::-webkit-scrollbar-thumb {
-  background: rgba(107, 114, 128, 0.5);
-  border-radius: 3px;
-}
-
-.ff-scrollbar-styled::-webkit-scrollbar-thumb:hover {
-  background: rgba(107, 114, 128, 0.7);
-}
-
-/* ============================================================================
-   Focus States
-   ============================================================================ */
-
-@keyframes focusRing {
-  0% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
-  }
-  100% {
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
-  }
-}
-
-.ff-focus-ring:focus {
-  outline: none;
-  animation: focusRing 0.2s ease-out forwards;
-}
-
-.ff-focus-ring:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.ff-focus-ring:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
-}
-
-/* ============================================================================
-   Utility Animations
-   ============================================================================ */
-
-/* Fade */
-.ff-fade-in {
-  animation: pageFadeIn var(--duration-normal) var(--ease-out);
-}
-
-/* Spin */
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.ff-spin {
-  animation: spin 1s linear infinite;
-}
-
-.ff-spin-slow {
-  animation: spin 2s linear infinite;
-}
-
-/* Pulse */
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.ff-pulse {
-  animation: pulse 2s ease-in-out infinite;
-}
-
-/* Bounce */
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-.ff-bounce {
-  animation: bounce 1s ease-in-out infinite;
-}
-
-/* Ping */
-@keyframes ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.ff-ping {
-  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
-
-/* Wiggle */
-@keyframes wiggle {
-  0%, 100% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(-5deg);
-  }
-  75% {
-    transform: rotate(5deg);
-  }
-}
-
-.ff-wiggle {
-  animation: wiggle 0.5s ease-in-out;
-}
-
-/* ============================================================================
-   Component-Specific Centralized Keyframes
-   ============================================================================ */
-
-/* Fade out */
-@keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-.ff-fade-out {
-  animation: fadeOut var(--duration-fast) var(--ease-out);
-}
-
-/* Pulse with scale (recording dots, waveform indicators) */
-@keyframes pulseScale {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.6;
-    transform: scale(0.95);
-  }
-}
-
-.ff-pulse-scale {
-  animation: pulseScale 1.5s ease-in-out infinite;
-}
-
-/* Glow pulse (accent-colored box-shadow) */
-@keyframes glowPulse {
-  0%, 100% {
-    box-shadow: 0 0 20px var(--accent-muted);
-  }
-  50% {
-    box-shadow: 0 0 40px var(--accent-muted);
-  }
-}
-
-.ff-glow-pulse {
-  animation: glowPulse 3s ease-in-out infinite;
-}
-
-/* Border color pulse */
-@keyframes pulseBorder {
-  0%, 100% {
-    border-color: rgba(59, 130, 246, 0.5);
-  }
-  50% {
-    border-color: rgba(59, 130, 246, 0.8);
-  }
-}
-
-.ff-pulse-border {
-  animation: pulseBorder 1.5s ease-in-out infinite;
-}
-
-/* Badge float up and fade */
-@keyframes badgeFloat {
-  0% {
-    transform: scale(0) translateY(0);
-    opacity: 0;
-  }
-  20% {
-    transform: scale(1.2) translateY(-2px);
-    opacity: 1;
-  }
-  40% {
-    transform: scale(1) translateY(-4px);
-  }
-  100% {
-    transform: scale(0.8) translateY(-16px);
-    opacity: 0;
-  }
-}
-
-.ff-badge-float {
-  animation: badgeFloat 1.2s ease-out forwards;
-}
-
-/* Annotation toolbar entrance */
-@keyframes toolbarFadeInUp {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-.ff-toolbar-enter {
-  animation: toolbarFadeInUp 0.3s var(--ease-out) forwards;
-}
-
-/* ============================================================================
-   GPU Acceleration Helpers
-   ============================================================================ */
-
-.ff-gpu {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-.ff-will-change-transform {
-  will-change: transform;
-}
-
-.ff-will-change-opacity {
-  will-change: opacity;
-}
-
-/* ============================================================================
-   Transition Utilities
-   ============================================================================ */
-
-.ff-transition-colors {
-  transition: background-color var(--duration-fast) var(--ease-out),
-              border-color var(--duration-fast) var(--ease-out),
-              color var(--duration-fast) var(--ease-out);
-}
-
-.ff-transition-transform {
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-
-.ff-transition-opacity {
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-
-.ff-transition-shadow {
-  transition: box-shadow var(--duration-fast) var(--ease-out);
-}
-
-.ff-transition-all {
-  transition: all var(--duration-fast) var(--ease-out);
-}