/* ========================================================================
   Components — Apple HIG patterns
   - Buttons: filled / tinted / plain / bordered (plus capsule)
   - Inset grouped lists & cards
   - Material navigation bars
   - Form controls with proper focus rings
   - Min 44pt touch targets
   ======================================================================== */

/* ---------- Header (navigation bar, regular material) ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: transparent;
  isolation: isolate;
}

.app-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--material-regular);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-bottom: 0.5px solid var(--separator);
}

.app-header__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: 600 var(--t-headline)/1 var(--font-display);
  letter-spacing: var(--tr-headline);
  color: var(--label);
  height: var(--hit);
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
}
.brand:hover { opacity: 1; background: var(--quaternary-fill); }

.brand__dot {
  width: 8px;
  height: 8px;
  background: var(--system-blue);
  border-radius: 50%;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); }

.nav__link {
  font: 500 var(--t-callout)/1 var(--font-text);
  color: var(--secondary-label);
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--label); background: var(--quaternary-fill); opacity: 1; }
.nav__link[aria-current="page"] { color: var(--label); background: var(--tertiary-fill); }

.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--secondary-label);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--label); background: var(--quaternary-fill); }
.theme-toggle svg { width: 18px; height: 18px; }

.lang-toggle {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--secondary-label);
  font: 700 var(--t-caption-1)/1 var(--font-text);
  letter-spacing: 0.06em;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lang-toggle:hover { color: var(--label); background: var(--quaternary-fill); }

.quick-log {
  position: relative;
  margin-left: var(--sp-1);
}

.quick-log__btn {
  min-width: 72px;
}

.quick-log__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  z-index: 60;
}

.quick-log.is-open .quick-log__pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.quick-log__item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--label);
  font: 700 var(--t-subheadline)/1.2 var(--font-text);
}
.quick-log__item:hover {
  opacity: 1;
  background: var(--tertiary-fill);
}

/* Avatar menu (dropdown in header) */
.avatar-menu {
  position: relative;
  margin-left: var(--sp-1);
}
.avatar-menu__btn {
  display: grid;
  place-items: center;
  padding: 2px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--t-fast) var(--ease-out);
}
.avatar-menu__btn:hover { background: var(--quaternary-fill); }
.avatar-menu__btn:focus-visible { outline: 3px solid var(--system-blue); outline-offset: 2px; }
.avatar-menu__btn .avatar { border: 1px solid var(--border-soft); }
.avatar-menu__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top right;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  /* Higher than sticky headers + sticky page heroes so dropdown never gets
     visually buried by the page below it. */
  z-index: 90;
}
.avatar-menu.is-open .avatar-menu__pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.avatar-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font: 500 var(--t-subheadline)/1.3 var(--font-text);
  color: var(--label);
  cursor: pointer;
}
.avatar-menu__item:hover { background: var(--tertiary-fill); color: var(--label); opacity: 1; }
.avatar-menu__item--danger { color: var(--system-red); }
.avatar-menu__item--danger:hover { background: var(--system-red-soft); color: var(--system-red); }
.avatar-menu__sep {
  border: 0;
  height: 1px;
  background: var(--separator);
  margin: 4px 0;
}

@media (max-width: 720px) {
  .nav__link[data-mobile-hide] { display: none; }
  .quick-log__btn { min-width: 62px; padding-left: 12px; padding-right: 12px; }
}

/* ---------- Buttons (Apple variants) ---------- */
/* Base: capsule pill, weight 590-ish, no border by default */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font: 600 var(--t-callout)/1 var(--font-text);
  letter-spacing: var(--tr-body);
  background: var(--fill);
  color: var(--label);
  border: none;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--secondary-fill); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Filled — primary action; uses system-blue or accent */
.btn--primary {
  background: var(--label);
  color: var(--system-background);
}
.btn--primary:hover { background: var(--label); opacity: 0.86; }

.btn--accent {
  background: var(--system-blue);
  color: #fff;
}
.btn--accent:hover { background: var(--system-blue); opacity: 0.88; }

/* Tinted — soft fill with accent color text */
.btn--tinted {
  background: var(--system-blue-soft);
  color: var(--system-blue);
}
.btn--tinted:hover { background: var(--system-blue-soft); opacity: 0.8; }

/* Plain — text-only, no fill */
.btn--plain {
  background: transparent;
  color: var(--system-blue);
  padding: 8px 12px;
}
.btn--plain:hover { background: var(--quaternary-fill); opacity: 1; }

/* Bordered — outline */
.btn--outline {
  background: transparent;
  color: var(--label);
  box-shadow: inset 0 0 0 1px var(--separator);
}
.btn--outline:hover { background: var(--quaternary-fill); }

.btn--danger {
  background: transparent;
  color: var(--system-red);
}
.btn--danger:hover { background: var(--system-red-soft); }

.btn--full { width: 100%; }
.btn--sm   { min-height: 32px; padding: 6px 14px; font-size: var(--t-subheadline); }
.btn--lg   { min-height: 44px; padding: 12px 22px; font-size: var(--t-body); }
.btn--xl   { min-height: 52px; padding: 14px 26px; font-size: var(--t-body); font-weight: 600; }

/* Category-tinted button */
.btn--cat {
  background: var(--c, var(--system-blue));
  color: #fff;
}
.btn--cat:hover { background: var(--c, var(--system-blue)); opacity: 0.88; }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field__label {
  font: 600 var(--t-footnote)/1.2 var(--font-text);
  letter-spacing: 0.02em;
  color: var(--secondary-label);
  text-transform: uppercase;
}

.input, .textarea, select.input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--hit);
  background: var(--secondary-system-grouped-background);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--label);
  font: 400 var(--t-body)/1.4 var(--font-text);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

.input:hover, .textarea:hover, select.input:hover { border-color: var(--opaque-separator); }

.input:focus, .textarea:focus, select.input:focus {
  outline: none;
  border-color: var(--system-blue);
  box-shadow: 0 0 0 4px var(--system-blue-soft);
}

.input::placeholder, .textarea::placeholder { color: var(--placeholder-text); }

.textarea { min-height: 120px; resize: vertical; line-height: 1.4; }

select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5 L6 7.5 L9 4.5' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field__error {
  font: 400 var(--t-footnote)/1.3 var(--font-text);
  color: var(--system-red);
  min-height: 1.2em;
}

/* ---------- Auth card (sheet style) ---------- */
.auth-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-2xl);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-lg);
  border: 0.5px solid var(--separator);
}

.auth-card h1 {
  font-size: var(--t-title-1);
  font-weight: 700;
  letter-spacing: var(--tr-large);
  margin-bottom: var(--sp-2);
}

.auth-card__sub {
  color: var(--secondary-label);
  margin-bottom: var(--sp-6);
  font: 400 var(--t-subheadline)/var(--lh-subheadline) var(--font-text);
}

.auth-card form { display: flex; flex-direction: column; gap: var(--sp-4); }

.auth-card__alt {
  margin-top: var(--sp-5);
  text-align: center;
  color: var(--secondary-label);
  font: 400 var(--t-footnote)/1.4 var(--font-text);
}

.auth-card__alt a {
  color: var(--system-blue);
  font-weight: 700;
}

.auth-card__forgot {
  margin-top: var(--sp-4);
  text-align: center;
}
.auth-card__forgot a {
  color: var(--secondary-label);
  font: 600 var(--t-footnote)/1.4 var(--font-text);
}
.auth-card__forgot a:hover { color: var(--system-blue); opacity: 1; }

.auth-card__success {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--system-green-soft);
  color: var(--label);
  font: 400 var(--t-subheadline)/1.5 var(--font-text);
  text-align: center;
}

@media (max-width: 540px) {
  .auth-shell { padding: var(--sp-5) var(--sp-4); align-items: flex-start; }
  .auth-card { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-xl); }
}

/* ---------- Profile card (inset hero) ---------- */
.profile-card {
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tertiary-fill);
  display: grid;
  place-items: center;
  font: 600 var(--t-title-3)/1 var(--font-display);
  color: var(--secondary-label);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 88px; height: 88px; font-size: var(--t-title-1); }

.profile-card__info { flex: 1; min-width: 0; }

.profile-card__name {
  font: 700 var(--t-title-1)/1.15 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
}

.profile-card__handle {
  color: var(--tertiary-label);
  font: 400 var(--t-subheadline)/1.3 var(--font-text);
  margin-top: 2px;
}

.profile-card__stats {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.profile-card__stat {
  display: flex;
  flex-direction: column;
}

.profile-card__stat strong {
  font: 700 var(--t-title-2)/1 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
}

.profile-card__stat span {
  font: 600 var(--t-caption-2)/1.2 var(--font-text);
  color: var(--tertiary-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .profile-card { flex-direction: column; align-items: flex-start; padding: var(--sp-5); }
  .profile-card__stats { width: 100%; justify-content: space-between; gap: var(--sp-4); }
  .profile-card__name { font-size: var(--t-title-2); }
}

/* ---------- Section heading ---------- */
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.section-heading h2 {
  font: 600 var(--t-title-2)/var(--lh-title-2) var(--font-display);
  letter-spacing: var(--tr-large);
}

.section-heading p {
  color: var(--secondary-label);
  margin-top: 4px;
  font: 400 var(--t-subheadline)/var(--lh-subheadline) var(--font-text);
}

/* ---------- Category cards ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

@media (max-width: 880px) {
  .cat-grid { grid-template-columns: 1fr; }
}

.cat-card {
  --c: var(--label);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--secondary-system-grouped-background);
  min-height: 180px;
  transition: transform var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
  color: var(--label);
  text-decoration: none;
}

.cat-card:hover {
  transform: translateY(-2px);
  background: var(--tertiary-system-grouped-background);
  opacity: 1;
}

.cat-card:active { transform: translateY(0) scale(0.99); }

.cat-card__eyebrow {
  font: 600 var(--t-caption-2)/1.2 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c);
  margin-bottom: var(--sp-2);
}

.cat-card__title {
  font: 700 var(--t-title-1)/1.1 var(--font-display);
  letter-spacing: var(--tr-large);
}

.cat-card__desc {
  color: var(--secondary-label);
  margin-top: var(--sp-2);
  font: 400 var(--t-subheadline)/1.4 var(--font-text);
  max-width: 28ch;
}

.cat-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: var(--sp-5);
}

.cat-card__cta {
  font: 600 var(--t-footnote)/1 var(--font-text);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.cat-card__cta .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

.cat-card:hover .cat-card__cta .arrow { transform: translateX(3px); }

.cat-card__count {
  font: 400 var(--t-footnote)/1 var(--font-text);
  color: var(--tertiary-label);
}

/* ---------- Media grid ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

@media (max-width: 540px) {
  .media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

.media-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base) var(--ease-out);
  border-radius: var(--r-md);
}
.media-card:hover { color: inherit; opacity: 1; transform: translateY(-2px); }
.media-card:active { transform: translateY(0) scale(0.985); }

.media-card__cover {
  aspect-ratio: var(--card-aspect, 2 / 3);
  background: var(--tertiary-fill);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  transition: box-shadow var(--t-base) var(--ease-out);
}

.media-card:hover .media-card__cover { box-shadow: var(--shadow-md); }

.media-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__cover-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 var(--t-d-2)/1 var(--font-display);
  color: var(--tertiary-label);
  letter-spacing: -0.04em;
}

.media-card__body { padding: var(--sp-3) 2px 0; }

.media-card__title {
  font: 500 var(--t-subheadline)/1.3 var(--font-text);
  color: var(--label);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.6em;
}

.media-card__sub {
  font: 400 var(--t-footnote)/1.3 var(--font-text);
  color: var(--tertiary-label);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font: 400 var(--t-footnote)/1 var(--font-text);
  color: var(--secondary-label);
}

.media-card__rating .star { color: var(--c, var(--film)); font-size: var(--t-subheadline); }

[data-category="music"] .media-card,
[data-category="music"].media-card,
.media-grid--music .media-card { --card-aspect: 1 / 1; }

/* ---------- Star rating (5 stars, half-click) ---------- */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
}

.rating__stars { display: inline-flex; gap: 2px; }

.rating__star {
  position: relative;
  width: 32px;
  height: 32px;
}

.rating__star__base,
.rating__star__fill {
  position: absolute;
  inset: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") center / 28px 28px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") center / 28px 28px no-repeat;
}

.rating__star__base { background: var(--quaternary-fill); }
.rating__star__fill {
  background: var(--c, var(--system-orange));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 120ms var(--ease-out);
}

.rating__star[data-fill="0.5"] .rating__star__fill { clip-path: inset(0 50% 0 0); }
.rating__star[data-fill="1"]   .rating__star__fill { clip-path: inset(0 0    0 0); }

