.lp-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0}
.lp-bar button{padding:5px 9px;font-size:12px;min-height:32px}
.lp-status{font-size:12px;color:var(--muted);margin-left:auto}
.lp-notice{display:flex;gap:8px;align-items:center;padding:7px 14px;background:var(--panel2);font-size:13px;flex-shrink:0}
.lp-notice[hidden]{display:none}
.lp-dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;width:min(940px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;box-shadow:0 18px 60px #0008}
.lp-dialog::backdrop{background:#000a}
.lp-dialog h2{font-size:17px;margin:0 0 14px}.lp-dialog p{line-height:1.7;color:var(--muted);margin:8px 0;font-size:13px}
.lp-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0}.lp-row label{display:flex;align-items:center;gap:6px;font-size:13px}
.lp-dialog input[type=text]{width:min(360px,100%);background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:8px}
.lp-dialog select{max-width:100%}.lp-dialog input[type=number]{width:76px}.lp-dialog input[type=color]{width:40px;height:30px;background:none;border:0}
.lp-close{float:right}.lp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-candidate{padding:8px;display:flex;flex-direction:column;gap:8px;align-items:center}.lp-candidate canvas{width:100%;height:auto;max-height:260px;object-fit:contain}
.lp-preview-stage{display:flex;justify-content:center;overflow:hidden;touch-action:pan-y;background:#111;border-radius:8px}
.lp-preview-stage canvas{max-width:100%;max-height:60dvh;width:auto;height:auto;object-fit:contain}
.lp-preview-strip{display:flex;gap:6px;overflow:auto;padding:8px 0}.lp-preview-strip button{flex-shrink:0;min-width:46px}
.lp-preview-strip button[aria-current=true]{border-color:var(--accent);color:var(--accent)}
.lp-photo-list{display:flex;gap:10px;overflow:auto;padding:8px 0}.lp-photo-list button{flex:0 0 90px;display:flex;flex-direction:column;gap:4px;align-items:center;font-size:11px}.lp-photo-list img{width:72px;height:64px;object-fit:contain}.lp-photo-list button.on{outline:2px solid var(--accent)}
.lp-focus-photo{position:relative;display:inline-block;max-width:100%;line-height:0;cursor:crosshair}.lp-focus-photo img{max-width:100%;max-height:50dvh;display:block}.lp-focus-dot{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid white;background:var(--accent);transform:translate(-50%,-50%);pointer-events:none}
.lp-lock-badge{position:absolute;right:6px;bottom:6px;z-index:35;color:white;background:#0009;border-radius:4px;padding:2px 5px;font-size:12px;pointer-events:none}
.lp-free-handle{position:absolute;bottom:0;right:0;width:26px;height:26px;border:2px solid white;background:var(--accent);z-index:36;touch-action:none}
.lp-brand-logo,.lp-brand-title{position:absolute;pointer-events:none;z-index:39}.lp-brand-logo{object-fit:contain}.lp-brand-title{color:#fff;background:#0009;padding:6px 10px;white-space:pre-line;line-height:1.5;font-size:clamp(9px,1.8cqw,18px);max-width:80%}
.lp-warning{color:var(--accent)!important}.lp-muted{opacity:.7}.lp-region-controls{display:flex;flex-wrap:wrap;gap:6px}
.lp-bar{flex-wrap:nowrap;min-width:0;gap:6px}
.lp-bar button{flex-shrink:0;white-space:nowrap}
.lp-bar button[data-action=undo],.lp-bar button[data-action=redo]{font-size:18px;width:34px;padding:2px}
.lp-status{min-width:0;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-dialog{width:min(760px,calc(100vw - 24px));box-sizing:border-box}
.lp-dialog h2{font-size:19px;line-height:1.5;margin-bottom:16px}
.lp-dialog button{min-height:36px;line-height:1.4}
.lp-section{border-top:1px solid var(--line);padding:12px 0}
.lp-section>summary{cursor:pointer;font-size:14px;font-weight:600;line-height:1.6;padding:4px 0}
.lp-section>summary:focus-visible,.lp-dialog button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lp-section .lp-row{margin:10px 0 4px}
.lp-photo-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;overflow:visible;padding:4px 0}
.lp-photo-list button{min-width:0;padding:5px;gap:2px;font-size:12px}
.lp-photo-list img{width:100%;height:56px;object-fit:contain}
.lp-photo-list button[aria-pressed=true]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}
.lp-filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important;margin:6px 0 14px!important}
.lp-count{font-size:12px;color:var(--muted)}
.lp-preview-strip{justify-content:center}.lp-preview-strip button{min-width:0;flex:0 1 54px;padding:6px 4px;font-size:12px}
.lp-notice{flex-wrap:wrap}.lp-notice span{flex:1;min-width:140px}
@media(max-width:600px){.lp-bar{padding:5px 8px;gap:4px}.lp-status{display:none}.lp-dialog{padding:14px}.lp-grid{grid-template-columns:1fr}.lp-bar button{min-height:36px;padding:5px 8px}.lp-dialog button{min-height:40px}.lp-dialog input[type=range]{width:120px}.lp-photo-list{grid-template-columns:repeat(4,minmax(0,1fr))}.lp-photo-list img{height:48px}.lp-row{gap:8px}.lp-dialog input[type=number]{width:58px}.lp-preview-stage canvas{max-height:48dvh}}
.lp-status.lp-error{display:block;color:var(--accent);white-space:normal;max-width:320px}
@media(max-width:600px){.lp-bar:has(.lp-error){flex-wrap:wrap}.lp-status.lp-error{flex-basis:100%;max-width:none;font-size:12px}}
.lp-local-note{color:var(--text)!important;border-left:3px solid var(--accent);padding-left:10px}
.lp-save-card{padding:12px 0;border-top:1px solid var(--line)}
.lp-save-card h3{font-size:14px;line-height:1.6;margin:0 0 6px}
.lp-save-card .lp-save-hint{font-size:12px;margin-bottom:0}
.lp-save-state{font-weight:600;color:var(--text)!important}
/* Guided workspace: warm neutral surfaces, a single accent for the next action. */
.lp-guided{--accent:#dcb77a;--accent2:#dcb77a;--bg:#17191a;--panel:#202324;--panel2:#292d2f;--line:#3a3e40;--muted:#b0b5b5;--text:#f0eee9}
.lp-guided>header{padding:10px 22px;min-height:42px;flex-shrink:0}
.lp-guided button{border-radius:9px;transition:border-color .15s,background .15s}
.lp-guided button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lp-guided .lp-primary{background:var(--accent);border-color:var(--accent);color:#211d17;font-weight:700;padding:11px 18px;min-height:42px}
.lp-guided .lp-bar{padding:5px 22px;border:0;background:var(--panel)}
.lp-guided #expJpg{display:none!important}
.lp-guided #igInfo{display:none!important}
.lp-desktop #sidebar{width:250px;min-width:250px}
.lp-desktop #pageList{width:132px;min-width:132px}
.lp-desktop #pagesWrap{padding:24px;scroll-padding-top:16px}
.lp-guided .pageHead{border-radius:10px;background:var(--panel);padding:9px 12px!important;gap:9px!important}
.lp-guided .canvasBox{box-shadow:0 12px 40px #0003}
.lp-review-dialog{width:min(1000px,calc(100vw - 24px))}
.lp-review-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:center;background:#151718;padding:18px;border-radius:12px}
.lp-review-grid h3{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 12px}
.lp-review-grid .lp-focus-photo img{max-height:43dvh;max-width:100%;object-fit:contain}
.lp-review-result{display:flex;justify-content:center}.lp-review-result canvas{max-width:100%;max-height:43dvh;object-fit:contain}
.lp-dialog button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.lp-quick-formats{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.lp-quick-formats button{font-size:12px;padding:6px 10px}
.lp-mobile #actions{display:none!important}
.lp-mobile footer{font-size:10px;line-height:1.5;padding:5px}
.lp-mobile .lp-bar{padding:2px 10px}.lp-mobile .lp-status{display:block;font-size:10px;max-width:45%}
.lp-mobile #stage{min-height:130px}.lp-mobile #pool{max-height:95px;flex-shrink:0}
.lp-page-tools{position:relative;flex-shrink:0;font-size:12px;color:var(--muted)}
.lp-page-tools summary{cursor:pointer;padding:5px 0;white-space:nowrap}
.lp-page-tools-content{position:absolute;right:0;top:100%;width:290px;display:flex;gap:9px;flex-wrap:wrap;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px #0008;z-index:100}
.lp-guided .lp-quick-formats button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
/* The workflow is guidance; tools and canvas remain available at every step. */
.lp-bar{flex-wrap:wrap;gap:5px}.lp-bar button{padding:5px 9px}.lp-bar input[type=range]{width:110px}
.lp-pool-hidden #sidebar,.lp-pool-hidden #pool,.lp-pool-hidden #poolBar{display:none!important}
.lp-desktop #pagesWrap{padding:12px 20px}.lp-quick-formats{margin-top:3px}
.lp-mobile .lp-bar{padding:4px 8px}.lp-mobile .lp-bar button{font-size:11px;padding:5px 7px}.lp-mobile .lp-status{display:none}
.lp-mobile #stage{min-height:240px}

.lp-guided .pageHead{width:max-content!important;max-width:var(--toolbarWidth,100%);min-width:min(420px,var(--toolbarWidth,420px));box-sizing:border-box}

.lp-mobile .lp-free-handle{width:24px;height:24px;transform:scale(var(--lp-handle-scale,1));transform-origin:bottom right}

/* Restore the ordinary workspace. Steps explain the work; they never control it. */
.lp-guided>header.lp-persistent-settings{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.lp-persistent-settings h1{font-size:16px;white-space:nowrap;margin:0 8px 0 0}
.lp-persistent-settings .ctrl{font-size:12px;gap:6px;white-space:nowrap}
.lp-persistent-settings .ctrl select{max-width:100%;font-size:12px}
.lp-persistent-settings input[type=number]{width:56px}
.lp-persistent-settings .sep{display:none}
.lp-persistent-settings #preset{max-width:320px}
.lp-guided .lp-bar{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 0;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.lp-tool-group{min-width:0;padding:0 12px;border-right:1px solid var(--line)}
.lp-tool-group:first-child{padding-left:0}.lp-tool-group:last-of-type{border-right:0}
.lp-tool-group-label{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.05em}
.lp-tool-group-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.lp-guided .lp-bar button{background:var(--panel2);border:1px solid #535a5d;color:var(--text);border-radius:6px;min-height:34px;font-size:12px;padding:6px 10px;white-space:nowrap}
.lp-guided .lp-bar button:hover:not(:disabled){background:#343a3d;border-color:var(--accent)}
.lp-guided .lp-bar button:disabled{opacity:.42;cursor:not-allowed}
.lp-guided .lp-bar .lp-primary{background:var(--accent);color:#211d17;border-color:var(--accent);font-weight:700}
.lp-guided .lp-bar .lp-import{border-color:var(--accent);color:var(--accent)}
.lp-guided .lp-bar .lp-export{background:#314858;border-color:#7195ad;color:#f2f7fa;font-weight:600}
.lp-guided .lp-bar [data-action=pool][aria-pressed=true]{border-color:#778789;background:#303b3e}
.lp-zoom-control{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;min-height:34px}
.lp-bar .lp-zoom-control input[type=range]{width:86px}.lp-zoom-control #zoomLbl{min-width:38px;text-align:right}
.lp-bar .lp-status{align-self:center;font-size:11px;max-width:140px;margin-left:12px}
.lp-help-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:5px 14px;background:var(--bg);border-bottom:1px solid var(--line);flex-shrink:0;font-size:11px;color:var(--muted)}
.lp-help-bar button{border:1px solid var(--line);border-radius:5px;padding:4px 8px;min-height:28px;font-size:11px;background:var(--panel2);color:var(--text)}
.lp-work-summary{margin-left:auto;font-variant-numeric:tabular-nums}
.lp-guide-list{padding-left:24px}.lp-guide-list li{padding:6px 0}.lp-guide-list h3{font-size:14px;margin:0}.lp-guide-list p{margin:4px 0}
.lp-desktop #pagesWrap{padding:12px 20px}
.lp-mobile #settingsBtn{display:block!important}
.lp-mobile #presets{display:flex!important;flex-wrap:wrap;overflow:visible;flex-shrink:0;padding:5px 10px 8px;gap:6px;border-bottom:1px solid var(--line)}
.lp-mobile #presets .pill{font-size:12px;padding:7px 10px}
.lp-mobile #presets #carouselRatio{font-size:12px;min-width:96px}
.lp-mobile .lp-zoom-control{font-size:10px}.lp-mobile .lp-bar .lp-zoom-control input[type=range]{width:78px}
.lp-mobile .lp-help-bar{padding:4px 8px;gap:6px}.lp-mobile .lp-help-outline{display:none}
.lp-mobile .lp-work-summary{font-size:10px}.lp-mobile .lp-status{display:none}
@media(max-width:1150px){.lp-bar .lp-status{display:none}.lp-help-outline{display:none}}

.lp-help-bar .lp-status{font-size:10px;max-width:130px;margin-left:0}.lp-help-bar .lp-status.lp-error{flex-basis:100%;max-width:none}
.lp-mobile>header{padding:6px 12px;min-height:40px}
.lp-protected-area{position:absolute;z-index:10000;box-sizing:border-box;outline:1px dashed #587284;outline-offset:-1px;pointer-events:none}
.lp-protected-area.is-editing{outline:2px dashed #345b80;cursor:move;pointer-events:auto;touch-action:none}
.lp-protected-label{position:absolute;left:4px;top:4px;background:#263b49!important;color:#fff!important;border:1px solid #fff8!important;border-radius:4px!important;font-size:12px!important;padding:3px 7px!important;white-space:nowrap;pointer-events:auto;touch-action:none;transform:scale(var(--lp-handle-scale,1));transform-origin:top left}
.lp-protected-handle{position:absolute;right:0;bottom:0;width:24px;height:24px;background:#345b80;border:2px solid #fff;box-sizing:border-box;cursor:nwse-resize;transform:scale(var(--lp-handle-scale,1));transform-origin:bottom right}
.lp-protect-note.lp-error{color:var(--accent)!important}

.lp-protected-mini{outline:none}

/* ---- 手機（參考 SCRL）：相片區最大化，底部拇指區只留主要動作 ----
   全部掛在 .lp-mobile 底下，只影響手機版。 */
/* 標題在品牌條上已經有了；⚙ 設定縮成圖示，掛在比例那排右側 */
.lp-mobile header{position:absolute;top:46px;right:8px;padding:0;background:none;border:0;z-index:5}
.lp-mobile header h1,.lp-mobile header .spacer{display:none}
.lp-mobile #settingsBtn.lp-icon{width:40px;min-width:40px;height:36px;padding:0;font-size:0;line-height:1;border-radius:10px;box-shadow:-10px 0 10px var(--bg)}
.lp-mobile #settingsBtn.lp-icon::before{content:attr(data-icon) / "";font-size:17px}
/* 比例：短標籤一排放得下；選到輪播時，輪播比例與頁數自然換到第二行（不用橫向滑動，
   tests/operability-browser.cjs 要求輪播比例直接看得到） */
.lp-mobile #presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 56px 6px 10px;border-bottom:0}
.lp-mobile #presets>*{flex:none}
.lp-mobile #presets .pill{min-width:44px;padding:7px 10px;font-size:13px;text-align:center}
/* ↺ 縮放還原要掛在相片區裡，不然會壓到底部的「工具」 */
.lp-mobile #stage{position:relative}
/* 只有警告時才出現的資訊列 */
.lp-mobile #igInfo{padding:4px 12px!important;font-size:12px!important;color:var(--accent)!important}
.lp-mobile #igInfo[hidden]{display:none}
/* 用不到的東西：建立頁面（選好就自動排）、全選／取消、照片列裡的 ＋、說明列 */
.lp-mobile [data-action=make],.lp-mobile #selAll,.lp-mobile #selNone,.lp-mobile #addBtn,.lp-mobile .lp-help-bar{display:none!important}
/* 空白狀態：整個相片區就是「選照片」 */
.lp-mobile #emptyStage{padding:0;width:100%;height:100%;display:flex}
.lp-mobile .lp-empty-add{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:8px 4px;border:2px dashed var(--line);border-radius:18px;background:none;color:var(--text)}
.lp-mobile .lp-empty-plus{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#1a1a1a;font-size:34px;line-height:64px}
.lp-mobile .lp-empty-add strong{font-size:18px}
.lp-mobile .lp-empty-add small{color:var(--muted);font-size:13px}
/* 頁碼與照片列收緊；照片列裡的照片點一下就加進這組 */
.lp-mobile #pageRow{padding-top:2px;padding-bottom:2px}
.lp-mobile #poolBar{padding:4px 12px 0}
.lp-mobile #pool{min-height:0;padding:4px 12px 6px}
.lp-mobile .thumb{width:52px;height:52px}
.lp-mobile .thumb img{width:52px;height:52px}
.lp-mobile .thumb::after{content:"＋";position:absolute;right:2px;bottom:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
/* 底部主要動作：＋照片、⟳換排法、⬇存到相簿、⋯工具 */
.lp-dock{display:flex;gap:6px;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg);flex:none}
.lp-dock button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:4px 2px;border-radius:12px;font-size:12px;line-height:1.2;white-space:nowrap}
.lp-dock button::before{content:attr(data-icon) / "";font-size:20px;line-height:1}
.lp-dock [data-action=download]{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:700}
.lp-dock [data-action=download]:disabled{background:var(--panel2);border-color:var(--line);color:var(--text)}
/* 橫向手機：按鈕改成圖示在左、文字在右，省下高度給相片區 */
@media(orientation:landscape) and (max-height:500px){.lp-dock{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}.lp-dock button{flex-direction:row;gap:6px;min-height:40px}.lp-dock button::before{font-size:17px}.lp-mobile #presets{padding-top:4px;padding-bottom:4px}}
/* 「工具」面板：原本的工具列改成從底部滑出 */
.lp-mobile .lp-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:block;max-height:78vh;overflow-y:auto;padding:0 14px calc(16px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);border-radius:18px 18px 0 0;transform:translateY(105%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
.lp-mobile.lp-tools-open .lp-bar{transform:none;visibility:visible;transition:transform .2s ease}
.lp-tools-mask{display:none}
.lp-mobile.lp-tools-open .lp-tools-mask{display:block;position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.5)}
.lp-tools-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px;background:var(--panel)}
.lp-tools-head strong{font-size:15px}
.lp-mobile .lp-bar .lp-tools-close{min-height:34px;padding:4px 14px}
.lp-mobile .lp-tool-group{display:block;padding:8px 0;margin:0;border:0;border-top:1px solid var(--line)}
.lp-mobile .lp-tool-group-label{display:block;font-size:12px;margin:0 0 6px;color:var(--muted)}
.lp-mobile .lp-tool-group-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lp-mobile .lp-bar .lp-tool-group-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:auto;min-width:0;height:auto;min-height:60px;padding:6px 2px;font-size:11.5px;line-height:1.25;white-space:normal;text-align:center}
.lp-mobile .lp-bar .lp-tool-group-actions button::before{content:attr(data-icon) / "";font-size:19px;line-height:1}
.lp-mobile .lp-zoom-control{grid-column:1/-1;display:flex;align-items:center;gap:8px;width:auto;font-size:12px}
.lp-mobile .lp-zoom-control span{display:inline}
.lp-mobile .lp-bar .lp-zoom-control input[type=range]{flex:1;width:auto}
.lp-mobile .lp-status{display:none}
/* 點照片出現的動作選單 */
.lp-mobile #photoSheet .opt .ic{flex:none}
/* ---- 手機：相片區一指走軌道、兩指縮放 ----
   翻頁改成上下滑，頁碼列拿掉（刪除這組移到「工具」）；自由編排先點選再拖動 */
.lp-mobile #pageRow{display:none!important}
.lp-mobile .cell .lp-free-handle{display:none}
.lp-mobile .cell.lp-free-selected{outline:3px solid var(--accent2);outline-offset:-3px}
.lp-mobile .cell.lp-free-selected .lp-free-handle{display:block}
/* ---- 手機：網頁本身不縮放 ----
   iPhone Safari 點到字小於 16px 的輸入框或選單，會自動把整個網頁放大；
   可捲動的區塊另外宣告只允許捲動，不允許縮放（touch-action 只看到最近的捲動容器為止） */
.lp-mobile input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),.lp-mobile select,.lp-mobile textarea{font-size:16px!important}
.lp-mobile #pool,.lp-mobile #presets,.lp-mobile .lp-bar,.lp-mobile .sheet,.lp-mobile .lp-dialog,.lp-mobile .tool-guide{touch-action:pan-x pan-y}