:root {
  --blue: #0d6efd;
  --blue-2: #246bff;
  --text: #151822;
  --muted: #8d93a8;
  --line: #ebeef5;
  --page: #f7f7f8;
  --nav: #f2f1fa;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
  --press-duration: 120ms;
  --press-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --press-control-scale: 0.97;
  --press-icon-scale: 0.92;
  --press-row-scale: 0.99;
  --press-brightness: 0.9;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body,
#app {
  min-height: 100%;
}

html {
  color-scheme: dark;
  background: #000000;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--page);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

input,
textarea,
select,
[contenteditable="true"],
pre,
code,
[data-allow-text-selection="true"] {
  -webkit-user-select: text;
  user-select: text;
}

button {
  cursor: pointer;
}

button,
a,
summary,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  background: #fff;
  padding: 74px 18px 32px;
}

.auth-panel {
  width: min(388px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.auth-status-panel {
  min-height: 360px;
  justify-content: center;
}

.dot-logo {
  width: 96px;
  height: 96px;
  position: relative;
  margin: 0 auto 28px;
}

.dot-logo span {
  position: absolute;
  left: 46px;
  top: 46px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: hsl(var(--hue), 88%, 60%);
  transform: rotate(var(--rot)) translateX(var(--dist));
  opacity: 0.92;
}

.dot-logo.app-logo-mark {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: #0b0f1a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.dot-logo.app-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-title {
  margin: 0 0 5px;
  color: #155cff;
  font-size: 24px;
  font-weight: 500;
}

.auth-copy {
  margin: 0 0 20px;
  color: #747890;
  font-size: 19px;
  line-height: 1.55;
}

.auth-copy.small {
  font-size: 15px;
  text-align: center;
  margin-top: 24px;
}

.field {
  width: 100%;
  height: 40px;
  border: 1px solid #e3e5ea;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  outline: none;
  padding: 0 13px;
  margin-bottom: 16px;
}

.field::placeholder,
textarea::placeholder {
  color: #aeb4c0;
}

.password-wrap {
  position: relative;
}

.password-wrap .field {
  padding-right: 54px;
}

.ghost-icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #444;
  background: transparent;
  display: grid;
  place-items: center;
}

.password-wrap .ghost-icon {
  position: absolute;
  right: 0;
  top: 0;
}

.auth-link {
  color: #0068ff;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 500;
}

button.auth-link,
.forgot-row .auth-link,
.auth-copy.small .auth-link,
.terms .auth-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  vertical-align: middle;
}

.terms .auth-link,
button.auth-link {
  padding: 0 2px;
}

.forgot-row {
  text-align: right;
  margin: -8px 0 34px;
}

.auth-field-label {
  display: block;
  margin: 0 0 6px;
  color: #4d5365;
  font-size: 0.82rem;
  font-weight: 760;
}

.auth-form-note {
  margin: -2px 0 14px;
  color: #747890;
  font-size: 0.84rem;
  line-height: 1.35;
}

.auth-form-feedback {
  margin: -2px 0 14px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.auth-form-feedback[hidden] {
  display: none;
}

.auth-form-feedback.is-error {
  border-color: color-mix(in srgb, var(--destructive) 32%, var(--separator));
  background: color-mix(in srgb, var(--destructive) 8%, var(--surface));
  color: var(--destructive);
}

.auth-form-feedback.is-success {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--separator));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
}

.signup-email-field {
  margin-bottom: 8px;
}

.signup-domain-status {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 0.8rem;
  font-weight: 690;
  line-height: 1.25;
}

.signup-domain-status-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.signup-domain-status-icon .ui-icon {
  width: 14px;
  height: 14px;
}

.signup-domain-status.is-checking {
  color: var(--blue);
}

.signup-domain-status.is-match {
  border-color: color-mix(in srgb, #34c759 42%, var(--separator));
  background: color-mix(in srgb, #34c759 10%, var(--surface));
  color: #34c759;
}

.signup-domain-status.is-invalid,
.signup-domain-status.is-missing,
.signup-domain-status.is-error {
  border-color: color-mix(in srgb, var(--destructive) 28%, var(--separator));
  background: color-mix(in srgb, var(--destructive) 7%, var(--surface));
  color: var(--destructive);
}

.auth-screen.auth-entry-screen {
  place-items: start center;
  min-height: 100svh;
  padding: calc(26px + env(safe-area-inset-top)) 18px 28px;
}

.auth-panel.auth-entry-panel {
  gap: 14px;
  width: min(420px, 100%);
  border: 0;
  background: transparent;
  padding: 0;
}

.auth-app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
}

.auth-panel.auth-entry-panel .dot-logo.app-logo-mark {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 17px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.auth-brand-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.auth-brand-copy strong {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.1;
}

.auth-brand-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 690;
  line-height: 1.22;
}

.auth-task-card {
  display: grid;
  gap: 0;
  border: 1px solid var(--separator);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)),
    var(--surface);
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 46px rgba(0, 0, 0, 0.22);
}

.auth-task-card .auth-title {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 1.38rem;
  font-weight: 840;
}

.auth-task-card .auth-copy {
  margin-bottom: 16px;
}

.auth-task-card .primary-btn {
  min-height: 46px;
  border-radius: 15px;
  font-size: 0.94rem;
}

.auth-secondary-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.auth-secondary-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
}

.auth-secondary-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
  color: var(--blue);
}

.auth-secondary-icon .ui-icon,
.auth-secondary-chevron .ui-icon {
  width: 18px;
  height: 18px;
}

.auth-secondary-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.auth-secondary-copy strong,
.auth-secondary-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-secondary-copy strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.15;
}

.auth-secondary-copy small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.22;
}

.auth-secondary-chevron {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #8b90a0;
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: #e6e8ee;
}

.verification-notice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d8e4ff;
  border-radius: 12px;
  background: #f4f8ff;
  color: #4c628f;
  font-size: 14px;
  line-height: 1.4;
}

.verification-notice.is-success {
  border-color: rgba(52, 199, 89, 0.34);
  background: rgba(52, 199, 89, 0.12);
  color: #d6f8df;
}

.verification-notice-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.14);
  color: var(--blue);
}

.verification-notice.is-success .verification-notice-icon {
  background: rgba(52, 199, 89, 0.16);
  color: #34c759;
}

.verification-notice-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.verification-notice-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.verification-notice-copy strong {
  color: inherit;
  font-size: 0.95rem;
}

.verification-notice p,
.verification-notice small {
  margin: 0;
}

.verification-notice small {
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 0.78rem;
  font-weight: 720;
}

.verification-notice-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.verification-notice-actions .auth-link {
  min-height: 44px;
  border: 1px solid rgba(10, 132, 255, 0.26);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(10, 132, 255, 0.08);
}

.primary-btn {
  height: 39px;
  border: 0;
  border-radius: 18px;
  background: var(--blue-2);
  color: #fff;
  font-weight: 700;
  width: 100%;
  box-shadow: none;
}

.terms {
  margin: 10px 0 24px;
  color: #8b90a0;
  text-align: center;
  line-height: 2.1;
}

.institution-screen {
  padding-top: 38px;
}

.institution-panel {
  width: min(620px, 100%);
  gap: 14px;
}

.institution-search .field {
  margin-bottom: 12px;
}

.institution-supported-card {
  display: grid;
  gap: 12px;
}

.institution-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.institution-section-head h2 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.18;
}

.institution-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.school-access-guide {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--separator));
  border-radius: 16px;
  background:
    radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 48%),
    color-mix(in srgb, var(--blue) 5%, var(--surface));
  padding: 13px;
}

.school-access-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue);
}

.school-access-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.school-access-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
  text-align: left;
}

.school-access-copy strong {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.16;
}

.school-access-copy small,
.school-access-copy em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.school-access-copy em {
  color: color-mix(in srgb, var(--muted) 84%, var(--blue));
  font-weight: 720;
}

.institution-step-list {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.institution-step-list li {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--separator) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  padding: 10px;
}

.institution-step-index {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1;
}

.institution-step-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.institution-step-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.institution-step-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.institution-step-copy strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.18;
}

.institution-step-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.institution-list {
  display: grid;
  gap: 12px;
}

.institution-row,
.institution-request,
.institution-empty {
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  padding: 14px;
}

.institution-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.institution-row.is-match {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--separator));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 58%),
    var(--surface);
}

.institution-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.institution-row-main strong,
.institution-request h2 {
  color: var(--text);
  font-size: 1rem;
}

.institution-row-main span,
.institution-row-main small,
.institution-empty span {
  color: var(--muted);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.institution-actions {
  display: grid;
  gap: 10px;
}

.institution-primary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--separator));
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 64%),
    var(--surface);
  padding: 14px;
}

.institution-primary-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.institution-primary-card strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.institution-primary-card span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.3;
}

.institution-primary-card .primary-btn {
  min-width: 142px;
}

.institution-note {
  min-height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--fill);
  color: var(--muted);
  padding: 8px 10px;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.25;
}

.access-code-toggle {
  justify-self: center;
  font-size: 0.84rem;
}

.access-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.access-code-row .field {
  height: 44px;
  margin: 0;
}

.access-code-row .secondary-btn {
  min-width: 132px;
  min-height: 44px;
  height: auto;
}

.institution-request {
  display: grid;
  gap: 10px;
}

.institution-supported-toggle {
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  padding: 12px;
}

.institution-supported-toggle summary {
  color: var(--blue);
  cursor: pointer;
  font-weight: 780;
}

.institution-supported-toggle[open] summary {
  margin-bottom: 12px;
}

.school-request-toggle {
  margin-top: 18px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  padding: 12px;
}

.institution-request-disclosure {
  margin-top: 0;
  margin-bottom: 4px;
}

.school-request-toggle summary {
  color: var(--blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 760;
}

.school-request-toggle:not([open]) > .compact-request {
  display: none;
}

.school-request-toggle[open] > summary {
  margin-bottom: 12px;
}

.compact-request {
  margin-top: 12px;
  border: 0;
  background: transparent;
  padding: 0;
}

.institution-request h2 {
  margin: 0;
}

.institution-request .field,
.institution-request textarea {
  margin: 0;
}

.institution-request textarea {
  min-height: 86px;
}

.institution-signout {
  margin: 16px auto 0;
}

.unsupported-panel {
  gap: 12px;
}

.review-code-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  padding: 14px;
}

.review-code-card strong {
  color: var(--text);
  font-size: 1rem;
}

.review-code-card small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.app-shell {
  height: 100vh;
  overflow: hidden;
  background: var(--page);
}

.page {
  height: calc(100vh - 88px);
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 34px;
}

.page-header {
  min-height: 50px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  margin-bottom: 18px;
}

.page-title {
  margin: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
}

.page-title.left {
  text-align: left;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.circle-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e7e9ef;
  border-radius: 50%;
  background: #fff;
  color: #6f7690;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}

.circle-btn.danger {
  color: #ff1a2d;
}

.section-title {
  margin: 0 0 24px;
  color: #6f738d;
  font-size: 18px;
  font-weight: 400;
}

.browse-heading {
  max-width: 1060px;
  margin: 30px auto 32px;
  text-align: left;
}

.browse-heading h1 {
  margin: 0 0 24px;
  text-align: left;
  font-size: 20px;
}

.browse-heading p {
  margin: 0;
  color: #8f94a8;
  font-size: 13px;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 8px;
}

.world-card {
  min-height: 96px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  text-align: left;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  box-shadow: none;
}

.world-card.wide {
  grid-column: 1 / -1;
}

.world-card .world-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  text-align: center;
  pointer-events: none;
}

.world-card .world-art-inner {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  font-size: 47px;
  line-height: 1;
  filter: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.08));
}

.world-card .world-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-card .arrow {
  position: relative;
  z-index: 1;
  justify-self: end;
  font-size: 27px;
  line-height: 1;
}

.community-list,
.feed-list,
.chat-list,
.profile-list {
  display: grid;
  gap: 16px;
}

.community-card,
.feed-card,
.profile-card,
.form-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.community-card {
  padding: 15px 8px 8px;
}

.community-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 14px;
}

.community-name {
  font-size: 16px;
  font-weight: 500;
}

.more-btn {
  border: 0;
  color: #747990;
  background: transparent;
  font-weight: 700;
  font-size: 18px;
}

.menu-wrap {
  position: relative;
  display: inline-flex;
}

.context-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 174px;
  background: #fff;
  border: 1px solid #e4e7ef;
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.context-menu button {
  display: flex;
  min-height: 44px;
  align-items: center;
  width: 100%;
  border: 0;
  background: #fff;
  color: #202534;
  text-align: left;
  padding: 11px 12px;
  font-size: 13px;
}

.context-menu button:hover {
  background: #f5f7fb;
}

.context-menu button.destructive-menu-item {
  color: #ff2d55;
}

.context-menu button.menu-item-separated {
  border-top: 1px solid #e4e7ef;
}

.context-menu button.destructive-menu-item:hover {
  background: #fff1f3;
}

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

.stat-box {
  min-height: 62px;
  border: 0;
  border-radius: 10px;
  background: var(--tint);
  color: var(--accent);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
}

.stat-count {
  color: #8790a2;
  font-size: 13px;
}

.stat-label {
  color: var(--accent);
  font-size: 12px;
}

.create-pill {
  height: 44px;
  width: 100%;
  border: 1px solid #d6d9e0;
  border-radius: 22px;
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 18px;
}

.feed-card {
  min-height: 82px;
  padding: 12px 12px 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.feed-title {
  border: 0;
  background: transparent;
  color: #111827;
  padding: 0;
  text-align: left;
  font-size: 18px;
  margin-bottom: 20px;
}

.feed-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: #8d94a6;
  font-size: 13px;
}

.feed-date {
  align-self: end;
  color: #222;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #8e94a5;
  background: #fff;
  border-radius: var(--radius);
}

.community-empty {
  gap: 10px;
  padding: 28px 24px;
  text-align: center;
}

.community-empty strong {
  color: var(--text);
  font-size: 17px;
}

.community-empty span {
  line-height: 1.45;
}

.community-empty .primary-btn {
  width: min(210px, 100%);
  margin-top: 6px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 10px;
  padding: 0 8px;
  border-radius: 11px;
  background: #e9fae8;
  color: #1fb214;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.large {
  margin: 10px 0 0;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--nav);
  z-index: 10;
}

.nav-item {
  border: 0;
  background: transparent;
  color: #8e8e93;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  font-size: 13px;
}

.nav-item.active {
  color: var(--blue);
}

.nav-icon {
  font-size: 27px;
  line-height: 1;
}

.search-field {
  width: 100%;
  height: 38px;
  border: 1px solid #e2e4ea;
  border-radius: 10px;
  background: #f3f3f7;
  padding: 0 9px;
  outline: none;
  margin-bottom: 44px;
}

.chat-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  min-height: 86px;
  border: 0;
  border-bottom: 1px solid #eeeeef;
  background: transparent;
  text-align: left;
  padding: 8px 24px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef2fa;
  display: grid;
  place-items: center;
  color: #8b8b92;
  font-size: 22px;
}

.chat-name {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.chat-preview,
.chat-time {
  margin: 0;
  color: #9aa0af;
}

.thread {
  min-height: calc(100vh - 176px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
}

.message-stack {
  align-self: end;
  display: grid;
  gap: 12px;
}

.message {
  max-width: min(520px, 78%);
  border-radius: 16px;
  padding: 12px 14px;
  background: #fff;
  color: #313541;
}

.message.me {
  margin-left: auto;
  background: var(--blue);
  color: #fff;
}

.composer {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 10px;
}

.profile-hero {
  min-height: 158px;
  display: grid;
  place-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 18px;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #dfe9ff;
  color: #9ebcff;
  display: grid;
  place-items: center;
  font-size: 48px;
  margin-bottom: 16px;
}

.profile-email {
  color: #394052;
  font-size: 18px;
  text-align: center;
  overflow-wrap: anywhere;
}

.profile-nickname {
  color: var(--text);
  font-size: 18px;
  font-weight: 780;
  text-align: center;
}

.profile-switch-btn {
  width: min(220px, 100%);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.profile-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
  animation: profile-card-in 280ms ease both;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.profile-tile:nth-child(2) {
  animation-delay: 35ms;
}

.profile-tile:nth-child(3) {
  animation-delay: 70ms;
}

.profile-tile:active {
  transform: scale(0.985);
}

.profile-tile.is-ready {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--separator));
  background: color-mix(in srgb, var(--surface) 90%, var(--blue) 10%);
}

.profile-tile small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
}

.profile-tile .tile-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 24px;
}

.profile-tile-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-tile-copy strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.18;
}

.profile-tile-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-tile-count {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.profile-tile-count.is-attention {
  color: var(--blue);
  font-weight: 820;
}

.profile-tile-count.is-attention::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blue);
}

.profile-filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface);
}

.profile-filter button {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0;
}

.profile-filter button.active {
  background: var(--blue-soft);
  color: var(--blue);
}

.admin-hub-grid {
  display: grid;
  gap: 10px;
}

.admin-hub-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 78px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--separator);
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
  animation: profile-card-in 280ms ease both;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.admin-hub-card:nth-child(2) {
  animation-delay: 35ms;
}

.admin-hub-card:nth-child(3) {
  animation-delay: 70ms;
}

.admin-hub-card:nth-child(4) {
  animation-delay: 105ms;
}

.admin-hub-card:nth-child(5) {
  animation-delay: 140ms;
}

.admin-hub-card:active {
  transform: scale(0.985);
}

.admin-hub-card.is-ready {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--separator));
  background: color-mix(in srgb, var(--surface) 90%, var(--blue) 10%);
}

.admin-hub-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.admin-hub-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-hub-copy strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.admin-hub-copy small,
.admin-hub-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-hub-meta {
  justify-self: end;
  white-space: nowrap;
}

.admin-launch-stack {
  display: grid;
  gap: 16px;
}

.admin-launch-section {
  display: grid;
  gap: 10px;
}

.admin-privacy-guardrail {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.admin-privacy-guardrail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-privacy-guardrail-head strong {
  display: block;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.2;
}

.admin-privacy-guardrail-head small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.25;
}

.admin-privacy-guardrail ul {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  padding-left: 20px;
  font-size: 0.82rem;
  font-weight: 690;
  line-height: 1.35;
}

.admin-advanced-panel {
  display: grid;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.admin-advanced-panel summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 0 14px;
}

.admin-advanced-panel summary::-webkit-details-marker {
  display: none;
}

.admin-advanced-panel summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-advanced-panel summary strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.admin-advanced-panel summary small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.25;
}

.admin-advanced-panel summary .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 0.16s ease;
}

.admin-advanced-panel[open] summary .ui-icon {
  transform: rotate(90deg);
}

.admin-advanced-stack,
.admin-owner-tools-grid {
  border-top: 1px solid var(--separator);
  padding: 12px;
}

.admin-advanced-stack {
  display: grid;
  gap: 14px;
}

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

.admin-metric-card {
  display: grid;
  min-height: 104px;
  align-content: start;
  gap: 6px;
  padding: 13px;
  animation: profile-card-in 280ms ease both;
}

.admin-metric-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.admin-metric-card strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.1;
}

.admin-metric-card small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-metric-card.is-warning {
  border-color: color-mix(in srgb, var(--destructive) 32%, var(--separator));
  background: color-mix(in srgb, var(--surface) 92%, var(--destructive) 8%);
}

.admin-compact-list {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
  padding: 0 12px;
  list-style: none;
}

.admin-compact-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border-top: 1px solid var(--separator);
}

.admin-compact-list li:first-child {
  border-top: 0;
}

.admin-compact-list span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-compact-list strong {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-section-summary {
  display: grid;
  gap: 4px;
  padding: 0 2px;
}

.admin-section-summary strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.2;
}

.admin-section-summary span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.admin-review-list {
  display: grid;
  gap: 12px;
}

.admin-feedback-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.admin-feedback-metrics span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  align-content: center;
  border-radius: 12px;
  background: var(--fill);
  padding: 8px 10px;
}

.admin-feedback-metrics strong {
  color: var(--text);
  overflow: hidden;
  font-size: 0.94rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-metrics small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
}

.admin-feedback-privacy {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-self: start;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 0 11px;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1;
}

.admin-feedback-privacy-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: currentColor;
}

.admin-feedback-privacy-icon .ui-icon {
  width: 14px;
  height: 14px;
}

.admin-feedback-list,
.admin-feedback-group,
.admin-feedback-group-list {
  display: grid;
  gap: 12px;
}

.admin-feedback-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 0 2px;
}

.admin-feedback-group-head h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-group-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  white-space: nowrap;
}

.admin-feedback-note {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--separator);
}

.admin-feedback-note-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.admin-feedback-context {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 0 10px;
  font-size: 0.74rem;
  font-weight: 820;
  line-height: 1;
}

.admin-feedback-note time {
  justify-self: end;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-feedback-note p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-report-filter {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.co-creator-filter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.research-step-card.co-creator-step-card {
  display: grid;
  gap: 12px;
  border-color: color-mix(in srgb, var(--blue) 18%, var(--separator));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 5%, var(--surface)), var(--surface) 46%),
    var(--surface);
}

.co-creator-step-card label {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 760;
}

.co-creator-step-card textarea {
  min-height: 96px;
  margin-bottom: 2px;
  resize: vertical;
}

.co-creator-question-card,
.co-creator-field-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--fill);
  padding: 12px;
}

.co-creator-question-head,
.co-creator-field-card > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.co-creator-question-head span,
.co-creator-field-card > div span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 820;
}

.co-creator-question-head p {
  padding-top: 3px;
  font-size: 0.92rem;
}

.co-creator-field-card textarea {
  background: var(--surface);
}

.research-answer-grid.co-creator-answer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.co-creator-opt-out-btn {
  justify-self: start;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 2px 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 760;
  text-align: left;
}

.co-creator-opt-out-btn:disabled {
  opacity: 0.62;
}

.co-creator-response-body {
  display: grid;
  gap: 10px;
}

.admin-suggestion-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--separator);
}

.admin-report-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--separator);
}

.admin-notification-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--separator);
}

.admin-report-card.is-compact {
  opacity: 0.76;
}

.admin-suggestion-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.admin-report-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.admin-suggestion-head span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-report-head span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-suggestion-head strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.admin-report-head strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.admin-report-head em {
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.admin-report-head em.needs-review {
  background: var(--blue-soft);
  color: var(--blue);
}

.admin-suggestion-head small,
.admin-suggestion-card p,
.admin-report-head small,
.admin-report-body p,
.admin-report-body small {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.admin-report-body {
  display: grid;
  gap: 4px;
}

.admin-report-body p {
  margin: 0;
}

.admin-report-actions {
  grid-template-columns: 1fr 1fr 1fr;
}

.admin-report-detail {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--separator);
}

.admin-back-row {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 780;
  padding: 0;
}

.admin-back-row .ui-icon {
  width: 17px;
  height: 17px;
}

.admin-report-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-report-facts span,
.admin-report-note-block {
  display: grid;
  gap: 4px;
  border-radius: 14px;
  background: var(--fill);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 10px;
}

.admin-report-facts strong,
.admin-report-note-block strong {
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.2;
}

.admin-report-note-block p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-report-resolution-note {
  min-height: 86px;
}

.admin-report-detail .admin-report-actions {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.admin-report-reopen-actions {
  grid-template-columns: 1fr;
}

.admin-report-reopen-actions.has-restore {
  grid-template-columns: 1fr 1fr;
}

.admin-reviewed-list {
  display: grid;
  gap: 8px;
}

.admin-suggestion-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-report-actions {
  grid-template-columns: 1fr 1fr 1fr;
}

.admin-role-card,
.admin-audit-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.admin-section-head h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.admin-section-head p,
.admin-muted {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.admin-role-form {
  display: grid;
  gap: 10px;
}

.admin-role-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
}

.admin-role-form .field,
.admin-role-form .select-field {
  margin: 0;
}

.admin-audit-list {
  display: grid;
  gap: 8px;
}

.admin-audit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 0;
  border-top: 1px solid var(--separator);
}

.admin-audit-row:first-child {
  border-top: 0;
}

.admin-audit-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-audit-row strong {
  color: var(--text);
  font-size: 0.9rem;
}

.admin-audit-row small,
.admin-audit-row time {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

@keyframes profile-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-tile,
  .profile-setting-row,
  .notification-pref-row,
  .notification-switch,
  .notification-switch::after,
  .admin-hub-card,
  .admin-metric-card,
  .admin-notification-card {
    animation: none;
    transition: none;
  }
}

.badges-page {
  gap: 12px;
}

.badges-intro {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
}

.badges-intro h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.badges-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

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

.badge-card {
  display: grid;
  min-height: 188px;
  align-content: start;
  justify-items: center;
  gap: 12px;
  border: 1px solid var(--separator);
  border-radius: 18px;
  background: var(--surface);
  padding: 16px 12px;
  text-align: center;
}

button.badge-card {
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
}

.badge-card.claim-ready {
  position: relative;
  border-color: color-mix(in srgb, var(--blue) 46%, var(--separator));
  background: color-mix(in srgb, var(--surface) 90%, var(--blue) 10%);
}

.badge-card.claim-ready::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--blue);
}

.badge-card.claim-ready:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.badge-card.locked {
  color: var(--muted);
}

.badge-card.locked .badge-medal {
  opacity: 0.58;
}

.badge-card-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.badge-card-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.18;
}

.badge-card.locked .badge-card-copy h2 {
  color: var(--muted);
}

.badge-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.badge-card-copy small {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.2;
}

.badge-card.locked .badge-card-copy small {
  color: var(--faint);
}

.profile-item {
  min-height: 74px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.profile-item[role="button"] {
  cursor: pointer;
}

.profile-tag {
  font-size: 22px;
  color: #7d8498;
}

.profile-tag .ui-icon {
  width: 20px;
  height: 20px;
}

.profile-item-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.profile-item-title {
  margin: 0 0 6px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-item-sub {
  margin: 0;
  color: #8d94a6;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-page-title {
  text-align: center;
  margin: 0 0 42px;
  font-size: 20px;
  font-weight: 600;
}

.form-intro {
  margin: 0 0 30px;
}

.form-intro h2 {
  margin: 0 0 14px;
  font-size: 21px;
}

.form-intro p {
  margin: 0;
  color: #777d95;
  font-size: 13px;
}

.compact-form-intro {
  margin-bottom: 20px;
}

.form-card {
  padding: 18px 16px 16px;
}

.form-card label {
  display: block;
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 600;
}

.onboarding-shell {
  min-height: 100vh;
  background: var(--page);
  overflow-y: auto;
}

.onboarding-page {
  min-height: 100vh;
  padding: 16px;
}

.survey-page {
  padding: 18px 16px 36px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 52px;
  font-size: 20px;
}

.brand-logo .dot-logo {
  width: 34px;
  height: 34px;
  margin: 0;
  transform: scale(0.36);
  transform-origin: center;
}

.onboarding-page h1,
.onboarding-page h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.onboarding-copy {
  margin: 0 0 18px;
  color: #69708a;
  font-size: 13px;
}

.survey-card {
  border: 1px solid #e1e2e6;
  background: #fbfbfc;
  margin-top: 10px;
}

.survey-question {
  min-height: 160px;
  padding: 33px 32px 30px;
  border-bottom: 1px solid #e1e2e6;
}

.survey-question:last-child {
  border-bottom: 0;
}

.survey-question p {
  margin: 0 0 34px;
}

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

.answer-btn {
  min-height: 40px;
  border: 1px solid #f0f0f2;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 16px;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.answer-btn.active {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.onboarding-continue {
  margin-top: 24px;
}

.onboarding-step-header {
  min-height: 74px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: start;
  margin-bottom: 24px;
}

.onboarding-step-header h1 {
  text-align: center;
  margin: 16px 0 8px;
  font-size: 20px;
}

.onboarding-step-header p {
  margin: 0;
  text-align: center;
  color: #747890;
  font-size: 18px;
}

.empty-communities {
  min-height: 144px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
}

.empty-illustration {
  width: 72px;
  height: 72px;
  border: 2px solid color-mix(in srgb, var(--blue) 24%, var(--separator));
  color: color-mix(in srgb, var(--blue) 62%, var(--muted));
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 38px;
}

.compact-selected {
  margin-bottom: 14px;
}

.compact-empty {
  min-height: 120px;
  margin-bottom: 24px;
}

.search-picker {
  margin: 0 0 22px;
}

.picker-input-wrap {
  position: relative;
}

.picker-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d9dce3;
  border-radius: 12px 12px 0 0;
  background: #fff;
  color: #222;
  outline: none;
  padding: 0 42px 0 16px;
  font-size: 15px;
  display: block;
}

.picker-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14);
}

.picker-input:disabled {
  background: var(--fill);
  color: var(--muted);
}

.locked-picker {
  min-height: 74px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-elevated));
  color: var(--muted);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 22px;
}

.locked-picker strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.locked-picker p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.locked-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
  position: relative;
}

.locked-icon::before,
.locked-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.locked-icon::before {
  width: 14px;
  height: 10px;
  left: 10px;
  top: 14px;
  border-radius: 3px;
}

.locked-icon::after {
  width: 10px;
  height: 8px;
  left: 12px;
  top: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
}

.blend-note {
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface-elevated);
  color: var(--muted);
  padding: 12px 14px;
  margin: 0 0 22px;
}

.blend-note strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 4px;
}

.blend-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.blend-slots {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
  overflow: hidden;
}

.blend-slot {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--separator);
  background: var(--surface);
}

.blend-slot:last-child {
  border-bottom: 0;
}

.blend-slot-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  text-align: left;
}

.blend-slot.premium-slot {
  width: 100%;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  color: var(--text);
  cursor: pointer;
}

.blend-slot.premium-slot:active,
.blend-slot.premium-slot:focus-visible {
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  outline: 0;
}

.blend-slot-header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.blend-slot-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}

.premium-slot .blend-slot-number {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.blend-slot-header strong,
.blend-slot-header small {
  display: block;
}

.blend-slot-header strong {
  font-size: 16px;
}

.blend-slot-header small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.blend-slot-disabled {
  color: var(--muted);
  background: color-mix(in srgb, var(--fill) 52%, var(--surface));
}

.blend-slot-disabled .blend-slot-number {
  background: var(--fill);
  color: var(--muted);
}

.blend-slot-status {
  justify-self: end;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  max-width: 150px;
  line-height: 1.25;
  text-align: right;
}

.blend-slot-trailing {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-elevated));
  color: var(--blue);
}

.blend-slot-trailing .ui-icon {
  width: 17px;
  height: 17px;
}

.blend-slot-selection {
  min-height: 54px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-elevated));
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
}

.blend-slot-selection strong,
.blend-slot-selection small {
  display: block;
}

.blend-slot-selection small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.blend-slot-selection + .picker-list {
  border-top: 1px solid var(--separator);
}

.blend-slot-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.form-card.blend-builder-card {
  display: grid;
  gap: 14px;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.blend-summary-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 11px 14px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  color: var(--muted);
}

.blend-summary-row.ready {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--separator));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.blend-summary-row strong,
.blend-summary-row small {
  display: block;
}

.blend-summary-row strong {
  color: var(--text);
  font-size: 14px;
}

.blend-summary-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.blend-summary-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-elevated));
  color: var(--blue);
}

.blend-summary-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.blend-footnote {
  margin: 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.blend-builder-cta {
  margin-top: 12px;
  padding: 0 0 4px;
}

.blend-save-btn {
  width: 100%;
}

.mini-remove {
  width: 32px;
  height: 32px;
}

.mini-remove::before,
.mini-remove::after {
  left: 9px;
  right: 9px;
}

.clear-search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, #c7c7cc 0 11px, transparent 12px);
  color: #fff;
}

.clear-search-btn::before,
.clear-search-btn::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  top: 21px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.clear-search-btn::before {
  transform: rotate(45deg);
}

.clear-search-btn::after {
  transform: rotate(-45deg);
}

.picker-list {
  display: grid;
  gap: 0;
  margin: -1px 0 0;
  border: 1px solid #d9dce3;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
  overflow: hidden;
}

.picker-row {
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid #eceef3;
  border-radius: 0;
  background: #fff;
  color: #1f2533;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 15px;
  text-align: left;
  font-size: 15px;
}

.picker-row:last-child {
  border-bottom: 0;
}

.picker-row.selected {
  background: #eef6ff;
  color: var(--blue);
  font-weight: 600;
}

.row-check {
  display: none;
  width: 14px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.picker-row.selected .row-check {
  display: block;
}

.blend-picker-row {
  min-height: 56px;
}

.blend-picker-row strong,
.blend-picker-row small {
  display: block;
}

.blend-picker-row small {
  margin-top: 3px;
  color: #7c8497;
  font-size: 12px;
  font-weight: 500;
}

.blend-picker-row.selected small {
  color: #4f86d9;
}

.picker-empty {
  margin: -1px 0 0;
  border: 1px dashed var(--separator);
  border-radius: 0 0 12px 12px;
  color: var(--muted);
  padding: 12px 14px;
  font-size: 14px;
}

.suggest-empty {
  display: grid;
  gap: 10px;
  background: var(--surface);
}

.suggest-inline-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--separator));
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-elevated));
  color: var(--blue);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  text-align: left;
  font-weight: 700;
}

.suggest-inline-btn span:first-child {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  line-height: 1;
}

.select-field,
.text-field,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d9dce3;
  border-radius: 12px;
  background: #fff;
  color: #222;
  outline: none;
  padding: 0 16px;
  margin-bottom: 18px;
}

textarea {
  min-height: 112px;
  padding-top: 12px;
  resize: vertical;
}

.selected-row {
  min-height: 70px;
  border: 1px solid #d9dce3;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 44px 1px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 12px 0 14px;
}

.divider {
  height: 24px;
  border-left: 1px solid #d1d4dc;
}

.remove-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #ffd0d5;
  border-radius: 50%;
  background: #fff;
  color: #ff2d55;
  position: relative;
  justify-self: end;
}

.remove-btn::before,
.remove-btn::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.remove-btn::before {
  transform: rotate(45deg);
}

.remove-btn::after {
  transform: rotate(-45deg);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 106px;
  transform: translateX(-50%);
  background: #1d2433;
  color: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
  z-index: 20;
}

.pull-refresh-status {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 12px);
  z-index: 18;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  max-width: min(260px, calc(100vw - 32px));
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--separator));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sheet-bg) 94%, transparent);
  color: var(--text);
  padding: 8px 13px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-18px + var(--pull-refresh-offset, 0px) * 0.34)) scale(0.96);
  transition:
    opacity 160ms ease,
    transform 180ms ease;
  backdrop-filter: blur(22px) saturate(1.25);
}

.pull-refresh-status.is-active {
  opacity: 1;
  transform: translate(-50%, calc(var(--pull-refresh-offset, 0px) * 0.34)) scale(1);
}

.pull-refresh-spinner {
  display: grid;
  color: var(--blue);
}

.pull-refresh-spinner .ui-icon {
  width: 16px;
  height: 16px;
}

.pull-refresh-status.is-release .pull-refresh-spinner .ui-icon {
  transform: rotate(180deg);
}

.pull-refresh-status.is-refreshing .pull-refresh-spinner {
  animation: catalog-spinner-rotate 760ms linear infinite;
}

.pull-refresh-status.is-updated .pull-refresh-spinner {
  color: var(--green);
}

.pull-refresh-status span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-update {
  position: fixed;
  right: max(14px, calc((100vw - 460px) / 2 + 14px));
  bottom: calc(188px + env(safe-area-inset-bottom));
  z-index: 19;
  display: grid;
  width: min(360px, calc(100vw - 28px));
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--separator));
  border-radius: 16px;
  background: color-mix(in srgb, var(--sheet-bg) 94%, transparent);
  color: var(--text);
  padding: 9px 9px 9px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.25);
  pointer-events: none;
}

.app-shell:has(.pwa-update) .page {
  padding-bottom: 130px;
}

.pwa-update-dot {
  display: grid;
  color: var(--blue);
}

.pwa-update-dot .ui-icon {
  width: 9px;
  height: 9px;
}

.pwa-update-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pwa-update-copy strong,
.pwa-update-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-update-copy strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 790;
  line-height: 1.12;
}

.pwa-update-copy small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1.15;
}

.pwa-update-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pwa-update-refresh,
.pwa-update-dismiss {
  border: 0;
  pointer-events: auto;
}

.pwa-update-refresh {
  min-width: 72px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  padding: 0 14px;
  font-size: 0.76rem;
  font-weight: 780;
}

.pwa-update-dismiss {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fill) 82%, transparent);
  color: var(--muted);
}

.pwa-update-dismiss .ui-icon {
  width: 16px;
  height: 16px;
}

.qa-status-panel {
  position: fixed;
  z-index: 120;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(240px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, #111827 94%, transparent);
  color: #f9fafb;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  padding: 10px;
}

.qa-status-panel:not([open]) {
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(92px + env(safe-area-inset-bottom));
  width: auto;
  max-width: min(156px, calc(100vw - 20px));
  border-radius: 999px;
  padding: 5px 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.qa-status-panel[open] {
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 24px));
}

.qa-status-panel summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  padding: 2px 4px 8px;
}

.qa-status-panel:not([open]) summary {
  grid-template-columns: auto;
  gap: 0;
  min-height: 34px;
  padding-bottom: 2px;
}

.qa-status-panel:not([open]) dl,
.qa-status-panel:not([open]) .qa-status-actions {
  display: none;
}

.qa-status-panel:not([open]) summary small {
  display: none;
}

.qa-status-panel summary::-webkit-details-marker {
  display: none;
}

.qa-status-panel summary span {
  font-size: 0.82rem;
  font-weight: 820;
}

.qa-status-panel summary small {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  color: #aeb7c6;
  font-size: 0.68rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-status-panel dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.qa-status-panel dl > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.44fr) 1fr;
  gap: 10px;
  align-items: start;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
}

.qa-status-panel dt,
.qa-status-panel dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.qa-status-panel dt {
  color: #aeb7c6;
  font-size: 0.68rem;
  font-weight: 760;
}

.qa-status-panel dd {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 760;
}

.qa-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 10px;
}

.qa-status-actions .secondary-btn {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #f9fafb;
}

.qa-status-actions [data-action="reset-for-you-preview"] {
  grid-column: 1 / -1;
}

.founder-award-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(0, 0, 0, 0.32);
  animation: award-backdrop-in 180ms ease both;
}

.founder-award-sheet {
  position: fixed;
  left: max(10px, calc((100vw - 460px) / 2 + 10px));
  right: max(10px, calc((100vw - 460px) / 2 + 10px));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 14px;
  border: 1px solid var(--separator);
  border-radius: 24px;
  background: var(--sheet-bg);
  color: var(--text);
  padding: 8px 14px 14px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: award-sheet-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(24px) saturate(1.35);
}

.founder-award-visual {
  display: grid;
  place-items: center;
  padding-top: 4px;
}

.badge-medal {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(135deg, #1b8cff, #6ee7f9);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 18px 34px color-mix(in srgb, var(--blue) 28%, transparent);
}

.badge-medal::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, transparent);
  border-radius: inherit;
  animation: award-ring 1200ms ease-out;
}

.badge-medal.locked {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, #565b68, #a0a3ad);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.badge-medal .ui-icon {
  width: 30px;
  height: 30px;
}

.badge-multiplier {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  min-width: 30px;
  height: 24px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  padding: 0 7px;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
}

.founder-award-copy {
  display: grid;
  max-width: 310px;
  gap: 5px;
  text-align: center;
}

.founder-award-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.16rem;
  line-height: 1.18;
}

.founder-award-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.38;
}

.founder-award-actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
}

.founder-award-actions .primary-btn,
.founder-award-actions .secondary-btn {
  min-height: 48px;
}

@keyframes award-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes award-sheet-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes award-ring {
  from {
    opacity: 0.75;
    transform: scale(0.72);
  }
  to {
    opacity: 0;
    transform: scale(1.22);
  }
}

.detail-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
}

.detail-card h2 {
  margin: 8px 0 12px;
  font-size: 24px;
}

.detail-card p {
  line-height: 1.6;
}

.detail-kicker,
.detail-meta {
  color: #7c8497;
  font-size: 13px;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.detail-actions .ui-icon {
  width: 17px;
  height: 17px;
  margin-right: 6px;
  vertical-align: -3px;
}

.detail-message-btn:disabled {
  opacity: 0.55;
}

.detail-complete-btn:disabled {
  background: #f2f4f7;
  color: #7f8797;
}

.detail-delete-btn {
  height: 39px;
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, var(--separator));
  border-radius: 18px;
  background: var(--surface);
  color: var(--destructive);
  font-weight: 700;
}

.detail-exchange-note {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface-elevated);
  padding: 12px;
}

.detail-exchange-note strong {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.detail-exchange-note span {
  color: var(--text);
  line-height: 1.4;
}

.destructive-confirm-btn {
  min-height: 44px;
  border: 0;
  border-radius: 18px;
  background: #ff2d55;
  color: #fff;
  padding: 0 16px;
  font-weight: 700;
}

.detail-comments {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
  padding: 14px;
}

.comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comments-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.comments-head span {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.comment-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 14px;
}

.comment-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  border-bottom: 1px solid var(--separator);
  background: var(--surface);
  padding: 12px;
}

.comment-row:last-child {
  border-bottom: 0;
}

.comment-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--fill);
  color: var(--muted);
}

.comment-avatar .ui-icon {
  width: 18px;
  height: 18px;
}

.comment-row strong,
.comment-row small {
  display: block;
}

.comment-row strong {
  color: var(--text);
  font-size: 0.9rem;
}

.comment-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}

.comment-row p {
  margin: 8px 0 0;
  color: var(--text);
  line-height: 1.45;
}

.comment-delete-btn {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, var(--separator));
  border-radius: 50%;
  background: transparent;
  color: var(--destructive);
}

.comment-delete-btn .ui-icon {
  width: 17px;
  height: 17px;
}

.you-badge {
  display: inline-grid;
  min-height: 18px;
  align-items: center;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  padding: 0 7px;
  font-size: 0.7rem;
  font-weight: 760;
  vertical-align: 1px;
}

.comments-empty {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.comment-composer {
  display: grid;
  gap: 10px;
}

.comment-composer textarea {
  min-height: 92px;
  resize: vertical;
}

.optional-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 640;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px 12px;
  color: var(--text);
}

.check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

textarea:disabled {
  background: var(--fill);
  color: var(--muted);
}

.thread-context {
  display: grid;
  gap: 3px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
}

.thread-context small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.thread-context strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message.mine {
  justify-self: end;
  background: var(--blue);
  color: #fff;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 24, 32, 0.28);
}

.modal-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.modal-card h2 {
  margin: 0 0 8px;
}

.modal-card p {
  margin: 0 0 14px;
  color: #777d95;
}

.feedback-card {
  display: grid;
  gap: 12px;
}

.feedback-card h2 {
  margin-bottom: 0;
}

.feedback-card p {
  margin-bottom: 0;
}

.feedback-note {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.feedback-card textarea {
  min-height: 132px;
  margin: 0;
  resize: vertical;
}

.feedback-status {
  border: 1px solid rgba(255, 149, 0, 0.28);
  border-radius: 12px;
  background: rgba(255, 149, 0, 0.1);
  color: #8a4b00;
  padding: 9px 10px;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.35;
}

.first-use-guide-backdrop {
  inset: 0;
  z-index: 46;
  background: rgba(0, 0, 0, 0.38);
}

.first-use-guide-card {
  position: fixed;
  width: auto;
  right: max(14px, calc((100vw - 430px) / 2 + 14px));
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(14px, calc((100vw - 430px) / 2 + 14px));
  z-index: 47;
  display: grid;
  gap: 14px;
  max-height: calc(100svh - 28px);
  border: 1px solid var(--separator);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(10, 132, 255, 0.14), transparent 44%),
    var(--sheet-bg);
  color: var(--text);
  padding: 18px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.35);
}

.first-use-guide-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.first-use-guide-close .ui-icon {
  width: 19px;
  height: 19px;
}

.first-use-guide-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 14%, rgba(255, 255, 255, 0.08));
  color: var(--blue);
}

.first-use-guide-icon .ui-icon {
  width: 25px;
  height: 25px;
}

.first-use-guide-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.first-use-guide-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.first-use-guide-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 34%, transparent);
}

.first-use-guide-dots i.is-active {
  width: 18px;
  border-radius: 999px;
  background: var(--blue);
}

.first-use-guide-copy {
  display: grid;
  gap: 8px;
}

.first-use-guide-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.22rem;
  line-height: 1.16;
}

.first-use-guide-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.first-use-guide-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
}

.first-use-guide-actions .primary-btn,
.first-use-guide-actions .secondary-btn {
  min-height: 48px;
}

.feedback-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.feedback-send-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: catalog-spinner-rotate 760ms linear infinite;
}

.co-creator-unlock-sheet {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--blue) 22%, var(--separator));
  background: var(--surface);
  color: var(--text);
  padding: 18px;
  text-align: center;
}

.co-creator-unlock-sheet.is-unlocked {
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--separator));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, var(--surface)), var(--surface) 54%),
    var(--surface);
}

.co-creator-unlock-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 4px 0 2px;
}

.co-creator-unlock-sheet.is-unlocked .badge-medal {
  width: 68px;
  height: 68px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(135deg, var(--blue), #38c7bd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 14px 28px color-mix(in srgb, var(--blue) 26%, transparent);
  animation: award-sheet-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.co-creator-unlock-kicker {
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 820;
}

.co-creator-unlock-sheet h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.18;
}

.co-creator-unlock-sheet p {
  max-width: 320px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.38;
}

.co-creator-unlock-sheet.is-unlocked p:not(.research-privacy-note) {
  color: var(--text);
  font-weight: 700;
}

.co-creator-progress.is-modal {
  width: 100%;
  max-width: 320px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  padding: 10px;
}

.co-creator-unlock-sheet .modal-actions {
  width: 100%;
}

.report-card {
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--separator) 92%, transparent);
  background: var(--surface);
  color: var(--text);
}

.report-backdrop {
  place-items: end center;
  padding: 18px 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.42);
}

.report-grabber {
  justify-self: center;
  margin-top: -4px;
}

.report-card-head {
  display: grid;
  gap: 6px;
}

.report-card-head h2,
.report-card-head p,
.report-guidance {
  margin-bottom: 0;
}

.report-card-head p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.report-guidance {
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 7%, var(--fill));
  color: var(--muted);
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.35;
}

.report-reason-list {
  display: grid;
  gap: 8px;
}

.report-reason-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--fill);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 760;
  padding: 0 12px;
}

.report-reason-row input {
  accent-color: var(--blue);
}

.report-card textarea {
  min-height: 92px;
}

.report-actions .primary-btn:disabled {
  opacity: 0.78;
}

.premium-card {
  display: grid;
  width: min(560px, calc(100vw - 32px));
  gap: 14px;
  padding: 22px;
  text-align: left;
}

.premium-head {
  display: grid;
  gap: 7px;
  text-align: center;
}

.premium-head h2,
.premium-head p {
  margin: 0;
}

.premium-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.premium-mark .ui-icon {
  width: 26px;
  height: 26px;
}

.premium-card .advanced-blend-example {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--separator));
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  color: var(--text);
  padding: 11px 13px;
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.35;
  text-align: center;
}

.premium-card .advanced-blend-helper {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.35;
  text-align: left;
}

.advanced-blend-choice-group {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.advanced-blend-choice-group legend {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 850;
}

.advanced-blend-choice-row {
  gap: 8px;
}

.advanced-blend-choice-row.is-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--separator);
  border-radius: 18px;
  background: color-mix(in srgb, var(--fill) 44%, transparent);
  padding: 4px;
}

.advanced-blend-choice-row.is-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advanced-blend-choice {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fill) 62%, var(--surface));
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
}

.advanced-blend-choice-row.is-segmented .advanced-blend-choice {
  border-color: transparent;
  border-radius: 14px;
  background: transparent;
}

.advanced-blend-choice-row.is-list .advanced-blend-choice {
  position: relative;
  justify-content: center;
  min-height: 48px;
  padding: 11px 32px 11px 12px;
  text-align: center;
}

.advanced-blend-choice.is-selected {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--separator));
  background: color-mix(in srgb, var(--blue) 18%, var(--surface));
  color: var(--blue);
}

.advanced-blend-choice-check {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
}

.advanced-blend-choice-row.is-list .advanced-blend-choice-check {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
}

.advanced-blend-choice-check:empty {
  display: none;
}

.advanced-blend-choice-check .ui-icon {
  width: 17px;
  height: 17px;
}

.advanced-blend-choice-row.is-segmented .advanced-blend-choice-check {
  display: none;
}

.advanced-blend-price-grid,
.advanced-blend-note {
  display: grid;
  gap: 10px;
  text-align: left;
}

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

.advanced-blend-field span,
.advanced-blend-note span {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 850;
}

.advanced-blend-field input {
  min-height: 44px;
  min-width: 0;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fill) 72%, var(--surface));
  color: var(--text);
  padding: 10px 12px;
}

.advanced-blend-field input::placeholder {
  color: var(--faint);
}

.advanced-blend-field-hint {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.35;
}

.advanced-blend-note textarea {
  min-height: 84px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fill) 72%, var(--surface));
  color: var(--text);
  padding: 11px 12px;
  resize: vertical;
}

.advanced-blend-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-actions.single-action {
  grid-template-columns: 1fr;
}

.avatar-edit-block {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 4px 0 16px;
}

.avatar-edit-preview.user-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  font-size: 1.4rem;
}

.avatar-color-grid {
  display: grid;
  grid-template-columns: repeat(7, 28px);
  gap: 9px;
  align-items: center;
}

.avatar-color-option {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  cursor: pointer;
}

.avatar-color-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.avatar-color-option span {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--avatar-ring);
  border-radius: 50%;
  background: var(--avatar-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition:
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.avatar-color-option input:checked + span {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--blue),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transform: scale(1.04);
}

.avatar-color-option:focus-within span {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px color-mix(in srgb, var(--blue) 76%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.secondary-btn {
  height: 39px;
  border: 1px solid #d8dce6;
  border-radius: 18px;
  background: #fff;
  color: #1f2533;
  font-weight: 700;
}

@media (max-width: 760px) {
  .page {
    padding: 12px 12px 28px;
  }

  .browse-heading {
    margin-top: 18px;
  }

  .world-grid,
  .profile-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .world-card.wide {
    grid-column: auto;
  }

  .world-card {
    min-height: 94px;
    grid-template-columns: 56px minmax(0, 1fr) 22px;
    gap: 16px;
    padding: 16px 17px;
  }

  .world-card .world-art {
    width: 56px;
    height: 56px;
  }

  .world-card .world-art-inner {
    width: 56px;
    height: 56px;
    font-size: 46px;
  }

  .stat-box {
    min-height: 54px;
  }

  .chat-row {
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 8px 10px;
  }

  .selected-row {
    grid-template-columns: 42px 1px minmax(0, 1fr) 42px;
    margin-left: 0;
    margin-right: 0;
  }

  .brand-row {
    margin-bottom: 38px;
  }

  .survey-question {
    padding: 24px 16px;
  }

  .answer-grid {
    grid-template-columns: 1fr;
  }

  .auth-title {
    font-size: 23px;
  }

  .home-list-toolbar {
    gap: 9px;
  }

  .home-list-type-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    padding: 2px;
  }

  .home-list-type-filter {
    min-width: 0;
    padding: 0 3px;
    white-space: nowrap;
  }

  .home-list-toolbar-row {
    align-items: stretch;
  }

  .home-list-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* EduGather visual adaptation layer */
:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-elevated: #2c2c2e;
  --surface-soft: #000000;
  --fill: #2c2c2e;
  --line: #38383a;
  --separator: rgba(235, 235, 245, 0.18);
  --text: #f2f2f7;
  --muted: #aeaeb2;
  --faint: #8e8e93;
  --blue: #0a84ff;
  --blue-2: #0a84ff;
  --blue-soft: rgba(10, 132, 255, 0.18);
  --destructive: #ff3b30;
  --page: var(--bg);
  --card: var(--surface);
  --nav: rgba(28, 28, 30, 0.86);
  --bar-bg: rgba(28, 28, 30, 0.86);
  --sheet-bg: rgba(28, 28, 30, 0.9);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
  --radius: 14px;
  --control-radius: 12px;
  --group-radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-elevated: #2c2c2e;
    --surface-soft: #000000;
    --fill: #2c2c2e;
    --line: #38383a;
    --separator: rgba(235, 235, 245, 0.18);
    --text: #f2f2f7;
    --muted: #aeaeb2;
    --faint: #8e8e93;
    --blue-soft: rgba(10, 132, 255, 0.18);
    --nav: rgba(28, 28, 30, 0.86);
    --bar-bg: rgba(28, 28, 30, 0.86);
    --sheet-bg: rgba(28, 28, 30, 0.9);
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ui-icon {
  width: 1.2em;
  height: 1.2em;
  display: block;
  flex: 0 0 auto;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  max-width: 460px;
  min-height: 100dvh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-soft);
}

.page {
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 24px;
  background: var(--surface-soft);
}

.page-header.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  margin: 0 -16px 18px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  border-bottom: 1px solid var(--separator);
  background: var(--bar-bg);
  backdrop-filter: blur(22px) saturate(1.35);
}

.topbar-title {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.topbar-title small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-side,
.topbar-side.right {
  display: flex;
  align-items: center;
}

.topbar-side.right {
  justify-content: flex-end;
  gap: 4px;
}

.topbar-action-placeholder {
  display: block;
  width: 36px;
  height: 36px;
}

.page-title,
.page-title.left {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

.circle-btn,
.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--separator);
  border-radius: 50%;
  background: var(--surface-elevated);
  color: var(--blue);
  font-size: 1rem;
  box-shadow: none;
}

.circle-btn .ui-icon {
  width: 19px;
  height: 19px;
}

.circle-btn.danger {
  color: var(--destructive);
}

.header-notification-btn {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  min-width: 36px;
  place-items: center;
  border: 1px solid var(--separator);
  border-radius: 50%;
  background: var(--surface-elevated);
  color: var(--blue);
  padding: 0;
  box-shadow: none;
}

.header-notification-btn .ui-icon {
  width: 19px;
  height: 19px;
}

.header-notification-btn.has-unread {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--separator));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-elevated));
}

.header-notification-count {
  position: absolute;
  top: -4px;
  right: -5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid var(--surface-soft);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1;
  padding: 0 5px;
}

.header-avatar-btn {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  isolation: isolate;
}

.header-avatar-btn.has-attention::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border: 1.5px solid color-mix(in srgb, var(--blue) 74%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--blue) 32%, transparent),
    0 0 18px color-mix(in srgb, var(--blue) 36%, transparent);
  pointer-events: none;
}

.header-avatar-btn.has-attention .header-avatar {
  border-color: color-mix(in srgb, var(--blue) 72%, var(--avatar-ring));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 38%, transparent),
    0 0 0 7px color-mix(in srgb, var(--blue) 13%, transparent),
    0 10px 24px color-mix(in srgb, var(--blue) 24%, transparent);
}

.profile-attention-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface-soft);
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent);
}

.header-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--avatar-ring) 78%, var(--separator));
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 0.73rem;
  font-weight: 860;
  line-height: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--avatar-ring) 18%, transparent);
}

.header-avatar span {
  transform: translateY(0.5px);
}

.brand-mark {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--separator) 80%, transparent);
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.08);
}

.brand-mark-btn {
  cursor: pointer;
  padding: 0;
}

.brand-mark-btn:focus-visible,
.header-trust-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 70%, transparent);
  outline-offset: 3px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.browse-heading {
  display: none;
}

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

.world-card,
.world-card.wide {
  position: relative;
  display: grid;
  grid-column: auto;
  min-height: 142px;
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-rows: 42px minmax(0, 1fr);
  align-content: stretch;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface) !important;
  color: var(--text);
  padding: 15px;
  text-align: left;
}

.world-card.wide {
  grid-column: 1 / -1;
  min-height: 122px;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  grid-template-rows: auto;
  align-items: center;
  border-color: color-mix(in srgb, var(--accent) 14%, var(--separator));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%),
    var(--surface) !important;
}

.world-card .world-art {
  display: grid;
  grid-column: 1 / -1;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
  pointer-events: none;
}

.world-card.wide .world-art {
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 92%, var(--text));
}

.world-card .world-art .ui-icon {
  width: 22px;
  height: 22px;
}

.world-card.wide .world-art .ui-icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.7;
}

.world-card-copy {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  gap: 4px;
}

.world-card.wide .world-card-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.world-card .world-label {
  color: var(--text);
  overflow: visible;
  font-size: 0.98rem;
  font-weight: 790;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.world-card small {
  display: block;
  min-height: 2.4em;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.2;
}

.world-card .arrow {
  position: absolute;
  right: 12px;
  bottom: 13px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--faint);
}

.world-card.wide .arrow {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.world-card .arrow .ui-icon {
  width: 21px;
  height: 21px;
}

.world-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
}

.world-summary-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.world-summary-icon .ui-icon {
  width: 28px;
  height: 28px;
}

.world-summary h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.15;
}

.world-summary-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.world-summary-kicker {
  display: block;
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.world-summary-stat {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--separator));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
  padding: 0 9px;
  font-size: 0.74rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.world-summary p,
.community-top small,
.feed-title small,
.profile-email,
.profile-nickname,
.chat-preview,
.detail-meta,
.detail-kicker,
.form-intro p,
.onboarding-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.profile-nickname {
  color: var(--text);
  font-weight: 780;
}

.community-list,
.feed-list,
.chat-list,
.profile-list {
  display: grid;
  gap: 10px;
}

.community-card,
.feed-card,
.profile-card,
.form-card,
.detail-card,
.empty-state,
.profile-tile,
.selected-row,
.modal-card {
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
  box-shadow: none;
}

.community-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.community-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.community-name {
  display: block;
  color: var(--text);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.2;
}

.more-btn {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--faint);
}

.more-btn .ui-icon {
  width: 20px;
  height: 20px;
}

.stats-grid {
  gap: 8px;
}

.stat-box {
  min-height: 66px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tint) 78%, var(--surface));
  color: var(--accent);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
}

.stat-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.stat-label {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 720;
}

.stat-count {
  color: var(--muted);
  font-size: 0.75rem;
}

.create-pill,
.intent-compose-button {
  min-height: 48px;
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: var(--group-radius);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 1rem;
  font-weight: 760;
}

.create-pill .ui-icon {
  width: 20px;
  height: 20px;
}

.feed-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
}

.feed-card.is-unread {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 42%, var(--separator));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent), transparent 56%),
    var(--surface);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--accent, var(--blue)) 82%, transparent);
}

.feed-title {
  display: grid;
  min-width: 0;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text);
  text-align: left;
  font-size: 1rem;
}

.feed-title strong,
.feed-title small {
  display: block;
  min-width: 0;
}

.feed-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 84%, var(--text));
}

.feed-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.feed-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.feed-date .ui-icon {
  width: 15px;
  height: 15px;
}

.feed-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 2px;
  padding: 0 2px;
}

.feed-toolbar-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.feed-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.feed-reset-btn {
  min-height: 34px;
  padding: 0 11px;
  font-size: 0.78rem;
}

.feed-sort-wrap {
  position: relative;
}

.feed-sort-btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  padding: 0 11px;
  font-size: 0.8rem;
  font-weight: 760;
}

.feed-sort-btn .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--blue);
}

.feed-sort-menu {
  right: 0;
  min-width: 184px;
}

.feed-sort-menu button {
  justify-content: space-between;
  gap: 16px;
}

.feed-sort-menu button.is-active {
  color: var(--blue);
}

.context-menu-section-label {
  padding: 8px 12px 4px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
}

.feed-sort-menu .ui-icon {
  width: 15px;
  height: 15px;
}

.feed-card-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.feed-signal-btn,
.detail-signal-btn,
.comment-helpful-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
  color: var(--muted);
  font-weight: 760;
}

.feed-signal-btn {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 10px;
  gap: 6px;
  font-size: 0.75rem;
}

.feed-signal-btn .ui-icon,
.detail-signal-btn .ui-icon,
.comment-helpful-btn .ui-icon {
  width: 15px;
  height: 15px;
}

.feed-signal-btn.is-active,
.detail-signal-btn.is-active,
.comment-helpful-btn.is-active {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--separator));
  background: var(--blue-soft);
  color: var(--blue);
}

.feed-signal-summary {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 720;
}

.detail-signal-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.detail-signal-btn {
  min-height: 38px;
  gap: 7px;
  border-radius: 999px;
  padding: 0 13px;
  font-size: 0.84rem;
}

.context-menu {
  border-color: var(--separator);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.context-menu button {
  background: var(--surface);
  color: var(--text);
}

.context-menu button:hover {
  background: var(--fill);
}

.context-menu button:not(:disabled):active {
  transform: scale(0.985);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    var(--fill);
  filter: brightness(0.95);
}

.context-menu button.destructive-menu-item,
.detail-delete-btn,
.remove-btn,
.destructive-confirm-btn {
  color: var(--destructive);
}

.destructive-confirm-btn {
  background: var(--destructive);
  color: #fff;
}

.primary-btn,
.primary-button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-weight: 760;
}

.primary-btn:disabled,
.primary-button:disabled {
  background: var(--fill);
  color: var(--faint);
  cursor: not-allowed;
}

.secondary-btn,
.secondary-button {
  min-height: 44px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-weight: 720;
}

.field,
.text-field,
.select-field,
.search-field,
.picker-input,
textarea {
  min-height: 44px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.picker-list,
.community-options {
  border-color: var(--separator);
  background: var(--surface);
}

.picker-row {
  min-height: 48px;
  border-bottom-color: var(--separator);
  background: var(--surface);
  color: var(--text);
}

.picker-row.selected {
  background: var(--blue-soft);
  color: var(--blue);
}

.selected-row {
  background: var(--surface);
}

.empty-state {
  display: grid;
  min-height: 190px;
  place-items: center;
  gap: 10px;
  padding: 28px 24px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  color: var(--text);
}

.bottom-nav {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 10;
  display: grid;
  width: 100%;
  height: auto;
  min-height: 74px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  transform: none;
  padding: 7px 10px calc(env(safe-area-inset-bottom) + 7px);
  border-top: 1px solid var(--separator);
  background: var(--bar-bg);
  backdrop-filter: blur(22px) saturate(1.35);
}

.nav-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 52px;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--faint);
  font-size: 0.73rem;
  font-weight: 690;
}

.nav-item.active {
  color: var(--blue);
}

.nav-icon {
  display: grid;
  position: relative;
  place-items: center;
  font-size: 1rem;
}

.nav-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.nav-icon-blends .ui-icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

.nav-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 5px;
  border: 1.5px solid var(--bar-bg);
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.nav-dot {
  position: absolute;
  top: 9px;
  left: calc(50% + 11px);
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--bar-bg);
  border-radius: 999px;
  background: var(--blue);
  pointer-events: none;
}

.profile-avatar {
  background: var(--blue-soft);
  color: var(--blue);
}

.home-page {
  gap: 14px;
}

.home-section {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.home-section-title-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-section-title-stack small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  white-space: nowrap;
}

.home-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 790;
  letter-spacing: 0;
}

.home-section-head button {
  border: 0;
  background: transparent;
  color: var(--blue);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 0.82rem;
  font-weight: 740;
}

.home-card-list {
  display: grid;
  gap: 10px;
}

.home-favorites-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(236px, 86%);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.home-favorites-row::-webkit-scrollbar {
  display: none;
}

.home-favorite-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 96px;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--separator);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent), transparent 42%),
    var(--surface);
  color: var(--text);
  padding: 12px 10px;
  scroll-snap-align: start;
  text-align: left;
}

.home-favorite-icon,
.home-favorite-mark {
  display: grid;
  place-items: center;
}

.home-favorite-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent, var(--blue)) 86%, var(--text));
}

.home-favorite-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.home-favorite-card span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-favorite-card strong,
.home-favorite-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-favorite-card strong {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.16;
}

.home-favorite-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.home-favorite-mark {
  color: color-mix(in srgb, var(--accent, var(--blue)) 88%, #fff);
}

.home-favorite-mark .ui-icon {
  width: 19px;
  height: 19px;
  fill: color-mix(in srgb, var(--accent, var(--blue)) 30%, transparent);
}

.home-favorite-list-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--accent, var(--blue)) 15%, transparent), transparent 42%),
    var(--surface);
  color: var(--text);
}

.home-favorite-list-card.is-editing {
  grid-template-columns: minmax(0, 1fr) 52px;
}

.home-favorite-list-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 78px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 12px;
  text-align: left;
}

.home-favorite-list-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-favorite-list-copy strong,
.home-favorite-list-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-favorite-list-copy strong {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.16;
}

.home-favorite-list-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.home-favorite-remove-btn {
  display: grid;
  min-width: 52px;
  min-height: 100%;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--separator);
  background: color-mix(in srgb, #ff453a 12%, var(--surface));
  color: #ff6961;
}

.home-favorite-remove-btn .ui-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.home-activity-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: var(--card-radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 10%, transparent), transparent 48%),
    var(--surface);
}

.home-activity-card.is-featured {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 36%, var(--separator));
}

.home-activity-card.is-unread {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 48%, var(--separator));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent), transparent 54%),
    color-mix(in srgb, var(--accent, var(--blue)) 5%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--blue)) 8%, transparent);
}

.home-activity-main {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 13px 14px;
  pointer-events: none;
  text-align: left;
}

.home-activity-open-hit {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  padding: 0;
}

.home-activity-open-hit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, var(--blue)) 70%, #fff);
  outline-offset: -4px;
}

.home-activity-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent, var(--blue)) 86%, var(--text));
}

.home-activity-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.home-activity-copy {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 5px;
}

.home-activity-meta-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.home-activity-meta-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-activity-copy small,
.home-activity-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-activity-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 790;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-activity-blend-context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: visible;
  white-space: normal;
}

.home-activity-blend-strip {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 5px;
  overflow: visible;
  line-height: 1.2;
}

.home-activity-blend-chip {
  display: inline-flex;
  min-width: 0;
  max-width: var(--chip-max, 112px);
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--chip-color) 86%, #fff);
  padding: 0 1px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
}

.home-activity-blend-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-activity-blend-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--chip-color) 55%, transparent);
}

.home-activity-blend-intersection {
  flex: 0 0 auto;
  color: rgba(235, 235, 245, 0.54);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1;
}

.home-activity-audience-context {
  --chip-scroll-hit-slop: 8px;
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  pointer-events: auto;
  z-index: 3;
}

.home-activity-audience-context::before,
.home-activity-audience-context::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.home-activity-audience-context::before {
  left: 0;
  background:
    linear-gradient(90deg, rgba(18, 22, 32, 0.88), rgba(18, 22, 32, 0.18) 74%, transparent),
    linear-gradient(90deg, rgba(235, 235, 245, 0.14), transparent 3px);
}

.home-activity-audience-context::after {
  right: 0;
  background:
    linear-gradient(90deg, transparent, rgba(18, 22, 32, 0.18) 26%, rgba(18, 22, 32, 0.88)),
    linear-gradient(90deg, transparent calc(100% - 3px), rgba(235, 235, 245, 0.16));
}

.home-activity-audience-context.is-scrollable:not(.is-at-start)::before,
.home-activity-audience-context.is-scrollable:not(.is-at-end)::after {
  opacity: 1;
}

.home-activity-audience-context.has-multiple-chips {
  margin-block: calc(var(--chip-scroll-hit-slop) * -1);
}

.home-activity-audience-context.has-multiple-chips::before,
.home-activity-audience-context.has-multiple-chips::after {
  top: var(--chip-scroll-hit-slop);
  bottom: var(--chip-scroll-hit-slop);
}

.home-activity-audience-strip {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 20px 1px 0;
  line-height: 1.2;
  pointer-events: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-activity-audience-context.has-multiple-chips .home-activity-audience-strip {
  padding-block: calc(1px + var(--chip-scroll-hit-slop));
}

.home-activity-copy .home-activity-audience-strip {
  overflow-x: auto;
  overflow-y: hidden;
}

.home-activity-audience-strip::-webkit-scrollbar {
  display: none;
}

.home-activity-audience-chip {
  display: inline-flex;
  min-width: 0;
  max-width: var(--chip-max, 132px);
  min-height: 22px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--chip-color) 36%, rgba(235, 235, 245, 0.12));
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--chip-color) 20%, transparent), transparent 58%),
    color-mix(in srgb, var(--chip-color) 13%, rgba(255, 255, 255, 0.05));
  color: color-mix(in srgb, var(--chip-color) 78%, #fff);
  padding: 2px 8px 2px 7px;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 12px color-mix(in srgb, var(--chip-color) 9%, transparent);
}

.home-activity-audience-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-activity-audience-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--chip-color) 50%, transparent);
}

.home-activity-audience-intersection {
  display: inline-grid;
  width: 14px;
  flex: 0 0 auto;
  place-items: center;
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.8rem;
  font-weight: 860;
  line-height: 1;
  transform: translateY(-1px);
}

.home-activity-kind-pill {
  flex: 0 0 auto;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 245, 247, 0.72);
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
}

.home-activity-title-line {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
}

.home-activity-title-line strong {
  min-width: 0;
  max-width: 100%;
}

.home-activity-card.is-post-card .home-activity-title-line strong {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
}

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

.home-start-btn {
  display: grid;
  min-height: 74px;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px solid var(--separator);
  border-radius: var(--card-radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 760;
}

.home-start-btn .ui-icon {
  width: 21px;
  height: 21px;
  color: var(--blue);
}

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

.home-explore-card {
  display: grid;
  min-width: 0;
  min-height: 76px;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 7px;
}

.home-explore-card .ui-icon {
  width: 21px;
  height: 21px;
  color: color-mix(in srgb, var(--accent, var(--blue)) 88%, var(--text));
}

.home-explore-card strong {
  width: 100%;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 740;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-explore-blend-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent), transparent 42%),
    var(--surface);
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.home-explore-blend-icon,
.home-explore-blend-arrow {
  display: grid;
  place-items: center;
}

.home-explore-blend-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(48, 209, 88, 0.16), rgba(255, 159, 10, 0.16));
  color: color-mix(in srgb, var(--accent, var(--blue)) 86%, var(--text));
}

.home-explore-blend-icon .ui-icon {
  width: 23px;
  height: 23px;
}

.home-explore-blend-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-explore-blend-copy strong,
.home-explore-blend-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-explore-blend-copy strong {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 820;
  line-height: 1.15;
  white-space: nowrap;
}

.home-explore-blend-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 640;
  line-height: 1.25;
}

.home-explore-blend-arrow {
  color: var(--muted);
}

.home-empty {
  min-height: 168px;
}

.home-page {
  gap: 16px;
  padding: 0 16px 112px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 180px),
    #050608;
  color: #f5f5f7;
}

.home-page .page-header.topbar {
  min-height: 112px;
  margin: 0 -16px 20px;
  padding: calc(env(safe-area-inset-top) + 18px) 16px 14px;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0.96), rgba(5, 6, 8, 0.82) 76%, rgba(5, 6, 8, 0));
  backdrop-filter: blur(22px) saturate(1.15);
}

.home-page .topbar-title {
  justify-items: start;
  align-self: end;
  gap: 2px;
  text-align: left;
}

.home-page .page-title {
  max-width: 100%;
  overflow: hidden;
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 820;
  line-height: 0.98;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-page .topbar-title small {
  color: rgba(245, 245, 247, 0.68);
  font-size: 1.03rem;
  font-weight: 640;
}

.home-page .brand-mark {
  align-self: end;
  background: transparent;
  box-shadow: none;
}

.home-page .header-actions {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.home-page.home-page-empty .header-actions {
  gap: 8px;
}

.home-page .circle-btn,
.home-page .header-notification-btn {
  width: 48px;
  height: 48px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.24);
}

.home-page .header-notification-btn.has-unread {
  border-color: color-mix(in srgb, var(--blue) 50%, rgba(255, 255, 255, 0.16));
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.1);
}

.home-page .header-notification-btn .ui-icon {
  width: 24px;
  height: 24px;
}

.home-page .header-notification-count {
  top: 1px;
  right: 0;
  border-color: #050608;
}

.home-page .header-avatar-btn {
  width: 48px;
  height: 48px;
}

.home-page.home-page-empty .circle-btn,
.home-page.home-page-empty .header-notification-btn,
.home-page.home-page-empty .header-avatar-btn {
  width: 44px;
  height: 44px;
}

.home-page.home-page-empty .circle-btn,
.home-page.home-page-empty .header-notification-btn {
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.home-page .header-avatar {
  width: 42px;
  height: 42px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.09);
}

.home-page.home-page-empty .header-avatar {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.07);
}

.home-list-toolbar {
  display: grid;
  gap: 11px;
  margin-bottom: 6px;
}

.home-list-search-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 245, 247, 0.66);
  padding: 0 12px;
}

.home-list-search-wrap .home-list-search-input {
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  margin: 0;
}

.home-list-search-wrap .home-list-search-input::placeholder {
  color: rgba(245, 245, 247, 0.5);
}

.home-list-search-wrap .home-list-search-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}

.home-list-search-wrap .home-list-search-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.home-list-search-wrap .clear-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
}

.home-list-search-wrap .clear-search-btn::before,
.home-list-search-wrap .clear-search-btn::after {
  left: 11px;
  right: 11px;
  top: 19px;
}

.home-list-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
}

.home-list-toolbar-row .feed-toolbar {
  width: 100%;
  margin-top: 2px;
}

.home-list-event-filters {
  display: grid;
  gap: 8px;
}

.home-list-time-filters,
.home-list-attendance-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-list-time-filters::-webkit-scrollbar,
.home-list-attendance-filters::-webkit-scrollbar {
  display: none;
}

.home-list-type-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  scrollbar-width: none;
}

.home-list-type-filters::-webkit-scrollbar {
  display: none;
}

.home-list-segmented {
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 2px;
  background: color-mix(in srgb, var(--fill) 72%, transparent);
}

.home-list-segmented .home-list-type-filter {
  position: relative;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  padding: 0 3px;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

.home-list-segmented .home-list-type-filter.is-active {
  background:
    radial-gradient(circle at 50% 16%, rgba(10, 132, 255, 0.24), transparent 58%),
    rgba(10, 132, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.13);
}

.home-list-segmented .home-list-type-filter.is-active::after {
  content: none;
}

.home-list-type-filter,
.home-list-unread-toggle {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(245, 245, 247, 0.9);
  padding: 0 11px;
  font-size: 0.81rem;
  font-weight: 760;
}

.home-list-type-filter {
  min-height: 38px;
}

.home-list-type-filter.is-active {
  border-color: rgba(235, 235, 245, 0.42);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.home-list-unread-toggle.is-active,
.home-list-unread-toggle[aria-pressed="true"] {
  border-color: rgba(235, 235, 245, 0.42);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.home-list-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.home-list-sort-wrap {
  position: relative;
}

.home-list-sort-wrap .feed-sort-btn {
  padding: 0 10px;
  color: #fff;
}

.home-list-sort-wrap .feed-sort-btn .ui-icon {
  color: #fff;
}

.home-list-sort-wrap .feed-sort-menu {
  right: 0;
}

.home-page .home-section {
  gap: 12px;
  margin-bottom: 20px;
}

.home-page .home-section-head {
  padding: 0 2px;
}

.home-page .home-section-head h2 {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
}

.home-page .home-section-head button {
  color: rgba(98, 220, 110, 0.95);
  font-size: 0.9rem;
}

.home-page .home-card-list {
  gap: 10px;
}

.home-page .home-activity-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, #0a84ff) 13%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    #16181d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

.home-page .home-activity-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent, #0a84ff) 42%, transparent) 12%,
    color-mix(in srgb, var(--accent, #0a84ff) 74%, rgba(255, 255, 255, 0.12)) 50%,
    color-mix(in srgb, var(--accent, #0a84ff) 38%, transparent) 88%,
    transparent 100%
  );
  opacity: 0.86;
  filter: saturate(1.08);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--accent, #0a84ff) 24%, transparent),
    0 0 28px color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent);
  pointer-events: none;
}

.home-page .home-activity-card.is-blend {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent, #0a84ff) 13%, transparent), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent, #0a84ff) 10%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    #16181d;
}

.home-page .home-activity-main {
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  gap: 14px;
  min-height: 86px;
  padding: 16px 16px 16px 20px;
}

.home-page .home-activity-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #0a84ff) 20%, rgba(255, 255, 255, 0.08));
  color: color-mix(in srgb, var(--accent, #0a84ff) 86%, #ffffff);
}

.home-page .home-activity-icon .ui-icon {
  width: 25px;
  height: 25px;
}

.home-page .home-activity-copy small {
  color: color-mix(in srgb, var(--accent, #0a84ff) 78%, #ffffff);
  font-size: 0.86rem;
  font-weight: 760;
}

.home-page .home-activity-copy strong {
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 790;
  line-height: 1.18;
}

.home-page .home-activity-copy span {
  color: rgba(245, 245, 247, 0.66);
  font-size: 0.9rem;
}

.home-card-chevron {
  display: grid;
  place-items: center;
  color: rgba(245, 245, 247, 0.62);
}

.home-card-chevron .ui-icon {
  width: 21px;
  height: 21px;
}

.home-page .home-empty-card .home-activity-main {
  grid-template-columns: 54px minmax(0, 1fr);
}

.home-page .home-empty {
  min-height: 154px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    #15171b;
  color: rgba(245, 245, 247, 0.64);
}

.home-page .home-empty strong {
  color: #ffffff;
}

.home-page .home-start-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.home-page .home-start-btn,
.home-page .home-explore-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    #15171b;
  color: rgba(245, 245, 247, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.home-page .home-start-btn {
  min-height: 54px;
  gap: 4px;
  padding: 8px 4px;
  font-size: 0.72rem;
  font-weight: 720;
}

.home-page .home-start-btn:nth-child(1) .ui-icon {
  color: #5e9cff;
}

.home-page .home-start-btn:nth-child(2) .ui-icon {
  color: #72d86d;
}

.home-page .home-start-btn:nth-child(3) .ui-icon {
  color: #ffc340;
}

.home-page .home-start-btn:nth-child(4) .ui-icon {
  color: #ff9f5a;
}

.home-page .home-explore-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-page .home-explore-card {
  min-height: 92px;
}

.home-page .home-explore-card span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #0a84ff) 18%, rgba(255, 255, 255, 0.08));
}

.home-page .home-explore-card .ui-icon {
  color: color-mix(in srgb, var(--accent, #0a84ff) 86%, #ffffff);
}

.home-page .home-explore-card.is-blend span {
  background:
    linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(48, 209, 88, 0.16), rgba(255, 159, 10, 0.16));
}

.home-page .home-explore-card strong {
  color: #ffffff;
  font-size: 0.82rem;
}

.home-page .home-explore-blend-card {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 10% 12%, rgba(185, 167, 238, 0.18), transparent 46%),
    rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-page .home-explore-blend-copy strong {
  color: #ffffff;
}

.home-page .home-explore-blend-copy small {
  color: rgba(245, 245, 247, 0.68);
}

.home-page .home-explore-blend-arrow {
  color: rgba(245, 245, 247, 0.58);
}

.home-page + .bottom-nav {
  border-top-color: rgba(255, 255, 255, 0.1);
  background: rgba(5, 6, 8, 0.92);
}

.home-page + .bottom-nav .nav-item {
  color: rgba(245, 245, 247, 0.55);
}

.home-page + .bottom-nav .nav-item.active {
  color: #0a84ff;
}

.add-community-sheet-backdrop {
  position: fixed;
  inset: 0 0 calc(74px + env(safe-area-inset-bottom)) 0;
  z-index: 11;
  background: rgba(0, 0, 0, 0.28);
}

.add-community-sheet {
  position: fixed;
  right: max(14px, calc((100vw - 460px) / 2 + 14px));
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: max(14px, calc((100vw - 460px) / 2 + 14px));
  z-index: 12;
  display: grid;
  max-height: min(66dvh, 650px);
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(24, 25, 29, 0.96);
  color: #f5f5f7;
  padding: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(28px) saturate(1.18);
}

.add-community-sheet.is-suggest {
  max-height: min(72dvh, 760px);
}

.sheet-grabber {
  justify-self: center;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.46);
}

.add-community-sheet-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}

.add-community-sheet-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
}

.sheet-back-btn,
.sheet-close-btn {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #f5f5f7;
}

.sheet-back-btn.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.sheet-back-btn .ui-icon,
.sheet-close-btn .ui-icon {
  width: 19px;
  height: 19px;
}

.sheet-feedback {
  border: 1px solid rgba(48, 209, 88, 0.22);
  border-radius: 12px;
  background: rgba(48, 209, 88, 0.12);
  color: #7ee787;
  padding: 9px 11px;
  font-size: 0.86rem;
  font-weight: 720;
}

.sheet-context-note {
  margin: 0 2px;
  color: rgba(245, 245, 247, 0.68);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.35;
}

.add-community-sheet-controls {
  display: grid;
  flex: 0 0 auto;
  gap: 9px;
  min-width: 0;
}

.sheet-search-wrap {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 245, 247, 0.66);
  padding: 0 12px;
}

.sheet-scope-context {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.sheet-scope-context::before,
.sheet-scope-context::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 38px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.sheet-scope-context::before {
  left: 0;
  background: linear-gradient(90deg, rgba(20, 24, 36, 0.92), rgba(20, 24, 36, 0.28) 58%, transparent);
}

.sheet-scope-context::after {
  right: 0;
  background:
    linear-gradient(90deg, transparent, rgba(20, 24, 36, 0.36) 34%, rgba(20, 24, 36, 0.94) 100%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08));
}

.sheet-scope-context.is-scrollable:not(.is-at-start)::before,
.sheet-scope-context.is-scrollable:not(.is-at-end)::after {
  opacity: 1;
}

.sheet-scope-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 44px 2px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sheet-scope-row::-webkit-scrollbar {
  display: none;
}

.sheet-suggestion-kind-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
  padding: 3px;
}

.sheet-kind-segment {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(245, 245, 247, 0.68);
  font-size: 0.82rem;
  font-weight: 790;
}

.sheet-kind-segment.is-active {
  background: rgba(245, 245, 247, 0.12);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.08);
}

.sheet-scope-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  max-width: 148px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 245, 247, 0.74);
  padding: 0 10px 0 12px;
  font-size: 0.76rem;
  font-weight: 760;
}

.sheet-scope-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-scope-chip small {
  flex: 0 0 auto;
  min-width: 19px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 247, 0.64);
  padding: 2px 6px;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.1;
}

.sheet-scope-chip.is-active {
  border-color: color-mix(in srgb, var(--blue) 58%, rgba(255, 255, 255, 0.12));
  background:
    radial-gradient(circle at 20% 20%, rgba(10, 132, 255, 0.26), transparent 58%),
    rgba(10, 132, 255, 0.16);
  color: #fff;
}

.sheet-scope-chip.is-active small {
  background: rgba(10, 132, 255, 0.22);
  color: #fff;
}

.sheet-search-wrap .ui-icon {
  width: 19px;
  height: 19px;
}

.sheet-search-wrap input {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #ffffff;
  outline: 0;
}

.sheet-search-clear {
  position: relative;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(235, 235, 245, 0.24) 0 12px, transparent 13px);
  color: #fff;
}

.sheet-search-clear::before,
.sheet-search-clear::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.sheet-search-clear::before {
  transform: rotate(45deg);
}

.sheet-search-clear::after {
  transform: rotate(-45deg);
}

.sheet-search-wrap input::placeholder,
.sheet-suggest-form input::placeholder,
.sheet-suggest-form textarea::placeholder {
  color: rgba(245, 245, 247, 0.48);
}

.sheet-result-list {
  display: grid;
  overflow-y: auto;
  border-radius: 14px;
  scrollbar-gutter: stable;
}

.sheet-result-head {
  display: grid;
  align-items: center;
  min-height: 42px;
  padding: 2px 2px 6px;
}

.sheet-result-head strong,
.sheet-result-head small {
  display: block;
}

.sheet-result-head strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.16;
}

.sheet-result-head small {
  margin-top: 2px;
  color: rgba(245, 245, 247, 0.56);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
}

.sheet-result-note {
  margin: 8px 0;
  color: rgba(245, 245, 247, 0.56);
  font-size: 0.74rem;
  font-weight: 680;
  line-height: 1.3;
  text-align: center;
}

.sheet-community-row,
.sheet-suggest-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: inherit;
  padding: 10px 0;
  text-align: left;
}

.sheet-community-row:disabled {
  opacity: 0.72;
}

.sheet-suggest-row {
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  padding: 10px 12px;
}

.sheet-suggest-footer {
  margin-top: 10px;
  min-height: 64px;
  border-color: rgba(235, 235, 245, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  padding: 9px 11px;
}

.sheet-suggest-footer.is-secondary-fallback {
  margin-top: 14px;
  border-color: rgba(235, 235, 245, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.sheet-row-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #0a84ff) 20%, rgba(255, 255, 255, 0.08));
  color: color-mix(in srgb, var(--accent, #0a84ff) 86%, #ffffff);
}

.sheet-row-icon.neutral {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sheet-row-icon .ui-icon {
  width: 23px;
  height: 23px;
}

.sheet-community-row strong,
.sheet-suggest-row strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 780;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-community-row small,
.sheet-suggest-row small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(245, 245, 247, 0.58);
  font-size: 0.84rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-row-chevron {
  justify-self: end;
  color: rgba(245, 245, 247, 0.62);
  font-size: 0.78rem;
  font-weight: 740;
}

.sheet-row-action {
  justify-self: end;
  min-width: 48px;
  border: 1px solid color-mix(in srgb, var(--accent, #0a84ff) 44%, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #0a84ff) 20%, rgba(255, 255, 255, 0.06));
  color: #fff;
  padding: 5px 9px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 820;
}

.sheet-row-chevron .ui-icon {
  width: 20px;
  height: 20px;
}

.sheet-empty-result {
  display: grid;
  gap: 3px;
  min-height: 74px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px;
}

.sheet-empty-result strong {
  color: #ffffff;
}

.sheet-empty-result span {
  color: rgba(245, 245, 247, 0.58);
  font-size: 0.86rem;
}

.sheet-suggest-form {
  display: grid;
  gap: 11px;
  overflow-y: auto;
  padding-right: 2px;
}

.sheet-suggest-form label {
  display: grid;
  gap: 6px;
  color: rgba(245, 245, 247, 0.68);
  font-size: 0.8rem;
  font-weight: 720;
}

.sheet-suggest-form .text-field,
.sheet-suggest-form .select-field,
.sheet-suggest-form textarea {
  width: 100%;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.sheet-suggest-form textarea {
  min-height: 76px;
  resize: vertical;
  padding: 12px;
}

.suggest-community-card .sheet-suggest-form {
  overflow: visible;
  padding-right: 0;
}

.suggest-community-card .sheet-suggest-form textarea {
  min-height: 96px;
}

/* Home v2 stays inside the existing app shell instead of becoming a separate theme. */
.home-page {
  background: var(--surface-soft);
  color: var(--text);
}

.home-page .page-header.topbar {
  min-height: 96px;
  margin-bottom: 18px;
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 96%, transparent), color-mix(in srgb, var(--surface-soft) 82%, transparent) 78%, transparent);
}

.home-page .page-title {
  color: var(--text);
  font-size: 2rem;
  line-height: 1.04;
}

.home-page .topbar-title small {
  color: var(--muted);
  font-size: 0.98rem;
}

.home-page .brand-mark {
  background: transparent;
  box-shadow: none;
}

.home-page .circle-btn {
  width: 44px;
  height: 44px;
  border-color: var(--separator);
  background: var(--surface-elevated);
  color: var(--blue);
  box-shadow: none;
}

.home-page .header-avatar-btn {
  width: 44px;
  height: 44px;
}

.home-page .header-avatar {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--avatar-ring) 18%, transparent);
}

.home-page .home-section-head h2 {
  color: var(--text);
  font-size: 1.18rem;
}

.home-page .home-section-head button {
  color: var(--blue);
}

.home-page .home-activity-card {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 22%, var(--separator));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 9%, transparent), transparent 52%),
    var(--surface);
  box-shadow: none;
}

.home-page .home-activity-card.is-featured {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 38%, var(--separator));
}

.home-page .home-activity-card.is-blend {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent, var(--blue)) 10%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 8%, transparent), transparent 56%),
    var(--surface);
}

.home-page .home-activity-main {
  min-height: 82px;
}

.home-page .home-activity-icon {
  background: color-mix(in srgb, var(--accent, var(--blue)) 13%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent, var(--blue)) 84%, var(--text));
}

.home-page .home-activity-copy small {
  color: color-mix(in srgb, var(--accent, var(--blue)) 74%, var(--text));
}

.home-page .home-activity-copy strong {
  color: var(--text);
}

.home-page .home-activity-copy span,
.home-card-chevron {
  color: var(--muted);
}

.home-page .home-empty {
  border-color: var(--separator);
  background: var(--surface);
  color: var(--muted);
}

.home-page .home-empty strong {
  color: var(--text);
}

.home-first-use-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
}

.home-first-use-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-elevated));
  color: var(--blue);
}

.home-first-use-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.home-first-use-card span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-first-use-card strong {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 820;
}

.home-first-use-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.32;
}

.home-first-use-card .secondary-btn {
  min-height: 38px;
  padding: 0 14px;
}

.home-recently-joined-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
}

.home-recently-joined-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.home-recently-joined-browse {
  min-height: 44px;
  justify-self: end;
  padding: 0 12px;
}

.home-recently-joined-main {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 7%, transparent);
  color: var(--text);
  padding: 8px 8px 8px 10px;
  text-align: left;
}

.home-recently-joined-main:focus-visible,
.home-recently-joined-main:hover {
  background: color-mix(in srgb, var(--accent, var(--blue)) 13%, transparent);
  outline: 0;
}

.home-recently-joined-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, var(--blue)) 16%, var(--surface-elevated));
  color: var(--accent, var(--blue));
}

.home-recently-joined-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.home-recently-joined-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-recently-joined-copy strong,
.home-recently-joined-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recently-joined-copy strong {
  font-size: 0.94rem;
  font-weight: 820;
}

.home-recently-joined-copy small,
.home-recently-joined-card p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.home-recently-joined-card p {
  grid-column: 1 / -1;
  margin: 0;
}

.home-page .home-start-btn,
.home-page .home-explore-card {
  border-color: var(--separator);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.home-page .home-explore-card span {
  background: color-mix(in srgb, var(--accent, var(--blue)) 12%, var(--surface-elevated));
}

.home-page .home-explore-card strong {
  color: var(--text);
}

.home-page + .bottom-nav {
  border-top-color: var(--separator);
  background: var(--bar-bg);
}

.home-page + .bottom-nav .nav-item {
  color: var(--faint);
}

.home-page + .bottom-nav .nav-item.active {
  color: var(--blue);
}

.add-community-sheet-backdrop {
  background: rgba(0, 0, 0, 0.24);
}

.add-community-sheet {
  border-color: var(--separator);
  background: var(--sheet-bg);
  color: var(--text);
}

.add-community-sheet-head h2,
.sheet-community-row strong,
.sheet-suggest-row strong,
.sheet-empty-result strong {
  color: var(--text);
}

.sheet-back-btn,
.sheet-close-btn {
  background: var(--fill);
  color: var(--text);
}

.sheet-search-wrap,
.sheet-suggest-form .text-field,
.sheet-suggest-form .select-field,
.sheet-suggest-form textarea {
  border-color: var(--separator);
  background: var(--surface);
  color: var(--text);
}

.sheet-search-wrap input {
  color: var(--text);
}

.sheet-search-wrap input::placeholder,
.sheet-suggest-form input::placeholder,
.sheet-suggest-form textarea::placeholder {
  color: var(--faint);
}

.sheet-community-row,
.sheet-suggest-row {
  border-bottom-color: var(--separator);
}

.sheet-suggest-row,
.sheet-empty-result {
  border-color: var(--separator);
  background: color-mix(in srgb, var(--surface) 90%, var(--fill));
}

.sheet-community-row small,
.sheet-suggest-row small,
.sheet-empty-result span,
.sheet-suggest-form label {
  color: var(--muted);
}

.sheet-row-chevron {
  color: var(--faint);
}

.for-you-page {
  gap: 22px;
  padding-inline: clamp(16px, 4.5vw, 20px);
}

.for-you-page > .page-header {
  margin-bottom: 2px;
}

.for-you-page > .page-header h1 {
  letter-spacing: 0;
}

.for-you-card-slot {
  display: grid;
  min-width: 0;
  gap: 0;
}

.for-you-now-section,
.for-you-worth-section,
.for-you-community-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.for-you-cold-start-card {
  display: grid;
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(149, 128, 255, 0.34);
  border-radius: 20px;
  background: #171722;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 42px rgba(0, 0, 0, 0.24);
}

.for-you-cold-start-kicker,
.for-you-opportunity-kicker {
  color: #b9abff;
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.for-you-cold-start-intro {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.for-you-cold-start-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(167, 151, 255, 0.28);
  border-radius: 16px;
  background: #29233f;
  color: #c7bbff;
}

.for-you-cold-start-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.for-you-cold-start-intro h2,
.for-you-cold-start-intro p {
  margin: 0;
}

.for-you-cold-start-intro h2 {
  color: #fff;
  font-size: 1.28rem;
  line-height: 1.14;
}

.for-you-cold-start-intro p {
  margin-top: 5px;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.84rem;
}

.for-you-cold-start-primary {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  border-radius: 17px;
  padding: 11px 14px;
  text-align: left;
}

.for-you-cold-start-primary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.for-you-cold-start-primary .ui-icon {
  width: 20px;
  height: 20px;
}

.for-you-cold-start-primary strong {
  font-size: 0.95rem;
}

.for-you-cold-start-primary small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 620;
  line-height: 1.25;
}

.for-you-cold-start-alternatives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.for-you-cold-start-secondary {
  display: grid;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  padding: 10px;
  font: inherit;
  text-align: left;
}

.for-you-cold-start-secondary > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(149, 128, 255, 0.15);
  color: #b9abff;
}

.for-you-cold-start-secondary .ui-icon {
  width: 17px;
  height: 17px;
}

.for-you-cold-start-secondary > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.for-you-cold-start-secondary strong,
.for-you-cold-start-secondary small {
  line-height: 1.2;
}

.for-you-cold-start-secondary strong {
  font-size: 0.82rem;
}

.for-you-cold-start-secondary small {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.68rem;
  font-weight: 630;
}

.for-you-cold-start-note {
  margin: 0;
  color: rgba(235, 235, 245, 0.48);
  font-size: 0.72rem;
  text-align: center;
}

.for-you-programme-followup {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-color: color-mix(in srgb, var(--blue) 28%, var(--separator));
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.for-you-programme-followup-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface-elevated));
  color: var(--blue);
}

.for-you-programme-followup-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.for-you-programme-followup-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.for-you-programme-followup-copy > span {
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 820;
}

.for-you-programme-followup-copy h2,
.for-you-programme-followup-copy p {
  margin: 0;
}

.for-you-programme-followup-copy h2 {
  font-size: 1rem;
  line-height: 1.2;
}

.for-you-programme-followup-copy p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.for-you-programme-followup .primary-btn {
  min-width: 82px;
  min-height: 42px;
}

.for-you-opportunity-list {
  display: grid;
  gap: 10px;
}

.for-you-opportunity-card {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 18px;
  background: #17171e;
  color: #fff;
  padding: 13px;
  font: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.for-you-opportunity-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(235, 235, 245, 0.1));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, #202029);
  color: color-mix(in srgb, var(--accent) 78%, #fff);
}

.for-you-opportunity-icon .ui-icon,
.for-you-opportunity-chevron .ui-icon {
  width: 19px;
  height: 19px;
}

.for-you-opportunity-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.for-you-opportunity-copy strong,
.for-you-opportunity-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-opportunity-copy strong {
  font-size: 0.94rem;
  line-height: 1.18;
}

.for-you-opportunity-copy small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.76rem;
}

.for-you-opportunity-copy em {
  justify-self: start;
  border: 1px solid rgba(95, 214, 160, 0.26);
  border-radius: 999px;
  background: rgba(95, 214, 160, 0.1);
  color: #8ee5bb;
  padding: 3px 7px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 760;
}

.for-you-opportunity-chevron {
  color: rgba(235, 235, 245, 0.42);
}

@media (max-width: 340px) {
  .for-you-cold-start-card {
    padding: 15px;
  }

  .for-you-cold-start-alternatives {
    grid-template-columns: 1fr;
  }

  .for-you-opportunity-card {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    gap: 10px;
    padding-inline: 11px;
  }
}

@media (max-width: 430px) {
  .for-you-cold-start-alternatives {
    grid-template-columns: 1fr;
  }

  .for-you-cold-start-secondary {
    min-height: 60px;
  }
}

.for-you-next-section {
  display: grid;
  gap: 9px;
}

.for-you-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.for-you-section-head span {
  color: #fff;
  font-size: 0.96rem;
  font-weight: 780;
}

.for-you-section-head small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  white-space: nowrap;
}

.for-you-tools {
  display: grid;
  gap: 9px;
}

.for-you-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.for-you-tool {
  display: grid;
  min-width: 0;
  min-height: 76px;
  grid-template-rows: auto auto;
  place-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid color-mix(in srgb, var(--separator) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  font: inherit;
  text-align: center;
}

.for-you-tool-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-elevated));
  color: var(--blue);
}

.for-you-tool-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.for-you-tool-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.for-you-tool-copy strong,
.for-you-tool-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-tool-copy strong {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.15;
}

.for-you-tool-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 680;
}

.for-you-tool:active {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--separator));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.for-you-personalization-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 16px;
  scroll-margin-top: 112px;
  border-color: color-mix(in srgb, var(--blue) 26%, var(--separator));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.for-you-flow-close {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fill) 82%, transparent);
  color: var(--muted);
}

.for-you-flow-close:hover,
.for-you-flow-close:focus-visible {
  background: color-mix(in srgb, var(--blue) 14%, var(--fill));
  color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--blue) 44%, transparent);
  outline-offset: 2px;
}

.for-you-flow-close .ui-icon {
  width: 18px;
  height: 18px;
}

.for-you-personalization-card:not(.is-entry) > .for-you-personalization-head,
.language-card > .research-step-head,
.co-creator-flow-card > .co-creator-flow-head {
  padding-right: 46px;
}

.research-prompt-chevron {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: var(--muted);
}

.research-prompt-chevron .ui-icon {
  width: 18px;
  height: 18px;
}

.for-you-personalization-card.is-entry {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-right: 48px;
}

.for-you-personalization-entry-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue);
}

.for-you-personalization-entry-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.for-you-personalization-entry-copy,
.for-you-personalization-head {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.for-you-personalization-entry-copy h2,
.for-you-personalization-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.for-you-personalization-entry-copy p,
.for-you-personalization-head small {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.for-you-personalization-entry-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.for-you-personalization-entry-actions .research-skip-btn {
  width: 100%;
  white-space: nowrap;
}

.for-you-personalization-entry-actions .primary-btn {
  width: 100%;
  min-height: 44px;
}

.for-you-personalization-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

.for-you-personalization-menu > summary {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.for-you-personalization-menu > summary::-webkit-details-marker {
  display: none;
}

.for-you-personalization-menu > summary .ui-icon {
  width: 19px;
  height: 19px;
}

.for-you-personalization-menu > div {
  position: absolute;
  top: 42px;
  right: 0;
  display: grid;
  width: min(250px, calc(100vw - 54px));
  gap: 8px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sheet-bg) 96%, #11151f);
  padding: 10px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.for-you-personalization-menu button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fill) 76%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 760;
}

.for-you-personalization-menu p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.for-you-personalization-head > span {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
}

.for-you-personalization-count {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 680;
}

.for-you-personalization-needs,
.for-you-personalization-results {
  display: grid;
  gap: 8px;
}

.for-you-personalization-need,
.for-you-personalization-community {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--fill) 72%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.for-you-personalization-need {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
}

.for-you-personalization-need > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
}

.for-you-personalization-need .ui-icon {
  width: 16px;
  height: 16px;
}

.for-you-personalization-need strong {
  font-size: 0.88rem;
  line-height: 1.25;
}

.for-you-personalization-need.is-selected,
.for-you-personalization-community.is-selected {
  border-color: color-mix(in srgb, var(--blue) 56%, var(--separator));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.for-you-personalization-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fill) 72%, transparent);
  padding: 0 12px;
  color: var(--muted);
}

.for-you-personalization-unsure {
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fill) 72%, transparent);
  color: var(--text);
  padding: 8px 11px;
  text-align: left;
}

.for-you-personalization-unsure > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.for-you-personalization-unsure > span:last-child {
  display: grid;
  gap: 2px;
}

.for-you-personalization-unsure strong {
  font-size: 0.86rem;
}

.for-you-personalization-unsure small {
  color: var(--muted);
  font-size: 0.72rem;
}

.for-you-personalization-unsure.is-selected {
  border-color: color-mix(in srgb, var(--blue) 56%, var(--separator));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.for-you-personalization-search .ui-icon {
  width: 18px;
  height: 18px;
}

.for-you-personalization-search input {
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.for-you-personalization-community {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 10px;
}

.for-you-personalization-community-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
}

.for-you-personalization-community-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.for-you-personalization-community-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.for-you-personalization-community-copy strong,
.for-you-personalization-community-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-personalization-community-copy strong {
  color: var(--text);
  font-size: 0.88rem;
}

.for-you-personalization-community-copy small,
.for-you-personalization-community-state {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 680;
}

.for-you-personalization-community-state {
  color: var(--blue);
}

.for-you-personalization-community.is-joined {
  opacity: 0.7;
}

.for-you-personalization-footer {
  display: grid;
  min-height: 44px;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.for-you-personalization-footer .primary-btn,
.for-you-personalization-footer .secondary-btn {
  width: 100%;
  min-height: 44px;
}

.for-you-personalization-footer .research-skip-btn {
  width: 100%;
  white-space: nowrap;
}

.for-you-personalization-empty {
  margin: 0;
  padding: 18px 12px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 340px) {
  .for-you-tool-grid {
    gap: 7px;
  }

  .for-you-tool {
    min-height: 72px;
    padding-inline: 4px;
  }

  .for-you-tool-copy strong {
    font-size: 0.72rem;
  }
}

.for-you-suggestion-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.for-you-suggestion-head h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.2;
}

.for-you-suggestion-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.for-you-suggestion-list {
  display: grid;
  gap: 8px;
}

.for-you-suggestion-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fill) 76%, transparent);
}

.for-you-suggestion-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
}

.for-you-suggestion-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.for-you-suggestion-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.for-you-suggestion-copy strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.18;
}

.for-you-suggestion-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.for-you-add-btn {
  min-width: 62px;
  height: 36px;
  border-radius: 12px;
}

.for-you-quick-card,
.for-you-start-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.for-you-quick-card {
  gap: 10px;
}

.for-you-suggestion-why {
  display: grid;
  grid-column: 2 / 4;
  min-width: 0;
}

.for-you-suggestion-why > summary {
  justify-self: start;
  min-height: 32px;
  color: var(--blue);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 720;
  list-style: none;
}

.for-you-suggestion-why > summary::-webkit-details-marker {
  display: none;
}

.for-you-suggestion-why > div {
  display: grid;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--separator) 70%, transparent);
  padding-top: 8px;
}

.for-you-suggestion-why p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.for-you-suggestion-why button {
  justify-self: start;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 720;
}

@media (max-width: 340px) {
  .for-you-programme-followup {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .for-you-programme-followup .primary-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.for-you-starter-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.22);
}

.for-you-starter-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.for-you-starter-head > span {
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 790;
}

.for-you-starter-snooze {
  min-width: 72px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 720;
}

.for-you-starter-intro {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.for-you-starter-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--separator));
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 18%, var(--surface-elevated));
  color: var(--blue);
}

.for-you-starter-icon .ui-icon {
  width: 23px;
  height: 23px;
}

.for-you-starter-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.for-you-starter-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.14rem;
  line-height: 1.15;
}

.for-you-starter-copy p,
.for-you-starter-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.for-you-starter-primary {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
}

.for-you-starter-divider {
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
  align-items: center;
  gap: 9px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 680;
}

.for-you-starter-divider::before,
.for-you-starter-divider::after {
  height: 1px;
  background: var(--separator);
  content: "";
}

.for-you-starter-alternatives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.for-you-starter-alternatives .secondary-btn {
  display: grid;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 7px;
  border-radius: 14px;
  padding: 8px 10px;
  white-space: normal;
}

.for-you-starter-alternatives .secondary-btn span {
  display: grid;
  place-items: center;
  color: var(--blue);
}

.for-you-starter-alternatives .secondary-btn .ui-icon {
  width: 18px;
  height: 18px;
}

.for-you-starter-alternatives .secondary-btn strong {
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: left;
  overflow-wrap: anywhere;
}

.for-you-starter-note {
  text-align: center;
}

@media (max-width: 350px) {
  .for-you-starter-alternatives {
    grid-template-columns: 1fr;
  }
}

.for-you-need-grid,
.for-you-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.for-you-focus-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.for-you-focus-strip::-webkit-scrollbar {
  display: none;
}

.for-you-need-btn,
.for-you-start-btn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--separator);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--text);
  text-align: left;
  font: inherit;
}

.for-you-focus-strip .for-you-need-btn {
  flex: 0 0 auto;
  grid-template-columns: 22px max-content;
  min-height: 44px;
  width: auto;
  padding: 8px 11px;
  border-radius: 999px;
}

.for-you-need-btn span,
.for-you-start-btn span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.for-you-focus-strip .for-you-need-btn span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-elevated));
}

.for-you-need-btn .ui-icon,
.for-you-start-btn .ui-icon {
  width: 17px;
  height: 17px;
}

.for-you-need-btn strong,
.for-you-start-btn strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.for-you-focus-strip .for-you-need-btn strong {
  font-size: 0.8rem;
  font-weight: 720;
  white-space: nowrap;
}

.for-you-need-btn.is-active {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--separator));
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.for-you-need-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.for-you-need-action-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface-elevated));
  color: var(--blue);
}

.for-you-need-action-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.for-you-need-action-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.for-you-need-action-copy small {
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 760;
}

.for-you-need-action-copy strong {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 820;
  line-height: 1.15;
}

.for-you-need-action-copy em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.35;
}

.for-you-need-action-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 9px;
}

.for-you-action-btn {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 13px;
  white-space: normal;
}

.research-next-step-preview {
  display: grid;
  gap: 9px;
  margin-top: 2px;
  border-top: 1px solid var(--separator);
  padding-top: 12px;
}

.research-next-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.research-next-step-head span {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 820;
}

.research-next-step-head small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 680;
  text-align: right;
}

.research-next-step-list {
  display: grid;
  gap: 7px;
}

.research-next-step-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fill) 82%, transparent);
  padding: 8px;
}

.research-next-step-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
}

.research-next-step-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.research-next-step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.research-next-step-copy strong {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.15;
}

.research-next-step-copy small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.research-next-step-add {
  min-width: 58px;
  min-height: 44px;
  border-radius: 12px;
  padding: 0 11px;
}

.for-you-caught-up-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
}

.for-you-caught-up-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #34c759 28%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, #34c759 15%, var(--surface-elevated));
  color: #34c759;
}

.for-you-caught-up-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.for-you-caught-up-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.for-you-caught-up-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.15;
}

.for-you-caught-up-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.for-you-caught-up-btn {
  min-width: 124px;
  height: 38px;
  border-radius: 13px;
  white-space: nowrap;
}

.for-you-history-section {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  padding: 0 2px 10px;
}

.for-you-history-head {
  display: flex;
  min-height: 44px;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
  cursor: pointer;
  list-style: none;
}

.for-you-history-head::-webkit-details-marker {
  display: none;
}

.for-you-history-section[open] .for-you-history-head {
  margin-bottom: 2px;
}

.for-you-history-head span {
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.for-you-history-head small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 720;
  white-space: nowrap;
}

.for-you-completed-list {
  display: grid;
  gap: 9px;
}

.for-you-completed-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--separator) 58%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  padding: 7px 8px 7px 7px;
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
}

.for-you-completed-check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.for-you-completed-row .ui-icon {
  width: 14px;
  height: 14px;
}

.for-you-completed-row strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 760;
}

.for-you-completed-row small {
  justify-self: end;
  min-width: 78px;
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--blue);
  font-weight: 740;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .research-next-step-head {
    display: grid;
    gap: 2px;
  }

  .research-next-step-head small {
    text-align: left;
  }

  .research-next-step-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .research-next-step-add {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .for-you-caught-up-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .for-you-caught-up-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .reward-claim-steps {
    grid-template-columns: 1fr;
  }
}

.for-you-token-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.for-you-token-head,
.for-you-token-receipt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.for-you-token-head {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 720;
}

.for-you-token-balance {
  color: var(--blue);
  font-size: 1.38rem;
  font-weight: 880;
  line-height: 1;
}

.for-you-token-receipt {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--separator));
  border-radius: 15px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 11%, transparent), color-mix(in srgb, #34c759 7%, transparent)),
    color-mix(in srgb, var(--surface) 78%, transparent);
  padding: 9px 10px;
}

.for-you-token-receipt.is-collecting {
  border-color: color-mix(in srgb, #34c759 46%, var(--separator));
  animation: reward-receipt-pulse 5.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.for-you-token-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 15%, var(--surface-elevated));
  color: var(--blue);
}

.for-you-token-icon .ui-icon {
  width: 16px;
  height: 16px;
}

.for-you-token-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.for-you-token-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-token-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-token-amount {
  display: inline-flex;
  min-width: 54px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, #34c759 18%, transparent);
  color: #34c759;
  padding: 0 10px;
  font-size: 0.86rem;
  font-weight: 840;
}

.reward-claim-celebration {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--separator));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, var(--surface)), color-mix(in srgb, #34c759 8%, var(--surface)) 68%),
    var(--surface);
  box-shadow: 0 14px 28px rgba(10, 132, 255, 0.12);
  animation: reward-claim-celebration 7.8s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.reward-claim-celebration::after {
  position: absolute;
  inset: -24px;
  background:
    radial-gradient(circle at 18% 28%, color-mix(in srgb, #34c759 20%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 22%, color-mix(in srgb, var(--blue) 26%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 72%, color-mix(in srgb, #34c759 22%, transparent) 0 1px, transparent 2px);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: reward-claim-sparks 5.2s ease-out both;
}

.reward-claim-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, var(--blue), #34c759);
  box-shadow: 0 10px 20px rgba(10, 132, 255, 0.2);
  animation: reward-claim-icon 5.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.reward-claim-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.reward-claim-copy {
  min-width: 0;
}

.reward-claim-copy strong,
.reward-claim-copy small {
  display: block;
}

.reward-claim-copy strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.15;
}

.reward-claim-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.reward-claim-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.reward-claim-step {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 6px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--separator));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-elevated) 74%, transparent);
  padding: 6px;
  opacity: 0.72;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.reward-claim-step > span {
  display: grid;
  grid-row: span 2;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 850;
}

.reward-claim-step > span .ui-icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.reward-claim-step strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-claim-step small {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-claim-step.is-active {
  border-color: color-mix(in srgb, #34c759 36%, var(--separator));
  background: color-mix(in srgb, #34c759 10%, var(--surface-elevated));
  opacity: 1;
  transform: translateY(-1px);
}

.reward-claim-step.is-active > span {
  background: color-mix(in srgb, #34c759 22%, transparent);
  color: #34c759;
}

.reward-claim-step.is-complete {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-elevated));
  opacity: 0.94;
}

.reward-claim-step.is-complete > span {
  background: var(--blue);
  color: #fff;
}

.app-shell .page:not(.world-page) .reward-claim-copy strong {
  color: var(--text);
}

.app-shell .page:not(.world-page) .reward-claim-copy small {
  color: var(--muted);
}

.reward-claim-amount {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 68px;
  justify-items: center;
  gap: 2px;
  border-radius: 999px;
  padding: 7px 11px;
  color: white;
  background: #34c759;
  text-align: center;
  box-shadow: 0 10px 20px color-mix(in srgb, #34c759 24%, transparent);
  animation: reward-claim-amount 5.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.reward-claim-amount strong {
  color: inherit;
  font-size: 1.04rem;
  font-weight: 880;
  line-height: 1;
}

.reward-claim-amount small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1;
}

.reward-claim-progress {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}

.reward-claim-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #34c759);
  transform-origin: left center;
  animation: reward-claim-progress 5.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.for-you-completed-row.is-reward-claiming {
  border-color: color-mix(in srgb, var(--blue) 58%, transparent);
  background: color-mix(in srgb, var(--blue-soft) 52%, transparent);
  animation: for-you-reward-row 5.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.for-you-completed-row.is-reward-claiming::after {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--blue) 22%, transparent) 44%, transparent 70%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-42%);
  animation: for-you-reward-sheen 5.2s ease-out both;
}

.for-you-completed-row.is-reward-claiming .for-you-completed-check {
  background: var(--blue);
  color: white;
  animation: for-you-reward-check 5.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.for-you-completed-row.is-reward-claiming .for-you-reward-pill {
  background: var(--blue);
  color: white;
  text-align: center;
  animation: for-you-reward-pill 5.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.profile-identity {
  display: grid;
  width: min(100%, 280px);
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.profile-identity .profile-avatar {
  margin: 0 auto 16px;
}

.profile-identity .profile-email {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.profile-school {
  max-width: 100%;
  color: var(--secondary);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.profile-token-line {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-token-line strong {
  color: var(--blue);
  font-size: 0.94rem;
}

.research-card {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
}

.for-you-more-section {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.for-you-prompt-list {
  display: grid;
  gap: 10px;
}

.for-you-prompt-list .research-card,
.for-you-prompt-list .course-checklist-prompt {
  margin-bottom: 0;
}

.for-you-privacy-card {
  display: block;
  margin-top: 2px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.for-you-completed-row.is-action {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.for-you-privacy-card > summary {
  display: grid;
  min-height: 44px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
}

.for-you-privacy-card > summary::-webkit-details-marker {
  display: none;
}

.for-you-privacy-card > summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.for-you-privacy-card > summary strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.2;
}

.for-you-privacy-card > summary small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.for-you-privacy-card > summary .sheet-row-chevron {
  transition: transform 160ms ease;
}

.for-you-privacy-card[open] > summary .sheet-row-chevron {
  transform: rotate(180deg);
}

.for-you-privacy-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.for-you-privacy-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.for-you-privacy-card h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.2;
}

.for-you-privacy-card p {
  margin: 10px 0 0 49px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.38;
}

.research-card-copy {
  display: grid;
  gap: 5px;
}

.research-kicker {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0;
}

.research-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.2;
}

.research-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.research-card small,
.research-privacy-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.research-card-prompt {
  padding: 14px 15px;
}

.research-prompt-button {
  width: 100%;
  border: 1px solid var(--separator);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.research-prompt-button:hover {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--separator));
  background: color-mix(in srgb, var(--surface) 88%, var(--blue) 12%);
}

.research-prompt-button:active {
  transform: scale(0.99);
}

.research-prompt-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.research-prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.course-checklist-prompt {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 15px 44px 15px 15px;
}

.course-checklist-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--separator);
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--surface) 92%, transparent) 0 16px, transparent 17px);
  color: var(--muted);
}

.course-checklist-dismiss .ui-icon {
  width: 15px;
  height: 15px;
}

.course-checklist-dismiss:active {
  transform: scale(0.96);
}

.course-checklist-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.course-checklist-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 13%, var(--surface-elevated));
  color: var(--blue);
}

.course-checklist-mark .ui-icon {
  width: 21px;
  height: 21px;
}

.course-checklist-copy h2 {
  max-width: 18rem;
  margin-top: 2px;
}

.course-checklist-copy p {
  max-width: 22rem;
}

.course-checklist-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 10px;
}

.course-checklist-actions.academic-role-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-checklist-actions .secondary-btn,
.course-checklist-actions .primary-btn {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  white-space: nowrap;
}

.course-checklist-with-programmes {
  padding-right: 15px;
}

.course-checklist-with-programmes .course-checklist-head {
  padding-right: 32px;
}

.course-checklist-with-programmes .course-programme-panel {
  margin: 0;
}

.academic-setup-list {
  margin-top: 2px;
}

.academics-assist-entry {
  display: grid;
  width: 100%;
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--separator));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.academics-assist-entry.is-compact {
  min-height: 62px;
  border-radius: 15px;
}

.academics-assist-entry-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-elevated));
  color: var(--blue);
}

.academics-assist-entry-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.academics-assist-entry span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.academics-assist-entry strong {
  color: var(--text);
  font-size: 0.94rem;
}

.academics-assist-entry small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.academics-assist-sheet {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  max-height: min(90dvh, 760px);
  padding: 10px;
}

.academics-assist-sheet.is-role-step {
  max-height: min(74dvh, 520px);
}

.academics-assist-body {
  display: grid;
  min-height: 0;
  gap: 10px;
  overflow: auto;
  padding: 0 2px 16px;
  overscroll-behavior: contain;
}

.academics-assist-sheet.is-role-step .academics-assist-body {
  overflow: visible;
}

.academics-assist-card {
  display: grid;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 4px;
}

.academics-assist-card strong {
  color: var(--text);
  font-size: 0.9rem;
}

.academics-assist-card small,
.academics-assist-status {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.academics-assist-status {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  padding: 10px 12px;
}

.academics-assist-role-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.academics-assist-role-grid button,
.academics-assist-levels button,
.academics-assist-community-row {
  border: 0;
  background: transparent;
  color: var(--text);
}

.academics-assist-role-grid button {
  display: grid;
  min-height: 48px;
  gap: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--separator) 72%, transparent);
  border-radius: 0;
  padding: 8px 14px;
  text-align: left;
}

.academics-assist-role-grid button:last-child {
  border-bottom: 0;
}

.academics-assist-role-grid strong {
  font-size: 0.84rem;
  line-height: 1.2;
}

.academics-assist-role-grid small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.academics-assist-level-wrap {
  display: grid;
  gap: 7px;
}

.academics-assist-level-wrap > span {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 760;
}

.academics-assist-level-wrap > span small {
  color: var(--muted);
  font-size: inherit;
  font-weight: 650;
}

.academics-assist-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.academics-assist-levels button {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 0 13px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.academics-assist-levels button.is-active {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--separator));
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
  color: var(--blue);
}

.academics-assist-levels button .ui-icon {
  width: 14px;
  height: 14px;
}

.academics-assist-intents {
  display: grid;
  gap: 8px;
}

.academics-assist-intent-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.academics-assist-intents .course-programme-intro {
  display: grid;
  align-items: start;
  justify-content: stretch;
  gap: 2px;
}

.academics-assist-intent-row button {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  padding: 0 13px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.2;
}

.academics-assist-intent-row button[data-academic-intent="all"] {
  grid-column: 1 / -1;
}

.academics-assist-intent-row button.is-active {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--separator));
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}

.academics-assist-intent-summary {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.2;
}

.academics-assist-other-paths {
  display: grid;
  border-top: 1px solid color-mix(in srgb, var(--separator) 72%, transparent);
}

.academics-assist-other-paths > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 720;
  list-style: none;
}

.academics-assist-other-paths > summary::-webkit-details-marker {
  display: none;
}

.academics-assist-other-paths > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--faint);
  font-size: 1rem;
}

.academics-assist-other-paths[open] > summary::after {
  content: "\2212";
}

.academics-assist-other-paths > div {
  display: grid;
  gap: 0;
  padding-bottom: 4px;
}

.academics-assist-other-paths:not([open]) > div {
  display: none;
}

.academics-assist-other-paths > div > button {
  min-height: 44px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--separator) 58%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 0;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 680;
}

.course-checklist-other-paths {
  margin-top: -2px;
}

.academics-assist-suggestions {
  display: grid;
  gap: 10px;
}

.academics-assist-context-note {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--separator) 76%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fill) 64%, transparent);
  color: var(--muted);
  padding: 11px 12px;
  font-size: 0.76rem;
  line-height: 1.4;
}

.academics-assist-community-list {
  display: grid;
  gap: 10px;
}

.academics-assist-community-row {
  display: grid;
  min-height: 58px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: 10px;
  text-align: left;
}

.academics-assist-community-row.is-selected {
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.academics-assist-community-row.is-joined {
  opacity: 0.76;
}

.academics-assist-community-row span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.academics-assist-community-row strong,
.academics-assist-community-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academics-assist-community-row strong {
  color: var(--text);
  font-size: 0.9rem;
}

.academics-assist-community-row small {
  color: var(--muted);
  font-size: 0.75rem;
}

.academics-assist-actions,
.academics-assist-footer {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 10px;
}

.academics-assist-footer {
  padding-top: 2px;
}

.academics-assist-footer.is-quiet {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}

.academics-assist-footer.is-quiet .secondary-btn {
  border-color: color-mix(in srgb, var(--separator) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.academics-assist-footer.is-quiet .primary-btn {
  border-color: color-mix(in srgb, var(--separator) 66%, transparent);
  background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  color: var(--text);
}

.academics-assist-actions .secondary-btn,
.academics-assist-actions .primary-btn,
.academics-assist-footer .secondary-btn,
.academics-assist-footer .primary-btn {
  width: 100%;
  min-height: 46px;
  white-space: nowrap;
}

.research-reward-line {
  color: var(--blue);
  font-weight: 740;
}

.research-duration {
  color: var(--muted);
  font-weight: 680;
}

.research-reward-stack {
  display: grid;
  gap: 2px;
  min-width: 112px;
  justify-items: end;
  color: var(--blue);
  line-height: 1.15;
  white-space: nowrap;
}

.research-reward-stack span {
  font-size: 0.84rem;
  font-weight: 790;
}

.research-reward-stack small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
}

.co-creator-prompt {
  position: relative;
  overflow: visible;
  border-color: color-mix(in srgb, #38c7bd 34%, var(--separator));
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, #38c7bd 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, var(--surface)), var(--surface) 58%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px color-mix(in srgb, #38c7bd 10%, transparent);
  cursor: pointer;
}

.co-creator-prompt:hover {
  border-color: color-mix(in srgb, #38c7bd 48%, var(--separator));
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, #38c7bd 22%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, var(--surface)), var(--surface) 58%),
    var(--surface);
}

.co-creator-prompt:active {
  transform: scale(0.99);
}

.co-creator-prompt::after {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--blue), #38c7bd);
  opacity: 0.9;
}

.co-creator-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.co-creator-card-hit:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.co-creator-prompt-row {
  position: relative;
  z-index: 2;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  pointer-events: none;
}

.co-creator-prompt-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--blue), #38c7bd);
  color: #fff;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--blue) 22%, transparent);
}

.co-creator-prompt-mark .ui-icon {
  width: 20px;
  height: 20px;
}

.co-creator-prompt-actions {
  display: grid;
  min-width: 44px;
  justify-items: end;
  gap: 10px;
  pointer-events: auto;
}

.co-creator-prompt-actions .research-info-menu {
  top: 0;
  right: calc(100% + 8px);
  pointer-events: none;
}

.co-creator-start-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-width: 64px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  border-radius: 999px;
  background: var(--blue);
  color: white;
  padding: 0 13px;
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--blue) 22%, transparent);
}

.co-creator-start-pill:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.co-creator-status-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  border: 1px solid color-mix(in srgb, #34c759 24%, rgba(235, 235, 245, 0.14));
  border-radius: 999px;
  background: color-mix(in srgb, #34c759 10%, transparent);
  color: #34c759;
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
}

.co-creator-prompt-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.co-creator-progress {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.co-creator-progress-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.co-creator-progress-copy span {
  min-width: 0;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.25;
}

.co-creator-progress-copy small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.2;
  white-space: nowrap;
}

.co-creator-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--separator));
}

.co-creator-progress-track span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #38c7bd);
}

.co-creator-progress.is-compact {
  margin-top: 3px;
}

.co-creator-prompt-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.25;
}

.co-creator-prompt-meta span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid color-mix(in srgb, #38c7bd 20%, rgba(235, 235, 245, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, #38c7bd 7%, transparent);
  padding: 0 8px;
}

.co-creator-progress.is-inline {
  max-width: 360px;
  margin-top: 2px;
}

.research-progress {
  display: block;
  width: fit-content;
  white-space: nowrap;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.research-step-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.research-info-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--separator);
  border-radius: 50%;
  background: var(--fill);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
}

.research-info-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--separator));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.research-info-wrap {
  position: relative;
  display: inline-grid;
}

.co-creator-form-info-wrap {
  align-self: start;
  margin-top: 3px;
}

.co-creator-form-info-btn {
  width: 44px;
  height: 44px;
  font-size: 0.86rem;
}

.research-info-menu {
  display: grid;
  gap: 8px;
  top: calc(100% + 8px);
  right: 0;
  width: min(282px, calc(100vw - 48px));
  min-width: min(220px, calc(100vw - 48px));
  padding: 12px;
  line-height: 1.35;
  overflow: visible;
}

.research-info-menu strong {
  color: var(--text);
  font-size: 0.86rem;
}

.research-info-menu p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.research-info-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.research-info-list li {
  position: relative;
  padding-left: 13px;
}

.research-info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--blue);
}

.research-progress-track {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fill);
}

.research-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.18s ease;
}

.research-survey-card {
  display: grid;
  gap: 0;
  margin-top: 4px;
  padding: 0;
  overflow: hidden;
}

.research-step-card {
  display: grid;
  gap: 14px;
  margin: 10px 0 8px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
}

.research-step-card p {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.38;
}

.research-answer-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.research-answer-grid .answer-btn {
  min-height: 44px;
  border-radius: 12px;
  padding: 0 14px;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.2;
}

.research-answer-grid .answer-btn.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--blue) 28%, transparent);
  transform: scale(0.99);
}

.language-step-card {
  gap: 12px;
}

.language-search-field {
  min-height: 42px;
}

.language-option-list {
  display: grid;
  max-height: 280px;
  gap: 8px;
  overflow: auto;
}

.language-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--fill);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  text-align: left;
}

.language-option-row.active {
  border-color: color-mix(in srgb, var(--blue) 56%, var(--separator));
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}

.language-option-row .ui-icon {
  width: 17px;
  height: 17px;
}

.language-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

.research-question {
  min-height: 0;
  padding: 15px;
  border-color: var(--separator);
}

.research-question p {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.35;
}

.research-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}

.research-actions-auto {
  grid-template-columns: minmax(0, 1fr) auto;
}

.research-skip-btn {
  justify-self: start;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 9px 8px;
  font-size: 0.86rem;
  font-weight: 680;
}

.research-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-height: 44px;
}

.research-step-actions .primary-btn,
.research-step-actions .secondary-btn {
  min-width: 112px;
}

.research-card-complete {
  border-color: var(--separator);
  background: var(--surface);
}

.research-card-complete .research-step-head {
  align-items: start;
}

.research-token-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--separator);
  color: var(--muted);
  font-size: 0.84rem;
}

.research-token-count {
  color: var(--text);
  font-size: 1.28rem;
  line-height: 1;
}

.research-token-row.is-claiming .research-token-count {
  animation: token-pop 2.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.research-claim-btn {
  width: 100%;
  min-height: 44px;
}

@keyframes reward-claim-celebration {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  12%,
  88% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
  }
}

@keyframes reward-claim-sparks {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(1.08);
  }
}

@keyframes reward-claim-icon {
  0% {
    transform: scale(0.86) rotate(-8deg);
  }
  32% {
    transform: scale(1.12) rotate(4deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes reward-claim-amount {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.82);
  }
  24% {
    opacity: 1;
    transform: translateY(-2px) scale(1.16);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-claim-progress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes token-pop {
  0% {
    transform: scale(0.96);
    color: var(--muted);
  }
  45% {
    transform: scale(1.08);
    color: var(--blue);
  }
  100% {
    transform: scale(1);
    color: var(--text);
  }
}

@keyframes reward-receipt-pulse {
  0% {
    box-shadow: 0 0 0 rgba(52, 199, 89, 0);
  }
  36% {
    box-shadow: 0 12px 24px rgba(52, 199, 89, 0.13);
  }
  100% {
    box-shadow: 0 0 0 rgba(52, 199, 89, 0);
  }
}

@keyframes for-you-reward-row {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(10, 132, 255, 0);
  }
  38% {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(10, 132, 255, 0.18);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(10, 132, 255, 0);
  }
}

@keyframes for-you-reward-sheen {
  0% {
    opacity: 0;
    transform: translateX(-42%);
  }
  18% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateX(58%);
  }
}

@keyframes for-you-reward-check {
  0% {
    transform: scale(0.86);
  }
  42% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes for-you-reward-pill {
  0% {
    transform: translateY(2px) scale(0.92);
  }
  45% {
    transform: translateY(-1px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-claim-celebration,
  .reward-claim-celebration::after,
  .reward-claim-icon,
  .reward-claim-amount,
  .reward-claim-progress span,
  .for-you-token-receipt.is-collecting,
  .for-you-completed-row.is-reward-claiming,
  .for-you-completed-row.is-reward-claiming::after,
  .for-you-completed-row.is-reward-claiming .for-you-completed-check,
  .for-you-completed-row.is-reward-claiming .for-you-reward-pill,
  .research-token-row.is-claiming .research-token-count {
    animation: none;
  }
}

@media (max-width: 560px) {
  .institution-row {
    grid-template-columns: 1fr;
  }

  .institution-primary-card {
    grid-template-columns: 1fr;
  }

  .institution-primary-card .primary-btn {
    width: 100%;
  }

  .access-code-row {
    grid-template-columns: 1fr;
  }

  .access-code-row .secondary-btn {
    width: 100%;
  }

  .research-actions {
    grid-template-columns: 1fr;
  }

  .research-step-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .research-prompt-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .research-reward-stack {
    min-width: 98px;
  }

  .co-creator-prompt-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .co-creator-prompt-actions {
    min-width: 44px;
  }

  .co-creator-start-pill {
    min-height: 44px;
    padding: 0 12px;
  }

  .co-creator-progress-copy {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .composer-two-col {
    grid-template-columns: 1fr;
  }

  .composer-context {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .composer-context strong {
    text-align: left;
  }
}

.profile-tile .tile-icon {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--separator));
  background: var(--blue-soft);
  color: var(--blue);
}

.profile-tile .tile-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.auth-screen,
.onboarding-shell {
  background: var(--surface-soft);
}

.auth-panel,
.survey-card,
.form-card {
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
  padding: 18px;
}

.auth-panel .dot-logo {
  transform: scale(0.75);
}

.auth-panel .dot-logo.app-logo-mark {
  width: 78px;
  height: 78px;
  margin-bottom: 24px;
  transform: none;
}

.auth-title {
  font-size: 1.55rem;
  line-height: 1.12;
  letter-spacing: 0;
}

.auth-copy,
.onboarding-copy,
.onboarding-step-header p,
.form-intro p {
  font-size: 0.92rem;
  line-height: 1.36;
}

.onboarding-page h1,
.onboarding-page h2,
.form-intro h2 {
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.form-card label {
  margin-bottom: 8px;
  font-size: 0.95rem;
  line-height: 1.22;
}

.world-summary h2 {
  font-size: 1.12rem;
  line-height: 1.2;
}

.world-summary p {
  font-size: 0.84rem;
  line-height: 1.35;
}

@media (max-width: 420px) {
  .page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .page-header.topbar {
    margin-right: -12px;
    margin-left: -12px;
  }

  .world-grid {
    gap: 10px;
  }

  .world-card {
    min-height: 118px;
    padding: 13px;
  }

  .research-answer-grid.co-creator-answer-grid {
    grid-template-columns: 1fr;
  }

  .feed-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .world-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* EduGather + Apple HIG community refinement */
.community-row-list {
  display: grid;
  gap: 0;
  overflow: visible;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
}

.community-groups {
  display: grid;
  gap: 14px;
}

.community-group {
  display: grid;
  gap: 8px;
}

.community-group-header {
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0 4px;
  text-align: left;
}

.community-group-header strong,
.community-group-header small {
  display: block;
}

.community-group-header strong {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: none;
}

.community-group-header small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
}

.community-group-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--accent);
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.community-group.collapsed .community-group-chevron {
  transform: rotate(0deg);
}

.community-group-chevron .ui-icon {
  width: 17px;
  height: 17px;
}

.community-row-list > .community-empty {
  border: 0;
  border-radius: 0;
}

.community-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  border-radius: 0;
  background: transparent;
}

.community-row:last-child {
  border-bottom: 0;
}

.community-row-main {
  display: grid;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 10px 0 10px 14px;
  text-align: left;
}

.community-glyph,
.community-room-icon {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.community-glyph {
  width: 42px;
  height: 42px;
}

.community-glyph .ui-icon,
.community-room-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.community-row-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.blend-row-main {
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  cursor: pointer;
}

.blend-glyph {
  background: color-mix(in srgb, var(--surface-elevated) 76%, transparent);
  color: transparent;
  position: relative;
}

.blend-glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blend-gradient);
  opacity: 0.08;
}

.blend-glyph .ui-icon {
  position: relative;
  color: var(--accent);
}

.blend-rings,
.blend-circles {
  position: relative;
  display: block;
  width: 42px;
  height: 36px;
  isolation: isolate;
}

.blend-ring,
.blend-circle {
  position: absolute;
  top: 8px;
  left: calc(var(--ring-index, var(--circle-index, 0)) * 7px);
  width: 19px;
  height: 19px;
  z-index: 1;
  border: 1.45px solid color-mix(in srgb, var(--faint) 68%, var(--surface));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-elevated) 28%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--surface) 58%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.08);
  mix-blend-mode: normal;
}

.blend-intersection-core {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 17px;
  width: 7px;
  height: 7px;
  border-radius: 38%;
  background: var(--blend-core-gradient);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surface) 34%, transparent),
    0 1px 4px rgba(0, 0, 0, 0.16);
  opacity: 0.94;
  transform: rotate(45deg);
}

.blend-rings.ring-count-1 .blend-ring:nth-child(1) {
  top: 8px;
  left: 11px;
}

.blend-rings.ring-count-1 .blend-intersection-core {
  top: 15px;
  left: 19px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transform: none;
}

.blend-rings.ring-count-2 .blend-ring:nth-child(1) {
  top: 8px;
  left: 8px;
}

.blend-rings.ring-count-2 .blend-ring:nth-child(2) {
  top: 8px;
  left: 15px;
}

.blend-rings.ring-count-2 .blend-intersection-core {
  top: 12px;
  left: 18px;
  width: 5px;
  height: 11px;
  border-radius: 999px;
  transform: none;
}

.blend-rings.ring-count-3 .blend-ring:nth-child(1) {
  top: 4px;
  left: 12px;
}

.blend-rings.ring-count-3 .blend-ring:nth-child(2) {
  top: 12px;
  left: 7px;
}

.blend-rings.ring-count-3 .blend-ring:nth-child(3) {
  top: 12px;
  left: 17px;
}

.blend-rings.ring-count-3 .blend-intersection-core {
  top: 14px;
  left: 18px;
  width: 7px;
  height: 7px;
}

.blend-rings.ring-count-4 .blend-ring:nth-child(1) {
  top: 5px;
  left: 8px;
}

.blend-rings.ring-count-4 .blend-ring:nth-child(2) {
  top: 5px;
  left: 15px;
}

.blend-rings.ring-count-4 .blend-ring:nth-child(3) {
  top: 12px;
  left: 8px;
}

.blend-rings.ring-count-4 .blend-ring:nth-child(4) {
  top: 12px;
  left: 15px;
}

.blend-rings.ring-count-4 .blend-intersection-core {
  top: 14px;
  left: 18px;
  width: 7px;
  height: 7px;
}

.audience-single-mark {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--audience-color, var(--accent, var(--blue)));
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--audience-color, var(--accent, var(--blue))) 16%, transparent),
    0 1px 5px rgba(0, 0, 0, 0.18);
}

.feed-icon.is-audience-icon,
.home-activity-icon.is-audience-icon {
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
}

.feed-icon.is-audience-icon .blend-rings,
.home-activity-icon.is-audience-icon .blend-rings {
  transform: scale(0.8);
}

.detail-community-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
}

.detail-community-icon .blend-rings {
  transform: scale(0.45);
}

.detail-community-icon .audience-single-mark {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--audience-color, var(--accent, var(--blue))) 18%, transparent);
}

.blend-row-copy {
  gap: 6px;
}

.blend-chip-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.blend-source-chip {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--chip-color) 34%, var(--separator));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-color) 12%, var(--surface));
  color: color-mix(in srgb, var(--chip-color) 82%, var(--text));
  padding: 5px 9px;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.blend-source-chip:hover,
.blend-source-chip:active,
.blend-source-chip:focus-visible {
  border-color: color-mix(in srgb, var(--chip-color) 70%, var(--separator));
  background: color-mix(in srgb, var(--chip-color) 22%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color) 18%, transparent);
  color: color-mix(in srgb, var(--chip-color) 92%, var(--text));
  outline: 0;
}

.blend-source-chip:hover {
  transform: translateY(-1px);
}

.blend-source-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blend-open-button {
  display: grid;
  width: 32px;
  height: 44px;
  place-items: center;
  border: 0;
  background: transparent;
}

.community-row-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-chevron {
  color: var(--faint);
}

.community-chevron .ui-icon {
  width: 18px;
  height: 18px;
}

.community-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}

.row-intent-button,
.favorite-community-btn {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
}

.favorite-community-btn {
  color: var(--muted);
}

.favorite-community-btn.is-active {
  color: var(--accent);
}

.favorite-community-btn.is-active .ui-icon {
  fill: color-mix(in srgb, var(--accent) 26%, transparent);
}

.row-intent-button:active,
.row-intent-button:focus-visible,
.favorite-community-btn:active,
.favorite-community-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
  outline: 0;
}

.row-intent-button .ui-icon {
  width: 20px;
  height: 20px;
}

.community-room {
  display: grid;
  gap: 14px;
  position: relative;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
}

.community-room.has-open-menu {
  z-index: 44;
  overflow: visible;
}

.community-room-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
}

.community-room-head.is-inspect-only {
  grid-template-columns: 48px minmax(0, 1fr);
}

.community-inspect-actions {
  display: grid;
  grid-template-columns: minmax(136px, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.community-inspect-join {
  min-width: 0;
  min-height: 44px;
}

.community-inspect-actions small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.community-room-icon {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.community-room-icon.blend-room-icon {
  align-items: center;
  justify-items: center;
  background: color-mix(in srgb, var(--surface-elevated) 76%, transparent);
}

.community-room-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.room-menu-wrap {
  justify-self: end;
}

.room-menu-wrap .context-menu {
  z-index: 96;
  min-width: min(260px, calc(100vw - 46px));
  max-height: min(58dvh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.community-card-menu-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.community-card-menu-btn:active,
.community-card-menu-btn:focus-visible {
  background: var(--fill);
  outline: 0;
}

.room-blend-chip-list {
  gap: 7px;
}

.room-blend-chip-list .blend-source-chip {
  padding: 6px 10px;
  font-size: 0.86rem;
}

.community-room h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.18;
}

.community-room p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.community-mute-notice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-elevated));
  padding: 10px;
}

.community-mute-notice > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.community-mute-notice .ui-icon {
  width: 18px;
  height: 18px;
}

.community-mute-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.community-mute-notice strong {
  color: var(--text);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--separator);
  border-radius: 13px;
  background: var(--fill);
}

.segmented button {
  display: grid;
  min-height: 48px;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.segmented button.is-active {
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.segmented .ui-icon {
  width: 18px;
  height: 18px;
}

.intent-compose-button {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface-elevated);
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.intent-compose-button > .ui-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
  padding: 10px;
}

.intent-compose-button span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.intent-compose-button strong {
  color: var(--text);
  font-size: 0.92rem;
}

.intent-compose-button small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blend-community-room .intent-compose-button.is-blend-compose {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 54%, rgba(235, 235, 245, 0.14));
  background:
    linear-gradient(135deg, rgba(8, 12, 19, 0.46), rgba(8, 12, 19, 0.62)),
    var(--blend-gradient);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 28px color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent);
}

.blend-community-room .intent-compose-button.is-blend-compose > .ui-icon {
  background:
    linear-gradient(135deg, rgba(8, 12, 19, 0.2), rgba(8, 12, 19, 0.5)),
    var(--blend-gradient);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.blend-community-room .intent-compose-button.is-blend-compose strong,
.blend-community-room .intent-compose-button.is-blend-compose small {
  color: #fff;
}

.blend-community-room .intent-compose-button.is-blend-compose small {
  opacity: 0.78;
}

.community-feed-list {
  margin-top: 0;
}

.sheet-backdrop {
  position: fixed;
  inset: 0 0 calc(74px + env(safe-area-inset-bottom)) 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.24);
}

.action-sheet {
  position: fixed;
  right: max(10px, calc((100vw - 460px) / 2 + 10px));
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: max(10px, calc((100vw - 460px) / 2 + 10px));
  z-index: 21;
  display: grid;
  max-height: min(66dvh, 650px);
  gap: 10px;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 22px;
  background: var(--sheet-bg);
  padding: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.35);
}

.sheet-grabber {
  justify-self: center;
  width: 38px;
  height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--faint) 48%, transparent);
}

.sheet-title {
  display: grid;
  gap: 2px;
  padding: 6px 10px 2px;
  text-align: center;
}

.sheet-title span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.sheet-title strong {
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-action-list {
  overflow: auto;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
}

.sheet-action-list button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
}

.sheet-action-list button:not(:disabled):active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent), transparent),
    rgba(255, 255, 255, 0.045);
  filter: brightness(0.94);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.025);
}

.sheet-action-list button:last-child {
  border-bottom: 0;
}

.sheet-action-list button > .ui-icon:first-child {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
  padding: 8px;
}

.blend-action-sheet {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--separator));
}

.blend-action-sheet .sheet-title strong {
  color: color-mix(in srgb, var(--accent) 76%, var(--text));
}

.blend-action-sheet .sheet-action-list button > .ui-icon:first-child {
  background: var(--blend-gradient);
  color: #fff;
}

.blend-action-sheet .sheet-action-list button:hover,
.blend-action-sheet .sheet-action-list button:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: 0;
}

.sheet-action-list button > .ui-icon:last-child {
  width: 16px;
  height: 16px;
  color: var(--faint);
}

.sheet-action-list span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sheet-action-list strong {
  color: var(--text);
  font-size: 0.93rem;
  line-height: 1.18;
}

.sheet-action-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-cancel {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--blue);
  font-size: 1rem;
  font-weight: 760;
}

.filter-action-sheet {
  position: fixed;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  z-index: 141;
  gap: 10px;
  max-height: min(72dvh, 620px);
  padding: 10px 12px 12px;
}

.filter-sheet-backdrop {
  z-index: 140;
}

.filter-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(235, 235, 245, 0.72);
}

.filter-sheet-close .ui-icon {
  width: 17px;
  height: 17px;
}

.filter-sheet-body {
  display: grid;
  min-height: 0;
  gap: 13px;
  overflow-y: auto;
  padding: 2px 0 12px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.filter-sheet-body::-webkit-scrollbar {
  display: none;
}

.filter-sheet-group {
  display: grid;
  gap: 7px;
}

.filter-sheet-group h3 {
  margin: 0;
  padding: 0 8px;
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

.filter-sheet-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(235, 235, 245, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.filter-sheet-options button {
  display: grid;
  min-height: 43px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 1px solid rgba(235, 235, 245, 0.08);
  border-radius: 0;
  background: transparent;
  color: rgba(245, 245, 247, 0.9);
  padding: 0 14px;
  text-align: left;
}

.filter-sheet-options button:last-child {
  border-bottom: 0;
}

.filter-sheet-options button.is-active {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  font-weight: 800;
}

.filter-sheet-options button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-sheet-options button .ui-icon {
  width: 16px;
  height: 16px;
}

.filter-sheet-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  position: relative;
  z-index: 2;
  padding-top: 2px;
  background: transparent;
}

.filter-sheet-footer .secondary-btn,
.filter-sheet-footer .primary-btn {
  min-height: 48px;
  border-radius: 16px;
}

.trust-help-sheet {
  z-index: 131;
  gap: 10px;
}

.trust-help-backdrop {
  z-index: 130;
}

.trust-help-title {
  padding-bottom: 0;
}

.trust-help-action-list button > .ui-icon:first-child {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.trust-help-action-list button {
  min-height: 64px;
}

.trust-help-action-list small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.trust-help-copy {
  display: grid;
  gap: 10px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  padding: 14px;
}

.trust-help-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 690;
  line-height: 1.42;
}

.trust-help-copy strong {
  color: var(--text);
}

.trust-help-copy a {
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 780;
  text-decoration: none;
}

.form-card > template {
  display: none;
}

.composer-card {
  display: grid;
  gap: 14px;
}

.composer-card-compact {
  gap: 12px;
}

.composer-card label {
  display: grid;
  gap: 8px;
  margin: 0;
}

.composer-card label > span {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.22;
}

.composer-card .text-field,
.composer-card textarea {
  margin-bottom: 0;
}

.composer-card textarea {
  min-height: 118px;
}

.composer-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--fill);
  padding: 8px 10px;
}

.composer-context span {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 820;
}

.composer-context strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 760;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-context-subtle {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.composer-context-subtle span {
  color: var(--muted);
  font-size: 0.76rem;
}

.composer-context-subtle strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.composer-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.composer-card .composer-field-group {
  display: grid;
  gap: 8px;
  margin: 0;
}

.composer-card .composer-field-group > span {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 760;
}

.composer-help-text {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.composer-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.composer-choice-btn {
  min-height: 34px;
  border: 1px solid var(--separator);
  border-radius: 11px;
  background: var(--fill);
  color: var(--muted);
  padding: 0 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 740;
}

.composer-choice-btn:hover,
.composer-choice-btn:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
  color: var(--text);
  outline: 0;
}

.composer-choice-btn.is-active {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--separator));
  background: var(--blue-soft);
  color: var(--blue);
}

.game-composer-context .composer-choice-btn {
  white-space: nowrap;
}

.composer-date-picker-wrap {
  margin-top: 2px;
}

.composer-date-picker-wrap[hidden] {
  display: none;
}

.composer-time-field {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

.event-checkin-config {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  padding: 12px;
}

.event-checkin-config.is-disabled {
  opacity: 0.72;
}

.event-checkin-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.event-checkin-config-head > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.event-checkin-config-head strong {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 780;
}

.event-checkin-config-head small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}

.event-checkin-info-wrap {
  flex: 0 0 auto;
}

.event-checkin-preset-row {
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 1px;
}

.event-checkin-preset {
  min-width: 50px;
}

.event-checkin-preset.is-active {
  border-color: rgba(10, 132, 255, 0.72);
  background: rgba(10, 132, 255, 0.22);
  color: #58a6ff;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.32);
}

.create-event-bring {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(235, 235, 245, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.74);
  padding: 10px;
}

.create-event-bring-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.create-event-bring-icon,
.create-event-bring-chevron {
  display: inline-grid;
  place-items: center;
  color: #58a6ff;
}

.create-event-bring-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.14);
}

.create-event-bring-icon .ui-icon,
.create-event-bring-chevron .ui-icon {
  width: 18px;
  height: 18px;
}

.create-event-bring-head strong,
.create-event-bring-head small {
  display: block;
}

.create-event-bring-head strong {
  color: rgba(250, 251, 255, 0.94);
  font-size: 0.88rem;
  font-weight: 780;
}

.create-event-bring-head small {
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.32;
}

.create-event-bring-body {
  display: grid;
  gap: 10px;
}

.create-event-bring-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.create-event-bring-row .text-field {
  min-height: 42px;
}

.create-event-bring-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-event-bring-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(10, 132, 255, 0.34);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.14);
  color: rgba(245, 247, 255, 0.92);
  padding: 4px 5px 4px 10px;
  font-size: 0.82rem;
  font-weight: 740;
}

.create-event-bring-chip button {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(235, 235, 245, 0.12);
  color: rgba(245, 247, 255, 0.82);
  padding: 0;
}

.create-event-bring-chip .ui-icon {
  width: 14px;
  height: 14px;
}

.create-event-bring-empty {
  margin: 0;
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}

.composer-time-field input:disabled {
  opacity: 0.58;
}

.composer-compact-field {
  gap: 7px;
}

.composer-compact-input {
  min-height: 42px;
}

.composer-guidance {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--separator);
  padding-top: 10px;
}

.composer-guidance span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.composer-guidance span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 8px 2px 1px;
  border-radius: 50%;
  background: var(--blue);
}

.composer-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin: -1px 0 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.composer-check-row input {
  flex: 0 0 auto;
}

.composer-submit-btn {
  margin-top: 2px;
}

.detail-event-meta {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--separator));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  padding: 8px 10px;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.25;
}

.detail-event-meta .ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

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

.profile-item {
  min-height: 72px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 12px;
  border: 1px solid var(--separator);
  border-radius: var(--group-radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.profile-item:hover,
.profile-item:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--separator));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  outline: 0;
}

.profile-item:active {
  transform: scale(0.995);
  background: var(--fill);
}

.profile-tag {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-elevated));
  color: color-mix(in srgb, var(--blue) 70%, var(--muted));
  font-size: 1rem;
  font-weight: 760;
}

.profile-tag .ui-icon {
  width: 18px;
  height: 18px;
}

.profile-item-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.profile-item-title {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.22;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.profile-item-sub {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-item-chevron {
  display: grid;
  place-items: center;
  color: var(--faint);
}

.profile-item-chevron .ui-icon {
  width: 17px;
  height: 17px;
}

.profile-settings-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.profile-section-label {
  margin: 22px 4px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.01em;
}

.profile-setting-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(18px, auto);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  padding: 11px 14px;
  text-align: left;
  animation: profile-card-in 280ms ease both;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.profile-setting-row:focus-visible,
.profile-setting-row:hover {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--separator));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  outline: 0;
}

.profile-setting-row:active {
  transform: scale(0.995);
}

.blocked-person-row .profile-setting-copy {
  min-width: 0;
}

.blocked-person-row .secondary-btn {
  flex: 0 0 auto;
  width: auto;
}

.profile-setting-icon,
.notification-settings-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.profile-setting-icon .ui-icon,
.notification-settings-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.profile-setting-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-setting-copy strong {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.18;
}

.profile-setting-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.25;
}

.profile-setting-chevron {
  display: grid;
  place-items: center;
  color: var(--faint);
}

.profile-setting-meta {
  display: inline-flex;
  min-width: 78px;
  max-width: 112px;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.15;
  text-align: right;
}

.profile-setting-row.has-attention {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}

.profile-signout-row .profile-setting-icon {
  background: color-mix(in srgb, var(--faint) 12%, var(--surface-elevated));
  color: var(--muted);
}

.profile-setting-meta.is-attention {
  color: var(--blue);
}

.profile-setting-meta.is-attention::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blue);
}

.profile-setting-chevron .ui-icon {
  width: 17px;
  height: 17px;
}

.notification-inbox-page {
  padding-bottom: 110px;
}

.notification-inbox-controls {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.notification-inbox-settings-row {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.notification-inbox-settings-row:focus-visible,
.notification-inbox-settings-row:hover {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--separator));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  outline: 0;
}

.notification-inbox-settings-row:active {
  transform: scale(0.995);
}

.notification-inbox-mark,
.notification-inbox-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.notification-inbox-mark .ui-icon,
.notification-inbox-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.notification-inbox-settings-row > span:nth-child(2),
.notification-inbox-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.notification-inbox-topline {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.notification-inbox-topmeta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.notification-inbox-settings-row strong,
.notification-inbox-copy strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.18;
}

.notification-inbox-settings-row small,
.notification-inbox-copy small,
.notification-inbox-copy em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 690;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.notification-inbox-copy em {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 760;
}

.notification-inbox-time,
.notification-inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.notification-inbox-time {
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 760;
}

.notification-inbox-badge {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 820;
}

.notification-inbox-body {
  margin-top: 1px;
}

.blend-invitation-row {
  cursor: default;
}

.blend-invitation-row.is-saving {
  opacity: 0.72;
}

.notification-inbox-actions {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  justify-content: start;
  gap: 8px;
  margin-top: 10px;
}

.notification-inbox-actions button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.notification-inbox-actions button:first-child {
  border-color: transparent;
  background: var(--blue, #0a84ff);
  color: white;
}

.notification-inbox-actions .notification-inbox-decline {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 36px;
  border-color: transparent;
  background: transparent;
  color: var(--faint);
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 720;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--faint) 42%, transparent);
  text-underline-offset: 3px;
}

.notification-inbox-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.notification-mark-read-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--blue);
  justify-content: center;
  font-weight: 820;
}

.notification-mark-read-btn:disabled {
  opacity: 0.55;
}

.notification-inbox-list {
  display: grid;
  gap: 10px;
}

.notification-inbox-secondary {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.notification-inbox-row {
  display: grid;
  width: 100%;
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--separator) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.notification-inbox-row:focus-visible,
.notification-inbox-row:hover {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--separator));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  outline: 0;
}

.notification-inbox-row:active {
  transform: scale(0.995);
}

.notification-inbox-row.is-unread {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--separator));
}

.notification-inbox-empty {
  display: grid;
  min-height: 172px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: var(--group-radius);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  padding: 24px;
  text-align: center;
}

.notification-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
}

.notification-empty-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.notification-inbox-empty strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.notification-inbox-empty span:last-child {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.notification-settings-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.notification-settings-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.notification-settings-head strong,
.notification-pref-copy strong {
  display: block;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.2;
}

.account-privacy-card,
.account-delete-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.account-privacy-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.account-privacy-head strong,
.account-delete-copy strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.18;
}

.account-privacy-head small,
.account-privacy-card p,
.account-delete-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.account-privacy-links {
  margin-top: 12px;
}

a.profile-setting-row {
  text-decoration: none;
}

.account-delete-card {
  margin-top: 18px;
  border-color: color-mix(in srgb, var(--destructive) 28%, var(--separator));
  background: color-mix(in srgb, var(--surface) 90%, var(--destructive) 10%);
}

.account-delete-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--destructive) 14%, transparent);
  color: var(--destructive);
}

.account-delete-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.account-delete-btn {
  color: var(--destructive);
}

.account-delete-dialog {
  display: grid;
  gap: 12px;
}

.account-delete-dialog .field {
  margin-bottom: 0;
}

.notification-settings-head small,
.notification-pref-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.notification-settings-list {
  display: grid;
  border: 1px solid var(--separator);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.notification-pref-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
  transition: background 140ms ease;
}

.notification-pref-row:last-child {
  border-bottom: 0;
}

.notification-pref-row:focus-visible,
.notification-pref-row:hover {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  outline: 0;
}

.notification-pref-row.is-saving {
  cursor: default;
  opacity: 0.68;
}

.notification-switch {
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--faint) 44%, var(--fill));
  flex: 0 0 auto;
  transition: background 160ms ease;
}

.notification-switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease;
}

.notification-switch.is-on {
  background: var(--blue);
}

.notification-switch.is-on::after {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  .profile-setting-row,
  .notification-pref-row,
  .notification-switch,
  .notification-switch::after {
    animation: none;
    transition: none;
  }
}

/* Apple-aligned post detail */
.detail-post-card {
  display: grid;
  min-width: 0;
  gap: 15px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 18px;
  background: var(--surface);
  padding: 16px;
  box-shadow: none;
}

.detail-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.detail-community-chip {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  justify-self: start;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(235, 235, 245, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--accent) 82%, #fff);
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.1;
  cursor: pointer;
  overflow: hidden;
}

.detail-community-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-community-chip .detail-community-icon {
  min-width: 24px;
  overflow: visible;
}

.detail-community-chip .ui-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.76;
}

.detail-community-chip:hover,
.detail-community-chip:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, rgba(235, 235, 245, 0.2));
  background: color-mix(in srgb, var(--accent) 15%, rgba(255, 255, 255, 0.06));
  outline: 0;
}

.detail-menu-wrap {
  width: 36px;
  flex: 0 0 auto;
  justify-self: end;
}

.detail-actions-wrap {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
}

.detail-more-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--faint);
}

.save-post-btn {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.save-post-btn .ui-icon {
  width: 17px;
  height: 17px;
}

.detail-more-btn:hover,
.detail-more-btn:focus-visible,
.save-post-btn:hover,
.save-post-btn:focus-visible {
  background: var(--fill);
  color: var(--text);
  outline: 0;
}

.save-post-btn.is-saved {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}

.save-post-btn.is-saved .ui-icon {
  fill: color-mix(in srgb, var(--blue) 22%, transparent);
}

.save-post-btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.detail-context-menu {
  min-width: 176px;
}

.detail-context-menu button:disabled {
  color: var(--faint);
  opacity: 0.55;
}

.detail-post-card h2 {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text);
  font-size: clamp(1.45rem, 4vw, 1.75rem);
  font-weight: 780;
  line-height: 1.14;
  letter-spacing: 0;
  white-space: normal;
}

.detail-author-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.detail-author-avatar,
.comment-composer-avatar,
.event-chat-avatar,
.event-chat-composer-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--fill);
  color: var(--muted);
}

.detail-author-avatar .ui-icon,
.comment-composer-avatar .ui-icon,
.event-chat-avatar .ui-icon,
.event-chat-composer-avatar .ui-icon {
  width: 18px;
  height: 18px;
}

.detail-author-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.detail-author-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-author-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 620;
}

.detail-message-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--separator));
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  padding: 0 11px;
  font-size: 0.82rem;
  font-weight: 760;
}

.detail-message-link .ui-icon {
  width: 16px;
  height: 16px;
}

.detail-message-link:disabled {
  border-color: var(--separator);
  color: var(--faint);
  opacity: 0.56;
}

.detail-completed-note {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, #34c759 26%, var(--separator));
  border-radius: 12px;
  background: color-mix(in srgb, #34c759 10%, transparent);
  color: color-mix(in srgb, #34c759 82%, var(--text));
  padding: 7px 10px;
  font-size: 0.8rem;
  font-weight: 760;
}

.detail-completed-note .ui-icon {
  width: 15px;
  height: 15px;
}

.detail-info-grid {
  display: grid;
  gap: 8px;
}

.detail-info-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  padding: 10px 11px;
}

.detail-info-item .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--blue);
  justify-self: center;
}

.detail-info-item span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.detail-info-item small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.detail-info-item strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-body {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.detail-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.detail-action-row .detail-signal-btn,
.detail-action-row .detail-message-link {
  flex: 1 1 132px;
  min-width: 0;
}

.detail-signal-group,
.detail-useful-note-row {
  display: grid;
  gap: 7px;
}

.detail-useful-note {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.event-rsvp-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  padding: 12px;
}

.event-rsvp-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.event-rsvp-head > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.event-rsvp-head small,
.event-rsvp-card p,
.event-rsvp-user-list small {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.event-rsvp-head strong {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 820;
}

.event-rsvp-btn {
  flex: 0 0 auto;
  min-height: 38px;
  width: auto;
  min-width: 112px;
  padding: 0 14px;
}

.event-rsvp-host-note {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 730;
}

.event-rsvp-host-lists {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.event-rsvp-user-list {
  display: grid;
  gap: 6px;
}

.event-rsvp-user-list > strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 780;
}

.event-rsvp-user-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-rsvp-user,
.event-rsvp-empty {
  border: 1px solid color-mix(in srgb, var(--separator) 70%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  padding: 6px 8px;
  font-size: 0.78rem;
  font-weight: 720;
}

.event-rsvp-empty {
  color: var(--muted);
}

.event-checkin-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  padding: 12px;
}

.event-tools-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-elevated) 48%, transparent);
  padding: 10px;
}

.event-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.event-tools-head span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.event-tools-head small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.event-tools-head strong {
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 820;
}

.event-tools-list {
  display: grid;
  gap: 8px;
}

.event-tools-list .event-bring-card,
.event-tools-list .event-chat-card {
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  padding: 10px;
}

.event-checkin-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.event-checkin-head > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.event-checkin-head small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.event-checkin-head strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 820;
}

.event-checkin-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.event-checkin-action {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  padding: 0 14px;
  font-size: 0.78rem;
  font-weight: 780;
  white-space: nowrap;
}

.event-checkin-action:disabled {
  background: var(--fill);
  color: var(--faint);
  cursor: default;
}

.event-checkin-action.is-secondary {
  border: 1px solid color-mix(in srgb, var(--separator) 88%, transparent);
  background: color-mix(in srgb, var(--fill) 84%, transparent);
  color: var(--text);
}

.event-checkin-prompt-card {
  gap: 14px;
}

.event-checkin-prompt-mark {
  background: color-mix(in srgb, var(--green) 18%, var(--fill));
  color: var(--green);
}

.event-checkin-prompt-actions {
  margin-top: 0;
}

.event-bring-card {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  padding: 12px;
}

.event-bring-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.event-bring-head > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.event-bring-head small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.event-bring-head strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 820;
}

.event-bring-reminder {
  margin: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--text);
  padding: 9px 10px;
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.35;
}

.event-bring-list {
  display: grid;
  gap: 8px;
}

.event-bring-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--separator) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  padding: 10px;
}

.event-bring-item.is-claimed {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--separator));
}

.event-bring-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.event-bring-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 780;
  text-overflow: ellipsis;
}

.event-bring-copy small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.event-bring-controls {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.event-bring-action,
.event-bring-add-btn {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 780;
}

.event-bring-action:disabled,
.event-bring-add-btn:disabled {
  background: var(--fill);
  color: var(--faint);
  cursor: default;
}

.event-bring-remove {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--muted);
}

.event-bring-remove .ui-icon {
  width: 15px;
  height: 15px;
}

.event-bring-empty,
.event-bring-locked {
  display: grid;
  gap: 5px;
  border: 1px dashed color-mix(in srgb, var(--separator) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  padding: 14px;
}

.event-bring-empty strong {
  color: var(--text);
  font-size: 0.9rem;
}

.event-bring-empty span,
.event-bring-locked span {
  font-size: 0.82rem;
  line-height: 1.35;
}

.event-bring-locked {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
}

.event-bring-locked .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--faint);
}

.event-bring-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 7px;
}

.event-bring-composer input {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
  padding: 0 8px;
}

.event-bring-composer input::placeholder {
  color: var(--muted);
}

.event-bring-composer:focus-within {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
}

.event-chat-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  padding: 12px;
}

.event-chat-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.event-chat-head > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.event-chat-head small,
.event-chat-state {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.event-chat-head strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 820;
}

.event-chat-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.event-chat-host-btn,
.event-chat-open-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  padding: 0 14px;
  font-size: 0.78rem;
  font-weight: 760;
}

.event-chat-host-btn .ui-icon,
.event-chat-open-btn .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--blue);
}

.event-chat-open-btn {
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.event-chat-list {
  display: grid;
  gap: 10px;
  max-height: clamp(168px, 26dvh, 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--separator) 72%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  padding: 8px 6px 8px 8px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.event-chat-list.is-scrollable {
  height: clamp(196px, 26dvh, 260px);
  max-height: none;
  align-content: start;
  padding-top: 14px;
  padding-bottom: 18px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
}

.event-chat-preview-list {
  max-height: none;
  overflow: visible;
  border-style: solid;
  padding: 8px;
}

.event-chat-more-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--separator) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  color: var(--text);
  padding: 10px;
  text-align: left;
}

.event-chat-more-row > span {
  display: inline-grid;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-elevated));
  color: var(--blue);
}

.event-chat-more-row .ui-icon {
  width: 16px;
  height: 16px;
}

.event-chat-more-row strong,
.event-chat-more-row small {
  grid-column: 2;
  min-width: 0;
}

.event-chat-more-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 790;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-chat-more-row small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
}

.event-chat-more-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 72%, #fff);
  outline-offset: 3px;
}

.event-chat-thread {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.event-chat-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.event-chat-page.has-docked-composer {
  padding-bottom: 14px;
}

.event-chat-page .event-chat-thread {
  min-height: 0;
  height: 100%;
}

.event-chat-thread-list {
  max-height: none;
  min-height: 0;
  height: 100%;
  align-content: end;
  border-color: transparent;
  background: transparent;
  padding: 2px 0 18px;
}

.event-chat-thread-list.is-scrollable {
  height: 100%;
  max-height: none;
  padding-top: 2px;
  padding-bottom: 18px;
  -webkit-mask-image: none;
  mask-image: none;
}

.event-chat-list::-webkit-scrollbar {
  width: 6px;
}

.event-chat-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 42%, var(--separator));
}

.event-chat-list:focus-visible {
  border-radius: 14px;
  outline: 2px solid color-mix(in srgb, var(--blue) 72%, #fff);
  outline-offset: 3px;
}

.event-chat-message {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.event-chat-avatar,
.event-chat-composer-avatar {
  width: 32px;
  height: 32px;
}

.event-chat-bubble {
  display: grid;
  min-width: 0;
  gap: 5px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 9px 10px;
}

.event-chat-message.mine .event-chat-bubble {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
}

.event-chat-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.event-chat-line strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-chat-line small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.event-chat-bubble p {
  margin: 0;
  color: var(--text);
  font-size: 0.91rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.event-chat-empty,
.event-chat-locked {
  display: grid;
  gap: 5px;
  border: 1px dashed color-mix(in srgb, var(--separator) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  padding: 14px;
}

.event-chat-empty strong {
  color: var(--text);
  font-size: 0.9rem;
}

.event-chat-empty span,
.event-chat-locked span {
  font-size: 0.82rem;
  line-height: 1.35;
}

.event-chat-locked {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
}

.event-chat-locked .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--faint);
}

.event-chat-composer {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 7px;
}

.event-chat-composer input {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
  padding: 0 4px;
}

.event-chat-composer input::placeholder {
  color: var(--muted);
}

.event-chat-send-btn {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.event-chat-send-btn .ui-icon {
  width: 17px;
  height: 17px;
}

.event-chat-send-btn:disabled {
  background: var(--fill);
  color: var(--faint);
  cursor: default;
}

.event-chat-composer:focus-within {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
}

.detail-calendar-btn {
  display: inline-flex;
  min-height: 38px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  color: var(--text);
  padding: 0 13px;
  font-size: 0.84rem;
  font-weight: 760;
}

.detail-calendar-btn .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

.detail-calendar-btn:hover,
.detail-calendar-btn:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--separator));
  outline: 0;
}

.detail-comments {
  gap: 10px;
  margin-top: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 4px;
}

.comments-head {
  padding: 0 2px;
}

.comments-head h2 {
  color: var(--text);
  font-size: 1.04rem;
  font-weight: 780;
}

.comments-head span {
  min-width: 26px;
  height: 26px;
  background: var(--fill);
  font-size: 0.76rem;
}

.comment-list {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  border-radius: 16px;
  background: var(--surface);
}

.comment-row {
  grid-template-columns: 36px minmax(0, 1fr) 32px;
  background: transparent;
  padding: 13px 14px;
  position: relative;
}

.comment-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.comment-author-line {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

.comment-row strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-author-line small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
}

.comment-row p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.45;
}

.comment-delete-btn {
  align-self: start;
  border: 0;
  background: transparent;
  color: var(--faint);
}

.comment-delete-btn:hover,
.comment-delete-btn:focus-visible {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
  outline: 0;
}

.comment-helpful-btn {
  align-self: start;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
}

.comment-list {
  overflow: visible;
}

.comments-empty {
  min-height: 112px;
  padding: 24px 18px;
}

.comment-menu-wrap {
  align-self: start;
  justify-self: end;
  width: 28px;
}

.comment-more-btn {
  position: relative;
  min-width: 28px;
  width: 28px;
  min-height: 28px;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
}

.comment-more-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
}

.comment-more-btn:hover,
.comment-more-btn:focus-visible,
.comment-more-btn.is-active {
  background: transparent;
  color: var(--text);
  outline: 0;
}

.comment-context-menu {
  min-width: 164px;
}

.comment-signal-summary {
  display: inline-flex;
  margin-top: 8px;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 760;
}

.comment-composer {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
  padding: 7px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px) saturate(1.2);
}

.detail-comments > .comment-composer {
  position: static;
  z-index: auto;
  margin-top: 10px;
}

.comment-composer .comment-composer-avatar {
  width: 32px;
  height: 32px;
}

.comment-composer input {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
  padding: 0 4px;
}

.comment-composer input::placeholder {
  color: var(--muted);
}

.comment-send-btn {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.comment-send-btn .ui-icon {
  width: 17px;
  height: 17px;
}

.comment-send-btn:disabled {
  background: var(--fill);
  color: var(--faint);
  cursor: default;
}

.comment-composer:focus-within {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
}

.message-sheet-backdrop {
  background: rgba(0, 0, 0, 0.32);
}

.message-sheet {
  position: fixed;
  right: max(10px, calc((100vw - 460px) / 2 + 10px));
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: max(10px, calc((100vw - 460px) / 2 + 10px));
  z-index: 21;
  display: grid;
  max-height: min(66dvh, 650px);
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 24px;
  background: var(--sheet-bg);
  padding: 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.35);
}

.message-sheet-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 0;
}

.message-recipient-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.message-recipient-avatar .ui-icon {
  width: 20px;
  height: 20px;
}

.message-sheet-head span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.message-sheet-head small,
.message-sheet-context small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.message-sheet-head strong,
.message-sheet-context strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-sheet-close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--muted);
}

.message-sheet-close .ui-icon {
  width: 17px;
  height: 17px;
}

.message-sheet-context {
  display: grid;
  gap: 2px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px 14px;
}

.message-sheet-composer,
.thread .composer,
.app-shell > .composer[data-docked-composer],
.app-shell .composer-dock-layer > .composer[data-docked-composer] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--separator) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
  padding: 7px;
  backdrop-filter: blur(18px) saturate(1.2);
}

.message-sheet-composer input,
.thread .composer .field,
.app-shell > .composer[data-docked-composer] .field,
.app-shell .composer-dock-layer > .composer[data-docked-composer] .field {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
  padding: 0 6px;
  margin-bottom: 0;
}

.message-send-btn,
.chat-send-btn {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.message-send-btn .ui-icon,
.chat-send-btn .ui-icon {
  width: 17px;
  height: 17px;
}

.message-send-btn:disabled,
.chat-send-btn:disabled {
  background: var(--fill);
  color: var(--faint);
  cursor: default;
}

.thread {
  min-height: calc(100dvh - 176px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.chat-thread {
  grid-template-rows: minmax(0, 1fr) auto;
}

.thread-context {
  margin: 0;
}

.message-stack {
  align-content: end;
  overflow-y: auto;
  padding: 2px 0 6px;
}

.message-stack:focus-visible {
  border-radius: 16px;
  outline: 2px solid color-mix(in srgb, var(--blue) 72%, #fff);
  outline-offset: 4px;
}

.thread-source-note {
  justify-self: center;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: min(100%, 360px);
  border: 1px solid color-mix(in srgb, var(--separator) 74%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
}

button.thread-source-note {
  cursor: pointer;
  font: inherit;
}

.thread-source-note.is-actionable:hover,
.thread-source-note.is-actionable:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--separator));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  outline: 0;
}

.thread-source-note.is-actionable:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

.thread-source-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  color: var(--blue);
}

.thread-source-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.thread-source-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.thread-source-copy small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 740;
}

.thread-source-copy strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
  font-size: 0.84rem;
  font-weight: 740;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message {
  display: grid;
  max-width: min(520px, 78%);
  gap: 3px;
  border: 1px solid var(--separator);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 13px;
}

.message span {
  overflow-wrap: anywhere;
}

.message small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.message.mine,
.message.me {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--blue) 54%, transparent);
  background: var(--blue);
  color: #fff;
}

.message.mine small,
.message.me small {
  color: rgba(255, 255, 255, 0.72);
}

.message.pending {
  opacity: 0.72;
}

.message.failed {
  border-color: color-mix(in srgb, var(--destructive) 38%, var(--separator));
  background: color-mix(in srgb, var(--destructive) 8%, var(--surface));
  color: var(--text);
}

.message-retry {
  justify-self: start;
  width: auto;
  min-height: 28px;
  margin-top: 3px;
  border: 1px solid color-mix(in srgb, var(--destructive) 32%, var(--separator));
  border-radius: 999px;
  background: transparent;
  color: var(--destructive);
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 760;
}

.suggest-footer {
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  color: var(--text);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.suggest-footer.disabled {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  opacity: 0.8;
}

.suggest-footer.disabled .suggest-footer-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.suggest-footer.disabled .suggest-footer-copy strong {
  color: var(--muted);
}

.suggest-footer-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 17%, rgba(255, 255, 255, 0.08));
  color: color-mix(in srgb, var(--blue) 88%, #ffffff);
}

.suggest-footer-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.suggest-footer-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.suggest-footer-copy strong,
.suggest-footer-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest-footer-copy strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 780;
  line-height: 1.15;
}

.suggest-footer-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 560;
  line-height: 1.2;
}

.suggest-footer-chevron {
  width: 18px;
  height: 18px;
  color: rgba(235, 235, 245, 0.6);
  justify-self: end;
}

.suggest-footer-chevron .ui-icon {
  width: 18px;
  height: 18px;
}

.suggest-footer:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--blue) 55%, rgba(235, 235, 245, 0.18));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.locked-picker + .suggest-footer {
  margin-top: 8px;
  margin-bottom: 22px;
}

.course-search-card {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
}

.course-search-head,
.course-result-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.course-search-head {
  grid-template-columns: 38px minmax(0, 1fr);
}

.course-result-row > span:nth-child(2),
.course-programme-course-row > span:nth-child(2) {
  min-width: 0;
}

.course-search-head strong,
.course-result-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}

.course-result-row strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.action-sheet[data-sheet-dragging="true"] {
  transition: none !important;
  user-select: none;
}

.action-sheet > .sheet-grabber {
  touch-action: none;
}

.action-sheet > .sheet-grabber {
  position: relative;
  z-index: 1;
  overscroll-behavior: contain;
}

.action-sheet > .sheet-grabber::before {
  position: absolute;
  inset: -12px -16px;
  content: "";
  pointer-events: auto;
}

.academics-assist-body,
.community-import-sheet {
  overscroll-behavior-y: contain;
}

@media (prefers-reduced-motion: reduce) {
  .action-sheet {
    transition-duration: 0.01ms !important;
  }
}

.course-programme-row {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
}

.course-programme-row > span:nth-child(2) {
  grid-column: 2;
}

.course-programme-row .course-result-mark,
.course-programme-row .course-result-action {
  margin-top: 4px;
}

.course-programme-row .course-result-mark {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.course-programme-row .course-result-action {
  grid-column: 2;
  justify-self: start;
}

.course-programme-row strong,
.course-programme-row small {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow-wrap: anywhere;
}

.course-search-head strong {
  white-space: nowrap;
}

.course-search-head small,
.course-result-row small,
.course-search-note,
.course-result-empty span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.course-search-icon,
.course-result-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.course-search-icon .ui-icon,
.course-result-mark .ui-icon {
  width: 18px;
  height: 18px;
}

.course-search-input {
  border-radius: 12px;
}

.course-programme-panel {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--separator));
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  padding: 12px;
}

.course-programme-intro,
.course-programme-suggestions-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.course-programme-intro strong,
.course-programme-suggestions-head strong {
  display: block;
  color: var(--text);
  font-size: 0.88rem;
}

.course-programme-intro small,
.course-programme-suggestions-head small,
.course-programme-privacy {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.course-programme-input {
  border-radius: 12px;
}

.course-search-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
  text-transform: uppercase;
}

.course-search-divider::before,
.course-search-divider::after {
  content: "";
  min-width: 0;
  height: 1px;
  flex: 1;
  background: var(--separator);
}

.course-programme-results,
.course-programme-suggestions {
  display: grid;
  gap: 10px;
}

.course-programme-row.is-selected {
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.course-programme-row.is-pending {
  opacity: 0.68;
}

.course-programme-row.is-pending .course-result-action {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
}

.course-programme-pending {
  display: grid;
  gap: 8px;
}

.course-programme-pending.is-compact {
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--separator) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fill) 52%, transparent);
}

.course-programme-pending-more {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.course-programme-suggestions {
  border: 1px solid var(--separator);
  border-radius: 13px;
  background: color-mix(in srgb, var(--fill) 74%, transparent);
  padding: 10px;
}

.course-programme-suggestions-head em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 780;
  white-space: nowrap;
}

.course-programme-filter-row {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.course-programme-filter-row::-webkit-scrollbar {
  display: none;
}

.course-programme-filter {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.1;
  padding: 6px 10px;
  white-space: nowrap;
}

.course-programme-filter small {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fill) 82%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 820;
}

.course-programme-filter.is-active {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--separator));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--text);
}

.course-programme-filter.is-active small {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
}

.course-programme-filter-summary {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.course-programme-tool-section {
  display: grid;
  gap: 8px;
}

.course-programme-tool-section .course-programme-privacy {
  margin: 0;
}

.course-programme-tool-section .course-programme-privacy strong {
  color: var(--text);
  font-size: 0.78rem;
}

.course-programme-checklist {
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 12px;
}

.course-programme-course-row {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: transparent;
  color: var(--text);
  padding: 10px;
  text-align: left;
}

.course-programme-course-row:last-child {
  border-bottom: 0;
}

.course-programme-course-row strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--text);
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}

.course-programme-course-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.course-programme-course-row.is-selected {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.course-programme-course-row.is-joined {
  opacity: 0.78;
}

.course-programme-check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--separator);
  border-radius: 50%;
  color: var(--blue);
}

.course-programme-course-row.is-selected .course-programme-check,
.course-programme-course-row.is-joined .course-programme-check {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--separator));
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}

.course-programme-check .ui-icon {
  width: 14px;
  height: 14px;
}

.course-programme-add-btn {
  width: 100%;
  min-height: 42px;
}

.course-result-list {
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 12px;
}

.course-catalog-results {
  display: grid;
  gap: 12px;
}

.course-catalog-head,
.course-result-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.course-catalog-head span,
.course-result-section-head {
  min-width: 0;
}

.course-catalog-head strong,
.course-result-section-head strong {
  display: block;
  color: var(--text);
  font-size: 0.84rem;
}

.course-catalog-head small,
.course-result-section-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.course-catalog-head em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.course-result-section {
  display: grid;
  gap: 8px;
}

.course-result-row {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: var(--surface);
  padding: 10px 12px;
  text-align: left;
}

.course-result-row:last-child {
  border-bottom: 0;
}

.course-request-row {
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}

.course-result-action {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 780;
}

.course-result-row.is-joined .course-result-action {
  background: color-mix(in srgb, var(--destructive) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 36%, var(--separator));
  color: var(--destructive);
}

.course-result-empty {
  display: grid;
  gap: 10px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--fill);
  padding: 12px;
}

.course-result-empty strong {
  color: var(--text);
}

.catalog-loading-empty {
  gap: 12px;
}

.catalog-loading-empty .catalog-loading-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 0;
}

.catalog-loading-empty .catalog-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid color-mix(in srgb, var(--blue) 16%, var(--separator));
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: catalog-spinner-rotate 760ms linear infinite;
}

.catalog-loading-empty .catalog-skeleton-list {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.catalog-loading-empty .catalog-skeleton-row {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.catalog-loading-empty .catalog-skeleton-row span {
  display: block;
  height: 9px;
  margin-top: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--muted) 12%, transparent),
    color-mix(in srgb, var(--muted) 22%, transparent),
    color-mix(in srgb, var(--muted) 12%, transparent)
  );
  background-size: 220% 100%;
  animation: catalog-skeleton-shimmer 1150ms ease-in-out infinite;
}

.catalog-loading-empty .catalog-skeleton-row span:first-child {
  width: min(70%, 220px);
}

.catalog-loading-empty .catalog-skeleton-row span:last-child {
  width: min(48%, 170px);
}

@keyframes catalog-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes catalog-skeleton-shimmer {
  0% {
    background-position: 140% 0;
  }

  100% {
    background-position: -80% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-spinner,
  .pull-refresh-status,
  .pull-refresh-status.is-refreshing .pull-refresh-spinner,
  .catalog-loading-empty .catalog-skeleton-row span {
    transition: none;
    animation: none;
  }
}

.course-fallback-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-fallback-actions .secondary-btn,
.course-fallback-actions .primary-btn {
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  font-size: 0.8rem;
  white-space: normal;
}

.course-suggest-card {
  gap: 12px;
}

.course-suggest-dynamic {
  display: grid;
  gap: 12px;
}

.course-suggest-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.course-suggest-label small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.course-suggest-note,
.course-suggest-feedback {
  margin: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--muted);
  padding: 10px;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
}

.course-suggest-feedback {
  background: var(--fill);
  color: var(--text);
}

.course-suggest-feedback.is-match {
  background: color-mix(in srgb, #34c759 13%, var(--surface));
  color: var(--text);
}

.course-suggest-feedback.is-review {
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.course-suggest-decision {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--fill));
  padding: 10px;
}

.course-suggest-decision.is-match {
  border-color: color-mix(in srgb, #34c759 38%, var(--separator));
  background: color-mix(in srgb, #34c759 12%, var(--surface));
}

.course-suggest-decision.is-review {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--separator));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.course-suggest-decision-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
}

.course-suggest-decision.is-match .course-suggest-decision-icon {
  color: white;
  background: #34c759;
}

.course-suggest-decision-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.course-suggest-decision strong,
.course-suggest-decision small {
  display: block;
}

.course-suggest-decision strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.course-suggest-decision small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}

.course-suggest-match {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px 12px;
  text-align: left;
}

.course-suggest-match strong,
.course-suggest-match small {
  display: block;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.course-suggest-match strong {
  color: var(--text);
}

.course-suggest-match small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.course-suggest-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
}

.course-suggest-actions .secondary-btn,
.course-suggest-actions .primary-btn {
  width: 100%;
}

.course-suggest-actions .secondary-btn:disabled,
.course-suggest-actions .primary-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

@media (max-width: 520px) {
  .course-checklist-actions .secondary-btn,
  .course-checklist-actions .primary-btn {
    width: 100%;
    white-space: normal;
  }

  .course-fallback-actions {
    grid-template-columns: 1fr;
  }

  .course-suggest-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .course-checklist-actions {
    grid-template-columns: 1fr;
  }
}

.chat-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 72px;
  padding: 12px 10px;
}

.chat-search-card {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.chat-search-field {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--separator);
  border-radius: var(--control-radius, 12px);
  background: color-mix(in srgb, var(--fill) 86%, var(--surface));
  color: var(--muted);
  padding: 0 0 0 12px;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.chat-search-field .chat-search-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--muted);
}

.chat-search-field .chat-search-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.chat-search-field .search-field {
  width: 100%;
  height: 44px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  outline: 0;
  padding: 0;
  appearance: none;
}

.chat-search-field .clear-search-btn {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-self: stretch;
  transform: none;
}

.chat-search-field .clear-search-btn::before,
.chat-search-field .clear-search-btn::after {
  left: 16px;
  right: 16px;
  top: 21px;
}

.chat-search-field:focus-within {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--separator));
  background: color-mix(in srgb, var(--fill) 70%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

.chat-empty-state {
  min-height: 210px;
}

.chat-empty-actions {
  width: min(220px, 100%);
}

.chat-empty-actions .primary-btn {
  width: 100%;
}

.chat-segmented {
  margin: 0 0 14px;
}

.chat-segmented button {
  min-height: 44px;
  gap: 1px;
}

.chat-segmented button small {
  color: inherit;
  font-size: 0.68rem;
  font-weight: 820;
  opacity: 0.72;
}

.chat-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chat-name {
  margin: 0;
}

.chat-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-context-line {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-chat-avatar {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface-elevated));
  color: var(--blue);
}

.event-chat-avatar .ui-icon {
  width: 20px;
  height: 20px;
}

.chat-meta {
  align-self: stretch;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 7px;
  min-width: 58px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.hidden-chat-row {
  border-style: dashed;
}

.hidden-chat-meta {
  align-content: center;
  min-width: 92px;
}

.hidden-chat-action {
  width: auto;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
}

@media (max-width: 420px) {
  .hidden-chat-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .hidden-chat-meta {
    grid-column: 2;
    justify-items: start;
    min-width: 0;
  }
}

.chat-list h2 {
  margin: 2px 2px 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.support-chat-list {
  border-color: transparent;
  background: transparent;
}

.support-avatar,
.support-prompt-icon {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 15%, var(--surface-elevated));
  color: var(--blue);
}

.support-chat-row {
  position: relative;
  overflow: hidden;
  border-color: rgba(90, 200, 250, 0.15);
  background:
    radial-gradient(circle at 14% 24%, rgba(90, 200, 250, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
    rgba(18, 22, 32, 0.82);
}

.support-chat-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(90, 200, 250, 0.88), rgba(10, 132, 255, 0.38));
  box-shadow: 0 0 18px rgba(90, 200, 250, 0.16);
  opacity: 0.76;
}

.support-chat-row.is-resolved::before {
  background: linear-gradient(180deg, rgba(48, 209, 88, 0.78), rgba(90, 200, 250, 0.34));
}

.support-chat-row .support-avatar {
  border: 1px solid rgba(90, 200, 250, 0.22);
  background:
    radial-gradient(circle at 34% 24%, rgba(90, 200, 250, 0.24), transparent 44%),
    rgba(255, 255, 255, 0.052);
  color: #b9d7ff;
}

.support-chat-row .chat-name {
  color: rgba(250, 251, 255, 0.96);
}

.support-context-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  overflow: visible;
  white-space: normal;
}

.support-row-status {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  border: 1px solid rgba(90, 200, 250, 0.22);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.12);
  color: #cfe5ff;
  padding: 1px 7px;
  font-size: 0.66rem;
  font-weight: 840;
  line-height: 1;
}

.support-row-status.is-resolved {
  border-color: rgba(48, 209, 88, 0.22);
  background: rgba(48, 209, 88, 0.11);
  color: #c8f7d1;
}

.support-prompt-card .research-prompt-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.support-thread .thread-context {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--separator));
}

.support-thread-context {
  position: relative;
  overflow: hidden;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(235, 235, 245, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 16%, rgba(90, 200, 250, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.032)),
    rgba(18, 22, 32, 0.82);
  padding: 12px 12px 12px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(24px) saturate(1.2);
}

.support-thread-context::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(90, 200, 250, 0.88), rgba(10, 132, 255, 0.42));
  box-shadow: 0 0 22px rgba(90, 200, 250, 0.16);
  opacity: 0.82;
}

.support-thread-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(90, 200, 250, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 34% 24%, rgba(90, 200, 250, 0.24), transparent 44%),
    rgba(255, 255, 255, 0.052);
  color: #b9d7ff;
}

.support-thread-icon .ui-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.05;
}

.support-thread-context-main {
  gap: 2px;
}

.support-thread-context-main small {
  color: rgba(235, 235, 245, 0.54);
  font-size: 0.7rem;
  font-weight: 820;
  text-transform: uppercase;
}

.support-thread-context-main strong {
  color: #fff;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.18;
}

.support-thread-context-main p {
  max-width: 250px;
  margin: 2px 0 0;
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.76rem;
  font-weight: 620;
  line-height: 1.3;
}

.support-thread-side {
  display: flex;
  align-self: start;
  justify-content: end;
}

.support-status-chip {
  display: inline-grid;
  min-height: 24px;
  place-items: center;
  border: 1px solid rgba(90, 200, 250, 0.26);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.13);
  color: #cfe5ff;
  padding: 0 10px;
  font-size: 0.68rem;
  font-weight: 860;
}

.support-status-chip.is-resolved {
  border-color: rgba(48, 209, 88, 0.24);
  background: rgba(48, 209, 88, 0.12);
  color: #c8f7d1;
}

.support-message-stack {
  align-content: start;
  min-height: auto;
  padding-top: 4px;
}

.app-shell .page:not(.world-page) .support-thread .support-message-stack,
.app-shell.task-shell .page:not(.world-page) .support-thread .support-message-stack {
  min-height: auto;
}

.app-shell .page:not(.world-page) .support-message.is-team {
  max-width: min(520px, 84%);
  border-color: rgba(90, 200, 250, 0.16);
  background:
    linear-gradient(145deg, rgba(90, 200, 250, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.82);
}

.support-sender {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-bottom: 5px;
  color: var(--blue);
  font-weight: 850;
}

.support-sender .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

.unread-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  background: var(--blue);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
}

.message-time {
  justify-self: start;
}

.message.mine .message-time,
.message.me .message-time {
  justify-self: end;
}

.identity-badge {
  display: inline-grid;
  min-height: 18px;
  align-items: center;
  margin-left: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--separator));
  border-radius: 999px;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.2;
  vertical-align: middle;
}

.profile-retroactive-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 12px 0 2px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 11px;
  background: color-mix(in srgb, var(--surface-elevated) 74%, transparent);
  color: var(--text);
  font-size: 0.86rem;
}

.profile-retroactive-option input {
  margin-top: 3px;
}

.profile-retroactive-option span {
  display: grid;
  gap: 3px;
}

.profile-retroactive-option small {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.35;
}

.alias-card {
  display: grid;
  gap: 10px;
}

.alias-card .identity-badge {
  justify-self: start;
  margin-left: 0;
}

.thread-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.thread-context-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.event-reschedule-sheet {
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.event-reschedule-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.event-reschedule-fields label {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 760;
}

.event-reschedule-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.event-reschedule-actions .secondary-btn,
.event-reschedule-actions .primary-btn {
  min-height: 44px;
}

.chat-thread-context {
  border-color: color-mix(in srgb, var(--separator) 58%, transparent);
  background: color-mix(in srgb, var(--surface) 54%, transparent);
  padding: 9px 10px 9px 12px;
}

.chat-thread-context .thread-context-main {
  gap: 1px;
}

.chat-thread-context small {
  font-size: 0.72rem;
  letter-spacing: 0;
}

.chat-thread-context strong {
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
  font-size: 0.88rem;
  font-weight: 740;
  line-height: 1.22;
}

.thread-actions-wrap {
  justify-self: end;
}

.thread-actions-btn {
  border: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  color: var(--muted);
}

.thread-context-menu {
  min-width: 148px;
}

.message-actions-wrap {
  position: relative;
}

.message-more-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--separator);
  background: color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  color: var(--muted);
}

.message-more-btn .ui-icon {
  width: 15px;
  height: 15px;
}

.message-context-menu {
  top: auto;
  bottom: calc(100% + 8px);
  min-width: 146px;
}

.message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message.mine .message-footer,
.message.me .message-footer {
  justify-content: flex-end;
}

.message.mine .message-more-btn,
.message.me .message-more-btn {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

.message.removed {
  border-style: dashed;
  color: var(--muted);
}

.admin-contact-source-block,
.admin-contact-composer,
.admin-contact-detail,
.admin-contact-reveal-block {
  display: grid;
  gap: 10px;
}

.admin-contact-source-block {
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface-elevated) 76%, transparent);
}

.admin-contact-source-block > p,
.admin-contact-reveal-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.admin-contact-composer {
  border-top: 1px solid var(--separator);
  padding-top: 10px;
}

.admin-contact-composer label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.admin-contact-composer textarea,
.admin-contact-detail textarea {
  min-height: 84px;
  resize: vertical;
}

.admin-contact-message-stack {
  display: grid;
  gap: 9px;
}

.admin-contact-message {
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface-elevated);
}

.admin-contact-message.is-admin {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--separator));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-elevated));
}

.admin-contact-message small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-weight: 800;
}

.admin-contact-message p {
  margin: 0;
  line-height: 1.4;
}

.admin-course-card .admin-suggestion-head em,
.admin-course-source .admin-suggestion-head em {
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--separator));
  border-radius: 999px;
  color: var(--blue);
  padding: 4px 8px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.admin-course-note {
  display: grid;
  gap: 6px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-elevated) 76%, transparent);
  padding: 10px 12px;
}

.admin-campus-pill {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--separator));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 840;
  line-height: 1;
}

.admin-campus-pill .ui-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.admin-course-note p,
.admin-course-source p {
  margin: 0;
  color: var(--text);
  line-height: 1.38;
}

.admin-course-signal-list,
.admin-course-source-grid {
  display: grid;
  gap: 10px;
}

.admin-course-signal {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.admin-course-query {
  color: var(--text);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-course-signal small,
.admin-course-source small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.admin-course-source {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.download-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(47, 196, 27, 0.14), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(8, 116, 209, 0.14), transparent 30%),
    #f7f8fb;
}

.download-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.download-panel {
  width: min(100%, 430px);
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
}

.download-panel.legal-panel {
  width: min(100%, 720px);
  gap: 18px;
}

.download-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
}

.download-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.download-panel h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
}

.download-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.download-panel .legal-date {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 760;
}

.legal-section {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.legal-section h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.18;
}

.legal-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

.legal-section li {
  padding-left: 2px;
}

.download-actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.download-actions a {
  text-decoration: none;
  text-align: center;
}

.user-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--avatar-ring);
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

.user-avatar span {
  display: block;
  color: inherit;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

.avatar.user-avatar,
.comment-avatar.user-avatar,
.detail-author-avatar.user-avatar,
.comment-composer-avatar.user-avatar,
.event-chat-avatar.user-avatar,
.event-chat-composer-avatar.user-avatar {
  font-size: 0.78rem;
}

.message-recipient-avatar.user-avatar {
  font-size: 0.9rem;
}

.profile-avatar.user-avatar {
  font-size: 2.05rem;
}

.browse-search-card {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.browse-search-field {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  padding: 0 6px 0 12px;
}

.browse-search-field:focus-within {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--separator));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

.browse-search-card.is-focus-cued .browse-search-field {
  border-color: color-mix(in srgb, var(--blue) 70%, var(--separator));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}

.browse-search-field .ui-icon {
  width: 18px;
  height: 18px;
}

.browse-search-field input {
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.browse-search-field input::placeholder {
  color: var(--muted);
}

.browse-search-field .clear-search-btn {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
}

.browse-search-results {
  display: none;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 8px;
  background: var(--surface);
}

.browse-search-results:has(> *) {
  display: grid;
}

.browse-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: transparent;
  color: var(--text);
  padding: 0 8px 0 0;
}

.browse-search-row:last-child {
  border-bottom: 0;
}

.browse-search-open:focus-visible,
.browse-search-open:hover {
  background: color-mix(in srgb, var(--accent, var(--blue)) 7%, transparent);
  outline: 0;
}

.browse-search-open {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 62px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 9px 4px 9px 12px;
  text-align: left;
}

.browse-search-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, var(--blue)) 12%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent, var(--blue)) 86%, var(--text));
}

.browse-search-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.browse-search-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.browse-search-copy strong,
.browse-search-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browse-search-copy strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.18;
}

.browse-search-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.browse-search-chevron {
  display: grid;
  width: 24px;
  min-height: 44px;
  place-items: center;
  color: var(--muted);
}

.browse-search-chevron .ui-icon {
  width: 17px;
  height: 17px;
}

.browse-search-join,
.browse-search-joined {
  display: inline-flex;
  min-width: 64px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 790;
  white-space: nowrap;
}

.browse-search-join {
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 38%, transparent);
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent);
  color: var(--blue);
}

.browse-search-join:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 78%, white);
  outline-offset: 2px;
}

.browse-search-joined {
  border: 0;
  color: var(--muted);
}

.browse-search-joined .ui-icon {
  width: 15px;
  height: 15px;
}

.browse-search-empty {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.browse-search-empty strong {
  color: var(--text);
}

.browse-search-empty span {
  color: var(--muted);
  font-size: 0.82rem;
}

.browse-search-empty .secondary-btn {
  width: 100%;
  white-space: normal;
}

/* Apple-glass world surfaces */
.app-shell:has(.world-page) {
  background:
    radial-gradient(circle at 50% -16%, color-mix(in srgb, var(--accent, #a66af2) 20%, transparent), transparent 34%),
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.055), transparent 30%),
    #05070d;
}

.world-page {
  position: relative;
  isolation: isolate;
  padding: 0 14px 18px;
  background:
    radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 34%),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.07), transparent 26%),
    radial-gradient(circle at 82% 42%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 35%),
    linear-gradient(180deg, #080c13 0%, #05070d 42%, #04060a 100%);
  color: #f7f7fb;
}

.blends-world-page {
  --blend-world-spectrum: linear-gradient(135deg, #5ac8fa 0%, #a78bfa 28%, #ff6b7a 54%, #ffd166 76%, #30d158 100%);
  --blend-world-glow: rgba(125, 196, 255, 0.18);
  background:
    radial-gradient(circle at 50% -12%, rgba(90, 200, 250, 0.17), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(167, 139, 250, 0.13), transparent 27%),
    radial-gradient(circle at 85% 30%, rgba(255, 209, 102, 0.1), transparent 30%),
    radial-gradient(circle at 70% 64%, rgba(48, 209, 88, 0.07), transparent 34%),
    linear-gradient(180deg, #080b13 0%, #05070d 42%, #04060a 100%);
}

.app-shell:has(.blends-world-page) {
  background:
    radial-gradient(circle at 48% -14%, rgba(90, 200, 250, 0.14), transparent 32%),
    radial-gradient(circle at 20% 18%, rgba(167, 139, 250, 0.1), transparent 30%),
    radial-gradient(circle at 80% 38%, rgba(255, 107, 122, 0.07), transparent 34%),
    #04060a;
}

.world-page .page-header.topbar {
  position: relative;
  z-index: 2;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: start;
  min-height: 76px;
  margin: 0 -2px 8px;
  padding: max(18px, env(safe-area-inset-top)) 0 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.world-page .topbar-title {
  position: relative;
  gap: 6px;
  padding-top: 2px;
}

.blends-world-page .topbar-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px -28px -8px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 50%, rgba(90, 200, 250, 0.38), transparent 42%),
    radial-gradient(circle at 50% 42%, rgba(167, 139, 250, 0.28), transparent 46%),
    radial-gradient(circle at 78% 50%, rgba(48, 209, 88, 0.2), transparent 48%);
  opacity: 0.58;
  filter: blur(18px);
}

.world-page .page-title,
.world-page .page-title.left {
  color: var(--accent);
  font-size: 1.9rem;
  font-weight: 820;
  line-height: 1.05;
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 38%, transparent);
}

.blends-world-page .page-title,
.blends-world-page .page-title.left {
  background: none;
  color: #f7f7fb;
  -webkit-text-fill-color: #f7f7fb;
  text-shadow:
    0 0 18px rgba(90, 200, 250, 0.28),
    0 0 28px rgba(167, 139, 250, 0.18),
    0 0 34px rgba(48, 209, 88, 0.12);
}

.world-page .topbar-title small {
  display: -webkit-box;
  max-width: min(340px, calc(100vw - 150px));
  overflow: hidden;
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.98rem;
  font-weight: 590;
  line-height: 1.22;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  text-wrap: balance;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.blends-world-page .topbar-title small {
  color: rgba(245, 245, 247, 0.72);
}

.world-page .circle-btn {
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.world-page .circle-btn::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 46px;
  height: 46px;
  border: 1.25px solid color-mix(in srgb, var(--accent) 42%, rgba(235, 235, 245, 0.2));
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.032)),
    rgba(24, 27, 37, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 10px 24px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(22px) saturate(1.25);
  pointer-events: none;
}

.world-page .topbar-side.right .circle-btn {
  color: var(--accent);
}

.world-page .topbar-side.right .circle-btn::before {
  border-color: color-mix(in srgb, var(--accent) 44%, rgba(235, 235, 245, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.26),
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}

.blends-world-page .circle-btn::before,
.blends-world-page .topbar-side.right .circle-btn::before {
  border-color: rgba(245, 245, 247, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.032)),
    rgba(20, 24, 34, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 10px 24px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.blends-world-page .topbar-side.right .circle-btn {
  color: #dce8ff;
}

.blends-world-page .topbar-side.right .circle-btn::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(90, 200, 250, 0.32), transparent 40%),
    radial-gradient(circle at 64% 60%, rgba(167, 139, 250, 0.24), transparent 44%),
    radial-gradient(circle at 72% 28%, rgba(48, 209, 88, 0.18), transparent 46%);
  opacity: 0.72;
  filter: blur(9px);
  pointer-events: none;
}

.world-page .circle-btn .ui-icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}

.world-page .community-row-card,
.world-page .world-glass-empty,
.world-discovery-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    color-mix(in srgb, #141824 74%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(28px) saturate(1.25);
}

.world-page .community-row-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 44%, transparent));
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 44%, transparent);
}

.world-page .blend-community-row::before {
  width: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.08)),
    var(--blend-gradient);
  opacity: 0.72;
  filter: saturate(0.92);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 34px rgba(167, 139, 250, 0.08);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.blends-world-page .world-glass-empty::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.08)),
    var(--blend-world-spectrum);
  opacity: 0.64;
  filter: saturate(0.86);
  box-shadow:
    0 0 22px rgba(125, 196, 255, 0.12),
    0 0 34px rgba(167, 139, 250, 0.08);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.blends-world-page .world-glass-empty::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  pointer-events: none;
}

.blends-world-page .world-discovery-card::before {
  content: none;
}

.world-page .world-summary {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 76px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(235, 235, 245, 0.085);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(18, 22, 32, 0.58);
  padding: 13px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 26px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(20px) saturate(1.08);
}

.world-page .world-summary-icon {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(235, 235, 245, 0.1));
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 48%),
    rgba(255, 255, 255, 0.045);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.blends-world-page .world-summary-icon {
  border-color: rgba(245, 245, 247, 0.16);
  background:
    radial-gradient(circle at 34% 28%, rgba(90, 200, 250, 0.34), transparent 44%),
    radial-gradient(circle at 64% 62%, rgba(167, 139, 250, 0.26), transparent 50%),
    rgba(255, 255, 255, 0.055);
  color: #f7f7fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 22px rgba(90, 200, 250, 0.1);
}

.world-page .world-summary-icon .ui-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.world-page .world-summary-copy {
  min-width: 0;
  gap: 3px;
}

.world-find-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  border: 1px solid rgba(235, 235, 245, 0.105);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(18, 22, 32, 0.58);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.16);
}

button.world-find-card {
  width: 100%;
  font: inherit;
  text-align: left;
}

.world-find-card.world-find-inline {
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  gap: 9px;
  min-height: 56px;
  margin: -6px 0 18px;
  border-color: color-mix(in srgb, var(--accent) 18%, rgba(235, 235, 245, 0.09));
  border-radius: 17px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, transparent), rgba(255, 255, 255, 0.022)),
    rgba(18, 22, 32, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  padding: 8px 10px;
}

.world-find-card.world-find-inline:active {
  transform: translateY(1px);
}

.world-find-card.world-find-inline:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 46%, rgba(235, 235, 245, 0.16));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  outline: none;
}

.world-find-inline .world-find-icon {
  width: 34px;
  height: 34px;
  border-color: color-mix(in srgb, var(--accent) 20%, rgba(235, 235, 245, 0.09));
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.028);
  opacity: 0.88;
}

.world-find-inline .world-find-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.world-find-inline .world-find-copy {
  gap: 2px;
}

.world-find-inline .world-find-copy strong {
  font-size: 0.88rem;
  font-weight: 740;
}

.world-find-inline .world-find-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(235, 235, 245, 0.55);
  font-size: 0.74rem;
  line-height: 1.26;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.world-find-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: rgba(235, 235, 245, 0.56);
}

.world-find-chevron .ui-icon {
  width: 18px;
  height: 18px;
}

.world-find-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(235, 235, 245, 0.11));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.04));
  color: var(--accent);
}

.world-find-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.world-find-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.world-find-copy strong,
.world-find-copy small {
  overflow-wrap: anywhere;
}

.world-find-copy strong {
  color: #f7f7fb;
  font-size: 0.98rem;
  font-weight: 760;
}

.world-find-copy small {
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.82rem;
  line-height: 1.35;
}

.world-find-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 8px;
  white-space: nowrap;
}

.world-find-btn .ui-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.world-page .world-summary-kicker {
  color: color-mix(in srgb, var(--accent) 88%, #f7f7fb);
  font-size: 0.66rem;
  font-weight: 830;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.world-page .world-summary h2 {
  color: #fff;
  font-size: 1.03rem;
  font-weight: 820;
  line-height: 1.12;
}

.world-page .world-summary p {
  display: -webkit-box;
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.78rem;
  font-weight: 620;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.world-page .world-summary-stat {
  min-height: 28px;
  border-color: color-mix(in srgb, var(--accent) 38%, rgba(235, 235, 245, 0.12));
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.04));
  color: color-mix(in srgb, var(--accent) 86%, #fff);
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 830;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.world-page:not(.blends-world-page) .world-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  margin: -5px 0 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 2px;
  box-shadow: none;
  backdrop-filter: none;
}

.world-page:not(.blends-world-page) .world-summary-icon {
  display: none;
}

.world-page:not(.blends-world-page) .world-summary-icon .ui-icon {
  display: none;
}

.world-page:not(.blends-world-page) .world-summary-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0;
}

.world-page:not(.blends-world-page) .world-summary h2 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-page:not(.blends-world-page) .world-summary p {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.74rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.world-page .world-community-search {
  position: sticky;
  top: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 44px;
  min-height: 60px;
  align-items: center;
  gap: 10px;
  margin: -8px 0 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(235, 235, 245, 0.12));
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.03)),
    rgba(10, 15, 28, 0.82);
  padding: 8px 10px 8px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(24px) saturate(1.2);
}

.world-page .world-category-scope {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: -2px -2px 14px;
  padding: 1px 42px 4px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), rgba(0, 0, 0, 0.72) calc(100% - 24px), transparent 100%);
}

.world-page .world-category-scope::-webkit-scrollbar {
  display: none;
}

.world-page:not(.blends-world-page) .world-summary + .world-category-scope {
  margin-top: 2px;
}

.world-page .world-category-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  max-width: 148px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 245, 247, 0.74);
  padding: 0 10px 0 12px;
  font-size: 0.76rem;
  font-weight: 760;
}

.world-page .world-category-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-page .world-category-chip small {
  flex: 0 0 auto;
  min-width: 19px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 247, 0.64);
  padding: 2px 6px;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.1;
}

.world-page .world-category-chip.is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, rgba(255, 255, 255, 0.12));
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%),
    color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.04));
  color: #fff;
}

.blends-world-page .world-category-chip.is-active {
  border-color: rgba(245, 245, 247, 0.2);
  background:
    radial-gradient(circle at 20% 24%, rgba(90, 200, 250, 0.24), transparent 44%),
    radial-gradient(circle at 58% 18%, rgba(167, 139, 250, 0.18), transparent 48%),
    rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.world-page .world-category-chip.is-active small {
  background: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.08));
  color: #fff;
}

.blends-world-page .world-category-chip.is-active small {
  background: rgba(255, 255, 255, 0.13);
}

.world-page .world-category-scope + .world-community-search {
  margin-top: 0;
}

.world-page .world-community-search-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--accent);
}

.blends-world-page .world-community-search {
  border-color: rgba(245, 245, 247, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
    rgba(10, 15, 28, 0.82);
}

.blends-world-page .world-community-search::before {
  content: "";
  position: absolute;
  inset: auto 14px -1px;
  height: 1px;
  border-radius: 999px;
  background: var(--blend-world-spectrum);
  opacity: 0.55;
  pointer-events: none;
}

.blends-world-page .world-community-search-icon {
  color: #dce8ff;
}

.world-page .world-community-search-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.world-page .world-community-search input {
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 720;
  outline: 0;
}

.world-page .world-community-search input::placeholder {
  color: rgba(235, 235, 245, 0.5);
}

.world-page .world-community-search small {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.76rem;
  font-weight: 780;
  white-space: nowrap;
}

.world-page .world-community-search .clear-search-btn {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
}

.world-page > .page-header + .world-community-search {
  margin-top: 12px;
}

.world-page .world-search-empty {
  min-height: 150px;
  margin-bottom: 4px;
}

.world-page .community-groups {
  gap: 16px;
}

.world-page .community-group {
  gap: 10px;
}

.world-page .community-group-header {
  min-height: 24px;
  grid-template-columns: minmax(0, 1fr) 24px;
  padding: 0 4px;
}

.world-page .community-group-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.world-page .community-group-header strong {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

.blends-world-page .community-group-header strong {
  background: none;
  color: #f7f7fb;
  -webkit-text-fill-color: #f7f7fb;
  text-shadow:
    0 0 16px rgba(90, 200, 250, 0.2),
    0 0 24px rgba(167, 139, 250, 0.14);
}

.world-page .community-group-header small {
  margin: 0;
  color: rgba(235, 235, 245, 0.56);
  font-size: 1rem;
  font-weight: 760;
}

.world-page .community-group-chevron {
  color: var(--accent);
  opacity: 0.72;
}

.world-page .community-row-list {
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.world-page .community-row-card {
  min-height: 92px;
  grid-template-columns: minmax(0, 1fr) 66px;
  gap: 0;
  border-bottom: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(18, 22, 32, 0.76);
}

.world-page .community-row-card.has-open-menu {
  z-index: 12;
  overflow: visible;
}

.world-page .community-row-card.is-unread {
  border-color: color-mix(in srgb, var(--accent) 40%, rgba(235, 235, 245, 0.14));
  background:
    radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 40px rgba(0, 0, 0, 0.28);
}

.world-page .community-row-card:last-child {
  border-bottom: 1px solid rgba(235, 235, 245, 0.12);
}

.world-page .community-row-main {
  min-height: 92px;
  grid-template-columns: 58px minmax(0, 1fr) 22px;
  gap: 10px;
  padding: 14px 0 14px 20px;
  color: #fff;
}

.world-page .community-glyph {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 47%),
    rgba(255, 255, 255, 0.045);
  color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.035);
}

.world-page .community-glyph .ui-icon {
  width: 29px;
  height: 29px;
  stroke-width: 1.95;
}

.world-page .community-row-copy {
  gap: 5px;
}

.world-page .community-title-row {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.world-page .community-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 830;
  line-height: 1.08;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-page .community-row-copy > small {
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.15;
}

.community-signal-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.community-signal {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.74rem;
  font-weight: 680;
  line-height: 1.18;
  white-space: nowrap;
}

.community-signal .ui-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.1;
}

.community-signal.is-joined {
  color: rgba(235, 235, 245, 0.64);
}

.community-signal.is-joined-strong {
  color: rgba(235, 235, 245, 0.72);
  font-weight: 760;
}

.community-signal.is-qa {
  color: #ffb340;
}

.community-signal.is-event,
.community-signal.is-request,
.community-signal.is-offer {
  color: color-mix(in srgb, var(--accent) 82%, #f2d7ff);
}

.community-signal.is-members {
  color: rgba(235, 235, 245, 0.62);
}

.community-signal.is-quiet,
.community-signal.is-quiet-link {
  color: #82c8ff;
}

.community-signal.is-quiet-link {
  font-weight: 760;
}

.world-page .community-chevron {
  color: rgba(255, 255, 255, 0.88);
}

.world-page .community-chevron .ui-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.8;
}

.world-page .community-row-actions {
  justify-content: center;
  gap: 0;
  padding: 0 12px 0 0;
}

.world-page .row-intent-button {
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.world-page .row-intent-button::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 46px;
  height: 46px;
  border: 1.25px solid color-mix(in srgb, var(--accent) 54%, rgba(255, 255, 255, 0.14));
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px) saturate(1.18);
  pointer-events: none;
}

.world-page .community-row-menu-wrap {
  display: inline-grid;
  place-items: center;
}

.world-page .community-row-menu-btn {
  color: color-mix(in srgb, var(--accent) 78%, rgba(235, 235, 245, 0.82));
}

.world-page .community-row-menu-btn::before {
  width: 43px;
  height: 43px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--accent) 36%, rgba(255, 255, 255, 0.12));
  background:
    radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 54%),
    rgba(255, 255, 255, 0.028);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 6px 14px rgba(0, 0, 0, 0.14);
}

.world-page .row-intent-button.community-row-menu-btn .ui-icon {
  width: 20.5px;
  height: 20.5px;
  stroke-width: 2.05;
}

.world-page .row-intent-button:active,
.world-page .row-intent-button:focus-visible {
  transform: scale(0.98);
}

.world-page .row-intent-button:active::before,
.world-page .row-intent-button:focus-visible::before {
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08));
}

.world-page .row-intent-button:focus-visible::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.world-page .row-intent-button .ui-icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.world-page .community-row-actions .context-menu {
  right: 0;
  z-index: 70;
  min-width: 210px;
  border-color: rgba(235, 235, 245, 0.14);
  background: rgba(28, 32, 42, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.world-page .community-row-actions .context-menu button {
  background: transparent;
  color: rgba(245, 247, 255, 0.92);
}

.world-page .community-row-actions .context-menu button:hover {
  background: color-mix(in srgb, var(--accent) 13%, rgba(255, 255, 255, 0.06));
}

.world-page .community-row-actions .context-menu button:not(:disabled):active {
  transform: scale(0.985);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.045);
  filter: brightness(0.95);
}

.world-page .community-row-actions .context-menu button.destructive-menu-item {
  color: #ff453a;
}

.world-page .community-row-actions .context-menu button.menu-item-separated {
  border-top-color: rgba(235, 235, 245, 0.12);
}

.world-page .community-row-actions .context-menu button.destructive-menu-item:hover {
  background: rgba(255, 69, 58, 0.14);
}

.world-page .community-row-actions .context-menu button.destructive-menu-item:not(:disabled):active {
  background: rgba(255, 69, 58, 0.2);
}

.game-catalog-results {
  display: grid;
  gap: 12px;
  margin-top: 2px;
}

.game-catalog-results.is-sheet {
  max-height: min(46vh, 430px);
  overflow: auto;
  padding-right: 2px;
}

.game-catalog-head,
.game-catalog-section-head {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.game-catalog-head span,
.game-catalog-section-head {
  min-width: 0;
}

.game-catalog-head strong,
.game-catalog-section-head strong {
  display: block;
  color: #fff;
  font-size: 0.96rem;
  font-weight: 830;
  letter-spacing: 0;
}

.game-catalog-head small,
.game-catalog-section-head small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.78rem;
  font-weight: 640;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-catalog-head em {
  color: #ffb340;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}

.game-catalog-section {
  display: grid;
  gap: 8px;
}

.game-catalog-start {
  gap: 10px;
}

.game-catalog-list {
  display: grid;
  gap: 8px;
}

.game-catalog-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(235, 235, 245, 0.12));
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(18, 22, 32, 0.74);
  color: #fff;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.game-catalog-row:disabled {
  cursor: progress;
  opacity: 0.72;
}

.game-catalog-row:active,
.game-catalog-row:focus-visible {
  transform: translateY(1px);
}

.game-catalog-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 64%, #0a84ff);
  outline-offset: 2px;
}

.game-catalog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(235, 235, 245, 0.12));
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 52%),
    rgba(255, 255, 255, 0.045);
  color: var(--accent);
}

.game-catalog-icon .ui-icon {
  width: 23px;
  height: 23px;
}

.game-catalog-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.game-catalog-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 820;
  line-height: 1.16;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}

.game-catalog-copy small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  font-weight: 620;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.game-platform-chip-context {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.game-platform-chip-context::before,
.game-platform-chip-context::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.game-platform-chip-context::before {
  left: 0;
  background: linear-gradient(90deg, rgba(32, 34, 45, 0.92), rgba(32, 34, 45, 0.18), transparent);
}

.game-platform-chip-context::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(32, 34, 45, 0.18), rgba(32, 34, 45, 0.92));
}

.game-platform-chip-context.is-scrollable:not(.is-at-start)::before,
.game-platform-chip-context.is-scrollable:not(.is-at-end)::after {
  opacity: 1;
}

.game-platform-chip-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.game-platform-chip-row::-webkit-scrollbar {
  display: none;
}

.game-platform-chip-row em {
  flex: 0 0 auto;
  max-width: 96px;
  overflow: hidden;
  padding: 3px 8px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 247, 255, 0.74);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-catalog-action {
  align-self: center;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.05));
  color: color-mix(in srgb, var(--accent) 82%, #fff);
  font-size: 0.76rem;
  font-weight: 820;
  white-space: nowrap;
}

.game-catalog-row.is-joined .game-catalog-action {
  border-color: color-mix(in srgb, var(--destructive) 40%, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--destructive) 16%, rgba(255, 255, 255, 0.05));
  color: var(--destructive);
}

.game-catalog-empty {
  margin: 0;
}

.game-catalog-empty.catalog-loading-empty {
  border-color: rgba(235, 235, 245, 0.12);
  background: rgba(18, 22, 32, 0.74);
}

.game-catalog-empty .catalog-spinner {
  border-color: rgba(235, 235, 245, 0.16);
  border-top-color: var(--accent);
}

.game-catalog-empty .catalog-loading-head strong {
  color: #fff;
}

.game-catalog-empty .catalog-skeleton-row {
  background: rgba(255, 255, 255, 0.055);
}

.game-catalog-empty .catalog-skeleton-row span {
  background: linear-gradient(90deg, rgba(235, 235, 245, 0.08), rgba(235, 235, 245, 0.2), rgba(235, 235, 245, 0.08));
  background-size: 220% 100%;
}

.game-catalog-request-row {
  margin-top: 2px;
}

@media (max-width: 520px) {
  .course-result-section-head,
  .game-catalog-section-head {
    display: grid;
    justify-content: stretch;
    align-items: start;
    gap: 4px;
  }

  .course-result-section-head small,
  .game-catalog-section-head small,
  .game-catalog-request-row.sheet-suggest-row strong,
  .game-catalog-request-row.sheet-suggest-row small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

.app-shell .account-delete-dialog .field,
.account-delete-dialog input.field {
  border-color: #d0d5dd;
  background: #ffffff;
  color: #101828;
}

.app-shell .account-delete-dialog .field::placeholder,
.account-delete-dialog input.field::placeholder {
  color: #98a2b3;
}

.account-delete-dialog .secondary-btn {
  border-color: #d0d5dd;
  background: #ffffff;
  color: #344054;
}

.account-delete-dialog .destructive-confirm-btn:disabled {
  background: #fee4e2;
  color: #b42318;
}

.world-page .blend-chip-list {
  gap: 7px;
}

.world-page .blend-source-chip {
  border-color: color-mix(in srgb, var(--chip-color) 40%, rgba(235, 235, 245, 0.14));
  background: color-mix(in srgb, var(--chip-color) 16%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--chip-color) 76%, #fff);
}

.world-glass-empty,
.world-discovery-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 26px 20px;
  border-radius: 18px;
  text-align: center;
}

.world-discovery-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(235, 235, 245, 0.11);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 50%),
    rgba(255, 255, 255, 0.055);
  color: var(--accent);
}

.world-discovery-icon .ui-icon {
  width: 32px;
  height: 32px;
}

.world-discovery-card strong,
.world-glass-empty strong {
  color: #fff;
  font-size: 1.04rem;
  font-weight: 820;
}

.world-discovery-card p,
.world-glass-empty span {
  max-width: 310px;
  margin: 0;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.86rem;
  line-height: 1.3;
}

.world-page .world-glass-empty {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    color-mix(in srgb, #141824 74%, transparent);
  color: rgba(235, 235, 245, 0.66);
}

.world-page .world-glass-empty strong {
  color: #fff;
}

.world-page .world-glass-empty .primary-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 68%, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 74%, #fff 8%), color-mix(in srgb, var(--accent) 62%, #34115a));
  color: #fff;
}

.world-discovery-btn {
  display: inline-flex;
  width: auto;
  min-width: min(270px, 100%);
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 74%, #fff 8%), color-mix(in srgb, var(--accent) 62%, #34115a));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 36px color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0.35));
}

.world-discovery-btn .ui-icon {
  width: 22px;
  height: 22px;
}

.world-page + .bottom-nav {
  width: auto;
  min-height: 78px;
  margin: 8px 12px 12px;
  padding: 8px 8px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(18, 22, 31, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(26px) saturate(1.28);
}

.world-page + .bottom-nav .nav-item {
  min-height: 58px;
  border-radius: 14px;
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.91rem;
}

.world-page + .bottom-nav .nav-item.active {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--nav-accent) 34%, transparent), transparent 48%),
    color-mix(in srgb, var(--nav-accent) 18%, rgba(255, 255, 255, 0.06));
  color: var(--nav-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-accent) 22%, transparent);
}

.world-page + .bottom-nav .nav-icon .ui-icon {
  width: 25px;
  height: 25px;
}

.action-sheet {
  border-color: rgba(235, 235, 245, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(20, 24, 34, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 24px 54px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(30px) saturate(1.35);
}

.app-shell:has(.world-page) .action-sheet {
  bottom: calc(112px + env(safe-area-inset-bottom));
}

.action-sheet .sheet-title span {
  color: rgba(235, 235, 245, 0.58);
}

.action-sheet .sheet-title strong {
  color: #fff;
}

.action-sheet .sheet-action-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.action-sheet .sheet-action-list button {
  min-height: 112px;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  border-bottom: 0;
  border-left: 1px solid rgba(235, 235, 245, 0.09);
  color: rgba(235, 235, 245, 0.72);
  padding: 16px 8px;
  text-align: center;
}

.action-sheet .sheet-action-list button:first-child {
  border-left: 0;
}

.action-sheet .sheet-action-list button:hover,
.action-sheet .sheet-action-list button:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 0;
}

.action-sheet .sheet-action-list button:not(:disabled):active {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
    color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.045));
  filter: brightness(0.93);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.04);
}

.action-sheet .sheet-action-list button:not(:disabled):active > .ui-icon:first-child {
  color: color-mix(in srgb, var(--accent) 82%, #fff);
}

.action-sheet .sheet-action-list button > .ui-icon:first-child,
.blend-action-sheet .sheet-action-list button > .ui-icon:first-child {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  stroke-width: 1.9;
}

.action-sheet .sheet-action-list span {
  justify-items: center;
}

.action-sheet .sheet-action-list strong {
  color: rgba(235, 235, 245, 0.78);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.1;
}

.community-import-sheet {
  position: fixed;
  max-height: min(84dvh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border: 1px solid rgba(235, 235, 245, 0.14);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent) 0, transparent 34%),
    linear-gradient(180deg, rgba(37, 42, 55, 0.96), rgba(18, 22, 31, 0.96)),
    rgba(20, 24, 34, 0.96);
  box-shadow:
    0 -18px 50px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(26px) saturate(1.12);
}

.community-import-sheet::-webkit-scrollbar {
  display: none;
}

.community-import-sheet .sheet-title {
  padding: 0 52px;
}

.community-import-sheet .sheet-title span {
  color: rgba(235, 235, 245, 0.6);
  font-size: 0.78rem;
  font-weight: 720;
}

.community-import-sheet .sheet-title strong {
  color: #fff;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.14;
}

.community-import-world-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0 2px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.community-import-world-row::-webkit-scrollbar {
  display: none;
}

.community-import-world-chip {
  min-height: 44px;
  max-width: none;
  padding: 0 14px;
}

.community-import-world-chip.is-active {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 52%, rgba(255, 255, 255, 0.14));
  background: color-mix(in srgb, var(--accent, var(--blue)) 18%, rgba(255, 255, 255, 0.055));
}

.community-import-close-btn {
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(235, 235, 245, 0.08);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
  color: rgba(245, 247, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.community-import-close-btn .ui-icon {
  width: 20px;
  height: 20px;
}

.community-import-note {
  margin: 0;
  color: rgba(235, 235, 245, 0.72);
  font-size: 0.84rem;
  line-height: 1.42;
  padding: 0 18px;
  text-align: center;
}

.community-import-trust-note {
  justify-self: center;
  max-width: 100%;
  margin: -2px 0 0;
  border: 1px solid rgba(235, 235, 245, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 8%, transparent), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.045);
  color: rgba(235, 235, 245, 0.76);
  font-size: 0.76rem;
  line-height: 1.25;
  text-align: center;
}

.community-import-trust-note > summary {
  display: grid;
  min-height: 34px;
  grid-template-columns: 17px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
}

.community-import-trust-note > summary::-webkit-details-marker {
  display: none;
}

.community-import-trust-note .ui-icon {
  width: 17px;
  height: 17px;
  color: var(--accent, var(--blue));
  flex: 0 0 auto;
}

.community-import-trust-note > summary .ui-icon:last-child {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

.community-import-trust-note[open] > summary .ui-icon:last-child {
  transform: rotate(180deg);
}

.community-import-trust-note > p {
  margin: 0;
  border-top: 1px solid rgba(235, 235, 245, 0.08);
  padding: 9px 12px 11px;
}

.community-import-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(235, 235, 245, 0.095);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 11px;
}

.community-import-step-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(235, 235, 245, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.08);
  color: rgba(245, 247, 255, 0.88);
  font-size: 0.9rem;
  font-weight: 760;
}

.community-import-step-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-import-step-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-import-copy-step {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 24%, rgba(235, 235, 245, 0.12));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 22%, transparent), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.04);
}

.community-import-copy-step .community-import-step-index {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 36%, rgba(235, 235, 245, 0.12));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 48%, transparent), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.07);
  color: #fff;
}

.community-import-step .primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 48px;
  gap: 8px;
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 30%, rgba(235, 235, 245, 0.12));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 24%, transparent), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  color: #fff;
}

.community-import-step .primary-btn .ui-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.community-import-step.is-copied .primary-btn {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 42%, rgba(235, 235, 245, 0.12));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 46%, transparent), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.05);
}

.community-import-copy-step .primary-btn {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 38%, rgba(235, 235, 245, 0.12));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 36%, transparent), rgba(255, 255, 255, 0.075)),
    rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.community-import-step small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  line-height: 1.35;
}

.community-import-step .community-import-model-nudge {
  color: rgba(245, 247, 255, 0.76);
  font-weight: 650;
}

.community-import-signals {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent, var(--blue)) 13%, transparent) 0, transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065);
  padding: 14px;
}

.community-import-signals:not(.community-import-signals-summary) {
  max-height: none;
  overflow: visible;
}

.community-import-stage-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.community-import-signals-scroll {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  touch-action: pan-y;
}

.community-import-sheet .community-import-signals-scroll {
  max-height: clamp(320px, 44dvh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.community-import-sheet .community-import-signals-scroll::-webkit-scrollbar {
  display: none;
}

.community-import-signals-body {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  min-width: 0;
}

.community-import-signal-dots {
  display: grid;
  align-self: start;
  justify-items: center;
  gap: 7px;
  width: 12px;
  padding-top: 98px;
  pointer-events: none;
}

.community-import-signal-dots span {
  width: 5.5px;
  height: 5.5px;
  border-radius: 999px;
  background: rgba(235, 235, 245, 0.3);
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.community-import-signal-dots span.is-active {
  background: color-mix(in srgb, var(--accent, var(--blue)) 78%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent);
  transform: scale(1.15);
}

.community-import-signals-summary {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
}

.community-import-signals-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 24%, transparent), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.04);
  color: color-mix(in srgb, var(--accent, var(--blue)) 82%, white);
}

.community-import-signals-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.community-import-signals-summary-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-import-signals-summary-copy strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 760;
}

.community-import-signals-summary-copy small {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.75rem;
  line-height: 1.3;
}

.community-import-edit-btn {
  min-height: 36px;
  padding: 0 12px;
}

.community-import-summary-chips {
  display: flex;
  grid-column: 1 / -1;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.community-import-summary-chips::-webkit-scrollbar {
  display: none;
}

.community-import-summary-chips span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: min(280px, 75vw);
  gap: 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 28%, rgba(235, 235, 245, 0.1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 12%, rgba(255, 255, 255, 0.04));
  color: rgba(245, 247, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 680;
  padding: 6px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-import-summary-chips .ui-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.community-import-signals-head {
  display: grid;
  gap: 3px;
  padding: 2px 2px 0;
}

.community-import-signals-head strong {
  color: rgba(245, 247, 255, 0.94);
  font-size: 1rem;
  font-weight: 800;
}

.community-import-signals-head small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  line-height: 1.34;
}

.community-import-signal {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 2px 0;
}

.community-import-signal + .community-import-signal {
  border-top: 1px solid rgba(235, 235, 245, 0.08);
  padding-top: 13px;
}

.community-import-signal-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(235, 235, 245, 0.095);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 20%, transparent), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.045);
  color: color-mix(in srgb, var(--accent, var(--blue)) 78%, white);
}

.community-import-signal-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.community-import-signal-body {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.community-import-signal-title {
  color: rgba(245, 247, 255, 0.9);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.2;
}

.community-import-signal-field {
  min-height: 58px;
  max-height: 112px;
  resize: vertical;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(6, 9, 16, 0.42);
  color: #f7f7fb;
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 10px 12px;
}

.community-import-signal-field:focus {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 48%, rgba(235, 235, 245, 0.12));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent);
  outline: none;
}

.community-import-signal-field::placeholder {
  color: rgba(235, 235, 245, 0.42);
}

.community-import-examples-label {
  color: rgba(235, 235, 245, 0.5);
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}

.community-import-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 -2px;
  overflow-x: auto;
  padding: 0 2px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.community-import-chip-row .community-import-chip {
  flex: 0 0 auto;
}

.community-import-chip-row::-webkit-scrollbar {
  display: none;
}

.community-import-chip {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 18%, rgba(235, 235, 245, 0.1));
  border-radius: 999px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 11%, transparent), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.045);
  color: color-mix(in srgb, var(--accent, var(--blue)) 68%, #f7f7fb);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0 10px;
}

.community-import-paste {
  display: grid;
  gap: 6px;
}

.community-import-paste-step {
  grid-template-columns: 36px minmax(0, 1fr);
}

.community-import-paste-step .community-import-paste,
.community-import-paste-step .community-import-actions {
  grid-column: 1 / -1;
}

.community-import-paste-step .community-import-paste > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.community-import-paste span {
  color: rgba(235, 235, 245, 0.72);
  font-size: 0.78rem;
  font-weight: 720;
  padding: 0 4px;
}

.community-import-paste textarea {
  min-height: 86px;
  max-height: 150px;
  resize: vertical;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(6, 9, 16, 0.44);
  color: #f7f7fb;
  font-size: 0.86rem;
  line-height: 1.42;
  padding: 12px;
}

.community-import-sheet .community-import-paste textarea {
  min-height: 62px;
  max-height: 102px;
  overflow-y: auto;
  padding: 10px 12px;
}

.community-import-paste textarea:focus {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 48%, rgba(235, 235, 245, 0.12));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent);
  outline: none;
}

.community-import-paste textarea::placeholder {
  color: rgba(235, 235, 245, 0.38);
}

.community-import-actions {
  display: grid;
  grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
}

.community-import-paste-btn,
.community-import-preview-btn {
  min-height: 48px;
}

.community-import-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 24%, rgba(235, 235, 245, 0.1));
  color: color-mix(in srgb, var(--accent, var(--blue)) 72%, #f7f7fb);
}

.community-import-error,
.community-import-feedback,
.community-import-warning {
  display: block;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.78rem;
  line-height: 1.35;
}

.community-import-error,
.community-import-warning {
  color: #ffb3ad;
}

.community-import-recovery {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 179, 173, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 179, 173, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  padding: 10px;
}

.community-import-recovery-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 179, 173, 0.1);
  color: #ffb3ad;
}

.community-import-recovery-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.community-import-recovery > strong {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 760;
}

.community-import-recovery > span,
.community-import-recovery > small {
  grid-column: 2 / -1;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.76rem;
  line-height: 1.35;
}

.community-import-recovery > small {
  color: rgba(235, 235, 245, 0.52);
}

.community-import-recovery .primary-btn,
.community-import-recovery .secondary-btn {
  min-height: 40px;
  padding: 0 14px;
}

.community-import-technical {
  grid-column: 2 / -1;
  color: rgba(235, 235, 245, 0.54);
  font-size: 0.72rem;
  line-height: 1.35;
}

.community-import-technical summary {
  cursor: pointer;
  color: rgba(235, 235, 245, 0.62);
  font-weight: 700;
}

.community-import-technical span {
  display: block;
  margin-top: 5px;
}

.community-import-preview {
  display: grid;
  gap: 14px;
}

.community-import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.community-import-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #38c7bd) 8%, transparent), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  padding: 10px 11px;
}

.community-import-summary strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 780;
}

.community-import-summary small {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.72rem;
  line-height: 1.25;
}

.community-import-section {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(235, 235, 245, 0.095);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  padding: 12px;
}

.community-import-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.community-import-section-head span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-import-section-head strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 760;
}

.community-import-section-head small {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.75rem;
}

.community-import-head-actions {
  display: flex !important;
  flex: 0 0 auto;
  grid-auto-flow: column;
  gap: 6px !important;
}

.text-btn {
  min-height: 34px;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 247, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 720;
  padding: 0 10px;
}

.text-btn:disabled {
  opacity: 0.45;
}

.community-import-list {
  display: grid;
  gap: 7px;
}

.community-import-course-check {
  border-color: color-mix(in srgb, var(--blue) 26%, rgba(235, 235, 245, 0.1));
  background: color-mix(in srgb, var(--blue) 8%, rgba(255, 255, 255, 0.03));
}

.community-import-course-list .course-result-row {
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  text-align: left;
}

.community-import-course-list .course-result-row strong,
.community-import-course-list .course-result-row small {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.community-import-rank-section {
  display: grid;
  gap: 7px;
}

.community-import-rank-section + .community-import-rank-section {
  border-top: 1px solid rgba(235, 235, 245, 0.08);
  margin-top: 4px;
  padding-top: 10px;
}

.community-import-rank-head {
  display: grid;
  gap: 2px;
  padding: 2px 2px 0;
}

.community-import-rank-head strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 760;
}

.community-import-rank-head small {
  color: rgba(235, 235, 245, 0.54);
  font-size: 0.72rem;
  line-height: 1.25;
}

.community-import-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(235, 235, 245, 0.09);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #38c7bd) 7%, transparent), rgba(255, 255, 255, 0.034)),
    rgba(255, 255, 255, 0.034);
  color: #f7f7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  padding: 10px;
  text-align: left;
}

.community-import-row.is-selected {
  border-color: color-mix(in srgb, var(--accent, #38c7bd) 38%, rgba(235, 235, 245, 0.1));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #38c7bd) 15%, transparent), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.042);
}

.community-import-row-joined {
  border-color: color-mix(in srgb, var(--accent, #38c7bd) 18%, rgba(235, 235, 245, 0.1));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #38c7bd) 5%, transparent), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.024);
}

.community-import-row-joined .community-import-row-action {
  color: color-mix(in srgb, var(--accent, #38c7bd) 68%, #f7f7fb);
}

.community-import-row.is-added {
  cursor: default;
  border-color: color-mix(in srgb, var(--accent, #38c7bd) 20%, rgba(235, 235, 245, 0.1));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #38c7bd) 6%, transparent), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.026);
  opacity: 1;
}

.community-import-row.is-added .community-import-row-action {
  color: color-mix(in srgb, var(--accent, #38c7bd) 68%, #f7f7fb);
}

.community-import-row.is-sent {
  cursor: default;
  opacity: 0.78;
}

.community-import-row.is-sent .community-import-row-action {
  color: color-mix(in srgb, var(--accent, #38c7bd) 62%, #f7f7fb);
}

.community-import-row-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #38c7bd) 16%, transparent), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.045);
  color: color-mix(in srgb, var(--accent, #38c7bd) 82%, white);
}

.community-import-row-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.community-import-row-icon.is-blend-icon .blend-rings {
  transform: scale(0.76);
}

.community-import-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-import-row-copy strong,
.community-import-row-copy small,
.community-import-row-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-import-row-copy strong {
  color: #fff;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 760;
}

.community-import-row-copy strong.community-import-set-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 5px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.community-import-set-intersection {
  color: color-mix(in srgb, var(--accent, #38c7bd) 78%, white);
  font-weight: 820;
}

.community-import-row-copy small {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.74rem;
}

.community-import-row-copy em {
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.35;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.community-import-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.community-import-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  max-width: 100%;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 247, 255, 0.76);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.2;
  white-space: normal;
}

.community-import-row-action {
  color: rgba(245, 247, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 760;
  white-space: nowrap;
}

.community-import-empty {
  margin: 0;
  color: rgba(235, 235, 245, 0.56);
  font-size: 0.82rem;
  line-height: 1.35;
}

.community-import-more {
  justify-self: start;
}

.community-import-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  text-align: center;
}

.community-import-submit .ui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.community-import-submit span {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-import-submit:disabled {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  color: rgba(235, 235, 245, 0.5);
  opacity: 1;
}

@media (max-width: 520px) {
  .world-find-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .world-find-card.world-find-inline {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
  }

  .world-find-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .community-import-step {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 10px;
  }

  .community-import-signal {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .community-import-signal-icon {
    width: 38px;
    height: 38px;
    border-radius: 15px;
  }

  .community-import-signal-icon .ui-icon {
    width: 20px;
    height: 20px;
  }

  .community-import-step .primary-btn {
    grid-column: 1 / -1;
    min-height: 44px;
    width: 100%;
  }

  .community-import-signals-summary {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .community-import-sheet {
    max-height: min(86dvh, 780px);
  }

  .community-import-sheet .sheet-title {
    padding: 0 46px;
  }

  .community-import-sheet .sheet-title strong {
    font-size: 1.14rem;
  }

  .community-import-note {
    font-size: 0.8rem;
    line-height: 1.34;
    padding: 0 10px;
  }

  .community-import-trust-note {
    min-height: 32px;
    font-size: 0.74rem;
    padding: 6px 10px;
  }

  .community-import-signals:not(.community-import-signals-summary) {
    gap: 9px;
    padding: 12px;
  }

  .community-import-signals-scroll {
    gap: 9px;
  }

  .community-import-signals-body {
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 8px;
  }

  .community-import-signal-dots {
    width: 10px;
    gap: 6px;
    padding-top: 88px;
  }

  .community-import-copy-step {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
  }

  .community-import-copy-step .primary-btn {
    grid-column: auto;
    width: auto;
    min-height: 44px;
    padding: 0 14px;
  }

  .community-import-copy-step .community-import-step-copy small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .community-import-signals-head {
    gap: 2px;
  }

  .community-import-signals-head strong {
    font-size: 0.94rem;
  }

  .community-import-signals-head small {
    font-size: 0.75rem;
    line-height: 1.28;
  }

  .community-import-signal-body {
    gap: 5px;
  }

  .community-import-signal + .community-import-signal {
    padding-top: 10px;
  }

  .community-import-signal-title {
    font-size: 0.8rem;
  }

  .community-import-signal-field {
    min-height: 50px;
    font-size: 0.84rem;
    line-height: 1.3;
    padding: 9px 11px;
  }

  .community-import-chip-row {
    gap: 5px;
  }

  .community-import-chip {
    min-height: 31px;
    font-size: 0.72rem;
    padding: 0 9px;
  }

  .community-import-recovery {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .community-import-recovery .primary-btn,
  .community-import-recovery .secondary-btn,
  .community-import-technical {
    grid-column: 1 / -1;
    width: 100%;
  }

  .community-import-recovery > span,
  .community-import-recovery > small {
    grid-column: 2 / -1;
  }

  .community-import-summary {
    grid-template-columns: 1fr;
  }

  .community-import-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .community-import-head-actions {
    justify-content: flex-start;
  }

  .community-import-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .community-import-row-action {
    grid-column: 2;
    justify-self: start;
  }
}

.home-start-action-sheet {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
}

.home-start-action-sheet [data-home-start-audience-results] {
  display: grid;
  min-height: 0;
}

.home-start-action-sheet .home-start-community-list {
  max-height: none;
  min-height: 0;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  padding: 8px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.home-start-action-sheet .home-start-community-list.is-cued {
  animation: home-start-list-cue 0.9s ease-out;
}

.home-start-action-sheet .home-start-community-list::-webkit-scrollbar {
  display: none;
}

.home-start-action-sheet .home-start-community-list button {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  justify-items: stretch;
  gap: 12px;
  border: 1px solid rgba(235, 235, 245, 0.09);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent), transparent 44%),
    rgba(255, 255, 255, 0.045);
  color: #fff;
  padding: 11px 12px;
  text-align: left;
}

.home-start-cross-world-match {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, rgba(235, 235, 245, 0.12));
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 48%),
    color-mix(in srgb, var(--tint) 72%, rgba(18, 22, 32, 0.78));
  padding: 9px;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 82%, #fff);
}

.home-start-cross-world-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 2px 4px 4px;
}

.home-start-cross-world-head > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-start-cross-world-head strong {
  color: color-mix(in srgb, var(--accent) 78%, #fff);
  font-size: 0.86rem;
  line-height: 1.2;
}

.home-start-cross-world-head small {
  color: rgba(235, 235, 245, 0.7);
  font-size: 0.72rem;
  line-height: 1.28;
}

.home-start-cross-world-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.05));
  color: color-mix(in srgb, var(--accent) 86%, #fff);
}

.home-start-cross-world-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.home-start-cross-world-match > button {
  border-color: color-mix(in srgb, var(--accent) 26%, rgba(235, 235, 245, 0.1)) !important;
  background: color-mix(in srgb, var(--accent) 11%, rgba(255, 255, 255, 0.045)) !important;
}

.home-start-action-sheet .home-start-join-choice {
  margin-top: 10px;
  border-top-color: rgba(235, 235, 245, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
}

.home-start-audience-card {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 26%, var(--separator));
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent, var(--blue)) 15%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-elevated) 86%, transparent);
  padding: 12px;
}

.home-start-audience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.home-start-audience-card.has-selection {
  border-color: color-mix(in srgb, var(--home-audience-accent, var(--accent, var(--blue))) 34%, rgba(235, 235, 245, 0.15));
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--home-audience-accent, var(--accent, var(--blue))) 18%, transparent), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.028)),
    color-mix(in srgb, var(--surface-elevated) 88%, transparent);
}

.home-start-audience-card.has-selection::before {
  background: var(--home-audience-gradient, var(--accent, var(--blue)));
  opacity: 0.11;
}

.home-start-audience-card > * {
  position: relative;
  z-index: 1;
}

.home-start-audience-preview {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.home-start-audience-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 11%, rgba(255, 255, 255, 0.06));
}

.home-start-audience-card.has-selection .home-start-audience-icon {
  background:
    radial-gradient(circle at 48% 38%, color-mix(in srgb, var(--home-audience-accent, var(--accent, var(--blue))) 24%, transparent), transparent 62%),
    rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--home-audience-accent, var(--accent, var(--blue))) 22%, transparent);
}

.home-start-audience-icon .blend-rings {
  transform: scale(0.9);
  transform-origin: center;
}

.home-start-audience-preview > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-start-audience-preview small,
.home-start-audience-preview strong {
  min-width: 0;
  overflow: hidden;
}

.home-start-audience-preview small {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 760;
}

.home-start-audience-preview strong {
  display: -webkit-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 830;
  line-height: 1.12;
}

.home-start-audience-segments {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-start-audience-segments::-webkit-scrollbar {
  display: none;
}

.home-start-selected-segments {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  overflow: visible;
  padding-bottom: 0;
}

.home-start-selected-segments.is-count-1.can-add-blend {
  grid-template-columns: minmax(0, 1fr) auto;
}

.home-start-selected-segments.is-count-2 {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.home-start-selected-segments.is-count-2.can-add-blend {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.home-start-selected-segments.is-count-3 {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.home-start-audience-intersection {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-self: center;
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
}

.home-start-audience-chip,
.home-start-add-blend-chip,
.home-start-empty-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  max-width: 190px;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent, var(--blue))) 42%, var(--separator));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-color, var(--accent, var(--blue))) 15%, rgba(255, 255, 255, 0.055));
  color: var(--text);
  padding: 7px 9px;
  font-size: 0.79rem;
  font-weight: 780;
}

.home-start-selected-segments .home-start-audience-chip,
.home-start-selected-segments .home-start-add-blend-chip,
.home-start-selected-segments .home-start-empty-chip {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.home-start-audience-chip {
  cursor: pointer;
}

.home-start-audience-chip > span:last-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-start-audience-chip .ui-icon {
  width: 13px;
  height: 13px;
  color: color-mix(in srgb, var(--chip-color, var(--accent, var(--blue))) 70%, #fff);
}

.home-start-chip-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--chip-color, var(--accent, var(--blue)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color, var(--accent, var(--blue))) 18%, transparent);
}

.home-start-add-blend-chip {
  width: auto;
  max-width: 132px;
  justify-self: end;
  border-style: dashed;
  color: color-mix(in srgb, var(--accent, var(--blue)) 76%, #fff);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.home-start-add-blend-chip:hover,
.home-start-add-blend-chip:focus-visible {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 70%, #fff);
  background: color-mix(in srgb, var(--accent, var(--blue)) 22%, rgba(255, 255, 255, 0.06));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent);
}

.home-start-add-blend-chip:active {
  transform: scale(0.97);
}

.home-start-add-blend-chip .ui-icon {
  width: 15px;
  height: 15px;
}

.home-start-add-blend-chip.is-premium {
  --chip-color: #b9a7ee;
  color: color-mix(in srgb, #b9a7ee 84%, #fff);
}

.home-start-empty-chip {
  color: var(--muted);
}

@keyframes home-start-list-cue {
  0%,
  100% {
    box-shadow: none;
  }

  22% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--blue)) 62%, transparent),
      0 0 0 4px color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-start-action-sheet .home-start-community-list.is-cued {
    animation: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--blue)) 62%, transparent);
  }
}

.home-start-search-wrap {
  display: grid;
  min-height: 48px;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-elevated) 86%, transparent);
  padding: 0 10px;
}

.home-start-search-wrap > span {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.home-start-search-wrap .ui-icon {
  width: 18px;
  height: 18px;
}

.home-start-search-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.home-start-audience-empty {
  display: grid;
  gap: 5px;
  padding: 18px 14px;
  text-align: center;
}

.home-start-audience-empty strong {
  color: var(--text);
  font-size: 0.94rem;
}

.home-start-audience-empty span {
  color: var(--muted);
  font-size: 0.82rem;
}

.blend-joinable-recovery {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.home-start-community-list > .blend-joinable-recovery {
  padding: 8px;
}

.blend-joinable-recovery-head {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
}

.blend-joinable-recovery-head strong,
.blend-joinable-recovery-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blend-joinable-recovery-head strong {
  color: rgba(250, 251, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 900;
}

.blend-joinable-recovery-head small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.74rem;
  font-weight: 650;
}

.blend-joinable-choice {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 34%, rgba(235, 235, 245, 0.12)) !important;
}

.blend-joinable-choice[disabled] {
  cursor: progress;
  opacity: 0.78;
}

.blend-joinable-choice .sheet-row-action,
.blend-joinable-choice .row-action-text {
  white-space: nowrap;
}

.home-start-audience-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.home-start-audience-actions .secondary-btn,
.home-start-audience-actions .primary-btn {
  min-height: 48px;
}

.home-start-action-sheet .home-start-community-list button:first-child {
  border-left: 1px solid rgba(235, 235, 245, 0.09);
}

.home-start-action-sheet .home-start-community-list button > .ui-icon:first-child {
  width: 22px;
  height: 22px;
}

.home-start-action-sheet .sheet-community-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, rgba(255, 255, 255, 0.06));
  color: var(--accent, var(--blue));
}

.home-start-action-sheet .sheet-community-icon .ui-icon {
  width: 23px;
  height: 23px;
}

.home-start-action-sheet .home-start-community-list span {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: stretch;
  gap: 3px;
}

.home-start-action-sheet .home-start-community-list .sheet-community-icon {
  min-width: 44px;
  align-content: center;
  justify-items: center;
  place-items: center;
  gap: 0;
}

.home-start-action-sheet .home-start-community-list .sheet-community-icon .ui-icon {
  justify-self: center;
  align-self: center;
}

.home-start-action-sheet .home-start-community-list strong,
.home-start-action-sheet .home-start-community-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-start-action-sheet .home-start-community-list strong {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.14;
}

.home-start-action-sheet .home-start-community-list small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.15;
}

.home-start-action-sheet .home-start-community-list .sheet-row-action {
  display: inline-flex;
  min-width: 44px;
  justify-content: flex-end;
  color: var(--accent, var(--blue));
  font-size: 0.82rem;
  font-weight: 800;
}

.action-sheet .sheet-cancel {
  display: none;
}

.trust-help-sheet .sheet-action-list {
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--separator);
  background: var(--surface);
}

.trust-help-sheet .sheet-action-list button,
.trust-help-sheet .sheet-action-list button:first-child {
  min-height: 64px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  justify-items: stretch;
  border-left: 0;
  border-bottom: 1px solid var(--separator);
  padding: 10px 12px;
  text-align: left;
}

.trust-help-sheet .sheet-action-list button:last-child {
  border-bottom: 0;
}

.trust-help-sheet .sheet-action-list button > .ui-icon:first-child {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-elevated));
  color: var(--blue);
  padding: 8px;
}

.trust-help-sheet .sheet-action-list span {
  justify-items: start;
}

.trust-help-sheet .sheet-action-list strong {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 760;
}

.trust-help-sheet .sheet-action-list small {
  overflow: visible;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: clip;
  white-space: normal;
}

.trust-help-sheet .sheet-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sign-out-confirm-sheet {
  grid-template-rows: auto auto auto;
  gap: 14px;
}

.sign-out-confirm-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 720;
  line-height: 1.35;
  text-align: center;
}

.sign-out-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sign-out-confirm-btn {
  background: var(--danger);
  color: #fff;
}

.sign-out-confirm-btn:hover,
.sign-out-confirm-btn:focus-visible {
  background: color-mix(in srgb, var(--danger) 88%, #fff);
}

.community-mute-sheet {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: min(76dvh, 680px);
}

.community-mute-title small {
  max-width: 320px;
  justify-self: center;
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  font-weight: 620;
  line-height: 1.32;
}

.community-mute-list {
  display: grid;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.community-mute-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  border: 0;
  border-bottom: 1px solid rgba(235, 235, 245, 0.09);
  background: transparent;
  color: rgba(235, 235, 245, 0.78);
  cursor: pointer;
  padding: 12px;
  text-align: left;
}

.community-mute-row:last-child {
  border-bottom: 0;
}

.community-mute-row:hover,
.community-mute-row:focus-visible {
  background: color-mix(in srgb, var(--accent, var(--blue)) 11%, transparent);
  outline: 0;
}

.community-mute-row.is-saving {
  cursor: default;
  opacity: 0.68;
}

.community-mute-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, rgba(255, 255, 255, 0.05));
  color: var(--accent, var(--blue));
}

.community-mute-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.community-mute-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.community-mute-copy strong {
  overflow: hidden;
  color: rgba(250, 251, 255, 0.95);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-mute-copy small {
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.78rem;
  font-weight: 620;
  line-height: 1.24;
}

.community-mute-sheet .community-mute-done {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(250, 251, 255, 0.94);
  font-weight: 780;
}

.community-mute-sheet .community-mute-done:focus-visible,
.community-mute-sheet .community-mute-done:hover {
  background: rgba(255, 255, 255, 0.12);
  outline: 0;
}

@media (max-width: 420px) {
  .community-mute-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 10px;
  }

  .community-mute-copy small {
    overflow-wrap: anywhere;
  }
}

.browse-search-field,
.browse-search-results,
.sheet-community-row,
.sheet-suggest-row {
  border-radius: 16px;
}

.browse-search-row,
.sheet-community-row,
.sheet-suggest-row {
  min-height: 66px;
}

.browse-search-icon,
.sheet-row-icon {
  border-radius: 50%;
}

@media (max-width: 380px) {
  .world-page .page-header.topbar {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
  }

  .world-page .circle-btn {
    width: 50px;
    height: 50px;
  }

  .world-page .circle-btn::before {
    width: 46px;
    height: 46px;
  }

  .world-page .community-row-card {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .world-page .world-community-search {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 6px 10px;
  }

  .world-page .world-community-search small {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .world-page .community-row-main {
    grid-template-columns: 62px minmax(0, 1fr) 22px;
    gap: 10px;
    padding-left: 18px;
  }

  .world-page .community-glyph {
    width: 52px;
    height: 52px;
  }

  .world-page .community-name {
    font-size: 1.08rem;
  }

  .world-page .row-intent-button {
    width: 50px;
    height: 50px;
  }
}

/* v43: app-wide glass consistency pass */
.app-shell {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1f2a;
  --surface-elevated: #242838;
  --surface-soft: #05070d;
  --fill: rgba(255, 255, 255, 0.055);
  --line: #38383a;
  --separator: rgba(235, 235, 245, 0.14);
  --text: #f7f7fb;
  --muted: rgba(235, 235, 245, 0.66);
  --faint: rgba(235, 235, 245, 0.52);
  --nav: rgba(18, 22, 31, 0.76);
  --bar-bg: rgba(18, 22, 31, 0.76);
  --sheet-bg: rgba(18, 22, 31, 0.92);
  --blue-soft: rgba(10, 132, 255, 0.18);
  --page: var(--surface-soft);
  --card: var(--surface);
  background:
    radial-gradient(circle at 50% -14%, rgba(120, 90, 255, 0.16), transparent 34%),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.055), transparent 30%),
    radial-gradient(circle at 86% 44%, rgba(10, 132, 255, 0.09), transparent 34%),
    #04060a;
  --dock-side: max(16px, calc((100vw - 460px) / 2 + 16px));
  --dock-bottom: calc(112px + env(safe-area-inset-bottom));
  --dock-page-padding: calc(188px + env(safe-area-inset-bottom));
}

.composer-dock-layer {
  position: fixed;
  right: var(--dock-side);
  bottom: var(--dock-bottom);
  left: var(--dock-side);
  z-index: 9;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.composer-dock-layer > [data-docked-composer] {
  position: static;
  inset: auto;
  width: 100%;
  margin: 0;
  pointer-events: auto;
}

.app-shell .page:not(.world-page) {
  position: relative;
  isolation: isolate;
  padding: 0 14px 18px;
  background:
    radial-gradient(circle at 50% -12%, rgba(120, 90, 255, 0.12), transparent 34%),
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.05), transparent 30%),
    linear-gradient(180deg, #080c13 0%, #05070d 44%, #04060a 100%);
  color: #f7f7fb;
}

.app-shell .page:not(.world-page) .page-header.topbar {
  min-height: 74px;
  margin: 0 -2px 12px;
  padding: max(14px, env(safe-area-inset-top)) 0 6px;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, 0.84), rgba(5, 7, 13, 0.48) 70%, transparent);
  backdrop-filter: blur(24px) saturate(1.25);
}

.app-shell .page:not(.world-page) .topbar-title {
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.app-shell .page:not(.world-page) .page-title,
.app-shell .page:not(.world-page) .page-title.left {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 1.18rem;
  font-weight: 820;
  line-height: 1.08;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
}

.app-shell .home-page .page-title {
  font-size: clamp(1.34rem, 5.4vw, 1.76rem);
}

.app-shell .page:not(.world-page) .topbar-title small {
  max-width: 230px;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.82rem;
  font-weight: 620;
}

.app-shell .page:not(.world-page) .circle-btn,
.app-shell .page:not(.world-page) .header-notification-btn,
.app-shell .page:not(.world-page) .header-avatar-btn {
  width: 48px;
  height: 48px;
}

.app-shell .page:not(.world-page) .circle-btn,
.app-shell .page:not(.world-page) .header-notification-btn {
  border-color: rgba(235, 235, 245, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(24, 27, 37, 0.74);
  color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(1.3);
}

.app-shell .page:not(.world-page) .circle-btn .ui-icon,
.app-shell .page:not(.world-page) .header-notification-btn .ui-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.35;
}

.app-shell .page:not(.world-page) .header-notification-btn.has-unread {
  border-color: color-mix(in srgb, var(--blue) 48%, rgba(235, 235, 245, 0.16));
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(24, 27, 37, 0.78);
}

.app-shell .page:not(.world-page) .header-notification-count {
  top: 1px;
  right: 0;
  border-color: #050608;
}

.app-shell .page:not(.world-page) .header-avatar {
  width: 40px;
  height: 40px;
  border-color: rgba(235, 235, 245, 0.18);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.065);
}

.app-shell .page:not(.world-page) .header-avatar-btn.has-attention::before {
  inset: 0;
  border-color: color-mix(in srgb, var(--blue) 86%, rgba(235, 235, 245, 0.2));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--blue) 38%, transparent),
    0 0 20px color-mix(in srgb, var(--blue) 46%, transparent),
    0 10px 24px color-mix(in srgb, var(--blue) 18%, transparent);
}

.app-shell .page:not(.world-page) .header-avatar-btn.has-attention .header-avatar {
  border-color: color-mix(in srgb, var(--blue) 90%, rgba(235, 235, 245, 0.18));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 42%, transparent),
    0 0 0 8px color-mix(in srgb, var(--blue) 16%, transparent),
    0 12px 30px color-mix(in srgb, var(--blue) 26%, transparent);
}

.app-shell .page:not(.world-page) .brand-mark {
  width: 44px;
  height: 44px;
  border-color: rgba(235, 235, 245, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-shell .page:not(.world-page) .brand-mark-btn:focus-visible {
  outline-color: rgba(10, 132, 255, 0.84);
}

.app-shell .home-page .page-header.topbar {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.app-shell .home-page .topbar-title {
  justify-items: start;
  text-align: left;
}

.app-shell .home-page .page-title {
  text-align: left;
}

.app-shell .home-page .topbar-title small {
  max-width: 100%;
}

.app-shell .home-page.home-page-empty .circle-btn,
.app-shell .home-page.home-page-empty .header-notification-btn,
.app-shell .home-page.home-page-empty .header-avatar-btn {
  width: 44px;
  height: 44px;
}

.app-shell .home-page.home-page-empty .circle-btn,
.app-shell .home-page.home-page-empty .header-notification-btn {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(24, 27, 37, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.app-shell .home-page.home-page-empty .header-avatar {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.055);
}

.app-shell .bottom-nav {
  width: auto;
  min-height: 78px;
  margin: 8px 12px 12px;
  padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px);
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(18, 22, 31, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(26px) saturate(1.28);
}

.app-shell .bottom-nav .nav-item {
  min-height: 58px;
  border-radius: 14px;
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.91rem;
}

.app-shell .bottom-nav .nav-item.active {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--nav-accent, var(--blue)) 34%, transparent), transparent 48%),
    color-mix(in srgb, var(--nav-accent, var(--blue)) 18%, rgba(255, 255, 255, 0.06));
  color: var(--nav-accent, var(--blue));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-accent, var(--blue)) 22%, transparent);
}

.app-shell .bottom-nav.is-blend-context .nav-item.active {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.095), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.036)),
    rgba(16, 20, 30, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.app-shell .bottom-nav.is-blend-context .nav-item.active::before {
  content: "";
  position: absolute;
  inset: -18px -12px -6px;
  border-radius: inherit;
  background: var(--nav-accent-gradient);
  opacity: 0.26;
  filter: blur(14px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 24%, #000 0%, rgba(0, 0, 0, 0.7) 28%, rgba(0, 0, 0, 0.24) 52%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 24%, #000 0%, rgba(0, 0, 0, 0.7) 28%, rgba(0, 0, 0, 0.24) 52%, transparent 72%);
  pointer-events: none;
}

.app-shell .bottom-nav.is-blend-context .nav-item.active > * {
  position: relative;
  z-index: 1;
}

.app-shell .bottom-nav.is-blend-context .nav-item.active .nav-icon {
  color: #fff;
}

.app-shell .bottom-nav .nav-icon .ui-icon {
  width: 25px;
  height: 25px;
}

.app-shell .page:not(.world-page) .world-card,
.app-shell .page:not(.world-page) .home-activity-card,
.app-shell .page:not(.world-page) .home-favorite-card,
.app-shell .page:not(.world-page) .home-favorite-list-card,
.app-shell .page:not(.world-page) .home-start-btn,
.app-shell .page:not(.world-page) .home-explore-card,
.app-shell .page:not(.world-page) .community-room,
.app-shell .page:not(.world-page) .feed-card,
.app-shell .page:not(.world-page) .form-card,
.app-shell .page:not(.world-page) .detail-post-card,
.app-shell .page:not(.world-page) .detail-info-item,
.app-shell .page:not(.world-page) .event-rsvp-card,
.app-shell .page:not(.world-page) .event-checkin-card,
.app-shell .page:not(.world-page) .event-bring-card,
.app-shell .page:not(.world-page) .event-chat-card,
.app-shell .page:not(.world-page) .comment-list,
.app-shell .page:not(.world-page) .comment-composer,
.app-shell .composer-dock-layer > .comment-composer,
.app-shell .page:not(.world-page) .profile-card,
.app-shell .page:not(.world-page) .profile-tile,
.app-shell .page:not(.world-page) .profile-setting-row,
.app-shell .page:not(.world-page) .profile-item,
.app-shell .page:not(.world-page) .badge-card,
.app-shell .page:not(.world-page) .course-search-card,
.app-shell .page:not(.world-page) .course-result-row,
.app-shell .page:not(.world-page) .chat-row,
.app-shell .page:not(.world-page) .thread-context,
.app-shell .page:not(.world-page) .message-sheet-context,
.app-shell .page:not(.world-page) .empty-state,
.browse-search-card,
.browse-search-field,
.browse-search-results,
.add-community-sheet,
.message-sheet,
.action-sheet {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.026)),
    rgba(18, 22, 32, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(26px) saturate(1.24);
}

.app-shell .page:not(.world-page) .home-activity-card.is-unread {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 46%, rgba(235, 235, 245, 0.12));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent), transparent 54%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.26);
}

.app-shell .page:not(.world-page) .feed-card.is-unread {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 44%, rgba(235, 235, 245, 0.12));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 15%, transparent), transparent 56%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.78);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--accent, var(--blue)) 82%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.26);
}

.app-shell .page.blend-community-page:not(.world-page) .community-feed-list .feed-card.intent-card {
  position: relative;
  overflow: hidden;
}

.app-shell .page.blend-community-page:not(.world-page) .community-feed-list .feed-card.intent-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 18px 0 0 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.08)),
    var(--blend-gradient);
  opacity: 0.72;
  filter: saturate(0.92);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent),
    0 0 34px rgba(167, 139, 250, 0.08);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
}

.app-shell .page.blend-community-page:not(.world-page) .community-feed-list .feed-card.intent-card .feed-title,
.app-shell .page.blend-community-page:not(.world-page) .community-feed-list .feed-card.intent-card .feed-card-side {
  position: relative;
  z-index: 1;
}

.app-shell .page:not(.world-page) .world-card,
.app-shell .page:not(.world-page) .home-activity-card,
.app-shell .page:not(.world-page) .home-favorite-card,
.app-shell .page:not(.world-page) .home-favorite-list-card,
.app-shell .page:not(.world-page) .home-start-btn,
.app-shell .page:not(.world-page) .home-explore-card,
.app-shell .page:not(.world-page) .feed-card,
.app-shell .page:not(.world-page) .detail-info-item,
.app-shell .page:not(.world-page) .event-checkin-card,
.app-shell .page:not(.world-page) .event-bring-card,
.app-shell .page:not(.world-page) .event-chat-card,
.app-shell .page:not(.world-page) .profile-card,
.app-shell .page:not(.world-page) .profile-tile,
.app-shell .page:not(.world-page) .profile-setting-row,
.app-shell .page:not(.world-page) .notification-inbox-row,
.app-shell .page:not(.world-page) .chat-row,
.app-shell .page:not(.world-page) .empty-state {
  border-radius: 18px;
}

.app-shell .page:not(.world-page) .home-favorite-remove-btn {
  border-left-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(255, 69, 58, 0.12);
  color: #ff8a80;
}

.app-shell .page:not(.world-page) .world-card {
  min-height: 146px;
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 20%, rgba(235, 235, 245, 0.12));
  background:
    radial-gradient(circle at 24% 8%, color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.026)),
    rgba(18, 22, 32, 0.76) !important;
}

.app-shell .page:not(.world-page).for-you-page .co-creator-prompt.profile-card {
  border-color: color-mix(in srgb, #38c7bd 34%, rgba(235, 235, 245, 0.16)) !important;
  background:
    radial-gradient(circle at 13% 18%, rgba(56, 199, 189, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(20, 30, 48, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 44px rgba(56, 199, 189, 0.11) !important;
}

.app-shell .page:not(.world-page).for-you-page {
  color-scheme: dark;
  --surface: #1c1f2a;
  --surface-elevated: #242838;
  --surface-soft: #05070d;
  --fill: rgba(255, 255, 255, 0.055);
  --separator: rgba(235, 235, 245, 0.14);
  --text: #f7f7fb;
  --muted: rgba(235, 235, 245, 0.66);
  --faint: rgba(235, 235, 245, 0.52);
  --blue-soft: rgba(10, 132, 255, 0.18);
}

.app-shell .page:not(.world-page).for-you-page .for-you-suggestion-head h2,
.app-shell .page:not(.world-page).for-you-page .for-you-suggestion-copy strong {
  color: #ffffff;
}

.app-shell .page:not(.world-page).for-you-page .for-you-suggestion-head p,
.app-shell .page:not(.world-page).for-you-page .for-you-suggestion-copy small {
  color: rgba(235, 235, 245, 0.66);
}

.app-shell .page:not(.world-page).for-you-page .for-you-suggestion-row {
  border-color: rgba(235, 235, 245, 0.11);
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--accent, var(--blue)) 12%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.026)),
    rgba(18, 22, 32, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-shell .page:not(.world-page).for-you-page .for-you-suggestion-icon {
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 26%, rgba(235, 235, 245, 0.1));
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--accent, var(--blue)) 20%, transparent), transparent 48%),
    rgba(255, 255, 255, 0.05);
  color: color-mix(in srgb, var(--accent, var(--blue)) 86%, #ffffff);
}

.app-shell .page:not(.world-page).for-you-page .secondary-btn.for-you-add-btn {
  border-color: color-mix(in srgb, var(--blue) 34%, rgba(235, 235, 245, 0.16));
  background: color-mix(in srgb, var(--blue) 15%, rgba(255, 255, 255, 0.06));
  color: color-mix(in srgb, var(--blue) 82%, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-shell .page:not(.world-page).for-you-page .secondary-btn.for-you-add-btn:hover,
.app-shell .page:not(.world-page).for-you-page .secondary-btn.for-you-add-btn:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 54%, rgba(235, 235, 245, 0.2));
  background: color-mix(in srgb, var(--blue) 22%, rgba(255, 255, 255, 0.08));
  color: #ffffff;
}

.app-shell .page:not(.world-page).for-you-page .secondary-btn.for-you-add-btn:active {
  transform: translateY(1px);
}

.app-shell .page:not(.world-page).for-you-page .for-you-completed-row {
  border-color: rgba(235, 235, 245, 0.08);
  background: rgba(18, 22, 32, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.app-shell .page:not(.world-page) .world-card.wide {
  min-height: 126px;
}

.app-shell .page:not(.world-page) .world-card .world-art,
.app-shell .page:not(.world-page) .home-activity-icon,
.app-shell .page:not(.world-page) .home-favorite-icon,
.app-shell .page:not(.world-page) .feed-icon,
.app-shell .page:not(.world-page) .community-room-icon,
.app-shell .page:not(.world-page) .profile-setting-icon,
.app-shell .page:not(.world-page) .notification-inbox-mark,
.app-shell .page:not(.world-page) .notification-inbox-icon,
.app-shell .page:not(.world-page) .profile-tile .tile-icon,
.app-shell .page:not(.world-page) .browse-search-icon,
.app-shell .page:not(.world-page) .sheet-row-icon,
.app-shell .page:not(.world-page) .course-search-icon,
.app-shell .page:not(.world-page) .course-result-mark {
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent, var(--blue)) 22%, transparent), transparent 47%),
    rgba(255, 255, 255, 0.045);
  color: color-mix(in srgb, var(--accent, var(--blue)) 86%, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-shell .page:not(.world-page) h1,
.app-shell .page:not(.world-page) h2,
.app-shell .page:not(.world-page) strong,
.app-shell .page:not(.world-page) .world-label,
.app-shell .page:not(.world-page) .home-activity-copy strong,
.app-shell .page:not(.world-page) .home-favorite-card strong,
.app-shell .page:not(.world-page) .home-explore-card strong,
.app-shell .page:not(.world-page) .home-start-btn,
.app-shell .page:not(.world-page) .feed-title,
.app-shell .page:not(.world-page) .feed-title strong,
.app-shell .page:not(.world-page) .chat-name,
.app-shell .page:not(.world-page) .profile-nickname,
.app-shell .page:not(.world-page) .profile-setting-copy strong,
.app-shell .page:not(.world-page) .notification-inbox-settings-row strong,
.app-shell .page:not(.world-page) .notification-inbox-empty strong,
.app-shell .page:not(.world-page) .notification-inbox-copy strong,
.app-shell .page:not(.world-page) .profile-item-title,
.app-shell .page:not(.world-page) .detail-post-card h2,
.app-shell .page:not(.world-page) .detail-body,
.app-shell .page:not(.world-page) .comment-row strong {
  color: #fff;
}

.app-shell .page:not(.world-page) small,
.app-shell .page:not(.world-page) p,
.app-shell .page:not(.world-page) .world-card small,
.app-shell .page:not(.world-page) .home-activity-copy span,
.app-shell .page:not(.world-page) .home-favorite-card small,
.app-shell .page:not(.world-page) .feed-title small,
.app-shell .page:not(.world-page) .chat-preview,
.app-shell .page:not(.world-page) .profile-email,
.app-shell .page:not(.world-page) .profile-school,
.app-shell .page:not(.world-page) .profile-setting-copy small,
.app-shell .page:not(.world-page) .notification-inbox-settings-row small,
.app-shell .page:not(.world-page) .notification-inbox-copy small,
.app-shell .page:not(.world-page) .notification-inbox-copy em,
.app-shell .page:not(.world-page) .profile-item-sub,
.app-shell .page:not(.world-page) .detail-author-copy small,
.app-shell .page:not(.world-page) .comment-author-line small {
  color: rgba(235, 235, 245, 0.66);
}

.app-shell .page:not(.world-page) .event-bring-empty,
.app-shell .page:not(.world-page) .event-bring-locked,
.app-shell .page:not(.world-page) .event-chat-empty,
.app-shell .page:not(.world-page) .event-chat-locked,
.app-shell .page:not(.world-page) .event-bring-composer,
.app-shell .page:not(.world-page) .event-chat-composer {
  border-color: rgba(235, 235, 245, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(235, 235, 245, 0.68);
}

.app-shell .page:not(.world-page) .home-activity-blend-context {
  color: rgba(235, 235, 245, 0.7);
  overflow: visible;
  white-space: normal;
}

.app-shell .page:not(.world-page) .home-activity-blend-strip {
  overflow: visible;
  white-space: normal;
}

.app-shell .page:not(.world-page) .home-activity-blend-chip {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--chip-color) 86%, #fff);
}

.app-shell .page:not(.world-page) .home-activity-blend-chip span {
  color: inherit;
}

.app-shell .page:not(.world-page) .home-activity-blend-intersection {
  color: rgba(235, 235, 245, 0.56);
}

.app-shell .page:not(.world-page) .home-activity-kind-pill {
  color: rgba(245, 245, 247, 0.74);
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend {
  position: relative;
  overflow: hidden;
  border-color: rgba(235, 235, 245, 0.14);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.028)),
    rgba(18, 22, 32, 0.78);
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 18px 0 0 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.08)),
    var(--blend-gradient, var(--accent, var(--blue)));
  opacity: 0.72;
  filter: saturate(0.92);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent),
    0 0 34px rgba(167, 139, 250, 0.08);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend::after {
  content: "";
  position: absolute;
  inset: -28px -38px auto 30px;
  height: 118px;
  border-radius: 999px;
  background: var(--blend-gradient, var(--accent, var(--blue)));
  opacity: 0.09;
  filter: blur(24px) saturate(0.92);
  -webkit-mask-image: radial-gradient(ellipse at 40% 20%, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 74%);
  mask-image: radial-gradient(ellipse at 40% 20%, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 74%);
  pointer-events: none;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-main {
  position: relative;
  z-index: 1;
  padding-left: 20px;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-icon.is-audience-icon {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.09), transparent 44%),
    rgba(255, 255, 255, 0.048);
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-copy {
  gap: 5px;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-blend-context,
.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-blend-strip {
  max-width: 100%;
  overflow: visible;
  white-space: normal;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-blend-strip {
  gap: 5px 6px;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-blend-chip {
  min-height: 22px;
  max-width: var(--chip-max, 126px);
  border: 1px solid color-mix(in srgb, var(--chip-color) 38%, rgba(235, 235, 245, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-color) 15%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--chip-color) 78%, #fff);
  padding: 2px 8px 2px 7px;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.1;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-blend-dot {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--chip-color) 50%, transparent);
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-blend-intersection {
  display: inline-grid;
  width: 14px;
  place-items: center;
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.8rem;
  font-weight: 860;
  transform: translateY(-1px);
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-title-line {
  gap: 8px;
}

.app-shell .page:not(.world-page) .home-activity-card.is-blend .home-activity-kind-pill {
  border-color: rgba(235, 235, 245, 0.14);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(245, 245, 247, 0.78);
}

.app-shell .page:not(.world-page) .home-activity-audience-context {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.app-shell .page:not(.world-page) .home-activity-audience-context.is-scrollable:not(.is-at-start)::before,
.app-shell .page:not(.world-page) .home-activity-audience-context.is-scrollable:not(.is-at-end)::after {
  opacity: 1;
}

.app-shell .page:not(.world-page) .home-activity-audience-strip {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.app-shell .page:not(.world-page) .home-activity-audience-chip {
  border-color: color-mix(in srgb, var(--chip-color) 36%, rgba(235, 235, 245, 0.12));
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--chip-color) 18%, transparent), transparent 58%),
    color-mix(in srgb, var(--chip-color) 13%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--chip-color) 78%, #fff);
}

.app-shell .page:not(.world-page) .home-activity-audience-chip span {
  color: inherit;
}

.app-shell .page:not(.world-page) .home-activity-audience-intersection {
  color: rgba(235, 235, 245, 0.58);
}

.app-shell .page:not(.world-page) .event-bring-empty strong,
.app-shell .page:not(.world-page) .event-chat-empty strong {
  color: #fff;
}

.app-shell .page:not(.world-page) .event-chat-bubble {
  background: rgba(255, 255, 255, 0.075);
}

.app-shell .page:not(.world-page) .event-chat-message.mine .event-chat-bubble {
  background: color-mix(in srgb, var(--blue) 24%, rgba(255, 255, 255, 0.075));
}

.app-shell .page:not(.world-page) .event-chat-line strong,
.app-shell .page:not(.world-page) .event-chat-bubble p {
  color: #fff;
}

.app-shell .page:not(.world-page) .event-chat-line small {
  color: rgba(235, 235, 245, 0.68);
}

.app-shell .page:not(.world-page) .event-chat-list {
  border-color: rgba(235, 235, 245, 0.11);
  background: rgba(5, 9, 18, 0.24);
}

.app-shell .page:not(.world-page) .event-chat-more-row {
  border-color: rgba(235, 235, 245, 0.11);
  background: rgba(10, 132, 255, 0.16);
}

.app-shell .page:not(.world-page) .event-chat-more-row > span {
  background: rgba(10, 132, 255, 0.18);
}

.app-shell .page:not(.world-page) .event-chat-more-row strong {
  color: #fff;
}

.app-shell .page:not(.world-page) .event-chat-more-row small {
  color: rgba(235, 235, 245, 0.68);
}

.app-shell .page:not(.world-page) .event-bring-locked .ui-icon,
.app-shell .page:not(.world-page) .event-chat-locked .ui-icon {
  color: rgba(235, 235, 245, 0.52);
}

.app-shell .page:not(.world-page) .home-section-head h2,
.app-shell .page:not(.world-page) .chat-list h2,
.app-shell .page:not(.world-page) .comments-head h2 {
  color: #fff;
  font-weight: 820;
}

.app-shell .page:not(.world-page) .home-section-head button,
.app-shell .page:not(.world-page) .feed-sort-btn,
.app-shell .page:not(.world-page) .detail-calendar-btn,
.app-shell .page:not(.world-page) .detail-message-link,
.app-shell .page:not(.world-page) .profile-token-line strong {
  color: var(--blue);
}

.app-shell .page:not(.world-page) .field,
.app-shell .page:not(.world-page) .text-field,
.app-shell .page:not(.world-page) .select-field,
.app-shell .page:not(.world-page) .search-field,
.app-shell .page:not(.world-page) .picker-input,
.app-shell .page:not(.world-page) textarea,
.app-shell .page:not(.world-page) .message-sheet-composer,
.app-shell .page:not(.world-page) .thread .composer,
.app-shell .composer-dock-layer > .event-chat-composer[data-docked-composer],
.app-shell > .comment-composer[data-docked-composer],
.app-shell > .composer[data-docked-composer],
.app-shell .composer-dock-layer > .comment-composer[data-docked-composer],
.app-shell .composer-dock-layer > .composer[data-docked-composer],
.app-shell .page:not(.world-page) .browse-search-field,
.app-shell .page:not(.world-page) .home-list-search-wrap,
.app-shell .page:not(.world-page) .home-list-type-filter,
.app-shell .page:not(.world-page) .home-list-unread-toggle,
.add-community-sheet .sheet-search-wrap {
  border-color: rgba(235, 235, 245, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.app-shell .page:not(.world-page) .home-list-type-filter.is-active,
.app-shell .page:not(.world-page) .home-list-unread-toggle.is-active,
.app-shell .page:not(.world-page) .home-list-unread-toggle[aria-pressed="true"] {
  border-color: rgba(235, 235, 245, 0.42);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.app-shell .page:not(.world-page) .home-list-segmented .home-list-type-filter {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(235, 235, 245, 0.64);
  padding: 0 3px;
  font-size: 0.72rem;
  font-weight: 690;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
}

.app-shell .page:not(.world-page) .home-list-segmented .home-list-type-filter.is-active {
  background:
    radial-gradient(circle at 50% 16%, rgba(10, 132, 255, 0.25), transparent 58%),
    rgba(10, 132, 255, 0.12);
  color: #fff;
  font-weight: 760;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.13);
}

.app-shell .page:not(.world-page) .chat-search-field {
  border-color: rgba(235, 235, 245, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(235, 235, 245, 0.64);
}

.app-shell .page:not(.world-page) .chat-search-field:focus-within {
  border-color: rgba(10, 132, 255, 0.58);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.app-shell .page:not(.world-page) .chat-search-field .search-field {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  margin: 0;
  padding: 0;
}

.app-shell select,
.app-shell .select-field {
  color-scheme: dark;
}

.app-shell select option,
.app-shell select optgroup,
.app-shell .select-field option,
.app-shell .select-field optgroup {
  background-color: #171b25;
  color: rgba(245, 247, 255, 0.96);
}

.app-shell select option:checked,
.app-shell select option:hover,
.app-shell .select-field option:checked,
.app-shell .select-field option:hover {
  background-color: #0a84ff;
  color: #ffffff;
}

.app-shell select option:disabled,
.app-shell select optgroup:disabled,
.app-shell .select-field option:disabled,
.app-shell .select-field optgroup:disabled {
  background-color: #171b25;
  color: rgba(235, 235, 245, 0.48);
}

.app-shell .page:not(.world-page) .browse-search-field {
  box-shadow: none;
  backdrop-filter: none;
}

.app-shell .page:not(.world-page) .browse-search-field:focus-within {
  border-color: rgba(10, 132, 255, 0.58);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.app-shell .page:not(.world-page) .browse-search-card.is-focus-cued .browse-search-field {
  border-color: rgba(10, 132, 255, 0.72);
  background: rgba(10, 132, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

.app-shell .page:not(.world-page) input::placeholder,
.app-shell .page:not(.world-page) textarea::placeholder,
.app-shell > [data-docked-composer] input::placeholder,
.app-shell .composer-dock-layer > [data-docked-composer] input::placeholder,
.add-community-sheet input::placeholder,
.message-sheet input::placeholder {
  color: rgba(235, 235, 245, 0.48);
}

.app-shell .page:not(.world-page) .primary-btn,
.add-community-sheet .primary-btn,
.message-sheet .primary-btn {
  border: 1px solid color-mix(in srgb, var(--blue) 62%, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, #fff 8%), color-mix(in srgb, var(--blue) 66%, #142a66));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 36px rgba(10, 132, 255, 0.16);
}

.app-shell .page:not(.world-page) .secondary-btn,
.add-community-sheet .secondary-btn,
.message-sheet .secondary-btn {
  border-color: rgba(235, 235, 245, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.app-shell .page:not(.world-page) .segmented {
  border-color: rgba(235, 235, 245, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.app-shell .page:not(.world-page) .segmented button {
  color: rgba(235, 235, 245, 0.62);
}

.app-shell .page:not(.world-page) .segmented button.is-active {
  background:
    radial-gradient(circle at 50% 18%, rgba(10, 132, 255, 0.28), transparent 52%),
    rgba(10, 132, 255, 0.16);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.24);
}

.app-shell .page:not(.world-page) .intent-compose-button {
  border-color: rgba(235, 235, 245, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.app-shell .page:not(.world-page) .intent-compose-button > .ui-icon {
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 16%, rgba(255, 255, 255, 0.06));
}

.app-shell .page:not(.world-page) .blend-community-room .intent-compose-button.is-blend-compose {
  position: relative;
  overflow: hidden;
  border-color: rgba(235, 235, 245, 0.14);
  background:
    radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--accent, var(--blue)) 12%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.028)),
    rgba(18, 22, 32, 0.82);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 26px rgba(0, 0, 0, 0.18);
}

.app-shell .page:not(.world-page) .blend-community-room .intent-compose-button.is-blend-compose::before {
  content: "";
  position: absolute;
  inset: -24px -24px -20px -18px;
  background: var(--blend-gradient);
  opacity: 0.28;
  filter: blur(18px);
  -webkit-mask-image: radial-gradient(ellipse at 15% 50%, #000 0%, rgba(0, 0, 0, 0.68) 28%, rgba(0, 0, 0, 0.22) 52%, transparent 74%);
  mask-image: radial-gradient(ellipse at 15% 50%, #000 0%, rgba(0, 0, 0, 0.68) 28%, rgba(0, 0, 0, 0.22) 52%, transparent 74%);
  pointer-events: none;
}

.app-shell .page:not(.world-page) .blend-community-room .intent-compose-button.is-blend-compose > * {
  position: relative;
  z-index: 1;
}

.app-shell .page:not(.world-page) .blend-community-room .intent-compose-button.is-blend-compose > .ui-icon {
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.18), transparent 42%),
    radial-gradient(circle at 52% 60%, color-mix(in srgb, var(--accent, var(--blue)) 28%, transparent), transparent 54%),
    rgba(255, 255, 255, 0.075);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 18px color-mix(in srgb, var(--accent, var(--blue)) 16%, transparent);
}

.app-shell .page:not(.world-page) .blend-community-room .intent-compose-button.is-blend-compose strong,
.app-shell .page:not(.world-page) .blend-community-room .intent-compose-button.is-blend-compose small {
  color: #fff;
}

.app-shell .page:not(.world-page) .blend-community-room .intent-compose-button.is-blend-compose small {
  opacity: 0.78;
}

.app-shell .page.blend-community-page:not(.world-page) .page-title {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 0 16px color-mix(in srgb, var(--accent, var(--blue)) 26%, transparent),
    0 0 28px rgba(167, 139, 250, 0.12);
}

.app-shell .page:not(.world-page) .form-card label,
.app-shell .page:not(.world-page) .form-card label > span,
.app-shell .page:not(.world-page) .composer-card label > span,
.app-shell .page:not(.world-page) .composer-card .composer-field-group > span,
.app-shell .page:not(.world-page) .composer-guidance,
.app-shell .page:not(.world-page) .composer-guidance span,
.app-shell .page:not(.world-page) .optional-label {
  color: rgba(235, 235, 245, 0.66);
}

.app-shell .page:not(.world-page) .composer-context,
.app-shell .page:not(.world-page) .composer-context-subtle {
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.045);
  color: #fff;
}

.app-shell .page:not(.world-page) .composer-context span,
.app-shell .page:not(.world-page) .composer-context-subtle span {
  color: var(--blue);
}

.app-shell .page:not(.world-page) .composer-context strong,
.app-shell .page:not(.world-page) .composer-context-subtle strong {
  color: #fff;
}

.app-shell .page:not(.world-page) .comment-composer[data-docked-composer],
.app-shell .page:not(.world-page) .comment-composer.is-docked,
.app-shell > .comment-composer[data-docked-composer],
.app-shell > .comment-composer.is-docked {
  position: fixed;
  top: auto;
  right: var(--dock-side);
  bottom: var(--dock-bottom);
  left: var(--dock-side);
  z-index: 9;
  margin-top: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.32);
}

.app-shell .composer-dock-layer > .comment-composer.is-docked,
.app-shell .composer-dock-layer > .event-chat-composer.is-docked,
.app-shell .composer-dock-layer > .composer.is-docked {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.32);
}

.app-shell .page:not(.world-page) .thread .composer[data-docked-composer],
.app-shell .page:not(.world-page) .thread .composer.is-docked,
.app-shell > .composer[data-docked-composer],
.app-shell > .composer.is-docked {
  position: fixed;
  right: var(--dock-side);
  bottom: var(--dock-bottom);
  left: var(--dock-side);
  z-index: 9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.32);
}

.app-shell .page:not(.world-page):has([data-docked-composer]),
.app-shell .page:not(.world-page).has-docked-composer {
  padding-bottom: var(--dock-page-padding);
}

.app-shell .page:not(.world-page) .thread:has(.composer) .message-stack {
  padding-bottom: 120px;
}

.app-shell .page:not(.world-page).has-docked-composer .message-stack {
  padding-bottom: 120px;
}

.app-shell .page:not(.world-page).has-docked-composer .event-chat-thread-list {
  padding-bottom: 120px;
  scroll-padding-bottom: 120px;
}

.app-shell .page:not(.world-page) .thread-source-note {
  border-color: rgba(235, 235, 245, 0.12);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

.app-shell .page:not(.world-page) .thread-source-note.is-actionable:hover,
.app-shell .page:not(.world-page) .thread-source-note.is-actionable:focus-visible {
  border-color: rgba(10, 132, 255, 0.48);
  background: rgba(10, 132, 255, 0.085);
}

.app-shell .page:not(.world-page) .thread-source-note.is-actionable:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.app-shell .page:not(.world-page) .thread-source-icon {
  background: rgba(10, 132, 255, 0.13);
  color: var(--blue);
}

.app-shell .page:not(.world-page) .thread-source-copy small {
  color: rgba(235, 235, 245, 0.56);
}

.app-shell .page:not(.world-page) .thread-source-copy strong {
  color: rgba(247, 247, 251, 0.82);
}

.app-shell .page:not(.world-page) .message {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.8);
  color: #fff;
}

.app-shell .page:not(.world-page) .message.mine,
.app-shell .page:not(.world-page) .message.me {
  border-color: rgba(10, 132, 255, 0.48);
  background: linear-gradient(135deg, #0a84ff, #246bff);
}

.app-shell .page:not(.world-page) .picker-list,
.app-shell .page:not(.world-page) .community-options,
.app-shell .page:not(.world-page) .course-result-list,
.app-shell .page:not(.world-page) .course-programme-checklist {
  overflow: hidden;
  border-color: rgba(235, 235, 245, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.app-shell .page:not(.world-page) .picker-row,
.app-shell .page:not(.world-page) .course-result-row,
.app-shell .page:not(.world-page) .course-programme-course-row {
  border-bottom-color: rgba(235, 235, 245, 0.1);
  background: transparent;
  color: #fff;
}

.app-shell .page:not(.world-page) .picker-row.selected,
.app-shell .page:not(.world-page) .course-programme-row.is-selected,
.app-shell .page:not(.world-page) .course-programme-course-row.is-selected,
.app-shell .page:not(.world-page) .course-result-action,
.app-shell .page:not(.world-page) .browse-search-join {
  background: rgba(10, 132, 255, 0.14);
  color: var(--blue);
}

.app-shell .page:not(.world-page) .course-result-row.is-joined .course-result-action {
  background: color-mix(in srgb, var(--destructive) 16%, rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 36%, rgba(255, 255, 255, 0.12));
  color: var(--destructive);
}

.app-shell .page:not(.world-page) .course-programme-panel,
.app-shell .page:not(.world-page) .course-programme-suggestions {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(10, 132, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
}

.app-shell .page:not(.world-page) .course-programme-check {
  border-color: rgba(235, 235, 245, 0.16);
}

.app-shell .page:not(.world-page) .context-menu {
  border-color: rgba(235, 235, 245, 0.14);
  background: rgba(22, 25, 35, 0.96);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.4);
}

.app-shell .page:not(.world-page) .context-menu button {
  background: transparent;
  color: #fff;
}

.app-shell .page:not(.world-page) .context-menu button:not(:disabled):active {
  transform: scale(0.985);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
  filter: brightness(0.95);
}

.app-shell .page:not(.world-page) .context-menu button.destructive-menu-item {
  color: var(--destructive);
}

.app-shell .page:not(.world-page) .context-menu button.menu-item-separated {
  border-top-color: rgba(235, 235, 245, 0.12);
}

.browse-search-card {
  margin-bottom: 18px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

.browse-search-field {
  min-height: 56px;
  border-radius: 18px;
}

.browse-search-row,
.sheet-community-row,
.sheet-suggest-row {
  border-bottom-color: rgba(235, 235, 245, 0.1);
  background: transparent;
}

.add-community-sheet,
.message-sheet,
.action-sheet {
  color: #fff;
}

.add-community-sheet-head h2,
.sheet-community-row strong,
.sheet-suggest-row strong,
.message-sheet-head strong,
.message-sheet-context strong {
  color: #fff;
}

.sheet-community-row small,
.sheet-suggest-row small,
.sheet-empty-result span,
.message-sheet-head small,
.message-sheet-context small {
  color: rgba(235, 235, 245, 0.64);
}

.blend-builder-cta {
  position: static;
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell .add-community-sheet,
.app-shell .message-sheet,
.app-shell .action-sheet,
.app-shell:has(.world-page) .action-sheet {
  bottom: calc(112px + env(safe-area-inset-bottom));
}

.app-shell .add-community-sheet-backdrop,
.app-shell .sheet-backdrop,
.app-shell .message-sheet-backdrop {
  bottom: calc(102px + env(safe-area-inset-bottom));
}

.app-shell .add-community-sheet-backdrop {
  bottom: calc(84px + env(safe-area-inset-bottom));
}

.event-reschedule-sheet,
.app-shell .event-reschedule-sheet {
  bottom: calc(112px + env(safe-area-inset-bottom));
  max-height: 430px;
  padding: 8px 10px 10px;
}

.event-reschedule-sheet .event-checkin-config {
  min-height: 0;
}

.event-reschedule-actions,
.app-shell .event-reschedule-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 2px -2px -2px;
  border-top: 1px solid rgba(235, 235, 245, 0.1);
  background:
    linear-gradient(180deg, rgba(18, 22, 32, 0), rgba(18, 22, 32, 0.84) 18%),
    rgba(18, 22, 32, 0.92);
  padding-top: 10px;
}

.app-shell .page:not(.world-page) .course-suggest-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(235, 235, 245, 0.76);
}

.app-shell .page:not(.world-page) .course-suggest-label > span {
  min-width: 0;
  color: rgba(235, 235, 245, 0.76);
}

.app-shell .page:not(.world-page) .course-suggest-label small {
  flex: 0 0 auto;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 999px;
  padding: 2px 7px;
  color: rgba(235, 235, 245, 0.6);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.7rem;
  line-height: 1.1;
}

.app-shell .page:not(.world-page) .course-suggest-note,
.app-shell .page:not(.world-page) .course-suggest-feedback,
.app-shell .page:not(.world-page) .course-suggest-decision,
.app-shell .page:not(.world-page) .course-suggest-match {
  border: 1px solid rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.032)),
    rgba(18, 22, 32, 0.78);
  color: rgba(235, 235, 245, 0.72);
}

.app-shell .page:not(.world-page) .course-suggest-feedback.is-match,
.app-shell .page:not(.world-page) .course-suggest-decision.is-match {
  border-color: color-mix(in srgb, #34c759 42%, rgba(235, 235, 245, 0.12));
  background:
    radial-gradient(circle at 10% 22%, color-mix(in srgb, #34c759 18%, transparent), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.032)),
    rgba(17, 34, 27, 0.82);
}

.app-shell .page:not(.world-page) .course-suggest-feedback.is-review,
.app-shell .page:not(.world-page) .course-suggest-decision.is-review {
  border-color: color-mix(in srgb, var(--blue) 42%, rgba(235, 235, 245, 0.12));
  background:
    radial-gradient(circle at 10% 22%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.032)),
    rgba(16, 27, 44, 0.82);
}

.app-shell .page:not(.world-page) .course-suggest-decision strong,
.app-shell .page:not(.world-page) .course-suggest-match strong {
  color: #fff;
}

.app-shell .page:not(.world-page) .course-suggest-note,
.app-shell .page:not(.world-page) .course-suggest-feedback,
.app-shell .page:not(.world-page) .course-suggest-decision small,
.app-shell .page:not(.world-page) .course-suggest-match small {
  color: rgba(235, 235, 245, 0.68);
}

.app-shell .page:not(.world-page) .course-suggest-match .course-result-action {
  border-radius: 999px;
  padding: 5px 9px;
  color: #fff;
  background: color-mix(in srgb, var(--blue) 72%, rgba(255, 255, 255, 0.08));
}

/* v80: add-community and blend-builder page polish */
.app-shell .page.add-community-page {
  padding-bottom: calc(232px + env(safe-area-inset-bottom));
}

.add-community-intro {
  margin-bottom: 14px;
}

.academics-assist-search-row {
  display: grid;
  min-height: 52px;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--separator));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  padding: 8px 12px;
  text-align: left;
  font: inherit;
}

.academics-assist-search-row > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-elevated));
  color: var(--blue);
}

.academics-assist-search-row .ui-icon {
  width: 18px;
  height: 18px;
}

.academics-assist-search-row strong {
  font-size: 0.86rem;
}

.add-community-page > .academics-assist-entry {
  margin-bottom: 14px;
}

.add-community-picker-card,
.blend-builder-card {
  display: grid;
  gap: 16px;
}

.add-community-search-card {
  gap: 14px;
}

.add-community-search-card .add-community-ai-card {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 58px;
  margin: -2px 0 0;
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 18%, rgba(235, 235, 245, 0.1));
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 5%, transparent), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.026);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  padding: 9px 10px;
}

.add-community-search-card .add-community-ai-card .world-find-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.add-community-search-card .add-community-ai-card .world-find-copy {
  gap: 2px;
}

.add-community-search-card .add-community-ai-card .world-find-copy strong {
  font-size: 0.88rem;
  font-weight: 740;
}

.add-community-search-card .add-community-ai-card .world-find-copy small {
  display: block;
  overflow: visible;
  color: rgba(235, 235, 245, 0.55);
  font-size: 0.74rem;
  line-height: 1.26;
  white-space: normal;
}

.add-community-search-card .add-community-ai-card .world-find-btn {
  grid-column: auto;
  width: auto;
  min-height: 42px;
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 18%, rgba(235, 235, 245, 0.1));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 8%, transparent), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.025);
  color: rgba(245, 247, 255, 0.82);
  padding: 0 13px;
}

.add-community-search-card .add-community-ai-card .world-find-btn span {
  font-size: 0.82rem;
}

@media (max-width: 520px) {
  .add-community-search-card .add-community-ai-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .add-community-search-card .add-community-ai-card .world-find-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.add-picker-section {
  display: grid;
  gap: 10px;
}

.add-picker-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.add-picker-head strong,
.blend-preview-copy strong {
  display: block;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.16;
}

.add-picker-head small,
.blend-preview-copy small {
  display: block;
  overflow: hidden;
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-picker-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 15%, rgba(255, 255, 255, 0.06));
  color: color-mix(in srgb, var(--accent, var(--blue)) 88%, #fff);
}

.add-picker-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.add-category-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 42px 4px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), rgba(0, 0, 0, 0.72) calc(100% - 24px), transparent 100%);
}

.add-category-chip-row::-webkit-scrollbar {
  display: none;
}

.add-category-chip {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 38px;
  max-width: min(240px, 72vw);
  overflow: hidden;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(235, 235, 245, 0.72);
  padding: 0 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 760;
}

.add-category-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-category-chip small {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 0.7rem;
  font-weight: 820;
  opacity: 0.68;
}

.add-category-chip.is-all {
  max-width: none;
}

.add-category-chip.selected {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 54%, rgba(235, 235, 245, 0.12));
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent, var(--blue)) 28%, transparent), transparent 52%),
    rgba(10, 132, 255, 0.16);
  color: #fff;
}

.add-community-page .search-picker {
  display: grid;
  gap: 10px;
}

.add-community-result-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  border-top: 1px solid rgba(235, 235, 245, 0.09);
  padding-top: 2px;
}

.add-community-result-head span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.add-community-result-head strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.18;
}

.add-community-result-head small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.25;
}

.add-community-page .community-options,
.add-community-page .blend-slot-list {
  display: grid;
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.app-shell .page.add-community-page:not(.world-page) .add-community-results {
  max-height: clamp(210px, 30svh, 330px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.028)),
    rgba(18, 22, 32, 0.74);
}

.add-community-page .add-community-results {
  gap: 0;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.028)),
    rgba(18, 22, 32, 0.74);
  padding: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  scrollbar-color: rgba(235, 235, 245, 0.32) transparent;
  scrollbar-width: thin;
}

.add-community-page .add-community-results::-webkit-scrollbar {
  width: 6px;
}

.add-community-page .add-community-results::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(235, 235, 245, 0.32);
}

.add-community-page .picker-row {
  min-height: 52px;
  border: 1px solid rgba(235, 235, 245, 0.11);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.028)),
    rgba(18, 22, 32, 0.72);
}

.add-community-page .picker-row.selected {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 44%, rgba(235, 235, 245, 0.12));
  background:
    radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent), transparent 48%),
    rgba(10, 132, 255, 0.12);
}

.add-community-page .add-community-results .picker-row {
  min-height: 58px;
  border: 0;
  border-radius: 14px;
  background: transparent;
}

.add-community-page .add-community-results .picker-row + .picker-row {
  border-top: 1px solid rgba(235, 235, 245, 0.075);
}

.app-shell .page.add-community-page:not(.world-page) .add-community-results .picker-row.selected,
.add-community-page .add-community-results .picker-row.selected {
  background:
    radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.055);
  color: #fff;
}

.add-community-page .add-community-results .picker-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, var(--blue)) 56%, rgba(255, 255, 255, 0.2));
  outline-offset: -2px;
}

@media (hover: hover) {
  .add-community-page .add-community-results .picker-row:hover {
    background: rgba(255, 255, 255, 0.055);
  }
}

.add-community-result-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
}

.add-community-result-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--accent, var(--blue)) 88%, #fff);
}

.add-community-result-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.add-community-result-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.add-community-result-copy strong,
.add-community-result-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-community-result-copy strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.18;
}

.add-community-result-copy small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.2;
}

.add-community-result-action {
  display: inline-grid;
  min-width: 48px;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: color-mix(in srgb, var(--accent, var(--blue)) 88%, #fff);
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1;
}

.add-community-result-row.selected .add-community-result-action {
  background: rgba(255, 69, 58, 0.14);
  color: #ff8a80;
}

.add-community-result-row:disabled {
  cursor: progress;
  opacity: 0.74;
}

.add-community-show-more {
  display: grid;
  min-height: 44px;
  place-items: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 22%, rgba(235, 235, 245, 0.1));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 8%, rgba(255, 255, 255, 0.04));
  color: color-mix(in srgb, var(--accent, var(--blue)) 78%, #fff);
  padding: 8px 12px;
  text-align: center;
}

.add-community-show-more span {
  font-size: 0.84rem;
  font-weight: 820;
}

.add-community-show-more small {
  color: rgba(235, 235, 245, 0.6);
  font-size: 0.72rem;
  font-weight: 680;
  line-height: 1.25;
}

.add-community-cross-world {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(235, 235, 245, 0.09);
  padding-top: 12px;
}

.add-community-cross-world.is-priority {
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--cross-world-accent) 44%, rgba(235, 235, 245, 0.14));
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--cross-world-accent) 20%, transparent), transparent 48%),
    color-mix(in srgb, var(--cross-world-tint) 58%, rgba(18, 22, 32, 0.82));
  padding: 10px;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--cross-world-accent) 84%, #fff),
    0 12px 28px color-mix(in srgb, var(--cross-world-accent) 10%, transparent);
}

.add-community-cross-world.is-priority .add-community-result-head strong {
  color: color-mix(in srgb, var(--cross-world-accent) 76%, #fff);
}

.add-community-recovery {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 32%, rgba(235, 235, 245, 0.14));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, var(--blue)) 12%, transparent), rgba(255, 255, 255, 0.035)),
    rgba(18, 22, 32, 0.72);
}

.add-community-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  text-align: left;
}

.add-community-empty strong {
  color: #fff;
  font-size: 0.88rem;
}

.add-community-empty span {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  line-height: 1.32;
}

.add-community-empty .suggest-inline-btn span:last-child {
  color: inherit;
}

.add-community-request-note {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(235, 235, 245, 0.09);
  padding-top: 10px;
}

.add-community-request-note.is-secondary-fallback {
  margin-top: 12px;
  padding-top: 12px;
}

.add-selection-tray {
  position: fixed;
  right: max(16px, calc((100vw - 460px) / 2 + 16px));
  bottom: calc(112px + env(safe-area-inset-bottom));
  left: max(16px, calc((100vw - 460px) / 2 + 16px));
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
  align-items: center;
  gap: 10px;
  margin: 0;
  border: 1px solid rgba(235, 235, 245, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    rgba(15, 18, 27, 0.94);
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(22px) saturate(1.25);
}

.add-selection-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.add-selection-copy strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.18;
}

.add-selection-copy small {
  overflow: hidden;
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.74rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-selection-tray .primary-btn {
  min-height: 42px;
  border-radius: 14px;
  padding: 0 14px;
}

.blend-preview-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.78);
  padding: 13px;
}

.blend-preview-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
  color: color-mix(in srgb, var(--accent, var(--blue)) 88%, #fff);
}

.blend-preview-icon .ui-icon {
  width: 25px;
  height: 25px;
}

.blend-preview-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.blend-preview-sources {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  padding-top: 2px;
  scrollbar-width: none;
}

.blend-preview-sources::-webkit-scrollbar {
  display: none;
}

.blend-preview-source {
  flex: 0 0 auto;
  max-width: 150px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chip-color) 42%, rgba(235, 235, 245, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-color) 14%, rgba(255, 255, 255, 0.045));
  color: #fff;
  padding: 4px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 760;
}

.blend-builder-page .blend-summary-row {
  margin-top: 0;
}

.blend-builder-page .blend-source-empty {
  min-height: 148px;
}

/* v105: scalable Blend builder */
.blend-builder-page .blend-preview-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(235, 235, 245, 0.15);
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--accent, var(--blue)) 20%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.84);
}

.blend-builder-page .blend-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blend-preview-gradient);
  opacity: 0.12;
  pointer-events: none;
}

.blend-builder-page .blend-preview-card.is-ready::before {
  opacity: 0.22;
}

.blend-builder-page .blend-preview-icon,
.blend-builder-page .blend-preview-copy {
  position: relative;
  z-index: 1;
}

.blend-builder-page .blend-preview-copy em {
  color: rgba(235, 235, 245, 0.54);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.blend-builder-page .blend-preview-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blend-builder-page .blend-preview-source span {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color) 20%, transparent);
}

.blend-builder-page .blend-slots {
  gap: 12px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.blend-builder-page .blend-slot {
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.blend-builder-page .blend-slot-disabled {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022)),
    rgba(18, 22, 32, 0.52);
}

.blend-builder-page .blend-slot-selection {
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  border-color: rgba(235, 235, 245, 0.14);
  background:
    radial-gradient(circle at 8% 14%, color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent), transparent 54%),
    rgba(10, 132, 255, 0.11);
}

.blend-builder-page .blend-slot-selection .mini-remove {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 69, 58, 0.36);
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 69, 58, 0.13), transparent 56%),
    rgba(255, 255, 255, 0.055);
  color: #ff6961;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.18);
}

.blend-builder-page .blend-slot-selection .mini-remove:hover,
.blend-builder-page .blend-slot-selection .mini-remove:focus-visible {
  border-color: rgba(255, 69, 58, 0.56);
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 69, 58, 0.2), transparent 56%),
    rgba(255, 69, 58, 0.1);
  outline: 0;
}

.blend-builder-page .blend-slot-selection .mini-remove::before,
.blend-builder-page .blend-slot-selection .mini-remove::after {
  left: 9px;
  right: 9px;
  height: 2px;
}

.blend-builder-page .blend-option-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--option-color) 34%, rgba(235, 235, 245, 0.13));
  border-radius: 12px;
  background:
    radial-gradient(circle at 34% 18%, color-mix(in srgb, var(--option-color) 24%, transparent), transparent 56%),
    color-mix(in srgb, var(--option-color) 12%, rgba(255, 255, 255, 0.05));
  color: color-mix(in srgb, var(--option-color) 88%, #fff);
}

.blend-builder-page .blend-option-mark .ui-icon {
  width: 18px;
  height: 18px;
}

.blend-builder-page .blend-picker-row {
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  min-height: 60px;
}

.blend-builder-page .blend-slot-list {
  max-height: min(430px, 48vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 1px;
}

.blend-builder-page .blend-slot-list-head {
  display: grid;
  align-items: center;
  min-height: 34px;
  padding: 2px 2px 0;
}

.blend-builder-page .blend-slot-list-head strong,
.blend-builder-page .blend-slot-list-head small {
  display: block;
}

.blend-builder-page .blend-slot-list-head strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 820;
}

.blend-builder-page .blend-slot-list-head small,
.blend-builder-page .blend-slot-list-note {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.28;
}

.blend-builder-page .blend-slot-list-note {
  margin: 0;
  border: 1px dashed rgba(235, 235, 245, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  padding: 9px 11px;
}

/* v111: mobile-safe docked composers and compact action controls */
.app-shell .favorite-community-btn,
.app-shell .more-btn,
.app-shell .save-post-btn,
.app-shell .detail-more-btn,
.app-shell .comment-delete-btn,
.app-shell .message-more-btn,
.app-shell .thread-actions-btn,
.app-shell .event-bring-remove {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
}

.app-shell .detail-menu-wrap {
  width: 44px;
}

.app-shell .favorite-community-btn {
  flex: 0 0 48px;
  min-width: 48px;
  width: 48px;
  min-height: 48px;
  height: 48px;
}

.app-shell .comment-more-btn {
  min-width: 28px;
  width: 28px;
  min-height: 28px;
  height: 28px;
}

.app-shell .comment-composer,
.app-shell .event-chat-composer {
  grid-template-columns: 36px minmax(0, 1fr) 44px;
  padding: 6px;
}

.app-shell .message-sheet-composer,
.app-shell .thread .composer,
.app-shell > .composer[data-docked-composer],
.app-shell .composer-dock-layer > .composer[data-docked-composer] {
  grid-template-columns: minmax(0, 1fr) 44px;
  padding: 6px;
}

.app-shell .comment-composer .comment-composer-avatar,
.app-shell .event-chat-composer-avatar {
  min-width: 36px;
  width: 36px;
  min-height: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.app-shell .comment-composer input,
.app-shell .event-chat-composer input,
.app-shell .event-bring-composer input,
.app-shell .composer-compact-input,
.app-shell .message-sheet-composer input,
.app-shell .thread .composer .field,
.app-shell > .composer[data-docked-composer] .field,
.app-shell .composer-dock-layer > .composer[data-docked-composer] .field {
  min-height: 44px;
}

.app-shell .comment-send-btn,
.app-shell .event-chat-send-btn,
.app-shell .message-send-btn,
.app-shell .chat-send-btn,
.app-shell .event-bring-add-btn,
.app-shell .event-bring-action {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
}

.app-shell .comment-send-btn,
.app-shell .event-chat-send-btn,
.app-shell .message-send-btn,
.app-shell .chat-send-btn {
  width: 44px;
}

.app-shell .event-bring-composer {
  min-height: 58px;
  padding: 6px;
}

.app-shell .event-chat-host-btn,
.app-shell .detail-calendar-btn,
.app-shell .feed-sort-btn,
.app-shell .world-page .community-group-header,
.app-shell .composer-choice-btn,
.app-shell .add-category-chip,
.app-shell .sheet-scope-chip,
.app-shell .location-type-btn,
.app-shell .segmented button,
.app-shell .add-selection-tray .primary-btn {
  min-height: 44px;
}

.app-shell .sheet-back-btn,
.app-shell .sheet-close-btn,
.app-shell .message-sheet-close {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
}

.app-shell .add-community-sheet,
.app-shell .message-sheet,
.app-shell .action-sheet {
  min-height: 0;
}

.app-shell .add-community-sheet {
  display: flex;
  flex-direction: column;
  bottom: calc(88px + env(safe-area-inset-bottom));
  max-height: min(86svh, calc(100svh - 106px - env(safe-area-inset-bottom)), 720px);
  gap: 9px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

.app-shell .add-community-sheet .sheet-grabber,
.app-shell .add-community-sheet .add-community-sheet-head,
.app-shell .add-community-sheet .sheet-feedback,
.app-shell .add-community-sheet .add-community-sheet-controls,
.app-shell .add-community-sheet .sheet-suggest-footer {
  flex: 0 0 auto;
}

.app-shell .add-community-sheet-head {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  min-height: 44px;
}

.app-shell [data-add-community-sheet-results] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-shell .sheet-results-stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
}

.app-shell .sheet-result-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-shell .feed-sort-btn {
  padding-inline: 14px;
}

/* v218: full HIG audit implementation branch */
.auth-screen.auth-entry-screen {
  place-items: start center;
  min-height: 100svh;
  padding: max(32px, env(safe-area-inset-top)) 18px 28px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
}

.auth-entry-panel {
  width: min(392px, 100%);
  gap: 18px;
}

.auth-app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
}

.auth-app-header .dot-logo {
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 13px;
}

.auth-brand-copy {
  display: grid;
  gap: 2px;
}

.auth-brand-copy strong {
  color: #111827;
  font-size: 1.03rem;
  font-weight: 820;
}

.auth-brand-copy small {
  color: #667085;
  font-size: 0.8rem;
  font-weight: 650;
}

.auth-task-card {
  display: grid;
  gap: 16px;
  border: 1px solid #e5e7ef;
  border-radius: 18px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.08);
}

.auth-title {
  margin-bottom: 2px;
  color: #111827;
  font-size: 1.72rem;
  font-weight: 820;
  line-height: 1.06;
}

.auth-copy {
  color: #667085;
  font-size: 1rem;
  line-height: 1.44;
}

.auth-task-card form {
  display: grid;
  gap: 10px;
}

.auth-field-label {
  color: #344054;
  font-weight: 760;
}

.auth-task-card .field,
.auth-task-card .text-field,
.auth-task-card input,
.auth-task-card textarea {
  min-height: 46px;
  border-color: #d0d5dd;
  background: #fff;
  color: #101828;
}

.auth-task-card .field::placeholder,
.auth-task-card input::placeholder,
.auth-task-card textarea::placeholder {
  color: #98a2b3;
}

.auth-task-card .primary-btn {
  min-height: 48px;
  border-radius: 13px;
  font-weight: 820;
}

.auth-task-card form {
  position: relative;
}

.auth-task-card form.is-busy .field,
.auth-task-card form.is-busy .text-field,
.auth-task-card form.is-busy input,
.auth-task-card form.is-busy textarea {
  opacity: 0.82;
}

.auth-task-card .primary-btn[disabled] {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.auth-task-card form.is-busy .primary-btn[disabled] {
  border-color: color-mix(in srgb, var(--blue) 62%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 84%, #fff 7%), color-mix(in srgb, var(--blue) 68%, #142a66));
  color: #fff;
  opacity: 1;
  filter: none;
}

.auth-task-card form.is-busy .primary-btn[disabled]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.22) 42%, transparent 72%);
  transform: translateX(-110%);
  animation: auth-busy-sheen 1.15s ease-in-out infinite;
  pointer-events: none;
}

.auth-task-card form.is-busy .primary-btn[disabled] > span {
  position: relative;
  z-index: 1;
}

.auth-busy-spinner {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.36);
  border-top-color: #fff;
  border-radius: 999px;
  animation: auth-busy-spin 780ms linear infinite;
}

@keyframes auth-busy-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes auth-busy-sheen {
  0% {
    transform: translateX(-112%);
  }

  100% {
    transform: translateX(312%);
  }
}

.review-route-banner,
.signup-domain-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 11px 12px;
}

.review-route-banner > span:first-child,
.signup-domain-status > span:first-child {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: #dbeafe;
}

.review-route-banner .ui-icon {
  width: 18px;
  height: 18px;
}

.review-route-banner strong,
.signup-domain-status strong {
  display: block;
  color: #1e3a8a;
  font-size: 0.9rem;
  line-height: 1.18;
}

.review-route-banner small,
.signup-domain-status small {
  display: block;
  margin-top: 2px;
  color: #475467;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.28;
}

.auth-secondary-list {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.auth-step-line {
  margin: 0 0 -2px;
  color: #0a84ff;
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0;
}

.auth-secondary-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #f9fafb;
  color: #101828;
  padding: 9px 12px;
  text-align: left;
}

.auth-secondary-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #eef4ff;
  color: #0a84ff;
}

.auth-secondary-copy strong,
.auth-secondary-copy small {
  display: block;
}

.auth-secondary-copy strong {
  font-size: 0.91rem;
  line-height: 1.16;
}

.auth-secondary-copy small {
  margin-top: 2px;
  color: #667085;
  font-size: 0.76rem;
  line-height: 1.28;
}

.app-shell.task-shell {
  --dock-bottom: calc(16px + env(safe-area-inset-bottom));
  --dock-page-padding: calc(104px + env(safe-area-inset-bottom));
}

.app-shell.task-shell .bottom-nav {
  display: none;
}

.app-shell.task-shell .page:not(.world-page) {
  min-height: 100svh;
  padding-bottom: calc(var(--dock-page-padding) + 18px);
}

.app-shell:not(.task-shell) .page:not(.world-page) {
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.app-shell.task-shell .composer-dock-layer {
  bottom: var(--dock-bottom);
}

.app-shell .page:not(.world-page).has-docked-composer {
  padding-bottom: calc(var(--dock-page-padding) + 26px);
}

.app-shell .thread .message-stack,
.app-shell .event-chat-thread-list,
.app-shell .support-thread .message-stack {
  min-height: min(52svh, 520px);
}

.app-shell.task-shell .thread .message-stack,
.app-shell.task-shell .event-chat-thread-list,
.app-shell.task-shell .support-thread .message-stack {
  min-height: min(64svh, 640px);
}

.app-shell .support-thread,
.app-shell.task-shell .support-thread {
  min-height: auto;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 12px;
}

.app-shell .support-thread .support-message-stack,
.app-shell.task-shell .support-thread .support-message-stack {
  min-height: 0;
  align-content: start;
  overflow: visible;
  padding: 2px 0 104px;
}

.app-shell .page:not(.world-page).has-docked-composer .support-thread .support-message-stack,
.app-shell .page:not(.world-page) .support-thread:has(.composer) .support-message-stack,
.app-shell.task-shell .page:not(.world-page).has-docked-composer .support-thread .support-message-stack {
  padding-bottom: 104px;
}

.app-shell .support-thread .support-thread-context,
.app-shell.task-shell .support-thread .support-thread-context {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
}

.app-shell .support-thread .support-thread-context-main,
.app-shell.task-shell .support-thread .support-thread-context-main {
  min-width: 0;
}

.app-shell .support-thread .support-thread-context-main p,
.app-shell.task-shell .support-thread .support-thread-context-main p {
  max-width: none;
}

.app-shell .support-thread .support-thread-side,
.app-shell.task-shell .support-thread .support-thread-side {
  grid-column: 3;
  grid-row: 1;
  margin-top: 1px;
}

.app-shell .thread-source-note {
  margin-bottom: 10px;
}

.chat-kind-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  margin-top: 4px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(235, 235, 245, 0.68);
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 760;
}

.support-chat-row .chat-kind-chip {
  color: #b9d7ff;
}

.event-chat-row .chat-kind-chip {
  color: #d7c4ff;
}

.event-checkin-config {
  border-color: rgba(235, 235, 245, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.032)),
    rgba(18, 22, 32, 0.78);
}

.event-checkin-config.is-disabled {
  opacity: 1;
}

.event-checkin-disclosure {
  margin: -2px 0 0;
  border: 1px solid rgba(10, 132, 255, 0.32);
  border-radius: 13px;
  background: rgba(10, 132, 255, 0.13);
  color: rgba(245, 247, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.36;
  padding: 10px 11px;
}

.event-checkin-config-head small,
.event-checkin-config-head strong {
  color: rgba(245, 247, 255, 0.9);
}

.event-checkin-config-head small {
  color: rgba(235, 235, 245, 0.66);
}

.notification-settings-list {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.03)),
    rgba(13, 17, 27, 0.82);
}

.notification-pref-row {
  border-bottom-color: rgba(235, 235, 245, 0.1);
  background: transparent;
  color: rgba(250, 251, 255, 0.94);
}

.notification-settings-head strong,
.notification-pref-copy strong {
  color: rgba(250, 251, 255, 0.95);
}

.notification-settings-head small,
.notification-pref-copy small {
  color: rgba(235, 235, 245, 0.68);
}

.notification-switch {
  background: rgba(235, 235, 245, 0.24);
  box-shadow: inset 0 0 0 1px rgba(235, 235, 245, 0.16);
}

.notification-pref-row:hover,
.notification-pref-row:focus-visible {
  background: rgba(10, 132, 255, 0.11);
}

.notification-inbox-settings-row,
.notification-inbox-row {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.03)),
    rgba(13, 17, 27, 0.82);
}

.notification-inbox-row.is-unread {
  border-color: color-mix(in srgb, var(--blue) 36%, rgba(235, 235, 245, 0.14));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 82%, #fff);
}

.notification-inbox-row:hover,
.notification-inbox-row:focus-visible {
  background:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.035)),
    rgba(15, 19, 30, 0.88);
}

.notification-inbox-empty {
  border-color: rgba(235, 235, 245, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(13, 17, 27, 0.72);
}

.account-delete-card {
  margin-top: 14px;
  border-style: dashed;
  background:
    linear-gradient(145deg, rgba(255, 69, 58, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(18, 22, 32, 0.74);
}

.account-danger-list {
  margin-top: 14px;
}

.account-delete-row {
  border-color: rgba(255, 69, 58, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 69, 58, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(18, 22, 32, 0.72);
}

.account-delete-row .account-delete-copy strong,
.account-delete-row .account-delete-copy small {
  color: #ffd1cd;
}

.profile-setting-meta.is-destructive {
  color: #ffb4ae;
}

.account-delete-card .account-delete-btn {
  justify-self: stretch;
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 69, 58, 0.08);
  color: #ffb4ae;
}

.account-delete-dialog {
  border: 1px solid rgba(255, 69, 58, 0.24);
  background: #ffffff;
  color: #101828;
}

.account-delete-dialog h2,
.account-delete-dialog p,
.account-delete-dialog label {
  color: #101828;
}

.account-delete-dialog p {
  color: #475467;
}

.account-delete-dialog .field {
  border-color: #d0d5dd;
  background: #fff;
  color: #101828;
}

.account-delete-dialog .field::placeholder {
  color: #98a2b3;
}

.destructive-confirm-btn:disabled,
.primary-btn:disabled,
.report-actions .primary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.12);
}

.report-card {
  max-height: calc(100svh - 28px);
  overflow-y: auto;
}

.report-guidance {
  border: 1px solid #bfdbfe;
  border-radius: 13px;
  background: #eff6ff;
  color: #475467;
  padding: 10px 12px;
}

.report-selection-confirmation {
  margin: 0;
  border: 1px solid rgba(48, 209, 88, 0.36);
  border-radius: 13px;
  background: rgba(48, 209, 88, 0.12);
  color: #155724;
  padding: 10px 12px;
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.35;
}

.report-reason-row {
  min-height: 48px;
}

.home-favorite-card strong,
.home-favorite-list-main strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-favorite-card strong {
  -webkit-line-clamp: 3;
}

.home-favorite-card {
  min-height: 96px;
}

.home-activity-card.is-post-card .home-activity-meta-line {
  min-width: 0;
  align-items: flex-start;
}

.home-activity-card.is-post-card .home-activity-meta-copy {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.browse-search-row,
.sheet-community-row {
  min-height: 62px;
}

.browse-search-join,
.sheet-row-action {
  display: inline-grid;
  min-width: 54px;
  min-height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent, var(--blue)) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 13%, transparent);
  color: color-mix(in srgb, var(--accent, var(--blue)) 86%, #fff);
  font-size: 0.78rem;
  font-weight: 820;
}

.browse-search-joined {
  min-height: 44px;
  color: rgba(235, 235, 245, 0.62);
}

.add-community-sheet {
  max-height: min(76svh, 660px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.app-shell .add-community-sheet .sheet-search-wrap,
.app-shell .add-community-sheet .sheet-suggestion-kind-row {
  position: static;
  z-index: auto;
  background: rgba(24, 28, 38, 0.96);
}

.app-shell .add-community-sheet .sheet-scope-context {
  position: relative;
  z-index: auto;
  border: 1px solid rgba(235, 245, 255, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(24, 28, 38, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.app-shell .add-community-sheet .sheet-scope-row {
  padding: 3px 44px 3px 3px;
}

.sheet-suggest-footer {
  margin-top: 10px;
}

.home-start-audience-card {
  border-color: rgba(235, 235, 245, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(18, 22, 32, 0.76);
  color: rgba(250, 251, 255, 0.94);
}

.for-you-token-card {
  padding: 12px 14px;
  opacity: 0.86;
}

.for-you-token-card .for-you-token-receipt {
  border-color: rgba(235, 235, 245, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

.for-you-next-section {
  margin-top: 2px;
}

.home-start-empty-chip {
  border-color: rgba(235, 235, 245, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(235, 235, 245, 0.72);
}

.home-start-action-sheet .home-start-community-list button {
  min-height: 68px;
}

/* v412: Build Blend uses the same selected-community picker pattern as Home Start. */
.blend-builder-page {
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.blend-builder-page .blend-builder-sheet,
.app-shell .blend-builder-page .blend-builder-sheet {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: min(720px, calc(100svh - 132px));
  max-height: calc(100svh - 132px);
  transform: none;
  margin: 0 auto;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

.blend-builder-page .blend-builder-sheet .sheet-title {
  margin-bottom: 0;
}

.blend-builder-page .blend-builder-audience-card .home-start-audience-preview small {
  color: rgba(235, 235, 245, 0.68);
}

.blend-builder-page .blend-builder-search-wrap {
  margin-top: 0;
}

.blend-builder-page .blend-builder-community-list {
  gap: 8px;
}

.blend-builder-page .blend-builder-list-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 0;
  color: rgba(235, 235, 245, 0.68);
}

.blend-builder-page .blend-builder-list-note strong {
  color: #fff;
  font-size: 0.9rem;
}

.blend-builder-page .blend-builder-list-note small {
  min-width: 0;
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.78rem;
  text-align: right;
}

.blend-builder-page .blend-builder-limit-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(235, 235, 245, 0.72);
  font-size: 0.86rem;
}

.blend-builder-page .blend-builder-note {
  margin: 0;
  border-radius: 18px;
}

.blend-builder-page .blend-builder-actions .primary-btn,
.blend-builder-page .blend-builder-actions .secondary-btn {
  min-height: 50px;
}

/* v366: Home Start audience sheet needs a real scroll body, not a half-covered list. */
.home-start-action-sheet,
.app-shell .home-start-action-sheet {
  left: 50%;
  right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 24px));
  height: min(720px, calc(100svh - 36px));
  max-height: calc(100svh - 36px);
  transform: translateX(-50%);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px 10px;
}

.home-start-action-sheet [data-home-start-audience-results],
.app-shell .home-start-action-sheet [data-home-start-audience-results] {
  min-height: 0;
  overflow: hidden;
}

.home-start-action-sheet .home-start-community-list,
.app-shell .home-start-action-sheet .home-start-community-list {
  height: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
  touch-action: pan-y;
}

.home-start-action-sheet .home-start-audience-card,
.app-shell .home-start-action-sheet .home-start-audience-card {
  padding: 10px;
}

.home-start-action-sheet .home-start-community-list button,
.app-shell .home-start-action-sheet .home-start-community-list button {
  min-height: 60px;
  padding: 9px 10px;
}

.home-start-audience-actions,
.app-shell .home-start-audience-actions {
  position: static;
  z-index: auto;
  border-top: 1px solid rgba(235, 235, 245, 0.1);
  background: transparent;
  padding-top: 8px;
}

@media (max-height: 720px) and (max-width: 520px) {
  .home-start-action-sheet,
  .app-shell .home-start-action-sheet {
    bottom: calc(12px + env(safe-area-inset-bottom));
    height: calc(100svh - 24px);
    max-height: calc(100svh - 24px);
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px 8px 8px;
  }

  .home-start-action-sheet [data-home-start-audience-card],
  .app-shell .home-start-action-sheet [data-home-start-audience-card] {
    display: block;
  }

  .home-start-action-sheet .home-start-audience-card,
  .app-shell .home-start-action-sheet .home-start-audience-card {
    gap: 6px;
    padding: 8px;
  }

  .home-start-action-sheet .home-start-audience-preview,
  .app-shell .home-start-action-sheet .home-start-audience-preview {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .home-start-action-sheet .home-start-audience-icon,
  .app-shell .home-start-action-sheet .home-start-audience-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .home-start-action-sheet .home-start-audience-icon .blend-rings,
  .app-shell .home-start-action-sheet .home-start-audience-icon .blend-rings {
    transform: translateX(-5px) scale(0.66);
  }

  .home-start-action-sheet .home-start-audience-preview small,
  .app-shell .home-start-action-sheet .home-start-audience-preview small {
    display: none;
  }

  .home-start-action-sheet .home-start-audience-preview strong,
  .app-shell .home-start-action-sheet .home-start-audience-preview strong {
    font-size: 0.84rem;
  }

  .home-start-action-sheet .home-start-audience-segments,
  .app-shell .home-start-action-sheet .home-start-audience-segments {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .home-start-action-sheet .home-start-selected-segments,
  .app-shell .home-start-action-sheet .home-start-selected-segments {
    overflow: visible;
    gap: 5px;
  }

  .home-start-action-sheet .home-start-audience-chip,
  .home-start-action-sheet .home-start-add-blend-chip,
  .home-start-action-sheet .home-start-empty-chip,
  .app-shell .home-start-action-sheet .home-start-audience-chip,
  .app-shell .home-start-action-sheet .home-start-add-blend-chip,
  .app-shell .home-start-action-sheet .home-start-empty-chip {
    min-height: 28px;
    max-width: 126px;
    padding: 5px 8px;
    font-size: 0.72rem;
  }

  .home-start-action-sheet .home-start-selected-segments .home-start-audience-chip,
  .home-start-action-sheet .home-start-selected-segments .home-start-add-blend-chip,
  .home-start-action-sheet .home-start-selected-segments .home-start-empty-chip,
  .app-shell .home-start-action-sheet .home-start-selected-segments .home-start-audience-chip,
  .app-shell .home-start-action-sheet .home-start-selected-segments .home-start-add-blend-chip,
  .app-shell .home-start-action-sheet .home-start-selected-segments .home-start-empty-chip {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .home-start-action-sheet [data-home-start-audience-results],
  .app-shell .home-start-action-sheet [data-home-start-audience-results] {
    min-height: 0;
  }
}

.composer-card {
  gap: 16px;
}

.composer-context {
  border: 1px solid rgba(235, 235, 245, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.composer-field-group {
  display: grid;
  gap: 10px;
}

.composer-field-group > span,
.composer-compact-field > span,
.composer-time-field > span {
  color: rgba(235, 235, 245, 0.74);
  font-size: 0.86rem;
  font-weight: 780;
}

.detail-info-grid {
  gap: 8px;
}

.event-rsvp-card,
.event-checkin-card,
.event-bring-card,
.event-chat-card {
  scroll-margin-bottom: 120px;
}

.event-rsvp-head {
  align-items: center;
}

.event-rsvp-btn {
  min-width: 112px;
  min-height: 46px;
}

.event-bring-card,
.event-chat-card {
  margin-bottom: 10px;
}

.event-chat-page .thread-source-note {
  position: static;
  top: auto;
  z-index: auto;
  backdrop-filter: none;
}

.event-chat-thread-list,
.message-stack {
  align-content: start;
}

.support-thread .thread-context {
  margin-bottom: 12px;
}

.support-thread .message-stack {
  align-content: start;
  gap: 10px;
}

.profile-email {
  max-width: min(100%, 280px);
  overflow: hidden;
  margin-inline: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-settings-list,
.profile-list,
.badge-grid {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

.task-shell .profile-settings-list,
.task-shell .profile-list,
.task-shell .badge-grid {
  padding-bottom: 28px;
}

.badge-grid {
  align-items: stretch;
}

.badge-card {
  min-height: 188px;
}

.modal-backdrop {
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(12px) saturate(1.05);
}

.profile-edit-backdrop {
  align-items: end;
  background: rgba(2, 6, 23, 0.72);
}

.profile-edit-sheet {
  width: min(100%, 460px);
  max-height: min(86svh, 720px);
  border-radius: 24px 24px 0 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.profile-edit-head {
  display: grid;
  gap: 6px;
}

.profile-edit-head h2,
.profile-edit-head p {
  margin: 0;
}

.profile-edit-actions {
  bottom: env(safe-area-inset-bottom);
}

/* v332: keep public auth in the same dark palette regardless of the OS/browser theme. */
.auth-screen.auth-entry-screen {
  color-scheme: dark;
  --text: #f7f7fb;
  --muted: rgba(235, 235, 245, 0.68);
  --surface: #1c1f2a;
  --surface-elevated: #242838;
  --surface-soft: #05070d;
  --separator: rgba(235, 235, 245, 0.16);
  --fill: rgba(255, 255, 255, 0.07);
  --destructive: #ff453a;
  background:
    radial-gradient(circle at 50% -12%, rgba(10, 132, 255, 0.18), transparent 36%),
    #04060a;
  color: var(--text);
  overflow-x: hidden;
}

.auth-screen.auth-entry-screen .auth-entry-panel {
  justify-self: center;
  width: 100%;
  max-width: min(392px, calc(100vw - 36px));
  min-width: 0;
}

.auth-screen.auth-entry-screen .auth-task-card,
.auth-screen.auth-entry-screen .auth-secondary-row,
.auth-screen.auth-entry-screen .auth-secondary-copy {
  min-width: 0;
}

.auth-screen.auth-entry-screen .auth-task-card .auth-title,
.auth-screen.auth-entry-screen .auth-task-card h1,
.auth-screen.auth-entry-screen .auth-brand-copy strong,
.auth-screen.auth-entry-screen .auth-secondary-copy strong,
.auth-screen.auth-entry-screen .school-request-toggle summary {
  color: rgba(250, 251, 255, 0.96);
}

.auth-screen.auth-entry-screen .auth-task-card .auth-copy,
.auth-screen.auth-entry-screen .auth-brand-copy small,
.auth-screen.auth-entry-screen .auth-secondary-copy small,
.auth-screen.auth-entry-screen .terms,
.auth-screen.auth-entry-screen .school-request-toggle {
  color: rgba(235, 235, 245, 0.68);
}

.auth-status-panel .auth-title {
  color: rgba(250, 251, 255, 0.96);
  font-weight: 840;
}

.auth-status-panel .auth-copy {
  color: rgba(235, 235, 245, 0.72);
}

.auth-screen.auth-entry-screen .auth-task-card,
.auth-screen.auth-entry-screen .auth-secondary-row,
.auth-screen.auth-entry-screen .school-request-toggle {
  border-color: rgba(235, 235, 245, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)),
    rgba(28, 31, 42, 0.92);
}

.auth-screen.auth-entry-screen .auth-secondary-icon {
  border: 1px solid rgba(10, 132, 255, 0.28);
  background: rgba(10, 132, 255, 0.14);
  color: #0a84ff;
}

.auth-screen.auth-entry-screen .auth-field-label {
  color: rgba(245, 247, 255, 0.84);
}

.auth-screen.auth-entry-screen .auth-task-card .field,
.auth-screen.auth-entry-screen .auth-task-card .text-field,
.auth-screen.auth-entry-screen .auth-task-card input,
.auth-screen.auth-entry-screen .auth-task-card textarea {
  border-color: rgba(235, 235, 245, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(250, 251, 255, 0.96);
}

.auth-screen.auth-entry-screen .auth-task-card .field::placeholder,
.auth-screen.auth-entry-screen .auth-task-card input::placeholder,
.auth-screen.auth-entry-screen .auth-task-card textarea::placeholder {
  color: rgba(235, 235, 245, 0.46);
}

.auth-screen.auth-entry-screen .auth-secondary-chevron {
  color: rgba(235, 235, 245, 0.5);
}

.auth-screen.auth-entry-screen .verification-notice {
  border-color: rgba(10, 132, 255, 0.28);
  background:
    radial-gradient(circle at 8% 0%, rgba(10, 132, 255, 0.16), transparent 46%),
    rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.auth-screen.auth-entry-screen .verification-notice.is-success {
  border-color: rgba(52, 199, 89, 0.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(52, 199, 89, 0.16), transparent 46%),
    rgba(255, 255, 255, 0.055);
}

.auth-screen.auth-entry-screen .verification-notice p,
.auth-screen.auth-entry-screen .verification-notice small {
  color: var(--muted);
}

.modal-card {
  max-height: calc(100svh - 34px);
  overflow-y: auto;
}

.modal-card .modal-actions {
  position: sticky;
  bottom: 0;
  background: inherit;
  padding-top: 8px;
}

.modal-card.premium-card .modal-actions {
  position: static;
  bottom: auto;
  background: transparent;
}

.profile-retroactive-option {
  border-color: #e4e7ec;
  background: #f9fafb;
}

.admin-restricted-card {
  display: grid;
  gap: 12px;
  margin-inline: 0;
  padding: 18px;
}

.admin-restricted-card h2,
.admin-restricted-card p {
  margin: 0;
}

.admin-restricted-card .secondary-btn {
  justify-self: start;
  min-height: 44px;
  padding-inline: 18px;
}

.admin-launch-stack {
  padding-bottom: 28px;
}

.admin-secondary-metrics {
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(18, 22, 32, 0.72);
  overflow: hidden;
}

.admin-secondary-metrics summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
}

.admin-secondary-metrics summary::-webkit-details-marker {
  display: none;
}

.admin-secondary-metrics summary strong,
.admin-secondary-metrics summary small {
  display: block;
}

.admin-secondary-metrics summary strong {
  color: rgba(250, 251, 255, 0.95);
}

.admin-secondary-metrics summary small {
  margin-top: 2px;
  color: rgba(235, 235, 245, 0.64);
}

.admin-secondary-metrics summary .ui-icon {
  color: rgba(235, 235, 245, 0.62);
  transition: transform 0.18s ease;
}

.admin-secondary-metrics[open] summary .ui-icon {
  transform: rotate(90deg);
}

.admin-secondary-metrics-stack {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}

.download-page {
  min-height: 100svh;
  background: #f5f7fb;
}

.download-shell {
  padding-top: max(28px, env(safe-area-inset-top));
}

.download-panel {
  width: min(430px, 100%);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.1);
}

.download-icon {
  width: 64px;
  height: 64px;
  border-radius: 17px;
}

.download-actions {
  gap: 10px;
}

.platform-status-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.platform-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  border: 1px solid #e4e7ec;
  border-radius: 15px;
  background: #f9fafb;
  color: #101828;
  padding: 12px 14px;
  text-decoration: none;
}

.platform-status-row strong,
.platform-status-row small {
  display: block;
}

.platform-status-row small {
  margin-top: 2px;
  color: #667085;
  font-size: 0.82rem;
  line-height: 1.3;
}

.platform-status-row em {
  border-radius: 999px;
  background: #eef4ff;
  color: #0a84ff;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 820;
  padding: 7px 10px;
}

.platform-status-row.is-ready {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.download-footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.download-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: #475467;
  font-size: 0.86rem;
  font-weight: 720;
}

.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 18px 10px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  background: rgba(245, 247, 251, 0.9);
  backdrop-filter: blur(18px) saturate(1.2);
}

.legal-brand-link,
.legal-return-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #101828;
  text-decoration: none;
}

.legal-brand-link {
  gap: 10px;
  font-weight: 820;
}

.legal-brand-link img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.legal-return-link {
  min-height: 44px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 760;
}

.legal-panel {
  width: min(760px, 100%);
}

.legal-panel .download-icon,
.legal-panel .download-kicker {
  display: none;
}

.legal-section {
  border-top: 1px solid #e4e7ec;
  padding-top: 18px;
}

/* v226 guard: modal contrast stays readable after app-wide dark/light form rules. */
.app-shell .modal-backdrop .account-delete-dialog {
  border-color: rgba(255, 69, 58, 0.24) !important;
  background: #ffffff !important;
  color: #101828 !important;
  color-scheme: light;
}

.app-shell .modal-backdrop .account-delete-dialog h2,
.app-shell .modal-backdrop .account-delete-dialog label {
  color: #101828 !important;
}

.app-shell .modal-backdrop .account-delete-dialog p {
  color: #475467 !important;
}

.app-shell .modal-backdrop .account-delete-dialog input.field,
.app-shell .modal-backdrop .account-delete-dialog .field {
  border-color: #d0d5dd !important;
  background: #ffffff !important;
  color: #101828 !important;
}

.app-shell .modal-backdrop .account-delete-dialog input.field::placeholder,
.app-shell .modal-backdrop .account-delete-dialog .field::placeholder {
  color: #98a2b3 !important;
}

.app-shell .modal-backdrop .account-delete-dialog .secondary-btn {
  border-color: #d0d5dd !important;
  background: #ffffff !important;
  color: #344054 !important;
}

.app-shell .modal-backdrop .account-delete-dialog .destructive-confirm-btn:disabled {
  background: #fee4e2 !important;
  color: #b42318 !important;
  opacity: 1;
}

.app-shell .profile-edit-sheet .profile-retroactive-option {
  border-color: rgba(235, 235, 245, 0.16) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: rgba(245, 247, 255, 0.92) !important;
  color-scheme: dark;
}

.app-shell .profile-edit-sheet .profile-retroactive-option strong {
  color: rgba(250, 251, 255, 0.96) !important;
}

.app-shell .profile-edit-sheet .profile-retroactive-option small {
  color: rgba(235, 235, 245, 0.7) !important;
}

.app-shell .profile-edit-sheet .profile-retroactive-option input {
  accent-color: #0a84ff;
}

/* v227: keep the detail Blend intersection mark centered inside the community chip. */
.detail-community-chip .detail-community-icon,
.detail-community-chip .detail-community-icon span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.detail-community-chip .detail-community-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-community-icon .blend-rings {
  width: 24px;
  height: 24px;
  transform: none;
}

.detail-community-icon .blend-ring {
  width: 12px;
  height: 12px;
  border-width: 1.25px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 48%, transparent);
}

.detail-community-icon .blend-intersection-core {
  top: 9px;
  left: 9px;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 34%, transparent);
}

.detail-community-icon .blend-rings.ring-count-1 .blend-ring:nth-child(1) {
  top: 6px;
  left: 6px;
}

.detail-community-icon .blend-rings.ring-count-1 .blend-intersection-core {
  top: 9px;
  left: 9px;
  width: 6px;
  height: 6px;
}

.detail-community-icon .blend-rings.ring-count-2 .blend-ring:nth-child(1) {
  top: 6px;
  left: 4px;
}

.detail-community-icon .blend-rings.ring-count-2 .blend-ring:nth-child(2) {
  top: 6px;
  left: 9px;
}

.detail-community-icon .blend-rings.ring-count-2 .blend-intersection-core {
  top: 8px;
  left: 9px;
  width: 6px;
  height: 8px;
  transform: none;
}

.detail-community-icon .blend-rings.ring-count-3 .blend-ring:nth-child(1) {
  top: 3px;
  left: 7px;
}

.detail-community-icon .blend-rings.ring-count-3 .blend-ring:nth-child(2) {
  top: 9px;
  left: 3px;
}

.detail-community-icon .blend-rings.ring-count-3 .blend-ring:nth-child(3) {
  top: 9px;
  left: 11px;
}

.detail-community-icon .blend-rings.ring-count-3 .blend-intersection-core {
  top: 9px;
  left: 9px;
  width: 6px;
  height: 6px;
}

.detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(1) {
  top: 4px;
  left: 4px;
}

.detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(2) {
  top: 4px;
  left: 9px;
}

.detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(3) {
  top: 9px;
  left: 4px;
}

.detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(4) {
  top: 9px;
  left: 9px;
}

.detail-community-icon .blend-rings.ring-count-4 .blend-intersection-core {
  top: 9px;
  left: 9px;
  width: 6px;
  height: 6px;
}

/* v228: center Blend intersection marks in feed rows instead of scaling the large icon. */
.feed-card.intent-card {
  align-items: center;
}

.feed-card.intent-card .feed-title,
.feed-card.intent-card .feed-card-side {
  align-self: center;
}

.feed-icon.is-audience-icon {
  overflow: visible;
}

.feed-icon.is-audience-icon .blend-rings {
  width: 24px;
  height: 24px;
  transform: none;
}

.feed-icon.is-audience-icon .blend-ring {
  width: 12px;
  height: 12px;
  border-width: 1.2px;
}

.feed-icon.is-audience-icon .blend-intersection-core {
  top: 10px;
  left: 10px;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 34%, transparent);
}

.feed-icon.is-audience-icon .blend-rings.ring-count-1 .blend-ring:nth-child(1) {
  top: 6px;
  left: 6px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-1 .blend-intersection-core {
  top: 10px;
  left: 10px;
  width: 5px;
  height: 5px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-2 .blend-ring:nth-child(1) {
  top: 6px;
  left: 4px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-2 .blend-ring:nth-child(2) {
  top: 6px;
  left: 9px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-2 .blend-intersection-core {
  top: 8px;
  left: 10px;
  width: 5px;
  height: 8px;
  transform: none;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-3 .blend-ring:nth-child(1) {
  top: 3px;
  left: 7px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-3 .blend-ring:nth-child(2) {
  top: 9px;
  left: 3px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-3 .blend-ring:nth-child(3) {
  top: 9px;
  left: 11px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-3 .blend-intersection-core {
  top: 10px;
  left: 10px;
  width: 5px;
  height: 5px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-4 .blend-ring:nth-child(1) {
  top: 4px;
  left: 4px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-4 .blend-ring:nth-child(2) {
  top: 4px;
  left: 9px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-4 .blend-ring:nth-child(3) {
  top: 9px;
  left: 4px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-4 .blend-ring:nth-child(4) {
  top: 9px;
  left: 9px;
}

.feed-icon.is-audience-icon .blend-rings.ring-count-4 .blend-intersection-core {
  top: 10px;
  left: 10px;
  width: 5px;
  height: 5px;
}

/* v229: Blend builder slot options render all joined communities and scroll inside the slot. */
.blend-builder-page .blend-slot.is-active,
.blend-builder-page .blend-slot.is-active .search-picker,
.blend-builder-page .blend-slot.is-active [data-blend-slot-results] {
  min-height: 0;
}

.app-shell .page.add-community-page.blend-builder-page:not(.world-page) .blend-slot-list {
  max-height: clamp(260px, 38svh, 430px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  padding-right: 4px;
  scrollbar-width: thin;
}

.app-shell .page.add-community-page.blend-builder-page:not(.world-page) .blend-slot-list::-webkit-scrollbar {
  width: 6px;
}

.app-shell .page.add-community-page.blend-builder-page:not(.world-page) .blend-slot-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(235, 235, 245, 0.32);
}

/* v250: Apple HIG pass for Blend Builder as a clear three-step wizard. */
.blend-builder-page .add-community-intro {
  margin-bottom: 10px;
}

.blend-builder-page .add-community-intro h2 {
  font-size: 1.55rem;
  line-height: 1.05;
}

.blend-builder-page .add-community-intro p {
  max-width: 390px;
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.88rem;
  line-height: 1.45;
}

.blend-builder-page .blend-preview-card {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 64px;
  margin-bottom: 10px;
  border-radius: 20px;
  padding: 10px 12px;
}

.blend-builder-page .blend-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.blend-builder-page .blend-preview-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.blend-builder-page .blend-preview-copy strong {
  font-size: 0.96rem;
  font-weight: 900;
}

.blend-builder-page .blend-preview-copy small {
  font-size: 0.73rem;
}

.blend-preview-progress {
  position: relative;
  z-index: 1;
  min-width: auto;
  border: 1px solid rgba(90, 200, 250, 0.3);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.13);
  color: #8fd8ff;
  padding: 6px 9px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.blend-builder-page .blend-builder-card {
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.blend-builder-page .blend-builder-card-head {
  display: grid;
  min-height: 66px;
  align-items: center;
  border: 1px solid rgba(235, 235, 245, 0.13);
  border-radius: 20px 20px 0 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.025)),
    rgba(21, 24, 33, 0.92);
  padding: 12px 14px;
}

.blend-builder-page .blend-builder-card-head span,
.blend-builder-page .blend-slot-compact-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.blend-builder-page .blend-builder-card-head strong {
  color: rgba(250, 251, 255, 0.96);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
}

.blend-builder-page .blend-builder-card-head small,
.blend-builder-page .blend-slot-compact-copy small {
  overflow: hidden;
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .page.add-community-page.blend-builder-page:not(.world-page) .blend-builder-card {
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.blend-builder-page .blend-slots {
  gap: 0;
  border: 1px solid rgba(235, 235, 245, 0.13);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: rgba(15, 18, 27, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.blend-builder-page .blend-slot {
  gap: 13px;
  border: 0;
  border-bottom: 1px solid rgba(235, 235, 245, 0.09);
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(24, 28, 37, 0.9);
  padding: 14px 16px 16px;
}

.blend-builder-page .blend-slot:last-child {
  border-bottom: 0;
}

.blend-builder-page .blend-slot.is-active:not(.is-complete) {
  border-color: rgba(10, 132, 255, 0.72);
  background:
    radial-gradient(circle at 14% 10%, rgba(10, 132, 255, 0.18), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.028)),
    rgba(24, 29, 39, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(10, 132, 255, 0.18),
    0 16px 32px rgba(0, 0, 0, 0.2);
}

.blend-builder-page .blend-slot.is-complete {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.025)),
    rgba(21, 24, 33, 0.92);
}

.blend-builder-page .blend-slot.is-compact {
  display: block;
  padding: 0;
  background: rgba(255, 255, 255, 0.028);
}

.blend-builder-page .blend-slot.is-compact.is-optional {
  background: rgba(255, 255, 255, 0.018);
}

.blend-builder-page .blend-slot-compact-row,
.blend-builder-page .blend-slot-optional-row {
  display: grid;
  width: 100%;
  min-height: 66px;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 9px 12px;
  text-align: left;
}

.blend-builder-page .blend-slot-compact-row {
  grid-template-columns: 32px 34px minmax(0, 1fr) auto;
}

.blend-builder-page .blend-slot-optional-row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  cursor: pointer;
}

.blend-builder-page .blend-slot-optional-row:focus-visible,
.blend-builder-page .blend-slot-text-btn:focus-visible,
.blend-builder-page .blend-slot-actions .mini-remove:focus-visible {
  outline: 2px solid rgba(10, 132, 255, 0.78);
  outline-offset: 2px;
}

.blend-builder-page .blend-slot-compact-copy strong {
  overflow: hidden;
  color: rgba(250, 251, 255, 0.96);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blend-builder-page .blend-slot-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.blend-builder-page .blend-slot-text-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  color: #8fd8ff;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.blend-builder-page .blend-slot-optional-row .blend-slot-text-btn {
  pointer-events: none;
}

.blend-builder-page .blend-slot.is-disabled {
  opacity: 0.84;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.022)),
    rgba(18, 22, 32, 0.62);
}

.blend-builder-page .advanced-blend-slot {
  width: 100%;
  border: 1px dashed rgba(235, 235, 245, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(10, 132, 255, 0.1), rgba(255, 255, 255, 0.024)),
    rgba(18, 22, 32, 0.68);
  color: var(--text);
  text-align: left;
}

.blend-builder-page .advanced-blend-slot p {
  margin: 0;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.35;
}

.blend-builder-page .advanced-blend-slot .blend-slot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.blend-builder-page .advanced-blend-slot .blend-slot-badge .ui-icon {
  width: 13px;
  height: 13px;
}

.blend-builder-page .blend-slot-header {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.blend-builder-page .blend-slot-number {
  width: 32px;
  height: 32px;
  background: rgba(10, 132, 255, 0.16);
  color: #78c6ff;
  font-weight: 880;
}

.blend-builder-page .blend-slot.is-complete .blend-slot-number {
  background: rgba(50, 215, 75, 0.15);
  color: #32d74b;
}

.blend-builder-page .blend-slot-header strong {
  color: rgba(250, 251, 255, 0.96);
  font-size: 1.03rem;
  font-weight: 900;
  line-height: 1.08;
}

.blend-builder-page .blend-slot-header small {
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.74rem;
  font-weight: 700;
}

.blend-slot-badge {
  border: 1px solid rgba(235, 235, 245, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.052);
  color: rgba(235, 235, 245, 0.66);
  padding: 6px 9px;
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.blend-slot-badge.is-selected {
  border-color: rgba(50, 215, 75, 0.28);
  background: rgba(50, 215, 75, 0.08);
  color: #8bf89a;
}

.blend-slot-badge.is-locked {
  border-color: rgba(235, 235, 245, 0.16);
  background: rgba(235, 235, 245, 0.06);
  color: rgba(235, 235, 245, 0.72);
}

.blend-builder-page .blend-slot-disabled-note {
  border: 1px dashed rgba(235, 235, 245, 0.18);
  border-radius: 15px;
  color: rgba(235, 235, 245, 0.66);
  padding: 12px 14px;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
}

.blend-builder-page .blend-slot-selection {
  min-height: 58px;
  border-color: rgba(246, 162, 41, 0.35);
  border-radius: 15px;
  background:
    radial-gradient(circle at 6% 20%, rgba(246, 162, 41, 0.2), transparent 44%),
    rgba(255, 255, 255, 0.046);
  padding: 9px 10px;
}

.blend-builder-page .blend-slot-selection strong {
  font-size: 0.94rem;
  font-weight: 900;
}

.blend-builder-page .search-picker {
  display: grid;
  gap: 12px;
}

.blend-builder-page .picker-input-wrap {
  border-color: rgba(235, 235, 245, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.052);
}

.blend-builder-page .picker-input {
  min-height: 48px;
}

.blend-builder-page .blend-slot-list {
  max-height: clamp(150px, 18svh, 180px);
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
}

.app-shell .page.add-community-page.blend-builder-page:not(.world-page) .blend-slot-list {
  max-height: clamp(150px, 18svh, 180px);
}

.blend-builder-page .blend-slot-list-head {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: auto;
  padding: 0 2px;
}

.blend-builder-page .blend-slot-list-head strong,
.blend-builder-page .blend-slot-list-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blend-builder-page .blend-slot-list-head strong {
  color: rgba(235, 235, 245, 0.72);
  font-size: 0.75rem;
}

.blend-builder-page .blend-slot-list-head small {
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.72rem;
}

.blend-builder-page .blend-picker-row {
  grid-template-columns: 34px minmax(0, 1fr) 36px;
  min-height: 60px;
  border: 1px solid rgba(235, 235, 245, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.036);
  padding: 9px 12px 9px 10px;
}

.blend-builder-page .blend-picker-row + .blend-picker-row {
  margin-top: 0;
}

.blend-builder-page .blend-picker-row strong {
  color: rgba(250, 251, 255, 0.95);
  font-size: 0.94rem;
  font-weight: 900;
}

.blend-builder-page .blend-picker-row small {
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.74rem;
  font-weight: 700;
}

.blend-builder-page .row-check {
  position: relative;
  display: grid;
  justify-self: end;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(10, 132, 255, 0.3);
  border-left: 1px solid rgba(10, 132, 255, 0.3);
  border-bottom: 1px solid rgba(10, 132, 255, 0.3);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.08);
  transform: none;
}

.blend-builder-page .row-action-text {
  justify-self: end;
  color: color-mix(in srgb, var(--option-color, #8fd8ff) 72%, #ffffff);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.blend-builder-page .row-check::before,
.blend-builder-page .row-check::after {
  content: "";
  position: absolute;
  background: #8fd8ff;
}

.blend-builder-page .row-check::before {
  width: 12px;
  height: 2px;
  border-radius: 999px;
}

.blend-builder-page .row-check::after {
  width: 2px;
  height: 12px;
  border-radius: 999px;
}

.blend-builder-page .blend-footnote {
  margin: 0 2px 92px;
  color: rgba(235, 235, 245, 0.66);
}

.blend-builder-page .blend-builder-tray {
  border-radius: 20px;
}

/* v411: Blend builder follows the Home Start selected-audience pattern more closely. */
.blend-builder-page .blend-preview-card {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 106px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent, #b9a7ee) 16%, transparent), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.028)),
    color-mix(in srgb, var(--surface-elevated) 88%, transparent);
}

.blend-builder-page .blend-preview-card.has-selection {
  border-color: color-mix(in srgb, var(--accent, #b9a7ee) 36%, rgba(235, 235, 245, 0.14));
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent, #b9a7ee) 18%, transparent), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.028)),
    color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 34px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--accent, #b9a7ee) 10%, transparent);
}

.blend-builder-page .blend-preview-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 48% 38%, color-mix(in srgb, var(--accent, #b9a7ee) 24%, transparent), transparent 62%),
    rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #b9a7ee) 22%, transparent);
}

.blend-builder-page .blend-preview-copy {
  gap: 4px;
  padding-right: 0;
}

.blend-builder-page .blend-preview-copy strong {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1rem;
  line-height: 1.12;
}

.blend-builder-page .blend-preview-copy small {
  font-size: 0.76rem;
  line-height: 1.25;
}

.blend-builder-page .blend-preview-sources {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 3px;
  padding: 1px 2px 2px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.blend-builder-page .blend-preview-sources::-webkit-scrollbar {
  display: none;
}

.blend-builder-page .blend-preview-source-intersection {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 30px;
  align-items: center;
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1;
}

.blend-builder-page .blend-preview-source {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 30px;
  max-width: 190px;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--chip-color) 42%, rgba(235, 235, 245, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-color) 14%, rgba(255, 255, 255, 0.045));
  color: #fff;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 780;
}

.blend-builder-page .blend-preview-source > span:first-child {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color) 20%, transparent);
}

.blend-builder-page .blend-preview-source > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blend-builder-page .blend-preview-source .ui-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  opacity: 0.72;
}

.blend-preview-progress {
  position: static;
  grid-column: 1 / -1;
  z-index: 2;
  justify-self: start;
  margin: 0 0 0 52px;
  padding: 5px 8px;
  font-size: 0.69rem;
}

.blend-builder-page .blend-builder-card-head {
  min-height: 42px;
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(15, 18, 27, 0.68);
  padding: 9px 12px;
}

.blend-builder-page .blend-slots {
  border-radius: 0 0 16px 16px;
  background: rgba(15, 18, 27, 0.56);
}

.blend-builder-page .blend-slot-compact-row,
.blend-builder-page .blend-slot-optional-row {
  min-height: 54px;
  padding: 7px 11px;
}

.blend-builder-page .blend-slot-compact-row {
  grid-template-columns: 28px 32px minmax(0, 1fr) auto;
}

.blend-builder-page .blend-slot-optional-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.blend-builder-page .blend-slot-number {
  width: 26px;
  height: 26px;
  font-size: 0.78rem;
}

.blend-builder-page .blend-slot-compact-copy strong {
  font-size: 0.92rem;
}

.blend-builder-page .blend-slot-text-btn {
  min-height: 32px;
  padding: 0 10px;
}

.blend-builder-page .blend-slot-selection {
  grid-template-columns: 34px minmax(0, 1fr);
}

.blend-builder-page .blend-footnote {
  margin-bottom: 104px;
}

.blend-builder-page .blend-builder-tray {
  min-height: 60px;
  padding: 8px 10px;
}

/* v412: final cascade for the Home Start-style Blend picker. */
.blend-builder-page .blend-builder-sheet,
.app-shell .blend-builder-page .blend-builder-sheet {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: min(720px, calc(100svh - 132px));
  max-height: calc(100svh - 132px);
  transform: none;
  margin: 0 auto;
  border-radius: 26px;
}

.blend-builder-page .blend-builder-sheet [data-blend-slot-results] {
  min-height: 0;
  overflow: hidden;
  min-width: 0;
}

.blend-builder-page .blend-builder-sheet .blend-builder-community-list {
  height: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
  touch-action: pan-y;
}

.blend-builder-page .blend-builder-sheet .home-start-audience-card {
  padding: 10px;
}

.blend-builder-page .blend-builder-community-choice {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 60px;
}

.blend-builder-page .blend-builder-actions {
  margin-top: 0;
}

@media (max-height: 720px) and (max-width: 520px) {
  .blend-builder-page .blend-builder-sheet,
  .app-shell .blend-builder-page .blend-builder-sheet {
    height: calc(100svh - 112px);
    max-height: calc(100svh - 112px);
    gap: 7px;
    padding: 7px 8px 8px;
  }

  .blend-builder-page .blend-builder-list-note {
    display: none;
  }

  .blend-builder-page .blend-builder-community-choice {
    min-height: 58px;
  }
}

/* v230: show Blend suggestion sources as colored world chips in the community picker. */
.sheet-community-row.is-blend-row {
  grid-template-columns: 50px minmax(0, 1fr) minmax(54px, auto);
  align-items: center;
  min-height: 112px;
  gap: 10px;
}

.sheet-row-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.sheet-community-row.is-blend-row .sheet-row-copy {
  gap: 5px;
}

.sheet-community-row.is-blend-row strong {
  white-space: nowrap;
}

.sheet-community-row.is-blend-row .sheet-blend-meta {
  margin-top: 0;
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.12;
  white-space: nowrap;
}

.sheet-blend-chip-list {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 5px;
}

.sheet-blend-source-chip {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 142px);
  min-height: 23px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--blue)) 44%, rgba(235, 235, 245, 0.16));
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--chip-color, var(--blue)) 18%, transparent), transparent 46%),
    color-mix(in srgb, var(--chip-color, var(--blue)) 13%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--chip-color, var(--blue)) 84%, #ffffff);
  padding: 3px 7px 3px 6px;
  font-size: 0.71rem;
  font-weight: 820;
  line-height: 1;
}

.sheet-blend-source-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--chip-color, var(--blue));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color, var(--blue)) 22%, transparent);
}

.sheet-blend-source-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v233: Blend detail chip remains one button while exposing colored source chips. */
.detail-community-chip.is-blend-chip {
  max-width: 100%;
  min-height: 50px;
  gap: 8px;
  padding: 4px 8px 4px 5px;
}

.detail-community-chip.is-blend-chip .detail-community-icon {
  display: inline-grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  place-items: center;
  border: 1px solid rgba(235, 235, 245, 0.15);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    rgba(255, 255, 255, 0.055);
  margin-right: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.18);
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings {
  width: 30px;
  height: 26px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-ring {
  width: 14px;
  height: 14px;
  border-width: 1.35px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-intersection-core {
  top: 10px;
  left: 12px;
  width: 7px;
  height: 7px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-1 .blend-ring:nth-child(1) {
  top: 6px;
  left: 8px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-1 .blend-intersection-core {
  top: 10px;
  left: 12px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-2 .blend-ring:nth-child(1) {
  top: 6px;
  left: 6px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-2 .blend-ring:nth-child(2) {
  top: 6px;
  left: 11px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-2 .blend-intersection-core {
  top: 9px;
  left: 12px;
  width: 7px;
  height: 9px;
  transform: none;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-3 .blend-ring:nth-child(1) {
  top: 2px;
  left: 8px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-3 .blend-ring:nth-child(2) {
  top: 10px;
  left: 4px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-3 .blend-ring:nth-child(3) {
  top: 10px;
  left: 13px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-3 .blend-intersection-core {
  top: 10px;
  left: 12px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(1) {
  top: 4px;
  left: 5px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(2) {
  top: 4px;
  left: 11px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(3) {
  top: 10px;
  left: 5px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-4 .blend-ring:nth-child(4) {
  top: 10px;
  left: 11px;
}

.detail-community-chip.is-blend-chip .detail-community-icon .blend-rings.ring-count-4 .blend-intersection-core {
  top: 10px;
  left: 12px;
}

.detail-community-chip.is-blend-chip .detail-blend-source-strip {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.detail-community-chip.is-blend-chip .detail-blend-source-pill {
  display: inline-flex;
  min-width: 0;
  max-width: 84px;
  min-height: 22px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent)) 44%, rgba(235, 235, 245, 0.14));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 13%, rgba(255, 255, 255, 0.04));
  color: color-mix(in srgb, var(--chip-color, var(--accent)) 86%, #ffffff);
  padding: 3px 7px 3px 6px;
  font-size: 0.71rem;
  font-weight: 820;
  line-height: 1;
}

.detail-community-chip.is-blend-chip .detail-blend-source-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  min-width: 5px;
  margin-right: 5px;
  overflow: visible;
  border-radius: 999px;
  background: var(--chip-color, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color, var(--accent)) 20%, transparent);
}

.detail-community-chip.is-blend-chip .detail-blend-source-pill > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-community-chip.is-blend-chip .detail-blend-source-gap {
  flex: 0 0 4px;
  width: 4px;
  min-width: 4px;
}

/* v234-v241: Composer audience is a quiet confirmation, not a chip cluster. */
.composer-context.is-blend-context {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
}

.composer-context.is-blend-context .composer-audience-summary {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: right;
}

.composer-context.is-blend-context .composer-audience-summary strong,
.composer-context.is-blend-context .composer-audience-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-context.is-blend-context .composer-audience-summary strong {
  color: rgba(250, 251, 255, 0.94);
  font-size: 0.88rem;
  font-weight: 820;
  line-height: 1.12;
}

.composer-context.is-blend-context .composer-audience-summary small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.73rem;
  font-weight: 680;
  line-height: 1.15;
}

.composer-context.is-blend-context .composer-audience-summary.is-source-only strong {
  color: rgba(235, 235, 245, 0.82);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.2;
}

/* v486: Calm, Apple-like press feedback for custom web/PWA controls. */
button,
[role="button"],
summary,
.primary-button,
.secondary-button,
.auth-link {
  -webkit-tap-highlight-color: transparent;
  transition-property: transform, filter, background-color, border-color, box-shadow, color, opacity;
  transition-duration: var(--press-duration);
  transition-timing-function: var(--press-ease);
}

button:not(:disabled):not([aria-disabled="true"]):active,
[role="button"]:not([aria-disabled="true"]):active,
summary:active,
.primary-button:not(:disabled):active,
.secondary-button:not(:disabled):active,
.auth-link:active {
  transform: scale(var(--press-control-scale));
  filter: brightness(var(--press-brightness));
}

.home-activity-open-hit:not(:disabled):active {
  transform: none;
  filter: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 9%, transparent), transparent 52%),
    rgba(255, 255, 255, 0.025);
}

.circle-btn:not(:disabled):active,
.brand-mark-btn:not(:disabled):active,
.header-trust-btn:not(:disabled):active,
.clear-search-btn:not(:disabled):active,
.sheet-search-clear:not(:disabled):active,
.remove-btn:not(:disabled):active,
.comment-more-btn:not(:disabled):active,
.comment-delete-btn:not(:disabled):active,
.detail-more-btn:not(:disabled):active,
.save-post-btn:not(:disabled):active,
.community-card-menu-btn:not(:disabled):active,
.community-import-close-btn:not(:disabled):active,
.pwa-update-dismiss:not(:disabled):active {
  transform: scale(var(--press-icon-scale));
  filter: brightness(var(--press-brightness));
}

.nav-item:not(:disabled):active {
  transform: scale(0.96);
  filter: brightness(0.96);
}

.world-card:not(:disabled):active,
.home-explore-card:not(:disabled):active,
.home-explore-blend-card:not(:disabled):active,
.home-favorite-card:not(:disabled):active,
.home-favorite-list-main:not(:disabled):active,
.browse-search-open:not(:disabled):active,
.browse-search-join:not(:disabled):active,
.sheet-community-row:not(:disabled):active,
.community-row-card:active,
.community-row-main:active,
.world-find-card:not(:disabled):active,
.game-catalog-row:not(:disabled):active,
.course-result-row:not(:disabled):active,
.academics-assist-community-row:not(:disabled):active,
.home-start-community-choice:not(:disabled):active,
.picker-row:not(:disabled):active,
.profile-tile:not(:disabled):active,
.profile-item[role="button"]:active,
.profile-setting-row:active,
.notification-inbox-row:active,
.notification-inbox-settings-row:active,
.notification-pref-row:active,
.detail-community-chip:not(:disabled):active,
.thread-source-note.is-actionable:active,
button.suggest-footer:not(:disabled):not(.disabled):active {
  transform: scale(var(--press-row-scale));
  filter: brightness(0.96);
}

.sheet-scope-chip:not(:disabled):active,
.world-category-chip:not(:disabled):active,
.add-category-chip:not(:disabled):active,
.community-import-chip:not(:disabled):active,
.home-start-audience-chip:not(:disabled):active,
.home-start-add-blend-chip:not(:disabled):active,
.blend-source-chip:not(:disabled):active,
.blend-slot-text-btn:not(:disabled):active,
.blend-slot-optional-row:not(:disabled):active,
.blend-preview-source:not(:disabled):active,
.detail-signal-btn:not(:disabled):active,
.composer-choice-btn:not(:disabled):active,
.advanced-blend-choice:not(:disabled):active,
[data-profile-post-filter]:not(:disabled):active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.auth-screen .primary-btn:not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(0.965);
  filter: brightness(0.86) saturate(1.05);
  box-shadow:
    inset 0 0 0 999px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}

.auth-secondary-row:not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(0.975);
  border-color: color-mix(in srgb, var(--blue) 44%, rgba(235, 235, 245, 0.14));
  background:
    linear-gradient(145deg, rgba(10, 132, 255, 0.18), rgba(10, 132, 255, 0.07)),
    rgba(28, 31, 42, 0.94);
  color: #fff;
  filter: brightness(0.98);
  box-shadow:
    inset 0 0 0 999px rgba(10, 132, 255, 0.035),
    0 0 0 1px rgba(10, 132, 255, 0.1);
}

.auth-secondary-row:not(:disabled):not([aria-disabled="true"]):active .auth-secondary-icon {
  background: color-mix(in srgb, var(--blue) 20%, #eef4ff);
}

.ghost-icon:not(:disabled):active {
  transform: scale(0.88);
  background: rgba(10, 132, 255, 0.12);
  color: var(--blue);
  filter: brightness(0.92);
}

button:disabled,
button[aria-disabled="true"],
[role="button"][aria-disabled="true"] {
  transform: none;
  filter: none;
}

.home-favorites-row,
.home-list-time-filters,
.home-list-attendance-filters,
.home-activity-audience-strip,
.sheet-scope-row,
.world-page .world-category-scope,
.add-category-chip-row,
.game-platform-chip-row,
.community-import-summary-chips,
.community-import-chip-row,
.home-start-audience-segments,
.home-start-audience-world-filters,
.applied-filter-chips {
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.home-activity-audience-strip {
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.sheet-scope-row > button,
.world-page .world-category-scope > button,
.add-category-chip-row > button,
.community-import-chip-row > button,
.home-start-audience-segments > button,
.home-start-audience-world-filters > button,
.applied-filter-chips > button {
  touch-action: pan-x pan-y;
}

.sheet-scope-row > button:not(:disabled):active,
.world-page .world-category-scope > button:not(:disabled):active,
.add-category-chip-row > button:not(:disabled):active,
.community-import-chip-row > button:not(:disabled):active,
.home-start-audience-segments > button:not(:disabled):active,
.home-start-audience-world-filters > button:not(:disabled):active,
.applied-filter-chips > button:not(:disabled):active {
  transform: none;
  filter: brightness(0.94);
}

/* v497-v513: Pilot-safe filter visibility, calmer cards, and native-like root-tab motion. */
.app-shell[data-root-transition="forward"] > .page,
.app-shell[data-root-transition="back"] > .page,
.app-shell[data-root-drag="true"] > .page,
.app-shell[data-root-drag-reset="true"] > .page {
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}

.app-shell[data-root-transition="forward"] > .page {
  animation: root-tab-forward 285ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.app-shell[data-root-transition="back"] > .page {
  animation: root-tab-back 285ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.app-shell[data-root-drag="true"] > .page {
  opacity: var(--root-drag-opacity, 1);
  transform: translateX(var(--root-drag-x, 0)) scale(var(--root-drag-scale, 1));
  transition: none;
}

.app-shell[data-root-drag-reset="true"] > .page {
  opacity: var(--root-drag-opacity, 1);
  transform: translateX(var(--root-drag-x, 0)) scale(var(--root-drag-scale, 1));
  transition:
    transform 180ms cubic-bezier(0.18, 0.9, 0.24, 1),
    opacity 180ms cubic-bezier(0.18, 0.9, 0.24, 1);
}

.app-shell[data-root-swipe-stage="true"] > .page {
  opacity: 0;
  transform: none;
}

@keyframes root-tab-forward {
  from {
    opacity: 0.94;
    transform: translateX(var(--root-enter-x, 82%)) scale(0.986);
  }
  72% {
    opacity: 1;
    transform: translateX(-3px) scale(1);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes root-tab-back {
  from {
    opacity: 0.94;
    transform: translateX(var(--root-enter-x, -82%)) scale(0.986);
  }
  72% {
    opacity: 1;
    transform: translateX(3px) scale(1);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.root-tab-snapshot-layer {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: calc(74px + env(safe-area-inset-bottom));
  left: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
  will-change: transform, opacity;
}

.root-tab-swipe-stage {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: calc(74px + env(safe-area-inset-bottom));
  left: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
  transform-origin: center center;
  will-change: transform, opacity;
}

.root-tab-swipe-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translate3d(var(--root-swipe-x, 0), 0, 0);
  will-change: transform;
}

.root-tab-swipe-panel {
  flex: 0 0 50%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.root-tab-swipe-panel > .page {
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  scrollbar-width: none;
}

.root-tab-swipe-panel > .page::-webkit-scrollbar {
  display: none;
}

.app-shell[data-root-drag="true"] > .root-tab-swipe-stage .root-tab-swipe-track {
  transition: none;
}

.app-shell[data-root-swipe-settle="true"] > .root-tab-swipe-stage .root-tab-swipe-track {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-shell .bottom-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  left: 0;
  width: var(--root-nav-indicator-width, 0px);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--root-nav-indicator-x, 0px), 0, 0);
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--nav-accent, var(--blue)) 34%, transparent), transparent 48%),
    color-mix(in srgb, var(--nav-accent, var(--blue)) 18%, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-accent, var(--blue)) 22%, transparent);
  will-change: transform, width, opacity;
}

.app-shell[data-root-nav-motion="true"] .bottom-nav::before {
  opacity: 1;
}

.app-shell[data-root-nav-settle="true"] .bottom-nav::before {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease;
}

.app-shell[data-root-nav-motion="true"] .bottom-nav .nav-item {
  position: relative;
  z-index: 1;
}

.app-shell[data-root-nav-motion="true"] .bottom-nav .nav-item.active {
  background: transparent;
  box-shadow: none;
}

.root-tab-snapshot-layer > .page {
  width: 100%;
  height: 100%;
  pointer-events: none;
  scrollbar-width: none;
}

.root-tab-snapshot-layer > .page::-webkit-scrollbar {
  display: none;
}

.root-tab-snapshot-layer.is-forward {
  animation: root-tab-snapshot-forward 285ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.root-tab-snapshot-layer.is-back {
  animation: root-tab-snapshot-back 285ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

@keyframes root-tab-snapshot-forward {
  from {
    opacity: 1;
    transform: translateX(var(--root-snapshot-start-x, 0)) scale(1);
  }
  to {
    opacity: 0.58;
    transform: translateX(var(--root-snapshot-end-x, -44%)) scale(0.976);
  }
}

@keyframes root-tab-snapshot-back {
  from {
    opacity: 1;
    transform: translateX(var(--root-snapshot-start-x, 0)) scale(1);
  }
  to {
    opacity: 0.58;
    transform: translateX(var(--root-snapshot-end-x, 44%)) scale(0.976);
  }
}

.applied-filter-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 0 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.applied-filter-chips::-webkit-scrollbar {
  display: none;
}

.applied-filter-chips button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 34px;
  max-width: min(260px, 74vw);
  border: 1px solid color-mix(in srgb, var(--blue) 24%, rgba(235, 235, 245, 0.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, rgba(255, 255, 255, 0.045));
  color: rgba(245, 247, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 710;
  padding: 0 10px 0 12px;
}

.applied-filter-chips button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.applied-filter-chips button .ui-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.72;
}

.feed-toolbar-stack {
  display: grid;
  gap: 8px;
}

.home-start-audience-world-filters {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-start-audience-world-filters::-webkit-scrollbar {
  display: none;
}

.home-start-audience-world-filters button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid rgba(235, 235, 245, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(235, 235, 245, 0.76);
  font-size: 0.78rem;
  font-weight: 720;
  padding: 0 14px;
  white-space: nowrap;
}

.home-start-audience-world-filters button.is-active {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 34%, rgba(235, 235, 245, 0.14));
  background: color-mix(in srgb, var(--accent, var(--blue)) 11%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--accent, var(--blue)) 68%, #f7f7fb);
  font-weight: 760;
}

.sheet-community-row .sheet-row-copy strong,
.home-start-action-sheet .home-start-community-list button > span:not(.sheet-community-icon):not(.sheet-row-action) strong,
.course-result-row:not(.course-programme-row) strong {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.sheet-community-row .sheet-row-copy small,
.home-start-action-sheet .home-start-community-list button > span:not(.sheet-community-icon):not(.sheet-row-action) small,
.course-result-row:not(.course-programme-row) small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-import-signals-scroll {
  overflow-x: hidden;
  overscroll-behavior-y: auto;
}

.community-import-signal-field {
  min-height: 66px;
}

.community-import-paste textarea {
  min-height: 62px;
  max-height: 98px;
}

.app-shell .world-find-card,
.app-shell .home-activity-card,
.app-shell .community-row-card,
.app-shell .form-card,
.app-shell .community-import-section,
.app-shell .filter-sheet-options,
.app-shell .home-start-audience-card,
.app-shell .action-sheet {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.app-shell .bottom-nav {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 34px rgba(0, 0, 0, 0.28);
}

/* v518: keep the accent language, but lower repeated glow/blur intensity. */
.app-shell .world-find-card,
.app-shell .home-activity-card,
.app-shell .community-row-card,
.app-shell .form-card,
.app-shell .community-import-section,
.app-shell .filter-sheet-options,
.app-shell .home-start-audience-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 9px 22px rgba(0, 0, 0, 0.16);
}

.app-shell .action-sheet {
  box-shadow:
    0 -14px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.app-shell .bottom-nav {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 28px rgba(0, 0, 0, 0.22);
}

.app-shell .world-page .community-row-card,
.app-shell .world-page .world-glass-empty,
.app-shell .world-discovery-card {
  border-color: rgba(235, 235, 245, 0.095);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(18, 22, 32, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px) saturate(1.08);
}

.app-shell .world-page .community-row-card::before {
  width: 4px;
  opacity: 0.76;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 24%, transparent);
}

.app-shell .world-page .world-summary {
  border-color: rgba(235, 235, 245, 0.075);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(18, 22, 32, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(16px) saturate(1.04);
}

.app-shell .world-page:not(.blends-world-page) .world-summary {
  margin: 2px 0 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.app-shell .world-page:not(.blends-world-page) .world-summary h2 {
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.76rem;
  font-weight: 720;
}

.app-shell .world-find-card.world-find-inline {
  border-color: color-mix(in srgb, var(--accent) 14%, rgba(235, 235, 245, 0.08));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 3%, transparent), rgba(255, 255, 255, 0.018)),
    rgba(18, 22, 32, 0.24);
}

.app-shell .world-find-icon,
.app-shell .world-summary-icon,
.app-shell .sheet-row-icon,
.app-shell .community-glyph,
.app-shell .community-room-icon {
  background: color-mix(in srgb, var(--accent, var(--blue)) 12%, rgba(255, 255, 255, 0.045));
  color: color-mix(in srgb, var(--accent, var(--blue)) 78%, #f7f7fb);
  box-shadow: none;
}

.app-shell .home-activity-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 6%, transparent), transparent 50%),
    var(--surface);
}

.app-shell .home-activity-card.is-featured,
.app-shell .home-activity-card.is-unread {
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 28%, var(--separator));
  box-shadow: none;
}

.app-shell .home-activity-card.is-unread {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--blue)) 9%, transparent), transparent 56%),
    color-mix(in srgb, var(--accent, var(--blue)) 3%, var(--surface));
}

.app-shell .community-import-sheet {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent, var(--blue)) 11%, transparent) 0, transparent 34%),
    linear-gradient(180deg, rgba(34, 39, 51, 0.96), rgba(18, 22, 31, 0.96)),
    rgba(20, 24, 34, 0.96);
  backdrop-filter: blur(22px) saturate(1.06);
}

.app-shell .community-import-signals,
.app-shell .community-import-step,
.app-shell .sheet-suggest-footer {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.app-shell .world-page .community-row-copy strong,
.app-shell .sheet-community-row strong,
.app-shell .home-activity-title-line strong {
  font-weight: 760;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-root-transition="forward"] > .page,
  .app-shell[data-root-transition="back"] > .page,
  .app-shell[data-root-drag="true"] > .page,
  .app-shell[data-root-drag-reset="true"] > .page,
  .root-tab-swipe-stage,
  .root-tab-swipe-track,
  .root-tab-snapshot-layer {
    animation: none;
    transform: none;
    transition: none;
  }

  .root-tab-swipe-stage,
  .root-tab-snapshot-layer {
    display: none;
  }

  button,
  [role="button"],
  summary,
  .primary-button,
  .secondary-button,
  .auth-link {
    transition-duration: 1ms;
  }

  button:not(:disabled):not([aria-disabled="true"]):active,
  [role="button"]:not([aria-disabled="true"]):active,
  summary:active,
  .primary-button:not(:disabled):active,
  .secondary-button:not(:disabled):active,
  .auth-link:active,
  .circle-btn:not(:disabled):active,
  .brand-mark-btn:not(:disabled):active,
  .header-trust-btn:not(:disabled):active,
  .clear-search-btn:not(:disabled):active,
  .sheet-search-clear:not(:disabled):active,
  .remove-btn:not(:disabled):active,
  .nav-item:not(:disabled):active,
  .world-card:not(:disabled):active,
  .home-explore-card:not(:disabled):active,
  .home-explore-blend-card:not(:disabled):active,
  .home-favorite-card:not(:disabled):active,
  .home-favorite-list-main:not(:disabled):active,
  .browse-search-open:not(:disabled):active,
  .browse-search-join:not(:disabled):active,
  .sheet-community-row:not(:disabled):active,
  .community-row-card:active,
  .community-row-main:active,
  .world-find-card:not(:disabled):active,
  .game-catalog-row:not(:disabled):active,
  .course-result-row:not(:disabled):active,
  .academics-assist-community-row:not(:disabled):active,
  .home-start-community-choice:not(:disabled):active,
  .picker-row:not(:disabled):active,
  .profile-tile:not(:disabled):active,
  .profile-item[role="button"]:active,
  .profile-setting-row:active,
  .notification-inbox-row:active,
  .notification-inbox-settings-row:active,
  .notification-pref-row:active,
  .detail-community-chip:not(:disabled):active,
  .thread-source-note.is-actionable:active,
  button.suggest-footer:not(:disabled):not(.disabled):active,
  .sheet-scope-chip:not(:disabled):active,
  .world-category-chip:not(:disabled):active,
  .add-category-chip:not(:disabled):active,
  .community-import-chip:not(:disabled):active,
  .home-start-audience-chip:not(:disabled):active,
  .home-start-add-blend-chip:not(:disabled):active,
  .blend-source-chip:not(:disabled):active,
  .blend-slot-text-btn:not(:disabled):active,
  .blend-slot-optional-row:not(:disabled):active,
  .blend-preview-source:not(:disabled):active,
  .detail-signal-btn:not(:disabled):active,
  .composer-choice-btn:not(:disabled):active,
  .advanced-blend-choice:not(:disabled):active,
  [data-profile-post-filter]:not(:disabled):active {
    transform: none;
    filter: brightness(0.96);
  }

  .auth-screen .primary-btn:not(:disabled):not([aria-disabled="true"]):active,
  .auth-secondary-row:not(:disabled):not([aria-disabled="true"]):active,
  .ghost-icon:not(:disabled):active {
    transform: none;
    filter: brightness(0.9);
  }

  .auth-task-card form.is-busy .primary-btn[disabled]::after,
  .auth-busy-spinner {
    animation: none;
  }

  .auth-task-card form.is-busy .primary-btn[disabled]::after {
    transform: none;
    background: rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 700px) {
  /* v510: Avoid iOS Safari input-focus zoom while keeping user pinch zoom available. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .field,
  .text-field,
  .select-field,
  .search-field,
  .picker-input {
    font-size: 16px;
  }
}


/* For You theatrical preview v539 */
.for-you-page:has(.for-you-theatrical-hero) {
  --for-you-night: #050914;
  --for-you-surface: rgba(17, 22, 36, 0.86);
  --for-you-border: rgba(183, 193, 224, 0.16);
  gap: 24px;
  overflow-x: hidden;
  padding-inline: clamp(14px, 4vw, 18px);
  padding-bottom: calc(124px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 12%, rgba(40, 85, 192, 0.16), transparent 30%),
    radial-gradient(circle at 16% 26%, rgba(111, 69, 196, 0.08), transparent 25%),
    var(--for-you-night);
}

.for-you-page:has(.for-you-theatrical-hero) > .page-header {
  margin-bottom: -2px;
}

.for-you-page:has(.for-you-theatrical-hero) > .page-header .page-header-subtitle {
  color: rgba(235, 235, 245, 0.68);
  font-size: 0.77rem;
  letter-spacing: -0.01em;
}

.for-you-theatrical-hero {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  margin-top: -8px;
  margin-bottom: 6px;
  text-align: center;
}

.for-you-theatrical-aurora {
  position: relative;
  display: grid;
  width: min(100%, 330px);
  height: 126px;
  place-items: center;
  pointer-events: none;
  isolation: isolate;
}

.for-you-theatrical-aurora::before,
.for-you-theatrical-aurora::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.for-you-theatrical-aurora::before {
  inset: -18px 14px -10px;
  z-index: -2;
  background:
    radial-gradient(ellipse at center, rgba(135, 105, 255, 0.45) 0%, rgba(46, 112, 255, 0.2) 32%, transparent 69%),
    linear-gradient(90deg, transparent 6%, rgba(40, 100, 255, 0.12) 30%, rgba(137, 95, 255, 0.2) 50%, rgba(40, 100, 255, 0.12) 70%, transparent 94%);
  filter: blur(15px);
  opacity: 0.96;
}

.for-you-theatrical-aurora::after {
  right: 20%;
  bottom: 5px;
  left: 20%;
  height: 28px;
  z-index: -1;
  border: 1px solid rgba(140, 121, 255, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 25px rgba(62, 112, 255, 0.22),
    inset 0 0 18px rgba(137, 95, 255, 0.18);
  transform: perspective(80px) rotateX(66deg);
}

.for-you-theatrical-orbit {
  position: absolute;
  right: 14%;
  bottom: 4px;
  left: 14%;
  height: 34px;
  border: 1px solid rgba(111, 108, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(63, 111, 255, 0.15);
  transform: perspective(90px) rotateX(67deg);
}

.for-you-theatrical-spark {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  color: #c3afff;
  z-index: 1;
  filter:
    drop-shadow(0 0 10px rgba(169, 135, 255, 0.96))
    drop-shadow(0 0 26px rgba(67, 114, 255, 0.75));
}

.for-you-theatrical-spark .ui-icon {
  width: 78px;
  height: 78px;
  stroke-width: 1.8;
}

.for-you-theatrical-hero-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.for-you-theatrical-hero-copy h2,
.for-you-theatrical-hero-copy p {
  margin: 0;
}

.for-you-theatrical-hero-copy h2 {
  color: #f8f8fc;
  font-size: clamp(1.72rem, 7.1vw, 2rem);
  font-weight: 820;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.for-you-theatrical-hero-copy h2 span {
  background: linear-gradient(105deg, #c1a8ff 4%, #8c73ff 54%, #78a6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.for-you-theatrical-hero-copy p {
  color: rgba(235, 235, 245, 0.72);
  font-size: clamp(0.76rem, 3.4vw, 0.86rem);
  font-weight: 590;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.for-you-theatrical-ai {
  display: grid;
  width: min(100%, 292px);
  min-height: 50px;
  grid-template-columns: 24px auto;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid rgba(82, 157, 255, 0.48);
  border-radius: 999px;
  background: linear-gradient(135deg, #2787f7, #295fdf);
  color: #fff;
  padding: 0 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 28px rgba(24, 91, 231, 0.22);
  font-size: 1rem;
}

.for-you-theatrical-ai .ui-icon {
  width: 21px;
  height: 21px;
}

.for-you-theatrical-question {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--for-you-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 2% 20%, rgba(138, 82, 255, 0.17), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.018)),
    rgba(9, 14, 27, 0.88);
  padding: 14px 14px 8px;
  margin-bottom: 8px;
  box-shadow:
    inset 3px 0 0 #9a6cff,
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.for-you-theatrical-question::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 30px;
  content: "";
  background: rgba(142, 84, 255, 0.36);
  filter: blur(17px);
  pointer-events: none;
}

.for-you-theatrical-eyebrow,
.for-you-theatrical-question.is-collapsed small {
  color: #c3a8ff;
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.055em;
}

.for-you-theatrical-question h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.02rem, 4.6vw, 1.16rem);
  font-weight: 780;
  letter-spacing: -0.026em;
  line-height: 1.12;
}

.for-you-theatrical-focus-strip {
  display: flex;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  margin-right: -12px;
  padding: 1px 12px 2px 0;
  scroll-padding-inline: 0 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.for-you-theatrical-focus-strip::-webkit-scrollbar,
.for-you-theatrical-match-rail::-webkit-scrollbar {
  display: none;
}

.for-you-theatrical-focus {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  scroll-snap-align: start;
  border: 1px solid rgba(188, 198, 225, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(244, 244, 249, 0.87);
  padding: 0 10px;
  font: inherit;
}

.for-you-theatrical-focus.is-selected {
  border-color: rgba(176, 125, 255, 0.72);
  background: rgba(130, 77, 235, 0.15);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(190, 148, 255, 0.06),
    0 0 18px rgba(128, 81, 234, 0.13);
}

.for-you-theatrical-focus .ui-icon {
  width: 18px;
  height: 18px;
  color: #a889ff;
}

.for-you-theatrical-focus strong {
  font-size: 0.72rem;
  font-weight: 690;
  white-space: nowrap;
}

.for-you-theatrical-skip {
  justify-self: center;
  min-width: 72px;
  min-height: 28px;
  border: 0;
  background: transparent;
  color: rgba(235, 235, 245, 0.62);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
}

.for-you-theatrical-question.is-collapsed {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px 14px;
}

.for-you-theatrical-question.is-collapsed > span {
  display: grid;
  gap: 3px;
}

.for-you-theatrical-question.is-collapsed strong {
  color: #fff;
  font-size: 0.96rem;
}

.for-you-theatrical-question.is-collapsed button {
  min-width: 74px;
  min-height: 40px;
  border: 1px solid rgba(126, 155, 255, 0.36);
  border-radius: 999px;
  background: rgba(45, 104, 224, 0.14);
  color: #5aa0ff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 720;
}

.for-you-theatrical-matches {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.for-you-theatrical-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.for-you-theatrical-section-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1.04rem;
  font-weight: 790;
  letter-spacing: -0.025em;
}

.for-you-theatrical-section-head button {
  min-width: 60px;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #4b94ff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 730;
}

.for-you-theatrical-match-rail {
  display: flex;
  min-width: 0;
  gap: 10px;
  overflow-x: auto;
  margin-right: calc(-1 * clamp(14px, 4vw, 18px));
  padding: 1px clamp(14px, 4vw, 18px) 6px 0;
  scroll-padding-inline: 0 clamp(14px, 4vw, 18px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.for-you-theatrical-match {
  display: grid;
  flex: 0 0 172px;
  min-width: 0;
  height: 184px;
  grid-template-rows: 88px minmax(0, 1fr) 36px;
  gap: 7px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(190, 200, 225, 0.14));
  border-radius: 17px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tint) 34%, rgba(18, 23, 37, 0.96)), rgba(11, 16, 29, 0.98));
  padding: 0 9px 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.for-you-theatrical-match-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  margin: 0 -9px;
  place-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background:
    linear-gradient(180deg, rgba(6, 10, 19, 0.05) 0%, rgba(6, 10, 19, 0.84) 100%),
    var(--match-image, none),
    radial-gradient(circle at 64% 26%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 25%, #10203f), #090d19 72%);
  background-position: center;
  background-size: cover;
}

.for-you-theatrical-match-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.055) 38%, transparent 58%),
    linear-gradient(180deg, transparent 58%, rgba(5, 8, 16, 0.76));
}

.for-you-theatrical-match-visual > span {
  display: grid;
  width: 48px;
  height: 48px;
  z-index: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, rgba(255, 255, 255, 0.22));
  border-radius: 50%;
  background: rgba(8, 12, 24, 0.58);
  color: color-mix(in srgb, var(--accent) 82%, #fff);
  box-shadow:
    0 9px 22px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

.for-you-theatrical-match-visual .ui-icon {
  width: 25px;
  height: 25px;
}

.for-you-theatrical-match-copy {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.for-you-theatrical-match-copy strong,
.for-you-theatrical-match-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.for-you-theatrical-match-copy strong {
  display: -webkit-box;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 770;
  letter-spacing: -0.016em;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.for-you-theatrical-match-copy small {
  color: rgba(235, 235, 245, 0.6);
  font-size: 0.67rem;
  font-weight: 580;
  line-height: 1.2;
  white-space: nowrap;
}

.for-you-theatrical-match-view {
  min-height: 36px;
  border: 1px solid rgba(173, 188, 225, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #4d96ff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 730;
}

.for-you-theatrical-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 16px;
  margin: 2px 0 8px;
}

.for-you-theatrical-dots button {
  width: 22px;
  min-width: 22px;
  height: 16px;
  border: 0;
  background: transparent;
  padding: 0;
  position: relative;
}

.for-you-theatrical-dots button::after {
  position: absolute;
  top: 5px;
  left: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: rgba(154, 163, 187, 0.32);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.for-you-theatrical-dots button.is-active::after {
  background: #2e7ef3;
  box-shadow: 0 0 9px rgba(46, 126, 243, 0.55);
  transform: scale(1.18);
}

.for-you-theatrical-dots button:focus-visible {
  outline: 2px solid #6ca6ff;
  outline-offset: 2px;
  border-radius: 999px;
}

.for-you-theatrical-actions {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.for-you-theatrical-action {
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--for-you-border);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(14, 19, 31, 0.88);
  color: #fff;
  padding: 10px;
  font: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.for-you-theatrical-action-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(154, 120, 255, 0.23);
  border-radius: 50%;
  background: rgba(119, 76, 220, 0.13);
  color: #a88aff;
}

.for-you-theatrical-action:nth-child(2) .for-you-theatrical-action-icon {
  border-color: rgba(83, 138, 255, 0.25);
  background: rgba(45, 100, 220, 0.14);
  color: #70a1ff;
}

.for-you-theatrical-action-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.for-you-theatrical-action-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.for-you-theatrical-action-copy strong {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: -0.012em;
  line-height: 1.12;
}

.for-you-theatrical-action-copy small {
  overflow: hidden;
  color: rgba(235, 235, 245, 0.58);
  font-size: 0.66rem;
  font-weight: 580;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-theatrical-action-arrow {
  color: rgba(235, 235, 245, 0.48);
}

.for-you-theatrical-action-arrow .ui-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 355px) {
  .for-you-theatrical-hero-copy h2 {
    font-size: 1.55rem;
  }

  .for-you-theatrical-match {
    flex-basis: 150px;
  }

  .for-you-theatrical-actions {
    grid-template-columns: 1fr;
  }

  .for-you-theatrical-action {
    min-height: 68px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .for-you-theatrical-spark {
    animation: for-you-theatrical-float 4.8s ease-in-out infinite;
  }
}

@keyframes for-you-theatrical-float {
  0%,
  100% {
    transform: translateY(2px) scale(0.98);
  }

  50% {
    transform: translateY(-3px) scale(1.02);
  }
}


/* For You spacing, recommendation empty state, and sheet gesture v540 */
.for-you-theatrical-hero {
  margin-bottom: 22px;
}

.for-you-theatrical-aurora {
  height: 114px;
}

.for-you-theatrical-ai {
  min-height: 46px;
}

.for-you-theatrical-section-head {
  align-items: center;
}

.for-you-theatrical-section-head button {
  min-height: 24px;
  padding: 0;
}

.for-you-theatrical-match-empty {
  display: grid;
  min-height: 142px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 10px 12px;
  border: 1px solid var(--for-you-border);
  border-radius: 17px;
  background:
    radial-gradient(circle at 12% 16%, rgba(130, 83, 235, 0.14), transparent 36%),
    rgba(12, 17, 29, 0.88);
  padding: 16px;
}

.for-you-theatrical-match-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(164, 126, 255, 0.28);
  border-radius: 50%;
  background: rgba(126, 82, 224, 0.13);
  color: #aa8aff;
}

.for-you-theatrical-match-empty-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.for-you-theatrical-match-empty-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.for-you-theatrical-match-empty-copy strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 760;
}

.for-you-theatrical-match-empty-copy small {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.72rem;
  line-height: 1.3;
}

.for-you-theatrical-match-empty-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px;
}

.for-you-theatrical-match-empty-actions button {
  min-height: 40px;
  border: 1px solid rgba(102, 157, 255, 0.26);
  border-radius: 999px;
  background: rgba(52, 107, 223, 0.11);
  color: #5c9dff;
  padding: 0 14px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 730;
}

.add-community-sheet {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
  will-change: transform;
}

.add-community-sheet-backdrop {
  transition: opacity 160ms ease;
}

.add-community-sheet[data-sheet-dragging="true"] {
  transition: none !important;
  user-select: none;
}

.add-community-sheet > .sheet-grabber {
  position: relative;
  z-index: 1;
  align-self: center;
  touch-action: none;
  overscroll-behavior: contain;
}

.add-community-sheet > .sheet-grabber::before {
  position: absolute;
  inset: -12px -16px;
  content: "";
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .add-community-sheet,
  .add-community-sheet-backdrop {
    transition-duration: 0.01ms !important;
  }
}


/* Nickname generator and spotlight app tour v541 */
.onboarding-shell:has(.nickname-onboarding-page) {
  background:
    radial-gradient(circle at 50% 12%, rgba(55, 103, 230, 0.2), transparent 30%),
    radial-gradient(circle at 50% 34%, rgba(133, 88, 236, 0.11), transparent 28%),
    #050914;
}

.nickname-onboarding-page {
  display: grid;
  width: min(100%, 430px);
  min-height: 100svh;
  align-content: start;
  margin: 0 auto;
  padding:
    max(18px, env(safe-area-inset-top))
    clamp(16px, 5vw, 22px)
    max(34px, env(safe-area-inset-bottom));
}

.nickname-onboarding-page .brand-row {
  margin-bottom: clamp(32px, 8vh, 68px);
  color: rgba(245, 246, 255, 0.92);
  font-size: 0.96rem;
  font-weight: 740;
}

.nickname-onboarding-hero {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin-bottom: 34px;
  text-align: center;
}

.nickname-onboarding-mark {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin-bottom: 13px;
  border: 1px solid rgba(174, 143, 255, 0.25);
  border-radius: 28px;
  background:
    radial-gradient(circle, rgba(153, 117, 255, 0.24), rgba(45, 96, 218, 0.08) 58%, transparent 72%);
  color: #c2adff;
  box-shadow:
    0 0 34px rgba(95, 94, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nickname-onboarding-mark .ui-icon {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 0 12px rgba(165, 130, 255, 0.72));
}

.nickname-onboarding-eyebrow {
  color: #ad90ff;
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.nickname-onboarding-page h1 {
  margin: 0;
  color: #f8f8fc;
  font-size: clamp(1.9rem, 8vw, 2.35rem);
  font-weight: 820;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.nickname-onboarding-page .onboarding-copy {
  margin: 0;
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.92rem;
  line-height: 1.35;
}

.nickname-onboarding-form {
  display: grid;
  gap: 12px;
}

.nickname-onboarding-form > .auth-field-label {
  color: rgba(235, 235, 245, 0.72);
  font-size: 0.8rem;
  font-weight: 720;
}

.nickname-field-shell {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(175, 187, 222, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(12, 17, 31, 0.9);
  padding: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.nickname-field-shell .text-field {
  min-width: 0;
  min-height: 52px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0 11px;
  font-size: 1.05rem;
  font-weight: 690;
  box-shadow: none;
}

.nickname-field-shell .text-field:focus {
  outline: 0;
  box-shadow: none;
}

.nickname-field-shell:focus-within {
  border-color: rgba(125, 153, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(91, 135, 255, 0.16),
    0 0 0 4px rgba(50, 105, 235, 0.1);
}

.nickname-random-btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(164, 124, 255, 0.34);
  border-radius: 14px;
  background: rgba(126, 79, 226, 0.13);
  color: #b79aff;
  padding: 0 13px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  white-space: nowrap;
}

.nickname-random-btn .ui-icon {
  width: 18px;
  height: 18px;
}

.nickname-random-btn:active {
  transform: scale(0.98);
}

.nickname-generator-status {
  margin: -3px 3px 0;
  color: #9eb8ff;
  font-size: 0.73rem;
  line-height: 1.3;
}

.nickname-privacy-note {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  margin: 3px 0 0;
  border: 1px solid rgba(173, 185, 218, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(235, 235, 245, 0.66);
  padding: 11px 13px;
  font-size: 0.78rem;
  line-height: 1.3;
}

.nickname-privacy-note .ui-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: #a98aff;
}

.nickname-onboarding-form .onboarding-continue {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(24, 91, 231, 0.23);
}

.nickname-onboarding-form .onboarding-continue .ui-icon {
  width: 20px;
  height: 20px;
}

.first-use-guide-backdrop {
  z-index: 70;
  background: rgba(1, 4, 12, 0.72);
  backdrop-filter: blur(2px);
}

.first-use-guide-host {
  z-index: 71 !important;
  pointer-events: none !important;
}

[data-first-use-section].first-use-guide-host {
  position: relative;
}

.first-use-guide-target:not(.page-header) {
  position: relative;
}

.first-use-guide-target {
  z-index: 72 !important;
  border-radius: 16px;
  outline: 2px solid rgba(135, 112, 255, 0.96);
  outline-offset: 5px;
  box-shadow:
    0 0 0 8px rgba(115, 92, 255, 0.12),
    0 0 32px rgba(83, 116, 255, 0.38) !important;
}

.bottom-nav.first-use-guide-host .nav-item:not(.first-use-guide-target) {
  opacity: 0.32;
}

.first-use-guide-card {
  right: max(14px, calc((100vw - 430px) / 2 + 14px));
  bottom: auto;
  left: max(14px, calc((100vw - 430px) / 2 + 14px));
  z-index: 73;
  gap: 11px;
  max-height: calc(100svh - 24px);
  border-color: rgba(176, 188, 221, 0.2);
  background:
    radial-gradient(circle at 14% 0%, rgba(115, 80, 226, 0.2), transparent 42%),
    rgba(14, 19, 32, 0.96);
  padding: 16px;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  transition:
    top 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.first-use-guide-card:focus {
  outline: none;
}

.first-use-guide-card .first-use-guide-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.first-use-guide-card .first-use-guide-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.first-use-guide-card .first-use-guide-copy {
  gap: 5px;
  padding-right: 28px;
}

.first-use-guide-card .first-use-guide-copy h2 {
  color: #fff;
  font-size: 1.08rem;
}

.first-use-guide-card .first-use-guide-copy p {
  color: rgba(235, 235, 245, 0.66);
  font-size: 0.84rem;
  line-height: 1.36;
}

.first-use-guide-card .first-use-guide-actions {
  grid-template-columns: 0.8fr 1.2fr;
}

.first-use-guide-card .first-use-guide-actions button {
  min-height: 44px;
}

@media (max-width: 370px) {
  .nickname-field-shell {
    grid-template-columns: 1fr;
  }

  .nickname-random-btn {
    width: 100%;
  }

  .nickname-onboarding-page .brand-row {
    margin-bottom: 28px;
  }

  .nickname-onboarding-mark {
    width: 70px;
    height: 70px;
  }
}

@media (max-height: 690px) {
  .nickname-onboarding-page .brand-row {
    margin-bottom: 22px;
  }

  .nickname-onboarding-hero {
    gap: 6px;
    margin-bottom: 22px;
  }

  .nickname-onboarding-mark {
    width: 64px;
    height: 64px;
    margin-bottom: 5px;
  }

  .nickname-onboarding-mark .ui-icon {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .first-use-guide-card,
  .nickname-random-btn {
    transition-duration: 0.01ms !important;
  }
}

/* v542: left-edge back preview; page tabs remain tap-only. */
.root-tab-swipe-stage.is-edge-back .root-tab-swipe-panel.is-current {
  position: relative;
  z-index: 1;
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.32);
}

.root-tab-swipe-stage.is-edge-back .root-tab-swipe-panel.is-target {
  background: #060913;
}

.root-tab-swipe-stage.is-edge-back .root-tab-swipe-panel.is-target > .page {
  opacity: 0.96;
}

@media (prefers-reduced-motion: reduce) {
  .root-tab-swipe-stage.is-edge-back .root-tab-swipe-track {
    transition-duration: 0.01ms !important;
  }
}


/* v543: compact co-creator feedback and a write-free newcomer preview. */
.co-creator-flow-card {
  position: relative;
  overflow: hidden;
}

.co-creator-flow-head {
  padding-bottom: 2px;
}

.co-creator-flow-head small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.co-creator-flow-privacy {
  color: var(--text) !important;
  font-weight: 760;
}

.co-creator-flow {
  display: grid;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--separator));
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--blue) 14%, transparent), transparent 42%),
    var(--surface);
}

.co-creator-flow-copy {
  display: grid;
  gap: 7px;
}

.co-creator-flow-kicker {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.co-creator-flow-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.2;
}

.co-creator-flow-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.42;
}

.co-creator-flow-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.co-creator-flow-choice {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 52px;
  width: 100%;
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 760;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.co-creator-flow-choice:hover,
.co-creator-flow-choice:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 62%, var(--separator));
  outline: none;
}

.co-creator-flow-choice.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
  color: var(--blue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent);
}

.co-creator-flow-field {
  display: grid;
  gap: 9px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 760;
}

.co-creator-flow-field textarea {
  min-height: 122px;
  margin: 0;
  border-radius: 16px;
  resize: vertical;
}

.co-creator-flow-actions {
  margin-top: 14px;
}

.preview-first-user-banner {
  position: fixed;
  z-index: 120;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--separator));
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  background: color-mix(in srgb, var(--surface) 88%, #000 12%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(1.25);
}

.preview-first-user-banner span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.preview-first-user-banner strong {
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1.1;
}

.preview-first-user-banner small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-first-user-banner button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
  color: var(--blue);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 780;
}

@media (max-width: 430px) {
  .co-creator-flow {
    padding: 15px;
  }

  .preview-first-user-banner {
    max-width: calc(100vw - 16px);
  }
}


/* v544: explain For You choice limits, keep the AI path stable, and add focused tour previews. */
.for-you-personalization-selection-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
}

.for-you-personalization-selection-meta strong {
  color: var(--blue);
  font-weight: 830;
}

.for-you-personalization-explore-note {
  margin: -5px 0 1px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.32;
}

.for-you-personalization-need > .for-you-personalization-need-copy {
  display: grid;
  width: auto;
  height: auto;
  min-width: 0;
  place-items: unset;
  gap: 2px;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.for-you-personalization-need-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.15;
}

.for-you-personalization-need.is-explore {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--separator));
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}

.first-use-guide-card {
  overflow-y: auto;
}

.first-use-guide-preview {
  position: relative;
  display: grid;
  min-height: 76px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--separator));
  border-radius: 15px;
  background:
    radial-gradient(circle at 10% 10%, rgba(95, 83, 218, 0.2), transparent 44%),
    color-mix(in srgb, var(--surface-elevated) 80%, #09111f);
  color: var(--text);
  pointer-events: none;
}

.first-use-guide-preview-add {
  grid-template-rows: 8px 20px minmax(0, 1fr);
  gap: 4px;
  padding: 7px 9px;
}

.first-use-guide-preview-grabber {
  justify-self: center;
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.first-use-guide-preview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.first-use-guide-preview-title strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-use-guide-preview-title em,
.first-use-guide-preview-row em {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.first-use-guide-preview-rows {
  display: grid;
  gap: 3px;
  min-height: 0;
}

.first-use-guide-preview-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.first-use-guide-preview-row i,
.first-use-guide-preview-worlds span,
.first-use-guide-preview-spark {
  display: grid;
  place-items: center;
  color: var(--tour-accent, var(--blue));
}

.first-use-guide-preview-row i {
  width: 18px;
  height: 18px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tour-accent, var(--blue)) 13%, var(--surface));
}

.first-use-guide-preview-row .ui-icon {
  width: 11px;
  height: 11px;
}

.first-use-guide-preview-row strong {
  overflow: hidden;
  font-size: 0.64rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-use-guide-preview-rows > small {
  align-self: center;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 650;
}

.first-use-guide-preview-browse {
  grid-template-columns: minmax(110px, 0.78fr) 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px;
}

.first-use-guide-preview-search {
  display: grid;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--separator) 80%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--muted);
  padding: 0 7px;
  font-size: 0.6rem;
  font-weight: 650;
}

.first-use-guide-preview-search .ui-icon {
  width: 13px;
  height: 13px;
}

.first-use-guide-preview-search span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-use-guide-preview-worlds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.first-use-guide-preview-worlds span {
  width: 25px;
  height: 25px;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--tour-accent, var(--blue)) 30%, var(--separator));
  border-radius: 9px;
  background: color-mix(in srgb, var(--tour-accent, var(--blue)) 12%, var(--surface));
}

.first-use-guide-preview-worlds .ui-icon {
  width: 13px;
  height: 13px;
}

.first-use-guide-preview-for-you {
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
}

.first-use-guide-preview-spark {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(169, 137, 255, 0.38);
  border-radius: 13px;
  background:
    radial-gradient(circle, rgba(165, 123, 255, 0.3), rgba(68, 105, 218, 0.1) 62%, transparent 70%);
  color: #c3adff;
}

.first-use-guide-preview-spark .ui-icon {
  width: 22px;
  height: 22px;
}

.first-use-guide-preview-for-you > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.first-use-guide-preview-for-you strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.73rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-use-guide-preview-for-you small {
  color: var(--blue);
  font-size: 0.65rem;
  font-weight: 760;
}

@media (max-height: 700px) {
  .first-use-guide-preview {
    display: none;
  }
}


/* v545: native-feel gesture ownership, keyboard stability, and mobile hit targets. */
.academics-assist-intents .course-programme-intro small,
.academics-assist-level-wrap small {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.for-you-theatrical-focus,
.sheet-scope-chip,
.sheet-kind-segment,
.for-you-theatrical-skip {
  min-height: 44px;
}

.for-you-theatrical-section-head button {
  min-height: 44px;
  margin-block: -10px;
}

.for-you-theatrical-dots {
  min-height: 32px;
  gap: 0;
  margin: -6px 0 2px;
}

.for-you-theatrical-dots button {
  width: 44px;
  min-width: 44px;
  height: 32px;
}

.for-you-theatrical-dots button::after {
  top: 13px;
  left: 19px;
}

.root-tab-swipe-panel {
  transform: translateZ(0);
}

.root-tab-swipe-panel .page-header,
.root-tab-swipe-panel .bottom-nav,
.root-tab-swipe-panel .card,
.root-tab-swipe-panel .for-you-theatrical-match {
  backdrop-filter: none !important;
}

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-root-swipe-settle="true"] > .root-tab-swipe-stage .root-tab-swipe-track,
  .app-shell[data-root-nav-settle="true"] .bottom-nav::before {
    transition-duration: 0.01ms !important;
  }
}


/* For You World progress + persistent weekly focus · sprint UX v547 */
.for-you-ai-world-progress {
  display: grid;
  width: min(100%, 318px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.for-you-ai-world {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  max-width: 44px;
  min-width: 0;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(180, 191, 222, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(218, 223, 239, 0.46);
  padding: 0;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.for-you-ai-world:active {
  transform: scale(0.94);
}

.for-you-ai-world > span,
.for-you-ai-world > span .ui-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}

.for-you-ai-world.is-progress {
  border-color: color-mix(in srgb, var(--world-accent) 54%, rgba(255, 255, 255, 0.18));
  background: color-mix(in srgb, var(--world-tint) 66%, rgba(14, 19, 33, 0.96));
  color: var(--world-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--world-accent) 9%, transparent);
}

.for-you-ai-world.is-progress > i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 8px;
  height: 8px;
  border: 2px solid #08101e;
  border-radius: 50%;
  background: var(--world-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--world-accent) 72%, transparent);
}

.for-you-ai-world.is-complete {
  border-color: color-mix(in srgb, var(--world-accent) 62%, rgba(255, 255, 255, 0.22));
  background:
    radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--world-accent) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--world-tint) 72%, rgba(15, 21, 35, 0.96));
  color: var(--world-accent);
}

.for-you-ai-world > em {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 2px solid #070c17;
  border-radius: 50%;
  background: var(--world-accent);
  color: #06101c;
  font-style: normal;
}

.for-you-ai-world > em .ui-icon {
  width: 9px;
  height: 9px;
  stroke-width: 3;
}

.for-you-ai-progress-copy {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 34px;
  margin-top: -1px;
}

.for-you-ai-progress-copy strong {
  color: rgba(248, 248, 252, 0.9);
  font-size: 0.76rem;
  font-weight: 720;
  letter-spacing: -0.012em;
}

.for-you-ai-progress-copy small {
  color: rgba(235, 235, 245, 0.56);
  font-size: 0.7rem;
  font-weight: 560;
}

.for-you-theatrical-hero:has(.for-you-ai-world-progress) .for-you-theatrical-ai {
  margin-top: 4px;
}

.for-you-weekly-module {
  --for-you-border: rgba(183, 193, 224, 0.16);
  position: relative;
  display: grid;
  min-width: 0;
  gap: 14px;
}

.for-you-weekly-module .for-you-theatrical-question {
  overflow: visible;
  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 12px;
}

.for-you-weekly-helper {
  max-width: calc(100% - 42px);
  margin: -1px 0 3px;
  color: rgba(235, 235, 245, 0.56);
  font-size: 0.7rem;
  font-weight: 550;
  line-height: 1.3;
}

.for-you-weekly-menu {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 8;
}

.for-you-weekly-menu > summary {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(235, 235, 245, 0.62);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.for-you-weekly-menu > summary::-webkit-details-marker {
  display: none;
}

.for-you-weekly-menu > summary .ui-icon {
  width: 19px;
  height: 19px;
}

.for-you-weekly-menu[open] > summary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.for-you-weekly-menu > div {
  position: absolute;
  top: 39px;
  right: 0;
  display: grid;
  width: 158px;
  overflow: hidden;
  border: 1px solid rgba(188, 198, 225, 0.22);
  border-radius: 13px;
  background: rgba(20, 26, 40, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(20px);
}

.for-you-weekly-menu > div button {
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid rgba(188, 198, 225, 0.12);
  background: transparent;
  color: rgba(248, 248, 252, 0.92);
  padding: 0 13px;
  text-align: left;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
}

.for-you-weekly-menu > div button:last-child {
  border-bottom: 0;
}

.for-you-weekly-module.is-hidden {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(183, 193, 224, 0.14);
  border-radius: 17px;
  background: rgba(18, 23, 37, 0.72);
  padding: 12px 13px;
}

.for-you-weekly-hidden-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: rgba(85, 126, 229, 0.12);
  color: #78a4ff;
}

.for-you-weekly-hidden-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.for-you-weekly-hidden-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.for-you-weekly-hidden-copy strong {
  color: rgba(248, 248, 252, 0.92);
  font-size: 0.82rem;
}

.for-you-weekly-hidden-copy small {
  overflow: hidden;
  color: rgba(235, 235, 245, 0.56);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-weekly-module.is-hidden > button {
  min-height: 38px;
  border: 1px solid rgba(82, 148, 255, 0.3);
  border-radius: 999px;
  background: rgba(45, 104, 224, 0.13);
  color: #5da0ff;
  padding: 0 12px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 720;
  white-space: nowrap;
}

.for-you-first-post-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(120, 156, 255, 0.18);
  background:
    radial-gradient(circle at 6% 10%, rgba(77, 118, 245, 0.14), transparent 35%),
    rgba(18, 23, 37, 0.86);
  padding: 14px;
}

.for-you-first-post-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(62, 120, 238, 0.15);
  color: #6aa5ff;
}

.for-you-first-post-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.for-you-first-post-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.for-you-first-post-copy small {
  color: #7eabff;
  font-size: 0.64rem;
  font-weight: 820;
  letter-spacing: 0.06em;
}

.for-you-first-post-copy h2,
.for-you-first-post-copy p {
  margin: 0;
}

.for-you-first-post-copy h2 {
  color: #fff;
  font-size: 1rem;
  line-height: 1.15;
}

.for-you-first-post-copy p {
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.73rem;
  line-height: 1.35;
}

.for-you-first-post-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.for-you-first-post-actions button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(185, 197, 230, 0.15);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.026);
  color: rgba(248, 248, 252, 0.9);
  padding: 8px;
  text-align: left;
  font: inherit;
}

.for-you-first-post-actions .ui-icon {
  width: 18px;
  height: 18px;
  color: #77a8ff;
}

.for-you-first-post-actions strong {
  min-width: 0;
  font-size: 0.68rem;
  line-height: 1.15;
}

.community-import-covered {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  border: 1px solid rgba(74, 192, 122, 0.22);
  border-radius: 13px;
  background: rgba(40, 151, 89, 0.08);
  padding: 10px;
}

.community-import-covered > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(62, 190, 116, 0.14);
  color: #55d486;
}

.community-import-covered > span:first-child .ui-icon {
  width: 18px;
  height: 18px;
}

.community-import-covered > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-import-covered strong {
  color: rgba(248, 248, 252, 0.92);
  font-size: 0.76rem;
}

.community-import-covered small {
  color: rgba(235, 235, 245, 0.56);
  font-size: 0.66rem;
  line-height: 1.3;
}

.community-import-covered button {
  min-height: 38px;
  border: 1px solid rgba(73, 196, 125, 0.34);
  border-radius: 999px;
  background: rgba(52, 178, 104, 0.13);
  color: #62dc93;
  padding: 0 11px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 740;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .for-you-ai-world-progress {
    gap: 6px;
  }

  .for-you-ai-world {
    max-width: 40px;
  }

  .for-you-first-post-actions {
    grid-template-columns: 1fr;
  }

  .for-you-first-post-actions button {
    min-height: 44px;
  }

  .community-import-covered {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .community-import-covered button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 340px) {
  .for-you-ai-world-progress {
    gap: 4px;
  }

  .for-you-ai-world {
    max-width: 36px;
  }

  .for-you-ai-world > span,
  .for-you-ai-world > span .ui-icon {
    width: 17px;
    height: 17px;
  }

  .for-you-weekly-module.is-hidden {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .for-you-weekly-module.is-hidden > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .for-you-ai-world {
    transition-duration: 0.01ms;
  }
}


/* v548: gesture ownership, clipped menu accents, one-CTA Academics, and readable For You cards. */
.app-shell .add-community-sheet,
.app-shell .action-sheet {
  --sheet-drag-y: 0px;
  transform: translate3d(0, var(--sheet-drag-y), 0);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
  will-change: transform;
}

.app-shell .home-start-action-sheet {
  transform: translate3d(-50%, var(--sheet-drag-y), 0);
}

.app-shell .add-community-sheet[data-sheet-dragging="true"],
.app-shell .action-sheet[data-sheet-dragging="true"] {
  transition: none !important;
  user-select: none;
}

.app-shell .action-sheet > .sheet-grabber,
.app-shell .add-community-sheet > .sheet-grabber {
  touch-action: none;
  overscroll-behavior: contain;
}

.app-shell .action-sheet > .sheet-title,
.app-shell .add-community-sheet > .sheet-title {
  touch-action: none;
  cursor: grab;
}

.app-shell .action-sheet[data-sheet-dragging="true"] > .sheet-title,
.app-shell .add-community-sheet[data-sheet-dragging="true"] > .sheet-title {
  cursor: grabbing;
}

.app-shell .world-page .community-row-card {
  isolation: isolate;
}

.app-shell .world-page .community-row-card.has-open-menu::before {
  border-radius: 18px 0 0 18px;
  box-shadow: none;
  filter: none;
}

.app-shell .world-page .community-row-card.has-open-menu .community-row-main,
.app-shell .world-page .community-row-card.has-open-menu .community-row-actions {
  position: relative;
  z-index: 1;
}

.app-shell .world-page .community-row-card.has-open-menu .context-menu {
  z-index: 70;
}

.app-shell .add-category-chip-row {
  scroll-behavior: auto;
}

.app-shell .for-you-theatrical-match {
  height: 202px;
  grid-template-rows: 88px minmax(50px, 1fr) 36px;
}

.app-shell .for-you-theatrical-match-copy {
  min-height: 48px;
  grid-template-rows: minmax(0, 2.24em) auto;
}

.app-shell .for-you-theatrical-match-copy strong {
  min-height: 2.24em;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .add-community-sheet,
  .app-shell .action-sheet {
    transition-duration: 0.01ms !important;
  }
}


/* v550: Apple-like gesture ownership, safe menu accents, compact programme review, and full Games discovery. */
.app-shell .world-page .community-row-card.has-open-menu::before {
  top: 2px !important;
  bottom: 2px !important;
  left: 2px !important;
  width: 3px !important;
  border-radius: 16px 0 0 16px !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0.88;
}

.app-shell .for-you-theatrical-match {
  height: 220px;
  grid-template-rows: 92px minmax(66px, 1fr) 36px;
}

.app-shell .for-you-theatrical-match-copy {
  min-height: 62px;
  grid-template-rows: minmax(0, 3.36em) auto;
}

.app-shell .for-you-theatrical-match-copy strong {
  min-height: 3.36em;
  -webkit-line-clamp: 3;
}

.course-programme-tool-section {
  display: grid;
  gap: 8px;
}

.course-programme-tool-section > .course-programme-privacy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.course-programme-tool-section > .course-programme-privacy span {
  color: rgba(235, 235, 245, 0.48);
  font-size: 0.68rem;
  font-weight: 620;
}

.course-programme-more {
  overflow: hidden;
  border: 1px solid rgba(142, 158, 195, 0.18);
  border-radius: 16px;
  background: rgba(8, 13, 24, 0.22);
}

.course-programme-more > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  color: rgba(248, 248, 252, 0.92);
  padding: 0 14px;
  font-size: 0.78rem;
  font-weight: 760;
}

.course-programme-more > summary::-webkit-details-marker {
  display: none;
}

.course-programme-more > summary::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(142, 181, 255, 0.78);
  border-bottom: 2px solid rgba(142, 181, 255, 0.78);
  content: "";
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.course-programme-more[open] > summary::after {
  transform: rotate(225deg);
}

.course-programme-more > summary span {
  margin-left: auto;
  color: rgba(235, 235, 245, 0.48);
  font-size: 0.7rem;
}

.course-programme-more-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(142, 158, 195, 0.13);
  padding: 10px;
}

.academics-assist-review-card {
  display: grid;
  gap: 13px;
  border: 1px solid rgba(60, 143, 255, 0.34);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(51, 128, 255, 0.2), transparent 38%),
    rgba(18, 24, 39, 0.88);
  padding: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.24);
}

.academics-assist-review-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: rgba(45, 126, 243, 0.18);
  color: #4c96ff;
}

.academics-assist-review-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.academics-assist-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.academics-assist-review-head > span {
  display: grid;
  gap: 2px;
}

.academics-assist-review-head small {
  color: #6ba7ff;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.academics-assist-review-head strong {
  color: #fff;
  font-size: 1.06rem;
}

.academics-assist-review-head button {
  min-height: 38px;
  border: 1px solid rgba(90, 153, 255, 0.32);
  border-radius: 999px;
  background: rgba(45, 126, 243, 0.12);
  color: #66a5ff;
  padding: 0 14px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 740;
}

.academics-assist-review-card > p {
  margin: 0;
  color: rgba(235, 235, 245, 0.62);
  font-size: 0.76rem;
  line-height: 1.42;
}

.academics-assist-review-group {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(160, 175, 208, 0.14);
  padding-top: 11px;
}

.academics-assist-review-group > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.academics-assist-review-group > div strong {
  color: rgba(248, 248, 252, 0.94);
  font-size: 0.78rem;
}

.academics-assist-review-group > div small {
  color: #6ba7ff;
  font-size: 0.72rem;
  font-weight: 760;
}

.academics-assist-review-group ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.academics-assist-review-group li {
  overflow-wrap: anywhere;
  color: rgba(235, 235, 245, 0.64);
  font-size: 0.73rem;
  line-height: 1.32;
}

.academics-assist-review-group li::before {
  margin-right: 7px;
  color: #4c96ff;
  content: "✓";
}

.academics-assist-review-group li.is-more {
  color: rgba(235, 235, 245, 0.46);
}

.academics-assist-review-group li.is-more::before {
  content: "";
  margin: 0;
}

.world-empty-discovery-card p {
  max-width: 38ch;
}

@media (prefers-reduced-motion: reduce) {
  .course-programme-more > summary::after {
    transition-duration: 0.01ms;
  }
}


/* v551 — keep world-card accent paint clipped while the action menu escapes. */
.app-shell .world-page .community-row-card::before {
  content: none !important;
}
.app-shell .world-page .community-row-chrome {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.app-shell .world-page .community-row-chrome > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 44%, transparent)
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 24%, transparent);
  opacity: 0.76;
}
.app-shell .world-page .community-row-card > .community-row-main,
.app-shell .world-page .community-row-card > .community-row-actions {
  position: relative;
  z-index: 1;
}


/* v553: a narrow app-owned edge zone keeps nested back gestures reliable in
   iOS embedded browsers without recreating the previous multi-page swipe stage. */
.root-edge-back-zone {
  position: absolute;
  z-index: 140;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(28px + env(safe-area-inset-left));
  background: transparent;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  -webkit-user-select: none;
  user-select: none;
}


.sheet-community-row.is-joined {
  opacity: 0.88;
}

.sheet-community-row.is-joined .sheet-row-action {
  border-color: rgba(48, 209, 88, 0.28);
  background: rgba(48, 209, 88, 0.12);
  color: #7ee787;
}