:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-soft: #eef2ff;
  --text: #0f172a;
  --muted: #475569;
  --line: #dbe3ef;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --category-text-weight: 72%;
  --success: #166534;
  --danger: #b91c1c;
  --success-bg: #dcfce7;
  --success-border: #86efac;
  --success-text: #166534;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #991b1b;
  --code-bg: #eef3f9;
  --code-text: #172033;
  --code-border: #d7e0ec;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(20px, 5vw, 72px); background: var(--header-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--header-line); }
.brand { font-size: 1.35rem; font-weight: 850; letter-spacing: -.03em; }
.brand span { color: var(--brand); }
.site-header nav { display: flex; gap: 22px; color: var(--muted); font-size: .95rem; }
.hero { padding: 64px clamp(20px, 8vw, 120px) 46px; background: radial-gradient(circle at top right, var(--accent-bg-strong), transparent 38%), linear-gradient(180deg,var(--surface),var(--bg)); }
.hero > div { max-width: 850px; }
.eyebrow { margin: 0 0 10px; color: var(--brand); font-weight: 750; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
h1, h2, h3 { font-family: "Space Grotesk", "DM Sans", sans-serif; overflow-wrap: anywhere; }
h1 { margin: 0; max-width: 900px; font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.035em; }
.hero h1 { font-size: clamp(2.45rem, 5.2vw, 4.65rem); }
.hero p:not(.eyebrow) { max-width: 720px; margin: 20px 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.search-box { display: flex; gap: 10px; align-items: center; width: 100%; max-width: 410px; padding: 11px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(15, 23, 42, .07); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; }
.clear-search { width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-strong); color: var(--muted); font-size: 1.2rem; line-height: 1; }
.clear-search:hover { background: var(--line); color: var(--text); }
.section { padding: 48px clamp(20px, 8vw, 120px); scroll-margin-top: 82px; }
.workspace { padding: 44px clamp(20px, 8vw, 120px); scroll-margin-top: 82px; }
#ferramentas.section { padding-top: 40px; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 28px; }
.section-heading .eyebrow { font-size: .95rem; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.filter-button { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; background: var(--surface); color: var(--muted); transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.filter-button:hover { color: var(--brand-dark); border-color: var(--accent-border); background: var(--accent-bg); }
.filter-button.active { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); box-shadow: 0 5px 14px rgba(15,23,42,.18); transform: translateY(-1px); font-weight: 750; }
.filter-button:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.category-scroll { position: relative; min-width: 0; }
.category-scroll-button { display: none; }
.home-tool-search { position: relative; display: flex; align-items: center; }
.home-tool-search input { padding-right: 82px; }
.home-tool-search input::-webkit-search-cancel-button { display: none; appearance: none; }
/* A shortcut nobody can see helps nobody, so the search box says what to press. Only
   where there is a keyboard to press it with, and only while the field is empty and
   unfocused — the clear button takes this corner as soon as there is text in it. */
.home-search-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .home-search-hint { position: absolute; right: 12px; z-index: 1; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); color: var(--faint, var(--muted)); font-family: inherit; font-size: .78rem; line-height: 1.5; pointer-events: none; display: block; }
  .home-tool-search input:focus ~ .home-search-hint,
  .home-tool-search input:not(:placeholder-shown) ~ .home-search-hint { display: none; }
}
.home-search-clear { position: absolute; right: 8px; z-index: 1; min-height: 34px; padding: 5px 10px; border: 0; border-radius: 8px; background: var(--surface-strong); color: var(--text); font-size: .82rem; font-weight: 700; }
.home-search-clear:hover { background: var(--accent-bg-strong); color: var(--brand-dark); }
.home-search-clear:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 1px; }
.home-results-status { min-height: 1.5em; margin: 0 0 18px; color: var(--muted); font-size: .92rem; font-weight: 650; }
.home-results-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 18px; }
.home-results-bar .home-results-status { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.home-clear-filters { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; }
.home-clear-filters:hover { border-color: var(--brand); }
.home-clear-filters:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; min-width: 0; }
.tool-card { text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg,var(--surface) 0%,var(--surface) 74%,var(--surface-tint) 100%); padding: 22px; min-height: 188px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tool-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand); opacity: 0; transition: opacity .18s ease; }
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,42,.1); border-color: var(--accent-border); }
.tool-card:hover::before, .tool-card:focus-within::before { opacity: 1; }
.tool-card.popular-tool { border-color: var(--accent-border); box-shadow: 0 10px 28px rgba(37, 99, 235, .11); }
.tool-card.popular-tool:hover { border-color: var(--brand); box-shadow: 0 16px 36px rgba(37, 99, 235, .18); }
.tool-card { position: relative; padding: 0; overflow: hidden; }
.tool-card-enter { animation: tool-card-enter .18s ease-out both; }
@keyframes tool-card-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.tool-card-open { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 188px; padding: 20px 20px 48px; border: 0; background: transparent; text-align: left; color: var(--text); }
.tool-card-open::after { content: '→'; position: absolute; right: 20px; bottom: 17px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-strong); color: var(--brand-dark); font-size: 1rem; font-weight: 800; transition: transform .18s ease, background-color .18s ease; }
.tool-card:hover .tool-card-open::after, .tool-card:focus-within .tool-card-open::after { transform: translateX(3px); background: var(--accent-bg-strong); }
.popular-badge { position: absolute; top: 18px; right: 18px; z-index: 1; padding: 3px 7px; border-radius: 999px; background: var(--accent-bg); border: 1px solid var(--accent-border-soft); color: var(--brand-dark); font-size: .64rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.tool-card-open:focus-visible, .favorite-toggle:focus-visible, .quick-tool:focus-visible, .clear-search:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
.favorite-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.favorite-toggle:hover { background: var(--warn-bg); }
.favorite-toggle[aria-pressed="true"] { color: var(--brand-dark); border-color: var(--accent-border); background: var(--accent-bg); }
.has-favorite > .favorite-toggle { position: absolute; z-index: 2; top: 10px; right: 10px; width: 36px; min-height: 36px; border-color: transparent; border-radius: 10px; background: transparent; font-size: 1.15rem; }
.has-favorite > .favorite-toggle:hover, .has-favorite > .favorite-toggle[aria-pressed="true"] { border-color: var(--line); background: var(--surface); }
@media (pointer: coarse) { .has-favorite > .favorite-toggle { width: 44px; min-height: 44px; top: 6px; right: 6px; } }
.has-favorite > .popular-badge { right: 54px; }
.favorite-page-button { width: auto; gap: 9px; padding: 10px 14px; margin-top: 8px; line-height: 1.4; text-align: left; }
.favorite-label { font-size: .9rem; font-weight: 650; }
.tool-favorites { margin: 0 0 22px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tool-favorites h3 { margin: 0 0 10px; font-size: .95rem; }
.favorites-empty { margin: 0; color: var(--muted); font-size: .88rem; }
.home-saved-tools { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.home-saved-tools > summary { padding: 12px 16px; min-height: 46px; cursor: pointer; font-weight: 650; color: var(--muted); }
.home-saved-tools > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 12px; }
.home-saved-tools .tool-favorites, .home-saved-tools .tool-history { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.favorite-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.favorite-shortcut { display: flex; align-items: stretch; min-width: 0; max-width: 100%; }
.favorite-shortcut .quick-tool { min-width: 0; min-height: 44px; border-radius: 12px 0 0 12px; overflow-wrap: anywhere; }
.favorite-shortcut .quick-tool-icon { flex-shrink: 0; }
.favorite-shortcut .favorite-toggle { border-radius: 0 12px 12px 0; border-left: 0; }
.favorite-feedback:not(.favorite-storage-warning) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.favorite-storage-warning { margin: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--warn-bg); }
.tool-icon, .quick-tool-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg,var(--accent-bg),var(--surface-soft)); border: 1px solid var(--accent-bg-strong); color: var(--brand-dark); font-size: 1.35rem; font-weight: 750; line-height: 1; }
/* The card Enter will open. A ring rather than a fill, so it reads as "this one is
   selected" without turning into a second kind of card. */