.rating__zone {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.rating__zone--left  { left: 0; }
.rating__zone--right { right: 0; }

.rating__readout {
  font: 600 var(--t-subheadline)/1 var(--font-text);
  color: var(--secondary-label);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}

.rating--readonly .rating__zone { display: none; }

.rating--sm .rating__star { width: 18px; height: 18px; }
.rating--sm .rating__star__base,
.rating--sm .rating__star__fill {
  -webkit-mask-size: 16px 16px;
          mask-size: 16px 16px;
}
.rating--sm .rating__readout { font-size: var(--t-footnote); min-width: 40px; }

/* ---------- Tabs (segmented control vibe) ---------- */
.tabs {
  display: inline-flex;
  background: var(--secondary-fill);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}

.tab {
  min-height: 30px;
  padding: 6px 14px;
  font: 600 var(--t-subheadline)/1 var(--font-text);
  color: var(--label);
  border-radius: 7px;
  transition: all var(--t-fast) var(--ease-out);
}
.tab:hover { background: var(--quaternary-fill); }
.tab.is-active {
  background: var(--secondary-system-grouped-background);
  color: var(--label);
  box-shadow: var(--shadow-sm);
}

/* ---------- Search bar ---------- */
.log-composer {
  max-width: 680px;
  margin-bottom: var(--sp-4);
}

.log-composer__search {
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.log-composer__hint {
  color: var(--tertiary-label);
  font: 400 var(--t-footnote)/var(--lh-footnote) var(--font-text);
  margin-top: var(--sp-3);
}

.search-bar {
  position: relative;
  display: flex;
  gap: var(--sp-2);
}

.search-bar .input {
  padding-left: 40px;
  background: var(--tertiary-fill);
  border-color: transparent;
}

.search-bar .input:disabled {
  opacity: 0.7;
  cursor: wait;
}

.search-bar .input:focus {
  background: var(--secondary-system-grouped-background);
}

.search-bar::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: var(--tertiary-label);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

/* ---------- Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--quaternary-fill) 0%, var(--tertiary-fill) 50%, var(--quaternary-fill) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}

@keyframes skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Empty state ---------- */
.empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  margin-top: var(--sp-5);
}

.empty h3 {
  font: 600 var(--t-title-3)/var(--lh-title-3) var(--font-display);
  letter-spacing: var(--tr-headline);
  color: var(--label);
  margin-bottom: var(--sp-2);
}

.empty p { color: var(--secondary-label); margin-bottom: var(--sp-5); font-size: var(--t-subheadline); }

/* ---------- Toast (HUD style) ---------- */
.toast {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--material-thick);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  color: var(--label);
  padding: 12px 20px;
  border-radius: var(--r-full);
  font: 600 var(--t-subheadline)/1 var(--font-text);
  opacity: 0;
  transition: all var(--t-base) var(--ease-out);
  pointer-events: none;
  z-index: 100;
  max-width: calc(100% - 2 * var(--sp-5));
  box-shadow: var(--shadow-lg);
  border: 0.5px solid var(--separator);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast--error   { color: var(--system-red); }
.toast--success { color: var(--system-green); }

@media (max-width: 720px) {
  .toast { bottom: calc(var(--bottom-nav-h) + var(--sp-4)); }
}

/* ---------- Search dropdown ---------- */
.search-dropdown {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  right: 0;
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: 440px;
  overflow-y: auto;
  z-index: 20;
}

.search-dropdown__item {
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  border-bottom: 0.5px solid var(--separator);
  transition: background var(--t-fast);
  min-height: var(--hit);
}
.search-dropdown__item:last-child { border-bottom: none; }
.search-dropdown__item:hover { background: var(--tertiary-fill); }

.search-dropdown__thumb {
  width: 44px;
  height: 60px;
  border-radius: 6px;
  background: var(--tertiary-fill);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font: 600 var(--t-callout)/1 var(--font-display);
  color: var(--tertiary-label);
  overflow: hidden;
}
.search-dropdown__thumb img { width: 100%; height: 100%; object-fit: cover; }

[data-category="music"] .search-dropdown__thumb { width: 52px; height: 52px; }

.search-dropdown__title {
  font: 600 var(--t-subheadline)/1.3 var(--font-text);
  color: var(--label);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.search-dropdown__sub {
  font: 400 var(--t-footnote)/1.3 var(--font-text);
  color: var(--tertiary-label);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ---------- Log form layout ---------- */
.log-form {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  align-items: start;
}

.log-hero {
  padding: var(--sp-6);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(90% 160% at 5% 0%, color-mix(in srgb, var(--c, var(--system-blue)) 26%, transparent), transparent 64%),
    linear-gradient(135deg, var(--secondary-system-grouped-background), var(--tertiary-system-background));
  border: 0.5px solid var(--separator);
}

.log-form__preview {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.log-form__poster {
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-lg);
  background: var(--tertiary-fill);
  display: grid;
  place-items: center;
  font: 700 var(--t-d-4)/1 var(--font-display);
  color: var(--tertiary-label);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.log-form__poster img { width: 100%; height: 100%; object-fit: cover; }

[data-category="music"] .log-form__poster { --card-aspect: 1 / 1; }

.log-form__facts {
  display: grid;
  gap: var(--sp-2);
}

.log-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
}

.log-fact span {
  color: var(--tertiary-label);
  font: 700 var(--t-caption-1)/1 var(--font-text);
}

.log-fact strong {
  color: var(--label);
  font: 800 var(--t-caption-1)/1 var(--font-text);
}

.selected-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.selected-content__meta { min-width: 0; }

.selected-content__kicker {
  color: var(--c, var(--secondary-label));
  font: 700 var(--t-caption-2)/1.2 var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.selected-content__title {
  color: var(--label);
  font: 700 var(--t-title-3)/var(--lh-title-3) var(--font-display);
  letter-spacing: var(--tr-headline);
  overflow-wrap: anywhere;
}

.selected-content__sub {
  color: var(--secondary-label);
  font: 400 var(--t-subheadline)/var(--lh-subheadline) var(--font-text);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.selected-details {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--c-soft, var(--secondary-fill)) 42%, var(--secondary-system-grouped-background));
  border: 0.5px solid var(--separator);
}

.selected-details:empty { display: none; }

.selected-details p {
  color: var(--secondary-label);
  font: 500 var(--t-subheadline)/1.45 var(--font-text);
}

.selected-details__tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.selected-details__tags span {
  padding: 6px 9px;
  border-radius: var(--r-full);
  background: var(--material-regular);
  color: var(--label);
  font: 800 var(--t-caption-1)/1 var(--font-text);
}

.status-picker {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.status-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--secondary-system-grouped-background);
  color: var(--secondary-label);
  border: 0.5px solid var(--separator);
  font: 800 var(--t-subheadline)/1 var(--font-text);
}

.status-pill.is-active {
  color: #fff;
  background: var(--c, var(--system-blue));
  border-color: transparent;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--c, var(--system-blue)) 26%, transparent);
}

.status-pill__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.log-form__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .log-form { grid-template-columns: 1fr; gap: var(--sp-5); }
  .log-form__preview { position: relative; top: auto; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; }
  .log-form__poster { max-width: 200px; position: relative; top: auto; }
  .log-form__facts { align-self: stretch; }
  .selected-content { align-items: flex-start; flex-direction: column; }
  .selected-content .btn { width: 100%; }
  .log-form__actions > * { flex: 1 1 160px; }
}

/* ---------- Page hero ---------- */
.page-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.page-hero h1 {
  font: 700 var(--t-large-title)/var(--lh-large-title) var(--font-display);
  letter-spacing: var(--tr-large);
}

.page-hero p {
  color: var(--secondary-label);
  margin-top: var(--sp-2);
  max-width: 52ch;
  font: 400 var(--t-callout)/var(--lh-callout) var(--font-text);
}

/* Category accent pill */
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--c-soft, var(--secondary-fill));
  color: var(--c, var(--secondary-label));
  font: 600 var(--t-caption-2)/1.2 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}

/* ---------- Modal (sheet style) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal__card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  transform: translateY(20px) scale(0.97);
  transition: transform var(--t-base) var(--ease-spring);
}
.modal.is-open .modal__card { transform: translateY(0) scale(1); }

.modal__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tertiary-fill);
  color: var(--secondary-label);
  font-size: 20px;
  line-height: 1;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  z-index: 2;
}
.modal__x:hover { background: var(--secondary-fill); color: var(--label); }

.modal__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6);
}

.modal__poster {
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-md);
  background: var(--tertiary-fill);
  overflow: hidden;
}
.modal__poster img { width: 100%; height: 100%; object-fit: cover; }

[data-category="music"] .modal__poster { --card-aspect: 1 / 1; }

.modal__body { display: flex; flex-direction: column; min-width: 0; }

.modal__eyebrow {
  font: 600 var(--t-caption-2)/1.2 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c, var(--tertiary-label));
  margin-bottom: var(--sp-2);
}

.modal__title {
  font: 700 var(--t-title-2)/var(--lh-title-2) var(--font-display);
  letter-spacing: var(--tr-large);
}

.modal__sub {
  color: var(--tertiary-label);
  font: 400 var(--t-subheadline)/1.3 var(--font-text);
  margin-top: 4px;
}

.modal__rating-row { margin-top: var(--sp-4); }

.modal__review {
  margin-top: var(--sp-4);
  color: var(--secondary-label);
  font: 400 var(--t-callout)/var(--lh-callout) var(--font-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.modal__status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--tertiary-fill);
  color: var(--secondary-label);
  font: 600 var(--t-caption-1)/1.2 var(--font-text);
  margin-top: var(--sp-3);
}

.modal__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .modal__layout { grid-template-columns: 1fr; padding: var(--sp-4); padding-top: var(--sp-6); }
  .modal__poster { max-width: 180px; margin: 0 auto; }
}

/* ---------- Bottom navigation (tab bar material) ---------- */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-h);
  background: var(--material-thick);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-top: 0.5px solid var(--separator);
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav__inner {
  display: flex;
  height: 100%;
  align-items: stretch;
}

.bottom-nav__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--tertiary-label);
  font: 600 10px/1 var(--font-text);
  letter-spacing: 0.02em;
  transition: color var(--t-fast) var(--ease-out);
  padding: 6px;
  min-height: var(--hit);
}

.bottom-nav__link:hover { color: var(--label); opacity: 1; }
.bottom-nav__link.is-active { color: var(--system-blue); }

.bottom-nav__icon,
.side-nav__icon {
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.bottom-nav__icon--home,
.side-nav__icon--home { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); }
.bottom-nav__icon--video,
.side-nav__icon--video { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 8-6 4 6 4V8Z'/><rect x='2' y='6' width='14' height='12' rx='2' ry='2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 8-6 4 6 4V8Z'/><rect x='2' y='6' width='14' height='12' rx='2' ry='2'/></svg>"); }
.bottom-nav__icon--heart,
.side-nav__icon--heart { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35 10.55 20.03C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.54L12 21.35Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35 10.55 20.03C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.54L12 21.35Z'/></svg>"); }
.bottom-nav__icon--plus,
.side-nav__icon--plus { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>"); }
.bottom-nav__icon--user,
.side-nav__icon--user { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.bottom-nav__icon--list,
.side-nav__icon--list { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>"); }

@media (max-width: 720px) {
  .bottom-nav { display: block; }
}

/* Full-height left rail (desktop/tablet). Pinned to the left edge with always-
   visible labels — a real sidebar, not a floating pill. Content is offset by
   --side-nav-w via `body:has(.side-nav)` so nothing hides behind it. */
.side-nav {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--side-nav-w);
  z-index: 45;
  background: var(--material-thick);
  border-right: 0.5px solid var(--separator);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.side-nav__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: var(--sp-3) 8px calc(var(--sp-3) + env(safe-area-inset-bottom));
}

.side-nav__brand {
  width: 42px;
  height: 42px;
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 20% 20%, var(--system-blue), transparent 42%),
    radial-gradient(circle at 70% 25%, var(--system-green), transparent 42%),
    radial-gradient(circle at 55% 75%, var(--system-pink), transparent 48%),
    var(--secondary-fill);
  color: #fff;
  font: 900 var(--t-headline)/1 var(--font-display);
}

.side-nav__link {
  position: relative;
  width: 100%;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  color: var(--tertiary-label);
  font: 600 10px/1.1 var(--font-text);
  letter-spacing: 0.01em;
  text-align: center;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

/* Push the profile entry to the very bottom of the rail. */
.side-nav__link:last-child { margin-top: auto; }

.side-nav__link:hover {
  opacity: 1;
  color: var(--label);
  background: var(--tertiary-fill);
}

.side-nav__link.is-active {
  color: var(--system-blue);
  background: var(--system-blue-soft);
}

.side-nav__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 721px) {
  .side-nav { display: block; }
  body:has(.side-nav) { padding-left: var(--side-nav-w); }
}

.log-chooser {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: var(--sp-5);
}

.log-chooser.is-open { display: grid; }

.log-chooser__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.log-chooser__card {
  position: relative;
  width: min(100%, 620px);
  padding: var(--sp-5);
  border-radius: var(--r-2xl);
  background: var(--material-thick);
  border: 0.5px solid var(--separator);
  box-shadow: var(--shadow-xl);
}

.log-chooser__head h2 {
  font: 900 var(--t-title-1)/1.05 var(--font-display);
  color: var(--label);
}

.log-chooser__head p {
  margin-top: var(--sp-2);
  color: var(--secondary-label);
}

.log-chooser__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.log-chooser__item {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--c, var(--system-blue)) 34%, transparent), transparent 52%),
    var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  color: var(--label);
}

.log-chooser__item:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.log-chooser__glyph {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c, var(--system-blue));
  color: #fff;
  font: 900 var(--t-title-3)/1 var(--font-display);
}

.log-chooser__item strong {
  font: 900 var(--t-title-3)/1 var(--font-display);
}

.log-chooser__item span:last-child {
  color: var(--secondary-label);
  font: 600 var(--t-footnote)/1.25 var(--font-text);
}

@media (max-width: 640px) {
  .log-chooser {
    align-items: end;
    padding: 0;
  }
  .log-chooser__card {
    width: 100%;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    padding-bottom: calc(var(--bottom-nav-h) + var(--sp-5));
  }
  .log-chooser__grid { grid-template-columns: 1fr; }
  .log-chooser__item { min-height: 96px; }
}

/* ---------- Cover banner + profile header (with cover image) ---------- */
.profile-banner {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-soft, var(--secondary-fill)) 0%, var(--tertiary-fill) 100%);
  aspect-ratio: 16 / 6;
  min-height: 140px;
  max-height: 240px;
}

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

/* ---------- Profile header with banner ----------
   Approach: banner is a fixed-aspect block; body sits below with positive
   padding-top. Avatar absolutely positioned so it overlaps banner by half
   its height — content beneath the avatar can grow freely without ever
   colliding with the banner. */
.profile-with-banner {
  position: relative;
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.profile-with-banner__body {
  position: relative;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  /* Reserve room for the absolutely-positioned avatar that overlaps banner */
}

.profile-with-banner__body .avatar {
  position: absolute;
  top: calc(-1 * 56px); /* half of avatar height (112) */
  left: var(--sp-6);
  width: 112px;
  height: 112px;
  border: 4px solid var(--secondary-system-grouped-background);
  background: var(--secondary-system-grouped-background);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.profile-with-banner__info {
  min-width: 0;
  padding-left: calc(112px + var(--sp-4));
  min-height: 60px;
}

.profile-with-banner__name {
  font: 700 var(--t-title-1)/1.15 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
  word-break: break-word;
}

.profile-with-banner__handle {
  color: var(--tertiary-label);
  font: 400 var(--t-subheadline)/1.3 var(--font-text);
  margin-top: 2px;
}

.profile-with-banner__bio {
  color: var(--secondary-label);
  font: 400 var(--t-callout)/1.5 var(--font-text);
  margin-top: var(--sp-4);
  max-width: 60ch;
}

.profile-with-banner__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}

.profile-with-banner__counts {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.profile-with-banner__count {
  font: 400 var(--t-subheadline)/1 var(--font-text);
  color: var(--secondary-label);
}
.profile-with-banner__count strong {
  font-weight: 700;
  color: var(--label);
  margin-right: 4px;
  font-family: var(--font-display);
}

.profile-with-banner__actions {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}

/* Mobile: avatar shrinks and slides centred under banner; info wraps fully */
@media (max-width: 640px) {
  .profile-with-banner__body {
    padding: var(--sp-6) var(--sp-4) var(--sp-5);
  }
  .profile-with-banner__body .avatar {
    width: 88px;
    height: 88px;
    top: -44px;
    left: var(--sp-4);
  }
  .profile-with-banner__info {
    padding-left: 0;
    padding-top: 56px; /* enough room below avatar */
    min-height: 0;
  }
  .profile-with-banner__actions { margin-left: 0; }
  .profile-with-banner__name { font-size: var(--t-title-2); }
}

/* ---------- Profile favorites — Letterboxd-style empty slots ---------- */
.profile-favorites__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-5);
}

@media (min-width: 980px) {
  .profile-favorites__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}

.profile-favorites__category { min-width: 0; }

.profile-favorites__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.profile-favorites__counter {
  font: 600 var(--t-footnote)/1 var(--font-text);
  color: var(--tertiary-label);
  font-variant-numeric: tabular-nums;
}

.profile-favorites__posters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
}

.profile-favorites__slot {
  position: relative;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-sm);
  background: var(--tertiary-fill);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  padding: 0;
  border: 0;
}

.profile-favorites__slot:not(.is-empty):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.profile-favorites__slot.is-empty {
  background: transparent;
  border: 1.5px dashed var(--separator);
  cursor: pointer;
  color: var(--tertiary-label);
}

.profile-favorites__slot.is-empty:hover {
  border-color: var(--c, var(--system-blue));
  color: var(--c, var(--system-blue));
  background: var(--quaternary-fill);
}

