/* Match 5 meta form — keep custom rules minimal; layout uses Tailwind in HTML. */

#br-match1-meta-form input[type="date"],
#br-match1-meta-form input[type="time"] {
  color-scheme: dark;
}

/* Roster: scroll horizontal hanya di dalam kartu (bukan seluruh halaman) */
#br-match1-meta .br-m1-roster-scroll {
  max-width: 100%;
}

/* —— Poster dialog: responsif + chrome selaras tema —— */
#br-match1-poster-dialog::backdrop {
  background: rgb(0 0 0 / 0.76);
  backdrop-filter: blur(8px);
}

.br-m1-poster-dialog {
  margin: auto;
  width: min(calc(100vw - 1.25rem), 56rem);
  max-width: 100%;
}

.br-m1-poster-dialog__body {
  -webkit-overflow-scrolling: touch;
}

/* Kontainer poster (sumber yang sama untuk preview & PNG) */
#br-match1-poster-capture.br-m1-poster-capture {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Jangan width:100% penuh di sini — foreignObject html-to-image + margin:auto sering bikin isi geser di PNG */
  align-self: center;
  flex-shrink: 0;
  width: min(100%, 36rem);
  max-width: min(100%, 36rem);
  margin: 0;
  direction: ltr;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-bg-secondary) 92%, #080808) 0%,
    var(--color-bg-primary) 45%,
    #0a0a0a 100%
  );
  border: 1px solid color-mix(in srgb, var(--color-brand) 38%, transparent);
  border-radius: 1.25rem;
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 6%, transparent) inset,
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 80px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

@media (min-width: 480px) {
  #br-match1-poster-capture.br-m1-poster-capture {
    width: min(100%, 44rem);
    max-width: min(100%, 44rem);
  }
}

@media (min-width: 1024px) {
  #br-match1-poster-capture.br-m1-poster-capture {
    width: min(100%, 720px);
    max-width: 720px;
  }
}

/*
 * Ekspor PNG (html-to-image): unit vw di dalam clone SVG sering dihitung terhadap viewport
 * jendela, bukan lebar poster — bikin tipografi beda dari preview dan terlihat buram.
 * Kelas ini hanya ditambahkan sesaat saat unduh; isi = nilai rem ekuivalen layout ~720px.
 */
#br-match1-poster-capture.br-m1-poster-capture--hires-export.br-m1-poster-capture {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: max-content;
  max-width: none;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster-root {
  width: max-content;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__table-wrap {
  width: max-content;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__table {
  width: max-content;
  table-layout: auto;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__td--rk,
#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__td--k {
  width: auto;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__frame {
  padding: 1.5rem;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__brand-name {
  font-size: 0.98rem;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__title {
  font-size: 1.65rem;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__mv-inner {
  padding: 1rem 1.35rem;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__mv-label {
  font-size: 0.68rem;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__mv-name {
  font-size: 1.28rem;
}

#br-match1-poster-capture.br-m1-poster-capture--hires-export .br-m1-poster__mv-glow {
  filter: blur(8px);
}

/* Isi poster */
.br-m1-poster-root {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
}

.br-m1-poster__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(ellipse 90% 55% at 12% -5%, color-mix(in srgb, var(--color-brand-glow) 32%, transparent), transparent 58%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--color-brand) 28%, transparent), transparent 52%),
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, black 55%, transparent) 100%);
}

.br-m1-poster__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: clamp(1rem, 3.2vw, 1.65rem);
  min-height: 0;
}

/* Brand strip — logo + nama + domain */
.br-m1-poster__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.br-m1-poster__brand-logo {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--color-brand) 35%, transparent));
}

.br-m1-poster__brand-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
}

.br-m1-poster__brand-name {
  font-family: var(--font-heading);
  font-size: clamp(0.82rem, 2.6vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-shadow: 0 0 28px color-mix(in srgb, var(--color-brand-glow) 25%, transparent);
}

.br-m1-poster__brand-link {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-glow);
}

@media (max-width: 380px) {
  .br-m1-poster__brand {
    flex-direction: column;
    gap: 0.65rem;
  }

  .br-m1-poster__brand-meta {
    align-items: center;
    text-align: center;
  }
}

.br-m1-poster__head {
  text-align: center;
  flex-shrink: 0;
}

.br-m1-poster__eyebrow {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--color-brand-glow);
  text-shadow: 0 0 28px color-mix(in srgb, var(--color-brand) 45%, transparent);
}

.br-m1-poster__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 4.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  word-break: break-word;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.65),
    0 0 42px color-mix(in srgb, var(--color-brand-glow) 22%, transparent);
}

.br-m1-poster__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  flex-shrink: 0;
}

.br-m1-poster__chip {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--color-brand-glow));
  border: 1px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-secondary) 72%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.br-m1-poster__chip--accent {
  color: color-mix(in srgb, var(--color-bg-primary) 12%, var(--color-brand-glow));
  border-color: color-mix(in srgb, var(--color-brand-glow) 45%, var(--color-brand));
  background: color-mix(in srgb, var(--color-brand) 18%, var(--color-bg-secondary));
}

.br-m1-poster__rule {
  height: 2px;
  margin: 1rem 0 0.65rem;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-brand-glow) 75%, transparent),
    color-mix(in srgb, var(--color-brand) 55%, transparent),
    transparent
  );
  opacity: 0.95;
}

/* MVP — di bawah poster (setelah footer); tanpa margin horizontal auto (SVG foreignObject sering salah hitung → geser kanan) */
.br-m1-poster__mv {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 100%;
  max-width: 24rem;
  margin: 1.2rem 0 0;
  padding-top: 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--color-brand) 24%, transparent);
}

