*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#000;color:#fff;min-height:100vh;overflow-x:hidden}.App{font-family:sans-serif;text-align:center}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:2rem 1rem;border-bottom:2px solid #333;box-shadow:0 4px 20px #00000080}.app-title{font-size:3rem;font-weight:800;color:#fff}.app-subtitle{font-size:1.2rem;color:#aaa;font-weight:300;letter-spacing:.5px}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:2rem}.mode-selector{text-align:center}.mode-title{color:#fff;margin-bottom:.5rem;font-size:1.3rem;font-weight:600}.mode-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.mode-btn{padding:.8rem 1.5rem;background:#000;color:#fff;border:2px solid #ff000063;border-radius:25px;cursor:pointer;transition:all .3s ease;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.mode-btn:hover{border-color:#ffd50094;transform:translateY(-1px);box-shadow:0 5px 15px #ffffff1a}.mode-btn.active{background:#000;border-color:#95ff00;color:#fff;font-weight:700}.traffic-container{display:flex;justify-content:center;align-items:center}.traffic-light{background:#000;border:2px solid #333;border-radius:30px;padding:2rem;position:relative;overflow:hidden}.traffic-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;gap:2rem;border-bottom:1px solid #333}.traffic-brand{font-size:.9rem;font-weight:700;color:#888;letter-spacing:2px}.traffic-status{font-size:.8rem;padding:.3rem .8rem;background:#333;border-radius:20px;color:#0f8;font-weight:600;letter-spacing:1px}.signals-container{display:flex;flex-direction:column;gap:1rem;margin:2rem 0;align-items:center}.signal{height:4rem;width:4rem;border:3px solid #333;border-radius:50%;position:relative;transition:all .4s ease;background:#111}.signal-large{height:5rem;width:5rem}.signal-inactive{background:#333;box-shadow:inset 0 0 15px #000c}.signal-active{border-color:currentColor;box-shadow:0 0 10px currentColor,0 0 10px currentColor,inset 0 0 20px currentColor;animation:pulse 2s infinite}.signal-active[data-color=red]{background:red;color:red}.signal-active[data-color=yellow]{background:#ff0;color:#ff0}.signal-active[data-color=green]{background:#0f0;color:#0f0}.signal-active[data-color=blue]{background:#00f;color:#00f}.signal-active[data-color=red-yellow]{background:orange;color:orange}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.speed-controls{margin:1.5rem 0;text-align:center}.speed-label{color:#aaa;font-size:.9rem;margin-bottom:.8rem;display:block;font-weight:600}.speed-buttons{display:flex;gap:.5rem;justify-content:center}.speed-btn{padding:.5rem 1rem;background:#222;color:#fff;border:1px solid #444;border-radius:20px;cursor:pointer;transition:all .3s ease;font-size:.8rem;font-weight:600}.speed-btn:hover{background:#333;border-color:#666}.speed-btn.active{background:#48dbfb;color:#000;border-color:#48dbfb}.traffic-info{display:flex;justify-content:space-between;gap:2rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #333}.current-light,.next-light{font-size:.9rem;color:#aaa}.current-color,.next-color{font-weight:700;color:#fff}.app-info{width:100%}.info-card{text-align:center}.info-card p{color:#aaa;font-size:.9rem}.app-footer{text-align:center;padding:2rem;background:#000;border-top:1px solid #333;color:#666;font-size:.9rem}@media (max-width: 768px){.app-title{font-size:2rem}.traffic-light{padding:1.5rem}.signal{height:3rem;width:3rem}.signal-large{height:4rem;width:4rem}.traffic-controls{flex-direction:column;align-items:center}.traffic-info{flex-direction:column;gap:1rem;text-align:center}.mode-buttons{flex-direction:column;align-items:center}}@media (max-width: 480px){.app-header{padding:1rem}.app-title{font-size:1.8rem}.app-subtitle{font-size:1rem}.traffic-light{padding:1rem}.signal{height:2.5rem;width:2.5rem}}