.profile-favorites__slot.is-empty.is-readonly {
  cursor: default;
  pointer-events: none;
}

.profile-favorites__plus {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: inherit;
}

.profile-favorites__poster-link {
  display: block;
  width: 100%;
  height: 100%;
}

.profile-favorites__poster-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-favorites__glyph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font: 700 var(--t-title-3)/1 var(--font-display);
  color: var(--tertiary-label);
}

.profile-favorites__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  cursor: pointer;
}

.profile-favorites__slot:hover .profile-favorites__remove {
  opacity: 1;
}

/* ---------- Prominent favorites (main column) ---------- */
.profile-fav__block {
  position: relative;
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  overflow: hidden;
}
/* Category accent stripe along the top of each block */
.profile-fav__block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c, var(--system-blue));
  opacity: 0.9;
}
.profile-fav__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.profile-fav__counter {
  margin-left: auto;
  font: 600 var(--t-footnote)/1 var(--font-text);
  color: var(--tertiary-label);
  font-variant-numeric: tabular-nums;
}
.profile-fav__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 720px) {
  /* Left-aligned, consistent poster size on the roomy main column */
  .profile-fav__grid { grid-template-columns: repeat(5, minmax(0, 140px)); }
}

/* ---------- Compact recent-activity widget (side rail) ---------- */
.profile-activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-3);
}
.profile-activity__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  color: var(--label);
  text-decoration: none;
}
.profile-activity__row:hover { background: var(--tertiary-fill); opacity: 1; }
.profile-activity__thumb {
  width: 40px;
  height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tertiary-fill);
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
  font: 700 var(--t-caption-2)/1 var(--font-display);
}
.profile-activity__thumb img { width: 100%; height: 100%; object-fit: cover; }
.profile-activity__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-activity__title {
  font: 600 var(--t-footnote)/1.3 var(--font-text);
  color: var(--label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-activity__meta {
  font: 500 var(--t-caption-2)/1 var(--font-text);
  color: var(--tertiary-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Picker modal (used for favorites + similar pickers) ---------- */
.picker__head { padding: var(--sp-6) var(--sp-6) var(--sp-4); }
.picker__body { padding: 0 var(--sp-6) var(--sp-6); max-height: 60vh; overflow-y: auto; }

.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-4);
}

.picker__item {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-md);
  transition: transform var(--t-base) var(--ease-out);
}
.picker__item:hover { transform: translateY(-2px); }
.picker__item:hover .media-card__cover { box-shadow: var(--shadow-md); }
.picker__item .media-card__title { font-size: var(--t-footnote); min-height: 2.2em; }

.profile-world-switch__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.profile-world-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--secondary-system-grouped-background);
  color: var(--label);
  border: 0.5px solid var(--separator);
  font: 700 var(--t-subheadline)/1 var(--font-text);
}

.profile-world-pill:hover {
  opacity: 1;
  background: var(--tertiary-fill);
}

.profile-world-pill.is-active {
  background: var(--c, var(--label));
  color: var(--system-background);
  border-color: transparent;
}

.profile-world-pill strong {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.22);
  font-size: var(--t-caption-1);
}

.profile-world-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: var(--sp-5);
  align-items: start;
}

.profile-lists__grid,
.list-editor__existing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.profile-lists__stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.list-card {
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  color: var(--label);
}

.list-card h3 {
  font: 800 var(--t-title-3)/var(--lh-title-3) var(--font-display);
  letter-spacing: var(--tr-headline);
}

.list-card p {
  color: var(--secondary-label);
  font: 400 var(--t-subheadline)/var(--lh-subheadline) var(--font-text);
  margin-top: var(--sp-2);
}

.list-card span {
  display: inline-block;
  color: var(--tertiary-label);
  font: 700 var(--t-caption-2)/1.2 var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--sp-3);
}

.list-card__covers {
  display: flex;
  align-items: flex-end;
  min-width: 116px;
}

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

.list-card--profile .list-card__covers {
  min-width: 0;
  margin-top: var(--sp-2);
}

.list-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.list-card__likes {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 0;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--tertiary-fill);
  color: var(--secondary-label);
  text-transform: none;
  letter-spacing: 0;
  font: 700 var(--t-caption-1)/1 var(--font-text);
}

.like-btn--list {
  min-height: 32px;
  padding: 0 10px;
}

.list-card .like-btn span {
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
}

.list-card__cover {
  width: 42px;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: 6px;
  background: var(--tertiary-fill);
  border: 2px solid var(--secondary-system-grouped-background);
  margin-left: -16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
  font: 800 var(--t-caption-2)/1 var(--font-display);
}
.list-card__cover:first-child { margin-left: 0; }
.list-card__cover img { width: 100%; height: 100%; object-fit: cover; }
[data-category="music"] .list-card__cover { --card-aspect: 1 / 1; }

.list-editor {
  margin-top: var(--sp-5);
}

.list-editor__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  max-height: 240px;
  overflow: auto;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--tertiary-fill);
}

.list-editor__choice {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  font: 500 var(--t-subheadline)/1.3 var(--font-text);
}
.list-editor__choice:hover { background: var(--secondary-fill); }
.list-editor__choice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .profile-world-detail { grid-template-columns: 1fr; }
  .profile-lists__grid,
  .list-editor__existing,
  .list-editor__items { grid-template-columns: 1fr; }
  .list-card { grid-template-columns: 1fr; }
}

/* ---------- Follow button ---------- */
.btn--follow {
  background: var(--label);
  color: var(--system-background);
  min-width: 110px;
}
.btn--follow:hover { background: var(--label); opacity: 0.86; }

.btn--following {
  background: var(--secondary-fill);
  color: var(--label);
  min-width: 110px;
}
.btn--following:hover { background: var(--system-red-soft); color: var(--system-red); }

/* ---------- Like button (heart) ---------- */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--tertiary-fill);
  color: var(--secondary-label);
  font: 600 var(--t-footnote)/1 var(--font-text);
  transition: all var(--t-fast) var(--ease-out);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.like-btn:hover { background: var(--secondary-fill); color: var(--label); }
.like-btn:active { transform: scale(0.95); }
.like-btn.is-liked {
  background: var(--system-red-soft);
  color: var(--system-red);
}
.like-btn__icon {
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 21s-6.7-4.35-9.5-9.05C.85 8.4 2.5 4 6.5 4c2.5 0 3.86 1.3 5.5 3.5C13.64 5.3 15 4 17.5 4c4 0 5.65 4.4 4 7.95C18.7 16.65 12 21 12 21z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 21s-6.7-4.35-9.5-9.05C.85 8.4 2.5 4 6.5 4c2.5 0 3.86 1.3 5.5 3.5C13.64 5.3 15 4 17.5 4c4 0 5.65 4.4 4 7.95C18.7 16.65 12 21 12 21z'/></svg>") center / contain no-repeat;
}

.comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--tertiary-fill);
  color: var(--secondary-label);
  font: 600 var(--t-footnote)/1 var(--font-text);
  transition: all var(--t-fast) var(--ease-out);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.comment-btn:hover { background: var(--secondary-fill); color: var(--label); }
.comment-btn:active { transform: scale(0.95); }
.comment-btn__icon {
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>") center / contain no-repeat;
}

/* ---------- Modal comments ---------- */
.modal-comments {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 0.5px solid var(--separator);
}

.modal-comments__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.modal-comments__head h3 {
  font: 700 var(--t-callout)/var(--lh-callout) var(--font-text);
}

.modal-comments__count {
  color: var(--tertiary-label);
  font: 700 var(--t-caption-2)/1.2 var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.modal-comments__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.modal-comments__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sp-3);
}

.modal-comments__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--tertiary-fill);
  color: var(--secondary-label);
  font: 800 10px/1 var(--font-display);
}
.modal-comments__avatar img { width: 100%; height: 100%; object-fit: cover; }

.modal-comments__body {
  min-width: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--tertiary-fill);
}

.modal-comments__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 4px;
}
.modal-comments__meta a {
  color: var(--label);
  font: 700 var(--t-footnote)/1.2 var(--font-text);
}
.modal-comments__meta span {
  color: var(--tertiary-label);
  font: 500 var(--t-caption-2)/1.2 var(--font-text);
  white-space: nowrap;
}
.modal-comments__body p {
  color: var(--secondary-label);
  font: 400 var(--t-footnote)/var(--lh-footnote) var(--font-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.modal-comments__empty {
  color: var(--tertiary-label);
  font: 500 var(--t-footnote)/var(--lh-footnote) var(--font-text);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--tertiary-fill);
}

.modal-comments__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: end;
  margin-top: var(--sp-3);
}

.modal-comments__input {
  width: 100%;
  min-height: 42px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--tertiary-fill);
  color: var(--label);
  padding: 10px 12px;
  font: 400 var(--t-footnote)/var(--lh-footnote) var(--font-text);
}
.modal-comments__input:focus {
  outline: none;
  border-color: var(--system-blue);
  box-shadow: 0 0 0 4px var(--system-blue-soft);
}

@media (max-width: 520px) {
  .modal-comments__form { grid-template-columns: 1fr; }
  .modal-comments__form .btn { width: 100%; }
}

/* ---------- Feed entries ---------- */
.feed-entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
}

.feed-entry__poster {
  width: 56px;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-sm);
  background: var(--tertiary-fill);
  overflow: hidden;
  cursor: pointer;
}
.feed-entry__poster img { width: 100%; height: 100%; object-fit: cover; }

[data-category="music"] .feed-entry__poster,
[data-category="music"].feed-entry .feed-entry__poster { --card-aspect: 1 / 1; }

.feed-entry__body { min-width: 0; }

.feed-entry__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
}

.feed-entry__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tertiary-fill);
  overflow: hidden;
  display: grid;
  place-items: center;
  font: 700 9px/1 var(--font-display);
  color: var(--secondary-label);
  flex-shrink: 0;
}
.feed-entry__avatar img { width: 100%; height: 100%; object-fit: cover; }

.feed-entry__who {
  font: 600 var(--t-footnote)/1.3 var(--font-text);
  color: var(--label);
}
.feed-entry__who a { color: var(--label); }
.feed-entry__who a:hover { color: var(--system-blue); }

.feed-entry__when {
  margin-left: auto;
  color: var(--tertiary-label);
  font: 400 var(--t-caption-1)/1 var(--font-text);
}

.feed-entry__title {
  font: 600 var(--t-callout)/1.3 var(--font-text);
  color: var(--label);
  cursor: pointer;
}
.feed-entry__title:hover { color: var(--system-blue); }

.feed-entry__sub {
  font: 400 var(--t-footnote)/1.3 var(--font-text);
  color: var(--tertiary-label);
  margin-top: 2px;
}

.feed-entry__rating { margin-top: var(--sp-2); }

.feed-entry__review {
  margin-top: var(--sp-3);
  color: var(--secondary-label);
  font: 400 var(--t-subheadline)/1.45 var(--font-text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.feed-entry__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ---------- Settings page ---------- */
.settings-section {
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  margin-top: var(--sp-5);
}

.settings-section h2 {
  font: 600 var(--t-title-3)/var(--lh-title-3) var(--font-display);
  letter-spacing: var(--tr-headline);
  margin-bottom: var(--sp-4);
}

.settings-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.settings-row:last-child { margin-bottom: 0; }

.settings-hint {
  font: 400 var(--t-footnote)/1.4 var(--font-text);
  color: var(--tertiary-label);
}

.favorites-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.favorites-editor__category {
  border-top: 0.5px solid var(--separator);
  padding-top: var(--sp-5);
}

.favorites-editor__category:first-child {
  border-top: 0;
  padding-top: 0;
}

.favorites-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.favorites-editor__head h3 {
  font: 700 var(--t-title-3)/var(--lh-title-3) var(--font-display);
  letter-spacing: var(--tr-headline);
}

.favorites-editor__slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
}

.favorites-editor__slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.favorites-editor__slot span {
  color: var(--secondary-label);
  font: 700 var(--t-caption-2)/1.2 var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.favorites-editor__slot .input {
  min-height: 40px;
  font-size: var(--t-subheadline);
}

@media (max-width: 760px) {
  .favorites-editor__head { flex-direction: column; }
  .favorites-editor__head .btn { width: 100%; }
  .favorites-editor__slots { grid-template-columns: 1fr; }
}

.image-picker {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}

.image-picker__preview {
  flex-shrink: 0;
  background: var(--tertiary-fill);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
}

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

.image-picker--avatar .image-picker__preview { width: 96px; height: 96px; border-radius: 50%; }
.image-picker--cover  .image-picker__preview { width: 100%; aspect-ratio: 16 / 6; max-width: 480px; }

.image-picker__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.image-picker--cover { flex-direction: column; align-items: flex-start; }

/* hide native file input, the label-as-button triggers it */
.file-input { display: none; }

/* ============================================================
   Home social hub
   ============================================================ */
.home-hero {
  position: relative;
  min-height: 320px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: var(--sp-6);
  padding: var(--sp-7);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--system-blue-soft), transparent 42%),
    linear-gradient(225deg, var(--system-green-soft), transparent 38%),
    var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  box-shadow: var(--shadow-sm);
}

.home-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
}

.home-hero__kicker {
  width: fit-content;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 var(--t-caption-2)/1.2 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-hero__profile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.home-hero__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--tertiary-fill);
  color: var(--secondary-label);
  font: 800 var(--t-title-3)/1 var(--font-display);
  border: 3px solid var(--secondary-system-grouped-background);
  box-shadow: var(--shadow-md);
}
.home-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }

.home-hero h1 {
  font: 800 clamp(2.2rem, 4vw, 3rem)/1.05 var(--font-display);
  letter-spacing: 0;
  max-width: 16ch;
  overflow-wrap: break-word;
}

.home-hero p {
  max-width: 52ch;
  margin-top: var(--sp-2);
  color: var(--secondary-label);
  font: 500 var(--t-callout)/var(--lh-callout) var(--font-text);
}

.home-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: var(--sp-3);
}

.home-stat {
  min-width: 0;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--material-thin);
  border: 0.5px solid var(--border-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.home-stat strong {
  display: block;
  color: var(--label);
  font: 800 var(--t-title-2)/1 var(--font-display);
}
.home-stat span {
  display: block;
  margin-top: 4px;
  color: var(--secondary-label);
  font: 700 var(--t-caption-2)/1.2 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.home-hero__mosaic {
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 92px;
  gap: var(--sp-2);
  transform: rotate(-2deg);
  align-self: center;
}

.home-hero__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--tertiary-fill);
  box-shadow: var(--shadow-md);
}
.home-hero__poster:nth-child(2n) { transform: translateY(18px); }
.home-hero__poster:nth-child(3n) { transform: translateY(-12px); }
.home-hero__poster:nth-child(4n) { grid-row: span 2; }
.home-hero__poster--empty {
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
  font: 800 var(--t-title-3)/1 var(--font-display);
}

.home-social-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-5);
}

.home-social-main,
.home-social-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.home-social-side {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}

