/* ==========================================================================
   Qelvix theme tokens
   --------------------------------------------------------------------------
   Every colour used by index.html / home.css is defined in this block;
   components only ever reference these variables.

   The active theme is the data-theme attribute on <html>:
     - set before first paint by the inline script in index.html's <head>
       (saved choice from localStorage, otherwise the OS prefers-color-scheme),
     - changed by the toggle button in the nav.
   <html> without the attribute renders the light theme.

   Sections below: core tokens, effects, the dashboard-mock tokens (they follow the
   theme too), then "fixed" tokens (the phone mock and floating card are white in
   both themes on purpose), then the WhatsApp mock tokens (these follow the theme).
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --font-head: "Sora", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Core */
  --bg:            #FFFFFF;
  --bg-alt:        #F3F5F8;
  --surface:       #FFFFFF;
  --surface-2:     #F3F5F8;
  --border:        #DDE3EC;
  --border-strong: #7B8798;  /* control outlines: 3:1+ against --bg and --surface-2 */
  --text:          #1F2937;
  --text-strong:   #0A1019;
  --muted:         #4A5568;
  --accent:        #14B8A6;  /* fills and decoration. Not for text on light backgrounds (2.5:1) */
  --accent-text:   #0F766E;  /* accent as text/icon on --bg, --bg-alt, --surface (5:1+) */
  --accent-hover:  #2DD4BF;
  --on-accent:     #0A1019;  /* text on --accent (7.7:1) */
  --focus:         var(--accent-text);

  /* Effects */
  --nav-bg:        color-mix(in srgb, var(--bg) 90%, transparent);
  --scrim:         rgba(10, 16, 25, 0.55);
  --shadow-card:   0 1px 2px rgba(10, 16, 25, 0.04), 0 18px 40px -24px rgba(10, 16, 25, 0.20);
  --shadow-lift:   0 1px 2px rgba(10, 16, 25, 0.05), 0 28px 56px -24px rgba(10, 16, 25, 0.30);
  --shadow-float:  0 2px 6px rgba(10, 16, 25, 0.08), 0 24px 48px -16px rgba(10, 16, 25, 0.35);
  --shadow-dialog: 0 32px 80px -24px rgba(10, 16, 25, 0.45);

  /* Dashboard mock: follows the page theme */
  --mock-ring:        rgba(10, 16, 25, 0.14);
  --mock-shadow:      0 2px 6px rgba(10, 16, 25, 0.08), 0 44px 80px -32px rgba(10, 16, 25, 0.40);
  --mock-chrome:      #F3F5F8;
  --mock-bg:          #FFFFFF;
  --mock-tile:        #F3F5F8;
  --mock-border:      #DDE3EC;
  --mock-text:        #1F2937;
  --mock-strong:      #0A1019;
  --mock-muted:       #4A5568;
  --mock-accent:      #14B8A6;
  --mock-accent-text: #0F766E;
  --mock-bar:         #0D9488;
  --mock-warn:        #D97706;
  --mock-active-bg:   rgba(20, 184, 166, 0.14);
  --mock-track:       #D5DCE6;
  --mock-dot:         #C5CEDB;
  --st-ready-fg:    #0F766E;  --st-ready-bg:    rgba(20, 184, 166, 0.12);
  --st-progress-fg: #1D4ED8;  --st-progress-bg: rgba(59, 130, 246, 0.10);
  --st-check-fg:    #92400E;  --st-check-bg:    rgba(245, 158, 11, 0.18);
  --st-late-fg:     #B91C1C;  --st-late-bg:     rgba(239, 68, 68, 0.10);
  --st-idle-fg:     #4A5568;  --st-idle-bg:     rgba(74, 85, 104, 0.10);
  --mock-on-accent: #0A1019;  /* fixed: text on the mock's accent buttons, both themes */

  /* Fixed: phone mock and floating card (white in both themes) */
  --phone-bg:          #FFFFFF;
  --phone-alt:         #F3F5F8;
  --phone-text:        #1F2937;
  --phone-strong:      #0A1019;
  --phone-muted:       #4A5568;
  --phone-line:        #C5CEDB;
  --phone-border:      #DDE3EC;
  --phone-accent:      #14B8A6;
  --phone-accent-text: #0F766E;
  --phone-on-accent:   #0A1019;
  --phone-bezel:       #0A1019;

  /* WhatsApp mock: follows the page theme and uses WhatsApp's own light and dark palettes */
  --wa-header:      #008069;
  --wa-header-text: #FFFFFF;
  --wa-header-sub:  #F7FCFB;
  --wa-avatar:      #DFE5E7;
  --wa-avatar-text: #3B4A54;
  --wa-chat:        #EFEAE2;
  --wa-in:          #FFFFFF;
  --wa-out:         #D9FDD3;
  --wa-text:        #111B21;
  --wa-meta:        #54656F;  /* timestamps and the day chip (5:1+ on the bubbles) */
  --wa-action:      #0A6EA3;  /* button labels (5.5:1 on --wa-in) */
  --wa-tick:        #1B84BD;
  --wa-chip:        #FFFFFF;
  --wa-input:       #FFFFFF;
  --wa-input-text:  #54656F;
  --wa-dots:        #76858F;
  --wa-shadow:      0 1px 0.5px rgba(11, 20, 26, 0.13);

  /* Legacy palette: module.html and modules-data.js still use these names */
  --series-1: #1B2A49; /* navy */
  --series-2: #eb6834; /* orange */
  --series-3: #1baf7a; /* aqua */
  --series-4: #eda100; /* yellow */
  --series-5: #e87ba4; /* magenta */
  --series-6: #008300; /* green */
  --series-7: #4a3aa7; /* violet */
  --series-8: #e34948; /* red */
  --good:     #0ca30c;
  /* Navy is too desaturated for a light color-mix tint to read as "blue"
     (it just looks gray), so these are brighter tints in the same hue, used
     only as tinted button/badge backgrounds. Text stays the literal navy. */
  --brand-tint:        #dce6f9;
  --brand-tint-strong: #c1d2f6;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Core */
  --bg:            #0A1019;
  --bg-alt:        #0D1420;
  --surface:       #101826;
  --surface-2:     #151F2F;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: #66758B;
  --text:          #E8ECF2;
  --text-strong:   #FFFFFF;
  --muted:         #9AA7BA;
  --accent:        #2DD4BF;
  --accent-text:   #2DD4BF;
  --accent-hover:  #5EEAD4;
  --on-accent:     #0A1019;

  /* Effects */
  --scrim:         rgba(0, 0, 0, 0.66);
  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -24px rgba(0, 0, 0, 0.70);
  --shadow-lift:   0 1px 2px rgba(0, 0, 0, 0.50), 0 28px 56px -24px rgba(0, 0, 0, 0.85);
  --shadow-float:  0 2px 6px rgba(0, 0, 0, 0.40), 0 24px 48px -16px rgba(0, 0, 0, 0.70);
  --shadow-dialog: 0 32px 80px -24px rgba(0, 0, 0, 0.80);

  /* Dashboard mock: follows the page theme */
  --mock-ring:        rgba(255, 255, 255, 0.12);
  --mock-shadow:      0 2px 6px rgba(0, 0, 0, 0.40), 0 44px 80px -32px rgba(0, 0, 0, 0.85);
  --mock-chrome:      #0A1019;
  --mock-bg:          #101826;
  --mock-tile:        #151F2F;
  --mock-border:      rgba(255, 255, 255, 0.09);
  --mock-text:        #E8ECF2;
  --mock-strong:      #FFFFFF;
  --mock-muted:       #9AA7BA;
  --mock-accent:      #2DD4BF;
  --mock-accent-text: #2DD4BF;
  --mock-bar:         #2DD4BF;
  --mock-warn:        #FCD34D;
  --mock-active-bg:   rgba(45, 212, 191, 0.16);
  --mock-track:       rgba(255, 255, 255, 0.10);
  --mock-dot:         rgba(255, 255, 255, 0.18);
  --st-ready-fg:    #5EEAD4;  --st-ready-bg:    rgba(45, 212, 191, 0.14);
  --st-progress-fg: #8DBBFF;  --st-progress-bg: rgba(96, 165, 250, 0.16);
  --st-check-fg:    #FCD34D;  --st-check-bg:    rgba(251, 191, 36, 0.14);
  --st-late-fg:     #FCA5A5;  --st-late-bg:     rgba(248, 113, 113, 0.16);
  --st-idle-fg:     #9AA7BA;  --st-idle-bg:     rgba(154, 167, 186, 0.14);

  /* WhatsApp mock */
  --wa-header:      #202C33;
  --wa-header-text: #E9EDEF;
  --wa-header-sub:  #A9B7BF;
  --wa-avatar:      #3B4A54;
  --wa-avatar-text: #E9EDEF;
  --wa-chat:        #0B141A;
  --wa-in:          #202C33;
  --wa-out:         #005C4B;
  --wa-text:        #E9EDEF;
  --wa-meta:        #C3D2CC;
  --wa-action:      #53BDEB;
  --wa-tick:        #53BDEB;
  --wa-chip:        #182229;
  --wa-input:       #2A3942;
  --wa-input-text:  #A9B7BF;
  --wa-dots:        #8696A0;
  --wa-shadow:      0 1px 0.5px rgba(0, 0, 0, 0.35);

  /* Legacy palette (brightened for dark-mode contrast) */
  --series-1: #4C6FA8; /* navy */
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --good:     #0ca30c;
  --brand-tint:        color-mix(in srgb, var(--series-1) 32%, transparent);
  --brand-tint-strong: color-mix(in srgb, var(--series-1) 46%, transparent);
}

