.screen-stack { position: relative; flex: 1; display: flex; min-height: 0; }
.screen-stack > .scroll { flex: 1; }

.splash { display: grid; place-items: center; background: var(--intro-bg); }
.splash-mark { color: var(--intro-fg); }

.intro {
  color-scheme: dark;
  --bg: #000000;
  --card: #17191E;
  --sheet: #28292D;
  --text-1: #FFFFFF;
  --text-2: #C9CACE;
  --text-3: #83858B;
  --divider: #2A2C32;
  --accent: var(--accent-dark);
  --accent-2: var(--accent-bright);
  --neutral: #28292D;
  --login-bg: #FFFFFF;
  --login-fg: #000000;
  background: var(--bg);
}

.intro-pane { flex: 1; display: flex; min-width: 0; min-height: 0; }
.intro-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: max(14px, var(--safe-top)) 28px calc(34px + var(--safe-bottom));
}

.intro .field {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: calc(22px * var(--r-k));
  padding: 26px 22px;
  corner-shape: superellipse(1.5);
}
.intro .field:focus-within { border-color: #fff; box-shadow: none; }
.intro .field input { font-size: 16px; }

.intro .continue-btn,
.intro .google-btn {
  height: 72px;
  border: 0;
  border-radius: calc(20px * var(--r-k));
  background: var(--login-bg);
  color: var(--login-fg);
  corner-shape: superellipse(1.5);
}
.intro .continue-btn:disabled { color: rgba(0, 0, 0, .34); opacity: 1; }
.intro .continue-btn .spinner { border-color: rgba(0, 0, 0, .22); border-top-color: #000; }

.login-brand { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.login-mark { height: 30px; }
.login-tagline { margin-top: 12px; font-size: 18px; font-weight: 600; color: var(--text-1); }
.login-error { margin-top: 20px; text-align: center; }
.login-brand .google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 26px;
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--dur-press) var(--spring-soft), opacity 120ms linear;
}
.google-btn:active:not(:disabled) { transform: scale(.985); }
.google-btn:disabled { opacity: .55; }
.login-help {
  align-self: flex-start;
  margin-top: 16px;
  color: var(--accent);
  font-size: var(--t-label-lg-size);
  font-weight: 700;
}
.spinner.on-dark { border-color: rgba(0, 0, 0, .25); border-top-color: #000; }

.login-consents {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
.login-consent-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: var(--t-label-lg-size);
  line-height: 1.45;
  cursor: pointer;
}
.login-consent-check input {
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--text-3);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.login-consent-check input:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}
.login-consent-check strong { color: var(--text-1); }
.login-consent-check a { color: var(--text-1); font-weight: 700; text-decoration: underline; }

.login-consent { text-align: center; }
.login-consent a { color: var(--text-2); text-decoration: underline; }

.onboarding-mark { padding: 10px 0 4px; color: var(--text-1); }
.onboarding-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.onboarding-actions { padding-top: 12px; }
.onboarding-actions .text-btn { margin-top: 14px; }
.onboarding-searching { display: grid; place-items: center; padding: 16px 0; }
.onboarding-notice { text-align: center; padding-top: 12px; }
.notice-slot { margin-top: 10px; }

.intro .field.attached { border-radius: calc(22px * var(--r-k)) calc(22px * var(--r-k)) 0 0; border-bottom-color: transparent; corner-shape: superellipse(1.5); }
.school-results { margin-top: 10px; }
.school-results.attached { margin-top: 0; }
.school-list { background: var(--sheet); border-radius: calc(14px * var(--r-k)); padding: 4px 0; corner-shape: superellipse(1.5); }
.school-results.attached .school-list { border-radius: 0 0 calc(22px * var(--r-k)) calc(22px * var(--r-k)); padding: 6px 0 10px; corner-shape: superellipse(1.5); }
.school-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 14px 22px;
  text-align: left;
}
.school-name { font-size: 15px; font-weight: 700; color: var(--text-1); }

.number-row { display: flex; gap: 10px; }
.number-field { position: relative; justify-content: center; padding: 18px 12px; }
.number-field input { text-align: center; flex: 0 1 auto; width: 2.2em; }
.number-unit {
  color: var(--text-3);
  font-size: 14px;
  pointer-events: none;
}
.number-field.filled .number-unit { color: var(--text-2); font-size: 12px; }
.intro .number-field { justify-content: flex-end; padding: 26px 22px; }
.intro .number-field input { text-align: right; }

.step-heading p { margin-top: 6px; }
.age-gate-title { font-size: 18px; font-weight: 700; color: var(--text-1); }
.age-gate-body { margin-top: 14px; }
.age-gate-action { margin-top: 22px; }
.age-gate-btn { height: 52px; border-radius: calc(12px * var(--r-k)); font-size: 15px; corner-shape: superellipse(1.5); }

.intro-preview { display: none; }

.intro-phone {
  position: absolute;
  left: 50%;
  top: 23%;
  width: var(--phone-w);
  height: 100%;
  margin-left: calc(var(--phone-w) / -2);
  font-size: calc(var(--phone-w) / 33.5);
  border: .5em solid #000;
  border-bottom: 0;
  border-radius: 3em 3em 0 0;
  background: #000000;
  box-shadow: 0 2em 5em rgba(0, 0, 0, .45);
  overflow: hidden;
}

.intro-hero {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 4em;
  transform: translate(-52%, -30%) rotate(45deg);
}
.intro-phone.hero {
  position: static;
  flex: none;
  margin-left: 0;
  height: calc(var(--phone-w) * 2.75);
  border-bottom: .5em solid #000;
  border-radius: 3em;
}

.mk {
  height: 100%;
  padding: 0 1.8em;
  color: var(--text-1);
  overflow: hidden;
  user-select: none;
}
.mk .icon { width: 1.4em; height: 1.4em; }
.mk-wordmark { height: 1.05em; color: var(--text-1); }
.mk-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.1em 0 .4em; }
.mk-topbar-icon { display: flex; color: var(--text-1); }

.mk-head { padding: 2.2em 0 1.4em; }
.mk-date { font-size: 1.35em; font-weight: 700; color: var(--text-2); }
.mk-school { font-size: 2.15em; line-height: 1.25; font-weight: 700; min-height: 1.25em; }

.mk-card { background: var(--card); border-radius: 1.45em; padding: 1.7em; margin-bottom: 1.7em; }
.mk-card-head { display: flex; align-items: center; justify-content: space-between; }
.mk-card-title { font-size: 1.2em; font-weight: 700; }
.mk-more { font-size: .95em; color: var(--text-3); }

.mk-bar { height: 1em; border-radius: .5em; background: #8D8D8D; }
.mk-bar.sm { height: .8em; }

.mk-periods { display: grid; grid-template-columns: 1fr 1fr; gap: .93em; margin-top: 1.15em; }
.mk-period {
  display: flex;
  align-items: center;
  gap: .8em;
  height: 3em;
  padding: 0 .9em;
  border-radius: .75em;
  background: #1E2026;
}
.mk-period .mk-bar { flex: none; }
.mk-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: .45em;
  background: #1C4134;
  color: var(--accent-2);
  font-size: .9em;
  font-weight: 700;
}

