:root{--text-soft:#2f4a4c;--panel-bg:linear-gradient(180deg,#ffffff,#f6faf9);--panel-text:#102a2c;--panel-soft:#2f4a4c;--thumb-bg:radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 34%),
    radial-gradient(circle at bottom right, rgba(124,58,237,.06), transparent 38%),
    linear-gradient(180deg, #f8fbff, #f6faf9);--notice-bg:radial-gradient(circle at top left, rgba(245,158,11,.12), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,235,.92));--pill-bg:#ffffff;--pill-border:rgba(148,163,184,.24);--mark-bg:#fef08a;--mark-text:#102a2c}
html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"]{--text-soft:#c6d4d2;--panel-bg:linear-gradient(180deg, rgba(15,23,42,.82), rgba(2,6,23,.92));--panel-text:#e4eeec;--panel-soft:#c6d4d2;--thumb-bg:radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 36%),
    radial-gradient(circle at bottom right, rgba(124,58,237,.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));--notice-bg:radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,251,235,.02));--pill-bg:rgba(255,255,255,.04);--pill-border:rgba(148,163,184,.18);--mark-bg:#fde68a;--mark-text:#102a2c}
.tool-app *{box-sizing:border-box}
.tool-app button,.tool-app input,.tool-app select,.tool-app textarea{font:inherit}
.tool-app button{-webkit-tap-highlight-color:transparent}
.hero{max-width:1200px;margin:0 auto}
.hero h1{color:var(--text)}
.hero p{color:var(--muted)}
.top-row{max-width:1200px;margin:0 auto 18px;display:grid;grid-template-columns:1.08fr .92fr;gap:16px}
.info-card,.upload-card,.toolbar-card,.summary-card,.page-card,.tips-card,.result-shell{border:1px solid var(--border);background:var(--surface);border-radius:26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.info-card{padding:24px;display:flex;flex-direction:column;justify-content:center}
.info-title{margin:0 0 10px;font-size:1.22rem;color:var(--text)}
.info-text{margin:0;color:var(--muted);line-height:1.78}
.info-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.info-tags span{padding:9px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-size:.8rem;font-weight:700}
.upload-card{padding:18px}
.upload-inner{min-height:245px;border:1.6px dashed rgba(99,102,241,.34);border-radius:22px;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px 18px;flex-direction:column;gap:10px;background:var(--upload-bg);transition:border-color .25s ease, transform .18s ease, box-shadow .25s ease}
.upload-inner.dragover{border-color:rgba(99,102,241,.72);box-shadow:0 0 0 4px rgba(99,102,241,.11), 0 24px 50px rgba(37,99,235,.10);transform:translateY(-2px)}
.upload-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;font-size:2rem;border:1px solid var(--border);background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(124,58,237,.16));box-shadow:0 16px 30px rgba(37,99,235,.12)}
.upload-inner h2{margin:4px 0 0;font-size:1.34rem;color:var(--text)}
.upload-inner p{margin:0;color:var(--muted)}
.upload-note{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:.82rem}
.toolbar-wrap{max-width:1200px;margin:0 auto 18px}
.toolbar-card{padding:18px;position:sticky;top:72px;z-index:40}
.toolbar-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar-title{display:flex;flex-direction:column;gap:4px}
.toolbar-title h3{margin:0;color:var(--text);font-size:1.08rem}
.toolbar-title p{margin:0;color:var(--muted);font-size:.82rem}
.toolbar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.toolbar-extra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.toolbar-field{display:flex;flex-direction:column;gap:6px}
.toolbar-field label{font-size:.77rem;font-weight:800;color:var(--text)}
.toolbar-field input,.toolbar-field select,.toolbar-field textarea{width:100%;min-height:46px;border-radius:15px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:11px 13px;font-size:.9rem;outline:none;transition:border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    transform .18s ease}
.toolbar-field input::placeholder,.toolbar-field textarea::placeholder{color:var(--placeholder)}
.toolbar-field input:hover,.toolbar-field select:hover,.toolbar-field textarea:hover{border-color:rgba(37,99,235,.34)}
.toolbar-field input:focus,.toolbar-field select:focus,.toolbar-field textarea:focus{border-color:var(--accent1);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.toolbar-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:46px;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 19px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);background-size:6px 6px, 6px 6px;background-repeat:no-repeat}
.toolbar-field select:focus{background-image:linear-gradient(45deg, transparent 50%, var(--accent1) 50%),
    linear-gradient(135deg, var(--accent1) 50%, transparent 50%)}
