html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(209, 126, 61, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(27, 95, 76, 0.14), transparent 30%),
    linear-gradient(180deg, #f8f3eb 0%, #efe6d8 100%);
  color: #221b14;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-chrome {
  min-height: 100vh;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 252, 247, 0.88);
  border-bottom: 1px solid rgba(126, 98, 70, 0.18);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 10;
}

body.topbar-menu-open {
  overflow: hidden;
}

.topbar-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-width: 0;
}

.brand-block {
  display: flex;
  align-items: center;
}

.brand a {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-tag {
  margin: 0;
  font-size: 0.88rem;
  color: #6a5a48;
}

.topbar-menu-toggle {
  display: none;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1rem;
  background: #173f35;
  color: #fffaf5;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(23, 63, 53, 0.18);
}

.topbar-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-drawer {
  display: none;
}

.topbar-scrim {
  display: none;
}

.topbar-scrim[hidden] {
  display: none !important;
}

.mobile-drawer[hidden] {
  display: none !important;
}

.navlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.navlinks a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  color: #5c4c3e;
}

.navlinks a:hover {
  background: rgba(86, 64, 42, 0.08);
}

.admin-nav-menu {
  position: relative;
}

.admin-nav-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  color: #5c4c3e;
}

.admin-nav-menu summary::-webkit-details-marker {
  display: none;
}

.admin-nav-menu[open] summary,
.admin-nav-menu summary:hover {
  background: rgba(86, 64, 42, 0.08);
}

.admin-nav-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 14rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: 18px;
  border: 1px solid rgba(126, 98, 70, 0.18);
  background: rgba(255, 251, 245, 0.98);
  box-shadow: 0 16px 32px rgba(75, 56, 36, 0.12);
}

.admin-nav-popover a {
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  color: #4f4031;
}

.admin-nav-popover a:hover {
  background: #f1e7d9;
}

.session-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: #f0e4d4;
  color: #4f4031;
  font-weight: 600;
}

.activity-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  background: linear-gradient(135deg, #ff7b51 0%, #ffb14a 100%);
  color: #fffdf8;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  clip-path: polygon(50% 0%, 61% 18%, 82% 7%, 78% 29%, 100% 34%, 84% 50%, 100% 66%, 78% 71%, 82% 93%, 61% 82%, 50% 100%, 39% 82%, 18% 93%, 22% 71%, 0% 66%, 16% 50%, 0% 34%, 22% 29%, 18% 7%, 39% 18%);
  box-shadow: 0 8px 16px rgba(201, 94, 30, 0.28);
}

.activity-badge-light {
  color: #fff8f0;
}

.activity-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: 0.55rem;
  padding: 0.28rem 0.56rem;
  border-radius: 999px;
  background: rgba(217, 45, 32, 0.1);
  border: 1px solid rgba(217, 45, 32, 0.16);
  color: #9f1f18;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.activity-indicator-dot {
  inline-size: 0.48rem;
  block-size: 0.48rem;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #ff8a80 0%, #d92d20 58%, #9f1f18 100%);
  box-shadow: 0 0 0 0.18rem rgba(217, 45, 32, 0.14);
  flex: 0 0 auto;
}

.activity-indicator-text {
  white-space: nowrap;
}

.activity-indicator-contrast {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff7f2;
}

.activity-indicator-contrast .activity-indicator-dot {
  box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.12);
}

.nav-activity-link {
  font-weight: 700;
}

.pill-badge {
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  background: #1f1b16;
  color: #fff7ef;
  font-size: 0.78rem;
}

.page-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.96fr) minmax(0, 0.82fr);
  gap: 1.15rem;
  padding: 1.25rem 1.35rem;
  border-top: 1px solid rgba(126, 98, 70, 0.12);
  color: #5f5648;
}

.notifications-page {
  display: grid;
  gap: 1.25rem;
  padding: 1.35rem;
}

.notifications-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.notifications-subtitle {
  max-width: 38rem;
  margin: 0.35rem 0 0;
  color: #6b5e51;
}

.notifications-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border-radius: 18px;
  background: #f5ebde;
  color: #5a4b3d;
  font-weight: 700;
}

.notifications-list {
  display: grid;
  gap: 0.85rem;
}

.notification-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 4.8rem;
  gap: 0.9rem;
  align-items: center;
  padding: 0.95rem 1rem;
  border-radius: 22px;
  background: rgba(255, 251, 245, 0.88);
  border: 1px solid rgba(126, 98, 70, 0.14);
  box-shadow: 0 14px 32px rgba(79, 64, 49, 0.06);
  color: inherit;
}

.notification-avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1f6a5f 0%, #ea8d42 100%);
  color: #fff8f0;
  font-weight: 800;
}

.notification-avatar img,
.notification-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.notification-body {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.notification-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: #7b6b5d;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.notification-type {
  font-weight: 800;
}

.notification-summary,
.notification-handle,
.notification-preview,
.notification-caption {
  margin: 0;
}

.notification-summary {
  color: #2f241b;
}

.notification-handle,
.notification-caption {
  color: #76685a;
  font-size: 0.93rem;
}

.notification-preview {
  color: #4a3d32;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-media {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 18px;
  overflow: hidden;
  background: #efe3d3;
}

.site-footer-grid-compact {
  grid-template-columns: 1fr;
  align-items: start;
}

.site-footer-block {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.site-footer-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b5f36;
}

.site-footer-copy {
  margin: 0;
  line-height: 1.55;
}

.site-footer-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  width: fit-content;
  padding: 0;
  border-radius: 0;
  color: #b14f1f;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(177, 79, 31, 0.28);
  transition: color 160ms ease, border-color 160ms ease;
}

.site-footer-link::after {
  content: "→";
  font-size: 0.92em;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
  color: #8f3610;
  border-color: rgba(143, 54, 16, 0.5);
}

.site-footer-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
}

.site-footer-faq {
  padding: 0.58rem 0;
  border-top: 1px solid rgba(126, 98, 70, 0.12);
}

.site-footer-faq:last-child {
  border-bottom: 1px solid rgba(126, 98, 70, 0.12);
}

.site-footer-faq summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: #4f4031;
}

.site-footer-faq summary::-webkit-details-marker {
  display: none;
}

.site-footer-faq p {
  margin: 0.45rem 0 0;
  font-size: 0.94rem;
  line-height: 1.5;
}

.info-page {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.info-sidebar {
  position: sticky;
  top: 6.25rem;
  display: grid;
  gap: 0.9rem;
  margin-bottom: 0;
}

.info-sidebar-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b5f36;
}

.info-sidebar-nav {
  display: grid;
  gap: 0.3rem;
}

.info-sidebar-nav a {
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  color: #4f4031;
}

.info-sidebar-nav a:hover {
  background: #f1e7d9;
}

.info-content {
  display: grid;
  gap: 1rem;
}

.info-section {
  margin-bottom: 0;
  scroll-margin-top: 6.5rem;
}

.section-title {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  color: #3d3024;
}

.info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.info-mini-card {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border-radius: 18px;
  background: #f6efe5;
  border: 1px solid rgba(126, 98, 70, 0.12);
}

.info-mini-card p {
  margin: 0;
  color: #5f5648;
}

.info-faq-list {
  display: grid;
}

.info-faq-item {
  padding: 0.9rem 0;
  border-top: 1px solid rgba(126, 98, 70, 0.12);
}

.info-faq-item:last-child {
  border-bottom: 1px solid rgba(126, 98, 70, 0.12);
}

.info-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #4f4031;
}

.info-faq-item summary::-webkit-details-marker {
  display: none;
}

.info-faq-item p {
  margin: 0.55rem 0 0;
  color: #5f5648;
  line-height: 1.55;
}

.panel {
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid rgba(126, 98, 70, 0.16);
  border-radius: 24px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 18px 42px rgba(84, 63, 40, 0.08);
}

.panel-muted {
  background: #f6efe5;
}

.flash-stack {
  position: fixed;
  top: 5.25rem;
  left: 1rem;
  right: 1rem;
  z-index: 1200;
  display: grid;
  gap: 0.75rem;
  pointer-events: none;
}

.flash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid #b7d1ae;
  background: rgba(232, 243, 228, 0.96);
  box-shadow: 0 18px 30px rgba(39, 54, 34, 0.18);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  width: min(24rem, calc(100vw - 2rem));
  justify-self: end;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 180ms ease, transform 180ms ease;
}

.flash.is-closing {
  opacity: 0;
  transform: translateY(-0.4rem);
}

.flash-success {
  border-color: #b7d1ae;
  background: rgba(232, 243, 228, 0.96);
}

.flash-error {
  background: rgba(251, 232, 228, 0.97);
  border-color: #ddb4aa;
}

.flash-info {
  background: rgba(229, 239, 247, 0.97);
  border-color: #b5cada;
}

.flash-danger {
  background: rgba(251, 232, 228, 0.97);
  border-color: #ddb4aa;
}

.flash-danger .flash-body,
.flash-danger .flash-dismiss {
  color: #6b3d35;
}

.flash-left {
  justify-self: start;
}

.flash-right {
  justify-self: end;
}

.flash-body {
  min-width: 0;
  color: #2f271f;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.flash-dismiss {
  border: 0;
  background: transparent;
  color: #6a5a48;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem;
}

.page-title {
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  line-height: 1;
}

.page-subtitle {
  margin: 0 0 1rem 0;
  color: #5f5648;
  font-size: 1.02rem;
}

.button,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  padding: 0.68rem 1rem;
  background: linear-gradient(135deg, #1c4032 0%, #152920 100%);
  color: #fffdf8;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 10px 20px rgba(22, 41, 32, 0.14);
}

.button-secondary {
  background: #eadfce;
  color: #1f1b16;
  box-shadow: none;
}

.link-button {
  background: transparent;
  color: #5c4c3e;
  box-shadow: none;
  padding-inline: 0.35rem;
}

.inline-form {
  display: inline;
}

.auth-inline-link-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.35rem;
}

.auth-inline-link {
  font-size: 0.92rem;
  color: #5c4c3e;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

.auth-inline-link:hover {
  color: #1c4032;
}

.form-grid {
  display: grid;
  gap: 1rem;
}

.form-grid label {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
}

.form-grid input,
.form-grid textarea {
  font: inherit;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid #c9c0b2;
  background: white;
}

.form-grid input:focus,
.form-grid textarea:focus {
  outline: 2px solid rgba(28, 64, 50, 0.18);
  border-color: #4e7a67;
}

.consent-field {
  display: grid;
  gap: 0.45rem;
}

.consent-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  color: #4f4031;
  font-weight: 500;
}

