/* ============================================================
   TikTok Hashtag Generator: [tikfuel_hashtag_generator] and the
   page-hashtag-generator.php template around it.

   The machine on the right is the animation: a dark screen that
   types a caption, fires a beam and decodes five tags into five
   slots. Everything that moves animates transform or opacity only,
   and stops under prefers-reduced-motion.

   Form controls are styled at 0-3-0 or higher on purpose: main.css
   styles bare input[type="text"] at 0-1-1, width 100% included.
   ============================================================ */

.ht-page .page-head { text-align: center; padding-bottom: .5rem; }
.ht-page .page-head .crumbs ol { justify-content: center; }
.ht-page .page-title { max-width: 18ch; margin-inline: auto; }
.ht-lede { max-width: 44rem; margin: .9rem auto 0; font-size: 1.12rem; color: var(--ink-2); }
.ht-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ht-badges li {
  padding: .3rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--violet);
  background: var(--violet-soft); border: 1px solid var(--hairline);
}

.ht { margin: 1.6rem 0 0; }

.ht-hero {
  display: grid; gap: 1.4rem;
  align-items: stretch;
}
@media (min-width: 960px) {
  .ht-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
}

/* ---------------- the form card ---------------- */
.ht-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--sh-md);
}

.ht-modes {
  display: inline-flex; gap: .25rem; padding: .3rem;
  margin: 0 0 1.25rem;
  background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 999px;
}
.ht .ht-modes .ht-mode {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border: 0; border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--ink-2); background: transparent; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.ht .ht-modes .ht-mode:hover { color: var(--violet); }
.ht .ht-modes .ht-mode.is-on { color: #fff; background: var(--grad); box-shadow: 0 6px 16px -6px #E530B588; }
.ht-mode-ico {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem;
  border-radius: 999px; font-size: .78rem; font-weight: 800;
  background: rgba(155, 35, 212, .12); color: inherit;
}
.ht-mode.is-on .ht-mode-ico { background: rgba(255, 255, 255, .22); }

.ht-label { display: block; margin: 0 0 .5rem; font-weight: 750; font-size: 1.02rem; color: var(--ink); }

.ht-field {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .35rem .35rem 1.1rem;
  background: var(--surface);
  border: 2px solid var(--hairline-2); border-radius: 999px;
  transition: border-color .18s, box-shadow .18s;
}
.ht-field:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }

.ht .ht-field .ht-input,
.ht .ht-field input[type="text"].ht-input {
  flex: 1 1 auto; min-width: 0; width: auto;
  margin: 0; padding: .7rem 0;
  border: 0; border-radius: 0; box-shadow: none; outline: 0;
  background: transparent; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 1.02rem; color: var(--ink);
}
.ht .ht-field .ht-input:focus { border: 0; box-shadow: none; }

.ht .ht-field .ht-go {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.35rem; border: 0; border-radius: 999px;
  font: inherit; font-weight: 800; font-size: .98rem; color: #fff;
  background: var(--grad); box-shadow: var(--sh-glow); cursor: pointer;
  transition: transform .16s, filter .16s;
}
.ht .ht-field .ht-go:hover { transform: translateY(-1px); filter: saturate(1.1); }
.ht .ht-field .ht-go:disabled { cursor: progress; filter: saturate(.8); transform: none; }
.ht-go-spin {
  display: none; width: 1rem; height: 1rem; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: ht-spin .7s linear infinite;
}
.ht.is-busy .ht-go-spin { display: inline-block; }

@media (max-width: 560px) {
  .ht-modes { display: flex; }
  .ht .ht-modes .ht-mode { flex: 1 1 0; justify-content: center; white-space: nowrap; }
  .ht-field { flex-wrap: wrap; padding: .5rem; border-radius: 18px; }
  .ht .ht-field .ht-input { padding: .55rem .6rem; }
  .ht .ht-field .ht-go { width: 100%; justify-content: center; }
}

.ht-help { margin: .65rem 0 0; font-size: .88rem; color: var(--muted); }
.ht-examples { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .9rem 0 0; font-size: .85rem; color: var(--muted); }
.ht .ht-examples .ht-example {
  padding: .3rem .7rem; border: 1px solid var(--hairline-2); border-radius: 999px;
  font: inherit; font-size: .83rem; font-weight: 650; color: var(--ink-2);
  background: var(--paper-2); cursor: pointer; transition: border-color .16s, color .16s;
}
.ht .ht-examples .ht-example:hover { border-color: var(--violet); color: var(--violet); }
.ht.is-account .ht-examples { display: none; }

.ht-error {
  margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 12px;
  font-size: .9rem; font-weight: 600; color: var(--danger);
  background: #C02B3C12; border: 1px solid #C02B3C33;
}

.ht-points { margin: 1.4rem 0 0; padding: 1.1rem 0 0; list-style: none; border-top: 1px solid var(--hairline); }
.ht-points li { position: relative; padding: .22rem 0 .22rem 1.7rem; font-size: .93rem; color: var(--ink-2); }
.ht-points li::before {
  content: "#"; position: absolute; left: 0; top: .2rem;
  display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 6px;
  font-size: .72rem; font-weight: 800; color: #fff; background: var(--grad);
}

