/* Timeline Stories — UI kit (load LAST so it wins over page CSS) */
:root {
  --ts-bg: #0f1419;
  --ts-bg-soft: #1a222d;
  --ts-surface: #ffffff;
  --ts-surface-2: #f8fafc;
  --ts-surface-muted: #f1f5f9;
  --ts-text: #0f172a;
  --ts-text-secondary: #334155;
  --ts-muted: #64748b;
  --ts-muted-2: #94a3b8;
  --ts-primary: #2563eb;
  --ts-primary-hover: #1d4ed8;
  --ts-primary-dark: #1e40af;
  --ts-accent: #7c3aed;
  --ts-success: #059669;
  --ts-success-hover: #047857;
  --ts-danger: #dc2626;
  --ts-danger-hover: #b91c1c;
  --ts-border: #e2e8f0;
  --ts-border-strong: #cbd5e1;
  --ts-focus: rgba(37, 99, 235, 0.32);
  --ts-radius-sm: 6px;
  --ts-radius: 8px;
  --ts-radius-lg: 12px;
  --ts-radius-xl: 16px;
  --ts-space-1: 4px;
  --ts-space-2: 8px;
  --ts-space-3: 12px;
  --ts-space-4: 16px;
  --ts-space-5: 24px;
  --ts-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ts-text-xs: 11px;
  --ts-text-sm: 12px;
  --ts-text-md: 13px;
  --ts-text-lg: 15px;
  --ts-text-xl: 18px;
  --ts-control-h: 36px;
  --ts-control-h-sm: 30px;
  --ts-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  --ts-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --primary: var(--ts-primary);
  --primary-dark: var(--ts-primary-dark);
  --accent: var(--ts-accent);
  --success: var(--ts-success);
  --danger: var(--ts-danger);
  --muted: var(--ts-muted);
  --text: var(--ts-text);
  --radius: var(--ts-radius-lg);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  min-height: var(--ts-control-h) !important;
  padding: 0 16px !important;
  border-radius: var(--ts-radius) !important;
  font-family: var(--ts-font) !important;
  font-size: var(--ts-text-md) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ts-focus) !important; }
.btn:disabled, .btn[disabled] { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; }
.btn-sm { min-height: var(--ts-control-h-sm) !important; padding: 0 10px !important; font-size: var(--ts-text-sm) !important; border-radius: var(--ts-radius-sm) !important; }
.btn-primary { background: var(--ts-primary) !important; color: #fff !important; border-color: var(--ts-primary-dark) !important; }
.btn-primary:hover:not(:disabled) { background: var(--ts-primary-hover) !important; color: #fff !important; }
.btn-secondary { background: var(--ts-surface) !important; color: var(--ts-text-secondary) !important; border-color: var(--ts-border-strong) !important; }
.btn-secondary:hover:not(:disabled) { background: var(--ts-surface-muted) !important; color: var(--ts-text) !important; }
.btn-ghost { background: transparent !important; color: var(--ts-text-secondary) !important; border-color: transparent !important; }
.btn-ghost:hover:not(:disabled) { background: rgba(15,23,42,0.06) !important; color: var(--ts-text) !important; }
.btn-danger { background: var(--ts-danger) !important; color: #fff !important; border-color: var(--ts-danger-hover) !important; }
.btn-danger:hover:not(:disabled) { background: var(--ts-danger-hover) !important; }
.btn-success { background: var(--ts-success) !important; color: #fff !important; border-color: var(--ts-success-hover) !important; }
.btn-success:hover:not(:disabled) { background: var(--ts-success-hover) !important; }
.btn-accent { background: var(--ts-accent) !important; color: #fff !important; }
.btn-accent:hover:not(:disabled) { background: #6d28d9 !important; }

/* ===== Fields ===== */
.ui-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--ts-text-sm); font-weight: 600; color: var(--ts-text); }
.ui-field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--ts-text-sm); font-weight: 600; color: var(--ts-text); }
.ui-help, .ui-field .muted { font-weight: 400 !important; font-size: var(--ts-text-xs) !important; color: var(--ts-muted) !important; line-height: 1.4; }
.ui-input, .ui-textarea, .ui-select {
  display: block !important;
  width: 100% !important;
  min-height: var(--ts-control-h) !important;
  padding: 8px 12px !important;
  border: 1px solid var(--ts-border-strong) !important;
  border-radius: var(--ts-radius) !important;
  background: var(--ts-surface) !important;
  color: var(--ts-text) !important;
  font-family: var(--ts-font) !important;
  font-size: var(--ts-text-md) !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}
.ui-textarea { min-height: 3.4em !important; max-height: 12em; resize: vertical; }
.ui-input:focus, .ui-textarea:focus, .ui-select:focus {
  outline: none !important;
  border-color: var(--ts-primary) !important;
  box-shadow: 0 0 0 3px var(--ts-focus) !important;
}
.ui-input-sm { min-height: var(--ts-control-h-sm) !important; padding: 4px 8px !important; font-size: var(--ts-text-sm) !important; border-radius: var(--ts-radius-sm) !important; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ts-muted-2) !important; }

/* ===== Cards / modal / alerts ===== */
.ui-card, .card {
  background: var(--ts-surface) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius-lg) !important;
  box-shadow: var(--ts-shadow-sm) !important;
  color: var(--ts-text);
}
.ui-card-title { margin: 0 0 var(--ts-space-3); font-size: var(--ts-text-lg); font-weight: 700; color: var(--ts-text); letter-spacing: -0.01em; }
.ui-section-title { margin: 0 0 var(--ts-space-2); font-size: var(--ts-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ts-muted); }
.ui-modal-backdrop { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); }
.ui-modal {
  background: var(--ts-surface);
  border-radius: var(--ts-radius-lg);
  padding: 20px 22px;
  max-width: 420px;
  width: 92%;
  box-shadow: var(--ts-shadow);
  font-family: var(--ts-font);
}
.ui-modal-title { font-weight: 700; font-size: 16px; margin: 0 0 10px; color: var(--ts-text); }
.ui-modal-body { font-size: 14px; line-height: 1.5; color: var(--ts-text-secondary); white-space: pre-wrap; }
.ui-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ui-alert { padding: 10px 12px; border-radius: var(--ts-radius); font-size: var(--ts-text-md); line-height: 1.4; margin: 0 0 var(--ts-space-3); }
.ui-alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ui-alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.ui-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.ui-stack { display: flex; flex-direction: column; gap: var(--ts-space-3); }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-2); }
.contrib-btn-lg.btn { flex: 1 1 200px; min-height: 48px !important; padding: 12px 18px !important; font-size: 15px !important; border-radius: 10px !important; }