.consent-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
}

.consent-checkbox span {
  line-height: 1.5;
}

.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  width: 100%;
  padding-right: 6.2rem;
}

.password-toggle {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  min-width: 5rem;
  padding: 0.42rem 0.75rem;
  background: #f1e7d9;
  color: #4b3c2f;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: #e6d7c4;
}

.stack {
  display: grid;
  gap: 1rem;
}

.profile-security-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hero-grid,
.auth-grid,
.submission-card-shell,
.submission-detail-shell,
.helper-grid.two {
  display: grid;
  gap: 1.25rem;
}

.hero-grid {
  grid-template-columns: 1.3fr 0.9fr;
  align-items: stretch;
}

.auth-grid {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
}

.auth-login-grid {
  align-items: stretch;
  grid-template-columns: 1.12fr 0.88fr;
}

.submission-card-shell,
.submission-detail-shell {
  grid-template-columns: 1.3fr 0.7fr;
  align-items: start;
}

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

.hero-copy,
.hero-side,
.submission-card-body,
.submission-detail-body,
.submission-card-visual,
.submission-detail-visual,
.profile-hero {
  display: grid;
  gap: 1rem;
}

.hero-kicker,
.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: #8b5f36;
  font-weight: 700;
}

.hero-metrics,
.profile-stats {
  display: grid;
  gap: 0.75rem;
}

.hero-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card,
.summary-card,
.callout-card,
.stat-row {
  padding: 1rem;
  border-radius: 18px;
  background: #f5ede2;
  border: 1px solid rgba(126, 98, 70, 0.14);
}

.metric-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.metric-label {
  color: #665746;
  font-size: 0.92rem;
}

.callout-card strong,
.summary-card strong {
  display: block;
  margin-bottom: 0.35rem;
}

.auth-login-intro {
  position: relative;
  overflow: hidden;
  gap: 0.75rem;
  align-content: start;
  background:
    radial-gradient(circle at top right, rgba(235, 121, 53, 0.16), transparent 30rem),
    linear-gradient(160deg, rgba(28, 64, 50, 0.06), rgba(28, 64, 50, 0) 45%);
  color: inherit;
  padding: 1.2rem;
}

.auth-login-intro::before,
.auth-login-intro::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.auth-login-intro::before {
  width: 16rem;
  height: 16rem;
  top: -4rem;
  right: -3rem;
  background: radial-gradient(circle, rgba(255, 244, 227, 0.16) 0%, rgba(255, 244, 227, 0) 72%);
}

.auth-login-intro::after {
  width: 18rem;
  height: 18rem;
  bottom: -7rem;
  left: -2rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74%);
}

.auth-login-intro > * {
  position: relative;
  z-index: 1;
}

.auth-intro-head {
  display: flex;
  justify-content: flex-start;
  gap: 0.75rem;
  align-items: center;
}

.auth-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 245, 234, 0.14);
  border: 1px solid rgba(255, 241, 229, 0.24);
  color: rgba(255, 248, 240, 0.88);
  font-size: 0.84rem;
  font-weight: 700;
}

.auth-login-intro .page-title,
.auth-login-intro .page-subtitle,
.auth-login-intro .helper-note,
.auth-login-intro .meta,
.auth-login-intro strong {
  color: inherit;
}

.auth-showcase-stack {
  position: relative;
  min-height: 24rem;
  padding: 0.15rem 0.1rem 0.35rem;
}

.auth-showcase-card {
  position: absolute;
  width: min(15.5rem, 60%);
  aspect-ratio: 0.72;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(126, 98, 70, 0.18);
  box-shadow: 0 24px 50px rgba(49, 36, 24, 0.16);
  background: #e7ddcf;
}

.auth-showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-showcase-card-1 {
  left: 0;
  top: 1.2rem;
  transform: rotate(-7deg);
  z-index: 1;
}

.auth-showcase-card-2 {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
}

.auth-showcase-card-3 {
  right: 0;
  top: 1.4rem;
  transform: rotate(7deg);
  z-index: 2;
}

.auth-showcase-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1rem 1.05rem;
  color: #fffaf5;
  background: linear-gradient(180deg, rgba(19, 25, 21, 0.02) 0%, rgba(19, 25, 21, 0.84) 62%, rgba(19, 25, 21, 0.92) 100%);
}

.auth-showcase-author {
  display: grid;
  gap: 0.1rem;
}

.auth-showcase-author strong {
  font-size: 1rem;
}

.auth-showcase-author span,
.auth-showcase-date {
  font-size: 0.82rem;
  color: rgba(255, 247, 238, 0.82);
}

.auth-showcase-overlay p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.auth-system-card {
  display: grid;
  gap: 0.9rem;
  background: rgba(255, 248, 240, 0.14);
  border: 1px solid rgba(255, 241, 229, 0.24);
  box-shadow: none;
}

.auth-value-card {
  background: #f8f4ed;
  display: grid;
  gap: 0.45rem;
}

.auth-value-list {
  margin: 0;
  padding-left: 1.2rem;
  color: #5f5648;
  display: grid;
  gap: 0.55rem;
}

.auth-form-panel {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: 2rem;
}

.auth-status-banner {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid #b7d1ae;
  background: rgba(232, 243, 228, 0.96);
  box-shadow: 0 14px 28px rgba(39, 54, 34, 0.1);
}

.auth-status-banner strong {
  display: block;
  color: #274534;
}

.auth-status-banner .helper-note {
  color: #42543f;
}

.auth-form {
  gap: 1rem;
}

.auth-form-note {
  margin: 0;
}

.helper-note {
  color: #5f5648;
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.actions.primary-set .button:first-child {
  min-width: 0;
}

.actions.compact {
  gap: 0.5rem;
}

.actions.spread {
  justify-content: space-between;
  align-items: center;
}

.header-row,
.profile-identity {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.profile-identity-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-avatar-form {
  margin: 0;
}

.profile-avatar-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.profile-avatar-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%) translateY(0.25rem);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(28, 23, 18, 0.86);
  color: #fffaf2;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: 0 12px 24px rgba(28, 23, 18, 0.18);
}

.profile-avatar-trigger:hover::after,
.profile-avatar-trigger:focus-visible::after,
.profile-avatar-trigger:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.profile-hero-avatar-shell {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(28, 64, 50, 0.16), rgba(214, 126, 61, 0.18));
  border: 1px solid rgba(126, 98, 70, 0.18);
  position: relative;
}

.profile-hero-avatar-fill {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.profile-hero-avatar-shell-editable {
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.profile-hero-avatar-shell-editable:hover,
.profile-hero-avatar-shell-editable:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(38, 28, 18, 0.14);
}

.profile-hero-avatar-image,
.story-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-hero-avatar-fallback {
  color: #214d3d;
  font-size: 2rem;
  font-weight: 700;
}

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

.profile-avatar-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 23, 18, 0.36);
  backdrop-filter: blur(6px);
  z-index: 70;
}

.profile-avatar-dialog-backdrop[hidden] {
  display: none !important;
}

.profile-avatar-dialog {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 71;
}

.profile-avatar-dialog[hidden] {
  display: none !important;
}

.profile-avatar-dialog-sheet {
  width: min(100%, 26rem);
  border-radius: 1.4rem;
  overflow: hidden;
  background: rgba(250, 246, 240, 0.98);
  border: 1px solid rgba(126, 98, 70, 0.16);
  box-shadow: 0 26px 60px rgba(34, 27, 20, 0.2);
}

.profile-avatar-dialog-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(126, 98, 70, 0.12);
  text-align: center;
}

.profile-avatar-dialog-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.profile-avatar-dialog-actions {
  display: grid;
}

.profile-avatar-dialog-action {
  min-height: 3.5rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: #221b14;
  cursor: pointer;
}

.profile-avatar-dialog-action + .profile-avatar-dialog-action {
  border-top: 1px solid rgba(126, 98, 70, 0.12);
}

.profile-avatar-dialog-action-upload {
  color: #214d3d;
  font-weight: 700;
}

.profile-avatar-dialog-action:hover,
.profile-avatar-dialog-action:focus-visible {
  background: rgba(28, 64, 50, 0.06);
}

.submission-card img,
.submission-detail-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  min-height: 0;
  object-fit: cover;
  border-radius: 26px;
  background: #e8e0d3;
}

.submission-detail-visual {
  align-self: stretch;
}

.submission-detail-body {
  align-content: start;
}

.submission-detail-panel {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(246, 238, 227, 0.92));
  border: 1px solid rgba(126, 98, 70, 0.12);
}

.submission-author-block {
  min-width: 0;
}

.submission-author-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.submission-author-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.submission-detail-name {
  display: block;
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.65rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #211b14;
}

.submission-detail-hint {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6f5d4b;
  max-width: 26rem;
}

.submission-detail-caption {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #5f4d3c;
}

.submission-detail-compact-actions {
  align-items: stretch;
}

.submission-heart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 11rem;
  width: auto;
}

.submission-heart-button span[aria-hidden="true"] {
  font-size: 1.05rem;
  line-height: 1;
}

.submission-detail-secondary-actions .button,
.submission-detail-secondary-actions .inline-form {
  min-width: 0;
}

.submission-detail-secondary-actions > .button,
.submission-detail-secondary-actions > .inline-form {
  width: 100%;
}

.submission-detail-secondary-actions > .button,
.submission-detail-secondary-actions > .inline-form .button {
  box-sizing: border-box;
  justify-content: center;
}

.submission-detail-secondary-actions > .inline-form {
  display: block;
}

.button.button-disabled {
  cursor: default;
  pointer-events: none;
  background: #eee5da;
  color: #7b6855;
  border-color: rgba(123, 104, 85, 0.14);
}

.stat-chip-strong {
  background: #214d3d;
  color: #f5fbf8;
}

.submission-detail-login-cta {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  background: #faf5ee;
  border: 1px solid rgba(126, 98, 70, 0.12);
}

.submission-detail-login-cta p {
  margin: 0;
  color: #665543;
}

.card-header,
.section-header {
  display: grid;
  gap: 0.35rem;
}

.stat-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: #f5ede2;
  color: #574636;
  font-size: 0.92rem;
  font-weight: 600;
}

