/* =============================================================================
   FFStylishName.in — stylesheet
   -----------------------------------------------------------------------------
   ONE token layer, TWO themes, and no !important on any colour. (The single
   remaining one is the reduced-motion reset at the bottom, which has to win
   over component animations by design.)

     :root                  the native brand theme — Deep Maroon & Luxury Gold.
                            It is the stylesheet's own default, so the maroon
                            chrome is painted in the very first frame: no
                            attribute, no script and no post-load repaint.
     [data-theme="dark"]    the optional Pitch Black stealth theme. <html> gets
                            the attribute from the pre-paint snippet in each
                            page's <head>, i.e. still before the first frame.

   Every component below reads tokens only. No surface is themed twice, so no
   later-winning rule can recolour anything after the page has loaded — that is
   what removed the white flash, together with the brand theme being the default.

   To reshade the brand, edit the tokens in section 1; nothing else knows a hex.

   Sections
     1. brand theme tokens (default)
     2. dark theme tokens
     3. base elements
     4. chrome: brand, header, drawer, generator, chips
     5. content: cards, tiles, glyphs, panels, SEO, footer
     6. utilities, responsive, landing pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND THEME (default): Deep Maroon chrome, luxury gold, white cards
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* content ground and surfaces */
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --surface-3: #e1e4ea;
  --tile: #ffffff;
  --line: rgba(15, 18, 22, 0.09);
  --line-strong: rgba(15, 18, 22, 0.16);
  --text: #18181b;
  --text-bright: #09090b;
  --muted: #52525b;
  --dim: #71717a;
  --dimmer: #a1a1aa;

  /* the maroon band: header, generator, drawer, footer */
  --header-bg: #2e080e;
  --gen-bg: #220306;
  --drawer-bg: #24050a;
  --drawer-head-bg: #2b080e;
  --drawer-head-line: rgba(255, 77, 109, 0.20);
  --footer-bg: #24050a;
  --chrome-line: rgba(255, 77, 109, 0.25);
  --gen-line: rgba(255, 77, 109, 0.22);
  --chrome-text: #ffffff;

  /* chrome buttons — header icon buttons and the drawer close */
  --chrome-btn: #420d15;
  --chrome-btn-hover: #58121d;
  --chrome-btn-fg: #ffffff;
  --chrome-btn-fg-hover: #ffffff;
  --chrome-btn-line: rgba(255, 255, 255, 0.18);

  /* drawer navigation */
  --nav-fg: #ffffff;
  --nav-fg-hover: #ffffff;
  --nav-bg-hover: rgba(255, 77, 109, 0.15);
  --nav-icon: #ffffff;
  --nav-icon-hover: #ffffff;
  --nav-icon-on: var(--accent);
  --nav-group: #ffb703;
  --nav-group-weight: 700;

  /* category chips */
  --chip-bg: #360a12;
  --chip-fg: #ffd6dc;
  --chip-line: rgba(255, 77, 109, 0.22);
  --chip-bg-hover: #4a0f19;
  --chip-fg-hover: #ffffff;
  --chip-track: rgba(255, 77, 109, 0.20);

  /* the name field */
  --field-bg: #130103;
  --field-fg: #ffffff;
  --field-line: rgba(255, 77, 109, 0.30);
  --field-line-focus: #ff4d6d;
  --field-glow: 0 0 12px rgba(255, 77, 109, 0.35);
  --field-placeholder: #b0888e;

  /* generator preview text */
  --gen-fg: #d19a9e;
  --gen-label: #d19a9e;

  /* footer text */
  --footer-blurb-fg: #d19a9e;
  --footer-link: #ffd6dc;
  --footer-link-hover: var(--accent);
  --footer-bar-line: rgba(255, 77, 109, 0.20);
  --footer-bar-fg: #b0888e;

  /* accents, meta and shared values */
  --accent: #ffb703;
  --accent-hi: #fb8500;
  --accent-fg: #000000;
  --accent-link: #ffb703;
  --fav: oklch(0.75 0.18 15);
  --danger: #a3402a;
  --shadow: 0 24px 60px rgba(15, 18, 22, 0.14);
  --soft: rgba(255, 183, 3, 0.07);
  --soft-hi: rgba(255, 183, 3, 0.16);
  --bar: rgba(0, 0, 0, 0.035);
  --copy: rgba(24, 24, 27, 0.38);
  --meta: rgba(24, 24, 27, 0.42);
  --header-h: 54px;
  --sans: Georgia, "Times New Roman", Times, serif;
  --mono: Georgia, "Times New Roman", Times, serif;
  --glyph: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Color Emoji",
           "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. DARK THEME: Pitch Black stealth. Only what actually differs is restated;
      every surface, chrome included, goes black here.
   -------------------------------------------------------------------------- */
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;

  --bg: #090a0f;
  --surface: #121622;
  --surface-2: #1a2030;
  --surface-3: #242c42;
  --tile: #141826;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --text: #e2e8f0;
  --text-bright: #ffffff;
  --muted: #94a3b8;
  --dim: #64748b;
  --dimmer: #475569;

  --header-bg: rgba(13, 16, 24, 0.94);
  --gen-bg: #10131d;
  --drawer-bg: #0d1017;
  --drawer-head-bg: transparent;
  --drawer-head-line: transparent;
  --footer-bg: #080a0e;
  --chrome-line: var(--line);
  --gen-line: var(--line);

  --chrome-btn: var(--surface);
  --chrome-btn-hover: var(--surface-2);
  --chrome-btn-fg: var(--muted);
  --chrome-btn-fg-hover: var(--text);
  --chrome-btn-line: var(--line-strong);

  --nav-fg: var(--muted);
  --nav-fg-hover: var(--text);
  --nav-bg-hover: var(--surface-2);
  --nav-icon: var(--dim);
  --nav-icon-hover: var(--text-bright);
  --nav-icon-on: var(--text-bright);
  --nav-group: var(--dim);
  --nav-group-weight: 400;

  --chip-bg: var(--surface);
  --chip-fg: var(--muted);
  --chip-line: var(--line-strong);
  --chip-bg-hover: var(--surface-2);
  --chip-fg-hover: var(--text);
  --chip-track: var(--line);

  --field-bg: var(--surface);
  --field-fg: var(--text);
  --field-line: var(--line-strong);
  --field-line-focus: var(--accent);
  --field-glow: none;
  --field-placeholder: var(--dimmer);

  --gen-fg: var(--text);
  --gen-label: var(--dim);

  --footer-blurb-fg: var(--muted);
  --footer-link: var(--muted);
  --footer-bar-line: var(--line);
  --footer-bar-fg: var(--dimmer);

  --danger: #d99a8a;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  --soft: rgba(255, 183, 3, 0.08);
  --bar: rgba(255, 255, 255, 0.035);
  --copy: rgba(255, 255, 255, 0.45);
  --meta: rgba(255, 255, 255, 0.38);
}