.br-m1-poster__mv-glow {
  position: absolute;
  inset: -18% -8%;
  z-index: 0;
  pointer-events: none;
  border-radius: 1.15rem;
  background: radial-gradient(
    ellipse 70% 80% at 50% 20%,
    color-mix(in srgb, var(--color-brand-glow) 35%, transparent),
    transparent 68%
  );
  opacity: 0.55;
  filter: blur(10px);
}

.br-m1-poster__mv-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 1rem;
  padding: clamp(0.75rem, 2.4vw, 1.1rem) clamp(1rem, 3vw, 1.35rem);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-brand-glow) 42%, var(--color-brand));
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--color-brand) 22%, #141008) 0%,
    color-mix(in srgb, var(--color-bg-secondary) 55%, #0a0908) 48%,
    color-mix(in srgb, black 40%, #12100c) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 8%, transparent) inset,
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 48px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.br-m1-poster__mv-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background: linear-gradient(
    115deg,
    transparent 35%,
    color-mix(in srgb, var(--color-brand-glow) 22%, transparent) 50%,
    transparent 65%
  );
}

.br-m1-poster__mv-icon {
  position: relative;
  flex-shrink: 0;
  margin: 0 0 0.35rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--color-bg-primary);
  background: linear-gradient(145deg, var(--color-brand-glow), var(--color-brand));
  border-radius: 999px;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--color-brand) 45%, transparent);
}

.br-m1-poster__mv-kicker {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.2rem;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 75%, var(--color-brand-glow));
}

.br-m1-poster__mv-label {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: clamp(0.58rem, 2vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-brand-glow);
  text-shadow: 0 0 24px color-mix(in srgb, var(--color-brand) 40%, transparent);
}

.br-m1-poster__mv-name {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 3.2vw, 1.28rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  word-break: break-word;
}

.br-m1-poster__mv-slot {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0.45rem 0 0;
  font-family: var(--font-heading);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--color-brand));
}

.br-m1-poster__subhead {
  margin: 0 0 0.65rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--color-brand));
  flex-shrink: 0;
}

.br-m1-poster__table-wrap {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
  background: color-mix(in srgb, black 35%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 5%, transparent);
}

.br-m1-poster__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  table-layout: fixed;
}

.br-m1-poster__table thead tr:first-child {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-brand) 28%, #1a1510) 0%,
    color-mix(in srgb, var(--color-bg-secondary) 95%, #0f0f0f) 55%,
    #141210 100%
  );
  color: color-mix(in srgb, var(--color-brand-glow) 92%, white);
}

.br-m1-poster__table thead tr:last-child {
  background: color-mix(in srgb, var(--color-bg-secondary) 88%, black);
  color: color-mix(in srgb, var(--color-text-secondary) 92%, var(--color-brand-glow));
}