.home-panel {
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.home-panel--flush { padding-bottom: var(--sp-5); }

.home-panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.home-panel__head h2 {
  font: 800 var(--t-title-3)/var(--lh-title-3) var(--font-display);
  letter-spacing: 0;
}

.home-panel__head p {
  color: var(--secondary-label);
  margin-top: 4px;
  font: 400 var(--t-footnote)/var(--lh-footnote) var(--font-text);
}

.home-panel__link {
  color: var(--secondary-label);
  font: 800 var(--t-caption-2)/1.2 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.home-feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.home-feed-entry {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--tertiary-fill);
  border: 0.5px solid transparent;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.home-feed-entry:hover {
  transform: translateY(-2px);
  background: var(--secondary-fill);
  border-color: var(--border-soft);
}

.home-feed-entry__poster {
  width: 76px;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-system-grouped-background);
  color: var(--tertiary-label);
  font: 800 var(--t-subheadline)/1 var(--font-display);
}
.home-feed-entry__poster img { width: 100%; height: 100%; object-fit: cover; }
[data-category="music"] .home-feed-entry__poster { --card-aspect: 1 / 1; }

.home-feed-entry__body { min-width: 0; }

.home-feed-entry__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--tertiary-label);
  font: 600 var(--t-caption-1)/1.25 var(--font-text);
}
.home-feed-entry__meta a { color: var(--label); }

.home-feed-entry__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 8px/1 var(--font-display);
}
.home-feed-entry__avatar img { width: 100%; height: 100%; object-fit: cover; }

.home-feed-entry__title {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  text-align: left;
  color: var(--label);
  font: 800 var(--t-callout)/var(--lh-callout) var(--font-text);
}
.home-feed-entry__title:hover { color: var(--c, var(--system-blue)); }

.home-feed-entry__sub {
  color: var(--tertiary-label);
  font: 600 var(--t-caption-1)/1.3 var(--font-text);
}

.home-feed-entry__rating { margin-top: var(--sp-2); }

.home-feed-entry__review {
  color: var(--secondary-label);
  margin-top: var(--sp-2);
  font: 400 var(--t-footnote)/var(--lh-footnote) var(--font-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.home-feed-entry__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.home-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.home-review-card {
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--tertiary-fill);
  border: 0.5px solid transparent;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.home-review-card:hover { transform: translateY(-2px); border-color: var(--border-soft); }

.home-review-card__top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.home-review-card__poster {
  width: 58px;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--secondary-system-grouped-background);
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
  font: 800 var(--t-caption-1)/1 var(--font-display);
}
.home-review-card__poster img { width: 100%; height: 100%; object-fit: cover; }
[data-category="music"] .home-review-card__poster { --card-aspect: 1 / 1; }

.home-review-card__titleblock {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-review-card__titleblock > a {
  color: var(--label);
  font: 800 var(--t-subheadline)/1.25 var(--font-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-review-card__titleblock > span {
  color: var(--tertiary-label);
  font: 600 var(--t-caption-1)/1.2 var(--font-text);
}
.home-review-card > p {
  margin-top: var(--sp-3);
  color: var(--secondary-label);
  font: 500 var(--t-footnote)/var(--lh-footnote) var(--font-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.home-review-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.home-review-card__user {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--label);
  font: 700 var(--t-caption-1)/1.2 var(--font-text);
}
.home-review-card__user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-review-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 8px/1 var(--font-display);
}
.home-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-review-card__actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

.member-stack,
.notification-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.member-card {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--tertiary-fill);
  border: 0.5px solid transparent;
}

.member-card__covers {
  min-height: 54px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--secondary-fill);
}

.member-card__cover {
  width: 20%;
  min-height: 54px;
  object-fit: cover;
  background: var(--tertiary-fill);
}

.member-card__main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
}

.member-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 var(--t-caption-1)/1 var(--font-display);
}
.member-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-card__body { min-width: 0; }
.member-card__name {
  color: var(--label);
  font: 800 var(--t-subheadline)/1.2 var(--font-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.member-card__meta {
  margin-top: 3px;
  color: var(--tertiary-label);
  font: 600 var(--t-caption-1)/1.2 var(--font-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-card__follow { min-width: 82px; }

.notification-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--tertiary-fill);
  color: var(--label);
}
.notification-item:hover { opacity: 1; background: var(--secondary-fill); }
.notification-item__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 9px/1 var(--font-display);
}
.notification-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.notification-item__body { min-width: 0; }
.notification-item__body strong,
.notification-item__body span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-item__body strong { font: 700 var(--t-caption-1)/1.2 var(--font-text); }
.notification-item__body span {
  margin-top: 3px;
  color: var(--tertiary-label);
  font: 500 var(--t-caption-2)/1.2 var(--font-text);
}
.notification-item__poster {
  width: 34px;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: 5px;
  object-fit: cover;
  background: var(--secondary-fill);
}

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

.trending-poster {
  position: relative;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tertiary-fill);
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
  font: 800 var(--t-caption-1)/1 var(--font-display);
  transition: transform var(--t-base) var(--ease-out);
}
.trending-poster:hover { transform: translateY(-2px); opacity: 1; }
.trending-poster img { width: 100%; height: 100%; object-fit: cover; }
[data-category="music"].trending-poster { --card-aspect: 1 / 1; }

.trending-poster__count {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font: 800 10px/1 var(--font-text);
}

.home-empty {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--tertiary-fill);
}
.home-empty strong {
  color: var(--label);
  font: 800 var(--t-subheadline)/1.2 var(--font-text);
}
.home-empty span {
  color: var(--secondary-label);
  font: 400 var(--t-footnote)/var(--lh-footnote) var(--font-text);
}

@media (max-width: 980px) {
  .home-hero,
  .home-social-grid { grid-template-columns: 1fr; }
  .home-social-side { position: static; }
  .home-hero__mosaic {
    min-height: 180px;
    grid-auto-rows: 72px;
  }
}

@media (max-width: 720px) {
  .home-hero {
    padding: var(--sp-5);
    min-height: 0;
  }
  .home-hero__profile { align-items: flex-start; }
  .home-hero__avatar { width: 58px; height: 58px; font-size: var(--t-callout); }
  .home-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.2rem);
    max-width: none;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .home-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-review-grid { grid-template-columns: 1fr; }
  .home-feed-entry { grid-template-columns: 62px minmax(0, 1fr); }
  .home-feed-entry__poster { width: 62px; }
  .member-card__main { grid-template-columns: 42px minmax(0, 1fr); }
  .member-card__follow { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 480px) {
  .home-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-panel { padding: var(--sp-4); }
  .home-panel__head { align-items: flex-start; flex-direction: column; }
  .trending-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   Public visitor landing — featured users, samples, top reviews
   ============================================================ */
.landing-stats {
  display: flex;
  gap: var(--sp-7);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--sp-6) 0;
}

.landing-stats__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.landing-stats__big {
  font: 700 clamp(2rem, 4vw, 3rem)/1 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.landing-stats__label {
  font: 500 var(--t-footnote)/1 var(--font-text);
  color: var(--tertiary-label);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ----- Section heading reused for landing ----- */
.landing-section {
  padding: var(--sp-7) 0 var(--sp-3);
}

.landing-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.landing-section__head h2 {
  font: 700 clamp(1.4rem, 2.5vw, 1.875rem)/1.15 var(--font-display);
  letter-spacing: var(--tr-large);
}
.landing-section__head p {
  color: var(--secondary-label);
  font: 400 var(--t-subheadline)/1.4 var(--font-text);
  margin-top: 4px;
  max-width: 56ch;
}

.landing-section__more {
  font: 600 var(--t-subheadline)/1 var(--font-text);
  color: var(--system-blue);
}

/* ----- Horizontal scroll strip (used for users + posters) ----- */
.h-scroll {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* ----- Featured user card ----- */
.featured-user {
  width: 200px;
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--label);
  transition: transform var(--t-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.featured-user:hover { transform: translateY(-3px); color: var(--label); opacity: 1; }

.featured-user__cover {
  height: 80px;
  position: relative;
  background:
    radial-gradient(60% 100% at 20% 20%, var(--c, var(--system-blue-soft)) 0%, transparent 60%),
    radial-gradient(60% 100% at 80% 80%, var(--c, var(--system-purple-soft)) 0%, transparent 60%),
    var(--tertiary-fill);
}
.featured-user__cover img { width: 100%; height: 100%; object-fit: cover; }

.featured-user__body {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
}

.featured-user__avatar {
  position: absolute;
  top: -28px;
  left: var(--sp-4);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 3px solid var(--secondary-system-grouped-background);
  overflow: hidden;
  display: grid;
  place-items: center;
  font: 700 var(--t-callout)/1 var(--font-display);
  color: var(--secondary-label);
}
.featured-user__avatar img { width: 100%; height: 100%; object-fit: cover; }

.featured-user__name {
  margin-top: var(--sp-4);
  font: 600 var(--t-subheadline)/1.2 var(--font-text);
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.featured-user__handle {
  font: 400 var(--t-footnote)/1 var(--font-text);
  color: var(--tertiary-label);
  margin-top: 2px;
}
.featured-user__counts {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font: 500 var(--t-footnote)/1 var(--font-text);
  color: var(--secondary-label);
}
.featured-user__counts strong { color: var(--label); font-family: var(--font-display); }

/* ----- Sample poster (horizontal scroll items) ----- */
.sample-poster {
  width: 140px;
  text-decoration: none;
  color: var(--label);
  transition: transform var(--t-base) var(--ease-out);
}
.sample-poster:hover { transform: translateY(-2px); color: var(--label); opacity: 1; }

.sample-poster__cover {
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tertiary-fill);
  transition: box-shadow var(--t-base) var(--ease-out);
}
.sample-poster:hover .sample-poster__cover { box-shadow: var(--shadow-md); }
.sample-poster__cover img { width: 100%; height: 100%; object-fit: cover; }

.sample-poster__title {
  margin-top: var(--sp-2);
  font: 500 var(--t-footnote)/1.3 var(--font-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.6em;
}

.sample-poster__meta {
  font: 400 11px/1 var(--font-text);
  color: var(--tertiary-label);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sample-poster__meta .star { color: var(--film); }

/* ----- Top review card grid ----- */
.review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 720px) {
  .review-list { grid-template-columns: 1fr; }
}

.landing-review {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: var(--label);
  transition: transform var(--t-base) var(--ease-out);
}
.landing-review:hover { transform: translateY(-2px); color: var(--label); opacity: 1; }

.landing-review__cover {
  width: 72px;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-sm);
  background: var(--tertiary-fill);
  overflow: hidden;
}
.landing-review__cover img { width: 100%; height: 100%; object-fit: cover; }

.landing-review__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 4px;
}
.landing-review__head .avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  border: 0;
}
.landing-review__who {
  font: 600 var(--t-footnote)/1 var(--font-text);
  color: var(--label);
}
.landing-review__rating {
  margin-left: auto;
  color: var(--secondary-label);
  font: 500 var(--t-footnote)/1 var(--font-text);
}
.landing-review__rating .star { color: var(--film); }

.landing-review__title {
  font: 600 var(--t-callout)/1.25 var(--font-text);
  color: var(--label);
}
.landing-review__text {
  margin-top: 6px;
  color: var(--secondary-label);
  font: 400 var(--t-subheadline)/1.4 var(--font-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.landing-review__foot {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--tertiary-label);
  font: 400 var(--t-footnote)/1 var(--font-text);
}

/* ============================================================
   Dashboard — rainbow header + hero card + asymmetric bento grid
   (matches user-provided mockup)
   ============================================================ */

/* ---------- Dashboard header — neutral glass; the animated light-leak below
   handles the visual interest ---------- */
.dash-rainbow-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  display: flex;
  align-items: center;
  color: var(--label);
}

.dash-rainbow-header__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge-margin-compact);
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: var(--sp-3);
}

.dash-rainbow-header__group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  justify-self: start;
}

.dash-rainbow-header__brand {
  text-align: center;
  font: 600 var(--t-title-3)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--label);
  text-decoration: none;
}
.dash-rainbow-header__brand:hover { color: var(--label); opacity: 0.7; }

.dash-rainbow-header__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--secondary-label);
  border: 0;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  padding: 0;
}
.dash-rainbow-header__icon:hover { background: var(--quaternary-fill); color: var(--label); }
.dash-rainbow-header__icon svg { width: 22px; height: 22px; stroke: currentColor; }

/* Visitor mode — auth buttons replace icons on the right */
.dash-rainbow-header__auth {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.dash-rainbow-header__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font: 600 var(--t-footnote)/1 var(--font-text);
  color: var(--label);
  background: var(--tertiary-fill);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.dash-rainbow-header__pill:hover { background: var(--secondary-fill); color: var(--label); opacity: 1; }

.dash-rainbow-header__pill--solid {
  background: var(--label);
  color: var(--system-background);
}
.dash-rainbow-header__pill--solid:hover { background: var(--label); color: var(--system-background); opacity: 0.86; }

/* ---------- Fixed mesh-gradient background ----------
   Big, blurred, animated colorful blobs that live BEHIND every page.
   Position fixed = follows the viewport, no black void when you scroll.
   Five blobs in different hues, slow ken-burns translate+scale, never repeats
   the same composition. Works in light + dark themes.
*/
.light-leak {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: var(--system-grouped-background);
}

.light-leak__blob {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.6;
  will-change: transform;
  mix-blend-mode: normal;
}

:root[data-theme="dark"] .light-leak__blob { opacity: 0.42; filter: blur(140px); }

.light-leak__blob--a {
  background: radial-gradient(circle at center, #ff4ecf 0%, rgba(255, 78, 207, 0) 65%);
  top: -20%;
  left: -15%;
  animation: leak-a 28s ease-in-out infinite alternate;
}
.light-leak__blob--b {
  background: radial-gradient(circle at center, #4fa8ff 0%, rgba(79, 168, 255, 0) 65%);
  top: -10%;
  right: -20%;
  animation: leak-b 34s ease-in-out infinite alternate;
}
.light-leak__blob--c {
  background: radial-gradient(circle at center, #a063ff 0%, rgba(160, 99, 255, 0) 65%);
  top: 35%;
  left: 25%;
  width: 80vmin;
  height: 80vmin;
  animation: leak-c 40s ease-in-out infinite alternate;
}
.light-leak__blob--d {
  background: radial-gradient(circle at center, #ff8a3d 0%, rgba(255, 138, 61, 0) 65%);
  bottom: -15%;
  right: 10%;
  width: 60vmin;
  height: 60vmin;
  animation: leak-d 32s ease-in-out infinite alternate;
}
.light-leak__blob--e {
  background: radial-gradient(circle at center, #2dd9b6 0%, rgba(45, 217, 182, 0) 65%);
  bottom: -10%;
  left: -10%;
  width: 65vmin;
  height: 65vmin;
  animation: leak-e 36s ease-in-out infinite alternate;
}

@keyframes leak-a { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(12vw, 18vh) scale(1.2); } }
@keyframes leak-b { 0% { transform: translate(0, 0) scale(1.1); } 100% { transform: translate(-10vw, 14vh) scale(0.95); } }
@keyframes leak-c { 0% { transform: translate(0, 0) scale(0.95); } 100% { transform: translate(6vw, -10vh) scale(1.15); } }
@keyframes leak-d { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-14vw, -8vh) scale(1.1); } }
@keyframes leak-e { 0% { transform: translate(0, 0) scale(1.05); } 100% { transform: translate(10vw, -12vh) scale(0.9); } }

@media (prefers-reduced-motion: reduce) {
  .light-leak__blob { animation: none !important; }
}

/* Pages that use the mesh need a transparent main bg + above-the-mesh stacking */
.page--with-leak { position: relative; }
.page--with-leak > .container,
.page--with-leak > .container-wide,
.page--with-leak > .container-narrow { position: relative; z-index: 1; }
:root body:has(.page--with-leak) { background: transparent; }

/* Visitor hero contents (no avatar, has bullets) */
.dash-hero-card__visitor-sub {
  color: rgba(235, 235, 245, 0.7);
  font: 400 var(--t-callout)/1.5 var(--font-text);
  margin-top: var(--sp-3);
  max-width: 56ch;
}

.dash-hero-card__visitor-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.dash-hero-card__bullet {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font: 500 var(--t-subheadline)/1.4 var(--font-text);
  color: rgba(235, 235, 245, 0.85);
}

.dash-hero-card__bullet-dot {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}

.dash-hero-card__btn--solid {
  background: #fff;
  color: #18181b;
  border-color: #fff;
}
.dash-hero-card__btn--solid:hover {
  background: #fff;
  color: #18181b;
  border-color: #fff;
  opacity: 0.86;
}

/* ---------- Hero card (greeting + avatar + stats + actions) ---------- */
.dash-hero-card {
  position: relative;
  isolation: isolate;
  background: #0f0f12;
  color: #fff;
  border-radius: var(--r-2xl);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  margin-top: var(--sp-5);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Soft colour wash so the profile card reads richer than flat black */
.dash-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 78, 207, 0.22), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(79, 168, 255, 0.20), transparent 55%),
    linear-gradient(135deg, #17171d 0%, #0c0c0f 100%);
}

.dash-hero-card__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: center;
}

.dash-hero-card__greeting {
  font: 700 clamp(2rem, 5vw, 2.8rem)/1.05 var(--font-display);
  letter-spacing: var(--tr-large);
  color: #fff;
  margin-top: var(--sp-2);
  word-break: break-word;
}

.dash-hero-card__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  font: 700 var(--t-title-1)/1 var(--font-display);
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.14),
    0 0 0 6px rgba(255, 255, 255, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.4);
}
.dash-hero-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.dash-hero-card__name {
  font: 700 var(--t-title-2)/1.1 var(--font-display);
  letter-spacing: var(--tr-headline);
  color: #fff;
  margin-top: var(--sp-5);
}

