/* TTS speed segmented button group */
.speed-btn-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.speed-btn {
  padding: 3px 10px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  background: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1.6;
}
.speed-btn:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  color: var(--text-primary);
}
.speed-btn.active {
  background: var(--accent, #4b6ecc);
  border-color: var(--accent, #4b6ecc);
  color: #fff;
}
html[data-theme="light"] .speed-btn.active {
  background: var(--accent, #3a5bbf);
  border-color: var(--accent, #3a5bbf);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  min-height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Base styling for Lucide icons inside buttons/text */
.lucide {
  vertical-align: middle;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--success);
  color: #fff;
  border-radius: var(--radius-full);
  padding: var(--sp-md) var(--sp-xl);
  font-weight: var(--fw-semibold);
  box-shadow: 0 4px 14px rgba(35, 134, 54, 0.4);
  transition: all var(--duration-normal) var(--ease-out);
}

.btn--primary:hover {
  background: #2ea043;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(35, 134, 54, 0.5);
}

.btn--danger {
  background: var(--error);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: var(--sp-md) var(--sp-xl);
  font-weight: var(--fw-semibold);
  box-shadow: 0 4px 14px rgba(248, 81, 73, 0.4);
  transition: all var(--duration-normal) var(--ease-out);
}

.btn--danger:hover {
  background: #ff6a64;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(248, 81, 73, 0.5);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn--icon {
  padding: var(--sp-sm);
  min-width: 44px;
  min-height: 44px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Select / Dropdown */
.select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* In header: selects share space equally, center-aligned */
.header .select-wrap {
  flex: 1 1 0;
}

.header .select-wrap select {
  text-align: center;
  text-align-last: center;
  -webkit-text-align-last: center;
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--sp-sm) var(--sp-lg);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  min-height: 40px;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: background var(--duration-fast);
}

.select-wrap select:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Remove CSS arrow since we rely on natural look or custom icon */
.select-wrap::after {
  content: "";
  display: none;
}

/* Language swap button (was a plain span — now a button) */
.lang-arrow {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.5;
  background: none;
  border: none;
  padding: 4px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.lang-arrow:hover {
  opacity: 1;
  background: var(--bg-tertiary, rgba(255,255,255,0.07));
}

/* Recording indicator */
.rec-indicator {
  display: none;
  align-items: center;
}

.rec-indicator.active {
  display: flex;
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--recording);
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 4px var(--recording);
}

/* Timer */
.timer {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  min-width: 52px;
  text-align: center;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Quota thin progress bar */
.quota-bar {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  flex-shrink: 0;
  z-index: 10;
}

.quota-bar__fill {
  height: 100%;
  width: 100%;
  background: var(--success, #4ade80);
  transition: width 1s ease, background 0.5s ease;
}

/* First-use tooltip bubble */
.quota-tooltip {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  max-width: 280px;
  text-align: center;
  line-height: 1.4;
  z-index: 100;
  animation: quotaTipIn 0.3s ease both;
  cursor: pointer;
}

.quota-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--border);
}

.quota-tooltip::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--bg-secondary);
}

.quota-tooltip__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  margin-left: var(--sp-sm);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}

.quota-tooltip--hide {
  animation: quotaTipOut 0.3s ease both;
}

@keyframes quotaTipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes quotaTipOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ── Admin Users Table ──────────────────────────────────────────────────── */
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.users-table th {
  text-align: left;
  padding: var(--sp-sm) var(--sp-md);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.users-table td {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.user-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-weight: var(--fw-medium);
}

.user-email {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.badge--active {
  background: rgba(74, 222, 128, 0.15);
  color: var(--success, #4ade80);
}

.badge--idle {
  background: rgba(156, 163, 175, 0.15);
  color: var(--text-muted);
}

.quota-ok { color: var(--success, #4ade80); }
.quota-warn { color: var(--warning, #fbbf24); }
.quota-low { color: var(--error, #f87171); font-weight: var(--fw-semibold); }

/* Segment entry */
.segment {
  margin-bottom: var(--sp-lg);
  animation: fadeSlideIn 0.3s var(--ease-out) both;
}

.segment__time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-right: var(--sp-sm);
}

.segment__original {
  font-size: 1.1rem;
  font-weight: var(--fw-normal);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--sp-xs);
}

.segment__translation {
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.segment__translation--pending {
  color: transparent;
  background: linear-gradient(90deg, var(--text-muted) 0%, var(--text-primary) 50%, var(--text-muted) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textShimmer 2s linear infinite;
}

@keyframes textShimmer {
  to { background-position: 200% center; }
}

.segment__summary {
  font-size: var(--fs-sm);
  color: var(--segment-summary);
  margin-top: var(--sp-xs);
  padding-left: var(--sp-sm);
  border-left: 2px solid var(--segment-summary-border);
  line-height: 1.4;
}

.segment__summary--pending {
  font-size: var(--fs-sm);
  color: transparent;
  background: linear-gradient(90deg, var(--text-muted) 0%, var(--segment-summary) 50%, var(--text-muted) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textShimmer 2s linear infinite;
  margin-top: var(--sp-xs);
  padding-left: var(--sp-sm);
  border-left: 2px solid var(--segment-summary-border);
  line-height: 1.4;
}

/* Marker shown on segments whose TTS audio was skipped to catch up to
   the speaker. Inline glyph, muted, never replaces the text itself. */
.segment__tts-skipped {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.85em;
  opacity: 0.45;
  cursor: help;
  vertical-align: baseline;
}

/* Cut divider between paragraphs */
.segment-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin: var(--sp-lg) 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.segment-divider::before,
.segment-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.segment-divider::before {
  background: linear-gradient(to right, transparent, var(--border));
}

.segment-divider::after {
  background: linear-gradient(to left, transparent, var(--border));
}

/* Cut button flash — full-screen flash overlay */
.btn--cut-flash {
  animation: cutFlash 0.4s ease-out;
}

@keyframes cutFlash {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

.cut-flash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 222, 128, 0.08);
  z-index: 9999;
  pointer-events: none;
  animation: cutOverlay 0.4s ease-out forwards;
}

@keyframes cutOverlay {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Status Bar (Topic + Mode) */
.status-bar {
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15); /* Subtle dark blend with header */
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  width: 100%;
}

.status-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 6px var(--sp-md);
  width: 100%;
  max-width: 900px;
  min-height: 14px;
}

.mode-badge {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  margin-left: auto; /* Push to the right */
  transition: opacity 0.3s ease;
}

.mode-badge--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Confidence tiers — all segments share same padding to avoid layout shift */
.segment {
  padding-left: var(--sp-sm);
  border-left: 2px solid transparent;
}

.segment--conf-mid {
  opacity: 0.72;
}

.segment--conf-mid .segment__original {
  font-weight: var(--fw-normal);
}

.segment--conf-low {
  opacity: 0.55;
  border-left-color: var(--border);
  border-left-style: dashed;
}

.segment--conf-low .segment__original {
  font-weight: var(--fw-normal);
  color: var(--text-secondary);
}

.segment--preview {
  opacity: 0.85;
  transition: opacity 0.3s ease-out;
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--sp-sm) - 1px);
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, transparent 50%);
  animation: none;
  min-height: 1.5em;
}

.segment--preview .segment__original {
  font-style: italic;
  color: var(--text-secondary);
  font-weight: var(--fw-normal);
  opacity: 0.85;
}

/* Typing cursor for preview */
.preview-cursor::after {
  content: '▎';
  color: var(--accent);
  animation: cursorBlink 1s step-end infinite;
  font-weight: 300;
  margin-left: 1px;
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* New words fade in */
.preview-fresh {
  animation: wordAppear 0.25s ease-out;
}

@keyframes wordAppear {
  from {
    opacity: 0.3;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pending placeholder — vertical waveform of 18 thin bars that pulse on a
   traveling wave pattern. Audio-reactive via --audio-level (0..1) set by JS
   on each segment--pending element: bars amplify + brighten when user speaks
   louder. Shown from speech detection through STT finalization.

   Important: never shows actual (potentially wrong) text — the user only ever
   sees accurate finalized transcripts on screen. */
.segment--pending {
  --audio-level: 0;
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--sp-sm) - 1px);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) calc(3% + var(--audio-level) * 6%), transparent) 0%,
    transparent 70%);
  min-height: 1.5em;
  transition: background 0.2s ease-out;
}

.segment__pending-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 8px 0 6px;
}

.segment__pending-wave-bar {
  display: inline-block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  /* Opacity lifts with voice input so the bars brighten when user speaks. */
  opacity: calc(0.45 + var(--audio-level) * 0.45);
  /* scaleY animation driven by keyframes; --audio-level additively boosts
     amplitude so loud speech pushes bars taller than the idle wave. */
  transform: scaleY(0.3);
  transform-origin: center;
  animation: pendingWaveBar 1.2s ease-in-out infinite;
  transition: opacity 0.18s ease-out;
  will-change: transform;
}

/* Stagger each bar so delays form a traveling wave across the row.
   18 bars × ~0.07s ≈ 1.26s ≈ one animation period → seamless loop. */
.segment__pending-wave-bar:nth-child(1)  { animation-delay: 0.00s; }
.segment__pending-wave-bar:nth-child(2)  { animation-delay: 0.07s; }
.segment__pending-wave-bar:nth-child(3)  { animation-delay: 0.14s; }
.segment__pending-wave-bar:nth-child(4)  { animation-delay: 0.21s; }
.segment__pending-wave-bar:nth-child(5)  { animation-delay: 0.28s; }
.segment__pending-wave-bar:nth-child(6)  { animation-delay: 0.35s; }
.segment__pending-wave-bar:nth-child(7)  { animation-delay: 0.42s; }
.segment__pending-wave-bar:nth-child(8)  { animation-delay: 0.49s; }
.segment__pending-wave-bar:nth-child(9)  { animation-delay: 0.56s; }
.segment__pending-wave-bar:nth-child(10) { animation-delay: 0.63s; }
.segment__pending-wave-bar:nth-child(11) { animation-delay: 0.70s; }
.segment__pending-wave-bar:nth-child(12) { animation-delay: 0.77s; }
.segment__pending-wave-bar:nth-child(13) { animation-delay: 0.84s; }
.segment__pending-wave-bar:nth-child(14) { animation-delay: 0.91s; }
.segment__pending-wave-bar:nth-child(15) { animation-delay: 0.98s; }
.segment__pending-wave-bar:nth-child(16) { animation-delay: 1.05s; }
.segment__pending-wave-bar:nth-child(17) { animation-delay: 1.12s; }
.segment__pending-wave-bar:nth-child(18) { animation-delay: 1.19s; }

@keyframes pendingWaveBar {
  /* Silent: bars oscillate 0.25 ↔ 0.75 (gentle idle wave).
     Loud (audio=1): 0.75 ↔ 1.55 (pronounced jumping). */
  0%, 100% { transform: scaleY(calc(0.25 + var(--audio-level) * 0.5)); }
  50%      { transform: scaleY(calc(0.75 + var(--audio-level) * 0.8)); }
}

@media (prefers-reduced-motion: reduce) {
  .segment__pending-wave-bar {
    animation: none;
    transform: scaleY(0.5);
    opacity: 0.5;
  }
  .segment--pending { background: none; }
}

/* Pending wait-stage escalation — label fades in and pulse strengthens
   the longer STT takes on a single utterance, so the user knows the
   system is still working on a long phrase rather than frozen. */
.segment__pending-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.6s ease, color 0.4s ease;
  min-height: 1.2em;
  font-style: italic;
}

.segment--pending[data-wait-stage="0"] .segment__pending-label::after { content: ''; }
.segment--pending[data-wait-stage="1"] .segment__pending-label::after {
  content: 'Capturing a longer phrase…';
}
.segment--pending[data-wait-stage="2"] .segment__pending-label::after {
  content: 'Still listening — processing long utterance';
}

.segment--pending[data-wait-stage="1"] .segment__pending-label { opacity: 0.75; }
.segment--pending[data-wait-stage="2"] .segment__pending-label {
  opacity: 0.95;
  color: var(--accent-light, var(--accent));
}

/* Stronger pulse at stage 2 — half the period of the idle wave so the bars
   feel more active without becoming annoying. */
.segment--pending[data-wait-stage="2"] .segment__pending-wave-bar {
  animation-duration: 0.7s;
}

/* Slider (range input) */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  padding: 12px 0;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* Toggle / Checkbox */
.toggle {
  position: relative;
  width: 44px;
  height: 26px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.toggle::before {
  content: '';
  position: absolute;
  inset: -12px -4px;
  /* Expand touch target to >44x44px */
}

.toggle.active {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle__dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform var(--duration-fast);
}

.toggle.active .toggle__dot {
  transform: translateX(18px);
}

/* Settings tabs (admin) */
.settings-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--sp-lg);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 3px;
}

.settings-tab {
  flex: 1;
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}

.settings-tab:hover {
  color: var(--text-primary);
}

.settings-tab.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.settings-tab-content {
  display: none;
}

.settings-tab-content.active {
  display: block;
}

/* Inline users list in System tab */
.settings-users-list {
  max-height: 400px;
  overflow-y: auto;
}

.settings-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border);
}