.mk-meal { margin-top: 1.15em; display: flex; flex-direction: column; gap: 1.14em; }
.mk-chip-row { display: flex; gap: .8em; }
.mk-chip-row .mk-bar { height: 2.36em; border-radius: .65em; }
.mk-chip-row .mk-bar.accent { background: transparent; border: 1px solid #2E7B5C; }

.mk-profile { display: flex; align-items: center; gap: 1em; padding: 1.8em 0 .2em; }
.mk-profile-who { flex: 1; min-width: 0; }
.mk-name { font-size: 1.6em; line-height: 1.3; font-weight: 700; }
.mk-handle { font-size: 1.15em; color: var(--text-2); }
.mk-avatar { flex: none; width: 4.2em; height: 4.2em; border-radius: 50%; background: var(--accent); }
.mk-stats { display: flex; gap: 1.4em; padding: 1.2em 0 .2em; font-size: 1.05em; color: var(--text-2); }
.mk-stats b { color: var(--text-1); }
.mk-actions { display: flex; gap: .9em; padding: 1.2em 0 1.4em; border-bottom: 1px solid var(--divider); }
.mk-btn {
  flex: 1;
  display: grid;
  place-items: center;
  height: 2.6em;
  border-radius: .7em;
  background: var(--card);
  font-size: 1.05em;
  font-weight: 500;
}
.mk-feed { padding-top: 1.4em; display: flex; flex-direction: column; gap: 1.1em; }
.mk-post { background: var(--card); border-radius: 1.3em; padding: 1.2em; }
.mk-post-head { display: flex; align-items: center; gap: .7em; }
.mk-post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4em; }
.mk-dot { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--accent); }
.mk-follow {
  flex: none;
  padding: .35em .7em;
  border-radius: .5em;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: .8em;
  font-weight: 700;
}
.mk-post-body { margin-top: 1em; display: flex; flex-direction: column; gap: .55em; }
.mk-post-foot { display: flex; align-items: center; gap: .9em; margin-top: 1.1em; color: var(--text-3); }
.mk-foot-icon { display: flex; }
.mk-time { margin-left: auto; font-size: .85em; }

@media (min-width: 561px) {
  .screen.intro { width: 100%; }
}

@media (min-width: 1024px) and (min-height: 620px) {
  .intro { flex-direction: row; }
  .intro-pane { flex: 1 1 51%; }
  .intro-preview {
    display: block;
    position: relative;
    flex: 1 1 49%;
    overflow: hidden;
    --phone-w: min(470px, 35vw, 46vh);
    background: #00232D url('../img/intro-aurora.jpg') center / cover no-repeat;
  }
  .onboarding-body .step-heading + * { margin-top: 38px; }
  .intro .step-heading h1 { font-size: 28px; line-height: 36px; }
  .intro .step-heading p { font-size: 18px; line-height: 26px; }
  .intro .login-tagline { font-size: 20px; }
  .intro .login-mark { height: 46px; }
}

@media not all and (min-width: 1024px) and (min-height: 620px) {
  .intro {
    color-scheme: light dark;
    --bg: var(--intro-bg);
    --card: var(--intro-card);
    --sheet: var(--intro-card);
    --text-1: var(--intro-fg);
    --text-2: var(--intro-fg);
    --text-3: var(--intro-dim);
    --divider: var(--intro-dim);
    --accent: var(--intro-link);
    --accent-2: var(--intro-link);
    --danger: var(--intro-error);
    --login-bg: var(--intro-solid);
    --login-fg: var(--intro-on-solid);
  }
  :root[data-theme='light'] .intro { color-scheme: light; }
  :root[data-theme='dark'] .intro { color-scheme: dark; }

  .intro-col { padding: max(14px, var(--safe-top)) 30px calc(23px + var(--safe-bottom)); }
  .login .intro-col { padding-bottom: calc(33px + var(--safe-bottom)); }

  .intro .step-heading h1 { font-size: 24px; line-height: 32px; }
  .intro .step-heading p { margin-top: 2px; font-size: 20px; line-height: 30px; font-weight: 400; white-space: pre-line; }

  :root {
    --intro-r: calc(20px * var(--r-k));
    --age-gate-r: calc(48px * var(--r-k));
  }

  .intro .field {
    height: 65px;
    padding: 0 26px;
    border-color: var(--intro-dim);
    border-radius: var(--intro-r);
    corner-shape: superellipse(1.5);
}
  .intro .field:focus-within { border-color: var(--intro-fg); }
  .intro .field .prefix { display: none; }
  .intro .onboarding-body > .field + .field { margin-top: 13px; }
  .intro .field.attached { border-radius: var(--intro-r) var(--intro-r) 0 0; corner-shape: superellipse(1.5); }

  .intro .continue-btn,
  .intro .google-btn { height: 65px; border-radius: var(--intro-r); corner-shape: superellipse(1.5); }
  .intro .continue-btn { gap: 1px; padding: 0 24.5px; font-size: 15px; }
  .intro .continue-btn .icon { width: 15px; height: 15px; }
  .intro .continue-btn:disabled { color: color-mix(in srgb, var(--login-fg) 34%, transparent); }
  .intro .continue-btn .spinner {
    border-color: color-mix(in srgb, var(--login-fg) 22%, transparent);
    border-top-color: var(--login-fg);
  }
  .intro .spinner.on-dark {
    border-color: color-mix(in srgb, var(--login-fg) 25%, transparent);
    border-top-color: var(--login-fg);
  }

  .login-brand::before { content: ''; flex: 0 1 108px; }
  .login-brand > * { flex: none; }
  .login-tagline { margin-top: 8.5px; font-size: 20px; line-height: 28px; font-weight: 400; }
  .login-brand .google-btn { gap: 16px; height: 58px; margin-top: 28px; font-size: 20px; }
  .login-help {
    align-self: flex-end;
    margin-top: 9.5px;
    padding-right: 12px;
    font-size: 16px;
    line-height: 22px;
  }
  .login-consent {
    max-width: 260px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: var(--text-1);
    word-break: keep-all;
  }
  .login-consent a { color: var(--text-1); font-weight: 700; text-decoration: none; }
  .login-consents { gap: 10px; margin-top: 30px; }
  .login-consent-check { gap: 11px; font-size: 15px; line-height: 22px; }
  .login-consent-check input { flex-basis: 21px; width: 21px; height: 21px; border-radius: 7px; }
  .login-consent-check a { text-decoration: none; }

  .onboarding-mark { padding: 20px 0 4px; }
  .onboarding-body { min-height: 0; overflow: visible; }
  .onboarding-body::before { content: ''; flex: 0 1 98px; }
  .onboarding-body > * { flex: none; }
  .onboarding-body .step-heading + * { margin-top: 16px; }
  .onboarding-actions .text-btn { margin-top: 6px; font-size: 15px; }
  .intro .inline-error,
  .intro .inline-hint { padding-right: 12px; font-size: 16px; line-height: 22px; }

  .intro .school-list { background: var(--intro-list); }
  .intro .school-list .divider { display: none; }
  .intro .school-results.attached .school-list { border-radius: 0 0 var(--intro-r) var(--intro-r); padding: 0; corner-shape: superellipse(1.5); }
  .intro .school-results { position: relative; z-index: 1; height: 0; margin-top: 0; }
  .intro .notice-slot { height: 0; margin-top: 0; }
  .intro .notice-slot > * { margin-top: 8px; }
  .intro .school-row { gap: 0; padding: 10px 24px 17px; }
  .intro .school-row .c-3 { color: var(--text-1); }
  .intro .school-name { font-size: 16px; line-height: 22px; }

  .intro .number-row { gap: 18px; }
  .intro .number-field { flex: 1; min-width: 0; justify-content: space-between; padding: 0 26px; }
  .intro .number-field input { flex: 1; width: 0; min-width: 0; text-align: center; font-size: 24px; font-weight: 400; }
  .intro .number-unit,
  .intro .number-field.filled .number-unit { color: var(--intro-dim); font-size: 15px; }

  .sheet.age-gate {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(21px + var(--safe-bottom));
    width: min(357px, calc(100% - 45px));
    max-height: none;
    margin: 0 auto;
    padding: 29px 14px 18px;
    border: 1px solid var(--intro-veil-line);
    border-radius: var(--age-gate-r);
    background: var(--intro-veil);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    transform: none;
    box-shadow: var(--intro-veil-shadow);
    animation: age-gate-in 340ms var(--spring) both;
    corner-shape: superellipse(1.5);
}
  @supports not ((backdrop-filter: blur(9px)) or (-webkit-backdrop-filter: blur(9px))) {
    .sheet.age-gate { background: var(--intro-card); }
  }
  .sheet.age-gate.leaving { animation: age-gate-out 240ms var(--spring-soft) both; }
  .overlay-root:has(.sheet.age-gate) .scrim { background: transparent; }
  .sheet.age-gate .sheet-handle,
  .sheet.age-gate .age-gate-mark { display: none; }
  .age-gate-title { padding: 0 11px; font-size: 16px; line-height: 22px; color: var(--intro-fg); }
  .age-gate-body {
    padding: 0 11px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--intro-fg);
    white-space: pre-line;
  }
  .age-gate-action { margin-top: 23px; }
  .age-gate-btn {
    height: 67px;
    border-radius: 999px;
    background: var(--accent-bright);
    color: var(--intro-on-green);
    font-size: 15px;
    line-height: 22px;
  }

  @supports (corner-shape: superellipse(1.5)) {
    .intro .field,
    .intro .continue-btn,
    .intro .google-btn,
    .intro .school-list,
    .sheet.age-gate { corner-shape: superellipse(1.5); }
  }
}