.dash-hero-card__handle {
  color: rgba(235, 235, 245, 0.55);
  font: 400 var(--t-callout)/1.3 var(--font-text);
  margin-top: 4px;
}

.dash-hero-card__stats {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.dash-hero-card__stat {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 72px;
  padding: 0 var(--sp-2);
  position: relative;
}
.dash-hero-card__stat + .dash-hero-card__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
}
.dash-hero-card__stat strong {
  font: 700 clamp(1.4rem, 3vw, 1.85rem)/1 var(--font-display);
  letter-spacing: var(--tr-large);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.dash-hero-card__stat span {
  font: 500 var(--t-caption-1)/1.1 var(--font-text);
  color: rgba(235, 235, 245, 0.55);
  margin-top: 6px;
}

.dash-hero-card__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.dash-hero-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: transparent;
  color: rgba(235, 235, 245, 0.85);
  border: 1px solid rgba(235, 235, 245, 0.22);
  font: 500 var(--t-subheadline)/1 var(--font-text);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  text-decoration: none;
}
.dash-hero-card__btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(235, 235, 245, 0.38);
  opacity: 1;
}

@media (max-width: 640px) {
  .dash-hero-card { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .dash-hero-card__top { gap: var(--sp-3); }
  .dash-hero-card__avatar { width: 100px; height: 100px; font-size: var(--t-title-2); }
  .dash-hero-card__greeting { font-size: var(--t-title-1); }
  .dash-hero-card__stats { gap: var(--sp-5); }
}

/* ---------- Asymmetric bento grid (4 cards) ----------
   Layout:
     row 1: [small (2 cols)] [wide (3 cols)]
     row 2: [wide  (3 cols)] [small (2 cols)]
*/
.dash-bento {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(180px, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.dash-bento > :nth-child(1) { grid-column: 1 / 3; }
.dash-bento > :nth-child(2) { grid-column: 3 / 6; }
.dash-bento > :nth-child(3) { grid-column: 1 / 4; }
.dash-bento > :nth-child(4) { grid-column: 4 / 6; }

@media (max-width: 720px) {
  .dash-bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }
  .dash-bento > :nth-child(1),
  .dash-bento > :nth-child(2),
  .dash-bento > :nth-child(3),
  .dash-bento > :nth-child(4) {
    grid-column: auto;
  }
}

.dash-bento__card {
  --c: var(--system-blue);
  --c-soft: var(--system-blue-soft);
  position: relative;
  background: #0f0f12;
  color: #fff;
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.dash-bento__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: #fff;
  opacity: 1;
}

.dash-bento__card .dash-card__veil {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.34) 46%, rgba(0,0,0,0.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.72) 100%);
}

/* ---------- Flowing diagonal poster wall ----------
   Three columns of covers drifting up/down behind each category card,
   tilted on a diagonal. Replaces the old stacked/overlapping covers. */
.dash-card__wall {
  position: absolute;
  /* Overscan so the tilted, scaled grid always covers the card corners */
  inset: -30% -18%;
  z-index: 0;
  display: flex;
  gap: 12px;
  transform: rotate(-8deg) scale(1.12);
  transform-origin: center;
  opacity: 0.62;
  background:
    radial-gradient(90% 120% at 88% 6%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    linear-gradient(135deg, #141419, #050507);
}

.dash-card__wallcol {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  /* One slow, shared upward drift = a single calm surface, not racing streams */
  animation: wall-up 60s linear infinite;
  will-change: transform;
}

.dash-card__tile {
  width: 100%;
  aspect-ratio: var(--card-aspect, 2 / 3);
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-bento__card[data-category="music"] .dash-card__tile { --card-aspect: 1 / 1; }
.dash-bento__card[data-category="game"]  .dash-card__tile { --card-aspect: 3 / 4; }

/* The duplicated set means -50% returns to the exact starting frame */
@keyframes wall-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .dash-card__wallcol { animation: none; }
}

.dash-bento__title {
  position: absolute;
  bottom: var(--sp-5);
  left: var(--sp-5);
  z-index: 3;
  font: 700 clamp(1.4rem, 3vw, 1.9rem)/1 var(--font-display);
  letter-spacing: var(--tr-large);
  color: #fff;
}

.dash-bento__meta {
  position: absolute;
  bottom: calc(var(--sp-5) + 30px);
  left: var(--sp-5);
  z-index: 3;
  font: 500 var(--t-footnote)/1 var(--font-text);
  color: rgba(255, 255, 255, 0.7);
}

.dash-bento__badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 600 var(--t-caption-1)/1 var(--font-text);
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dash-bento__card--disabled {
  pointer-events: none;
  background: linear-gradient(135deg, #1a1a1f 0%, #0a0a0d 100%);
}

/* ============================================================
   Original dashboard greeting bar (legacy — used as fallback layout)
   ============================================================ */
.dash-greeting {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0 var(--sp-6);
}

.dash-greeting__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tertiary-fill);
  display: grid;
  place-items: center;
  font: 600 var(--t-title-3)/1 var(--font-display);
  color: var(--secondary-label);
  overflow: hidden;
  flex-shrink: 0;
}
.dash-greeting__avatar img { width: 100%; height: 100%; object-fit: cover; }

.dash-greeting__body { min-width: 0; flex: 1; }

.dash-greeting__title {
  font: 700 var(--t-large-title)/1.1 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
  word-break: break-word;
}

.dash-greeting__sub {
  color: var(--secondary-label);
  font: 400 var(--t-body)/1.4 var(--font-text);
  margin-top: 6px;
}

.dash-greeting__stats {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}

.dash-greeting__stat {
  font: 400 var(--t-subheadline)/1 var(--font-text);
  color: var(--secondary-label);
}
.dash-greeting__stat strong {
  font: 700 var(--t-callout)/1 var(--font-display);
  color: var(--label);
  margin-right: 4px;
}

@media (max-width: 640px) {
  .dash-greeting { padding: var(--sp-4) 0 var(--sp-5); gap: var(--sp-4); }
  .dash-greeting__avatar { width: 56px; height: 56px; font-size: var(--t-callout); }
  .dash-greeting__title { font-size: var(--t-title-1); }
  .dash-greeting__sub { font-size: var(--t-subheadline); }
}

/* --- Category dashboard cards (3 across on desktop) --- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-3);
}

@media (max-width: 880px) {
  .dash-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.dash-card {
  --c: var(--system-blue);
  --c-soft: var(--system-blue-soft);
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-soft);
  text-decoration: none;
  color: #fff;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  opacity: 1;
  color: #fff;
}

@media (max-width: 880px) {
  .dash-card { aspect-ratio: 16 / 10; }
}

/* Rotating cover layer */
.dash-card__covers {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dash-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation:
    dash-cycle 24s ease-in-out infinite,
    dash-zoom  24s ease-in-out infinite;
  will-change: opacity, transform;
}
/* 4 covers, 6s each (with 1s cross-fade) */
.dash-card__cover:nth-child(1) { animation-delay: 0s,  0s; }
.dash-card__cover:nth-child(2) { animation-delay: 6s,  6s; }
.dash-card__cover:nth-child(3) { animation-delay: 12s, 12s; }
.dash-card__cover:nth-child(4) { animation-delay: 18s, 18s; }

@keyframes dash-cycle {
  0%, 20%   { opacity: 1; }
  25%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes dash-zoom {
  0%   { transform: scale(1.02); }
  25%  { transform: scale(1.12); }
  100% { transform: scale(1.02); }
}

/* Single-cover fallback when only one is available */
.dash-card__covers--single .dash-card__cover {
  animation: dash-zoom 18s ease-in-out infinite;
  opacity: 1;
}

/* Empty/loading state */
.dash-card__covers--empty {
  background:
    radial-gradient(60% 60% at 30% 30%, var(--c) 0%, transparent 60%),
    radial-gradient(60% 60% at 70% 70%, var(--c) 0%, transparent 60%),
    var(--c-soft);
  filter: saturate(0.85);
}

/* Tint + scrim for legibility */
.dash-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, var(--c) 0%, transparent 60%);
  mix-blend-mode: normal;
}

.dash-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6);
  color: #fff;
}

.dash-card__eyebrow {
  font: 700 var(--t-caption-2)/1 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-3);
}

.dash-card__title {
  font: 700 var(--t-title-1)/1.05 var(--font-display);
  letter-spacing: var(--tr-large);
  color: #fff;
}

.dash-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-4);
  font: 600 var(--t-footnote)/1 var(--font-text);
  color: rgba(255, 255, 255, 0.85);
}

.dash-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-card__cta .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

.dash-card:hover .dash-card__cta .arrow { transform: translateX(4px); }

/* ============================================================
   Category World (per-category page)
   ============================================================ */
.world-hero {
  position: relative;
  border-radius: var(--r-2xl);
  padding: var(--sp-7) var(--sp-6);
  margin-bottom: var(--sp-6);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 80% at 100% 0%, var(--c-soft) 0%, transparent 70%),
    var(--secondary-system-grouped-background);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  min-height: 180px;
}

.world-hero__title {
  font: 700 clamp(2rem, 5vw, 3.4rem)/1.05 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
}
.world-hero__sub {
  color: var(--secondary-label);
  font: 400 var(--t-callout)/1.5 var(--font-text);
  margin-top: var(--sp-2);
  max-width: 52ch;
}

.world-tabs {
  display: inline-flex;
  background: var(--secondary-fill);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.world-tab {
  min-height: 32px;
  padding: 7px 14px;
  font: 600 var(--t-subheadline)/1 var(--font-text);
  color: var(--label);
  border-radius: 7px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.world-tab:hover { background: var(--quaternary-fill); }
.world-tab.is-active {
  background: var(--secondary-system-grouped-background);
  color: var(--label);
  box-shadow: var(--shadow-sm);
}

.world-section { margin-top: var(--sp-6); }
.world-section + .world-section { margin-top: var(--sp-7); }

.world-feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---------- World banner (full-bleed image / gradient) ---------- */
.world-banner {
  position: relative;
  display: block;
  aspect-ratio: 4 / 1;
  max-height: 280px;
  min-height: 140px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background-color: var(--c, var(--surface-3));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  margin: var(--sp-2) 0 var(--sp-6);
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.world-banner:not(.has-image) {
  background-image: linear-gradient(135deg, var(--c, var(--system-blue)) 0%, var(--c-soft, var(--system-blue-soft)) 100%);
}

.world-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); opacity: 1; color: #fff; }

.world-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.05) 100%);
}

.world-banner__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sp-5) var(--sp-6);
  color: #fff;
}

.world-banner__eyebrow {
  font: 600 var(--t-caption-2)/1 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
}

.world-banner__title {
  font: 700 clamp(1.4rem, 3vw, 2rem)/1.15 var(--font-display);
  letter-spacing: var(--tr-large);
  color: #fff;
}

.world-banner__text {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.85);
  font: 400 var(--t-subheadline)/1.4 var(--font-text);
  max-width: 60ch;
}

@media (max-width: 640px) {
  .world-banner { aspect-ratio: 3 / 1; min-height: 120px; }
  .world-banner__body { padding: var(--sp-4); }
}

/* ---------- Section row (used for new releases + most discussed) ---------- */
.world-section-row {
  margin: var(--sp-6) 0;
}

/* ---------- Active users sidebar list ---------- */
.active-users-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.active-users-list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--label);
  transition: background var(--t-fast) var(--ease-out);
}
.active-users-list__row:hover { background: var(--tertiary-fill); color: var(--label); opacity: 1; }

.active-users-list__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font: 700 var(--t-caption-1)/1 var(--font-display);
  color: var(--secondary-label);
  overflow: hidden;
  flex-shrink: 0;
}
.active-users-list__avatar img { width: 100%; height: 100%; object-fit: cover; }

.active-users-list__info { min-width: 0; flex: 1; }

.active-users-list__name {
  font: 600 var(--t-footnote)/1.2 var(--font-text);
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-users-list__meta {
  font: 400 var(--t-caption-1)/1 var(--font-text);
  color: var(--tertiary-label);
  margin-top: 2px;
}

/* ---------- @mentions in comments ---------- */
.mention {
  color: var(--system-blue);
  font-weight: 500;
  text-decoration: none;
}
.mention:hover { text-decoration: underline; }

/* ---------- Comment delete button ---------- */
.modal-comments__delete {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tertiary-label);
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.modal-comments__delete:hover { background: var(--system-red-soft); color: var(--system-red); }

.modal-comments__text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Relationship badges + block button on profile ---------- */
.profile-badges {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: var(--sp-2);
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 600 var(--t-caption-1)/1 var(--font-text);
  letter-spacing: 0.04em;
}
.profile-badge--friend {
  background: var(--system-green-soft);
  color: var(--system-green);
}

/* ---------- Settings: privacy/notification preferences ---------- */
.settings-prefs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.settings-pref {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--tertiary-system-grouped-background);
  color: var(--label);
  font: 500 var(--t-subheadline)/1.3 var(--font-text);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}