.settings-user-card:last-child {
  border-bottom: none;
}

.settings-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.settings-user-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.settings-user-meta {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.settings-user-actions {
  display: flex;
  gap: var(--sp-xs);
  flex-shrink: 0;
}

.settings-user-actions .btn--sm {
  min-height: 32px;
  padding: 4px var(--sp-sm);
  font-size: var(--fs-xs);
}

/* Settings panel internals */

.settings-section {
  margin-bottom: var(--sp-xl);
}

.settings-section__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-md);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
}

.settings-row__label {
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.settings-row__value {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  min-width: 40px;
  text-align: right;
}

/* Textbox */
.textbox {
  width: 100%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm);
  resize: vertical;
}

.textbox:focus {
  border-color: var(--accent);
}

/* Toast */
.toast-container {
  position: fixed;
  top: var(--sp-xl);
  right: var(--sp-xl);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.toast {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-sm);
  animation: slideInRight 0.3s var(--ease-out) both;
  max-width: 360px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--border);
}

.toast--error {
  border-color: var(--error);
}

.toast--success {
  border-color: var(--success);
}

.toast__action {
  margin-left: var(--sp-md);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  flex-shrink: 0;
}

/* Separator */
.separator {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

/* Stats bar inline */
.stats-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Audio level meter */
.audio-meter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 40px;
  opacity: 0.7;
  overflow: hidden;
}

