/* ==========================================================================
   Fancy Text Generator v2 — front-end styles

   Conflict safety:
   - every selector lives under .ftg-scope (the tool root, and the preview
     modal host), and every class is prefixed "ftg-"
   - every custom property is "--ftg-*"
   - the page <body> and the theme's own elements are never touched
   - the tool's own background only paints the tool's own panel
   ========================================================================== */

/* ---------- design tokens (default theme: Midnight Gold) ---------- */
.ftg-scope{
  --ftg-bg: radial-gradient(900px 420px at 8% -20%, rgba(240,132,92,.16), transparent 60%), radial-gradient(760px 420px at 100% 0%, rgba(232,185,74,.14), transparent 55%), #1B1420;
  --ftg-surface: #2A2233;
  --ftg-surface-2: #372C42;
  --ftg-text: #F5F1E8;
  --ftg-muted: #B7ACC6;
  --ftg-border: rgba(245,241,232,.14);
  --ftg-accent: #E8B94A;
  --ftg-accent-2: #F0845C;
  --ftg-on-accent: #1B1420;
  --ftg-card-bg: #F3EEE2;
  --ftg-card-text: #1B1420;
  --ftg-card-muted: rgba(27,20,32,.58);
  --ftg-card-border: rgba(0,0,0,.07);
  --ftg-card-accent: #C1443D;
  --ftg-ok: #5FAE7A;
  --ftg-danger: #E5484D;

  --ftg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ftg-font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ftg-font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --ftg-radius: 10px;
  --ftg-btn-radius: 999px;
  --ftg-preview-size: 18px;
}