.tool-card.is-top-match { border-color: var(--brand); box-shadow: 0 0 0 2px var(--accent-bg-strong, rgba(37,99,235,.18)); }
@media (prefers-reduced-motion: no-preference) { .tool-card.is-top-match { transition: box-shadow .12s ease, border-color .12s ease; } }
.tool-card h4 { margin: 14px 0 8px; font-size: 1.1rem; line-height: 1.28; }
.tool-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.empty-state { grid-column: 1/-1; margin: 0; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); background: var(--veil); }
.search-empty { display: flex; align-items: flex-start; gap: 16px; padding: clamp(24px,5vw,40px); animation: tool-card-enter .18s ease-out both; }
.search-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--accent-bg); color: var(--brand); font-size: 1.7rem; }
.search-empty h3 { margin: 1px 0 6px; color: var(--text); font-size: 1.12rem; }
.search-empty p { max-width: 620px; margin: 0 0 16px; line-height: 1.55; }
.search-empty .button { display: inline-flex; width: auto; }
/* The suggestions under the empty state: either the matches a category filter was
   hiding, or a few popular tools when nothing matched anywhere. They reuse the pill
   list the tool pages already use for related links, so they carry the per-category
   colours and the dark theme without a second set of rules. */
.search-empty-title { margin: 20px 0 10px; color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.search-empty-list { margin: 0; }
.quick-tools { display: grid; gap: 12px; margin: -4px 0 28px; }
.quick-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quick-label { margin-right: 4px; color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.quick-tool { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 7px 11px 7px 7px; background: var(--surface); color: var(--text); font-size: .9rem; }
.quick-tool-icon { width: 30px; height: 30px; border-radius: 8px; font-size: .95rem; }
.quick-tool:hover { border-color: var(--accent-border); background: var(--accent-bg); }
.tool-history { margin: 20px 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.tool-history-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.tool-history-head h3 { margin: 0; font-size: 1.05rem; }
.history-clear { padding: 6px 9px; border: 0; background: transparent; color: var(--muted); font-size: .82rem; }
.history-clear:hover { color: var(--danger); text-decoration: underline; }
.tool-history .quick-tools { margin: 0; }
@media (max-width: 760px) {
  .home-saved-tools .tool-history { padding: 12px; }
  .home-saved-tools .tool-history-head { gap: 8px; margin-bottom: 8px; }
  .home-saved-tools .history-clear { min-height: 44px; }
  .home-saved-tools .tool-history .quick-group { display: grid; grid-template-columns: minmax(0, 1fr); max-height: 180px; overflow-y: auto; padding: 4px; }
  .home-saved-tools .tool-history .quick-tool { min-width: 0; min-height: 44px; overflow-wrap: anywhere; }
  .home-saved-tools .tool-history .quick-tool-icon { flex-shrink: 0; }
  .home-saved-tools .tool-favorites { padding: 12px; }
  .home-saved-tools .tool-favorites h3 { margin-bottom: 8px; }
  .home-saved-tools .favorite-shortcuts { max-height: 180px; overflow-y: auto; padding: 4px; }
  .home-saved-tools .favorite-shortcut { width: 100%; }
  .home-saved-tools .favorite-shortcut .quick-tool { flex: 1 1 auto; min-height: 44px; }
}
.workspace { background: var(--workspace-bg); min-height: 70vh; }
.hidden { display: none !important; }
.tool-offline-ready { display: inline-block; margin: 10px 0 0; padding: 5px 10px; border: 1px solid var(--success-border); border-radius: 8px; background: var(--success-bg); color: var(--success-text); font-size: .85rem; font-weight: 600; }
.tool-offline-ready[hidden] { display: none; }
/* Favorite and "available offline" sit together in one quiet row under the description. */
.tool-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tool-meta .favorite-page-button { margin: 0; min-height: 36px; padding: 5px 12px 5px 10px; gap: 6px; border-radius: 999px; font-size: 1.1rem; }
.tool-meta .favorite-label { font-size: .85rem; }
.tool-meta .tool-offline-ready { margin: 0; padding: 6px 12px; border-radius: 999px; line-height: 1.3; }
@media (pointer: coarse) { .tool-meta .favorite-page-button { min-height: 44px; } }
/* On a phone the star alone says it; the button keeps its full aria-label. */
@media (max-width: 480px) { .tool-meta .favorite-label { display: none; } .tool-meta .favorite-page-button { width: 44px; min-height: 44px; padding: 0; } }
.close-button { margin-bottom: 22px; border: 0; background: transparent; color: var(--brand); font-weight: 700; }
.tool-panel { max-width: 980px; margin: 0 auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--muted); font-size: .85rem; }
.breadcrumbs a { color: var(--brand); font-weight: 700; }
.breadcrumbs a:hover { text-decoration: underline; }
.related-tools { max-width: 980px; margin: 28px auto 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
.related-tools h2 { margin: 0 0 18px; font-size: 1.55rem; }
.related-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.related-tool { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.related-tool:hover { border-color: var(--accent-border); background: var(--accent-bg); }
.related-tool .tool-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; font-size: 1.1rem; }
.related-tool strong, .related-tool small { display: block; }
.related-tool strong { margin-bottom: 5px; }
.related-tool small { color: var(--muted); line-height: 1.4; }
.tool-panel > header { max-width: 850px; margin-bottom: 28px; }
.tool-panel h1 { max-width: 18ch; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.06; letter-spacing: -.04em; }
.tool-panel header p { color: var(--muted); line-height: 1.6; }
.tool-workbench, .result-shell { border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px,3.5vw,30px); background: var(--surface); }
.tool-workbench { box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.workbench-heading, .result-shell-heading { display: flex; align-items: center; gap: 12px; }
.workbench-heading { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.workbench-heading h2, .result-shell-heading h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.workbench-heading p { margin: 3px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.workbench-step { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--accent-bg); border: 1px solid var(--accent-border-soft); color: var(--brand-dark); font-size: .82rem; font-weight: 850; }
.result-shell { margin-top: 20px; border-color: var(--accent-border-soft); background: linear-gradient(150deg,var(--surface) 0%,var(--surface-tint) 100%); box-shadow: 0 12px 32px rgba(37,99,235,.07); scroll-margin-top: 96px; }
.result-shell-heading { margin-bottom: 18px; }
.result-shell .workbench-step { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tool-subsection + .tool-subsection { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.tool-subsection h2 { margin-bottom: 18px; font-size: 1.55rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1/-1; }
.field label { font-weight: 700; font-size: .92rem; }
.check-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.check-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 650; cursor: pointer; }
.check-option:hover { border-color: var(--accent-border); background: var(--surface-tint); }
.check-option:has(input:checked) { border-color: var(--accent-border); background: var(--accent-bg); color: var(--brand-dark); }
.check-option input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--brand); }
.percentage-calculator { display: grid; gap: 20px; }
.percentage-mode { max-width: 520px; }
.form-hint { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 42px; }
.input-suffix span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--muted); font-weight: 750; pointer-events: none; }
.tax-rate-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.tax-rate-presets button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .78rem; }
.tax-rate-presets button:hover, .tax-rate-presets button.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--brand-dark); }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 13px; outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.field-error { margin: 6px 0 0; color: var(--danger-text); font-size: .9rem; line-height: 1.45; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--danger); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--brand); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
textarea { min-height: 170px; resize: vertical; }
.tool-workbench > label:has(> input[type="checkbox"]), .tool-workbench > label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin-top: 12px; font-weight: 650; line-height: 1.4; cursor: pointer; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.button { border: 1px solid transparent; border-radius: 12px; padding: 12px 18px; background: var(--brand); color: var(--on-brand); box-shadow: 0 5px 14px rgba(37,99,235,.16); font-weight: 750; white-space: normal; overflow-wrap: anywhere; text-align: center; transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease; }
.button:hover:not(:disabled) { background: var(--brand-dark); box-shadow: 0 8px 18px rgba(37,99,235,.22); transform: translateY(-1px); }
.button:active:not(:disabled) { box-shadow: 0 3px 9px rgba(37,99,235,.16); transform: translateY(1px); }
.button.secondary { background: var(--surface-strong); color: var(--text); }
.button.secondary:hover:not(:disabled) { background: var(--line-strong); }
.button:disabled { cursor: not-allowed; box-shadow: none; opacity: .58; }
.button.is-success { border-color: var(--success-border); background: var(--success-bg); box-shadow: none; color: var(--success-text); }
.button.is-error { border-color: var(--danger-border); background: var(--danger-bg); box-shadow: none; color: var(--danger-text); }
.button.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: wait; }
.button.is-busy::before { content: ''; width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid rgba(255,255,255,.45); border-top-color: currentColor; border-radius: 50%; animation: busy-spin .7s linear infinite; }
.local-processing-note { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 18px; padding: 11px 13px; border: 1px solid var(--accent-bg-strong); border-radius: 11px; background: var(--surface-tint); color: var(--muted); font-size: .86rem; line-height: 1.45; }
.example-row { display: flex; justify-content: flex-end; margin: -8px 0 12px; }
.example-result-note { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--surface-tint); border-radius: 0 10px 10px 0; }
.example-button { padding: 7px 10px; border: 1px solid var(--accent-border-soft); border-radius: 9px; background: var(--accent-bg); color: var(--brand-dark); font-size: .82rem; font-weight: 750; }
.example-button:hover { border-color: var(--accent-border); background: var(--accent-bg-strong); }
.example-button:focus-visible, .action-reset:focus-visible, .button:focus-visible { outline: 3px solid rgba(37,99,235,.32); outline-offset: 2px; }
.tool-utility-row .json-copy { width: auto; margin: 0; }
.result { min-width: 0; max-width: 100%; margin-top: 22px; border-radius: 16px; padding: 18px; background: var(--bg); border: 1px solid var(--line); scroll-margin-top: 108px; }
.result-shell .result { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.result > :first-child { margin-top: 0; }
.result > :last-child { margin-bottom: 0; }
.result:empty { display: none; }
.result-section + .result-section { margin-top: 20px; }
.result-section h3 { margin: 0 0 10px; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pdf-upload input[type="file"] { padding: 9px; }
.pdf-order-section { margin-top: 20px; }
.pdf-order-section h3, .pdf-download-list h3 { margin: 0 0 10px; font-size: .95rem; }
.pdf-file-list, .pdf-page-list, .pdf-download-list { display: grid; gap: 8px; }
.pdf-order-row, .pdf-download-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-tint); }
.pdf-order-info { display: grid; min-width: 0; gap: 3px; }
.pdf-order-info strong, .pdf-download-item strong { overflow-wrap: anywhere; }
.pdf-order-info small, .pdf-download-item small { display: block; color: var(--muted); }
.pdf-order-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.pdf-order-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 1rem; font-weight: 800; }
.pdf-order-button:hover:not(:disabled) { border-color: var(--category-border); background: var(--category-soft); color: var(--category-ink); }
.pdf-order-button:focus-visible { outline: 3px solid var(--category-border-soft); outline-offset: 2px; }
.pdf-order-button:disabled { opacity: .38; }
.pdf-compatibility { margin-top: 18px; }
.pdf-download-list { margin-top: 18px; }
.pdf-download-item { color: inherit; text-decoration: none; }
.pdf-download-item:hover { border-color: var(--category-border); background: var(--category-soft); }
.pdf-download-item .button { flex: 0 0 auto; box-shadow: none; }
.pdf-image-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-top: 18px; }
.pdf-image-result { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pdf-image-result img { width: 100%; height: 180px; object-fit: contain; border-radius: 8px; background: var(--surface-tint); }
.pdf-image-result .button { width: 100%; }
.pdf-image-result small { color: var(--muted); text-align: center; }
.pdf-metadata-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; margin: 20px 0 0; }
.pdf-metadata-list div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pdf-metadata-list dt { color: var(--muted); font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.pdf-metadata-list dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.rdap-notice { margin-top: 16px; }
.rdap-list { margin-top: 16px; }
.rdap-list h4 { margin: 0 0 8px; font-size: .9rem; }
.rdap-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rdap-tags span { max-width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow-wrap: anywhere; font-size: .88rem; }
.rdap-source { overflow-wrap: anywhere; }
.rdap-raw { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.rdap-raw summary { cursor: pointer; font-weight: 750; }
.rdap-raw .button { margin: 12px 0 0; }
.rdap-raw pre { max-height: 420px; overflow: auto; white-space: pre; }
.result-updated { animation: result-ready .2s ease-out both; }
.processing-status { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; color: var(--muted); }
.processing-status strong { display: block; margin-bottom: 8px; color: var(--text); }
.processing-spinner { width: 24px; height: 24px; border: 3px solid var(--accent-border-soft); border-top-color: var(--brand); border-radius: 50%; animation: busy-spin .7s linear infinite; }
.progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--accent-bg-strong); }
.progress-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--brand); animation: progress-slide 1.05s ease-in-out infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@keyframes progress-slide { from { transform: translateX(-115%); } to { transform: translateX(340%); } }
@keyframes result-ready { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.result pre { max-width: 100%; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; line-height: 1.55; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; }
.result-grid + .result-grid, .metric + .result-grid { margin-top: 12px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.035); }
.metric span { display:block; color: var(--muted); font-size: .84rem; }
.metric strong { display:block; margin-top:6px; font-size:1.25rem; overflow-wrap:anywhere; }
.metric-primary { border-color: var(--accent-border); background: var(--accent-bg); }
.metric-primary strong { color: var(--brand-dark); font-size: 1.45rem; }
.dns-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.dns-result-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.dns-result-table th, .dns-result-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dns-result-table th { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.dns-result-table td:first-child { font-weight: 700; }
.dns-result-table code { white-space: normal; overflow-wrap: anywhere; }
.dns-type { display: inline-block; min-width: 3.25em; padding: 3px 7px; border-radius: 7px; background: var(--accent-chip); color: var(--brand-dark); font-size: .78rem; font-weight: 800; text-align: center; }
.dns-empty, .result-error { margin: 16px 0 0; }
.result-error { color: var(--danger); }
.result-copy { margin-top: 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--brand-dark); font-size: .82rem; font-weight: 750; }
.result-copy:hover { border-color: var(--accent-border); background: var(--accent-bg-strong); }
.generated-url { color: var(--brand-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.weekday-picker legend { padding: 0 6px; font-weight: 750; }
.weekday-option { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.weekday-option:has(input:checked) { border-color: var(--accent-border); background: var(--accent-bg); color: var(--brand-dark); }
.weekday-option input { width: auto; margin: 0; }
.cron-description { font-size: 1.05rem; font-weight: 650; }
.execution-list { display: grid; gap: 7px; margin-bottom: 0; padding-left: 24px; }
.notice { padding: 13px 15px; border-left: 4px solid var(--brand); background: var(--accent-bg); border-radius: 8px; color: var(--notice-text); line-height: 1.55; }
.json-local-note:not(.local-processing-note) { margin: -12px 0 20px; color: var(--muted); font-size: .88rem; }
.json-input, .json-output { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; line-height: 1.55; tab-size: 2; }
.json-input { min-height: 260px; }
.json-options { margin-top: 16px; }
.json-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap: 10px; margin-top: 18px; }
.json-actions .button { min-height: 48px; padding-inline: 12px; }
.json-actions .button.active { background: var(--brand); color: var(--on-brand); box-shadow: 0 7px 18px rgba(37,99,235,.2); }
.json-copy { width: 100%; margin-top: 10px; }
.json-output { min-height: 300px; resize: vertical; background: var(--surface); }
.json-status { margin: 14px 0 0; font-weight: 700; line-height: 1.45; }
.json-status.success { color: var(--success); }
.json-status.error { margin: 0; color: var(--danger); }
.json-tree { max-height: 560px; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .9rem; }
.json-tree details { margin: 5px 0; }
.json-tree summary { cursor: pointer; font-weight: 750; color: var(--brand-dark); }
.json-tree-count { margin-left: 5px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.json-tree-children { margin: 6px 0 6px 10px; padding-left: 14px; border-left: 1px solid var(--line-strong); }
.json-tree-leaf { display: flex; gap: 8px; padding: 4px 0; overflow-wrap: anywhere; }
.json-tree-key { flex: 0 0 auto; color: var(--syntax-key); font-weight: 700; }
.json-tree-leaf code { white-space: pre-wrap; color: var(--success-text); }
.json-tree-empty { color: var(--muted); }
.regex-pattern-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; color: var(--muted); font: 700 1.1rem ui-monospace,monospace; }
.regex-results { display: grid; gap: 9px; margin-top: 12px; }
.regex-results article { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.regex-results code { overflow-wrap: anywhere; white-space: pre-wrap; }
.regex-results small { grid-column: 2; color: var(--muted); overflow-wrap: anywhere; }
.regex-index { color: var(--brand-dark); font-size: .78rem; font-weight: 800; }
.compare-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.compare-column { min-width: 0; }
.compare-column h3 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: .95rem; }
.compare-column h3 span { color: var(--brand-dark); }
.compare-column textarea { min-height: 220px; background: var(--surface); }
.csv-delimiter { max-width: 360px; margin-top: 16px; }
.qr-output { display: block; width: min(100%,360px); height: auto; margin: 0 auto; image-rendering: pixelated; }
/* The QR canvas is sized in modules, not pixels, so it must scale down without blurring. */
/* Prose tables (the tool-by-tool transparency table on the About page). Three columns do
   not fit a phone, so the table scrolls inside its own box rather than the page scrolling
   sideways; the row header stays legible because it is the narrowest column. */
.error-picks { list-style: none; margin: 12px 0 20px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.error-picks a { display: block; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: inherit; text-decoration: none; }
.error-picks a:hover, .error-picks a:focus-visible { border-color: var(--brand); }

.prose-table-wrap { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; }
.table-scroll-hint { margin: 16px 0 -8px; color: var(--muted); font-size: .82rem; }
.prose-table-wrap.is-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.prose-table-wrap:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
.prose-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .93rem; }
.prose-table th, .prose-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.prose-table thead th { background: var(--surface-2); font-size: .85rem; letter-spacing: .01em; white-space: nowrap; }
.prose-table tbody th { font-weight: 600; }
.prose-table tbody tr:last-child th, .prose-table tbody tr:last-child td { border-bottom: 0; }

/* Explainer articles on the homepage: a short reading list, deliberately not a tool card,
   so nobody expects a form when they click. */
.home-reading { margin-top: 28px; }
.home-reading-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.home-reading-list a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: inherit; text-decoration: none; }
.home-reading-list a:hover, .home-reading-list a:focus-visible { border-color: var(--brand); }
.home-reading-list strong { display: block; margin-bottom: 4px; }
.home-reading-list span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.whatsapp-qr-wrap { margin: 16px 0; text-align: center; }
.whatsapp-qr-wrap canvas { display: inline-block; width: min(100%,300px); height: auto; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 10px; }
#pix-payload { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .82rem; word-break: break-all; }
.qr-result { text-align: center; }
.hash-result strong { font: 700 .95rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; word-break: break-all; }
.home-category-group { grid-column: 1/-1; }
.home-category-group + .home-category-group { margin-top: 16px; }
.home-category-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.home-category-title { margin: 0; font-size: 1.15rem; }
.home-category-count { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.home-category-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
/* Featured: a row of quick links above the categories. As cards they repeated six tools
   that appear again, full size, in their own category. */
.home-featured { grid-column: 1/-1; margin-bottom: 14px; }
.home-featured-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.home-featured-list a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 16px 5px 6px; border: 1px solid var(--category-border, var(--line)); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .93rem; font-weight: 650; transition: border-color .15s, background-color .15s; }
.home-featured-list a:hover { border-color: var(--category-ink, var(--brand)); background: var(--category-soft, var(--surface-soft)); }
.home-featured-list a:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
.home-featured-list .tool-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--category-soft, var(--surface-soft)); color: var(--category-ink, var(--brand)); font-size: .95rem; }
.category-toggle { display: block; min-height: 40px; margin: 14px auto 0; padding: 7px 16px; border: 1px solid var(--category-border,var(--line-strong)); border-radius: 999px; background: var(--surface); color: var(--category-ink,var(--brand-dark)); font: inherit; font-size: .86rem; font-weight: 750; cursor: pointer; }
.category-toggle:hover { background: var(--category-soft,var(--surface-soft)); }
.category-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.static-tool-content { display: grid; gap: 24px; }
.static-tool-content header p { max-width: 72ch; }
.static-tool-form { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.static-tool-form p { margin: 0; color: var(--muted); }
.static-tool-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.static-tool-sections.tool-guide { max-width: 980px; margin: 28px auto 0; }
.static-tool-sections section { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.static-tool-sections h2 { margin-top: 0; font-size: 1.2rem; }
.static-tool-sections p { color: var(--muted); line-height: 1.6; }
.static-tool-sections p + p { margin-top: 10px; }
.static-example-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.static-example-list li { display: grid; gap: 6px; }
.static-example-list code { width: fit-content; max-width: 100%; padding: 5px 8px; border: 1px solid var(--code-border); border-radius: 7px; background: var(--code-bg); color: var(--code-text); overflow-wrap: anywhere; }
.static-example-list span { color: var(--muted); line-height: 1.5; }
.static-related-list { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; list-style: none; }
.static-related-list a { display: inline-block; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
/* File tools: one large drop zone; the native input stays underneath for keyboard and screen readers. */
.file-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 18px; padding: 28px 20px 22px; border: 2px dashed var(--category-border, var(--line)); border-radius: 18px; background: var(--category-soft, var(--surface-soft)); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.file-drop:hover, .file-drop.is-dragging { border-color: var(--category-ink, var(--brand)); background: var(--category-soft-strong, var(--surface-soft)); }
.file-drop:focus-within { outline: 3px solid rgba(37,99,235,.35); outline-offset: 3px; }
.file-drop.is-invalid { border-color: var(--danger-border); background: var(--danger-bg); }
.file-drop-icon { color: var(--category-ink, var(--brand)); }
.file-drop label { margin: 4px 0 0; font-size: 1.05rem; font-weight: 750; color: var(--text); cursor: pointer; }
.file-drop label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.file-drop-or { color: var(--muted); font-size: .92rem; }
@media (pointer: coarse) { .file-drop-or { display: none; } }
.file-drop .form-hint { margin: 6px 0 0; }
.file-drop-name { margin: 8px 0 0; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.file-drop-name:empty { display: none; }
.file-drop.is-invalid .file-drop-name { color: var(--danger-text); }
.file-drop .file-drop-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tool-workbench[data-awaiting-file] > :is(.image-preview-grid, .image-controls, .pdf-order-section, .form-grid, .field:not(.file-drop), .button-row, #pdf-file-status) { display: none; }
.image-upload { margin-bottom: 18px; }
.image-upload input[type="file"] { padding: 9px; background: var(--surface); }
.image-preview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 18px 0; }
.image-preview-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.image-preview-card h3 { margin: 0 0 10px; font-size: 1rem; }
.image-preview-frame { display: grid; place-items: center; min-height: 220px; padding: 12px; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 12px; background-color: var(--surface); background-image: linear-gradient(45deg,var(--surface-muted) 25%,transparent 25%),linear-gradient(-45deg,var(--surface-muted) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--surface-muted) 75%),linear-gradient(-45deg,transparent 75%,var(--surface-muted) 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.image-preview-frame img, .image-preview-frame canvas { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.image-preview-frame [hidden] { display: none; }
.image-empty { max-width: 25ch; margin: 0; color: var(--muted); text-align: center; line-height: 1.45; }
.image-meta { min-height: 1.4em; margin: 10px 0 0; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.image-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.image-controls:disabled { opacity: .62; }
.image-check { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin-top: 14px; font-weight: 650; line-height: 1.4; cursor: pointer; }
.image-check input { flex: 0 0 auto; }
.image-quality-field output { color: var(--brand-dark); }
.image-quality-field input[type="range"] { padding-inline: 0; accent-color: var(--brand); }
.converter-live-hint { margin-top: 12px; }
.image-format-guide { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.image-format-guide > div { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.image-format-guide strong { color: var(--brand-dark); }
.image-format-guide span { color: var(--muted); font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
.heic-metadata-note { margin: 0 0 18px; border-left-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.heic-source-frame { align-content: center; gap: 12px; }
.heic-file-badge { display: inline-grid; place-items: center; min-width: 74px; min-height: 58px; padding: 8px 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-bg); color: var(--brand-dark); font-size: .9rem; font-weight: 850; letter-spacing: .08em; }
.heic-file-badge[hidden] { display: none; }
.heic-attribution { margin-top: 18px; overflow-wrap: anywhere; }
.heic-attribution a { color: var(--brand-dark); font-weight: 700; }
.heic-disabled { display: grid; gap: 12px; margin: 0; border-left-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.heic-disabled p { margin: 0; }
.heic-disabled .button { width: fit-content; }
.heic-disabled + .result { display: none; }
.jwt-summary { margin-bottom: 12px; }
.jwt-dates { margin-top: 12px; }
.jwt-output-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.jwt-output-field { min-width: 0; }
.jwt-json-output { min-height: 240px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; line-height: 1.5; }
.jwt-warning { padding: 13px 15px; border-left: 4px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); line-height: 1.55; }
.codec-output { min-height: 130px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; line-height: 1.5; overflow-wrap: anywhere; }
.base64-file-output { min-height: 180px; }
.meeting-participants { display: grid; gap: 14px; margin-top: 20px; }
.meeting-row { display: grid; grid-template-columns: minmax(130px,.8fr) minmax(230px,1.5fr) minmax(105px,.6fr) minmax(105px,.6fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.meeting-result-title { margin: 0 0 12px; font-size: 1.25rem; font-weight: 800; }
.meeting-result-table { width: 100%; margin-top: 16px; border-collapse: collapse; background: var(--surface); }
.meeting-result-table th, .meeting-result-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.meeting-result-table th { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.meeting-result-table td:nth-child(2) { font-weight: 800; color: var(--brand-dark); }
.contact-form { max-width: 760px; margin: 28px 0 44px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.contact-turnstile { width: 100%; min-height: 0; margin-top: 18px; }
.form-status { display: flex; align-items: center; gap: 8px; min-height: 1.5em; color: var(--muted); }
.form-status.loading::before { content: ''; width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: busy-spin .7s linear infinite; }
.form-status.error { padding: 10px 12px; border: 1px solid var(--danger-border); border-radius: 10px; background: var(--danger-bg); }
.form-status.success { padding: 10px 12px; border: 1px solid var(--success-border); border-radius: 10px; background: var(--success-bg); }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.error { color: var(--danger); }
.success { color: var(--success); }
.word-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.word-chip { max-width: 100%; padding:7px 10px; border-radius:999px; background:var(--surface-soft); border:1px solid #c7d2fe; overflow-wrap:anywhere; }
.ad-shell { margin: 20px auto; max-width: 1100px; padding: 0 20px; }
.prose { max-width: 980px; }
.prose p { color:var(--muted); line-height:1.75; }
/* The Guides link beside the brand. It shares `.site-header nav` spacing and colour. */
.site-nav { margin-left: clamp(12px, 3vw, 28px); }
/* With the Guides link as a third item, the language and theme controls keep to the right. */
.site-header .header-inner > .header-tools, .site-header .header-inner > .language-switcher { margin-left: auto; }
.site-nav a { color: var(--text); font-weight: 650; text-decoration: none; padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand); }
@media (max-width: 640px) { .site-nav { margin-left: 10px; font-size: .9rem; } }
/* "Updated: …" under a guide's title and on the guides list. */
/* Guides and prose pages: a heading sized for reading, not the homepage hero, and the
   "Updated" line set off from it instead of touching its last line. */
.prose > h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.04em; }
.article-meta { color: var(--muted); font-size: .9rem; margin: 14px 0 0; }
.home-reading-list .article-meta { margin-top: 6px; font-size: .8rem; }
.home-reading-more { margin: 12px 0 0; font-weight: 650; }
/* The site's own words under the tool grid, set like article prose. */
.home-about { padding-top: 8px; }
.home-about p { max-width: 72ch; color: var(--muted); line-height: 1.75; }
/* Lists in articles read like the paragraphs around them, not like UI text. */
.prose ul:not([class]) li, .prose ol li { color:var(--muted); line-height:1.75; margin:.35rem 0; }
.prose h2 { margin-top: 2.25rem; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.prose > p:first-of-type { max-width: 760px; font-size: 1.05rem; }
footer { display:flex; justify-content:space-between; gap:20px; padding:28px clamp(20px,5vw,72px); border-top:1px solid var(--line); color:var(--muted); }
footer div { display:flex; gap:18px; }
.site-footer > div { align-items: center; }
.site-footer > div p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; }
.site-footer nav a { display: inline-block; padding: 5px 0; }
.privacy-settings-button { font: inherit; color: inherit; border: 0; background: transparent; padding: 8px 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.privacy-settings-button:disabled { cursor: wait; opacity: .7; }
.privacy-settings-status { flex-basis: 100%; max-width: 42rem; font-size: .875rem; }
.privacy-settings-status:empty { display: none; }
.site-footer nav a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 4px; }
.site-footer nav a:focus-visible, .privacy-settings-button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 760px) {
  .section, .workspace { padding: 36px 16px; }
  .tool-panel > header { margin-bottom: 22px; }
  .tool-panel h1 { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  .tool-workbench, .result-shell { padding: 18px 16px; border-radius: 16px; }
  .workbench-heading { margin-bottom: 18px; padding-bottom: 15px; }
  .workbench-heading p { font-size: .84rem; }
  .result { padding: 14px; }
  .site-header nav { display:flex; gap:.35rem; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .filters { justify-content:flex-start; }
  .form-grid, .check-options { grid-template-columns:1fr; }
  .jwt-output-grid { grid-template-columns:1fr; }
  .meeting-row { grid-template-columns:1fr; }
  .meeting-result-table { display:block; overflow-x:auto; }
  .button-row .button { flex: 1 1 100%; min-height: 46px; }
  .tool-workbench label:has(> input:is([type="checkbox"],[type="radio"])) { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
  .tool-workbench label:has(> input:is([type="checkbox"],[type="radio"]):checked) { background: var(--surface-tint); border-color: var(--accent-border); }
  .tool-workbench input:not([type="checkbox"]):not([type="radio"]), .tool-workbench select, .tool-workbench textarea { font-size: 16px; }
  .tool-workbench input[type="range"] { min-height: 44px; }
  .example-button, .tax-rate-presets button, .category-toggle, .filter-button, .pdf-order-button { min-height: 44px; }
  .result-actions { margin: 0 0 16px; }
  .result-actions .json-copy { width: 100%; margin: 0; }
  .image-preview-grid { grid-template-columns: 1fr; }
  .image-preview-frame { min-height: 180px; }
  .image-format-guide { grid-template-columns: 1fr; }
  .compare-results, .static-tool-sections { grid-template-columns: 1fr; }
  .home-category-cards { grid-template-columns: 1fr; }
  .quick-group { align-items: flex-start; }
  .quick-label { width: 100%; }
  .search-empty { padding: 22px 18px; }
  footer { flex-direction:column; }
  .site-footer nav { justify-content: flex-start; }
  .site-footer nav a, .site-footer .privacy-settings-button { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tool-card-enter, .search-empty, .result-updated, .button.is-busy::before, .processing-spinner, .progress-track span { animation: none; }
  .filter-button, .button, .tool-card, .tool-card::before, .tool-card-open::after { transition: none; }
  .filter-button.active, .tool-card:hover, .tool-card:hover .tool-card-open::after, .tool-card:focus-within .tool-card-open::after, .button:hover:not(:disabled), .button:active:not(:disabled) { transform: none; }
}

/* nTools multilingual additions */
.language-switcher{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin-left:auto}.language-switcher a{font-size:.82rem;text-decoration:none;padding:.35rem .5rem;border:1px solid var(--border,#d9dde5);border-radius:.55rem;color:inherit}.language-switcher a[aria-current="true"]{font-weight:700;background:var(--surface-2,#f3f4f6)}.site-header{gap:1rem}.site-header .header-inner{width:min(1180px,calc(100% - 2rem));margin:auto;display:flex;align-items:center;gap:1rem}.hero>.home-search-wrap{max-width:410px}.tax-note{font-size:.9rem;opacity:.8}.tool-grid .tool-card-open{height:100%}.locale-note:not(.local-processing-note){font-size:.85rem;opacity:.75}.ad-slot{min-height:0}.ad-slot:empty{display:none}
/* Advertising space is reserved only once a real ad unit is configured in
   assets/config.js — app.js sets data-ads="on" for that. Until then the slots
   collapse and the page shows no gap. Reserving the height in advance is what stops
   the page jumping the moment the first ad arrives, which is both a Core Web Vitals
   penalty and the thing that makes people tap the wrong element. 280px is the tall
   end of a responsive desktop unit, 100px the mobile banner. */
:root[data-ads="on"] .ad-slot[data-ad-ready] { display: block; min-height: 280px; }
@media (max-width: 640px) {
  :root[data-ads="on"] .ad-slot[data-ad-ready] { min-height: 100px; }
}
/* Inside an article the slot sits between two sections, so it needs air on both sides. */
.prose .ad-slot[data-ad-ready] { margin: 2rem 0; }
@media(max-width:640px){.language-switcher{width:100%;justify-content:flex-start}.site-header .header-inner{flex-wrap:wrap}.hero>.home-search-wrap{max-width:100%}}

/* Subnet calculator: historical note under the result, and the sub-heading above
   the generated subnet table. */
.tool-note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.result-subhead { margin: 20px 0 8px; font-size: 15px; font-weight: 600; color: var(--text); }

/* [hidden] must beat the display value a component class sets, otherwise panes
   toggled with el.hidden stay on screen. */
[hidden] { display: none !important; }

/* Subnet calculator: addresses and masks are long, so values stay unbroken and
   the two longest ones take the full row. */
.subnet-grid .metric strong { font-size: 1.05rem; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.subnet-grid .metric-wide { grid-column: 1 / -1; }

/* Skip link: off-screen until it takes keyboard focus. */
.skip-link { position: fixed; left: 12px; top: 12px; transform: translateY(calc(-100% - 24px)); z-index: 100; max-width: calc(100% - 24px); padding: 10px 16px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.skip-link:focus { transform: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand); }
main { scroll-margin-top: 96px; }

/* ---- Theme tokens ------------------------------------------------------
   The light palette above is the base. Dark values are declared twice: once for
   viewers whose system asks for dark (unless they explicitly chose light), and
   once for an explicit dark choice, so the picker wins in both directions. */
:root {
  --surface-muted: #f1f5f9;
  --surface-strong: #e2e8f0;
  --surface-tint: #f8fbff;
  --surface-2: #f3f4f6;
  --workspace-bg: #eef2f7;
  --line-strong: #cbd5e1;
  --border: #d9dde5;
  --accent-bg: #eff6ff;
  --accent-bg-strong: #dbeafe;
  --accent-border: #93c5fd;
  --accent-border-soft: #bfdbfe;
  --accent-chip: #e0e7ff;
  --warn-bg: #fffbeb;
  --warn-border: #d97706;
  --warn-text: #92400e;
  --notice-text: #1e3a8a;
  --syntax-key: #7c3aed;
  --veil: rgba(255,255,255,.65);
  --header-bg: rgba(248,250,252,.88);
  --header-line: rgba(219,227,239,.8);
  --on-brand: #ffffff;
  --pill-active-bg: #0f172a;
  --pill-active-text: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --surface: #161b25;
    --surface-soft: #1b2438;
    --surface-muted: #1a202b;
    --surface-strong: #232b38;
    --surface-tint: #182031;
    --surface-2: #232b38;
    --workspace-bg: #10151d;
    --text: #e8edf7;
    --muted: #a7b2c6;
    --line: #2a3243;
    --line-strong: #394356;
    --border: #2f394a;
    --brand: #6f9bff;
    --brand-dark: #9dbcff;
    --category-text-weight: 35%;
    --accent-bg: #15233c;
    --accent-bg-strong: #1b2d4d;
    --accent-border: #2f4a7a;
    --accent-border-soft: #274069;
    --accent-chip: #22304e;
    --warn-bg: #2a2113;
    --warn-border: #b8791f;
    --warn-text: #f0c489;
    --notice-text: #bcd4ff;
    --syntax-key: #c4a8ff;
    --success: #7fcfa4;
    --danger: #f2938d;
    --success-bg: #153424;
    --success-border: #2f6f4a;
    --success-text: #9ee2b9;
    --danger-bg: #3a1c1d;
    --danger-border: #7f3638;
    --danger-text: #ffb4b0;
    --code-bg: #202a3a;
    --code-text: #e8edf7;
    --code-border: #354157;
    --veil: rgba(22,27,37,.6);
    --header-bg: rgba(13,17,23,.9);
    --header-line: rgba(42,50,67,.9);
  --on-brand: #0b1220;
  --pill-active-bg: #6f9bff;
  --pill-active-text: #0b1220;
    --on-brand: #0b1220;
    --pill-active-bg: #6f9bff;
    --pill-active-text: #0b1220;
    --shadow: 0 16px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b25;
  --surface-soft: #1b2438;
  --surface-muted: #1a202b;
  --surface-strong: #232b38;
  --surface-tint: #182031;
  --surface-2: #232b38;
  --workspace-bg: #10151d;
  --text: #e8edf7;
  --muted: #a7b2c6;
  --line: #2a3243;
  --line-strong: #394356;
  --border: #2f394a;
  --brand: #6f9bff;
  --brand-dark: #9dbcff;
  --category-text-weight: 35%;
  --accent-bg: #15233c;
  --accent-bg-strong: #1b2d4d;
  --accent-border: #2f4a7a;
  --accent-border-soft: #274069;
  --accent-chip: #22304e;
  --warn-bg: #2a2113;
  --warn-border: #b8791f;
  --warn-text: #f0c489;
  --notice-text: #bcd4ff;
  --syntax-key: #c4a8ff;
  --success: #7fcfa4;
  --danger: #f2938d;
  --success-bg: #153424;
  --success-border: #2f6f4a;
  --success-text: #9ee2b9;
  --danger-bg: #3a1c1d;
  --danger-border: #7f3638;
  --danger-text: #ffb4b0;
  --code-bg: #202a3a;
  --code-text: #e8edf7;
  --code-border: #354157;
  --veil: rgba(22,27,37,.6);
  --header-bg: rgba(13,17,23,.9);
  --header-line: rgba(42,50,67,.9);
  --on-brand: #0b1220;
  --pill-active-bg: #6f9bff;
  --pill-active-text: #0b1220;
  --shadow: 0 16px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Theme picker in the header: light / dark / follow the device. */
.theme-switcher { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.theme-switcher button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); line-height: 1; }
.theme-switcher button svg { width: 15px; height: 15px; }
.theme-switcher button:hover { color: var(--text); }
.theme-switcher button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.header-tools { display: flex; align-items: center; gap: 10px; }
.install-button { min-height: 40px; padding: 7px 11px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-bg); color: var(--brand-dark); font-size: .82rem; font-weight: 750; white-space: nowrap; }
.install-button:hover { background: var(--accent-bg-strong); }
.install-button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.install-help-button { min-height: 40px; padding: 7px 10px; border: 0; background: transparent; color: var(--muted); font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.install-help-button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.theme-select-wrap { display: none; align-items: center; min-height: 44px; padding: 0 7px 0 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; }
.theme-select { min-height: 42px; max-width: 8.5rem; padding: .3rem 1.3rem .3rem .35rem; border: 0; background: transparent; color: inherit; font-size: .9rem; }
.theme-select:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-radius: 6px; }
.theme-select-icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--brand); }
.theme-select-icon svg { width: 20px; height: 20px; }
.mobile-preferences-button, .mobile-preferences-dialog { display: none; }
.mobile-preferences-dialog[open] { display: block; }
.mobile-preferences-dialog { max-width: min(360px, calc(100% - 32px)); width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 22px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.mobile-preferences-dialog::backdrop { background: rgba(15,23,42,.42); }
.mobile-preferences-dialog h2 { margin: 0 0 18px; font-size: 1.3rem; }
.mobile-preferences-dialog label { display: grid; gap: 7px; margin: 0 0 14px; color: var(--muted); font-size: .88rem; font-weight: 700; }
.mobile-preferences-dialog select { min-height: 46px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 600; }
.mobile-preferences-dialog select:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.mobile-preferences-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.offline-cache-settings { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.offline-cache-settings h3 { margin: 0 0 8px; font-size: 1rem; }
.offline-cache-size { margin: 8px 0; font-weight: 600; overflow-wrap: anywhere; }
.offline-cache-size-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.offline-cache-refresh { min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.offline-cache-refresh:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.offline-cache-refresh:disabled { opacity: .6; cursor: wait; }
.offline-cache-settings .button { white-space: normal; min-height: 44px; }
.install-help-dialog { max-width: min(440px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 16px; padding: 22px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.install-help-dialog::backdrop { background: rgba(15,23,42,.42); }
.install-help-dialog h2 { margin: 0 0 10px; font-size: 1.25rem; }
.install-help-dialog p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.offline-status { position: fixed; right: 16px; bottom: 16px; z-index: 30; max-width: min(420px, calc(100% - 32px)); padding: 11px 14px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .9rem; font-weight: 650; }
.update-status { position: fixed; right: 16px; bottom: 76px; z-index: 31; display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100% - 32px)); padding: 10px 12px 10px 14px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .9rem; font-weight: 650; }
.update-status button { min-height: 38px; padding: 7px 11px; border: 0; border-radius: 8px; background: var(--brand); color: var(--on-brand); font-weight: 750; }
.update-status button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---- Phone density ------------------------------------------------------
   On a 375px screen the sticky header plus the hero used to fill the whole
   first view, so no tool was visible without scrolling, and the grid showed
   one very tall card per row. This block trades decoration for reach. */
.language-select { display: none; }
@media (max-width: 360px) {
  .site-header { padding-inline: 8px !important; }
  .site-header .header-inner, .header-tools { gap: 4px !important; }
  .tool-grid, .home-category-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Header: the six language chips become one select (built in app.js).
     Qualified with nav + .site-header to outrank `.site-header nav` above. */
  .site-header nav.language-switcher { display: none; }
  .language-select { display: block; min-width: 44px; min-height: 44px; max-width: 4.5rem; padding: .3rem .25rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface-2); color: inherit; font-size: .95rem; }
  .theme-switcher button { width: 44px; height: 44px; flex: 0 0 44px; }
  .theme-switcher { display: none; }
  .theme-select-wrap { display: inline-flex; max-width: 8.4rem; }
  .theme-select { max-width: 6.8rem; font-size: .88rem; }
  .language-select, .theme-select-wrap { display: none; }
  .mobile-preferences-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: .8rem; font-weight: 750; white-space: nowrap; }
  .mobile-preferences-button::before { content: '☷'; margin-right: 6px; color: var(--brand); font-size: 1.1rem; }
  .mobile-preferences-button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
  .install-button { min-width: 44px; min-height: 44px; padding-inline: 8px; font-size: .78rem; }
  .install-button { width: 44px; padding: 0; overflow: hidden; font-size: 0; }
  .install-button::before { content: '⇩'; font-size: 1.35rem; line-height: 1; }
  .install-help-button { min-width: 44px; min-height: 44px; padding-inline: 5px; font-size: .72rem; }
  .offline-status { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); }
  .update-status { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); flex-wrap: wrap; }
  .site-header { padding: 10px 16px; }
  .site-header .header-inner { flex-wrap: nowrap; gap: .5rem; width: 100%; }
  .site-header .header-tools { margin-left: auto; }
  .brand { font-size: 1.15rem; }

  /* Hero: short enough that the first tools sit above the fold. Measured on a 390x844
     phone, so any change here should be checked against that: the first tool card has
     to stay above 844px on a first visit and for a returning visitor alike. */
  .hero { padding: 12px 16px 2px; }
  .hero h1 { font-size: 1.45rem; line-height: 1.18; }
  .hero p[data-intro] { display: none; }
  .home-search-wrap { margin-top: 14px; }
  .home-tool-search input { min-height: 52px; font-size: 16px; }
  .home-search-clear { right: 4px; min-width: 44px; min-height: 44px; }

  /* Labels that only repeat the heading underneath them. */
  .hero > .eyebrow, .section > .eyebrow, .tool-panel header .eyebrow { display: none; }
  .section h2 { font-size: 1.35rem; }

  /* Category filters: one scrolling row instead of four stacked ones. */
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 12px; padding: 2px 16px 6px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .category-scroll { margin: 12px -16px; }
  .category-scroll .filter-row { margin: 0; padding-inline: 48px; scroll-padding-inline: 48px; }
  .category-scroll-button { display: grid; place-items: center; position: absolute; top: 0; bottom: 0; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 1.6rem; cursor: pointer; }
  .category-scroll-button.previous { left: 0; }
  .category-scroll-button.next { right: 0; }
  .category-scroll-button:disabled { visibility: hidden; }
  .filter-button { flex: 0 0 auto; padding: 7px 12px; font-size: .88rem; }

  /* One column of compact rows: icon on the left, name and a two-line description beside
     it, the star at the right edge. Two columns squeezed names into three lines and made
     every card taller than a row. Descriptions stay in the markup -- clamped, not hidden --
     so the page still reads the same to a crawler. */
  .tool-grid, .home-category-cards { grid-template-columns: 1fr; gap: 8px; }
  .tool-card { min-height: 0; border-radius: 14px; }
  .tool-card-open { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start; min-height: 0; padding: 12px 52px 12px 12px; }
  .tool-card-open .tool-icon { grid-row: span 2; }
  .tool-card-open::after { display: none; }
  .tool-card h4, .tool-card h3 { margin: 1px 0 3px; font-size: .98rem; line-height: 1.25; }
  .tool-card p { font-size: .82rem; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tool-grid > .tool-card:only-child p { display: block; overflow: visible; }
  .tool-card .tool-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1.05rem; }
  .has-favorite > .favorite-toggle { top: 50%; right: 4px; transform: translateY(-50%); }
  .has-favorite > .popular-badge { top: 6px; right: 50px; }
  .home-featured-list a { font-size: .88rem; padding-right: 13px; }
  .popular-badge { top: 10px; right: 10px; padding: 2px 5px; font-size: .55rem; }
  .home-category-heading { align-items: center; margin-bottom: 8px; }
  .home-category-title { font-size: 1rem; }
}

/* ---- Category accents --------------------------------------------------
   Cards, filters and tool workspaces receive their colour from the same
   data-categoria value. Nested cards deliberately override a page accent. */
[data-categoria] {
  --category: #2563eb;
  --category-ink: var(--category);
  --category-soft: var(--accent-bg);
  --category-soft-strong: var(--accent-bg-strong);
  --category-border-soft: var(--accent-border-soft);
  --category-border: var(--accent-border);
  --category-shadow: rgba(37, 99, 235, .14);
  --category-ink: color-mix(in srgb, var(--category) var(--category-text-weight), var(--text));
  --category-button-hover: color-mix(in srgb, var(--category) 85%, #000);
  --category-soft: color-mix(in srgb, var(--category) 9%, var(--surface));
  --category-soft-strong: color-mix(in srgb, var(--category) 16%, var(--surface));
  --category-border-soft: color-mix(in srgb, var(--category) 27%, var(--line));
  --category-border: color-mix(in srgb, var(--category) 52%, var(--line));
  --category-shadow: color-mix(in srgb, var(--category) 18%, transparent);
}
[data-categoria="calc"] { --category: #c2410c; }
[data-categoria="network"] { --category: #0e7490; }
[data-categoria="text"] { --category: #6d28d9; }
[data-categoria="words"] { --category: #be123c; }
[data-categoria="dev"] { --category: #2563eb; }
[data-categoria="marketing"] { --category: #a21caf; }
[data-categoria="utils"] { --category: #4338ca; }
[data-categoria="image"] { --category: #0f766e; }
[data-categoria="pdf"] { --category: #b91c1c; }
[data-categoria="documentos"] { --category: #15803d; }
[data-categoria="financas"] { --category: #a16207; }

.filter-button[data-categoria]:hover {
  color: var(--category-ink);
  border-color: var(--category-border);
  background: var(--category-soft);
}
.filter-button[data-categoria].active {
  color: #fff;
  border-color: var(--category);
  background: var(--category);
  box-shadow: 0 6px 16px var(--category-shadow);
}
.filter-button[data-categoria]:focus-visible,
.tool-card[data-categoria] .tool-card-open:focus-visible,
.related-tool[data-categoria]:focus-visible,
.static-related-list a[data-categoria]:focus-visible {
  outline-color: var(--category-border);
}

.tool-card[data-categoria]::before { background: var(--category); }
.tool-card[data-categoria]:hover { border-color: var(--category-border); }
.tool-card[data-categoria].popular-tool {
  border-color: var(--category-border-soft);
  box-shadow: 0 10px 28px var(--category-shadow);
}
.tool-card[data-categoria].popular-tool:hover {
  border-color: var(--category);
  box-shadow: 0 16px 36px var(--category-shadow);
}
.tool-card[data-categoria] .tool-icon,
.related-tool[data-categoria] .tool-icon {
  color: var(--category-ink);
  border-color: var(--category-border-soft);
  background: linear-gradient(145deg, var(--category-soft-strong), var(--category-soft));
}
.tool-card[data-categoria] .tool-card-open::after {
  color: var(--category-ink);
  background: var(--category-soft);
}
.tool-card[data-categoria]:hover .tool-card-open::after,
.tool-card[data-categoria]:focus-within .tool-card-open::after {
  background: var(--category-soft-strong);
}
.popular-badge {
  color: var(--category-ink);
  border-color: var(--category-border-soft);
  background: var(--category-soft-strong);
  box-shadow: 0 3px 9px var(--category-shadow);
}
.new-badge { letter-spacing: .06em; }

.related-tool[data-categoria]:hover,
.static-related-list a[data-categoria]:hover {
  color: var(--category-ink);
  border-color: var(--category-border);
  background: var(--category-soft);
}

body[data-categoria] .tool-panel > header .eyebrow,
body[data-categoria] .breadcrumbs a { color: var(--category-ink); }
body[data-categoria] .tool-workbench,
body[data-categoria] .result-shell { border-color: var(--category-border-soft); }
body[data-categoria] .workbench-step {
  color: var(--category-ink);
  border-color: var(--category-border-soft);
  background: var(--category-soft-strong);
}
body[data-categoria] .result-shell {
  background: linear-gradient(150deg, var(--surface) 0%, var(--category-soft) 150%);
  box-shadow: 0 12px 32px var(--category-shadow);
}
body[data-categoria] .result-shell .workbench-step,
body[data-categoria] .tool-panel .button:not(.secondary):not(.is-success):not(.is-error) {
  color: #fff;
  border-color: var(--category);
  background: var(--category);
}
body[data-categoria] .tool-panel .button:not(.secondary):not(.is-success):not(.is-error):hover:not(:disabled) {
  background: var(--category-button-hover);
  box-shadow: 0 8px 18px var(--category-shadow);
}
body[data-categoria] .tool-panel input[type="checkbox"],
body[data-categoria] .tool-panel input[type="radio"] { accent-color: var(--category); }
body[data-categoria] .tool-panel input:focus,
body[data-categoria] .tool-panel select:focus,
body[data-categoria] .tool-panel textarea:focus {
  border-color: var(--category-border);
  box-shadow: 0 0 0 3px var(--category-soft-strong);
}
body[data-categoria] .tool-panel .check-option:has(input:checked),
body[data-categoria] .tool-panel .weekday-option:has(input:checked),
body[data-categoria] .tool-panel .tax-rate-presets button:hover,
body[data-categoria] .tool-panel .tax-rate-presets button.active,
body[data-categoria] .tool-panel .example-button {
  color: var(--category-ink);
  border-color: var(--category-border);
  background: var(--category-soft);
}
body[data-categoria] .processing-spinner { border-color: var(--category-border-soft); border-top-color: var(--category); }
body[data-categoria] .progress-track { background: var(--category-soft-strong); }
body[data-categoria] .progress-track span { background: var(--category); }
body[data-categoria] .metric-primary {
  border-color: var(--category-border);
  background: var(--category-soft);
}
body[data-categoria] .metric-primary strong { color: var(--category-ink); }

@media (max-width: 760px) {
  body[data-categoria] .result-shell { padding: 0 16px 16px; overflow: hidden; }
  body[data-categoria] .result-shell-heading {
    margin: 0 -16px 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--category-border-soft);
    background: var(--category-soft);
  }
}

@media (max-width: 640px) {
  .popular-badge {
    top: 9px;
    right: 9px;
    max-width: calc(100% - 52px);
    padding: 3px 6px;
    font-size: .57rem;
    letter-spacing: .035em;
    line-height: 1.15;
  }
  .pdf-order-row, .pdf-download-item { align-items: flex-start; }
  .pdf-download-item { flex-direction: column; }
  .pdf-download-item .button { width: 100%; }
  .pdf-metadata-list { grid-template-columns: 1fr; }
  .pdf-image-results { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .tool-grid, .home-category-cards { grid-template-columns: 1fr; }
}