/* Pretty Little Tools — a jewel-box of small browser utilities
   Palette: lilac paper / plum ink / five jewel accents (one per category)
   Type: Fraunces (display), Karla (body), IBM Plex Mono (readouts)

   Category jewels — each tool inherits its stone via body[data-cat]:
     gen  · garnet   (generators)
     conv · amethyst (converters)
     text · emerald  (text tools)
     calc · topaz    (calculators)
     spec · sapphire (weekly specials) */

:root {
  --paper: #F6F2F7;
  --card: #FFFFFF;
  --ink: #33202F;
  --muted: #7A6675;
  --accent: #D6336C;
  --accent-dark: #B02458;
  --violet: #6F49C6;
  --panel: #2B1B29;
  --panel-text: #F5EDF3;
  --panel-muted: #A98DA3;
  --panel-line: #4E3A4B;
  --line: #E4D6E0;
  --radius: 10px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* default jewel = brand garnet */
  --cat: var(--accent);
  --cat-deep: var(--accent-dark);
  --cat-soft: rgba(214, 51, 108, 0.10);
  --cat-ring: rgba(214, 51, 108, 0.18);
}
[data-cat="gen"]  { --cat: #D6336C; --cat-deep: #B02458; --cat-soft: rgba(214,51,108,.10); --cat-ring: rgba(214,51,108,.18); }
[data-cat="conv"] { --cat: #6F49C6; --cat-deep: #5A38A8; --cat-soft: rgba(111,73,198,.10); --cat-ring: rgba(111,73,198,.18); }
[data-cat="text"] { --cat: #0E8A66; --cat-deep: #0A6E51; --cat-soft: rgba(14,138,102,.10);  --cat-ring: rgba(14,138,102,.18); }
[data-cat="calc"] { --cat: #C4691B; --cat-deep: #A25415; --cat-soft: rgba(196,105,27,.10);  --cat-ring: rgba(196,105,27,.18); }
[data-cat="spec"] { --cat: #3D5CC5; --cat-deep: #2F49A4; --cat-soft: rgba(61,92,197,.10);   --cat-ring: rgba(61,92,197,.18); }
[data-cat="file"] { --cat: #0E7C86; --cat-deep: #0A616A; --cat-soft: rgba(14,124,134,.10);  --cat-ring: rgba(14,124,134,.18); }

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cat); color: #fff; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }

h1, h2, .brand { font-family: var(--font-display); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--card); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px; gap: 16px;
  /* nowrap: кнопка языка всегда в правом верхнем углу — иначе на многословных
     локалях она переносится вниз влево, и right-якорное меню уезжает за экран */
  flex-wrap: nowrap;
}
.brand-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.site-header .lang-switch { flex: none; }
.brand {
  font-weight: 600; font-size: 21px; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.brand .mark { color: var(--accent); font-size: 19px; line-height: 1; transition: transform .3s ease; }
.brand:hover .mark { transform: rotate(90deg); }
.brand-note {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); padding-left: 27px;
}

/* ---------- language dropdown (details/summary, works without JS) ---------- */
.lang-switch { position: relative; }
.lang-switch summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 500;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { border-color: var(--accent); }
.lang-switch[open] summary {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(214, 51, 108, 0.12);
}
.lang-switch .globe { color: var(--accent); font-size: 13px; line-height: 1; }
.lang-switch .chev {
  width: 7px; height: 7px; margin-left: 2px; flex: none;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.lang-switch[open] .chev { transform: rotate(225deg) translate(-2px, -2px); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 208px; max-width: min(300px, calc(100vw - 24px)); padding: 8px;
  max-height: min(68vh, 540px); overflow: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(51, 32, 47, 0.16);
  animation: langIn .13s ease-out;
}
@keyframes langIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.lang-menu-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  padding: 5px 10px 8px; margin: 0;
}
.lang-menu ul { list-style: none; margin: 0; padding: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: var(--ink); font-size: 14.5px;
}
.lang-menu a .code {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: var(--paper);
  border-radius: 5px; padding: 3px 6px; min-width: 30px; text-align: center;
}
.lang-menu a .name { flex: 1; }
.lang-menu a .tick { color: var(--accent); font-size: 11px; }
.lang-menu a:hover { background: var(--paper); }
.lang-menu a:hover .code { color: var(--accent); }
.lang-menu a.active { background: var(--ink); color: var(--card); }
.lang-menu a.active .code { background: rgba(255, 255, 255, 0.14); color: var(--card); }

@media (max-width: 520px) {
  .lang-switch .current { display: none; }
  .lang-switch summary { padding: 8px 10px; }
  /* кнопка у правого края: меню должно расти влево (right: 0 из базового правила),
     иначе оно уезжает за вьюпорт */
}

/* ---------- hero (home) ---------- */
.hero {
  padding: clamp(44px, 7vw, 72px) 0 clamp(34px, 5vw, 52px);
  background:
    radial-gradient(560px 280px at 18% -10%, rgba(214, 51, 108, 0.055), transparent 70%),
    radial-gradient(520px 260px at 85% 0%, rgba(111, 73, 198, 0.05), transparent 70%);
}
.hero h1 {
  font-size: clamp(32px, 5.5vw, 56px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.06; max-width: 16ch;
}
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 600; }
.hero p { margin-top: 18px; max-width: 52ch; color: var(--muted); font-size: 17px; }

/* ---------- catalog grid ---------- */
.catalog { padding-top: clamp(10px, 2vw, 20px); padding-bottom: clamp(48px, 7vw, 72px); } /* бока даёт .wrap */
.cat-block { margin-bottom: clamp(40px, 5.5vw, 56px); }
.cat-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cat-head .code {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--card); background: var(--cat);
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.08em;
}
.cat-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.cat-head .cat-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: auto; }
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.tool-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 14px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; position: relative;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.tool-card::after {
  content: '✦'; position: absolute; top: 12px; right: 14px;
  color: var(--cat); font-size: 12px; opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  transform: rotate(-30deg);
}
.tool-card:hover, .tool-card:focus-visible {
  border-color: var(--cat); transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--cat-soft);
}
.tool-card:hover::after, .tool-card:focus-visible::after { opacity: 1; transform: rotate(0deg); }
.tool-card:hover .code { color: var(--cat); }
.tool-card .code {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.1em;
  transition: color .12s ease;
}
.tool-card h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.tool-card p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tool-card.soon {
  border-style: dashed; background: transparent; cursor: default;
}
.tool-card.soon h3 { color: var(--cat); letter-spacing: 4px; }
.tool-card.soon:hover { transform: none; box-shadow: none; border-color: var(--cat); }

/* ---------- tool page ---------- */
.tool-hero { padding: 36px 0 24px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--cat); font-weight: 600;
}
.eyebrow .chip {
  background: var(--cat); color: var(--card);
  padding: 2px 10px; border-radius: 999px; margin-right: 8px;
}
.tool-hero h1 {
  font-size: clamp(28px, 4.5vw, 42px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1; margin-top: 12px;
}
.tool-hero .short { color: var(--muted); margin-top: 8px; font-size: 16.5px; }

/* the bench: controls + readout. The output side is the "instrument panel" —
   dark plum with a faint dot grid and a live category-coloured indicator. */
.bench {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; background: var(--card); margin-bottom: 32px;
  box-shadow: 0 1px 2px rgba(51, 32, 47, 0.05), 0 12px 38px rgba(51, 32, 47, 0.08);
}
@media (max-width: 720px) { .bench { grid-template-columns: 1fr; } }
.bench-controls { padding: 24px 22px; display: flex; flex-direction: column; gap: 15px; }
.bench-output {
  padding: 24px 22px; position: relative; min-height: 230px;
  display: flex; flex-direction: column; gap: 12px;
  border-left: 1px solid var(--line);
}
@media (max-width: 720px) {
  .bench-output { border-left: 0; border-top: 1px solid var(--line); min-height: 190px; }
}
/* night skin — the dark observatory panel (weekly specials) */
.bench-output.skin-night {
  background: var(--panel);
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 18px 18px;
  color: var(--panel-text);
  border-color: transparent;
}
.bench-output .tab {
  position: absolute; top: 0; right: 0;
  background: var(--cat); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; padding: 4px 12px; border-bottom-left-radius: 10px;
}
.bench-output .out-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--panel-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.bench-output .out-label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--cat); box-shadow: 0 0 0 3px var(--cat-ring);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--cat-ring); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
.readout {
  font-family: var(--font-mono); font-size: 15px; line-height: 1.6;
  word-break: break-word; white-space: pre-wrap; flex: 1;
}
.readout:empty::before { content: '✦'; color: var(--panel-line); }
#qr-out { background: #fff; border-radius: 10px; padding: 12px; align-self: flex-start; }
#qr-out:empty { display: none; }

