*{box-sizing:border-box}body{color:#e0e0e0;background:#1a1a2e;min-height:100vh;margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:block}.app{max-width:1400px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:24px}.header h1{color:#fff;margin:0 0 4px;font-size:1.6em}.header p{color:#888;margin:0;font-size:.9em}.mode-tabs{justify-content:center;gap:8px;margin-bottom:24px;display:flex}.mode-tab{color:#aaa;cursor:pointer;background:#16213e;border:1px solid #333;border-radius:6px;padding:8px 24px;font-size:.9em;transition:all .2s}.mode-tab:hover{color:#ccc;border-color:#4a90d9}.mode-tab.active{color:#fff;background:#0f3460;border-color:#4a90d9}.upload-section{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.upload-section.single{grid-template-columns:1fr;max-width:500px;margin-left:auto;margin-right:auto}.upload-box{text-align:center;cursor:pointer;background:#16213e;border:2px dashed #333;border-radius:8px;padding:24px;transition:all .2s;position:relative}.upload-box:hover,.upload-box.dragover{background:#1a2744;border-color:#4a90d9}.upload-box.loaded{border-style:solid;border-color:#2ecc71}.upload-box .label{color:#4a90d9;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:.85em;font-weight:600}.upload-box .filename{color:#2ecc71;word-break:break-all;margin-top:8px;font-size:.9em}.upload-box .hint{color:#666;font-size:.8em}.upload-box input[type=file]{display:none}.compare-btn{color:#fff;cursor:pointer;background:#0f3460;border:1px solid #4a90d9;border-radius:6px;margin:0 auto 24px;padding:10px 40px;font-size:1em;transition:all .2s;display:block}.compare-btn:hover:not(:disabled){background:#1a4a7a}.compare-btn:disabled{opacity:.4;cursor:not-allowed}.summary{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:16px;display:flex}.summary .stat{border-radius:6px;padding:8px 16px;font-size:.85em;font-weight:600}.stat.modified{color:#f1c40f;background:#2d2a00;border:1px solid #f1c40f33}.stat.added{color:#2ecc71;background:#002d0a;border:1px solid #2ecc7133}.stat.removed{color:#e74c3c;background:#2d0000;border:1px solid #e74c3c33}.stat.unchanged{color:#888;background:#1a1a2e;border:1px solid #33333380}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;display:flex}.toolbar input[type=text]{color:#e0e0e0;background:#16213e;border:1px solid #333;border-radius:6px;flex:1;min-width:200px;padding:8px 12px;font-size:.85em}.toolbar input[type=text]::placeholder{color:#555}.filter-btn{color:#aaa;cursor:pointer;background:#16213e;border:1px solid #333;border-radius:6px;padding:6px 14px;font-size:.8em;transition:all .2s}.filter-btn:hover{border-color:#4a90d9}.filter-btn.active{color:#fff;background:#0f3460;border-color:#4a90d9}.expand-all-btn{color:#aaa;cursor:pointer;background:#16213e;border:1px solid #333;border-radius:6px;margin-left:auto;padding:6px 14px;font-size:.8em}.expand-all-btn:hover{color:#ccc;border-color:#4a90d9}.diff-list{flex-direction:column;gap:8px;display:flex}.diff-item{background:#16213e;border:1px solid #2a2a3e;border-radius:6px;overflow:hidden}.diff-item-header{cursor:pointer;align-items:center;gap:10px;padding:10px 14px;transition:background .15s;display:flex}.diff-item-header:hover{background:#1a2744}.diff-item-header .arrow{color:#555;flex-shrink:0;font-size:.75em;transition:transform .2s}.diff-item-header .arrow.open{transform:rotate(90deg)}.diff-item-header .badge{text-transform:uppercase;border-radius:4px;flex-shrink:0;padding:2px 8px;font-size:.7em;font-weight:600}.badge.modified{color:#f1c40f;background:#2d2a00}.badge.added{color:#2ecc71;background:#002d0a}.badge.removed{color:#e74c3c;background:#2d0000}.diff-item-header .path{color:#ccc;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.85em;overflow:hidden}.diff-item-header .field-tags{flex-shrink:0;gap:4px;display:flex}.field-tag{color:#4a90d9;background:#0f3460;border-radius:3px;padding:2px 6px;font-size:.65em}.field-tag.structural{color:#666;background:#1a1a2e;border:1px solid #333}.structural-info{color:#777;padding:4px 0;font-size:.82em}.structural-info strong{color:#aaa}.diff-body{border-top:1px solid #2a2a3e;padding:12px}.field-diff{margin-bottom:16px}.field-diff:last-child{margin-bottom:0}.field-diff-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.field-diff-label{color:#4a90d9;text-transform:uppercase;letter-spacing:.5px;font-size:.75em;font-weight:600}.field-diff-actions{gap:6px;display:flex}.copy-btn{color:#aaa;cursor:pointer;white-space:nowrap;background:#0d1117;border:1px solid #333;border-radius:20px;padding:5px 12px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.72em;transition:all .2s}.copy-btn:hover{color:#e0e0e0;background:#16213e;border-color:#4a90d9}.copy-btn.copied{color:#2ecc71;background:#0d2818;border-color:#2ecc71}.diff-code{background:#0d1117;border-radius:4px;padding:8px 0;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.78em;line-height:1.5;overflow-x:auto}.diff-line{white-space:pre;min-height:1.5em;padding:0 12px}.diff-line.added{color:#7ee787;background:#0d2818}.diff-line.removed{color:#f97583;background:#2d0000}.diff-line.context{color:#8b949e}.syn-keyword{color:#ff7b72}.syn-string{color:#a5d6ff}.syn-comment{color:#8b949e;font-style:italic}.syn-number{color:#79c0ff}.diff-line.added .syn-keyword{color:#ffab70}.diff-line.added .syn-string{color:#b5e8b0}.diff-line.added .syn-comment{color:#6a9955;font-style:italic}.diff-line.added .syn-number{color:#b5cea8}.diff-line.removed .syn-keyword{color:#ffb3b3}.diff-line.removed .syn-string{color:#ce9178}.diff-line.removed .syn-comment{color:#9e6666;font-style:italic}.diff-line.removed .syn-number{color:#d4a0a0}.doc-actions{justify-content:center;gap:8px;margin-bottom:16px;display:flex}.doc-btn{color:#fff;cursor:pointer;background:#0f3460;border:1px solid #4a90d9;border-radius:6px;padding:8px 20px;font-size:.85em;transition:all .2s}.doc-btn:hover{background:#1a4a7a}.doc-preview{white-space:pre-wrap;color:#c9d1d9;background:#0d1117;border:1px solid #2a2a3e;border-radius:6px;max-height:70vh;padding:16px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.78em;line-height:1.6;overflow:auto}.empty-state{text-align:center;color:#555;padding:40px}.matching-info{text-align:center;color:#666;margin-bottom:16px;font-size:.8em}.matching-info span{color:#4a90d9}.no-results{text-align:center;color:#555;padding:20px;font-size:.9em}.file-selector{text-align:center;background:#16213e;border:2px dashed #333;border-radius:8px;padding:16px;transition:all .2s}.file-selector:hover,.file-selector.dragover{background:#1a2744;border-color:#4a90d9}.file-selector.loaded{border-style:solid;border-color:#2ecc71}.file-selector .label{color:#4a90d9;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-size:.85em;font-weight:600}.file-selector .version-chips{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:4px;display:flex}.file-selector .version-chip{color:#aaa;cursor:pointer;background:#0d1117;border:1px solid #333;border-radius:20px;padding:6px 14px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.82em;transition:all .2s}.file-selector .version-chip:hover:not(:disabled){color:#e0e0e0;background:#16213e;border-color:#4a90d9}.file-selector .version-chip.active{color:#2ecc71;background:#0d2818;border-color:#2ecc71}.file-selector .version-chip:disabled{opacity:.4;cursor:not-allowed}.file-selector .or-divider{color:#444;letter-spacing:1px;margin:6px 0;font-size:.7em}.file-selector .upload-area{cursor:pointer;border:1px dashed #333;border-radius:6px;padding:12px;transition:all .2s}.file-selector .upload-area:hover{background:#0d1117;border-color:#4a90d9}.file-selector .filename{color:#2ecc71;word-break:break-all;font-size:.9em}.file-selector .hint{color:#666;font-size:.8em}.browse-view{max-width:1000px;margin:0 auto}.tree-container{background:#16213e;border:1px solid #2a2a3e;border-radius:6px;overflow:hidden}.tree-node-header{cursor:pointer;border-bottom:1px solid #1a1a2e;align-items:center;gap:8px;padding:6px 10px;transition:background .12s;display:flex}.tree-node-header:hover{background:#1a2744}.tree-node-header.has-code{color:#e0e0e0}.tree-arrow{color:#555;flex-shrink:0;width:10px;font-size:.65em;transition:transform .2s}.tree-arrow.open{transform:rotate(90deg)}.tree-arrow.invisible{visibility:hidden}.tree-node-name{color:#ccc;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.85em}.tree-node-header.has-code .tree-node-name{color:#4a90d9}.tree-node-tags{gap:4px;margin-left:auto;display:flex}.field-tag.clickable{cursor:pointer;transition:all .2s}.field-tag.clickable:hover{color:#7ab8ff;background:#1a4a7a}.field-tag.clickable.active{color:#2ecc71;background:#0d2818;border:1px solid #2ecc7144}.tree-node-code{background:#111827;border-bottom:1px solid #2a2a3e;padding:8px 12px 12px}
