body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center}.container{background:#fff;border-radius:12px;box-shadow:0 20px 40px #0000001a;padding:40px;max-width:500px;width:100%;margin:20px}h1{text-align:center;color:#333;margin-bottom:30px;font-weight:600}h2{text-align:center;color:#666;margin-bottom:20px;font-weight:400;font-size:1.2em}#status{text-align:center;margin-bottom:20px;font-weight:700;color:#28a745}#status.busy{color:#dc3545}.dnd-container{text-align:center;margin-bottom:20px}.dnd-toggle{background:#6c757d;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s}.dnd-toggle:hover{background:#5a6268}.dnd-toggle.active{background:#dc3545}.dnd-toggle.active:hover{background:#c82333}.dnd-indicator{margin-top:10px;padding:8px 16px;background:#fff3cd;color:#856404;border:1px solid #ffeaa7;border-radius:6px;font-size:13px;font-weight:500}.timer-container{text-align:center;margin-bottom:30px;padding:20px;background:#f0f0f0;border-radius:8px}.timer-display{font-size:48px;font-weight:700;color:#667eea;font-family:Courier New,monospace;letter-spacing:2px}.input-group{margin-bottom:20px}input{width:100%;padding:12px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;transition:border-color .3s;box-sizing:border-box}input:focus{outline:none;border-color:#667eea}.button-group{display:flex;gap:10px;margin-bottom:20px}button{flex:1;padding:12px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}#callBtn{background:#28a745;color:#fff}#callBtn:hover{background:#218838}#hangup{background:#dc3545;color:#fff}#hangup:hover{background:#c82333}#muteBtn{background:#ffc107;color:#333}#muteBtn:hover{background:#e0a800}#muteBtn.active{background:#ff6b6b;color:#fff}#answer{background:#28a745;color:#fff;flex:1;padding:12px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}#answer:hover{background:#218838}#reject{background:#dc3545;color:#fff;flex:1;padding:12px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}#reject:hover{background:#c82333}#incoming{background:#f8f9fa;border:2px solid #ffc107;border-radius:8px;padding:20px;margin-bottom:20px;text-align:center}#incoming p{margin:0 0 15px;font-weight:600;color:#856404}#answer{background:#28a745;color:#fff;margin-right:10px}#reject{background:#dc3545;color:#fff}#log{background:#f8f9fa;border:1px solid #e1e5e9;border-radius:8px;padding:15px;max-height:200px;overflow-y:auto;font-family:Courier New,monospace;font-size:12px;white-space:pre-wrap;word-wrap:break-word}.history-section{margin-top:30px;padding-top:20px;border-top:2px solid #e1e5e9}.history-section h3{margin:0 0 15px;color:#333;font-size:1.1em}.history-list{max-height:300px;overflow-y:auto;margin-bottom:15px;border:1px solid #e1e5e9;border-radius:8px;background:#f8f9fa}.history-item{padding:12px 15px;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;align-items:center;font-size:14px}.history-item:last-child{border-bottom:none}.history-item.incoming{background:#e8f5e9}.history-item.outgoing{background:#e3f2fd}.history-info{flex:1}.history-number{font-weight:600;color:#333}.history-details{font-size:12px;color:#666;margin-top:3px}.history-direction{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;margin-right:10px}.history-direction.incoming{background:#4caf50;color:#fff}.history-direction.outgoing{background:#2196f3;color:#fff}.history-direction.missed{background:#ff9800;color:#fff}.history-direction.rejected{background:#f44336;color:#fff}.history-direction.dnd-blocked{background:#9c27b0;color:#fff}.history-item.missed{background:#fff3e0}.history-item.rejected{background:#ffebee}.history-item.dnd-blocked{background:#f3e5f5}.history-empty{padding:20px;text-align:center;color:#999;font-size:14px}.clear-btn{width:100%;background:#dc3545;color:#fff;padding:10px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.clear-btn:hover{background:#c82333}