.admin-tools {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: #f6efe5;
  border: 1px dashed rgba(126, 98, 70, 0.24);
}

.admin-tools-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #6d5a48;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.discovery-progress {
  height: 10px;
  border-radius: 999px;
  background: #eadfce;
  overflow: hidden;
}

.discovery-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d17e3d 0%, #1c4032 100%);
}

.meta {
  color: #5f5648;
  font-size: 0.95rem;
}

.meta.strong {
  color: #46392f;
  font-weight: 600;
}

.comment-list,
.leaderboard-list {
  display: grid;
  gap: 0.75rem;
}

.comment-item {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  background: #f6f2ea;
  border: 1px solid rgba(134, 111, 85, 0.08);
}

.comment-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(28, 64, 50, 0.11);
  color: #214d3d;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
}

.comment-author-block {
  display: grid;
  gap: 0.3rem;
}

.comment-item-reply {
  margin-left: 1.15rem;
  position: relative;
  background: #f8f3eb;
  border-left: 0;
  padding-left: 1.15rem;
}

.comment-item-reply::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  border-radius: 999px;
  background: rgba(28, 64, 50, 0.14);
}

.comment-compose-form {
  scroll-margin-top: 7rem;
}

.comment-reply-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(95, 86, 72, 0.12);
  background: linear-gradient(135deg, rgba(28, 64, 50, 0.05), rgba(209, 126, 61, 0.08));
}

.comment-reply-context .eyebrow {
  margin-bottom: 0.2rem;
}

.comment-reply-context strong {
  display: block;
  margin-bottom: 0.2rem;
}

.comment-item-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.comment-item-header .meta {
  margin: 0.15rem 0 0;
}

.comment-author-link,
.profile-name-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.comment-author-link:hover,
.comment-author-link:focus-visible,
.profile-name-link:hover,
.profile-name-link:focus-visible {
  color: #214d3d;
}

.comment-reply-action {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.88rem;
}

.submission-author-block {
  display: grid;
  gap: 0.35rem;
}

.submission-author-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
}

.submission-author-link:hover,
.submission-author-link:focus-visible {
  color: #214d3d;
}

.submission-author-copy {
  display: grid;
}

.submission-author-copy .page-title {
  margin: 0;
}

.comment-thread-meta {
  display: grid;
  gap: 0.18rem;
  margin: 0 0 0.45rem;
}

.comment-reply-label {
  color: #7b6248;
  font-size: 0.8rem;
  line-height: 1.2;
}

.comment-reply-label strong {
  color: #295243;
}

.comment-parent-snippet {
  color: #8b755f;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-body {
  margin: 0 0 0.5rem;
  line-height: 1.48;
}

.empty-state {
  color: #5f5648;
  margin: 0;
}

.leaderboard-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ece4d8;
}

.stack > .leaderboard-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.leaderboard-rank {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #f3e7d8;
  font-weight: 800;
  color: #6a4a2f;
}

.leaderboard-entry-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.leaderboard-entry-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: #f5ede2;
  color: #574636;
  font-size: 0.92rem;
  font-weight: 600;
}

.leaderboard-entry-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leaderboard-entry-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaderboard-filter-form {
  margin: 0;
}

.leaderboard-shell {
  gap: 1.5rem;
}

.leaderboard-section {
  margin: 0;
}

.leaderboard-top-note {
  margin: 0;
  font-weight: 700;
  color: #7a624c;
}

.leaderboard-card {
  margin: 0;
}

.leaderboard-filter-form + .leaderboard-card,
.leaderboard-card + .leaderboard-card {
  margin-top: 1.25rem;
}

.leaderboard-winner-card {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid #e2d4bf;
  background:
    radial-gradient(circle at top left, rgba(211, 138, 65, 0.18), transparent 34%),
    linear-gradient(135deg, #fffaf2 0%, #f3ebdf 100%);
  box-shadow: 0 16px 36px rgba(91, 61, 28, 0.08);
}

.leaderboard-history-panel {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.3rem;
}

.leaderboard-list-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #ece4d8;
}

.leaderboard-list-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: #2c241d;
}

.leaderboard-list-header .meta,
.leaderboard-winner-copy .meta {
  margin: 0;
}

.leaderboard-winner-copy {
  display: grid;
  gap: 0.65rem;
}

.leaderboard-winner-header {
  align-items: center;
}

.leaderboard-winner-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: #214535;
  color: #f7efe4;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.leaderboard-winner-challenge-state {
  color: #765c45;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.leaderboard-winner-name {
  margin: 0;
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  line-height: 1;
  color: #2c241d;
}

.leaderboard-profile-link:hover,
.leaderboard-profile-link:focus-visible {
  color: #214d3d;
}

.leaderboard-winner-caption {
  margin: 0;
  max-width: 38rem;
  color: #5f5648;
  font-size: 1rem;
  line-height: 1.5;
}

.leaderboard-winner-stats {
  display: grid;
  gap: 0.85rem;
  align-items: center;
  justify-items: end;
}

.leaderboard-winner-medal {
  min-width: 4.5rem;
  min-height: 4.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(160deg, #d8913f 0%, #8b5a23 100%);
  color: #fff9ef;
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.leaderboard-winner-metrics {
  display: grid;
  gap: 0.65rem;
  justify-items: end;
}

.leaderboard-list {
  gap: 0;
}

.leaderboard-item-actions {
  align-items: center;
}

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

.stat-row {
  display: grid;
  gap: 0.25rem;
}

.stat-row strong {
  font-size: 1.45rem;
}

.profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.profile-gallery-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background: #dbcdb8;
  box-shadow: 0 18px 36px rgba(68, 53, 37, 0.12);
}

.profile-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 180ms ease;
}

.profile-gallery-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 0.75rem;
  padding: 1rem;
  color: #fffaf4;
  background: linear-gradient(180deg, rgba(15, 17, 20, 0.04) 0%, rgba(15, 17, 20, 0.82) 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.profile-gallery-metrics,
.profile-gallery-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.profile-gallery-metrics {
  font-size: 1.1rem;
  font-weight: 700;
}

.profile-gallery-meta {
  font-size: 0.92rem;
}

.profile-gallery-card:hover .profile-gallery-overlay,
.profile-gallery-card:focus-visible .profile-gallery-overlay {
  opacity: 1;
}

.profile-gallery-overlay-visible {
  opacity: 1;
}

.profile-gallery-card:hover .profile-gallery-image,
.profile-gallery-card:focus-visible .profile-gallery-image {
  transform: scale(1.04);
}

.profile-private-toggle {
  position: relative;
}

.profile-private-toggle summary {
  list-style: none;
}

.profile-private-toggle summary::-webkit-details-marker {
  display: none;
}

.profile-private-popover {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(52rem, 86vw);
  z-index: 5;
  margin-bottom: 0;
}

.validation-summary-errors,
.field-validation-error {
  color: #9c3f2a;
  font-size: 0.92rem;
}

.support-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.2rem;
  color: #5f5648;
}

.admin-shell,
.admin-dashboard-grid,
.admin-metric-grid,
.admin-kv-grid,
.admin-table-wrap,
.admin-submission-list,
.admin-active-summary,
.admin-form {
  display: grid;
  gap: 1rem;
}

.admin-dashboard-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
  margin-bottom: 1rem;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.admin-section-title {
  margin: 0;
  font-size: 1.35rem;
}

.admin-active-summary {
  padding: 1rem;
  border-radius: 20px;
  background: #f6efe5;
  border: 1px solid rgba(126, 98, 70, 0.14);
}

.admin-active-panel,
.admin-metrics-panel,
.admin-create-panel,
.admin-top-panel,
.admin-history-panel {
  position: relative;
  padding-bottom: 2rem;
}

.admin-active-panel::after,
.admin-metrics-panel::after,
.admin-create-panel::after,
.admin-top-panel::after,
.admin-history-panel::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1rem;
  border-top: 1px solid rgba(126, 98, 70, 0.14);
}

.admin-active-panel > .actions {
  margin-top: 0.9rem;
}

.admin-challenge-title {
  margin: 0;
  font-size: 1.8rem;
}

.admin-kv-grid,
.admin-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-active-panel .admin-kv-grid .stat-row {
  min-height: 5.1rem;
  padding: 0.8rem 0.9rem;
  align-content: center;
  justify-items: start;
  gap: 0.3rem;
}

.admin-active-panel .admin-kv-grid .stat-row span {
  font-size: 0.82rem;
  line-height: 1.15;
}

.admin-active-panel .admin-kv-grid .stat-row strong {
  font-size: 1rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  word-break: normal;
}

.admin-create-panel .admin-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-create-panel {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.admin-create-panel-wide {
  grid-column: 1 / -1;
}

.admin-create-panel > .admin-form,
.admin-create-panel > .summary-card,
.admin-create-panel > .admin-inline-actions {
  min-width: 0;
  justify-self: stretch;
  box-sizing: border-box;
}

.admin-create-details {
  display: grid;
  gap: 1rem;
}

.admin-create-summary {
  list-style: none;
  cursor: pointer;
}

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

.admin-create-summary::marker {
  content: "";
}

.admin-create-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.admin-create-toggle-label {
  flex: 0 0 auto;
  pointer-events: none;
}

.admin-action-item {
  align-items: center;
}

.admin-form-full {
  grid-column: 1 / -1;
}

.admin-form-actions {
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.admin-edit-actions {
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.admin-edit-actions .button,
.admin-inline-actions .button {
  white-space: nowrap;
}

.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(126, 98, 70, 0.14);
}

.admin-date-section {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.2rem;
  border: 1px solid rgba(126, 98, 70, 0.14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 248, 243, 0.98) 100%);
}

.admin-date-section-header {
  display: grid;
  gap: 0.35rem;
}

.admin-date-pair-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: #7d6248;
  font-weight: 700;
  padding: 0;
}

.admin-date-range-fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-date-field {
  display: grid;
  gap: 0.5rem;
}

.admin-date-field-label {
  font-weight: 600;
  color: #2b2219;
}

.admin-date-field-hint {
  color: #7d6248;
  font-size: 0.84rem;
  line-height: 1.3;
}

.admin-date-pair-meta {
  margin: 0;
  color: #645445;
}

.admin-date-field input[type="date"] {
  min-height: 3.5rem;
  padding: 0.8rem 0.95rem;
  font-size: 0.98rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

.admin-date-field input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}