.settings-pref:hover { background: var(--secondary-fill); }
.settings-pref input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--system-blue); flex-shrink: 0; }

/* Danger zone visual cue */
.settings-danger { border: 1px solid rgba(215, 0, 21, 0.18); }
.settings-danger h2 { color: var(--system-red); }

/* ---------- Settings: Instagram-style card list + nested sub-pages ---------- */
.settings-page { animation: settings-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1); }

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

.settings-cards {
  display: flex;
  flex-direction: column;
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.settings-card {
  display: grid;
  grid-template-columns: 36px 1fr 16px;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: var(--label);
  border-bottom: 0.5px solid var(--separator);
  transition: background var(--t-fast) var(--ease-out);
}
.settings-card:last-child { border-bottom: none; }
.settings-card:hover { background: var(--tertiary-fill); color: var(--label); opacity: 1; }

.settings-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--tertiary-fill);
  color: var(--label);
  position: relative;
}
.settings-card__icon::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.settings-card__icon--account   { background: var(--system-blue-soft);  color: var(--system-blue); }
.settings-card__icon--account::before   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.settings-card__icon--privacy   { background: var(--system-purple-soft); color: var(--system-purple); }
.settings-card__icon--privacy::before   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='10' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='10' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
.settings-card__icon--appearance{ background: var(--system-orange-soft); color: var(--system-orange); }
.settings-card__icon--appearance::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><path d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><path d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/></svg>"); }
.settings-card__icon--blocks    { background: var(--system-red-soft); color: var(--system-red); }
.settings-card__icon--blocks::before    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'/></svg>"); }
.settings-card__icon--danger    { background: var(--system-red-soft); color: var(--system-red); }
.settings-card__icon--danger::before    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/></svg>"); }

.settings-card__body { min-width: 0; }
.settings-card__title { font: 600 var(--t-body)/1.2 var(--font-text); color: var(--label); display: block; }
.settings-card__sub   { font: 400 var(--t-footnote)/1.3 var(--font-text); color: var(--tertiary-label); display: block; margin-top: 2px; }
.settings-card__chev  { font-size: 22px; color: var(--tertiary-label); }
.settings-card--danger .settings-card__title { color: var(--system-red); }

.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 6px;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--system-blue);
  font: 600 var(--t-callout)/1 var(--font-text);
  cursor: pointer;
  margin-bottom: var(--sp-4);
  transition: background var(--t-fast) var(--ease-out);
}
.settings-back:hover { background: var(--tertiary-fill); }

.settings-block {
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
}
.settings-block h2 {
  font: 600 var(--t-headline)/1.2 var(--font-text);
  margin-bottom: var(--sp-3);
}

/* legacy fallback (kept so older imports don't break) */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-7);
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
}

.settings-nav__item {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font: 500 var(--t-subheadline)/1.3 var(--font-text);
  color: var(--secondary-label);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.settings-nav__item:hover { background: var(--tertiary-fill); color: var(--label); opacity: 1; }
.settings-nav__item--danger { color: var(--system-red); }
.settings-nav__item--danger:hover { background: var(--system-red-soft); color: var(--system-red); }

.settings-body { min-width: 0; }
.settings-header { margin-bottom: var(--sp-6); }

@media (max-width: 880px) {
  .settings-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: var(--sp-2);
  }
  .settings-nav__item { white-space: nowrap; }
}

/* ---------- Theme picker (preview cards) ---------- */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  max-width: 420px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--tertiary-system-grouped-background);
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.theme-card:hover { transform: translateY(-1px); }
.theme-card.is-active { border-color: var(--system-blue); }

.theme-card__preview {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.theme-card__preview--light { background: #fbfbfd; border: 1px solid #d2d2d7; }
.theme-card__preview--light .theme-card__chrome { background: #f2f2f7; }
.theme-card__preview--light .theme-card__line   { background: #d2d2d7; }
.theme-card__preview--light .theme-card__row > div { background: #1d1d1f; }

.theme-card__preview--dark  { background: #000; }
.theme-card__preview--dark .theme-card__chrome { background: #1c1c1e; }
.theme-card__preview--dark .theme-card__line   { background: #38383a; }
.theme-card__preview--dark .theme-card__row > div { background: #f5f5f7; }

.theme-card__chrome { height: 14px; border-radius: 3px; }
.theme-card__line   { height: 6px; border-radius: 3px; width: 70%; }
.theme-card__line--short { width: 40%; }
.theme-card__row    { display: flex; gap: 4px; margin-top: auto; }
.theme-card__row > div { flex: 1; aspect-ratio: 1 / 1; border-radius: 3px; opacity: 0.85; }

.theme-card__label {
  font: 600 var(--t-subheadline)/1 var(--font-text);
  color: var(--label);
  text-align: center;
}

/* ---------- Language picker (with flags) ---------- */
.lang-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.lang-card {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--tertiary-system-grouped-background);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out);
}
.lang-card:hover { background: var(--secondary-fill); }
.lang-card.is-active { border-color: var(--system-blue); }

.lang-card__flag {
  font-size: 22px;
  line-height: 1;
}

.lang-card__name {
  font: 600 var(--t-subheadline)/1 var(--font-text);
  color: var(--label);
}

/* ============================================================
   Profile page — Twitter/X-style layout
   - Full-width banner (responsive height up to 320px on wide screens)
   - Two-column on desktop: main feed + right rail (favorites)
   - Avatar floats over banner at bottom-left
   ============================================================ */
.profile-page .container-wide { max-width: var(--container-wide); }

.profile-x {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 980px) {
  .profile-x { grid-template-columns: 1fr; }
}

.profile-x__main { min-width: 0; }
.profile-x__side { min-width: 0; }

/* Banner: scales with width, never pinched on desktop */
.profile-x__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  max-height: 360px;
  min-height: 180px;
  background:
    radial-gradient(80% 60% at 0% 0%,   rgba(244, 63, 138, 0.35) 0%, transparent 70%),
    radial-gradient(80% 60% at 100% 100%, rgba(192, 132, 252, 0.35) 0%, transparent 70%),
    var(--surface-3);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  overflow: hidden;
}
.profile-x__banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Body card sits just below banner, sharing the same rounded shell visually */
.profile-x__head {
  position: relative;
  background: var(--secondary-system-grouped-background);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}

.profile-x__avatar {
  position: absolute;
  top: -64px;
  left: var(--sp-6);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 4px solid var(--secondary-system-grouped-background);
  background: var(--surface-3);
  overflow: hidden;
  display: grid;
  place-items: center;
  font: 700 var(--t-title-1)/1 var(--font-display);
  color: var(--secondary-label);
  box-shadow: var(--shadow-md);
}
.profile-x__avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .profile-x__avatar { width: 96px; height: 96px; top: -48px; left: var(--sp-4); }
  .profile-x__head { padding: var(--sp-5) var(--sp-4); }
}

.profile-x__actions-top {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  min-height: 36px;
}

.profile-actions-inline {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.profile-x__name {
  font: 700 var(--t-title-1)/1.15 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
  word-break: break-word;
}

.profile-x__handle {
  color: var(--tertiary-label);
  font: 400 var(--t-subheadline)/1.3 var(--font-text);
  margin-top: 2px;
}

.profile-x__bio {
  color: var(--secondary-label);
  font: 400 var(--t-callout)/1.55 var(--font-text);
  margin-top: var(--sp-4);
  white-space: pre-wrap;
  max-width: 64ch;
}

.profile-x__meta {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  color: var(--tertiary-label);
  font: 400 var(--t-footnote)/1.4 var(--font-text);
  flex-wrap: wrap;
}

/* ----- New two-column inside profile head -----
   Left column: name / handle / bio / followers + following (compact)
   Right column: total + per-category log stats (color-coded, tappable)
*/
.profile-x__identity {
  margin-top: var(--sp-2);
}

.profile-x__social {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.profile-x__social-item {
  font: 400 var(--t-subheadline)/1 var(--font-text);
  color: var(--secondary-label);
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.profile-x__social-item:hover { color: var(--label); }
.profile-x__social-item strong {
  font-weight: 700;
  color: var(--label);
  margin-right: 4px;
  font-family: var(--font-display);
}

.profile-x__logstats {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--tertiary-system-grouped-background);
  border-radius: var(--r-xl);
  max-width: 100%;
}

.profile-x__logstats-total {
  font: 400 var(--t-callout)/1 var(--font-text);
  color: var(--secondary-label);
  margin-bottom: var(--sp-3);
}
.profile-x__logstats-total strong {
  font: 700 var(--t-title-2)/1 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
  margin-right: 6px;
}

.profile-x__logstats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.profile-x__cat-stat {
  --c: var(--label);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--secondary-system-grouped-background);
  font: 500 var(--t-footnote)/1 var(--font-text);
  color: var(--secondary-label);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.profile-x__cat-stat:hover { background: var(--tertiary-fill); color: var(--label); transform: translateY(-1px); opacity: 1; }
.profile-x__cat-stat strong {
  font: 700 var(--t-callout)/1 var(--font-display);
  color: var(--c);
  letter-spacing: var(--tr-headline);
}
.profile-x__cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
}

@media (min-width: 720px) {
  /* On wider screens lay identity + logstats side-by-side */
  .profile-x__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: var(--sp-6);
    align-items: start;
    padding-top: var(--sp-6);
  }
  .profile-x__actions-top { grid-column: 1 / -1; margin-bottom: 0; }
  .profile-x__avatar { /* anchored to the page top regardless of grid */ }
}

@media (max-width: 720px) {
  .profile-x__logstats { padding: var(--sp-4); }
  .profile-x__logstats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .profile-x__cat-stat { padding: 8px 10px; font-size: 11px; }
}

/* Right rail (favorites) — sticky on desktop */
.profile-x__rail-panel {
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
}
.profile-x__rail-panel + .profile-x__rail-panel { margin-top: var(--sp-4); }

.profile-x__rail-title {
  font: 700 var(--t-title-3)/1.2 var(--font-display);
  letter-spacing: var(--tr-headline);
  margin-bottom: var(--sp-2);
}
.profile-x__rail-sub {
  color: var(--tertiary-label);
  font: 400 var(--t-footnote)/1.4 var(--font-text);
  margin-bottom: var(--sp-4);
}

.profile-x__rail-favblock { margin-top: var(--sp-4); }
.profile-x__rail-favblock + .profile-x__rail-favblock { margin-top: var(--sp-5); }

.relation-modal__card {
  max-width: 520px;
}

.relation-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.relation-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--tertiary-fill);
}

.relation-row__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 var(--t-caption-1)/1 var(--font-display);
}
.relation-row__avatar img { width: 100%; height: 100%; object-fit: cover; }

.relation-row__body {
  min-width: 0;
  color: var(--label);
}
.relation-row__body:hover { opacity: 1; }
.relation-row__body strong,
.relation-row__body span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.relation-row__body strong { font: 800 var(--t-subheadline)/1.2 var(--font-text); }
.relation-row__body span {
  margin-top: 3px;
  color: var(--tertiary-label);
  font: 600 var(--t-caption-1)/1.2 var(--font-text);
}

.profile-video-section {
  min-width: 0;
}

.profile-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.profile-video-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  background: #050507;
  box-shadow: var(--shadow-sm);
}
.profile-video-tile:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.profile-video-tile__media,
.profile-video-tile__media img,
.profile-video-tile__shade {
  position: absolute;
  inset: 0;
}
.profile-video-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-video-tile__fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--c-soft, var(--secondary-fill));
  color: var(--secondary-label);
  font: 900 var(--t-title-2)/1 var(--font-display);
}
.profile-video-tile__shade {
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.78));
}
.profile-video-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.profile-video-tile__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-40%, -50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 11px solid #fff;
}
.profile-video-tile__meta {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
}
.profile-video-tile__meta strong,
.profile-video-tile__meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-video-tile__meta strong {
  color: #fff;
  font: 800 var(--t-caption-1)/1.2 var(--font-text);
}
.profile-video-tile__meta span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font: 700 10px/1 var(--font-text);
}

.saved-videos-modal__card {
  width: min(100%, 760px);
}

.saved-videos-modal__body .profile-video-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .profile-video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
  }
  .saved-videos-modal__body .profile-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .relation-row { grid-template-columns: 44px minmax(0, 1fr); }
  .relation-row .btn { grid-column: 1 / -1; width: 100%; }
}

.profile-x__rail-favhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

/* "Edit profile" inline modal styled on top of the standard modal */
.modal--edit-profile .modal__card { max-width: 720px; }
.edit-profile {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.edit-profile__cover {
  position: relative;
  aspect-ratio: 3 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tertiary-fill);
}
.edit-profile__cover img { width: 100%; height: 100%; object-fit: cover; }
.edit-profile__cover .edit-profile__upload {
  position: absolute;
  inset: auto var(--sp-3) var(--sp-3) auto;
}

.edit-profile__avatar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: calc(-1 * var(--sp-6));
  position: relative;
}
.edit-profile__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--secondary-system-grouped-background);
  background: var(--tertiary-fill);
  overflow: hidden;
  display: grid;
  place-items: center;
  font: 700 var(--t-title-2)/1 var(--font-display);
  color: var(--secondary-label);
  flex-shrink: 0;
}
.edit-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }

.edit-profile__upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font: 600 var(--t-footnote)/1 var(--font-text);
  cursor: pointer;
  border: 0;
}
.edit-profile__upload:hover { background: rgba(0,0,0,0.75); }
.edit-profile__upload input[type="file"] { display: none; }

.edit-profile__fields {
  display: grid;
  gap: var(--sp-4);
}

.edit-profile__username-status {
  font: 500 var(--t-footnote)/1 var(--font-text);
  min-height: 1.2em;
}
.edit-profile__username-status.is-ok { color: var(--system-green); }
.edit-profile__username-status.is-bad { color: var(--system-red); }

.edit-profile__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--separator);
}

/* ---------- Category visibility chips (edit profile) ---------- */
.edit-profile__cat-hint {
  color: var(--tertiary-label);
  font: 400 var(--t-footnote)/1.4 var(--font-text);
  margin: 0 0 var(--sp-3);
}
.edit-profile__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.edit-profile__cat-chip {
  --c: var(--label);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill, 999px);
  border: 1.5px solid var(--separator);
  background: var(--secondary-system-grouped-background);
  color: var(--secondary-label);
  font: 600 var(--t-footnote)/1 var(--font-text);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.edit-profile__cat-chip:hover { border-color: var(--c); }
.edit-profile__cat-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.edit-profile__cat-chip .profile-x__cat-dot { opacity: 0.35; transition: opacity var(--t-fast) var(--ease-out); }
.edit-profile__cat-chip:has(input:checked) {
  border-color: var(--c);
  background: var(--c-soft, var(--tertiary-fill));
  color: var(--label);
}
.edit-profile__cat-chip:has(input:checked) .profile-x__cat-dot { opacity: 1; }
.edit-profile__cat-chip:has(input:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; }

/* ---------- Recent strip ---------- */
.recent-strip {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: none;
}
.recent-strip::-webkit-scrollbar { display: none; }
.recent-strip > * { flex: 0 0 140px; scroll-snap-align: start; }

@media (max-width: 540px) {
  .recent-strip > * { flex-basis: 120px; }
}

