/* ============================================================
   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; } }