/* ==========================================================================

  EZTagGenerator — YouTube Hashtag Generator Luxury Design
  (Matches the Instagram Hashtag Generator design exactly)

  Palette: Luxury White #FFFFFF, Warm Off-White #FAF9F6, Emerald Green #0F7A5C, Gold #C6A15B
  Headings: #14201C | Body: #3D4A44

  3-ROLE FONT SYSTEM:
  1. Main headings ONLY: 'Times New Roman', Times, serif (Bold 700)
  2. Sub-headings, card titles, buttons, chips, badges: 'Montserrat', sans-serif (Bold 700 / Semibold 600)
  3. Body & descriptions: 'Cabin', sans-serif (Regular 400, line-height 1.65)

========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
  --eztg-white: #FFFFFF;
  --eztg-offwhite: #FAF9F6;
  --eztg-border: #E8E6DF;
  --eztg-border-subtle: #F0EEE9;
  --eztg-emerald: #0F7A5C;
  --eztg-emerald-hover: #0C6650;
  --eztg-emerald-dark: #0B3D2E;
  --eztg-emerald-light: rgba(15, 122, 92, 0.08);
  --eztg-emerald-glow: rgba(15, 122, 92, 0.2);
  --eztg-gold: #C6A15B;
  --eztg-gold-subtle: rgba(198, 161, 91, 0.12);
  --eztg-gold-border: rgba(198, 161, 91, 0.35);
  --eztg-gold-text: #8A651E;
  --eztg-text-heading: #14201C;
  --eztg-text-body: #3D4A44;
  --eztg-text-muted: #6B7A72;
  --eztg-font-display: 'Times New Roman', Times, serif;
  --eztg-font-subheading: 'Montserrat', sans-serif;
  --eztg-font-body: 'Cabin', sans-serif;
  --eztg-lh-h1: 1.15;
  --eztg-lh-h2: 1.24;
  --eztg-lh-subheading: 1.28;
  --eztg-lh-body: 1.65;
  --eztg-radius-card: 18px;
  --eztg-radius-btn: 12px;
  --eztg-radius-pill: 999px;
  --eztg-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06);
  --eztg-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.09);
  --eztg-container-max: 1120px;
}

/* Base Wrapper & Resets */
.eztg-wrapper { background-color: var(--eztg-white); color: var(--eztg-text-body); font-family: var(--eztg-font-body); font-size: 1.0625rem; font-weight: 400; line-height: var(--eztg-lh-body); margin: 0; padding: 0; overflow-x: hidden; width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.eztg-wrapper *, .eztg-wrapper *::before, .eztg-wrapper *::after { box-sizing: border-box; }

/* Paragraphs & Descriptions */
.eztg-wrapper p, .eztg-hero-subtitle, .eztg-section-subtitle, .eztg-step-desc, .eztg-formula-intro, .eztg-formula-desc, .eztg-reels-text, .eztg-tip-desc, .eztg-faq-answer-inner, .eztg-cta-desc { font-family: var(--eztg-font-body); font-weight: 400; line-height: var(--eztg-lh-body); }

/* ROLE 1: MAIN HEADINGS ONLY ('Times New Roman' — Bold 700) */
.eztg-hero-title, .eztg-section-h2, .eztg-cta-title { font-family: var(--eztg-font-display); font-weight: 700; color: var(--eztg-text-heading); letter-spacing: -0.015em; }

/* ROLE 2: SUB-HEADINGS & CARD TITLES ('Montserrat' — Bold 700) */
.eztg-results-title, .eztg-step-title, .eztg-formula-title, .eztg-cat-title, .eztg-tip-title, .eztg-faq-question, .eztg-step-num, .eztg-reels-label { font-family: var(--eztg-font-subheading); font-weight: 700; color: var(--eztg-text-heading); line-height: var(--eztg-lh-subheading); letter-spacing: -0.01em; }

/* Container */
.eztg-container { max-width: var(--eztg-container-max); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; width: 100%; }

/* HERO & TOOL SECTION */
.eztg-hero-section { background-color: var(--eztg-white); position: relative; padding-top: 64px; padding-bottom: 72px; border-bottom: 1px solid var(--eztg-border); }
.eztg-hero-content { text-align: center; position: relative; }

/* Badge */
.eztg-badge-wrap { margin-bottom: 22px; }
.eztg-badge { display: inline-flex; align-items: center; gap: 8px; background-color: var(--eztg-offwhite); border: 1px solid var(--eztg-gold-border); color: var(--eztg-gold-text); font-family: var(--eztg-font-subheading); font-size: 0.8125rem; font-weight: 600; padding: 7px 18px; border-radius: var(--eztg-radius-pill); letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(198, 161, 91, 0.08); }
.eztg-badge-dot { width: 7px; height: 7px; background-color: var(--eztg-gold); border-radius: 50%; display: inline-block; flex-shrink: 0; }
.eztg-hero-title { font-size: clamp(2.25rem, 5vw, 3.4rem); line-height: var(--eztg-lh-h1); margin: 0 auto 16px; max-width: 860px; }
.eztg-hero-subtitle { font-size: 1.125rem; color: var(--eztg-text-muted); max-width: 680px; margin: 0 auto 38px; line-height: var(--eztg-lh-body); }

/* Generator Card (Luxury White Card) */
.eztg-tool-card { background-color: var(--eztg-white); border: 1px solid var(--eztg-border); border-radius: var(--eztg-radius-card); padding: 32px; max-width: 860px; margin: 0 auto; box-shadow: var(--eztg-shadow-card); text-align: left; }

/* Search Form Input Group */
.eztg-input-group { display: flex; gap: 12px; align-items: stretch; }
.eztg-input-wrapper { position: relative; flex: 1; }
.eztg-input { width: 100%; min-height: 52px; height: 54px; background-color: var(--eztg-offwhite); border: 1px solid var(--eztg-border); border-radius: var(--eztg-radius-btn); padding: 0 20px; font-size: 1.0625rem; color: var(--eztg-text-heading); font-family: var(--eztg-font-subheading); font-weight: 500; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.eztg-input::placeholder { color: var(--eztg-text-muted); opacity: 0.85; font-family: var(--eztg-font-body); }
.eztg-input:focus { outline: none; background-color: var(--eztg-white); border-color: var(--eztg-emerald); box-shadow: 0 0 0 3px var(--eztg-emerald-glow); }

/* Buttons */
.eztg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; height: auto; padding: 14px 28px; border-radius: var(--eztg-radius-btn); font-size: 0.9375rem; font-weight: 600; font-family: var(--eztg-font-subheading); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; text-decoration: none; border: 1px solid transparent; letter-spacing: 0.01em; }
.eztg-btn-primary { background-color: var(--eztg-emerald); border-color: var(--eztg-emerald); color: var(--eztg-white); box-shadow: 0 4px 14px rgba(15, 122, 92, 0.2); }
.eztg-btn-primary:hover:not(:disabled) { background-color: var(--eztg-emerald-hover); border-color: var(--eztg-emerald-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 122, 92, 0.28); }
.eztg-btn-secondary { background-color: var(--eztg-offwhite); border: 1px solid var(--eztg-border); color: var(--eztg-text-heading); }
.eztg-btn-secondary:hover:not(:disabled) { border-color: var(--eztg-emerald); color: var(--eztg-emerald); background-color: var(--eztg-emerald-light); transform: translateY(-1px); }
.eztg-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.eztg-btn-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--eztg-white); border-radius: 50%; animation: eztg-spin 0.75s linear infinite; display: none; flex-shrink: 0; }
@keyframes eztg-spin { to { transform: rotate(360deg); } }
.eztg-btn.eztg-loading .eztg-btn-spinner { display: inline-block; }