@keyframes age-gate-in  { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes age-gate-out { to { opacity: 0; transform: translate3d(0, 18px, 0); } }

.home-topbar { position: relative; gap: 0; padding: calc(var(--status-gap) + 8px) 20px 10px; }
.home-mark { margin: 0 auto; color: var(--text-1); }
.home-topbar-end { position: absolute; right: 14px; bottom: 4px; }
.home-list { padding: 0 20px; display: flex; flex-direction: column; gap: 15px; }
.home-greeting { padding: 14px 0 6px; }
.home-trending-title { padding-top: 24px; }

.home-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-xl);
  padding: 22px;
  corner-shape: superellipse(1.5);
}
.home-card-body { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.home-card-notice { padding: 8px 0; }
.more-link { padding: 4px; white-space: nowrap; }

.period-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.period-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: var(--inset);
  border-radius: var(--r-inset);
  padding: 10px 12px;
  min-height: 37px;
  corner-shape: superellipse(1.5);
}
.period-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: calc(5px * var(--r-k));
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-weight: 700;
  corner-shape: superellipse(1.5);
}

.dish-flow { display: flex; flex-wrap: wrap; gap: 10px; }
.dish-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--inset);
  border: none;
  border-radius: var(--r-chip);
  padding: 6px 12px;
  min-height: 32px;
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  corner-shape: superellipse(1.5);
}
.dish-chip.highlighted { background: var(--chip-bg); color: var(--chip-fg); }
.dish-chip.highlighted .c-3 { color: inherit; opacity: 0.75; }
.dish-star { line-height: 1; }
.highlight-hint { margin-top: 2px; padding: 0 2px; }
.kcal-chip {
  display: inline-flex;
  align-items: center;
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-radius: var(--r-chip);
  padding: 6px 12px;
  min-height: 32px;
  corner-shape: superellipse(1.5);
}

.event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--inset);
  border-radius: calc(12px * var(--r-k));
  padding: 5px;
  corner-shape: superellipse(1.5);
}
.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-radius: var(--r-inset);
  corner-shape: superellipse(1.5);
}

.home-skeleton { padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }

.home-col { display: contents; }
.home-col-feed { display: flex; flex-direction: column; gap: 10px; }

.community-header {
  position: sticky;
  top: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--status-gap) + 10px) 20px 12px;
  background: var(--bg);
  transition: transform var(--dur-fast) var(--spring-soft);
}
.community-header.tucked { transform: translateY(-100%); }
.has-top-fade.no-fade::before { opacity: 0; }
.community-chip-row { position: relative; flex: none; }
.community-scope-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(340px, calc(100vw - 40px));
  z-index: 3;
}
.community-scope-drop,
.home-scope-drop {
  transform-origin: top right;
  animation: scope-drop-in var(--dur-fast) var(--spring) both;
}
@keyframes scope-drop-in {
  from { opacity: 0; transform: translateY(-14px) scale(.78); }
  to   { opacity: 1; transform: none; }
}

.new-posts-pill[hidden] { display: none; }
.new-posts-pill {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 12px);
  z-index: 9;
  transform: translateX(-50%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  animation: new-posts-in var(--dur-fast) var(--spring-soft) both;
}
.new-posts-pill.leaving { animation: new-posts-out var(--dur-fast) var(--spring-soft) both; }
@keyframes new-posts-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes new-posts-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-14px); }
}

.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--glass-line);
  border-radius: calc(12px * var(--r-k));
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 9px 10px 9px 14px;
  color: var(--text-1);
  corner-shape: superellipse(1.5);
}

.feed-scroll { padding: 0; }
.feed-list {
  padding: 0 16px calc(var(--bottom-spacer) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.relay-list { padding-top: 8px; }
.feed-more { display: grid; place-items: center; padding: 16px 0; }
.feed-skeleton {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scope-panel {
  position: relative;
  width: 100%;
  height: 190px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  background: var(--glass);
  background: color-mix(in srgb, var(--card) 42%, transparent);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  overflow: hidden;
  corner-shape: superellipse(1.5);
}
.no-effects .scope-chip,
.no-effects .scope-panel {
  background: var(--card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .scope-chip, .scope-panel { background: var(--card); }
}
.scope-rings {
  position: absolute;
  left: -42px;
  top: 50%;
  margin-top: -65px;
  width: 150px; height: 150px;
  display: grid;
  place-items: center;
}
.scope-rings .ring {
  position: absolute;
  border-radius: 50%;
  transition: opacity 260ms ease;
}
.scope-rings .outer { width: 150px; height: 150px; background: var(--ring-outer); }
.scope-rings .mid { width: 110px; height: 110px; background: var(--ring-mid); }
.scope-rings .core { width: 72px; height: 72px; background: var(--ring-core); }
.scope-rings .ring-icon { position: relative; color: #fff; }

.scope-panel-title { position: absolute; left: 16px; top: 14px; }
.scope-panel-right {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 62%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
}
.grade-wrap { position: relative; }
.grade-dropdown { display: flex; align-items: center; gap: 2px; padding: 4px; color: var(--text-1); }
.grade-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-width: 120px;
  background: var(--card);
  border-radius: calc(12px * var(--r-k));
  padding: 6px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  corner-shape: superellipse(1.5);
}
.grade-option { display: block; width: 100%; padding: 10px 16px; text-align: left; color: var(--text-1); }

:root { --scope-track-h: 26px; --scope-thumb: 22px; }

.scope-slider-wrap {
  position: relative;
  width: 100%;
  height: var(--scope-track-h);
  margin-top: 18px;
  touch-action: none;
  cursor: pointer;
  --at: calc(var(--scope-thumb) / 2 + (100% - var(--scope-thumb)) * var(--fill-n, 0));
}
.scope-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--text-3);
  overflow: hidden;
}
.scope-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--at);
  background: var(--ring-core);
  transition: width var(--dur-fast) var(--spring);
}
.scope-thumb {
  position: absolute;
  top: 50%;
  left: var(--at);
  z-index: 1;
  width: var(--scope-thumb);
  height: var(--scope-thumb);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  transition: left var(--dur-fast) var(--spring), scale var(--dur-press) var(--spring-soft);
}
.scope-slider-wrap.dragging .scope-fill,
.scope-slider-wrap.dragging .scope-thumb { transition: none; }
.scope-slider-wrap.dragging .scope-thumb { scale: 1.18; }
.scope-slider {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}