/* --------------------------------------------------------------------------
   3. BASE ELEMENTS
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.62;
  overflow-x: hidden;
  transition: background 0.2s ease, color 0.2s ease;
}
body.drawer-open { overflow: hidden; }

a { color: var(--accent-link); text-decoration: none; }
a:hover { color: var(--accent-hi); }
button, input, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--dimmer); }
::selection { background: var(--accent); color: var(--accent-fg); }
::-webkit-scrollbar { width: 1px; height: 1px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; }

.shell {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mono {
  font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 10.5px; font-variant-numeric: lining-nums tabular-nums;
}
.dim { color: var(--dim); }
h1, h2, h3 { letter-spacing: 0; font-weight: 700; line-height: 1.25; }

/* --------------------------------------------------------------------------
   4. CHROME
   -------------------------------------------------------------------------- */

/* ── brand ───────────────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 9px; color: var(--chrome-text); min-width: 0; }
.brand-mark {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px;
  background: var(--accent); color: var(--accent-fg);
  border: 1px solid var(--accent-link);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.brand-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo-img {
  width: 32px; height: 32px; object-fit: contain;
  display: inline-block; vertical-align: middle; border-radius: 6px;
}

/* ── boot band ───────────────────────────────────────────────────────────────
   The header, drawer and footer are injected by js/layout.js, so until that
   module has parsed there is nothing at the top of the document and the page
   ground (light) shows through — that was the white bar above the generator.
   This inert placeholder ships in the markup, is painted by the very first
   frame from the same tokens as the header, and layout.js removes it the moment
   the real header takes its place. Same height, so nothing shifts.
   -------------------------------------------------------------------------- */
.header-boot {
  flex: 0 0 auto;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  background: var(--header-bg);
  border-bottom: 1px solid var(--chrome-line);
}

/* ── header ──────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: var(--header-h); padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  background: var(--header-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--chrome-line);
}
.app-header .brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 190px); justify-content: center;
}
.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--chrome-btn-line);
  background: var(--chrome-btn); color: var(--chrome-btn-fg); font-size: 15px;
  display: grid; place-items: center;
}
.icon-btn:hover { background: var(--chrome-btn-hover); color: var(--chrome-btn-fg-hover); }
#lang-btn { width: auto; padding: 0 9px; font-size: 10px; }

/* slim bar linking to a custom tool page (tools/<slug>/) — the maroon chrome
   gradient with a gold hairline, sitting under the generator */
