:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0e1116; color: #dbe2ea; }
header { display: flex; align-items: baseline; gap: .6rem; padding: 1rem 1.2rem; border-bottom: 1px solid #232a33; }
.brand { font-size: 1.25rem; font-weight: 700; color: #7db4e8; text-decoration: none; }
.sub { color: #6b7684; font-size: .85rem; }
main { max-width: 860px; margin: 1rem auto; padding: 0 1rem; display: grid; gap: 1rem; }
.card { background: #151b23; border: 1px solid #232a33; border-radius: 10px; padding: 1rem 1.2rem; }
h2 { margin: .2rem 0 .8rem; font-size: 1.05rem; }
textarea, select { background: #0e1116; color: #dbe2ea; border: 1px solid #2b3542; border-radius: 8px; padding: .6rem; font: inherit; width: 100%; }
.row { display: flex; gap: .8rem; align-items: center; margin-top: .6rem; }
button { background: #2f6fdb; color: #fff; border: 0; border-radius: 8px; padding: .55rem 1.1rem; font: inherit; cursor: pointer; }
button:hover { background: #3b7ce8; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #232a33; }
th { color: #6b7684; font-weight: 600; }
a { color: #7db4e8; }
.badge { background: #1d2836; border-radius: 6px; padding: .1rem .45rem; font-size: .78rem; }
.badge.youtube { color: #ef9a9a; }
.badge.instagram { color: #ce93d8; }
.state { font-size: .78rem; border-radius: 6px; padding: .1rem .45rem; background: #22303f; }
.state.done { background: #1d3b2a; color: #8fe3ae; }
.state.failed { background: #452029; color: #f2a0ad; }
.state.duplicate { background: #3c3415; color: #e8d38f; }
.url { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty, .err { color: #8a97a6; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .92rem; }
dt { color: #6b7684; }
dd { margin: 0; }
input[type=text] { background: #0e1116; color: #dbe2ea; border: 1px solid #2b3542; border-radius: 8px; padding: .6rem; font: inherit; }
.tag { font-size: .8rem; color: #6b7684; border: 1px solid #232a33; border-radius: 6px; padding: .2rem .5rem; }
.title-main { font-size: 1.25rem; }
.url-line { margin: .2rem 0 .6rem; font-size: .82rem; }
.url-line a { color: #5f7183; }
.paragraph { line-height: 1.65; white-space: pre-wrap; }
.tool { color: #9fc3ef; }
.toggle { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; margin-left: .5rem; }
.batchbar { margin-bottom: .6rem; margin-top: 0; }
button.danger { background: #a03040; }
button.danger:hover { background: #b83a4c; }
button.mini { padding: .2rem .5rem; font-size: .78rem; background: #24303e; }
button.mini:hover { background: #2f6fdb; }
.title-cell { min-width: 240px; }
.title-line { display: flex; gap: .3rem; align-items: center; }
.title-input { flex: 1; background: transparent; border: 1px solid transparent; color: #e8eef5; padding: .25rem .4rem; font: inherit; border-radius: 6px; }
.title-input:hover { border-color: #2b3542; }
.title-input:focus { border-color: #2f6fdb; outline: none; background: #0e1116; }
.url a { color: #56687a; font-size: .8rem; }
.sel { width: 16px; height: 16px; }
.bookmarklet { display: inline-block; background: #2f6fdb; color: #fff; border-radius: 8px; padding: .45rem .9rem; font-weight: 600; text-decoration: none; cursor: grab; }