:root { color-scheme:light; --page:#f3f4f5; --surface:#fff; --soft:#f7f8f9; --text:#25282c; --muted:#62686f; --line:#dce0e4; --primary:#2465ba; --primary-hover:#174f9b; --accent:#edf3fc; --error:#b33039; --success:#24744e; --backdrop:rgba(19,22,27,.38); }
html[data-theme="dark"] { color-scheme:dark; --page:#191b1e; --surface:#23262a; --soft:#2b2e33; --text:#eceef0; --muted:#b0b5bd; --line:#3c4147; --primary:#8bb8f4; --primary-hover:#acd0ff; --accent:#293a51; --error:#ff9ba3; --success:#88d4af; --backdrop:rgba(0,0,0,.64); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-width:0; letter-spacing:0; }
body { margin:0; min-width:0; color:var(--text); background:var(--page); font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:not-allowed; opacity:.5; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
a { color:var(--primary); text-decoration:none; }
h1,h2,h3,p { margin:0; }
.topbar { background:var(--surface); border-bottom:1px solid var(--line); }
.topbar-inner { width:min(1180px,100%); min-height:74px; margin:auto; padding:12px 28px; display:flex; align-items:center; gap:26px; }
.back-link { display:inline-flex; gap:9px; align-items:center; color:var(--muted); white-space:nowrap; min-height:44px; }
.back-link span:first-child { font-size:22px; line-height:1; }
h1 { font-size:19px; line-height:1.3; font-weight:700; }
.theme-control { margin-left:auto; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.theme-control select { min-height:36px; width:114px; padding:5px 9px; font-size:12px; }
.workspace { width:min(1180px,100%); margin:auto; padding:24px 28px max(24px,env(safe-area-inset-bottom)); }
.mode-nav { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.mode-nav button { border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); padding:9px 12px; min-height:43px; white-space:nowrap; flex-shrink:0; }
.mode-nav button:hover { color:var(--text); background:var(--surface); }
.mode-nav button[aria-pressed="true"] { color:var(--primary); border-color:var(--line); background:var(--surface); font-weight:650; }
.service-status { min-height:48px; padding:12px 0; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.service-status[data-state="error"] { color:var(--error); }
.service-status[data-state="ready"] { color:var(--success); }
.service-status button,.text-button { background:transparent; border:0; color:var(--primary); padding:6px 8px; min-height:36px; flex-shrink:0; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 292px; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.files-section { min-width:0; padding:25px 28px 27px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:36px; }
h2 { font-size:17px; line-height:1.4; font-weight:650; }
.mode-note { color:var(--muted); font-size:13px; margin-top:5px; min-height:42px; }
.dropzone { border:1px dashed #aeb8c3; border-radius:8px; min-height:230px; margin:18px 0 14px; padding:24px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; background:var(--soft); transition:background .15s,border-color .15s; }
.dropzone.drag-active { border-color:var(--primary); background:var(--accent); }
.dropzone[data-disabled="true"] { opacity:.6; }
.file-symbol { display:flex; justify-content:center; align-items:center; width:39px; height:48px; border:1.5px solid var(--line); border-radius:5px; font-size:14px; font-weight:750; color:var(--primary); background:var(--surface); }
.dropzone>p { font-size:15px; font-weight:550; }
.file-hint { color:var(--muted); font-size:12px; }
.primary-button,.secondary-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:6px; border:1px solid var(--line); font-weight:600; }
.primary-button { color:#fff; background:#2465ba; border-color:#2465ba; }
.primary-button:hover:not(:disabled) { background:#174f9b; border-color:#174f9b; }
html[data-theme="dark"] .primary-button { background:#3879cc; border-color:#3879cc; }
html[data-theme="dark"] .primary-button:hover:not(:disabled) { background:#4589df; }
.secondary-button { color:var(--text); background:var(--surface); }
.secondary-button:hover:not(:disabled) { background:var(--soft); border-color:var(--muted); }
.file-summary { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-top:20px; font-size:12px; color:var(--muted); }
.file-list { list-style:none; padding:0; margin:8px 0 0; }
.file-row { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:13px 0; min-width:0; }
.file-index { color:var(--muted); font-size:12px; width:21px; flex-shrink:0; text-align:center; }
.file-info { min-width:0; flex:1; }
.file-name { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.file-size { font-size:11px; color:var(--muted); }
.file-actions { display:flex; gap:3px; flex-shrink:0; }
.icon-button { width:36px; min-height:40px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:19px; line-height:1; }
.icon-button:hover:not(:disabled) { color:var(--text); background:var(--soft); }
.privacy-note { font-size:12px; color:var(--muted); margin-top:18px; line-height:1.7; }
.options-section { min-width:0; padding:28px 0 28px 26px; border-left:1px solid var(--line); }
.options-section>h2 { margin-bottom:22px; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; font-size:13px; font-weight:550; }
input:not([type="range"]),select { width:100%; min-width:0; min-height:43px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); padding:9px 11px; font-weight:400; }
input::placeholder { color:var(--muted); opacity:.9; }
input[type="range"] { width:100%; min-height:25px; margin:0; accent-color:#2465ba; }
.field-label { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field-label output { color:var(--muted); font-size:12px; }
.field-help { font-size:12px; line-height:1.6; font-weight:400; color:var(--muted); }
.default-options { color:var(--muted); font-size:13px; margin-bottom:24px; }
.conversion-warning { color:var(--muted); padding-left:11px; border-left:2px solid var(--line); margin:4px 0 20px; font-size:12px; line-height:1.75; }
.action-area { display:grid; gap:10px; margin-top:26px; }
.job-status { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.job-status h3 { font-size:14px; font-weight:650; }
.job-status p { margin-top:7px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.job-status[data-state="error"] h3 { color:var(--error); }
.job-status[data-state="success"] h3 { color:var(--success); }
.job-status .primary-button { width:100%; margin-top:16px; }
.inline-link { display:block; margin-top:12px; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
progress { width:100%; height:6px; margin-top:14px; accent-color:#2465ba; }
.page-footer { display:flex; justify-content:center; gap:10px; color:var(--muted); font-size:12px; padding-top:28px; }
.modal-backdrop { position:fixed; inset:0; z-index:20; padding:24px; background:var(--backdrop); display:flex; justify-content:center; align-items:center; }
.confirm-dialog { width:420px; max-width:100%; max-height:calc(100dvh - 48px); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px; box-shadow:0 18px 70px rgba(0,0,0,.2); }
.confirm-dialog p { color:var(--muted); font-size:13px; line-height:1.8; margin:14px 0 22px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
.noscript-note { margin:25px; color:var(--error); }
@media (max-width:800px) { .topbar-inner { padding-inline:20px; gap:18px; } .workspace { padding-inline:20px; } .editor-layout { grid-template-columns:minmax(0,1fr) 250px; } .files-section { padding-right:20px; } .options-section { padding-left:20px; } .file-actions { gap:0; } .icon-button { width:30px; } }
@media (max-width:620px) { .topbar-inner { gap:12px; padding:10px 16px; flex-wrap:wrap; min-height:66px; } .back-link { gap:5px; font-size:12px; } h1 { font-size:17px; } .theme-control>span { display:none; } .theme-control select { width:90px; padding-inline:5px; } .workspace { padding:12px 16px max(24px,env(safe-area-inset-bottom)); } .mode-nav { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding-bottom:12px; scrollbar-width:thin; } .mode-nav button { min-height:42px; padding-inline:11px; font-size:13px; } .service-status { align-items:flex-start; font-size:12px; gap:8px; } .service-status button { padding:0 3px; min-height:22px; } .editor-layout { display:block; } .files-section { padding:20px 0 22px; } .mode-note { min-height:0; } .dropzone { min-height:210px; margin-top:18px; } .options-section { border-left:0; border-top:1px solid var(--line); padding:22px 0; } .options-section>h2 { margin-bottom:18px; } .file-row { gap:6px; } .icon-button { width:34px; min-height:44px; } .action-area { margin-top:20px; } .page-footer { padding-top:20px; } .confirm-dialog { padding:22px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }