@import "tailwindcss" source(none);

/* src/client/miyto-brand.css */
.miyto-topbar-icon {
  width: 33px;
  height: 33px;
  flex: none;
  object-fit: contain;
  border-radius: 9px;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sp-brand-mark {
  object-fit: contain;
}
.sp-miyto-wordmark {
  object-fit: contain !important;
  width: min(75vw, 310px) !important;
  height: auto !important;
  max-height: 160px !important;
}
.miyto-hero-wordmark {
  object-fit: contain !important;
  width: min(76vw, 390px) !important;
  height: auto !important;
  max-height: 180px !important;
}
.sp-brand-text b {
  letter-spacing: .05em;
}
.welcome-mini-head b {
  letter-spacing: .06em;
}

/* node_modules/@fontsource/cairo/arabic-600.css */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/cairo-arabic-600-normal-6DIEA27P.woff2") format("woff2"), url("./assets/cairo-arabic-600-normal-PB5TJSED.woff") format("woff");
}

/* node_modules/@fontsource/cairo/arabic-800.css */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("./assets/cairo-arabic-800-normal-B6SYGZKL.woff2") format("woff2"), url("./assets/cairo-arabic-800-normal-5FPDCEIJ.woff") format("woff");
}

/* node_modules/@fontsource/cairo/latin-600.css */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/cairo-latin-600-normal-V7BUAOZQ.woff2") format("woff2"), url("./assets/cairo-latin-600-normal-PE5ZTADN.woff") format("woff");
}

/* node_modules/@fontsource/cairo/latin-800.css */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("./assets/cairo-latin-800-normal-W3Q6IGBG.woff2") format("woff2"), url("./assets/cairo-latin-800-normal-WSI4IHYL.woff") format("woff");
}

/* node_modules/@fontsource/ibm-plex-sans-arabic/arabic-400.css */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/ibm-plex-sans-arabic-arabic-400-normal-HDFIX7LY.woff2") format("woff2"), url("./assets/ibm-plex-sans-arabic-arabic-400-normal-N4DMJBB5.woff") format("woff");
}

/* node_modules/@fontsource/ibm-plex-sans-arabic/arabic-500.css */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/ibm-plex-sans-arabic-arabic-500-normal-AAIACC75.woff2") format("woff2"), url("./assets/ibm-plex-sans-arabic-arabic-500-normal-5MTGWOCT.woff") format("woff");
}

/* node_modules/@fontsource/ibm-plex-sans-arabic/arabic-600.css */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./assets/ibm-plex-sans-arabic-arabic-600-normal-LS4CIPTS.woff2") format("woff2"), url("./assets/ibm-plex-sans-arabic-arabic-600-normal-USVRKN2F.woff") format("woff");
}

/* node_modules/@fontsource/ibm-plex-sans-arabic/latin-400.css */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./assets/ibm-plex-sans-arabic-latin-400-normal-W2AG3YJR.woff2") format("woff2"), url("./assets/ibm-plex-sans-arabic-latin-400-normal-7WCZAUHA.woff") format("woff");
}

/* node_modules/@fontsource/ibm-plex-sans-arabic/latin-500.css */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./assets/ibm-plex-sans-arabic-latin-500-normal-5LQDONK7.woff2") format("woff2"), url("./assets/ibm-plex-sans-arabic-latin-500-normal-TFD6UMQA.woff") format("woff");
}

/* src/client/styles.css */
@source "../../index.html";
@source "./";
:root {
  --navy:#050b16;
  --navy-2:#0a1730;
  --panel:rgba(9,22,42,.88);
  --cyan:#4fd8ff;
  --cyan-soft:#8fe9ff;
  --gold:#d9b06a;
  --gold-2:#f3d79c;
  --ivory:#eef0f4;
  --muted:#9db0c4;
  --line:rgba(79,216,255,.22);
  --hairline:rgba(255,255,255,.09);
  --gold-line:rgba(217,176,106,.3);
  --glass:linear-gradient(
      180deg,rgba(19,40,70,.78),rgba(8,18,36,.88));
  --lift:0 1px 0 rgba(255,255,255,.05) inset,0 18px 36px -24px #000;
  --green:#4ade80;
  --red:#ef4455;
  --display:"Cairo","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  font-family: var(--body);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  overflow-x: hidden;
}
body {
  line-height: 1.6;
}
h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0;
  line-height: 1.3;
}
p {
  margin: 0;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: .75;
  filter: saturate(.7);
}
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 10px;
}
.digits {
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.app {
  direction: ltr;
  height: 100dvh;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      #0f2442 0,
      #060d1b 60%,
      #04070f 100%);
}
.rail,
.main {
  direction: rtl;
}
.rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 12px 14px;
  border-radius: 24px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(
      180deg,
      rgba(16, 34, 60, .92),
      rgba(7, 15, 30, .96));
  box-shadow: var(--lift), 0 1px 0 rgba(217, 176, 106, .22) inset;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}
.rail .brand {
  padding: 0 6px 14px;
  border-bottom: 1px solid var(--hairline);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 3px;
}
.brand-text strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .06em;
  background:
    linear-gradient(
      180deg,
      var(--gold-2),
      #b88a45);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text span {
  font-size: 7.5px;
  letter-spacing: .07em;
  color: var(--gold);
  opacity: .85;
  text-transform: none;
}
.brand[data-compact=true] .brand-text strong {
  font-size: 21px;
}
.brand[data-compact=true] .brand-text span {
  display: none;
}
.smi-mark {
  filter: drop-shadow(0 0 6px rgba(243, 215, 156, .35));
}
.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.rail-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  text-align: start;
  transition: background .2s, color .2s;
}
.rail-link svg {
  flex: none;
  opacity: .8;
}
.rail-link:hover {
  color: var(--ivory);
  background: rgba(255, 255, 255, .04);
}
.rail-link[data-active=true] {
  color: #fff;
  border-color: rgba(79, 216, 255, .22);
  background:
    linear-gradient(
      270deg,
      rgba(79, 216, 255, .16),
      rgba(79, 216, 255, .03));
}
.rail-link[data-active=true] svg {
  color: var(--cyan-soft);
  opacity: 1;
}
.rail-link[data-active=true]::after {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background:
    linear-gradient(
      180deg,
      var(--gold-2),
      var(--gold));
  box-shadow: 0 0 10px rgba(217, 176, 106, .6);
}
.rail-tile {
  margin-top: auto;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background:
    radial-gradient(
      circle at 85% 110%,
      rgba(217, 176, 106, .24),
      transparent 62%),
    rgba(10, 24, 46, .85);
  border: 1px solid var(--gold-line);
}
.rail-tile b {
  font-family: var(--display);
  font-size: 14px;
  color: var(--gold-2);
}
.rail-tile span {
  font-size: 12.5px;
  color: var(--muted);
}
.rail-tile .smi-mark {
  align-self: flex-end;
  margin-top: 6px;
  opacity: .85;
}
.main {
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
}
.topbar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(
      180deg,
      rgba(16, 34, 60, .9),
      rgba(8, 17, 34, .94));
  box-shadow: var(--lift);
}
.topbar-brand {
  display: none;
}
.top-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.top-tabs button,
.top-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  transition: color .2s, background .2s;
}
.top-tabs button:hover {
  color: var(--ivory);
  background: rgba(255, 255, 255, .04);
}
.top-current {
  color: #fff;
  border-color: rgba(217, 176, 106, .4);
  background: rgba(217, 176, 106, .1);
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hairline);
}
.user-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  background:
    linear-gradient(
      135deg,
      #2a8ec0,
      #173a66);
  border: 1.5px solid var(--gold);
}
.user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.user-text b {
  font-size: 13px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-text small {
  font-size: 11px;
  color: var(--gold);
}
.body {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 276px;
  gap: 12px;
  min-height: 0;
}
.center {
  direction: rtl;
}
.center {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.view-room {
  flex: 1;
  min-height: 0;
}
.lobby {
  height: 100%;
}
.stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--gold-line);
  container-type: size;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 24px 50px -26px #000,
    0 0 60px -30px var(--cyan) inset;
  background: #07101c;
}
.stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.stage-photo {
  position: absolute;
  pointer-events: none;
  z-index: -2;
  background: url(/approved-stage-art.png) no-repeat;
  mix-blend-mode: screen;
}
.stage-photo-wash {
  inset: -40px;
  background-size: 100% 100%;
  filter: blur(26px) saturate(1.3) brightness(.9);
  opacity: .5;
  -webkit-mask-image:
    radial-gradient(
      ellipse 30% 46% at 50% 42%,
      transparent 55%,
      #000 100%);
  mask-image:
    radial-gradient(
      ellipse 30% 46% at 50% 42%,
      transparent 55%,
      #000 100%);
}
.stage-photo-edge {
  top: 0;
  bottom: 0;
  width: 11%;
  background-size: auto 100%;
  filter: blur(2.5px) saturate(1.15) brightness(.85);
  opacity: .7;
}
.stage-photo-l {
  left: 0;
  background-position: left center;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 55%,
      transparent);
  mask-image:
    linear-gradient(
      90deg,
      #000 55%,
      transparent);
}
.stage-photo-r {
  right: 0;
  background-position: right center;
  -webkit-mask-image:
    linear-gradient(
      270deg,
      #000 55%,
      transparent);
  mask-image:
    linear-gradient(
      270deg,
      #000 55%,
      transparent);
}
.stage-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 50% 40%,
      transparent 40%,
      rgba(2, 5, 10, .72) 100%),
    radial-gradient(
      ellipse at 50% 38%,
      rgba(255, 196, 110, .16),
      transparent 55%);
}
.mote {
  position: absolute;
  bottom: -8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd89a;
  box-shadow: 0 0 8px #ffd89a;
  opacity: 0;
  animation: rise 16s linear infinite;
  z-index: -1;
}
@keyframes rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: .7;
  }
  100% {
    transform: translateY(-90cqh);
    opacity: 0;
  }
}
.stage-center {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.globe {
  position: absolute;
  left: 50%;
  top: 35cqh;
  width: min(32cqw, 44cqh);
  aspect-ratio: 1;
  translate: -50% -50%;
  filter: drop-shadow(0 0 30px rgba(79, 216, 255, .45)) drop-shadow(0 14px 34px rgba(255, 190, 100, .22));
  animation: float 7s ease-in-out infinite;
}
.globe svg {
  width: 100%;
  height: 100%;
  display: block;
}
.globe-rings {
  transform-origin: 100px 100px;
  animation: orb-spin 90s linear infinite;
}
.globe-stars {
  animation: orb-twinkle 5s ease-in-out infinite alternate;
}
@keyframes orb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orb-twinkle {
  from {
    opacity: .65;
  }
  to {
    opacity: 1;
  }
}
@keyframes float {
  50% {
    translate: -50% calc(-50% - 6px);
  }
}
.podium {
  position: absolute;
  left: 50%;
  top: calc(35cqh + min(16cqw, 22cqh) + 6px);
  translate: -50% 0;
  width: min(56cqw, 92cqh);
  aspect-ratio: 4;
  z-index: -1;
}
.pd {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  border-radius: 50%;
}
.pd-0 {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(243, 215, 156, .9);
  background:
    radial-gradient(
      ellipse,
      rgba(217, 176, 106, .3),
      rgba(8, 16, 28, .92) 70%);
  box-shadow:
    0 8px 0 -1px #3b2c15,
    0 14px 0 -2px #120d06,
    0 0 34px rgba(217, 176, 106, .5),
    0 24px 40px -6px rgba(255, 190, 100, .25);
}
.pd-1 {
  width: 78%;
  height: 78%;
  top: 11%;
  border: 2px solid rgba(79, 216, 255, .8);
  background:
    radial-gradient(
      ellipse,
      rgba(79, 216, 255, .3),
      rgba(8, 20, 36, .9) 75%);
  box-shadow: 0 0 26px rgba(79, 216, 255, .5);
}
.pd-2 {
  width: 52%;
  height: 52%;
  top: 24%;
  border: 1px solid rgba(243, 215, 156, .9);
  background:
    radial-gradient(
      ellipse,
      rgba(79, 216, 255, .25),
      rgba(10, 22, 40, .95) 70%);
  box-shadow: 0 4px 0 -1px #2a2110;
}
.pd-glow {
  position: absolute;
  left: 50%;
  top: -30%;
  translate: -50% 0;
  width: 40%;
  height: 60%;
  background:
    radial-gradient(
      ellipse,
      rgba(79, 216, 255, .5),
      transparent 70%);
  filter: blur(10px);
}
.stage-top {
  position: absolute;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  z-index: 3;
}
.room-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(8, 18, 36, .72);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -14px #000;
}
.room-chip b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}
.room-chip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--cyan-soft);
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(79, 216, 255, .1);
}
.match-ring {
  position: absolute;
  left: 50%;
  top: 38cqh;
  width: min(46cqw, 52cqh);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  color: #d9f6ff;
}
.match-ring i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(79, 216, 255, .7);
  box-shadow: 0 0 30px rgba(79, 216, 255, .5), inset 0 0 30px rgba(79, 216, 255, .25);
  animation: pulse 2.4s ease-out infinite;
}
.match-ring i:nth-child(2) {
  animation-delay: .8s;
}
.match-ring i:nth-child(3) {
  animation-delay: 1.6s;
}
.match-ring span {
  position: relative;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(79, 216, 255, .4),
      rgba(8, 24, 48, .9));
  border: 2px solid var(--cyan);
  box-shadow: 0 0 40px rgba(79, 216, 255, .6);
}
@keyframes pulse {
  0% {
    transform: scale(.45);
    opacity: 1;
  }
  100% {
    transform: scale(1.05);
    opacity: 0;
  }
}
.entry-slot {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.entry {
  border-radius: 26px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(
      180deg,
      rgba(18, 38, 68, .82),
      rgba(7, 15, 30, .92));
  backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 0 0 1px rgba(217, 176, 106, .08),
    0 30px 50px -24px #000;
}
.entry-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.entry h1 {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 800;
  letter-spacing: .005em;
}
.entry h1 em {
  font-style: normal;
  color: var(--gold-2);
}
.entry-sub {
  font-size: 13px;
  color: var(--muted);
}
.entry-sub b {
  color: var(--cyan-soft);
}
.entry form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: rgba(6, 14, 28, .7);
  color: var(--cyan-soft);
  min-width: 0;
}
.field:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(79, 216, 255, .12);
}
.field-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.field-body small {
  font-size: 11px;
  color: var(--muted);
}
.field input,
.field select,
.field b {
  background: none;
  border: 0;
  outline: 0;
  color: var(--ivory);
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.field select option {
  background: #0a1730;
  color: #fff;
}
.field select {
  cursor: pointer;
  padding-inline-end: 18px;
}
.field-caret {
  position: absolute;
  inset-inline-end: 12px;
  pointer-events: none;
  color: var(--muted);
}
.field input::placeholder {
  color: #5f7690;
  font-weight: 400;
}
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
  color: #2a1a02;
  background:
    linear-gradient(
      180deg,
      #f8e0ac 0,
      #e3b862 55%,
      #c99a46 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .65) inset,
    0 -1px 0 rgba(120, 80, 20, .35) inset,
    0 14px 28px -12px rgba(217, 176, 106, .65);
  transition:
    transform .15s,
    filter .2s,
    box-shadow .2s;
}
.cta:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.cta:active:not(:disabled) {
  transform: none;
}
.cta:disabled {
  filter: saturate(.45) brightness(.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}
.ghost-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(79, 216, 255, .06);
  color: var(--cyan-soft);
  font-weight: 600;
  transition: background .2s, border-color .2s;
}
.ghost-btn:hover:not(:disabled) {
  background: rgba(79, 216, 255, .12);
  border-color: rgba(79, 216, 255, .4);
}
.status-line {
  font-size: 13px;
  color: var(--cyan-soft);
  min-height: 0;
}
.status-line:empty {
  display: none;
}
.stage-note {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}
.error-line {
  font-size: 13px;
  color: #fcd34d;
  padding: 6px 10px;
}
.entry-wait {
  align-items: center;
  text-align: center;
}
.notice {
  border-radius: 14px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  background: rgba(4, 12, 24, .74);
  font-size: 12.5px;
  color: var(--ivory);
  backdrop-filter: blur(8px);
}
.notice:empty {
  display: none;
}
.entry-slot .notice[data-tone=neutral] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  padding: 0;
  border: 0;
}
.notice[data-tone=error] {
  border-color: rgba(250, 105, 105, .55);
}
.notice[data-tone=ok] {
  border-color: rgba(79, 216, 255, .5);
}
.notice[data-tone=warning] {
  border-color: rgba(217, 176, 106, .6);
}
.stage > .notice {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  max-width: 240px;
  z-index: 3;
}
#tiles {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 20cqh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 2;
}
.pod {
  position: relative;
  pointer-events: auto;
  width: clamp(124px, 19cqw, 204px);
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    linear-gradient(
      180deg,
      rgba(32, 92, 130, .26),
      rgba(7, 18, 36, .72));
  backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 0 0 1px rgba(79, 216, 255, .1),
    0 26px 34px -20px #000;
  animation: float2 6s ease-in-out infinite;
  transition: border-color .25s, box-shadow .25s;
}
.pod[data-self=false] {
  animation-delay: -3s;
}
.pod[data-speaking=true] {
  border-color: rgba(79, 216, 255, .5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 0 calc(22px + var(--voice-level,0) * 26px) -6px rgba(79, 216, 255, .55),
    0 26px 34px -20px #000;
}
@keyframes float2 {
  50% {
    transform: translateY(-5px);
  }
}
.pod:nth-child(3) {
  position: absolute;
  left: 50%;
  top: 44cqh;
  translate: -50% 0;
}
.avatar-stage {
  position: relative;
  width: 62%;
  aspect-ratio: 1;
}
.avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5cqw, 56px);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  border: 2.5px solid rgba(79, 216, 255, .7);
  box-shadow: 0 0 18px rgba(79, 216, 255, .35);
  transition: box-shadow .15s;
}
.avatar[data-self=true] {
  border-color: var(--gold);
}
.pod[data-speaking=true] .avatar {
  box-shadow: 0 0 calc(18px + var(--voice-level,0) * 26px) rgba(79, 216, 255, calc(.45 + var(--voice-level,0) * .4));
}
.pod-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  margin-top: 2px;
}
.pod-tag {
  padding: 1px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(79, 216, 255, .12);
  color: var(--cyan-soft);
  border: 1px solid rgba(79, 216, 255, .3);
}
.pod-tag[data-self=true] {
  background: rgba(217, 176, 106, .12);
  color: var(--gold-2);
  border-color: var(--gold-line);
}
.voice-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.voice-halo i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(79, 216, 255, .75);
  opacity: 0;
  scale: 1;
  box-shadow: 0 0 14px rgba(79, 216, 255, .35), inset 0 0 12px rgba(79, 216, 255, .18);
}
.voice-halo i:nth-child(3) {
  border-color: rgba(217, 176, 106, .55);
  box-shadow: 0 0 12px rgba(217, 176, 106, .25);
}
.pod[data-speaking=true] .voice-halo i {
  animation: voice-ring 2s cubic-bezier(.2, .6, .3, 1) infinite;
}
.pod[data-speaking=true] .voice-halo i:nth-child(2) {
  animation-delay: .66s;
}
.pod[data-speaking=true] .voice-halo i:nth-child(3) {
  animation-delay: 1.33s;
}
@keyframes voice-ring {
  0% {
    scale: 1;
    opacity: calc(.35 + var(--voice-level,0) * .5);
  }
  100% {
    scale: 1.75;
    opacity: 0;
  }
}
.pod-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: transparent;
  border: 1px solid transparent;
  transition:
    color .2s,
    background .2s,
    border-color .2s;
}
.pod-voice[data-state=speaking] {
  color: var(--cyan-soft);
  background: rgba(79, 216, 255, .12);
  border-color: rgba(79, 216, 255, .35);
}
.pod-voice[data-state=muted] {
  color: #ffc2c9;
  background: rgba(239, 68, 85, .12);
  border-color: rgba(239, 68, 85, .4);
}
.voice-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}
.voice-bars b {
  width: 2px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  animation: voice-bar .9s ease-in-out infinite;
}
.voice-bars b:nth-child(2) {
  animation-delay: -.3s;
}
.voice-bars b:nth-child(3) {
  animation-delay: -.6s;
}
@keyframes voice-bar {
  0%, 100% {
    transform: scaleY(.35);
  }
  50% {
    transform: scaleY(1);
  }
}
.mid-timer {
  display: none;
}
.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 28px;
  z-index: 3;
  border: 1px solid var(--hairline);
  background: rgba(8, 18, 36, .78);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 20px 36px -18px #000;
}
.ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  min-width: 68px;
  transition: color .2s;
}
.ctl:hover {
  color: var(--ivory);
}
.ctl svg {
  box-sizing: content-box;
  padding: 16px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(20, 48, 84, .7);
  transition: background .2s, border-color .2s;
}
.ctl[data-on=false] svg {
  background: rgba(120, 40, 50, .55);
  border-color: rgba(250, 105, 105, .55);
}
.ctl-mic svg {
  background:
    radial-gradient(
      circle at 40% 30%,
      #49b8f2,
      #1f68cc);
  border-color: rgba(143, 233, 255, .7);
  box-shadow: 0 0 20px rgba(79, 216, 255, .5);
}
.ctl-mic[data-on=false] svg {
  background: rgba(120, 40, 50, .7);
  box-shadow: none;
}
.ctl-leave {
  min-width: 96px;
  flex-direction: row;
  gap: 8px;
  align-self: stretch;
  align-items: center;
  padding: 0 18px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      #f0566a,
      #c9283d);
  box-shadow: 0 8px 20px -6px rgba(239, 68, 85, .7);
  font-weight: 700;
  font-size: 14px;
  margin-top: 0;
}
.ctl-leave svg {
  padding: 0;
  background: none;
  border: 0;
}
.ctl-end {
  opacity: .85;
}
.ctl-end svg {
  padding: 12px;
  background: rgba(80, 30, 40, .7);
}
.dock {
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 176, 106, .3) transparent;
}
.card {
  border-radius: 22px;
  padding: 16px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  box-shadow: var(--lift);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}