.scope-ticks {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--scope-thumb) / 2);
  pointer-events: none;
}
.scope-ticks .tick { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.scope-ticks .tick:first-child, .scope-ticks .tick:last-child { opacity: 0; }

.compose-fab {
  position: absolute;
  right: 20px;
  bottom: calc(var(--bottom-spacer) + var(--safe-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text-1);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  transition: transform 140ms var(--spring-soft), opacity 140ms linear;
}
.compose-fab:active:not(:disabled) { transform: scale(.95); }
.compose-fab:disabled { opacity: .5; }

.explore-head { padding: 8px 20px 0; flex: none; }
.explore-head h1 { padding-bottom: 14px; }
.explore-hint { padding: 6px 0 0 4px; }
.explore-body { padding: 14px 20px calc(var(--bottom-spacer) + var(--safe-bottom)); }
.explore-searching { display: grid; place-items: center; padding: 24px 0; }
.explore-section { padding: 12px 0 6px; }
.explore-empty { padding: 24px 0; text-align: center; }
.explore-recent-head { padding: 20px 0 6px; }

.relay-entry {
  display: block;
  width: 100%;
  background:
    radial-gradient(circle 220px at 100% 0%, var(--accent-fill), transparent),
    var(--card);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
  color: var(--text-1);
  transition: transform 140ms var(--spring-soft);
  corner-shape: superellipse(1.5);
}
.relay-entry:active { transform: scale(.985); }

.relay-entry-top { display: flex; align-items: flex-start; gap: 12px; }
.relay-entry-count { flex: none; }
.relay-entry-school { display: block; margin-top: 10px; }
.relay-entry-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

.relay-entry-faces { display: flex; }
.relay-entry-faces .avatar { box-shadow: 0 0 0 2px var(--card); }
.relay-entry-faces .avatar + .avatar { margin-left: -6px; }

.relay-entry-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding: 13px 0;
  background: var(--neutral);
  border-radius: 999px;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  cursor: pointer;
}

.search-post {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  background: var(--card);
  border-radius: calc(14px * var(--r-k));
  padding: 12px 14px;
  margin-bottom: 8px;
  text-align: left;
  corner-shape: superellipse(1.5);
}
.search-post-meta { margin-top: 4px; }

.relay-head { display: flex; align-items: center; gap: 8px; padding: 8px 16px 12px; }

.post-detail > .topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 8;
  justify-content: space-between;
  padding: var(--status-gap) 14px 8px;
  background: transparent;
  pointer-events: none;
}
.post-detail > .topbar .title { display: none; }
.post-detail > .topbar > .slot {
  width: auto;
  height: 44px;
  padding: 0 3px;
  gap: 2px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
}
.post-detail > .topbar > .slot:first-child {
  width: 44px;
  padding: 0;
  border-radius: 50%;
}
.post-detail > .topbar > .slot:empty { display: none; }
.post-detail > .topbar .icon-btn { padding: 9px; }
.no-effects .post-detail > .topbar > .slot {
  background: var(--card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .post-detail > .topbar > .slot { background: var(--card); }
}
.post-detail .scroll { padding-top: calc(var(--status-gap) + 52px); }

.post-detail-body { padding: 0 0 24px; }
.detail-banner { padding: 8px 16px 0; }
.post-detail { padding: 12px 16px 0; }
.post-detail-title { margin-top: 12px; }
.post-detail-text { margin-top: 6px; }
.post-detail .post-foot { margin-top: 16px; padding-bottom: 14px; }

.comment-section { border-top: 1px solid var(--divider); padding: 14px 16px 0; }
.comment-heading { padding-bottom: 10px; }
.comment-empty { padding: 24px 0; text-align: center; }

.comment { display: flex; gap: 10px; padding: 10px 0; }
.comment.reply { padding-left: 34px; }
.comment-group { display: flex; flex-direction: column; }
.reply-list { display: flex; flex-direction: column; }
.comment-text { margin-top: 4px; }
.comment-actions { margin-top: 6px; }
.comment-more { padding: 2px; color: var(--text-3); }

.mention { color: var(--accent); font-weight: 500; }

.comment-composer {
  flex: none;
  position: relative;
  border-top: 1px solid var(--divider);
  background: var(--bg);
  padding: 10px 16px calc(10px + var(--safe-bottom));
}
.comment-composer .field { align-items: flex-end; }
.comment-composer textarea { max-height: 132px; line-height: 20px; }
.send-btn { color: var(--accent); }
.send-btn:disabled { color: var(--text-3); }

.reply-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
}

.mention-list {
  position: absolute;
  left: 16px; right: 16px;
  bottom: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--sheet);
  border-radius: calc(14px * var(--r-k));
  padding: 6px;
  margin-bottom: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  corner-shape: superellipse(1.5);
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: calc(10px * var(--r-k));
  text-align: left;
  corner-shape: superellipse(1.5);
}
.mention-item:hover { background: var(--card); }

.lightbox {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  animation: fade-in 180ms linear both;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(8px * var(--r-k)); corner-shape: superellipse(1.5); }
.lightbox-close { position: absolute; top: max(16px, var(--safe-top)); right: 16px; color: #fff; padding: 8px; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  padding: 12px;
}
.lightbox-nav.prev { left: 6px; }
.lightbox-nav.next { right: 6px; }
@media (min-width: 1024px) {
  .lightbox { padding: 56px 72px; }
  .lightbox img { max-width: min(100%, 1100px); }
  .lightbox-nav.prev { left: 18px; }
  .lightbox-nav.next { right: 18px; }
}

.compose-inner { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.board-row { display: flex; gap: 8px; flex-wrap: wrap; }
.board-chip {
  padding: 9px 14px;
  border-radius: calc(10px * var(--r-k));
  background: var(--card);
  color: var(--text-1);
  font-size: var(--t-title-sm-size);
  font-weight: 700;
  transition: transform var(--dur-press) var(--spring-soft);
  corner-shape: superellipse(1.5);
}
.board-chip:active { transform: scale(.96); }
.board-chip.selected { background: var(--chip-bg); color: var(--chip-fg); }

.compose-dest { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dest-chip { background: var(--card); border-radius: calc(10px * var(--r-k)); padding: 8px 12px; corner-shape: superellipse(1.5); }
.dest-note { align-self: stretch; }
.compose-dest .scope-panel { align-self: stretch; }

.compose-identity { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.compose-anon-notice {
  background: var(--card);
  border-radius: calc(12px * var(--r-k));
  padding: 12px;
  corner-shape: superellipse(1.5);
}
.compose-error { padding: 0 4px; }

.compose-title,
.compose-body {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-1);
  resize: none;
}
.compose-title {
  font-size: var(--t-title-lg-size);
  line-height: var(--t-title-lg-lh);
  font-weight: 700;
  padding: 10px 0 6px;
}
.compose-body {
  font-size: var(--t-body-lg-size);
  line-height: 22px;
  min-height: 160px;
}
@media (min-width: 1024px) {
  .compose-body { min-height: 300px; }
}
.compose-title::placeholder, .compose-body::placeholder { color: var(--text-3); }

.compose-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb {
  position: relative;
  width: 88px; height: 88px;
  border-radius: calc(12px * var(--r-k));
  overflow: hidden;
  background: var(--skeleton);
  corner-shape: superellipse(1.5);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-remove {
  position: absolute;
  top: 4px; right: 4px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
}
.thumb-error {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3px 6px;
  background: rgba(0,0,0,.7);
  color: var(--danger);
  text-align: center;
}

.compose-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--divider);
  padding: 10px 16px calc(10px + var(--safe-bottom));
}

.compose-poll-toggle {
  padding: 5px 10px;
  border-radius: calc(9px * var(--r-k));
  color: var(--text-2);
  font-size: var(--t-label-md-size);
  corner-shape: superellipse(1.5);
}
.compose-poll-toggle.on { background: var(--chip-bg); color: var(--chip-fg); font-weight: 700; }

.poll-editor {
  margin-top: 16px;
  padding: 14px;
  border-radius: calc(14px * var(--r-k));
  background: var(--card);
  corner-shape: superellipse(1.5);
}
.poll-editor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.poll-editor-head .grow { flex: 1; }

.poll-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: calc(10px * var(--r-k));
  background: var(--bg);
  corner-shape: superellipse(1.5);
}
.poll-editor-head + .poll-cell { margin-top: 0; }
.poll-cell-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font-size: var(--t-body-md-size);
}
.poll-cell-input::placeholder { color: var(--text-3); }
.poll-cell-x { flex: none; padding: 2px; color: var(--text-3); }

.poll-add {
  margin-top: 10px;
  padding: 4px 0;
  color: var(--accent);
  font-size: var(--t-label-md-size);
  font-weight: 700;
}
.poll-add.disabled { color: var(--divider); cursor: default; }

