/* Levels, the site footer, the info pages, WhatsApp sender, logos, the splash, results board, the bell, motion
   Moved out of styles.css on 2026-11-05 (one big file split by section; the rules are unchanged and in the same order).
   Every page links this file right after css/extras.css. */

/* ─── Levels: animated medals, badge, level card ─── */
.tier-medal { display: block; overflow: visible; flex: none; }
.tier-medal .tm-sp path, .tier-medal .tm-shine, .tier-medal .tm-in path { transform-box: fill-box; transform-origin: center; }
/* The !important on duration / count is deliberate: the site-wide "reduce motion" rule sets every animation to .01ms, and the
   medals are the one thing that must keep shimmering (small, decorative, no large movement). */
.tier-medal.tm-anim .tm-a { animation: tmTwinkle 2.6s ease-in-out infinite; }
.tier-medal.tm-anim .tm-b { animation: tmTwinkle 2.6s ease-in-out .9s infinite; }
.tier-medal.tm-anim .tm-c { animation: tmTwinkle 2.6s ease-in-out 1.7s infinite; }
.tier-medal.tm-anim .tm-d { animation: tmBlink 3.1s ease-in-out .4s infinite; }
.tier-medal.tm-anim .tm-e { animation: tmBlink 3.1s ease-in-out 1.8s infinite; }
.tier-medal.tm-anim .tm-f { animation: tmGlint 3.4s ease-in-out .6s infinite; }
.tier-medal.tm-anim .tm-g { animation: tmGlint 3.4s ease-in-out 2.1s infinite; }
.tier-medal.tm-anim .tm-h { animation: tmGlint 3.4s ease-in-out 1.3s infinite; }
.tier-medal.tm-anim .tm-shine { animation: tmShine 3.6s ease-in-out .8s infinite; }
.tier-medal.tm-anim .tm-pulse { animation: tmPulse 3.6s ease-in-out infinite; }
.tier-medal.tm-anim .tm-a, .tier-medal.tm-anim .tm-b, .tier-medal.tm-anim .tm-c, .tier-medal.tm-anim .tm-d, .tier-medal.tm-anim .tm-e,
.tier-medal.tm-anim .tm-f, .tier-medal.tm-anim .tm-g, .tier-medal.tm-anim .tm-h, .tier-medal.tm-anim .tm-shine, .tier-medal.tm-anim .tm-pulse {
  animation-iteration-count: infinite !important; }
.tier-medal.tm-anim .tm-a { animation-duration: 2.6s !important; } .tier-medal.tm-anim .tm-b { animation-duration: 2.6s !important; }
.tier-medal.tm-anim .tm-c { animation-duration: 2.6s !important; } .tier-medal.tm-anim .tm-d { animation-duration: 3.1s !important; }
.tier-medal.tm-anim .tm-e { animation-duration: 3.1s !important; } .tier-medal.tm-anim .tm-f { animation-duration: 3.4s !important; }
.tier-medal.tm-anim .tm-g { animation-duration: 3.4s !important; } .tier-medal.tm-anim .tm-h { animation-duration: 3.4s !important; }
.tier-medal.tm-anim .tm-shine { animation-duration: 3.6s !important; } .tier-medal.tm-anim .tm-pulse { animation-duration: 3.6s !important; }
@keyframes tmTwinkle { 0%, 100% { opacity: .15; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(18deg); } }

@keyframes tmBlink { 0%, 100% { opacity: .1; } 40%, 60% { opacity: 1; } }

@keyframes tmGlint { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 82% { opacity: 1; transform: scale(1.1) rotate(35deg); } 92% { opacity: .5; transform: scale(.8) rotate(60deg); } }

@keyframes tmShine { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: .75; } 40% { transform: translateX(150px); opacity: 0; } 100% { transform: translateX(150px); opacity: 0; } }

@keyframes tmPulse { 0%, 100% { opacity: 0; transform: scale(.85); } 50% { opacity: .42; transform: scale(1.05); } }

.tier-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 11px 1px 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); font-size: 12px; font-weight: 800; color: var(--t1); white-space: nowrap; }
.tier-badge .tier-medal { margin: -3px -2px -4px 0; }
.tier-badge-txt b { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 1px; }
.tier-badge.tier-bronze { border-color: rgba(217, 164, 123, .5); }
.tier-badge.tier-silver { border-color: rgba(200, 206, 214, .5); }
.tier-badge.tier-gold { border-color: rgba(235, 178, 34, .55); }
.tier-badge.tier-platinum { border-color: rgba(91, 196, 238, .55); }