.tool-bar {
  display: flex; align-items: center; gap: 9px;
  width: 100%; height: 40px; margin: 0 0 10px; padding: 0 14px;
  border: 1px solid var(--accent); border-radius: 11px;
  background: linear-gradient(135deg, #420d15, #220306);
  color: #FBDADE;
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.tool-bar:hover {
  color: var(--accent-hi);
  border-color: var(--accent-hi);
  box-shadow: 0 0 0 1px var(--accent-hi), 0 4px 16px rgba(251, 133, 0, 0.22);
}
.tool-bar:active { transform: translateY(1px); }
.tool-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-bar .ico { flex: 0 0 auto; }
.tool-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tool-bar-go { flex: 0 0 auto; font-size: 14px; transition: transform 0.18s ease; }
.tool-bar:hover .tool-bar-go { transform: translateX(3px); }

@media (max-width: 380px) {
  .tool-bar { height: 38px; font-size: 12px; gap: 7px; padding: 0 11px; }
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn-accent {
  height: 34px; padding: 0 13px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  color: var(--accent-fg); font-size: 14px; font-weight: 700;
  border: none;
  box-shadow: 0 4px 14px rgba(251, 133, 0, 0.32);
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  transition: filter 0.15s ease, gap 0.18s ease;
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-lg { height: 46px; padding: 0 20px; border-radius: 12px; font-size: 15.5px; font-weight: 700; }

.btn-accent .spinner {
  width: 0; height: 15px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--accent-fg);
  opacity: 0; transition: width 0.18s ease, opacity 0.18s ease;
}
.btn-accent.loading { gap: 8px; }
.btn-accent.loading .spinner { width: 15px; opacity: 1; animation: spin 0.65s linear infinite; }

/* ── side drawer ─────────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 0.22s ease;
}
.drawer-backdrop.on { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 85;
  width: min(292px, 84vw);
  display: flex; flex-direction: column;
  background: var(--drawer-bg); border-right: 1px solid var(--chrome-line);
  box-shadow: var(--shadow);
  transform: translateX(-102%);
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  padding: 10px 10px calc(18px + env(safe-area-inset-bottom));
  padding-top: calc(10px + env(safe-area-inset-top));
  overflow-y: auto;
}
.drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px;
  background: var(--drawer-head-bg);
  border-bottom: 1px solid var(--drawer-head-line);
}
.drawer-head .brand { flex: 1; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-group {
  padding: 14px 12px 6px;
  color: var(--nav-group); font-weight: var(--nav-group-weight);
}
.drawer-btn {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px; border: 0; border-radius: 10px; background: transparent;
  color: var(--nav-fg); font-size: 14.5px; font-weight: 400;
}
.drawer-btn i { font-style: normal; }
.drawer-btn:hover { background: var(--nav-bg-hover); color: var(--nav-fg-hover); }
.drawer-btn.on { background: var(--soft-hi); color: var(--accent); font-weight: 700; }

/* ── sticky generator ────────────────────────────────────────────────────── */
.generator {
  position: sticky; top: var(--header-h); z-index: 50;
  background: var(--gen-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gen-line);
  padding: 11px 12px 12px;
  transition: padding 0.18s ease;
}
.gen-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.gen-row { display: flex; gap: 7px; }
#name-input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--field-line);
  background: var(--field-bg); color: var(--field-fg);
  font-size: 16px; font-weight: 400; outline: none;
  transition: height 0.18s ease;
}
#name-input::placeholder { color: var(--field-placeholder); }
#name-input:focus { border-color: var(--field-line-focus); box-shadow: var(--field-glow); }
.gen-preview {
  display: flex; align-items: center; gap: 8px;
  color: var(--gen-fg); font-size: 15px; white-space: nowrap; overflow: hidden;
}
.gen-preview .dim { color: var(--gen-label); }
#preview-text { overflow: hidden; text-overflow: ellipsis; color: var(--accent); font-weight: 700; }

body.compact .generator { padding: 7px 12px 8px; }
body.compact #name-input, body.compact .btn-lg { height: 40px; }

/* ── chips ───────────────────────────────────────────────────────────────── */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-row.scroll-x {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; scroll-behavior: smooth;
}
.chip-row.scroll-x::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; height: 31px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--chip-line); background: var(--chip-bg); color: var(--chip-fg);
  font-size: 13.5px; font-weight: 400; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.chip:hover { background: var(--chip-bg-hover); color: var(--chip-fg-hover); }
.chip.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  border-color: var(--accent); color: var(--accent-fg);
  font-weight: 700;
}
.chip:active { transform: scale(0.96); }

