/* ==========================================================================
   Twist Marketplace — Design Tokens & Styles
   Aligned with Twist ERP design system (Inter, blue primary, 4px grid)
   ========================================================================== */

/* --- Light theme (default) --- */
:root {
  --bg: #f8fafc;
  --bg-soft: rgba(255, 255, 255, 0.7);
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: #ffffff;
  --line: #e2e8f0;
  --line-soft: rgba(15, 23, 42, 0.06);
  --text: #0f172a;
  --text-muted: #475569;
  --text-soft: #94a3b8;

  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-soft: rgba(59, 130, 246, 0.10);
  --accent: #0f766e;
  --accent-soft: rgba(15, 118, 110, 0.10);
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.10);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.10);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.10);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.10);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --container: 1220px;

  --header-bg: rgba(248, 250, 252, 0.80);
  --brand-gradient: linear-gradient(135deg, #3b82f6, #9333ea);
  --hero-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #3b82f6 100%);
  --auth-gradient: linear-gradient(145deg, #0f172a, #1e3a5f 60%, #3b82f6);
}

/* --- Dark theme --- */
:root[data-theme="dark"] {
  --bg: #0f172a;
  --bg-soft: rgba(30, 41, 59, 0.7);
  --surface: rgba(30, 41, 59, 0.85);
  --surface-strong: #1e293b;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.04);
  --text: #f1f5f9;
  --text-muted: #cbd5e1;
  --text-soft: #64748b;

  --primary: #60a5fa;
  --primary-hover: #3b82f6;
  --primary-soft: rgba(96, 165, 250, 0.12);
  --accent: #2dd4bf;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.35);

  --header-bg: rgba(15, 23, 42, 0.85);
  --hero-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1d4ed8 100%);
  --auth-gradient: linear-gradient(145deg, #0f172a, #1e293b 60%, #1e40af);
}

/* --- Reset & base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

/* --- Background orbs (subtle marketplace identity) --- */
.shell-bg,
.shell-orb {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.shell-bg {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%),
    linear-gradient(180deg, rgba(59, 130, 246, 0.03), transparent 38%),
    var(--bg);
}

:root[data-theme="dark"] .shell-bg {
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.4), transparent 40%),
    linear-gradient(180deg, rgba(59, 130, 246, 0.04), transparent 38%),
    var(--bg);
}

.shell-orb { filter: blur(60px); opacity: 0.5; z-index: -1; }
.shell-orb-a { width: 320px; height: 320px; top: 80px; left: -80px; background: rgba(59, 130, 246, 0.10); }
.shell-orb-b { width: 420px; height: 420px; right: -120px; top: 180px; background: rgba(147, 51, 234, 0.08); }

:root[data-theme="dark"] .shell-orb-a { background: rgba(59, 130, 246, 0.06); }
:root[data-theme="dark"] .shell-orb-b { background: rgba(147, 51, 234, 0.05); }

/* --- Container --- */
.container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(16px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

/* --- Brand --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand__logo {
  height: 40px;
  width: auto;
}

.brand__text {
  display: grid;
  gap: 2px;
}

.brand strong {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

.brand small {
  display: block;
  color: var(--text-soft);
  font-size: 12px;
}

/* --- Navigation --- */
.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.site-nav a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}

.site-nav a.active,
.site-nav a:hover {
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Typography helpers --- */
.eyebrow,
.micro-label,
.inline-note,
.module-card__facts span,
.module-card__tags span,
.site-footer__meta span,
.version-list header span,
.update-card__versions span,
.detail-hero__meta span,
.stat-pile span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}

/* --- Shared letter-spacing --- */
.connection-pill,
.status-pill,
.micro-label,
.inline-note,
.intro-chip span,
.flash,
.button {
  letter-spacing: 0.01em;
}

/* --- Connection pill --- */
.connection-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-muted);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
}

