@font-face {
  font-family: 'Kaiyo Inter';
  src: url('fonts/Inter-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Full-width cover with identity and statistics above the profile tabs. */
@media (min-width: 901px) {
  body.profile-page.profile-compact.home-page { padding-top: 88px !important; }
}
body.profile-page.profile-compact .profile-shell {
  font-family: 'Kaiyo Inter', 'Segoe UI', sans-serif;
  font-weight: 400;
}
body.profile-page.profile-compact .profile-shell :is(button, input, textarea, select) { font-family: inherit; }
body.profile-page.profile-compact .profile-shell :is(h2, h3, strong) { font-weight: 600; }
body.profile-page.profile-compact .profile-shell :is(.profile-section-tab, .profile-favorite-name, .profile-recent-copy) { font-family: inherit; }
body.profile-page.profile-compact .profile-shell {
  --profile-avatar-size: clamp(170px, 15vw, 220px);
  --profile-banner-height: clamp(180px, 14vw, 240px);
  --profile-avatar-overlap: 64px;
  width: calc(100% - 48px);
  min-height: calc(100svh - 104px);
  padding: 28px 0 96px !important;
}

body.profile-page.profile-compact .profile-overview {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 26px;
  visibility: visible;
  transition: opacity .25s ease, transform .3s ease;
}

body.profile-page.profile-compact .profile-room-hero {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.profile-page.profile-compact .profile-summary-banner {
  padding: 0;
  margin: 0;
  min-height: 0;
}

body.profile-page.profile-compact .profile-banner-shell {
  width: 100%;
  height: var(--profile-banner-height) !important;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}

body.profile-page.profile-compact .profile-banner-backdrop::after {
  background: linear-gradient(180deg, transparent 40%, rgba(12,13,19,.3));
}

body.profile-page.profile-compact .profile-header {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 24px;
  column-gap: 24px !important;
  row-gap: 16px !important;
  align-items: start;
  grid-template-columns: var(--profile-avatar-size) minmax(0,1fr) minmax(280px,420px) !important;
}

body.profile-page.profile-compact .profile-banner-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.profile-page.profile-compact .profile-banner-actions .profile-edit-chip { width: 40px; height: 40px; flex: 0 0 40px; background: rgba(24,24,24,.85); border-color: rgba(255,255,255,.2); }

body.profile-page.profile-compact .profile-header-avatar {
  position: relative;
  inset: auto;
  width: var(--profile-avatar-size);
  margin: calc(-1 * var(--profile-avatar-overlap)) 0 0;
  padding: 0 !important;
  transform: none;
}

body.profile-page.profile-compact .profile-avatar-upload-hero { width: var(--profile-avatar-size); height: var(--profile-avatar-size); border-radius: 26px; box-shadow: none; filter: none; }
body.profile-page.profile-compact .profile-avatar-hero { border: 4px solid #242424; border-radius: 26px; box-shadow: 0 10px 30px #0004; }
body.profile-page.profile-compact .profile-header-avatar .profile-avatar-overlay { border-radius: 22px; }
body.profile-page.profile-compact .profile-crop-frame.is-avatar::after { border-radius: 12%; }
body.profile-page.profile-compact .profile-presence { left: 50%; bottom: 8px; font-size: 9px; }
body.profile-page.profile-compact .profile-header-copy { width: 100%; padding-top: 16px; }
body.profile-page.profile-compact .profile-name-row { justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; }
body.profile-page.profile-compact .profile-name-row h1 { min-width: 0; font-size: clamp(28px,2.6vw,40px); font-weight: 600; text-shadow: 0 2px 12px #0008; }
body.profile-page.profile-compact .profile-name-row h1:not(.has-premium-name-style) { font-family: 'Kaiyo Inter', 'Segoe UI', sans-serif; }
body.profile-page.profile-compact .profile-edit-chip { flex-shrink: 0; }
body.profile-page.profile-compact .profile-premium-badge { padding: 4px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: #303030; color: #eee; font-size: 11px; font-weight: 500; white-space: nowrap; }
body.profile-page.profile-compact .profile-premium-badge[hidden] { display: none; }
body.profile-page.profile-compact .profile-submeta-row {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px 10px;
}
body.profile-page.profile-compact .profile-member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: auto; max-width: 100%; min-width: 0; }
body.profile-page.profile-compact .profile-member-meta .profile-handle { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.profile-page.profile-compact .profile-member-since { width: auto; max-width: 100%; margin: 0; font-size: 11px; white-space: normal; }
body.profile-page.profile-compact .profile-role-tags { width: auto !important; flex-basis: auto !important; }
body.profile-page.profile-compact .profile-submeta-row .profile-role-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
body.profile-page.profile-compact .profile-submeta-row .profile-role-tags[hidden] { display: none; }
body.profile-page.profile-compact .profile-role-tags .profile-role-tag {
  min-height: 24px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--role-palette-start) 35%, transparent) !important;
  border-radius: 6px;
  background: color-mix(in srgb, var(--role-palette-start) 12%, transparent) !important;
  color: var(--role-palette-start);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
body.profile-page.profile-compact .profile-role-tag + .profile-role-tag::after { display: none; }
body.profile-page.profile-compact .profile-bio-block {
  width: 100%;
  max-width: 560px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  background: rgba(35,35,35,.82);
  box-shadow: none;
  backdrop-filter: none;
  gap: 8px;
}
body.profile-page.profile-compact .profile-summary-bio { font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
body.profile-page.profile-compact .profile-bio-kicker { display: none; }
body.profile-page.profile-compact .profile-bio-block[hidden] { display: none; }
body.profile-page.profile-compact .profile-stats-standalone {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  min-width: 0;
  align-self: start;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  max-height: none;
}
body.profile-page.profile-compact .profile-stats-standalone[hidden] { display: none; }
body.profile-page.profile-compact .profile-stat-box {
  min-height: 112px;
  padding: 12px 5px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(35,35,35,.82);
  box-shadow: none;
  backdrop-filter: none;
}
body.profile-page.profile-compact .profile-stat-box:last-child { border: 1px solid rgba(255,255,255,.07); }
body.profile-page.profile-compact .profile-stat-box-hours { order: 0; }
body.profile-page.profile-compact .profile-stat-box-anime { order: 1; }
body.profile-page.profile-compact .profile-stat-box-episode { order: 2; }
body.profile-page.profile-compact .profile-stat-icon { display: none; }
body.profile-page.profile-compact .profile-stat-copy { justify-items: center; text-align: center; }
body.profile-page.profile-compact .profile-stat-box strong { font-size: 23px; font-weight: 600; }
body.profile-page.profile-compact .profile-stat-label { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }

body.profile-page.profile-compact .profile-content { min-width: 0; padding: 0 24px; border: 0; background: none; box-shadow: none; }
body.profile-page.profile-compact .profile-content-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%,720px);
  margin-bottom: 20px;
  padding: 6px;
  border: 1px solid #303033;
  border-radius: 15px;
  background: #181818;
}
body.profile-page.profile-compact .profile-overview .profile-section-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
body.profile-page.profile-compact .profile-overview .profile-section-tabs { width: auto !important; max-width: 100% !important; }
body.profile-page.profile-compact .profile-overview .profile-section-tab {
  width: auto !important;
  flex: 1 0 auto;
  min-width: 0 !important;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #96969f;
  text-shadow: none;
}
body.profile-page.profile-compact .profile-overview .profile-section-tab:hover { background: #242424 !important; color: #dcdce1; text-shadow: none; }
body.profile-page.profile-compact .profile-overview .profile-section-tab.is-active { background: #fff !important; border-color: #fff !important; box-shadow: inset 0 0 0 1px #181818; color: #111; text-shadow: none; }
body.profile-page.profile-compact .profile-overview .profile-section-tab:focus-visible { outline-color: #b9b9c2; text-shadow: none; }
body.profile-page.profile-compact .profile-overview .profile-section-tab { gap: 8px; }
body.profile-page.profile-compact .profile-overview .profile-section-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 14px; color: inherit; opacity: 1; }
body.profile-page.profile-compact .profile-section-tab-icon .fi { display: inline-flex; font-size: 14px; line-height: 1; }
body.profile-page.profile-compact .profile-overview .profile-section-tab-text { font-size: 14px; }
body.profile-page.profile-compact .profile-overview .profile-section-tab-text::first-letter { font-size: inherit; }
body.profile-page.profile-compact .profile-section-tab::after { display: none; }
body.profile-page.profile-compact .profile-preview-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  color: #eeeef4;
  background: rgba(255,255,255,.04);
  font-weight: 600;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
body.profile-page.profile-compact .profile-preview-action { background: #fff; border-color: #fff; color: #111; text-shadow: none; }
body.profile-page.profile-compact .profile-preview-action .fi { display: inline-flex; align-items: center; font-size: 14px; line-height: 1; color: inherit; }
body.profile-page.profile-compact .profile-preview-action:hover { background: #e9e9ed; border-color: #e9e9ed; }
body.profile-page.profile-compact .profile-preview-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.profile-page.profile-compact .profile-content button:focus-visible { outline: 2px solid var(--room-accent); outline-offset: -3px; }
body.profile-page.profile-compact .profile-tab-panel.is-active[data-profile-panel] {
  display: block;
  max-height: none;
  padding: 0;
  animation: profileCompactPanel .22s ease;
}
body.profile-page.profile-compact .profile-tab-panel[hidden] { display: none; }
body.profile-page.profile-compact .profile-tab-panel[data-profile-panel] > .profile-panel,
body.profile-page.profile-compact .profile-private-notice {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.profile-page.profile-compact .profile-private-notice { padding: 48px 12px; }
body.profile-page.profile-compact .profile-panel-head { margin-bottom: 18px; }
body.profile-page.profile-compact .profile-panel-head h2,
body.profile-page.profile-compact .profile-list-subhead h3 { font-size: 18px; }
body.profile-page.profile-compact .profile-history-grid,
body.profile-page.profile-compact .profile-favorite-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 18px 14px; max-height: none; margin: 0; padding: 0; overflow: visible; }
body.profile-page.profile-compact .profile-history-grid .profile-recent-card { display: block; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.profile-page.profile-compact .profile-history-grid .profile-recent-card::before { display: none; }
body.profile-page.profile-compact .profile-history-grid .profile-recent-poster-wrap { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; }
body.profile-page.profile-compact .profile-history-grid .profile-recent-poster { width: 100%; height: 100%; object-fit: cover; }
body.profile-page.profile-compact .profile-recent-copy { display: grid; gap: 5px; padding: 10px 2px 0; }
body.profile-page.profile-compact .profile-history-grid .profile-recent-copy strong,
body.profile-page.profile-compact .profile-favorite-name { font-size: 13px; font-weight: 500; line-height: 1.4; color: #fff; text-shadow: 0 1px 5px #000, 0 2px 12px #000; }
body.profile-page.profile-compact .profile-recent-copy small { font-size: 11px; color: #e1e2e9; text-shadow: 0 1px 5px #000; }
body.profile-page.profile-compact .profile-favorite-media { border-radius: 12px; box-shadow: none; }
body.profile-page.profile-compact .profile-content :is(.profile-recent-card,.profile-favorite-card,.profile-favorite-link) {
  transform: none;
  transition: none;
  filter: none;
}
body.profile-page.profile-compact .profile-history-grid .profile-recent-card:is(:hover,:focus-visible,:active) {
  background: none;
  box-shadow: none;
}
body.profile-page.profile-compact .profile-favorite-media::after { display: none; }
body.profile-page.profile-compact .profile-content :is(img.profile-recent-poster,.profile-favorite-image) {
  transform: scale(1);
  transition: transform .3s ease;
}
body.profile-page.profile-compact .profile-recent-card:is(:hover,:focus-visible) img.profile-recent-poster,
body.profile-page.profile-compact .profile-favorite-link:is(:hover,:focus-visible) .profile-favorite-image {
  transform: scale(1.04);
}
body.profile-page.profile-compact .profile-tab-panel[data-profile-panel="favorites"] .profile-panel-head { display: none; }
body.profile-page.profile-compact .profile-history-head > div { display: none; }
body.profile-page.profile-compact .profile-history-head:has(.profile-history-toggle[hidden]) { display: none; }
body.profile-page.profile-compact .profile-history-head { justify-content: flex-end; }
body.profile-page.profile-compact .profile-content :is(.profile-review-card,.profile-stats-chart-card,.profile-stats-donut-card,.profile-list-card,.profile-list-copy,.profile-empty-panel) { background: transparent; box-shadow: none; backdrop-filter: none; }
body.profile-page.profile-compact .profile-content :is(h2,h3,p,.profile-panel-description) { text-shadow: 0 1px 5px #000; }
body.profile-page.profile-compact .profile-stats-layout {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
body.profile-page.profile-compact :is(.profile-stats-chart-card,.profile-stats-donut-card) {
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
}
body.profile-page.profile-compact .profile-stats-card-head { gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
body.profile-page.profile-compact .profile-stats-card-head h3 { font-size: 16px; }
body.profile-page.profile-compact .profile-stats-legend { gap: 8px 12px; font-size: 11px; }
body.profile-page.profile-compact .profile-stats-legend span { gap: 5px; }
body.profile-page.profile-compact .profile-stats-legend i { width: 7px; height: 7px; }
body.profile-page.profile-compact .profile-line-chart { position: relative; height: 180px; min-height: 0; border-radius: 6px; }
body.profile-page.profile-compact .profile-line-chart:focus-visible { outline: 1px solid #8a8a91; outline-offset: 4px; }
body.profile-page.profile-compact .profile-line-chart.is-empty { height: 72px; display: grid; place-items: center; }
body.profile-page.profile-compact .profile-chart-empty { margin: 0; color: #9c9ca4; font-size: 12px; text-align: center; }
body.profile-page.profile-compact .profile-chart-summary { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; color: #a1a1aa; font-size: 11px; text-shadow: 0 1px 5px #000; }
body.profile-page.profile-compact .profile-chart-summary strong { color: #f4f4f5; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.profile-page.profile-compact .profile-chart-summary-divider { margin: 0 5px; color: #62626b; }
body.profile-page.profile-compact .profile-chart-period { font-size: 10px; }
body.profile-page.profile-compact .profile-chart-grid-line { stroke-dasharray: 3 5; stroke: rgba(255,255,255,.07); }
body.profile-page.profile-compact .profile-chart-cursor { pointer-events: none; }
body.profile-page.profile-compact .profile-chart-cursor line { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 3 4; }
body.profile-page.profile-compact .profile-chart-cursor circle { stroke: #131318; stroke-width: 2; }
body.profile-page.profile-compact .profile-chart-tooltip { position: absolute; z-index: 2; top: 0; display: grid; gap: 4px; max-width: 100%; padding: 9px 11px; border: 1px solid #38383f; border-radius: 9px; background: #17171d; box-shadow: 0 4px 16px #0005; color: #a9a9b3; font-size: 11px; pointer-events: none; }
body.profile-page.profile-compact .profile-chart-tooltip[hidden] { display: none; }
body.profile-page.profile-compact .profile-chart-tooltip strong { color: #f4f4f5; font-size: 12px; }
body.profile-page.profile-compact .profile-chart-axis-label { font-size: 11px; font-weight: 500; }
body.profile-page.profile-compact :is(.profile-chart-path-blue,.profile-chart-path-green) { stroke-width: 2; }
body.profile-page.profile-compact .profile-stats-donut-card { grid-column: 1 / -1; }
body.profile-page.profile-compact .profile-donut-layout {
  grid-template-columns: 170px minmax(0,1fr);
  gap: 20px;
}
body.profile-page.profile-compact .profile-genre-donut { width: 170px; }
body.profile-page.profile-compact .profile-genre-donut-center strong { font-size: 26px; font-weight: 600; }
body.profile-page.profile-compact .profile-genre-donut-center span { font-size: 9px; }
body.profile-page.profile-compact .profile-genre-legend { gap: 6px; }
body.profile-page.profile-compact .profile-genre-legend-item { padding: 8px 10px; gap: 8px; border-radius: 10px; }
body.profile-page.profile-compact .profile-genre-legend-label { gap: 7px; font-size: 12px; font-weight: 500; }
body.profile-page.profile-compact .profile-genre-legend-value { font-size: 11px; }
@media (max-width: 540px) {
  body.profile-page.profile-compact .profile-donut-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
}
@media (max-width: 700px) {
  body.profile-page.profile-compact .profile-stats-layout { grid-template-columns: minmax(0,1fr); }
}
body.profile-page.profile-compact .profile-list-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.profile-page.profile-compact .profile-content .profile-empty-panel {
  grid-column: 1 / -1;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
body.profile-page.profile-compact .profile-content .profile-empty-panel::before,
body.profile-page.profile-compact .profile-content .profile-empty-panel::after { display: none; content: none; }
body.profile-page.profile-compact .profile-content .profile-empty-panel p { margin: 0; font-weight: 400; }

body.profile-page.profile-compact .profile-page-backdrop.has-image { opacity: 1; filter: none; transform: none; }
body.profile-page.profile-compact .profile-page-backdrop::before { background: linear-gradient(180deg,rgba(6,7,12,.2),rgba(6,7,12,.38)); }
body.profile-page.profile-compact .topbar { background: rgba(12,13,19,.88); }
body.profile-page.profile-compact :is(.profile-content,.topbar,.mobile-bottom-nav,.kaiyo-coffee-notice,footer) {
  transition: opacity .28s ease, visibility 0s;
}
body.profile-page.profile-compact .profile-content {
  transition: opacity .28s ease, transform .28s ease, visibility 0s;
}
body.profile-page.profile-compact.is-profile-background-preview .profile-content,
body.profile-page.profile-compact.is-profile-background-preview footer,
body.profile-page.profile-compact.is-profile-background-preview .topbar,
body.profile-page.profile-compact.is-profile-background-preview .mobile-bottom-nav,
body.profile-page.profile-compact.is-profile-background-preview .kaiyo-coffee-notice {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, .28s;
}
body.profile-page.profile-compact.is-profile-background-preview .profile-content {
  transform: translateY(8px);
  transition-delay: 0s, 0s, .28s;
}
body.profile-page.profile-compact.is-profile-preview-settled :is(.profile-content,footer) { display: none; }
body.profile-page.profile-compact.is-profile-background-preview .profile-page-backdrop::before { background: rgba(6,7,12,.06); }
body.profile-page.profile-compact.is-profile-background-preview .profile-page-backdrop.has-image { opacity: 1; filter: none; transform: none; }
@media (max-width: 800px) {
  body.profile-page.profile-compact :is(.profile-room-hero,.profile-bio-block,.profile-stat-box,.profile-avatar-hero) {
    transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
  }
  body.profile-page.profile-compact.is-profile-background-preview :is(.profile-room-hero,.profile-header,.profile-bio-block,.profile-summary-bio,.profile-stat-box) {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.profile-page.profile-compact.is-profile-background-preview .profile-room-hero { text-shadow: 0 1px 5px #000, 0 2px 12px #000; }
  body.profile-page.profile-compact.is-profile-background-preview .profile-avatar-hero { border-color: transparent; }
}

/* Loading placeholders follow the cover and horizontal identity layout. */
body.profile-page.profile-compact.is-profile-entering .profile-overview { opacity: 0; visibility: hidden; }
body.profile-page.profile-compact .profile-loading-skeleton { top: 28px; display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
body.profile-page.profile-compact .profile-skeleton-hero { padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; }
body.profile-page.profile-compact .profile-skeleton-banner { width: 100%; height: var(--profile-banner-height); min-height: 0; margin: 0; border-radius: 16px; }
body.profile-page.profile-compact .profile-skeleton-header-stack { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,420px); width: 100%; margin: 0; padding: 0 24px; gap: 24px; }
body.profile-page.profile-compact .profile-skeleton-identity { display: grid; grid-template-columns: var(--profile-avatar-size) minmax(0,1fr); gap: 24px; min-height: 0; padding: 0; border: 0; background: none; }
body.profile-page.profile-compact .profile-skeleton-avatar { position: relative; inset: auto; transform: none; width: var(--profile-avatar-size); height: var(--profile-avatar-size); margin-top: calc(-1 * var(--profile-avatar-overlap)); border-radius: 26px; }
body.profile-page.profile-compact .profile-skeleton-identity-copy { padding-top: 16px; }
body.profile-page.profile-compact .profile-skeleton-bio { display: none; }
body.profile-page.profile-compact .profile-skeleton-level,
body.profile-page.profile-compact .profile-skeleton-preview-button { display: none; }
body.profile-page.profile-compact .profile-skeleton-stats { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 24px; gap: 12px; }
body.profile-page.profile-compact .profile-skeleton-stat { min-height: 112px; border-radius: 16px; }
body.profile-page.profile-compact .profile-skeleton-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); grid-column: 1; grid-row: auto; width: min(100%,720px); height: 56px; margin: 0; }
body.profile-page.profile-compact .profile-skeleton-panels { grid-column: 1; grid-row: auto; margin: 0; display: block; }
body.profile-page.profile-compact .profile-skeleton-panel { min-height: 265px; }
body.profile-page.profile-compact .profile-skeleton-panel + .profile-skeleton-panel { display: none; }

@keyframes profileCompactPanel { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 1050px) {
  body.profile-page.profile-compact .profile-shell { width: calc(100% - 40px); }
  body.profile-page.profile-compact .profile-overview { gap: 18px; }
  body.profile-page.profile-compact .profile-history-grid,
  body.profile-page.profile-compact .profile-favorite-grid { gap: 18px 12px; }
}
@media (max-width: 1100px) {
  body.profile-page.profile-compact .profile-shell { --profile-avatar-size: 160px; --profile-banner-height: 180px; --profile-avatar-overlap: 56px; }
  body.profile-page.profile-compact .profile-header { grid-template-columns: var(--profile-avatar-size) minmax(0,1fr) !important; padding: 0 18px; column-gap: 20px !important; }
  body.profile-page.profile-compact .profile-content { padding: 0 18px; }
  body.profile-page.profile-compact .profile-header-avatar { grid-column: 1; grid-row: 1 / 3; }
  body.profile-page.profile-compact .profile-stats-standalone { grid-column: 2; margin-top: 0; max-width: 420px; width: 100%; }
  body.profile-page.profile-compact .profile-stat-box { min-height: 78px; }
  body.profile-page.profile-compact .profile-skeleton-header-stack { grid-template-columns: var(--profile-avatar-size) minmax(0,1fr); padding: 0 18px; gap: 16px 20px; }
  body.profile-page.profile-compact .profile-skeleton-identity { grid-column: 1 / -1; column-gap: 20px; }
  body.profile-page.profile-compact .profile-skeleton-stats { grid-column: 2; margin: 0; }
  body.profile-page.profile-compact .profile-skeleton-stat { min-height: 78px; }
}
@media (max-width: 800px) {
  body.profile-page.profile-compact .profile-shell { width: calc(100% - 28px); padding-top: 16px !important; }
  body.profile-page.profile-compact .profile-tab-panel.is-active[data-profile-panel] { padding: 0; }
  body.profile-page.profile-compact .profile-content-toolbar { gap: 8px; }
  body.profile-page.profile-compact .profile-overview .profile-section-tabs { flex-basis: 100%; }
  body.profile-page.profile-compact .profile-preview-action { min-height: 34px; }
  body.profile-page.profile-compact .profile-list-grid { grid-template-columns: minmax(0,1fr); }
  body.profile-page.profile-compact .profile-loading-skeleton { top: 16px; gap: 18px; }
}
@media (max-width: 640px) {
  /* Mobile cover fades into a compact identity, a single stats row and plain bio. */
  body.profile-page.profile-compact.home-page { padding-top: 0 !important; }
  body.profile-page.profile-compact .profile-shell {
    --profile-mobile-header-height: 72px;
    --profile-avatar-size: 56px;
    --profile-banner-height: calc(var(--profile-mobile-header-height) + clamp(270px, 78vw, 360px));
    --profile-avatar-overlap: 0px;
    width: 100%;
    padding-top: 0 !important;
  }
  body.profile-page.profile-compact .profile-overview { gap: 24px; }
  body.profile-page.profile-compact .profile-banner-shell { border-radius: 0; }
  body.profile-page.profile-compact .profile-banner-backdrop::after {
    background: linear-gradient(180deg, rgba(12,12,12,.12) 15%, rgba(12,12,12,.15) 40%, rgba(12,12,12,.85) 85%, #0c0c0c);
  }
  body.profile-page.profile-compact .profile-summary-banner {
    background: linear-gradient(180deg, transparent var(--profile-banner-height), #0c0c0c var(--profile-banner-height), rgba(12,12,12,.75) 85%, transparent);
    border-radius: 0;
  }
  body.profile-page.profile-compact .profile-header {
    position: relative;
    margin-top: -48px;
    padding: 0 20px;
    grid-template-columns: minmax(0,1fr) var(--profile-avatar-size) !important;
    column-gap: 14px !important;
    row-gap: 20px !important;
  }
  body.profile-page.profile-compact .profile-content { padding: 0 20px; }
  body.profile-page.profile-compact .profile-header-avatar { grid-column: 2; grid-row: 1; margin: 0; }
  body.profile-page.profile-compact .profile-header-copy { display: contents !important; }
  body.profile-page.profile-compact .profile-identity-inline { grid-column: 1; grid-row: 1; min-width: 0; padding-top: 0; }
  body.profile-page.profile-compact .profile-main-meta { gap: 8px; }
  body.profile-page.profile-compact .profile-name-row { gap: 6px 8px; }
  body.profile-page.profile-compact .profile-name-row h1 { font-size: clamp(26px, 7.5vw, 32px); font-weight: 700; letter-spacing: -.045em; }
  body.profile-page.profile-compact .profile-premium-badge { padding: 3px 7px; font-size: 9px; border-radius: 5px; }
  body.profile-page.profile-compact .profile-submeta-row { gap: 8px; }
  body.profile-page.profile-compact .profile-member-meta { gap: 4px 7px; }
  body.profile-page.profile-compact .profile-handle { color: #e3e3e5; }
  body.profile-page.profile-compact .profile-member-since { font-size: 10px; color: #a4a4aa; }
  body.profile-page.profile-compact .profile-role-tags .profile-role-tag { border-radius: 999px; font-size: 9px; padding: 5px 8px; }
  body.profile-page.profile-compact .profile-avatar-upload-hero,
  body.profile-page.profile-compact .profile-avatar-hero { border-radius: 18px; }
  body.profile-page.profile-compact .profile-avatar-hero { border-width: 2px; box-shadow: none; }
  body.profile-page.profile-compact .profile-header-avatar .profile-avatar-overlay { border-radius: 16px; font-size: 9px; }
  body.profile-page.profile-compact .profile-presence { bottom: -8px; min-width: 56px; padding: 3px 5px; font-size: 8px; }
  body.profile-page.profile-compact .profile-banner-actions { top: calc(var(--profile-mobile-header-height) + 16px); right: 20px; gap: 8px; }
  body.profile-page.profile-compact .profile-banner-actions .profile-edit-chip { width: 40px; height: 40px; flex-basis: 40px; border-radius: 50%; }
  body.profile-page.profile-compact .profile-preview-action { min-height: 40px; border-radius: 999px; }
  body.profile-page.profile-compact .profile-stats-standalone { grid-column: 1 / -1; grid-row: 2; max-width: none; gap: 0; margin: 0; }
  body.profile-page.profile-compact .profile-stat-box,
  body.profile-page.profile-compact .profile-stat-box:last-child {
    position: relative;
    min-height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  body.profile-page.profile-compact .profile-stat-box:not(.profile-stat-box-hours)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: rgba(255,255,255,.25);
  }
  body.profile-page.profile-compact .profile-stat-copy { gap: 4px; }
  body.profile-page.profile-compact .profile-stat-box strong { font-size: 22px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
  body.profile-page.profile-compact .profile-stat-label { font-size: 11px; color: #a4a4aa; }
  body.profile-page.profile-compact .profile-bio-block { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  body.profile-page.profile-compact .profile-summary-bio { margin: 0; padding: 0; font-size: 14px; line-height: 1.65; color: #eee; }
  body.profile-page.profile-compact .profile-status { grid-column: 1 / -1; grid-row: 4; }
  body.profile-page.profile-compact .profile-content-toolbar { padding: 4px; border-radius: 12px; margin-bottom: 18px; }
  body.profile-page.profile-compact .profile-overview .profile-section-tab { min-height: 40px; padding: 0 10px; gap: 6px; }
  body.profile-page.profile-compact .profile-overview .profile-section-tab-text { font-size: 12px; }
  body.profile-page.profile-compact .profile-page-backdrop::before,
  body.profile-page.profile-compact.is-profile-background-preview .profile-page-backdrop::before { background: rgba(6,7,12,.7); }
  body.profile-page.profile-compact .profile-loading-skeleton { top: 0; gap: 24px; }
  body.profile-page.profile-compact .profile-skeleton-banner { border-radius: 0; }
  body.profile-page.profile-compact .profile-skeleton-header-stack { grid-template-columns: minmax(0,1fr); padding: 0 20px; margin-top: -48px; gap: 20px; }
  body.profile-page.profile-compact .profile-skeleton-identity { grid-template-columns: minmax(0,1fr) var(--profile-avatar-size); column-gap: 14px; }
  body.profile-page.profile-compact .profile-skeleton-avatar { grid-column: 2; grid-row: 1; margin: 0; border-radius: 18px; }
  body.profile-page.profile-compact .profile-skeleton-identity-copy { grid-column: 1; grid-row: 1; padding: 0; }
  body.profile-page.profile-compact .profile-skeleton-stats { grid-column: 1 / -1; gap: 12px; }
  body.profile-page.profile-compact .profile-skeleton-stat { min-height: 48px; border-radius: 6px; }
  body.profile-page.profile-compact .profile-skeleton-tabs,
  body.profile-page.profile-compact .profile-skeleton-panels { width: calc(100% - 40px); margin: 0 20px; }
}
@media (max-width: 480px) {
  body.profile-page.profile-compact .profile-history-grid,
  body.profile-page.profile-compact .profile-favorite-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  body.profile-page.profile-compact :is(.profile-content,.topbar,.mobile-bottom-nav,.kaiyo-coffee-notice,footer,.profile-room-hero,.profile-bio-block,.profile-stat-box,.profile-avatar-hero) {
    transition: none;
  }
  body.profile-page.profile-compact .profile-content :is(img.profile-recent-poster,.profile-favorite-image) { transition: none; }
  body.profile-page.profile-compact .profile-overview { transition: none; }
  body.profile-page.profile-compact .profile-tab-panel.is-active[data-profile-panel] { animation: none; }
}