/* PropFirmCompare admin. The site's colours (vermilion, warm stone, graphite); system fonts. */
:root{
  --bg:#F5F4F1; --surface:#FFFFFF; --tint:#FAF9F7; --ink:#1D2025; --ink-2:#474C55; --ink-3:#646A74;
  --rule:#E6E3DE; --rule-2:#CFCAC2; --accent:#C64023; --accent-hover:#A93519; --accent-soft:#FBEAE5;
  --money:#11804F; --money-ink:#0B6E48; --money-soft:#E3F3EA; --bad:#A3172F; --bad-soft:#FBE8EB;
  --top:#16181C; --top-ink:#F3F2EF; --brand-on-top:#FF8C70;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111214; --surface:#1A1C20; --tint:#1F2226; --ink:#F3F2EF; --ink-2:#C9CBD0; --ink-3:#A0A5AD;
    --rule:#2C3036; --rule-2:#3F454E; --accent:#FF8C70; --accent-hover:#FFB09C; --accent-soft:#3A1F18;
    --money:#2FBF83; --money-ink:#5BD9A2; --money-soft:#12362A; --bad:#FF8494; --bad-soft:#3F1C23;
    --top:#0B0C0E; --top-ink:#F3F2EF; --brand-on-top:#FF8C70;
    color-scheme:dark;
  }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a{ color:var(--accent); }
a:hover{ color:var(--accent-hover); }
code{ font:0.95em ui-monospace,SFMono-Regular,Consolas,Menlo,monospace; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
.muted{ color:var(--ink-3); }
.small{ font-size:0.875rem; }

.top{ background:var(--top); color:var(--top-ink); display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px max(16px, calc((100vw - 880px) / 2)); }
.brand{ color:var(--top-ink); text-decoration:none; font-weight:800; letter-spacing:-0.01em; font-size:1.15rem; }
.brand em{ font-style:normal; color:var(--brand-on-top); }
.brand span{ margin-left:10px; padding:2px 8px; border:1px solid #3F454E; border-radius:6px; color:var(--top-ink);
  font-weight:600; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; vertical-align:2px; }
.brand:hover{ color:#fff; }
.nav{ display:flex; align-items:center; gap:18px; font-size:0.95rem; }
.nav a, .nav .link{ color:var(--top-ink); }
.nav form{ margin:0; }
button.link{ background:none; border:0; padding:0; font:inherit; text-decoration:underline; cursor:pointer; }

main{ max-width:880px; margin:0 auto; padding:24px 16px 64px; }
.card{ background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:22px 24px; margin:0 0 18px; }
.card.narrow{ max-width:460px; margin:40px auto 18px; }
h1{ font-size:1.45rem; line-height:1.25; margin:0 0 10px; }
h2{ font-size:1.15rem; margin:0 0 8px; }
p{ margin:0 0 12px; }

.stack{ display:grid; gap:14px; margin:16px 0 8px; }
label{ display:grid; gap:6px; font-weight:600; font-size:0.95rem; }
input[type=password], input[type=text], input:not([type]){
  font:inherit; font-weight:400; color:var(--ink); background:var(--tint); border:1px solid var(--rule-2);
  border-radius:9px; padding:10px 12px; width:100%; }
input:focus-visible, button:focus-visible, a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.hint{ font-weight:400; color:var(--ink-3); font-size:0.85rem; }
label.filled input{ color:var(--ink-3); }

.btn{ font:inherit; font-weight:650; border-radius:9px; border:1px solid var(--rule-2); background:var(--surface);
  color:var(--ink); padding:10px 16px; cursor:pointer; }
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.pri{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.pri:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
@media (prefers-color-scheme: dark){ .btn.pri, .btn.pri:hover{ color:#1A0B07; } }
.btn.small{ padding:6px 12px; font-size:0.9rem; }

.note{ border-radius:10px; padding:10px 14px; margin:0 0 14px; font-weight:500; }
.note.err{ background:var(--bad-soft); color:var(--bad); }
.note.ok{ background:var(--money-soft); color:var(--money-ink); }

.steps{ margin:0 0 14px; padding-left:1.3em; }
.qr{ display:block; width:232px; height:232px; margin:6px auto 14px; background:#fff; border-radius:10px; padding:6px; }
.key{ word-break:break-all; background:var(--tint); padding:2px 6px; border-radius:6px; }

/* publish */
.drop{ position:relative; border:2px dashed var(--rule-2); border-radius:12px; padding:30px 18px; text-align:center;
  background:var(--tint); transition:border-color .15s, background .15s; margin-top:6px; }
.drop.over{ border-color:var(--accent); background:var(--accent-soft); }
.drop:focus-within{ border-color:var(--accent); }
.drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.drop label{ display:block; font-weight:400; cursor:pointer; font-size:1.05rem; }
.drop label b{ font-weight:650; }
.drop.busy label{ cursor:default; opacity:0.55; }
.progress{ height:8px; background:var(--rule); border-radius:99px; overflow:hidden; margin:16px auto 0; max-width:420px; }
.bar{ height:100%; width:0; background:var(--accent); transition:width .2s; }
.status{ margin:12px 0 0; min-height:1.5em; color:var(--ink-2); }
.status:empty{ margin:0; min-height:0; }
.status.ok{ color:var(--money-ink); font-weight:600; }
.status.err{ color:var(--bad); font-weight:600; }

/* versions */
table.rel{ width:100%; border-collapse:collapse; margin-top:6px; font-size:0.95rem; }
.rel th{ text-align:left; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-3);
  border-bottom:1px solid var(--rule); padding:6px 8px; font-weight:600; }
.rel td{ border-bottom:1px solid var(--rule); padding:10px 8px; vertical-align:middle; }
.rel tr:last-child td{ border-bottom:0; }
.rel .n{ text-align:right; font-variant-numeric:tabular-nums; }
.rel .act{ text-align:right; white-space:nowrap; }
.rel .act form{ margin:0; }
.rel tr.live td{ background:var(--money-soft); }
.rel tr.live td:first-child{ border-radius:8px 0 0 8px; }
.rel tr.live td:last-child{ border-radius:0 8px 8px 0; }
.pill{ display:inline-block; background:var(--money); color:#fff; font-weight:700; font-size:0.8rem;
  border-radius:99px; padding:3px 10px; letter-spacing:0.02em; }
@media (prefers-color-scheme: dark){ .pill{ color:#0B1F16; } }
@media (max-width:620px){
  .rel thead{ display:none; }
  .rel tr{ display:grid; grid-template-columns:1fr auto; padding:8px 0; border-bottom:1px solid var(--rule); }
  .rel td{ border:0; padding:2px 8px; }
  .rel td.n{ text-align:left; }
  .rel td[data-l]::before{ content:attr(data-l) ": "; color:var(--ink-3); font-size:0.85rem; }
  .rel td:first-child::before{ content:none; }
  .rel .act{ grid-column:2; grid-row:1 / span 4; align-self:center; }
  .rel tr.live{ background:var(--money-soft); border-radius:8px; }
  .rel tr.live td{ background:none; }
}

/* activity */
.log{ list-style:none; margin:6px 0 0; padding:0; font-size:0.92rem; }
.log li{ padding:7px 0; border-bottom:1px solid var(--rule); display:flex; gap:12px; flex-wrap:wrap; }
.log li:last-child{ border-bottom:0; }
.log li > time:first-child{ color:var(--ink-3); min-width:11.5em; font-variant-numeric:tabular-nums; }