.tier-card { display: flex; align-items: center; gap: 14px; padding: 10px 16px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(180deg, #17181d, #111216); border: 1px solid var(--b1); }
.tier-card-medal { flex: none; width: 66px; display: grid; place-items: center; }
.tier-card-body { flex: 1; min-width: 0; }
.tier-card-name { font-size: 19px; font-weight: 900; color: #e9ecf6; line-height: 1.2; }
.tier-lvl { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 2px; }
.tier-card-sub { margin-top: 1px; font-size: 12px; color: var(--t2); }
.tier-bar { position: relative; height: 7px; margin: 8px 0 6px; border-radius: 999px; background: #2b2d35; overflow: hidden; }
.tier-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; background: linear-gradient(90deg, var(--tier-a), var(--tier-b), var(--tier-a)); background-size: 200% 100%; animation: tierBarFlow 3.4s linear infinite; animation-duration: 3.4s !important; animation-iteration-count: infinite !important; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes tierBarFlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

.tier-card-cap { font-size: 12px; color: var(--t3); }
.tier-card-cap b { color: var(--t1); }

.tier-preview { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 36px; }

@media (max-width: 480px) { .tier-card { flex-direction: column; text-align: center; } .tier-card-medal { width: auto; } }

/* ─── Site footer (built by js/footer.js). Only the site's own colours (the :root variables) are used. ─── */
.site-footer[data-site-footer] { margin-top: 32px; padding: 0; background: var(--s); border-top: 1px solid var(--b1); min-height: 170px; }
.ft-grid { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 24px 36px; padding-block: 28px 20px; }
.ft-col { min-width: 0; }
.ft-name { font-family: 'Cinzel', Georgia, serif; font-size: 18px; font-weight: 800; letter-spacing: 3px; line-height: 1.2; color: var(--gold); text-align: right; }
.ft-h { margin: 0 0 12px; font-size: 15px; font-weight: 900; color: var(--gold); }
.ft-h-soft { margin-top: 16px; font-size: 13px; color: var(--t2); }
.ft-sub { margin: -4px 0 10px; font-size: 12px; color: var(--t3); }
.ft-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--b1); background: var(--card); color: var(--t1); font-size: 12.5px; font-weight: 800; line-height: 1; text-decoration: none; }
.ft-chip i { font-size: 14px; color: var(--gold); }
a.ft-chip:hover { border-color: var(--gold); }
span.ft-chip { cursor: default; }

.ft-rows, .ft-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ft-rows { gap: 8px; }
.ft-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.ft-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--b1); background: var(--card); color: var(--gold); font-size: 14px; }
.ft-row-txt { font-size: 13px; color: var(--t2); }
.ft-row a { text-decoration: none; }
.ft-row a:hover .ft-row-txt { color: var(--gold); }
.ft-links { gap: 12px; }
.ft-links a { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--t2); text-decoration: none; }
.ft-links a i { font-size: 6px; color: var(--gold); }
.ft-links a:hover { color: var(--gold); }
.ft-bottom { border-top: 1px solid var(--b1); padding: 12px 0 14px; text-align: center; font-size: 12px; color: var(--t3); }

@media (max-width: 900px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 22px; padding-block: 24px 16px; }
  .ft-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .ft-grid { grid-template-columns: 1fr; padding-block: 20px 14px; }
  .ft-name { font-size: 16px; letter-spacing: 2px; }
}

/* ─── About / privacy / terms pages ─── */
.doc-page { max-width: 820px; margin: 0 auto; }
.doc-sec { padding: 18px 20px; margin-bottom: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--b1); }
.doc-sec h2 { margin: 0 0 8px; font-size: 17px; font-weight: 900; color: var(--gold); }
.doc-sec p { margin: 0 0 8px; font-size: 14.5px; line-height: 2; color: var(--t2); }
.doc-sec ul, .doc-sec ol { margin: 6px 0 0; padding-inline-start: 22px; }
.doc-sec li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.95; color: var(--t2); }
.doc-sec b { color: var(--t1); }
.doc-sec .hm-faq { margin-top: 6px; }
.doc-sec .hm-faq p { margin: 0; font-size: 13.5px; line-height: 1.9; }

