/* Seva Counter — temple theme: kumkum maroon, saffron, turmeric gold on a cream kolam background. */
@font-face { font-family: 'Baloo Tamma 2'; font-weight: 400 800; font-display: swap;
  src: url(fonts/baloo-tamma2-kannada.woff2) format('woff2'); unicode-range: U+0C80-0CFF, U+0964-0965, U+200C-200D, U+25CC; }
@font-face { font-family: 'Baloo Tamma 2'; font-weight: 400 800; font-display: swap;
  src: url(fonts/baloo-tamma2-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2212; }

:root {
  --maroon: #7A1F2B; --maroon-d: #4E0F19; --saffron: #E8892B; --gold: #D4A017; --gold-l: #F6D982; --cream: #FFF8EC;
  --ink: #2A1A12; --muted: #7A6A5C; --ok: #2E7D32; --bad: #B3261E; --warn: #B26A00; --line: #EAD9BC; --card: #fff;
  --seva: #7A1F2B; --prasada: #1E5F7B; --admin: #4A3B2F;
  --display: 'Baloo Tamma 2', 'Noto Sans Kannada', 'Kannada Sangam MN', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* class rules below set display; never let them un-hide */
html, body { margin: 0; color: var(--ink); }
body { font: 16px/1.45 'Noto Sans Kannada', 'Kannada Sangam MN', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23D4A017' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M22 5 39 22 22 39 5 22Z'/%3E%3Ccircle cx='22' cy='22' r='3.2'/%3E%3C/g%3E%3Cg fill='%23D4A017' fill-opacity='.22'%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='44' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='44' r='1.6'/%3E%3Ccircle cx='44' cy='44' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
button { font: inherit; cursor: pointer; border: 0; }
input, select { font: inherit; padding: 10px 12px; border: 1.5px solid #D9C4A0; border-radius: 12px; background: #fff; width: 100%; color: var(--ink); }
h2, h3 { font-family: var(--display); }
h2 { font-size: 1.35rem; margin: .6rem 0; color: var(--maroon-d); } h3 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; color: var(--maroon); }
.center { text-align: center; } .muted { color: var(--muted); } .small { font-size: .85rem; } .bad { color: var(--bad); }
.huge { font-size: 1.3rem; }
.page { max-width: 760px; margin: 0 auto; padding: 12px 16px 40px; }
.page.admin { max-width: 1100px; }
.ic { width: 1.4em; height: 1.4em; vertical-align: -.35em; flex-shrink: 0; }

/* ---- welcome / temple banner */
.temple { text-align: center; padding: 8px 8px 6px; }
.templeart { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto -4px; }
.temple .tkn { font-family: var(--display); font-size: 1.45rem; font-weight: 800; color: var(--maroon-d); line-height: 1.2; }
.temple .ten { font-size: .95rem; color: var(--maroon); }
.temple .ev { margin: 6px auto 0; display: inline-block; font-family: var(--display); font-size: 1rem; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, var(--saffron), #D9631E); padding: 3px 16px; border-radius: 99px; box-shadow: 0 2px 6px rgba(200, 90, 20, .35); }
.srv { text-align: center; font-size: .85rem; color: var(--muted); word-break: break-all; margin-top: 8px; }
.link { background: none; color: var(--maroon); text-decoration: underline; padding: 10px; display: block; margin: 6px auto; }
.msg { padding: 12px 14px; border-radius: 14px; margin: 12px 0; text-align: center; }
.msg.bad { background: #fdecea; color: var(--bad); } .msg.ok { background: #e8f5ec; color: var(--ok); } .msg.warn { background: #fff4dc; color: #6b3d00; }

/* ---- buttons */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.big { display: block; width: 100%; min-height: 58px; padding: 12px 14px; margin: 8px 0; border-radius: 16px; font-size: 1.05rem;
  font-weight: 700; background: linear-gradient(180deg, #8E2A37, var(--maroon)); color: #fff; box-shadow: 0 2px 0 var(--maroon-d), 0 4px 10px rgba(78, 15, 25, .2); }
.big:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--maroon-d); }
.big.prasada { background: linear-gradient(180deg, #2A7396, var(--prasada)); box-shadow: 0 2px 0 #123d50, 0 4px 10px rgba(18, 61, 80, .2); }
.big.admin { background: linear-gradient(180deg, #5E4C3D, var(--admin)); box-shadow: 0 2px 0 #2c2219; }
.big.alt { background: #fff; color: var(--maroon); border: 2px solid var(--gold); box-shadow: none; }
.big.ok { background: linear-gradient(180deg, #38913C, var(--ok)); box-shadow: 0 2px 0 #1b5e20; }
.big.bad { background: linear-gradient(180deg, #C9372E, var(--bad)); box-shadow: 0 2px 0 #7f1d16; }
.grid .big { margin: 0; min-height: 84px; }
.cbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1.25; }
.cbtn .ic { width: 30px; height: 30px; color: var(--gold-l); }
.row { display: flex; gap: 10px; } .row > * { flex: 1; }

/* ---- PIN */
.pindots { font-size: 2rem; letter-spacing: 8px; text-align: center; min-height: 3rem; margin: 8px 0; color: var(--maroon); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: 10px auto; }
.keypad button { height: 68px; font-size: 1.6rem; border-radius: 18px; background: #fff; border: 2px solid var(--line); font-weight: 600; }
.keypad button.ok { background: var(--ok); color: #fff; border-color: var(--ok); }

/* ---- header with a mango-leaf & marigold thoranam */
header.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 14px 22px; color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='18'%3E%3Cpath d='M0 2Q19 9 38 2' stroke='%23F6D982' stroke-width='1.6' fill='none'/%3E%3Cpath d='M10 5c-4 5-2.5 10 0 12.5 2.5-2.5 4-7.5 0-12.5z' fill='%233F9142'/%3E%3Ccircle cx='28' cy='7.5' r='4' fill='%23F7931E'/%3E%3Ccircle cx='28' cy='7.5' r='1.6' fill='%23C2410C'/%3E%3C/svg%3E") repeat-x left bottom / 38px 18px,
    linear-gradient(180deg, #8E2A37, var(--maroon-d)); }
header .who { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
header .who .ic { width: 26px; height: 26px; color: var(--gold-l); }
header .st { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.net { font-size: .75rem; padding: 3px 8px; border-radius: 99px; background: #999; color: #fff; white-space: nowrap; }
.net.on { background: var(--ok); } .net.off { background: var(--bad); }
.pill { padding: 6px 10px; border-radius: 99px; background: #fff; color: var(--maroon); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.pill.warn { background: #ffe1a8; color: #6b3d00; } .pill.ok { background: var(--ok); color: #fff; } .pill.bad { background: #fdecea; color: var(--bad); }
header .pill { background: rgba(255, 255, 255, .16); color: #fff; } header .pill.warn { background: #ffe1a8; color: #6b3d00; }
header .menu { font-size: 1.1rem; padding: 4px 12px; }

/* ---- counter pages */
.tally { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line);
  border-left: 6px solid var(--gold); border-radius: 16px; padding: 10px 14px; margin-bottom: 10px; }
.tally .n { font-size: 1.3rem; font-family: var(--display); color: var(--maroon-d); }
.tally .pill { border: 1px solid var(--line); }
.printerline { font-size: .85rem; color: var(--muted); margin: -2px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.printerline .ic { color: var(--maroon); }
.printerline .link { display: inline; padding: 0 4px; margin: 0; }
.printerline .bad { color: var(--bad); }
.pfail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fdecea; border: 2px solid var(--bad); color: var(--bad);
  border-radius: 14px; padding: 8px 10px; margin-bottom: 10px; font-weight: 600; }
.pfail span { flex: 1 1 100%; } .pfail .pill { border: 1px solid #f3b8b3; }
.pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.pay button { height: 52px; border-radius: 14px; background: #fff; border: 2px solid var(--line); font-weight: 700; color: var(--muted); }
.pay button.on { background: linear-gradient(180deg, #F29A3C, var(--saffron)); border-color: var(--saffron); color: #fff; box-shadow: 0 2px 6px rgba(232, 137, 43, .4); }

.cam { position: relative; background: #111; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 46vh; width: 100%;
  border: 3px solid var(--gold); }
.cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam .frame { position: absolute; inset: 14% 22%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.camctl { position: absolute; right: 8px; top: 8px; } .camctl button { background: rgba(0, 0, 0, .45); color: #fff; border-radius: 99px; padding: 8px 10px; }
.camerr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
  padding: 16px; background: #333; }

.result { border-radius: 16px; padding: 12px 14px; margin: 10px 0; min-height: 64px; background: #fff; border: 2px solid var(--line); }
.result.idle { color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; }
.result.ok { background: #EEF7EE; border-color: var(--ok); } .result.queued { background: #fff7e6; border-color: var(--warn); }
.result.bad { background: #fdecea; border-color: var(--bad); }
.result .rt { font-size: 1.15rem; font-weight: 700; } .result .rs { margin-top: 4px; }
.pstate { font-size: .85rem; font-weight: 600; color: var(--muted); }

/* seva buttons: icon in the seva's colour */
.sevas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sv { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 10px 8px 12px; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 2px;
  box-shadow: 0 2px 6px rgba(122, 31, 43, .07); }
.sv:active { transform: scale(.98); }
.sv.in { background: #FFF4E2; border-color: var(--c, var(--saffron)); box-shadow: 0 0 0 2px var(--c, var(--saffron)) inset; }
.sv .kn { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; color: var(--maroon-d); }
.sv .en { font-size: .78rem; color: var(--muted); } .sv .pr { font-weight: 700; color: var(--maroon); }
.sv .tm { font-size: .72rem; color: var(--muted); }
.sv.on { border-color: var(--saffron); background: #fff1e0; }
.sicon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); margin-bottom: 2px; }
.sicon .ic { width: 30px; height: 30px; vertical-align: 0; }
.sicon.ov { width: 34px; height: 34px; background: rgba(255, 255, 255, .92); border-color: #fff; vertical-align: middle; }
.sicon.ov .ic { width: 24px; height: 24px; }
.qbadge { position: absolute; top: -9px; right: -9px; min-width: 32px; height: 32px; border-radius: 99px; background: var(--saffron);
  color: #fff; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; padding: 0 6px;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.chip .ic { width: 16px; height: 16px; vertical-align: 0; }

.recent .rrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px dashed var(--line); }
.rrow.void { opacity: .5; text-decoration: line-through; }
.rbtn { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .rbtn .pill { border: 1px solid var(--line); }
.paperrow { margin-top: 10px; }

/* basket */
.basketpad { height: 220px; }
.basket { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: #fff; border-top: 4px solid var(--gold);
  box-shadow: 0 -6px 18px rgba(78, 15, 25, .18); padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); max-height: 45vh; overflow: auto;
  border-radius: 18px 18px 0 0; }
.bline { display: flex; align-items: center; gap: 8px; padding: 4px 0; max-width: 760px; margin: 0 auto; }
.bline .bn { flex: 1; font-family: var(--display); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bline .bq { min-width: 28px; text-align: center; font-size: 1.15rem; }
.bline .ba { min-width: 70px; text-align: right; color: var(--muted); }
.qb { width: 42px; height: 42px; border-radius: 12px; background: var(--cream); border: 2px solid var(--line); font-size: 1.3rem; font-weight: 800; color: var(--maroon); }
.bfoot { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 6px auto 0; flex-wrap: wrap; }
.btotal { flex: 1; font-family: var(--display); font-size: 1.3rem; font-weight: 800; color: var(--maroon-d); }
.bprint { width: auto; flex: 1 1 100%; margin: 0; }
.bprint .ic { color: var(--gold-l); }

/* modal + preview */
#modal { position: fixed; inset: 0; z-index: 20; background: rgba(40, 10, 15, .5); display: flex; align-items: flex-end; justify-content: center; }
.mbox { background: var(--cream); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; border-radius: 22px 22px 0 0; padding: 16px 16px 24px;
  border-top: 4px solid var(--gold); }
.mbox h2 .ic { color: var(--maroon); }
.mbox label { display: block; margin: 8px 0; font-size: .9rem; color: var(--muted); } .mbox label input, .mbox label select { margin-top: 4px; }
.mbox label.chk { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.mbox label.chk input { width: 24px; height: 24px; margin: 0; }
.mbox .grid + .grid { margin-top: 10px; }
.tnum { display: flex; align-items: center; gap: 8px; font-size: 1.6rem; font-weight: 700; margin: 14px 0; }
.tnum input { font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; }
.plist div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.preview { background: #E9E4DA; padding: 10px; display: flex; flex-direction: column; gap: 2px; align-items: center; max-height: 58vh; overflow: auto; border-radius: 12px; }
.preview img { width: 100%; max-width: 300px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); image-rendering: pixelated; }
label.tick { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
label.tick input { width: 26px; height: 26px; }

/* full-screen prasada results */
#overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 20px; }
.ov.ok { background: radial-gradient(circle at 50% 30%, #3E9B43, #1F6B24); }
.ov.bad { background: radial-gradient(circle at 50% 30%, #D2443A, #8E1B14); }
.ov.warn { background: radial-gradient(circle at 50% 30%, #D58A12, #8F5200); }
.ovin { width: 100%; max-width: 560px; }
.ovt { font-family: var(--display); font-size: 2.3rem; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.ovt .ovi { width: 76px; height: 76px; color: var(--gold-l); }
.ovin .pk { font-family: var(--display); font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-top: 6px; }
.ovin .pe { font-size: 1.1rem; opacity: .95; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ovin .sv { font-size: 1.1rem; margin-top: 12px; opacity: .95; background: none; border: 0; min-height: 0; padding: 0; color: #fff; display: block; box-shadow: none; }
.ovin .rc { font-size: 1.4rem; font-weight: 700; margin-top: 12px; letter-spacing: 1px; }
.ovin .note { margin-top: 12px; background: rgba(0, 0, 0, .22); padding: 8px 10px; border-radius: 12px; }
.ovin .nop { opacity: .9; font-size: 1.4rem; }
.ovb { margin-top: 22px; } .ovb .big.alt { background: rgba(255, 255, 255, .95); border: 0; } .ovb .big.ok { background: #fff; color: var(--ok); }
.ovhint { margin-top: 18px; opacity: .75; font-size: .9rem; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; background: #2A1A12; color: #fff;
  padding: 12px 18px; border-radius: 14px; max-width: 90vw; text-align: center; border: 1px solid var(--gold); }

/* admin */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.tabs button { padding: 10px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line); white-space: nowrap; font-weight: 600; color: var(--muted); }
.tabs button.on { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 14px; padding: 12px; }
.card .k { color: var(--muted); font-size: .85rem; } .card .v { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--maroon); }
.card.warn { background: #fff4dc; }
.tw { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th { background: var(--maroon); color: #fff; text-align: left; padding: 8px; white-space: nowrap; font-weight: 600; }
td { padding: 8px; border-top: 1px solid var(--line); vertical-align: middle; }
tr.void td { opacity: .5; }
table.edit input, table.edit select { padding: 6px 8px; min-width: 90px; border-radius: 8px; }
table.edit input[type=checkbox] { min-width: 0; width: 22px; height: 22px; }
table.edit input[type=color] { min-width: 44px; width: 44px; padding: 2px; height: 34px; }
.icpick { white-space: nowrap; } .icpick .sicon { width: 34px; height: 34px; margin: 0 6px 0 0; vertical-align: middle; } .icpick .sicon .ic { width: 22px; height: 22px; }
.icpick select { min-width: 96px; width: auto; }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.form label { color: var(--muted); font-size: .9rem; } .form .big { margin: 0; }

/* WhatsApp receipt */
.ract { margin-top: 8px; display: flex; gap: 6px; }
.pill.wa { background: #E7F8EE; color: #128C4B; border: 1px solid #9EDDB8 !important; display: inline-flex; align-items: center; gap: 4px; }
.pill.wa .ic { width: 18px; height: 18px; vertical-align: 0; }
.ic.waic { color: #128C4B; }

/* ---- practice server: striped bar on every screen, so nobody mistakes it for the real event */
body.practice::before { content: '🧪 PRACTICE · ಅಭ್ಯಾಸ — TEST receipts, not real'; position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 26px; line-height: 26px; text-align: center; font: 700 13px/26px system-ui, sans-serif; color: #5a0a0a;
  background: repeating-linear-gradient(135deg, #FFD54F 0 14px, #FFE9A6 14px 28px); border-bottom: 2px solid #C62828;
  padding-top: env(safe-area-inset-top); box-sizing: content-box; pointer-events: none; }
body.practice { padding-top: calc(26px + env(safe-area-inset-top)); }
body.practice header.top { top: calc(26px + env(safe-area-inset-top)); }
.modesw { display: flex; gap: 6px; max-width: 420px; margin: 6px auto 4px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 4px; }
.modesw button { flex: 1; padding: 9px 6px; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; }
.modesw button.on { background: var(--maroon); color: #fff; }
body.practice .modesw button.on { background: #C62828; }
.practicehint { color: #8a1c1c; margin: 4px auto 8px; max-width: 520px; }
.practicebox { background: #FFF6D6; border: 2px dashed #C62828; border-radius: 14px; padding: 4px 14px 12px; margin-bottom: 10px; }

/* ---- temple name on every screen: strip in the top bar + footer */
header.top { flex-wrap: wrap; row-gap: 4px; }
header .tline { flex: 1 0 100%; order: -1; text-align: center; font-size: .72rem; line-height: 1.25; font-weight: 600;
  color: var(--gold-l); letter-spacing: .01em; padding-bottom: 4px; border-bottom: 1px solid rgba(246, 217, 130, .35); }
.tfoot { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; max-width: 760px;
  margin: 8px auto 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 2px solid var(--gold);
  color: var(--maroon-d); font-size: .8rem; line-height: 1.3; }
.tfoot .ic { width: 34px; height: 34px; color: var(--maroon); }
.tfoot .fkn { font-family: var(--display); font-weight: 700; font-size: .9rem; }
.tfoot .fen { font-weight: 600; }
.tfoot .fev { color: var(--muted); font-size: .75rem; }
.page.seva + .basket + .tfoot, .page.seva ~ .tfoot { padding-bottom: 140px; }   /* clear the fixed basket bar */
header .who { flex: 1 1 0; min-width: 0; }   /* the counter name wraps; the status buttons stay on its line */
.tfoot { flex-wrap: wrap; }
.tfoot .mcredit { flex: 1 0 100%; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px;
  font-size: .6rem; color: var(--muted); opacity: .75; letter-spacing: .02em; }
.tfoot .mcredit img { width: 11px; height: 11px; }