.czftg{--cz-primary:#6d4aff;--cz-cols:3;font-family:inherit;max-width:1200px;margin:24px auto;color:#171717}.czftg *{box-sizing:border-box}.czftg-head{background:#fff;border:1px solid #e8e8ec;border-radius:18px;padding:24px;margin-bottom:18px;box-shadow:0 8px 30px rgba(0,0,0,.05)}.czftg-badge{display:inline-block;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--cz-primary) 10%,white);color:var(--cz-primary);font-size:12px;font-weight:700;text-transform:uppercase}.czftg h2{font-size:28px;margin:10px 0 5px}.czftg-head p{margin:0 0 18px;color:#666}.czftg-input-wrap{position:relative}.czftg-input{width:100%;min-height:88px;resize:vertical;border:2px solid #e5e5ea;border-radius:14px;padding:16px 60px 16px 16px;font:inherit;font-size:18px;outline:none}.czftg-input:focus{border-color:var(--cz-primary)}.czftg-count{position:absolute;right:12px;bottom:10px;color:#888;font-size:12px}.czftg-tools{display:flex;gap:10px;margin-top:12px}.czftg-search{flex:1;min-width:0;border:1px solid #ddd;border-radius:10px;padding:11px 13px}.czftg-fav-filter,.czftg-more{border:1px solid #ddd;background:#fff;border-radius:10px;padding:10px 15px;cursor:pointer}.czftg-fav-filter.active{border-color:var(--cz-primary);color:var(--cz-primary)}.czftg-grid{display:grid;grid-template-columns:repeat(var(--cz-cols),minmax(0,1fr));gap:12px}.czftg-card{background:#fff;border:1px solid #e9e9ed;border-radius:14px;padding:14px;min-width:0;box-shadow:0 3px 14px rgba(0,0,0,.035)}.czftg-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.czftg-name{font-size:12px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.czftg-heart{border:0;background:none;cursor:pointer;font-size:20px;color:#999}.czftg-heart.active{color:var(--cz-primary)}.czftg-output{font-size:20px;line-height:1.45;min-height:64px;padding:12px 0;overflow-wrap:anywhere}.czftg-copy{width:100%;border:0;border-radius:9px;padding:10px;background:color-mix(in srgb,var(--cz-primary) 10%,white);color:var(--cz-primary);font-weight:700;cursor:pointer}.czftg-copy:hover,.czftg-more:hover{filter:brightness(.97)}.czftg-footer{text-align:center;padding:24px 0}.czftg-progress{font-size:13px;color:#777;margin-bottom:10px}.czftg-more{background:var(--cz-primary);border-color:var(--cz-primary);color:#fff;min-width:190px;font-weight:700}.czftg-empty{text-align:center;padding:30px;color:#777}.czftg-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 18px;border-radius:999px;z-index:999999;font-size:14px}@media(max-width:900px){.czftg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.czftg{margin:14px auto}.czftg-head{padding:16px;border-radius:14px}.czftg h2{font-size:23px}.czftg-grid{grid-template-columns:1fr}.czftg-tools{flex-direction:column}.czftg-output{font-size:19px}}

/* v3.1 — mobile app-like experience */
.czftg-search:focus,.czftg-fav-filter:focus-visible,.czftg-copy:focus-visible,.czftg-more:focus-visible{outline:3px solid color-mix(in srgb,var(--cz-primary) 22%,transparent);outline-offset:2px}
@media(max-width:600px){
 body:has(.czftg){-webkit-tap-highlight-color:transparent}
 .czftg{width:100%;max-width:none;margin:0 auto;padding:0 10px 18px;background:#f6f7fb;border-radius:0;min-height:70vh}
 .czftg-head{position:sticky;top:0;z-index:30;margin:0 -10px 10px;padding:12px 12px 10px;border:0;border-bottom:1px solid #ececf2;border-radius:0;box-shadow:0 5px 18px rgba(17,24,39,.06);background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 .czftg-badge{font-size:10px;padding:4px 8px}.czftg h2{font-size:20px;line-height:1.15;margin:7px 0 2px}.czftg-head>p{font-size:12px;line-height:1.35;margin:0 0 9px;color:#73737d}
 .czftg-input{min-height:56px;max-height:90px;border-width:1px;border-radius:13px;padding:11px 48px 11px 12px;font-size:16px;background:#f8f8fb;box-shadow:inset 0 1px 2px rgba(0,0,0,.02)}
 .czftg-count{right:10px;bottom:7px;font-size:10px}.czftg-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:7px}
 .czftg-search{height:42px;border-radius:12px;padding:0 12px;font-size:16px;background:#f8f8fb}.czftg-fav-filter{height:42px;border-radius:12px;padding:0 12px;font-size:13px;white-space:nowrap}
 .czftg-grid{grid-template-columns:1fr;gap:8px}.czftg-card{position:relative;border-radius:15px;padding:11px 12px;box-shadow:0 2px 9px rgba(17,24,39,.035);border-color:#e7e8ee}
 .czftg-card-top{min-height:22px}.czftg-name{font-size:11px;max-width:calc(100% - 34px)}.czftg-heart{width:34px;height:34px;display:grid;place-items:center;margin:-7px -6px -7px 0;font-size:21px}
 .czftg-output{font-size:18px;line-height:1.4;min-height:45px;padding:8px 0 9px}.czftg-copy{height:40px;border-radius:11px;font-size:14px;padding:0 12px;touch-action:manipulation}
 .czftg-footer{padding:16px 0 26px}.czftg-progress{font-size:11px}.czftg-more{width:100%;height:48px;border-radius:14px;font-size:15px;box-shadow:0 8px 20px color-mix(in srgb,var(--cz-primary) 20%,transparent);touch-action:manipulation}
 .czftg-empty{background:#fff;border:1px solid #e8e8ee;border-radius:15px;padding:24px 12px;margin-top:8px;font-size:14px}.czftg-toast{bottom:18px;max-width:calc(100% - 30px);font-size:13px}
}
@media(max-width:360px){.czftg-tools{grid-template-columns:1fr}.czftg-fav-filter{width:100%}}
/* v3.4 desktop compact app grid */
@media(min-width:901px){.czftg{--cz-cols:4;max-width:1320px}.czftg-card{padding:12px}.czftg-output{font-size:19px;min-height:72px;display:flex;align-items:center;justify-content:center;text-align:center}}
/* v4.0 configurable category bar + app controls */
.czftg-display-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px;padding-top:12px;border-top:1px solid #ececf2}.czftg-size{display:flex;align-items:center;gap:10px;color:var(--cz-primary);font-weight:700;font-size:14px;flex:1}.czftg-size input{width:min(320px,45vw);accent-color:var(--cz-primary)}.czftg-size-value{font-size:12px;color:#777;font-weight:500}.czftg-mix-label{display:flex;align-items:center;gap:9px;font-size:13px;color:#666;white-space:nowrap}.czftg-mix-label input{display:none}.czftg-mix-label span{width:42px;height:24px;background:#d9d9e3;border-radius:999px;position:relative;transition:.2s}.czftg-mix-label span:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}.czftg-mix-label input:checked+span{background:var(--cz-primary)}.czftg-mix-label input:checked+span:after{transform:translateX(18px)}
.czftg-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:4px 2px 10px;margin:0 0 10px;scroll-snap-type:x proximity}.czftg-tab{flex:0 0 auto;border:1px solid #dedee9;background:#fff;color:#171717;border-radius:999px;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;scroll-snap-align:start;transition:.18s}.czftg-tab:hover{border-color:color-mix(in srgb,var(--cz-primary) 45%,#dedee9)}.czftg-tab.active{background:var(--cz-primary);border-color:var(--cz-primary);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--cz-primary) 20%,transparent)}.czftg>.czftg-tools{margin:0 0 14px}.czftg-output{font-size:var(--cz-font-size,20px)}
@media(max-width:600px){.czftg{padding-bottom:84px}.czftg-head{position:relative;margin-bottom:6px;border-radius:0 0 18px 18px}.czftg-display-controls{gap:10px;margin-top:8px;padding-top:9px}.czftg-size{gap:6px;font-size:12px}.czftg-size input{width:100%;min-width:90px}.czftg-size-value{display:none}.czftg-mix-label{font-size:11px}.czftg-mix-label span{width:38px;height:22px}.czftg-mix-label span:after{width:16px;height:16px}.czftg-mix-label input:checked+span:after{transform:translateX(16px)}.czftg-tabs{position:sticky;top:0;z-index:35;margin:0 -10px 8px;padding:9px 10px;background:rgba(246,247,251,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #e7e8ef;scrollbar-width:none}.czftg-tabs::-webkit-scrollbar{display:none}.czftg-tab{padding:9px 14px;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.03)}.czftg>.czftg-tools{position:sticky;top:51px;z-index:34;margin:0 -2px 9px;padding:6px 2px;background:#f6f7fb}.czftg-grid{gap:9px}.czftg-card{background:#fff}.czftg-output{font-size:var(--cz-font-size,20px)}.czftg-more{position:sticky;bottom:10px;z-index:25}}


/* v4.9 — category bar visibility fix (desktop + mobile) */
.czftg .czftg-tabs-wrap{
 display:block !important;
 visibility:visible !important;
 opacity:1 !important;
 width:100% !important;
 max-width:100% !important;
 min-height:52px;
 overflow:hidden !important;
 position:relative !important;
 z-index:20;
 margin:0 0 10px !important;
 padding:0 !important;
}
.czftg .czftg-tabs{
 display:flex !important;
 visibility:visible !important;
 opacity:1 !important;
 flex-flow:row nowrap !important;
 align-items:center !important;
 gap:8px !important;
 width:100% !important;
 max-width:100% !important;
 min-height:50px !important;
 overflow-x:auto !important;
 overflow-y:hidden !important;
 -webkit-overflow-scrolling:touch;
 overscroll-behavior-x:contain;
 touch-action:pan-x;
 white-space:nowrap !important;
 padding:4px 2px 10px !important;
 margin:0 !important;
 position:relative !important;
 inset:auto !important;
 transform:none !important;
 clip:auto !important;
 clip-path:none !important;
 scrollbar-width:thin;
}
.czftg .czftg-tab{
 display:inline-flex !important;
 visibility:visible !important;
 opacity:1 !important;
 flex:0 0 auto !important;
 align-items:center !important;
 justify-content:center !important;
 width:auto !important;
 min-width:max-content !important;
 max-width:none !important;
 min-height:40px !important;
 margin:0 !important;
 white-space:nowrap !important;
 position:relative !important;
 transform:none !important;
}
@media(max-width:600px){
 .czftg .czftg-tabs-wrap{
  display:block !important;
  min-height:50px !important;
  margin:0 -10px 8px !important;
  width:calc(100% + 20px) !important;
  max-width:none !important;
  overflow:hidden !important;
  background:#f6f7fb !important;
  border-bottom:1px solid #e7e8ef;
 }
 .czftg .czftg-tabs{
  display:flex !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:21 !important;
  min-height:50px !important;
  padding:6px 10px 8px !important;
  background:#f6f7fb !important;
  scrollbar-width:none !important;
 }
 .czftg .czftg-tabs::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
 .czftg .czftg-tab{display:inline-flex !important;min-height:38px !important;padding:8px 14px !important;font-size:12px !important}
}


/* v5.0 — custom category scroll indicator; visible on mobile independently of native browser scrollbar */
.czftg .czftg-scrollbar{display:none;height:5px;margin:2px 10px 7px;background:#dedfe7;border-radius:999px;overflow:hidden;position:relative;pointer-events:none}
.czftg .czftg-scrollbar-thumb{height:100%;width:28%;min-width:34px;background:var(--cz-primary);border-radius:999px;transform:translateX(0);will-change:transform,width;transition:width .12s ease}
@media(max-width:600px){
 .czftg .czftg-tabs-wrap{padding-bottom:1px !important;overflow:hidden !important}
 .czftg .czftg-tabs{padding-bottom:6px !important;scrollbar-width:none !important;-ms-overflow-style:none !important}
 .czftg .czftg-tabs::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
 .czftg .czftg-scrollbar{display:block !important;visibility:visible !important;opacity:1 !important}
}