.audio-meter-canvas {
  display: block;
  border-radius: 3px;
  background: var(--meter-bg);
  max-width: 100%;
  height: 20px;
}

/* More menu */
.more-menu {
  position: absolute;
  bottom: calc(100% + var(--sp-sm));
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-sm);
  min-width: 200px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border);
  z-index: var(--z-panel);
  display: none;
}

.more-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-md) var(--sp-lg);
  min-height: 44px;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  text-align: left;
}

.more-menu__item:hover {
  background: var(--bg-secondary);
}

.more-menu__divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-xs) 0;
}

@media (max-width: 640px) {
  .more-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--sp-lg);
    padding-bottom: max(var(--sp-lg), env(safe-area-inset-bottom));
    /* CSS toggle animation for JS `.style.display = 'block'` */
    animation: slideUpSheet 0.25s var(--ease-out);
  }

  @keyframes slideUpSheet {
    from { transform: translateY(100%); opacity: 0.8; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* Source badge */
.source-badge {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: var(--fw-semibold);
}

.topic-bar {
  text-align: center;
  padding: 4px var(--sp-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.topic-badge {
  font-size: var(--fs-xs);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--topic-badge-bg);
  color: var(--topic-badge-text);
  font-weight: var(--fw-medium);
}

/* History panel */
.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  overflow-y: auto;
}

.history-empty {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--sp-xl) 0;
}

.history-card {
  position: relative;
  padding: var(--sp-md);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--duration-fast);
}
.history-card:hover {
  border-color: var(--accent);
}
.history-card__delete {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  opacity: 0;
  min-height: unset;
  min-width: unset;
  padding: 4px;
  color: var(--text-secondary);
  transition: opacity var(--duration-fast);
}
.history-card:hover .history-card__delete {
  opacity: 1;
}
.history-date-header {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  padding: var(--sp-sm) 0 var(--sp-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-xs);
}
.history-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-card__bottom {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.history-card__time {
  font-variant-numeric: tabular-nums;
}

/* Mobile: always show delete button (no hover on touch) */
@media (hover: none) {
  .history-card__delete { opacity: 0.6; }
}

/* History toolbar */
.history-toolbar {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

/* Select mode */
.history-card.selecting {
  padding-left: 36px;
}
.history-card__check {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--border-hover);
  transition: all var(--duration-fast);
}
.history-card.selected .history-card__check {
  background: var(--accent);
  border-color: var(--accent);
}
.history-card.selected .history-card__check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.history-card.selected {
  border-color: var(--accent);
}

/* Batch action bar */
.history-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md);
  margin-top: var(--sp-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Session viewer modal */
.modal--wide {
  max-width: 720px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.session-meta {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.session-audio-wrap {
  padding: var(--sp-md) var(--sp-xl);
  border-bottom: 1px solid var(--border);
}
.session-segments {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.session-segment {
  display: flex;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border);
}
.session-segment.active {
  background: rgba(88,166,255,0.06);
  border-radius: var(--radius-sm);
}
.session-segment__ts {
  font-size: var(--fs-xs);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  padding-top: 2px;
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}
.session-segment__ts:hover {
  text-decoration: underline;
}
.session-segment__text {
  flex: 1;
}
.session-segment__original {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin-bottom: 2px;
}
.session-segment__translation {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* "Session waiting for audio" banner — shown to devices that
   aren't currently capturing when the session was started in
   remote_browser mode and nobody has claimed upstream yet. Amber
   accent so it doesn't compete with the primary Start button while
   still being obviously actionable. */
/* "Preparing interpretation" indicator shown in the bottom bar while
   interpreter mode is on but the first TTS clip hasn't arrived yet. */
.interpreter-prep {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: 12px;
}
.interpreter-prep__dots {
  display: inline-flex;
  gap: 3px;
}
.interpreter-prep__dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: interpreter-prep-pulse 1.2s infinite ease-in-out;
}
.interpreter-prep__dots span:nth-child(2) { animation-delay: 0.2s; }
.interpreter-prep__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes interpreter-prep-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* URL quick-paste bar shown above subtitles when no session is running. */
.url-quickbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  margin: 0 var(--sp-md) var(--sp-sm);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-md);
}
.url-quickbar__hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(99, 102, 241, 0.9);
  font-weight: var(--fw-medium);
}
.url-quickbar__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.url-quickbar__input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font-size: var(--fs-sm);
  background: rgba(0,0,0,0.15);
  color: var(--text-primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-sm);
  outline: none;
}
.url-quickbar__input:focus { border-color: rgba(99, 102, 241, 0.5); }
.url-quickbar__input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.url-quickbar__clear {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(99, 102, 241, 0.15);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: none;
}
.url-quickbar.has-value .url-quickbar__clear { display: inline-flex; align-items: center; justify-content: center; }

