html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: #f5f7fb;
}

body.site-is-loading {
  cursor: progress;
}

.is-profile-trigger { cursor:pointer!important; outline:none; transition:transform .16s ease,box-shadow .16s ease!important; }
.is-profile-trigger:hover { transform:translateY(-2px) scale(1.035); box-shadow:0 0 0 3px rgba(169,233,0,.3),0 8px 18px rgba(25,20,55,.16)!important; }
.is-profile-trigger:focus-visible { box-shadow:0 0 0 4px rgba(118,86,230,.38)!important; }
.user-profile-popup { position:fixed; z-index:2050; padding:1.35rem; border:1px solid rgba(122,102,206,.2); border-radius:22px; background:rgba(255,255,255,.96); color:#25243a; box-shadow:0 22px 60px rgba(23,18,50,.27); text-align:center; backdrop-filter:blur(18px); animation:userProfileIn .18s ease both; }
.user-profile-popup-close { position:absolute; top:.7rem; right:.7rem; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:10px; background:#f0eef7; color:#656079; }
.user-profile-popup-avatar { display:grid; place-items:center; width:92px; height:92px; margin:0 auto .85rem; overflow:hidden; border:4px solid #fff; border-radius:50%; background:linear-gradient(145deg,#7656e6,#9ae629); color:#fff; box-shadow:0 8px 25px rgba(80,57,175,.22); font-size:2rem; font-weight:900; }
.user-profile-popup-avatar img { width:100%; height:100%; object-fit:cover; }
.user-profile-popup-kicker { display:block; color:#8067df; font-size:.64rem; font-weight:900; letter-spacing:.14em; }
.user-profile-popup-name { display:block; margin:.3rem 0 .75rem; font-size:1.22rem; overflow-wrap:anywhere; }
.user-profile-popup-mbti { display:inline-flex; align-items:center; justify-content:center; min-width:88px; padding:.5rem .75rem; border-radius:12px; background:#a9e900; color:#23300e; font-size:1rem; font-weight:900; letter-spacing:.08em; }
.user-profile-popup-mbti.is-private { background:#efedf5; color:#747186; font-size:.78rem; letter-spacing:0; }
[data-theme="dark"] .user-profile-popup { border-color:#3d3b50; background:rgba(31,31,44,.97); color:#f5f3fb; }
[data-theme="dark"] .user-profile-popup-close,[data-theme="dark"] .user-profile-popup-mbti.is-private { background:#393746; color:#c2becf; }
@keyframes userProfileIn { from { opacity:0; scale:.96; } to { opacity:1; scale:1; } }

#kt_aside_menu_wrapper .aside-menu-link {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 9px 4px;
}

#kt_aside_menu_wrapper .aside-menu-link .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}

#kt_aside_menu_wrapper .aside-menu-label {
  color: var(--bs-gray-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-align: center;
  transition: color .16s ease;
}

#kt_aside_menu_wrapper .menu-item:hover .aside-menu-label,
#kt_aside_menu_wrapper .menu-link.active .aside-menu-label {
  color: var(--bs-primary);
}

.site-loading-overlay {
  position: fixed;
  z-index: 2100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  background: rgba(245, 247, 251, .72);
  backdrop-filter: blur(5px);
  transition: opacity .16s ease, visibility .16s ease;
}

.site-loading-overlay[hidden] {
  display: none;
}

.site-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.site-loading-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: min(100%, 280px);
  padding: 30px 28px;
  border: 1px solid #e4e8f1;
  border-radius: 20px;
  color: #171b2d;
  background: #ffffff;
  box-shadow: 0 22px 60px rgba(24, 29, 47, .18);
  text-align: center;
}

.site-loading-spinner {
  width: 48px;
  height: 48px;
  margin-bottom: 17px;
  border: 5px solid rgba(91, 76, 240, .18);
  border-top-color: #5b4cf0;
  border-radius: 50%;
  animation: site-loading-spin .75s linear infinite;
}

.site-loading-card strong {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 800;
}

.site-loading-card > span:last-child {
  color: #72798e;
  font-size: 12px;
}

[data-theme="dark"] .site-loading-overlay {
  background: rgba(8, 12, 21, .78);
}

[data-theme="dark"] .site-loading-card {
  border-color: #2a3141;
  color: #f1f3fa;
  background: #141925;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
}

[data-theme="dark"] .site-loading-card > span:last-child {
  color: #9da5b9;
}

@keyframes site-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loading-overlay {
    transition: none;
  }

  .site-loading-spinner {
    animation-duration: 1.5s;
  }
}

.management-shell { --mg-ink:#17182b; --mg-muted:#74798d; width:min(100% - 32px,1320px); margin:0 auto; padding:32px 0 56px; }
.management-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.management-eyebrow,.management-kicker { color:#7656e6; font-size:.7rem; font-weight:900; letter-spacing:.16em; }
.management-heading h1 { margin:6px 0 4px; color:var(--mg-ink); font-size:clamp(2rem,4vw,3.2rem); font-weight:850; letter-spacing:-.045em; }
.management-heading p { margin:0; color:var(--mg-muted); font-size:1rem; }
.management-status { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid #dfe6e2; border-radius:999px; color:#27724c; background:#f4fbf7; font-size:.78rem; font-weight:800; white-space:nowrap; }
.management-status span { width:8px; height:8px; border-radius:50%; background:#38b56e; box-shadow:0 0 0 5px rgba(56,181,110,.13); }
.management-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.management-metrics article { display:flex; align-items:flex-start; gap:15px; min-height:132px; padding:22px; border:1px solid #e7e8ef; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(34,35,63,.05); }
.management-icon { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:13px; font-size:1.2rem; }
.management-icon.is-purple { color:#6646d8; background:#eeeafd; }.management-icon.is-green { color:#188a52; background:#e5f8ed; }.management-icon.is-blue { color:#2773ce; background:#e7f1fd; }.management-icon.is-orange { color:#c86a20; background:#fff0e4; }
.management-metrics article div:last-child { display:flex; flex-direction:column; min-width:0; }.management-metrics span { color:var(--mg-muted); font-size:.78rem; font-weight:700; }.management-metrics strong { margin-top:4px; color:var(--mg-ink); font-size:2rem; line-height:1.1; }.management-metrics small { margin-top:7px; color:#9a9daf; font-size:.66rem; }
.management-panel { overflow:hidden; border:1px solid #e7e8ef; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(34,35,63,.055); }
.management-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px 20px; border-bottom:1px solid #eff0f4; }.management-panel-heading h2 { margin:4px 0 0; color:var(--mg-ink); font-size:1.28rem; }.management-panel-heading a { color:#694bd4; font-size:.78rem; font-weight:800; }
.management-table { width:100%; border-collapse:collapse; }.management-table th { padding:13px 18px; color:#9699aa; background:#fafafd; font-size:.66rem; font-weight:900; letter-spacing:.08em; text-align:left; text-transform:uppercase; }.management-table td { padding:16px 18px; border-top:1px solid #f0f1f5; color:#484b60; font-size:.8rem; vertical-align:middle; }.management-table td:first-child a { display:block; max-width:280px; overflow:hidden; color:#22243a; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.management-room-id { display:block; margin-top:3px; color:#a0a3b1; font-family:monospace; font-size:.68rem; }.management-pill { display:inline-flex; padding:5px 9px; border-radius:8px; color:#6549c7; background:#f0edfb; font-size:.68rem; font-weight:800; }.management-muted { color:#aaaebe; }.management-refreshed { padding:13px 22px; border-top:1px solid #eff0f4; color:#aaaebe; font-size:.66rem; text-align:right; }.management-empty { display:flex; align-items:center; flex-direction:column; padding:54px 20px; color:#9699aa; }.management-empty i { margin-bottom:12px; color:#7656e6; font-size:2rem; }.management-empty strong { color:#34364d; }.management-empty span { margin-top:4px; font-size:.78rem; }
[data-theme="dark"] .management-shell { --mg-ink:#f2f1f7; --mg-muted:#9b9aaa; }[data-theme="dark"] .management-metrics article,[data-theme="dark"] .management-panel { border-color:#343342; background:#242330; box-shadow:none; }[data-theme="dark"] .management-panel-heading,[data-theme="dark"] .management-table td,[data-theme="dark"] .management-refreshed { border-color:#383745; }[data-theme="dark"] .management-table th { background:#201f2a; }[data-theme="dark"] .management-table td,[data-theme="dark"] .management-table td:first-child a { color:#d8d6e1; }[data-theme="dark"] .management-status { border-color:#315d48; background:#1d392b; }
@media (max-width:1050px) { .management-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .management-shell { width:min(100% - 22px,1320px); padding-top:22px; }.management-heading { align-items:flex-start; flex-direction:column; }.management-metrics { grid-template-columns:1fr; }.management-metrics article { min-height:auto; }.management-panel-heading { align-items:flex-start; flex-direction:column; } }

.home-shell {
  --home-ink: #172033;
  --home-muted: #68748a;
  --home-border: #e4e9f2;
  --home-primary: #5b4cf0;
  --home-primary-dark: #4436ce;
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: 24px 0 48px;
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
  gap: 32px;
  align-items: end;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(91, 76, 240, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 18%, rgba(91, 76, 240, 0.18), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7f5ff 52%, #eef6ff 100%);
  box-shadow: 0 22px 50px rgba(37, 44, 74, 0.09);
}

.home-hero::after {
  position: absolute;
  right: -64px;
  bottom: -84px;
  width: 240px;
  height: 240px;
  border: 38px solid rgba(91, 76, 240, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.home-hero-copy,
.home-stats {
  position: relative;
  z-index: 1;
}

.home-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--home-primary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.home-hero h1 {
  max-width: 720px;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(2rem, 4.2vw, 3.65rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.home-hero p {
  max-width: 610px;
  margin: 18px 0 0;
  color: var(--home-muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
}

.home-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.home-hero-actions .btn {
  min-height: 44px;
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 12px;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-stat {
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 25px rgba(49, 55, 90, 0.08);
  backdrop-filter: blur(8px);
}

.home-stat strong,
.home-stat span {
  display: block;
}

.home-lobby-intro {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin-top: 18px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(91, 76, 240, .18);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 42, 68, .055);
}

.home-lobby-symbol {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--home-primary), #8579ff);
  box-shadow: 0 12px 24px rgba(91, 76, 240, .22);
  font-size: 1.6rem;
}

.home-lobby-copy .home-eyebrow { margin-bottom: 5px; }

.home-lobby-copy h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  font-weight: 850;
  letter-spacing: -.025em;
}

.home-lobby-copy > p {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--home-muted);
  font-size: .86rem;
  line-height: 1.65;
}

.home-lobby-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.home-lobby-features li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #625b78;
  background: #f4f2fb;
  font-size: .7rem;
  font-weight: 750;
}

.home-lobby-features i { color: var(--home-primary); }

.home-lobby-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 13px;
  white-space: nowrap;
}

.home-stat strong {
  color: var(--home-ink);
  font-size: 1.85rem;
  line-height: 1;
}

.home-stat span {
  margin-top: 9px;
  color: var(--home-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.home-room-section {
  padding-top: 40px;
}

.home-room-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.home-room-toolbar h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.home-room-toolbar p {
  margin: 6px 0 0;
  color: var(--home-muted);
}

.home-search {
  display: flex;
  align-items: center;
  width: min(100%, 340px);
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--home-border);
  border-radius: 12px;
  background: #fff;
  color: #8a94a6;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.home-search:focus-within {
  border-color: rgba(91, 76, 240, 0.55);
  box-shadow: 0 0 0 4px rgba(91, 76, 240, 0.1);
}

.home-search input {
  width: 100%;
  padding: 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--home-ink);
}

.home-room-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  padding: 24px;
  border: 1px dashed var(--home-border);
  border-radius: 16px;
  background: #fff;
  color: var(--home-muted);
  text-align: center;
}

.home-room-status.is-error {
  border-color: #f2b8b5;
  background: #fff7f6;
  color: #b42318;
}

.home-room-card {
  border: 1px solid var(--home-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 42, 68, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.home-room-card:hover {
  border-color: rgba(91, 76, 240, 0.3);
  box-shadow: 0 18px 38px rgba(31, 42, 68, 0.11);
  transform: translateY(-3px);
}

.home-room-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.home-room-card-top,
.home-room-capacity-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.room-capacity-state {
  font-size: 0.76rem;
  font-weight: 700;
}

.room-capacity-state.is-open {
  color: #17845b;
}

.room-capacity-state.is-full {
  color: #c2413a;
}

.home-room-card .room-name {
  margin: 20px 0 8px;
  color: var(--home-ink);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home-room-card .room-description {
  min-height: 44px;
  margin: 0 0 22px;
  color: var(--home-muted);
  line-height: 1.55;
}

.home-room-owner {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding: 14px;
  border-radius: 12px;
  background: #f7f8fb;
}

.home-room-owner img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.home-room-owner span,
.home-room-owner strong {
  display: block;
}

.home-room-owner span {
  color: var(--home-muted);
  font-size: 0.72rem;
}

.home-room-owner strong {
  margin-top: 2px;
  color: var(--home-ink);
  font-size: 0.9rem;
}

.home-room-capacity {
  margin: 20px 0;
}

.home-room-capacity-label {
  margin-bottom: 8px;
  color: var(--home-muted);
  font-size: 0.82rem;
}

.home-room-capacity-label strong {
  color: var(--home-ink);
}

.home-room-capacity .progress {
  height: 6px;
  border-radius: 999px;
  background: #eceef5;
}

.home-room-capacity .progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--home-primary), #7669f6);
}

.home-room-card .enter-link {
  min-height: 42px;
  border-radius: 11px;
}

.home-guide {
  display: grid;
  gap: 30px;
  padding-top: 72px;
}

.home-guide-heading {
  max-width: 820px;
}

.home-guide-heading h2,
.home-howto h2,
.home-safety-card h2,
.home-faq h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.home-guide-heading p,
.home-howto-copy > p,
.home-safety-card > p {
  margin: 14px 0 0;
  color: var(--home-muted);
  font-size: 1rem;
  line-height: 1.85;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-feature-card {
  padding: 26px;
  border: 1px solid var(--home-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 42, 68, 0.055);
}

.home-feature-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 14px;
  font-size: 1.2rem;
}

.home-feature-icon.is-purple { color: #614be0; background: #eeeafd; }
.home-feature-icon.is-green { color: #18865a; background: #e5f8ef; }
.home-feature-icon.is-orange { color: #c56822; background: #fff0e4; }

.home-feature-card h3 {
  margin: 0 0 9px;
  color: var(--home-ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.home-feature-card p {
  margin: 0;
  color: var(--home-muted);
  line-height: 1.7;
}

.home-feature-card a,
.home-safety-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--home-primary-dark);
  font-size: .82rem;
  font-weight: 800;
}

.home-howto {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 70px);
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid rgba(91, 76, 240, .16);
  border-radius: 24px;
  background: linear-gradient(135deg, #f7f5ff, #f1f7ff);
}

.home-step-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-step-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.home-step-list li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--home-primary);
  font-size: .78rem;
  font-weight: 900;
}

.home-step-list strong { color: var(--home-ink); font-size: .95rem; }
.home-step-list p { margin: 3px 0 0; color: var(--home-muted); font-size: .82rem; line-height: 1.55; }

.home-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-safety-card,
.home-faq {
  padding: clamp(25px, 4vw, 38px);
  border: 1px solid var(--home-border);
  border-radius: 22px;
  background: #fff;
}

.home-faq details {
  border-bottom: 1px solid var(--home-border);
}

.home-faq details:last-child { border-bottom: 0; }

.home-faq summary {
  position: relative;
  padding: 17px 28px 17px 0;
  color: var(--home-ink);
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { position: absolute; right: 2px; content: "+"; color: var(--home-primary); font-size: 1.25rem; }
.home-faq details[open] summary::after { content: "−"; }
.home-faq details p { margin: -4px 24px 17px 0; color: var(--home-muted); font-size: .82rem; line-height: 1.65; }

.home-create-modal {
  --home-ink: #172033;
  --home-border: #e4e9f2;
  --home-primary: #5b4cf0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(28, 36, 58, 0.2);
}

.home-create-modal .modal-header {
  align-items: flex-start;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--home-border);
}

.home-create-modal .modal-title {
  color: var(--home-ink);
  font-weight: 800;
}

.home-create-modal .modal-body {
  padding: 26px 28px;
}

.home-create-modal .modal-footer {
  padding: 18px 28px 24px;
  border-top: 0;
}

.room-visibility-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.room-visibility-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--home-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.room-visibility-option:hover {
  border-color: rgba(108, 92, 231, 0.45);
}

.room-visibility-option:has(.form-check-input:checked) {
  border-color: var(--home-primary);
  background: rgba(108, 92, 231, 0.06);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.09);
}

.room-visibility-option .form-check-input {
  margin: 0;
}

.room-visibility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(108, 92, 231, 0.1);
  color: var(--home-primary);
  font-size: 1rem;
}

.room-visibility-option > span:last-child {
  display: grid;
  gap: 2px;
}

.room-visibility-option strong {
  color: var(--home-ink);
  font-size: 0.88rem;
}

.room-visibility-option small {
  color: var(--home-muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
  }

  .home-stats {
    max-width: 420px;
  }

  .home-feature-grid { grid-template-columns: 1fr; }
  .home-howto { grid-template-columns: 1fr; }
  .home-info-grid { grid-template-columns: 1fr; }
  .home-lobby-intro { grid-template-columns: auto minmax(0, 1fr); }
  .home-lobby-action { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
  .home-shell {
    width: min(100% - 20px, 1240px);
    padding-top: 10px;
  }

  .home-hero {
    padding: 26px 22px;
    border-radius: 18px;
  }

  .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-room-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .home-search {
    width: 100%;
  }

  .home-guide { padding-top: 52px; }
  .home-lobby-intro { grid-template-columns: 1fr; padding: 22px; }
  .home-lobby-symbol { width: 52px; height: 52px; border-radius: 15px; }
  .home-lobby-action { grid-column: 1; width: 100%; }
  .home-feature-card { padding: 22px; }
  .home-howto { padding: 25px 22px; border-radius: 18px; }
  .home-safety-card,
  .home-faq { padding: 24px 21px; border-radius: 18px; }

  .home-create-modal .modal-header,
  .home-create-modal .modal-body,
  .home-create-modal .modal-footer {
    padding-right: 20px;
    padding-left: 20px;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background: #0b0e17;
}

@media (min-width: 992px) {
  [data-theme="dark"] body[data-kt-sticky-header="on"] #kt_header {
    border-bottom: 1px solid #2a3040;
    background-color: #151925;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  [data-theme="light"] body[data-kt-sticky-header="on"] #kt_header {
    border-bottom: 1px solid #e4e8f1;
    background-color: #fff;
    box-shadow: 0 12px 30px rgba(31, 41, 55, 0.08);
  }
}

[data-theme="dark"] .home-shell {
  --home-ink: #f4f6fb;
  --home-muted: #98a2b7;
  --home-border: #2a3040;
  --home-primary: #9f94ff;
  --home-primary-dark: #8174f4;
}

[data-theme="dark"] .home-hero {
  border-color: rgba(159, 148, 255, 0.2);
  background:
    radial-gradient(circle at 84% 18%, rgba(105, 91, 245, 0.24), transparent 36%),
    linear-gradient(135deg, #161a27 0%, #171729 52%, #121b29 100%);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .home-hero::after {
  border-color: rgba(159, 148, 255, 0.08);
}

[data-theme="dark"] .home-stat {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(31, 36, 52, 0.86);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .home-lobby-intro {
  border-color: rgba(159, 148, 255, .22);
  background: #151925;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .home-lobby-features li {
  color: #bbb4d3;
  background: #262338;
}

[data-theme="dark"] .home-search,
[data-theme="dark"] .home-room-status,
[data-theme="dark"] .home-room-card {
  border-color: #2a3040;
  background: #151925;
}

[data-theme="dark"] .home-search:focus-within {
  border-color: rgba(159, 148, 255, 0.64);
  box-shadow: 0 0 0 4px rgba(159, 148, 255, 0.12);
}

[data-theme="dark"] .home-search input {
  color: #f4f6fb;
}

[data-theme="dark"] .home-search input::placeholder {
  color: #717b90;
}

[data-theme="dark"] .home-room-status.is-error {
  border-color: #703b42;
  background: #26171d;
  color: #ff9da6;
}

[data-theme="dark"] .home-room-card {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .home-room-card:hover {
  border-color: rgba(159, 148, 255, 0.42);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .home-feature-card,
[data-theme="dark"] .home-safety-card,
[data-theme="dark"] .home-faq {
  border-color: #2a3040;
  background: #151925;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .home-howto {
  border-color: rgba(159, 148, 255, .2);
  background: linear-gradient(135deg, #1b192b, #142131);
}

[data-theme="dark"] .home-feature-icon.is-purple { color: #b2a9ff; background: #292441; }
[data-theme="dark"] .home-feature-icon.is-green { color: #72d5a9; background: #18352a; }
[data-theme="dark"] .home-feature-icon.is-orange { color: #f1ae7a; background: #3a291e; }

[data-theme="dark"] .home-room-owner {
  background: #1d2230;
}

[data-theme="dark"] .home-room-capacity .progress {
  background: #292f3e;
}

[data-theme="dark"] .home-create-modal {
  --home-ink: #f4f6fb;
  --home-border: #2a3040;
  --home-primary: #9f94ff;
  background: #151925;
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .home-create-modal .modal-header,
[data-theme="dark"] .home-create-modal .modal-body,
[data-theme="dark"] .home-create-modal .modal-footer {
  background: #151925;
}

[data-theme="dark"] .home-create-modal .form-control,
[data-theme="dark"] .home-create-modal .form-select {
  border-color: #303749;
  background-color: #1d2230;
  color: #f4f6fb;
}

[data-theme="dark"] .home-create-modal .form-control::placeholder {
  color: #717b90;
}

[data-theme="dark"] .room-visibility-option {
  border-color: #303749;
  background: #1d2230;
}

[data-theme="dark"] .room-visibility-option:has(.form-check-input:checked) {
  border-color: #9f94ff;
  background: rgba(159, 148, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(159, 148, 255, 0.08);
}

[data-theme="dark"] .room-visibility-icon {
  background: rgba(159, 148, 255, 0.12);
  color: #b8b0ff;
}

@media (max-width: 520px) {
  .room-visibility-options {
    grid-template-columns: 1fr;
  }
}

.chat-shell {
  max-width: 980px;
  margin: 0 auto;
}

.banmal-messenger {
  padding: 12px 0 28px;
}

.chat-card {
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.08);
  overflow: hidden;
}

.chat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 16px 20px;
  background: #fff;
}

.chat-room-title h1 {
  margin: 0 0 4px;
  color: #1f2937;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
}

.chat-room-title p {
  margin: 0;
  color: #6b7280;
  font-size: 0.92rem;
}

.chat-room-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-participants {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #6b7280;
  font-size: 0.86rem;
}

.chat-participants strong {
  color: #17845b;
  font-size: 1rem;
}

.chat-status {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 4px 10px;
  border: 1px solid #dfe5ef;
  border-radius: 999px;
  color: #495057;
  background: #f8fafc;
  font-size: 0.875rem;
}

.chat-card-body {
  padding: 0;
  background: #f8fafc;
}

.chat-messages {
  height: min(58vh, 620px);
  min-height: 360px;
  overflow-y: auto;
  padding: 22px 20px;
}

.chat-message,
.chat-notice {
  margin-bottom: 16px;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8f1ff;
  color: #1f5fbf;
  font-weight: 700;
}

.chat-message-content {
  max-width: min(72%, 520px);
}

.chat-message-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  color: #6b7280;
  font-size: 0.83rem;
}

.chat-message-meta strong {
  color: #374151;
}

.chat-message-body {
  padding: 12px 14px;
  border-radius: 8px;
  background: #e9f5ff;
  color: #1f2937;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-notice {
  color: #6b7280;
  font-size: 0.875rem;
  text-align: center;
}

.chat-card-footer {
  padding: 14px 16px;
  background: #fff;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr auto;
  gap: 8px;
  align-items: center;
}

.chat-form .form-control,
.chat-send {
  min-height: 42px;
}

.chat-text {
  min-width: 0;
}

[data-theme="dark"] .chat-card {
  border-color: #2a3040;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .chat-card-header,
[data-theme="dark"] .chat-card-footer {
  background: #151925;
}

[data-theme="dark"] .chat-room-title h1,
[data-theme="dark"] .chat-message-meta strong {
  color: #f4f6fb;
}

[data-theme="dark"] .chat-room-title p,
[data-theme="dark"] .chat-participants,
[data-theme="dark"] .chat-message-meta,
[data-theme="dark"] .chat-notice {
  color: #98a2b7;
}

[data-theme="dark"] .chat-status {
  border-color: #303749;
  background: #1d2230;
  color: #c8cfdd;
}

[data-theme="dark"] .chat-card-body {
  background: #10141f;
}

[data-theme="dark"] .chat-avatar {
  background: #292755;
  color: #b8b0ff;
}

[data-theme="dark"] .chat-message-body {
  background: #202b3a;
  color: #edf1f7;
}

@media (max-width: 720px) {
  .chat-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .chat-room-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .chat-messages {
    height: 56vh;
    min-height: 300px;
    padding: 16px 12px;
  }

  .chat-message-content {
    max-width: calc(100% - 46px);
  }

  .chat-form {
    grid-template-columns: 1fr;
  }
}

/* Completed chat room */
.chat-shell {
  --chat-ink: #171b2c;
  --chat-muted: #747d91;
  --chat-border: #e4e8f1;
  --chat-surface: #ffffff;
  --chat-canvas: #f6f7fb;
  --chat-primary: #6c5ce7;
  --chat-primary-strong: #5847d8;
  width: min(100% - 36px, 1180px);
  max-width: none;
  margin: 0 auto;
  padding: 20px 0 34px;
  position: relative;
}

.chat-leave-modal .modal-dialog {
  max-width: 420px;
}

.chat-leave-modal .modal-content {
  align-items: center;
  padding: 34px;
  border: 1px solid var(--chat-border);
  border-radius: 22px;
  color: var(--chat-ink);
  background: var(--chat-surface);
  box-shadow: 0 26px 72px rgba(25, 31, 52, .24);
  text-align: center;
}

.chat-leave-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #d14a5c;
  background: rgba(209, 74, 92, .12);
  font-size: 27px;
}

.chat-remove-participant-icon {
  background: rgba(223, 83, 99, 0.12);
  color: #df5363;
}

.chat-leave-modal h2 {
  margin: 0 0 10px;
  color: var(--chat-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.chat-leave-modal p {
  margin: 0 0 25px;
  color: var(--chat-muted);
  font-size: 14px;
  line-height: 1.7;
}

.chat-leave-modal p strong {
  color: var(--chat-ink);
}

.chat-leave-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  width: 100%;
}

@media (max-width: 480px) {
  .chat-leave-modal .modal-dialog {
    margin-right: 14px;
    margin-left: 14px;
  }

  .chat-leave-modal .modal-content {
    padding: 28px 22px;
  }
}

.chat-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.chat-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--chat-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.chat-back-link:hover {
  color: var(--chat-primary);
}

.chat-room-id {
  color: var(--chat-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.chat-card {
  display: flex;
  min-height: min(760px, calc(100dvh - 190px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--chat-border);
  border-radius: 24px;
  background: var(--chat-surface);
  box-shadow: 0 24px 60px rgba(31, 38, 63, 0.1);
}

.chat-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 0;
  padding: 22px 26px;
  border-bottom: 1px solid var(--chat-border);
  background: var(--chat-surface);
}

.chat-room-heading {
  min-width: 0;
}

.chat-room-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.chat-room-type,
.chat-capacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 700;
}

.chat-room-type {
  background: rgba(108, 92, 231, 0.1);
  color: var(--chat-primary);
}

.chat-capacity {
  border: 0;
  background: #f0f2f7;
  color: #5e687c;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.chat-capacity:hover {
  background: #e7eaf2;
  transform: translateY(-1px);
}

.chat-capacity:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.22);
}

.chat-capacity strong {
  color: #16845b;
}

.chat-room-title h1,
.chat-room-heading h1 {
  margin: 0;
  overflow: hidden;
  color: var(--chat-ink);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-room-title p,
.chat-room-heading p {
  margin: 7px 0 0;
  color: var(--chat-muted);
  font-size: 0.88rem;
}

.chat-room-heading p strong {
  color: #515a6f;
}

.chat-room-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: nowrap;
}

.chat-current-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding-right: 14px;
  border-right: 1px solid var(--chat-border);
}

.chat-current-user-avatar,
.chat-composer-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #7567ec, #9f94ff);
  color: #fff;
  font-weight: 800;
  overflow: hidden;
}

.chat-current-user-avatar img,
.chat-composer-avatar img,
.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-current-user-avatar {
  width: 38px;
  height: 38px;
}

.chat-current-user > span:last-child {
  display: grid;
  min-width: 0;
}

.chat-current-user small {
  color: var(--chat-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.chat-current-user strong {
  max-width: 150px;
  overflow: hidden;
  color: var(--chat-ink);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: #f8f9fc;
  color: var(--chat-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0a33a;
  box-shadow: 0 0 0 4px rgba(240, 163, 58, 0.13);
}

.chat-status.is-connected {
  color: #137d56;
}

.chat-status.is-connected .chat-status-dot {
  background: #1eae78;
  box-shadow: 0 0 0 4px rgba(30, 174, 120, 0.13);
}

.chat-status.is-reconnecting .chat-status-dot {
  animation: chat-status-pulse 1.2s ease-in-out infinite;
}

.chat-status.is-disconnected {
  color: #c34655;
}

.chat-status.is-disconnected .chat-status-dot {
  background: #df5363;
  box-shadow: 0 0 0 4px rgba(223, 83, 99, 0.13);
}

@keyframes chat-status-pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.82);
  }
}

.chat-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border-radius: 10px;
}

.chat-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid #f1cbd0;
  background: #fff1f3;
  color: #a63341;
  font-size: 0.84rem;
  font-weight: 600;
}

.chat-error[hidden] {
  display: none;
}

.chat-card-body {
  display: flex;
  min-height: 0;
  flex: 1;
  padding: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(108, 92, 231, 0.055), transparent 30%),
    var(--chat-canvas);
}

.chat-messages {
  width: 100%;
  height: auto;
  min-height: 390px;
  max-height: min(64vh, 680px);
  overflow-y: auto;
  padding: 26px clamp(18px, 4vw, 44px);
  scrollbar-color: #cbd1dd transparent;
  scrollbar-width: thin;
}

.chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  flex-direction: column;
  color: var(--chat-muted);
  text-align: center;
}

.chat-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: rgba(108, 92, 231, 0.1);
  color: var(--chat-primary);
  font-size: 1.55rem;
}

.chat-empty strong {
  margin-bottom: 5px;
  color: var(--chat-ink);
  font-size: 1rem;
}

.chat-empty > span:last-child {
  font-size: 0.84rem;
}

.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}

.chat-message.is-own {
  flex-direction: row-reverse;
}

.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e9e7fb;
  color: #5e50cf;
  font-size: 0.78rem;
  font-weight: 800;
  overflow: hidden;
}

.chat-message.is-own .chat-avatar {
  background: linear-gradient(135deg, #7567ec, #9f94ff);
  color: #fff;
}

.chat-message-content {
  max-width: min(72%, 620px);
}

.chat-message.is-own .chat-message-meta {
  justify-content: flex-end;
}

.chat-message-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 3px 5px;
  color: var(--chat-muted);
  font-size: 0.73rem;
}

.chat-message-meta strong {
  color: #4a5366;
  font-size: 0.78rem;
}

.chat-message-body {
  padding: 11px 14px;
  border: 1px solid #e1e5ee;
  border-radius: 6px 16px 16px 16px;
  background: #fff;
  color: #252b3d;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  box-shadow: 0 5px 16px rgba(31, 38, 63, 0.055);
}

.chat-message.is-own .chat-message-body {
  border-color: transparent;
  border-radius: 16px 6px 16px 16px;
  background: linear-gradient(135deg, var(--chat-primary), var(--chat-primary-strong));
  color: #fff;
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.2);
}

.chat-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 17px 0;
  color: var(--chat-muted);
  font-size: 0.77rem;
  text-align: center;
}

.chat-card-footer {
  position: relative;
  padding: 15px 20px 14px;
  border-top: 1px solid var(--chat-border);
  background: var(--chat-surface);
}

.chat-typing-indicator {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  max-width: calc(100% - 48px);
  min-width: 0;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--chat-canvas);
  color: #7457e8;
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-typing-indicator[hidden] {
  display: none !important;
}

.chat-typing-indicator::before {
  display: inline-block;
  width: 24px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 3px 3px, #a8ea38 0 3px, transparent 3.5px),
              radial-gradient(circle at 12px 3px, #8bd92c 0 3px, transparent 3.5px),
              radial-gradient(circle at 21px 3px, #7457e8 0 3px, transparent 3.5px);
  content: "";
  animation: chat-typing-pulse 1.1s ease-in-out infinite;
}

@keyframes chat-typing-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.chat-composer-avatar {
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 10px;
}

.chat-text {
  min-width: 0;
  min-height: 48px;
  max-height: 144px;
  resize: none;
  border-color: var(--chat-border);
  border-radius: 14px;
  background: #f8f9fc;
  color: var(--chat-ink);
  line-height: 1.45;
  overflow-y: auto;
}

.chat-text:focus {
  border-color: rgba(108, 92, 231, 0.6);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.1);
}

.chat-composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-character-count {
  min-width: 58px;
  color: var(--chat-muted);
  font-size: 0.68rem;
  text-align: right;
}

.chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 102px;
  min-height: 48px;
  border-radius: 14px;
}

.chat-composer-hint {
  margin: 7px 4px 0;
  color: var(--chat-muted);
  font-size: 0.67rem;
}

.chat-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1090;
  padding: 12px 16px;
  border: 1px solid rgba(108, 92, 231, 0.22);
  border-radius: 12px;
  background: #29243f;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 14px 36px rgba(31, 25, 56, 0.28);
}

.chat-toast[hidden] {
  display: none;
}

[data-theme="dark"] .chat-shell {
  --chat-ink: #f4f6fb;
  --chat-muted: #98a2b7;
  --chat-border: #2b3140;
  --chat-surface: #151925;
  --chat-canvas: #10141f;
  --chat-primary: #887cf5;
  --chat-primary-strong: #6f61e7;
}

[data-theme="dark"] .chat-card {
  border-color: var(--chat-border);
  background: var(--chat-surface);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.36);
}

[data-theme="dark"] .chat-card-header,
[data-theme="dark"] .chat-card-footer {
  background: var(--chat-surface);
}

[data-theme="dark"] .chat-room-type {
  background: rgba(136, 124, 245, 0.14);
  color: #aaa1ff;
}

[data-theme="dark"] .chat-capacity,
[data-theme="dark"] .chat-status {
  border-color: #303749;
  background: #1d2230;
  color: #aab3c5;
}

[data-theme="dark"] .chat-room-heading p strong,
[data-theme="dark"] .chat-current-user strong,
[data-theme="dark"] .chat-composer-identity strong,
[data-theme="dark"] .chat-message-meta strong {
  color: #d9dfeb;
}

[data-theme="dark"] .chat-card-body {
  background:
    radial-gradient(circle at 12% 8%, rgba(136, 124, 245, 0.09), transparent 30%),
    var(--chat-canvas);
}

[data-theme="dark"] .chat-empty-icon {
  background: rgba(136, 124, 245, 0.14);
  color: #aaa1ff;
}

[data-theme="dark"] .chat-avatar {
  background: #292755;
  color: #b8b0ff;
}

[data-theme="dark"] .chat-message-body {
  border-color: #303749;
  background: #1d2230;
  color: #edf1f7;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

[data-theme="dark"] .chat-message.is-own .chat-message-body {
  border-color: transparent;
  background: linear-gradient(135deg, var(--chat-primary), var(--chat-primary-strong));
  color: #fff;
}

[data-theme="dark"] .chat-text {
  border-color: #303749;
  background: #1d2230;
  color: #f4f6fb;
}

[data-theme="dark"] .chat-text:focus {
  border-color: rgba(159, 148, 255, 0.62);
  background: #202634;
  box-shadow: 0 0 0 4px rgba(159, 148, 255, 0.11);
}

[data-theme="dark"] .chat-error {
  border-color: #67343c;
  background: #2a171c;
  color: #ff9ba7;
}

.chat-participants-modal .modal-dialog {
  max-width: 520px;
}

.chat-participants-modal .modal-header {
  align-items: flex-start;
}

.chat-participants-description {
  margin: 8px 0 0;
  color: #71798b;
  font-size: 0.88rem;
}

.chat-participants-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #687186;
  font-size: 0.82rem;
  font-weight: 700;
}

.chat-participants-summary strong {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(108, 92, 231, 0.12);
  color: var(--chat-primary);
}

.chat-participants-error {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #ffd0d6;
  border-radius: 10px;
  background: #fff3f5;
  color: #b42335;
  font-size: 0.82rem;
}

.chat-participant-list {
  display: grid;
  gap: 9px;
  max-height: min(54vh, 460px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.chat-participant-list[aria-busy="true"] {
  opacity: 0.58;
}

.chat-participant-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e5ee;
  border-radius: 14px;
  background: #f8f9fc;
}

.chat-participant-card.is-current {
  border-color: rgba(108, 92, 231, 0.35);
  background: rgba(108, 92, 231, 0.06);
}

.chat-participant-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #7567ec, #9f94ff);
  color: #fff;
  font-weight: 800;
}

.chat-participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-participant-identity {
  display: grid;
  min-width: 0;
}

.chat-participant-identity strong {
  overflow: hidden;
  color: #171c2b;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-participant-identity small {
  color: #7a8396;
  font-size: 0.7rem;
}

.chat-participant-role {
  display: inline-flex;
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(116, 87, 232, 0.12);
  color: #7457e8;
  font-size: 0.65rem;
  font-weight: 800;
}

.chat-participant-role.is-owner {
  background: rgba(168, 234, 56, 0.16);
  color: #659b0b;
}

.chat-participant-role.is-manager {
  background: rgba(30, 174, 120, 0.13);
  color: #16845b;
}

.chat-participant-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

@media (max-width: 520px) {
  .chat-participant-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .chat-participant-actions {
    grid-column: 2 / -1;
    flex-wrap: wrap;
    margin-left: 0;
  }
}

.chat-participant-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #16845b;
  font-size: 0.72rem;
  font-weight: 800;
}

.chat-participant-online i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20c78a;
  box-shadow: 0 0 0 4px rgba(32, 199, 138, 0.12);
}

[data-theme="dark"] .chat-participants-description,
[data-theme="dark"] .chat-participants-summary,
[data-theme="dark"] .chat-participant-identity small {
  color: #969fb4;
}

[data-theme="dark"] .chat-participant-card {
  border-color: #303749;
  background: #1d2230;
}

[data-theme="dark"] .chat-participant-card.is-current {
  border-color: rgba(159, 148, 255, 0.42);
  background: rgba(159, 148, 255, 0.09);
}

[data-theme="dark"] .chat-participant-identity strong {
  color: #f2f4f8;
}

[data-theme="dark"] .chat-participants-error {
  border-color: #67343c;
  background: #2a171c;
  color: #ff9ba7;
}

.chat-lobby-invite-modal .modal-dialog {
  max-width: 560px;
}

.chat-lobby-invite-modal .modal-header {
  align-items: flex-start;
}

.chat-lobby-invite-description {
  margin: 8px 0 0;
  color: #71798b;
  font-size: 0.88rem;
}

.chat-lobby-invite-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #687186;
  font-size: 0.82rem;
  font-weight: 700;
}

.chat-lobby-invite-summary strong {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(108, 92, 231, 0.12);
  color: var(--chat-primary);
}

.chat-lobby-invite-error {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #ffd0d6;
  border-radius: 10px;
  background: #fff3f5;
  color: #b42335;
  font-size: 0.82rem;
}

.chat-lobby-user-list {
  display: grid;
  gap: 9px;
  max-height: min(52vh, 430px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.chat-lobby-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid #e1e5ee;
  border-radius: 14px;
  background: #f8f9fc;
}

.chat-lobby-user-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.chat-lobby-user-identity > span:last-child {
  display: grid;
  min-width: 0;
}

.chat-lobby-user-identity small {
  color: #7a8396;
  font-size: 0.7rem;
}

.chat-lobby-user-identity strong {
  overflow: hidden;
  color: #171c2b;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-lobby-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #7567ec, #9f94ff);
  color: #fff;
  font-weight: 800;
}

.chat-lobby-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-lobby-invite-button {
  flex: 0 0 auto;
  min-width: 76px;
}

.chat-lobby-user-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  border: 1px dashed #d7dce7;
  border-radius: 14px;
  color: #7a8396;
  text-align: center;
}

.chat-lobby-user-empty[hidden] {
  display: none;
}

.chat-lobby-user-empty i {
  margin-bottom: 4px;
  color: var(--chat-primary);
  font-size: 1.8rem;
}

.chat-lobby-user-empty strong {
  color: #353c4e;
}

.chat-lobby-user-empty span {
  font-size: 0.8rem;
}

[data-theme="dark"] .chat-lobby-invite-description,
[data-theme="dark"] .chat-lobby-invite-summary,
[data-theme="dark"] .chat-lobby-user-identity small,
[data-theme="dark"] .chat-lobby-user-empty {
  color: #969fb4;
}

[data-theme="dark"] .chat-lobby-user {
  border-color: #303749;
  background: #1d2230;
}

[data-theme="dark"] .chat-lobby-user-identity strong,
[data-theme="dark"] .chat-lobby-user-empty strong {
  color: #f2f4f8;
}

[data-theme="dark"] .chat-lobby-user-empty {
  border-color: #384055;
}

[data-theme="dark"] .chat-lobby-invite-error {
  border-color: #67343c;
  background: #2a171c;
  color: #ff9ba7;
}

@media (max-width: 980px) {
  .chat-card-header {
    grid-template-columns: 1fr;
  }

  .chat-room-actions {
    justify-content: space-between;
  }
}

@media (max-width: 680px) {
  .chat-shell {
    width: min(100% - 20px, 1180px);
    padding-top: 10px;
  }

  .chat-page-topbar {
    margin-bottom: 9px;
  }

  .chat-room-id {
    display: none;
  }

  .chat-card {
    height: calc(100dvh - 72px);
    min-height: 0;
    max-height: calc(100dvh - 72px);
    border-radius: 18px;
  }

  .chat-card-header {
    align-items: stretch;
    padding: 18px;
  }

  .chat-room-actions {
    align-items: center;
    gap: 8px;
    flex-direction: row;
    min-width: 0;
  }

  .chat-current-user {
    flex: 1 1 auto;
    padding: 0 8px 0 0;
    border-right: 1px solid var(--chat-border);
    border-bottom: 0;
  }

  .chat-current-user-avatar {
    width: 34px;
    height: 34px;
  }

  .chat-action-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
  }

  .chat-status,
  .chat-icon-button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .chat-status {
    justify-content: center;
  }

  .chat-status-text {
    display: none;
  }

  .chat-icon-button span {
    display: none;
  }

  .chat-lobby-invite-modal .modal-dialog {
    margin: 12px;
  }

  .chat-messages {
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 20px 12px;
  }

  .chat-card-body {
    min-height: 0;
    overflow: hidden;
  }

  .chat-message-content {
    max-width: calc(100% - 44px);
  }

  .chat-card-footer {
    padding: 12px;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .chat-composer-actions {
    justify-content: flex-end;
  }

  .chat-character-count {
    margin-right: auto;
  }

  .chat-send {
    min-height: 42px;
  }

  .chat-composer-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-status.is-reconnecting .chat-status-dot {
    animation: none;
  }
}

/* Terms of Use */
.terms-shell {
  --terms-text: #151a2b;
  --terms-muted: #697086;
  --terms-surface: #ffffff;
  --terms-soft: #f6f7fc;
  --terms-border: #e5e7f1;
  --terms-accent: #6758e8;
  --terms-accent-soft: #eeebff;
  width: min(calc(100% - 32px), 1080px);
  margin: 0 auto;
  padding: 34px 0 72px;
  color: var(--terms-text);
}

.terms-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--terms-muted);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.terms-back-link:hover {
  color: var(--terms-accent);
  transform: translateX(-2px);
}

.terms-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 5vw, 54px);
  overflow: hidden;
  border: 1px solid var(--terms-border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 15%, rgba(103, 88, 232, .24), transparent 34%),
    linear-gradient(135deg, #fbfbff 0%, #f0efff 100%);
  box-shadow: 0 22px 50px rgba(31, 34, 54, .08);
}

.terms-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--terms-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.terms-hero h1 {
  margin: 0;
  color: var(--terms-text);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.06;
}

.terms-hero h1 span {
  display: block;
  margin-top: 8px;
  color: var(--terms-muted);
  font-size: .42em;
  font-weight: 700;
  letter-spacing: -.02em;
}

.terms-hero > div > p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--terms-muted);
  font-size: 16px;
  line-height: 1.8;
}

.terms-meta {
  display: grid;
  min-width: 180px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(103, 88, 232, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
}

.terms-meta div + div {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--terms-border);
}

.terms-meta dt {
  color: var(--terms-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.terms-meta dd {
  margin: 3px 0 0;
  color: var(--terms-text);
  font-size: 14px;
  font-weight: 750;
}

.terms-card {
  margin-top: 24px;
  padding: clamp(22px, 5vw, 54px);
  border: 1px solid var(--terms-border);
  border-radius: 26px;
  background: var(--terms-surface);
  box-shadow: 0 22px 50px rgba(31, 34, 54, .06);
}

.terms-language-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--terms-border);
  border-radius: 13px;
  background: var(--terms-soft);
}

.terms-language-switch .nav-link {
  min-width: 116px;
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  color: var(--terms-muted);
  font-size: 14px;
  font-weight: 750;
}

.terms-language-switch .nav-link.active {
  color: #fff;
  background: var(--terms-accent);
  box-shadow: 0 6px 14px rgba(103, 88, 232, .25);
}

.terms-document-intro {
  padding: 32px 0;
}

.terms-document-intro > p {
  margin: 0;
  color: var(--terms-text);
  font-size: 16px;
  line-height: 1.85;
}

.terms-notice,
.terms-age-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 17px 18px;
  border-radius: 14px;
}

.terms-notice {
  color: var(--terms-accent);
  background: var(--terms-accent-soft);
}

.terms-notice i {
  margin-top: 2px;
  font-size: 19px;
}

.terms-notice p,
.terms-age-callout p {
  margin: 0;
  color: var(--terms-text);
  font-size: 14px;
  line-height: 1.7;
}

.terms-age-callout {
  border: 1px solid #dce9b5;
  background: #f4f9e5;
}

.terms-age-callout > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 7px;
  color: #263200;
  background: #b9e600;
  font-size: 13px;
  font-weight: 850;
}

