*{box-sizing:border-box} :root{--ink:#24352f;--muted:#7c8881;--line:#e2e7e2;--green:#236a50;--bg:#f5f6f2}body{margin:0;font:13px/1.6 "Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}button,.button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none}button:hover,.button:hover{border-color:#86a593;background:#f4f8f4}button:disabled{opacity:.4;cursor:default}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#18553e;color:white}.wide{width:100%;margin-bottom:8px}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:white;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:10px;color:var(--green);text-decoration:none;font-size:25px;white-space:nowrap}.brand strong{font-size:23px;letter-spacing:3px}.brand span{color:var(--muted);font-size:12px;letter-spacing:1px;border-left:1px solid var(--line);padding-left:13px}.head-actions{display:flex;gap:8px}nav{display:flex;height:100%;gap:20px}.tab{border:0;border-radius:0;color:var(--muted);background:none;padding:0 5px}.tab.active{color:var(--green);border-bottom:3px solid var(--green)}main#composeView{height:calc(100vh - 72px);display:grid;grid-template-columns:246px minmax(280px,1fr) 276px}.left,.right{background:#fff;overflow:auto;min-height:0}.left{border-right:1px solid var(--line);display:flex;flex-direction:column}.right{border-left:1px solid var(--line)}section{padding:20px 17px;border-bottom:1px solid var(--line)}.section-title{font-weight:600;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;letter-spacing:.5px}.section-title>span{font-size:10px;color:#a0aaa3;font-weight:400}.upload{display:block;text-align:center;border:1px dashed #9fb7a5;border-radius:6px;background:#f7faf6;padding:15px 3px;cursor:pointer;color:var(--green)}small,.muted{font-size:11px;color:var(--muted);line-height:1.7}small{display:block;margin-top:9px}.papers{display:flex;gap:8px;margin-top:12px}.paper{padding:0;width:62px;height:79px;border:1px dashed #c6cec8;border-radius:3px;overflow:hidden;position:relative;font-size:10px;flex-direction:column;color:#8b968d;background:#fafbf8}.paper img{width:100%;height:100%;object-fit:cover}.paper.active{outline:2px solid var(--green)}.paper label{cursor:pointer;position:absolute;bottom:0;background:#ffffffdf;width:100%;font-size:9px}.layers-section{flex:1}.layer{display:flex;align-items:center;gap:9px;border:1px solid transparent;padding:9px 7px;border-radius:6px;cursor:pointer;margin-bottom:5px}.layer.active{background:#edf4ee;border-color:#d0e1d1}.layer img{width:34px;height:40px;object-fit:contain;background:white;border:1px solid var(--line)}.layer .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer small{margin:0;font-size:10px}.layer button{padding:0 4px;border:0;background:none}.layer-actions{display:flex;gap:5px;margin-top:12px}.layer-actions button{flex:1;padding:5px}.local-note{padding:15px;color:#809582;font-size:10px}.workspace{display:flex;flex-direction:column;min-width:0;min-height:0}.canvas-toolbar{height:49px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#fafbf8}.canvas-toolbar>div{display:flex;align-items:center;gap:8px}.canvas-toolbar button{padding:3px 8px;background:transparent}.canvas-toolbar span{font-size:11px;color:var(--muted)}.divider{height:16px;border-left:1px solid var(--line);margin:0 6px}#canvasViewport{flex:1;min-height:0;overflow:auto;position:relative;display:grid;place-items:center;padding:35px;background-color:#e9ece7;background-image:radial-gradient(#cbd2c9 .7px,transparent .7px);background-size:12px 12px}#canvasWrap{position:relative;flex:none;box-shadow:0 8px 35px #28392721}#canvas,#overlay{display:block;width:100%;height:100%}#overlay{position:absolute;inset:0;touch-action:none}.empty-guide{position:absolute;background:#fffffff2;box-shadow:0 5px 30px #25362910;border:1px solid var(--line);padding:28px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:90%}.empty-guide b{font-size:20px;font-weight:500}.empty-guide span{font-size:12px;color:var(--muted)}.empty-guide button{margin-top:8px}footer{height:34px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:10px;color:var(--muted);background:#fafbf8}label{display:block;color:#69776d;font-size:11px;margin-bottom:10px}input:not([type=checkbox]):not([type=range]),select{width:100%;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);padding:7px 8px;margin-top:4px;outline:none}input:focus,select:focus{border-color:var(--green)}input[type=range]{width:100%;accent-color:var(--green)}input[type=checkbox]{accent-color:var(--green)}output{float:right;color:var(--ink)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.check{display:flex;align-items:center;gap:7px}.text{background:none;border:0;padding:0;color:var(--green);font-size:11px}#noSelection{color:#9aa49d;padding:18px 0;font-size:12px}#histogram{width:100%;height:70px;background:#f5f7f3;margin:13px 0 5px}.gradient{height:9px;background:linear-gradient(to right,#000,#fff);border:1px solid var(--line);margin-bottom:12px}dialog{border:1px solid var(--line);border-radius:13px;padding:25px;width:460px;max-width:95vw;box-shadow:0 25px 100px #17291e33}dialog::backdrop{background:#1c302c60;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head h2{margin:0;font-size:20px}.dialog-head button{border:0;font-size:24px;padding:0 7px}.compression{display:flex;align-items:center;gap:10px;padding:12px 0}.compression .check{flex:1;white-space:nowrap;margin:0}.compression input[type=number]{width:90px}.compression select{width:65px}#exportResult{padding:12px;background:#f2f6ef;font-size:12px;white-space:pre-line}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:80vw;background:#24392f;color:white;padding:12px 22px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:100}#toast.show{opacity:1}#documentView{height:calc(100vh - 72px);overflow:auto}.docbar,#basicToolbar{display:flex;align-items:center;gap:8px;padding:12px 25px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}.docbar label{margin:0}.docbar span{flex:1;color:var(--muted);font-size:11px}#basicToolbar{padding:8px 25px}#basicToolbar select{width:auto;margin:0}#docNotice{text-align:center;padding:9px 20px;color:#967239;background:#fcf8e9;font-size:11px}#docPages{padding:25px;display:flex;flex-direction:column;align-items:center;gap:25px}.doc-page{width:794px;min-height:1123px;background:white;padding:76px;box-shadow:0 3px 20px #21332816;outline:none;font-family:SimSun,serif;font-size:16px;line-height:1.7;color:#000;overflow-wrap:anywhere}.doc-page table{border-collapse:collapse;width:100%}.doc-page td,.doc-page th{border:1px solid #333;padding:8px;min-width:40px}.doc-page img{max-width:100%}#officeHost{height:calc(100% - 75px)}[hidden]{display:none!important}@media(max-width:1100px){header{padding:0 12px;gap:10px}.brand span{display:none}main#composeView{grid-template-columns:210px minmax(250px,1fr) 240px}section{padding:16px 12px}.head-actions button,.head-actions .button{font-size:11px;padding:6px 9px}nav{gap:10px}}@media(max-width:780px){header{height:auto;min-height:65px;flex-wrap:wrap;padding:10px}nav{height:38px}.head-actions{flex-wrap:wrap}main#composeView{height:auto;grid-template-columns:180px minmax(260px,1fr)}.workspace{height:75vh}.right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.doc-page{transform-origin:top left}.canvas-toolbar{padding:0 5px}footer span:last-child{display:none}}
/* Document formatting uses imported physical page measurements. */
#basicToolbar{position:sticky;top:0;z-index:5;box-shadow:0 2px 7px #23352d0a}
#basicToolbar .compact-field{display:flex;align-items:center;gap:6px;margin:0;white-space:nowrap}
#basicToolbar #fontSize{width:72px;margin:0}
.document-action-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.filename-preview{padding:10px 12px;background:#f2f6ef;border:1px solid var(--line);border-radius:6px;margin:12px 0 16px}
.filename-preview>span{display:block;font-size:11px;color:var(--muted)}
.filename-preview output{display:block;float:none;margin-top:3px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;color:var(--ink)}
#exportDialog{max-height:90vh;overflow:auto}
#clearDocument{color:#995745}
#canvasViewport{display:block;padding:0;overflow-anchor:none;scroll-behavior:auto;overscroll-behavior:contain}
#canvasStage{display:flex;align-items:center;justify-content:center;width:max-content;height:max-content;min-width:100%;min-height:100%;padding:35px}
#canvasViewport .empty-guide{left:50%;top:50%;transform:translate(-50%,-50%)}
.slider-control{margin-bottom:12px}
.slider-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.slider-heading label{margin:0}
.slider-heading input[type=number]{width:82px;margin:0;padding:4px 7px;font-variant-numeric:tabular-nums}
.slider-control input[type=range]{display:block;margin:8px 0 0;cursor:ew-resize;touch-action:pan-y}
.slider-control input[type=range]:focus-visible{outline:2px solid #78a68b;outline-offset:3px;border-radius:4px}
#docPages .doc-page{height:1123px;min-height:0;flex-shrink:0;line-height:1.4;font-size:10.5pt;white-space:normal;overflow:visible;overflow-wrap:normal}
.doc-page p,.doc-page h1,.doc-page h2,.doc-page h3,.doc-page h4{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;white-space:pre-wrap}
.doc-page [data-signature-block]{outline:1px dashed #8ea996;outline-offset:6px}
.doc-page [data-signature-block]:focus-within{outline-color:var(--green)}


/* Compact composition panels and project controls. */
.head-actions{align-items:center}
.head-actions>button,.project-menu>summary{height:34px;margin:0;white-space:nowrap}
.head-actions .icon-button{width:34px;padding:0;font-size:18px}
.project-menu{position:relative}
.project-menu>summary{display:flex;align-items:center;gap:18px;padding:5px 12px;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;list-style:none}
.project-menu>summary::-webkit-details-marker{display:none}
.project-menu[open]>summary{background:#edf4ee;border-color:#86a593}
.project-menu-items{position:absolute;right:0;top:calc(100% + 7px);z-index:20;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px;box-shadow:0 8px 24px #24352f20}
.project-menu-items button,.project-menu-items .button{display:flex;width:100%;justify-content:flex-start;border:0;margin:0;padding:8px 12px;font-size:12px}
.project-menu summary:focus-visible,.panel summary:focus-visible,.transform-panel summary:focus-visible,.output-levels summary:focus-visible,.button:focus-visible{outline:2px solid #78a68b;outline-offset:2px}
#composeView .left>section,#composeView .right>section{padding:13px 14px}
.left .section-title{margin-bottom:9px;font-size:12px;letter-spacing:0}
.left .upload{padding:10px 3px;margin-bottom:0;font-size:11px}
.left .papers{gap:6px;margin-top:9px}
.left .paper{flex:1;min-width:0;height:auto;gap:0;justify-content:flex-start}
.left .paper img{height:61px;flex:none}
.left .paper label{position:static;flex:none;margin:0;padding:3px 0;border-top:1px solid var(--line);background:#fff;line-height:1.6;text-align:center}
.left>section>small{font-size:10px;line-height:1.5;margin-top:8px}
.left .wide{justify-content:flex-start;padding:6px 10px;margin-bottom:6px;min-height:32px;font-size:12px}
.left .wide:last-child{margin-bottom:0}
.left .layers-section{display:flex;flex-direction:column;min-height:180px;padding-bottom:0!important}
#layers{flex:1;min-height:0}
.layer{gap:8px;padding:6px;border-radius:4px;margin-bottom:3px;min-height:52px}
.layer img{width:29px;height:36px;flex:none}
.layer .name{font-size:12px;min-width:0}
.layer button{display:flex;align-items:center;justify-content:center;width:26px;height:28px;flex:none;color:#69776d;border-radius:3px}
.layer button:hover{background:#dce9df}
.layer button[aria-pressed=false]{color:#a0aaa3}
.layer-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:8px 0;margin-top:10px;gap:5px}
.layer-actions button{height:29px;font-size:11px;padding:3px;border-radius:4px}
#deleteLayer:not(:disabled):hover{color:#a44538;border-color:#dcb8b0;background:#fff5f2}
.local-note{padding:10px 14px;border-top:1px solid var(--line)}
.right .panel>summary,.transform-panel>summary,.output-levels>summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;font-size:12px;font-weight:600;min-height:22px}
.right summary::-webkit-details-marker{display:none}
.right summary::before{content:'›';font-size:16px;line-height:1;width:10px;color:var(--muted);transition:transform .12s}
.right details[open]>summary::before{transform:rotate(90deg)}
.right details[open]>summary{margin-bottom:10px}
.right .panel>summary{color:var(--ink)}
.right input:not([type=checkbox]):not([type=range]),.right select{padding:4px 7px;min-width:0;min-height:29px;font-size:12px}
.right label{margin-bottom:8px}
.right #layerName{margin:0 0 10px;font-weight:600}
.right .grid2{gap:4px 10px}
.right .grid2 label{margin-bottom:3px;font-size:10px}
.right .check{font-size:11px;margin:6px 0 10px}
.transform-panel{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.transform-panel>summary span{margin-left:auto;color:var(--muted);font-size:10px;font-weight:400}
.right .slider-control{margin-bottom:10px}
.right .slider-heading input[type=number]{width:66px}
.right .slider-control input[type=range]{margin-top:5px}
.right #centerLayer{font-size:11px;padding:5px;margin-bottom:0}
#levelsSection{position:relative}
.levels-reset{position:absolute;top:16px;right:14px}
.levels-panel>summary{padding-right:40px}
#levelChannel{margin:0}
#histogram{height:66px;margin:10px 0 8px}
.input-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.input-levels .slider-heading{display:block}
.input-levels .slider-heading label{font-size:10px;white-space:nowrap;margin-bottom:3px}
.right .input-levels .slider-heading input[type=number]{width:100%;text-align:center;font-variant-numeric:tabular-nums}
.output-levels{border-top:1px solid var(--line);padding-top:8px;margin-top:3px}
.output-levels>summary{font-size:11px;font-weight:400;color:var(--muted)}
.output-levels .gradient{margin-top:8px;height:7px}
.right #profile{margin-top:0}
.right .button.wide{font-size:11px;padding:5px;margin-top:6px}
.right #profileInfo{overflow-wrap:anywhere;margin:8px 0;font-size:10px}
.right small{font-size:10px;line-height:1.5}
#noSelection{padding:12px 0 4px;font-size:11px}
.canvas-toolbar>div{min-width:0}
#canvasSize{white-space:nowrap}
.canvas-toolbar select{width:auto;margin:0;max-width:170px}
.canvas-toolbar button{white-space:nowrap}
@media(max-width:1100px){#composeView .left>section,#composeView .right>section{padding:12px 10px}.levels-reset{right:10px}.canvas-toolbar{padding:0 8px}.canvas-toolbar>div{gap:5px}.canvas-toolbar select{max-width:128px}#canvasSize{font-size:10px}}
@media(max-width:780px){.right .input-levels{grid-template-columns:1fr}.right .input-levels .slider-heading{display:flex}.right .input-levels .slider-heading input[type=number]{width:60px}.canvas-toolbar{height:auto;min-height:49px;flex-wrap:wrap;gap:5px;padding:6px}.head-actions{flex-wrap:nowrap}}

.doc-page{position:relative;isolation:isolate;flex-shrink:0;box-sizing:border-box;display:flow-root}
.doc-page > [data-page-break]{display:none}
.doc-page [data-doc-mark]{position:absolute;z-index:2;cursor:move;touch-action:none;user-select:none;max-width:none}
.doc-mark-frame{position:fixed;z-index:6;border:1px dashed #236a50;pointer-events:none;box-sizing:border-box;transform-origin:center}
.doc-mark-frame button{position:absolute;width:11px;height:11px;min-width:0;padding:0;border:1px solid #236a50;border-radius:1px;background:#fff;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none}
.doc-page img:not([data-doc-mark]){cursor:pointer}
.doc-page .doc-mark-selected{outline:1px dashed #236a50;outline-offset:3px}
.doc-page [data-doc-mark].doc-mark-selected{outline:none}
.doc-mark-rotation-stem{position:absolute;left:50%;top:-28px;height:28px;border-left:1px solid #236a50}
.doc-mark-frame .doc-mark-rotation-handle{left:50%;top:-28px;width:13px;height:13px;border-radius:50%;background:#236a50;border-color:white;cursor:grab}
.doc-mark-frame .doc-mark-rotation-handle:active{cursor:grabbing}
.doc-mark-frame.rotation-below .doc-mark-rotation-stem{top:100%}
.doc-mark-frame.rotation-below .doc-mark-rotation-handle{top:calc(100% + 28px)}
.doc-mark-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.doc-mark-controls label{display:flex;align-items:center;gap:6px;margin:0}.doc-mark-controls input[type=number]{width:75px;margin:0}

/* Compact document controls: expand only the controls currently in use. */
header{justify-content:flex-start;gap:28px}
header nav{flex:none}
header .head-actions{margin-left:auto;align-items:center;flex-shrink:0}
#documentView .docbar{justify-content:flex-start;gap:8px;padding:9px 16px;position:relative;z-index:7}
#documentView .docbar span{flex:0 0 auto}
header #docMode{color:var(--muted);font-size:11px;margin-left:6px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#basicToolbar{gap:8px 12px;padding:8px 16px;align-items:center}
#basicToolbar .doc-format-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
#basicToolbar .doc-format-group + .doc-format-group{padding-left:12px;border-left:1px solid var(--line)}
#basicToolbar #fontName{width:108px}
#basicToolbar #paragraphStyle{width:130px}
#basicToolbar #fontSize{width:62px}
#basicToolbar button,#basicToolbar .button{white-space:nowrap;padding:6px 10px}
.doc-menu>summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:white;white-space:nowrap;min-height:34px;color:var(--ink)}
.doc-menu>summary::-webkit-details-marker{display:none}
.doc-menu>summary:hover{border-color:#86a593;background:#f4f8f4}
.doc-menu{position:relative;flex:0 0 auto}
.doc-menu-items,.doc-help-content{position:absolute;top:calc(100% + 6px);left:0;z-index:12;background:white;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #24352f20;padding:6px;min-width:175px}
.doc-menu-items{display:flex;flex-direction:column;gap:3px}
.doc-menu-items button{justify-content:flex-start;white-space:nowrap;border-color:transparent}
.doc-menu>summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#docHelp .doc-help-content{left:auto;right:0;width:340px;max-width:calc(100vw - 32px);padding:12px}
#docHelp #docNotice{text-align:left;padding:0;background:transparent;color:var(--muted);font-size:12px;line-height:1.7}
#basicToolbar .doc-mark-controls{order:1;gap:8px;flex-wrap:wrap}
.doc-mark-selection{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-left:10px;border-left:1px solid var(--line)}
#basicToolbar .doc-mark-controls input[type=number]{width:66px;padding:6px;margin:0}
#documentView #docPages{padding-top:18px}
@media(max-width:1100px){header{gap:18px}#documentView .docbar{padding:8px 12px}#basicToolbar{padding:8px 12px;gap:8px}header #docMode{max-width:190px}}
@media(max-width:780px){header{gap:10px}header .head-actions{margin-left:auto}#documentView .docbar{gap:6px}header #docMode{max-width:150px;margin-left:0}#basicToolbar .doc-format-group + .doc-format-group{padding-left:0;border-left:0}#docHelp .doc-help-content{right:auto;left:0;width:260px}}

.doc-menu:not([open])>.doc-menu-items,.doc-menu:not([open])>.doc-help-content{display:none}


/* Document mark inspector shares the canvas inspector's controls and styles. */
#documentView{--doc-toolbar-height:50px}
#documentWorkspace{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-height:calc(100% - 100px)}

#documentSheets{min-width:0}
#documentWorkspace #docPages{align-items:flex-start;overflow-x:auto}
#documentWorkspace .doc-page{margin-left:auto;margin-right:auto}
#documentWorkspace #officeHost{height:calc(100vh - 160px)}
#docMarkPanel{width:300px;position:sticky;top:calc(var(--doc-toolbar-height) + 12px);max-height:calc(100vh - 96px - var(--doc-toolbar-height));overflow-y:auto;border:1px solid var(--line);border-radius:8px;margin-top:18px;box-shadow:0 3px 16px #24352f08;align-self:start;display:block;z-index:4}
#docMarkPanel>section{padding:14px 13px}
#docMarkPanel [id="docMark-levelsSection"]{position:relative}
#docMarkPanel [id="docMark-layerName"]{margin:0 0 10px;font-weight:600}
#docMarkPanel [id="docMark-levelChannel"]{margin:0}
#docMarkPanel [id="docMark-histogram"]{width:100%;height:66px;background:#f5f7f3;margin:10px 0 8px}
.empty-guide.start-guide{width:min(680px,calc(100% - 40px));max-width:none;padding:28px;background:#fffffff5}
.empty-guide.start-guide .start-option{margin-top:0}
.empty-guide.start-guide .start-option span{font-size:20px;color:var(--ink)}
.start-content{width:100%;text-align:center}
.start-content h1{margin:0 0 36px;font-size:28px;font-weight:500;letter-spacing:1px}
.start-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.start-option{min-height:210px;flex-direction:column;gap:24px;border-radius:14px;background:#fff;font-size:20px;box-shadow:0 6px 24px #25362906;transition:border-color .15s,background .15s}
.start-option svg{width:48px;height:48px;color:var(--green)}
.start-option:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:1100px){.start-options{gap:12px}.start-option{min-height:150px;padding:16px 8px}.empty-guide.start-guide .start-option span{font-size:16px}}
@media(max-width:540px){.empty-guide.start-guide{padding:20px}.start-content h1{font-size:24px;margin-bottom:24px}.start-options{grid-template-columns:1fr;gap:16px}.start-option{min-height:160px;gap:16px}}
#docMarkPanel [id="docMark-centerLayer"]{font-size:11px;padding:5px;margin:0}
#docMarkPanel .levels-panel>summary{padding-right:40px}
#docMarkPanel .doc-mark-delete{margin:12px;width:calc(100% - 24px);color:#995745;font-size:11px}
#docMarkPanel .input-levels{grid-template-columns:repeat(3,minmax(0,1fr))}
#docMarkPanel .input-levels .slider-heading{display:block}
#docMarkPanel .input-levels .slider-heading input[type=number]{width:100%}
@media(max-width:1200px){#docMarkPanel{width:260px}}
@media(max-width:780px){#docMarkPanel{grid-row:1;width:auto;margin:8px 12px;max-height:40vh;position:relative;top:auto}#documentSheets{grid-column:1}#docMarkPanel .input-levels .slider-heading input[type=number]{width:100%}}

/* Document workspace: document actions in the header, formatting below, one inspector. */
body.document-mode{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.document-mode header{height:auto;min-height:72px;flex:none;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:16px;padding:0 20px;position:relative;z-index:10}
body.document-mode header nav{align-self:stretch;min-height:72px}
header #docActions{flex:1;min-width:0;align-items:center;gap:7px;padding:10px 0 10px 14px;background:transparent;border:0;border-left:1px solid var(--line);flex-wrap:wrap}
header #docActions>label,header #docActions>button{margin:0;white-space:nowrap;padding:6px 10px}
header #docActions .doc-menu{flex:none}
header #docActions #docMode{flex:0 1 auto;max-width:120px;margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .head-actions{margin-left:auto}
body.document-mode #documentView{flex:1;min-height:0;height:auto;overflow:auto;--doc-inspector-width:300px}
#documentView #basicToolbar{min-height:52px;gap:8px 12px;flex-wrap:wrap;position:sticky;top:0;z-index:8;box-shadow:0 2px 8px #23352d08}
#basicToolbar #paragraphToggle{order:2}
#basicToolbar #paragraphToggle[aria-expanded="true"]{color:var(--green);border-color:#86a593;background:#edf4ee}
#documentWorkspace{min-height:calc(100% - var(--doc-toolbar-height));padding-bottom:20px}

#docMarkPanel,#paragraphPanel{grid-column:2;grid-row:1;width:var(--doc-inspector-width);position:sticky;top:calc(var(--doc-toolbar-height) + 12px);max-height:calc(100dvh - var(--app-header-height,72px) - var(--doc-toolbar-height) - 24px);overflow:auto;align-self:start;min-width:0;margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 3px 16px #24352f08;z-index:4}
.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.inspector-heading strong{font-size:13px;font-weight:600}
.inspector-heading button{border:0;padding:0;width:28px;height:28px;flex:none;font-size:20px;line-height:1;background:transparent}
#paragraphPanel .inspector-tabs{display:flex;gap:4px;margin:12px 14px 0;padding:3px;background:#f2f5f1;border-radius:6px}
#paragraphPanel .inspector-tabs button{flex:1;border-color:transparent;background:transparent;padding:5px 8px;font-size:12px}
#paragraphPanel .inspector-tabs button[aria-selected="true"]{background:white;color:var(--green);box-shadow:0 1px 4px #24352f12}
#paragraphPanel .paragraph-controls,#paragraphPanel .page-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:16px 14px}
#paragraphPanel .signature-controls{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:16px 14px}
#paragraphPanel label{display:block;min-width:0;margin:0;font-size:11px;white-space:normal}
#paragraphPanel input,#paragraphPanel select{width:100%;max-width:none;margin-top:5px}
#paragraphPanel .page-controls>span{grid-column:1/-1;color:var(--muted);font-size:11px}
#paragraphPanel .signature-controls button{width:100%;font-size:12px}
#paragraphPanel small{margin:0;font-size:11px}
#paragraphToggle:focus-visible,#paragraphPanel button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:1500px){
 body.document-mode header{grid-template-columns:auto minmax(0,1fr) auto;gap:0 18px}
 body.document-mode header nav{justify-self:start}
 header #docActions{grid-column:1/-1;grid-row:2;padding:8px 0;border-left:0;border-top:1px solid var(--line)}
 header #docActions #docMode{max-width:190px}
 body.document-mode header .head-actions{grid-column:3;grid-row:1}
}
@media(max-width:1200px){
 body.document-mode #documentView{--doc-inspector-width:260px}
 
}
@media(max-width:780px){
 body.document-mode header{padding:0 12px;gap:0 10px}
 body.document-mode header .brand span{display:none}
 body.document-mode header nav{min-height:60px;gap:8px}
 body.document-mode header .head-actions{gap:5px}
 header #docActions{gap:6px}
 header #docActions #docMode{display:none}
 #documentView #basicToolbar{gap:8px;padding:8px 12px}
 
 #docMarkPanel,#paragraphPanel{grid-column:1;grid-row:1;width:auto;position:relative;top:auto;margin:10px 12px 0;max-height:40dvh}
 #documentSheets{grid-column:1;grid-row:2}
}
@media(max-width:540px){
 body.document-mode header{grid-template-columns:auto minmax(0,1fr)}
 body.document-mode header nav{justify-self:end}
 body.document-mode header .head-actions{grid-column:1/-1;grid-row:3;justify-self:end;margin:0;padding-bottom:8px}
 header #docActions{grid-column:1/-1}
 #docActions #docHelp .doc-help-content{left:auto;right:0}
 #basicToolbar .doc-format-group{flex-wrap:wrap}
}

/* Document inspectors float without reserving space in the document layout. */
#documentView #docMarkPanel,#documentView #paragraphPanel{position:fixed;top:calc(var(--app-header-height,72px) + var(--doc-toolbar-height) + 12px);right:16px;width:var(--doc-inspector-width,300px);max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--app-header-height,72px) - var(--doc-toolbar-height) - 24px);margin:0;z-index:7;overscroll-behavior:contain}
@media(max-width:780px){
 #documentView #docMarkPanel,#documentView #paragraphPanel{right:12px;max-height:min(60dvh,calc(100dvh - var(--app-header-height,72px) - var(--doc-toolbar-height) - 24px))}
 #documentWorkspace #documentSheets{grid-row:1}
}

/* Document actions and formatting share the row below the main navigation. */
#docHeaderMeta{display:none}
body.document-mode header{grid-template-columns:auto auto minmax(0,1fr) auto;gap:16px}
body.document-mode header .head-actions{grid-column:auto;grid-row:auto;padding:0}
body.document-mode #docHeaderMeta{display:flex;align-items:center;justify-self:end;gap:10px;min-width:0}
#docHeaderMeta #docMode{max-width:190px;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#docHeaderMeta #docHelp .doc-help-content{left:auto;right:0}
#docControlRow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:8px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:8}
#docControlRow #docActions{display:flex;flex:0 0 auto;max-width:100%;align-items:center;gap:8px;flex-wrap:wrap;padding:0;border:0;background:transparent}
#docControlRow #docActions>label,#docControlRow #docActions>button{margin:0;white-space:nowrap}
#documentView #docControlRow #basicToolbar{flex:0 1 auto;min-width:0;min-height:0;position:static;padding:0;border:0;box-shadow:none;gap:8px 12px}
#docControlRow #applyDoc{flex:none;white-space:nowrap;order:3}
@media(max-width:1100px){
 body.document-mode header{gap:12px;padding:0 12px}
 body.document-mode header .brand span{display:none}
 #docHeaderMeta #docMode{max-width:125px}
 #docControlRow{gap:10px 12px;padding:8px 12px}
}
@media(max-width:780px){
 body.document-mode header{display:flex;flex-wrap:wrap;gap:8px 12px;padding:8px 12px}
 body.document-mode header nav{min-height:38px;height:38px}
 body.document-mode #docHeaderMeta{margin-left:auto}
 body.document-mode header .head-actions{margin-left:auto}
 #docHeaderMeta #docMode{display:none}
 #docControlRow #docActions{flex-wrap:wrap}
}
/* Mobile workspace: keep the canvas visible and open tools on demand. */
.mobile-only,.mobile-panel-heading,.canvas-toolbar>.mobile-only{display:none}
@media(max-width:780px){
 html,body{max-width:100%;margin:0}
 body{height:var(--mobile-viewport-height,100dvh);overflow:hidden;display:flex;flex-direction:column}
 header,body.document-mode header{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:8px 12px}
 header .brand{font-size:20px;min-width:0}
 header .brand strong{font-size:20px}
 header .brand span,body.document-mode #docHeaderMeta{display:none}
 header nav,body.document-mode header nav{grid-column:1/-1;grid-row:2;height:40px;min-height:40px;justify-self:stretch;gap:0}
 header nav .tab{flex:1;min-height:40px}
 header .head-actions,body.document-mode header .head-actions{grid-column:2;grid-row:1;margin:0;gap:6px;padding:0}
 .head-actions>button,.project-menu>summary{min-height:40px;height:40px}
 .head-actions .icon-button{width:40px}
 main#composeView{display:flex;flex:1;min-height:0;height:auto;position:relative;flex-direction:column;padding-bottom:calc(54px + env(safe-area-inset-bottom,0px))}
 #composeView .workspace{flex:1;height:auto;min-height:0;width:100%}
 #composeView>.left,#composeView>.right{display:none;position:fixed;left:0;right:0;bottom:calc(54px + env(safe-area-inset-bottom,0px) + var(--mobile-keyboard-inset,0px));width:100%;max-height:48dvh;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px 14px 0 0;z-index:15;background:white;box-shadow:0 -6px 24px #24352f18}
 body[data-mobile-panel="materials"] #composeView>.left,body[data-mobile-panel="layers"] #composeView>.left,body[data-mobile-panel="properties"] #composeView>.right{display:block}
 body[data-mobile-panel="materials"] .left .layers-section,body[data-mobile-panel="layers"] .left>section:not(.layers-section),#composeView .left .local-note{display:none}
 .mobile-panel-heading{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;background:white;padding:8px 14px;border-bottom:1px solid var(--line)}
 .mobile-panel-heading button{min-width:44px;min-height:44px}
 #composeView .left .paper img{height:80px}
 #composeView .left .layers-section{min-height:120px}
 #composeView .layer-actions button,#composeView .layer button{min-height:44px}
 #composeView .layer button{width:44px}
 .mobile-only{display:inline-flex}
 #mobileDock{position:fixed;left:0;right:0;bottom:var(--mobile-keyboard-inset,0px);height:calc(54px + env(safe-area-inset-bottom,0px));padding:5px 10px calc(5px + env(safe-area-inset-bottom,0px));gap:8px;z-index:16;background:white;border-top:1px solid var(--line)}
 #mobileDock button{flex:1;min-height:44px}
 #mobileDock button[aria-expanded="true"],#mobilePan[aria-pressed="true"]{background:#edf4ee;color:var(--green);border-color:#86a593}
 body.document-mode #mobileDock{display:none}
 .canvas-toolbar{flex-wrap:wrap;gap:5px;padding:6px 8px;min-height:0}
 .canvas-toolbar>div{flex-wrap:wrap;gap:4px}
 .canvas-toolbar button{min-height:40px;padding:5px 9px}
 .canvas-toolbar select{min-height:40px;max-width:145px}
 #canvasSize{display:none}
 #canvasStage{padding:35px}
 #mobileCanvasTools{display:flex;width:100%}
 #mobileCanvasTools button{flex:1}
 footer{height:26px;padding:0 10px}
 .empty-guide.start-guide{width:calc(100% - 28px);padding:16px;max-height:calc(100% - 20px);overflow:auto}
 .start-content h1{font-size:21px;margin:0 0 14px}
 .start-options{grid-template-columns:1fr 1fr;gap:10px}
 .start-option{min-height:110px;padding:12px 6px;gap:12px}
 .start-option svg{width:32px;height:32px}
 .empty-guide.start-guide .start-option span{font-size:14px}
 button,.button,summary{touch-action:manipulation}
 input:not([type=checkbox]):not([type=range]),select,
 .right input:not([type=checkbox]):not([type=range]),.right select,
 #basicToolbar input,#basicToolbar select,#basicToolbar .doc-mark-controls input[type=number]{font-size:16px;min-height:44px}
 input[type=range]{min-height:36px}
 .right .input-levels{grid-template-columns:repeat(3,minmax(0,1fr))}
 .right .input-levels .slider-heading{display:block}
 .right .input-levels .slider-heading input[type=number]{width:100%}
 .right .panel>summary,.right .transform-panel>summary,.right .output-levels>summary{min-height:44px}
 body.document-mode{height:var(--mobile-viewport-height,100dvh)}
 #docControlRow{padding:8px;gap:8px}
 #docControlRow #docActions{flex:1;gap:6px}
 #docControlRow button,#docControlRow .button,#docControlRow summary{min-height:44px}
 #docControlRow #applyDoc{margin-left:auto}
 #mobileFormatToggle{order:1}
 #docControlRow:has(#basicToolbar[hidden]) #mobileFormatToggle{display:none}
 #documentView #docControlRow #basicToolbar{display:none;order:4;width:100%;flex-basis:100%;max-height:30dvh;overflow:auto;padding-top:8px;border-top:1px solid var(--line)}
 #documentView #docControlRow.mobile-format-open #basicToolbar{display:flex}
 #documentView #basicToolbar .doc-format-group{gap:6px}
 #documentView #basicToolbar .doc-mark-controls{gap:6px}
 #documentWorkspace #docPages{padding:14px;overflow-x:auto;overscroll-behavior-x:contain}
 #documentWorkspace .doc-page{margin-left:0;margin-right:0}
 #documentView #docMarkPanel,#documentView #paragraphPanel{top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--mobile-keyboard-inset,0px));width:auto;max-width:none;max-height:min(48dvh,calc(var(--mobile-viewport-height,100dvh) - 80px));z-index:20;border-radius:14px}
 .inspector-heading{position:sticky;top:0;background:white;z-index:2}
 .inspector-heading button{width:44px;height:44px}
 .doc-mark-frame button{width:24px;height:24px;border-radius:4px}
 .doc-mark-frame button::after{content:"";position:absolute;inset:-6px}
 .doc-mark-frame .doc-mark-rotation-handle{width:28px;height:28px}
 dialog,#exportDialog{width:calc(100vw - 24px);max-width:520px;max-height:calc(var(--mobile-viewport-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain;padding:16px}
 dialog button,dialog .button{min-height:44px}
 dialog .compression{flex-wrap:wrap}
 dialog .compression .check{flex-basis:100%}
 #toast{bottom:calc(68px + env(safe-area-inset-bottom,0px) + var(--mobile-keyboard-inset,0px));max-width:calc(100vw - 24px);width:max-content}
}
@media(max-width:780px) and (orientation:landscape){
 header,body.document-mode header{grid-template-columns:auto minmax(0,1fr) auto;padding:4px 10px}
 header nav,body.document-mode header nav{grid-column:2;grid-row:1}
 header .head-actions,body.document-mode header .head-actions{grid-column:3}
 #composeView>.left,#composeView>.right{max-height:60dvh}
 #mobileCanvasTools{width:auto}
}