markupr 2.1.8

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

@@ -0,0 +1,2270 @@
+: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);
+}