*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background:#fafafa}.app{min-height:100vh}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem 0}.header-content{max-width:1200px;margin:0 auto;padding:0 2rem}.header h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700}.tagline{font-size:1.1rem;opacity:.9;margin-bottom:2rem}.tabs{display:flex;gap:.5rem}.tab{background:#fff3;border:none;color:#fff;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.95rem}.tab:hover{background:#ffffff4d}.tab.active{background:#fff;color:#667eea}.demo-content{max-width:1200px;margin:0 auto;padding:2rem}.controls{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 10px #0000001a;margin-bottom:2rem}.control-group{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.toggle-btn{background:#e74c3c;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .2s ease}.toggle-btn.active{background:#27ae60}.toggle-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}button{background:#3498db;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease}button:hover:not(:disabled){background:#2980b9}button:disabled{opacity:.5;cursor:not-allowed}.stats{display:flex;gap:2rem;flex-wrap:wrap}.stat{text-align:center}.stat-value{display:block;font-size:2rem;font-weight:700;color:#2c3e50}.stat-label{display:block;font-size:.9rem;color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px}.playground{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 10px #0000001a;margin-bottom:2rem}.playground h2{color:#2c3e50;margin-bottom:1rem}.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0}.test-element{padding:1.5rem;border-radius:12px;border:2px solid #ecf0f1;transition:all .2s ease;position:relative;cursor:pointer;text-align:center}.test-element small{display:block;margin-top:.5rem;font-size:.8rem;opacity:.7}.test-element.working{border-color:#27ae60;background:#d5f4e6}.test-element.working:hover{transform:translateY(-2px);box-shadow:0 4px 12px #27ae6033}.test-element.broken{border-color:#e74c3c;background:#fdf2f2;color:#c0392b}.test-element.broken:hover{border-color:#c0392b}.test-element.semi-broken{border-color:#f39c12;background:#fef9e7;color:#d68910}.test-element.card{border-color:#9b59b6;background:#f4f1f8}.test-element.card .price{display:block;font-size:1.2rem;font-weight:700;color:#8e44ad;margin-top:.5rem}.test-element.interactive-looking{border-color:#34495e;background:#ecf0f1}.test-element .icon{font-size:1.5rem;margin-right:.5rem}.network-button{border-color:#16a085;background:#d1f2eb}.hotspots{margin-top:2rem;padding-top:2rem;border-top:1px solid #ecf0f1}.hotspots h3{color:#2c3e50;margin-bottom:1rem}.hotspots-list{display:flex;flex-direction:column;gap:.75rem}.hotspot{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#f8f9fa;border-radius:6px;border-left:3px solid #e74c3c}.selector{font-family:Monaco,Menlo,Ubuntu Mono,monospace;background:#2c3e50;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;flex:1}.count{background:#e74c3c;color:#fff;padding:.2rem .6rem;border-radius:12px;font-size:.8rem;font-weight:700}.text{font-style:italic;color:#7f8c8d;font-size:.9rem}.instructions{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 10px #0000001a}.instructions h2,.instructions h3{color:#2c3e50;margin-bottom:1rem}.instructions ol{padding-left:1.5rem;margin-bottom:2rem}.instructions li{margin-bottom:.5rem}.instructions pre{background:#2c3e50;color:#fff;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.9rem}.report-viewer{max-width:1200px;margin:0 auto;padding:2rem}.upload-section{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 10px #0000001a;margin-bottom:2rem;text-align:center}.upload-btn{background:#3498db;font-size:1.1rem;padding:1rem 2rem;margin-top:1rem}.error{background:#fee;border:1px solid #fcc;color:#c33;padding:1rem;border-radius:6px;margin-top:1rem}.report-content{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 10px #0000001a}.report-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.actions{display:flex;gap:.5rem}.summary-cards{display:flex;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}.summary-card{text-align:center;padding:1.5rem;background:#f8f9fa;border-radius:8px;flex:1;min-width:150px}.summary-value{display:block;font-size:2rem;font-weight:700;color:#2c3e50}.summary-label{display:block;font-size:.9rem;color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem}.report-details{margin-bottom:2rem;padding:1.5rem;background:#f8f9fa;border-radius:8px}.detail-row{display:flex;margin-bottom:.75rem;gap:1rem}.detail-label{font-weight:600;color:#2c3e50;min-width:120px}.detail-value a{color:#3498db;text-decoration:none}.detail-value a:hover{text-decoration:underline}.table-container{overflow-x:auto;margin-top:1rem}table{width:100%;border-collapse:collapse;margin-top:1rem}th,td{padding:.75rem;text-align:left;border-bottom:1px solid #ecf0f1}th{background:#f8f9fa;font-weight:600;color:#2c3e50}.selector-code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;background:#2c3e50;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem}.count-cell,.percentage-cell{font-weight:700;color:#e74c3c}.sample-text{font-style:italic;color:#7f8c8d}.events-section{margin-top:2rem;padding-top:2rem;border-top:1px solid #ecf0f1}.events-list{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.event{padding:1rem;background:#f8f9fa;border-radius:8px;border-left:3px solid #e74c3c}.event-selector code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;background:#2c3e50;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.8rem}.event-details{display:flex;gap:1rem;margin-top:.5rem;font-size:.9rem;color:#7f8c8d}.event-text{margin-top:.5rem;font-style:italic;color:#95a5a6}.events-note{margin-top:1rem;font-size:.9rem;color:#7f8c8d;text-align:center}.empty-state{text-align:center;padding:3rem;color:#7f8c8d}@media (max-width: 768px){.header-content{padding:0 1rem}.header h1{font-size:2rem}.demo-content,.report-viewer{padding:1rem}.controls,.playground,.instructions,.report-content{padding:1.5rem}.test-grid{grid-template-columns:1fr}.stats,.summary-cards{gap:1rem}.control-group{flex-direction:column;align-items:stretch}.report-header{flex-direction:column;align-items:stretch;text-align:center}.detail-row{flex-direction:column;gap:.25rem}.detail-label{min-width:auto;font-weight:700}.hotspot{flex-direction:column;align-items:stretch;gap:.5rem}.event-details{flex-direction:column;gap:.25rem}}