/* Small additions to the projects design (assets/projects.css, synced from the projects theme). */
.tool-art { display: grid; place-items: center; width: calc(100% + 4rem); aspect-ratio: 16 / 7; margin: -2rem -2rem .5rem; background: linear-gradient(135deg, #fbf1f0 0%, var(--bg) 70%); border-bottom: 1px solid var(--border); }
.tool-art .icon, .facts .icon { fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-g:disabled:hover { border-color: var(--border); }
.grid.one { grid-template-columns: 1fr; max-width: 720px; }

/* QR landing */
.demo-card { align-items: center; text-align: center; justify-content: center; }
#demo-qr { padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); line-height: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
#demo-qr svg, #demo-qr canvas { width: 220px; height: 220px; display: block; }
.demo-caption { max-width: 340px; flex: none; }
.card h2 + .facts { margin-top: .3rem; }
.facts { list-style: none; display: grid; gap: 1.1rem; }
.facts li { display: flex; align-items: flex-start; gap: .9rem; font-size: .9rem; color: var(--muted); line-height: 1.55; }
.facts b { color: var(--text); font-weight: 600; }

/* Image to text */
.drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border: 1.5px dashed var(--border); border-radius: var(--r); background: var(--bg); cursor: pointer; overflow: hidden; transition: border-color var(--t); }
.drop:hover, .drop.over, .drop:focus-within { border-color: var(--purple); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop #hint { color: var(--muted); font-size: .9rem; padding: 0 1rem; text-align: center; }
.drop img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.drop img:not([hidden]) ~ #hint { display: none; }
.bar { display: flex; gap: .75rem; }
select { flex: 1; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); font: inherit; font-size: .9rem; }
#status { min-height: 1.4em; font-size: .85rem; flex: none; }
#status.error { color: var(--purple); }
#result[hidden] { display: none; }
#result { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
#text { width: 100%; resize: vertical; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); font: inherit; font-size: .95rem; line-height: 1.6; }
.note { font-size: .75rem !important; color: var(--muted); flex: none; }

@media (max-width: 660px) {
  .tool-art { width: calc(100% + 3rem); margin: -1.5rem -1.5rem .5rem; }
}

/* Light by default, dark on request (toggle in the nav, saved in the browser) */
.theme-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--t), background var(--t); }
.theme-toggle:hover { color: var(--purple); background: var(--bg); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] { color-scheme: dark; --bg: #181818; --card: #222; --border: #333; --text: #f2f2f2; --muted: #a0a0a0; }
html[data-theme="dark"] .clients-wrap, html[data-theme="dark"] .cta, html[data-theme="dark"] footer, html[data-theme="dark"] .language-switch { background: var(--card); }
html[data-theme="dark"] .card:hover { border-color: #555; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .tool-art { background: linear-gradient(135deg, #2c1f1e 0%, var(--bg) 70%); }
html[data-theme="dark"] .btn-g { color: var(--text); }