/* ---------- Product dashboard ---------- */
.dashboard-hero {
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 0.5px solid var(--separator);
  box-shadow: var(--shadow-sm);
}
.dashboard-hero__cover {
  min-height: 150px;
  background: linear-gradient(120deg, var(--system-blue-soft), var(--system-green-soft)), var(--tertiary-fill);
}
.dashboard-hero__cover img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.dashboard-hero__body {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-end;
  padding: 0 var(--sp-6) var(--sp-6);
  margin-top: -44px;
}
.dashboard-hero__body .avatar {
  border: 4px solid var(--secondary-system-grouped-background);
  background: var(--secondary-system-grouped-background);
}
.dashboard-hero__main { flex: 1; min-width: 0; }
.dashboard-hero__eyebrow {
  color: var(--secondary-label);
  font: 700 var(--t-caption-2)/1.2 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-hero h1 {
  font: 800 var(--t-large-title)/var(--lh-large-title) var(--font-display);
  letter-spacing: var(--tr-large);
  margin-top: 2px;
}
.dashboard-hero p {
  color: var(--secondary-label);
  max-width: 62ch;
  font: 400 var(--t-callout)/var(--lh-callout) var(--font-text);
  margin-top: var(--sp-2);
}
.dashboard-hero__stats {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.dashboard-hero__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.dashboard-metric { min-width: 82px; }
.dashboard-metric strong {
  display: block;
  font: 800 var(--t-title-2)/1 var(--font-display);
  color: var(--label);
}
.dashboard-metric span {
  display: block;
  margin-top: 4px;
  color: var(--tertiary-label);
  font: 700 var(--t-caption-2)/1.2 var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.world-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--secondary-system-grouped-background);
  color: var(--label);
  border: 0.5px solid var(--separator);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.world-card:hover { opacity: 1; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.world-card__title {
  font: 800 var(--t-title-1)/1.05 var(--font-display);
  letter-spacing: var(--tr-large);
  margin-top: var(--sp-2);
}
.world-card p {
  color: var(--secondary-label);
  font: 400 var(--t-subheadline)/var(--lh-subheadline) var(--font-text);
  margin-top: var(--sp-3);
}
.world-card__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  color: var(--c);
  font: 700 var(--t-footnote)/1.2 var(--font-text);
}
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-5); }
.dashboard-panel,
.world-panel {
  background: var(--secondary-system-grouped-background);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  border: 0.5px solid var(--separator);
}
.dashboard-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-5);
  color: var(--secondary-label);
  background: var(--tertiary-fill);
  border-radius: var(--r-md);
  font: 500 var(--t-subheadline)/var(--lh-subheadline) var(--font-text);
}
.dashboard-list,
.world-feed { display: flex; flex-direction: column; gap: var(--sp-3); }
.dashboard-activity {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  color: var(--label);
  background: var(--tertiary-fill);
}
.dashboard-activity:hover { opacity: 1; background: var(--secondary-fill); }
.dashboard-activity__thumb {
  width: 44px;
  aspect-ratio: var(--card-aspect, 2 / 3);
  border-radius: var(--r-sm);
  background: var(--tertiary-fill);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--tertiary-label);
  font: 800 var(--t-footnote)/1 var(--font-display);
}
.dashboard-activity__thumb img { width: 100%; height: 100%; object-fit: cover; }
[data-category="music"] .dashboard-activity__thumb { --card-aspect: 1 / 1; }
.dashboard-activity strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 var(--t-subheadline)/1.25 var(--font-text);
}
.dashboard-activity span {
  display: block;
  color: var(--tertiary-label);
  font: 400 var(--t-footnote)/1.3 var(--font-text);
  margin-top: 2px;
}

/* ---------- Category worlds ---------- */
.world-hero {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: end;
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--c-soft), transparent 58%), var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
}
.world-hero h1 {
  font: 800 clamp(2rem, 5vw, 3.5rem)/1.02 var(--font-display);
  letter-spacing: var(--tr-large);
}
.world-hero p { color: var(--secondary-label); margin-top: var(--sp-3); max-width: 62ch; }
.world-hero__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.world-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: var(--sp-4); }
.world-hero--banner {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 5;
  padding: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 10% 0%, color-mix(in srgb, var(--c, var(--system-blue)) 34%, transparent), transparent 70%),
    radial-gradient(90% 120% at 88% 18%, rgba(255, 214, 10, 0.22), transparent 72%),
    radial-gradient(80% 110% at 52% 100%, rgba(255, 55, 95, 0.18), transparent 70%),
    linear-gradient(135deg, var(--secondary-system-background), var(--tertiary-system-background));
  background-size: cover;
  background-position: center;
  border: 0.5px solid var(--separator);
}
.world-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
.world-main,
.world-side { display: flex; flex-direction: column; gap: var(--sp-5); }
.media-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.feed-entry__review--open { -webkit-line-clamp: 8; }

@media (max-width: 900px) {
  .dashboard-grid,
  .world-layout,
  .world-hero { grid-template-columns: 1fr; }
  .world-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-hero__body { flex-direction: column; align-items: flex-start; }
  .dashboard-hero__actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .world-hero { padding: var(--sp-5); }
  .world-hero--banner {
    aspect-ratio: 16 / 8.5;
    padding: 0;
    border-radius: var(--r-xl);
  }
  .world-hero__stats { grid-template-columns: 1fr; }
  .dashboard-hero__body { padding: 0 var(--sp-4) var(--sp-5); }
}

/* ============================================================
   Video feed — reels-style vertical discovery
   ============================================================ */
.video-page {
  min-height: calc(100vh - var(--header-h));
  padding: var(--sp-4) 0 var(--sp-7);
  background:
    radial-gradient(circle at 18% 4%, rgba(10, 132, 255, 0.24), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(255, 55, 95, 0.22), transparent 32%),
    var(--system-grouped-background);
}
body:has(.video-page) {
  scroll-snap-type: y proximity;
}
.video-shell {
  width: min(100%, 470px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: 0 var(--edge-margin-compact);
}
.video-card {
  position: relative;
  min-height: min(760px, calc(100svh - var(--header-h) - 36px));
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  background: #050507;
  color: #fff;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-xl);
  scroll-snap-align: start;
}
.video-card__media,
.video-card__media img,
.video-card__shade { position: absolute; inset: 0; }
.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08);
}
.video-card__fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 22% 18%, var(--c, var(--system-blue)), transparent 38%),
    radial-gradient(circle at 80% 70%, var(--system-pink), transparent 44%),
    #111;
  color: rgba(255, 255, 255, 0.72);
  font: 900 5rem/1 var(--font-display);
}
.video-card__shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.28) 38%, rgba(0, 0, 0, 0.86)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 44%);
}
.video-card__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.video-card__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 18px solid #fff;
}
.video-card__content {
  position: absolute;
  z-index: 3;
  left: var(--sp-5);
  right: 92px;
  bottom: var(--sp-5);
}
.video-card__kicker {
  margin-bottom: var(--sp-2);
  color: rgba(255, 255, 255, 0.72);
  font: 800 var(--t-caption-1)/1.1 var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.video-card h2 {
  max-width: 100%;
  color: #fff;
  font: 900 clamp(1.6rem, 6vw, 2.45rem)/1.02 var(--font-display);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.video-card__rating { margin-top: var(--sp-3); color: #fff; }
.video-card p {
  max-width: 34ch;
  margin-top: var(--sp-3);
  color: rgba(255, 255, 255, 0.82);
  font: 500 var(--t-subheadline)/1.35 var(--font-text);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card__author {
  display: inline-flex;
  margin-top: var(--sp-3);
  color: #fff;
  font: 800 var(--t-subheadline)/1.1 var(--font-text);
}
.video-card__author:hover { color: #fff; opacity: 0.82; }
.video-card__date {
  margin-top: var(--sp-2);
  color: rgba(255, 255, 255, 0.58);
  font: 700 var(--t-caption-1)/1 var(--font-text);
}
.video-card__more {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 4;
  min-width: 46px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font: 900 var(--t-title-3)/1 var(--font-display);
}
.video-card__rail {
  position: absolute;
  z-index: 5;
  right: var(--sp-4);
  bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.video-rail__profile {
  position: relative;
  margin-bottom: var(--sp-1);
}
.video-rail__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font: 900 var(--t-caption-1)/1 var(--font-display);
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.video-rail__avatar img { width: 100%; height: 100%; object-fit: cover; }
.video-rail__follow {
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff375f;
  color: #fff;
  border: 2px solid #050507;
  font: 900 18px/1 var(--font-display);
}
.video-rail__follow.is-following {
  background: var(--system-green);
  font-size: 13px;
}
.video-action {
  width: 56px;
  min-height: 56px;
  display: grid;
  place-items: center;
  gap: 3px;
  border-radius: var(--r-full);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.video-action:hover { opacity: 1; background: rgba(255, 255, 255, 0.22); }
.video-action.is-liked { color: #ff375f; }
.video-action.is-saved { color: #ffd60a; }
.video-action__count {
  min-height: 10px;
  font: 800 10px/1 var(--font-text);
}
.video-action__icon {
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.video-action__icon--heart { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35 10.55 20.03C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.54L12 21.35Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35 10.55 20.03C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.54L12 21.35Z'/></svg>"); }
.video-action__icon--comment { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>"); }
.video-action__icon--open { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M7 7h10v10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M7 7h10v10'/></svg>"); }
.video-action__icon--plus { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>"); }
.video-action__icon--save { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 3h12a1 1 0 0 1 1 1v18l-7-4-7 4V4a1 1 0 0 1 1-1Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 3h12a1 1 0 0 1 1 1v18l-7-4-7 4V4a1 1 0 0 1 1-1Z'/></svg>"); }
.video-action__icon--share { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18 16.1c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99 2.99 0 1 0 15 5c0 .24.04.47.09.7L8.04 9.81A3 3 0 1 0 8.04 14.2l7.12 4.18c-.05.2-.08.41-.08.62a2.92 2.92 0 1 0 2.92-2.9Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18 16.1c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99 2.99 0 1 0 15 5c0 .24.04.47.09.7L8.04 9.81A3 3 0 1 0 8.04 14.2l7.12 4.18c-.05.2-.08.41-.08.62a2.92 2.92 0 1 0 2.92-2.9Z'/></svg>"); }
.video-sound {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 4px;
  border-radius: var(--r-full);
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.video-sound__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.video-sound__icon {
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.06A4.5 4.5 0 0 0 16.5 12ZM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.06A4.5 4.5 0 0 0 16.5 12ZM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54Z'/></svg>") center/contain no-repeat;
}
.video-sound__btn.is-muted .video-sound__icon {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 5V4L7 9H3Zm15.6 3 2.1-2.1-1.4-1.4-2.1 2.1-2.1-2.1-1.4 1.4 2.1 2.1-2.1 2.1 1.4 1.4 2.1-2.1 2.1 2.1 1.4-1.4L18.6 12Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 5V4L7 9H3Zm15.6 3 2.1-2.1-1.4-1.4-2.1 2.1-2.1-2.1-1.4 1.4 2.1 2.1-2.1 2.1 1.4 1.4 2.1-2.1 2.1 2.1 1.4-1.4L18.6 12Z'/></svg>");
}
.video-sound__range {
  width: 0;
  opacity: 0;
  accent-color: #fff;
  transition: width var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.video-sound:hover .video-sound__range,
.video-sound:focus-within .video-sound__range {
  width: 112px;
  opacity: 1;
}
.video-sentinel,
.video-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--secondary-label);
  font: 700 var(--t-footnote)/1.2 var(--font-text);
}
.video-empty {
  min-height: calc(100svh - var(--header-h) - var(--bottom-nav-h));
  gap: var(--sp-3);
  align-content: center;
  padding: var(--sp-6);
}
.video-empty h1 {
  color: var(--label);
  font: 900 var(--t-title-1)/1.1 var(--font-display);
}
.video-skeleton {
  height: min(760px, calc(100svh - var(--header-h) - 36px));
  border-radius: var(--r-2xl);
}
@media (max-width: 720px) {
  .video-page { padding: var(--sp-2) 0 calc(var(--bottom-nav-h) + var(--sp-4)); }
  .video-shell { gap: var(--sp-3); }
  .video-card {
    min-height: calc(100svh - var(--header-h) - var(--bottom-nav-h) - var(--sp-5));
    border-radius: var(--r-xl);
  }
  .video-card__content {
    left: var(--sp-4);
    right: 76px;
    bottom: var(--sp-4);
  }
  .video-card__rail {
    right: var(--sp-3);
    bottom: var(--sp-4);
  }
  .video-action {
    width: 48px;
    min-height: 48px;
  }
  .video-rail__avatar { width: 48px; height: 48px; }
  .video-sound { top: var(--sp-3); left: var(--sp-3); }
  .video-card__more { top: var(--sp-3); right: var(--sp-3); }
  .video-card p { -webkit-line-clamp: 3; }
}

.video-comments {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  pointer-events: none;
}

.video-comments.is-open {
  display: block;
  pointer-events: auto;
}

.video-comments__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
}

.video-comments__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(440px, 100vw);
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--system-background);
  border-left: 0.5px solid var(--separator);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
}

.video-comments.is-open .video-comments__panel { transform: translateX(0); }

.video-comments__grab { display: none; }

.video-comments__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-5);
  border-bottom: 0.5px solid var(--separator);
}

.video-comments__head h2 {
  font: 900 var(--t-title-2)/1.1 var(--font-display);
}

.video-comments__head p {
  margin-top: 3px;
  color: var(--secondary-label);
  font: 600 var(--t-footnote)/1.2 var(--font-text);
}

.video-comments__list {
  min-height: 0;
  overflow: auto;
  padding: var(--sp-3) var(--sp-5);
}

.video-comments__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

.video-comments__avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 900 var(--t-caption-1)/1 var(--font-display);
}

.video-comments__avatar img { width: 100%; height: 100%; object-fit: cover; }

.video-comments__body {
  min-width: 0;
}

.video-comments__meta {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  min-width: 0;
}

.video-comments__meta a {
  color: var(--label);
  font: 800 var(--t-subheadline)/1.2 var(--font-text);
}

.video-comments__meta span {
  color: var(--tertiary-label);
  font: 600 var(--t-caption-1)/1.2 var(--font-text);
}

.video-comments__body p {
  margin-top: 3px;
  color: var(--secondary-label);
  font: 500 var(--t-subheadline)/1.38 var(--font-text);
  overflow-wrap: anywhere;
}

.video-comments__delete {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--tertiary-label);
}

.video-comments__delete:hover { background: var(--secondary-fill); }

.video-comments__empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--secondary-label);
  font: 700 var(--t-footnote)/1.2 var(--font-text);
}

.video-comments__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 0.5px solid var(--separator);
  background: var(--system-background);
}

@media (max-width: 720px) {
  .video-comments {
    display: block;
    visibility: hidden;
  }
  .video-comments.is-open { visibility: visible; }
  .video-comments__backdrop { background: rgba(0, 0, 0, 0.28); }
  .video-comments__panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: min(70svh, 620px);
    border-left: none;
    border-top: 0.5px solid var(--separator);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    transform: translateY(100%);
  }
  .video-comments.is-open .video-comments__panel { transform: translateY(0); }
  .video-comments__grab {
    display: block;
    width: 42px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: var(--r-full);
    background: var(--separator);
  }
  .video-comments__head { padding: var(--sp-3) var(--sp-4); }
  .video-comments__list { padding: var(--sp-2) var(--sp-4); }
  .video-comments__form {
    padding: var(--sp-3) var(--sp-4) calc(env(safe-area-inset-bottom) + var(--sp-3));
  }
}

/* ============================================================
   Notifications center
   ============================================================ */
.notifications-hero { align-items: flex-end; }
.cat-tag--neutral {
  background: var(--secondary-fill);
  color: var(--secondary-label);
}
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.notification-row {
  display: grid;
  grid-template-columns: 46px 30px minmax(0, 1fr) 48px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-xl);
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  color: var(--label);
  box-shadow: var(--shadow-sm);
}
.notification-row:hover {
  opacity: 1;
  background: var(--tertiary-system-background);
}
.notification-row__avatar,
.notification-row__thumb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 var(--t-caption-1)/1 var(--font-display);
}
.notification-row__avatar img,
.notification-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.notification-row__thumb {
  border-radius: var(--r-sm);
  aspect-ratio: var(--card-aspect, 2 / 3);
  height: auto;
  min-height: 46px;
}
.notification-row__thumb.is-empty { aspect-ratio: 1; }
.notification-row__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--system-pink);
}
.notification-row__icon::before {
  content: '';
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.notification-row__icon--heart::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35 10.55 20.03C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.54L12 21.35Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35 10.55 20.03C5.4 15.36 2 12.27 2 8.5 2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.54L12 21.35Z'/></svg>"); }
.notification-row__icon--comment::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>"); }
.notification-row__icon--user::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.notification-row__icon--list::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h13M8 12h13M8 18h13'/><path d='M3 6h.01M3 12h.01M3 18h.01'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h13M8 12h13M8 18h13'/><path d='M3 6h.01M3 12h.01M3 18h.01'/></svg>"); }
.notification-row--comment .notification-row__icon,
.notification-row--mention .notification-row__icon { background: var(--system-blue); }
.notification-row--follow .notification-row__icon { background: var(--system-green); }
.notification-row--list_like .notification-row__icon { background: var(--system-purple); }
.notification-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.notification-row__body strong,
.notification-row__body span,
.notification-row__body em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-row__body strong {
  color: var(--label);
  font: 800 var(--t-subheadline)/1.2 var(--font-text);
}
.notification-row__body span,
.notification-row__body em {
  color: var(--secondary-label);
  font: 500 var(--t-footnote)/1.25 var(--font-text);
}
.notification-row__body em {
  color: var(--tertiary-label);
  font-style: normal;
}
.notification-row__chev {
  color: var(--tertiary-label);
  font: 800 var(--t-title-2)/1 var(--font-display);
  justify-self: center;
}
@media (max-width: 520px) {
  .notification-row {
    grid-template-columns: 42px 26px minmax(0, 1fr) 42px;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .notification-row__avatar,
  .notification-row__thumb {
    width: 42px;
    min-height: 42px;
  }
}

/* ============================================================
   Notifications popup — message-bubble dropdown from the heart
   ============================================================ */
.notif-pop-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  justify-self: end;
}

.notif-pop__btn { position: relative; overflow: visible; }

.notif-pop__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--system-pink, #ff2d55);
  color: #fff;
  font: 700 10px/16px var(--font-text);
  text-align: center;
  box-shadow: 0 0 0 2px var(--glass, var(--system-background));
  pointer-events: none;
}

.notif-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: -4px;
  z-index: 120;
  width: min(360px, calc(100vw - 24px));
  max-height: min(70svh, 520px);
  /* Hidden by default; shown only while the wrapper is open. Gating on the
     class (not [hidden]) avoids display:flex silently overriding the attribute. */
  display: none;
  flex-direction: column;
  background: var(--secondary-system-grouped-background, var(--system-background));
  border: 0.5px solid var(--separator);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0, 0, 0, 0.28));
  overflow: hidden;
  transform-origin: top right;
  animation: notif-pop-in 160ms var(--ease-out, ease-out);
}
.notif-pop-wrap.is-open .notif-pop { display: flex; }

