:root {
  --bg:#0b0c0f; --fg:#e6e7ee; --muted:#a2a7b0; --acc:#8aa0ff;
  --card:#121419; --line:#1c1f26; --ok:#33d17a; --bad:#ff6b6b;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--fg); }
.container { max-width:1024px; margin:48px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.anim-card { background:#0f1218; border:1px solid var(--line); border-radius:16px; padding:16px; margin:16px 0; }
.header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1 { font-size:28px; margin:0 0 12px; }
h2 { font-size:20px; margin:24px 0 8px; }
p { color:var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.btn { display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:var(--fg); background:#161a22; cursor:pointer; transition:.2s transform ease; }
.btn:hover { border-color:#2a2f3a; transform: translateY(-1px); }
.btn-prim { background:var(--acc); color:#14161b; border-color:transparent; font-weight:600; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.full { grid-column:1 / -1; }
input, select { width:100%; background:#0f1218; color:var(--fg); border:1px solid var(--line); border-radius:12px; padding:10px; }
label { display:block; font-weight:600; margin:8px 0 6px; }
.small { font-size:12px; color:var(--muted); }
.bad { color:var(--bad); }
.ok { color:var(--ok); }
hr { border:none; border-top:1px solid var(--line); margin:16px 0; }

.playlist { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); }
.playlist:last-child { border-bottom:none; }
.cover { width:40px; height:40px; background:#222; border-radius:8px; overflow:hidden; }
.cover img { width:100%; height:100%; object-fit:cover; }

.mode-row { display:flex; align-items:center; gap:12px; }
.switch { position:relative; width:180px; height:40px; border-radius:999px; background:#141923; border:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 16px; color:var(--muted); transition:.25s ease; }
.switch .knob { position:absolute; top:3px; left:3px; width:86px; height:34px; background:var(--acc); border-radius:999px; transition:.25s ease; }
.switch.right .knob { transform: translateX(91px); }
.switch .label { position:relative; z-index:2; font-weight:600; }
.switch .label.left { color:#0f1218; }
.switch.right .label.left { color:var(--muted); }
.switch.right .label.right { color:#0f1218; }

.anim-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.anim-actions { display:flex; gap:8px; }

.timeline { margin-top:12px; }
.thumbs { display:flex; gap:8px; overflow-x:auto; padding:8px; border:1px dashed var(--line); border-radius:12px; scroll-snap-type:x mandatory; }
.thumb { position:relative; width:96px; height:96px; border-radius:12px; overflow:hidden; background:#1a1f2b; border:1px solid var(--line); cursor:grab; scroll-snap-align:center; transition:.15s ease; user-select: none; touch-action: manipulation; }
.thumb.dragging { opacity:.6; transform:scale(.96); }
.thumb.active {outline: 2px solid var(--acc); outline-offset: 2px; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; image-rendering:auto; }
.thumb-order { position:absolute; top:6px; left:6px; background:rgba(0,0,0,.45); padding:2px 6px; border-radius:8px; font-size:12px; }
.thumb-time { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.45); padding:2px 6px; border-radius:8px; font-size:12px; }
.slider { width:100%; margin:8px 0; }
.seg { display:flex; gap:6px; }
.seg-btn { padding:8px 12px; border-radius:10px; background:#141923; border:1px solid var(--line); color:var(--muted); cursor:pointer; cursor: pointer;}
.seg-btn.active { background:var(--acc); color:#0e1117; border-color:transparent; }
.save-row { display:flex; justify-content:flex-end; margin-top:8px; }

.modal { position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); z-index:100; }
.modal-content { background:#121419; border:1px solid var(--line); padding:16px; border-radius:12px; width:320px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }