:root { --bg:#000; --fg:#fff; --accent:#ffde59; --card:#111; --muted:#aaa; --headerH:90px; --adW:22vw; }
:root[data-theme="light"] { --bg:#fafafa; --fg:#111; --card:#ffffff; --muted:#555; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
header{position:sticky;top:0;left:0;right:0;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08);z-index:100}
:root[data-theme="light"] header{background:rgba(255,255,255,.9);border-bottom:1px solid rgba(0,0,0,.08)}
.brand{font-weight:800;letter-spacing:.5px;font-size:clamp(18px,3vw,32px);text-transform:uppercase;display:flex;align-items:center;gap:12px}
.qr{background:#fff;border-radius:12px;padding:8px;display:block}
main{padding:24px;}
.container{max-width:1100px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border-radius:16px;padding:16px;border:1px solid rgba(255,255,255,.06);box-shadow:0 8px 24px rgba(0,0,0,.25)}
:root[data-theme="light"] .card{border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 24px rgba(0,0,0,.07)}
.btn{background:var(--accent);color:#000;padding:10px 16px;border:none;border-radius:12px;font-weight:700;cursor:pointer}
.btn.secondary{background:#222;color:#fff;border:1px solid rgba(255,255,255,.1)}
:root[data-theme="light"] .btn.secondary{background:#f1f1f1;color:#111;border:1px solid rgba(0,0,0,.12)}
input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0a0a0a;color:#fff}
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea{ background:#fff; color:#111; border:1px solid rgba(0,0,0,.15) }
.row{display:flex;gap:12px;align-items:center}.row>*{flex:1}
.notice{color:var(--muted);font-size:12px}
.linkish{font-size:12px;text-decoration:underline;cursor:pointer}

.monitor-root{display:flex;gap:16px;align-items:stretch;justify-content:center;min-height:calc(100vh - 120px)}
.monitor-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:20px;overflow:hidden;height:calc(100vh - 140px)}
.adrail{width:var(--adW);max-width:28vw;min-width:180px;background:#0b0b0b;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:8px;display:grid;place-items:center}
:root[data-theme="light"] .adrail{ background:#fff; border:1px solid rgba(0,0,0,.1) }
.adrail img{max-width:100%;max-height:calc(100vh - 200px);border-radius:12px;object-fit:contain}
.shout{text-align:center;line-height:1.1;font-weight:800;text-shadow:0 6px 24px rgba(0,0,0,.35);word-wrap:break-word}
.shout img{width:auto;max-width:calc(100vw - var(--adW) - 60px);height:auto;max-height:calc(100vh - 160px);border-radius:16px;box-shadow:0 18px 36px rgba(0,0,0,.4);object-fit:contain;display:block}

.ad-thumb{max-width:100%; max-height:120px; object-fit:contain; border-radius:12px}

#credit{position:fixed;left:0;right:0;bottom:6px;text-align:center;font-size:12px;color:#bbb;opacity:.8;z-index:50;pointer-events:none}
:root[data-theme="light"] #credit{ color:#666 }
/* === Admin: new-submission alert === */
body.alerting { overflow: hidden; }
#alertOverlay {
  position: fixed; inset: 0;
  display: none; place-items: center;
  z-index: 99999; cursor: pointer;
}
body.alerting #alertOverlay { display: grid; }
#alertOverlay .scrim {
  width: 100%; height: 100%;
  animation: policeFlash 0.5s steps(1,end) infinite;
  mix-blend-mode: screen;
}
#alertOverlay .msg {
  position: absolute; inset: auto 0 12%;
  margin: 0 auto; width: 90%; max-width: 840px;
  text-align: center; font: 700 32px/1.2 system-ui, sans-serif;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6);
  background: rgba(0,0,0,.25); padding: 12px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
}
@keyframes policeFlash {
  0%, 49%   { background: rgba(255,0,0,.65); }
  50%, 100% { background: rgba(0,0,255,.65); }
}

/* === Admin: alert controls === */
#alertControls{
  position:fixed; top:8px; right:8px; z-index:99998;
  background:rgba(0,0,0,.45); color:#fff; padding:8px 10px;
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  font:12px/1.3 system-ui, sans-serif; display:flex; gap:10px; align-items:center;
  backdrop-filter:saturate(1.2) blur(3px);
}
#alertControls label{ display:flex; align-items:center; gap:6px; user-select:none; }
#alertControls input{ transform: scale(1.1); }
#alertControls .title{ font-weight:700; opacity:.9; margin-right:4px; }

#alertArmed{
  position:fixed; top:8px; right:8px; transform:translateY(38px);
  background:rgba(0,128,0,.35); color:#fff; padding:4px 8px;
  border-radius:8px; border:1px solid rgba(255,255,255,.15);
  font:12px system-ui, sans-serif; z-index:99997; display:none;
}