/* ============================================================
   Convertburda — shared design tokens & components
   All colors live here as CSS variables (rule 2). No hex outside :root.
   ============================================================ */
:root {
  --bg: #eef1f5;
  --paper: #ffffff;
  /* header matches the logo's own background so the JPG blends in seamlessly */
  --header-bg: rgba(255, 255, 255, .92);
  --ink: #111820;
  --muted: #5b6673;
  --line: #dbe1e9;
  --accent: #d98a1f;
  --accent-ink: #5a3808;
  --accent2: #2f7dd9;
  --accent2-ink: #123a63;
  --accent3: #1f9e7c;
  --accent3-ink: #0f5c46;
  --grid-line: #e3e8ef;
  --ad-bg: #eff3f8;
  --ad-line: #c9d3df;
  --ok: #2f7d4f;
  --danger: #a3341f;
  --shadow-sm: rgba(17, 24, 32, .05);
  --shadow-lg: rgba(17, 24, 32, .28);
  /* the logo is a white-background JPG; it keeps its own white badge in dark mode */
  --logo-bg: #ffffff;
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark theme (Fikret's light/dark toggle, 2026-07-10) — same accents, inverted surfaces */
:root[data-theme="dark"] {
  --bg: #10141a;
  --paper: #1a212b;
  --header-bg: rgba(21, 27, 35, .92);
  --ink: #e7ecf3;
  --muted: #9aa6b5;
  --line: #2d3745;
  --accent: #e39b33;
  --accent-ink: #f0c896;
  --accent2: #4f97e8;
  --accent2-ink: #a8cdf5;
  --accent3: #4dcda8;
  --accent3-ink: #a8f0da;
  --grid-line: #202834;
  --ad-bg: #171d26;
  --ad-line: #313d4c;
  --ok: #58b183;
  --danger: #e06a52;
  --shadow-sm: rgba(0, 0, 0, .25);
  --shadow-lg: rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--ui);
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 15% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    radial-gradient(900px 460px at 100% 0%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent),
    var(--bg);
  background-attachment: fixed;
  position: relative;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* grid overlay removed (Fikret 2026-07-10): clean color wash only */
a { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- header ---- */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
header::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.bar { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 12px 18px; }
.logo { font-weight: 800; letter-spacing: -.02em; font-size: 19px; display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo img { height: 54px; width: auto; display: block; }
.logo .mark { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 5px; position: relative; flex: none; }
.logo .mark::after { content: ""; position: absolute; inset: 4px 4px auto auto; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }
.spacer { flex: 1; }
.ghost { background: none; border: 1px solid var(--line); color: var(--ink); padding: 8px 13px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.ghost:hover { border-color: var(--muted); }
.ghost.active { border-color: var(--accent2); color: var(--accent2-ink); background: color-mix(in srgb, var(--accent2) 12%, transparent); }
.pro { border-color: var(--accent); color: var(--accent-ink); }
.pro-short { display: none; }

/* Phone/tablet header (2026-07-13 — Fikret's iPhone screenshot: the Pro button fell
   off the right edge). His chosen fix: shrink the ribbon logo ~45% on small screens
   and tighten the spacing; additionally the Pro button shows just "Pro" and the
   account button drops its text — both then match the header's existing icon-box
   pattern (flag/view/theme), with title/aria-label keeping them accessible. */
@media (max-width: 840px) {
  .bar { gap: 8px; padding: 10px 10px; }
  .logo img { height: 30px; }
  .bar .ghost { padding: 7px 9px; font-size: 13px; }
  .account-label, .pro-full { display: none; }
  .pro-short { display: inline; }
}
button:focus-visible, a:focus-visible, label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- layout: fixed-ratio grid, never deforms on resize (rule 1) ---- */
.wrap {
  max-width: 1180px; margin: 0 auto; padding: 22px 18px 60px;
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; gap: 20px;
}
.rail { display: flex; flex-direction: column; gap: 16px; }
/* long pages (homepage): every rail slot stretches so the ad column lines the full scroll length */
.rail-fill .ad.tall { flex: 1 1 auto; }
main { min-width: 0; }

/* ---- ad slots ----
   Softened 2026-07-12: while AdSense approval is pending these render as empty
   placeholders — a loud dashed "ADVERTISEMENT" box reads as unfinished rather
   than ad-supported. Same sizes/positions (untouched), just quieter until real
   ads fill them in, at which point <ins class="adsbygoogle"> replaces this box
   entirely and none of this styling applies anymore. */
.ad {
  background: var(--ad-bg); border: 1px solid color-mix(in srgb, var(--ad-line) 55%, transparent); border-radius: 8px;
  color: color-mix(in srgb, var(--muted) 40%, var(--ad-bg)); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.ad.tall { min-height: 600px; }
.ad.block { min-height: 110px; margin: 22px 0; }
.ad.lead { min-height: 90px; margin-bottom: 22px; }

/* ---- tool / content card (homogeneous container, rule 3) ---- */
.tool {
  position: relative;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px;
  box-shadow: 0 1px 2px var(--shadow-sm), 0 14px 38px -18px var(--shadow-lg);
  overflow: hidden;
}
.tool::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--accent-ink); letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 3px 10px; border-radius: 999px;
}
h1 { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin: 6px 0 6px; }
.lede { color: var(--muted); margin: 0 0 18px; max-width: 60ch; }

.drop {
  border: 2px dashed var(--line); border-radius: 10px; padding: 30px 18px; text-align: center;
  background: color-mix(in srgb, var(--paper) 92%, var(--bg)); transition: border-color .15s, background .15s, box-shadow .15s; cursor: pointer;
  display: block;
}
.drop.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
/* action zones light up in the primary accent so the eye goes straight to them */
.drop:hover, .drop:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.drop strong { display: block; font-size: 15px; }
.drop small { color: var(--muted); }
input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }

/* ---------- editor workspace: canvas left, one properties panel right ----------
   (Fikret 2026-07-15) Stacking every control BELOW a 74vh canvas meant you could never
   see the photo and the slider you were dragging at the same time — by the time you
   scrolled to "Size", half the image was gone. So the controls move beside the canvas,
   the model every real editor uses (he works in Photopea). One panel, not two: one
   place to look, and the canvas keeps the full remaining width.
   Shared classes, not per-page CSS — Image transparency and Cut out shapes reuse these
   verbatim, so the three tools cannot drift apart. */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.editor-canvas { min-width: 0; }
/* Deliberately NO max-height/overflow here: a scrollbar inside the panel hid "Flatten &
   download" below its own fold — re-creating, in miniature, the exact bug this layout
   exists to kill. The panel is simply as tall as its contents; if that runs a little past
   the canvas, that costs a few pixels of page, not a lost button. */
.editor-panel {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  background: color-mix(in srgb, var(--accent2) 3%, var(--paper));
}
/* one control per block: caption line on top, the control itself below it full width */
.pfield { display: flex; flex-direction: column; gap: 5px; }
.plabel { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pval { margin-inline-start: auto; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.panel-sep { border: 0; border-top: 1px solid var(--line); margin: 3px 0; width: 100%; }
.editor-panel label.fld { width: 100%; gap: 6px; }
.editor-panel label.fld input[type=range] { flex: 1 1 auto; min-width: 0; }
/* image-transparency ships its own hold-to-repeat stepper wrapper — let it fill the column too */
.editor-panel .stepper { display: flex; width: 100%; }
.editor-panel .stepper input[type=range] { flex: 1 1 auto; min-width: 0; }
/* rows inside the panel are stacked, not spaced out like full-width page rows */
.editor-panel .row { margin: 0; gap: 6px; }
/* The shape library is the one genuinely long list here — 22 buttons across four groups
   would otherwise stretch the panel to double the canvas. It scrolls on its own so the
   picker stays browsable while Apply/Download below it stay put. This is a scrollable
   LIST, not a hidden action — the rule it must not break is that no button disappears. */
#csShapePanel { max-height: 300px; overflow-y: auto; padding-inline-end: 4px; }
.editor-panel select { width: 100%; }
.editor-panel .full { width: 100%; text-align: center; }
.editor-panel .help-btn { margin-inline-start: 0; flex: none; }
.editor-panel .hint-text { font-size: 12.5px; line-height: 1.45; }
/* the panel is only a panel while there is room beside the canvas; below that it becomes
   an ordinary stacked block again (phones were never going to get a side column) */
@media (max-width: 900px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
}

/* Fixed-size viewport (Fikret 2026-07-12): the box never grows/shrinks with the zoom
   level — the canvas zooms INSIDE it, centered while it fits, scrollable once it doesn't. */
#tCanvasWrap { width: 100%; height: 74vh; overflow: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); display: flex; }
#tCanvasWrap canvas {
  display: block; flex: none; margin: auto;
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cg stroke='white' stroke-width='3' stroke-linecap='square'%3E%3Cline x1='10.5' y1='1' x2='10.5' y2='8'/%3E%3Cline x1='10.5' y1='13' x2='10.5' y2='20'/%3E%3Cline x1='1' y1='10.5' x2='8' y2='10.5'/%3E%3Cline x1='13' y1='10.5' x2='20' y2='10.5'/%3E%3C/g%3E%3Cg stroke='black' stroke-width='1' stroke-linecap='square'%3E%3Cline x1='10.5' y1='1' x2='10.5' y2='8'/%3E%3Cline x1='10.5' y1='13' x2='10.5' y2='20'/%3E%3Cline x1='1' y1='10.5' x2='8' y2='10.5'/%3E%3Cline x1='13' y1='10.5' x2='20' y2='10.5'/%3E%3C/g%3E%3Ccircle cx='10.5' cy='10.5' r='1' fill='red'/%3E%3C/svg%3E")
    10 10, crosshair;
}
#tCanvasWrap canvas.panning { cursor: grabbing; }

/* image-to-dxf threshold preview: same fixed-viewport zoom/pan pattern */
#vPreviewWrap { width: 100%; height: 70vh; overflow: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); display: flex; margin-top: 10px; }
#vPreviewWrap canvas { display: block; flex: none; margin: auto; }
#vPreviewWrap canvas.panning { cursor: grabbing; }

/* image-transparency: help popover */
.help-btn { width: 26px; height: 26px; padding: 0; margin-inline-start: 8px; border-radius: 50%; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.help-panel { margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--accent2) 6%, var(--paper)); }
.help-panel ul { margin: 8px 0 0; padding-inline-start: 20px; }
.help-panel li { margin: 4px 0; font-size: 14px; color: var(--ink); }

/* image-transparency: slider stepper +/- */
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper-btn { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; user-select: none; }

/* image-transparency: right-click context menu */
.context-menu {
  position: fixed; z-index: 60; min-width: 190px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 2px var(--shadow-sm), 0 14px 38px -14px var(--shadow-lg);
}
.context-menu button {
  display: block; width: 100%; text-align: start; background: none; border: none;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink);
}
.context-menu button:hover, .context-menu button:focus-visible { background: color-mix(in srgb, var(--accent2) 12%, transparent); }

.meta.warn { color: var(--accent-ink); }
.btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, white 8%), var(--accent));
  color: #211404; border: none; padding: 10px 16px; border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