.terms-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  padding: 22px;
  border: 1px solid var(--terms-border);
  border-radius: 18px;
  background: var(--terms-soft);
}

.terms-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--terms-text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease;
}

.terms-toc a:hover {
  color: var(--terms-accent);
  background: var(--terms-accent-soft);
}

.terms-toc a span {
  color: var(--terms-accent);
  font-size: 11px;
  font-weight: 800;
}

.terms-sections {
  margin-top: 38px;
}

.terms-section {
  scroll-margin-top: 104px;
  padding: 30px 0;
  border-top: 1px solid var(--terms-border);
}

.terms-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.terms-section h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--terms-text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.terms-section h2 span {
  color: var(--terms-accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}

.terms-section p,
.terms-section li {
  color: var(--terms-muted);
  font-size: 15px;
  line-height: 1.85;
}

.terms-section p {
  margin: 0;
}

.terms-section p + p {
  margin-top: 12px;
}

.terms-section ul {
  margin: 10px 0 0;
  padding-left: 22px;
}

.terms-section li + li {
  margin-top: 7px;
}

.terms-contact {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--terms-border);
  border-radius: 14px;
  background: var(--terms-soft);
}

.terms-contact p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.terms-contact strong {
  min-width: 84px;
  color: var(--terms-text);
}