.connection-pill--live { color: var(--success); border-color: var(--success-soft); background: var(--success-soft); }
.connection-pill--warn { color: #b45309; border-color: var(--warning-soft); background: var(--warning-soft); }

/* --- Buttons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.button:hover { box-shadow: var(--shadow-sm); }

.button--primary {
  color: #ffffff;
  background: var(--primary);
  box-shadow: var(--shadow-sm);
}

.button--primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow);
}

.button--ghost {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

.button--ghost:hover {
  background: var(--surface-strong);
}

.button--muted {
  color: var(--text-soft);
  background: var(--bg-soft);
  border-color: var(--line);
}

.button--danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: transparent;
}

.button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

/* --- Page intro --- */
.page-intro {
  padding: 40px 0 16px;
}

.page-intro__inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.page-intro h1 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
}

.lede {
  max-width: 68ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.65;
}

.page-intro__aside {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.intro-chip {
  min-width: 148px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
}

.intro-chip strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
}

.intro-chip--success { background: var(--success-soft); border-color: transparent; }
.intro-chip--warning { background: var(--warning-soft); border-color: transparent; }

/* --- Flash messages --- */
.flash-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.flash,
.integration-banner,
.card-surface,
.hero-card,
.collection-card,
.preview-card,
.detail-panel,
.detail-side-card,
.update-card,
.empty-surface,
.summary-grid article,
.stack-row,
.list-stack,
.trust-grid article {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
}

.flash--success { color: #15803d; background: var(--success-soft); border-color: transparent; }
.flash--error { color: #b91c1c; background: var(--danger-soft); border-color: transparent; }
.flash--info { color: var(--text); }

/* --- Integration banner --- */
.integration-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
}

.integration-banner p,
.hero-card p,
.collection-card p,
.preview-card p,
.detail-panel p,
.detail-side-card p,
.module-card p,
.stack-row p,
.update-card p,
.empty-surface p,
.site-footer p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Hero & sections --- */
.hero-surface,
.section-block,
.split-section,
.detail-grid,
.browse-layout {
  margin-bottom: 32px;
}

.hero-surface {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.hero-card,
.card-surface,
.collection-card,
.preview-card,
.detail-panel,
.detail-side-card,
.empty-surface,
.update-card {
  padding: 24px;
  border-radius: var(--radius-lg);
}

.hero-card--primary {
  background: var(--hero-gradient);
  color: #f8fafc;
}

.hero-card--primary p,
.hero-card--primary .eyebrow {
  color: rgba(248, 250, 252, 0.75);
}

.hero-card--secondary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-card__actions,
.detail-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

/* --- Stat grids --- */
.hero-stat-grid,
.summary-grid,
.trust-grid,
.collection-grid,
.detail-panel-grid,
.preview-grid {
  display: grid;
  gap: 12px;
}

.hero-stat-grid,
.summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }

.hero-stat-grid strong,
.summary-grid strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* --- Section headings --- */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading--compact { margin-bottom: 12px; }

.section-heading h2,
.update-card h2,
.detail-side-card h3,
.detail-panel h3,
.collection-card h3 {
  margin: 0;
}

.section-heading a,
.inline-note { color: var(--text-soft); }

/* --- Module grid --- */
.module-grid {
  display: grid;
  gap: 16px;
}

.module-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Module cards --- */
.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 150ms ease;
}

.module-card:hover {
  box-shadow: var(--shadow-lg);
}

.module-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
}

