.icon {
  width:var(--icon-size);
  height:var(--icon-size);
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:var(--border-selected);
  stroke-linecap:round;
  stroke-linejoin:round
}
.button {
  min-height:var(--button-height);
  min-width:var(--touch-target);
  border:0;
  border-radius:var(--radius-pill);
  padding:var(--space-6) var(--space-8);
  background:var(--color-primary);
  color:var(--color-on-primary);
  font-size:var(--font-lg);
  font-weight:var(--weight-semibold);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:var(--space-3);
  transition:opacity var(--duration-fast) var(--ease-standard)
}
.button--secondary {
  background:var(--color-primary-soft);
  color:var(--color-primary-dark)
}
.button--outline {
  background:var(--color-card);
  border:var(--border-width) solid var(--color-border);
  color:var(--color-text)
}
.button--danger {
  background:var(--color-danger)
}
.button--ghost {
  background:var(--color-clear);
  color:var(--color-text-muted);
  font-size:var(--font-sm);
  padding:var(--space-2);
  font-weight:var(--weight-normal)
}
.button--active {
  color:var(--color-primary);
  background:var(--color-primary-soft)
}
.button:disabled {
  opacity:var(--opacity-disabled)
}
.button:active:not(:disabled) {
  transform:scale(var(--scale-pressed))
}
.card,.post-card {
  min-width:0;
  overflow-wrap:anywhere;
  background:var(--color-card);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-7);
  display:flex;
  flex-direction:column;
  gap:var(--space-5)
}
.post-card--promo {
  background:var(--color-promo-bg);
  border-color:var(--color-promo-border);
  padding:var(--space-8)
}
.post-card__header {
  display:flex;
  align-items:center;
  gap:var(--space-4)
}
.post-card__name {
  font-size:var(--font-md);
  font-weight:var(--weight-semibold);
  overflow-wrap:anywhere
}
.post-card__meta {
  font-size:var(--font-xs);
  color:var(--color-text-muted)
}
.post-card__body {
  font-size:var(--font-md);
  line-height:var(--line-body);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.post-card__body--folded {
  display:-webkit-box;
  -webkit-line-clamp:var(--fold-lines);
  -webkit-box-orient:vertical;
  overflow:hidden
}
.post-card__photos {
  display:grid;
  grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));
  gap:var(--space-3)
}
.post-card__photos--single {
  grid-template-columns:minmax(0,1fr)
}
.post-card__photo {
  width:100%;
  height:var(--post-image-height);
  object-fit:cover;
  border-radius:var(--radius-md);
  background:var(--color-skeleton)
}
.post-card__actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:var(--border-width) solid var(--color-border);
  padding-top:var(--space-2)
}
.post-card__views {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--font-sm);
  color:var(--color-text-muted);
  min-height:var(--touch-target)
}
.avatar {
  width:var(--avatar-size);
  height:var(--avatar-size);
  border-radius:var(--radius-round);
  background:var(--color-primary-soft);
  color:var(--color-primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-weight:var(--weight-semibold);
  object-fit:cover
}
.avatar--large {
  width:var(--avatar-large);
  height:var(--avatar-large)
}
.chip {
  display:inline-flex;
  align-items:center;
  padding:var(--space-1) var(--space-4);
  border-radius:var(--radius-pill);
  font-size:var(--font-xs);
  white-space:nowrap;
  background:var(--color-primary-soft);
  color:var(--color-primary-dark)
}
.chip--promo {
  background:var(--color-warning-soft);
  color:var(--color-promo)
}
.chip--game,.chip--chat {
  background:var(--color-lavender-soft);
  color:var(--color-lavender)
}
.lock-tag {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding-inline:var(--space-3);
  border-radius:var(--radius-sm);
  background:var(--color-lavender-soft);
  color:var(--color-lavender);
  font-size:var(--font-sm);
  min-height:var(--touch-target)
}
.input {
  width:100%;
  min-height:var(--touch-target);
  border:var(--border-width) solid var(--color-input-border);
  border-radius:var(--radius-md);
  background:var(--color-card);
  color:var(--color-text);
  padding:var(--space-6) var(--space-7)
}
.input::placeholder {
  color:var(--color-placeholder)
}
.input[aria-invalid=true] {
  border-color:var(--color-danger)
}
textarea.input {
  min-height:var(--textarea-height);
  resize:vertical
}
.field {
  display:flex;
  flex-direction:column;
  gap:var(--space-3)
}
.field__error {
  color:var(--color-danger);
  font-size:var(--font-sm)
}
.option {
  min-height:var(--touch-target);
  display:flex;
  align-items:center;
  gap:var(--space-6);
  padding:var(--space-7);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-option);
  background:var(--color-card);
  text-align:start;
  width:100%
}
.option--selected {
  border-color:var(--color-primary);
  box-shadow:inset 0 0 0 var(--border-width) var(--color-primary);
  background:var(--color-primary-soft)
}
.option__radio {
  width:var(--icon-size);
  height:var(--icon-size);
  border:var(--border-selected) solid var(--color-dot);
  border-radius:var(--radius-round)
}
.option--selected .option__radio {
  border:var(--space-3) solid var(--color-primary)
}
.segmented {
  display:flex;
  gap:var(--space-3);
  flex-wrap:nowrap;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:var(--space-2);
  scroll-padding-inline:var(--space-2)
}
.segmented::-webkit-scrollbar {
  display:none
}
.segmented .button {
  flex:1 0 auto;
  white-space:nowrap;
  padding-inline:var(--space-6);
  font-size:var(--font-md);
  font-weight:var(--weight-normal)
}
.segmented .button--active {
  background:var(--color-primary);
  color:var(--color-on-primary)
}
.notice {
  padding:var(--space-5) var(--space-6);
  border-radius:var(--radius-md);
  background:var(--color-primary-soft);
  color:var(--color-text-muted);
  font-size:var(--font-sm);
  line-height:var(--line-body)
}
.top-nav {
  height:var(--top-nav-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:var(--space-4)
}
.top-nav__title {
  font-size:var(--font-title);
  font-weight:var(--weight-semibold)
}
.brand-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-6) var(--space-8) var(--space-2)
}
.brand-header__name {
  font-size:var(--font-brand);
  font-weight:var(--weight-bold);
  color:var(--color-primary)
}
.brand-header__tagline {
  font-size:var(--font-xs);
  color:var(--color-text-muted)
}
.unread-dot {
  position:absolute;
  right:var(--space-4);
  top:var(--space-2);
  width:var(--unread-size);
  height:var(--unread-size);
  border-radius:var(--radius-round);
  background:var(--color-danger)
}
.brand-header__bell {
  position:relative
}
.bottom-nav {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--page-max);
  height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  padding:var(--space-3) var(--space-8) env(safe-area-inset-bottom);
  background:var(--color-card);
  border-top:var(--border-width) solid var(--color-border);
  display:flex;
  justify-content:space-around;
  align-items:flex-start;
  z-index:var(--z-nav)
}
.bottom-nav__item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:var(--touch-target);
  min-height:var(--touch-target);
  font-size:var(--font-xs);
  color:var(--color-text-muted)
}
.bottom-nav__item--active {
  color:var(--color-primary)
}
.bottom-nav__publish {
  margin-top:var(--fab-overlap);
  width:var(--fab-size);
  height:var(--fab-size);
  border:var(--space-2) solid var(--color-background);
  border-radius:var(--radius-round);
  background:var(--color-primary);
  color:var(--color-on-primary);
  display:flex;
  align-items:center;
  justify-content:center
}
.banner {
  display:flex;
  flex-direction:column;
  gap:var(--space-2)
}
.banner__slide {
  position:relative;
  display:block;
  aspect-ratio:var(--banner-ratio);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--color-primary-soft);
  width:100%;
  padding:0;
  border:0
}
.banner__image {
  width:100%;
  height:100%;
  object-fit:cover
}
.banner__count {
  position:absolute;
  right:var(--space-5);
  bottom:var(--space-4);
  background:var(--color-scrim);
  color:var(--color-on-primary);
  padding:var(--space-1) var(--space-4);
  border-radius:var(--radius-pill);
  font-size:var(--font-xs)
}
.banner__dots {
  display:flex;
  justify-content:center
}
.banner__dot {
  min-width:var(--touch-target);
  min-height:var(--touch-target);
  background:none;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center
}
.banner__dot::after {
  content:'';
  width:var(--dot-size);
  height:var(--dot-size);
  background:var(--color-dot);
  border-radius:var(--radius-sm)
}
.banner__dot--active::after {
  width:var(--dot-active);
  background:var(--color-accent)
}
.empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-5);
  padding:var(--space-14) var(--space-4)
}
.empty-state__icon {
  width:var(--state-size);
  height:var(--state-size);
  border-radius:var(--radius-round);
  background:var(--color-lavender-soft);
  color:var(--color-lavender);
  display:flex;
  align-items:center;
  justify-content:center
}
.empty-state__icon .icon {
  width:var(--icon-state);
  height:var(--icon-state)
}
.skeleton {
  background:var(--color-skeleton);
  border-radius:var(--radius-sm);
  height:var(--skeleton-height);
  animation:pulse var(--duration-skeleton) var(--ease-standard) infinite alternate
}
.skeleton--avatar {
  width:var(--avatar-size);
  height:var(--avatar-size);
  border-radius:var(--radius-round)
}
.skeleton--image {
  height:var(--skeleton-image)
}
@keyframes pulse {
  to {
  opacity:var(--opacity-pulse)
}

}
.toast {
  position:fixed;
  bottom:var(--toast-offset);
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - var(--space-12));
  padding:var(--space-5) var(--space-9);
  border-radius:var(--radius-pill);
  background:var(--color-toast);
  color:var(--color-on-primary);
  z-index:var(--z-toast);
  font-size:var(--font-base)
}
.overlay {
  position:fixed;
  inset:0;
  max-width:var(--page-max);
  width:100%;
  max-height:var(--sheet-max);
  margin:auto auto 0;
  padding:var(--space-6) var(--space-8) calc(var(--space-11) + env(safe-area-inset-bottom));
  border:0;
  border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  color:var(--color-text);
  background:var(--color-card);
  overflow:auto;
  box-shadow:var(--shadow-card)
}
.overlay::backdrop {
  background:var(--color-scrim)
}
.overlay--center {
  margin:auto;
  width:calc(100% - var(--modal-inset) * 2);
  max-width:calc(var(--page-max) - var(--modal-inset) * 2);
  border-radius:var(--radius-pill);
  padding:var(--space-8)
}
.overlay__grab {
  width:var(--sheet-grab);
  height:var(--dot-size);
  border-radius:var(--radius-sm);
  background:var(--color-dot);
  margin:0 auto var(--space-6)
}
.overlay__content {
  display:flex;
  flex-direction:column;
  gap:var(--space-6)
}
.overlay__actions {
  display:flex;
  gap:var(--space-5)
}
.overlay__actions .button {
  flex:1
}
.menu-item {
  min-height:var(--top-nav-height);
  background:none;
  border:0;
  border-bottom:var(--border-width) solid var(--color-border);
  width:100%;
  font-size:var(--font-md)
}
.menu-item--danger {
  color:var(--color-danger)
}
.bottom-actions {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--page-max);
  padding:var(--space-6) var(--space-8) calc(var(--space-11) + env(safe-area-inset-bottom));
  background:var(--color-card);
  border-top:var(--border-width) solid var(--color-border);
  z-index:var(--z-nav)
}
.share-guide {
  text-align:center
}
.share-guide .icon {
  width:var(--state-size);
  height:var(--state-size);
  align-self:flex-end;
  color:var(--color-primary)
}
.ui-swatch {
  width:var(--swatch-size);
  height:var(--swatch-size);
  border-radius:var(--radius-md);
  background:var(--swatch-color);
  border:var(--border-width) solid var(--color-border)
}
.ui-type {
  font-size:var(--sample-font);
  font-weight:var(--weight-semibold)
}
@media(prefers-reduced-motion:reduce) {
  * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

}