.admin-date-field input[type="date"]::-webkit-date-and-time-value {
  min-height: 1.2em;
  text-align: left;
}

.admin-date-field input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
  opacity: 0.82;
}

.admin-date-section-footer {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.1rem;
}

.admin-date-note {
  margin: 0;
}

.admin-date-inline-error[hidden] {
  display: none !important;
}

.admin-form select {
  font: inherit;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid #c9c0b2;
  background: white;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: #f8f3ec;
  border: 1px solid rgba(126, 98, 70, 0.12);
}

.admin-table-filter {
  display: grid;
  gap: 0.45rem;
  min-width: min(100%, 18rem);
  font-weight: 600;
  color: #2b2219;
}

.admin-table-filter input,
.admin-table-filter select {
  min-height: 3rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid #c9c0b2;
  background: #fffdf9;
  color: #221b14;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.admin-table-filter input::placeholder {
  color: #8b7a68;
}

.admin-table-filter input:focus,
.admin-table-filter select:focus {
  outline: 2px solid rgba(28, 64, 50, 0.18);
  border-color: #4e7a67;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 0.95rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #ece4d8;
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-date-cell {
  white-space: nowrap;
}

.admin-number-cell {
  text-align: center !important;
  white-space: nowrap;
}

.admin-challenge-cell strong {
  display: block;
  line-height: 1.3;
}

.admin-actions-cell {
  text-align: center;
}

.admin-row-actions {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.admin-row-actions .inline-form {
  display: inline-flex;
}

.admin-table th {
  color: #6d5a48;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #efe4d4;
  color: #5f4d3e;
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-status-pill.is-active {
  background: #dfeee7;
  color: #1d5b4c;
}

.admin-status-pill.is-scheduled {
  background: #ece5f8;
  color: #5a4480;
}

.admin-status-pill.is-closed {
  background: #f3e6d8;
  color: #8a5c34;
}

.admin-status-pill.is-archived {
  background: #ece8e1;
  color: #5d5448;
}

.admin-empty-state {
  padding: 1.1rem;
  border-radius: 18px;
  background: #f8f3ec;
  border: 1px dashed rgba(126, 98, 70, 0.2);
}

.admin-empty-state strong,
.admin-empty-state p {
  display: block;
  margin: 0;
}

.admin-empty-state p {
  margin-top: 0.35rem;
  color: #5f5648;
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
}

.checkbox-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
}

.admin-banner-card {
  display: grid;
  gap: 0.9rem;
}

.admin-banner-preview {
  width: min(100%, 34rem);
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(126, 98, 70, 0.14);
  background: #ece4d8;
  box-shadow: 0 16px 28px rgba(35, 29, 23, 0.08);
}

.admin-banner-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.admin-banner-form input[type="file"] {
  max-width: 100%;
}

.admin-submission-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border-radius: 20px;
  background: #f8f3ec;
  border: 1px solid rgba(126, 98, 70, 0.12);
}

.admin-submission-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  background: #e8e0d3;
}

.admin-submission-copy {
  display: grid;
  gap: 0.45rem;
}

.challenge-home {
  --challenge-bg:
    radial-gradient(circle at 84% 16%, rgba(255, 244, 227, 0.14) 0%, rgba(255, 244, 227, 0) 21%),
    radial-gradient(circle at 74% 88%, rgba(239, 139, 67, 0.94) 0%, rgba(239, 139, 67, 0.42) 24%, rgba(239, 139, 67, 0) 56%),
    linear-gradient(145deg, #12483d 0%, #185b4a 38%, #2d715d 70%, #dd8648 100%);
  --challenge-card: rgba(255, 248, 240, 0.92);
  --challenge-card-strong: rgba(255, 252, 247, 0.16);
  --challenge-card-border: rgba(255, 241, 229, 0.24);
  --challenge-text-soft: rgba(246, 235, 223, 0.82);
  --challenge-shadow: 0 30px 90px rgba(25, 24, 22, 0.18);
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}

.social-event-banner {
  position: relative;
  overflow: hidden;
  width: min(100%, 66rem);
  min-height: clamp(14rem, 28vw, 18rem);
  border-radius: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.95fr);
  align-items: end;
  justify-items: stretch;
  box-shadow: 0 24px 52px rgba(25, 24, 22, 0.14);
}

.challenge-home:not(.challenge-home-empty) .challenge-hero.social-event-hero-shell {
  background: linear-gradient(180deg, rgba(7, 14, 20, 0.18) 0%, rgba(7, 14, 20, 0.28) 100%);
  box-shadow: 0 24px 52px rgba(25, 24, 22, 0.14);
}

.social-event-banner-media,
.social-event-banner-scrim {
  position: absolute;
  inset: 0;
}

.social-event-banner-media {
  background-position: center;
  background-size: cover;
}

.social-event-banner-scrim {
  background:
    linear-gradient(90deg, rgba(12, 11, 10, 0.72) 0%, rgba(12, 11, 10, 0.38) 44%, rgba(12, 11, 10, 0.18) 100%),
    linear-gradient(180deg, rgba(12, 11, 10, 0.08) 0%, rgba(12, 11, 10, 0.52) 100%);
}

.social-event-banner-copy {
  gap: 0.8rem;
  color: #fffaf5;
}

.challenge-live-pill.social-event-pill,
.challenge-pill.social-event-pill {
  background: rgba(255, 244, 234, 0.14);
  color: #fff6ee;
  border: 1px solid rgba(255, 235, 214, 0.2);
  box-shadow: 0 10px 24px rgba(18, 17, 16, 0.14);
}

.social-event-hero.is-dark .challenge-live-pill.social-event-pill,
.social-event-hero.is-dark .challenge-pill.social-event-pill {
  background: rgba(255, 250, 243, 0.46);
  color: #1f1a15;
  border-color: rgba(93, 74, 56, 0.14);
  box-shadow: none;
}

.social-event-title {
  max-width: 11ch;
}

.social-event-meta {
  margin: 0;
  color: rgba(255, 243, 230, 0.9);
  line-height: 1.6;
}

.social-event-description {
  max-width: 30rem;
}

.social-event-hero-side {
  visibility: hidden;
}

.social-event-page {
  display: grid;
  gap: 1.4rem;
}

.social-event-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(20rem, 38vw, 26rem);
  border-radius: 32px;
  display: grid;
  align-items: end;
  border: 1px solid rgba(255, 241, 229, 0.14);
  box-shadow: 0 24px 56px rgba(24, 21, 18, 0.14);
}

.social-event-hero-media,
.social-event-hero-scrim {
  position: absolute;
  inset: 0;
}

.social-event-hero-media {
  background-position: center;
  background-size: cover;
}

.social-event-hero-scrim {
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.14) 0%, rgba(8, 8, 8, 0.58) 34%, rgba(8, 8, 8, 0.9) 100%);
}

.social-event-hero.is-dark .social-event-hero-scrim {
  background:
    linear-gradient(180deg, rgba(255, 249, 242, 0.16) 0%, rgba(255, 249, 242, 0.54) 34%, rgba(255, 249, 242, 0.9) 100%);
}

.social-event-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
  padding: clamp(1.6rem, 3.2vw, 2.5rem);
  color: #fffaf5;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.social-event-hero.is-dark .social-event-hero-copy {
  color: #191613;
  text-shadow: none;
}

.social-event-detail-title {
  margin: 0;
  max-width: 12ch;
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.social-event-detail-meta {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 246, 236, 0.94);
}

.social-event-hero.is-dark .social-event-detail-meta {
  color: rgba(34, 28, 21, 0.8);
}

.social-event-detail-description {
  margin: 0;
  max-width: 32rem;
  line-height: 1.68;
  color: rgba(255, 246, 235, 0.92);
}

.social-event-hero.is-dark .social-event-detail-description {
  color: rgba(28, 23, 18, 0.84);
}

.social-event-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}

.social-event-card {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 28px;
  background: #fffdf9;
  border: 1px solid rgba(126, 98, 70, 0.1);
  box-shadow: 0 18px 34px rgba(29, 25, 21, 0.06);
}

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

.social-event-card h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.social-event-fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
}

.social-event-fact-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(249, 243, 234, 0.94));
  border: 1px solid rgba(126, 98, 70, 0.11);
}

.social-event-fact-icon {
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f3e8da;
  color: #7a624a;
  flex-shrink: 0;
}

.social-event-fact-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.social-event-fact-body {
  display: grid;
  gap: 0.12rem;
}

.social-event-fact-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a624a;
  font-weight: 700;
}

.social-event-fact-body strong {
  color: #231c15;
  font-size: 1.02rem;
  line-height: 1.5;
}

.challenge-home-empty {
  align-items: start;
}

.challenge-home:not(.challenge-home-empty) .challenge-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.95fr);
  gap: 1.2rem;
  align-items: start;
  justify-items: stretch;
  width: min(100%, 66rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--challenge-bg);
  color: #fffaf5;
  border: 1px solid rgba(255, 243, 231, 0.1);
  border-radius: 32px;
  box-shadow: var(--challenge-shadow);
}

.challenge-home:not(.challenge-home-empty) .challenge-hero::before,
.challenge-home:not(.challenge-home-empty) .challenge-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.challenge-home:not(.challenge-home-empty) .challenge-hero::before {
  width: 16rem;
  height: 16rem;
  top: -4rem;
  right: -3rem;
  background: radial-gradient(circle, rgba(255, 244, 227, 0.16) 0%, rgba(255, 244, 227, 0) 72%);
}

.challenge-home:not(.challenge-home-empty) .challenge-hero::after {
  width: 18rem;
  height: 18rem;
  bottom: -7rem;
  left: -2rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74%);
}

.challenge-hero-copy,
.challenge-hero-side,
.challenge-highlight-grid,
.challenge-metric-stack,
.challenge-value-points,
.challenge-social-grid,
.challenge-section-heading,
.challenge-aside-heading {
  display: grid;
  gap: 1rem;
}

.challenge-hero-copy,
.challenge-hero-side {
  position: relative;
  z-index: 1;
}

.challenge-home:not(.challenge-home-empty) .challenge-hero-copy {
  max-width: 38rem;
  width: min(100%, 38rem);
  justify-items: start;
  text-align: left;
}

.challenge-home:not(.challenge-home-empty) .challenge-hero-side {
  width: min(100%, 25rem);
  justify-self: end;
}

