:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;color-scheme:light dark;color:#ffffffde;background-color:#242424}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#root{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.container-cc{background:#1e1e2e;border-radius:20px;padding:20px;box-shadow:0 20px 60px #0000004d;width:320px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:12px}.display{grid-column:1 / -1;background:#0f0f1e;color:#0f8;font-size:32px;padding:20px;border-radius:10px;text-align:right;word-wrap:break-word;word-break:break-all;min-height:60px;display:flex;align-items:flex-end;justify-content:flex-end;font-weight:600;letter-spacing:1px}.controls{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.btn-ac,.btn-equals,.btn,.btn-ops,.btn-zero{padding:15px;font-size:18px;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.btn-ac{grid-column:1 / 3;background:#ff4757;color:#fff}.btn-ac:hover{background:#ff3838;transform:translateY(-2px);box-shadow:0 10px 20px #ff47574d}.btn-ac:active{transform:translateY(0)}.btn-equals{background:#2ed573;color:#fff}.btn-equals:hover{background:#26de81;transform:translateY(-2px);box-shadow:0 10px 20px #2ed5734d}.btn-equals:active{transform:translateY(0)}.btn{background:#2f3e50;color:#fff}.btn:hover{background:#34495e;transform:translateY(-2px);box-shadow:0 10px 20px #2f3e504d}.btn:active{transform:translateY(0)}.btn-ops{background:#667eea;color:#fff;font-weight:700}.btn-ops:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.btn-ops:active{transform:translateY(0)}.btn-zero{grid-column:1 / 3}.numbers{grid-column:1 / 4;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.operators{grid-column:4;display:grid;grid-template-columns:1fr;gap:12px}