/* preview area (gradient, shadow, palette, markdown) */
#preview:empty { display: none; }
#preview { border-radius: 10px; min-height: 90px; }
#preview.palette { display: flex; gap: 0; overflow: hidden; min-height: 72px; }
#preview.palette span { flex: 1; }
#preview.shadow-stage {
  background: var(--paper); display: flex;
  align-items: center; justify-content: center; min-height: 150px;
}
.shadow-card {
  width: 110px; height: 74px; background: #fff; border-radius: 10px; display: block;
}
#preview.md-preview {
  background: var(--card); color: var(--ink);
  padding: 14px 16px; font-size: 14px; max-height: 260px; overflow: auto;
  scrollbar-width: thin;
}
#preview.md-preview h1, #preview.md-preview h2, #preview.md-preview h3 { margin: 6px 0; }
#preview.md-preview p, #preview.md-preview ul, #preview.md-preview ol { margin: 6px 0 6px 0; padding-left: 2px; }
#preview.md-preview ul, #preview.md-preview ol { padding-left: 20px; }
#preview.md-preview code { background: var(--paper); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
#preview.md-preview a { color: var(--accent); }

/* form controls — quiet instrument styling, category-coloured focus */
label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 6px;
}
input[type=text], input[type=number], input[type=date], textarea, select {
  width: 100%; font-family: var(--font-mono); font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* iOS Safari: у date-инпута врождённая мин. ширина, из-за неё поле выпирает из карточки */
input[type=date] {
  min-width: 0; max-width: 100%; display: block;
  -webkit-appearance: none; appearance: none;
  min-height: 41px;
}
input::placeholder, textarea::placeholder { color: #B8A6B3; }
input[type=text]:hover, input[type=number]:hover, input[type=date]:hover,
textarea:hover, select:hover { border-color: #CDB9C8; }
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus,
textarea:focus, select:focus {
  outline: none; border-color: var(--cat);
  box-shadow: 0 0 0 3px var(--cat-ring);
}
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cat); outline-offset: 2px;
}
textarea { min-height: 130px; resize: vertical; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 110px; }
.check {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer;
}
.check input { width: 15px; height: 15px; accent-color: var(--cat); }
.swatch { height: 70px; border-radius: 10px; border: 1px solid var(--line); }

button.action {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  background: var(--cat); color: #fff; border: none;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  transition: background .12s ease, transform .1s ease, box-shadow .12s ease;
}
button.action:hover { background: var(--cat-deep); transform: translateY(-1px); box-shadow: 0 5px 14px var(--cat-soft); }
button.action:active { transform: translateY(0) scale(0.98); box-shadow: none; }
button.action.alt { background: var(--ink); }
button.action.alt:hover { background: #241621; }
button.ghost {
  background: transparent; color: var(--panel-text);
  border: 1px solid var(--panel-line); font-weight: 700; font-size: 13px;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body);
  transition: border-color .12s ease, background .12s ease;
}
button.ghost:hover { border-color: var(--panel-text); background: rgba(255, 255, 255, 0.06); }
button.ghost:active { transform: scale(0.98); }
.out-actions { display: flex; gap: 8px; }

.privacy-note {
  font-size: 13.5px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; margin-bottom: 36px;
}
.privacy-note::before { content: '✦'; color: var(--cat); font-size: 11px; flex: none; }

/* stats row */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.stat {
  border: 1px solid var(--panel-line); border-radius: 10px; padding: 11px 12px;
  background: rgba(255, 255, 255, 0.03);
}
.stat .n { font-family: var(--font-mono); font-size: 22px; font-weight: 600; }
.stat .l {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--panel-muted); margin-top: 3px;
}