/* Legacy names used by the module.html styles below, mapped onto the tokens so
   that page follows the same light/dark palette. Declared on :root so they
   resolve against whichever theme is active. */
:root {
  --surface-1:      var(--surface);
  --page-plane:     var(--bg-alt);
  --text-primary:   var(--text-strong);
  --text-secondary: var(--text);
  --text-muted:     var(--muted);
  --gridline:       var(--border);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  scroll-behavior: smooth;
}

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

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Nav */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-mark.brand-mark-dark { display: none; }
:root[data-theme="dark"] .brand-mark.brand-mark-light { display: none; }
:root[data-theme="dark"] .brand-mark.brand-mark-dark { display: inline-block; }
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-secondary);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}
.theme-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand-tint);
  color: var(--series-1);
}
.btn-primary:hover { background: var(--brand-tint-strong); }
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: transparent;
}
.btn-ghost:hover { background: var(--gridline); }

/* Button row under the module.html call-to-action */
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 56px;
}

/* Browser-bar chrome, KPI tiles, tables and badges (module.html demo panels) */
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--page-plane);
}
.mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.mockup-url {
  margin-left: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
}
.mockup-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.mockup-kpi {
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.mockup-kpi-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.mockup-kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.mockup-kpis-5 {
  grid-template-columns: repeat(5, 1fr);
}
.mockup-kpi-warn {
  border-color: color-mix(in srgb, var(--series-8) 40%, var(--border));
}
.mockup-kpi-warn .mockup-kpi-value {
  color: var(--series-8);
}
.mockup-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
}
.mockup-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1.1fr;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gridline);
  align-items: center;
}
.mockup-row:last-child { border-bottom: none; }
.mockup-row-head {
  background: var(--page-plane);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  width: fit-content;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.badge-open { color: var(--text-secondary); background: var(--gridline); }
.badge-open::before { background: var(--text-muted); }
.badge-progress { color: #fff; background: var(--series-1); }
.badge-progress::before { background: #fff; }
.badge-qc { color: #1a1300; background: color-mix(in srgb, var(--series-4) 30%, transparent); }
.badge-qc::before { background: var(--series-4); }
.badge-done { color: #fff; background: var(--good); }
.badge-done::before { background: #fff; }

/* Dashboard widgets */
.mockup-widget-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
}
.mockup-widget {
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.mockup-widget h5 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 700;
}
.mockup-widget-h5-mt { margin-top: 14px; }
.mockup-schedule-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gridline);
}
.mockup-schedule-row:last-of-type { border-bottom: none; }
.mockup-schedule-time { color: var(--text-muted); }
.mockup-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.mockup-quick-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--series-1);
}
.mockup-quick-action .material-symbols-outlined { font-size: 14px; }
.mockup-progress { margin-bottom: 10px; }
.mockup-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.mockup-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--gridline);
  overflow: hidden;
}
.mockup-progress-fill {
  height: 100%;
  background: var(--series-1);
  border-radius: 999px;
}
.mockup-dot-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mockup-dot-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.mockup-dot-stat-row strong {
  margin-left: auto;
  color: var(--text-primary);
}
.mockup-dot-stat-row .mockup-dot {
  width: 7px;
  height: 7px;
}

