:root{ --dv-bg:#f5f7ff; --dv-surface:#fff; --dv-border:#cdd1f0; --dv-text:#0f0f2e; --dv-muted:#515180; --dv-accent:#2563eb; --dv-good:#2d7a4a; --dv-bad:#dc2626; }
.dv-wrap{max-width:900px;margin:0 auto;padding:24px 20px 64px;}
.dv-hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(1.4rem,4.2vw,2.05rem);font-weight:900;letter-spacing:-.4px;margin:0 0 6px;color:var(--dv-text);}
.dv-hero .dv-tag{color:var(--dv-muted);font-style:italic;margin:0 0 20px;}
.dv-card{background:var(--dv-surface);border:1px solid var(--dv-border);border-radius:14px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:16px;}
.dv-label{font-size:.8rem;color:var(--dv-muted);display:block;margin:0 0 6px;font-weight:600;}
.dv-ta{width:100%;min-height:150px;padding:12px 14px;border:1.5px solid var(--dv-border);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92rem;resize:vertical;box-sizing:border-box;}
.dv-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0;}
.dv-btn{padding:11px 20px;border:none;border-radius:8px;background:var(--dv-accent);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;min-height:44px;}
.dv-btn.alt{background:transparent;color:var(--dv-accent);border:1.5px solid var(--dv-accent);}
.dv-check{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--dv-text);}
.dv-out{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;background:var(--dv-bg);border:1px solid var(--dv-border);border-radius:8px;padding:12px 14px;min-height:60px;}
.dv-err{color:var(--dv-bad);font-size:.9rem;margin:8px 0 0;}
.dv-note{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:8px;padding:10px 14px;font-size:.88rem;margin:0 0 14px;}
.dv-status{font-size:.85rem;color:var(--dv-muted);margin-left:auto;}
.dv-diff .ln{display:block;padding:1px 8px;font-family:ui-monospace,monospace;font-size:.88rem;white-space:pre-wrap;}
.dv-diff .add{background:#e7f6ec;color:#14532d;}
.dv-diff .del{background:#fdeaea;color:#7f1d1d;}
.dv-faq{max-width:900px;margin:24px auto 0;}
.dv-faq details{background:var(--dv-surface);border:1px solid var(--dv-border);border-radius:10px;padding:12px 16px;margin-bottom:8px;}
.dv-faq summary{font-weight:600;cursor:pointer;color:var(--dv-text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.dv-faq summary::-webkit-details-marker{display:none;}
.dv-faq summary::after{content:'+';color:var(--dv-accent);font-weight:700;font-size:1.2rem;line-height:1;flex-shrink:0;}
.dv-faq details[open] summary::after{content:'\2013';}
.dv-faq p{color:var(--dv-muted);font-size:.92rem;line-height:1.7;margin:10px 0 0;}
.dv-prose{color:var(--dv-muted);font-size:.95rem;line-height:1.7;max-width:680px;margin:0 0 20px;}
.dv-links{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:8px;}
/* ── Suite hero template (match jsonformatter/.tool-hero) ──────────── */
.dv-wrap .tool-hero{padding:0 0 4px;margin-bottom:8px;}
.tool-hero .hero-head{display:flex;align-items:center;gap:16px;}
.tool-hero .hero-icon{flex-shrink:0;width:56px;height:56px;border-radius:14px;background:#0f0e0d;display:flex;align-items:center;justify-content:center;}
.tool-hero .hero-icon svg{width:30px;height:30px;stroke:var(--dv-accent);fill:none;}
.tool-hero .subtitle{color:var(--dv-muted);font-size:1.02rem;margin-top:12px;max-width:680px;}
.dv-wrap .trust-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px;padding-top:18px;border-top:1px solid var(--dv-border);}
.trust-item{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;color:var(--dv-muted);}
.trust-item svg{width:16px;height:16px;stroke:var(--dv-accent);fill:none;flex-shrink:0;}
@media (max-width:560px){.tool-hero .hero-icon{width:48px;height:48px;}.tool-hero .hero-icon svg{width:26px;height:26px;}}

/* ── Nav breakpoint bump — 6 tools no longer fit the desktop bar below 900px ── */
@media (min-width:680px) and (max-width:899px){
  .site-nav .nav-link{display:none;}
  .site-header .nav-hamburger{display:flex;}
  .nav-mobile-menu{display:none!important;}
  .nav-mobile-menu.open{display:flex!important;}
}

/* ── Shared extras (regex + api) ──────────────────────────────────── */
.dv-input{width:100%;padding:11px 14px;border:1.5px solid var(--dv-border);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;box-sizing:border-box;}
.dv-input:focus,.dv-ta:focus,.dv-method:focus{outline:2px solid var(--dv-accent);outline-offset:1px;}
.dv-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 16px;}
.dv-chip{border:1.5px solid var(--dv-border);background:var(--dv-surface);color:var(--dv-text);border-radius:8px;padding:6px 13px;font-size:.85rem;font-weight:600;cursor:pointer;min-height:34px;}
.dv-chip:hover{border-color:var(--dv-accent);color:var(--dv-accent);}

/* Regex */
.dv-out mark{background:#fde68a;color:inherit;border-radius:3px;padding:0 1px;}
.dv-rx-count{font-size:.88rem;font-weight:700;color:var(--dv-good);margin:0 0 8px;}
.dv-rx-count.none{color:var(--dv-muted);font-weight:600;}
.dv-rx-groups{margin:12px 0 0;font-size:.86rem;color:var(--dv-muted);line-height:1.7;}
.dv-rx-groups b{color:var(--dv-text);}
.dv-rx-groups code{font-family:ui-monospace,monospace;background:var(--dv-bg);padding:1px 6px;border-radius:4px;color:var(--dv-text);}

/* API tester */
.dv-req{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.dv-method{flex:0 0 auto;padding:0 14px;border:1.5px solid var(--dv-border);border-radius:8px;background:var(--dv-surface);font-weight:700;font-size:.9rem;color:var(--dv-text);cursor:pointer;min-height:48px;}
.dv-req .dv-url{flex:1 1 240px;min-height:48px;}
.dv-send{flex:0 0 auto;min-height:48px;padding:0 26px;border:none;border-radius:8px;background:var(--dv-accent);color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;}
.dv-send:disabled{opacity:.55;cursor:not-allowed;}
.dv-tabs{display:flex;gap:2px;border-bottom:1.5px solid var(--dv-border);margin:18px 0 0;flex-wrap:wrap;}
.dv-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:10px 15px;font-weight:600;font-size:.92rem;color:var(--dv-muted);cursor:pointer;margin-bottom:-1.5px;min-height:42px;}
.dv-tab:hover{color:var(--dv-text);}
.dv-tab.active{color:var(--dv-accent);border-bottom-color:var(--dv-accent);}
.dv-panel{display:none;padding:16px 2px 0;}
.dv-panel.active{display:block;}
.dv-kv{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.dv-kv input[type=text]{flex:1;min-width:0;min-height:42px;padding:8px 12px;border:1.5px solid var(--dv-border);border-radius:7px;font-family:ui-monospace,monospace;font-size:.88rem;box-sizing:border-box;}
.dv-kv input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--dv-accent);}
.dv-kv-rm{background:none;border:none;color:var(--dv-muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:2px 8px;flex:0 0 auto;}
.dv-kv-rm:hover{color:var(--dv-bad);}
.dv-add{background:none;border:1.5px dashed var(--dv-border);color:var(--dv-accent);border-radius:7px;padding:8px 14px;font-weight:600;font-size:.85rem;cursor:pointer;margin-top:4px;}
.dv-add:hover{border-color:var(--dv-accent);}
.dv-hint{font-size:.82rem;color:var(--dv-muted);margin:8px 0 0;}
.dv-sel{min-height:42px;padding:8px 12px;border:1.5px solid var(--dv-border);border-radius:7px;background:var(--dv-surface);font-size:.9rem;color:var(--dv-text);}
.dv-resp-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 14px;font-size:.85rem;color:var(--dv-muted);}
.dv-pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;padding:4px 12px;border-radius:999px;font-size:.82rem;}
.dv-pill.ok{background:#e7f6ec;color:#14532d;}
.dv-pill.err{background:#fdeaea;color:#7f1d1d;}
.dv-copyrow{display:flex;justify-content:flex-end;margin-top:10px;}
/* small layout helpers (avoid inline styles — CSP) */
.dv-row.tight{margin-bottom:8px;}
.dv-label.inline{margin:0;}
.dv-btn.mini{min-height:0;padding:5px 13px;margin-left:auto;font-size:.85rem;}
.dv-status.gap{margin-left:10px;}
.dv-muted{color:var(--dv-muted);}
.dv-hidden{display:none!important;}
.dv-field{display:block;margin-bottom:10px;}
.dv-field .dv-label{margin-bottom:5px;}