.br-m1-poster__table th {
  padding: 0.55rem 0.45rem;
  vertical-align: middle;
  font-family: var(--font-heading);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.br-m1-poster__th--name {
  text-align: left;
}

.br-m1-poster__th--match {
  color: var(--color-brand-glow);
  border-color: color-mix(in srgb, var(--color-brand-glow) 28%, transparent);
}

.br-m1-poster__th--sub {
  font-size: 0.5rem;
  letter-spacing: 0.14em;
}

.br-m1-poster__tr {
  background: color-mix(in srgb, var(--color-bg-secondary) 42%, transparent);
}

.br-m1-poster__tr--alt {
  background: color-mix(in srgb, var(--color-bg-primary) 88%, #050505);
}

/* Juara Match 5 — hanya warna & wash halus (tanpa badge), selaras emas FT */
.br-m1-poster__tr--juara.br-m1-poster__tr--j1 {
  background:
    linear-gradient(
      108deg,
      color-mix(in srgb, var(--color-brand-glow) 22%, transparent) 0%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, #1f1a0f 55%, var(--color-bg-secondary)) 0%,
      color-mix(in srgb, var(--color-bg-secondary) 40%, #0c0c0c) 100%
    );
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--color-brand-glow) 75%, var(--color-brand)),
    inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j2 {
  background:
    linear-gradient(
      108deg,
      color-mix(in srgb, #cbd5e1 14%, transparent) 0%,
      transparent 46%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, #161a1f 50%, var(--color-bg-secondary)) 0%,
      color-mix(in srgb, var(--color-bg-primary) 92%, #050505) 100%
    );
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, #e2e8f0 55%, #64748b),
    inset 0 0 0 1px color-mix(in srgb, #94a3b8 10%, transparent);
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j3 {
  background:
    linear-gradient(
      108deg,
      color-mix(in srgb, #d97706 16%, transparent) 0%,
      transparent 46%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, #1c140e 52%, var(--color-bg-secondary)) 0%,
      color-mix(in srgb, var(--color-bg-primary) 90%, #080706) 100%
    );
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, #f59e0b 45%, #c2410c),
    inset 0 0 0 1px color-mix(in srgb, #ea580c 12%, transparent);
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j1 .br-m1-poster__td--no {
  color: color-mix(in srgb, var(--color-brand-glow) 92%, #fefce8);
  text-shadow: 0 0 14px color-mix(in srgb, var(--color-brand) 28%, transparent);
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j2 .br-m1-poster__td--no {
  color: color-mix(in srgb, #e2e8f0 88%, var(--color-brand-glow));
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j3 .br-m1-poster__td--no {
  color: color-mix(in srgb, #fdba74 85%, #fef3c7);
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j1 .br-m1-poster__td--rk {
  color: color-mix(in srgb, var(--color-brand-glow) 80%, white);
  font-weight: 800;
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j2 .br-m1-poster__td--rk {
  color: color-mix(in srgb, #e2e8f0 90%, var(--color-text-primary));
  font-weight: 800;
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j3 .br-m1-poster__td--rk {
  color: color-mix(in srgb, #fdba74 75%, #fed7aa);
  font-weight: 800;
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j1 .br-m1-poster__td--pt {
  color: color-mix(in srgb, var(--color-brand-glow) 70%, var(--color-brand));
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j2 .br-m1-poster__td--pt {
  color: color-mix(in srgb, #cbd5e1 55%, var(--color-brand-glow));
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j3 .br-m1-poster__td--pt {
  color: color-mix(in srgb, #fb923c 45%, var(--color-brand-glow));
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j1 .br-m1-poster__td--name {
  color: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-brand-glow));
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j2 .br-m1-poster__td--name {
  color: color-mix(in srgb, var(--color-text-primary) 90%, #e2e8f0);
}

.br-m1-poster__tr--juara.br-m1-poster__tr--j3 .br-m1-poster__td--name {
  color: color-mix(in srgb, var(--color-text-primary) 88%, #fed7aa);
}

.br-m1-poster__td {
  padding: 0.45rem 0.4rem;
  vertical-align: middle;
  border-top: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
  font-size: 0.66rem;
}

.br-m1-poster__td--no {
  width: 2.25rem;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.62rem;
  color: var(--color-brand-glow);
}

.br-m1-poster__td--name {
  text-align: left;
  word-break: break-word;
  color: var(--color-text-primary);
}

.br-m1-poster__td--rk,
.br-m1-poster__td--k {
  min-width: 4.5rem;
  width: 22%;
  text-align: center;
  color: color-mix(in srgb, var(--color-text-secondary) 85%, white);
}

.br-m1-poster__td--tk,
.br-m1-poster__td--pt {
  text-align: center;
  color: color-mix(in srgb, var(--color-text-secondary) 75%, white);
}

.br-m1-poster__td--pt {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-brand-glow);
}

.br-m1-poster__footer {
  margin-top: 1rem;
  margin-bottom: 0;
  padding-top: 0.25rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 92%, var(--color-brand));
  flex-shrink: 0;
}

/* —— Toast notifikasi (Match 5) —— */
.br-m1-toast-root {
  position: fixed;
  z-index: 400;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  max-height: min(70dvh, 28rem);
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;
  width: min(22rem, calc(100vw - 1.5rem));
}

.br-m1-toast {
  position: relative;
  width: 100%;
  pointer-events: auto;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-bg-secondary) 88%, #080808) 0%,
    color-mix(in srgb, var(--color-bg-primary) 92%, black) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 7%, transparent) inset,
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 40px color-mix(in srgb, var(--color-brand) 12%, transparent);
  opacity: 0;
  transform: translateX(108%);
  transition:
    opacity 0.38s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-m1-toast--in {
  opacity: 1;
  transform: translateX(0);
}

.br-m1-toast--out {
  opacity: 0;
  transform: translateX(115%);
  transition-duration: 0.28s;
}

.br-m1-toast__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background: linear-gradient(
    115deg,
    transparent 40%,
    color-mix(in srgb, var(--color-brand-glow) 25%, transparent) 50%,
    transparent 60%
  );
}

.br-m1-toast__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.65rem 0.85rem 0.85rem;
}

.br-m1-toast--success {
  border-color: color-mix(in srgb, #34d399 45%, var(--color-brand));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #34d399 18%, transparent) inset,
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 36px color-mix(in srgb, #34d399 14%, transparent);
}

.br-m1-toast--error {
  border-color: color-mix(in srgb, #f87171 48%, var(--color-brand));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f87171 15%, transparent) inset,
    0 20px 50px rgba(0, 0, 0, 0.52),
    0 0 36px color-mix(in srgb, #f87171 12%, transparent);
}

.br-m1-toast--warn {
  border-color: color-mix(in srgb, #fbbf24 55%, var(--color-brand));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fbbf24 18%, transparent) inset,
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 36px color-mix(in srgb, var(--color-brand) 16%, transparent);
}

.br-m1-toast__icon-wrap {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, black 35%, transparent);
  border: 1px solid color-mix(in srgb, white 8%, transparent);
}

.br-m1-toast--success .br-m1-toast__icon-wrap {
  color: #6ee7b7;
  border-color: color-mix(in srgb, #34d399 35%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, #34d399 22%, transparent);
}

.br-m1-toast--error .br-m1-toast__icon-wrap {
  color: #fca5a5;
  border-color: color-mix(in srgb, #f87171 35%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, #f87171 18%, transparent);
}

.br-m1-toast--warn .br-m1-toast__icon-wrap {
  color: var(--color-brand-glow);
  border-color: color-mix(in srgb, var(--color-brand) 40%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.br-m1-toast__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.br-m1-toast__text {
  min-width: 0;
  flex: 1;
}

.br-m1-toast__title {
  margin: 0 0 0.2rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.br-m1-toast__msg {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text-secondary) 90%, var(--color-text-primary));
}

.br-m1-toast__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.15rem -0.15rem 0 0;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  color: color-mix(in srgb, var(--color-text-secondary) 85%, white);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.br-m1-toast__close:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, white 8%, transparent);
}

.br-m1-toast__close i {
  font-size: 0.85rem;
}

/* —— Modal peringatan / gagal (Match 5) —— */
#br-match1-notice-dialog {
  margin: auto;
  padding: 0;
  max-width: calc(100vw - 1.5rem);
  width: min(24rem, 100%);
  border: none;
  background: transparent;
  color: var(--color-text-primary);
}

#br-match1-notice-dialog::backdrop {
  background: rgb(0 0 0 / 0.78);
  backdrop-filter: blur(10px);
}

.br-m1-notice-dialog__surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color-scheme: dark;
  padding: 1.65rem 1.45rem 1.35rem;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-brand) 38%, transparent);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--color-bg-secondary) 90%, #050505) 0%,
    color-mix(in srgb, var(--color-bg-primary) 94%, black) 48%,
    #070707 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 6%, transparent) inset,
    0 28px 80px rgba(0, 0, 0, 0.65),
    0 0 72px color-mix(in srgb, var(--color-brand) 14%, transparent);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  #br-match1-notice-dialog[open] .br-m1-notice-dialog__surface {
    animation: br-m1-notice-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes br-m1-notice-pop {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.br-m1-notice-dialog__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, color-mix(in srgb, var(--color-brand-glow) 28%, transparent), transparent 55%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 45%);
}

.br-m1-notice-dialog__rule {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-brand-glow) 75%, var(--color-brand)),
    transparent
  );
  opacity: 0.9;
  pointer-events: none;
}

.br-m1-notice-dialog__glow {
  position: absolute;
  inset: -40% -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 35%,
    color-mix(in srgb, var(--color-brand) 18%, transparent),
    transparent 58%
  );
  opacity: 0.55;
}

.br-m1-notice-dialog__icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  margin: 0 auto 1rem;
  border-radius: 1rem;
  background: color-mix(in srgb, black 42%, transparent);
  border: 1px solid color-mix(in srgb, white 10%, transparent);
}

.br-m1-notice-dialog--warn .br-m1-notice-dialog__icon {
  color: var(--color-brand-glow);
  border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-brand-glow) 12%, transparent) inset,
    0 0 36px color-mix(in srgb, var(--color-brand) 28%, transparent);
}

.br-m1-notice-dialog--error .br-m1-notice-dialog__icon {
  color: #fca5a5;
  border-color: color-mix(in srgb, #f87171 42%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f87171 12%, transparent) inset,
    0 0 32px color-mix(in srgb, #f87171 22%, transparent);
}

.br-m1-notice-dialog__icon-fa {
  font-size: 1.45rem;
  line-height: 1;
}

.br-m1-notice-dialog__title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.65rem;
  font-family: var(--font-heading);
  font-size: clamp(0.78rem, 2.4vw, 0.88rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-primary) 94%, var(--color-brand-glow));
}

.br-m1-notice-dialog--error .br-m1-notice-dialog__title {
  color: color-mix(in srgb, var(--color-text-primary) 88%, #fecaca);
}

.br-m1-notice-dialog__msg {
  position: relative;
  z-index: 1;
  margin: 0 0 1.35rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--color-text-primary));
}

.br-m1-notice-dialog__ok {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  padding: 0.72rem 1.35rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-brand-glow) 48%, var(--color-brand));
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bg-primary);
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-glow));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--color-brand) 38%, transparent);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.br-m1-notice-dialog__ok:hover {
  filter: brightness(1.08);
}

.br-m1-notice-dialog__ok:active {
  transform: translateY(1px);
}

.br-m1-notice-dialog--error .br-m1-notice-dialog__ok {
  border-color: color-mix(in srgb, #fca5a5 55%, var(--color-brand));
  box-shadow: 0 8px 28px color-mix(in srgb, #f87171 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #br-match1-notice-dialog[open] .br-m1-notice-dialog__surface {
    animation: none;
  }

  #br-match1-reset-confirm-dialog[open] .br-m1-notice-dialog__surface {
    animation: none;
  }

  .br-m1-notice-dialog__ok:active {
    transform: none;
  }
}

/* —— Modal konfirmasi reset (Match 5) —— */
#br-match1-reset-confirm-dialog {
  margin: auto;
  padding: 0;
  max-width: calc(100vw - 1.5rem);
  width: min(24rem, 100%);
  border: none;
  background: transparent;
  color: var(--color-text-primary);
}

#br-match1-reset-confirm-dialog::backdrop {
  background: rgb(0 0 0 / 0.78);
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: no-preference) {
  #br-match1-reset-confirm-dialog[open] .br-m1-notice-dialog__surface {
    animation: br-m1-notice-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

.br-m1-reset-confirm-dialog__icon {
  color: var(--color-brand-glow);
  border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-brand-glow) 12%, transparent) inset,
    0 0 36px color-mix(in srgb, var(--color-brand) 28%, transparent);
}

.br-m1-reset-confirm-dialog__msg {
  margin-bottom: 1.15rem;
}

.br-m1-reset-confirm__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.br-m1-reset-confirm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  padding: 0.68rem 1.15rem;
  border-radius: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    filter 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.br-m1-reset-confirm__btn--ghost {
  border-color: color-mix(in srgb, var(--color-brand) 38%, transparent);
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--color-text-primary));
  background: color-mix(in srgb, var(--color-bg-secondary) 35%, transparent);
}

.br-m1-reset-confirm__btn--ghost:hover {
  border-color: color-mix(in srgb, var(--color-brand-glow) 48%, transparent);
  color: var(--color-text-primary);
}

.br-m1-reset-confirm__btn--danger {
  border-color: color-mix(in srgb, #f87171 55%, transparent);
  color: #fef2f2;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #b91c1c 88%, #450a0a),
    color-mix(in srgb, #7f1d1d 75%, black)
  );
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.br-m1-reset-confirm__btn--danger:hover {
  filter: brightness(1.08);
}

.br-m1-reset-confirm__btn--danger:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .br-m1-reset-confirm__btn--danger:active {
    transform: none;
  }
}

/* —— Dialog preview sertifikat (Match 5) —— */
#br-match1-cert-dialog::backdrop {
  background: rgb(0 0 0 / 0.76);
  backdrop-filter: blur(8px);
}

.br-m1-cert-dialog {
  margin: auto;
  width: min(calc(100vw - 1rem), 64rem);
  max-width: 100%;
}

.br-m1-cert-dialog__body {
  -webkit-overflow-scrolling: touch;
}

.br-m1-cert-capture {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.25rem, 2.8vw, 1.85rem);
  padding-bottom: 0.75rem;
}

/* Satu kartu preview + unduh — area raster = viewport (A4 horizontal) */
.br-m1-cert-slot {
  position: relative;
  margin-inline: auto;
  width: min(100%, 52rem);
  max-width: 100%;
  border-radius: 1rem;
  padding: 1px;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, #fbbf24 35%, transparent),
    color-mix(in srgb, var(--color-brand) 40%, transparent) 45%,
    color-mix(in srgb, #5eead4 22%, transparent) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 6%, transparent) inset,
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 64px color-mix(in srgb, var(--color-brand) 8%, transparent);
}

.br-m1-cert-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #0a0a0c 92%, transparent) 0%,
    color-mix(in srgb, var(--color-bg-primary) 88%, #050508) 100%
  );
}

.br-m1-cert-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.65rem 0.85rem 0.75rem;
}

