/*
 * MetaHashtags 2: tool pages (generator, home sections, pricing, banned
 * checker, affiliate landing pages). Tokens and shared parts: main.css.
 *
 * Breakpoints: rows switch to the phone layout under 640px; "Your selection"
 * is a side panel from 960px and a bottom bar below.
 */

/* ======================================================================
   Generator: hero (before a search) and search band (after)
   ====================================================================== */
.gen-top { background: var(--bg); border-bottom: 1px solid var(--line); }
.gen-top-inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
.gen-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.gen-intro { display: flex; flex-direction: column; gap: 18px; }
.gen-title { font: 900 54px/1.05 var(--font-display); letter-spacing: -0.025em; max-width: 14ch; }
.gen-sub { font-size: 19px; color: var(--ink-2); max-width: 46ch; }
.gen-note { font-size: 14px; color: var(--ink-2); }
.gen-note b { color: var(--ink); }
.gen .notice { max-width: 620px; }

/* Search form */
.search { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; }
.search-field {
  position: relative; flex: 999 1 340px; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 6px 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 6px 18px -12px rgba(16, 33, 45, 0.3);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14, 140, 201, 0.16); }
.search.is-over .search-field { border-color: var(--blue); border-style: dashed; }
.search-hash { font: 900 22px/1 var(--font-display); color: var(--blue); }
.search-field.has-photo .search-hash { display: none; }
.search-field input[type="text"] {
  flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: 600 17px var(--font-body); color: var(--ink); box-shadow: none;
}
.search-field input[type="text"]:focus-visible { box-shadow: none; outline: none; }
.search-cam {
  position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--r); color: var(--ink-2); cursor: pointer;
}
.search-cam:hover { background: var(--chip); color: var(--ink); }
.search-cam:focus-within { outline: 2px solid var(--blue); outline-offset: 0; }
.search-cam.is-hint { background: var(--blue-wash); color: var(--link); }
.search-go { flex: 1 1 170px; height: 58px; border-radius: var(--r-md); font-size: 16px; }
.label-narrow { display: none; }
.photo-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 46%; padding: 3px 4px 3px 3px; border-radius: var(--r-sm); background: var(--chip); flex: none; }
.photo-thumb { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; }
.photo-name { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-x { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
.photo-x:hover { background: var(--surface); }
.gen .field-error, .gen .field-help { margin-top: -6px; }

/* Chips under the form */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.chips-label { margin-right: 2px; color: var(--muted); font-weight: 700; }
.chips-scroll { display: contents; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-weight: 700; text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.chip-outline { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.chip-outline:hover { border-color: var(--line-strong); color: var(--ink); }
.chip-recent { background: var(--chip); color: var(--ink-2); font-weight: 600; }
.chip-recent:hover { background: #e3e9ef; color: var(--ink); }
.chip-recent.is-current { background: var(--blue-wash); color: var(--link); font-weight: 700; }
.usage { margin-left: auto; color: var(--ink-2); }
.usage b { color: var(--ink); }
.chips-recent.no-recent .chips-label { display: none; }

/* Example result next to the hero (static) */
.example-card {
  flex: 1 1 360px; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 48px -28px rgba(16, 33, 45, 0.45); overflow: hidden;
}
.example-head { padding: 16px 18px 10px; display: flex; align-items: baseline; gap: 8px; }
.example-title { font: 800 18px var(--font-display); }
.example-meta { color: var(--muted); font-size: 13px; }
.example-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line-soft); }
.example-row.is-on { background: var(--sel); }
.fake-check { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 2px solid var(--line-strong); display: grid; place-items: center; color: #fff; }
.example-row.is-on .fake-check { background: var(--blue); border-color: var(--blue); }
.example-tag { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.example-row .meter { gap: 2px; }
.example-row .meter > span { width: 6px; height: 13px; border-radius: 2px; }
.example-count { width: 52px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.example-foot { padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; background: var(--sunk); }
.example-sel { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.example-copy { padding: 8px 14px; border-radius: var(--r); background: var(--blue); color: #fff; font-weight: 800; font-size: 13px; }

/* After a search: the white search band */
.gen.is-browsing .gen-top { background: var(--surface); }
.gen.is-browsing .gen-top-inner { padding-top: 20px; padding-bottom: 16px; gap: 12px; }
.gen.is-browsing .gen-main { gap: 12px; flex-basis: 100%; }
.gen.is-browsing .gen-intro, .gen.is-browsing .gen-note, .gen.is-browsing .chips-popular, .gen.is-browsing .example-card { display: none; }
.gen.is-browsing .search { max-width: none; }
.gen.is-browsing .search-field { flex-basis: 420px; height: 54px; background: var(--bg); box-shadow: none; }
.gen.is-browsing .search-field:focus-within { background: var(--surface); }
.gen.is-browsing .search-hash { font-size: 21px; }
.gen.is-browsing .search-go { height: 54px; }
.gen:not(.is-browsing) .chips-recent { display: none !important; }

@media (max-width: 959.98px) {
  .gen-top-inner { padding-top: 40px; padding-bottom: 36px; gap: 32px; }
  .gen-title { font-size: clamp(34px, 7vw, 48px); }
  .example-card { max-width: 520px; }
}
@media (max-width: 639.98px) {
  .gen-top-inner { padding-top: 28px; padding-bottom: 28px; gap: 28px; }
  .gen-main, .gen-intro { gap: 14px; }
  .gen-title { font-size: 34px; }
  .gen-sub { font-size: 17px; }
  .search { flex-wrap: nowrap; gap: 8px; }
  .search-field { flex: 1 1 auto; height: 52px; padding: 0 4px 0 12px; gap: 6px; }
  .search-hash { font-size: 19px; }
  .search-field input[type="text"] { font-size: 16px; }
  .search-cam { width: 40px; height: 40px; }
  .search-go { flex: none; height: 52px; padding: 0 16px; font-size: 15px; }
  .label-wide { display: none; }
  .label-narrow { display: inline; }
  .chips-popular { gap: 6px; font-size: 13px; }
  .example-card { flex-basis: 100%; }
  .gen.is-browsing .gen-top-inner { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .gen.is-browsing .gen-main { gap: 10px; }
  .gen.is-browsing .search-field { height: 48px; flex-basis: auto; }
  .gen.is-browsing .search-hash { font-size: 19px; }
  .gen.is-browsing .search-go { height: 48px; }
  .chips-recent { flex-wrap: nowrap; overflow-x: auto; gap: 6px; font-size: 13px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .chips-recent::-webkit-scrollbar { display: none; }
  .chips-recent .chips-label, .chips-recent .usage { display: none; }
  .chip-recent { padding: 5px 11px; flex: none; max-width: 70vw; }
}

/* ======================================================================
   Results
   ====================================================================== */
.gen-results { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; padding-bottom: 40px; }
@media (min-width: 960px) {
  .gen-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
}
.results-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.results-head { padding: 20px 22px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.results-title { font: 800 24px/1.2 var(--font-display); letter-spacing: -0.01em; outline: none; overflow-wrap: anywhere; }
.results-meta { color: var(--ink-2); font-size: 14px; }
.meta-narrow { display: none; }
.results-tools { padding: 0 22px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line-chip); background: var(--surface); color: var(--ink);
  font: 700 13px var(--font-body); cursor: pointer; white-space: nowrap;
}
.filter:hover { border-color: var(--line-strong); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-count { opacity: 0.7; }
.seg { margin-left: auto; display: flex; gap: 4px; padding: 3px; background: var(--chip); border-radius: var(--r); }
.seg button {
  padding: 6px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink);
  font: 700 13px var(--font-body); cursor: pointer; white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 33, 45, 0.12); }

/* Rows: checkbox | hashtag (+ explore, Instagram) | posts | size */
.rows-head, .row, .locked-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px 170px; align-items: center; gap: 8px; padding: 12px 22px; }
.rows-head-all { display: none; }
/* Narrow desktop (the selection panel takes its column): tighter columns, so long hashtags keep room. */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .gen-results { grid-template-columns: minmax(0, 1fr) 320px; }
  .rows-head, .row, .locked-row { grid-template-columns: 34px minmax(0, 1fr) 104px 124px; padding-inline: 18px; }
  .results-head, .results-tools { padding-inline: 18px; }
}
.rows-head {
  padding-block: 10px; background: var(--sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--line-soft); background: var(--surface); cursor: pointer; }
.row:hover { background: #fafcfe; }
.row.is-on { background: var(--sel); }
.row.is-banned { cursor: default; }
.row-tag { display: flex; align-items: center; gap: 4px; min-width: 0; }
.row-name { font-weight: 800; font-size: 17px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 4px; }
.row.is-banned .row-name { cursor: default; color: var(--ink-2); }
.row-icon {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer;
}
.row-icon:hover { background: var(--chip); color: var(--ink); }
.row-posts { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-posts span { font-weight: 600; color: var(--muted); font-size: 13px; }
.row-posts-none { color: var(--muted); }
.row-size { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tier { font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* Loading */
.row-skeleton { cursor: default; }
.sk { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--chip) 25%, #f6f9fb 50%, var(--chip) 75%); background-size: 200% 100%; animation: mh-shimmer 1.2s linear infinite; }
.sk-box { width: 20px; height: 20px; border-radius: 5px; }
.sk-tag { width: 55%; height: 18px; }
.sk-num { width: 64px; }
.sk-size { width: 110px; }
@keyframes mh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty, error */
.rows-state { padding: 22px; }
.state-line { color: var(--ink-2); }
.state-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0; }
.state-box h3 { font-size: 20px; }
.state-box p { color: var(--ink-2); }
.state-box .btn { margin-top: 6px; }

/* "N more hashtags found": blurred rows behind the upgrade card */
.locked { display: grid; }
.locked > * { grid-area: 1 / 1; }
.locked-rows { filter: blur(4px); opacity: 0.55; pointer-events: none; user-select: none; }
.locked-row { padding-block: 14px; border-bottom: 1px solid var(--line-soft); }
.locked-row:last-child { border-bottom: 0; }
.locked-name { font-weight: 800; font-size: 17px; }
.fake-box { width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 5px; }
.locked-over { display: grid; place-items: center; padding: 16px; }
.locked-card {
  background: var(--surface); border: 1px solid var(--orange-line); border-radius: 14px; box-shadow: var(--shadow-pop);
  padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; max-width: 640px;
}
.locked-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.locked-title { font: 800 20px/1.25 var(--font-display); }
.locked-like { color: var(--ink-2); font-size: 14px; }
.locked-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.locked-cta { padding: 11px 18px; min-height: 44px; }
.locked-alt { font-size: 13px; font-weight: 700; color: var(--teal-link); }
.locked-alt:hover { color: var(--teal-ink); }
.locked-alt-text { font-size: 13px; font-weight: 600; color: var(--ink-2); max-width: 260px; }

/* Phones: the title and filters sit on the page, the rows in their own card */
@media (max-width: 639.98px) {
  .gen-results { padding-top: 0; gap: 16px; padding-bottom: 24px; }
  .results-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .results-head { padding: 14px 0 8px; gap: 2px 8px; }
  .results-title { font-size: 20px; }
  .title-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .results-meta { font-size: 13px; }
  .meta-wide { display: none; }
  .meta-narrow { display: inline; }
  .results-tools { padding: 0 0 10px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
  .seg { margin-left: 0; align-self: flex-start; }
  .rows-card { margin-inline: -4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .rows-head { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 10px 14px; border-top: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-2); }
  .rows-head > span { display: none; }
  .rows-head-all { display: block; cursor: pointer; }
  .rows-head .check { width: 22px; height: 22px; }
  .rows-head .check:checked::after { left: 6px; top: 2px; }
  .row {
    grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "check tag posts" "check size posts";
    column-gap: 12px; row-gap: 0; padding: 12px 14px;
  }
  .row-check { grid-area: check; width: 22px; height: 22px; }
  .row-check:checked::after { left: 6px; top: 2px; }
  .row-tag { grid-area: tag; }
  .row-name { font-size: 16px; }
  .row-ig { display: none; }
  .row-explore { width: 30px; height: 30px; margin-block: -6px; }
  .row-posts { grid-area: posts; text-align: right; }
  .row-posts span { display: block; font-size: 11px; line-height: 1.2; }
  .row-size { grid-area: size; gap: 8px; }
  .row-size .meter { gap: 2px; }
  .row-size .meter > span { width: 6px; height: 12px; border-radius: 2px; }
  .tier { font-size: 12px; }
  .row-size .label-banned { padding: 1px 8px; font-size: 12px; }
  .row-skeleton { grid-template-areas: "check tag posts" "check size posts"; row-gap: 6px; }
  .row-skeleton .sk-box { grid-area: check; }
  .row-skeleton .sk-tag { grid-area: tag; }
  .row-skeleton .sk-num { grid-area: posts; width: 44px; }
  .row-skeleton .sk-size { grid-area: size; width: 80px; height: 10px; }
  .rows-state { padding: 16px 14px; }
  .locked-rows { display: none; }
  .locked-over { padding: 0; }
  .locked-card { max-width: none; width: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--orange-soft); padding: 16px 14px; flex-direction: column; align-items: stretch; gap: 8px; }
  .locked-text { flex: none; gap: 8px; }
  .locked-title { font-size: 18px; }
  .locked-like { font-size: 13px; }
  .locked-actions { align-items: stretch; gap: 8px; }
  .locked-cta { width: 100%; padding: 12px 16px; }
  .locked-alt, .locked-alt-text { text-align: center; max-width: none; }
}

/* ======================================================================
   Your selection: side panel (960px and up)
   ====================================================================== */
.sel-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 960px) { .sel-col { position: sticky; top: 88px; } }
.selpanel {
  display: none; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-panel);
}
@media (min-width: 960px) { .selpanel { display: flex; } }
.selpanel-head { padding: 18px 20px 12px; display: flex; align-items: center; gap: 10px; }
.selpanel-title { font: 800 19px/1.2 var(--font-display); }
.selpanel-head .btn-text { margin-left: auto; }
.selchips { padding: 0 20px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.sel-empty { color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chip-sel { gap: 4px; padding: 4px 6px 4px 11px; background: var(--teal-wash); color: var(--teal-ink); font-size: 14px; }
.chip-x { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--teal-ink); cursor: pointer; }
.chip-x:hover { background: rgba(11, 77, 62, 0.1); }
.paste { margin: 14px 20px 0; padding: 12px 14px; background: var(--bg); border: 1px dashed var(--line-strong); border-radius: var(--r); }
.paste-label { margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.paste-text { white-space: pre-line; font-weight: 600; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.dots-row { margin: 12px 20px 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.dots-row input { width: 18px; height: 18px; margin: 0; flex: none; }
.selpanel-actions { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.btn-copy { min-height: 48px; border-radius: var(--r-md); font-size: 16px; }
.btn-copy.is-done, .selbar-copy.is-done { background: var(--teal-link); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grid-2 .btn { min-height: 44px; border-radius: var(--r-md); }
.sel-note { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* Saved sets (logged-in) */
.sets-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.sets-card summary { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; list-style: none; font: 800 17px var(--font-display); }
.sets-card summary::-webkit-details-marker { display: none; }
.sets-card summary .icon { margin-left: auto; color: var(--ink-2); transition: transform 0.15s; }
.sets-card[open] summary .icon { transform: rotate(180deg); }
.sets-count { padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font: 800 12px/1.5 var(--font-body); }
.sets-list { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-direction: column; }
.set-row { display: flex; align-items: center; gap: 4px; padding: 8px; border-top: 1px solid var(--line-soft); }
.set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-tags { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-row .icon-btn { background: transparent; }

/* ======================================================================
   Your selection: bottom bar (under 960px)
   ====================================================================== */
.selbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(16, 33, 45, 0.45);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
@media (min-width: 960px) { .selbar { display: none !important; } }
.selbar-body { display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin: 0 auto 10px; max-height: 50vh; overflow-y: auto; }
.selbar-body .chip-sel { font-size: 13px; padding: 2px 4px 2px 10px; }
.selbar-body .dots-row { margin: 0; font-size: 13px; }
.selbar-head { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.selbar-head .btn-text { margin-left: auto; }
.selbar-body .grid-2 .btn { min-height: 42px; border-radius: var(--r); }
.selbar-row { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto; }
.selbar-toggle {
  flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font: 800 15px var(--font-body); color: var(--ink); text-align: left;
}
.selbar-toggle .icon { transform: rotate(180deg); transition: transform 0.15s; }
.selbar.is-open .selbar-toggle .icon { transform: none; }
.selbar-copy { min-height: 46px; padding: 0 20px; border-radius: var(--r-md); }
@media (max-width: 959.98px) {
  body.has-selbar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.has-selbar .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* ======================================================================
   Home page below the generator
   ====================================================================== */
.home-below { background: var(--surface); }
.page-below { padding-bottom: 8px; }
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.tile { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--surface); }
.tile h3 { font-size: 19px; }
.tile p { color: var(--ink-2); }
.strip { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-inner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.strip-text { flex: 999 1 420px; min-width: 0; }
.strip-text h2 { margin-bottom: 4px; font-size: 24px; }
.strip-text p { color: var(--ink-2); }
.home-below .faq-item { background: var(--surface); }

/* ======================================================================
   Pricing
   ====================================================================== */
.pricing-top { background: var(--bg); border-bottom: 1px solid var(--line); }
.pricing-head { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 56px; padding-bottom: 28px; text-align: center; }
.pricing-head .pill-label { align-self: center; }
.pricing-head .page-title { max-width: 22ch; }
.pricing-head .page-lede { text-wrap: balance; }
@media (max-width: 639.98px) { .pricing-head { padding-top: 32px; padding-bottom: 20px; } }
.pricing-head .billing { margin: 6px 0 0; align-self: center; }
.billing button { padding: 8px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
/* The two plans and the comparison table share one column, centred under the heading */
.pricing-body { max-width: 928px; }
.plan-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 32px; padding-bottom: 32px; }
@media (min-width: 700px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; } }
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.plan-card.is-pro { border: 2px solid var(--orange); box-shadow: var(--shadow-panel); }
.plan-name { display: flex; align-items: center; gap: 8px; font: 800 20px var(--font-display); }
.plan-best { position: absolute; top: -12px; right: 18px; padding: 3px 10px; border-radius: 999px; background: var(--orange); color: var(--orange-dark); font: 800 12px/1.5 var(--font-body); letter-spacing: 0.02em; }
.plan-price { font: 900 40px/1 var(--font-display); letter-spacing: -0.02em; }
.plan-price small { font: 600 15px var(--font-body); color: var(--ink-2); letter-spacing: 0; }
.plan-note { margin-top: -6px; font-size: 14px; color: var(--ink-2); min-height: 21px; }
.plan-card .ticks { flex: 1; font-size: 15px; }
.plan-card .btn { width: 100%; }
.plan-alt { font-size: 13px; font-weight: 700; text-align: center; }
.plan-alt button { font-size: 13px; }
.plan-card .is-current { background: var(--chip); color: var(--ink-2); pointer-events: none; }
.guarantee { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; margin-bottom: 48px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 15px; }
.guarantee .icon { color: var(--teal-link); margin-top: 2px; }
.guarantee b { color: var(--ink); }

/* Comparison table: fits a 390px screen (no sideways scroll) */
.compare-card { padding: 0; overflow: hidden; }
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.compare caption { text-align: left; padding: 20px 22px 12px; font: 800 22px var(--font-display); color: var(--ink); }
.compare th, .compare td { padding: 12px 14px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.compare thead th { background: var(--sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.compare thead th:last-child { color: var(--orange-ink); background: var(--orange-wash); }
.compare tbody th { font-weight: 700; color: var(--ink); width: 40%; }
.compare td { color: var(--ink-2); font-weight: 600; }
.compare td:last-child { color: var(--ink); font-weight: 800; background: var(--orange-soft); }
.compare .yes .icon { color: var(--teal-link); }
@media (max-width: 639.98px) {
  .compare { font-size: 13px; }
  .compare caption { padding: 16px 14px 10px; font-size: 19px; }
  .compare th, .compare td { padding: 10px 6px; overflow-wrap: anywhere; }
  .compare th:first-child, .compare td:first-child { padding-left: 14px; }
  .compare thead th { font-size: 11px; letter-spacing: 0.02em; color: var(--ink-2); }
  .compare tbody th { width: 38%; }
}

/* ======================================================================
   Banned checker
   ====================================================================== */
.tool-top { background: var(--bg); border-bottom: 1px solid var(--line); }
.tool-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 56px; padding-bottom: 40px; }
@media (max-width: 639.98px) { .tool-head { padding-top: 28px; padding-bottom: 28px; } }
.checker { width: 100%; max-width: 820px; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.checker-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-panel); }
.checker textarea { min-height: 128px; background: var(--bg); border-radius: var(--r-md); font-weight: 600; }
.checker textarea:focus-visible { background: var(--surface); }
.checker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.checker-actions .btn { min-height: 50px; padding-inline: 22px; border-radius: var(--r-md); font-size: 16px; }
.checker-note { font-size: 14px; color: var(--ink-2); }
.ban-results { width: 100%; max-width: 820px; }
.ban-card { padding: 0; overflow: hidden; }
.ban-head { padding: 18px 20px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ban-head h2 { font-size: 21px; outline: none; }
.ban-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ban-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line-soft); }
.ban-row:last-child { border-bottom: 0; }
.ban-tag { flex: 1; min-width: 0; font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ban-row.is-banned .ban-tag { color: var(--red-ink); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ban-count { color: var(--ink-2); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ban-foot { padding: 14px 20px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--sunk); border-top: 1px solid var(--line); }
.ban-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 20px; background: var(--teal-wash); color: var(--teal-ink); font-weight: 700; font-size: 14px; }
.banned-index { max-width: 760px; margin: 32px auto 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.banned-index summary { padding: 16px 20px; cursor: pointer; font: 800 18px var(--font-display); }
.banned-index[open] summary { border-bottom: 1px solid var(--line); }
.letter-group { padding: 14px 20px 4px; }
.letter-group h3 { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.tag-cloud { list-style: none; margin: 0; padding: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud li { max-width: 100%; padding: 3px 10px; border-radius: 999px; background: var(--red-wash); color: var(--red-ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }

/* ======================================================================
   Affiliate pages
   ====================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.perks li { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-weight: 700; }
.perks .icon { color: var(--teal-link); }
.affiliate-terms { margin-top: 32px; }