/* ============================================================================
   tools-hp.css — homepage-aligned re-skin for the /tools surface
   ----------------------------------------------------------------------------
   Applies the homepage hp- design language (flat, dark-first, single pink
   accent, Satoshi) to BOTH the /tools listing AND every /tools/<slug> detail
   page. Scoped under body.templates-page so it never leaks elsewhere.

   It re-skins three legacy systems that used to clash on these pages:
     1. .ai-generator-* tool UI (was a WHITE form on a dark page)
     2. the gradient .ai-generator-hero (brand rule: NO gradients)
     3. the Foundation .services/.solution/.content-grey legacy blocks
        (broken in DesignerBox's dark theme) + .bg-grey embedded lists.

   Loads LAST in the head so it wins the cascade. NO gradients, NO glows.
   Reuses the global --t-* theme tokens (auto light/dark) + --db-coral + Satoshi.
   ========================================================================== */

body.templates-page{
  --tp-line: color-mix(in srgb, var(--db-coral) 12%, transparent);
  --tp-line-strong: color-mix(in srgb, var(--db-coral) 26%, transparent);
  --tp-edge: clamp(20px, 5vw, 72px);
  --tp-ease: cubic-bezier(.2,.7,.2,1);
  --tp-radius: 14px;
  background: var(--t-bg) !important;
  color: var(--t-text);
  font-family: var(--font-clash);
  letter-spacing: -.01em;
}
body.templates-page .inner-wrap,
body.templates-page main#hero.landing-page{ background: var(--t-bg) !important; }
body.templates-page ::selection{ background: var(--db-coral); color:#fff; }
body.templates-page a:focus-visible,
body.templates-page button:focus-visible{ outline:2px solid var(--db-coral); outline-offset:3px; }

/* shared section rhythm + wrap */
body.templates-page .ai-generator-hero,
body.templates-page .ai-generator-tool-section,
body.templates-page .ai-steps-section,
body.templates-page .ai-showcase-section,
body.templates-page section.services{
  background: var(--t-bg) !important;
}
body.templates-page .ai-steps-container,
body.templates-page .ai-showcase-container,
body.templates-page .ai-generator-container{
  max-width: 1200px; margin-inline:auto; padding-inline: var(--tp-edge);
  box-sizing: border-box; width: 100%;
}
/* keep the re-skinned surfaces on a predictable box model so max-width caps
   include padding (some legacy blocks default to content-box) */
body.templates-page .ai-generator-hero,
body.templates-page .ai-generator-form,
body.templates-page .ai-section,
body.templates-page .ai-step-card,
body.templates-page .ai-showcase-item,
body.templates-page .ai-preview-card{ box-sizing: border-box; }

/* ----------------------------------------------------------------- HERO --- */
body.templates-page .ai-generator-hero{
  padding: clamp(72px,9vw,132px) var(--tp-edge) clamp(40px,5vw,64px);
  border-bottom: 1px solid var(--tp-line);
  text-align:center;
}
body.templates-page .ai-generator-hero::before,
body.templates-page .ai-generator-hero::after{ display:none !important; }
body.templates-page .ai-generator-hero-inner{ max-width: 860px; margin-inline:auto; }
body.templates-page .ai-hero-eyebrow{
  display:inline-block; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color: var(--t-text-secondary); margin-bottom:16px;
}
body.templates-page .ai-generator-hero-title{
  font-family: var(--font-clash);
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height:1.06; font-weight:650; letter-spacing:-.035em;
  color: var(--t-text) !important; margin:0; text-wrap:balance;
}
body.templates-page .ai-generator-hero-subtitle{
  color: var(--t-text-secondary) !important;
  font-size: clamp(1.02rem,1.5vw,1.22rem); line-height:1.55;
  max-width: 60ch; margin:18px auto 0;
}
body.templates-page .ai-hero-social-proof{
  display:inline-flex; align-items:center; gap:9px; margin:22px auto 0;
  font-size:14px; color: var(--t-text-secondary); font-weight:500;
}
body.templates-page .ai-hero-social-proof .ai-social-dot{
  width:8px; height:8px; border-radius:50%; background: var(--db-coral);
  box-shadow:none; position:relative;
}
body.templates-page .ai-hero-pills{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:22px auto 0; max-width:640px;
}
body.templates-page .ai-hero-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; color: var(--t-text-secondary);
  background: var(--t-bg-elevated); border:1px solid var(--tp-line);
  border-radius:999px; padding:7px 13px;
}
body.templates-page .ai-hero-pill .iconify{ color: var(--db-coral); opacity:.9; }
/* hero CTA row → hp buttons */
body.templates-page .ai-hero-cta-row,
body.templates-page .ai-hero-actions{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:30px auto 0;
}
body.templates-page .ai-hero-cta-row > a,
body.templates-page .ai-hero-actions > a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:inherit; font-weight:600; font-size:15px; line-height:1;
  border-radius:10px; padding:14px 24px; border:1px solid transparent;
  transition: transform .12s var(--tp-ease), background .18s, border-color .18s, color .18s;
}
body.templates-page .ai-hero-cta-row > a:active,
body.templates-page .ai-hero-actions > a:active{ transform:scale(.98); }
body.templates-page .ai-hero-cta-row > a:first-child,
body.templates-page .ai-hero-actions > a:first-child{ background: var(--db-coral); color:#fff; }
body.templates-page .ai-hero-cta-row > a:first-child:hover,
body.templates-page .ai-hero-actions > a:first-child:hover{ background: color-mix(in srgb, var(--db-coral) 88%, #fff); }
body.templates-page .ai-hero-cta-row > a:not(:first-child),
body.templates-page .ai-hero-actions > a:not(:first-child){ background:transparent; color: var(--t-text); border-color: var(--tp-line-strong); }
body.templates-page .ai-hero-cta-row > a:not(:first-child):hover,
body.templates-page .ai-hero-actions > a:not(:first-child):hover{ border-color: var(--t-text); }

/* ------------------------------------------------------- TOOL FORM UI (dark) */
body.templates-page .ai-generator-tool-section{ padding-block: clamp(40px,5vw,72px); }
body.templates-page .ai-generator-layout{ gap: clamp(20px,3vw,32px); }
body.templates-page .ai-generator-form{
  background: var(--t-bg-elevated) !important;
  border:1px solid var(--tp-line) !important;
  border-radius: var(--tp-radius); padding: clamp(18px,2.4vw,28px);
}
body.templates-page .ai-section{
  background: transparent !important;
  border:1px solid var(--tp-line) !important;
  border-radius:12px; margin-bottom:14px; overflow:hidden;
}
body.templates-page .ai-section-header{ background: var(--t-bg-card) !important; }
body.templates-page .ai-section-title{ color: var(--t-text) !important; font-weight:600; }
body.templates-page .ai-section-chevron{ color: var(--t-text-secondary); }
body.templates-page .ai-section-badge{
  background: var(--t-bg-input) !important; color: var(--t-text-secondary) !important;
  border:1px solid var(--tp-line);
}
body.templates-page .ai-script-hint,
body.templates-page .ai-field-desc,
body.templates-page .ai-muted-text{ color: var(--t-text-muted) !important; }
body.templates-page .ai-section-body label,
body.templates-page .ai-generator-form label{ color: var(--t-text-secondary) !important; }

/* inputs / selects / textareas */
body.templates-page .ai-input,
body.templates-page .ai-select,
body.templates-page .ai-generator-form textarea,
body.templates-page .ai-generator-form input[type="text"]{
  background: var(--t-bg-input) !important;
  color: var(--t-text) !important;
  border:1px solid var(--tp-line) !important;
  border-radius:10px !important;
}
body.templates-page .ai-input::placeholder,
body.templates-page .ai-generator-form textarea::placeholder{ color: var(--t-text-faint) !important; }
body.templates-page .ai-input:hover,
body.templates-page .ai-select:hover{ border-color: var(--tp-line-strong) !important; background: var(--t-bg-input) !important; }
body.templates-page .ai-input:focus,
body.templates-page .ai-select:focus,
body.templates-page .ai-generator-form textarea:focus{
  border-color: var(--db-coral) !important;
  box-shadow: 0 0 0 3px var(--db-coral-10) !important; outline:none !important;
}
body.templates-page .ai-select{
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e') !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:18px !important;
}
body.templates-page .ai-input-footer .ai-input-stat{ color: var(--t-text-faint) !important; }
body.templates-page .ai-help-btn{
  background: var(--t-bg-input) !important; color: var(--t-text-secondary) !important;
  border:1px solid var(--tp-line) !important; border-radius:8px !important;
}
body.templates-page .ai-help-btn:hover{ background: var(--t-bg-card-hover) !important; border-color: var(--tp-line-strong) !important; }

/* format options / media cards / card options */
body.templates-page .ai-format-label,
body.templates-page .ai-card-label,
body.templates-page .ai-media-card-inner{
  background: var(--t-bg-card) !important; color: var(--t-text) !important;
  border:1px solid var(--tp-line) !important; border-radius:10px !important;
}
body.templates-page .ai-format-label:hover,
body.templates-page .ai-card-label:hover,
body.templates-page .ai-media-card-inner:hover{ border-color: var(--tp-line-strong) !important; background: var(--t-bg-card-hover) !important; }
body.templates-page .ai-format-option input:checked + .ai-format-label,
body.templates-page .ai-card-option input:checked + .ai-card-label,
body.templates-page .ai-media-card input:checked + .ai-media-card-inner{
  border-color: var(--db-coral) !important; background: var(--db-coral-10) !important;
}
body.templates-page .ai-media-info strong{ color: var(--t-text) !important; }
body.templates-page .ai-media-info span,
body.templates-page .ai-model-desc{ color: var(--t-text-muted) !important; }
body.templates-page .ai-media-thumb{ background: var(--t-bg-input) !important; border-radius:8px; }

/* model tier pills / tabs */
body.templates-page .ai-model-pills,
body.templates-page .ai-tabs{ background: var(--t-bg-input) !important; border-radius:10px; border:1px solid var(--tp-line); }
body.templates-page .ai-model-pill span,
body.templates-page .ai-tab{ color: var(--t-text-secondary) !important; }
body.templates-page .ai-model-pill input:checked + span,
body.templates-page .ai-tab.active{ background: var(--db-coral) !important; color:#fff !important; border-radius:8px; }
body.templates-page .ai-model-info strong{ color: var(--t-text) !important; }

/* toggles */
body.templates-page .ai-toggle-label{ color: var(--t-text) !important; }
body.templates-page .ai-toggle-slider{ background: var(--t-bg-input) !important; }
body.templates-page .ai-toggle input:checked + .ai-toggle-slider{ background: var(--db-coral) !important; }

/* dropzone */
body.templates-page .ai-dropzone{
  background: var(--t-bg-card) !important; border:1.5px dashed var(--tp-line-strong) !important;
  color: var(--t-text-muted) !important; border-radius:10px;
}
body.templates-page .ai-dropzone:hover{ border-color: var(--db-coral) !important; background: var(--db-coral-04) !important; }

/* generate button + subtext + error */
body.templates-page .ai-generate-btn{
  background: var(--db-coral) !important; color:#fff !important;
  border:none !important; border-radius:10px !important; font-weight:600;
  box-shadow:none !important;
}
body.templates-page .ai-generate-btn:hover{ background: color-mix(in srgb, var(--db-coral) 88%, #fff) !important; }
body.templates-page .ai-generate-btn:active{ transform:scale(.99); }
body.templates-page .ai-generate-btn:disabled{ background: var(--t-bg-card-hover) !important; color: var(--t-text-faint) !important; }
body.templates-page .ai-generate-subtext{ color: var(--t-text-muted) !important; }
body.templates-page .ai-error{ background: rgba(239,68,68,.12) !important; color:#fca5a5 !important; border:1px solid rgba(239,68,68,.3) !important; border-radius:10px; }

/* preview panel */
body.templates-page .ai-preview-card{
  background: var(--t-bg-elevated) !important; border:1px solid var(--tp-line) !important; border-radius: var(--tp-radius);
}
body.templates-page .ai-preview-info h4{ color: var(--t-text) !important; }
body.templates-page .ai-preview-info > p{ color: var(--t-text-muted) !important; }
body.templates-page .ai-preview-spec{ background: var(--t-bg-card) !important; color: var(--t-text-secondary) !important; border:1px solid var(--tp-line); border-radius:8px; }
body.templates-page .ai-preview-spec strong{ color: var(--t-text) !important; }
body.templates-page .ai-preview-phone,
body.templates-page .ai-preview-screen,
body.templates-page .ai-preview-scene{ background: var(--t-bg-input) !important; }
body.templates-page .ai-preview-badge-live{ background: var(--db-coral) !important; color:#fff !important; }

/* modal */
body.templates-page .ai-modal-content{ background: var(--t-bg-elevated) !important; border:1px solid var(--tp-line) !important; color: var(--t-text); }
body.templates-page .ai-modal-header h3,
body.templates-page .ai-modal-body h4{ color: var(--t-text) !important; }
body.templates-page .ai-modal-body p{ color: var(--t-text-secondary) !important; }
body.templates-page .ai-script-example{ background: var(--t-bg-input) !important; color: var(--t-text-secondary) !important; border-radius:8px; }
body.templates-page .ai-modal-got-it{ background: var(--db-coral) !important; color:#fff !important; border-radius:10px; }
body.templates-page .ai-modal-close{ color: var(--t-text-muted) !important; }

/* ---------------------------------------------- STEPS ("how it works") ---- */
body.templates-page .ai-steps-section{ padding-block: clamp(48px,7vw,96px); border-top:1px solid var(--tp-line); }
body.templates-page .ai-steps-heading{
  font-size: clamp(1.7rem,3.6vw,2.6rem); font-weight:600; letter-spacing:-.03em;
  color: var(--t-text) !important; text-align:center; margin:0 0 clamp(28px,4vw,48px); text-wrap:balance;
}
body.templates-page .ai-steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.templates-page .ai-step-card{
  background: var(--t-bg-elevated) !important; border:1px solid var(--tp-line) !important;
  border-radius: var(--tp-radius) !important; padding: clamp(20px,2.4vw,28px) !important;
  box-shadow:none !important; transition: border-color .2s, transform .2s var(--tp-ease);
}
body.templates-page .ai-step-card:hover{ border-color: var(--tp-line-strong) !important; transform: translateY(-2px); }
body.templates-page .ai-step-num{
  color: var(--db-coral) !important; background:none !important;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; width:auto; height:auto;
}
body.templates-page .ai-step-card h3{ color: var(--t-text) !important; font-size:clamp(1.05rem,1.6vw,1.2rem); font-weight:600; letter-spacing:-.01em; margin:12px 0 0; }
body.templates-page .ai-step-card p{ color: var(--t-text-secondary) !important; font-size:.95rem; line-height:1.55; margin:10px 0 0; }

/* ------------------------------------------------------------- SHOWCASE ---- */
body.templates-page .ai-showcase-section{ padding-block: clamp(48px,7vw,96px); border-top:1px solid var(--tp-line); }
body.templates-page .ai-showcase-heading{
  font-size: clamp(1.7rem,3.6vw,2.6rem); font-weight:600; letter-spacing:-.03em;
  color: var(--t-text) !important; text-align:center; margin:0; text-wrap:balance;
}
body.templates-page .ai-showcase-subheading{ color: var(--t-text-secondary) !important; text-align:center; max-width:56ch; margin:14px auto clamp(36px,5vw,56px); font-size:1.05rem; line-height:1.55; }
body.templates-page .ai-showcase-item{
  background: var(--t-bg-elevated) !important; border:1px solid var(--tp-line) !important;
  border-radius:16px; padding: clamp(22px,3vw,40px) !important; margin-bottom:16px;
}
body.templates-page .ai-showcase-text h3{ color: var(--t-text) !important; font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:600; letter-spacing:-.02em; }
body.templates-page .ai-showcase-text > p{ color: var(--t-text-secondary) !important; line-height:1.55; }
body.templates-page .ai-showcase-bullets li{ color: var(--t-text) !important; }
body.templates-page .ai-showcase-bullets li::before,
body.templates-page .ai-showcase-bullets li::marker{ color: var(--db-coral) !important; }
body.templates-page .ai-showcase-phone,
body.templates-page .ai-showcase-screen,
body.templates-page .ai-showcase-placeholder{ background: var(--t-bg-input) !important; border-color: var(--tp-line) !important; }

/* -------------------------------- LEGACY .services / .solution features ---- */
/* Foundation grid blocks reused for "features / how-to / SEO copy". Flatten to
   readable dark-theme content so they stop reading as a different site. */
body.templates-page section.services{ padding-block: clamp(48px,7vw,88px) !important; border-top:1px solid var(--tp-line); }
body.templates-page section.services .intro-text,
body.templates-page section.services .head-main{
  color: var(--t-text) !important; font-family: var(--font-clash) !important;
  font-size: clamp(1.6rem,3.4vw,2.4rem) !important; font-weight:600 !important;
  letter-spacing:-.03em !important; text-transform:none !important; line-height:1.1 !important;
}
body.templates-page section.services .solution{ background:transparent !important; }
body.templates-page section.services .heading-description-3{
  color: var(--t-text) !important; font-weight:600 !important; font-size:1.05rem !important; letter-spacing:-.01em;
}
body.templates-page section.services .content-grey,
body.templates-page section.services .content-grey-2{
  background: var(--t-bg-elevated) !important; border:1px solid var(--tp-line) !important;
  border-radius:12px !important; color: var(--t-text-secondary) !important;
}
body.templates-page section.services .content-grey strong{ color: var(--t-text-secondary) !important; font-weight:400; }
body.templates-page section.services p{ color: var(--t-text-secondary) !important; }
body.templates-page section.services .ai-check-icon{ flex:none; }
/* SEO content prose block */
body.templates-page section.services .seo .h2,
body.templates-page section.services .seo h2{ color: var(--t-text) !important; }
body.templates-page section.services .seo p{ color: var(--t-text-secondary) !important; line-height:1.7; }
/* legacy CTA button in the features block → flat pink */
body.templates-page .action-button a.button,
body.templates-page a.cta-white-black-border{
  background: var(--db-coral) !important; color:#fff !important; border:none !important;
  border-radius:10px !important; padding:12px 22px !important; box-shadow:none !important;
}
body.templates-page .action-button a.button span,
body.templates-page a.cta-white-black-border span{ color:#fff !important; }
body.templates-page .action-button a.button:hover,
body.templates-page a.cta-white-black-border:hover{ background: color-mix(in srgb, var(--db-coral) 88%, #fff) !important; }

/* -------------------------------------------------- FAQ (mcp-faq canonical) */
body.templates-page section.services.pricing-plans-questions{ border-top:1px solid var(--tp-line); }
body.templates-page .faq-container{ max-width: 820px; margin-inline:auto; }
body.templates-page .faq-item{
  background:transparent !important; border:none !important;
  border-top:1px solid var(--tp-line) !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important;
}
body.templates-page .faq-item:last-child{ border-bottom:1px solid var(--tp-line) !important; }
body.templates-page .faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 4px !important; cursor:pointer; background:transparent !important;
}
body.templates-page .faq-question h3,
body.templates-page .faq-question .heading-description-3{
  color: var(--t-text) !important; font-size:1.05rem !important; font-weight:600 !important;
  margin:0 !important; letter-spacing:-.01em;
}
body.templates-page .faq-question .svg-icon-chevron-down,
body.templates-page .faq-question i{
  color: var(--db-coral) !important; flex:none; transition: transform .25s var(--tp-ease);
}
body.templates-page .faq-item.active .svg-icon-chevron-down,
body.templates-page .faq-item.open .svg-icon-chevron-down{ transform: rotate(180deg); }
body.templates-page .faq-answer-content{ padding:0 4px 22px !important; }
body.templates-page .faq-answer-content p{ color: var(--t-text-secondary) !important; line-height:1.65; margin:0; }

/* --------------------------------------- EMBEDDED TOOLS-LIST (#templates-list) */
body.templates-page #templates-list.bg-grey,
body.templates-page #templates-list.overlayall,
body.templates-page section.bg-grey,
body.templates-page section.overlayall{ background: var(--t-bg) !important; }
body.templates-page #templates-list{ border-top:1px solid var(--tp-line); padding-block: clamp(40px,6vw,80px); }
body.templates-page .categories-sidebar-title,
body.templates-page .templates-frontend-container-title{ color: var(--t-text) !important; }
body.templates-page .categories-list-frontend a,
body.templates-page .categories-list-frontend li{ color: var(--t-text-secondary) !important; }

/* related-tools chips (SEO tool template) */
body.templates-page .ai-related-tools a,
body.templates-page .ai-related-grid a{
  background: var(--t-bg-elevated) !important; border:1px solid var(--tp-line) !important;
  color: var(--t-text) !important; border-radius:10px !important;
}
body.templates-page .ai-related-tools a:hover,
body.templates-page .ai-related-grid a:hover{ border-color: var(--db-coral) !important; }

/* ====================================================== LISTING PAGE (/tools) */
/* legacy LoadFocus hero → hp hero */
body.templates-page .run-test-container-top{ text-align:center; }
body.templates-page h1.categoryName,
body.templates-page h1.loadtesting{
  font-family: var(--font-clash) !important; color: var(--t-text) !important;
  font-size: clamp(2.3rem,5.2vw,4rem) !important; font-weight:650 !important;
  letter-spacing:-.035em !important; line-height:1.06 !important; text-transform:none !important;
}
body.templates-page h2.categoryDescription,
body.templates-page .header-descr-speed{
  color: var(--t-text-secondary) !important; font-weight:400 !important;
  font-size: clamp(1.02rem,1.5vw,1.2rem) !important; max-width:60ch; margin-inline:auto; line-height:1.55;
}
body.templates-page .hero.wave-container::before,
body.templates-page .hero.wave-container::after,
body.templates-page .wave-container svg{ display:none !important; }
body.templates-page .link-container-front .button,
body.templates-page .strongHeader.button{
  background: var(--db-coral) !important; color:#fff !important; border:none !important;
  border-radius:10px !important; box-shadow:none !important;
}
/* listing tool cards (built client-side by getPresetOverviewBoxFrontend) */
body.templates-page .templates-frontend-container{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
body.templates-page .templates-frontend-container-title{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;
}
body.templates-page .cat-item{
  color: var(--t-text-secondary) !important; background: var(--t-bg-elevated) !important;
  border:1px solid var(--tp-line) !important; border-radius:999px !important; padding:7px 14px !important; font-weight:600;
}
body.templates-page .task-item.template-item{
  background: var(--t-bg-elevated) !important; border:1px solid var(--tp-line) !important;
  border-radius: var(--tp-radius) !important; box-shadow:none !important; overflow:hidden;
  transition:border-color .2s, transform .2s var(--tp-ease);
}
body.templates-page .task-item.template-item:hover{ border-color: var(--db-coral) !important; transform: translateY(-2px); }
body.templates-page .task-item.template-item{ min-height:0 !important; height:auto !important; }
body.templates-page .task-item .tag-box-header,
body.templates-page .task-item .tag-box-header.dark-background{
  background: transparent !important; border:none !important; border-radius:0 !important;
  padding:22px !important; min-height:0 !important; height:auto !important;
}
body.templates-page .task-item a{ display:block; text-decoration:none; }
body.templates-page .task-item .left-container-top{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:16px !important; min-height:0 !important;
}
body.templates-page .task-item .stream-wrapper{ width:100%; }
body.templates-page .task-item .templateName{
  color: var(--t-text) !important; font-weight:600 !important; font-size:1.1rem !important;
  letter-spacing:-.01em !important; line-height:1.25 !important; white-space:normal !important; margin:0 !important;
}
body.templates-page .task-item .button-cont{ width:100%; }
body.templates-page .task-item .details-button,
body.templates-page .task-item .use-template-button{ background:transparent !important; border:none !important; padding:0 !important; margin:0 !important; }
body.templates-page .task-item .details-button .card-symbol-item,
body.templates-page .task-item .use-template-button .card-symbol-item{
  color: var(--db-coral) !important; background:transparent !important; border:none !important;
  font-weight:600 !important; font-size:.9rem !important; padding:0 !important; display:inline-flex; align-items:center; gap:6px;
}
body.templates-page .task-item .details-button .card-symbol-item .icon-template{ display:none; }
body.templates-page .task-item .details-button .card-symbol-item span::after{ content:" \2192"; }
body.templates-page .task-item .add-template,
body.templates-page .task-item .card-symbol-item.add-template{ background:transparent !important; border:none !important; box-shadow:none !important; }
/* sidebar */
body.templates-page .templates-aside,
body.templates-page .categories-sidebar{ background:transparent !important; border:none !important; }
body.templates-page .categories-list-frontend .cat-item-side,
body.templates-page .categories-list-frontend li,
body.templates-page .categories-list-frontend a{
  color: var(--t-text-secondary) !important; border-radius:8px;
}
body.templates-page .categories-list-frontend .active,
body.templates-page .categories-list-frontend a:hover{ color: var(--t-text) !important; }

/* ================================================================= MOBILE === */
@media (max-width: 900px){
  body.templates-page .templates-frontend-container{ grid-template-columns:repeat(2,1fr); }
  body.templates-page .ai-steps-grid{ grid-template-columns:repeat(2,1fr); }
  body.templates-page .ai-generator-layout{ grid-template-columns:1fr !important; display:flex !important; flex-direction:column; }
  body.templates-page .ai-preview-panel{ order:-1; }
  body.templates-page .ai-preview-sticky{ position:static !important; }
}
@media (max-width: 620px){
  body.templates-page .templates-frontend-container{ grid-template-columns:1fr; }
  body.templates-page .ai-steps-grid{ grid-template-columns:1fr; }
  body.templates-page .ai-generator-hero{ padding-top: clamp(56px,14vw,88px); }
  body.templates-page .ai-hero-cta-row > a,
  body.templates-page .ai-hero-actions > a{ width:100%; justify-content:center; }
  body.templates-page .ai-showcase-item{ display:flex; flex-direction:column; }
  body.templates-page .ai-showcase-item.ai-showcase-reverse{ flex-direction:column; }
}

/* honour reduced motion */
@media (prefers-reduced-motion: reduce){
  body.templates-page *{ transition:none !important; animation:none !important; }
}