/* QUICK TOPIC SUGGESTION PILLS — SIMPLE WRAPPING ROW (STRICTLY NO SLIDERS) */
.eztg-quick-topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; overflow: visible; }
.eztg-quick-label { font-family: var(--eztg-font-subheading); font-size: 0.8125rem; color: var(--eztg-text-muted); font-weight: 600; margin-right: 4px; }
.eztg-quick-pill { background-color: var(--eztg-offwhite); border: 1px solid var(--eztg-border); color: var(--eztg-text-heading); font-size: 0.8125rem; font-weight: 600; font-family: var(--eztg-font-subheading); padding: 6px 14px; min-height: 36px; border-radius: var(--eztg-radius-pill); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; display: inline-flex; align-items: center; }
.eztg-quick-pill:hover { border-color: var(--eztg-emerald); color: var(--eztg-emerald); background-color: var(--eztg-emerald-light); transform: translateY(-1px); }

/* Error Message Box */
.eztg-error-msg { display: none; background-color: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C; padding: 12px 18px; border-radius: 10px; font-size: 0.9375rem; margin-top: 18px; font-family: var(--eztg-font-body); }

/* RESULTS AREA (APPEARS IN PLACE — NO SLIDING ANIMATION) */
.eztg-results-wrapper { display: none; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--eztg-border); }
.eztg-results-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.eztg-results-title-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eztg-results-title { font-size: 1.25rem; margin: 0; }

