/* Broadcast (admin) - same tokens as the board, denser layout. */
.atag { margin-left: 4px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--coin); font: 800 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }

.gate {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 5px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--bg); font: 800 14px/1 var(--display); transition: background .25s;
}
.gate .knob { width: 30px; height: 30px; border-radius: 50%; background: var(--line-2); transition: transform .35s var(--spring), background .25s; }
.gate.on { background: var(--coin); box-shadow: var(--hard); }
.gate.on .knob { background: var(--ink); transform: rotate(180deg); }

.amain { max-width: 1240px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 48px; }
.keycard { max-width: 380px; margin: 60px auto; display: grid; gap: 12px; padding: 26px; border: 2px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); }
.keycard h3 { margin: 0; font: 800 24px/1 var(--display); }
.keycard input, .amain textarea, .amain input {
  width: 100%; border: 2px solid var(--line-2); border-radius: 14px; padding: 11px 13px; background: var(--paper); font-weight: 600;
}
.amain textarea { font: 500 13px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; resize: vertical; }
.keycard input:focus, .amain textarea:focus, .amain input:focus { outline: none; border-color: var(--ink); background: var(--bg); }
.keycard input.bad { animation: shake .45s; border-color: var(--ink); }

.agrid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.acol { display: grid; gap: 18px; }
.panel { border: 1.5px solid var(--line); border-radius: 22px; padding: 16px; background: var(--bg); box-shadow: var(--shadow-1); }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.phead h2 { margin: 0; font: 800 18px/1 var(--display); letter-spacing: -.02em; }
.phead .seg { margin-left: 0; }
.pill.sm { width: auto; height: 36px; padding: 0 14px; font-size: 13px; }
.pill.sm span { display: inline; }
a.pill { text-decoration: none; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { padding: 12px; border-radius: 14px; background: var(--coin-wash); border: 1px solid var(--line); display: grid; gap: 4px; }
.stats b { font: 800 24px/1 var(--display); letter-spacing: -.03em; }
.stats span { font-size: 12px; color: var(--muted); font-weight: 700; }
.meta { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.phead .meta { margin: 0; }

.row3 { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; margin-top: 8px; }
.row2b { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.addlog { margin: 10px 0 0; max-height: 150px; overflow: auto; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.post { margin: 0; max-height: 260px; overflow: auto; padding: 12px 14px; border-radius: 14px; background: #f4fbf3; border: 1px solid #dcefd9; font: 13px/1.5 var(--body); white-space: pre-wrap; }
.copied { background: var(--coin) !important; }
.scoutform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.scoutform.saved input { background: var(--coin-wash); }
.scoutbtns { justify-content: flex-start; flex-wrap: wrap; }
.scoutbtns .pill.run, .acct .pill.run { background: var(--coin); border-color: var(--ink); color: var(--ink); }
.scoutbtns .pill.run svg, .scoutbtns .pill.run::after { animation: spin 1s linear infinite; }
#scoutLog { max-height: 220px; }
@media (max-width: 640px) { .scoutform { grid-template-columns: 1fr; } }

.arow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.arow:first-child { border-top: 0; }
.arow img { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; background: var(--paper); mix-blend-mode: multiply; }
.arow .t { min-width: 0; }
.arow .t b { display: block; font: 800 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.arow .t a { display: block; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .t small { color: var(--muted); font-weight: 600; font-size: 12px; }
.arow .num2 { text-align: right; font: 800 15px/1.2 var(--display); white-space: nowrap; }
.arow .num2 small { display: block; font: 600 12px/1.2 var(--body); color: var(--muted); }
.arow.out { opacity: .55; }
.arow .act { display: flex; gap: 6px; }
.ib { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--bg); display: grid; place-items: center; transition: transform .2s var(--spring), background .2s, border-color .2s; }
.ib svg { width: 16px; height: 16px; }
.ib:hover { border-color: var(--ink); transform: rotate(-6deg); }
.ib.yes { background: var(--coin); border-color: var(--ink); }
.ib.gone { animation: pop .4s var(--spring); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coin); box-shadow: 0 0 0 1.5px var(--ink); margin-right: 5px; vertical-align: 1px; }
.out .dot { background: var(--bg); }
@keyframes pop { 40% { transform: scale(1.25) rotate(-10deg); } }

@media (max-width: 900px) {
  .agrid { grid-template-columns: 1fr; }
  .arow { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .arow .act { grid-column: 2 / -1; justify-content: flex-end; }
  .arow img { width: 44px; height: 44px; }
}
.acct { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.acct .t b { display: block; font: 700 13.5px/1.3 var(--body); }
.acct .t small { color: var(--muted); font-weight: 600; font-size: 12px; }
.acct .dot.off { background: var(--bg); }
#acctRows { margin-bottom: 10px; }

/* Console: the whole scout / read log, room to read it */
.console .addlog { max-height: none; height: 380px; margin: 0; font-size: 12.5px; }
.alink { margin-left: auto; margin-right: 10px; text-decoration: none; }
.bmain { max-width: 640px; margin-inline: auto; }
.bmain .post { max-height: 60vh; }
@media (max-width: 640px) { .alink { width: auto; padding: 0 12px; } .alink span { display: inline; } .alink svg { display: none; } }