.poll-problem { margin-top: 8px; }
.poll-note { margin-top: 6px; }

.profile-body { padding-bottom: 24px; }
.profile-header { display: flex; flex-direction: column; }
.profile-cover { height: 96px; }
.profile-overlap { margin-top: -30px; }
.profile-top { padding: 0 16px; align-items: flex-end; }
.profile-actions { display: flex; gap: 8px; padding-bottom: 6px; }
.profile-meta { padding: 10px 16px; }
.profile-bio { margin-top: 10px; }
.profile-school { margin-top: 8px; }
.profile-stats { margin-top: 14px; gap: 18px; }
.profile-notice { padding: 32px 16px; text-align: center; white-space: pre-line; }
.profile-posts { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 0; }

.qna-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  color: var(--text-3);
  border-bottom: 1px solid var(--divider);
  text-align: left;
}

.qna-body, .messages-body { padding-bottom: 24px; }
.qna-profile { padding: 8px 16px; }
.qna-stats { padding: 12px 16px; gap: 20px; }
.qna-notice { padding: 24px 16px; text-align: center; }
.qna-list, .message-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 0; }

.qna-card, .message-card {
  background: var(--card);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  corner-shape: superellipse(1.5);
}
.qna-question { color: var(--text-2); }
.qna-answer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  border-radius: calc(12px * var(--r-k));
  padding: 12px;
  corner-shape: superellipse(1.5);
}
.qna-time { align-self: flex-end; }
.message-actions { margin-top: 4px; }

.inbox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}

.tab-row {
  display: flex;
  gap: 8px;
  padding: 8px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: none;
}
.tab-row::-webkit-scrollbar { display: none; }
.tab-chip {
  flex: none;
  padding: 8px 14px;
  border-radius: calc(10px * var(--r-k));
  background: var(--card);
  color: var(--text-3);
  font-size: var(--t-title-sm-size);
  font-weight: 700;
  corner-shape: superellipse(1.5);
}
.tab-chip.selected { background: var(--chip-bg); color: var(--chip-fg); }

.notification-list { padding: 4px 0 calc(24px + var(--safe-bottom)); }
.notification-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
}
.notification-row.unread { background: color-mix(in srgb, var(--accent-fill) 7%, transparent); }
.notification-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-fg);
}
.notification-icon.danger {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}
.notification-icon.support {
  background: color-mix(in srgb, var(--accent-fill) 16%, transparent);
  color: var(--accent);
}
.unread-dot {
  flex: none;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.swipe-wrap {
  position: relative;
  overflow: hidden;
  --swipe: 0;
  max-height: 400px;
}
.swipe-wrap > .swipe-under {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 22px;
  background: color-mix(in srgb, var(--danger) calc(10% + 22% * var(--swipe)), transparent);
  color: var(--danger);
}
.swipe-wrap > .swipe-under > span { opacity: var(--swipe); }
.swipe-wrap > .notification-row {
  position: relative;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
  background-color: var(--bg);
  touch-action: pan-y;
}
.swipe-wrap > .notification-row.unread {
  background-color: color-mix(in srgb, var(--accent-fill) 7%, var(--bg));
}
.swipe-wrap.swiped-out {
  max-height: 0;
  opacity: 0;
  transition: max-height .18s ease, opacity .14s ease;
}
.swipe-wrap.swiped-out > .notification-row { transform: translateX(-100%); }

.support-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: calc(14px * var(--r-k));
  background: color-mix(in srgb, var(--accent-fill) 10%, transparent);
  corner-shape: superellipse(1.5);
}
.support-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.support-chip {
  padding: 8px 12px;
  border-radius: calc(10px * var(--r-k));
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  corner-shape: superellipse(1.5);
}