/* ─── WhatsApp sender card (organizer panel, "السكريمات" tab) ─── */
.wa-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border-radius: 12px; border: 1px solid var(--b2); background: var(--s); }
.wa-box > i { font-size: 28px; color: var(--t3); flex: none; }
.wa-box > div { flex: 1 1 220px; min-width: 0; }
.wa-box b { color: var(--t1); }
.wa-box > b, .wa-box > div > b { display: block; font-size: 15px; }
.wa-box p { margin: 4px 0 0; font-size: 13px; color: var(--t2); line-height: 1.7; }
.wa-ok { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.06); }
.wa-ok > i { color: var(--green); }
.wa-off > i { color: var(--red); }
.wa-num { font-family: 'Courier New', monospace; font-size: 15px !important; color: var(--t1) !important; letter-spacing: 1px; text-align: right; }
.wa-pair { display: block; text-align: center; }
.wa-pair > b { font-size: 16px; }
.wa-code { margin: 12px auto 4px; padding: 14px 10px; max-width: 320px; border-radius: 14px; border: 2px dashed var(--gold); background: #0a0a0c; color: var(--gold); font-family: 'Courier New', monospace; font-size: clamp(26px, 8vw, 38px); font-weight: 900; letter-spacing: 6px; user-select: all; }
.wa-count { margin: 4px 0 10px !important; font-size: 12px !important; color: var(--t3) !important; }
.wa-steps { margin: 0 auto 12px; padding: 0 22px 0 0; max-width: 420px; text-align: right; color: var(--t2); font-size: 13px; line-height: 2; }
.wa-pair .org-actions { justify-content: center; }
.wa-err { margin: 0 0 8px !important; padding: 8px 12px; border-radius: 8px; background: rgba(239, 68, 68, 0.1); color: #fca5a5 !important; width: 100%; }
.wa-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; width: 100%; }
.wa-form .fg { flex: 1 1 220px; margin: 0; }
.wa-form + .adm-hint { width: 100%; margin-top: 10px; }
.wa-gfilter { width: 100%; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--b2); background: var(--s); color: var(--t1); font-family: inherit; font-size: 14px; }
.wa-glist { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; text-align: right; }
.wa-gpick { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--b2); background: var(--s); color: var(--t1); font-family: inherit; text-align: right; cursor: pointer; }
.wa-gpick b { font-size: 14px; overflow-wrap: anywhere; }
.wa-gpick small { font-size: 12px; color: var(--t3); }
.wa-gpick:hover:not(:disabled) { border-color: var(--green); }
.wa-gpick:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Logo of the community: footer + the short footer of the panels ─── */
.ft-brandrow { display: flex; align-items: center; gap: 12px; }
.ft-logo { width: 56px; height: 56px; border-radius: 12px; flex: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.pf-logo { display: inline-block; width: 24px; height: 24px; border-radius: 6px; vertical-align: middle; margin-inline-end: 6px; }
@media (max-width: 640px) { .ft-logo { width: 46px; height: 46px; border-radius: 10px; } }

/* ─── Login page: the logo instead of the person-with-shield icon ─── */
.admin-login-logo { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(212, 160, 23, 0.35); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); }
.admin-login-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .admin-login-logo { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 12px; } }

