/* CoolTextFont v1.0.0 — visitor tool styles (namespaced .ctf-) */
.ctf {
  --bg: #f2f2f7; --panel: #ffffff; --panel2: #f6f6fa; --line: #e3e4ee;
  --ink: #23232e; --mut: #7c8095; --acc: #6758ff; --accInk: #ffffff; --accSoft: #efedff;
  --glow: 0 1px 3px rgba(30, 30, 60, .07);
  --green: #3bb273; --pink: #e05a8a;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
}
.ctf *, .ctf *::before, .ctf *::after { box-sizing: border-box; }
.ctf.ctf-dark {
  --bg: #161826; --panel: #1d2032; --panel2: #232741; --line: #2e3350;
  --ink: #e9e9ed; --mut: #8f93a8; --acc: #9184d9; --accInk: #161826; --accSoft: #252041;
  --glow: 0 0 16px rgba(145, 132, 217, .14);
}
.ctf button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ctf button:focus-visible, .ctf input:focus-visible, .ctf a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ctf input { font: inherit; color: var(--ink); }

/* ---------- pills ---------- */
.ctf-pill { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; box-shadow: var(--glow); white-space: nowrap; }

/* ---------- grid ---------- */
.ctf-grid { display: grid; grid-template-columns: 236px 1fr; gap: 18px; align-items: start; }
.ctf-grid.ctf-mini { grid-template-columns: 1fr; }
.ctf-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- rail ---------- */
.ctf-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ctf-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--glow); }
.ctf-lab { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.ctf-cats { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.ctf-cat { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; text-align: left; border-radius: 8px; padding: 7px 9px; font-size: 12px; color: var(--ink); width: 100%; }
.ctf-cat-ic { width: 18px; text-align: center; flex: none; }
.ctf-cat-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctf-cat-c { color: var(--mut); font-size: 11px; }
.ctf-cat.is-on { background: var(--accSoft); color: var(--acc); font-weight: 700; }
.ctf-cat.is-on .ctf-cat-c { color: var(--acc); }
.ctf-recents { display: flex; flex-direction: column; gap: 6px; }
.ctf-recent { flex: 0 0 auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 12px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctf-empty { color: var(--mut); font-size: 11px; }

/* ---------- ads ---------- */
.ctf-ad { border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ctf-ad-ph { border: 1.5px dashed var(--line); color: var(--mut); font-size: 10px; letter-spacing: .06em; background: var(--panel); }
.ctf-ad-live { background: var(--panel); }
.ctf-ad-inner { width: 100%; min-width: 250px; }
.ctf-ad-rail { min-height: 250px; }
.ctf-ad-leader, .ctf-ad-infeed, .ctf-ad-infeedm { margin: 0; }

/* ---------- composer ---------- */
.ctf-composer { display: flex; flex-direction: column; gap: 11px; z-index: 5; }
.ctf-inrow { display: flex; gap: 8px; align-items: center; }
.ctf-input { flex: 1; min-width: 0; background: var(--panel2); border: 1.5px solid var(--acc); border-radius: 10px; padding: 11px 14px; font-size: 15px; }
.ctf-input::placeholder { color: var(--mut); }
.ctf-iconbtn { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; min-width: 38px; min-height: 40px; padding: 6px 10px; font-size: 13px; flex: none; }
.ctf-kbtn { white-space: nowrap; }

/* unified panel */
.ctf-kb { display: flex; flex-direction: column; gap: 8px; }
.ctf-phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ctf-plist { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.ctf-plist .ctf-bchip { width: 100%; }
.ctf-plist .ctf-symchip { font-size: 16px; }
.ctf-key.is-on { border: 1.5px solid var(--acc); color: var(--ink); }
.ctf-kbtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ctf-tab { border-radius: 999px; padding: 5px 12px; font-size: 11px; background: var(--panel); border: 1px solid var(--line); color: var(--mut); white-space: nowrap; }
.ctf-tab.is-on { background: var(--acc); color: var(--accInk); border-color: var(--acc); font-weight: 600; }
.ctf-kbcats { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ctf-kbcats::-webkit-scrollbar { display: none; }
.ctf-kbcats .ctf-minichip { flex: 0 0 auto; }
.ctf-minichip { border-radius: 999px; padding: 3px 9px; font-size: 10px; background: var(--panel2); border: 1px solid var(--line); color: var(--mut); text-transform: capitalize; }
.ctf-minichip.is-on { background: var(--accSoft); color: var(--acc); border-color: var(--acc); font-weight: 600; }
.ctf-keys { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow-y: auto; }
.ctf-key { flex: 0 0 auto; min-width: 34px; min-height: 34px; padding: 4px 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.ctf-keys-wide .ctf-key { font-size: 12px; }

/* builder */
.ctf-builder { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line); padding-top: 11px; }
.ctf-bhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ctf-btog { font-size: 12px; font-weight: 600; text-align: left; padding: 2px 0; }
.ctf-bacts { display: flex; gap: 7px; }
.ctf-soft { background: var(--accSoft); color: var(--acc); border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 600; }
.ctf-ghost { background: none; border: 1px solid var(--acc); color: var(--acc); border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ctf-bcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ctf-blab { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin-bottom: 5px; }
.ctf-bopts { display: flex; flex-direction: column; gap: 4px; max-height: 118px; overflow-y: auto; }
.ctf-bopts.ctf-ctr { flex-direction: row; flex-wrap: wrap; }
.ctf-bchip { flex: 0 0 auto; text-align: left; border-radius: 7px; padding: 5px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--panel); border: 1px solid var(--line); color: var(--mut); }
.ctf-sm .ctf-bchip { font-size: 11px; }
.ctf-ctr .ctf-bchip { text-align: center; min-width: 30px; }
.ctf-bchip.is-on { border: 1.5px solid var(--acc); color: var(--ink); }
.ctf-combos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctf-combos-l { font-size: 10.5px; color: var(--mut); }
.ctf-combo { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; }

/* result bar */
.ctf-result { display: flex; align-items: center; gap: 9px; background: var(--accSoft); border: 1.5px solid var(--acc); border-radius: 12px; padding: 9px 12px; }
.ctf-result-out { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctf-primary { background: var(--acc); color: var(--accInk); border-radius: 9px; padding: 9px 20px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ctf-primary.is-copied { background: var(--green); color: #fff; }

/* bio preview */
.ctf-bio { display: flex; flex-direction: column; gap: 9px; }
.ctf-biocard { position: relative; display: flex; gap: 11px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ctf-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #6758ff, #e05a8a 70%, #ffb86b); }
.ctf-biotext { min-width: 0; flex: 1; }
.ctf-biohandle { font-weight: 700; font-size: 13px; }
.ctf-bioline { font-size: 14.5px; margin: 3px 0; word-break: break-word; }
.ctf-biometa { color: var(--mut); font-size: 10.5px; }
.ctf-biotag { position: absolute; top: 8px; right: 10px; font-size: 8.5px; letter-spacing: .08em; color: var(--mut); }
.ctf-bionote { font-size: 10.5px; color: var(--mut); }

/* ---------- toolbar + list ---------- */
.ctf-toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ctf-search { flex: 1; min-width: 160px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 12px; box-shadow: var(--glow); }
.ctf-count { color: var(--mut); font-size: 11.5px; white-space: nowrap; }
.ctf-list { display: flex; flex-direction: column; gap: 9px; }
.ctf-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; box-shadow: var(--glow); min-height: 64px; }
.ctf-row.is-copied { border-color: var(--acc); }
.ctf-row-main { flex: 1; min-width: 0; }
.ctf-out { font-size: 16px; word-break: break-word; overflow-wrap: anywhere; }
.ctf-meta { font-size: 10px; color: var(--mut); margin-top: 3px; }
.ctf-row-side { display: flex; align-items: center; gap: 7px; flex: none; }
.ctf-heart { font-size: 16px; padding: 4px; color: var(--mut); }
.ctf-heart.is-on { color: var(--pink); }
.ctf-copy { border-radius: 8px; padding: 8px 15px; font-size: 12px; font-weight: 600; border: 1px solid var(--acc); color: var(--acc); white-space: nowrap; }
.ctf-copy.is-copied { background: var(--green); border-color: var(--green); color: #fff; }
.ctf-protag { background: var(--accSoft); color: var(--acc); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; border-radius: 5px; padding: 3px 6px; }
.ctf-foot { text-align: center; color: var(--mut); font-size: 11.5px; padding: 10px 0 4px; cursor: pointer; }
.ctf-minilink { display: block; text-align: center; color: var(--acc); font-weight: 600; font-size: 12.5px; padding: 10px; text-decoration: none; }

/* pro banner */
.ctf-probanner { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1.5px solid var(--acc); border-radius: 12px; padding: 12px 14px; box-shadow: var(--glow); }
.ctf-protext { flex: 1; font-size: 12.5px; }

/* JS sticky scaffolding */
.ctf-stickwrap { min-width: 0; }
.ctf-ph { height: 0; }

/* manifest helper (kept for CSS optimizers; never visible) */
.ctf-manifest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }

/* ---------- mobile sticky group (chips + input) ---------- */
.ctf-msticky { display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.ctf-msticky.is-fixed { padding: 8px 10px; box-shadow: 0 4px 14px rgba(30, 30, 60, .12); }
.ctf-incard { padding: 9px; }

/* ---------- mobile ---------- */
.ctf-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ctf-chips::-webkit-scrollbar { display: none; }
.ctf-chip { flex: none; border-radius: 999px; padding: 7px 13px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--glow); white-space: nowrap; }
.ctf-chip.is-on { background: var(--accSoft); border-color: var(--acc); color: var(--acc); font-weight: 700; }
.ctf-bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px; background: var(--panel); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(30, 30, 60, .12); }
.ctf-bbar-l { flex: 1; min-width: 0; }
.ctf-bbar-lab { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--mut); }
.ctf-bbar-out { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767px) {
  .ctf { padding: 10px; font-size: 12.5px; }
  .ctf-grid { grid-template-columns: 1fr; gap: 12px; }
  .ctf-main { gap: 12px; }
  .ctf-bcols { grid-template-columns: repeat(2, 1fr); }
  .ctf-row { align-items: stretch; padding: 0; overflow: hidden; }
  .ctf-row-main { padding: 11px 0 11px 13px; }
  .ctf-out { font-size: 18px; }
  .ctf-meta { order: -1; margin: 0 0 4px; }
  .ctf-row-main { display: flex; flex-direction: column; }
  .ctf-row-side { flex-direction: column; justify-content: center; gap: 4px; padding: 6px; }
  .ctf-copy { min-height: 44px; min-width: 74px; align-self: stretch; display: flex; align-items: center; justify-content: center; flex: 1; }
  .ctf-heart { min-height: 32px; }
  .ctf-has-bbar { padding-bottom: 84px; }
  .ctf-iconbtn { min-height: 44px; min-width: 44px; }
  .ctf-result { flex-wrap: wrap; }
  .ctf-result-out { flex-basis: 100%; white-space: normal; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ctf-grid { grid-template-columns: 200px 1fr; gap: 14px; }
}

/* ---------- JS-sticky fixed states ---------- */
.ctf-rail.is-fixed { max-height: calc(100vh - 28px); overflow-y: auto; }
.ctf-composer.is-fixed { box-shadow: 0 6px 20px rgba(30, 30, 60, .12); }

/* ---------- width modes ---------- */
/* Full-bleed (default): CSS pre-bleed for first paint; JS refines to exact px.
   No 100vw width (it can exceed the real viewport on mobile); negative side
   margins stretch the block instead, and overflow-x clip stops any child from
   widening the page. Fixed-position children are unaffected (no transforms). */
.ctf-w-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow-x: clip; }
.ctf-w-full .ctf { max-width: none; border-radius: 0; padding: 16px clamp(14px, 3vw, 36px); }
.ctf-w-boxed .ctf { max-width: 1180px; }

/* ---------- server shell skeleton (pre-JS) ---------- */
.ctf-shellrows { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.ctf-skel { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; min-height: 64px; box-shadow: var(--glow); animation: ctfPulse 1.1s ease-in-out infinite alternate; }
@keyframes ctfPulse { from { opacity: .55; } to { opacity: 1; } }