.br-m1-cert-toolbar__left {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.br-m1-cert-toolbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-primary) 90%, #fbbf24);
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, #fbbf24 28%, transparent);
  background: color-mix(in srgb, black 55%, transparent);
}

.br-m1-cert-toolbar__badge i {
  font-size: 0.72rem;
  opacity: 0.9;
  color: var(--color-brand-glow);
}

.br-m1-cert-toolbar__dim {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, #5eead4);
}

.br-m1-cert-toolbar__dl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  cursor: pointer;
  border: none;
  border-radius: 0.65rem;
  font-family: var(--font-heading);
  color: #0a0a0a;
  background: linear-gradient(135deg, #fef08a, #fbbf24 45%, #ea580c);
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 35%, transparent) inset,
    0 4px 20px color-mix(in srgb, #fbbf24 35%, transparent),
    0 12px 32px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.br-m1-cert-toolbar__dl-shine {
  position: absolute;
  inset: 0;
  translate: -40% 0;
  rotate: 12deg;
  background: linear-gradient(
    105deg,
    transparent 35%,
    color-mix(in srgb, white 45%, transparent) 50%,
    transparent 65%
  );
  opacity: 0.5;
  pointer-events: none;
  transition: translate 0.35s ease;
}

.br-m1-cert-toolbar__dl:hover .br-m1-cert-toolbar__dl-shine {
  translate: 40% 0;
}

.br-m1-cert-toolbar__dl:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 45%, transparent) inset,
    0 0 28px color-mix(in srgb, #fbbf24 45%, transparent),
    0 14px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.br-m1-cert-toolbar__dl:active:not(:disabled) {
  transform: translateY(0);
}

.br-m1-cert-toolbar__dl:disabled {
  cursor: wait;
  opacity: 0.72;
  filter: grayscale(0.2);
}

.br-m1-cert-toolbar__dl--busy .br-m1-cert-toolbar__dl-text::after {
  content: "…";
}

.br-m1-cert-toolbar__dl-ico {
  font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.br-m1-cert-toolbar__dl-text {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.br-m1-cert-toolbar__dl-tier {
  padding: 0.15rem 0.45rem;
  margin-left: 0.1rem;
  border-radius: 0.35rem;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fefce8;
  background: color-mix(in srgb, black 35%, transparent);
  border: 1px solid color-mix(in srgb, black 40%, transparent);
}

.br-m1-cert-viewport {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  container-type: size;
  container-name: brm1cert;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 297 / 210;
  border-radius: 0 0 0.85rem 0.85rem;
  overflow: hidden;
  background: #0a0a0c;
}

/* Raster A4 — diatur dari JS saat unduh (1123×794) */
.br-m1-cert-viewport--export {
  border-radius: 0.2rem;
}

/* —— Sertifikat layout lama: kolom kiri (pita) + body kanan + watermark —— */
.br-m1-cert--classic {
  --cert-gold: #fbbf24;
  --cert-gold-deep: #b45309;
  --cert-mint: #5eead4;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 80%;
  margin-block: auto;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  font-size: clamp(10px, min(2.2cqw, 2.2cqh), 15px);
  color: var(--color-text-primary);
  background: linear-gradient(145deg, #101018 0%, #08080c 55%, #0c0c12 100%);
  border: none;
  border-radius: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cert-gold) 28%, transparent),
    0 0 0 2px color-mix(in srgb, black 55%, transparent) inset;
}

.br-m1-cert--classic.br-m1-cert--empty {
  border: 1px dashed color-mix(in srgb, var(--cert-gold) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 5%, transparent);
}

.br-m1-cert__waterback {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background:
    repeating-linear-gradient(
      -28deg,
      transparent,
      transparent 14px,
      color-mix(in srgb, var(--cert-gold) 35%, transparent) 14px,
      color-mix(in srgb, var(--cert-gold) 35%, transparent) 15px
    ),
    radial-gradient(ellipse 80% 50% at 100% 20%, color-mix(in srgb, var(--color-brand) 12%, transparent), transparent 55%);
}

/* Kolom kiri: pita esports — gradien dalam, aksen cahaya, badge & tier metalik */
.br-m1-cert__aside {
  position: relative;
  z-index: 1;
  flex: 0 0 clamp(5.75rem, 27cqw, 9rem);
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.55em 0.5em;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 95% 70% at 10% 8%, color-mix(in srgb, var(--cert-gold) 22%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse 80% 55% at 100% 100%, color-mix(in srgb, var(--cert-gold-deep) 18%, transparent) 0%, transparent 48%),
    linear-gradient(
      168deg,
      color-mix(in srgb, #fef3c7 8%, #1c1410) 0%,
      #12100e 38%,
      #0a0908 72%,
      #050403 100%
    );
  border-right: 1px solid color-mix(in srgb, var(--cert-gold) 42%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 8%, transparent),
    inset -8px 0 24px rgba(0, 0, 0, 0.45),
    6px 0 28px rgba(0, 0, 0, 0.42);
}

.br-m1-cert__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 5px,
    color-mix(in srgb, black 22%, transparent) 5px,
    color-mix(in srgb, black 22%, transparent) 6px
  );
}

.br-m1-cert__aside::after {
  content: "";
  position: absolute;
  top: -25%;
  right: -35%;
  z-index: 0;
  width: 95%;
  height: 150%;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    transparent 35%,
    color-mix(in srgb, var(--cert-gold) 14%, transparent) 48%,
    transparent 62%
  );
  opacity: 0.65;
}

