@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --primary: #0f172a;
  --accent: #38bdf8;
  --bg: #f8fafc;
  --card-bg: rgba(255,255,255,0.85);
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

   
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }

        .calculator-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }

        .calculator-header {
            text-align: center;
            margin-bottom: 2rem;
            padding: 1rem;
            background: linear-gradient(135deg, #1a237e, #0d47a1);
            color: white;
            border-radius: 8px;
        }

        .calculator-header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .calculator {
            width: 320px;
            margin: 2rem auto;
            background: linear-gradient(145deg, #2c3e50, #34495e);
            padding: 1.5rem;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .display-container {
            background: #1a1a1a;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 1rem;
        }

        .display {
            background: #1a1a1a;
            color: #fff;
            height: 70px;
            padding: 1rem;
            text-align: right;
            font-size: 2rem;
            font-family: 'Courier New', monospace;
            border: none;
            outline: none;
            width: 100%;
        }

        .memory-display {
            color: #666;
            font-size: 0.8rem;
            text-align: right;
            height: 20px;
            padding: 0 1rem;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.8rem;
        }

        button {
            padding: 1rem;
            font-size: 1.25rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        button:active {
            transform: translateY(1px);
        }

        .number {
            background: #455a64;
            color: #fff;
        }

        .operator {
            background: #fb8c00;
            color: #fff;
        }

        .equals {
            background: #2e7d32;
            color: #fff;
        }

        .clear {
            background: #c62828;
            color: #fff;
        }

        .memory {
            background: #6a1b9a;
            color: #fff;
        }

        .instructions {
            margin: 2rem 0;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .instructions h2 {
            color: #2c3e50;
            margin-bottom: 1rem;
            border-bottom: 2px solid #e67e22;
            padding-bottom: 0.5rem;
        }

        .instructions ul {
            list-style-type: none;
            padding-left: 1rem;
        }

        .instructions li {
            margin-bottom: 0.8rem;
            position: relative;
            padding-left: 1.5rem;
        }

        .instructions li::before {
            content: "•";
            color: #e67e22;
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .use-cases {
            margin: 2rem 0;
        }

        .use-cases h2 {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid #e67e22;
            padding-bottom: 0.5rem;
        }

        .use-case-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }

        .use-case-card {
            background: #fff;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .use-case-card:hover {
            transform: translateY(-5px);
        }

        .use-case-card h3 {
            color: #e67e22;
            margin-bottom: 0.8rem;
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            .calculator-container {
                margin: 1rem;
                padding: 1rem;
            }

            .calculator-header h1 {
                font-size: 2rem;
            }

            .calculator {
                width: 100%;
                max-width: 320px;
            }

            button {
                padding: 0.8rem;
                font-size: 1.1rem;
            }
        }

        /* Animation for button press */
        @keyframes buttonPress {
            0% { transform: scale(1); }
            50% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }

        .button-press {
            animation: buttonPress 0.2s ease;
        }

        /* Error animation */
        @keyframes errorShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .error-shake {
            animation: errorShake 0.3s ease-in-out;
            color: #ff6b6b !important;
        }