/* ============================================================
   FreeToolzHub — styles the engine output (PDF / Image / AI tools)
   Uses ONLY design-system tokens so engine markup is on-brand.
   ============================================================ */

/* buttons used inside engines */
.eng .btn, .pdf-tool .btn, .ai-tool .btn, .editor .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base);
  height: 44px; padding: 0 20px; border-radius: var(--radius-lg); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base);
}
.btn svg { width: 18px; height: 18px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: var(--text-lg); }
.btn-primary { background: var(--gradient-brand); color: var(--text-on-brand); box-shadow: var(--shadow-brand-soft); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: var(--bg-card); color: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { background: var(--blue-50); }

/* ============================================================
   Tool action buttons — Copy · Download · Share (new style)
   A modern pill: soft brand-tinted surface, accent icon chip,
   lifts into the brand gradient on hover.
   ============================================================ */
.ai-actions, .ed-actions, .pdf-actions, .result-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ai-actions .btn, .ed-actions .btn, .pdf-actions .btn, .result-actions .btn {
  flex: 1; min-width: 140px; height: 50px; position: relative; overflow: hidden;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold); letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--blue-50), var(--surface-1));
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base), border-color var(--dur-base);
}
/* gradient sweep layer revealed on hover */
.ai-actions .btn::before, .ed-actions .btn::before, .pdf-actions .btn::before, .result-actions .btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gradient-brand); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ai-actions .btn > *, .ed-actions .btn > *, .pdf-actions .btn > *, .result-actions .btn > * { position: relative; z-index: 1; }
.ai-actions .btn svg, .ed-actions .btn svg, .pdf-actions .btn svg, .result-actions .btn svg {
  position: relative; z-index: 1; transition: transform var(--dur-base) var(--ease-spring);
}
.ai-actions .btn:hover, .ed-actions .btn:hover, .pdf-actions .btn:hover, .result-actions .btn:hover {
  color: var(--text-on-brand); border-color: transparent;
  transform: translateY(-2px); box-shadow: var(--shadow-brand);
}
.ai-actions .btn:hover::before, .ed-actions .btn:hover::before, .pdf-actions .btn:hover::before, .result-actions .btn:hover::before { opacity: 1; }
.ai-actions .btn:hover svg, .ed-actions .btn:hover svg, .pdf-actions .btn:hover svg, .result-actions .btn:hover svg { transform: translateY(-1px) scale(1.12); }
.ai-actions .btn:active, .ed-actions .btn:active, .pdf-actions .btn:active, .result-actions .btn:active { transform: translateY(0); box-shadow: var(--shadow-brand-soft); }
/* primary action (e.g. Download) stays filled even at rest */
.ai-actions .btn-primary, .ed-actions .btn-primary, .pdf-actions .btn-primary, .result-actions .btn-primary {
  background: var(--gradient-brand); color: var(--text-on-brand); border-color: transparent; box-shadow: var(--shadow-brand-soft);
}
.ai-actions .btn-primary::before, .ed-actions .btn-primary::before, .pdf-actions .btn-primary::before, .result-actions .btn-primary::before { display: none; }
[data-theme="dark"] .ai-actions .btn, [data-theme="dark"] .ed-actions .btn, [data-theme="dark"] .pdf-actions .btn, [data-theme="dark"] .result-actions .btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 16%, transparent), var(--surface-2));
  color: var(--sky-300, #7dd3fc);
}

/* icon tints */
.t-pdf { background: var(--red-50); color: var(--red-600); }
.t-img { background: var(--green-50); color: var(--green-600); }
.t-ai  { background: var(--teal-50); color: var(--teal-600); }
.t-off { background: var(--blue-50); color: var(--blue-600); }