.challenge-hero-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
}

.challenge-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 800;
  color: rgba(255, 235, 214, 0.86);
}

.challenge-live-pill,
.challenge-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.36rem 0.74rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.challenge-live-pill {
  background: rgba(255, 244, 234, 0.14);
  border: 1px solid rgba(255, 235, 214, 0.2);
  color: #fff6ee;
}

.challenge-pill {
  background: rgba(20, 52, 45, 0.1);
  color: #215246;
}

.challenge-title {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3rem, 5.8vw, 5.1rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.challenge-subtitle {
  margin: 0;
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--challenge-text-soft);
}

.challenge-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 239, 221, 0.88);
  font-size: 0.93rem;
  font-weight: 700;
}

.challenge-flow span {
  display: inline-flex;
  align-items: center;
}

.challenge-flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.8rem;
  color: rgba(255, 223, 190, 0.72);
}

.challenge-flow-arrow::before {
  content: "›";
  font-size: 1rem;
  line-height: 1;
}

.challenge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-start;
}

.challenge-primary-action {
  background: linear-gradient(135deg, #fff4e7 0%, #ffd5b1 100%);
  color: #1c1a18;
  box-shadow: 0 18px 40px rgba(18, 17, 16, 0.18);
}

.challenge-secondary-action {
  background: rgba(255, 250, 245, 0.14);
  color: #fffaf5;
  border: 1px solid rgba(255, 241, 229, 0.26);
}

.challenge-secondary-action:hover,
.challenge-primary-action:hover {
  transform: translateY(-1px);
}

.challenge-highlight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.5rem;
}

.challenge-highlight-card,
.challenge-aside-card,
.challenge-value-card,
.challenge-social-card {
  position: relative;
  overflow: hidden;
}

.challenge-highlight-card {
  padding: 1.1rem;
  border-radius: 22px;
  background: rgba(255, 251, 245, 0.1);
  border: 1px solid rgba(255, 245, 235, 0.14);
  backdrop-filter: blur(12px);
}

.challenge-highlight-card-accent {
  background: linear-gradient(180deg, rgba(255, 239, 219, 0.16) 0%, rgba(255, 218, 184, 0.08) 100%);
}

.challenge-highlight-label,
.challenge-social-label,
.challenge-metric-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.challenge-highlight-label,
.challenge-social-label {
  color: rgba(255, 232, 209, 0.74);
}

.challenge-highlight-card strong,
.challenge-social-item strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 1.05rem;
}

.challenge-highlight-card p,
.challenge-social-item p,
.challenge-aside-card p,
.challenge-value-point p {
  margin: 0;
  line-height: 1.6;
}

.challenge-aside-card {
  padding: 1.2rem;
  border-radius: 24px;
}

.challenge-aside-card-contrast {
  background: rgba(255, 248, 241, 0.95);
  color: #1f1b17;
  box-shadow: 0 18px 36px rgba(20, 23, 21, 0.12);
}

.challenge-aside-card-soft {
  background: var(--challenge-card-strong);
  border: 1px solid var(--challenge-card-border);
  backdrop-filter: blur(12px);
}

.challenge-aside-card-soft .challenge-pill {
  background: rgba(255, 245, 235, 0.18);
  color: #fff6ee;
}

.challenge-aside-card-soft strong,
.challenge-aside-card-soft p,
.challenge-aside-card-soft li {
  color: #fffaf5;
}

.challenge-aside-card strong {
  font-size: 1.2rem;
}

.challenge-aside-heading {
  gap: 0.55rem;
}

.challenge-aside-card-contrast .challenge-aside-heading {
  margin-bottom: 0.95rem;
}

.challenge-aside-title {
  display: block;
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.55rem, 1.2rem + 0.9vw, 2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #161310;
}

.challenge-metric-stack {
  gap: 0.85rem;
}

.challenge-metric-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(17, 54, 46, 0.06);
}

.challenge-aside-card-contrast .challenge-metric-label {
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: #5b5147;
}

.challenge-metric-card strong {
  font-size: 1.16rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #2c241c;
}

.challenge-metric-card span:last-child {
  color: #5d5348;
}

.challenge-step-list,
.challenge-bullet-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.65rem;
  line-height: 1.55;
}

.challenge-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 1.25rem;
}

.challenge-value-card,
.challenge-social-card {
  border-radius: 28px;
  padding: 1.5rem;
}

.challenge-value-card {
  background:
    radial-gradient(circle at top right, rgba(209, 126, 61, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 252, 248, 0.96) 0%, rgba(249, 242, 233, 0.96) 100%);
}

.challenge-social-card {
  background:
    radial-gradient(circle at top left, rgba(28, 64, 50, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 251, 246, 0.97) 0%, rgba(243, 237, 228, 0.97) 100%);
}

.challenge-section-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  line-height: 1.1;
  color: #1f1a15;
}

.challenge-value-points {
  gap: 1rem;
}

.challenge-value-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(126, 98, 70, 0.1);
}

.challenge-value-index {
  width: 2.7rem;
  height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(160deg, #173f35 0%, #255e51 100%);
  color: #fff8f2;
  font-weight: 800;
}

.challenge-value-point strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #1f1a15;
}

.challenge-social-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.challenge-social-item {
  display: grid;
  gap: 0.45rem;
  padding: 1.1rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(29, 67, 58, 0.96) 0%, rgba(20, 46, 40, 0.98) 100%);
  color: #fff8f0;
  box-shadow: 0 18px 36px rgba(26, 34, 30, 0.15);
}

.challenge-social-item p {
  color: rgba(248, 237, 225, 0.8);
}

