/* Value-first tools: deliver the actual local code before explanation. */
.tool-primary-hero{margin:0 0 18px;padding:clamp(14px,2.5vw,27px);border:1px solid rgba(93,182,133,.32);border-radius:22px;background:linear-gradient(130deg,#142c20,#0b1b16);min-width:0}
.tool-primary-title{display:flex;align-items:center;gap:12px;font-size:clamp(19px,2.5vw,29px);margin:0 0 15px!important;line-height:1.32;color:#e6fff1}
.tool-primary-title .lab-tool-title-icon{width:43px!important;height:43px!important;min-width:43px;object-fit:contain}
.tool-primary-panel{display:grid;gap:13px;min-width:0}
.tool-primary-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:#a4dcb9;font-size:clamp(13px,1.5vw,16px);font-weight:760}
.tool-primary-algorithm{font-size:11px;letter-spacing:.08em;border:1px solid rgba(100,215,151,.26);padding:5px 10px;border-radius:99px;color:#a6dcc1;direction:ltr}
.tool-primary-code{display:block;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Consolas,Monaco,monospace;font-variant-ligatures:none;font-weight:750;font-size:clamp(20px,3.2vw,39px);line-height:1.45;letter-spacing:.015em;overflow-wrap:anywhere;word-break:break-word;text-align:center;direction:ltr;color:#70edac;border:1px solid rgba(113,238,170,.32);border-radius:15px;background:#071811;padding:clamp(15px,3vw,30px) 12px;user-select:all;min-width:0}
.tool-primary-hero[data-value-state="loading"] .tool-primary-code{color:#a4b9ab;font-size:clamp(16px,2vw,24px)}
.tool-primary-hero[data-value-state="unavailable"] .tool-primary-code{color:#d2b38a;font-size:clamp(16px,2vw,22px)}
.tool-primary-actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.tool-primary-actions button{border:1px solid rgba(114,216,158,.45);border-radius:12px;min-height:44px;padding:10px 18px;color:#082016;background:#6febaa;font-weight:780;cursor:pointer}
.tool-primary-actions button:disabled{opacity:.55;cursor:not-allowed}
.tool-primary-actions button.tool-primary-secondary{color:#d8f2e2;background:#17392b}
.tool-primary-actions button:focus-visible{outline:3px solid #e4f9d2;outline-offset:3px}
.tool-primary-status,.tool-primary-extra{margin:0;text-align:center;font-size:12px;color:#adc9b7;line-height:1.6}
.tool-primary-hero + .standalone-workspace{margin-top:0}
.tool-compact-heading{margin:0 0 10px;padding:6px 3px}
.tool-compact-heading h1{display:flex;gap:12px;align-items:center;margin:0!important;font-size:clamp(20px,2.7vw,31px);line-height:1.4;color:#e3f5e9}
.tool-compact-heading .lab-tool-title-icon{width:46px;height:46px;min-width:46px;object-fit:contain}
@media(max-width:560px){.tool-primary-hero{padding:14px 12px}.tool-primary-code{font-size:clamp(18px,5vw,26px);padding:18px 9px}.tool-primary-actions button{flex:1 1 140px}.tool-primary-title .lab-tool-title-icon{width:40px;height:40px}}

/* JSON tree utilities: keep the entire hierarchy open until user searches. */
.lab4-json-search{display:grid;gap:6px;margin:12px 0;color:#c1e7d0;font-size:13px}
.lab4-json-search input{width:100%;max-width:440px;border:1px solid #517b65;background:#0e2519;color:#eef9f0;border-radius:9px;padding:10px 12px}
.lab4-json-copy-path{display:inline-flex;align-items:center;justify-content:center;margin-inline:8px;padding:2px 7px;min-width:28px;min-height:28px;border:1px solid #426d54;border-radius:7px;color:#adebc3;background:#193729;cursor:pointer;font-size:15px}
.lab4-json-copy-path:hover{background:#2c5038}
.lab4-json-copy-path:focus-visible,.lab4-json-search input:focus-visible{outline:2px solid #8cf8bd;outline-offset:2px}
#jsonTreeMatches{display:block;margin:6px 0;color:#a5d7b7;font-size:12px}
/* UUID local v4/v7 generation and inspection — mobile-friendly workspace. */
.uuid-workspace .uuid-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end;margin-bottom:12px}
.uuid-workspace .uuid-fields label{display:grid;gap:7px;min-width:0}
.uuid-workspace .uuid-inspect{margin-top:18px;padding:clamp(12px,2vw,18px);border:1px solid rgba(113,238,170,.28);border-radius:14px;background:rgba(24,53,38,.45);display:grid;gap:10px}
.uuid-workspace .uuid-inspect label{display:grid;gap:7px;min-width:0}
.uuid-workspace #uuidInspectResult{color:#b6dfc3;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.uuid-workspace #toolOutput{font-family:ui-monospace,Consolas,monospace;direction:ltr;text-align:start}
@media(max-width:560px){.uuid-workspace .uuid-fields{grid-template-columns:1fr}}

/* Hash file inspector: safe local file selection and digest comparison. */
.lab4-hash-file{display:grid;gap:10px;margin-top:18px;border:1px solid rgba(113,238,170,.28);background:rgba(18,43,31,.55);border-radius:14px;padding:clamp(12px,2vw,18px)}
.lab4-hash-file h3,.lab4-hash-file p{margin:0}
.lab4-hash-file label{display:grid;gap:7px;min-width:0}
.lab4-hash-file input[type=file]{max-width:100%;font-size:13px}
.lab4-hash-file :is(#hashFileMeta,#hashCompareResult){font-size:13px;overflow-wrap:anywhere;color:#b2ddc4}

/* Binary Base64 and high precision epoch tooling. */
.lab4-base64-file{display:grid;gap:12px;padding:clamp(12px,2vw,20px);margin-top:16px;background:rgba(23,48,34,.55);border:1px solid rgba(114,216,158,.33);border-radius:14px}
.lab4-base64-file label{display:grid;gap:7px;min-width:0}
.lab4-base64-file input[type=file]{max-width:100%;font-size:13px}
.lab4-base64-file output{font-size:13px;color:#b5e6c8;overflow-wrap:anywhere}
.lab4-base64-file p{color:#aacbb7;font-size:13px;line-height:1.6;margin:0}
.timestamp-output{min-width:0}
.timestamp-output > div{overflow-wrap:anywhere;word-break:break-word;font-variant-numeric:tabular-nums;line-height:1.7}