/* Matches mattbaermedia.com: Poppins, brand red, charcoal headings, square corners, light theme */
:root {
  color-scheme: light;
  --brand-red: #e21c21; --ink: #000; --charcoal: #303030; --grey: #606060; --teal: #0f4842;
  --paper: #fcfcfc; --white: #fff; --line: #e4e4e4;
  --f-poppins: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-oswald: "Oswald", "Arial Narrow", Impact, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 var(--f-poppins); }

.top { background:var(--white); border-bottom:1px solid var(--line); }
.top .in { max-width:720px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px; }
.top img { height:38px; width:auto; display:block; }
.top .brand { font:600 15px/1.1 var(--f-poppins); color:var(--brand-red); letter-spacing:.02em; text-transform:uppercase; }
.top .tag { display:block; font:400 12px/1.3 var(--f-poppins); color:var(--charcoal); text-transform:none; letter-spacing:0; }

.wrap { max-width:720px; margin:0 auto; padding:24px 16px 64px; }
h1 { font:600 30px/1.2 var(--f-poppins); color:var(--charcoal); text-transform:uppercase; margin:8px 0 6px; }
.sub { color:var(--grey); margin:0 0 20px; }
.cover { width:100%; max-height:260px; object-fit:cover; display:block; margin-bottom:12px; }
.dl a { margin:4px 6px 4px 0; }
#lbtools { position:absolute; bottom:16px; left:0; right:0; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
#lbtools a, #lbtools span { position:static; }
#lbtools .btn { width:auto; display:inline-block; padding:10px 16px; font-size:13px; }
.cell.hiddenph { opacity:.35; }
a { color:var(--brand-red); }

.btn { display:block; width:100%; padding:16px; border:0; border-radius:0; background:var(--brand-red); color:#fff; font:600 16px var(--f-poppins); letter-spacing:.04em; text-transform:uppercase; text-align:center; cursor:pointer; text-decoration:none; }
.btn:hover { background:#c4161b; }
.btn.small { display:inline-block; width:auto; padding:8px 14px; font-size:13px; }
.btn.ghost { background:transparent; color:var(--charcoal); border:1px solid var(--charcoal); }
.btn.ghost:hover { background:var(--charcoal); color:#fff; }

input[type=text], input[type=password], select { width:100%; padding:12px; border:1px solid #c9c9c9; border-radius:0; background:var(--white); color:var(--ink); font:400 16px var(--f-poppins); margin:8px 0 16px; }
input:focus, select:focus { outline:2px solid var(--brand-red); outline-offset:0; }
label.muted { display:block; }

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:24px; }
@media (min-width:600px) { .grid { grid-template-columns:repeat(4,1fr); } }
.grid .cell { position:relative; aspect-ratio:1; background:var(--line); overflow:hidden; cursor:pointer; }
.grid img, .grid video { width:100%; height:100%; object-fit:cover; display:block; }
.badge { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.65); color:#fff; font-size:12px; padding:2px 6px; }

.queue { margin-top:16px; font-size:14px; }
.qrow { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.qrow.err { color:var(--brand-red); }
.bar { height:4px; background:var(--line); margin-top:4px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--brand-red); width:0; }

#lb { position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:10; }
#lb img, #lb video { max-width:100%; max-height:100%; }
#lb button { position:absolute; top:12px; right:16px; background:none; border:0; color:#fff; font-size:32px; cursor:pointer; }

.card { background:var(--white); border:1px solid var(--line); border-top:3px solid var(--brand-red); padding:16px; margin:12px 0; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row > * { margin:0; }
table { width:100%; border-collapse:collapse; font-size:14px; }
td, th { text-align:left; padding:6px 4px; border-bottom:1px solid var(--line); }
.hide { display:none !important; }
.btn.danger { background:transparent; color:#b00020; border:1px solid #b00020; }
.btn.danger:hover { background:#b00020; color:#fff; }
.warn { color:var(--brand-red); }
.mgr:not(:empty) { margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:20; padding:16px; }
.modal { background:var(--white); max-width:720px; width:100%; max-height:92vh; overflow:auto; padding:16px; border-top:3px solid var(--brand-red); }
.modal .pv img, .modal .pv video { max-width:100%; max-height:60vh; display:block; margin:0 auto 10px; }
.muted { color:var(--grey); font-size:14px; }
.foot { text-align:center; margin-top:40px; font-size:13px; color:var(--grey); }
.foot a { color:var(--grey); }