:root{--border:var(--line);--surface:#fff;--err:var(--bad);--radius:10px}
/* App shell styles. Tokens match the hub (wizetool.com) so every tool feels like one product. */
:root {
  --ink: #101828; --text: #344054; --muted: #667085; --line: #e4e7ec; --soft: #f7f8fc;
  --brand: #5b4dfe; --brand-dark: #4538e0; --tint: #efedff;
  --ok: #067647; --ok-bg: #ecfdf3; --warn: #93370d; --warn-bg: #fef0c7; --bad: #b42318; --bad-bg: #fee4e2;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bar: 44px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--soft); }
a { color: var(--brand); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; margin: 0; }

/* ---- network bar ---- */
.netbar { height: var(--bar); display: flex; align-items: center; gap: 20px; padding: 0 16px; background: var(--ink); color: #d0d5dd; font-size: .9rem; }
.netbar a { color: #d0d5dd; text-decoration: none; }
.netbar a:hover { color: #fff; }
.netbar-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; color: #fff !important; }
.netbar-back { background: #fff; color: var(--ink) !important; font-weight: 650; padding: 5px 12px; border-radius: 999px; }
.netbar-back:hover { background: var(--tint); }
.netbar-help { margin-left: auto; }

/* ---- app workspace ---- */
.app { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100vh - var(--bar)); height: calc(100dvh - var(--bar)); min-height: 560px; }
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; height: auto; min-height: auto; }
  .wt-tabs { flex-direction: column; }
  .wt-tabs button { width: 100%; text-align: left; }
}
.wt-header{display:flex;gap:20px;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border)}.wt-header a{color:var(--text);text-decoration:none}
.wt-app{max-width:1200px;margin:0 auto;padding:28px 24px 48px}.wt-lead{color:var(--muted);margin-top:0}
.wt-cols{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:24px;align-items:start}
.wt-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.wt-input{position:sticky;top:16px}
@media(max-width:900px){.wt-cols{grid-template-columns:1fr}.wt-input{position:static}}
label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}input,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,#fff);outline-offset:2px}
.wt-tabs{display:flex;gap:6px;margin-bottom:4px}.wt-tabs button{flex:1;padding:9px;border:1px solid var(--border);background:#fff;border-radius:8px;font:inherit;cursor:pointer}.wt-tabs [aria-selected=true]{background:var(--brand);color:#fff;border-color:var(--brand)}
.wt-btn{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}.wt-btn-ghost{background:#fff;color:var(--text);border:1px solid var(--border)}.wt-actions{display:flex;gap:10px;margin-top:18px}
.wt-hint,.wt-note,.wt-count{color:var(--muted);font-size:.85rem}.wt-count{font-weight:400;float:right}.wt-count.bad{color:var(--warn)}.wt-error{color:var(--err)}
.wt-output h2{font-size:1rem;margin:22px 0 8px}.wt-output h2:first-child{margin-top:0}.wt-empty{text-align:center;padding:48px 12px;color:var(--muted)}
.wt-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.wt-list li{padding:10px 12px;border-radius:8px;border:1px solid var(--border);border-left-width:4px}
.lv-error{border-left-color:var(--err);background:#fdecea;color:#b42318;font-weight:600}.lv-warn{border-left-color:var(--warn)}.lv-info{border-left-color:var(--brand)}.lv-ok{border-left-color:var(--ok)}
.serp{max-width:650px;font-family:Arial,sans-serif;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;margin-bottom:14px;overflow:hidden}
.serp-m{max-width:380px}
.serp .u{font-size:11px;color:#667085;display:flex;gap:6px;align-items:center;margin-bottom:6px}.serp .u img{width:16px;height:16px;border-radius:50%}
.serp .t{font-size:18px;line-height:1.3;color:#1a0dab;margin:2px 0;font-weight:400;overflow-wrap:break-word}.serp .s{font-size:13px;line-height:1.5;color:#4d5156}
.card{max-width:520px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;margin-bottom:14px}
.card .im{width:100%;height:200px;background:#eceef5;display:grid;place-items:center;color:var(--muted);font-size:.8rem}
.card .im img{width:100%;height:100%;object-fit:cover;display:block}
.card .b{padding:12px 14px;margin-top:8px}.card .h{font-size:.7rem;color:var(--muted);text-transform:none;margin-bottom:4px}.card .ct{font-weight:600;font-size:16px;line-height:1.4;color:var(--ink);overflow-wrap:break-word;margin-top:0}.card .cd{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.5;overflow-wrap:break-word}.card-tw{border-radius:16px}
.wt-code{background:#14142b;color:#e7e7ff;padding:14px;border-radius:8px;overflow:auto;font-size:.8rem;white-space:pre-wrap;word-break:break-word}

.app-footer{margin-top:12px;padding:28px 16px;border-top:1px solid var(--line);background:#fff;text-align:center;font-size:.875rem;color:var(--muted)}.app-footer-inner{max-width:760px;margin:0 auto}.app-footer-brand{margin-bottom:12px;color:var(--ink)}.app-footer-links a{color:var(--brand);margin:0 8px}.app-footer-copy{margin-top:10px;color:var(--muted)}.site-footer a{color:var(--brand);margin:0 6px}.footer-copy{margin-top:8px}