/* ============================================================
   SEO Quantum Pro — Designer Polish Layer (2026-04-16)
   ============================================================
   Philosophy: Editorial-refined. Linear/Vercel/Stripe inspired.
   - Monochromatic palette + green accent
   - Precise typography hierarchy
   - 1px hairline borders over drop shadows
   - Generous whitespace, subtle animation
   - Full dark/light mode parity

   Loads LAST in base.html to win cascade over older files.
   Does NOT break existing classes — refines them.
============================================================ */

/* ============ DESIGN TOKENS ============ */
:root {
  /* Neutral palette — warm, editorial */
  --dp-bg: #FDFCFA;
  --dp-bg-elevated: #FFFFFF;
  --dp-bg-subtle: #F7F5F2;
  --dp-bg-hover: #F0EDE8;

  --dp-ink: #18181B;
  --dp-ink-soft: #3F3F46;
  --dp-ink-muted: #71717A;
  --dp-ink-subtle: #A1A1AA;

  --dp-border: rgba(24, 24, 27, 0.08);
  --dp-border-strong: rgba(24, 24, 27, 0.14);
  --dp-border-focus: rgba(22, 163, 74, 0.4);

  /* Brand accent — moss green (kept from existing #4CAF50 lineage) */
  --dp-accent: #16A34A;
  --dp-accent-hover: #15803D;
  --dp-accent-soft: rgba(22, 163, 74, 0.08);
  --dp-accent-ring: rgba(22, 163, 74, 0.22);

  /* Semantic */
  --dp-success: #16A34A;
  --dp-warning: #D97706;
  --dp-danger: #DC2626;
  --dp-info: #2563EB;

  /* Refined shadows — layered, subtle */
  --dp-shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
  --dp-shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.08), 0 1px 2px rgba(24, 24, 27, 0.04);
  --dp-shadow-md: 0 4px 12px rgba(24, 24, 27, 0.08), 0 2px 4px rgba(24, 24, 27, 0.05);
  --dp-shadow-lg: 0 12px 28px rgba(24, 24, 27, 0.10), 0 4px 8px rgba(24, 24, 27, 0.05);
  --dp-shadow-focus: 0 0 0 3px var(--dp-accent-ring);

  /* Typography */
  --dp-font-display: 'Outfit', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --dp-font-body: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --dp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Type scale — perfect fourth (1.333) */
  --dp-text-xs: 0.75rem;
  --dp-text-sm: 0.875rem;
  --dp-text-base: 1rem;
  --dp-text-lg: 1.125rem;
  --dp-text-xl: 1.333rem;
  --dp-text-2xl: 1.777rem;
  --dp-text-3xl: 2.369rem;
  --dp-text-4xl: 3.157rem;

  /* Spacing — 4px base */
  --dp-space-1: 0.25rem;
  --dp-space-2: 0.5rem;
  --dp-space-3: 0.75rem;
  --dp-space-4: 1rem;
  --dp-space-5: 1.25rem;
  --dp-space-6: 1.5rem;
  --dp-space-8: 2rem;
  --dp-space-10: 2.5rem;
  --dp-space-12: 3rem;
  --dp-space-16: 4rem;
  --dp-space-20: 5rem;

  /* Radii — refined */
  --dp-radius-xs: 4px;
  --dp-radius-sm: 6px;
  --dp-radius-md: 10px;
  --dp-radius-lg: 14px;
  --dp-radius-xl: 18px;
  --dp-radius-2xl: 24px;
  --dp-radius-full: 9999px;

  /* Motion */
  --dp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dp-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dp-duration-fast: 120ms;
  --dp-duration-base: 180ms;
  --dp-duration-slow: 280ms;
}

