*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;background:linear-gradient(135deg,#1e1e1e,#2d2d2d)}.calculator{background:#1c1c1c;border-radius:32px;padding:28px;box-shadow:0 20px 60px #00000080;width:100%;max-width:480px}.display-container{background:#2d2d2d;border-radius:20px;padding:24px 20px;margin-bottom:20px;min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.expression{font-size:16px;color:#8e8e93;text-align:right;font-weight:400;opacity:.7;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:#505050 transparent}.expression::-webkit-scrollbar{height:4px}.expression::-webkit-scrollbar-thumb{background:#505050;border-radius:2px}.result{font-size:52px;font-weight:300;color:#fff;text-align:right;line-height:1.2;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:#505050 transparent}.result::-webkit-scrollbar{height:6px}.result::-webkit-scrollbar-thumb{background:#505050;border-radius:3px}.mode-toggle{display:flex;gap:12px;margin-bottom:20px;background:#2d2d2d;padding:6px;border-radius:16px}.mode-toggle button{flex:1;padding:12px;border:none;background:transparent;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;color:#8e8e93}.mode-toggle button.active{background:#0a84ff;color:#fff}.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.keypad button{padding:24px;border:none;border-radius:20px;font-size:24px;font-weight:400;cursor:pointer;transition:all .2s ease;color:#fff}.btn-number{background:#505050}.btn-number:hover{background:#5a5a5a}.btn-number:active{transform:scale(.95)}.btn-function{background:#373737;color:#0a84ff;font-size:20px}.btn-function:hover{background:#424242}.btn-operator{background:#ff9f0a;font-size:28px}.btn-operator:hover{background:#ffb340}.btn-equals{background:#34c759;font-size:32px}.btn-equals:hover{background:#48d36c}.keypad button:active{transform:scale(.95)}@media (max-width: 520px){.calculator{max-width:380px;padding:20px}.display-container{min-height:120px;padding:20px 18px}.result{font-size:44px}.expression{font-size:14px}.keypad button{padding:20px;font-size:22px}.btn-function{font-size:18px}.btn-operator{font-size:26px}.btn-equals{font-size:28px}}