/* ─── Opening screen of the home page (js/splash.js) ─── */
#splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(circle at 50% 36%, #2a0e07 0%, #120807 45%, #0a0a0c 100%);
  cursor: pointer; transition: opacity .6s ease;
  /* if the script never runs, the screen still leaves by itself */
  animation: splashAuto .6s ease 9.5s forwards;
}
#splash.is-out { opacity: 0; pointer-events: none; }
@keyframes splashAuto { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.splash-logo {
  width: clamp(120px, 36vw, 190px); height: auto; border-radius: 28px;
  border: 1px solid rgba(212, 160, 23, 0.35);
  box-shadow: 0 0 70px rgba(226, 69, 32, 0.38), 0 18px 44px rgba(0, 0, 0, 0.65);
  animation: splashLogo 1s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes splashLogo { from { opacity: 0; transform: scale(.55) translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.splash-en, .splash-ar { text-align: center; max-width: 94vw; }
.splash-en {
  font-family: 'Cinzel', Georgia, serif; font-weight: 800; color: var(--gold);
  font-size: clamp(15px, 4.7vw, 30px); letter-spacing: .14em; min-height: 1.5em; white-space: nowrap;
  text-shadow: 0 0 18px rgba(212, 160, 23, 0.35);
}
.splash-ar { font-weight: 800; color: #f0f0f2; font-size: clamp(18px, 5.2vw, 30px); min-height: 1.7em; letter-spacing: 0; }
.splash-caret { display: inline-block; width: .09em; height: 1.05em; margin-inline-start: .18em; background: currentColor; vertical-align: -.14em; animation: splashCaret .75s steps(1) infinite; }
@keyframes splashCaret { 50% { opacity: 0; } }
/* reduced motion: no zoom / blur on the logo (it simply appears); the typing and the caret stay */
@media (prefers-reduced-motion: reduce) { .splash-logo { animation: splashFade .6s ease both; } }
@keyframes splashFade { from { opacity: 0; } to { opacity: 1; } }

/* ─── 404 page ─── */
.nf-body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 30%, #2a0e07 0%, #120807 45%, #0a0a0c 100%); }
.nf-wrap { width: 100%; max-width: 520px; text-align: center; }
.nf-logo { display: block; margin: 0 auto; width: 96px; height: 96px; border-radius: 22px; border: 1px solid rgba(212, 160, 23, 0.35); box-shadow: 0 0 50px rgba(226, 69, 32, 0.3), 0 14px 34px rgba(0, 0, 0, 0.6); }
.nf-code { margin: 18px 0 6px; font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(72px, 24vw, 130px); line-height: 1; letter-spacing: .06em; color: var(--gold); text-shadow: 0 0 38px rgba(212, 160, 23, 0.35); }
.nf-title { margin: 0 0 8px; font-size: clamp(20px, 5.4vw, 26px); font-weight: 900; color: var(--t1); }
.nf-text { margin: 0 auto 22px; max-width: 420px; font-size: 14px; line-height: 1.9; color: var(--t2); }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nf-brand { margin: 28px 0 0; font-family: 'Cinzel', Georgia, serif; font-size: 12px; letter-spacing: .3em; color: var(--t3); }

/* a button that cannot be used yet (e.g. "publish a scrim" before a WhatsApp number is linked) */
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.scrim-need-wa { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(212, 160, 23, 0.1); color: var(--gold); }

/* the country list of the WhatsApp link form opens over the card below it */
#scrim-wa { position: relative; z-index: 6; }
#scrim-wa .ph-pop { z-index: 60; }
.wa-card, .wa-card .wa-box { overflow: visible; }

/* ─── Results board (scrims.html, tab "الرزولت"; js/scrims-board.js), 2026-10-19. Every class starts with srb- ─── */
.srb-page:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.srb-page-body { margin-top: 18px; }
.srb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.srb-pick-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--t2); }
.srb-pick-label i { color: var(--gold); }
.srb-pick { flex: 1 1 260px; max-width: 460px; min-width: 0; }
.srb-board { padding: 18px; }
.srb-event { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.srb-title { margin: 0 0 8px; font-size: 17px; font-weight: 900; }
.srb-event-meta { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--t2); }
.srb-event-meta a { color: var(--t1); }
/* the podium: second | first (higher, gold) | third */
.srb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 16px; }
.srb-podium.srb-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srb-podium.srb-n1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.srb-pod { --pod: #b8c4d6; min-width: 0; padding: 16px 10px 12px; text-align: center; background: var(--s); border: 1px solid var(--b2); border-top: 3px solid var(--pod); border-radius: 14px; }
.srb-pod.is-1 { --pod: var(--gold); padding-top: 26px; padding-bottom: 16px; border-color: rgba(212, 160, 23, 0.45); border-top-color: var(--gold); background: linear-gradient(180deg, rgba(212, 160, 23, 0.10), var(--s) 55%); }
.srb-pod.is-3 { --pod: #cd7f32; }
.srb-pod-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.srb-pod-name { margin: 2px 0 0; font-size: 14.5px; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; }
.srb-pod.is-1 .srb-pod-name { font-size: 16px; }
.srb-pod-name a, .srb-team-name a { color: inherit; }
.srb-rank { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--pod); color: #141417; font-size: 12.5px; font-weight: 900; }
.srb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--b1); }
.srb-stats div { min-width: 0; }
.srb-stats dt { font-size: 11px; font-weight: 700; color: var(--t3); }
.srb-stats dd { margin: 2px 0 0; font-size: 16px; font-weight: 900; color: var(--t1); font-variant-numeric: tabular-nums; }
.srb-stat-total dd { color: var(--pod); }
/* logos (a team without one shows two letters) */
.srb-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--card); border: 1px solid var(--b2); color: var(--t2); font-weight: 900; }
.srb-logo-lg { width: 60px; height: 60px; font-size: 18px; }
.srb-pod.is-1 .srb-logo-lg { width: 76px; height: 76px; font-size: 22px; border-color: var(--gold); }
.srb-logo-sm { width: 28px; height: 28px; font-size: 11px; }
/* every other team */
.srb-table-wrap { border: 1px solid var(--b1); border-radius: 12px; overflow: hidden; }
.srb-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.srb-table th { padding: 10px 6px; background: var(--s); color: var(--t3); font-size: 11.5px; font-weight: 800; text-align: center; }
.srb-table th:nth-child(1) { width: 44px; }
.srb-table th:nth-child(n+3) { width: 62px; }
.srb-table th:nth-child(6) { width: 72px; }
.srb-table th.srb-th-team { text-align: right; }
.srb-table td { padding: 10px 6px; text-align: center; border-top: 1px solid var(--b1); font-variant-numeric: tabular-nums; }
.srb-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.srb-td-rank { color: var(--t2); font-weight: 900; }
.srb-table td.srb-td-team { text-align: right; }
.srb-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.srb-team-name { min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.srb-td-total { color: var(--gold); font-weight: 900; }
.srb-pages { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.srb-page { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--b2); border-radius: 9px; background: var(--s); color: var(--t2); font: inherit; font-weight: 800; cursor: pointer; }
.srb-page.is-on { background: var(--gold); border-color: var(--gold); color: #141417; }
.srb-page:disabled { opacity: 0.4; cursor: default; }
.srb-note { margin-top: 14px; }
@media (max-width: 640px) {
  .srb-pick { max-width: none; }
  .srb-board { padding: 12px; }
  .srb-podium { gap: 6px; }
  .srb-pod { padding: 12px 4px 10px; border-radius: 12px; }
  .srb-pod.is-1 { padding-top: 18px; }
  .srb-logo-lg { width: 44px; height: 44px; font-size: 14px; }
  .srb-pod.is-1 .srb-logo-lg { width: 54px; height: 54px; font-size: 16px; }
  .srb-pod-name { font-size: 12.5px; }
  .srb-pod.is-1 .srb-pod-name { font-size: 13.5px; }
  .srb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 2px; }
  .srb-stats dd { font-size: 14px; }
  .srb-table { font-size: 12.5px; }
  .srb-table th, .srb-table td { padding: 9px 3px; }
  .srb-table th:nth-child(1) { width: 28px; }
  .srb-table th:nth-child(n+3) { width: 40px; }
  .srb-table th:nth-child(6) { width: 50px; }
  .srb-logo-sm { width: 22px; height: 22px; font-size: 9px; }
  .srb-team { gap: 6px; }
}

/* ─── Notifications bell in the header (js/push.js), 2026-10-31. Classes start with nb- ─── */
.nb { position: relative; }
.admin-capsule-left .nb { margin-inline-end: 6px; }
.admin-capsule-left .nb-bell { width: 36px; height: 36px; }
.nb-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--b2); background: var(--card); color: var(--t1); cursor: pointer; transition: border-color .15s, color .15s; }
.nb-bell:hover { border-color: var(--gold); color: var(--gold); }
.nb-bell:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nb-bell.is-on { color: var(--gold); }
.nb-bell.is-off { color: var(--t3); }
.nb-ico { width: 20px; height: 20px; fill: currentColor; }
.nb-dot { position: absolute; top: 7px; inset-inline-end: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--card); }
.nb-pop { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 14px; background: var(--card); border: 1px solid var(--b2); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); text-align: right; }
.nb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-head b { font-size: 15px; font-weight: 900; color: var(--t1); }
.nb-state { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--s); border: 1px solid var(--b2); color: var(--t2); white-space: nowrap; }
.nb-state.nb-on { color: var(--green); border-color: rgba(34, 197, 94, 0.45); }
.nb-state.nb-denied, .nb-state.nb-unsupported { color: #f87171; border-color: rgba(239, 68, 68, 0.45); }
.nb-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.nb-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--b1); font-size: 12px; font-weight: 800; color: var(--t3); }
.nb-link { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.nb-link:hover { text-decoration: underline; }
.nb-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.nb-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 9px 11px; border: 1px solid var(--b1); border-radius: 10px; background: var(--s); color: var(--t2); font: inherit; text-align: right; cursor: pointer; }
.nb-item:hover { border-color: var(--b2); }
.nb-item b { font-size: 13px; font-weight: 900; color: var(--t1); }
.nb-item span { font-size: 12.5px; line-height: 1.7; overflow-wrap: anywhere; }
.nb-item small { font-size: 11px; color: var(--t3); }
.nb-item.is-new { border-color: rgba(212, 160, 23, 0.55); background: rgba(212, 160, 23, 0.07); }
.nb-item.is-new b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.nb-empty { padding: 10px 2px; font-size: 12.5px; color: var(--t3); }
.nb-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--b1); }
.nb-foot .nb-link { color: var(--t3); font-weight: 700; }
.nb-note:empty { display: none; }
.nb-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--t2); }
.nb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nb-actions:not(:has(.btn:not(.hidden))) { display: none; }
@media (max-width: 560px) {
  .nb-bell { width: 36px; height: 36px; }
  .nb-ico { width: 18px; height: 18px; }
  .nb-pop { position: fixed; top: 64px; inset-inline: 12px; width: auto; }
}