.br-m1-cert__aside-inner {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  padding: 0.35em 0.2em;
  text-align: center;
}

.br-m1-cert__aside-inner::before {
  content: "";
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 50%;
  z-index: -1;
  width: 1px;
  translate: -50% 0;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--cert-gold) 55%, transparent) 30%,
    color-mix(in srgb, var(--cert-gold) 35%, transparent) 70%,
    transparent
  );
  opacity: 0.55;
}

.br-m1-cert__aside-logo {
  width: clamp(2.35rem, 10.5cqw, 3.4rem);
  height: clamp(2.35rem, 10.5cqw, 3.4rem);
  padding: 0.18em;
  object-fit: contain;
  border-radius: 0.55em;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, white 18%, transparent),
    color-mix(in srgb, black 45%, transparent)
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cert-gold) 45%, transparent),
    0 0 0 2px color-mix(in srgb, black 55%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cert-gold) 25%, transparent));
}

.br-m1-cert__aside-brandstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.38em;
  width: 100%;
  max-width: 100%;
}

.br-m1-cert__aside-brandblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  text-align: center;
  max-width: 100%;
}

.br-m1-cert__aside-brand-name {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(0.38rem, min(2.8cqw, 2.1cqh), 0.55rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fefce8;
  text-shadow:
    0 0 20px color-mix(in srgb, var(--cert-gold) 35%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.65);
}

.br-m1-cert__aside-brand-line {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(0.26rem, min(1.85cqw, 1.35cqh), 0.36rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cert-gold) 72%, #a8a29e);
  opacity: 0.95;
}

.br-m1-cert__aside-tier {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: clamp(0.98rem, min(5.8cqw, 4.2cqh), 1.72rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffbeb 0%, var(--cert-gold) 38%, var(--cert-gold-deep) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.br-m1-cert__aside-tier--ghost {
  opacity: 0.5;
  background: none;
  -webkit-text-fill-color: unset;
  color: color-mix(in srgb, var(--color-text-secondary) 65%, var(--cert-gold-deep));
  filter: none;
}

.br-m1-cert__aside-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 9cqw, 2.65rem);
  height: clamp(2rem, 9cqw, 2.65rem);
  font-size: clamp(0.95rem, min(4.2cqw, 3.2cqh), 1.35rem);
  color: color-mix(in srgb, #fef3c7 40%, #292524);
  background: radial-gradient(
    circle at 30% 25%,
    color-mix(in srgb, var(--cert-gold) 22%, transparent),
    color-mix(in srgb, black 55%, #1c1917) 70%
  );
  border-radius: 50%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cert-gold) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.br-m1-cert__aside-ico--dim {
  opacity: 0.4;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, black 40%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 8%, transparent);
}

.br-m1-cert__aside-tag {
  padding: 0.35em 0.55em;
  font-family: var(--font-heading);
  font-size: 0.3em;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fef9c3 55%, #44403c);
  background: color-mix(in srgb, black 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--cert-gold) 28%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

@supports not (-webkit-background-clip: text) {
  .br-m1-cert__aside-tier {
    color: var(--cert-gold);
    background: none;
    -webkit-text-fill-color: unset;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

.br-m1-cert__body {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 0.55em 0.65em 0.45em 0.75em;
  gap: 0.28em;
}

.br-m1-cert__focus {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.br-m1-cert__brand {
  margin: 0.16em auto 0;
  width: 100%;
  max-width: 100%;
  padding: 0.15em 0.35em 0.2em;
  font-family: var(--font-heading);
  font-size: clamp(0.62em, min(4.1cqw, 3.05cqh), 0.98em);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-primary) 88%, var(--cert-mint));
  text-wrap: balance;
  text-shadow: 0 0 28px color-mix(in srgb, var(--cert-mint) 18%, transparent);
}

.br-m1-cert__event {
  margin: 0 auto 0.14em;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: clamp(0.34em, min(2.2cqw, 1.6cqh), 0.5em);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-primary) 95%, var(--cert-gold));
  word-break: break-word;
  border-bottom: 1px solid color-mix(in srgb, var(--cert-gold) 28%, transparent);
  padding-bottom: 0.2em;
}

.br-m1-cert__event--dim {
  opacity: 0.42;
}

.br-m1-cert__title {
  margin: 0.14em auto 0.24em;
  font-family: var(--font-heading);
  font-size: clamp(1.1em, min(7.2cqw, 5.2cqh), 1.95em);
  font-weight: 900;
  letter-spacing: 0.14em;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cert-gold) 85%, white);
  border-top: none;
  padding-top: 0;
  text-shadow:
    0 0 28px color-mix(in srgb, var(--cert-gold) 30%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.6);
}

