body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
      font-family: 'Poppins', sans-serif;
      transition: background 0.4s ease;
    }
    .calculator {
      width: 380px;
      background: #ffffff;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 8px 8px 20px rgba(0,0,0,0.2), -4px -4px 12px rgba(255,255,255,0.7);
      transition: all 0.4s ease;
    }
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
    }
    .history-screen {
      height: 25px;
      font-size: 1rem;
      color: #6c757d;
      text-align: right;
      margin-bottom: 5px;
      padding-right: 5px;
    }
    .calculator-screen {
      height: 70px;
      font-size: 2rem;
      text-align: right;
      margin-bottom: 15px;
      padding: 10px;
      border: none;
      background: #f1f3f6;
      border-radius: 10px;
      box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2), inset -2px -2px 6px rgba(255,255,255,0.7);
      transition: all 0.4s ease;
    }
    button {
      font-size: 1.2rem !important;
      padding: 20px 0 !important;
      border-radius: 12px !important;
      transition: all 0.2s ease-in-out;
    }
    button:hover {
      transform: scale(1.05);
    }
    button:active {
      transform: scale(0.95);
    }

    /* Toggle Switch */
    .toggle-switch {
      position: relative;
      display: flex;
      align-items: center;
      width: 180px;
      height: 50px;
      background: #e0e0e0;
      border-radius: 30px;
      cursor: pointer;
      transition: background 0.4s ease;
    }
    .toggle-switch .label {
      position: absolute;
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 1rem;
      color: #333;
      pointer-events: none;
    }
    .toggle-switch .slider {
      position: absolute;
      top: 5px;
      left: 5px;
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      transition: all 0.4s ease;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    }

    /* Dark Mode Styles */
    body.dark {
      background: linear-gradient(135deg, #141E30 0%, #243B55 100%);
    }
    body.dark .calculator {
      background: #1e1e2f;
      box-shadow: 4px 4px 15px rgba(0,0,0,0.8), -3px -3px 8px rgba(255,255,255,0.05);
    }
    body.dark .calculator-screen {
      background: #2c2c3c;
      color: #00ffcc;
    }
    body.dark .history-screen {
      color: #bbb;
    }
    body.dark button {
      color: #fff !important;
    }
    body.dark .btn-light {
      background: #2e2e40 !important;
      border: none;
    }
    body.dark .btn-warning {
      background: #ff9800 !important;
      color: #fff !important;
    }
    body.dark .btn-danger {
      background: #e53935 !important;
    }
    body.dark .btn-success {
      background: #00c853 !important;
    }
    body.dark .btn-secondary {
      background: #546e7a !important;
    }
    body.dark .toggle-switch {
      background: #111;
    }
    body.dark .toggle-switch .label {
      color: #fff;
    }
    body.dark .toggle-switch .slider {
      transform: translateX(130px);
      background: #000;
      color: #fff;
    }