/* Auto-generated by scripts/migrate-inline-styles.js — do NOT hand-edit.
   Each .s-<hash> rule below replaces an inline style="..." attribute
   that has been removed from the markup so we can drop CSP
   `style-src-attr unsafe-inline`. Re-run the script to regenerate. */

.s-08a0ed { text-align:right; }
.s-0967d7 { margin:0 0 0 auto; padding:6px 14px; font-size:0.82rem; }
.s-0d8da7 { color:var(--text); }
.s-0da3c2 { margin-top:12px; display:flex; gap:8px; }
.s-12b730 { font-size:0.85rem; color:var(--muted); margin-top:4px; }
.s-13dc06 { display:flex; flex-direction:column; gap:8px; }
.s-1477f1 { font-size:0.78rem; color:#64748b; }
.s-157a9c { margin-bottom:14px; }
.s-16468a { font-size:0.92rem; color:#94a3b8; margin-top:4px; }
.s-1732ea { display:flex; gap:8px; }
.s-1755fe { height:36px; min-width:84px; min-height:0; }
.s-176d82 { color:var(--emerald); font-weight:700; }
.s-1944f4 { flex:1; font-size:0.8rem; color:var(--muted); }
.s-1a0772 { font-size:0.85rem; min-height:18px; margin: 8px 0; display:none; }
.s-1d9320 { flex:1; background:var(--border); color:var(--text); border-radius:8px; }
.s-224b51 { display: none; }
.s-22e56f { font-size:0.75rem; color:#64748b; }
.s-244dbd { font-size:0.78rem; color:var(--muted); margin-bottom:4px; }
.s-257e54 { margin-top:18px; font-size:0.82rem; }
.s-25cb8a { color:#ef4444; }
.s-266fdc { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #334155; background:#0b1220; color:#f1f5f9; font-size:1rem; outline:none; font-family:inherit; margin-bottom:16px; box-sizing:border-box; resize:vertical; }
.s-295841 { font-size:0.92rem; color:#94a3b8; line-height:1.55; margin-bottom:22px; white-space:pre-wrap; }
.s-2d76cb { font-size:0.72rem; color:var(--muted); text-align:right; margin-top:4px; }
.s-2ed14f { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.s-2f5811 { width:0%; }
.s-2f897c { text-align:center; margin-bottom: 4px; }
.s-3018de { font-size:0.78rem; color: var(--muted); margin-top:-6px; }
.s-335e47 { background:var(--border); color:var(--text); border-radius:8px; flex:1; }
.s-343fc5 { width:100%; background:#0f172a; border:1px solid #334155; color:white; padding:12px; margin-bottom:12px; border-radius:8px; resize:vertical; font-family:inherit; font-size:0.95rem; }
.s-3451ed { margin-top:14px; width:auto; padding:10px 18px; }
.s-388956 { height:120px; }
.s-389ab3 { color:#ef4444; font-size:0.82rem; min-height:16px; margin-bottom:12px; text-align:left; }
.s-3c985f { font-size:0.92rem; color:#94a3b8; line-height:1.55; margin-bottom:22px; }
.s-431070 { display:none; margin-bottom:8px; }
.s-431349 { padding:6px 12px; }
.s-44265a { font-weight:500; }
.s-445b80 { flex:1; padding:12px 16px; border-radius:10px; border:none; background:#38bdf8; color:#0f172a; cursor:pointer; font-weight:700; font-size:0.95rem; font-family:inherit; min-height:46px; }
.s-44bc06 { display:flex; flex-direction:column; gap:2px; flex:1; }
.s-4563e0 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.s-462f2f { color:#fbbf24; font-size:0.8rem; margin-left:6px; }
.s-46dcee { margin:0; }
.s-470671 { color:#94a3b8; }
.s-47d41e { flex-direction:column; align-items:stretch; gap:10px; }
.s-47e186 { padding:8px 12px; border-radius:8px; border:1px solid #334155; background:#0b1220; color:#f1f5f9; }
.s-492ec0 { display:flex; align-items:center; gap:8px; }
.s-4ab48b { font-size:1.15rem; font-weight:800; color:#f1f5f9; margin:4px 0 8px; line-height:1.3; }
.s-4d07af { font-size:0.72rem; color:#64748b; }
.s-52a2b2 { flex:1 1 220px; }
.s-5499ee { margin-bottom:18px; }
.s-54a40d { display:flex; align-items:center; gap:10px; }
.s-55c537 { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid transparent; }
.s-5614f8 { display:flex; flex-direction:column; align-items:center; gap:4px; }
.s-58aba5 { cursor:pointer; }
.s-59887a { font-size:0.72rem; color:var(--muted); }
.s-59cfd1 { flex:1; padding:12px 16px; border-radius:10px; border:none; background:#38bdf8; color:#0f172a; cursor:pointer; font-weight:700; font-size:0.95rem; font-family:inherit; min-height:46px; }
.s-59cfd1.s-confirm-danger { background:#ef4444; color:#ffffff; }
.s-5c81a2 { background:var(--danger); color:white; border-radius:50%; padding:2px 7px; font-size:0.72rem; font-weight:bold; }
.s-60ef06 { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.s-61424d { overflow-y:auto; }
.s-618605 { display:flex; gap:10px; }
.s-6381f6 { display:none; gap:8px; flex-direction:column; }
.s-64eddc { font-weight:bold; color:var(--text); font-size:1.05rem; }
.s-693de5 { flex:1; min-width:160px; padding:8px 12px; border-radius:8px; border:1px solid #334155; background:#0b1220; color:#f1f5f9; }
.s-6ab45e { margin-top:12px; font-size:0.85rem; display:none; }
.s-6aefe7 { width:100%; background:var(--bg-input); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:8px; font-size:0.9rem; outline:none; font-family:inherit; }
.s-6bfe16 { text-align:center; font-size:0.85rem; color: var(--muted); margin-bottom:12px; min-height:18px; }
.s-6e7079 { width:100%; padding:12px 16px; border-radius:10px; border:none; background:#38bdf8; color:#0f172a; cursor:pointer; font-weight:700; font-size:0.95rem; font-family:inherit; min-height:46px; }
.s-6ea6a2 { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.s-6eedf4 { color:#94a3b8; font-size:0.88rem; margin-top:8px; }
.s-71943d { font-weight:700; font-size:0.92rem; }
.s-7308f8 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.s-746eb2 { padding:2px 8px; font-size:0.72rem; margin-left:8px; }
.s-752897 { display:flex; align-items:center; justify-content:center; gap:8px; }
.s-78f6f2 { margin-top:12px; }
.s-79e9b4 { padding:6px 8px; }
.s-7a7df8 { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #334155; background:#0b1220; color:#f1f5f9; font-size:1rem; outline:none; font-family:inherit; margin-bottom:16px; box-sizing:border-box; }
.s-7f356a { text-decoration:none; display:inline-block; padding:10px 20px; }
.s-7f8dc0 { display:flex; align-items:center; gap:12px; }
.s-80b67b { font-size:0.78rem; color:var(--muted); margin-top:-6px; min-height:14px; }
.s-82e88f { margin-top:18px; }
.s-840df1 { width:24px; text-align:center; color:var(--muted); font-weight:700; }
.s-8c38df { display:none; margin-top:14px; }
.s-8d4833 { background:rgba(245,158,11,0.18); color:#fde68a; border:1px solid rgba(245,158,11,0.4); }
.s-8f9d9e { text-align:center; font-size:0.76rem; color: var(--muted); margin-bottom: 6px; }
.s-902d90 { margin-top:6px; font-size:0.7rem; color:var(--muted); text-align:center; opacity:0.8; }
.s-92d173 { margin-top:10px; }
.s-92f265 { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.s-93b8ea { display:none; }
.s-982a4a { color:#f87171; }
.s-99b2d2 { position:absolute; top:12px; right:14px; background:none; border:none; color:#64748b; font-size:1.3rem; cursor:pointer; width:32px; height:32px; border-radius:8px; padding:0; }
.s-9a6131 { flex:1; padding:12px 16px; border-radius:10px; border:none; background:#ef4444; color:white; cursor:pointer; font-weight:700; font-size:0.95rem; font-family:inherit; min-height:46px; }
.s-9f2285 { width:100%; margin-bottom:10px; }
.s-9fca33 { font-size:0.78rem; color:var(--emerald); font-weight:700; }
.s-a11e1f { max-width:240px; }
.s-a8a4dd { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.s-ac65de { width:100%; background:var(--bg-input); border:1px solid var(--border); color:var(--text); padding:12px; border-radius:8px; font-size:1rem; outline:none; margin-bottom:12px; font-family:inherit; }
.s-af0902 { grid-column:span 2; }
.s-afbbba { display:flex; align-items:center; gap:12px; margin-top:8px; }
.s-affdd3 { background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font-size:inherit; text-decoration:underline; font-family:inherit; }
.s-b0bcbf { padding:4px; }
.s-b30e2c { margin-bottom:8px; }
.s-b59d09 { font-size:0.78rem; color:var(--muted); font-weight:400; }
.s-b62e9c { max-width: 440px; }
.s-b7ddee { display:none; flex-direction:column; flex:1; min-height:0; overflow-y:auto; }
.s-bae01f { margin-top:18px; white-space:nowrap; }
.s-c0c9d7 { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.s-c18ef1 { color:#94a3b8; font-size:0.75rem; }
.s-c32024 { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.s-c4ad98 { font-size:0.78rem; }
.s-c6453a { font-size:0.82rem; color:var(--muted); margin-bottom:14px; line-height:1.5; }
.s-c6828b { margin-top:24px; text-align:center; }
.s-c68ae4 { color:var(--warn,#fbbf24); font-weight:700; }
.s-c72a22 { font-size:0.78rem; font-family:monospace; }
.s-c848a5 { color:#10b981; font-weight:700; font-size:1.05rem; }
.s-cafc78 { display:flex; gap:10px; flex-wrap:wrap; }
.s-cd8c3b { display:flex; flex-direction:column; flex:1; min-height:0; }
.s-d08a58 { font-size:0.78rem; color:var(--muted); }
.s-d110cf { padding:2px 8px; font-size:0.72rem; }
.s-d114d3 { color:#64748b; }
.s-d29f87 { display:none; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.s-d3b60f { width:auto; }
.s-d5e8c5 { flex:1; }
.s-d69834 { display:flex; gap:8px; margin-top:12px; }
.s-d70f0b { color:var(--accent); }
.s-d79ce2 { margin-top:8px; }
.s-d922d2 { font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:bold; display:block; margin-bottom:6px; }
.s-da326c { width:auto; padding:8px 14px; }
.s-dace2f { margin-left:6px; }
.s-dc2110 { flex:1; padding:12px 16px; border-radius:10px; border:1px solid #334155; background:#1e293b; color:#94a3b8; cursor:pointer; font-weight:700; font-size:0.95rem; font-family:inherit; min-height:46px; }
.s-e2cc31 { flex:1; min-width:0; }
.s-e4a941 { color:#64748b; font-size:0.78rem; }
.s-e4e774 { margin-top:8px; font-size:0.72rem; }
.s-e71a13 { display:none; margin-top:10px; }
.s-e9c1c9 { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.s-eaaf86 { font-size:0.85rem; line-height:1.7; }
.s-ec0c7b { color:#c4b5fd; font-size:0.78rem; margin-left:6px; }
.s-f1fe32 { font-size:0.92rem; color:#94a3b8; line-height:1.55; margin-bottom:16px; }
.s-f257e1 { font-size:0.8rem; }
.s-f4e330 { margin-top:14px; }
.s-f96bcc { display:none; flex-direction:column; gap:10px; }
.s-fbe98b { max-width: 400px; }
.s-fbedb9 { font-weight:700; color:var(--text); }
.s-fd19b1 { color:var(--emerald); }
.s-ff5116 { font-size:3rem; margin: 8px 0 4px; }
.s-ff6eee { margin-top:6px; }

/* Hand-added: migrated from a JS template-literal img tag where the
   regex couldn't reach (template-evaluated attribute right after the
   tag name). Friend-of-the-week avatar in the leaderboard. */
.fotw-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* Hand-added utility: semantic class for JS-toggled visibility.
   Use classList.toggle('js-hidden', shouldHide) instead of the
   broken style.display='none'/'' pattern that no longer works
   after Phase B (the inline display:none lives in s-<hash> classes
   now, so clearing inline style doesn't unhide). !important so it
   beats any other display rule the element's classes carry. */
.js-hidden { display: none !important; }

/* === Admin Panel report rows ===
   Block layout (no side-by-side): summary header at top doubles as the
   click-to-expand toggle, optional detail section drops in the middle
   when expanded, action bar pinned at the bottom in a single row.
   Removes the dead space the previous flex-side layout left behind when
   the info column was short and the action stack was tall. */
.ar-row { padding: 12px 14px; background: var(--bg-input);
          border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }

/* Summary block — clickable to expand. role="button" + tabindex on the JS
   side; hover gives a subtle hint. */
.ar-summary { cursor: pointer; }
.ar-summary:hover .ar-expand-chev { color: var(--text); }

/* Head: name+badges on the left, top-reasons on the right (wraps below
   on tight widths). */
.ar-head { display: flex; flex-wrap: wrap; align-items: flex-start;
           justify-content: space-between; gap: 8px; }
.ar-head-left { display: flex; flex-wrap: wrap; align-items: center;
                gap: 6px; min-width: 0; font-weight: 600; }
.ar-head-right { font-size: 0.84rem; color: var(--text); line-height: 1.4;
                 text-align: right; max-width: 60%; word-break: break-word; }

.ar-state { font-size: 0.70rem; padding: 2px 8px; border-radius: 999px;
            text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; }
.ar-state.ar-active { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.ar-state.ar-shadow { background: rgba(168,85,247,0.18); color: #d8b4fe; }
.ar-state.ar-banned { background: rgba(239,68,68,0.18); color: #fca5a5; }
.ar-count { font-size: 0.72rem; color: var(--muted); flex-shrink: 0; }
.ar-count.ar-count-24h { padding: 2px 8px; border-radius: 999px;
                         background: rgba(245,158,11,0.18); color: #fcd34d;
                         font-weight: 600; letter-spacing: 0.2px; }

/* Meta line — reporters · time · chevron, all on one row. */
.ar-meta { display: flex; align-items: center; justify-content: space-between;
           gap: 8px; margin-top: 6px;
           font-size: 0.74rem; color: var(--muted); line-height: 1.4; }
.ar-meta-text { flex: 1; min-width: 0; }
.ar-expand-chev { font-size: 0.85rem; color: var(--muted); line-height: 1;
                  transition: transform 180ms ease, color 120ms ease;
                  flex-shrink: 0; padding: 2px 4px; }
.ar-row.expanded .ar-expand-chev { transform: rotate(180deg); color: var(--text); }

/* Detail (hidden until row expands) — per-report list. */
.ar-detail { display: none; margin-top: 10px; padding-top: 8px;
             border-top: 1px solid var(--border); }
.ar-row.expanded .ar-detail { display: block; }
.ar-detail-header { font-size: 0.72rem; color: var(--muted);
                    text-transform: uppercase; letter-spacing: 0.5px;
                    margin-bottom: 4px; }
.ar-detail-row { display: flex; align-items: flex-start; justify-content: space-between;
                 gap: 8px; padding: 6px 0; font-size: 0.78rem;
                 border-bottom: 1px dashed var(--border); }
.ar-detail-row:last-child { border-bottom: none; }
.ar-detail-main { display: flex; flex-wrap: wrap; align-items: center;
                  gap: 6px; min-width: 0; }
.ar-detail-reporter { color: var(--text); font-weight: 600; }
.ar-detail-reason { color: var(--text); }
.ar-detail-source { padding: 1px 7px; border-radius: 999px; font-size: 0.68rem;
                    letter-spacing: 0.2px;
                    background: rgba(99, 102, 241, 0.18); color: #c7d2fe; }
.ar-detail-source-auto { background: rgba(245, 158, 11, 0.20); color: #fcd34d; }
.ar-detail-status { padding: 1px 7px; border-radius: 999px; font-size: 0.68rem;
                    background: rgba(107, 114, 128, 0.20); color: #d1d5db;
                    text-transform: capitalize; }
.ar-detail-time { color: var(--muted); flex-shrink: 0; font-size: 0.72rem; }
.ar-detail-system { color: var(--muted); font-style: italic; font-weight: 600; }
.ar-detail-empty { color: var(--muted); text-align: center; padding: 8px;
                   font-size: 0.82rem; }

/* Actions row — single horizontal strip pinned at the bottom.
   Order: Hard Ban (admin only) · Shadow · Dismiss. flex:1 fills the
   available width evenly so each button is the same size regardless
   of label length. */
.ar-actions { display: flex; gap: 8px; margin-top: 12px; }
.ar-btn { flex: 1; padding: 9px 10px; border-radius: 8px; border: none;
          cursor: pointer; font-weight: 600; font-size: 0.82rem;
          font-family: inherit; touch-action: manipulation; }
.ar-btn.ar-ban     { background: var(--danger); color: white; }
.ar-btn.ar-ban:hover { filter: brightness(1.1); }
.ar-btn.ar-shadow  { background: rgba(168,85,247,0.20); color: #d8b4fe; }
.ar-btn.ar-shadow:hover  { background: rgba(168,85,247,0.32); }
.ar-btn.ar-dismiss { background: transparent; color: var(--muted);
                     border: 1px solid var(--border); }
.ar-btn.ar-dismiss:hover { background: var(--border); color: var(--text); }

@media (max-width: 480px) {
    .ar-head-right { max-width: 100%; text-align: left; }
    .ar-detail-row { flex-direction: column; gap: 2px; }
    .ar-detail-time { align-self: flex-end; }
}