.br-m1-cert__winner {
  margin: 0.24em auto 0.32em;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: clamp(1.2em, min(8.5cqw, 6.1cqh), 2.35em);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-primary) 94%, #fefce8);
  text-shadow:
    0 0 34px color-mix(in srgb, var(--cert-gold) 34%, transparent),
    0 3px 10px rgba(0, 0, 0, 0.72);
  word-break: break-word;
}

.br-m1-cert__winner--dim {
  opacity: 0.42;
}

.br-m1-cert__as {
  margin: 0.2em auto 0.18em;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: clamp(0.28em, min(2cqw, 1.45cqh), 0.44em);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 90%, #fef3c7);
  transform: translateY(0.42em);
}

.br-m1-cert__as--dim {
  opacity: 0.44;
}

.br-m1-cert__position {
  margin: 0.14em auto 0.38em;
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 19em);
  max-width: 100%;
  padding: 0.34em 1.05em;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: clamp(0.5em, min(3.6cqw, 2.7cqh), 0.92em);
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, #fef9c3 86%, #fde68a);
  border: 1px solid color-mix(in srgb, var(--cert-gold) 45%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, #fbbf24 18%, #1a1207), color-mix(in srgb, #78350f 55%, #0b0a08));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 16%, transparent),
    0 0 0 1px color-mix(in srgb, black 35%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 26px color-mix(in srgb, var(--cert-gold) 22%, transparent);
  word-break: break-word;
  transform: translateY(0.62em);
}

.br-m1-cert__position--dim {
  opacity: 0.48;
}

.br-m1-cert__thanks {
  margin: 5.2em auto 0.15em;
  width: min(100%, 74em);
  max-width: 100%;
  padding: 0 0.2em;
  font-size: clamp(0.3em, min(2.25cqw, 1.65cqh), 0.48em);
  font-weight: 600;
  line-height: 1.32;
  text-align: center;
  color: color-mix(in srgb, var(--color-text-primary) 88%, #cbd5e1);
  text-wrap: balance;
}

.br-m1-cert__thanks--dim {
  opacity: 0.5;
}

.br-m1-cert__presented {
  margin: 0.08em auto 0;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: clamp(0.28em, min(1.9cqw, 1.35cqh), 0.42em);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 90%, #fef3c7);
}

.br-m1-cert__presented--dim {
  opacity: 0.42;
}

.br-m1-cert__warn {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.4em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cert-gold) 65%, var(--color-text-secondary));
}

