*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333}#root{min-height:100vh}.granular-highlight-renderer{background-color:#fff;border-radius:8px;padding:20px;margin:20px 0;box-shadow:0 2px 8px #0000001a;border:1px solid #e0e0e0}.renderer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #f0f0f0}.renderer-header h3{color:#2c3e50;font-size:18px;font-weight:600}.version-badge{background-color:#3498db;color:#fff;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:700}.text-comparison-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}.text-column{background-color:#fafafa;border-radius:6px;padding:15px;border:1px solid #e8e8e8}.text-column h4{color:#34495e;font-size:14px;font-weight:600;margin-bottom:10px;padding:5px 10px;background-color:#ecf0f1;border-radius:4px;text-align:center}.text-content{max-height:400px;overflow-y:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:1.6}.highlighted-text-container{padding:10px}.text-line{margin:2px 0;min-height:20px}.normal-text{color:#2c3e50}.text-content-fallback{padding:10px;color:#7f8c8d;font-style:italic;background-color:#f8f9fa;border-radius:4px;text-align:center}.highlighted-segment{display:inline-block;transition:all .2s ease;cursor:help}.highlighted-segment:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.word-diff-highlight{background-color:#ffe6e6!important;color:#c00!important;padding:1px 3px!important;border-radius:3px!important;font-weight:700!important;border:1px solid #ff9999!important}.sentence-diff-highlight{background-color:#ffe6e6!important;color:#c00!important;padding:4px 6px!important;border-radius:4px!important;border-left:3px solid #ff4444!important;margin:4px 0!important;display:block!important}.paragraph-diff-highlight{background-color:#e6ffe6!important;color:#060!important;padding:8px 12px!important;border-radius:6px!important;border-left:4px solid #44ff44!important;margin:8px 0!important;display:block!important}.info-panels{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:20px}.left-panel,.right-panel{background-color:#f8f9fa;border-radius:6px;padding:15px;border:1px solid #e9ecef}.diff-details-container h4{color:#2c3e50;font-size:16px;margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.no-diffs{text-align:center;color:#6c757d;font-style:italic;padding:20px}.diff-detail-item{background-color:#fff;border-radius:6px;padding:12px;margin-bottom:10px;border:1px solid #e9ecef;transition:box-shadow .2s ease}.diff-detail-item:hover{box-shadow:0 2px 4px #0000001a}.diff-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.diff-type-badge{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase}.diff-type-badge.addition{background-color:#d4edda;color:#155724}.diff-type-badge.deletion{background-color:#f8d7da;color:#721c24}.diff-type-badge.modification{background-color:#fff3cd;color:#856404}.diff-position{color:#6c757d;font-size:12px}.highlight-level-badge{padding:2px 6px;border-radius:10px;font-size:10px;font-weight:700}.highlight-level-badge.word{background-color:#ffe6e6;color:#c00}.highlight-level-badge.sentence{background-color:#ffe6e6;color:#c00;border-left:2px solid #ff4444}.highlight-level-badge.paragraph{background-color:#e6ffe6;color:#060;border-left:2px solid #44ff44}.diff-content{font-family:Consolas,Monaco,Courier New,monospace;font-size:12px;line-height:1.4}.modification-display{background-color:#f8f9fa;border-radius:4px;padding:8px}.original-content,.modified-content{margin:4px 0}.content-label{font-weight:700;color:#495057;margin-right:8px}.content-text{background-color:#fff;padding:2px 6px;border-radius:3px;border:1px solid #dee2e6}.simple-content{padding:4px;background-color:#f8f9fa;border-radius:3px}.highlight-statistics h4{color:#2c3e50;font-size:16px;margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.stats-grid{display:flex;flex-direction:column;gap:15px}.stat-group h5{color:#495057;font-size:13px;margin-bottom:8px;font-weight:600}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background-color:#fff;border-radius:4px;border:1px solid #e9ecef;margin-bottom:4px}.stat-label{font-size:12px;color:#6c757d}.stat-value{font-weight:700;color:#2c3e50;background-color:#e9ecef;padding:2px 6px;border-radius:10px;font-size:11px}.stat-item.word-level .stat-value,.stat-item.sentence-level .stat-value{background-color:#ffe6e6;color:#c00}.stat-item.paragraph-level .stat-value{background-color:#e6ffe6;color:#060}.stat-item.addition .stat-value{background-color:#d4edda;color:#155724}.stat-item.deletion .stat-value{background-color:#f8d7da;color:#721c24}.stat-item.modification .stat-value{background-color:#fff3cd;color:#856404}.highlight-legend h4{color:#2c3e50;font-size:16px;margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.legend-items{display:flex;flex-direction:column;gap:10px}.legend-item{display:flex;align-items:center;gap:10px;padding:8px;background-color:#fff;border-radius:4px;border:1px solid #e9ecef}.legend-sample{padding:4px 8px;border-radius:3px;font-size:11px;font-family:Consolas,Monaco,Courier New,monospace;white-space:nowrap}.word-sample{background-color:#ffe6e6;color:#c00;border:1px solid #ff9999;font-weight:700}.sentence-sample{background-color:#ffe6e6;color:#c00;border-left:3px solid #ff4444;padding-left:8px}.paragraph-sample{background-color:#e6ffe6;color:#060;border-left:4px solid #44ff44;padding-left:8px}.legend-description{font-size:12px;color:#6c757d}.word-analysis{margin-top:12px;padding:10px;background-color:#f1f3f4;border-radius:6px;border-left:3px solid #4285f4}.word-analysis-header{margin-bottom:8px}.analysis-label{font-size:12px;font-weight:700;color:#1a73e8}.word-changes{display:flex;flex-direction:column;gap:6px}.word-change-group{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.change-type{font-size:11px;font-weight:700;min-width:60px;padding:2px 6px;border-radius:10px;text-align:center}.change-type.added{background-color:#e8f5e8;color:#2e7d32}.change-type.removed{background-color:#ffebee;color:#c62828}.change-type.modified{background-color:#fff3e0;color:#ef6c00}.word-list{display:flex;flex-wrap:wrap;gap:4px;flex:1}.word-item{font-size:11px;padding:2px 6px;border-radius:8px;font-family:Consolas,Monaco,Courier New,monospace;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}.word-item.added{background-color:#c8e6c9;color:#1b5e20;border:1px solid #a5d6a7}.word-item.removed{background-color:#ffcdd2;color:#b71c1c;border:1px solid #ef9a9a;text-decoration:line-through}.word-item.modified{background-color:#ffe0b2;color:#e65100;border:1px solid #ffcc02}.similarity-score{font-size:9px;color:#666;font-weight:400;background-color:#ffffffb3;padding:1px 3px;border-radius:6px}@media (max-width: 768px){.text-comparison-container,.info-panels{grid-template-columns:1fr}.diff-header{flex-wrap:wrap;gap:5px}.stats-grid{gap:10px}.word-change-group{flex-direction:column;align-items:flex-start;gap:4px}.change-type{min-width:auto}}