:root { --ink:#17212b; --muted:#5c6b77; --line:#dfe6ec; --paper:#f4f6f9; --card:#fff; --accent:#7c3aed; --accent-soft:#e8effc; --green:#15803d; --green-soft:#e6f5ea; --amber:#b45309; --amber-soft:#fdf3e3; --red:#b91c1c; --red-soft:#fdecec; --shadow:0 10px 30px rgba(23,33,43,.07); }
[data-theme="dark"] { --ink:#e4eaf0; --muted:#93a2b0; --line:#2a3642; --paper:#0e141a; --card:#151d26; --accent:#6ea8ff; --accent-soft:#1b2a44; --green:#4ade80; --green-soft:#13291b; --amber:#fbbf24; --amber-soft:#2a2414; --red:#f87171; --red-soft:#2a1616; --shadow:0 10px 30px rgba(0,0,0,.35); }
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif; line-height:1.6; font-size:15px; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
.site-header { position:sticky; top:0; z-index:30; background:var(--card); border-bottom:1px solid var(--line); }
.header-inner { max-width:1280px; margin:auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--accent); color:#fff; font-size:21px; }
.brand b { display:block; font-size:17px; letter-spacing:-.02em; }
.brand small { color:var(--muted); font-size:11px; display:block; }
.head-right { display:flex; align-items:center; gap:12px; }
.privacy-chip { font-size:12px; color:var(--green); background:var(--green-soft); padding:6px 12px; border-radius:999px; font-weight:700; }
.theme-toggle { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:7px 11px; cursor:pointer; font-size:15px; }
.layout { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:232px 1fr; gap:0; min-height:calc(100vh - 71px); }
.sidebar { border-right:1px solid var(--line); background:var(--card); padding:18px 12px; }
.tool-nav { display:grid; gap:4px; }
.tool-nav button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; font-weight:600; }
.tool-nav button:hover { background:var(--paper); color:var(--ink); }
.tool-nav button.active { background:var(--accent-soft); color:var(--accent); }
.tool-nav .tool-ico { width:22px; text-align:center; }
.content { padding:26px 30px 60px; min-width:0; }
h1.panel-title { font-size:23px; letter-spacing:-.03em; margin:0 0 4px; }
p.panel-desc { color:var(--muted); font-size:13px; margin:0 0 20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; }
.card h3 { margin:0 0 14px; font-size:15px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .layout { grid-template-columns:1fr; } .sidebar { border-right:0; border-bottom:1px solid var(--line); } .tool-nav { grid-auto-flow:column; overflow-x:auto; } .grid-2 { grid-template-columns:1fr; } .content { padding:20px 16px 50px; } }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px; transition:.15s ease; }
.btn:hover { filter:brightness(.96); transform:translateY(-1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-quiet { background:var(--accent-soft); color:var(--accent); }
.btn-green { background:var(--green); color:#fff; }
.btn-danger { background:var(--red-soft); color:var(--red); }
.btn-ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
.btn-block { width:100%; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row.end { justify-content:flex-end; }
input[type=text],input[type=number],input[type=password],input[type=file],select,textarea { border:1px solid var(--line); border-radius:10px; padding:9px 12px; background:var(--card); width:100%; outline:0; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
label.field { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px; }
label.field small { font-weight:400; color:var(--muted); }
.muted { color:var(--muted); font-size:13px; }
.dropzone { border:2px dashed var(--line); border-radius:16px; padding:38px 20px; text-align:center; cursor:pointer; transition:.15s ease; background:var(--card); }
.dropzone:hover, .dropzone.drag { border-color:var(--accent); background:var(--accent-soft); }
.dropzone b { font-size:16px; }
.dropzone p { color:var(--muted); font-size:13px; margin:6px 0 0; }
.dropzone .big-ico { font-size:38px; }
.file-row { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:8px; background:var(--card); }
.file-row .fname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:14px; }
.file-row .fmeta { color:var(--muted); font-size:12px; }
.file-row .fpages { background:var(--accent-soft); color:var(--accent); border-radius:8px; padding:2px 8px; font-size:12px; font-weight:700; }
.pages-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:10px; }
.page-cell { position:relative; border:2px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; cursor:pointer; }
.page-cell img { width:100%; display:block; }
.page-cell .pnum { position:absolute; left:4px; top:4px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:700; border-radius:6px; padding:1px 6px; }
.page-cell.selected { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); }
.page-cell .pact { position:absolute; inset:0; display:grid; place-items:center; gap:6px; background:rgba(255,255,255,.9); opacity:0; transition:.12s ease; }
.page-cell:hover .pact { opacity:1; }
.page-cell .pact button { border:0; background:var(--accent); color:#fff; border-radius:8px; padding:5px 9px; cursor:pointer; font-size:12px; font-weight:700; }
.page-cell.dragging { opacity:.4; }
.thumb-list { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.thumb-item { flex:0 0 auto; width:74px; text-align:center; }
.thumb-item img { width:100%; border:2px solid var(--line); border-radius:8px; display:block; background:#fff; }
.thumb-item.active img { border-color:var(--accent); }
.thumb-item small { font-size:11px; color:var(--muted); }
.preview-area { display:flex; gap:20px; align-items:flex-start; }
.preview-main { flex:1; min-width:0; }
.preview-main canvas { width:100%; height:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }
.preview-tools { display:flex; align-items:center; gap:8px; margin:10px 0; }
.checkbox { display:flex; align-items:center; gap:8px; font-size:13px; }
.checkbox input { width:auto; accent-color:var(--accent); }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--ink); color:var(--paper); padding:11px 22px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; transition:.25s ease; z-index:60; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.err { background:var(--red); color:#fff; }
.progress-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; z-index:80; }
.progress-box { width:min(420px,90vw); background:var(--card); border-radius:16px; padding:22px; box-shadow:var(--shadow); }
.progress-box b { display:block; margin-bottom:12px; }
.progress-track { height:10px; background:var(--line); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .15s ease; }
.progress-box small { color:var(--muted); display:block; margin-top:10px; font-size:12px; }
.empty-state { text-align:center; color:var(--muted); padding:30px 10px; }
.range-ok { font-size:13px; color:var(--green); font-weight:600; }
.range-bad { font-size:13px; color:var(--red); font-weight:600; }
table.opts { width:100%; border-collapse:collapse; }
table.opts td { padding:8px 6px; vertical-align:middle; }
table.opts td:first-child { white-space:nowrap; }
details.help { font-size:13px; color:var(--muted); margin-top:8px; }
details.help summary { cursor:pointer; color:var(--accent); font-weight:600; }
.extracted-img { border:1px solid var(--line); border-radius:10px; padding:8px; display:inline-block; margin:4px; vertical-align:top; }
.extracted-img img { max-width:140px; max-height:140px; display:block; }
.tag { display:inline-block; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; }
[data-theme="dark"] .page-cell, [data-theme="dark"] .thumb-item img, [data-theme="dark"] .preview-main canvas { background:#0b0f14; }