/* Job Card Worksheet (detail view) */
.mockup-worksheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mockup-worksheet-title {
  font-size: 14px;
  font-weight: 700;
}
.mockup-worksheet-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.mockup-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.mockup-step {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  position: relative;
  padding-right: 10px;
}
.mockup-step:not(:last-child)::after {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--gridline);
  margin-left: 4px;
}
.mockup-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gridline);
  flex-shrink: 0;
}
.mockup-step.done { color: var(--text-secondary); }
.mockup-step.done .mockup-step-dot { background: var(--good); }
.mockup-step.active { color: var(--series-1); }
.mockup-step.active .mockup-step-dot { background: var(--series-1); }

/* Colored-bar KPI cards (Employees style) */
.mockup-kpis-bar { grid-template-columns: repeat(4, 1fr); }
.mockup-kpi-bar {
  border-left: 3px solid var(--bar-color);
}

/* Plain list toolbar (Customers / Invoices style) */
.mockup-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mockup-toolbar-title {
  font-size: 14px;
  font-weight: 700;
}
.mockup-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--series-1);
  padding: 6px 10px;
  border-radius: 7px;
}
.mockup-toolbar-btn .material-symbols-outlined { font-size: 14px; }
.mockup-row-5 { grid-template-columns: 1fr 1fr 1.2fr 0.8fr 0.6fr; }
.mockup-row-actions {
  color: var(--text-muted);
  display: flex;
}
.mockup-row-actions .material-symbols-outlined { font-size: 15px; }