.toolbar-field select option{background:var(--surface-strong);color:var(--text)}
.slider-wrap{display:flex;align-items:center;gap:12px;min-height:46px;border-radius:15px;border:1px solid var(--input-border);background:var(--input-bg);padding:0 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.slider-wrap input[type="range"]{flex:1;width:100%;min-width:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.slider-wrap input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg, var(--accent1), var(--accent2)) 0/var(--range-fill, 20%) 100% no-repeat,
    rgba(148,163,184,.22);box-shadow:inset 0 1px 1px rgba(0,0,0,.08)}
.slider-wrap input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#fff,#d4ecea);border:2px solid var(--accent1);box-shadow:0 4px 12px rgba(37,99,235,.24);margin-top:-5px;transition:transform .15s ease, box-shadow .15s ease}
.slider-wrap input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.06);box-shadow:0 6px 16px rgba(37,99,235,.30)}
.slider-wrap input[type="range"]:focus::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(37,99,235,.14), 0 6px 16px rgba(37,99,235,.30)}
.slider-wrap input[type="range"]::-moz-range-track{height:8px;border:none;border-radius:999px;background:rgba(148,163,184,.22)}
.slider-wrap input[type="range"]::-moz-range-progress{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent1),var(--accent2))}
.slider-wrap input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:linear-gradient(135deg,#fff,#d4ecea);box-shadow:0 4px 12px rgba(37,99,235,.24);cursor:pointer}
.slider-value{min-width:68px;text-align:center;font-size:.84rem;font-weight:900;color:var(--text);padding:7px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.toolbar-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.btn-primary,.btn-outline,.btn-ghost{min-height:46px;border-radius:15px;padding:0 16px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:800;line-height:1;cursor:pointer;user-select:none;white-space:nowrap;transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease}
.btn-primary{color:var(--btn-primary-text);background:var(--accent-grad);border-color:rgba(255,255,255,.08);box-shadow:0 12px 26px rgba(37,99,235,.22)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(37,99,235,.28)}
.btn-outline{color:var(--btn-outline-text);background:var(--btn-outline-bg);border-color:var(--btn-outline-border);box-shadow:0 8px 20px rgba(2,6,23,.05)}
.btn-outline:hover{transform:translateY(-1px);background:rgba(37,99,235,.14)}
.btn-ghost{color:var(--btn-ghost-text);background:var(--btn-ghost-bg);border-color:var(--btn-ghost-border);box-shadow:0 8px 20px rgba(2,6,23,.04)}
.btn-ghost:hover{transform:translateY(-1px);background:var(--surface-soft)}
.btn-primary:disabled,.btn-outline:disabled,.btn-ghost:disabled{opacity:.55;cursor:not-allowed;transform:none !important;box-shadow:none !important}
.progress-row{width:100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.progress-bar{flex:1;height:8px;border-radius:999px;overflow:hidden;background:rgba(148,163,184,.18)}
.progress-bar > div{width:0%;height:100%;background:var(--accent-grad);transition:width .22s ease}
#progressText{min-width:220px;text-align:right;color:var(--muted);font-size:.79rem}
.summary-wrap{max-width:1200px;margin:0 auto 18px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.summary-card{padding:16px}
.summary-card small{display:block;margin-bottom:6px;color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.summary-card strong{display:block;color:var(--text);font-size:1.08rem}
.workspace{max-width:1200px;margin:0 auto 18px}
.result-shell{padding:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.panel-head-left{display:flex;flex-direction:column;gap:4px}
.panel-head-left h3{margin:0;color:var(--text);font-size:1.08rem}
.panel-head-left p{margin:0;color:var(--muted);font-size:.82rem}
.panel-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inline-status{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid var(--pill-border);background:var(--pill-bg);color:var(--text);font-size:.78rem;font-weight:700}
.pages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.empty-state{text-align:center;padding:64px 22px;border:1px dashed var(--border);border-radius:22px;color:var(--muted);background:var(--surface-soft)}
.page-card{overflow:hidden;border-radius:24px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.page-card:hover{transform:translateY(-2px);border-color:rgba(99,102,241,.28)}
.page-card.hidden-by-filter{display:none}
.page-card.selected{border-color:rgba(37,99,235,.34);box-shadow:0 18px 36px rgba(37,99,235,.10)}
.page-thumb-wrap{position:relative;padding:16px 16px 14px;background:var(--thumb-bg);border-bottom:1px solid var(--border)}
.page-number{position:absolute;top:12px;left:12px;min-width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-size:.82rem;font-weight:900;color:var(--text);background:var(--surface-strong);border:1px solid var(--border);box-shadow:0 10px 20px rgba(15,23,42,.08);z-index:2}
.page-select{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;border:1px solid rgba(255,255,255,.12);font-size:.74rem;font-weight:800;z-index:2;backdrop-filter:blur(10px)}
html[data-theme="dark"] .page-select,html[data-theme="dark"] .page-select,html[data-theme="dark"] .page-select,html[data-theme="dark"] .page-select,html[data-theme="dark"] .page-select,html[data-theme="dark"] .page-select,html[data-theme="dark"] .page-select,html[data-theme="dark"] .page-select{background:rgba(2,6,23,.58)}
.page-select input{width:16px;height:16px;accent-color:#0b6e75}
.page-preview-frame{width:100%;min-height:150px;border-radius:18px;background:var(--panel-bg);padding:18px;box-shadow:inset 0 0 0 1px rgba(148,163,184,.14), 0 14px 28px rgba(15,23,42,.08);overflow:hidden}
.page-preview-text{color:var(--panel-soft);font-size:.88rem;line-height:1.62;white-space:pre-wrap;word-break:break-word;max-height:210px;overflow:auto}
.page-preview-text.empty{color:var(--muted);font-style:italic}
.page-body{padding:14px 14px 15px;display:flex;flex-direction:column;gap:12px}
.page-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.page-title{margin:0;color:var(--text);font-size:.98rem;font-weight:900}
.page-badge{padding:6px 10px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);color:var(--muted);font-size:.72rem;font-weight:800;white-space:nowrap}
.page-meta-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:15px;border:1px solid var(--border);background:var(--surface-soft)}
.page-meta-item{display:flex;flex-direction:column;gap:3px}
.page-meta-item small{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.page-meta-item strong{color:var(--text);font-size:.83rem}
.page-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.page-actions button{min-height:40px;padding:0 10px;border-radius:14px;font-weight:800}
.full-text-wrap{margin-top:16px;border-top:1px solid var(--border);padding-top:16px}
.full-text-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.full-text-head h4{margin:0;color:var(--text);font-size:1rem}
.full-text-box{width:100%;min-height:300px;resize:vertical;border-radius:18px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:16px;line-height:1.68;font-size:.93rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.full-text-box::placeholder{color:var(--placeholder)}
.bottom-wrap{max-width:1200px;margin:0 auto 50px}
.tips-card{padding:18px 20px}
.tips-card h3{margin:0 0 8px;color:var(--text);font-size:1.02rem}
.tips-card p{margin:0;color:var(--muted);line-height:1.7}
.tool-app mark{background:var(--mark-bg);color:var(--mark-text);padding:0 .08em;border-radius:.2em}
@media (max-width:1180px){
.toolbar-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}
.toolbar-extra{grid-template-columns:repeat(2,minmax(160px,1fr))}
.summary-wrap{grid-template-columns:repeat(3,1fr)}
.pages-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
.top-row{grid-template-columns:1fr}
.toolbar-card{top:64px}
}
@media (max-width:680px){
.toolbar-card{position:relative !important;top:auto !important}
.toolbar-grid,.toolbar-extra{grid-template-columns:1fr}
.toolbar-actions{display:grid;grid-template-columns:1fr}
.toolbar-actions button{width:100%}
.progress-row{flex-direction:column;align-items:stretch}
#progressText{min-width:auto;text-align:left}
.summary-wrap{grid-template-columns:1fr 1fr}
.pages-grid{grid-template-columns:1fr}
}
@media (max-width:460px){
.summary-wrap{grid-template-columns:1fr}
}

/* page overrides */
.tool-app .page-title{font:600 16px var(--zl-font-head);color:var(--zl-ink)}
.tool-app .page-thumb-wrap{padding-top:60px}
.tool-app .page-select{background:var(--zl-surface);color:var(--zl-ink);border:1.5px solid var(--zl-line-2);min-height:36px;cursor:pointer}
.tool-app .page-preview-frame{box-shadow:inset 0 0 0 1px var(--zl-line);background:var(--zl-surface)}
.tool-app .page-preview-text{color:var(--zl-ink-2)}