:root{--color-bg-primary:#0a0a0f;--color-bg-secondary:#12121a;--color-bg-card:hsla(0,0%,100%,.03);--color-bg-card-hover:hsla(0,0%,100%,.06);--color-text-primary:#fff;--color-text-secondary:#a1a1aa;--color-text-muted:#71717a;--color-accent-primary:#8b5cf6;--color-accent-secondary:#ec4899;--color-accent-gradient:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));--color-success:#22c55e;--color-error:#ef4444;--color-border:hsla(0,0%,100%,.08);--color-border-focus:rgba(139,92,246,.5);--font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 4px 6px -1px rgba(0,0,0,.5);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.5);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.5);--shadow-glow:0 0 40px rgba(139,92,246,.3);--transition-fast:150ms ease;--transition-base:200ms ease;--transition-slow:300ms ease}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}.background-effects{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.gradient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:float 20s ease-in-out infinite}.orb-1{width:600px;height:600px;background:var(--color-accent-primary);top:-200px;left:-200px;animation-delay:0s}.orb-2{width:500px;height:500px;background:var(--color-accent-secondary);top:50%;right:-150px;animation-delay:-7s}.orb-3{width:400px;height:400px;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));bottom:-100px;left:30%;animation-delay:-14s}@keyframes float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(10px,10px) scale(1.02)}}.container{max-width:720px;margin:0 auto;padding:var(--spacing-8) var(--spacing-6);min-height:calc(100vh - 80px)}.header{text-align:center;margin-bottom:var(--spacing-12)}.logo{display:inline-flex;align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-4)}.logo-text{font-size:1.5rem;font-weight:700;background:var(--color-accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{font-size:1.125rem;color:var(--color-text-secondary)}.shortener-card{background:var(--color-bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--spacing-8);box-shadow:var(--shadow-xl);margin-bottom:var(--spacing-8)}.url-form{gap:var(--spacing-4)}.password-wrapper,.url-form{display:flex;flex-direction:column}.password-wrapper{gap:var(--spacing-2)}.password-label{font-size:.875rem;font-weight:500;color:var(--color-text-secondary)}.password-wrapper input{padding:var(--spacing-3) var(--spacing-4);font-size:.875rem;font-family:inherit;color:var(--color-text-primary);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);outline:none;transition:var(--transition-base)}.password-wrapper input::placeholder{color:var(--color-text-muted)}.password-wrapper input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(139,92,246,.15)}.input-wrapper{display:flex;gap:var(--spacing-3);flex-wrap:wrap}.input-wrapper input{flex:1 1;min-width:200px;padding:var(--spacing-4) var(--spacing-5);font-size:1rem;font-family:inherit;color:var(--color-text-primary);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);outline:none;transition:var(--transition-base)}.input-wrapper input::placeholder{color:var(--color-text-muted)}.input-wrapper input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(139,92,246,.15)}.submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-4) var(--spacing-8);font-size:1rem;font-weight:600;font-family:inherit;color:#fff;background:var(--color-accent-gradient);border:none;border-radius:var(--radius-xl);cursor:pointer;transition:var(--transition-base);min-width:120px}.submit-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.submit-btn:active{transform:translateY(0)}.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.spinner{width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-message{color:var(--color-error);font-size:.875rem;padding:var(--spacing-2) var(--spacing-4);background:rgba(239,68,68,.1);border-radius:var(--radius-md);border-left:3px solid var(--color-error)}.result-container{margin-top:var(--spacing-6);padding-top:var(--spacing-6);border-top:1px solid var(--color-border);animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-header{display:flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-4);color:var(--color-success);font-weight:500}.success-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-success);color:#fff;border-radius:var(--radius-full);font-size:.75rem}.result-url-wrapper{display:flex;gap:var(--spacing-2);margin-bottom:var(--spacing-3)}.result-url{flex:1 1;padding:var(--spacing-4) var(--spacing-5);font-size:1rem;font-family:inherit;font-weight:500;color:var(--color-accent-primary);border:1px solid var(--color-accent-primary);border-radius:var(--radius-lg);outline:none}.copy-btn,.result-url{background:var(--color-bg-secondary)}.copy-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-base)}.copy-btn:hover{color:var(--color-accent-primary);border-color:var(--color-accent-primary);background:rgba(139,92,246,.1)}.copy-btn.copied{color:var(--color-success);border-color:var(--color-success);background:rgba(34,197,94,.1)}.original-url{font-size:.875rem;color:var(--color-text-muted);word-break:break-all}.original-url:before{content:"→ "}.history-section{margin-bottom:var(--spacing-8)}.section-title{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-4);color:var(--color-text-secondary)}.history-list{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-3)}.history-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:var(--transition-base)}.history-list li:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-focus)}.history-list .short-url{color:var(--color-accent-primary);font-weight:500;text-decoration:none}.history-list .short-url:hover{text-decoration:underline}.history-list .original{flex:1 1;font-size:.875rem;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-gap:var(--spacing-6);gap:var(--spacing-6);margin-top:var(--spacing-12)}.feature{text-align:center;padding:var(--spacing-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);transition:var(--transition-base)}.feature:hover{transform:translateY(-4px);border-color:var(--color-border-focus);box-shadow:var(--shadow-lg)}.feature-icon{font-size:2rem;margin-bottom:var(--spacing-3)}.feature h3{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-2)}.feature p{font-size:.875rem;color:var(--color-text-secondary);line-height:1.5}.footer{text-align:center;padding:var(--spacing-6);color:var(--color-text-muted);font-size:.875rem}.footer a{color:var(--color-accent-primary);text-decoration:none;transition:var(--transition-fast)}.footer a:hover{text-decoration:underline}@media (max-width:640px){.container{padding:var(--spacing-6) var(--spacing-4)}.shortener-card{padding:var(--spacing-6)}.input-wrapper{flex-direction:column}.submit-btn{width:100%}.result-url-wrapper{flex-direction:column}.copy-btn{width:100%}.history-list li{flex-direction:column;align-items:flex-start}.history-list .original{white-space:normal}}