/* Smallo.app – base styles. Colors are tokens: change them here only.
   Dark mode uses a soft dark gray, not black. Replace the --dark-* values
   with the exact Fonditos gray if you want them to match. */

:root {
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #f0f0ec;
  --text: #1c1c1f;
  --muted: #5f5f66;
  --border: #e2e2dc;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --danger: #b42318;
  --radius: 14px;
  --max: 1600px;
  --c-sales: #b45309;
  --c-sales-soft: rgba(180,83,9, .15);
  --c-sales-line: rgba(180,83,9, .42);
  --c-finance: #0f766e;
  --c-finance-soft: rgba(15,118,110, .15);
  --c-finance-line: rgba(15,118,110, .42);
  --c-inventory: #1d4ed8;
  --c-inventory-soft: rgba(29,78,216, .15);
  --c-inventory-line: rgba(29,78,216, .42);
  --c-marketing: #be185d;
  --c-marketing-soft: rgba(190,24,93, .14);
  --c-marketing-line: rgba(190,24,93, .40);
  --c-hr: #6d28d9;
  --c-hr-soft: rgba(109,40,217, .14);
  --c-hr-line: rgba(109,40,217, .40);
  --c-convert: #0e7490;
  --c-convert-soft: rgba(14,116,144, .15);
  --c-convert-line: rgba(14,116,144, .42);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --dark-bg: #26262a;
  --dark-surface: #2e2e33;
  --dark-surface-2: #37373d;
  --dark-text: #ececE8;
  --dark-muted: #a7a7b0;
  --dark-border: #46464e;
  --dark-accent: #5eead4;
  --dark-accent-ink: #11312c;
  --dark-danger: #f97066;
  --dark-c-sales: #fbbf24;
  --dark-c-finance: #5eead4;
  --dark-c-inventory: #93c5fd;
  --dark-c-marketing: #f9a8d4;
  --dark-c-hr: #c4b5fd;
  --dark-c-convert: #67e8f9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --border: var(--dark-border);
    --accent: var(--dark-accent);
    --accent-ink: var(--dark-accent-ink);
    --danger: var(--dark-danger);
    --c-sales: var(--dark-c-sales);
    --c-sales-soft: rgba(251,191,36, .18);
    --c-sales-line: rgba(251,191,36, .42);
    --c-finance: var(--dark-c-finance);
    --c-finance-soft: rgba(94,234,212, .18);
    --c-finance-line: rgba(94,234,212, .42);
    --c-inventory: var(--dark-c-inventory);
    --c-inventory-soft: rgba(147,197,253, .18);
    --c-inventory-line: rgba(147,197,253, .42);
    --c-marketing: var(--dark-c-marketing);
    --c-marketing-soft: rgba(249,168,212, .18);
    --c-marketing-line: rgba(249,168,212, .42);
    --c-hr: var(--dark-c-hr);
    --c-hr-soft: rgba(196,181,253, .18);
    --c-hr-line: rgba(196,181,253, .42);
    --c-convert: var(--dark-c-convert);
    --c-convert-soft: rgba(103,232,249, .18);
    --c-convert-line: rgba(103,232,249, .42);
  }
}

:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --border: var(--dark-border);
  --accent: var(--dark-accent);
  --accent-ink: var(--dark-accent-ink);
  --danger: var(--dark-danger);
  --c-sales: var(--dark-c-sales);
  --c-sales-soft: rgba(251,191,36, .18);
  --c-sales-line: rgba(251,191,36, .42);
  --c-finance: var(--dark-c-finance);
  --c-finance-soft: rgba(94,234,212, .18);
  --c-finance-line: rgba(94,234,212, .42);
  --c-inventory: var(--dark-c-inventory);
  --c-inventory-soft: rgba(147,197,253, .18);
  --c-inventory-line: rgba(147,197,253, .42);
  --c-marketing: var(--dark-c-marketing);
  --c-marketing-soft: rgba(249,168,212, .18);
  --c-marketing-line: rgba(249,168,212, .42);
  --c-hr: var(--dark-c-hr);
  --c-hr-soft: rgba(196,181,253, .18);
  --c-hr-line: rgba(196,181,253, .42);
  --c-convert: var(--dark-c-convert);
  --c-convert-soft: rgba(103,232,249, .18);
  --c-convert-line: rgba(103,232,249, .42);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }
img, svg { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.top { position: -webkit-sticky; position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; letter-spacing: -0.02em; }
.brand span { color: var(--accent); }

/* Type */
h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.2; margin: 1.25rem 0 0.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 64ch; margin: 0 0 1.25rem; }
.note { color: var(--muted); font-size: 0.9rem; margin: 0; }
.privacy { color: var(--muted); font-size: 0.85rem; margin: 16px 0 0; }
/* Breadcrumb: quiet gray icons (home > category). The category link goes back to its group on the home page. */
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crumb {
  display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 15px; color: var(--muted); border: 1px solid transparent; transition: color .2s, background-color .2s, border-color .2s;
}
.crumb:hover, .crumb:focus-visible { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.crumb svg, .crumb-sep svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crumb svg { width: 28px; height: 28px; }
.crumb-sep { display: inline-flex; opacity: .6; }
.crumb-sep svg { width: 18px; height: 18px; }
/* Bottom navigation: the icons sit as far from the footer as the home cards do (the button's inner space is transparent). */
.crumbs.back { margin-bottom: -13px; }

/* Home */
.hero { padding-top: 0.5rem; }
/* Search with live results (home and menu) */
.search { position: relative; margin: 1.25rem 0 0.5rem; max-width: 640px; scroll-margin-top: 76px; }
.search input {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px 12px 46px;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.search input::-webkit-search-decoration { -webkit-appearance: none; }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-ico { position: absolute; left: 15px; top: 0; height: 52px; display: flex; align-items: center; color: var(--muted); pointer-events: none; }
.search-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.search-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 4;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); padding: 6px;
  max-height: min(70vh, 540px); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.search-panel[hidden] { display: none; }
/* Phones: the home results show in full (no inner scroll), so nothing is cut behind the keyboard. */
@media (max-width: 719px) { .search:not(.search-inline) .search-panel { max-height: none; overflow: visible; } }
.search-inline { margin: 0 0 16px; max-width: none; }
.search-inline .search-panel { position: static; box-shadow: none; border: 0; padding: 0; margin-top: 10px; max-height: none; overflow: visible; }
.sr-head { margin: 0; padding: 8px 10px 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sr-empty { margin: 0; padding: 10px 10px 6px; color: var(--muted); font-size: 0.92rem; }
.sr-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px; color: var(--text); text-decoration: none; min-height: 56px;
}
.sr-item.is-active { background: var(--surface-2); }
.sr-item .ico { width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.sr-item .ico svg { width: 22px; height: 22px; }
.sr-text { min-width: 0; }
.sr-name { display: block; font-weight: 600; line-height: 1.3; }
.sr-name mark { background: var(--cat-soft); color: inherit; border-radius: 4px; padding: 0 1px; }
.sr-desc { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-cat { font-size: 0.72rem; font-weight: 700; color: var(--cat); background: var(--cat-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
@media (max-width: 520px) { .sr-cat { display: none; } .sr-item { grid-template-columns: auto minmax(0, 1fr); } }
.menu-search { margin-bottom: 4px; }
.menu-body[hidden] { display: none !important; }
/* Time card: one compact row per day */
.tc-days { display: grid; gap: 12px; }
.tc-day { display: grid; gap: 6px; }
.tc-name { font-weight: 700; font-size: 0.92rem; }
.tc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; gap: 8px; }
.tc-row .field > span { font-size: 0.78rem; }
.tc-row input { min-width: 0; padding-left: 8px; padding-right: 6px; }
@media (max-width: 520px) {
  /* Room for the full time with AM/PM on phones; tapping the field still opens the time picker */
  .tc-row input::-webkit-calendar-picker-indicator { display: none; }
  .tc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px; }
}
/* Two short fields side by side, also on phones (volume discount tiers) */
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cat { margin-top: 1.5rem; }
.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}
.card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.card:hover { border-color: var(--accent); }
.card[hidden] { display: none; }
[hidden] { display: none !important; }

/* Tool page */
.tool-page { padding-bottom: 0; }
.tool-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 0.5rem;
}
@media (min-width: 640px) { .tool-wrap { padding: 24px; } }

/* min-width: 0 stops wide tables from stretching the page on phones; they scroll inside .table-wrap instead */
.tool { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.block { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.tool-wrap, .tool-page, .faq, .related { min-width: 0; }
.results { min-width: 0; }
.table-wrap { min-width: 0; max-width: 100%; }
.block + .block { border-top: 1px solid var(--border); padding-top: 18px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 560px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid.three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  font: inherit;
  font-size: 15px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn:active { transform: scale(0.98); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.results { display: grid; margin: 0; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.row dt { color: var(--muted); }
.row dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.row.big dd { font-size: 1.35rem; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
table.data th { color: var(--muted); font-weight: 500; }
table.data .num { text-align: right; }

.error { color: var(--danger); font-size: 0.9rem; margin: 0; }
.code-box { background: #ffffff; color: #000000; border-radius: 10px; padding: 16px; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }
.code-box svg { max-width: 100%; height: auto; }
.preview { background: var(--surface-2); border-radius: 10px; padding: 16px; }
.list-rows { display: grid; gap: 8px; min-width: 0; }
.list-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); align-items: end; min-width: 0; }
@media (min-width: 640px) { .list-row { grid-template-columns: 2fr 1fr 1fr auto; } }
.list-row.three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .list-row.three { grid-template-columns: 3fr 1fr auto; } }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }

/* Long text content */
.faq h3 { margin-top: 1rem; font-size: 1rem; }
.faq p { margin: 0 0 0.5rem; color: var(--muted); max-width: 68ch; }
.related .grid { margin-top: 0.25rem; }
.back { margin: 2rem 0 0; }

/* Footer */
.foot { border-top: 1px solid var(--border); margin-top: 3rem; padding: 20px 0 32px; color: var(--muted); font-size: 0.88rem; }
.foot p { margin: 0; }

/* Printable document (quote and invoice): hidden on screen, shown only when printing */
.print-doc { display: none; }

/* Print: only the tool's document is printed */
@media print {
  .print-doc { display: block !important; }
  .doc-form { display: none !important; }
}
@media print {
  .top, .foot, .no-print, .tool-top, .crumbs, .privacy, .faq, .related, .back, .lead, h1 { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .wrap { max-width: none; padding: 0; }
  .tool-wrap { border: 0; padding: 0; background: #ffffff; }
  .print-doc { color: #000000; }
  .print-doc input, .print-doc textarea, .print-doc select { border: 0; background: transparent; color: #000; }
  .row dt, .row dd, table.data th, table.data td { color: #000; }
}

/* Category colors: each card and tool page takes the color of its category */
.cat-sales { --cat: var(--c-sales); --cat-soft: var(--c-sales-soft); --cat-line: var(--c-sales-line); }
.cat-finance { --cat: var(--c-finance); --cat-soft: var(--c-finance-soft); --cat-line: var(--c-finance-line); }
.cat-inventory { --cat: var(--c-inventory); --cat-soft: var(--c-inventory-soft); --cat-line: var(--c-inventory-line); }
.cat-marketing { --cat: var(--c-marketing); --cat-soft: var(--c-marketing-soft); --cat-line: var(--c-marketing-line); }
.cat-hr { --cat: var(--c-hr); --cat-soft: var(--c-hr-soft); --cat-line: var(--c-hr-line); }
.cat-convert { --cat: var(--c-convert); --cat-soft: var(--c-convert-soft); --cat-line: var(--c-convert-line); }

/* Icons: outline style, tinted tile in the category color */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px; flex: none;
  background: var(--cat-soft, var(--surface-2));
  color: var(--cat, var(--accent));
}
.ico svg, .flow svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Tool page top row: breadcrumb on the left, the tool icon floating in the right corner under the color line */
.tool-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 12px; }
.tool-top + .tool-page h1 { margin-top: 0.5rem; }

/* How to use it */
.howto { margin-top: 2rem; }
.howto h2 { margin-top: 0; }
.flow {
  list-style: none; margin: 0 0 1rem; padding: 14px; display: grid; gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.flow li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 0.82rem; color: var(--muted); min-width: 0; }
.flow li .ico { margin: 0; }
.flow li.arr { color: var(--muted); }
.flow li.arr svg { width: 20px; height: 20px; }
.steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 8px; }
.steps li { padding-left: 4px; }

/* ---------- Colorful look ---------- */
.top { position: -webkit-sticky; position: sticky; }
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, #14b8a6, #2563eb, #db2777, #f59e0b);
}
.brand { display: inline-flex; align-items: center; padding-left: 6px; }
.brand .logo { height: 26px; width: auto; display: block; overflow: visible; }
@media (min-width: 520px) { .brand .logo { height: 32px; } }
/* Logo tiles: they "open" like windows on page load, and move apart on hover. CSS only; off for reduced motion. */
.brand .lt { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.brand:hover .lt1, .brand:focus-visible .lt1 { transform: translate(-2px, -2px) rotate(-4deg); }
.brand:hover .lt2, .brand:focus-visible .lt2 { transform: translate(2px, -2px) rotate(4deg); }
.brand:hover .lt3, .brand:focus-visible .lt3 { transform: translate(-2px, 2px) rotate(4deg); }
.brand:hover .lt4, .brand:focus-visible .lt4 { transform: translate(2px, 2px) rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) {
  .brand .lt { animation: lt-open .7s cubic-bezier(.2,.8,.2,1) backwards; }
  .brand .lt1 { --fx: 14px; --fy: 14px; animation-delay: .05s; }
  .brand .lt2 { --fx: -14px; --fy: 14px; animation-delay: .15s; }
  .brand .lt3 { --fx: 14px; --fy: -14px; animation-delay: .25s; }
  .brand .lt4 { --fx: -14px; --fy: -14px; animation-delay: .35s; }
}
@keyframes lt-open {
  from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.2) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}
.logo-word { fill: var(--text); }
.logo-app { fill: var(--accent); }
.menu-btn svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.bar { gap: 12px; }

/* Header menu with every tool */
.menu { position: static; }
.menu-btn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); user-select: none;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn svg { flex: none; width: 20px; height: 20px; }
.menu[open] .menu-btn { border-color: var(--accent); }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.menu-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.menu-close {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
/* Tools first; on phones the settings sit below them, on wide screens they form a vertical column on the right */
.menu-body { display: block; }
.menu-settings {
  display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 14px; margin-top: 28px;
  border-radius: 16px; background: var(--surface-2);
}
@media (min-width: 900px) {
  .menu-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
  .menu-settings {
    position: sticky; top: 0; margin-top: 0; flex-direction: column; flex-wrap: nowrap; gap: 20px; padding: 18px;
  }
  .menu-settings .seg { flex-direction: column; }
  .menu-settings .seg a, .menu-settings .seg button { justify-content: flex-start; width: 100%; }
}
html.menu-open { overflow: hidden; }
.set { display: flex; flex-direction: column; gap: 6px; }
.set-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.seg {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.seg a, .seg button {
  min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); font: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.seg a[aria-current="page"], .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 6; max-height: 74vh; overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.14); padding: 18px 0 24px;
  overscroll-behavior: contain;
}
.menu-grid { display: grid; gap: 18px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.menu-cat h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 8px;
  color: var(--cat); font-weight: 800;
}
.menu-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-cat a {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 0.93rem; min-height: 40px;
}
.menu-cat a:hover { background: var(--surface-2); }
.menu-cat .ico { width: 32px; height: 32px; margin: 0; border-radius: 9px; }
.menu-cat .ico svg { width: 18px; height: 18px; }
@media (max-width: 520px) {
  .menu-btn { padding: 0; width: 44px; justify-content: center; }
  .menu-btn .lbl { display: none; }
}

/* Home: colorful hero, category chips and section titles */
.hero {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 24px max(clamp(16px, 3vw, 48px), calc((100vw - var(--max)) / 2 + clamp(16px, 3vw, 48px))) 8px; border-radius: 0 0 28px 28px;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(20, 184, 166, 0.22), transparent 60%),
    radial-gradient(50% 120% at 100% 0%, rgba(219, 39, 119, 0.15), transparent 60%),
    radial-gradient(60% 100% at 60% 100%, rgba(245, 158, 11, 0.14), transparent 60%);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.chip {
  text-decoration: none; font-size: 0.9rem; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  color: var(--cat); background: var(--cat-soft); border: 1px solid var(--cat-line);
}
.cat { margin-top: 2.2rem; scroll-margin-top: 80px; }
.cat h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.cat h2::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--cat); flex: none; }

/* Cards: colored top edge and stronger icon tile */
.card[class*="cat-"] { border-top: 4px solid var(--cat); }
.tool-wrap[class*="cat-"] { border-top: 4px solid var(--cat); }
.tool-ico { width: 52px; height: 52px; border-radius: 15px; }
.tool-ico svg { width: 28px; height: 28px; }
/* Tool icon floating on the card's colored top line, in its right corner.
   A soft shadow sits apart on the card below it, so it reads as hovering. */
.tool-wrap { position: relative; }
.tool-float {
  position: absolute; top: -30px; right: -6px; z-index: 2; width: 56px; height: 56px; pointer-events: none;
}
.tool-float::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -16px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
}
.tool-float-tile {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 16px; color: var(--cat, var(--accent));
  /* Same look as the "How to use it" icons: soft category tint and an outline icon in the category color.
     The tint is laid over the card color so the tile stays opaque and the colored line does not show through. */
  background: linear-gradient(var(--cat-soft, transparent), var(--cat-soft, transparent)), var(--surface);
  box-shadow: 0 12px 20px -10px var(--cat-line, rgba(0, 0, 0, .3)), 0 3px 6px rgba(0, 0, 0, .12);
}
.tool-float-tile svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 720px) {
  .tool-float { width: 64px; height: 64px; top: -34px; right: -8px; }
  .tool-float-tile { border-radius: 18px; }
  .tool-float-tile svg { width: 32px; height: 32px; }
}
/* No animation and no tilt: raised a little, with the shadow apart below, so it reads as floating. */
.tool-float-tile { transform: translateY(-4px); }
.tool-float::after { transform: scaleX(.85); opacity: .75; }
@media print { .tool-float { display: none !important; } }