@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap";:root{--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--bg-color: #f4f7f9;--card-color: #ffffff;--text-color: #1a202c;--text-color-light: #5a6474;--border-color: #e2e8f0;--accent-color: #007bff;--accent-color-hover: #0056b3;--accent-text-color: #ffffff;--success-color: #28a745;--error-color: #dc3545;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--border-radius: 8px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-color);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:100vh;padding:2rem 1rem}.header{text-align:center;margin-bottom:2.5rem}.brand-name{font-size:3rem;font-weight:700;color:var(--text-color)}.tagline{font-size:1.125rem;color:var(--text-color-light);margin-top:.25rem}.main-card{width:100%;max-width:600px;background-color:var(--card-color);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:2rem;margin-bottom:auto}.shorten-form{display:flex;gap:.75rem}.url-input{flex-grow:1;height:50px;padding:0 1rem;font-size:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);transition:border-color .2s,box-shadow .2s;outline:none;font-family:var(--font-sans)}.url-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #007bff40}.url-input::placeholder{color:#a0aec0}.submit-btn{font-family:var(--font-sans);height:50px;padding:0 1.5rem;font-size:1rem;font-weight:600;color:var(--accent-text-color);background-color:var(--accent-color);border:none;border-radius:var(--border-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;white-space:nowrap;min-width:140px}.submit-btn:hover:not(:disabled){background-color:var(--accent-color-hover)}.submit-btn:disabled{background-color:#a0aec0;cursor:not-allowed}.feedback-area{margin-top:1.5rem;min-height:70px;display:flex;align-items:center}.error-message{color:var(--error-color);font-weight:600;width:100%}.result{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f8fafc;padding:.75rem 1rem;border-radius:var(--border-radius);border:1px solid var(--border-color)}.short-url{font-weight:600;color:var(--accent-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:1rem}.copy-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background-color:#fff;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;font-family:var(--font-sans)}.copy-btn:hover{background-color:var(--bg-color);border-color:#cbd5e0}.copy-btn.copied{color:var(--success-color);border-color:var(--success-color);background-color:#28a7451a}.icon{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--accent-text-color);border-radius:50%;animation:spin .8s linear infinite}.footer{text-align:center;padding-top:2rem;color:var(--text-color-light);font-size:.875rem}@media(max-width:640px){.shorten-form{flex-direction:column;width:100%}.main-card{padding:1.5rem;min-width:295px;max-width:295px}.brand-name{font-size:2.5rem}.tagline{font-size:1rem}.url-input,.submit-btn{width:100%}}