:root{--is-light:0;
  --bg-page:#1a1a1a;--bg-panel:#151515;--bg-code:#111;--bg-ln:#111;
  --bg-btn:#2a2a2a;--bg-btn-hover:#333;--bg-btn-primary:#3a3a3a;--bg-btn-primary-hover:#4a4a4a;
  --bg-input:#111;--bg-drag:rgba(26,26,26,.92);--bg-toast:#333;--bg-progress:#2a2a2a;
  --border:#333;--border-hover:#444;--border-focus:#666;--border-btn:#444;--border-primary:#555;
  --text:#ccc;--text-heading:#f0f0f0;--text-muted:#888;--text-dim:#666;--text-faint:#555;--text-btn-disabled:#999;
  --text-danger:#e06c75;--text-toast:#eee;--text-ln:#555;--text-hint:#555;
  --bar-fill:#888;--drag-dash:#555;--color-accent:#888;
}
:root.light{--is-light:1;
  --bg-page:#f5f5f5;--bg-panel:#fff;--bg-code:#fafafa;--bg-ln:#f0f0f0;
  --bg-btn:#e8e8e8;--bg-btn-hover:#ddd;--bg-btn-primary:#d0d0d0;--bg-btn-primary-hover:#c0c0c0;
  --bg-input:#fafafa;--bg-drag:rgba(245,245,245,.95);--bg-toast:#444;--bg-progress:#ddd;
  --border:#d0d0d0;--border-hover:#bbb;--border-focus:#999;--border-btn:#ccc;--border-primary:#bbb;
  --text:#444;--text-heading:#222;--text-muted:#888;--text-dim:#aaa;--text-faint:#bbb;--text-btn-disabled:#bbb;
  --text-danger:#c04040;--text-toast:#f0f0f0;--text-ln:#aaa;--text-hint:#bbb;
  --bar-fill:#999;--drag-dash:#aaa;--color-accent:#777;
}
*{margin:0;padding:0;box-sizing:border-box}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}
body{scrollbar-color:var(--border) transparent;scrollbar-width:thin;background:var(--bg-page);color:var(--text);font-family:'Segoe UI','Microsoft YaHei',sans-serif;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.container{max-width:1200px;margin:0 auto;padding:20px}

header{text-align:center;padding:24px 0 12px;border-bottom:1px solid var(--border);margin-bottom:16px}
header h1{font-size:28px;color:var(--text-heading);letter-spacing:4px;font-weight:200;text-transform:uppercase;line-height:1}
header h1 span{color:var(--text-heading);letter-spacing:2px}
header h1 span::before{content:"·";color:var(--color-accent);margin:0 6px;font-weight:200}
header h1 small{font-size:14px;font-weight:200;color:var(--text-muted);letter-spacing:2px;margin-left:6px;text-transform:none;vertical-align:baseline;position:relative;top:-2px}
header p{font-size:12px;color:var(--text-dim);margin-top:8px;letter-spacing:1px}

.toolbar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.toolbar .tb-group{display:flex;gap:4px;align-items:center}
.toolbar .tb-group+.tb-group::before{content:"";display:inline-block;width:1px;height:20px;background:var(--border);margin:0 4px}

.toolbar .tb-sep{display:inline-block;width:1px;height:20px;background:var(--border);margin:0 4px}
.toolbar .tb-spacer{flex:1;min-width:0}
.toolbar button,.toolbar .file-label{cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:7px 16px;background:var(--bg-btn);border:1px solid var(--border-btn);color:var(--text);font-size:13px;border-radius:4px;transition:.2s;font-family:inherit;white-space:nowrap}
.toolbar button:hover,.toolbar .file-label:hover{background:var(--bg-btn-hover);border-color:var(--border-hover)}
.toolbar .primary{background:var(--bg-btn-primary);border-color:var(--border-primary);color:var(--text-heading)}
.toolbar .primary:hover{background:var(--bg-btn-primary-hover);border-color:var(--color-accent)}
.toolbar .ex-btn{font-size:12px;padding:5px 10px;color:var(--text-muted)}
.toolbar .ex-btn:hover{color:var(--text)}
.toolbar button:disabled{opacity:.4;cursor:not-allowed}
.toolbar .btn-extract{color:#4caf50}
.toolbar .btn-extract:hover{background:color-mix(in srgb,#4caf50 12%,transparent);border-color:#4caf50;color:#4caf50}
.toolbar .btn-extract svg{color:#4caf50}
.toolbar .btn-orange{color:#e67e22}
.toolbar .btn-orange:hover{background:color-mix(in srgb,#e67e22 12%,transparent);border-color:#e67e22;color:#e67e22}
.toolbar .btn-orange svg{color:#e67e22}
.toolbar .btn-purple{color:#8e44ad}
.toolbar .btn-purple:hover{background:color-mix(in srgb,#8e44ad 12%,transparent);border-color:#8e44ad;color:#8e44ad}
.toolbar .btn-purple svg{color:#8e44ad}
.toolbar .btn-blue{color:#4a8cf7}
.toolbar .btn-blue:hover{background:color-mix(in srgb,#4a8cf7 12%,transparent);border-color:#4a8cf7;color:#4a8cf7}
.toolbar .btn-blue svg{color:#4a8cf7}
.toolbar .danger{color:var(--text-danger)}
.toolbar .danger:hover{background:color-mix(in srgb,var(--text-danger) 12%,transparent);border-color:var(--text-danger)}

.batch-bar{display:none;gap:6px;margin:14px 0;flex-wrap:wrap;min-height:0}
.batch-bar.show{display:flex}
.batch-bar .file-tab{cursor:pointer;padding:5px 10px 5px 14px;background:var(--bg-btn);border:1px solid var(--border-btn);color:var(--text-muted);font-size:12px;border-radius:4px;transition:.2s;font-family:inherit;max-width:180px;display:inline-flex;align-items:center;overflow:hidden}
.batch-bar .file-tab .tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.batch-bar .file-tab:hover{background:var(--bg-btn-hover);border-color:var(--border-hover);color:var(--text)}
.batch-bar .file-tab.active{background:var(--bg-btn-primary);border-color:var(--border-primary);color:var(--text-heading)}
.batch-bar .file-tab .tab-del{margin-left:4px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--text-faint);transition:.15s;border-radius:2px}
.batch-bar .file-tab .tab-del:hover{background:rgba(255,255,255,.08)}
.batch-bar .file-tab .tab-del svg{display:block}
.batch-bar .file-tab .tab-del:hover{color:var(--text-danger)}
.batch-bar .batch-count{font-size:11px;color:var(--text-faint);padding:4px 8px;white-space:nowrap}

.input-area{position:relative;margin-bottom:14px}
.input-area.drag-over textarea{border-color:var(--border-focus);background:var(--bg-panel)}
.input-area textarea{width:100%;min-height:220px;padding:14px;background:var(--bg-input);border:1px solid var(--border);color:var(--text);font-family:'Consolas','Courier New',monospace;font-size:13px;line-height:1.6;resize:vertical;border-radius:4px;outline:none;transition:.2s}
.input-area textarea:focus{border-color:var(--border-focus)}
.input-area textarea::-webkit-resizer{background:transparent}
.input-area::after{content:'';position:absolute;right:0;bottom:5px;width:14px;height:14px;background:currentColor;color:var(--text-dim);pointer-events:none;z-index:1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5895 16.0032L5.98291 7.39664L7.39712 5.98242L16.0037 14.589V7.00324H18.0037V18.0032H7.00373V16.0032H14.5895Z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5895 16.0032L5.98291 7.39664L7.39712 5.98242L16.0037 14.589V7.00324H18.0037V18.0032H7.00373V16.0032H14.5895Z'/%3E%3C/svg%3E") no-repeat center/contain}
.input-area .drag-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-drag);border:2px dashed var(--drag-dash);border-radius:4px;color:var(--text-muted);font-size:15px;opacity:0;pointer-events:none;transition:.25s;z-index:2}
.input-area.drag-over .drag-hint{opacity:1}
.input-area .drag-hint::before{content:"拖放 HTML 文件到此处（支持批量）"}

.output-area{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.output-area .output-panel:last-child:nth-child(3){grid-column:1/-1}
@media(max-width:800px){.output-area{grid-template-columns:1fr}}
.output-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;display:flex;flex-direction:column;min-height:200px;overflow:hidden}
.output-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted);flex-wrap:wrap;gap:6px}
.output-panel .panel-header .left{display:flex;align-items:center;gap:10px}
.output-panel .panel-header .badge{background:var(--bg-btn);color:var(--text-muted);padding:2px 10px;border-radius:10px;font-size:11px;text-align:center;min-width:28px;display:inline-block}
.output-panel .panel-header .right{display:flex;gap:6px;align-items:center}
.output-panel .panel-header .right button{cursor:pointer;background:transparent;border:1px solid var(--border-btn);color:var(--text-muted);padding:3px 10px;border-radius:3px;font-size:11px;transition:.2s;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
.output-panel .panel-header .right button:hover{background:var(--bg-btn);border-color:var(--border-hover);color:var(--text)}
.output-panel .code-wrap{position:relative;flex:1;overflow:auto;max-height:420px}
.output-panel .code-wrap pre{display:flex;margin:0;font-family:'Consolas','Courier New',monospace;font-size:13px;line-height:1.5;min-height:140px}
.output-panel .code-wrap pre .ln{user-select:none;text-align:right;color:var(--text-ln);padding:0 10px 0 14px;border-right:1px solid var(--border);min-width:40px;flex-shrink:0;white-space:pre;background:var(--bg-ln)}
.output-panel .code-wrap pre code{flex:1;padding:0 14px;white-space:pre-wrap;word-break:break-all;background:transparent!important}
.output-panel .code-wrap pre .empty-hint{padding:14px;color:var(--text-hint);font-style:italic;display:block}
.hljs{background:transparent!important}

.mode-toggle{background:transparent;border:1px solid var(--border-btn);color:var(--text-muted);cursor:pointer;padding:7px 12px;border-radius:4px;font-size:13px;transition:.2s;font-family:inherit}
.mode-toggle:hover{background:var(--bg-btn);border-color:var(--border-hover);color:var(--text)}

.progress-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;opacity:0;pointer-events:none;transition:.3s}
.progress-overlay.active{opacity:1;pointer-events:auto}
.progress-overlay .bar-wrap{width:340px;height:6px;background:var(--bg-progress);border-radius:3px;overflow:hidden;margin-bottom:12px}
.progress-overlay .bar-wrap .bar{height:100%;width:0;background:var(--bar-fill);border-radius:3px;transition:width .3s}
.progress-overlay .label{color:var(--text-muted);font-size:14px}

.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--bg-toast);color:var(--text-toast);padding:10px 28px;border-radius:6px;font-size:14px;opacity:0;transition:opacity .35s;pointer-events:none;z-index:999;white-space:nowrap}
.toast.show{opacity:1}

footer{max-width:1200px;margin:24px auto 0;padding:24px 20px 10px;border-top:1px solid var(--border);font-size:12px;color:var(--text-faint);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
footer a{color:var(--text-faint);text-decoration:none;transition:.2s}
footer a:hover{color:var(--text-muted)}
footer .sep{color:var(--text-faint);font-size:10px} footer .sep::before{content:"·"}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.25s}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal-box{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:24px 28px;min-width:320px;max-width:400px;box-shadow:0 8px 32px rgba(0,0,0,.4);transform:translateY(-8px);transition:transform .25s}
.modal-overlay.active .modal-box{transform:translateY(0)}
.modal-box h3{margin-bottom:18px;font-size:15px;color:var(--text-heading);font-weight:400;letter-spacing:.5px}
.modal-box .opt{margin-bottom:10px;display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px 12px;border-radius:4px;transition:.15s;user-select:none;font-size:13px;color:var(--text)}
.modal-box .opt:hover{background:var(--bg-btn)}
.modal-box .opt input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.modal-box .opt .ck{width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--border-btn);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:.15s;background:var(--bg-input)}
.modal-box .opt .ck svg{width:12px;height:12px;opacity:0;transition:.15s}
.modal-box .opt .ck svg path{stroke:#fff}
.modal-box .opt input:checked+.ck{background:#4a8cf7;border-color:#4a8cf7}
.modal-box .opt input:checked+.ck svg{opacity:1}
.modal-box .opt input:disabled+.ck{opacity:.3}
.modal-box .opt input:disabled~.hint{opacity:.4}
.modal-box .opt .hint{font-size:11px;color:var(--text-faint);margin-left:auto}
.modal-box .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.modal-box .modal-actions button{cursor:pointer;padding:7px 22px;border-radius:4px;font-size:13px;font-family:inherit;transition:.2s;letter-spacing:.3px;display:inline-flex;align-items:center;gap:4px}
.modal-box .modal-actions .m-cancel{background:transparent;border:1px solid var(--border-btn);color:var(--text-muted)}
.modal-box .modal-actions .m-cancel:hover{background:var(--bg-btn);border-color:var(--border-hover);color:var(--text)}
.modal-box .modal-actions .m-confirm{background:transparent;border:1px solid var(--border-btn);color:#4a8cf7}
.modal-box .modal-actions .m-confirm:hover{background:color-mix(in srgb,#4a8cf7 12%,transparent);border-color:#4a8cf7;color:#4a8cf7}

@media(max-width:640px){
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:start}
  .toolbar .tb-group{display:contents}
  .toolbar .tb-group+.tb-group::before{display:none}
  .toolbar .tb-spacer{display:none}
  .toolbar .tb-sep{display:none}
  .batch-bar .file-tab{font-size:11px;padding:4px 8px 4px 10px;max-width:120px}
  .toolbar .file-label{grid-column:1;grid-row:1}
  .toolbar button[onclick*="handlePaste"]{grid-column:1;grid-row:2}
  .toolbar .btn-extract{grid-column:1;grid-row:3}
  .toolbar .mode-toggle{grid-column:2;grid-row:1}
  .toolbar #exportZipBtn{grid-column:2;grid-row:2}
  .toolbar .danger{grid-column:2;grid-row:3}
  .toolbar button,.toolbar .file-label{padding:8px 10px;font-size:12px;justify-content:center}
  .toolbar button svg,.toolbar .file-label svg{width:14px;height:14px}
  header{padding:12px 0 8px;margin-bottom:12px}
  header h1{font-size:22px;letter-spacing:3px}
  header h1 small{font-size:12px}
  header p{font-size:12px}
  .modal-box{min-width:auto;margin:0 auto;padding:18px;width:88%;max-width:340px}
}