.chip-track {
  height: 2px; margin: 4px 2px 2px; border-radius: 999px;
  background: var(--chip-track); overflow: hidden;
}
.chip-progress {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   5. CONTENT
   -------------------------------------------------------------------------- */

/* ── main + screens ──────────────────────────────────────────────────────── */
main { padding: 12px; max-width: 1080px; width: 100%; margin: 0 auto; flex: 1 0 auto; }
.screen { opacity: 1; }

.doc-view #generator { display: none; }
.doc-view #screen-doc .seo { margin-top: 0; padding-top: 0; border-top: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.card-grid { transition: opacity 0.16s ease, transform 0.16s ease; }
.card-grid.swap { opacity: 0; transform: translateY(4px); }
.card-grid > .card { animation: cardIn 0.22s cubic-bezier(0.22, 0.9, 0.28, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }

.section-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 2px 9px; }
.section-meta .mono { color: var(--dim); }
.block-label { color: var(--dim); margin: 26px 0 9px; font-weight: 400; }

/* ── result cards ────────────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr)); gap: 10px; }
.card {
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface);
  padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px;
}
.card:hover { border-color: var(--line-strong); }
.card-text {
  font-family: var(--glyph);
  font-size: 20px; line-height: 1.5; word-break: break-word;
  color: var(--text-bright); text-align: center;
  min-height: 25px; padding: 7px 6px 6px; margin: -2px -2px 0;
  border-radius: 10px; cursor: pointer;
  transition: background 0.15s ease;
  /* Was `user-select: all`, which is precisely what made a single tap select
     the whole string: Android then painted the two drag handles and raised the
     Copy / Share / Web search bar over the card. The tap already copies, so the
     native selection added nothing and broke the app feel. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.card-text:hover { background: var(--soft); }
.card-text:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 1px; }
.card-text.done { background: var(--soft-hi); }
.card-actions { display: flex; gap: 5px; }

.btn-copy {
  flex: 1; min-width: 0; height: 30px; border: 0; border-radius: 9px;
  background: color-mix(in srgb, var(--bar) 55%, transparent); color: var(--muted);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 6px; padding: 0 9px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-copy:hover { background: var(--soft); }
.copy-count, .copy-label {
  font-size: 10.5px; letter-spacing: 0.005em; color: var(--meta);
  font-variant-numeric: lining-nums tabular-nums;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0;
}
.copy-count { text-align: left; }
.copy-label { text-align: right; }
.copy-word {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--copy);
}
.btn-copy:hover .copy-word { color: var(--muted); }
.btn-copy.done { background: var(--accent); }
.btn-copy.done .copy-word { font-weight: 700; }
.btn-copy.done .copy-word,
.btn-copy.done .copy-count,
.btn-copy.done .copy-label { color: var(--accent-fg); }
.btn-fav, .btn-share {
  width: 30px; height: 30px; border: 0; border-radius: 9px;
  background: color-mix(in srgb, var(--bar) 55%, transparent); color: var(--meta); font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-fav:hover, .btn-share:hover { background: var(--soft-hi); color: var(--text); }
.btn-fav.on { color: var(--fav); }

.btn-block {
  width: 100%; margin-top: 12px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 14px; font-weight: 700;
}
.btn-block:hover { background: var(--surface-2); }
.btn-block.small { height: 36px; margin-top: 8px; font-size: 12.5px; }
.empty { padding: 40px 16px; text-align: center; color: var(--dim); font-size: 14.5px; }

/* ── tiles ───────────────────────────────────────────────────────────────── */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile {
  text-align: left; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--tile); color: var(--text);
}
.tile:hover { border-color: var(--accent-link); }
.tile-sample { font-size: 18px; margin-bottom: 6px; color: var(--text-bright); word-break: break-word; }
.tile-name { font-size: 14px; font-weight: 700; }
.tile-sub { color: var(--meta); margin-top: 3px; }

/* ── symbol / emoji / kaomoji ────────────────────────────────────────────── */
.set-list { display: flex; flex-direction: column; gap: 18px; }
.glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.glyph-set { margin-bottom: 4px; }
.glyph {
  font-family: var(--glyph);
  aspect-ratio: 1; min-height: 44px; width: 100%;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-bright);
  font-size: 19px; display: grid; place-items: center;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.1s ease;
}
.glyph:active { transform: scale(0.94); }
.glyph:hover { background: var(--accent); color: var(--accent-fg); }
.glyph.emoji { font-size: 21px; }
.glyph.emoji:hover { background: var(--surface-2); color: inherit; }
.kao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.kao {
  font-family: var(--glyph);
  height: 44px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-bright); font-size: 14px;
}
.kao:hover { background: var(--surface-2); }