input[type=range] { font: inherit; }
/* Fikret 2026-07-15, standing rule: EVERY slider gets − / + steppers so a value can be
   nudged exactly instead of fought with by dragging (and it's far kinder on a phone).
   site.js injects them automatically around every <input type=range> — no per-page markup. */
.ghost.range-step {
  flex: none; padding: 0; width: 28px; min-width: 28px; height: 28px;
  font-size: 15px; font-weight: 700; line-height: 1; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Fikret's crypto-page input style promoted to the site-wide standard (2026-07-10):
   soft filled fields, rounded, with a colored focus glow */
select,
input[type=text],
input[type=number],
input[type=password],
textarea {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg); border: 1px solid transparent; border-radius: 10px;
  padding: 9px 13px; font: inherit; font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
select:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus {
  border-color: var(--accent2); background: var(--paper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 18%, transparent);
}
select {
  padding-right: 32px; cursor: pointer; font-weight: 500;
  /* arrow color = --muted; data-URIs can't read CSS variables, hence the literal */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6673'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 20px;
}
textarea {
  font-family: var(--mono); font-size: 13px; width: 100%; min-height: 160px; resize: vertical;
}
/* the big text areas light up in the PRIMARY accent (Fikret's focus rule) */
textarea:focus {
  border-color: var(--accent); background: var(--paper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
label.fld { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.unit-tag { color: var(--muted); font-size: 13px; font-weight: 400; }

/* code viewer */
.code { border: 1px solid var(--line); border-radius: 8px; overflow: auto; max-height: 420px; background: #0e141b; }
.code table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; }
.code td { padding: 1px 10px; white-space: pre; vertical-align: top; }
.code td.ln { color: #5a6b7d; text-align: right; user-select: none; background: #0b1016; position: sticky; left: 0; width: 1%; }
.code td.src { color: #d6e2ee; }
.tok-g { color: #7fd1ff; }
.tok-m { color: #ffb86b; }
.tok-axis { color: #a6e3a1; }
.tok-fs { color: #f2c56b; }
.tok-n { color: #6a7d8f; }
.tok-com { color: #6a7d8f; font-style: italic; }
.tok-num { color: #e6edf3; }

/* light data table (results, reference values) */
.table-wrap { overflow-x: auto; margin-top: 12px; }
.table { border-collapse: collapse; width: 100%; font-size: 14px; }
.table td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.table tr:first-child td { border-top: 1px solid var(--line); }
.table td:last-child { text-align: right; font-family: var(--mono); }

.meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 10px; }
.result-ok, .result-bad { border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.result-ok { background: color-mix(in srgb, var(--ok) 12%, white); border: 1px solid var(--ok); color: var(--ok); }
.result-bad { background: color-mix(in srgb, var(--danger) 10%, white); border: 1px solid var(--danger); color: var(--danger); }
.preview { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fbfcfe; text-align: center; }
.preview img { max-width: 100%; max-height: 320px; border-radius: 4px; }
/* checkerboard = the universal "this has transparency" indicator (Photoshop/GIMP convention) —
   without it, a transparent PNG previewed on this near-white box looks identical to an opaque
   white one, so a successful transparency removal looked like it had done nothing at all. */
.preview.checkerboard {
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--line) 75%),
    linear-gradient(-45deg, transparent 75%, var(--line) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* explainer under the tool (SEO copy) — its own card, not transparent-on-grid */
.explain {
  margin-top: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: 0 1px 2px var(--shadow-sm);
}
.explain h2 { font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.explain h2:not(:first-child) { margin-top: 18px; }
.explain p { color: var(--muted); margin: 0 0 14px; max-width: 70ch; }
details { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; background: color-mix(in srgb, var(--ad-bg) 60%, white); }
details:hover { border-color: var(--accent); }
summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details p { margin: 8px 0 2px; }

/* ---- /pricing page ---- */
.coming-soon-banner {
  background: color-mix(in srgb, var(--accent2) 10%, var(--paper));
  border-color: color-mix(in srgb, var(--accent2) 35%, var(--line));
}
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 6px; }
.price-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--paper);
  text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s;
}
a.price-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.price-card h3 { margin: 0 0 10px; font-size: 15px; }
.price-card .examples { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.price-card .big-price { display: block; font-size: 26px; margin: 4px 0; }
.price-card.featured-card { border-color: var(--accent); box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.badge-free {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border-radius: 6px; padding: 3px 8px; margin-bottom: 8px;
}
.badge-save {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 6px; padding: 2px 7px; margin-inline-end: 6px;
}
.price-card .durations { display: flex; gap: 8px; flex-wrap: wrap; }
.price-card .duration {
  flex: 1 1 0; min-width: 78px; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px;
}
.price-card .duration b { display: block; font-size: 16px; }
.price-card .duration span { display: block; font-size: 11px; color: var(--muted); }
.price-card .duration.featured { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.price-card .duration span.badge-save { display: inline-block; color: var(--accent-ink); }
.combo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.combo-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--paper); text-align: center; }
.combo-pair { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.combo-pair .plus { color: var(--accent-ink); font-weight: 700; margin: 0 4px; }
.combo-price s { color: var(--muted); font-size: 13px; margin-inline-end: 6px; }
.combo-price b { font-size: 19px; }
.combo-price span { color: var(--muted); font-size: 12px; }

/* ---- safety warning (machining calculators) ---- */
.safety-warning {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 8px; padding: 12px 14px;
}
.safety-warning span { flex: none; font-size: 17px; line-height: 1.4; }
.safety-warning p { margin: 0; color: var(--ink); font-size: 13px; max-width: none; }

/* ---- catalog grid (used on home + "more tools" sections) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.card {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 13px; background: var(--paper); cursor: pointer;
  text-align: left; font: inherit; text-decoration: none; color: inherit; display: block;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 18px -12px var(--shadow-lg); }
.card .t { font-weight: 600; font-size: 14px; }
.card .d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.card .tag { display: inline-block; margin-top: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #93a0af; }
.card.soon { opacity: .72; cursor: default; }

/* ---- homepage hero + segments ---- */
/* richer than a plain card — reinforces "this is a product" on the very first thing seen */
.hero {
  position: relative; overflow: visible;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--paper)), color-mix(in srgb, var(--accent2) 6%, var(--paper)) 75%);
}
.hero-deco { position: absolute; top: -14px; right: -10px; width: 130px; height: 130px; opacity: .9; pointer-events: none; }
.hero h1 { max-width: 24ch; }
.hero .lede { max-width: 56ch; }
/* The big logo is a transparent PNG since 2026-07-13 (Fikret's square version)
   and floats directly on BOTH themes — Fikret checked it on a dark surface
   himself ("het is niet zo erg als je denkt") and dropped the dark-mode badge. */
:root { --biglogo-bg: transparent; }
.hero-logo { display: block; max-width: 380px; width: 100%; height: auto; margin: 0 auto 10px; padding: 10px; box-sizing: border-box; background: var(--biglogo-bg); border-radius: 12px; }
.intro-video video { display: block; width: 100%; max-width: 720px; margin: 6px auto 0; border: 1px solid var(--line); border-radius: 8px; }
.intro-video h2 { font-size: 16px; margin: 2px 0 10px; text-align: center; }
.brand-card { text-align: center; }
.brand-card img { max-width: 420px; width: 100%; height: auto; padding: 10px; box-sizing: border-box; background: var(--biglogo-bg); border-radius: 12px; }

.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.segment { text-align: left; }
.segment h2 { font-size: 17px; margin: 4px 0 6px; }
.segment p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.segment-icon {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, var(--paper));
}
.segment:nth-child(2) .segment-icon { color: var(--accent2-ink); background: color-mix(in srgb, var(--accent2) 16%, var(--paper)); }
.segment:nth-child(3) .segment-icon { color: var(--accent3-ink); background: color-mix(in srgb, var(--accent3) 16%, var(--paper)); }
.segment-icon svg { width: 21px; height: 21px; }
.segment-links { display: flex; flex-wrap: wrap; gap: 8px; }
.segment-links .ghost { font-size: 13px; padding: 6px 11px; }

@media (max-width: 900px) {
  .segments { grid-template-columns: 1fr; }
  .hero-deco { display: none; }
}

/* homepage tool tiles — "LIT" pass (2026-07-12): each category gets its own color
   identity (icon badge + tinted section + tinted, left-accented cards) so scrolling
   through the homepage reads as moving through a designed product's sections, not a
   flat directory listing. Colors are moderate/professional, not neon — same shadow
   and radius language as every other card on the site (rule 3 homogeneity), only the
   hue changes per category. */
.cat-audio        { --cat: #7c5cbf; --cat-ink: #4a3380; }
.cat-images       { --cat: var(--accent); --cat-ink: var(--accent-ink); }
.cat-pdf          { --cat: var(--accent2); --cat-ink: var(--accent2-ink); }
.cat-business     { --cat: #1f9e7c; --cat-ink: #0f5c46; }
.cat-cad          { --cat: #55708a; --cat-ink: #2e4155; }
.cat-dev          { --cat: #5a63c4; --cat-ink: #33397a; }
.cat-machining    { --cat: #a8672a; --cat-ink: #603a18; }
.cat-engineering  { --cat: #1f8fa3; --cat-ink: #0f4e59; }
:root[data-theme="dark"] .cat-audio       { --cat: #b09ee8; --cat-ink: #d8cff5; }
:root[data-theme="dark"] .cat-business    { --cat: #4dcda8; --cat-ink: #a8f0da; }
:root[data-theme="dark"] .cat-cad         { --cat: #9fb4c7; --cat-ink: #d3e0ea; }
:root[data-theme="dark"] .cat-dev         { --cat: #9ba3e8; --cat-ink: #d4d8f7; }
:root[data-theme="dark"] .cat-machining   { --cat: #d99b4f; --cat-ink: #f0cfa0; }
:root[data-theme="dark"] .cat-engineering { --cat: #5fc9dd; --cat-ink: #b8ecf5; }

.tile-group {
  background: color-mix(in srgb, var(--cat, var(--accent)) 5%, var(--paper));
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 22%, var(--line));
}
.tile-group h2 {
  font-size: 18px; margin: 2px 0 14px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 12px;
}
.cat-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cat, var(--accent)) 20%, var(--paper));
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tile {
  display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  border-inline-start: 3px solid var(--cat, var(--accent));
  text-decoration: none; background: color-mix(in srgb, var(--cat, var(--accent)) 4%, var(--paper));
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tile:hover {
  border-color: var(--cat, var(--accent)); transform: translateY(-2px);
  background: color-mix(in srgb, var(--cat, var(--accent)) 9%, var(--paper));
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cat, var(--accent)) 55%, transparent);
}
.tile strong { display: block; color: var(--cat-ink, var(--ink)); font-size: 14.5px; margin-bottom: 2px; }
.tile span { color: var(--muted); font-size: 12.5px; line-height: 1.35; display: block; }

/* ---- tool finder: sticky search + category chips (2026-07-14) ----
   The bar sticks just below the (sticky) site header; JS sets the exact top
   offset from the measured header height. Chips reuse the .cat-* classes so
   they inherit each category's --cat/--cat-ink colors in both themes. */
.tools-nav { display: flex; flex-direction: column; gap: 14px; }
.tools-search { position: relative; }
.tools-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tools-search input { width: 100%; box-sizing: border-box; padding: 11px 14px 11px 40px; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.tools-search input:focus { outline: none; border-color: var(--accent2); }
/* Fikret 2026-07-15: the horizontal-scroll chip strip ("mini bar") is now a filled
   2-column launcher of tall category buttons — no sideways scroll, every category a
   big direct tap target that fills the top of the page. */
.cat-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cat-chip { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--cat-ink, var(--ink)); background: color-mix(in srgb, var(--cat, var(--accent)) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 30%, var(--line)); border-radius: 12px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.cat-chip > span[aria-hidden] { font-size: 20px; line-height: 1; flex: none; }
.cat-chip:hover { background: color-mix(in srgb, var(--cat, var(--accent)) 16%, var(--paper)); transform: translateY(-2px); box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--cat, var(--accent)) 60%, transparent); }
.cat-chip em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); margin-left: auto; }
@media (max-width: 640px) { .cat-chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .cat-chips { grid-template-columns: 1fr; } }
#toolSearchEmpty { margin: 0; color: var(--muted); font-size: 14px; }
.tile-group { scroll-margin-top: 96px; }
.cat-toggle { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; font: inherit; color: inherit; }
.cat-toggle:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 6px; }
.cat-toggle .chev { flex: none; margin-left: auto; width: 18px; height: 18px; color: var(--muted); transition: transform .15s ease; }
.tile-group.closed .cat-toggle .chev { transform: rotate(-90deg); }
.tile-group.closed .tiles { display: none; }
.tile-group.closed h2 { margin-bottom: 2px; }
/* an active search overrides the collapsed state and hides categories without hits */
.tool-filtering .tile-group.closed .tiles { display: grid; }
.tool-filtering .tile-group[data-empty] { display: none; }

/* Gallery vs Index view (Fikret 2026-07-12): the base .tile styles above ARE the compact
   "Index view" (his personal favorite); the data-view="gallery" overrides below give new
   visitors the spacious tile look with a pictogram per tool. The pre-paint script in
   _Layout defaults to gallery; the header toggle (homepage only) flips and remembers it. */
.tile .tile-icon { display: none; } /* .tile .tile-icon (0-2-0) so it outranks the generic `.tile span` block rule above */
:root[data-view="gallery"] .tiles { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
:root[data-view="gallery"] .tile {
  text-align: center; padding: 20px 16px 16px;
  border-inline-start: 1px solid var(--line);
  border-top: 3px solid var(--cat, var(--accent));
}
:root[data-view="gallery"] .tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 13px;
  color: var(--cat-ink, var(--accent-ink));
  background: color-mix(in srgb, var(--cat, var(--accent)) 15%, var(--paper));
}
:root[data-view="gallery"] .tile-icon svg { width: 27px; height: 27px; }
:root[data-view="gallery"] .tile strong { font-size: 15px; margin-bottom: 4px; }
:root[data-view="gallery"] .tile:hover .tile-icon {
  background: color-mix(in srgb, var(--cat, var(--accent)) 26%, var(--paper));
}

/* "quick cards" — Fikret's iPhone-style panel trial (crypto page first, 2026-07-10);
   his design, recolored onto our tokens (accent2 replaces iOS-blue, bg replaces iOS-grey) */
.top-controls { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.ios-card {
  background: var(--paper); border-radius: 16px; padding: 16px 20px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--ink) 18%, transparent);
  display: flex; flex-direction: column; justify-content: center;
}
.ios-card h2, .ios-card .eyebrow-label {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.converter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* .ios-input/.ios-select need no own rules anymore — their style became the
   site-wide input/select standard (see the global rules above) */
.ios-equals { font-size: 20px; color: var(--muted); font-weight: 500; margin: 0 4px; }
.ios-label { font-size: 15px; font-weight: 600; color: var(--ink); }

/* related tools block on tool pages */
.related h2 { font-size: 15px; margin: 0 0 10px; }
.related-links { display: flex; flex-wrap: wrap; gap: 8px; }
.related-links .ghost { font-size: 13px; padding: 6px 11px; }
.related-links .ghost.pick {
  border-color: var(--accent); color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pick-star { color: var(--accent-ink); margin-inline-end: 4px; }

/* site-wide footer sitemap */
.sitemap { border-top: 1px solid var(--line); background: var(--paper); }
.sitemap-in {
  max-width: 1180px; margin: 0 auto; padding: 22px 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;
}
.sitemap-col h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.sitemap-col li { margin: 0 0 5px; }
.sitemap-col a { color: var(--ink); text-decoration: none; font-size: 13px; }
.sitemap-col a:hover { color: var(--accent-ink); text-decoration: underline; }

footer { max-width: 1180px; margin: 0 auto; padding: 26px 18px 50px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
footer a { color: var(--muted); text-decoration: none; margin-inline-end: 14px; }
footer a:hover { color: var(--ink); }
footer button.linklike { background: none; border: none; padding: 0; margin-inline-end: 14px; color: var(--muted); font: inherit; cursor: pointer; text-decoration: none; }
footer button.linklike:hover { color: var(--ink); }

/* ---- modal (custom, never alert()/confirm() — rule 12; one at a time — rule 5) ---- */
.veil { position: fixed; inset: 0; background: rgba(17, 24, 32, .5); display: none; align-items: center; justify-content: center; z-index: 40; padding: 18px; }
.veil.open { display: flex; }
.modal { background: var(--paper); border-radius: 12px; max-width: 440px; width: 100%; padding: 24px; }
.modal h3 { margin: 0 0 6px; }
.modal p { color: var(--muted); font-size: 14px; }
.plans { display: flex; gap: 10px; margin: 16px 0 4px; }
.plan { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 12px; text-align: center; }
.plan b { display: block; font-size: 20px; }
.plan span { font-size: 12px; color: var(--muted); }
.close { float: right; border: none; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }

/* ---- welcome popup (same .veil/.modal family, sized up for its content) ----
   Distinct tinted background + stronger shadow/border than plain .modal — at this
   size it needs to read unmistakably as a floating overlay, not another page card. */
.modal-lg {
  max-width: 720px; max-height: calc(100vh - 60px); overflow-y: auto;
  /* warm accent tint, not blue — the page canvas itself already has a cool blue-ish
     wash (--bg + accent2 glow), so a blue-tinted popup nearly matched it and still
     read as "part of the page" instead of a distinct overlay. */
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 16%, var(--paper)), var(--paper) 60%);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 28px 70px -18px var(--shadow-lg), 0 4px 14px var(--shadow-sm);
}
.modal-lg .eyebrow { margin: 0 0 8px; }
.modal-lg h3 { font-size: 22px; }
.welcome-risk {
  font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0;
}
.welcome-features { display: flex; flex-direction: column; gap: 9px; margin: 16px 0; }
.welcome-features div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.welcome-features span { flex: none; font-size: 17px; line-height: 1.4; }
.welcome-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin: 18px 0 6px; }
.welcome-cat h4 { margin: 0 0 2px; font-size: 13.5px; position: relative; padding-inline-start: 14px; }
.welcome-cat h4::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 3px; bottom: 3px; width: 4px;
  border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.welcome-cat p { margin: 0; font-size: 12.5px; color: var(--muted); padding-inline-start: 14px; }
.welcome-closing { margin: 16px 0 4px; font-size: 14px; color: var(--ink); }
.welcome-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 560px) { .welcome-cats { grid-template-columns: 1fr; } }

/* ---- cookie consent banner ---- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px var(--shadow-sm); }
.consent.hidden { display: none; }
.consent-in { max-width: 1180px; margin: 0 auto; padding: 16px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.consent-in p { margin: 0; color: var(--muted); font-size: 13.5px; flex: 1 1 320px; }
.consent-actions { display: flex; gap: 10px; flex: none; }

@media (max-width: 900px) {
  .wrap { grid-template-columns: 1fr; }
  .rail { flex-direction: row; }
  .ad.tall { min-height: 90px; flex: 1; }
  /* rails collapse to a single horizontal strip on mobile — one slot is enough there */
  .rail-fill .ad.tall:not(:first-child) { display: none; }
}

/* ---- language picker (flag button + Z-A menu, toggled in site.js) ---- */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; padding: 8px 10px; }
.lang svg.flag { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); display: block; flex: none; }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 178px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 2px var(--shadow-sm), 0 14px 38px -14px var(--shadow-lg);
}
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; }
.lang-menu a:hover { background: var(--bg); }
.lang-menu a[aria-current="true"] { background: var(--bg); font-weight: 600; }