/* Onkelz Universe sender portal. Colour tokens and type match the original upload page. */
:root{
  --paper:#F4F3F0; --card:#FCFBF9; --ink:#17181C; --ink-mid:#45474D; --ink-soft:#6C6E74;
  --hair:#D8D4CB; --accent:#A9661B; --accent-2:#8A5313; --gold:#F5E7CF; --ok:#33625B; --err:#A33A2B; --warn:#8A6A12;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#16171A; --card:#1E1F23; --ink:#EDEBE6; --ink-mid:#BDBAB3; --ink-soft:#8E8B85;
    --hair:#34353A; --accent:#D08A3C; --accent-2:#E2A35E; --gold:#3A2F1F; --ok:#6FB3A7; --err:#E07A6B; --warn:#D9B45A; }
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5}
main{max-width:860px; margin:0 auto; padding:24px 16px 48px}
[hidden]{display:none !important}
.top{display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:2px solid var(--ink); padding-bottom:8px}
.brand{font-family:var(--mono); font-weight:700; font-size:14px; color:var(--ink); text-decoration:none}
.brand span{color:var(--accent)}
.topr{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.who{font-size:12.5px; color:var(--ink-soft)}
.lang button, .linkbtn{font:inherit; font-family:var(--mono); font-size:12px; background:none; border:1px solid var(--hair);
  color:var(--ink-mid); padding:3px 9px; border-radius:5px; cursor:pointer}
.lang button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
form.inline{display:inline; margin:0}
h1{font-size:26px; margin:22px 0 4px; letter-spacing:-.01em}
h2{font-size:15px; margin:0 0 10px}
.sub{color:var(--ink-mid); margin:0 0 20px}
.card{background:var(--card); border:1px solid var(--hair); border-radius:10px; padding:18px; margin-bottom:16px}
label.f{display:block; font-size:13px; font-weight:600; margin-bottom:4px}
label.f.req::after{content:" *"; color:var(--accent)}
input[type=text], input[type=password], select, textarea{width:100%; font:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--hair); border-radius:7px; background:var(--paper); color:var(--ink)}
input:disabled, select:disabled, textarea:disabled{opacity:.75}
textarea{min-height:64px; resize:vertical}
.bad{border-color:var(--err) !important; background:color-mix(in srgb,var(--err) 6%,var(--paper)) !important}
.ferr{font-size:12px; color:var(--err); margin-top:3px}
.drop{border:2px dashed var(--hair); border-radius:10px; padding:28px 16px; text-align:center; color:var(--ink-mid)}
.drop.over{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent)}
.btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.btns.left{justify-content:flex-start}
.btn{font:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:7px; cursor:pointer;
  border:1px solid var(--accent); background:transparent; color:var(--accent-2); text-decoration:none; display:inline-block}