.card-head b {
  color: var(--gold-2);
}
.tag {
  font-family: var(--body);
  font-weight: 500;
  font-size: 10.5px;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
  background: rgba(217, 176, 106, .08);
  white-space: nowrap;
}
.tag[data-on=true] {
  color: var(--green);
  border-color: rgba(74, 222, 128, .4);
  background: rgba(74, 222, 128, .08);
}
.round-title {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 16px;
  margin: 12px 0 4px;
  color: #fff;
}
.round-title svg {
  color: var(--gold-2);
}
.round-ring {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}
.bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background:
    linear-gradient(
      90deg,
      var(--cyan),
      #2a8ef0);
  box-shadow: 0 0 8px rgba(79, 216, 255, .6);
  transition: width 1s linear;
}
.ring-wrap {
  position: relative;
  flex: none;
}
.ring-wrap svg {
  display: block;
}
.ring-arc {
  stroke: var(--cyan);
  filter: drop-shadow(0 0 4px rgba(79, 216, 255, .7));
  transition: stroke-dashoffset 1s linear;
}
.ring-wrap[data-tone=green] .ring-arc {
  stroke: var(--green);
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, .7));
}
.ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.ring-inner .digits {
  font-size: 26px;
}
.ring-inner small {
  font-size: 11px;
  color: var(--muted);
}
.stage-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 22px;
  border: 1px solid var(--hairline);
  background: rgba(8, 18, 36, .78);
  box-shadow: var(--lift);
}
.stage-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--muted);
}
.stage-list .num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--hairline);
  flex: none;
}
.stage-list .lbl {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.25;
  font-size: 13px;
}
.stage-list .lbl small {
  font-size: 11px;
  color: var(--muted);
}
.stage-list .ico {
  opacity: .55;
}
.stage-list li[data-state=current] {
  color: #fff;
  border-color: rgba(79, 216, 255, .28);
  background: rgba(79, 216, 255, .08);
}
.stage-list li[data-state=current] .num {
  background: var(--cyan);
  color: #04121c;
  border-color: var(--cyan);
}
.stage-list li[data-state=current] .ico {
  color: var(--gold-2);
  opacity: 1;
}
.stage-list li[data-state=done] .num {
  color: var(--green);
  border-color: rgba(74, 222, 128, .5);
}
.att-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.att-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  font-size: 12px;
  color: var(--muted);
}
.att-text b {
  font-family: var(--display);
  font-size: 18px;
  color: #fff;
}
.server-line {
  font-size: 11px;
  margin-top: 3px;
}
.server-line b {
  font-size: 12px;
  color: var(--cyan-soft);
}
.dock-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  padding: 0 8px 4px;
  opacity: .85;
}
.view-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-radius: 22px;
  border: 1px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(79, 216, 255, .1),
      transparent 60%),
    linear-gradient(
      180deg,
      rgba(14, 32, 58, .9),
      rgba(7, 16, 32, .95));
}
.view-panel > * {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
.view-panel h2 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.view-panel .round-card {
  display: block;
}
.note {
  font-size: 12.5px;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(217, 176, 106, .4);
  background: rgba(217, 176, 106, .06);
}
.rules-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rules-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(8, 20, 40, .85);
}
.rules-list li > svg {
  flex: none;
  box-sizing: content-box;
  padding: 10px;
  border-radius: 12px;
  color: var(--gold-2);
  background: rgba(217, 176, 106, .12);
  border: 1px solid rgba(217, 176, 106, .35);
}
.rules-list span {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.rules-list b {
  font-family: var(--display);
  font-size: 15px;
}
.rules-list small {
  font-size: 12.5px;
  color: var(--muted);
}
.bottom-nav {
  display: none;
}
@media (max-width: 1180px) {
  .app {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .rail {
    align-items: center;
    padding: 12px 8px;
  }
  .rail .brand-text,
  .rail-link span,
  .rail-tile {
    display: none;
  }
  .rail-link {
    padding: 12px;
  }
  .body {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
}
@media (max-width: 860px) {
  .app {
    direction: rtl;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    background: var(--navy);
  }
  .rail {
    display: none;
  }
  .main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .topbar {
    flex: none;
    height: 50px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    background: rgba(6, 14, 28, .96);
  }
  .topbar-brand {
    display: block;
  }
  .top-tabs {
    display: none;
  }
  .user-text small {
    display: none;
  }
  .user-text b {
    max-width: 110px;
  }
  .body {
    direction: rtl;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
  }
  .dock {
    display: none;
  }
  .center {
    flex: 1;
  }
  .stage {
    border-radius: 0;
    border-width: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }
  .stage-center {
    position: relative;
    inset: auto;
    flex: 1 1 0;
    min-height: 0;
  }
  .stage-photo-edge {
    width: 24%;
  }
  .globe {
    top: 50%;
    width: min(52cqw, 36cqh);
  }
  .podium {
    top: calc(50% + min(26cqw, 18cqh));
    width: min(86cqw, 64cqh);
  }
  .match-ring {
    top: 50%;
    width: min(66cqw, 46cqh);
  }
  .entry-slot {
    position: static;
    transform: none;
    width: auto;
    padding: 0 14px 12px;
  }
  .entry {
    padding: 14px;
    gap: 10px;
    border-radius: 20px;
  }
  .entry h1 {
    font-size: 20px;
  }
  .entry-sub {
    font-size: 12px;
  }
  .field {
    padding: 6px 12px;
  }
  .field input,
  .field select {
    font-size: 14px;
  }
  .cta {
    min-height: 50px;
    font-size: 16px;
  }
  .stage-note {
    display: none;
  }
  .stage > .notice {
    position: static;
    max-width: none;
    margin: 0 14px 6px;
    z-index: 3;
  }
  .stage[data-mode=room] .stage-center {
    display: none;
  }
  .stage[data-mode=room] .stage-top {
    position: static;
    translate: none;
    display: flex;
    justify-content: center;
    padding: 10px 0 0;
  }
  .room-chip {
    padding: 5px 14px;
    gap: 10px;
  }
  .room-chip b {
    font-size: 14px;
  }
  #tiles {
    position: relative;
    inset: auto;
    flex: 1;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
  }
  .pod {
    width: calc(50% - 56px);
    min-width: 104px;
    padding: 10px 8px;
  }
  .pod-name {
    font-size: 14px;
  }
  .avatar-stage {
    width: 70%;
  }
  .avatar {
    font-size: 30px;
  }
  .pod:nth-child(3) {
    position: static;
    translate: none;
  }
  .mid-timer {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 104px;
    padding: 10px 6px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(8, 18, 36, .85);
    box-shadow: 0 0 22px -6px var(--cyan);
    z-index: 3;
  }
  .mid-timer small {
    font-size: 11px;
    color: var(--cyan-soft);
    text-align: center;
    line-height: 1.2;
  }
  .mid-timer .digits {
    font-size: 18px;
  }
  .controls {
    position: static;
    translate: none;
    margin: 8px 12px 10px;
    padding: 10px 12px;
    justify-content: space-around;
    gap: 8px;
    border-radius: 22px;
  }
  .ctl {
    min-width: 0;
    flex: 1;
  }
  .ctl svg {
    padding: 14px;
  }
  .ctl-leave {
    flex: 1.3;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-radius: 18px;
    align-self: auto;
    font-size: 12px;
  }
  .ctl-leave svg {
    padding: 8px;
  }
  .ctl-end span {
    display: none;
  }
  .ctl-end {
    flex: 0 0 auto;
  }
  .view-panel {
    border-radius: 0;
    border-width: 0;
    padding: 18px 16px;
    background:
      radial-gradient(
        ellipse at 50% 0,
        rgba(255, 196, 110, .14),
        transparent 55%),
      radial-gradient(
        ellipse at 50% 0,
        rgba(79, 216, 255, .1),
        transparent 70%),
      linear-gradient(
        180deg,
        rgba(14, 32, 58, .9),
        rgba(7, 16, 32, .95));
  }
  .bottom-nav {
    flex: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(6, 14, 28, .97);
  }
  .bn-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 10.5px;
    border-radius: 12px;
  }
  .bn-link[data-active=true] {
    color: var(--gold-2);
    background: rgba(217, 176, 106, .1);
  }
  .bn-link[data-active=true] svg {
    filter: drop-shadow(0 0 6px rgba(217, 176, 106, .7));
  }
}
@media (max-width: 860px) and (max-height: 700px) {
  .entry-head .entry-sub {
    display: none;
  }
  .stage-center {
    flex-basis: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .pod[data-speaking=true] .voice-halo i:first-child {
    opacity: .85;
    scale: 1.12;
  }
  .voice-bars b {
    transform: scaleY(.7);
  }
}
.student-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: min(76vh, 630px);
  max-width: 480px;
  margin: auto;
  padding: clamp(20px, 4vw, 40px);
  text-align: center;
  color: #f8f3e8;
  border: 1px solid rgba(224, 186, 107, .35);
  border-radius: 30px;
  background:
    linear-gradient(
      155deg,
      rgba(9, 27, 46, .92),
      rgba(16, 38, 60, .86));
  box-shadow: 0 20px 65px rgba(0, 0, 0, .33), inset 0 1px 0 rgba(250, 221, 145, .16);
}
.student-access-emblem {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(238, 190, 99, .48);
  border-radius: 23px;
  color: #e6bc73;
  background:
    linear-gradient(
      155deg,
      rgba(194, 141, 47, .22),
      rgba(7, 38, 63, .7));
  box-shadow: 0 5px 35px rgba(220, 161, 64, .24);
}
.student-access-eyebrow {
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .24em;
  color: #eec786;
}
.student-access h1 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.4;
  margin: 0;
}
.student-access > p {
  color: #acbdc8;
  margin: 0;
  font-size: .9rem;
}
.student-access form {
  width: 100%;
  display: grid;
  gap: 13px;
  margin-top: 10px;
  text-align: right;
}
.student-access form > label {
  color: #e7ddce;
  font-weight: 700;
  font-size: .95rem;
}
.student-code-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  background: rgba(3, 14, 28, .75);
  border: 1px solid rgba(101, 212, 234, .35);
  padding: 14px;
  color: #eac886;
}
.student-code-field:focus-within {
  border-color: #7cecf6;
  box-shadow: 0 0 0 3px rgba(79, 211, 231, .15);
}
.student-code-field input {
  font: inherit;
  font-weight: 700;
  letter-spacing: .02em;
  min-width: 0;
  flex: 1;
  border: 0;
  outline: none;
  color: #fff;
  background: transparent;
  text-align: right;
}
.student-code-field input::placeholder {
  color: #97a6b3;
}
.student-access .cta {
  min-height: 55px;
}
.student-access .stage-note {
  font-size: .76rem;
  text-align: center;
  color: #a7b0bf;
}
.verified-student {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border: 1px solid var(--hairline);
  background: rgba(5, 18, 34, .6);
  border-radius: 16px;
  color: #f4e8cc;
  font-weight: 700;
}
.verified-student span {
  color: var(--cyan-soft);
  font-size: 1.02rem;
  font-weight: 800;
  padding: 1px 12px;
  border-radius: 999px;
  background: rgba(79, 216, 255, .1);
}
.mic-preflight {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(91, 199, 237, .35);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  background: rgba(0, 75, 107, .18);
  color: #c8f4ff;
  font-weight: 600;
}
.mic-preflight[data-ready=true] {
  border-color: rgba(115, 220, 158, .55);
  background: rgba(40, 120, 80, .14);
  color: #9cf2bc;
}
.schedule-label {
  font-size: clamp(.7rem, 1vw, .78rem);
  color: var(--muted);
  text-align: center;
  line-height: 1.8;
  margin: 2px 0 0;
}
.schedule-open,
.schedule-closed {
  font-size: .78rem;
  text-align: center;
  padding: 5px 12px;
  border-radius: 999px;
  align-self: center;
}
.schedule-open {
  color: var(--green);
  background: rgba(74, 222, 128, .08);
  border: 1px solid rgba(74, 222, 128, .3);
}
.schedule-closed {
  color: var(--gold-2);
  background: rgba(217, 176, 106, .08);
  border: 1px solid var(--gold-line);
}
.topbar {
  position: relative;
}
.top-leave {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  border: 1px solid rgba(249, 131, 126, .45);
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(
      155deg,
      #a02b49,
      #741d37);
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(239, 68, 85, .8);
}
.top-leave:hover {
  filter: brightness(1.13);
}
.top-leave:focus-visible {
  outline: 3px solid #9cefff;
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .student-access {
    margin: 6px 14px 102px;
    min-height: auto;
    padding: 22px 16px;
    gap: 8px;
  }
  .student-access h1 {
    font-size: 1.42rem;
  }
  .student-access-emblem {
    height: 56px;
    width: 56px;
    border-radius: 18px;
  }
  .student-code-field {
    padding: 12px;
  }
  .student-access .cta {
    font-size: .92rem;
  }
  .top-leave {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    padding: 8px 10px;
    font-size: .73rem;
    z-index: 20;
  }
  .top-leave svg {
    height: 15px;
    width: 15px;
  }
  .topbar .user-chip {
    max-width: 112px;
  }
  .schedule-label {
    font-size: .7rem;
  }
}
.student-entry-slot .student-access {
  min-height: 0;
  width: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 12px 16px 15px;
  background: transparent;
  box-shadow: none;
  gap: 5px;
}
.student-entry-slot .student-access-emblem,
.student-entry-slot .student-access-eyebrow {
  display: none;
}
.student-entry-slot .student-access h1 {
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
}
.student-entry-slot .student-access > p {
  font-size: .79rem;
}
.student-entry-slot .student-access form {
  margin-top: 4px;
  gap: 8px;
}
.student-entry-slot .student-code-field {
  padding: 11px 14px;
}
.student-entry-slot .student-access .cta {
  min-height: 49px;
}
.student-entry-slot .student-access .stage-note {
  margin-top: 2px;
  font-size: .68rem;
}
@media (max-width: 700px) {
  .student-entry-slot .student-access {
    padding: 8px 6px 14px;
  }
  .student-entry-slot .student-access h1 {
    font-size: 1.16rem;
  }
  .student-entry-slot .student-access form {
    gap: 7px;
  }
  .student-entry-slot .student-code-field {
    padding: 9px 12px;
  }
  .student-entry-slot .student-access .cta {
    min-height: 49px;
  }
}
.admin-shell {
  min-height: 100vh;
  background:
    radial-gradient(
      ellipse at 45% 0,
      #183f50,
      #071423 64%);
  color: #f3eadb;
  font-family:
    "IBM Plex Sans Arabic",
    system-ui,
    sans-serif;
  padding: 25px clamp(15px, 3vw, 55px);
  direction: rtl;
}
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid #315264;
}
.admin-head h1,
.admin-grid h2,
.admin-grid h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #efd1a1;
}
.admin-head h1 {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}
.admin-head a {
  color: #70e2f3;
}
.admin-login {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 460px;
  margin: 55px auto;
  padding: 33px;
  border: 1px solid #476275;
  border-radius: 22px;
  background: #0d2035;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 25px;
  align-items: start;
}
.admin-grid > section {
  padding: 22px;
  border-radius: 21px;
  border: 1px solid #48606b;
  background:
    linear-gradient(
      140deg,
      #0f2940,
      #0b1c2c);
  box-shadow: 0 18px 35px #0004;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-grid h2 {
  font-size: 1.12rem;
  margin: 0 0 8px;
}
.admin-grid h3 {
  font-size: 1rem;
  margin: 0;
}
.admin-shell input,
.admin-shell textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #4f6d7d;
  color: white;
  background: #071927;
  outline: none;
  resize: vertical;
  font: inherit;
}
.admin-shell input:focus,
.admin-shell textarea:focus {
  border-color: #57dbf4;
}
.admin-shell button {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #8b7b54;
  background:
    linear-gradient(
      125deg,
      #dbb768,
      #a97b34);
  color: #092136;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.admin-shell button:disabled {
  opacity: .5;
  cursor: wait;
}
.admin-shell button.danger {
  background:
    linear-gradient(
      125deg,
      #fa7f87,
      #ac374a);
  border-color: #fa6e7d;
}
.admin-window {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid #355166;
  border-radius: 13px;
  padding: 12px;
}
.admin-window p {
  margin: 5px 0;
  padding: 8px;
  border-radius: 9px;
  background: #062035;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-window small {
  color: #a1c9d8;
}
.admin-field {
  display: grid;
  gap: 6px;
}
.admin-error {
  color: #ffc4c4;
  text-align: center;
}
.lesson-feed {
  display: grid;
  gap: 8px;
  padding: 8px clamp(8px, 1.8vw, 22px);
  max-width: 700px;
  width: 100%;
  margin: 6px auto 0;
  z-index: 2;
}
.lesson-announcement,
.lesson-prompt,
.live-sound {
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(6, 16, 32, .74);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  font-size: .81rem;
  line-height: 1.7;
  color: #f4ecd9;
}
.lesson-announcement {
  border-color: rgba(79, 216, 255, .4);
  background: rgba(4, 40, 60, .82);
  display: grid;
  gap: 3px;
}
.lesson-announcement span,
.lesson-prompt small {
  color: #d8bd7d;
  font-size: .69rem;
  letter-spacing: .02em;
}
.lesson-prompt p {
  margin: 4px 0;
  font-weight: 600;
}
.live-sound {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.live-sound button {
  border: 1px solid #52c7ea;
  border-radius: 10px;
  color: white;
  padding: 8px 12px;
  background: #126c86;
  font: inherit;
}
@media (max-width: 980px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .lesson-feed {
    padding: 8px 4px;
  }
  .lesson-prompt p {
    font-size: .77rem;
  }
}
.evaluation-panel {
  direction: rtl;
  max-width: 720px;
  margin: 0 auto;
}
.evaluation-panel h2,
.evaluation-panel h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.evaluation-cap,
.evaluation-output {
  padding: 15px;
  border-radius: 14px;
  background: #09253bbf;
  border: 1px solid #31586d;
  margin: 10px 0;
  display: grid;
  gap: 8px;
}
.evaluation-cap span {
  font-weight: 700;
  color: #ead399;
}
.evaluation-cap small {
  color: #b9d1df;
}
.evaluation-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 8px;
  line-height: 1.7;
  color: #dee8ee;
  font-size: .88rem;
}
.evaluation-check input {
  width: 18px;
  height: 18px;
  accent-color: #0bb9cf;
  flex: 0 0 auto;
  margin-top: 4px;
}
.evaluation-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px;
}
.evaluation-actions .cta {
  min-width: 220px;
}
.evaluation-actions .cta:disabled {
  opacity: .52;
}
.evaluation-output ul {
  padding-right: 24px;
}
.evaluation-output li {
  padding: 4px 0;
}
.evaluation-warning,
.evaluation-notice {
  font-size: .83rem;
  color: #e7c59c;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 700px) {
  .bottom-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
  }
  .bn-link {
    min-width: 0;
    font-size: 9.3px;
    padding: 6px 1px;
  }
  .bn-link span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bn-link svg {
    width: 18px;
    height: 18px;
  }
}
.smi-daily-stars,
.smi-weekly-qualification {
  margin: 14px 0;
  padding: 15px;
  border-radius: 17px;
  border: 1px solid rgba(225, 181, 100, .4);
  background: #09253bdd;
}
.smi-daily-stars h3,
.smi-weekly-qualification h3 {
  font-size: 1rem;
  color: #e9c488;
}
.smi-star-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.smi-skill {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #091d2c;
  border-radius: 12px;
  border: 1px solid #32526a;
}
.smi-skill strong {
  font-size: .9rem;
}
.smi-skill span {
  font-weight: 700;
  color: #e6c375;
}
.smi-skill small,
.smi-weekly-qualification small {
  font-size: .73rem;
  color: #b9cbd5;
  line-height: 1.7;
}
@media (max-width: 650px) {
  .smi-star-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smi-skill {
    padding: 9px;
  }
}
@media (min-width: 861px) {
  .stage .lesson-feed {
    position: absolute;
    left: 50%;
    bottom: 146px;
    translate: -50% 0;
    width: min(540px, calc(100% - 48px));
    max-height: 30cqh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    z-index: 3;
  }
}
.journey-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  font-family: var(--body);
  color: var(--ivory);
}
.journey-layer > * {
  pointer-events: auto;
}
.journey-layer .jr-card {
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(640px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 20px;
  border-radius: 26px;
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(
      circle at 85% -10%,
      rgba(217, 176, 106, .2),
      transparent 55%),
    linear-gradient(
      180deg,
      rgba(14, 32, 60, .97),
      rgba(6, 14, 30, .985));
  box-shadow:
    0 1px 0 rgba(243, 215, 156, .16) inset,
    0 40px 90px -30px #000,
    0 0 0 100vmax rgba(3, 8, 18, .55);
  animation: jr-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}
.journey-layer .jr-results {
  top: auto;
  bottom: max(96px, env(safe-area-inset-bottom));
  translate: -50% 0;
  box-shadow: 0 30px 70px -28px #000;
}
.jr-card header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-2);
}
.jr-card h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 800;
  margin: 0;
  flex: 1;
  color: var(--ivory);
}
.jr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: #06210f;
  background:
    linear-gradient(
      180deg,
      #86efac,
      #4ade80);
}
.jr-subtitle {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 2;
  color: var(--ivory);
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hairline);
}
.jr-status,
.jr-note,
.jr-hint {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--muted);
}
.jr-hint {
  min-height: 1.8em;
  font-size: .84rem;
}
.jr-error {
  margin: 0;
  color: #fcd34d;
  font-size: .88rem;
}
.jr-player {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jr-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.jr-meter {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.jr-meter i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background:
    linear-gradient(
      270deg,
      var(--gold-2),
      var(--gold));
  transition: width .25s linear;
}
.jr-vol {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--muted);
}
.jr-vol input {
  flex: 1;
  accent-color: var(--gold);
}
.jr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(79, 216, 255, .08);
  color: var(--cyan-soft);
  font-weight: 700;
  cursor: pointer;
}
.jr-btn:hover:not(:disabled) {
  background: rgba(79, 216, 255, .16);
}
.jr-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.jr-btn-gold {
  border: 0;
  color: #2a1a02;
  background:
    linear-gradient(
      180deg,
      var(--gold-2),
      var(--gold));
  box-shadow: 0 10px 24px -12px rgba(217, 176, 106, .9);
}
.jr-btn-gold:hover:not(:disabled) {
  background:
    linear-gradient(
      180deg,
      #fbe6b9,
      #e3b974);
}
.jr-btn-quiet {
  background: transparent;
  border-color: var(--hairline);
  color: var(--muted);
}
.jr-link {
  background: none;
  border: 0;
  padding: 0 4px;
  color: var(--gold-2);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.jr-spin {
  animation: jr-spin 1s linear infinite;
}
.jr-wait {
  align-items: center;
  text-align: center;
}
.jr-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.jr-form > label {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-2);
}
.jr-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jr-input-row input {
  width: 7.5em;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--gold-line);
  background: rgba(6, 14, 28, .8);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
  color: var(--ivory);
}
.jr-input-row input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.jr-input-row input[aria-invalid=true] {
  border-color: #f87171;
}
.jr-input-row > span {
  color: var(--muted);
}
.jr-saved {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #86efac;
}
.jr-saved b {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ivory);
}
.jr-sentence {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(217, 176, 106, .1);
  border: 1px solid var(--gold-line);
  color: var(--gold-2);
  line-height: 1.9;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.jr-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jr-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jr-sheet-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--gold-line);
  background: rgba(10, 23, 48, .7);
  color: var(--ivory);
  font: inherit;
  cursor: pointer;
  text-align: start;
}
.jr-sheet-item:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.jr-sheet-item[data-saved=true] .jr-sheet-state {
  color: #86efac;
}
.jr-sheet-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--gold-2);
}
.jr-sheet-state b {
  color: var(--ivory);
}
.jr-sheet-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(74, 222, 128, .4);
  background: rgba(74, 222, 128, .08);
  color: #86efac;
  font-size: .85rem;
}
.jr-sheet-confirm b {
  color: var(--ivory);
}
.studio-stage-status-text {
  margin: 6px 0 0;
  font-size: .95rem;
  color: var(--gold-2);
  text-align: center;
}
.jr-chip-ok {
  border-color: rgba(74, 222, 128, .4);
  color: #86efac;
}
.jr-chip-ok b {
  color: var(--ivory);
}
.jr-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 18, .6);
}
.jr-modal .jr-card {
  box-shadow: 0 40px 90px -30px #000;
}
.jr-hud {
  position: fixed;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: rgba(8, 18, 36, .92);
  backdrop-filter: blur(8px);
  font-size: .85rem;
  white-space: nowrap;
  max-width: calc(100vw - 20px);
}
.jr-hud b {
  font-size: 1.1rem;
  color: var(--gold-2);
}
.jr-offline {
  color: #fcd34d;
}
.jr-fullscreen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vh, 26px);
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(217, 176, 106, .2),
      transparent 52%),
    linear-gradient(
      180deg,
      #050d1c,
      #02060e);
  animation: jr-fade .35s ease both;
}
.jr-count-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--gold-2);
  letter-spacing: .02em;
}
.jr-count {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(7rem, 32vmin, 17rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: transparent;
  background:
    linear-gradient(
      180deg,
      #fff2cf,
      var(--gold) 60%,
      #a9773a);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(217, 176, 106, .45));
  animation: jr-tick 1s cubic-bezier(.2, .7, .2, 1) both;
}
.jr-count-text {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.2rem, 3.4vw, 2rem);
  line-height: 1.9;
  color: var(--ivory);
}
.jr-celebrate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(3, 8, 18, .72);
  animation: jr-life 4.8s ease both;
}
.jr-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.jr-burst i {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 2px;
  height: 150px;
  transform-origin: 50% 0;
  rotate: var(--a);
  background:
    linear-gradient(
      180deg,
      rgba(255, 236, 190, .9),
      rgba(217, 176, 106, 0));
  opacity: 0;
  animation: jr-ray 1.6s ease-out .15s both;
}
.jr-burst b {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f3d79c;
  box-shadow: 0 0 10px #f3d79c;
  opacity: 0;
  animation: jr-spark 1.9s ease-out var(--delay) both;
}
.jr-glow {
  position: absolute;
  left: -150px;
  top: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(243, 215, 156, .42),
      transparent 66%);
  animation: jr-glow 2s ease-out both;
}
.jr-celebrate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100vw - 40px));
  padding: 26px 28px;
  text-align: center;
}
.jr-celebrate-card small {
  color: var(--gold);
  letter-spacing: .04em;
}
.jr-celebrate-card p {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  line-height: 1.9;
  color: var(--gold-2);
  text-shadow: 0 2px 20px rgba(217, 176, 106, .35);
}
@keyframes jr-rise {
  from {
    opacity: 0;
    translate: -50% calc(-50% + 14px);
  }
  to {
    opacity: 1;
  }
}
@keyframes jr-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes jr-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes jr-tick {
  0% {
    opacity: 0;
    scale: 1.35;
  }
  18% {
    opacity: 1;
    scale: 1;
  }
  85% {
    opacity: 1;
    scale: .97;
  }
  100% {
    opacity: .88;
    scale: .94;
  }
}
@keyframes jr-ray {
  0% {
    opacity: 0;
    scale: 1 .1;
  }
  25% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    scale: 1 1.5;
  }
}
@keyframes jr-spark {
  0% {
    opacity: 0;
    translate: 0 0;
    scale: .4;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: var(--dx) var(--dy);
    scale: 1;
  }
}
@keyframes jr-glow {
  0% {
    opacity: 0;
    scale: .3;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1.5;
  }
}
@keyframes jr-life {
  0% {
    opacity: 0;
  }
  9% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .journey-layer .jr-card {
    padding: 18px 16px 16px;
    border-radius: 22px;
  }
  .jr-hud {
    font-size: .78rem;
    gap: 8px;
    padding: 6px 12px;
  }
  .jr-burst i {
    height: 110px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-layer * {
    animation: none !important;
    transition: none !important;
  }
  .jr-burst {
    display: none;
  }
  .jr-count {
    opacity: 1;
  }
}
.admin-grid > .admin-journey {
  grid-column: 1/-1;
  padding: 22px;
  border-radius: 21px;
  border: 1px solid #6e6240;
  background:
    linear-gradient(
      140deg,
      #102a3f,
      #0b1b2b);
  box-shadow: 0 18px 35px #0004;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-note {
  margin: 0;
  color: #a9c7d4;
  font-size: .84rem;
  line-height: 1.8;
}
.jadm-slots,
.jadm-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}
.jadm-slot,
.jadm-session {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: 15px;
  border: 1px solid #3d5a6c;
  background: #0a1d2e;
}
.jadm-slot[data-set=yes] {
  border-color: #4e8a6a;
}
.jadm-slot header,
.jadm-session header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jadm-slot header small {
  color: #9fbccb;
  font-size: .76rem;
}
.jadm-state {
  font-size: .78rem;
  color: #e7c88c;
}
.jadm-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jadm-preview audio {
  max-width: 100%;
  height: 34px;
}
.jadm-warn {
  color: #fcd34d;
  font-size: .74rem;
}
.jadm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.jadm-actions input[type=file] {
  padding: 8px;
  flex: 1 1 180px;
  font-size: .8rem;
}
.jadm-actions button,
.jadm-slot > button,
.jadm-session button,
.jadm-settings button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.jadm-sub {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .8rem;
  color: #bcd3df;
}
.jadm-settings {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
  border-radius: 15px;
  border: 1px solid #3d5a6c;
  background: #0a1d2e;
}
.jadm-settings label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .85rem;
  color: #d2e3ec;
}
.jadm-settings select {
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #4f6d7d;
  background: #071927;
  color: #fff;
  font: inherit;
}
.jadm-max,
.jadm-phrases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.jadm-check {
  flex-direction: row !important;
  align-items: center;
  gap: 9px !important;
}
.jadm-check input {
  width: auto;
}
.jadm-log {
  margin: 0;
  padding-inline-start: 18px;
  font-size: .76rem;
  color: #b8d0dc;
  line-height: 1.8;
}
.jadm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  margin-top: 8px;
}
.jadm-table caption {
  text-align: right;
  color: #e7c88c;
  padding: 4px 0;
}
.jadm-table td {
  padding: 5px 7px;
  border-top: 1px solid #29465a;
}
.journey-layer .jr-card.jr-broadcast {
  z-index: 4;
  width: min(435px, calc(100vw - 34px));
  padding: 25px 25px 23px;
  overflow: visible;
  align-items: center;
  text-align: center;
  gap: 12px;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(211, 171, 100, .15),
      transparent 66%),
    linear-gradient(
      154deg,
      rgba(18, 37, 63, .975),
      rgba(4, 12, 30, .97));
  border: 1px solid rgba(239, 201, 131, .4);
  box-shadow:
    0 1px 0 rgba(255, 229, 177, .2) inset,
    0 30px 75px rgba(0, 0, 0, .6),
    0 0 65px rgba(216, 177, 98, .09);
  backdrop-filter: blur(14px);
}
.jr-broadcast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}
.jr-broadcast-overline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: #ecd8b4;
  letter-spacing: .01em;
  font-weight: 700;
}
.jr-broadcast-live {
  font-size: .67rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(227, 190, 120, .28);
  background: rgba(214, 165, 75, .09);
  border-radius: 999px;
  padding: 5px 9px;
  color: #f6e7c9;
}
.jr-broadcast-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ee8ce;
  box-shadow: 0 0 11px #9ee8ce;
}
.jr-broadcast-illustration {
  position: relative;
  width: 175px;
  height: 175px;
  display: grid;
  place-items: center;
  margin: 10px auto 0;
  isolation: isolate;
}
.jr-speaker-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(225, 187, 120, .36);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(218, 175, 92, .1) inset;
}
.jr-speaker-ring-inner {
  inset: 19px;
  border-color: rgba(232, 196, 129, .42);
}
.jr-speaker-ring-outer {
  inset: 0;
  border-color: rgba(238, 195, 111, .21);
}
.jr-speaker-icon {
  width: 107px;
  height: 107px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f6dcaa;
  background:
    radial-gradient(
      circle at 30% 15%,
      rgba(244, 221, 175, .34),
      transparent 48%),
    linear-gradient(
      145deg,
      #514323,
      #171d27 72%);
  border: 1px solid rgba(255, 228, 175, .56);
  box-shadow:
    0 0 0 8px rgba(219, 179, 111, .055),
    inset 0 1px 8px rgba(255, 225, 169, .13),
    0 16px 38px rgba(0, 0, 0, .38),
    0 0 31px rgba(247, 199, 110, .14);
}
.jr-speaker-dot {
  position: absolute;
  bottom: 19px;
  right: 33px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #9ee8ce;
  border: 2px solid #102034;
  box-shadow: 0 0 17px #9ee8ce;
}
.jr-broadcast-illustration[data-speaking=true] .jr-speaker-ring-outer {
  animation: jr-radio-breathe 2.2s ease-in-out infinite;
}
.jr-broadcast-illustration[data-speaking=true] .jr-speaker-ring-inner {
  animation: jr-radio-breathe 2.2s ease-in-out -.5s infinite;
}
.jr-broadcast-illustration[data-speaking=true] .jr-speaker-icon {
  box-shadow:
    0 0 0 8px rgba(219, 179, 111, .07),
    inset 0 1px 8px rgba(255, 225, 169, .13),
    0 16px 38px rgba(0, 0, 0, .38),
    0 0 42px rgba(247, 199, 110, .34);
}
.jr-broadcast-wave {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 35px;
  margin-top: 2px;
}
.jr-broadcast-wave i {
  display: block;
  height: 6px;
  width: 3px;
  border-radius: 4px;
  background:
    linear-gradient(
      180deg,
      #fff2cd,
      #cc9b51);
  opacity: .55;
  transform-origin: center;
  transition: height .18s ease-out;
}
.jr-broadcast[data-play=playing] .jr-broadcast-wave i {
  animation: jr-radio-wave .82s ease-in-out infinite alternate;
}
.jr-broadcast-wave i:nth-child(3n) {
  animation-duration: .69s !important;
}
.jr-broadcast-wave i:nth-child(4n) {
  animation-duration: 1.04s !important;
}
.jr-broadcast h2 {
  margin: 0;
  font-size: clamp(1.15rem, 3.5vw, 1.54rem);
  color: #fff0d1;
  line-height: 1.6;
  text-align: center;
}
.jr-broadcast-caption {
  margin: 0;
  line-height: 1.9;
  font-size: clamp(.87rem, 2.5vw, 1rem);
  color: #cad2df;
  max-width: 33ch;
}
.jr-broadcast-note {
  margin: 3px 0 0;
  color: #d4b982;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  line-height: 1.7;
}
.jr-broadcast-enable {
  min-height: 47px;
  width: 100%;
  margin-top: 5px;
}
.jr-broadcast-recover {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #f3dac0;
  font-size: .86rem;
}
.jr-broadcast-recover p {
  margin: 0;
}
@keyframes jr-radio-breathe {
  0%, 100% {
    scale: 1;
    opacity: .46;
  }
  50% {
    scale: 1.2;
    opacity: .95;
  }
}
@keyframes jr-radio-wave {
  0% {
    height: 5px;
    opacity: .45;
  }
  40% {
    height: 16px;
    opacity: .85;
  }
  100% {
    height: 29px;
    opacity: 1;
  }
}
@media (max-width: 560px) {
  .journey-layer .jr-card.jr-broadcast {
    padding: 20px 16px 22px;
    gap: 9px;
    border-radius: 25px;
  }
  .jr-broadcast-illustration {
    width: 148px;
    height: 148px;
    margin-top: 0;
  }
  .jr-speaker-icon {
    width: 93px;
    height: 93px;
  }
  .jr-speaker-icon svg {
    width: 48px;
    height: 48px;
  }
  .jr-speaker-ring-inner {
    inset: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .jr-broadcast-wave i,
  .jr-speaker-ring {
    animation: none !important;
  }
  .jr-broadcast-wave i {
    height: 12px;
  }
}
.mic-recovery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px;
  margin: 12px auto;
  max-width: 460px;
  background: rgba(244, 177, 71, .10);
  border: 1px solid rgba(244, 177, 71, .43);
  border-radius: 17px;
  color: #ffebbd;
  text-align: center;
  line-height: 1.85;
}
.mic-recovery p {
  font-size: .91rem;
  margin: 0;
}
.mic-recovery .cta {
  margin-top: 2px;
  max-width: 100%;
  min-height: 46px;
}
.live-console {
  gap: 10px;
}
.live-console select,
.live-console textarea {
  width: 100%;
  font: inherit;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid #48606b;
  background: #08192a;
  color: #f3eadb;
}
.live-conn {
  margin: 0;
  font-size: .8rem;
  color: #9fb6c2;
}
.live-conn[data-state=open] {
  color: #7fe3a7;
}
.live-conn[data-state=closed] {
  color: #ff9d8a;
}
.live-audience {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0a2236;
  border: 1px solid #2f5163;
}
.live-audience strong {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #efd1a1;
}
.live-audience small {
  color: #c3d3da;
  line-height: 1.6;
}
.live-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: .8rem;
}
.live-log li[data-ok=true] {
  color: #7fe3a7;
}
.live-log li[data-ok=false] {
  color: #ff9d8a;
}
.live-controls {
  display: grid;
  gap: 10px;
}
.live-badge {
  display: inline-block;
  color: #ffd76a;
  font-weight: 700;
}
.live-meter {
  height: 10px;
  border-radius: 6px;
  background: #06121e;
  border: 1px solid #2f5163;
  overflow: hidden;
}
.live-meter i {
  display: block;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #4fd8ff,
      #efd1a1);
  transition: width .08s;
}
.live-note {
  font-size: .78rem;
  color: #9fb6c2;
  margin: 0;
}
.live-toast {
  position: relative;
  box-shadow: 0 8px 28px #0008;
  border-color: #efd1a1;
}
.live-toast button {
  justify-self: end;
  padding: 4px 10px;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.admin-tabs button {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid #48606b;
  background: #0b1c2c;
  color: #cfe0ea;
  font: inherit;
  cursor: pointer;
}
.admin-tabs button[data-active=true] {
  background:
    linear-gradient(
      135deg,
      #efd1a1,
      #c99a52);
  color: #1a1205;
  border-color: #efd1a1;
  font-weight: 700;
}
.admin-rooms-view {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.rooms-console {
  min-width: 0;
}
.rooms-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: .9rem;
  color: #cfe0ea;
}
.rooms-stats b {
  color: #efd1a1;
  font-size: 1.1rem;
}
.rooms-stats small {
  color: #8fa6b6;
}
.rooms-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rooms-filters label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 180px;
  padding: 0 10px;
  border: 1px solid #48606b;
  border-radius: 10px;
  background: #091827;
}
.rooms-filters input,
.rooms-filters select {
  background: #091827;
  color: #eef0f4;
  border: 1px solid #48606b;
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
  min-width: 0;
}
.rooms-filters label input {
  border: 0;
  background: transparent;
  flex: 1;
  outline: none;
}
.room-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 70vh;
  overflow: auto;
}
.room-card {
  border: 1px solid #355166;
  border-radius: 14px;
  background: #0a1a2a;
  padding: 10px 12px;
}
.room-card[data-selected=true] {
  border-color: #efd1a1;
}
.room-card > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.room-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: #efd1a1;
  font: inherit;
  cursor: pointer;
}
.room-count {
  color: #8fa6b6;
  font-size: .82rem;
  margin-inline-start: auto;
}
.room-people {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.room-people li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #0d2236;
}
.room-people li.idle {
  color: #8fa6b6;
}
.room-people small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
}
.room-people small[data-tone=ok] {
  color: #69e0a1;
}
.room-people small[data-tone=bad] {
  color: #ff8d8d;
}
.room-people small[data-tone=warn] {
  color: #f3d79c;
}
.room-people small[data-tone=idle] {
  color: #8fa6b6;
}
.mic-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8fa6b6;
}
.mic-dot[data-tone=ok] {
  background: #3fd488;
  box-shadow: 0 0 8px #3fd488;
}
.mic-dot[data-tone=bad] {
  background: #ff6b6b;
}
.mic-dot[data-tone=warn] {
  background: #e5b85c;
}
.people-actions {
  display: flex;
  gap: 6px;
  margin-inline-start: auto;
}
.people-actions button,
.rooms-pager button,
.admin-chat button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid #48606b;
  background: #12304a;
  color: #eef0f4;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.people-actions button:disabled,
