/* LoadingSpinner.css */

.loading-spinner-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  padding: var(--space-lg);
  z-index: var(--z-overlay);
}

.loading-spinner-surface {
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elevated);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.loading-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.loading-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.loading-brand-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-logo);
  letter-spacing: -0.2px;
}

.loading-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.loading-message {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.loading-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  animation: loading-dot-pulse 1s ease-in-out infinite;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* Animation defined in design-tokens.css */

@media (prefers-reduced-motion: reduce) {
  .loading-dot {
    animation: none;
    opacity: 0.8;
    transform: none;
  }
}
/* AuthForm.css - Login/Signup form styles */

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* Icon SVG background pattern */
.auth-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Right side icon */
.auth-wrapper::after {
  content: "";
  position: absolute;
  bottom: 5%;
  right: 3%;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.auth-container {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 10;
}

/* Brand */
.auth-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-logo {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.auth-brand-name {
  font-size: 15px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.auth-brand-version {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.7;
}

/* Card */
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.auth-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
  text-align: center;
  letter-spacing: -0.3px;
}

.auth-employee-note {
  margin: -14px 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* Messages */
.auth-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.auth-message.error {
  background: var(--bgColor-danger-muted);
  border: 1px solid var(--borderColor-danger-muted);
  color: var(--fgColor-danger);
}

.auth-message.info {
  background: var(--bgColor-accent-muted);
  border: 1px solid var(--borderColor-accent-muted);
  color: var(--fgColor-link);
}

.auth-message.success {
  background: var(--bgColor-success-muted);
  border: 1px solid var(--borderColor-success-muted);
  color: var(--fgColor-success);
}

.auth-message svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: capitalize;
}

.auth-required {
  color: var(--error);
}

.auth-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: auto;
}

.auth-field input {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  border-radius: 6px;
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  will-change: border-color, box-shadow;
}

.auth-field input:hover:not(:disabled) {
  border-color: var(--border-hover);
}

.auth-field input:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.auth-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-field input[aria-invalid="true"] {
  border-color: var(--color-error, #f85149);
}

.auth-field input[aria-invalid="true"]:focus {
  border-color: var(--color-error, #f85149);
  box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.1);
}

/* Buttons */
.auth-btn {
  height: 42px;
  padding: 0 17px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  letter-spacing: 0.3px;
  will-change: background-color, border-color;
}

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

.auth-btn.primary {
  background: var(--fgColor-success);
  color: var(--fgColor-onEmphasis);
  border-color: var(--borderColor-success-emphasis);
}

.auth-btn.primary:hover:not(:disabled) {
  background: var(--bgColor-success-emphasis);
  border-color: var(--borderColor-success-emphasis);
}

.auth-btn.primary:active:not(:disabled) {
  transform: translateY(1px);
}

.auth-btn.secondary {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--muted);
}

.auth-btn.secondary:hover:not(:disabled) {
  background: var(--bg-alt);
  border-color: var(--accent);
  color: var(--text);
}

.auth-btn.secondary:active:not(:disabled) {
  transform: scale(0.98);
}

.auth-btn.oauth {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--text);
  width: 100%;
  height: 42px;
  font-size: 13px;
  padding: 0 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.auth-btn.oauth:hover:not(:disabled) {
  background: var(--bg-alt);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.auth-btn.oauth:active:not(:disabled) {
  transform: translateY(-1px);
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-divider span {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

/* OAuth buttons */
.auth-oauth {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Footer */
.auth-footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #2a2a2a;
}

.auth-link {
  background: none;
  border: none;
  color: var(--link);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.auth-link-default {
  color: var(--link);
  text-decoration: none;
}

.auth-link-default:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.auth-link-default:focus-visible {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .auth-container {
    gap: 8px;
  }

  .auth-logo {
    width: 30px;
    height: 30px;
  }

  .auth-brand-name {
    font-size: 13px;
  }

  .auth-card {
    padding: 24px;
  }

  .auth-title {
    font-size: 16px;
    margin-bottom: 18px;
  }
}

/* OTP Input Container */
.otp-container {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 16px 0;
}

.otp-input {
  width: 46px;
  height: 52px;
  text-align: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  letter-spacing: 2px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.otp-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-glow);
}

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

.otp-input[aria-invalid="true"] {
  border-color: var(--color-error, #f85149);
}

/* OAuth finalizing loader */
.auth-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
}

.auth-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
  animation: auth-dot-pulse 1s ease-in-out infinite;
}

.auth-dot:nth-child(2) {
  animation-delay: 0.14s;
}

.auth-dot:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes auth-dot-pulse {
  0%,
  80%,
  100% {
    opacity: 0.4;
    transform: translateY(0) scale(0.9);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-dot {
    animation: none;
    opacity: 0.8;
    transform: none;
  }
}
/* Landing Page - Simple & Content-Focused */

.landing-page {
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Navigation - Keep existing nav styles */
.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 44px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-header);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-link {
  text-decoration: none;
  color: var(--text);
}

.logo-link:hover {
  text-decoration: none;
}

.landing-nav .brand {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition: all .15s ease;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.landing-nav .brand:hover {
  opacity: 0.95;
  text-decoration: none;
}

.landing-nav .brand__icon {
  height: 18px;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.landing-nav .brand__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-nav .brand__text {
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-ligatures: none;
  color: var(--text);
}

.landing-nav .brand__separator {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 300;
  margin: 0 -2px;
}

.landing-nav .brand__tagline {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  font-family: 'Proxima Nova', system-ui, sans-serif;
  white-space: nowrap;
  letter-spacing: 0.01em;
  opacity: 0.45;
}

.landing-nav .logo-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  transition: all .15s ease;
}

.landing-nav .logo-wrapper:hover {
  opacity: 0.9;
}

.landing-nav .logo-icon {
  flex-shrink: 0;
  filter:
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}

.landing-nav .logo-text {
  font-size: 13px;
  font-weight: 400;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.landing-nav .logo-tm {
  font-size: 0.3em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 2px;
  opacity: 0.7;
  font-family: var(--mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255, 255, 255, 0.75);
  background: none;
  display: inline-block;
  transform: translateY(-20%);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.65);
  font-size: 0.45em;
  letter-spacing: 0.15em;
}

.landing-nav .logo-reg {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 8px;
  vertical-align: super;
  margin-left: 4px;
  opacity: 0.6;
  font-weight: 400;
  color: #F5E6C8;
}

.landing-nav .nav-actions {
  display: flex;
  gap: 4px !important;
  align-items: center;
}

.landing-nav .nav-actions .nav-btn {
  padding: 6px 10px;
  font-size: 13px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  margin: 0;
}

.nav-btn {
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
}

.nav-btn:hover {
  background: var(--bg-card);
}

.nav-btn.primary {
  background: #238636;
  border-color: #238636;
  color: #fff;
}

.nav-btn.primary:hover {
  background: #2ea043;
}

/* User Menu */
.user-menu-container {
  position: relative;
}

.user-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}

.user-button:hover {
  background: var(--bg-card);
}

.user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.user-placeholder {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-name-with-chevron {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-chevron {
  color: var(--muted);
  transition: transform 0.2s;
}

.dropdown-chevron.open {
  transform: rotate(180deg);
}

.user-menu {
  position: fixed;
  top: 44px;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0 0 0 4px;
  min-width: 240px;
}

.user-menu-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.user-menu-name {
  font-size: 13px;
  font-weight: 600;
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
}

.user-menu-email {
  font-size: 12px;
  color: var(--muted);
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
}

.user-menu-item {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-menu-item:hover {
  background: var(--bg-card);
}

.user-menu-item.danger {
  color: #f85149;
}

/* Main Content */
.landing-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
}

/* Hero */
/* ── Hero ── */
.hero {
  margin-bottom: 20px;
  text-align: center;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 24px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow / status badge */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 24px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #238636;
  box-shadow: 0 0 6px rgba(35, 134, 54, 0.6);
  animation: hero-pulse 2.5s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(35, 134, 54, 0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 2px rgba(35, 134, 54, 0.3); }
}

.hero h1 {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 56px;
  font-weight: 700;
  margin: 0 0 24px 0;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--text);
}

.hero h1 br {
  display: block;
}

.hero-subtitle {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 32px 0;
  line-height: 1.6;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}

.btn-large {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}

.btn-large:hover {
  background: var(--bg-card);
  transform: translateY(-1px);
}

.btn-large.primary {
  background: #238636;
  border-color: rgba(35, 134, 54, 0.5);
  color: #fff;
  box-shadow: 0 0 20px rgba(35, 134, 54, 0.15);
}

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

/* Stats row */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.hero-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

/* Browser Mockup */
.browser-mockup {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

.browser-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.browser-dots {
  display: flex;
  gap: 5px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

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

.browser-address-bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.browser-content {
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
}

.browser-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}

.browser-content img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sections */
.targets-section,
.how-it-works,
.pricing-note {
  margin-bottom: 80px;
}

.section-header {
  margin-bottom: 32px;
}

.section-header h2 {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-header p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* Target Cards */
.targets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.target-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}

.target-card:hover {
  border-color: var(--accent);
}

.target-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
}

.target-status {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.target-status.available {
  color: #3fb950;
}

.target-status.coming-soon {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 2px 8px;
}

.target-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  padding: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.target-header h3 img {
  opacity: 0.9;
}

.target-card > p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  padding: 0 28px 24px 28px;
  border-bottom: 1px solid var(--border);
}

.target-features {
  margin: 0;
  padding: 28px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.target-features li {
  font-size: 13px;
  color: var(--muted);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}

.target-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #3fb950;
  font-weight: 600;
}

/* How It Works */
.steps-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.step {
  border-left: 2px solid var(--border);
  padding-left: 32px;
  position: relative;
}

.step-number {
  position: absolute;
  left: -14px;
  width: 24px;
  height: 24px;
  background: var(--bg-page);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.step h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text);
}

.step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Pricing */
.pricing-card {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}

.pricing-card h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pricing-card > p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px 0;
}

.pricing-detail {
  margin-bottom: 24px;
}

.credit-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.pricing-offers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-subtext {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.pricing-subtext strong {
  color: var(--text);
}

.limited-time-offer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.limited-time-badge {
  color: #E97450;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.offer-text strong {
  color: var(--text);
}

.bitcoin-payment {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.bitcoin-payment strong {
  color: var(--text);
}

.bitcoin-icon {
  width: 16px;
  height: 16px;
}

/* CTA */
.cta {
  padding: 60px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.cta h2 {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.cta h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 32px 0 12px 0;
  color: var(--text);
}

.cta > p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-providers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  margin-bottom: 24px;
}

.btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
}

.btn-provider:hover {
  background: var(--bg-card);
}


.cta-subtext {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.cta-login-link {
  color: #58a6ff;
  text-decoration: underline;
}

.cta-login-link:hover {
  color: #58a6ff;
}

.cta .pricing-detail {
  text-align: center;
  margin: 24px 0;
}

.cta .credit-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cta .limited-time-offer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cta .bitcoin-payment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

/* Footer */
.landing-footer {
  padding: 40px 24px;
  text-align: center;
  border-top: 1px solid var(--border);
}

.landing-footer p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ── Multi-column site footer ── */
.site-footer {
  border-top: 1px solid #2e2e2e;
  background: #111111;
  color: #aaaaaa;
  font-size: 13px;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
  }
  .site-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 32px;
  }
  .site-footer-brand {
    grid-column: auto;
  }
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #e4e4e4;
  width: fit-content;
}

.site-footer-logo-link:hover {
  opacity: 0.85;
}

.site-footer-logo {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: contain;
}

.site-footer-brand-name {
  font-size: 15px;
  font-weight: 600;
  color: #e4e4e4;
  font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: -0.01em;
}

.site-footer-tagline {
  font-size: 13px;
  color: #888888;
  line-height: 1.6;
  max-width: 300px;
  margin: 0;
}

.site-footer-copy {
  font-size: 12px;
  color: #555555;
  margin: 4px 0 0;
}

.site-footer-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666666;
  margin: 0 0 12px;
}

.site-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer-links a {
  color: #999999;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  transition: color 0.12s;
}

.site-footer-links a:hover {
  color: #e4e4e4;
}

.site-footer-bottom {
  border-top: 1px solid #1e1e1e;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #555555;
}

@media (max-width: 540px) {
  .site-footer-bottom {
    padding: 14px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.site-footer-bottom-links {
  display: flex;
  gap: 16px;
}

.site-footer-bottom-links a {
  color: #555555;
  text-decoration: none;
  transition: color 0.12s;
}

.site-footer-bottom-links a:hover {
  color: #aaaaaa;
}


/* Responsive */
@media (max-width: 768px) {
  .landing-main {
    padding: 48px 20px;
  }

  .hero-content {
    padding: 16px 20px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero h1 br {
    display: none;
  }

  .hero-subtitle {
    font-size: 13px;
  }

  .hero-stats {
    gap: 16px;
    margin-bottom: 32px;
  }

  .hero-stat-value {
    font-size: 16px;
  }

  .hero-stat-label {
    font-size: 11px;
  }

  .hero-stat-divider {
    height: 20px;
  }

  .section-header h2 {
    font-size: 24px;
  }

  .targets-grid {
    grid-template-columns: 1fr;
  }

  .target-card h3 {
    font-size: 13px;
  }

  .step {
    padding-left: 24px;
  }

  .user-name {
    display: none;
  }

  .cta-providers {
    flex-direction: column;
    align-items: center;
  }

  .browser-mockup {
    margin: 32px auto 0;
  }

  .browser-header {
    padding: 6px 10px;
  }

  .browser-address-bar {
    font-size: 13px;
    padding: 2px 8px;
  }

  .dot {
    width: 6px;
    height: 6px;
  }
}
.oauth-consent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.oauth-consent-card {
  background-color: var(--bg-elevated);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-floating-small, 0 4px 6px rgba(0, 0, 0, 0.3));
  width: 100%;
  max-width: 500px;
}

.oauth-consent-card h1 {
  margin-top: 0;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.subtitle {
  color: var(--muted);
  margin-bottom: 2rem;
}

.auth-details {
  background-color: var(--bg-alt);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 2rem;
  border: 1px solid var(--line);
}

.detail-row {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}

.detail-row strong {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.uri {
  word-break: break-all;
  font-family: monospace;
  background: var(--bg);
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid var(--line);
}

.scopes-section {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.scopes-section ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  color: var(--text);
}

.actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.actions button {
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.actions button:hover {
  opacity: 0.9;
}

.btn-approve {
  background-color: var(--fgColor-link);
  color: var(--fgColor-onEmphasis);
}

.btn-deny {
  background-color: var(--fgColor-danger);
  color: var(--fgColor-onEmphasis);
}

.error {
  color: var(--fgColor-danger);
}
/* App.css - Design tokens, app shell, and shared component primitives.
   Reset + body + #root base live in index.css.
   Forms, tables, buttons, page-container, card/card-header/card-body live in Base.css. */

#root {
  font-size: 13px;
}

.App {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
}

:root {
    /* Map App tokens to global design tokens (Primer-style) for consistent greys */
    --bg-page: var(--bg);
    --bg-card: var(--color-bg-secondary);
    --bg-card-alt: var(--bg-alt);
    --bg-header: var(--color-bg-inverse);
    --bg-input: var(--bg-elevated);

    --border: var(--line);
    --border-hover: var(--borderColor-emphasis);

    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --text-white: var(--text);

    /* Accent and semantic tokens */
    --accent: var(--fgColor-accent);
    --accent-hover: var(--fgColor-accent);
    --success: var(--fgColor-success);
    --warning: var(--fgColor-attention);
    --error: var(--fgColor-danger);

    /* Typography - branded but readable */
    --font-sans: "Inter", "Roboto", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Keep UI readable; reserve pixel fonts for logo/accents only */
    --font-display: "Sora", "Proxima Nova", "proxima-nova", "Inter", "Roboto", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Logo fonts: friendly rounded sans (Nunito) */
    --font-logo: "Nunito", "Sora", "Proxima Nova", system-ui, sans-serif;
    --font-logo-alt: "Nunito", "Sora", "Proxima Nova", system-ui, sans-serif;

    --logo-fg: #FAF8F3;
    --logo-accent-fg: #B8956A;
    --font-mono: "JetBrains Mono", "Fira Code", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-size-base: 13px;
    --font-size-sm: 12px;
    /* Font size hierarchy: 28px (page headers), 14px (section headings), 13px (base), 12px (secondary) */
    --font-size-xs: 12px;
    --font-size-lg: 14px;
    --font-size-heading: 14px;
    --font-size-page-header: 28px;
    --line-height: 1.5;

    /* Spacing - compact */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;

    /* Layout */
    --toolbar-h: 52px;
    --radius: 2px;
} 

html, body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
}

/* App container */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-page);
}

/* Consistent paragraph spacing inside page containers */
.page-container p {
    margin: 0 0 12px;
    padding-bottom: 12px;
}

/* Page header - compact, no border */
.page-header {
    margin-bottom: var(--space-md);
}

.page-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-white);
    margin: 0 0 2px 0;
}

.page-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Content section - card with header */
.content-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
}

.content-section-header {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-section-header h2,
.content-section-header h3 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-white);
}

.content-section-body {
    padding: var(--space-md);
}

/* Utility */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 600; }

/* ========================================
   Standardized Tag Styles - Used Everywhere
   ======================================== */

/* Base tag style - consistent across all uses */
.tag,
.settings-type-badge {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  padding: 1px 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #58a6ff;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

/* Tag color variants */
.tag.tag-green,
.green-tag .tag {
  color: #3fb950;
  background: transparent;
}

.tag.tag-orange,
.warning-tag {
  color: #d29922;
  background: transparent;
}

.blue-tag .tag {
  color: #58a6ff;
  background: transparent;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: min(90vw, 400px);
}

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

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-white);
}

.modal-body {
    padding: var(--space-md);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-right: 0;
}
/*
 * Design Tokens — Single Source of Truth
 * Import this file once at the app root. All components use these variables.
 * Naming: semantic (--color-*), not implementation (--button-bg-hover)
 */

:root {
  /* ────────────────────────────────────────────────────────────────── */
  /* COLORS — Semantic naming                                           */
  /* ────────────────────────────────────────────────────────────────── */

  /* Surface colors — DARK THEME (matches index.css palette) */
  --color-bg: #121212;              /* Page canvas / default background */
  --color-bg-secondary: #1a1a1a;   /* Cards, panels, elevated surfaces */
  --color-bg-tertiary: #242424;     /* Slightly more elevated surfaces */
  --color-bg-inverse: #090a0a;      /* Dark header / navigation */

  /* Text colors */
  --color-text: #e4e4e4;            /* Primary text */
  --color-text-secondary: #aaaaaa;  /* Secondary text */
  --color-text-tertiary: #888888;   /* Muted / disabled text */
  --color-text-inverse: rgba(255, 255, 255, 0.85);    /* Text on dark backgrounds */
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.45);
  --color-text-inverse-tertiary: rgba(255, 255, 255, 0.28);

  /* Borders */
  --color-border: #2e2e2e;          /* Primary border */
  --color-border-secondary: #3a3a3a; /* Secondary border (stronger) */
  --color-border-inverse: rgba(255, 255, 255, 0.06); /* Borders on dark bg */

  /* Status colors */
  --color-success: #238636;         /* Success, positive actions */
  --color-error: #da3633;           /* Error, destructive actions */
  --color-warning: #d29922;         /* Warning, attention needed */
  --color-info: #58a6ff;            /* Information, neutral actions */

  /* Brand colors */
  --color-brand: #f46800;           /* Primary brand color (orange) */
  --color-brand-hover: #4f82f0;     /* Brand hover state */
  --color-brand-light: rgba(88, 166, 255, 0.1); /* Brand subtle background */

  /* Interactive states */
  --color-focus-ring: rgba(74, 74, 74, 0.5); /* Focus outline */
  --color-hover-bg: rgba(255, 255, 255, 0.05); /* Hover background on dark surfaces */
  --color-hover-bg-light: rgba(255, 255, 255, 0.03); /* Hover background on elevated surfaces */

  /* ────────────────────────────────────────────────────────────────── */
  /* TYPOGRAPHY                                                          */
  /* ────────────────────────────────────────────────────────────────── */

  --font-sans: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Sora", "Proxima Nova", "proxima-nova", var(--font-sans);
  --font-mono:
    "JetBrains Mono",
    "Fira Code",
    "IBM Plex Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ────────────────────────────────────────────────────────────────── */
  /* SPACING SCALE                                                       */
  /* ────────────────────────────────────────────────────────────────── */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ────────────────────────────────────────────────────────────────── */
  /* BORDER RADIUS                                                       */
  /* ────────────────────────────────────────────────────────────────── */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ────────────────────────────────────────────────────────────────── */
  /* DIMENSIONS                                                          */
  /* ────────────────────────────────────────────────────────────────── */

  --header-height: 48px;
  --toolbar-height: 40px;
  --footer-height: 46px;

  /* ────────────────────────────────────────────────────────────────── */
  /* Z-INDEX SCALE                                                       */
  /* ────────────────────────────────────────────────────────────────── */

  --z-base: 1;
  --z-sticky: 100;      /* Fixed headers, sticky sidebars */
  --z-dropdown: 500;    /* Dropdowns, submenus */
  --z-overlay: 1000;    /* Overlays, loading spinners */
  --z-modal: 2000;      /* Modal dialogs */
  --z-toast: 3000;      /* Toast notifications */
  --z-tooltip: 3500;    /* Tooltips */

  /* ────────────────────────────────────────────────────────────────── */
  /* ANIMATIONS & TRANSITIONS                                            */
  /* ────────────────────────────────────────────────────────────────── */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ────────────────────────────────────────────────────────────────── */
  /* SHADOWS                                                             */
  /* ────────────────────────────────────────────────────────────────── */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

  /* ────────────────────────────────────────────────────────────────── */
  /* RESPONSIVE BREAKPOINTS (not CSS variables, but documented here)    */
  /* ────────────────────────────────────────────────────────────────── */
  /* Mobile: < 640px                                                     */
  /* Tablet: 640px - 1024px                                              */
  /* Desktop: > 1024px                                                   */
}

/* ────────────────────────────────────────────────────────────────── */
/* LEGACY COMPATIBILITY ALIASES                                       */
/* Map old variable names to new design tokens for gradual migration  */
/* ────────────────────────────────────────────────────────────────── */

:root {
  /* Old NavigationMenu/Toast variables → new design tokens */
  --toolbar-h: var(--toolbar-height);
  --bg-card: var(--color-bg-secondary);
  --border: var(--color-border);
  --radius: var(--radius-sm);

  /* Old generic names → new design tokens */
  --text: var(--color-text);
  --text-white: var(--color-text-inverse);
  --text-secondary: var(--color-text-secondary);
  --muted: var(--color-text-tertiary);
  --bg: var(--color-bg);
  --bg-page: var(--color-bg);
  --bg-elevated: var(--color-bg-secondary);
  --bg-header: var(--color-bg-inverse);
  --line: var(--color-border);
  --dt-line: var(--color-border);
  --accent: var(--color-info);
  --focus-ring: var(--color-focus-ring);
  --bg-hover: var(--color-hover-bg-light);

  /* Legacy app shell variables → new design tokens */
  --b-bg: var(--color-bg);
  --b-panel: var(--color-bg-secondary);
  --b-hdr: var(--color-bg-inverse);
  --b-hdr-hover: var(--color-hover-bg);
  --b-border: var(--color-border);
  --b-border-med: var(--color-border-secondary);
  --b-hdr-border: var(--color-border-inverse);
  --b-text: var(--color-text);
  --b-text-2: var(--color-text-secondary);
  --b-text-3: var(--color-text-tertiary);
  --b-text-hdr: var(--color-text-inverse);
  --b-text-hdr-2: var(--color-text-inverse-secondary);
  --b-text-hdr-3: var(--color-text-inverse-tertiary);
  --b-orange: var(--color-brand);
  --b-accent: var(--color-info);
  --b-accent-hov: var(--color-brand-hover);
  --b-accent-lt: var(--color-brand-light);
  --b-green: var(--color-success);
  --b-yellow: var(--color-warning);
  --b-red: var(--color-error);
  --b-purple: #7e4fa2;
  --b-font: var(--font-sans);
  --b-mono: var(--font-mono);
  --b-hdr-h: var(--header-height);
  --b-toolbar-h: var(--toolbar-height);
  --b-radius: var(--radius-sm);
  --b-radius-md: var(--radius-md);
  --b-radius-lg: var(--radius-lg);

  /* Old semantic color names → new design tokens */
  --success: var(--color-success);
  --error: var(--color-error);
  --warning: var(--color-warning);
  --font-size: var(--font-size-base);
  --font-logo: var(--font-brand);
}

/* ────────────────────────────────────────────────────────────────── */
/* ANIMATIONS — Centralized keyframes                                 */
/* ────────────────────────────────────────────────────────────────── */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes loading-dot-pulse {
  0%, 80%, 100% {
    opacity: 0.4;
    transform: translateY(0) scale(0.9);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/*
 * Utility Classes — Common inline style patterns
 * Use these classes instead of style={{ ... }} throughout the app
 */

/* ────────────────────────────────────────────────────────────────── */
/* MARGIN UTILITIES                                                    */
/* ────────────────────────────────────────────────────────────────── */

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.mt-2 { margin-top: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-sm); }
.ml-2 { margin-left: var(--space-sm); }
.mr-2 { margin-right: var(--space-sm); }

.mt-3 { margin-top: var(--space-md); }
.mb-3 { margin-bottom: var(--space-md); }
.ml-3 { margin-left: var(--space-md); }
.mr-3 { margin-right: var(--space-md); }

.mt-4 { margin-top: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-lg); }
.ml-4 { margin-left: var(--space-lg); }
.mr-4 { margin-right: var(--space-lg); }
.mt-1 { margin-top: var(--space-xs); }
.mt-5 { margin-top: 16px; }

/* ────────────────────────────────────────────────────────────────── */
/* PADDING UTILITIES                                                   */
/* ────────────────────────────────────────────────────────────────── */

.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.pt-2 { padding-top: var(--space-sm); }
.pb-2 { padding-bottom: var(--space-sm); }
.pl-2 { padding-left: var(--space-sm); }
.pr-2 { padding-right: var(--space-sm); }

.pt-3 { padding-top: var(--space-md); }
.pb-3 { padding-bottom: var(--space-md); }
.pl-3 { padding-left: var(--space-md); }
.pr-3 { padding-right: var(--space-md); }

/* ────────────────────────────────────────────────────────────────── */
/* DISPLAY UTILITIES                                                   */
/* ────────────────────────────────────────────────────────────────── */

.d-block { display: block; }
.d-flex { display: flex; }
.d-none { display: none !important; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* ────────────────────────────────────────────────────────────────── */
/* VISIBILITY & OPACITY UTILITIES                                     */
/* ────────────────────────────────────────────────────────────────── */

.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ────────────────────────────────────────────────────────────────── */
/* TEXT UTILITIES                                                      */
/* ────────────────────────────────────────────────────────────────── */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }

.text-muted { color: var(--color-text-tertiary); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary { color: var(--color-text); }
.text-disabled { color: var(--color-text-tertiary); }

.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

.font-weight-500 { font-weight: var(--font-weight-medium); }
.font-weight-600 { font-weight: var(--font-weight-semibold); }
.font-weight-700 { font-weight: var(--font-weight-bold); }

/* ────────────────────────────────────────────────────────────────── */
/* FLEX UTILITIES                                                      */
/* ────────────────────────────────────────────────────────────────── */

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

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

.gap-05 { gap: 2px; }
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-xs); }
.gap-15 { gap: 3px; }
.gap-2 { gap: var(--space-sm); }
.gap-25 { gap: 6px; }
.gap-3 { gap: var(--space-md); }
.gap-35 { gap: 10px; }
.gap-4 { gap: var(--space-lg); }
.gap-5 { gap: 16px; }

/* ────────────────────────────────────────────────────────────────── */
/* WIDTH & HEIGHT UTILITIES                                            */
/* ────────────────────────────────────────────────────────────────── */

.w-full { width: 100%; }
.h-full { height: 100%; }
.w-max-content { width: max-content; }

/* ────────────────────────────────────────────────────────────────── */
/* FLEX GROW UTILITIES                                                 */
/* ────────────────────────────────────────────────────────────────── */

.flex-1 { flex: 1; }
.flex-0 { flex: 0; }
.flex-shrink-0 { flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────────── */
/* WORD BREAK & TEXT OVERFLOW                                         */
/* ────────────────────────────────────────────────────────────────── */

.break-all { word-break: break-all; }
.break-words { overflow-wrap: break-word; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ────────────────────────────────────────────────────────────────── */
/* SIZING HELPERS                                                      */
/* ────────────────────────────────────────────────────────────────── */

.h-18 { height: 18px; }
.h-14 { height: 14px; }
.h-12 { height: 12px; }

.min-w-0 { min-width: 0; }

/* ────────────────────────────────────────────────────────────────── */
/* BORDER UTILITIES                                                    */
/* ────────────────────────────────────────────────────────────────── */

.border { border: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* ────────────────────────────────────────────────────────────────── */
/* BACKGROUND UTILITIES                                                */
/* ────────────────────────────────────────────────────────────────── */

.bg-primary { background: var(--color-bg); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-elevated { background: var(--color-bg-secondary); }
.bg-tertiary { background: var(--color-bg-tertiary); }

/* ────────────────────────────────────────────────────────────────── */
/* OVERFLOW UTILITIES                                                  */
/* ────────────────────────────────────────────────────────────────── */

.overflow-hidden { overflow: hidden; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ────────────────────────────────────────────────────────────────── */
/* TEXT TRANSFORM UTILITIES                                            */
/* ────────────────────────────────────────────────────────────────── */

.text-transform-uppercase { text-transform: uppercase; }
.text-transform-capitalize { text-transform: capitalize; }

/* ────────────────────────────────────────────────────────────────── */
/* LETTER SPACING UTILITIES                                            */
/* ────────────────────────────────────────────────────────────────── */

.letter-spacing-wide { letter-spacing: 0.08em; }

/* ────────────────────────────────────────────────────────────────── */
/* WHITE SPACE UTILITIES                                                */
/* ────────────────────────────────────────────────────────────────── */

.whitespace-nowrap { white-space: nowrap; }

/* ────────────────────────────────────────────────────────────────── */
/* PADDING UTILITIES (EXTENDED)                                        */
/* ────────────────────────────────────────────────────────────────── */

.p-4 { padding: var(--space-lg); }
.px-1 { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-2 { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-3 { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-2 { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.pb-2 { padding-bottom: var(--space-sm); }

/* ────────────────────────────────────────────────────────────────── */
/* MARGIN UTILITIES (EXTENDED)                                         */
/* ────────────────────────────────────────────────────────────────── */

.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }

/* ────────────────────────────────────────────────────────────────── */
/* HEIGHT UTILITIES (EXTENDED)                                         */
/* ────────────────────────────────────────────────────────────────── */

.h-8 { height: 8px; }
.h-32 { height: 32px; }
.h-28 { height: 28px; }

/* ────────────────────────────────────────────────────────────────── */
/* INLINE DISPLAY UTILITIES                                            */
/* ────────────────────────────────────────────────────────────────── */

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

/* ────────────────────────────────────────────────────────────────── */
/* FONT WEIGHT UTILITIES (EXTENDED)                                    */
/* ────────────────────────────────────────────────────────────────── */

.font-weight-400 { font-weight: 400; }

/* (Flex utilities already covered above: .flex-wrap, .items-end) */

/* ────────────────────────────────────────────────────────────────── */
/* GRID UTILITIES                                                      */
/* ────────────────────────────────────────────────────────────────── */

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: 1fr 1fr; }
.grid-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.col-span-full { grid-column: 1 / -1; }

/* ────────────────────────────────────────────────────────────────── */
/* TEXT DECORATION UTILITIES                                           */
/* ────────────────────────────────────────────────────────────────── */

.underline { text-decoration: underline; }

/* ────────────────────────────────────────────────────────────────── */
/* SEMANTIC COLOR UTILITIES                                            */
/* ────────────────────────────────────────────────────────────────── */

.text-orange { color: var(--color-brand); }
.text-blue { color: var(--color-info); }

/* ────────────────────────────────────────────────────────────────── */
/* TEXT ALIGN UTILITIES                                                */
/* ────────────────────────────────────────────────────────────────── */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ────────────────────────────────────────────────────────────────── */
/* VERTICAL ALIGN UTILITIES                                            */
/* ────────────────────────────────────────────────────────────────── */

.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

/* ────────────────────────────────────────────────────────────────── */
/* TABLE CELL UTILITIES                                                */
/* ────────────────────────────────────────────────────────────────── */

.td-cell { padding: 10px 16px 10px 0; vertical-align: top; }
.td-cell-sm { padding: 14px 16px 14px 0; vertical-align: top; }
.td-cell-last { padding: 10px 0; vertical-align: top; }
.td-cell-last-sm { padding: 14px 0; vertical-align: top; }

.th-cell { text-align: left; padding-bottom: 10px; }
.th-cell-sm { text-align: left; padding-bottom: 12px; }

/* ────────────────────────────────────────────────────────────────── */
/* TRANSFORM UTILITIES                                                 */
/* ────────────────────────────────────────────────────────────────── */

.rotate-180 { transform: rotate(180deg); }

/* ────────────────────────────────────────────────────────────────── */
/* TRANSITION UTILITIES                                                */
/* ────────────────────────────────────────────────────────────────── */

.transition-transform { transition: transform 0.15s; }

/* ────────────────────────────────────────────────────────────────── */
/* CURSOR UTILITIES                                                    */
/* ────────────────────────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }

/* ────────────────────────────────────────────────────────────────── */
/* COLLAPSE BORDER UTILITIES                                           */
/* ────────────────────────────────────────────────────────────────── */

.border-collapse { border-collapse: collapse; }

/* ────────────────────────────────────────────────────────────────── */
/* BORDER SOLID UTILITIES                                              */
/* ────────────────────────────────────────────────────────────────── */

.border-solid { border-style: solid; }

/* ────────────────────────────────────────────────────────────────── */
/* MAX WIDTH UTILITIES                                                 */
/* ────────────────────────────────────────────────────────────────── */

.max-w-380 { max-width: 380px; }

/* ────────────────────────────────────────────────────────────────── */
/* MIN WIDTH UTILITIES                                                 */
/* ────────────────────────────────────────────────────────────────── */

.min-w-130 { min-width: 130px; }
.min-w-140 { min-width: 140px; }
.min-w-160 { min-width: 160px; }
.min-w-200 { min-width: 200px; }
.min-w-260 { min-width: 260px; }

/* ────────────────────────────────────────────────────────────────── */
/* PADDING UTILITIES (TABLE EXPANSIONS)                               */
/* ────────────────────────────────────────────────────────────────── */

.px-4 { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.py-expansion { padding: 16px 0 24px 0; }

/* ────────────────────────────────────────────────────────────────── */
/* BORDER UTILITIES (WITH CSS VARIABLES)                               */
/* ────────────────────────────────────────────────────────────────── */

.border-top-default { border-top: 1px solid var(--borderColor-default); }

/* ────────────────────────────────────────────────────────────────── */
/* BACKGROUND UTILITIES (CANVAS)                                       */
/* ────────────────────────────────────────────────────────────────── */

.bg-canvas-subtle { background: var(--canvas-subtle); }
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: .25rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .isolate {
    isolation: isolate;
  }

  .z-20 {
    z-index: 20;
  }

  .z-\[1000\] {
    z-index: 1000;
  }

  .\!container {
    width: 100% !important;
  }

  @media (min-width: 40rem) {
    .\!container {
      max-width: 40rem !important;
    }
  }

  @media (min-width: 48rem) {
    .\!container {
      max-width: 48rem !important;
    }
  }

  @media (min-width: 64rem) {
    .\!container {
      max-width: 64rem !important;
    }
  }

  @media (min-width: 80rem) {
    .\!container {
      max-width: 80rem !important;
    }
  }

  @media (min-width: 96rem) {
    .\!container {
      max-width: 96rem !important;
    }
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

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

  .table {
    display: table;
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-\[calc\(100vh-45px\)\] {
    height: calc(100vh - 45px);
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[320px\] {
    max-height: 320px;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-\[min\(280px\,70vw\)\] {
    width: min(280px, 70vw);
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .max-w-380 {
    max-width: calc(var(--spacing) * 380);
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[400px\] {
    max-width: 400px;
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-130 {
    min-width: calc(var(--spacing) * 130);
  }

  .min-w-140 {
    min-width: calc(var(--spacing) * 140);
  }

  .min-w-160 {
    min-width: calc(var(--spacing) * 160);
  }

  .min-w-200 {
    min-width: calc(var(--spacing) * 200);
  }

  .min-w-260 {
    min-width: calc(var(--spacing) * 260);
  }

  .min-w-\[70px\] {
    min-width: 70px;
  }

  .min-w-\[80px\] {
    min-width: 80px;
  }

  .min-w-full {
    min-width: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .appearance-none {
    appearance: none;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-35 {
    gap: calc(var(--spacing) * 35);
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-none {
    border-radius: 0;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-\[--btn-border\] {
    border-color: --btn-border;
  }

  .border-\[--error\]\/25 {
    border-color: color-mix(in oklab, --error 25%, transparent);
  }

  .border-\[--line\] {
    border-color: --line;
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-\[\#121212\] {
    background-color: #121212;
  }

  .bg-\[\#f97316\] {
    background-color: #f97316;
  }

  .bg-\[--accent\] {
    background-color: --accent;
  }

  .bg-\[--bg-alt\] {
    background-color: --bg-alt;
  }

  .bg-\[--bg-elevated\] {
    background-color: --bg-elevated;
  }

  .bg-\[--bg\] {
    background-color: --bg;
  }

  .bg-\[--btn-bg\] {
    background-color: --btn-bg;
  }

  .bg-\[--error\]\/10 {
    background-color: color-mix(in oklab, --error 10%, transparent);
  }

  .bg-\[--error\]\/20 {
    background-color: color-mix(in oklab, --error 20%, transparent);
  }

  .bg-\[--success\]\/20 {
    background-color: color-mix(in oklab, --success 20%, transparent);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-\[url\(\'data\:image\/svg\+xml\;charset\=UTF-8\,\%3Csvg\%20width\%3D\%2210\%22\%20height\%3D\%226\%22\%20viewBox\%3D\%220\%200\%2010\%206\%22\%20xmlns\%3D\%22http\%3A\%2F\%2Fwww\.w3\.org\%2F2000\%2Fsvg\%22\%3E\%3Cpath\%20d\%3D\%22M1\%201l4\%204\%204-4\%22\%20stroke\%3D\%22\%23b0b0b0\%22\%20stroke-width\%3D\%221\.5\%22\%20fill\%3D\%22none\%22\%20stroke-linecap\%3D\%22round\%22\%20stroke-linejoin\%3D\%22round\%22\%2F\%3E\%3C\%2Fsvg\%3E\'\)\] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20stroke%3D%22%23b0b0b0%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  }

  .bg-\[length\:8px\] {
    background-size: 8px;
  }

  .bg-\[right_6px_center\] {
    background-position: right 6px center;
  }

  .bg-no-repeat {
    background-repeat: no-repeat;
  }

  .object-contain {
    object-fit: contain;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .font-\[var\(--mono\)\] {
    --tw-font-weight: var(--mono);
    font-weight: var(--mono);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .break-all {
    word-break: break-all;
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[\#3fb950\] {
    color: #3fb950;
  }

  .text-\[\#d1d1d1\] {
    color: #d1d1d1;
  }

  .text-\[\#f28b82\] {
    color: #f28b82;
  }

  .text-\[--error\] {
    color: --error;
  }

  .text-\[--link\] {
    color: --link;
  }

  .text-\[--muted\] {
    color: --muted;
  }

  .text-\[--text\] {
    color: --text;
  }

  .text-white {
    color: var(--color-white);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .accent-\[--gh-blue\] {
    accent-color: --gh-blue;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow-\[0_20px_40px_rgba\(0\,0\,0\,0\.45\)\] {
    --tw-shadow: 0 20px 40px var(--tw-shadow-color, #00000073);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }

  .\[dev\:frontend\] {
    dev: frontend;
  }

  .block-1 {
    block-size: calc(var(--spacing) * 1);
  }

  .block-2 {
    block-size: calc(var(--spacing) * 2);
  }

  .placeholder\:text-\[--muted\]::placeholder {
    color: --muted;
  }

  .checked\:border-\[--gh-blue\]:checked {
    border-color: --gh-blue;
  }

  .checked\:bg-\[--gh-blue\]:checked {
    background-color: --gh-blue;
  }

  @media (hover: hover) {
    .hover\:border-\[--accent\]:hover {
      border-color: --accent;
    }

    .hover\:border-\[--error\]\/40:hover {
      border-color: color-mix(in oklab, --error 40%, transparent);
    }

    .hover\:bg-\[--bg-alt\]:hover {
      background-color: --bg-alt;
    }

    .hover\:bg-\[--bg-elevated\]:hover {
      background-color: --bg-elevated;
    }

    .hover\:bg-\[--btn-hover\]:hover {
      background-color: --btn-hover;
    }

    .hover\:bg-\[--error\]\/20:hover {
      background-color: color-mix(in oklab, --error 20%, transparent);
    }

    .hover\:text-\[--link-hover\]:hover {
      color: --link-hover;
    }

    .hover\:text-\[--text\]:hover {
      color: --text;
    }

    .hover\:text-\[var\(--text\)\]:hover {
      color: var(--text);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }

  .focus\:border-\[--line\]:focus {
    border-color: --line;
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[--focus-ring\]:focus {
    --tw-ring-color: --focus-ring;
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[--focus-ring\]:focus-visible {
    --tw-ring-color: --focus-ring;
  }

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:bg-\[--btn-active\]:active {
    background-color: --btn-active;
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-35:disabled {
    opacity: .35;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }
}

@font-face {
  font-family: Proxima Nova;
  src: local(Proxima Nova Light), local(ProximaNova-Light), url("/assets/ProximaNova-Light-ClBYXM41.woff2") format("woff2"), url("/assets/ProximaNova-Light-BM8G2Wmk.woff") format("woff"), url("/assets/ProximaNova-Light-BRA9gDpT.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Proxima Nova;
  src: local(Proxima Nova), local(ProximaNova), url("/assets/ProximaNova-DdwnJ63U.woff2") format("woff2"), url("/assets/ProximaNova-DQH4TMMl.woff") format("woff"), url("/assets/ProximaNova-D81IydaU.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Roboto;
  src: local(Roboto Regular), local(Roboto), url("/assets/Roboto-Regular-CN_pkOMA.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Roboto;
  src: local(Roboto SemiBold), local(Roboto Medium), url("/assets/Roboto-SemiBold-EVIM0_1H.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Roboto;
  src: local(Roboto Bold), local(Roboto), url("/assets/Roboto-Bold-yTHeQuef.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Inter;
  src: local(Roboto Regular), local(Roboto), url("/assets/Roboto-Regular-CN_pkOMA.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Inter;
  src: local(Roboto SemiBold), local(Roboto Medium), url("/assets/Roboto-SemiBold-EVIM0_1H.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Inter;
  src: local(Roboto Bold), local(Roboto), url("/assets/Roboto-Bold-yTHeQuef.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Sora;
  src: local(Proxima Nova), local(ProximaNova), url("/assets/ProximaNova-DdwnJ63U.woff2") format("woff2"), url("/assets/ProximaNova-DQH4TMMl.woff") format("woff"), url("/assets/ProximaNova-D81IydaU.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Nunito;
  src: local(Proxima Nova), local(ProximaNova), url("/assets/ProximaNova-DdwnJ63U.woff2") format("woff2"), url("/assets/ProximaNova-DQH4TMMl.woff") format("woff"), url("/assets/ProximaNova-D81IydaU.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: proxima-nova;
  src: local(Proxima Nova), local(ProximaNova), url("/assets/ProximaNova-DdwnJ63U.woff2") format("woff2"), url("/assets/ProximaNova-DQH4TMMl.woff") format("woff"), url("/assets/ProximaNova-D81IydaU.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: JetBrains Mono;
  src: local(JetBrains Mono), local(IBM Plex Mono), local(SF Mono), local(Menlo), local(Consolas);
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: IBM Plex Mono;
  src: local(IBM Plex Mono), local(JetBrains Mono), local(SF Mono), local(Menlo), local(Consolas);
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Fira Code;
  src: local(Fira Code), local(JetBrains Mono), local(IBM Plex Mono), local(SF Mono), local(Menlo), local(Consolas);
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face {
  font-family: Fira Code Retina;
  src: local(Fira Code Retina), local(Fira Code), local(JetBrains Mono), local(IBM Plex Mono), local(SF Mono), local(Menlo), local(Consolas);
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

:root {
  color: var(--text);
  background-color: var(--bg);
  --page-padding-desktop: 16px;
  --page-padding-tablet: 12px;
  --page-padding-mobile: 10px;
  --page-padding-mobile-sm: 8px;
  --fgColor-accent: #7d8590;
  --fgColor-attention: #d29922;
  --fgColor-black: #010409;
  --fgColor-closed: #f85149;
  --fgColor-danger: #f85149;
  --fgColor-default: #e6edf3;
  --fgColor-disabled: #484f58;
  --fgColor-done: #a371f7;
  --fgColor-draft: #8b949e;
  --fgColor-link: #7d8590;
  --fgColor-muted: #7d8590;
  --fgColor-neutral: #7d8590;
  --fgColor-onEmphasis: #fff;
  --fgColor-onInverse: #0d1117;
  --fgColor-open: #3fb950;
  --fgColor-severe: #db6d28;
  --fgColor-sponsors: #db61a2;
  --fgColor-success: #3fb950;
  --fgColor-upsell: #a371f7;
  --fgColor-white: #fff;
  --bgColor-accent-emphasis: #484f58;
  --bgColor-accent-muted: #6e768126;
  --bgColor-attention-emphasis: #9e6a03;
  --bgColor-attention-muted: #bb800926;
  --bgColor-black: #010409;
  --bgColor-closed-emphasis: #da3633;
  --bgColor-closed-muted: #f8514926;
  --bgColor-danger-emphasis: #da3633;
  --bgColor-danger-muted: #f8514926;
  --bgColor-default: #0d1117;
  --bgColor-disabled: #21262d;
  --bgColor-done-emphasis: #8957e5;
  --bgColor-done-muted: #a371f726;
  --bgColor-draft-emphasis: #6e7681;
  --bgColor-draft-muted: #6e768126;
  --bgColor-emphasis: #474747;
  --bgColor-inset: #010409;
  --bgColor-inverse: #0d1117;
  --bgColor-muted: #474747;
  --bgColor-neutral-emphasis: #6e7681;
  --bgColor-neutral-muted: #6e768166;
  --bgColor-open-emphasis: #238636;
  --bgColor-open-muted: #2ea04326;
  --bgColor-severe-emphasis: #bd561d;
  --bgColor-severe-muted: #db6d2826;
  --bgColor-sponsors-emphasis: #bf4b8a;
  --bgColor-sponsors-muted: #db61a226;
  --bgColor-success-emphasis: #238636;
  --bgColor-success-muted: #2ea04326;
  --bgColor-transparent: #0000;
  --bgColor-upsell-emphasis: #8957e5;
  --bgColor-upsell-muted: #a371f726;
  --bgColor-white: #fff;
  --borderColor-accent-emphasis: #484f58;
  --borderColor-accent-muted: #6e768166;
  --borderColor-attention-emphasis: #9e6a03;
  --borderColor-attention-muted: #bb800966;
  --borderColor-closed-emphasis: #da3633;
  --borderColor-closed-muted: #f8514966;
  --borderColor-danger-emphasis: #da3633;
  --borderColor-danger-muted: #f8514966;
  --borderColor-default: #30363d;
  --borderColor-disabled: #6e768166;
  --borderColor-done-emphasis: #8957e5;
  --borderColor-done-muted: #a371f766;
  --borderColor-draft-emphasis: #6e7681;
  --borderColor-draft-muted: #6e768166;
  --borderColor-emphasis: #484f58;
  --borderColor-muted: #21262d;
  --borderColor-neutral-emphasis: #6e7681;
  --borderColor-neutral-muted: #6e768166;
  --borderColor-open-emphasis: #238636;
  --borderColor-open-muted: #2ea04366;
  --borderColor-severe-emphasis: #bd561d;
  --borderColor-severe-muted: #db6d2866;
  --borderColor-sponsors-emphasis: #bf4b8a;
  --borderColor-sponsors-muted: #db61a266;
  --borderColor-success-emphasis: #238636;
  --borderColor-success-muted: #2ea04366;
  --borderColor-translucent: #f0f6fc1a;
  --borderColor-transparent: #0000;
  --borderColor-upsell-emphasis: #8957e5;
  --borderColor-upsell-muted: #a371f766;
  --focus-outlineColor: #6e7681;
  --bg: #121212;
  --bg-alt: #1e1e1e;
  --bg-elevated: #242424;
  --bg-card: #1a1a1a;
  --bg-header: #0a0a0a;
  --line: #2e2e2e;
  --text: #e4e4e4;
  --muted: #888;
  --accent: #4a4a4a;
  --radius-sm: 2px;
  --radius-md: 2px;
  --row-h: 24px;
  --gh-folder: #9a9a9a;
  --gh-file: #9a9a9a;
  --gh-blue: #58a6ff;
  --logo-accent: #252525;
  --success: #238636;
  --warning: #d29922;
  --error: #da3633;
  --token-gold: #d29922;
  --link: #58a6ff;
  --link-hover: #79c0ff;
  --focus-ring: #4a4a4a80;
  --focus-glow: 0 0 0 3px #4a4a4a4d;
  --btn-height: 20px;
  --btn-padding: 2px 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --btn-bg: #252525;
  --btn-hover: #2e2e2e;
  --btn-active: #383838;
  --btn-border: #3a3a3a;
  --btn-shadow: 0 0 transparent;
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, button, input, textarea, select, option, #root {
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

html, body {
  cursor: default;
}

body {
  background: var(--bg);
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  margin: 0;
  display: flex;
  overflow-x: hidden;
}

#root {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: #58a6ff;
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: #79c0ff;
  cursor: pointer;
  text-decoration: underline;
}

button {
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  padding: 0;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
}

button:focus, button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #3b82f666;
}

@media (max-width: 768px) {
  :root {
    --page-padding-desktop: 12px;
  }
}

@media (max-width: 480px) {
  :root {
    --page-padding-desktop: 8px;
  }

  body {
    min-width: 100%;
  }
}

* {
  max-width: 100%;
}

img, video, iframe, embed {
  max-width: 100%;
  height: auto;
}

@keyframes datagrid-row-fadein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

@keyframes datagrid-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

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

@keyframes datagrid-container-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
.landing-page-active,
.landing-page-active body,
.landing-page-active #root {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

.landing-page-active body {
  margin: 0;
  overflow-x: hidden;
}

.landing-shell {
  width: 100%;
  min-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: #111111;
  color: #e4e4e4;
}

/* navbar */
.ln-nav.landing-nav {
  width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  background: transparent;
  white-space: nowrap;
}

.ln-brand.landing-brand {
  height: 100%;
  min-width: 0;
  display: inline-flex;
  flex: 0 1 auto;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  color: #ffffff;
  text-decoration: none;
}

.ln-brand.landing-brand:visited,
.ln-brand.landing-brand:hover,
.ln-brand.landing-brand:focus,
.ln-brand.landing-brand:active {
  color: #ffffff;
  text-decoration: none;
}

.ln-brand.landing-brand img {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 auto;
}

.ln-brand.landing-brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
}

.ln-nav-right.landing-nav-right {
  height: 100%;
  min-width: 0;
  display: inline-flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.ln-nav-link.landing-nav-link,
.ln-nav-cta.landing-nav-cta {
  height: 30px;
  min-width: 72px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.ln-nav-link.landing-nav-link {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}

.ln-nav-link.landing-nav-link:visited,
.ln-nav-link.landing-nav-link:hover,
.ln-nav-link.landing-nav-link:focus,
.ln-nav-link.landing-nav-link:active {
  color: #ffffff;
  text-decoration: none;
}

.ln-nav-link.landing-nav-link:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.ln-nav-cta.landing-nav-cta {
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: #ffffff;
  color: #050505;
}

.ln-nav-cta.landing-nav-cta:visited,
.ln-nav-cta.landing-nav-cta:hover,
.ln-nav-cta.landing-nav-cta:focus,
.ln-nav-cta.landing-nav-cta:active {
  color: #050505;
  text-decoration: none;
}

.ln-nav-cta.landing-nav-cta:hover {
  border-color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.88);
}

.ln-nav-link.landing-nav-link:active,
.ln-nav-cta.landing-nav-cta:active {
  transform: translateY(1px);
}

.ln-user-wrap.landing-user-wrap {
  position: relative;
  height: 100%;
  min-width: 0;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  white-space: nowrap;
}

.ln-user-btn.landing-user-btn {
  max-width: min(320px, 52vw);
  height: 30px;
  min-width: 0;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 10px;
  border-radius: 999px;
}

.ln-avatar.landing-avatar {
  flex: 0 0 auto;
}

.ln-user-name.landing-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ln-user-menu.landing-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
}

.ln-menu-item {
  transition: color 0.1s ease, font-weight 0.1s ease;
}

.ln-menu-item:hover {
  background: transparent;
  color: #ffffff;
  font-weight: 700;
}

/* page layout */
.landing-main {
  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
}

.landing-top-spacer {
  width: 100%;
  height: 60vh;
  min-height: 60vh;
  margin: 0;
  padding: 0;
}

.landing-slideshow {
  --landing-frame-width: 100vw;

  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
}

.landing-browser-frame {
  width: var(--landing-frame-width);
  max-width: min(1400px, 100vw);
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  will-change: width;
}

.landing-browser-header {
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
  background: #101114;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.landing-browser-viewport {
  position: relative;
  overflow: hidden;
  height: clamp(220px, calc(var(--landing-frame-width) * 0.2857), 400px);
}

.landing-browser-viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(17, 17, 17, 0) 0%,
    rgba(17, 17, 17, 0.55) 42%,
    rgba(17, 17, 17, 0.9) 68%,
    #111111 82%,
    #111111 100%
  );
}

.landing-browser-traffic-lights {
  height: 100%;
  display: inline-flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
}

.landing-traffic-light {
  width: 12px;
  height: 12px;
  display: block;
  flex: 0 0 auto;
  border-radius: 999px;
}

.landing-traffic-red {
  background: #ff5f57;
}

.landing-traffic-yellow {
  background: #ffbd2e;
}

.landing-traffic-green {
  background: #28c840;
}

.landing-browser-address-bar {
  height: 26px;
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.landing-browser-url {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
}

.landing-slide-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 800;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: top center;
}

.landing-bottom-spacer {
  width: 100%;
  min-width: 100%;
  min-height: 1000px;
  margin: 0;
  padding: 0;
}

.landing-footer-wrap {
  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
}

.landing-footer-wrap > footer {
  width: 100%;
  min-width: 100%;
}

/* mobile */
@media (max-width: 767px) {
  .ln-nav.landing-nav {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    gap: 10px;
    padding: 0 12px;
  }

  .ln-brand.landing-brand {
    gap: 6px;
  }

  .ln-brand.landing-brand img {
    width: 24px;
    height: 24px;
  }

  .ln-brand.landing-brand span {
    font-size: 13px;
  }

  .ln-nav-right.landing-nav-right {
    gap: 6px;
  }

  .ln-nav-link.landing-nav-link,
  .ln-nav-cta.landing-nav-cta {
    height: 28px;
    min-width: 62px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ln-user-btn.landing-user-btn {
    max-width: 48vw;
    height: 28px;
  }

  .landing-top-spacer {
    height: 60vh;
    min-height: 60vh;
  }

  .landing-browser-header {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    gap: 10px;
    padding: 0 12px;
  }

  .landing-browser-frame {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .landing-browser-address-bar {
    height: 24px;
  }

  .landing-slide-image {
    aspect-ratio: 1400 / 800;
  }

  .landing-browser-viewport {
    height: clamp(200px, calc(var(--landing-frame-width) * 0.32), 320px);
  }
}

/* ─── hero ────────────────────────────────────────────────────────────────── */
/* adapted from posts-hero / posts-article-shell in PostsPage.css             */

.ln-hero {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 58px 0 42px;
  text-align: center;
}

/* adapted from posts-hero h1 */
.ln-hero-title {
  margin: 0 0 18px;
  font-size: clamp(30px, 5.5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: #ffffff;
}

/* adapted from posts-hero-summary */
.ln-hero-subtitle {
  margin: 0 auto 28px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

.ln-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* adapted from ln-nav-cta */
.ln-cta-primary {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: #ffffff;
  color: #050505;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.ln-cta-primary:hover,
.ln-cta-primary:focus,
.ln-cta-primary:visited {
  color: #050505;
  text-decoration: none;
}

.ln-cta-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
}

/* adapted from ln-nav-link */
.ln-cta-ghost {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.ln-cta-ghost:hover,
.ln-cta-ghost:focus,
.ln-cta-ghost:visited {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.ln-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* ─── photo stack ─────────────────────────────────────────────────────────── */

.ln-photo-stack-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
  padding: 0 24px 64px;
}

.ln-photo-info {
  --ln-photo-accent: #79c0ff;

  width: min(230px, 18vw);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.ln-photo-info-datagrid {
  --ln-photo-accent: #79c0ff;
}

.ln-photo-info-feed {
  --ln-photo-accent: #7ee787;
}

.ln-photo-info-engine {
  --ln-photo-accent: #d2a8ff;
}

.ln-photo-info.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ln-photo-info-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}

.ln-photo-info-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}

.ln-photo-info-desc span {
  color: var(--ln-photo-accent);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 12px;
  font-weight: 600;
}

.ln-photo-info-detail {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
}

.ln-photo-feature-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ln-photo-feature-list li {
  position: relative;
  padding-left: 14px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  line-height: 1.45;
}

.ln-photo-feature-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ln-photo-accent);
}

.ln-photo-stack {
  position: relative;
  width: 620px;
  height: 380px;
}

/* adapted from landing-slide-image + posts-index-hero-img */
.ln-stack-img {
  position: absolute;
  bottom: 0;
  display: block;
  height: auto;
  border-radius: 4px;
  filter: grayscale(100%) saturate(0.18) contrast(0.92) brightness(0.58);
  transform-origin: bottom center;
  text-decoration: none;
  transition:
    filter 0.38s ease,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.38s ease;
  cursor: pointer;
}

.ln-stack-img-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.ln-stack-img:hover,
.ln-stack-img:focus {
  text-decoration: none;
}

.ln-stack-img.is-active {
  transition:
    filter 0.38s ease,
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.38s ease;
}

.ln-stack-img.is-color-active {
  filter: grayscale(0%) saturate(1.65) contrast(1.12) brightness(1.08);
}

.ln-stack-img-1 {
  left: 0;
  width: 600px;
  z-index: 1;
}

.ln-stack-img-1.is-active {
  transform: rotate(var(--ln-photo-rotate, 4deg));
  box-shadow: none;
}

.ln-stack-img-2 {
  left: 108px;
  width: 460px;
  z-index: 2;
}

.ln-stack-img-2.is-active {
  transform: rotate(var(--ln-photo-rotate, -4deg));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

.ln-stack-img-3 {
  left: 166px;
  width: 385px;
  z-index: 3;
}

.ln-stack-img-3.is-active {
  transform: rotate(var(--ln-photo-rotate, 6deg));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

/* ─── features ────────────────────────────────────────────────────────────── */
/* adapted from posts-index-layout / posts-list-grid / posts-feature-card     */

.ln-features-section {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 88px;
}

/* adapted from posts-list-item-meta label style */
.ln-features-eyebrow {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 28px;
}

/* adapted from posts-list-grid */
.ln-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* adapted from posts-list-item-grid (dark variant) */
.ln-feature-card {
  padding: 20px 20px 24px;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  background: #1a1a1a;
}

/* adapted from posts-list-item-meta */
.ln-feature-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
  font-weight: 500;
}

/* adapted from posts-feature-card h2 */
.ln-feature-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

/* adapted from posts-feature-card p */
.ln-feature-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}

/* ─── mobile adjustments ──────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .ln-photo-stack-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 22px;
  }

  .ln-photo-info {
    width: min(620px, calc(100vw - 48px));
  }

  .ln-photo-info-left,
  .ln-photo-info-right {
    text-align: center;
  }

  .ln-photo-feature-list {
    width: min(420px, 100%);
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }
}

@media (max-width: 900px) and (min-width: 768px) {
  .ln-hero {
    width: min(700px, calc(100% - 48px));
    padding: 52px 0 38px;
  }

  .ln-photo-stack {
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -44px;
  }

  .ln-features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ln-hero {
    width: calc(100% - 32px);
    padding: 44px 0 34px;
  }

  .ln-hero-title {
    font-size: clamp(28px, 8vw, 34px);
  }

  .ln-hero-subtitle {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.6;
  }

  .ln-hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .ln-cta-primary,
  .ln-cta-ghost {
    width: 100%;
  }

  .ln-photo-stack-section {
    display: block;
    padding: 0 16px 48px;
    overflow: hidden;
  }

  .ln-photo-info {
    display: none;
  }

  .ln-photo-stack {
    width: 100%;
    max-width: 360px;
    height: 220px;
    margin: 0 auto;
  }

  .ln-stack-img-1 {
    width: 340px;
  }

  .ln-stack-img-2 {
    left: 62px;
    width: 244px;
  }

  .ln-stack-img-3 {
    left: 186px;
    width: 114px;
  }

  .ln-features-section {
    width: calc(100% - 32px);
    padding: 0 0 64px;
  }

  .ln-features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .ln-photo-stack {
    max-width: 320px;
    height: 200px;
  }

  .ln-stack-img-1 {
    width: 305px;
  }

  .ln-stack-img-2 {
    left: 56px;
    width: 220px;
  }

  .ln-stack-img-3 {
    left: 164px;
    width: 108px;
  }
}
/* Account2.css - Account-specific styles */

/* Import base styles for layout, forms, buttons, etc. */

/* Base.css - Core layout, spacing, typography, forms, and common components */

/* Based on Primer design system with 4px/8px/12px/16px spacing scale */

*, *::before, *::after {
  line-height: 1.5;
}

/* ========================================
   Page Layout
   ======================================== */

.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}

.page-head {
  margin-bottom: 16px;
}

.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.page-head-title-row h2 {
  margin-bottom: 0;
}

.page-head-title-actions {
  margin-left: auto;
}

.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}

.page-head p:last-of-type {
  margin-bottom: 16px;
}

.page-head p strong {
  color: var(--text);
  font-weight: 600;
}

.page-head p em {
  color: var(--text);
  font-style: normal;
}

.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}

.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ========================================
   Header Stats - Primer control-small
   ======================================== */

.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-row svg {
  color: var(--muted);
}

.stat-label {
  color: var(--muted);
}

.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}

.stat-value.stat-running {
  color: var(--success);
}

.header-actions {
  margin-left: auto;
}

/* ========================================
   Badges
   ======================================== */

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */

.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.card-body {
  padding: 16px;
  min-width: 0;
}

/* ========================================
   Forms - Primer control-medium
   ======================================== */

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group.span-2 {
  grid-column: span 2;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.input-label strong {
  font-weight: 600;
}

.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */

.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}

.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}

/* Select dropdown */

select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}

.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

.field-hint strong,
.field-hint em {
  color: var(--text);
}

/* ========================================
   Buttons - Primer button system
   ======================================== */

/* Base button - Compact shared system */

.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}

.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

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

/* Primary button (green) */

.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}

.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}

/* Danger button - Primer button-danger */

.btn-danger {
  color: var(--error);
}

.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}

/* Icon button - compact square with 12px icons */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-btn svg {
  width: 12px;
  height: 12px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

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

.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}

/* Text button / link - Primer button-invisible */

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}

.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* Small buttons */

.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.icon-btn-sm {
  width: 20px;
  height: 20px;
}

.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}

.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}

.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

/* ========================================
   Checkboxes - Primer control
   ======================================== */

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}

.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}

/* ========================================
   Typography - Primer text tokens
   ======================================== */

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}

code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* Tag styles defined in App.css */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

/* ========================================
   Tables - Primer DataTable
   ======================================== */

.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}

.target-queue-table tr:last-child td {
  border-bottom: none;
}

.target-queue-table tr:hover {
  background: var(--bg);
}

/* ========================================
   Sections
   ======================================== */

.target-section {
  margin-bottom: 16px;
}

.target-select-row {
  display: flex;
  align-items: center;
}

.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}

.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.instructions-text strong {
  color: var(--text);
}

.instructions-text em {
  color: var(--muted);
  font-style: italic;
}

/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */

.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}

.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-status {
  font-size: 13px;
  color: var(--success);
}

.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

/* ========================================
   Help Text & Info
   ======================================== */

.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.below-help strong {
  color: var(--text);
}

.below-help a {
  color: #58a6ff;
}

.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */

.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

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

/* ========================================
   Responsive - Primer breakpoints
   ======================================== */

/* Small tablets and large phones - 768px and below */

@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}

/* Phones - 480px and below */

@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}

/* Extra small phones - 360px and below */

@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}

/* Keep account header stat values consistent with the rest of the app. */

.account-header-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.account-header-email {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono, ui-monospace, monospace);
}

/* ========================================
   Tier Summary
   ======================================== */

.tier-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tier-summary__plan {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tier-summary__label {
  font-size: 13px;
  color: var(--muted);
}

.tier-summary__value {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
}

.tier-summary__value--pro {
  color: #c9a227;
}

.tier-summary__value--free {
  color: #8b949e;
}

.tier-summary__value--business {
  color: #a78bfa;
}

.tier-summary__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tier-summary__upgrade-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 0 12px;
  height: 28px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}

.tier-summary__upgrade-btn:hover {
  border-color: var(--text);
}

.timeline-settings-card {
  margin-bottom: 12px;
  padding: 0;
}

.timeline-settings-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.timeline-settings-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.timeline-settings-field span {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.timeline-settings-field select,
.timeline-settings-field input {
  min-height: 32px;
  border-radius: 6px;
  border: 1px solid #3a3a3a;
  background: #1f1f1f;
  color: #d7d7d7;
  font-size: 12px;
  padding: 0 10px;
}

.timeline-settings-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.timeline-settings-inline-status {
  font-size: 11px;
  line-height: 1.2;
  opacity: 1;
  transition: opacity 240ms ease;
}

.timeline-settings-inline-status.is-fading {
  opacity: 0;
}

.timeline-settings-inline-status.is-success {
  color: var(--success, #3fb950);
}

.timeline-settings-inline-status.is-error {
  color: var(--error, #f85149);
}

@media (max-width: 640px) {
  .timeline-settings-grid {
    grid-template-columns: 1fr;
  }

  .timeline-settings-actions {
    justify-content: flex-start;
  }

}

/* ========================================
   Tier Feature Comparison
   ======================================== */

.tier-compare {
  margin-bottom: 20px;
}

.tier-compare__heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.tier-compare__list {
  display: flex;
  flex-direction: column;
}

.tier-compare__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.tier-compare__row:last-child {
  border-bottom: none;
}

.tier-compare__feature {
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.tier-compare__avail {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.tier-compare__avail--pro {
  color: #c9a227;
}

.tier-compare__avail--business {
  color: #a78bfa;
}

.tier-compare__cta {
  margin-top: 12px;
}

/* ========================================
   Billing
   ======================================== */

.tier-billing {
  margin-top: 4px;
}

.tier-billing__heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.tier-billing__member {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.tier-billing__next {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.tier-billing__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tier-billing__table th {
  text-align: left;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.tier-billing__table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.tier-billing__table tr:last-child td {
  border-bottom: none;
}

.tier-billing__invoice-num {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--muted);
  font-size: 12px;
}

.tier-billing__amount {
  font-family: var(--mono, ui-monospace, monospace);
}

.tier-billing__status {
  font-size: 12px;
  color: var(--muted);
}

.tier-billing__status--settled,
.tier-billing__status--paid {
  color: var(--success);
}

.tier-billing__status--pending {
  color: #d29922;
}

.tier-billing__status--completed {
  color: #3fb950;
}

.tier-billing__status--sending {
  color: #d29922;
}

.tier-billing__status--failed {
  color: #f85149;
}

.tier-billing__status--canceled {
  color: #8b949e;
}

.tier-billing__cancel-btn {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 11px;
  border: 1px solid rgba(248, 81, 73, 0.4);
  border-radius: 3px;
  background: transparent;
  color: #f85149;
  cursor: pointer;
  line-height: 1.4;
}

.tier-billing__cancel-btn:hover {
  background: rgba(248, 81, 73, 0.1);
}

.accepted-methods {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

/* ========================================
   Free Tier Listing Usage
   ======================================== */

.account-stat.listing-usage {
  border-left: 3px solid var(--primary);
  padding: 1rem;
  background: var(--surface);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.account-tab-feature-list,
.account-tab-steps-list {
  margin: 6px 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-tab-feature-list li,
.account-tab-steps-list li {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.account-tab-sub-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
  margin: 14px 0 4px;
}

.account-tab-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 0;
}

.account-tab-faq-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}

.account-tab-faq-a {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.account-stat.account-readiness {
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-bottom: 1rem;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.stat-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.tier-badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
}

.tier-badge.free {
  background: rgba(139, 148, 158, 0.12);
  color: #8b949e;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
}

.account-readiness-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: rgba(110, 118, 129, 0.12);
}

.account-readiness-pill--ready {
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.12);
}

.account-readiness-pill--partial {
  border-color: rgba(210, 153, 34, 0.45);
  background: rgba(210, 153, 34, 0.12);
}

.account-readiness-pill--action_required {
  border-color: rgba(248, 81, 73, 0.45);
  background: rgba(248, 81, 73, 0.12);
}

.account-readiness-summary {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 10px;
}

.account-readiness-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.account-readiness-item {
  display: grid;
  grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-decoration: none;
}

.account-readiness-item:last-child {
  border-bottom: 0;
}

.account-readiness-item.is-ready {
  background: transparent;
}

.account-readiness-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.account-readiness-message {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 768px) {
  .account-readiness-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.usage-bar {
  width: 100%;
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.usage-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  background-color: #10b981;
}

.usage-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.usage-count {
  font-weight: 600;
}

.usage-remaining {
  color: var(--muted);
}

.usage-reset {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.upgrade-prompt {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--error-bg, #fee2e2);
  border-radius: 6px;
  text-align: center;
}

.upgrade-prompt p {
  margin: 0 0 0.5rem 0;
  color: var(--error, #dc2626);
  font-weight: 500;
}

.btn-upgrade {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--primary, #3b82f6);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 13px;
}

.btn-upgrade:hover {
  opacity: 0.9;
}

/* ========================================
   Tier Tab - Responsive
   ======================================== */

@media (max-width: 760px) {
  .tier-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .tier-billing__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   Plan Buttons (shared)
   ======================================== */

.plan-btn {
  appearance: none;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  line-height: 1;
  box-sizing: border-box;
}

.plan-pro-btn {
  border: 1px solid var(--success);
  background: var(--success);
  color: #f4f4f4;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.plan-pro-btn:hover {
  background: #2f9c45;
  border-color: #2f9c45;
  transform: translateY(-1px);
}

/* Optimize button: keep layout stable + show a small spinner when loading */

.optimize-btn {
  position: relative;
  white-space: nowrap;
}

.optimize-btn .btn-label {
  white-space: nowrap;
}

.optimize-btn svg {
  flex-shrink: 0;
}

.optimize-btn.is-loading {
  padding-right: 20px !important; /* reserve room for spinner on right */
}

.optimize-btn.is-loading::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid rgba(125, 133, 144, 0.55);
  border-top-color: rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  animation: optimize-btn-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes optimize-btn-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.tier-badge {
  font-family: var(--mono, ui-monospace, monospace) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  background: transparent;
  border: none;
}

.tier-badge.pro-tag {
  color: #c9a227;
  margin-left: 0;
}

.tier-badge.free-tag {
  color: #8b949e;
}

.pro-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pro-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  justify-content: flex-start;
}

.pro-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0b1220;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pro-cta-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pro-cta-button:hover {
  background: #c7d2fe;
  border-color: #818cf8;
}

.pro-cta-price {
  font-weight: 700;
}

.pro-price-inline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-left: 8px;
}

.pro-price-note {
  font-size: 12px;
  color: var(--muted);
}

.pro-pay-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 13px;
}

/* ========================================
   Read-only values (avoid input styling)
   ======================================== */

.readout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  min-height: 24px;
  color: var(--text);
}

.readout-row--mono {
  font-family: var(--mono);
}

.readout-row--large {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 0;
}

.readout-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* ========================================
   User Profile & Auth Provider Badges
   ======================================== */

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}

.user-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.user-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.user-email {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

/* Auth provider badges - minimal inline style */

.github-badge,
.google-badge,
.email-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1;
  height: 20px;
}

.github-badge svg,
.google-badge svg,
.email-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ========================================
   Credits Section
   ======================================== */

.credits-remaining {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.credits-remaining p,
.credits-remaining h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.plan-value {
  font-weight: 600;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}

.credits-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.credit-purchase-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.credit-purchase-link {
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.credit-purchase-link:hover {
  color: var(--link-hover);
}

.credit-link-separator {
  color: var(--line);
}

.credits-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.tier-limits-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tier-limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tier-limit-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt);
}

.tier-limit-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.tier-limit-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.tier-limits-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ========================================
   Storage Section (R2)
   ======================================== */

.storage-loading,
.storage-error {
  font-size: 13px;
  color: var(--muted);
  padding: 12px;
}

.storage-error {
  color: var(--error);
}

.storage-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}

.storage-stat-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.storage-stat-label {
  color: var(--muted);
}

.storage-stat-label::after {
  content: ":";
}

.storage-stat-value {
  font-weight: 500;
  font-family: var(--mono);
  color: var(--text);
}

.storage-stat-value.high-usage {
  color: var(--error);
}

.storage-stat-value.low-usage {
  color: var(--success);
}

/* Storage progress bar */

.storage-progress {
  height: 6px;
  background: var(--bg-alt);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}

.storage-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.storage-bar.high {
  background: var(--error);
}

.storage-bar.low {
  background: var(--success);
}

/* Storage files list */

.storage-files-section {
  margin-top: 12px;
}

.storage-files-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.storage-files-list {
  font-size: 13px;
  font-family: var(--mono);
  background: var(--bg-elevated);
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--line);
  max-height: min(56vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storage-file-item {
  padding: 8px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.storage-file-item.is-permanent {
  opacity: 0.72;
  background: #2d2d2d;
}

.storage-file-item:last-child {
  border-bottom: none;
}

.storage-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.storage-file-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.storage-file-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.storage-file-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* ========================================
   Email Campaign Details
   ======================================== */

.email-history-row {
  cursor: pointer;
}

.email-history-row:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.email-history-row:focus-visible {
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}

.storage-files-empty {
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Storage warning banner */

.storage-warning {
  margin-top: 12px;
  padding: 12px;
  background: #2d2d2d;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Storage actions */

.storage-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.storage-helper {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.storage-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.storage-success {
  font-size: 13px;
  color: var(--success);
  padding: 8px 0;
}

.storage-error-inline {
  font-size: 13px;
  color: var(--error);
  padding: 8px 0;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
  .storage-stats {
    flex-direction: column;
    gap: 8px;
  }
  
  .credits-remaining {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .credit-purchase-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ========================================
   Disabled Card (Pro-only features)
   ======================================== */

.content-card.disabled-card {
  opacity: 0.7;
}

.content-card.disabled-card .card-header {
  color: var(--muted);
}

.pro-feature-disabled {
  position: relative;
}

.pro-feature-disabled .input-field:disabled,
.pro-feature-disabled .primary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========================================
   Account Page Horizontal Tabs (like Admin)
   ======================================== */

.account-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0;
}

.account-tabs-select {
  display: none;
}

.account-tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.account-tab.active {
  color: #ffffff;
}

.account-tabs__divider {
  width: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.account-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-md);
}

.account-content .content-card {
  border: none;
  background: transparent;
  padding: 0;
}

.account-content .card-header {
  padding: 0 0 12px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.account-content .card-body {
  padding: 0;
}

/* ========================================
   Responsive Account Tabs
   ======================================== */

/* Account page code blocks - clean, simple */

.account-code-block {
  position: relative;
  margin: 0 0 8px 0;
  padding: 12px 40px 12px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.account-code-block code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  border: none;
}

.account-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.account-copy-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   Form / Input / Button Rows
   ======================================== */

/* Host + Port side-by-side; collapses to stacked on phone */

.account-form-row {
  display: flex;
  gap: 12px;
}

.account-form-row__host {
  flex: 1;
  min-width: 0;
}

.account-form-row__port {
  width: 80px;
  flex-shrink: 0;
}

.account-form-row__half {
  flex: 1;
  min-width: 0;
}

/* Input + action-button row (e.g. API key name + Create) */

.account-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.account-input-row .input-field {
  flex: 1;
  min-width: 0;
}

/* Save / Disconnect button row */

.account-btn-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Account -> Email content organization */

.account-email-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-email-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.account-email-subtab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--muted);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  height: 30px;
  padding: 0 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.account-email-subtab:hover {
  border-color: var(--text);
  color: var(--text);
}

.account-email-subtab.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--text);
}

.account-email-layout .email-config-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-email-layout .email-config-field > label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.account-email-section {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #2d2d2d;
}

.account-email-setup-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #2d2d2d;
}

.account-email-setup-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.account-email-setup-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-email-setup-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.account-email-setup-option:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.account-email-setup-option.active {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.065);
}

.account-email-setup-option input {
  margin-top: 2px;
  flex-shrink: 0;
}

.account-email-setup-option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-email-setup-option-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

.account-email-setup-option-title-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.account-email-setup-option-logo {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.account-email-setup-option-note {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.account-email-setup-option-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.account-email-setup-webhook {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.01);
}

.account-email-setup-webhook-url {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
}

.account-email-setup-webhook-code {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
  font-family:
    var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace);
  background: transparent;
}

.account-email-setup-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.account-email-setup-copy-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.account-email-setup-copy-btn:focus-visible,
.account-email-setup-option:focus-within {
  outline: 2px solid rgba(88, 166, 255, 0.8);
  outline-offset: 1px;
}

.account-email-color-input {
  width: 100%;
  min-height: 32px;
  padding: 2px 4px !important;
}

.account-email-setup-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.account-email-setup-checkbox input {
  flex-shrink: 0;
}

.account-email-setup-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-email-setup-status-card {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
}

.account-email-setup-status-card.is-connected {
  border-color: rgba(63, 185, 80, 0.65);
  background: rgba(35, 134, 54, 0.14);
}

.account-email-setup-status-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.account-email-setup-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-email-setup-status-state {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.account-email-setup-status-state.is-connected {
  color: var(--success, #3fb950);
}

.account-email-setup-status-state.is-disconnected {
  color: var(--error, #f85149);
}

.account-email-setup-status-value {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.account-email-setup-status-value:empty {
  display: none;
}

.account-email-setup-save-status {
  font-size: 12px;
  color: var(--text-secondary);
}

.account-email-setup-save-status.is-success {
  color: var(--success, #3fb950);
}

.account-email-setup-save-status.is-error {
  color: var(--error, #f85149);
}

/* ========================================
   Account Section / Field helpers
   ======================================== */

.account-section {
  margin-bottom: 24px;
}

.account-section:last-child {
  margin-bottom: 0;
}

/* Field group: label + input stacked */

.account-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.account-field:last-child {
  margin-bottom: 0;
}

.account-field label,
.account-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  display: block;
}

/* Email provider tab strip */

.account-email-provider-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.account-email-provider-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}

.account-email-provider-indicator {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: #3fb950;
}

.account-email-provider-tabs button.active {
  border-color: var(--text);
  color: var(--text);
  background: var(--bg-elevated);
}

.account-email-provider-tabs button:hover:not(.active) {
  border-color: var(--muted);
  color: var(--text);
}

.account-email-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.account-email-section-desc {
  margin: 6px 0 14px;
}

.account-sender-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.account-sender-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(240, 246, 252, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  gap: 8px;
}

.account-sender-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.account-sender-name {
  font-weight: 500;
  font-size: 12px;
  color: var(--text);
}

.account-sender-email {
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
}

.account-sender-badge {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--accent, #58a6ff);
  color: #fff;
  border-radius: 4px;
}

.account-sender-delete {
  font-size: 12px;
  color: var(--error);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}

.account-sender-delete:hover { text-decoration: underline; }

.account-sender-delete:disabled { opacity: 0.5; cursor: default; text-decoration: none; }

.account-add-sender-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(240, 246, 252, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .account-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .account-tab {
    padding: 10px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Divider doesn't make sense in a scrolling tab strip */
  .account-tabs__divider {
    display: none;
  }
}

/* ========================================
   Phone layout (≤ 480 px)
   ======================================== */

@media (max-width: 480px) {
  /* SMTP host + port → stacked, port full-width */
  .account-form-row {
    flex-direction: column;
  }

  .account-form-row__port {
    width: 100%;
  }

  /* API-key input + Create button → stacked, button full-width */
  .account-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .account-input-row .primary-btn {
    justify-content: center;
  }

  .account-email-setup-status-grid {
    grid-template-columns: 1fr;
  }

  /* Billing / email-history tables → horizontal scroll */
  .tier-billing__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Shrink table text a touch so more fits before scrolling */
  .tier-billing__table th,
  .tier-billing__table td {
    font-size: 12px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .tier-billing__table th:first-child,
  .tier-billing__table td:first-child {
    padding-left: 0;
  }
}

/* ========================================
   Account Page Normalization
   ======================================== */

.account-page .page-head {
  margin-bottom: 14px;
}

.account-page .account-tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--bg-elevated);
  scrollbar-width: thin;
}

.account-page > .account-tabs > .account-tab {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.account-page > .account-tabs > .account-tab:last-of-type {
  border-right: none;
}

.account-page > .account-tabs > .account-tab:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.account-page > .account-tabs > .account-tab.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.account-page .account-tabs__divider {
  display: none;
}

.account-page .account-content {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: var(--bg-elevated);
  padding: 14px;
}

.account-page .account-content .content-card {
  border: none;
  background: transparent;
  padding: 0;
}

.account-page .account-content .card-header {
  padding: 0 0 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.account-page .account-content .card-body {
  padding: 0;
}

.account-page .account-field-label,
.account-page .account-field label,
.account-page .timeline-settings-field span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.account-content label,
.account-email-layout label,
.account-email-section label {
  color: var(--text);
}

.account-page .input-field,
.account-page .timeline-settings-field input,
.account-page .timeline-settings-field select {
  width: 100%;
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
}

.account-page .input-field:disabled,
.account-page .timeline-settings-field input:disabled,
.account-page textarea.input-field:disabled {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}

.account-page textarea.input-field {
  height: auto;
  min-height: 84px;
  padding: 8px 12px;
  resize: vertical;
}

.account-page .input-field:focus,
.account-page .timeline-settings-field input:focus,
.account-page .timeline-settings-field select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
  outline: none;
}

.account-page input[type="color"].input-field {
  padding: 2px 4px;
}

.account-page .primary-btn,
.account-page .btn-primary,
.account-page .btn-secondary,
.account-page .btn,
.account-page .text-btn,
.account-page .account-tab,
.account-page .account-email-subtab,
.account-page .account-email-provider-tabs button {
  border-radius: 3px;
}

.account-page .btn:hover:not(:disabled),
.account-page .btn-secondary:hover:not(:disabled),
.account-page .primary-btn:hover:not(:disabled) {
  background: var(--bg-elevated);
  border-color: var(--border-hover);
  color: var(--text);
}

.account-page .btn-primary:hover:not(:disabled) {
  background: rgba(63, 185, 80, 0.14);
  border-color: rgba(63, 185, 80, 0.45);
  color: #9be9a8;
}

@media (max-width: 768px) {
  .account-page .account-tabs {
    display: none;
  }

  .account-page .account-tabs-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 4px 4px 0 0;
    background: var(--bg-elevated);
  }

  .account-page .account-tabs-select label {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
  }

  .account-page .account-tabs-select select {
    width: 100%;
    min-height: 32px;
    height: 32px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--bg-alt);
    color: var(--text);
    font-size: 13px;
    box-sizing: border-box;
  }

  .account-page .account-content {
    border-top: none;
    padding: 12px;
  }
}
/* Api.css - Developer API page styles */
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
/* API Status Live */
.api-status-live {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(46, 160, 67, 0.1);
  border: 1px solid rgba(46, 160, 67, 0.3);
  border-radius: 6px;
  width: fit-content;
}
.status-icon-live {
  color: #2ea043;
}
.status-text-live {
  font-size: 13px;
  font-weight: 600;
  color: #2ea043;
}
/* API Features */
.api-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.feature-icon {
  font-size: 13px;
  flex-shrink: 0;
  color: var(--muted);
}
/* API Sections */
.api-section {
  margin-bottom: 24px;
}
.api-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}
.api-section p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px 0;
}
/* Code Blocks */
.code-block {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.code-block pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
}
.code-block code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copy-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--muted);
}
/* Endpoints Table */
.api-endpoints-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.api-endpoints-table th,
.api-endpoints-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.api-endpoints-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.api-endpoints-table td {
  color: var(--text);
}
.api-endpoints-table code {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 12px;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.method-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.method-get {
  background: rgba(46, 160, 67, 0.15);
  color: #2ea043;
}
.method-post {
  background: rgba(255, 255, 255, 0.08);
  color: #c9d1d9;
}
/* Rate Limits */
.rate-limits-grid {
  display: flex;
  gap: 24px;
}
.rate-limit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rate-limit-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}
.rate-limit-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
/* Quick Links Grid */
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.quick-link-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.quick-link-card:hover {
  border-color: var(--muted);
  background: var(--bg-elevated);
  text-decoration: none;
}
.quick-link-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.quick-link-desc {
  font-size: 13px;
  color: var(--muted);
}
/* Responsive */
@media (max-width: 768px) {
  .quick-links-grid {
    grid-template-columns: 1fr;
  }
  
  .rate-limits-grid {
    flex-direction: column;
    gap: 12px;
  }
  
  .rate-limit-item {
    padding: 16px 24px;
  }
  
  .api-endpoints-table {
    font-size: 12px;
  }
  
  .api-endpoints-table th,
  .api-endpoints-table td {
    padding: 8px 10px;
  }
}
/* Payment.css */

/* Modal overlay and modal */
.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-lg);
}

.payment-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.payment-modal .payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  margin-bottom: 0;
  background: var(--bg-header);
}

.payment-modal .payment-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.payment-modal .close-button {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.payment-modal .close-button:hover {
  color: var(--text);
}

.payment-modal .payment-content {
  padding: 20px;
}

.payment-modal .payment-description {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.payment-modal .payment-description strong {
  color: var(--text, #e6edf3);
}

.payment-modal .payment-alert {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin: 0 20px 12px;
}

.payment-modal .payment-alert.error {
  background: var(--bgColor-danger-muted);
  border: 1px solid var(--borderColor-danger-muted);
  color: var(--fgColor-danger);
}

/* Payment options grid */
.payment-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.payment-option-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.payment-option-btn:hover {
  border-color: var(--borderColor-accent-emphasis);
  background: var(--bgColor-accent-muted);
}

.payment-option-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.payment-option-credits {
  font-size: 13px;
  color: var(--gh-blue);
  font-weight: 500;
}

.payment-option-rate {
  font-size: 13px;
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}

.payment-option-meta {
  font-size: 11px;
  color: #8b949e;
  font-weight: 400;
}

.payment-page {
    padding: calc(var(--toolbar-h) + var(--space-lg)) var(--space-lg) var(--space-lg);
    background: var(--bg-page);
    min-height: 100vh;
}

.payment-container {
    max-width: 500px;
    margin: 0 auto;
}

.payment-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.payment-header h1 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
}

.payment-header p {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Credit balance */
.credit-balance {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.credit-balance-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.credit-balance-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
}

/* Package selection */
.payment-packages {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.payment-package {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-package:hover {
    border-color: var(--border-hover);
}

.payment-package.selected {
    border-color: var(--accent);
    background: rgba(102, 187, 255, 0.05);
}

.payment-package-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.payment-package-credits {
    font-size: var(--font-size);
    font-weight: 600;
    color: var(--text-white);
}

.payment-package-bonus {
    font-size: var(--font-size-xs);
    color: var(--success);
}

.payment-package-price {
    font-family: var(--font-mono);
    font-size: var(--font-size);
    font-weight: 600;
    color: var(--text-primary);
}

/* Payment method */
.payment-method {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.payment-method-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

/* Submit */
.payment-submit {
    width: 100%;
}

/* Processing state */
.payment-processing {
    text-align: center;
    padding: var(--space-xl);
}

.payment-processing-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-md);
}

/* Responsive Design */
@media (max-width: 768px) {
    .payment-modal {
        max-width: 95%;
        margin: 10px;
    }

    .payment-modal .payment-content {
        padding: 16px;
    }

    .payment-options-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .payment-option-btn {
        padding: 14px 10px;
    }

    .payment-page {
        padding: calc(var(--toolbar-h) + 16px) 16px 16px;
    }

    .payment-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .payment-modal-overlay {
        padding: 12px;
    }

    .payment-modal .payment-header h2 {
        font-size: 13px;
    }

    .payment-modal .payment-description {
        font-size: 13px;
    }

    .payment-option-amount {
        font-size: 13px;
    }

    .payment-option-credits {
        font-size: 13px;
    }

    .payment-option-rate {
        font-size: 13px;
    }

    .credit-balance-value {
        font-size: 13px;
    }
}

/* ========================================
   Plan Selector Cards
   ======================================== */

.plan-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.plan-card {
  appearance: none;
  background: rgba(240, 246, 252, 0.04);
  border: 2px solid var(--line, #30363d);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.plan-card:hover {
  border-color: rgba(88, 166, 255, 0.4);
  background: rgba(88, 166, 255, 0.04);
}

.plan-card--selected {
  border-color: #58a6ff;
  background: #2d2d2d;
}

.plan-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e6edf3);
  margin-bottom: 4px;
}

.plan-card__price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #e6edf3);
  font-family: ui-monospace, monospace;
  margin-bottom: 12px;
}

.plan-card__period {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted, #8b949e);
}

.plan-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--muted, #8b949e);
  line-height: 1.8;
}

.plan-card__features li::before {
  content: "✓ ";
  color: #3fb950;
}

@media (max-width: 480px) {
  .plan-selector {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Checkout Modal (self-hosted Bitcoin)
   ======================================== */

.checkout-modal .payment-content {
  padding: 20px;
}

.checkout-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--muted, #8b949e);
}

.checkout-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkout-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.checkout-status-dot--pulse {
  animation: statusPulse 1.5s ease-in-out infinite;
}

.checkout-status-dot--settled {
  background: #2ea043 !important;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.checkout-qr-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  margin-bottom: 16px;
  background: rgba(240, 246, 252, 0.03);
  border: 1px solid var(--line, #30363d);
  border-radius: 8px;
}

.checkout-qr-image {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}

.checkout-field-label {
  font-size: 12px;
  color: var(--muted, #8b949e);
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 600;
}

.checkout-copyable {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg, #0d1117);
  border: 1px solid var(--line, #30363d);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.checkout-copyable code {
  flex: 1;
  font-family: ui-monospace, "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--text, #e6edf3);
  word-break: break-all;
  min-width: 0;
}

.checkout-address {
  font-size: 12px !important;
}

.checkout-copy-btn {
  appearance: none;
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.25);
  color: #58a6ff;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}

.checkout-copy-btn:hover {
  background: rgba(88, 166, 255, 0.2);
  border-color: rgba(88, 166, 255, 0.4);
}

.checkout-rate {
  font-size: 12px;
  color: var(--muted, #6e7681);
  margin-bottom: 16px;
}

.checkout-wallet-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.25);
  color: #58a6ff;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 0.15s;
}

.checkout-wallet-btn:hover {
  background: rgba(88, 166, 255, 0.2);
  border-color: rgba(88, 166, 255, 0.4);
}

.checkout-cancel-btn {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(240, 246, 252, 0.12);
  color: var(--muted, #8b949e);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.15s;
}

.checkout-cancel-btn:hover {
  background: rgba(240, 246, 252, 0.08);
  color: #d4d4d4;
}

/* Success state */
.checkout-success {
  text-align: center;
  padding: 40px 20px;
}

.checkout-success-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  background: rgba(46, 160, 67, 0.15);
  color: #2ea043;
  font-size: 28px;
  margin: 0 auto 16px;
}

.checkout-success-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e6edf3);
  margin-bottom: 4px;
}

.checkout-success-sub {
  font-size: 13px;
  color: var(--muted, #8b949e);
}

/* Payment option icon */
.payment-option-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 4px;
}

.payment-option-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* JobHistory.css - StatusBlockRow-style table layout */
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
/* Base page container */
.account-page,
.job-history-page {
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Embedded mode - no min-height, seamless integration */
.job-history-embedded {
  width: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.job-history-embedded .job-history-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.job-history-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
}
/* Section header - matches card-header style */
.job-history-page-header {
  display: none; /* No longer used - stats moved to page-head */
}
/* Header stats - matching CapturePage style */
.page-head .header-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.page-head .stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.page-head .stat-row svg {
  color: var(--muted);
}
.page-head .stat-label {
  color: var(--muted);
}
.page-head .stat-value {
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.page-head .header-actions {
  margin-left: auto;
}
.job-history-page-header .header-left h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.job-history-page-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Stats in header - inline badges matching row style */
.stats-badges {
  display: flex;
  gap: 16px;
  font-size: 13px;
}
.stat-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-badge-label {
  color: var(--muted);
}
.stat-badge-value {
  font-weight: 600;
  color: var(--text);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}
/* Clear button - matching Account.css btn-compact */
.clear-history-btn {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  padding: 0 10px;
  height: 24px;
  color: #b0b0b0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.clear-history-btn svg {
  flex-shrink: 0;
}
.clear-history-btn:hover {
  background: var(--bg-alt);
  border-color: #f85149;
  color: #f85149;
}
.clear-history-btn:hover svg {
  color: #f85149;
}
/* Job list - card container */
.job-list {
  background: var(--bg-alt);
  flex: 1;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
}
/* Table header - matching Datatable section header */
.job-list-header {
  display: grid;
  grid-template-columns: 40px minmax(120px, 1fr) 90px 90px 80px 80px;
  min-height: 32px;
  padding: 0 12px 0 16px;
  background: transparent;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
/* Table rows - matching StatusBlockRow row style */
.job-item {
  border-bottom: 1px solid var(--line);
}
.job-item:nth-child(odd) .job-main {
  background: var(--bg-elevated);
}
.job-item:nth-child(even) .job-main {
  background: var(--bg-alt);
}
.job-item:hover .job-main {
  background: #474747;
}
.job-item.selected .job-main {
  background: var(--bgColor-accent-muted);
}
.job-main {
  cursor: pointer;
}
.job-row {
  display: grid;
  grid-template-columns: 40px minmax(120px, 1fr) 90px 90px 80px 80px;
  min-height: var(--row-h);
  padding: 0 12px 0 16px;
  align-items: center;
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.job-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}
/* Source column */
.job-db-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.db-placeholder {
  font-size: 13px;
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}
.job-source-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(110, 118, 129, 0.18);
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}
/* Job ID */
.job-id-value {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--muted);
}
/* Status badges use App.css standardized tag styles */
/* Time and duration */
.job-start-time,
.job-duration {
  font-size: 13px;
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}
/* Records count */
.records-count {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--text);
}
/* Expanded job details - matching panel style */
.job-expanded {
  padding: 16px 24px;
  background-color: var(--bg-card);
  border-top: 2px solid #212121;
  border-bottom: 2px solid #212121;
}
.expanded-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
}
.expanded-details {
  flex: 1 1 320px;
  min-width: 0;
}
.expanded-actions {
  margin-left: auto;
}
.job-expanded button {
  margin-top: 12px;
  color: #f8f8f8;
  border: 1px solid #424242;
}
.job-expanded button:hover {
  background: none !important;
  border: 1px solid #424242;
}
/* Detail rows matching StatusBlockRow row style */
.detail-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  min-height: 20px;
  align-items: center;
  font-size: 13px;
}
.detail-label {
  color: #9e9e9e;
  font-size: 13px;
}
.detail-label::after {
  content: "";
}
.detail-value {
  color: #f8f8f8;
  font-size: 13px;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}
/* Cities list in expanded view */
.cities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.city-item {
  font-size: 13px;
  color: var(--muted);
  padding: 2px 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.city-name {
  font-weight: 500;
  color: var(--text);
}
.city-types {
  color: var(--muted);
  margin-left: 4px;
  font-size: 13px;
}
.more-cities {
  font-style: italic;
  color: var(--muted);
}
/* Export/action links - matching action button style */
.export-links {
  margin-top: 0;
}
.result-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.result-link {
  appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  padding: 0 8px;
  height: 18px;
  color: var(--gh-blue);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.result-link:disabled {
  opacity: 0.65;
  cursor: default;
}
.export-links .result-link {
  margin-top: 0;
}
.result-link:hover {
  background: var(--bg);
  border-color: var(--gh-blue);
}
.result-link.preview-link {
  min-width: 86px;
}
.result-link.preview-link .preview-link-label {
  line-height: 1;
}
.result-link.preview-link .preview-link-spinner {
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: preview-link-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.result-link.preview-link.is-loading .preview-link-label {
  opacity: 0.9;
}
@keyframes preview-link-spin {
  to {
    transform: rotate(360deg);
  }
}
/* JSON preview */
.json-preview {
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: auto;
  max-height: 400px;
}
.json-hint {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}
.json-hint.error {
  color: var(--error);
}
/* JSON code wrapper with copy button */
.json-code-wrapper {
  position: relative;
}
.json-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}
.json-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 1);
}
.json-copy-btn:active {
  background: rgba(255, 255, 255, 0.2);
}
.json-copy-btn.copied {
  background: rgba(46, 160, 67, 0.15);
  border-color: rgba(46, 160, 67, 0.3);
  color: #2ea043;
}
.json-copy-btn.copied:hover {
  background: rgba(46, 160, 67, 0.2);
  border-color: rgba(46, 160, 67, 0.4);
  color: #2ea043;
}
/* Empty state */
.empty-state {
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
}
.empty-state h3 {
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.empty-state p {
  margin: 0;
  font-size: 13px;
}
.empty-state-cta {
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent, #58a6ff);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.empty-state-cta:hover {
  background: var(--accent-hover, #79b8ff);
  text-decoration: none;
}
.empty-icon {
  opacity: 0.4;
}
.empty-icon svg {
  width: 48px;
  height: 48px;
}
/* Pagination - matching footer style */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 12px 12px 12px 16px;
  min-height: var(--row-h);
  background: transparent;
  font-size: 13px;
  color: var(--muted);
}
.pagination-info {
  color: var(--muted);
  font-size: 13px;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}
.pagination-buttons {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.pagination-btn {
  appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  color: var(--text);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--accent);
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-btn.active {
  background: var(--accent);
  border-color: var(--gh-blue);
  color: var(--text);
  font-weight: 600;
}
.pagination-ellipsis {
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
}
.pagination-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}
.pagination-per-page label {
  color: var(--muted);
}
.pagination-per-page select {
  appearance: none;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  padding: 0 16px 0 6px;
  height: 18px;
  cursor: pointer;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l4 4 4-4" stroke="%23b0b0b0" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 8px;
}
.pagination-per-page select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 2px rgba(110, 118, 129, 0.2);
  outline: none;
}
/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(90vw, 400px);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-close:hover {
  color: var(--text);
}
.modal-body {
  padding: 16px;
  font-size: 13px;
  color: var(--text);
}
.modal-body p {
  margin: 0 0 8px;
}
.warning-text {
  color: var(--error);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.cancel-btn,
.confirm-btn {
  appearance: none;
  padding: 0 16px;
  height: 32px;
  min-width: 80px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.cancel-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.cancel-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.confirm-btn {
  background: var(--fgColor-danger);
  border: 1px solid var(--borderColor-danger-emphasis);
  color: var(--fgColor-onEmphasis);
}
.confirm-btn:hover {
  background: var(--bgColor-danger-emphasis);
}
.confirm-btn:disabled,
.cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Responsive */
@media (max-width: 768px) {
  /* Mobile: compact single-line rows */
  .job-list-header {
    display: none;
  }

  .job-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 36px;
  }

  .job-col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
  }

  .job-db-col {
    width: 28px;
    flex-shrink: 0;
  }

  .job-id-col {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .job-status-col {
    flex-shrink: 0;
  }

  .job-duration-col {
    display: none;
  }

  .job-time-col {
    display: none;
  }

  .job-records-col {
    flex-shrink: 0;
    text-align: right;
  }

  .job-id-value {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .job-history-page-header {
    padding: 8px 12px;
  }
  
  .stats-badges {
    display: none;
  }
  
  /* Pagination: single line, right aligned */
  .pagination-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    gap: 8px;
  }
  
  .pagination-info {
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .pagination-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    flex-shrink: 0;
  }

  .pagination-per-page {
    display: none;
  }
}
@media (max-width: 480px) {
  .job-row {
    gap: 6px;
    padding: 6px 10px;
  }

  .job-db-col {
    display: none;
  }

  .job-id-col {
    font-size: 13px;
  }

  .pagination-info {
    display: none;
  }
}
/* Keyframes for loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Logs button style */
.result-link.logs-link {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  color: #a78bfa;
}
.result-link.logs-link:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
}
/* Logs Modal */
.logs-modal {
  width: min(95vw, 800px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.logs-modal .modal-header {
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.logs-modal .modal-subtitle {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  margin-right: auto;
}
.logs-modal-body {
  flex: 1;
  overflow: auto;
  max-height: 60vh;
  background: #0d1117;
  border-radius: 4px;
  margin: 0 16px;
}
.logs-content {
  margin: 0;
  padding: 16px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  line-height: 1.6;
  color: #c9d1d9;
  white-space: pre-wrap;
  word-break: break-word;
}
.logs-loading,
.logs-error,
.logs-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.logs-error {
  color: var(--error);
}
.warning-text {
  flex: 1;
  color: var(--warning-dark, #92400e);
}
/* DatabaseConfiguration.css - Uses Base.css patterns */

/* Import base styles */

/* Base.css - Core layout, spacing, typography, forms, and common components */

/* Based on Primer design system with 4px/8px/12px/16px spacing scale */

*, *::before, *::after {
  line-height: 1.5;
}

/* ========================================
   Page Layout
   ======================================== */

.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}

.page-head {
  margin-bottom: 16px;
}

.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.page-head-title-row h2 {
  margin-bottom: 0;
}

.page-head-title-actions {
  margin-left: auto;
}

.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}

.page-head p:last-of-type {
  margin-bottom: 16px;
}

.page-head p strong {
  color: var(--text);
  font-weight: 600;
}

.page-head p em {
  color: var(--text);
  font-style: normal;
}

.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}

.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ========================================
   Header Stats - Primer control-small
   ======================================== */

.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-row svg {
  color: var(--muted);
}

.stat-label {
  color: var(--muted);
}

.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}

.stat-value.stat-running {
  color: var(--success);
}

.header-actions {
  margin-left: auto;
}

/* ========================================
   Badges
   ======================================== */

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */

.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.card-body {
  padding: 16px;
  min-width: 0;
}

/* ========================================
   Forms - Primer control-medium
   ======================================== */

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group.span-2 {
  grid-column: span 2;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.input-label strong {
  font-weight: 600;
}

.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */

.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}

.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}

/* Select dropdown */

select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}

.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

.field-hint strong,
.field-hint em {
  color: var(--text);
}

/* ========================================
   Buttons - Primer button system
   ======================================== */

/* Base button - Compact shared system */

.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}

.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

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

/* Primary button (green) */

.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}

.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}

/* Danger button - Primer button-danger */

.btn-danger {
  color: var(--error);
}

.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}

/* Icon button - compact square with 12px icons */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-btn svg {
  width: 12px;
  height: 12px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

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

.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}

/* Text button / link - Primer button-invisible */

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}

.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* Small buttons */

.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.icon-btn-sm {
  width: 20px;
  height: 20px;
}

.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}

.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}

.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

/* ========================================
   Checkboxes - Primer control
   ======================================== */

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}

.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}

/* ========================================
   Typography - Primer text tokens
   ======================================== */

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}

code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* Tag styles defined in App.css */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

/* ========================================
   Tables - Primer DataTable
   ======================================== */

.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}

.target-queue-table tr:last-child td {
  border-bottom: none;
}

.target-queue-table tr:hover {
  background: var(--bg);
}

/* ========================================
   Sections
   ======================================== */

.target-section {
  margin-bottom: 16px;
}

.target-select-row {
  display: flex;
  align-items: center;
}

.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}

.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.instructions-text strong {
  color: var(--text);
}

.instructions-text em {
  color: var(--muted);
  font-style: italic;
}

/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */

.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}

.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-status {
  font-size: 13px;
  color: var(--success);
}

.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

/* ========================================
   Help Text & Info
   ======================================== */

.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.below-help strong {
  color: var(--text);
}

.below-help a {
  color: #58a6ff;
}

.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */

.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

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

/* ========================================
   Responsive - Primer breakpoints
   ======================================== */

/* Small tablets and large phones - 768px and below */

@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}

/* Phones - 480px and below */

@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}

/* Extra small phones - 360px and below */

@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}

/* ========================================
   DB Config Wrapper
   ======================================== */

.db-config-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========================================
   Connected Banner
   ======================================== */

.db-connected-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.4);
  border-radius: 6px;
  font-size: 13px;
  color: var(--success);
}

.db-connected-banner strong {
  font-weight: 600;
}

.db-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-status-dot.connected {
  background: var(--success);
}

/* ========================================
   Saved Profiles Section
   ======================================== */

.db-saved-profiles-section {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.db-saved-profiles-header {
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.db-saved-profiles-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

.db-saved-profiles-header p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.db-saved-profiles-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.db-saved-profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}

.db-saved-profile-item:hover {
  border-color: var(--accent);
}

.db-saved-profile-item.active {
  border-color: var(--success);
  background: rgba(63, 185, 80, 0.05);
}

.db-saved-profile-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-saved-profile-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.db-saved-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.db-saved-profile-provider {
  font-size: 13px;
  color: var(--muted);
  text-transform: capitalize;
}

.db-saved-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-profile-use-btn {
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.db-profile-use-btn:hover {
  background: var(--bg);
  border-color: var(--accent);
}

.db-profile-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

.db-profile-delete-btn:hover {
  color: var(--error);
  background: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
}

/* ========================================
   Provider Selection Card
   ======================================== */

.db-selection-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.db-selection-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.db-selection-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.db-options-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.db-option-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.db-option-item:hover {
  border-color: var(--accent);
}

.db-option-item:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.db-option-item.active {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.db-option-item.is-coming-soon {
  cursor: not-allowed;
  opacity: 0.65;
}

.db-option-item.is-coming-soon:hover {
  border-color: var(--line);
  background: var(--bg);
}

.db-option-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.db-option-icon.smaller {
  width: 14px;
  height: 14px;
}

.db-option-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 90px;
}

.db-option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.db-option-badge {
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.db-help-link {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.db-help-link a {
  color: #58a6ff;
  text-decoration: none;
}

.db-help-link a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* ========================================
   Configuration Form Card
   ======================================== */

.db-config-form {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.db-form-header {
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-form-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.db-form-body {
  padding: 16px;
}

/* Form Grid - uses Base.css patterns */

.db-form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.db-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.db-field .db-field-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.db-field input,
.db-field select,
.db-field textarea {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}

.db-field input:focus,
.db-field select:focus,
.db-field textarea:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.db-field input::placeholder {
  color: var(--muted);
}

.db-field textarea {
  min-height: 140px;
  height: 140px;
  padding: 10px 12px;
  line-height: 1.35;
  resize: vertical;
}

.db-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-alt);
}

/* Required star */

.required-star {
  color: var(--error);
  margin-left: 2px;
}

/* SSL Checkbox */

.db-field-ssl {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-field-ssl label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.db-field-ssl input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}

.db-field-desc-inline {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

/* Help Details - Collapsible */

.db-help-details {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}

.db-help-details summary {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.db-help-details summary::-webkit-details-marker {
  display: none;
}

.db-help-details summary::before {
  content: "▶ ";
  font-size: 13px;
  margin-right: 6px;
}

.db-help-details[open] summary::before {
  content: "▼ ";
}

.db-help-details[open] summary {
  border-bottom: 1px solid var(--line);
}

.db-help-details-content {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.db-help-details pre {
  margin: 8px 0 0 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  line-height: 1.4;
}

/* Form Actions */

.db-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}

.db-test-link,
.db-disconnect-link {
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.db-test-link {
  color: #58a6ff;
}

.db-test-link:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.db-disconnect-link {
  color: var(--error);
}

.db-disconnect-link:hover {
  text-decoration: underline;
}

.db-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--success);
  border: 1px solid var(--success);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.db-save-btn:hover:not(:disabled) {
  background: #2ea043;
}

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

/* Feedback Messages */

.db-action-feedback {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.db-action-feedback.success {
  background: rgba(63, 185, 80, 0.1);
  color: var(--success);
  border: 1px solid rgba(63, 185, 80, 0.4);
}

.db-action-feedback.error {
  background: rgba(248, 81, 73, 0.1);
  color: var(--error);
  border: 1px solid rgba(248, 81, 73, 0.4);
}

/* Privacy Notice */

.db-privacy-notice {
  padding: 12px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  background: transparent;
}

.db-privacy-notice p {
  margin: 0;
  font-weight: normal;
}

/* Monospace input */

.monospace-input {
  font-family: var(--mono, ui-monospace, monospace) !important;
  font-size: 13px !important;
}

.db-masked-value {
  font-family: var(--mono, ui-monospace, monospace) !important;
  letter-spacing: 0.5px;
}

/* Inline link style */

.db-inline-link {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}

.db-inline-link:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.db-private-key-input {
  white-space: pre;
}

/* Toggle row for MySQL URI/fields */

.db-field-toggle-row {
  margin-bottom: 8px;
}

/* Section headers (legacy support) */

.db-section-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.db-section-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px 0;
}
/* DatabaseConfigModal.css - Modal wrapper for database configuration */

.db-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-lg);
  backdrop-filter: blur(2px);
}

.db-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.db-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg, 16px);
  border-bottom: 1px solid var(--border);
  background: var(--bg-header, var(--bg-card));
  flex-shrink: 0;
}

.db-modal-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.db-modal-close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.db-modal-close-btn:hover {
  color: var(--text);
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.db-modal-content {
  padding: var(--space-lg, 16px);
  overflow-y: auto;
  flex: 1;
}

/* Override database configuration styles for modal context */
.db-modal-content .db-config-wrapper {
  padding: 0;
}

.db-modal-content .db-selection-section {
  margin-bottom: 16px;
}

.db-modal-content .db-selection-card {
  border: none;
  padding: 0;
  background: transparent;
}

.db-modal-content .db-privacy-notice {
  margin-top: 12px;
  margin-bottom: 0;
  padding: 12px;
  font-size: 12px;
}

.db-modal-content .db-privacy-notice strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.db-modal-content .db-privacy-notice p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 640px) {
  .db-modal-overlay {
    padding: 12px;
  }

  .db-modal {
    max-height: 90vh;
  }

  .db-modal-header {
    padding: 12px 16px;
  }

  .db-modal-header h2 {
    font-size: 13px;
  }

  .db-modal-content {
    padding: 12px;
  }
}
.info-popover {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  margin-left: 6px;
}

.info-popover-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
}

.info-popover-trigger svg {
  width: 10px;
  height: 10px;
}

.info-popover-trigger:hover {
  color: var(--text);
  border-color: var(--accent);
}

.info-popover-trigger:focus-visible {
  outline: 2px solid var(--gh-blue);
  outline-offset: 2px;
}

.info-popover-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  min-width: 240px;
  max-width: 360px;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .info-popover-panel {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    min-width: auto;
    max-width: none;
    width: calc(100% - 32px);
    font-size: 13px;
    padding: 12px 14px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .info-popover-panel {
    font-size: 12px;
    padding: 10px 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
  }
}
/* RealtimeCallModal.css — Live voice call modal */

.realtime-call-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.realtime-call-modal {
  width: min(620px, 94vw);
  max-height: 88vh;
  background: var(--bg-elevated, #1c1c1e);
  border: 1px solid var(--line, #333);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* Header */
.realtime-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #333);
  gap: 10px;
}

.realtime-call-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.realtime-call-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.realtime-call-status-dot.disconnected { background: var(--muted, #888); }
.realtime-call-status-dot.connecting { background: #f0ad4e; animation: pulse-dot 1s infinite; }
.realtime-call-status-dot.connected { background: #4caf50; animation: pulse-dot 2s infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.realtime-call-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.realtime-call-timer {
  font-size: 11px;
  color: var(--muted, #888);
  font-variant-numeric: tabular-nums;
}

.realtime-call-close-btn {
  background: none;
  border: none;
  color: var(--muted, #888);
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
}

.realtime-call-close-btn:hover { color: var(--text, #e0e0e0); }

/* Cost & usage bar */
.realtime-call-cost-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line, #333);
  font-size: 11px;
  color: var(--muted, #888);
  flex-wrap: wrap;
}

.realtime-call-cost-value {
  font-weight: 600;
  color: var(--text, #e0e0e0);
  font-variant-numeric: tabular-nums;
}

.realtime-call-cost-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Stage progress */
.realtime-call-stages {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line, #333);
}

.realtime-call-stage-chip {
  flex: 1;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  text-align: center;
  background: rgba(110, 118, 129, 0.14);
  color: var(--muted, #888);
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.realtime-call-stage-chip.active {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
  font-weight: 600;
}

.realtime-call-stage-chip.completed {
  background: rgba(76, 175, 80, 0.2);
  color: #66bb6a;
}

/* Transcript area */
.realtime-call-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 400px;
}

.realtime-call-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 85%;
}

.realtime-call-msg.user { align-self: flex-end; }
.realtime-call-msg.assistant { align-self: flex-start; }

.realtime-call-msg-role {
  font-size: 11px;
  color: var(--muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.realtime-call-msg-text {
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text, #e0e0e0);
}

.realtime-call-msg.user .realtime-call-msg-text {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.realtime-call-msg.assistant .realtime-call-msg-text {
  background: rgba(110, 118, 129, 0.14);
  border: 1px solid var(--line, #333);
}

.realtime-call-msg-text.in-progress {
  opacity: 0.7;
}

.realtime-call-transcript-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted, #888);
  font-size: 12px;
}

/* Controls bar */
.realtime-call-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line, #333);
  flex-wrap: wrap;
}

.realtime-call-controls-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.realtime-call-controls-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.realtime-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--line, #333);
  background: rgba(110, 118, 129, 0.14);
  color: var(--text, #e0e0e0);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.realtime-call-btn:hover { background: rgba(110, 118, 129, 0.25); }
.realtime-call-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.realtime-call-btn.primary {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.realtime-call-btn.primary:hover { background: rgba(59, 130, 246, 0.3); }

.realtime-call-btn.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.realtime-call-btn.danger:hover { background: rgba(239, 68, 68, 0.25); }

/* Text input */
.realtime-call-text-input {
  flex: 1;
  min-width: 100px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line, #333);
  background: rgba(110, 118, 129, 0.08);
  color: var(--text, #e0e0e0);
  font-size: 12px;
  outline: none;
}

.realtime-call-text-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
}

.realtime-call-text-input::placeholder {
  color: var(--muted, #888);
}

/* Settings panel */
.realtime-call-settings {
  padding: 12px 16px;
  border-top: 1px solid var(--line, #333);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.realtime-call-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted, #888);
}

.realtime-call-settings-row label {
  min-width: 80px;
  font-weight: 500;
  color: var(--text, #e0e0e0);
}

.realtime-call-settings-row select,
.realtime-call-settings-row input {
  flex: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line, #333);
  background: rgba(110, 118, 129, 0.08);
  color: var(--text, #e0e0e0);
  font-size: 12px;
  outline: none;
}

.realtime-call-settings-row textarea {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line, #333);
  background: rgba(110, 118, 129, 0.08);
  color: var(--text, #e0e0e0);
  font-size: 12px;
  outline: none;
  resize: vertical;
  min-height: 48px;
}

/* Stage editor */
.realtime-call-stage-editor {
  padding: 8px 16px;
  border-top: 1px solid var(--line, #333);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.realtime-call-stage-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.realtime-call-stage-row input {
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--line, #333);
  background: rgba(110, 118, 129, 0.08);
  color: var(--text, #e0e0e0);
  font-size: 11px;
  outline: none;
}

.realtime-call-stage-row input.stage-name { flex: 2; }
.realtime-call-stage-row input.stage-duration { width: 50px; flex: none; }

.realtime-call-stage-remove {
  background: none;
  border: none;
  color: var(--muted, #888);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
}

.realtime-call-stage-remove:hover { color: #f87171; }

/* Post-call actions bar */
.realtime-call-post-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-top: 1px solid var(--line, #333);
  background: rgba(110, 118, 129, 0.06);
}

.realtime-call-post-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted, #888);
  white-space: nowrap;
}

/* Audio level meter for microphone monitoring */
.realtime-call-audio-level {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
}

.realtime-call-audio-label {
  font-size: 10px;
  color: var(--muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.realtime-call-audio-meter {
  width: 60px;
  height: 6px;
  border-radius: 3px;
  background: rgba(110, 118, 129, 0.2);
  border: 1px solid var(--line, #333);
  overflow: hidden;
}

.realtime-call-audio-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #ffc107, #f87171);
  border-radius: 3px;
}
/* Toast.css */

.toast-container {
    position: fixed;
    /* Raise above footer and offset above it */
    bottom: calc(var(--space-lg) + var(--footer-height));
    right: var(--space-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 350px;
    animation: toast-in 0.2s ease;
    pointer-events: auto;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast.exiting {
    animation: toast-out 0.2s ease forwards;
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Types */
.toast-success {
    border-left: 3px solid var(--success);
}

.toast-error {
    border-left: 3px solid var(--error);
}

.toast-warning {
    border-left: 3px solid var(--warning);
}

.toast-info {
    border-left: 3px solid var(--accent);
}

/* Icon */
.toast-icon {
    flex-shrink: 0;
    font-size: var(--font-size);
}

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

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

.toast-warning .toast-icon {
    color: var(--warning);
}

.toast-info .toast-icon {
    color: var(--accent);
}

/* Content */
.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-white);
}

.toast-message {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-xs);
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Close */
.toast-close {
    flex-shrink: 0;
    padding: 4px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-xs);
}

.toast-close:hover {
    color: var(--text-white);
}

/* Mobile responsiveness — keep toasts above the fixed datagrid status bar (41px) */
@media (max-width: 640px) {
    .toast-container {
        bottom: calc(var(--space-md) + 49px + env(safe-area-inset-bottom, 0px));
        right: var(--space-md);
        left: var(--space-md);
        width: auto;
        align-items: stretch;
    }

    .toast {
        max-width: none;
        width: 100%;
        align-items: flex-start;
        box-sizing: border-box;
    }

    .toast-title {
        font-size: var(--font-size-sm);
    }

    .toast-message {
        display: block;
        font-size: var(--font-size-sm);
    }
}
/* TwilioCampaignModal.css — full-featured campaign modal, dark theme */

/* ── Inline host (no overlay) ── */
.tc-inline-host {
  width: 100%;
}

/* ── Inline modal shell (strips overlay/shadow/fixed-height) ── */
.tc-modal--inline {
  width: 100%;
  max-height: none;
  height: auto;
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

.tc-modal--inline .tc-body {
  overflow-y: visible;
  flex: unset;
  padding: 0;
}

.tc-modal--inline .tc-layout {
  gap: 24px;
}

.tc-modal--inline .tc-compose {
  gap: 16px;
}

.tc-modal--inline .tc-textarea {
  min-height: 200px;
}

.tc-modal--inline .tc-footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
}

/* ── Overlay ── */
.tc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-lg);
  backdrop-filter: blur(2px);
}

/* ── Modal shell ── */
.tc-modal {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  width: min(920px, 96vw);
  height: auto;
  max-height: min(90vh, 780px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* ── Header ── */
.tc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #222;
  background: #141414;
  flex-shrink: 0;
}
.tc-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-header-icon { color: var(--muted, #888); display: flex; align-items: center; }
.tc-header-logo { height: 22px; width: auto; object-fit: contain; flex-shrink: 0; }
.tc-header h2 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text, #e4e4e4); }
.tc-header-reg { font-size: 0.65em; vertical-align: super; opacity: 0.5; margin-left: 1px; font-weight: 400; }
.tc-close {
  background: transparent; border: none; color: var(--muted, #888); cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: all 0.15s;
}
.tc-close:hover { color: var(--text, #e4e4e4); background: rgba(255,255,255,0.05); }

/* ── Body ── */
.tc-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

/* ── Stacked layout ── */
.tc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  min-height: 0;
}

/* ── Left: Compose ── */
.tc-compose {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

/* Recipient bar */
.tc-recipient-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #2e2e2e);
  border-radius: 6px;
  color: var(--muted, #888);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.tc-recipient-bar:hover { background: rgba(255,255,255,0.06); color: var(--text, #e4e4e4); }
.tc-recipient-bar strong { color: var(--text, #e4e4e4); font-weight: 600; }
.tc-recipient-bar-text { flex: 1; }
.tc-recipient-skip { color: var(--muted, #888); opacity: 0.7; }
.tc-recipient-bar-arrow { font-size: 11px; color: var(--muted, #888); opacity: 0.6; white-space: nowrap; }

/* Recipient list */
.tc-recipient-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border, #2e2e2e);
  border-radius: 6px;
  background: var(--bg, #121212);
}
.tc-recipient-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text, #e4e4e4);
  cursor: pointer;
  transition: background 0.1s;
}
.tc-recipient-row:hover { background: rgba(255,255,255,0.03); }
.tc-recipient-row.is-excluded { opacity: 0.35; }
.tc-recipient-row input[type="checkbox"] { accent-color: #238636; width: 13px; height: 13px; cursor: pointer; }
.tc-recipient-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-recipient-contact { color: var(--muted, #888); font-family: monospace; font-size: 11px; flex-shrink: 0; }
.tc-recipient-empty { padding: 12px; text-align: center; color: var(--muted, #888); font-size: 12px; }

.tc-quality-warnings {
  border: 1px solid rgba(210,153,34,0.35);
  border-radius: 6px;
  background: rgba(210,153,34,0.08);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-quality-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #d29922;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tc-quality-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tc-quality-item {
  border: 1px solid rgba(210,153,34,0.35);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: #e8ca8c;
  background: rgba(20, 18, 10, 0.3);
}

.tc-quality-samples {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tc-quality-sample {
  font-size: 11px;
  color: #c9c9c9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fields */
.tc-field { display: flex; flex-direction: column; gap: 4px; }
.tc-label { font-size: 11px; font-weight: 500; color: var(--muted, #888); text-transform: uppercase; letter-spacing: 0.5px; }
.tc-label-row { display: flex; justify-content: space-between; align-items: center; }
.tc-char-info { font-size: 11px; color: var(--muted, #888); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tc-char-over { color: #d29922; font-weight: 600; }

.tc-input {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border, #2e2e2e); border-radius: 6px;
  font-size: 13px; color: var(--text, #e4e4e4); background: var(--bg, #121212);
  outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.tc-input:focus { border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88,166,255,0.15); }
.tc-input::placeholder { color: #555; }

.tc-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border, #2e2e2e); border-radius: 6px;
  font-size: 13px; color: var(--text, #e4e4e4); background: var(--bg, #121212);
  outline: none; resize: vertical; line-height: 1.5;
  transition: border-color 0.15s; box-sizing: border-box;
}
.tc-textarea:focus { border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88,166,255,0.15); }
.tc-textarea::placeholder { color: #555; }

.tc-email-config-note {
  border: 1px solid var(--border, #2e2e2e);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  color: var(--muted, #888);
  font-size: 11px;
  line-height: 1.4;
  padding: 8px 10px;
}

.tc-email-config-note.is-warning {
  border-color: rgba(210,153,34,0.35);
  background: rgba(210,153,34,0.08);
  color: #d29922;
}

/* Variable pills */
.tc-variables {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tc-variables-label { font-size: 11px; color: var(--muted, #888); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.tc-pill {
  padding: 2px 8px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border, #2e2e2e);
  border-radius: 10px; font-size: 11px; color: var(--muted, #888);
  cursor: pointer; font-family: monospace; user-select: none;
  transition: all 0.15s;
}
.tc-pill:hover { background: rgba(255,255,255,0.1); border-color: #555; color: var(--text, #e4e4e4); }
.tc-pill:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Right: Preview panel ── */
.tc-preview-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, #2e2e2e);
  border-radius: 6px;
  background: var(--bg, #121212);
  overflow: hidden;
  min-height: 200px;
  min-height: 0;
}
.tc-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #2e2e2e);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.tc-preview-title { font-size: 11px; font-weight: 600; color: var(--muted, #888); text-transform: uppercase; letter-spacing: 0.5px; }
.tc-preview-nav { display: flex; align-items: center; gap: 4px; }
.tc-preview-nav-btn {
  background: transparent; border: none; color: var(--muted, #888);
  cursor: pointer; padding: 2px; border-radius: 3px; display: flex;
  align-items: center; transition: all 0.15s;
}
.tc-preview-nav-btn:hover:not(:disabled) { color: var(--text, #e4e4e4); background: rgba(255,255,255,0.05); }
.tc-preview-nav-btn:disabled { opacity: 0.3; cursor: default; }
.tc-preview-nav-count { font-size: 11px; color: var(--muted, #888); min-width: 36px; text-align: center; }

.tc-preview-content { padding: 12px; flex: 1; overflow-y: auto; }
.tc-preview-to, .tc-preview-subject {
  display: flex; gap: 6px; font-size: 11px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tc-preview-to-label { color: var(--muted, #888); flex-shrink: 0; font-weight: 500; }
.tc-preview-to-value { color: var(--text, #e4e4e4); word-break: break-all; }
.tc-preview-body {
  font-size: 12px; color: var(--text, #e4e4e4); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.tc-preview-placeholder { color: #444; font-style: italic; }
.tc-preview-empty { padding: 20px; text-align: center; color: var(--muted, #888); font-size: 12px; }

/* ── Progress ── */
.tc-progress { margin-top: 16px; }
.tc-progress-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.tc-progress-fill { height: 100%; background: #238636; border-radius: 2px; transition: width 0.3s ease; }
.tc-progress-text { font-size: 11px; color: var(--muted, #888); margin-top: 6px; text-align: center; }

/* ── Result ── */
.tc-result {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  border-radius: 6px; font-size: 12px; line-height: 1.4;
}
.tc-result.is-success { background: rgba(35,134,54,0.1); border: 1px solid rgba(35,134,54,0.25); color: #3fb950; }
.tc-result.is-error { background: rgba(210,153,34,0.1); border: 1px solid rgba(210,153,34,0.25); color: #d29922; }
.tc-result-icon { flex-shrink: 0; margin-top: 1px; }
.tc-result-body { flex: 1; }
.tc-result-details-btn {
  background: none; border: none; color: inherit; text-decoration: underline;
  cursor: pointer; font-size: 11px; padding: 0; margin-top: 4px; display: block;
  opacity: 0.8;
}
.tc-result-details-btn:hover { opacity: 1; }

/* Error list */
.tc-error-list {
  margin-top: 8px; border: 1px solid var(--border, #2e2e2e);
  border-radius: 6px; background: var(--bg, #121212);
  max-height: 120px; overflow-y: auto;
}
.tc-error-row {
  display: flex; gap: 8px; padding: 4px 10px; font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.tc-error-row:last-child { border-bottom: none; }
.tc-error-contact { color: var(--muted, #888); font-family: monospace; flex-shrink: 0; min-width: 100px; }
.tc-error-msg { color: #d29922; }
.tc-error-more { padding: 6px 10px; font-size: 11px; color: var(--muted, #888); text-align: center; }

/* ── Footer ── */
.tc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #222;
  background: #141414;
  flex-shrink: 0;
}
.tc-footer-info { flex: 1; min-width: 0; }
.tc-footer-estimate { font-size: 11px; color: var(--muted, #888); }
.tc-footer-actions { display: flex; gap: 8px; flex-shrink: 0; }

.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.tc-btn-cancel { background: transparent; border-color: var(--border, #2e2e2e); color: var(--muted, #888); }
.tc-btn-cancel:hover { color: var(--text, #e4e4e4); background: rgba(255,255,255,0.05); }
.tc-btn-send { background: #238636; color: #fff; border-color: #238636; }
.tc-btn-send:hover:not(:disabled) { background: #2ea043; }
.tc-btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

.tc-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  border-radius: 50%; animation: tc-spin 0.6s linear infinite;
  margin-right: 6px; vertical-align: middle;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 768px) {
  .tc-modal { width: 100%; max-height: 94dvh; }
  .tc-layout { grid-template-columns: 1fr; }
  .tc-preview-panel { min-height: 140px; }
  .tc-header { padding: 12px 16px; }
  .tc-body { padding: 16px; }
  .tc-footer { padding: 10px 16px; flex-direction: column; gap: 8px; }
  .tc-footer-actions { width: 100%; justify-content: flex-end; }
}

/* =============================================================================
   AI GENERATION & TEMPLATES
   ============================================================================= */
.tc-label-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tc-ai-btn,
.tc-template-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: #8b949e;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.tc-ai-btn:hover,
.tc-template-btn:hover {
  color: #e6edf3;
  border-color: #484f58;
}
.tc-ai-btn.is-active {
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.3);
}
.tc-template-btn.is-active {
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.3);
}

.tc-ai-context-panel {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
}

.tc-ai-context-hint {
  font-size: 11px;
  color: #8b949e;
  margin: 0 0 6px;
}

.tc-ai-personalization-toggle {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.tc-ai-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8b949e;
  cursor: pointer;
}

.tc-ai-radio input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.tc-ai-radio:has(input:checked) {
  color: #e6edf3;
}

.tc-ai-context-textarea {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  color: #e6edf3;
  background: #1d2021;
  border: 1px solid #30363d;
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.tc-ai-context-textarea:focus {
  border-color: #58a6ff;
}

.tc-ai-context-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.tc-ai-context-count {
  font-size: 11px;
  color: #484f58;
}

.tc-ai-generate-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: #238636;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.tc-ai-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tc-ai-generate-btn:hover:not(:disabled) {
  background: #2ea043;
}

.tc-ai-error {
  font-size: 11px;
  color: #f85149;
  margin-top: 6px;
}

/* Templates dropdown */
.tc-templates-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-height: 320px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 300;
  margin-top: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tc-templates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #21262d;
  font-size: 12px;
  font-weight: 600;
  color: #e6edf3;
}

.tc-templates-save-toggle {
  font-size: 11px;
  color: #58a6ff;
  background: transparent;
  border: none;
  cursor: pointer;
}
.tc-templates-save-toggle:hover {
  text-decoration: underline;
}

.tc-templates-save-row {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #21262d;
}

.tc-templates-name-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  color: #e6edf3;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  outline: none;
}
.tc-templates-name-input:focus {
  border-color: #58a6ff;
}

.tc-templates-save-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: #238636;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.tc-templates-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tc-templates-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: #8b949e;
  text-align: center;
}

.tc-templates-section-header {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 1px solid #21262d;
  margin-top: 4px;
}

.tc-templates-list {
  overflow-y: auto;
  max-height: 220px;
}

.tc-templates-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #21262d;
}
.tc-templates-item:last-child {
  border-bottom: none;
}

.tc-templates-apply {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #e6edf3;
}
.tc-templates-apply:hover {
  background: rgba(88, 166, 255, 0.06);
}

.tc-templates-item-name {
  font-size: 12px;
  font-weight: 500;
}

.tc-templates-item-preview {
  font-size: 11px;
  color: #8b949e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.tc-templates-delete {
  padding: 6px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #8b949e;
  flex-shrink: 0;
}
.tc-templates-delete:hover {
  color: #f85149;
}

/* ── Template rename button ──────────────────────────────────────────────── */

.tc-templates-rename {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  border-radius: 3px;
  color: #8b949e;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.tc-templates-rename:hover {
  color: #e6edf3;
  background: rgba(255,255,255,0.06);
}

.tc-template-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  margin-left: 4px;
}

.tc-template-html-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  text-transform: uppercase;
  flex-shrink: 0;
}

.tc-template-subj-badge {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
  flex-shrink: 0;
}

/* ── Body mode toggle ─────────────────────────────────────────────────────── */

.tc-mode-toggle {
  display: inline-flex;
  border: 1px solid rgba(240,246,252,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.tc-mode-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.tc-mode-btn + .tc-mode-btn { border-left: 1px solid rgba(240,246,252,0.1); }

.tc-mode-btn.is-active { background: rgba(255,255,255,0.08); color: #e6edf3; }
.tc-mode-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tc-textarea.is-html-mode {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
  line-height: 1.6;
}

.tc-html-preview-details { margin-top: 6px; }

.tc-html-preview-summary {
  font-size: 11px;
  color: #8b949e;
  cursor: pointer;
  user-select: none;
}

.tc-html-preview-summary:hover { color: #e6edf3; }

.tc-html-preview-frame {
  display: block;
  width: 100%;
  min-height: 180px;
  border: 1px solid rgba(240,246,252,0.1);
  border-radius: 5px;
  background: #fff;
  margin-top: 8px;
}
/* =============================================================================
   DataGrid.css - Clean Spreadsheet Styling
   Old-school Java/desktop app aesthetic with whites and greys
   ============================================================================= */

/* =============================================================================
   CSS VARIABLES - Tag colors for row backgrounds
   ============================================================================= */
:root {
  --datagrid-status-bar-height: 41px;
  --datagrid-status-bar-buffer: 4px;
  --tag-none: transparent;
  --tag-green: #17261e;
  --tag-yellow: #26241a;
  --tag-orange: #271f18;
  --tag-red: #291b20;
  --tag-blue: #171f2a;
  --tag-purple: #211929;
  --tag-slate: #1d1f22;
  --group-bg: #17261e;
  --group-accent: #2d7a4a;
  --group-light: #a8d8bc;
}

/* =============================================================================
   TABLE CORE STYLES
   ============================================================================= */
.datagrid-table {
  --datagrid-col-checkbox: 32px;
  --datagrid-col-index: 64px;
  --datagrid-col-source: 41px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  color: #e6edf3;
  font-size: 12px;
  table-layout: fixed;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* scroll-padding-bottom ensures keyboard-focused rows scroll into view
   above the fixed status bar. The datagrid-bottom-spacer below the table
   handles the visible clearance — no padding-bottom needed here. */
.datagrid-table-scroll {
  scroll-padding-bottom: calc(
    var(--datagrid-status-bar-height) + var(--datagrid-status-bar-buffer) +
      env(safe-area-inset-bottom, 0px)
  );
}

.datagrid-bottom-spacer {
  display: block;
  width: 100%;
  height: calc(
    var(--datagrid-status-bar-height) + var(--datagrid-status-bar-buffer) +
      env(safe-area-inset-bottom, 0px)
  );
  flex: 0 0 auto;
}

.datagrid-table,
.datagrid-th,
.datagrid-td {
  box-sizing: border-box;
}

.datagrid-table input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0 auto;
  vertical-align: middle;
}

/* =============================================================================
   FLOATING SEARCH PANEL
   ============================================================================= */
.datagrid-floating-search {
  position: fixed;
  bottom: 43px;
  left: 42px;
  width: 380px;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.datagrid-floating-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  color: #e0e0e0;
  font-size: 11px;
  outline: none;
  transition: border-color 0.15s ease;
}

.datagrid-floating-search-input:focus {
  border-color: #3a3a3a;
}

.datagrid-floating-search-input::placeholder {
  color: #555;
}

.datagrid-search-clear {
  position: static;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.datagrid-search-clear:hover {
  background: #2a2a2a;
  color: #ccc;
}

.datagrid-search-results {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
}

.datagrid-search-results strong {
  color: #888;
  font-weight: 600;
}

.datagrid-thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

.datagrid-thead .datagrid-row {
  background: var(--bg-header);
  border-bottom: 2px solid var(--line);
}

.datagrid-thead .datagrid-th {
  position: sticky;
  top: 0;
  z-index: 20;
}

.datagrid-tbody .datagrid-row:last-child {
  border-bottom: none;
}

.datagrid-tfoot {
  background: #0e0e0e;
  border-top: 2px solid #2a2a2a;
}

/* =============================================================================
   ROW STYLES - Clean alternating rows with subtle tag backgrounds
   ============================================================================= */
.datagrid-row {
  /* Alternating dark rows — system data table feel */
  --datagrid-row-bg: #161819;
  --datagrid-sticky-bg: var(--datagrid-row-bg);
  background: var(--datagrid-row-bg);
  border-bottom: 1px solid #232628;
  transition: background-color 0.12s ease;
}

/* Zebra striping */
.datagrid-tbody .datagrid-row:nth-child(even) {
  --datagrid-row-bg: #161819;
  --datagrid-sticky-bg: #161819;
  background: var(--datagrid-row-bg);
}

.datagrid-tbody .datagrid-row:nth-child(odd) {
  --datagrid-row-bg: #1e2022;
  --datagrid-sticky-bg: #1e2022;
  background: var(--datagrid-row-bg);
}

/* Hover */
.datagrid-tbody .datagrid-row:hover {
  --datagrid-sticky-bg: #262a2b;
  background: var(--datagrid-sticky-bg);
}

/* Tag-colored row backgrounds with left accent border */
.datagrid-tbody .datagrid-row[data-tag="green"] {
  --datagrid-row-bg: var(--tag-green);
  --datagrid-sticky-bg: var(--tag-green);
  background: var(--tag-green);
  box-shadow: inset 2px 0 0 #2d7a4a;
}
.datagrid-tbody .datagrid-row[data-tag="yellow"] {
  --datagrid-row-bg: var(--tag-yellow);
  --datagrid-sticky-bg: var(--tag-yellow);
  background: var(--tag-yellow);
  box-shadow: inset 2px 0 0 #8a7a2f;
}
.datagrid-tbody .datagrid-row[data-tag="orange"] {
  --datagrid-row-bg: var(--tag-orange);
  --datagrid-sticky-bg: var(--tag-orange);
  background: var(--tag-orange);
  box-shadow: inset 2px 0 0 #9a6030;
}
.datagrid-tbody .datagrid-row[data-tag="red"] {
  --datagrid-row-bg: var(--tag-red);
  --datagrid-sticky-bg: var(--tag-red);
  background: var(--tag-red);
  box-shadow: inset 2px 0 0 #943848;
}
.datagrid-tbody .datagrid-row[data-tag="blue"] {
  --datagrid-row-bg: var(--tag-blue);
  --datagrid-sticky-bg: var(--tag-blue);
  background: var(--tag-blue);
  box-shadow: inset 2px 0 0 #3568a0;
}
.datagrid-tbody .datagrid-row[data-tag="purple"] {
  --datagrid-row-bg: var(--tag-purple);
  --datagrid-sticky-bg: var(--tag-purple);
  background: var(--tag-purple);
  box-shadow: inset 2px 0 0 #6b4599;
}
.datagrid-tbody .datagrid-row[data-tag="slate"] {
  --datagrid-row-bg: var(--tag-slate);
  --datagrid-sticky-bg: var(--tag-slate);
  background: var(--tag-slate);
  box-shadow: inset 2px 0 0 #52585f;
}

.datagrid-tbody .datagrid-row[data-tag]:hover {
  filter: brightness(1.03);
}

/* Selected */
.datagrid-row[data-state="selected"] {
  --datagrid-row-bg: #141718;
  --datagrid-sticky-bg: #141718;
  background: #141718 !important;
}

.datagrid-row[data-state="selected"]:hover {
  --datagrid-sticky-bg: #191d1e;
  background: #191d1e !important;
}

/* =============================================================================
   STICKY COLUMNS - First 3 columns fixed when scrolling horizontally
   ============================================================================= */
.datagrid-th.is-sticky,
.datagrid-td.is-sticky {
  position: sticky;
  z-index: 10;
  background-clip: padding-box;
  transition: background-color 0.12s ease;
}

.datagrid-thead .datagrid-th.is-sticky {
  z-index: 30;
}

/* Checkbox column - sticky at 0 */
.datagrid-th.is-sticky-0,
.datagrid-td.is-sticky-0 {
  left: 0;
  width: var(--datagrid-col-checkbox);
  min-width: var(--datagrid-col-checkbox);
  max-width: var(--datagrid-col-checkbox);
  padding-left: 6px;
  padding-right: 6px;
}

/* Index column - sticky at 32px */
.datagrid-th.is-sticky-1,
.datagrid-td.is-sticky-1 {
  left: var(--datagrid-col-checkbox);
  width: var(--datagrid-col-index);
  min-width: var(--datagrid-col-index);
  max-width: var(--datagrid-col-index);
  padding-left: 8px;
  padding-right: 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Source column - sticky at 96px (32+64) */
.datagrid-th.is-sticky-2,
.datagrid-td.is-sticky-2 {
  left: calc(var(--datagrid-col-checkbox) + var(--datagrid-col-index));
  width: var(--datagrid-col-source);
  min-width: var(--datagrid-col-source);
  max-width: var(--datagrid-col-source);
  padding-left: 6px;
  padding-right: 6px;
  background: inherit;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

/* Ensure header sticky cells have correct background */
.datagrid-thead .datagrid-th.is-sticky {
  background: var(--bg-header) !important;
}

/* Ensure ALL header cells have correct background (not just sticky) */
.datagrid-thead .datagrid-th {
  background: var(--bg-header) !important;
}

/* Ensure body sticky cells inherit row background */
.datagrid-tbody .datagrid-row:nth-child(even) .datagrid-td.is-sticky {
  background: var(--datagrid-sticky-bg, var(--datagrid-row-bg));
}

.datagrid-tbody .datagrid-row:nth-child(odd) .datagrid-td.is-sticky {
  background: var(--datagrid-sticky-bg, var(--datagrid-row-bg));
}

.datagrid-tbody .datagrid-row:hover .datagrid-td.is-sticky {
  background: var(--datagrid-sticky-bg, var(--datagrid-row-bg));
}

.datagrid-tbody .datagrid-row[data-state="selected"] .datagrid-td.is-sticky {
  background: var(--datagrid-sticky-bg, var(--datagrid-row-bg)) !important;
}

.datagrid-tbody .datagrid-row[data-state="selected"]:hover .datagrid-td.is-sticky {
  background: var(--datagrid-sticky-bg, var(--datagrid-row-bg)) !important;
}

/* Tag-colored sticky cells */
.datagrid-tbody .datagrid-row[data-tag] .datagrid-td.is-sticky {
  background: var(--datagrid-sticky-bg, var(--datagrid-row-bg));
}

/* Keep the checkbox column locked to the resolved row background. */
.datagrid-tbody .datagrid-row > .datagrid-td.is-sticky-0 {
  background: var(--datagrid-sticky-bg, var(--datagrid-row-bg)) !important;
}

/* =============================================================================
   HEADER CELL STYLES
   ============================================================================= */
.datagrid-th {
  height: 28px;
  padding: 0 12px;
  background: var(--bg-header);
  border-right: none;
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  background-clip: padding-box;
}

.datagrid-th:last-child {
  border-right: none;
}

/* =============================================================================
   DATA CELL STYLES - Clean, consistent 13px font
   ============================================================================= */
.datagrid-td {
  height: 26px;
  padding: 0 12px;
  border-right: none;
  color: #e6edf3;
  font-size: 12px;
  line-height: 1.2;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-clip: padding-box;
}

.datagrid-td:last-child {
  border-right: none;
}

.datagrid-caption {
  margin-top: 16px;
  font-size: 12px;
  color: #808080;
}

/* =============================================================================
   SOURCE ICON
   ============================================================================= */
.datagrid-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.datagrid-source-icon:hover {
  opacity: 1;
}

.datagrid-source-icon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.datagrid-source-icon.is-placeholder {
  color: #999;
  opacity: 0.4;
}

/* =============================================================================
   NAME CELL
   ============================================================================= */
.datagrid-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.datagrid-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #e6edf3;
  font-size: 12px;
}

.datagrid-name-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.datagrid-cell-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: #b8bec3;
  cursor: pointer;
  opacity: 0;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.datagrid-row:hover .datagrid-cell-action {
  opacity: 1;
}

.datagrid-cell-action:hover {
  background: #2a2d2f;
  color: #b8bec3;
}

/* Note icon always visible */
.datagrid-cell-action.is-note {
  color: #d4a520;
  position: relative;
  opacity: 1;
}

.datagrid-cell-action.is-timeline {
  color: #58a6ff;
  position: relative;
  opacity: 1;
}

.datagrid-timeline-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  background: #1f6feb;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   CELL CONTENT STYLES - Consistent colors and sizing
   ============================================================================= */

/* Links - single consistent blue color */
.datagrid-link {
  color: #e6edf3;
  text-decoration: none;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.datagrid-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Empty cells */
.datagrid-empty {
  color: rgba(230, 237, 243, 0.65);
  font-size: 12px;
}

/* Email cell */
.datagrid-email-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.datagrid-email-role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8ea2b8;
}

.datagrid-email-role-icon.is-business {
  color: #7ec6ff;
}

.datagrid-email-role-icon.is-website {
  color: #c4a0f7;
}

.datagrid-email-more {
  flex-shrink: 0;
  padding: 1px 4px;
  border: none;
  border-radius: 2px;
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.datagrid-email-more:hover {
  background: #303436;
}

/* Pro lock cell — shown in email column for free users */
.datagrid-pro-lock-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 26px;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.datagrid-pro-lock-popup {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2122;
  border: 1px solid #2e3032;
  border-radius: 2px;
  padding: 5px 10px;
  white-space: nowrap;
  font-size: 11px;
  color: #aaa;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Rating - smaller, subtler star */
.datagrid-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.datagrid-rating-star {
  color: #d4a520;
  font-size: 11px;
  opacity: 0.9;
}

.datagrid-rating-value {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #e6edf3;
}

/* Reviews */
.datagrid-reviews {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #e6edf3;
  font-size: 12px;
}

/* Phone */
.datagrid-phone {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #e6edf3;
  font-size: 12px;
}

/* Badges for Group and Category - 12px font */
.datagrid-badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 2px;
  background: #2a2d2f;
  color: #e6edf3;
  font-size: 12px;
}

/* =============================================================================
   COLOR PICKER IN BULK EDIT
   ============================================================================= */
.datagrid-bulk-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.datagrid-bulk-label {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.datagrid-bulk-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 8px 0;
}

.datagrid-color-picker {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.datagrid-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #3a3a3a;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.datagrid-color-swatch:hover {
  transform: scale(1.1);
  border-color: #555;
}

.datagrid-color-swatch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.datagrid-color-swatch.is-none { background: #1a1a1a; border-style: dashed; }
.datagrid-color-swatch.is-green { background: #2d7a4a; border-color: #2d7a4a; }
.datagrid-color-swatch.is-yellow { background: #8a7a2f; border-color: #8a7a2f; }
.datagrid-color-swatch.is-orange { background: #9a6030; border-color: #9a6030; }
.datagrid-color-swatch.is-red { background: #943848; border-color: #943848; }
.datagrid-color-swatch.is-blue { background: #3568a0; border-color: #3568a0; }
.datagrid-color-swatch.is-purple { background: #6b4599; border-color: #6b4599; }
.datagrid-color-swatch.is-slate { background: #52585f; border-color: #52585f; }

/* =============================================================================
   STATUS BAR
   ============================================================================= */
.datagrid-status-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 2px;
  height: var(--datagrid-status-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 42px;
  background: #0e0e0e;
  border-top: 1px solid #1e1e1e;
  z-index: 100;
  flex-wrap: nowrap;
}

.datagrid-status-bar.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.datagrid-status-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.datagrid-status-left {
  flex: 1 1 auto;
  min-width: 0;
}

.datagrid-status-center {
  flex: 0 0 auto;
}

.datagrid-status-right {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.datagrid-status-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.datagrid-status-panel.datagrid-status-search {
  flex-shrink: 1;
  min-width: 0;
}

.datagrid-status-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 3px;
  background: #1a1a1a;
  color: #ccc;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.datagrid-status-button:hover {
  background: #1e1e1e;
  color: #fff;
}

.datagrid-status-button.is-active {
  background: #1a1a1a;
  color: #fff;
}

.datagrid-status-label {
  white-space: nowrap;
}

.datagrid-status-toggle-wrap {
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
}

.datagrid-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  background: #1a1a1a;
  border: none;
  color: #ccc;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.datagrid-status-toggle:not(:last-child) {
  border-right: 1px solid #2a2a2a;
}

.datagrid-status-toggle:hover:not(.is-disabled) {
  background: #1e1e1e;
  color: #fff;
}

.datagrid-status-toggle.is-active {
  background: #1a1a1a;
  color: #fff;
}

.datagrid-status-toggle.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.datagrid-status-provider {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.datagrid-status-count {
  font-size: 9px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(139, 148, 158, 0.08);
  color: #8b949e;
  font-weight: 600;
  border: 1px solid #2a2a2a;
  line-height: 1.4;
}

.datagrid-status-toggle:not(.is-active) .datagrid-status-count {
  background: transparent;
  color: #555;
  border-color: #222;
}

.datagrid-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #ccc;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.datagrid-icon-button:hover {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #fff;
}

.datagrid-icon-button.is-active {
  background: #1a1a1a;
  color: #fff;
}

.datagrid-icon-button.is-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.datagrid-bulk-trigger {
  position: relative;
}

.datagrid-bulk-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: 12px;
  border-radius: 2px;
  background: #141414;
  border: 1px solid #2a2a2a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 50;
}

.datagrid-touch-bulk-row .datagrid-td {
  height: auto;
  padding: 0;
  overflow: visible;
  white-space: normal;
  background: #101010;
}

.datagrid-touch-bulk-cell {
  padding: 0 !important;
}

.datagrid-touch-bulk-cell .datagrid-bulk-dropdown {
  position: static;
  width: min(92%, 340px);
  min-width: 0;
  margin: 6px auto;
}

.datagrid-touch-bulk-row.is-up .datagrid-touch-bulk-cell .datagrid-bulk-dropdown {
  margin-top: 8px;
  margin-bottom: 4px;
}

.datagrid-touch-bulk-row.is-down .datagrid-touch-bulk-cell .datagrid-bulk-dropdown {
  margin-top: 4px;
  margin-bottom: 8px;
}

.datagrid-bulk-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #888;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.datagrid-status-select {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

.datagrid-status-select:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.datagrid-status-rows .datagrid-status-select {
  border-radius: 6px;
}

.datagrid-status-input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
}

.datagrid-status-input:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.datagrid-status-apply {
  width: 100%;
  height: 28px;
  border-radius: 2px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.datagrid-status-apply:hover:not(:disabled) {
  background: #3b82f6;
}

.datagrid-status-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.datagrid-status-apply-count {
  opacity: 0.7;
  margin-left: 4px;
}

.datagrid-status-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}

.datagrid-status-selected {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 2px;
  background: transparent;
  border: none;
  color: #60a5fa;
}

.datagrid-status-selected-count {
  font-weight: 600;
  margin-right: 4px;
}

.datagrid-status-muted {
  color: #666;
  font-size: 11px;
}

.datagrid-status-strong {
  color: #999;
  font-weight: 500;
}

.datagrid-status-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  padding: 6px 0;
  border-radius: 2px;
  background: #141414;
  border: 1px solid #2a2a2a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 50;
}

.datagrid-status-dropdown-section {
  padding: 4px 12px;
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

.datagrid-status-dropdown .info-popover-panel {
  top: 22px;
  bottom: auto;
  left: 0;
  right: auto;
  min-width: 200px;
  max-width: 270px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.datagrid-bulk-dropdown .info-popover-panel {
  top: 22px;
  bottom: auto;
  left: 0;
  right: auto;
  min-width: 200px;
  max-width: 270px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.datagrid-status-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 5px 12px;
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.datagrid-status-dropdown-item:hover:not(.is-disabled):not(:disabled) {
  background: #1a1a1a;
}

.datagrid-status-dropdown-item.is-disabled,
.datagrid-status-dropdown-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.datagrid-status-dropdown-item.is-danger {
  color: #ef4444;
}

.datagrid-status-dropdown-item.is-selected {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.datagrid-settings-back {
  align-items: center;
}

.datagrid-settings-chevron {
  flex: 0 0 auto;
  color: #777;
  font-size: 16px;
  line-height: 1;
}

.datagrid-mobile-settings-only {
  display: none;
}

.datagrid-desktop-settings-only {
  display: contents;
}

.datagrid-status-dropdown-divider {
  width: 100%;
  height: 1px;
  background: #2a2a2a;
  margin: 4px 0;
}

.datagrid-status-dropdown-label {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
}

.datagrid-status-dropdown-desc {
  font-size: 11px;
  color: #555;
  margin-top: 1px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.datagrid-dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* ── Twilio bulk-action menu ──────────────────────────────────────────────
   Styled to match the Settings dropdown. The panel only appears while the
   user has contacts selected, so it sits to the right of the bulk-edit
   panel on the status bar. */
.datagrid-status-twilio-bulk {
  position: relative;
}

.datagrid-status-twilio-bulk .datagrid-status-dropdown {
  min-width: 320px;
}

.datagrid-status-twilio-bulk .datagrid-status-provider {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.datagrid-twilio-bulk-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px 2px;
}

.datagrid-twilio-bulk-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
}

.datagrid-twilio-bulk-select {
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  color: #ccc;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}

.datagrid-twilio-bulk-select:focus {
  outline: none;
  border-color: #3a3a3a;
  color: #fff;
}

.datagrid-dropdown-icon svg,
.datagrid-dropdown-icon img {
  width: 12px;
  height: 12px;
}

.datagrid-dropdown-content {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.datagrid-pro-tag {
  font-family: "Fira Code", "Fira Code Retina", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  color: #f6d365;
  background: rgba(246, 211, 101, 0.15);
  border: 1px solid rgba(246, 211, 101, 0.5);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}

.datagrid-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #2a2a2a;
  border-top-color: #60a5fa;
  border-radius: 999px;
  animation: datagrid-spin 0.7s linear infinite;
}

.datagrid-status-dropdown-footer {
  padding: 8px 14px;
}

.datagrid-pro-lock-icon {
  color: #f6d365;
}

/* View mode select in status bar */
.datagrid-view-select {
  height: 22px;
  max-width: 136px;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #ccc;
  font-size: 11px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23888' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  text-overflow: ellipsis;
}
.datagrid-view-select:hover {
  background-color: #1e1e1e;
  border-color: #3a3a3a;
  color: #fff;
}
.datagrid-view-select:focus {
  border-color: #444;
  outline: none;
}

.datagrid-status-bar button,
.datagrid-status-bar select,
.datagrid-status-bar input {
  outline: none !important;
}

.datagrid-status-bar button:focus,
.datagrid-status-bar button:focus-visible,
.datagrid-status-bar select:focus,
.datagrid-status-bar select:focus-visible,
.datagrid-status-bar input:focus,
.datagrid-status-bar input:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(110, 118, 129, 0.2) !important;
  border-color: var(--border-hover) !important;
}
.datagrid-view-select option {
  background: #1a1a1a;
  color: #cfcfcf;
}

/* Group header rows for grouped view modes */
.datagrid-group-header-row {
  background: #161819;
}
.datagrid-group-header-row .datagrid-td {
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.datagrid-group-header-row .datagrid-td.is-sticky {
  background: #161819;
}
.datagrid-group-header-cell.datagrid-td {
  overflow: visible;
}
.datagrid-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.datagrid-group-label {
  letter-spacing: 0.01em;
  color: var(--group-light);
  font-size: 11px;
  font-weight: 500;
}
.datagrid-group-count {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  font-size: 9px;
  color: var(--group-light);
}

.datagrid-settings-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  color: #ccc;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.datagrid-settings-button:hover {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #fff;
}

.datagrid-settings-button.is-active {
  background: #1a1a1a;
  color: #fff;
}

.datagrid-settings-button .datagrid-status-label {
  font-size: 11px;
}

/* Mobile compact page display (e.g., "1/5") */
.datagrid-status-page-mobile {
  display: none;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  color: #888;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Desktop: show page list, hide mobile compact */
.datagrid-status-page-list {
  display: flex;
  align-items: center;
  gap: 3px;
}

.datagrid-page-label {
  display: none;
}

.datagrid-status-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.datagrid-page-button {
  min-width: 22px !important;
  width: auto !important;
  height: 22px !important;
  padding: 0 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.datagrid-page-button:hover:not(:disabled) {
  background: #1e1e1e !important;
  border-color: var(--border-hover) !important;
  color: var(--text) !important;
}

.datagrid-page-button.is-active {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: var(--text) !important;
}

.datagrid-page-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.datagrid-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* =============================================================================
   NOTE MODAL
   ============================================================================= */
.datagrid-note-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  line-height: 1.5;
  padding: 12px;
  box-sizing: border-box;
}

.datagrid-note-modal {
  --note-hot: #ff3f2b;
  --note-cold: #6f6f6f;
  width: min(97vw, 1180px);
  max-width: 100%;
  height: auto;
  max-height: min(89vh, 860px);
  max-height: min(89dvh, 860px);
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  overflow: hidden;
  overflow-x: hidden;
}

.datagrid-note-mono-token {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.datagrid-note-modal-header {
  display: flex;
  padding: 8px 12px;
  background: #222222;
  border-bottom: 1px solid #333;
}

.datagrid-note-modal-header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.datagrid-note-modal-header-title-row h3 {
  margin: 0;
  font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f7efe7;
  flex-shrink: 0;
}

.datagrid-note-modal-header-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid #34312d;
  background: #1b1a18;
  color: #d5d0cb;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.datagrid-note-modal-header-chip.is-highlight {
  border-color: #403a34;
  background: #201d1a;
  color: #e4ddd6;
}

.datagrid-note-open-lead-engine-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--link);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.datagrid-note-open-lead-engine-link:hover {
  background: rgba(88, 166, 255, 0.1);
  color: var(--link-hover);
  text-decoration: underline;
}

.datagrid-note-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  background: #131313;
  overflow: hidden;
  overflow-x: hidden;
}

.datagrid-note-sidebar {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid #2a2a2a;
  background: #141414;
}

.datagrid-note-sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #2a2a2a;
  border-radius: 0;
  background: #1a1a1a;
  box-shadow: none;
}

.datagrid-note-sidebar-card-listing .datagrid-note-listing {
  align-items: flex-start;
}

.datagrid-note-sidebar-card-listing .datagrid-note-thumb {
  width: 92px;
  height: 92px;
  border-radius: 0;
}

.datagrid-note-sidebar-card-listing .datagrid-note-thumb-stack {
  gap: 6px;
}

.datagrid-note-sidebar-card-listing .datagrid-note-listing-text {
  display: block;
}

.datagrid-note-sidebar-card-listing .datagrid-note-listing-primary {
  gap: 6px;
}

.datagrid-note-sidebar-card-listing .datagrid-note-title-row {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 6px 8px;
  row-gap: 6px;
}

.datagrid-note-sidebar-card-listing .datagrid-note-title-row h3 {
  flex: 1 1 180px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.22;
}

.datagrid-note-sidebar-card-listing .datagrid-note-category {
  width: fit-content;
  margin-left: 0;
  justify-self: start;
  align-self: flex-start;
}

.datagrid-note-sidebar-card-listing .datagrid-note-listing-address {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

.datagrid-note-sidebar-card-listing .datagrid-note-listing-meta {
  margin-top: 12px;
  padding-left: 0;
  border-left: none;
}

.datagrid-note-sidebar-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7d8590;
}

.datagrid-note-sidebar-section-title svg {
  flex-shrink: 0;
}

.datagrid-note-sidebar-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datagrid-note-sidebar-metric {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.datagrid-note-sidebar-metric strong,
.datagrid-note-sidebar-metric strong .datagrid-note-mono-token {
  font-size: 12px;
  font-weight: 600;
  color: #e6edf3;
  line-height: 1.4;
}

.datagrid-note-sidebar-metric span {
  font-size: 11px;
  color: #7d8590;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.datagrid-note-sidebar-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.datagrid-note-sidebar-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.datagrid-note-sidebar-field span {
  font-size: 11px;
  color: #7d8590;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.datagrid-note-sidebar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.datagrid-note-sidebar-label svg {
  flex-shrink: 0;
}

.datagrid-note-sidebar-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datagrid-note-sidebar-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8b949e;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.datagrid-note-sidebar-detail-row svg {
  flex-shrink: 0;
  color: #7d8590;
}

.datagrid-note-sidebar-detail-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-sidebar-field strong {
  color: #e6edf3;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.datagrid-note-sidebar-select {
  font-size: 11px;
  font-family: monospace;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 2px 4px;
  background: rgba(255,255,255,0.06);
  color: #ddd6d0;
  max-width: 160px;
  cursor: pointer;
}
.datagrid-note-sidebar-select:disabled { opacity: 0.5; cursor: default; }

.datagrid-note-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #111111;
  overflow-x: hidden;
}

.datagrid-note-main-pro-row {
  border-bottom: 1px solid #282420;
  background: rgba(20, 19, 18, 0.92);
}

.datagrid-note-main-pro-row .datagrid-note-pro-toolbar {
  padding: 10px 14px;
  border-bottom: none;
  background: transparent;
}

.datagrid-note-listing {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.datagrid-note-thumb-stack {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.datagrid-note-thumb {
  width: 78px;
  height: 78px;
  border: 1px solid #333;
  background: #131313;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #777;
  font-size: 20px;
  font-weight: 600;
  border-radius: 2px;
}

.datagrid-note-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.datagrid-note-thumb-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--link);
  text-decoration: none;
}

.datagrid-note-thumb-map-link:hover {
  color: var(--link-hover);
}

.datagrid-note-listing-text {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 3px 12px;
  align-items: start;
}

.datagrid-note-listing-primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.datagrid-note-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.datagrid-note-title-row h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.datagrid-note-listing-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e6edf3;
  line-height: 1.25;
}

.datagrid-note-category {
  font-size: 11px;
  padding: 1px 6px;
  margin-left: auto;
  background: transparent;
  color: #7d8590;
  border: 1px solid #2a2a2a;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 400;
}

.datagrid-note-listing-text p {
  margin: 0;
  font-size: 11px;
  color: #8b949e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-primary-website {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  color: #8b949e;
}

.datagrid-note-primary-website svg {
  color: #7d8590;
}

.datagrid-note-primary-website a {
  color: var(--link);
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-primary-website a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.datagrid-note-listing-meta {
  margin-top: 1px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 0;
  border-left: none;
  min-width: 0;
}

.datagrid-note-listing-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #8b949e;
  min-width: 0;
  line-height: 1.35;
}

.datagrid-note-listing-meta-row svg {
  color: #7d8590;
}

.datagrid-note-listing-meta-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-listing-meta-row img {
  width: 10px;
  height: 10px;
}

.datagrid-note-listing-meta-row a {
  color: var(--link);
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-listing-meta-row a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.datagrid-note-business-chips {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 1px;
}

.datagrid-note-business-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 0;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #8b949e;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.datagrid-note-business-chip.is-license.is-good {
  color: #8ed9b0;
  border-color: rgba(82, 190, 123, 0.45);
  background: rgba(72, 160, 106, 0.16);
}

.datagrid-note-business-chip.is-license.is-bad,
.datagrid-note-business-chip.is-expired {
  color: #ffb0a5;
  border-color: rgba(255, 104, 86, 0.5);
  background: rgba(190, 78, 63, 0.18);
}

.datagrid-note-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  background: #252525;
  color: #999;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}

.datagrid-note-close:hover {
  background: #333;
  color: #e0e0e0;
}

.datagrid-note-list {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 10px 14px 52px 14px;
  background: #1e1e1e;
  position: relative;
}

.datagrid-note-list.is-timeline {
  padding: 0;
}

.datagrid-note-list.is-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.datagrid-note-momentum-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.datagrid-note-momentum-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.datagrid-note-momentum-label {
  color: #777;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.datagrid-note-momentum-score {
  color: #888;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.datagrid-note-momentum-score.is-positive {
  color: #5ad07f;
}

.datagrid-note-momentum-score.is-negative {
  color: #ff6b5f;
}

.datagrid-note-momentum-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.datagrid-note-momentum-chart {
  display: block;
  width: 100%;
  min-width: 400px;
  height: auto;
}

.datagrid-note-momentum-grid-line {
  fill: none;
  stroke: #262626;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.datagrid-note-momentum-grid-line.is-zero {
  stroke: #333;
}

.datagrid-note-momentum-axis-label {
  fill: #555;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.datagrid-note-momentum-axis-label.is-zero {
  fill: #777;
}

.datagrid-note-momentum-segment {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.datagrid-note-momentum-segment.is-neutral {
  stroke: #555;
}

.datagrid-note-momentum-segment.is-positive {
  stroke: #3fb950;
}

.datagrid-note-momentum-segment.is-negative {
  stroke: #f85149;
}

.datagrid-note-momentum-segment.is-pending {
  stroke: #444;
  stroke-dasharray: 5 4;
}

.datagrid-note-momentum-crosshair {
  stroke: #333;
  stroke-width: 1;
  stroke-dasharray: 2 2;
  shape-rendering: crispEdges;
}

.datagrid-note-momentum-point {
  transition: r 0.1s ease;
  pointer-events: none;
}

.datagrid-note-momentum-point.is-pending {
  opacity: 0.55;
}

.datagrid-note-momentum-popup-pointer {
  stroke: #000;
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.datagrid-note-momentum-popup-fo {
  overflow: visible;
}

.datagrid-note-momentum-popup {
  width: 148px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 7px;
  border: 1px solid #181818;
  border-radius: 0;
  background-color: #dfdfdf;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  color: #000;
  font-size: 9px;
  line-height: 1.1;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.datagrid-note-momentum-popup-grid {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 1px;
  min-width: 0;
}

.datagrid-note-momentum-popup-grid span {
  min-width: 0;
  color: #000;
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datagrid-note-momentum-popup-value {
  text-align: right;
}

.datagrid-note-momentum-popup-value.is-positive,
.datagrid-note-momentum-popup-value.is-negative {
  font-weight: 700;
}

.datagrid-note-momentum-popup-value.is-positive {
  color: #2ea043;
}

.datagrid-note-momentum-popup-value.is-negative {
  color: #f85149;
}

.datagrid-note-momentum-popup-link {
  display: block;
  min-width: 0;
  color: #58a6ff;
  font-size: 9px;
  line-height: 1.1;
  text-align: right;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datagrid-note-momentum-popup-link.is-event-id {
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.datagrid-note-momentum-popup-event-id {
  grid-column: 1 / -1;
}

.datagrid-note-momentum-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px;
  min-height: 18px;
}

.datagrid-note-momentum-info-title {
  color: #999;
  font-size: 11px;
  font-weight: 600;
}

.datagrid-note-momentum-info-meta {
  color: #555;
  font-size: 11px;
}

.datagrid-note-empty {
  text-align: center;
  padding: 48px 16px;
  color: #555;
  font-size: 12px;
}

.datagrid-note-empty.is-timeline-empty {
  padding: 26px 10px 20px;
  color: #7c8796;
}

.datagrid-note-empty.is-welcome {
  text-align: left;
  padding: 40px 28px;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
}

.datagrid-note-empty.is-welcome.is-centered {
  text-align: center;
  align-items: center;
}

.datagrid-welcome-title {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.datagrid-welcome-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.55;
  margin: 0 0 14px;
}

.datagrid-welcome-link {
  color: var(--link);
  text-decoration: none;
}

.datagrid-welcome-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.datagrid-welcome-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.datagrid-welcome-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  color: #666;
  line-height: 1.45;
}

.datagrid-welcome-step > svg {
  color: #555;
  flex-shrink: 0;
  margin-top: 1px;
}

.datagrid-welcome-step strong {
  display: block;
  color: #777;
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 1px;
}

.datagrid-welcome-step span {
  color: #666;
}

.datagrid-welcome-step.is-clickable {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 2px;
  text-align: left;
  transition: background 0.15s ease;
}

.datagrid-welcome-step.is-clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}

.datagrid-welcome-step.is-clickable:hover strong {
  color: #aaa;
}

/* =============================================================================
   PRO UPGRADE PANEL — shown in timeline empty state for free users
   ============================================================================= */
.datagrid-pro-upgrade-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px 24px;
  max-width: 420px;
  margin: 0 auto;
}

.datagrid-pro-upgrade-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.datagrid-pro-upgrade-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f6d365;
  background: rgba(246, 211, 101, 0.1);
  border: 1px solid rgba(246, 211, 101, 0.25);
  border-radius: 2px;
  padding: 2px 6px;
  display: inline-block;
  align-self: flex-start;
}

.datagrid-pro-upgrade-title {
  font-size: 14px;
  font-weight: 600;
  color: #ccc;
  margin: 0;
  line-height: 1.3;
}

.datagrid-pro-upgrade-desc {
  font-size: 11px;
  color: #666;
  line-height: 1.55;
  margin: 0;
}

.datagrid-pro-upgrade-features {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.datagrid-pro-upgrade-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #666;
  line-height: 1.4;
}

.datagrid-pro-upgrade-feature-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(246, 211, 101, 0.5);
  flex-shrink: 0;
  margin-top: 4px;
}

.datagrid-pro-upgrade-feature strong {
  color: #888;
  font-weight: 600;
}

.datagrid-pro-upgrade-screenshots {
  display: flex;
  gap: 8px;
}

.datagrid-pro-upgrade-screenshot {
  flex: 1;
  aspect-ratio: 16/9;
  border-radius: 2px;
  border: 1px solid #2a2a2a;
  background: #161819;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 11px;
  text-align: center;
}

.datagrid-pro-upgrade-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.datagrid-pro-upgrade-screenshot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #333;
  font-size: 11px;
}

.datagrid-pro-upgrade-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datagrid-pro-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: 2px;
  background: rgba(246, 211, 101, 0.12);
  border: 1px solid rgba(246, 211, 101, 0.35);
  color: #f6d365;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  align-self: flex-start;
}

.datagrid-pro-upgrade-btn:hover {
  background: rgba(246, 211, 101, 0.18);
  border-color: rgba(246, 211, 101, 0.5);
  color: #f6d365;
}

.datagrid-note-email-arrow {
  color: #7d8590;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.datagrid-note-campaign-name {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid #3f3f3f;
  background: #262626;
  color: #c8c8c8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.datagrid-note-timeline-card .datagrid-note-campaign-name {
  margin-bottom: 6px;
}

.datagrid-note-heat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  border: 1px solid;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  background: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.datagrid-note-heat-badge:hover {
  opacity: 0.75;
}

.datagrid-note-heat-badge.is-sprite {
  --heat-chip-color: #6b7280;
  --heat-chip-border: #9ca3af;
  --heat-chip-bg: #f3f4f6;
  width: auto;
  min-width: 0;
  justify-content: flex-start;
  gap: 3px;
  padding: 2px 5px;
  border: 0.75px solid var(--heat-chip-border);
  border-radius: 2px;
  height: 16px;
  background: var(--heat-chip-bg);
}

.datagrid-note-heat-sprite-icon {
  width: 8px;
  height: auto;
  display: block;
  object-fit: contain;
}

.datagrid-note-heat-sprite-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  text-transform: lowercase;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--heat-chip-color);
}

.datagrid-note-heat-badge.is-hot.is-sprite {
  --heat-chip-color: #f3a8b5;
  --heat-chip-border: #f5bcc6;
  --heat-chip-bg: #5f1f2b;
}

.datagrid-note-heat-badge.is-hot .datagrid-note-heat-sprite-label {
  color: var(--heat-chip-color);
}

.datagrid-note-heat-badge.is-cold.is-sprite {
  --heat-chip-color: #a7c7ff;
  --heat-chip-border: #bfd6ff;
  --heat-chip-bg: #1f3f75;
}

.datagrid-note-heat-badge.is-cold .datagrid-note-heat-sprite-label {
  color: var(--heat-chip-color);
}

.datagrid-note-heat-badge.is-compact {
  background: none;
  border-color: transparent;
  padding: 0;
  width: auto;
  min-width: 0;
  height: auto;
}

.datagrid-note-heat-badge.is-compact.is-sprite {
  background: none;
  border-color: transparent;
  padding: 0;
  gap: 0;
}

.datagrid-note-event-attachments {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0;
  min-width: 0;
  font-size: 11px;
  color: #9fa6b2;
}

.datagrid-note-event-attachments-label {
  flex-shrink: 0;
  color: #8791a1;
}

.datagrid-note-event-attachments-list {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c5ccd8;
}

/* Add event trigger row */
.datagrid-note-editor {
  padding: 8px 12px;
  background: #161616;
  border-top: 1px solid #333;
}

.datagrid-note-attachment-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 1px dashed #555;
  border-radius: 7px;
  background: #232323;
  font-size: 11px;
  color: #d0d0d0;
}

.datagrid-note-attachment-context button {
  border: 1px solid #5a5a5a;
  background: #2a2a2a;
  color: #d6d6d6;
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
}

.datagrid-note-attachment-context button:hover {
  border-color: #747474;
  background: #3a3a3a;
}

.datagrid-note-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.datagrid-note-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 100px;
}

.datagrid-note-field span {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.datagrid-note-field select,
.datagrid-note-field input {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12px;
  border-radius: 6px;
}

.datagrid-note-field select:focus,
.datagrid-note-field input:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.datagrid-note-editor textarea {
  width: 100%;
  min-height: 64px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  border-radius: 6px;
}

.datagrid-note-editor textarea:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.datagrid-note-editor textarea::placeholder {
  color: var(--muted);
}

.datagrid-note-hidden-file-input {
  display: none !important;
}

.datagrid-note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.datagrid-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid #333;
  background: #252525;
  color: #ccc;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.1s ease;
}

.datagrid-note-btn:hover {
  background: #333;
}

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

.datagrid-note-btn.is-primary {
  background: #1f7d3a;
  border-color: rgba(88, 198, 118, 0.5);
  color: #fff;
}

.datagrid-note-btn.is-primary:hover:not(:disabled) {
  background: #259748;
}

.datagrid-note-btn kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 1px 4px;
  background: #181818;
  border: 1px solid #333;
  color: #999;
}

.datagrid-note-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #58a6ff;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: none;
}

.datagrid-note-view-toggle:hover {
  color: #79c0ff;
  text-decoration: none;
}

/* =============================================================================
   TIMELINE VIEW
   ============================================================================= */

/* ── Pro toolbar — sub-action pills ── */
.datagrid-note-pro-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-bottom: 1px solid #282828;
  background: #1a1a1a;
  flex-wrap: wrap;
}

.datagrid-pro-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #cfcfcf;
  background: rgba(120, 120, 120, 0.15);
  cursor: pointer;
  white-space: nowrap;
  height: 20px;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.datagrid-pro-pill:hover {
  background: rgba(120, 120, 120, 0.28);
  border-color: #777;
}

.datagrid-pro-pill:active {
  background: rgba(120, 120, 120, 0.22);
}

.datagrid-pro-pill svg {
  flex-shrink: 0;
  color: var(--pill-color, #999);
}

.datagrid-pro-pill.is-active {
  background: rgba(120, 120, 120, 0.32);
  border-color: #888;
  color: #fff;
}

.datagrid-pro-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.datagrid-pro-toolbar-spacer {
  flex: 1;
  min-width: 6px;
}

/* ── Desktop: inline, Mobile: hidden ── */

.datagrid-pro-toolbar-mobile-trigger {
  gap: 4px;
}

.datagrid-pro-toolbar-mobile-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #1e1e1e;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  min-width: 160px;
  margin-top: 4px;
}

.datagrid-pro-toolbar-mobile-dropdown.is-right {
  left: auto;
  right: 0;
}

.datagrid-pro-toolbar-mobile-dropdown .datagrid-pro-pill {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}

.datagrid-note-timeline {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 420px;
  background: #1e1e1e;
}

.datagrid-note-timeline-track {
  position: relative;
  padding: 24px 14px 24px;
  background: #1e1e1e;
}

.datagrid-note-timeline-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid #353535;
  background: rgba(24, 24, 24, 0.92);
  white-space: nowrap;
}

.datagrid-note-timeline-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
}

.datagrid-note-timeline-stat strong {
  font-size: 11px;
  color: #e0e0e0;
}

.datagrid-note-timeline-stat-cost {
  border-color: #3a3020;
  background: rgba(28, 22, 12, 0.92);
}

.datagrid-note-timeline-stat-cost .datagrid-note-timeline-stat-label {
  color: #a89060;
}

.datagrid-note-timeline-stat-cost strong {
  color: #d4a855;
}

.datagrid-note-timeline-scenarios {
  position: absolute;
  top: 40px;
  left: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.datagrid-note-timeline-scenarios-hint {
  font-size: 11px;
  color: #969696;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  width: 100%;
  text-align: center;
}

.datagrid-note-timeline-scenario-btn {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #3d3d3d;
  border-radius: 2px;
  background: #1f1f1f;
  color: #b9b9b9;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.datagrid-note-timeline-scenario-btn:hover {
  border-color: #5a5a5a;
  color: #e0e0e0;
}

.datagrid-note-timeline-scenario-btn.is-active {
  border-color: #5a5a5a;
  background: rgba(78, 78, 78, 0.32);
  color: #dfdfdf;
}

.datagrid-note-timeline-origin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #888;
  font-size: 11px;
  margin-bottom: 8px;
}

.datagrid-note-timeline-origin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.datagrid-note-timeline-origin time {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.datagrid-note-timeline-gap {
  position: relative;
  min-height: 16px;
  display: grid;
  grid-template-columns: 1fr 82px 1fr;
  transition: height 0.2s ease;
}

.datagrid-note-timeline-gap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(150, 150, 150, 0.35);
  transition: background 0.15s ease;
}

.datagrid-note-timeline-gap:hover::before {
  background: rgba(150, 150, 150, 0.5);
}

.datagrid-note-timeline-gap-line {
  display: none;
}

.datagrid-note-timeline-gap-label {
  position: absolute;
  top: 50%;
  left: calc(50% + 16px);
  transform: translateY(-50%);
  font-size: 11px;
  color: #bdbdbd;
  padding: 0 6px;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.2);
  border: 1px solid #5a5a5a;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  height: 20px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  line-height: 1;
}

.datagrid-note-timeline-insert-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.datagrid-note-timeline-gap:hover .datagrid-note-timeline-insert-tick {
  opacity: 1;
}

.datagrid-note-timeline-insert-tick-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px dashed #555;
  background: #1e1e1e;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.datagrid-note-timeline-insert-tick:hover .datagrid-note-timeline-insert-tick-dot {
  border-color: #888;
  background: #2a2a2a;
}

.datagrid-note-timeline-insert-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  margin: 4px auto;
  max-width: 360px;
  background: #1a1a1a;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
}

.datagrid-note-timeline-insert-form-header {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.datagrid-note-timeline-insert-form-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 2px;
}

.datagrid-note-timeline-event-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 82px 1fr;
  align-items: center;
  margin: 0;
  padding: 7px 0;
}

.datagrid-note-timeline-event-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(150, 150, 150, 0.35);
  transition: background 0.15s ease;
}

.datagrid-note-timeline-event-row:has(.datagrid-note-timeline-card:hover, .datagrid-note-timeline-core:hover, .datagrid-note-timeline-dot:hover)::before {
  background: rgba(150, 150, 150, 0.5);
}

.datagrid-note-timeline-col {
  min-width: 0;
  display: flex;
}

.datagrid-note-timeline-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.datagrid-note-timeline-entry.is-left {
  justify-content: flex-end;
}

.datagrid-note-timeline-entry.is-right {
  justify-content: flex-start;
}

.datagrid-note-timeline-outside-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  padding-right: 12px;
  max-width: calc(100% - 10px);
  min-width: 0;
  color: #767676;
  font-size: 11px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.datagrid-note-timeline-outside-meta-label {
  color: #5f5f5f;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.datagrid-note-timeline-outside-meta time {
  color: #8b8b8b;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-left {
  justify-content: flex-end;
}

.datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-right {
  justify-content: flex-start;
}

/* Block all pointer events on the row, re-enable only on the card side and core */
.datagrid-note-timeline-event-row {
  pointer-events: none;
}
.datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-left,
.datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-right,
.datagrid-note-timeline-event-row .datagrid-note-timeline-core {
  pointer-events: auto;
}

.datagrid-note-timeline-core {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.datagrid-note-timeline-core::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(150, 150, 150, 0.35);
  z-index: 0;
  transition: background 0.15s ease;
}

.datagrid-note-timeline-core:hover::before {
  background: rgba(150, 150, 150, 0.5);
}

.datagrid-note-timeline-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #9f9f9f;
  border: none;
  box-shadow: none;
  z-index: 2;
  transition: background 0.15s ease;
}

.datagrid-note-timeline-core:hover .datagrid-note-timeline-dot {
  background: #bdbdbd;
}

.datagrid-note-timeline-branch {
  position: absolute;
  width: 18px;
  height: 1px;
  border-radius: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  background: rgba(150, 150, 150, 0.35);
}

.datagrid-note-timeline-branch.is-left {
  right: 50%;
}

.datagrid-note-timeline-branch.is-right {
  left: 50%;
}

.datagrid-note-timeline-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: left;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.12);
  padding: 8px 0 6px 0;
  color: #f0f0f0;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  user-select: none;
  -webkit-user-select: none;
}

.datagrid-note-timeline-card.is-expanded {
  user-select: text;
  -webkit-user-select: text;
}

.datagrid-note-timeline-card:hover {
  border-color: #505050;
  background: rgba(115, 115, 115, 0.18);
}

.datagrid-note-timeline-card-edit-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  background: none;
  border: none;
  color: #555;
  font-size: 11px;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease;
}

.datagrid-note-timeline-card:hover .datagrid-note-timeline-card-edit-btn {
  opacity: 1;
}

.datagrid-note-timeline-card-edit-btn:hover {
  color: #aaa;
}

.datagrid-note-timeline-card.is-editing .datagrid-note-timeline-card-edit-btn {
  opacity: 1;
  color: #7aafff;
}

.datagrid-note-timeline-card.is-editing {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  border-color: #3a3a3a;
}

.datagrid-note-timeline-card.is-editing .datagrid-note-timeline-card-detail {
  outline: none;
  white-space: pre-wrap;
  min-height: 24px;
  padding: 6px 12px;
  border-radius: 2px;
  background: #1a1a1a;
  border: 1px solid #5a5a5a;
  cursor: text;
}

.datagrid-note-timeline-card-wrap {
  width: 360px;
  max-width: calc(100% - 20px);
}

.datagrid-note-timeline-card.is-manual-note {
  border-color: #5a4a1a;
  background: #252015;
}

.datagrid-note-timeline-card.is-manual-note::before {
  display: none;
}

.datagrid-note-timeline-card.is-manual-note > * {
  position: relative;
  z-index: 1;
}

.datagrid-note-timeline-card.is-manual-note .datagrid-note-timeline-card-edit-btn {
  position: absolute;
}

.datagrid-note-timeline-card.is-manual-note .datagrid-note-timeline-note-label {
  border-radius: 2px;
  font-size: 11px;
  margin-left: 8px;
  padding: 2px 6px;
}

.datagrid-note-timeline-card.is-manual-note .datagrid-note-inline-add-note {
  margin-top: 3px;
}

.datagrid-note-timeline-card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  min-height: 22px;
  max-height: 22px;
  overflow: hidden;
  white-space: nowrap;
  background: transparent;
  border-top: none;
}

.datagrid-note-timeline-card.is-manual-note .datagrid-note-timeline-card-head {
  background: none;
}

.datagrid-note-timeline-card-head-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.datagrid-note-timeline-card-head-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  flex-shrink: 0;
}

.datagrid-note-timeline-card-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  height: 20px;
  padding: 0 6px;
  border: 1px solid #c9a7ff;
  border-radius: 2px;
  background: rgba(201, 167, 255, 0.3);
  line-height: 1;
  letter-spacing: 0.02em;
}

.datagrid-note-timeline-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 13px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.datagrid-note-timeline-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.datagrid-note-timeline-note-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.datagrid-note-timeline-note-label {
  width: 100%;
  margin: 0 0 0 10px;
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  min-height: 18px;
  padding: 3px 7px;
  text-align: left;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #f8e2ac;
  font-size: 12px;
  line-height: 1.25;
  transition: color 0.12s ease;
}

.datagrid-note-timeline-note-label:hover {
  color: #ffe8b8;
}

.datagrid-note-timeline-note-label svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.datagrid-note-timeline-note-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-timeline-note-label.is-expanded {
  border-radius: 8px;
}

.datagrid-note-timeline-note-label.is-expanded .datagrid-note-timeline-note-text {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
}

.datagrid-note-timeline-note-delete {
  flex-shrink: 0;
  margin-top: 1px;
  padding-right: 15px;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: #8f8f8f;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.1s ease;
}

.datagrid-note-timeline-note-delete:hover {
  color: #ff7a6a;
}

.datagrid-note-timeline-party {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.datagrid-note-email-participants {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin: 4px 10px;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 3px;
  border: none;
  background: #1e1e1e;
  color: #b0b0b0;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1;
}

.datagrid-note-email-party {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.datagrid-note-email-party span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-email-party.is-business {
  color: #cfcfcf;
}

.datagrid-note-timeline-contact-marker {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: #606060;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  align-self: center;
}

.datagrid-note-timeline-marker-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 4px;
}

.datagrid-note-timeline-card-subject {
  margin: 0px 15px 10px 15px;
  font-size: 12px;
  color: #a3a3a3;
}

.datagrid-note-timeline-card-subject.is-note {
  color: #dccfae;
}

.datagrid-note-timeline-card-detail {
  padding: 5px 13px 8px 13px;
  border-top: 1px solid #2f2f2f;
  font-size: 12px;
  color: #ccc;
  line-height: 1.42;
  white-space: pre-wrap;
}

.datagrid-note-ideal-timeline {
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px dashed #3a3a3a;
}

.datagrid-note-ideal-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.datagrid-note-ideal-header h5 {
  margin: 0;
  font-size: 12px;
  color: #d9d9d9;
  font-weight: 600;
}

.datagrid-note-ideal-outcome {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0.06em;
  border: 1px solid #4a4a4a;
  color: #c8c8c8;
}

.datagrid-note-ideal-outcome.is-won {
  border-color: rgba(76, 180, 123, 0.45);
  color: #8fe0b1;
  background: rgba(59, 139, 95, 0.2);
}

.datagrid-note-ideal-outcome.is-stale {
  border-color: rgba(122, 122, 122, 0.5);
  color: #c2c2c2;
  background: rgba(88, 88, 88, 0.24);
}

.datagrid-note-ideal-outcome.is-mixed {
  border-color: rgba(202, 173, 104, 0.45);
  color: #dfc38d;
  background: rgba(120, 95, 52, 0.24);
}

.datagrid-note-ideal-summary {
  margin: 5px 0 10px;
  color: #a0a0a0;
  font-size: 11px;
}

.datagrid-note-ideal-track {
  position: relative;
  padding-left: 32px;
}

.datagrid-note-ideal-track::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(138, 138, 138, 0.7) 0%, rgba(110, 110, 110, 0.25) 100%);
}

.datagrid-note-ideal-gap {
  position: relative;
}

.datagrid-note-ideal-gap-line {
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(120, 120, 120, 0.48);
}

.datagrid-note-ideal-gap-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: #9e9e9e;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid #454545;
  background: rgba(30, 30, 30, 0.92);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.datagrid-note-ideal-event {
  position: relative;
  margin: 8px 0;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid #3f3f3f;
  background: rgba(48, 48, 48, 0.26);
}

.datagrid-note-ideal-event::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #a2a2a2;
  box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.23);
}

.datagrid-note-ideal-event-time {
  font-size: 9px;
  color: #a2a2a2;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.datagrid-note-ideal-event-title {
  margin-top: 2px;
  font-size: 11px;
  color: #dcdcdc;
  font-weight: 600;
}

.datagrid-note-ideal-event-desc {
  margin-top: 3px;
  font-size: 11px;
  color: #adadad;
  line-height: 1.4;
}

.datagrid-note-timeline-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 10px;
  color: #5b9fd6;
  font-size: 11px;
  font-weight: 600;
}

.datagrid-note-timeline-now time {
  font-size: 11px;
  color: #8ea7bb;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}

.datagrid-note-timeline-now-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #5b9fd6;
  box-shadow: 0 0 0 3px #1a1a1a;
}

.datagrid-note-timeline-now-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
  color: #5b9fd6;
}

/* =============================================================================
   V2 TIMELINE CONFIG PANEL & FUTURE EVENTS
   ============================================================================= */

.datagrid-v2-config-panel {
  position: relative;
  z-index: 5;
  padding: 12px 14px;
  margin: 6px 0;
  margin-bottom: 8px;
  background: #232323;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.datagrid-v2-config-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  background: rgba(14, 14, 14, 0.22);
}

.datagrid-v2-config-group-title {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.datagrid-v2-config-intro-copy {
  margin: 0 0 2px;
  color: #8a8a8a;
  font-size: 12px;
  line-height: 1.45;
}

.datagrid-v2-config-intro-bullet {
  color: #ffffff;
}

.datagrid-v2-config-panel-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px;
}

.datagrid-v2-config-intro-copy a,
.datagrid-v2-config-inline-toggle {
  color: #58a6ff;
  text-decoration: none;
}

.datagrid-v2-config-intro-copy a:hover,
.datagrid-v2-config-inline-toggle:hover {
  color: #79c0ff;
  text-decoration: none;
}

.datagrid-v2-config-inline-toggle {
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.datagrid-v2-config-group-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.datagrid-v2-config-group-title-row .info-popover {
  margin-left: 0;
}

.datagrid-v2-config-group-desc {
  margin-top: -3px;
  font-size: 12px;
  color: #8a8a8a;
  line-height: 1.45;
}

.datagrid-v2-config-group-desc a {
  color: #58a6ff;
  text-decoration: none;
}

.datagrid-v2-config-group-desc a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.datagrid-v2-config-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.datagrid-v2-config-row > label,
.datagrid-v2-config-label {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-transform: none;
  letter-spacing: 0.01em;
}

.datagrid-v2-config-row input[type="date"],
.datagrid-v2-config-row select,
.datagrid-v2-config-row textarea {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
}

.datagrid-v2-config-row input[type="date"]:focus,
.datagrid-v2-config-row select:focus,
.datagrid-v2-config-row textarea:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
  outline: none;
}

.datagrid-v2-config-note {
  border: none;
  border-radius: 2px;
  background: none;
  color: #d0d0d0;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.45;
}

.datagrid-v2-config-note-outreach {
  font-size: 12px;
  line-height: 1.5;
}
.datagrid-v2-config-row textarea {
  resize: vertical;
  min-height: 32px;
}

.datagrid-v2-config-editor-wrap {
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.datagrid-v2-config-editor-wrap:focus-within {
  outline: none;
}

.datagrid-v2-config-highlight,
.datagrid-v2-config-editor {
  margin: 0;
  padding: 10px 11px;
  white-space: pre;
  font-size: 12px;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  tab-size: 2;
  letter-spacing: normal;
  word-spacing: normal;
  overflow-wrap: normal;
  word-break: normal;
  box-sizing: border-box;
}

.datagrid-v2-config-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #1a1a1a;
  color: #d9d9d9;
}

.datagrid-v2-config-editor {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 220px;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: #d9d9d9;
  border: none;
  outline: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.datagrid-v2-config-editor::selection {
  background: rgba(95, 95, 95, 0.42);
}

.datagrid-v2-toml-comment {
  color: #6f8a7c;
}

.datagrid-v2-toml-section {
  color: #e3bb73;
}

.datagrid-v2-toml-string {
  color: #98c379;
}
.datagrid-v2-toml-quote {
  color: #e06c9f;
}

.datagrid-v2-toml-number {
  color: #d19a66;
}

.datagrid-v2-toml-bool {
  color: #56b6c2;
}

.datagrid-v2-toml-punct {
  color: #8c8c8c;
}

.datagrid-v2-config-error {
  border: 1px solid rgba(220, 80, 60, 0.35);
  border-radius: 2px;
  background: rgba(220, 80, 60, 0.12);
  color: #e9a292;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.4;
}

.datagrid-v2-config-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.datagrid-v2-config-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #adadad;
  cursor: pointer;
}

.datagrid-v2-config-check input[type="radio"],
.datagrid-v2-config-check input[type="checkbox"] {
  width: 13px;
  height: 13px;
  accent-color: #8b8b8b;
}

/* Future events track */
.datagrid-v2-future-events {
  margin-top: 12px;
  padding: 0 4px;
}

.datagrid-v2-global-attachments {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  margin-bottom: 6px;
  color: #666;
}

.datagrid-v2-global-attachments > svg {
  color: #666;
  flex-shrink: 0;
}

.datagrid-v2-global-attachments .datagrid-v2-insert-attached-file {
  opacity: 1;
  background: #252525;
  padding: 2px 7px;
  color: #b0b0b0;
}

.datagrid-v2-global-attachments .datagrid-v2-insert-attached-file > span {
  max-width: none;
  opacity: 1;
}

.datagrid-v2-future-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  width: 100%;
}

.datagrid-v2-future-header h5 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #cfcfcf;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.datagrid-v2-future-meta {
  font-size: 11px;
  color: #8d8d8d;
  text-align: center;
}

.datagrid-v2-future-track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.datagrid-v2-future-gap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.datagrid-v2-future-gap-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #3a3a3a;
  border-radius: 999px;
  transform: translateX(-50%);
}

.datagrid-v2-future-gap-label {
  position: absolute;
  top: 50%;
  left: calc(50% + 46px);
  transform: translateY(-50%);
  font-size: 9px;
  color: #949494;
  background: #1a1a1a;
  padding: 0 6px;
  z-index: 1;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  transition: opacity 0.15s ease;
}

.datagrid-v2-gap-tick-group:hover ~ .datagrid-v2-future-gap-label {
  opacity: 0;
}

/* Button group tick in the gap */
.datagrid-v2-gap-tick-group {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1px;
  transition: gap 0.15s ease;
}

.datagrid-v2-gap-tick-group:hover {
  gap: 3px;
}

.datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger,
.datagrid-v2-gap-tick-group .datagrid-v2-attach-icon,
.datagrid-v2-gap-tick-group .datagrid-v2-event-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid #333;
  background: #1e1e1e;
  border-radius: 2px;
  padding: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #aaa;
  cursor: pointer;
  transition: background 0.1s ease, padding 0.15s ease, gap 0.15s ease;
  overflow: hidden;
}

.datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger svg { color: #7b8ef5; flex-shrink: 0; }
.datagrid-v2-gap-tick-group .datagrid-v2-attach-icon svg { color: #9670ad; flex-shrink: 0; }
.datagrid-v2-gap-tick-group .datagrid-v2-event-trigger svg { color: #6bbd6b; flex-shrink: 0; }

.datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger span,
.datagrid-v2-gap-tick-group .datagrid-v2-attach-icon span,
.datagrid-v2-gap-tick-group .datagrid-v2-event-trigger span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.15s ease, opacity 0.15s ease;
}

.datagrid-v2-gap-tick-group:hover .datagrid-v2-insert-trigger,
.datagrid-v2-gap-tick-group:hover .datagrid-v2-attach-icon,
.datagrid-v2-gap-tick-group:hover .datagrid-v2-event-trigger {
  gap: 4px;
  padding: 2px 7px;
  background: #252525;
}

.datagrid-v2-gap-tick-group:hover .datagrid-v2-insert-trigger span,
.datagrid-v2-gap-tick-group:hover .datagrid-v2-attach-icon span,
.datagrid-v2-gap-tick-group:hover .datagrid-v2-event-trigger span {
  max-width: 80px;
  opacity: 1;
}

.datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger:hover,
.datagrid-v2-gap-tick-group .datagrid-v2-attach-icon:hover,
.datagrid-v2-gap-tick-group .datagrid-v2-event-trigger:hover {
  background: #333 !important;
}

/* Menus/forms that expand below the gap tick group */
.datagrid-v2-gap-tick-expand {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  position: relative;
}

.datagrid-v2-future-row {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: minmax(132px, 1fr) minmax(0, 560px) minmax(132px, 1fr);
  align-items: flex-start;
  gap: 6px;
}

.datagrid-v2-future-event {
  display: flex;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  grid-column: 2;
  padding: 6px;
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
  position: relative;
  animation: v2FadeIn 0.3s ease;
}

.datagrid-v2-future-event.is-streaming {
  animation: v2FadeIn 0.4s ease, v2Shimmer 1.8s ease-in-out infinite;
}

@keyframes v2FadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v2Shimmer {
  0%, 100% { border-color: #434343; }
  50% { border-color: #595959; }
}

.datagrid-v2-future-event.is-scheduled {
  border-color: #4a4230;
  background: #1f1a12;
}

.datagrid-v2-future-event.is-sent,
.datagrid-v2-future-event.is-completed {
  border-color: #355b47;
  background: #18291f;
}

.datagrid-v2-future-event.is-skipped {
  border-color: #3b4046;
  background: #1a1c1f;
  opacity: 0.75;
}

.datagrid-v2-future-event.is-failed {
  border-color: #5f3838;
  background: #251717;
}

.datagrid-v2-future-event.is-editing {
  border-color: #505050;
  background: #1f1f1f;
}

.datagrid-v2-future-event-sent-meta {
  min-width: 120px;
  grid-column: 1;
  justify-self: end;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a7a7a7;
  font-size: 11px;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.datagrid-v2-future-event-sent-meta svg {
  color: #53b878;
  flex-shrink: 0;
}

.datagrid-v2-future-event-body {
  flex: 1;
  min-width: 0;
}

.datagrid-v2-future-event-summary {
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 4px 0 3px 0;
  cursor: pointer;
  color: inherit;
}

.datagrid-v2-future-event-summary:disabled {
  cursor: default;
}

.datagrid-v2-future-summary-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.datagrid-v2-future-event-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  border-radius: 2px;
  color: #c7c7c7;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1;
  flex-shrink: 0;
}

.datagrid-v2-future-event-type svg {
  width: 10px;
  height: 10px;
}

.datagrid-v2-future-event-type.is-email {
  color: #7aafff;
}

.datagrid-v2-future-event-type.is-sms {
  color: #ce93d8;
}

.datagrid-v2-future-event-type.is-phone,
.datagrid-v2-future-event-type.is-video-call {
  color: #7ec8a0;
}

.datagrid-v2-future-event-type.is-meeting {
  color: #ce93d8;
}

.datagrid-v2-future-event-type.is-task {
  color: #e8c4a3;
}

.datagrid-v2-future-event-type.is-note {
  color: #bba44a;
}

.datagrid-v2-future-event-type.is-status {
  color: #7eaec8;
}

.datagrid-v2-future-summary-recipient {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #d7d7d7;
  font-weight: 600;
}

.datagrid-v2-future-event-date {
  margin-left: auto;
  font-size: 11px;
  color: #a1a1a1;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  flex-shrink: 0;
}

.datagrid-v2-future-summary-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  min-width: 0;
}

.datagrid-v2-future-summary-label {
  flex-shrink: 0;
  font-size: 11px;
  color: #a4a4a4;
  font-weight: 700;
  text-transform: uppercase;
}

.datagrid-v2-future-summary-text {
  min-width: 0;
  font-size: 11px;
  color: #c8c8c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datagrid-v2-future-event-details {
  border-top: 1px solid #3a3a3a;
  padding: 24px 0 13px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.datagrid-v2-future-event-details.is-editing {
  padding-top: 10px;
  padding-bottom: 4px;
  gap: 6px;
}

.datagrid-v2-future-event-detail-block {
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  background: #1a1a1a;
  padding: 6px;
}

.datagrid-v2-future-event-title {
  font-size: 12px;
  font-weight: 700;
  color: #dfdfdf;
}

.datagrid-v2-future-event-desc {
  font-size: 11px;
  color: #b5b5b5;
  margin-top: 3px;
  line-height: 1.4;
}

.datagrid-v2-future-event-condition {
  font-size: 11px;
  color: #dcc491;
  border: 1px solid #4d412d;
  background: #2b2418;
  border-radius: 999px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

.datagrid-v2-future-event-preview {
  margin-top: 5px;
  padding: 5px 6px;
  background: #1b1b1b;
  border: 1px solid #333;
  border-radius: 2px;
  font-size: 11px;
  color: #b9b9b9;
  line-height: 1.4;
}

.datagrid-v2-future-event-preview strong {
  display: block;
  color: #d7d7d7;
  margin-bottom: 2px;
}

.datagrid-v2-future-event-preview p {
  margin: 0;
}

.datagrid-v2-email-semantics {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  background: #1a1a1a;
  padding: 6px 6px 6px 6px;
}

.datagrid-v2-email-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.4;
}

.datagrid-v2-email-label {
  font-size: 11px;
  font-weight: 700;
  color: #d0d0d0;
  flex-shrink: 0;
}

.datagrid-v2-email-value {
  min-width: 0;
  color: #c7c7c7;
  overflow-wrap: anywhere;
}

.datagrid-v2-email-value.is-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #b9b9b9;
}

.datagrid-v2-email-body {
  margin-top: 1px;
  padding-top: 5px;
  border-top: 1px solid #333;
  color: #b7b7b7;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.datagrid-v2-future-event-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.datagrid-v2-future-event-edit-btn {
  font-size: 11px;
  color: #d4d4d4;
  background: #272727;
  border: 1px solid #3d3d3d;
  border-radius: 2px;
  cursor: pointer;
  padding: 4px 9px;
}

.datagrid-v2-future-event-edit-btn:hover {
  background: #303030;
}

.datagrid-v2-future-event-delete-btn {
  font-size: 11px;
  color: #f2c6c6;
  background: #422323;
  border: 1px solid #6b3b3b;
  border-radius: 2px;
  cursor: pointer;
  padding: 4px 9px;
}

.datagrid-v2-future-event-delete-btn:hover:not(:disabled) {
  background: #4f2a2a;
}

.datagrid-v2-future-event-delete-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Shared base for insert-row buttons */
.datagrid-v2-insert-trigger,
.datagrid-v2-attach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: none;
  border-radius: 3px;
  background: #222;
  color: #888;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.1s ease, padding 0.15s ease, gap 0.15s ease;
  overflow: hidden;
}

.datagrid-v2-insert-trigger svg { color: #7b8ef5; flex-shrink: 0; }
.datagrid-v2-attach-icon svg { color: #9670ad; flex-shrink: 0; }

/* Hide labels by default */
.datagrid-v2-insert-trigger span,
.datagrid-v2-attach-icon span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.15s ease, opacity 0.15s ease;
}

/* Expand on row hover */
.datagrid-v2-future-row:hover .datagrid-v2-insert-trigger,
.datagrid-v2-future-row:hover .datagrid-v2-attach-icon {
  gap: 4px;
  padding: 2px 7px;
  background: #252525;
}

.datagrid-v2-future-row:hover .datagrid-v2-insert-trigger span,
.datagrid-v2-future-row:hover .datagrid-v2-attach-icon span {
  max-width: 80px;
  opacity: 1;
}

.datagrid-v2-insert-trigger:hover,
.datagrid-v2-attach-icon:hover {
  background: #333 !important;
}

.datagrid-v2-insert-attached-file {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #222;
  border-radius: 3px;
  padding: 2px 5px;
  color: #888;
  font-size: 11px;
  white-space: nowrap;
  transition: background 0.15s ease, padding 0.15s ease;
}

.datagrid-v2-future-row:hover .datagrid-v2-insert-attached-file {
  background: #252525;
  padding: 2px 7px;
  color: #b0b0b0;
}

.datagrid-v2-insert-attached-file svg {
  color: #3a9480;
  flex-shrink: 0;
}

/* Hide attached file labels by default too */
.datagrid-v2-insert-attached-file > span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.15s ease, opacity 0.15s ease;
}

.datagrid-v2-future-row:hover .datagrid-v2-insert-attached-file > span {
  max-width: 120px;
  opacity: 1;
}

.datagrid-v2-insert-menu {
  width: 100%;
  max-width: 560px;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  background: #171717;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.datagrid-v2-insert-menu button {
  border: 1px solid #3a3a3a;
  background: #212121;
  color: #d7d7d7;
  border-radius: 2px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.datagrid-v2-insert-menu button:hover {
  background: #2a2a2a;
}

.datagrid-v2-insert-form {
  width: min(100%, 560px);
  border: 1px solid #333;
  border-radius: 8px;
  background: #2a2a2a;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.datagrid-v2-insert-form input,
.datagrid-v2-insert-form select,
.datagrid-v2-insert-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  padding: 5px 7px;
  font-size: 11px;
  font-family: inherit;
}

.datagrid-v2-insert-form input:focus,
.datagrid-v2-insert-form select:focus,
.datagrid-v2-insert-form textarea:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
  outline: none;
}

.datagrid-v2-insert-form textarea {
  resize: vertical;
}

.datagrid-v2-insert-form-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.datagrid-v2-insert-form-row select {
  flex: 1;
  min-width: 0;
}
.datagrid-v2-insert-form-row input[type="number"] {
  width: 64px;
  flex: none;
}
.datagrid-v2-insert-form-row input[type="datetime-local"] {
  width: 120px;
  flex: none;
}
.datagrid-v2-condition-suffix {
  font-size: 11px;
  color: #888;
  flex: none;
}

.datagrid-v2-insert-toggle-optional {
  background: none;
  border: none;
  color: #58a6ff;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-align: left;
}

.datagrid-v2-insert-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.datagrid-v2-insert-form-actions button {
  border-radius: 2px;
  border: 1px solid #3a3a3a;
  background: #252525;
  color: #d7d7d7;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}

.datagrid-v2-insert-form-actions button:last-child {
  border-color: #4a4a4a;
  background: #2f2f2f;
  color: #e0e0e0;
}

.datagrid-v2-insert-form-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inline edit form */
.datagrid-v2-event-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
  background: #2a2a2a;
  border: 1px solid #333;
  border-radius: 2px;
  padding: 7px;
}

.datagrid-v2-event-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.datagrid-v2-event-edit-form input,
.datagrid-v2-event-edit-form select,
.datagrid-v2-event-edit-form textarea {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  font-family: inherit;
}

.datagrid-v2-event-edit-form input:focus,
.datagrid-v2-event-edit-form select:focus,
.datagrid-v2-event-edit-form textarea:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
  outline: none;
}

.datagrid-v2-event-edit-row select {
  flex: 1 1 220px;
  min-width: 0;
}

.datagrid-v2-event-edit-row input[type="number"] {
  width: 64px;
  flex: 0 0 auto;
}

.datagrid-v2-event-edit-form textarea {
  resize: vertical;
}

.datagrid-v2-event-edit-actions {
  display: flex;
  gap: 6px;
}

.datagrid-v2-event-edit-actions button {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 2px;
  border: 1px solid #3a3a3a;
  background: #1d1d1d;
  color: #d7d7d7;
  cursor: pointer;
}

.datagrid-v2-event-edit-actions button:first-child {
  background: #2f2f2f;
  border-color: #555;
  color: #e2e2e2;
}

/* Action buttons */
.datagrid-v2-future-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

@media (max-width: 980px) {
  .datagrid-v2-future-row {
    max-width: 560px;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .datagrid-v2-future-event {
    grid-column: 1;
  }

  .datagrid-v2-future-event-sent-meta {
    grid-column: 1;
    justify-self: start;
    margin-top: 0;
    margin-left: 2px;
  }

  .datagrid-v2-future-summary-line1 {
    flex-wrap: wrap;
  }

  .datagrid-v2-future-event-date {
    margin-left: 0;
  }

  .datagrid-v2-insert-form-row {
    grid-template-columns: 1fr;
  }
}

.datagrid-v2-activate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 2px;
  border: 1px solid #4a4a4a;
  background: #2a2a2a;
  color: #dfdfdf;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.datagrid-v2-activate-btn:hover {
  background: #262626;
  border-color: #5a5a5a;
}

.datagrid-v2-activate-btn.is-active,
.datagrid-v2-activate-btn:disabled {
  border-color: #2f6b46;
  background: rgba(34, 197, 94, 0.14);
  color: #9ce0b8;
  cursor: default;
}

.datagrid-v2-activate-btn.is-loading {
  border-color: #4a4a4a;
  background: #232323;
  color: #dcdcdc;
  cursor: wait;
}

/* =============================================================================
   WEB INTELLIGENCE SECTION (between header and activity)
   ============================================================================= */
.datagrid-note-webintel {
  padding: 4px 12px;
  background: #161616;
  border-bottom: 1px solid #333;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.datagrid-webintel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.datagrid-webintel-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.datagrid-webintel-status.is-ok {
  background: #43d17d;
  box-shadow: none;
}

.datagrid-webintel-status.is-err {
  background: #ff4f3a;
  box-shadow: none;
}

.datagrid-webintel-status-text {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #888;
}

.datagrid-webintel-ssl {
  color: #43d17d;
  display: inline-flex;
  align-items: center;
}

.datagrid-webintel-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: #252525;
  color: #cfcfcf;
  border: 1px solid #3a3a3a;
  letter-spacing: 0.02em;
}

.datagrid-webintel-checked {
  font-size: 11px;
  color: #777;
  margin-left: auto;
}

.datagrid-webintel-social {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.datagrid-webintel-social-link {
  font-size: 11px;
  font-weight: 400;
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--link);
  text-decoration: none;
  transition: color 0.12s ease;
}

.datagrid-webintel-social-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* =============================================================================
   PRO FEATURE ACTIONS PANEL
   ============================================================================= */

/* ── Pro actions container ── */
.datagrid-note-pro-actions {
  padding: 6px 8px;
  background: #141414;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.datagrid-note-pro-actions .dash-pro {
  font-size: 9px;
  font-weight: 700;
  color: #f6d365;
  background: rgba(246, 211, 101, 0.12);
  border: 1px solid rgba(246, 211, 101, 0.3);
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Tab row with logos ── */
.datagrid-note-pro-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}

.datagrid-note-pro-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.datagrid-note-pro-tab:hover {
  background: #1e1e1e;
}

.datagrid-note-pro-tab.is-active {
  background: #2a2a2a;
  outline: 1px solid #444;
}

.datagrid-note-pro-tab-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.3;
  transition: opacity 0.12s ease;
}

.datagrid-note-pro-tab-icon.is-invert {
  filter: invert(1);
}

.datagrid-note-pro-tab-icon.is-square {
  width: 15px;
  height: 15px;
}

.datagrid-note-pro-tab-label {
  font-size: 12px;
  color: #666;
  font-family: inherit;
  transition: color 0.12s ease;
}

.datagrid-note-pro-tab:hover .datagrid-note-pro-tab-label {
  color: #999;
}

.datagrid-note-pro-tab.is-active .datagrid-note-pro-tab-label {
  color: #ccc;
}

.datagrid-note-pro-tab:hover .datagrid-note-pro-tab-icon {
  opacity: 0.6;
}

.datagrid-note-pro-tab.is-active .datagrid-note-pro-tab-icon {
  opacity: 0.9;
}

.datagrid-note-pro-tabs .dash-pro {
  margin-left: auto;
}

/* ── Responsive button grid — single row, equal height ── */
.datagrid-note-pro-btns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: stretch;
}

.datagrid-note-pro-btns::-webkit-scrollbar {
  display: none;
}

/* ── Simple grey buttons — stretch to tallest sibling ── */
.datagrid-note-pro-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 2px;
  padding: 6px 8px;
  border: none;
  border-radius: 3px;
  background: #111;
  cursor: pointer;
  transition: background 0.1s ease;
  min-width: 0;
}

.datagrid-note-pro-btn:hover {
  background: #1a1a1a;
}

.datagrid-note-pro-btn.is-selected {
  background: #191919;
  outline: 1px solid #333;
}

.datagrid-note-pro-btn-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #d0d0d0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.datagrid-pro-icon {
  flex-shrink: 0;
}

.datagrid-note-pro-btn:hover .datagrid-note-pro-btn-title {
  color: #eee;
}

.datagrid-note-pro-btn-desc {
  font-size: 11px;
  font-weight: 400;
  color: #888;
  text-align: left;
  line-height: 1.35;
}

/* ── Twilio composer in Notes modal ── */
.datagrid-twilio-composer {
  padding: 6px 8px;
  background: #141414;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.datagrid-twilio-composer-section {
  border: 1px solid #2c2c2c;
  border-radius: 2px;
  background: #191919;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.datagrid-twilio-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #b8b8b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.datagrid-twilio-composer-meta {
  font-size: 11px;
  color: #9a9a9a;
  line-height: 1.3;
}

.datagrid-twilio-composer-meta a {
  color: #c9c9c9;
  text-decoration: none;
}

.datagrid-twilio-composer-meta a:hover {
  text-decoration: underline;
}

.datagrid-twilio-composer-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.datagrid-twilio-tts-preview {
  width: 100%;
  height: 32px;
  border-radius: 2px;
  outline: none;
}

.datagrid-twilio-composer-input,
.datagrid-twilio-composer-textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.datagrid-twilio-composer-input {
  height: 28px;
  padding: 0 8px;
}

select.datagrid-twilio-composer-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
}

.datagrid-twilio-composer-textarea {
  min-height: 56px;
  resize: vertical;
  padding: 6px 8px;
  line-height: 1.38;
}

.datagrid-twilio-composer-input:focus,
.datagrid-twilio-composer-textarea:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.datagrid-twilio-composer-input::placeholder,
.datagrid-twilio-composer-textarea::placeholder {
  color: #757575;
}

/* =============================================================================
   REPLY BADGE & REPLY EVENT STYLES
   ============================================================================= */

/* Blue dot badge on row name cell for unread replies */
.datagrid-reply-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a8a8a;
  box-shadow: 0 0 0 2px rgba(138, 138, 138, 0.22);
  flex-shrink: 0;
  animation: none;
}

/* Reply event in activity modal */

@media (max-width: 980px) {
  .datagrid-note-modal-overlay {
    padding: 10px;
  }

  .datagrid-note-modal {
    width: min(100%, 980px);
    height: auto;
    max-height: min(92vh, 820px);
    max-height: min(92dvh, 820px);
    border-radius: 8px;
  }

  .datagrid-note-modal-header-title-row h3 {
    font-size: 21px;
  }

  .datagrid-note-modal-body {
    grid-template-columns: 1fr;
  }

  .datagrid-note-sidebar {
    border-right: none;
    border-bottom: 1px solid #2c2926;
    max-height: min(34vh, 320px);
    padding: 12px;
  }

  .datagrid-note-listing {
    flex-direction: column;
    align-items: flex-start;
  }

  .datagrid-note-thumb {
    width: 100%;
    height: 180px;
  }

  .datagrid-note-listing-text {
    display: block;
  }

  .datagrid-note-listing-meta {
    margin-top: 6px;
    gap: 4px;
  }

  .datagrid-note-business-chips {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .datagrid-note-list {
    flex: 1 1 0;
  }

  .datagrid-note-momentum-header {
    flex-wrap: wrap;
  }

  .datagrid-note-timeline-event-row {
    grid-template-columns: 1fr 62px;
    gap: 8px;
  }

  .datagrid-note-timeline-track {
    padding-top: 32px;
  }

  .datagrid-note-timeline-scenarios {
    top: 42px;
    left: 8px;
    right: 8px;
  }

  .datagrid-note-timeline-col.is-right,
  .datagrid-note-timeline-col.is-left {
    grid-column: 1;
    justify-content: flex-start !important;
  }

  .datagrid-note-timeline-entry {
    width: 100%;
  }

  .datagrid-note-timeline-outside-meta {
    display: none;
  }

  .datagrid-note-ideal-track {
    padding-left: 26px;
  }

  .datagrid-note-timeline-core {
    grid-column: 2;
    align-self: stretch;
  }

  .datagrid-note-timeline-branch {
    width: 24px;
  }

  .datagrid-note-timeline-branch.is-left {
    left: 50%;
    right: auto;
  }

  /* Insert tick form responsive */
  .datagrid-note-timeline-insert-form {
    max-width: 300px;
    padding: 8px 10px;
  }

  /* Pro actions responsive */
  .datagrid-note-pro-btns {
    grid-auto-columns: minmax(140px, 1fr);
  }

  .datagrid-note-pro-btn-desc {
    font-size: 9px;
    line-height: 1.3;
  }

  /* Twilio composer responsive */
  .datagrid-twilio-composer-row {
    grid-template-columns: 1fr;
  }

  /* Timeline gap insert tick */
  .datagrid-note-timeline-gap {
    min-height: 14px;
  }

  /* Business image: constrain on smaller screens */
  .datagrid-note-thumb {
    width: 100%;
    max-width: 200px;
    height: 120px;
  }

  /* Pro toolbar: collapse to mobile dropdowns */
}

@media (max-width: 480px) {
  .datagrid-note-modal-overlay {
    padding: 0;
  }

  .datagrid-note-modal {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  /* Business image: even smaller on phone */
  .datagrid-note-thumb {
    max-width: 140px;
    height: 90px;
  }

  /* Insert form: full width on phones */
  .datagrid-note-timeline-insert-form {
    max-width: calc(100% - 20px);
    padding: 8px;
    gap: 5px;
  }

  .datagrid-note-timeline-insert-form-header {
    font-size: 9px;
  }

  /* Pro tabs: smaller on phone */
  .datagrid-note-pro-tabs {
    gap: 1px;
  }

  .datagrid-note-pro-tab {
    padding: 3px 5px;
    gap: 4px;
  }

  .datagrid-note-pro-tab-label {
    font-size: 9px;
  }

  .datagrid-note-pro-tab-icon {
    width: 12px;
    height: 12px;
  }

  /* Pro action buttons: wrap instead of scroll */
  .datagrid-note-pro-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .datagrid-note-pro-btn {
    flex: 0 1 calc(50% - 4px);
    min-width: 120px;
    max-width: calc(50% - 2px);
  }

  .datagrid-note-pro-btn-title {
    font-size: 11px;
  }

  .datagrid-note-pro-btn-desc {
    font-size: 9px;
  }

  /* Twilio composer: single column, slightly taller inputs for touch */
  .datagrid-twilio-composer-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .datagrid-twilio-composer-input {
    height: 32px;
  }

  /* Timeline cards: tighter on phone */
  .datagrid-note-timeline-card-wrap {
    width: 100%;
    max-width: none;
  }

  .datagrid-note-timeline-card-title {
    margin: 4px 10px;
  }

  .datagrid-note-timeline-card-detail {
    padding: 4px 10px 6px 10px;
  }
}

/* =============================================================================
   SKELETON ANIMATION
   ============================================================================= */
@keyframes datagrid-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

/* =============================================================================
   END OF LIST
   ============================================================================= */

.datagrid-end-of-list {
  text-align: center;
  padding: 18px 0 !important;
  color: #555;
  font-size: 11px;
  letter-spacing: 0.04em;
  user-select: none;
  border-bottom: none !important;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* Settings panel is always visible (both desktop and mobile) */
.datagrid-status-settings {
  display: flex;
  position: relative;
}

@media (max-width: 768px) {
  .datagrid-status-bar {
    padding: 0 10px;
    gap: 8px;
  }

  .datagrid-status-config,
  .datagrid-status-sources,
  .datagrid-status-actions,
  .datagrid-status-filters,
  .datagrid-status-twilio-bulk,
  .datagrid-status-rows,
  .datagrid-status-center,
  .datagrid-status-search-trigger,
  .datagrid-status-view-select {
    display: none;
  }

  .datagrid-settings-button {
    display: inline-flex;
  }

  .datagrid-settings-button .datagrid-status-label {
    display: inline;
  }

  .datagrid-mobile-settings-only {
    display: flex;
  }

  .datagrid-desktop-settings-only {
    display: none;
  }

  .datagrid-status-settings .datagrid-status-dropdown,
  .datagrid-status-twilio-bulk .datagrid-status-dropdown,
  .datagrid-bulk-trigger .datagrid-bulk-dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 49px;
    transform: translateX(-50%);
    width: min(90vw, 320px);
    min-width: 0;
    max-width: 90vw;
    max-height: min(70vh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .datagrid-floating-search {
    width: calc(100vw - 24px);
    left: 12px;
  }

  /* Hide pagination page list on mobile, show compact view */
  .datagrid-status-page-list {
    display: none;
  }

  .datagrid-status-page-mobile {
    display: flex;
  }

  /* Hide records count on mobile */
  .datagrid-status-records {
    display: none;
  }

  /* Compact rows selector */
  .datagrid-status-rows .datagrid-status-label {
    display: none;
  }

  .datagrid-status-select-compact {
    width: 54px;
  }

  .datagrid-status-pagination {
    gap: 5px;
  }

  .datagrid-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px !important;
    height: 24px !important;
    gap: 3px;
  }

  .datagrid-page-button[title="Previous page"],
  .datagrid-page-button[title="Next page"] {
    min-width: 64px !important;
  }

  .datagrid-page-button[title="First page"],
  .datagrid-page-button[title="Last page"] {
    min-width: 32px !important;
  }

  .datagrid-page-label {
    display: inline;
  }
}

@media (max-width: 640px) {
  /* On very narrow screens hide first/last page buttons so only
     prev, page indicator, and next remain in the pagination area. */
  .datagrid-page-button[title="First page"],
  .datagrid-page-button[title="Last page"] {
    display: none !important;
  }
}

/* =============================================================================
   CONTACT SETTINGS — RADIO GROUP & INPUT
   ============================================================================= */

.datagrid-v2-config-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0;
}

.datagrid-v2-config-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #c0c0c0;
  cursor: pointer;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 2px;
  transition: background 0.15s;
}

.datagrid-v2-config-radio:hover {
  background: rgba(255, 255, 255, 0.04);
}

.datagrid-v2-config-radio.is-selected {
  background: transparent;
}

.datagrid-v2-config-radio input[type="radio"] {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #6fa3e0;
}

.datagrid-v2-config-radio-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.datagrid-v2-config-radio-title {
  font-weight: 600;
  color: #d9d9d9;
  font-size: 12px;
}

.datagrid-v2-config-radio-desc {
  font-size: 12px;
  color: #8f8f8f;
}

.datagrid-v2-config-recommended {
  font-weight: 400;
  color: #ffffff;
  font-size: 11px;
}

.datagrid-v2-config-radio-warning {
  font-weight: 400;
  color: #e3b341;
  font-size: 11px;
}

.datagrid-v2-config-input {
  background: #1f1f1f;
  color: #d9d9d9;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  width: 100%;
}

.datagrid-v2-config-input::placeholder {
  color: #555;
}

/* =============================================================================
   REPLY AUTOMATION — PROVIDER, PILLS, SUBSECTION
   ============================================================================= */

.datagrid-v2-config-subsection {
  border-left: none;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.datagrid-v2-config-group-automation-mode,
.datagrid-v2-config-group-timeline-context,
.datagrid-v2-config-group-pause-triggers,
.datagrid-v2-config-group-ai-reply-style {
  padding: 15px;
}

.datagrid-v2-config-group-automation-mode,
.datagrid-v2-config-group-timeline-context,
.datagrid-v2-config-group-pause-triggers,
.datagrid-v2-config-group-ai-reply-style {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.datagrid-v2-config-group-automation-mode > .datagrid-v2-config-group-title,
.datagrid-v2-config-group-timeline-context > .datagrid-v2-config-group-title {
  color: #fff;
  margin-bottom: 2px;
}

.datagrid-v2-config-group-automation-mode > .datagrid-v2-config-group-desc,
.datagrid-v2-config-group-timeline-context > .datagrid-v2-config-group-desc {
  margin-top: 0;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.datagrid-v2-config-group-pause-triggers > .datagrid-v2-config-group-desc,
.datagrid-v2-config-group-ai-reply-style > .datagrid-v2-config-group-desc {
  margin-top: 0;
}

.datagrid-v2-config-provider-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.datagrid-v2-config-provider-option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #c0c0c0;
  cursor: pointer;
}

.datagrid-v2-config-provider-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.datagrid-v2-config-provider-option input[type="radio"] {
  width: 12px;
  height: 12px;
  accent-color: #6fa3e0;
}

.datagrid-v2-config-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* =============================================================================
   REPLY DRAFT REVIEW CARDS
   ============================================================================= */

.datagrid-reply-drafts {
  margin: 8px 0 12px;
  border: 1px solid rgba(220, 150, 30, 0.35);
  border-radius: 8px;
  overflow: hidden;
}

.datagrid-reply-drafts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(220, 150, 30, 0.1);
  border-bottom: 1px solid rgba(220, 150, 30, 0.2);
}

.datagrid-reply-drafts-title {
  font-size: 11px;
  font-weight: 700;
  color: #dca030;
}

.datagrid-reply-drafts-hint {
  font-size: 11px;
  color: #9a8060;
}

.datagrid-reply-draft-card {
  padding: 10px 12px;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.datagrid-reply-draft-card:last-child {
  border-bottom: none;
}

.datagrid-reply-draft-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.datagrid-reply-draft-from {
  font-size: 11px;
  font-weight: 600;
  color: #c0c0c0;
}

.datagrid-reply-draft-time {
  font-size: 11px;
  color: #6b6b6b;
}

.datagrid-reply-draft-trigger {
  font-size: 11px;
  color: #dca030;
  background: rgba(220, 150, 30, 0.12);
  border: 1px solid rgba(220, 150, 30, 0.25);
  border-radius: 3px;
  padding: 1px 5px;
}

.datagrid-reply-draft-cost {
  font-size: 11px;
  color: #888;
  margin-left: auto;
}

.datagrid-reply-draft-label {
  font-size: 11px;
  color: #6b6b6b;
  text-transform: none;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.datagrid-v2-config-note a {
  color: #58a6ff;
  text-decoration: underline;
}

.datagrid-v2-config-note a:hover {
  color: #79bbff;
}

.datagrid-reply-draft-inbound {
  font-size: 11px;
  color: #8b9ead;
}

.datagrid-reply-draft-subject {
  font-size: 11px;
  color: #d0d0d0;
}

.datagrid-reply-draft-body {
  font-size: 11px;
  color: #b8b8b8;
  white-space: pre-wrap;
  line-height: 1.5;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 8px 10px;
  max-height: 200px;
  overflow-y: auto;
}

.datagrid-reply-draft-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.datagrid-reply-draft-btn {
  padding: 4px 12px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s;
}

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

.datagrid-reply-draft-btn--send {
  background: #2a5e3f;
  border-color: #3a7a55;
  color: #7fd4a4;
}

.datagrid-reply-draft-btn--send:hover:not(:disabled) {
  background: #345e45;
}

.datagrid-reply-draft-btn--discard {
  background: transparent;
  border-color: #4a3030;
  color: #9a6060;
}

.datagrid-reply-draft-btn--discard:hover:not(:disabled) {
  border-color: #6a3030;
  color: #c07070;
}

/* =============================================================================
   CONFIG PANEL HEADERS
   ============================================================================= */
.datagrid-v2-config-api-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 2px;
  background: rgba(210, 160, 50, 0.1);
  border: 1px solid rgba(210, 160, 50, 0.3);
  color: #d4a840;
  font-size: 11px;
  line-height: 1.4;
}
.datagrid-v2-config-api-warning a {
  color: #58a6ff;
  text-decoration: underline;
}
.datagrid-v2-config-panel-header {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0.01em;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.datagrid-v2-config-panel-header-main {
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.datagrid-v2-config-panel-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.datagrid-v2-config-panel-header-row .info-popover {
  margin-left: 0;
}

/* =============================================================================
   SCHEDULED EVENTS IN ACTIVITY LIST
   ============================================================================= */

/* Scheduled items in activity list styled like email events */

.datagrid-note-scheduled-status {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.datagrid-note-scheduled-status.is-pending { color: #d1d6dc; background: #3a4045; }
.datagrid-note-scheduled-status.is-scheduled { color: #f2deb3; background: #5a4826; }
.datagrid-note-scheduled-status.is-sent { color: #d8f0e4; background: #2f5e46; }
.datagrid-note-scheduled-status.is-completed { color: #d8f0e4; background: #2f5e46; }
.datagrid-note-scheduled-status.is-failed { color: #f7c5c5; background: #5f2f2f; }

/* =============================================================================
   INLINE ADD NOTE BUTTON (timeline cards, below notes section)
   ============================================================================= */
.datagrid-note-inline-add-note {
  display: block;
  margin: 10px 10px;
  padding: 0;
  border: none;
  background: none;
  color: #7a7a7a;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}
.datagrid-note-inline-add-note:hover {
  color: #b0b0b0;
}

/* =============================================================================
   QUICK ACTIONS BAR (above footer toolbar)
   ============================================================================= */
.datagrid-note-global-attachments-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.datagrid-note-quick-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--bg, #1e1e2e);
}
.datagrid-note-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px;
  border: none;
  background: none;
  color: #777;
  font-size: 9px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 2px;
}
.datagrid-note-quick-action:hover {
  color: #c0c0c0;
  background: rgba(255, 255, 255, 0.04);
}
.datagrid-note-quick-action.is-active {
  background: #333;
  color: #e0e0e0;
}
.datagrid-note-quick-action-sep {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.datagrid-note-view-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.datagrid-note-view-toggle-group.is-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  margin-left: 0;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 2px;
}

.datagrid-note-view-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-size: 9px;
  font-family: inherit;
  white-space: nowrap;
  color: #555;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.datagrid-note-view-icon-btn:hover {
  color: #999;
}

.datagrid-note-view-icon-btn.is-active {
  background: #333;
  color: #e0e0e0;
}

/* =============================================================================
   CALL & EMAIL SENT EVENT LIST ITEMS
   ============================================================================= */
.datagrid-note-call-duration {
  font-size: 9px;
  color: #8a8aa0;
  background: rgba(126, 200, 160, 0.1);
  border: 1px solid rgba(126, 200, 160, 0.2);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 4px;
  white-space: nowrap;
}
/* Outcome chips on realtime-call timeline cards — show why the call ended
   (AI hung up, user hung up, voicemail dropped, answering machine). */
.datagrid-note-call-outcome-chip {
  font-size: 9px;
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 4px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.datagrid-note-call-outcome-chip.is-voicemail {
  color: #d8c48a;
  background: rgba(216, 196, 138, 0.08);
  border-color: rgba(216, 196, 138, 0.24);
}
.datagrid-note-call-outcome-chip.is-ai-ended {
  color: #b9a4e6;
  background: rgba(185, 164, 230, 0.08);
  border-color: rgba(185, 164, 230, 0.24);
}
.datagrid-note-call-outcome-chip.is-user-ended {
  color: #8a8aa0;
  background: rgba(138, 138, 160, 0.08);
  border-color: rgba(138, 138, 160, 0.24);
}
.datagrid-note-call-outcome-chip.is-amd {
  color: #d89a8a;
  background: rgba(216, 154, 138, 0.08);
  border-color: rgba(216, 154, 138, 0.24);
}
.datagrid-note-call-outcome-details {
  margin-top: 6px;
  padding: 6px 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: #8a8aa0;
  line-height: 1.5;
}
.datagrid-note-call-outcome-details > div + div {
  margin-top: 2px;
}
.datagrid-note-reply-link-btn {
  background: none;
  border: 1px solid rgba(126, 174, 200, 0.25);
  border-radius: 3px;
  color: #7eaec8;
  font-size: 9px;
  padding: 0 5px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
}
.datagrid-note-reply-link-btn:hover {
  background: rgba(126, 174, 200, 0.1);
  color: #a0d0e8;
}

/* =============================================================================
   CALL & EMAIL SENT EDITOR FORMS
   ============================================================================= */
.datagrid-note-editor.is-call-editor,
.datagrid-note-editor.is-email-sent-editor {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Saved AI calls attachment list in call editor */
.datagrid-note-saved-calls {
  margin: 4px 0 2px;
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 2px;
  overflow: hidden;
}
.datagrid-note-saved-calls-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, #888);
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.06));
}
.datagrid-note-saved-calls-list {
  max-height: 140px;
  overflow-y: auto;
}
.datagrid-note-saved-call-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 11px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.04));
  transition: background 0.1s;
}
.datagrid-note-saved-call-item:hover {
  background: rgba(255,255,255,0.03);
}
.datagrid-note-saved-call-item.is-selected {
  background: rgba(45, 140, 240, 0.08);
}
.datagrid-note-saved-call-item:last-child {
  border-bottom: none;
}
.datagrid-note-saved-call-item input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.datagrid-note-saved-call-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.datagrid-note-saved-call-dir {
  font-weight: 600;
  color: var(--text, #ccc);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.datagrid-note-saved-call-dir.is-inbound {
  color: #4caf50;
}
.datagrid-note-saved-call-phone {
  color: var(--text, #bbb);
  font-family: var(--font-mono, monospace);
}
.datagrid-note-saved-call-dur {
  color: var(--muted, #777);
}
.datagrid-note-saved-call-date {
  color: var(--muted, #666);
  font-size: 11px;
}
.datagrid-note-saved-call-preview {
  display: block;
  color: var(--muted, #666);
  font-size: 11px;
  line-height: 1.3;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* =============================================================================
   TIMELINE CARD VARIANTS — CALL & EMAIL SENT
   ============================================================================= */
.datagrid-note-timeline-card.is-call {
  border-left: 1px solid #303030;
}
.datagrid-note-timeline-card.is-email-sent {
  border-left: 1px solid #303030;
}

.datagrid-note-sms-header-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 4px 10px;
  white-space: nowrap;
  overflow: hidden;
}

.datagrid-note-sms-contact {
  font-size: 12px;
  color: #a0a0a0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-note-global-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #a0a0a0;
  max-width: 160px;
  flex-shrink: 0;
}
.datagrid-note-global-attachment-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.datagrid-note-global-attachment-chip > button {
  background: none;
  border: none;
  color: #6e6e80;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.datagrid-note-global-attachment-chip:hover > button {
  opacity: 1;
}
.datagrid-note-global-attachment-chip > button:hover {
  color: #e06060;
}

.datagrid-note-webintel.is-sidebar {
  padding: 0;
  border-bottom: none;
  background: transparent;
  gap: 8px;
}

.datagrid-note-webintel.is-sidebar .datagrid-webintel-status-text,
.datagrid-note-webintel.is-sidebar .datagrid-webintel-checked {
  color: #a39b93;
}

.datagrid-note-webintel.is-sidebar .datagrid-webintel-badge,
.datagrid-note-webintel.is-sidebar .datagrid-webintel-social-link {
  background: transparent;
  border-color: #2a2a2a;
}

.datagrid-note-global-attachments-strip.is-sidebar {
  padding: 0;
  border-top: none;
  gap: 8px;
}

.datagrid-note-global-attachments-strip.is-sidebar .datagrid-note-global-attachment-chip {
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 0;
  border: 1px solid #2a2a2a;
  background: transparent;
}

.datagrid-note-main > .datagrid-note-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 18px 52px 18px;
  background: transparent;
}

.datagrid-note-main > .datagrid-note-list.is-timeline {
  padding: 0;
  background: #1e1e1e;
}

/* Webkit scrollbar for workspace shell */
.datagrid-note-action-workspace-shell::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
.datagrid-note-action-workspace-shell::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.datagrid-note-action-workspace-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.datagrid-note-main > .datagrid-note-action-workspace-shell {
  flex: 1 1 auto;
  min-width: 0; /* prevent flex item from growing beyond parent */
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 8px 18px 18px; /* Slightly less right padding to account for thin scrollbar */
}

.datagrid-note-main > .datagrid-note-action-workspace-shell.is-config-page {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  padding-bottom: 0;
}

.datagrid-note-main > .datagrid-note-action-workspace-shell .datagrid-note-action-workspace-header {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.datagrid-note-main > .datagrid-v2-config-panel {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 18px 18px;
}

.datagrid-note-main > .datagrid-v2-config-panel.is-timeline-config {
  overflow: hidden;
}

.datagrid-note-main > .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.datagrid-note-main > .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-highlight,
.datagrid-note-main > .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor {
  height: 100%;
  min-height: 0;
}

.datagrid-note-main > .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor {
  resize: none;
}

.datagrid-note-main > .datagrid-v2-config-panel.is-contact-settings {
  overflow: visible;
}

/* =============================================================================
   NOTE MODAL READABILITY OVERRIDES
   ============================================================================= */

.datagrid-note-modal,
.le-note-modal-skin {
  font-size: 12px;
  line-height: 1.42;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --note-modal-body-size: 12px;
  --note-modal-meta-size: 11px;
}

.datagrid-note-modal input,
.datagrid-note-modal select,
.datagrid-note-modal textarea,
.datagrid-note-modal button,
.le-note-modal-skin input,
.le-note-modal-skin select,
.le-note-modal-skin textarea,
.le-note-modal-skin button {
  font-size: 12px;
  line-height: 1.35;
}

.datagrid-note-modal-header {
  padding: 8px 12px;
  gap: 1px;
}

.datagrid-note-modal .datagrid-note-sidebar-section-title,
.datagrid-note-modal .datagrid-note-sidebar-field span,
.datagrid-note-modal .datagrid-note-sidebar-metric span,
.datagrid-note-modal .datagrid-note-modal-header-chip,
.datagrid-note-modal .datagrid-note-category,
.datagrid-note-modal .datagrid-note-business-chip,
.datagrid-note-modal .datagrid-webintel-badge,
.datagrid-note-modal .datagrid-webintel-status-text,
.datagrid-note-modal .datagrid-webintel-checked,
.datagrid-note-modal .datagrid-webintel-social-link,
.le-note-modal-skin .datagrid-note-sidebar-section-title,
.le-note-modal-skin .datagrid-note-sidebar-field span,
.le-note-modal-skin .datagrid-note-sidebar-metric span,
.le-note-modal-skin .datagrid-note-modal-header-chip,
.le-note-modal-skin .datagrid-note-category,
.le-note-modal-skin .datagrid-note-business-chip,
.le-note-modal-skin .datagrid-webintel-badge,
.le-note-modal-skin .datagrid-webintel-status-text,
.le-note-modal-skin .datagrid-webintel-checked,
.le-note-modal-skin .datagrid-webintel-social-link {
  font-size: var(--note-modal-meta-size);
}

.datagrid-note-listing-text {
  gap: 8px 16px;
}

.datagrid-note-listing-meta {
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid #2b2b2b;
}

.datagrid-note-list {
  padding: 12px 16px;
}

.datagrid-note-editor {
  padding: 10px 14px;
}


.datagrid-note-pro-actions,
.datagrid-twilio-composer {
  padding: 10px 12px;
  gap: 8px;
}

.datagrid-note-pro-tabs {
  gap: 6px;
  flex-wrap: wrap;
}

.datagrid-note-pro-btns {
  gap: 6px;
}

.datagrid-note-pro-btn {
  gap: 4px;
  padding: 8px 10px;
}

.datagrid-note-modal .datagrid-pro-pill,
.le-note-modal-skin .datagrid-pro-pill {
  height: 28px;
  padding: 0 10px;
}

.datagrid-note-modal .datagrid-note-category,
.datagrid-note-modal .datagrid-note-listing-text p,
.datagrid-note-modal .datagrid-note-open-lead-engine-link,
.datagrid-note-modal .datagrid-note-primary-website,
.datagrid-note-modal .datagrid-note-listing-meta-row,
.datagrid-note-modal .datagrid-welcome-step,
.datagrid-note-modal .datagrid-welcome-step strong,
.datagrid-note-modal .datagrid-note-email-arrow,
.datagrid-note-modal .datagrid-note-campaign-name,
.datagrid-note-modal .datagrid-note-heat-badge,
.datagrid-note-modal .datagrid-note-heat-sprite-label,
.datagrid-note-modal .datagrid-note-event-attachments,
.datagrid-note-modal .datagrid-note-attachment-context,
.datagrid-note-modal .datagrid-note-attachment-context button,
.datagrid-note-modal .datagrid-note-pro-tab-label,
.datagrid-note-modal .datagrid-note-pro-btn-title,
.datagrid-note-modal .datagrid-pro-pill,
.datagrid-note-modal .datagrid-twilio-composer-head,
.datagrid-note-modal .datagrid-twilio-composer-meta,
.le-note-modal-skin .datagrid-note-category,
.le-note-modal-skin .datagrid-note-listing-text p,
.le-note-modal-skin .datagrid-note-open-lead-engine-link,
.le-note-modal-skin .datagrid-note-primary-website,
.le-note-modal-skin .datagrid-note-listing-meta-row,
.le-note-modal-skin .datagrid-welcome-step,
.le-note-modal-skin .datagrid-welcome-step strong,
.le-note-modal-skin .datagrid-note-email-arrow,
.le-note-modal-skin .datagrid-note-campaign-name,
.le-note-modal-skin .datagrid-note-heat-badge,
.le-note-modal-skin .datagrid-note-heat-sprite-label,
.le-note-modal-skin .datagrid-note-event-attachments,
.le-note-modal-skin .datagrid-note-attachment-context,
.le-note-modal-skin .datagrid-note-attachment-context button,
.le-note-modal-skin .datagrid-note-pro-tab-label,
.le-note-modal-skin .datagrid-note-pro-btn-title,
.le-note-modal-skin .datagrid-pro-pill,
.le-note-modal-skin .datagrid-twilio-composer-head,
.le-note-modal-skin .datagrid-twilio-composer-meta {
  font-size: var(--note-modal-body-size);
}

.datagrid-note-modal .datagrid-note-listing-meta-row,
.datagrid-note-modal .datagrid-note-primary-website,
.datagrid-note-modal .datagrid-note-event-attachments,
.datagrid-note-modal .datagrid-twilio-composer-checklist,
.le-note-modal-skin .datagrid-note-listing-meta-row,
.le-note-modal-skin .datagrid-note-primary-website,
.le-note-modal-skin .datagrid-note-event-attachments,
.le-note-modal-skin .datagrid-twilio-composer-checklist {
  line-height: 1.45;
}

.datagrid-note-modal .datagrid-note-pro-btn-desc,
.datagrid-note-modal .datagrid-twilio-composer-checklist,
.datagrid-note-modal .datagrid-twilio-composer-meta-subtle,
.le-note-modal-skin .datagrid-note-pro-btn-desc,
.le-note-modal-skin .datagrid-twilio-composer-checklist,
.le-note-modal-skin .datagrid-twilio-composer-meta-subtle {
  font-size: var(--note-modal-meta-size);
}

.datagrid-twilio-composer-section {
  padding: 10px;
  gap: 8px;
}

.datagrid-twilio-composer-head {
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 4px;
  text-transform: none;
  letter-spacing: 0.02em;
}

.datagrid-twilio-composer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.datagrid-twilio-composer-accent {
  color: #5ca8f5;
}

.datagrid-twilio-composer-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #303030;
  border-radius: 2px;
  background: #151515;
  color: #cbcbcb;
}

.datagrid-twilio-composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.datagrid-twilio-composer-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #3b3b3b;
  border-radius: 2px;
  background: #202020;
  color: #e1e1e1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datagrid-twilio-composer-action-btn:hover:not(:disabled) {
  background: #2b2b2b;
  border-color: #565656;
  color: #f2f2f2;
}

.datagrid-twilio-composer-action-btn.is-primary {
  background: #1c3f63;
  border-color: #2f6fae;
  color: #eef6ff;
}

.datagrid-twilio-composer-action-btn.is-primary:hover:not(:disabled) {
  background: #25527f;
  border-color: #4b88c4;
}

.datagrid-twilio-composer-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.datagrid-twilio-composer-meta-subtle {
  color: #9fb2c6;
}

.datagrid-twilio-composer-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
}

.datagrid-twilio-composer-var-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 11px;
  font-family: var(--mono);
  color: #8c857d;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  cursor: pointer;
}

.datagrid-twilio-composer-var-chip:hover {
  color: #ddd6d0;
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
}

.datagrid-twilio-composer-var-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.datagrid-twilio-composer-templates {
  display: flex;
  gap: 6px;
}

.datagrid-twilio-composer-ai-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.datagrid-twilio-composer-ai-label {
  font-size: 11px !important;
  color: #9a9a9a !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}

.datagrid-twilio-composer-ai-label strong {
  font-weight: 500 !important;
  color: #b0b8c1 !important;
}

.datagrid-twilio-composer-ai-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.datagrid-twilio-composer-ai-prompt {
  flex: 1;
  min-width: 0;
}

.datagrid-twilio-composer-ai-style {
  flex-shrink: 0;
  width: 148px;
  min-width: 0;
  height: 28px;
  padding: 0 24px 0 8px;
  font-size: 11px;
  font-family: inherit;
  color: #c6cdd5;
  background-color: #1a1a1a;
  border: 1px solid #363636;
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
}

.datagrid-twilio-composer-ai-style:focus {
  outline: none;
  border-color: #5a5a5a;
}

.datagrid-twilio-composer-ai-style option {
  background: #1e1e1e;
  color: #c6cdd5;
}

.datagrid-twilio-composer-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 0 10px;
  height: 28px;
  font-size: 11px;
  font-family: inherit;
  color: #9fb2c6;
  background: transparent;
  border: 1px solid #2c3a48;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.datagrid-twilio-composer-ai-btn:hover:not(:disabled) {
  color: #c8dff0;
  border-color: #4b7aa6;
  background: rgba(75, 122, 166, 0.08);
}

.datagrid-twilio-composer-ai-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.datagrid-twilio-composer-ai-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(159, 178, 198, 0.25);
  border-top-color: #9fb2c6;
  border-radius: 50%;
  animation: datagrid-spin 0.65s linear infinite;
  flex-shrink: 0;
}

.datagrid-twilio-composer-schedule {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.datagrid-twilio-campaign-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  background: #2d2d2d;
}

.datagrid-twilio-campaign-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: #8c857d;
}

.datagrid-twilio-campaign-step-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.datagrid-twilio-campaign-day-input {
  width: 52px !important;
  text-align: center;
}

.datagrid-twilio-campaign-ai-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9d948c;
  cursor: pointer;
  padding: 6px 0;
}

.datagrid-twilio-campaign-ai-toggle input[type="checkbox"] {
  accent-color: #3a9480;
}

@media (max-width: 760px) {
  .datagrid-note-modal {
    width: calc(100vw - 16px);
    height: auto;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
  }

  .datagrid-note-modal-header {
    padding: 12px;
  }

  .datagrid-note-modal-header-title-row h3 {
    font-size: 18px;
  }

  .datagrid-note-modal-header-chip {
    min-height: 28px;
    padding: 0 10px;
  }

  .datagrid-note-sidebar,
  .datagrid-note-main > .datagrid-note-list,
  .datagrid-note-main > .datagrid-note-action-workspace-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .datagrid-note-sidebar {
    max-height: min(30vh, 260px);
    max-height: min(30dvh, 260px);
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .datagrid-note-main > .datagrid-note-list.is-timeline {
    padding-left: 0;
    padding-right: 0;
  }

  .datagrid-note-main > .datagrid-v2-config-panel {
    margin: 0 12px 12px;
  }

  .datagrid-note-momentum-info {
    flex-wrap: wrap;
  }

  .datagrid-note-sidebar-card {
    padding: 12px;
    border-radius: 0;
  }

  .datagrid-note-sidebar-metrics {
    grid-template-columns: 1fr;
  }

  .datagrid-note-listing-meta {
    padding-left: 0;
    border-left: none;
  }

  .datagrid-v2-config-panel {
    padding: 10px 12px;
    gap: 8px;
  }

  .datagrid-v2-config-panel-intro {
    padding: 12px;
  }

  .datagrid-v2-config-group-automation-mode,
  .datagrid-v2-config-group-timeline-context,
  .datagrid-v2-config-group-pause-triggers,
  .datagrid-v2-config-group-ai-reply-style {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .datagrid-note-modal {
    width: 100vw;
    height: auto;
    max-height: 100vh;
    max-height: 100dvh;
  }

  .datagrid-note-sidebar {
    max-height: min(34vh, 250px);
    max-height: min(34dvh, 250px);
  }

  .datagrid-note-main > .datagrid-v2-config-panel {
    margin: 0 10px 10px;
  }

  .datagrid-v2-config-panel,
  .datagrid-v2-config-panel-intro,
  .datagrid-v2-config-group-automation-mode,
  .datagrid-v2-config-group-timeline-context,
  .datagrid-v2-config-group-pause-triggers,
  .datagrid-v2-config-group-ai-reply-style {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* =============================================================================
   NOTE ACTION WORKSPACE
   ============================================================================= */

.datagrid-note-action-workspace-shell {
  padding: 14px 16px 0;
}

.datagrid-note-action-workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background: #111111;
  box-shadow: inset 0 1px 0 #2d2d2d;
}

.datagrid-note-action-workspace-nav {
  align-self: center;
}

.datagrid-note-action-workspace-nav.is-secondary {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  color: #5b9cf6;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.datagrid-note-action-workspace-nav.is-secondary:hover {
  color: #7ab3f8;
  text-decoration: underline;
}

.datagrid-note-action-workspace-copy {
  min-width: 0;
  line-height: 1.4;
}

.datagrid-note-action-workspace-title {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.datagrid-note-action-workspace-copy p {
  display: block;
  color: #888888;
  font-size: 12px;
  margin: 0;
}

.datagrid-note-action-workspace-body {
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

.datagrid-note-action-hub {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ─── Action hub card grid (new card design) ─────────────── */

.datagrid-note-action-hub-grid {
  display: grid;
  /* min(220px, 100%) prevents the column from ever being wider than the container */
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  width: 100%;
}

.datagrid-hub-card {
  width: 100%;
  min-width: 0; /* prevents grid blowout from long text */
  min-height: 228px;
  background: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: default;
  transition: border-color 0.12s ease, background 0.12s ease;
  padding: 0;
  position: relative;
}

.datagrid-hub-card:hover {
  background: #1c1c1c;
  border-color: #363636;
}

.datagrid-hub-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.datagrid-hub-card[data-disabled="true"] {
  opacity: 0.5;
}

.datagrid-hub-card-top {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #242424;
  flex-shrink: 0;
}

.datagrid-hub-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #555;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.datagrid-hub-card-eyebrow-icon {
  flex-shrink: 0;
  color: #555;
}

.datagrid-hub-card-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ececec;
  overflow-wrap: break-word;
  word-break: break-word;
}

.datagrid-hub-card-title svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #8f8f8f;
}

.datagrid-hub-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #818181;
}

.datagrid-hub-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 16px 14px;
  gap: 10px;
}

.datagrid-hub-card-launch-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  background: linear-gradient(180deg, rgba(24, 24, 24, 0) 0%, rgba(12, 12, 12, 0.96) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    max-height 0.16s ease,
    padding 0.16s ease,
    border-color 0.16s ease;
  pointer-events: none;
}

.datagrid-hub-card-launch-row.is-single {
  grid-template-columns: 1fr;
}

.datagrid-hub-card:hover .datagrid-hub-card-launch-row,
.datagrid-hub-card:focus-within .datagrid-hub-card-launch-row {
  opacity: 1;
  transform: translateY(0);
  max-height: 68px;
  padding: 12px 16px 16px;
  border-top-color: #262626;
  pointer-events: auto;
}

.datagrid-hub-card-launch-btn {
  appearance: none;
  border: 1px solid #343434;
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(35, 35, 35, 0.97), rgba(23, 23, 23, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #d8d8d8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.datagrid-hub-card-launch-btn.is-run-now {
  border-color: rgba(88, 121, 93, 0.56);
  background: linear-gradient(180deg, rgba(33, 44, 36, 0.98), rgba(23, 31, 26, 0.98));
  color: #dce9df;
}

.datagrid-hub-card-launch-btn.is-schedule {
  border-color: rgba(80, 108, 148, 0.56);
  background: linear-gradient(180deg, rgba(28, 36, 47, 0.98), rgba(20, 26, 35, 0.98));
  color: #dfe9f8;
}

.datagrid-hub-card-launch-btn.is-configure {
  width: 100%;
  min-height: 36px;
  height: 36px;
  border-color: rgba(88, 111, 150, 0.58);
  background: linear-gradient(180deg, rgba(29, 36, 47, 0.98), rgba(19, 25, 33, 0.98));
  color: #e1edff;
}

.datagrid-hub-card-launch-btn:hover {
  background: linear-gradient(180deg, rgba(42, 42, 42, 0.98), rgba(29, 29, 29, 0.98));
  border-color: #4a4a4a;
}

.datagrid-hub-card-launch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.22);
}

.datagrid-hub-card-launch-btn.is-run-now:hover {
  background: linear-gradient(180deg, rgba(39, 55, 44, 0.98), rgba(28, 39, 31, 0.98));
  border-color: rgba(110, 151, 117, 0.72);
  color: #e6f5ea;
}

.datagrid-hub-card-launch-btn.is-schedule:hover {
  background: linear-gradient(180deg, rgba(36, 48, 63, 0.98), rgba(25, 34, 46, 0.98));
  border-color: rgba(104, 140, 196, 0.74);
  color: #edf4ff;
}

.datagrid-hub-card-launch-btn.is-configure:hover {
  background: linear-gradient(180deg, rgba(36, 47, 61, 0.98), rgba(24, 32, 43, 0.98));
  border-color: rgba(110, 143, 194, 0.74);
  color: #f1f7ff;
}

.datagrid-hub-card-launch-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (hover: none) {
  .datagrid-hub-card-launch-row {
    opacity: 1;
    transform: none;
    max-height: 68px;
    padding: 12px 16px 16px;
    border-top-color: #262626;
    pointer-events: auto;
  }
}

.datagrid-hub-card-section {
  display: flex;
  flex-direction: column;
}

.datagrid-hub-card-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 7px;
}

.datagrid-hub-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.datagrid-hub-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.datagrid-hub-card-tag.is-email {
  background: rgba(238, 121, 88, 0.14);
  color: #ffbea8;
}

.datagrid-hub-card-tag.is-sms {
  background: rgba(63, 185, 80, 0.14);
  color: #98f0a7;
}

.datagrid-hub-card-tag.is-phone {
  background: rgba(90, 160, 235, 0.14);
  color: #bcdcff;
}

.datagrid-hub-card-tag.is-automated-ai {
  background: rgba(220, 160, 48, 0.14);
  color: #ffd28b;
}

.datagrid-hub-card-vendors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.datagrid-hub-card-vendor {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  background: #202020;
}

.datagrid-hub-card-vendor-mark {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.datagrid-hub-card-vendor-mark img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

.datagrid-hub-card-vendor-name {
  font-size: 12px;
  font-weight: 600;
  color: #9b9b9b;
  white-space: nowrap;
}

.datagrid-note-action-detail-toolbar {
  margin-bottom: 12px;
}

.datagrid-note-action-detail-toolbar .datagrid-note-pro-toolbar,
.datagrid-note-main-pro-row .datagrid-note-pro-toolbar {
  gap: 6px;
  padding: 0;
  border-bottom: none;
  background: none;
}

.datagrid-note-action-detail-toolbar .datagrid-pro-pill,
.datagrid-note-main-pro-row .datagrid-pro-pill {
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  box-shadow: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.datagrid-note-action-detail-toolbar .datagrid-pro-pill svg,
.datagrid-note-main-pro-row .datagrid-pro-pill svg {
  color: var(--pill-color, #999999);
}

.datagrid-note-action-detail-toolbar .datagrid-pro-pill:hover:not(:disabled),
.datagrid-note-main-pro-row .datagrid-pro-pill:hover:not(:disabled) {
  border-color: #777;
  background: rgba(120, 120, 120, 0.28);
  color: #eeeeee;
}

.datagrid-note-action-detail-toolbar .datagrid-pro-pill.is-active,
.datagrid-note-main-pro-row .datagrid-pro-pill.is-active {
  border-color: #888;
  background: rgba(120, 120, 120, 0.32);
  color: #ffffff;
}

.datagrid-note-action-detail-body {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

.datagrid-note-action-detail-body .datagrid-twilio-composer {
  padding: 0;
  border-bottom: none;
  background: transparent;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.datagrid-note-action-detail-note {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #333333;
  border-radius: 2px;
  background: #111111;
  color: #888888;
  line-height: 1.5;
}

.datagrid-note-action-detail-note strong {
  color: #e0e0e0;
  font-size: 13px;
}

@media (max-width: 760px) {
  .datagrid-note-action-workspace-shell {
    padding: 12px 12px 0;
  }

  .datagrid-note-action-workspace-header {
    grid-template-columns: 1fr;
  }

  .datagrid-note-action-workspace-nav.is-secondary {
    justify-self: start;
  }

  /* Action buttons: two per row on tablet */
  .datagrid-twilio-composer-action-btn {
    flex: 0 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Workspace body: must not exceed shell width */
  .datagrid-note-action-workspace-body,
  .datagrid-note-action-detail-body {
    min-width: 0;
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  /* Action buttons: full width on phone */
  .datagrid-twilio-composer-action-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/* MapView.css */

/* Base.css - Core layout, spacing, typography, forms, and common components */

/* Based on Primer design system with 4px/8px/12px/16px spacing scale */

*, *::before, *::after {
  line-height: 1.5;
}

/* ========================================
   Page Layout
   ======================================== */

.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}

.page-head {
  margin-bottom: 16px;
}

.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.page-head-title-row h2 {
  margin-bottom: 0;
}

.page-head-title-actions {
  margin-left: auto;
}

.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}

.page-head p:last-of-type {
  margin-bottom: 16px;
}

.page-head p strong {
  color: var(--text);
  font-weight: 600;
}

.page-head p em {
  color: var(--text);
  font-style: normal;
}

.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}

.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ========================================
   Header Stats - Primer control-small
   ======================================== */

.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-row svg {
  color: var(--muted);
}

.stat-label {
  color: var(--muted);
}

.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}

.stat-value.stat-running {
  color: var(--success);
}

.header-actions {
  margin-left: auto;
}

/* ========================================
   Badges
   ======================================== */

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */

.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.card-body {
  padding: 16px;
  min-width: 0;
}

/* ========================================
   Forms - Primer control-medium
   ======================================== */

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group.span-2 {
  grid-column: span 2;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.input-label strong {
  font-weight: 600;
}

.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */

.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}

.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}

/* Select dropdown */

select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}

.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

.field-hint strong,
.field-hint em {
  color: var(--text);
}

/* ========================================
   Buttons - Primer button system
   ======================================== */

/* Base button - Compact shared system */

.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}

.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

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

/* Primary button (green) */

.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}

.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}

/* Danger button - Primer button-danger */

.btn-danger {
  color: var(--error);
}

.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}

/* Icon button - compact square with 12px icons */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-btn svg {
  width: 12px;
  height: 12px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

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

.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}

/* Text button / link - Primer button-invisible */

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}

.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* Small buttons */

.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.icon-btn-sm {
  width: 20px;
  height: 20px;
}

.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}

.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}

.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

/* ========================================
   Checkboxes - Primer control
   ======================================== */

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}

.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}

/* ========================================
   Typography - Primer text tokens
   ======================================== */

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}

code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* Tag styles defined in App.css */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

/* ========================================
   Tables - Primer DataTable
   ======================================== */

.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}

.target-queue-table tr:last-child td {
  border-bottom: none;
}

.target-queue-table tr:hover {
  background: var(--bg);
}

/* ========================================
   Sections
   ======================================== */

.target-section {
  margin-bottom: 16px;
}

.target-select-row {
  display: flex;
  align-items: center;
}

.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}

.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.instructions-text strong {
  color: var(--text);
}

.instructions-text em {
  color: var(--muted);
  font-style: italic;
}

/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */

.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}

.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-status {
  font-size: 13px;
  color: var(--success);
}

.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

/* ========================================
   Help Text & Info
   ======================================== */

.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.below-help strong {
  color: var(--text);
}

.below-help a {
  color: #58a6ff;
}

.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */

.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

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

/* ========================================
   Responsive - Primer breakpoints
   ======================================== */

/* Small tablets and large phones - 768px and below */

@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}

/* Phones - 480px and below */

@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}

/* Extra small phones - 360px and below */

@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}

/* ── Page layout overrides ────────────────────────────────────────────────── */

/* .mapview-page is also .page-container — override its scroll/height rules  */

.mapview-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 45px);
  min-height: 0;       /* override page-container min-height: 100vh */
  overflow: hidden;    /* override page-container overflow-y: auto  */
  padding: 16px;
}

.mapview-page .page-head {
  flex-shrink: 0;
}

.mapview-page .page-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Map card ─────────────────────────────────────────────────────────────── */

.mapview-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, #242424);
  border: 1px solid var(--line, #2e2e2e);
  border-radius: 6px;
  overflow: hidden;
}

/* ── Status bar ───────────────────────────────────────────────────────────── */

.mapview-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-alt, #1e1e1e);
  border-bottom: 1px solid var(--line, #2e2e2e);
  min-height: 32px;
  font-size: 13px;
  color: var(--muted, #888888);
  flex-shrink: 0;
}

.mapview-status-left,
.mapview-status-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mapview-status-info {
  color: var(--muted, #888888);
}

.mapview-status-error {
  color: #f85149;
}

.mapview-status-geocoding {
  color: #58a6ff;
  font-size: 12px;
}

/* ── Map container ────────────────────────────────────────────────────────── */

.mapview-map-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
}

.mapview-container {
  width: 100%;
  height: 100%;
}

/* ── Leaflet overrides for dark theme ─────────────────────────────────────── */

.mapview-container .leaflet-control-zoom a {
  background: var(--bg-alt, #1e1e1e);
  color: var(--text, #e4e4e4);
  border-color: var(--line, #2e2e2e);
}

.mapview-container .leaflet-control-zoom a:hover {
  background: var(--bg-elevated, #242424);
}

.mapview-container .leaflet-control-attribution {
  background: rgba(18, 18, 18, 0.8) !important;
  color: var(--muted, #888888) !important;
  font-size: 11px;
}

.mapview-container .leaflet-control-attribution a {
  color: #58a6ff !important;
}

/* ── Popup styling ────────────────────────────────────────────────────────── */

.mapview-popup-container .leaflet-popup-content-wrapper {
  background: var(--bg-card, #1a1a1a) !important;
  color: var(--text, #e4e4e4) !important;
  border: 1px solid var(--line, #2e2e2e) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  font-size: 13px !important;
  padding: 1px !important;
  text-align: left !important;
}

.mapview-popup-container .leaflet-popup-tip {
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--line, #2e2e2e);
}

.mapview-popup-container .leaflet-popup-close-button {
  color: var(--muted, #888888) !important;
}

.mapview-popup-container .leaflet-popup-close-button:hover {
  color: var(--text, #e4e4e4) !important;
}

.mapview-popup-container .leaflet-popup-content {
  margin: 10px 14px !important;
  line-height: 1.5 !important;
  max-width: none !important;
}

.mapview-popup-container .leaflet-popup-content * {
  max-width: none !important;
  box-sizing: content-box !important;
}

/* ── Empty state overlay ──────────────────────────────────────────────────── */

.mapview-empty-overlay {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 18, 18, 0.85);
}

.mapview-empty-card {
  text-align: center;
  padding: 40px 32px;
  max-width: 380px;
}

.mapview-empty-icon {
  color: var(--muted, #888888);
  margin-bottom: 16px;
  opacity: 0.5;
}

.mapview-empty-title {
  color: var(--text, #e4e4e4);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
}

.mapview-empty-text {
  color: var(--muted, #888888);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.mapview-empty-cta {
  display: inline-block;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.mapview-empty-cta:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.5);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .mapview-page {
    padding: 10px;
  }

  .mapview-status-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .mapview-empty-card {
    padding: 24px 16px;
  }

  .mapview-empty-title {
    font-size: 14px;
  }

  .mapview-empty-text {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .mapview-page {
    padding: 8px;
  }

  .mapview-card {
    border-radius: 4px;
  }
}
/* CapturePage.css - CapturePage-specific styles */

/* Import base styles for layout, forms, buttons, etc. */

/* Base.css - Core layout, spacing, typography, forms, and common components */

/* Based on Primer design system with 4px/8px/12px/16px spacing scale */

*, *::before, *::after {
  line-height: 1.5;
}

/* ========================================
   Page Layout
   ======================================== */

.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}

.page-head {
  margin-bottom: 16px;
}

.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.page-head-title-row h2 {
  margin-bottom: 0;
}

.page-head-title-actions {
  margin-left: auto;
}

.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}

.page-head p:last-of-type {
  margin-bottom: 16px;
}

.page-head p strong {
  color: var(--text);
  font-weight: 600;
}

.page-head p em {
  color: var(--text);
  font-style: normal;
}

.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}

.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ========================================
   Header Stats - Primer control-small
   ======================================== */

.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-row svg {
  color: var(--muted);
}

.stat-label {
  color: var(--muted);
}

.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}

.stat-value.stat-running {
  color: var(--success);
}

.header-actions {
  margin-left: auto;
}

/* ========================================
   Badges
   ======================================== */

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */

.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.card-body {
  padding: 16px;
  min-width: 0;
}

/* ========================================
   Forms - Primer control-medium
   ======================================== */

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group.span-2 {
  grid-column: span 2;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.input-label strong {
  font-weight: 600;
}

.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */

.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}

.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}

/* Select dropdown */

select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}

.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

.field-hint strong,
.field-hint em {
  color: var(--text);
}

/* ========================================
   Buttons - Primer button system
   ======================================== */

/* Base button - Compact shared system */

.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}

.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

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

/* Primary button (green) */

.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}

.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}

/* Danger button - Primer button-danger */

.btn-danger {
  color: var(--error);
}

.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}

/* Icon button - compact square with 12px icons */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-btn svg {
  width: 12px;
  height: 12px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

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

.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}

/* Text button / link - Primer button-invisible */

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}

.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* Small buttons */

.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.icon-btn-sm {
  width: 20px;
  height: 20px;
}

.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}

.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}

.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

/* ========================================
   Checkboxes - Primer control
   ======================================== */

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}

.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}

/* ========================================
   Typography - Primer text tokens
   ======================================== */

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}

code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* Tag styles defined in App.css */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

/* ========================================
   Tables - Primer DataTable
   ======================================== */

.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}

.target-queue-table tr:last-child td {
  border-bottom: none;
}

.target-queue-table tr:hover {
  background: var(--bg);
}

/* ========================================
   Sections
   ======================================== */

.target-section {
  margin-bottom: 16px;
}

.target-select-row {
  display: flex;
  align-items: center;
}

.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}

.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.instructions-text strong {
  color: var(--text);
}

.instructions-text em {
  color: var(--muted);
  font-style: italic;
}

/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */

.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}

.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-status {
  font-size: 13px;
  color: var(--success);
}

.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

/* ========================================
   Help Text & Info
   ======================================== */

.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.below-help strong {
  color: var(--text);
}

.below-help a {
  color: #58a6ff;
}

.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */

.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

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

/* ========================================
   Responsive - Primer breakpoints
   ======================================== */

/* Small tablets and large phones - 768px and below */

@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}

/* Phones - 480px and below */

@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}

/* Extra small phones - 360px and below */

@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}

:root {
  --capture-accent: #22c55e;
  --capture-accent-strong: #16a34a;
  --capture-accent-text: #86efac;
  --capture-accent-text-soft: #bbf7d0;
  --capture-accent-line: rgba(34, 197, 94, 0.28);
  --capture-accent-line-strong: rgba(34, 197, 94, 0.34);
  --capture-accent-fill: rgba(34, 197, 94, 0.12);
  --capture-accent-fill-strong: rgba(34, 197, 94, 0.16);
  --capture-accent-fill-soft: rgba(34, 197, 94, 0.02);
  --capture-surface-soft: rgba(255, 255, 255, 0.035);
  --capture-surface: rgba(255, 255, 255, 0.045);
  --capture-surface-strong: rgba(255, 255, 255, 0.06);
  --capture-surface-hover: rgba(255, 255, 255, 0.08);
  --capture-menu-surface: #2a2a2a;
  --capture-menu-surface-strong: #333333;
  --capture-menu-header-surface: #242424;
  --capture-subtle-blue: #5b78a8;
  --capture-subtle-blue-soft: rgba(91, 120, 168, 0.76);
  --capture-service-maps: #6b8aa6;
  --capture-service-maps-rgb: 107, 138, 166;
  --capture-service-yellowpages: #c0ac63;
  --capture-service-yellowpages-rgb: 192, 172, 99;
  --capture-bar-h: 24px;
  --capture-layout-gap: 10px;
  --capture-layout-column-gap: 16px;
  --capture-action-h: 32px;
}

.search-page-container {
  padding: 16px;
}

.search-page-container .page-header {
  margin-bottom: 16px;
}

/* ========================================
   Explore-style Workspace Shell
   ======================================== */

.capture-workspace,
.page-container.capture-workspace {
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
}

.capture-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: var(--capture-layout-gap) 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.capture-page-heading-copy {
  min-width: 0;
}

.capture-page-heading h2 {
  margin: 0;
  color: var(--text);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

.capture-page-heading p {
  margin: 6px 0 0;
  padding-bottom: 0;
  max-width: 520px;
  color: #8a8a8a;
  font-size: 12.5px;
  line-height: 1.5;
}

.capture-page-stack {
  gap: var(--capture-layout-gap);
}

.capture-page-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 280px);
  gap: var(--capture-layout-gap) var(--capture-layout-column-gap);
  align-items: start;
}

.capture-page-main-col {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--capture-layout-gap);
}

.capture-page-history-slot {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.capture-page-sidebar-col {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  position: sticky;
  top: 12px;
  padding: 12px;
  border: 1px solid rgba(139, 148, 158, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.capture-page-action-slot {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  align-self: start;
  width: 100%;
  margin-top: var(--capture-layout-gap);
}

.capture-page-main-col > .content-card,
.capture-page-main-col > .capture-query-runtime,
.capture-page-two-col > .capture-page-history-slot {
  margin-bottom: 0;
}

.capture-page-main-col > .content-card,
.capture-page-two-col > .capture-page-history-slot {
  background: var(--bg-elevated);
}

.capture-page-main-col > .capture-tier-banner {
  margin: 0;
}

/* Sidebar panel — GitHub-style: no card box, just heading + rows */

.capture-page-sidebar-col .capture-section-panel {
  border: none;
  background: none;
  box-shadow: none;
}

.capture-page-sidebar-col .capture-section-panel-header {
  padding: 0 0 10px 0;
  border-bottom: 1px solid var(--line);
  background: none;
}

.capture-page-sidebar-col .capture-section-heading h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.capture-page-sidebar-col .capture-section-panel-body {
  padding: 0;
  margin-top: 0;
}

.capture-page-sidebar-col .capture-rail-stat {
  padding: 8px 0;
}

.capture-page-sidebar-col .capture-rail-stat + .capture-rail-stat {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.capture-page-sidebar-col .capture-rail-stat span {
  font-size: 11px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.capture-page-sidebar-col .capture-rail-stat strong {
  font-size: 12px;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.capture-page-sidebar-col .capture-rail-stat strong .capture-rail-badge-realtime {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 3px;
  line-height: 1.6;
}

/* Sidebar job ID heading */

.capture-sidebar-jobid-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.capture-sidebar-jobid {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.capture-sidebar-jobid-link:hover .capture-sidebar-jobid {
  color: var(--link, #58a6ff);
  text-decoration: none;
}

.capture-sidebar-new-draft {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.capture-sidebar-jobid-icon {
  color: var(--muted);
  flex-shrink: 0;
}

/* Job ID link in sidebar stat row */

.capture-rail-jobid-link {
  color: var(--link, #58a6ff);
  text-decoration: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
}

.capture-rail-jobid-link:hover {
  text-decoration: underline;
}

/* Google Maps logo in Source row */

.capture-rail-source-logo {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Source / Country strong needs inline-flex for icon content */

.capture-page-sidebar-col .capture-rail-stat strong.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Start Capture button in sidebar slot */

.capture-sidebar-run-wrap {
  padding: 12px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}

.capture-sidebar-run-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: var(--capture-action-h);
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  background: var(--capture-accent, #22c55e);
  color: #000;
}

.capture-page-action-slot .capture-sidebar-run-wrap {
  padding: 0;
  margin: 0;
  border-top: none;
}

.capture-sidebar-cta-wrap {
  margin-top: 8px;
}

.capture-demo-signup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--capture-action-h);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}

.capture-demo-signup-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.capture-demo-example-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--capture-accent-text);
  background: var(--capture-accent-fill);
  border: 1px solid var(--capture-accent-line);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.capture-demo-example-btn:hover {
  background: var(--capture-accent-fill-strong);
  border-color: var(--capture-accent-line-strong);
}

.capture-sidebar-run-btn:hover {
  background: var(--capture-accent-strong, #16a34a);
}

.capture-sidebar-run-wrap.is-stop .capture-sidebar-run-btn {
  background: rgba(218, 54, 51, 0.18);
  color: #f87171;
  border: 1px solid rgba(218, 54, 51, 0.3);
}

.capture-sidebar-run-wrap.is-stop .capture-sidebar-run-btn:hover {
  background: rgba(218, 54, 51, 0.28);
}

.capture-sidebar-run-wrap.is-not-ready .capture-sidebar-run-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: default;
  opacity: 0.7;
}

/* is-ready green border on filled builder fields */

.capture-builder-field.is-ready {
  border-color: rgba(34, 197, 94, 0.4);
  background: var(--bg-alt);
}

/* keep green border when focused and has a value */

.capture-builder-field.is-ready:focus-within {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

/* while running: suppress green border and mute all field content */

.capture-builder-field:has(:disabled).is-ready {
  border-color: var(--border);
  box-shadow: none;
}

.capture-builder-field:has(:disabled):focus-within {
  border-color: var(--border);
  box-shadow: none;
}

.capture-builder-field:has(:disabled) .search-input {
  color: var(--muted);
  opacity: 0.55;
}

.capture-builder-field:has(:disabled) .capture-location-select-toggle {
  opacity: 0.35;
  color: var(--muted);
}

/* Mode select (CoverageModeSelect) disabled state — match other inputs */

.capture-builder-field:has(.coverage-mode-select.disabled) .coverage-mode-select-trigger {
  color: var(--muted);
  opacity: 0.55;
}

.capture-builder-field:has(.coverage-mode-select.disabled).is-ready {
  border-color: var(--border);
  box-shadow: none;
}

@media (max-width: 960px) {
  .capture-page-two-col {
    grid-template-columns: 1fr;
  }
  .capture-page-main-col,
  .capture-page-history-slot,
  .capture-page-sidebar-col,
  .capture-page-action-slot {
    grid-column: 1;
    grid-row: auto;
  }
  .capture-page-main-col { order: 1; }
  .capture-page-action-slot { order: 2; }
  .capture-page-sidebar-col { order: 3; }
  .capture-page-history-slot { order: 4; }
  .capture-page-sidebar-col {
    position: static;
  }
}

.capture-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 0 2px;
}

.capture-hero-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.capture-hero-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--capture-accent);
  margin-bottom: 8px;
}

.capture-hero-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.capture-hero-title-row h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.capture-hero-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid var(--capture-accent-line);
  background: var(--capture-accent-fill);
  color: var(--capture-accent-text);
  font-size: 11px;
  font-weight: 700;
}

.capture-hero-description {
  margin: 0;
  max-width: 860px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.capture-tier-inline {
  margin-top: 12px;
  max-width: 720px;
}

.capture-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  min-width: min(460px, 100%);
  flex: 0 0 auto;
}

.capture-hero-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 2px;
  border: 1px solid #5a5a5a;
  background: rgba(115, 115, 115, 0.12);
}

.capture-hero-metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.capture-hero-metric-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.capture-query-card {
  overflow: hidden;
}

/* query-header, query-badge, query-toolbar, query-chip, and
   toolbar-actions are defined in the Explore-style Shell section below.
   Only unique selectors kept here. */

.capture-query-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.capture-query-heading-copy {
  min-width: 0;
}

.capture-query-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.capture-query-subtitle {
  font-size: 12px;
  color: var(--muted);
}

.capture-source-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.capture-source-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.capture-source-switch-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
}

.capture-source-switch-btn.is-active {
  border-color: var(--capture-accent-line-strong);
  background: var(--capture-accent-fill);
  color: var(--capture-accent-text);
}

.capture-query-chip-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.capture-query-chip-value {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace);
}

.capture-toolbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  background: rgba(96, 165, 250, 0.08);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.capture-toolbar-link:hover {
  background: rgba(96, 165, 250, 0.14);
  text-decoration: none;
}

.capture-toolbar-link-button {
  cursor: pointer;
  font-family: inherit;
}

.capture-query-body {
  padding: 14px;
}

.capture-query-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.capture-query-main {
  min-width: 0;
}

.capture-query-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capture-rail-card {
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.12);
  padding: 14px;
}

.capture-rail-card-label {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.capture-rail-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.capture-rail-stat + .capture-rail-stat {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.capture-rail-stat span {
  color: var(--muted);
  font-size: 12px;
}

.capture-rail-stat strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.capture-rail-empty {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
}

.capture-rail-status.is-active,
.capture-rail-status.is-queued { color: #8ab4ff; }

.capture-rail-status.is-completed { color: #7ddb8c; }

.capture-rail-status.is-failed,
.capture-rail-status.is-canceled,
.capture-rail-status.is-stopping { color: #f4a8b4; }

.capture-rail-progress {
  overflow: hidden;
}

.capture-section-panel {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #2d2d2d;
  overflow: hidden;
}

.capture-section-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: #2d2d2d;
}

.capture-section-panel-header h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.capture-section-panel-header p {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.capture-section-panel .form-grid,
.capture-section-panel .form-group {
  margin-bottom: 0;
}

.capture-section-panel .capture-form-grid {
  padding: 16px;
}

.capture-inline-target {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.capture-inline-target-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid var(--capture-accent-line);
  background: var(--capture-accent-fill);
  color: var(--capture-accent-text);
  font-size: 11px;
  font-weight: 700;
}

.capture-inline-target-link {
  border: none;
  background: none;
  color: var(--fgColor-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.capture-inline-target-link:hover {
  text-decoration: underline;
}

.capture-compact-field {
  max-width: 180px;
}

.capture-pages-input {
  max-width: 120px;
}

.capture-options-card .card-body {
  padding-top: 14px;
}

.capture-options-header {
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.02) 40%, transparent 72%),
    #242424;
}

.capture-action-card .card-body {
  padding: 14px 16px;
}

.capture-action-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.capture-action-status {
  flex: 1 1 520px;
  min-width: 0;
}

.capture-action-controls {
  flex: 0 0 auto;
}

/* ========================================
   Tier Notice Banners
   ======================================== */

.tier-notice {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 2px;
  margin-top: 8px;
  margin-bottom: 4px;
  line-height: 1.4;
}

.tier-notice strong {
  font-weight: 600;
}

.tier-notice a {
  color: #58a6ff;
  text-decoration: none;
}

.tier-notice a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.free-tier-notice {
  background: rgba(187, 128, 9, 0.1);
  border: 1px solid rgba(187, 128, 9, 0.3);
  color: var(--text);
}

.free-tier-notice strong {
  color: #d29922;
}

.pro-tier-notice {
  background: rgba(63, 185, 80, 0.08);
  border: 1px solid rgba(63, 185, 80, 0.25);
  color: var(--text);
}

.pro-tier-notice strong {
  color: #3fb950;
}

/* ========================================
   CapturePage-Specific Components
   ======================================== */

/* Make plus button match input field styling */

.input-with-action .icon-btn {
  width: 32px;
  height: 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
}

.input-with-action .icon-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg);
}

.input-with-action .icon-btn:disabled {
  opacity: 0.5;
  color: var(--muted);
}

/* Queue Section */

.queue-section {
  margin-top: 16px;
}

.target-queue-inline {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  overflow: hidden;
}

.queue-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #2d2d2d;
}

.queue-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.queue-card .card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.target-queue-container {
  padding: 0;
}

/* ========================================
   Logging Timeline (unique to CapturePage)
   ======================================== */

.logging-timeline {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-top: 16px;
}

.logging-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.logging-timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.logging-timeline-actions {
  display: flex;
  gap: 8px;
}

.logging-timeline-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}

.logging-timeline-btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.logging-timeline-btn.active {
  color: var(--success);
  border-color: rgba(63, 185, 80, 0.4);
}

.logging-timeline-content {
  padding: 12px 16px;
  max-height: 160px;
  overflow-y: auto;
}

.logging-timeline-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 16px 0;
}

.logging-timeline-entries {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.logging-timeline-entry {
  font-size: 13px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--muted);
  padding: 4px 0;
}

.logging-duplicate-count {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
  border-radius: 2px;
}

.logging-inline-link {
  color: var(--link, #58a6ff);
  text-decoration: none;
}

.logging-inline-link:hover {
  color: var(--link-hover, #79c0ff);
  text-decoration: underline;
}

/* ========================================
   Recent Cities Dropdown
   ======================================== */

.page-container.capture-workspace {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* ========================================
   Compact Page Header (GitHub-style)
   ======================================== */

.page-head-compact {
  margin-bottom: 16px;
}

.page-head-title {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0 0 8px 0;
}

.page-head-title h2 {
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}

.page-head-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.page-head-title-icon img,
.page-head-title-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.page-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.page-head-icon {
  flex-shrink: 0;
}

.page-head-compact h2 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: var(--app-page-title-size, 26px);
  font-weight: 600 !important;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.page-head-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
}

.page-head .scraper-head-description {
  margin: 0 0 6px 0 !important;
  padding-bottom: 0 !important;
  max-width: 920px !important;
  line-height: 1.45 !important;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: pretty;
}

.page-head .scraper-head-description a {
  color: var(--link, #58a6ff);
  text-decoration: none;
  font-weight: 500;
}

.page-head .scraper-head-description a:hover {
  color: var(--link-hover, #79c0ff);
  text-decoration: underline;
}

.page-head .scraper-head-description:last-of-type {
  margin-bottom: 0 !important;
}

.scraper-head-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.scraper-head-summary-text {
  margin: 0 !important;
  padding-bottom: 0 !important;
  max-width: none !important;
  min-width: 0;
  flex: 1 1 auto;
}

.scraper-head-quick-links {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.scraper-head-quick-links a {
  color: var(--fgColor-accent);
  text-decoration: none;
  white-space: nowrap;
}

.scraper-head-quick-links a:hover {
  text-decoration: underline;
}

.scraper-head-quick-links-sep {
  color: var(--muted);
  user-select: none;
}

/* ── Page head nav (tab-style links) ── */

.page-head-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  border-bottom: 1px solid var(--line);
}

.page-head-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.1s ease;
  white-space: nowrap;
}

.page-head-nav-link:hover {
  color: var(--text);
  border-bottom-color: var(--line);
}

.page-head-nav-active {
  color: var(--text);
  font-weight: 500;
  border-bottom-color: #f78166;
}

/* ── Header badges ── */

.page-head-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.head-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.head-badge .badge-label {
  color: var(--muted);
}

.head-badge .badge-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 2em;
  padding: 2px 10px;
}

.head-badge .badge-value svg {
  flex-shrink: 0;
}

.head-badge-pro .badge-value {
  color: #f6d365;
  border-color: rgba(246, 211, 101, 0.35);
}

.head-badge-running .badge-value {
  color: var(--success);
  border-color: rgba(63, 185, 80, 0.35);
}

/* ── Tier notice (dismissible) ── */

.compact-tier-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 0;
}

.compact-tier-notice a {
  color: var(--fgColor-accent);
  text-decoration: none;
}

.compact-tier-notice a:hover {
  text-decoration: underline;
}

.tier-notice-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.tier-notice-dismiss:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Paragraph spacing: remove top margins and keep 12px bottom spacing */

.page-container.capture-workspace p {
  margin: 0 0 12px;
  padding-bottom: 12px;
}

/* ========================================
   Cards / Content Containers
   ======================================== */

.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: #242424;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  max-height: 45px;
}

.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.card-body {
  padding: 16px;
}

/* ========================================
   Forms
   ======================================== */

.form-group {
  margin-bottom: 16px;
}

.form-padding {
  margin-top: 16px !important;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group.span-2 {
  grid-column: span 2;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 1080px) {
  .capture-hero {
    flex-direction: column;
  }

  .capture-hero-metrics {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capture-query-layout {
    grid-template-columns: 1fr;
  }

  .capture-query-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  .capture-hero-title-row h2 {
    font-size: 24px;
  }

  .capture-hero-metrics {
    grid-template-columns: 1fr;
  }

  .capture-query-header,
  .capture-action-row {
    align-items: stretch;
  }

  .capture-query-header {
    flex-direction: column;
  }

  .capture-source-switch {
    width: 100%;
  }

  .capture-source-switch-btn {
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
  }

  .capture-action-controls {
    width: 100%;
  }

  .capture-compact-field,
  .capture-pages-input {
    max-width: 100%;
  }
}

.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.input-label .label-icon {
  color: var(--muted);
  flex-shrink: 0;
}

.input-label strong {
  font-weight: 600;
}

.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}

/* ========================================
   Inputs
   ======================================== */

.capture-workspace .search-input {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s;
}

.capture-workspace .search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.capture-workspace .search-input::placeholder {
  color: var(--muted);
}

.capture-workspace .search-input.required-missing {
  border-color: var(--error);
}

.capture-workspace .search-input:-webkit-autofill,
.capture-workspace .search-input:-webkit-autofill:hover,
.capture-workspace .search-input:-webkit-autofill:focus,
.capture-workspace .search-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition:
    background-color 9999s ease-out 0s,
    color 9999s ease-out 0s;
}

.capture-workspace select.search-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.capture-workspace select.search-input optgroup {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fgColor-muted, #7d8590);
  background: var(--bgColor-muted, #21262d);
  padding: 8px 0 4px 0;
}

.capture-workspace select.search-input option {
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  padding: 6px 12px;
  color: var(--fgColor-default, #e6edf3);
  background: var(--bgColor-default, #0d1117);
}

.capture-workspace select.search-input option:hover,
.capture-workspace select.search-input option:focus {
  background: rgba(255, 255, 255, 0.07);
}

.input-with-action {
  display: flex;
  gap: 8px;
}

.capture-workspace .input-with-action .search-input {
  flex: 1;
}

.field-hint {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 6px;
  padding-left: 4px;
}

/* Use this when you truly have two hint columns */

.field-hint.field-hint-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.field-hint .innerHint {
  display: block;
  min-width: 0;
}

.field-hint strong,
.field-hint em {
  color: var(--text);
}

/* ========================================
   Buttons - Primer-style
   ======================================== */

/* Base button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
}

/* Capture page scoped overrides for start buttons and labels */

.page-container.capture-workspace .control-btn.start-btn,
.page-container.capture-workspace .control-btn.primary.start-btn {
  height: 22px;
}

.page-container.capture-workspace .control-btn.start-btn .btn-label {
  font-size: 13px;
}

.btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--accent);
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

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

/* Primary button (green) */

.btn-primary {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: #2ea043;
  border-color: #2ea043;
}

/* Danger button */

.btn-danger {
  color: var(--error);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.1);
  border-color: var(--error);
}

/* Icon button - square */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--text);
}

.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

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

.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: rgba(248, 81, 73, 0.1);
}

/* Text button / link */

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
}

/* Small buttons */

.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
}

.icon-btn-sm {
  width: 28px;
  height: 28px;
}

/* ========================================
   Sections
   ======================================== */

.target-section {
  margin-bottom: 16px;
}

.target-select-row {
  display: flex;
  align-items: center;
}

.target-select-row .select-menu-wrapper {
  width: 100%;
  max-width: 400px;
}

.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: 16px;
}

.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.instructions-text strong {
  color: var(--text);
}

.instructions-text em {
  color: var(--muted);
  font-style: italic;
}

/* ========================================
   Options Row Container (Two-column layout)
   ======================================== */

.options-row-container {
  display: flex;
  gap: 24px;
  padding: 16px 0 0 0;
  margin-top: 16px;
}

.options-row-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.options-row-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Hide right column when RuntimeProgress has no content */

.options-row-right:empty {
  display: none;
}

/* Legacy single-column fallback */

.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 0 0;
  margin-top: 16px;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}

.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
}

.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}

.inline-status {
  font-size: 13px;
  color: var(--success);
}

/* ========================================
   Action Area
   ======================================== */

.action-area {
  padding-top: 0;
  margin-top: 0;
  min-height: 40px;
}

.action-area-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-area-row .status-bar {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
}

.action-area-row .runtime-controls {
  flex-shrink: 0;
}

/* ========================================
   Queue Section
   ======================================== */

.queue-section {
  margin-top: 16px;
}

/* Tags */

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Tag styles defined in App.css */

.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

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

/* ========================================
   Job History Section - Accordion
   ======================================== */

.job-history-section {
  margin: 16px 0 0 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-card);
  overflow: hidden;
}

.job-history-accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.job-history-accordion-header:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.job-history-section.expanded .job-history-accordion-header {
  border-bottom-color: var(--line);
  color: var(--text);
}

.accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.1s ease;
}

.job-history-accordion-header:hover .accordion-icon {
  color: var(--text);
}

.accordion-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  letter-spacing: 0.3px;
}

.job-history-accordion-content {
  padding: 0;
}

/* Override embedded styles when in accordion */

.job-history-accordion-content .job-history-embedded {
  background: transparent;
}

.job-history-accordion-content .page-content {
  padding: 0;
}

/* ========================================
   Help Text
   ======================================== */

.below-help {
  color: var(--muted);
  padding-top: 24px;
  border-top: 0;
}

.activity-log-header {
  gap: 4px !important;
}

.button-bar-right {
  display: flex;
  justify-content: flex-end;
  gap: 4px !important;
  margin-left: auto;
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  .button-bar-right {
    gap: 4px !important;
  }
}

.content-card .card-header .button-bar-right {
  gap: 4px !important;
}

.logging-timeline-btn {
  height: 24px;
  padding: 0 6px;
  font-size: 13px;
  border-radius: 2px;
  margin: 0;
}

.content-card .card-header .button-bar-right .logging-timeline-btn {
  height: 24px;
  padding: 0 6px;
  font-size: 13px;
  border-radius: 2px;
  margin: 0;
}

.below-help strong {
  color: var(--text);
}

.below-help a {
  color: #58a6ff;
}

.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* ========================================
   Misc
   ======================================== */

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
}

code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 2px;
  color: var(--text);
}

/* ========================================
   Responsive
   ======================================== */

/* Tablet - 1024px and below */

@media (max-width: 1024px) {
  .page-container.capture-workspace {
    padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  }

  .page-head-description {
    font-size: 12px;
  }

  .scraper-head-summary-row {
    align-items: flex-start;
    gap: 8px;
  }

  .scraper-head-summary-text {
    flex: 1 1 100%;
  }

  .scraper-head-quick-links {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* Small tablets / large phones - 768px and below */

@media (max-width: 768px) {
  .options-row-container {
    flex-direction: column;
    padding: 16px 0 0 0;
  }

  .options-row-right {
    margin-top: 16px;
  }

  .page-container.capture-workspace {
    padding: 14px 16px;
  }

  .page-head-compact {
    margin-bottom: 10px;
  }

  .page-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .page-head-compact h2 {
    font-size: var(--app-page-title-size-tablet, 21px);
  }

  .capture-page-header h1 {
    font-size: var(--app-page-title-size-tablet, 21px);
  }

  .page-head-badges {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .target-select-row .select-menu-wrapper {
    max-width: none;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  /* Options section responsive */
  .options-section {
    gap: 12px;
  }

  .options-group {
    gap: 8px;
  }

  .option-row {
    /* Ensure rows don't wrap unexpectedly */
    flex-wrap: nowrap;
  }

  .option-desc-inline {
    display: block;
    margin-top: 2px;
    margin-left: 0;
  }

  /* Logging timeline responsive */
  .logging-timeline-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .logging-timeline-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .logging-timeline-content {
    padding: 10px 12px;
  }

  /* Queue table responsive */
  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }

  /* Tags responsive */
  .tags-list {
    flex-wrap: wrap;
  }

  /* Action area responsive */
  .action-area-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .action-area .subdivision-progress-container {
    margin-top: 4px;
  }

  /* Rating slider responsive */
  .rating-slider {
    max-width: 100%;
  }

  /* Input with action responsive */
  .input-with-action {
    flex-direction: column;
  }

  /* Select menu responsive */
  .select-menu-wrapper {
    width: 100%;
  }

  /* Button bar responsive */
  .button-bar-right {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Phones - 480px and below */

@media (max-width: 480px) {
  .page-container.capture-workspace {
    padding: 12px 14px;
  }

  .page-head-compact h2 {
    font-size: var(--app-page-title-size-phone, 17px);
  }

  .capture-page-header h1 {
    font-size: var(--app-page-title-size-phone, 17px);
  }

  .page-head-description {
    font-size: 11px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn,
  .icon-btn {
    height: 32px;
    font-size: 12px;
  }

  .icon-btn {
    width: 32px;
  }

  .capture-workspace .search-input {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  /* Coverage select: full width + match city input height on mobile */
  .coverage-mode-select {
    width: 100% !important;
    max-width: 100% !important;
    height: 36px !important;
  }

  /* Form labels responsive */
  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .input-meta {
    font-size: 11px;
    display: block;
    width: 100%;
    margin-left: 0;
    margin-top: 2px;
  }

  /* Field hints responsive */
  .field-hint {
    font-size: 11px;
    line-height: 1.4;
  }

  .field-hint code {
    font-size: 11px;
    padding: 1px 4px;
  }

  /* Options responsive for small screens */
  .options-group-title {
    font-size: 11px;
  }

  /* Force layout for option rows on mobile */
  .option-row {
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .option-label-text {
    font-size: 13px;
    width: 100%;
    margin-top: 1px;
  }

  .option-desc-inline {
    font-size: 11px;
    margin-left: 0;
    display: block;
    width: 100%;
    padding-left: 0;
    margin-top: 2px;
  }

  /* Queue table mobile */
  .target-queue-container {
    margin: 0 -10px;
    width: calc(100% + 20px);
  }

  .target-queue-table {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
  }

  /* Tier notice responsive */
  .tier-notice {
    font-size: 12px;
    padding: 8px 10px;
  }

  .head-badge .badge-label {
    display: none;
  }

  .head-badge .badge-value {
    font-size: 11px;
    padding: 2px 8px;
  }

  /* Job history accordion responsive */
  .job-history-accordion-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Advanced settings responsive */
  .advanced-settings-toggle {
    font-size: 12px;
  }

  .advanced-settings-label {
    font-size: 11px;
  }

  .advanced-settings-desc {
    font-size: 11px;
  }

  /* Logging timeline mobile */
  .logging-timeline-entry {
    font-size: 11px;
    word-break: break-word;
    white-space: normal;
  }

  .logging-timeline-btn {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }

  /* Instructions responsive */
  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  /* Below help text responsive */
  .below-help {
    font-size: 12px;
    padding-top: 16px;
  }
}

/* Action area: mobile/full-width rows (phones + small tablets) */

@media (max-width: 900px) {
  .action-area-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
  }

  .action-area-row .status-bar {
    width: 100%;
  }

  .action-area-row .runtime-controls {
    width: 100%;
    justify-content: space-between;
  }

  .action-area .subdivision-progress-container {
    width: 100%;
    margin-top: 4px;
  }
}

/* Extra small phones - 360px and below */

@media (max-width: 360px) {
  .page-container.capture-workspace {
    padding: 10px;
  }

  .page-head-compact h2,
  .capture-page-header h1 {
    font-size: var(--app-page-title-size-mini, 14px);
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }

  .capture-workspace .search-input {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .capture-workspace select.search-input {
    font-size: 13px;
  }

  .btn {
    height: 36px;
    padding: 0 10px;
  }

  /* Ensure checkbox is side-by-side with label on small screens */
  .option-row {
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .option-row input[type="checkbox"] {
    margin-top: 2px;
  }
}

/* Target Queue Inline - appears under city input */

.target-queue-inline {
  margin-top: 8px;
  padding-top: 8px;
}

.queue-table-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.queue-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Pro tag styling aligned with IntroPage */

.pro-tag {
  font-size: 9px;
  font-weight: 700;
  color: #f6d365;
  background: rgba(246, 211, 101, 0.12);
  border: 1px solid rgba(246, 211, 101, 0.3);
  padding: 0 4px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  flex-shrink: 0;
  display: inline-block;
  margin-top: 3px;
  margin-left: 6px;
  transform: scale(0.75);
  transform-origin: left center;
  vertical-align: middle;
}

/* Options section layout */

.options-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.options-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.options-group-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 2px;
}

/* Single-line option row with checkbox */

.option-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
}

.option-row.nested {
  margin-left: 22px;
}

.option-row.disabled {
  opacity: 0.5;
}

.option-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-top: 3px; /* Align with first line of text */
  flex-shrink: 0;
  cursor: pointer;
}

.option-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.option-text-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.option-label-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  width: fit-content;
}

.option-label-text.disabled {
  cursor: not-allowed;
}

.option-desc-block {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* Advanced settings accordion */

.advanced-settings-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 4px 0;
  margin-top: 8px;
  cursor: pointer;
  font-weight: 500;
}

.advanced-settings-toggle:hover {
  text-decoration: underline;
}

.advanced-settings-toggle.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.advanced-settings-toggle.disabled:hover {
  text-decoration: none;
}

.advanced-settings-toggle svg {
  transition: transform 0.15s ease;
}

.advanced-settings-toggle.open svg,
.advanced-settings-toggle svg.rotated {
  transform: rotate(90deg);
}

.pro-badge-inline {
  font-size: 9px;
  font-weight: 600;
    font-size: 12px;
    white-space: normal; /* Allow label to wrap on very small screens */
  background: rgba(246, 211, 101, 0.15);
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.advanced-settings-content {
  padding: 2px 0 0 0;
  margin-top: 4px;
}

.advanced-settings-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.advanced-settings-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.advanced-settings-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* Rating slider row */

.rating-slider-row {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 6px;
}

.rating-slider-row .rating-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.rating-slider-row .rating-value {
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--accent);
  background: var(--bg-muted, rgba(0, 0, 0, 0.2));
  padding: 2px 6px;
  border-radius: 2px;
  min-width: 32px;
  text-align: center;
}

.rating-slider {
  width: 100%;
  max-width: 200px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--line);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.rating-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.rating-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

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

/* Configure link/button next to options */

.option-configure-link {
  font-size: 12px;
  color: var(--link);
  text-decoration: none;
  margin-left: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.option-configure-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ========================================
   Subdivision Progress Container
   ======================================== */

.subdivision-progress-container {
  margin-top: 8px;
  width: 100%;
}

/* Style the container to match the action area */

.action-area .subdivision-progress-container {
  background: transparent;
  margin: 0;
  margin-top: 8px;
  padding: 0;
}

/* Runtime Progress in right column */

.options-row-right .runtime-progress {
  margin-top: auto;
}

.options-row-right .runtime-progress-logs {
  height: 336px; /* Fixed height for 16 lines */
}

.capture-yellow-pages-page .options-row-right .runtime-progress-logs {
  height: 208px;
}

@media (max-width: 768px) {
  .capture-yellow-pages-page .options-row-right .runtime-progress-logs {
    height: 192px;
  }
}

/* Time estimate suffix for options */

.option-time-estimate {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
  font-family: var(--mono, ui-monospace, monospace);
}

/* ========================================
   Explore-style Shell Overrides
   ======================================== */

.capture-workspace {
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
}

.capture-page-stack {
  gap: var(--capture-layout-gap);
}

.capture-explore-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0;
  margin-bottom: var(--capture-layout-gap);
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.capture-toolbar-source {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.capture-toolbar-source-btn {
  --capture-source-rgb: 61, 113, 232;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(var(--capture-source-rgb), 0.3);
  border-radius: 2px;
  background: rgba(var(--capture-source-rgb), 0.08);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.capture-toolbar-source-btn:hover {
  border-color: rgba(var(--capture-source-rgb), 0.5);
  background: rgba(var(--capture-source-rgb), 0.14);
}

.capture-toolbar-source-btn.is-active {
  background: rgba(var(--capture-source-rgb), 0.22);
  border-color: rgba(var(--capture-source-rgb), 0.6);
}

.capture-toolbar-source-btn--maps {
  --capture-source-rgb: var(--capture-service-maps-rgb);
}

.capture-toolbar-source-btn--yellowpages {
  --capture-source-rgb: var(--capture-service-yellowpages-rgb);
}

.capture-toolbar-source-logo {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

.capture-toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  flex-shrink: 0;
}

/* ── Status badges (Go/Draft, Mode, Category) ────────── */

.capture-toolbar-status-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.capture-toolbar-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

.capture-toolbar-badge--go {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
}

.capture-toolbar-badge--set {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Tier badge in the toolbar ────────────────────────── */

.capture-toolbar-tier-group {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: var(--capture-bar-h);
}

.capture-toolbar-tier-group--free {
  margin-right: 4px;
}

.capture-toolbar-tier-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--capture-bar-h);
  box-sizing: border-box;
  padding: 0 6px;
  border: none;
  border-radius: 2px 0 0 2px;
  background: rgba(94, 176, 134, 0.25);
  color: #7ecba4;
  font-family: Monaco, Menlo, "Lucida Console", monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.capture-toolbar-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--capture-bar-h);
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.capture-toolbar-tier-badge--free {
  border: 1px solid #6f6f6f;
  background: rgba(207, 207, 207, 0.3);
  color: #e2e2e2;
}

.capture-toolbar-tier-badge--pro {
  border: 1px solid rgba(194, 164, 120, 0.4);
  background: rgba(194, 164, 120, 0.12);
  color: #d4b896;
}

.capture-toolbar-tier-badge--business {
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.1);
  background-image: linear-gradient(105deg, transparent 20%, rgba(255, 230, 100, 0.18) 50%, transparent 80%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-color: #c8a84b;
  background-image: linear-gradient(105deg, #b8923a 0%, #e8c96a 40%, #f5e08a 52%, #e8c96a 64%, #b8923a 100%);
  letter-spacing: 0.05em;
}

.capture-toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.capture-toolbar-history-controls {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 180px;
  max-width: 320px;
}

.capture-toolbar-nav,
.capture-toolbar-time,
.capture-toolbar-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line, #30363d);
  border-radius: 4px;
  background: var(--bg-elevated, #161b22);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.capture-toolbar-nav,
.capture-toolbar-time {
  cursor: pointer;
}

.capture-toolbar-time--static {
  cursor: default;
}

.capture-toolbar-action {
  cursor: pointer;
}

.capture-toolbar-nav {
  justify-content: center;
  width: 100%;
  padding: 0;
}

.capture-toolbar-time {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.capture-toolbar-time-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.capture-toolbar-time-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #e3a040;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.capture-toolbar-time.is-open,
.capture-toolbar-nav:hover,
.capture-toolbar-time:hover,
.capture-toolbar-action:hover {
  border-color: var(--accent, #58a6ff);
  background: #2d2d2d;
  text-decoration: none;
}

.capture-toolbar-time--static:hover {
  border-color: var(--line, #30363d);
  background: var(--bg-elevated, #161b22);
}

.capture-toolbar-nav:disabled,
.capture-toolbar-action.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.capture-toolbar-nav:disabled:hover,
.capture-toolbar-action.is-disabled:hover {
  border-color: var(--line, #30363d);
  background: var(--bg-elevated, #161b22);
}

.capture-run-wrap {
  display: inline-flex;
  align-items: stretch;
  height: 20px;
  border: 1px solid rgba(100, 100, 100, 0.4);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s, background 0.15s;
}

.capture-run-wrap:not(.is-stop):not(.is-not-ready) {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.12);
}

.capture-run-wrap.is-stop {
  border-color: rgba(224, 47, 68, 0.4);
  background: rgba(224, 47, 68, 0.12);
}

.capture-run-wrap.is-not-ready {
  border-color: rgba(100, 100, 100, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.capture-run-main,
.capture-run-arrow {
  border: none;
  background: transparent;
  cursor: pointer;
}

.capture-run-main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  white-space: nowrap;
  color: var(--text);
}

.capture-run-wrap:not(.is-stop):not(.is-not-ready) .capture-run-main {
  color: #7ddb8c;
}

.capture-run-wrap.is-stop .capture-run-main {
  color: #f4a8b4;
}

.capture-run-arrow {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.capture-tier-banner {
  margin: 0 0 var(--capture-layout-gap);
}

.capture-query-card,
.capture-options-card,
.capture-runtime-panel,
.capture-results-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
}

.capture-query-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elevated);
}

.capture-results-panel {
  border: none;
  background: transparent;
}

.capture-query-header {
  display: block;
  padding: 6px 12px;
  min-height: 34px;
  border-bottom: none;
  background: transparent;
}

.capture-query-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.capture-query-topline::-webkit-scrollbar {
  display: none;
}

.capture-qcollapse,
.capture-query-iconbtn,
.capture-query-iconlink {
  width: var(--capture-bar-h);
  height: var(--capture-bar-h);
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}

.capture-qcollapse-spacer {
  width: var(--capture-bar-h);
  flex-shrink: 0;
}

.capture-query-doclink {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: var(--capture-bar-h);
  padding: 0 8px;
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 2px;
  background: rgba(88, 166, 255, 0.06);
  color: var(--link, #58a6ff);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.capture-query-doclink:hover {
  color: var(--link-hover, #79c0ff);
  border-color: rgba(88, 166, 255, 0.3);
  background: rgba(88, 166, 255, 0.1);
  text-decoration: none;
}

.capture-query-doclink--end {
  margin-left: auto;
  flex-shrink: 0;
}

.capture-qcollapse:hover,
.capture-query-iconbtn:hover,
.capture-query-iconlink:hover {
  color: var(--text);
  background: var(--capture-surface);
}

.capture-query-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--capture-bar-h);
  min-width: var(--capture-bar-h);
  height: var(--capture-bar-h);
  padding: 0;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid transparent;
  background: var(--capture-accent-strong);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace);
  letter-spacing: -0.08em;
  text-rendering: geometricPrecision;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  flex-shrink: 0;
}

.capture-query-badge--maps {
  background: var(--capture-service-maps);
  border-color: #88a4bd;
  color: #f3f8fd;
}

.capture-query-badge--yellowpages {
  background: var(--capture-service-yellowpages);
  border-color: #dac87e;
  color: #120e07;
}

.capture-query-tier-slot {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.capture-query-tier-slot .capture-toolbar-tier-group--free {
  margin-right: 0;
}

.capture-query-row-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.capture-query-chip {
  display: inline-flex;
  align-items: stretch;
  height: var(--capture-bar-h);
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  overflow: hidden;
}

.capture-query-chip-label {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.capture-query-chip-value {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-left: 1px solid rgba(150, 150, 150, 0.35);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace);
  white-space: nowrap;
}

.capture-query-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 10px;
  align-items: stretch;
}

.capture-query-layout--maps {
  grid-template-columns: 1fr;
}

.capture-query-main,
.capture-query-rail,
.capture-query-rail > *,
.capture-section-panel,
.capture-section-panel-body,
.capture-section-panel-body .options-section,
.capture-section-panel-body .options-group {
  width: 100%;
  min-width: 0;
}

.capture-query-card,
.capture-query-body,
.capture-query-layout,
.capture-query-main {
  overflow: visible;
}

.capture-query-main,
.capture-query-rail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.capture-yellow-pages-main {
  gap: 0;
}

.capture-yellow-pages-workspace[data-query-collapsed='false'] .capture-query-runtime-head {
  box-shadow: inset 0 1px 0 var(--line);
}

.capture-builder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.capture-builder-draft {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
  overflow: visible;
}

.capture-builder-step-label {
  padding: 12px 12px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #bbb;
  letter-spacing: 0.3px;
}

.capture-builder-field {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  min-height: 32px;
  font-size: 13px;
}

.capture-builder-field--labeled .search-input,
.capture-builder-field--labeled .capture-location-select {
  width: 100%;
}

.capture-field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  margin-bottom: 4px;
}

.capture-field-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Source row above intro ────────────────────────────────────── */

.capture-builder-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

/* ── Builder intro block ───────────────────────────────────────── */

.capture-builder-intro {
  margin: 0 0 16px;
  padding: 14px;
  background: #2d2d2d;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.capture-builder-intro-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.capture-builder-intro-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.capture-builder-intro-title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.capture-builder-intro-text {
  margin: 0;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Vertical field layout (Account-style) ─────────────────────── */

.capture-builder-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capture-field-group {
  /* block flow: label margin-bottom + hint margin-top handle spacing */
}

.capture-field-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.capture-field-input-row .capture-builder-field {
  flex: 1;
  min-width: 0;
}

/* ── Header layout ─────────────────────────────────────────────── */

.capture-query-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: max-content;
}

.capture-query-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.capture-query-header-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ── Summary chips row ─────────────────────────────────────────── */

.capture-query-summary-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.capture-query-summary-chips::-webkit-scrollbar {
  display: none;
}

.capture-query-summary-chips > * {
  flex: 0 0 auto;
}

.capture-query-summary-chips--topline {
  margin: 0;
  padding: 0;
  border-bottom: none;
  overflow: visible;
  flex: 0 0 auto;
}

.capture-builder-field--yellowpages-query {
  flex: 1.55 1 320px;
  min-width: 280px;
}

.capture-builder-field--yellowpages-location {
  flex: 1.2 1 260px;
  min-width: 220px;
}

.capture-builder-field--yellowpages-pages {
  flex: 0.4 1 108px;
  max-width: 108px;
}

.capture-builder-actions {
  flex: 0 0 auto;
}

.capture-yellow-pages-builder-actions {
  padding-left: 6px;
}

.capture-target-row {
  display: grid;
  grid-template-columns: 54px minmax(132px, 0.8fr) minmax(156px, 1fr) minmax(148px, 0.9fr) minmax(176px, 1.15fr) auto;
  gap: 0;
  align-items: center;
  width: 100%;
  min-width: 814px;
  min-height: 54px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background: var(--capture-surface-soft);
}

.capture-builder-field,
.capture-target-cell,
.capture-builder-city {
  min-width: 0;
}

.capture-target-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding-right: 6px;
}

.capture-target-index span {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.capture-target-index small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capture-target-index small::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(61, 113, 232, 0.65);
}

.capture-target-row > .capture-target-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  min-height: 48px;
  padding: 4px 8px;
}

.capture-target-row > .capture-target-cell:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--line);
}

.capture-builder-city {
  z-index: 20;
}

.capture-builder-field .search-input {
  width: 100%;
  height: 32px;
  background: transparent;
}

.capture-builder-field .search-input:-webkit-autofill,
.capture-builder-field .search-input:-webkit-autofill:hover,
.capture-builder-field .search-input:-webkit-autofill:focus,
.capture-builder-field .search-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-alt) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-alt) inset !important;
  background-color: var(--bg-alt) !important;
}

.capture-builder-field .search-input,
.capture-target-value {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.capture-builder-field .search-input:focus {
  border: none;
  box-shadow: none;
}

.capture-builder-field .search-input {
  min-height: 32px;
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
}

.capture-builder-field:focus-within {
  border-color: var(--border-hover, rgba(110, 118, 129, 0.6));
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
  border-radius: 6px;
}

.capture-builder-field:has(.search-input.required-missing) {
  border-color: rgba(248, 81, 73, 0.55);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px rgba(248, 81, 73, 0.16);
}

.capture-builder-field:has(.search-input.required-missing):focus-within {
  border-color: rgba(248, 81, 73, 0.68);
  box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.15);
}

.capture-builder-field:has(.search-input.required-missing:disabled) {
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--bg-alt);
  box-shadow: none;
}

.capture-builder-field:has(.search-input.required-missing:disabled):focus-within {
  border-color: var(--border-hover, rgba(110, 118, 129, 0.6));
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.capture-builder-field:has(.search-input.required-missing:disabled)
  .capture-location-select-toggle {
  color: var(--muted);
}

.capture-builder-field:has(.search-input.required-missing)
  .capture-location-select-toggle {
  color: rgba(248, 81, 73, 0.82);
}

.capture-builder-field .search-input.required-missing {
  border-radius: 2px;
  box-shadow: none;
  background: transparent;
}

/* ── LocationSelect custom dropdown ─────────────────────────────── */

.capture-location-select {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

.capture-location-select-input {
  flex: 1;
  min-width: 0;
}

.capture-location-select--select-only .capture-location-select-input {
  cursor: pointer;
  caret-color: transparent;
}

.capture-location-select-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  margin-inline: 2px;
  transition: color 0.1s ease;
}

.capture-location-select-toggle:hover {
  color: var(--text);
}

.capture-location-select-toggle:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.capture-location-dropdown {
  background: var(--capture-menu-surface, #25282d);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
  overflow-y: auto;
}

.capture-location-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.capture-location-dropdown-item {
  display: block;
  position: relative;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.capture-location-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.055);
}

.capture-location-dropdown-item.selected {
  color: var(--text);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.capture-location-dropdown-item.selected:hover {
  background: rgba(255, 255, 255, 0.085);
}

.capture-location-dropdown-item.disabled {
  color: #8a8a8a;
  cursor: not-allowed;
}

.capture-location-dropdown-item-note {
  float: right;
  color: #8a8a8a;
  font-size: 11px;
}

.capture-location-dropdown-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 4px 0;
  list-style: none;
}

.capture-location-dropdown-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
}

.capture-location-dropdown-list::-webkit-scrollbar {
  width: 4px;
}

.capture-location-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.capture-location-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.capture-builder-actions,
.capture-target-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  margin-left: auto;
}

.capture-builder-toggle,
.capture-builder-add {
  flex-shrink: 0;
}

.capture-builder-add {
  height: 32px;
  min-width: 44px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 6px;
  color: var(--muted);
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.capture-builder-add.is-ready {
  background: var(--capture-accent, #22c55e);
  color: #000;
  cursor: pointer;
  opacity: 1;
}

.capture-builder-add.is-ready:hover {
  background: var(--capture-accent-strong, #16a34a);
}

.capture-builder-add:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.capture-builder-options-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.capture-options-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.capture-options-inline-toggle:hover {
  color: var(--accent, #58a6ff);
}

.capture-options-inline-toggle .rotate-180 {
  transform: rotate(180deg);
}

.capture-queue-count {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.capture-options-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 2147483646;
}

.capture-options-toggle-wrap.is-highlighted .capture-builder-toggle {
  border-color: rgba(201, 154, 74, 0.78);
  box-shadow: 0 0 0 2px rgba(201, 154, 74, 0.16);
  background: rgba(201, 154, 74, 0.12);
  color: #f4e3bb;
}

.capture-options-toggle-wrap.is-highlighted .capture-builder-toggle-label {
  color: #f4e3bb;
}

.capture-options-hint {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 2147483647;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: min(380px, calc(100vw - 40px));
  padding: 10px 12px;
  border: 1px solid rgba(201, 154, 74, 0.72);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(46, 33, 19, 0.98), rgba(31, 23, 14, 0.98));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  color: #f4e3bb;
}

.capture-options-hint::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 100%;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(201, 154, 74, 0.72);
  border-bottom: 1px solid rgba(201, 154, 74, 0.72);
  background: rgb(31, 23, 14);
  transform: rotate(45deg) translateY(-6px);
}

.capture-options-hint-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
}

.capture-options-hint-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(244, 227, 187, 0.22);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4e3bb;
  cursor: pointer;
  flex: 0 0 auto;
}

.capture-options-hint-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.capture-builder-toggle {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 2px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.capture-builder-toggle:hover {
  background: var(--bg);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.capture-builder-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.capture-builder-toggle-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: currentColor;
}

.capture-builder-toggle-chevron {
  transition: transform 0.15s ease;
}

.capture-builder-toggle[aria-expanded='true'] .capture-builder-toggle-chevron {
  transform: rotate(180deg);
}

.capture-builder-options {
   padding: 12px;
   background: rgba(255, 255, 255, 0.045);
   border: 1px solid var(--line, #2e2e2e);
   border-top: none;
   border-radius: 0 0 2px 2px;
   margin-top: 0;
 }

.capture-builder-options-grid {
   display: flex;
   flex-direction: column;
   gap: 0;
 }

.capture-inline-options-card {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
   padding: 12px;
   border: none;
   border-radius: 0;
   background: transparent;
 }

.capture-inline-options-card:first-child:not(:last-child) {
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }

.capture-inline-options-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.capture-inline-options-title::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(61, 113, 232, 0.55);
}

.capture-builder-options .options-group {
  gap: 0;
}

.capture-builder-options .option-row {
  padding: 10px 0;
}

.capture-builder-options .option-row + .option-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.capture-builder-options .option-desc-block {
  margin-top: 3px;
}

.capture-option-row--select {
  align-items: center;
  gap: 12px;
}

.capture-option-row-control {
  margin-left: auto;
  width: min(240px, 100%);
  flex: 0 0 min(240px, 100%);
}

.capture-option-row-control .search-input {
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 2px;
  background: #2d2d2d !important;
}

.capture-builder-options-note {
  margin-top: 6px;
}

.capture-empty-queue {
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: #2d2d2d;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 12px;
  margin-bottom: 0;
}

.capture-queue-shell.is-populated {
  border-color: rgba(255, 255, 255, 0.1);
  background: #2d2d2d;
  color: var(--text);
}

.capture-queue-shell-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--muted);
}

.capture-queue-shell-head code {
  margin-inline: 4px;
}

.capture-queue-shell.is-populated .capture-queue-shell-head {
  border-bottom: 1px solid rgba(139, 148, 158, 0.12);
  color: rgba(139, 148, 158, 0.92);
  font-weight: 600;
}

.capture-action-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.capture-action-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.capture-action-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 860px) {
  .capture-builder-options .capture-option-row--select {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .capture-option-row-control {
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0;
  }
}

.capture-queued-header {
  margin: 16px 0 12px 0;
  padding: 0;
}

.capture-queued-header h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: #ddd;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.capture-queued-header p {
  margin: 0;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

.capture-target-row-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.qrow-simple {
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 7px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 10px;
  background: #ffffff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a1a;
  overflow: hidden;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.qrow-simple + .qrow-simple {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.qrow-simple:hover {
  background: #f6f6f6;
}

.qrow-simple-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 20px;
  padding: 0 8px;
  border: none;
  border-radius: 0;
  background: rgba(130, 80, 200, 0.13);
  color: #7c3aed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qrow-simple-mode img {
  max-height: 14px;
  width: auto;
  display: block;
  object-fit: contain;
}

.qrow-simple-content,
.qrow-simple-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qrow-simple-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.qrow-simple-title {
  color: #1a1a1a;
  font-weight: 600;
  min-width: 0;
}

.qrow-simple-meta {
  color: #6e7781;
  min-width: 0;
}

.qrow-simple-time {
  color: #8c959f;
  font-size: 11px;
  justify-self: end;
}

.qrow-simple-remove {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #8c959f;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}

.qrow-simple-remove:hover {
  color: #cf222e;
  background: rgba(207, 34, 46, 0.07);
}

@media (max-width: 720px) {
  .qrow-simple {
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) 22px;
    gap: 6px;
  }

  .qrow-simple-time {
    display: none;
  }

  .qrow-simple-content {
    gap: 4px;
  }
}

/* Query panel / Target Row */

.qpanel {
  background: #2d2d2d;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  overflow: hidden;
}

.qrow {
  display: flex;
  align-items: center;
  padding: 10px 12px 10px 12px;
  gap: 8px;
  border-bottom: 1px solid #3a3a3a;
  position: relative;
  background: #2d2d2d;
  min-height: 40px;
}

.qrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--capture-subtle-blue-soft);
}

.qcollapse {
   width: 20px;
   height: 20px;
   border: none;
   background: none;
   color: #888;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 2px;
   transition: color 0.2s;
 }

.qcollapse:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #bbb;
 }

.qlabel {
  width: 22px;
  height: 22px;
  background: var(--capture-subtle-blue);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.qsrc-name {
  font-size: 11px;
  color: #999;
  flex-shrink: 0;
}

.qrow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  font-size: 11px;
  flex-shrink: 0;
}

.qrow-jobid {
  color: #888;
  font-family: monospace;
  font-size: 11px;
}

.qrow-time {
  color: #888;
}

.qrow-r {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.qrbtn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 2px;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.qrbtn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

.qfilters {
  padding: 10px 12px 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid #3a3a3a;
  background: #242424;
  border-left: 3px solid transparent;
}

.q-metric {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #333;
  border: 1px solid #444;
  border-radius: 2px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  color: #ddd;
  transition: border-color 0.2s, color 0.2s;
}

.q-metric:hover {
  border-color: var(--accent, #3d71e8);
  color: #fff;
}

.q-filter-box {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  background: #333;
  border: 1px solid #444;
  border-radius: 2px;
  padding: 4px 8px;
  cursor: text;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  transition: border-color 0.2s;
}

.q-filter-box:hover {
  border-color: var(--accent, #3d71e8);
}

.qchip-k { color: #a9a9ff; }

.qchip-eq { color: #888; }

.qchip-v { color: #7dd3fc; }

.qchip-sep { color: #888; margin: 0 4px; }

.qopts {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 12px;
  background: #1e1e1e;
  border-bottom: 1px solid #333;
  border-left: 3px solid transparent;
  flex-wrap: wrap;
}

.qopts-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #888;
  cursor: pointer;
  font-size: 12px;
  border: none;
  background: none;
  transition: color 0.2s;
}

.qopts-btn:hover {
  color: #bbb;
}

.qopt {
  font-size: 12px;
  color: #bbb;
}

.qopt strong {
  color: #ddd;
}

@media (max-width: 960px) {
  .capture-builder-options-grid {
    grid-template-columns: 1fr;
  }
}

.capture-query-main > .capture-section-panel,
.capture-query-rail > .capture-section-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
}

.capture-section-panel,
.capture-rail-card {
  border-radius: 2px;
  background: var(--capture-surface);
  box-shadow: none;
}

.capture-section-panel-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--capture-surface-soft);
}

.capture-section-panel-body .capture-form-grid {
  padding: 0;
}

.capture-section-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.capture-section-heading h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.capture-section-heading p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.capture-section-panel-body,
.capture-options-card .card-body {
  padding: 12px;
}

.capture-query-main > .capture-section-panel .capture-section-panel-body,
.capture-query-rail > .capture-section-panel .capture-section-panel-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.capture-section-panel-body--options {
  display: flex;
}

.capture-options-card .card-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.capture-options-card .card-body,
.capture-results-panel .card-body,
.capture-runtime-panel .card-body {
  padding: 12px;
}

.capture-section-panel--side .options-section {
  gap: 0;
}

.capture-section-panel--side .options-group {
  margin-bottom: 0;
}

.capture-section-panel--side .option-row {
  padding-left: 0;
  padding-right: 0;
}

.capture-options-card {
  margin-top: -2px;
}

.capture-query-runtime {
  background: transparent;
}

.capture-workspace[data-query-collapsed='false'] .capture-query-runtime-head {
  box-shadow: inset 0 1px 0 var(--line);
}

.capture-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.capture-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.capture-panel-badges {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.capture-panel-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  font-size: 11px;
  font-weight: 700;
}

.capture-tier-banner--demo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.capture-panel-badge.is-active,
.capture-panel-badge.is-queued {
  color: #8ab4ff;
  border-color: rgba(61, 113, 232, 0.28);
  background: rgba(61, 113, 232, 0.08);
}

.capture-panel-badge.is-completed {
  color: #7bd88c;
  border-color: rgba(82, 184, 74, 0.28);
  background: rgba(82, 184, 74, 0.08);
}

.capture-panel-badge.is-failed,
.capture-panel-badge.is-canceled,
.capture-panel-badge.is-stopping {
  color: #f4a8b4;
  border-color: rgba(224, 47, 68, 0.28);
  background: rgba(224, 47, 68, 0.08);
}

.capture-field-badge.is-ready {
  color: #7ddb8c;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-field-badge.is-missing {
  color: #f4a8b4;
  border-color: rgba(224, 47, 68, 0.35);
  background: rgba(224, 47, 68, 0.08);
}

.capture-chip-flag {
  display: block;
  width: 18px;
  height: 10px;
  border-radius: 1px;
  flex-shrink: 0;
}

.capture-runtime-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.capture-runtime-progress {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.capture-history-head {
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
}

.capture-history-panel {
  border-bottom: 0;
}

.capture-history-panel .capture-panel-head {
  border-bottom: none;
}

.capture-history-panel[data-expanded='false'] .capture-history-head {
  cursor: pointer;
  min-height: var(--capture-action-h);
  padding-top: 0;
  padding-bottom: 0;
}

.capture-history-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.capture-history-search {
  margin-left: auto;
  width: min(240px, 100%);
  min-width: 200px;
}

.capture-history-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 0.15s ease, color 0.12s ease;
}

.capture-history-toggle:hover .capture-history-chevron {
  color: var(--text);
}

.capture-history-panel[data-expanded='false'] .capture-history-chevron {
  transform: rotate(-90deg);
}

.capture-history-panel[data-expanded='false'] .capture-history-head {
  border-bottom: none;
}

.capture-results-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}

.capture-results-search {
  position: relative;
  width: 220px;
  min-width: 180px;
}

.capture-results-search input {
  width: 100%;
  height: 28px;
  padding: 0 8px 0 28px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  outline: none;
}

.capture-results-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.capture-results-search input:focus {
  border-color: rgba(61, 113, 232, 0.35);
}

.capture-results-search input:disabled {
  opacity: 0.65;
}

.capture-results-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.capture-results-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.capture-results-action:hover {
  color: var(--text);
  border-color: rgba(61, 113, 232, 0.35);
  background: rgba(61, 113, 232, 0.08);
  text-decoration: none;
}

.capture-results-toolbar--history {
  justify-content: flex-end;
}

.capture-view-tabs {
  margin-left: auto;
  display: flex;
}

.capture-view-tab {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.capture-view-tab + .capture-view-tab {
  border-left: none;
}

.capture-view-tab:first-child {
  border-radius: 2px 0 0 2px;
}

.capture-view-tab:last-child {
  border-radius: 0 2px 2px 0;
}

.capture-view-tab.is-active {
  background: rgba(61, 113, 232, 0.08);
  color: #8ab4ff;
}

.capture-results-body {
  min-height: 280px;
}

.capture-activity-log {
  max-height: 360px;
  overflow-y: auto;
  border-radius: 2px;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
}

.capture-activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.capture-activity-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  background: var(--panel);
  position: sticky;
  top: 0;
  white-space: nowrap;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.capture-activity-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  color: var(--text);
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.capture-activity-table tr:last-child td {
  border-bottom: none;
}

.capture-activity-table tr:hover td {
  background: #2d2d2d;
}

.log-time {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--muted);
  font-size: 11px;
}

.log-msg {
  white-space: pre-wrap;
  word-break: break-word;
}

.capture-empty-state {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: var(--muted);
}

.capture-empty-state strong {
  color: var(--text);
}

@media (max-width: 1080px) {
  .capture-explore-toolbar,
  .capture-results-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 10px;
  }

  .capture-view-tabs,
  .capture-toolbar-right {
    margin-left: 0;
  }

  .capture-toolbar-history-controls {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
  }

  .capture-history-head {
    flex-wrap: wrap;
  }

  .capture-history-search {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .capture-workspace:not(.page-container) {
    padding: 14px 16px;
  }

  .capture-toolbar-source,
  .capture-toolbar-right,
  .capture-results-toolbar {
    width: 100%;
  }

  .capture-toolbar-right {
    justify-content: space-between;
  }

  .capture-toolbar-history-controls {
    flex: 1 1 auto;
    min-width: 0;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .capture-toolbar-source-btn {
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
  }

  .capture-results-search {
    width: 100%;
  }

  .capture-view-tabs {
    width: 100%;
  }

  .capture-view-tab {
    flex: 1 1 50%;
  }

  .capture-options-hint {
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 32px));
  }

  .capture-options-hint::after {
    left: 18px;
    right: auto;
  }
}

/* ── Mobile (≤ 640 px) ──────────────────────────────────── */

@media (max-width: 640px) {
  /* Topline: wrap instead of horizontal-scroll so all items are reachable */
  .capture-query-topline {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    row-gap: 6px;
    align-items: center;
  }

  /* Source tab buttons take their own first row at full width */
  .capture-query-topline .capture-toolbar-source {
    width: 100%;
    flex-shrink: 0;
    order: -1;
  }

  /* Each source button occupies half the row */
  .capture-query-topline .capture-toolbar-source-btn {
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
  }

  /* Drop the thin vertical divider — it's a rogue pixel in a wrapped row */
  .capture-query-topline .capture-toolbar-divider {
    display: none;
  }

  /* Prevent individual chips from stretching */
  .capture-query-chip {
    flex-shrink: 0;
  }

  /* Tighten header padding on mobile */
  .capture-query-header {
    padding: 8px 10px;
  }

  /* Explore toolbar: let action links wrap so they don't overflow viewport */
  .capture-toolbar-right {
    flex-wrap: wrap;
    gap: 4px;
  }

  .capture-toolbar-action {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 72px;
  }

  /* History controls span full row on very small viewports */
  .capture-explore-toolbar .capture-toolbar-history-controls {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }
}
/* Docs.css - Docs page styling */
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
.docs-page .page-content {
    display: grid;
    grid-template-columns: minmax(220px, 220px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
}
@media (max-width: 768px) {
  .docs-page .page-content {
    grid-template-columns: 1fr;
  }
}
.docs-page .page-head-nav {
    overflow-x: auto;
    scrollbar-width: thin;
}
.docs-page .page-head-nav-link {
    flex: 0 0 auto;
}
.docs-page .page-head-compact {
    margin-bottom: 16px;
}
.docs-page .page-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    min-width: 0;
}
.docs-page .page-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.docs-page .page-head-left h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--app-page-title-size, 26px);
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
}
.docs-page .page-head-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
}
.docs-page .head-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}
.docs-page .head-badge .badge-label {
    flex: 0 0 auto;
    color: var(--muted);
}
.docs-page .head-badge .badge-value {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: min(42vw, 360px);
    overflow: hidden;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-alt);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.docs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 8px;
}
.docs-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}
.docs-meta-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 11px;
}
.docs-meta-value {
    color: var(--text);
    font-family: var(--mono);
}
.docs-kv {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 10px;
}
.docs-kv-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}
.docs-kv-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 11px;
}
.docs-kv-value {
    color: var(--text);
    font-family: var(--mono);
}
.docs-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 768px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }
  .docs-sidebar {
    display: none;
  }
  .docs-page .page-content {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .docs-page .page-head-row {
    gap: 8px;
  }

  .docs-page .page-head-title-icon {
    display: none;
  }

  .docs-page .page-head-left h2 {
    font-size: 20px;
  }

  .docs-page .head-badge {
    gap: 5px;
    font-size: 11px;
  }

  .docs-page .head-badge .badge-value {
    max-width: 46vw;
    padding: 2px 8px;
    font-size: 11px;
  }
}
.docs-sidebar {
    position: relative;
}
.docs-sidebar-inner {
    position: sticky;
    top: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-card);
    padding: 12px;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.docs-sidebar-callout {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-elevated);
}
.docs-sidebar-callout-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}
.docs-sidebar-callout p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
}
.docs-sidebar-title {
    font-size: 11px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 10px;
    font-weight: 600;
}
.docs-sidebar-subtitle {
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 14px 0 8px;
    font-weight: 600;
}
.docs-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.docs-nav a {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.docs-page .page-head-description {
    max-width: 760px;
}
.docs-nav a:hover {
    color: var(--text);
    border-color: var(--line);
    background: var(--bg-elevated);
}
.docs-nav-link-active {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background: var(--bg-elevated) !important;
}
.docs-section-title {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.docs-section-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--link);
  text-decoration: none;
  padding: 1px 3px;
  border-radius: 4px;
  border: 1px solid transparent;
  transform: scale(0.9);
}
.docs-section-anchor:hover {
    color: var(--link-hover);
    border-color: var(--line);
    background: var(--bg-elevated);
}
.docs-twilio-logo {
    height: 16px;
    width: auto;
    margin-left: 8px;
    opacity: 0.85;
}
.docs-main {
    min-width: 0;
}
.docs-page .content-card {
    background: var(--bg-card);
    border-color: var(--border);
}
.docs-page .card-header {
    background: transparent;
    border-bottom: 1px dashed var(--line);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    justify-content: flex-start;
}
.docs-page .card-body {
    padding: 20px;
}
/* Introduction paragraph */
.docs-intro {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 24px 0;
}
.docs-overview-grid,
.docs-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}
.docs-overview-card,
.docs-guide-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-elevated);
    padding: 14px;
}
.docs-overview-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.docs-overview-card h3,
.docs-guide-card h3 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text);
}
.docs-overview-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.docs-overview-grid-feature {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.docs-overview-card .docs-list {
    margin: 0;
    padding-left: 18px;
}
.docs-overview-card .docs-list li:last-child {
    margin-bottom: 0;
}
.docs-guide-card .docs-list {
    margin-bottom: 0;
}
.docs-guide-directory-list {
    margin: 0;
}
.docs-guide-directory-item {
    margin-bottom: 12px;
}
.docs-guide-directory-item:last-child {
    margin-bottom: 0;
}
.docs-guide-directory-detail {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}
.docs-guide-directory-tip {
    display: block;
    margin-top: 4px;
    color: var(--text-muted, var(--muted));
    font-size: 11px;
    line-height: 1.5;
}
/* Section spacing */
.docs-section {
    margin: 24px 0;
}
.docs-section:first-child {
    margin-top: 0;
}
.docs-section:last-child {
    margin-bottom: 0;
}
.docs-section + .docs-section {
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
/* Section headings */
.docs-section h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}
.docs-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin: 16px 0 8px 0;
}
/* Section paragraphs */
.docs-section p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 12px 0;
}
.docs-section p:last-child {
    margin-bottom: 0;
}
.docs-subline {
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}
/* Lists within sections */
.docs-list {
    margin: 12px 0;
    padding-left: 20px;
    line-height: 1.7;
    list-style-type: disc;
}
.docs-list-compact {
    line-height: 1.5;
}
.docs-list li {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 14px;
    padding-left: 4px;
}
.docs-shot-grid {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}
.docs-shot-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-elevated);
    padding: 12px;
    margin: 0;
}
.docs-shot-header {
    margin-bottom: 10px;
}
.docs-shot-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.docs-shot-step {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--muted);
    background: var(--bg-card);
}
.docs-shot-title {
    font-size: 13px;
    color: var(--text);
}
.docs-shot-route {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}
.docs-shot-route code {
    font-size: 12px;
}
.docs-shot-image {
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-card);
    display: block;
}
.docs-shot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    color: var(--muted);
    background: var(--bg-card);
    text-align: center;
    font-size: 12px;
}
.docs-shot-summary {
    margin-top: 10px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}
.docs-shot-hint {
    margin-top: 8px;
    margin-bottom: 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.6;
}
.docs-shot-callouts {
    margin-top: 10px;
    margin-bottom: 0;
}
.docs-shot-callouts li {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
    line-height: 1.6;
}
.docs-list li:last-child {
    margin-bottom: 0;
}
.docs-list li strong {
    color: var(--text);
    font-weight: 600;
}
/* Ordered lists */
ol.docs-list {
    list-style-type: decimal;
}
/* Notes/callouts */
.docs-note {
    background: #2d2d2d;
    border-left: 3px solid var(--line);
    border-radius: 3px;
    padding: 12px 14px;
    margin: 16px 0 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.docs-note strong {
    color: var(--text);
    font-weight: 600;
}
/* Inline code snippets */
.docs-section code,
.docs-intro code,
.field-hint code {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
}
/* Code blocks */
.docs-section pre {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0;
    overflow-x: auto;
    max-width: 100%;
}
.docs-section pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre;
    display: block;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* Keyboard shortcuts */
kbd,
.field-hint kbd {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-bottom: 2px solid var(--line);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    white-space: nowrap;
}
/* Links */
.docs-section a,
.docs-intro a,
.field-hint a,
.input-label a,
.docs-list a {
    color: var(--link);
    text-decoration: none;
    font-weight: 500;
}
.docs-section a:hover,
.docs-intro a:hover,
.field-hint a:hover,
.input-label a:hover,
.docs-list a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}
/* Prevent horizontal overflow */
.docs-section,
.docs-intro,
.docs-list,
.docs-note {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* Spacing utilities (replace inline styles) */
.docs-sidebar-title-mt { margin-top: 14px; }
.docs-section .docs-h4-mt { margin-top: 24px; }
.docs-note-mt { margin-top: 24px; }
.docs-list-mt-sm { margin-top: 8px; }
/* Responsive adjustments */
@media (max-width: 1100px) {
    .docs-overview-grid-feature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .docs-meta {
        gap: 8px 12px;
    }

    .docs-meta-item {
        font-size: 11px;
    }

    .docs-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .docs-sidebar-inner {
        position: static;
        max-height: none;
    }

    .docs-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .docs-list {
        padding-left: 16px;
    }

    .docs-overview-grid,
    .docs-guide-grid {
        grid-template-columns: 1fr;
    }

    .docs-overview-grid-feature {
        grid-template-columns: 1fr;
    }

    .docs-section {
        margin: 20px 0;
    }

    .docs-section pre {
        padding: 12px;
        font-size: 13px;
        border-radius: 4px;
    }

    .docs-section pre code {
        font-size: 13px;
    }
}
@media (max-width: 480px) {
    .docs-nav {
        grid-template-columns: 1fr;
    }

    .docs-section h3 {
        font-size: 13px;
    }

    .docs-section p,
    .docs-list li {
        font-size: 14px;
    }

    .docs-note {
        padding: 10px 12px;
        font-size: 14px;
    }

    .docs-screenshot {
        max-width: 100%;
    }
}
/* Docs screenshot images */
.docs-screenshot {
    display: block;
    max-width: 760px;
    width: 100%;
    border: none;
    border-radius: 8px;
    margin: 16px 0 20px;
}
.docs-screenshot-caption {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin: -12px 0 20px;
    padding-left: 2px;
}
.docs-screenshot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 20px;
}
.docs-screenshot-row .docs-screenshot {
    max-width: 100%;
    margin: 0;
}
@media (max-width: 700px) {
    .docs-screenshot-row {
        grid-template-columns: 1fr;
    }
}
.admin-storage-db-modal {
  max-width: 760px;
}

.admin-storage-db-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-storage-db-intro {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.admin-storage-db-intro p {
  margin: 0;
}

.admin-storage-db-intro-note code {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
}

.admin-storage-db-banner {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.admin-storage-db-banner strong {
  color: var(--text);
}

.admin-storage-db-banner span {
  color: var(--muted);
}

.admin-storage-db-banner.is-success {
  border-color: rgba(63, 185, 80, 0.35);
  background: rgba(63, 185, 80, 0.08);
}

.admin-storage-db-banner.is-warning {
  border-color: rgba(210, 153, 34, 0.35);
  background: rgba(210, 153, 34, 0.08);
}

.admin-storage-db-banner.is-muted {
  background: rgba(139, 148, 158, 0.08);
}

.admin-storage-db-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-storage-db-provider {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--muted);
  padding: 10px 12px;
  font-size: 13px;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.admin-storage-db-provider:hover {
  border-color: var(--accent);
  color: var(--text);
}

.admin-storage-db-provider.is-active {
  border-color: var(--accent);
  color: var(--text);
  background: #2d2d2d;
}

.admin-storage-db-form {
  display: grid;
  gap: 12px;
}

.admin-storage-db-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-storage-db-field {
  display: grid;
  gap: 6px;
}

.admin-storage-db-field span {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.admin-storage-db-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  padding: 9px 10px;
  font-size: 13px;
}

.admin-storage-db-field-full {
  grid-column: 1 / -1;
}

.admin-storage-db-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.admin-storage-db-feedback {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.admin-storage-db-feedback.is-success {
  color: #3fb950;
  background: rgba(63, 185, 80, 0.08);
  border: 1px solid rgba(63, 185, 80, 0.25);
}

.admin-storage-db-feedback.is-error {
  color: #f85149;
  background: rgba(248, 81, 73, 0.08);
  border: 1px solid rgba(248, 81, 73, 0.25);
}

.admin-storage-db-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px 20px;
}

.admin-storage-db-actions .btn-compact--primary {
  color: var(--success);
  border-color: var(--success);
}

.admin-storage-db-actions .btn-compact--primary:hover {
  background: rgba(16, 185, 129, 0.1);
}

.admin-storage-db-actions .btn-compact--danger {
  color: #f85149;
  border-color: #f85149;
}

.admin-storage-db-actions .btn-compact--danger:hover {
  background: rgba(248, 81, 73, 0.1);
}

@media (max-width: 720px) {
  .admin-storage-db-provider-grid,
  .admin-storage-db-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-storage-db-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/* AdminPanel.css - StatusBlockRow-matching styling */

/* Pulse animation for real-time indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Main container */
.admin-panel {
  background: var(--bg-page);
  min-height: calc(100vh - var(--toolbar-h));
  padding: var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* Page header - clean, no background/border */
.admin-page-header {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
}

.admin-page-header .header-left h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.header-actions-expanded {
  flex: 1;
  justify-content: flex-end;
}

.admin-page-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-storage-db-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-badges {
  display: flex;
  gap: 12px;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.stat-badge-label {
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}

.stat-badge-value {
  color: var(--text);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-weight: 500;
}

.admin-badge {
  font-size: 13px;
  font-weight: 500;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.admin-badge--success {
  color: #3fb950;
  background: rgba(46, 160, 67, 0.1);
}

.admin-badge--warning {
  color: #d29922;
  background: rgba(210, 153, 34, 0.1);
}

.admin-badge--danger {
  color: #f85149;
  background: rgba(248, 81, 73, 0.1);
}

.admin-badge--info {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
}

.admin-badge--default {
  color: #8b949e;
  background: rgba(139, 148, 158, 0.1);
}

/* Cryptographic verification badge */
.admin-verification {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(46, 160, 67, 0.08);
  border: 1px solid rgba(46, 160, 67, 0.25);
  border-radius: 4px;
  font-family: var(--font-mono);
}

.admin-verification svg {
  color: #2ea043;
  flex-shrink: 0;
}

.verification-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.verification-status {
  font-size: 13px;
  font-weight: 600;
  color: #2ea043;
  letter-spacing: 0.3px;
}

/* Tab navigation */
.admin-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 var(--space-md);
}

.admin-tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-mono);
}

.admin-tab:hover {
  color: var(--text-white);
}

.admin-tab.active {
  color: var(--accent);
}

/* Admin content area */
.admin-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0;
}

/* Section header inside content */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 24px;
  padding: 0 10px 0 16px;
  background: var(--bg);
}

.section-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.section-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-buttons {
  display: flex;
  gap: 8px;
}

/* Stats grid - matching row styling */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
  padding: 0;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.stat-card:last-child {
  border-right: none;
  padding: none;
  margin: 0;
}

.stat-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stat-card-value {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Admin list - row-based table matching StatusBlockRow */
.admin-list {
  display: flex;
  flex-direction: column;
}

/* List header - column labels */
.admin-list-header {
  display: grid;
  min-height: 24px;
  padding: 6px 12px 6px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Users header grid */
.users-header {
  grid-template-columns: minmax(180px, 2fr) 70px 80px 80px 50px 80px minmax(100px, 1fr);
}

/* Jobs header grid */
.jobs-header {
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.5fr) 80px 110px 110px 80px;
}

/* Logs header grid */
.logs-header {
  grid-template-columns: 130px 70px 1fr;
}

/* Flags header grid */
.flags-header {
  grid-template-columns: minmax(180px, 1fr) 2fr 150px;
}

/* Employees header grid */
.employees-header {
  grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 0.8fr) minmax(100px, 1fr) 80px 60px minmax(100px, 0.8fr) 70px;
}

/* List rows - matching StatusBlockRow row styling */
.admin-list-row {
  display: grid;
  min-height: var(--row-h);
  padding: 6px 12px 6px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: 13px;
  font-weight: normal;
  line-height: 1.3;
  color: var(--text);
  align-items: center;
}

.job-id-col code {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
  color: #cacaca;
  padding: 1px 4px;
  border-radius: 2px;
  min-width: 160px;
  text-decoration: none;
}

.admin-list-row:nth-child(odd) {
  background: var(--bg-elevated);
}

.admin-list-row:hover {
  background: #474747;
}

/* Users row grid */
.users-row {
  grid-template-columns: minmax(180px, 2fr) 70px 80px 80px 50px 80px minmax(100px, 1fr);
}

/* Jobs row grid */
.jobs-row {
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.5fr) 80px 110px 110px 80px;
}

/* Logs row grid */
.logs-row {
  grid-template-columns: 130px 70px 1fr;
  min-height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Flags row grid */
.flags-row {
  grid-template-columns: minmax(180px, 1fr) 2fr 150px;
}

.flags-row.pending {
  background: var(--bgColor-accent-muted);
  border-left: 2px solid var(--borderColor-accent-emphasis);
}

/* Employees row grid */
.employees-row {
  grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 0.8fr) minmax(100px, 1fr) 80px 60px minmax(100px, 0.8fr) 70px;
}

.file-monitor-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-monitor-count {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
  color: var(--muted);
}

.file-monitor-error {
  font-size: 12px;
  color: var(--warning);
}

.file-monitor-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.35fr) minmax(340px, 1fr);
  min-height: 560px;
}

.file-monitor-list {
  border-right: 1px solid var(--line);
  max-height: 68vh;
  overflow: auto;
}

.file-monitor-header {
  grid-template-columns: 160px 120px minmax(280px, 2fr) 150px 180px;
}

.file-monitor-row {
  appearance: none;
  border: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 160px 120px minmax(280px, 2fr) 150px 180px;
  min-height: var(--row-h);
  padding: 6px 12px 6px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.file-monitor-row:nth-child(odd) {
  background: var(--bg-elevated);
}

.file-monitor-row:hover,
.file-monitor-row.active {
  background: #474747;
}

.file-monitor-path,
.file-monitor-process {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
}

.file-monitor-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-alt);
}

.file-monitor-meta {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
}

.file-monitor-meta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: start;
  gap: 8px;
}

.file-monitor-meta-label {
  font-size: 12px;
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  text-transform: uppercase;
}

.file-monitor-meta-value {
  font-size: 12px;
  color: var(--text);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  word-break: break-word;
}

.file-monitor-preview {
  margin: 0;
  padding: 12px 16px;
  flex: 1;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: none;
  border-radius: 0;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}

.file-monitor-diff {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}

.file-monitor-diff-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.file-monitor-diff-stat {
  font-weight: 600;
}

.file-monitor-diff-stat.is-add {
  color: #2ea043;
}

.file-monitor-diff-stat.is-del {
  color: #f85149;
}

.file-monitor-diff-note {
  color: var(--muted);
}

.file-monitor-diff-hunk {
  border-bottom: 1px solid var(--line);
}

.file-monitor-diff-hunk-header {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}

.file-monitor-diff-lines {
  display: flex;
  flex-direction: column;
}

.file-monitor-diff-line {
  display: grid;
  grid-template-columns: 56px 56px minmax(0, 1fr);
  align-items: stretch;
  min-height: 22px;
}

.file-monitor-diff-line.is-add {
  background: rgba(46, 160, 67, 0.12);
}

.file-monitor-diff-line.is-del {
  background: rgba(248, 81, 73, 0.12);
}

.file-monitor-diff-line-number {
  padding: 3px 8px;
  color: var(--muted);
  text-align: right;
  border-right: 1px solid var(--line);
  user-select: none;
}

.file-monitor-diff-code {
  margin: 0;
  padding: 3px 10px;
  display: flex;
  gap: 8px;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.file-monitor-diff-prefix {
  width: 10px;
  flex: 0 0 10px;
  color: var(--muted);
}

.file-monitor-diff-text {
  min-width: 0;
  flex: 1 1 auto;
}

.file-monitor-diff-empty {
  padding: 14px 16px;
  flex: 1;
  color: var(--muted);
  font-size: 12px;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  background: var(--bg);
}

/* Column styling */
.col {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}

.email-col {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--text);
  max-width: 200px;
}

.id-col code {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 4px;
  border-radius: 2px;
  min-width: 200px;
}

.credits-col {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--text);
}

.date-col {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--muted);
  min-width: 200px !important;
}

.alt-col {
  margin-left: 10px;
}

.records-col {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--text);
  margin-left: 10px;
}

.timestamp-col {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--muted);
}

.level-col {
  font-size: 13px;
}

.message-col {
  font-size: 13px;
  white-space: normal;
  word-break: break-word;
}

.log-message {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--text);
}

.flag-name-col code {
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
  color: var(--gh-blue);
}

.flag-desc-col {
  font-size: 13px;
  color: var(--muted);
}

.flag-value-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Buttons */
.btn-compact {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  font-size: 13px;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-compact:hover {
  border-color: var(--accent);
  color: var(--text);
}

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

.btn-compact.btn-warning {
  color: var(--warning);
  border-color: var(--warning);
  font-size: 13px;
  padding: 2px 6px;
  white-space: nowrap;
  height: auto;
  align-self: center;
  flex-shrink: 0;
}

.btn-compact.btn-warning:hover {
  background: rgba(245, 158, 11, 0.1);
}

.btn-compact.btn-save {
  color: var(--success);
  border-color: var(--success);
}

.btn-compact.btn-save:hover {
  background: rgba(16, 185, 129, 0.1);
}

/* Flag inputs */
.flag-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flag-input {
  width: 60px;
  height: 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  padding: 0 6px;
  text-align: center;
}

.flag-input:focus {
  outline: none;
  border-color: var(--gh-blue);
}

.flag-default {
  font-size: 13px;
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}

.flag-checkbox {
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.flag-checkbox:checked {
  background: var(--success);
  border-color: var(--success);
}

.flag-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--bg);
  font-size: 13px;
  font-weight: bold;
}

/* Log details */
.log-details {
  margin-top: 6px;
}

.log-details summary {
  font-size: 13px;
  color: var(--gh-blue);
  cursor: pointer;
}

.log-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #c9d1d9;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.log-tag-storage {
  background: rgba(88, 166, 255, 0.12);
  border-color: rgba(88, 166, 255, 0.25);
  color: #9ccaff;
}

.log-tag-credit {
  background: rgba(111, 207, 151, 0.12);
  border-color: rgba(111, 207, 151, 0.25);
  color: #b8f4cf;
}

.log-meta {
  margin-top: 6px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--muted);
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}

/* Log level row colors - removed left border indicators */

/* Empty state */
.empty-row {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Pagination - matching StatusBlockRow footer */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.pagination-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
}

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

.pagination-info {
  font-size: 13px;
  color: var(--muted);
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  min-width: 100px;
  text-align: center;
}

/* Loading state */
.admin-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
  background: var(--bg);
  z-index: 50;
}

.admin-loading p {
  margin: 0;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
}

.admin-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #3a3a3a;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 1200px) {
  .admin-panel {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .file-monitor-layout {
    grid-template-columns: 1fr;
  }

  .file-monitor-list {
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 42vh;
  }
}

@media (max-width: 768px) {
  .admin-panel {
    padding: 12px;
  }

  .admin-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .admin-page-header .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .stats-badges {
    flex-wrap: wrap;
    gap: 8px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-section {
    padding: 12px;
  }

  /* Simplify grid layouts for mobile */
  .users-header,
  .users-row {
    grid-template-columns: 1fr 80px 80px;
    font-size: 13px;
  }

  .users-header .user-col:nth-child(n+4),
  .users-row .user-col:nth-child(n+4) {
    display: none;
  }

  .jobs-header,
  .jobs-row {
    grid-template-columns: 1fr 80px;
    font-size: 13px;
  }

  .jobs-header .job-col:nth-child(n+3),
  .jobs-row .job-col:nth-child(n+3) {
    display: none;
  }

  .logs-header,
  .logs-row {
    grid-template-columns: 100px 1fr;
    font-size: 13px;
  }

  .logs-header .log-col:nth-child(2),
  .logs-row .log-col:nth-child(2) {
    display: none;
  }

  .admin-list-row {
    padding: 6px 8px;
    min-height: 32px;
  }

  .admin-section-header h3 {
    font-size: 13px;
  }

  .file-monitor-header,
  .file-monitor-row {
    grid-template-columns: 130px 100px minmax(220px, 2fr) 140px;
  }

  .file-monitor-header .col:nth-child(5),
  .file-monitor-row .col:nth-child(5) {
    display: none;
  }
}

@media (max-width: 480px) {
  .admin-panel {
    padding: 8px;
  }

  .admin-page-header {
    padding: 8px;
  }

  .admin-page-header .header-left h3 {
    font-size: 13px;
  }

  .stat-badge {
    font-size: 13px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-card-label {
    font-size: 13px;
  }

  .stat-card-value {
    font-size: 13px;
  }

  .admin-list-header {
    font-size: 13px;
    padding: 4px 6px;
  }

  .admin-list-row {
    font-size: 13px;
    padding: 4px 6px;
  }

  .file-monitor-header,
  .file-monitor-row {
    grid-template-columns: 120px 90px minmax(180px, 2fr);
  }

  .file-monitor-header .col:nth-child(4),
  .file-monitor-row .col:nth-child(4) {
    display: none;
  }
}
/* EmployeePage.css — Employee Portal
   Clean, professional light theme. System font. Compact spacing. */

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

/* ─── Page shell ─────────────────────────────────────────────────── */

.employee-page {
  min-height: 100vh;
  background: #fff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.employee-page__shell {
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 40px;
  display: grid;
  gap: 12px;
}

/* ─── Header ─────────────────────────────────────────────────────── */

.emp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e1e4e8;
}

.employee-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #586069;
  font-weight: 600;
}

.employee-brand-mark img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.employee-btn {
  appearance: none;
  border: 1px solid #d1d5da;
  background: #fafbfc;
  color: #24292e;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
}

.employee-btn:hover {
  background: #f3f4f6;
  border-color: #c8ccd1;
}

/* ─── Greeting ───────────────────────────────────────────────────── */

.emp-greeting {
  display: grid;
  gap: 2px;
  padding: 4px 0;
}

.emp-greeting__name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.emp-greeting__position {
  font-size: 13px;
  color: #586069;
}

/* ─── Tabs ───────────────────────────────────────────────────────── */

.emp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e1e4e8;
  overflow-x: auto;
  scrollbar-width: none;
}

.emp-tabs::-webkit-scrollbar { display: none; }

.emp-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: #586069;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.emp-tab:hover { color: #1a1a1a; }

.emp-tab--active {
  color: #1a1a1a;
  font-weight: 600;
  border-bottom-color: #0969da;
}

/* ─── Content ────────────────────────────────────────────────────── */

.emp-content { padding: 4px 0; }

/* ─── Dashboard ──────────────────────────────────────────────────── */

.emp-dashboard { display: grid; gap: 10px; }

.emp-dash-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.emp-dash-greeting {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-dash-date {
  font-size: 13px;
  color: #586069;
  white-space: nowrap;
  flex-shrink: 0;
}

.emp-divider {
  border: none;
  border-top: 1px solid #e1e4e8;
  margin: 0;
}

.emp-dash-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #586069;
}

.emp-dash-stat strong {
  color: #065f46;
  font-weight: 700;
}

.emp-dash-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b949e;
}

.emp-settings { display: grid; gap: 16px; }

/* ─── Form ───────────────────────────────────────────────────────── */

.emp-form {
  display: grid;
  gap: 12px;
  max-width: 640px;
}

.emp-form-section { display: grid; gap: 4px; }

.emp-form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid #eaecef;
  margin-top: 4px;
}

.emp-form-label {
  font-size: 12px;
  font-weight: 600;
  color: #3b3b3b;
}

.emp-form-hint {
  font-size: 11px;
  color: #8b949e;
}

/* ─── Inputs ─────────────────────────────────────────────────────── */

.emp-select,
.emp-input,
.emp-textarea,
.emp-number-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.emp-select { padding-right: 28px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }

.emp-input:focus, .emp-select:focus, .emp-textarea:focus, .emp-number-input:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}

.emp-input::placeholder, .emp-textarea::placeholder { color: var(--muted); }

.emp-textarea { resize: vertical; min-height: 56px; }
.emp-number-input { width: 80px; }

/* ─── Radio / checkbox ───────────────────────────────────────────── */

.emp-radio-group { display: flex; flex-wrap: wrap; gap: 6px; }

.emp-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  background: #fff;
  color: #3b3b3b;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.emp-radio input[type="radio"] { display: none; }
.emp-radio:hover { border-color: #0969da; }

.emp-radio--selected {
  border-color: #0969da;
  background: #ddf4ff;
  color: #0550ae;
}

.emp-platform-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.emp-platform-inline { display: inline-flex; align-items: center; gap: 5px; }

.emp-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.emp-platform-grid .emp-radio { justify-content: flex-start; }

.emp-checkbox-group { display: grid; gap: 4px; }

.emp-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: #3b3b3b;
  font-size: 12px;
  cursor: pointer;
}

.emp-checkbox input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px; min-width: 14px;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

.emp-checkbox input[type="checkbox"]:checked {
  background: #0969da;
  border-color: #0969da;
}

.emp-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px; left: 4px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── File / photo ───────────────────────────────────────────────── */

.emp-file-input { padding: 4px 0; color: #586069; font-size: 12px; }

.emp-file-input::file-selector-button {
  appearance: none;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  background: #f6f8fa;
  color: #24292e;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 8px;
}

.emp-file-input::file-selector-button:hover { background: #eaeef2; }

.emp-screenshots-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.emp-photo-preview { display: flex; align-items: flex-start; gap: 6px; }

.emp-photo-preview img {
  width: 80px; height: 60px;
  object-fit: cover;
  border: 1px solid #d0d7de;
  border-radius: 3px;
}

.emp-photo-remove {
  appearance: none;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  background: #fff;
  color: #cf222e;
  padding: 3px 6px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.emp-photo-remove:hover { background: #ffebe9; border-color: #cf222e; }

.emp-video-attached {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px; font-size: 12px; color: #586069;
}

.emp-form-divider { height: 1px; background: #eaecef; margin: 2px 0; }

.emp-form-pay-preview {
  padding: 8px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 3px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 14px;
  font-weight: 600;
}

/* ─── Buttons ────────────────────────────────────────────────────── */

.emp-form-actions { display: flex; gap: 8px; padding-top: 2px; }

.emp-btn-primary,
.emp-btn-submit {
  appearance: none;
  border: 1px solid #0969da;
  border-radius: 3px;
  background: #0969da;
  color: #fff;
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.emp-btn-primary:hover:not(:disabled),
.emp-btn-submit:hover:not(:disabled) { background: #0860ca; }

.emp-btn-primary:disabled,
.emp-btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.emp-btn-secondary {
  appearance: none;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  background: #fff;
  color: #24292e;
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.emp-btn-secondary:hover { background: #f6f8fa; }

/* ─── Link button ────────────────────────────────────────────────── */

.emp-link-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #0969da;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.emp-link-btn:hover { text-decoration: underline; }

/* ─── Review ─────────────────────────────────────────────────────── */

.emp-review { display: grid; gap: 12px; max-width: 640px; }
.emp-review-header { font-size: 16px; font-weight: 600; color: #1a1a1a; }

.emp-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.emp-review-item {
  display: grid; gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e1e4e8;
  border-radius: 3px;
}

.emp-review-item--full { grid-column: 1 / -1; }

.emp-review-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #8b949e;
}

.emp-review-value { color: #1a1a1a; font-size: 13px; word-break: break-word; }
.emp-review-pay { font-weight: 700; color: #065f46; font-size: 16px; }

.emp-review-photo {
  width: 100px; height: 75px;
  object-fit: cover;
  border: 1px solid #d0d7de;
  border-radius: 3px;
}

.emp-review-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.emp-review-list { margin: 0; padding-left: 16px; display: grid; gap: 2px; }
.emp-review-list li { color: #1a1a1a; font-size: 12px; }

/* ─── Success banner ─────────────────────────────────────────────── */

.emp-success-banner {
  padding: 8px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 3px;
  background: #ecfdf5;
  color: #065f46;
  font-weight: 600;
  font-size: 13px;
}

/* ─── Submissions table ──────────────────────────────────────────── */

.emp-submissions { display: grid; gap: 8px; }

.emp-table-wrap {
  overflow-x: auto;
  border: 1px solid #e1e4e8;
  border-radius: 3px;
}

.emp-sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.emp-sub-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #586069;
  border-bottom: 1px solid #e1e4e8;
  background: #f6f8fa;
  white-space: nowrap;
}

.emp-sub-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f0f0f0;
  color: #24292e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emp-sub-table tbody tr:hover { background: #f6f8fa; }

.emp-col-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: #586069;
}

.emp-col-truncate {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emp-col-cap { text-transform: capitalize; }
.emp-col-right { text-align: right !important; }
.emp-col-pay { font-weight: 600; color: #065f46; }

.emp-sub-total-row td {
  border-top: 2px solid #d0d7de;
  border-bottom: none;
  font-weight: 700;
  background: #f6f8fa;
  padding: 8px;
}

.emp-tip-note {
  font-size: 11px;
  color: #8b949e;
  padding: 4px 8px;
}

/* ─── Loading / empty ────────────────────────────────────────────── */

.emp-loading,
.emp-empty {
  padding: 20px 14px;
  text-align: center;
  color: #8b949e;
  font-size: 13px;
}

/* ─── Job Listings ───────────────────────────────────────────────── */

.emp-jobs { display: grid; gap: 12px; }

.emp-job-list { display: grid; gap: 8px; }

.emp-job-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e1e4e8;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 120ms ease;
}

.emp-job-card:hover { border-color: #0969da; }
.emp-job-card--filled { opacity: 0.75; cursor: pointer; }
.emp-job-card--filled:hover { border-color: #0969da; }
.emp-job-card:focus-visible {
  outline: 2px solid #0969da;
  outline-offset: 2px;
}

.emp-job-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.emp-job-card-logo {
  width: 24px; height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 1px;
}

.emp-job-card-info { display: grid; gap: 2px; min-width: 0; }
.emp-job-card-title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.emp-job-card-desc { font-size: 12px; color: #586069; line-height: 1.4; }

.emp-job-card-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.emp-job-card-pay { font-weight: 600; color: #065f46; }
.emp-job-card-slots { color: #586069; }

.emp-job-card-badge {
  display: inline-flex;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  background: #ddf4ff;
  color: #0550ae;
}

.emp-job-card-badge--cap {
  background: #fff8c5;
  color: #7c5e00;
}

.emp-job-card-link {
  margin-left: auto;
  font-weight: 600;
  color: #0969da;
  white-space: nowrap;
}

/* ─── Job form view ──────────────────────────────────────────────── */

.emp-job-form-view { display: grid; gap: 14px; max-width: 640px; }
.emp-job-form-title { margin: 0; font-size: 18px; font-weight: 600; color: #1a1a1a; }
.emp-job-form-desc { margin: 0; font-size: 13px; color: #586069; line-height: 1.5; }

.emp-job-form-meta {
  display: flex; gap: 16px;
  font-size: 12px; color: #586069;
  padding: 8px 0;
  border-top: 1px solid #eaecef;
  border-bottom: 1px solid #eaecef;
}

.emp-job-form-meta span:first-child { font-weight: 600; color: #065f46; }

.emp-job-cap-msg {
  padding: 8px 12px;
  border: 1px solid #fde68a;
  border-radius: 3px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
}

.emp-job-fields { display: grid; gap: 10px; }
.emp-job-field { display: grid; gap: 3px; }

/* ─── Job past submissions ───────────────────────────────────────── */

.emp-job-my-subs {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.emp-job-my-subs h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  padding-bottom: 4px;
  border-bottom: 1px solid #eaecef;
}

.emp-job-sub-card {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #e1e4e8;
  border-radius: 3px;
  background: #f6f8fa;
}

.emp-job-sub-time { font-size: 11px; color: #8b949e; }

.emp-job-sub-field {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.emp-job-sub-key {
  font-weight: 600;
  color: #586069;
  text-transform: capitalize;
  min-width: 100px;
}

.emp-job-sub-val {
  color: #1a1a1a;
  word-break: break-word;
}

/* ─── Payout Preferences ─────────────────────────────────────────── */

.emp-payout-section {
  display: grid;
  gap: 10px;
}

.emp-payout-methods {
  display: flex;
  gap: 6px;
}

.emp-payout-field {
  display: grid;
  gap: 3px;
  max-width: 360px;
}

.emp-payout-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Resources / Guidelines ─────────────────────────────────────── */

.emp-resources {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.emp-resources-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  padding-bottom: 6px;
  border-bottom: 1px solid #e1e4e8;
}

.emp-resources-section {
  display: grid;
  gap: 4px;
}

.emp-resources-heading {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.emp-resources-text {
  margin: 0;
  font-size: 13px;
  color: #586069;
  line-height: 1.5;
}

.emp-resources-logos {
  display: flex;
  gap: 12px;
  padding: 8px 0;
}

.emp-resources-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid #e1e4e8;
  border-radius: 3px;
  text-decoration: none;
  color: #0969da;
  font-size: 11px;
}

.emp-resources-logo-link:hover { border-color: #0969da; background: #f6f8fa; }

.emp-resources-logo-link img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.emp-resources-tiers {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.emp-tier {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.emp-tier:last-child { border-bottom: none; }

.emp-tier-label {
  font-weight: 600;
  color: #1a1a1a;
}

.emp-tier-desc {
  color: #586069;
  line-height: 1.4;
}

.emp-resources-examples {
  margin: 4px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
}

.emp-resources-examples li {
  font-size: 12px;
  color: #3b3b3b;
  font-style: italic;
}

/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .employee-page__shell {
    width: calc(100% - 16px);
    padding: 14px 0 28px;
    gap: 10px;
  }

  .emp-dash-greeting { font-size: 16px; }
  .emp-dash-date { font-size: 11px; }
  .emp-tab { font-size: 12px; padding: 7px 10px; }
  .emp-form { max-width: none; }
  .emp-review { max-width: none; }
  .emp-review-grid { grid-template-columns: 1fr; }

  .emp-radio-group,
  .emp-platform-grid { grid-template-columns: 1fr 1fr; }

  .emp-radio { font-size: 11px; padding: 5px 8px; }

  .emp-job-form-meta { flex-direction: column; gap: 4px; }
  .emp-job-form-view { max-width: none; }

  .emp-col-hide-sm { display: none; }

  .emp-sub-table { font-size: 12px; }
  .emp-sub-table th,
  .emp-sub-table td { padding: 5px 6px; }

  .emp-tier { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 480px) {
  .employee-page__shell {
    width: calc(100% - 12px);
    padding: 10px 0 24px;
  }

  .emp-dash-greeting { font-size: 14px; }
  .emp-tab { font-size: 11px; padding: 6px 8px; }

  .emp-sub-table th,
  .emp-sub-table td { padding: 4px 4px; font-size: 11px; }
}
.main-page-header {
  padding-top: 32px;
  padding-bottom: 20px;
  margin-bottom: 28px;
}

.main-page-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--text, #fff);
}

.main-page-desc {
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
  color: var(--muted, #bababa);
}
/* NotFound.css - Clean 404 page */

.not-found-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--toolbar-h, 52px));
}

.not-found-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  padding: 48px 24px;
}

.not-found-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 72px;
  font-weight: 700;
  color: var(--line);
  line-height: 1;
  margin-bottom: 16px;
}

.not-found-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

.not-found-message {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.not-found-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.not-found-actions .primary-btn,
.not-found-actions .secondary-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.not-found-actions .primary-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--text);
}

.not-found-actions .primary-btn:hover {
  background: var(--bg-alt);
  border-color: var(--muted);
}

.not-found-actions .secondary-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

.not-found-actions .secondary-btn:hover {
  border-color: var(--muted);
  color: var(--text);
}

.not-found-links {
  width: 100%;
}

.not-found-links-label {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.not-found-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.not-found-link-item {
  padding: 6px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.15s ease;
}

.not-found-link-item:hover {
  background: var(--bg-elevated);
  border-color: var(--muted);
  text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .not-found-content {
    padding: 32px 20px;
    max-width: 100%;
  }

  .not-found-code {
    font-size: 56px;
  }

  .not-found-title {
    font-size: 13px;
  }

  .not-found-message {
    font-size: 13px;
  }

  .not-found-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .not-found-content {
    padding: 24px 16px;
  }

  .not-found-code {
    font-size: 48px;
  }

  .not-found-title {
    font-size: 13px;
  }

  .not-found-message {
    font-size: 13px;
  }

  .not-found-actions .primary-btn,
  .not-found-actions .secondary-btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  .not-found-link-item {
    font-size: 13px;
    padding: 5px 10px;
  }
}
/* =============================================================================
   OnboardingChecklist - Getting Started card on dashboard
   ============================================================================= */

.onboarding-checklist {
  background: var(--bg-elevated, #1a1a1a);
  border: 1px solid var(--line, #2e2e2e);
  border-radius: 3px;
  margin-bottom: 0;
  overflow: hidden;
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, #2e2e2e);
  background: #141414;
}

.onboarding-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.onboarding-progress {
  font-size: 11px;
  color: var(--muted, #888);
}

.onboarding-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.onboarding-collapse-btn,
.onboarding-dismiss-btn {
  padding: 3px;
  background: transparent;
  border: none;
  color: var(--muted, #888);
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}
.onboarding-collapse-btn:hover,
.onboarding-dismiss-btn:hover {
  color: var(--text, #e4e4e4);
  background: rgba(255, 255, 255, 0.05);
}

.onboarding-steps {
  padding: 4px 0;
  padding-left: 8px;
  padding-right: 8px;
}

.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 12px;
  transition: background 0.15s;
}
.onboarding-step:hover:not(.is-done) {
  background: #2d2d2d;
}

.onboarding-step-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #555;
}
.onboarding-step.is-done .onboarding-step-icon {
  color: #3fb950;
}

.onboarding-step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.onboarding-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #e4e4e4);
}
.onboarding-step.is-done .onboarding-step-label {
  color: var(--muted, #888);
  text-decoration: line-through;
}

.onboarding-step-desc {
  font-size: 11px;
  color: var(--muted, #888);
  line-height: 1.4;
}

.onboarding-step-link {
  display: inline-block;
  font-size: 11px;
  color: #58a6ff;
  text-decoration: none;
  margin-top: 2px;
}
.onboarding-step-link:hover {
  text-decoration: underline;
}

/* ── Inline (list) variant ── */

.onboarding-inline-row {
  text-decoration: none;
  color: var(--text);
}

.onboarding-inline-row:hover {
  color: var(--text);
  text-decoration: none;
}

.onboarding-inline-check {
  color: var(--success, #3fb950);
}

.onboarding-inline-label {
  color: var(--muted);
  text-decoration: line-through;
}

.onboarding-inline-action {
  color: #58a6ff;
}

.onboarding-dismiss-inline-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}

.onboarding-dismiss-inline-btn:hover {
  color: var(--text);
}
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
.intro-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intro-page-head {
  margin-bottom: 14px;
}
/* ── 2-column layout ── */
.intro-workspace-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
/* ── Left: nav card ── */
.intro-nav-card {
  position: sticky;
  top: 16px;
}
.intro-nav-body {
  padding: 0;
}
.intro-nav-group {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.intro-nav-group:last-child {
  border-bottom: none;
}
.intro-nav-group-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 4px;
}
.intro-nav-row {
  text-decoration: none;
  color: var(--text);
}
.intro-nav-row:hover {
  color: var(--text);
  text-decoration: none;
}
.intro-nav-icon {
  flex-shrink: 0;
  color: var(--muted);
}
.intro-nav-label {
  flex: 1;
  font-size: 12px;
  min-width: 0;
}
.intro-nav-arrow {
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.4;
}
.intro-nav-row:hover .intro-nav-arrow {
  opacity: 0.8;
}
/* ── Right: main area ── */
.intro-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* ── Tabs (supplement account-tabs) ── */
.intro-tabs {
  overflow-x: auto;
  scrollbar-width: thin;
}
/* ── Tab content (supplement account-content) ── */
.intro-tab-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* ── Sections within tab content ── */
.intro-content-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.intro-content-section:first-child {
  padding-top: 0;
}
.intro-content-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.intro-content-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
/* ── Stat rows ── */
.intro-stat-icon {
  flex-shrink: 0;
  color: var(--muted);
}
.intro-stat-label {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
}
.intro-stat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  flex-shrink: 0;
}
.intro-stat-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.intro-stat-meta {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
/* ── Activity rows ── */
.intro-activity-meta {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
  flex-shrink: 0;
}
.intro-checked-time {
  font-size: 11px;
  color: var(--muted);
}
/* ── Provider status ── */
.intro-provider-status {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
  flex-shrink: 0;
}
.intro-provider-status.is-connected {
  color: var(--success, #3fb950);
}
/* ── Provider forms ── */
.intro-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}
.intro-form-grid .form-group {
  margin-bottom: 0;
}
.intro-form-grid .form-group.span-2 {
  grid-column: span 2;
}
.intro-mono-input {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
}
.intro-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}
.intro-checkbox-label input {
  flex-shrink: 0;
}
.intro-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.intro-warning {
  color: var(--warning);
  margin-top: 0;
  margin-bottom: 10px;
}
/* ── Responsive ── */
@media (max-width: 840px) {
  .intro-workspace-layout {
    grid-template-columns: 1fr;
  }

  .intro-nav-card {
    position: static;
  }
}
@media (max-width: 700px) {
  .intro-form-grid {
    grid-template-columns: 1fr;
  }

  .intro-form-grid .form-group.span-2 {
    grid-column: auto;
  }
}
/* AppHeader.css - Main application header/navigation */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px 0 22px;
  height: 44px;
  background: #090a0a;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
}

.panel-bar {
  flex-shrink: 0;
}

/* ---------- BRAND ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.brand:hover,
.brand:active {
  opacity: 0.95;
  transform: none;
  text-decoration: none;
}

.brand__text:hover {
  text-decoration: none;
}

.brand__icon-shell {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 1px;
  flex-shrink: 0;
}

.brand__motion-lines {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  transform: translateX(4px);
}

.brand__motion-line {
  display: block;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.68));
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
  transform-origin: right center;
}

.brand__motion-line--1 {
  width: 4px;
  transform: rotate(7deg);
}

.brand__motion-line--2 {
  width: 6px;
  transform: none;
}

.brand__motion-line--3 {
  width: 4px;
  transform: rotate(-14deg);
}

.brand__icon {
  height: 40px;
  width: 40px;
  align-self: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.brand__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateY(0);
}

.brand__icon svg {
  display: block;
  fill: currentColor;
}

/* ---------- WORD-MARK ---------- */
.brand__text {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-size: 13px;
  color: #ffffff !important;
  font-weight: 600;
  font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.brand__separator {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 300;
  margin: 0 -2px;
}

.brand__tagline {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 400;
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ---------- NAV LINKS ---------- */
.app-header .nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
}

.nav-link {
  padding: 5px 11px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  letter-spacing: 0.2px;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.header-upgrade-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.header-upgrade-cta:hover {
  background: linear-gradient(135deg, #25d559 0%, #19b34d 100%);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
  transform: translateY(-1px);
  text-decoration: none;
}

.header-upgrade-cta.active {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.public-auth-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.header-signup-cta {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: #ffffff;
  color: #090a0a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.header-signup-cta:hover,
.header-signup-cta:focus,
.header-signup-cta:visited {
  color: #090a0a;
  text-decoration: none;
}

/* ---------- SHARED NAV BUTTON STYLE ---------- */
.actions-nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  letter-spacing: 0.2px;
}

.actions-nav-btn:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
}

.actions-nav-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

/* ---------- DROPDOWN MENU ---------- */
.actions-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 296px;
  max-width: min(90vw, 320px);
  padding: 6px;
  border-radius: 7px;
  background: #141414;
  border: 1px solid #242424;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 200;
  box-sizing: border-box;
}

/* ---------- DROPDOWN ITEMS ---------- */
.actions-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.1s ease;
}

.actions-dropdown-item:hover:not(.is-disabled) {
  color: #fff;
}

.actions-dropdown-item:hover:not(.is-disabled) .actions-dropdown-label {
  font-weight: 700;
}

.actions-dropdown-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.actions-dropdown-item.active .actions-dropdown-desc {
  color: rgba(255, 255, 255, 0.5);
}

.actions-dropdown-item.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- DROPDOWN ICON ---------- */
.actions-dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  border-radius: 3px;
  opacity: 0.7;
}

.actions-dropdown-icon svg,
.actions-dropdown-icon img {
  width: 12px;
  height: 12px;
}

/* ---------- DROPDOWN CONTENT ---------- */
.actions-dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.actions-dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
}

.actions-dropdown-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.3;
}

.actions-dropdown-section-label {
  padding: 5px 9px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.actions-dropdown-separator {
  height: 1px;
  background: #242424;
  margin: 4px 2px;
}

/* ---------- DROPDOWN CONTAINERS ---------- */
.actions-dropdown-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* ---------- CHEVRONS ---------- */
.actions-chevron {
  transition: transform 0.15s ease;
  opacity: 0.5;
}

.actions-chevron.open {
  transform: rotate(180deg);
}


.nav-link-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(61, 113, 232, 0.15);
  color: #3d71e8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}

.actions-dropdown-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 12px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--surface, #313244);
  color: var(--muted, #a6adc8);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.user-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

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

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-name.is-pro {
  color: #c8a84b;
  background-image: linear-gradient(105deg, #b8923a 0%, #e8c96a 45%, #f5e08a 55%, #e8c96a 65%, #b8923a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.user-name.is-business {
  color: #c8a84b;
  background-image: linear-gradient(105deg, #b8923a 0%, #e8c96a 45%, #f5e08a 55%, #e8c96a 65%, #b8923a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* PRO Badge in header */
.header-pro-badge {
  font-family: "Fira Code", "Fira Code Retina", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  background: transparent;
  color: #c9a227;
  border: none;
  margin-left: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1;
}

/* ---------- USER DROPDOWN ---------- */
.app-header .user-dropdown-container {
  position: relative;
  margin-left: 10px;
  padding-left: 0;
  display: flex;
  align-items: center;
}

.app-header .user-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease;
  line-height: 1;
}

.user-profile-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dropdown-chevron {
  color: var(--muted);
  transition: transform 0.15s ease;
}

.dropdown-chevron.open {
  transform: rotate(180deg);
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 296px;
  max-width: min(90vw, 320px);
  background: #141414;
  border: 1px solid #242424;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 6px;
  overflow: hidden;
  z-index: 200;
  box-sizing: border-box;
}

.user-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 7px 9px;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.1s ease, font-weight 0.1s ease;
  text-decoration: none;
}

/* Icon row layout (Admin, Logout) */
.user-dropdown-item.user-dropdown-item-icon-row {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

.dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
}

.user-dropdown-item:hover {
  color: #fff;
  font-weight: 700;
}

.user-dropdown-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.user-dropdown-item.active .dropdown-item-desc {
  color: rgba(255, 255, 255, 0.5);
}

.dropdown-item-desc {
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
}

.user-dropdown-separator {
  height: 1px;
  background: #242424;
  margin: 4px 2px;
}

.user-dropdown-link {
  color: var(--fgColor-link);
}

.user-dropdown-link:hover {
  color: var(--fgColor-accent);
}

/* Hide mobile-only items on desktop */
.mobile-only {
  display: none;
}

/* ---------- MOBILE NAV MENU ---------- */
.mobile-nav-container {
  position: relative;
  display: none;
  align-items: center;
}

.mobile-nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-nav-chevron {
  transition: transform 0.15s ease;
  opacity: 0.5;
}

.mobile-nav-chevron.open {
  transform: rotate(180deg);
}

.mobile-nav-menu {
  position: fixed;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 300px);
  background: #141414;
  border: 1px solid #242424;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 200;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 56px);
  box-sizing: border-box;
}

.mobile-nav-section-label {
  padding: 5px 9px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.mobile-nav-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.1s ease, font-weight 0.1s ease;
}

.mobile-nav-item:hover {
  color: #fff;
  font-weight: 600;
}

.mobile-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mobile-nav-separator {
  height: 1px;
  background: #242424;
  margin: 4px 2px;
}


/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .app-header {
    padding: 0 24px 0 16px;
  }
}

@media (max-width: 900px) {
  .app-header .nav-links {
    gap: 0;
  }

  .nav-link,
  .actions-nav-btn {
    padding: 5px 9px;
    font-size: 13px;
  }

  .nav-link-desktop-only {
    display: none;
  }

  .mobile-only {
    display: flex;
  }

  .user-name {
    display: inline;
    font-size: 13px;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-header .user-dropdown-container {
    margin-left: 8px;
    padding-left: 0;
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 0 16px 0 12px;
  }

  .brand__tagline,
  .brand__separator {
    display: none;
  }

  /* Center all dropdown menus on the screen */
  .actions-dropdown-menu,
  .user-dropdown-menu,
  .mobile-nav-menu {
    position: fixed;
    top: 44px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(90vw, 300px);
    min-width: unset;
    max-width: 90vw;
    max-height: calc(100vh - 56px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .actions-dropdown-item,
  .user-dropdown-item,
  .mobile-nav-item {
    min-width: 0;
  }

  .actions-dropdown-content {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  /* Switch from desktop nav items to single mobile menu */
  .desktop-only-nav {
    display: none !important;
  }

  .mobile-nav-container {
    display: flex;
  }

  .brand__text {
    display: none;
  }

  .app-header {
    padding: 0 12px 0 10px;
  }
}

@media (max-width: 480px) {
  .app-header {
    padding: 0 12px 0 10px;
  }
}

@media (max-width: 360px) {
  .app-header {
    padding: 0 10px 0 8px;
  }
}

/* ── App layout ────────────────────────────────────────────────────── */

.app-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
}

.app-main {
  min-height: 0;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
}
.admin-verify-page {
  min-height: calc(100vh - var(--toolbar-h));
  min-height: calc(100dvh - var(--toolbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--bg-page);
}

.admin-verify-shell {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  transform: translateY(-16px);
}

.admin-verify-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  user-select: none;
  margin-bottom: 6px;
  gap: 6px;
}

.admin-verify-brand-icon {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.admin-verify-brand-icon img {
  display: block;
  width: 34px;
  height: auto;
}

.admin-verify-brand-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-ligatures: none;
}

.admin-verify-brand-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
  font-weight: 300;
  margin: 0 2px;
}

.admin-verify-brand-admin {
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  font-weight: 400;
  font-family: 'Proxima Nova', 'proxima-nova', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

.admin-verify-card {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-verify-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.admin-verify-badge {
  width: fit-content;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.admin-verify-title {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.admin-verify-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.admin-verify-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-verify-inline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.admin-verify-input {
  width: min(100%, 360px);
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 150ms ease;
}

.admin-verify-input:hover {
  border-color: var(--accent);
}

.admin-verify-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.admin-verify-input::placeholder {
  color: var(--muted);
}

.admin-verify-check-lines {
  margin: 0;
  width: min(100%, 360px);
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 54px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-family: var(--font-mono);
}

.admin-verify-check-line {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 16px;
  visibility: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-verify-check-line.is-loading,
.admin-verify-check-line.is-success,
.admin-verify-check-line.is-error {
  visibility: visible;
}

.admin-verify-welcome {
  margin: 2px 0 0;
  width: min(100%, 360px);
  align-self: center;
  min-height: 18px;
  text-align: center;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-mono);
  line-height: 1.3;
  visibility: hidden;
}

.admin-verify-welcome.is-visible {
  visibility: visible;
}

.admin-verify-check-icon {
  color: #2ea043;
  flex-shrink: 0;
}

.admin-verify-check-icon.is-error {
  color: #f85149;
}

.admin-verify-check-spinner {
  color: var(--muted);
  flex-shrink: 0;
  animation: admin-verify-spin 800ms linear infinite;
}

@keyframes admin-verify-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.admin-verify-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--borderColor-danger-muted);
  border-radius: 6px;
  background: var(--bgColor-danger-muted);
  color: var(--fgColor-danger);
  font-size: 13px;
  font-weight: 500;
}

.admin-verify-submit {
  height: 42px;
  min-width: 140px;
  align-self: center;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid var(--borderColor-success-emphasis);
  background: var(--fgColor-success);
  color: var(--fgColor-onEmphasis);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.admin-verify-submit:hover:not(:disabled) {
  background: var(--bgColor-success-emphasis);
  border-color: var(--borderColor-success-emphasis);
  transform: translateY(-1px);
}

.admin-verify-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .admin-verify-shell {
    transform: translateY(-8px);
  }

  .admin-verify-inline-row {
    flex-direction: column;
    align-items: stretch;
  }
}
/* CoverageModeSelect.css - Matches city/country/business type dropdown styling */

.coverage-mode-select {
  position: relative;
  width: 100%;
  overflow: visible;
}

.coverage-mode-select.open {
  z-index: 2400;
}

.coverage-mode-select.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.coverage-mode-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.coverage-mode-select-trigger:hover {
  /* border lives on .capture-builder-field wrapper */
}

.coverage-mode-select-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

.coverage-mode-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-mode-select-value.placeholder {
  color: var(--muted);
}

.coverage-mode-select-caret {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.15s ease;
}

.coverage-mode-select.open .coverage-mode-select-caret {
  transform: rotate(180deg);
}

/* Dropdown — always rendered via portal with position:fixed inline style */
.coverage-mode-select-dropdown {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%),
    var(--capture-menu-surface, #25282d);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  margin-top: 2px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Options list */
.coverage-mode-select-list {
  margin: 0;
  padding: 0;
  max-height: inherit;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .coverage-mode-select-list {
    max-height: 200px;
  }
}

/* Option item */
.coverage-mode-option {
  display: block;
  position: relative;
  width: 100%;
  padding: 7px 30px 7px 10px;
  text-align: left;
  font-size: 12px;
  color: #f0f0f0;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.coverage-mode-option:hover:not(.disabled) {
  background: #3a3a3a;
}

.coverage-mode-option.selected {
  color: #f6f8fa;
  font-weight: 600;
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.12), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(34, 197, 94, 0.16),
    0 1px 0 rgba(0, 0, 0, 0.18);
}

.coverage-mode-option.selected:hover:not(.disabled) {
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.15), rgba(255, 255, 255, 0.075) 45%, rgba(255, 255, 255, 0.04));
}

.coverage-mode-option.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.78);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
  transform: translateY(-50%);
}

.coverage-mode-option.disabled {
  color: #8a8a8a;
  cursor: not-allowed;
}

.coverage-mode-option:not(:last-child) {
  border-bottom: 1px solid #3a3a3a;
}

/* Scrollbar */
.coverage-mode-select-list::-webkit-scrollbar {
  width: 6px;
}

.coverage-mode-select-list::-webkit-scrollbar-track {
  background: #2b2b2b;
}

.coverage-mode-select-list::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 3px;
}

.coverage-mode-select-list::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}
/* DorkQueryInput.css - Google Dork syntax highlighting */

.dork-query-input-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Input wrapper with overlay */
.dork-input-wrapper {
  position: relative;
  width: 100%;
  border: 1px solid var(--borderColor-default, #d0d7de);
  border-radius: 6px;
  background: var(--bgColor-default, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.dork-input-wrapper.focused {
  border-color: var(--borderColor-accent-emphasis, #0969da);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.dork-input-wrapper.disabled {
  background: var(--bgColor-muted, #f6f8fa);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Highlighted background layer */
.dork-highlight-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}

/* Actual input */
.dork-input {
  position: relative;
  width: 100%;
  min-height: 38px;
  max-height: 200px;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--fgColor-default, #1f2328);
  caret-color: var(--fgColor-default, #1f2328);
  z-index: 1;
}

.dork-input::placeholder {
  color: var(--fgColor-muted, #656d76);
  opacity: 1;
}

.dork-input:disabled {
  cursor: not-allowed;
}

/* Syntax highlighting colors */
.dork-highlight-layer .dork-site {
  color: #0969da;
  font-weight: 600;
}

.dork-highlight-layer .dork-intitle,
.dork-highlight-layer .dork-allintitle {
  color: #8250df;
  font-weight: 600;
}

.dork-highlight-layer .dork-inurl,
.dork-highlight-layer .dork-allinurl {
  color: #1a7f37;
  font-weight: 600;
}

.dork-highlight-layer .dork-filetype {
  color: #bc4c00;
  font-weight: 600;
}

.dork-highlight-layer .dork-intext,
.dork-highlight-layer .dork-allintext {
  color: #6639ba;
  font-weight: 600;
}

.dork-highlight-layer .dork-cache,
.dork-highlight-layer .dork-related,
.dork-highlight-layer .dork-info {
  color: #0550ae;
  font-weight: 600;
}

.dork-highlight-layer .dork-define,
.dork-highlight-layer .dork-stocks,
.dork-highlight-layer .dork-map,
.dork-highlight-layer .dork-movie,
.dork-highlight-layer .dork-source {
  color: #0a3069;
  font-weight: 600;
}

.dork-highlight-layer .dork-date {
  color: #953800;
  font-weight: 600;
}

.dork-highlight-layer .dork-quote {
  color: #0a3069;
  background: rgba(175, 184, 193, 0.2);
  padding: 1px 3px;
  border-radius: 3px;
}

.dork-highlight-layer .dork-or,
.dork-highlight-layer .dork-and {
  color: #cf222e;
  font-weight: 700;
  text-transform: uppercase;
}

.dork-highlight-layer .dork-exclude {
  color: #cf222e;
  font-weight: 600;
}

.dork-highlight-layer .dork-wildcard {
  color: #6639ba;
  font-weight: 600;
}

.dork-highlight-layer .dork-range {
  color: #0550ae;
  font-weight: 600;
}

/* Legend / Reference Guide */
.dork-legend-container {
  width: 100%;
}

.dork-legend-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--bgColor-muted, #f6f8fa);
  border: 1px solid var(--borderColor-default, #d0d7de);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
  color: var(--fgColor-default, #1f2328);
}

.dork-legend-toggle:hover {
  background: var(--bgColor-neutral-muted, #eaeef2);
  border-color: var(--borderColor-neutral-emphasis, #6e7781);
}

.dork-legend-toggle .toggle-icon {
  font-size: 13px;
  transition: transform 0.2s ease;
  color: var(--fgColor-muted, #656d76);
}

.dork-legend-toggle .toggle-text {
  flex: 1;
  text-align: left;
}

.dork-legend-toggle .toggle-hint {
  font-size: 13px;
  color: var(--fgColor-muted, #656d76);
}

.dork-legend-content {
  margin-top: 12px;
  padding: 16px;
  background: var(--bgColor-default, #ffffff);
  border: 1px solid var(--borderColor-default, #d0d7de);
  border-radius: 6px;
}

.dork-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.dork-legend-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dork-legend-section h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fgColor-default, #1f2328);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--borderColor-muted, #eaeef2);
  padding-bottom: 6px;
}

.dork-example {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.dork-example code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--bgColor-neutral-muted, #f6f8fa);
}

.dork-example span {
  color: var(--fgColor-muted, #656d76);
  flex: 1;
}

.dork-example-note {
  font-size: 13px;
  color: var(--fgColor-muted, #656d76);
  font-style: italic;
  padding-left: 4px;
}

/* Examples section */
.dork-legend-examples {
  grid-column: 1 / -1;
}

.dork-example-query {
  padding: 10px 12px;
  background: var(--bgColor-neutral-muted, #f6f8fa);
  border-left: 3px solid var(--borderColor-accent-emphasis, #0969da);
  border-radius: 4px;
  margin-bottom: 8px;
}

.dork-example-query code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  display: block;
  background: transparent;
  padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dork-legend-grid {
    grid-template-columns: 1fr;
  }

  .dork-input {
    font-size: 13px;
    padding: 10px 12px;
    min-height: 44px;
  }

  .dork-highlight-layer {
    font-size: 13px;
    padding: 10px 12px;
  }

  .dork-legend-toggle {
    padding: 10px 12px;
    font-size: 12px;
  }

  .dork-legend-content {
    padding: 12px;
  }

  .dork-legend-section h4 {
    font-size: 11px;
  }

  .dork-example {
    font-size: 12px;
    flex-direction: column;
    gap: 4px;
  }

  .dork-example code {
    font-size: 11px;
  }

  .dork-example-query {
    padding: 8px 10px;
  }

  .dork-example-query code {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .dork-input {
    font-size: 13px; /* Prevents iOS zoom */
    padding: 12px;
    min-height: 48px;
  }

  .dork-highlight-layer {
    font-size: 13px;
    padding: 12px;
  }

  .dork-legend-toggle {
    padding: 12px;
  }

  .dork-legend-toggle .toggle-text {
    font-size: 12px;
  }

  .dork-legend-toggle .toggle-hint {
    display: none;
  }

  .dork-legend-section {
    gap: 6px;
  }

  .dork-legend-section h4 {
    font-size: 11px;
    margin-bottom: 6px;
    padding-bottom: 4px;
  }

  .dork-example {
    font-size: 11px;
  }

  .dork-example code {
    font-size: 11px;
    padding: 1px 3px;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
  .dork-input-wrapper {
    background: var(--bgColor-default, #0d1117);
    border-color: var(--borderColor-default, #30363d);
  }

  .dork-input {
    color: var(--fgColor-default, #e6edf3);
    caret-color: var(--fgColor-default, #e6edf3);
  }

  .dork-legend-toggle {
    background: var(--bgColor-muted, #474747);
    border-color: var(--borderColor-default, #30363d);
    color: var(--fgColor-default, #e6edf3);
  }

  .dork-legend-toggle:hover {
    background: var(--bgColor-neutral-muted, #21262d);
  }

  .dork-legend-content {
    background: var(--bgColor-default, #0d1117);
    border-color: var(--borderColor-default, #30363d);
  }

  .dork-example code {
    background: var(--bgColor-neutral-muted, #474747);
  }

  .dork-example-query {
    background: var(--bgColor-neutral-muted, #474747);
  }
}
/* RuntimeProgress.css - Minimal inline log display */

.runtime-progress {
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: "Fira Code", "Fira Code Retina", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.runtime-progress-header {
  display: none;
}

.runtime-progress-logs {
  display: flex;
  flex-direction: column-reverse; /* newest entry at bottom, no JS scroll needed */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  height: 252px; /* 14 lines × 18px (12px font × 1.5 line-height) */
  font-size: 12px;
  line-height: 1.5;
  font-family: inherit;
  /* Fade out top 2 lines where old logs scroll off */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0px,
    rgba(0, 0, 0, 0.25) 18px,
    rgba(0, 0, 0, 0.6) 19px,
    rgba(0, 0, 0, 0.6) 36px,
    rgba(0, 0, 0, 1) 38px,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0px,
    rgba(0, 0, 0, 0.25) 18px,
    rgba(0, 0, 0, 0.6) 19px,
    rgba(0, 0, 0, 0.6) 36px,
    rgba(0, 0, 0, 1) 38px,
    rgba(0, 0, 0, 1) 100%
  );
}

.runtime-progress-logs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.runtime-progress-empty {
  color: var(--muted, #888888);
  font-size: 13px;
}

.runtime-progress-row {
  padding: 2px 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-size: 12px;
  opacity: 0.88;
  font-family: inherit;
}

.runtime-progress-brandmark {
  width: auto;
  height: 12px;
  max-height: 12px;
  margin-right: 4px;
  vertical-align: -2px;
  object-fit: contain;
  display: inline-block;
}

.runtime-progress-row.entering {
  animation: rp-fade-in 0.3s ease forwards;
}


@keyframes rp-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.runtime-progress-timestamp {
  color: var(--muted, #888888);
  margin-right: 6px;
}

.runtime-progress-message {
  color: var(--muted, #888888);
  font-family: inherit;
}

.runtime-progress-message.level-info {
  color: var(--muted, #888888);
}

.runtime-progress-message.level-success {
  color: var(--text, #e4e4e4);
}

.runtime-progress-message.level-warning {
  color: var(--warning, #d29922);
}

.runtime-progress-message.level-error {
  color: var(--error, #da3633);
}

.runtime-progress-json-link {
  color: #6cb6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 2px;
}

.runtime-progress-json-link:hover {
  color: #8cc8ff;
}

/* PRO label for special log lines */
.runtime-progress-pro-tag {
  font-family: "Fira Code", "Fira Code Retina", ui-monospace, monospace;
  font-size: 8px;
  font-weight: 600;
  color: #c9a227;
  margin-left: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Animated dots for active row */
.runtime-progress-dots {
  display: inline-block;
  margin-left: 2px;
}

.runtime-progress-dots::after {
  content: '.';
  animation: rp-dots 1.2s steps(3, end) infinite;
}

@keyframes rp-dots {
  0% { content: '.'; }
  33% { content: '..'; }
  66% { content: '...'; }
  100% { content: '.'; }
}

.runtime-progress-footer {
  display: none;
}

.runtime-progress-recap {
  font-size: 12px;
  color: var(--text, #e4e4e4);
  padding: 2px 0;
  font-weight: 500;
}

/* Section header styling - bold first line of each runtime phase */
.runtime-progress-section {
  font-weight: 600;
}

.runtime-progress-section .runtime-progress-message {
  color: var(--text, #e4e4e4);
}

.runtime-progress-section-name {
  font-weight: 600;
  color: var(--text, #e4e4e4);
}

/* Responsive */
@media (max-width: 768px) {
  .runtime-progress-logs {
    max-height: 200px;
  }
}
/* StatusBar.css - matches CapturePage card aesthetic */

.status-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	border-radius: 4px;
	min-height: 20px;
	position: relative;
	margin-top: 8px;

}

.status-bar-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-alt, #1e1e1e);
  color: var(--muted, #888888);
  border: 1px solid var(--line, #2e2e2e);
}

.status-bar-indicator.idle {
  color: var(--muted, #888888);
}

.status-bar-indicator.running {
  color: var(--success, #238636);
  border-color: rgba(35, 134, 54, 0.4);
  background: rgba(35, 134, 54, 0.1);
}

.status-bar-indicator.completed {
  color: var(--success, #238636);
}

.status-bar-indicator.error {
  color: var(--error, #da3633);
}

.status-spinner {
  display: inline-block;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: status-spin 0.8s linear infinite;
}

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

.status-bar-text {
  flex: 1;
  font-size: 12px;
  font-family: inherit;
  color: var(--muted, #888888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.status-bar-text.idle {
  color: var(--muted, #888888);
}

.status-bar-text.running {
  color: var(--text, #e4e4e4);
}

.status-bar-text.completed {
  color: var(--text, #e4e4e4);
}

.status-bar-text.error {
  color: var(--muted, #888888);
}

.status-bar-ellipsis {
  flex-shrink: 0;
  font-size: 12px;
  font-family: inherit;
  color: var(--muted, #888888);
  cursor: help;
  padding: 0 4px;
}

.status-bar-link {
  color: var(--link, #58a6ff);
  font-weight: 500;
  text-decoration: none;
}

.status-bar-link:hover {
  color: var(--link-hover, #79c0ff);
  text-decoration: underline;
}

/* Popover for full log text */
.status-bar-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: var(--bg-elevated, #242424);
  border: 1px solid var(--line, #2e2e2e);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text, #e4e4e4);
  white-space: normal;
  word-break: break-word;
  z-index: 100;
  max-width: 100%;
}

.status-bar-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: var(--line, #2e2e2e);
}

@media (max-width: 768px) {
  .status-bar {
    padding: 4px 8px;
    min-height: 22px;
  }

  .status-bar-text {
    font-size: 11px;
  }

  .status-bar-popover {
    font-size: 11px;
  }
}
/* SubdivisionProgress.css - Minimal progress indicator for subdivision */

.subdivision-progress-container {
  margin-top: 8px;
}

.subdivision-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.subdivision-progress-text {
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 100px;
  text-align: right;
}

.subdivision-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  min-width: 0;
  max-width: 300px;
}

.subdivision-progress-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.3s ease;
  min-width: 1px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .action-area .subdivision-progress-container {
    margin-top: 4px;
  }

  .subdivision-progress-container {
    margin-top: 6px;
  }
  
  .subdivision-progress-text {
    font-size: 11px;
  }
  
  .subdivision-progress-bar {
    height: 2px;
    min-width: 0;
    max-width: none;
  }

  .subdivision-progress-text {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .subdivision-progress {
    width: 100%;
    flex-wrap: nowrap;
  }

  .subdivision-progress-bar {
    max-width: none;
    min-width: 0;
  }
}/* RuntimeControls.css - Minimal GitHub-style buttons (dark mode) */

.runtime-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.runtime-status-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.runtime-status-text {
  color: var(--text, #e4e4e4);
}

.runtime-status-job-link {
  color: var(--link, #58a6ff);
  text-decoration: none;
  font-weight: 500;
}

.runtime-status-job-link:hover {
  color: var(--link-hover, #79c0ff);
  text-decoration: underline;
}

.runtime-summary-line {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.runtime-controls .control-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .runtime-controls {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }

  .runtime-status-display {
    min-width: 0;
    flex: 1 1 auto;
  }

  .runtime-status-display > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .runtime-controls .control-group {
    margin-left: 0;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
  }
}

/* Minimal button style - bare bones compact */
.control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
}

.control-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}

.control-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.control-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Start button - green border */
.control-btn.primary,
.control-btn.start-btn {
  color: var(--success);
  border-color: var(--success);
}

.control-btn.primary:hover:not(:disabled),
.control-btn.start-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}

/* Pause button - yellow border */
.control-btn.warning {
  color: var(--warning);
  border-color: var(--warning);
}

.control-btn.warning:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--warning);
}

/* Stop button - red border */
.control-btn.danger {
  color: var(--error);
  border-color: var(--error);
}

.control-btn.danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}

/* Runtime status */
.runtime-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--mono, ui-monospace, monospace);
}

.runtime-status.active {
  color: var(--success);
}

.runtime-status.paused {
  color: var(--warning);
}

/* Runner badge - matching SHA-256 verification badge style from AdminPanel */
.runner-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.runner-badge svg {
  flex-shrink: 0;
}

.runner-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.runner-status {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Runner A - Purple */
.runner-badge-a {
  background: rgba(163, 113, 247, 0.08);
  border: 1px solid rgba(163, 113, 247, 0.25);
}

.runner-badge-a svg {
  color: #a371f7;
}

.runner-badge-a .runner-status {
  color: #a371f7;
}

/* Runner B - Burnt Orange */
.runner-badge-b {
  background: rgba(219, 109, 40, 0.08);
  border: 1px solid rgba(219, 109, 40, 0.25);
}

.runner-badge-b svg {
  color: #db6d28;
}

.runner-badge-b .runner-status {
  color: #db6d28;
}

/* ========================================
   Free Tier Listing Limit Warning
   ======================================== */

.control-btn.limit-reached {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--error-bg, #fee2e2);
  border-color: var(--error, #dc2626);
  color: var(--error, #dc2626);
}

.control-btn.limit-reached:hover {
  background: var(--error-bg, #fee2e2);
  border-color: var(--error, #dc2626);
  opacity: 0.5;
}

.limit-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--warning-bg, #fef3c7);
  border: 1px solid var(--warning, #d97706);
  border-radius: 6px;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  width: 100%;
}

.warning-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.warning-text {
  flex: 1;
  color: var(--warning-dark, #92400e);
}

.upgrade-link {
  color: var(--primary, #3b82f6);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: text-decoration 0.2s;
}

.upgrade-link:hover {
  text-decoration: underline;
}
/* CountrySelect.css - Matches city/state dropdown styling */

.country-select {
  position: relative;
  width: 100%;
  overflow: visible;
}

.country-select.open {
  z-index: 2400;
}

.country-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.country-select-trigger:hover {
  border-color: var(--accent, #444);
}

.country-select-trigger:focus {
  outline: none;
  border-color: var(--focus-ring, #58a6ff);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

.country-select.open .country-select-trigger {
  border-color: var(--focus-ring, #58a6ff);
}

.country-select.required-missing .country-select-trigger {
  border-color: var(--error, #da3633);
}

.country-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-value.placeholder {
  color: var(--muted);
}

.country-select-caret {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.15s ease;
}

.country-select.open .country-select-caret {
  transform: rotate(180deg);
}

/* Dropdown - matches .recent-cities-dropdown */
.country-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2410;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%),
    var(--capture-menu-surface, #25282d);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  margin-top: 2px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Options list */
.country-select-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: inherit;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .country-select-list {
    max-height: 200px;
  }
}

/* Group header - matches .dropdown-header */
.country-select-group-label {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #bdbdbd;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #3a3a3a;
  background: var(--capture-menu-header-surface, #232831);
}

/* Option item - matches .dropdown-item */
.country-select-option {
  display: block;
  position: relative;
  width: 100%;
  padding: 7px 30px 7px 10px;
  text-align: left;
  font-size: 12px;
  color: #f0f0f0;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.country-select-option:hover,
.country-select-option.highlighted {
  background: #3a3a3a;
}

.country-select-option.selected {
  color: #f6f8fa;
  font-weight: 600;
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.12), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(34, 197, 94, 0.16),
    0 1px 0 rgba(0, 0, 0, 0.18);
}

.country-select-option.selected:hover,
.country-select-option.selected.highlighted {
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.15), rgba(255, 255, 255, 0.075) 45%, rgba(255, 255, 255, 0.04));
}

.country-select-option.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.78);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
  transform: translateY(-50%);
}

.country-select-option:not(:last-child) {
  border-bottom: 1px solid #3a3a3a;
}

/* Divider */
.country-select-divider {
  height: 0;
  margin: 0;
  border: none;
}

.country-select-search {
  padding: 8px;
  border-bottom: 1px solid #3a3a3a;
  background: var(--capture-menu-header-surface, #232831);
}

.country-select-search-input {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  background: rgba(12, 16, 22, 0.86);
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  color: #f0f0f0;
  font-size: 12px;
  outline: none;
}

.country-select-search-input::placeholder {
  color: #9aa4b2;
}

.country-select-search-input:focus {
  border-color: var(--focus-ring, #58a6ff);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.18);
}

.country-select-empty {
  padding: 8px;
  font-size: 13px;
  color: #bdbdbd;
  text-align: center;
}

/* Scrollbar */
.country-select-list::-webkit-scrollbar {
  width: 6px;
}

.country-select-list::-webkit-scrollbar-track {
  background: #2b2b2b;
}

.country-select-list::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 3px;
}

.country-select-list::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}
/* CaptureIndeedPage.css - Dedicated style entry for Indeed capture page */
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
/* Keep same look/feel as existing capture pages, with room for targeted tweaks. */

.capture-craigslist-workspace {
  --capture-service-craigslist: #85789d;
  width: 100%;
}

.capture-craigslist-workspace--embedded {
  padding: 0;
}

.capture-query-badge--craigslist {
  background: var(--capture-service-craigslist);
}

.capture-craigslist-workspace[data-query-collapsed='false'] .capture-query-runtime-head {
  box-shadow: inset 0 1px 0 var(--line);
}

.capture-builder-grid--craigslist {
  --capture-builder-rail: var(--capture-service-craigslist);
}

.capture-builder-field--craigslist-state {
  flex: 0.85 1 190px;
}

.capture-builder-field--craigslist-market {
  flex: 1.05 1 240px;
  min-width: 220px;
}

.capture-builder-field--craigslist-section {
  flex: 0.95 1 210px;
  min-width: 190px;
}

.capture-builder-field--craigslist-query {
  flex: 1.55 1 320px;
  min-width: 280px;
}

.capture-builder-field--craigslist-pages {
  flex: 0.35 1 96px;
  max-width: 96px;
}

.capture-craigslist-builder-actions {
  padding-left: 6px;
}

.cl-mode-pills {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cl-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.cl-mode-pill-badge {
  height: var(--capture-bar-h);
  min-height: var(--capture-bar-h);
  max-height: var(--capture-bar-h);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  border-radius: 2px;
  line-height: 1;
}

.capture-batch-states-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.capture-batch-state-btn {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.capture-batch-state-btn:hover:not(:disabled) {
  background: var(--overlay-hover);
  color: var(--text);
  border-color: var(--borderColor-muted);
}

.capture-batch-state-btn.is-selected {
  border-color: rgba(61, 113, 232, 0.28);
  background: rgba(61, 113, 232, 0.08);
  color: #8ab4ff;
}

.capture-batch-state-btn.is-disabled,
.capture-batch-state-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.build-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.build-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.build-toolbar-left,
.build-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.build-toolbar-right a {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
}

.build-toolbar-right a:hover {
  color: var(--text);
  text-decoration: underline;
}

.build-integrations {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.build-integrations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.build-integrations-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.build-integrations-head strong {
  font-size: 12px;
}

.build-integrations-summary span {
  font-size: 11px;
  color: var(--muted);
}

.build-integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.build-integrations-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: rgba(110, 118, 129, 0.12);
}

.build-integrations-pill--ready {
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.12);
}

.build-integrations-pill--partial {
  border-color: rgba(210, 153, 34, 0.45);
  background: rgba(210, 153, 34, 0.12);
}

.build-integrations-pill--action_required {
  border-color: rgba(248, 81, 73, 0.45);
  background: rgba(248, 81, 73, 0.12);
}

.build-integrations-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(110, 118, 129, 0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-integrations-card.is-connected {
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.1);
}

.build-integrations-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.build-integrations-card-status {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.build-integrations-card a {
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
}

.build-integrations-card a:hover {
  text-decoration: underline;
}

.build-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.build-layout > * {
  min-width: 0;
}

.build-page .panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, #2d2d2d);
}

.build-sidebar {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 540px;
  min-width: 0;
}

.build-sidebar-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 2px 4px;
}

.build-sidebar-title--spaced {
  margin-top: 10px;
}

.build-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-sidebar-note {
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.build-sidebar-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.build-sidebar-item:hover {
  border-color: rgba(88, 166, 255, 0.45);
}

.build-sidebar-item.active {
  border-color: rgba(88, 166, 255, 0.9);
  background: #2d2d2d;
}

.build-sidebar-item-name {
  font-size: 12px;
  font-weight: 600;
}

.build-sidebar-item-meta {
  font-size: 11px;
  color: var(--muted);
}

.build-sidebar-example-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.build-sidebar-example-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(110, 118, 129, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.build-sidebar-example-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.build-sidebar-example-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.build-sidebar-example-summary,
.build-sidebar-example-meta {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.build-sidebar-example-meta {
  color: var(--text);
}

.build-sidebar-example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.build-sidebar-example-load {
  flex-shrink: 0;
}

.build-sidebar-item-name,
.build-sidebar-item-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.build-main {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.build-flow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(110, 118, 129, 0.08);
  padding: 8px 10px;
}

.build-flow a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.build-flow a:hover {
  text-decoration: underline;
}

.build-empty {
  color: var(--muted);
  font-size: 13px;
}

.build-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.build-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.build-section h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.build-section-description {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.build-grid {
  display: grid;
  gap: 10px;
}

.build-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.build-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.build-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.build-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.build-field > span {
  font-size: 12px;
  color: var(--muted);
}

.build-textarea {
  min-height: 76px;
  resize: vertical;
}

.build-code {
  min-height: 110px;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.build-page .input-field,
.build-page select,
.build-page textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 24px;
}

.build-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.build-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(130px, 1fr) minmax(140px, 1.3fr) auto;
  gap: 8px;
  min-width: 0;
}

.build-row--header {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.build-row--header span {
  padding: 0 2px;
}

.build-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.build-hint code {
  background: rgba(110, 118, 129, 0.18);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
}

.build-add-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.build-workflow-test {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(110, 118, 129, 0.08);
}

.build-workflow-test--running {
  border-color: rgba(88, 166, 255, 0.45);
  background: #2d2d2d;
}

.build-workflow-test--success {
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.08);
}

.build-workflow-test--error {
  border-color: rgba(248, 81, 73, 0.5);
  background: rgba(248, 81, 73, 0.08);
}

.build-workflow-test-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text);
}

.build-workflow-test-head span {
  color: var(--muted);
  font-size: 11px;
}

.build-workflow-test-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--muted);
}

.build-workflow-test-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-workflow-test-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
}

.build-workflow-test-row--failed {
  border-color: rgba(248, 81, 73, 0.55);
}

.build-workflow-test-row--passed {
  border-color: rgba(46, 160, 67, 0.55);
}

.build-workflow-test-row--skipped {
  border-color: rgba(210, 153, 34, 0.55);
}

.build-workflow-test-order {
  color: var(--muted);
  min-width: 14px;
}

.build-workflow-test-name {
  color: var(--text);
  font-weight: 600;
}

.build-workflow-test-output {
  color: #79c0ff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.build-workflow-test-msg {
  color: var(--muted);
}

.build-workflow-shell {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.build-workflow-shell.is-testing {
  border: none;
}

.build-step-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-step-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.build-step-card--collapsed {
  gap: 0;
}

.build-step-card--collapsed .build-step-head {
  margin: 0;
}

.build-step-card--workflow {
  border: 1px solid rgba(88, 166, 255, 0.25);
  background: rgba(88, 166, 255, 0.03);
}

.build-step-card--workflow-active {
  animation: build-workflow-pulse 1.4s ease-in-out infinite;
}

.build-step-card--test-passed {
  border-color: rgba(46, 160, 67, 0.6);
}

.build-step-card--test-failed {
  border-color: rgba(248, 81, 73, 0.62);
}

.build-step-card--test-skipped {
  border-color: rgba(210, 153, 34, 0.62);
}

.build-step-card--test-pending,
.build-step-card--test-running {
  border-color: rgba(88, 166, 255, 0.68);
}

.build-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.build-step-expand-icon {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
}

.build-step-order {
  font-size: 12px;
  color: var(--muted);
}

.build-step-head-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}

.build-step-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.build-step-current-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.build-step-description {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.build-subsection-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.build-step-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.build-step-badge--type {
  color: var(--text);
  background: rgba(110, 118, 129, 0.12);
}

.build-step-badge--ai_research {
  border-color: rgba(88, 166, 255, 0.42);
  background: rgba(88, 166, 255, 0.12);
  color: #79c0ff;
}

.build-step-badge--scrape {
  border-color: rgba(46, 160, 67, 0.42);
  background: rgba(46, 160, 67, 0.12);
  color: #3fb950;
}

.build-step-badge--api {
  border-color: rgba(110, 118, 129, 0.5);
  background: rgba(110, 118, 129, 0.12);
  color: var(--text);
}

.build-step-badge--webhook {
  border-color: rgba(210, 153, 34, 0.5);
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
}

.build-step-badge--transform {
  border-color: rgba(47, 129, 247, 0.45);
  background: rgba(47, 129, 247, 0.12);
  color: #58a6ff;
}

.build-step-badge--workflow {
  border-style: solid;
  font-weight: 600;
}

.build-step-badge--workflow-pending {
  border-color: rgba(110, 118, 129, 0.6);
  background: rgba(110, 118, 129, 0.12);
  color: var(--muted);
}

.build-step-badge--workflow-running {
  border-color: rgba(88, 166, 255, 0.6);
  background: rgba(88, 166, 255, 0.12);
  color: #79c0ff;
}

.build-step-badge--workflow-passed {
  border-color: rgba(46, 160, 67, 0.6);
  background: rgba(46, 160, 67, 0.12);
  color: #3fb950;
}

.build-step-badge--workflow-failed {
  border-color: rgba(248, 81, 73, 0.62);
  background: rgba(248, 81, 73, 0.12);
  color: #ff7b72;
}

.build-step-badge--workflow-skipped {
  border-color: rgba(210, 153, 34, 0.62);
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
}

.build-step-badge--status {
  color: var(--muted);
}

.build-step-badge--status-idle {
  border-color: rgba(110, 118, 129, 0.5);
  background: rgba(110, 118, 129, 0.12);
  color: var(--muted);
}

.build-step-badge--status-running {
  border-color: rgba(88, 166, 255, 0.45);
  background: rgba(88, 166, 255, 0.12);
  color: #79c0ff;
}

.build-step-badge--status-success {
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.12);
  color: #3fb950;
}

.build-step-badge--status-error {
  border-color: rgba(248, 81, 73, 0.5);
  background: rgba(248, 81, 73, 0.12);
  color: #ff7b72;
}

.build-step-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.build-step-actions--workflow {
  border: none;
  border-radius: 8px;
  padding: 5px 7px;
  background: transparent;
}

.build-step-flags {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
}

.build-step-flags label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.build-preview {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(110, 118, 129, 0.08);
  padding: 10px;
  max-height: 320px;
  overflow: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
  min-width: 0;
}

.build-warning {
  border: 1px solid rgba(210, 153, 34, 0.5);
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
  border-radius: 6px;
  font-size: 12px;
  padding: 7px 9px;
}

.build-page .btn-primary,
.build-page .btn-secondary,
.build-page .btn-danger,
.build-page .btn-icon {
  border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
}

.build-page .btn-primary {
  background: rgba(46, 160, 67, 0.15);
  border-color: rgba(46, 160, 67, 0.42);
}

.build-page .btn-danger,
.build-page .btn-icon--danger {
  color: #ff7b72;
  border-color: rgba(248, 81, 73, 0.4);
}

.build-page .btn-icon--run {
  color: #3fb950;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0 2px;
  line-height: 0;
}

.build-page .btn-icon--run:hover {
  filter: none;
  color: #63d77b;
}

.build-page .btn-icon--run:disabled {
  opacity: 1;
  cursor: default;
}

.build-run-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(99, 215, 123, 0.35);
  border-top-color: #63d77b;
  animation: build-run-spin 0.8s linear infinite;
  box-sizing: border-box;
}

.build-page .btn-primary:hover,
.build-page .btn-secondary:hover,
.build-page .btn-danger:hover,
.build-page .btn-icon:hover {
  filter: brightness(1.05);
}

.build-page .btn-primary:disabled,
.build-page .btn-secondary:disabled,
.build-page .btn-danger:disabled,
.build-page .btn-icon:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.build-save-state {
  font-size: 12px;
  min-width: 64px;
}

.build-save-state--saved {
  color: #3fb950;
}

.build-save-state--error {
  color: #ff7b72;
}

.build-step-note {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(110, 118, 129, 0.08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
}

.build-run-state {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.build-run-state--running {
  border-color: rgba(88, 166, 255, 0.45);
  background: #2d2d2d;
  color: #79c0ff;
}

.build-run-state--success {
  border-color: rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.1);
  color: #3fb950;
}

.build-run-state--error {
  border-color: rgba(248, 81, 73, 0.5);
  background: rgba(248, 81, 73, 0.1);
  color: #ff7b72;
}

.build-run-state-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

.build-run-state-meta span {
  overflow-wrap: anywhere;
}

@keyframes build-workflow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.18);
  }
  50% {
    box-shadow: 0 0 0 4px #2d2d2d;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.18);
  }
}

@keyframes build-run-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1360px) {
  .build-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .build-row {
    grid-template-columns: minmax(80px, 1fr) minmax(100px, 1fr) minmax(100px, 1.3fr) auto;
  }
}

@media (max-width: 1220px) {
  .build-layout {
    grid-template-columns: 1fr;
  }

  .build-sidebar {
    min-height: 0;
  }
}

@media (max-width: 1100px) {
  .build-integrations-grid,
  .build-grid--three,
  .build-grid--four,
  .build-grid--two {
    grid-template-columns: 1fr;
  }

  .build-row {
    grid-template-columns: 1fr 1fr auto;
  }
}
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
.ecb-page {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  background: var(--bg);
  padding: clamp(8px, 1.6vw, 16px);
}
/* ── App-standard overrides within email composer ── */
.ecb-page .content-card {
  border-radius: 3px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ecb-page .card-header {
  background: var(--bg-elevated);
  border-radius: 0;
}
.ecb-page .card-body {
  padding: 12px;
  background: var(--bg-card);
}
.ecb-page input[type="text"],
.ecb-page input[type="email"],
.ecb-page .search-input,
.ecb-page select,
.ecb-page textarea {
  height: 28px;
  border-radius: 3px;
  font-size: 12px;
  background: var(--bg-alt);
  border-color: var(--border);
}
.ecb-page textarea {
  height: auto;
}
.ecb-filter-grid label > span,
.ecb-field-grid label > span {
  font-size: 12px;
}
.ecb-hidden-input {
  display: none;
}
.ecb-page .page-head-badges {
  justify-content: flex-start;
}
/* ── Stage nav: use app-standard underline tab bar ── */
.ecb-page .page-head-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 0 2px;
}
.ecb-page .page-head-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.1s ease;
  white-space: nowrap;
}
.ecb-page .page-head-nav-link:hover {
  color: var(--text);
  border-bottom-color: var(--line);
}
.ecb-page .page-head-nav-link span {
  white-space: nowrap;
  line-height: 1.3;
}
.ecb-workspace-layout {
  display: block;
}
.ecb-main-stack,
.ecb-flow-card,
.ecb-rail,
.ecb-side-card-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.ecb-flow-head.card-header {
  max-height: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}
.ecb-flow-head-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ecb-flow-head-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ecb-flow-step {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  margin-bottom: 0;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ecb-flow-head-copy h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.ecb-flow-head-copy h3 svg {
  color: var(--muted);
}
.ecb-flow-head-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  max-width: 78ch;
}
.ecb-flow-head-copy--singleline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}
.ecb-flow-head-copy--singleline .ecb-flow-head-title-row {
  gap: 8px;
  flex: 0 0 auto;
  align-items: baseline;
}
.ecb-flow-head-copy--singleline h3 {
  line-height: 1.2;
  margin: 0;
}
.ecb-flow-head-copy--singleline p {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.ecb-flow-head-actions,
.ecb-flow-footer,
.ecb-mode-tabs,
.ecb-inline-actions,
.ecb-favorites-row,
.ecb-preset-grid,
.ecb-pdf-toolbar,
.ecb-variables,
.ecb-preview-nav,
.ecb-preview-export-row,
.ecb-attachment-actions,
.ecb-send-format-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ecb-flow-footer {
  justify-content: flex-end;
}
.ecb-compose-footer {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.ecb-compose-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 20px;
  padding-right: 16px;
}
.ecb-flow-body.card-body {
  display: grid;
  gap: 12px;
  background: var(--bg-card);
}
.ecb-surface-body {
  display: grid;
  gap: 12px;
  background: var(--bg-alt);
}
.ecb-focus-grid,
.ecb-review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
/* ── Compose tab top row: load template | AI generate ── */
.ecb-compose-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
/* ── Advanced settings toggle ── */
.ecb-advanced-toggle {
  display: flex;
  align-items: center;
  padding: 4px 0;
}
.ecb-advanced-toggle .text-btn {
  font-size: 12px;
  color: var(--text-secondary);
}
.ecb-compose-center {
  display: grid;
  gap: 12px;
  max-width: none;
  margin: 0;
  width: 100%;
}
.ecb-compose-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ecb-span-full {
  grid-column: 1 / -1;
}
.ecb-surface-card {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-alt);
  overflow: hidden;
}
.ecb-surface-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}
.ecb-surface-head h4 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ecb-surface-head-meta {
  color: var(--text-secondary, var(--muted));
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.9;
}
.ecb-surface-note {
  font-size: 12px;
  color: var(--muted);
}
.ecb-surface-card--preview {
  min-width: 0;
  border-radius: 0 0 3px 3px;
}
.ecb-surface-body {
  padding: 10px 12px;
  min-width: 0;
  overflow: hidden;
}
.ecb-surface-body--flush-bottom {
  padding-bottom: 0;
}
.ecb-presets-card .ecb-surface-head {
  min-height: 32px;
  padding: 5px 12px;
}
.ecb-setup-card .ecb-surface-head h4,
.ecb-setup-card .ecb-surface-head h4 svg {
  color: #e8a84a;
}
.ecb-setup-card .ecb-surface-body > select {
  width: 100%;
  max-width: 360px;
}
.ecb-presets-body {
  padding: 8px 12px;
}
/* ── Business profile sub-sections ── */
.ecb-biz-profiles-panel {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.ecb-biz-profiles-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ecb-biz-profiles-input {
  flex: 1 1 0;
  min-width: 0;
}
.ecb-biz-profiles-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 0 0 100%;
  white-space: nowrap;
  padding-bottom: 2px;
}
.ecb-saved-col .ecb-saved-empty {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.55;
}
.ecb-saved-col .ecb-saved-col-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ecb-saved-col .ecb-favorites-row .btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}
.ecb-saved-col .ecb-template-list .ecb-saved-empty {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
/* ── Saved 2-column grid ── */
.ecb-saved-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0;
}
.ecb-saved-col {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  align-content: start;
}
.ecb-saved-col-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}
.ecb-saved-divider {
  background: var(--line);
  align-self: stretch;
}
.ecb-saved-col--profiles .ecb-template-item.is-loaded {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.42);
}
.ecb-saved-col--profiles .ecb-template-item.is-loaded .ecb-template-info strong {
  color: #b7f7cd;
}
.ecb-saved-col--profiles .ecb-template-item.is-loaded .ecb-template-info small {
  color: #8ad3aa;
}
.ecb-saved-col--profiles .ecb-template-item.is-loaded .btn {
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.42);
  color: #b7f7cd;
}
.ecb-saved-col--profiles .ecb-template-item.is-loaded .btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.22);
  border-color: rgba(74, 222, 128, 0.55);
  color: #d6ffe6;
}
.ecb-saved-col--profiles .ecb-template-item.is-loaded .icon-btn {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.34);
  color: #8ad3aa;
}
.ecb-saved-col--profiles .ecb-template-item.is-loaded .icon-btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.5);
  color: #b7f7cd;
}
.ecb-saved-card {
}
.ecb-saved-card .ecb-surface-head {
  padding: 5px 12px;
  min-height: 34px;
}
.ecb-saved-card .ecb-surface-head h4 {
  color: #e8a84a;
}
.ecb-saved-card .ecb-surface-head h4 svg {
  color: #e8a84a;
}
@media (max-width: 600px) {
  .ecb-saved-grid {
    grid-template-columns: 1fr;
  }
  .ecb-saved-divider {
    height: 1px;
    width: auto;
  }
}
/* ── Business info section (inside saved card) ── */
.ecb-biz-section {
  border-top: 1px solid var(--line);
}
.ecb-biz-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}
.ecb-biz-section-head > span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}
.ecb-biz-section-body {
  padding: 8px 12px;
  display: grid;
  gap: 6px;
}
/* ── AI generate card ── */
.ecb-ai-card {
  border-color: var(--line);
}
.ecb-ai-card .ecb-surface-head {
  padding: 5px 12px;
  min-height: 34px;
}
.ecb-ai-card .ecb-surface-head h4 {
  color: #e8a84a;
}
.ecb-ai-card .ecb-surface-head h4 svg {
  color: #e8a84a;
}
.ecb-ai-card .ecb-surface-body {
}
.ecb-ai-card .ecb-biz-vars-footer {
  border-top-color: var(--line);
  padding: 5px 12px;
  min-height: 34px;
  flex-wrap: nowrap;
}
.ecb-ai-card .ecb-ai-chips-row {
  border-top-color: var(--line);
}
.ecb-ai-look-row {
  margin-bottom: 5px;
}
.ecb-biz-vars-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 12px;
  background: var(--bg-card);
  border-top: 1px solid var(--line);
}
.ecb-biz-vars-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.ecb-biz-vars-tokens {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
  line-height: 1.6;
}
.ecb-biz-vars-tokens code {
  font-size: 10px;
}
.ecb-biz-vars-divider {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--line);
  align-self: center;
  flex-shrink: 0;
}
.ecb-preview-surface-body {
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.ecb-favorites-row > input,
.ecb-favorites-row > select {
  flex: 1 1 0;
  min-width: 0;
}
.ecb-favorites-row > button {
  flex: 0 0 auto;
}
.ecb-recipient-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.ecb-recipient-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ecb-filter-grid,
.ecb-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ecb-filter-grid--audience {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ecb-field-grid--pdf-quick {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ecb-field-grid--pdf-quick label {
  gap: 2px;
}
.ecb-field-grid--pdf-quick label > span {
  font-size: 11px;
}
.ecb-surface-card--compact .ecb-surface-head {
  padding: 6px 10px;
}
.ecb-surface-card--compact .ecb-surface-body {
  padding: 8px 10px;
  gap: 6px;
}
.ecb-surface-card--compact .ecb-pdf-toolbar {
  gap: 4px;
}
.ecb-filter-grid label,
.ecb-field-grid label {
  display: grid;
  gap: 6px;
}
.ecb-filter-grid label > span,
.ecb-field-grid label > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.ecb-ai-theme-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
}
.ecb-ai-theme-row label {
  display: grid;
  gap: 6px;
}
.ecb-ai-theme-row label > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.ecb-filter-grid label > span small {
  color: var(--muted);
  font-weight: 400;
}
.ecb-span-2 {
  grid-column: 1 / -1;
}
.ecb-page input.search-input,
.ecb-page select.search-input,
.ecb-page textarea.search-input {
  width: 100%;
  box-sizing: border-box;
}
.ecb-page textarea.search-input {
  min-height: 108px;
  resize: vertical;
}
.ecb-page input[type="color"].search-input {
  padding: 2px;
}
.ecb-page .search-input.required-missing,
.ecb-page input.required-missing,
.ecb-page textarea.required-missing {
  border-color: var(--line);
}
.ecb-page .search-input.required-missing:focus,
.ecb-page input.required-missing:focus,
.ecb-page textarea.required-missing:focus {
  border-color: var(--border);
}
.ecb-selected-list,
.ecb-recipient-list,
.ecb-template-list,
.ecb-attachment-list,
.ecb-blocker-list,
.ecb-kv-list,
.ecb-checklist {
  display: grid;
  gap: 8px;
}
.ecb-selected-item,
.ecb-recipient-item,
.ecb-template-item,
.ecb-preview-contact-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
}
.ecb-selected-item,
.ecb-preview-contact-card {
  display: grid;
  gap: 2px;
  padding: 10px;
}
.ecb-recipient-list {
  max-height: 320px;
  overflow: auto;
}
.ecb-recipient-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.ecb-template-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.ecb-recipient-item.is-selected {
  border-color: var(--border);
}
.ecb-recipient-item span,
.ecb-template-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ecb-template-info--single {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.ecb-template-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ecb-template-time {
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}
.ecb-selected-item strong,
.ecb-recipient-item strong,
.ecb-template-info strong,
.ecb-preview-contact-card strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ecb-selected-item small,
.ecb-recipient-item small,
.ecb-template-info small,
.ecb-preview-contact-card small,
.ecb-selected-more {
  font-size: 12px;
  color: var(--muted);
}
.ecb-token-btn {
  font-family: var(--mono);
}
.ecb-variables-label,
.ecb-preview-export-label,
.ecb-send-label,
.ecb-kv-row span {
  font-size: 12px;
  color: var(--muted);
}
.ecb-stage {
  padding: 16px;
  background: var(--bg);
}
.ecb-paper-wrap {
  display: flex;
  justify-content: center;
  padding: 14px;
  background: var(--bg);
}
.ecb-paper {
  width: 816px;
  max-width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.ecb-paper-head {
  padding: 10px 14px;
  border-bottom: 1px solid #d0d7de;
  background: #f6f8fa;
  color: #656d76;
  font-size: 12px;
}
.ecb-paper-body {
  min-height: 220px;
}
.ecb-pdf-block {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  outline: 1px dashed transparent;
  background: transparent;
  padding: 10px 12px;
  transition: outline-color 0.15s ease, background 0.15s ease;
}
.ecb-pdf-block:hover,
.ecb-pdf-block.is-selected {
  outline-color: #0969da;
  background: rgba(9, 105, 218, 0.06);
}
.ecb-pdf-label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2328;
}
.ecb-pdf-field {
  border: 1px solid #bfc7d4;
  border-radius: 6px;
  background: #fff;
}
.ecb-pdf-field.is-multi {
  min-height: 84px;
}
.ecb-checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}
.ecb-page .btn {
  height: 24px;
  padding: 0 8px;
}
.ecb-page .icon-btn {
  width: 22px;
  height: 22px;
}
.ecb-checkline-muted {
  color: var(--muted);
}
.ecb-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 0;
  border: 1px solid #64748b;
  background: #fff;
}
.ecb-signature-box {
  position: relative;
  border: 1px dashed #bfc7d4;
  border-radius: 6px;
  background: #fff;
}
.ecb-signature-box::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 20px;
  border-bottom: 1px solid #94a3b8;
}
.ecb-signature-box span {
  position: absolute;
  left: 12px;
  bottom: 6px;
  font-size: 12px;
  color: #656d76;
}
.ecb-preview-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  max-width: 600px;
  flex-shrink: 0;
  font-family: var(--mono);
}
.ecb-preview-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: 12px;
    color: #9ca3af;
  overflow-wrap: anywhere;
}
.ecb-plain-preview {
  margin: 0;
  min-height: 160px;
  padding: 16px;
  background: #fff;
  color: #1f2328;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}
.ecb-html-frame-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ecb-html-frame-caption {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.03em;
  text-align: center;
  padding-bottom: 12px;
}
.ecb-html-frame {
  width: 100%;
  min-height: 520px;
  border: 2px solid aquamarine;
  border-radius: 4px;
  background: #fff;
  display: block;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.ecb-html-frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}
.ecb-html-frame-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #bbb;
  text-align: center;
  padding: 40px 24px;
  user-select: none;
}
.ecb-html-frame-empty-inner svg {
  color: #ccc;
}
.ecb-html-frame-empty-inner span {
  font-size: 14px;
  font-weight: 600;
  color: #999;
  font-family: var(--mono);
}
.ecb-html-frame-empty-inner small {
  font-size: 12px;
  color: #bbb;
}
.ecb-preview-spinner {
  display: block;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: #999;
  border-radius: 50%;
  animation: ecb-spin 0.75s linear infinite;
}
@keyframes ecb-spin {
  to { transform: rotate(360deg); }
}
.ecb-send-summary {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.ecb-send-row,
.ecb-kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.ecb-send-row + .ecb-send-row,
.ecb-kv-row + .ecb-kv-row {
  border-top: 1px solid var(--line);
}
.ecb-send-value-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
  text-align: right;
}
.ecb-send-value-wrap.is-editing-from {
  flex-wrap: nowrap;
}
.ecb-send-value-wrap.is-editing-from .ecb-inline-edit-link {
  flex: 0 0 auto;
}
.ecb-send-value-wrap.is-editing-from .ecb-send-inline-select {
  flex: 0 1 320px;
  min-width: 0;
  max-width: 320px;
}
.ecb-inline-edit-link {
  font-size: 12px;
  line-height: 1.2;
}
.ecb-send-inline-select {
  height: 28px;
  min-width: 0;
  max-width: min(100%, 340px);
  width: 220px;
  padding: 0 8px;
  font-size: 12px;
}
.ecb-send-format-tabs {
  margin-top: 8px;
  justify-content: flex-end;
}
.ecb-attachment-section {
  display: grid;
  gap: 10px;
}
.ecb-attachment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.ecb-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12px;
}
.ecb-attachment-chip small {
  color: #d29922;
}
.ecb-attachment-chip button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ecb-blocker-item,
.ecb-ready-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.ecb-blocker-item {
  border: 1px solid rgba(248, 81, 73, 0.24);
  background: rgba(248, 81, 73, 0.08);
  color: #ffb4ae;
}
.ecb-ready-banner {
  border: 1px solid rgba(63, 185, 80, 0.24);
  background: rgba(63, 185, 80, 0.08);
  color: #9be9a8;
}
.ecb-send-panel {
  display: grid;
  gap: 10px;
}
.ecb-device-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.ecb-device-preview-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.ecb-device-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ecb-device-shell {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
.ecb-device-shell.is-phone {
  max-width: 290px;
  margin: 0 auto;
  border-radius: 24px;
}
.ecb-device-shell.is-tablet {
  max-width: 460px;
  margin: 0 auto;
}
.ecb-device-shell.is-desktop {
  width: 100%;
}
.ecb-device-shell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}
.ecb-device-shell-bar span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.ecb-device-shell-body {
  display: grid;
  gap: 0;
  background: #f3f4f6;
}
.ecb-device-frame {
  width: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.ecb-device-shell.is-phone .ecb-device-frame {
  height: 540px;
}
.ecb-device-shell.is-tablet .ecb-device-frame {
  height: 620px;
}
.ecb-device-shell.is-desktop .ecb-device-frame {
  height: 680px;
}
.ecb-device-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 11px;
  font-family: var(--mono);
}
.ecb-send-btn {
  width: 100%;
  height: 24px;
}
.ecb-checklist-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}
.ecb-checklist-item.is-active {
  border-color: var(--border);
}
.ecb-checklist-index {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.ecb-checklist-copy {
  display: grid;
  gap: 1px;
}
.ecb-checklist-copy strong {
  font-size: 12px;
  color: var(--text);
}
.ecb-checklist-copy small {
  font-size: 12px;
  color: var(--muted);
}
.ecb-copy-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
}
.ecb-copy-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-elevated);
  overflow: hidden;
  box-sizing: border-box;
}
.ecb-copy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.ecb-copy-modal-header h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.ecb-copy-modal-close {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ecb-copy-modal-body {
  padding: 12px;
}
.ecb-copy-modal-body textarea {
  width: 100%;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}
.ecb-copy-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px 12px;
}
@media (max-width: 1160px) {
  .ecb-field-grid--pdf-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ecb-device-preview-grid {
    grid-template-columns: 1fr;
  }
}
/* ── Business info dynamic fields ── */
.ecb-biz-add-select {
  height: 22px;
  font-size: 11px;
  padding: 0 4px;
  width: auto;
  max-width: 110px;
  flex-shrink: 1;
}
.ecb-biz-empty-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.ecb-biz-fields-body {
  display: grid;
  gap: 6px;
}
.ecb-biz-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 6px;
}
.ecb-biz-field-label {
  flex: 0 0 88px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ecb-biz-field-row .search-input {
  flex: 1 1 0;
  min-width: 0;
}
.ecb-logo-row {
  padding-top: 4px;
  padding-bottom: 4px;
}
.ecb-logo-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.ecb-logo-inputs .search-input {
  flex: 1 1 0;
  min-width: 0;
}
.ecb-logo-or {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
/* ── AI generate condensed ── */
.ecb-ai-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.ecb-ai-head-actions .btn,
.ecb-ai-head-actions .ecb-surface-note {
  white-space: nowrap;
  flex-shrink: 0;
}
.ecb-ai-head-actions .ecb-biz-add-select {
  white-space: nowrap;
  flex-shrink: 1;
}
.ecb-ai-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
}
.ecb-ai-look-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ecb-ai-color-picker {
  width: 28px !important;
  height: 22px !important;
  padding: 2px !important;
  flex-shrink: 0;
}
.ecb-ai-hex-input {
  width: 72px !important;
  flex-shrink: 0;
}
.ecb-ai-generate-btn {
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .ecb-page {
    gap: 10px;
    padding: 12px;
  }

  .ecb-page .page-head-nav {
    overflow-x: auto;
  }

  .ecb-flow-head-copy--singleline {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ecb-flow-head-copy--singleline p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .ecb-saved-grid {
    grid-template-columns: 1fr;
  }

  .ecb-saved-divider {
    height: 1px;
    width: auto;
  }

  .ecb-filter-grid--audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecb-biz-field-row {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .ecb-biz-field-label {
    flex: 0 0 auto;
  }

  .ecb-ai-head-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }


  .ecb-biz-vars-footer {
    padding: 6px 10px;
  }

  .ecb-device-shell.is-phone,
  .ecb-device-shell.is-tablet {
    max-width: 100%;
  }
}
@media (max-width: 720px) {
  .ecb-page {
    padding: 10px;
  }

  .ecb-page .page-head-nav {
    overflow-x: auto;
  }

  .ecb-flow-head.card-header,
  .ecb-flow-head-actions,
  .ecb-flow-footer,
  .ecb-favorites-row {
    align-items: stretch;
    flex-direction: column;
  }

  /* Action rows that should stack full-width */
  .ecb-inline-actions,
  .ecb-preview-export-row,
  .ecb-send-format-tabs {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  /* Button/chip rows that should wrap, not stack */
  .ecb-mode-tabs,
  .ecb-pdf-toolbar,
  .ecb-preview-nav,
  .ecb-variables {
    flex-wrap: wrap;
  }

  .ecb-surface-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ecb-flow-head.card-header {
    padding: 8px 10px;
  }

  /* Keep preview meta horizontal but allow wrap */
  .ecb-preview-meta {
    flex-wrap: wrap;
    align-items: baseline;
  }

  /* Let preview controls wrap cleanly on phones */
  .ecb-preview-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .ecb-preview-head-actions,
  .ecb-preview-nav {
    width: 100%;
    justify-content: space-between;
  }

  .ecb-filter-grid,
  .ecb-field-grid,
  .ecb-ai-theme-row {
    grid-template-columns: 1fr;
  }

  /* PDF quick-settings should stay 2-col on mobile */
  .ecb-field-grid--pdf-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecb-favorites-row > input,
  .ecb-favorites-row > select,
  .ecb-favorites-row > button {
    width: 100%;
  }

  .ecb-attachment-head {
    flex-direction: column;
    align-items: stretch;
  }

  /* Profiles header: input + Save button stretch full width */
  .ecb-biz-profiles-input {
    flex: 1 1 0;
  }

  .ecb-biz-vars-footer {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .ecb-biz-vars-divider {
    display: none;
  }

  .ecb-preview-card {
    max-width: 100%;
  }

  .ecb-send-value-wrap.is-editing-from {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .ecb-send-value-wrap.is-editing-from .ecb-send-inline-select {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .ecb-preview-surface-body {
    padding: 12px;
  }

  .ecb-html-frame-empty-inner {
    padding: 28px 16px;
  }

  .ecb-plain-preview {
    min-height: 260px;
    padding: 14px;
  }

  .ecb-html-frame {
    min-height: 360px;
  }

  .ecb-device-shell.is-phone .ecb-device-frame {
    height: 420px;
  }

  .ecb-device-shell.is-tablet .ecb-device-frame {
    height: 460px;
  }

  .ecb-device-shell.is-desktop .ecb-device-frame {
    height: 520px;
  }

  .ecb-copy-modal-overlay {
    padding: 12px;
  }

  .ecb-copy-modal {
    max-height: calc(100vh - 24px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .ecb-copy-modal-body {
    min-height: 0;
    overflow: auto;
  }

  .ecb-copy-modal-body textarea {
    min-height: 220px;
  }
}
@media (max-width: 540px) {
  .ecb-page {
    padding: 8px;
  }

  .ecb-filter-grid--audience {
    grid-template-columns: 1fr;
  }

  .ecb-field-grid--pdf-quick {
    grid-template-columns: 1fr;
  }

  .ecb-mode-tabs {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .ecb-biz-profiles-panel {
    margin: 0 8px 8px;
    padding: 8px;
  }

  .ecb-biz-vars-footer {
    padding: 8px;
  }

  .ecb-biz-vars-tokens {
    font-size: 10px;
  }

  .ecb-surface-body {
    padding: 8px;
  }

  .ecb-surface-head {
    padding: 5px 8px;
  }

  .ecb-paper-wrap {
    padding: 8px;
  }

  .ecb-preview-surface-body {
    padding: 8px;
  }

  .ecb-html-frame-empty-inner {
    padding: 20px 12px;
  }

  .ecb-html-frame-caption {
    font-size: 11px;
  }

  .ecb-plain-preview {
    min-height: 200px;
  }

  .ecb-html-frame {
    min-height: 300px;
  }

  .ecb-flow-head-copy h3 {
    font-size: 12px;
  }

  .ecb-compose-footer {
    padding: 6px 0 2px;
  }

  .ecb-copy-modal-overlay {
    padding: 8px;
  }
}
/* ── Preview head — compact single-line ── */
.ecb-preview-head {
  flex-wrap: nowrap;
}
.ecb-preview-head-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.ecb-preview-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.email-campaign-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.email-campaign-table-wrap table {
  min-width: 760px;
}
.ecb-flip-btn {
  opacity: 0.7;
  transition: opacity 0.15s;
}
.ecb-flip-btn:hover {
  opacity: 1;
}
/* ── Source code view ── */
.ecb-source-preview {
  margin: 0;
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
  background: var(--bg);
  min-height: 200px;
}
/* ── Inline variable chips above textarea ── */
.ecb-variables--inline {
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 0;
}
/* ── Badge bar ───────────────────────────────────────────────── */
.ecb-badge-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
/* ── Tier badge (two-part: label + value) ────────────────────── */
.ecb-tier-group {
  display: inline-flex;
  align-items: stretch;
  height: 20px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
}
.ecb-tier-group--free {
  border-color: #6f6f6f;
}
.ecb-tier-label {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  background: rgba(120, 214, 156, 0.4);
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ecb-tier-value {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  font-family: monospace;
  white-space: nowrap;
}
.ecb-tier-value--pro {
  background: rgba(174, 147, 79, 0.22);
  color: #ead9a3;
  border-left: 1px solid #8d7740;
}
.ecb-tier-value--free {
  background: rgba(207, 207, 207, 0.3);
  color: #e2e2e2;
  border-left: 1px solid rgba(120, 120, 120, 0.38);
}
/* ── Mode block badge (label + value pair) ───────────────────── */
.ecb-mode-block {
  display: inline-flex;
  align-items: stretch;
  height: 20px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  background: rgba(120, 120, 120, 0.15);
}
.ecb-mode-label {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  background: rgba(120, 120, 120, 0.22);
  color: #cfcfcf;
  border-right: 1px solid rgba(120, 120, 120, 0.38);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.ecb-mode-value {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: #ffffff;
  font-family: monospace;
  white-space: nowrap;
}
/* ── Meta badges (standalone status pills) ───────────────────── */
.ecb-meta-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  white-space: nowrap;
}
.ecb-meta-badge--ready {
  border-color: rgba(120, 214, 156, 0.5);
  background: rgba(120, 214, 156, 0.12);
  color: #8edbb3;
}
.ecb-meta-badge--warn {
  border-color: rgba(214, 170, 80, 0.5);
  background: rgba(214, 170, 80, 0.12);
  color: #e2c57a;
}
/* ── Docs / account link ─────────────────────────────────────── */
.ecb-docs-link {
  font-size: 11px;
  font-weight: 600;
  color: #7aafea;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.ecb-docs-link:hover {
  text-decoration: underline;
  color: #9dc5f0;
}
/* ── AI source badge wrapper ─────────────────────────────────── */
.ecb-ai-source-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* ── Sender group fields in Generate panel ────────────────────────────────── */
.ecb-sender-fields-wrap {
  padding: 10px 12px 0;
}
.ecb-sender-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.ecb-sender-group:not(:has(~ .ecb-sender-group)) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ecb-sender-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 6px;
  padding-right: 6px;
}
.ecb-sender-group-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.ecb-biz-field-var {
  font-family: monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ecb-generate-desc {
  padding-bottom: 0;
}
.ecb-generate-desc .field-hint {
  margin: 0;
}
.ecb-custom-field-adder-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ecb-custom-field-hint {
  padding-left: 6px;
  margin: 0;
}
.ecb-custom-field-adder {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 6px;
  padding-right: 6px;
}
.ecb-custom-field-adder .search-input {
  flex: 1;
  min-width: 0;
}
/* Variable tag input — shared classes used by VariableTagInput.tsx */
.ep-var-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.ep-var-textarea {
  display: block;
  position: relative;
  width: 100%;
  min-height: 54px;
  padding: 6px;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--input-bg, var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: 3px;
  box-sizing: border-box;
  resize: none;
  color: #ffffff;
  caret-color: #ffffff;
  outline: none;
  overflow-y: auto;
}
.ep-var-textarea::placeholder { color: var(--muted); }
.ep-var-textarea.ep-var-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* EmailPage.css — Email hub: Inbox, Campaign, Activity */
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
.email-header-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.email-header-email {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono, ui-monospace, monospace);
}
.email-page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.email-page-title-row h2 {
  margin-bottom: 0;
}
.email-page-title-actions {
  margin-left: auto;
}
.email-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  user-select: none;
  cursor: pointer;
}
.email-mode-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.email-mode-switch span.is-active {
  color: #e8a84a;
}
.email-mode-switch-track {
  position: relative;
  width: 34px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
}
.email-mode-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.14s ease, background 0.14s ease;
}
.email-mode-switch input:checked + .email-mode-switch-track::after {
  transform: translateX(16px);
  background: #e8a84a;
}
@media (max-width: 640px) {
  .email-page-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .email-page-title-actions {
    margin-left: 0;
  }
}
/* ── Layout toggle button ─────────────────────────────────────────────────── */
.ep-layout-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: auto;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.ep-layout-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-color: #333;
}
.ep-layout-toggle.is-active {
  background: #2d2d2d;
  border-color: rgba(88, 166, 255, 0.25);
  color: #58a6ff;
}
/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}
.empty-icon {
  color: #444;
  opacity: 0.6;
  margin-bottom: 2px;
}
.empty-state h3 {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0;
}
.empty-state p {
  font-size: 12px;
  color: #777;
  margin: 0;
  max-width: 320px;
  line-height: 1.55;
}
.empty-state-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
}
.empty-state-cta:hover {
  background: #2d2d2d;
  border-color: rgba(88, 166, 255, 0.4);
}
/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.pagination-info {
  color: var(--muted);
}
.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-size: 12px;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--bg-alt);
  color: var(--text);
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ep-page-indicator {
  font-size: 12px;
  color: var(--muted);
  min-width: 36px;
  text-align: center;
}
/* ── Inbox tab ────────────────────────────────────────────────────────────── */
.ep-error-text {
  color: #f85149;
  font-size: 13px;
}
.ep-card-header-count {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}
.ep-inbox-table {
  display: flex;
  flex-direction: column;
}
.ep-inbox-thead {
  display: grid;
  grid-template-columns: minmax(120px, 22%) minmax(0, 1fr) 72px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.ep-inbox-th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}
.ep-inbox-row {
  display: grid;
  grid-template-columns: minmax(120px, 22%) minmax(0, 1fr) 72px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  width: 100%;
}
.ep-inbox-row:last-child {
  border-bottom: none;
}
.ep-inbox-row:hover {
  background: #2d2d2d;
}
.ep-inbox-td {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.ep-inbox-td-from {
  font-weight: 500;
}
.ep-inbox-td-subject {
  color: var(--muted);
}
.ep-inbox-td-date {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
/* ── Email detail ─────────────────────────────────────────────────────────── */
.ep-inbox-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ep-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
}
.ep-back-btn:hover {
  color: var(--text);
}
.ep-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.ep-detail-subject {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}
.ep-detail-date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ep-detail-meta {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ep-detail-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.ep-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
  min-width: 36px;
}
.ep-detail-value {
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
}
.ep-detail-body {
  padding: 16px 20px;
}
.ep-html-frame {
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.ep-text-content {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  overflow-wrap: break-word;
}
.ep-no-content {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}
/* ── Campaign layout ──────────────────────────────────────────────────────── */
.ep-compose-page-content {
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  width: 100%;
}
.ep-compose-head-badge .badge-value {
  color: #9bc4ff;
  border-color: rgba(88, 166, 255, 0.24);
  background: #2d2d2d;
}
.ep-compose-shell-card {
  overflow: hidden;
}
.ep-compose-shell-card .card-header {
  background:
    linear-gradient(90deg, rgba(88, 166, 255, 0.12), rgba(88, 166, 255, 0.03) 38%, transparent 72%),
    #242424;
}
.ep-compose-shell-body {
  padding: 14px 16px;
}
.ep-compose-shell-copy {
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
@media (max-width: 720px) {
  .email-page-shell .page-head-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .email-page-shell .page-head-nav-link {
    justify-content: center;
  }

  .ep-compose-page-content {
    gap: 12px;
  }

  .ep-compose-shell-body {
    padding: 12px;
  }
}
.ep-setup-layout {
  width: 100%;
}
.ep-setup-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ep-setup-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}
.ep-setup-section + .ep-setup-section {
  border-top: 1px solid var(--line);
}
.ep-setup-section h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ep-setup-radio-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-setup-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.ep-setup-radio input {
  margin-top: 2px;
}
.ep-setup-radio span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ep-setup-radio strong {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ep-provider-default {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.ep-provider-rate {
  color: #2ea043;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ep-setup-radio small {
  font-size: 12px;
  color: var(--muted);
}
.ep-setup-status-line {
  font-size: 12px;
  color: var(--muted);
}
.ep-setup-status-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-setup-status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--bg);
}
.ep-setup-status-item.is-connected {
  border-color: rgba(46, 160, 67, 0.65);
  background: rgba(46, 160, 67, 0.12);
}
.ep-setup-status-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ep-setup-status-item h4 {
  margin: 0;
  font-size: 12px;
  color: var(--text);
}
.ep-setup-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  color: #2ea043;
  background: rgba(46, 160, 67, 0.12);
  border: 1px solid rgba(46, 160, 67, 0.55);
}
.ep-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ep-setup-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-setup-field span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.ep-setup-field select {
  width: 100%;
}
.ep-setup-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.ep-setup-webhook {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.ep-setup-webhook-url {
  display: inline-block;
  max-width: 100%;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
}
.ep-setup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ep-campaign-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
  width: 100%;
  transition: grid-template-columns 0.2s ease;
}
.ep-campaign-layout.ep-preview-expanded {
  grid-template-columns: 340px minmax(0, 1fr);
}
.ep-compose-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ep-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ep-compose-config-card .card-header {
  text-transform: none;
  letter-spacing: 0;
}
.ep-compose-config-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ep-required-note {
  margin-top: -4px;
  margin-bottom: -2px;
}
/* ── Contacts / recipients ────────────────────────────────────────────────── */
.ep-load-contacts-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  align-self: flex-start;
}
.ep-load-contacts-btn:hover:not(:disabled) {
  background: #1e1e1e;
  border-color: #3a3a3a;
}
.ep-load-contacts-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ep-recipient-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #181818;
  border: 1px solid #343434;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.ep-recipient-bar:hover {
  background: #202020;
  border-color: #3e3e3e;
}
.ep-recipient-bar-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.ep-recipient-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ep-recipient-reset-btn:hover:not(:disabled) {
  background: var(--bg-alt);
  border-color: rgba(88, 166, 255, 0.45);
  color: #79c0ff;
}
.ep-recipient-reset-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ep-recipient-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 8px;
  padding-bottom: 2px;
}
.ep-recipient-inline-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ep-recipient-favorites {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ep-recipient-favorites-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ep-recipient-favorites-select,
.ep-recipient-favorites-input {
  min-width: 180px;
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  outline: none;
}
.ep-recipient-toolbar .ep-recipient-favorites-select {
  width: 210px;
  min-width: 210px;
  flex: 0 0 auto;
}
.ep-recipient-toolbar .ep-recipient-favorites-input {
  width: 240px;
  min-width: 240px;
  flex: 0 0 auto;
}
.ep-recipient-favorites-select:focus,
.ep-recipient-favorites-input:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
/* ── Recipient filters ────────────────────────────────────────────────────── */
.ep-recipient-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 2px;
  align-items: start;
}
.ep-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ep-filter-label {
  margin-bottom: 0;
}
.ep-filter-hint {
  margin-top: -2px;
}
.ep-filter-select,
.ep-filter-input {
  font-size: 12px;
  padding: 4px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.ep-filter-select:focus,
.ep-filter-input:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.ep-recipient-skipped {
  color: #a5a5a5;
  font-weight: 400;
}
.ep-recipient-chevron {
  color: var(--muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.ep-recipient-chevron.open {
  transform: rotate(180deg);
}
.ep-recipient-list {
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  background: #141414;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ep-recipient-list.is-shift-selecting,
.ep-recipient-list.is-shift-selecting * {
  user-select: none;
  -webkit-user-select: none;
}
.ep-recipient-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: #a3a3a3;
  line-height: 1.5;
}
.ep-recipient-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid #323232;
  background: #1b1b1b;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ep-recipient-row:nth-child(even) {
  background: #1f1f1f;
}
.ep-recipient-row:last-child {
  border-bottom: none;
}
.ep-recipient-row:hover {
  background: #2a2a2a;
  border-bottom-color: #3f3f3f;
}
.ep-recipient-row.is-excluded .ep-recipient-name,
.ep-recipient-row.is-excluded .ep-recipient-contact {
  opacity: 0.45;
  text-decoration: line-through;
}
.ep-recipient-row.is-excluded {
  background: #171717;
}
.ep-recipient-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--link);
}
.ep-recipient-name {
  flex: 1;
  color: #efefef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-recipient-contact {
  font-family: var(--mono);
  font-size: 11px;
  color: #c2c2c2;
  white-space: nowrap;
}
/* ── Email config note ────────────────────────────────────────────────────── */
.ep-config-note {
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  line-height: 1.5;
}
.ep-config-note.is-warning {
  color: #d29922;
  border-color: rgba(210, 153, 34, 0.3);
  background: rgba(210, 153, 34, 0.06);
}
.ep-config-note a {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}
.ep-config-note a:hover {
  text-decoration: underline;
}
/* ── Form fields ──────────────────────────────────────────────────────────── */
.ep-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ep-label {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.ep-required {
  color: var(--fgColor-danger);
  margin-left: 2px;
}
.ep-input {
  width: 100%;
  min-height: 32px;
  height: 32px;
  padding: 7px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
  box-sizing: border-box;
}
.ep-input:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.ep-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ep-field-hint {
  font-size: 11px;
  color: var(--muted);
}
.ep-field-error {
  color: #f85149;
}
/* ── Body label row ───────────────────────────────────────────────────────── */
.ep-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ep-label-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ep-ai-btn:hover:not(:disabled) {
  background: var(--bg-alt);
  color: var(--text);
}
.ep-ai-btn.is-active {
  background: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.35);
  color: #58a6ff;
}
.ep-ai-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ep-template-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ep-template-btn:hover:not(:disabled) {
  background: var(--bg-alt);
  color: var(--text);
}
.ep-template-btn.is-active {
  background: var(--bg-alt);
  border-color: var(--muted);
  color: var(--text);
}
.ep-template-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ── Templates dropdown ───────────────────────────────────────────────────── */
.ep-templates-container {
  position: relative;
}
.ep-templates-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  min-width: 260px;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.ep-templates-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ep-templates-save-toggle {
  font-size: 11px;
  color: var(--link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.ep-templates-save-toggle:hover {
  color: var(--link-hover);
}
.ep-templates-save-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.ep-templates-name-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  min-width: 0;
}
.ep-templates-name-input:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.ep-templates-save-btn {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.ep-templates-save-btn:hover:not(:disabled) {
  background: var(--bg-alt);
}
.ep-templates-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ep-templates-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.ep-templates-list {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ep-templates-item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.ep-templates-item:last-child {
  border-bottom: none;
}
.ep-templates-apply {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: background 0.1s;
}
.ep-templates-apply:hover {
  background: var(--bg-elevated);
}
.ep-templates-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ep-templates-item-preview {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ep-templates-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.ep-templates-delete:hover {
  color: #f85149;
  background: rgba(248, 81, 73, 0.06);
}
/* ── Template item actions (rename + delete) ─────────────────────────────── */
.ep-templates-item {
  position: relative;
}
.ep-templates-item-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.ep-templates-rename {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.ep-templates-rename:hover {
  color: var(--text);
  background: var(--bg-alt);
}
.ep-templates-rename-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  flex: 1;
}
.ep-templates-item-header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ep-template-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--bg-alt);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}
.ep-template-html-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ep-template-subj-badge {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
  flex-shrink: 0;
}
/* ── Body mode toggle (Text / HTML) ─────────────────────────────────────── */
.ep-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.ep-mode-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  letter-spacing: 0.03em;
}
.ep-mode-btn + .ep-mode-btn {
  border-left: 1px solid var(--line);
}
.ep-mode-btn.is-active {
  background: var(--bg-alt);
  color: var(--text);
}
.ep-mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ep-textarea.is-html-mode {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.6;
}
/* ── Inline HTML source preview ─────────────────────────────────────────── */
.ep-html-preview-details {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.ep-html-preview-details[open] .ep-html-preview-summary {
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}
.ep-html-preview-summary {
  display: block;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 12px;
}
.ep-html-preview-summary:hover {
  color: var(--text);
}
.ep-html-preview-frame {
  display: block;
  width: 100%;
  height: 500px;
  border: none;
  background: #fff;
  margin-top: 0;
}
/* ── HTML preview iframe inside the right-side preview panel ─────────────── */
.ep-html-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: none;
  background: #fff;
  border-radius: 0 0 4px 4px;
}
/* ── Email style picker ───────────────────────────────────────────────────── */
.ep-style-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex-wrap: wrap;
}
.ep-style-picker-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-right: 4px;
  flex-shrink: 0;
}
.ep-style-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ep-style-btn:hover:not(:disabled) {
  background: var(--bg-alt);
  color: var(--text);
}
.ep-style-btn.is-active {
  background: var(--bg-alt);
  border-color: var(--line);
  color: var(--text);
  font-weight: 600;
}
.ep-style-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ── AI panels ────────────────────────────────────────────────────────────── */
.ep-ai-panel {
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-ai-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.ep-ai-textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  resize: vertical;
  min-height: 52px;
  box-sizing: border-box;
  line-height: 1.5;
}
.ep-ai-textarea:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.ep-ai-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ep-ai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ep-ai-count {
  font-size: 11px;
  color: var(--muted);
}
.ep-ai-generate-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 5px;
  color: #58a6ff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ep-ai-generate-btn:hover:not(:disabled) {
  background: rgba(88, 166, 255, 0.2);
  border-color: rgba(88, 166, 255, 0.5);
}
.ep-ai-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ep-ai-error {
  font-size: 12px;
  color: #f85149;
  padding: 6px 8px;
  background: rgba(248, 81, 73, 0.08);
  border-radius: 4px;
  border: 1px solid rgba(248, 81, 73, 0.2);
}
/* ── Main textarea ────────────────────────────────────────────────────────── */
.ep-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--mono);
  resize: vertical;
  line-height: 1.6;
  box-sizing: border-box;
  transition: border-color 0.12s, background 0.12s;
}
.ep-textarea:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.ep-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ── Variable pills ───────────────────────────────────────────────────────── */
.ep-variables {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ep-variables-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.ep-pill {
  padding: 2px 7px;
  font-size: 11px;
  font-family: var(--mono);
  color: #777;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.ep-pill:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  color: #ccc;
  border-color: #444;
}
.ep-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ── Preview card ─────────────────────────────────────────────────────────── */
.ep-preview-card {
  display: flex;
  flex-direction: column;
  background: #141414;
  border-radius: 6px;
  border: 1px solid #222;
  overflow: hidden;
}
.ep-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #222;
  background: #181818;
}
.ep-preview-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ep-preview-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-preview-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: #666;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ep-preview-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  color: #ccc;
  border-color: #444;
}
.ep-preview-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ep-preview-nav-count {
  font-size: 11px;
  color: var(--muted);
  min-width: 32px;
  text-align: center;
}
.ep-preview-content {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ep-preview-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ep-preview-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 40px;
  flex-shrink: 0;
}
.ep-preview-value {
  font-size: 12px;
  color: var(--text);
  font-family: var(--mono);
  word-break: break-all;
}
.ep-preview-body {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
  word-break: break-word;
  min-height: 60px;
}
.ep-preview-body.is-html {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
}
.ep-preview-placeholder {
  color: var(--muted);
  font-style: italic;
}
.ep-preview-empty {
  padding: 24px 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
/* ── Send area ────────────────────────────────────────────────────────────── */
.ep-send-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-send-requirements {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elevated);
}
.ep-progress-wrap {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.ep-progress-bar {
  height: 100%;
  background: var(--link);
  border-radius: 2px;
  transition: width 0.3s linear;
}
.ep-result {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.ep-result > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.ep-result > span svg {
  display: block;
  flex-shrink: 0;
}
.ep-result.is-success {
  background: rgba(46, 160, 67, 0.1);
  border: 1px solid rgba(46, 160, 67, 0.25);
  color: #3fb950;
}
.ep-result.is-error {
  background: rgba(248, 81, 73, 0.08);
  border: 1px solid rgba(248, 81, 73, 0.2);
  color: #f85149;
}
.ep-result-error {
  width: auto;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  white-space: nowrap;
}
.ep-send-btn {
  width: 100%;
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.ep-send-btn:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}
.ep-send-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* ── Analytics tab ────────────────────────────────────────────────────────── */
.ep-analytics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ep-analytics-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.ep-analytics-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
}
.ep-analytics-stat-value {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ep-analytics-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ep-analytics-sent { color: var(--success); }
.ep-analytics-delivered { color: var(--link); }
.ep-analytics-failed { color: var(--error, #f85149); }
.ep-analytics-mini-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: auto;
}
.ep-analytics-mini-head,
.ep-analytics-mini-row {
  display: grid;
  gap: 10px;
  align-items: center;
}
.ep-analytics-mini-grid-day {
  grid-template-columns: minmax(120px, 1.2fr) repeat(5, minmax(58px, 1fr));
}
.ep-analytics-mini-head {
  padding: 2px 12px;
}
.ep-analytics-mini-head span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ep-analytics-mini-row {
  min-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ep-analytics-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-analytics-thead,
.ep-analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 90px 78px 78px 120px;
  gap: 12px;
  align-items: center;
}
.ep-analytics-thead {
  padding: 2px 12px;
}
.ep-analytics-th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.ep-analytics-th-num {
  text-align: right;
}
.ep-analytics-th-status {
  text-align: center;
}
.ep-analytics-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
  transition: background 0.12s, border-color 0.12s;
}
.ep-analytics-row:hover {
  background: var(--bg);
  border-color: var(--border);
}
.ep-analytics-row-btn {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.ep-analytics-td {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-analytics-campaign-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ep-analytics-subject {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-analytics-meta {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-analytics-date,
.ep-analytics-provider { color: var(--muted); font-size: 11px; }
.ep-analytics-count-sent { color: var(--success); font-weight: 600; }
.ep-analytics-count-delivered { color: var(--link); font-weight: 600; }
.ep-analytics-count-fail { color: var(--muted); }
.ep-analytics-count-fail:not(:empty)[data-nonzero] { color: var(--error, #f85149); }
.ep-analytics-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ep-analytics-td-status {
  display: flex;
  justify-content: center;
}
.ep-analytics-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  width: fit-content;
  white-space: nowrap;
}
.ep-analytics-status-sent,
.ep-analytics-status-completed { background: rgba(63, 185, 80, 0.12); color: var(--success); }
.ep-analytics-status-sending { background: rgba(88, 166, 255, 0.12); color: var(--link); }
.ep-analytics-status-failed { background: rgba(248, 81, 73, 0.12); color: var(--error, #f85149); }
.ep-upgrade-link {
  color: var(--link);
  font-size: 12px;
  text-decoration: underline;
}
.email-campaign-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 16px;
}
.email-campaign-modal {
  width: min(1200px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 14px;
}
.email-campaign-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.email-campaign-modal__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.email-campaign-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted);
}
.email-campaign-table-wrap {
  overflow-x: auto;
}
.ep-campaign-details-table {
  width: 100%;
  border-collapse: collapse;
}
.ep-campaign-details-table th,
.ep-campaign-details-table td {
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  padding: 8px;
  text-align: left;
}
.email-campaign-click {
  font-weight: 600;
  color: var(--muted);
}
.email-campaign-click.is-clicked {
  color: #3fb950;
}
.email-campaign-time {
  font-size: 11px;
  color: var(--muted);
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ep-campaign-layout {
    grid-template-columns: 1fr;
  }

  .ep-sidebar-col {
    order: -1;
  }

  .ep-analytics-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ep-analytics-thead,
  .ep-analytics-row {
    grid-template-columns: minmax(0, 1fr) 68px 78px 68px 68px 100px;
    gap: 10px;
  }

  .ep-recipient-filters {
    grid-template-columns: 1fr;
  }

  .ep-setup-grid {
    grid-template-columns: 1fr;
  }

}
@media (max-width: 600px) {
  .ep-inbox-thead {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .ep-inbox-th-subject,
  .ep-inbox-td-subject {
    display: none;
  }

  .ep-inbox-row {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .ep-detail-header {
    flex-direction: column;
    gap: 6px;
  }

  .ep-html-frame {
    min-height: 240px;
  }

  .ep-analytics-thead,
  .ep-analytics-row {
    grid-template-columns: minmax(0, 1fr) 58px 58px 58px 58px;
    gap: 8px;
  }

  .ep-analytics-th-status,
  .ep-analytics-td-status {
    display: none;
  }

  .ep-analytics-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .email-campaign-modal {
    width: 100%;
    max-height: 92vh;
    padding: 10px;
  }
}
/* Base.css - Core layout, spacing, typography, forms, and common components */
/* Based on Primer design system with 4px/8px/12px/16px spacing scale */
*, *::before, *::after {
  line-height: 1.5;
}
/* ========================================
   Page Layout
   ======================================== */
.page-container {
  --app-page-title-size: 26px;
  --app-page-title-size-tablet: 21px;
  --app-page-title-size-phone: 17px;
  --app-page-title-size-mini: 14px;
  --app-page-gutter-inline: clamp(16px, 2.4vw, 24px);
  --app-page-gutter-block: clamp(12px, 1.6vw, 16px);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-page-gutter-block) var(--app-page-gutter-inline);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-head {
  margin-bottom: 16px;
}
.page-head h2 {
  font-size: var(--app-page-title-size);
  font-weight: 600 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.page-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.page-head-title-row h2 {
  margin-bottom: 0;
}
.page-head-title-actions {
  margin-left: auto;
}
.page-head p {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 720px;
  line-height: 1.6;
}
.page-head p:last-of-type {
  margin-bottom: 16px;
}
.page-head p strong {
  color: var(--text);
  font-weight: 600;
}
.page-head p em {
  color: var(--text);
  font-style: normal;
}
.page-head p code {
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.page-head p a {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 500;
}
.page-head p a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* ========================================
   Header Stats - Primer control-small
   ======================================== */
.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.stat-row svg {
  color: var(--muted);
}
.stat-label {
  color: var(--muted);
}
.stat-value {
  color: var(--text);
  font-family: var(--mono, ui-monospace, monospace);
}
.stat-value.stat-running {
  color: var(--success);
}
.header-actions {
  margin-left: auto;
}
/* ========================================
   Badges
   ======================================== */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* ========================================
   Cards / Content Containers - Primer overlay
   ======================================== */
.content-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.card-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.card-body {
  padding: 16px;
  min-width: 0;
}
/* ========================================
   Forms - Primer control-medium
   ======================================== */
.form-group {
  margin-bottom: 16px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.span-2 {
  grid-column: span 2;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.input-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.input-label strong {
  font-weight: 600;
}
.input-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
/* ========================================
   Inputs - Primer control-medium (32px)
   ======================================== */
.search-input,
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 12px;
  resize: vertical;
}
.search-input:focus,
.input-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(110, 118, 129, 0.2);
}
.search-input::placeholder,
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.search-input.required-missing,
.input-field.required-missing,
input.required-missing {
  border-color: var(--error);
}
/* Select dropdown */
select.search-input,
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8590' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.input-with-action {
  display: flex;
  gap: 8px;
}
.input-with-action .search-input,
.input-with-action input {
  flex: 1;
}
.field-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.field-hint strong,
.field-hint em {
  color: var(--text);
}
/* ========================================
   Buttons - Primer button system
   ======================================== */
/* Base button - Compact shared system */
.btn,
.btn-secondary,
.btn-primary,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  font-family: inherit;
}
.btn:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-primary:focus-visible,
.primary-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn:disabled,
.btn-secondary:disabled,
.btn-primary:disabled,
.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Primary button (green) */
.btn-primary,
.primary-btn {
  color: var(--success);
  border-color: var(--success);
  background: var(--bg-alt);
}
.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--success);
}
/* Danger button - Primer button-danger */
.btn-danger {
  color: var(--error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--error);
}
/* Icon button - compact square with 12px icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn svg {
  width: 12px;
  height: 12px;
}
.icon-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon-btn.danger:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
  background: var(--bg);
}
/* Text button / link - Primer button-invisible */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #58a6ff;
  cursor: pointer;
  font-family: inherit;
}
.text-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* Small buttons */
.btn-sm {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}
.icon-btn-sm {
  width: 20px;
  height: 20px;
}
.icon-btn-sm svg {
  width: 12px;
  height: 12px;
}
.start-btn,
.cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  outline: none;
  font-family: inherit;
  background: var(--bg-alt);
  color: var(--text);
}
.start-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--border);
}
/* ========================================
   Checkboxes - Primer control
   ======================================== */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
  cursor: pointer;
}
.checkbox-label strong {
  font-weight: 600;
  color: var(--text);
}
/* ========================================
   Typography - Primer text tokens
   ======================================== */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
}
code {
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  padding: 2px 6px;
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
/* ========================================
   Tags & Badges - Primer label (compact)
   ======================================== */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
/* Tag styles defined in App.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* ========================================
   Tables - Primer DataTable
   ======================================== */
.target-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.target-queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.target-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
}
.target-queue-table tr:last-child td {
  border-bottom: none;
}
.target-queue-table tr:hover {
  background: var(--bg);
}
/* ========================================
   Sections
   ======================================== */
.target-section {
  margin-bottom: 16px;
}
.target-select-row {
  display: flex;
  align-items: center;
}
.instructions {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 16px;
}
.instructions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.instructions-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.instructions-text strong {
  color: var(--text);
}
.instructions-text em {
  color: var(--muted);
  font-style: italic;
}
/* ========================================
   Options & Actions - Primer stack-gap-normal
   ======================================== */
.options-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.option-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.option-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.option-desc {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}
.option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-status {
  font-size: 13px;
  color: var(--success);
}
.action-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* ========================================
   Help Text & Info
   ======================================== */
.below-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.below-help strong {
  color: var(--text);
}
.below-help a {
  color: #58a6ff;
}
.below-help a:hover {
  color: #79c0ff;
  text-decoration: underline;
}
/* ========================================
   Loading & Spinners - Primer spinner
   ======================================== */
.log-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ========================================
   Responsive - Primer breakpoints
   ======================================== */
/* Small tablets and large phones - 768px and below */
@media (max-width: 768px) {
  .page-container {
    padding: 14px 16px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-tablet);
  }

  .page-head-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .page-head-title-actions {
    margin-left: 0;
  }

  .page-head p {
    max-width: 100%;
    line-height: 1.5;
  }

  .header-stats {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
  }

  .stat-row {
    justify-content: flex-start;
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    align-self: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.span-2 {
    grid-column: span 1;
  }

  .option-block {
    flex-direction: column;
  }

  .card-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 12px;
  }

  .input-with-action {
    flex-direction: column;
  }

  .target-queue-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 8px;
    font-size: 12px;
  }
}
/* Phones - 480px and below */
@media (max-width: 480px) {
  .page-container {
    padding: 12px 14px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-phone);
  }

  .page-head p {
    font-size: 12px;
  }

  .card-header {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .icon-btn svg {
    width: 14px;
    height: 14px;
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .input-label {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .field-hint {
    font-size: 11px;
  }

  .target-queue-table th,
  .target-queue-table td {
    padding: 6px;
    font-size: 11px;
  }

  .checkbox-label {
    font-size: 12px;
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .instructions {
    padding: 10px 12px;
  }

  .instructions-title {
    font-size: 12px;
  }

  .instructions-text {
    font-size: 12px;
  }

  .below-help {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 16px;
  }
}
/* Extra small phones - 360px and below */
@media (max-width: 360px) {
  .page-container {
    padding: 10px;
  }

  .page-head h2 {
    font-size: var(--app-page-title-size-mini);
  }

  .search-input,
  .input-field,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 40px;
    font-size: 13px; /* Prevents iOS zoom on focus */
  }

  .btn {
    height: 36px;
  }

  .card-header {
    padding: 6px 8px;
  }

  .card-body {
    padding: 8px;
  }
}
.timeline-overview-embedded {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.timeline-overview-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline-overview-header-stats {
  gap: 10px;
}
.timeline-overview-header-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.timeline-overview-header-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono, ui-monospace, monospace);
}
.timeline-overview-header-select {
  height: 24px;
  min-width: 120px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-alt);
  color: var(--text);
  padding: 0 8px;
  font-size: 12px;
}
.timeline-overview-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.timeline-overview-head-link,
.timeline-overview-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}
.timeline-overview-refresh-btn {
  gap: 6px;
  cursor: pointer;
  width: 112px;
  flex-shrink: 0;
}
.timeline-overview-head-link:hover,
.timeline-overview-refresh-btn:hover:not(:disabled) {
  border-color: #777;
  background: rgba(120, 120, 120, 0.28);
}
.timeline-overview-refresh-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
.timeline-overview-refresh-btn .is-spinning {
  animation: timeline-overview-spin 0.8s linear infinite;
  transform-origin: center;
  will-change: transform;
}
.timeline-overview-refresh-interval {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  color: #bdbdbd;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, monospace);
}
.timeline-overview-refresh-interval span {
  white-space: nowrap;
}
.timeline-overview-refresh-interval input {
  width: 56px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #5a5a5a;
  background: #1a1a1a;
  color: #d0d0d0;
  font-size: 11px;
  padding: 0 6px;
  font-family: var(--mono, ui-monospace, monospace);
}
.timeline-overview-last-refresh {
  color: #909090;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  white-space: nowrap;
}
.timeline-overview-stats-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}
.timeline-overview-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  border: 1px solid #5a5a5a;
  background: rgba(115, 115, 115, 0.12);
  white-space: nowrap;
}
.timeline-overview-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #909090;
}
.timeline-overview-stat strong {
  font-size: 11px;
  color: #ddd;
  font-family: var(--mono, ui-monospace, monospace);
}
.timeline-overview-error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #6b3333;
  border-radius: 2px;
  background: rgba(107, 51, 51, 0.15);
  color: #f0a8a8;
  font-size: 13px;
}
.timeline-overview-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.timeline-overview-toolbar input,
.timeline-overview-toolbar select {
  height: 24px;
  border-radius: 2px;
  border: 1px solid #5a5a5a;
  background: rgba(115, 115, 115, 0.12);
  color: #d0d0d0;
  padding: 0 10px;
  font-size: 11px;
}
.timeline-overview-toolbar input::placeholder {
  color: #808080;
}
.timeline-overview-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.12);
  color: #bdbdbd;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, monospace);
}
.timeline-overview-zoom button {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #5a5a5a;
  background: rgba(120, 120, 120, 0.15);
  color: #d0d0d0;
  cursor: pointer;
}
.timeline-overview-zoom button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ── Analytics ── */
.timeline-overview-analytics {
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.08);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline-overview-analytics-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.timeline-overview-analytics-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #ddd;
}
.timeline-overview-analytics-head span {
  font-size: 11px;
  color: #909090;
}
.timeline-overview-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
}
.timeline-overview-analytics-kpi {
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.12);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.timeline-overview-analytics-kpi span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #909090;
}
.timeline-overview-analytics-kpi strong {
  font-size: 14px;
  font-family: var(--mono, ui-monospace, monospace);
  color: #e0e0e0;
}
.timeline-overview-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.timeline-overview-analytics-panel {
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.08);
  overflow: hidden;
}
.timeline-overview-analytics-panel-head {
  border-bottom: 1px solid #383838;
  background: #272727;
  color: #ccc;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.timeline-overview-analytics-table-wrap {
  overflow-x: auto;
}
.timeline-overview-analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.timeline-overview-analytics-table th,
.timeline-overview-analytics-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #333;
  text-align: left;
  white-space: nowrap;
}
.timeline-overview-analytics-table th {
  color: #909090;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.timeline-overview-analytics-table td {
  color: #ccc;
}
.timeline-overview-analytics-table tr:last-child td {
  border-bottom: none;
}
.timeline-overview-analytics-empty {
  padding: 10px;
  color: #909090;
  font-size: 11px;
}
/* ── Empty state ── */
.timeline-overview-empty {
  padding: 16px;
  border: 1px dashed #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.08);
  color: #999;
}
/* ── Track wrapper ── */
.timeline-overview-track-wrap {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  position: relative;
}
.timeline-overview-track-wrap .timeline-sending-email-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid #333;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-overview-track-wrap .timeline-sending-email-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Track spine ── */
.timeline-overview-track {
  padding: 14px 14px 18px 14px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.timeline-overview-track::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(150, 150, 150, 0.25);
  z-index: 0;
  pointer-events: none;
}
/* ── Gap spacers ── */
.timeline-overview-gap {
  position: relative;
  min-height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-overview-gap-line {
  display: none;
}
.timeline-overview-gap.is-medium .timeline-overview-gap-line,
.timeline-overview-gap.is-large .timeline-overview-gap-line {
  display: none;
}
.timeline-overview-gap-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
  border: none;
  background: none;
  border-radius: 0;
  padding: 0 6px;
  height: 20px;
  font-weight: 600;
  font-family: var(--mono, ui-monospace, monospace);
  z-index: 1;
  line-height: 1;
}
.timeline-overview-gap-label svg {
  color: #555;
  flex-shrink: 0;
}
.timeline-overview-gap.is-medium .timeline-overview-gap-label {
  color: #666;
}
.timeline-overview-gap.is-medium .timeline-overview-gap-label svg {
  color: #555;
}
.timeline-overview-gap.is-large .timeline-overview-gap-label {
  color: #666;
}
.timeline-overview-gap.is-large .timeline-overview-gap-label svg {
  color: #555;
}
/* ── Day markers ── */
.timeline-overview-day-marker {
  margin: 12px 0 6px 30px;
  padding: 5px 0;
  color: #bbb;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.timeline-overview-day-marker time {
  display: block;
}
/* ── Now marker ── */
.timeline-overview-now {
  display: grid;
  grid-template-columns: 20px auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  margin: 10px 0;
  margin-left: 0;
  color: #5b9fd6;
  font-size: 11px;
  font-weight: 600;
  position: relative;
}
.timeline-overview-now-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid #5b9fd6;
  background: #1e2e3e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  box-shadow: 0 0 0 3px #1a1a1a;
  position: relative;
  z-index: 3;
}
.timeline-overview-now-dot svg {
  width: 10px;
  height: 10px;
  color: #5b9fd6;
}
.timeline-overview-now-label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11px;
  color: #5b9fd6;
}
.timeline-overview-now-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    #3a5068 0%,
    #3a5068 30%,
    #5b9fd6 50%,
    #3a5068 70%,
    #3a5068 100%
  );
  background-size: 200% 100%;
  border: none;
  margin: 0;
  animation: pulse-rule-overview 3.5s ease-in-out infinite;
}
@keyframes pulse-rule-overview {
  0% {
    background-position: -200% 0;
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: 200% 0;
    opacity: 0.6;
  }
}
.timeline-overview-now time {
  color: #6eaad4;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 500;
  font-size: 11px;
}
/* ── Event row ── */
.timeline-overview-event {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 10px;
  margin: 4px 0;
}
.timeline-overview-event.is-same-contact {
  margin-top: 1px;
}
.timeline-overview-event.is-same-contact .timeline-overview-event-card {
  border-top-color: rgba(90, 90, 90, 0.5);
}
.timeline-overview-event::before {
  display: none;
}
/* ── Event dot (icon) ── */
.timeline-overview-event-dot {
  grid-column: 1;
  justify-self: center;
  width: 20px;
  height: 20px;
  margin-top: 7px;
  border-radius: 999px;
  border: 1px solid #666;
  background: #2a2a2a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: background 0.12s, border-color 0.12s;
}
.timeline-overview-event-dot svg {
  width: 10px;
  height: 10px;
  color: #9f9f9f;
  flex-shrink: 0;
}
.timeline-overview-event:hover .timeline-overview-event-dot {
  background: #333;
  border-color: #888;
}
.timeline-overview-event:hover .timeline-overview-event-dot svg {
  color: #bdbdbd;
}
/* ── Event card ── */
.timeline-overview-event-card {
  grid-column: 2;
  flex: 1;
  min-width: 0;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.12);
  transition: border-color 0.12s, background 0.12s;
}
.timeline-overview-event-card:hover {
  background: rgba(115, 115, 115, 0.18);
  border-color: #6a6a6a;
}
/* ── Summary ── */
.timeline-overview-event-summary {
  border: none;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.timeline-overview-summary-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.timeline-overview-event-time-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #bdbdbd;
  font-family: var(--mono, ui-monospace, monospace);
  min-width: 60px;
}
/* ── Type badges (flat) ── */
.timeline-overview-event-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.22);
  color: #cfcfcf;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  flex-shrink: 0;
}
.timeline-overview-event-type svg {
  width: 10px;
  height: 10px;
}
.timeline-overview-event-type.is-email {
  background: rgba(42, 55, 72, 0.6);
  border-color: rgba(143, 184, 220, 0.35);
  color: #8fb8dc;
}
.timeline-overview-event-type.is-sms,
.timeline-overview-event-type.is-phone,
.timeline-overview-event-type.is-video-call {
  background: rgba(42, 62, 48, 0.6);
  border-color: rgba(141, 196, 160, 0.35);
  color: #8dc4a0;
}
.timeline-overview-event-type.is-meeting {
  background: rgba(56, 46, 72, 0.6);
  border-color: rgba(184, 160, 212, 0.35);
  color: #b8a0d4;
}
.timeline-overview-event-type.is-task {
  background: rgba(62, 50, 40, 0.6);
  border-color: rgba(212, 180, 140, 0.35);
  color: #d4b48c;
}
.timeline-overview-event-type.is-note {
  background: rgba(58, 53, 40, 0.6);
  border-color: rgba(212, 204, 140, 0.35);
  color: #d4cc8c;
}
.timeline-overview-event-type.is-status {
  background: rgba(40, 58, 62, 0.6);
  border-color: rgba(140, 200, 212, 0.35);
  color: #8cc8d4;
}
.timeline-overview-campaign-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.timeline-overview-event-id-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 2px;
  border: 1px solid #4a4a4a;
  background: rgba(80, 80, 80, 0.2);
  color: #999;
  font-size: 10px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.timeline-overview-summary-business {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #b0b0b0;
  font-weight: 500;
  flex-shrink: 1;
}
.timeline-overview-summary-business svg {
  flex-shrink: 0;
  color: #888;
}
.timeline-overview-summary-recipient {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #909090;
  font-weight: 400;
}
.timeline-overview-summary-relative {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: #999;
}
/* ── Status badges (flat) ── */
.timeline-overview-event-status {
  flex-shrink: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-radius: 2px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.timeline-overview-summary-expand {
  display: inline-flex;
  align-items: center;
  color: #888;
  flex-shrink: 0;
}
.timeline-overview-summary-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  min-width: 0;
}
.timeline-overview-summary-label {
  flex-shrink: 0;
  font-size: 11px;
  color: #999;
  font-weight: 700;
  text-transform: uppercase;
}
.timeline-overview-summary-text {
  min-width: 0;
  font-size: 11px;
  color: #bbb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Event details (expanded) ── */
.timeline-overview-event-details {
  border-top: 1px solid #383838;
  padding: 8px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.timeline-overview-event-sent-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7db89a;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
}
.timeline-overview-event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #999;
}
.timeline-overview-event-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, ui-monospace, monospace);
}
.timeline-overview-automation-off,
.timeline-overview-running-now {
  border-radius: 2px;
  padding: 1px 6px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.timeline-overview-automation-off {
  background: #3e3424;
  color: #d8c48c;
}
.timeline-overview-running-now {
  background: #2c3e30;
  color: #a8d8bc;
}
/* ── Email / detail blocks ── */
.timeline-overview-email-semantics,
.timeline-overview-event-detail-block {
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: rgba(115, 115, 115, 0.08);
  padding: 8px 9px;
}
.timeline-overview-email-semantics {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline-overview-email-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}
.timeline-overview-email-label {
  font-size: 11px;
  font-weight: 700;
  color: #ccc;
  flex-shrink: 0;
}
.timeline-overview-email-value {
  min-width: 0;
  color: #bbb;
  overflow-wrap: anywhere;
}
.timeline-overview-email-value.is-address {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: #aaa;
}
.timeline-overview-email-body {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid #383838;
  color: #aaa;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.timeline-overview-event-title {
  font-size: 12px;
  color: #ddd;
  font-weight: 700;
}
.timeline-overview-event-description {
  margin-top: 3px;
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.timeline-overview-event-error {
  border: 1px solid #6b3333;
  background: rgba(107, 51, 51, 0.2);
  border-radius: 2px;
  padding: 6px 7px;
  color: #e8a0a0;
  font-size: 11px;
}
/* ── Action buttons ── */
.timeline-overview-event-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.timeline-overview-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  border: 1px solid #6b3a3a;
  border-radius: 2px;
  background: rgba(107, 58, 58, 0.2);
  color: #e8b0b0;
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
}
.timeline-overview-delete-btn:hover:not(:disabled) {
  background: #442828;
}
.timeline-overview-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.timeline-overview-view-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  border: 1px solid #3e5068;
  border-radius: 2px;
  background: rgba(62, 80, 104, 0.2);
  color: #a0c4e0;
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
}
.timeline-overview-view-contact-btn:hover {
  background: #2c3a4e;
  border-color: #4e6078;
}
.timeline-overview-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  border: 1px solid #6b5c33;
  border-radius: 2px;
  background: rgba(107, 92, 51, 0.2);
  color: #e8d4a0;
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
}
.timeline-overview-retry-btn:hover:not(:disabled) {
  background: #443a20;
}
.timeline-overview-retry-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ── Pause / Unpause button ── */
.timeline-overview-pause-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  border: 1px solid #6b5c33;
  border-radius: 2px;
  background: rgba(107, 92, 51, 0.2);
  color: #e8d4a0;
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
}
.timeline-overview-pause-btn:hover:not(:disabled) {
  background: #443a20;
}
.timeline-overview-pause-btn.is-paused {
  border-color: #3d5a3d;
  background: rgba(61, 90, 61, 0.2);
  color: #7ee787;
}
.timeline-overview-pause-btn.is-paused:hover:not(:disabled) {
  background: #2a3e2a;
}
.timeline-overview-pause-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ── Scroll to Now button ── */
.timeline-overview-scroll-to-now-btn {
  position: sticky;
  top: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  float: right;
  margin: 0 14px -22px 0;
  min-height: 20px;
  border: 1px solid #3d5a3d;
  border-radius: 2px;
  background: rgba(61, 90, 61, 0.2);
  color: #7ee787;
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
}
.timeline-overview-scroll-to-now-btn:hover {
  background: #2a3e2a;
  border-color: #5a8a5a;
}
.timeline-overview-scroll-to-now-btn svg {
  color: #6fcf6f;
}
/* ── Status-specific dot colors ── */
.timeline-overview-event.is-pending .timeline-overview-event-dot {
  border-color: #555;
  background: #2a2a2a;
}
.timeline-overview-event.is-pending .timeline-overview-event-dot svg {
  color: #888;
}
.timeline-overview-event.is-scheduled .timeline-overview-event-dot {
  border-color: #8a7030;
  background: #3e3420;
}
.timeline-overview-event.is-scheduled .timeline-overview-event-dot svg {
  color: #d8c88c;
}
.timeline-overview-event.is-processing .timeline-overview-event-dot {
  border-color: #6a7080;
  background: #363a40;
}
.timeline-overview-event.is-processing .timeline-overview-event-dot svg {
  color: #a0b0c0;
}
.timeline-overview-event.is-sent .timeline-overview-event-dot,
.timeline-overview-event.is-completed .timeline-overview-event-dot {
  border-color: #3a8858;
  background: #1e3e2c;
}
.timeline-overview-event.is-sent .timeline-overview-event-dot svg,
.timeline-overview-event.is-completed .timeline-overview-event-dot svg {
  color: #7ee787;
}
.timeline-overview-event.is-skipped .timeline-overview-event-dot {
  border-color: #555;
  background: #2a2a2a;
}
.timeline-overview-event.is-skipped .timeline-overview-event-dot svg {
  color: #888;
}
.timeline-overview-event.is-failed .timeline-overview-event-dot {
  border-color: #9e4444;
  background: #3e2020;
}
.timeline-overview-event.is-failed .timeline-overview-event-dot svg {
  color: #e8a0a0;
}
/* ── Status badge colors (flat, muted) ── */
.timeline-overview-event-status.is-pending {
  color: #bbb;
  background: #363636;
}
.timeline-overview-event-status.is-scheduled {
  color: #d8c88c;
  background: #3e3420;
}
.timeline-overview-event-status.is-processing {
  color: #b8c0cc;
  background: #363a44;
}
.timeline-overview-event-status.is-sent,
.timeline-overview-event-status.is-completed {
  color: #8cd4a8;
  background: #243830;
}
.timeline-overview-event-status.is-skipped {
  color: #bbb;
  background: #363636;
}
.timeline-overview-event-status.is-failed {
  color: #e8a0a0;
  background: #3e2424;
}
/* ── Status-specific card left-border accent ── */
/* ── Failed / completed card backgrounds ── */
.timeline-overview-event.is-failed .timeline-overview-event-card {
  background: #261818;
  border-color: #3a2222;
}
.timeline-overview-event.is-completed .timeline-overview-event-card,
.timeline-overview-event.is-sent .timeline-overview-event-card {
  background: #1a261e;
  border-color: #243a2a;
}
/* ── Campaign recipients list ── */
.timeline-overview-campaign-recipients {
  margin-top: 4px;
  margin-left: 18px;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  background: rgba(30, 30, 30, 0.6);
}
.timeline-overview-campaign-recipients-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #333;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.timeline-overview-campaign-recipients-header svg {
  color: #777;
}
.timeline-overview-campaign-recipients-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.timeline-overview-campaign-recipients-list {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}
.timeline-overview-campaign-recipient-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 11px;
}
.timeline-overview-campaign-recipient-row:last-child {
  border-bottom: none;
}
.timeline-overview-campaign-recipient-row:hover {
  background: rgba(80, 80, 80, 0.15);
}
.timeline-overview-campaign-recipient-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #666;
}
.timeline-overview-campaign-recipient-name {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #b8b8b8;
}
.timeline-overview-campaign-recipient-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #888;
  font-family: var(--mono, ui-monospace, monospace);
  flex: 1;
}
.timeline-overview-campaign-recipient-location {
  flex-shrink: 0;
  color: #666;
  font-size: 10px;
}
.timeline-overview-campaign-recipients-empty {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: #666;
}
/* ── Responsive ── */
@media (max-width: 980px) {
  .timeline-overview-head-actions {
    width: 100%;
    margin-left: 0;
  }

  .timeline-overview-stats-inline {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }

  .timeline-overview-toolbar {
    grid-template-columns: 1fr;
  }

  .timeline-overview-analytics-kpis {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }

  .timeline-overview-analytics-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .timeline-overview-analytics-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .timeline-overview-track-wrap {
    padding: 10px 8px 10px 12px;
  }

  .timeline-overview-summary-line1 {
    flex-wrap: wrap;
  }

  .timeline-overview-summary-relative {
    margin-left: 0;
  }
}
/* ── Zoom: Compact (out) ── */
.zoom-out .timeline-overview-event {
  margin: 1px 0;
}
.zoom-out .timeline-overview-event::before {
  display: none;
}
.zoom-out .timeline-overview-event-card {
  border-radius: 2px;
}
.zoom-out .timeline-overview-event-summary {
  padding: 3px 8px;
}
.zoom-out .timeline-overview-summary-line1 {
  gap: 4px;
}
.zoom-out .timeline-overview-summary-line2 {
  display: none;
}
.zoom-out .timeline-overview-event-time-badge {
  font-size: 11px;
  min-width: 50px;
}
.zoom-out .timeline-overview-event-type {
  height: 16px;
  padding: 0 5px;
  font-size: 9px;
}
.zoom-out .timeline-overview-campaign-badge {
  height: 16px;
  padding: 0 5px;
  font-size: 9px;
}
.zoom-out .timeline-overview-event-id-badge {
  height: 14px;
  padding: 0 4px;
  font-size: 8px;
}
.zoom-out .timeline-overview-summary-business {
  font-size: 10px;
}
.zoom-out .timeline-overview-summary-business svg {
  width: 10px;
  height: 10px;
}
.zoom-out .timeline-overview-event-type svg {
  width: 9px;
  height: 9px;
}
.zoom-out .timeline-overview-summary-recipient {
  font-size: 11px;
}
.zoom-out .timeline-overview-event-status {
  font-size: 8px;
  padding: 0 5px;
}
.zoom-out .timeline-overview-summary-relative {
  font-size: 9px;
}
.zoom-out .timeline-overview-summary-expand {
  display: none;
}
.zoom-out .timeline-overview-event-dot {
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-width: 1.5px;
}
.zoom-out .timeline-overview-day-marker {
  margin: 10px 0 4px 20px;
  padding: 3px 0;
  font-size: 11px;
  font-weight: 700;
}
.zoom-out .timeline-overview-now {
  margin: 8px 0;
  font-size: 11px;
}
.zoom-out .timeline-overview-gap {
  min-height: 32px;
  height: 32px !important;
}
.zoom-out .timeline-overview-gap-line {
  display: none;
}
.zoom-out .timeline-overview-gap-label,
.zoom-out .timeline-overview-gap.is-medium .timeline-overview-gap-label,
.zoom-out .timeline-overview-gap.is-large .timeline-overview-gap-label {
  font-size: 11px;
  padding: 2px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
}
.zoom-out .timeline-overview-gap-label svg {
  display: none;
}
/* ── Zoom: Expanded (in) ── */
.zoom-in .timeline-overview-event {
  margin: 12px 0;
}
.zoom-in .timeline-overview-event-summary {
  padding: 9px 12px;
}
.zoom-in .timeline-overview-day-marker {
  margin: 28px 0 14px 20px;
}
/* ── Lazy-load sentinel ── */
.timeline-overview-sentinel {
  text-align: center;
  padding: 18px 0;
  color: #555;
  font-size: 11px;
}
.timeline-overview-batch-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #888;
}
.timeline-overview-sentinel-complete {
  color: #8f8f8f;
}
@keyframes timeline-overview-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.timeline-overview-lazy-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(148, 156, 168, 0.26);
  border-right-color: transparent;
  border-top-color: #aeb6c3;
  border-radius: 50%;
  animation: timeline-overview-spin 0.7s linear infinite !important;
  animation-duration: 0.7s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  flex-shrink: 0;
  transform-origin: center;
  will-change: transform;
}
/* AI Event Chat Widget */

.ai-chat-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  transition: all 0.3s ease;
  font-size: 0;
}

.ai-chat-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.6);
}

.ai-chat-trigger:active {
  transform: scale(0.95);
}

/* Dialog overlay and panel */
.ai-event-shell {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.ai-event-shell.is-open {
  display: flex;
  pointer-events: auto;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
}

.ai-event-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  z-index: 0;
}

.ai-event-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: 600px;
  border-radius: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

@media (max-width: 640px) {
  .ai-event-panel {
    max-width: 100%;
    max-height: 80vh;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.ai-event-header {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ai-event-title-block {
  flex: 1;
}

.ai-event-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.ai-event-subtitle {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.ai-event-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #9ca3af;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-event-close:hover {
  color: #111827;
}

/* Messages container */
.ai-event-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

.ai-event-message {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fadeIn 0.3s ease-out;
}

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

.ai-event-message-role {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.ai-event-message-user .ai-event-message-role {
  color: #7c3aed;
}

.ai-event-message-assistant .ai-event-message-role {
  color: #4f46e5;
}

.ai-event-message-body {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ai-event-message-user .ai-event-message-body {
  background: #f3e8ff;
  color: #4c1d95;
  margin-left: auto;
  max-width: 85%;
}

.ai-event-message-assistant .ai-event-message-body {
  background: #eef2ff;
  color: #3730a3;
  margin-right: auto;
  max-width: 100%;
}

.ai-event-message-error .ai-event-message-body {
  background: #fee2e2;
  color: #7f1d1d;
}

/* Loading indicator */
.ai-event-message-loading .ai-event-message-body {
  padding: 8px 12px;
}

.ai-event-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: #eef2ff;
  border-radius: 8px;
}

.ai-event-typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f46e5;
  animation: typing 1.4s infinite;
}

.ai-event-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-event-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-6px);
  }
}

/* Form */
.ai-event-form {
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-event-input {
  flex: 1;
  min-height: 80px;
  max-height: 120px;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-event-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.ai-event-input:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Actions */
.ai-event-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.ai-event-hint {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-event-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ai-event-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.ai-event-submit:active:not(:disabled) {
  transform: translateY(0);
}

.ai-event-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .ai-event-panel {
    border-radius: 12px 12px 0 0;
  }

  .ai-event-header {
    padding: 12px;
  }

  .ai-event-title {
    font-size: 14px;
  }

  .ai-event-subtitle {
    font-size: 12px;
  }

  .ai-event-messages {
    min-height: 150px;
  }

  .ai-event-form {
    padding: 10px;
  }

  .ai-event-input {
    min-height: 60px;
  }
}
.le-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 8, 0.58);
  backdrop-filter: blur(5px);
  padding: 20px;
}

.le-picker-modal {
  width: min(96vw, 940px);
  height: min(90vh, 680px);
  max-height: min(90vh, 680px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #181818 0%, #111111 100%);
  border: 1px solid #2f2f2f;
  border-radius: 6px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.58);
  overflow: hidden;
}

.le-picker-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #2a2a2a;
  background: #101010;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.le-picker-header-copy h3 { color: #e8e6e3; font-size: 13px; font-weight: 600; margin: 0; }
.le-picker-header-copy p { color: #888; font-size: 11.5px; margin: 4px 0 0; }

.le-picker-close-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #303030;
  border-radius: 4px;
  background: #1a1a1a;
  color: #8c8c8c;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.le-picker-close-btn:hover {
  background: #252525;
  color: #e8d4a0;
  border-color: #6b5c33;
}

.le-picker-search-wrap {
  position: relative;
  padding: 10px 16px;
  border-bottom: 1px solid #2a2a2a;
}

.le-picker-search {
  box-sizing: border-box;
  width: 100%;
  background: #151515;
  border: 1px solid #343434;
  border-radius: 4px;
  color: #d5d0cb;
  font-size: 12px;
  padding: 7px 10px 7px 42px !important;
  outline: none;
}

.le-picker-search:focus { border-color: #6b5c33; }

.le-picker-search-icon {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

.le-picker-table-wrap { flex: 1; overflow-y: auto; padding: 0; }
.le-picker-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.le-picker-table th { position: sticky; top: 0; background: #131313; color: #8a8a8a; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 7px 12px; text-align: left; border-bottom: 1px solid #2a2a2a; }
.le-picker-table td { padding: 9px 12px; color: #ccc; border-bottom: 1px solid #232323; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.le-picker-row { cursor: pointer; transition: background 0.1s; }
.le-picker-row:hover { background: rgba(107, 92, 51, 0.12); }
.le-picker-row.is-selected { background: rgba(107, 92, 51, 0.2); }
.le-picker-events-cell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.le-picker-footer {
  padding: 12px 16px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.le-picker-back-link {
  justify-self: flex-start;
  margin-right: auto;
  color: #e8d4a0;
}

.le-picker-back-link:hover {
  color: #f0e0b0;
}

.le-picker-footer-hint {
  font-size: 11px;
  color: #777;
}

.le-picker-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 2px;
  border: 1px solid #6b5c33;
  background: rgba(107, 92, 51, 0.2);
  color: #e8d4a0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.le-picker-open-btn:hover:not(:disabled) {
  background: #443a20;
  border-color: #7a6b43;
}
.le-picker-open-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.le-picker-empty { padding: 40px; text-align: center; color: #777; font-size: 12px; line-height: 1.55; }
.le-picker-loading { padding: 40px; text-align: center; color: #888; font-size: 12px; }

@media (max-width: 900px) {
  .le-picker-table th:nth-child(6),
  .le-picker-table td:nth-child(6) {
    display: none;
  }
}

@media (max-width: 640px) {
  .le-picker-overlay {
    padding: 10px;
  }

  .le-picker-modal {
    width: 100%;
    height: auto;
    max-height: 94vh;
  }

  .le-picker-table th:nth-child(4),
  .le-picker-table td:nth-child(4),
  .le-picker-table th:nth-child(5),
  .le-picker-table td:nth-child(5) {
    display: none;
  }

  .le-picker-footer {
    flex-wrap: wrap;
  }
}
.le-proto-page {
  color-scheme: light;
  --nav-bg: #1f2125;
  --nav-border: #17191c;
  --nav-text: #ffffff;
  --nav-muted: rgba(255, 255, 255, 0.68);
  --page-bg: #f0f2f5;
  --sidebar-bg: #e8eaed;
  --surface: #f7f8fa;
  --surface-soft: #eef0f3;
  --border: #b0b8c4;
  --border-soft: #c8cdd5;
  --text: #0d1117;
  --text-soft: #3a4250;
  --muted: #505a66;
  --muted-soft: #7a8594;
  --chip-bg: #dde1e7;
  --green: #16a34a;
  --yellow: #f59e0b;
  --red: #ef4444;
  --success: #116329;
  --failed: #b42318;
  --new-text: #064e3b;
  --new-bg: #d1fae5;
  --new-border: #86efac;
  --alert-text: #b42318;
  --alert-bg: #fef3f2;
  --alert-border: #fecdca;
  display: flex;
  min-height: calc(100vh - 44px);
  flex-direction: column;
  background: var(--page-bg);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
}

.le-proto-page *,
.le-proto-page *::before,
.le-proto-page *::after {
  box-sizing: border-box;
}

.le-proto-page button,
.le-proto-page input,
.le-proto-page select,
.le-proto-page textarea {
  font: inherit;
}

.le-proto-page button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.le-proto-page .app-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  min-height: 56px;
  padding: 0 20px;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 1px solid var(--nav-border);
}

.le-proto-page .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.le-proto-page .brand-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.le-proto-page .brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.le-proto-page .nav-context {
  color: var(--nav-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le-proto-page .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.le-proto-page .nav-links button {
  color: var(--nav-text);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.le-proto-page .nav-user {
  font-size: 11px;
  opacity: 0.86;
}

.le-proto-page .container {
  display: flex;
  min-height: calc(100vh - 44px);
}

.le-proto-page .sidebar {
  min-width: 240px;
  max-width: 70%;
  background: whitesmoke;
  border-right: 1px solid var(--border-soft);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.le-proto-page .resizer {
  width: 4px;
  cursor: col-resize;
  background: #ffffff;
  border-right: 1px solid var(--border-soft);
}

.le-proto-page .resizer:hover {
  background: #ececec;
}

.le-proto-page .content {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  overflow-y: auto;
}

.le-proto-page .app-page-list {
  display: block;
  margin-bottom: 10px;
}

.le-proto-page .app-page-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.le-proto-page .app-page-menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 6px;
  align-items: center;
  min-height: 28px;
  width: 100%;
  padding: 2px 4px;
  border: none;
  border-radius: 0;
  text-align: left;
  background: transparent;
  color: #1f2937;
  font-size: 12px;
}

.le-proto-page .app-page-menu-item:hover {
  background: rgba(255, 255, 255, 0.55);
}

.le-proto-page .app-page-menu-item.is-active {
  font-weight: 700;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.78);
}

.le-proto-page .app-page-menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le-proto-page .app-page-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 12px;
  padding: 0 4px;
  border-radius: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  color: var(--new-text);
  background: var(--new-bg);
}

.le-proto-page .app-page-menu-count {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 10px;
  font-weight: 600;
  color: #334155;
}

.le-proto-page .section {
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--border-soft);
}

.le-proto-page .section-header-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}

.le-proto-page .section-header-row h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #24292f;
}

.le-proto-page .section-docs-link {
  font-size: 11px;
  font-weight: 500;
  color: #0969da;
  text-decoration: none;
  white-space: nowrap;
}

.le-proto-page .section-docs-link:hover {
  text-decoration: underline;
}

.le-proto-page .section h3 {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #24292f;
}

.le-proto-page .business-meta-grid,
.le-proto-page .business-meta-row {
  display: grid;
}

.le-proto-page .business-meta-grid {
  gap: 3px;
}

.le-proto-page .business-meta-row {
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 7px;
  min-height: 21px;
}

.le-proto-page .business-meta-label {
  font-size: 11px;
  font-weight: 700;
}

.le-proto-page .business-meta-value {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .input-row {
  margin-bottom: 6px;
}

.le-proto-page .sidebar-field-label {
  display: block;
  margin: 0 0 4px 1px;
  color: #24292f;
  font-size: 11px;
  font-weight: 700;
}

.le-proto-page input,
.le-proto-page select,
.le-proto-page textarea {
  width: 100%;
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  color: #24292f;
  font-size: 12px;
}

.le-proto-page textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.45;
}

.le-proto-page input:focus,
.le-proto-page select:focus,
.le-proto-page textarea:focus {
  outline: none;
  border-color: #0969da;
  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.22);
}

.le-proto-page .editor-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.le-proto-page .editor-button {
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  font-size: 11px;
}

.le-proto-page .editor-button-primary {
  background: #eef0f3;
}

.le-proto-page .scope-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}

.le-proto-page .sidebar-footer,
.le-proto-page .timestamp,
.le-proto-page .user-info,
.le-proto-page .check-option {
  font-size: 11px;
}

.le-proto-page .storage-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: bottom;
  background: var(--chip-bg);
  border-radius: 0;
  padding: 0 3px;
  margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.2;
}

.le-proto-page .check-option {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #57606a;
  margin-bottom: 5px;
}

.le-proto-page .check-option input {
  width: 14px;
  min-height: 14px;
  margin: 0;
}

.le-proto-page .channel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.le-proto-page .channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--surface);
  opacity: 1;
}

.le-proto-page .channel-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
}

.le-proto-page .channel-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.le-proto-page .channel-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .channel-detail {
  font-size: 10px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .channel-detail-empty {
  color: var(--text-muted, #999);
  font-style: italic;
}

.le-proto-page .channel-detail-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-size: 10px;
  color: var(--text-soft);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.le-proto-page .channel-detail-btn:hover {
  color: #0969da;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.le-proto-page .channel-detail-btn.channel-detail-empty {
  color: var(--text-muted, #999);
  font-style: italic;
  font-family: inherit;
  cursor: pointer;
}

.le-proto-page .channel-detail-btn.channel-detail-empty:hover {
  color: #0969da;
  font-style: normal;
}

.le-proto-page .channel-add-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border: 1px dashed var(--border-soft);
  border-radius: 5px;
  background: transparent;
  color: var(--muted-soft);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.le-proto-page .channel-add-placeholder:hover {
  border-color: #9ca3af;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.015);
}

.le-proto-page .channel-row-adding {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px dashed var(--border-soft);
  border-radius: 5px;
  background: transparent;
  min-height: 36px;
}

.le-proto-page .channel-type-select {
  flex: 1;
  min-width: 0;
  width: auto !important;
  min-height: 24px !important;
  height: 24px;
  padding: 0 6px !important;
  font-size: 11px !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px;
  background: #ffffff;
  color: var(--text);
}

.le-proto-page .channel-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--muted-soft);
  cursor: pointer;
  border-radius: 2px;
  flex-shrink: 0;
  padding: 0;
}

.le-proto-page .channel-remove-btn:hover {
  color: var(--red);
  background: rgba(239, 68, 68, 0.08);
}


.le-proto-page .channel-edit-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.le-proto-page .channel-edit-input {
  flex: 1;
  min-width: 0;
  width: auto !important;
  min-height: 20px !important;
  height: 20px;
  padding: 1px 4px !important;
  font-size: 10px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  border: 1px solid #0969da !important;
  border-radius: 2px;
  background: #ffffff;
  color: var(--text);
}

.le-proto-page .channel-edit-done {
  flex-shrink: 0;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #ffffff;
  font-size: 10px;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
}

.le-proto-page .channel-edit-done:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.le-proto-page .channel-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}


/* Toggle switch */
.le-proto-page .channel-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.le-proto-page .channel-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.le-proto-page .channel-toggle-track {
  display: block;
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: var(--border-soft, #d0d7de);
  transition: background 0.15s;
  position: relative;
}

.le-proto-page .channel-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.le-proto-page .channel-toggle input:checked + .channel-toggle-track {
  background: #2da44e;
}

.le-proto-page .channel-toggle input:checked + .channel-toggle-track::after {
  transform: translateX(12px);
}

.le-proto-page .sidebar-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  color: #57606a;
}

.le-proto-page .timeline-main {
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 112px;
}

.le-proto-page .timeline-structured-stack {
  display: grid;
  gap: 12px;
}

.le-proto-page .timeline-shell-panel {
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.le-proto-page .timeline-events-panel {
  background: #ffffff;
}

.le-proto-page .timeline-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.le-proto-page .timeline-panel-head-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.le-proto-page .timeline-panel-head-title > span:first-child {
  color: #000000;
  font-weight: 700;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.le-proto-page .timeline-panel-body {
  padding: 10px 12px 12px;
}

.le-proto-page .timeline-panel-count {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--muted-soft);
}

.le-proto-page .timeline-contact-panel .page-path {
  margin: 0 0 10px;
}

.le-proto-page .timeline-contact-panel .business-header {
  margin-bottom: 0;
}

.le-proto-page .timeline-summary-panel .business-summary {
  margin-bottom: 0;
}

.le-proto-page .timeline-events-panel .timeline-rail {
  padding-left: 18px;
}

.le-proto-page .page-path,
.le-proto-page .summary-label,
.le-proto-page .business-image-edit,
.le-proto-page .timeline-now-label,
.le-proto-page .event-option-media,
.le-proto-page .ai-event-title {
  display: flex;
  align-items: center;
}

.le-proto-page .business-title-line {
  display: block;
  min-width: 0;
  margin-bottom: 2px;
}

.le-proto-page .page-path {
  gap: 6px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
}

.le-proto-page .page-path-link {
  color: #0969da;
  text-decoration: underline;
}

.le-proto-page .page-path-current {
  color: var(--text-soft);
}

.le-proto-page .business-header {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

/* ─── Business Profile Header — new grid layout ──────────────────────────── */

.le-proto-page .business-profile-header {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  padding-right: 20px;
  background: #ffffff;
  border-bottom: none;
  margin-bottom: 0;
  overflow: hidden;
}

/* Col 1 — photo */
.le-proto-page .bph-photo-col {
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
  background: #f0f2f5;
  border-right: 1px solid var(--border-soft);
  position: relative;
  width: 150px;
}

.le-proto-page .bph-photo-col .business-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.le-proto-page .bph-photo-col .business-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.le-proto-page .bph-photo-col .business-image-edit {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 10px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text-soft);
}

/* Col 2 — metadata */
.le-proto-page .bph-meta-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 0 14px;
}

.le-proto-page .bph-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-bottom: 6px;
  margin-bottom: 0;
}

.le-proto-page .bph-info-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  margin-top: 4px;
}

.le-proto-page .bph-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  color: var(--muted);
  line-height: 1.3;
}

.le-proto-page .bph-facts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.6;
}

.le-proto-page .bph-line {
  font-size: 12px;
  color: var(--text-soft);
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.6;
  text-decoration: none;
  display: inline;
}

.le-proto-page .bph-line + .bph-line::before {
  content: " · ";
  color: var(--muted-soft);
  white-space: pre;
}

.le-proto-page a.bph-line.bph-website {
  color: #0645ad;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.le-proto-page a.bph-line.bph-website:hover {
  color: #0550ae;
}

/* Col 3 — actions */
.le-proto-page .bph-actions-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 14px;
  align-items: flex-end;
}

.le-proto-page .bph-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-soft);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0 10px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.le-proto-page .bph-action-btn:hover {
  background: var(--surface-soft);
  border-color: #c1c7d0;
  color: var(--text);
  text-decoration: none;
}

.le-proto-page .bph-action-primary {
  color: #0969da;
  border-color: rgba(9, 105, 218, 0.28);
  background: rgba(9, 105, 218, 0.06);
  font-weight: 600;
}

.le-proto-page .bph-action-primary:hover {
  background: rgba(9, 105, 218, 0.1);
  border-color: rgba(9, 105, 218, 0.4);
  color: #0969da;
}

.le-proto-page .bph-action-placeholder {
  display: block;
}

.le-proto-page .business-header-main {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.le-proto-page .business-title-group {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.le-proto-page .business-header-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.le-proto-page .business-identity-block {
  min-width: 0;
}

.le-proto-page .business-header-bottom {
  display: grid;
  gap: 7px;
  padding-top: 3px;
  border-top: 1px solid var(--border-soft);
}

.le-proto-page .business-image-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.le-proto-page .business-image {
  width: 78px;
  height: 78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #eef0f3 0%, #f8f9fb 100%);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-weight: 700;
}

.le-proto-page .business-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.le-proto-page .business-image-edit {
  gap: 4px;
  font-size: 10px;
  color: #0969da;
  text-decoration: underline;
}

.le-proto-page .business-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .business-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .business-title-context {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
}

.le-proto-page .business-title-subline {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .business-title-context,
.le-proto-page .business-description,
.le-proto-page .summary-meta,
.le-proto-page .timeline-subtitle,
.le-proto-page .sentence-time,
.le-proto-page .status-text,
.le-proto-page .event-option-kind,
.le-proto-page .ai-event-subtitle,
.le-proto-page .ai-event-hint {
  color: var(--muted);
}

.le-proto-page .business-meta {
  display: grid;
  gap: 3px;
  margin-top: 1px;
}

.le-proto-page .business-meta-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px 14px;
  align-items: start;
  min-width: 0;
}

.le-proto-page .business-meta-item {
  display: block;
  min-width: 0;
  font-size: 11px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .business-meta-item-address,
.le-proto-page .business-meta-item-website {
  grid-column: 1 / -1;
}

.le-proto-page .business-meta-item-email {
  grid-column: span 8;
}

.le-proto-page .business-meta-item-record {
  grid-column: span 4;
  text-align: right;
}

.le-proto-page .business-meta-link {
  color: #0969da;
  text-decoration: none;
}

.le-proto-page .business-meta-link:hover {
  text-decoration: underline;
}

.le-proto-page .business-meta-item,
.le-proto-page .summary-value,
.le-proto-page .toolbar-item,
.le-proto-page .status-state,
.le-proto-page .contact-ref,
.le-proto-page .trace-ref,
.le-proto-page .trace-link,
.le-proto-page .timeline-gap-label,
.le-proto-page .timeline-now-label,
.le-proto-page .new-badge,
.le-proto-page .file-chip,
.le-proto-page .nav-user {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
}


.le-proto-page .business-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 5px;
  white-space: normal;
}

.le-proto-page .business-actions-secondary {
  justify-content: flex-start;
}

.le-proto-page .business-action-link {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #ffffff;
  font-size: 10px;
  color: var(--text-soft);
  text-decoration: none;
}

.le-proto-page .business-action-link:hover {
  background: var(--surface-soft);
  border-color: #c1c7d0;
  color: var(--text);
}

.le-proto-page .business-action-link.primary {
  color: #0969da;
  border-color: rgba(9, 105, 218, 0.28);
  background: rgba(9, 105, 218, 0.06);
  font-weight: 600;
}

.le-proto-page .business-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
  background: #f3f5f8;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 4px 0;
}

.le-proto-page .summary-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px 10px 8px;
  border-bottom: none;
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
}

.le-proto-page .summary-card:last-child {
  border-right: 0;
}

.le-proto-page .summary-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 3px;
}

.le-proto-page .summary-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .summary-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex: 0 0 auto;
  color: #0969da;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.12s ease, background 0.12s ease;
}

.le-proto-page .summary-link-icon:hover {
  color: #0550ae;
  background: rgba(9, 105, 218, 0.08);
}

.le-proto-page .summary-link-icon:focus-visible {
  outline: 2px solid rgba(9, 105, 218, 0.24);
  outline-offset: 1px;
}

.le-proto-page .summary-value {
  display: block;
  min-width: 0;
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .summary-meta {
  display: block;
  min-width: 0;
  margin-top: 3px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.le-proto-page .timeline-panel-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.le-proto-page .timeline-panel-head-meta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--muted-soft);
  font-weight: 500;
  white-space: nowrap;
}

.le-proto-page .timeline-panel-note {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.le-proto-page .toolbar-item,
.le-proto-page .timeline-subtitle {
  font-size: 11px;
}

.le-proto-page .timeline-subtitle {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.le-proto-page .toolbar-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid #166534;
  border-radius: 3px;
  background: #16a34a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.le-proto-page .toolbar-run-btn.is-enabled {
  border-color: #166534;
  background: #16a34a;
}

.le-proto-page .toolbar-run-btn.is-enabled:hover:not(:disabled) {
  border-color: #14532d;
  background: #15803d;
}

.le-proto-page .toolbar-run-btn.is-paused {
  border-color: #b45309;
  background: #f59e0b;
}

.le-proto-page .toolbar-run-btn.is-paused:hover:not(:disabled) {
  border-color: #92400e;
  background: #d97706;
}

.le-proto-page .toolbar-run-btn:disabled {
  opacity: 0.68;
  cursor: wait;
}

.le-proto-page .sentence-list {
  min-width: 0;
}

.le-proto-page .timeline-empty {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--muted);
  margin-bottom: 12px;
}

.le-proto-page .timeline-rail {
  position: relative;
  padding-left: 18px;
}

.le-proto-page .timeline-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.le-proto-page .timeline-cell-main,
.le-proto-page .timeline-cell-time {
  vertical-align: top;
  padding: 0;
  position: relative;
}

.le-proto-page .timeline-cell-span {
  vertical-align: top;
  padding: 0;
  position: relative;
}

.le-proto-page .timeline-cell-time {
  width: 132px;
}

/* ── Report-bracket overlay (no layout impact) ── */
.le-proto-page .timeline-cell-main.has-report-bracket-included::before,
.le-proto-page .timeline-cell-span.has-report-bracket-included::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #7c3aed;
  pointer-events: none;
  z-index: 0;
}

.le-proto-page .timeline-cell-main.has-report-bracket-report::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0;
  bottom: 50%;
  width: 2px;
  background: #7c3aed;
  pointer-events: none;
  z-index: 0;
}

.le-proto-page .timeline-cell-main.has-report-bracket-start.has-report-bracket-included::before,
.le-proto-page .timeline-cell-main.has-report-bracket-start.has-report-bracket-report::before {
  top: 5px;
}

.le-proto-page .timeline-cell-main.has-report-bracket-report::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  margin-top: -1px;
  width: 10px;
  height: 2px;
  background: #7c3aed;
  pointer-events: none;
  z-index: 0;
}

.le-proto-page .timeline-table-row.is-past .timeline-cell-main.has-report-bracket-included::before,
.le-proto-page .timeline-table-row.is-past .timeline-cell-main.has-report-bracket-report::before,
.le-proto-page .timeline-table-row.is-past .timeline-cell-main.has-report-bracket-report::after,
.le-proto-page .timeline-gap-table-row.is-past .timeline-cell-span.has-report-bracket-included::before,
.le-proto-page .timeline-report-output-row .timeline-cell-span.has-report-bracket-included::before {
  opacity: 0.5;
}

.le-proto-page .timeline-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  bottom: 7px;
  width: 1px;
  background: var(--border-soft);
}

.le-proto-page .sentence-row,
.le-proto-page .timeline-add-row {
  position: relative;
  align-items: start;
}

.le-proto-page .sentence-row {
  display: block;
  width: 100%;
  border: 0;
  padding: 5px;
  padding-left: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  line-height: 1.50;
  overflow: visible;
  appearance: none;
}

.le-proto-page .status-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1.75;
  padding-bottom: 5px;
}

.le-proto-page .sentence-row::before,
.le-proto-page .status-row::before {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 1;
}

.le-proto-page .sentence-row::before {
  left: -16px;
  top: 10px;
  width: 7px;
  height: 7px;
  background: #ffffff;
  border: 1px solid #9ca3af;
}

.le-proto-page .status-row::before {
  left: -13px;
  top: 11px;
  width: 3px;
  height: 3px;
  background: #c7ccd1;
}

.le-proto-page .sentence-row[data-upcoming="true"]::before {
  border-style: dashed;
  border-color: var(--border);
  background: transparent;
}

.le-proto-page .sentence-row[data-upcoming="true"] .sentence-text {
  color: var(--text-soft);
}

.le-proto-page .sentence-row[data-upcoming="true"] .inline-label {
  color: var(--text);
}

.le-proto-page .sentence-row[data-upcoming="true"] .direction-arrow {
  opacity: 0.72;
}

.le-proto-page .sentence-row[data-upcoming="true"] .contact-ref,
.le-proto-page .sentence-row[data-upcoming="true"] .trace-ref {
  opacity: 0.88;
}

.le-proto-page .sentence-row[data-upcoming="true"] .sentence-time {
  color: var(--muted);
  font-style: italic;
}


.le-proto-page .sentence-row[data-event-type="twilio-messaging-webhook"]::before,
.le-proto-page .sentence-row[data-event-type="google-sheets-sync"]::before {
  border-color: var(--yellow);
}

.le-proto-page .sentence-row[data-event-type="message-status-callback"]::before {
  border-color: #64748b;
}

.le-proto-page .sentence-row[data-event-type="routing-failure"]::before {
  border-color: var(--red);
}

.le-proto-page .sentence-row[data-event-type="report"]::before {
  display: none;
}

.le-proto-page .sentence-text {
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.le-proto-page .sentence-row[aria-pressed="true"] .sentence-text {
  background: #f6f8fa;
}

.le-proto-page .sentence-row:focus-visible {
  outline: none;
}

.le-proto-page .sentence-row:focus-visible .sentence-text {
  outline: 2px solid rgba(9, 105, 218, 0.28);
  outline-offset: 2px;
}

.le-proto-page .inline-label {
  font-weight: 700;
  margin-right: 8px;
}

.le-proto-page .direction-arrow {
  display: inline-block;
  width: 12px;
  margin-right: 4px;
  font-weight: 700;
}

.le-proto-page .direction-green {
  color: var(--green);
}

.le-proto-page .direction-yellow {
  color: var(--yellow);
}

.le-proto-page .direction-red {
  color: var(--red);
}

.le-proto-page .contact-ref,
.le-proto-page .trace-ref {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  margin-bottom: 5px;
  padding: 0 2px;
  font-size: 11px;
  color: var(--text-soft);
}

.le-proto-page .trace-ref {
  color: var(--muted);
}

.le-proto-page .trace-link {
  color: #0969da;
}

.le-proto-page .new-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 0 4px;
  border: 1px solid var(--new-border);
  background: var(--new-bg);
  color: var(--new-text);
  font-size: 11px;
}

.le-proto-page .sentence-time {
  padding-top: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.le-proto-page .sentence-time-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-style: normal;
}

.le-proto-page .status-row .sentence-time {
  visibility: hidden;
}

.le-proto-page .timeline-table-row-status .timeline-cell-time .sentence-time {
  visibility: hidden;
  display: block;
}

.le-proto-page .status-text {
  line-height: 1.75;
}

.le-proto-page .status-action {
  color: var(--muted);
}

.le-proto-page .file-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  margin-right: 6px;
  padding: 0 5px;
  background: var(--chip-bg);
  border-radius: 999px;
  font-size: 11px;
}

.le-proto-page .status-state {
  margin-left: 8px;
  font-size: 11px;
}

.le-proto-page .status-state-success {
  color: var(--success);
}

.le-proto-page .status-state-failed {
  color: var(--failed);
}

.le-proto-page .status-note {
  margin-left: 8px;
  font-size: 11px;
}

.le-proto-page .timeline-gap-row,
.le-proto-page .timeline-now-marker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.le-proto-page .timeline-gap-row {
  margin: 6px 0;
  position: relative;
  user-select: none;
}

.le-proto-page .timeline-gap-label,
.le-proto-page .timeline-now-label {
  font-size: 10px;
  white-space: nowrap;
}

.le-proto-page .timeline-gap-rule {
  flex: 1;
  height: 1px;
  background: var(--border-soft);
  opacity: 0.6;
}

.le-proto-page .timeline-gap-label {
  font-family: var(--font-mono);
  color: var(--muted-soft);
  flex: 0 0 auto;
}

.le-proto-page .timeline-now-marker {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center;
  column-gap: 10px;
  margin-top: 10px;
  margin-bottom: 8px;
  color: #5b9fd6;
  font-size: 11px;
  font-weight: 600;
}

.le-proto-page .timeline-now-label {
  color: #5b9fd6;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.le-proto-page .timeline-now-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #5b9fd6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  flex-shrink: 0;
  color: #5b9fd6;
}

.le-proto-page .timeline-now-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    #5b9fd6 0%,
    #5b9fd6 30%,
    #7dbde8 50%,
    #5b9fd6 70%,
    #5b9fd6 100%
  );
  background-size: 200% 100%;
  border: none;
  margin: 0;
  animation: pulse-rule 3.5s ease-in-out infinite;
}

@keyframes pulse-rule {
  0% {
    background-position: -200% 0;
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: 200% 0;
    opacity: 0.6;
  }
}

.le-proto-page .timeline-add-row {
  padding-top: 10px;
  padding-bottom: 6px;
}

.le-proto-page .dropdown {
  position: relative;
  width: 100%;
}

.le-proto-page .dropdown-button-group {
  display: flex;
  width: 100%;
}

.le-proto-page .dropdown-button,
.le-proto-page .dropdown-caret-button {
  height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #57606a;
  font-size: 11px;
  cursor: pointer;
}

.le-proto-page .dropdown-button:hover,
.le-proto-page .dropdown-caret-button:hover {
  background: #f6f8fa;
  color: #24292f;
}

.le-proto-page .dropdown-caret-button {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 3px 3px 0;
}

.le-proto-page .dropdown.open .dropdown-button,
.le-proto-page .dropdown.open .dropdown-caret-button {
  background: #f6f8fa;
  color: #57606a;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Add event row: full-width dashed button override */
.le-proto-page .timeline-add-dropdown .dropdown-button {
  width: 100%;
  min-height: 40px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  border-right: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.le-proto-page .timeline-add-dropdown .dropdown-caret-button {
  display: none;
}

.le-proto-page .timeline-add-dropdown .dropdown-button:hover {
  background: #f6f8fa;
  color: var(--text-soft);
  border-color: #9ca3af;
}

.le-proto-page .timeline-add-dropdown.open .dropdown-button {
  border-style: solid;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #f6f8fa;
  color: var(--text-soft);
}

.le-proto-page .dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.le-proto-page .timeline-add-dropdown.open-up .dropdown-content {
  top: auto;
  bottom: 100%;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.08);
}

.le-proto-page .timeline-add-dropdown.open-up.open .dropdown-button {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.le-proto-page .event-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid #ececec;
  text-align: left;
  background: #ffffff;
  color: #24292f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
}

.le-proto-page .event-option:last-child {
  border-bottom: 0;
}

.le-proto-page .event-option:hover {
  background: #f6f8fa;
  font-weight: 700;
}

.le-proto-page .event-option:hover span {
  font-weight: 400;
}

.le-proto-page .event-option-media {
  min-width: 0;
  gap: 6px;
}

.le-proto-page .event-option-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.le-proto-page .event-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le-proto-page .event-option-kind {
  font-size: 10px;
}

.le-proto-page .ai-chat-trigger {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1f2937;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.le-proto-page .ai-chat-trigger:hover {
  background: #1f2937;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
}

.le-proto-page .ai-event-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.le-proto-page .ai-event-shell.is-open {
  pointer-events: auto;
}

.le-proto-page .ai-event-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.14);
  padding: 0;
  opacity: 0;
  transition: opacity 160ms ease;
}

.le-proto-page .ai-event-shell.is-open .ai-event-backdrop {
  opacity: 1;
}

.le-proto-page .ai-event-panel {
  position: absolute;
  left: 50%;
  bottom: 92px;
  width: min(420px, calc(100vw - 48px));
  max-height: min(68vh, 560px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.le-proto-page .ai-event-shell.is-open .ai-event-panel {
  opacity: 1;
  transform: translate(-50%, 0);
}

.le-proto-page .ai-event-header,
.le-proto-page .ai-event-form {
  padding: 14px 16px;
}

.le-proto-page .ai-event-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.le-proto-page .ai-event-title {
  gap: 7px;
  margin: 0;
  font-size: 13px;
}

.le-proto-page .ai-event-subtitle {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.4;
}

.le-proto-page .ai-event-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: #ffffff;
}

.le-proto-page .ai-event-messages {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  background: #fbfcfe;
}

.le-proto-page .ai-event-message {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}

.le-proto-page .ai-event-message-assistant {
  margin-right: 30px;
  background: #f8fafc;
}

.le-proto-page .ai-event-message-user {
  margin-left: 30px;
  background: #eff6ff;
}

.le-proto-page .ai-event-message-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.le-proto-page .ai-event-message-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.le-proto-page .ai-event-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.le-proto-page .ai-event-input {
  min-height: 88px;
  resize: none;
}

.le-proto-page .ai-event-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.le-proto-page .ai-event-hint {
  font-size: 10px;
}

.le-proto-page .ai-event-submit {
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #111827;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .le-proto-page .business-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .le-proto-page .nav-context {
    display: none;
  }
}

@media (max-width: 768px) {
  .le-proto-page .container {
    flex-direction: column;
  }

  .le-proto-page .sidebar {
    width: 100% !important;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .le-proto-page .resizer {
    display: none;
  }

  .le-proto-page .timeline-main {
    padding: 18px 18px 104px;
  }

  .le-proto-page .timeline-shell-panel {
    border-radius: 4px;
  }

  .le-proto-page .timeline-contact-panel,
  .le-proto-page .timeline-events-panel {
    padding: 0;
  }

  .le-proto-page .timeline-panel-body {
    padding: 9px 10px 10px;
  }

  .le-proto-page .timeline-panel-head {
    padding: 7px 10px;
  }

  .le-proto-page .timeline-events-panel .timeline-rail {
    padding-left: 18px;
  }

  .le-proto-page .business-actions {
    justify-content: flex-start;
  }

  .le-proto-page .business-header-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .le-proto-page .business-header,
  .le-proto-page .timeline-add-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .le-proto-page .business-header-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .le-proto-page .timeline-panel-head-actions {
    margin-left: auto;
    width: auto;
    justify-content: flex-end;
  }

  .le-proto-page .timeline-cell-time {
    width: 104px;
  }

  .le-proto-page .business-meta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .le-proto-page .business-meta-item-email,
  .le-proto-page .business-meta-item-record,
  .le-proto-page .business-meta-item-address,
  .le-proto-page .business-meta-item-website {
    grid-column: span 1;
    text-align: left;
  }

  .le-proto-page .ai-chat-trigger {
    right: 14px;
    bottom: 14px;
  }

  .le-proto-page .ai-event-panel {
    left: 50%;
    bottom: 76px;
    width: calc(100vw - 24px);
  }

  .le-proto-page .ai-event-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Event config modal ────────────────────────────────────────────────────── */

.le-proto-page .event-config-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.le-proto-page .event-config-modal {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  margin: 0;
  padding: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  width: min(480px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-height: 0;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  box-sizing: border-box;
}

.le-proto-page .event-config-modal::backdrop {
  background: transparent;
}

.le-proto-page .event-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-soft, #e8eaed);
  flex-shrink: 0;
}

.le-proto-page .event-config-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.le-proto-page .event-config-heading {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.le-proto-page .event-config-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.le-proto-page .event-config-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1f2125);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-proto-page .event-config-subtitle {
  font-size: 11px;
  color: var(--text-soft, #57606a);
  margin-top: 0;
  white-space: nowrap;
}

.le-proto-page .event-config-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft, #57606a);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.le-proto-page .event-config-close:hover {
  background: var(--surface-soft, #f8f9fb);
  color: var(--text, #1f2125);
}

.le-proto-page .event-config-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  overflow-y: auto;
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100vh - 120px);
}

.le-proto-page .event-config-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}

.le-proto-page .event-config-tab-btn {
  height: 30px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text-soft, #57606a);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.le-proto-page .event-config-tab-btn:hover {
  background: var(--surface-soft, #f8f9fb);
  color: var(--text, #1f2125);
}

.le-proto-page .event-config-tab-btn.is-active {
  border-color: #0969da;
  color: #0969da;
  background: #f0f6ff;
}

.le-proto-page .event-config-live-pane,
.le-proto-page .event-config-test-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.le-proto-page .event-config-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.le-proto-page .event-config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.le-proto-page .event-config-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #1f2125);
}

.le-proto-page .event-config-label-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
}

.le-proto-page .event-config-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}

.le-proto-page .event-config-checkbox-row span {
  min-width: 0;
}

.le-proto-page .event-config-checkbox {
  margin: 0;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  accent-color: #0969da;
  vertical-align: middle;
}

.le-proto-page .event-config-input {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text, #1f2125);
  box-sizing: border-box;
  outline: none;
  line-height: 1.2;
  transition: border-color 0.15s;
}

.le-proto-page select.event-config-input {
  height: 32px;
  line-height: 30px;
}

.le-proto-page .event-config-input:focus {
  border-color: #0969da;
  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.15);
}

.le-proto-page .event-config-input-sm {
  max-width: 90px;
}

.le-proto-page .event-config-textarea {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text, #1f2125);
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.15s;
  font-family: inherit;
}

.le-proto-page .event-config-textarea:focus {
  border-color: #0969da;
  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.15);
}

#ecf-sms-in-agent {
  background: #f3f0fb;
  border-color: #c4b5f4;
}

#ecf-sms-in-agent:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.le-proto-page .event-config-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft, #e8eaed);
  margin-top: 4px;
  flex-shrink: 0;
}

.le-proto-page .event-config-cancel {
  min-height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text, #1f2125);
  cursor: pointer;
}

.le-proto-page .event-config-cancel:hover {
  background: var(--surface-soft, #f8f9fb);
}

.le-proto-page .event-config-submit {
  min-height: 32px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  background: #2da44e;
  color: #fff;
  cursor: pointer;
}

.le-proto-page .event-config-submit:hover {
  background: #2c974b;
}

/* ── Test panel ─────────────────────────────────────────────────────────────── */

.le-proto-page .event-config-test-panel,
.le-proto-page .event-config-samples-panel {
  border-top: 1px solid var(--border, #d0d7de);
  padding-top: 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.le-proto-page .event-config-test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.le-proto-page .event-config-test-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft, #57606a);
}

.le-proto-page .event-config-test-btn {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text, #1f2125);
  cursor: pointer;
}

.le-proto-page .event-config-test-btn:hover:not(:disabled) {
  background: var(--surface-soft, #f8f9fb);
}

.le-proto-page .event-config-test-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.le-proto-page .event-config-test-result {
  font-size: 11px;
  border-radius: 5px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.le-proto-page .event-config-test-result--loading {
  background: #f0f6ff;
  color: #0969da;
}

.le-proto-page .event-config-test-result--success {
  background: #dafbe1;
  color: #116329;
}

.le-proto-page .event-config-test-result--error {
  background: #ffebe9;
  color: #cf222e;
}

.le-proto-page .event-config-test-detail {
  font-size: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  opacity: 0.8;
  max-height: 80px;
  overflow-y: auto;
}

.le-proto-page .event-config-test-intro {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-soft, #57606a);
}

.le-proto-page .event-config-test-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.le-proto-page .event-config-test-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.le-proto-page .event-config-practice-log {
  border: 1px solid var(--border, #d0d7de);
  border-radius: 4px;
  background: #f8f9fb;
  padding: 8px;
  min-height: 180px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.le-proto-page .event-config-practice-empty {
  margin: 0;
  font-size: 11px;
  color: var(--text-soft, #57606a);
}

.le-proto-page .event-config-practice-turn {
  border: 1px solid var(--border-soft, #e8eaed);
  border-radius: 4px;
  padding: 6px 8px;
  background: #ffffff;
}

.le-proto-page .event-config-practice-turn--contact {
  border-color: #c4d7f5;
  background: #f0f6ff;
}

.le-proto-page .event-config-practice-turn--agent {
  border-color: #d8dee4;
  background: #ffffff;
}

.le-proto-page .event-config-practice-role {
  display: inline-block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft, #57606a);
}

.le-proto-page .event-config-practice-turn p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text, #1f2125);
  white-space: pre-wrap;
}

.le-proto-page .event-config-test-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.le-proto-page .event-config-test-composer .event-config-submit {
  align-self: flex-end;
}

/* ── Samples panel ──────────────────────────────────────────────────────────── */

.le-proto-page .event-config-samples-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.le-proto-page .event-config-samples-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  width: 100%;
  min-width: 0;
  justify-content: flex-end;
}

.le-proto-page .event-config-samples-name-input {
  width: auto;
  flex: 1 1 200px;
  max-width: 280px;
  min-width: 0;
}

@media (max-width: 640px) {
  .le-proto-page .event-config-test-settings {
    grid-template-columns: 1fr;
  }

  .le-proto-page .event-config-samples-row {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .le-proto-page .event-config-samples-actions {
    margin-left: 0;
    width: 100%;
  }

  .le-proto-page .event-config-samples-name-input {
    flex: 1 1 auto;
    max-width: none;
  }
}

.le-proto-page .event-config-samples-save-btn {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text, #1f2125);
  cursor: pointer;
  white-space: nowrap;
}

.le-proto-page .event-config-samples-save-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.le-proto-page .event-config-samples-toggle {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
  background: var(--surface, #fff);
  color: var(--text, #1f2125);
  cursor: pointer;
}

.le-proto-page .event-config-samples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.le-proto-page .event-config-samples-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.le-proto-page .event-config-samples-load {
  flex: 1;
  text-align: left;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 4px;
  background: var(--surface-soft, #f8f9fb);
  color: var(--text, #1f2125);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le-proto-page .event-config-samples-load:hover {
  background: #ddf4ff;
  border-color: #54aeff;
}

.le-proto-page .event-config-samples-delete {
  padding: 3px 7px;
  font-size: 12px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft, #57606a);
  cursor: pointer;
  line-height: 1;
}

.le-proto-page .event-config-samples-delete:hover {
  background: #ffebe9;
  color: #cf222e;
  border-color: #ff8182;
}

.le-proto-page .event-config-samples-empty {
  font-size: 11px;
  color: var(--text-soft, #57606a);
  margin: 0;
}

/* ── Webhook URL display ─────────────────────────────────────────────────────── */

.le-proto-page .event-config-webhook-url {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: #f3f0fb;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 5px;
}

.le-proto-page .event-config-webhook-url code {
  display: block;
  font-size: 11px;
  font-family: monospace;
  color: #000000;
  font-weight: 600;
  background: #eaeef2;
  padding: 4px 8px;
  border-radius: 4px;
}

.le-proto-page .event-config-webhook-hint {
  font-size: 10px;
  color: var(--text-soft, #57606a);
  line-height: 1.4;
}

/* ─── Contact panel cleanup ──────────────────────────────────────────────── */
.le-proto-page .timeline-contact-panel {
  overflow: hidden;
}

/* ─── bph-actions-col: text link list ───────────────────────────────────── */
.le-proto-page .bph-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.le-proto-page .bph-text-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #0645ad;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.6;
}

.le-proto-page .bph-text-link:hover {
  text-decoration: underline;
  color: #0645ad;
}

.le-proto-page .bph-text-link-primary {
  font-weight: 600;
}

/* ─── Summary strip ─────────────────────────────────────────────────────── */
.le-proto-page .timeline-summary-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: visible;
  background: #ffffff;
  margin-top: 0;
}

.le-proto-page .summary-strip-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e63c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 0 0 2px #ffffff;
}

/* Only row 1 is in flow and fully visible */
.le-proto-page .summary-row ~ .summary-row {
  display: none;
}

.le-proto-page .summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  border-top: none;
  font-size: 12px;
  min-height: 0;
}

.le-proto-page .summary-row:nth-child(even) {
}

.le-proto-page .summary-row:first-child {
  border-top: none;
}

.le-proto-page .summary-row-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #3b1a00;
  background: #e8b87a;
  border: 1px solid #b07840;
  border-radius: 3px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.le-proto-page .summary-row-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le-proto-page .summary-row-meta {
  font-size: 11px;
  color: var(--muted-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Page path inside bph-meta-col ─────────────────────────────────────── */
.le-proto-page .bph-meta-col .page-path {
  margin: 0 0 4px;
  font-size: 10px;
  flex-wrap: wrap;
}

/* ─── Generate Report info box ───────────────────────────────────────────── */
.le-proto-page .event-config-info-box {
  background: #f8f9fb;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
}

.le-proto-page .event-config-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* ─── Report output in timeline ──────────────────────────────────────────── */
.le-proto-page .timeline-report-output {
  margin-left: 28px;
  padding: 6px 10px;
  background: #f8f9fb;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.55;
  font-family: inherit;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ivr-preset-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.ivr-preset-header {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ivr-preset-header .ivr-preset-field {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}

.ivr-preset-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ivr-preset-field label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ivr-preset-field input[type="text"],
.ivr-preset-field input[type="tel"],
.ivr-preset-field input[type="number"],
.ivr-preset-field select,
.ivr-preset-field textarea {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
}

.ivr-preset-field textarea {
  resize: vertical;
  line-height: 1.4;
  min-height: 50px;
}

.ivr-hint {
  font-size: 11px;
  color: var(--muted);
}

.ivr-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 900px) {
  .ivr-preset-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ivr-preset-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

.ivr-preset-section-header strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

.ivr-preset-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ivr-preset-option {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ivr-preset-option-top {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ivr-preset-field-digit {
  width: 70px;
  flex-shrink: 0;
}

.ivr-preset-field-grow {
  flex: 1;
}

.ivr-preset-option-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(180, 180, 180, 0.4);
  border-radius: 2px;
  background: rgba(230, 230, 230, 0.18);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ivr-preset-option-remove:hover {
  border-color: rgba(224, 47, 68, 0.5);
  background: rgba(224, 47, 68, 0.1);
  color: #f4a8b4;
}

.ivr-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(180, 180, 180, 0.4);
  border-radius: 2px;
  background: rgba(230, 230, 230, 0.18);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ivr-preset-btn:hover:not(:disabled) {
  border-color: rgba(180, 180, 180, 0.7);
  background: rgba(230, 230, 230, 0.28);
}

.ivr-preset-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

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

.ivr-preset-btn.is-primary {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.ivr-preset-btn.is-primary:hover:not(:disabled) {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.ivr-preset-btn.is-danger {
  border-color: rgba(224, 47, 68, 0.28);
  background: rgba(224, 47, 68, 0.1);
  color: #f4a8b4;
}

.ivr-preset-btn.is-danger:hover:not(:disabled) {
  border-color: rgba(224, 47, 68, 0.5);
  background: rgba(224, 47, 68, 0.16);
  color: #ffb3bf;
}

.ivr-preset-btn.is-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.ivr-preset-btn.is-ghost:hover:not(:disabled) {
  border-color: rgba(180, 180, 180, 0.3);
  background: rgba(230, 230, 230, 0.12);
  color: var(--text);
}

.ivr-preset-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

.ivr-preset-note {
  font-size: 11px;
  color: var(--muted);
  padding: 6px 10px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 2px;
}

/* Active-IVR chip rendered on the Lead Engine timeline header. */
.ivr-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(176, 152, 58, 0.12);
  border: 1px solid rgba(176, 152, 58, 0.5);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.ivr-active-chip:hover {
  background: rgba(176, 152, 58, 0.2);
}

/* ── Test playback panel (local-only IVR preview) ──────────────────── */
.ivr-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  padding: 10px;
  margin-top: 4px;
}

.ivr-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ivr-preview-header strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

.ivr-preview-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(230, 230, 230, 0.06);
}

.ivr-preview-phase {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(180, 180, 180, 0.5);
  flex-shrink: 0;
}

.ivr-preview-phase--greeting,
.ivr-preview-phase--message {
  background: rgba(176, 152, 58, 0.9);
  box-shadow: 0 0 6px rgba(176, 152, 58, 0.45);
  animation: ivr-preview-pulse 1.2s ease-in-out infinite;
}

.ivr-preview-phase--awaiting {
  background: rgba(34, 197, 94, 0.9);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
  animation: ivr-preview-pulse 1.2s ease-in-out infinite;
}

.ivr-preview-phase--finished {
  background: rgba(224, 47, 68, 0.7);
}

@keyframes ivr-preview-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.ivr-preview-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}

.ivr-preview-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 80px));
  gap: 6px;
}

.ivr-preview-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 4px;
  border: 1px solid rgba(180, 180, 180, 0.4);
  border-radius: 2px;
  background: rgba(230, 230, 230, 0.18);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ivr-preview-key:hover:not(:disabled) {
  border-color: rgba(180, 180, 180, 0.7);
  background: rgba(230, 230, 230, 0.3);
}

.ivr-preview-key:active:not(:disabled) {
  background: rgba(230, 230, 230, 0.45);
}

.ivr-preview-key:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ivr-preview-key.has-option {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.ivr-preview-key.has-option:hover:not(:disabled) {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.16);
}

.ivr-preview-key-digit {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.ivr-preview-key-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ivr-preview-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
  flex: 1;
}

.ivr-preview-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
}

.ivr-preview-display-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ivr-preview-display-value {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--text);
}
/* ── LeadEnginePage.css ── */
/* Page-level layout. Inner elements reuse datagrid-note-* classes from DataGrid.css */

.le-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44px); /* viewport minus AppHeader (44px) */
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  gap: 0;
  background: #141414;
  color: #cccccc;
  line-height: 1.5;
  overflow: hidden;
}

.le-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #2a2a2a;
  background: #1a1a1a;
  flex-shrink: 0;
}
.le-page-header-copy { flex: 1; min-width: 0; }
.le-page-header-copy h2 { font-size: 15px; font-weight: 600; color: #e8e6e3; margin: 0; }
.le-page-header-copy p { font-size: 11.5px; color: #888; margin: 2px 0 0; }
.le-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.le-page-header-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}
.le-page-header-chip {
  font-size: 12px;
  padding: 0 6px;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.22);
  border: 1px solid #5f5f5f;
  color: #cfcfcf;
  white-space: nowrap;
  height: 20px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  line-height: 1;
}
.le-page-header-chip.is-highlight {
  background: rgba(174, 147, 79, 0.22);
  border-color: #8d7740;
  color: #ead9a3;
}

.le-back-link {
  font-size: 13px;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}
.le-back-link:hover { color: var(--link-hover); text-decoration: underline; }

.le-page-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--le-sidebar-w, 300px) minmax(0, 1fr);
  background: #141414;
  overflow: hidden;
}

/* Sidebar resize handle */
.le-sidebar-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
  touch-action: none;
}

.le-sidebar-resizer:hover,
.le-sidebar-resizer.is-dragging {
  background: rgba(255, 255, 255, 0.12);
}

.le-page-sidebar {
  position: relative; /* needed for absolute resizer */
  min-height: 0;
  overflow-y: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid #2c2c2c;
  background: #141414;
  /* remove transition here — smooth drag handles itself */
}

/* Prevent text selection during resize */
.le-page.is-resizing {
  user-select: none;
  cursor: col-resize;
}
.le-page.is-resizing * {
  pointer-events: none;
}
.le-page.is-resizing .le-sidebar-resizer {
  pointer-events: auto;
}

@media (max-width: 768px) {
  .le-sidebar-resizer { display: none; }
}

.le-page-main {
  min-width: 0;
  min-height: 0;
  background: #131313;
  overflow-y: auto;
  overscroll-behavior-y: none;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.le-page-main::-webkit-scrollbar {
  width: 8px;
}

.le-page-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.le-page-main::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.le-sidebar-chip-list {
  gap: 6px;
}

.le-sidebar-chip {
  min-height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  font-size: 12px;
}

.le-sidebar-chip.is-positive {
  color: #9de0ba;
  border-color: rgba(97, 188, 129, 0.45);
  background: rgba(62, 125, 82, 0.22);
}

.le-sidebar-chip.is-warning {
  color: #f2c38f;
  border-color: rgba(225, 153, 86, 0.45);
  background: rgba(122, 74, 32, 0.24);
}

/* ── Toast ── */

.le-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.le-toast {
  pointer-events: auto;
  padding: 8px 14px;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 360px;
  background: #252525;
  color: #cccccc;
  border: 1px solid #5a5a5a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.le-toast.is-success { border-color: #3fb950; color: #3fb950; }
.le-toast.is-error { border-color: #e05050; color: #e05050; }
.le-toast.is-warning { border-color: #dca030; color: #dca030; }
.le-toast.is-info { border-color: #58a6ff; color: #58a6ff; }

/* ── Loading / empty ── */

.le-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #666;
  font-size: 13px;
}

.le-page-body-picker-placeholder {
  opacity: 0.92;
}

.le-picker-shell-card {
  position: relative;
}

.le-picker-shell-title {
  font-size: 13px;
  color: #8f8f8f;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.le-picker-shell-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.le-picker-shell-line {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(67, 67, 67, 0.72) 0%, rgba(84, 84, 84, 0.38) 100%);
}

.le-picker-shell-line.is-lg { width: 86%; }
.le-picker-shell-line.is-md { width: 64%; }
.le-picker-shell-line.is-sm { width: 48%; }
.le-picker-shell-line.is-row { height: 8px; width: 100%; }

/* ── Contact switcher link in header ── */

.le-contact-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: var(--link);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
  padding: 0;
}
.le-contact-switcher:hover { color: var(--link-hover); text-decoration: underline; }

/* ── Sidebar: flat list style (replaces card boxes) ── */

/* Remove box styling from data cards; keep listing card intact */
.le-page-sidebar .datagrid-note-sidebar-card:not(.datagrid-note-sidebar-card-listing) {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
  gap: 5px;
  border-top: 1px solid #222;
}

.le-page-sidebar .datagrid-note-sidebar-card-listing {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 14px;
}

.le-page-sidebar .datagrid-note-listing-primary h3 {
  font-size: 14px;
}

.le-page-sidebar .datagrid-note-listing-address {
  font-size: 13px;
}

.le-page-sidebar .datagrid-note-sidebar-section-title {
  font-size: 13px;
}

/* Metrics: 2-col grid → single-col list rows */
.le-page-sidebar .datagrid-note-sidebar-metrics {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.le-page-sidebar .datagrid-note-sidebar-metric {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* Flip order: label left, value right */
.le-page-sidebar .datagrid-note-sidebar-metric strong {
  font-size: 13px;
  color: #dddddd;
  font-weight: 500;
  order: 2;
}
.le-page-sidebar .datagrid-note-sidebar-metric span {
  font-size: 13px;
  color: #888888;
  text-transform: none;
  letter-spacing: 0;
  order: 1;
}

/* Fields: stacked → horizontal rows */
.le-page-sidebar .datagrid-note-sidebar-fields {
  gap: 0;
}

.le-page-sidebar .datagrid-note-sidebar-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

.le-page-sidebar .datagrid-note-sidebar-field > span {
  font-size: 13px;
  color: #888888;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  flex-shrink: 0;
}

.le-page-sidebar .datagrid-note-sidebar-field span {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.le-page-sidebar .datagrid-note-sidebar-field strong {
  font-size: 13px;
  font-weight: 400;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le-page-sidebar .datagrid-note-mono-token {
  font-family: inherit;
}

.le-page .le-reply-mode-status,
.le-note-modal-skin .le-reply-mode-status {
  font-weight: 600;
  transition: color 0.14s ease;
}

.le-page .le-reply-mode-status.is-off,
.le-note-modal-skin .le-reply-mode-status.is-off {
  color: #8a8a8a;
}

.le-page .le-reply-mode-status.is-auto-draft,
.le-note-modal-skin .le-reply-mode-status.is-auto-draft {
  color: #d6b35d;
}

.le-page .le-reply-mode-status.is-auto,
.le-note-modal-skin .le-reply-mode-status.is-auto {
  color: #67c487;
}

.le-page .le-reply-mode-status.is-custom,
.le-note-modal-skin .le-reply-mode-status.is-custom {
  color: #66b6ff;
}

.le-page .datagrid-note-timeline-insert-form,
.le-note-modal-skin .datagrid-note-timeline-insert-form {
  width: min(100%, 560px);
  max-width: 560px;
}

.le-page .datagrid-v2-future-header,
.le-note-modal-skin .datagrid-v2-future-header {
  margin-bottom: 10px;
}

/* Signals: chips → plain vertical list */
.le-page-sidebar .le-sidebar-chip-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.le-page-sidebar .le-sidebar-chip {
  border: none;
  border-radius: 0;
  background: none;
  padding: 2px 0;
  font-size: 13px;
  min-height: auto;
}

.le-page-sidebar .le-sidebar-chip.is-positive {
  background: none;
  border: none;
}

.le-page-sidebar .le-sidebar-chip.is-warning {
  background: none;
  border: none;
}

/* InfoPopover inside sidebar: keep panel within sidebar bounds */
.le-page-sidebar .info-popover {
  margin-left: 4px;
}

.le-page-sidebar .info-popover-panel {
  left: 0;
  right: auto;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  width: max-content;
}

@media (max-width: 768px) {
  .le-page-body {
    grid-template-columns: 1fr;
  }
  .le-page-sidebar {
    display: none;
  }
}

/* ── Contact Settings panel cleanup for Lead Engine (page and modal) ── */
.le-page .datagrid-v2-config-panel.is-contact-settings,
.le-note-modal-skin .datagrid-v2-config-panel.is-contact-settings {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 64px;
  margin: 0 auto;
  gap: 40px;
  max-width: 800px;
  width: 100%;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-panel-intro,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-panel-intro {
  padding: 0;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-automation-mode,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-pause-triggers,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-automation-mode,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-pause-triggers,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-pause-triggers,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-pause-triggers,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-pause-triggers {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group {
  gap: 12px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-title,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-title {
  margin: 0;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context {
  padding-top: 16px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-desc,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-desc {
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style .datagrid-v2-config-group-desc,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context .datagrid-v2-config-group-desc,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style .datagrid-v2-config-group-desc,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context .datagrid-v2-config-group-desc {
  padding-bottom: 16px;
  margin-bottom: 4px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-subsection,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-row,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-row,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-pills,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-checks,
.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-note,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-subsection,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-row,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-row,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-pills,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-checks,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-note {
  margin: 0;
  padding: 0;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-subsection,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-subsection {
  gap: 16px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-row,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-row {
  gap: 6px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-radio-group,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-radio-group {
  margin-left: -8px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-radio.is-selected,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-radio.is-selected {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-row,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-row {
  gap: 6px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-option,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-option {
  width: auto;
  max-width: 100%;
  padding: 2px 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-option.is-selected,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-provider-option.is-selected {
  background: transparent;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-coming-soon,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-coming-soon {
  margin-left: auto;
  background: transparent;
  padding: 0;
  color: #7d7d7d;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-pills,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-pills {
  gap: 6px;
}

.le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-pill,
.le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-pill {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 480px) {
  .le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-panel-intro,
  .le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-panel-intro,
  .le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-automation-mode,
  .le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-pause-triggers,
  .le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style,
  .le-page .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context,
  .le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-automation-mode,
  .le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-pause-triggers,
  .le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-ai-reply-style,
  .le-note-modal-skin .datagrid-note-main .datagrid-v2-config-panel.is-contact-settings .datagrid-v2-config-group-timeline-context {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* Toolbar */
.le-page .datagrid-note-main-pro-row,
.le-note-modal-skin .datagrid-note-main-pro-row {
  border-bottom: none;
}

/* ── Workspace Shell overrides for Lead Engine ── */
.le-page .datagrid-note-action-workspace-shell {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.le-page .datagrid-note-action-workspace-shell.is-config-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.le-page .datagrid-note-action-workspace-header {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  padding: 20px 0 14px;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

.le-page .datagrid-note-action-workspace-shell.is-config-page .datagrid-note-action-workspace-header {
  width: 100%;
  max-width: 800px;
  padding: 20px 0 14px;
}

.le-page .datagrid-note-action-workspace-title {
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 600;
}

.le-page .datagrid-note-action-workspace-title,
.le-note-modal-skin .datagrid-note-action-workspace-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.le-page .datagrid-note-action-workspace-copy p {
  color: #888888;
  font-size: 13px;
  margin-top: 4px;
}

/* Modal specific (DataGrid context) overrides */
.le-note-modal-skin .datagrid-note-action-workspace-shell {
  padding: 0;
}

.le-note-modal-skin .datagrid-note-action-workspace-shell.is-config-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.le-note-modal-skin .datagrid-note-action-workspace-header {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  padding: 20px 0 14px;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

.le-page .datagrid-note-action-workspace-copy,
.le-note-modal-skin .datagrid-note-action-workspace-copy {
  padding-left: 1px;
}

.le-page .datagrid-note-action-workspace-nav.is-secondary,
.le-note-modal-skin .datagrid-note-action-workspace-nav.is-secondary {
  margin-right: -4px;
  align-self: start;
}

.le-note-modal-skin .datagrid-note-action-workspace-shell.is-config-page .datagrid-note-action-workspace-header {
  width: 100%;
  max-width: 800px;
  padding: 20px 0 14px;
}

.le-note-modal-skin .datagrid-note-action-workspace-title {
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 600;
}

.le-note-modal-skin .datagrid-note-action-workspace-copy p {
  color: #888888;
  font-size: 13px;
  margin-top: 4px;
}

/* Config panels constraint */
.le-page .datagrid-v2-config-panel.is-timeline-config,
.le-page .datagrid-v2-config-panel.is-contact-settings,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config,
.le-note-modal-skin .datagrid-v2-config-panel.is-contact-settings {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  max-width: 800px;
  margin: 18px auto 0;
  width: 100%;
}

.le-page .datagrid-v2-config-panel.is-contact-settings,
.le-note-modal-skin .datagrid-v2-config-panel.is-contact-settings {
  margin-top: 16px;
}

.le-page .datagrid-note-action-workspace-body,
.le-note-modal-skin .datagrid-note-action-workspace-body {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.le-page .datagrid-note-action-workspace-body > .datagrid-note-action-hub,
.le-note-modal-skin .datagrid-note-action-workspace-body > .datagrid-note-action-hub {
  margin-top: 16px;
}

/* Top gap between header separator and action detail content */
.le-page .datagrid-note-action-workspace-body > .datagrid-note-action-detail-toolbar,
.le-note-modal-skin .datagrid-note-action-workspace-body > .datagrid-note-action-detail-toolbar {
  margin-top: 20px;
}

/* When there is no toolbar (composer actions), the body is the first child */
.le-page .datagrid-note-action-workspace-body > .datagrid-note-action-detail-body:first-child,
.le-note-modal-skin .datagrid-note-action-workspace-body > .datagrid-note-action-detail-body:first-child {
  margin-top: 20px;
}

/* Inline email campaign wrapper */
.le-page .datagrid-note-action-workspace-body > .le-action-inline-wrap,
.le-note-modal-skin .datagrid-note-action-workspace-body > .le-action-inline-wrap {
  margin-top: 20px;
  width: 100%;
}

/* Button row in action detail forms */
.le-action-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Action detail body — card container ───────────────────────────────── */
.le-page .datagrid-note-action-detail-body,
.le-note-modal-skin .datagrid-note-action-detail-body {
  background: #1a1a1a;
  border: 1px solid #252525;
  border-radius: 3px;
  overflow: hidden;
}

/* ── Config-panel normalization inside action detail body ────────────────
   Makes email_campaign, report, and any other config-panel-based action
   content look consistent with the twilio composer section style.
   ─────────────────────────────────────────────────────────────────────── */
.le-page .datagrid-note-action-detail-body .datagrid-v2-config-panel,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px;
  gap: 12px;
  margin: 0;
  max-width: none;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-group,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-group {
  background: #141414;
  border: 1px solid #252525;
  border-radius: 3px;
  padding: 10px 12px;
  gap: 10px;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-group-title,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-group-title {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-panel-header-main,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-panel-header-main {
  font-size: 13px;
  font-weight: 600;
  color: #d0d0d0;
  text-transform: none;
  letter-spacing: 0;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-group-desc,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-group-desc {
  font-size: 13px;
  color: #777;
  line-height: 1.45;
  margin: 0;
  padding: 0;
  border: none;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-row,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-row > label,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-row > label {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  margin-bottom: 0;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-input,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-input {
  height: 28px;
  border-radius: 3px;
  background: #1e1e1e;
  border-color: #333;
  font-size: 13px;
  padding: 0 10px;
}

.le-page .datagrid-note-action-detail-body textarea.datagrid-v2-config-input,
.le-note-modal-skin .datagrid-note-action-detail-body textarea.datagrid-v2-config-input {
  height: auto;
  padding: 8px 10px;
}

.le-page .datagrid-note-action-detail-body .datagrid-v2-config-note,
.le-note-modal-skin .datagrid-note-action-detail-body .datagrid-v2-config-note {
  font-size: 12px;
  color: #666;
  line-height: 1.45;
  margin: 0;
}

/* ── IVR preset editor normalization inside action detail body ────────── */
.le-page .datagrid-note-action-detail-body .ivr-preset-editor,
.le-note-modal-skin .datagrid-note-action-detail-body .ivr-preset-editor {
  padding: 14px 16px;
  gap: 12px;
}

.le-page .datagrid-note-action-detail-body .ivr-preset-field input,
.le-page .datagrid-note-action-detail-body .ivr-preset-field select,
.le-page .datagrid-note-action-detail-body .ivr-preset-field textarea,
.le-note-modal-skin .datagrid-note-action-detail-body .ivr-preset-field input,
.le-note-modal-skin .datagrid-note-action-detail-body .ivr-preset-field select,
.le-note-modal-skin .datagrid-note-action-detail-body .ivr-preset-field textarea {
  border-radius: 3px;
  background: #1e1e1e;
  border-color: #333;
  height: 28px;
  font-size: 13px;
  padding: 0 10px;
}

.le-page .datagrid-note-action-detail-body .ivr-preset-field textarea,
.le-note-modal-skin .datagrid-note-action-detail-body .ivr-preset-field textarea {
  height: auto;
  padding: 8px 10px;
}

.le-page .datagrid-note-action-detail-body .ivr-preset-section-header,
.le-note-modal-skin .datagrid-note-action-detail-body .ivr-preset-section-header {
  border-top-color: #252525;
}

.le-page .datagrid-note-action-detail-body .ivr-preset-option,
.le-note-modal-skin .datagrid-note-action-detail-body .ivr-preset-option {
  background: #141414;
  border-color: #252525;
  border-radius: 3px;
}

/* ── Twilio composer in LE context — consistent bg, radius, sizing ─────── */
.le-page .datagrid-twilio-composer,
.le-note-modal-skin .datagrid-twilio-composer {
  background: #1a1a1a;
  border: none;
  border-radius: 0;
  padding: 14px 16px;
  gap: 10px;
}

.le-page .datagrid-twilio-composer-section,
.le-note-modal-skin .datagrid-twilio-composer-section {
  background: #141414;
  border: 1px solid #252525;
  border-radius: 3px;
  padding: 10px 12px;
  gap: 8px;
}

.le-page .datagrid-twilio-composer-head,
.le-note-modal-skin .datagrid-twilio-composer-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #888);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.le-page .datagrid-twilio-composer-input,
.le-note-modal-skin .datagrid-twilio-composer-input {
  border-radius: 3px;
  background: #1e1e1e;
  border-color: #333;
  height: 28px;
  font-size: 13px;
}

.le-page .datagrid-twilio-composer-textarea,
.le-note-modal-skin .datagrid-twilio-composer-textarea {
  border-radius: 3px;
  background: #1e1e1e;
  border-color: #333;
  font-size: 13px;
}

.le-page .datagrid-twilio-composer-input:focus,
.le-note-modal-skin .datagrid-twilio-composer-input:focus,
.le-page .datagrid-twilio-composer-textarea:focus,
.le-note-modal-skin .datagrid-twilio-composer-textarea:focus {
  border-color: #4a4a4a;
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.15);
}

/* ── Normalize action-panel form inputs in LE context ──────────────────────
   Base DataGrid.css uses separate rules for select/date/textarea vs text inputs,
   producing mismatched border-radius, backgrounds, and heights.
   These overrides unify them all to the same compact dark style.
   ─────────────────────────────────────────────────────────────────────────── */
.le-page .datagrid-v2-config-row input,
.le-page .datagrid-v2-config-row select,
.le-page .datagrid-v2-config-row textarea,
.le-note-modal-skin .datagrid-v2-config-row input,
.le-note-modal-skin .datagrid-v2-config-row select,
.le-note-modal-skin .datagrid-v2-config-row textarea,
.le-page .datagrid-v2-config-input,
.le-note-modal-skin .datagrid-v2-config-input {
  background: #1c1c1c;
  color: #d9d9d9;
  border: 1px solid #333;
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  height: 30px;
}
.le-page .datagrid-v2-config-row textarea,
.le-note-modal-skin .datagrid-v2-config-row textarea {
  height: auto;
  min-height: 56px;
  padding: 6px 8px;
  resize: vertical;
}
.le-page .datagrid-v2-config-row input:focus,
.le-page .datagrid-v2-config-row select:focus,
.le-page .datagrid-v2-config-row textarea:focus,
.le-page .datagrid-v2-config-input:focus,
.le-note-modal-skin .datagrid-v2-config-row input:focus,
.le-note-modal-skin .datagrid-v2-config-row select:focus,
.le-note-modal-skin .datagrid-v2-config-row textarea:focus,
.le-note-modal-skin .datagrid-v2-config-input:focus {
  outline: none;
  border-color: #555;
}
.le-page .datagrid-v2-config-row input::placeholder,
.le-page .datagrid-v2-config-input::placeholder,
.le-note-modal-skin .datagrid-v2-config-row input::placeholder,
.le-note-modal-skin .datagrid-v2-config-input::placeholder {
  color: #555;
}

.le-page .datagrid-v2-config-panel.is-timeline-config,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 18px auto 18px;
  padding: 0 0 18px;
  gap: 16px;
  overflow: hidden;
}

.le-page .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-panel-intro,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-panel-intro {
  padding: 0;
}

.le-page .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor-wrap,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-right: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #151515;
}

.le-page .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-highlight,
.le-page .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-highlight,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor {
  height: 100%;
  min-height: 0;
}

.le-page .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-highlight,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-highlight {
  display: none;
}

.le-page .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor,
.le-note-modal-skin .datagrid-v2-config-panel.is-timeline-config .datagrid-v2-config-editor {
  color: #d9d9d9;
  -webkit-text-fill-color: #d9d9d9;
  caret-color: #e7e7e7;
  background: #151515;
  overflow: auto;
  resize: none;
}

.le-page .datagrid-note-list.is-timeline .datagrid-note-timeline-track,
.le-note-modal-skin .datagrid-note-list.is-timeline .datagrid-note-timeline-track {
  padding-top: 30px;
  padding-bottom: 120px;
  margin-top: 40px;
}

.le-page .datagrid-note-list.is-timeline .datagrid-note-timeline-track::before,
.le-note-modal-skin .datagrid-note-list.is-timeline .datagrid-note-timeline-track::before {
  /* Keep a single visible center spine. The per-row spine already renders the rail. */
  content: none;
}

.le-page .le-timeline-month-rail,
.le-note-modal-skin .le-timeline-month-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 122px;
  pointer-events: none;
  z-index: 2;
}

.le-page .le-timeline-rail-marker,
.le-note-modal-skin .le-timeline-rail-marker {
  position: absolute;
  left: 8px;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.le-page .le-timeline-rail-marker-label,
.le-note-modal-skin .le-timeline-rail-marker-label {
  flex: 0 0 66px;
  font-family: "Proxima Nova", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(154, 164, 160, 0.82);
  text-shadow: 0 0 10px rgba(18, 28, 23, 0.24);
  white-space: nowrap;
  text-align: left;
}

.le-page .le-timeline-rail-marker-label.is-empty,
.le-note-modal-skin .le-timeline-rail-marker-label.is-empty {
  opacity: 0;
  text-shadow: none;
}

.le-page .le-timeline-rail-marker-tick,
.le-note-modal-skin .le-timeline-rail-marker-tick {
  flex: 1 1 auto;
  min-width: 12px;
  height: 0;
  border-top: 1px solid rgba(125, 134, 130, 0.42);
}

.le-page .datagrid-note-list.is-timeline,
.le-note-modal-skin .datagrid-note-list.is-timeline {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
}

.le-page .datagrid-note-list.is-timeline .datagrid-v2-future-actions,
.le-note-modal-skin .datagrid-note-list.is-timeline .datagrid-v2-future-actions {
  padding-bottom: 24px;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .le-timeline-month-rail,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .le-timeline-month-rail {
  display: none;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-track,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-track {
  padding-left: 0;
  padding-right: 0;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-track::before,
.le-note-modal-skin
  .datagrid-note-list.is-timeline.is-list-view
  .datagrid-note-timeline-track::before {
  content: none;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-event-row,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-event-row {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-col.is-right,
.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-col.is-left,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-col.is-right,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-col.is-left {
  grid-column: 2;
  justify-content: flex-start !important;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-entry,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-entry {
  width: 100%;
  justify-content: flex-start;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-entry.is-right,
.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-entry.is-left,
.le-note-modal-skin
  .datagrid-note-list.is-timeline.is-list-view
  .datagrid-note-timeline-entry.is-right,
.le-note-modal-skin
  .datagrid-note-list.is-timeline.is-list-view
  .datagrid-note-timeline-entry.is-left {
  justify-content: flex-start;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-outside-meta,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-outside-meta {
  display: none;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-core,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-core {
  grid-column: 1;
  align-self: stretch;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-branch,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-branch {
  width: 24px;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-branch.is-left,
.le-note-modal-skin
  .datagrid-note-list.is-timeline.is-list-view
  .datagrid-note-timeline-branch.is-left {
  left: 50%;
  right: auto;
}

.le-page .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-card-wrap,
.le-note-modal-skin .datagrid-note-list.is-timeline.is-list-view .datagrid-note-timeline-card-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}


.le-page .le-activity-list,
.le-note-modal-skin .le-activity-list {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #141414;
}

.le-page .le-new-event-placeholder-row,
.le-note-modal-skin .le-new-event-placeholder-row {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
}

.le-page .le-new-event-placeholder-event,
.le-note-modal-skin .le-new-event-placeholder-event {
  grid-column: 3;
  width: 100%;
  max-width: 560px;
  margin: 0;
  border: 1px dashed #4f4f4f;
  background: rgba(56, 56, 56, 0.28);
  color: #a7a7a7;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

/* Suppress the left tick/branch line inherited from datagrid-v2-future-event */
.le-page .le-new-event-placeholder-event::before,
.le-note-modal-skin .le-new-event-placeholder-event::before {
  content: none;
}

.le-page .le-new-event-placeholder-event:hover,
.le-note-modal-skin .le-new-event-placeholder-event:hover {
  border-color: #6e6e6e;
  color: #c1c1c1;
  background: rgba(64, 64, 64, 0.34);
}

.le-page .le-new-event-placeholder-event:focus-visible,
.le-note-modal-skin .le-new-event-placeholder-event:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(126, 200, 160, 0.28);
}

.le-page .le-new-event-placeholder-label,
.le-note-modal-skin .le-new-event-placeholder-label {
  display: inline-block;
  font-size: 13px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: 0.01em;
}

.le-page .datagrid-note-timeline-core::before,
.le-note-modal-skin .datagrid-note-timeline-core::before {
  width: 2px;
  background: rgba(78, 200, 122, 0.32);
  box-shadow: none;
  transition: background 0.14s ease;
}

.le-page .datagrid-note-timeline-core:hover::before,
.le-note-modal-skin .datagrid-note-timeline-core:hover::before {
  background: linear-gradient(180deg, rgba(128, 196, 154, 0.34) 0%, rgba(96, 145, 116, 0.2) 100%);
}

/* Suppress the duplicate spine drawn by the event-row pseudo-element;
   the core::before already draws the styled spine in this context. */
.le-page .datagrid-note-timeline-event-row::before,
.le-note-modal-skin .datagrid-note-timeline-event-row::before {
  content: none;
}

/* Re-enable pointer events on card-side column and narrow spine hit area (row is none by default) */
.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-left,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-left,
.le-page .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-right,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-right {
  pointer-events: auto;
}

.le-page .datagrid-note-timeline-event-row .datagrid-note-timeline-core,
.le-note-modal-skin .datagrid-note-timeline-event-row .datagrid-note-timeline-core {
  justify-self: center;
  width: 6px;
  pointer-events: auto;
}

.le-page .datagrid-note-timeline-branch,
.le-note-modal-skin .datagrid-note-timeline-branch {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-left,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-left,
.le-page .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-right,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-right {
  opacity: 0.95;
}

.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-right,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-right,
.le-page .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-left,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-core:hover .datagrid-note-timeline-branch.is-left {
  opacity: 0.2;
}

.le-page .datagrid-note-timeline-dot,
.le-note-modal-skin .datagrid-note-timeline-dot {
  border-color: rgba(108, 146, 123, 0.45);
  background: #2f4739;
  transition: transform 0.14s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.le-page .datagrid-note-timeline-dot.is-completed,
.le-note-modal-skin .datagrid-note-timeline-dot.is-completed {
  background: #67aa84;
  border-color: rgba(123, 190, 149, 0.72);
}

/* Inbound (contact-sent) card — cool blue-grey accent for is-left events */
.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card {
  border-color: #2a3c4a;
  background: #161e26;
}

.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card:hover,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card:hover {
  border-color: #2a3c4a;
  background: #161e26;
}

/* Inbound dot accent */
.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-dot.is-completed,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-dot.is-completed {
  background: #4a80a4;
  border-color: rgba(90, 148, 190, 0.72);
}

/* Inbound branch accent */
.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-branch,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-branch {
  background: #3a5a78;
}

/* Inbound outside-meta label (shown in right column, opposite the card) */
.le-page .datagrid-note-timeline-outside-meta.is-inbound,
.le-note-modal-skin .datagrid-note-timeline-outside-meta.is-inbound {
  color: #4a7a9a;
  justify-content: flex-start;
  padding-left: 12px;
  padding-right: 0;
  text-align: left;
}

.le-page .datagrid-note-timeline-outside-meta.is-inbound .datagrid-note-timeline-outside-meta-label,
.le-note-modal-skin .datagrid-note-timeline-outside-meta.is-inbound .datagrid-note-timeline-outside-meta-label {
  color: #3a6080;
}

/* Past-event inline delete button — hidden until card hover */
.le-page .le-past-event-delete,
.le-note-modal-skin .le-past-event-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #555;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
  z-index: 4;
  padding: 0;
}

.le-page .datagrid-note-timeline-card:hover .le-past-event-delete,
.le-note-modal-skin .datagrid-note-timeline-card:hover .le-past-event-delete {
  opacity: 1;
}

.le-page .le-past-event-delete:hover,
.le-note-modal-skin .le-past-event-delete:hover {
  color: #e05050;
  background: rgba(224, 80, 80, 0.12);
}

/* Past-event cards — subtle expandable hint */
.le-page .datagrid-note-timeline-card.is-past-event,
.le-note-modal-skin .datagrid-note-timeline-card.is-past-event {
  cursor: pointer;
}

.le-page .datagrid-note-timeline-card.is-past-event:hover,
.le-note-modal-skin .datagrid-note-timeline-card.is-past-event:hover {
  border-color: inherit;
  background: inherit;
}

.le-page .datagrid-note-timeline-core:hover .datagrid-note-timeline-dot,
.le-note-modal-skin .datagrid-note-timeline-core:hover .datagrid-note-timeline-dot {
  box-shadow: 0 0 0 3px #1a1a1a, 0 0 7px rgba(123, 190, 149, 0.38);
}

.le-page .datagrid-note-timeline-gap-label,
.le-note-modal-skin .datagrid-note-timeline-gap-label {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  left: auto;
  transform: none;
  top: auto;
  align-self: center;
  padding: 2px 8px;
  background: rgba(40, 56, 46, 0.72);
  border: 1px solid rgba(80, 110, 90, 0.3);
  border-radius: 3px;
  font-size: 8px;
  color: #8aab98;
  text-align: center;
  white-space: nowrap;
}

.le-page .datagrid-note-timeline-gap,
.le-note-modal-skin .datagrid-note-timeline-gap,
.le-page .datagrid-v2-future-gap,
.le-note-modal-skin .datagrid-v2-future-gap {
  --gap: 16px;
  min-height: var(--gap);
  height: var(--gap);
}

.le-page .datagrid-v2-future-gap,
.le-note-modal-skin .datagrid-v2-future-gap {
  padding: 0;
}

.le-page .datagrid-v2-future-gap-line,
.le-note-modal-skin .datagrid-v2-future-gap-line {
  display: block;
  width: 1px;
  border-radius: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(132, 146, 139, 0.42) 0 5px,
    transparent 5px 10px
  );
}

.le-page .datagrid-note-timeline-gap.le-gap-30m,
.le-page .datagrid-v2-future-gap.le-gap-30m,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-30m,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-30m { --gap: 8px; }
.le-page .datagrid-note-timeline-gap.le-gap-1h,
.le-page .datagrid-v2-future-gap.le-gap-1h,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-1h,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-1h { --gap: 10px; }
.le-page .datagrid-note-timeline-gap.le-gap-6h,
.le-page .datagrid-v2-future-gap.le-gap-6h,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-6h,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-6h { --gap: 16px; }
.le-page .datagrid-note-timeline-gap.le-gap-12h,
.le-page .datagrid-v2-future-gap.le-gap-12h,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-12h,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-12h { --gap: 20px; }
.le-page .datagrid-note-timeline-gap.le-gap-1d,
.le-page .datagrid-v2-future-gap.le-gap-1d,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-1d,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-1d { --gap: 26px; }
.le-page .datagrid-note-timeline-gap.le-gap-2d,
.le-page .datagrid-v2-future-gap.le-gap-2d,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-2d,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-2d { --gap: 34px; }
.le-page .datagrid-note-timeline-gap.le-gap-4d,
.le-page .datagrid-v2-future-gap.le-gap-4d,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-4d,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-4d { --gap: 46px; }
.le-page .datagrid-note-timeline-gap.le-gap-8d,
.le-page .datagrid-v2-future-gap.le-gap-8d,
.le-note-modal-skin .datagrid-note-timeline-gap.le-gap-8d,
.le-note-modal-skin .datagrid-v2-future-gap.le-gap-8d { --gap: 62px; }

.le-page .datagrid-v2-future-gap-label,
.le-note-modal-skin .datagrid-v2-future-gap-label {
  left: calc(50% - 14px);
  transform: translate(-100%, -50%);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #8fa69a;
  box-shadow: none;
  text-align: right;
}

.le-page .datagrid-v2-future-event,
.le-note-modal-skin .datagrid-v2-future-event {
  grid-column: 3;
  position: relative;
  border-radius: 2px;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.le-page .datagrid-v2-future-event:not(.is-editing):hover,
.le-note-modal-skin .datagrid-v2-future-event:not(.is-editing):hover {
  border-color: #3f3f3f;
  background: #1b1b1b;
}

.le-page .datagrid-v2-future-event.is-report-event,
.le-note-modal-skin .datagrid-v2-future-event.is-report-event {
  grid-column: 3;
  max-width: 520px;
  border-left: 2px solid rgba(168, 85, 247, 0.35);
}

.le-page .datagrid-v2-future-event::before,
.le-note-modal-skin .datagrid-v2-future-event::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(98, 152, 122, 0.38);
  transform: translateY(-50%);
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.le-page .datagrid-v2-future-event.is-report-event::before,
.le-note-modal-skin .datagrid-v2-future-event.is-report-event::before {
  background: rgba(168, 85, 247, 0.25);
}

.le-page .datagrid-v2-future-event:not(.is-editing):hover::before,
.le-note-modal-skin .datagrid-v2-future-event:not(.is-editing):hover::before {
  background: rgba(126, 194, 154, 0.72);
  box-shadow: 0 0 5px rgba(95, 157, 124, 0.34);
}

.le-page .le-v2-spine-core,
.le-note-modal-skin .le-v2-spine-core {
  grid-column: 2;
  position: relative;
  min-height: 40px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.le-page .le-v2-spine-core::before,
.le-note-modal-skin .le-v2-spine-core::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(150, 150, 150, 0.25);
  transition: box-shadow 0.14s ease, background 0.14s ease;
}

.le-page .le-v2-spine-node,
.le-note-modal-skin .le-v2-spine-node {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  z-index: 1;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.le-page .le-v2-spine-node.is-completed,
.le-note-modal-skin .le-v2-spine-node.is-completed {
  background: #4ec87a;
  border: 1px solid rgba(88, 210, 130, 0.84);
}

.le-page .le-v2-spine-node.is-scheduled,
.le-note-modal-skin .le-v2-spine-node.is-scheduled {
  background: #121212;
  border: 2px solid rgba(172, 186, 178, 0.72);
}

.le-page .le-v2-spine-node.is-failed,
.le-note-modal-skin .le-v2-spine-node.is-failed {
  background: #2a1616;
  border: 2px solid rgba(214, 107, 107, 0.82);
  box-shadow: 0 0 0 1px rgba(126, 62, 62, 0.45);
}

/* Milestone icon replaces dot for report events */
.le-page .le-v2-spine-node.is-milestone,
.le-note-modal-skin .le-v2-spine-node.is-milestone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: 5px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none !important;
  color: #a855f7;
}

.le-page .le-v2-spine-node.is-milestone.is-completed,
.le-note-modal-skin .le-v2-spine-node.is-milestone.is-completed {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #a855f7;
}

.le-page .le-v2-spine-node.is-milestone.is-scheduled,
.le-note-modal-skin .le-v2-spine-node.is-milestone.is-scheduled {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #a855f7;
}

.le-page .le-v2-spine-node.is-milestone.is-failed,
.le-note-modal-skin .le-v2-spine-node.is-milestone.is-failed {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #a855f7;
}

/* ── Report coverage bracket: purple vertical line left of spine ── */
/* --report-depth: 0 = 10px left of spine center, 1 = 20px, 2 = 30px, etc. */
.le-page .datagrid-v2-future-row.is-report-covered .le-v2-spine-core::after,
.le-note-modal-skin .datagrid-v2-future-row.is-report-covered .le-v2-spine-core::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: calc(50% - 10px - var(--report-depth, 0) * 10px);
  width: 2px;
  background: #8b5cf6;
  z-index: 0;
  pointer-events: none;
}

/* Purple bracket vertical line through gap spacers between covered events */
.le-page .datagrid-v2-future-gap.is-report-covered,
.le-note-modal-skin .datagrid-v2-future-gap.is-report-covered {
  position: relative;
}

.le-page .datagrid-v2-future-gap.is-report-covered::after,
.le-note-modal-skin .datagrid-v2-future-gap.is-report-covered::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 10px - var(--report-depth, 0) * 10px);
  width: 2px;
  background: #8b5cf6;
  pointer-events: none;
}

/* L-shaped bracket on report row: vertical down from top + horizontal to milestone center */
.le-page .datagrid-v2-future-row.is-report-event .le-v2-spine-core::after,
.le-note-modal-skin .datagrid-v2-future-row.is-report-event .le-v2-spine-core::after {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 10px - var(--report-depth, 0) * 10px);
  width: calc(10px + var(--report-depth, 0) * 10px);
  height: calc(50% + 8px);
  border-left: 2px solid #8b5cf6;
  border-bottom: 2px solid #8b5cf6;
  border-right: none;
  border-top: none;
  background: transparent;
  border-bottom-left-radius: 4px;
  z-index: 0;
  pointer-events: none;
}

.le-page .datagrid-note-timeline-contact-marker.is-note,
.le-note-modal-skin .datagrid-note-timeline-contact-marker.is-note {
  color: #d8b356;
}

.le-page .datagrid-note-timeline-now,
.le-note-modal-skin .datagrid-note-timeline-now {
  display: grid;
  width: 100%;
  max-width: 900px;
  grid-template-columns: minmax(0, 1fr) 24px auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  margin: 18px auto;
  color: #5b9fd6;
  font-size: 12px;
  font-weight: 600;
  position: relative;
}

.le-page .datagrid-note-timeline-now::before,
.le-note-modal-skin .datagrid-note-timeline-now::before {
  content: none;
}

.le-page .datagrid-note-timeline-now > span,
.le-page .datagrid-note-timeline-now > time,
.le-note-modal-skin .datagrid-note-timeline-now > span,
.le-note-modal-skin .datagrid-note-timeline-now > time {
  position: relative;
  z-index: 1;
  padding: 0;
  background: none;
}

.le-page .datagrid-note-timeline-now-dot,
.le-note-modal-skin .datagrid-note-timeline-now-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #5b9fd6;
  background: #1e2e3e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  box-shadow: 0 0 0 3px #1a1a1a;
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  animation: none;
}

.le-page .datagrid-note-timeline-now-dot::after,
.le-note-modal-skin .datagrid-note-timeline-now-dot::after {
  content: none;
}

.le-page .datagrid-note-timeline-now-dot svg,
.le-note-modal-skin .datagrid-note-timeline-now-dot svg {
  width: 8px;
  height: 8px;
  color: #5b9fd6;
}

.le-page .datagrid-note-timeline-now-label,
.le-note-modal-skin .datagrid-note-timeline-now-label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 12px;
  color: #5b9fd6;
  grid-column: 3;
  grid-row: 1;
}

.le-page .datagrid-note-timeline-now-rule,
.le-note-modal-skin .datagrid-note-timeline-now-rule {
  grid-column: 4;
  grid-row: 1;
  height: 1px;
  background: #3a5068;
  border: none;
  margin: 0;
}

.le-page .datagrid-note-timeline-now > time,
.le-note-modal-skin .datagrid-note-timeline-now > time {
  color: #6eaad4;
  font-weight: 500;
  font-size: 12px;
  grid-column: 5;
  grid-row: 1;
  justify-self: start;
}

/* ── Node micro-scale on direct spine hover ── */
.le-page .datagrid-note-timeline-core:hover .datagrid-note-timeline-dot,
.le-note-modal-skin .datagrid-note-timeline-core:hover .datagrid-note-timeline-dot {
  transform: scale(1.25);
}

/* ── Past-spine progress rail — suppressed to avoid duplicate vertical line ── */
.le-page .datagrid-note-timeline-core::after,
.le-note-modal-skin .datagrid-note-timeline-core::after {
  content: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CENTERED-SPINE LAYOUT — Spine in the center; inbound (is-left) cards
   appear left of spine, outbound (is-right) cards appear right of spine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Past event rows: centered 3-col grid */
.le-page .datagrid-note-timeline-event-row,
.le-note-modal-skin .datagrid-note-timeline-event-row {
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  contain: layout;
}

/* 2. Pin spine core to column 2 */
.le-page .datagrid-note-timeline-core,
.le-note-modal-skin .datagrid-note-timeline-core {
  grid-column: 2;
  grid-row: 1;
}

/* 3. Cards on their natural sides — col.is-left flows to col 1, col.is-right flows to col 3 */

.le-page .datagrid-note-timeline-entry,
.le-note-modal-skin .datagrid-note-timeline-entry {
  display: flex;
  width: 100%;
}

.le-page .datagrid-note-timeline-card-wrap,
.le-note-modal-skin .datagrid-note-timeline-card-wrap {
  flex: 0 1 360px;
  width: min(360px, 100%);
  min-width: 0;
  max-width: calc(100% - 20px);
}

@media (min-width: 769px) {
  .le-page .datagrid-note-timeline-card-wrap,
  .le-note-modal-skin .datagrid-note-timeline-card-wrap {
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

/* Keep branch visible — leave space on the spine-adjacent side */
.le-page .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-card-wrap,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-card-wrap {
  margin-left: 8px;
}
.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card-wrap,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card-wrap {
  margin-right: 8px;
}

/* 4. Left-side entries (inbound) align toward the spine */
.le-page .datagrid-note-timeline-entry.is-left,
.le-note-modal-skin .datagrid-note-timeline-entry.is-left {
  justify-content: flex-end;
}

/* 5. Branch direction — restore natural left/right from DataGrid.css base */
.le-page .datagrid-note-timeline-branch.is-left,
.le-note-modal-skin .datagrid-note-timeline-branch.is-left {
  right: 50%;
  left: auto;
}

/* 6. Gap rows: same 3-col grid */
.le-page .datagrid-note-timeline-gap,
.le-note-modal-skin .datagrid-note-timeline-gap {
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  contain: layout;
}

/* 7. Hide gap-line spine (the 2nd vertical line between events) */
.le-page .datagrid-note-timeline-gap-line,
.le-note-modal-skin .datagrid-note-timeline-gap-line {
  display: none;
}

/* 8. Suppress gap ::before and ::after */
.le-page .datagrid-note-timeline-gap::before,
.le-note-modal-skin .datagrid-note-timeline-gap::before {
  content: none;
}
.le-page .datagrid-note-timeline-gap::after,
.le-note-modal-skin .datagrid-note-timeline-gap::after {
  content: none;
}

/* 9. Future event rows: centered 3-col grid */
.le-page .datagrid-v2-future-row,
.le-note-modal-skin .datagrid-v2-future-row {
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  position: relative;
  contain: layout;
}

.le-page .datagrid-v2-future-row.is-report-event,
.le-note-modal-skin .datagrid-v2-future-row.is-report-event {
  /* inherits normal 3-col grid */
}

.le-page .datagrid-v2-future-row.is-report-event .le-v2-spine-core,
.le-note-modal-skin .datagrid-v2-future-row.is-report-event .le-v2-spine-core {
  /* show spine for report events (inherit normal display) */
}

/* 11. Responsive: collapse to 2-col at narrow widths */
@media (max-width: 768px) {
  .le-page .le-timeline-month-rail,
  .le-note-modal-skin .le-timeline-month-rail {
    width: 98px;
  }

  .le-page .le-timeline-rail-marker,
  .le-note-modal-skin .le-timeline-rail-marker {
    left: 4px;
    right: 4px;
    gap: 4px;
  }

  .le-page .le-timeline-rail-marker-label,
  .le-note-modal-skin .le-timeline-rail-marker-label {
    flex-basis: 58px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .le-page .le-timeline-rail-marker-tick,
  .le-note-modal-skin .le-timeline-rail-marker-tick {
    min-width: 8px;
  }

  .le-page .datagrid-note-timeline-event-row,
  .le-note-modal-skin .datagrid-note-timeline-event-row,
  .le-page .datagrid-note-timeline-gap,
  .le-note-modal-skin .datagrid-note-timeline-gap {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-left,
  .le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-left,
  .le-page .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-right,
  .le-note-modal-skin .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-right {
    grid-column: 2;
  }
  .le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-right,
  .le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-col.is-right,
  .le-page .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-left,
  .le-note-modal-skin .datagrid-note-timeline-event-row.is-right .datagrid-note-timeline-col.is-left {
    display: none;
  }
  .le-page .datagrid-v2-future-row,
  .le-note-modal-skin .datagrid-v2-future-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .le-page .datagrid-note-timeline-now,
  .le-note-modal-skin .datagrid-note-timeline-now {
    max-width: 560px;
    grid-template-columns: 14px auto minmax(0, 1fr) auto;
  }

  .le-page .datagrid-note-timeline-now-dot,
  .le-note-modal-skin .datagrid-note-timeline-now-dot {
    grid-column: 1;
  }

  .le-page .datagrid-note-timeline-now-label,
  .le-note-modal-skin .datagrid-note-timeline-now-label {
    grid-column: 2;
  }

  .le-page .datagrid-note-timeline-now-rule,
  .le-note-modal-skin .datagrid-note-timeline-now-rule {
    grid-column: 3;
  }

  .le-page .datagrid-note-timeline-now > time,
  .le-note-modal-skin .datagrid-note-timeline-now > time {
    grid-column: 4;
  }

  .le-page .datagrid-v2-future-row,
  .le-note-modal-skin .datagrid-v2-future-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .le-page .le-v2-spine-core,
  .le-note-modal-skin .le-v2-spine-core {
    display: none;
  }

  .le-page .datagrid-v2-future-event,
  .le-note-modal-skin .datagrid-v2-future-event,
  .le-page .le-new-event-placeholder-event,
  .le-note-modal-skin .le-new-event-placeholder-event {
    grid-column: 1;
  }

  .le-page .datagrid-v2-future-event::before,
  .le-note-modal-skin .datagrid-v2-future-event::before {
    display: none;
  }

  /* Sentinel — full width in single-column layout */
  .le-page .le-future-sentinel,
  .le-note-modal-skin .le-future-sentinel {
    padding: 14px 8px;
    font-size: 12px;
  }

  /* Skeleton — hide spine + connector in single-column layout */
  .le-lazy-skeleton-card.datagrid-v2-future-event {
    grid-column: 1;
  }

  .le-lazy-skeleton-card.datagrid-v2-future-event::before {
    display: none;
  }

  /* Automation overlay — switch to static flow on narrow screens
     so it doesn't overlap event content */
  .le-page .datagrid-v2-future-actions.is-overlay,
  .le-note-modal-skin .datagrid-v2-future-actions.is-overlay {
    position: static;
    justify-content: flex-start;
    padding: 4px 0 0;
  }

  /* Timeline track — reduce bottom padding on narrow screens */
  .le-page .datagrid-note-list.is-timeline .datagrid-note-timeline-track,
  .le-note-modal-skin .datagrid-note-list.is-timeline .datagrid-note-timeline-track {
    padding-bottom: 80px;
    margin-top: 28px;
  }
}

@media (max-width: 480px) {
  /* Sentinel — tighter on small phones */
  .le-page .le-future-sentinel,
  .le-note-modal-skin .le-future-sentinel {
    padding: 10px 6px;
    font-size: 12px;
  }

  .le-page .le-future-batch-loading,
  .le-note-modal-skin .le-future-batch-loading {
    gap: 6px;
    font-size: 12px;
  }

  /* Automation overlay buttons — smaller text on tiny screens */
  .le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn,
  .le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn {
    font-size: 9px;
    padding: 1px 1px;
  }

  /* Timeline track — tightest spacing on small phones */
  .le-page .datagrid-note-list.is-timeline .datagrid-note-timeline-track,
  .le-note-modal-skin .datagrid-note-list.is-timeline .datagrid-note-timeline-track {
    padding-bottom: 60px;
    margin-top: 20px;
  }
}

/* ── New Action Hub overrides for Lead Engine (Page and Modal) ── */

/* Let the action hub be unconstrained */
.le-page .datagrid-note-action-hub,
.le-note-modal-skin .datagrid-note-action-hub {
  padding-bottom: 32px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.le-page .datagrid-note-action-hub-grid,
.le-note-modal-skin .datagrid-note-action-hub-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}

/* Group wrappers */
.le-page .datagrid-note-action-hub-groups,
.le-note-modal-skin .datagrid-note-action-hub-groups {
  border: none;
  border-radius: 0;
  background: transparent;
  gap: 24px;
}

.le-page .datagrid-note-action-hub-group + .datagrid-note-action-hub-group > .datagrid-note-action-hub-group-header,
.le-note-modal-skin .datagrid-note-action-hub-group + .datagrid-note-action-hub-group > .datagrid-note-action-hub-group-header {
  border-top: none;
}

/* Group Headers */
.le-page .datagrid-note-action-hub-group-header,
.le-note-modal-skin .datagrid-note-action-hub-group-header {
  background: transparent;
  border-bottom: none;
  padding: 16px 0 12px;
}

.le-page .datagrid-note-action-hub-group:first-child > .datagrid-note-action-hub-group-header,
.le-note-modal-skin .datagrid-note-action-hub-group:first-child > .datagrid-note-action-hub-group-header {
  padding-top: 0;
}

.le-page .datagrid-note-action-hub-group-icon,
.le-note-modal-skin .datagrid-note-action-hub-group-icon {
  align-self: flex-start;
  margin-top: 2px;
  width: 20px;
  height: 20px;
}
.le-page .datagrid-note-action-hub-group-icon img,
.le-note-modal-skin .datagrid-note-action-hub-group-icon img {
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

.le-page .datagrid-note-action-hub-group-title,
.le-note-modal-skin .datagrid-note-action-hub-group-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.le-page .datagrid-note-action-hub-group-copy p,
.le-note-modal-skin .datagrid-note-action-hub-group-copy p {
  display: block;
  margin: 4px 0 0;
  font-size: 13px;
  color: #888888;
}

/* Grid Layout for Actions */
.le-page .datagrid-note-action-hub-actions,
.le-note-modal-skin .datagrid-note-action-hub-actions {
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Individual Action Cards */
.le-page .datagrid-note-action-hub-btn,
.le-note-modal-skin .datagrid-note-action-hub-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #2d2d2d;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  transition:
    background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.le-page .datagrid-note-action-hub-btn:hover,
.le-note-modal-skin .datagrid-note-action-hub-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Card Inner Content */
.le-page .datagrid-note-action-hub-btn-inner,
.le-note-modal-skin .datagrid-note-action-hub-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.le-page .datagrid-note-action-hub-btn-title,
.le-note-modal-skin .datagrid-note-action-hub-btn-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  gap: 8px;
}

.le-page .datagrid-note-action-hub-btn-desc,
.le-note-modal-skin .datagrid-note-action-hub-btn-desc {
  font-size: 13px;
  color: #888888;
  line-height: 1.4;
  display: block;
  white-space: normal;
}

/* Tags/Badges inside Card */
.le-page .datagrid-note-action-hub-meta,
.le-note-modal-skin .datagrid-note-action-hub-meta {
  margin-top: auto;
  padding-top: 12px;
  align-items: flex-end;
}

.le-page .datagrid-note-action-hub-tags,
.le-note-modal-skin .datagrid-note-action-hub-tags {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  width: auto;
}

.le-page .datagrid-note-action-hub-vendors,
.le-note-modal-skin .datagrid-note-action-hub-vendors {
  gap: 8px;
}

.le-page .datagrid-note-action-hub-vendor,
.le-note-modal-skin .datagrid-note-action-hub-vendor {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.04);
}

.le-page .datagrid-note-action-hub-vendor img,
.le-note-modal-skin .datagrid-note-action-hub-vendor img {
  width: 15px;
  height: 15px;
}

.le-page .datagrid-note-action-hub-footer,
.le-note-modal-skin .datagrid-note-action-hub-footer {
  padding: 24px;
  margin: 0;
  color: #555;
}

/* Future event track */
.le-page .datagrid-v2-future-events,
.le-note-modal-skin .datagrid-v2-future-events {
  border: none;
}

.le-page .datagrid-v2-future-track,
.le-note-modal-skin .datagrid-v2-future-track {
  border: none;
  position: relative;
}

/* Spine continuation line — extends to bottom when more events are available */
.le-page .datagrid-v2-future-track.has-more::after,
.le-note-modal-skin .datagrid-v2-future-track.has-more::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(150, 150, 150, 0.25) 0%,
    rgba(150, 150, 150, 0.08) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Neutralize status-based colored backgrounds on scheduled event cards ── */
.le-page .datagrid-v2-future-event.is-scheduled,
.le-page .datagrid-v2-future-event.is-sent,
.le-page .datagrid-v2-future-event.is-completed,
.le-page .datagrid-v2-future-event.is-failed,
.le-page .datagrid-v2-future-event.is-skipped,
.le-note-modal-skin .datagrid-v2-future-event.is-scheduled,
.le-note-modal-skin .datagrid-v2-future-event.is-sent,
.le-note-modal-skin .datagrid-v2-future-event.is-completed,
.le-note-modal-skin .datagrid-v2-future-event.is-failed,
.le-note-modal-skin .datagrid-v2-future-event.is-skipped {
  border-color: #333;
  background: #181818;
}

.le-page .datagrid-v2-future-event.is-skipped,
.le-note-modal-skin .datagrid-v2-future-event.is-skipped {
  opacity: 0.75;
}

/* Preserve editing state visual even with neutralized status backgrounds */
.le-page .datagrid-v2-future-event.is-editing,
.le-note-modal-skin .datagrid-v2-future-event.is-editing {
  border-color: #505050;
  background: #1f1f1f;
}

/* Scheduled status labels */
.le-page .datagrid-v2-future-event-sent-meta,
.le-note-modal-skin .datagrid-v2-future-event-sent-meta {
  align-self: center;
  margin-top: 0;
}

.le-page .datagrid-v2-future-event-sent-meta.is-failed svg,
.le-note-modal-skin .datagrid-v2-future-event-sent-meta.is-failed svg {
  color: #d46a6a;
}

.le-page .datagrid-v2-future-event-sent-meta.is-failed,
.le-note-modal-skin .datagrid-v2-future-event-sent-meta.is-failed {
  color: #a77;
}

/* Scheduled timestamps */
.le-page .datagrid-v2-future-event-date,
.le-note-modal-skin .datagrid-v2-future-event-date {
  padding-right: 10px;
}

.le-page .datagrid-v2-future-event-date-input,
.le-note-modal-skin .datagrid-v2-future-event-date-input {
  height: 20px;
  min-width: 172px;
  padding: 0 6px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.le-page .datagrid-v2-future-event-date-input:hover,
.le-page .datagrid-v2-future-event-date-input:focus,
.le-note-modal-skin .datagrid-v2-future-event-date-input:hover,
.le-note-modal-skin .datagrid-v2-future-event-date-input:focus {
  border-color: #7aafff;
  outline: none;
}

/* Scheduled event summary */
.le-page .datagrid-v2-future-event-type,
.le-note-modal-skin .datagrid-v2-future-event-type {
  height: auto;
  padding: 0;
  flex-shrink: 0;
}

.le-page .datagrid-v2-future-summary-line1,
.le-note-modal-skin .datagrid-v2-future-summary-line1 {
  flex-wrap: nowrap;
  gap: 5px;
}

.le-page .datagrid-v2-future-summary-recipient,
.le-note-modal-skin .datagrid-v2-future-summary-recipient {
  font-size: 12px;
  font-weight: 700;
}

.le-page .datagrid-v2-future-summary-text,
.le-note-modal-skin .datagrid-v2-future-summary-text {
  font-size: 12px;
  color: #999;
}

.le-page .datagrid-v2-future-summary-text.is-report,
.le-note-modal-skin .datagrid-v2-future-summary-text.is-report {
  display: block;
  color: #a8b3ad;
}

.le-page .le-report-id-badge,
.le-note-modal-skin .le-report-id-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  overflow: hidden;
}

.le-page .le-report-id-badge-label,
.le-note-modal-skin .le-report-id-badge-label,
.le-page .le-report-id-badge-value,
.le-note-modal-skin .le-report-id-badge-value {
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}

.le-page .le-report-id-badge-label,
.le-note-modal-skin .le-report-id-badge-label {
  background: #000;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  border-right: 1px solid #5f5f5f;
}

.le-page .le-report-id-badge-value,
.le-note-modal-skin .le-report-id-badge-value {
  color: #cfcfcf;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.le-page .datagrid-v2-future-event-detail-block.is-report,
.le-note-modal-skin .datagrid-v2-future-event-detail-block.is-report {
  max-width: 100%;
}

.le-page .datagrid-v2-future-event-desc.is-report-output,
.le-note-modal-skin .datagrid-v2-future-event-desc.is-report-output {
  white-space: normal;
  line-height: 1.6;
}

.le-page .datagrid-v2-future-event-desc.is-report-output strong,
.le-note-modal-skin .datagrid-v2-future-event-desc.is-report-output strong {
  color: #d2dcd6;
  font-weight: 600;
}

.le-page .datagrid-v2-future-summary-label,
.le-note-modal-skin .datagrid-v2-future-summary-label {
  font-size: 9px;
  text-transform: none;
  color: #777;
}

/* ── Call-event spine — softer, solid line instead of dashes ── */
.le-page .datagrid-note-timeline-event-row.is-call-event .datagrid-note-timeline-core::before,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-call-event .datagrid-note-timeline-core::before {
  background:
    linear-gradient(
      180deg,
      rgba(100, 140, 160, 0.32) 0%,
      rgba(80, 115, 135, 0.22) 52%,
      rgba(60, 88, 105, 0.15) 100%
    );
  box-shadow: 0 0 0 1px rgba(60, 100, 130, 0.18);
  width: 2px;
}

.le-page .datagrid-note-timeline-event-row.is-call-event .datagrid-note-timeline-core:hover::before,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-call-event .datagrid-note-timeline-core:hover::before {
  background:
    linear-gradient(
      180deg,
      rgba(120, 165, 190, 0.42) 0%,
      rgba(95, 138, 160, 0.30) 52%,
      rgba(72, 108, 128, 0.20) 100%
    );
  box-shadow: 0 0 0 1px rgba(80, 130, 160, 0.26);
  width: 3px;
}

/* ── Call card — expandable ── */
.le-page .datagrid-note-timeline-card.is-call,
.le-note-modal-skin .datagrid-note-timeline-card.is-call {
  cursor: default;
}

.le-page .datagrid-note-timeline-card.is-call .datagrid-note-timeline-card-title.is-clickable,
.le-note-modal-skin .datagrid-note-timeline-card.is-call .datagrid-note-timeline-card-title.is-clickable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.le-page .datagrid-note-call-meta,
.le-note-modal-skin .datagrid-note-call-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.le-page .datagrid-note-call-expand-hint,
.le-note-modal-skin .datagrid-note-call-expand-hint {
  font-size: 9px;
  opacity: 0.45;
  line-height: 1;
}

.le-page .datagrid-note-timeline-card.is-call.is-expanded .datagrid-note-timeline-card-subject,
.le-note-modal-skin .datagrid-note-timeline-card.is-call.is-expanded .datagrid-note-timeline-card-subject {
  white-space: pre-wrap;
  max-height: none;
}

/* ── Timeline card font sizes — match sidebar 12-13px scale ── */
.le-page .datagrid-note-timeline-card-title,
.le-note-modal-skin .datagrid-note-timeline-card-title {
  font-size: 13px;
}

.le-page .datagrid-note-timeline-card-subject,
.le-note-modal-skin .datagrid-note-timeline-card-subject {
  font-size: 13px;
}

.le-page .datagrid-note-timeline-card-detail,
.le-note-modal-skin .datagrid-note-timeline-card-detail {
  font-size: 13px;
}

/* ── Automation action buttons (overlay in upper-left of timeline) ── */
.le-page .datagrid-v2-future-actions,
.le-note-modal-skin .datagrid-v2-future-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.le-page .datagrid-v2-future-actions.is-overlay,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  gap: 6px;
  padding: 3px;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn {
  height: auto;
  padding: 2px 2px;
  border: none;
  border-radius: 0;
  background: none;
  color: #888;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.12s ease;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn:hover,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn:hover {
  color: #ccc;
  background: none;
  border: none;
  box-shadow: none;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-active,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-active {
  color: #9ce0b8;
  background: none;
  border: none;
  box-shadow: none;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn:disabled,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn:disabled {
  color: #9ce0b8;
  background: none;
  border: none;
  box-shadow: none;
  cursor: default;
  opacity: 1;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-deactivate,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-deactivate {
  color: #d08080;
  background: none;
  border: none;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-deactivate:hover,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-deactivate:hover {
  color: #e09090;
  background: none;
  border: none;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-pause,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-pause {
  color: #c8a850;
  background: none;
  border: none;
}

.le-page .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-pause:hover,
.le-note-modal-skin .datagrid-v2-future-actions.is-overlay .datagrid-v2-activate-btn.is-pause:hover {
  color: #d8b860;
  background: none;
  border: none;
}

/* ── Gap tick group — larger dashed buttons in edit mode ── */
.le-page .datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger,
.le-page .datagrid-v2-gap-tick-group .datagrid-v2-attach-icon,
.le-page .datagrid-v2-gap-tick-group .datagrid-v2-event-trigger,
.le-note-modal-skin .datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger,
.le-note-modal-skin .datagrid-v2-gap-tick-group .datagrid-v2-attach-icon,
.le-note-modal-skin .datagrid-v2-gap-tick-group .datagrid-v2-event-trigger {
  border: 1px dashed #4a4a4a;
  background: rgba(42, 42, 42, 0.5);
  padding: 7px 14px;
  gap: 6px;
  font-size: 12px;
  border-radius: 2px;
}

.le-page .datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger span,
.le-page .datagrid-v2-gap-tick-group .datagrid-v2-attach-icon span,
.le-page .datagrid-v2-gap-tick-group .datagrid-v2-event-trigger span,
.le-note-modal-skin .datagrid-v2-gap-tick-group .datagrid-v2-insert-trigger span,
.le-note-modal-skin .datagrid-v2-gap-tick-group .datagrid-v2-attach-icon span,
.le-note-modal-skin .datagrid-v2-gap-tick-group .datagrid-v2-event-trigger span {
  max-width: 80px;
  opacity: 1;
}

.le-page .datagrid-v2-gap-tick-group:hover .datagrid-v2-insert-trigger,
.le-page .datagrid-v2-gap-tick-group:hover .datagrid-v2-attach-icon,
.le-page .datagrid-v2-gap-tick-group:hover .datagrid-v2-event-trigger,
.le-note-modal-skin .datagrid-v2-gap-tick-group:hover .datagrid-v2-insert-trigger,
.le-note-modal-skin .datagrid-v2-gap-tick-group:hover .datagrid-v2-attach-icon,
.le-note-modal-skin .datagrid-v2-gap-tick-group:hover .datagrid-v2-event-trigger {
  border-color: #6a6a6a;
  background: rgba(56, 56, 56, 0.7);
  padding: 7px 14px;
}

.le-page .datagrid-v2-gap-tick-group:hover .datagrid-v2-insert-trigger span,
.le-page .datagrid-v2-gap-tick-group:hover .datagrid-v2-attach-icon span,
.le-page .datagrid-v2-gap-tick-group:hover .datagrid-v2-event-trigger span,
.le-note-modal-skin .datagrid-v2-gap-tick-group:hover .datagrid-v2-insert-trigger span,
.le-note-modal-skin .datagrid-v2-gap-tick-group:hover .datagrid-v2-attach-icon span,
.le-note-modal-skin .datagrid-v2-gap-tick-group:hover .datagrid-v2-event-trigger span {
  max-width: 80px;
  opacity: 1;
}

.le-page .le-gap-tick-row,
.le-note-modal-skin .le-gap-tick-row {
  align-items: center;
  margin: 2px 0 6px;
}

.le-page .le-gap-tick-row .le-v2-spine-node.is-gap-tick,
.le-note-modal-skin .le-gap-tick-row .le-v2-spine-node.is-gap-tick {
  width: 10px;
  height: 10px;
  border-color: #66707a;
  background: #2a2f35;
}

.le-page .le-gap-tick-event,
.le-note-modal-skin .le-gap-tick-event {
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.le-page .le-gap-tick-event::before,
.le-note-modal-skin .le-gap-tick-event::before {
  opacity: 0.45;
}

.le-page .le-gap-tick-event .datagrid-v2-gap-tick-group,
.le-note-modal-skin .le-gap-tick-event .datagrid-v2-gap-tick-group {
  justify-content: flex-start;
}

.le-page .le-activity-list .datagrid-note-list-row,
.le-note-modal-skin .le-activity-list .datagrid-note-list-row {
  display: grid;
  grid-template-columns: 42px minmax(72px, auto) minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  margin: 0;
}

.le-page .le-activity-list .datagrid-note-item,
.le-note-modal-skin .le-activity-list .datagrid-note-item {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.le-page .le-activity-list .datagrid-note-item:hover,
.le-note-modal-skin .le-activity-list .datagrid-note-item:hover,
.le-page .le-activity-list .datagrid-note-item.is-expandable.is-expanded,
.le-note-modal-skin .le-activity-list .datagrid-note-item.is-expandable.is-expanded {
  border: none;
  background: transparent;
}

.le-page .le-activity-list .le-list-rail,
.le-note-modal-skin .le-activity-list .le-list-rail {
  position: relative;
  align-self: stretch;
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.le-page .le-activity-list .le-list-rail::after,
.le-note-modal-skin .le-activity-list .le-list-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  width: 1px;
  background: var(--line);
  opacity: 0.9;
}

.le-page .le-activity-list .le-list-rail-month,
.le-note-modal-skin .le-activity-list .le-list-rail-month {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
}

.le-page .le-activity-list .le-list-rail-dot,
.le-note-modal-skin .le-activity-list .le-list-rail-dot {
  position: absolute;
  top: 9px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line);
}

.le-page .le-activity-list .datagrid-note-row,
.le-note-modal-skin .le-activity-list .datagrid-note-row {
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  overflow: visible;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.le-page .le-activity-list .datagrid-note-event-type-badge,
.le-note-modal-skin .le-activity-list .datagrid-note-event-type-badge,
.le-page .le-activity-list .datagrid-v2-future-event-type,
.le-note-modal-skin .le-activity-list .datagrid-v2-future-event-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  color: var(--muted);
}

.le-page .le-activity-list .le-list-inline-link,
.le-note-modal-skin .le-list-inline-link {
  color: var(--link, #58a6ff);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

.le-page .le-activity-list .le-list-inline-link:hover,
.le-note-modal-skin .le-list-inline-link:hover {
  color: var(--link-hover, #79c0ff);
  text-decoration: underline;
}

.le-page .le-activity-list .le-list-inline-strong,
.le-note-modal-skin .le-list-inline-strong {
  font-weight: 600;
  color: var(--text);
}

.le-page .le-activity-list .le-list-inline-meta,
.le-note-modal-skin .le-list-inline-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

.le-delivery-ok,
.le-delivery-fail {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.le-delivery-ok {
  color: #3fb950;
}

.le-delivery-fail {
  color: #f85149;
}

.le-page .le-activity-list .datagrid-note-reply-link-btn,
.le-note-modal-skin .le-activity-list .datagrid-note-reply-link-btn,
.le-page .le-activity-list .datagrid-note-delete,
.le-note-modal-skin .le-activity-list .datagrid-note-delete,
.le-page .le-activity-list .datagrid-note-linked-notes-toggle-inline,
.le-note-modal-skin .le-activity-list .datagrid-note-linked-notes-toggle-inline {
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
}

.le-page .le-activity-list .datagrid-note-scheduled-status,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: capitalize;
  white-space: nowrap;
}

.le-page .le-activity-list .datagrid-note-scheduled-details,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-details {
  padding: 10px 0 0;
  margin: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  gap: 10px;
}

.le-page .le-activity-list .datagrid-note-date-outside,
.le-note-modal-skin .le-activity-list .datagrid-note-date-outside {
  width: auto;
  min-width: 72px;
  padding-top: 0;
  text-align: left;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.le-page .le-activity-list .datagrid-note-item.is-scheduled,
.le-note-modal-skin .le-activity-list .datagrid-note-item.is-scheduled {
  padding: 6px 0 8px;
  border-left: none;
  cursor: pointer;
}

.le-page .le-activity-list .datagrid-note-linked-notes,
.le-note-modal-skin .le-activity-list .datagrid-note-linked-notes {
  margin: 2px 0 0;
  gap: 2px;
}

.le-page .le-activity-list .datagrid-note-linked-note-content,
.le-note-modal-skin .le-activity-list .datagrid-note-linked-note-content,
.le-page .le-activity-list .datagrid-note-scheduled-details-row,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-details-row,
.le-page .le-activity-list .datagrid-note-scheduled-details-label,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-details-label,
.le-page .le-activity-list .datagrid-note-scheduled-details-meta,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-details-meta,
.le-page .le-activity-list .datagrid-note-scheduled-divider,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-divider {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.le-page .le-activity-list .datagrid-note-linked-note-content,
.le-note-modal-skin .le-activity-list .datagrid-note-linked-note-content {
  margin-left: 0;
  padding: 0;
  color: var(--muted);
}

.le-page .le-activity-list .datagrid-note-scheduled-divider,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-divider {
  padding: 6px 0 2px;
  color: var(--muted);
  background: transparent;
  border: none;
  text-align: left;
}

.le-page .le-activity-list .datagrid-note-scheduled-status.is-pending,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-status.is-pending {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2);
  color: #d7dee6;
}

.le-page .le-activity-list .datagrid-note-scheduled-status.is-scheduled,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-status.is-scheduled {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.22);
  color: #cfe3ff;
}

.le-page .le-activity-list .datagrid-note-scheduled-status.is-sent,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-status.is-sent,
.le-page .le-activity-list .datagrid-note-scheduled-status.is-completed,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-status.is-completed {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.2);
  color: #d3f7df;
}

.le-page .le-activity-list .datagrid-note-scheduled-status.is-failed,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-status.is-failed {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.18);
  color: #ffd5d5;
}

.le-page .le-activity-list .datagrid-note-item.is-scheduled:focus-visible,
.le-note-modal-skin .le-activity-list .datagrid-note-item.is-scheduled:focus-visible {
  outline: 1px solid rgba(96, 165, 250, 0.5);
  outline-offset: 4px;
}

.le-page .le-activity-list .datagrid-note-scheduled-summary,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-summary {
  display: block;
}

.le-page .le-activity-list .datagrid-note-row--scheduled,
.le-note-modal-skin .le-activity-list .datagrid-note-row--scheduled {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.le-page .le-activity-list .datagrid-note-scheduled-main,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.le-page .le-activity-list .datagrid-note-scheduled-title-line,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.le-page .le-activity-list .datagrid-note-scheduled-recipient,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-recipient,
.le-page .le-activity-list .datagrid-note-scheduled-meta-line,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-meta-line {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.le-page .le-activity-list .datagrid-note-scheduled-meta-line,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.le-page .le-activity-list .datagrid-note-scheduled-kind,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-kind {
  font-weight: 700;
  color: var(--text);
}

.le-page .le-activity-list .datagrid-note-scheduled-meta-sep,
.le-note-modal-skin .le-activity-list .datagrid-note-scheduled-meta-sep {
  color: var(--muted);
}

.le-page .le-activity-list .le-timeline-detail-list,
.le-note-modal-skin .le-activity-list .le-timeline-detail-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.le-page .le-timeline-detail-item,
.le-note-modal-skin .le-timeline-detail-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.le-page .le-timeline-detail-item dt,
.le-note-modal-skin .le-timeline-detail-item dt {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.le-page .le-timeline-detail-item dd,
.le-note-modal-skin .le-timeline-detail-item dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.le-page .le-timeline-detail-section,
.le-note-modal-skin .le-timeline-detail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.le-page .le-timeline-detail-section-title,
.le-note-modal-skin .le-timeline-detail-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.le-page .le-timeline-detail-text,
.le-note-modal-skin .le-timeline-detail-text {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  background: #2d2d2d;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE toolbar consistency overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pro toolbar row — restore padding stripped by DataGrid.css:8792 ── */
.le-page .datagrid-note-main-pro-row .datagrid-note-pro-toolbar,
.le-note-modal-skin .datagrid-note-main-pro-row .datagrid-note-pro-toolbar {
  padding: 4px 8px;
}

/* ── View-toggle overlay buttons: plain text links, not pill buttons ── */
.le-page .datagrid-note-view-toggle-group.is-overlay,
.le-note-modal-skin .datagrid-note-view-toggle-group.is-overlay {
  gap: 6px;
  padding: 3px;
}

.le-page .datagrid-note-view-icon-btn,
.le-note-modal-skin .datagrid-note-view-icon-btn {
  height: auto;
  padding: 2px 2px;
  border: none;
  border-radius: 0;
  background: none;
  color: #888;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.12s ease;
}

.le-page .datagrid-note-view-icon-btn:hover,
.le-note-modal-skin .datagrid-note-view-icon-btn:hover {
  background: none;
  border: none;
  color: #ccc;
}

.le-page .datagrid-note-view-icon-btn.is-active,
.le-note-modal-skin .datagrid-note-view-icon-btn.is-active {
  background: none;
  border: none;
  color: #fff;
}

/* ── Counteract modal-skin .datagrid-pro-pill overrides (DataGrid.css 7771-7774, 7828)
   Modal skin inflates pills to height:28px / padding:0 10px / font-size:12px.
   .le-page and .le-note-modal-skin are on DIFFERENT elements (parent/child),
   so use descendant chain for specificity (0,3,0) to beat (0,2,0) modal-skin rules. ── */
.le-page .le-note-modal-skin .datagrid-pro-pill {
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Keep .is-active visually consistent with inactive pills — active state is
   communicated by the slightly brighter background only.
   Beats DataGrid.css:8823 specificity (0,2,1). */
.le-page .le-note-modal-skin .datagrid-pro-pill.is-active {
  border-color: #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
}

/* ── Expand/Compact pill — fixed width so text swap doesn't shift layout ── */
.le-pill-fixed {
  width: 90px;
  justify-content: center;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE danger pill (Erase Timeline)
   ═══════════════════════════════════════════════════════════════════════════ */

.le-page .datagrid-pro-pill.is-danger,
.le-note-modal-skin .datagrid-pro-pill.is-danger {
  --pill-color: #e04040;
  color: #f4a8a8;
  border-color: rgba(224, 47, 68, 0.38);
  background: rgba(224, 47, 68, 0.10);
}

.le-page .datagrid-pro-pill.is-danger:hover:not(:disabled),
.le-note-modal-skin .datagrid-pro-pill.is-danger:hover:not(:disabled) {
  color: #fcc;
  border-color: rgba(224, 47, 68, 0.58);
  background: rgba(224, 47, 68, 0.18);
}

.le-page .datagrid-pro-pill.is-danger:active:not(:disabled),
.le-note-modal-skin .datagrid-pro-pill.is-danger:active:not(:disabled) {
  background: rgba(224, 47, 68, 0.24);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE event card delete (red X on future event cards)
   ═══════════════════════════════════════════════════════════════════════════ */

.le-event-card-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: #e04444;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}

.le-event-card-delete:hover {
  color: #ff6666;
  transform: scale(1.15);
}

.le-event-card-delete:active {
  color: #cc2222;
  transform: scale(1.0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE hub card overrides — compact, flat, minimal
   Base styles in DataGrid.css 8599-8785 are too bulky for the LE context.
   ═══════════════════════════════════════════════════════════════════════════ */

.le-page .datagrid-hub-card,
.le-note-modal-skin .datagrid-hub-card {
  min-height: 160px;
  border-radius: 3px;
  box-shadow: none;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  user-select: text;
  -webkit-user-select: text;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.le-page .datagrid-hub-card:hover,
.le-note-modal-skin .datagrid-hub-card:hover {
  background: #1e1e1e;
  border-color: #383838;
}

.le-page .datagrid-hub-card *,
.le-note-modal-skin .datagrid-hub-card * {
  user-select: text;
  -webkit-user-select: text;
}

.le-page .datagrid-hub-card-top,
.le-note-modal-skin .datagrid-hub-card-top {
  border-bottom: none;
  padding: 10px 12px 8px;
}

.le-page .datagrid-hub-card-eyebrow,
.le-note-modal-skin .datagrid-hub-card-eyebrow {
  margin-bottom: 5px;
  font-size: 9px;
  font-family: inherit;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.05em;
}

.le-page .datagrid-hub-card-title,
.le-note-modal-skin .datagrid-hub-card-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #d8d8d8;
  margin-bottom: 5px;
}

.le-page .datagrid-hub-card-eyebrow-icon,
.le-note-modal-skin .datagrid-hub-card-eyebrow-icon {
  color: inherit;
}

.le-page .datagrid-hub-card-desc,
.le-note-modal-skin .datagrid-hub-card-desc {
  font-size: 13px;
  line-height: 1.45;
  color: #7a7a7a;
  -webkit-line-clamp: 3;
}

.le-page .datagrid-hub-card-body,
.le-note-modal-skin .datagrid-hub-card-body {
  padding: 8px 12px 10px;
  gap: 6px;
}

/* Hide the "Integrations" section label — badges are self-evident */
.le-page .datagrid-hub-card-section-label,
.le-note-modal-skin .datagrid-hub-card-section-label {
  display: none;
}

/* Vendor badges — compact inline, no bg/border */
.le-page .datagrid-hub-card-vendor,
.le-note-modal-skin .datagrid-hub-card-vendor {
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  gap: 3px;
}

.le-page .datagrid-hub-card-vendor-mark,
.le-note-modal-skin .datagrid-hub-card-vendor-mark {
  width: 11px;
  height: 11px;
}

.le-page .datagrid-hub-card-vendor-mark img,
.le-note-modal-skin .datagrid-hub-card-vendor-mark img {
  width: 11px;
  height: 11px;
}

.le-page .datagrid-hub-card-vendor-name,
.le-note-modal-skin .datagrid-hub-card-vendor-name {
  font-size: 8px;
  color: #555;
}

.le-page .datagrid-hub-card-vendors,
.le-note-modal-skin .datagrid-hub-card-vendors {
  gap: 6px;
}

.le-page .datagrid-hub-card-body,
.le-note-modal-skin .datagrid-hub-card-body {
  padding: 4px 12px 8px;
  gap: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMAIL CAMPAIGN CARD — expand/collapse + HTML preview
   ═══════════════════════════════════════════════════════════════════════════ */

/* Clickable email campaign cards with HTML body */
.le-page .datagrid-note-timeline-card.is-email-campaign,
.le-note-modal-skin .datagrid-note-timeline-card.is-email-campaign {
  cursor: pointer;
}

/* Email participants row — design tokens (standalone, outside table) */
.le-page .datagrid-note-timeline-card .datagrid-note-email-participants,
.le-note-modal-skin .datagrid-note-timeline-card .datagrid-note-email-participants {
  height: 20px;
  min-height: 20px;
  padding: 0 6px;
  margin: 4px 15px;
  border-radius: 2px;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  font-size: 12px;
  font-weight: 700;
}

/* ── Email meta table: participants + subject as connected rows ── */
.le-page .le-email-meta-table,
.le-note-modal-skin .le-email-meta-table {
  display: flex;
  flex-direction: column;
  margin: 4px 15px;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  overflow: hidden;
  max-width: 100%;
}

/* Row 1: participants — strip own border/margin/radius when inside table */
.le-page .le-email-meta-table .datagrid-note-email-participants,
.le-note-modal-skin .le-email-meta-table .datagrid-note-email-participants {
  height: 20px;
  min-height: 20px;
  padding: 0 6px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
}

.le-page .le-email-meta-table .datagrid-note-email-party span,
.le-note-modal-skin .le-email-meta-table .datagrid-note-email-party span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row 2: subject pill — top divider */
.le-page .le-subject-pill,
.le-note-modal-skin .le-subject-pill {
  display: flex;
  align-items: center;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border-top: 1px solid #5f5f5f;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #cfcfcf;
  max-width: 100%;
  overflow: hidden;
}

.le-page .le-subject-pill.is-expanded,
.le-note-modal-skin .le-subject-pill.is-expanded {
  height: auto;
  min-height: 20px;
  align-items: flex-start;
}

.le-subject-pill-label {
  flex-shrink: 0;
  padding: 0 6px;
  color: #fff;
  background: #000;
  border-right: 1px solid #5f5f5f;
  white-space: nowrap;
  height: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: flex-start;
}

.le-subject-pill-text {
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.le-subject-pill.is-expanded .le-subject-pill-text {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  padding: 3px 6px;
  line-height: 1.4;
  word-break: break-word;
}

.le-subject-pill-toggle {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #888;
  font-size: 9px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  cursor: pointer;
  line-height: 1;
  vertical-align: baseline;
  text-decoration: underline;
}

.le-subject-pill-toggle:hover {
  color: #cfcfcf;
}

/* Suppress hover border/background shift on all past-event cards */
.le-page .datagrid-note-timeline-card.is-past-event:hover,
.le-note-modal-skin .datagrid-note-timeline-card.is-past-event:hover {
  border-color: #3a3a3a;
  background: rgba(115, 115, 115, 0.12);
}

.le-page .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card.is-past-event:hover,
.le-note-modal-skin .datagrid-note-timeline-event-row.is-left .datagrid-note-timeline-card.is-past-event:hover {
  border-color: #2a3c4a;
  background: #161e26;
}

/* Inline mail icon in campaign badge — sized to match badge text */
/* ── Past event: E-mail Campaign badge row (megaphone + split badge) ── */
.le-past-campaign-badge-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 15px 6px;
}

.le-past-campaign-badge-icon {
  display: inline-flex;
  align-items: center;
  color: #7aafff;
  flex-shrink: 0;
  line-height: 1;
}

.le-past-campaign-badge-icon.is-sms {
  color: #6bbd6b;
}

/* ── Future event: E-mail Campaign split badge ── */
.le-future-campaign-badge {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  min-height: 16px;
  border-radius: 2px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 1;
  min-width: 0;
}

.le-future-campaign-badge-label {
  padding: 2px 6px;
  background: rgba(122, 175, 255, 0.14);
  color: #7aafff;
  white-space: nowrap;
  border: 1px solid rgba(122, 175, 255, 0.22);
  border-right: none;
  border-radius: 2px 0 0 2px;
}

.le-future-campaign-badge-label.is-sms {
  background: rgba(107, 189, 107, 0.14);
  color: #6bbd6b;
  border-color: rgba(107, 189, 107, 0.22);
}

.le-future-campaign-badge-name {
  padding: 2px 6px;
  background: rgba(120, 120, 120, 0.12);
  color: #cfcfcf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(122, 175, 255, 0.22);
  border-left: none;
  border-radius: 0 2px 2px 0;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.le-future-campaign-badge.is-sms .le-future-campaign-badge-name {
  border-color: rgba(107, 189, 107, 0.22);
}

/* Sandboxed iframe for rendered HTML email */
.le-email-campaign-preview {
  display: block;
  width: 100%;
  min-height: 120px;
  max-height: 600px;
  border: none;
  border-top: 1px solid #333;
  border-radius: 0;
  background: #fff;
  margin-top: 8px;
}

/* When expanded, keep card padding flush for iframe */
.le-page .datagrid-note-timeline-card.is-email-campaign.is-expanded,
.le-note-modal-skin .datagrid-note-timeline-card.is-email-campaign.is-expanded {
  padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSER ACTION BUTTONS — match toolbar pill design system
   Overrides datagrid-twilio-composer-action-btn (DataGrid.css:7898) and
   datagrid-twilio-composer-ai-btn (DataGrid.css:8042) to match the
   LE pill tokens: 20px / 2px / 10px / 700 / #5f5f5f / rgba(120,120,120,.15)
   ═══════════════════════════════════════════════════════════════════════════ */

.le-page .datagrid-twilio-composer-action-btn,
.le-note-modal-skin .datagrid-twilio-composer-action-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  background: #242424;
  color: #c0c0c0;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  box-shadow: none;
}

.le-page .datagrid-twilio-composer-action-btn:hover:not(:disabled),
.le-note-modal-skin .datagrid-twilio-composer-action-btn:hover:not(:disabled) {
  border-color: #505050;
  background: #2c2c2c;
  color: #e0e0e0;
}

.le-page .datagrid-twilio-composer-action-btn.is-primary,
.le-note-modal-skin .datagrid-twilio-composer-action-btn.is-primary {
  border-color: #3a5f8a;
  background: rgba(74, 122, 181, 0.18);
  color: #8abcde;
}

.le-page .datagrid-twilio-composer-action-btn.is-primary:hover:not(:disabled),
.le-note-modal-skin .datagrid-twilio-composer-action-btn.is-primary:hover:not(:disabled) {
  border-color: #4a7ab5;
  background: rgba(74, 122, 181, 0.28);
  color: #b0d4f0;
}

.le-page .datagrid-twilio-composer-action-btn:disabled,
.le-note-modal-skin .datagrid-twilio-composer-action-btn:disabled {
  opacity: 0.45;
}

/* AI generate button in composer */
.le-page .datagrid-twilio-composer-ai-btn,
.le-note-modal-skin .datagrid-twilio-composer-ai-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  background: #242424;
  color: #c0c0c0;
}

.le-page .datagrid-twilio-composer-ai-btn:hover:not(:disabled),
.le-note-modal-skin .datagrid-twilio-composer-ai-btn:hover:not(:disabled) {
  border-color: #505050;
  background: #2c2c2c;
  color: #e0e0e0;
}

/* AI style select in composer */
.le-page .datagrid-twilio-composer-ai-style,
.le-note-modal-skin .datagrid-twilio-composer-ai-style {
  height: 28px;
  font-size: 13px;
  font-weight: 400;
  border: 1px solid #333;
  border-radius: 3px;
  background-color: #1e1e1e;
  color: #c0c0c0;
  padding: 0 24px 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEND SINGLE EMAIL (TwilioCampaignModal inline) — LE design system
   Overrides the tc-* classes to match LE spacing, border-radius (2px), and
   pill token palette when rendered inside the LE workspace.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inputs + textareas: flatten border-radius, muted focus ring */
.le-page .tc-input,
.le-note-modal-skin .tc-input {
  border-radius: 2px;
  padding: 5px 8px;
}

.le-page .tc-input:focus,
.le-note-modal-skin .tc-input:focus {
  border-color: #5a5a5a;
  box-shadow: 0 0 0 1px rgba(160, 160, 160, 0.15);
}

.le-page .tc-textarea,
.le-note-modal-skin .tc-textarea {
  border-radius: 2px;
}

.le-page .tc-textarea:focus,
.le-note-modal-skin .tc-textarea:focus {
  border-color: #5a5a5a;
  box-shadow: 0 0 0 1px rgba(160, 160, 160, 0.15);
}

/* Preview panel */
.le-page .tc-preview-panel,
.le-note-modal-skin .tc-preview-panel {
  border-radius: 2px;
}

/* Email config note */
.le-page .tc-email-config-note,
.le-note-modal-skin .tc-email-config-note {
  border-radius: 2px;
}

/* Variable pills → LE pill tokens */
.le-page .tc-pill,
.le-note-modal-skin .tc-pill {
  height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  border: 1px solid #5f5f5f;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
  font-family: monospace;
}

.le-page .tc-pill:hover,
.le-note-modal-skin .tc-pill:hover {
  border-color: #777;
  background: rgba(120, 120, 120, 0.28);
  color: #eeeeee;
}

/* AI + Template buttons → LE pill tokens */
.le-page .tc-ai-btn,
.le-page .tc-template-btn,
.le-note-modal-skin .tc-ai-btn,
.le-note-modal-skin .tc-template-btn {
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #5f5f5f;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.15);
  color: #cfcfcf;
}

.le-page .tc-ai-btn:hover,
.le-page .tc-template-btn:hover,
.le-note-modal-skin .tc-ai-btn:hover,
.le-note-modal-skin .tc-template-btn:hover {
  border-color: #777;
  background: rgba(120, 120, 120, 0.28);
  color: #eeeeee;
}

.le-page .tc-ai-btn.is-active,
.le-page .tc-template-btn.is-active,
.le-note-modal-skin .tc-ai-btn.is-active,
.le-note-modal-skin .tc-template-btn.is-active {
  border-color: #888;
  background: rgba(120, 120, 120, 0.32);
  color: #ffffff;
}

/* Mode toggle (Text / HTML) → LE pill tokens */
.le-page .tc-mode-toggle,
.le-note-modal-skin .tc-mode-toggle {
  border-radius: 2px;
  border-color: #5f5f5f;
}

.le-page .tc-mode-btn,
.le-note-modal-skin .tc-mode-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
  height: 20px;
  color: #cfcfcf;
}

.le-page .tc-mode-btn + .tc-mode-btn,
.le-note-modal-skin .tc-mode-btn + .tc-mode-btn {
  border-left-color: #5f5f5f;
}

.le-page .tc-mode-btn.is-active,
.le-note-modal-skin .tc-mode-btn.is-active {
  background: rgba(120, 120, 120, 0.32);
  color: #ffffff;
}

/* Footer buttons → LE pill tokens */
.le-page .tc-btn,
.le-note-modal-skin .tc-btn {
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
  height: 24px;
}

.le-page .tc-btn-cancel,
.le-note-modal-skin .tc-btn-cancel {
  border-color: #5f5f5f;
  color: #cfcfcf;
}

.le-page .tc-btn-cancel:hover,
.le-note-modal-skin .tc-btn-cancel:hover {
  background: rgba(120, 120, 120, 0.28);
  color: #eeeeee;
}

.le-page .tc-btn-send,
.le-note-modal-skin .tc-btn-send {
  border-radius: 2px;
}

/* AI generation panel */
.le-page .tc-ai-context-panel,
.le-note-modal-skin .tc-ai-context-panel {
  border-radius: 2px;
}

.le-page .tc-ai-context-textarea,
.le-note-modal-skin .tc-ai-context-textarea {
  border-radius: 2px;
}

.le-page .tc-ai-generate-btn,
.le-note-modal-skin .tc-ai-generate-btn {
  height: 20px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 2px;
}

/* Templates dropdown + badges */
.le-page .tc-templates-dropdown,
.le-note-modal-skin .tc-templates-dropdown {
  border-radius: 2px;
}

.le-page .tc-template-html-badge,
.le-page .tc-template-subj-badge,
.le-note-modal-skin .tc-template-html-badge,
.le-note-modal-skin .tc-template-subj-badge {
  border-radius: 2px;
}

.le-page .tc-template-count,
.le-note-modal-skin .tc-template-count {
  border-radius: 2px;
}

.le-page .datagrid-note-sidebar-field .datagrid-note-sidebar-select,
.le-note-modal-skin .datagrid-note-sidebar-field .datagrid-note-sidebar-select {
  width: auto;
  max-width: 132px;
  min-width: 0;
  height: 22px;
  padding: 0 22px 0 6px;
  font-size: 12px;
  line-height: 20px;
  background-size: 10px;
  background-position: right 6px center;
}

/* Recipient bar */
.le-page .tc-recipient-bar,
.le-note-modal-skin .tc-recipient-bar {
  border-radius: 2px;
}

/* HTML preview iframe in TC modal */
.le-page .tc-html-preview-frame,
.le-note-modal-skin .tc-html-preview-frame {
  border-radius: 2px;
}

/* Tighten inline layout gap */
.le-page .tc-modal--inline .tc-layout,
.le-note-modal-skin .tc-modal--inline .tc-layout {
  gap: 16px;
}

.le-page .tc-modal--inline .tc-compose,
.le-note-modal-skin .tc-modal--inline .tc-compose {
  gap: 12px;
}

.le-page .tc-modal--inline .tc-footer,
.le-note-modal-skin .tc-modal--inline .tc-footer {
  padding: 12px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUTURE-EVENT LAZY-LOAD SENTINEL
   ═══════════════════════════════════════════════════════════════════════════ */

.le-future-sentinel,
.le-timeline-load-more {
  text-align: center;
  padding: 18px 0;
  color: #555;
  font-size: 12px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  contain: layout;
}

.le-timeline-load-more {
  display: flex;
  justify-content: center;
}

.le-timeline-load-more button {
  padding: 7px 12px;
  border: 1px solid #353535;
  border-radius: 3px;
  background: #181818;
  color: #a6a6a6;
  font: inherit;
  cursor: pointer;
}

.le-timeline-load-more button:hover {
  border-color: #4a4a4a;
  background: #1d1d1d;
  color: #d0d0d0;
}

.le-future-sentinel-loading-hint {
  display: inline-block;
}

.le-future-batch-loading,
.le-timeline-batch-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #888;
}

.le-future-sentinel-complete {
  color: #8f8f8f;
}

.le-lazy-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(136, 136, 136, 0.3);
  border-top-color: #888;
  border-radius: 50%;
  animation: le-lazy-spin 0.7s linear infinite !important;
  animation-duration: 0.7s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  flex-shrink: 0;
  transform-origin: center;
  will-change: transform;
}

@keyframes le-lazy-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Skeleton loading placeholders ────────────────────────────────────────── */

.le-lazy-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
  width: 100%;
  animation: le-lazy-skeleton-enter 0.12s ease-out both;
  contain: layout paint;
}

@keyframes le-lazy-skeleton-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes le-lazy-skeleton-sheen {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}

.le-lazy-skeleton-row.datagrid-v2-future-row {
  pointer-events: none;
  min-height: 50px;
  height: 50px;
  align-items: center;
  contain: layout paint;
}

.le-lazy-skeleton-card.datagrid-v2-future-event {
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  padding: 7px 8px;
  overflow: hidden;
  cursor: default;
  animation: none;
  transition: none;
  background: #181818;
  border-color: #2b2b2b;
}

.le-lazy-skeleton-card.datagrid-v2-future-event:not(.is-editing):hover {
  filter: none;
  background: #181818;
  border-color: #2b2b2b;
}

.le-lazy-skeleton-card.datagrid-v2-future-event::before {
  opacity: 0.4;
  transition: none;
}

.le-lazy-skeleton-node.le-v2-spine-node {
  background: #1a1a1a;
  border: 2px solid rgba(120, 120, 120, 0.3);
  box-shadow: none;
  transition: none;
}

.le-lazy-skeleton-summary {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-width: 0;
}

.le-lazy-skeleton-line {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 10px;
  min-width: 0;
}

.le-lazy-skeleton-bar {
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.095) 46%,
    rgba(255, 255, 255, 0.045) 92%
  );
  background-size: 180% 100%;
  animation: le-lazy-skeleton-sheen 1.25s linear infinite !important;
  animation-duration: 1.25s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  opacity: 1;
  transform: translateZ(0);
  will-change: background-position;
}

.le-lazy-skeleton-bar--badge {
  width: 32px;
  flex-shrink: 0;
}

.le-lazy-skeleton-bar--recipient {
  flex-shrink: 1;
}

.le-lazy-skeleton-bar--date {
  width: 55px;
  margin-left: auto;
  flex-shrink: 0;
}

.le-lazy-skeleton-bar--subject {
  flex-shrink: 1;
}

.le-lazy-skeleton-row.is-wide .le-lazy-skeleton-bar--recipient {
  width: 110px;
}

.le-lazy-skeleton-row.is-short .le-lazy-skeleton-bar--recipient {
  width: 85px;
}

.le-lazy-skeleton-row.is-mid .le-lazy-skeleton-bar--recipient {
  width: 95px;
}

.le-lazy-skeleton-row.is-wide .le-lazy-skeleton-bar--subject {
  width: 140px;
}

.le-lazy-skeleton-row.is-mid .le-lazy-skeleton-bar--subject {
  width: 100px;
}

.le-lazy-skeleton > :nth-child(2) .le-lazy-skeleton-bar {
  animation-delay: 0.08s;
}

.le-lazy-skeleton > :nth-child(3) .le-lazy-skeleton-bar {
  animation-delay: 0.16s;
}

.le-future-sentinel-loading-hint {
  color: #555;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB BACKGROUND DIFFERENTIATION — add surface depth between sidebar,
   the actions container, and individual action cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hub grid wrapper — no inset bg */
.le-page .datagrid-note-action-hub-grid,
.le-note-modal-skin .datagrid-note-action-hub-grid {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.le-business-email-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.le-business-email-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--fgColor-default, #24292f);
  font-size: 12px;
  line-height: 1.35;
}

.le-business-email-option input {
  margin: 2px 0 0;
}

.le-business-email-option span {
  word-break: break-word;
}
/* ─── Posts page ──────────────────────────────────────────────────────────── */
/* Relies on typography, layout, and semantics — minimal chrome.              */

.posts-page {
  min-height: 100vh;
  background: #fff;
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.7;
  /* Anchor scrolls (and slug-change scroll resets) leave room for the
     sticky AppHeader (44px) so article content is never hidden underneath it. */
  scroll-padding-top: 56px;
}

/* ─── Public header ───────────────────────────────────────────────────────── */

.posts-public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}

.posts-public-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.posts-public-brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.posts-public-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.posts-public-link {
  color: #555;
  font-size: 13px;
  text-decoration: none;
}

.posts-public-link:hover {
  color: #111;
}

.posts-public-cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  background: transparent;
  color: #222;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}

.posts-public-cta:hover {
  border-color: #aaa;
  background: #f5f5f5;
}

/* ─── Main container ──────────────────────────────────────────────────────── */

.posts-main {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  /* Default padding-top sits below the public header. has-app-header below
     adds extra clearance for the 44px sticky AppHeader. */
  padding: 40px 0 72px;
  scroll-margin-top: 56px;
}

.posts-page.has-app-header .posts-main {
  padding-top: 64px;
}

.posts-index-shell,
.posts-article-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Index hero image ────────────────────────────────────────────────────── */

.posts-index-hero {
  margin: 0 0 32px;
  padding: 0;
  border: none;
}

.posts-index-hero-img {
  width: 100%;
  height: 360px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.posts-index-hero-placeholder {
  width: 100%;
  height: 360px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #e8edf2 0%, #d4dce6 40%, #e0e7ef 70%, #c8d4e0 100%);
  position: relative;
  overflow: hidden;
}

.posts-index-hero-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(26, 111, 196, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 30%, rgba(56, 189, 248, 0.08) 0%, transparent 55%);
}

.posts-index-hero-placeholder::after {
  content: "leadrunna";
  position: absolute;
  bottom: 20px;
  left: 24px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(60, 80, 100, 0.5);
  letter-spacing: 0.06em;
}

/* ─── Index page ──────────────────────────────────────────────────────────── */

.posts-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}

.posts-index-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.posts-index-main .posts-index-hero {
  margin: 0;
}

.posts-feature-card {
  padding: 18px 20px;
  border: 1px solid #dde6f1;
  border-radius: 8px;
  background: #f8fbff;
}

.posts-feature-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
}

.posts-feature-card p {
  margin: 0 0 10px;
  color: #4b5d73;
}

/* ─── Post list ───────────────────────────────────────────────────────────── */

.posts-list {
  display: flex;
  flex-direction: column;
}

.posts-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.posts-list-item {
  padding: 24px 0;
  border-bottom: 1px solid #ebebeb;
}

.posts-list-item-grid {
  padding: 14px 14px 12px;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  background: #fff;
}

.posts-list-item-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.posts-list-item-meta span + span::before {
  content: " · ";
}

.posts-list-item h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.posts-list-item h2 a {
  color: #111;
  text-decoration: none;
}

.posts-list-item h2 a:hover {
  text-decoration: underline;
}

.posts-list-item p {
  margin: 0 0 8px;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

.posts-list-item-tags {
  font-size: 12px;
  color: #999;
}

.posts-list-item-tags span + span::before {
  content: " · ";
}

.posts-index-sidebar {
  position: sticky;
  top: 62px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  background: #fafafa;
  padding: 12px;
}

.posts-side-section {
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid #e6e9ee;
}

.posts-side-section:first-of-type {
  padding-top: 10px;
  margin-top: 8px;
}

.posts-side-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a7580;
}

.posts-side-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.posts-side-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #d9e0e8;
  background: #fff;
  color: #4b5f74;
  font-size: 11px;
}

.posts-side-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.posts-side-posts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.posts-side-post-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  text-decoration: none;
  border-bottom: 1px dashed #e2e6ec;
}

.posts-side-post-link:last-child {
  border-bottom: none;
}

.posts-side-post-label {
  font-size: 12px;
  line-height: 1.4;
  color: #1f2f42;
}

.posts-side-post-link:hover .posts-side-post-label {
  color: #1a6fc4;
  text-decoration: underline;
}

.posts-side-link {
  color: #1a6fc4;
  text-decoration: none;
  font-size: 13px;
}

.posts-side-link:hover {
  text-decoration: underline;
}

/* ─── Article back nav ────────────────────────────────────────────────────── */

.posts-article-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid #ebebeb;
}

.posts-back-link,
.posts-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #1a6fc4;
  text-decoration: none;
}

.posts-back-link:hover,
.posts-inline-link:hover {
  text-decoration: underline;
}

/* ─── Article header ──────────────────────────────────────────────────────── */

.posts-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a6fc4;
  margin-bottom: 12px;
}

.posts-hero {
  margin-bottom: 32px;
}

.posts-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #111;
}

.posts-hero-summary {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.65;
  color: #444;
}

.posts-meta-row {
  font-size: 13px;
  color: #888;
  margin-bottom: 14px;
}

.posts-meta-row time,
.posts-meta-row span {
  display: inline;
}

.posts-meta-row span + span::before,
.posts-meta-row time + span::before {
  content: " · ";
}

.posts-tag-row {
  font-size: 12px;
  color: #aaa;
}

.posts-tag-chip + .posts-tag-chip::before {
  content: " · ";
}

/* ─── Hero image ──────────────────────────────────────────────────────────── */

.posts-hero-figure {
  margin: 24px 0 32px;
}

.posts-hero-image {
  width: 100%;
  max-height: 420px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background: #f0f0f0;
}

.posts-hero-figure figcaption {
  margin-top: 8px;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ─── Article body ────────────────────────────────────────────────────────── */

.posts-body {
  font-size: 16px;
  line-height: 1.75;
  color: #222;
}

.posts-section + .posts-section {
  margin-top: 40px;
}

.posts-section h2 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #111;
}

.posts-body p {
  margin: 0 0 18px;
  color: #333;
}

.posts-section-list {
  margin: 0 0 18px;
  padding-left: 22px;
  color: #333;
}

.posts-section-list li {
  margin-bottom: 6px;
}

.posts-section-figure {
  margin: 22px 0 24px;
}

.posts-section-figure img {
  width: 100%;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background: #f0f0f0;
}

.posts-section-figure figcaption {
  margin-top: 8px;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ─── Docs callout ────────────────────────────────────────────────────────── */

.posts-docs-block {
  margin: 20px 0;
  padding: 12px 16px;
  border-left: 3px solid #c8ddf8;
  background: #f4f8ff;
}

.posts-docs-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5580a8;
  margin-bottom: 6px;
}

.posts-docs-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
}

.posts-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1a6fc4;
  text-decoration: none;
}

.posts-doc-link:hover {
  text-decoration: underline;
}

.posts-doc-link + .posts-doc-link::before {
  content: "·";
  margin-right: 4px;
  color: #aac4e0;
}

/* ─── Related posts ───────────────────────────────────────────────────────── */

.posts-related-shell {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #ebebeb;
}

.posts-related-shell h2 {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 600;
  color: #111;
}

.posts-related-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.posts-related-item {
  padding: 16px 0;
  border-bottom: 1px solid #ebebeb;
}

.posts-related-item:last-child {
  border-bottom: none;
}

.posts-related-item-meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.posts-related-item h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.posts-related-item h3 a {
  color: #111;
  text-decoration: none;
}

.posts-related-item h3 a:hover {
  text-decoration: underline;
}

.posts-related-item p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .posts-main {
    width: calc(100% - 32px);
    padding: 28px 0 56px;
  }

  .posts-index-layout {
    grid-template-columns: 1fr;
  }

  .posts-list-grid {
    grid-template-columns: 1fr;
  }

  .posts-index-sidebar {
    position: static;
  }

  .posts-public-header {
    padding: 12px 16px;
  }

  .posts-hero h1 {
    font-size: 24px;
  }
}
/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line > span::selection, 
.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
.cm-fat-cursor { caret-color: transparent; }
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: 0;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
/* Simple public feature pages adapted from PostsPage.css and LandingNext.css. */

.product-feature-page {
  --product-feature-accent: #79c0ff;

  min-height: 100vh;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.7;
}

.product-feature-page.is-grid {
  --product-feature-accent: #1f6feb;
  --product-feature-action-icon-bg: #ddf4ff;
  --product-feature-action-icon-fg: #0969da;
}

.product-feature-page.is-feed {
  --product-feature-accent: #238636;
  --product-feature-action-icon-bg: #dafbe1;
  --product-feature-action-icon-fg: #1a7f37;
}

.product-feature-page.is-engine {
  --product-feature-accent: #8250df;
  --product-feature-action-icon-bg: #fbefff;
  --product-feature-action-icon-fg: #8250df;
}

.product-feature-hero,
.product-feature-overview,
.product-feature-story,
.product-feature-media-section,
.product-feature-plans,
.product-feature-api,
.product-feature-related {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.product-feature-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 28px;
  padding: 44px 0 34px;
}

.product-feature-hero-copy {
  min-width: 0;
}

.product-feature-kicker,
.product-feature-note span {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}

.product-feature-kicker {
  margin: 0 0 12px;
  color: var(--product-feature-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-feature-hero h1,
.product-feature-section-heading h2 {
  margin: 0;
  color: #111111;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.product-feature-hero h1 {
  max-width: 560px;
  font-size: clamp(28px, 3.4vw, 44px);
}

.product-feature-summary {
  max-width: 580px;
  margin: 14px 0 0;
  color: #4b5d73;
  font-size: 16px;
  line-height: 1.58;
}

.product-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.product-feature-primary,
.product-feature-secondary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.product-feature-action-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  color: currentColor;
}

.product-feature-secondary .product-feature-action-icon {
  background: var(--product-feature-action-icon-bg);
  color: var(--product-feature-action-icon-fg);
}

.product-feature-primary {
  border: 1px solid var(--product-feature-accent);
  background: var(--product-feature-accent);
  color: #ffffff;
}

.product-feature-primary:hover,
.product-feature-primary:focus,
.product-feature-primary:visited {
  color: #ffffff;
  text-decoration: none;
}

.product-feature-secondary {
  border: 1px solid #d0d0d0;
  background: transparent;
  color: #222222;
}

.product-feature-secondary:hover,
.product-feature-secondary:focus,
.product-feature-secondary:visited {
  color: #222222;
  text-decoration: none;
}

.product-feature-secondary:hover {
  border-color: #aaaaaa;
  background: #f5f5f5;
}

.product-feature-hero-media {
  min-width: 0;
  padding: 8px;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  background: #ffffff;
}

.product-feature-hero-media img,
.product-feature-media-frame img,
.product-feature-media-frame video {
  display: block;
  width: 100%;
  border-radius: 6px;
}

.product-feature-hero-media img {
  aspect-ratio: 1400 / 800;
  object-fit: cover;
  object-position: top left;
}

.product-feature-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 34px 0 44px;
  border-top: 1px solid #ebebeb;
}

.product-feature-media-card,
.product-feature-code-editor {
  border: 1px solid #ebebeb;
  border-radius: 8px;
  background: #ffffff;
}

.product-feature-note {
  padding: 0 28px 0 0;
  border-right: 1px solid #ebebeb;
}

.product-feature-note span {
  color: var(--product-feature-accent);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-feature-note p {
  margin: 12px 0 0;
  color: #4b5d73;
}

.product-feature-copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.product-feature-copy-grid > div {
  padding: 0 0 0 28px;
}

.product-feature-copy-grid > div + div {
  margin-left: 28px;
  border-left: 1px solid #ebebeb;
}

.product-feature-copy-grid h2,
.product-feature-media-card h3 {
  margin: 0 0 8px;
  color: #111111;
  font-size: 18px;
  line-height: 1.25;
}

.product-feature-copy-grid p,
.product-feature-media-card p,
.product-feature-related-card strong {
  margin: 0;
  color: #4b5d73;
  font-size: 14px;
  line-height: 1.7;
}

.product-feature-story,
.product-feature-media-section,
.product-feature-plans,
.product-feature-api,
.product-feature-related {
  padding: 34px 0;
  border-top: 1px solid #ebebeb;
}

.product-feature-section-heading {
  max-width: 720px;
  margin: 0 0 18px;
}

.product-feature-section-heading h2 {
  font-size: 28px;
}

.product-feature-story-list {
  display: grid;
  gap: 0;
}

.product-feature-story-section {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid #ebebeb;
}

.product-feature-story-section:last-child {
  border-bottom: 1px solid #ebebeb;
}

.product-feature-story-section h3 {
  margin: 0;
  color: #111111;
  font-size: 21px;
  line-height: 1.25;
}

.product-feature-story-section p {
  margin: 0;
  color: #3d4b5c;
  font-size: 14px;
  line-height: 1.65;
}

.product-feature-story-copy {
  min-width: 0;
}

.product-feature-story-section ul {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.product-feature-story-section li {
  position: relative;
  padding-left: 18px;
  color: #4b5d73;
  font-size: 13px;
  line-height: 1.55;
}

.product-feature-story-section li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--product-feature-accent);
}

.product-feature-learn-more {
  width: fit-content;
  margin-top: 16px;
  color: var(--product-feature-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.product-feature-learn-more:hover,
.product-feature-learn-more:focus {
  color: #111111;
  text-decoration: none;
}

.product-feature-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-feature-media-card {
  overflow: hidden;
}

.product-feature-media-frame {
  background: #f5f5f5;
}

.product-feature-media-frame img,
.product-feature-media-frame video {
  aspect-ratio: 1400 / 900;
  object-fit: cover;
  object-position: top left;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.product-feature-media-card h3,
.product-feature-media-card p {
  padding-right: 16px;
  padding-left: 16px;
}

.product-feature-media-card h3 {
  margin-top: 14px;
}

.product-feature-media-card p {
  padding-bottom: 18px;
}

.product-feature-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.product-feature-plan-card {
  padding: 20px 22px 20px 0;
  border-right: 1px solid #ebebeb;
}

.product-feature-plan-card + .product-feature-plan-card {
  padding-left: 22px;
}

.product-feature-plan-card:last-child {
  border-right: 0;
}

.product-feature-plan-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.product-feature-plan-heading span {
  color: var(--product-feature-accent);
  font-size: 13px;
  font-weight: 700;
}

.product-feature-plan-heading strong {
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.product-feature-plan-card p {
  margin: 0;
  color: #4b5d73;
  font-size: 14px;
  line-height: 1.7;
}

.product-feature-plan-cta {
  min-height: 34px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 0 13px;
  border: 1px solid var(--product-feature-accent);
  border-radius: 5px;
  background: var(--product-feature-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.product-feature-plan-cta:hover,
.product-feature-plan-cta:focus,
.product-feature-plan-cta:visited {
  color: #ffffff;
  text-decoration: none;
}

.product-feature-api-intro {
  max-width: 820px;
  margin: 0 0 10px;
  color: #4b5d73;
  font-size: 14px;
  line-height: 1.7;
}

.product-feature-api-intro code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  color: #111111;
  font-size: 13px;
}

.product-feature-api-points {
  display: grid;
  gap: 6px;
  max-width: 820px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.product-feature-api-points li {
  position: relative;
  padding-left: 16px;
  color: #4b5d73;
  font-size: 13px;
  line-height: 1.55;
}

.product-feature-api-points li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--product-feature-accent);
}

.product-feature-code-editor {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(23, 41, 70, 0.09);
}

.product-feature-code-header {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid #d9e3ef;
  background: #f8fbff;
}

.product-feature-code-window-controls {
  display: inline-flex;
  gap: 6px;
}

.product-feature-code-window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.product-feature-code-window-controls span:nth-child(1) {
  background: #ff5f57;
}

.product-feature-code-window-controls span:nth-child(2) {
  background: #ffbd2e;
}

.product-feature-code-window-controls span:nth-child(3) {
  background: #28c840;
}

.product-feature-code-title {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.product-feature-code-title span,
.product-feature-code-title strong,
.product-feature-code-status,
.product-feature-code-env code,
.product-feature-code-body code {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}

.product-feature-code-title span {
  min-width: 0;
  overflow: hidden;
  color: #24344d;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
}

.product-feature-code-title strong {
  color: var(--product-feature-accent);
  font-size: 11px;
  font-weight: 700;
}

.product-feature-code-status {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(31, 111, 235, 0.18);
  border-radius: 999px;
  background: rgba(31, 111, 235, 0.07);
  color: #31527c;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.product-feature-code-env {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(207, 217, 232, 0.82);
  background: #f8fbff;
}

.product-feature-code-env code {
  color: #51637a;
  font-size: 12px;
}

.product-feature-code-body {
  position: relative;
  max-height: 260px;
  overflow: hidden;
  background: #ffffff;
  scrollbar-color: #c6d2df #ffffff;
  scrollbar-width: thin;
}

.product-feature-code-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.product-feature-code-body::-webkit-scrollbar-track {
  background: #ffffff;
}

.product-feature-code-body::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #c6d2df;
}

.product-feature-code-body::-webkit-scrollbar-thumb:hover {
  background: #9fb0c3;
}

.product-feature-code-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(207, 217, 232, 0.82);
  background: #ffffff;
}

.product-feature-code-tab {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d9e3ef;
  border-radius: 5px;
  background: #ffffff;
  color: #526173;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.product-feature-code-tab:hover,
.product-feature-code-tab.is-active {
  border-color: var(--product-feature-accent);
  color: var(--product-feature-accent);
}

.product-feature-code-body .CodeMirror {
  height: auto;
  min-width: 720px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 12px;
  line-height: 1.5;
}

.product-feature-code-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.94) 72%,
    #ffffff 100%
  );
}

.product-feature-code-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-top: 1px solid rgba(207, 217, 232, 0.82);
  background: #ffffff;
}

.product-feature-code-footer span {
  color: #4b5d73;
  font-size: 13px;
  line-height: 1.45;
}

.product-feature-code-footer a {
  flex: 0 0 auto;
  color: var(--product-feature-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.product-feature-code-footer a:hover,
.product-feature-code-footer a:focus {
  color: #111111;
  text-decoration: none;
}

.product-feature-code-body .CodeMirror-lines {
  padding: 12px 0;
}

.product-feature-code-body .CodeMirror-gutters {
  border-right: 1px solid #e5edf6;
  background: #f8fbff;
}

.product-feature-code-body .CodeMirror-linenumber {
  color: #8a98aa;
}

.product-feature-code-body .CodeMirror pre.CodeMirror-line,
.product-feature-code-body .CodeMirror pre.CodeMirror-line-like {
  font-size: 12px;
}

.product-feature-related {
  padding-bottom: 72px;
}

.product-feature-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

.product-feature-related-card {
  display: grid;
  gap: 8px;
  padding: 18px 22px 18px 0;
  text-decoration: none;
}

.product-feature-related-card + .product-feature-related-card {
  padding-left: 22px;
  border-left: 1px solid #ebebeb;
}

.product-feature-related-card span {
  color: var(--product-feature-accent);
  font-size: 13px;
  font-weight: 700;
}

.product-feature-related-card:hover,
.product-feature-related-card:focus {
  text-decoration: none;
}

.product-feature-related-card:hover strong,
.product-feature-related-card:focus strong {
  color: #111111;
}

@media (max-width: 900px) {
  .product-feature-page {
    font-size: 15px;
  }

  .product-feature-hero,
  .product-feature-overview,
  .product-feature-copy-grid,
  .product-feature-media-grid,
  .product-feature-plan-grid,
  .product-feature-related-grid {
    grid-template-columns: 1fr;
  }

  .product-feature-overview {
    gap: 24px;
  }

  .product-feature-hero {
    gap: 22px;
    padding: 40px 0 36px;
  }

  .product-feature-hero-copy {
    max-width: 720px;
  }

  .product-feature-summary {
    max-width: 680px;
    font-size: 16px;
  }

  .product-feature-hero-media {
    width: min(720px, 100%);
  }

  .product-feature-note {
    padding: 0 0 24px;
    border-right: 0;
    border-bottom: 1px solid #ebebeb;
  }

  .product-feature-copy-grid > div {
    padding-left: 0;
  }

  .product-feature-copy-grid > div + div {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid #ebebeb;
    border-left: 0;
  }

  .product-feature-story-section {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-feature-plan-card {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid #ebebeb;
  }

  .product-feature-plan-card + .product-feature-plan-card {
    padding-left: 0;
  }

  .product-feature-plan-card:last-child {
    border-bottom: 0;
  }

  .product-feature-plan-cta {
    width: 100%;
  }

  .product-feature-related-card {
    padding: 18px 0;
  }

  .product-feature-related-card + .product-feature-related-card {
    padding-left: 0;
    border-top: 1px solid #ebebeb;
    border-left: 0;
  }

  .product-feature-hero {
    padding-top: 36px;
  }

  .product-feature-hero h1 {
    font-size: 30px;
  }
}

@media (max-width: 560px) {
  .product-feature-hero,
  .product-feature-overview,
  .product-feature-story,
  .product-feature-media-section,
  .product-feature-plans,
  .product-feature-api,
  .product-feature-related {
    width: calc(100% - 28px);
  }

  .product-feature-hero {
    padding: 28px 0 30px;
  }

  .product-feature-hero h1 {
    font-size: 28px;
    line-height: 1.12;
  }

  .product-feature-summary {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.65;
  }

  .product-feature-overview,
  .product-feature-story,
  .product-feature-media-section,
  .product-feature-plans,
  .product-feature-api,
  .product-feature-related {
    padding: 28px 0;
  }

  .product-feature-section-heading h2 {
    font-size: 23px;
  }

  .product-feature-story-section {
    padding: 22px 0;
  }

  .product-feature-story-section h3 {
    font-size: 18px;
  }

  .product-feature-story-section p,
  .product-feature-story-section li,
  .product-feature-plan-card p,
  .product-feature-api-intro,
  .product-feature-api-points li {
    font-size: 13px;
  }

  .product-feature-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-feature-primary,
  .product-feature-secondary {
    width: 100%;
  }

  .product-feature-media-card h3,
  .product-feature-media-card p {
    padding-right: 14px;
    padding-left: 14px;
  }

  .product-feature-code-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 12px;
  }

  .product-feature-code-window-controls,
  .product-feature-code-status {
    display: none;
  }

  .product-feature-code-tabs {
    overflow-x: auto;
    padding-right: 12px;
    padding-left: 12px;
  }

  .product-feature-code-body {
    max-height: 240px;
    overflow-x: auto;
  }

  .product-feature-code-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-feature-code-footer a {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .product-feature-hero,
  .product-feature-overview,
  .product-feature-story,
  .product-feature-media-section,
  .product-feature-plans,
  .product-feature-api,
  .product-feature-related {
    width: calc(100% - 24px);
  }

  .product-feature-hero h1 {
    font-size: 26px;
  }
}