:root { --bg:#0f1115; --card:#1a1d24; --line:#2a2f3a; --fg:#e8eaed; --mut:#9aa0aa; --acc:#e5484d; --ok:#3fb950; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Sarabun", "Noto Sans Thai", system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:14px; }
header h1 { font-size:18px; margin:0; }
header .sub { color:var(--mut); font-size:13px; }
section { padding:20px 24px; max-width:1200px; margin:0 auto; }

#search { width:100%; max-width:360px; padding:10px 12px; margin-bottom:18px; background:var(--card); border:1px solid var(--line); border-radius:8px; color:var(--fg); font-size:14px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; transition:transform .1s, border-color .1s; }
.card:hover { transform:translateY(-2px); border-color:var(--acc); }
.card .thumb { aspect-ratio:9/16; background:#000 center/cover no-repeat; }
.card .meta { padding:8px 10px; }
.card .t { font-size:13px; line-height:1.3; max-height:2.6em; overflow:hidden; }
.card .d { font-size:11px; color:var(--mut); margin-top:4px; display:flex; gap:6px; }
.badge { background:#23303a; color:#7fd1ff; padding:1px 6px; border-radius:6px; font-size:10px; }

.pager { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
.pager button.ghost { margin-bottom:0; }
.pager button:disabled { opacity:.4; cursor:default; }

.status { color:var(--mut); font-size:13px; }
.warn { color:var(--acc); font-size:12px; }

/* editor */
.editor-wrap { display:flex; gap:24px; flex-wrap:wrap; }
#player { width:340px; max-width:100%; aspect-ratio:9/16; background:#000; border-radius:10px; }
.controls { flex:1; min-width:280px; display:flex; flex-direction:column; gap:12px; }
.controls label { display:block; font-size:13px; color:var(--mut); }
.controls input[type=range] { width:100%; margin-top:6px; }
.controls .row { display:flex; gap:10px; flex-wrap:wrap; }
.dur { font-size:14px; }
.chk { display:flex; align-items:center; gap:8px; color:var(--fg); }

button { background:var(--card); color:var(--fg); border:1px solid var(--line); padding:9px 14px; border-radius:8px; cursor:pointer; font-size:13px; }
button:hover { border-color:var(--acc); }
button.primary { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; }
button.primary:disabled { opacity:.5; cursor:not-allowed; }
button.ghost { background:none; border:none; color:var(--mut); padding:4px 0; margin-bottom:8px; }
h2 { font-size:16px; }

/* login */
.login-box { max-width:320px; margin:60px auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px 24px; display:flex; flex-direction:column; gap:12px; }
.login-box h2 { margin:0 0 6px; }
.login-box input { padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--fg); font-size:14px; }
.login-box button { margin-top:4px; }