html{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}*{box-sizing:border-box}button,input{font-family:inherit}.app{color:#101936;background:#f7f8fc;min-height:100vh}.header{color:#fff;background:linear-gradient(110deg,#3157dc,#6643d8);justify-content:space-between;align-items:center;height:78px;padding:0 48px;display:flex}.header-left{align-items:center;gap:14px;display:flex}.logo{color:#4054d8;background:#fff;border-radius:8px;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.header h1{margin:0;font-size:23px;font-weight:700}.theme-button{color:#fff;cursor:pointer;background:#ffffff1f;border:none;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.main{max-width:1450px;margin:0 auto;padding:30px 42px 25px}.hero{background:radial-gradient(circle at 10% 20%,#7450ff1f,#0000 25%),linear-gradient(110deg,#f5f0ff,#fff 55%,#f0f4ff);border:1px solid #e6e8f4;border-radius:18px;justify-content:center;align-items:center;min-height:265px;display:flex;position:relative;overflow:hidden}.hero-content{text-align:center;z-index:2;width:100%;max-width:1000px;position:relative}.hero h2{letter-spacing:-1.5px;margin:0 0 8px;font-size:48px;font-weight:750;line-height:1.1}.hero p{color:#58627a;margin:0 0 28px;font-size:18px}.hero-decoration{pointer-events:none;position:absolute}.circle{background:#5267e714;border-radius:50%;width:180px;height:180px;top:20px;right:45px}.dots{grid-template-columns:repeat(3,7px);gap:8px;display:grid;top:45px;left:40px}.dots span{background:#d9d2ff;border-radius:50%;width:7px;height:7px}.shorten-form{gap:12px;width:100%;display:flex}.input-wrapper{background:#fff;border:1px solid #dfe2ec;border-radius:11px;flex:1;align-items:center;gap:14px;height:62px;padding:0 20px;display:flex;box-shadow:0 8px 25px #252d5514}.input-wrapper svg{color:#647086;flex-shrink:0}.input-wrapper input{color:#17213e;border:none;outline:none;width:100%;font-size:17px}.input-wrapper input::placeholder{color:#8a92a7}.shorten-button{color:#fff;cursor:pointer;background:linear-gradient(110deg,#4359e6,#7043d8);border:none;border-radius:10px;justify-content:center;align-items:center;gap:10px;min-width:174px;height:62px;font-size:16px;font-weight:650;transition:all .2s;display:flex;box-shadow:0 8px 20px #4c48d340}.shorten-button:hover{transform:translateY(-1px);box-shadow:0 10px 25px #4c48d359}.shorten-button:disabled{opacity:.7;cursor:not-allowed}.example{color:#69738a;margin-top:15px;font-size:15px}.example span{color:#6c63df}.success-message,.error-message{border-radius:12px;align-items:center;gap:16px;min-height:80px;margin-top:24px;padding:16px 20px;display:flex}.success-message{color:#168542;background:#f1fff6;border:1px solid #b7e7cb}.error-message{color:#c52b2b;background:#fff4f4;border:1px solid #f0b9b9}.success-icon{background:#d8f5e2;border-radius:10px;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.success-message strong,.error-message strong{font-size:17px;display:block}.success-message p,.error-message p{opacity:.85;margin:4px 0 0}.message-close{cursor:pointer;color:inherit;background:0 0;border:none;margin-left:auto}.url-section{margin-top:32px}.section-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;display:flex}.section-header h2{letter-spacing:-.5px;margin:0;font-size:25px}.section-actions{gap:12px;display:flex}.search-box{background:#fff;border:1px solid #dfe2ec;border-radius:9px;align-items:center;gap:10px;width:290px;height:46px;padding:0 14px;display:flex}.search-box svg{color:#69738a}.search-box input{border:none;outline:none;width:100%;font-size:14px}.refresh-button{color:#624be0;cursor:pointer;background:#fff;border:1px solid #c9c5fa;border-radius:9px;align-items:center;gap:8px;height:46px;padding:0 18px;font-size:15px;font-weight:600;display:flex}.refresh-button:hover{background:#f8f6ff}.url-list{flex-direction:column;gap:10px;display:flex}.url-card{background:#fff;border:1px solid #e4e6ee;border-radius:13px;justify-content:space-between;align-items:center;gap:25px;min-height:105px;padding:18px 26px;transition:all .2s;display:flex;position:relative;overflow:hidden;box-shadow:0 5px 16px #20294b0d}.url-card:before{content:"";background:#5d4cda;width:5px;position:absolute;top:0;bottom:0;left:0}.url-card:nth-child(2):before{background:#2878ed}.url-card:nth-child(3):before{background:#19ae99}.url-card:hover{transform:translateY(-2px);box-shadow:0 9px 25px #20294b17}.url-card-left{align-items:center;gap:22px;min-width:0;display:flex}.url-icon{border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:58px;height:58px;display:flex}.icon-0{color:#624be0;background:#eeeaff}.icon-1{color:#2776e9;background:#eaf2ff}.icon-2{color:#14a991;background:#e5faf5}.url-details{min-width:0}.url-details h3{margin:0 0 7px;font-size:18px;font-weight:650}.original-url{text-overflow:ellipsis;white-space:nowrap;color:#69738a;max-width:560px;margin:0;font-size:15px;overflow:hidden}.url-card-right{align-items:center;gap:12px;display:flex}.short-url{background:#f1efff;border-radius:8px;align-items:center;width:320px;height:45px;padding:0 16px;display:flex;overflow:hidden}.short-url a{white-space:nowrap;text-overflow:ellipsis;color:#5d42d5;width:100%;font-family:monospace;font-size:14px;text-decoration:none;overflow:hidden}.short-url a:hover{text-decoration:underline}.copy-button{color:#566078;cursor:pointer;background:#fff;border:1px solid #dfe2ec;border-radius:8px;justify-content:center;align-items:center;width:46px;height:45px;transition:all .2s;display:flex}.copy-button:hover{color:#5140cf;background:#f5f5fb}.delete-button{color:#e02929;cursor:pointer;background:#fff;border:1px solid #ffb5b5;border-radius:8px;align-items:center;gap:8px;height:45px;padding:0 18px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.delete-button:hover{background:#fff3f3}.empty-state{color:#7a8296;background:#fff;border:1px dashed #d8dbe6;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:220px;display:flex}.empty-state h3{color:#252e49;margin:5px 0 0}.empty-state p{margin:0}.footer{background:#fff;border:1px solid #e5e6ef;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:95px;margin-top:38px;display:flex;position:relative}.footer p{color:#667088;margin:10px 0 0}.footer span{color:#5545db;font-weight:600}.rocket{color:#fff;background:linear-gradient(120deg,#4359e6,#6d42d6);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex;position:absolute;top:-23px;box-shadow:0 7px 16px #4c45d54d}.spin{animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=1100px){.url-card{flex-direction:column;align-items:stretch}.url-card-right{width:100%}.short-url{flex:1}.original-url{max-width:100%}}@media (width<=750px){.header{padding:0 20px}.main{padding:20px 15px}.hero{padding:35px 20px}.hero h2{font-size:36px}.hero p{font-size:16px}.shorten-form{flex-direction:column}.shorten-button{width:100%}.section-header{flex-direction:column;align-items:stretch}.section-actions{flex-direction:column}.search-box{width:100%}.url-card-right{flex-wrap:wrap}.short-url{flex:none;width:100%}.copy-button{flex:1}.delete-button{flex:1;justify-content:center}.url-card-left{align-items:flex-start}.original-url{white-space:normal;word-break:break-all}.circle{display:none}}