/* ---------------- the machine (animation) ---------------- */
.ht-machine {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: 25rem; padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 22px;
  background: radial-gradient(120% 90% at 85% 0%, #E530B555 0%, transparent 55%),
              radial-gradient(90% 80% at 0% 100%, #6d1b8f88 0%, transparent 60%),
              linear-gradient(155deg, #1E1233 0%, #2a1250 55%, #45136a 100%);
  box-shadow: 0 30px 70px -30px #9B23D4aa;
}

.ht-glow {
  position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #E530B566 0%, transparent 65%);
  animation: ht-breathe 4.5s ease-in-out infinite;
}
.ht-machine.is-working .ht-glow { animation-duration: 1.2s; }

.ht-orbit { position: absolute; inset: 0; z-index: -1; animation: ht-turn 40s linear infinite; }
.ht-machine.is-working .ht-orbit { animation-duration: 6s; }
.ht-orbit span {
  position: absolute; font-weight: 900; color: #ffffff1f; font-size: 2.6rem; line-height: 1;
}
.ht-orbit span:nth-child(1) { top: 8%;  left: 10%; font-size: 3.4rem; }
.ht-orbit span:nth-child(2) { top: 14%; right: 12%; }
.ht-orbit span:nth-child(3) { bottom: 10%; left: 16%; font-size: 2rem; }
.ht-orbit span:nth-child(4) { bottom: 16%; right: 8%; font-size: 3rem; }
.ht-orbit span:nth-child(5) { top: 48%; left: 3%; font-size: 1.6rem; }
.ht-orbit span:nth-child(6) { top: 42%; right: 3%; font-size: 1.8rem; }

.ht-screen {
  width: min(100%, 26rem);
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 18px;
  background: #ffffff10;
  border: 1px solid #ffffff26;
  box-shadow: inset 0 1px 0 #ffffff1a, 0 20px 40px -20px #000a;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ht-screen-top { display: flex; align-items: center; gap: .35rem; margin: 0 0 .8rem; }
.ht-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #ffffff33; }
.ht-dot:first-child { background: #E530B5; }
.ht-state {
  margin-left: auto; font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #FFD24A;
}
.ht-machine.is-working .ht-state { animation: ht-blink 1.1s ease-in-out infinite; }

.ht-caption {
  min-height: 3.1rem; margin: 0;
  font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: #fff;
}
.ht-caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -.18em;
  background: #FFD24A; opacity: 0;
}
.ht-machine.is-typing .ht-caret { opacity: 1; animation: ht-blink .8s steps(1) infinite; }

.ht-beam { position: relative; height: 2px; margin: .85rem 0; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.ht-beam span {
  position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, #FFD24A, #E530B5, transparent);
  transform: translateX(-120%);
}
.ht-machine.is-firing .ht-beam span { animation: ht-sweep .9s ease-out 1; }
.ht-machine.is-working .ht-beam span { animation: ht-sweep 1s ease-in-out infinite; }

.ht-slots { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: ht; }
.ht-slot {
  position: relative; counter-increment: ht;
  display: flex; align-items: center; gap: .6rem;
  min-height: 2.45rem; padding: .45rem .75rem .45rem .55rem;
  border-radius: 12px; border: 1px dashed #ffffff2e; background: #ffffff08;
  transition: background .25s, border-color .25s;
}
.ht-slot::before {
  content: counter(ht); flex: 0 0 auto;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 8px;
  font-size: .72rem; font-weight: 800; color: #ffffff80; background: #ffffff12;
  transition: background .25s, color .25s;
}
.ht-slot-tag {
  font-family: var(--mono); font-size: .95rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ht-slot.is-spin { border-style: solid; border-color: #ffffff1f; }
.ht-slot.is-spin .ht-slot-tag { color: #ffffff73; filter: blur(.4px); }
.ht-slot.is-on { border-style: solid; border-color: #ffffff38; background: #ffffff17; animation: ht-pop .45s cubic-bezier(.2, .9, .3, 1.25); }
.ht-slot.is-on::before { color: #1E1233; background: linear-gradient(135deg, #FFD24A, #E530B5); }

.ht-meter {
  margin: .8rem 0 0; text-align: right;
  font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #ffffff99;
}
.ht-meter-n { color: #FFD24A; font-size: .95rem; }

/* ---------------- results ---------------- */
.ht-result {
  margin: 1.6rem 0 0; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 22px;
  box-shadow: var(--sh-md);
  scroll-margin-top: 6rem;
}
.ht-result.is-in { animation: ht-rise .5s cubic-bezier(.2, .8, .3, 1); }

.ht-result-head { display: flex; align-items: center; gap: .9rem; }
.ht-who-img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--hairline); }
.ht-result-title { margin: 0; font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 800; }
.ht-result-src { margin: .25rem 0 0; font-size: .86rem; color: var(--muted); }

.ht-pick {
  margin: 1.2rem 0 0; padding: 1rem;
  border-radius: 16px; background: var(--paper-2); border: 1px solid var(--hairline);
}
.ht-picked { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.ht-empty { width: 6.5rem; height: 2.3rem; border-radius: 999px; border: 2px dashed var(--hairline-2); }
.ht-pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: .9rem 0 0; }
.ht .ht-pick .ht-copy {
  padding: .8rem 1.4rem; border: 0; border-radius: 999px;
  font: inherit; font-weight: 800; color: #fff; background: var(--grad);
  box-shadow: var(--sh-glow); cursor: pointer; transition: transform .16s;
}
.ht .ht-pick .ht-copy:hover { transform: translateY(-1px); }
.ht .ht-pick .ht-copy:disabled { opacity: .5; cursor: default; transform: none; }
.ht .ht-pick .ht-copy.is-done { background: var(--green); box-shadow: none; }
.ht-count { font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.ht-hint { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); }
.ht-hint.is-warn { color: var(--amber); font-weight: 700; }

.ht-groups { display: grid; gap: 1rem; margin: 1.2rem 0 0; }
@media (min-width: 900px) { .ht-groups { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.ht-group { padding: 1rem; border: 1px solid var(--hairline); border-radius: 16px; }
.ht-group-title { margin: 0; font-size: 1rem; font-weight: 800; }
.ht-group-sub { margin: .15rem 0 .7rem; font-size: .8rem; color: var(--muted); }
.ht-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.ht .ht-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .8rem; border: 1px solid var(--hairline-2); border-radius: 999px;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.ht .ht-chip:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }
.ht .ht-chip.is-on { color: var(--violet); background: var(--violet-soft); border-color: var(--violet); }
.ht .ht-chip.is-on::before { content: "\2713"; font-size: .8rem; }
.ht .ht-chip.is-picked { color: #fff; background: var(--grad); border-color: transparent; }
.ht .ht-chip.is-picked::after { content: "\00d7"; font-size: 1rem; line-height: 1; opacity: .8; }
.ht-chip-n { font-size: .72rem; font-weight: 800; color: var(--muted); }

.ht-tip { margin: 1.1rem 0 0; padding: .85rem 1rem; border-radius: 14px; background: #FFD24A1f; border: 1px solid #FFD24A66; color: var(--ink-2); font-size: .93rem; }
.ht-tip strong { color: var(--ink); }
.ht-skipped { margin: .9rem 0 0; font-size: .8rem; color: var(--muted); }

/* ---------------- the page copy under the tool ---------------- */
.ht-page .ht-copy-wrap { margin: 3rem auto 0; }
.ht-page .entry .ht-steps { display: grid; gap: .8rem; padding: 0; list-style: none; counter-reset: htstep; }
.ht-page .entry .ht-steps li {
  position: relative; counter-increment: htstep;
  padding: .9rem 1rem .9rem 3.4rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--hairline);
}
.ht-page .entry .ht-steps li::before {
  content: counter(htstep); position: absolute; left: 1rem; top: .9rem;
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 9px;
  font-weight: 800; font-size: .85rem; color: #fff; background: var(--grad);
}
.ht-page .entry .ht-mix { display: grid; gap: .8rem; padding: 0; list-style: none; }
@media (min-width: 720px) { .ht-page .entry .ht-mix { grid-template-columns: repeat(3, 1fr); } }
.ht-page .entry .ht-mix li { margin: 0; padding: 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline); }
.ht-page .entry .ht-mix strong { display: block; color: var(--violet); }
.ht-page .entry .ht-mix code { font-size: .85rem; }

.ht-page .entry .ht-cta {
  margin: 2.4rem 0; padding: 1.8rem 1.7rem; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #1E1233 0%, #6d1b8f 55%, #E530B5 125%);
  box-shadow: 0 22px 55px -22px rgba(155, 35, 212, .75);
}
.ht-cta p { margin: 0; }
.ht-cta .ht-cta-h { margin: 0 0 .5rem; font-size: clamp(1.25rem, 3vw, 1.55rem); font-weight: 800; line-height: 1.2; color: #fff; }
.ht-cta .ht-cta-text { color: rgba(255, 255, 255, .88); }
.ht-cta .ht-cta-go { margin-top: 1.1rem; }
.ht-cta .ht-cta-btn {
  display: inline-block; padding: .9rem 1.8rem; border-radius: 999px;
  font-weight: 800; color: #8b1a9c; background: #fff; text-decoration: none;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .45); transition: background .15s, color .15s, transform .15s;
}
.ht-cta .ht-cta-btn:hover { background: #FFD24A; color: #1E1233; transform: translateY(-2px); }

/* ---------------- motion ---------------- */
@keyframes ht-spin { to { transform: rotate(360deg); } }
@keyframes ht-turn { to { transform: rotate(360deg); } }
@keyframes ht-breathe { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes ht-blink { 50% { opacity: 0; } }
@keyframes ht-sweep { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
@keyframes ht-pop { 0% { transform: scale(.94); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ht-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ht-glow, .ht-orbit, .ht-go-spin, .ht-caret, .ht-beam span, .ht-slot.is-on, .ht-result.is-in, .ht-state { animation: none !important; }
}