@media (max-width: 768px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.9rem 1rem 1rem;
  }

  .topbar-head,
  .brand-block,
  .navlinks,
  .session-slot {
    width: 100%;
  }

  .topbar-head {
    justify-content: space-between;
  }

  .topbar-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 5.5rem;
  }

  .brand a {
    font-size: 1.3rem;
  }

  .brand-tag {
    display: none;
  }

  .topbar-desktop {
    display: none;
  }

  .mobile-drawer {
    position: fixed;
    top: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    z-index: 40;
    width: min(16.5rem, calc(100vw - 2.4rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
    padding: 4.9rem 0.85rem 0.95rem;
    border: 1px solid rgba(126, 98, 70, 0.14);
    border-radius: 24px;
    background: #fffaf4;
    box-shadow: -20px 0 48px rgba(40, 30, 19, 0.16);
    overflow-y: auto;
  }

  .topbar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    padding: 0;
    background: rgba(26, 21, 16, 0.46);
    cursor: pointer;
  }

  .mobile-navlinks {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.55rem;
    align-items: stretch;
    justify-content: flex-start;
    flex: 0 0 auto;
  }

  .mobile-navlinks a,
  .admin-nav-menu summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.7rem;
    padding: 0.75rem 0.9rem;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.35;
    border-radius: 16px;
    background: #f4ecdf;
  }

  .mobile-navlinks a:hover,
  .admin-nav-menu summary:hover {
    background: rgba(236, 227, 214, 0.92);
  }

  .admin-nav-menu {
    width: 100%;
  }

  .admin-nav-popover {
    position: static;
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    margin-top: 0.45rem;
    border-radius: 16px;
    box-shadow: none;
    background: #efe5d6;
  }

  .mobile-session-slot {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(126, 98, 70, 0.12);
  }

  .mobile-session-slot .button,
  .mobile-session-slot .inline-form,
  .mobile-session-slot .link-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .session-pill {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    border-radius: 16px;
  }

  .mobile-session-slot .button,
  .mobile-session-slot .link-button {
    justify-content: center;
    text-align: center;
  }

  .mobile-session-slot .inline-form {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-chrome,
  body {
    overflow-x: clip;
  }

  .hero-grid,
  .auth-grid,
  .submission-card-shell,
  .submission-detail-shell,
  .helper-grid.two,
  .hero-metrics,
  .profile-stats,
  .profile-gallery-grid {
    grid-template-columns: 1fr;
  }

  .page-shell {
    padding: 1rem 0.8rem 2rem;
  }

  .submission-detail-panel {
    padding: 0.95rem;
    border-radius: 22px;
  }

  .submission-detail-name {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  .submission-detail-caption {
    font-size: 1rem;
  }

  .submission-heart-button,
  .submission-detail-secondary-actions .button,
  .submission-detail-secondary-actions .inline-form {
    width: 100%;
  }

  .submission-detail-secondary-actions > .inline-form .button {
    width: 100%;
  }

  .submission-detail-secondary-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding: 0 0.8rem 1.6rem;
  }

  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1rem 0.2rem 0;
  }

  .site-footer-grid:not(.site-footer-grid-compact) > .site-footer-block:not(:first-child) {
    display: none;
  }

  .site-footer-grid-compact {
    grid-template-columns: 1fr;
  }

  .site-footer-block {
    gap: 0.55rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(126, 98, 70, 0.1);
  }

  .site-footer-block:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .site-footer-list {
    gap: 0.35rem;
    padding-left: 1rem;
  }

  .site-footer-faq {
    padding: 0.6rem 0;
  }

  .site-footer-link {
    margin-top: 0.15rem;
  }

  .info-page,
  .info-card-grid {
    grid-template-columns: 1fr;
  }

  .info-sidebar {
    position: static;
  }

  .auth-showcase-stack {
    min-height: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .auth-showcase-card {
    position: relative;
    width: 100%;
    aspect-ratio: 0.82;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
  }

  .auth-login-intro {
    display: none;
  }

  .flash-stack {
    top: auto;
    bottom: 0.8rem;
    left: 0.8rem;
    right: 0.8rem;
  }

  .flash,
  .flash-left,
  .flash-right {
    width: 100%;
    justify-self: stretch;
  }

  .profile-private-popover {
    position: static;
    width: 100%;
    margin-top: 0.75rem;
  }

  .challenge-hero,
  .challenge-secondary-grid,
  .challenge-highlight-grid,
  .challenge-social-grid {
    grid-template-columns: 1fr;
  }

  .challenge-home {
    gap: 1rem;
    padding-inline: 0.2rem;
    box-sizing: border-box;
  }

  .challenge-secondary-grid {
    display: none;
  }

  .challenge-highlight-card-social,
  .challenge-next-steps-card {
    display: none;
  }

  .challenge-hero {
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    border-radius: 28px;
    justify-items: stretch;
    box-sizing: border-box;
  }

  .challenge-home:not(.challenge-home-empty) .challenge-hero {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    justify-items: center;
    box-sizing: border-box;
    padding: 1rem 0.9rem 1.05rem;
  }

  .challenge-home:not(.challenge-home-empty) .challenge-hero-copy,
  .challenge-home:not(.challenge-home-empty) .challenge-hero-side {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    box-sizing: border-box;
  }

  .challenge-home:not(.challenge-home-empty) .challenge-hero-copy {
    justify-items: center;
    text-align: center;
    padding-inline: 0.1rem;
  }

  .challenge-home:not(.challenge-home-empty) .challenge-hero-side {
    padding-inline: 0.1rem;
  }

  .challenge-hero::before {
    width: 15rem;
    height: 15rem;
    top: -4.25rem;
    right: -3rem;
    opacity: 0.66;
  }

  .challenge-hero::after {
    width: 14rem;
    height: 14rem;
    bottom: -5.5rem;
    right: -1.5rem;
    left: auto;
    opacity: 0.88;
  }

  .challenge-hero-head {
    gap: 0.55rem;
    justify-content: center;
  }

  .challenge-title {
    max-width: none;
    font-size: clamp(1.95rem, 11vw, 3rem);
    line-height: 0.92;
  }

  .challenge-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    max-width: none;
  }

  .challenge-flow {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    justify-items: stretch;
  }

  .challenge-flow span {
    justify-content: center;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-sizing: border-box;
  }

  .challenge-flow-arrow {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    color: rgba(255, 232, 208, 0.72);
    min-width: 0;
    font-size: 0;
  }

  .challenge-flow-arrow::before {
    content: "↓";
    font-size: 1rem;
    line-height: 1;
  }

  .challenge-actions,
  .challenge-highlight-grid,
  .challenge-metric-stack,
  .challenge-value-points,
  .challenge-social-grid {
    gap: 0.75rem;
  }

  .challenge-actions .button,
  .challenge-highlight-card,
  .challenge-aside-card,
  .social-event-card,
  .challenge-social-item,
  .challenge-value-point {
    width: 100%;
    box-sizing: border-box;
  }

  .challenge-actions .button {
    justify-content: center;
  }

  .challenge-secondary-action {
    background: rgba(255, 248, 239, 0.18);
    border-color: rgba(255, 240, 226, 0.22);
  }

  .challenge-highlight-card,
  .challenge-aside-card,
  .challenge-social-item {
    box-sizing: border-box;
  }

  .challenge-secondary-grid {
    gap: 1rem;
  }

  .social-event-banner,
  .social-event-hero {
    width: 100%;
    border-radius: 24px;
  }

  .social-event-banner,
  .social-event-hero-shell {
    grid-template-columns: 1fr;
  }

  .social-event-hero-side {
    display: none;
  }

  .social-event-grid {
    grid-template-columns: 1fr;
  }

  .social-event-fact-list {
    grid-template-columns: 1fr;
  }

  .social-event-detail-title {
    max-width: none;
  }

  .social-event-fact-item {
    padding: 0.9rem;
  }

  .leaderboard-winner-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .leaderboard-winner-stats,
  .leaderboard-winner-metrics {
    justify-content: flex-start;
    justify-items: start;
  }

  .admin-header,
  .admin-dashboard-grid,
  .admin-kv-grid,
  .admin-metric-grid,
  .admin-create-panel .admin-form,
  .admin-date-range-fields,
  .admin-submission-row {
    grid-template-columns: 1fr;
  }

  .admin-date-range-fields {
    grid-template-columns: 1fr;
  }

  .admin-shell,
  .admin-active-panel,
  .admin-metrics-panel,
  .admin-create-panel,
  .admin-history-panel {
    padding: 1.1rem;
  }

  .admin-active-panel::after,
  .admin-metrics-panel::after,
  .admin-create-panel::after,
  .admin-top-panel::after,
  .admin-history-panel::after {
    left: 1.1rem;
    right: 1.1rem;
  }

  .admin-create-summary-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-create-toggle-label {
    display: flex;
    width: 100%;
    justify-content: center;
    justify-self: stretch;
    box-sizing: border-box;
  }

  .admin-edit-actions,
  .admin-form-actions,
  .admin-inline-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-form-actions .button,
  .admin-edit-actions .button,
  .admin-inline-actions .button,
  .admin-inline-actions .inline-form,
  .admin-edit-actions .inline-form {
    width: 100%;
  }

  .admin-form-actions .button,
  .admin-edit-actions .button,
  .admin-inline-actions .button,
  .admin-row-actions .button {
    justify-content: center;
  }

  .password-field input {
    padding-right: 5.75rem;
  }

  .password-toggle {
    right: 0.38rem;
    min-width: 4.7rem;
    padding-inline: 0.65rem;
    font-size: 0.79rem;
  }

  .notifications-header {
    flex-direction: column;
  }

  .notification-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-media {
    grid-column: 2;
    width: 4rem;
    height: 4rem;
  }
}

@media (max-width: 520px) {
  .topbar-head {
    align-items: center;
  }

  .topbar-menu-toggle {
    padding-inline: 0.9rem;
    min-width: 5.1rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.discover-experience {
  --discover-shell-width: min(100%, 27.5rem);
  --discover-panel: rgba(255, 251, 246, 0.84);
  --discover-panel-strong: rgba(255, 249, 243, 0.92);
  --discover-border: rgba(92, 76, 62, 0.12);
  --discover-shadow: 0 26px 80px rgba(33, 26, 18, 0.16);
  position: relative;
  min-height: calc(100vh - 6.2rem);
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 0.15rem 0 1.35rem;
}

.page-shell > .discover-experience:first-child {
  margin-top: -1rem;
}

.discover-stage {
  width: 100%;
  display: grid;
  justify-items: center;
}

.discover-frame {
  width: min(100%, 980px);
  display: grid;
  gap: 0.8rem;
  justify-items: center;
}

.discover-toolbar {
  width: min(100%, calc(var(--discover-shell-width) + 7.25rem));
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  padding: 0 0.2rem 0.05rem;
}

.discover-toolbar-copy {
  display: grid;
  gap: 0.22rem;
}

.discover-toolbar-label {
  color: #8a7868;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.discover-toolbar-copy p {
  margin: 0;
  color: #2f241b;
  font-size: 0.98rem;
  font-weight: 600;
}

.discover-toolbar-hint {
  color: #7f6b58;
  font-size: 0.78rem;
  line-height: 1.4;
}

.discover-toolbar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1c4032 0%, #152920 100%);
  border: 1px solid rgba(21, 41, 32, 0.22);
  box-shadow: 0 6px 14px rgba(22, 41, 32, 0.1);
  color: #fffdf8;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
}

.discover-quota {
  width: min(100%, calc(var(--discover-shell-width) + 7.25rem));
  display: grid;
  gap: 0.35rem;
  margin-top: -0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--discover-border);
  border-radius: 1.35rem;
  background: var(--discover-panel-strong);
  box-shadow: var(--discover-shadow);
}

.discover-quota-copy {
  display: grid;
  gap: 0.16rem;
}

.discover-quota-copy strong {
  font-size: 0.9rem;
  color: #2b2118;
}

.discover-quota-copy span,
.discover-quota-note {
  margin: 0;
  font-size: 0.8rem;
  color: #7a6959;
}

.discover-empty {
  max-width: 34rem;
  text-align: center;
}

.discover-empty-premium {
  padding-block: 2.2rem;
  background:
    radial-gradient(circle at top, rgba(255, 170, 120, 0.18), transparent 34%),
    rgba(255, 252, 247, 0.96);
}

.discover-empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.story-shell {
  width: min(100%, calc(var(--discover-shell-width) + 7.25rem));
  display: grid;
  grid-template-columns: var(--discover-shell-width) minmax(0, 6.25rem);
  gap: 1.15rem;
  align-items: center;
  justify-content: center;
}

.story-card-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  isolation: isolate;
}

