:root{--bg-color: #fafafa;--container-bg: #333;--display-bg: #a7af7c;--button-bg: linear-gradient(180deg, #2f2f2f, #3f3f3f);--button-before-bg: linear-gradient(90deg, #2d2d2d, #4d4d4d);--text-color: #fff;--shadow-color: rgba(0, 0, 0, .25);--button-border: rgba(0, 0, 0, .75);--button-glow: rgba(0, 0, 0, .4);--transition: all .3s cubic-bezier(.4, 0, .2, 1);--glow-effect: 0 0 15px rgba(33, 150, 243, .4)}[data-theme=light]{--bg-color: #f0f2f5;--container-bg: rgba(255, 255, 255, .8);--btn-bg: rgba(255, 255, 255, .9);--btn-shadow: 0 4px 6px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .8);--btn-hover: #ffffff;--text-color: #333;--display-bg: #e1e4e8;--display-text: #2c3e50;--primary-btn: #3498db;--secondary-btn: #e74c3c;--glow: 0 0 15px rgba(52, 152, 219, .3);--transition: all .3s cubic-bezier(.4, 0, .2, 1)}@font-face{font-family:digital-7;src:url(/assets/fonts/digital-7.ttf);font-style:normal}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:background-color .3s ease,color .3s ease,transform .1s ease}body{background-color:var(--bg-color);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:Arial,Helvetica,sans-serif}.controls{margin-bottom:20px;display:flex;gap:15px}.toggle-btn{padding:8px 16px;border-radius:20px;border:none;background:var(--container-bg);color:var(--text-color);cursor:pointer;box-shadow:0 4px 6px var(--shadow-color);font-weight:700;transition:all .3s ease}.container{background-color:var(--container-bg);padding:40px 20px 30px 30px;border-radius:20px;min-width:300px;min-height:400px;box-shadow:25px 25px 75px var(--shadow-color),10px 10px 70px var(--shadow-color),inset -5px -5px 15px var(--shadow-color),inset 5px 5px 15px var(--shadow-color);transition:all .3s ease}.calculator{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.scientific-keys{display:none;grid-column:span 2;grid-template-columns:repeat(2,1fr);gap:10px}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}}.shake{animation:shake .3s ease-in-out;color:#e74c3c!important}.container.scientific .scientific-keys{display:grid;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.container.scientific .calculator{grid-template-columns:repeat(6,1fr)}.container.scientific{min-width:500px}.calculator .value{grid-column:span 4;height:100px;width:calc(100% - 10px);background-color:var(--display-bg);margin-bottom:10px;border-radius:10px;border:none;outline:none;font-size:36px;padding:10px;text-align:right;font-family:digital-7;transition:background-color .3s ease}.container.scientific .calculator .value{grid-column:span 6}.calculator button{border:none;width:80px;height:80px;background:var(--button-bg);color:var(--text-color);border-radius:10px;cursor:pointer;box-shadow:inset -8px 0 8px #00000026,inset 0 -8px 8px #00000040,0 0 0 2px var(--button-border),10px 20px 25px var(--button-glow);position:relative;transition:var(--transition);overflow:hidden}.calculator button:hover{transform:translateY(-2px);box-shadow:inset -8px 0 8px #00000026,inset 0 -8px 8px #00000040,0 0 0 2px var(--button-border),15px 30px 40px var(--button-glow),var(--glow-effect)}.calculator button:active{transform:translateY(1px) scale(.96);filter:brightness(1.3)}.calculator button:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 70%);transform:scale(0);transition:transform .5s ease-out,opacity .5s ease-out;opacity:0;pointer-events:none}.calculator button:active:after{transform:scale(2);opacity:1;transition:0s}.calculator button:before{content:"";position:absolute;top:3px;left:4px;right:12px;bottom:14px;border-radius:10px;background:var(--button-before-bg);box-shadow:-5px 5px 15px #0000001a,10px 5px 10px #00000026;border-left:1px solid rgba(0,0,0,.27);border-bottom:1px solid rgba(0,0,0,.27);border-top:1px solid rgba(0,0,0,.6)}.calculator button i{position:relative;text-transform:uppercase;font-style:normal;font-size:1.5em}.calculator button:active{filter:brightness(1.5)}.calculator button.clear{background:red}.calculator button.clear:before{background:linear-gradient(90deg,#d20000,#37ffff5c);border-left:1px solid rgba(255,255,255,.27);border-bottom:1px solid rgba(255,255,255,.27);border-top:1px solid rgba(255,255,255,.27)}.calculator button.equal{grid-row:span 2;height:180px;background:#2196f3}.calculator button.equal:before{background:linear-gradient(90deg,#1479c9,#37ffff5c);border-left:1px solid rgba(255,255,255,.27);border-bottom:1px solid rgba(255,255,255,.27);border-top:1px solid rgba(255,255,255,.27)}.history-panel{display:none;grid-column:span 4;background:#0000001a;border-radius:10px;padding:15px;margin-top:10px;max-height:200px;overflow-y:auto;color:var(--text-color)}.container.scientific .history-panel{grid-column:span 6}.container.show-history .history-panel{display:block}.history-panel h3{font-size:1.2em;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.history-panel h3 button{width:auto!important;height:auto!important;padding:5px 10px!important;font-size:.7em!important;background:#f44336!important;box-shadow:none!important;border-radius:5px!important}.history-panel h3 button:before{display:none!important}.history-panel ul{list-style:none;padding:0}.history-panel li{padding:8px;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer;font-family:digital-7;font-size:1.1em;display:flex;justify-content:space-between}.history-panel li:hover{background:#ffffff1a}.history-panel li span.res{color:#2196f3;font-weight:700}.converter-panel{display:none;grid-column:span 4;background:#00000026;border-radius:15px;padding:20px;margin-top:15px;animation:fadeIn .4s ease}.container.scientific .converter-panel{grid-column:span 6}.container.show-converter .converter-panel{display:block}.converter-panel h3{margin-bottom:15px;font-size:1.1em;color:var(--text-color)}.converter-grid{display:flex;flex-direction:column;gap:15px}.converter-grid select,.converter-grid input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--text-color);outline:none}.convert-inputs,.convert-to{display:flex;gap:10px;align-items:center}#convert-res{flex:1;font-family:digital-7;font-size:1.5em;color:#2196f3}
