:root {
      /* Deep Violet Background */
      --bg-primary: #1a0b2e; 
      
      /* Glass Effect */
      --bg-glass: rgba(255, 255, 255, 0.03);
      --bg-input: rgba(0, 0, 0, 0.2);
      --border-glass: rgba(255, 255, 255, 0.08);
      --border-input: rgba(255, 255, 255, 0.15);
      
      /* Text */
      --text-primary: #f3f4f6;
      --text-placeholder: rgba(243, 244, 246, 0.4);
      
      /* Focus States (Lime) */
      --focus-border: rgba(132, 204, 22, 0.6); /* lime-500 */
      --focus-shadow: rgba(132, 204, 22, 0.2);
      
      /* Form State Colors */
      --error-border: rgba(239, 68, 68, 0.6);
      --error-shadow: rgba(239, 68, 68, 0.2);
      --success-border: rgba(34, 197, 94, 0.5);
      --success-shadow: rgba(34, 197, 94, 0.2);
      
      --shadow-glass: rgba(0, 0, 0, 0.4);
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: var(--bg-primary);
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .glass {
      background: var(--bg-glass);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-glass);
      box-shadow: 0 8px 32px var(--shadow-glass);
      contain: layout style paint;
    }
    .input-glass {
      background: var(--bg-input);
      border: 1px solid var(--border-input);
      color: var(--text-primary);
    }
    .input-glass::placeholder {
      color: var(--text-placeholder);
    }
    .input-glass:focus {
      background: rgba(255, 255, 255, 0.15);
      border-color: var(--focus-border);
      box-shadow: 0 0 0 3px var(--focus-shadow);
    }
    select option {
      background: #1f2937;
      color: #f3f4f6;
    }
    .result-number {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;
    }

    @supports (padding: max(0px)) {
      .safe-area-padding {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
      }
      .safe-area-bottom {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
      }
      .safe-area-top {
        padding-top: max(2rem, env(safe-area-inset-top));
      }
    }

    @media (max-width: 640px) {
      input[type="number"], 
      input[type="text"], 
      select {
        font-size: 16px !important;
      }
    }

    @media (max-width: 380px) {
      .result-number {
        font-size: 2.25rem;
      }
      .text-2xl {
        font-size: 1.25rem;
      }
      .glass {
        margin: 0.5rem;
      }
    }

    @media (min-width: 381px) and (max-width: 480px) {
      .result-number {
        font-size: 2.5rem;
      }
    }

    @media (min-width: 481px) and (max-width: 640px) {
      .result-number {
        font-size: 2.75rem;
      }
    }

    @media (min-width: 641px) and (max-width: 768px) {
      .result-number {
        font-size: 3.25rem;
      }
    }

    @media (min-width: 769px) {
      .result-number {
        font-size: 3.75rem;
      }
      .text-2xl {
        font-size: 1.875rem;
      }
    }

    @media (max-width: 480px) {
      .space-y-6 > * + * {
        margin-top: 1.25rem;
      }
      
      .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      
      .grid-cols-2 {
        gap: 0.75rem;
      }
      
      .glass-container {
        padding: 1.5rem 1rem;
      }
    }

    @media (min-width: 481px) and (max-width: 640px) {
      .glass-container {
        padding: 2rem 1.25rem;
      }
    }

    @media (hover: none) {
      .hover\:bg-white\/10:hover {
        background-color: transparent;
      }
      
      .hover\:from-blue-700:hover {
        background-image: linear-gradient(to right, rgb(37 99 235), rgb(99 102 241));
      }
      
      .hover\:to-indigo-700:hover {
        background-image: linear-gradient(to right, rgb(29 78 216), rgb(67 56 202));
      }
      
      .hover\:from-purple-700:hover {
        background-image: linear-gradient(to right, rgb(147 51 234), rgb(236 72 153));
      }
      
      .hover\:to-pink-700:hover {
        background-image: linear-gradient(to right, rgb(126 34 206), rgb(219 39 119));
      }
      
      .hover\:shadow-xl:hover {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
      }
      
      .active\:scale-98:active {
        transform: scale(0.95);
      }
      
      input[type="radio"]:checked + div {
        transform: scale(0.98);
      }
      
      select:active {
        background: rgba(255, 255, 255, 0.2);
      }
      
      input:active {
        background: rgba(255, 255, 255, 0.12);
      }
    }

    .result-appear {
      transition: all 0.3s ease-out;
    }
    
    #form-container {
      transition: all 0.3s ease-out;
      will-change: transform, opacity;
    }
    
    #result {
      transition: all 0.3s ease-out;
      will-change: transform, opacity;
    }
    
    .input-error {
      border-color: var(--error-border) !important;
      box-shadow: 0 0 0 3px var(--error-shadow) !important;
    }
    
    .input-valid {
      border-color: var(--success-border) !important;
      box-shadow: 0 0 0 3px var(--success-shadow) !important;
    }