.audio-claim-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md);
  margin: 0 var(--sp-md) var(--sp-sm);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
}
.audio-claim-banner__text { flex: 1; min-width: 0; }
.audio-claim-banner__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.audio-claim-banner__hint {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.audio-claim-banner__btn { flex-shrink: 0; }
.audio-claim-banner__buttons {
  display: flex;
  gap: var(--sp-xs);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Karaoke-style playback highlight. Word spans carry the live
   highlight while the segment row stays softly tinted so the user
   always knows which paragraph is playing even if the word span
   leaves the viewport. Clickable — click = seek to that word.
   Cross-fading both background and color (rather than a hard snap)
   masks the ~50-150 ms Whisper word-start jitter — a word landing
   30 ms "off" is perceptually invisible when the transition is a
   smooth 80 ms fade. Subtitle-UX convention from YouTube/Otter. */
.session-segment__original .word {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  transition: background-color 80ms ease, color 80ms ease;
}
.session-segment__original .word:hover {
  background: rgba(88,166,255,0.12);
}
.session-segment__original .word.active {
  background: var(--accent);
  color: var(--bg-base);
}

/* Settings hint */
.settings-hint {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-xs);
}

/* WS status dot */
.ws-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-secondary);
  box-shadow: 0 0 0 2px var(--bg-tertiary);
  flex-shrink: 0;
  transition: background var(--duration-fast), box-shadow var(--duration-fast);
}