.btn.primary{background:var(--accent); color:#FBFAF7}
.btn.small{font-size:12px; padding:4px 10px; font-weight:500; border-color:var(--hair); color:var(--ink-soft)}
.btn.danger{border-color:var(--err); color:var(--err)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.hint{font-size:12.5px; color:var(--ink-soft); margin-top:6px}
.msg{padding:10px 12px; border-radius:8px; font-size:14px; margin-bottom:14px; border:1px solid var(--hair)}
.msg.err{border-color:var(--err); color:var(--err)}
.msg.ok{border-color:var(--ok); color:var(--ok)}
.msg.lock{border-color:var(--accent); background:var(--gold); color:var(--ink)}


/* progress */
.progress{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.progress .big{font-size:18px; font-weight:700}
.bar{height:6px; background:var(--hair); border-radius:3px; margin-top:8px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--ok)}
.bar.up i{background:var(--accent)}
.counts{font-size:12.5px; color:var(--ink-soft); font-family:var(--mono)}

/* status pills */
.pill{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:20px; border:1px solid var(--hair); white-space:nowrap}
.pill.to_describe{color:var(--err); border-color:color-mix(in srgb,var(--err) 50%,transparent)}
.pill.draft{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.pill.complete{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.pill.locked{color:var(--accent-2); border-color:var(--accent)}

/* delivery list */
.dlist{margin-top:16px}
.dlist a.drow{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; border:1px solid var(--hair);
  border-radius:10px; background:var(--card); margin-bottom:10px; color:inherit; text-decoration:none}
.dlist a.drow:hover{border-color:var(--accent)}
.dtitle{font-weight:600}
.dmeta{font-size:12.5px; color:var(--ink-soft)}

/* filter tabs */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px}
.tabs button{font:inherit; font-size:12.5px; padding:4px 10px; border-radius:20px; border:1px solid var(--hair); background:none; color:var(--ink-mid); cursor:pointer}
.tabs button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-2); background:var(--gold)}

/* entries */
.item{border:1px solid var(--hair); border-radius:10px; padding:14px; margin-bottom:12px; background:var(--card)}
.item.st-to_describe{border-left:3px solid var(--err)}
.item.st-draft{border-left:3px solid var(--warn)}
.item.st-complete{border-left:3px solid var(--ok)}
.ihead{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; cursor:pointer}
.iname{font-family:var(--mono); font-size:13px; font-weight:600; overflow-wrap:anywhere}
.imeta{font-size:12px; color:var(--ink-soft)}
.iright{display:flex; gap:8px; align-items:center; flex-shrink:0}
.ibody{margin-top:12px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.grid .full{grid-column:1 / -1}
@media (max-width:560px){ .grid{grid-template-columns:1fr} .ihead{flex-direction:column} }
details{margin-top:10px}
summary{cursor:pointer; font-size:13px; color:var(--accent-2); font-weight:600}
details .grid{margin-top:10px}
.saved{font-size:12px; color:var(--ink-soft); min-height:18px; margin-top:8px}
.saved.err{color:var(--err)}

.files{margin-top:12px; border-top:1px solid var(--hair); padding-top:10px}
.frow{display:flex; justify-content:space-between; gap:10px; align-items:center; padding:5px 0; font-size:13px}
.frow + .frow{border-top:1px dashed var(--hair)}
.fname{font-family:var(--mono); font-size:12.5px; overflow-wrap:anywhere}
.fstate{font-size:12px; color:var(--ink-soft); font-family:var(--mono); white-space:nowrap}
.fstate.ok{color:var(--ok)} .fstate.err{color:var(--err)}
.factions{display:flex; gap:6px; flex-shrink:0}
.fbar{height:3px; background:var(--hair); border-radius:2px; margin-top:3px; overflow:hidden}
.fbar i{display:block; height:100%; width:0; background:var(--accent)}

.uploads .counts{margin-top:4px}
.foot{font-size:12px; color:var(--ink-soft); margin-top:24px}
.editable{display:flex; gap:8px; align-items:center}
.editable input{max-width:420px}

/* ---------------------------------------------------------------- accounts (sign-in, invite, 2FA) */
.card.narrow{max-width:460px}
label.f.gap{margin-top:12px}
.mono{font-family:var(--mono)}
.kv{display:flex; gap:10px; font-size:13.5px; margin-bottom:4px}
.kv span{color:var(--ink-soft); min-width:110px}
input.code{font-family:var(--mono); font-size:20px; letter-spacing:.15em; max-width:260px}
.setup{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start}
.qr{background:#FFFFFF; border:1px solid var(--hair); border-radius:8px; padding:6px; width:220px; height:220px}
.steps{margin:0 0 10px; padding-left:20px; font-size:14px}
.steps li{margin-bottom:4px}
.secret{font-size:16px; font-weight:700; letter-spacing:.06em; padding:8px 10px; border:1px dashed var(--hair);
  border-radius:7px; background:var(--paper); overflow-wrap:anywhere; margin:4px 0}
.gapform{margin-top:18px; border-top:1px solid var(--hair); padding-top:14px}
.codes{columns:2; column-gap:28px; font-size:15px; margin:6px 0 4px; padding-left:28px}
.codes li{padding:3px 0}
.textlink{color:var(--accent-2)}
@media (max-width:560px){ .setup{grid-template-columns:1fr} .codes{columns:1} }

/* ---------------------------------------------------------------- admin dashboard */
body.wide main{max-width:1180px}
.anav{display:flex; gap:4px; margin-top:10px; border-bottom:1px solid var(--hair); flex-wrap:wrap}
.anav a{padding:7px 12px; font-size:14px; font-weight:600; color:var(--ink-mid); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px}
.anav a:hover{color:var(--ink)}
.anav a[aria-current="page"]{color:var(--accent-2); border-bottom-color:var(--accent)}
.row3{display:grid; grid-template-columns:1.4fr 1fr .8fr; gap:10px 12px; align-items:end}
.row3 .full{grid-column:1 / -1}
@media (max-width:720px){ .row3{grid-template-columns:1fr} }
.linkbox{border-color:var(--accent); background:var(--gold)}
.copyrow{display:flex; gap:8px; margin-top:8px}
.copyrow input{font-family:var(--mono); font-size:13px; background:var(--card)}
.filters{display:flex; gap:14px; flex-wrap:wrap; margin:4px 0 14px}
.filters label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-mid); min-width:220px}
.tablewrap{overflow-x:auto; border:1px solid var(--hair); border-radius:10px; background:var(--card); margin-bottom:12px}
table.grid-table{width:100%; border-collapse:collapse; font-size:13.5px}
.grid-table th{text-align:left; font-size:12px; font-weight:600; color:var(--ink-soft); padding:9px 12px;
  border-bottom:1px solid var(--hair); white-space:nowrap; background:var(--paper)}
.grid-table td{padding:9px 12px; border-bottom:1px solid var(--hair); vertical-align:top}
.grid-table tr:last-child td{border-bottom:none}
.grid-table tr.link{cursor:pointer}
.grid-table tr.link:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.grid-table a{color:var(--ink); font-weight:600}
.grid-table .num{text-align:right}
.grid-table td.actions{min-width:200px}
.factions.wrap{flex-wrap:wrap; flex-shrink:1}
.small{font-size:12.5px}
.nowrap{white-space:nowrap}
.tag{display:inline-block; font-size:10.5px; font-weight:700; font-family:var(--mono); margin-left:6px; padding:0 5px;
  border-radius:4px; border:1px solid var(--ok); color:var(--ok)}
.bar.mini{height:4px; margin-top:4px; max-width:120px}
.evbad{color:var(--err)}
dl.facts{display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; font-size:13.5px; margin:14px 0 0}
dl.facts dt{color:var(--ink-soft)}
dl.facts dd{margin:0}
dl.fields{display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:5px 16px; font-size:13.5px; margin:0}
dl.fields dt{color:var(--ink-soft)}
dl.fields dd{margin:0; overflow-wrap:anywhere}
dl.fields dd.long{white-space:pre-wrap}
dl.fields dd.missing{color:var(--err)}
.ihead.static{cursor:default}
@media (max-width:560px){ dl.fields, dl.facts{grid-template-columns:1fr} dl.fields dt{margin-top:6px} }
.grid-table td.mono{white-space:nowrap}