:root{color:#f5f7ff;--color-primary:#1184ff;--color-on-primary:#f7fbff;--color-surface:#111a28d9;--color-surface-alt:#152130d9;--color-border:#ffffff14;--color-text-soft:#ebf4ffa6;background:radial-gradient(circle at 0 0,#18253a,#0c1623 55%,#05080c 100%);min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-height:100vh;margin:0}#root{min-height:100vh}a{color:inherit}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ffffff0f}::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#fff6}.app{flex-direction:column;gap:2.25rem;max-width:960px;margin:0 auto;padding:3rem 1.5rem 4rem;display:flex}.header{justify-content:space-between;align-items:center;gap:1.5rem;display:flex}.header h1{margin:0 0 .35rem;font-size:2.2rem}.header p{color:var(--color-text-soft);margin:0;font-size:1rem}.refresh{background:var(--color-surface-alt);cursor:pointer;border:1px solid #0000;border-radius:999px;padding:.6rem 1.4rem;font-size:.95rem;transition:transform .2s,border-color .2s}.refresh:disabled{opacity:.6;cursor:not-allowed}.refresh:not(:disabled):hover{border-color:var(--color-border);transform:translateY(-1px)}.upload-panel,.viewer,.clip-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:1.25rem;flex-direction:column;gap:1.5rem;padding:1.9rem;display:flex;box-shadow:0 20px 40px -28px #0009}.dropzone{text-align:center;background:var(--color-surface-alt);cursor:pointer;border:2px dashed #ffffff38;border-radius:1.1rem;outline:none;padding:2.5rem 1.75rem;transition:border-color .2s,background .2s,transform .2s}.dropzone.dragging{border-color:var(--color-primary);background:#1184ff1f;transform:translateY(-1px)}.dropzone.uploading{background:#1184ff14;border-color:#1184ff59}.dropzone .title{margin:0 0 .35rem;font-size:1.35rem;font-weight:600}.dropzone .hint{color:var(--color-text-soft);margin:0}.dropzone .accent{color:var(--color-primary);font-weight:600}.progress-wrapper{flex-direction:column;align-items:center;gap:.75rem;margin-top:1.5rem;display:flex}.progress-track{background:#ffffff1f;border-radius:999px;width:100%;height:.65rem;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#1184ff,#5b9dff);height:100%;transition:width .18s}.transfer-stats{color:var(--color-text-soft);flex-wrap:wrap;justify-content:center;gap:1rem;font-size:.9rem;display:flex}.transfer-stats span{white-space:nowrap}.status{color:var(--color-text-soft);margin:0}.error{color:#ff8a80;background:#ef53502e;border:1px solid #ef535066;border-radius:.85rem;padding:1rem 1.25rem}.share-result{background:#1184ff1f;border:1px solid #1184ff73;border-radius:1rem;flex-direction:column;gap:.75rem;padding:1rem 1.2rem;display:flex}.share-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-soft);font-size:.9rem}.share-link{flex-wrap:wrap;align-items:center;gap:.9rem;display:flex}.share-link a{color:var(--color-primary);word-break:break-all;font-weight:600;text-decoration:none}.share-link a:hover{text-decoration:underline}.share-hint{color:var(--color-text-soft);margin:0;font-size:.9rem}.copy{cursor:pointer;background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:999px;padding:.6rem 1.35rem;font-weight:600;transition:opacity .2s,transform .2s}.copy.secondary{color:var(--color-text-soft);background:#ffffff1f;border:1px solid #ffffff2e}.copy.secondary:hover{color:var(--color-on-primary);border-color:var(--color-primary)}.copy:hover{transform:translateY(-1px)}.viewer h2,.clip-panel h2{margin:0}.video-player{background:#000;border-radius:1rem;width:100%;max-height:540px}.viewer-meta{color:var(--color-text-soft);flex-wrap:wrap;gap:.75rem;font-size:.95rem;display:flex}.viewer-meta .tag{color:var(--color-on-primary);background:#ffffff1f;border-radius:999px;padding:.35rem .8rem;font-weight:600}.action-link{color:var(--color-primary);font-weight:600;text-decoration:none}.action-link:hover{text-decoration:underline}.panel-header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.clip-list{flex-direction:column;gap:.9rem;margin:0;padding:0;list-style:none;display:flex}.clip-row{background:var(--color-surface-alt);border:1px solid #0000;border-radius:.95rem;justify-content:space-between;align-items:center;gap:1.25rem;padding:1rem 1.2rem;transition:border-color .2s,transform .2s;display:flex}.clip-row:hover{border-color:#1184ff66;transform:translateY(-1px)}.clip-row.active{border-color:var(--color-primary)}.clip-row.active .clip-title{color:var(--color-primary)}.clip-info{text-align:left;color:inherit;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;gap:.2rem;padding:0;display:flex}.clip-info:focus{outline:none;text-decoration:underline}.clip-title{text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:600;overflow:hidden}.clip-meta{color:var(--color-text-soft);font-size:.85rem}.clip-actions{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.danger{color:#ff8a80;cursor:pointer;background:#ef53501f;border:1px solid #ef535066;border-radius:999px;padding:.55rem 1.1rem;transition:background .2s}.danger:hover{background:#ef535038}@media (max-width:880px){.app{gap:2rem}.header,.panel-header,.clip-row{flex-direction:column;align-items:flex-start}.clip-actions{width:100%}.copy.secondary,.danger{text-align:center;width:100%}}