.terms-contact a {
  color: var(--terms-accent);
}

[data-theme="dark"] .terms-shell {
  --terms-text: #f2f3fa;
  --terms-muted: #a3a9bb;
  --terms-surface: #131722;
  --terms-soft: #1a1f2c;
  --terms-border: #2a3040;
  --terms-accent: #a59aff;
  --terms-accent-soft: rgba(131, 112, 255, .14);
}

[data-theme="dark"] .terms-hero {
  background:
    radial-gradient(circle at 90% 15%, rgba(123, 102, 255, .22), transparent 34%),
    linear-gradient(135deg, #151925 0%, #1b1a31 100%);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .terms-meta {
  border-color: rgba(165, 154, 255, .2);
  background: rgba(21, 25, 37, .72);
}

[data-theme="dark"] .terms-card {
  box-shadow: 0 22px 50px rgba(0, 0, 0, .18);
}

[data-theme="dark"] .terms-age-callout {
  border-color: #3d4921;
  background: #1c2414;
}

[data-theme="dark"] .terms-age-callout > span {
  color: #182000;
}

@media (max-width: 700px) {
  .terms-shell {
    width: min(calc(100% - 22px), 1080px);
    padding: 22px 0 48px;
  }

  .terms-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .terms-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .terms-meta div + div {
    margin: 0 0 0 12px;
    padding: 0 0 0 12px;
    border-top: 0;
    border-left: 1px solid var(--terms-border);
  }

  .terms-card {
    border-radius: 20px;
  }

  .terms-language-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .terms-language-switch .nav-link {
    min-width: 0;
  }

  .terms-toc {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .terms-section h2 {
    font-size: 20px;
  }

  .terms-contact p {
    display: block;
  }

  .terms-contact strong {
    display: block;
    margin-bottom: 2px;
  }
}

/* Lobby */
.lobby-shell {
  --lobby-bg: #f4f5fa;
  --lobby-panel: #ffffff;
  --lobby-panel-soft: #f7f8fc;
  --lobby-border: #e6e8f1;
  --lobby-text: #171b2d;
  --lobby-muted: #747b90;
  --lobby-accent: #6758e8;
  --lobby-accent-soft: #efedff;
  width: min(calc(100% - 38px), 1480px);
  margin: 0 auto;
  padding: 30px 0 58px;
  color: var(--lobby-text);
}

.lobby-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
  padding: 30px 34px;
  border: 1px solid var(--lobby-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 20%, rgba(103, 88, 232, .2), transparent 28%),
    linear-gradient(125deg, #ffffff 0%, #f1f0ff 100%);
  box-shadow: 0 18px 45px rgba(31, 34, 54, .07);
}

.lobby-eyebrow,
.lobby-panel-kicker {
  display: block;
  color: var(--lobby-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .15em;
}

.lobby-header h1 {
  margin: 9px 0 8px;
  color: var(--lobby-text);
  font-size: clamp(28px, 3.2vw, 45px);
  font-weight: 850;
  letter-spacing: -.045em;
}

.lobby-header > div:first-child > p {
  margin: 0;
  color: var(--lobby-muted);
  font-size: 15px;
}

.lobby-current-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  padding: 14px;
  border: 1px solid rgba(103, 88, 232, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(10px);
}

.lobby-current-user > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.lobby-current-user small,
.lobby-conversation-person small {
  color: var(--lobby-muted);
  font-size: 11px;
}

.lobby-current-user strong,
.lobby-conversation-person strong {
  overflow: hidden;
  color: var(--lobby-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-avatar {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #7a6cf0, #4b3ad0);
  font-size: 15px;
  font-weight: 850;
  box-shadow: 0 8px 16px rgba(103, 88, 232, .2);
  overflow: hidden;
}

.lobby-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-avatar.is-current {
  color: #1d2600;
  background: #b9e600;
  box-shadow: 0 8px 16px rgba(155, 194, 0, .2);
}

.lobby-connection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--lobby-muted);
  background: var(--lobby-panel-soft);
  font-size: 11px;
  font-weight: 750;
}

.lobby-connection > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa0b0;
}

.lobby-connection.is-online {
  color: #167a51;
  background: #e7f8f0;
}

.lobby-connection.is-online > span:first-child {
  background: #1aae72;
  box-shadow: 0 0 0 4px rgba(26, 174, 114, .12);
}

.lobby-connection.is-connecting > span:first-child {
  background: #f4a72b;
  animation: lobby-pulse 1s ease-in-out infinite;
}

.lobby-connection.is-offline {
  color: #b74343;
  background: #fff0f0;
}

@keyframes lobby-pulse {
  50% {
    opacity: .38;
  }
}

.lobby-error {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid #f1c6c6;
  border-radius: 12px;
  color: #aa3434;
  background: #fff3f3;
  font-size: 13px;
}

.lobby-error button {
  margin-left: auto;
  border: 0;
  color: inherit;
  background: transparent;
  font-weight: 800;
}

.lobby-grid {
  --lobby-panel-height: clamp(560px, calc(100dvh - 280px), 720px);
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(420px, 1fr) minmax(270px, 330px);
  align-items: stretch;
  gap: 18px;
  min-height: 0;
}

.lobby-panel {
  overflow: hidden;
  min-height: 0;
  height: var(--lobby-panel-height);
  border: 1px solid var(--lobby-border);
  border-radius: 20px;
  background: var(--lobby-panel);
  box-shadow: 0 14px 34px rgba(31, 34, 54, .05);
}

.lobby-people-panel,
.lobby-activity-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 22px;
}

.lobby-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lobby-panel-heading h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  color: var(--lobby-text);
  font-size: 19px;
  font-weight: 800;
}