.story-card {
  position: relative;
  width: var(--discover-shell-width);
  aspect-ratio: 9 / 16;
  border-radius: 2.1rem;
  overflow: hidden;
  background: #120f0c;
  box-shadow:
    0 34px 90px rgba(33, 26, 18, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  transform-origin: 50% 88%;
  transition: transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease, opacity 240ms ease;
  z-index: 2;
  will-change: transform, opacity;
}

.story-card.is-dragging {
  box-shadow:
    0 44px 120px rgba(24, 18, 12, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.24) inset;
}

.story-card-preview {
  position: absolute;
  inset: auto 0 -1rem 0;
  width: calc(var(--discover-shell-width) - 1.4rem);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: 1.9rem;
  overflow: hidden;
  transform: translateY(0.85rem) scale(0.95);
  opacity: 0.68;
  box-shadow: 0 22px 58px rgba(27, 20, 14, 0.14);
  z-index: 1;
  transition: transform 460ms cubic-bezier(.22,1,.36,1), opacity 260ms ease;
}

.story-card-preview-media,
.story-card-preview-scrim {
  position: absolute;
  inset: 0;
}

.story-card-preview-media {
  background-position: center;
  background-size: cover;
  filter: saturate(0.94) brightness(0.92);
  transform: scale(1.04);
}

.story-card-preview-scrim {
  background: linear-gradient(180deg, rgba(15, 12, 10, 0.10) 0%, rgba(15, 12, 10, 0.62) 100%);
}

.story-card-preview-copy {
  position: absolute;
  inset-inline: 1.05rem;
  bottom: 1.05rem;
  z-index: 1;
  display: grid;
  gap: 0.12rem;
  color: #fff8f2;
}

.story-card-preview-copy span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.story-card-preview-copy strong {
  font-size: 1rem;
  font-weight: 600;
}

.story-card-preview.is-entering {
  transform: translateY(0.12rem) scale(0.986);
  opacity: 0.92;
}

.story-media,
.story-backdrop,
.story-image,
.story-image-scrim {
  position: absolute;
  inset: 0;
}

.story-media {
  background:
    radial-gradient(circle at top, rgba(255, 196, 152, 0.22), transparent 48%),
    linear-gradient(180deg, #2a211a 0%, #1a1410 100%);
}

.story-backdrop {
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(1.05);
  transform: scale(1.08);
  opacity: 0.92;
}

.story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-media-fallback {
  position: absolute;
  inset: auto 1.2rem 1.2rem 1.2rem;
  z-index: 2;
  display: none;
  gap: 0.35rem;
  padding: 1rem 1rem 1.05rem;
  border-radius: 1.35rem;
  background: rgba(24, 18, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff8f2;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(18, 13, 10, 0.22);
}

.story-media-fallback.is-visible {
  display: grid;
}

.story-media-fallback strong {
  font-size: 1rem;
}

.story-media-fallback p {
  margin: 0;
  color: rgba(255, 247, 239, 0.82);
  font-size: 0.84rem;
  line-height: 1.4;
}

.story-media-fallback-badge {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff2e8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-media.is-unavailable .story-image-scrim {
  background:
    linear-gradient(180deg, rgba(12, 9, 7, 0.12) 0%, rgba(12, 9, 7, 0.22) 46%, rgba(12, 9, 7, 0.72) 100%),
    linear-gradient(0deg, rgba(255, 156, 90, 0.10), rgba(255, 156, 90, 0));
}

.story-image-scrim {
  background:
    linear-gradient(180deg, rgba(12, 9, 7, 0.16) 0%, rgba(12, 9, 7, 0.32) 46%, rgba(12, 9, 7, 0.86) 100%),
    linear-gradient(0deg, rgba(255, 156, 90, 0.15), rgba(255, 156, 90, 0));
}

.story-swipe-overlay {
  position: absolute;
  top: 1.35rem;
  z-index: 1;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.story-swipe-confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0.92);
  padding: 0.82rem 1.1rem;
  border-radius: 999px;
  background: rgba(19, 15, 12, 0.56);
  color: #fffaf6;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  backdrop-filter: blur(20px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.story-shell[data-swipe-state="boost"] .story-swipe-confirm-like,
.story-shell[data-swipe-state="dismiss"] .story-swipe-confirm-pass {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.story-swipe-overlay-like {
  left: 1.25rem;
  color: #fdf9f3;
  background: rgba(28, 64, 50, 0.32);
}

.story-swipe-overlay-pass {
  right: 1.25rem;
  color: #fff5ef;
  background: rgba(169, 79, 51, 0.34);
}

.story-shell[data-swipe-state="boost"] .story-swipe-overlay-like,
.story-shell[data-swipe-state="dismiss"] .story-swipe-overlay-pass {
  opacity: 1;
  transform: scale(1);
}

.story-topbar,
.story-copy {
  position: absolute;
  inset-inline: 0;
  z-index: 4;
  padding-inline: 1.2rem;
}

.story-topbar {
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding-top: 1.25rem;
  pointer-events: none;
}

.story-topbar-side {
  display: grid;
  justify-items: end;
  gap: 0.6rem;
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.story-engagement {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.story-engagement-item {
  min-height: 2.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(16, 12, 10, 0.26);
  color: #fffaf6;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 26px rgba(16, 11, 8, 0.14);
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.story-engagement-button {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
}

.story-engagement-button-like {
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.story-engagement-button-like:hover {
  transform: translateY(-1px) scale(1.02);
  background: rgba(126, 32, 44, 0.36);
  border-color: rgba(255, 214, 220, 0.36);
  box-shadow: 0 16px 30px rgba(50, 18, 18, 0.2);
}

.story-engagement-button-like:active {
  transform: scale(0.98);
}

.story-engagement-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.story-engagement-icon svg {
  width: 100%;
  height: 100%;
}

.story-engagement-value {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
}

.story-author {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  pointer-events: auto;
}

.story-avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 248, 240, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fffaf6;
  font-size: 1rem;
  font-weight: 700;
  backdrop-filter: blur(18px);
}

.story-author-copy {
  display: grid;
  gap: 0.12rem;
  color: #fffaf5;
  min-width: 0;
}

.story-author-copy strong {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-author-copy span {
  color: rgba(255, 247, 238, 0.78);
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-challenge-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  background: rgba(20, 16, 12, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff6ee;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
}

.story-copy {
  bottom: 0;
  padding-bottom: 1.15rem;
  color: #fffaf6;
  display: grid;
  gap: 0.45rem;
}

.story-caption {
  margin: 0;
  max-width: 90%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.24rem, 2.25vw, 1.62rem);
  line-height: 1.15;
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.26);
}

.story-action-rail {
  display: grid;
  gap: 0.75rem;
  align-self: center;
}

.story-action-form {
  display: contents;
}

.story-action-button {
  min-height: 4.8rem;
  border: 1px solid var(--discover-border);
  border-radius: 1.7rem;
  padding: 0.62rem 0.7rem 0.64rem;
  display: grid;
  justify-items: center;
  gap: 0.42rem;
  background: var(--discover-panel);
  color: #2b2118;
  box-shadow: var(--discover-shadow);
  backdrop-filter: blur(20px);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.story-action-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 0 0 1px rgba(92, 76, 62, 0.08);
}

.story-action-icon svg {
  width: 1.22rem;
  height: 1.22rem;
}

.story-action-copy {
  display: grid;
  gap: 0.08rem;
}

.story-action-copy-single {
  align-self: center;
}

.story-action-copy strong,
.story-action-copy span {
  display: block;
}

.story-action-copy strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.story-action-copy span {
  color: #7a6959;
  font-size: 0.72rem;
}

.story-action-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(52, 39, 26, 0.14);
}

.story-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.story-action-button-like {
  background: linear-gradient(180deg, rgba(255, 247, 240, 0.92) 0%, rgba(255, 231, 224, 0.92) 100%);
}

.story-action-button-like .story-action-icon {
  background: rgba(255, 244, 239, 0.88);
  color: #8b3d33;
}

.story-action-button-pass {
  background: linear-gradient(180deg, rgba(248, 243, 238, 0.95) 0%, rgba(240, 233, 226, 0.95) 100%);
}

.story-action-button-pass .story-action-icon {
  color: #6f5a48;
}

.story-action-button-pass-simple .story-action-copy span {
  display: none;
}

.story-action-button-pass-simple.is-exhausted {
  opacity: 0.42;
}

.story-action-button-pass-simple.is-exhausted:hover {
  transform: none;
  box-shadow: var(--discover-shadow);
}

.story-action-button-detail {
  background: linear-gradient(180deg, rgba(243, 241, 237, 0.96) 0%, rgba(234, 230, 224, 0.96) 100%);
}

.story-action-button-detail .story-action-icon {
  color: #49546a;
}

.story-auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: min(100%, var(--discover-shell-width));
  min-height: 2.8rem;
  border-radius: 999px;
  border: 1px solid rgba(92, 76, 62, 0.12);
  background: rgba(28, 64, 50, 0.88);
  color: #fffdf9;
  padding: 0.62rem 1rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(41, 29, 21, 0.08);
}

.story-mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(92, 76, 62, 0.12);
  background: rgba(245, 238, 230, 0.88);
  color: #5e4c3e;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.story-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 13, 10, 0.44);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 11;
}

.story-comments-sheet {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  width: min(100% - 2rem, 50rem);
  max-width: 100%;
  margin-inline: auto;
  padding: 0.9rem 0.9rem 0.9rem;
  box-sizing: border-box;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.98) 0%, rgba(252, 246, 240, 0.98) 100%);
  box-shadow: 0 32px 110px rgba(33, 25, 18, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.44);
  transform: translateY(104%) scale(0.985);
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
  z-index: 12;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 1rem;
  height: min(82vh, 48rem);
  overflow: hidden;
}

.story-comments-sheet.is-static {
  transition: none;
}

.story-sheet-handle {
  width: 3rem;
  height: 0.3rem;
  border-radius: 999px;
  background: rgba(92, 76, 62, 0.22);
  justify-self: center;
}

.story-sheet-header {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.2rem 0.2rem 0;
  min-width: 0;
}

.story-sheet-overview {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.story-sheet-author {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.story-sheet-author-copy {
  display: grid;
  gap: 0.1rem;
  color: #271d14;
}

.story-sheet-author-copy strong {
  font-size: 1rem;
}

.story-sheet-author-copy span {
  color: #7c6b5b;
  font-size: 0.86rem;
}

.story-sheet-context {
  display: grid;
  gap: 0.28rem;
}

.story-sheet-theme {
  margin: 0;
  color: #8a755f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-sheet-caption {
  margin: 0;
  color: #2f251c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04rem;
  line-height: 1.34;
}

.story-sheet-caption-muted {
  color: #756351;
  font-family: inherit;
  font-size: 0.92rem;
}

.story-sheet-close {
  min-width: 3rem;
  min-height: 3rem;
  border: 1px solid rgba(92, 76, 62, 0.1);
  border-radius: 1rem;
  background: rgba(245, 238, 230, 0.92);
  color: #6d5a49;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 12px 28px rgba(49, 35, 25, 0.08);
}

.story-comments-title-row {
  padding: 0 0.2rem;
}

.story-comments-title-row h2,
.story-comments-title-row .meta {
  margin: 0;
}

.discover-comments-sheet .story-sheet-context {
  min-width: 0;
}

.discover-comments-sheet .story-sheet-caption {
  overflow-wrap: anywhere;
}

.story-comments-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.2rem 0.2rem 0.12rem 0.2rem;
  margin-right: -0.1rem;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: linear-gradient(180deg, rgba(255, 251, 246, 0.98) 0%, rgba(255, 251, 246, 0.94) 100%);
  border-radius: 1.25rem;
}

.story-comments-body::-webkit-scrollbar {
  width: 8px;
}

.story-comments-body::-webkit-scrollbar-track {
  background: transparent;
}

.story-comments-body::-webkit-scrollbar-thumb {
  background: rgba(104, 84, 65, 0.2);
  border-radius: 999px;
}

.story-comments-compose {
  margin: 0 -0.85rem -0.85rem;
  padding: 0.85rem 0.85rem 0.85rem;
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 0) 0%, rgba(255, 251, 246, 0.88) 18%, rgba(255, 251, 246, 0.99) 44%);
  border-top: 1px solid rgba(130, 108, 86, 0.08);
  backdrop-filter: blur(18px);
  position: relative;
  z-index: 3;
}

.story-comment-form {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 0.4rem;
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(130, 108, 86, 0.1);
  box-shadow: 0 12px 30px rgba(49, 35, 25, 0.06);
}

.story-comment-form textarea {
  min-height: 4rem;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.95rem 0.55rem;
  border-radius: 1rem;
  border: 0;
  background: transparent;
  resize: none;
  font: inherit;
  color: #30261d;
}

.comment-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-inline: 0.2rem;
}

.comment-emoji-picker {
  position: relative;
  z-index: 4;
}

.comment-emoji-trigger {
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid rgba(125, 106, 86, 0.18);
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.96);
  color: #6d5d4d;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(34, 24, 18, 0.06);
}