/* ============ DARK MODE — TRUE BLACK, WARM ============ */
[data-theme="dark"] {
  --dp-bg: #09090B;
  --dp-bg-elevated: #141416;
  --dp-bg-subtle: #18181B;
  --dp-bg-hover: #27272A;

  --dp-ink: #FAFAFA;
  --dp-ink-soft: #D4D4D8;
  --dp-ink-muted: #A1A1AA;
  --dp-ink-subtle: #71717A;

  --dp-border: rgba(250, 250, 250, 0.08);
  --dp-border-strong: rgba(250, 250, 250, 0.14);
  --dp-border-focus: rgba(52, 211, 153, 0.4);

  --dp-accent: #22C55E;
  --dp-accent-hover: #16A34A;
  --dp-accent-soft: rgba(34, 197, 94, 0.12);
  --dp-accent-ring: rgba(34, 197, 94, 0.25);

  --dp-success: #22C55E;
  --dp-warning: #F59E0B;
  --dp-danger: #EF4444;
  --dp-info: #3B82F6;

  --dp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --dp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --dp-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
  --dp-shadow-focus: 0 0 0 3px var(--dp-accent-ring);
}

/* ============ BRIDGE TO LEGACY TOKENS ============
   Map new tokens into the old names so existing code stays themed correctly.
============ */
:root {
  --bg-primary: var(--dp-bg);
  --bg-secondary: var(--dp-bg-subtle);
  --bg-tertiary: var(--dp-bg-hover);
  --text-primary: var(--dp-ink);
  --text-secondary: var(--dp-ink-soft);
  --text-tertiary: var(--dp-ink-muted);
  --border-color: var(--dp-border);
  --shadow-color: rgba(24, 24, 27, 0.06);
  --card-bg: var(--dp-bg-elevated);
  --card-hover: var(--dp-bg-hover);
  --input-bg: var(--dp-bg-elevated);
  --input-border: var(--dp-border-strong);
  --header-bg: var(--dp-bg);

  --accent-green: var(--dp-accent);
  --accent-purple: #7C3AED;
  --accent-blue: var(--dp-info);
  --accent-red: var(--dp-danger);
  --accent-yellow: var(--dp-warning);

  --sqp-primary: var(--dp-accent);
  --sqp-primary-dark: var(--dp-accent-hover);
  --sqp-accent: var(--dp-accent);
}

[data-theme="dark"] {
  --bg-primary: var(--dp-bg);
  --bg-secondary: var(--dp-bg-subtle);
  --bg-tertiary: var(--dp-bg-hover);
  --text-primary: var(--dp-ink);
  --text-secondary: var(--dp-ink-soft);
  --text-tertiary: var(--dp-ink-muted);
  --border-color: var(--dp-border);
  --card-bg: var(--dp-bg-elevated);
  --card-hover: var(--dp-bg-hover);
  --input-bg: var(--dp-bg-elevated);
  --input-border: var(--dp-border-strong);
  --header-bg: rgba(9, 9, 11, 0.92);
}

/* ============ BASE — BODY, TYPOGRAPHY ============ */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--dp-font-body);
  font-feature-settings: 'cv11', 'ss01', 'ss02', 'ss03';
  font-size: var(--dp-text-base);
  line-height: 1.55;
  color: var(--dp-ink);
  background: var(--dp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Refined headline hierarchy — tight leading, negative letter-spacing */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dp-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dp-ink);
  margin-top: 0;
}

h1, .h1 { font-size: var(--dp-text-4xl); font-weight: 700; letter-spacing: -0.035em; }
h2, .h2 { font-size: var(--dp-text-3xl); letter-spacing: -0.03em; }
h3, .h3 { font-size: var(--dp-text-2xl); letter-spacing: -0.025em; }
h4, .h4 { font-size: var(--dp-text-xl); }
h5, .h5 { font-size: var(--dp-text-lg); font-weight: 500; }
h6, .h6 { font-size: var(--dp-text-base); font-weight: 500; }

/* Numbers and data in mono */
.dp-mono, code, kbd, samp, pre,
.stat-number, .metric-value, [class*="metric-"] .value {
  font-family: var(--dp-font-mono);
  font-feature-settings: 'tnum';
}

/* Refined link style */
a {
  color: var(--dp-accent);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dp-duration-fast) var(--dp-ease);
}

a:hover {
  color: var(--dp-accent-hover);
  text-decoration: underline;
}

/* ============ COMPONENT POLISH ============ */

