/* tools.css — pages under /tools (free text tools) */
.wn-tool { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 1rem; color: var(--text-primary); }
.wn-crumbs { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.wn-crumbs a { color: var(--accent); text-decoration: none; }
.wn-tool h1 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 0.5rem; }
.wn-tool h2 { font-size: 1rem; margin: 1.1rem 0 0.5rem; color: var(--text-primary); }
.wn-tool-intro { color: var(--text-secondary); margin-bottom: 1rem; max-width: 75ch; }
.wn-tool-note { font-size: 0.78rem; color: var(--text-muted); margin: 0.6rem 0 1.2rem; }
.wn-tool-box {
    background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow); padding: 1.1rem;
}
.wn-tool-steps, .wn-tool-faq { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px; padding: 0.4rem 1.2rem 1rem; margin-bottom: 1.2rem; }
.wn-tool-steps ol { padding-inline-start: 1.2rem; color: var(--text-secondary); line-height: 1.8; }
.wn-tool-faq details { border-top: 1px solid var(--border); padding: 0.6rem 0; }
.wn-tool-faq details:first-of-type { border-top: 0; }
.wn-tool-faq summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.wn-tool-faq p { color: var(--text-secondary); margin-top: 0.4rem; font-size: 0.88rem; }
.wn-tool .wn-popular, .wn-tool .wn-tools-strip { padding-inline: 0; }