/* ─── apply.html: one application per account. The notice is in the page; html[data-apply-lock] (set by js/gate.js before the
       page paints, confirmed by js/apply.js) shows it and hides the forms, so the forms never flash for an account that applied ─── */
.apply-lock { display: none; margin-top: 18px; padding: 28px 20px; text-align: center; }
html[data-apply-lock] .apply-lock { display: block; }
html[data-apply-lock] .track-picker, html[data-apply-lock] .verify-rules-card, html[data-apply-lock] form[id^="form-"] { display: none !important; }
.apply-lock > i { font-size: 34px; color: var(--gold); }
.apply-lock h2 { margin: 12px 0 6px; font-size: 19px; font-weight: 900; color: var(--t1); }
.apply-lock p { max-width: 520px; margin: 0 auto; font-size: 13.5px; line-height: 1.9; color: var(--t2); }
.apply-lock-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.apply-lock .al-done, .apply-lock .al-wait, .apply-lock .al-pending, .apply-lock .al-info { display: none !important; }
html[data-apply-lock="approved"] .apply-lock span.al-done, html[data-apply-lock="panel"] .apply-lock span.al-done,
html[data-apply-lock="pending"] .apply-lock span.al-wait, html[data-apply-lock="more_info"] .apply-lock span.al-wait,
html[data-apply-lock="pending"] .apply-lock .al-pending, html[data-apply-lock="more_info"] .apply-lock .al-info { display: inline !important; }
html[data-apply-lock="approved"] .apply-lock i.al-done, html[data-apply-lock="panel"] .apply-lock i.al-done,
html[data-apply-lock="pending"] .apply-lock i.al-wait, html[data-apply-lock="more_info"] .apply-lock i.al-wait { display: inline-block !important; }
html[data-apply-lock="approved"] .apply-lock a.al-done, html[data-apply-lock="panel"] .apply-lock a.al-done,
html[data-apply-lock="pending"] .apply-lock a.al-wait, html[data-apply-lock="more_info"] .apply-lock a.al-wait { display: inline-flex !important; }