.tone-emerald::after { background: linear-gradient(90deg, #047857, #10b981); }
.tone-sky::after { background: linear-gradient(90deg, #0369a1, #38bdf8); }
.tone-amber::after { background: linear-gradient(90deg, #b45309, #f59e0b); }
.tone-rose::after { background: linear-gradient(90deg, #be123c, #fb7185); }
.tone-indigo::after { background: linear-gradient(90deg, #4338ca, #818cf8); }
.tone-teal::after { background: linear-gradient(90deg, #0f766e, #2dd4bf); }
.tone-orange::after { background: linear-gradient(90deg, #c2410c, #fb923c); }
.tone-violet::after { background: linear-gradient(90deg, #6d28d9, #c084fc); }
.tone-slate::after { background: linear-gradient(90deg, #334155, #94a3b8); }

.module-card__head,
.module-card__footer,
.module-card__label-row,
.detail-hero__meta,
.update-card__versions,
.update-card__actions,
.control-dialog__header,
.control-dialog__notes,
.control-form__actions,
.site-footer__inner,
.collection-card__modules {
  display: flex;
  gap: 12px;
}

.module-card__head { align-items: start; }
.module-card__footer,
.detail-hero__meta,
.control-dialog__notes,
.site-footer__inner { justify-content: space-between; }
.module-card__label-row { align-items: center; justify-content: space-between; }
.collection-card__modules { flex-wrap: wrap; }

/* --- Module mark (icon) --- */
.module-mark {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand-gradient);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
}

.module-mark img { width: 100%; height: 100%; object-fit: cover; }

.module-card__meta h3,
.collection-card h3,
.preview-card h3,
.update-card h2,
.detail-panel h3,
.detail-side-card h3,
.empty-surface h3 {
  margin: 0 0 4px;
  font-weight: 600;
}

.module-card__meta p,
.module-card__footer small { margin: 0; }

/* --- Status pills & tags --- */
.status-pill,
.micro-label,
.module-card__tags span,
.collection-card__modules a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
}

.status-pill--active,
.status-pill--success { background: var(--success-soft); color: #15803d; border-color: transparent; }
.status-pill--pending,
.status-pill--installing { background: var(--warning-soft); color: #92400e; border-color: transparent; }
.status-pill--disabled,
.status-pill--uninstalling { background: var(--bg-soft); color: var(--text-soft); border-color: var(--line); }
.status-pill--disconnected { background: var(--surface); color: var(--text-soft); }
.status-pill--warning,
.status-pill--info { background: var(--warning-soft); color: #92400e; border-color: transparent; }
.status-pill--muted,
.status-pill--default { background: var(--surface); color: var(--text-soft); }
.status-pill--danger { background: var(--danger-soft); color: #b91c1c; border-color: transparent; }

.module-card__facts,
.module-card__tags,
.detail-hero__meta,
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Callouts --- */
.module-card__callout {
  margin-top: auto;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  border: 1px solid transparent;
}

.module-card__callout strong,
.stack-row strong,
.update-card__versions strong,
.stat-pile strong,
.collection-card__modules a,
.version-list strong {
  display: block;
}

.module-card__callout--quiet { background: var(--bg-soft); }
.module-card__callout--danger { background: var(--danger-soft); border-color: transparent; }

.collection-card__modules a { color: var(--text); }

/* --- Split & grid layouts --- */
.split-section,
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.browse-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
}

.list-stack {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-lg);
}

.stack-row {
  padding: 16px;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.stack-row p,
.site-footer p { margin: 4px 0 0; }

/* --- Surface shared radii --- */
.card-surface,
.filter-panel,
.update-card,
.detail-hero,
.summary-grid article,
.detail-side-card,
.detail-panel,
.preview-card,
.empty-surface {
  border-radius: var(--radius-lg);
}

/* --- Filter panel --- */
.filter-panel {
  position: sticky;
  top: 80px;
  align-self: start;
}

.filter-form,
.control-form {
  display: grid;
  gap: 12px;
}

.filter-form label,
.control-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.filter-form input,
.filter-form select,
.control-form input,
.control-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  transition: border-color 150ms ease;
}

.filter-form input:focus,
.filter-form select:focus,
.control-form input:focus,
.control-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.control-form textarea { padding: 10px 12px; }

/* --- Dialog / modal --- */
.control-dialog {
  width: min(100% - 24px, 720px);
  border: none;
  padding: 0;
  background: transparent;
}

.control-dialog::backdrop {
  background: rgba(15, 23, 42, 0.50);
  backdrop-filter: blur(4px);
}

.control-dialog__panel {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.control-dialog__scrim { display: none; }
.control-dialog__copy,
.control-dialog__notes span { color: var(--text-muted); }
.control-dialog__notes { margin-top: 16px; }
.control-dialog__notes > div { flex: 1; }
.dialog-close { background: transparent; border: 0; cursor: pointer; color: var(--text-soft); }

/* --- Detail pages --- */
.detail-hero,
.detail-grid {
  grid-template-columns: 1.5fr 1fr;
}

.media-banner,
.media-card { overflow: hidden; }
.media-banner { padding: 0; margin-bottom: 16px; }
.media-banner img,
.media-card img { width: 100%; height: 100%; object-fit: cover; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.media-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.media-card img { aspect-ratio: 16 / 10; }

.media-card figcaption {
  padding: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

.detail-hero__main,
.detail-hero__side,
.update-card__body,
.version-list {
  display: grid;
  gap: 16px;
}

.detail-hero__lede {
  font-size: 17px;
  max-width: 65ch;
}

/* --- Stat surfaces --- */
.stat-pile > div,
.summary-grid article,
.preview-card,
.detail-panel,
.detail-side-card,
.update-card__body > div,
.empty-surface {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

/* --- Update cards --- */
.update-card {
  display: grid;
  gap: 16px;
}

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

.update-card__versions {
  align-items: center;
  justify-content: space-between;
}

.update-card__versions strong {
  font-size: 26px;
  font-weight: 700;
}

/* --- Footer --- */
.site-footer {
  padding: 24px 0 32px;
  color: var(--text-soft);
  font-size: 14px;
}

.site-footer__meta {
  flex-wrap: wrap;
  justify-content: end;
}

.inline-form { margin: 0; }

/* --- Theme toggle button --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: background 150ms ease;
}

.theme-toggle:hover { background: var(--surface-strong); }
.theme-toggle svg { width: 18px; height: 18px; color: var(--text-muted); }

/* ===================== Responsive: tablet ===================== */
@media (max-width: 1100px) {
  .hero-surface,
  .split-section,
  .detail-grid,
  .detail-hero,
  .browse-layout,
  .detail-panel-grid,
  .update-card__body,
  .module-grid--three,
  .module-grid--two,
  .media-grid,
  .collection-grid,
  .preview-grid,
  .trust-grid,
  .hero-stat-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .page-intro__inner,
  .site-header__inner,
  .site-footer__inner,
  .module-card__footer,
  .integration-banner,
  .control-dialog__notes {
    flex-direction: column;
    align-items: start;
  }

  .filter-panel { position: static; }
}

/* ===================== Responsive: mobile ===================== */
@media (max-width: 760px) {
  .site-nav { display: none; }
  .container { width: min(calc(100% - 24px), var(--container)); }

  .hero-card,
  .card-surface,
  .collection-card,
  .preview-card,
  .detail-panel,
  .detail-side-card,
  .empty-surface,
  .update-card,
  .module-card {
    padding: 16px;
  }
}

/* ==========================================================================
   Account & Auth pages
   ========================================================================== */

.org-switcher select,
.identity-pill,
.field input,
.field select,
.field textarea {
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-strong);
  padding: 0 12px;
  color: var(--text);
}

.identity-pill {
  display: grid;
  padding: 6px 12px;
}

.identity-pill small,
.account-sidebar__summary span,
.timeline-row p,
.info-list span,
.field small,
.auth-footnote,
.empty-inline,
.pricing-card p,
.pricing-card__meta,
.account-sidebar__header p {
  color: var(--text-muted);
}

.org-switcher,
.account-form,
.auth-actions,
.account-inline-actions,
.secondary-actions,
.action-stack,
.account-grid,
.pricing-grid,
.pricing-hero-grid,
.account-two-col,
.account-layout,
.account-nav,
.timeline-list,
.info-list,
.summary-grid--account,
.auth-shell,
.auth-panel__points,
.list-stack--tight,
.checkout-stack,
.checkout-price-grid,
.checkout-status-grid {
  display: grid;
  gap: 12px;
}

.org-switcher select { min-width: 180px; }
.action-stack--compact .secondary-actions { display: none; }

.secondary-actions,
.account-inline-actions,
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.auth-shell {
  grid-template-columns: 1.1fr 0.9fr;
}

.account-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
}

.account-two-col {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.account-sidebar,
.account-main,
.auth-panel {
  display: grid;
  gap: 16px;
}

.account-sidebar {
  position: sticky;
  top: 80px;
}

.account-sidebar__summary,
.info-list,
.timeline-list,
.auth-panel__points,
.account-nav {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.account-nav a {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  border: 1px solid transparent;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}

.account-nav a.active,
.account-nav a:hover {
  background: var(--surface-strong);
  border-color: var(--line);
  color: var(--text);
}

.account-card,
.pricing-card,
.auth-panel--form {
  padding: 24px;
}

.account-grid,
.pricing-grid,
.pricing-hero-grid,
.checkout-price-grid,
.checkout-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-grid--account {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* --- Pricing cards --- */
.pricing-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.pricing-card--module { min-height: 100%; }

.pricing-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
}

.pricing-card__price {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0 8px;
}

.pricing-card__meta,
.pricing-card__feature-list,
.account-form,
.form-grid,
.info-list,
.timeline-list {
  margin-top: 12px;
}

.pricing-card__meta,
.info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pricing-card__feature-list,
.version-list,
.timeline-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.pricing-card__feature-list li,
.timeline-row,
.info-list > div,
.auth-panel__points > div {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.pricing-card__actions,
.checkout-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

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

.checkout-stack {
  grid-template-columns: minmax(0, 1fr);
}

.checkout-hero,
.erp-link-strip {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.checkout-price-grid article,
.checkout-status-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: grid;
  gap: 4px;
}

.checkout-price-grid span,
.checkout-status-grid span { color: var(--text-muted); }
.checkout-feature-list { margin-top: 16px; }
.erp-link-strip h3,
.checkout-hero h2 { margin: 8px 0 8px; }

/* --- Auth panels --- */
.auth-panel--brand {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--auth-gradient);
  color: #f8fafc;
}

.auth-panel--brand .eyebrow,
.auth-panel--brand p,
.auth-panel--brand span {
  color: rgba(241, 245, 249, 0.75);
}

/* --- Form fields --- */
.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 500;
}

.field input,
.field select,
.field textarea { width: 100%; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.field textarea {
  min-height: 120px;
  padding: 12px;
}

.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid__span { grid-column: 1 / -1; }

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-field input {
  min-height: 18px;
  width: 18px;
  accent-color: var(--primary);
}

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--danger); }
.field--error input:focus,
.field--error select:focus,
.field--error textarea:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

.field-error,
.field-error-stack { color: var(--danger); }
.field-error,
.field-error-stack p { margin: 0; font-size: 13px; }

.empty-inline { padding: 12px 0; }
.stack-row--plain { padding: 0; border-radius: 0; }
.stack-row--actions { align-items: center; }

.timeline-row,
.info-list > div {
  display: grid;
  gap: 4px;
}

/* ===================== Account responsive ===================== */
@media (max-width: 1100px) {
  .account-layout,
  .auth-shell,
  .account-two-col,
  .account-grid,
  .pricing-grid,
  .pricing-hero-grid,
  .checkout-stack,
  .checkout-price-grid,
  .checkout-status-grid,
  .summary-grid--account,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .account-sidebar { position: static; }
  .checkout-hero,
  .erp-link-strip { flex-direction: column; }
}

@media (max-width: 760px) {
  .site-header__actions,
  .auth-actions,
  .account-inline-actions,
  .secondary-actions,
  .pricing-card__meta,
  .info-list,
  .pricing-card__actions,
  .checkout-badges {
    flex-direction: column;
    align-items: stretch;
  }

  .account-card,
  .pricing-card,
  .auth-panel--brand,
  .auth-panel--form,
  .account-sidebar {
    padding: 16px;
  }
}