.lobby-panel-heading h2 span,
.lobby-activity-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--lobby-accent);
  background: var(--lobby-accent-soft);
  font-size: 11px;
  font-weight: 850;
}

.lobby-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 20px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--lobby-border);
  border-radius: 11px;
  color: var(--lobby-muted);
  background: var(--lobby-panel-soft);
}

.lobby-search:focus-within {
  border-color: var(--lobby-accent);
  box-shadow: 0 0 0 3px rgba(103, 88, 232, .1);
}

.lobby-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--lobby-text);
  background: transparent;
  font-size: 13px;
}

.lobby-user-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 5px;
  min-height: 0;
  max-height: none;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.lobby-user-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--lobby-text);
  background: transparent;
  text-align: left;
}

.lobby-user-item:hover,
.lobby-user-item.is-active {
  border-color: var(--lobby-border);
  background: var(--lobby-panel-soft);
}

.lobby-user-item.is-active {
  border-color: rgba(103, 88, 232, .3);
  background: var(--lobby-accent-soft);
}

.lobby-user-item .lobby-avatar {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 13px;
}

.lobby-user-identity {
  display: grid;
  min-width: 0;
}

.lobby-user-identity strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-user-identity small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--lobby-muted);
  font-size: 10px;
}

.lobby-online-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1aae72;
}

