footer,label{color:var(--color-text-secondary)}.btn,input[type=number],select{width:100%;height:50px;font-family:var(--font-primary)}.btn,body,input[type=number],select{font-family:var(--font-primary)}.result-value,.results-title,footer,header{text-align:center}:root{--font-primary:'Poppins',sans-serif;--color-bg:#f3f4f6;--color-container-bg:rgba(255, 255, 255, 0.7);--color-container-border:rgba(209, 213, 219, 0.6);--color-text:#1f2937;--color-text-secondary:#6b7280;--color-input-bg:#ffffff;--color-input-border:#d1d5db;--color-accent:#4f46e5;--color-accent-hover:#4338ca;--color-focus:#6366f1;--color-error:#ef4444;--color-success:#22c55e;--color-btn-secondary-bg:#e5e7eb;--color-btn-secondary-hover:#d1d5db;--color-btn-secondary-text:#374151;--shadow-base:0 4px 6px -1px rgba(0, 0, 0, 0.07),0 2px 4px -2px rgba(0, 0, 0, 0.07);--shadow-hover:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 8px 10px -6px rgba(0, 0, 0, 0.1)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--color-bg);color:var(--color-text);display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;background-image:linear-gradient(45deg,rgba(79,70,229,.05) 0,rgba(243,244,246,0) 60%)}.converter-container{width:100%;max-width:600px;background-color:var(--color-container-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-container-border);border-radius:16px;padding:2rem;box-shadow:var(--shadow-base);transition:transform .3s,box-shadow .3s}.converter-container:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}header{margin-bottom:2rem}h1{font-size:2.25rem;font-weight:700}footer{margin-top:2rem;font-size:.875rem}footer a{color:var(--color-accent);text-decoration:none;transition:text-decoration .2s}footer a:hover{text-decoration:underline}.form-group{margin-bottom:1.5rem}.form-group:last-child{margin-bottom:0}label{display:block;margin-bottom:.5rem;font-weight:500}input[type=number],select{padding:0 1rem;background-color:var(--color-input-bg);border:1px solid var(--color-input-border);border-radius:8px;color:var(--color-text);font-size:1rem;transition:border-color .2s,box-shadow .2s}input[type=number]:focus,select:focus{outline:0;border:2px solid var(--color-focus);padding:0 calc(1rem - 1px);box-shadow:0 0 0 3px rgba(99,102,241,.2)}input[type=number][aria-invalid=true]{border-color:var(--color-error)}.error-text{color:var(--color-error);min-height:1.25rem;font-size:.875rem;font-weight:500}.btn{display:inline-flex;justify-content:center;align-items:center;padding:0 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s,background-color .2s,box-shadow .2s;user-select:none}.btn:hover{transform:scale(1.05)}.btn:active{transform:scale(1);transition-duration:.1s}.btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.btn-primary{background:linear-gradient(45deg,var(--color-accent),var(--color-focus));color:#fff}.btn-primary:hover{background:linear-gradient(45deg,var(--color-accent-hover),var(--color-accent))}.btn-secondary{background-color:var(--color-btn-secondary-bg);color:var(--color-btn-secondary-text)}.btn-secondary svg,.results-title{color:var(--color-text-secondary)}.btn-secondary:hover{background-color:var(--color-btn-secondary-hover)}.results-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-container-border)}.btn-text.hidden,.results-section.hidden,.spinner.hidden{display:none}.results-title{font-size:1.125rem;margin-bottom:1rem}.result-display{display:flex;flex-direction:column;align-items:center;gap:1rem;background-color:var(--color-bg);padding:1rem;border-radius:8px;word-break:break-all}.result-value{font-size:1.5rem;font-weight:700;color:var(--color-accent)}.result-actions{display:flex;gap:.75rem}.result-actions .btn{width:44px;height:44px;padding:0}.copy-feedback-text{text-align:center;color:var(--color-success);font-weight:500;margin-top:.5rem;min-height:1.25rem}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width:640px){h1{font-size:2.5rem}.inputs-wrapper{display:flex;gap:1rem}.inputs-wrapper .form-group{flex:1}.action-group .btn{width:auto}.result-display{flex-direction:row;justify-content:space-between;padding:1.5rem}.result-value{font-size:1.75rem;text-align:left}}