/* LingoFonts Theme v5.0 — Main Stylesheet */


:root{
  --br:#6D28D9;--brm:#7C3AED;--brl:#8B5CF6;
  --brp:#EDE9FE;--brxp:#F5F3FF;--brb:#C4B5FD;
  --ac:#DB2777;--acl:#EC4899;--acp:#FCE7F3;
  --tl:#0891B2;--tlp:#E0F2FE;--tlb:#7DD3FC;
  --gn:#059669;--gnp:#D1FAE5;
  --bg:#fff;--bg2:#F9FAFB;--bg3:#F3F4F6;
  --bd:#E5E7EB;--bd2:#D1D5DB;
  --tx:#111827;--tx2:#374151;--tx3:#6B7280;--tx4:#9CA3AF;
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;--r99:100px;
  --sh:0 2px 12px rgba(0,0,0,.07);
  --shm:0 4px 20px rgba(109,40,217,.10);
  --shh:0 12px 40px rgba(109,40,217,.18);
  --tr:all .2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;background:#fff;color:var(--tx);line-height:1.6;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--br);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);}
#lf-nav{height:62px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 clamp(1rem,4vw,2.5rem);gap:.75rem;position:sticky;top:0;z-index:500;}
.nav-logo{font-size:1.3rem;font-weight:800;color:var(--br);letter-spacing:-.03em;flex-shrink:0;text-decoration:none;}
.nav-logo span{color:var(--ac);}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center;}
.nav-links a.nl{font-size:.82rem;font-weight:500;color:var(--tx3);padding:.38rem .7rem;border-radius:var(--r8);transition:var(--tr);text-decoration:none;}
.nav-links a.nl:hover{color:var(--tx);background:var(--bg3);}
.nav-links a.nl.active{color:var(--br);background:var(--brxp);font-weight:600;}
.nav-cta{background:linear-gradient(135deg,var(--br),var(--acl));color:#fff!important;padding:.38rem 1rem;border-radius:var(--r99);font-size:.82rem;font-weight:700;margin-left:.3rem;transition:var(--tr);text-decoration:none;}
.nav-cta:hover{opacity:.88;transform:translateY(-1px);text-decoration:none;}
#ham{display:none;flex-direction:column;gap:5px;cursor:pointer;border:none;background:none;padding:4px;margin-left:auto;flex-shrink:0;}
#ham span{display:block;width:22px;height:2px;background:var(--tx3);border-radius:2px;transition:var(--tr);}
#ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#ham.open span:nth-child(2){opacity:0;}
#ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#mob-menu{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--bd);padding:.5rem clamp(1rem,4vw,2.5rem);position:sticky;top:62px;z-index:499;box-shadow:0 4px 12px rgba(0,0,0,.08);}
#mob-menu a{font-size:.88rem;color:var(--tx2);padding:.5rem .5rem;border-bottom:1px solid var(--bg3);display:block;transition:var(--tr);text-decoration:none;}
#mob-menu a:last-child{border:none;}
#mob-menu a:hover{color:var(--br);padding-left:.875rem;}
#mob-menu.open{display:flex;}
#lf-footer{background:#0F172A;color:#94A3B8;padding:clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 1.5rem;}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2rem;max-width:1140px;margin-left:auto;margin-right:auto;}
.fb p{font-size:.79rem;line-height:1.85;max-width:220px;margin-top:.5rem;}
.flogo{font-size:1.2rem;font-weight:800;color:#fff;letter-spacing:-.03em;text-decoration:none;display:inline-block;}
.flogo span{color:#A78BFA;}
.fsoc{display:flex;gap:.35rem;margin-top:.875rem;}
.fsoc a{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.79rem;color:#94A3B8;transition:var(--tr);text-decoration:none;}
.fsoc a:hover{background:rgba(109,40,217,.3);color:#fff;}
.fc-col h4{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:.75rem;}
.fc-col a{display:block;color:#94A3B8;font-size:.79rem;margin-bottom:.38rem;transition:var(--tr);text-decoration:none;}
.fc-col a:hover{color:#fff;}
.fbot{border-top:1px solid #1E293B;padding-top:1.25rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:.73rem;color:#4B5563;max-width:1140px;margin:0 auto;}
.fbot a{color:#4B5563;margin-left:.875rem;transition:var(--tr);text-decoration:none;}
.fbot a:hover{color:#94A3B8;}
#lf-toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;background:var(--gn);color:#fff;padding:.6rem 1.1rem;border-radius:var(--r12);font-size:.84rem;font-weight:700;transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;box-shadow:0 4px 16px rgba(5,150,105,.35);}
#lf-toast.show{transform:translateY(0);opacity:1;}
.gt{background:linear-gradient(135deg,var(--br),var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ey{font-size:.69rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--br);text-align:center;display:block;margin-bottom:.4rem;}
.sec-title{font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:800;text-align:center;letter-spacing:-.025em;margin-bottom:.4rem;}
.sec-sub{text-align:center;color:var(--tx3);max-width:520px;margin:0 auto 2rem;font-size:.875rem;line-height:1.75;}
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.65rem 1.4rem;border-radius:var(--r99);font-size:.875rem;font-weight:700;cursor:pointer;transition:var(--tr);border:none;font-family:inherit;text-decoration:none;white-space:nowrap;}
.btn-pr{background:linear-gradient(135deg,var(--br),var(--brl));color:#fff;}
.btn-pr:hover{opacity:.88;transform:translateY(-1px);color:#fff;text-decoration:none;}
.btn-out{background:transparent;border:1.5px solid var(--brb);color:var(--br);}
.btn-out:hover{background:var(--brxp);color:var(--br);text-decoration:none;}
.btn-w{background:#fff;color:var(--br);border:none;padding:.65rem 1.6rem;border-radius:var(--r99);font-size:.875rem;font-weight:800;cursor:pointer;transition:var(--tr);font-family:inherit;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2);color:var(--br);text-decoration:none;}
.cta-band{background:linear-gradient(135deg,var(--br),#A855F7 50%,var(--ac));padding:clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,2.5rem);text-align:center;color:#fff;}
.cta-band h2{font-size:clamp(1.4rem,3.5vw,2.25rem);font-weight:800;margin-bottom:.5rem;letter-spacing:-.02em;}
.cta-band p{max-width:400px;margin:0 auto 1.5rem;opacity:.88;font-size:.875rem;}
.faq-wrap{max-width:680px;margin:0 auto;}
.faq-item{border:1px solid var(--bd);border-radius:var(--r8);margin-bottom:.4rem;}
.faq-q{padding:.8rem 1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:600;font-size:.84rem;border:none;background:none;width:100%;text-align:left;font-family:inherit;transition:var(--tr);}
.faq-q:hover{background:var(--bg2);}
.faq-ic{width:22px;height:22px;border-radius:50%;background:var(--brp);color:var(--br);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;transition:var(--tr);}
.faq-item.open .faq-ic{transform:rotate(45deg);background:var(--br);color:#fff;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:300px;}
.faq-ai{padding:0 1rem .8rem;font-size:.83rem;color:var(--tx3);line-height:1.75;}
.rv{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;}
.rv.vis{opacity:1;transform:none;}
.divider{height:1px;background:var(--bd);}

@media(max-width:880px){.nav-links{display:none!important;}#ham{display:flex!important;}.footer-inner{grid-template-columns:1fr 1fr;}.fb{grid-column:1/-1;}}
@media(max-width:520px){.footer-inner{grid-template-columns:1fr;}.fb{grid-column:auto;}}

.gen-hero{padding:1.5rem clamp(1rem,4vw,2.5rem) 0;background:linear-gradient(180deg,var(--hero-bg,var(--brxp)),#fff);}
.gen-hero .wrap{max-width:1140px;}
.bc{font-size:.75rem;color:var(--tx3);display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-bottom:.75rem;}
.bc a{color:var(--hero-accent,var(--br));text-decoration:none;}
.bc a:hover{text-decoration:underline;}
.gen-title{font-size:clamp(1.5rem,3.8vw,2.6rem);font-weight:800;letter-spacing:-.03em;text-align:center;margin-bottom:.35rem;line-height:1.1;}
.gen-sub{text-align:center;color:var(--tx3);font-size:.84rem;margin-bottom:1.25rem;line-height:1.7;}
.gen-outer{padding:.75rem clamp(1rem,4vw,2.5rem) 2.5rem;}
.gen-outer .wrap{max-width:1140px;}
.gcard{background:#fff;border:1.5px solid var(--card-border,var(--bd));border-radius:var(--r24);box-shadow:0 4px 24px var(--card-shadow,rgba(109,40,217,.08));overflow:hidden;margin-bottom:1.5rem;}

/* Font selector bar with scroll */
.fbar{display:flex;gap:.5rem;flex-wrap:wrap !important;overflow-x:visible !important;padding:1rem 1.25rem;border-bottom:1px solid var(--bd);background:var(--fbar-bg,var(--brxp));}
.fbar::-webkit-scrollbar{height:4px;}
.fbar::-webkit-scrollbar-track{background:transparent;}
.fbar::-webkit-scrollbar-thumb{background:var(--brb);border-radius:2px;}
.fbtn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .65rem;border-radius:var(--r8);border:2px solid var(--bd);background:#fff;cursor:pointer;transition:var(--tr);min-width:70px;max-width:90px;flex-shrink:0;}
.fbtn:hover{border-color:var(--act-b,var(--brb));background:var(--act-bg,var(--brxp));}
.fbtn.on{border-color:var(--act,var(--br));background:var(--act-bg,var(--brxp));box-shadow:0 0 0 3px var(--act-sh,rgba(109,40,217,.12));}
.fp{font-size:1.25rem;line-height:1.2;display:block;}
.fn{font-size:.56rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;}

.tbar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.25rem;border-bottom:1px solid var(--bd);background:#fff;flex-wrap:wrap;}
.tg{display:flex;align-items:center;gap:.28rem;}
.tlbl{font-size:.67rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;}
.tdiv{width:1px;height:22px;background:var(--bd);flex-shrink:0;}
.abtn{width:28px;height:28px;border-radius:var(--r4);border:1.5px solid var(--bd);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:var(--tr);}
.abtn:hover,.abtn.on{border-color:var(--act,var(--br));background:var(--act-bg,var(--brp));color:var(--act,var(--br));}
input[type=range].lf-sl{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--act,var(--br)) var(--pct,40%),#E5E7EB var(--pct,40%));outline:none;cursor:pointer;width:100px;flex-shrink:0;}
input[type=range].lf-sl::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--act,var(--br));border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;}
.sz-lbl{font-size:.8rem;font-weight:700;color:var(--act,var(--br));min-width:42px;text-align:right;}
.csw{width:28px;height:28px;border-radius:6px;border:2px solid var(--bd);cursor:pointer;overflow:hidden;padding:2px;flex-shrink:0;}
input[type=color].ci{width:100%;height:100%;border:none;cursor:pointer;padding:0;}
.tgl{display:flex;align-items:center;gap:.35rem;cursor:pointer;}
.tgl input[type=checkbox]{width:14px;height:14px;accent-color:var(--act,var(--br));cursor:pointer;}
.tgl label{font-size:.77rem;font-weight:500;color:var(--tx2);cursor:pointer;white-space:nowrap;}

.inp-area{position:relative;}
.mainin{width:100%;min-height:150px;max-height:240px;border:none;outline:none;resize:vertical;padding:1.1rem 1.5rem;font-size:52px;line-height:1.25;color:#111827;background:#fff;text-align:center;transition:all .15s;word-break:break-word;cursor:text;caret-color:var(--act,var(--br));}
.mainin::placeholder{color:#D1D5DB;font-style:italic;}
.mainin:focus{box-shadow:inset 0 0 0 2px rgba(109,40,217,.09);}
.char-c{position:absolute;bottom:.375rem;right:.75rem;font-size:.67rem;color:var(--tx4);}

.act-bar{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--bd);flex-wrap:wrap;background:var(--actbar-bg,var(--brxp));}
.act-r{margin-left:auto;display:flex;gap:.4rem;}
.act-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.48rem 1.05rem;border-radius:var(--r99);font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--tr);border:none;font-family:inherit;white-space:nowrap;}
.ac-clear{background:#1F2937;color:#fff;}
.ac-clear:hover{background:#374151;}
.ac-main{background:var(--act,var(--br));color:#fff;}
.ac-main:hover{opacity:.88;}
.ac-ok{background:var(--gn)!important;color:#fff!important;}

.u-sec{background:#fff;border:1px solid var(--bd);border-radius:var(--r16);padding:1.1rem 1.4rem;margin-bottom:1.5rem;}
.u-title{font-size:.9rem;font-weight:800;margin-bottom:.2rem;}
.u-sub{font-size:.75rem;color:var(--tx3);margin-bottom:.875rem;}
.u-grid{display:flex;flex-direction:column;gap:.28rem;}
.u-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:.6rem;padding:.42rem .75rem;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r8);transition:var(--tr);}
.u-row:hover{border-color:var(--act-b,var(--brb));background:var(--act-bg,var(--brxp));}
.u-badge{font-size:.61rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.15rem .5rem;border-radius:var(--r99);background:var(--act-bg,var(--brp));color:var(--act,var(--br));text-align:center;white-space:nowrap;}
.u-prev{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.u-cp{padding:.27rem .6rem;border-radius:var(--r99);background:var(--act,var(--br));color:#fff;border:none;font-size:.7rem;font-weight:700;cursor:pointer;transition:var(--tr);font-family:inherit;}
.u-cp:hover{opacity:.85;} .u-cp.ok{background:var(--gn);}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.1rem;}
.ibox{background:#fff;border:1px solid var(--bd);border-radius:var(--r12);padding:1.25rem;}
.ibox h2{font-size:.95rem;font-weight:800;margin-bottom:.6rem;}
.ibox h3{font-size:.85rem;font-weight:700;margin:.8rem 0 .3rem;}
.ibox p{font-size:.82rem;color:var(--tx3);line-height:1.8;margin-bottom:.65rem;}
.ibox ol,.ibox ul{padding-left:1.15rem;display:flex;flex-direction:column;gap:.28rem;}
.ibox li{font-size:.82rem;color:var(--tx3);line-height:1.7;}
.ibox strong{color:var(--tx);font-weight:700;}

.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-ov.open{display:flex;}
.modal{background:#fff;border-radius:var(--r24);padding:1.6rem;max-width:660px;width:90%;box-shadow:0 24px 60px rgba(0,0,0,.25);position:relative;}
.m-close{position:absolute;top:.8rem;right:.8rem;width:28px;height:28px;border-radius:50%;background:var(--bg2);border:1px solid var(--bd);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:var(--tr);}
.m-close:hover{background:var(--acp);}
.m-title{font-size:.95rem;font-weight:800;margin-bottom:.875rem;}
.m-box{border:1px solid var(--bd);border-radius:var(--r8);margin-bottom:.875rem;min-height:130px;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
.m-text{font-size:clamp(1.35rem,4vw,2.75rem);line-height:1.3;word-break:break-word;text-align:center;}
.m-acts{display:flex;gap:.5rem;flex-wrap:wrap;}

@media(max-width:720px){.fbtn{min-width:60px;max-width:75px;padding:.4rem .45rem;}.fp{font-size:1.05rem;}.info-grid{grid-template-columns:1fr;}.u-row{grid-template-columns:1fr auto;}.u-badge{display:none;}.tbar{gap:.35rem;}input[type=range].lf-sl{width:80px;}}

/* ================================================================
   LAYOUT BASE
   ================================================================ */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.lf-container { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); }

/* ================================================================
   NAV
   ================================================================ */
#lf-nav { position: sticky; top: 0; z-index: 500; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--bd); }
.lf-nav-inner { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); height: 62px; display: flex; align-items: center; gap: .75rem; }
.lf-logo { font-size: 1.3rem; font-weight: 800; color: var(--br); letter-spacing: -.03em; text-decoration: none; flex-shrink: 0; }
.lf-logo span { color: var(--ac); }
.lf-logo img { height: 36px; width: auto; display: block; }
.lf-logo-white { color: #fff; }
.lf-logo-white span { color: #A78BFA; }
.lf-nav-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.lf-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; align-items: center; }
.lf-menu li a, .lf-nav-menu > a.nl { font-size: .82rem; font-weight: 500; color: var(--tx3); padding: .38rem .7rem; border-radius: var(--r8); transition: var(--tr); text-decoration: none; display: block; }
.lf-menu li a:hover, .lf-nav-menu > a.nl:hover { color: var(--tx); background: var(--bg3); }
.lf-menu li.current-menu-item > a { color: var(--br); background: var(--brxp); font-weight: 600; }
.lf-nav-cta { background: linear-gradient(135deg,var(--br),var(--acl)); color: #fff !important; padding: .38rem 1rem; border-radius: var(--r99); font-size: .82rem; font-weight: 700; text-decoration: none; margin-left: .3rem; transition: var(--tr); white-space: nowrap; }
.lf-nav-cta:hover { opacity: .88; transform: translateY(-1px); }
.lf-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; border: none; background: none; padding: 4px; margin-left: auto; flex-shrink: 0; }
.lf-hamburger span { display: block; width: 22px; height: 2px; background: var(--tx3); border-radius: 2px; transition: var(--tr); }
.lf-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lf-hamburger.open span:nth-child(2) { opacity: 0; }
.lf-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.lf-mobile-menu { display: none; background: #fff; border-bottom: 1px solid var(--bd); box-shadow: 0 4px 12px rgba(0,0,0,.08); padding: .5rem clamp(1rem,4vw,2.5rem); }
.lf-mobile-menu.open { display: block; }
.lf-mobile-links { list-style: none; margin: 0; padding: 0; }
.lf-mobile-links li a, .lf-mobile-menu > a { display: block; font-size: .88rem; color: var(--tx2); padding: .5rem; border-bottom: 1px solid var(--bg3); text-decoration: none; transition: var(--tr); }
.lf-mobile-links li:last-child a { border: none; }
.lf-mobile-links li a:hover { color: var(--br); padding-left: .875rem; }
.lf-mobile-cta { margin: .5rem 0; padding: .6rem 1rem !important; background: var(--br); color: #fff !important; border-radius: var(--r8); font-weight: 700; text-align: center; border-bottom: none !important; }
@media (max-width: 880px) { .lf-nav-menu { display: none !important; } .lf-hamburger { display: flex !important; } }

/* ================================================================
   BUTTONS
   ================================================================ */
.lf-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.4rem; border-radius: var(--r99); font-size: .875rem; font-weight: 700; text-decoration: none; transition: var(--tr); border: none; font-family: inherit; cursor: pointer; white-space: nowrap; }
.lf-btn-primary { background: linear-gradient(135deg,var(--br),var(--brl)); color: #fff; }
.lf-btn-primary:hover { opacity: .88; transform: translateY(-1px); color: #fff; }
.lf-btn-outline { background: transparent; border: 1.5px solid var(--brb); color: var(--br); }
.lf-btn-outline:hover { background: var(--brxp); }
.lf-btn-white { background: #fff; color: var(--br); }
.lf-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.lf-btn-ghost { background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.4); }
.lf-btn-ghost:hover { background: rgba(255,255,255,.25); }

/* ================================================================
   HOMEPAGE
   ================================================================ */
.lf-hero { padding: 4rem clamp(1rem,4vw,2.5rem) 3rem; background: linear-gradient(180deg,#F5F3FF 0%,#fff 100%); text-align: center; }
.lf-hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1.5px solid var(--brb); border-radius: var(--r99); padding: .35rem 1rem; font-size: .78rem; font-weight: 700; color: var(--br); margin-bottom: 1.75rem; }
.lf-hero-title { font-size: clamp(2.2rem,6vw,4rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: 1rem; line-height: 1.05; color: var(--tx); }
.lf-hero-sub { color: var(--tx3); max-width: 560px; margin: 0 auto 1.75rem; font-size: 1rem; line-height: 1.75; }
.lf-hero-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.lf-hero-pills { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; list-style: none; padding: 0; }
.lf-hero-pills li { font-size: .75rem; color: var(--tx3); padding: .25rem .65rem; background: var(--bg2); border-radius: var(--r99); border: 1px solid var(--bd); }
.lf-hero-pills li::before { content: '• '; color: var(--br); }
.lf-section { padding: 3.5rem clamp(1rem,4vw,2.5rem); }
.lf-section-white { background: #fff; }
.lf-section-gray { background: var(--bg2); border-top: 1px solid var(--bd); }
.lf-eyebrow { font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--br); text-align: center; display: block; margin-bottom: .4rem; }
.lf-section-title { font-size: clamp(1.5rem,3.5vw,2.25rem); font-weight: 800; text-align: center; letter-spacing: -.025em; margin-bottom: .4rem; }
.lf-section-sub { text-align: center; color: var(--tx3); max-width: 520px; margin: 0 auto 2rem; font-size: .875rem; line-height: 1.75; }
.lf-gen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.lf-gen-card { border: 1.5px solid var(--bd); border-radius: var(--r20); overflow: hidden; transition: var(--tr); background: #fff; }
.lf-gen-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(109,40,217,.12); border-color: var(--brb); }
.lf-gen-card-top { height: 130px; display: flex; align-items: center; justify-content: center; }
.lf-gen-card-body { padding: 1.1rem; }
.lf-gen-badge { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--br); margin-bottom: .4rem; }
.lf-gen-title { font-size: 1rem; font-weight: 800; color: var(--br); margin-bottom: .4rem; }
.lf-gen-title a { text-decoration: none; color: inherit; }
.lf-gen-desc { font-size: .8rem; color: var(--tx3); line-height: 1.7; margin-bottom: .875rem; }
.lf-gen-btn { display: block; text-align: center; padding: .6rem; border-radius: var(--r8); font-size: .82rem; font-weight: 700; text-decoration: none; transition: var(--tr); }
.lf-gen-btn:hover { opacity: .88; transform: translateY(-1px); }
.lf-stats-bar { background: var(--bg2); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.lf-stats-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; padding: 1.75rem 0; text-align: center; }
.lf-stats-grid > div { } /* stat item */
.lf-stat { } .lf-stat-num { font-size: clamp(1.5rem,3.5vw,2.25rem); font-weight: 800; color: var(--br); letter-spacing: -.02em; }
.lf-stat-lbl { font-size: .75rem; color: var(--tx3); margin-top: .2rem; }
.lf-steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.lf-step { text-align: center; padding: 1.5rem 1rem; }
.lf-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--br); color: #fff; font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.lf-step-title { font-size: .9rem; font-weight: 800; color: var(--br); margin-bottom: .4rem; }
.lf-step-desc { font-size: .8rem; color: var(--tx3); line-height: 1.7; }
.lf-cta-band { background: linear-gradient(135deg,var(--br),#A855F7 50%,var(--ac)); padding: clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,2.5rem); text-align: center; color: #fff; }
.lf-cta-band h2 { font-size: clamp(1.4rem,3.5vw,2.25rem); font-weight: 800; margin-bottom: .5rem; letter-spacing: -.02em; }
.lf-cta-band p { max-width: 400px; margin: 0 auto 1.5rem; opacity: .88; font-size: .875rem; }
.lf-cta-band-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.lf-faq-wrap { max-width: 680px; margin: 0 auto; }
.lf-faq-item { border: 1px solid var(--bd); border-radius: var(--r8); margin-bottom: .4rem; }
.lf-faq-q { width: 100%; padding: .8rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; font-size: .84rem; border: none; background: none; text-align: left; font-family: inherit; transition: var(--tr); }
.lf-faq-q:hover { background: var(--bg2); }
.lf-faq-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--brp); color: var(--br); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; transition: var(--tr); line-height: 1; }
.lf-faq-item.open .lf-faq-icon { transform: rotate(45deg); background: var(--br); color: #fff; }
.lf-faq-a { overflow: hidden; transition: max-height .3s ease; max-height: 0; }
.lf-faq-a[hidden] { display: block; max-height: 0; }
.lf-faq-item.open .lf-faq-a { max-height: 300px; }
.lf-faq-a p { padding: 0 1rem .8rem; font-size: .83rem; color: var(--tx3); line-height: 1.75; margin: 0; }

/* ================================================================
   PAGES (About, Contact, etc)
   ================================================================ */
.lf-page-hero { padding: 2.5rem 0 1.5rem; background: linear-gradient(180deg,#F5F3FF,#fff); }
.lf-page-title { font-size: clamp(1.5rem,3.8vw,2.5rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: .35rem; }
.lf-page-sub { color: var(--tx3); margin-top: .4rem; }
.lf-page-content { padding: 2rem 0 4rem; }
.lf-breadcrumb { font-size: .75rem; color: var(--tx3); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.lf-breadcrumb a { color: var(--br); text-decoration: none; }
.lf-breadcrumb a:hover { text-decoration: underline; }
.lf-prose h1,.lf-prose h2 { font-size: 1.25rem; font-weight: 800; margin: 1.75rem 0 .5rem; color: var(--tx); }
.lf-prose h3 { font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 .4rem; }
.lf-prose p { font-size: .9rem; color: var(--tx3); line-height: 1.85; margin-bottom: 1rem; }
.lf-prose ul,.lf-prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.lf-prose li { font-size: .9rem; color: var(--tx3); line-height: 1.85; margin-bottom: .3rem; }
.lf-prose a { color: var(--br); }
.lf-prose strong { color: var(--tx); font-weight: 700; }
.lf-prose blockquote { border-left: 4px solid var(--br); padding: .75rem 1.25rem; background: var(--brxp); border-radius: 0 var(--r8) var(--r8) 0; margin: 1.25rem 0; }
.lf-prose img { max-width: 100%; border-radius: var(--r8); margin: 1rem 0; }
.lf-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .85rem; }
.lf-prose th,.lf-prose td { padding: .6rem .875rem; border: 1px solid var(--bd); text-align: left; }
.lf-prose th { background: var(--bg2); font-weight: 700; }
/* single post max-width */
.lf-single-article .lf-prose { max-width: 100%; }

/* ================================================================
   BLOG LAYOUT
   ================================================================ */
.lf-blog-hero { padding: 3rem 0 2rem; background: linear-gradient(180deg,#F5F3FF,#fff); text-align: center; }
.lf-blog-title { font-size: clamp(2rem,5vw,3rem); font-weight: 800; letter-spacing: -.03em; }
.lf-blog-title span { color: var(--ac); }
.lf-blog-sub { color: var(--tx3); max-width: 560px; margin: .75rem auto 0; font-size: .95rem; line-height: 1.7; }
.lf-filter-bar { background: #fff; border-bottom: 1px solid var(--bd); padding: .75rem 0; margin-bottom: 0; }
.lf-filter-bar .lf-container { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.lf-filter-btn { padding: .32rem .85rem; border-radius: var(--r99); font-size: .78rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--bd); background: #fff; color: var(--tx3); transition: var(--tr); font-family: inherit; }
.lf-filter-btn:hover { border-color: var(--brb); color: var(--br); background: var(--brxp); }
.lf-filter-btn.active { background: var(--br); border-color: var(--br); color: #fff; }
.lf-blog-layout { display: grid; grid-template-columns: 1fr 290px; gap: 2.5rem; padding: 2rem 0 3rem; align-items: start; }
.lf-posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.lf-post-card { background: #fff; border: 1px solid var(--bd); border-radius: var(--r16); overflow: hidden; transition: var(--tr); display: flex; flex-direction: column; }
.lf-post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(109,40,217,.12); border-color: var(--brb); }
.lf-post-card-thumb-link { display: block; text-decoration: none; }
.lf-post-card-thumb { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 2rem; overflow: hidden; }
.lf-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lf-post-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.lf-post-card-cat { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); margin-bottom: .4rem; }
.lf-post-card-title { font-size: .95rem; font-weight: 800; color: var(--tx); margin-bottom: .35rem; line-height: 1.35; }
.lf-post-card-title a { color: inherit; text-decoration: none; }
.lf-post-card-title a:hover { color: var(--br); }
.lf-post-card-excerpt { font-size: .8rem; color: var(--tx3); line-height: 1.65; flex: 1; }
.lf-post-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; font-size: .73rem; color: var(--tx4); }
.lf-post-card-author { font-weight: 600; color: var(--tx3); }
.lf-no-posts { grid-column: 1/-1; text-align: center; padding: 4rem 2rem; }
.lf-no-posts p:first-child { font-size: 2.5rem; margin-bottom: .5rem; }
.lf-no-posts h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .4rem; }
.lf-no-posts p { color: var(--tx3); margin-bottom: 1.5rem; }
.lf-pagination { padding: 1.5rem 0; }
.lf-pagination ul { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.lf-pagination ul li a,.lf-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--bd); font-size: .82rem; font-weight: 600; color: var(--tx3); text-decoration: none; transition: var(--tr); padding: 0 .3rem; }
.lf-pagination ul li a:hover,.lf-pagination ul li.current span { background: var(--br); border-color: var(--br); color: #fff; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.lf-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 80px; }
.lf-sidebar-widget { background: #fff; border: 1px solid var(--bd); border-radius: var(--r12); padding: 1.1rem; }
.lf-sidebar-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tx); margin-bottom: .875rem; }
.lf-sidebar-widget .search-form { display: flex; gap: .4rem; }
.lf-sidebar-widget .search-field { flex: 1; padding: .55rem .875rem; border: 1.5px solid var(--bd); border-radius: var(--r8); font-size: .82rem; outline: none; font-family: inherit; }
.lf-sidebar-widget .search-field:focus { border-color: var(--brb); }
.lf-sidebar-widget .search-submit { padding: .55rem .875rem; background: var(--br); color: #fff; border: none; border-radius: var(--r8); font-size: .82rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.lf-cat-list { list-style: none; padding: 0; margin: 0; }
.lf-cat-list li a { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; font-size: .82rem; color: var(--tx3); text-decoration: none; border-bottom: 1px solid var(--bg3); transition: var(--tr); }
.lf-cat-list li:last-child a { border: none; }
.lf-cat-list li a:hover { color: var(--br); }
.lf-cat-list li a::before { content: '→ '; color: var(--brb); }
.lf-cat-count { font-size: .72rem; background: var(--brxp); color: var(--br); padding: .1rem .45rem; border-radius: var(--r99); }
.lf-popular-list { list-style: none; padding: 0; margin: 0; }
.lf-popular-list li { border-bottom: 1px solid var(--bg3); }
.lf-popular-list li:last-child { border: none; }
.lf-popular-list li a { display: flex; align-items: flex-start; gap: .4rem; padding: .4rem 0; font-size: .8rem; color: var(--tx2); text-decoration: none; line-height: 1.4; transition: var(--tr); }
.lf-popular-list li a::before { content: '→'; color: var(--brb); flex-shrink: 0; margin-top: .1rem; }
.lf-popular-list li a:hover { color: var(--br); }
.lf-sidebar-cta { background: linear-gradient(135deg,var(--br),var(--brl)); color: #fff; text-align: center; padding: 1.25rem; border-radius: var(--r12); }
.lf-sidebar-cta-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #C4B5FD; margin-bottom: .25rem; }
.lf-sidebar-cta p { font-size: .8rem; opacity: .9; margin-bottom: .875rem; }
.lf-sidebar-cta-btn { display: block; background: #fff; color: var(--br); padding: .55rem; border-radius: var(--r8); font-size: .82rem; font-weight: 800; text-decoration: none; transition: var(--tr); }
.lf-sidebar-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.lf-widget { background: #fff; border: 1px solid var(--bd); border-radius: var(--r12); padding: 1.1rem; }
.lf-widget-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tx); margin-bottom: .875rem; }

/* ================================================================
   SINGLE POST
   ================================================================ */
.lf-post-hero { padding: 2rem 0 1.5rem; }
.lf-post-cat-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.lf-post-title { font-size: clamp(1.5rem,4vw,2.5rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: .75rem; line-height: 1.15; }
.lf-post-meta-bar { display: flex; align-items: center; gap: 1rem; font-size: .8rem; color: var(--tx4); flex-wrap: wrap; }
.lf-post-meta-bar span { color: var(--tx3); }
.lf-post-featured-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r16); margin: 1.5rem 0; display: block; }
.lf-post-placeholder-img { width: 100%; height: 200px; border-radius: var(--r16); display: flex; align-items: center; justify-content: center; margin: 1.5rem 0; }
.lf-post-content { font-size: .9rem; }
.lf-post-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bd); }
.lf-post-tags a { padding: .28rem .75rem; background: var(--brxp); color: var(--br); border-radius: var(--r99); font-size: .75rem; font-weight: 600; text-decoration: none; }
.lf-post-tags a:hover { background: var(--br); color: #fff; }
.lf-post-nav { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bd); }
.lf-post-nav-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lf-post-nav-link { padding: .875rem 1rem; border: 1px solid var(--bd); border-radius: var(--r12); text-decoration: none; transition: var(--tr); display: block; }
.lf-post-nav-link:hover { border-color: var(--brb); background: var(--brxp); }
.lf-post-nav-link span { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tx4); display: block; margin-bottom: .2rem; }
.lf-post-nav-link strong { font-size: .85rem; color: var(--tx); font-weight: 700; display: block; }
.lf-post-nav-next { text-align: right; }
.lf-page-links { padding: 1rem 0; font-size: .875rem; }

/* ================================================================
   NEWSLETTER
   ================================================================ */
.lf-newsletter { background: var(--bg2); border-top: 1px solid var(--bd); padding: 3rem 0; text-align: center; }
.lf-newsletter h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .35rem; }
.lf-newsletter p { color: var(--tx3); font-size: .875rem; margin-bottom: 1.25rem; }
.lf-newsletter-form { display: flex; gap: .5rem; max-width: 440px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.lf-newsletter-form input { flex: 1; min-width: 200px; padding: .65rem 1rem; border: 1.5px solid var(--bd); border-radius: var(--r99); font-size: .875rem; outline: none; font-family: inherit; }
.lf-newsletter-form input:focus { border-color: var(--brb); }
.lf-newsletter-form button { padding: .65rem 1.4rem; background: var(--br); color: #fff; border: none; border-radius: var(--r99); font-size: .875rem; font-weight: 700; cursor: pointer; font-family: inherit; }

/* ================================================================
   FOOTER
   ================================================================ */
#lf-footer { background: #0F172A; color: #94A3B8; padding: clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 1.5rem; }
.lf-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem; max-width: 1140px; margin-left: auto; margin-right: auto; }
.lf-footer-brand p { font-size: .79rem; line-height: 1.85; max-width: 220px; margin-top: .5rem; }
.lf-social { display: flex; gap: .35rem; margin-top: .875rem; }
.lf-social a { width: 30px; height: 30px; border-radius: 7px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: .79rem; color: #94A3B8; transition: var(--tr); text-decoration: none; }
.lf-social a:hover { background: rgba(109,40,217,.3); color: #fff; }
.lf-footer-col h4 { font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: .75rem; }
.lf-footer-links { list-style: none; padding: 0; margin: 0; }
.lf-footer-links li a,.lf-footer-links a { display: block; color: #94A3B8; font-size: .79rem; margin-bottom: .38rem; transition: var(--tr); text-decoration: none; }
.lf-footer-links li a:hover,.lf-footer-links a:hover { color: #fff; }
.lf-footer-bottom { border-top: 1px solid #1E293B; padding-top: 1.25rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .73rem; color: #4B5563; max-width: 1140px; margin: 0 auto; }
.lf-footer-legal a { color: #4B5563; margin-left: .875rem; transition: var(--tr); text-decoration: none; }
.lf-footer-legal a:hover { color: #94A3B8; }

/* ================================================================
   GENERATOR WRAP (shortcode output)
   ================================================================ */
.lf-generator-wrap { width: 100%; overflow-x: hidden; }

/* ================================================================
   TOAST
   ================================================================ */
#lf-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; background: var(--gn); color: #fff; padding: .6rem 1.1rem; border-radius: var(--r12); font-size: .84rem; font-weight: 700; transform: translateY(80px); opacity: 0; transition: all .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; box-shadow: 0 4px 16px rgba(5,150,105,.35); }
#lf-toast.show { transform: translateY(0); opacity: 1; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .lf-footer-inner { grid-template-columns: 1fr 1fr; }
    .lf-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
    .lf-gen-grid { grid-template-columns: 1fr; }
    .lf-blog-layout { grid-template-columns: 1fr; }
    .lf-sidebar { position: static; }
    .lf-stats-grid { grid-template-columns: repeat(3,1fr); }
    .lf-steps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .lf-posts-grid { grid-template-columns: 1fr; }
    .lf-stats-grid { grid-template-columns: 1fr 1fr; }
    .lf-steps-grid { grid-template-columns: 1fr; }
    .lf-post-nav-inner { grid-template-columns: 1fr; }
    .lf-footer-inner { grid-template-columns: 1fr; }
}

/* ================================================================
   CUSTOMIZER EDIT BUTTONS
   ================================================================ */
.lf-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #fff;
    color: #6D28D9;
    border: 2px solid #6D28D9;
    border-radius: 100px;
    padding: .35rem .875rem;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all .2s;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.lf-edit-btn:hover { background: #6D28D9; color: #fff; }
.lf-edit-btn-dark { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); color: #fff; }
.lf-edit-btn-dark:hover { background: rgba(255,255,255,.3); color: #fff; }
.lf-edit-btn-light { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); color: #fff; }
.lf-edit-btn-light:hover { background: rgba(255,255,255,.35); color: #fff; }
/* Make sections position:relative so edit btn positions correctly */
.lf-hero, .lf-section, .lf-stats-bar, .lf-cta-band, #lf-section-faq { position: relative; }

/* ================================================================
   CONTACT FORM
   ================================================================ */
.lf-contact-form-wrap {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--bd);
}
.lf-contact-form-wrap h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--tx);
}
.lf-contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.lf-form-row { display: flex; gap: 1rem; }
.lf-form-2col > .lf-form-group { flex: 1; }
.lf-form-group { display: flex; flex-direction: column; gap: .35rem; }
.lf-form-group label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--tx);
}
.lf-form-group label span { color: var(--ac); }
.lf-form-group input,
.lf-form-group select,
.lf-form-group textarea {
    width: 100%;
    padding: .7rem 1rem;
    border: 1.5px solid var(--bd);
    border-radius: var(--r8);
    font-size: .875rem;
    font-family: inherit;
    color: var(--tx);
    background: #fff;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.lf-form-group input:focus,
.lf-form-group select:focus,
.lf-form-group textarea:focus { border-color: var(--br); box-shadow: 0 0 0 3px rgba(109,40,217,.08); }
.lf-form-group textarea { min-height: 150px; resize: vertical; }
.lf-form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.lf-form-submit { align-self: flex-start; padding: .75rem 2rem; font-size: .9rem; }
.lf-form-success {
    background: #D1FAE5; border: 1.5px solid #6EE7B7; color: #065F46;
    border-radius: var(--r8); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    font-size: .875rem; font-weight: 600;
}
.lf-form-error {
    background: #FEF2F2; border: 1.5px solid #FECACA; color: #991B1B;
    border-radius: var(--r8); padding: .75rem 1.25rem; margin-bottom: .5rem;
    font-size: .875rem;
}
@media (max-width: 600px) { .lf-form-row { flex-direction: column; } }

/* ================================================================
   FONT BARS — scroll horizontally on all generators
   ================================================================ */
.fbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--brb) transparent;
    -webkit-overflow-scrolling: touch;
}
.fbar::-webkit-scrollbar { height: 4px; }
.fbar::-webkit-scrollbar-track { background: transparent; }
.fbar::-webkit-scrollbar-thumb { background: var(--brb); border-radius: 2px; }
/* Keep font buttons from shrinking */
.fbtn { flex-shrink: 0; }

/* ================================================================
   AESTHETIC GENERATOR — mood bar wrap fix
   ================================================================ */
.mood-bar { flex-wrap: wrap !important; }


/* ================================================================
   FLEXIBLE GENERATOR GRID  (adapts to 1–6 cards)
   ================================================================ */
.lf-gen-grid { display:grid; gap:1.25rem; }
.lf-gen-grid-1 { grid-template-columns:1fr; max-width:420px; margin:2rem auto 0; }
.lf-gen-grid-2 { grid-template-columns:repeat(2,1fr); margin-top:2rem; }
.lf-gen-grid-3 { grid-template-columns:repeat(3,1fr); margin-top:2rem; }
.lf-gen-grid-4 { grid-template-columns:repeat(2,1fr); margin-top:2rem; }
.lf-gen-grid-5 { grid-template-columns:repeat(3,1fr); margin-top:2rem; }
.lf-gen-grid-6 { grid-template-columns:repeat(3,1fr); margin-top:2rem; }
.lf-gen-card-soon { opacity:.72; }
.lf-gen-btn-soon { display:block; text-align:center; padding:.6rem; border-radius:var(--r8); font-size:.82rem; font-weight:700; }
@media(max-width:880px){
  .lf-gen-grid-3,.lf-gen-grid-5,.lf-gen-grid-6 { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .lf-gen-grid-2,.lf-gen-grid-3,.lf-gen-grid-4,.lf-gen-grid-5,.lf-gen-grid-6 { grid-template-columns:1fr; }
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.lf-contact-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; padding:2.5rem 0 4rem; align-items:start; }
.lf-contact-info h2 { font-size:1.35rem; font-weight:800; margin-bottom:.75rem; }
.lf-contact-info p { font-size:.9rem; color:var(--tx3); line-height:1.85; margin-bottom:.75rem; }
.lf-contact-cards { display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; }
.lf-contact-card { background:#fff; border:1px solid var(--bd); border-radius:var(--r12); padding:1rem 1.1rem; display:flex; align-items:center; gap:.875rem; }
.lf-contact-card-icon { font-size:1.5rem; flex-shrink:0; }
.lf-contact-card h3 { font-size:.84rem; font-weight:800; margin-bottom:.2rem; }
.lf-contact-card p,.lf-contact-card a { font-size:.82rem; color:var(--tx3); margin:0; text-decoration:none; }
.lf-contact-card a:hover { color:var(--br); }

.lf-contact-form-wrap { background:#fff; border:1.5px solid var(--bd); border-radius:var(--r20); padding:2rem; box-shadow:var(--shm); }
.lf-contact-form-wrap h2 { font-size:1.15rem; font-weight:800; margin-bottom:1.25rem; }
.lf-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.lf-form-group { margin-bottom:1rem; }
.lf-form-group label { display:block; font-size:.8rem; font-weight:700; color:var(--tx); margin-bottom:.35rem; }
.lf-form-group .req { color:var(--ac); }
.lf-form-group input,
.lf-form-group select,
.lf-form-group textarea { width:100%; padding:.65rem .875rem; border:1.5px solid var(--bd); border-radius:var(--r8); font-size:.875rem; outline:none; font-family:inherit; transition:border-color .15s; box-sizing:border-box; background:#fff; }
.lf-form-group input:focus,
.lf-form-group select:focus,
.lf-form-group textarea:focus { border-color:var(--brb); box-shadow:0 0 0 3px rgba(109,40,217,.08); }
.lf-form-group textarea { min-height:130px; resize:vertical; }
.lf-form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .875rem center; padding-right:2.5rem; cursor:pointer; }
.lf-form-submit { width:100%; justify-content:center; padding:.75rem; font-size:.9rem; margin-top:.25rem; }
.lf-form-success { background:#D1FAE5; border:1px solid #6EE7B7; border-radius:var(--r8); padding:.875rem 1rem; margin-bottom:1.25rem; color:#065F46; font-weight:600; font-size:.875rem; }
.lf-form-error { background:#FEE2E2; border:1px solid #FECACA; border-radius:var(--r8); padding:.875rem 1rem; margin-bottom:1.25rem; color:#991B1B; font-weight:600; font-size:.875rem; }
@media(max-width:880px){ .lf-contact-layout { grid-template-columns:1fr; } }
@media(max-width:520px){ .lf-form-row { grid-template-columns:1fr; } }

/* ================================================================
   CUSTOMIZER HIGHLIGHT (selective refresh pencil buttons)
   Clicking edit pencils in Customizer highlights the right section
   ================================================================ */
.customize-partial-refreshing { outline:2px dashed var(--br); outline-offset:4px; }

/* ================================================================
   FONT BAR — WRAP IN GRID  (all generators)
   ================================================================ */
.fbar { flex-wrap:wrap !important; overflow-x:visible !important; }
.fbtn { flex-shrink:0; }

/* ================================================================
   CONTACT PAGE - v6 redesign
   ================================================================ */
.lf-contact-outer { padding: 2.5rem 0 4rem; }
.lf-contact-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
.lf-contact-info h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: .75rem; color: var(--tx); }
.lf-contact-info > p { font-size: .9rem; color: var(--tx3); line-height: 1.85; margin-bottom: 1.5rem; }
.lf-info-cards { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.75rem; }
.lf-info-card { display: flex; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--bd); border-radius: var(--r12); padding: 1rem 1.1rem; transition: var(--tr); }
.lf-info-card:hover { border-color: var(--brb); transform: translateX(3px); }
.lf-info-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.lf-info-card h3 { font-size: .84rem; font-weight: 800; margin-bottom: .2rem; color: var(--tx); }
.lf-info-card p, .lf-info-card a { font-size: .82rem; color: var(--tx3); margin: 0; text-decoration: none; line-height: 1.5; }
.lf-info-card a:hover { color: var(--br); }
.lf-contact-social p { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); margin-bottom: .5rem; }
.lf-social-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.lf-social-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .875rem; background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r99); font-size: .78rem; font-weight: 600; color: var(--tx3); text-decoration: none; transition: var(--tr); }
.lf-social-pill:hover { background: var(--brxp); border-color: var(--brb); color: var(--br); }

.lf-contact-form-box { background: #fff; border: 1.5px solid var(--bd); border-radius: var(--r20); padding: 2rem; box-shadow: 0 4px 24px rgba(109,40,217,.07); }
.lf-contact-form-box h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: .35rem; }
.lf-form-intro { font-size: .82rem; color: var(--tx3); margin-bottom: 1.5rem; }
.lf-form-notice { padding: .875rem 1rem; border-radius: var(--r8); margin-bottom: 1.25rem; font-size: .875rem; font-weight: 600; }
.lf-form-success { background: #D1FAE5; border: 1px solid #6EE7B7; color: #065F46; }
.lf-form-error { background: #FEE2E2; border: 1px solid #FECACA; color: #991B1B; }
.lf-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lf-field { margin-bottom: 1.1rem; }
.lf-field label { display: block; font-size: .8rem; font-weight: 700; color: var(--tx); margin-bottom: .38rem; }
.lf-req { color: var(--ac); }
.lf-field input, .lf-field select, .lf-field textarea {
    width: 100%; padding: .68rem .875rem; border: 1.5px solid var(--bd);
    border-radius: var(--r8); font-size: .875rem; outline: none;
    font-family: inherit; transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box; background: #FAFAFA; color: var(--tx);
}
.lf-field input:focus, .lf-field select:focus, .lf-field textarea:focus {
    border-color: var(--brb); background: #fff;
    box-shadow: 0 0 0 3px rgba(109,40,217,.08);
}
.lf-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.lf-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .875rem center;
    background-color: #FAFAFA; padding-right: 2.5rem; cursor: pointer;
}
.lf-btn-full { width: 100%; justify-content: center; padding: .8rem; font-size: .9rem; }
@media (max-width: 880px) { .lf-contact-layout { grid-template-columns: 1fr; } .lf-form-row-2 { grid-template-columns: 1fr; } }

/* ================================================================
   FONT BAR WRAP  - force wrap on ALL generators
   ================================================================ */
.fbar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    scrollbar-width: none !important;
    padding: .875rem 1.25rem !important;
    gap: .4rem !important;
    max-height: none !important;
}
.fbar::-webkit-scrollbar { display: none !important; }
.fbtn { flex-shrink: 0 !important; }

/* ================================================================
   GENERATOR CARDS - fix empty state
   ================================================================ */
.lf-gen-card-top { min-height: 120px; }
.lf-gen-btn-soon { display: block; text-align: center; padding: .6rem; border-radius: var(--r8); font-size: .82rem; font-weight: 700; background: #E5E7EB; color: #9CA3AF; cursor: default; }

/* ================================================================
   PAGE HERO - fix subtitle
   ================================================================ */
.lf-page-sub { color: var(--tx3); margin-top: .5rem; font-size: .9rem; line-height: 1.7; }

/* ================================================================
   FOOTER - prevent double render
   ================================================================ */
#lf-footer + #lf-footer { display: none; }

/* ================================================================
   TWO-COLUMN PAGE LAYOUT (Contact, Write For Us)
   ================================================================ */
.lf-twopage-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    align-items: start;
}
.lf-contact-info h2 {
    font-size: 1.35rem; font-weight: 800; margin-bottom: .75rem;
}
.lf-contact-info > p {
    font-size: .9rem; color: var(--tx3); line-height: 1.85; margin-bottom: 1.5rem;
}
.lf-icard-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.lf-icard {
    display: flex; align-items: flex-start; gap: .875rem;
    background: #fff; border: 1px solid var(--bd); border-radius: var(--r12);
    padding: .875rem 1rem; transition: var(--tr);
}
.lf-icard:hover { border-color: var(--brb); }
.lf-icard-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; }
.lf-icard strong { display: block; font-size: .84rem; font-weight: 800; margin-bottom: .2rem; color: var(--tx); }
.lf-icard p { font-size: .82rem; color: var(--tx3); margin: 0; line-height: 1.5; }
.lf-icard a { color: var(--br); text-decoration: none; }
.lf-icard a:hover { text-decoration: underline; }
.lf-social-follow > p { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); margin-bottom: .5rem; }
.lf-social-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.lf-social-btns a {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .8rem; background: var(--bg2); border: 1px solid var(--bd);
    border-radius: var(--r99); font-size: .78rem; font-weight: 600;
    color: var(--tx3); text-decoration: none; transition: var(--tr);
}
.lf-social-btns a:hover { background: var(--brxp); border-color: var(--brb); color: var(--br); }

/* Form card */
.lf-form-card {
    background: #fff; border: 1.5px solid var(--bd); border-radius: var(--r20);
    padding: 2rem; box-shadow: 0 4px 24px rgba(109,40,217,.07);
}
.lf-form-card h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: .3rem; }
.lf-form-sub { font-size: .82rem; color: var(--tx3); margin-bottom: 1.5rem; }
.lf-notice { padding: .875rem 1rem; border-radius: var(--r8); margin-bottom: 1.25rem; font-size: .875rem; font-weight: 600; }
.lf-notice-ok { background: #D1FAE5; border: 1px solid #6EE7B7; color: #065F46; }
.lf-notice-err { background: #FEE2E2; border: 1px solid #FECACA; color: #991B1B; }
.lf-form { display: flex; flex-direction: column; gap: 0; }
.lf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.lf-field { margin-bottom: 1rem; }
.lf-field:last-child { margin-bottom: 0; }
.lf-field label { display: block; font-size: .8rem; font-weight: 700; color: var(--tx); margin-bottom: .38rem; }
.req { color: var(--ac); }
.lf-field input,
.lf-field select,
.lf-field textarea {
    width: 100%; padding: .7rem .9rem;
    border: 1.5px solid var(--bd); border-radius: var(--r8);
    font-size: .875rem; outline: none; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box; background: #FAFAFA; color: var(--tx);
}
.lf-field input:focus,
.lf-field select:focus,
.lf-field textarea:focus {
    border-color: var(--brb); background: #fff;
    box-shadow: 0 0 0 3px rgba(109,40,217,.08);
}
.lf-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.lf-field select {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
    background-color: #FAFAFA; padding-right: 2.5rem;
}
@media (max-width: 880px) {
    .lf-twopage-grid { grid-template-columns: 1fr; }
    .lf-field-row { grid-template-columns: 1fr; }
}

/* ================================================================
   FORCE FONT BAR WRAP — overrides all inline generator styles
   ================================================================ */
.fbar,#fbar-c,#cfbar,#afbar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-height: none !important;
    scrollbar-width: none !important;
}
.fbar::-webkit-scrollbar,
#fbar-c::-webkit-scrollbar,
#cfbar::-webkit-scrollbar,
#afbar::-webkit-scrollbar { display: none !important; }

.fbtn { flex-shrink: 0 !important; }

/* ================================================================
   CALLIGRAPHY INPUT — match cursive textarea style
   ================================================================ */
.cvs-box {
    min-height: 160px !important;
    max-height: 280px !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 1.1rem 1.5rem !important;
    cursor: text !important;
    font-size: 52px !important;
    position: relative !important;
}
.cvs-txt {
    min-height: 120px !important;
    width: 100% !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}
.hid-ta {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important;
    cursor: text !important;
    font-size: 52px !important;
    resize: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

/* ================================================================
   FONT PICKER GRID — Google Fonts style (all generators)
   ================================================================ */
.fp-wrap { background:#fff; border-bottom:1px solid var(--bd); }
.fp-filters {
    display:flex; gap:.35rem; flex-wrap:wrap;
    padding:.75rem 1.25rem; border-bottom:1px solid var(--bd); align-items:center;
}
.fp-filter {
    display:flex; align-items:center; gap:.4rem;
    padding:.32rem .8rem; border-radius:var(--r99);
    border:1.5px solid var(--bd); background:#fff;
    font-size:.78rem; font-weight:600; cursor:pointer;
    color:var(--tx3); font-family:inherit; transition:all .15s; white-space:nowrap;
}
.fp-filter input[type=radio] { accent-color:var(--act,var(--br)); width:13px; height:13px; flex-shrink:0; cursor:pointer; }
.fp-filter:hover { border-color:var(--act-b,var(--brb)); color:var(--act,var(--br)); background:var(--act-bg,var(--brxp)); }
.fp-filter.on { border-color:var(--act,var(--br)); background:var(--act-bg,var(--brxp)); color:var(--act,var(--br)); }
.fp-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;
}
.fp-card {
    display:flex; flex-direction:column; align-items:flex-start;
    gap:.25rem; padding:.7rem .875rem;
    border-right:1px solid var(--bd); border-bottom:1px solid var(--bd);
    cursor:pointer; transition:background .12s; min-height:80px;
    position:relative;
}
.fp-card:hover { background:#F9FAFB; }
.fp-card.on { background:var(--act,var(--br)) !important; }
.fp-card.on .fp-card-preview { color:#fff !important; }
.fp-card.on .fp-card-name { color:rgba(255,255,255,.82) !important; }
.fp-card-preview {
    font-size:1.5rem; line-height:1.25;
    color:var(--tx); word-break:break-all; flex:1;
}
.fp-card-name {
    font-size:.65rem; color:var(--tx3);
    font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
    font-weight:500; margin-top:auto;
}
@media(max-width:960px){ .fp-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:640px){ .fp-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .fp-grid{ grid-template-columns:repeat(2,1fr); } }

/* ── Site-wide font consistency ─────────────────────────────────── */
body, button, input, textarea, select {
    font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
}
.lf-nav-inner, .lf-logo, nav, footer, .lf-footer-inner {
    font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
}
/* Generator pages — UI controls use Jakarta Sans */
.tbar, .act-bar, .faq-q, .act-btn, .abtn, .tlbl, .fn, .sz-lbl,
.u-badge, .u-cp, .mood-lbl, .mbtn, .fp-filter, .fp-card-name {
    font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif !important;
}


/* ================================================================
   GENERATOR LAYOUT — toolbar > textarea > buttons > font grid
   ================================================================ */
.gen-card-v2{background:#fff;border:1.5px solid var(--card-border,#E5E7EB);border-radius:20px;overflow:hidden;margin-bottom:1.5rem;box-shadow:0 2px 16px rgba(0,0,0,.06);}
.gtb{display:flex!important;flex-direction:row!important;align-items:center!important;gap:.6rem;padding:.6rem 1.1rem;border-bottom:1px solid var(--bd);background:#F9FAFB;flex-wrap:wrap;}
.gtb-div{width:1px;height:20px;background:#E5E7EB;flex-shrink:0;}
.gtb-lbl{font-size:.7rem;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.gtb-abtn{width:30px;height:30px;border-radius:8px;border:1.5px solid #E5E7EB;background:#fff;cursor:pointer;display:inline-flex!important;align-items:center;justify-content:center;font-size:.85rem;transition:all .15s;flex-shrink:0;padding:0;}
.gtb-abtn:hover,.gtb-abtn.on{border-color:var(--act-c,#6D28D9);background:#EDE9FE;color:var(--act-c,#6D28D9);}
.gtb-szlbl{font-size:.85rem;font-weight:700;color:var(--act-c,#6D28D9);min-width:40px;}
input[type=range].gtb-sl{-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--act-c,#6D28D9) var(--pct,40%),#E5E7EB var(--pct,40%));outline:none;cursor:pointer;width:100px;flex-shrink:0;}
input[type=range].gtb-sl::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--act-c,#6D28D9);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;}
.gtb-csw{width:30px;height:30px;border-radius:8px;border:1.5px solid #E5E7EB;overflow:hidden;padding:3px;flex-shrink:0;cursor:pointer;}
input[type=color].gtb-ci{width:100%;height:100%;border:none;cursor:pointer;padding:0;display:block;}
.gtb-chklbl{display:inline-flex!important;align-items:center;gap:.35rem;cursor:pointer;font-size:.78rem;font-weight:500;color:#374151;white-space:nowrap;}
.gtb-chklbl input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--act-c,#6D28D9);flex-shrink:0;}
.gta-wrap{position:relative;border-bottom:1px solid var(--bd);}
.gta{width:100%!important;min-height:180px!important;border:none!important;outline:none!important;resize:vertical!important;padding:1.5rem 2rem!important;font-size:2.5rem!important;line-height:1.35!important;color:#111827!important;background:#fff!important;text-align:center!important;box-sizing:border-box!important;display:block!important;}
.gta::placeholder{color:#D1D5DB!important;font-style:italic!important;}
.gta-count{position:absolute;bottom:.5rem;right:.875rem;font-size:.65rem;color:#9CA3AF;pointer-events:none;}
.gact{display:flex!important;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-bottom:1px solid var(--bd);background:#fff;flex-wrap:wrap;}
.gact-r{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap;}
.gact-btn{display:inline-flex!important;align-items:center;gap:.35rem;padding:.48rem 1.05rem;border-radius:100px;font-size:.82rem;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .15s;white-space:nowrap;line-height:1;}
.gact-btn:hover{opacity:.88;transform:translateY(-1px);}
.gfp-filters{display:flex!important;gap:.4rem;flex-wrap:wrap!important;padding:.6rem 1.1rem;border-bottom:1px solid var(--bd);background:#F9FAFB;align-items:center;}
.gfp-filter{display:inline-flex!important;align-items:center;gap:.3rem;padding:.28rem .75rem;border-radius:100px;border:1.5px solid #E5E7EB;background:#fff;font-size:.75rem;font-weight:600;cursor:pointer;color:#6B7280;font-family:inherit;transition:all .15s;white-space:nowrap;}
.gfp-filter input[type=radio]{accent-color:var(--act-c,#6D28D9);width:13px;height:13px;flex-shrink:0;cursor:pointer;}
.gfp-filter:hover,.gfp-filter.on{border-color:var(--act-c,#6D28D9);background:#EDE9FE;color:var(--act-c,#6D28D9);}
.gfp-grid{display:grid!important;grid-template-columns:repeat(6,1fr)!important;width:100%;}
.gfp-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:.25rem;padding:.75rem .4rem .6rem;border-right:1px solid #F3F4F6;border-bottom:1px solid #F3F4F6;cursor:pointer;transition:background .12s;min-height:86px;text-align:center;box-sizing:border-box;}
.gfp-card:hover{background:#F9FAFB;}
.gfp-card.on{background:var(--act-c,#6D28D9)!important;}
.gfp-card.on .gfp-preview,.gfp-card.on .gfp-name{color:#fff!important;}
.gfp-preview{font-size:1.55rem;line-height:1.2;color:#1F2937;word-break:break-all;display:block;}
.gfp-name{font-size:.6rem;color:#6B7280;font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;font-weight:500;line-height:1.3;display:block;margin-top:auto;padding:0 .2rem;}
@media(max-width:900px){.gfp-grid{grid-template-columns:repeat(4,1fr)!important;}}
@media(max-width:580px){.gfp-grid{grid-template-columns:repeat(3,1fr)!important;}.gta{font-size:1.8rem!important;min-height:130px!important;padding:1rem!important;}}
@media(max-width:380px){.gfp-grid{grid-template-columns:repeat(2,1fr)!important;}}