:root{--bg:#f3f3f1;--card:#fff;--bd:#d9d9d3;--tx:#1b1b19;--mut:#66665f;--ac:#2e5c8a;--acx:#fff;--hi:#e9eff5;--warn:#8a6512;--err:#a03c3c;--ok:#3d6b4d;--r:10px}
[data-theme=dark]{--bg:#131313;--card:#1c1c1b;--bd:#333330;--tx:#e6e6e2;--mut:#9b9b93;--ac:#7ba6cf;--acx:#101010;--hi:#222a32;--warn:#cfae60;--err:#d69090;--ok:#93b9a1}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
h2{font-size:16px;margin:24px 0 10px}
p{margin:0 0 6px}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.bar{background:var(--card);border-bottom:1px solid var(--bd)}
.bar-in{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap}
.brand{font-size:18px;letter-spacing:-.01em}
.tabs{display:flex;gap:4px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;cursor:pointer;color:var(--mut)}
.tabs button[aria-selected=true]{color:var(--tx);border-bottom-color:var(--ac)}
.ctl{margin-left:auto;display:flex;gap:8px;align-items:center}
.seg{display:flex;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.seg button{background:none;border:0;padding:6px 12px;cursor:pointer;min-height:36px}
.seg button[aria-pressed=true]{background:var(--ac);color:var(--acx)}
.wrap{max-width:1200px;margin:0 auto;padding:24px 20px 60px}
.btn{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:8px 14px;min-height:40px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn:hover:not(:disabled){background:var(--hi)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.btn.pri:hover:not(:disabled){filter:brightness(1.08);background:var(--ac)}
.btn.sm{min-height:36px;padding:5px 11px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.drop{border:2px dashed var(--bd);border-radius:12px;padding:44px 20px;text-align:center;cursor:pointer;background:var(--card);transition:background .15s,border-color .15s}
.drop:hover{border-color:var(--mut)}
.drop.over{border:2px solid var(--ac);background:var(--hi)}
.dt{font-size:18px;font-weight:600}
.hint{color:var(--mut);font-size:13px;margin-top:10px}
.err{color:var(--err);min-height:0;margin:8px 0 0}
.err:empty{display:none}
.note{color:var(--mut);font-size:13px}
.note:empty{display:none}
.warn{color:var(--warn);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:12px 0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.row.sp{margin:6px 0 0}
.two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;margin-top:20px;align-items:start}
video{width:100%;max-height:440px;background:#000;border-radius:var(--r)}
.info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;padding:14px 16px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r)}
.info dt{color:var(--mut)}
.info dd{margin:0;overflow-wrap:anywhere}
select,input[type=number]{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;min-height:40px}
input[type=number]{width:110px}
.prog{margin:16px 0;padding:14px 16px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r)}
.prog .stat{font-weight:600}
.prog .row{justify-content:space-between}
.prog .pct{margin-left:auto}
progress{display:block;width:100%;height:8px;border:0;border-radius:4px;overflow:hidden;background:var(--bd);appearance:none;-webkit-appearance:none}
progress::-webkit-progress-bar{background:var(--bd)}
progress::-webkit-progress-value{background:var(--ac)}
progress::-moz-progress-bar{background:var(--ac)}
.gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fr{background:var(--card);border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.fr .th{display:block;width:100%;padding:0;border:0;background:#000;cursor:zoom-in}
.fr img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain}
.fr .m{display:flex;gap:8px;align-items:flex-start;padding:8px;font-size:12px;cursor:pointer}
.fr .m span{display:flex;flex-direction:column;min-width:0}
.fr small{color:var(--mut)}
.fr input{width:18px;height:18px;margin:0;flex:none}
.pager{justify-content:center}
.flist{list-style:none;margin:12px 0;padding:0;display:grid;gap:6px;max-height:440px;overflow:auto}
.flist li{display:grid;grid-template-columns:34px 56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;background:var(--card);border:1px solid var(--bd);border-radius:8px;cursor:grab}
.flist li.drag{opacity:.4}
.flist li.over{border-color:var(--ac);background:var(--hi)}
.flist img{width:56px;height:40px;object-fit:cover;border-radius:4px;background:#000}
.flist .n{color:var(--mut);text-align:right}
.flist .d{display:flex;flex-direction:column;min-width:0}
.flist b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flist small{color:var(--mut)}
.bt{display:flex;gap:4px}
.ic{background:none;border:1px solid var(--bd);border-radius:6px;width:34px;height:34px;cursor:pointer}
.ic:hover{background:var(--hi)}
.fs{border:1px solid var(--bd);border-radius:var(--r);padding:12px 14px;margin:14px 0;background:var(--card)}
.fs legend{padding:0 6px}
.fmt{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;cursor:pointer}
.fmt.off{opacity:.65;cursor:not-allowed}
.fmt span{display:flex;flex-direction:column}
.fmt small{color:var(--mut)}
.toasts{position:fixed;left:16px;right:16px;bottom:16px;max-width:400px;margin-left:auto;display:flex;flex-direction:column;gap:8px;z-index:20}
.toast{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:10px 12px;background:var(--card);border:1px solid var(--bd);border-left:3px solid var(--mut);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.toast.error{border-left-color:var(--err)}
.toast.ok{border-left-color:var(--ok)}
.toast.warn{border-left-color:var(--warn)}
dialog{padding:0;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--tx);width:min(900px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.m-in{padding:16px}
.m-in img{display:block;max-width:100%;max-height:68vh;margin:12px auto;background:#000}
.m-in #mTime{color:var(--mut);margin-left:10px}
@media(max-width:800px){.two{grid-template-columns:minmax(0,1fr)}.wrap{padding:16px 14px 60px}.bar-in{padding:10px 14px}.ctl{margin-left:0}.btn{min-height:44px}.flist li{grid-template-columns:24px 44px minmax(0,1fr) auto;gap:8px}.flist img{width:44px;height:34px}.row>.btn.pri,.row>.btn:not(.sm){flex:1 1 auto}}
.about{margin-top:48px;padding-top:24px;border-top:1px solid var(--bd)}
.about h2{font-size:18px;margin:0 0 8px}
.about h3{font-size:15px;margin:0 0 4px}
.about p{color:var(--mut);max-width:70ch}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin-top:20px}
@media(max-width:800px){.about-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}