/* ===== Dashboard ===== */
.story-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.story-table th {
  font-size: var(--ts-text-xs) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ts-muted) !important;
  font-weight: 700 !important;
  background: var(--ts-surface-2) !important;
  border-bottom: 1px solid var(--ts-border) !important;
  padding: 10px 12px !important;
}
.story-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--ts-border) !important;
  font-size: var(--ts-text-md) !important;
  color: var(--ts-text-secondary) !important;
  vertical-align: middle;
}
.story-table tr:hover td { background: var(--ts-surface-2) !important; }
.story-title { font-weight: 600 !important; color: var(--ts-text) !important; font-size: var(--ts-text-md) !important; }
.story-share-controls .ui-input,
.story-share-controls select,
.story-share-controls .upload-share-password {
  min-height: var(--ts-control-h-sm) !important;
  border-radius: var(--ts-radius-sm) !important;
  border: 1px solid var(--ts-border-strong) !important;
  background: #fff !important;
  font-size: var(--ts-text-sm) !important;
}
.import-pack-card {
  padding: 14px 16px !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius-lg) !important;
  background: var(--ts-surface) !important;
  box-shadow: var(--ts-shadow-sm) !important;
}

/* ===== Editor form (kill old cyan fields) ===== */
#form-panel {
  background: var(--ts-surface-2) !important;
}
#form-panel .form-group { margin-bottom: 14px !important; }
#form-panel .form-group label,
#form-panel .form-group.ui-field label {
  display: block !important;
  font-size: var(--ts-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ts-muted) !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
}
#form-panel .form-group input,
#form-panel .form-group textarea,
#form-panel .form-group select,
#form-panel input[type="text"],
#form-panel input[type="datetime-local"],
#form-panel input[type="password"],
#form-panel textarea {
  width: 100% !important;
  min-height: var(--ts-control-h) !important;
  background: #fff !important;
  border: 1px solid var(--ts-border-strong) !important;
  border-radius: var(--ts-radius) !important;
  color: var(--ts-text) !important;
  padding: 8px 12px !important;
  font-size: var(--ts-text-md) !important;
  font-family: var(--ts-font) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
