/* Toolbox content; page shell is shared. */
.toolbox-layout{--paper:#f7f7f2;--ink:#242b25;--line:#e2e5dc;--focus:#526747}
.toolbox-layout{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 'Cabinet Grotesk',system-ui,sans-serif}.toolbox-page button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.toolbox-page button:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.toolbox-page{width:min(840px,calc(100% - 40px));margin:0 auto;padding:68px 0 80px}.toolbox-page h1{margin:0 0 36px;text-align:center;font-size:44px;line-height:1.1;letter-spacing:-.04em;font-weight:800}.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.tool{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:10px 10px 18px;border:1px solid var(--line);border-radius:16px;background:#fffefa;box-shadow:0 2px 3px #242b2503;text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.tool:hover{transform:translateY(-3px);border-color:#c6cebd;box-shadow:0 8px 18px #242b2509}.art{display:grid;place-items:center;aspect-ratio:1.26;border-radius:10px;background:var(--art-bg)}.art svg{display:block;width:100%;max-width:162px;height:auto}.title{font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.015em;margin-top:16px}
dialog{position:fixed;width:min(340px,calc(100% - 40px));padding:48px 24px 40px;border:1px solid var(--line);border-radius:16px;background:#fffefa;color:var(--ink);box-shadow:0 20px 80px #242b2526;text-align:center}dialog::backdrop{background:#242b2540;backdrop-filter:blur(3px)}dialog p{margin:0;font-size:22px;font-weight:650;line-height:1.4;letter-spacing:-.02em}.close{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent}.close:hover{background:#edf0e7}.close svg{width:16px;height:16px}
@media(max-width:700px){.toolbox-page{width:min(420px,calc(100% - 40px));padding-top:48px}.tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.toolbox-page h1{font-size:38px;margin-bottom:28px}}
@media(max-width:360px){.toolbox-page{width:calc(100% - 32px)}.tools{gap:12px}.tool{padding:8px 8px 16px;border-radius:13px}.title{font-size:16px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.tool{transition:none}.tool:hover{transform:none}}

/* Working tools share the directory's paper, ink and quiet green accent. */
.toolbox-layout{--surface:#fffefa;--muted:#586052;--focus:#526747}
.toolbox-layout .floating-header,.toolbox-layout .site-footer{display:none}
.toolbox-page{width:min(1040px,calc(100% - 40px))}
.tools{grid-template-columns:repeat(5,minmax(0,1fr))}
.tool{font:inherit;color:var(--ink);text-decoration:none}
.tool-work{width:min(1160px,calc(100% - 48px));margin:auto;padding:32px 0 64px}
.tool-work h1{margin:20px 0 8px;font-size:clamp(32px,5vw,48px);line-height:1.1;letter-spacing:-.035em;font-weight:800}
.tool-work h2{margin:0 0 16px;font-size:22px;line-height:1.25;letter-spacing:-.015em}
.back-link{display:inline-block;padding:8px 0;font-weight:650;color:var(--focus)}
.tool-description{margin:0 0 24px;color:var(--muted);font-size:18px;max-width:680px}
.tool-controls,.editor-panel,.export-controls{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.tool-work label,.tool-work legend{font-weight:650}
.tool-work input[type=text],.tool-work input[type=password],.tool-work input[type=number],.tool-work select{display:block;min-height:44px;width:100%;margin-top:8px;padding:8px 12px;background:var(--surface);color:var(--ink);border:1px solid #b6bfae;border-radius:8px;font:inherit}
.tool-work input[type=file]{display:block;width:100%;max-width:100%;font:inherit;margin-top:12px;color:var(--muted)}
.tool-work input::file-selector-button{margin-right:12px;padding:10px 14px;border:1px solid #b6bfae;border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
.tool-work input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--focus)}
.tool-work textarea{display:block;width:100%;min-height:320px;padding:16px;resize:vertical;border:1px solid #b6bfae;border-radius:8px;background:var(--surface);color:var(--ink);font:400 15px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4;margin-top:12px}
.tool-work textarea[readonly]{background:#f3f4ed}
.tool-work textarea::placeholder{color:#697160;opacity:1}
.tool-work button{min-height:44px;padding:9px 16px;border:1px solid #b6bfae;border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}
.tool-work button:hover:enabled{background:#edf0e7}
.tool-work .primary{background:var(--focus);border-color:var(--focus);color:#fff}
.tool-work .primary:hover:enabled{background:#3e5135}
.tool-work button:disabled{opacity:.55;cursor:default}
.toolbox-layout :is(a,button,input,textarea,select):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tool-work [hidden]{display:none!important}
.action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tool-work fieldset{display:grid;gap:8px;margin:0 0 20px;padding:0;border:0}
.tool-work legend{padding:0;margin-bottom:12px}
.tool-work fieldset label,.inline-option{display:flex;gap:8px;align-items:flex-start;font-weight:400;max-width:760px}
.inline-option{margin:16px 0}
.help{font-size:14px;line-height:1.5;color:var(--muted);margin:12px 0 16px;overflow-wrap:anywhere}
.tool-status{margin:20px 0;min-height:24px;color:var(--ink);overflow-wrap:anywhere}
.tool-work progress{width:100%;height:12px;accent-color:var(--focus);margin-bottom:20px}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.editor-panel{min-width:0}
.editor-actions{margin-bottom:8px}
.source-preview{display:grid;place-items:center;background:#edf0e7;border-radius:8px;padding:12px;margin-top:16px;min-height:120px}
.source-preview canvas,.source-preview img{width:auto;max-width:100%;height:auto;max-height:560px;object-fit:contain;background:#fff}
.page-log{max-height:180px;overflow:auto;margin:0 0 20px;padding:16px 16px 16px 36px;background:#edf0e7;border-radius:8px;font-size:14px;overflow-wrap:anywhere}
.page-log li+li{margin-top:8px}
.range-fields{display:flex;gap:16px;margin:16px 0;max-width:360px}
.range-fields label{flex:1;min-width:0}
.export-controls{margin-top:20px;display:flex;flex-wrap:wrap;align-items:end;gap:20px}
.export-controls>label{flex:1;min-width:180px;max-width:360px}
.privacy-note{margin-top:20px}
.development-notice{padding:16px;border:1px solid var(--line);border-radius:12px;background:#f3eee3;color:var(--ink);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.development-notice strong{display:block;margin-bottom:4px;font-weight:700}
.development-notice p{margin:0}
.toolbox-page .development-notice{max-width:680px;margin:24px auto 0;text-align:center}
.tool-work .development-notice{margin:0 0 24px}
.file-list{list-style:none;padding:0;display:grid;gap:8px}
.file-list li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px;background:#f3f4ed;border-radius:8px}
.file-list .file-name{text-align:left;flex:1 1 240px;overflow-wrap:anywhere;background:transparent;border-color:transparent}
.password-dialog{text-align:left;padding:24px;width:min(420px,calc(100% - 32px))}
.password-dialog p{font:inherit;margin:12px 0}
.password-dialog .action-row{margin-top:20px}
@media(max-width:900px){.tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.toolbox-page{width:min(440px,calc(100% - 40px))}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-work{width:calc(100% - 32px);padding-top:20px}.editor-grid{grid-template-columns:1fr;gap:16px}.tool-controls,.editor-panel,.export-controls{padding:16px}.tool-work textarea{min-height:240px}.tool-description{font-size:16px}.export-controls{align-items:stretch;gap:16px}.export-controls .action-row{width:100%}.export-controls button{flex:1 1 120px}}
@media(prefers-reduced-motion:reduce){.toolbox-layout{animation:none;transition:none}.toolbox-layout *{scroll-behavior:auto}}