.review-vote {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: calc(14px * var(--r-k));
  background: var(--card);
  transition: opacity .16s ease, max-height .2s ease;
  max-height: 320px;
  corner-shape: superellipse(1.5);
}
.review-vote.answered { align-items: flex-start; }
.review-vote.gone { opacity: 0; max-height: 0; padding-block: 0; margin-top: 0; }
.review-vote-actions { display: flex; gap: 8px; margin-top: 8px; }
.review-vote-btn {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: calc(10px * var(--r-k));
  background: var(--chip-bg);
  color: var(--chip-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  corner-shape: superellipse(1.5);
}

.school-body { padding: 8px 16px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; }

.date-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.date-strip::-webkit-scrollbar { display: none; }
.date-pill {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
  padding: 9px 10px;
  border-radius: calc(12px * var(--r-k));
  background: var(--card);
  color: var(--text-3);
  corner-shape: superellipse(1.5);
}
.date-pill.selected { background: var(--chip-bg); color: var(--chip-fg); }

.meal-card {
  background: var(--card);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  corner-shape: superellipse(1.5);
}
.allergy-legend { padding-top: 4px; border-top: 1px solid var(--divider); }
.schedule-month { padding: 8px 2px 0; }

.calendar-head { align-items: center; padding: 2px 0 8px; }
.calendar-month { text-align: center; }
.calendar-arrow.off { color: var(--divider); pointer-events: none; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-weekday { text-align: center; color: var(--text-3); padding-bottom: 4px; }
.calendar-weekday.sunday { color: var(--danger); }

.calendar-day {
  height: 86px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 2px;
  border-radius: calc(10px * var(--r-k));
  text-align: center;
  background: transparent;
  transition: background 140ms linear;
  corner-shape: superellipse(1.5);
}
.calendar-day.selected { background: var(--card); }
.calendar-daynum {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  color: var(--text-1);
  flex: none;
}
.calendar-daynum.sunday { color: var(--danger); }
.calendar-daynum.today { background: var(--accent-fill); color: var(--on-accent); }

.calendar-chip {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
}
.calendar-chip-bar {
  flex: none;
  width: 2px;
  height: 11px;
  margin-top: 1px;
  border-radius: 1px;
  background: var(--accent);
}
.calendar-chip.mine .calendar-chip-bar { background: var(--warning); }
.calendar-chip-title {
  flex: 1;
  min-width: 0;
  font-size: 9px;
  line-height: 11px;
  color: var(--text-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.calendar-more { font-size: 9px; color: var(--text-3); }

.calendar-note { padding: 6px 2px; }
.calendar-selected { padding: 14px 2px 4px; }
.calendar-empty { padding: 26px 0; text-align: center; }

.calendar-event {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: calc(14px * var(--r-k));
  background: var(--card);
  text-align: left;
  transition: transform var(--dur-press) var(--spring-soft);
  corner-shape: superellipse(1.5);
}
.calendar-event:active { transform: scale(.99); }
.calendar-event-bar {
  flex: none;
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: var(--accent);
}
.calendar-event.mine .calendar-event-bar,
.calendar-event-bar.mine { background: var(--warning); }
.calendar-detail-head { align-items: center; }
.calendar-detail-head .calendar-event-bar { height: 22px; width: 4px; }

.calendar-add-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  place-items: center;
  margin-top: 10px;
  padding: 12px 0 calc(12px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--divider);
}

.calendar-time-row { align-items: center; margin-top: 14px; }
.calendar-time { margin-top: 10px; }
.calendar-time input {
  width: 100%;
  padding: 14px 16px;
  border-radius: calc(14px * var(--r-k));
  border: 0;
  background: var(--sheet);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 500;
  corner-shape: superellipse(1.5);
}

.timetable-card {
  background: var(--card);
  border-radius: calc(18px * var(--r-k));
  padding: 14px 12px;
  corner-shape: superellipse(1.5);
}
.timetable-title { padding: 0 4px 10px; }

.timetable-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.timetable-grid {
  display: grid;
  grid-template-columns: 22px repeat(5, minmax(58px, 1fr));
  gap: 4px;
  align-items: stretch;
}
.timetable-corner { display: block; }
.timetable-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 0 6px;
  color: var(--text-2);
}
.timetable-day-head.today { color: var(--accent); }
.timetable-period { display: grid; place-items: center; }

.timetable-cell {
  min-height: 52px;
  padding: 4px 3px;
  border-radius: calc(9px * var(--r-k));
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  color: var(--text-1);
  text-align: center;
  display: grid;
  place-items: center;
  transition: transform var(--dur-press) var(--spring-soft);
  corner-shape: superellipse(1.5);
}
.timetable-cell.filled { background: var(--inset); }
.timetable-cell.today { background: var(--chip-bg); color: var(--chip-fg); }
.timetable-cell:active { transform: scale(.94); }
.timetable-cell.edited { position: relative; }
.timetable-cell.edited::after {
  content: '';
  position: absolute;
  top: 5px; right: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.timetable-cell.today.edited::after { background: var(--chip-fg); }

.timetable-add { display: block; width: 100%; padding: 10px 0 2px; }
.timetable-note { padding: 12px 4px 0; }
.timetable-edits { padding: 8px 4px 0; align-items: center; }

.subject-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.subject-chip {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--neutral);
  color: var(--text-1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subject-chip:active { transform: scale(.96); }

.settings-body {
  padding: 6px 18px calc(24px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-section { display: flex; flex-direction: column; gap: 8px; }
.section-title { padding-left: 4px; }
.settings-card {
  background: var(--card);
  border-radius: calc(16px * var(--r-k));
  overflow: hidden;
  corner-shape: superellipse(1.5);
}
.settings-card > :not(.settings-row):not(:has(.settings-row)) {
  margin: 12px 16px;
  width: auto;
}
.settings-card > :has(.settings-row) > :not(.settings-row) {
  margin: 0 16px 12px;
  width: auto;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  color: var(--text-1);
  border-top: 1px solid var(--divider);
}
.settings-card > .settings-row:first-child,
.settings-section > .settings-row:first-child { border-top: 0; }
.settings-row .icon { color: var(--text-3); }
.settings-row.danger { color: var(--danger); }
button.settings-row { transition: background 120ms linear; }
button.settings-row:active { background: var(--inset); }
.settings-version { text-align: center; padding: 12px 0; }

.field.on-bg { background: var(--inset); }

.profile-settings-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px 4px;
}
.avatar-section { display: flex; flex-direction: column; gap: 10px; }
.choice-label { padding-top: 8px; }
.preset-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.preset-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
  border: 3px solid transparent;
  transition: transform var(--dur-press) var(--spring-soft);
}
.preset-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preset-cell.selected { border-color: var(--accent); transform: scale(1.06); }
.preset-cell:disabled { opacity: 0.5; }

.hidden-user { padding: 10px 0; border-top: 1px solid var(--divider); }
.hidden-user:first-child { border-top: 0; }

.reason-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.reason-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  border-radius: calc(12px * var(--r-k));
  background: var(--card);
  color: var(--text-1);
  text-align: left;
  corner-shape: superellipse(1.5);
}
.reason-row.selected { background: var(--chip-bg); color: var(--chip-fg); }

.mydata-note { padding: 0 18px 8px; }
.mydata-tabs { padding: 0 16px 8px; }
.mydata-body { padding: 4px 16px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; }
.mydata-card {
  background: var(--card);
  border-radius: calc(14px * var(--r-k));
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  corner-shape: superellipse(1.5);
}
.kv { align-items: baseline; }
.kv .t-label-md { min-width: 42px; }
.status-chip {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--t-label-sm-size);
  font-weight: 700;
}
.status-chip.accent { background: var(--chip-bg); color: var(--chip-fg); }
.status-chip.warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.status-chip.muted { background: var(--inset); color: var(--text-3); }
.blind-note {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-radius: calc(10px * var(--r-k));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  corner-shape: superellipse(1.5);
}

@media (min-width: 601px) {
  .feed-list, .feed-skeleton,
  .profile-posts,
  .qna-list, .message-list,
  .mydata-body,
  .school-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-col), 1fr));
    align-items: start;
  }

  .feed-list > .feed-more,
  .feed-list > .empty-state, .feed-list > .error-state,
  .feed-list > .banner,
  .profile-posts > .empty-state,
  .qna-list > .empty-state, .qna-list > .inbox-empty,
  .message-list > .empty-state, .message-list > .inbox-empty,
  .school-body > .date-strip,
  .school-body > .settings-row,
  .school-body > .stale-notice,
  .school-body > .schedule-month,
  .school-body > .empty-state,
  .school-body > .error-state,
  .school-body > .center-loading {
    grid-column: 1 / -1;
  }

  .home-list, .home-skeleton {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }
  .home-list > .home-greeting,
  .home-list > .banner,
  .home-skeleton > .home-greeting-skeleton { grid-column: 1 / -1; }
  .home-col { display: flex; flex-direction: column; gap: 14px; }
  .home-col-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-col), 1fr));
    align-items: start;
    gap: 10px;
  }
  .home-col-feed > .home-trending-title,
  .home-col-feed > .home-empty { grid-column: 1 / -1; }

  @media (max-width: 780px) {
    .home-list, .home-skeleton { grid-template-columns: minmax(0, 1fr); }
  }

  .post-detail-body,
  .compose-inner,
  .notification-list,
  .settings-body,
  .explore-head, .explore-body,
  .post-detail > .topbar,
  .compose > .topbar,
  .settings > .topbar,
  .notifications > .topbar {
    max-width: var(--read-max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .comment-composer, .compose-toolbar {
    padding-left: max(16px, calc((100% - var(--read-max-width)) / 2));
    padding-right: max(16px, calc((100% - var(--read-max-width)) / 2));
  }
  .mention-list {
    left: max(16px, calc((100% - var(--read-max-width)) / 2));
    right: max(16px, calc((100% - var(--read-max-width)) / 2));
  }

  .profile-meta { max-width: var(--read-max-width); }
}

@media (min-width: 1024px) {
  .feed-list, .feed-skeleton { padding-left: 20px; padding-right: 20px; }
  .home-list, .home-skeleton { padding-left: 24px; padding-right: 24px; }
  .school-body { padding-left: 20px; padding-right: 20px; }
  .community-header { padding-left: 20px; padding-right: 20px; }
}

@media (min-width: 1024px) {
  .home-panes-row {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 62px;
    padding-left: 32px;
    padding-right: 32px;
    max-width: 1180px;
  }

  .home-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  .home-pane-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 24px 42px 13px;
  }
  .home-pane-head > h1,
  .pane-screen > .pane-head > h1 {
    font-size: var(--pane-title-size);
    line-height: var(--pane-title-lh);
  }
  .home-pane-head > h1 {
    flex: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-pane-body, .pane-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    border-radius: var(--pane-radius) var(--pane-radius) 0 0;
    overflow: hidden;
    corner-shape: superellipse(1.5);
}
  .home-pane-body::after, .pane-body::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--pane-line);
    border-bottom: 0;
    border-radius: var(--pane-radius) var(--pane-radius) 0 0;
    pointer-events: none;
    corner-shape: superellipse(1.5);
}

  .home-school-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .home-school-scroll, .home-pane-feed .scroll { scrollbar-width: none; }
  .home-school-scroll::-webkit-scrollbar,
  .home-pane-feed .scroll::-webkit-scrollbar { width: 0; height: 0; }
  .home-school-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 32px calc(var(--bottom-spacer) + var(--safe-bottom));
  }
  .home-panes .home-greeting { padding: 0 0 4px; }
  .home-panes .home-card { border: 1px solid var(--card-line); }
  .home-school-panel .relay-entry { margin-bottom: 0; }

  .home-panes .home-greeting > .t-title-md {
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
  }
  .home-panes .home-greeting > .t-display {
    font-size: var(--pane-title-size);
    line-height: var(--pane-title-lh);
  }

  .home-panes .period-chip,
  .home-panes .dish-chip:not(.highlighted),
  .home-panes .event-row { background: var(--pane-inset); }
  .home-panes .period-chip { padding: 9px 12px; }
  .home-panes .event-row { padding: 8px; }
  .home-panes .event-date { padding: 7px 14px; }
  .home-pane-chip .scope-chip .t-title-sm { font-size: 16px; line-height: 22px; }

  .home-pane-chip { position: relative; flex: 0 1 auto; min-width: 0; margin-left: auto; }
  .home-pane-chip .scope-chip { min-width: 0; max-width: 100%; }
  .home-scope-drop {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 40;
    width: min(340px, 62vw);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
    border-radius: calc(20px * var(--r-k));
    corner-shape: superellipse(1.5);
}

  .pane-feed .feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 calc(var(--bottom-spacer) + var(--safe-bottom));
  }
  .pane-feed .post-card {
    background: none;
    border-radius: 0;
    padding: 22px 28px;
  }
  .pane-feed .post-card:active { transform: none; }
  .pane-feed .post-title {
    font-size: var(--pane-section-size);
    line-height: var(--pane-section-lh);
  }
  .pane-feed .post-body {
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
  }
  .pane-feed .post-head .t-label-lg { font-size: 15px; line-height: 20px; }
  .pane-feed .post-head .t-label-md,
  .pane-feed .post-foot .t-label-md {
    font-size: var(--pane-meta-size);
    line-height: var(--pane-meta-lh);
  }
  .pane-feed .feed-list > * {
    padding-left: 28px;
    padding-right: 28px;
  }
  .pane-feed .feed-list > * + * { border-top: 1px solid var(--pane-line); }

  .pane-feed .post-head { gap: 12px; }

  .pane-feed .follow-chip {
    gap: 5px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--text-1);
    background: var(--text-1);
    color: var(--bg);
    font-size: var(--t-label-md-size);
    font-weight: 600;
  }
  .pane-feed .follow-chip.following {
    border-color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .35);
    color: var(--text-1);
  }
  .pane-feed .post-head .chip {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .5);
    background: transparent;
    color: var(--text-1);
  }
  :root[data-theme='light'] .pane-feed .follow-chip.following,
  :root[data-theme='light'] .pane-feed .post-head .chip {
    border-color: rgba(0, 0, 0, .45);
    background: transparent;
    color: var(--text-1);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .pane-feed .follow-chip.following,
    :root:not([data-theme]) .pane-feed .post-head .chip {
      border-color: rgba(0, 0, 0, .45);
      background: transparent;
      color: var(--text-1);
    }
  }

  .pane-feed .post-foot { color: var(--text-2); }
  .pane-feed .post-foot .stat { color: var(--text-1); }
  .pane-feed .post-foot .stat.liked { color: var(--accent-2); }

  .pane-feed .feed-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 28px;
  }
}

