/* Компоненты страниц инструментов NotepadOK. Подключается после style.css */
.tool{margin:0 0 8px}
.tool *{min-width:0}
.tool .row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:12px 0}
.tool .row.tight{gap:8px}
.tool .grow{flex:1 1 auto}
.tool .col2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tool .col3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media (max-width:820px){.tool .col2,.tool .col3{grid-template-columns:1fr}}
.tool label.f{display:inline-flex;align-items:center;gap:8px;font-size:.95rem}
.tool label.f.block{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.tool .lbl{font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 4px;display:block}
.tool textarea,.tool input[type=text],.tool input[type=number],.tool input[type=password],.tool input[type=date],.tool input[type=datetime-local],.tool input[type=search],.tool input[type=url],.tool input[type=color],.tool select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:100%}
.tool input[type=color]{padding:2px;height:36px;width:48px;cursor:pointer}
.tool input[type=number]{width:110px}
.tool textarea{width:100%;min-height:220px;resize:vertical;line-height:1.45;display:block}
.tool textarea:focus-visible,.tool input:focus-visible,.tool select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.tool .mono,.tool textarea.mono,.tool pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;font-size:.88rem}
.tool pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.tool .box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tool .box h3,.tool .box h4{margin:0 0 8px;font-size:.95rem;color:var(--ink)}
.tool .out{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;overflow:auto;max-height:520px}
.tool .btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tool button.sm{padding:5px 10px;font-size:.88rem}
.tool button.danger{border-color:#c0392b;color:#c0392b}
.tool button.on{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:var(--accent);font-weight:600}
.tool .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tool .seg button{border:0;border-radius:0;border-right:1px solid var(--line)}
.tool .seg button:last-child{border-right:0}
.tool .tabs-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tool .tabs-bar button{padding:6px 12px;font-size:.92rem}
.tool .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0}
.tool .stat-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.tool .stat-box b{display:block;font-size:1.35rem;line-height:1.2;font-variant-numeric:tabular-nums}
.tool .stat-box span{font-size:.8rem;color:var(--muted)}
.tool .msg{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);margin:10px 0;font-size:.93rem}
.tool .msg.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.tool .msg.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--surface))}
.tool .msg.err{border-color:#c0392b;background:color-mix(in srgb,#c0392b 9%,var(--surface))}
.tool .hint{color:var(--muted);font-size:.86rem}
.tool .prog{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 0}
.tool .prog>i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.tool table.t{border-collapse:collapse;width:100%;font-size:.9rem}
.tool table.t th,.tool table.t td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.tool table.t th{background:color-mix(in srgb,var(--accent) 7%,var(--surface));position:sticky;top:0}
.tool .scroll{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:10px}
.tool .scroll table.t{border:0}
.tool .copyable{cursor:pointer}
.tool .copyable:hover{border-color:var(--accent)}
.tool .kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:.92rem}
.tool .kv dt{color:var(--muted)}
.tool .kv dd{margin:0;overflow-wrap:anywhere}
.tool .res-list{display:grid;gap:8px;margin:12px 0}
.tool .res-item{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.tool .res-item .nm{font-weight:600;overflow-wrap:anywhere;flex:1 1 200px}
.tool .res-item .sz{color:var(--muted);font-size:.88rem}
.tool .files{display:grid;gap:8px;margin:12px 0}
.tool .file-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.tool .file-item.dragging{opacity:.4}
.tool .file-item .grab{cursor:grab;color:var(--muted);user-select:none}
.tool .file-item .nm{font-weight:600;overflow-wrap:anywhere}
.tool .file-item .mt{font-size:.85rem;color:var(--muted)}
.tool .pgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:12px 0}
.tool .pg{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:6px;text-align:center;cursor:pointer;user-select:none}
.tool .pg.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.tool .pg.del{opacity:.4}
.tool .pg.dragover{outline:2px dashed var(--accent)}
.tool .pg canvas,.tool .pg img{max-width:100%;height:auto;display:block;margin:0 auto;background:#fff;box-shadow:0 1px 4px #0003;transition:transform .15s}
.tool .pg .no{font-size:.78rem;color:var(--muted);margin-top:4px}
.tool .pg .tb{display:flex;gap:4px;justify-content:center;margin-top:4px}
.tool .pg .tb button{padding:1px 6px;font-size:.8rem;line-height:1.5}
.tool .pg .src{position:absolute;top:4px;left:4px;background:var(--accent);color:var(--accent-ink);border-radius:6px;font-size:.7rem;padding:0 5px}
.tool .chip{display:inline-block;padding:2px 9px;border:1px solid var(--line);border-radius:99px;font-size:.82rem;background:var(--surface)}
.tool .sw{display:inline-block;width:18px;height:18px;border-radius:5px;border:1px solid #0003;vertical-align:middle}
.tool .diff-add{background:color-mix(in srgb,#2ea043 28%,transparent);border-radius:3px}
.tool .diff-del{background:color-mix(in srgb,#cf222e 26%,transparent);border-radius:3px;text-decoration:line-through}
.tool .hl{background:color-mix(in srgb,#f1c40f 45%,transparent);border-radius:3px}
.tool .hl.alt{background:color-mix(in srgb,#3498db 40%,transparent)}
.tool .stage{position:relative;display:inline-block;max-width:100%;line-height:0;background:#fff;box-shadow:0 1px 6px #0004}
.tool .stage canvas{max-width:100%;height:auto;display:block}
.tool .stage .ov{position:absolute;inset:0;touch-action:none}
.tool .big-drop{margin:8px 0 16px}
.tool details.opt{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:10px 0;padding:0 14px}
.tool details.opt>summary{padding:10px 0;font-weight:600;font-size:.93rem}
.tool details.opt>summary::after{content:"+";margin-left:8px}
.tool details.opt[open]>summary::after{content:"–"}
.tool details.opt[open]{padding-bottom:12px}
.about ul.feat{margin:0 0 16px;padding-left:20px;color:var(--muted);font-size:.95rem;line-height:1.6}
.about h2{font-size:1.1rem;margin:0 0 8px}
.tool-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;font-size:.92rem;z-index:50;box-shadow:0 6px 20px #0004;max-width:90vw}
.crumb{font-size:.88rem;margin:0 0 10px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent);text-decoration:underline}

.tool [hidden]{display:none!important}

/* Просмотр XLSX / DOCX: сетка в «бумажных» цветах независимо от темы */
.tool .xv-grid{height:540px;overflow:auto;position:relative;border:1px solid var(--line);border-radius:10px;background:#fff;color:#1d1d1b;outline:none;color-scheme:light;font-size:.85rem}
.tool .xv-grid:focus-visible{border-color:var(--accent)}
.tool .xv-grid table{table-layout:fixed;border-collapse:collapse}
.tool .xv-grid #gh{position:sticky;top:0;z-index:3;background:#eef1ef}
.tool .xv-grid #gsp{position:relative}.tool .xv-grid #gb{position:absolute;left:0;top:0}
.tool .xv-grid th{height:24px;background:#eef1ef;border:1px solid #d4d9d6;font-weight:600;font-size:.78rem;color:#4a5651;padding:0;text-align:center;user-select:none;cursor:pointer}
.tool .xv-grid th.on,.tool .xv-grid td.rn.on{background:#d6ebe3;color:#0b5c46}
.tool .xv-grid th.hid,.tool .xv-grid td.rn.hid{background:repeating-linear-gradient(45deg,#e6e6e6,#e6e6e6 4px,#f3f3f3 4px,#f3f3f3 8px)}
.tool .xv-grid td{border:1px solid #e1e5e3;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;background:#fff;color:#1d1d1b;height:22px}
.tool .xv-grid td.rn{background:#eef1ef;color:#4a5651;text-align:center;font-size:.76rem;padding:0;cursor:pointer;user-select:none;position:sticky;left:0;z-index:1}
.tool .xv-grid td.n{text-align:right}.tool .xv-grid td.bl{text-align:center}.tool .xv-grid td.er{text-align:center;color:#b3261e}
.tool .xv-grid td.fx{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;color:#0b5c46}
.tool .xv-grid td.lk{color:#1a5fb4;text-decoration:underline}
.tool .xv-grid td.cm{background-image:linear-gradient(225deg,#d33 6px,transparent 6px)}
.tool .xv-grid td.hidc{opacity:.6;background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,0,0,.05) 5px,rgba(0,0,0,.05) 10px)}
.tool .xv-grid td.pre{box-shadow:inset 0 0 0 2px #e08a00,inset 0 0 0 100px rgba(224,138,0,.15)}
.tool .xv-grid td.sl{box-shadow:inset 0 0 0 100px rgba(15,123,95,.16)}
.tool .xv-grid td.ac{box-shadow:inset 0 0 0 2px #0f7b5f,inset 0 0 0 100px rgba(15,123,95,.08)}
.tool .xv-grid td.mg{text-align:center;vertical-align:middle}

/* Предпросмотр документа Word */
.tool .docprev{background:#fff;color:#1d1d1b;color-scheme:light;border:1px solid var(--line);border-radius:10px;padding:22px 26px;max-height:600px;overflow:auto;line-height:1.55;font-size:.98rem}
.tool .docprev h1,.tool .docprev h2,.tool .docprev h3,.tool .docprev h4,.tool .docprev h5,.tool .docprev h6{margin:1em 0 .4em;line-height:1.25;color:#111}
.tool .docprev h1{font-size:1.6rem}.tool .docprev h2{font-size:1.3rem}.tool .docprev h3{font-size:1.12rem}
.tool .docprev p{margin:.55em 0}.tool .docprev ul,.tool .docprev ol{margin:.5em 0;padding-left:1.6em}
.tool .docprev table{border-collapse:collapse;margin:.8em 0;max-width:100%}.tool .docprev td,.tool .docprev th{border:1px solid #c9cfcc;padding:4px 9px;vertical-align:top}.tool .docprev th{background:#eef1ef}
.tool .docprev img{max-width:100%;height:auto}.tool .docprev mark{background:#fff3a0}.tool .docprev ins{background:#d9f2e3;text-decoration:none}.tool .docprev del{background:#fbdcd8}
.tool .docprev blockquote{margin:.5em 0;padding:.2em .9em;border-left:3px solid #c9cfcc;color:#4a5651}.tool .docprev a{color:#1a5fb4}
.tool .docprev .notes{margin-top:1.4em;padding-top:.6em;border-top:1px solid #c9cfcc;font-size:.9rem}.tool .docprev sup.cm{color:#b3261e}.tool .docprev .img-ph{color:#6b756f;font-style:italic}

/* ---- визуальный редактор страницы PDF ---- */
@font-face{font-family:NokSans;src:url(fonts/DejaVuSans.ttf);font-weight:400}
@font-face{font-family:NokSans;src:url(fonts/DejaVuSans-Bold.ttf);font-weight:700}
@font-face{font-family:NokSerif;src:url(fonts/DejaVuSerif.ttf)}
@font-face{font-family:NokMono;src:url(fonts/DejaVuSansMono.ttf)}
.tool .stagewrap{overflow:auto;max-width:100%;text-align:center;padding:6px;background:color-mix(in srgb,var(--line) 55%,var(--surface));border-radius:10px;outline:none}
.tool .stagewrap .stage{box-shadow:0 2px 10px #0005;text-align:left;cursor:default}
.tool .stagewrap .ov{overflow:hidden;line-height:normal}
.tool .ob{position:absolute;box-sizing:border-box;touch-action:none;user-select:none}
.tool .ob.sel{outline:2px dashed var(--accent);outline-offset:1px}
.tool .ob .hd{position:absolute;right:-7px;bottom:-7px;width:13px;height:13px;background:var(--accent);border:2px solid #fff;border-radius:3px;cursor:nwse-resize;display:none;touch-action:none}
.tool .ob.sel .hd{display:block}
.tool .ob img{width:100%;height:100%;display:block;pointer-events:none}
.tool .ob .tx{width:100%;min-height:100%;white-space:pre-wrap;word-break:break-word;outline:none;font-family:NokSans,sans-serif;line-height:1.2;cursor:move}
.tool .ob .tx[contenteditable=true]{cursor:text;background:#fff8}
.tool .stagebar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.tool .stagebar .seg button.on,.tool .tools button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tool .tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.tool .sigpad{border:1px dashed var(--line);border-radius:10px;background:#fff;touch-action:none;max-width:100%;cursor:crosshair}
.tool .ov.drawing .ob{pointer-events:none}
.tool .tools{position:sticky;top:50px;z-index:6;background:var(--bg,var(--surface));padding:6px 0;border-bottom:1px solid var(--line)}
.tool .dcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:760px){.tool .dcols{grid-template-columns:1fr}}
.tool .dtxt{white-space:pre-wrap;font-size:14px;line-height:1.55;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);max-height:68vh;overflow:auto;word-break:break-word}
.tool .dtxt ins{background:rgba(34,197,94,.30);text-decoration:none;border-radius:3px;padding:0 1px}
.tool .dtxt del{background:rgba(239,68,68,.30);border-radius:3px;padding:0 1px}
.tool .dtxt .cur{outline:2px solid var(--accent);outline-offset:1px}
.tool .vwrap{position:relative;display:inline-block;max-width:100%;line-height:0;box-shadow:0 1px 6px #0004;background:#fff}
.tool .vwrap canvas{display:block;max-width:100%;height:auto}
.tool .vcols{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.tool .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 4px -1px 10px}