/* Moderation backend — shares the race.css token system (--ink, --accent, terrain colors, fonts) */
.mng{background:var(--ink); color:var(--text)}
.mng-bar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px;
         height:62px; padding:0 22px; background:rgba(10,13,18,.85); backdrop-filter:blur(12px);
         border-bottom:1px solid var(--line)}
.mng-brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text)}
.mng-brand .logo-mark{height:30px}
.mng-brand span{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:17px}
.mng-right{margin-left:auto; display:flex; align-items:center; gap:16px}
.mng-link{font-family:var(--ui); font-size:13px; color:var(--muted); text-decoration:none}
.mng-link:hover{color:var(--text)}
.mng-user{font-family:var(--ui); font-size:13px; color:var(--muted-2); font-weight:600}
.mng-logout{font-family:var(--ui); font-weight:600; font-size:13px; color:var(--text); background:var(--surface-2);
            border:1px solid var(--line); border-radius:8px; padding:8px 13px; cursor:pointer}
.mng-logout:hover{border-color:var(--accent-2)}
.mng-main{max-width:1000px; margin:0 auto; padding:34px 22px 80px}

.mng-head{display:flex; align-items:baseline; gap:16px; margin-bottom:20px}
.mng-head h1{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.015em; font-size:34px; line-height:1}
.mng-head p{color:var(--muted); font-size:14px}
.mng-head p b{color:var(--accent-2)}

.pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.pill{font-family:var(--ui); font-weight:600; font-size:13px; color:var(--muted-2); text-decoration:none;
      background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 15px; transition:.15s}
.pill:hover{border-color:var(--accent-2); color:var(--text)}
.pill.on{background:var(--accent); border-color:var(--accent); color:#fff}
.pill b{margin-left:4px; opacity:.85}

.rows{display:flex; flex-direction:column; gap:10px}
.row{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
     border-radius:14px; padding:12px 14px}
.row-thumb{width:66px; height:66px; flex:none; border-radius:10px; background-size:cover; background-position:center;
           border:1px solid var(--line); background-color:var(--surface-2)}
.row-main{flex:1; min-width:0}
.row-top{display:flex; align-items:center; gap:9px}
.row-name{font-weight:700; font-size:16px; color:var(--text); text-decoration:none}
.row-name:hover{color:var(--accent-2)}
.row-meta{font-size:13px; color:var(--muted); margin-top:3px}
.row-sub{font-size:12px; color:var(--muted); opacity:.8; margin-top:2px}
.warn{color:var(--dirt)}

.tbadge{font-family:var(--ui); font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:10px;
        color:#0a0d12; padding:4px 8px; border-radius:6px; flex:none}
.spill{font-family:var(--ui); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10px;
       padding:5px 10px; border-radius:999px; flex:none; border:1px solid transparent}
.spill--pending{color:var(--dirt); background:rgba(232,146,48,.12); border-color:rgba(232,146,48,.4)}
.spill--approved{color:#5cd08a; background:rgba(92,208,138,.12); border-color:rgba(92,208,138,.4)}
.spill--rejected{color:#ff8a8a; background:rgba(255,138,138,.12); border-color:rgba(255,138,138,.4)}

.row-actions{display:flex; align-items:center; gap:8px; flex:none}
.row-actions form{margin:0}
.act{font-family:var(--ui); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
     border-radius:8px; padding:9px 13px; cursor:pointer; border:1px solid var(--line); text-decoration:none; display:inline-block}
.act.ok{background:#2f8f5b; border-color:#2f8f5b; color:#fff}
.act.ok:hover{background:#35a368}
.act.no{background:var(--surface-2); color:#ff9a9a; border-color:rgba(255,138,138,.35)}
.act.no:hover{border-color:#ff8a8a}
.act.rev{background:var(--surface-2); color:var(--text)}
.act.rev:hover{border-color:var(--accent-2)}
.act.lg{padding:14px 22px; font-size:13px}

.mng-empty{padding:48px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px}

/* review page */
.back{display:inline-block; font-family:var(--ui); font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:16px}
.back:hover{color:var(--text)}
.review{display:grid; grid-template-columns:320px 1fr; gap:22px; align-items:start}
.review-media{position:relative; aspect-ratio:4/3; border-radius:14px; background-size:cover; background-position:center; border:1px solid var(--line)}
.review-media .tbadge{position:absolute; top:12px; left:12px}
.review-media .spill{position:absolute; top:12px; right:12px}
.review-body h1{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.015em; font-size:30px; line-height:1; margin-bottom:18px}
.kv{display:flex; flex-direction:column; gap:12px; margin-bottom:18px}
.kv .k{display:block; font-family:var(--ui); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.kv .v{display:block; font-size:15px; margin-top:3px}
.kv a{color:var(--accent-2)}
.review-desc{color:var(--muted-2); line-height:1.65; font-size:15px; border-top:1px solid var(--line); padding-top:16px}
.decide{margin-top:22px; border-top:1px solid var(--line); padding-top:20px}
.decide-btns{display:flex; gap:12px; align-items:center; margin-top:14px}

/* login */
.mng-login{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:22px}
.login-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px}
.login-logo{display:flex; justify-content:center}
.login-logo .logo-mark{height:56px}
.login-card h1{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.015em; font-size:26px; text-align:center; margin-top:14px}
.login-sub{color:var(--muted); font-size:14px; text-align:center; margin:8px 0 22px}
.login-err{background:rgba(255,138,138,.12); border:1px solid rgba(255,138,138,.4); color:#ff9a9a; font-size:13px; padding:10px 12px; border-radius:9px; margin-bottom:16px}
.login-hint{color:var(--muted); font-size:12px; text-align:center; margin-top:18px; line-height:1.6}
.login-hint code{background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:2px 6px; font-size:11px}

@media(max-width:760px){
  .review{grid-template-columns:1fr}
  .row{flex-wrap:wrap}
  .row-actions{width:100%; justify-content:flex-end}
  .mng-link{display:none}
}

/* review: coordinate editor + flash messages */
.coords{display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end}
.coords .act{height:42px}
.coords-warn{color:var(--dirt); font-size:13px; margin:10px 0 0; line-height:1.5}
.mng-msg{font-size:13px; padding:10px 13px; border-radius:9px; margin-bottom:14px; border:1px solid transparent}
.mng-msg--success{color:#5cd08a; background:rgba(92,208,138,.12); border-color:rgba(92,208,138,.4)}
.mng-msg--error{color:#ff9a9a; background:rgba(255,138,138,.12); border-color:rgba(255,138,138,.4)}
@media(max-width:760px){ .coords{grid-template-columns:1fr 1fr} .coords .act{grid-column:1/-1} }