:root {
  --bg: #101512; --bg-2: #172019; --bg-3: #1f2a22; --line: #2c3a30;
  --ink: #eaf3ec; --ink-2: #a9b8ad; --ink-3: #74857a;
  --green: #3d7a4b; --green-hi: #9be3a8; --peach: #f3b78e; --danger: #e0786b; --warn: #e6c27a;
  --paper: #f2fcf3;
  --r: 12px;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cond: "Avenir Next Condensed", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--body); }
[hidden] { display: none !important; }
a { color: var(--green-hi); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 2px; }
.small { font-size: 12.5px; color: var(--ink-2); margin: 4px 0; }
.num { font-variant-numeric: tabular-nums; }
.err { color: var(--danger); font-weight: 600; margin: 8px 0; }
code { background: var(--bg-3); padding: 2px 6px; border-radius: 5px; font-size: 12.5px; word-break: break-all; }
.copy { cursor: copy; }

.btn { border: 0; border-radius: 10px; padding: 9px 16px; background: var(--bg-3); color: var(--ink); font-weight: 650;
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { background: #26342a; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--green-hi); color: #0f1712; box-shadow: none; }
.btn.primary:hover { background: #b6f0c0; }
.btn.danger { color: var(--danger); }
.link { border: 0; background: none; color: var(--green-hi); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline;
  text-underline-offset: 3px; font-size: 13.5px; }

/* gate */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.gate-card { width: min(360px, 100%); display: grid; gap: 12px; text-align: center; background: var(--bg-2); padding: 28px;
  border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.gate-card h1 { margin: 0; font-family: var(--cond); }
.gate-card p { margin: 0; color: var(--ink-2); }
.gate-icon { width: 72px; height: 72px; justify-self: center; border-radius: 16px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 0; border-radius: 9px; padding: 9px 11px;
  box-shadow: inset 0 0 0 1px var(--line); width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green); }

/* top */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; background: rgba(16, 21, 18, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--cond); font-size: 20px; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand b { color: var(--green-hi); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs a { color: var(--ink-2); text-decoration: none; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; }
.tabs a.on { background: var(--bg-3); color: var(--ink); }
.tabs a.new-btn { background: var(--green-hi); color: #0f1712; }
.banner { margin: 12px 20px 0; padding: 10px 14px; border-radius: 10px; background: #2b2a1b; color: var(--warn); }
.banner.ok { background: #1d2f22; color: var(--green-hi); }
.view { padding: 20px; max-width: 1180px; margin: 0 auto; }

/* segmented */
.seg { display: inline-flex; background: var(--bg-2); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { border: 0; background: none; color: var(--ink-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.seg button.on { background: var(--bg-3); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.seg.small button { padding: 5px 10px; font-size: 12.5px; }

/* queue */
.queue { display: grid; gap: 10px; margin-top: 16px; }
.qitem { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; background: var(--bg-2);
  border-radius: var(--r); padding: 10px; box-shadow: 0 0 0 1px var(--line); }
.qitem img, .qitem .noimg { width: 64px; height: 112px; object-fit: cover; border-radius: 8px; background: #0b0f0c; }
.qtime { font-family: var(--cond); font-size: 17px; font-weight: 700; }
.qcap { color: var(--ink-2); font-size: 13.5px; margin: 2px 0 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qplats { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 9px 3px 4px; border-radius: 99px;
  background: var(--bg-3); color: var(--ink-2); text-decoration: none; }
.pchip .plat-logo { width: 18px; height: 18px; }
.pchip.done { color: var(--green-hi); }
.pchip.failed { color: var(--danger); }
.pchip.waiting, .pchip.working { color: var(--warn); }
.qerr { color: var(--danger); font-size: 12.5px; margin-top: 6px; }
.qnote { color: var(--ink-2); font-size: 12.5px; margin-top: 6px; }
.qacts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.qacts .link { font-size: 13px; }
.status { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.empty { color: var(--ink-2); text-align: center; padding: 40px 10px; }

/* compose */
.compose { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 24px; align-items: start; }
.col-video { position: sticky; top: 76px; display: grid; gap: 12px; }
.drop { position: relative; aspect-ratio: 9 / 16; max-height: 62vh; background: var(--bg-2); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; }
.drop.over { box-shadow: inset 0 0 0 2px var(--green-hi); }
.drop video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.drop-empty { text-align: center; display: grid; gap: 8px; padding: 20px; justify-items: center; color: var(--ink-2); }
.drop-empty .big { color: var(--ink); font-weight: 700; font-size: 17px; margin: 0; }
.drop-empty p { margin: 0; }
.upload-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 28px; border-radius: 8px; background: rgba(0,0,0,.6); overflow: hidden; }
.upload-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green); }
.upload-bar span { position: relative; display: block; text-align: center; line-height: 28px; font-size: 12.5px; font-weight: 600; }
.vid-meta { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 13px; gap: 8px; }
.cover-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.cover-row img { width: 72px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: #000; }
.cover-ctl b { font-size: 14px; }
.cover-ctl input { padding: 0; box-shadow: none; background: none; }
.checks { display: grid; gap: 6px; font-size: 13px; }
.checks .ok { color: var(--green-hi); }
.checks .bad { color: var(--danger); }
.checks .meh { color: var(--warn); }

.field { display: grid; gap: 6px; margin: 0 0 12px; }
.lbl { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.opt { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 4px; }
.count { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 12px; float: right; }
.count.over { color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 0; background: var(--bg-3); color: var(--ink-2); border-radius: 99px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chip:hover { color: var(--ink); }
.chip.on { background: var(--green); color: var(--ink); }

.plats { display: grid; gap: 12px; margin: 16px 0; }
.plat { background: var(--bg-2); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.plat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.plat-head input { width: 18px; height: 18px; accent-color: var(--green-hi); box-shadow: none; }
.plat-head .who { margin-left: auto; color: var(--ink-2); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.plat-head .who img { width: 20px; height: 20px; border-radius: 50%; }
.plat-body { padding: 4px 14px 14px 42px; display: grid; gap: 10px; }
.plat:not(.on) .plat-body { display: none; }
.plat-logo { width: 22px; height: 22px; border-radius: 6px; display: inline-block; flex: none; background-size: 70%; background-position: center; background-repeat: no-repeat; }
.plat-logo.tt { background-color: #000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16.6 5.8A4.3 4.3 0 0 1 15.5 3h-3.2v12.4a2.6 2.6 0 1 1-2.6-2.6c.3 0 .5 0 .8.1V9.6a5.8 5.8 0 1 0 5 5.8V9.1a7.3 7.3 0 0 0 4.3 1.4V7.3a4.3 4.3 0 0 1-3.2-1.5z'/%3E%3C/svg%3E"); }
.plat-logo.ig { background-color: #c13584; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23fff'/%3E%3C/svg%3E"); }
.plat-logo.yt { background-color: #ff0033; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7.5v9l7.5-4.5z'/%3E%3C/svg%3E"); }
.row2 { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; }
.row2 + .switch { margin-top: 10px; }
.row2 > .seg, .row2 > select { justify-self: start; width: auto; }
.checkrow { display: flex; gap: 16px; flex-wrap: wrap; }
.checkrow label, .indent label { display: inline-flex; gap: 7px; align-items: center; font-size: 14px; cursor: pointer; }
.checkrow input, .indent input, .chk input { width: auto; box-shadow: none; accent-color: var(--green-hi); }
.indent { display: grid; gap: 6px; padding-left: 4px; }
.switch { margin-top: 4px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { appearance: none; -webkit-appearance: none; width: 36px; height: 21px; border-radius: 99px; background: var(--line); position: relative;
  cursor: pointer; transition: background .15s; margin: 0; padding: 0; box-shadow: none; flex: none; }
.switch input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(15px); }
.note { margin: 0; padding: 8px 11px; border-radius: 9px; background: #2b2a1b; color: var(--warn); font-size: 13px; }
.legal { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.when { display: grid; gap: 8px; padding: 14px; background: var(--bg-2); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.when-row { display: grid; gap: 8px; }
.when-row input { max-width: 260px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; align-items: center; }

/* accounts */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { background: var(--bg-2); border-radius: 16px; padding: 18px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.card h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; }
.card .acct { display: flex; align-items: center; gap: 10px; }
.card .acct img { width: 36px; height: 36px; border-radius: 50%; }
.card p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

/* settings */
.settings form { max-width: 640px; }
fieldset { border: 0; margin: 0 0 18px; padding: 16px; background: var(--bg-2); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
legend { font-weight: 750; font-size: 15px; padding: 0; float: left; width: 100%; margin-bottom: 10px; }
.chk { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 8px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal-card { width: min(720px, 100%); max-height: 86vh; overflow: auto; background: var(--bg-2); border-radius: 16px; padding: 20px; }
.modal-card h2 { margin: 0 0 12px; font-size: 18px; }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.lib button { border: 0; padding: 0; background: var(--bg-3); color: var(--ink); border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left; }
.lib img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: #000; }
.lib span { display: block; padding: 6px 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 820px) {
  .top { flex-direction: column; align-items: stretch; padding: 10px 14px; }
  .tabs { justify-content: space-between; }
  .tabs a { padding: 7px 9px; font-size: 13.5px; }
  .view { padding: 14px; }
  .compose { grid-template-columns: 1fr; }
  .col-video { position: static; }
  .drop { max-height: 50vh; justify-self: center; width: min(100%, 300px); }
  .row2 { grid-template-columns: 1fr; gap: 6px; }
  .plat-body { padding-left: 14px; }
  .qitem { grid-template-columns: 56px 1fr; }
  .qitem img, .qitem .noimg { width: 56px; height: 98px; }
  .qacts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .switch input, .switch input::after { transition: none; } }