.post-card > a,.post-card--promo > .row > a {
  display:inline-flex;
  align-items:center;
  min-height:var(--touch-target)
}
.ui-swatch {
  display:block
}
.ui-kit__variables p {
  overflow-wrap:anywhere
}


.top-nav__end {
  min-width:var(--touch-target)
}


.row:has(> input[type=checkbox]) { min-height:var(--touch-target); }

.choice-grid { display:grid; grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr)); gap:var(--space-4); }
.choice-grid .option { padding:var(--space-4); gap:var(--space-3); font-size:var(--font-sm); }

/* Card links cover only non-interactive areas; controls remain sibling targets. */
.post-card { position:relative; }
.post-card__link { position:absolute; inset:0; z-index:var(--z-card-link); }
.post-card__promo-link::after { content:''; position:absolute; inset:0; z-index:var(--z-card-link); }
.post-card button,.post-card a:not(.post-card__link):not(.post-card__promo-link) {
  position:relative;
  z-index:var(--z-card-control);
}
.post-card__link:focus-visible,.post-card__promo-link:focus-visible::after {
  outline:var(--border-selected) solid var(--color-primary);
  outline-offset:var(--space-1);
  border-radius:var(--radius-lg);
}
/* The visible lock tag follows text metrics; its independent hit box expands. */
.lock-tag {
  position:relative;
  display:inline-flex;
  vertical-align:baseline;
  line-height:inherit;
  min-height:0;
}
.lock-tag::before {
  content:'';
  position:absolute;
  min-width:var(--touch-target);
  min-height:var(--touch-target);
  width:100%;
  height:100%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.post-card > .post-card__link { min-height:0; padding:0; }

/* Member components share the existing semantic palette. */
.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--top-nav-height);
  border-bottom: var(--border-width) solid var(--color-border);
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(var(--member-columns),minmax(0,1fr));
  gap: var(--space-3);
}