/* ---------- prose / faq — section markers carry the category jewel ---------- */
.prose { max-width: 68ch; margin-bottom: 40px; }
.prose h2, .faq h2, .related h2, .preset-links h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.prose h2::before, .faq h2::before, .related h2::before, .preset-links h2::before {
  content: '✦'; color: var(--cat); font-size: 0.62em;
  margin-right: 9px; vertical-align: 0.22em;
}
.prose h2 { margin-bottom: 12px; }
.prose p { color: #4C3A48; }
.prose p + p { margin-top: 10px; }
.faq { max-width: 68ch; margin-bottom: 48px; }
.faq h2 { margin-bottom: 14px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); margin-bottom: 8px;
  transition: border-color .12s ease;
}
.faq details:hover { border-color: #CDB9C8; }
.faq details[open] { border-color: var(--cat); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 15px;
  padding: 13px 42px 13px 16px; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 16px; top: 11px;
  font-family: var(--font-mono); color: var(--cat); font-size: 17px;
  transition: transform .15s ease;
}
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 16px 14px; color: var(--muted); font-size: 14.5px; animation: faqIn .16s ease-out; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* related */
.related { margin-bottom: 56px; }
.related h2 { margin-bottom: 14px; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); padding: 24px 0 36px;
  font-size: 13.5px; color: var(--muted); background: var(--card);
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.breadcrumb { font-family: var(--font-mono); font-size: 12.5px; margin-top: 20px; }
.breadcrumb a { color: var(--cat); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- preset pages (programmatic SEO) ---------- */
.preset-links { margin: 32px 0 8px; }
.preset-links h2 { font-size: 1.1rem; margin-bottom: 12px; }
.preset-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chips a {
  display: inline-block; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: inherit; text-decoration: none;
  font-size: 0.85rem; font-family: var(--font-mono);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.preset-chips a:hover { border-color: var(--cat); color: var(--cat); background: var(--cat-soft); }
.preset-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.9rem; }
.preset-table th, .preset-table td {
  padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.preset-table th:first-child, .preset-table td:first-child { text-align: left; }
.preset-table th {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.preset-table tbody tr:nth-child(even) { background: rgba(51, 32, 47, 0.025); }
.preset-table tr.hl td { font-weight: 700; background: var(--cat-soft); }
.preset-table tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--cat); }
.preset-note { font-size: 0.85rem; color: var(--muted); }

/* ================================================================
   OUTPUT SKINS — each tool's result is a familiar physical object.
   calc → till receipt · conv → desk instrument · text → typed page
   gen → ticket stub · number-to-words → bank cheque
   palette/gradient/shadow → framed artboard · spec → night panel
   ================================================================ */
.bench-output.skin-light { background: #F1EAF0; color: var(--ink); }
.bench-output.skin-light .out-label { color: var(--muted); }
.bench-output.skin-light button.ghost {
  color: var(--ink); border-color: var(--line); background: #fff;
}
.bench-output.skin-light button.ghost:hover {
  border-color: var(--cat); color: var(--cat); background: #fff;
}
.bench-output.skin-light .readout:empty::before { color: #C9BAC6; }
.bench-output.skin-light .stat {
  background: #fff; border: 1px solid var(--line);
}
.bench-output.skin-light .stat .l { color: var(--muted); }

/* ---- receipt (calculators): till paper with a serrated tear ---- */
.skin-receipt .readout, .skin-receipt .stat-grid {
  background: #fff; position: relative;
  box-shadow: 0 2px 4px rgba(51, 32, 47, 0.06), 0 14px 28px rgba(51, 32, 47, 0.13);
  transform: rotate(-0.6deg);
}
.skin-receipt .readout {
  flex: 0 1 auto; align-self: flex-start;
  min-width: min(240px, 100%); max-width: 100%;
  font-size: 13.5px; line-height: 1.9;
  padding: 16px 18px 22px;
  border-top: 4px solid var(--cat);
}
.skin-receipt .readout::after, .skin-receipt .stat-grid::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px;
  background:
    linear-gradient(-45deg, #fff 5px, transparent 0),
    linear-gradient(45deg, #fff 5px, transparent 0);
  background-size: 12px 7px; background-repeat: repeat-x;
}
.skin-receipt .readout:empty { display: none; }
.skin-receipt .stat-grid {
  display: flex; flex-direction: column; gap: 0;
  align-self: flex-start; min-width: min(240px, 100%);
  padding: 12px 18px 20px; border-top: 4px solid var(--cat);
}
.skin-receipt .stat {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px dashed var(--line);
  padding: 9px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.skin-receipt .stat:last-child { border-bottom: 0; }
.skin-receipt .stat .n { font-size: 18px; order: 2; }
.skin-receipt .stat .l { margin-top: 0; order: 1; }

/* ---- display (converters): desk instrument with an inset screen ---- */
.bench-output.skin-display { background: #F2EDE3; }
.skin-display .readout {
  flex: 0 1 auto;
  background: #DFE7D6; color: #263321;
  border-radius: 10px; padding: 16px 18px;
  min-height: 76px; font-size: 16px; letter-spacing: 0.01em;
  box-shadow:
    inset 0 2px 7px rgba(30, 40, 25, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 #fff;
}
.skin-display .readout:empty::before { color: #9DAA92; }
.skin-display .out-label { color: #8A7E68; }
.skin-display button.ghost { background: #FBF8F1; border-color: #DCD3C2; }
#preview.md-preview { border: 1px solid var(--line); }

/* ---- sheet (text tools): a page fresh out of the typewriter ---- */
.skin-sheet .readout {
  flex: 1 1 auto;
  background:
    linear-gradient(90deg, transparent 26px, rgba(214, 51, 108, 0.18) 26px 27px, transparent 27px),
    repeating-linear-gradient(#fff 0 23px, #EAF1F7 23px 24px);
  background-color: #fff;
  color: #3A2F38;
  font-size: 14px; line-height: 24px;
  padding: 15px 18px 22px 38px;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(51, 32, 47, 0.06), 0 14px 28px rgba(51, 32, 47, 0.12);
  position: relative;
}
.skin-sheet .readout::after {
  content: ''; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 16px 16px 0;
  border-color: #F1EAF0 #F1EAF0 #E3D6E0 #E3D6E0;
  box-shadow: -1px 1px 2px rgba(51, 32, 47, 0.08);
}
.skin-sheet .stat-grid { gap: 10px; }

/* ---- ticket (generators): a stub with notches and perforation ---- */
.skin-ticket .readout, .skin-ticket #qr-out {
  background: #fff; position: relative;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(51, 32, 47, 0.06), 0 14px 28px rgba(51, 32, 47, 0.13);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 13px);
  background-size: 2px calc(100% - 24px);
  background-position: right 40px top 12px;
  background-repeat: no-repeat;
  border-left: 6px solid var(--cat);
}
.skin-ticket .readout {
  flex: 0 1 auto;
  font-size: 16px; line-height: 1.7;
  padding: 18px 58px 18px 20px;
  word-break: normal; overflow-wrap: anywhere;
}
.skin-ticket .readout::before, .skin-ticket .readout::after,
.skin-ticket #qr-out::before, .skin-ticket #qr-out::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border-radius: 50%; background: #F1EAF0; top: 50%;
  box-shadow: inset 0 1px 2px rgba(51, 32, 47, 0.10);
}
.skin-ticket .readout::before, .skin-ticket #qr-out::before { left: -9px; transform: translateY(-50%); }
.skin-ticket .readout::after, .skin-ticket #qr-out::after { right: -9px; transform: translateY(-50%); }
.skin-ticket .readout:empty { display: none; }
.skin-ticket #qr-out { padding: 16px 58px 16px 18px; align-self: flex-start; }

/* ---- cheque (number to words): pay-to-the-order-of strip ---- */
.skin-cheque .readout {
  flex: 0 1 auto;
  background:
    repeating-linear-gradient(45deg, rgba(61, 92, 197, 0.05) 0 2px, transparent 2px 7px),
    linear-gradient(#F4F7FC, #F4F7FC);
  border: 1px solid #D3DDEE;
  border-radius: 6px;
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; line-height: 1.5; color: #2A3550;
  padding: 20px 22px 14px;
  box-shadow: 0 2px 4px rgba(42, 53, 80, 0.06), 0 12px 26px rgba(42, 53, 80, 0.12);
  position: relative;
}
.skin-cheque .readout::after {
  content: ''; display: block; margin-top: 12px;
  border-bottom: 1.5px solid #B9C6DE;
}
.skin-cheque .readout:empty { display: none; }

/* ---- easel (visual generators): the preview is a framed artboard ---- */
.bench-output.skin-easel { background: #EDE7EC; }
.skin-easel #preview {
  border: 8px solid #fff; border-radius: 4px;
  box-shadow: 0 3px 6px rgba(51, 32, 47, 0.10), 0 18px 38px rgba(51, 32, 47, 0.18);
}
.skin-easel #preview.shadow-stage { background: var(--paper); }
.skin-easel .readout {
  flex: 0 1 auto;
  background: #fff; border-radius: 8px;
  font-size: 12.5px; padding: 12px 14px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(51, 32, 47, 0.07);
}

/* ================================================================
   SPECIALS STAGE — weekly specials get a full-width light stage.
   Each tool carries its own theme (--sp-*) set by build.js:
   background pair, pattern colour, accent, watermark glyph.
   ================================================================ */
.bench.is-spec { grid-template-columns: 1fr; border-color: var(--line);
  box-shadow: 0 2px 6px rgba(51, 32, 47, 0.06), 0 20px 48px rgba(51, 32, 47, 0.12);
}
.is-spec .bench-output { border: 0; min-height: 380px; }
.is-spec #preview { margin: auto; max-width: 100%; }
.is-spec .readout {
  flex: 0 1 auto; margin: auto;
  font-size: clamp(15px, 2.4vw, 19px); line-height: 1.85;
}
.is-spec .out-actions { justify-content: center; }
.stage-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 4px;
}
.stage-actions .ghost {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(51, 32, 47, 0.18);
  color: var(--ink);
  backdrop-filter: blur(3px);
}
.stage-actions .ghost:hover {
  background: #fff; border-color: var(--sp-accent, var(--cat));
}
#share-btn { border-color: var(--sp-accent, var(--cat)); box-shadow: 0 6px 18px rgba(51, 32, 47, 0.12); }

/* controls become a slim console strip under the stage */
.is-spec .bench-controls {
  flex-direction: row; flex-wrap: wrap; align-items: flex-end;
  gap: 12px 14px; padding: 18px 22px;
  border-top: 1px solid var(--line);
}
.is-spec .bench-controls > div { flex: 1 1 170px; min-width: 0; }
.is-spec .bench-controls > .row { flex: 2 1 300px; }
.is-spec .bench-controls > div:has(> textarea) { flex-basis: 100%; }
.is-spec .bench-controls > .check { flex: 0 1 auto; padding-bottom: 9px; }
.is-spec .bench-controls button.action { flex: 0 0 auto; }
@media (max-width: 720px) {
  .is-spec .bench-output { min-height: 300px; }
}

/* ================================================================
   SKINS — 2026 wave: recipe card, wall calendar, dusk bedroom,
   kraft tag, photo studio; plus file & color inputs.
   ================================================================ */
input[type=file] {
  width: 100%; font-family: var(--font-body); font-size: 13.5px;
  padding: 14px 12px; color: var(--muted);
  border: 1.5px dashed var(--line); border-radius: 10px;
  background: #fff; cursor: pointer;
  transition: border-color .12s ease;
}
input[type=file]:hover, input[type=file]:focus { border-color: var(--cat); outline: none; }
input[type=file]::file-selector-button {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  background: var(--cat); color: #fff; border: 0;
  padding: 7px 14px; border-radius: 999px; margin-right: 12px; cursor: pointer;
}
input[type=color] {
  width: 100%; height: 42px; padding: 4px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer;
}
input[type=color]:focus { outline: none; border-color: var(--cat); box-shadow: 0 0 0 3px var(--cat-ring); }

/* ---- recipe (cooking): a card taped to the fridge ---- */
.bench-output.skin-recipe { background: #F5F0E4; }
.skin-recipe .readout {
  flex: 0 1 auto; align-self: center; margin: auto;
  background: #FFFDF6; color: #4A3B2A;
  border: 1px solid #E8DFC8; border-radius: 4px;
  font-size: 16px; text-align: center;
  padding: 26px 30px; min-width: min(280px, 100%);
  box-shadow: 0 2px 4px rgba(74, 59, 42, 0.08), 0 14px 30px rgba(74, 59, 42, 0.14);
  transform: rotate(0.5deg); position: relative;
}
.skin-recipe .readout::before, .skin-recipe .readout::after {
  content: ''; position: absolute; width: 74px; height: 22px;
  background: rgba(214, 51, 108, 0.16); top: -11px;
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
}
.skin-recipe .readout::before { left: -18px; transform: rotate(-42deg); }
.skin-recipe .readout::after { right: -18px; transform: rotate(42deg); }
.skin-recipe .out-label { color: #9A8A6E; }

/* ---- calendar (days until): a wall-calendar leaf ---- */
.skin-calendar .readout {
  flex: 0 1 auto; align-self: center; margin: auto;
  background: #fff; color: var(--ink);
  border-radius: 10px; text-align: center;
  min-width: 210px; padding: 44px 30px 24px;
  border-top: 34px solid var(--cat);
  box-shadow: 0 2px 4px rgba(51, 32, 47, 0.08), 0 16px 32px rgba(51, 32, 47, 0.15);
  position: relative; line-height: 1.5;
}
.skin-calendar .readout::first-line {
  font-family: var(--font-display); font-size: 52px; font-weight: 600;
  color: var(--cat);
}
.skin-calendar .readout::before, .skin-calendar .readout::after {
  content: ''; position: absolute; top: -46px; width: 10px; height: 24px;
  border: 3px solid #B8A6B3; border-bottom: 0;
  border-radius: 8px 8px 0 0; background: transparent;
}
.skin-calendar .readout::before { left: 26%; }
.skin-calendar .readout::after { right: 26%; }

/* ---- dusk (sleep): a bedroom at night with a moon ---- */
.bench-output.skin-dusk {
  background:
    radial-gradient(120px 120px at 84% 20%, rgba(246, 240, 214, 0.28), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px),
    linear-gradient(#20263F, #262B49);
  background-size: auto, 24px 24px, auto;
  color: #DDE3FF; border-color: transparent;
}
.skin-dusk .readout {
  font-size: 17px; line-height: 2.05; letter-spacing: 0.02em;
  text-shadow: 0 0 22px rgba(160, 176, 255, 0.35);
}
.skin-dusk .readout:empty::before { color: #47507C; }
.skin-dusk .out-label { color: #8E97C6; }
.skin-dusk .out-label::before { background: #F6F0D6; box-shadow: 0 0 0 3px rgba(246, 240, 214, 0.25); }
.skin-dusk .tab { background: #F6F0D6; color: #33202F; }
.skin-dusk button.ghost { color: #DDE3FF; border-color: #47507C; }
.skin-dusk button.ghost:hover { border-color: #DDE3FF; background: rgba(255, 255, 255, 0.06); }

/* ---- tag (shoe sizes): a kraft hang-tag with a punched hole ---- */
.skin-tag .readout {
  flex: 0 1 auto; align-self: center; margin: auto;
  background: #E9DCC4; color: #4A3B2A;
  border: 1px solid #D6C6A6; border-radius: 8px 22px 8px 8px;
  font-size: 14.5px; line-height: 2;
  min-width: 220px; padding: 20px 24px 18px 30px;
  transform: rotate(-1.4deg); position: relative;
  box-shadow: 0 2px 4px rgba(74, 59, 42, 0.10), 0 14px 28px rgba(74, 59, 42, 0.16);
}
.skin-tag .readout::before {
  content: ''; position: absolute; top: 14px; left: 12px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #F1EAF0; border: 2.5px solid #C9B889;
  box-shadow: inset 0 1px 2px rgba(74, 59, 42, 0.2);
}
.skin-tag .out-label { color: #9A8A6E; }

/* ---- studio (files & images): checkerboard light table ---- */
.bench-output.skin-studio { background: #ECEAF0; }
.skin-studio #preview,
#preview.studio-img, #preview.studio-favicons {
  background:
    conic-gradient(#E2DFE7 0 25%, #F7F5FA 0 50%, #E2DFE7 0 75%, #F7F5FA 0) 0 0 / 16px 16px;
  border: 6px solid #fff; border-radius: 6px;
  box-shadow: 0 2px 5px rgba(51, 32, 47, 0.10), 0 16px 34px rgba(51, 32, 47, 0.16);
  padding: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  overflow: hidden;
}
#preview.studio-img img { display: block; max-width: 100%; max-height: 260px; }
#preview.studio-favicons { padding: 22px; }
#preview.studio-favicons img { display: block; }
.skin-studio .readout {
  flex: 0 1 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(51, 32, 47, 0.07);
}
.skin-studio .readout:empty { display: none; }

/* ================================================================
   SKIN-SPEC — per-tool editorial stage for weekly specials.
   Light, informative, no terminal vibes: serif readouts, sentence-
   case labels, themed pattern + accent + watermark per tool.
   ================================================================ */
.bench-output.skin-spec {
  position: relative;
  background-color: var(--sp-bg2, #F1EAF0);
  color: var(--ink);
  border-color: transparent;
  overflow: hidden;
}
/* watermark glyph, unique per tool */
.bench-output.skin-spec::after {
  content: var(--sp-sym, '✦');
  position: absolute; right: 10px; bottom: -18px;
  font-family: var(--font-display); font-size: 148px; line-height: 1;
  color: var(--sp-accent, var(--cat)); opacity: 0.09;
  pointer-events: none; user-select: none;
}
/* themed patterns — every class ends with the base gradient layer */
.skin-spec.pat-plain { background-image:
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2)); }
.skin-spec.pat-dots { background-image:
  radial-gradient(var(--sp-pat) 1.2px, transparent 1.7px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2));
  background-size: 22px 22px, auto; }
.skin-spec.pat-grid { background-image:
  linear-gradient(var(--sp-pat) 1px, transparent 1px),
  linear-gradient(90deg, var(--sp-pat) 1px, transparent 1px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2));
  background-size: 26px 26px, 26px 26px, auto; }
.skin-spec.pat-rows { background-image:
  linear-gradient(var(--sp-pat) 1px, transparent 1px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2));
  background-size: 100% 27px, auto; }
.skin-spec.pat-diag { background-image:
  repeating-linear-gradient(45deg, var(--sp-pat) 0 1px, transparent 1px 19px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2)); }
.skin-spec.pat-rings { background-image:
  repeating-radial-gradient(circle at 50% 38%, var(--sp-pat) 0 1px, transparent 1px 36px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2)); }
.skin-spec.pat-waves { background-image:
  repeating-linear-gradient(112deg, var(--sp-pat) 0 1px, transparent 1px 21px),
  repeating-linear-gradient(68deg, var(--sp-pat) 0 1px, transparent 1px 21px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2)); }
.skin-spec.pat-scales { background-image:
  radial-gradient(circle at 50% 115%, transparent 11px, var(--sp-pat) 11.8px, transparent 12.8px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2));
  background-size: 30px 24px, auto; }
.skin-spec.pat-confetti { background-image:
  radial-gradient(var(--sp-pat) 1.5px, transparent 2px),
  radial-gradient(var(--sp-pat) 1.1px, transparent 1.5px),
  linear-gradient(168deg, var(--sp-bg), var(--sp-bg2));
  background-size: 30px 30px, 30px 30px, auto;
  background-position: 0 0, 15px 11px, 0 0; }

/* informative header instead of terminal readout */
.skin-spec .tab { background: var(--sp-accent, var(--cat)); }
.skin-spec .out-label {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
.skin-spec .out-label::before {
  width: 8px; height: 8px; border-radius: 3px;
  background: var(--sp-accent, var(--cat));
  box-shadow: none; animation: none;
}
.skin-spec .readout {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.7vw, 23px); line-height: 1.75;
  letter-spacing: 0.005em; color: var(--ink);
  white-space: pre-wrap;
}
.skin-spec .readout:empty::before { content: '✦'; color: var(--sp-pat, #C9BAC6); }
.skin-spec .stat { background: rgba(255, 255, 255, 0.66); border-color: rgba(51, 32, 47, 0.10); }
.skin-spec .stat .l { color: var(--muted); }
.skin-spec .stat .v { color: var(--ink); }
/* canvases and previews sit like framed figures on the stage */
.skin-spec canvas,
.skin-spec #preview:not(:empty) {
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(51, 32, 47, 0.10), 0 18px 40px rgba(51, 32, 47, 0.16);
}
.skin-spec button.ghost { color: var(--ink); border-color: rgba(51, 32, 47, 0.22); }
.skin-spec button.ghost:hover { border-color: var(--sp-accent, var(--cat)); background: #fff; }

/* ---- specials FX: figures enter softly, hero first line, serif stats ---- */
@keyframes figure-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.skin-spec #preview > canvas,
.skin-spec #preview > div,
.skin-spec #preview > img { animation: figure-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.skin-spec .readout::first-line {
  font-size: clamp(24px, 3.6vw, 34px); font-weight: 600;
  color: var(--sp-accent, var(--cat));
}
.skin-spec .stat .n {
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-break: normal; overflow-wrap: normal;   /* число не рвётся внутри группы */
}
/* живые карточки (you-in-numbers): шире чипы, число одной строкой */
.skin-spec .readout .stat-grid[data-live] { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.stat-grid[data-live] .n {
  white-space: nowrap; font-size: clamp(15px, 1.9vw, 19px);
  /* живое число: моноширинные табличные цифры — строка не гуляет при каждом тике */
  font-family: var(--font-mono); font-weight: 600;
}
.stat-grid[data-live] .stat { padding-right: 38px; } /* зона иконки всегда свободна */
.skin-spec .stat:has(.stat-ic) { padding-right: 38px; }
.skin-spec .readout .stat-grid {
  font-family: var(--font-body); white-space: normal;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  text-align: left; margin: 0 0 6px;
}
.skin-spec .readout .stat { background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(51, 32, 47, 0.10); }
body[data-tool="life-in-weeks"] .skin-spec .readout { order: -1; margin: 0 0 4px; flex: 0 0 auto; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .skin-spec #preview > * { animation: none; }
}

/* ---- you-in-numbers: odometer hero, living cards, milestones ---- */
.skin-spec .odo-hero {
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(51, 32, 47, 0.10);
  border-radius: 16px; padding: 18px 16px 16px; text-align: center; margin-bottom: 12px;
}
.skin-spec .odo-cap { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.skin-spec .odo { display: inline-flex; gap: clamp(2px, 0.4vw, 3px); margin-top: 9px; direction: ltr; max-width: 100%; }
.skin-spec .odo-g { width: clamp(5px, 1vw, 10px); }
.skin-spec .odo-d {
  position: relative; display: block; width: clamp(19px, 3.8vw, 38px); height: clamp(31px, 5.8vw, 56px);
  background: linear-gradient(#FFFFFF, #F4F1F6);
  border: 1px solid rgba(51, 32, 47, 0.12); border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 -8px 12px rgba(51, 32, 47, 0.05);
}
.skin-spec .odo-c {
  position: absolute; left: 0; right: 0; top: 0; display: block;
  transition: transform .34s cubic-bezier(.3, .8, .35, 1);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 3.6vw, 36px); line-height: clamp(31px, 5.8vw, 56px);
  color: var(--sp-accent, var(--cat)); text-align: center; white-space: pre-line;
}
@keyframes fx-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.3); } 24% { transform: scale(1); } }
.fx-beat { display: inline-block; color: #D6336C; animation: fx-beat 0.857s ease-in-out infinite; }
@keyframes fx-breathe { 0%, 100% { transform: scale(.8); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } }
.fx-breathe { display: inline-block; color: var(--sp-accent, var(--cat)); animation: fx-breathe 4s ease-in-out infinite; }
.skin-spec .stat { position: relative; }
.skin-spec .stat-ic { position: absolute; top: 8px; right: 10px; font-size: 17px; }
.skin-spec .stat .cmp { font-size: 11.5px; color: var(--sp-accent, var(--cat)); margin-top: 5px; }
.skin-spec .miles-cap { font-family: var(--font-display); font-size: 17px; margin: 14px 0 8px; }
.skin-spec .miles { display: grid; gap: 8px; text-align: left; }
.skin-spec .mile {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(51, 32, 47, 0.10);
  border-left: 4px solid var(--sp-accent, var(--cat));
  border-radius: 11px; padding: 9px 14px;
}
.skin-spec .mile b { font-family: var(--font-display); font-size: 15.5px; }
.skin-spec .mile .when { margin-left: auto; color: #D6336C; font-weight: 600; font-size: 13px; }
.skin-spec .mile .d { color: var(--muted); font-size: 11.5px; flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { .fx-beat, .fx-breathe, .skin-spec .odo-c { animation: none; transition: none; } }

/* ---- hex-clock: chameleon sky, day palette, pretty colors ---- */
.skin-spec #preview.hc-sky {
  min-height: 250px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: background-color 0.9s linear; position: relative;
  color: #FFFDFB; padding: 26px 18px;
}
.hc-time {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(42px, 7.5vw, 72px); letter-spacing: 0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hc-hex {
  font-family: var(--font-mono); font-size: clamp(15px, 2.4vw, 20px);
  padding: 6px 16px; border-radius: 999px; cursor: pointer;
  color: inherit; background: rgba(255, 255, 255, 0.14);
  border: 1px solid currentColor; transition: background .15s;
}
.hc-hex:hover { background: rgba(255, 255, 255, 0.28); }
.hc-comp {
  position: absolute; right: 14px; bottom: 12px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; opacity: 0.85;
}
.hc-comp i { width: 20px; height: 20px; border-radius: 6px; border: 1px solid currentColor; }
.skin-spec .hc-cap { font-family: var(--font-display); font-size: 17px; margin: 14px 0 8px; text-align: left; }
.skin-spec .hc-day { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.skin-spec .hc-day span {
  aspect-ratio: 1 / 1.6; border-radius: 5px; cursor: pointer; transition: transform .12s; position: relative;
}
.skin-spec .hc-day span:hover { transform: translateY(-3px); }
.skin-spec .hc-day span.now { outline: 2.5px solid #D6336C; outline-offset: 2px; }
.skin-spec .hc-pretty { display: grid; gap: 8px; text-align: left; }
.skin-spec .hc-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(51, 32, 47, 0.10);
  border-radius: 11px; padding: 9px 13px;
}
.skin-spec .hc-row .sw { width: 38px; height: 38px; border-radius: 9px; flex: none; border: 1px solid rgba(51, 32, 47, 0.12); }
.skin-spec .hc-row b { font-family: var(--font-mono); font-size: 13.5px; }
.skin-spec .hc-row .why { font-size: 11.5px; color: var(--muted); }
.skin-spec .hc-row .cd { margin-left: auto; font: 600 14px var(--font-mono); color: #D6336C; font-variant-numeric: tabular-nums; }

/* ---- birth-star: ray timeline ---- */
.skin-spec .bs-ray {
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(51, 32, 47, 0.10);
  border-radius: 13px; padding: 30px 20px 14px; margin-top: 12px; text-align: left;
}
.skin-spec .bs-ray .track { position: relative; height: 4px; background: rgba(51, 32, 47, 0.12); border-radius: 2px; margin: 0 6px; }
.skin-spec .bs-ray .fill { position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--sp-accent, #B98A1F), #D6336C); }
.skin-spec .bs-ray .dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 3px solid var(--sp-accent, #B98A1F); }
.skin-spec .bs-ray .dot.end { border-color: #D6336C; }
.skin-spec .bs-ray .tag { position: absolute; top: -24px; font-size: 12px; color: var(--muted); white-space: nowrap; left: 0; }
.skin-spec .bs-ray .dot.end .tag { left: auto; right: 0; text-align: right; }
.skin-spec .bs-ray .cap { font-size: 13px; color: var(--muted); text-align: center; margin-top: 13px; }

/* ---- breathing-trainer: session scene ---- */
.skin-spec #preview.br-scene {
  position: relative; min-height: clamp(320px, 56vw, 400px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: radial-gradient(480px 300px at 50% 45%, #FFFFFF, rgba(255, 255, 255, 0.35) 70%, transparent);
}
.br-why { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--muted); padding: 0 16px; }
.br-ring {
  position: absolute; inset: 0; margin: auto;
  width: min(320px, calc(100% - 26px)); aspect-ratio: 1 / 1; height: auto;
  transform: rotate(-90deg);
}
.br-ring circle { fill: none; stroke-width: 5; }
.br-ring .bgc { stroke: rgba(51, 32, 47, 0.10); }
.br-ring .fgc { stroke: var(--sp-accent, #0E8A66); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.br-bloom { position: relative; width: min(180px, 44vw); aspect-ratio: 1 / 1; }
.br-petal {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(14, 138, 102, 0.36), rgba(14, 138, 102, 0.09) 70%);
  transform-origin: 50% 50%;
}
.br-core {
  position: absolute; inset: 24%; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fff, #ECF5F0);
  box-shadow: 0 6px 22px rgba(14, 138, 102, 0.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.br-ph { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.br-n { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--sp-accent, #0E8A66); line-height: 1.05; }
.br-done {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(3px); border-radius: 16px;
}
.br-done b { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--sp-accent, #0E8A66); }
.br-done span { color: var(--muted); font-size: 13.5px; padding: 0 18px; text-align: center; }

/* breathing-trainer: pattern cards above the scene */
body[data-tool="breathing-trainer"] .skin-spec .readout { order: -1; flex: 0 0 auto; width: 100%; margin-bottom: 6px; }
.skin-spec .br-pats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 9px; text-align: left; white-space: normal; font-family: var(--font-body);
}
.skin-spec .br-pat {
  background: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(51, 32, 47, 0.12);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left;
  font-family: var(--font-body); color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.skin-spec .br-pat:hover { transform: translateY(-2px); }
.skin-spec .br-pat.on { border-color: var(--sp-accent, #0E8A66); box-shadow: 0 0 0 3px rgba(14, 138, 102, 0.13); }
.skin-spec .br-pat b { font-family: var(--font-display); font-size: 15px; display: block; }
.skin-spec .br-pat .rhythm { display: block; font: 600 11.5px var(--font-mono); color: var(--sp-accent, #0E8A66); margin: 3px 0; }
.skin-spec .br-pat .why { display: block; font-size: 11px; color: var(--muted); line-height: 1.45; }