/* ─── Entrance motion on every page (his request 2026-11-01, like Flutter's .animate().fadeIn().slideY(begin: 0.2)): the blocks of a
       page fade in while rising from 20% of their own height. "translate" (not transform) so hover transforms keep working, and
       "backwards" so the end state is the element's own style. Not on the admin page (its lists redraw live, the motion would repeat).
       Devices asking for reduced motion get it too (his own Windows PC reports reduced motion, like the opening screen decided):
       the global rule that shortens every animation to 0.01 ms is overridden for this short entrance only. ─── */
@keyframes fxIn { from { opacity: 0; translate: 0 20%; } to { opacity: 1; translate: 0 0; } }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxPop { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
html:not([data-gate="admin"]) :where(
  .hm-hero-inner, .hm-sec-head, .gate-card, .hm-faq,
  .page-hdr, .page-hdr-row, .srch-wrap, .reg-grid, .blk-grid, .doc-sec, .ps-note, .phone-search-mount,
  .pf-card, #my-requests, .pf-list > .rq,
  .apply-lock, .track-picker, .verify-rules-card, form.card,
  .org-hero, .org-section, .panel-bar, .panel-card, .panel-state,
  .srb-bar, .srb-board, .srb-pod
) { animation: fxIn .45s cubic-bezier(.2, .7, .2, 1) backwards; }
html:not([data-gate="admin"]) :is(.gate-card, .srb-pod, .ps-note, .doc-sec, .pf-list > .rq):nth-child(2) { animation-delay: .07s; }
html:not([data-gate="admin"]) :is(.gate-card, .srb-pod, .ps-note, .doc-sec, .pf-list > .rq):nth-child(3) { animation-delay: .14s; }
html:not([data-gate="admin"]) :is(.gate-card, .srb-pod, .ps-note, .doc-sec, .pf-list > .rq):nth-child(4) { animation-delay: .21s; }
html:not([data-gate="admin"]) :is(.gate-card, .srb-pod, .ps-note, .doc-sec, .pf-list > .rq):nth-child(n+5) { animation-delay: .28s; }
.nb-pop:not(.hidden), .acct-panel:not(.hidden), .admin-capsule-dropdown:not(.hidden) { animation: fxPop .18s ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-gate="admin"]) :where(
    .hm-hero-inner, .hm-sec-head, .gate-card, .hm-faq,
    .page-hdr, .page-hdr-row, .srch-wrap, .reg-grid, .blk-grid, .doc-sec, .ps-note, .phone-search-mount,
    .pf-card, #my-requests, .pf-list > .rq, .apply-lock, .track-picker, .verify-rules-card, form.card,
    .org-hero, .org-section, .panel-bar, .panel-card, .panel-state, .srb-bar, .srb-board, .srb-pod
  ), .nb-pop:not(.hidden), .acct-panel:not(.hidden), .admin-capsule-dropdown:not(.hidden) { animation-duration: .45s !important; }
  .nb-pop:not(.hidden), .acct-panel:not(.hidden), .admin-capsule-dropdown:not(.hidden) { animation-duration: .18s !important; }
}