.ws-dot.connected {
  background: var(--success);
  box-shadow: 0 0 4px var(--success);
}

.ws-dot.reconnecting {
  background: var(--warning);
  animation: pulse 1s ease-in-out infinite;
}

/* Mobile-specific component adjustments */
@media (max-width: 640px) {
  .select-wrap select {
    font-size: 16px;
    /* Prevents iOS zoom on focus */
    min-height: 44px;
    padding: var(--sp-sm) var(--sp-xl) var(--sp-sm) var(--sp-sm);
  }

  .textbox {
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  .segment__original {
    font-size: var(--fs-xl);
    line-height: 1.5;
  }

  .segment__translation {
    font-size: var(--fs-lg);
    line-height: 1.5;
  }

  .btn--primary {
    padding: var(--sp-sm) var(--sp-xl);
    font-size: var(--fs-lg);
  }

  .toast-container {
    top: auto;
    bottom: 60px;
    right: var(--sp-md);
    left: var(--sp-md);
  }

  .toast {
    max-width: 100%;
  }

  .more-menu {
    min-width: 180px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .btn--primary {
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-md);
  }
}

/* Button variants */
.btn--accent {
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
}

.btn--accent:hover {
  filter: brightness(1.15);
}

.btn--sm {
  min-height: 44px;
  padding: var(--sp-sm) var(--sp-lg);
  font-size: var(--fs-sm);
}

/* Pending changes notification box */
.pending-changes {
  margin-top: var(--sp-lg);
  padding: var(--sp-md);
  border-radius: var(--radius-md);
  background: var(--caution-bg);
  border: 1px solid var(--caution-border);
  animation: fadeIn var(--duration-normal) ease;
}

.pending-changes__header {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--caution);
  margin-bottom: var(--sp-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.pending-changes__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-md) 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.pending-changes__list li {
  padding: var(--sp-xs) 0;
}

.pending-changes__list li::before {
  content: '\2022';
  margin-right: var(--sp-sm);
  color: var(--caution);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay, rgba(0, 0, 0, 0.6));
  z-index: var(--z-modal, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--border);
  animation: fadeIn var(--duration-fast) ease-out;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border);
}

