*,:before,:after{box-sizing:border-box}body{margin:0}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a2e;background:#f5f6fa;min-height:100vh;font-family:system-ui,Segoe UI,sans-serif}.app{max-width:800px;margin:0 auto;padding:48px 24px}header{text-align:center;margin-bottom:40px}h1{color:#1a1a2e;letter-spacing:-.5px;font-size:2rem;font-weight:700}.subtitle{color:#6b7280;margin-top:6px;font-size:.95rem}.converter{background:#fff;border-radius:16px;grid-template-columns:1fr auto 1fr;display:grid;overflow:hidden;box-shadow:0 4px 24px #00000014}.panel{padding:32px 28px}.panel h2{text-transform:uppercase;letter-spacing:1px;color:#9ca3af;align-items:center;gap:8px;margin-bottom:24px;font-size:.75rem;font-weight:600;display:flex}.flag{font-size:1.6rem;line-height:1}.field{margin-bottom:20px}.field:last-child{margin-bottom:0}label{color:#4b5563;margin-bottom:6px;font-size:.85rem;font-weight:500;display:block}.input-group{border:1.5px solid #e5e7eb;border-radius:8px;align-items:center;transition:border-color .15s;display:flex;overflow:hidden}.input-group:focus-within{border-color:#3b82f6}input[type=number]{color:#1a1a2e;-moz-appearance:textfield;background:0 0;border:none;outline:none;flex:1;width:100%;padding:10px 12px;font-size:1rem}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.unit{color:#9ca3af;white-space:nowrap;background:#f9fafb;border-left:1.5px solid #e5e7eb;padding:10px 12px;font-size:.8rem;font-weight:500}.divider{background:#f9fafb;border-left:1px solid #f0f0f5;border-right:1px solid #f0f0f5;justify-content:center;align-items:center;padding:0 8px;display:flex}.swap-btn{color:#6b7280;cursor:pointer;background:#fff;border:1.5px solid #e5e7eb;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;transition:border-color .15s,color .15s,transform .2s;display:flex}.swap-btn:hover{color:#3b82f6;border-color:#3b82f6;transform:rotate(180deg)}.clear-btn{color:#6b7280;cursor:pointer;background:0 0;border:1.5px solid #e5e7eb;border-radius:8px;margin:24px auto 0;padding:10px 28px;font-size:.9rem;transition:border-color .15s,color .15s;display:block}.clear-btn:hover{color:#374151;border-color:#9ca3af}footer{text-align:center;color:#9ca3af;margin-top:32px;font-size:.8rem}@media (width<=560px){.converter{grid-template-columns:1fr}.divider{border:1px solid #f0f0f5;border-left:none;border-right:none;padding:12px}}