/* ── Username (2026-11-01): profile line, account menu, the two-step dialog ── */
.pf-role:empty { display: none; }
.pf-user { margin: 2px 0 6px; font-size: 13px; font-weight: 700; color: var(--gold, #d4a017); text-align: right; unicode-bidi: plaintext; }
.acct-who .acct-user { color: var(--gold, #d4a017); font-weight: 700; }

/* ── Dedicated member identity setup page ── */
.identity-setup-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  color: var(--t1);
  background: radial-gradient(ellipse at 50% 0%, rgba(212, 160, 23, .12), transparent 48%), #09090b;
}
.identity-setup-shell { width: min(100%, 540px); }
.identity-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 22px;
  color: var(--t1);
  text-decoration: none;
  text-align: right;
}
.identity-brand img { width: 52px; height: 52px; border: 1px solid rgba(212, 160, 23, .3); border-radius: 15px; object-fit: cover; }
.identity-brand span { display: grid; gap: 3px; }
.identity-brand b { font-size: 15px; font-weight: 900; }
.identity-brand small { color: var(--t3); font-size: 11px; direction: ltr; text-align: right; }
.identity-setup-card {
  padding: 36px 38px 28px;
  border: 1px solid rgba(212, 160, 23, .28);
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 0%, rgba(212, 160, 23, .07), transparent 46%), rgba(22, 22, 28, .96);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .58), 0 0 32px rgba(212, 160, 23, .07);
}
.identity-eyebrow { margin: 0; color: var(--gold); font-size: 12px; font-weight: 800; text-align: center; }
.identity-setup-card h1 { margin: 5px 0 4px; color: var(--t1); font-size: 28px; font-weight: 900; text-align: center; }
.identity-intro { max-width: 390px; margin: 0 auto; color: var(--t2); font-size: 14px; line-height: 1.9; text-align: center; }
.identity-form { display: flex; flex-direction: column; gap: 19px; margin-top: 27px; }
.identity-field { gap: 8px; }
.identity-field label { color: var(--t1); font-size: 13px; font-weight: 800; }
.identity-field > input { min-height: 52px; border-radius: 12px; font-size: 15px; }
.identity-field-note { color: var(--t3); font-size: 11px; line-height: 1.8; }
.identity-field-error { color: #f87171; font-size: 12px; }
.identity-username-control { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border: 1px solid var(--b2); border-radius: 12px; background: var(--s); transition: border-color .2s, box-shadow .2s; }
.identity-username-control:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 160, 23, .12); }
.identity-username-control > span { color: var(--gold); font-size: 16px; font-weight: 900; }
.identity-username-control > input { flex: 1; width: auto; min-width: 0; height: 48px; padding: 0 9px; border: 0; outline: 0; color: var(--t1); background: transparent; font: inherit; font-size: 15px; text-align: left; }
.identity-username-control > input:focus { border: 0; box-shadow: none; }
.identity-status { min-height: 18px; color: var(--t3); font-size: 12px; line-height: 1.6; }
.identity-status.is-ok { color: #34d399; }
.identity-status.is-bad { color: #f87171; }
.identity-status.is-checking { color: var(--gold); }
.identity-consents { display: grid; gap: 12px; margin: 1px 0 0; }
.identity-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--t2); font-size: 12px; line-height: 1.8; cursor: pointer; }
.identity-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); cursor: pointer; }
.identity-consent a { color: var(--gold); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.identity-consent a:hover { color: #f0c54e; }
.identity-consent-error { color: #f87171; font-size: 12px; line-height: 1.7; }
.identity-submit { display: flex; justify-content: center; align-items: center; gap: 9px; width: 100%; min-height: 52px; margin-top: 2px; border-radius: 12px; font-size: 14px; }
.identity-submit:disabled { opacity: .65; cursor: wait; }
.identity-loading { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 88px; margin-top: 14px; color: var(--t2); font-size: 13px; }
.identity-policy-dialog { width: min(760px, calc(100vw - 28px)); max-width: none; max-height: min(88vh, 860px); padding: 0; overflow: hidden; border: 1px solid rgba(212, 160, 23, .42); border-radius: 18px; color: var(--t1); background: #17171d; box-shadow: 0 24px 80px rgba(0, 0, 0, .65); }
.identity-policy-dialog::backdrop { background: rgba(0, 0, 0, .76); backdrop-filter: blur(4px); }
.identity-policy-surface { display: flex; flex-direction: column; max-height: min(88vh, 860px); }
.identity-policy-header { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--b1); background: rgba(212, 160, 23, .06); }
.identity-policy-header h2 { margin: 0; font-size: 17px; font-weight: 900; }
.identity-policy-close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--b2); border-radius: 10px; color: var(--t1); background: var(--s); cursor: pointer; }
.identity-policy-content { overflow: auto; padding: 20px 24px 28px; color: var(--t2); font-size: 14px; line-height: 2; }
.identity-policy-content h1, .identity-policy-content h2, .identity-policy-content h3, .identity-policy-content h4 { margin: 22px 0 8px; color: var(--t1); line-height: 1.6; }
.identity-policy-content h1 { font-size: 22px; }
.identity-policy-content h2 { font-size: 19px; }
.identity-policy-content p { margin: 8px 0 14px; }
.identity-policy-content ul, .identity-policy-content ol { padding-inline-start: 24px; }
.identity-policy-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.identity-alert { margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(248, 113, 113, .25); border-radius: 10px; color: #fca5a5; background: rgba(127, 29, 29, .16); font-size: 13px; line-height: 1.7; }
.identity-form[hidden], .identity-alert[hidden], .identity-field-error[hidden], .identity-consent-error[hidden] { display: none !important; }
@media (max-width: 520px) {
  .identity-setup-page { padding: 20px 14px; }
  .identity-brand { margin-bottom: 17px; }
  .identity-setup-card { padding: 28px 20px 23px; border-radius: 18px; }
  .identity-setup-card h1 { font-size: 24px; }
  .identity-intro { font-size: 13px; }
  .identity-form { gap: 16px; margin-top: 23px; }
  .identity-policy-content { padding: 16px 17px 22px; font-size: 13px; }
}