/* dropzone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 48px 32px; cursor: pointer;
  background: var(--bg-card); border: 2px dashed var(--border-strong); border-radius: var(--radius-2xl);
  transition: all var(--dur-base) var(--ease-out);
}
.dropzone.drag { background: var(--blue-50); border-color: var(--color-primary); box-shadow: var(--glow-accent); }
.dz-ic { width: 64px; height: 64px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--blue-50); color: var(--color-primary); }
.dz-ic svg { width: 30px; height: 30px; }
.dropzone h2 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-xl); color: var(--text-strong); margin: 0; }
.dropzone p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.dz-formats { font-size: var(--text-xs); color: var(--text-faint); margin-top: 6px; }

/* segmented controls + rows (image editor) */
.editor { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.ed-preview { position: relative; border-radius: var(--radius-xl); background: repeating-conic-gradient(var(--bg-subtle) 0% 25%, transparent 0% 50%) 0 0/22px 22px, var(--bg-card); border: 1px solid var(--border-color); display: grid; place-items: center; min-height: 320px; overflow: hidden; padding: 14px; }
.ed-preview img { max-width: 100%; max-height: 380px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.ed-dims { position: absolute; bottom: 12px; left: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: var(--slate-900); color: #fff; padding: 5px 11px; border-radius: var(--radius-full); }
.ed-controls { display: flex; flex-direction: column; gap: 16px; }
.ed-row { display: flex; flex-direction: column; gap: 8px; }
.ed-row label { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-body); display: flex; justify-content: space-between; }
.ed-row label b { color: var(--color-primary); }
.ed-row input[type=range] { width: 100%; accent-color: var(--color-primary); height: 6px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 56px; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); padding: 9px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-body); cursor: pointer; transition: all var(--dur-fast); }
.seg button:hover { border-color: var(--color-primary); }
.seg button.on { background: var(--gradient-brand); color: #fff; border-color: transparent; }
.ed-out { display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--bg-inset); border: 1px solid var(--border-color); }
.ed-out > div { flex: 1; }
.ed-out span { font-size: var(--text-xs); color: var(--text-muted); display: block; }
.ed-out strong { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--text-strong); }
.ed-actions { display: flex; gap: 10px; }
.ed-actions .btn { flex: 1; }
.ed-priv { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin: 2px 0 0; }
.ed-priv svg { width: 14px; height: 14px; }

/* PDF tools */
.pdf-empty { text-align: center; padding: 50px; color: var(--text-muted); }
.pdf-empty svg { width: 40px; height: 40px; margin-bottom: 12px; }
.pdf-list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.pdf-item, .pdf-info-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-color); }
.pdf-info-card { margin: 20px 0; }
.pi-ic { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; }
.pi-ic svg { width: 22px; height: 22px; }
.pi-meta { flex: 1; min-width: 0; }
.pi-meta strong { font-family: var(--font-heading); font-size: var(--text-base); color: var(--text-strong); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-meta span { font-size: var(--text-sm); color: var(--text-muted); }
.pi-ord { display: flex; gap: 4px; }
.pi-ord button { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-inset); color: var(--text-body); cursor: pointer; display: grid; place-items: center; transition: all var(--dur-fast); }
.pi-ord button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.pi-ord button:disabled { opacity: .35; cursor: default; }
.pi-ord button svg { width: 16px; height: 16px; }
.pi-ord [data-up] svg { transform: rotate(180deg); }
.pdf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pdf-actions .btn { flex: 1; min-width: 150px; }
.split-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.split-controls .ed-row input { width: 100%; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-card); font-family: var(--font-body); font-size: var(--text-base); color: var(--text-strong); outline: none; }
.split-controls .ed-row input:focus { border-color: var(--color-primary); box-shadow: var(--glow-focus); }
.jpg-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 16px; margin-top: 18px; }
.jpg-cell { display: flex; flex-direction: column; gap: 8px; }
.jpg-cell img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.jpg-cell .btn { height: 38px; padding: 0 10px; font-size: var(--text-sm); }

/* page thumbnail picker (delete/extract/rearrange) */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin: 18px 0; }
.pg-cell { position: relative; border: 2px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--bg-card); transition: border-color var(--dur-fast), transform var(--dur-fast); }
.pg-cell:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.pg-cell img { width: 100%; display: block; }
.pg-cell.sel { border-color: var(--color-primary); box-shadow: var(--glow-focus); }
.pg-no { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 700; background: var(--slate-900); color: #fff; padding: 2px 8px; border-radius: var(--radius-full); }
.pg-tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; display: none; place-items: center; }
.pg-cell.sel .pg-tick { display: grid; }
.pg-tick svg { width: 15px; height: 15px; }
.pg-move { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.pg-move button { width: 30px; height: 30px; border-radius: var(--radius-sm); border: none; background: var(--slate-900); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0.85; }
.pg-move [data-l] svg { transform: rotate(90deg); } .pg-move [data-r] svg { transform: rotate(-90deg); }
.pg-move svg { width: 16px; height: 16px; }

/* pdf viewer */
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 18px; max-height: 600px; overflow-y: auto; padding: 16px; background: var(--bg-inset); border-radius: var(--radius-xl); border: 1px solid var(--border-color); }
.pdf-page { max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); background: #fff; }