/* ── inputs & panels ─────────────────────────────────────────────────────── */
#conv-input {
  width: 100%; padding: 12px 13px; margin-bottom: 12px;
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--bg); font-size: 15px; resize: vertical; outline: none;
}
#conv-input:focus { border-color: var(--accent-link); }

.panel { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 14px; margin-bottom: 10px; }
.panel h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.panel p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0 0 10px; }
.panel.mono { background: var(--tile); font-size: 10.5px; line-height: 1.9; color: var(--dim); text-transform: none; letter-spacing: 0.03em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.btn-outline {
  height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface-2); font-size: 13.5px; font-weight: 400;
}
.btn-outline:hover { background: var(--surface-3); }
.btn-outline.danger { color: var(--danger); }
.file-btn { display: inline-flex; align-items: center; height: 36px; }

/* ── SEO block ───────────────────────────────────────────────────────────── */
.seo {
  margin: 26px auto 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 68ch; color: var(--muted);
  font-size: 14.5px; line-height: 1.72;
}
.seo h1 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.seo h2 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.seo h3 { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.seo p { margin: 0 0 12px; text-wrap: pretty; }
.faq { display: grid; gap: 8px; margin-top: 14px; }
.faq-item { border: 1px solid var(--line); border-radius: 11px; background: var(--tile); padding: 11px 13px; }
.faq-q { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.faq-a { font-size: 14px; color: var(--muted); line-height: 1.68; }
.seo-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 4px; font-size: 13px; }
/* ── article measure ─────────────────────────────────────────────────────────
   The prose block reads at a fixed measure on desktop and goes edge-safe on
   phones and tablets. Scoped to the article only: .app-header, .generator and
   .card-grid keep the 1080px column they already use.

   The mobile rule is the base declaration, so nothing has to be undone at a
   breakpoint — border-box plus the side padding is what stopped the card edges
   touching the screen. */
#home-article,
.art {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 18px auto;
  padding: 0 16px;
  line-height: 1.78;
  overflow-x: hidden;
}
#home-article p,
#home-article li,
.art p,
.art li { line-height: 1.78; }

/* the article's own cards keep their radius and hairline on every screen */
#home-article .faq-item,
#home-article .panel,
.art .faq-item,
.art .panel {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 11px;
  border: 1px solid var(--line);
}
#home-article img,
#home-article table,
.art img,
.art table { max-width: 100%; }

/* phones and tablets: full-bleed. main carries 12px of side padding, so the
   article cancels it with a negative inline margin and sets its own 16px —
   edge to edge, exactly as it read before the desktop measure was added. */
@media (max-width: 1023px) {
  #home-article,
  .art {
    width: auto;
    max-width: none;
    margin: 14px -12px;
    padding: 0 16px;
  }
}

@media (min-width: 1024px) {
  #home-article,
  .art {
    max-width: 860px;
    margin: 30px auto;
    padding: 0;
  }
}

/* ── site footer ─────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 18px;
  border-top: 1px solid var(--chrome-line);
  background: var(--footer-bg);
  padding: 26px 12px 0;
}
.footer-cols {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
.footer-col { min-width: 0; }
.footer-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.footer-brand-name { font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--chrome-text); }
.footer-blurb { margin: 0; font-size: 14px; line-height: 1.72; color: var(--footer-blurb-fg); text-wrap: pretty; max-width: 42ch; }
.footer-head {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-list a {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; color: var(--footer-link); line-height: 1.5;
}
.footer-list a:hover { color: var(--footer-link-hover); }
.footer-list i { font-style: normal; }
.footer-bar {
  max-width: 1080px; margin: 24px auto 0;
  border-top: 1px solid var(--footer-bar-line);
  padding: 15px 0 calc(20px + env(safe-area-inset-bottom));
  text-align: center; font-size: 12px; color: var(--footer-bar-fg);
}

/* ── scroll to top ───────────────────────────────────────────────────────── */
.scroll-top {
  position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 75;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--accent-link); background: var(--accent); color: var(--accent-fg);
  font-size: 17px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.scroll-top.on { opacity: 1; pointer-events: auto; transform: none; }
.scroll-top:hover { filter: brightness(1.1); }

/* ── static pages ────────────────────────────────────────────────────────── */
.page-body { max-width: 72ch; margin: 0 auto; padding: 22px 14px 28px; background: var(--bg); }
.page-body h1 { font-size: 28px; line-height: 1.22; font-weight: 700; margin: 0 0 14px; }
.page-body h2 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; }
.page-body h3 { font-size: 16px; font-weight: 700; margin: 18px 0 6px; }
.page-body p, .page-body li { font-size: 15.5px; line-height: 1.78; color: var(--muted); text-wrap: pretty; }
.page-body p { margin: 0 0 12px; }
.page-body ul, .page-body ol { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.page-body code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 5px; color: var(--text);
}

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 90;
  transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow);
  animation: toast 0.18s ease both;
  max-width: 88vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── tap-to-copy surfaces: no native selection ────────────────────────────
   Everything here responds to a tap by copying or navigating, so a text
   selection is never what the visitor meant. Inputs and the article are
   deliberately NOT in this list: the name field must stay editable and the
   SEO copy must stay selectable for people who want to quote it.
   ─────────────────────────────────────────────────────────────────────── */
