/* WRKDOCS New Tools — accessible and responsive, local-first. */
:root{--tool-navy:#142345;--tool-primary:#365ad8;--tool-muted:#64748b;--tool-line:#dde5f3;--tool-soft:#f6f8fd}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--tool-navy);background:#f9fbff}
a{color:#3157d5}a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.54}
:focus-visible{outline:3px solid #7897ff;outline-offset:3px}
.wrap{width:min(1140px,calc(100% - 40px));margin:auto}
.skip{position:absolute;left:-1000px;top:0;padding:10px;background:#fff;z-index:10}
.skip:focus{left:10px}
header{background:#fff;border-bottom:1px solid #e5eaf5}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:75px}
.logo{font-size:27px;letter-spacing:-1.9px;font-weight:900;color:#1c2c50;text-decoration:none}
.logo span{color:#4264e5}
nav{display:flex;gap:21px;align-items:center;flex-wrap:wrap}
nav a{color:#63708a;text-decoration:none;font-size:13px;font-weight:700}
nav a:hover{color:#3154d0}
.hero{padding:55px 0 30px}
.kicker{color:#5572d9;text-transform:uppercase;font-size:11px;letter-spacing:.15em;font-weight:800;margin:0 0 12px}
.hero h1{font-size:clamp(32px,4.7vw,55px);letter-spacing:-.055em;line-height:1.1;margin:0 0 17px;color:#17284d;max-width:850px}
.hero p{color:#65738b;max-width:780px;margin:0;font-size:15px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.chips span{padding:5px 11px;background:#eaf0ff;color:#3c5dcc;border-radius:100px;font-size:11px;font-weight:750}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start;padding-bottom:46px}
.panel,.aside{background:#fff;border:1px solid var(--tool-line);border-radius:19px;box-shadow:0 9px 28px rgba(30,54,100,.045)}
.panel{padding:26px}
.panel h2,.aside h2{font-size:19px;letter-spacing:-.03em;margin:0 0 13px;color:#243759}
.panel p{margin:0 0 18px;color:var(--tool-muted);font-size:13px}
.dropzone{display:block;text-align:center;background:#f7faff;border:1.6px dashed #b9c9ee;border-radius:15px;padding:30px 16px;margin-bottom:21px;cursor:pointer;transition:background .18s,border-color .18s}
.dropzone.drag{background:#eaf1ff;border-color:#3c66e3}
.dropzone strong{display:block;color:#253f7b;margin-bottom:6px}
.dropzone small{color:#72829f;font-size:12px}
.dropzone input{display:block;margin:13px auto 0;max-width:100%}
.field{margin:0 0 17px}
.field>label{display:block;font-size:12px;font-weight:750;color:#344766;margin-bottom:7px}
.field input:not([type=range]):not([type=file]),.field select,.field textarea{
 width:100%;background:#fff;color:#243554;border:1px solid #ced9ee;border-radius:10px;
 padding:11px 12px;min-height:42px
}
.field textarea{min-height:175px;resize:vertical;font:13px/1.55 ui-monospace,Consolas,monospace}
.field input[type=range]{width:100%;accent-color:#4164e4}
.field-note{color:#73819a;font-size:11px;margin-top:5px}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.btn{border:1px solid #d7e0f1;border-radius:10px;background:#fff;padding:11px 17px;color:#29406c;font-size:13px;font-weight:780;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:42px;gap:8px}
.btn.primary{background:#3659db;color:#fff;border-color:#3659db}
.btn.primary:hover{background:#294ac2}
.btn.secondary:hover{background:#f0f4ff}
.notice{margin:17px 0 0;font-size:12px;color:#6e7b90}
.status{margin:15px 0 0!important;padding:12px 14px;border-radius:10px;background:#eef4ff;color:#314f9b!important;min-height:0}
.status:empty{display:none}
.status.error{background:#fff2f1;color:#a32e26!important}
.status.ok{background:#eaf8f2;color:#11644f!important}
.output{margin-top:18px;border-top:1px solid #edf0f7;padding-top:17px}
.output:empty{display:none}
.output pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,Consolas,monospace;background:#f6f8fe;border:1px solid #e1e8f6;border-radius:10px;padding:15px;max-height:390px;overflow:auto}
.output canvas{max-width:100%;height:auto;border:1px solid #e2e8f2;border-radius:9px}
.pdf-previews{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pdf-preview{min-width:0;background:#f5f7fe;border:1px solid #e0e7f1;padding:10px;border-radius:12px;text-align:center}
.pdf-preview canvas{width:100%;height:auto}
.pdf-preview strong{font-size:12px;display:block;margin-bottom:7px}
.diff-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.diff-results div{background:#f6f8fd;border:1px solid #e1e7f2;border-radius:12px;padding:15px;max-height:360px;overflow:auto}
.diff-results pre{background:transparent;border:0;margin:0;padding:0}
.stats{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0 14px}
.stats span{padding:7px 10px;border-radius:8px;background:#eaf0ff;color:#3656a7;font-size:11px;font-weight:750}
.aside{padding:21px;position:sticky;top:19px}
.aside p,.aside li{font-size:12px;line-height:1.75;color:#64748b}
.aside ul{padding-left:18px}
.aside a{display:block;border-bottom:1px solid #e9eef6;text-decoration:none;padding:11px 0;font-weight:730;font-size:12px}
.aside a:last-child{border:0}
footer{padding:24px 0;border-top:1px solid #e1e7f0;background:#fff;color:#8491aa;font-size:12px}
footer .wrap{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
footer a{color:#64748b;text-decoration:none}
@media(max-width:830px){.workspace{grid-template-columns:1fr}.aside{position:static}.hero{padding-top:36px}.topbar{min-height:67px}.panel{padding:20px}.aside{display:none}}
@media(max-width:520px){.wrap{width:calc(100% - 28px)}nav{gap:10px}nav a{font-size:11px}.logo{font-size:23px}.hero h1{font-size:35px}.dual,.pdf-previews,.diff-results{grid-template-columns:1fr}.dropzone{padding:22px 10px}.panel{padding:17px}}