.rooms-pager button:disabled,
.admin-chat button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.rooms-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #cfe0ea;
}
.admin-chat,
.room-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--gold-line,#8a6d3c);
  border-radius: 16px;
  background: rgba(9, 22, 42, .92);
  padding: 12px;
}
.admin-chat > header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #efd1a1;
}
.admin-chat > header button {
  margin-inline-start: auto;
}
.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #0d2236;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-list li b {
  font-size: .76rem;
  color: #8fe9ff;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-list li[data-from=admin] {
  background:
    linear-gradient(
      135deg,
      #3a2c10,
      #241a08);
  border: 1px solid #d9b06a;
}
.chat-list li[data-from=admin] b {
  color: #f3d79c;
}
.chat-list li[data-private=true] {
  outline: 1px dashed #f3d79c;
}
.chat-list li[data-self=true] b {
  color: #d9b06a;
}
.chat-empty {
  color: #8fa6b6;
}
.room-chat h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gold-2,#f3d79c);
  font-size: 1rem;
}
.room-chat h3 small {
  color: #8fa6b6;
  font-weight: 400;
  font-size: .72rem;
}
.room-chat form,
.admin-chat form {
  display: flex;
  gap: 6px;
}
.room-chat input,
.admin-chat input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid #48606b;
  background: #091827;
  color: #eef0f4;
  font: inherit;
}
.room-chat form button {
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--gold-line,#8a6d3c);
  background: #12304a;
  color: #f3d79c;
  cursor: pointer;
}
.chat-error {
  color: #ff9d9d;
  margin: 0;
  font-size: .85rem;
}
.mod-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #ff8d8d;
  background: #3a1218;
  color: #ffe3e3;
}
.mod-banner[data-state=pending] {
  border-color: #f3d79c;
  background: #33280d;
  color: #fff1cf;
}
@media (max-width: 980px) {
  .admin-rooms-view {
    grid-template-columns: 1fr;
  }
  .people-actions {
    margin-inline-start: 0;
    width: 100%;
  }
  .room-cards {
    max-height: none;
  }
}
.journey-layer .jr-side-announcer {
  position: fixed;
  inset: auto auto auto 0;
  top: 42%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: max-content;
  max-width: min(210px, calc(100vw - 24px));
  color: #f5dfb0;
  pointer-events: none;
}
.jr-side-hanger {
  position: absolute;
  top: -27px;
  left: 25px;
  width: 2px;
  height: 33px;
  background:
    linear-gradient(
      180deg,
      transparent,
      #ddba7b);
  pointer-events: none;
}
.jr-side-speaker {
  position: relative;
  min-width: 74px;
  width: 74px;
  height: 83px;
  margin: 0 0 0 -10px;
  border-radius: 0 19px 19px 0;
  border: 1px solid rgba(233, 191, 119, .65);
  background:
    linear-gradient(
      147deg,
      #304662 0%,
      #13243d 55%,
      #071329 100%);
  box-shadow:
    0 10px 35px #0009,
    0 0 18px #e9ae4933,
    inset 0 1px #f5daa94d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fbe5b9;
  pointer-events: auto;
  overflow: hidden;
}
.jr-side-speaker:disabled {
  opacity: 1;
  cursor: default;
}
.jr-side-speaker:not(:disabled) {
  cursor: pointer;
}
.jr-side-speaker:focus-visible {
  outline: 3px solid #f3ca75;
  outline-offset: 3px;
}
.jr-side-speaker-face {
  display: grid;
  place-items: center;
  border: 1px solid #ddba7b4f;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  background:
    radial-gradient(
      circle at 35% 25%,
      #84683b64,
      #1a2537 74%);
}
.jr-side-speaker-bars {
  height: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.jr-side-speaker-bars i {
  width: 3px;
  height: 4px;
  border-radius: 3px;
  background: #e9c88d;
  opacity: .68;
}
.jr-side-speaker-led {
  position: absolute;
  right: 6px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a2e5cd;
  box-shadow: 0 0 8px #94e9ca;
}
.jr-side-announcer[data-play=playing] .jr-side-speaker {
  box-shadow:
    0 10px 35px #0009,
    0 0 26px #e9b45455,
    inset 0 1px #f5daa94d;
}
.jr-side-announcer[data-play=playing] .jr-side-speaker-bars i {
  animation: jr-side-speak .55s ease-in-out infinite alternate;
}
.jr-side-announcer[data-play=playing] .jr-side-speaker-bars i:nth-child(2n) {
  animation-delay: -.36s;
}
.jr-side-announcer[data-play=playing] .jr-side-speaker-bars i:nth-child(3n) {
  animation-delay: -.14s;
}
@keyframes jr-side-speak {
  from {
    height: 4px;
  }
  to {
    height: 11px;
  }
}
.jr-side-controls,
.jr-side-report-retry {
  width: max-content;
  max-width: 190px;
  margin-inline-start: 4px;
  padding: 6px;
  border-radius: 10px;
  background: #0b1c36f2;
  border: 1px solid #d2a76170;
  box-shadow: 0 6px 18px #0008;
  pointer-events: auto;
}
.jr-side-controls button,
.jr-side-report-retry {
  display: block;
  color: #fff0d2;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: .72rem;
  line-height: 1.7;
  cursor: pointer;
  padding: 3px 7px;
}
.jr-side-controls button:disabled {
  opacity: .65;
  cursor: default;
}
@media (max-width: 560px) {
  .journey-layer .jr-side-announcer {
    top: 39%;
  }
  .jr-side-speaker {
    width: 59px;
    min-width: 59px;
    height: 70px;
    margin-left: -7px;
    border-radius: 0 15px 15px 0;
  }
  .jr-side-speaker-face {
    width: 38px;
    height: 38px;
  }
  .jr-side-speaker-face svg {
    width: 23px;
    height: 23px;
  }
  .jr-side-hanger {
    left: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-layer .jr-side-announcer * {
    animation: none !important;
  }
}
.admin-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}
.admin-side {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid #48606b;
  border-radius: 20px;
  background: #0b1c2c;
}
.admin-shell .admin-side button {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #d8e8f0;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: start;
}
.admin-shell .admin-side button[data-active=true] {
  background:
    linear-gradient(
      135deg,
      #efd1a1,
      #c99a52);
  color: #1a1205;
  border-color: #efd1a1;
  font-weight: 800;
}
.admin-side button:focus-visible,
.ov-actions button:focus-visible {
  outline: 3px solid #57dbf4;
  outline-offset: 2px;
}
.admin-main {
  min-width: 0;
}
.admin-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #efd1a1;
  font-size: 1.4rem;
}
.admin-stack {
  display: grid;
  gap: 18px;
  max-width: 900px;
}
.admin-stack > section,
.ov {
  padding: 22px;
  border-radius: 21px;
  border: 1px solid #48606b;
  background:
    linear-gradient(
      140deg,
      #0f2940,
      #0b1c2c);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-main .admin-grid {
  margin-top: 0;
}
.ov h2,
.ov h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #efd1a1;
  margin: 6px 0 0;
}
.ov-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ov-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 15px;
  background: #071927;
  border: 1px solid #355166;
}
.ov-tile small {
  color: #a1c9d8;
}
.ov-tile strong {
  font-size: 2rem;
  color: #fff;
}
.ov-tile span {
  font-size: .78rem;
  color: #a1c9d8;
}
.ov-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.admin-shell .ov-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  font-size: 1.05rem;
}
.ov-alerts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.ov-alerts li {
  padding: 10px 14px;
  border-radius: 12px;
  background: #3a1d24;
  border: 1px solid #fa6e7d;
  color: #ffd5d9;
}
.ov-ok {
  color: #9fe3b4;
  margin: 0;
}
.ov-rooms,
.ov-recent,
.ov-health {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ov-rooms li,
.ov-recent li,
.ov-health li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #071927;
  border: 1px solid #355166;
}
.ov-recent li span {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-side {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    border-radius: 16px;
  }
  .admin-shell .admin-side button {
    width: auto;
    flex: none;
    white-space: nowrap;
  }
  .admin-grid-2 {
    grid-template-columns: 1fr;
  }
}
.live-overlay {
  position: fixed;
  inset: 12px 12px auto 12px;
  z-index: 95;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.live-overlay > * {
  pointer-events: auto;
  width: min(560px, 100%);
}
.live-overlay .lesson-announcement,
.live-overlay .live-sound {
  background: #052754f2;
  border: 1px solid #6cc6ee;
  font-size: .95rem;
  box-shadow: 0 14px 40px #000a;
}
.live-overlay .lesson-announcement strong {
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.chat-dock {
  position: fixed;
  inset-inline-start: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--body,inherit);
  pointer-events: none;
}
.chat-dock > * {
  pointer-events: auto;
}
.chat-dock-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid #f3d79c;
  background: #0d2c4d;
  color: #fff4d8;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 10px 30px #000a;
  cursor: pointer;
}
.chat-dock-toggle:focus-visible,
.chat-dock-close:focus-visible {
  outline: 3px solid #57dbf4;
  outline-offset: 2px;
}
.bn-link {
  position: relative;
}
.smi-nav-unread {
  position: absolute;
  top: 1px;
  inset-inline-end: 14%;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e2384a;
  color: #fff;
  font:
    700 10px/1 Cairo,
    system-ui,
    sans-serif;
  pointer-events: none;
}
.smi-nav-unread:empty {
  opacity: 0;
}
.chat-dock-badge {
  position: absolute;
  top: -8px;
  inset-inline-end: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e2384a;
  color: #fff;
  font-size: .8rem;
}
.chat-dock-panel {
  position: relative;
  width: min(320px, calc(100vw - 24px));
  max-height: min(60dvh, 460px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  box-shadow: 0 18px 50px #000c;
}
.chat-dock-panel[hidden] {
  display: none;
}
.chat-dock-panel .room-chat {
  background: #081a30;
  border: 2px solid #f3d79c;
  max-height: inherit;
  min-height: 0;
}
.chat-dock-panel .chat-list {
  max-height: 30dvh;
  overflow-y: auto;
}
.chat-dock-close {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #8a6d3c;
  background: #12304a;
  color: #f3d79c;
  padding: 0;
  cursor: pointer;
}
.room-chat h3 {
  padding-inline-end: 40px;
}
.room-chat .chat-state {
  margin: 0;
  font-size: .8rem;
  color: #9fc3d6;
}
.room-chat .chat-state[data-kind=error] {
  color: #ffc4c4;
}
@media (max-width: 640px) {
  .chat-dock-panel {
    width: calc(100vw - 24px);
    max-height: 70dvh;
  }
  .chat-dock-panel .chat-list {
    max-height: 34dvh;
  }
  .live-overlay {
    inset-block-start: calc(8px + env(safe-area-inset-top));
  }
}
.leave-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 8, 18, .78);
  backdrop-filter: blur(4px);
}
.leave-dialog {
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 24px;
  border: 2px solid #f3d79c;
  background:
    linear-gradient(
      160deg,
      #0f2f52,
      #071a30);
  color: #fff4d8;
  box-shadow: 0 30px 80px #000;
}
.leave-dialog h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.4rem;
  color: #f3d79c;
}
.leave-dialog p {
  margin: 0;
}
.leave-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid #48708f;
  background: #0d2c4d;
  color: #fff;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.leave-opt span {
  display: grid;
  gap: 3px;
}
.leave-opt b {
  font-size: 1.05rem;
}
.leave-opt small {
  color: #bcd3e3;
  line-height: 1.6;
}
.leave-opt:focus-visible {
  outline: 3px solid #57dbf4;
  outline-offset: 2px;
}
.leave-opt.danger {
  border-color: #fa6e7d;
  background: #3a1d24;
}
.leave-note {
  font-size: .8rem;
  color: #9fc3d6;
}
.mic-resume {
  z-index: 5;
}
.mic-resume button {
  min-height: 46px;
}
.mini-inpage {
  position: fixed;
  inset-inline-end: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 97;
  width: min(330px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 2px solid #f3d79c;
  background: #071a30;
  color: #fff4d8;
  box-shadow: 0 18px 50px #000c;
}
.mini-call {
  display: grid;
  gap: 8px;
  text-align: center;
}
.mini-mic {
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
.mini-call[data-tone=lost] .mini-mic,
.mini-call[data-tone=muted] .mini-mic {
  color: #ffb4bc;
}
.mini-timer {
  font-size: 1.6rem;
}
.mini-inpage button {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid #f3d79c;
  background: #12304a;
  color: #f3d79c;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.mini-note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.6;
  color: #bcd3e3;
}
@media (max-width: 640px) {
  .mini-inpage {
    inset-inline: 12px;
    width: auto;
    bottom: 76px;
  }
}
.journey-layer .jr-card.jr-sheet {
  color: #f7fbff;
  background:
    linear-gradient(
      158deg,
      #123566 0%,
      #081a3a 70%,
      #06132d 100%);
  border: 1px solid rgba(245, 204, 123, .67);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 30px 80px #000a;
}
.journey-layer .jr-sheet h2 {
  color: #fff;
  font-weight: 800;
}
.journey-layer .jr-sheet-item {
  color: #f7fbff;
  background:
    linear-gradient(
      140deg,
      rgba(48, 88, 150, .58),
      rgba(8, 28, 70, .85));
  border-color: rgba(175, 209, 255, .39);
}
.journey-layer .jr-sheet-item:disabled {
  opacity: .81;
}
.journey-layer .jr-sheet-item:focus-visible {
  outline: 2px solid #e9bb6e;
  outline-offset: 2px;
}
.journey-layer .jr-sheet-state {
  color: #f8db9b;
  font-weight: 750;
}
.journey-layer .jr-sheet-state b {
  color: #fff;
}
.journey-layer .jr-sheet-name {
  font-weight: 800;
  color: #fff;
}
.journey-layer .jr-side-announcer {
  max-width: min(290px, calc(100vw - 16px));
}
.jr-side-description {
  position: absolute;
  top: 12px;
  left: 78px;
  display: block;
  width: 205px;
  max-width: calc(100vw - 98px);
  padding: 9px 12px;
  border: 1px solid rgba(225, 190, 125, .43);
  border-radius: 0 13px 13px 0;
  background: rgba(9, 24, 49, .93);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .3);
  color: #f9eddb;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.65;
  text-align: right;
  pointer-events: none;
}
@media (max-width: 560px) {
  .jr-side-description {
    top: 11px;
    left: 55px;
    width: 154px;
    max-width: calc(100vw - 75px);
    font-size: .65rem;
    line-height: 1.55;
    padding: 6px 8px;
  }
}

/* src/client/miyto-approved-mobile-20261103.css */
@media (max-width: 699.98px) {
  body:has(.app.app[data-mode=room]) {
    --m3-night:#04112d;
    --m3-navy:#071b43;
    --m3-blue:#1554bd;
    --m3-cyan:#3ad4ff;
    --m3-gold:#f3d58f;
    --m3-text:#f0f5ff;
  }
  .app.app[data-mode=room] .topbar {
    background:
      linear-gradient(
        175deg,
        #061834,
        #031330) !important;
    border-bottom: 1px solid rgba(68, 166, 252, .30) !important;
  }
  .app.app[data-mode=room] .topbar-brand .smi-topbar-official-logo {
    border: 1px solid #f0d391 !important;
    box-shadow: 0 0 0 2px #205a9e, 0 0 12px #2c93eb79 !important;
  }
  .app.app[data-mode=room] .miyto-header-actions {
    border: 1px solid rgba(91, 157, 245, .6) !important;
    background:
      linear-gradient(
        160deg,
        #0a244f,
        #061534) !important;
    box-shadow: inset 0 1px rgba(191, 224, 255, .2), 0 3px 11px #00112b6b !important;
  }
  .app.app[data-mode=room] .miyto-theme-toggle svg[data-active=true] {
    background:
      linear-gradient(
        148deg,
        #4099ff,
        #1247c5) !important;
    box-shadow: 0 0 12px #279eff85 !important;
  }
  .app.app[data-mode=room] .room-header-exit {
    border: 1px solid #ff8897 !important;
    background:
      linear-gradient(
        150deg,
        #ff5367,
        #da1644) !important;
    box-shadow: inset 0 1px #ffdeea87, 0 6px 15px #c01a4c78 !important;
  }
  .app.app[data-mode=room] .miyto-mobile-status > span {
    border: 1px solid rgba(92, 166, 240, .36) !important;
    background:
      linear-gradient(
        154deg,
        #12335d,
        #071a3c) !important;
    box-shadow: inset 0 1px rgba(205, 230, 255, .15), 0 3px 8px #00112460 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room {
    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(25, 98, 198, .40),
        transparent 66%),
      radial-gradient(
        ellipse at 50% -8%,
        rgba(28, 99, 164, .32),
        transparent 58%),
      linear-gradient(
        168deg,
        #071b3d 0%,
        #061638 54%,
        #03122d 100%) !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room::before {
    background: none !important;
    filter: none !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ornaments {
    opacity: .15 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room #tiles.studio-members {
    position: relative !important;
    z-index: 2 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent]:not([data-discussion=true]) .studio-room #tiles.studio-members .pod {
    border-radius: 21px !important;
    background:
      linear-gradient(
        161deg,
        #103665,
        #061836 80%) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 7px 19px rgba(0, 8, 25, .75) !important;
    padding: 7px 6px 9px !important;
  }
  .app.app[data-mode=room][data-tab][data-silent]:not([data-discussion=true]) .studio-room #tiles.studio-members .pod[data-self=true] {
    border: 2px solid #f0cd81 !important;
    box-shadow:
      inset 0 1px #ffffff2a,
      0 0 13px #f0c77570,
      0 9px 18px #0009 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent]:not([data-discussion=true]) .studio-room #tiles.studio-members .pod:not([data-self=true]) {
    border: 2px solid #3ad3ff !important;
    box-shadow:
      inset 0 1px #ffffff29,
      0 0 13px #18baff70,
      0 9px 18px #0009 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room #tiles.studio-members .pod .pod-portrait {
    background:
      radial-gradient(
        ellipse at 50% 20%,
        #1b589b,
        #0a2151 76%) !important;
    box-shadow: inset 0 1px #c6e9ff3b, 0 0 0 1px #b8dfff5b !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room #tiles.studio-members .pod .pod-name {
    color: #f6f7fc !important;
    text-shadow: 0 1px 3px #00122c !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room #tiles.studio-members .pod .pod-tag {
    background:
      linear-gradient(
        150deg,
        #0f3e83,
        #081b40) !important;
    border-color: #45c9eeaa !important;
    color: #b9f1ff !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room #tiles.studio-members .pod[data-self=true] .pod-tag {
    background:
      linear-gradient(
        150deg,
        #705823,
        #34280e) !important;
    border-color: #f2d38c !important;
    color: #ffefc5 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent]:not([data-discussion=true]) .studio-room .studio-ring {
    background:
      linear-gradient(#0a2d64, #071530) padding-box,
      conic-gradient(
        from -8deg,
        #4bd6ff,
        #247dff,
        #f7d988,
        #3774d8) border-box !important;
    border: 4px solid transparent !important;
    box-shadow:
      0 0 0 3px #1d4e95,
      0 0 18px #3e9eff63,
      0 11px 25px #000a !important;
  }
  .app.app[data-mode=room][data-tab][data-silent]:not([data-discussion=true]) .studio-room .studio-large-time strong {
    color: #f8d991 !important;
    text-shadow: 0 3px 12px #5e400951 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-controls {
    border-radius: 24px !important;
    background:
      linear-gradient(
        160deg,
        #0c2855,
        #051532) !important;
    border: 1px solid #3775ba9e !important;
    box-shadow: 0 0 0 1px #93ccff1b, 0 7px 16px #0006 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-controls .studio-control {
    background:
      linear-gradient(
        160deg,
        #1459bf,
        #09327c) !important;
    border: 1px solid #64b9ff !important;
    box-shadow: inset 0 1px #c4eaff78, 0 3px 9px #06132e !important;
    color: white !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-controls .studio-control:disabled {
    background:
      linear-gradient(
        145deg,
        #183753,
        #0d2c48) !important;
    border-color: #50809b9e !important;
    color: #a9c0cd !important;
    box-shadow: none !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-training-guidance {
    background:
      linear-gradient(
        160deg,
        #12264b,
        #081936) !important;
    border: 1px solid #dcb97c8f !important;
    box-shadow: inset 0 1px #f9e8bb1a, 0 4px 12px #00122e85 !important;
    color: #e9efff !important;
  }
  .app.app[data-mode=room] .bottom-nav {
    background:
      linear-gradient(
        165deg,
        #0b244b,
        #06132e) !important;
    border-top: 1px solid #3971a7a8 !important;
    box-shadow: 0 -5px 16px #0006 !important;
  }
  .app.app[data-mode=room] .bn-link[data-active=true] {
    border: 1px solid #f3d388 !important;
    background:
      linear-gradient(
        150deg,
        #1a64cc,
        #0b398b) !important;
    color: #fff1c7 !important;
    box-shadow: inset 0 1px #d0ebff88, 0 0 11px #2f83f59c !important;
  }
  .journey-layer .jr-modal:has(.jr-form) {
    background: rgba(0, 7, 22, .92) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  .journey-layer .jr-modal:has(.jr-form) > .jr-card {
    position: relative !important;
    box-sizing: border-box !important;
    width: min(100%, 410px) !important;
    max-width: 410px !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 42px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 28px clamp(17px, 5vw, 28px) 22px !important;
    margin: auto !important;
    border: 1.5px solid #4fd7ff !important;
    border-radius: 29px !important;
    background:
      radial-gradient(
        ellipse at 50% -22%,
        #195b9d75,
        transparent 55%),
      linear-gradient(
        160deg,
        #0b2b58,
        #07183b 63%,
        #091832) !important;
    box-shadow:
      inset 0 1px #b5ecff44,
      0 0 0 1px #e5bd764f,
      0 14px 42px #000d,
      0 0 18px #259fe63b !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-heading {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0 0 22px !important;
    text-align: center;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-icon {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 2px solid #f5d78a;
    border-radius: 19px;
    background:
      linear-gradient(
        145deg,
        #2066c6,
        #061a43);
    color: #f8e4ac;
    box-shadow: 0 0 14px #47b6f85e, inset 0 1px #c7e4ff55;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-heading h2 {
    margin: 8px 0 0 !important;
    font: 850 clamp(23px, 6.6vw, 30px)/1.5 Cairo, system-ui !important;
    color: #f7d78d !important;
    text-shadow: 0 2px 8px #0a1638 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-heading p {
    margin: 0 !important;
    font: 600 12px/1.6 Cairo, system-ui !important;
    color: #c8d7ee !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-results > .jr-hint {
    display: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form > label {
    display: block !important;
    font: 800 14px/1.5 Cairo, system-ui !important;
    color: #edf7ff !important;
    margin: 0 3px -5px !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-label {
    display: inline !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-desktop-label {
    display: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form .jr-input-row {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 9px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 9px 11px !important;
    border: 1px solid #417db9a8 !important;
    border-radius: 17px !important;
    background: linear-gradient(#12345f, #0a2149) !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form .jr-input-row:has(> button) {
    margin-top: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row:not(:has(> label)) > input {
    grid-column: 1/3 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row:not(:has(> label)) > span {
    grid-column: 3 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row > label {
    color: #eef4ff !important;
    font: 750 13px/1.4 Cairo, system-ui !important;
    margin-inline-start: 4px !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    font: 800 24px/1 system-ui !important;
    text-align: center !important;
    color: #f4f8ff !important;
    border-radius: 13px !important;
    border: 1px solid #c0a67691 !important;
    background: #06132d !important;
    box-shadow: inset 0 2px 9px #0005 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row > span {
    flex: none !important;
    font-weight: 700 !important;
    color: #a9dbfa !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form .jr-input-row:has(> button) {
    display: flex !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form .jr-btn-gold {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    border: 1px solid #fff0bc !important;
    background:
      linear-gradient(
        175deg,
        #f9e4b0,
        #c5953e) !important;
    color: #071e43 !important;
    font: 850 18px/1.3 Cairo, system-ui !important;
    box-shadow: inset 0 1px white, 0 4px 17px #dba84e6c !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form > .jr-btn-quiet {
    width: 100% !important;
    min-height: 45px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background:
      linear-gradient(
        165deg,
        #152b4b,
        #071833) !important;
    border: 1px solid #6482a6 !important;
    color: #e7efff !important;
    font: 750 16px/1.3 Cairo, system-ui !important;
    box-shadow: none !important;
  }
  .journey-layer .jr-form[data-result-state=idle] > .jr-hint {
    display: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form > .jr-hint {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #d7e6ff !important;
  }
  .journey-layer .jr-modal:has(.jr-form) :is(input, button):focus-visible {
    outline: 2px solid #63d6ff !important;
    outline-offset: 2px !important;
  }
}
@media (min-width: 700px) {
  .journey-layer .jr-mobile-result-heading {
    display: none !important;
  }
  .journey-layer .jr-mobile-label {
    display: none !important;
  }
  .journey-layer .jr-desktop-label {
    display: inline !important;
  }
}
@media (max-width: 699.98px) and (prefers-reduced-motion: reduce) {
  .journey-layer .jr-modal:has(.jr-form) *,
  .app.app[data-mode=room] .studio-room * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 699.98px) {
  .app.app[data-mode=room][data-theme=light] .topbar {
    background:
      linear-gradient(
        160deg,
        #f8fbff,
        #e3efff) !important;
    border-bottom: 1px solid #a5c4e5 !important;
  }
  .app.app[data-mode=room][data-theme=light] .miyto-header-actions {
    background: linear-gradient(#fff, #e6f0ff) !important;
    border-color: #81b3ed !important;
  }
  .app.app[data-mode=room][data-theme=light] .miyto-mobile-status > span {
    background: linear-gradient(#fff, #e8f1ff) !important;
    border-color: #c4dbf5 !important;
    color: #16365d !important;
  }
  .app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room {
    background:
      radial-gradient(
        ellipse at center,
        #d6e8ff,
        #edf3ff 65%,
        #d6e6fb) !important;
  }
  .app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room #tiles.studio-members .pod {
    background: linear-gradient(#fff, #eaf2ff) !important;
    color: #16315d !important;
  }
  .app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room #tiles.studio-members .pod .pod-name {
    color: #133e75 !important;
    text-shadow: none !important;
  }
  .app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room .studio-training-guidance {
    background: linear-gradient(#fff, #eaf1ff) !important;
    color: #19385f !important;
  }
  .app.app[data-mode=room][data-theme=light] .bottom-nav {
    background: linear-gradient(#fbfdff, #deebff) !important;
    border-top-color: #b5cfef !important;
  }
  .app.app[data-mode=room][data-theme=light] .bn-link:not([data-active=true]) {
    color: #1b3e72 !important;
  }
  .app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room .studio-controls {
    background: linear-gradient(#eef5ff, #dceaff) !important;
    border-color: #a8c9ee !important;
  }
  .app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room .studio-controls .studio-control:disabled {
    background: linear-gradient(#e8eff7, #c9d9e9) !important;
    color: #46617d !important;
  }
}

/* src/client/miyto-approved-panels-20261103.css */
.app.app[data-mode=room] .studio-room .room-dashboard-questions,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-dashboard-questions {
  position: relative !important;
  isolation: isolate !important;
  gap: clamp(10px, 1.3vw, 17px) !important;
  border: 2px solid #38c8f4 !important;
  border-radius: clamp(20px, 2.1vw, 30px) !important;
  padding: clamp(13px, 2.25vw, 30px) !important;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(20, 105, 188, .33),
      transparent 65%),
    linear-gradient(
      160deg,
      #0b3166,
      #081a3e 64%,
      #071835) !important;
  box-shadow:
    inset 0 1px rgba(188, 233, 255, .24),
    0 8px 28px rgba(0, 8, 31, .45),
    0 0 16px rgba(31, 145, 236, .21) !important;
}
.app.app[data-mode=room] .studio-room .room-dashboard-heading,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-dashboard-heading {
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid rgba(184, 215, 255, .22) !important;
}
.app.app[data-mode=room] .studio-room .room-dashboard-heading h2,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-dashboard-heading h2 {
  flex: 0 1 auto !important;
  font: 800 clamp(19px, 2.2vw, 31px)/1.5 Cairo, system-ui !important;
  color: #f4d796 !important;
  text-align: center !important;
}
.app.app[data-mode=room] .studio-room .room-dashboard-heading svg,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-dashboard-heading svg {
  color: #f6dda4 !important;
  width: clamp(21px, 2.4vw, 30px) !important;
  height: clamp(21px, 2.4vw, 30px) !important;
}
.app.app[data-mode=room] .studio-room .room-dashboard-heading > span,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-dashboard-heading > span {
  border: 1px solid #dcbf7c8f !important;
  background: linear-gradient(#102d58, #06162f) !important;
  color: #f7d99e !important;
  font-size: 12px !important;
}
.app.app[data-mode=room] .studio-room .room-lesson-header,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-lesson-header {
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.app.app[data-mode=room] .studio-room .room-lesson-count,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-lesson-count {
  padding: 6px 18px !important;
  border-radius: 999px !important;
  border: 1px solid #f4d78b !important;
  color: #fbe3ab !important;
  background:
    linear-gradient(
      170deg,
      #0e316b,
      #061830) !important;
  box-shadow: 0 0 9px #f6d48b25 !important;
  font-size: clamp(13px, 1.2vw, 17px) !important;
}
.app.app[data-mode=room] .studio-room .room-question-focus,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-focus {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: clamp(174px, 20dvh, 300px) !important;
  padding: clamp(18px, 2.9vw, 40px) !important;
  margin: 0 !important;
  border: 2px solid #42d1f8 !important;
  border-inline-start: 2px solid #42d1f8 !important;
  border-radius: clamp(18px, 2.6vw, 29px) !important;
  background:
    radial-gradient(
      ellipse at 50% -30%,
      #2075bd55,
      transparent 78%),
    linear-gradient(
      155deg,
      #104d91,
      #092452 65%,
      #0a2048) !important;
  box-shadow:
    inset 0 1px #d4f3ff45,
    0 0 0 1px #3abaff18,
    0 7px 28px #00152b8c,
    0 0 18px #42c8ff4d !important;
  overflow-wrap: anywhere !important;
}
.app.app[data-mode=room] .studio-room .room-question-focus > span,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-focus > span {
  align-self: center !important;
  display: block !important;
  width: fit-content !important;
  margin: 0 0 12px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: #071a40da !important;
  border: 1px solid #ddbf70 !important;
  font: 800 clamp(12px, 1.05vw, 15px)/1.25 Cairo, system-ui !important;
  color: #fff0c9 !important;
  letter-spacing: .04em !important;
  text-align: center !important;
}
.app.app[data-mode=room] .studio-room .room-question-focus p,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-focus p {
  color: #ffdfa0 !important;
  font: 750 clamp(20px, 2.2vw, 34px)/1.5 Cairo, system-ui !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  text-wrap: pretty;
  max-width: 100% !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px #031532 !important;
}
.app.app[data-mode=room] .studio-room .room-question-preview-list,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-preview-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  max-height: none !important;
}
.app.app[data-mode=room] .studio-room .room-question-preview-list button,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-preview-list button {
  width: 100% !important;
  min-height: 56px !important;
  padding: 10px clamp(11px, 1.45vw, 20px) !important;
  border: 1px solid rgba(123, 181, 237, .51) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(
      160deg,
      #163966,
      #0c264d) !important;
  color: #e8f2ff !important;
  box-shadow: inset 0 1px #aedcff17 !important;
  font: 700 clamp(13px, 1.17vw, 17px)/1.5 Cairo, system-ui !important;
}
.app.app[data-mode=room] .studio-room .room-question-preview-list button:focus-visible,
.app.app[data-mode=room] .studio-room .room-question-nav button:focus-visible {
  outline: 3px solid #f4d58e !important;
  outline-offset: 3px !important;
}
.app.app[data-mode=room] .studio-room .room-question-preview-list button:hover {
  border-color: #53cfff !important;
  background: #194674 !important;
}
.app.app[data-mode=room] .studio-room .room-question-preview-list button b,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-preview-list button b {
  border: 1px solid #4b9fd2 !important;
  border-radius: 50% !important;
  background: #092c56 !important;
  color: #e3f4ff !important;
}
.app.app[data-mode=room] .studio-room .room-question-nav,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-nav {
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.app.app[data-mode=room] .studio-room .room-question-nav > button,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-nav > button {
  min-height: 48px !important;
  min-width: 112px !important;
  border-radius: 999px !important;
  border: 1px solid #5fc5f2 !important;
  background:
    linear-gradient(
      160deg,
      #1d5f9a,
      #0a2a59) !important;
  color: #eaf5ff !important;
  box-shadow: 0 4px 12px #02132f88 !important;
  font: 800 clamp(13px, 1.2vw, 17px)/1.2 Cairo, system-ui !important;
}
.app.app[data-mode=room] .studio-room .room-question-nav > button:last-child,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-nav > button:last-child {
  border-color: #ffe9b2 !important;
  background:
    linear-gradient(
      160deg,
      #ffe4a3,
      #c99746) !important;
  color: #0e2b52 !important;
  box-shadow: 0 4px 14px #dcae5c58 !important;
}
.app.app[data-mode=room] .studio-room .room-question-dots button[aria-current=step],
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-question-dots button[aria-current=step] {
  background:
    linear-gradient(
      165deg,
      #f6d78f,
      #b48a44) !important;
  color: #071c40 !important;
  border-color: #fae1a1 !important;
}
.app.app[data-mode=room] .studio-room .room-show-all,
body:has(.app.app[data-mode=room]) .silent-questions-panel .room-show-all {
  background: transparent !important;
  border: 1px solid #427baa !important;
  color: #badfff !important;
}
@media (max-width: 699.98px) {
  .app.app[data-mode=room] .studio-room .room-dashboard-questions {
    gap: 9px !important;
    padding: 13px !important;
    border-radius: 22px !important;
  }
  .app.app[data-mode=room] .studio-room .room-question-focus {
    min-height: 200px !important;
    padding: 17px 13px !important;
    border-radius: 18px !important;
  }
  .app.app[data-mode=room] .studio-room .room-question-focus p {
    font-size: clamp(18px, 4.4vw, 23px) !important;
    line-height: 1.65 !important;
  }
  .app.app[data-mode=room] .studio-room .room-question-preview-list {
    display: none !important;
  }
  .app.app[data-mode=room] .studio-room .room-question-nav > button {
    min-width: 0 !important;
    min-height: 44px !important;
  }
  .app.app[data-mode=room] .studio-room .room-lesson-header {
    display: none !important;
  }
}
@media (min-width: 700px) {
  .journey-layer .jr-modal:has(.jr-form) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 24px !important;
    background: rgba(1, 9, 28, .82) !important;
    overflow-y: auto !important;
    z-index: 15 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) > .jr-card {
    box-sizing: border-box !important;
    width: min(610px, 100%) !important;
    max-width: 610px !important;
    max-height: calc(100dvh - 48px) !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    margin: auto !important;
    padding: 31px clamp(28px, 4vw, 44px) 30px !important;
    border: 2px solid #4bd3ff !important;
    border-radius: 34px !important;
    background:
      radial-gradient(
        ellipse at 50% -25%,
        rgba(45, 134, 227, .43),
        transparent 58%),
      linear-gradient(
        165deg,
        #0b326a,
        #071c45 55%,
        #061735) !important;
    box-shadow:
      inset 0 1px #f4fcff4f,
      0 0 0 1px #d9b36e99,
      0 22px 68px #000d,
      0 0 30px #1a9ae86b !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-results > .jr-hint {
    display: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-icon {
    display: grid !important;
    place-items: center !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 0 4px !important;
    color: #ffe5a2 !important;
    background:
      linear-gradient(
        155deg,
        #286dda,
        #082451) !important;
    border: 2px solid #ffe3a1 !important;
    border-radius: 23px !important;
    box-shadow: inset 0 1px #f7fcff75, 0 0 19px #46bdfd65 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-heading h2 {
    font: 850 clamp(27px, 3vw, 36px)/1.35 Cairo, system-ui !important;
    color: #ffde9a !important;
    margin: 0 !important;
    text-shadow: 0 3px 9px #071226 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-result-heading p {
    font: 650 17px/1.5 Cairo, system-ui !important;
    color: #bcd5f9 !important;
    margin: 0 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-desktop-label {
    display: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-mobile-label {
    display: inline !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form > label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 -10px !important;
    font: 750 15px/1.35 Cairo, system-ui !important;
    color: #d6eaff !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 10px 15px !important;
    border-radius: 18px !important;
    border: 1px solid #4499d4 !important;
    background:
      linear-gradient(
        145deg,
        #133d72,
        #0a2953) !important;
    box-shadow: inset 0 1px #d5f2ff33 !important;
    margin: 0 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row > label {
    font: 750 17px/1.4 Cairo, system-ui !important;
    color: #f2f7ff !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row input {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    border: 1px solid #e7c783 !important;
    background: #061735 !important;
    box-shadow: inset 0 2px 11px #0008 !important;
    color: #f7faff !important;
    text-align: center !important;
    font: 850 26px/1 system-ui !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row:not(:has(> label)) > input {
    grid-column: 1/3 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row:not(:has(> label)) > span {
    grid-column: 3 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row > span {
    color: #c5dfff !important;
    font-size: 17px !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-input-row:has(> button) {
    display: flex !important;
    min-height: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin-top: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-btn-gold {
    width: 100% !important;
    min-height: 62px !important;
    border-radius: 999px !important;
    border: 1px solid #fff0c3 !important;
    background:
      linear-gradient(
        170deg,
        #ffe5ad,
        #d09a46) !important;
    color: #071f46 !important;
    font: 850 22px/1.3 Cairo, system-ui !important;
    box-shadow: inset 0 1px #fff, 0 5px 18px #e0a74c56 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-btn-gold:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form > .jr-btn-quiet {
    width: 76% !important;
    align-self: center !important;
    min-height: 53px !important;
    border-radius: 999px !important;
    border: 1px solid #88b4dd !important;
    background:
      linear-gradient(
        160deg,
        #15345f,
        #081d3e) !important;
    color: #e9f4ff !important;
    font: 750 18px/1.2 Cairo, system-ui !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form > .jr-hint {
    color: #bcd8fb !important;
    line-height: 1.55 !important;
    font-size: 13px !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .journey-layer .jr-modal:has(.jr-form) .jr-form[data-result-state=idle] > .jr-hint:empty {
    display: none !important;
  }
  .journey-layer .jr-modal:has(.jr-form) :is(input, button):focus-visible {
    outline: 3px solid #70d9ff !important;
    outline-offset: 3px !important;
  }
}
@media (max-width: 699.98px) {
}
body:has(.app[data-mode=room][data-theme=light]) .studio-room .room-dashboard-questions,
body:has(.app[data-mode=room][data-theme=light]) .silent-questions-panel .room-dashboard-questions {
  background:
    linear-gradient(
      170deg,
      #fff,
      #e9f2ff) !important;
  border-color: #2c9cd0 !important;
  box-shadow: 0 9px 24px #0b366124 !important;
}
body:has(.app[data-mode=room][data-theme=light]) .studio-room .room-dashboard-heading h2,
body:has(.app[data-mode=room][data-theme=light]) .silent-questions-panel .room-dashboard-heading h2 {
  color: #704c0e !important;
}
body:has(.app[data-mode=room][data-theme=light]) .studio-room .room-question-focus,
body:has(.app[data-mode=room][data-theme=light]) .silent-questions-panel .room-question-focus {
  background:
    linear-gradient(
      155deg,
      #e7f3ff,
      #d7e9ff) !important;
  border-color: #2b8bc7 !important;
}
body:has(.app[data-mode=room][data-theme=light]) .studio-room .room-question-focus p,
body:has(.app[data-mode=room][data-theme=light]) .silent-questions-panel .room-question-focus p {
  color: #123f79 !important;
  text-shadow: none !important;
}
body:has(.app[data-mode=room][data-theme=light]) .studio-room .room-question-preview-list button {
  background: linear-gradient(#fff, #e8f1ff) !important;
  color: #183d70 !important;
}
@media (min-width: 700px) {
  body:has(.app[data-mode=room][data-theme=light]) .journey-layer .jr-modal:has(.jr-form) > .jr-card {
    background:
      linear-gradient(
        160deg,
        #fff,
        #eef5ff) !important;
    border-color: #368ed4 !important;
  }
  body:has(.app[data-mode=room][data-theme=light]) .journey-layer .jr-mobile-result-heading h2 {
    color: #8c641f !important;
    text-shadow: none !important;
  }
  body:has(.app[data-mode=room][data-theme=light]) .journey-layer .jr-mobile-result-heading p {
    color: #3b5d83 !important;
  }
  body:has(.app[data-mode=room][data-theme=light]) .journey-layer .jr-input-row {
    background: #edf5ff !important;
    border-color: #8ebadf !important;
  }
  body:has(.app[data-mode=room][data-theme=light]) .journey-layer .jr-input-row > label {
    color: #183a6b !important;
  }
  body:has(.app[data-mode=room][data-theme=light]) .journey-layer .jr-form > label {
    color: #31527d !important;
  }
}

/* src/client/miyto-owner-restore-mobile-timer-results-20261106.css */
@media (max-width: 899.98px) {
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-panel .studio-timer-stage-badge {
    display: none !important;
  }
}
.app.app[data-mode=room][data-theme=light] .studio-room :is(.studio-current-round, .studio-current-round b, .studio-silent-label, .studio-silent-label *, .studio-stage-status, .studio-stage-status-text, .studio-standby-tag, .studio-standby h2, .studio-standby p, .studio-phase-tile b, .studio-phase-tile span, .studio-round-details, .studio-round-details bdi, .studio-training-guidance, .studio-training-guidance strong) {
  color: #0c3065 !important;
  -webkit-text-fill-color: #0c3065 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
.app.app[data-mode=room][data-theme=dark] .studio-room :is(.studio-current-round, .studio-current-round b, .studio-silent-label, .studio-silent-label *, .studio-stage-status, .studio-stage-status-text, .studio-standby-tag, .studio-standby h2, .studio-standby p, .studio-phase-tile b, .studio-phase-tile span, .studio-round-details, .studio-round-details bdi, .studio-training-guidance, .studio-training-guidance strong) {
  color: #f5faff !important;
  -webkit-text-fill-color: #f5faff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
.app.app[data-mode=room][data-tab] .studio-room :is(.studio-silent-label, .studio-stage-status-text, .studio-phase-tile b) {
  font-weight: 900 !important;
  line-height: 1.4 !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}
.app.app[data-mode=room][data-theme=light] .studio-room .studio-ring-core :is(.studio-current-round, .studio-current-round b, small) {
  color: #10356a !important;
  -webkit-text-fill-color: #10356a !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
.app.app[data-mode=room][data-theme=dark] .studio-room .studio-ring-core :is(.studio-current-round, .studio-current-round b, small) {
  color: #f5faff !important;
  -webkit-text-fill-color: #f5faff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) {
  position: fixed !important;
  inset: auto 0 auto 0 !important;
  top: var(--miyto-jr-visual-top,0px) !important;
  width: 100% !important;
  height: var(--miyto-jr-visual-height,100dvh) !important;
  max-height: var(--miyto-jr-visual-height,100dvh) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: safe center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 10002 !important;
}
html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) > .jr-card.jr-sheet {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  translate: none !important;
  transform: none !important;
  animation: none !important;
  align-self: center !important;
  flex: none !important;
  margin: auto !important;
  box-sizing: border-box !important;
  width: min(100%, 520px) !important;
  min-width: 0 !important;
  max-width: min(520px, calc(100vw - 24px)) !important;
  max-height: calc(var(--miyto-jr-visual-height,100dvh) - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: clamp(15px, 3vw, 24px) !important;
  scrollbar-width: thin !important;
}
html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) .jr-sheet-item {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) > .jr-sheet > button:last-child {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  align-self: stretch !important;
  min-height: 44px !important;
}
body:has(.app.app[data-mode=room][data-theme=light]) .journey-layer .jr-modal:has(> .jr-sheet) :is(h2, .jr-sheet-name, .jr-sheet-item, .jr-sheet-state) {
  color: #103665 !important;
  -webkit-text-fill-color: #103665 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
body:has(.app.app[data-mode=room][data-theme=dark]) .journey-layer .jr-modal:has(> .jr-sheet) :is(h2, .jr-sheet-name, .jr-sheet-item, .jr-sheet-state) {
  color: #f4faff !important;
  -webkit-text-fill-color: #f4faff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
@media (max-width: 699.98px) {
  body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) {
    padding: 8px !important;
  }
  html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) > .jr-card.jr-sheet {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(var(--miyto-jr-visual-height,100dvh) - 16px) !important;
    padding: clamp(12px, 3.5vw, 20px) !important;
    border-radius: 20px !important;
  }
  html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) .jr-sheet-item {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
  }
  html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) .jr-sheet-state {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(> .jr-sheet) > .jr-card.jr-sheet {
    animation: none !important;
  }
}

/* src/client/miyto-owner-20261106-polish.css */
#miyto-pip-idle {
  display: none;
}
body[data-miyto-idle-pip=true] {
  background: #e8f4ff !important;
  overflow: hidden !important;
  color-scheme: light !important;
}
body[data-miyto-idle-pip=true] > :not(#miyto-pip-idle) {
  display: none !important;
}
body[data-miyto-idle-pip=true] #miyto-pip-idle {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  gap: clamp(4px, 2dvh, 14px) !important;
  padding: clamp(8px, 5vw, 28px) !important;
  margin: 0 !important;
  text-align: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      ellipse at 50% 18%,
      #ffffff 0%,
      #f2f9ff 35%,
      #d3eaff 100%) !important;
  border: 0 !important;
  color: #0b3568 !important;
  font-family:
    Cairo,
    system-ui,
    sans-serif !important;
}
#miyto-pip-idle img {
  display: block !important;
  box-sizing: border-box !important;
  width: clamp(58px, 37vw, 136px) !important;
  height: clamp(58px, 37vw, 136px) !important;
  max-height: 42dvh !important;
  object-fit: contain !important;
  border-radius: 21px !important;
  box-shadow: 0 8px 23px #0c427439 !important;
}
#miyto-pip-idle strong {
  color: #0b3572 !important;
  font: 900 clamp(17px, 6.5vw, 31px)/1.1 system-ui, sans-serif !important;
  letter-spacing: .07em !important;
}
#miyto-pip-idle button {
  display: block !important;
  flex: none !important;
  width: min(100%, 230px) !important;
  min-height: clamp(33px, 11dvh, 54px) !important;
  max-height: 55px !important;
  margin: 4px 0 0 !important;
  padding: 5px 10px !important;
  background:
    linear-gradient(
      135deg,
      #187af3,
      #09499f) !important;
  color: #fff !important;
  border: 1px solid #42c8f9 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px #ffffff8c, 0 5px 16px #0951ab52 !important;
  font: 850 clamp(12px, 4.2vw, 17px)/1.25 Cairo, system-ui !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
#miyto-pip-idle button:focus-visible {
  outline: 3px solid #f0c675 !important;
  outline-offset: 2px !important;
}
#miyto-pip-idle small {
  color: #42688d !important;
  font: 700 clamp(9px, 2.9vw, 12px)/1.2 Cairo, system-ui !important;
  white-space: nowrap !important;
}
@media (max-height: 320px) {
  #miyto-pip-idle {
    gap: 4px !important;
    padding: 5px !important;
  }
  #miyto-pip-idle img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
  }
  #miyto-pip-idle strong {
    font-size: 15px !important;
  }
  #miyto-pip-idle button {
    min-height: 32px !important;
  }
  #miyto-pip-idle small {
    display: none !important;
  }
}
.app.app[data-mode=room][data-theme=light] .topbar-brand img.smi-topbar-official-logo {
  background: transparent !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
@media (min-width: 900px) {
  .app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-timer-panel:not(.studio-stage-status) {
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    gap: clamp(4px, .7dvh, 8px) !important;
    padding: clamp(3px, .7dvh, 9px) !important;
    isolation: isolate !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-panel .studio-timer-stage-badge {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 5px clamp(10px, 1.4vw, 20px) !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    border: 1px solid #82b9e8 !important;
    color: #123969 !important;
    background:
      linear-gradient(
        180deg,
        #fff,
        #eaf6ff) !important;
    box-shadow: 0 4px 13px #245eb321 !important;
    font: 850 clamp(11px, 1.2vw, 17px)/1.25 Cairo, system-ui !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-stage-badge b {
    color: inherit !important;
    font: inherit !important;
    min-width: 0 !important;
    text-wrap: balance !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-stage-badge svg {
    flex: none !important;
    width: clamp(14px, 1.3vw, 18px) !important;
    height: clamp(14px, 1.3vw, 18px) !important;
    color: #1369bd !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-timer-stage-badge {
    color: #effaff !important;
    background:
      linear-gradient(
        145deg,
        #164a7c,
        #082c59) !important;
    border-color: #56c8fa !important;
    box-shadow: 0 3px 13px #0007 !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-timer-stage-badge svg {
    color: #f8d792 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-panel .studio-silent-label {
    display: none !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-panel .studio-ring {
    position: relative !important;
    isolation: isolate !important;
    width: var(--lx-ring) !important;
    height: var(--lx-ring) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    border: 3px solid #65d6ff !important;
    border-radius: 50% !important;
    margin: 1px auto 3px !important;
    padding: 0 !important;
    background:
      conic-gradient(
        from -90deg,
        #00c3ef 0%,
        #1879e9 calc(var(--ring,0%) * .72),
        #f4cd72 var(--ring,0%),
        rgba(58, 129, 193, .16) var(--ring,0%) 100%) !important;
    box-shadow:
      0 0 0 2px #fff9,
      0 0 0 6px #4faff52e,
      0 11px 26px #1e6fbc38,
      inset 0 1px 4px #fff8 !important;
    transform: none !important;
    animation: none !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-ring {
    border-color: #38cef7 !important;
    box-shadow:
      0 0 0 2px #0d558c,
      0 0 0 6px #21a9e51d,
      0 0 28px #17c9f25c,
      0 12px 28px #0009 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring::after {
    content: "" !important;
    pointer-events: none !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    border: 1px solid #ffffffad !important;
    box-shadow: inset 0 0 12px #5ebbf226 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring-core {
    position: absolute !important;
    inset: clamp(10px, 1.15vw, 14px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 1px solid #a5dbf5 !important;
    background:
      radial-gradient(
        circle at 48% 18%,
        #fff,
        #eff8ff 58%,
        #dcefff) !important;
    box-shadow: inset 0 5px 14px #fff9, inset 0 -7px 17px #4ca1dc26 !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-ring-core {
    border-color: #429fc8 !important;
    background:
      radial-gradient(
        circle at 48% 25%,
        #194c82,
        #092b59 70%,
        #061c3b) !important;
    box-shadow: inset 0 5px 14px #3baeee21, inset 0 -7px 17px #0006 !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring-core .studio-current-round {
    display: none !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring-core > .studio-large-time {
    order: 0 !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #082e69 !important;
    overflow: visible !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring-core .studio-large-time strong {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family:
      Arial,
      "IBM Plex Sans Arabic",
      system-ui,
      sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    font-size: clamp(28px, calc(var(--lx-ring) * .245), 54px) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
    letter-spacing: -.045em !important;
    color: #092f68 !important;
    -webkit-text-fill-color: #092f68 !important;
    text-shadow: 0 2px 6px #fff8 !important;
    white-space: nowrap !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring-core .studio-large-time[data-long=true] strong {
    font-size: clamp(23px, calc(var(--lx-ring) * .18), 43px) !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-large-time strong {
    color: #f3fbff !important;
    -webkit-text-fill-color: #f3fbff !important;
    text-shadow: 0 0 12px #1ebffd5b !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring-core > small {
    order: 1 !important;
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 850 clamp(10px, calc(var(--lx-ring) * .07), 15px)/1.35 Cairo, system-ui !important;
    color: #345f88 !important;
    -webkit-text-fill-color: #345f88 !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-ring-core > small {
    color: #c9e8ff !important;
    -webkit-text-fill-color: #c9e8ff !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-bar {
    min-height: 7px !important;
    height: 7px !important;
    background: #c5dff6 !important;
    border: 1px solid #8cbbdf !important;
    box-shadow: inset 0 1px 3px #194c842e !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-bar i {
    background:
      linear-gradient(
        90deg,
        #e9b96d,
        #248fea,
        #34c7e9) !important;
    border-radius: inherit !important;
  }
  .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-round-details {
    color: #173b68 !important;
    font: 800 clamp(11px, 1vw, 14px)/1.35 Cairo, system-ui !important;
    opacity: 1 !important;
    background: #f8fcff !important;
    border: 1px solid #91bfdf !important;
    padding: 4px 12px !important;
    white-space: normal !important;
    min-height: 0 !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-round-details {
    color: #edfcff !important;
    background: #0a315e !important;
    border-color: #459dcc !important;
  }
  .app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room .studio-round-details bdi {
    color: #f6faff !important;
  }
  @media (min-width: 900px) {
    .app.app[data-mode=room][data-tab][data-silent] .studio-room {
      --lx-ring:clamp(174px,23dvh,216px) !important;
    }
    .app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-timer-panel:not(.studio-stage-status) {
      max-width: 420px !important;
      gap: 5px !important;
    }
    .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-stage-badge {
      max-width: 310px !important;
      padding-block: 4px !important;
    }
  }
  @media (max-width: 899.98px) {
    .app.app[data-mode=room][data-tab][data-silent] .studio-room {
      --lx-ring:clamp(142px,min(43vw,25dvh),195px) !important;
    }
    .app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-timer-panel:not(.studio-stage-status) {
      width: min(100%, 370px) !important;
      height: auto !important;
      max-height: none !important;
      margin: 0 auto !important;
      gap: 6px !important;
      overflow: visible !important;
      padding: 5px 7px !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-stage-badge {
      font-size: clamp(11px, 2.8vw, 14px) !important;
    }
    .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-timer-bar {
      width: min(100%, 260px) !important;
    }
    .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-round-details {
      max-width: 100% !important;
    }
  }
  @media (max-width: 360px) {
    .app.app[data-mode=room][data-tab][data-silent] .studio-room {
      --lx-ring:clamp(132px,min(43vw,24dvh),160px) !important;
    }
    .app.app[data-mode=room][data-tab][data-silent] .studio-room .studio-ring-core .studio-large-time strong {
      font-size: 32px !important;
    }
  }
}
.app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-stage-status {
  opacity: 1 !important;
  filter: none !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-stage-status :is(.studio-stage-status-text, .studio-current-round, .studio-current-round b) {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 900 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  font-size: clamp(17px, 2.1vw, 24px) !important;
  text-wrap: balance !important;
  overflow-wrap: anywhere !important;
}
.app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room > .studio-stage-status {
  color: #0b346c !important;
  background:
    linear-gradient(
      150deg,
      #fff,
      #eaf5ff) !important;
  border: 2px solid #6babe0 !important;
  box-shadow: 0 9px 23px #2662a82d !important;
}
.app.app[data-mode=room][data-theme=light][data-tab][data-silent] .studio-room > .studio-stage-status :is(.studio-stage-status-text, .studio-current-round, .studio-current-round b) {
  color: #0b346c !important;
  -webkit-text-fill-color: #0b346c !important;
}
.app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room > .studio-stage-status {
  color: #f8fbff !important;
  background:
    linear-gradient(
      155deg,
      #124674,
      #061e42) !important;
  border: 2px solid #51c9f6 !important;
  box-shadow: 0 7px 26px #00182b9a !important;
}
.app.app[data-mode=room][data-theme=dark][data-tab][data-silent] .studio-room > .studio-stage-status :is(.studio-stage-status-text, .studio-current-round, .studio-current-round b) {
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
}
.app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-stage-status[data-phase=transition] {
  width: min(100%, 460px) !important;
  max-width: 100% !important;
  min-height: 140px !important;
  padding: clamp(16px, 2.5vw, 28px) !important;
  border-color: #e3b662 !important;
  box-shadow: 0 0 0 5px #e9bb5429, 0 12px 29px #245b9b2f !important;
}
.app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-stage-status[data-phase=transition] .studio-stage-status-text {
  font-size: clamp(19px, 2.2vw, 27px) !important;
  font-weight: 900 !important;
}
@media (max-width: 699.98px) {
  .app.app[data-mode=room][data-tab][data-silent] .studio-room > .studio-stage-status {
    padding: 16px !important;
    width: min(100%, 370px) !important;
    min-height: 120px !important;
    height: auto !important;
    max-height: 100% !important;
  }
}
.app.app[data-mode=room][data-theme=light] .studio-room :is(.studio-silent-label, .studio-training-guidance, .studio-training-guidance strong, .studio-standby h2, .studio-standby p, .studio-standby-tag, .studio-round-details, .studio-current-round b, .room-question-focus p) {
  color: #113767 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.app.app[data-mode=room][data-theme=dark] .studio-room :is(.studio-silent-label, .studio-training-guidance, .studio-training-guidance strong, .studio-standby h2, .studio-standby p, .studio-standby-tag, .studio-round-details, .studio-current-round b) {
  color: #f0f9ff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.app.app[data-mode=room] .studio-room .studio-training-guidance,
.app.app[data-mode=room] .studio-room .studio-standby {
  opacity: 1 !important;
}
.journey-layer .jr-celebrate {
  z-index: 10005 !important;
  isolation: isolate !important;
  background:
    radial-gradient(
      circle at 50% 48%,
      #174a7478,
      transparent 62%),
    #03132bdd !important;
}
.journey-layer .jr-celebrate .jr-celebrate-card {
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  width: min(90vw, 510px) !important;
  max-width: 510px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 9px !important;
  padding: clamp(20px, 5vw, 38px) !important;
  border-radius: 30px !important;
  border: 2px solid #edcd87 !important;
  background:
    radial-gradient(
      circle at 50% -20%,
      #208ad883,
      transparent 66%),
    linear-gradient(
      158deg,
      #123c70,
      #061b3e 80%) !important;
  box-shadow:
    inset 0 1px #ffffff66,
    0 0 0 7px #edc2761b,
    0 20px 60px #000a,
    0 0 50px #17b8e743 !important;
  animation: miyto-celebrate-entrance 550ms cubic-bezier(.2, 1.25, .3, 1) both !important;
}
.journey-layer .jr-celebrate .jr-celebrate-emblem {
  display: grid !important;
  place-items: center !important;
  width: clamp(55px, 13vw, 72px) !important;
  height: clamp(55px, 13vw, 72px) !important;
  border-radius: 50% !important;
  border: 2px solid #f7d89c !important;
  color: #ffe9b4 !important;
  background:
    radial-gradient(
      circle at 30% 20%,
      #398ce9,
      #092a62 75%) !important;
  box-shadow: inset 0 1px #ffffff7d, 0 0 20px #45bfff83 !important;
  animation: miyto-celebrate-emblem 3.2s ease-in-out infinite !important;
}
.journey-layer .jr-celebrate .jr-celebrate-card small {
  color: #f3d993 !important;
  font: 850 clamp(14px, 2.8vw, 19px)/1.45 Cairo, system-ui !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}
.journey-layer .jr-celebrate .jr-celebrate-card p {
  color: #fff9eb !important;
  font: 900 clamp(21px, 4vw, 30px)/1.7 Cairo, system-ui !important;
  text-align: center !important;
  text-shadow: 0 3px 14px #000b !important;
  text-wrap: balance !important;
}
.journey-layer .jr-celebrate .jr-burst i {
  background:
    linear-gradient(
      #ffe5a4,
      #46cafa69,
      transparent) !important;
}
.journey-layer .jr-celebrate .jr-burst b {
  background: #e9d093 !important;
  box-shadow: 0 0 12px #5fd9ff !important;
}
@keyframes miyto-celebrate-entrance {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes miyto-celebrate-emblem {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-5px) rotate(3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-layer .jr-celebrate .jr-celebrate-card,
  .journey-layer .jr-celebrate .jr-celebrate-emblem {
    animation: none !important;
  }
}
html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(.jr-form) > .jr-card {
  position: relative !important;
  animation: none !important;
  translate: 0 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: auto !important;
  align-self: center !important;
  max-width: min(520px, calc(100vw - 20px)) !important;
  width: min(100%, 520px) !important;
  max-height: calc(var(--miyto-jr-visual-height,100dvh) - 24px) !important;
}
@media (max-width: 699.98px) {
  html body:has(.app.app[data-mode=room]) .journey-layer .jr-modal:has(.jr-form) > .jr-card {
    max-width: min(440px, calc(100vw - 20px)) !important;
    max-height: calc(var(--miyto-jr-visual-height,100dvh) - 16px) !important;
    margin: auto !important;
  }
}
.journey-layer .jr-celebrate {
  background:
    radial-gradient(
      circle at 50% 60%,
      rgba(209, 75, 15, .22),
      transparent 54%),
    rgba(2, 9, 23, .85) !important;
}
.journey-layer .jr-celebrate .jr-celebrate-words {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2.2vh, 22px);
  width: min(92vw, 820px);
  padding: 20px 10px;
  text-align: center;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: miyto-words-rise .75s cubic-bezier(.18, 1.12, .32, 1) both;
}
.journey-layer .jr-celebrate .jr-celebrate-flames {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 4vw, 32px);
  font-size: clamp(38px, 8vw, 62px);
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(255, 135, 48, .55));
}
.journey-layer .jr-celebrate .jr-celebrate-flames span:nth-child(1) {
  animation: miyto-flame-dance 1.05s ease-in-out infinite alternate;
}
.journey-layer .jr-celebrate .jr-celebrate-flames span:nth-child(2) {
  font-size: .68em;
  color: #ffcf6b;
  text-shadow: 0 0 18px #ff9d22;
  animation: miyto-flame-pop 1.7s ease-in-out infinite alternate;
}
.journey-layer .jr-celebrate .jr-celebrate-flames span:nth-child(3) {
  animation: miyto-flame-dance 1.22s ease-in-out .16s infinite alternate-reverse;
}
.journey-layer .jr-celebrate .jr-celebrate-words small {
  color: #ffdb95;
  font:
    800 clamp(15px, 3.3vw, 20px)/1.5 Cairo,
    system-ui,
    sans-serif;
  letter-spacing: 0;
}
.journey-layer .jr-celebrate .jr-celebrate-words h2 {
  margin: 0;
  color: #fff9e7;
  font:
    950 clamp(25px, 5vw, 43px)/1.5 Cairo,
    system-ui,
    sans-serif;
  text-shadow: 0 3px 20px #000b, 0 0 36px rgba(255, 153, 48, .35);
  text-wrap: balance;
}
.journey-layer .jr-celebrate .jr-celebrate-words p {
  margin: 0;
  color: #ffe3ae;
  font:
    850 clamp(19px, 3.6vw, 29px)/1.75 Cairo,
    system-ui,
    sans-serif;
  text-shadow: 0 3px 15px #000b;
  max-width: 32ch;
  text-wrap: balance;
}
.journey-layer .jr-celebrate .jr-burst i {
  background:
    linear-gradient(
      180deg,
      #ffdf7a,
      rgba(255, 97, 28, .76),
      transparent) !important;
}
.journey-layer .jr-celebrate .jr-burst b {
  background: #ffb14c !important;
  box-shadow: 0 0 13px 3px #fa6d2999 !important;
}
@keyframes miyto-words-rise {
  from {
    opacity: 0;
    transform: translateY(26px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes miyto-flame-dance {
  from {
    transform: translateY(4px) rotate(-7deg) scale(.93);
    opacity: .85;
  }
  to {
    transform: translateY(-9px) rotate(6deg) scale(1.13);
    opacity: 1;
  }
}
@keyframes miyto-flame-pop {
  from {
    transform: translateY(5px) scale(.72);
    opacity: .5;
  }
  to {
    transform: translateY(-8px) scale(1.2);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-layer .jr-celebrate .jr-celebrate-words,
  .journey-layer .jr-celebrate .jr-celebrate-flames span {
    animation: none !important;
    transform: none !important;
  }
}