/* Util.Ninja tool UI kit (QR, word counter, image compressor, JSON formatter, password generator).
   Loaded after site-v1.css; every class is prefixed "ut-". */
/* base (these pages do not load Bootstrap) */
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--un-ink);-webkit-text-size-adjust:100%}
h1,h2,h3{line-height:1.2}
a{color:var(--un-brand)}
.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.visually-hidden-focusable:focus{position:fixed;top:8px;left:8px;z-index:4000;background:#fff;padding:8px 14px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.ut{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--un-ink);margin:8px 0 0}
.ut *,.ut *::before,.ut *::after{box-sizing:border-box}
.ut-card{background:#fff;border:1px solid var(--un-line);border-radius:16px;padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ut-card+.ut-card{margin-top:16px}
.ut-card h2{font:800 18px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0 0 12px}
.ut-grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:start}
.ut-stick{position:sticky;top:76px}
@media (max-width:900px){.ut-grid2{grid-template-columns:minmax(0,1fr)}.ut-stick{position:static}}

.ut-field{margin:0 0 14px}
.ut-label{display:block;font:600 13px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#3a4657;margin:0 0 6px}
.ut-in,.ut-ta,.ut-sel{width:100%;border:1px solid #cdd5e1;border-radius:10px;padding:10px 12px;font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fff;color:var(--un-ink);transition:border-color .15s,box-shadow .15s}
.ut-ta{min-height:180px;resize:vertical;display:block}
.ut-in:focus,.ut-ta:focus,.ut-sel:focus{outline:0;border-color:var(--un-brand);box-shadow:0 0 0 3px rgba(37,71,208,.18)}
.ut-in[type=color]{padding:3px;height:44px;cursor:pointer}
.ut-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important}
.ut-row{display:flex;flex-wrap:wrap;gap:12px}
.ut-row>.ut-field{flex:1 1 150px;min-width:0}

.ut-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ut-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cdd5e1;background:#fff;color:var(--un-ink);border-radius:10px;padding:9px 14px;font:600 14px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;text-decoration:none;min-height:40px;transition:background .15s,border-color .15s,color .15s}
.ut-btn:hover{border-color:var(--un-brand);color:var(--un-brand)}
.ut-btn:focus-visible,.ut-seg button:focus-visible{outline:3px solid rgba(37,71,208,.35);outline-offset:1px}
.ut-btn.pri{background:var(--un-brand);border-color:var(--un-brand);color:#fff}
.ut-btn.pri:hover{background:var(--un-brand-d);color:#fff}
.ut-btn.big{padding:12px 20px;font-size:16px;min-height:48px}
.ut-btn:disabled{opacity:.5;cursor:not-allowed}
.ut-btn svg{width:18px;height:18px}

.ut-seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:#eef1f6;border-radius:12px;padding:4px;max-width:100%}
.ut-seg button{border:0;background:transparent;padding:8px 12px;border-radius:9px;font:600 14px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;color:#3a4657;min-height:36px}
.ut-seg button:hover{color:var(--un-brand)}
.ut-seg button[aria-pressed="true"],.ut-seg button[aria-selected="true"]{background:#fff;color:var(--un-brand);box-shadow:0 1px 3px rgba(16,24,40,.14)}
.ut-seg button:disabled{opacity:.45;cursor:not-allowed}

.ut-check{display:flex;align-items:center;gap:9px;font-size:15px;margin:7px 0;cursor:pointer;user-select:none}
.ut-check input{width:18px;height:18px;accent-color:var(--un-brand);flex:none;margin:0}
.ut-range{width:100%;accent-color:var(--un-brand);margin:4px 0}
.ut-rangev{display:flex;align-items:center;gap:12px}.ut-rangev .ut-in{width:84px;flex:none;text-align:center}

.ut-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.ut-stat{background:#f6f8fc;border:1px solid var(--un-line);border-radius:12px;padding:10px 12px;min-width:0}
.ut-stat b{display:block;font:800 24px/1.15 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--un-ink);overflow-wrap:anywhere}
.ut-stat span{font-size:13px;color:var(--un-muted)}

.ut-note{font-size:13px;line-height:1.45;color:var(--un-muted);margin:6px 0 0}
.ut-msg{border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45;margin:10px 0 0}
.ut-msg.err{color:#912018;background:#fef3f2;border:1px solid #fecdca}
.ut-msg.ok{color:#05603a;background:#ecfdf3;border:1px solid #abefc6}
.ut-msg.warn{color:#7a4a00;background:#fffaeb;border:1px solid #fedf89}
.ut-msg:empty{display:none}

.ut-bar{height:8px;background:#e9edf3;border-radius:99px;overflow:hidden}
.ut-bar i{display:block;height:100%;width:0;background:#1e9e5a;border-radius:99px;transition:width .2s,background .2s}

.ut-drop{border:2px dashed #b9c3d3;border-radius:16px;background:#f9fafc;padding:28px 16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.ut-drop:hover,.ut-drop.over{border-color:var(--un-brand);background:#f0f4ff}
.ut-drop b{display:block;font-size:18px;margin:6px 0 2px}

.ut-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:#16202c;color:#fff;padding:11px 16px;border-radius:10px;font:600 14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;opacity:0;transition:opacity .2s,transform .2s;z-index:3000;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.ut-toast.show{opacity:1;transform:translate(-50%,0)}
.ut-toast button{pointer-events:auto;margin-left:10px;background:none;border:0;color:#9db4ff;font:inherit;cursor:pointer;text-decoration:underline}

.ut-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ut-hide{display:none!important}
.un-sec p{line-height:1.6;color:#3a4657}
@media (max-width:600px){.ut-card{padding:14px}.ut-stat b{font-size:21px}}