*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}body{background:#f0f2f5;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px}.container{display:flex;gap:24px;align-items:flex-start;max-width:1100px;width:100%}.softphone-box{width:320px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;text-align:center}.softphone-box img{max-width:120px;margin-bottom:16px}.btn{margin:8px 4px;padding:8px 12px;font-size:16px;border:none;border-radius:4px;cursor:pointer}.btn.answer{background:#4caf50;color:#fff}.btn.hangup{background:#f44336;color:#fff}.btn.call{background:#4caf50;color:#fff}.status{margin-top:12px;font-size:14px;color:#333}.dialer{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:12px}.dialer input{flex:1;padding:8px;font-size:16px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.keypad .key{padding:15px;font-size:18px;border-radius:8px;border:1px solid #ccc;background:#f9f9f9;cursor:pointer;transition:background .2s}.keypad .key:hover{background:#e0e0e0}.history-box{flex:1;min-width:500px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.history-box h3{margin-bottom:12px}.history-box table{width:100%;border-collapse:collapse;font-size:14px}.history-box th,.history-box td{border:1px solid #ddd;padding:8px;text-align:center}.history-box th{background:#f5f5f5;font-weight:700}.history-box tr:nth-child(2n){background:#fafafa}