:root{--brand: #4f46e5;--brand-weak: #eef0ff;--brand-dark: #3730a3;--bg: #f6f7fb;--card: #ffffff;--text: #1a1d26;--muted: #6b7280;--line: #e8eaf0;--ok: #10b981;--warn: #f59e0b;--err: #ef4444;--radius: 14px;--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:20;background:#ffffffd9;backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}.topbar-inner{max-width:1180px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:28px}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:.2px;cursor:pointer;user-select:none}.logo-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800;box-shadow:0 4px 10px #4f46e559}.logo-sub{font-size:12px;color:var(--muted);font-weight:500;border-left:1px solid var(--line);padding-left:10px;margin-left:2px}.nav{display:flex;gap:2px;margin-left:auto}.nav a{padding:6px 12px;border-radius:8px;color:var(--muted);font-weight:500;transition:all .15s}.nav a:hover{color:var(--text);background:#f1f2f7}.nav a.active{color:var(--brand);background:var(--brand-weak)}.main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:28px 24px 72px}.footer{border-top:1px solid var(--line);padding:20px 24px;color:var(--muted);font-size:12.5px;text-align:center;background:#fff}.hero{padding:30px 30px 26px;border-radius:20px;background:linear-gradient(135deg,#6366f1,#4f46e5 45%,#4338ca);color:#fff;box-shadow:0 12px 32px #4f46e540;margin-bottom:26px}.hero h1{margin:0 0 8px;font-size:26px;letter-spacing:.3px}.hero p{margin:0;opacity:.9;font-size:14.5px;max-width:620px}.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.hero-badge{background:#ffffff29;border:1px solid rgba(255,255,255,.22);padding:4px 11px;border-radius:999px;font-size:12.5px}.cat{margin-bottom:30px}.cat-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.cat-head h2{margin:0;font-size:17px}.cat-head span{color:var(--muted);font-size:13px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}.tool-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;transition:all .18s ease;box-shadow:var(--shadow-sm);display:flex;gap:13px;align-items:flex-start}.tool-card:hover{transform:translateY(-2px);border-color:#cdd0ee;box-shadow:var(--shadow)}.tool-icon{flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:var(--brand-weak)}.tool-name{font-weight:650;margin-bottom:3px}.tool-desc{color:var(--muted);font-size:12.5px;line-height:1.55}.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;cursor:pointer;margin-bottom:14px}.back:hover{color:var(--brand)}.tool-head{margin-bottom:20px}.tool-head h1{margin:0 0 6px;font-size:22px}.tool-head p{margin:0;color:var(--muted)}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);margin-bottom:16px}.panel-title{font-weight:650;margin-bottom:14px;display:flex;align-items:center;gap:8px}.hint{color:var(--muted);font-size:12.5px;margin-top:10px}.drop{border:1.5px dashed #cfd3e4;border-radius:var(--radius);padding:30px 20px;text-align:center;cursor:pointer;transition:all .15s;background:#fbfbfe}.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-weak)}.drop-icon{font-size:26px;margin-bottom:6px}.drop-main{font-weight:600}.drop-sub{color:var(--muted);font-size:12.5px}.file-list{display:flex;flex-direction:column;gap:8px}.file-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.file-item.sortable{cursor:grab}.file-idx{width:22px;height:22px;border-radius:6px;background:var(--brand-weak);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto}.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{color:var(--muted);font-size:12.5px;flex:0 0 auto}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.page-cell{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative;cursor:pointer;transition:all .15s}.page-cell:hover{border-color:var(--brand)}.page-cell.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-weak)}.page-cell canvas,.page-cell img{display:block;width:100%;height:auto;background:#fff}.page-no{text-align:center;font-size:12px;color:var(--muted);padding:5px;border-top:1px solid var(--line)}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.row.tight{gap:8px}.btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--text);padding:8px 16px;border-radius:9px;font-size:13.5px;font-weight:550;font-family:inherit;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}.btn:hover:not(:disabled){border-color:#c9cce0;background:#fbfbfe}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px #4f46e540}.btn.primary:hover:not(:disabled){background:var(--brand-dark);border-color:var(--brand-dark)}.btn.ghost-danger{color:var(--err);border-color:#f6d5d5}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.small{padding:5px 10px;font-size:12.5px}.btn.danger{color:var(--err)}input[type=text],input[type=number],textarea,select{font-family:inherit;font-size:13.5px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;width:100%}input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)}textarea{resize:vertical;line-height:1.7}.field{display:flex;flex-direction:column;gap:6px}.field>label{font-size:12.5px;color:var(--muted);font-weight:550}.field-inline{display:flex;align-items:center;gap:8px}input[type=range]{width:100%;accent-color:var(--brand)}input[type=color]{width:42px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13.5px}.seg{display:inline-flex;padding:3px;background:#f1f2f7;border-radius:9px;gap:2px}.seg button{appearance:none;border:0;background:transparent;font:inherit;font-size:13px;padding:5px 13px;border-radius:7px;cursor:pointer;color:var(--muted)}.seg button.on{background:#fff;color:var(--brand);font-weight:600;box-shadow:var(--shadow-sm)}.alert{padding:11px 14px;border-radius:10px;font-size:13.5px;border:1px solid}.alert.err{background:#fef2f2;border-color:#fcd2d2;color:#b42318}.alert.ok{background:#ecfdf5;border-color:#c6f0dd;color:#07714e}.empty{text-align:center;color:var(--muted);padding:26px 10px;font-size:13.5px}.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}.progress{height:7px;border-radius:999px;background:#eef0f6;overflow:hidden}.progress>div{height:100%;background:var(--brand);border-radius:999px;transition:width .25s}.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.stat{background:#fbfbfe;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.stat .k{color:var(--muted);font-size:12px}.stat .v{font-weight:650;font-size:15px}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 720px){.split{grid-template-columns:1fr}.topbar-inner{padding:0 14px;gap:12px}.nav{overflow-x:auto}.logo-sub{display:none}.main{padding:18px 14px 56px}}.diff-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Courier New,monospace;font-size:12.5px;line-height:1.75}.diff-row{display:flex;align-items:flex-start}.diff-g{flex:0 0 46px;text-align:right;padding:1px 8px;color:#aab0bd;border-right:1px solid var(--line);user-select:none;font-size:11.5px}.diff-t{flex:1;padding:1px 10px;white-space:pre-wrap;word-break:break-all;min-width:0}.diff-row.del{background:#fef3f2}.diff-row.del .diff-t{color:#912018}.diff-row.add{background:#ecfdf3}.diff-row.add .diff-t{color:#05603a}.diff-row.hunk{background:#eff4ff;color:#3538cd}.diff-t .hit{background:#fecaca;border-radius:3px;font-weight:700;color:#912018;padding:0 1px}.diff-row.add .diff-t .hit{background:#a7f3d0;color:#05603a}.diff-row.same .diff-t{color:#475467}.preview-box{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:repeating-conic-gradient(#f4f5f8 0% 25%,#fff 0% 50%) 50% / 18px 18px;display:grid;place-items:center;min-height:180px}.preview-box img,.preview-box canvas{max-width:100%;border-radius:8px;box-shadow:var(--shadow-sm)}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}.table th{color:var(--muted);font-weight:550;font-size:12.5px}