*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,-apple-system,sans-serif;display:flex}.app{width:100%;padding:20px}.card{background:#fffffff2;border-radius:24px;max-width:480px;margin:0 auto;padding:40px;box-shadow:0 20px 60px #0000004d}h1{text-align:center;color:#1e293b;margin-bottom:6px;font-size:1.8rem}.subtitle{text-align:center;color:#64748b;margin-bottom:28px;font-size:.9rem}.field{flex:1}.field label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:.75rem;font-weight:600;display:block}input[type=number],select{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;outline:none;width:100%;padding:12px 16px;font-size:1rem;transition:border-color .2s}input:focus,select:focus{border-color:#3b82f6}.row{align-items:flex-end;gap:12px;margin-bottom:20px;display:flex}.swap{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:12px;width:44px;height:44px;margin-bottom:2px;font-size:1.2rem}.btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#6366f1);border:none;border-radius:12px;width:100%;margin-top:16px;padding:14px;font-size:1rem;font-weight:600;transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px #3b82f666}.result{color:#1e40af;background:#eff6ff;border-radius:12px;justify-content:space-between;align-items:center;margin-top:24px;padding:16px;font-size:1.1rem;display:flex}.result strong{color:#1d4ed8;font-size:1.4rem}.rates{border-top:1px solid #e2e8f0;margin-top:24px;padding-top:20px}.rates p{color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-size:.75rem}.rates span{color:#475569;background:#f1f5f9;border-radius:6px;margin:3px 3px 3px 0;padding:4px 10px;font-size:.78rem;display:inline-block}