/* ── Font Generator & Pairing Tool — Equalza ── */

/* ── Tool wrapper ── */
.fg-tool{background:var(--surface,#fff);border:1px solid var(--border,#e2e5ea);border-radius:var(--rxl,16px);padding:24px 28px 32px;box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05)}

/* ── Tabs ── */
.fg-tabs{display:flex;gap:4px;border-bottom:2px solid var(--border,#e2e5ea);padding-bottom:0;margin-bottom:24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fg-tab{padding:10px 18px;font-size:.9rem;font-weight:600;border:none;background:none;color:var(--text-muted,#6b7280);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:color .2s,border-color .2s}
.fg-tab:hover{color:var(--text,#1a1a2e)}
.fg-tab-active{color:var(--primary,#6C3CE1) !important;border-bottom-color:var(--primary,#6C3CE1) !important}

/* ── Panes ── */
.fg-pane{display:none}
.fg-pane-active{display:block}

/* ── Search & Filters ── */
.fg-search-bar{position:relative;margin-bottom:16px}
.fg-search-input{width:100%;padding:10px 16px 10px 40px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rmd,10px);font-size:.95rem;background:var(--surface,#fff);transition:border-color .2s}
.fg-search-input:focus{outline:none;border-color:var(--primary,#6C3CE1);box-shadow:0 0 0 3px rgba(108,60,225,.12)}
.fg-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted,#6b7280);pointer-events:none;font-size:1.1rem}

.fg-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.fg-filter-group{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.fg-filter-label{font-size:.8rem;font-weight:600;color:var(--text-muted,#6b7280);margin-right:4px}

/* ── A-Z buttons ── */
.fg-az-wrap{display:flex;flex-wrap:wrap;gap:2px}
.fg-az-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,6px);background:var(--surface,#fff);font-size:.75rem;font-weight:600;cursor:pointer;color:var(--text,#1a1a2e);transition:all .15s}
.fg-az-btn:hover{background:var(--bg-hover,#f3f4f6)}
.fg-az-btn.active{background:var(--primary,#6C3CE1) !important;color:#fff !important;border-color:var(--primary,#6C3CE1) !important}

/* ── Category pills ── */
.fg-cat-pill{padding:5px 14px;border:1px solid var(--border,#e2e5ea);border-radius:999px;background:var(--surface,#fff);font-size:.82rem;font-weight:500;cursor:pointer;color:var(--text,#1a1a2e);transition:all .15s}
.fg-cat-pill:hover{background:var(--bg-hover,#f3f4f6)}
.fg-cat-pill.active{background:var(--primary,#6C3CE1) !important;color:#fff !important;border-color:var(--primary,#6C3CE1) !important}

/* ── Dropdown selects ── */
.fg-select{padding:6px 12px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,6px);font-size:.85rem;background:var(--surface,#fff);color:var(--text,#1a1a2e);cursor:pointer}
.fg-select:focus{outline:none;border-color:var(--primary,#6C3CE1)}

/* ── Toggle switch ── */
.fg-toggle{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.85rem;color:var(--text,#1a1a2e)}
.fg-toggle input{position:absolute;opacity:0;width:0;height:0}
.fg-toggle-track{width:36px;height:20px;background:var(--border,#d1d5db);border-radius:999px;position:relative;transition:background .2s}
.fg-toggle input:checked+.fg-toggle-track{background:var(--primary,#6C3CE1) !important}
.fg-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.fg-toggle input:checked+.fg-toggle-track .fg-toggle-thumb{transform:translateX(16px)}

/* ── Font cards grid ── */
.fg-grid-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.82rem;color:var(--text-muted,#6b7280)}
.fg-grid-container{position:relative;overflow-y:auto;max-height:600px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rmd,10px)}
.fg-grid-inner{position:relative}
.fg-card{position:absolute;left:0;right:0;padding:16px 20px;border-bottom:1px solid var(--border-light,#f0f1f3);cursor:pointer;transition:background .15s}
.fg-card:hover{background:var(--bg-hover,#f8f9fa)}
.fg-card.selected{background:rgba(108,60,225,.06);border-left:3px solid var(--primary,#6C3CE1)}
.fg-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fg-card-name{font-size:.85rem;font-weight:600;color:var(--text,#1a1a2e)}
.fg-card-meta{display:flex;gap:6px;align-items:center}
.fg-card-badge{font-size:.7rem;padding:2px 8px;border-radius:999px;background:var(--bg-hover,#f3f4f6);color:var(--text-muted,#6b7280)}
.fg-card-preview{font-size:1.5rem;line-height:1.4;color:var(--text,#1a1a2e);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-height:2rem}
.fg-card-actions{display:flex;gap:6px;margin-top:8px}

/* ── Buttons (Equalza design system) ── */
.fg-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:var(--rsm,8px);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}
.fg-btn-primary{background:linear-gradient(135deg,var(--primary,#6C3CE1),var(--primary-dark,#5429C0)) !important;color:#fff !important;box-shadow:0 2px 8px rgba(108,60,225,.25)}
.fg-btn-primary:hover{box-shadow:0 4px 14px rgba(108,60,225,.35) !important;transform:translateY(-1px)}
.fg-btn-ghost{background:transparent !important;border:1px solid var(--border,#e2e5ea) !important;color:var(--text,#1a1a2e) !important}
.fg-btn-ghost:hover{background:var(--bg-hover,#f3f4f6) !important}
.fg-btn-sm{padding:5px 12px;font-size:.78rem}
.fg-btn-icon{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,6px);background:var(--surface,#fff);cursor:pointer;font-size:.9rem}

/* ── Pairing panel ── */
.fg-pairing-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.fg-pair-slot{border:1px solid var(--border,#e2e5ea);border-radius:var(--rmd,10px);padding:16px;background:var(--surface,#fff)}
.fg-pair-slot-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted,#6b7280);margin-bottom:8px}
.fg-pair-font-name{font-size:1.1rem;font-weight:600;color:var(--text,#1a1a2e);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.fg-pair-picker{margin-bottom:12px}
.fg-pair-picker-input{width:100%;padding:8px 12px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,6px);font-size:.85rem}
.fg-pair-picker-input:focus{outline:none;border-color:var(--primary,#6C3CE1)}
.fg-pair-dropdown{position:absolute;z-index:100;width:100%;max-height:240px;overflow-y:auto;background:var(--surface,#fff);border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,6px);box-shadow:0 8px 24px rgba(0,0,0,.12);display:none}
.fg-pair-dropdown.open{display:block}
.fg-pair-dropdown-item{padding:8px 12px;cursor:pointer;font-size:.85rem;transition:background .1s}
.fg-pair-dropdown-item:hover{background:var(--bg-hover,#f3f4f6)}
.fg-pair-preview{font-size:1.4rem;line-height:1.5;padding:12px 0;border-top:1px solid var(--border-light,#f0f1f3);margin-top:8px;min-height:3rem}

/* ── Controls ── */
.fg-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.fg-control{display:flex;flex-direction:column;gap:4px}
.fg-control-label{font-size:.78rem;font-weight:600;color:var(--text-muted,#6b7280);display:flex;justify-content:space-between;align-items:center}
.fg-control-value{font-size:.78rem;color:var(--primary,#6C3CE1);font-weight:600}
.fg-control input[type="range"]{width:100%;accent-color:var(--primary,#6C3CE1)}
.fg-control input[type="color"]{width:40px;height:28px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,4px);cursor:pointer;padding:0}

/* ── Suggestions ── */
.fg-suggestions{margin-bottom:24px}
.fg-suggestions-title{font-size:.9rem;font-weight:600;color:var(--text,#1a1a2e);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.fg-suggestions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.fg-suggestion-card{padding:10px 14px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,8px);cursor:pointer;transition:all .15s}
.fg-suggestion-card:hover{border-color:var(--primary,#6C3CE1);background:rgba(108,60,225,.04)}
.fg-suggestion-name{font-size:.82rem;font-weight:600;color:var(--text,#1a1a2e);margin-bottom:4px}
.fg-suggestion-preview{font-size:1rem;line-height:1.3;color:var(--text-muted,#6b7280);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fg-suggestion-tags{display:flex;gap:4px;margin-top:4px}
.fg-suggestion-tag{font-size:.65rem;padding:1px 6px;border-radius:999px;background:var(--bg-hover,#f3f4f6);color:var(--text-muted,#6b7280)}

/* ── Bilingual toggle ── */
.fg-bilingual{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,8px);margin-bottom:16px;background:var(--bg-hover,#f8f9fa)}

/* ── Mockups ── */
.fg-mockup-controls{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.fg-mockup-wrap{border:1px solid var(--border,#e2e5ea);border-radius:var(--rmd,10px);overflow:hidden;margin-bottom:20px}
.fg-mockup{padding:32px;transition:background .3s,color .3s}
.fg-mockup.dark{background:#1a1a2e;color:#f0f1f3}

.fg-mockup-hero{text-align:center;padding:48px 32px}
.fg-mockup-hero .fg-m-heading{font-size:2.4rem;font-weight:700;margin-bottom:12px;line-height:1.2}
.fg-mockup-hero .fg-m-subtitle{font-size:1.2rem;opacity:.7;margin-bottom:16px}
.fg-mockup-hero .fg-m-body{font-size:1rem;line-height:1.7;max-width:540px;margin:0 auto 24px;opacity:.85}
.fg-mockup-hero .fg-m-btn{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,var(--primary,#6C3CE1),var(--primary-dark,#5429C0));color:#fff;border-radius:var(--rsm,8px);font-weight:600;text-decoration:none}

.fg-mockup-blog{max-width:600px;padding:32px}
.fg-mockup-blog .fg-m-heading{font-size:1.8rem;font-weight:700;margin-bottom:8px;line-height:1.3}
.fg-mockup-blog .fg-m-meta{font-size:.82rem;opacity:.5;margin-bottom:20px}
.fg-mockup-blog .fg-m-body{font-size:1rem;line-height:1.8;margin-bottom:16px}
.fg-mockup-blog .fg-m-quote{border-left:3px solid var(--primary,#6C3CE1);padding:12px 16px;font-style:italic;opacity:.8;margin:16px 0}

.fg-mockup-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px}
.fg-mockup-card{border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,8px);padding:20px}
.fg-mockup.dark .fg-mockup-card{border-color:rgba(255,255,255,.12)}
.fg-mockup-card .fg-m-heading{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.fg-mockup-card .fg-m-body{font-size:.9rem;line-height:1.6;opacity:.75}

/* ── Export ── */
.fg-export-section{margin-bottom:24px}
.fg-export-title{font-size:.9rem;font-weight:600;color:var(--text,#1a1a2e);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.fg-export-code{position:relative;background:var(--bg-code,#1e1e2e);color:#e0e0e0;padding:16px 20px;border-radius:var(--rsm,8px);font-family:'JetBrains Mono',monospace;font-size:.82rem;line-height:1.6;overflow-x:auto;white-space:pre;max-height:200px}
.fg-export-copy{position:absolute;top:8px;right:8px}
.fg-export-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

.fg-share-url{display:flex;gap:8px;align-items:center;margin-top:12px}
.fg-share-input{flex:1;padding:8px 12px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,6px);font-size:.82rem;background:var(--bg-hover,#f8f9fa);color:var(--text,#1a1a2e)}

.fg-bunny-toggle{display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--border,#e2e5ea);border-radius:var(--rsm,8px);background:var(--bg-hover,#f8f9fa);margin-bottom:16px;font-size:.82rem}
.fg-bunny-badge{padding:2px 8px;border-radius:999px;background:#22c55e;color:#fff;font-size:.7rem;font-weight:600}

/* ── Toast ── */
.fg-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1a1a2e;color:#fff;padding:10px 20px;border-radius:var(--rsm,8px);font-size:.85rem;font-weight:500;z-index:9999;transition:transform .3s ease;pointer-events:none}
.fg-toast.show{transform:translateX(-50%) translateY(0)}

/* ── Responsive ── */
@media(max-width:768px){
  .fg-tool{padding:16px 14px 24px}
  .fg-tab{padding:8px 12px;font-size:.82rem}
  .fg-pairing-layout{grid-template-columns:1fr}
  .fg-controls{grid-template-columns:1fr}
  .fg-mockup-cards{grid-template-columns:1fr}
  .fg-mockup-hero .fg-m-heading{font-size:1.6rem}
  .fg-mockup-blog .fg-m-heading{font-size:1.4rem}
  .fg-suggestions-grid{grid-template-columns:1fr 1fr}
  .fg-az-btn{width:24px;height:24px;font-size:.7rem}
}
@media(max-width:480px){
  .fg-filters{gap:6px}
  .fg-suggestions-grid{grid-template-columns:1fr}
  .fg-export-actions{flex-direction:column}
  .fg-export-actions .fg-btn{width:100%;justify-content:center}
}

/* ── RTL overrides ── */
[dir="rtl"] .fg-search-icon{left:auto;right:12px}
[dir="rtl"] .fg-search-input{padding-left:16px;padding-right:40px}
[dir="rtl"] .fg-card.selected{border-left:none;border-right:3px solid var(--primary,#6C3CE1)}
[dir="rtl"] .fg-filter-label{margin-right:0;margin-left:4px}
[dir="rtl"] .fg-mockup-blog .fg-m-quote{border-left:none;border-right:3px solid var(--primary,#6C3CE1);padding-left:0;padding-right:16px}

/* ── Loading skeleton ── */
.fg-card-skeleton .fg-card-preview{background:linear-gradient(90deg,#f0f1f3 25%,#e8e9eb 50%,#f0f1f3 75%);background-size:200% 100%;animation:fgShimmer 1.5s infinite;border-radius:4px;height:2rem}
@keyframes fgShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Empty state ── */
.fg-empty{text-align:center;padding:48px 24px;color:var(--text-muted,#6b7280)}
.fg-empty-icon{font-size:2.5rem;margin-bottom:12px}
.fg-empty-text{font-size:1rem;font-weight:500}
.fg-empty-sub{font-size:.85rem;margin-top:6px;opacity:.7}

/* ── Loading state ── */
.fg-grid-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--text-muted,#6b7280);font-size:.9rem}
.fg-spinner{width:28px;height:28px;border:3px solid var(--border,#e2e5ea);border-top-color:var(--primary,#6C3CE1);border-radius:50%;animation:fgSpin .7s linear infinite}
@keyframes fgSpin{to{transform:rotate(360deg)}}

/* ── Onboarding hint ── */
.fg-hint-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,rgba(108,60,225,.06),rgba(108,60,225,.02));border:1px solid rgba(108,60,225,.15);border-radius:var(--rsm,8px);margin-bottom:16px;font-size:.85rem;color:var(--text,#1a1a2e)}
.fg-hint-bar .fg-hint-icon{font-size:1.2rem;flex-shrink:0}
.fg-hint-bar .fg-hint-text{flex:1;line-height:1.5}
.fg-hint-bar .fg-hint-close{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--text-muted,#6b7280);padding:4px 8px}
.fg-hint-bar .fg-hint-close:hover{color:var(--text,#1a1a2e)}
.fg-hint-steps{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px}
.fg-hint-step{display:flex;align-items:center;gap:6px;font-size:.82rem}
.fg-hint-step-num{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--primary,#6C3CE1);color:#fff;border-radius:50%;font-size:.7rem;font-weight:700;flex-shrink:0}