.App{background:#f5f5f5;min-height:100vh;text-align:center}.app-header{background:linear-gradient(135deg,#2c5f7f,#1a4d6b);box-shadow:0 2px 10px #0000004d;justify-content:space-between;padding:15px 30px}.app-header,.app-header-left{align-items:center;display:flex}.app-header-left{gap:15px}.app-logo{height:50px;width:auto}.app-header h1{color:#fff;font-size:24px;font-weight:600;margin:0}.user-info{align-items:center;display:flex;gap:15px}.logout-button,.user-info span{color:#fff;font-size:14px}.logout-button{background:#fff3;border:2px solid #fff;border-radius:6px;cursor:pointer;font-weight:600;padding:8px 20px;transition:all .2s}.logout-button:hover{background:#fff;color:#2c5f7f}.auth-container{align-items:center;background:linear-gradient(135deg,#1a2332,#0f1419);display:flex;justify-content:center;min-height:100vh;padding:20px}.auth-box{background:#fffffffa;border-radius:12px;box-shadow:0 10px 40px #00000080;max-width:400px;padding:40px;width:100%}.auth-logo{display:block;height:auto;margin:0 auto 20px;max-width:150px}.auth-box h1{color:#1a2332;font-size:24px;font-weight:600;margin-bottom:10px;text-align:center}.auth-box h2{color:#2c5f7f;font-size:18px;font-weight:400;margin-bottom:30px;text-align:center}.form-group{margin-bottom:20px}.form-group label{color:#1a2332;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.form-group input{border:2px solid #e1e4e8;border-radius:6px;box-sizing:border-box;font-size:14px;padding:12px;transition:border-color .2s;width:100%}.form-group input:focus{border-color:#2c5f7f;outline:none}.auth-box button[type=submit]{background:linear-gradient(135deg,#2c5f7f,#1a4d6b);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:12px;transition:transform .2s,box-shadow .2s;width:100%}.auth-box button[type=submit]:hover:not(:disabled){box-shadow:0 5px 15px #2c5f7f66;transform:translateY(-2px)}.auth-box button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.auth-toggle{border-top:1px solid #e1e4e8;margin-top:20px;padding-top:20px;text-align:center}.auth-toggle p{color:#666;font-size:14px}.auth-toggle button{background:none;border:none;color:#2c5f7f;cursor:pointer;font-size:14px;font-weight:600;margin-left:5px;padding:0}.auth-toggle button:hover{text-decoration:underline}.auth-error{background:#fee;border:1px solid #fcc;border-radius:6px;color:#c33}.auth-error,.auth-message{font-size:14px;margin-bottom:20px;padding:12px;text-align:center}.auth-message{background:#efe;border:1px solid #cfc;border-radius:6px;color:#363}.softphone-container{align-items:center;background:#f5f5f5;display:flex;justify-content:center;min-height:calc(100vh - 80px);padding:20px}.softphone{background:#fff;border-radius:20px;box-shadow:0 10px 40px #0000001a;max-width:400px;padding:30px;width:100%}.display{background:linear-gradient(135deg,#2c5f7f,#1a4d6b);border-radius:12px;color:#fff;margin-bottom:20px;min-height:80px;padding:20px}.phone-number{font-size:28px;font-weight:500;margin-bottom:10px;text-align:center;word-break:break-all}.call-duration{font-size:18px;opacity:.9;text-align:center}.call-status{margin-top:5px;opacity:.8;text-transform:capitalize}.call-status,.error-message{font-size:14px;text-align:center}.error-message{background:#fee;border-radius:6px;color:#c33;margin-top:10px;padding:10px}.extensions-directory{background:#f8f9fa;border:2px solid #e1e4e8;border-radius:12px;margin-bottom:20px;padding:15px}.extensions-directory h3{color:#2c5f7f;font-size:16px;font-weight:600;margin:0 0 15px;text-align:center}.extensions-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}.extension-button{background:#fff;border:2px solid #e1e4e8;border-radius:8px;cursor:pointer;padding:12px;text-align:center;transition:all .2s}.extension-button:hover{background:#e8f4f8;border-color:#2c5f7f;transform:translateY(-2px)}.ext-number{color:#2c5f7f;font-size:20px;font-weight:700;margin-bottom:5px}.ext-name{color:#666;font-size:13px;font-weight:500}.dialpad{margin-bottom:20px}.dialpad-row{display:flex;gap:10px;margin-bottom:10px}.dialpad-button{background:#f8f9fa;border:2px solid #e1e4e8;border-radius:12px;color:#2c5f7f;cursor:pointer;flex:1 1;font-size:24px;font-weight:600;padding:20px;transition:all .2s}.dialpad-button:hover:not(:disabled){background:#e8f4f8;border-color:#2c5f7f;transform:translateY(-2px)}.dialpad-button:active:not(:disabled){transform:translateY(0)}.dialpad-button:disabled{cursor:not-allowed;opacity:.5}.controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.control-button{border:none;border-radius:12px;cursor:pointer;flex:1 1;font-size:16px;font-weight:600;min-width:80px;padding:15px;transition:all .2s}.control-button.call{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.control-button.call:hover:not(:disabled){box-shadow:0 5px 15px #4caf504d;transform:translateY(-2px)}.control-button.hangup{background:linear-gradient(135deg,#f44336,#da190b);color:#fff}.control-button.hangup:hover{box-shadow:0 5px 15px #f443364d;transform:translateY(-2px)}.control-button.backspace{background:#f8f9fa;border:2px solid #e1e4e8;color:#2c5f7f}.control-button.backspace:hover{background:#e8f4f8;border-color:#2c5f7f}.control-button.active{background:#2c5f7f;color:#fff}.control-button:disabled{cursor:not-allowed;opacity:.5}.control-button.add-participant{background:linear-gradient(135deg,#28a745,#218838);color:#fff}.control-button.add-participant:hover:not(:disabled){box-shadow:0 5px 15px #28a7454d;transform:translateY(-2px)}.add-participant-panel{align-items:center;background:#f8f9fa;border:2px solid #e1e4e8;border-radius:12px;display:flex;gap:10px;margin:15px 0;padding:15px}.participant-input{background:#fff;border:2px solid #e1e4e8;border-radius:8px;flex:1 1;font-size:16px;padding:12px}.participant-input:focus{border-color:#2c5f7f;outline:none}.participants-list{background:#f8f9fa;border:2px solid #e1e4e8;border-radius:12px;margin-top:20px;padding:15px}.participants-list h3{color:#2c5f7f;font-size:16px;font-weight:600;margin:0 0 15px}.participant-item{align-items:center;background:#fff;border:1px solid #e1e4e8;border-radius:8px;display:flex;gap:10px;margin-bottom:8px;padding:12px}.participant-number{color:#2c5f7f;flex:1 1;font-weight:500}.participant-state{background:#e8f4f8;border-radius:4px;color:#666;font-size:12px;padding:4px 8px;text-transform:capitalize}.remove-participant{background:#fee;border:1px solid #fcc;border-radius:6px;cursor:pointer;font-size:16px;padding:6px 10px;transition:all .2s}.remove-participant:hover{background:#fdd;border-color:#f44336}.audio-devices{background:#f8f9fa;border-radius:12px;margin-bottom:15px;padding:15px}.audio-devices label{color:#2c5f7f;display:block;font-size:14px;font-weight:600;margin-bottom:8px}.audio-devices select{background:#fff;border:2px solid #e1e4e8;border-radius:8px;cursor:pointer;font-size:14px;padding:10px;width:100%}.audio-devices select:focus{border-color:#2c5f7f;outline:none}.caller-id-info{background:#e8f4f8;border:1px solid #b3d9e8;border-radius:8px;color:#2c5f7f;font-size:13px;font-weight:500;padding:12px;text-align:center}@media (max-width:480px){.softphone{max-width:100%;padding:20px}.phone-number{font-size:24px}.dialpad-button{font-size:20px;padding:15px}.control-button{font-size:14px;min-width:70px;padding:12px}.add-participant-panel{flex-direction:column}.participant-input{width:100%}.extensions-grid{grid-template-columns:repeat(2,1fr)}}