.ftg-scope[data-ftg-font="modern"]{
  --ftg-font-display: 'Sora', -apple-system, 'Segoe UI', sans-serif;
  --ftg-font-body: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --ftg-font-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
}
.ftg-scope[data-ftg-font="system"]{
  --ftg-font-display: Georgia, 'Times New Roman', serif;
  --ftg-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ftg-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.ftg-scope[data-ftg-btn="rounded"]{ --ftg-btn-radius: 10px; }
.ftg-scope[data-ftg-btn="square"]{ --ftg-btn-radius: 2px; --ftg-radius: 3px; }

/* ---------- gradient themes ---------- */
.ftg-scope[data-ftg-theme="aurora"]{
  --ftg-bg: radial-gradient(800px 460px at 0% 0%, rgba(94,234,212,.20), transparent 60%), radial-gradient(800px 460px at 100% 10%, rgba(167,139,250,.22), transparent 55%), linear-gradient(160deg,#0B1F2A,#16243F);
  --ftg-surface:#13293A; --ftg-surface-2:#1B3550; --ftg-text:#EAFBFA; --ftg-muted:#9FB9C7; --ftg-border:rgba(190,240,235,.16);
  --ftg-accent:#5EEAD4; --ftg-accent-2:#A78BFA; --ftg-on-accent:#06202A;
  --ftg-card-bg:#EAF7F5; --ftg-card-text:#0B1F2A; --ftg-card-muted:rgba(11,31,42,.6); --ftg-card-accent:#D6246E;
}
.ftg-scope[data-ftg-theme="sunset"]{
  --ftg-bg: radial-gradient(800px 460px at 0% 100%, rgba(255,143,171,.30), transparent 60%), radial-gradient(700px 420px at 100% 0%, rgba(255,213,138,.22), transparent 55%), linear-gradient(160deg,#2D1B69,#9D2B6B);
  --ftg-surface:#3A2275; --ftg-surface-2:#4A2A86; --ftg-text:#FFF3EA; --ftg-muted:#E1BFE0; --ftg-border:rgba(255,230,240,.2);
  --ftg-accent:#FFD58A; --ftg-accent-2:#FF8FAB; --ftg-on-accent:#2D1B3A;
  --ftg-card-bg:#FFF1E8; --ftg-card-text:#2D1B3A; --ftg-card-muted:rgba(45,27,58,.62); --ftg-card-accent:#C2255C;
}
.ftg-scope[data-ftg-theme="ocean"]{
  --ftg-bg: radial-gradient(800px 460px at 100% 0%, rgba(103,232,249,.22), transparent 60%), linear-gradient(165deg,#06214A,#0B4F8A);
  --ftg-surface:#0B3466; --ftg-surface-2:#124479; --ftg-text:#EAF6FF; --ftg-muted:#A5C8E6; --ftg-border:rgba(190,225,255,.2);
  --ftg-accent:#67E8F9; --ftg-accent-2:#60A5FA; --ftg-on-accent:#042238;
  --ftg-card-bg:#EAF4FD; --ftg-card-text:#06214A; --ftg-card-muted:rgba(6,33,74,.6); --ftg-card-accent:#0369A1;
}
.ftg-scope[data-ftg-theme="neon"]{
  --ftg-bg: radial-gradient(700px 420px at 0% 0%, rgba(34,211,238,.18), transparent 60%), radial-gradient(700px 420px at 100% 100%, rgba(232,121,249,.20), transparent 60%), #0A0A14;
  --ftg-surface:#12121F; --ftg-surface-2:#1B1B2E; --ftg-text:#F2F4FF; --ftg-muted:#9A9DBA; --ftg-border:rgba(130,140,255,.25);
  --ftg-accent:#FF7A5C; --ftg-accent-2:#E879F9; --ftg-on-accent:#06121A;
  --ftg-card-bg:#14142A; --ftg-card-text:#F2F4FF; --ftg-card-muted:rgba(242,244,255,.6); --ftg-card-border:rgba(130,140,255,.3); --ftg-card-accent:#E879F9;
}
.ftg-scope[data-ftg-theme="candy"]{
  --ftg-bg: radial-gradient(700px 420px at 0% 0%, rgba(255,214,246,.9), transparent 60%), linear-gradient(160deg,#FFE3F6,#DCE8FF);
  --ftg-surface:#FFFFFF; --ftg-surface-2:#FDF0FA; --ftg-text:#3B0A3F; --ftg-muted:#7B4B80; --ftg-border:rgba(192,38,211,.22);
  --ftg-accent:#C026D3; --ftg-accent-2:#E11D48; --ftg-on-accent:#FFFFFF;
  --ftg-card-bg:#FFFFFF; --ftg-card-text:#3B0A3F; --ftg-card-muted:rgba(59,10,63,.6); --ftg-card-border:rgba(192,38,211,.18); --ftg-card-accent:#E11D48;
}
.ftg-scope[data-ftg-theme="forest"]{
  --ftg-bg: radial-gradient(800px 460px at 100% 0%, rgba(163,230,53,.14), transparent 60%), linear-gradient(165deg,#0A1F16,#14402B);
  --ftg-surface:#12301F; --ftg-surface-2:#1A432C; --ftg-text:#ECFAEF; --ftg-muted:#A6C7B2; --ftg-border:rgba(190,240,205,.18);
  --ftg-accent:#A3E635; --ftg-accent-2:#34D399; --ftg-on-accent:#0A1F16;
  --ftg-card-bg:#EEF6EA; --ftg-card-text:#0A1F16; --ftg-card-muted:rgba(10,31,22,.6); --ftg-card-accent:#15803D;
}
.ftg-scope[data-ftg-theme="royal"]{
  --ftg-bg: radial-gradient(800px 460px at 0% 0%, rgba(251,191,36,.14), transparent 60%), linear-gradient(165deg,#150B3A,#2F1A7A);
  --ftg-surface:#22125C; --ftg-surface-2:#2D1A74; --ftg-text:#F5F0FF; --ftg-muted:#B9ADE0; --ftg-border:rgba(220,210,255,.2);
  --ftg-accent:#FBBF24; --ftg-accent-2:#FB923C; --ftg-on-accent:#1B1030;
  --ftg-card-bg:#F4F0FF; --ftg-card-text:#150B3A; --ftg-card-muted:rgba(21,11,58,.6); --ftg-card-accent:#6D28D9;
}
.ftg-scope[data-ftg-theme="paper"]{
  --ftg-bg: linear-gradient(160deg,#F7F3EA,#FFFFFF);
  --ftg-surface:#FFFFFF; --ftg-surface-2:#F4EFE3; --ftg-text:#1F1A24; --ftg-muted:#6B6475; --ftg-border:rgba(31,26,36,.16);
  --ftg-accent:#C1443D; --ftg-accent-2:#D9480F; --ftg-on-accent:#FFFFFF;
  --ftg-card-bg:#FFFFFF; --ftg-card-text:#1F1A24; --ftg-card-muted:rgba(31,26,36,.6); --ftg-card-border:rgba(31,26,36,.12); --ftg-card-accent:#C1443D;
}
.ftg-scope[data-ftg-theme="glass"]{
  --ftg-bg: radial-gradient(700px 420px at 10% 0%, rgba(249,168,212,.30), transparent 60%), radial-gradient(700px 420px at 100% 100%, rgba(253,230,138,.22), transparent 60%), linear-gradient(150deg,#2a0a12,#701A75);
  --ftg-surface:rgba(255,255,255,.10); --ftg-surface-2:rgba(255,255,255,.16); --ftg-text:#FFF7FD; --ftg-muted:#E6CCEB; --ftg-border:rgba(255,255,255,.26);
  --ftg-accent:#FDE68A; --ftg-accent-2:#F9A8D4; --ftg-on-accent:#2A1038;
  --ftg-card-bg:rgba(255,255,255,.14); --ftg-card-text:#FFF7FD; --ftg-card-muted:rgba(255,247,253,.68); --ftg-card-border:rgba(255,255,255,.28); --ftg-card-accent:#FDE68A;
}

/* ---------- "Match my website": transparent, inherits text + fonts, buttons use the site's brand colour ----------
   Brand colour comes from Elementor's global colours (--e-global-color-primary), with a neutral blue fallback.
   Text colour is inherited (currentColor); all panels are translucent greys so it works on light AND dark sites. */
.ftg-scope[data-ftg-theme="site"]{
  --ftg-bg: transparent;
  --ftg-surface: rgba(127,127,127,.08);
  --ftg-surface-2: rgba(127,127,127,.14);
  --ftg-text: currentColor;
  --ftg-muted: rgba(105,105,105,1);
  --ftg-border: rgba(127,127,127,.32);
  --ftg-accent: var(--e-global-color-primary, #D3112F);
  --ftg-accent-2: var(--e-global-color-primary, #D3112F);
  --ftg-on-accent: #FFFFFF;
  --ftg-card-bg: rgba(127,127,127,.08);
  --ftg-card-text: currentColor;
  --ftg-card-muted: rgba(105,105,105,1);
  --ftg-card-border: rgba(127,127,127,.30);
  --ftg-card-accent: var(--e-global-color-primary, #D3112F);
}
@supports (color: color-mix(in srgb, red, blue)){
  .ftg-scope[data-ftg-theme="site"]{
    --ftg-muted: color-mix(in srgb, currentColor 72%, transparent);
    --ftg-card-muted: color-mix(in srgb, currentColor 72%, transparent);
  }
}
.ftg-scope[data-ftg-theme="site"] .ftg-hero{ background: none !important; -webkit-text-fill-color: currentColor !important; color: currentColor !important; }
.ftg-scope[data-ftg-theme="site"].ftg-modal-host .ftg-modal{ background: var(--ftg-modal-bg, #fff); }

/* ---------- root panel ---------- */
.ftg-wrap{
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  margin: 24px 0;
  padding: clamp(20px, 4vw, 44px);
  border-radius: 18px;
  border: 1px solid var(--ftg-border);
  background: var(--ftg-bg);
  color: var(--ftg-text);
  font-family: var(--ftg-font-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}
.ftg-wrap[data-ftg-animated="1"]{
  background-size: 160% 160%;
  animation: ftgDrift 18s ease-in-out infinite alternate;
}
@keyframes ftgDrift{ from{ background-position: 0% 0%; } to{ background-position: 100% 100%; } }

.ftg-scope *, .ftg-scope *::before, .ftg-scope *::after{ box-sizing: border-box; }
.ftg-scope [hidden]{ display: none !important; }
.ftg-scope ::selection{ background: var(--ftg-accent); color: var(--ftg-on-accent); }
.ftg-inner{ max-width: 1120px; margin: 0 auto; }

/* ---------- control resets (so themes can't restyle our buttons/inputs) ---------- */
.ftg-scope button,
.ftg-scope input,
.ftg-scope select,
.ftg-scope textarea{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  margin: 0;
  box-shadow: none;
  min-height: 0;
  height: auto;
  width: auto;
  max-width: 100%;
}
.ftg-scope button{
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  border-radius: 0;
}
.ftg-scope button[disabled]{ cursor: not-allowed; }
.ftg-scope :focus-visible{ outline: 2px solid var(--ftg-accent); outline-offset: 2px; }


/* ---------- theme-proofing guard ----------
   Themes sometimes ship button rules with !important. Each of our buttons sets
   --b-* variables (colours, padding, type), and this one rule applies them with
   !important, doubled-up on .ftg-scope for extra specificity. Hover/active states
   just change the variables, so they keep working. */
.ftg-scope.ftg-scope :is(.ftg-chip, .ftg-pill, .ftg-tab, .ftg-seg-btn, .ftg-sym, .ftg-fav, .ftg-copy-btn, .ftg-btn-ghost, .ftg-modal-close){
  background: var(--b-bg, transparent) !important;
  color: var(--b-fg, inherit) !important;
  border: var(--b-bw, 1px) solid var(--b-bd, transparent) !important;
  border-radius: var(--b-r, var(--ftg-btn-radius)) !important;
  padding: var(--b-pad, 7px 13px) !important;
  margin: 0 !important;
  min-width: var(--b-minw, 0) !important;
  min-height: 0 !important;
  font-family: var(--b-ff, var(--ftg-font-mono)) !important;
  font-size: var(--b-fs, 11px) !important;
  font-weight: var(--b-fw, 400) !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  letter-spacing: var(--b-ls, normal) !important;
  text-transform: var(--b-tt, none) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.ftg-scope.ftg-scope :is(.ftg-chip, .ftg-pill, .ftg-tab, .ftg-seg-btn, .ftg-sym, .ftg-fav, .ftg-copy-btn, .ftg-btn-ghost){
  width: auto !important;
  height: auto !important;
}

/* ---------- text + form guards ---------- */
.ftg-scope.ftg-scope .ftg-hero{
  margin: 0 0 12px !important; padding: 0 !important; border: 0 !important;
  text-transform: none !important; text-indent: 0 !important; text-shadow: none !important; text-decoration: none !important;
  letter-spacing: -.01em !important; font-weight: 600 !important; font-style: italic !important; line-height: 1.02 !important;
  font-family: var(--ftg-font-display) !important;
}
.ftg-scope.ftg-scope :is(.ftg-lede, .ftg-note, .ftg-noscript, .ftg-mock-text){
  text-indent: 0 !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important;
  font-family: var(--ftg-font-body) !important; font-style: normal !important; font-weight: 400 !important;
}
.ftg-scope.ftg-scope .ftg-lede{ font-size: 15px !important; line-height: 1.6 !important; color: var(--ftg-muted) !important; margin: 0 0 6px !important; padding: 0 !important; }
.ftg-scope.ftg-scope :is(.ftg-note, .ftg-noscript){ font-size: 12px !important; line-height: 1.5 !important; color: var(--ftg-muted) !important; margin: 18px 0 0 !important; padding: 0 !important; }
.ftg-scope.ftg-scope .ftg-mock-text{ font-size: 16px !important; line-height: 1.5 !important; color: var(--ftg-card-text) !important; margin: 0 !important; padding: 0 !important; }
.ftg-scope.ftg-scope :is(.ftg-catalog-head h3, .ftg-modal-head h4){
  border: 0 !important; padding: 0 !important; margin: 0 !important; text-transform: none !important; text-indent: 0 !important;
  letter-spacing: normal !important; text-shadow: none !important; text-decoration: none !important;
  font-family: var(--ftg-font-display) !important; font-weight: 600 !important; line-height: 1.2 !important;
  color: var(--ftg-text) !important;
}
.ftg-scope.ftg-scope .ftg-catalog-head h3{ font-size: clamp(19px, 2.6vw, 24px) !important; }
.ftg-scope.ftg-scope .ftg-modal-head h4{ font-size: 20px !important; }
.ftg-scope.ftg-scope .ftg-modal-head h4{ font-style: italic !important; }
.ftg-scope.ftg-scope .ftg-field{
  display: inline-flex !important; margin: 0 !important; padding: 0 !important;
  font-family: var(--ftg-font-mono) !important; font-size: 11px !important; font-weight: 400 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1.3 !important;
}
.ftg-scope.ftg-scope .ftg-field > span{ font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; }
.ftg-scope.ftg-scope .ftg-rule{ height: 0 !important; margin: 0 !important; border-width: 1px 0 0 !important; border-style: dashed !important; }
.ftg-scope.ftg-scope textarea.ftg-input{
  height: auto !important; width: 100% !important; min-height: 64px !important; padding: 6px 0 12px !important;
  background: transparent !important; color: var(--ftg-text) !important; border-width: 0 0 1px !important; border-style: dashed !important;
  border-color: var(--ftg-border) !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--ftg-font-display) !important; text-transform: none !important; letter-spacing: normal !important;
}
.ftg-scope.ftg-scope textarea.ftg-input:focus{ border-style: solid !important; border-color: var(--ftg-accent) !important; }
.ftg-scope.ftg-scope input.ftg-search{
  height: auto !important; padding: 9px 14px !important; background: var(--ftg-surface) !important; color: var(--ftg-text) !important;
  border: 1px solid var(--ftg-border) !important; border-radius: var(--ftg-btn-radius) !important; box-shadow: none !important;
  font-size: 14px !important; text-transform: none !important; letter-spacing: normal !important;
}
.ftg-scope.ftg-scope input.ftg-search:focus{ border-color: var(--ftg-accent) !important; }
.ftg-scope.ftg-scope select.ftg-select{
  height: auto !important; width: auto !important; padding: 6px 28px 6px 10px !important; background-color: var(--ftg-surface-2) !important;
  color: var(--ftg-text) !important; border: 1px solid var(--ftg-border) !important; border-radius: var(--ftg-btn-radius) !important;
  box-shadow: none !important; font-size: 13px !important; font-family: var(--ftg-font-body) !important;
  text-transform: none !important; letter-spacing: normal !important; font-weight: 400 !important;
}

/* ---------- heading block ---------- */
.ftg-eyebrow{
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--ftg-font-mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ftg-accent);
}
.ftg-eyebrow::before{ content: ""; width: 24px; height: 1px; background: var(--ftg-accent); }

.ftg-wrap .ftg-hero{
  margin: 0 0 12px; padding: 0;
  font-family: var(--ftg-font-display);
  font-weight: 600; font-style: italic;
  font-size: clamp(30px, 5.6vw, 60px);
  line-height: 1.02; letter-spacing: -.01em;
  color: var(--ftg-text);
  background: linear-gradient(100deg, var(--ftg-text) 0%, var(--ftg-text) 40%, var(--ftg-accent) 70%, var(--ftg-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ftg-wrap .ftg-lede{
  max-width: 640px; margin: 0 0 6px; padding: 0;
  font-size: 15px; line-height: 1.6; color: var(--ftg-muted);
}

.ftg-topbar{ display: flex; justify-content: flex-end; margin: 4px 0 -6px; }
.ftg-themes{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ftg-scope .ftg-theme-dot{
  --b-bd: var(--ftg-border);
  width: 22px !important; height: 22px !important; min-height: 0 !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
  border: 2px solid var(--b-bd) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition: transform .15s ease, border-color .15s ease;
}
.ftg-scope .ftg-theme-dot:hover{ transform: scale(1.15); }
.ftg-scope .ftg-theme-dot[aria-pressed="true"]{ --b-bd: var(--ftg-text); transform: scale(1.12); }

/* ---------- ledger ---------- */
.ftg-ledger{
  margin-top: 26px; padding: 20px 20px 16px;
  background: var(--ftg-surface);
  border: 1px solid var(--ftg-border);
  border-radius: var(--ftg-radius);
  backdrop-filter: blur(6px);
}
.ftg-ledger-label{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
  font-family: var(--ftg-font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ftg-muted);
}
.ftg-postmark{
  padding: 2px 10px; white-space: nowrap;
  font-family: var(--ftg-font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ftg-accent);
  border: 1px solid var(--ftg-accent);
  border-radius: 999px;
}
.ftg-wrap textarea.ftg-input{
  display: block; width: 100%; min-height: 64px; padding: 6px 0 12px;
  resize: none; outline: 0;
  font-family: var(--ftg-font-display);
  font-size: clamp(18px, 2.6vw, 26px); line-height: 1.4;
  color: var(--ftg-text);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--ftg-border);
  border-radius: 0;
}
.ftg-wrap textarea.ftg-input:focus{ border-bottom: 1px solid var(--ftg-accent); }
.ftg-wrap textarea.ftg-input::placeholder{ color: var(--ftg-muted); opacity: .7; font-style: italic; }

.ftg-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ftg-scope .ftg-chip{
  --b-bg: transparent; --b-fg: var(--ftg-muted); --b-bd: var(--ftg-border);
  --b-pad: 7px 13px; --b-fs: 11px; --b-ff: var(--ftg-font-mono); --b-tt: uppercase; --b-ls: .06em;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ftg-scope .ftg-chip:hover{ --b-fg: var(--ftg-accent); --b-bd: var(--ftg-accent); }
.ftg-scope .ftg-chip[aria-expanded="true"]{ --b-fg: var(--ftg-on-accent); --b-bg: var(--ftg-accent); --b-bd: var(--ftg-accent); }

.ftg-options{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.ftg-field{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--ftg-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ftg-muted); }
.ftg-wrap select.ftg-select{
  padding: 6px 28px 6px 10px;
  font-family: var(--ftg-font-body); font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--ftg-text);
  background-color: var(--ftg-surface-2);
  border: 1px solid var(--ftg-border);
  border-radius: var(--ftg-btn-radius);
  max-width: 200px;
}
.ftg-wrap select.ftg-select option{ color: #1B1420; background: #fff; }

.ftg-symbols{ margin-top: 14px; padding: 12px; background: var(--ftg-surface-2); border: 1px solid var(--ftg-border); border-radius: var(--ftg-radius); }
.ftg-sym-tabs{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ftg-sym-grid{ display: flex; flex-wrap: wrap; gap: 6px; }
.ftg-scope .ftg-sym{
  --b-bg: var(--ftg-surface); --b-fg: var(--ftg-text); --b-bd: var(--ftg-border); --b-r: 8px;
  --b-pad: 7px 10px; --b-fs: 17px; --b-ff: inherit; --b-minw: 38px;
  text-align: center;
  transition: transform .1s ease, border-color .15s ease;
}
.ftg-scope .ftg-sym:hover{ --b-bd: var(--ftg-accent); transform: translateY(-1px); }

.ftg-quick{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ftg-quick:empty{ display: none; }
.ftg-quick-label{ margin-right: 2px; font-family: var(--ftg-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ftg-muted); }
.ftg-scope .ftg-pill{
  --b-bg: var(--ftg-surface-2); --b-fg: var(--ftg-text); --b-bd: var(--ftg-border);
  --b-pad: 5px 11px; --b-fs: 12px; --b-ff: var(--ftg-font-body);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ftg-scope .ftg-pill:hover{ --b-bd: var(--ftg-accent); }
.ftg-scope .ftg-pill.ftg-active{ --b-fg: var(--ftg-on-accent); --b-bg: linear-gradient(100deg, var(--ftg-accent), var(--ftg-accent-2)); --b-bd: transparent; }
.ftg-scope .ftg-pill.ftg-pill-ghost{ --b-bg: transparent; --b-fg: var(--ftg-muted); }

/* ---------- catalog ---------- */
.ftg-catalog{ padding: 30px 0 4px; }
.ftg-catalog-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.ftg-wrap .ftg-catalog-head h3{
  margin: 0; padding: 0;
  font-family: var(--ftg-font-display); font-weight: 600;
  font-size: clamp(19px, 2.6vw, 24px); line-height: 1.2;
  color: var(--ftg-text);
}
.ftg-catalog-count{ font-family: var(--ftg-font-mono); font-size: 12px; color: var(--ftg-muted); }
.ftg-tools{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.ftg-field-inline input[type="range"]{ width: 110px; accent-color: var(--ftg-accent); padding: 0; }
.ftg-seg{ display: inline-flex; border: 1px solid var(--ftg-border); border-radius: var(--ftg-btn-radius); overflow: hidden; }
.ftg-scope .ftg-seg-btn{
  --b-bg: transparent; --b-fg: var(--ftg-muted); --b-bd: transparent; --b-bw: 0px; --b-r: 0px;
  --b-pad: 6px 12px; --b-fs: 11px; --b-ff: var(--ftg-font-mono); --b-tt: uppercase; --b-ls: .05em;
}
.ftg-scope .ftg-seg-btn.ftg-active{ --b-fg: var(--ftg-on-accent); --b-bg: var(--ftg-accent); }

.ftg-controls{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.ftg-wrap input.ftg-search{
  flex: 1 1 200px; max-width: 300px; padding: 9px 14px;
  font-size: 14px; color: var(--ftg-text);
  background: var(--ftg-surface);
  border: 1px solid var(--ftg-border);
  border-radius: var(--ftg-btn-radius);
  outline: 0;
}
.ftg-wrap input.ftg-search:focus{ border-color: var(--ftg-accent); }
.ftg-wrap input.ftg-search::placeholder{ color: var(--ftg-muted); }
.ftg-tabs{ display: flex; flex-wrap: wrap; gap: 6px; flex: 999 1 auto; }
.ftg-scope .ftg-tab{
  --b-bg: transparent; --b-fg: var(--ftg-muted); --b-bd: var(--ftg-border);
  --b-pad: 7px 14px; --b-fs: 13px; --b-ff: var(--ftg-font-body);
  transition: color .15s ease, border-color .15s ease;
}
.ftg-scope .ftg-tab:hover{ --b-fg: var(--ftg-text); --b-bd: var(--ftg-accent); }
.ftg-scope .ftg-tab.ftg-active{ --b-fg: var(--ftg-on-accent); --b-bg: linear-gradient(100deg, var(--ftg-accent), var(--ftg-accent-2)); --b-bd: transparent; --b-fw: 600; }

.ftg-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ftg-view-list .ftg-grid{ grid-template-columns: 1fr; gap: 10px; }

.ftg-card{
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 16px 14px;
  color: var(--ftg-card-text);
  background: var(--ftg-card-bg);
  border: 1px solid var(--ftg-card-border);
  border-radius: var(--ftg-radius);
  box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 10px 24px -14px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.ftg-card:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 16px 30px -14px rgba(0,0,0,.6); }
.ftg-card.ftg-in{ opacity: 0; transform: translateY(8px); animation: ftgIn .4s ease forwards; }
@keyframes ftgIn{ to{ opacity: 1; transform: translateY(0); } }
.ftg-card::before{
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ftg-accent), var(--ftg-accent-2));
}

.ftg-card-top{ display: flex; align-items: center; gap: 8px; }
.ftg-card-no{ font-family: var(--ftg-font-mono); font-size: 11px; letter-spacing: .05em; color: var(--ftg-card-accent); }
.ftg-card-label{ margin-left: auto; font-family: var(--ftg-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ftg-card-muted); text-align: right; }
.ftg-hot{ font-size: 12px; line-height: 1; }
.ftg-scope .ftg-fav{
  --b-bg: transparent; --b-fg: var(--ftg-card-muted); --b-bd: transparent; --b-bw: 0px; --b-r: 4px;
  --b-pad: 2px 3px; --b-fs: 18px; --b-ff: inherit;
  transition: transform .15s ease, color .15s ease;
}
.ftg-scope .ftg-fav:hover{ transform: scale(1.18); --b-fg: var(--ftg-accent); }
.ftg-scope .ftg-fav.ftg-on{ --b-fg: var(--ftg-accent); }
.ftg-rule{ margin: 0; border: 0; border-top: 1px dashed var(--ftg-card-border); opacity: 1; height: 0; background: none; }
.ftg-card .ftg-rule{ border-top-color: var(--ftg-card-muted); opacity: .35; }

.ftg-preview{
  min-height: 48px;
  font-family: var(--ftg-font-mono);
  font-size: var(--ftg-preview-size);
  line-height: 1.5;
  word-break: break-word; overflow-wrap: anywhere;
  color: var(--ftg-card-text);
}
.ftg-preview.ftg-demo{ opacity: .38; }

.ftg-card-foot{ display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: auto; }
.ftg-scope .ftg-copy-btn{
  --b-bg: linear-gradient(100deg, var(--ftg-accent), var(--ftg-accent-2)); --b-fg: var(--ftg-on-accent); --b-bd: transparent; --b-bw: 0px;
  --b-pad: 7px 15px; --b-fs: 11px; --b-ff: var(--ftg-font-mono); --b-tt: uppercase; --b-ls: .07em; --b-fw: 700;
  transition: transform .12s ease, filter .15s ease;
}
.ftg-scope .ftg-copy-btn:hover:not(:disabled){ filter: brightness(1.08); transform: translateY(-1px); }
.ftg-scope .ftg-copy-btn:disabled{ opacity: .4; filter: grayscale(.5); }
.ftg-scope .ftg-copy-btn.ftg-copied{ --b-bg: var(--ftg-ok); --b-fg: #0B1F12; transform: scale(1.04); }
.ftg-scope .ftg-btn-ghost{
  --b-bg: transparent; --b-fg: var(--ftg-card-text); --b-bd: var(--ftg-card-muted);
  --b-pad: 6px 12px; --b-fs: 11px; --b-ff: var(--ftg-font-mono); --b-tt: uppercase; --b-ls: .06em;
  opacity: .8;
  transition: opacity .15s ease, border-color .15s ease;
}
.ftg-scope .ftg-btn-ghost:hover{ opacity: 1; --b-bd: var(--ftg-accent); }

.ftg-empty-state{
  grid-column: 1 / -1; padding: 40px 18px; text-align: center;
  font-family: var(--ftg-font-mono); font-size: 13px; color: var(--ftg-muted);
  border: 1px dashed var(--ftg-border); border-radius: var(--ftg-radius);
}
.ftg-note, .ftg-noscript{ margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--ftg-muted); }

/* list view: card becomes a row */
.ftg-view-list .ftg-card{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ftg-view-list .ftg-card .ftg-rule{ display: none; }
.ftg-view-list .ftg-card-top{ flex: 0 0 170px; }
.ftg-view-list .ftg-card-label{ margin-left: 0; text-align: left; }
.ftg-view-list .ftg-preview{ flex: 1 1 220px; min-height: 0; }
.ftg-view-list .ftg-card-foot{ margin-top: 0; }


/* ---------- icons: inline SVG that follow the surrounding text colour ---------- */
.ftg-scope svg.ftg-ico{
  display: inline-block; flex: none; max-width: none !important;
  width: 1.15em !important; height: 1.15em !important; margin: 0 .4em 0 0; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ftg-scope svg.ftg-ico.ftg-fill{ fill: currentColor; }
.ftg-scope .ftg-fav svg.ftg-ico, .ftg-scope .ftg-hot svg.ftg-ico{ margin: 0; }
.ftg-scope .ftg-hot{ display: inline-flex; color: var(--ftg-card-accent); font-size: 13px; line-height: 1; }
.ftg-scope .ftg-search-wrap{ position: relative; display: block; flex: 1 1 200px; max-width: 300px; }
.ftg-scope .ftg-search-wrap svg.ftg-ico{ position: absolute; left: 13px; top: 50%; margin: 0; transform: translateY(-50%); color: var(--ftg-muted); pointer-events: none; }
.ftg-scope.ftg-scope .ftg-search-wrap input.ftg-search{ width: 100% !important; max-width: none; padding-left: 38px !important; }
.ftg-scope[data-ftg-font="site"].ftg-scope .ftg-hero,
.ftg-scope[data-ftg-font="site"].ftg-scope .ftg-modal-head h4{ font-style: normal !important; }

/* ---------- toast ---------- */
.ftg-toast{
  position: fixed; left: 50%; bottom: 24px; z-index: 100000;
  transform: translate(-50%, 14px);
  padding: 10px 18px;
  font-family: var(--ftg-font-mono); font-size: 12px; letter-spacing: .05em;
  color: #0B1F12; background: var(--ftg-ok);
  border-radius: 999px;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.ftg-toast.ftg-show{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- platform preview modal ---------- */
.ftg-modal-host{ position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: var(--ftg-font-body); font-size: 16px; line-height: 1.5; color: var(--ftg-text); }
.ftg-backdrop{ position: absolute; inset: 0; background: rgba(8,5,12,.66); backdrop-filter: blur(3px); }
.ftg-modal{
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 20px;
  background: var(--ftg-bg); background-color: var(--ftg-surface);
  border: 1px solid var(--ftg-border);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  animation: ftgPop .22s ease both;
}
@keyframes ftgPop{ from{ opacity: 0; transform: translateY(10px) scale(.98); } to{ opacity: 1; transform: none; } }
.ftg-modal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ftg-modal .ftg-modal-head h4{ margin: 0; padding: 0; font-family: var(--ftg-font-display); font-size: 20px; font-weight: 600; font-style: italic; color: var(--ftg-text); }
.ftg-scope .ftg-modal-close{
  --b-bg: transparent; --b-fg: var(--ftg-text); --b-bd: var(--ftg-border); --b-r: 50%;
  --b-pad: 0px; --b-fs: 16px; --b-ff: inherit;
  width: 34px !important; height: 34px !important; flex: 0 0 auto;
}
.ftg-scope .ftg-modal-close:hover{ --b-bd: var(--ftg-accent); --b-fg: var(--ftg-accent); }
.ftg-plat-tabs{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ftg-mock{ padding: 16px; background: var(--ftg-card-bg); color: var(--ftg-card-text); border: 1px solid var(--ftg-card-border); border-radius: 14px; }
.ftg-mock-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ftg-avatar{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-family: var(--ftg-font-display); font-weight: 600; color: var(--ftg-on-accent); background: linear-gradient(135deg, var(--ftg-accent), var(--ftg-accent-2)); border-radius: 50%; }
.ftg-mock-id{ display: flex; flex-direction: column; line-height: 1.25; }
.ftg-mock-id small{ color: var(--ftg-card-muted); font-size: 12px; }
.ftg-modal .ftg-mock-text{ margin: 0; padding: 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; color: var(--ftg-card-text); }
.ftg-limit{ margin-top: 10px; font-family: var(--ftg-font-mono); font-size: 12px; color: var(--ftg-muted); }
.ftg-limit.ftg-over{ color: var(--ftg-danger); font-weight: 700; }
.ftg-modal-foot{ display: flex; justify-content: flex-end; margin-top: 14px; }
.ftg-modal .ftg-note{ margin-top: 10px; }

/* ---------- motion + small screens ---------- */
@media (prefers-reduced-motion: reduce){
  .ftg-scope *, .ftg-scope *::before, .ftg-scope *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (max-width: 680px){
  .ftg-wrap{ padding: 18px; border-radius: 14px; }
  .ftg-grid{ grid-template-columns: 1fr; }
  .ftg-tools{ margin-left: 0; }
  .ftg-wrap input.ftg-search{ max-width: none; }
  .ftg-view-list .ftg-card-top{ flex-basis: 100%; }
  .ftg-ledger{ padding: 16px 14px 14px; }
}

/* ==========================================================================
   SEO guide (.ftg-guide). Deliberately NOT under .ftg-scope: headings, text
   and links keep the site's own typography and colours. Only layout here.
   ========================================================================== */
.ftg-guide{ margin:2.5rem 0 0; max-width:100%; }
.ftg-guide .ftg-guide-title{ margin:0 0 .75rem; }
.ftg-guide .ftg-guide-intro{ margin:0 0 1.5rem; font-size:1.05em; }
.ftg-guide .ftg-guide-sec{ margin:0 0 1.75rem; }
.ftg-guide .ftg-guide-sec h3{ margin:0 0 .5rem; }
.ftg-guide ul, .ftg-guide ol{ margin:.5rem 0 1rem; padding-left:1.4em; }
.ftg-guide li{ margin:.25rem 0; }
.ftg-guide p{ margin:0 0 1rem; }
.ftg-guide .ftg-guide-faq{ margin-top:2rem; }
.ftg-guide details.ftg-faq{ border:1px solid rgba(127,127,127,.35); border-radius:12px; margin:0 0 .6rem; padding:0; overflow:hidden; }
.ftg-guide details.ftg-faq > summary{ cursor:pointer; padding:.85rem 1rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.ftg-guide details.ftg-faq > summary::-webkit-details-marker{ display:none; }
.ftg-guide details.ftg-faq > summary::after{ content:"+"; font-size:1.3em; line-height:1; opacity:.7; flex:none; }
.ftg-guide details.ftg-faq[open] > summary::after{ content:"\2212"; }
.ftg-guide details.ftg-faq > summary:focus-visible{ outline:2px solid currentColor; outline-offset:-2px; }
.ftg-guide .ftg-faq-a{ padding:0 1rem .25rem; }

/* ==========================================================================
   "Match my website": modern, airy look (v2.3)
   Only applies to data-ftg-theme="site". No own page box (your Elementor
   container is the box), body font everywhere, soft rounded cards, sentence-
   case buttons, brand colour on hover / focus / active.
   ========================================================================== */
.ftg-scope[data-ftg-theme="site"]{
  --ftg-font-mono: var(--ftg-font-body);
  --ftg-radius: 18px;
}
.ftg-wrap[data-ftg-theme="site"]{ margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }

/* heading block */
.ftg-scope[data-ftg-theme="site"] .ftg-eyebrow{
  display: inline-flex; margin: 0 0 14px; padding: 5px 13px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none;
  color: var(--ftg-accent); border: 1px solid var(--ftg-accent); border-radius: 999px;
}
.ftg-scope[data-ftg-theme="site"] .ftg-eyebrow::before{ display: none; }
@supports (color: color-mix(in srgb, red, blue)){
  .ftg-scope[data-ftg-theme="site"] .ftg-eyebrow{ background: color-mix(in srgb, var(--ftg-accent) 10%, transparent); border-color: color-mix(in srgb, var(--ftg-accent) 35%, transparent); }
}
.ftg-scope.ftg-scope[data-ftg-theme="site"] .ftg-hero{
  font-weight: 700 !important; font-style: normal !important; letter-spacing: -.025em !important; line-height: 1.08 !important;
  font-size: clamp(28px, 4.4vw, 46px) !important; margin: 0 0 10px !important;
}
.ftg-scope.ftg-scope[data-ftg-theme="site"] .ftg-lede{ font-size: clamp(15px, 1.6vw, 17px) !important; max-width: 680px; }

/* compose panel */
.ftg-scope[data-ftg-theme="site"] .ftg-ledger{
  margin-top: 22px; padding: clamp(16px, 2.6vw, 26px);
  border-radius: 22px; border-color: var(--ftg-border); backdrop-filter: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@supports (color: color-mix(in srgb, red, blue)){
  .ftg-scope[data-ftg-theme="site"] .ftg-ledger:focus-within{ border-color: var(--ftg-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ftg-accent) 16%, transparent); }
}
.ftg-scope[data-ftg-theme="site"] .ftg-ledger-label{ font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.ftg-scope[data-ftg-theme="site"] .ftg-postmark{ font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ftg-scope.ftg-scope[data-ftg-theme="site"] textarea.ftg-input{
  font-family: var(--ftg-font-body) !important; font-size: clamp(18px, 2.4vw, 24px) !important; min-height: 72px !important;
  border-bottom-style: solid !important; border-color: var(--ftg-border) !important;
}
.ftg-scope.ftg-scope[data-ftg-theme="site"] .ftg-field{ font-size: 12px !important; font-weight: 600 !important; letter-spacing: .05em !important; }
.ftg-scope.ftg-scope[data-ftg-theme="site"] .ftg-rule{ border-style: solid !important; opacity: .5; }

/* buttons: sentence case, comfortable tap size */
.ftg-scope[data-ftg-theme="site"] .ftg-chip{ --b-tt: none; --b-ls: 0; --b-fs: 13px; --b-fw: 500; --b-pad: 8px 15px; }
.ftg-scope[data-ftg-theme="site"] .ftg-pill{ --b-fs: 13px; --b-pad: 6px 13px; }
.ftg-scope[data-ftg-theme="site"] .ftg-tab{ --b-fs: 14px; --b-fw: 500; --b-pad: 8px 16px; }
.ftg-scope[data-ftg-theme="site"] .ftg-seg-btn{ --b-tt: none; --b-ls: 0; --b-fs: 13px; --b-fw: 500; --b-pad: 7px 14px; }
.ftg-scope[data-ftg-theme="site"] .ftg-copy-btn{ --b-tt: none; --b-ls: 0; --b-fs: 14px; --b-fw: 600; --b-pad: 9px 20px; }
.ftg-scope[data-ftg-theme="site"] .ftg-btn-ghost{ --b-tt: none; --b-ls: 0; --b-fs: 13px; --b-fw: 500; --b-pad: 8px 14px; }
.ftg-scope[data-ftg-theme="site"] .ftg-ledger-label,
.ftg-scope[data-ftg-theme="site"] .ftg-quick-label{ font-size: 12px; }

/* catalog */
.ftg-scope[data-ftg-theme="site"] .ftg-catalog{ padding-top: 34px; }
.ftg-scope[data-ftg-theme="site"] .ftg-catalog-count{ font-size: 13px; }
.ftg-scope[data-ftg-theme="site"] .ftg-grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ftg-scope[data-ftg-theme="site"].ftg-view-list .ftg-grid{ grid-template-columns: 1fr; gap: 10px; }

.ftg-scope[data-ftg-theme="site"] .ftg-card{
  gap: 12px; padding: 18px 18px 16px; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ftg-scope[data-ftg-theme="site"] .ftg-card::before{ display: none; }
.ftg-scope[data-ftg-theme="site"] .ftg-card:hover{ transform: translateY(-3px); border-color: var(--ftg-accent); box-shadow: 0 14px 30px -16px rgba(0,0,0,.35); }
@supports (color: color-mix(in srgb, red, blue)){
  .ftg-scope[data-ftg-theme="site"] .ftg-card:hover{ box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--ftg-accent) 70%, transparent); }
}
.ftg-scope[data-ftg-theme="site"] .ftg-card-no{ display: none; }
.ftg-scope[data-ftg-theme="site"] .ftg-card-label{ margin-left: 0; margin-right: auto; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.ftg-scope[data-ftg-theme="site"] .ftg-card .ftg-rule{ display: none; }
.ftg-scope[data-ftg-theme="site"] .ftg-preview{ font-family: var(--ftg-font-body); font-size: var(--ftg-preview-size); line-height: 1.45; min-height: 56px; }
.ftg-scope[data-ftg-theme="site"] .ftg-card-foot{ justify-content: flex-start; padding-top: 2px; }
.ftg-scope[data-ftg-theme="site"] .ftg-card-foot .ftg-copy-btn{ margin-left: auto !important; }
.ftg-scope[data-ftg-theme="site"].ftg-view-list .ftg-card-top{ flex-basis: 150px; }
.ftg-scope[data-ftg-theme="site"] .ftg-empty-state{ border-radius: 20px; font-size: 14px; }

/* modal */
.ftg-scope[data-ftg-theme="site"] .ftg-modal{ border-radius: 22px; padding: clamp(16px, 3vw, 24px); }
.ftg-scope[data-ftg-theme="site"] .ftg-mock{ border-radius: 18px; }
.ftg-scope[data-ftg-theme="site"] .ftg-toast{ font-size: 13px; font-weight: 600; letter-spacing: 0; }

/* tablets and phones */
@media (max-width: 900px){
  .ftg-scope[data-ftg-theme="site"] .ftg-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .ftg-scope[data-ftg-theme="site"] .ftg-grid{ grid-template-columns: 1fr; gap: 12px; }
  .ftg-scope[data-ftg-theme="site"] .ftg-ledger{ border-radius: 18px; padding: 14px; }
  .ftg-scope[data-ftg-theme="site"] .ftg-actions{ gap: 8px; }
  .ftg-scope[data-ftg-theme="site"] .ftg-actions .ftg-chip{ flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; }
  .ftg-scope[data-ftg-theme="site"] .ftg-options{ gap: 10px; }
  .ftg-scope[data-ftg-theme="site"] .ftg-field{ flex: 1 1 calc(50% - 10px); }
  .ftg-scope[data-ftg-theme="site"] select.ftg-select{ max-width: 100%; }
  .ftg-scope[data-ftg-theme="site"] .ftg-catalog-head{ align-items: flex-start; }
  .ftg-scope[data-ftg-theme="site"] .ftg-tools{ width: 100%; justify-content: space-between; }
  .ftg-scope[data-ftg-theme="site"] .ftg-controls{ gap: 10px; }
  .ftg-scope[data-ftg-theme="site"] .ftg-search-wrap{ flex: 1 1 100%; max-width: none; }
  /* categories: one swipeable row instead of a tall wrapped block */
  .ftg-scope[data-ftg-theme="site"] .ftg-tabs{
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -2px; padding: 3px 2px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ftg-scope[data-ftg-theme="site"] .ftg-tabs::-webkit-scrollbar{ display: none; }
  .ftg-scope[data-ftg-theme="site"] .ftg-tabs .ftg-tab{ flex: none; }
  .ftg-scope[data-ftg-theme="site"] .ftg-card-foot .ftg-btn-ghost{ flex: 1 1 0; }
  .ftg-scope[data-ftg-theme="site"] .ftg-card-foot .ftg-copy-btn{ flex: 1 1 0; margin-left: 0 !important; }
  .ftg-scope[data-ftg-theme="site"].ftg-view-list .ftg-card-top{ flex-basis: 100%; }
}

/* ==========================================================================
   v2.4 "Studio" polish for "Match my website"
   - brand colour chain: WordPress theme.json -> Elementor global -> fallback
   - soft gradient glow, glass compose panel, gradient pill buttons
   - redesigned SEO guide: intro callout, jump links, bento cards, numbered
     steps, polished FAQ. Everything follows the site's text colour + font.
   ========================================================================== */
.ftg-scope[data-ftg-theme="site"]{
  --ftg-accent: var(--wp--preset--color--primary, var(--e-global-color-primary, #D3112F));
  --ftg-accent-2: var(--ftg-accent);
  --ftg-card-accent: var(--ftg-accent);
  --ftg-glow: rgba(37, 99, 235, .22);
}
@supports (color: color-mix(in srgb, red, blue)){
  .ftg-scope[data-ftg-theme="site"]{
    --ftg-accent-2: color-mix(in srgb, var(--ftg-accent) 72%, #FF4D6A);
    --ftg-glow: color-mix(in srgb, var(--ftg-accent) 28%, transparent);
    --ftg-surface: color-mix(in srgb, currentColor 5%, transparent);
    --ftg-surface-2: color-mix(in srgb, currentColor 9%, transparent);
    --ftg-border: color-mix(in srgb, currentColor 16%, transparent);
    --ftg-card-bg: color-mix(in srgb, currentColor 4%, transparent);
    --ftg-card-border: color-mix(in srgb, currentColor 14%, transparent);
  }
}

/* soft aurora glow behind the tool */
.ftg-wrap[data-ftg-theme="site"]{ position: relative; isolation: isolate; }
.ftg-wrap[data-ftg-theme="site"]::before{
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -40px 0 auto 0; height: 340px;
  background:
    radial-gradient(45% 70% at 12% 0%, var(--ftg-glow), transparent 70%),
    radial-gradient(40% 60% at 92% 10%, var(--ftg-glow), transparent 70%);
  opacity: .8;
}

/* hero: gradient on the key word-less title is avoided (site text colour kept); add accent bar */
.ftg-scope.ftg-scope[data-ftg-theme="site"] .ftg-hero{
  font-size: clamp(30px, 5vw, 52px) !important;
  letter-spacing: -.03em !important;
}
.ftg-scope[data-ftg-theme="site"] .ftg-lede::after{
  content: ""; display: block; width: 56px; height: 4px; margin-top: 16px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ftg-accent), var(--ftg-accent-2));
}

/* compose panel: glass */
.ftg-scope[data-ftg-theme="site"] .ftg-ledger{
  background: var(--ftg-surface);
  border: 1px solid var(--ftg-border);
  box-shadow: 0 18px 50px -26px var(--ftg-glow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ftg-scope.ftg-scope[data-ftg-theme="site"] textarea.ftg-input{
  background: var(--ftg-surface-2) !important;
  border: 1px solid var(--ftg-border) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  min-height: 96px !important;
  resize: vertical !important;
}
.ftg-scope.ftg-scope[data-ftg-theme="site"] textarea.ftg-input:focus{
  border-color: var(--ftg-accent) !important;
  box-shadow: 0 0 0 4px var(--ftg-glow) !important;
  outline: none !important;
}

/* gradient pills */
.ftg-scope[data-ftg-theme="site"] .ftg-copy-btn{ box-shadow: 0 8px 20px -10px var(--ftg-glow) !important; }
.ftg-scope[data-ftg-theme="site"] .ftg-tab.ftg-active,
.ftg-scope[data-ftg-theme="site"] .ftg-pill.ftg-active{ box-shadow: 0 8px 18px -10px var(--ftg-glow) !important; }
.ftg-scope[data-ftg-theme="site"] .ftg-chip:hover{ --b-bg: var(--ftg-surface-2); }

/* style cards: top accent hairline on hover */
.ftg-scope[data-ftg-theme="site"] .ftg-card{ overflow: hidden; }
.ftg-scope[data-ftg-theme="site"] .ftg-card::after{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ftg-accent), var(--ftg-accent-2));
  opacity: 0; transition: opacity .18s ease;
}
.ftg-scope[data-ftg-theme="site"] .ftg-card:hover::after{ opacity: 1; }

/* ==========================================================================
   SEO guide v2.4
   ========================================================================== */
.ftg-guide{
  --ftg-g-accent: var(--wp--preset--color--primary, var(--e-global-color-primary, #D3112F));
  --ftg-g-accent-2: var(--ftg-g-accent);
  --ftg-g-line: rgba(127,127,127,.28);
  --ftg-g-soft: rgba(127,127,127,.07);
  --ftg-g-glow: rgba(37,99,235,.2);
  margin: clamp(32px, 5vw, 64px) 0 0;
  color: inherit;
}
@supports (color: color-mix(in srgb, red, blue)){
  .ftg-guide{
    --ftg-g-accent-2: color-mix(in srgb, var(--ftg-g-accent) 72%, #FF4D6A);
    --ftg-g-line: color-mix(in srgb, currentColor 16%, transparent);
    --ftg-g-soft: color-mix(in srgb, currentColor 5%, transparent);
    --ftg-g-glow: color-mix(in srgb, var(--ftg-g-accent) 24%, transparent);
  }
}
.ftg-guide > .ftg-guide-title{
  margin: 0 0 .6em; letter-spacing: -.025em; line-height: 1.12;
  font-size: clamp(26px, 3.6vw, 40px);
}
.ftg-guide .ftg-guide-intro{
  position: relative; margin: 0 0 1.4rem; padding: clamp(16px, 2.6vw, 26px) clamp(16px, 2.6vw, 28px);
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7;
  background: var(--ftg-g-soft); border: 1px solid var(--ftg-g-line); border-radius: 22px;
  box-shadow: 0 18px 50px -30px var(--ftg-g-glow);
}
.ftg-guide .ftg-guide-intro::before{
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--ftg-g-accent), var(--ftg-g-accent-2));
}
.ftg-guide .ftg-guide-intro > :last-child{ margin-bottom: 0; }

/* jump links */
.ftg-guide .ftg-guide-toc{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.6rem; }
.ftg-guide .ftg-guide-toc-label{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-right: 4px; }
.ftg-guide .ftg-guide-toc a{
  display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 500; line-height: 1.3;
  color: inherit; text-decoration: none; border: 1px solid var(--ftg-g-line); border-radius: 999px; background: var(--ftg-g-soft);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.ftg-guide .ftg-guide-toc a:hover,
.ftg-guide .ftg-guide-toc a:focus-visible{ color: var(--ftg-g-accent); border-color: var(--ftg-g-accent); transform: translateY(-1px); outline: none; }

/* bento cards */
.ftg-guide .ftg-guide-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); counter-reset: ftgsec; }
.ftg-guide .ftg-guide-sec{
  position: relative; margin: 0; min-width: 0; scroll-margin-top: 90px;
  padding: clamp(18px, 2.4vw, 26px); counter-increment: ftgsec;
  background: var(--ftg-g-soft); border: 1px solid var(--ftg-g-line); border-radius: 22px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ftg-guide .ftg-guide-sec:hover{ border-color: var(--ftg-g-accent); transform: translateY(-2px); box-shadow: 0 18px 40px -26px var(--ftg-g-glow); }
.ftg-guide .ftg-guide-sec h3{
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 .7rem; font-size: clamp(18px, 2vw, 21px); line-height: 1.25; letter-spacing: -.01em;
}
.ftg-guide .ftg-guide-sec h3::before{
  content: counter(ftgsec); flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: -2px; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--ftg-g-accent), var(--ftg-g-accent-2));
  box-shadow: 0 8px 18px -8px var(--ftg-g-glow);
}
/* first section (what is it) and the how-to steps span the full width */
.ftg-guide .ftg-guide-sec:first-child,
.ftg-guide .ftg-guide-sec:nth-child(4){ grid-column: 1 / -1; }
.ftg-guide .ftg-guide-sec:last-child:nth-child(odd){ grid-column: 1 / -1; }
.ftg-guide .ftg-guide-sec p:last-child,
.ftg-guide .ftg-guide-sec ul:last-child,
.ftg-guide .ftg-guide-sec ol:last-child{ margin-bottom: 0; }
.ftg-guide .ftg-guide-sec ul{ list-style: none; padding-left: 0; }
.ftg-guide .ftg-guide-sec ul > li{ position: relative; padding-left: 1.5em; }
.ftg-guide .ftg-guide-sec ul > li::before{
  content: ""; position: absolute; left: .1em; top: .62em; width: .55em; height: .55em; border-radius: 50%;
  background: linear-gradient(135deg, var(--ftg-g-accent), var(--ftg-g-accent-2));
}
.ftg-guide .ftg-guide-sec ol{ list-style: none; padding-left: 0; counter-reset: ftgstep; }
.ftg-guide .ftg-guide-sec ol > li{ position: relative; counter-increment: ftgstep; padding: .1em 0 .1em 2.6em; margin: .7rem 0; min-height: 1.9em; }
.ftg-guide .ftg-guide-sec ol > li::before{
  content: counter(ftgstep); position: absolute; left: 0; top: 0; width: 1.9em; height: 1.9em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85em; font-weight: 700; line-height: 1;
  color: var(--ftg-g-accent); border: 2px solid var(--ftg-g-accent);
}
.ftg-guide a{ color: var(--ftg-g-accent); text-underline-offset: 3px; }

/* FAQ */
.ftg-guide .ftg-guide-faq{ margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: 90px; }
.ftg-guide .ftg-guide-faq .ftg-guide-title{ letter-spacing: -.02em; font-size: clamp(22px, 3vw, 32px); margin-bottom: 1rem; }
.ftg-guide details.ftg-faq{ background: var(--ftg-g-soft); border: 1px solid var(--ftg-g-line); border-radius: 16px; margin: 0 0 .7rem; transition: border-color .15s ease, box-shadow .15s ease; }
.ftg-guide details.ftg-faq[open]{ border-color: var(--ftg-g-accent); box-shadow: 0 14px 34px -26px var(--ftg-g-glow); }
.ftg-guide details.ftg-faq > summary{ padding: 1rem 1.2rem; font-size: 1.02em; }
.ftg-guide details.ftg-faq > summary::after{
  content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 1.2em; opacity: 1; color: var(--ftg-g-accent); background: var(--ftg-g-soft); border: 1px solid var(--ftg-g-line);
}
.ftg-guide details.ftg-faq[open] > summary::after{ content: "\2212"; color: #fff; background: var(--ftg-g-accent); border-color: transparent; }
.ftg-guide details.ftg-faq > summary:focus-visible{ outline: 2px solid var(--ftg-g-accent); outline-offset: 2px; border-radius: 16px; }
.ftg-guide .ftg-faq-a{ padding: 0 1.2rem .5rem; line-height: 1.7; }

@media (max-width: 782px){
  .ftg-guide .ftg-guide-grid{ grid-template-columns: minmax(0, 1fr); }
  .ftg-guide .ftg-guide-sec:first-child,
  .ftg-guide .ftg-guide-sec:nth-child(4){ grid-column: auto; }
  .ftg-guide .ftg-guide-toc{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ftg-guide .ftg-guide-toc::-webkit-scrollbar{ display: none; }
  .ftg-guide .ftg-guide-toc a, .ftg-guide .ftg-guide-toc-label{ flex: none; }
}
@media (prefers-reduced-motion: reduce){
  .ftg-guide *{ transition: none !important; }
}

/* ==========================================================================
   v2.4.2 Spacing before the footer
   Removes the dead space under the tool and its FAQ block, and the gap
   Elementor adds between stacked widgets. Inner spacing is untouched.
   ========================================================================== */
/* Every theme: the panel never leaves a margin under itself (the old 24px bottom margin was only removed for "Match my website") */
.ftg-wrap{ margin-bottom: 0; }
.ftg-wrap[data-ftg-theme="site"]{ margin-bottom: 0; padding-bottom: 0; }
.ftg-wrap .ftg-inner > :last-child,
.ftg-wrap .ftg-app > :last-child{ margin-bottom: 0 !important; padding-bottom: 0; }
.ftg-wrap .ftg-catalog{ padding-bottom: 0; }
.ftg-wrap .ftg-note:last-child{ margin-bottom: 0 !important; }
.ftg-wrap .ftg-grid:last-child{ margin-bottom: 0; }

.ftg-guide{ margin-bottom: 0; padding-bottom: 0; }
.ftg-guide > :last-child,
.ftg-guide .ftg-guide-faq > :last-child,
.ftg-guide details.ftg-faq:last-child,
.ftg-guide .ftg-guide-grid > :last-child{ margin-bottom: 0; }
.ftg-guide .ftg-faq-a{ padding-bottom: 1rem; }
.ftg-guide .ftg-faq-a > :last-child{ margin-bottom: 0; }

/* The guide is followed by a JSON-LD <script>, so it is never :last-child.
   Use :last-of-type / :has() so the rules below really match. */
.ftg-guide:last-of-type{ margin-bottom: 0; padding-bottom: 0; }
.ftg-guide > .ftg-guide-faq:last-child,
.ftg-guide > .ftg-guide-grid:last-child{ margin-bottom: 0; padding-bottom: 0; }

/* Elementor: no extra gap after the tool / guide widget, no empty widget padding.
   Covers the native widget AND the shortcode / text-editor widgets that hold [fancy_text_generator] or [fancy_text_guide]. */
.elementor-widget-fancy_text_generator,
.elementor-widget-fancy_text_generator:not(:last-child),
.elementor-widget:has(.ftg-wrap),
.elementor-widget:has(.ftg-guide),
.elementor-widget:has(.ftg-wrap):not(:last-child),
.elementor-widget:has(.ftg-guide):not(:last-child){
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
  --kit-widget-spacing: 0px;
  --widget-spacing: 0px;
}
.elementor-widget-fancy_text_generator > .elementor-widget-container,
.elementor-widget:has(.ftg-wrap) > .elementor-widget-container,
.elementor-widget:has(.ftg-guide) > .elementor-widget-container{ padding-bottom: 0; margin-bottom: 0; }
.elementor-shortcode:has(.ftg-wrap),
.elementor-shortcode:has(.ftg-guide),
.elementor-widget-text-editor:has(.ftg-guide) .elementor-widget-container{ margin-bottom: 0; padding-bottom: 0; }
/* wpautop leftovers after the shortcode output (empty <p>, stray <br>) */
.elementor-shortcode > p:empty,
.elementor-shortcode > br,
.elementor-widget-container > p:empty:last-child,
.wp-block-shortcode > p:empty,
.wp-block-shortcode > br{ display: none; margin: 0; padding: 0; }
.ftg-guide + p:empty,
.ftg-guide + br,
.ftg-guide + script + p:empty,
.ftg-guide + script + br,
.ftg-wrap + p:empty,
.ftg-wrap + br{ display: none; }

/* Classic editor / block themes: trailing paragraph margin after the shortcode output */
.entry-content > .ftg-guide:last-of-type,
.entry-content > .ftg-wrap:last-child,
.wp-block-shortcode:has(.ftg-guide),
.wp-block-shortcode:has(.ftg-wrap){ margin-bottom: 0; }

@media (pointer:coarse),(max-width:900px){.ftg-scope.ftg-scope button.ftg-fav.ftg-fav{min-width:44px!important;min-height:44px!important}}