.lobby-user-item > i {
  margin-left: auto;
  color: var(--lobby-muted);
  font-size: 11px;
}

.lobby-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--lobby-accent);
  font-size: 10px;
  font-weight: 850;
}

.lobby-users-empty,
.lobby-activity-empty {
  display: grid;
  justify-items: center;
  padding: 52px 12px;
  text-align: center;
}

.lobby-users-empty[hidden],
.lobby-activity-empty[hidden] {
  display: none;
}

.lobby-users-empty > span,
.lobby-activity-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 13px;
  border-radius: 15px;
  color: var(--lobby-accent);
  background: var(--lobby-accent-soft);
  font-size: 20px;
}

.lobby-users-empty strong,
.lobby-activity-empty strong {
  color: var(--lobby-text);
  font-size: 13px;
}

.lobby-users-empty p,
.lobby-activity-empty p {
  margin: 6px 0 0;
  color: var(--lobby-muted);
  font-size: 11px;
  line-height: 1.6;
}

.lobby-chat-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.lobby-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 40px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(103, 88, 232, .1), transparent 30%),
    var(--lobby-panel);
}

.lobby-welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #8073f4, #5543db);
  font-size: 29px;
  box-shadow: 0 16px 32px rgba(103, 88, 232, .24);
}

.lobby-welcome h2 {
  margin: 10px 0 10px;
  color: var(--lobby-text);
  font-size: 27px;
  font-weight: 850;
  letter-spacing: -.035em;
}

.lobby-welcome > p {
  max-width: 390px;
  margin: 0;
  color: var(--lobby-muted);
  font-size: 14px;
  line-height: 1.7;
}

.lobby-privacy-note {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 430px;
  margin-top: 25px;
  padding: 12px 15px;
  border-radius: 11px;
  color: var(--lobby-muted);
  background: var(--lobby-panel-soft);
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
}

.lobby-privacy-note i {
  color: var(--lobby-accent);
  font-size: 17px;
}

.lobby-conversation {
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto auto;
  height: 100%;
  min-height: 0;
}

.lobby-conversation[hidden] {
  display: none;
}

.lobby-conversation-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--lobby-border);
}

.lobby-conversation-person {
  display: grid;
  min-width: 0;
}

.lobby-conversation-person small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lobby-block-button,
.lobby-mobile-back {
  border: 0;
  color: var(--lobby-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.lobby-block-button {
  margin-left: auto;
  padding: 8px;
  border-radius: 8px;
}

.lobby-block-button:hover {
  color: #c64d4d;
  background: #fff0f0;
}

.lobby-mobile-back {
  display: none;
}

.lobby-messages {
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--lobby-panel-soft);
}

.lobby-messages-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--lobby-muted);
  font-size: 12px;
}

.lobby-message {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: 12px;
}

.lobby-message.is-own {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.lobby-message-bubble {
  max-width: min(76%, 520px);
  padding: 10px 13px;
  border: 1px solid var(--lobby-border);
  border-radius: 5px 15px 15px;
  color: var(--lobby-text);
  background: var(--lobby-panel);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lobby-message.is-own .lobby-message-bubble {
  border-color: var(--lobby-accent);
  border-radius: 15px 5px 15px 15px;
  color: #fff;
  background: var(--lobby-accent);
}

.lobby-message time {
  color: var(--lobby-muted);
  font-size: 9px;
}

.lobby-invite-composer {
  padding: 12px 18px;
  border-top: 1px solid var(--lobby-border);
  background: var(--lobby-panel);
}

.lobby-invite-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lobby-invite-composer > div > span {
  display: grid;
  min-width: 0;
}

.lobby-invite-composer strong {
  color: var(--lobby-text);
  font-size: 11px;
}

.lobby-invite-composer small {
  color: var(--lobby-muted);
  font-size: 9px;
}

.lobby-invite-composer .btn {
  white-space: nowrap;
}

.lobby-message-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--lobby-border);
  background: var(--lobby-panel);
}

.lobby-message-form > .lobby-message-error {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  flex-direction: row;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f1c6c6;
  border-radius: 10px;
  color: #a73535;
  background: #fff3f3;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.lobby-message-error i {
  margin-top: 2px;
  flex: 0 0 auto;
}

[data-theme="dark"] .lobby-message-error {
  border-color: #633737;
  color: #f0a1a1;
  background: #2b1b20;
}

.lobby-message-form textarea {
  min-height: 44px;
  max-height: 120px;
  padding: 11px 13px;
  resize: vertical;
  border: 1px solid var(--lobby-border);
  border-radius: 11px;
  outline: 0;
  color: var(--lobby-text);
  background: var(--lobby-panel-soft);
  font-size: 13px;
}

.lobby-message-form textarea:focus {
  border-color: var(--lobby-accent);
  box-shadow: 0 0 0 3px rgba(103, 88, 232, .1);
}

.lobby-message-form > div {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
}

.lobby-message-form > div > span {
  color: var(--lobby-muted);
  font-size: 9px;
}

.lobby-message-form button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--lobby-accent);
  font-size: 12px;
  font-weight: 750;
}

.lobby-message-form button:disabled {
  opacity: .5;
}

.lobby-invitations {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 10px;
  min-height: 0;
  margin-top: 18px;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.lobby-user-list,
.lobby-messages,
.lobby-invitations {
  scrollbar-width: thin;
  scrollbar-color: var(--lobby-muted) transparent;
}

.lobby-user-list::-webkit-scrollbar,
.lobby-messages::-webkit-scrollbar,
.lobby-invitations::-webkit-scrollbar {
  width: 8px;
}

.lobby-user-list::-webkit-scrollbar-thumb,
.lobby-messages::-webkit-scrollbar-thumb,
.lobby-invitations::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--lobby-muted);
  background-clip: padding-box;
}

.lobby-user-list::-webkit-scrollbar-track,
.lobby-messages::-webkit-scrollbar-track,
.lobby-invitations::-webkit-scrollbar-track {
  background: transparent;
}

.lobby-invitation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--lobby-border);
  border-radius: 13px;
  background: var(--lobby-panel-soft);
}

.lobby-invitation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--lobby-accent);
  background: var(--lobby-accent-soft);
  overflow: hidden;
}

.lobby-invitation-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-invitation > div:nth-child(2) {
  display: grid;
  min-width: 0;
}

.lobby-invitation small,
.lobby-invitation span {
  color: var(--lobby-muted);
  font-size: 9px;
}

.lobby-invitation strong {
  overflow: hidden;
  color: var(--lobby-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-invitation-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1.4fr;
  gap: 7px;
}

.lobby-invitation-actions button,
.lobby-invitation-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.lobby-invitation-actions .is-decline {
  color: var(--lobby-muted);
  background: var(--lobby-panel);
}

.lobby-invitation-actions .is-accept {
  gap: 6px;
  color: #fff;
  background: var(--lobby-accent);
}

.lobby-invitation-spinner {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: site-loading-spin 0.65s linear infinite;
}

body.is-lobby-room-entering {
  overflow: hidden;
}

.lobby-room-entry-loading {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 12, 25, 0.82);
  backdrop-filter: blur(8px);
}

.lobby-room-entry-loading[hidden] {
  display: none;
}

.lobby-room-entry-card {
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(100%, 470px);
  padding: 28px;
  border: 1px solid rgba(157, 145, 255, 0.42);
  border-radius: 22px;
  background: linear-gradient(145deg, #202438, #161a29);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46), 0 0 40px rgba(153, 139, 255, 0.14);
  color: #fff;
}

.lobby-room-entry-spinner {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border: 6px solid rgba(255, 255, 255, 0.15);
  border-top-color: #b8ec00;
  border-right-color: #9d91ff;
  border-radius: 50%;
  animation: site-loading-spin 0.72s linear infinite;
  box-shadow: 0 0 22px rgba(184, 236, 0, 0.2);
}

.lobby-room-entry-card > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.lobby-room-entry-eyebrow {
  color: #b8ec00;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.lobby-room-entry-card strong {
  font-size: 1.2rem;
  line-height: 1.3;
}

.lobby-room-entry-card p {
  margin: 0;
  color: #aeb6ca;
  font-size: 0.82rem;
  line-height: 1.55;
}

.lobby-room-entry-card p span {
  color: #fff;
  font-weight: 800;
}

@media (max-width: 520px) {
  .lobby-room-entry-card {
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
  }
}

.lobby-safety-card {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid #dce9b5;
  border-radius: 13px;
  background: #f4f9e5;
}

.lobby-safety-card > i {
  color: #7d9d00;
  font-size: 18px;
}

.lobby-safety-card strong {
  display: block;
  color: var(--lobby-text);
  font-size: 11px;
}

.lobby-safety-card p {
  margin: 4px 0 0;
  color: var(--lobby-muted);
  font-size: 9px;
  line-height: 1.55;
}

.lobby-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1090;
  max-width: min(360px, calc(100vw - 36px));
  padding: 13px 17px;
  border: 1px solid var(--lobby-border);
  border-radius: 12px;
  color: var(--lobby-text);
  background: var(--lobby-panel);
  box-shadow: 0 16px 38px rgba(17, 20, 34, .18);
  font-size: 12px;
  font-weight: 650;
}

.lobby-decision-modal .modal-content {
  align-items: center;
  padding: 32px;
  border: 1px solid var(--lobby-border);
  border-radius: 20px;
  color: var(--lobby-text);
  background: var(--lobby-panel);
  text-align: center;
  box-shadow: 0 24px 60px rgba(17, 20, 34, .24);
}

.lobby-decision-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #8073f4, #5543db);
  font-size: 24px;
}

.lobby-decision-modal h2 {
  margin: 0;
  color: var(--lobby-text);
  font-size: 21px;
  font-weight: 850;
}

.lobby-decision-modal p {
  margin: 10px 0 22px;
  color: var(--lobby-muted);
  font-size: 13px;
}

.lobby-decision-timer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.lobby-decision-timer .progress {
  height: 8px;
  background: var(--lobby-panel-soft);
}

.lobby-decision-timer .progress-bar {
  width: 100%;
  background: var(--lobby-accent);
  transition: width .1s linear;
}

.lobby-decision-timer strong {
  min-width: 30px;
  color: var(--lobby-accent);
  font-size: 12px;
}

.lobby-decision-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  width: 100%;
  margin-top: 22px;
}

.lobby-decision-actions[hidden] {
  display: none;
}

[data-theme="dark"] .lobby-shell {
  --lobby-bg: #0d111a;
  --lobby-panel: #141925;
  --lobby-panel-soft: #1a202e;
  --lobby-border: #2a3141;
  --lobby-text: #f1f3fa;
  --lobby-muted: #9ca4b8;
  --lobby-accent: #a69aff;
  --lobby-accent-soft: rgba(131, 112, 255, .14);
}