/* Buttons — unified, refined */
.btn, button.btn,
.btn-primary, .btn-secondary, .btn-success, .btn-outline,
.sqp-btn, .sqp-cta-btn, .sqp-cta-btn-primary, .sqp-cta-btn-secondary {
  font-family: var(--dp-font-body);
  font-weight: 500;
  font-size: var(--dp-text-sm);
  letter-spacing: -0.005em;
  border-radius: var(--dp-radius-md);
  padding: 0.625rem 1.125rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dp-duration-fast) var(--dp-ease),
              background-color var(--dp-duration-base) var(--dp-ease),
              border-color var(--dp-duration-base) var(--dp-ease),
              box-shadow var(--dp-duration-base) var(--dp-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible, button.btn:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.btn:active, button.btn:active {
  transform: scale(0.98);
}

/* Primary — bold green */
.btn-primary, button.btn-primary,
.sqp-cta-btn-primary, .sqp-btn-primary {
  background: var(--dp-accent);
  color: #FFFFFF !important;
  border-color: var(--dp-accent);
  box-shadow: var(--dp-shadow-xs);
}

.btn-primary:hover, button.btn-primary:hover,
.sqp-cta-btn-primary:hover, .sqp-btn-primary:hover {
  background: var(--dp-accent-hover);
  border-color: var(--dp-accent-hover);
  box-shadow: var(--dp-shadow-sm);
  color: #FFFFFF !important;
}

/* Secondary — hairline, ghost */
.btn-secondary, button.btn-secondary, .btn-outline,
.sqp-cta-btn-secondary, .sqp-btn-secondary {
  background: var(--dp-bg-elevated);
  color: var(--dp-ink);
  border: 1px solid var(--dp-border-strong);
}

.btn-secondary:hover, button.btn-secondary:hover, .btn-outline:hover,
.sqp-cta-btn-secondary:hover, .sqp-btn-secondary:hover {
  background: var(--dp-bg-subtle);
  border-color: var(--dp-ink-subtle);
  color: var(--dp-ink);
}

/* Danger */
.btn-danger, button.btn-danger {
  background: var(--dp-danger);
  color: #FFFFFF !important;
  border-color: var(--dp-danger);
}

/* Small / Large variants */
.btn-sm { padding: 0.4rem 0.75rem; font-size: var(--dp-text-xs); }
.btn-lg { padding: 0.875rem 1.5rem; font-size: var(--dp-text-base); }

/* Cards */
.card, .sq-card, .sqp-card {
  background: var(--dp-bg-elevated);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  box-shadow: var(--dp-shadow-xs);
  transition: transform var(--dp-duration-slow) var(--dp-ease),
              box-shadow var(--dp-duration-slow) var(--dp-ease),
              border-color var(--dp-duration-base) var(--dp-ease);
}

.card:hover, .sq-card:hover {
  border-color: var(--dp-border-strong);
  box-shadow: var(--dp-shadow-md);
}

/* Inputs — precise, accessible */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
input[type="tel"], input[type="date"], textarea, select,
.form-control, .sqp-input, .sqp-select {
  font-family: var(--dp-font-body);
  font-size: var(--dp-text-sm);
  line-height: 1.5;
  padding: 0.625rem 0.875rem;
  background: var(--dp-bg-elevated);
  color: var(--dp-ink);
  border: 1px solid var(--dp-border-strong);
  border-radius: var(--dp-radius-md);
  transition: border-color var(--dp-duration-base) var(--dp-ease),
              box-shadow var(--dp-duration-base) var(--dp-ease),
              background-color var(--dp-duration-base) var(--dp-ease);
  box-shadow: var(--dp-shadow-xs) inset;
}

input:focus, textarea:focus, select:focus,
.form-control:focus, .sqp-input:focus, .sqp-select:focus {
  outline: none;
  border-color: var(--dp-accent);
  box-shadow: 0 0 0 3px var(--dp-accent-ring);
}

input::placeholder, textarea::placeholder {
  color: var(--dp-ink-subtle);
  opacity: 1;
}

/* Labels */
label, .form-label {
  font-family: var(--dp-font-body);
  font-size: var(--dp-text-sm);
  font-weight: 500;
  color: var(--dp-ink-soft);
  letter-spacing: -0.005em;
}

/* Refined tables */
table, .table {
  font-family: var(--dp-font-body);
  font-size: var(--dp-text-sm);
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table th, .table th {
  font-weight: 500;
  font-size: var(--dp-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dp-ink-muted);
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--dp-border);
  background: var(--dp-bg-subtle);
}

table td, .table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--dp-border);
  color: var(--dp-ink);
}