/* Spam Filter Note */
.eztg-filter-note { font-family: var(--eztg-font-subheading); font-size: 0.75rem; color: var(--eztg-emerald); background-color: var(--eztg-emerald-light); border: 1px solid rgba(15, 122, 92, 0.25); padding: 4px 12px; border-radius: var(--eztg-radius-pill); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: 0.01em; }
.eztg-selected-count { font-family: var(--eztg-font-subheading); font-size: 0.875rem; color: var(--eztg-text-muted); font-weight: 600; }
.eztg-selected-count span { color: var(--eztg-emerald); font-weight: 700; }

/* Results Actions Bar */
.eztg-results-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.eztg-btn-sm { min-height: 44px; height: auto; padding: 10px 20px; font-size: 0.8125rem; border-radius: 10px; }

/* Hashtag Chips Grid */
.eztg-chips-grid { display: flex; flex-wrap: wrap; gap: 10px; }

/* Chip Styling */
.eztg-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--eztg-radius-pill); padding: 9px 15px; font-size: 0.875rem; font-weight: 600; font-family: var(--eztg-font-subheading); cursor: pointer; user-select: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; background-color: var(--eztg-offwhite); border: 1px solid var(--eztg-border); color: var(--eztg-text-heading); line-height: 1.25; min-height: 44px; }
.eztg-chip:hover { border-color: var(--eztg-emerald); color: var(--eztg-emerald); transform: translateY(-1px); }
.eztg-chip.eztg-selected { background-color: var(--eztg-emerald); border-color: var(--eztg-emerald); color: var(--eztg-white); box-shadow: 0 3px 10px rgba(15, 122, 92, 0.25); }
.eztg-chip-tag { pointer-events: none; }
.eztg-chip-copy-btn { background: transparent; border: none; padding: 0; margin-left: 2px; color: inherit; opacity: 0.75; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; transition: opacity 0.2s ease, transform 0.2s ease; }
.eztg-chip-copy-btn:hover { opacity: 1; transform: scale(1.15); }

/* Subtle Source Indicator Under Results */
.eztg-results-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--eztg-border-subtle); display: flex; justify-content: flex-end; align-items: center; }
.eztg-source-note { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-family: var(--eztg-font-subheading); font-size: 0.75rem; color: var(--eztg-text-muted); font-weight: 500; line-height: 1; }
.eztg-source-dot { width: 9px !important; height: 9px !important; min-width: 9px !important; min-height: 9px !important; display: inline-block !important; flex-shrink: 0 !important; vertical-align: middle !important; color: var(--eztg-emerald); fill: var(--eztg-emerald); transition: color 0.2s ease, fill 0.2s ease; }
.eztg-source-note strong { font-weight: 700; color: var(--eztg-emerald); transition: color 0.2s ease; }