[data-theme="dark"] .lobby-header {
  background:
    radial-gradient(circle at 82% 20%, rgba(126, 106, 255, .21), transparent 28%),
    linear-gradient(125deg, #151a26 0%, #1b1a31 100%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .lobby-current-user {
  border-color: rgba(166, 154, 255, .18);
  background: rgba(20, 25, 37, .78);
}

[data-theme="dark"] .lobby-connection.is-online {
  color: #62dba4;
  background: rgba(26, 174, 114, .12);
}

[data-theme="dark"] .lobby-connection.is-offline,
[data-theme="dark"] .lobby-block-button:hover {
  background: rgba(198, 77, 77, .12);
}

[data-theme="dark"] .lobby-error {
  border-color: #633737;
  color: #f0a1a1;
  background: #2b1b20;
}

[data-theme="dark"] .lobby-safety-card {
  border-color: #3d4921;
  background: #1c2414;
}

@media (max-width: 1180px) {
  .lobby-grid {
    grid-template-columns: minmax(240px, 290px) minmax(400px, 1fr);
  }

  .lobby-activity-panel {
    grid-column: 1 / -1;
  }

  .lobby-invitations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .lobby-shell {
    width: min(calc(100% - 20px), 1480px);
    padding-top: 18px;
  }

  .lobby-header {
    align-items: stretch;
    flex-direction: column;
    padding: 24px;
  }

  .lobby-current-user {
    min-width: 0;
  }

  .lobby-grid {
    display: block;
    min-height: 0;
  }

  .lobby-panel {
    height: min(600px, calc(100dvh - 110px));
    min-height: 520px;
  }

  .lobby-people-panel {
    min-height: 520px;
  }

  .lobby-chat-panel,
  .lobby-activity-panel {
    margin-top: 14px;
  }

  .lobby-chat-panel {
    display: none;
  }

  .lobby-shell.is-conversation-open .lobby-people-panel,
  .lobby-shell.is-conversation-open .lobby-activity-panel {
    display: none;
  }

  .lobby-shell.is-conversation-open .lobby-chat-panel {
    display: block;
    margin-top: 0;
  }

  .lobby-mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
  }

  .lobby-invitations {
    grid-template-columns: 1fr;
  }

  .lobby-message-form {
    grid-template-columns: 1fr;
  }

  .lobby-message-form > div {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-connection.is-connecting > span:first-child {
    animation: none;
  }
}

/* Profile */
.profile-shell {
  --profile-text: #171b2d;
  --profile-muted: #72798e;
  --profile-panel: #ffffff;
  --profile-soft: #f6f7fb;
  --profile-border: #e5e8f1;
  --profile-accent: #6758e8;
  --profile-accent-soft: #efedff;
  width: min(calc(100% - 34px), 1180px);
  margin: 0 auto;
  padding: 30px 0 64px;
  color: var(--profile-text);
}

.profile-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  padding: clamp(26px, 5vw, 44px);
  overflow: hidden;
  border: 1px solid var(--profile-border);
  border-radius: 25px;
  background:
    radial-gradient(circle at 86% 10%, rgba(103, 88, 232, .22), transparent 30%),
    linear-gradient(130deg, #ffffff 0%, #f0efff 100%);
  box-shadow: 0 20px 46px rgba(31, 34, 54, .07);
}

.profile-avatar-frame {
  display: inline-flex;
  flex: 0 0 clamp(92px, 11vw, 126px);
  align-items: center;
  justify-content: center;
  width: clamp(92px, 11vw, 126px);
  height: clamp(92px, 11vw, 126px);
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, .9);
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(135deg, #8174f4, #4d3bd1);
  box-shadow: 0 16px 30px rgba(76, 59, 209, .22);
  font-size: 36px;
  font-weight: 850;
}

.profile-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero-copy {
  min-width: 0;
}

.profile-eyebrow,
.profile-card-kicker {
  display: block;
  color: var(--profile-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .15em;
}

.profile-hero h1 {
  overflow: hidden;
  margin: 7px 0 7px;
  color: var(--profile-text);
  font-size: clamp(28px, 4vw, 43px);
  font-weight: 850;
  letter-spacing: -.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero-copy > p {
  margin: 0;
  color: var(--profile-muted);
  font-size: 14px;
  line-height: 1.65;
}

.profile-account-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.profile-account-badge.is-guest {
  color: #655411;
  background: #fff3c4;
}

.profile-account-badge.is-member {
  color: #186a4c;
  background: #e5f8ef;
}

.profile-home-link {
  position: absolute;
  top: 24px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--profile-muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.profile-home-link:hover {
  color: var(--profile-accent);
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(440px, 1.1fr);
  gap: 20px;
  align-items: start;
}

.profile-grid.is-guest {
  grid-template-columns: minmax(500px, 1.3fr) minmax(300px, .7fr);
}

.profile-card {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--profile-border);
  border-radius: 22px;
  background: var(--profile-panel);
  box-shadow: 0 14px 35px rgba(31, 34, 54, .05);
}

.profile-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.profile-card-icon {
  display: inline-flex;
  flex: 0 0 43px;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  color: var(--profile-accent);
  background: var(--profile-accent-soft);
  font-size: 19px;
}

.profile-card-heading h2 {
  margin: 4px 0 0;
  color: var(--profile-text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.profile-card-description {
  margin: 0 0 22px;
  color: var(--profile-muted);
  font-size: 13px;
  line-height: 1.7;
}

.profile-verification-lock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid #ead89a;
  border-radius: 12px;
  color: var(--profile-muted);
  background: #fff9e8;
}

.profile-verification-lock > i {
  color: #b88900;
  font-size: 20px;
}

.profile-verification-lock > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-verification-lock strong {
  color: var(--profile-text);
  font-size: 12px;
}

.profile-verification-lock span {
  font-size: 10px;
  line-height: 1.5;
}

.profile-verification-lock .btn {
  grid-column: 1 / -1;
}

.profile-confirmation-modal .modal-dialog {
  max-width: 430px;
  margin-right: auto;
  margin-left: auto;
}

.profile-confirmation-modal .modal-content {
  align-items: center;
  padding: 34px;
  border: 1px solid var(--profile-border);
  border-radius: 22px;
  color: var(--profile-text);
  background: var(--profile-panel);
  box-shadow: 0 24px 70px rgba(20, 24, 40, .24);
  text-align: center;
}

.profile-confirmation-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #51752c;
  background: rgba(185, 230, 0, .24);
  font-size: 28px;
}

.profile-confirmation-modal h2 {
  margin: 0 0 10px;
  color: var(--profile-text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.profile-confirmation-modal p {
  margin: 0 0 24px;
  color: var(--profile-muted);
  font-size: 13px;
  line-height: 1.75;
}

.profile-confirmation-modal p strong {
  color: var(--profile-text);
  overflow-wrap: anywhere;
}

.profile-confirmation-modal .btn {
  min-width: 140px;
}

.profile-avatar-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.profile-avatar-choice-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:1.25rem 0 .85rem; }
.profile-avatar-choice-heading h3 { margin:.15rem 0 0; font-size:1.15rem; }
.profile-avatar-count { padding:.3rem .65rem; border-radius:999px; background:rgba(118,86,230,.09); color:#7254dc; font-size:.76rem; font-weight:850; }
.profile-member-preset-form { margin-bottom:1.2rem; }
.profile-member-preset-form .profile-avatar-presets { max-height:430px; padding:.35rem; overflow-y:auto; scrollbar-width:thin; }
.profile-avatar-divider { display:flex; align-items:center; gap:.75rem; margin:1.3rem 0; color:#8c90a0; font-size:.75rem; font-weight:800; }
.profile-avatar-divider::before,.profile-avatar-divider::after { height:1px; flex:1; background:#e7e5ed; content:""; }
[data-theme="dark"] .profile-avatar-count { background:rgba(167,143,255,.12); color:#c8baff; }
[data-theme="dark"] .profile-avatar-divider::before,[data-theme="dark"] .profile-avatar-divider::after { background:#3c3b48; }

.profile-avatar-preset {
  display: grid;
  justify-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--profile-muted);
  font-size: 10px;
  font-weight: 700;
}

.profile-avatar-preset input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-avatar-preset-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--profile-soft);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.profile-avatar-preset:hover .profile-avatar-preset-image {
  transform: translateY(-2px);
}

.profile-avatar-preset-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-preset-image i {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--profile-accent);
  font-size: 9px;
}

.profile-avatar-preset input:checked + .profile-avatar-preset-image {
  border-color: var(--profile-accent);
  box-shadow: 0 8px 20px rgba(103, 88, 232, .2);
}

.profile-avatar-preset input:focus-visible + .profile-avatar-preset-image {
  outline: 3px solid rgba(103, 88, 232, .22);
  outline-offset: 3px;
}

.profile-avatar-preset input:checked + .profile-avatar-preset-image i {
  display: inline-flex;
}

.profile-save-avatar {
  width: 100%;
  margin-top: 22px;
}

.profile-upload-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid var(--profile-border);
  border-radius: 15px;
  background: var(--profile-soft);
}

.profile-upload-avatar {
  display: inline-flex;
  flex: 0 0 70px;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 19px;
  color: #fff;
  background: linear-gradient(135deg, #8174f4, #4d3bd1);
  font-size: 24px;
  font-weight: 850;
}

.profile-upload-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-upload-preview > div:last-child {
  display: grid;
  gap: 3px;
}

.profile-upload-preview strong {
  color: var(--profile-text);
  font-size: 13px;
}

.profile-upload-preview span {
  color: var(--profile-muted);
  font-size: 10px;
  line-height: 1.5;
}

.profile-upload-form {
  display: grid;
  gap: 10px;
}

.profile-file-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px dashed #b7bdcc;
  border-radius: 13px;
  cursor: pointer;
  background: var(--profile-soft);
}

.profile-file-picker:hover,
.profile-file-picker:focus-within {
  border-color: var(--profile-accent);
  background: var(--profile-accent-soft);
}

.profile-file-picker > i {
  color: var(--profile-accent);
  font-size: 24px;
}

.profile-file-picker > span {
  display: grid;
  min-width: 0;
}

.profile-file-picker strong {
  color: var(--profile-text);
  font-size: 12px;
}

.profile-file-picker small {
  overflow: hidden;
  color: var(--profile-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.profile-remove-avatar-form {
  margin-top: 9px;
  text-align: center;
}

.profile-remove-avatar {
  border: 0;
  color: #bd4e4e;
  background: transparent;
  font-size: 10px;
  font-weight: 750;
}

.profile-file-picker.is-disabled,
.profile-remove-avatar:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.profile-upload-policy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid #dce9b5;
  border-radius: 12px;
  color: var(--profile-muted);
  background: #f4f9e5;
  font-size: 9px;
  line-height: 1.55;
}

.profile-upload-policy i {
  color: #7b9a00;
  font-size: 15px;
}

.profile-details-form {
  display: grid;
  gap: 17px;
}

.profile-field {
  display: grid;
  gap: 7px;
}

.profile-field > label {
  color: var(--profile-text);
  font-size: 11px;
  font-weight: 750;
}

.profile-field .form-control {
  min-height: 44px;
  border-color: var(--profile-border);
  color: var(--profile-text);
  background: var(--profile-soft);
}

.profile-field .form-control:focus {
  border-color: var(--profile-accent);
  box-shadow: 0 0 0 3px rgba(103, 88, 232, .1);
}

.profile-field > small {
  color: var(--profile-muted);
  font-size: 9px;
}

.profile-email-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--profile-border);
  border-radius: 9px;
  background: var(--profile-soft);
}

.profile-email-value strong {
  overflow: hidden;
  color: var(--profile-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-email-value span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
}

.profile-email-value .is-confirmed {
  color: #16815a;
}

.profile-email-value .is-unconfirmed {
  color: #b17a1c;
}

.profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 5px;
}

.profile-delete-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--home-border);
}

.profile-delete-account strong {
  color: #c24141;
}

.profile-delete-account p {
  margin: 5px 0 0;
  color: var(--home-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.profile-delete-account .btn {
  flex: 0 0 auto;
}

.profile-delete-modal .modal-title {
  color: #c24141;
}

@media (max-width: 640px) {
  .profile-delete-account {
    align-items: stretch;
    flex-direction: column;
  }
}

.profile-member-callout {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  min-height: 100%;
  background:
    radial-gradient(circle at 100% 0, rgba(185, 230, 0, .18), transparent 35%),
    var(--profile-panel);
}

.profile-member-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 24px;
  border-radius: 19px;
  color: #253000;
  background: #b9e600;
  font-size: 25px;
  box-shadow: 0 12px 24px rgba(155, 194, 0, .2);
}

.profile-member-callout h2 {
  margin: 8px 0 11px;
  color: var(--profile-text);
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -.035em;
}

.profile-member-callout p {
  margin: 0 0 22px;
  color: var(--profile-muted);
  font-size: 13px;
  line-height: 1.7;
}

.profile-member-callout .btn {
  width: 100%;
}

.profile-signin-link {
  align-self: center;
  margin-top: 13px;
  color: var(--profile-muted);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.profile-signin-link:hover {
  color: var(--profile-accent);
}

[data-theme="dark"] .profile-shell {
  --profile-text: #f1f3fa;
  --profile-muted: #9da5b9;
  --profile-panel: #141925;
  --profile-soft: #1a202e;
  --profile-border: #2a3141;
  --profile-accent: #a69aff;
  --profile-accent-soft: rgba(131, 112, 255, .14);
}

[data-theme="dark"] .profile-hero {
  background:
    radial-gradient(circle at 86% 10%, rgba(126, 106, 255, .22), transparent 30%),
    linear-gradient(130deg, #151a26 0%, #1b1a31 100%);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .profile-avatar-frame {
  border-color: rgba(30, 35, 49, .9);
}

[data-theme="dark"] .profile-account-badge.is-guest {
  color: #e6cc6d;
  background: rgba(222, 177, 49, .12);
}

[data-theme="dark"] .profile-account-badge.is-member {
  color: #65d7aa;
  background: rgba(36, 177, 119, .12);
}

[data-theme="dark"] .profile-upload-policy {
  border-color: #3d4921;
  background: #1c2414;
}

[data-theme="dark"] .profile-verification-lock {
  border-color: #574a25;
  background: #292313;
}

[data-theme="dark"] .profile-avatar-preset-image i {
  border-color: #141925;
}

@media (max-width: 900px) {
  .profile-grid,
  .profile-grid.is-guest {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .profile-shell {
    width: min(calc(100% - 20px), 1180px);
    padding-top: 18px;
  }

  .profile-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-home-link {
    top: 18px;
    right: 20px;
  }

  .profile-avatar-frame {
    flex-basis: 90px;
    width: 90px;
    height: 90px;
    border-radius: 25px;
  }

  .profile-avatar-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-form-actions .btn {
    width: 100%;
  }
}
.my-mbti-page {
    --mbti-navy: #111d5e;
    --mbti-violet: #7457e8;
    --mbti-coral: #ff7b73;
    --mbti-mint: #4bcbb0;
}

.my-mbti-hero {
    position: relative;
    min-height: 460px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
    overflow: hidden;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(135deg, #101a54 0%, #34247d 55%, #6d4bd8 100%);
    box-shadow: 0 24px 60px rgba(37, 31, 92, .24);
}

.my-mbti-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -180px;
    bottom: -260px;
    border-radius: 50%;
    background: rgba(116, 87, 232, .42);
    filter: blur(2px);
}

.my-mbti-hero.has-type-hero {
    display:block;
    min-height:520px;
    background:#17194b;
}

.my-mbti-hero.has-type-hero::before {
    inset:0;
    z-index:1;
    width:auto;
    height:auto;
    border-radius:0;
    background:linear-gradient(90deg,rgba(17,20,70,.98) 0%,rgba(17,20,70,.9) 27%,rgba(17,20,70,.48) 52%,rgba(17,20,70,.05) 76%);
    filter:none;
}

.my-mbti-hero.has-type-hero .my-mbti-hero-copy {
    width:52%;
    min-height:520px;
    padding:60px 48px 60px 64px;
}

.my-mbti-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 64px 24px 64px 64px;
}

.my-mbti-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: #c9c3ff;
}

.my-mbti-hero h2 {
    max-width: 580px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
}

.my-mbti-hero-copy > p {
    max-width: 580px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 1.06rem;
    line-height: 1.75;
}

.my-mbti-type {
    margin-bottom: 4px;
    font-size: clamp(3.8rem, 8vw, 6.5rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.055em;
    background: linear-gradient(90deg, #fff 0%, #d8d1ff 48%, #ffaaa4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.my-mbti-tagline {
    margin-top: 12px !important;
    font-size: 1.18rem !important;
    font-weight: 600;
    color: rgba(255, 255, 255, .82) !important;
}

.my-mbti-hero-art {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    background-image: linear-gradient(90deg, #211c67 0%, rgba(33, 28, 103, .12) 22%), url('/images/mbti-profile-hero.png');
    background-size: cover;
    background-position: 60% center;
}

.my-mbti-hero-art.has-type-art {
    position:absolute;
    inset:0;
    min-height:0;
    padding:0;
    background:#17194b;
}

.my-mbti-hero-art.has-type-art img {
    width: 100%;
    height: 100%;
    max-height:none;
    display:block;
    object-fit:cover;
    object-position:center;
    filter:none;
}

.my-mbti-art-badge {
    position:absolute;
    right:22px;
    bottom:20px;
    z-index:2;
    padding:.45rem .7rem;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    background:rgba(24,18,69,.62);
    color:rgba(255,255,255,.84);
    font-size:.66rem;
    font-weight:850;
    letter-spacing:.1em;
    backdrop-filter:blur(8px);
}

.my-mbti-visibility {
    min-width:132px;
    border:1px solid rgba(255,255,255,.55)!important;
    color:#fff!important;
    background:rgba(12,15,54,.58)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
    backdrop-filter:blur(9px);
    font-weight:800;
}

.my-mbti-visibility:hover { border-color:#fff!important; background:rgba(255,255,255,.16)!important; color:#fff!important; }
.my-mbti-visibility.is-public { border-color:#a9e900!important; background:#a9e900!important; color:#1d2850!important; box-shadow:0 8px 20px rgba(169,233,0,.22); }
.my-mbti-visibility.is-public:hover { background:#b8f526!important; color:#17203f!important; }

.my-mbti-content-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 22px;
    margin-top: 26px;
}

.my-mbti-info-card {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    padding: 32px;
    border: 1px solid #ebe8f6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(30, 38, 80, .07);
}

.my-mbti-info-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -70px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(116, 87, 232, .07);
}

.my-mbti-card-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 16px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #6044dc, #8d75f2);
    box-shadow: 0 10px 22px rgba(96, 68, 220, .25);
}

.my-mbti-card-icon.is-coral {
    background: linear-gradient(135deg, #f66f69, #ff9d84);
    box-shadow: 0 10px 22px rgba(246, 111, 105, .22);
}

.my-mbti-card-icon.is-mint {
    background: linear-gradient(135deg, #29af97, #63d9bd);
    box-shadow: 0 10px 22px rgba(41, 175, 151, .22);
}

.my-mbti-section-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    color: #8b80ba;
}

.my-mbti-info-card h3 {
    margin: 7px 0 13px;
    color: #202744;
    font-size: 1.35rem;
    font-weight: 800;
}

.my-mbti-info-card p {
    margin: 0;
    color: #6e748c;
    font-size: .98rem;
    line-height: 1.75;
}

.my-mbti-strengths {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.my-mbti-strengths span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #514399;
    font-size: .86rem;
    font-weight: 700;
    background: #f2efff;
}

.my-mbti-strengths i {
    color: var(--mbti-violet);
}

.my-mbti-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 18px 22px;
    border-radius: 16px;
    color: #71778c;
    line-height: 1.6;
    background: #f7f7fb;
}

.my-mbti-note i {
    margin-top: 2px;
    color: var(--mbti-violet);
    font-size: 1.1rem;
}

@media (max-width: 1199.98px) {
    .my-mbti-content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .my-mbti-intro-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .my-mbti-hero {
        grid-template-columns: 1fr;
    }

    .my-mbti-hero-copy {
        padding: 48px 36px 20px;
    }

    .my-mbti-hero.has-type-hero { min-height:500px; }
    .my-mbti-hero.has-type-hero .my-mbti-hero-copy { width:70%; min-height:500px; padding:48px 36px; }
    .my-mbti-hero.has-type-hero::before { background:linear-gradient(90deg,rgba(17,20,70,.97),rgba(17,20,70,.75) 52%,rgba(17,20,70,.08)); }

    .my-mbti-hero-art {
        min-height: 310px;
        background-image: linear-gradient(180deg, #2d2476 0%, rgba(45, 36, 118, 0) 28%), url('/images/mbti-profile-hero.png');
        background-position: 60% center;
    }

}

@media (max-width: 575.98px) {
    .my-mbti-hero {
        min-height: 0;
        border-radius: 20px;
    }

    .my-mbti-hero-copy {
        padding: 38px 24px 12px;
    }

    .my-mbti-hero-art {
        min-height: 240px;
    }

    .my-mbti-hero-art.has-type-art img { max-height:235px; }

    .my-mbti-hero.has-type-hero { min-height:540px; }
    .my-mbti-hero.has-type-hero .my-mbti-hero-copy { width:100%; min-height:540px; justify-content:flex-end; padding:34px 24px; }
    .my-mbti-hero.has-type-hero::before { background:linear-gradient(0deg,rgba(17,20,70,.98) 0%,rgba(17,20,70,.8) 45%,rgba(17,20,70,.08) 78%); }
    .my-mbti-hero.has-type-hero .my-mbti-hero-art img { max-height:none; object-position:center top; }

    .my-mbti-content-grid {
        grid-template-columns: 1fr;
    }

    .my-mbti-intro-card {
        grid-column: auto;
    }

    .my-mbti-info-card {
        min-height: 0;
        padding: 26px;
    }
}
/* BanmalZone brand marks */
.banmal-aside-logo-link,
.banmal-header-logo-link,
.banmal-mobile-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.banmal-header-logo-link,
.banmal-mobile-logo-link {
    border-radius: 14px;
}

.banmal-aside-logo {
    display: block;
    width: 72px;
    height: auto;
    border-radius: 18px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18));
}

.banmal-header-logo {
    display: block;
    width: 240px;
    height: auto;
}

.banmal-mobile-logo {
    display: block;
    width: 165px;
    height: auto;
}

@media (max-width: 1199.98px) {
    .banmal-header-logo {
        width: 210px;
    }
}

/* Keep theme-specific marks last so the shared image display rules cannot override them. */
.banmal-header-logo.banmal-logo-dark,
.banmal-mobile-logo.banmal-logo-dark {
    display: none;
}

[data-theme="dark"] .banmal-header-logo.banmal-logo-light,
[data-theme="dark"] .banmal-mobile-logo.banmal-logo-light {
    display: none;
}

[data-theme="dark"] .banmal-header-logo.banmal-logo-dark,
[data-theme="dark"] .banmal-mobile-logo.banmal-logo-dark {
    display: block;
}
/* MBTI type library */
.mbti-type-card {
    display: block;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mbti-type-card:hover {
    transform: translateY(-4px);
    border-color: #8d75f2 !important;
    box-shadow: 0 14px 30px rgba(58, 48, 117, .12);
}

.mbti-type-card-link {
    color: #7457e8;
    font-weight: 700;
}

.mbti-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--mbti-badge-ink, #fff);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .055em;
    background: var(--mbti-badge, #7457e8);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--mbti-badge, #7457e8) 28%, transparent);
}

.mbti-type-name {
    margin-bottom: .7rem;
    font-size: 1.35rem;
}

/* Analysts */
.mbti-type-badge--intj { --mbti-badge: #5b3cc4; }
.mbti-type-badge--intp { --mbti-badge: #2877b8; }
.mbti-type-badge--entj { --mbti-badge: #8a2f71; }
.mbti-type-badge--entp { --mbti-badge: #7048d7; }

/* Diplomats */
.mbti-type-badge--infj { --mbti-badge: #25816f; }
.mbti-type-badge--infp { --mbti-badge: #55a36c; }
.mbti-type-badge--enfj { --mbti-badge: #15947b; }
.mbti-type-badge--enfp { --mbti-badge: #6eaa38; }

/* Sentinels */
.mbti-type-badge--istj { --mbti-badge: #3e6487; }
.mbti-type-badge--isfj { --mbti-badge: #6889a4; }
.mbti-type-badge--estj { --mbti-badge: #315a92; }
.mbti-type-badge--esfj { --mbti-badge: #4e8e9d; }

/* Explorers */
.mbti-type-badge--istp { --mbti-badge: #a05a2c; }
.mbti-type-badge--isfp { --mbti-badge: #c06a6f; }
.mbti-type-badge--estp { --mbti-badge: #cf493f; }
.mbti-type-badge--esfp { --mbti-badge: #d34d91; }

.mbti-detail-nav a { color: #7457e8; font-weight: 700; }
.mbti-lobby-button { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.7rem 1.05rem; border:1px solid #8ed000!important; border-radius:14px; background:linear-gradient(135deg,#a9e900,#8fd400)!important; color:#1d2940!important; box-shadow:0 9px 22px rgba(150,215,0,.2); font-weight:850; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.mbti-lobby-button i:first-child { font-size:1.25rem; }
.mbti-lobby-button i:last-child { font-size:1rem; transition:transform .18s ease; }
.mbti-lobby-button:hover,.mbti-lobby-button:focus-visible { color:#141f35!important; filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 28px rgba(150,215,0,.3); }
.mbti-lobby-button:hover i:last-child { transform:translateX(3px); }
[data-theme="dark"] .mbti-lobby-button { border-color:#b4ef28!important; background:linear-gradient(135deg,#b7ef1d,#98dc00)!important; color:#18220d!important; }
@media (max-width:767.98px) { .mbti-lobby-button { width:100%; margin-top:.25rem; } }
.mbti-detail-shell { overflow: hidden; border: 1px solid #e9e6f3; border-radius: 26px; background: #fff; box-shadow: 0 18px 55px rgba(30, 38, 80, .09); }
.mbti-detail-hero { position: relative; min-height: 520px; overflow: hidden; background: #17194b; }
.mbti-detail-hero > img { width: 100%; height: 520px; display: block; object-fit: cover; }
.mbti-detail-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; width: 50%; padding: 64px; color: #fff; background: linear-gradient(90deg, rgba(19,20,66,.97), rgba(19,20,66,.75) 72%, transparent); }
.mbti-detail-kicker,.mbti-detail-label { font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: #a99aff; }
.mbti-detail-overlay h1 { margin: 10px 0 0; font-size: clamp(4rem, 8vw, 7rem); line-height: .9; font-weight: 900; }
.mbti-detail-overlay h2 { margin: 14px 0 0; font-size: 1.7rem; font-weight: 800; }
.mbti-detail-overlay p { margin: 14px 0 0; max-width: 470px; color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.7; }
.mbti-detail-content { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 22px; padding: 36px; }
.mbti-detail-intro,.mbti-detail-card { padding: 30px; border: 1px solid #ece9f5; border-radius: 20px; background: #fbfaff; }
.mbti-detail-card { background: #fff; }
.mbti-detail-content h2 { margin: 8px 0 14px; color: #222943; font-weight: 800; }
.mbti-detail-content p { margin: 0; color: #687087; line-height: 1.75; }
.mbti-detail-strengths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mbti-detail-strengths span { padding: 8px 12px; border-radius: 999px; color: #514399; font-weight: 700; background: #f0edff; }
.mbti-detail-card-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 22px; border-radius: 15px; color: #fff; font-size: 1.45rem; background: linear-gradient(135deg,#6044dc,#8d75f2); }
.mbti-detail-card.is-growth .mbti-detail-card-icon { background: linear-gradient(135deg,#29af97,#63d9bd); }
.mbti-detail-footer { display: flex; justify-content: center; gap: 12px; padding: 0 36px 38px; }
[data-theme="dark"] .mbti-detail-shell,[data-theme="dark"] .mbti-detail-card { border-color: #313650; background: #191d2d; }
[data-theme="dark"] .mbti-detail-intro { border-color: #313650; background: #202539; }
[data-theme="dark"] .mbti-detail-content h2 { color: #f1f3ff; }
[data-theme="dark"] .mbti-detail-content p { color: #aeb6cd; }
@media (max-width: 991.98px) { .mbti-detail-overlay { width: 70%; padding: 42px; } .mbti-detail-content { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .mbti-detail-hero,.mbti-detail-hero > img { height: 460px; min-height: 460px; } .mbti-detail-overlay { width: 100%; padding: 28px; background: linear-gradient(0deg,rgba(19,20,66,.96),rgba(19,20,66,.18)); justify-content: flex-end; } .mbti-detail-content { padding: 20px; } .mbti-detail-footer { flex-direction: column; padding: 0 20px 24px; } }
/* Polished MBTI test flow */
.mbti-result-scores { padding:1.4rem; border:1px solid rgba(92,76,155,.12); border-radius:24px; background:rgba(120,87,232,.035); }
.mbti-result-score-heading { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.25rem; text-align:left; }
.mbti-result-score-heading h2 { margin:.3rem 0 0; font-size:clamp(1.4rem,2.5vw,2rem); }
.mbti-result-score-heading p { max-width:430px; margin:0; color:#73798c; font-size:.88rem; line-height:1.55; }
.mbti-result-score-heading i { color:#7656e6; font-size:1.1rem; }
.mbti-result-score-card { height:100%; padding:1.15rem; border:1px solid rgba(87,76,135,.12); border-radius:19px; background:#fff; box-shadow:0 8px 22px rgba(38,31,70,.045); }
.mbti-result-score-summary { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.15rem .75rem; margin-bottom:1rem; }
.mbti-result-score-summary>span { grid-row:1/3; display:grid; place-items:center; min-width:58px; height:48px; border-radius:14px; background:#f0edff; color:#7254dc; font-size:.76rem; font-weight:900; }
.mbti-result-score-summary strong { font-size:1.08rem; }
.mbti-result-score-summary em { color:#7c8192; font-size:.77rem; font-style:normal; font-weight:750; }
.mbti-result-axis-labels { display:flex; justify-content:space-between; margin-bottom:.5rem; color:#767b8c; font-size:.76rem; font-weight:700; }
.mbti-result-axis-labels b { color:#29253b; font-size:.95rem; }
.mbti-result-axis-track { position:relative; height:10px; margin:0 7px; border-radius:999px; background:linear-gradient(90deg,#8b6bed 0%,#d8d3eb 48%,#d8d3eb 52%,#9ae629 100%); }
.mbti-result-axis-center { position:absolute; top:-3px; bottom:-3px; left:50%; width:2px; border-radius:2px; background:#fff; box-shadow:0 0 0 1px rgba(50,44,75,.12); }
.mbti-result-axis-marker { position:absolute; top:50%; width:20px; height:20px; border:4px solid #fff; border-radius:50%; background:#302842; box-shadow:0 3px 9px rgba(37,30,62,.28); transform:translate(-50%,-50%); }
.mbti-score-explanation { margin-top:1rem; padding:.9rem 1rem; border-radius:15px; background:rgba(118,86,230,.07); color:#666c7e; font-size:.85rem; }
.mbti-score-explanation summary { color:#514566; font-weight:850; cursor:pointer; }
.mbti-score-explanation summary i { margin-right:.3rem; color:#7656e6; }
.mbti-score-explanation[open] summary { margin-bottom:.65rem; }
.mbti-score-explanation p { line-height:1.65; }
.mbti-result-save-form { max-width:560px; }
.mbti-result-actions { display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:nowrap; }
.mbti-result-actions .btn { min-width:145px; margin:0; }
[data-theme="dark"] .mbti-result-scores { border-color:rgba(191,177,255,.14); background:rgba(120,87,232,.055); }
[data-theme="dark"] .mbti-result-score-heading p,[data-theme="dark"] .mbti-result-score-summary em { color:#aaaebd; }
[data-theme="dark"] .mbti-result-score-card { border-color:#3d3c4b; background:#22232e; box-shadow:0 10px 26px rgba(0,0,0,.12); }
[data-theme="dark"] .mbti-result-score-summary>span { background:#39334f; color:#c8baff; }
[data-theme="dark"] .mbti-result-axis-labels,[data-theme="dark"] .mbti-score-explanation { color:#b0b3c0; }
[data-theme="dark"] .mbti-result-axis-labels b,[data-theme="dark"] .mbti-score-explanation summary { color:#f0edf8; }
[data-theme="dark"] .mbti-score-explanation { background:rgba(139,107,237,.1); }
@media (max-width:767.98px) { .mbti-result-scores { padding:1rem; } .mbti-result-score-heading { align-items:flex-start; flex-direction:column; gap:.65rem; } }
@media (max-width:420px) { .mbti-result-actions .btn { min-width:0; flex:1; padding-left:.8rem; padding-right:.8rem; } }
.mbti-test-page { max-width: 1080px; }
.mbti-test-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:1.5rem; }
.mbti-test-intro h1 { max-width:720px; margin:.45rem 0 .65rem; font-size:clamp(2rem,4vw,3.35rem); line-height:1.12; letter-spacing:-.045em; }
.mbti-test-intro p { max-width:680px; margin:0; color:var(--muted-text,#687086); font-size:1.05rem; }
.mbti-test-eyebrow { color:#7857e8; font-size:.76rem; font-weight:900; letter-spacing:.16em; }
.mbti-test-facts { display:flex; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
.mbti-test-facts span { display:flex; align-items:center; gap:.35rem; padding:.58rem .8rem; border:1px solid rgba(120,87,232,.13); border-radius:999px; background:rgba(120,87,232,.07); color:#626a7d; white-space:nowrap; }
.mbti-test-facts i { color:#7857e8; font-size:1.1rem; }
.mbti-test-facts strong { color:inherit; }
.mbti-test-sticky { position:sticky; top:.75rem; z-index:20; margin-bottom:2rem; padding:1rem 1.1rem .85rem; border:1px solid rgba(90,77,153,.13); border-radius:20px; background:rgba(255,255,255,.9); box-shadow:0 12px 35px rgba(39,31,82,.09); backdrop-filter:blur(14px); }
@media (min-width:992px) {
  body[data-kt-sticky-header="on"] .mbti-test-sticky { top:calc(80px + .75rem); }
}
.mbti-test-progress-copy { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.mbti-test-progress-copy div { display:flex; align-items:baseline; gap:.7rem; }
.mbti-test-progress-copy span { color:#858ba0; font-size:.78rem; font-weight:800; }
.mbti-test-progress-copy strong { font-size:.98rem; }
.mbti-test-progress-count { color:#6546d6!important; font-size:.9rem!important; }
.mbti-test-progress { height:7px; overflow:hidden; border-radius:999px; background:#eceaf5; }
.mbti-test-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7b5ceb,#9ae629); transition:width .35s ease; }
.mbti-test-steps { display:flex; justify-content:center; gap:.6rem; margin-top:.75rem; }
.mbti-test-steps button { width:30px; height:30px; border:0; border-radius:50%; background:#eeecf6; color:#85829a; font-size:.78rem; font-weight:900; transition:.2s ease; }
.mbti-test-steps button.is-active { background:#7656e6; color:#fff; box-shadow:0 5px 14px rgba(118,86,230,.32); transform:scale(1.08); }
.mbti-test-steps button.is-complete { background:#9ae629; color:#25310f; }
.mbti-test-steps button:disabled { opacity:.45; cursor:not-allowed; }
.mbti-test-section { animation:mbtiSectionIn .38s ease both; }
.mbti-test-section-heading { display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.mbti-test-section-heading>div>span { color:#856ae8; font-size:.72rem; font-weight:900; letter-spacing:.13em; }
.mbti-test-section-heading h2 { margin:.15rem 0; font-size:clamp(1.55rem,3vw,2.1rem); letter-spacing:-.03em; }
.mbti-test-section-heading p { margin:0; color:#777e90; }
.mbti-test-section-icon,.mbti-test-review-icon { display:grid; flex:0 0 auto; place-items:center; width:54px; height:54px; border-radius:18px; background:linear-gradient(145deg,#7656e6,#9b82f5); color:#fff; font-size:1.65rem; box-shadow:0 9px 20px rgba(118,86,230,.22); }
.mbti-test-question-list { display:grid; gap:1rem; }
.mbti-question-card { min-width:0; margin:0; padding:1.25rem; border:1px solid rgba(87,76,135,.12); border-radius:22px; background:#fff; box-shadow:0 9px 26px rgba(38,31,70,.055); transition:border-color .2s,box-shadow .2s; }
.mbti-question-card:focus-within { border-color:rgba(118,86,230,.45); box-shadow:0 10px 30px rgba(89,65,187,.1); }
.mbti-question-card.has-error { border-color:#e96874; }
.mbti-question-card legend { display:flex; align-items:flex-start; width:100%; margin:0 0 1rem; color:#24243a; font-size:1.08rem; font-weight:750; line-height:1.55; }
.mbti-question-card legend>span { display:grid; flex:0 0 auto; place-items:center; width:30px; height:30px; margin-right:.7rem; border-radius:10px; background:#f0edff; color:#7254dc; font-size:.82rem; }
.mbti-answer-scale { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; }
.mbti-answer-option { position:relative; display:flex; min-width:0; min-height:78px; padding:.75rem .35rem; border:1.5px solid #e8e6ef; border-radius:16px; flex-direction:column; align-items:center; justify-content:center; gap:.42rem; color:#74798b; text-align:center; cursor:pointer; transition:.18s ease; }
.mbti-answer-option:hover { border-color:#bdb4dd; background:#faf9ff; transform:translateY(-2px); }
.mbti-answer-option input { position:absolute; opacity:0; pointer-events:none; }
.mbti-answer-dot { width:18px; height:18px; border:2px solid currentColor; border-radius:50%; }
.mbti-answer-label { font-size:.8rem; font-weight:800; line-height:1.2; word-break:keep-all; }
.mbti-answer-option.is-selected,.mbti-answer-option:has(input:checked) { color:#fff; transform:translateY(-3px) scale(1.015); box-shadow:0 10px 24px rgba(50,43,83,.2); animation:mbtiAnswerSelected .24s ease both; }
.mbti-answer-option.is-selected .mbti-answer-dot,.mbti-answer-option:has(input:checked) .mbti-answer-dot { border:5px solid rgba(255,255,255,.92); background:rgba(255,255,255,.18); }
.mbti-answer-option.is-disagree.is-selected,.mbti-answer-option.is-disagree:has(input:checked) { border-color:#e96575; background:linear-gradient(145deg,#f27b87,#df586a); }
.mbti-answer-option.is-neutral.is-selected,.mbti-answer-option.is-neutral:has(input:checked) { border-color:#747b90; background:linear-gradient(145deg,#8b91a2,#6d7387); }
.mbti-answer-option.is-agree.is-selected,.mbti-answer-option.is-agree:has(input:checked) { border-color:#6d4ed8; background:linear-gradient(145deg,#8566ed,#6849d2); }
.mbti-question-card:has(input:checked) { border-color:rgba(118,86,230,.25); background:linear-gradient(135deg,#fff 0%,#fcfbff 100%); }
.mbti-question-error { margin-top:.6rem; color:#db4d5b; font-size:.8rem; font-weight:800; }
.mbti-test-actions { display:flex; justify-content:space-between; gap:1rem; margin-top:1.5rem; }
.mbti-test-actions .btn { min-width:145px; border-radius:14px; font-weight:800; }
.mbti-test-review { padding-top:.5rem; }
.mbti-test-review-hero { max-width:650px; margin:0 auto 1.5rem; text-align:center; }
.mbti-test-review-icon { margin:0 auto .9rem; width:68px; height:68px; border-radius:22px; font-size:2rem; background:linear-gradient(145deg,#8cd824,#b5ef58); color:#273a0c; }
.mbti-test-review-hero h2 { margin:.35rem 0; font-size:clamp(1.7rem,3vw,2.4rem); }
.mbti-test-review-hero p { color:#777e90; }
.mbti-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.mbti-review-card { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:.85rem; padding:1rem; border:1px solid #e5e2ee; border-radius:18px; background:#fff; color:inherit; text-align:left; transition:.2s; }
.mbti-review-card:hover { border-color:#a99ae6; transform:translateY(-2px); box-shadow:0 8px 20px rgba(50,43,83,.08); }
.mbti-review-card .mbti-test-section-icon { width:42px; height:42px; border-radius:14px; font-size:1.2rem; box-shadow:none; }
.mbti-review-card small,.mbti-review-card strong { display:block; }
.mbti-review-card small { color:#8b8fa0; font-size:.67rem; font-weight:900; }
.mbti-review-status { color:#7656e6; font-size:.83rem; font-weight:900; }
.mbti-test-toast { position:fixed; right:1.5rem; bottom:1.5rem; z-index:100; display:flex; align-items:center; gap:.8rem; max-width:min(520px,calc(100vw - 2rem)); min-height:68px; padding:1rem 1.25rem; border:2px solid #ff8b78; border-radius:18px; background:linear-gradient(135deg,#382b48,#29243c); color:#fff; box-shadow:0 16px 42px rgba(0,0,0,.34),0 0 0 4px rgba(255,139,120,.1); font-size:1.05rem; font-weight:850; line-height:1.45; animation:mbtiSectionIn .25s ease; }
.mbti-test-toast::before { display:grid; flex:0 0 auto; place-items:center; width:36px; height:36px; border-radius:12px; background:#ff806f; color:#fff; font-family:"Line Awesome Free"; font-size:1.35rem; font-weight:900; content:"\f071"; }
.mbti-test-toast.is-positive { border-color:#a9e900; box-shadow:0 16px 42px rgba(0,0,0,.3),0 0 0 4px rgba(169,233,0,.1); }
.mbti-test-toast.is-positive::before { background:#a9e900; color:#24300f; content:"\f058"; }
@keyframes mbtiSectionIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes mbtiAnswerSelected { from { transform:translateY(0) scale(.97); } to { transform:translateY(-3px) scale(1.015); } }

[data-theme="dark"] .mbti-test-intro p,[data-theme="dark"] .mbti-test-section-heading p,[data-theme="dark"] .mbti-test-review-hero p { color:#a7acc0; }
[data-theme="dark"] .mbti-test-sticky { border-color:rgba(191,177,255,.15); background:rgba(25,27,38,.9); box-shadow:0 14px 34px rgba(0,0,0,.22); }
[data-theme="dark"] .mbti-test-progress { background:#393747; }
[data-theme="dark"] .mbti-test-steps button { background:#373444; color:#b8b3c9; }
[data-theme="dark"] .mbti-question-card,[data-theme="dark"] .mbti-review-card { border-color:#3d3c4b; background:#22232e; box-shadow:0 10px 30px rgba(0,0,0,.13); }
[data-theme="dark"] .mbti-question-card legend { color:#f1eff8; }
[data-theme="dark"] .mbti-question-card legend>span { background:#39334f; color:#c6b7ff; }
[data-theme="dark"] .mbti-answer-option { border-color:#444451; color:#b7b8c5; }
[data-theme="dark"] .mbti-answer-option:hover { border-color:#7f72ad; background:#2b2938; }
[data-theme="dark"] .mbti-question-card:has(input:checked) { border-color:rgba(168,145,255,.34); background:linear-gradient(135deg,#242530 0%,#282633 100%); }

@media (max-width:767.98px) {
  .mbti-test-page { padding-top:2rem!important; }
  .mbti-test-intro { align-items:flex-start; flex-direction:column; gap:1rem; }
  .mbti-test-facts { justify-content:flex-start; }
  .mbti-test-sticky { top:.35rem; border-radius:16px; }
  .mbti-test-progress-copy div { align-items:flex-start; flex-direction:column; gap:.05rem; }
  .mbti-test-steps { margin-top:.6rem; }
  .mbti-test-section-heading { align-items:flex-start; }
  .mbti-question-card { padding:1rem .8rem; border-radius:18px; }
  .mbti-answer-scale { gap:.3rem; }
  .mbti-answer-option { min-height:70px; padding:.55rem .15rem; border-radius:12px; }
  .mbti-answer-label { font-size:.67rem; }
  .mbti-answer-dot { width:15px; height:15px; }
  .mbti-review-grid { grid-template-columns:1fr; }
  .mbti-test-actions .btn { min-width:0; flex:1; }
  .mbti-test-toast { right:1rem; bottom:1rem; left:1rem; max-width:none; min-height:62px; padding:.9rem 1rem; font-size:.96rem; }
}