.br-m1-cert__subhint {
  margin: 0 0 0.15em;
  font-size: 0.36em;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text-secondary) 92%, white);
  opacity: 0.88;
}

.br-m1-cert__dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22em;
}

.br-m1-cert__dl-row {
  display: grid;
  grid-template-columns: minmax(0, 7.5em) 1fr;
  gap: 0.35em 0.65em;
  align-items: start;
  padding: 0.22em 0.28em;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in srgb, white 7%, transparent);
  background: color-mix(in srgb, black 38%, transparent);
}

.br-m1-cert__dl-row dt {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.32em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 90%, var(--cert-mint));
}

.br-m1-cert__dl-row dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.44em;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  word-break: break-word;
  color: var(--color-text-primary);
}

.br-m1-cert__dd-name {
  font-size: clamp(0.48em, min(2.5cqw, 1.85cqh), 0.62em);
  color: color-mix(in srgb, var(--color-text-primary) 92%, var(--cert-gold));
}

.br-m1-cert__dd--dim {
  opacity: 0.4;
}

.br-m1-cert__block {
  padding: 0.3em 0.32em;
  border-radius: 0.28rem;
  border: 1px solid color-mix(in srgb, var(--cert-gold) 16%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, black 40%, transparent), transparent);
}

.br-m1-cert__block-lbl {
  display: block;
  margin-bottom: 0.2em;
  font-family: var(--font-heading);
  font-size: 0.32em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--cert-gold));
}

.br-m1-cert__block-txt {
  margin: 0;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text-primary) 92%, var(--color-text-secondary));
}

.br-m1-cert__sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4em;
  align-items: end;
  margin-top: auto;
  padding-top: 0.3em;
}

.br-m1-cert__serial {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15em;
}

.br-m1-cert__serial-lbl {
  font-family: var(--font-heading);
  font-size: 0.3em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--cert-gold));
}

.br-m1-cert__serial-code {
  display: block;
  margin: 0;
  padding: 0.22em 0.32em;
  font-family: ui-monospace, monospace;
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-all;
  color: color-mix(in srgb, var(--cert-gold) 88%, white);
  background: color-mix(in srgb, black 52%, transparent);
  border: 1px solid color-mix(in srgb, var(--cert-gold) 26%, transparent);
  border-radius: 0.22rem;
}

.br-m1-cert__eo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.15em;
}

.br-m1-cert__eo-line {
  display: block;
  width: min(100%, 9em);
  height: 1px;
  background: linear-gradient(270deg, color-mix(in srgb, var(--cert-gold) 65%, transparent), transparent);
  opacity: 0.8;
}

.br-m1-cert__eo-name {
  font-family: var(--font-heading);
  font-size: 0.44em;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.br-m1-cert__eo-role {
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--cert-gold));
}

.br-m1-cert__footline {
  margin: 0.2em 0 0;
  padding-top: 0.28em;
  border-top: 1px solid color-mix(in srgb, white 7%, transparent);
  font-family: var(--font-heading);
  font-size: 0.32em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text-secondary) 85%, var(--cert-gold));
  word-break: break-word;
}