.comment-emoji-trigger:hover,
.comment-emoji-trigger:focus-visible {
  background: #ffffff;
  color: #214d3d;
  border-color: rgba(33, 77, 61, 0.2);
}

.comment-emoji-trigger svg {
  width: 1.15rem;
  height: 1.15rem;
}

.comment-emoji-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: min(14rem, calc(100vw - 4rem));
  padding: 0.6rem;
  border-radius: 1rem;
  background: rgba(42, 38, 34, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 42px rgba(20, 14, 11, 0.28);
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55rem);
}

.comment-emoji-picker-left .comment-emoji-panel {
  left: auto;
  right: 0;
}

.comment-emoji-panel[hidden] {
  display: none !important;
}

.comment-emoji-option {
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: #fff6ee;
  font-size: 1.08rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background 120ms ease;
}

.comment-emoji-option:hover,
.comment-emoji-option:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.comment-compose-actions .button {
  flex: 0 0 auto;
}

.comment-submit-button {
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 999px;
  background: #183d31;
  color: #f7f1ea;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(24, 61, 49, 0.16);
}

.comment-compose-actions > .comment-submit-button {
  margin-left: 0.1rem;
}

.comment-submit-button:hover,
.comment-submit-button:focus-visible {
  background: #112d24;
  transform: translateY(-1px);
}

.comment-submit-button svg {
  width: 1rem;
  height: 1rem;
}

.story-auth-link-sheet {
  justify-self: start;
}

.story-comments-empty {
  padding: 1rem;
  color: #6d5a49;
  display: grid;
  gap: 0.3rem;
  border-radius: 1.25rem;
  background: rgba(247, 240, 231, 0.82);
  border: 1px dashed rgba(134, 111, 85, 0.18);
}

.story-comments-empty strong,
.story-comments-empty p {
  margin: 0;
}

.story-comments-list {
  display: grid;
  gap: 0.62rem;
  align-content: start;
  padding-top: 0.1rem;
}

.story-comment-thread,
.story-thread-replies {
  display: grid;
  gap: 0.48rem;
}

.story-thread-replies[hidden] {
  display: none !important;
}

.story-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.9rem 0.95rem;
  border-radius: 1.25rem;
  background: rgba(247, 240, 231, 0.92);
  border: 1px solid rgba(134, 111, 85, 0.1);
}

.story-comment-avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(28, 64, 50, 0.11);
  color: #214d3d;
  font-size: 0.9rem;
  font-weight: 700;
}

.story-comment-copy {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.story-comment-reply {
  margin-left: 1.15rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1.05rem;
  position: relative;
}

.story-comment-reply::before {
  content: "";
  position: absolute;
  left: 0.38rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  border-radius: 999px;
  background: rgba(28, 64, 50, 0.12);
}

.story-comment-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: start;
  margin-bottom: 0.1rem;
  min-width: 0;
}

.story-comment-head div {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.story-comment-head span {
  font-size: 0.76rem;
  color: #7f6d5b;
}

.story-comment-author-link {
  display: inline-flex;
  align-items: center;
}

.story-comment-author-link:hover,
.story-comment-author-link:focus-visible {
  color: #214d3d;
}

.story-comment-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.15rem;
  flex: 0 0 auto;
  min-width: 4.6rem;
  text-align: right;
  justify-self: end;
}

.story-comment-reply-action {
  padding: 0;
  font-size: 0.78rem;
  color: #5c4c3e;
}

.story-comment-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.18rem;
}

.story-comment-thread-toggle {
  padding: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: #b14f1f;
  letter-spacing: 0.01em;
}

.story-comment-thread-toggle:hover,
.story-comment-thread-toggle:focus-visible,
.story-comment-reply-action:hover,
.story-comment-reply-action:focus-visible {
  color: #8f3610;
}

.story-comment-thread-meta {
  display: grid;
  gap: 0.16rem;
  margin-bottom: 0.38rem;
}

.story-comment-reply-label {
  color: #7d6248;
  font-size: 0.76rem;
  line-height: 1.2;
}

.story-comment-reply-label strong {
  color: #214d3d;
}

.story-comment-parent-snippet {
  color: #8a7158;
  font-size: 0.76rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-comment p,
.story-comment-body {
  margin: 0;
  color: #2f271f;
}

.story-comment-body {
  line-height: 1.45;
}

.story-comment-reply-context {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border-radius: 1rem;
  background: rgba(249, 243, 236, 0.98);
  border: 1px solid rgba(126, 98, 70, 0.12);
}

.story-comment-reply-context[hidden] {
  display: none !important;
}

.story-comment-reply-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: rgba(160, 123, 83, 0.12);
  color: #8a6847;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.story-comment-reply-target {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.story-comment-reply-context strong,
.story-comment-reply-context span {
  margin: 0;
}

.story-comment-reply-context strong {
  color: #2f271f;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-admin-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0 0.25rem 0.1rem;
  border-top: 1px solid rgba(130, 108, 86, 0.1);
  color: #6a5a48;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.submission-comment-form,
.submission-comments-body {
  width: 100%;
}

.submission-comments-compose {
  margin: 0 -0.85rem -0.85rem;
}

.discover-experience.comments-open {
  isolation: isolate;
}

.discover-experience.comments-open .story-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.discover-experience.comments-open .story-comments-sheet {
  transform: translateY(0) scale(1);
}

body.discover-sheet-open {
  overflow: hidden;
}

body.profile-avatar-dialog-open {
  overflow: hidden;
}

@media (max-width: 920px) {
  .discover-toolbar,
  .story-shell {
    width: min(100%, var(--discover-shell-width));
  }

  .discover-toolbar {
    justify-content: space-between;
  }

  .story-action-rail {
    width: var(--discover-shell-width);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
  }

  .story-action-button {
    min-height: 4.6rem;
    padding-inline: 0.45rem;
  }
}

@media (max-width: 640px) {
  .discover-experience {
    min-height: auto;
    padding-top: 0.45rem;
  }

  .discover-frame {
    gap: 0.75rem;
  }

  .discover-toolbar {
    width: min(100%, 23rem);
    align-items: flex-start;
  }

  .discover-toolbar-link {
    min-height: 2.35rem;
    padding-inline: 0.8rem;
  }

  .story-shell {
    --discover-shell-width: min(100%, 23rem);
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .story-card {
    border-radius: 1.6rem;
  }

  .story-topbar,
  .story-copy {
    padding-inline: 1rem;
  }

  .story-topbar-side {
    gap: 0.45rem;
  }

  .story-engagement {
    gap: 0.35rem;
  }

  .story-engagement-item {
    min-height: 2.15rem;
    padding-inline: 0.62rem;
  }

  .story-engagement-value {
    font-size: 0.78rem;
  }

  .story-copy {
    padding-bottom: 1rem;
  }

  .story-caption {
    max-width: 100%;
    font-size: 1.15rem;
  }

  .story-action-rail {
    width: min(100%, 23rem);
    gap: 0.55rem;
  }

  .story-action-button {
    border-radius: 1rem;
    min-height: 4.25rem;
    gap: 0.3rem;
  }

  .story-action-icon {
    width: 2.2rem;
    height: 2.2rem;
  }

  .story-action-copy strong {
    font-size: 0.72rem;
  }

  .story-action-copy span {
    font-size: 0.66rem;
  }

  .story-comments-sheet {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    height: min(93vh, 58rem);
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(104%);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem;
    box-sizing: border-box;
  }

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

  .story-sheet-header,
  .story-comment-head,
  .story-comment-reply-context {
    align-items: stretch;
  }

  .story-sheet-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.15rem 0.15rem 0;
  }

  .story-sheet-overview {
    gap: 0.45rem;
  }

  .story-sheet-context {
    gap: 0.18rem;
  }

  .story-sheet-theme {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }

  .story-sheet-caption {
    font-size: 0.96rem;
    line-height: 1.3;
  }

  .story-comments-title-row {
    padding: 0 0.15rem;
    gap: 0.35rem;
    align-items: flex-start;
  }

  .discover-comments-sheet {
    height: auto;
    max-height: min(78vh, 42rem);
    grid-template-rows: auto auto minmax(0, auto) auto;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem 0.6rem;
    overflow-x: hidden;
  }

  .discover-comments-sheet .story-sheet-header {
    display: none;
  }

  .discover-comments-sheet .story-comments-title-row {
    padding: 0 0.12rem 0.08rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.08rem;
  }

  .discover-comments-sheet .story-comments-title-row h2 {
    font-size: 1.05rem;
    line-height: 1.1;
  }

  .discover-comments-sheet .story-comments-title-row .meta {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .discover-comments-sheet .story-comments-body {
    padding: 0 0.08rem;
    background: transparent;
    border-radius: 0;
    max-height: min(44vh, 23rem);
    margin-right: 0;
  }

  .discover-comments-sheet .story-comments-compose {
    margin: 0;
    padding: 0.55rem 0 0;
    width: 100%;
    box-sizing: border-box;
  }

  .discover-comments-sheet .story-comment-form {
    gap: 0.45rem;
    padding: 0.28rem;
    border-radius: 1.15rem;
    width: 100%;
    box-sizing: border-box;
  }

  .discover-comments-sheet .story-comment-form textarea {
    min-height: 3.25rem;
    padding: 0.7rem 0.85rem 0.4rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .discover-comments-sheet .comment-compose-actions {
    gap: 0.55rem;
  }

  .discover-comments-sheet .comment-emoji-trigger,
  .discover-comments-sheet .comment-submit-button {
    width: 2.7rem;
    height: 2.7rem;
  }

  .story-sheet-summary > * {
    max-width: none;
  }

  .story-comment-reply-context {
    grid-template-columns: 1fr;
  }

  .story-comment-reply {
    margin-left: 0.75rem;
    padding-left: 0.85rem;
  }

  .story-comment-head-side {
    align-items: flex-start;
    text-align: left;
    justify-self: start;
  }

  .story-sheet-close {
    min-width: auto;
    padding-inline: 0.75rem;
    justify-self: end;
    align-self: start;
  }

}