.modal__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0;
}

.modal__content {
  padding: var(--sp-lg);
  overflow-y: auto;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.modal__content h3,
.modal__content h4 {
  color: var(--text-primary);
  margin: var(--sp-md) 0 var(--sp-xs);
  font-weight: var(--fw-semibold);
}

.modal__content h3 { font-size: var(--fs-md); }
.modal__content h4 { font-size: var(--fs-sm); }

.modal__content p {
  margin: 0 0 var(--sp-sm);
}

.modal__content ul,
.modal__content ol {
  margin: 0 0 var(--sp-sm);
  padding-left: var(--sp-lg);
}

.modal__content li {
  margin-bottom: var(--sp-xs);
}

.modal__content strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.modal__content code {
  background: var(--bg-tertiary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

/* Economics compact badge (bottombar) */
.econ-badge {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* Economics panel grid */
.econ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.econ-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.econ-item__value {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.econ-item__label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
  text-align: center;
}

.econ-section-label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin: var(--sp-md) 0 var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}

.econ-savings {
  font-size: var(--fs-xs);
  color: var(--success);
  margin-bottom: var(--sp-md);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--savings-bg);
  border-radius: var(--radius-sm);
}

@media (max-width: 380px) {
  .econ-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .econ-badge {
    display: none;
  }
}

/* Mobile UX Audit Specific Tweaks */
#settings-close {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 1.25rem;
  border-radius: var(--radius-full);
  min-width: 44px;
  min-height: 44px;
}

#cut-btn {
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

#preset-delete {
  color: var(--error);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

#preset-delete:hover {
  background: rgba(248, 81, 73, 0.1);
  border-color: var(--error);
}