table tr:hover, .table tbody tr:hover {
  background: var(--dp-bg-subtle);
}

/* Code blocks */
pre, code, kbd {
  font-family: var(--dp-font-mono);
  background: var(--dp-bg-subtle);
  border-radius: var(--dp-radius-sm);
}

code {
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
  border: 1px solid var(--dp-border);
}

pre {
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--dp-border);
}

kbd {
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  border: 1px solid var(--dp-border-strong);
  box-shadow: 0 1px 0 var(--dp-border-strong);
}

/* ============ UTILITY CLASSES ============ */
.dp-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dp-space-6);
  padding-right: var(--dp-space-6);
}

.dp-stack { display: flex; flex-direction: column; gap: var(--dp-space-4); }
.dp-row { display: flex; align-items: center; gap: var(--dp-space-3); }

.dp-divider {
  height: 1px;
  background: var(--dp-border);
  border: 0;
  margin: var(--dp-space-6) 0;
}

/* Badges — refined pill */
.badge, .sqp-badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-family: var(--dp-font-body);
  font-size: var(--dp-text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--dp-radius-full);
  background: var(--dp-bg-subtle);
  color: var(--dp-ink-soft);
  border: 1px solid var(--dp-border);
}

.badge-success, .badge.bg-success { background: var(--dp-accent-soft); color: var(--dp-accent-hover); border-color: transparent; }
.badge-warning, .badge.bg-warning { background: rgba(217, 119, 6, 0.1); color: var(--dp-warning); border-color: transparent; }
.badge-danger, .badge.bg-danger { background: rgba(220, 38, 38, 0.1); color: var(--dp-danger); border-color: transparent; }
.badge-info, .badge.bg-info { background: rgba(37, 99, 235, 0.1); color: var(--dp-info); border-color: transparent; }