@media (min-width: 1024px) {
  .pane-screen {
    padding-left: 150px;
    padding-right: 150px;
  }
  .pane-screen > .pane-head,
  .pane-screen > .pane-body {
    width: 100%;
    max-width: 766px;
    margin-left: auto;
    margin-right: auto;
  }

  .pane-screen > .pane-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 24px 42px 13px;
  }
  .pane-screen > .pane-head > h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pane-body { flex-direction: column; }
  .pane-scroll { position: relative; flex: 1; min-height: 0; display: flex; }
  .pane-body .scroll { scrollbar-width: none; }
  .pane-body .scroll::-webkit-scrollbar { width: 0; height: 0; }
}

@media (min-width: 1024px) {
  .explore.pane-screen .explore-search {
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 38px 35px 0;
    background: var(--bg);
  }
  .explore.pane-screen .explore-search .field {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-1) 15%, var(--bg));
  }
  .explore.pane-screen .explore-search .field input {
    font-size: 16px;
    font-weight: 400;
  }
  .explore-go {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--text-1);
    color: var(--bg);
    transition: transform 140ms var(--spring-soft);
  }
  .explore-go .t-label-lg { font-size: 16px; line-height: 22px; }
  .explore-go:active { transform: scale(.96); }

  .explore.pane-screen .explore-body {
    display: flex;
    flex-direction: column;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 38px 35px calc(var(--bottom-spacer) + var(--safe-bottom));
  }
  .explore.pane-screen .relay-entry { margin-bottom: 0; }

  .explore.pane-screen .explore-recent-head,
  .explore.pane-screen .explore-section {
    padding: 48px 0 0;
  }
  .explore.pane-screen .explore-recent-head > h2,
  .explore.pane-screen .explore-section {
    font-size: var(--pane-section-size);
    line-height: var(--pane-section-lh);
  }
  .explore.pane-screen .explore-clear {
    flex: none;
    color: var(--accent);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
  }

  .explore-faces {
    display: flex;
    flex-wrap: wrap;
    padding: 36px 5px 0;
  }
  .explore-face {
    flex: none;
    width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
    text-align: center;
    transition: transform 140ms var(--spring-soft);
  }
  .explore-face:active { transform: scale(.95); }
  .explore-face > span { max-width: 100%; }
  .explore-face-name { font-size: 15px; line-height: 20px; font-weight: 700; }
  .explore-face-handle { font-size: 12.5px; line-height: 17px; font-weight: 400; }

  .explore.pane-screen .explore-posts { margin-top: 45px; }
  .explore.pane-screen .search-post {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 24px 26px;
    text-align: left;
    border-bottom: 1px solid var(--pane-line);
    transition: transform 140ms var(--spring-soft);
  }
  .explore.pane-screen .search-post + .search-post { margin-top: 28px; }
  .explore.pane-screen .search-post:active { transform: scale(.99); }
  .search-post-head { display: flex; align-items: center; gap: 8px; }
  .search-post-name { font-size: 15px; line-height: 20px; font-weight: 700; }
  .search-post-handle { font-size: 12.5px; line-height: 17px; font-weight: 400; }
  .search-post-main { display: flex; align-items: flex-start; gap: 16px; }
  .search-post-main > .col { padding-left: 10px; gap: 2px; }
  .search-post-title {
    font-size: var(--pane-section-size);
    line-height: var(--pane-section-lh);
    font-weight: 700;
  }
  .search-post-text {
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
  }
  .search-post-thumbs {
    flex: none;
    display: grid;
    gap: 4px;
    width: 101px;
    height: 77px;
    grid-template-columns: 1fr;
  }
  .search-post-thumbs.n2, .search-post-thumbs.n3, .search-post-thumbs.n4 {
    grid-template-columns: 1fr 1fr;
  }
  .search-post-thumbs.n3 > img:first-child { grid-row: span 2; }
  .search-post-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(8px * var(--r-k));
    background: var(--neutral);
    corner-shape: superellipse(1.5);
}

  .explore.pane-screen .explore-empty { padding: 40px 0; text-align: center; }
  .explore.pane-screen .explore-empty > * + * { margin-top: 6px; }
  .explore.pane-screen .explore-searching { padding: 32px 0; }
}

@media (min-width: 1024px) {
  .notifications.pane-screen .notification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 38px 35px calc(var(--bottom-spacer) + var(--safe-bottom));
  }
  .notifications.pane-screen .notification-row {
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 0;
    border-radius: calc(20px * var(--r-k));
    background: var(--card);
    corner-shape: superellipse(1.5);
}
  .notifications.pane-screen .notification-row.unread {
    background: color-mix(in srgb, var(--accent-fill) 7%, var(--card));
  }
  .notifications.pane-screen .notification-row > .col { gap: 2px; }
  .notifications.pane-screen .notification-title {
    font-size: var(--pane-section-size);
    line-height: var(--pane-section-lh);
  }
  .notifications.pane-screen .notification-preview {
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
  }
  .notifications.pane-screen .notification-time {
    font-size: var(--pane-meta-size);
    line-height: var(--pane-meta-lh);
  }
  .notifications.pane-screen .notification-preview { color: var(--text-1); }

  .notifications.pane-screen .notification-icon { width: 44px; height: 44px; }
  .notification-glyph { font-size: 21px; line-height: 1; font-weight: 700; }
  .notifications.pane-screen .notification-icon {
    background: color-mix(in srgb, var(--accent-fill) 42%, var(--card));
    color: var(--text-1);
  }
  .notifications.pane-screen .notification-icon.danger {
    background: color-mix(in srgb, var(--danger-fill) 35%, var(--card));
    color: var(--danger);
  }
  .notifications.pane-screen .notification-icon.support {
    background: color-mix(in srgb, var(--accent-fill) 42%, var(--card));
    color: var(--text-1);
  }
  .notifications.pane-screen .notification-row.danger {
    background:
      radial-gradient(circle 340px at 100% 0%, var(--danger-fill), transparent),
      var(--card);
  }

  .notifications.pane-screen .swipe-wrap { border-radius: calc(20px * var(--r-k)); corner-shape: superellipse(1.5); }
  .notifications.pane-screen .swipe-wrap > .swipe-under {
    padding-right: 28px;
    background: color-mix(in srgb, var(--danger) calc(30% + 52% * var(--swipe)), var(--card));
    color: var(--text-1);
  }
  .notifications.pane-screen .swipe-wrap > .swipe-under > span {
    font-size: var(--pane-section-size);
    line-height: var(--pane-section-lh);
  }
}