.bottombar .btn--ghost.btn--icon {
  color: var(--text-primary);
  font-size: 1.25rem;
}

@media (max-width: 640px) {
  .btn--ghost.btn--icon {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
  }
}

/* Custom dialog (replaces native confirm/alert/prompt) */
.dialog {
  max-width: 400px;
  width: 92vw;
}

.dialog__body {
  padding: var(--sp-lg) var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.dialog__message {
  font-size: var(--fs-md);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
}

.dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--border);
}

/* ── Login / Register Screen ──────────────────────────────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: var(--sp-lg);
  padding-top: max(var(--sp-lg), env(safe-area-inset-top));
  padding-bottom: max(var(--sp-lg), env(safe-area-inset-bottom));
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-2xl) var(--sp-xl);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.15),
    0 0 0 1px var(--border);
  animation: fadeIn var(--duration-normal) ease-out;
  overflow: hidden;
}

.login-logo {
  text-align: center;
  margin-bottom: var(--sp-xl);
}

.login-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--sp-xs);
  letter-spacing: -0.02em;
}

.login-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.login-input {
  width: 100%;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 16px; /* Must be >=16px to prevent iOS Safari auto-zoom on focus */
  font-family: var(--font-sans);
  min-height: 44px;
  transition: border-color var(--duration-fast);
  box-sizing: border-box;
}

.login-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.login-input::placeholder {
  color: var(--text-muted);
}

.login-btn {
  width: 100%;
  margin-top: var(--sp-sm);
  min-height: 44px;
  font-size: var(--fs-md);
}

.login-error {
  color: var(--error);
  font-size: var(--fs-xs);
  min-height: 1em;
  text-align: center;
}

.login-toggle {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: var(--sp-sm) 0 0;
}

.login-toggle a {
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.login-toggle a:hover {
  text-decoration: underline;
}

/* ── Invite Codes (Admin) ──────────────────────────────────────────────── */
.invites-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.invite-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.invite-code {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  letter-spacing: 0.05em;
  flex: 1;
}

.invite-code--used {
  color: var(--text-muted);
  text-decoration: line-through;
}

.invite-status {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-sm);
}

.invite-status--active {
  background: var(--success-dim, rgba(52, 211, 153, 0.15));
  color: var(--success, #34d399);
}

.invite-status--used {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.invite-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}