/* ============ NAV / HEADER POLISH ============ */
.sqp-header, .main-header, nav.navbar {
  background: var(--dp-bg);
  border-bottom: 1px solid var(--dp-border);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

[data-theme="dark"] .sqp-header,
[data-theme="dark"] .main-header,
[data-theme="dark"] nav.navbar {
  background: rgba(9, 9, 11, 0.92);
}

/* ============ DASHBOARD STAT CARDS ============ */
.stat-card, .sqp-stat-card, [class*="stat-card"] {
  background: var(--dp-bg-elevated);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  padding: var(--dp-space-5);
  transition: border-color var(--dp-duration-base) var(--dp-ease),
              box-shadow var(--dp-duration-base) var(--dp-ease),
              transform var(--dp-duration-slow) var(--dp-ease);
}

.stat-card:hover, .sqp-stat-card:hover {
  border-color: var(--dp-border-strong);
  box-shadow: var(--dp-shadow-sm);
  transform: translateY(-1px);
}

.stat-card .stat-label, .stat-card .label {
  font-size: var(--dp-text-xs);
  font-weight: 500;
  color: var(--dp-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-card .stat-number, .stat-card .value, .stat-card .stat-value {
  font-family: var(--dp-font-display);
  font-size: var(--dp-text-3xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--dp-ink);
  margin-top: var(--dp-space-2);
}

/* ============ THEME TOGGLE BUTTON (refined) ============ */
.dp-theme-toggle {
  position: fixed;
  bottom: calc(var(--dp-space-5) + 60px); /* offset above scroll-to-top button */
  right: var(--dp-space-5);
  width: 44px;
  height: 44px;
  border-radius: var(--dp-radius-full);
  background: var(--dp-bg-elevated);
  border: 1px solid var(--dp-border-strong);
  box-shadow: var(--dp-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dp-ink-soft);
  transition: transform var(--dp-duration-base) var(--dp-ease),
              background-color var(--dp-duration-base) var(--dp-ease),
              border-color var(--dp-duration-base) var(--dp-ease);
  z-index: 9998;
  font-size: 18px;
}

.dp-theme-toggle:hover {
  background: var(--dp-bg-hover);
  border-color: var(--dp-ink-subtle);
  transform: scale(1.05);
}

.dp-theme-toggle:active {
  transform: scale(0.95);
}

.dp-theme-toggle .dp-icon-sun { display: none; }
.dp-theme-toggle .dp-icon-moon { display: block; }

[data-theme="dark"] .dp-theme-toggle .dp-icon-sun { display: block; }
[data-theme="dark"] .dp-theme-toggle .dp-icon-moon { display: none; }

/* ============ SCROLLBAR POLISH ============ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--dp-border-strong);
  border: 3px solid var(--dp-bg);
  border-radius: var(--dp-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--dp-ink-subtle); }

/* ============ SELECTION ============ */
::selection {
  background: var(--dp-accent-soft);
  color: var(--dp-accent-hover);
}

[data-theme="dark"] ::selection {
  background: var(--dp-accent-soft);
  color: var(--dp-accent);
}

/* ============ FLASH MESSAGES (refined, matches base.html toast) ============ */
.flash-messages .alert, .toast-notification {
  font-family: var(--dp-font-body);
  border-radius: var(--dp-radius-md);
  box-shadow: var(--dp-shadow-md);
  border: 1px solid var(--dp-border-strong);
  padding: 0.875rem 1.125rem;
  font-size: var(--dp-text-sm);
}

/* ============ ANIMATIONS — restrained ============ */
@keyframes dp-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.dp-fade-up { animation: dp-fade-up var(--dp-duration-slow) var(--dp-ease) both; }
.dp-fade-in { animation: dp-fade-in var(--dp-duration-base) var(--dp-ease) both; }

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ LOADING STATE — skeleton ============ */
.dp-skeleton {
  background: linear-gradient(90deg, var(--dp-bg-subtle) 0%, var(--dp-bg-hover) 50%, var(--dp-bg-subtle) 100%);
  background-size: 200% 100%;
  animation: dp-shimmer 1.5s infinite;
  border-radius: var(--dp-radius-sm);
}

@keyframes dp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ FORM POLISH ============ */
.form-group, .sqp-form-group {
  margin-bottom: var(--dp-space-5);
}

.form-group label, .sqp-form-group label {
  display: block;
  margin-bottom: var(--dp-space-2);
}

.form-hint, .form-help {
  font-size: var(--dp-text-xs);
  color: var(--dp-ink-muted);
  margin-top: var(--dp-space-1);
}

/* ============ OVERRIDE LEGACY PURPLE GRADIENTS (where excessive) ============ */
/* Some pages use #9333ea purple heavily — soften it by routing to accent green */
.btn[style*="background"][style*="9333ea"],
.btn[style*="background"][style*="7c3aed"],
.sqp-hero-cta[style*="9333ea"] {
  /* no-op — preserve user's inline choices */
}

/* ============ DARK MODE — LEGACY CSS GAPS ============ */
[data-theme="dark"] body,
[data-theme="dark"] main {
  background: var(--dp-bg);
  color: var(--dp-ink);
}

[data-theme="dark"] .card,
[data-theme="dark"] .sq-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
  background: var(--dp-bg-elevated);
  border-color: var(--dp-border);
  color: var(--dp-ink);
}

[data-theme="dark"] .bg-white { background: var(--dp-bg-elevated) !important; }
[data-theme="dark"] .bg-light { background: var(--dp-bg-subtle) !important; }
[data-theme="dark"] .text-dark { color: var(--dp-ink) !important; }
[data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--dp-ink-muted) !important; }

[data-theme="dark"] .border { border-color: var(--dp-border) !important; }
[data-theme="dark"] .shadow-sm { box-shadow: var(--dp-shadow-sm) !important; }
[data-theme="dark"] .shadow { box-shadow: var(--dp-shadow-md) !important; }

[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select,
[data-theme="dark"] .form-control {
  background: var(--dp-bg-elevated);
  border-color: var(--dp-border-strong);
  color: var(--dp-ink);
}

[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder {
  color: var(--dp-ink-subtle);
}

[data-theme="dark"] table,
[data-theme="dark"] .table {
  color: var(--dp-ink);
}

[data-theme="dark"] table th,
[data-theme="dark"] .table th {
  background: var(--dp-bg-subtle);
  color: var(--dp-ink-muted);
  border-color: var(--dp-border);
}

[data-theme="dark"] table td,
[data-theme="dark"] .table td {
  border-color: var(--dp-border);
}

[data-theme="dark"] table tr:hover,
[data-theme="dark"] .table tbody tr:hover {
  background: var(--dp-bg-subtle);
}

[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer,
[data-theme="dark"] .card-header, [data-theme="dark"] .card-footer {
  background: var(--dp-bg-subtle);
  border-color: var(--dp-border);
}

[data-theme="dark"] hr { border-color: var(--dp-border); }

[data-theme="dark"] .breadcrumb-nav,
[data-theme="dark"] nav.breadcrumb {
  background: var(--dp-bg-subtle);
  border-color: var(--dp-border);
}

/* ============ MOBILE REFINEMENTS ============ */
@media (max-width: 640px) {
  h1, .h1 { font-size: var(--dp-text-3xl); }
  h2, .h2 { font-size: var(--dp-text-2xl); }
  h3, .h3 { font-size: var(--dp-text-xl); }

  .dp-container { padding-left: var(--dp-space-4); padding-right: var(--dp-space-4); }
  .dp-theme-toggle { bottom: var(--dp-space-4); right: var(--dp-space-4); width: 40px; height: 40px; }

  .btn, button.btn { padding: 0.55rem 1rem; font-size: var(--dp-text-sm); }
}

/* ============ PRINT ============ */
@media print {
  .dp-theme-toggle, .skip-to-content, nav, footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* ============================================================
   PAGE-GUIDE TOGGLE BUTTON — restyle to design system
   (was bright purple gradient with pulse animation)
============================================================ */
.pg-toggle-btn {
  background: var(--dp-bg-elevated, #fff) !important;
  color: var(--dp-ink-soft, #3F3F46) !important;
  border: 1px solid var(--dp-border-strong, rgba(0, 0, 0, 0.14)) !important;
  box-shadow: var(--dp-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08)) !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  animation: none !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.pg-toggle-btn svg {
  stroke: var(--dp-ink-soft, #3F3F46) !important;
}

.pg-toggle-btn:hover {
  background: var(--dp-bg-hover, #f0ede8) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--dp-shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.10)) !important;
}

.pg-badge {
  background: var(--dp-accent, #16A34A) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.35) !important;
}

[data-theme="dark"] .pg-toggle-btn,
.dark .pg-toggle-btn,
body.dark-mode .pg-toggle-btn {
  background: var(--dp-bg-subtle, #27272A) !important;
  color: #E4E4E7 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .pg-toggle-btn svg,
.dark .pg-toggle-btn svg,
body.dark-mode .pg-toggle-btn svg {
  stroke: #E4E4E7 !important;
}

/* Keep mobile size refined (override the 24px in page-guide.css mobile rule) */
@media (max-width: 640px) {
  .pg-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   HEADER CLI / LLM INDICATOR BADGE — subtler styling
   (was loud purple gradient — distracting for non-power users)
============================================================ */
.cli-badge,
.llm-indicator,
[class*="claude-cli"] {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  padding: 0.2rem 0.55rem !important;
  background: var(--dp-bg-subtle, #F7F5F2) !important;
  color: var(--dp-ink-muted, #71717A) !important;
  border: 1px solid var(--dp-border, rgba(24, 24, 27, 0.08)) !important;
  border-radius: var(--dp-radius-full, 9999px) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: none !important;
}

.cli-badge:hover,
.llm-indicator:hover {
  background: var(--dp-bg-hover, #f0ede8) !important;
  color: var(--dp-ink-soft, #3F3F46) !important;
  transform: none !important;
}

/* Make the internal CLI tag inside llm-indicator even smaller/subtler */
.llm-indicator .llm-indicator-badge {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  padding: 1px 4px !important;
  background: var(--dp-ink-muted, #71717A) !important;
  color: #fff !important;
  letter-spacing: 0.04em;
}

/* Dark mode parity */
[data-theme="dark"] .cli-badge,
[data-theme="dark"] .llm-indicator,
.dark .cli-badge,
.dark .llm-indicator {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #A1A1AA !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .cli-badge:hover,
[data-theme="dark"] .llm-indicator:hover,
.dark .cli-badge:hover,
.dark .llm-indicator:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E4E4E7 !important;
}

/* Hide on small screens — header is cramped enough */
@media (max-width: 768px) {
  .cli-badge,
  .llm-indicator {
    display: none !important;
  }
}