/* document conversion preview */
.doc-prev { margin-top: 16px; padding: 22px; background: #fff; color: #1f2937; border: 1px solid var(--border-color); border-radius: var(--radius-lg); max-height: 420px; overflow: auto; font-family: var(--font-body); font-size: 14px; line-height: 1.6; }
.doc-prev h1, .doc-prev h2, .doc-prev h3 { color: #111827; margin: 0.6em 0 0.3em; }
.doc-prev p { margin: 0 0 0.7em; }
.doc-prev table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.doc-prev td, .doc-prev th { border: 1px solid #cbd5e1; padding: 6px 8px; }
[data-theme="dark"] .doc-prev { background: var(--slate-100); }

/* converter hub grid */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hub-link { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.hub-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hub-link .pi-ic { flex: none; }
.hub-link strong { display: block; font-weight: 600; color: var(--text-strong); }
.hub-link span { font-size: 0.82rem; color: var(--text-muted); }
.sheet-tabs .seg-tab { padding: 7px 14px; }
@media (max-width: 560px){ .hub-grid { grid-template-columns: 1fr; } }

/* password strength */
.pw-wrap { margin-bottom: 14px; }
.pw-input { width: 100%; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-strong); font-family: var(--font-mono); font-size: 1rem; }
.pw-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--glow-focus); }
.pw-meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width var(--dur-base) var(--ease-out), background var(--dur-base); }
.pw-score { margin-top: 10px; font-weight: 700; font-size: 1.05rem; }
.pw-tips { margin-top: 12px; font-size: 0.9rem; color: var(--text-muted); }
.pw-tips ul { margin: 6px 0 0; padding-left: 20px; }
.pw-tips li { margin: 2px 0; }

/* diff checker */
.diff-out { margin-top: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; font-family: var(--font-mono); font-size: 13px; }
.diff-line { display: flex; gap: 10px; padding: 2px 10px; white-space: pre-wrap; word-break: break-word; }
.diff-gut { flex: none; width: 14px; text-align: center; opacity: .6; user-select: none; }
.diff-eq { color: var(--text-muted); }
.diff-add { background: rgba(16,185,129,.14); color: var(--text-strong); }
.diff-del { background: rgba(239,68,68,.13); color: var(--text-strong); }

/* AI tools */
.ai-tool { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ai-pane { display: flex; flex-direction: column; gap: 12px; }
.ai-label { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-body); display: flex; align-items: center; gap: 10px; }
.ai-area { width: 100%; min-height: 260px; resize: vertical; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-card); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-strong); outline: none; }
.ai-area:focus { border-color: var(--color-primary); box-shadow: var(--glow-focus); }
.ai-opts { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ai-opt { display: flex; flex-direction: column; gap: 5px; }
.ai-opt span { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.ai-opt select { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-card); font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-strong); outline: none; cursor: pointer; }
.ai-out { min-height: 260px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-inset); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--text-strong); white-space: pre-wrap; overflow-y: auto; max-height: 360px; }
.ai-placeholder { color: var(--text-faint); }
.ai-actions { display: flex; gap: 10px; }
.ai-actions .btn { flex: 1; }
.ai-status { font-size: var(--text-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); }
.ai-status.working { background: var(--blue-50); color: var(--color-primary); }
.ai-status.ok { background: var(--green-50); color: var(--green-600); }
.ai-status.demo { background: var(--amber-50); color: var(--amber-600); }

/* honest demo note for not-yet-built tools */
.demo-note { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-lg); margin-bottom: 18px; background: var(--amber-50); border: 1px solid var(--amber-500); font-family: var(--font-body); font-size: var(--text-sm); color: var(--amber-600); }
.demo-note svg { width: 20px; height: 20px; flex: none; }
.demo-note b { color: var(--text-strong); }

@media (max-width: 760px){
  .editor, .ai-tool, .split-controls { grid-template-columns: 1fr; }
}

/* ===== simple-tools framework UI ===== */
.st { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.st.st-1col { grid-template-columns: 1fr; max-width: 640px; }
.st-pane { display: flex; flex-direction: column; gap: 10px; }
.st-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 16px; }
.st-opts { margin: 0; }
.st-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--text-body); cursor: pointer; }
.st-toggle input { width: 17px; height: 17px; accent-color: var(--color-primary); }
.st-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-stat { padding: 16px; border-radius: var(--radius-lg); background: var(--bg-inset); border: 1px solid var(--border-color); }
.st-stat strong { display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-2xl); color: var(--color-primary); line-height: 1.1; }
.st-stat span { font-size: var(--text-xs); color: var(--text-muted); }

/* calculators */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.calc-form { display: flex; flex-direction: column; gap: 14px; }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field > span { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-body); }
.calc-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); padding: 0 14px; transition: all var(--dur-fast); }
.calc-input:focus-within { border-color: var(--color-primary); box-shadow: var(--glow-focus); }
.calc-input i { font-style: normal; color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; }
.calc-input input { flex: 1; border: none; outline: none; background: none; padding: 13px 0; font-family: var(--font-body); font-size: var(--text-base); color: var(--text-strong); width: 100%; }
.calc-field select { padding: 13px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-card); font-family: var(--font-body); font-size: var(--text-base); color: var(--text-strong); outline: none; }
.calc-result { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius-xl); background: var(--bg-inset); border: 1px solid var(--border-color); }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.calc-row:last-child { border-bottom: none; padding-bottom: 0; }
.calc-row span { font-size: var(--text-sm); color: var(--text-muted); }
.calc-row strong { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); color: var(--text-strong); text-align: right; }
.calc-row.primary { padding: 14px 16px; margin: -4px -4px 4px; background: var(--gradient-hero); border: 1px solid var(--blue-200); border-radius: var(--radius-lg); }
.calc-row.primary strong { font-size: var(--text-2xl); color: var(--color-primary); }

