:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--bg-color: #0f0f23;--bg-secondary: #1a1a2e;--text-primary: #f1f5f9;--text-secondary: #94a3b8}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header.compact{text-align:left;padding:.75rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.header.compact h1{font-size:1.25rem;font-weight:700}.new-analysis-btn{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.8125rem;cursor:pointer;transition:all .2s}.new-analysis-btn:hover{background-color:var(--border-color);border-color:var(--text-secondary)}@media(max-width:640px){.header h1{font-size:2rem}.subtitle{font-size:1rem}.header.compact{padding:.625rem 1rem}.header.compact h1{font-size:1.125rem}}@media(max-width:640px){.upload-area{padding:2rem 1rem}.upload-icon{width:48px;height:48px}.upload-text{font-size:1rem}}.stat-card{background-color:var(--bg-secondary);border-radius:var(--radius-sm);padding:.75rem 1rem;border-left:3px solid;transition:transform .2s ease,box-shadow .2s ease}@media(hover:hover){.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}.stat-card h4{margin:0 0 .5rem;font-size:.9375rem;font-weight:600;color:var(--text-primary)}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0;border-bottom:1px solid var(--border-color);font-size:.8125rem}.stat-label{color:var(--text-secondary)}.table-container.scrollable{max-height:220px;overflow-y:auto}.table-container.scrollable .data-table thead{position:sticky;top:0;z-index:1}.data-table th,.data-table td{padding:.75rem 1rem;text-align:left}.data-table .rank{width:50px;color:var(--text-muted);font-weight:600}@media(max-width:640px){.table-container.scrollable{max-height:200px}.data-table{font-size:.875rem}.data-table th,.data-table td{padding:.625rem .75rem}}.search-container{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.search-input{flex:1;padding:.75rem 1rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.9375rem;transition:border-color .2s}.search-input:focus{outline:none;border-color:var(--primary-color)}.search-input::placeholder{color:var(--text-muted)}.search-count{color:var(--text-muted);font-size:.875rem;white-space:nowrap}.table-container.scrollable{max-height:500px;overflow-y:auto}.table-container.scrollable::-webkit-scrollbar{width:8px;height:8px}.table-container.scrollable::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:4px}.table-container.scrollable::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-color) 0%,var(--primary-hover) 100%);border-radius:4px;border:2px solid var(--bg-tertiary)}.table-container.scrollable::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--primary-light) 0%,var(--primary-color) 100%)}.table-container.scrollable{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--bg-tertiary)}.table-container.scrollable thead{position:sticky;top:0;z-index:1}.data-table.users-table th,.data-table.users-table td{padding:.75rem 1rem}.data-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s}.data-table th.sortable:hover{color:var(--text-primary)}.sort-indicator{color:var(--text-muted);font-size:.75rem;margin-left:.25rem}.sort-indicator.active{color:var(--primary-light)}.good-ratio{color:var(--upload-color)}.bad-ratio{color:var(--error-color)}@media(max-width:768px){.search-container{flex-direction:column;align-items:stretch}.search-count{text-align:right}.table-container.scrollable{max-height:400px}.data-table.users-table{font-size:.8125rem}.data-table.users-table th,.data-table.users-table td{padding:.625rem .5rem}}.states-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}.state-row{background-color:var(--bg-secondary);border-radius:var(--radius-sm);padding:1rem;border-left:3px solid var(--primary-light);display:flex;justify-content:space-between;align-items:center;transition:transform .2s ease,box-shadow .2s ease}@media(hover:hover){.state-row:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}.state-label{font-weight:500;color:var(--text-primary)}.state-values{display:flex;align-items:center;gap:.5rem;font-family:SF Mono,Monaco,monospace}.state-value{font-weight:600}.state-value.downloads{color:var(--download-color)}.state-value.uploads{color:var(--upload-color)}.state-divider{color:var(--text-muted)}@media(max-width:640px){.states-grid{grid-template-columns:1fr}.state-row{padding:.875rem}}.extensions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.extension-card{background-color:var(--bg-secondary);border-radius:var(--radius-sm);padding:1rem;border-left:3px solid var(--primary-light);transition:transform .2s ease,box-shadow .2s ease}@media(hover:hover){.extension-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}.extension-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.extension-name{font-family:SF Mono,Monaco,monospace;font-weight:600;color:var(--primary-light);font-size:.9375rem}.extension-count{font-family:SF Mono,Monaco,monospace;color:var(--text-secondary);font-size:.875rem}.extension-bar-container{height:6px;background-color:var(--bg-tertiary);border-radius:3px;overflow:hidden;margin-bottom:.5rem}.extension-bar{height:100%;background:linear-gradient(90deg,var(--primary-color) 0%,var(--primary-light) 100%);border-radius:3px;transition:width .3s ease}.extension-details{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem}.extension-percentage{color:var(--text-muted)}.extension-size{font-family:SF Mono,Monaco,monospace;color:var(--text-secondary)}@media(max-width:640px){.extensions-grid{grid-template-columns:1fr}}.results{animation:fadeIn .3s ease;margin-top:1em}.global-stats-compact{margin-bottom:1.5rem}.global-stats-compact .stats-section>h3{display:none}.global-stats-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:stretch}.ratio-badge{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);border-radius:var(--radius-sm);padding:.75rem 1.25rem;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100px;transition:transform .2s ease,box-shadow .2s ease}@media(hover:hover){.ratio-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}.ratio-badge-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:#fffc;margin-bottom:.25rem}.ratio-badge-value{font-size:1.5rem;font-weight:700;color:#fff;font-family:SF Mono,Monaco,monospace}.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem;margin-bottom:1.5rem}.stats-row .stats-section{margin-bottom:0}.file-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.file-stat-card{background-color:var(--bg-secondary);border-radius:var(--radius-sm);padding:1rem;display:flex;flex-direction:column;gap:.25rem;border-left:3px solid var(--primary-light);transition:transform .2s ease,box-shadow .2s ease}@media(hover:hover){.file-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}.file-stat-label{color:var(--text-secondary);font-size:.8125rem}.file-stat-value{font-family:SF Mono,Monaco,monospace;font-size:1.125rem;font-weight:600;color:var(--primary-light)}@media(max-width:768px){.global-stats-grid{grid-template-columns:1fr}.ratio-badge{flex-direction:row;gap:.75rem;padding:.625rem 1rem}.ratio-badge-value{font-size:1.25rem}.stats-row{grid-template-columns:1fr}.file-stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.file-stats-grid{grid-template-columns:1fr}}*{box-sizing:border-box}:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--primary-light: #818cf8;--bg-color: #0f0f23;--bg-secondary: #1a1a2e;--bg-tertiary: #252542;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border-color: #334155;--success-color: #22c55e;--warning-color: #f59e0b;--error-color: #ef4444;--download-color: #3b82f6;--upload-color: #22c55e;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius: 12px;--radius-sm: 8px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.6;min-height:100vh}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;padding:3rem 1.5rem 2rem;background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-color) 100%)}.header h1{margin:0;font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.subtitle{margin:.75rem 0 0;color:var(--text-secondary);font-size:1.125rem}.main{flex:1;padding:0 1.5rem 3rem;max-width:1200px;margin:0 auto;width:100%}.upload-area{width:100%;max-width:600px;margin:2rem auto;padding:3rem 2rem;border:2px dashed var(--border-color);border-radius:var(--radius);background-color:var(--bg-secondary);cursor:pointer;transition:all .2s ease;display:block;text-align:center;font-family:inherit;color:inherit}.upload-area:hover{border-color:var(--primary-color);background-color:var(--bg-tertiary)}.upload-area.dragging{border-color:var(--primary-color);background-color:#6366f11a}.upload-content{pointer-events:none}.upload-icon{width:64px;height:64px;margin-bottom:1.5rem;color:var(--primary-color)}.upload-text{margin:0 0 .5rem;font-size:1.25rem;color:var(--text-primary)}.upload-text strong{color:var(--primary-light)}.upload-hint{margin:0;color:var(--text-muted);font-size:.875rem}.file-input{display:none}.loading{text-align:center;padding:4rem 2rem}.spinner{width:48px;height:48px;margin:0 auto 1.5rem;border:4px solid var(--bg-tertiary);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:var(--text-secondary);margin:0}.error{text-align:center;padding:3rem 2rem;background-color:#ef44441a;border-radius:var(--radius);max-width:600px;margin:2rem auto}.error p{color:var(--error-color);margin:0 0 1.5rem}.error button{background-color:var(--error-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-size:1rem;cursor:pointer;transition:opacity .2s}.error button:hover{opacity:.9}.results{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.results-header{text-align:center;margin-bottom:2.5rem}.results-header h2{margin:0 0 .5rem;font-size:1.875rem;font-weight:700}.file-name{color:var(--text-muted);margin:0 0 1rem;font-size:.875rem}.analyze-new{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);padding:.625rem 1.25rem;border-radius:var(--radius-sm);font-size:.875rem;cursor:pointer;transition:all .2s}.analyze-new:hover{background-color:var(--border-color);border-color:var(--text-secondary)}.stats-section{margin-bottom:3.5rem}.stats-section h3{margin:0 0 1.25rem;font-size:1.25rem;font-weight:600;color:var(--text-primary);padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:1.5rem}.stat-card{background-color:var(--bg-secondary);border-radius:var(--radius);padding:1.5rem;border-left:4px solid}.stat-card.downloads{border-left-color:var(--download-color)}.stat-card.uploads{border-left-color:var(--upload-color)}.stat-card h4{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-color)}.stat-row:last-child{border-bottom:none}.stat-label{color:var(--text-secondary);font-size:.875rem}.stat-value{color:var(--text-primary);font-weight:500;font-family:SF Mono,Monaco,monospace}.ratio-card{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);border-radius:var(--radius);padding:1.5rem;display:flex;justify-content:space-between;align-items:center}.ratio-label{font-weight:500;color:#ffffffe6}.ratio-value{font-size:1.5rem;font-weight:700;color:#fff;font-family:SF Mono,Monaco,monospace}.table-container{overflow-x:auto;background-color:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border-color)}.data-table{width:100%;border-collapse:collapse;font-size:.9375rem}.data-table th,.data-table td{padding:.875rem 1rem;text-align:left}.data-table th{background-color:var(--bg-tertiary);font-weight:600;color:var(--text-secondary);font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em}.data-table th:first-child{border-radius:var(--radius-sm) 0 0 0}.data-table th:last-child{border-radius:0 var(--radius-sm) 0 0}.data-table tbody tr{border-bottom:1px solid var(--border-color);transition:background-color .15s}.data-table tbody tr:last-child{border-bottom:none}.data-table tbody tr:hover{background-color:var(--bg-tertiary)}.data-table .rank{width:60px;color:var(--text-muted);font-weight:600}.data-table .username{font-family:SF Mono,Monaco,monospace;color:var(--primary-light)}.data-table .number{text-align:right;font-family:SF Mono,Monaco,monospace;color:var(--text-secondary)}.footer{text-align:center;padding:1.5rem;color:var(--text-muted);font-size:.875rem;border-top:1px solid var(--border-color)}.footer p{margin:0}@media(max-width:640px){.header h1{font-size:2rem}.subtitle{font-size:1rem}.upload-area{padding:2rem 1rem}.upload-icon{width:48px;height:48px}.upload-text{font-size:1rem}.stats-grid{grid-template-columns:1fr}.data-table{font-size:.875rem}.data-table th,.data-table td{padding:.75rem .625rem}.ratio-card{flex-direction:column;gap:.5rem;text-align:center}}
