.studio-image-preview{max-width:100%;height:auto;display:block;margin-top:1rem}
.favicon-preview{max-width:120px;height:auto;border:1px solid var(--line);border-radius:1rem;background:var(--panel)}figure{margin:1rem 0}figcaption{overflow-wrap:anywhere}
#htmlFrame{display:block;margin-top:1rem;border:1px solid #cbd7e3;border-radius:.65rem;background:#fff}
dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem 1rem}
dt{font-weight:700;overflow-wrap:anywhere}dd{margin:0;overflow-wrap:anywhere}
main>section:not([hidden]){padding:clamp(1rem,2vw,1.5rem);border:1px solid var(--line);border-radius:1rem;margin-block:1rem}
main>section>h2:first-child{margin-top:0}
main>section>dl{padding:1rem;border:1px solid var(--line);border-radius:.75rem;background:var(--panel)}
#taskList{display:grid;gap:.6rem;padding:0;list-style:none}
#taskList li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid var(--line);border-radius:.65rem;background:var(--panel)}
#taskList li label{display:flex;align-items:center;gap:.6rem;margin:0;overflow-wrap:anywhere;min-width:0}
#taskList input[type=checkbox]{width:1.2rem;height:1.2rem;flex:none;margin:0;accent-color:var(--brand)}
#taskList button{margin:0;flex:none}
#taskList li:has(input:checked) label{text-decoration:line-through;color:var(--muted)}
#calendar table{table-layout:fixed;width:100%;text-align:center}
#calendar th,#calendar td{padding:clamp(.4rem,2vw,1rem);text-align:center}
#calendar td.today{outline:2px solid var(--brand);outline-offset:-3px;font-weight:700}
#watchOutput,#timerOutput{display:block;padding:1.25rem;text-align:center;font-size:clamp(1.8rem,7vw,4rem);font-variant-numeric:tabular-nums;font-weight:700;background:var(--panel);border:1px solid var(--line);border-radius:1rem;overflow-wrap:anywhere}
#watchLaps{max-height:20rem;overflow:auto;font-variant-numeric:tabular-nums}
#productivityStatus,#studioStatus{min-height:1.5em;color:var(--link);overflow-wrap:anywhere}
.pdf-dropzone{padding:1.5rem;border:2px dashed var(--line);border-radius:1rem;background:var(--panel);text-align:center;margin-block:1rem}
.pdf-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-block:1rem}
.calculator-rows{grid-column:1/-1;min-width:0}.calculator-rows>.columns,.calculator-rows>div>.columns{padding:.75rem;border:1px solid var(--line);border-radius:.7rem;margin-bottom:.75rem}
.pdf-page-thumb{padding:.6rem;border:1px solid var(--line);border-radius:.7rem;background:var(--panel);text-align:center}
.pdf-page-thumb canvas{display:block;max-width:100%;height:auto;margin:auto auto .5rem}
.pdf-page-thumb input{width:1.2rem;display:inline-block;accent-color:var(--brand)}
.pdf-page-thumb:has(input:checked){outline:2px solid var(--brand)}
.pdf-dropzone:focus-visible,.pdf-dropzone.drag-active{outline:3px solid var(--brand);outline-offset:3px;border-color:var(--brand);background:var(--soft)}
.pdf-dropzone label{text-align:left}
.pdf-file-list{padding:0;list-style:none;display:grid;gap:.75rem}
.pdf-file-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--panel);border:1px solid var(--line);border-radius:.75rem;padding:.75rem}
.pdf-file-list li>span{overflow-wrap:anywhere;min-width:0}
.pdf-file-list .actions{display:flex;gap:.35rem;flex-wrap:wrap;flex-shrink:0;margin:0}
.pdf-file-list button{margin:0;font-size:.8rem;padding:.5rem .7rem}
#pdfStatus{min-height:1.5em;overflow-wrap:anywhere;color:var(--link)}
#pdfDownload{display:inline-block;background:var(--soft);border:1px solid var(--brand);border-radius:.7rem;padding:.8rem 1rem;font-weight:700}
#pdfDownload[hidden]{display:none}
@media(max-width:650px){.pdf-file-list li{align-items:flex-start;flex-direction:column}.pdf-dropzone{padding:1rem}}
@media(max-width:650px){dl{grid-template-columns:1fr}dd{margin-bottom:.7rem}}
.image-crop-canvas{display:block;max-width:100%;height:auto;touch-action:none;cursor:crosshair;border:1px solid var(--border,#7392b0);margin:1rem 0}
.image-crop-canvas[hidden]{display:none}
.json-tree{max-height:40rem;overflow:auto;margin-block:1rem}.json-tree-node{margin:.4rem 0 .4rem .75rem;border-left:1px solid var(--line);padding-left:.5rem}.json-tree button{white-space:normal;text-align:left;overflow-wrap:anywhere;max-width:100%;margin:.25rem 0}.json-tree summary{overflow-wrap:anywhere;cursor:pointer}
body>main .json-tree button.secondary{background:var(--soft);color:var(--text);border:1px solid var(--line)}
body>main .json-tree button.secondary:hover{background:var(--panel);color:var(--text);border-color:var(--link)}