/* regex / single-line inputs */
.rx-input, .rx-flags { font-family: var(--font-mono); font-size: var(--text-sm); padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-strong); outline: none; }
.rx-input:focus, .rx-flags:focus { border-color: var(--color-primary); box-shadow: var(--glow-focus); }
.rx-row { display: flex; align-items: center; gap: 6px; }
.rx-row .rx-input { flex: 1; }
.rx-flags { width: 70px; }
.rx-slash { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--text-muted); }
.ai-out mark { background: var(--amber-500); color: var(--slate-900); border-radius: 3px; padding: 0 2px; font-weight: 600; }

/* SERP preview */
.serp { padding: 18px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-color); }
.serp-url { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.serp-title { font-family: var(--font-body); font-size: 20px; color: #1a0dab; line-height: 1.3; }
[data-theme="dark"] .serp-title { color: #8ab4f8; }
.serp-desc { font-size: 14px; color: var(--text-body); margin-top: 4px; line-height: 1.5; }

/* color picker */
.cp-formats { display: flex; flex-direction: column; gap: 8px; }
.cp-fmt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer; font-family: var(--font-mono); transition: all var(--dur-fast); text-align: left; }
.cp-fmt:hover { border-color: var(--color-primary); background: var(--blue-50); }
.cp-fmt span { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cp-fmt strong { font-size: var(--text-sm); color: var(--text-strong); }
.cp-shades { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cp-shade { height: 44px; border-radius: var(--radius-md); cursor: pointer; border: 1px solid var(--border-color); transition: transform var(--dur-fast); }
.cp-shade:hover { transform: scale(1.08); }
.cp-swatch { width: 54px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: none; cursor: pointer; }

/* gradient / shadow / glass previews */
.grad-prev { height: 280px; border-radius: var(--radius-xl); border: 1px solid var(--border-color); }
.shadow-stage, .glass-stage { height: 280px; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--bg-inset); border: 1px solid var(--border-color); }
.shadow-stage #shBox { width: 130px; height: 130px; border-radius: var(--radius-lg); background: var(--bg-card); }
.glass-stage { background: linear-gradient(135deg, var(--blue-400), var(--teal-400)); }
.glass-stage #glBox { width: 180px; height: 130px; }

/* QR */
.qr-stage { display: grid; place-items: center; padding: 20px; border-radius: var(--radius-xl); background: var(--bg-inset); border: 1px solid var(--border-color); min-height: 240px; }
.qr-stage img, .qr-stage canvas { border-radius: var(--radius-md); }

/* ===== productivity + business tools ===== */
.pl-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.search-mini { display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; border:1px solid var(--border-color); border-radius:var(--radius-full); background:var(--bg-card); color:var(--text-muted); min-width:200px; }
.search-mini svg { width:16px; height:16px; flex:none; }
.search-mini input { border:none; background:none; outline:none; font-family:var(--font-body); font-size:14px; color:var(--text-strong); width:100%; }
.pl-cats { flex-wrap:wrap; }
.pl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pl-card { display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--border-color); border-radius:var(--radius-xl); background:var(--bg-card); }
.pl-head { display:flex; flex-direction:column; gap:4px; }
.pl-tag { align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-primary); background:var(--blue-50); padding:3px 9px; border-radius:var(--radius-full); }
.pl-head strong { font-family:var(--font-heading); font-size:16px; color:var(--text-strong); }
.pl-card p { font-size:13px; color:var(--text-muted); line-height:1.55; margin:0; white-space:pre-wrap; max-height:120px; overflow:auto; flex:1; }
.pl-copy { align-self:flex-start; }

.rs-out, .jm-out { display:flex; flex-direction:column; gap:18px; margin-top:6px; }
.rs-group h4, .jm-cols h4 { font-family:var(--font-heading); font-size:14px; color:var(--text-strong); margin:0 0 10px; }
.rs-chips { display:flex; flex-wrap:wrap; gap:8px; }
.rs-chip { font-size:13px; font-weight:600; padding:7px 13px; border-radius:var(--radius-full); border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-body); }
.rs-chip.h { background:var(--blue-50); color:var(--blue-600); border-color:transparent; }
.rs-chip.s { background:var(--teal-50); color:var(--teal-600); border-color:transparent; }
.rs-chip.t { background:var(--bg-subtle); }
.rs-chip.miss { background:rgba(239,68,68,.1); color:#dc2626; border-color:transparent; }

.jm-score { display:flex; align-items:center; gap:18px; padding:18px; border:1px solid var(--border-color); border-radius:var(--radius-xl); background:var(--bg-card); }
.jm-score strong { font-family:var(--font-heading); font-size:16px; color:var(--text-strong); }
.jm-score p { margin:4px 0 0; font-size:13.5px; color:var(--text-muted); }
.jm-ring { --p:0; --c:#2563EB; width:74px; height:74px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--c) calc(var(--p)*1%), var(--bg-subtle) 0); }
.jm-ring span { width:56px; height:56px; border-radius:50%; background:var(--bg-card); display:grid; place-items:center; font-family:var(--font-heading); font-weight:800; font-size:17px; color:var(--text-strong); }
.jm-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.cl-form { display:flex; flex-direction:column; gap:12px; }
.cl-form.cl-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cl-field { display:flex; flex-direction:column; gap:5px; }
.cl-field label { font-size:12.5px; font-weight:600; color:var(--text-muted); }
.cl-field input { padding:11px 13px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); font-family:var(--font-body); font-size:14px; color:var(--text-strong); }
.cl-field input:focus { outline:none; border-color:var(--color-primary); box-shadow:var(--glow-focus); }

.sig-prev { padding:24px; border:1px solid var(--border-color); border-radius:var(--radius-xl); background:#fff; min-height:120px; overflow:auto; }

/* invoice / quotation */
.inv-wrap { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:26px; align-items:start; }
.inv-form { display:flex; flex-direction:column; }
.inv-items { display:flex; flex-direction:column; gap:8px; }
.inv-row { display:grid; grid-template-columns:1fr 64px 90px 32px; gap:6px; }
.inv-row input { padding:9px 10px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-card); font-size:13px; color:var(--text-strong); }
.inv-row button { border:1px solid var(--border-color); background:var(--bg-card); border-radius:var(--radius-sm); cursor:pointer; color:var(--text-muted); }
.inv-preview-wrap { position:sticky; top:88px; }
.inv-doc { background:#fff; color:#1f2937; border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:28px; font-family:Arial,Helvetica,sans-serif; box-shadow:var(--shadow-md); }
.inv-top { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--color-primary); padding-bottom:14px; gap:14px; }
.inv-h { font-size:28px; font-weight:800; color:var(--color-primary); letter-spacing:-.02em; }
.inv-sub { font-size:13px; color:#64748b; margin-top:2px; }
.inv-biz { text-align:right; font-size:13px; }
.inv-biz strong { display:block; font-size:15px; color:#111; }
.inv-biz span { color:#64748b; }
.inv-meta { display:flex; justify-content:space-between; margin:18px 0; gap:14px; }
.inv-meta span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
.inv-meta strong { font-size:14px; color:#111; }
.inv-meta em { font-style:normal; font-size:12.5px; color:#64748b; display:block; }
.inv-date { text-align:right; }
.inv-table { width:100%; border-collapse:collapse; margin:6px 0 16px; font-size:13px; }
.inv-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; border-bottom:2px solid #e2e8f0; padding:8px 6px; }
.inv-table td { padding:9px 6px; border-bottom:1px solid #eef2f7; color:#334155; }
.inv-table th:nth-child(n+2), .inv-table td:nth-child(n+2) { text-align:right; }
.inv-totals { margin-left:auto; width:240px; font-size:13.5px; }
.inv-totals > div { display:flex; justify-content:space-between; padding:5px 0; color:#475569; }
.inv-grand { border-top:2px solid #111; margin-top:4px; padding-top:8px !important; font-weight:800; font-size:17px; color:#111 !important; }
.inv-notes { margin-top:18px; padding-top:14px; border-top:1px solid #eef2f7; font-size:12.5px; color:#64748b; }

/* certificate */
.cert-scale { overflow:auto; }
.cert { --cc:#2563EB; width:720px; height:520px; background:#fff; border:14px solid var(--cc); box-shadow:var(--shadow-lg); position:relative; }
.cert-inner { position:absolute; inset:14px; border:2px solid var(--cc); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; font-family:Georgia,'Times New Roman',serif; }
.cert-seal { position:absolute; top:24px; right:24px; width:54px; height:54px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:26px; }
.cert-title { font-size:34px; font-weight:800; letter-spacing:.02em; color:#1f2937; text-transform:uppercase; }
.cert-pres { margin-top:22px; font-size:15px; color:#6b7280; font-style:italic; }
.cert-name { font-size:40px; font-weight:800; margin:8px 0; font-family:'Brush Script MT',Georgia,serif; }
.cert-body { font-size:15px; color:#6b7280; }
.cert-course { font-size:22px; font-weight:700; color:#1f2937; margin-top:4px; }
.cert-foot { display:flex; gap:80px; margin-top:46px; }
.cert-foot .cert-line { min-width:160px; border-bottom:2px solid #1f2937; padding-bottom:4px; font-size:15px; color:#1f2937; font-weight:600; }
.cert-foot span { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }

@media (max-width: 760px){
  .st, .calc { grid-template-columns: 1fr; }
  .st-stats, .cp-shades { grid-template-columns: repeat(2, 1fr); }
  .pl-grid, .jm-cols, .cl-form.cl-2 { grid-template-columns: 1fr; }
  .inv-wrap { grid-template-columns: 1fr; }
  .inv-preview-wrap { position:static; }
}

/* ===== SEO + DevOps tool rows ===== */
.ck-item { display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:var(--radius-md); cursor:pointer; transition:background var(--dur-fast); }
.ck-item:hover { background:var(--bg-subtle); }
.ck-item input { width:18px; height:18px; margin-top:1px; accent-color:var(--color-primary); flex:none; cursor:pointer; }
.ck-item span { font-size:14px; color:var(--text-body); line-height:1.45; }
.ck-item input:checked + span { color:var(--text-muted); text-decoration:line-through; }

.faqr { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:start; margin-bottom:8px; }
.faqr input, .faqr textarea { padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); font-family:var(--font-body); font-size:14px; color:var(--text-strong); }
.faqr textarea { min-height:42px; resize:vertical; }
.faqr > button, .dsvc > button { border:1px solid var(--border-color); background:var(--bg-card); border-radius:var(--radius-md); cursor:pointer; color:var(--text-muted); padding:0 12px; align-self:stretch; }
.faqr > button:hover, .dsvc > button:hover { color:#dc2626; border-color:#dc2626; }

.dsvc { display:grid; grid-template-columns:1fr 1.2fr 1fr 1.2fr auto; gap:8px; margin-bottom:8px; }
.dsvc input { padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); font-family:var(--font-mono); font-size:12.5px; color:var(--text-strong); min-width:0; }

.st-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--text-body); }
.st-toggle input { width:18px; height:18px; accent-color:var(--color-primary); cursor:pointer; }

@media (max-width: 760px){
  .faqr, .dsvc { grid-template-columns:1fr; }
}

/* ===== vehicle comparison tables ===== */
.cmp { border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; }
.cmp-head { display:grid; grid-template-columns:1fr auto 1fr; background:var(--bg-subtle); padding:12px 14px; font-weight:700; font-size:13px; color:var(--text-strong); text-align:center; }
.cmp-head span:first-child { text-align:left; } .cmp-head span:last-child { text-align:right; }
.cmp-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:10px 14px; border-top:1px solid var(--border-color); font-size:14px; gap:10px; }
.cmp-a { text-align:left; color:var(--text-body); font-weight:600; }
.cmp-b { text-align:right; color:var(--text-body); font-weight:600; }
.cmp-l { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); text-align:center; white-space:nowrap; }
.cmp-a.win, .cmp-b.win { color:#16a34a; }
.cmp-a.win::after { content:' ●'; color:#16a34a; } .cmp-b.win::before { content:'● '; color:#16a34a; }
.spec-edit { display:flex; flex-direction:column; gap:8px; }
.spec-erow { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; align-items:center; }
.spec-erow label { font-size:13px; color:var(--text-muted); font-weight:600; }
@media (max-width: 600px){ .spec-erow { grid-template-columns:1fr; gap:4px; } .spec-erow label { margin-top:6px; } }

/* ===== v2: pane alignment + premium buttons ===== */

/* --- 1. TWO-PANE ALIGNMENT ---------------------------------
   Panes now stretch to equal height and share one baseline:
   label row is a fixed height, the field below fills the rest,
   so input and output boxes start and end on the same line. */
.st, .ai-tool, .editor { align-items: stretch; }
.st-pane, .ai-pane { min-width: 0; height: 100%; }

.ai-label {
  height: 26px; min-height: 26px; margin: 0 0 2px;
  white-space: nowrap; overflow: hidden;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 0.95rem; letter-spacing: -0.01em; color: var(--text-strong);
  display: flex; align-items: center; gap: 10px; flex: none;
}
.ai-label .ai-status { margin-left: auto; }

.ai-area, .ai-out, .st-pane > .doc-prev, .ai-pane > .doc-prev {
  flex: 0 0 auto; height: 320px; min-height: 320px; margin: 0; box-sizing: border-box;
  padding: 18px; border-radius: var(--radius-xl);
  border: 1px solid var(--border-color); background: var(--bg-card);
  font-family: var(--font-body); font-size: 0.95rem; line-height: 1.65;
  color: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ai-area { width: 100%; resize: vertical; }
.ai-area:hover:not(:focus) { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--border-color)); }
.ai-area:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--glow-focus); }
.ai-out { background: var(--bg-inset); overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ai-out:empty::before, .ai-placeholder { color: var(--text-faint); }
.ai-placeholder { display: block; }

/* options / action rows never break the shared baseline */
.ai-opts, .st-bar { flex: none; margin-top: 14px; }
.ai-actions, .ed-actions, .pdf-actions, .result-actions { flex: none; margin-top: 14px; }

@media (max-width: 860px){
  .st, .ai-tool, .editor { grid-template-columns: 1fr !important; }
  .ai-area, .ai-out, .st-pane > .doc-prev, .ai-pane > .doc-prev { height: 240px; min-height: 240px; }
}

/* --- 2. PREMIUM BUTTONS ------------------------------------
   One system: gradient primary, glass secondary. Crisp height,
   real weight, gradient sweep + lift on hover, press feedback. */
.eng .btn, .pdf-tool .btn, .ai-tool .btn, .editor .btn, .st .btn, .calc .btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--btn-h); padding: 0 24px; border: 1px solid transparent;
  border-radius: var(--radius-full); cursor: pointer; position: relative; overflow: hidden;
  font-family: var(--font-body); font-weight: 650; font-size: 0.94rem; letter-spacing: -0.01em;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.eng .btn svg, .pdf-tool .btn svg, .ai-tool .btn svg, .editor .btn svg, .st .btn svg, .calc .btn svg {
  width: 17px; height: 17px; flex: none; position: relative; z-index: 1;
  transition: transform var(--dur-base) var(--ease-spring);
}
.eng .btn > *, .pdf-tool .btn > *, .ai-tool .btn > *, .editor .btn > *, .st .btn > *, .calc .btn > * { position: relative; z-index: 1; }
.eng .btn:hover svg, .pdf-tool .btn:hover svg, .ai-tool .btn:hover svg, .editor .btn:hover svg, .st .btn:hover svg, .calc .btn:hover svg { transform: scale(1.14); }
.eng .btn:active, .pdf-tool .btn:active, .ai-tool .btn:active, .editor .btn:active, .st .btn:active, .calc .btn:active { transform: translateY(1px) scale(.985); }
.eng .btn:focus-visible, .pdf-tool .btn:focus-visible, .ai-tool .btn:focus-visible, .editor .btn:focus-visible, .st .btn:focus-visible, .calc .btn:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.eng .btn:disabled, .pdf-tool .btn:disabled, .ai-tool .btn:disabled, .editor .btn:disabled, .st .btn:disabled, .calc .btn:disabled {
  opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
.btn-lg { --btn-h: 54px !important; padding: 0 30px !important; font-size: 1rem !important; }

/* primary — gradient, always filled, glow */
.eng .btn-primary, .pdf-tool .btn-primary, .ai-tool .btn-primary, .editor .btn-primary, .st .btn-primary, .calc .btn-primary,
.ai-actions .btn-primary, .ed-actions .btn-primary, .pdf-actions .btn-primary, .result-actions .btn-primary {
  background: var(--gradient-brand); color: var(--text-on-brand);
  border-color: transparent; box-shadow: var(--shadow-brand-soft);
}
.eng .btn-primary:hover, .pdf-tool .btn-primary:hover, .ai-tool .btn-primary:hover, .editor .btn-primary:hover, .st .btn-primary:hover, .calc .btn-primary:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-brand); filter: saturate(1.12) brightness(1.04);
}
/* subtle sheen sweep on primary */
.eng .btn-primary::after, .pdf-tool .btn-primary::after, .ai-tool .btn-primary::after, .editor .btn-primary::after, .st .btn-primary::after, .calc .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
}
.eng .btn-primary:hover::after, .pdf-tool .btn-primary:hover::after, .ai-tool .btn-primary:hover::after, .editor .btn-primary:hover::after, .st .btn-primary:hover::after, .calc .btn-primary:hover::after { transform: translateX(120%); }

/* secondary / ghost — glass, fills with brand on hover */
.eng .btn-ghost, .pdf-tool .btn-ghost, .ai-tool .btn-ghost, .editor .btn-ghost, .st .btn-ghost, .calc .btn-ghost,
.ai-actions .btn, .ed-actions .btn, .pdf-actions .btn, .result-actions .btn {
  background: var(--glass-bg, rgba(255,255,255,.72)); backdrop-filter: var(--blur-md, blur(10px));
  color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
  box-shadow: var(--shadow-xs);
}
.ai-actions .btn, .ed-actions .btn, .pdf-actions .btn, .result-actions .btn { flex: 1 1 0; min-width: 148px; height: 48px; }
.eng .btn-ghost::before, .pdf-tool .btn-ghost::before, .ai-tool .btn-ghost::before, .editor .btn-ghost::before, .st .btn-ghost::before, .calc .btn-ghost::before,
.ai-actions .btn::before, .ed-actions .btn::before, .pdf-actions .btn::before, .result-actions .btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gradient-brand); opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.eng .btn-ghost:hover, .pdf-tool .btn-ghost:hover, .ai-tool .btn-ghost:hover, .editor .btn-ghost:hover, .st .btn-ghost:hover, .calc .btn-ghost:hover,
.ai-actions .btn:hover, .ed-actions .btn:hover, .pdf-actions .btn:hover, .result-actions .btn:hover {
  color: var(--text-on-brand); border-color: transparent;
  transform: translateY(-2px); box-shadow: var(--shadow-brand);
}
.eng .btn-ghost:hover::before, .pdf-tool .btn-ghost:hover::before, .ai-tool .btn-ghost:hover::before, .editor .btn-ghost:hover::before, .st .btn-ghost:hover::before, .calc .btn-ghost:hover::before,
.ai-actions .btn:hover::before, .ed-actions .btn:hover::before, .pdf-actions .btn:hover::before, .result-actions .btn:hover::before { opacity: 1; }
.ai-actions .btn-primary::before, .ed-actions .btn-primary::before, .pdf-actions .btn-primary::before, .result-actions .btn-primary::before { display: none; }

[data-theme="dark"] .eng .btn-ghost, [data-theme="dark"] .ai-actions .btn,
[data-theme="dark"] .ed-actions .btn, [data-theme="dark"] .pdf-actions .btn, [data-theme="dark"] .result-actions .btn {
  background: color-mix(in srgb, var(--color-primary) 14%, var(--surface-2));
  color: var(--sky-300, #7dd3fc);
}
@media (prefers-reduced-motion: reduce){
  .eng .btn, .pdf-tool .btn, .ai-tool .btn, .editor .btn, .st .btn, .calc .btn { transition: none; }
  .eng .btn-primary::after { display: none; }
}

.st-pane > .doc-prev, .ai-pane > .doc-prev { margin-top: 0; }

.st-pane > .ai-area[style], .st-pane > .ai-out[style], .st-pane > .doc-prev[style],
.ai-pane > .ai-area[style], .ai-pane > .ai-out[style], .ai-pane > .doc-prev[style] { min-height: 320px !important; }
@media (max-width: 860px){
  .st-pane > .ai-area[style], .st-pane > .ai-out[style], .st-pane > .doc-prev[style],
  .ai-pane > .ai-area[style], .ai-pane > .ai-out[style], .ai-pane > .doc-prev[style] { min-height: 240px !important; }
}

.ai-label > span:first-child, .ai-label { text-overflow: ellipsis; }

/* ===== OCR ===== */
.ocr-pre{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:18px;border-radius:var(--radius-xl);background:var(--bg-card);border:1px solid var(--border-color)}
.ocr-opt{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:600;color:var(--text-muted)}
.ocr-opt select,.ocr-opt input{padding:10px 13px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-1);color:var(--text-body);font-family:var(--font-body);font-size:.9rem;min-width:170px}
.ocr-opt select:focus,.ocr-opt input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--glow-focus)}
.ocr-pre .btn{margin-left:auto}
.ocr-thumb{display:block;max-width:100%;max-height:320px;margin:16px auto 0;border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}
.ocr-run{padding:22px;border-radius:var(--radius-xl);background:var(--bg-card);border:1px solid var(--border-color)}
.ocr-bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:16px 0 12px}
.ocr-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--gradient-brand);transition:width .3s var(--ease-out)}
.ocr-res{display:flex;flex-direction:column;gap:12px}
.ocr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.ocr-stats div{padding:16px;border-radius:var(--radius-lg);background:var(--gradient-hero);border:1px solid var(--border-color);text-align:center}
.ocr-stats strong{display:block;font-family:var(--font-heading);font-weight:800;font-size:1.5rem;color:var(--text-strong)}
.ocr-stats span{font-size:.76rem;font-weight:600;color:var(--text-muted)}
.ocr-res .ai-area{min-height:340px!important;height:340px;font-family:var(--font-mono,monospace);font-size:.86rem}
.ocr-done{text-align:center;padding:34px 22px;border-radius:var(--radius-xl);background:var(--bg-card);border:1px solid var(--border-color)}
.ocr-done h2{font-family:var(--font-heading);font-size:1.3rem;margin:14px 0 6px;color:var(--text-strong)}
.ocr-done p{margin:0 0 18px;color:var(--text-muted);font-size:.92rem}
.ocr-done .result-check{width:64px;height:64px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--gradient-brand);color:var(--text-on-brand);box-shadow:var(--shadow-brand-soft)}
.ocr-done .result-check svg{width:30px;height:30px}
.ocr-done .ai-actions{justify-content:center}
@media(max-width:640px){.ocr-pre{flex-direction:column;align-items:stretch}.ocr-pre .btn{margin-left:0;width:100%}}