@media (min-width: 1024px) {
  .profile.pane-screen .profile-body { padding-bottom: 0; }

  .profile-pane-header { display: flex; flex-direction: column; }
  .profile-pane-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 38px 37px 0;
  }
  .profile-pane-row > .avatar { flex: none; }

  .profile-pane-name {
    font-size: var(--pane-title-size);
    line-height: var(--pane-title-lh);
    font-weight: 700;
  }
  .profile-pane-handle { font-size: 16px; line-height: 22px; font-weight: 400; }

  .profile-pane-chip {
    align-self: flex-start;
    margin-top: 11px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--text-1);
    color: var(--bg);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }
  .profile-pane-bio {
    margin-top: 20px;
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
  }
  .profile-pane-stats { margin-top: 14px; gap: 20px; }
  .profile-pane-stats .t-body-md { font-size: 15px; line-height: 20px; }

  .profile.pane-screen .profile-actions {
    gap: 12px;
    margin: 17px 37px 18px;
    padding-bottom: 0;
  }
  .profile.pane-screen .profile-actions > .pill {
    flex: 1;
    min-width: 0;
    height: 46px;
    border-radius: calc(14px * var(--r-k));
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
    corner-shape: superellipse(1.5);
}
  .profile.pane-screen .profile-actions > .pill { background: var(--text-1); color: var(--bg); }
  .profile.pane-screen .profile-actions > .pill.ghost {
    background: var(--card);
    color: var(--text-1);
  }
  .profile-pane-header > .divider { background: var(--pane-line); }

  .profile.pane-screen .profile-notice { padding: 48px 37px; }
  .profile.pane-screen .qna-link {
    padding: 22px 28px;
    border-bottom: 1px solid var(--pane-line);
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
  }
  .profile.pane-screen .qna-link > span {
    font-size: var(--pane-body-size);
    line-height: var(--pane-body-lh);
  }
  .profile.pane-screen .profile-posts { gap: 0; padding: 0; }
}

@media (min-width: 1024px) {
  .settings-pane .settings-split {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 319fr) minmax(0, 447fr);
  }
  .settings-pane .pane-scroll { min-width: 0; }

  .settings-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 38px 37px 0;
    border-right: 1px solid var(--pane-line);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { width: 0; }
  .settings-nav-item {
    flex: none;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border-radius: calc(11px * var(--r-k));
    color: var(--text-1);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-align: left;
    transition: background 120ms linear;
    corner-shape: superellipse(1.5);
}
  .settings-nav-item.selected { background: var(--pane-fill); }

  .settings-pane .settings-body {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    gap: 24px;
    padding: 38px 37px calc(var(--bottom-spacer) + var(--safe-bottom));
  }

  .settings-save { display: flex; justify-content: flex-end; }
  .settings-save > .pill {
    height: 40px;
    padding: 0 22px;
    border-radius: calc(20px * var(--r-k));
    background: var(--text-1);
    color: var(--bg);
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    corner-shape: superellipse(1.5);
}

  .settings-pane .settings-section { gap: 0; }
  .settings-pane .section-title {
    margin-bottom: 10px;
    padding-left: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: var(--text-1);
  }
  .settings-pane .settings-hint {
    margin-top: 2px;
    text-align: right;
    font-size: 13px;
    line-height: 18px;
    color: var(--pane-dim);
  }
  .settings-pane .settings-stack { gap: 24px; }

  .settings-pane .settings-card {
    background: none;
    border-radius: 0;
    overflow: visible;
  }
  .settings-pane .settings-card > :not(.settings-row):not(:has(.settings-row)),
  .settings-pane .settings-card > :has(.settings-row) > :not(.settings-row) {
    margin: 0;
  }
  .settings-pane .settings-row {
    gap: 14px;
    padding: 14px 18px;
    border-top: 0;
    border-radius: calc(20px * var(--r-k));
    background: var(--card);
    corner-shape: superellipse(1.5);
}
  .settings-pane .settings-row + .settings-row {
    border-top: 1px solid var(--pane-line);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .settings-pane .settings-row:has(+ .settings-row) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .settings-pane button.settings-row:active { background: var(--pane-fill); }
  .settings-pane .settings-row > .col { gap: 3px; }
  .settings-pane .settings-row .t-title-sm {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }
  .settings-pane .settings-row .t-label-md,
  .settings-pane .settings-row .t-body-md {
    font-size: 13.5px;
    line-height: 18px;
  }
  .settings-pane .settings-row .t-label-md.c-3,
  .settings-pane .settings-row .t-body-md.c-3 { color: var(--pane-dim); }
  .settings-pane .settings-row .icon {
    width: 18px;
    height: 18px;
    color: var(--text-1);
  }
  .settings-pane .school-cancel { padding: 4px 4px 0; text-align: right; }

  .settings-pane .field,
  .settings-pane .field.on-bg {
    min-height: 48px;
    padding: 0 16px;
    border-radius: calc(14px * var(--r-k));
    background: none;
    border: 1px solid var(--pane-line);
    corner-shape: superellipse(1.5);
}
  .settings-pane .field input,
  .settings-pane .field textarea,
  .settings-pane .field-value {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
  }
  .settings-pane .field input::placeholder,
  .settings-pane .field textarea::placeholder { color: var(--pane-dim); }
  .settings-pane .field-multiline {
    min-height: 124px;
    padding: 13px 16px;
  }
  .settings-pane .field input:disabled {
    color: var(--text-1);
    -webkit-text-fill-color: var(--text-1);
    opacity: 1;
  }

  .settings-pane .number-row { gap: 10px; }
  .settings-pane .number-field { flex: 1; min-width: 0; padding: 0 12px; }
  .settings-pane .number-unit { font-size: 16px; line-height: 22px; color: var(--pane-dim); }

  .settings-pane .profile-settings-preview {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
  }
  .settings-pane .profile-settings-preview > .col { align-items: center; }
  .settings-pane .profile-settings-name {
    font-size: var(--pane-section-size);
    line-height: 26px;
    font-weight: 700;
  }
  .settings-pane .profile-settings-handle {
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: var(--text-1);
  }

  .settings-pane .preset-grid { gap: 19px; }
  .settings-pane .preset-cell { border-width: 2px; }
  .settings-pane .preset-cell .avatar { width: 100%; height: 100%; }
  .settings-pane .preset-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-1) 40%, var(--bg));
    color: var(--text-1);
  }

  .settings-pane .hidden-list {
    padding: 0 16px;
    border-radius: calc(14px * var(--r-k));
    border: 1px solid var(--pane-line);
    corner-shape: superellipse(1.5);
}
  .settings-pane .hidden-list > p {
    padding: 14px 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--pane-dim);
  }
  .settings-pane .hidden-user { padding: 12px 0; border-top-color: var(--pane-line); }
  .settings-pane .hidden-user .t-title-sm { font-size: 15px; line-height: 20px; }
}