/* Fallback tags: Gold dot + Gold text */
.eztg-source-note.eztg-source-fallback .eztg-source-dot { color: #C6A15B !important; fill: #C6A15B !important; }
.eztg-source-note.eztg-source-fallback strong, .eztg-source-note.eztg-source-fallback #eztg-source-label { color: #C6A15B !important; }

/* AI-generated: Emerald dot + Emerald text */
.eztg-source-note.eztg-source-ai .eztg-source-dot { color: #0F7A5C !important; fill: #0F7A5C !important; }
.eztg-source-note.eztg-source-ai strong, .eztg-source-note.eztg-source-ai #eztg-source-label { color: #0F7A5C !important; }

/* CONTENT SECTIONS (ALTERNATING WHITE / WARM OFF-WHITE) */
.eztg-light-section { padding-top: 76px; padding-bottom: 76px; border-bottom: 1px solid var(--eztg-border); }
#eztg-how-to-use, #eztg-categories, #eztg-best-practices { background-color: var(--eztg-offwhite); }
#eztg-formula, #eztg-reels, #eztg-foryou, #eztg-faq { background-color: var(--eztg-white); }
.eztg-section-header { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.eztg-section-h2 { font-size: clamp(1.85rem, 3.5vw, 2.35rem); line-height: var(--eztg-lh-h2); margin-top: 0; margin-bottom: 14px; }
.eztg-section-subtitle { font-size: 1.0625rem; color: var(--eztg-text-muted); margin: 0; line-height: var(--eztg-lh-body); }

/* 3-Step Guide Grid */
.eztg-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eztg-step-card { background: var(--eztg-white); border: 1px solid var(--eztg-border); border-radius: var(--eztg-radius-card); padding: 30px 28px; box-shadow: var(--eztg-shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; }
.eztg-step-card:hover { transform: translateY(-3px); box-shadow: var(--eztg-shadow-hover); }
.eztg-step-num { width: 44px; height: 44px; border-radius: 12px; background-color: var(--eztg-emerald-light); color: var(--eztg-emerald); font-size: 1.125rem; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid rgba(15, 122, 92, 0.2); }
.eztg-step-title { font-size: 1.1875rem; margin: 0 0 10px; }
.eztg-step-desc { font-size: 0.984375rem; color: var(--eztg-text-body); margin: 0; line-height: var(--eztg-lh-body); }

/* Formula & Mix Section */
.eztg-formula-card { background: var(--eztg-white); border: 1px solid var(--eztg-border); border-radius: var(--eztg-radius-card); padding: 34px; box-shadow: var(--eztg-shadow-card); }
.eztg-formula-intro { margin-top: 0; margin-bottom: 20px; font-size: 1.0625rem; color: var(--eztg-text-body); }
.eztg-formula-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.eztg-formula-item { background-color: var(--eztg-offwhite); border: 1px solid var(--eztg-border); border-radius: 14px; padding: 22px 18px; transition: transform 0.2s ease, border-color 0.2s ease; }
.eztg-formula-item:hover { border-color: var(--eztg-emerald); transform: translateY(-2px); }
.eztg-formula-badge { display: inline-block; background-color: var(--eztg-emerald); color: var(--eztg-white); font-family: var(--eztg-font-subheading); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.eztg-formula-title { font-size: 1.0625rem; margin: 0 0 6px; }
.eztg-formula-range { font-family: var(--eztg-font-subheading); font-size: 0.8125rem; color: var(--eztg-emerald); font-weight: 600; margin-bottom: 8px; letter-spacing: 0.01em; }
.eztg-formula-desc { font-size: 0.875rem; color: var(--eztg-text-body); margin: 0; line-height: 1.55; }

/* Category Grid */
.eztg-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eztg-cat-card { background: var(--eztg-white); border: 1px solid var(--eztg-border); border-radius: var(--eztg-radius-card); padding: 28px; box-shadow: var(--eztg-shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.eztg-cat-card:hover { transform: translateY(-3px); box-shadow: var(--eztg-shadow-hover); }
.eztg-cat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.eztg-cat-title { font-size: 1.1875rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.eztg-cat-title svg { stroke: var(--eztg-emerald) !important; }
.eztg-cat-copy-all { background: var(--eztg-offwhite); border: 1px solid var(--eztg-border); color: var(--eztg-emerald); font-family: var(--eztg-font-subheading); font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; min-height: 34px; display: inline-flex; align-items: center; letter-spacing: 0.01em; }
.eztg-cat-copy-all:hover { background-color: var(--eztg-emerald); border-color: var(--eztg-emerald); color: var(--eztg-white); }
.eztg-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eztg-cat-chip, .eztg-foryou-chip { background-color: var(--eztg-offwhite); border: 1px solid var(--eztg-border); color: var(--eztg-text-heading); font-family: var(--eztg-font-subheading); font-size: 0.75rem; font-weight: 600; padding: 6px 12px; border-radius: var(--eztg-radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; transition: all 0.2s ease; }
.eztg-cat-chip:hover, .eztg-foryou-chip:hover { background-color: var(--eztg-emerald); border-color: var(--eztg-emerald); color: var(--eztg-white); transform: translateY(-1px); }

/* Reels / For You Section Card */
.eztg-reels-card { background: var(--eztg-white); border: 1px solid var(--eztg-border); border-radius: var(--eztg-radius-card); padding: 34px; box-shadow: var(--eztg-shadow-card); }
.eztg-reels-text { font-size: 1.0625rem; color: var(--eztg-text-body); margin-bottom: 24px; line-height: var(--eztg-lh-body); }
.eztg-reels-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.eztg-reels-label { font-size: 0.9375rem; font-weight: 700; color: var(--eztg-text-heading); }

/* Best Practices Grid */
.eztg-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eztg-tip-card { background: var(--eztg-white); border: 1px solid var(--eztg-border); border-radius: var(--eztg-radius-card); padding: 28px; box-shadow: var(--eztg-shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.eztg-tip-card:hover { transform: translateY(-3px); box-shadow: var(--eztg-shadow-hover); }
.eztg-tip-icon { width: 44px; height: 44px; border-radius: 12px; background-color: var(--eztg-emerald-light); color: var(--eztg-emerald); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; border: 1px solid rgba(15, 122, 92, 0.2); font-family: var(--eztg-font-subheading); font-weight: 700; font-size: 1.125rem; }
.eztg-tip-title { font-size: 1.125rem; margin: 0 0 10px; }
.eztg-tip-desc { font-size: 0.9375rem; color: var(--eztg-text-body); margin: 0; line-height: var(--eztg-lh-body); }

/* FAQ ACCORDION */
.eztg-faq-container { max-width: 820px; margin: 0 auto; }
.eztg-faq-item { background: var(--eztg-white); border: 1px solid var(--eztg-border); border-radius: 14px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.eztg-faq-item.eztg-open { border-color: var(--eztg-emerald); box-shadow: 0 6px 20px rgba(15, 122, 92, 0.08); }
.eztg-faq-trigger { width: 100%; padding: 22px 26px; min-height: 52px; text-align: left; background: none; border: none; outline: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background-color 0.15s ease; }
.eztg-faq-trigger:hover { background-color: var(--eztg-offwhite); }
.eztg-faq-question { font-size: 1.0625rem; margin: 0; }

/* Gold chevron accent */
.eztg-faq-chevron { width: 22px; height: 22px; color: var(--eztg-gold); flex-shrink: 0; transition: transform 0.25s ease, color 0.2s ease; }
.eztg-faq-item.eztg-open .eztg-faq-chevron { transform: rotate(180deg); color: var(--eztg-emerald); }
.eztg-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding: 0 26px; }
.eztg-faq-answer-inner { padding-bottom: 22px; color: var(--eztg-text-body); font-size: 1rem; line-height: var(--eztg-lh-body); border-top: 1px solid var(--eztg-border-subtle); padding-top: 14px; }

/* CTA BAND */
.eztg-cta-band { background: linear-gradient(135deg, #0B3D2E 0%, #0F7A5C 100%); color: var(--eztg-white); padding: 72px 24px; text-align: center; position: relative; overflow: hidden; }
.eztg-cta-gold-accent { width: 48px; height: 3px; background-color: var(--eztg-gold); border-radius: 2px; margin: 0 auto 20px; }
.eztg-cta-title { font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: var(--eztg-lh-h1); color: var(--eztg-white) !important; margin: 0 auto 16px; max-width: 720px; }
.eztg-cta-desc { font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); max-width: 620px; margin: 0 auto 34px; line-height: var(--eztg-lh-body); }
.eztg-btn-white { background-color: var(--eztg-white); border: 1px solid var(--eztg-white); color: var(--eztg-emerald-dark); font-weight: 600; border-radius: var(--eztg-radius-btn); padding: 14px 28px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.eztg-btn-white:hover { background-color: var(--eztg-offwhite); color: #05261C; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }

/* TOAST FEEDBACK NOTIFICATION */
.eztg-toast { position: fixed; bottom: 24px; right: 24px; background-color: #14201C; border: 1px solid rgba(198, 161, 91, 0.35); color: var(--eztg-white); padding: 14px 22px; border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25); font-family: var(--eztg-font-subheading); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 10px; z-index: 999999; transform: translateY(30px); opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; }
.eztg-toast.eztg-toast-visible { transform: translateY(0); opacity: 1; }
.eztg-toast-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #34D399; }

/* RESPONSIVE DESIGN (390PX MOBILE AUDIT & BREAKPOINTS) */
@media (max-width: 1024px) {
  .eztg-formula-grid { grid-template-columns: repeat(2, 1fr); }
  .eztg-cat-grid, .eztg-tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .eztg-hero-section { padding-top: 48px; padding-bottom: 52px; }
  .eztg-light-section { padding-top: 52px; padding-bottom: 52px; }
  .eztg-tool-card { padding: 22px; }
  .eztg-input-group { flex-direction: column; align-items: stretch; gap: 12px; }
  .eztg-input { min-height: 48px; height: 52px; font-size: 1rem; }
  .eztg-btn { width: 100%; min-height: 48px; }
  .eztg-steps-grid, .eztg-formula-grid, .eztg-cat-grid, .eztg-tips-grid { grid-template-columns: 1fr; gap: 18px; }
  .eztg-results-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .eztg-results-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .eztg-results-actions .eztg-btn { width: 100%; }
  .eztg-section-h2 { font-size: 1.6rem; }
  .eztg-faq-trigger { padding: 18px 20px; }
  .eztg-faq-question { font-size: 1.0625rem; }
  .eztg-faq-answer { padding: 0 20px; }
  .eztg-toast { left: 20px; right: 20px; bottom: 20px; justify-content: center; }
}
@media (max-width: 390px) {
  .eztg-container { padding-left: 16px; padding-right: 16px; }
  .eztg-badge { font-size: 0.75rem; padding: 6px 14px; }
  .eztg-hero-title { font-size: 1.95rem; }
  .eztg-hero-subtitle { font-size: 1rem; margin-bottom: 28px; }
  .eztg-tool-card { padding: 16px; border-radius: 14px; }
  .eztg-chip { padding: 8px 12px; font-size: 0.8125rem; min-height: 44px; word-break: break-word; }
  .eztg-cat-card, .eztg-reels-card, .eztg-formula-card, .eztg-step-card, .eztg-tip-card { padding: 20px 16px; }
}