.member-tile {
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--font-sm);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  padding: var(--space-4);
}

.member-stats {
  display: grid;
  grid-template-columns: repeat(var(--member-stats-columns),1fr);
  text-align: center;
  gap: var(--space-4);
}

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns),minmax(0,1fr));
  gap: var(--space-4);
}

.balance-tile {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.balance-tile strong {
  font-size: var(--font-brand);
}

.balance-tile--coins {
  background: var(--color-warning-soft);
  color: var(--color-promo);
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(var(--upload-columns), minmax(0, 1fr));
  gap: var(--space-4);
}

.upload-item,
.upload-add {
  min-width: 0;
  position: relative;
  aspect-ratio: var(--upload-ratio);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-skeleton);
}

.upload-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
}

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

.upload-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--upload-visible-control);
  height: var(--upload-visible-control);
  min-width: var(--upload-visible-control);
  min-height: var(--upload-visible-control);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-toast);
  color: var(--color-on-primary);
}

.upload-action .icon {
  width: var(--upload-icon-size);
  height: var(--upload-icon-size);
}

.upload-action::before {
  content: '';
  position: absolute;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.upload-action--delete {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
}

.upload-item__moves {
  position: absolute;
  padding-inline: var(--space-5);
  bottom: var(--space-5);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.upload-item__status {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  max-width: calc(100% - var(--touch-target));
}

.upload-status {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  background: var(--color-toast);
  color: var(--color-on-primary);
}

.upload-status progress {
  width: 100%;
  height: var(--space-2);
  accent-color: var(--color-primary);
}

.upload-add {
  min-height: var(--touch-target);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  cursor: pointer;
}

.upload-add:focus-within {
  outline: var(--border-selected) solid var(--color-primary);
  outline-offset: var(--space-1);
}

.fee-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fee-bar .button {
  width: 100%;
}

.chip--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.chip--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.notification-card--unread {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.penalty-panel {
  background: var(--color-danger-soft);
}

.penalty-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.image-lightbox {
  max-height: var(--image-preview-max);
  object-fit: contain;
}

.info-image {
  width: 100%;
  object-fit: contain;
}

.input[readonly] {
  background: var(--color-disabled);
}

.avatar--profile {
  width: var(--profile-avatar);
  height: var(--profile-avatar);
}

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

/* Notification links and compact violation records remain shared components. */
.notification-card {
  position: relative;
}

.notification-card--linked {
  cursor: pointer;
}

.notification-card__link {
  position: absolute;
  inset: 0;
  z-index: var(--z-card-link);
  border-radius: var(--radius-lg);
}

.notification-card__link:focus-visible {
  outline: var(--border-selected) solid var(--color-primary);
  outline-offset: var(--space-1);
}

.violation-list {
  gap: 0;
}

.violation-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

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

.violation-row h3 {
  font-size: var(--font-base);
}

/* Wallet and account components. */
.balance-card {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.balance-card--coins {
  background: var(--color-warning-soft);
  color: var(--color-promo);
}
.balance-card__number {
  font-size: var(--font-brand);
}
.ledger-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}
.ledger-row h3 {
  font-size: var(--font-base);
}
.ledger-row:last-child {
  border-bottom: 0;
}
.amount--earn {
  color: var(--color-success);
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(var(--package-columns), minmax(0, 1fr));
  gap: var(--space-4);
}
.package-option,
.hour-option {
  min-height: var(--button-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text);
}
.package-option--selected,
.hour-option--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.checkbox-row {
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.checkbox-row input {
  width: var(--icon-size);
  height: var(--icon-size);
  accent-color: var(--color-primary);
}
.redeem-result {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.checkin-card,
.account-brand,
.invite-landing {
  text-align: center;
  align-items: center;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(var(--week-columns), minmax(0, 1fr));
  gap: var(--space-2);
}
.week-day {
  min-width: 0;
  min-height: var(--week-day-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  font-size: var(--font-xs);
}
.week-day--checked,
.week-day--today {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.week-day--today {
  outline: var(--border-width) solid var(--color-primary);
}
.week-day--future {
  color: var(--color-text-muted);
}
.checkin-card--awarded {
  animation: checkin-award var(--duration-award) var(--ease-standard);
}
@keyframes checkin-award {
  50% { transform: scale(var(--scale-pressed)); }
}
.invite-code,
.lock-countdown {
  font-size: var(--font-brand);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.invite-step {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.hour-grid {
  display: grid;
  grid-template-columns: repeat(var(--hour-columns), minmax(0, 1fr));
  gap: var(--space-4);
}
.hour-option {
  font-size: var(--font-xs);
}
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.stepper .field {
  flex: 1;
  min-width: 0;
}
.stepper .button {
  min-width: var(--touch-target);
}
.promo-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.identifier-row {
  display:flex;
  align-items:center;
  gap:var(--space-4);
  min-width:0
}
.identifier-row__value {
  overflow-wrap:anywhere;
  font-family:var(--recovery-font)
}
.identifier-row > .button {
  flex:none
}
.order-card {
  color: var(--color-text);
  cursor: pointer;
}
.order-timeline article {
  border-left: var(--border-selected) solid var(--color-primary-soft);
  padding-left: var(--space-6);
}
.account-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-10);
}
.password-field {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}
.password-field .field {
  flex: 1;
  min-width: 0;
}
.password-field .button {
  max-width: var(--touch-target);
  padding-inline: var(--space-2);
  font-size: var(--font-xs);
}
.recovery-code {
  overflow-wrap: anywhere;
  font-family: var(--recovery-font);
  font-size: var(--font-title);
  background: var(--color-primary-soft);
  padding: var(--space-8);
  border-radius: var(--radius-md);
}
.captcha-frame {
  width: 100%;
  height: var(--captcha-height);
  border: 0;
}
.support-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: var(--support-thread-height);
  overflow-y: auto;
}
.support-message {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  max-width: var(--support-message-width);
  overflow-wrap: anywhere;
}
.support-message--admin {
  align-self: flex-end;
  background: var(--color-primary-soft);
}
.support-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text);
}