#form-panel .form-group input:focus,
#form-panel .form-group textarea:focus,
#form-panel .form-group select:focus,
#form-panel input:focus,
#form-panel textarea:focus {
  outline: none !important;
  border-color: var(--ts-primary) !important;
  box-shadow: 0 0 0 3px var(--ts-focus) !important;
}
#form-panel .empty-hint {
  color: var(--ts-text-secondary) !important;
  font-size: var(--ts-text-md) !important;
  line-height: 1.5 !important;
  padding: 20px 16px !important;
  background: #fff !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius-lg) !important;
  margin: 8px 0 !important;
  box-shadow: var(--ts-shadow-sm) !important;
}
#form-panel .empty-hint-title {
  font-size: var(--ts-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ts-primary) !important;
  margin: 0 0 12px !important;
  text-align: center !important;
}
#form-panel .empty-hint-list { margin: 0; padding-left: 1.2em; color: var(--ts-text-secondary) !important; }
#form-panel .empty-hint-list strong { color: var(--ts-text) !important; }
#form-panel .btn-save,
header .btn-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--ts-control-h-sm) !important;
  padding: 0 14px !important;
  border-radius: var(--ts-radius) !important;
  font-size: var(--ts-text-sm) !important;
  font-weight: 600 !important;
  font-family: var(--ts-font) !important;
  border: 1px solid var(--ts-primary-dark) !important;
  cursor: pointer;
  background: var(--ts-primary) !important;
  color: #fff !important;
}
#form-panel .btn-save:hover:not(:disabled),
header .btn-save:hover:not(:disabled) { background: var(--ts-primary-hover) !important; }
#form-panel .btn-save:disabled,
header .btn-save:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #64748b !important;
  border-color: #475569 !important;
}
#form-panel .form-deselect-bar {
  background: #fff !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius) !important;
  padding: 6px 8px !important;
  margin-bottom: 12px !important;
}
#feature-list .feature-item,
#featureList .feature-item,
.feature-list .item {
  border-radius: var(--ts-radius-sm);
}

/* ===== Timeline panels + play strip ===== */
#view-panel,
#search-panel,
#stories-panel {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius-lg) !important;
  box-shadow: var(--ts-shadow-sm) !important;
}
#view-panel select,
#view-panel input[type="text"],
#view-panel input[type="number"],
#search-panel select,
#search-panel input[type="text"],
#stories-panel select,
#stories-panel input[type="text"],
.menu-panel select,
.media-menu-panel select,
#displayModeSelect {
  min-height: var(--ts-control-h-sm) !important;
  padding: 4px 8px !important;
  border: 1px solid var(--ts-border-strong) !important;
  border-radius: var(--ts-radius-sm) !important;
  background: #fff !important;
  color: var(--ts-text) !important;
  font-family: var(--ts-font) !important;
  font-size: var(--ts-text-sm) !important;
}
#view-panel select:focus,
#view-panel input:focus,
#search-panel input:focus,
#displayModeSelect:focus {
  outline: none !important;
  border-color: var(--ts-primary) !important;
  box-shadow: 0 0 0 2px var(--ts-focus) !important;
}
#view-panel label,
#search-panel label,
#stories-panel label {
  font-size: var(--ts-text-sm) !important;
  font-weight: 600 !important;
  color: var(--ts-text-secondary) !important;
}
.play-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  background: #fff !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--ts-shadow-sm) !important;
}
.play-controls button {
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: var(--ts-radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  font-family: var(--ts-font) !important;
}
.play-controls button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ts-focus) !important; }
.play-controls button:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
#firstBtn, #prevBtn { background: var(--ts-primary) !important; color: #fff !important; }
#nextBtn, #lastBtn { background: var(--ts-primary) !important; color: #fff !important; }
#playBtn { background: var(--ts-success) !important; color: #fff !important; }
#pauseBtn { background: var(--ts-warning, #d97706) !important; color: #fff !important; }
#stopBtn { background: var(--ts-danger) !important; color: #fff !important; }
#firstBtn:disabled, #prevBtn:disabled, #nextBtn:disabled, #lastBtn:disabled {
  background: #94a3b8 !important; color: #f8fafc !important;
}

/* Contribute drop zone */
.contrib-drop {
  border: 2px dashed var(--ts-primary) !important;
  border-radius: var(--ts-radius-lg) !important;
  background: #eff6ff !important;
}
.contrib-card.ui-card, .contrib-card {
  border-radius: var(--ts-radius-xl) !important;
  box-shadow: var(--ts-shadow) !important;
  padding: 22px 24px !important;
}


/* Story Name badge: match header control font size */
.story-name-label,
#sidebar header .story-name-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  line-height: 1.2 !important;
}