.br-m1-cert__footline--dim {
  opacity: 0.5;
  text-align: center;
}

.br-m1-cert--mvp .br-m1-cert__aside {
  background:
    radial-gradient(ellipse 95% 70% at 10% 8%, color-mix(in srgb, var(--cert-mint) 20%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse 80% 55% at 100% 100%, color-mix(in srgb, var(--color-brand) 16%, transparent) 0%, transparent 48%),
    linear-gradient(168deg, color-mix(in srgb, #ccfbf1 6%, #0f172a) 0%, #0c1918 45%, #050807 100%);
  border-right-color: color-mix(in srgb, var(--cert-mint) 48%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cert-mint) 15%, transparent),
    inset -8px 0 24px rgba(0, 0, 0, 0.5),
    6px 0 28px rgba(0, 0, 0, 0.42);
}

.br-m1-cert--mvp .br-m1-cert__aside::after {
  background: linear-gradient(
    128deg,
    transparent 35%,
    color-mix(in srgb, var(--cert-mint) 16%, transparent) 48%,
    transparent 62%
  );
}

.br-m1-cert--mvp .br-m1-cert__aside-inner::before {
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--cert-mint) 50%, transparent) 35%,
    color-mix(in srgb, var(--cert-mint) 28%, transparent) 72%,
    transparent
  );
}

.br-m1-cert--mvp .br-m1-cert__aside-logo {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cert-mint) 42%, transparent),
    0 0 0 2px color-mix(in srgb, black 55%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cert-mint) 22%, transparent));
}

.br-m1-cert--mvp .br-m1-cert__aside-brand-name {
  color: #ecfdf5;
  text-shadow:
    0 0 22px color-mix(in srgb, var(--cert-mint) 35%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.6);
}

.br-m1-cert--mvp .br-m1-cert__aside-brand-line {
  color: color-mix(in srgb, var(--cert-mint) 72%, #94a3b8);
}

.br-m1-cert--mvp .br-m1-cert__brand {
  text-shadow:
    0 0 32px color-mix(in srgb, var(--cert-mint) 22%, transparent),
    0 1px 0 color-mix(in srgb, black 25%, transparent);
}

.br-m1-cert--mvp .br-m1-cert__aside-tier {
  background: linear-gradient(180deg, #ecfdf5 0%, var(--cert-mint) 45%, #0f766e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.br-m1-cert--mvp .br-m1-cert__aside-ico {
  color: #ccfbf1;
  background: radial-gradient(
    circle at 30% 25%,
    color-mix(in srgb, var(--cert-mint) 28%, transparent),
    color-mix(in srgb, black 58%, #134e4a) 72%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cert-mint) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.br-m1-cert--mvp .br-m1-cert__aside-tag {
  color: color-mix(in srgb, #ccfbf1 70%, #115e59);
  border-color: color-mix(in srgb, var(--cert-mint) 32%, transparent);
  background: color-mix(in srgb, black 42%, transparent);
}

.br-m1-cert--mvp .br-m1-cert__position {
  color: color-mix(in srgb, #d1fae5 84%, #ccfbf1);
  border-color: color-mix(in srgb, var(--cert-mint) 45%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--cert-mint) 18%, #06201e),
    color-mix(in srgb, #0f766e 44%, #071312)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 14%, transparent),
    0 0 0 1px color-mix(in srgb, black 35%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 26px color-mix(in srgb, var(--cert-mint) 22%, transparent);
}


@supports not (-webkit-background-clip: text) {
  .br-m1-cert--mvp .br-m1-cert__aside-tier {
    color: var(--cert-mint);
    background: none;
    -webkit-text-fill-color: unset;
  }
}

@media (max-width: 520px) {
  .br-m1-cert--classic {
    flex-direction: column;
  }

  .br-m1-cert__aside {
    flex: 0 0 auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--cert-gold) 38%, transparent);
    padding: 0.45em 0.65em;
  }

  .br-m1-cert__aside::after {
    top: -10%;
    right: 0;
    width: 60%;
    height: 120%;
    opacity: 0.4;
  }

  .br-m1-cert__aside-inner::before {
    display: none;
  }

  .br-m1-cert__aside-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45em 0.85em;
    padding: 0.2em 0;
  }

  .br-m1-cert__aside-brandstack {
    flex-direction: row;
    align-items: center;
    width: auto;
    max-width: 100%;
    gap: 0.55em 0.75em;
  }

  .br-m1-cert__aside-brandblock {
    align-items: flex-start;
    text-align: left;
  }

  .br-m1-cert__sign {
    grid-template-columns: 1fr;
  }

  .br-m1-cert__eo {
    align-items: flex-start;
    text-align: left;
  }

  .br-m1-cert__eo-line {
    background: linear-gradient(90deg, color-mix(in srgb, var(--cert-gold) 65%, transparent), transparent);
  }

  .br-m1-cert__dl-row {
    grid-template-columns: 1fr;
  }

  .br-m1-cert--mvp .br-m1-cert__aside {
    border-bottom-color: color-mix(in srgb, var(--cert-mint) 40%, transparent);
  }
}
@media (max-width: 520px) {
  .br-m1-cert-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .br-m1-cert-toolbar__left {
    justify-content: center;
    text-align: center;
  }

  .br-m1-cert-toolbar__dl {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .br-m1-cert-toolbar__dl-shine {
    transition: none;
  }

  .br-m1-cert-toolbar__dl:hover .br-m1-cert-toolbar__dl-shine {
    translate: -40% 0;
  }

  .br-m1-cert-toolbar__dl:hover:not(:disabled) {
    transform: none;
  }
}