/* controls */
.wt-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0.8rem 0; }
.wt-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.74rem; color: var(--text-muted); min-width: 140px; }
.wt-field.grow { flex: 1 1 220px; }
.wt-field.narrow { min-width: 90px; width: 100px; }
.wt-field input, .wt-field select, .wn-tool textarea {
    font: inherit; font-size: 0.88rem; color: var(--text-primary); background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem;
}
.wn-tool textarea { width: 100%; resize: vertical; min-height: 140px; line-height: 1.6; }
.wt-check { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.84rem; color: var(--text-secondary); padding-bottom: 0.45rem; }
.wt-btn {
    font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; padding: 0.55rem 1rem; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary);
}
.wt-btn:hover:not(:disabled) { border-color: var(--accent); }
.wt-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.wt-btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.wt-btn.ghost { background: none; color: var(--text-secondary); font-weight: 500; }
.wt-btn.small { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.wt-btn:disabled { opacity: .5; cursor: not-allowed; }
.wt-btn:focus-visible, .wt-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wt-hint { font-size: 0.78rem; color: var(--text-muted); margin: 0.2rem 0 0.6rem; }
.wt-warn { color: #b45309; background: rgba(245, 158, 11, .12); border-radius: 8px; padding: 0.5rem 0.7rem; }
body.dark-mode .wt-warn { color: #fbbf24; }
.wt-count { font-size: 0.78rem; color: var(--text-muted); margin-inline-start: auto; }
.wt-spacer { flex: 1; }

/* dropzone */
.wt-drop {
    border: 2px dashed var(--border); border-radius: 12px; padding: 2rem 1rem; text-align: center; cursor: pointer;
    color: var(--text-secondary); background: var(--bg-secondary); transition: border-color .15s, background .15s;
}
.wt-drop:hover, .wt-drop.over { border-color: var(--accent); background: rgba(37, 99, 235, .06); }
.wt-drop-ico { font-size: 2rem; margin-bottom: 0.3rem; }
.wt-drop small { color: var(--text-muted); font-size: 0.74rem; }
.wt-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.wt-thumb { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.wt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wt-thumb button { position: absolute; top: 2px; inset-inline-end: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; line-height: 1; }

/* progress */
.wt-progress { margin: 0.8rem 0; display: flex; align-items: center; gap: 0.7rem; font-size: 0.8rem; color: var(--text-secondary); }
.wt-bar { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.wt-bar > div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.wt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .wt-two { grid-template-columns: 1fr; } .wn-tool h1 { font-size: 1.3rem; } }

/* table preview + viewer */
.wt-table-wrap { overflow: auto; max-height: 420px; border: 1px solid var(--border); border-radius: 8px; }
.wt-table-wrap table, .wt-view table { border-collapse: collapse; font-size: 0.82rem; width: max-content; min-width: 100%; }
.wt-table-wrap th, .wt-table-wrap td, .wt-view td, .wt-view th { border: 1px solid var(--border); padding: 0.3rem 0.55rem; text-align: start; white-space: nowrap; }
.wt-table-wrap th, .wt-view .wt-hdr { background: var(--bg-secondary); font-weight: 700; }
.wt-vbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.8rem 0; }
.wt-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.wt-tabs button { font: inherit; font-size: 0.78rem; padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 6px 6px 0 0; background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; }
.wt-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.wt-view { border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; overflow: auto; max-height: 75vh; background: var(--bg-secondary); }
.wt-view canvas { display: block; margin: 0 auto 0.8rem; max-width: 100%; box-shadow: 0 1px 8px rgba(0,0,0,.2); background: #fff; }
.wt-page { margin: 0 auto 0.8rem; background: #fff; }
.wt-view .wt-doc { background: #fff; color: #111; padding: 1.5rem; border-radius: 6px; line-height: 1.7; }
.wt-view .wt-doc img { max-width: 100%; }
.wt-view .wt-pre { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; margin: 0; }
.wt-view img.wt-img { max-width: 100%; display: block; margin: 0 auto; }

/* barcode */
.wt-cam { position: relative; max-width: 560px; margin: 0 auto 0.8rem; border-radius: 12px; overflow: hidden; background: #000; }
.wt-cam video { width: 100%; display: block; }
.wt-cam-frame { position: absolute; inset: 18% 12%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.wt-found { border: 1px solid var(--accent); background: rgba(37, 99, 235, .07); border-radius: 10px; padding: 0.8rem; margin: 0.6rem 0; }
.wt-found code, .wt-history code { word-break: break-all; font-size: 0.9rem; }
.wt-history { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.wt-history li { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; background: var(--bg-secondary); }
.wt-fmt { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }

/* toast */
.wt-toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); background: #111; color: #fff; padding: 0.55rem 1rem; border-radius: 8px; font-size: 0.85rem; z-index: 10000; max-width: 90vw; }

/* print helpers (text-to-pdf fallback + viewer) */
#wn-print-area { display: none; }
@media print {
    body.wn-printing > *:not(#wn-print-area) { display: none !important; }
    body.wn-printing #wn-print-area { display: block !important; color: #000; background: #fff; }
    body.wn-printing-view .wn-header, body.wn-printing-view .wn-footer, body.wn-printing-view .wn-crumbs,
    body.wn-printing-view .wn-tool-intro, body.wn-printing-view .wn-tool-note, body.wn-printing-view .wn-tool-steps,
    body.wn-printing-view .wn-tool-faq, body.wn-printing-view .wn-tools-strip, body.wn-printing-view .wn-popular,
    body.wn-printing-view .wn-ad-container, body.wn-printing-view h1, body.wn-printing-view .wt-vbar,
    body.wn-printing-view .wt-tabs, body.wn-printing-view .wt-drop { display: none !important; }
    body.wn-printing-view .wt-view { max-height: none; overflow: visible; border: 0; background: #fff; padding: 0; }
    body.wn-printing-view .wn-tool-box { box-shadow: none; border: 0; padding: 0; }
}

/* ── trust badges under the title ─────────────────────────────── */
.wn-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.wn-badges li {
    font-size: 0.74rem; font-weight: 600; color: #047857; background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .35); border-radius: 999px; padding: 0.2rem 0.7rem;
}
.wn-badges li::before { content: "✓ "; }
body.dark-mode .wn-badges li { color: #6ee7b7; }

/* ── editor toolbar (above textareas) ─────────────────────────── */
.wt-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
.wn-tool textarea:focus, .wt-field input:focus, .wt-field select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* ── live stat cards (word counter) ───────────────────────────── */
.wt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0.6rem; margin-top: 0.9rem; }
.wt-stat { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 0.65rem 0.8rem; display: flex; flex-direction: column; gap: 0.1rem; }
.wt-stat b { font-size: 1.45rem; line-height: 1.15; color: var(--accent); font-variant-numeric: tabular-nums; }
.wt-stat span { font-size: 0.72rem; color: var(--text-muted); }
.wt-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.6rem 1rem; }
.wt-meter-top { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.2rem; }
.wt-meter-top b { font-variant-numeric: tabular-nums; font-weight: 600; }
.wt-meter-bar { height: 8px; border-radius: 99px; background: var(--bg-secondary); border: 1px solid var(--border); overflow: hidden; }
.wt-meter-bar i { display: block; height: 100%; width: 0; background: #10b981; transition: width .15s, background .15s; }
.wt-meter.warn .wt-meter-bar i { background: #f59e0b; }
.wt-meter.over .wt-meter-bar i { background: #ef4444; }
.wt-meter.over .wt-meter-top b { color: #ef4444; }
.wt-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 1.6rem; }
.wt-chips li { font-size: 0.78rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.65rem; color: var(--text-secondary); }

/* ── option button grids (case converter / line tools) ────────── */
.wt-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }
.wt-opt {
    font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; padding: 0.55rem 0.95rem; border-radius: 9px;
    border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary);
    transition: border-color .12s, background .12s, transform .08s;
}
.wt-opt:hover { border-color: var(--accent); background: rgba(37, 99, 235, .07); }
.wt-opt:active { transform: scale(.97); }
.wt-opt.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.wt-opt.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; }
.wt-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── speech to text ───────────────────────────────────────────── */
.wt-stt { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-bottom: 0.8rem; }
.wt-mic-wrap { display: flex; align-items: center; gap: 0.9rem; }
.wt-mic {
    width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .45); transition: transform .12s, background .15s;
}
.wt-mic:hover:not(:disabled) { transform: scale(1.05); }
.wt-mic:disabled { opacity: .5; cursor: not-allowed; }
.wt-mic.on { background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: wt-pulse 1.4s infinite; }
.wt-mic:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wt-mic-text { display: flex; flex-direction: column; font-size: 0.9rem; }
.wt-mic-text span { color: var(--text-muted); font-size: 0.78rem; min-height: 1.1em; }
.wt-interim { min-height: 1.4em; margin-top: 0.3rem; font-size: 0.88rem; color: var(--text-muted); font-style: italic; }
@keyframes wt-pulse { 70% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .wt-mic.on { animation: none; } .wt-meter-bar i, .wt-opt { transition: none; } }

/* ── Home ── */
.wn-home .wh-hero{text-align:center;padding:1.5rem 0 .5rem}
.wn-home .wh-hero h1{font-size:clamp(1.7rem,4.5vw,2.4rem);margin:0 0 .5rem}
.wn-home .wh-lead{max-width:40rem;margin:0 auto 1.1rem;font-size:1.08rem;color:var(--text-secondary)}
.wn-home .wh-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:0 0 1rem}
.wn-home .wh-btn{text-decoration:none;display:inline-block}
.wn-home .wn-badges{justify-content:center}
.wn-home .wh-sec{margin:2rem 0}
.wn-home .wh-sub{color:var(--text-secondary);margin:.2rem 0 .8rem}
.wn-home .wh-steps{padding-left:1.2rem;display:grid;gap:.5rem;line-height:1.6}
.wn-home .wh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem}
.wn-home .wh-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem}
.wn-home .wh-card h3{margin:0 0 .3rem;font-size:1rem}
.wn-home .wh-card p{margin:0;font-size:.92rem;line-height:1.55;color:var(--text-secondary)}
.wn-home .wh-region{margin:1rem 0 .4rem;font-size:.95rem;color:var(--text-secondary)}
.wn-home .wh-faq{border:1px solid var(--border);border-radius:8px;background:var(--bg-primary);margin:.4rem 0;padding:.1rem .9rem}
.wn-home .wh-faq summary{cursor:pointer;font-weight:600;padding:.65rem 0}
.wn-home .wh-faq p{margin:0 0 .8rem;line-height:1.6}
.wn-home .wh-trust{border-top:1px solid var(--border);padding-top:1rem}
.wn-home .wh-trust p{line-height:1.65}