:root{
  --paper:#F5F3EE;--surface:#FFFFFF;--ink:#0B0B10;--muted:#5E5C66;--line:rgba(11,11,16,.10);
  --signal:#FF4D2E;--sync:#2E6BFF;--sync-soft:rgba(46,107,255,.10);
  --ok:#0F7A4D;--ok-soft:#DDF3E8;--warn:#8A5A00;--warn-soft:#FDF0D2;--bad:#B42318;--bad-soft:#FDE4E1;
  --btn-bg:#0B0B10;--btn-fg:#F5F3EE;
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0E0E13;--surface:#17171E;--ink:#F2F0EA;--muted:#A3A1AB;--line:rgba(242,240,234,.12);
  --signal:#FF6A4F;--sync:#6F96FF;--sync-soft:rgba(111,150,255,.16);
  --ok:#5BD69C;--ok-soft:rgba(91,214,156,.14);--warn:#F2C25B;--warn-soft:rgba(242,194,91,.14);--bad:#FF8A7E;--bad-soft:rgba(255,138,126,.14);
  --btn-bg:#F2F0EA;--btn-fg:#0E0E13;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1100px;margin:0 auto}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sync);outline-offset:2px}
[hidden]{display:none!important}

header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.03em;text-decoration:none}
.logo span{color:var(--signal)}
nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.navlink{background:none;border:0;padding:8px 12px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none}
.navlink:hover{background:var(--line);color:var(--ink)}
.navlink[aria-current="page"]{color:var(--ink);background:var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover:not(:disabled){background:var(--signal);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-block{width:100%}
.linkbtn{background:none;border:0;padding:0;font-size:12px;font-weight:600;color:var(--sync);cursor:pointer;text-decoration:none}
.linkbtn:hover{text-decoration:underline}
.linkbtn.danger{color:var(--muted)}
.linkbtn.danger:hover{color:var(--bad)}

main{padding-block:8px 80px}
.view{display:grid;gap:24px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;min-width:0}
.head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end}
.head h1{font-size:30px}
.sub{color:var(--muted);font-size:14px;margin-top:4px}
.label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:14px;outline:none}
.field:focus{border-color:var(--sync)}
textarea.field{resize:vertical}
.meta{font-size:12px;color:var(--muted)}
.stack{display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.chip{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.s-scheduled,.s-queued,.s-pending{background:var(--sync-soft);color:var(--sync)}
.s-publishing,.s-processing,.s-downloading,.s-partial{background:var(--warn-soft);color:var(--warn)}
.s-published,.s-ready{background:var(--ok-soft);color:var(--ok)}
.s-failed{background:var(--bad-soft);color:var(--bad)}
.s-canceled{background:var(--line);color:var(--muted)}

.pb{display:inline-flex;width:30px;height:30px;flex:none;border-radius:9px;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}

.notice{border-radius:12px;padding:12px 14px;font-size:14px}
.notice.ok{background:var(--ok-soft);color:var(--ok)}
.notice.err{background:var(--bad-soft);color:var(--bad)}
.notice.info{background:var(--sync-soft);color:var(--ink)}

/* login */
.login{max-width:380px;margin:12vh auto 0}
.login h1{font-size:34px}

/* queue */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{padding:16px 18px;border:1px solid var(--line);border-radius:16px}
.stat b{display:block;font-family:var(--display);font-size:30px;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted);font-weight:500}
.stat.alert{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.stat.alert b{color:var(--bad)}
.posts{display:grid;gap:10px}
.post-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.post-top .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.targets{list-style:none;margin:12px 0 0;padding:0}
.targets li{display:flex;align-items:center;gap:12px;padding-block:10px;border-top:1px solid var(--line)}
.targets .who{flex:1;min-width:0}
.targets .who div{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.err{font-size:12px;color:var(--bad)}

/* import */
.import-top{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.steps{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted);font-size:14px}
.steps strong{color:var(--ink)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:2px dashed var(--line);border-radius:16px;padding:32px 16px;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--sync)}
.drop b{font-family:var(--display);font-size:18px}
.split{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
.lib{list-style:none;margin:12px 0 0;padding:0;max-height:640px;overflow-y:auto}
.lib li{display:flex;gap:12px;align-items:flex-start;padding-block:12px;border-top:1px solid var(--line)}
.lib .txt{flex:1;min-width:0}
.lib .txt p{font-size:14px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 14px 4px 4px;font-size:14px;cursor:pointer;background:transparent}
.pick[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.radio{display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.radio input{margin-top:4px}
.radio small{display:block;font-size:12px;color:var(--muted)}
.summary{background:var(--paper);border-radius:12px;padding:14px;font-size:14px}

/* accounts */
.acc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.acc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.acc li{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--paper);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:500}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--btn-bg);color:var(--btn-fg);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* docs */
.doc{max-width:42em;padding-block:24px}
.doc h1{font-size:40px}
.doc h2{font-size:21px;margin-top:32px;margin-bottom:8px}
.doc p,.doc li{color:var(--muted)}
.doc p+p{margin-top:12px}
footer{border-top:1px solid var(--line);padding-block:20px 40px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--muted)}

@media (max-width:860px){.import-top,.split{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.two,.acc{grid-template-columns:1fr}}