/* 讓三個既有工具換上 Hiromaru 外觀。載入順序：hiromaru.css → 工具原本的 CSS → 本檔。 */
:root{
  --lavender:#E4E7EC;--pink:#FFE3EA;--mint:#EEF0F3;--bg:#EEF0F3;--surface:#fff;--text:#0F1115;--muted:#4A505C;
  --primary:#0F1115;--primary-hover:#2A2F3A;--primary-text:#fff;--focus:#FF3366;--border:#D9DDE3;
  --info-bg:#EEF0F3;--info-text:#0F1115;--error-bg:#FFE3EA;--error-text:#8A0B2B;--warn-bg:#FFF3DC;--warn-text:#6B4300;
  --checker-a:#E4E7EC;--checker-b:#fff;--radius:24px;--glass:#fff;--shadow:none;--desk:#EEF0F3;
}
html body{background:var(--hm-desk);color:var(--hm-ink);font-family:var(--hm-sans)}
:focus-visible{outline:3px solid var(--hm-rec);outline-offset:2px}
.page.hm-tool-page{max-width:1260px;margin:0 auto;padding:0 24px}

/* 按鈕 */
button::after,a.button::after{display:none!important}
button:hover:not(:disabled),a.button:hover{transform:none}
.button{min-height:46px;border-radius:999px;border:1.5px solid var(--hm-line-2);background:#fff;color:var(--hm-ink);box-shadow:none;font-weight:600}
.button:hover:not(:disabled){background:var(--hm-desk);border-color:var(--hm-ink);box-shadow:none;color:var(--hm-ink)}
.button-primary,.button-primary:disabled{background:var(--hm-ink);border-color:var(--hm-ink);color:#fff;box-shadow:none}
.button-primary:hover:not(:disabled){background:#2A2F3A;border-color:#2A2F3A;color:#fff}
.button-quiet{border-color:transparent;background:transparent;color:var(--hm-ink-2)}
.button-quiet:hover:not(:disabled){border-color:transparent;background:var(--hm-desk)}
button:disabled,.button:disabled{opacity:.4}
.link-button{color:var(--hm-ink);text-decoration:underline;text-underline-offset:3px}

/* 卡片與上傳區 */
.card,.canvas-column,.controls,.download-card,.settings-card,.results-card,.source-card{background:#fff;border:0;border-radius:var(--hm-radius);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.upload-card{background:transparent;box-shadow:none;border:0;padding:0}
.drop-zone{position:relative;border:0;border-radius:var(--hm-radius);background-color:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none;
  background-image:linear-gradient(#0F1115,#0F1115),linear-gradient(#0F1115,#0F1115),linear-gradient(#0F1115,#0F1115),linear-gradient(#0F1115,#0F1115),linear-gradient(#0F1115,#0F1115),linear-gradient(#0F1115,#0F1115),linear-gradient(#0F1115,#0F1115),linear-gradient(#0F1115,#0F1115);
  background-repeat:no-repeat;
  background-size:22px 2px,2px 22px,22px 2px,2px 22px,22px 2px,2px 22px,22px 2px,2px 22px;
  background-position:left 18px top 18px,left 18px top 18px,right 18px top 18px,right 18px top 18px,left 18px bottom 18px,left 18px bottom 18px,right 18px bottom 18px,right 18px bottom 18px}
.drop-zone.is-dragover{background-color:var(--hm-rec-soft);box-shadow:none;transform:none;border:0}
.upload-symbol{background:none;border:0;box-shadow:none;color:var(--hm-ink);margin-bottom:12px}
.upload-symbol>.icon{width:44px;height:44px;stroke-width:1.4}
.mini-spark{display:none}
.drop-zone h2,.drop-zone .drop-title{font-weight:700;letter-spacing:0}
.upload-hint,.upload-options{color:var(--hm-ink-2)}
.paste-button{color:var(--hm-ink);text-decoration:underline;text-underline-offset:3px}
.paste-button:hover:not(:disabled){background:var(--hm-desk)}

/* 表單 */
input[type="text"],input[type="number"],select,.field select,.field input[type="text"]{border:1.5px solid transparent;background:var(--hm-desk);border-radius:12px;color:var(--hm-ink);box-shadow:none}
input[type="text"]:hover,input[type="number"]:hover,select:hover{border-color:var(--hm-line-2)}
input[type="text"]:focus-visible,input[type="number"]:focus-visible,select:focus-visible{border-color:var(--hm-ink);outline:none;box-shadow:0 0 0 3px var(--hm-rec-soft)}
input[type="checkbox"],input[type="radio"],input[type="range"],progress{accent-color:var(--hm-ink)}
.group legend,.controls legend,fieldset legend{font-weight:700;color:var(--hm-ink)}
.muted,.small.muted,.tiny{color:var(--hm-ink-2)}

/* 分段選擇（格式、方向、每頁張數） */
.format-options{background:var(--hm-desk);border:0;border-radius:999px;padding:4px;gap:4px;box-shadow:none}
.format-option,.choice{border:0;border-radius:999px;background:transparent;color:var(--hm-ink);box-shadow:none;font-weight:600}
.format-option:has(input:checked),.choice:has(input:checked){background:var(--hm-ink);color:#fff;box-shadow:none;border:0}
.format-option:has(input:checked) small{color:#B8BEC8}
.choice-row{gap:6px}
.choice{background:var(--hm-desk)}
.lock-button{background:var(--hm-desk);border:0;color:var(--hm-ink-2);border-radius:12px}
.lock-button[aria-pressed="true"]{background:var(--hm-ink);color:#fff}

/* 提示 */
.alert{border:0;border-radius:14px}
.alert-info{background:var(--hm-desk);color:var(--hm-ink)}
.alert-error{background:var(--hm-rec-soft);color:#8A0B2B}
.alert-warn{background:#FFF3DC;color:#6B4300}
.status{color:var(--hm-ink-2)}
.spinner{border-color:var(--hm-line);border-top-color:var(--hm-rec)}
.progress-panel progress::-webkit-progress-value{background:var(--hm-rec)}
.progress-panel progress::-moz-progress-bar{background:var(--hm-rec)}
.progress-panel progress::-webkit-progress-bar{background:var(--hm-desk)}

/* 九宮格位置 */
.anchor-grid{display:grid;grid-template-columns:repeat(3,44px);gap:4px;padding:4px;background:var(--hm-desk);border-radius:14px;width:max-content}
.anchor-grid button{width:44px;height:44px;border:0;border-radius:10px;background:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.anchor-grid button span{width:10px;height:10px;border-radius:3px;background:var(--hm-line-2)}
.anchor-grid button[aria-pressed="true"]{background:var(--hm-ink)}
.anchor-grid button[aria-pressed="true"] span{background:var(--hm-rec)}
.segmented{display:flex;gap:4px;padding:4px;background:var(--hm-desk);border-radius:999px}
.segmented button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;color:var(--hm-ink);font-weight:600;cursor:pointer}
.segmented button[aria-pressed="true"]{background:var(--hm-ink);color:#fff}

/* ---------- 轉檔 ---------- */
.ratio-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ratio-row .button{min-height:40px;padding:0 14px;font-family:var(--hm-mono);font-weight:500}
.ratio-row .button[data-ratio="original"]{font-family:var(--hm-sans);font-weight:600}
.presets .button[aria-pressed="true"],.ratio-row .button[aria-pressed="true"]{background:var(--hm-ink);border-color:var(--hm-ink);color:#fff}
.fit-block{margin-top:14px;display:grid;gap:8px}
.fit-label{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--hm-ink)}
.anchor-block{display:grid;gap:8px}
#sourceStage{position:relative}
.crop-frame{position:absolute;z-index:2;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(15,17,21,.5);pointer-events:none;border-radius:2px}
.converter-sidebar>#addMoreButton{background:#fff;border:1.5px solid var(--hm-line-2);box-shadow:none}
.stage,.preview-box{border-radius:16px}
.nav-button{border-radius:999px;background:var(--hm-desk);border:0;color:var(--hm-ink)}
.sheet{box-shadow:0 1px 0 var(--hm-line),0 8px 24px rgba(15,17,21,.08)}
.sheet-wrap{background:var(--hm-desk);border-radius:20px}
.slot-badge{background:var(--hm-ink);color:#fff}
.print-view .anchor-grid{margin-top:4px}

/* ---------- 去背 ---------- */
.tool-buttons,.history-buttons,.navigation-pill{background:#fff;border:1.5px solid var(--hm-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.tool-button{color:var(--hm-ink)}
.tool-button[aria-pressed="true"]{background:var(--hm-ink);color:#fff;box-shadow:none}
.icon-button{color:var(--hm-ink)}
.icon-button:hover:not(:disabled){background:var(--hm-desk);color:var(--hm-ink)}
.icon-button[aria-pressed="true"]{background:var(--hm-ink);color:#fff}
.rerun-button{background:#fff;border-color:var(--hm-line-2);color:var(--hm-ink)}
.rerun-button .icon{color:var(--hm-rec)}
.pane-header{background:#fff;border-color:var(--hm-line)}
.image-pane{border-color:var(--hm-line);background:var(--hm-desk)}
.canvas-stage{background-color:var(--hm-desk)}
.sensitivity-stops button,.size-stops button,.scope-buttons button,.format-options button{border-radius:999px}
.sensitivity-stops button[aria-pressed="true"],.size-stops button[aria-pressed="true"],.scope-buttons button[aria-pressed="true"],.download-card .format-options button[aria-pressed="true"]{background:var(--hm-ink);color:#fff;box-shadow:none;border-color:var(--hm-ink)}
.download-card .format-options button{background:transparent;border:0;color:var(--hm-ink);font-weight:600}
.swatch[aria-pressed="true"],.palette-swatch.is-active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--hm-ink)}
.busy-card{background:#fff;border:0;box-shadow:0 8px 32px rgba(15,17,21,.12)}
.notice,.toast{background:#fff;color:var(--hm-ink)}

/* ---------- 抽幀 ---------- */
.estimate{background:var(--hm-desk);color:var(--hm-ink);border:0}
.sheet-item{background:var(--hm-desk);border:0}
.result-empty{border:1.5px dashed var(--hm-line-2);background:transparent}
.detection-note{color:var(--hm-ink-2)}
.advanced-settings summary{font-weight:700}
dialog{border:0;border-radius:20px}

@media (max-width:720px){
  .page.hm-tool-page{padding:0 16px}
  .drop-zone{background-position:left 14px top 14px,left 14px top 14px,right 14px top 14px,right 14px top 14px,left 14px bottom 14px,left 14px bottom 14px,right 14px bottom 14px,right 14px bottom 14px}
}
/* 上傳區：不要撐滿整個螢幕高度 */
.hm-tool-page .upload-card{min-height:0!important;padding:0!important;width:100%;max-width:none}
.is-loaded .hm-tool-page .upload-card,.is-loaded .upload-card{display:none}
.hm-tool-page .drop-zone{width:100%!important;max-width:none!important;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px!important;margin:0}
.hm-tool-page .drop-zone .button-primary{max-width:100%;min-width:220px}
#viewConverter:not(:has(#sourceSection:not([hidden]))) .upload-card{width:100%;max-width:none}
#viewConverter:not(:has(#sourceSection:not([hidden]))){display:block;min-height:0}
.print-view>.actions:has(#printBack){display:none}
#editor{padding-top:0}
@media (max-width:720px){
  .hm-tool-page .drop-zone{min-height:300px;padding:40px 18px!important}
  .hm-tool-page .drop-zone .button-primary{min-width:0;width:auto;padding-left:28px;padding-right:28px}
}

.ratio-row{background:transparent!important;padding:0!important;border:0!important}
.ratio-row .button{white-space:nowrap;flex:none}
.button-quiet,#printClearButton,#clearAllButton,#removeCurrentButton{color:var(--hm-ink)}
#removeCurrentButton{border-color:var(--hm-line-2)}
/* 去背：靈敏度滑桿 */
.stepped-slider input[type=range]{background:var(--hm-desk)!important}
.stepped-slider input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--hm-ink) 0 var(--fill,50%),var(--hm-desk) var(--fill,50%))!important;box-shadow:none!important}
.stepped-slider input[type=range]::-moz-range-track{background:var(--hm-desk)!important;box-shadow:none!important}
.stepped-slider input[type=range]::-moz-range-progress{background:var(--hm-ink)!important}
.stepped-slider input[type=range]::-webkit-slider-thumb{background:#fff!important;border:2px solid var(--hm-ink)!important;box-shadow:none!important}
.stepped-slider input[type=range]::-moz-range-thumb{background:#fff!important;border:2px solid var(--hm-ink)!important;box-shadow:none!important}
.slider-dots i{background:var(--hm-line-2)!important;box-shadow:none!important}
.field input[type=number],.field select{border:1.5px solid transparent;background:var(--hm-desk)}
.field output{color:var(--hm-ink)}
.result-empty>.icon{color:var(--hm-ink-2)}
.result-count{background:var(--hm-desk);color:var(--hm-ink)}
.sheet-preview-button{background:var(--hm-desk)}
.video-stage{background:#0F1115;border:0}

/* ===== 第二版修正 ===== */
/* 不需要的小字 */
#formatHint,#lockLabel,#sizeModeNote,#bulkSummary,.print-meta #printSummary,.print-view .small.muted{display:none!important}

/* 四個工具的上傳區：同位置、同大小、同樣式 */
.hm-tool-page .upload-card,.hm-tool-page #printUpload{margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;width:100%;max-width:none}
.hm-tool-page .drop-zone{min-height:360px;height:360px;gap:0;padding:0 24px!important;margin:0!important}
.hm-tool-page .drop-zone .upload-symbol{width:56px;height:56px;margin:0 0 14px!important;display:grid;place-items:center}
.hm-tool-page .drop-zone h2,.hm-tool-page .drop-zone .drop-title{margin:0 0 22px!important;font-size:24px!important;line-height:1.3;font-weight:700}
.hm-tool-page .drop-zone .button-primary{min-height:52px!important;height:52px;padding:0 28px!important;font-size:16px!important;border-radius:999px!important;min-width:180px}
.hm-tool-page .drop-zone .center-actions{margin:0!important;gap:8px;justify-content:center}
.hm-tool-page .upload-hint{margin:16px 0 0!important;font-size:14px!important;color:var(--hm-ink-2)!important;line-height:1.5}
.print-view:has(#printWorkspace:not([hidden])) #printUpload .drop-zone{height:auto;min-height:0}
#status.visually-hidden{margin:0}
.hm-toolhead+noscript+*{margin-top:0}

/* 去背：工具列在 1260px 版寬內不要重疊 */
.hm-tool-page .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;height:auto!important;min-height:0!important;padding:16px 0}
.hm-tool-page .tool-buttons{gap:1px;padding:4px}
.hm-tool-page .tool-button{flex-direction:column;gap:3px;min-height:60px;padding:7px 10px;font-size:14px}
.hm-tool-page .tool-divider{display:none}
.hm-tool-page .history-buttons .button{font-size:14px;padding:8px;gap:5px}
.hm-tool-page .toolbar .rerun-button{margin-left:auto;font-size:14px}

/* 轉檔：比例一行、裁切框可拖曳 */
.ratio-row{flex-wrap:nowrap!important}
.ratio-row .button{flex:1 1 0;min-width:0;padding:0 6px!important}
.fit-block{margin-top:12px}
.crop-frame{pointer-events:auto!important;cursor:move;touch-action:none}
.crop-frame::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(15,17,21,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M8 7l4-4 4 4M8 17l4 4 4-4M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E") no-repeat center/20px}
.crop-frame.is-dragging{border-color:var(--hm-rec)}
.crop-frame:focus-visible{outline:3px solid var(--hm-rec)}

/* 快速 PDF：選單 */
.pdf-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--hm-line)}
.print-view .segmented{max-width:320px}

@media (max-width:720px){
  .hm-tool-page .drop-zone{min-height:300px;height:300px}
  .hm-tool-page .drop-zone h2,.hm-tool-page .drop-zone .drop-title{font-size:21px!important}
}
.ratio-row .button,.ratio-row .button[data-ratio="original"]{font-family:var(--hm-sans)!important;font-weight:600!important;font-size:14px!important}
#printWorkspace{align-items:start;align-content:start}
#printWorkspace>.card{align-self:start}
@media (min-width:901px){#printWorkspace{grid-template-rows:auto 1fr}}
.print-view .choice-row{display:flex;gap:4px;padding:4px;background:var(--hm-desk);border-radius:999px;max-width:320px}
.print-view .choice{flex:1;justify-content:center;min-height:40px;background:transparent}
.print-view .choice:has(input:checked){background:var(--hm-ink);color:#fff}
.print-view .choice input{position:absolute;opacity:0;pointer-events:none}
@media (min-width:1101px){.frame-workspace{grid-template-rows:auto 1fr}.frame-workspace>.results-card{align-self:start}}
.field select{appearance:none;-webkit-appearance:none;height:46px;padding:0 40px 0 14px!important;border:1.5px solid transparent;border-radius:12px;background:var(--hm-desk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px!important;font-weight:600;cursor:pointer}
.field input[type=number],.field input[type=text]{height:46px;border-radius:12px}
