@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.tiktok-downloader{min-height:100vh;padding:20px;transition:all .3s ease}.tiktok-downloader.dark{background:linear-gradient(135deg,#1e3c72,#2a5298)}.tiktok-downloader.light{background:linear-gradient(135deg,#667eea,#764ba2)}.container{max-width:1000px;margin:0 auto;padding:20px}.top-bar{justify-content:space-between;margin-bottom:30px;flex-wrap:wrap}.logo,.top-bar{display:flex;align-items:center;gap:15px}.logo{flex:1 1}.logo-icon{width:50px;height:50px;background:linear-gradient(45deg,#ff0050,#00f2ea);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;font-weight:700}.title{font-size:2.5rem;font-weight:800;background:linear-gradient(45deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}.controls{display:flex;gap:10px;flex-wrap:wrap}.btn{padding:12px 20px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .3s ease;border:none}.btn-secondary{background:hsla(0,0%,100%,.1);color:#fff;border:1px solid hsla(0,0%,100%,.2)}.btn-secondary:hover{background:hsla(0,0%,100%,.2);transform:translateY(-2px)}.main-grid{display:grid;grid-gap:30px;gap:30px;align-items:start}.main-grid.with-history{grid-template-columns:1fr 350px}.main-content{display:flex;flex-direction:column;gap:30px}.subtitle{font-size:1.1rem;color:hsla(0,0%,100%,.8);margin-bottom:30px;font-weight:300;text-align:center}.card{background:hsla(0,0%,100%,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:30px;border:1px solid hsla(0,0%,100%,.2);box-shadow:0 8px 32px rgba(0,0,0,.1)}.input-group{display:flex;gap:15px;margin-bottom:15px}.url-input{flex:1 1;padding:16px 20px;border:none;border-radius:12px;font-size:16px;background:hsla(0,0%,100%,.1);color:#fff;outline:none}.url-input::placeholder{color:hsla(0,0%,100%,.7)}.url-input.light{background:hsla(0,0%,100%,.9);color:#000}.url-input.light::placeholder{color:rgba(0,0,0,.6)}.btn-primary{padding:16px 32px;background:linear-gradient(45deg,#ff0050,#ff0080);color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;min-width:140px;transition:all .3s ease}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,0,80,.4)}.btn-primary:disabled{background:linear-gradient(45deg,#ff6b6b,#ee5a24);cursor:not-allowed;opacity:.7}.loading-spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.error-message{background:hsla(0,100%,70%,.2);color:#ff6b6b;padding:12px 16px;border-radius:10px;border:1px solid hsla(0,100%,70%,.3)}.error-message,.success-header{display:flex;align-items:center;gap:10px}.success-header{margin-bottom:20px}.success-icon{width:40px;height:40px;background:linear-gradient(45deg,#00f2ea,#00b894);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.success-title{font-size:1.5rem;font-weight:600;color:#fff;margin:0}.thumbnail{margin-bottom:20px;border-radius:15px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.2)}.thumbnail img{width:100%;height:auto;display:block}.action-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:15px}.btn-success{padding:12px 24px;background:linear-gradient(45deg,#00f2ea,#00b894);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .3s ease}.btn-success:hover{transform:translateY(-2px)}.video-title{margin-top:10px;color:hsla(0,0%,100%,.8);font-style:italic;font-size:14px;text-align:center}.download-status{margin-top:15px;padding:12px;background:rgba(0,242,234,.1);border-radius:10px;border:1px solid rgba(0,242,234,.3);display:flex;align-items:center;gap:10px;justify-content:center}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:20px;gap:20px}.feature-card{background:hsla(0,0%,100%,.05);padding:20px;border-radius:15px;text-align:center;border:1px solid hsla(0,0%,100%,.1)}.feature-icon{font-size:2rem;margin-bottom:10px}.feature-title{color:#fff;margin:0 0 8px;font-size:1.1rem}.feature-desc{color:hsla(0,0%,100%,.7);margin:0;font-size:.9rem}.history-sidebar{background:hsla(0,0%,100%,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:20px;border:1px solid hsla(0,0%,100%,.2);box-shadow:0 8px 32px rgba(0,0,0,.1);max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid hsla(0,0%,100%,.2)}.history-title{color:#fff;margin:0;font-size:1.2rem}.btn-clear{padding:6px 12px;background:hsla(0,100%,70%,.2);color:#ff6b6b;border:1px solid hsla(0,100%,70%,.3);border-radius:6px;cursor:pointer;font-size:12px;font-weight:600}.history-list{overflow-y:auto;flex:1 1}.history-empty{text-align:center;color:hsla(0,0%,100%,.6);padding:40px 20px;font-size:14px}.history-item{background:hsla(0,0%,100%,.05);padding:15px;border-radius:10px;margin-bottom:10px;border:1px solid hsla(0,0%,100%,.1);cursor:pointer;transition:all .2s ease}.history-item:hover{background:hsla(0,0%,100%,.1)}.history-content{display:flex;gap:12px;align-items:start}.history-thumb{width:50px;height:50px;border-radius:8px;object-fit:cover}.history-details{flex:1 1;min-width:0}.history-item-title{color:#fff;margin:0 0 5px;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.history-time{color:hsla(0,0%,100%,.6);margin:0;font-size:11px}.history-type{color:#00f2ea;margin:5px 0 0;font-size:11px;font-weight:600}.footer{margin-top:40px;text-align:center;color:hsla(0,0%,100%,.6);font-size:14px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.title{font-size:1.8rem}.input-group{flex-direction:column}.main-grid.with-history{grid-template-columns:1fr}.top-bar{flex-direction:column;align-items:stretch}.controls{justify-content:center}}