:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#080b11; color:#f5f7fb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background: radial-gradient(circle at top left, #17365c, #080b11 42%); }
.app { width:min(1160px, calc(100% - 32px)); margin:0 auto; padding:28px 0 48px; }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:22px; }
.eyebrow { margin:0 0 8px; color:#79b7ff; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
h1 { margin:0; font-size:clamp(30px, 5vw, 54px); line-height:.95; }
.sub { max-width:720px; margin:14px 0 0; color:#b9c4d6; font-size:16px; line-height:1.45; }
.badge { padding:10px 14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); border-radius:999px; color:#d7e7ff; white-space:nowrap; }
.panel { border:1px solid rgba(255,255,255,.12); background:rgba(10,15,24,.82); border-radius:22px; padding:18px; box-shadow: 0 18px 60px rgba(0,0,0,.28); margin:16px 0; backdrop-filter: blur(10px); }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
label { display:grid; gap:7px; color:#aebbd1; font-size:13px; font-weight:700; }
input { width:100%; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:#070a10; color:#fff; padding:13px 14px; font-size:15px; outline:none; }
input:focus { border-color:#4ba0ff; box-shadow:0 0 0 4px rgba(75,160,255,.14); }
.toolbar, .controls { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
button, .fileButton, .download, .youtube { border:none; border-radius:14px; padding:13px 17px; font-size:15px; font-weight:850; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.fileButton, .primary, .download { background:#1d75d8; color:white; }
.youtube { background:rgba(255,255,255,.09); color:#dce8f8; border:1px solid rgba(255,255,255,.14); }
.ghost { background:rgba(255,255,255,.09); color:#dce8f8; }
.fileButton input { display:none; }
.clipList { display:grid; gap:10px; margin-top:16px; }
.clipList.empty { color:#8491a7; border:1px dashed rgba(255,255,255,.18); border-radius:16px; padding:24px; text-align:center; }
.clip { display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; background:#070a10; border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:10px; }
.thumb { width:72px; height:44px; background:#101827; border-radius:10px; object-fit:cover; }
.clipName { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clipMeta { color:#8290a7; font-size:12px; margin-top:3px; }
.clipActions { display:flex; gap:7px; }
.small { padding:9px 10px; border-radius:10px; font-size:13px; background:rgba(255,255,255,.08); color:#e8f1ff; }
.danger { color:#ffb5b5; }
.previewPanel canvas { width:100%; aspect-ratio:16/9; background:#000; border-radius:18px; display:block; border:1px solid rgba(255,255,255,.1); }
.controls { margin-top:14px; }
.status { margin-top:12px; color:#aebbd1; }
progress { width:100%; height:14px; margin-top:12px; }
.hidden { display:none !important; }
@media (max-width:820px){ .hero{display:block}.badge{display:inline-block;margin-top:16px}.grid{grid-template-columns:1fr 1fr}.clip{grid-template-columns:56px 1fr}.thumb{width:56px}.clipActions{grid-column:1 / -1}.clipActions button{flex:1} }
.urlRow { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
.textareaHeader { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
textarea { width:100%; min-height:180px; resize:vertical; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:#070a10; color:#fff; padding:13px 14px; font-size:15px; line-height:1.45; outline:none; font-family:inherit; }
textarea:focus { border-color:#4ba0ff; box-shadow:0 0 0 4px rgba(75,160,255,.14); }
@media (max-width:820px){ .urlRow{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr} }
.thumbLoading { display:flex; align-items:center; justify-content:center; color:#8290a7; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.clip.dragging { opacity:.55; border-color:#4ba0ff; }