*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;display:flex;align-items:center;justify-content:center}#app{width:100%;max-width:600px;padding:2rem}.container{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:3rem;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.1)}h1{color:#fff;text-align:center;margin-bottom:.5rem;font-size:2rem}.subtitle{color:#888;text-align:center;margin-bottom:2rem;font-size:1rem}.input-group{display:flex;flex-direction:column;gap:1rem}.youtube-input{width:100%;padding:1rem 1.25rem;font-size:1rem;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0d;color:#fff;outline:none;transition:border-color .3s,box-shadow .3s}.youtube-input::placeholder{color:#666}.youtube-input:focus{border-color:red;box-shadow:0 0 20px #f003}.submit-btn{padding:1rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,red,#c00);border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #f006}.submit-btn:active{transform:translateY(0)}.message{margin-top:1.5rem;padding:1rem;border-radius:8px;text-align:center;font-size:.9rem}.message.success{background:#00ff641a;color:#00ff64;border:1px solid rgba(0,255,100,.2)}.message.error{background:#ff00001a;color:#ff6464;border:1px solid rgba(255,0,0,.2)}.message.loading{background:#6464ff1a;color:#88f;border:1px solid rgba(100,100,255,.2)}.video-card{margin-top:2rem;background:#ffffff08;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.video-thumbnail{width:100%;aspect-ratio:16 / 9;object-fit:cover}.video-details{padding:1.25rem}.video-title{color:#fff;font-size:1.1rem;font-weight:600;margin-bottom:.5rem;line-height:1.4}.video-channel{color:#888;font-size:.9rem;margin-bottom:.5rem}.video-stats{display:flex;gap:.75rem;flex-wrap:wrap}.video-duration,.video-views,.video-likes{display:inline-block;background:#ffffff1a;color:#ccc;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-weight:500}.generate-btn{width:100%;padding:1rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;cursor:pointer;transition:opacity .2s}.generate-btn:hover:not(:disabled){opacity:.9}.generate-btn:disabled{opacity:.6;cursor:not-allowed}.titles-section{margin-top:2rem}.titles-section h3{color:#fff;font-size:1.1rem;margin-bottom:1rem}.titles-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.title-item{display:flex;align-items:center;gap:.75rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.875rem 1rem}.title-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-radius:50%;font-size:.75rem;font-weight:600;flex-shrink:0}.title-text{flex:1;color:#ddd;font-size:.95rem;line-height:1.4}.copy-btn{padding:.4rem .75rem;font-size:.8rem;font-weight:500;color:#888;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;transition:all .2s;flex-shrink:0}.copy-btn:hover{background:#ffffff1a;color:#fff}