/* =============================================================================
   DARK MODE + MOBILE ENHANCEMENTS
   File     : dark-mode-mobile.css
   Depends  : styles.css (load this AFTER styles.css)

   TABLE OF CONTENTS
   -----------------
   1.  Dark-mode CSS variables
   2.  Dark-mode — base / typography
   3.  Dark-mode — header & nav
   4.  Dark-mode — service bar & dropdowns
   5.  Dark-mode — tab nav
   6.  Dark-mode — cards, surfaces, grids
   7.  Dark-mode — forms & inputs
   8.  Dark-mode — footer
   9.  Dark-mode — chat widget
   10. Dark-mode toggle button
   11. Mobile — header
   12. Mobile — service bar
   13. Mobile — tab nav
   14. Mobile — content pages
   15. Mobile — grids (team, testimonials, industry)
   16. Mobile — footer
   17. Dark-mode — about page
   18. Mobile — about page
   19. Mobile — chat widget & back-to-top
   ============================================================================= */


/* =============================================================================
   0. ACCESSIBILITY FIXES
   ============================================================================= */

/* ── Contrast: muted/role text was below 4.5:1 ratio ── */
/* team role, testimonial role, muted text — darkened to pass WCAG AA */
.team-card .t-role        { color: #6b6b6b; }   /* was #888 — now 4.6:1 on white */
.testimonial-card .role   { color: #6b6b6b; }
.svc-section-sub          { color: #5e5e5e; }   /* was #777 */
.svc-card-desc            { color: #555; }       /* was #666 */
.svc-sub-desc             { color: #555; }
.ind-desc                 { color: #555; }
.step-body p              { color: #4a4a4a; }    /* was #555 */
.logo-slogan              { color: #6b6b6b; }    /* was #888 */
.placeholder-card p       { color: #6b6b6b; }    /* was #999 */
.story-card p             { color: #4a4a4a; }    /* was #555 */
.about-section-body p     { color: #3d3d3d; }    /* was #444 */
.about-blist li           { color: #3d3d3d; }

/* ── Contrast fixes in dark mode ── */
body.dark-mode .team-card .t-role,
body.dark-mode .testimonial-card .role { color: #9a9eb8; }
body.dark-mode .svc-section-sub        { color: #9a9eb8; }
body.dark-mode .logo-slogan            { color: #9a9eb8; }

/* ── Logo name: --color-danger is #220754 (near black) — brighten for dark bg */
body.dark-mode .logo-name,
body.dark-mode .logo-name span         { color: #c084fc; }

/* ── Mini logo image: slight brightness boost in dark mode */
body.dark-mode .logo-wrap img          { filter: brightness(1.1); }

/* ── Chatbot FAB: black button is invisible on dark bg — lighten it */
body.dark-mode .cw-fab                 { background: #2a2a3e; border: 1px solid rgba(255,255,255,0.15); }

/* ── Chatbot window: ensure it stays visible in dark mode */
body.dark-mode .cw-window              { box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); }

/* ── Heading order: .step-body h3 sits inside sections that use h2,
      so we visually style h3 the same but it's semantically correct ── */
.step-body h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: #1a1a2e; }


/* =============================================================================
   1. DARK-MODE CSS VARIABLES
   ============================================================================= */

body.dark-mode {
  /* Surfaces */
  --color-bg:           #0f0f1a;
  --color-bg-subtle:    #161625;
  --color-bg-blue:      #1a1e38;

  /* Borders */
  --color-border:       #2a2a42;
  --color-border-light: #222238;

  /* Text */
  --color-text:         #b0b4c4;
  --color-text-light:   #8a8ea8;
  --color-muted:        #5e6280;
  --color-dark:         #dde0f0;

  /* Brand (keep hue, lighten for dark bg) */
  --color-primary:        #5ba8d8;
  --color-primary-dark:   #4a90c0;
  --color-primary-light:  #6bbde8;

  /* Service bar stays dark already; subtle tweak */
  --color-svc-bar:        #2a0808;
  --color-svc-bar-hover:  #3d0f0f;

  /* Footer stays dark — minor brightening */
  --color-footer-bg:      #0a1520;
  --color-footer-bottom:  #060e18;
}


/* =============================================================================
   2. DARK-MODE — BASE / TYPOGRAPHY
   ============================================================================= */

body.dark-mode {
  background: var(--color-bg);
  color: var(--color-text);
}

body.dark-mode a { color: var(--color-primary); }
body.dark-mode a:hover { color: var(--color-accent); }

/* Shared page wrappers */
body.dark-mode .simple-page-wrap p,
body.dark-mode .simple-page-wrap ul li { color: var(--color-text); }

body.dark-mode .simple-page-wrap h1,
body.dark-mode .simple-page-wrap h2 { color: var(--color-dark); }

/* Article */
body.dark-mode .article h1,
body.dark-mode .article h2 { color: var(--color-primary); }

body.dark-mode .article p,
body.dark-mode .article ul.blist li { color: var(--color-text); }

body.dark-mode .article h2 { border-bottom-color: var(--color-border); }
body.dark-mode .article ul.blist li { border-bottom-color: var(--color-border-light); }

/* Main wrap */
body.dark-mode .main-wrap { background: var(--color-bg); }


/* =============================================================================
   3. DARK-MODE — HEADER & NAV
   ============================================================================= */

body.dark-mode .top-header {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}

body.dark-mode .top-links a { color: var(--color-dark); }
body.dark-mode .top-links a { border-color: var(--color-border); }
body.dark-mode .top-links a:hover { color: var(--color-primary); }

body.dark-mode .phone-wrap .ph-num { color: var(--color-dark); }

/* Search bar */
body.dark-mode .search-wrap { border-color: var(--color-border); }
body.dark-mode .search-wrap input {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
body.dark-mode .search-wrap button {
  background: #1e1e30;
  border-left-color: var(--color-border);
  color: var(--color-text);
}


/* =============================================================================
   4. DARK-MODE — SERVICE BAR & DROPDOWNS
   ============================================================================= */

body.dark-mode .service-bar { background: var(--color-svc-bar); }
body.dark-mode .svc-item:hover > a { background: var(--color-svc-bar-hover); }

body.dark-mode .svc-dropdown {
  background: #161625;
  border-top-color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}

body.dark-mode .svc-dropdown a {
  color: var(--color-dark);
  border-bottom-color: var(--color-border-light);
}

body.dark-mode .svc-dropdown a:hover {
  background: var(--color-bg-blue);
  color: var(--color-primary);
}


/* =============================================================================
   5. DARK-MODE — TAB NAV
   ============================================================================= */

body.dark-mode .tab-nav { border-bottom-color: var(--color-primary-light); }
body.dark-mode .tab-nav-inner a { color: var(--color-dark); }
body.dark-mode .tab-nav-inner a:hover { color: var(--color-primary); }


/* =============================================================================
   6. DARK-MODE — CARDS, SURFACES, GRIDS
   ============================================================================= */

/* Generic white cards */
body.dark-mode .about-card,
body.dark-mode .team-card,
body.dark-mode .testimonial-card,
body.dark-mode .story-card,
body.dark-mode .industry-card,
body.dark-mode .svc-section,
body.dark-mode .contact-info-box,
body.dark-mode .office-box,
body.dark-mode .toc-box,
body.dark-mode .quote-box {
  background: #161625;
  border-color: var(--color-border);
}

/* Subtle-background cards */
body.dark-mode .svc-card,
body.dark-mode .svc-sub-item,
body.dark-mode .placeholder-card {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}

/* Logo strip */
body.dark-mode .logo-strip-wrap {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}
body.dark-mode .logo-chip {
  background: #161625;
  border-color: var(--color-border);
}

/* Accordion (About sidebar) */
body.dark-mode .about-accordion {
  background: #161625;
  border-color: var(--color-border);
}

/* Text inside cards */
body.dark-mode .testimonial-card .quote,
body.dark-mode .about-section-body p,
body.dark-mode .about-blist li,
body.dark-mode .svc-card-desc,
body.dark-mode .svc-sub-desc,
body.dark-mode .svc-section-sub,
body.dark-mode .ind-desc,
body.dark-mode .step-body p,
body.dark-mode .story-card p,
body.dark-mode .office-card { color: var(--color-text); }

body.dark-mode .about-card-heading,
body.dark-mode .svc-section-title,
body.dark-mode .svc-card-name,
body.dark-mode .ind-name,
body.dark-mode .step-num + .step-body h3,
body.dark-mode .story-card h3,
body.dark-mode .svc-sub-name,
body.dark-mode .team-card .t-name,
body.dark-mode .testimonial-card .author { color: var(--color-dark); }

body.dark-mode .testimonial-card .role,
body.dark-mode .team-card .t-role { color: var(--color-muted); }

/* Stat pill & jump links */
body.dark-mode .story-stat { background: #1a2a4a; color: #7bade0; }

body.dark-mode .svc-jump-link {
  background: #1a2040;
  color: var(--color-primary);
  border-color: var(--color-border);
}
body.dark-mode .svc-jump-link:hover {
  background: var(--color-primary);
  color: #fff;
}

/* TOC box */
body.dark-mode .toc-box h3 {
  background: var(--color-bg-blue);
  color: var(--color-primary);
  border-bottom-color: var(--color-border);
}
body.dark-mode .toc-box ul li { border-bottom-color: var(--color-border-light); }
body.dark-mode .toc-box ul li a { color: var(--color-text); }
body.dark-mode .toc-box ul li a:hover { background: var(--color-bg-blue); color: var(--color-primary); }

/* Quote box */
body.dark-mode .quote-box h3 { color: var(--color-dark); }
body.dark-mode .quote-box .qsub { color: var(--color-text-light); }
body.dark-mode .captcha-code { background: #1e1e30; border-color: var(--color-border); color: var(--color-dark); }
body.dark-mode .qnote,
body.dark-mode .qnote a { color: var(--color-muted); }
body.dark-mode .qcontact { border-top-color: var(--color-border-light); }
body.dark-mode .qc-row { color: var(--color-text); }

/* Breadcrumb */
body.dark-mode .breadcrumb { border-bottom-color: var(--color-border-light); }
body.dark-mode .breadcrumb-inner,
body.dark-mode .breadcrumb-inner a { color: var(--color-muted); }

/* Contact page */
body.dark-mode .contact-page-wrap { background: var(--color-bg); }
body.dark-mode .contact-form-section h1 { color: var(--color-primary); }
body.dark-mode .contact-form-section .intro { color: var(--color-text-light); }
body.dark-mode .contact-form label { color: var(--color-text); }

body.dark-mode .contact-info-box .box-title,
body.dark-mode .office-box .box-title {
  background: #1a3050;
  color: #fff;
}
body.dark-mode .contact-info-box .box-body { background: #161625; }
body.dark-mode .ci-row { color: var(--color-text); border-bottom-color: var(--color-border-light); }
body.dark-mode .ci-row .ci-label { color: var(--color-muted); }
body.dark-mode .office-card { color: var(--color-text); border-bottom-color: var(--color-border-light); }
body.dark-mode .office-card strong { color: var(--color-primary); }

/* Contact sidebar accordion (About page) */
body.dark-mode .asi-row span { color: var(--color-text); }


/* =============================================================================
   7. DARK-MODE — FORMS & INPUTS
   ============================================================================= */

body.dark-mode .contact-form input,
body.dark-mode .contact-form select,
body.dark-mode .contact-form textarea,
body.dark-mode .quote-box input,
body.dark-mode .quote-box textarea,
body.dark-mode .about-accordion-body input,
body.dark-mode .about-accordion-body textarea {
  background: #1e1e30;
  border-color: var(--color-border);
  color: var(--color-dark);
}

body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form select:focus,
body.dark-mode .contact-form textarea:focus,
body.dark-mode .quote-box input:focus,
body.dark-mode .quote-box textarea:focus,
body.dark-mode .about-accordion-body input:focus,
body.dark-mode .about-accordion-body textarea:focus {
  border-color: var(--color-primary);
  background: #222240;
}

body.dark-mode .contact-form .reset-btn {
  background: #1e1e30;
  border-color: var(--color-border);
  color: var(--color-text);
}

body.dark-mode .form-note-bottom { color: var(--color-muted); }
body.dark-mode .about-accordion-body .qnote { color: var(--color-muted); }

/* Success / error banners */
body.dark-mode .success-msg {
  background: #0d2a10;
  border-color: #1a5c20;
  color: #6fcf79;
}
body.dark-mode .form-error-banner {
  background: #2a0a0a;
  border-color: #6b1a1a;
  color: #f08080;
}


/* =============================================================================
   8. DARK-MODE — FOOTER
   ============================================================================= */

/* Footer colours come from --color-footer-bg / --color-footer-bottom overrides
   already set in section 1. No extra rules needed — footer text is already
   white/semi-white so it reads fine on dark. */


/* =============================================================================
   9. DARK-MODE — CHAT WIDGET
   ============================================================================= */

/* The chat widget already uses its own dark (#0a0a0a) palette, so it looks
   great in both modes. We only adjust the FAB tooltip/border if needed. */
body.dark-mode .cw-fab {
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}

/* Back-to-top button */
body.dark-mode .back-to-top {
  background: var(--color-primary);
}
body.dark-mode .back-to-top:hover {
  background: var(--color-primary-dark);
}


/* =============================================================================
   10. DARK-MODE TOGGLE BUTTON
   ============================================================================= */

.dm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 20px;
  padding: 5px 13px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-base);
  font-weight: 600;
  color: var(--color-dark, #1c0202);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.dm-toggle:hover {
  background: rgba(128,128,128,.1);
}

.dm-toggle .dm-icon {
  font-size: 14px;
  line-height: 1;
}

/* In dark mode the toggle inherits updated --color-dark / --color-border */
body.dark-mode .dm-toggle {
  color: var(--color-dark);
  border-color: var(--color-border);
}


/* =============================================================================
   11. MOBILE — HEADER  (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {
  .top-header { padding: 8px 0; }

  .top-header-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 0 14px;
  }

  .logo-wrap { min-width: unset; }
  .logo-name  { font-size: 24px; }

  .header-right {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Hide secondary text nav on mobile — service bar already handles navigation */
  .top-links { display: none; }

  .phone-wrap .ph-num { font-size: 15px; }
  .phone-wrap .ph-icon { font-size: 16px; }

  /* Shrink search on mobile */
  .search-wrap input { width: 110px; font-size: 12px; }

  .dm-toggle { font-size: 12px; padding: 4px 10px; }
}

/* Very small phones */
@media (max-width: 400px) {
  .logo-name { font-size: 20px; }
  .header-actions { gap: 8px; }
  /* Stack contact btn + dark toggle vertically if needed */
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
}


/* =============================================================================
   12. MOBILE — SERVICE BAR  (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {
  /* Give service bar a stacking context so dropdowns appear above page content */
  .service-bar {
    position: relative;
    z-index: 1000;
  }

  .service-bar-inner {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .service-bar-inner::-webkit-scrollbar { display: none; }

  .svc-item > a {
    font-size: 10px;
    padding: 10px 10px;
    white-space: nowrap;
  }

  /* Dropdown: sits directly below the bar item, high z-index */
  .svc-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 200px;
    max-width: 90vw;
    z-index: 2000;
    display: none;
  }

  /* Disable CSS hover-based dropdowns on touch — React state handles taps */
  .svc-item:hover .svc-dropdown { display: none; }

  /* React adds .open class on tap — must come AFTER hover rule to win */
  .svc-item.open .svc-dropdown { display: block !important; }
}


/* =============================================================================
   13. MOBILE — TAB NAV  (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {
  .tab-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 10px;
  }
  .tab-nav-inner::-webkit-scrollbar { display: none; }

  .tab-nav-inner a {
    font-size: 12px;
    padding: 10px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}


/* =============================================================================
   14. MOBILE — CONTENT PAGES  (≤ 640px)
   ============================================================================= */

@media (max-width: 640px) {
  /* Simple page (about, privacy, etc.) */
  .simple-page-wrap { padding: 24px 14px 56px; }

  /* About layout (already has its own media query; reinforce padding) */
  .about-layout { padding: 24px 14px 56px; }

  /* Services page */
  .svc-page-jumps { padding: 12px 14px 0; gap: 7px; }
  .svc-jump-link  { font-size: 11.5px; padding: 5px 10px; }
  .svc-page-wrap  { padding: 18px 14px 56px; }
  .svc-section    { padding: 20px 14px 16px; border-radius: 8px; }
  .svc-cards-grid { grid-template-columns: 1fr 1fr; }

  /* Contact page */
  .contact-page-inner { padding: 0 14px; gap: 24px; }
  .contact-form-section h1 { font-size: 22px; }

  /* Steps */
  .steps-list li { gap: 12px; }
  .step-num { width: 36px; height: 36px; font-size: 0.85rem; }

  /* Story cards */
  .story-card { padding: 18px 14px; }

  /* Section heading */
  .section-heading-row { padding: 12px 14px 0; }
  .section-heading-row h2 { font-size: 18px; }
}

@media (max-width: 480px) {
  /* Contact form — single column */
  .contact-form .form-row { grid-template-columns: 1fr; }
  .contact-form .submit-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .contact-form .submit-btn,
  .contact-form .reset-btn { width: 100%; text-align: center; }

  /* Very small service card grid */
  .svc-cards-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   15. MOBILE — GRIDS  (≤ 600px)
   ============================================================================= */

@media (max-width: 600px) {
  /* Single column on all phones — 2-up was too narrow on iPhone 13 (390px) */
  .team-grid        { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .industry-grid    { grid-template-columns: 1fr; }
}

/* Allow 2-up team cards only on wider tablets */
@media (min-width: 601px) and (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}


/* =============================================================================
   16. MOBILE — FOOTER  (≤ 768px / 480px already in styles.css)
   Supplements the existing rules in styles.css.
   ============================================================================= */

@media (max-width: 768px) {
  .footer-cols { padding: 28px 14px 20px; gap: 24px; }
}

@media (max-width: 480px) {
  .footer-bottom-inner { text-align: center; }
}


/* =============================================================================
   17. DARK-MODE — ABOUT PAGE  (about.css components)
   ============================================================================= */

body.dark-mode .about-card-box {
  background: #161625;
  border-color: var(--color-border);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

body.dark-mode .about-sec-heading { color: var(--color-dark); }

body.dark-mode .about-divider {
  background: linear-gradient(90deg, #1a6fa333, #f5a10022, transparent);
}

body.dark-mode .about-collapsible-fade {
  background: linear-gradient(to bottom, transparent, #161625);
}

body.dark-mode .about-collapsible-chevron { color: var(--color-primary); }

body.dark-mode .about-stat-card {
  background: #161625;
  border-color: var(--color-border);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3);
}
body.dark-mode .about-stat-label { color: var(--color-muted); }

body.dark-mode .about-feat-card {
  background: #161625;
  border-color: var(--color-border);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}
body.dark-mode .about-feat-card--hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
body.dark-mode .about-feat-title { color: var(--color-dark); }
body.dark-mode .about-feat-desc  { color: var(--color-text); }

body.dark-mode .about-vision-block {
  background: linear-gradient(135deg, #1a6fa312, #f5a10010);
  border-color: var(--color-border);
}
body.dark-mode .about-vision-block p { color: var(--color-text); }

body.dark-mode .about-step-title { color: var(--color-dark); }
body.dark-mode .about-step-desc  { color: var(--color-text); }

body.dark-mode .about-trust-box {
  background: #161625;
  border-color: var(--color-border);
}
body.dark-mode .about-trust-label { color: var(--color-muted); }
body.dark-mode .about-trust-row   { color: var(--color-text); }

body.dark-mode .about-sec-label { color: var(--color-primary); }


/* =============================================================================
   18. MOBILE — ABOUT PAGE  (≤ 600px)
   ============================================================================= */

@media (max-width: 600px) {
  .about-vision-grid { grid-template-columns: 1fr !important; }
  .about-stats-row   { flex-wrap: wrap; }
}


/* =============================================================================
   19. MOBILE — CHAT WIDGET & BACK-TO-TOP  (≤ 480px)
   ============================================================================= */

@media (max-width: 480px) {
  /* Bring FAB closer to edge */
  .cw-root { bottom: 16px; right: 16px; }

  /* Chat window — full-width with gutters */
  .cw-window {
    width: calc(100vw - 32px);
    max-height: 72vh;
    right: 0;
    bottom: 68px;
    border-radius: 16px;
  }

  /* Back-to-top: avoid overlapping FAB */
  .back-to-top { bottom: 90px; left: 16px; }
}




/* =============================================================================
   20. DATA ENTRY TOOL PAGE  (det-*)

   ── COLOR PALETTE — change these vars to retheme the whole tool ──────────────
   Page bg            : --det-page-bg      #f2f2f2   (light grey — matches screenshot)
   Section card bg    : --det-card-bg      #ffffff
   Section border     : --det-card-border  #e5e7eb
   Step number circle : --det-step-bg      #1a6fa3   (brand blue)  ← change here
   Step number text   : --det-step-color   #ffffff
   Section label      : --det-label-color  #6b7280   (grey)
   Drop zone border   : --det-dz-border    #d1d5db
   Drop zone hover bg : --det-dz-hover     #eef5fc   (blue pale)
   Drop zone icon     : --det-dz-icon      #9ca3af   (grey)
   Pill bg            : --det-pill-bg      #ffffff
   Pill border        : --det-pill-border  #d1d5db
   Pill text          : --det-pill-text    #374151
   "AI suggest" btn   : --det-sug-bg       #ffffff
   "AI suggest" border: --det-sug-border   #d1d5db
   "AI suggest" text  : --det-sug-text     #374151
   Extract / DL btn bg: --det-btn-bg       #1a2b3c   (near-black — matches screenshot)
   Extract / DL btn txt: --det-btn-color   #ffffff
   Table header bg    : --det-th-bg        #f9fafb
   Table header text  : --det-th-text      #6b7280
   Table row hover    : --det-row-hover    #f9fafb
   Source cell text   : --det-src-color    #9ca3af
   ── END PALETTE ──────────────────────────────────────────────────────────────
   ============================================================================= */

/* ── Root page wrapper ─────────────────────────────────────────────────────── */
.det-page {
  --det-page-bg:      #f2f2f2;
  --det-card-bg:      #ffffff;
  --det-card-border:  #e5e7eb;
  --det-card-shadow:  0 1px 3px rgba(0,0,0,.07);
  --det-step-bg:      #1a6fa3;
  --det-step-color:   #ffffff;
  --det-label-color:  #6b7280;
  --det-dz-border:    #d1d5db;
  --det-dz-hover:     #eef5fc;
  --det-dz-icon:      #9ca3af;
  --det-pill-bg:      #ffffff;
  --det-pill-border:  #d1d5db;
  --det-pill-text:    #374151;
  --det-sug-bg:       #ffffff;
  --det-sug-border:   #d1d5db;
  --det-sug-text:     #374151;
  --det-btn-bg:       #1a2b3c;
  --det-btn-color:    #ffffff;
  --det-th-bg:        #f9fafb;
  --det-th-text:      #6b7280;
  --det-row-hover:    #f9fafb;
  --det-src-color:    #9ca3af;

  background: var(--det-page-bg);
  min-height: calc(100vh - 120px);
  padding-bottom: 60px;
  font-family: var(--font-base, 'Open Sans', sans-serif);
}

/* ── Top bar (title + badge) ───────────────────────────────────────────────── */
.det-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--det-card-border);
  background: var(--det-card-bg);
}
.det-topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.det-topbar-badge {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: .02em;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.det-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Section cards ─────────────────────────────────────────────────────────── */
.det-section {
  background: var(--det-card-bg);
  border: 1px solid var(--det-card-border);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--det-card-shadow);
}

.det-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Numbered circle */
.det-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--det-step-bg);
  color: var(--det-step-color);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
}

.det-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--det-label-color);
  text-transform: uppercase;
}

/* ── Drop zone ─────────────────────────────────────────────────────────────── */
.det-dropzone {
  border: 2px dashed var(--det-dz-border);
  border-radius: 8px;
  padding: 48px 20px 38px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  background: transparent;
}
.det-dropzone:hover,
.det-dz-over {
  border-color: #1a6fa3;
  background: var(--det-dz-hover);
}
.det-dz-icon {
  color: var(--det-dz-icon);
  margin-bottom: 14px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.det-dz-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 5px;
}
.det-dz-sub {
  font-size: 13px;
  color: #9ca3af;
}

/* ── Thumbnails ────────────────────────────────────────────────────────────── */
.det-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.det-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  flex-shrink: 0;
}
.det-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.det-pdf-preview {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
}
.det-pdf-name {
  font-size: 8px;
  color: #6b7280;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  display: block;
}

/* Remove button — dark circle top-right, matches screenshot */
.det-thumb-rm {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #374151;
  color: #fff;
  border: none;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
  transition: opacity .12s;
}
.det-thumb-rm:hover { opacity: 1; }

/* Status badge */
.det-thumb-badge {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
  text-align: center;
  backdrop-filter: blur(3px);
}
.det-badge-pending    { background: rgba(245,158,11,.8);  color: #78350f; }
.det-badge-processing { background: rgba(26,111,163,.85); color: #fff; }
.det-badge-done       { background: rgba(26,111,163,.92); color: #fff; }
.det-badge-error      { background: rgba(220,38,38,.8);   color: #fff; }

/* ── Column pills ───────────────────────────────────────────────────────────── */
.det-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 32px;
  align-items: center;
}
.det-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eef5fc;
  border: 1px solid #b8d4ed;
  border-radius: 20px;
  padding: 5px 10px 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1a6fa3;
}
.det-pill-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: #5ab4da;
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
}
.det-pill-rm:hover { color: #1a6fa3; }

/* ── Add field row ─────────────────────────────────────────────────────────── */
.det-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.det-col-input {
  border: 1.5px solid #b8d4ed;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #f7fbff;
  outline: none;
  width: 220px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.det-col-input:focus {
  border-color: #1a6fa3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,111,163,.12);
}
.det-col-input::placeholder { color: #9ca3af; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */

/* "+ Add" — outlined grey, matches screenshot */
.det-btn-add {
  border: none;
  border-radius: 6px;
  background: #1a6fa3;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .15s;
}
.det-btn-add:hover { background: #2196c9; }

/* "AI suggest" — subtle outlined, top-right of step 2 */
.det-btn-suggest {
  border: 1px solid #f5a100;
  border-radius: 20px;
  background: #fff8e6;
  color: #b36b00;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color .15s, background .15s, color .15s;
}
.det-btn-suggest:hover:not(:disabled) { background: #fde9a0; border-color: #d48f00; color: #7a5500; }
.det-btn-suggest:disabled { opacity: .5; cursor: not-allowed; }

/* "Extract" / "Download" — solid dark, matches screenshot exactly */
.det-btn-extract {
  background: #1a6fa3;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(26,111,163,.30);
}
.det-btn-extract:hover:not(:disabled) { background: #2196c9; box-shadow: 0 4px 14px rgba(26,111,163,.40); }
.det-btn-extract:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Download button gets the orange accent to differentiate from Extract */
.det-btn-download {
  background: #f5a100;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(245,161,0,.30);
}
.det-btn-download:hover { background: #d48f00; box-shadow: 0 4px 14px rgba(245,161,0,.40); }

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.det-spin {
  display: inline-block;
  width: 11px; height: 11px;
  border: 2px solid rgba(26,111,163,.25);
  border-top-color: #1a6fa3;
  border-radius: 50%;
  animation: det-sp .6s linear infinite;
  flex-shrink: 0;
  margin-right: 7px;
}
.det-spin-white {
  border-color: rgba(255,255,255,.3);
  border-top-color: #fff;
  margin-right: 7px;
}
@keyframes det-sp { to { transform: rotate(360deg); } }

/* ── Extract row ────────────────────────────────────────────────────────────── */
.det-extract-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.det-status-msg {
  font-size: 13px;
  color: #374151;
}
.det-status-err { color: #dc2626; }

/* ── Table ──────────────────────────────────────────────────────────────────── */
.det-tbl-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.det-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.det-tbl thead th {
  background: var(--det-th-bg);
  color: var(--det-th-text);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.det-tbl tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
  color: #374151;
  font-size: 13px;
  line-height: 1.5;
}
.det-tbl tbody tr:last-child td { border-bottom: none; }
.det-tbl tbody tr:hover td      { background: var(--det-row-hover); }
.det-tbl td[contenteditable]       { outline: none; cursor: text; }
.det-tbl td[contenteditable]:focus { background: #eef5fc; }
.det-src-cell {
  color: var(--det-src-color) !important;
  font-size: 12px !important;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Download row ───────────────────────────────────────────────────────────── */
.det-dl-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.det-dl-hint {
  font-size: 13px;
  color: #9ca3af;
}

/* ── Access denied ──────────────────────────────────────────────────────────── */
.det-denied {
  text-align: center;
  padding: 80px 24px;
}
.det-denied-icon { font-size: 3rem; margin-bottom: 16px; }
.det-denied h2   { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.det-denied p    { font-size: 14px; color: #6b7280; }

/* ── Dark mode ──────────────────────────────────────────────────────────────── */
body.dark-mode .det-page {
  --det-page-bg:     #0e0e1a;
  --det-card-bg:     #161625;
  --det-card-border: #2a2a42;
  --det-card-shadow: 0 1px 3px rgba(0,0,0,.3);
  --det-label-color: #7a8a9b;
  --det-dz-border:   #2a2a42;
  --det-dz-hover:    rgba(26,111,163,.12);
  --det-dz-icon:     #4b5563;
  --det-th-bg:       #1c1c2e;
  --det-th-text:     #7a8a9b;
  --det-row-hover:   #1c1c2e;
  --det-src-color:   #4b5563;
}
body.dark-mode .det-topbar       { background: #161625; border-color: #2a2a42; }
body.dark-mode .det-topbar-title { color: #dde0f0; }
body.dark-mode .det-topbar-badge { background: #1c1c2e; border-color: #2a2a42; color: #7a8a9b; }
body.dark-mode .det-dz-title     { color: #dde0f0; }
body.dark-mode .det-col-input    { background: #12243a; border-color: #1e4570; color: #dde0f0; }
body.dark-mode .det-col-input:focus { background: #0f1e2e; box-shadow: 0 0 0 3px rgba(26,111,163,.2); }
body.dark-mode .det-col-input::placeholder { color: #4b5563; }
/* Pills keep blue even in dark mode */
body.dark-mode .det-pill         { background: rgba(26,111,163,.18); border-color: #1e4570; color: #5ab4da; }
body.dark-mode .det-pill-rm      { color: #5ab4da; }
/* Suggest button keep orange tint in dark mode */
body.dark-mode .det-btn-suggest  { background: rgba(245,161,0,.12); border-color: rgba(245,161,0,.4); color: #f5a100; }
body.dark-mode .det-btn-suggest:hover:not(:disabled) { background: rgba(245,161,0,.22); }
body.dark-mode .det-tbl tbody td { color: #c8d0d9; border-bottom-color: #2a2a42; }
body.dark-mode .det-tbl td[contenteditable]:focus { background: rgba(26,111,163,.15); }
body.dark-mode .det-tbl-wrap     { border-color: #2a2a42; }

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .det-body    { padding: 16px 12px 0; gap: 12px; }
  .det-section { padding: 18px 16px; }
  .det-dropzone { padding: 36px 16px 28px; }
  .det-col-input { width: 160px; }
  .det-dl-row  { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   21. DATA ENTRY — SUBSCRIPTION UI  (login wall, usage bar, upgrade modal)

   ── COLOR PALETTE ─────────────────────────────────────────────────────────
   Plan badge free     : #6b7280  grey
   Plan badge starter  : #1a6fa3  brand blue
   Plan badge pro      : #7c3aed  purple
   Plan badge business : #f5a100  orange
   Usage bar fill      : #1a6fa3  → #f5a100 → #e53935 (green→amber→red)
   Modal overlay       : rgba(0,0,0,.55)
   Upgrade btn         : #1a6fa3 blue
   ── END PALETTE ───────────────────────────────────────────────────────────
   ============================================================================= */

/* ── Login wall ────────────────────────────────────────────────────────────── */
.det-wall {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 48px 36px;
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
}
.det-wall-icon  { font-size: 2.8rem; margin-bottom: 16px; }
.det-wall-title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 10px; }
.det-wall-sub   { font-size: 14px; color: #6b7280; line-height: 1.65; margin-bottom: 24px; }

.det-wall-plans {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.det-wall-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.det-wall-plan-desc { font-size: 13px; color: #374151; }

body.dark-mode .det-wall         { background: #161625; border-color: #2a2a42; }
body.dark-mode .det-wall-title   { color: #dde0f0; }
body.dark-mode .det-wall-plan    { background: #1c1c2e; border-color: #2a2a42; }
body.dark-mode .det-wall-plan-desc { color: #c8d0d9; }

/* ── Plan badge (shared across wall, usage bar, modal) ─────────────────────── */
.det-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Usage bar ─────────────────────────────────────────────────────────────── */
.det-usage-bar-wrap {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 24px;
}
.det-usage-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.det-usage-label   { font-size: 12px; color: #6b7280; flex: 1; }
.det-usage-upgrade {
  font-size: 11px;
  font-weight: 700;
  color: #1a6fa3;
  background: none;
  border: 1px solid #b8d4ed;
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.det-usage-upgrade:hover { background: #eef5fc; }

.det-usage-track {
  height: 5px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.det-usage-fill {
  height: 100%;
  border-radius: 10px;
  transition: width .4s ease;
}

body.dark-mode .det-usage-bar-wrap { background: #161625; border-color: #2a2a42; }
body.dark-mode .det-usage-label    { color: #7a8a9b; }
body.dark-mode .det-usage-track    { background: #2a2a42; }

/* ── Topbar user chip ──────────────────────────────────────────────────────── */
.det-topbar-user {
  margin-left: auto;
  font-size: 12px;
  color: #6b7280;
}
.det-file-limit-hint {
  margin-left: auto;
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

/* ── Disabled drop zone ────────────────────────────────────────────────────── */
.det-dz-disabled {
  opacity: .6;
  cursor: not-allowed !important;
  border-color: #e5e7eb !important;
  background: #f9fafb !important;
}

/* ── Locked extract button ─────────────────────────────────────────────────── */
.det-btn-locked {
  background: #6b7280 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.det-btn-locked:hover { background: #4b5563 !important; }

/* ── Upgrade modal overlay ─────────────────────────────────────────────────── */
.det-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: det-fade-in .18s ease;
}
@keyframes det-fade-in { from { opacity:0; } to { opacity:1; } }

.det-modal {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  animation: det-modal-up .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes det-modal-up { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.det-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280;
}
.det-modal-close:hover { background: #e5e7eb; }

.det-modal-icon   { font-size: 2.2rem; margin-bottom: 10px; text-align: center; }
.det-modal-title  { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; color: #111827; text-align: center; margin-bottom: 8px; }
.det-modal-reason { font-size: 13px; color: #6b7280; text-align: center; margin-bottom: 20px; line-height: 1.6; }

/* Billing toggle */
.det-billing-toggle {
  display: flex;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 20px;
  gap: 2px;
}
.det-billing-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, color .15s;
}
.det-billing-btn.active { background: #fff; color: #111827; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.det-billing-save {
  font-size: 10px;
  background: #dcfce7;
  color: #16a34a;
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 700;
}

/* Plan cards in modal */
.det-modal-plans {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.det-modal-plan {
  flex: 1;
  min-width: 140px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.det-modal-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.det-modal-price {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
}
.det-modal-period { font-size: 12px; font-weight: 400; color: #9ca3af; }

.det-modal-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: #374151;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.det-btn-upgrade {
  display: block;
  text-align: center;
  background: #1a6fa3;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.det-btn-upgrade:hover { background: #2196c9; }

body.dark-mode .det-modal         { background: #161625; }
body.dark-mode .det-modal-title   { color: #dde0f0; }
body.dark-mode .det-modal-close   { background: #2a2a42; color: #9ca3af; }
body.dark-mode .det-modal-close:hover { background: #333355; }
body.dark-mode .det-billing-toggle { background: #1c1c2e; }
body.dark-mode .det-billing-btn.active { background: #2a2a42; color: #dde0f0; }
body.dark-mode .det-modal-plan    { border-color: #2a2a42; }
body.dark-mode .det-modal-price   { color: #dde0f0; }
body.dark-mode .det-modal-features { color: #c8d0d9; }

@media (max-width: 480px) {
  .det-modal        { padding: 24px 18px; }
  .det-modal-plans  { flex-direction: column; }
  .det-usage-bar-wrap { padding: 8px 14px; }
}

/* ── Upgrade prompt — contact us style (replaces modal plan cards) ─────────── */
.det-upgrade-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.det-upgrade-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.det-upgrade-plan-desc { font-size: 13px; color: #374151; }

.det-upgrade-cta { text-align: center; }
.det-upgrade-cta-text {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 14px;
  line-height: 1.6;
}

.det-wall-contact-note {
  margin-top: 18px;
  font-size: 13px;
  color: #6b7280;
}
.det-wall-contact-note a {
  color: #1a6fa3;
  text-decoration: underline;
  cursor: pointer;
}

body.dark-mode .det-upgrade-plan-row { background: #1c1c2e; border-color: #2a2a42; }
body.dark-mode .det-upgrade-plan-desc { color: #c8d0d9; }
body.dark-mode .det-upgrade-cta-text  { color: #7a8a9b; }
body.dark-mode .det-wall-contact-note { color: #7a8a9b; }

/* ── Suggest Fields — prominent left-aligned button ─────────────────────── */
.det-suggest-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.det-btn-suggest-main {
  border: none;
  border-radius: 7px;
  background: #f5a100;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(245,161,0,.30);
  white-space: nowrap;
  flex-shrink: 0;
}
.det-btn-suggest-main:hover:not(:disabled) {
  background: #d48f00;
  box-shadow: 0 4px 14px rgba(245,161,0,.40);
}
.det-btn-suggest-main:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.det-suggest-hint {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
  line-height: 1.4;
}

body.dark-mode .det-suggest-hint { color: #4b5563; }