@media (max-width: 900px) {
  .module-panel-body .mockup-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .module-panel-body .mockup-row span:nth-child(3) { display: none; }
  .module-panel-body .mockup-row-5 { grid-template-columns: 1fr 1fr; }
  .module-panel-body .mockup-row-5 span:nth-child(3),
  .module-panel-body .mockup-row-5 span:nth-child(4) { display: none; }
  .module-panel-body .mockup-kpis-5 { grid-template-columns: repeat(3, 1fr); }
  .module-panel-body .mockup-kpis-5 .mockup-kpi:nth-child(4),
  .module-panel-body .mockup-kpis-5 .mockup-kpi:nth-child(5) { display: none; }
  .module-panel-body .mockup-kpis-bar { grid-template-columns: repeat(2, 1fr); }
  .module-panel-body .mockup-widget-grid { grid-template-columns: 1fr; }
}

/* Scroll-triggered reveal. JS adds .is-visible via IntersectionObserver; see the
   index.html/module.html scripts. Content is visible by default: it is only hidden
   once the script has put html.reveal-ready in place (right after the observer that
   will reveal it is running), so a script error, blocked storage or an old browser
   can never leave a section invisible. (Staggered grids live in home.css.) */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Section shell */
section {
  padding: 80px 0;
}

/* CTA band */
.cta-band {
  text-align: center;
  background: color-mix(in srgb, var(--series-1) 10%, var(--surface-1));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 56px 40px;
  color: var(--text-primary);
}
.cta-band h2 {
  font-size: 28px;
  margin: 0 0 12px;
  font-weight: 800;
}
.cta-band p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 28px;
}
.cta-band .btn-primary {
  border-color: color-mix(in srgb, var(--series-1) 30%, transparent);
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-note {
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .nav-links.open {
    max-height: 320px;
    visibility: visible;
  }
  .nav-links a {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 600px) {
  .hero-actions { flex-direction: column; }
}

/* Demo request modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,11,11,0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open {
  display: flex;
}
.modal {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(11,11,11,0.4);
}
@media (max-width: 600px) {
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .modal {
    max-width: none;
    max-height: none;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  }
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}
.modal-close:hover { background: var(--gridline); }
.modal h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
}
.modal-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.form-row {
  margin-bottom: 14px;
  text-align: left;
}
.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
}
.form-row select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23898781'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 01 0-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
  cursor: pointer;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.modal-actions .btn {
  flex: 1;
}
@media (max-width: 480px) {
  .modal-actions { flex-direction: column; }
}

/* Module detail page */
.module-hero {
  padding: 40px 0 32px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.back-link:hover { color: var(--text-primary); }
.back-link .material-symbols-outlined { font-size: 16px; }
.module-hero-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.module-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  flex-shrink: 0;
}
.module-hero-head h1 {
  font-size: 28px;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.module-hero-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 560px;
}

.module-demo {
  padding: 0 0 80px;
}
.module-shell {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 480px;
  background: var(--surface-1);
  box-shadow: 0 20px 60px -30px rgba(11,11,11,0.2);
}
.module-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--page-plane);
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}
.module-sidebar-item .material-symbols-outlined { font-size: 18px; }
.module-sidebar-item:hover {
  background: var(--gridline);
  color: var(--text-primary);
}
.module-sidebar-item.active {
  background: color-mix(in srgb, var(--series-1) 14%, transparent);
  color: var(--series-1);
}
.module-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.module-panel-body {
  padding: 24px;
  flex: 1;
}

@media (max-width: 760px) {
  .module-shell { flex-direction: column; }
  .module-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .module-sidebar-item { white-space: nowrap; }
  .module-hero-head { align-items: flex-start; }
  .module-hero-head h1 { font-size: 22px; }
}