.card,
.card-text,
.card-actions,
.btn-copy,
.btn-fav,
.gen-preview,
#preview-text,
.chip,
.tile,
.glyph,
.sample,
.kaomoji-list button,
.set-list button,
.install-pill {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Anything the visitor types in stays fully selectable and editable. */
input,
textarea,
[contenteditable="true"],
.seo,
.art {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ── install card ─────────────────────────────────────────────
   Was a light oval pill anchored at 76px, which put it straight over the COPY
   buttons on a phone and made the cards untappable. It is now a compact dark
   card in the brand palette, lifted clear of the action row, with the text in
   two fixed single-line rows so it can never grow to three ragged lines.
   ──────────────────────────────────────────────────────────── */
.install-pill {
  position: fixed; z-index: 88;
  left: 50%; bottom: calc(84px + env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 400px;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(36, 8, 14, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  color: #ffffff;
  opacity: 0; transform: translate(-50%, 14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.install-pill.on { opacity: 1; transform: translate(-50%, 0); }

.install-pill-icon {
  flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: 9px; display: block; object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}

/* min-width:0 lets the rows ellipsis instead of forcing the card wider. */
.install-pill-copy { flex: 1 1 auto; min-width: 0; }
.install-pill-title {
  display: block; font-size: 13px; font-weight: 700; color: #ffffff;
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.install-pill-text {
  display: block; font-size: 11px; font-weight: 500; color: #d1d5db;
  line-height: 1.35; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.install-pill .install-pill-go {
  flex: 0 0 auto;
  background: #f59e0b; color: #1a0508;
  font-weight: 700; font-size: 12px;
  border: none; border-radius: 8px;
  padding: 7px 14px; height: auto; line-height: 1.2;
  box-shadow: none; cursor: pointer;
}
.install-pill .install-pill-go:hover { filter: brightness(1.06); }

.install-pill-close {
  flex: 0 0 auto;
  width: 28px; height: 28px; margin-left: 8px;
  border: none; background: transparent; color: #9ca3af;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.install-pill-close:hover { color: #ffffff; }

/* Guidance state: the action button leaves, the subtext carries the
   instruction. The card keeps its height and its width — the row is still a
   single ellipsised line, so the box never reflows under the visitor. */
.install-pill.guide .install-pill-text { color: #fcd34d; }

/* The toast is earlier in the DOM than the runtime-appended card, so a sibling
   selector cannot reach it. body.pill-on is set while the card is on screen and
   lifts the toast clear of it. */
body.pill-on .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }


/* --------------------------------------------------------------------------
   6. UTILITIES, LANDING PAGES, RESPONSIVE
   -------------------------------------------------------------------------- */

/* ── SEO landing pages ───────────────────────────────────────────────────── */
.crumbs { color: var(--meta); margin-bottom: 10px; }
.crumbs a { color: var(--meta); }
.crumbs a:hover { color: var(--text); }
.lp-row { display: flex; gap: 7px; margin: 0 0 14px; }
.lp-row input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; font-size: 15.5px;
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); outline: none;
}
.lp-row input:focus { border-color: var(--accent-link); }
.lp-row .btn-lg { display: inline-flex; align-items: center; white-space: nowrap; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sample {
  text-align: center; padding: 12px 13px; font-size: 17px; line-height: 1.45;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-bright);
  word-break: break-word; font-family: inherit;
}
.sample:hover { border-color: var(--accent-link); }
.sample.copied { background: var(--accent); color: var(--accent-fg); }
.lp-hint { color: var(--meta); margin: 10px 0 24px; }

/* ── icons & elements ────────────────────────────────────────────────────── */
.ico { display: block; flex: 0 0 auto; }
.ico-slot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; font-style: normal;
  color: var(--dim); transition: color 0.15s ease;
}
.drawer-btn .ico-slot { width: 24px; height: 24px; color: var(--nav-icon); }
.drawer-btn:hover .ico-slot { color: var(--nav-icon-hover); }
.drawer-btn.on .ico-slot { color: var(--nav-icon-on); }
.footer-list .ico-slot { width: 19px; height: 19px; }
.footer-list a:hover .ico-slot { color: var(--accent-link); }
.icon-btn .ico { color: currentColor; }
.chip .ico { margin-right: -1px; opacity: 0.85; }
.chip.on .ico { opacity: 1; }
.scroll-top .ico { color: currentColor; }

.set-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 9px; }
.set-title { color: var(--dim); white-space: nowrap; }
.set-rule { flex: 1; min-width: 12px; height: 0; border-bottom: 1px dashed var(--line-strong); opacity: 0.75; }
.set-count { color: var(--dimmer); white-space: nowrap; letter-spacing: 0.06em; }

.btn-more {
  width: 100%; margin: 12px 0 22px; height: 42px;
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-more:hover { background: var(--surface-2); border-color: var(--accent-link); }
.btn-more .spinner {
  width: 0; height: 14px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent-link);
  opacity: 0; transition: width 0.16s ease, opacity 0.16s ease;
}
.btn-more.loading { color: var(--muted); }
.btn-more.loading .spinner { width: 14px; opacity: 1; animation: spin 0.65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.glyph-set .btn-more { margin: 10px 0 4px; height: 38px; font-size: 12.5px; }
.btn-more:last-child { margin-bottom: 6px; }

.saved-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: nowrap; margin-bottom: 12px;
}
.saved-head #saved-tabs {
  flex: 1 1 auto; min-width: 0; margin: 0;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.saved-head #saved-tabs::-webkit-scrollbar { display: none; }
#saved-action { flex: 0 0 auto; }
.btn-clear {
  height: 31px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--meta); font-size: 12.5px; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn-clear:hover { color: var(--muted); border-color: var(--line-strong); background: var(--bar); }
.btn-clear .short { display: none; }

.skeleton-card { overflow: hidden; }
.skeleton-line, .skeleton-meta { position: relative; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, currentColor 8%, transparent); }
.skeleton-line { height: 1.25em; width: 78%; margin: 18px 14px; opacity: .55; }
.skeleton-meta { height: 32px; margin: 0 10px 10px; opacity: .4; }
.skeleton-line::after, .skeleton-meta::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: skeleton-shimmer 1.15s linear infinite; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

/* ── responsive breakpoints ──────────────────────────────────────────────── */
@media (min-width: 700px) {
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
  .site-footer { padding: 32px 20px 0; }
  .glyph-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 7px; }
  .glyph { min-height: 52px; font-size: 21px; }
}

@media (min-width: 1024px) {
  main { padding: 16px 20px 30px; }
  .card-text { font-size: 17.5px; }
  .drawer { width: 300px; }
  .toast { bottom: 28px; left: auto; right: 72px; transform: none; animation: none; }
  .scroll-top { right: 20px; bottom: 20px; width: 44px; height: 44px; }
  .page-body { padding: 28px 20px 30px; }
  .glyph-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .glyph { min-height: 56px; }
}

@media (max-width: 560px) {
  .btn-clear { font-size: 12px; padding: 0 11px; }
  .btn-clear .full { display: none; }
  .btn-clear .short { display: inline; }
}

@media (max-width: 380px) {
  .btn-lg { padding: 0 14px; font-size: 13px; }
  .card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 330px) {
  .btn-copy { grid-template-columns: 1fr auto 1fr; }
  .copy-count, .copy-label { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ── article component (moved out of every content.html) ─────────────────
   These rules used to ship as an identical 6.4 KB <style> block inside all 32
   content.html files. The article is now pre-rendered into each page's static
   HTML, so the cold load never fetches content.html and the rules have to be
   here instead. h1 shares every h2 rule: the article heading was promoted from
   h2 to h1 for the heading hierarchy, and must look exactly as it did.
   ──────────────────────────────────────────────────────────────────────── */
/* Red pulled straight from css/style.css light theme:
     --header-bg #2e080e and --gen-bg/--footer-bg #24050a. Dark theme gets a
     lighter tint of the same hue so it stays readable on #090a0f. */
  .art {
    --red-deep: #2e080e;
    --red-deeper: #24050a;
    --red-ink: #a3141f;
    --red-line: rgba(163, 20, 31, 0.30);
    --red-soft: rgba(163, 20, 31, 0.06);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--tile);
    padding: 22px 16px;
    font-size: 17.5px;
    line-height: 1.9;
  }
  html[data-theme="dark"] .art,
  body[data-theme="dark"] .art {
    --red-ink: #e2626c;
    --red-line: rgba(226, 98, 108, 0.28);
    --red-soft: rgba(226, 98, 108, 0.07);
  }

  /* ── centred header ─────────────────────────────────────────────── */
  .art-head {
    text-align: center;
    border-bottom: 2px dashed var(--red-line);
    padding-bottom: 22px;
    margin-bottom: 8px;
  }
  .art-eyebrow {
    display: inline-block;
    font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #fff; background: var(--red-deep);
    border-radius: 999px; padding: 6px 16px; margin-bottom: 14px;
  }
  .art h1, .art h2 { font-size: 27px; line-height: 1.3; margin: 0 0 10px; }
  .art-sub { font-size: 15px; color: var(--dim); margin: 0; }

  /* ── sections + headings with a long left bar ───────────────────── */
  .art-sec { border-top: 2px dashed var(--red-line); padding-top: 28px; margin-top: 28px; }
  .art-sec:first-of-type { border-top: 0; }

  .art h3 {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; line-height: 1.4; margin: 0 0 16px;
    border-left: 5px solid var(--red-ink);
    padding-left: 14px;
  }
  .art-num {
    flex: none; min-width: 28px; padding: 3px 7px;
    border: 1px solid var(--red-line); border-radius: 7px;
    background: var(--red-soft); color: var(--red-ink);
    font-size: 12px; font-weight: 700; text-align: center; line-height: 1.5;
  }
  .art h4 {
    font-size: 17.5px; font-weight: 700; color: var(--text);
    margin: 22px 0 8px;
    border-left: 3px solid var(--red-line);
    padding-left: 12px;
  }
  .art p { margin: 0 0 16px; }
  .art p:last-child { margin-bottom: 0; }

  .art ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 12px; }
  .art ul li { position: relative; padding-left: 20px; }
  .art ul li::before {
    content: ""; position: absolute; left: 3px; top: 12px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--red-ink);
  }

  /* ── slim note box: not full width, tighter than a section ──────── */
  .art-note {
    max-width: 520px;
    border: 1px solid var(--red-line); border-left: 4px solid var(--red-ink);
    border-radius: 10px; background: var(--red-soft);
    padding: 14px 16px; margin: 0 0 20px;
    font-size: 16px; line-height: 1.75;
  }
  .art-note-t {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--red-ink); margin: 0 0 6px;
  }
  .art-note p { margin: 0; font-size: 16px; }

  /* ── structured internal link cards ─────────────────────────────── */
  .art-links {
    display: grid; grid-template-columns: 1fr; gap: 18px;
    margin: 22px 0 6px; padding: 0; list-style: none;
  }
  .art ul.art-links li { padding: 0; }
  .art ul.art-links li::before { content: none; display: none; }
  .art-link {
    display: block;
    border: 1px solid var(--line-strong);
    border-left: 5px solid var(--red-ink);
    border-radius: 12px;
    background: var(--surface);
    padding: 18px 18px;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  }
  .art-link:hover { background: var(--red-soft); transform: translateX(3px); }
  .art-link-t {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 17px; font-weight: 700; color: var(--red-ink);
    margin-bottom: 7px;
  }
  .art-link-t::after {
    content: "→"; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--red-line); background: var(--red-soft);
    color: var(--red-ink); font-size: 16px; font-weight: 700; line-height: 1;
  }
  .art-link-d { display: block; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
  @media (min-width: 640px) { .art-links { grid-template-columns: 1fr 1fr; gap: 20px; } }

  /* ── sample grid (unchanged) ────────────────────────────────────── */
  .art-chips {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; margin: 18px 0 4px;
  }
  .art-chip {
    background: var(--tile); border: 1px solid var(--line); border-radius: 11px;
    padding: 13px 9px; text-align: center; font-size: 15px;
    color: var(--text); word-break: break-word; line-height: 1.6;
  }

  .art-fig { text-align: center; margin: 28px 0; }
  .art-fig img {
    max-width: 100%; height: auto; border-radius: 12px;
    border: 1px solid var(--red-line); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
  .art-fig figcaption { font-size: 14px; color: var(--dim); margin-top: 10px; font-style: italic; }

  /* ── click-to-open FAQ ──────────────────────────────────────────── */
  .art-faq { margin-top: 8px; }
  .art-faq details {
    border-bottom: 2px dashed var(--red-line);
    padding: 16px 0;
  }
  .art-faq details:last-child { border-bottom: 0; padding-bottom: 0; }
  .art-faq summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.55;
  }
  .art-faq summary::-webkit-details-marker { display: none; }
  .art-faq summary::after {
    content: "+"; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--red-line); background: var(--red-soft);
    color: var(--red-ink); font-size: 18px; font-weight: 700; line-height: 1;
  }
  .art-faq details[open] summary::after { content: "−"; }
  .art-faq details p { margin: 12px 0 0; font-size: 16.5px; color: var(--muted); line-height: 1.8; }

  @media (min-width: 720px) {
    .art { padding: 34px 32px; border-radius: 18px; font-size: 18.5px; }
    .art h1, .art h2 { font-size: 32px; }
    .art h3 { font-size: 21px; }
  }