body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--accent-color: #ec4899;--accent-light: #fdf4ff;--secondary-color: #a78bfa;--dark-blue: #312e81;--success-color: #10b981;--error-color: #ef4444;--text-primary: #1e1b4b;--text-secondary: #6366f1;--border-color: #e0e7ff;--border-focus: #c7d2fe;--shadow: 0 2px 8px rgba(99, 102, 241, .08);--shadow-lg: 0 8px 24px rgba(99, 102, 241, .12)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#faf5ff,#ede9fe,#ddd6fe,#e0e7ff,#f0f9ff);background-attachment:fixed;color:var(--text-primary)}.app{min-height:100vh;display:flex;flex-direction:column}header{background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);color:#fff;padding:2rem 1rem;text-align:center;box-shadow:0 10px 30px #6366f14d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}header h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700}header p{font-size:1.1rem;opacity:.9}main{flex:1;max-width:800px;width:100%;margin:0 auto;padding:2rem 1rem}.form-container{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:20px;box-shadow:0 8px 32px #6366f11a;margin-bottom:2rem;border:1px solid rgba(255,255,255,.5)}.input-group{margin-bottom:1.5rem}.input-group label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.input-group input{width:100%;padding:.75rem 1rem;font-size:1rem;border:2px solid #e0e7ff;border-radius:12px;transition:all .3s ease;background:#fff}.input-group input:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 4px #a78bfa26}.city-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.city-tag{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:500;box-shadow:0 2px 8px #6366f133}.submit-button{width:100%;padding:1rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#ec4899,#d946ef);border:none;border-radius:14px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #ec48994d}.submit-button:hover:not(:disabled){background:linear-gradient(135deg,#db2777,#c026d3);transform:translateY(-2px);box-shadow:0 6px 20px #ec489966}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.results{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.5rem;border-radius:20px;box-shadow:0 8px 32px #6366f11a;border:1px solid rgba(255,255,255,.5)}.results.loading{text-align:center}.spinner{width:40px;height:40px;margin:0 auto 1rem;border:4px solid #e0e7ff;border-top-color:#8b5cf6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.results.error{border-left:4px solid var(--error-color)}.results.error h3{color:var(--error-color);margin-bottom:.5rem}.results.success h2{color:var(--text-primary);margin-bottom:1rem;text-align:center;font-size:1.5rem}.result-card{background:linear-gradient(135deg,#faf5ffcc,#ede9fe99);padding:1.25rem;border-radius:16px;border:2px solid #c7d2fe;box-shadow:0 4px 16px #8b5cf626}.destination-name{font-size:1.75rem;font-weight:700;color:#312e81;text-align:center;margin-bottom:.75rem}.price-per-km{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#ec4899,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:1rem}.detail{display:flex;justify-content:space-between;padding:.5rem 0;border-top:1px solid rgba(199,210,254,.5)}.detail .label{font-weight:600;color:var(--text-secondary)}.detail .value{font-weight:600;color:var(--text-primary)}footer{text-align:center;padding:2rem 1rem;color:var(--text-secondary);font-size:.875rem}@media(max-width:640px){header h1{font-size:2rem}header p{font-size:1rem}.form-container{padding:1.5rem}.results{padding:1.25rem}.result-card{padding:1rem}.destination-name{font-size:1.5rem}.price-per-km{font-size:1.75rem}}