/* The little bubble tail pointing up at the heart */
.notif-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--secondary-system-grouped-background, var(--system-background));
  border-left: 0.5px solid var(--separator);
  border-top: 0.5px solid var(--separator);
  transform: rotate(45deg);
}

@keyframes notif-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.5px solid var(--separator);
}
.notif-pop__head strong {
  font: 700 var(--t-callout)/1 var(--font-display);
  color: var(--label);
}
.notif-pop__all {
  font: 600 var(--t-footnote)/1 var(--font-text);
  color: var(--system-blue, var(--label));
  text-decoration: none;
}
.notif-pop__all:hover { opacity: 0.7; }

.notif-pop__list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-pop__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-md);
  color: var(--label);
  text-decoration: none;
}
.notif-pop__row:hover { background: var(--tertiary-fill); opacity: 1; }

.notif-pop__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--secondary-fill);
  color: var(--secondary-label);
  font: 800 var(--t-caption-2)/1 var(--font-display);
}
.notif-pop__avatar img { width: 100%; height: 100%; object-fit: cover; }

.notif-pop__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-pop__text {
  font: 400 var(--t-footnote)/1.3 var(--font-text);
  color: var(--label);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-pop__text strong { font-weight: 700; }
.notif-pop__meta {
  font: 500 var(--t-caption-2)/1.2 var(--font-text);
  color: var(--tertiary-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-pop__thumb {
  width: 34px;
  height: 44px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--secondary-fill);
  flex-shrink: 0;
}
.notif-pop__thumb img { width: 100%; height: 100%; object-fit: cover; }

.notif-pop__empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.notif-pop__empty strong { font: 700 var(--t-subheadline)/1.2 var(--font-display); color: var(--label); }
.notif-pop__empty span { font: 400 var(--t-footnote)/1.4 var(--font-text); color: var(--secondary-label); }

/* ============================================================
   Site footer — company info + legal links (every page)
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-9, 64px);
  padding: var(--sp-6) var(--edge-margin-compact) calc(env(safe-area-inset-bottom) + var(--sp-6));
  border-top: 0.5px solid var(--separator);
  background: var(--secondary-system-grouped-background, var(--system-background));
  color: var(--secondary-label);
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-2);
}
.site-footer__link {
  color: var(--label);
  font: 600 var(--t-footnote)/1 var(--font-text);
}
.site-footer__link:hover { opacity: 0.7; }
.site-footer__company {
  font: 600 var(--t-caption-1)/1.4 var(--font-text);
  color: var(--secondary-label);
}
.site-footer__address,
.site-footer__copy {
  font: 400 var(--t-caption-2)/1.4 var(--font-text);
  color: var(--tertiary-label);
}

/* ============================================================
   Legal document page (/legal/:slug)
   ============================================================ */
.legal-page { padding: var(--sp-7) 0 var(--sp-5); }
.legal-page__title {
  font: 700 var(--t-large-title)/1.1 var(--font-display);
  letter-spacing: var(--tr-large);
  color: var(--label);
}
.legal-page__updated {
  margin-top: var(--sp-2);
  color: var(--tertiary-label);
  font: 500 var(--t-footnote)/1 var(--font-text);
}
.legal-page__body {
  margin-top: var(--sp-5);
  color: var(--label);
}
.legal-page__body p {
  margin: 0 0 var(--sp-4);
  font: 400 var(--t-body)/1.65 var(--font-text);
  color: var(--secondary-label);
}

/* Registration consent checkbox */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--system-blue, #0a84ff);
}
.consent__text {
  font: 400 var(--t-footnote)/1.45 var(--font-text);
  color: var(--secondary-label);
}
.consent__text a { color: var(--link); font-weight: 600; }

/* ============================================================
   Lists — creator modal, detail page, popular strip (mobile-first)
   ============================================================ */

/* ---- Profile lists rail header + add button ---- */
.profile-x__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.profile-x__rail-add {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0;
  background: var(--tertiary-fill);
  color: var(--label);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.profile-x__rail-add:hover { background: var(--secondary-fill); }
.list-card.is-clickable { cursor: pointer; }

/* ---- Creator modal: bottom sheet on mobile, centered card on desktop ---- */
.lc-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.lc-card {
  --c: var(--system-blue);
  width: 100%;
  max-width: 560px;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--system-grouped-background, var(--system-background));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--shadow-xl, 0 -10px 40px rgba(0,0,0,0.3));
  animation: lc-slide-up 220ms var(--ease-out, ease-out);
  overflow: hidden;
}
@keyframes lc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 640px) {
  .lc-overlay { align-items: center; }
  .lc-card { border-radius: var(--r-2xl); max-height: 88vh; animation: lc-pop 180ms var(--ease-out, ease-out); }
  @keyframes lc-pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
}

.lc-card__head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.5px solid var(--separator);
}
.lc-card__title { font: 700 var(--t-headline)/1.2 var(--font-display); color: var(--label); text-align: center; }
.lc-card__back, .lc-card__close {
  width: 36px; height: 36px; border: 0; background: transparent; color: var(--secondary-label);
  font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.lc-card__back--ghost { visibility: hidden; }
.lc-card__back:hover, .lc-card__close:hover { background: var(--quaternary-fill); color: var(--label); }
.lc-card__body { padding: var(--sp-4); overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.lc-card__foot {
  padding: var(--sp-3) var(--sp-4) calc(env(safe-area-inset-bottom) + var(--sp-3));
  border-top: 0.5px solid var(--separator);
  background: var(--secondary-system-grouped-background, var(--system-background));
}
.lc-card__hint { color: var(--secondary-label); font: 400 var(--t-footnote)/1.4 var(--font-text); margin-bottom: var(--sp-3); }

.lc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.lc-cat {
  --c: var(--c);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-2); border-radius: var(--r-xl);
  border: 1px solid var(--separator); background: var(--secondary-system-grouped-background);
  cursor: pointer; color: var(--label);
}
.lc-cat:hover { border-color: var(--c); background: var(--quaternary-fill); }
.lc-cat__glyph {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; font: 800 var(--t-headline)/1 var(--font-display);
}
.lc-cat__label { font: 600 var(--t-subheadline)/1 var(--font-text); }

.lc-textarea { resize: vertical; min-height: 72px; font-family: inherit; }
.lc-visibility { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); cursor: pointer; }
.lc-visibility input { width: 18px; height: 18px; accent-color: var(--c); }
.lc-visibility span { font: 500 var(--t-footnote)/1.3 var(--font-text); color: var(--secondary-label); }
.lc-divider { height: 0.5px; background: var(--separator); margin: var(--sp-4) 0; }
.lc-cattag { margin-bottom: var(--sp-3); }

.lc-results { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); max-height: 320px; overflow-y: auto; }
.lc-result {
  display: grid; grid-template-columns: 40px minmax(0,1fr) 28px; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); border: 0; background: transparent; border-radius: var(--r-md);
  cursor: pointer; text-align: left; color: var(--label); width: 100%;
}
.lc-result:hover { background: var(--tertiary-fill); }
.lc-result.is-added { background: color-mix(in srgb, var(--c) 12%, transparent); }
.lc-result__cover {
  width: 40px; height: 54px; border-radius: var(--r-sm); overflow: hidden; background: var(--tertiary-fill);
  display: grid; place-items: center; font: 700 var(--t-caption-2)/1 var(--font-display); color: var(--tertiary-label);
}
.lc-result__cover img { width: 100%; height: 100%; object-fit: cover; }
.lc-result__title { font: 600 var(--t-footnote)/1.3 var(--font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-result__meta { grid-column: 2; font: 500 var(--t-caption-2)/1 var(--font-text); color: var(--tertiary-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-result__add { justify-self: center; font-size: 20px; color: var(--c); font-weight: 600; }
.lc-loading { padding: var(--sp-4); text-align: center; color: var(--secondary-label); font: 500 var(--t-footnote)/1 var(--font-text); }

.lc-selected { margin-top: var(--sp-3); }
.lc-selected__count { font: 600 var(--t-footnote)/1 var(--font-text); color: var(--secondary-label); margin-bottom: var(--sp-2); }
.lc-selected__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lc-chip {
  position: relative; width: 48px; height: 64px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--tertiary-fill); display: grid; place-items: center;
}
.lc-chip img { width: 100%; height: 100%; object-fit: cover; }
.lc-chip__glyph { font: 700 var(--t-caption-1)/1 var(--font-display); color: var(--tertiary-label); }
.lc-chip__x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,0.7); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}

/* ---- List detail page ---- */
.list-head {
  --c: var(--system-blue);
  position: relative;
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-2xl);
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  overflow: hidden;
}
.list-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.list-head__title { font: 700 var(--t-title-1)/1.15 var(--font-display); letter-spacing: var(--tr-large); color: var(--label); margin-top: var(--sp-2); }
.list-head__desc { margin-top: var(--sp-2); color: var(--secondary-label); font: 400 var(--t-body)/1.5 var(--font-text); }
.list-head__byline { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.list-head__avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--tertiary-fill); display: grid; place-items: center;
  color: var(--secondary-label); font: 800 var(--t-caption-1)/1 var(--font-display);
}
.list-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.list-head__owner { font: 600 var(--t-subheadline)/1.2 var(--font-text); color: var(--label); }
.list-head__meta { font: 500 var(--t-caption-1)/1.2 var(--font-text); color: var(--tertiary-label); }
.list-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.list-editor .lc-results { max-height: 360px; }
.list-editor .field { margin-bottom: var(--sp-3); }

/* ---- Popular lists strip (category world) ---- */
.list-strip-card {
  --c: var(--system-blue);
  flex: 0 0 200px;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--secondary-system-grouped-background);
  border: 0.5px solid var(--separator);
  text-decoration: none; color: var(--label);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.list-strip-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--label); opacity: 1; }
.list-strip-card__covers { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; background: var(--c); }
.list-strip-card__cover { overflow: hidden; display: grid; place-items: center; background: var(--tertiary-fill); color: var(--tertiary-label); font: 700 var(--t-caption-1)/1 var(--font-display); }
.list-strip-card__cover:only-child { grid-column: 1 / -1; }
.list-strip-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.list-strip-card__body { padding: var(--sp-3); }
.list-strip-card__title { font: 700 var(--t-subheadline)/1.25 var(--font-display); color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-strip-card__meta { margin-top: 4px; font: 500 var(--t-caption-1)/1.2 var(--font-text); color: var(--tertiary-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Brand logo (admin-uploaded SVG) — theme-aware, sized per location
   ============================================================ */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo__img { display: block; width: auto; }
/* Default (light theme / light background): show the light-bg logo. */
.brand-logo__img--dark { display: none; }
:root[data-theme="dark"] .brand-logo__img--light { display: none; }
:root[data-theme="dark"] .brand-logo__img--dark { display: block; }

/* Per-location sizing (logo scales to its own aspect ratio at this height) */
.brand-logo--header .brand-logo__img { height: 26px; max-width: 150px; object-fit: contain; }
.brand-logo--footer .brand-logo__img { height: 32px; max-width: 200px; object-fit: contain; margin: 0 auto var(--sp-2); }

/* When the brand is a logo, drop the wordmark dot spacing. The logo span is
   inline-level, so the existing text-align on the brand anchor keeps it placed
   correctly (centered in the rainbow header, left-aligned for visitors). */
.brand--logo { padding-left: 0; gap: 0; }