*{margin: 0;padding: 0;box-sizing: border-box;} body{font-family: sans-serif;background: #1e2a38;display: flex;justify-content: center;align-items: center;min-height: 100vh;padding: 15px;} .calculator{background: linear-gradient(145deg, #3c4f65, #2a3b4f);padding: 6px 16px 12px 16px;border-radius: 16px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1);width: 100%;max-width: 420px;position: relative;border: 1px solid rgba(255, 255, 255, 0.1);} .status-indicator{position: absolute;top: 8px;left: 20px;width: 8px;height: 8px;border-radius: 50%;background: radial-gradient(circle, #00ff88, #00cc66);box-shadow: 0 0 6px rgba(0, 255, 136, 0.8), 0 0 12px rgba(0, 255, 136, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);animation: ledPulse 2s ease-in-out infinite;} @keyframes ledPulse{0%, 100%{opacity: 1;transform: scale(1);} 50%{opacity: 0.7;transform: scale(1.1);}} .calculator-title{text-align: center;margin-bottom: 7px;margin-top: 0px;} .calculator-title a{color: #00ff88;font-size: 1rem;font-weight: bold;text-decoration: none;font-family: 'Courier New', monospace;letter-spacing: 0.5px;transition: all 0.3s ease;padding: 0px 6px;border-radius: 4px;} .calculator-title a:hover{color: #ffffff;background: rgba(0, 255, 136, 0.1);text-shadow: 0 0 6px rgba(0, 255, 136, 0.5);} .display{background: #000000;border-radius: 18px;padding: 16px;margin-bottom: 8px;box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.1), inset 0 2px 4px rgba(0, 255, 136, 0.1);position: relative;overflow: hidden;width: 100%;box-sizing: border-box;border: 2px solid rgba(255, 255, 255, 0.1);} .mode-indicator{position: absolute;top: 5px;right: 10px;background: rgba(0, 255, 136, 0.15);color: #00ff88;padding: 2px 6px;border-radius: 4px;font-size: 10px;font-weight: bold;border: 1px solid rgba(0, 255, 136, 0.2);font-family: 'Courier New', monospace;letter-spacing: 0.5px;z-index: 15;} .expression-display{font-family: 'Courier New', monospace;font-size: 16px;color: #00ff00;line-height: 1.5;min-height: 72px;position: relative;} .expression-line{height: 24px;white-space: nowrap;overflow: hidden;font-family: 'Courier New', monospace;font-size: 16px;line-height: 24px;} .cursor{position: absolute;width: 1px;height: 20px;background: #00ff00;animation: cursorBlink 1.2s infinite;z-index: 10;top: 2px;display: none;} .scientific-mode .cursor{display: block;} @keyframes cursorBlink{0%, 45%{opacity: 1;} 46%, 100%{opacity: 0;}} .result-display{margin-top: 15px;padding-top: 15px;border-top: 2px solid rgba(255, 170, 0, 0.3);font-family: 'Courier New', monospace;font-size: 18px;color: #ffaa00;font-weight: bold;word-wrap: break-word;min-height: 24px;} .result-display.error{color: #ff4444;} .warning-display{background: rgba(255, 68, 68, 0.1);color: #ff6b6b;padding: 6px;border-radius: 8px;margin-bottom: 6px;font-size: 12px;text-align: center;border: 1px solid rgba(255, 68, 68, 0.2);display: none;} .section{margin-bottom: 6px;padding-bottom: 0px;position: relative;} .section:last-child{margin-bottom: 0;padding-bottom: 0;} .section-label{display: none;} .grid{display: grid;grid-template-columns: repeat(6, 1fr);gap: 4px;} button{padding: 4px;font-size: 0.85rem;border: none;border-radius: 6px;color: white;cursor: pointer;transition: all 0.15s ease;font-weight: 500;height: 28px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);} button:hover{transform: translateY(-1px);} button:active{transform: translateY(1px);} button{background: #5a6c7d;} .scientific-mode .conversion{display: none;} .conversion-mode .nav, .conversion-mode .scientific, .conversion-mode .constants, .conversion-mode .advanced, .conversion-mode .commands{display: none;} .scientific-mode .nav, .scientific-mode .scientific, .scientific-mode .constants, .scientific-mode .advanced, .scientific-mode .commands{display: block;} .conversion-mode .conversion, .conversion-mode .numbers{display: block;} .scientific-mode .nav{margin-bottom: 6px;border-bottom: 1px solid rgba(0, 255, 136, 0.2);padding-bottom: 6px;} .scientific-mode .nav button{background: #547aa5;} .scientific-mode .commands{margin-bottom: 6px;} .scientific-mode .commands button{background: #b35a72;} .scientific-mode .scientific{margin-bottom: 6px;} .scientific-mode .scientific button{background: #478c91;} .scientific-mode .constants{margin-bottom: 6px;} .scientific-mode .constants button{background: #709672;} .scientific-mode .advanced{margin-bottom: 6px;} .scientific-mode .advanced button{background: #766aa8;font-size: 0.8rem;} .conversion-mode .category-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 4px;} .conversion-mode .category{margin-bottom: 8px;} .conversion-mode .category button{background: #506883;font-size: 0.75rem;height: 26px;} .conversion-mode .numbers button{font-size: 0.85rem;} .conversion-mode .numbers .grid{grid-template-columns: repeat(5, 1fr);} #modeToggleBtn, button[onclick="openInfoModal()"]{background: #3498db !important;} .numbers button{background: #8aabc1;font-weight: bold;} .conversion-mode .ac-btn{background: #e74c3c !important;} .modal{display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);backdrop-filter: blur(5px);} .modal-content{background: #fdfdfd;margin: 5% auto;padding: 30px;border-radius: 20px;width: 90%;max-width: 600px;max-height: 80vh;overflow-y: auto;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);color: #333;} .modal-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;border-bottom: 2px solid #e0e0e0;padding-bottom: 15px;} .modal-title{font-size: 24px;font-weight: bold;color: #2a5298;margin: 0;} .close-btn{background: #fee;border: 2px solid #f88;border-radius: 50%;width: 40px;height: 40px;font-size: 20px;font-weight: bold;color: #f44;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.2s ease;} .close-btn:hover{background: #fdd;transform: scale(1.1);} .modal-section{margin-bottom: 25px;} .modal-section h3{font-size: 18px;margin-bottom: 12px;color: #2a5298;} .modal-section p, .modal-section ul{font-size: 14px;line-height: 1.6;margin-bottom: 10px;color: #555;} .modal-section ul{margin-left: 20px;} .code-example{background: #eee;padding: 8px 12px;border-radius: 8px;font-family: 'Courier New', monospace;font-size: 13px;border-left: 4px solid #2a5298;margin: 10px 0;} .modal-body{max-height: 60vh;overflow-y: auto;} @media (max-width: 480px){.calculator{padding: 8px 10px;} .display{padding: 12px;} .expression-display{min-height: 60px;font-size: 14px;} .expression-line{height: 20px;font-size: 14px;line-height: 20px;} .result-display{font-size: 15px;margin-top: 8px;padding-top: 8px;} .cursor{height: 18px;} .grid{grid-template-columns: repeat(5, 1fr);gap: 3px;} button{font-size: 0.75rem;height: 26px;padding: 3px;} .section-label{font-size: 0.65rem;margin-bottom: 1px;} .conversion-mode .category-grid{grid-template-columns: repeat(3, 1fr);gap: 3px;} .conversion-mode .category button{font-size: 0.65rem;} .conversion-mode .numbers .grid{grid-template-columns: repeat(5, 1fr);gap: 3px;}}